:root {
      --primary: 217 100% 50%;
      --secondary: 210 100% 58%;

      --background: 0 0 0;
      --foreground: 255 255 255;

      --border: 22 22 26;
      --card: 10 10 12;

      --muted: 8 8 10;
      --muted-foreground: 150 150 158;
      --muted-solid: 8, 8, 10;

      --radius: 0.75rem;

      --bg-primary: #000000;
      --bg-secondary: #050505;
      --surface: #0A0A0A;
      --surface-hover: #121212;
      --blue: #0066FF;
      --blue-light: #1A7AFF;
      --blue-vivid: #0088FF;
      --text-primary: #FFFFFF;
      --text-secondary: #9A9AA3;
      --line: #1A1A1F;
      --line-soft: rgba(255, 255, 255, 0.06);
      --blue-soft: rgba(0, 102, 255, 0.12);
      --blue-border: rgba(0, 102, 255, 0.55);
      --sidebar-w: 228px;
      --shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
      --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.85);
      --glow-blue: 0 0 0 1px rgba(0, 102, 255, 0.55), 0 0 18px rgba(0, 102, 255, 0.45);
      --transition: 0.18s ease;
    }

    /* Tailwind fallback: import quebrado não pode deixar carrinho/busca/dropdown visíveis */
    .hidden { display: none !important; }
    .invisible { visibility: hidden !important; pointer-events: none !important; }
    .size-3 { width: 12px; height: 12px; }
    .size-3\.5, .size-3-5 { width: 14px; height: 14px; }
    .size-4 { width: 16px; height: 16px; }
    .size-5 { width: 20px; height: 20px; }
    .size-6 { width: 24px; height: 24px; max-width: 24px; max-height: 24px; object-fit: contain; }
    .size-10 { width: 40px; height: 40px; max-width: 40px; max-height: 40px; }

    #cart-drawer,
    #cart-drawer.hidden,
    #cart-drawer[data-state="closed"] {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      z-index: -1 !important;
    }
    #cart-drawer[data-state="open"] {
      display: flex !important;
      visibility: visible !important;
      pointer-events: auto !important;
      z-index: 80 !important;
    }
    .dialog.hidden,
    .dialog[data-state="closed"]:not(.cp-dialog-open) {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    html body .dialog.cp-dialog-open,
    html body .dialog[data-state="open"] {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      z-index: 200 !important;
      background: rgba(0, 0, 0, 0.82) !important;
    }
    html body .dialog.cp-dialog-open > div,
    html body .dialog[data-state="open"] > div {
      background: #111111 !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      color: #fff !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75) !important;
    }
    .cp-mobile-search.hidden { display: none !important; }
    #phone-country-menu.invisible,
    #phone-country-menu.opacity-0 {
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    [data-payment-method] img {
      width: 24px !important;
      height: 24px !important;
      max-width: 24px !important;
      max-height: 24px !important;
      object-fit: contain !important;
    }

    html, body {
      background: #000000 !important;
      color: var(--text-primary);
      overflow-x: clip;
    }

    body {
      font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif !important;
    }

    ::selection {
      background: rgba(0, 102, 255, 0.55);
      color: #fff;
    }

    img { -webkit-user-drag: none; }

    /* ===== APP SHELL ===== */
    .cp-app {
      display: grid;
      grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
      min-height: 100vh;
      width: 100%;
      max-width: 1600px;
      margin-inline: auto;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      outline: none;
    }

    .cp-shell {
      min-width: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      background: var(--bg-primary);
      border: 0;
      border-radius: 0;
      box-shadow: none;
      outline: none;
    }

    .cp-shell > main {
      flex: 1 0 auto;
      width: 100%;
      padding: 24px 28px;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      outline: none;
    }

    .cp-shell > main > .container,
    .cp-shell .container {
      max-width: 100% !important;
      width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* CP-NO-SHELL-FRAME-20260808 — kill outer moldura around main content (edge-to-edge) */
    body[data-cp-theme="carapicuiba-v3"] .cp-app,
    body[data-cp-theme="carapicuiba-v3"] .cp-shell,
    body[data-cp-theme="carapicuiba-v3"] .cp-shell > main {
      border: 0 !important;
      border-width: 0 !important;
      border-style: none !important;
      border-color: transparent !important;
      border-left: 0 !important;
      border-right: 0 !important;
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-radius: 0 !important;
      outline: none !important;
      outline-offset: 0 !important;
      box-shadow: none !important;
      -webkit-box-shadow: none !important;
      --tw-ring-shadow: 0 0 #0000 !important;
      --tw-ring-offset-shadow: 0 0 #0000 !important;
      --tw-shadow: 0 0 #0000 !important;
    }
    body[data-cp-theme="carapicuiba-v3"] .cp-app {
      max-width: 1600px !important;
      margin-inline: auto !important;
      width: 100% !important;
    }
    /* CP-SIDEBAR-SEAMLESS-20260808 — same black as body, no edge bar */
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar {
      position: sticky !important;
      top: 0 !important;
      align-self: start !important;
      height: 100vh !important;
      max-height: 100vh !important;
      background: #000000 !important;
      border: 0 !important;
      border-right: none !important;
      border-radius: 0 !important;
      outline: none !important;
      box-shadow: none !important;
      -webkit-box-shadow: none !important;
    }
    body[data-cp-theme="carapicuiba-v3"] .cp-topbar {
      border-left: 0 !important;
      border-right: 0 !important;
      border-top: 0 !important;
      border-radius: 0 !important;
      outline: none !important;
      box-shadow: none !important;
    }
    body[data-cp-theme="carapicuiba-v3"] .cp-footer {
      border-left: 0 !important;
      border-right: 0 !important;
      border-bottom: 0 !important;
      border-radius: 0 !important;
      outline: none !important;
      box-shadow: none !important;
    }
    html:has(body[data-cp-theme="carapicuiba-v3"]),
    body[data-cp-theme="carapicuiba-v3"] {
      border: 0 !important;
      outline: none !important;
      box-shadow: none !important;
    }

    /* ===== SIDEBAR ===== */
    .cp-sidebar {
      position: sticky;
      top: 0;
      align-self: start;
      height: 100vh;
      max-height: 100vh;
      width: var(--sidebar-w);
      background: #000000;
      border-right: none !important;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      padding: 10px 8px;
      z-index: 40;
      overflow: hidden;
    }

    /* CP-SIDEBAR-LOGO-IMGUR-20260808e — Imgur GIF wide, near full sidebar width */
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-sidebar__brand {
      position: relative;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 0 !important;
      padding: 6px 6px 8px !important;
      overflow: visible !important;
      min-height: 0 !important;
      height: auto !important;
      width: 100% !important;
      background: #000 !important;
    }

    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-sidebar__logo {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      flex: 1 1 auto !important;
      overflow: visible !important;
      line-height: 0 !important;
    }

    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-sidebar__logo-text {
      display: flex !important;
      flex-direction: column !important;
      line-height: 1.05 !important;
      padding: 8px 0 !important;
      width: 100% !important;
    }
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-sidebar__logo-text strong {
      font-size: 34px !important;
      letter-spacing: -0.02em !important;
      line-height: 1.05 !important;
    }
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-sidebar__logo-text span {
      font-size: 16px !important;
      color: var(--text-secondary) !important;
      letter-spacing: 0.12em !important;
      font-weight: 600 !important;
    }

    /* Sidebar logo: square wordmark, contained — does not fill/explode the column */
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-sidebar__logo img,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar a.cp-sidebar__logo > img,
    body[data-cp-theme="carapicuiba-v3"] #cp-sidebar .cp-sidebar__logo img,
    body[data-cp-theme="carapicuiba-v3"] #cp-sidebar a.cp-sidebar__logo img.cp-sidebar__logo-img,
    body[data-cp-theme="carapicuiba-v3"] img.cp-sidebar__logo-img {
      display: block !important;
      width: auto !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: 64px !important;
      min-height: 0 !important;
      max-height: 64px !important;
      object-fit: contain !important;
      object-position: left center !important;
      flex-shrink: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .cp-sidebar__nav,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-sidebar__nav,
    body[data-cp-theme="carapicuiba-v3"] #cp-sidebar .cp-sidebar__nav {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding-right: 2px;
      padding-bottom: 8px;
    }
    .cp-sidebar__brand,
    .cp-sidebar__foot {
      flex-shrink: 0;
    }

    .cp-nav-heading {
      margin: 10px 8px 4px;
      padding: 0;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .cp-nav-sep {
      height: 1px;
      background: var(--line);
      margin: 6px 8px;
    }

    /* CP-NAV-COMPACT-20260912 — smaller accordion list, same colors */
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar a.cp-nav-item,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar button.cp-nav-item,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-toggle,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item:hover,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item:focus,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item:focus-visible,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item:active,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item.is-active,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-group.is-open > .cp-nav-toggle,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-group.is-open > .cp-nav-item {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      width: 100% !important;
      min-height: 32px !important;
      padding: 6px 8px !important;
      margin: 0 !important;
      border: 0 !important;
      border-width: 0 !important;
      border-style: none !important;
      border-color: transparent !important;
      border-radius: 0 !important;
      outline: none !important;
      outline-offset: 0 !important;
      box-shadow: none !important;
      -webkit-box-shadow: none !important;
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      filter: none !important;
      backdrop-filter: none !important;
      -webkit-appearance: none !important;
      appearance: none !important;
      --tw-ring-shadow: 0 0 #0000 !important;
      --tw-ring-offset-shadow: 0 0 #0000 !important;
      --tw-shadow: 0 0 #0000 !important;
      --tw-shadow-colored: 0 0 #0000 !important;
      text-decoration: none !important;
      font-size: 11.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.04em !important;
      text-transform: uppercase !important;
      text-align: left !important;
      cursor: pointer !important;
      transition: color 0.18s ease !important;
      color: var(--text-secondary) !important;
    }

    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item span {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item i {
      width: 14px !important;
      height: 14px !important;
      flex-shrink: 0 !important;
      color: #0066FF !important;
      transition: color 0.18s ease !important;
    }

    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item:hover,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item:focus,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item:focus-visible,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item:active,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item.is-active,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-group.is-open > .cp-nav-toggle,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-group.is-open > .cp-nav-item {
      color: #0066FF !important;
      background: transparent !important;
      background-color: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      outline: none !important;
    }

    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item.is-active i,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item:hover i,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-item i.cp-nav-chevron,
    body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-nav-group.is-open .cp-nav-chevron {
      color: #0066FF !important;
    }

    .cp-nav-chevron {
      margin-left: auto;
      width: 12px !important;
      height: 12px !important;
      transition: transform 0.18s ease, color 0.18s ease;
      opacity: 0.85;
      color: #0066FF;
    }
    .cp-nav-group.is-open .cp-nav-chevron {
      color: #0066FF;
      opacity: 1;
      transform: rotate(-90deg);
    }

    .cp-nav-group { position: relative; }

    .cp-nav-submenu[hidden] { display: none !important; }
    .cp-nav-submenu {
      display: none;
      flex-direction: column;
      padding: 0 0 4px 22px;
    }
    .cp-nav-group.is-open .cp-nav-submenu {
      display: flex;
    }

    body[data-cp-theme="carapicuiba-v3"] .cp-nav-subitem,
    body[data-cp-theme="carapicuiba-v3"] .cp-nav-subitem:hover,
    body[data-cp-theme="carapicuiba-v3"] .cp-nav-subitem:focus,
    body[data-cp-theme="carapicuiba-v3"] .cp-nav-subitem:focus-visible,
    body[data-cp-theme="carapicuiba-v3"] .cp-nav-subitem:active,
    body[data-cp-theme="carapicuiba-v3"] .cp-nav-subitem.is-active {
      display: block !important;
      padding: 5px 8px !important;
      border: 0 !important;
      border-radius: 0 !important;
      outline: none !important;
      box-shadow: none !important;
      background: transparent !important;
      background-color: transparent !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      letter-spacing: 0.03em !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      transition: color 0.18s ease !important;
      color: var(--text-secondary) !important;
      text-decoration: none !important;
    }
    body[data-cp-theme="carapicuiba-v3"] .cp-nav-subitem:hover,
    body[data-cp-theme="carapicuiba-v3"] .cp-nav-subitem:focus,
    body[data-cp-theme="carapicuiba-v3"] .cp-nav-subitem:active,
    body[data-cp-theme="carapicuiba-v3"] .cp-nav-subitem.is-active {
      color: #0066FF !important;
    }

    .cp-sidebar__foot {
      display: flex;
      gap: 8px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
      margin-top: 8px;
    }

    .cp-social-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 9px 8px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--surface);
      color: var(--text-secondary);
      font-size: 12px;
      transition: border-color var(--transition), color var(--transition), background var(--transition);
    }
    .cp-social-btn:hover {
      color: var(--blue);
      border-color: var(--blue-border);
      background: transparent;
      box-shadow: none;
    }
    .cp-social-btn:active {
      color: var(--blue);
      border-color: var(--blue);
      box-shadow: none;
    }

    .cp-sidebar-backdrop { display: none; }
    .cp-only-mobile { display: none !important; }

    /* ===== TOPBAR ===== */
    .cp-topbar {
      position: sticky;
      top: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 28px;
      background: rgba(0, 0, 0, 0.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }

    .cp-search-wrap {
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      min-height: 48px;
      background: #000000;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 0 14px;
      transition: border-color var(--transition), box-shadow var(--transition);
    }
    .cp-search-wrap:focus-within {
      border-color: var(--blue);
      box-shadow: var(--glow-blue);
    }

    .cp-search-icon { color: var(--text-secondary); flex-shrink: 0; margin-right: 10px; }

    .cp-search-input {
      width: 100% !important;
      height: 46px !important;
      border: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #fff !important;
      border-radius: 0 !important;
      padding: 0 !important;
    }
    .cp-search-input::placeholder { color: var(--text-secondary) !important; }

    .cp-search-results {
      position: absolute;
      left: 0; right: 0;
      top: calc(100% + 8px);
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 12px;
      max-height: 360px;
      overflow: auto;
      z-index: 50;
      box-shadow: var(--shadow);
    }
    .cp-search-results.hidden { display: none; }

    .cp-topbar__actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .cp-icon-btn {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #0A0A0A;
      color: #fff;
      display: grid;
      place-items: center;
      cursor: pointer;
      position: relative;
      transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
    }
    .cp-icon-btn:hover {
      border-color: var(--blue);
      background: #000;
      box-shadow: var(--glow-blue);
      transform: translateY(-1px);
    }
    .cp-icon-btn:active {
      transform: translateY(0) scale(0.96);
      box-shadow: 0 0 0 2px var(--blue), 0 0 22px rgba(0, 102, 255, 0.55);
    }

    .cp-user {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 12px 6px 6px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--surface);
    }
    .cp-user__avatar {
      width: 30px; height: 30px;
      border-radius: 8px;
      background: var(--blue);
      display: grid;
      place-items: center;
    }
    .cp-user__text { display: flex; flex-direction: column; line-height: 1.15; }
    .cp-user__text small { color: var(--text-secondary); font-size: 11px; }
    .cp-user__text strong { font-size: 13px; font-weight: 600; }

    .cp-mobile-search {
      padding: 0 32px 12px;
      border-bottom: 1px solid var(--line);
      background: rgba(5,8,13,0.92);
    }
    .cp-mobile-search.hidden { display: none !important; }

    /* ===== HERO ===== */
    /* CP-HERO-1536x337 — exact image ratio 1536/337 */
    .cp-hero {
      position: relative;
      width: 100%;
      max-width: 1536px;
      height: auto;
      aspect-ratio: 1536 / 337;
      min-height: 0;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--line-soft);
      background: var(--surface);
      box-shadow: var(--shadow);
      margin-bottom: 18px;
    }
    .cp-hero__slides {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .cp-hero__slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.5s ease;
      pointer-events: none;
    }
    .cp-hero__slide.is-active {
      opacity: 1;
      pointer-events: auto;
      z-index: 1;
    }
    .cp-hero__media, .cp-hero__fallback {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      overflow: hidden;
    }
    body[data-cp-theme="carapicuiba-v3"] #cp-hero .cp-hero__media,
    body[data-cp-theme="carapicuiba-v3"] .cp-hero .cp-hero__media {
      background-color: #000 !important;
      background-size: 100% 100% !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
    }
    body[data-cp-theme="carapicuiba-v3"] #cp-hero .cp-hero__slide[data-slide="0"] .cp-hero__media,
    body[data-cp-theme="carapicuiba-v3"] .cp-hero .cp-hero__slide[data-slide="0"] .cp-hero__media {
      background: #000 url("https://i.imgur.com/1EauY3C.jpeg") center / 100% 100% no-repeat !important;
    }
    body[data-cp-theme="carapicuiba-v3"] #cp-hero .cp-hero__slide[data-slide="1"] .cp-hero__media,
    body[data-cp-theme="carapicuiba-v3"] .cp-hero .cp-hero__slide[data-slide="1"] .cp-hero__media {
      background: #000 url("https://i.imgur.com/k2u2WA9.png") center / 100% 100% no-repeat !important;
    }
    body[data-cp-theme="carapicuiba-v3"] #cp-hero .cp-hero__slide[data-slide="2"] .cp-hero__media,
    body[data-cp-theme="carapicuiba-v3"] .cp-hero .cp-hero__slide[data-slide="2"] .cp-hero__media {
      background: #000 url("https://i.imgur.com/0yP9vJq.jpeg") center / 100% 100% no-repeat !important;
    }
    .cp-hero__media img,
    .cp-hero__fallback img {
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;
      object-fit: fill !important;
      object-position: center center !important;
      display: block !important;
      background: transparent !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    .cp-hero__hotspot {
      position: absolute;
      left: 4%;
      bottom: 18%;
      width: 200px;
      height: 52px;
      max-width: 42%;
      max-height: 64px;
      z-index: 2;
      border-radius: 10px;
      pointer-events: auto;
    }
    .cp-hero__fallback {
      background:
        radial-gradient(800px 380px at 80% 40%, rgba(0, 102, 255, 0.12), transparent 55%),
        linear-gradient(120deg, #000 0%, #050505 50%, #0A0A0A 100%);
    }
    .cp-hero__overlay {
      position: absolute; inset: 0;
      display: flex; align-items: center;
      padding: 40px 48px;
      background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.62) 42%, rgba(0,0,0,0.18) 100%);
      z-index: 2;
    }
    .cp-hero__eyebrow {
      margin: 0 0 10px;
      color: var(--blue-light);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .cp-hero h1 {
      margin: 0;
      font-size: clamp(40px, 5vw, 56px);
      line-height: 0.95;
      font-weight: 800;
      letter-spacing: -0.03em;
    }
    .cp-hero h1 span { display: block; }
    .cp-hero h1 .cp-hero__sub {
      color: var(--text-secondary);
      font-size: 0.55em;
      font-weight: 600;
      letter-spacing: 0.08em;
      margin-top: 6px;
    }
    .cp-hero__desc {
      margin: 16px 0 22px;
      color: var(--text-secondary);
      font-size: 15px;
      line-height: 1.55;
      max-width: 420px;
    }

    .cp-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 46px;
      padding: 0 20px;
      border-radius: 10px;
      background: var(--blue);
      color: #fff !important;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.02em;
      box-shadow: 0 8px 24px rgba(0, 102, 255, 0.35);
      transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    }
    .cp-cta:hover {
      background: var(--blue-vivid);
      transform: translateY(-1px);
      box-shadow: 0 10px 28px rgba(0, 136, 255, 0.45);
    }
    .cp-cta:active {
      transform: translateY(0) scale(0.97);
      box-shadow: 0 0 0 2px #fff, 0 0 24px rgba(0, 102, 255, 0.7);
    }

    .cp-hero__dots {
      position: absolute;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 3;
    }
    .cp-hero__dots button,
    .cp-hero__dots span {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      border: 0;
      padding: 0;
      cursor: pointer;
      background: rgba(255,255,255,0.25);
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .cp-hero__dots button.is-active,
    .cp-hero__dots span.is-active {
      background: var(--blue);
      transform: scale(1.15);
    }

    /* ===== SECTION / CARDS ===== */
    .cp-section { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
    .cp-section__head {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .cp-section__head h2 {
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .cp-section__icon {
      width: 20px;
      height: 20px;
      color: var(--blue-light);
    }
    .cp-section__head a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 500;
    }
    .cp-section__head a:hover { color: var(--blue-light); }

    .cp-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    /* ===== PRODUCT CAROUSEL ===== */
    .cp-carousel {
      position: relative;
      display: flex;
      align-items: stretch;
      gap: 10px;
    }
    .cp-carousel__viewport {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }
    .cp-carousel__track {
      overflow: visible;
    }
    .cp-carousel__slide {
      min-width: 0;
      height: auto;
    }
    .cp-carousel__slide .cp-card,
    .cp-carousel__slide a.package {
      height: 100%;
    }
    .cp-carousel__nav {
      flex-shrink: 0;
      align-self: center;
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(8, 12, 22, 0.92);
      color: rgba(255, 255, 255, 0.82);
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
      z-index: 2;
    }
    .cp-carousel__nav:hover {
      border-color: rgba(0, 102, 255, 0.55);
      background: rgba(0, 102, 255, 0.14);
      color: #fff;
    }
    .cp-carousel__nav:disabled,
    .cp-carousel__nav[aria-disabled="true"] {
      opacity: 0.35;
      cursor: default;
      pointer-events: none;
    }
    @media (max-width: 720px) {
      .cp-carousel { gap: 6px; }
      .cp-carousel__nav {
        width: 32px;
        height: 32px;
      }
    }

    a.package,
    .package,
    a.cp-card {
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      background: #050505 !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      border-radius: 16px !important;
      overflow: hidden !important;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
      backdrop-filter: none !important;
      padding: 0 !important;
      transform: none !important;
      text-decoration: none !important;
      color: inherit !important;
      transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition) !important;
    }
    a.package:hover,
    .package:hover,
    a.cp-card:hover {
      transform: translateY(-3px) !important;
      border-color: rgba(0, 102, 255, 0.55) !important;
      background: #0A0A0A !important;
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65), 0 0 18px rgba(0, 102, 255, 0.18) !important;
      filter: none !important;
    }
    a.package::before, .package::before { display: none !important; }

    /* Soft diagonal shine — single sweep on hover */
    a.cp-card::after,
    a.package::after {
      content: "";
      position: absolute;
      top: -20%;
      left: 0;
      width: 55%;
      height: 140%;
      z-index: 5;
      pointer-events: none;
      background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 38%,
        rgba(0, 102, 255, 0.09) 50%,
        rgba(255, 255, 255, 0.06) 62%,
        transparent 100%
      );
      transform: translateX(-160%) skewX(-18deg);
      opacity: 0;
      will-change: transform;
    }
    a.cp-card:hover::after,
    a.package:hover::after {
      opacity: 1;
      animation: cp-card-shine 1s ease forwards;
    }
    @keyframes cp-card-shine {
      0%   { transform: translateX(-160%) skewX(-18deg); }
      100% { transform: translateX(280%) skewX(-18deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      a.cp-card::after,
      a.package::after {
        display: none !important;
        animation: none !important;
      }
      a.cp-card:hover::after,
      a.package:hover::after {
        animation: none !important;
      }
    }

    .cp-card__media {
      position: relative;
      aspect-ratio: 1 / 1;
      width: 100%;
      min-height: 0;
      background: #000;
      display: block;
      padding: 0;
      overflow: hidden;
      border: 0 !important;
    }

    /* Corner CP ribbon — top-right of media */
    .cp-card-ribbon {
      --cp-ribbon-tip: 10px;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 4;
      width: 32px;
      height: 46px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 9px;
      box-sizing: border-box;
      pointer-events: none;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      font-style: italic;
      letter-spacing: 0.06em;
      line-height: 1;
      text-shadow: 0 0 8px rgba(0, 180, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.8);
      filter:
        drop-shadow(0 0 3px rgba(0, 102, 255, 0.75))
        drop-shadow(0 0 8px rgba(0, 102, 255, 0.4));
    }
    .cp-card-ribbon::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(#0066FF, #0066FF) left top / 1.5px calc(100% - var(--cp-ribbon-tip)) no-repeat,
        linear-gradient(#0066FF, #0066FF) right top / 1.5px calc(100% - var(--cp-ribbon-tip)) no-repeat,
        linear-gradient(
          135deg,
          transparent calc(50% - 0.9px),
          #0066FF calc(50% - 0.9px),
          #0066FF calc(50% + 0.9px),
          transparent calc(50% + 0.9px)
        ) left bottom / 50% var(--cp-ribbon-tip) no-repeat,
        linear-gradient(
          225deg,
          transparent calc(50% - 0.9px),
          #0066FF calc(50% - 0.9px),
          #0066FF calc(50% + 0.9px),
          transparent calc(50% + 0.9px)
        ) right bottom / 50% var(--cp-ribbon-tip) no-repeat,
        linear-gradient(
          180deg,
          rgba(0, 102, 255, 0.2) 0%,
          rgba(0, 0, 0, 0.82) 28%,
          rgba(0, 0, 0, 0.78) 100%
        );
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cp-ribbon-tip)), 50% 100%, 0 calc(100% - var(--cp-ribbon-tip)));
      pointer-events: none;
    }

    .cp-card__glow {
      display: none !important;
    }

    .cp-card__media img,
    a.package img,
    .package img {
      position: relative;
      z-index: 1;
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      max-height: none !important;
      object-fit: contain !important;
      object-position: center center !important;
      border: 0 !important;
      box-shadow: none !important;
      background: #000 !important;
      transition: transform 0.2s ease !important;
      filter: none;
    }
    a.cp-card:hover .cp-card__media img,
    a.package:hover .cp-card__media img {
      transform: scale(1.02);
    }
    .cp-card__media img.is-soldout { filter: blur(2px); opacity: 0.8; }

    .cp-card__soldout {
      position: absolute;
      inset: 0;
      margin: 0;
      z-index: 4;
      display: grid;
      place-items: center;
      font-size: 13px;
      font-weight: 800;
      color: #fff;
      background: rgba(0,0,0,0.45);
    }

    .cp-badge {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 3;
      background: #16A34A;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.02em;
      padding: 5px 9px;
      border-radius: 999px;
    }

    .cp-card__body {
      padding: 12px 14px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: #050505;
      border: 0 !important;
      border-top: 0 !important;
    }
    .cp-card__title {
      margin: 0;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 0;
      color: #C8C8D0;
    }
    .cp-card__row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px;
      margin-top: auto;
    }
    .cp-card__prices {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .cp-card__compare {
      color: #8B8B95;
      text-decoration: line-through;
      font-size: 12px;
      font-weight: 500;
    }
    .cp-card__price {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #fff;
    }
    .cp-card__prices small {
      color: #8B8B95;
      font-size: 12px;
      font-weight: 500;
    }
    .cp-card__cta {
      flex-shrink: 0;
      padding: 9px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.08);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      background: #141416;
      transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    }
    a.cp-card:hover .cp-card__cta,
    a.package:hover .cp-card__cta {
      background: var(--blue);
      border-color: var(--blue);
      box-shadow: 0 0 16px rgba(0, 102, 255, 0.4);
    }
    a.cp-card:active .cp-card__cta,
    a.package:active .cp-card__cta {
      transform: scale(0.96);
      box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(0, 102, 255, 0.65);
    }

    .cp-empty-soft {
      border: 1px solid var(--line-soft);
      background: var(--surface);
      color: var(--text-secondary);
      border-radius: 16px;
      padding: 40px 16px;
      text-align: center;
    }

    /* ===== BENEFITS ===== */
    .cp-benefits {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 6px;
    }
    .cp-benefit {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 16px;
      border-radius: 12px;
      background: #0A0A0A;
      border: 1px solid var(--line);
      box-shadow: 0 10px 28px rgba(0,0,0,0.55);
    }
    .cp-benefit__icon {
      width: 36px; height: 36px;
      border-radius: 8px;
      display: grid; place-items: center;
      background: #000;
      border: 1px solid var(--blue);
      color: var(--blue-vivid);
      box-shadow: 0 0 14px rgba(0, 102, 255, 0.35);
      flex-shrink: 0;
    }
    .cp-benefit h3 { margin: 0 0 4px; font-size: 14px; font-weight: 650; }
    .cp-benefit p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }

    /* ===== FOOTER (slim) ===== */
    .cp-footer {
      margin-top: auto;
      position: relative;
      border-top: 1px solid var(--line);
      background: #050505;
      color: #fff;
    }
    .cp-footer__inner {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px 24px;
      padding: 14px 28px;
      min-height: 56px;
    }
    .cp-footer__copy {
      margin: 0;
      color: var(--text-secondary);
      font-size: 12px;
      line-height: 1.4;
    }
    .cp-footer__pay {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-left: auto;
      padding: 6px 8px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.07);
      background: rgba(0,0,0,0.35);
    }
    .cp-footer__pay-icon {
      width: 20px;
      height: 20px;
      object-fit: contain;
      opacity: 0.9;
    }
    .cp-footer__marker {
      opacity: 0.35;
      margin-left: 8px;
      font-size: 10px;
    }
    .cp-footer__rating-img {
      display: block;
      flex-shrink: 0;
      height: 40px;
      width: auto;
      max-width: 40px;
      object-fit: contain;
    }

    /* ===== BUTTONS ===== */
    .open-cart {
      background: var(--surface) !important;
      border-color: var(--line) !important;
      color: #fff !important;
    }
    .open-cart:hover {
      background: var(--surface-hover) !important;
      border-color: rgba(0,102,255,0.35) !important;
    }

    .btn-primary,
    button.bg-primary,
    a.bg-primary,
    .bg-primary {
      background: var(--blue) !important;
      border-color: transparent !important;
      color: #fff !important;
      box-shadow: 0 8px 22px rgba(0, 102, 255, 0.35) !important;
      backdrop-filter: none !important;
      filter: none !important;
      transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important;
    }
    .btn-primary:hover,
    button.bg-primary:hover,
    a.bg-primary:hover,
    .bg-primary:hover {
      background: var(--blue-vivid) !important;
      filter: none !important;
      transform: translateY(-1px);
      box-shadow: 0 10px 28px rgba(0, 136, 255, 0.5) !important;
    }
    .btn-primary:active,
    button.bg-primary:active,
    a.bg-primary:active {
      transform: scale(0.97) !important;
      box-shadow: 0 0 0 2px #fff, 0 0 22px rgba(0, 102, 255, 0.7) !important;
    }

    .btn-secondary, .btn-outline, .btn-ghost, button.border, a.border {
      background: #0A0A0A !important;
      border-color: var(--line) !important;
      color: #fff !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }
    .btn-secondary:hover, .btn-outline:hover, .btn-ghost:hover, button.border:hover, a.border:hover {
      background: #000 !important;
      border-color: var(--blue) !important;
      box-shadow: var(--glow-blue) !important;
    }
    .btn-secondary:active, .btn-outline:active, .btn-ghost:active {
      box-shadow: 0 0 0 2px var(--blue), 0 0 18px rgba(0, 102, 255, 0.55) !important;
    }

    .text-primary, .hover\:text-primary:hover, .gradient-text {
      color: var(--blue-light) !important;
    }

    input, select, textarea,
    #search-bar, #search-bar-mobile, #category-search-bar {
      background: var(--surface) !important;
      border-color: var(--line) !important;
      color: #fff !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }

    #cart-drawer > div,
    .dialog > div,
    #chat-delivery-container,
    .centralcart-content {
      background: var(--bg-secondary) !important;
      border-color: var(--line) !important;
      box-shadow: var(--shadow) !important;
      backdrop-filter: blur(8px) !important;
    }

    #cart-drawer[data-state="open"],
    .dialog[data-state="open"] {
      background: rgba(0,0,0,0.55) !important;
    }

    .custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: var(--line) !important;
      border-radius: 999px;
    }

    .cart-badge {
      position: absolute;
      top: -4px; right: -4px;
      min-width: 18px; height: 18px;
      border-radius: 999px;
      background: var(--blue);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      display: grid;
      place-items: center;
      border: 2px solid var(--bg-primary);
    }

    /* hide decorative bg layers from old theme */
    .grid-background,
    .custom-bg-mask,
    body > .fixed.-z-10 { display: none !important; }

    @media (max-width: 1200px) {
      :root { --sidebar-w: 216px; }
    }

    @media (max-width: 1024px) {
      body[data-cp-theme="carapicuiba-v3"] .cp-app,
      .cp-app {
        display: block !important;
        grid-template-columns: none !important;
      }
      body[data-cp-theme="carapicuiba-v3"] #cp-sidebar.cp-sidebar,
      body[data-cp-theme="carapicuiba-v3"] .cp-sidebar,
      #cp-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        align-self: auto !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        width: min(236px, 88vw) !important;
        margin: 0 !important;
        transform: translate3d(-110%, 0, 0) !important;
        transition: transform 0.22s ease;
        box-shadow: var(--shadow);
        overflow: hidden !important;
        z-index: 60 !important;
        pointer-events: none;
      }
      body[data-cp-theme="carapicuiba-v3"] #cp-sidebar.cp-sidebar.is-open,
      body[data-cp-theme="carapicuiba-v3"] .cp-sidebar.is-open,
      #cp-sidebar.is-open {
        transform: none !important;
        pointer-events: auto;
      }
      body[data-cp-theme="carapicuiba-v3"] #cp-sidebar .cp-sidebar__nav,
      body[data-cp-theme="carapicuiba-v3"] .cp-sidebar .cp-sidebar__nav {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
      }
      .cp-sidebar-backdrop.is-open {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 55;
      }
      .cp-only-mobile { display: grid !important; }
      .cp-topbar, .cp-shell > main, .cp-mobile-search {
        padding-left: 16px; padding-right: 16px;
      }
      .cp-footer__inner { padding-left: 16px; padding-right: 16px; }
      .cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .cp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .cp-hero {
        width: 100%;
        height: auto;
        aspect-ratio: 1536 / 337;
        min-height: 0;
        overflow: hidden;
      }
      .cp-hero__media, .cp-hero__fallback {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .cp-hero__media img,
      .cp-hero__fallback img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: fill !important;
        object-position: center center !important;
      }
      .cp-hero__overlay { padding: 28px 24px; }
      .cp-user__text { display: none; }
    }

    @media (max-width: 768px) {
      .cp-topbar > .cp-search-wrap { display: none; }
    }

    @media (max-width: 560px) {
      .cp-grid, .cp-benefits { grid-template-columns: 1fr; }
      .cp-hero h1 { font-size: 32px; }
      .cp-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 16px;
        padding-bottom: 18px;
      }
      .cp-footer__rating-img {
        align-self: flex-end;
        height: 36px;
        max-width: 36px;
      }
      .cp-footer__pay {
        margin-left: 0;
      }
    }

    body.cp-nav-open { overflow: hidden; }

    /* ===== CATEGORY TITLE (minimal frame) ===== */
    .cp-category-title {
      margin: 0;
      display: inline-flex;
      align-items: center;
      width: fit-content;
      max-width: 100%;
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.2;
      color: #fff;
      padding: 0.45rem 0.9rem;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.02);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 8px 22px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.35);
    }
    .cp-category-title--sm {
      font-size: 0.95rem;
      font-weight: 600;
      padding: 0.35rem 0.75rem;
      border-radius: 8px;
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.03) inset,
        0 6px 16px rgba(0, 0, 0, 0.4);
    }

    /* ===== PACKAGE DETAIL (side-by-side, no color change) ===== */
    .cp-pkg {
      padding: 8px 0 40px;
    }
    .cp-pkg__layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-items: start;
    }
    .cp-pkg__main {
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-width: 0;
    }
    .cp-pkg__hero {
      display: grid;
      grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
      gap: 22px;
      align-items: start;
      padding: 16px 18px;
      border-radius: 16px;
      border: 1px solid var(--line-soft);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%),
        var(--surface);
      box-shadow:
        0 1px 0 rgba(255,255,255,0.03) inset,
        0 16px 40px rgba(0,0,0,0.35);
    }
    .cp-pkg__media {
      position: relative;
      width: 100% !important;
      height: 0 !important;
      padding-bottom: 100% !important;
      max-width: 460px !important;
      max-height: none !important;
      min-height: 0 !important;
      aspect-ratio: 1 / 1 !important;
      align-self: start;
      border-radius: 12px;
      overflow: hidden;
      background: #000;
      border: 1px solid rgba(255,255,255,0.06);
    }
    .cp-pkg__image,
    .cp-pkg__image.aspect-video,
    #package-image {
      position: absolute !important;
      inset: 0 !important;
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      max-height: none !important;
      aspect-ratio: auto !important;
      object-fit: contain !important;
      object-position: center !important;
    }
    .cp-pkg__info {
      display: flex;
      flex-direction: column;
      min-width: 0;
      height: 0;
      min-height: 100%;
      max-height: 100%;
      overflow: hidden;
    }
    .cp-pkg__info-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(190px, 220px);
      gap: 16px;
      align-items: start;
      position: relative;
      z-index: 8;
      flex-shrink: 0;
    }
    .cp-pkg__info-main {
      min-width: 0;
    }
    .cp-pkg__title {
      margin: 0;
      font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.25;
      color: #fff;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .cp-pkg__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
      margin-bottom: 8px;
    }
    .cp-pkg__chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin: 0;
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: var(--text-secondary);
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
    }
    .cp-pkg__chip--accent {
      color: #fff;
      border-color: rgba(0,102,255,0.35);
      background: rgba(0,102,255,0.14);
    }
    .cp-pkg__discount {
      display: none;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }
    .cp-pkg__discount.is-visible { display: flex; }
    .cp-pkg__compare {
      margin: 0;
      font-size: 0.95rem;
      color: var(--text-secondary);
      text-decoration: line-through;
      line-height: 1;
    }
    .cp-pkg__off {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      height: 22px;
      padding: 0 8px;
      font-size: 11px;
      font-weight: 700;
      color: var(--blue-light);
      border-radius: 6px;
      border: 1px solid rgba(0,102,255,0.28);
      background: rgba(0,102,255,0.1);
    }
    .cp-pkg__price-block { margin-bottom: 8px; }
    .cp-pkg__price {
      margin: 0;
      font-size: clamp(1.65rem, 1.4rem + 0.8vw, 2rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: #fff;
    }
    .cp-pkg__price-note {
      margin: 6px 0 0;
      font-size: 13px;
      color: var(--text-secondary);
    }
    #dialog-custom-fields > div {
      width: min(400px, calc(100vw - 32px)) !important;
      max-width: 400px !important;
      overflow: hidden !important;
      background: #111111 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    #dialog-custom-fields,
    #dialog-custom-fields p,
    #dialog-custom-fields label,
    #dialog-custom-fields h2,
    #dialog-custom-fields button {
      letter-spacing: 0 !important;
      word-spacing: normal !important;
      word-break: normal !important;
      overflow-wrap: break-word;
    }
    #dialog-custom-fields > div > .p-5.border-b {
      position: relative !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      min-height: 44px;
      padding: 8px 10px 0 !important;
      border: 0 !important;
      background: #111111 !important;
    }
    #dialog-custom-fields-title {
      display: none !important;
    }
    #dialog-custom-fields > div > .p-6 {
      padding: 0 20px 20px !important;
    }
    .cp-pkg__fields-hint {
      margin: 0 0 12px;
      padding: 0;
      font-size: 13px;
      line-height: 1.45;
      color: #9A9AA3;
    }
    #dialog-custom-fields label {
      color: #fff !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      line-height: 1.4 !important;
    }
    #dialog-custom-fields select,
    #dialog-custom-fields input {
      height: 42px !important;
      border-radius: 10px !important;
      border-color: rgba(255, 255, 255, 0.12) !important;
    }
    #dialog-custom-fields #custom-fields-confirm {
      margin-top: 16px !important;
      width: 100% !important;
      height: 40px !important;
      border-radius: 999px !important;
      background: var(--blue) !important;
      color: #fff !important;
      box-shadow: 0 8px 22px rgba(0, 102, 255, 0.35) !important;
    }
    .cp-pkg__actions {
      margin-top: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0;
      border: 0;
      background: transparent;
      position: relative;
      z-index: 9;
      pointer-events: auto;
    }
    .cp-pkg__cta,
    .cp-pkg__cart {
      height: 40px !important;
      width: 100%;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 999px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      letter-spacing: 0.02em;
      text-transform: none;
      white-space: nowrap;
      position: relative;
      z-index: 10;
      pointer-events: auto !important;
      cursor: pointer;
    }
    .cp-pkg__cta i,
    .cp-pkg__cta svg,
    .cp-pkg__cart i,
    .cp-pkg__cart svg {
      pointer-events: none !important;
    }
    .cp-pkg__cart {
      letter-spacing: 0.02em;
      text-transform: none;
      font-weight: 600 !important;
      height: 40px !important;
      background: transparent !important;
      border-color: rgba(255,255,255,0.12) !important;
    }
    .cp-pkg__cart:hover {
      border-color: rgba(0,102,255,0.55) !important;
      background: rgba(0,102,255,0.06) !important;
    }
    .cp-pkg__aside .cp-pkg__benefit,
    .cp-pkg__aside > .p-4,
    .cp-pkg__aside > div.space-y-4 {
      border-radius: 14px;
      border: 1px solid var(--line-soft);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.008) 100%),
        var(--surface);
      box-shadow: 0 10px 28px rgba(0,0,0,0.28);
    }
    .cp-pkg__desc {
      padding: 10px 0 0;
      margin-top: 4px;
      border: 0;
      background: transparent;
      box-shadow: none;
      min-height: 0;
      overflow: hidden;
      flex: 1 1 auto;
      max-height: none;
      position: relative;
      z-index: 0;
      pointer-events: none;
    }
    .cp-pkg__desc a {
      pointer-events: auto;
    }
    .cp-pkg__section-title {
      margin: 0 0 8px;
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: #fff;
    }
    .cp-pkg__desc-body.centralcart-content,
    #package-description.centralcart-content {
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      color: var(--text-secondary);
      font-size: 12.5px;
      line-height: 1.5;
    }
    .cp-pkg__desc-body.centralcart-content p,
    #package-description.centralcart-content p {
      margin: 0 0 0.85em;
    }
    .cp-pkg__desc-body.centralcart-content p:last-child,
    #package-description.centralcart-content p:last-child {
      margin-bottom: 0;
    }
    .cp-pkg__aside {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      width: 100%;
    }
    .cp-pkg__aside > :nth-child(n+4),
    .cp-pkg__aside > .space-y-4 {
      grid-column: 1 / -1;
    }
    .cp-pkg__benefit {
      padding: 16px 16px 15px;
      transition: border-color var(--transition), background var(--transition);
    }
    .cp-pkg__benefit:hover {
      border-color: rgba(0,102,255,0.28);
      background:
        linear-gradient(180deg, rgba(0,102,255,0.06) 0%, rgba(255,255,255,0.01) 100%),
        var(--surface);
    }
    .cp-pkg__benefit-head {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .cp-pkg__benefit-head p {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: #fff;
    }
    .cp-pkg__benefit-icon {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 9px;
      border: 1px solid rgba(0,102,255,0.28);
      background: rgba(0,102,255,0.12);
      color: var(--blue-light);
      flex-shrink: 0;
    }
    .cp-pkg__benefit-icon i,
    .cp-pkg__benefit-icon svg {
      width: 16px;
      height: 16px;
    }
    .cp-pkg__benefit-text {
      margin: 10px 0 0;
      font-size: 13px;
      line-height: 1.55;
      color: var(--text-secondary);
    }
    .cp-pkg__gateways {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 12px;
      width: fit-content;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.07);
      background: rgba(0,0,0,0.35);
    }
    .cp-pkg__gateway {
      width: 22px;
      height: 22px;
      object-fit: contain;
      opacity: 0.9;
    }
    .cp-pkg__aside > .p-4,
    .cp-pkg__aside > div.space-y-4 {
      padding: 16px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.008) 100%),
        var(--surface) !important;
      border-color: var(--line-soft) !important;
      border-radius: 14px !important;
      box-shadow: 0 10px 28px rgba(0,0,0,0.28) !important;
    }
    .cp-pkg__similar {
      margin-top: 28px;
    }
    .cp-pkg__similar .container,
    .package-list.cp-pkg__similar > section.container {
      max-width: 100% !important;
    }
    .cp-pkg #variation-list button {
      border-color: rgba(255,255,255,0.08) !important;
      background: rgba(255,255,255,0.015);
      border-radius: 12px !important;
    }
    .cp-pkg #variation-list button:hover {
      background: rgba(255,255,255,0.04) !important;
      border-color: rgba(0,102,255,0.35) !important;
    }
    .cp-pkg #variation-list button[data-selected="true"] {
      border-color: rgba(0,102,255,0.5) !important;
      background: rgba(0,102,255,0.12) !important;
    }

    @media (max-width: 1100px) {
      .cp-pkg__hero {
        grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
        gap: 16px;
      }
      .cp-pkg__media {
        max-width: 380px !important;
      }
      .cp-pkg__info-top {
        grid-template-columns: minmax(0, 1fr) minmax(170px, 200px);
      }
    }
    @media (max-width: 860px) {
      .cp-pkg__hero {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 14px;
      }
      .cp-pkg__media {
        max-width: 280px !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
      }
      .cp-pkg__info {
        height: auto;
        min-height: 0;
        overflow: visible;
      }
      .cp-pkg__info-top {
        grid-template-columns: 1fr;
      }
      .cp-pkg__aside {
        grid-template-columns: 1fr;
      }
      .cp-pkg__desc {
        max-height: none;
        overflow: hidden;
      }
    }
    @media (max-width: 560px) {
      .cp-pkg { padding-top: 0; }
      .cp-pkg__cta { letter-spacing: 0.02em; }
      .cp-pkg__desc { padding: 12px 0 0; }
    }

    /* ===== PAGE TRANSITION (Imgur logo GIF) ===== */
    .cp-page-transition {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
      opacity: 0;
      visibility: hidden;
      pointer-events: none !important;
      transition: opacity 0.28s ease, visibility 0.28s ease;
    }
    .cp-page-transition.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: none !important;
    }
    .cp-page-transition__logo {
      width: min(160px, 42vw);
      max-width: 160px;
      height: auto;
      max-height: 160px;
      object-fit: contain;
      opacity: 0.92;
      animation: cp-page-transition-pulse 1.5s ease-in-out infinite;
      user-select: none;
      pointer-events: none;
    }
    @keyframes cp-page-transition-pulse {
      0%, 100% { opacity: 0.78; }
      50% { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cp-page-transition {
        transition: none !important;
      }
      .cp-page-transition__logo {
        animation: none !important;
        opacity: 1 !important;
      }
    }

    html.cp-pt-pending .cp-page-transition {
      opacity: 1;
      visibility: visible;
      pointer-events: none;
    }