:root {
      --bg: #F5F4F0;
      --bg-white: #FFFFFF;
      --bg-soft: #F7F5F0;
      --bg-warm: #EFE8DD;
      --bg-nav: #162A43;
      --text: #172435;
      --text-sec: #607086;
      --text-mut: #8792A1;
      --text-light: #B5BDC8;
      --border: #E4E8EE;
      --border-h: #D4DBE4;
      --accent: #0F6457;
      --accent-light: #ECF4F1;
      --accent-hover: #0B5146;
      --yellow: #C59A3F;
      --yellow-bg: #F7F1E1;
      --green: #2F7A5A;
      --green-bg: #EDF6F0;
      --red: #C62828;
      --red-bg: #FFEBEE;
      --orange: #E65100;
      --orange-bg: #FFF3E0;
      --wa: #25D366;
      --metal: #B29A6A;
      --metal-deep: #8B7248;
      --metal-soft: #D9C7A4;
      --metal-glow: rgba(178,154,106,0.16);
      --ivory: #F6F1E7;
      --shadow-sm: 0 1px 2px rgba(17,27,39,0.04);
      --shadow: 0 10px 24px rgba(17,27,39,0.06);
      --shadow-lg: 0 20px 50px rgba(17,27,39,0.10);
      --r: 8px;
      --rs: 4px;
      --max-w: 1320px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      position: relative;
      font-family: 'Inter', sans-serif;
      background:
        linear-gradient(180deg, rgba(4,10,18,0.72) 0%, rgba(5,12,22,0.64) 220px, rgba(6,14,24,0.74) 100%),
        radial-gradient(circle at 50% 0%, rgba(87,146,189,0.16), transparent 34%),
        url('../../images_ui/site-dark-background.png') center top / cover fixed no-repeat,
        linear-gradient(180deg, #07111d 0%, #0b1d31 100%);
      color: #e9eef5;
      -webkit-font-smoothing: antialiased;
      line-height: 1.6;
    }
    body::before,
    body::after {
      content: "";
      position: fixed;
      bottom: -10vh;
      width: 36vw;
      height: 42vh;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      filter: blur(58px);
      opacity: .46;
      mix-blend-mode: screen;
    }
    body::before {
      left: -8vw;
      background:
        radial-gradient(circle, rgba(93,173,255,0.36) 0%, rgba(71,136,216,0.22) 34%, rgba(29,76,133,0.08) 58%, transparent 76%);
    }
    body::after {
      right: -8vw;
      background:
        radial-gradient(circle, rgba(103,188,255,0.34) 0%, rgba(88,154,230,0.2) 34%, rgba(39,88,148,0.08) 58%, transparent 76%);
    }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    :where(button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])) {
      touch-action: manipulation;
    }

    @media (prefers-reduced-motion: reduce) {
      html:focus-within {
        scroll-behavior: auto;
      }

      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    .topbar,
    .navbar,
    .hero,
    .breadcrumb,
    .guarantee-bar,
    .catalog-wrap,
    .stats,
    .about,
    .footer {
      position: relative;
      z-index: 1;
    }

    .topbar {
      background:
        radial-gradient(circle at top center, var(--metal-glow), transparent 34%),
        linear-gradient(180deg, #10243c 0%, #0d1d31 100%);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.82);
    }
    .topbar-in {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: .7rem 2rem;
      display: flex;
      justify-content: space-between;
      gap: 1rem 1.5rem;
      flex-wrap: wrap;
      align-items: center;
    }
    .topbar-copy {
      display: flex;
      gap: 1.4rem;
      flex-wrap: wrap;
      font-size: .72rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 600;
    }
    .topbar-copy span::before {
      content: "\2022";
      color: rgba(217,199,164,0.72);
      margin-right: .45rem;
    }
    .topbar-note {
      font-size: .72rem;
      color: rgba(246,241,231,0.56);
      letter-spacing: .04em;
      font-weight: 500;
    }

    .navbar {
      background:
        linear-gradient(180deg, #152a45 0%, #11243b 100%);
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 8px 24px rgba(8,14,25,0.18);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .nav-in {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 1.2rem 2rem 1rem;
      display: grid;
      grid-template-columns: auto minmax(280px, 1fr) auto;
      align-items: center;
      gap: 1.5rem;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 1rem;
      min-width: 0;
    }
    .nav-logo-mark {
      --logo-size: 170%;
      --logo-offset-x: 3px;
      --logo-offset-y: -21px;
      --logo-mobile-offset-x: var(--logo-offset-x);
      --logo-mobile-offset-y: var(--logo-offset-y);
      --logo-rotation: 59deg;
      --logo-opacity: 1;
      --logo-bg-color: #040404;
      --logo-bg-opacity: 0.75;
      position: relative;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      border: 3px solid rgba(178,154,106,0.76);
      display: grid;
      place-items: center;
      overflow: hidden;
      box-shadow:
        inset 0 0 0 3px rgba(178,154,106,0.1),
        0 8px 24px rgba(5,10,18,0.18);
      flex-shrink: 0;
    }
    .nav-logo-mark::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--logo-bg-color);
      opacity: var(--logo-bg-opacity);
      z-index: 0;
    }
    .nav-logo-mark img {
      width: var(--logo-size);
      height: var(--logo-size);
      display: block;
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      object-fit: contain;
      object-position: center;
      opacity: var(--logo-opacity);
      transform: translate(var(--logo-mobile-offset-x), var(--logo-mobile-offset-y)) rotate(var(--logo-rotation));
      transform-origin: center;
      transition: transform .2s ease, opacity .2s ease;
    }
    .nav-logo-text {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .nav-logo-text b {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.75rem;
      line-height: 1;
      color: #fff;
      letter-spacing: -0.05em;
    }
    .nav-logo-text small {
      color: rgba(226,232,239,0.62);
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .22em;
      margin-top: .35rem;
      font-weight: 600;
    }
    .nav-search-wrap {
      width: 100%;
    }
    .nav-search {
      width: 100%;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: .7rem;
      background: linear-gradient(180deg, rgba(249,247,241,0.98), rgba(243,239,231,0.98));
      border-radius: 999px;
      padding: .45rem .5rem .45rem 1rem;
      border: 1px solid rgba(12,29,49,0.08);
      box-shadow:
        0 14px 32px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.58);
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .nav-search input {
      width: 100%;
      background: transparent;
      border: none;
      font-size: .9rem;
      color: #223246;
      font-weight: 500;
      outline: none;
    }
    .nav-search input::placeholder {
      color: #7f8996;
    }
    .nav-search:focus-within {
      border-color: rgba(175,146,96,0.72);
      box-shadow:
        0 14px 32px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.58),
        0 0 0 3px rgba(175,146,96,0.18);
    }
    .nav-search-i {
      color: #687483;
      font-size: 1rem;
      line-height: 1;
    }
    .nav-search-btn {
      border: none;
      border-radius: 999px;
      background: linear-gradient(135deg, #ae9160 0%, #8c7248 100%);
      color: #fcf7ef;
      font-weight: 700;
      font-size: .8rem;
      padding: .7rem 1rem;
      cursor: pointer;
      letter-spacing: .03em;
      box-shadow: 0 10px 22px rgba(53,38,16,0.16);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .nav-acts {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: .7rem;
      flex-wrap: wrap;
    }
    .nav-act-btn,
    .nav-cart {
      min-height: 52px;
      border-radius: 16px;
      padding: .7rem .9rem;
      display: flex;
      align-items: center;
      gap: .75rem;
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.035));
      color: #fff;
      cursor: pointer;
      backdrop-filter: blur(8px);
    }
    .nav-act-btn {
      min-width: 140px;
      text-align: left;
    }
    .nav-act-icon,
    .nav-cart-icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      background: linear-gradient(180deg, rgba(178,154,106,0.16), rgba(139,114,72,0.08));
      color: #e4d3b1;
      font-size: 1rem;
      border: 1px solid rgba(178,154,106,0.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .nav-act-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }
    .nav-act-text small {
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: rgba(223,229,236,0.54);
    }
    .nav-act-text strong {
      font-size: .84rem;
      font-weight: 700;
      color: #f6f8fb;
    }
    .nav-cart {
      position: relative;
      min-width: 122px;
      justify-content: center;
      background: linear-gradient(135deg, rgba(12,103,87,0.98), rgba(7,80,66,0.98));
      border-color: rgba(255,255,255,0.05);
      font-weight: 700;
      font-size: .82rem;
      box-shadow: 0 10px 22px rgba(5,65,53,0.26);
    }
    .nav-cart .nav-cart-icon {
      background: rgba(255,255,255,0.09);
      color: #dcefe7;
      border-color: rgba(255,255,255,0.11);
    }
    .nav-cart-badge {
      position: absolute;
      top: 9px;
      right: 12px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #ff6b57;
      color: #fff;
      font-size: .63rem;
      display: grid;
      place-items: center;
      border: 2px solid rgba(17,36,59,0.95);
    }
    :where(.hero-btn, .nav-search-btn, .nav-act-btn, .nav-cart, .nav-mobile-btn, .mnav-a, .subcat-nav, .subcat-item, .filter-toggle, .prod-btn, .btn, .footer-cta, .footer-links a):focus-visible {
      outline: 2px solid rgba(214,192,150,0.95);
      outline-offset: 3px;
    }
    :where(.hero-btn, .nav-search-btn, .nav-act-btn, .nav-cart, .nav-mobile-btn, .filter-toggle, .prod-btn, .btn, .footer-cta) {
      transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        border-color .2s ease,
        filter .2s ease,
        color .2s ease;
    }
    :where(.hero-btn.primary, .nav-search-btn, .prod-btn.btn-buy, .footer-cta):hover {
      transform: translateY(-1px);
      filter: brightness(1.05);
      box-shadow: 0 16px 30px rgba(12,23,38,0.24);
    }
    :where(.hero-btn.secondary, .nav-act-btn, .nav-cart, .nav-mobile-btn, .filter-toggle, .btn.ghost):hover {
      transform: translateY(-1px);
      border-color: rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.1);
    }
    :where(.hero-btn, .nav-search-btn, .nav-act-btn, .nav-cart, .nav-mobile-btn, .filter-toggle, .prod-btn, .btn, .footer-cta):active {
      transform: translateY(0);
      box-shadow: none;
      filter: brightness(.98);
    }
    .nav-mobile-btn,
    .nav-mobile-actions {
      display: none;
    }
    .nav-mobile-btn {
      width: 46px;
      height: 46px;
      border-radius: 15px;
      border: 1px solid rgba(255,255,255,0.1);
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      color: #f2f6fb;
      display: none;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(10px);
      box-shadow: 0 12px 22px rgba(5,10,18,0.14);
      cursor: pointer;
      position: relative;
    }
    .nav-mobile-glyph {
      font-size: 1rem;
      line-height: 1;
      color: #e8f0f6;
    }
    .nav-mobile-menu-lines {
      display: grid;
      gap: 4px;
    }
    .nav-mobile-menu-lines span {
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      display: block;
    }
    .nav-mobile-cart .nav-cart-badge {
      top: 6px;
      right: 6px;
      width: 17px;
      height: 17px;
      font-size: .58rem;
      border-width: 2px;
    }

    .mnav {
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      background: rgba(8,20,34,0.22);
      backdrop-filter: blur(8px);
    }
    .mnav-in {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      gap: .25rem;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .mnav-in::-webkit-scrollbar { display: none; }
    .mnav-a {
      padding: 1rem 1rem;
      font-size: .84rem;
      font-weight: 600;
      color: rgba(233,239,245,0.74);
      border-bottom: 2px solid transparent;
      white-space: nowrap;
      transition: .2s ease;
    }
    .mnav-a:hover {
      color: #fff;
    }
    .mnav-a.active {
      color: #fff;
      border-bottom-color: rgba(178,154,106,0.72);
    }
    .mnav-a.highlight {
      color: #d9c7a4;
    }

    .breadcrumb {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 1rem 2rem .5rem;
      font-size: .75rem;
      color: rgba(221,229,237,0.66);
      display: flex;
      align-items: center;
      gap: .45rem;
      flex-wrap: wrap;
    }

    .hero {
      max-width: var(--max-w);
      margin: 1.1rem auto 4.8rem;
      padding: 0 2rem;
    }
    .hero-shell {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border-radius: 34px;
      width: 100%;
      padding: 2.65rem 2.55rem 8.85rem;
      min-height: 548px;
      max-width: none;
      margin: 0 auto;
      background:
        linear-gradient(145deg, rgba(8,18,30,0.9) 0%, rgba(11,27,43,0.84) 45%, rgba(17,43,68,0.76) 100%);
      box-shadow:
        0 30px 78px rgba(4, 10, 18, 0.34),
        inset 0 1px 0 rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      backdrop-filter: blur(18px) saturate(112%);
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(500px, 1.05fr);
      gap: 1.35rem;
      align-items: center;
    }
    .hero-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent 22%),
        radial-gradient(circle at 64% 78%, rgba(116,177,231,0.18), transparent 26%),
        radial-gradient(circle at 76% 20%, rgba(192,165,112,0.08), transparent 20%),
        url('../../images_ui/hero-reef-background.png') center 58% / cover no-repeat;
      pointer-events: none;
      opacity: .34;
    }
    .hero-shell::after {
      content: "";
      position: absolute;
      inset: auto -4% -24% auto;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(186,229,255,0.16) 0%, rgba(255,255,255,0.03) 56%, transparent 72%);
      pointer-events: none;
    }
    .hero-copy {
      position: relative;
      z-index: 1;
      max-width: 620px;
      display: flex;
      flex-direction: column;
    }
    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      padding: .45rem .8rem;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      color: #e5ddcf;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      width: fit-content;
      margin-bottom: 1rem;
    }
    .hero-kicker-short {
      display: none;
    }
    .hero-title {
      font-family: Georgia, 'Times New Roman', serif;
      font-size: clamp(2.45rem, 4.5vw, 3.9rem);
      font-weight: 500;
      line-height: 1.01;
      letter-spacing: -.03em;
      color: #fff;
      max-width: 12.4ch;
    }
    .hero-title-mobile-break {
      display: none;
    }
    .hero-title span {
      color: #d6c096;
      text-shadow: 0 8px 20px rgba(76,58,25,0.16);
    }
    .hero-desc {
      margin-top: 1.1rem;
      max-width: 44ch;
      color: rgba(244,247,250,0.84);
      font-size: .95rem;
      line-height: 1.7;
      text-shadow: 0 1px 1px rgba(3,9,16,0.2);
    }
    .hero-actions {
      margin-top: 1.4rem;
      display: flex;
      gap: .7rem;
      flex-wrap: wrap;
      position: relative;
      z-index: 3;
    }
    .hero-btn {
      min-height: 48px;
      padding: .82rem 1.15rem;
      border-radius: 999px;
      font-weight: 700;
      font-size: .82rem;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
    }
    .hero-btn-short {
      display: none;
    }
    .hero-btn.primary {
      background: linear-gradient(135deg, #af9260 0%, #8c7248 100%);
      color: #fcf7ef;
      border-color: rgba(255,255,255,0.06);
      box-shadow: 0 14px 28px rgba(60, 44, 19, 0.2);
    }
    .hero-btn.secondary {
      background: rgba(255,255,255,0.06);
      color: #eef3f8;
      border-color: rgba(255,255,255,0.14);
    }
    .hero-metrics {
      position: absolute;
      left: 50%;
      bottom: 1.35rem;
      transform: translateX(-50%);
      width: min(820px, calc(100% - 2.8rem));
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .85rem;
      z-index: 2;
    }
    .hero-metric {
      min-width: 0;
      min-height: 98px;
      padding: 1rem 1.1rem;
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(20,34,51,0.88), rgba(12,24,38,0.76)),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
      border: 1px solid rgba(255,255,255,0.11);
      backdrop-filter: blur(14px);
      box-shadow:
        0 22px 38px rgba(3,9,16,0.26),
        inset 0 1px 0 rgba(255,255,255,0.06);
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .hero-metric-badge {
      width: 60px;
      height: 60px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
        radial-gradient(circle at 30% 25%, rgba(214,192,150,0.16), transparent 62%),
        rgba(12,24,38,0.82);
      border: 1px solid rgba(214,192,150,0.18);
      box-shadow:
        0 14px 24px rgba(3,9,16,0.18),
        inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .hero-metric-icon {
      width: 46px;
      height: 40px;
      object-fit: contain;
      flex-shrink: 0;
      opacity: 1;
      filter: none;
    }
    .hero-metric-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }
    .hero-metric strong {
      display: block;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.9rem;
      color: #fff;
      letter-spacing: -.05em;
      line-height: 1;
    }
    .hero-metric span {
      display: block;
      margin-top: .28rem;
      font-size: .64rem;
      color: rgba(238,243,248,0.64);
      text-transform: uppercase;
      letter-spacing: .11em;
      line-height: 1.4;
    }
    .hero-visual {
      position: relative;
      z-index: 1;
      min-height: 406px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .hero-stage {
      position: relative;
      width: min(100%, 640px);
      min-height: 404px;
      overflow: visible;
      padding: 0;
    }
    .hero-stage-panel {
      position: absolute;
      inset: 56px 28px 24px 84px;
      overflow: hidden;
      border-radius: 28px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)),
        linear-gradient(135deg, rgba(41,63,90,0.46), rgba(20,39,59,0.2)),
        url('../../images_ui/hero-reef-background.png') center / cover no-repeat;
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(20px) saturate(118%);
      box-shadow:
        0 24px 40px rgba(3,9,16,0.2),
        inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .hero-stage-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%),
        radial-gradient(circle at 72% 18%, rgba(255,255,255,0.1), transparent 18%),
        radial-gradient(circle at 58% 78%, rgba(125,186,234,0.24), transparent 26%);
      pointer-events: none;
    }
    .hero-fish {
      position: absolute;
      display: block;
      object-fit: contain;
      z-index: 6;
      filter: drop-shadow(0 26px 34px rgba(0,0,0,0.38)) saturate(1.05);
      border: none;
      box-shadow: none;
      pointer-events: none;
    }
    .hero-fish.one {
      width: var(--hero-fish-one-width, 46%);
      right: var(--hero-fish-one-right, 6%);
      left: var(--hero-fish-one-left, auto);
      top: var(--hero-fish-one-top, 1%);
      bottom: var(--hero-fish-one-bottom, auto);
      transform: rotate(var(--hero-fish-one-rotate, 3deg));
    }
    .hero-fish.two {
      z-index: var(--hero-fish-two-z, 7);
      width: var(--hero-fish-two-width, 50%);
      right: var(--hero-fish-two-right, auto);
      left: var(--hero-fish-two-left, 10%);
      top: var(--hero-fish-two-top, auto);
      bottom: var(--hero-fish-two-bottom, -12%);
      transform: rotate(var(--hero-fish-two-rotate, 6deg));
      opacity: var(--hero-fish-two-opacity, .98);
    }
    .hero-card {
      position: absolute;
      z-index: 5;
      max-width: 220px;
      padding: 1rem 1rem .95rem;
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(16,28,42,0.82), rgba(14,25,38,0.42)),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
      border: 1px solid rgba(255,255,255,0.11);
      backdrop-filter: blur(18px) saturate(112%);
      box-shadow:
        0 16px 34px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.06);
      color: #e9eef5;
    }
    .hero-card.primary {
      z-index: 9;
      left: 19%;
      top: 23%;
      max-width: 198px;
    }
    .hero-card.secondary {
      z-index: 8;
      right: 9%;
      bottom: 14%;
      max-width: 176px;
      padding: .9rem 1rem .85rem;
    }
    .hero-card small {
      display: block;
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: rgba(217,199,164,0.82);
      margin-bottom: .45rem;
      font-weight: 700;
    }
    .hero-card strong {
      display: block;
      font-size: 1.04rem;
      line-height: 1.26;
      color: var(--ivory);
      max-width: 16ch;
    }
    .hero-card p {
      margin-top: .45rem;
      font-size: .76rem;
      line-height: 1.62;
      color: rgba(241,243,247,0.74);
      max-width: 23ch;
    }
    .hero-card.secondary small {
      display: none;
    }
    .hero-card.secondary strong {
      font-size: 1.12rem;
      max-width: none;
    }
    .hero-card.secondary p {
      margin-top: .32rem;
      max-width: 16ch;
    }

    body[data-current-department="corais"] .hero-shell {
      background:
        radial-gradient(circle at 18% 16%, rgba(255,136,115,0.24), transparent 24%),
        radial-gradient(circle at 78% 20%, rgba(102,236,208,0.18), transparent 28%),
        linear-gradient(145deg, rgba(19,17,32,0.94) 0%, rgba(23,33,51,0.88) 46%, rgba(19,49,63,0.84) 100%);
      border-color: rgba(255,178,145,0.16);
    }
    body[data-current-department="corais"] .hero-shell::before {
      background:
        radial-gradient(circle at 24% 32%, rgba(255,163,120,0.2), transparent 20%),
        radial-gradient(circle at 68% 26%, rgba(94,233,203,0.14), transparent 18%),
        radial-gradient(circle at 50% 78%, rgba(255,119,143,0.12), transparent 24%);
      opacity: 1;
    }
    body[data-current-department="corais"] .hero-shell::after {
      width: 460px;
      height: 460px;
      background:
        radial-gradient(circle at 42% 42%, rgba(255,140,104,0.2), transparent 32%),
        radial-gradient(circle at 60% 62%, rgba(102,236,208,0.16), transparent 34%);
      opacity: .9;
    }
    body[data-current-department="corais"] .hero-stage-panel {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        radial-gradient(circle at 24% 20%, rgba(255,160,120,0.26), transparent 20%),
        radial-gradient(circle at 76% 26%, rgba(98,227,207,0.22), transparent 22%),
        linear-gradient(135deg, rgba(56,41,67,0.66), rgba(18,37,55,0.42));
      border-color: rgba(255,188,148,0.12);
    }
    body[data-current-department="corais"] .hero-stage-panel::before {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 28%),
        radial-gradient(circle at 22% 70%, rgba(255,136,108,0.2), transparent 24%),
        radial-gradient(circle at 70% 18%, rgba(97,234,205,0.18), transparent 20%),
        radial-gradient(circle at 56% 78%, rgba(255,215,164,0.14), transparent 24%);
    }
    body[data-current-department="corais"] .hero-card {
      background:
        linear-gradient(180deg, rgba(36,24,43,0.82), rgba(18,31,43,0.42)),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
      border-color: rgba(255,188,148,0.14);
    }
    body[data-current-department="corais"] .hero-card small {
      color: rgba(255,206,172,0.84);
    }
    body[data-current-department="corais"] .hero-fish {
      filter: drop-shadow(0 28px 34px rgba(0,0,0,0.34)) saturate(1.02);
    }
    body[data-current-department="corais"] .hero-fish.one {
      width: 41%;
      right: 8%;
      top: 5%;
      transform: rotate(5deg);
    }
    body[data-current-department="corais"] .hero-fish.two {
      width: 44%;
      left: 8%;
      bottom: -7%;
      transform: rotate(-7deg);
    }
    body[data-current-department="corais"] .guarantee-inner {
      background: linear-gradient(180deg, rgba(44,31,48,0.82) 0%, rgba(15,39,44,0.74) 100%);
      border-color: rgba(255,181,145,0.14);
    }
    body[data-current-department="corais"] .subcat-item.active .subcat-thumb {
      border-color: rgba(255,184,145,0.42);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 18px 34px rgba(4,10,18,0.34),
        0 0 0 1px rgba(255,184,145,0.18);
    }
    body[data-current-department="corais"] .subcat-reset .subcat-thumb {
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 26%, transparent 42%),
        linear-gradient(180deg, rgba(58,34,50,0.96) 0%, rgba(17,31,41,0.98) 100%);
      border-color: rgba(255,184,145,0.28);
    }
    body[data-current-department="corais"] .prod-img-media img {
      transform: translateX(0) scale(.98);
    }
    body[data-current-department="corais"] .prod-card:hover .prod-img-media img {
      transform: translateX(0) scale(1.02);
    }
    body[data-current-department="equipamentos"] .hero-shell {
      background:
        radial-gradient(circle at 16% 18%, rgba(122,189,255,0.18), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(255,210,122,0.12), transparent 24%),
        linear-gradient(145deg, rgba(10,17,28,0.96) 0%, rgba(15,28,45,0.9) 44%, rgba(17,44,62,0.86) 100%);
      border-color: rgba(153,206,255,0.14);
    }
    body[data-current-department="equipamentos"] .hero-shell::before {
      background:
        radial-gradient(circle at 20% 32%, rgba(115,184,255,0.16), transparent 20%),
        radial-gradient(circle at 72% 26%, rgba(255,214,140,0.1), transparent 18%),
        radial-gradient(circle at 56% 80%, rgba(110,237,214,0.08), transparent 24%);
      opacity: 1;
    }
    body[data-current-department="equipamentos"] .hero-shell::after {
      width: 430px;
      height: 430px;
      background:
        radial-gradient(circle at 42% 42%, rgba(123,184,255,0.12), transparent 30%),
        radial-gradient(circle at 60% 62%, rgba(255,214,122,0.1), transparent 32%);
      opacity: .82;
    }
    body[data-current-department="equipamentos"] .hero-stage-panel {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        linear-gradient(135deg, rgba(31,53,80,0.62), rgba(19,34,52,0.38));
      border-color: rgba(153,206,255,0.12);
    }
    body[data-current-department="equipamentos"] .hero-stage-panel::before {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 28%),
        radial-gradient(circle at 20% 20%, rgba(115,184,255,0.16), transparent 18%),
        radial-gradient(circle at 76% 24%, rgba(255,210,122,0.12), transparent 16%),
        linear-gradient(90deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 94px),
        linear-gradient(0deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 94px);
      background-size: auto, auto, auto, 96px 96px, 96px 96px;
    }
    body[data-current-department="equipamentos"] .hero-card {
      background:
        linear-gradient(180deg, rgba(19,34,52,0.88), rgba(15,26,41,0.48)),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
      border-color: rgba(153,206,255,0.14);
    }
    body[data-current-department="equipamentos"] .hero-card small {
      color: rgba(228,241,255,0.78);
    }
    body[data-current-department="equipamentos"] .hero-fish {
      filter: drop-shadow(0 26px 34px rgba(0,0,0,0.3)) saturate(1.02);
    }
    body[data-current-department="equipamentos"] .hero-fish.one {
      width: 43%;
      right: 8%;
      top: 7%;
      transform: rotate(0deg);
    }
    body[data-current-department="equipamentos"] .hero-fish.two {
      width: 42%;
      left: 10%;
      bottom: -4%;
      transform: rotate(-8deg);
    }
    body[data-current-department="equipamentos"] .guarantee-inner {
      background: linear-gradient(180deg, rgba(20,37,58,0.82) 0%, rgba(16,31,44,0.72) 100%);
      border-color: rgba(153,206,255,0.12);
    }
    body[data-current-department="equipamentos"] .subcat-item.active .subcat-thumb {
      border-color: rgba(153,206,255,0.42);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 18px 34px rgba(4,10,18,0.34),
        0 0 0 1px rgba(153,206,255,0.16);
    }
    body[data-current-department="equipamentos"] .subcat-reset .subcat-thumb {
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 26%, transparent 42%),
        linear-gradient(180deg, rgba(25,42,63,0.96) 0%, rgba(12,22,34,0.98) 100%);
      border-color: rgba(153,206,255,0.24);
    }
    body[data-current-department="equipamentos"] .prod-img-media img {
      transform: translateX(0) scale(.96);
    }
    body[data-current-department="equipamentos"] .prod-card:hover .prod-img-media img {
      transform: translateX(0) scale(1.01);
    }
    body[data-current-department="alimentacao-e-suplementos"] .hero-shell {
      background:
        radial-gradient(circle at 18% 16%, rgba(248,194,108,0.18), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(121,226,199,0.14), transparent 24%),
        linear-gradient(145deg, rgba(12,24,30,0.96) 0%, rgba(19,37,43,0.9) 44%, rgba(20,51,55,0.84) 100%);
      border-color: rgba(220,193,122,0.14);
    }
    body[data-current-department="alimentacao-e-suplementos"] .hero-shell::before {
      background:
        radial-gradient(circle at 24% 28%, rgba(245,187,95,0.16), transparent 20%),
        radial-gradient(circle at 74% 24%, rgba(122,226,199,0.12), transparent 18%),
        radial-gradient(circle at 56% 80%, rgba(244,214,148,0.08), transparent 24%);
      opacity: 1;
    }
    body[data-current-department="alimentacao-e-suplementos"] .hero-shell::after {
      width: 430px;
      height: 430px;
      background:
        radial-gradient(circle at 42% 42%, rgba(244,188,98,0.14), transparent 30%),
        radial-gradient(circle at 60% 62%, rgba(121,226,199,0.12), transparent 32%);
      opacity: .82;
    }
    body[data-current-department="alimentacao-e-suplementos"] .hero-stage-panel {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        radial-gradient(circle at 22% 22%, rgba(245,188,100,0.16), transparent 16%),
        radial-gradient(circle at 74% 22%, rgba(120,225,198,0.14), transparent 16%),
        linear-gradient(135deg, rgba(26,46,44,0.62), rgba(18,31,35,0.38));
      border-color: rgba(220,193,122,0.12);
    }
    body[data-current-department="alimentacao-e-suplementos"] .hero-stage-panel::before {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 28%),
        radial-gradient(circle at 20% 72%, rgba(245,188,100,0.14), transparent 20%),
        radial-gradient(circle at 74% 18%, rgba(121,226,199,0.14), transparent 18%),
        linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 84px),
        linear-gradient(0deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 84px);
      background-size: auto, auto, auto, 86px 86px, 86px 86px;
    }
    body[data-current-department="alimentacao-e-suplementos"] .hero-card {
      background:
        linear-gradient(180deg, rgba(22,40,44,0.88), rgba(14,25,31,0.48)),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
      border-color: rgba(220,193,122,0.14);
    }
    body[data-current-department="alimentacao-e-suplementos"] .hero-card small {
      color: rgba(246,218,162,0.82);
    }
    body[data-current-department="alimentacao-e-suplementos"] .hero-fish {
      filter: drop-shadow(0 26px 34px rgba(0,0,0,0.28)) saturate(1.02);
    }
    body[data-current-department="alimentacao-e-suplementos"] .hero-fish.one {
      width: 41%;
      right: 8%;
      top: 6%;
      transform: rotate(3deg);
    }
    body[data-current-department="alimentacao-e-suplementos"] .hero-fish.two {
      width: 44%;
      left: 8%;
      bottom: -4%;
      transform: rotate(-6deg);
    }
    body[data-current-department="alimentacao-e-suplementos"] .guarantee-inner {
      background: linear-gradient(180deg, rgba(27,44,49,0.82) 0%, rgba(15,31,34,0.72) 100%);
      border-color: rgba(220,193,122,0.12);
    }
    body[data-current-department="alimentacao-e-suplementos"] .subcat-item.active .subcat-thumb {
      border-color: rgba(220,193,122,0.38);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 18px 34px rgba(4,10,18,0.34),
        0 0 0 1px rgba(220,193,122,0.16);
    }
    body[data-current-department="alimentacao-e-suplementos"] .subcat-reset .subcat-thumb {
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 26%, transparent 42%),
        linear-gradient(180deg, rgba(31,49,53,0.96) 0%, rgba(14,25,29,0.98) 100%);
      border-color: rgba(220,193,122,0.24);
    }
    body[data-current-department="alimentacao-e-suplementos"] .prod-img-media img {
      transform: translateX(0) scale(.97);
    }
    body[data-current-department="alimentacao-e-suplementos"] .prod-card:hover .prod-img-media img {
      transform: translateX(0) scale(1.02);
    }

    .coll-header {
      text-align: center;
      padding: 1.8rem 2rem 1.6rem;
      max-width: 860px;
      margin: 0 auto;
    }
    .coll-title {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 2.7rem;
      color: #f3f7fb;
      letter-spacing: -.04em;
    }
    .coll-active-category {
      margin-top: .52rem;
      color: rgba(223,231,239,0.76);
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -.01em;
    }
    .coll-count {
      margin-top: .6rem;
      color: #f1ddae;
      font-size: 1.24rem;
      font-weight: 700;
      letter-spacing: -.01em;
      text-shadow: 0 1px 0 rgba(0,0,0,0.18);
    }
    .coll-desc {
      color: rgba(223,231,239,0.76);
      font-size: 1.05rem;
      margin-top: .6rem;
    }

    .subcat-shell {
      max-width: var(--max-w);
      margin: .3rem auto 1.7rem;
      padding: 0 2rem;
      position: relative;
      display: flex;
      align-items: center;
      gap: .8rem;
      overflow: visible;
    }
    .subcat-viewport {
      min-width: 0;
      flex: 1 1 auto;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    }
    .subcat-viewport::-webkit-scrollbar {
      display: none;
    }
    .subcat-strip {
      width: max-content;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 1.15rem;
      flex-wrap: nowrap;
      padding: .2rem .1rem 1.35rem;
    }
    .subcat-nav {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(18,39,60,0.96) 0%, rgba(10,24,39,0.96) 100%);
      color: #f0ddb0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 14px 28px rgba(4,10,18,0.22);
      cursor: pointer;
      transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
      flex: 0 0 auto;
    }
    .subcat-nav span {
      font-size: 1.45rem;
      line-height: 1;
      transform: translateY(-1px);
    }
    .subcat-nav:hover:not(:disabled) {
      transform: translateY(-2px);
      border-color: rgba(214,191,142,0.28);
    }
    .subcat-nav:disabled {
      opacity: .28;
      cursor: default;
    }
    .subcat-shell:not(.subcat-scrollable) .subcat-nav {
      opacity: 0;
      pointer-events: none;
    }
    .subcat-shell:not(.subcat-scrollable) .subcat-strip {
      width: 100%;
      justify-content: center;
    }
    .subcat-item {
      --subcat-item-scale-desktop: 1.2;
      --subcat-item-scale-mobile: 1;
      --subcat-item-scale-active: var(--subcat-item-scale-desktop);
      --subcat-item-shift-x: 0px;
      --subcat-item-shift-y: 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .72rem;
      text-align: center;
      cursor: pointer;
      flex: 0 0 auto;
      min-width: 94px;
      padding: .15rem .25rem;
      border-radius: 999px;
      transition: transform .22s ease, opacity .22s ease;
      transform:
        translate(
          var(--subcat-item-shift-x),
          var(--subcat-item-shift-y)
        )
        scale(var(--subcat-item-scale-active));
      transform-origin: center top;
    }
    .subcat-item:hover {
      transform:
        translate(
          var(--subcat-item-shift-x),
          calc(var(--subcat-item-shift-y) - 3px)
        )
        scale(var(--subcat-item-scale-active));
    }
    .subcat-thumb {
      position: relative;
      width: 78px;
      height: 78px;
      margin: 0 auto;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.14), rgba(255,255,255,0.04) 26%, transparent 42%),
        radial-gradient(circle at 50% 50%, rgba(15,28,45,0.94) 0%, rgba(8,17,29,0.98) 68%, rgba(4,10,17,1) 100%);
      border: 1px solid rgba(226,234,244,0.2);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 14px 28px rgba(4,10,18,0.28);
      overflow: hidden;
    }
    .subcat-thumb::before {
      content: "";
      position: absolute;
      inset: 5px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.08);
      pointer-events: none;
    }
    .subcat-thumb img {
      position: relative;
      z-index: 1;
      width: var(--subcat-thumb-width, 82%);
      height: var(--subcat-thumb-height, 82%);
      object-fit: contain;
      filter: drop-shadow(0 10px 10px rgba(0,0,0,0.24));
      transform:
        translate(
          var(--subcat-thumb-shift-x, 0px),
          var(--subcat-thumb-shift-y, 1px)
        )
        rotate(var(--subcat-thumb-rotate, 0deg))
        scale(var(--subcat-thumb-scale, 1));
      transform-origin: center center;
    }
    .subcat-thumb span {
      position: relative;
      z-index: 1;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: .04em;
      color: #f3f7fb;
      text-transform: uppercase;
    }
    .subcat-item.active .subcat-thumb {
      border-color: rgba(214,191,142,0.38);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 18px 34px rgba(4,10,18,0.34),
        0 0 0 1px rgba(214,191,142,0.16);
    }
    .subcat-reset .subcat-thumb {
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 26%, transparent 42%),
        linear-gradient(180deg, rgba(22,42,64,0.94) 0%, rgba(10,22,36,0.98) 100%);
      border-color: rgba(214,191,142,0.28);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 14px 28px rgba(4,10,18,0.26);
    }
    .subcat-reset .subcat-thumb::before {
      border-color: rgba(214,191,142,0.12);
    }
    .subcat-reset .subcat-thumb span {
      font-size: 1.5rem;
      line-height: 1;
      color: #e5d4ab;
      transform: translateX(-1px);
    }
    .subcat-label {
      max-width: 104px;
      min-height: 2.55em;
      padding-bottom: .08rem;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      font-size: .88rem;
      color: #f1f5fa;
      font-weight: 500;
      line-height: 1.22;
      letter-spacing: -.02em;
    }
    .subcat-item.active .subcat-label {
      color: #fff8e6;
    }
    .subcat-reset .subcat-label {
      max-width: 116px;
      color: rgba(223,231,239,0.92);
      font-weight: 600;
    }

    .guarantee-bar {
      max-width: var(--max-w);
      margin: 0 auto 1.5rem;
      padding: 0 2rem;
    }
    .guarantee-inner {
      background: linear-gradient(180deg, rgba(13,42,40,0.78) 0%, rgba(12,33,33,0.7) 100%);
      border: 1px solid rgba(128,208,194,0.12);
      border-radius: 20px;
      padding: .95rem 1.35rem;
      display: flex;
      justify-content: center;
      gap: 1.8rem 2.25rem;
      flex-wrap: wrap;
      backdrop-filter: blur(14px);
    }
    .guarantee-item {
      display: flex;
      align-items: center;
      gap: .58rem;
      font-size: .8rem;
      color: #d5ebe4;
      font-weight: 600;
      line-height: 1.2;
    }
    .guarantee-label {
      min-width: 0;
    }
    .guarantee-label-short {
      display: none;
    }
    .guarantee-icon {
      width: 31px;
      height: 27px;
      display: inline-block;
      flex-shrink: 0;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
      opacity: .95;
    }
    .guarantee-garantia .guarantee-icon { background-image: url('../icons/guarantees/icon_garantia.png'); }
    .guarantee-quarentena .guarantee-icon { background-image: url('../icons/guarantees/icon_quarentena.png'); }
    .guarantee-embalagem .guarantee-icon { background-image: url('../icons/guarantees/icon_embalagem.png'); }
    .guarantee-suporte .guarantee-icon { background-image: url('../icons/guarantees/icon_suporte.png'); }

    .divider {
      border: none;
      border-top: 1px solid rgba(255,255,255,0.08);
      max-width: var(--max-w);
      margin: 0 auto;
    }

    .catalog-wrap {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 2rem 2rem;
      display: grid;
      grid-template-columns: 232px 1fr;
      gap: 1.5rem;
    }

    .sidebar {
      position: sticky;
      top: 84px;
      align-self: start;
      background: rgba(9,20,32,0.56);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 0;
      box-shadow: none;
      overflow: hidden;
      backdrop-filter: blur(12px);
    }
    .sidebar-card, .admin-panel {
      background: rgba(10,23,36,0.72);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 1rem;
      box-shadow: var(--shadow-sm);
      color: #e8eef5;
    }
    .sidebar-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; box-shadow: 0 16px 34px rgba(7,14,24,0.18); padding: 0 18px; background: rgba(10,23,36,0.82); backdrop-filter: blur(14px); }
    .sidebar-card + .sidebar-card,
    .sidebar-card + .admin-panel,
    .admin-panel + .sidebar-card,
    .admin-panel + .admin-panel { margin-top: 1rem; }

    .filter-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      padding: 16px 0 14px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -.01em;
      color: #f1f5fa;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .filter-toggle {
      width: 100%;
      background: transparent;
      border-left: none;
      border-right: none;
      border-top: none;
      cursor: pointer;
      text-align: left;
    }
    .filter-toolbar-meta {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      flex-shrink: 0;
    }
    .filter-toolbar-status {
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: rgba(223,231,239,0.54);
    }
    .filter-toolbar .icon { font-size: 12px; opacity: .4; }
    .filter-toggle .icon {
      transition: transform .22s ease, opacity .22s ease;
    }
    .sidebar-collapse {
      display: block;
    }
    .filter-section { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .filter-section:last-child { border-bottom: none; }
    .page-category .category-filter { display: none; }
    .filter-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .01em;
      color: #eef3f8;
      margin-bottom: 8px;
      line-height: 1.2;
    }
    .field { margin-bottom: 0; }
    .field label {
      display: block;
      font-size: .7rem;
      font-weight: 700;
      color: rgba(223,231,239,0.72);
      margin-bottom: .35rem;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .field input, .field select, .field textarea {
      width: 100%;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05);
      color: #edf3f9;
      border-radius: 10px;
      padding: 0 14px;
      min-height: 44px;
      height: 44px;
      font-size: 13px;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .field select {
      color-scheme: dark;
    }
    .field select option,
    .field select optgroup {
      color: #122233;
      background: #f4f7fb;
    }
    .field input::placeholder,
    .field textarea::placeholder {
      color: rgba(223,231,239,0.45);
    }
    .field textarea { min-height: 90px; height: auto; padding: 12px 14px; resize: vertical; }
    .price-row { display:flex; align-items:center; gap:8px; margin-bottom: 12px; }
    .price-box {
      width: 100%;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 999px;
      padding: 0 12px;
      min-height: 36px;
      height: 36px;
      font-size: 13px;
      color: #d9e1ea;
      background: rgba(255,255,255,0.05);
    }
    .price-slider-wrap { padding: 6px 0 2px; }
    .price-slider {
      width:100%;
      -webkit-appearance: none;
      appearance: none;
      height: 5px;
      border-radius: 999px;
      background: rgba(255,255,255,0.16);
      outline: none;
    }
    .field input:focus-visible,
    .field select:focus-visible,
    .field textarea:focus-visible,
    .price-slider:focus-visible {
      border-color: rgba(175,146,96,0.72);
      box-shadow: 0 0 0 3px rgba(175,146,96,0.18);
    }
    .price-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: var(--accent);
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px rgba(12,107,88,.16);
      cursor: pointer;
    }
    .price-slider::-moz-range-thumb {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: var(--accent);
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px rgba(12,107,88,.16);
      cursor: pointer;
    }
    .check-list { display:grid; gap:8px; max-height: 500px; overflow:auto; padding-right: 2px; }
    .check-row {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      min-height: 22px;
      font-size: 13px;
      color: #e8eef5;
      line-height: 1.25;
    }
    .check-row label {
      display:flex;
      align-items:center;
      gap: 8px;
      cursor:pointer;
      font-size: 13px;
      font-weight: 500;
      flex: 1;
    }
    .check-row input { width:13px; height:13px; accent-color: var(--accent); margin: 0; }
    .check-count { color:rgba(223,231,239,0.48); font-size:12px; flex-shrink: 0; }

    .grid-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      padding: 1rem 0;
      background: transparent;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      border-radius: 0;
      box-shadow: none;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .grid-count {
      display: inline-flex;
      align-items: center;
      gap: .42rem;
      font-size: .92rem;
      color: #d7bd80;
      font-weight: 600;
      letter-spacing: .01em;
      text-shadow: 0 1px 0 rgba(0,0,0,0.16);
    }
    .grid-count::before {
      content: "";
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      background: url('../icons/fish-results-icon.png') center / contain no-repeat;
      transform: translateY(-1px);
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
    }
    .grid-count strong {
      color: inherit;
      font-weight: 700;
    }
    .filter-empty-state {
      display: grid;
      gap: .6rem;
      justify-items: start;
      padding: 1.2rem;
    }
    .filter-empty-title {
      font-size: 1rem;
      color: #f3f7fb;
      letter-spacing: -.01em;
    }
    .filter-empty-copy {
      margin: 0;
      color: rgba(219,227,236,0.76);
      line-height: 1.65;
      font-size: .9rem;
    }
    .filter-reset-btn {
      margin-top: .1rem;
    }

    .prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
    .prod-card {
      background:
        radial-gradient(circle at 50% 120%, rgba(122,176,220,0.16), transparent 42%),
        linear-gradient(180deg, rgba(14,31,48,0.98) 0%, rgba(9,20,33,0.98) 100%);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
      cursor: pointer;
      box-shadow:
        0 12px 26px rgba(4,10,18,0.2),
        inset 0 1px 0 rgba(255,255,255,0.04);
      backdrop-filter: blur(14px);
    }
    .prod-card:hover {
      border-color: rgba(255,255,255,0.12);
      box-shadow:
        0 18px 38px rgba(7,14,24,0.24),
        inset 0 1px 0 rgba(255,255,255,0.06);
      transform: translateY(-3px);
    }
    .prod-img {
      aspect-ratio: 1 / .94;
      width: calc(100% - .9rem);
      margin: .45rem .45rem 0;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: #000;
      border-radius: 14px;
    }
    .prod-img-media {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      z-index: 0;
      padding: .18rem .2rem .14rem;
      box-sizing: border-box;
    }
    .prod-img-media img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      object-position: center;
      background: transparent;
      transform: translateX(-4%) scale(.94);
      transform-origin: center center;
      transition: transform .4s ease;
    }
    .prod-card:hover .prod-img-media img { transform: translateX(-4%) scale(.99); }
    .prod-img-fallback {
      width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--text-light);
    }
    .prod-badge {
      position: absolute;
      top: .48rem;
      left: .48rem;
      padding: .18rem .52rem;
      border-radius: 999px;
      font-size: .48rem;
      font-weight: 700;
      z-index: 2;
      text-transform: uppercase;
      letter-spacing: .05em;
      border: 1px solid transparent;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 10px 18px rgba(4,10,18,0.22);
    }
    .b-avail {
      background: linear-gradient(180deg, rgba(235,214,167,0.96), rgba(212,186,128,0.98));
      border-color: rgba(255,245,219,0.32);
      color: #4c350f;
      text-shadow: 0 1px 0 rgba(255,255,255,0.22);
    }
    .b-sold {
      background: linear-gradient(180deg, rgba(92,98,110,0.58), rgba(70,76,87,0.66));
      border-color: rgba(255,255,255,0.04);
      color: rgba(242,246,250,0.74);
    }
    .prod-info {
      padding: .7rem .78rem .78rem;
      color: #eef3f8;
      text-align: left;
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      gap: .42rem;
    }
    .prod-copy {
      display: grid;
      gap: 0;
      flex: 1 1 auto;
      align-content: start;
    }
    .prod-name {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 1.48rem;
      color: #f3f7fb;
      margin-bottom: .19rem;
      line-height: 1.06;
      letter-spacing: -.02em;
      min-height: 0;
      overflow: hidden;
      white-space: normal;
      text-overflow: unset;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .prod-sub {
      display: block;
      margin: 0 0 1rem;
      font-size: .82rem;
      line-height: 1.28;
      color: rgba(214,223,233,0.6);
      font-style: italic;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .prod-tags { display: none; }
    .prod-tag {
      display: inline-block;
      font-size: .58rem;
      padding: .15rem .45rem;
      background: var(--accent-light);
      border-radius: 14px;
      color: var(--accent);
      font-weight: 600;
      letter-spacing: .03em;
    }
    .prod-tag.tag-care { background: var(--yellow-bg); color: var(--yellow); }
    .prod-copy .mini {
      display: -webkit-box;
      margin: 0 !important;
      font-size: .76rem;
      line-height: 1.5;
      color: rgba(219,227,236,0.72);
      overflow: hidden;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .prod-foot {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      margin-top: auto;
      padding-top: .55rem;
    }
    .prod-price {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 1.42rem;
      line-height: 1.1;
      color: #f0ddb0;
      letter-spacing: -.03em;
      margin: 0;
    }
    .prod-price-old {
      display: none;
    }
    .prod-btn {
      width: auto;
      min-width: 0;
      align-self: auto;
      padding: .34rem 1.14rem;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 700;
      border: none;
      cursor: pointer;
      letter-spacing: .01em;
      text-transform: none;
      text-align: center;
      white-space: nowrap;
    }
    .btn-buy {
      background: linear-gradient(135deg, #b79a63 0%, #8d744a 100%);
      color: #fff8ea;
      box-shadow: 0 10px 18px rgba(62,45,19,0.24);
    }
    .btn-notify {
      background: rgba(255,255,255,0.07);
      color: #ecf1f7;
      border: 1px solid rgba(255,255,255,0.1);
    }

    .admin-toggle {
      position: fixed;
      right: 1.2rem;
      bottom: 1.2rem;
      z-index: 1000;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 14px;
      padding: .85rem 1rem;
      font-weight: 700;
      box-shadow: var(--shadow-lg);
      cursor: pointer;
    }

    .admin-drawer {
      position: fixed;
      inset: 0 0 0 auto;
      width: min(440px, 100vw);
      background: linear-gradient(180deg, rgba(8,19,31,0.96) 0%, rgba(10,23,36,0.94) 100%);
      box-shadow: -8px 0 30px rgba(0,0,0,.28);
      z-index: 1001;
      transform: translateX(100%);
      transition: transform .28s ease;
      display: flex;
      flex-direction: column;
      color: #eef3f8;
      backdrop-filter: blur(16px);
    }
    .admin-drawer.open { transform: translateX(0); }
    .admin-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 1rem .75rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .admin-body {
      padding: 1rem;
      overflow: auto;
      display: grid;
      gap: 1rem;
    }
    .admin-actions, .inline-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
    .btn {
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.06);
      color: #eef3f8;
      padding: .65rem .85rem;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
    }
    .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
    .btn.danger { background: var(--red-bg); color: var(--red); border-color: #f2caca; }
    .btn.ghost { background: rgba(255,255,255,0.04); }

    .admin-list { display: grid; gap: .6rem; }
    .admin-item {
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: .75rem;
      display: grid;
      grid-template-columns: 54px 1fr auto;
      gap: .8rem;
      align-items: center;
    }
    .admin-item-thumb {
      width: 54px; height: 54px; border-radius: 10px; overflow: hidden; background: #000;
    }
    .admin-item-thumb img { width: 100%; height: 100%; object-fit: contain; background:#000; }
    .mini { font-size: .74rem; color: var(--text-mut); }

    .stats,
    .about,
    .footer-callout {
      display: none;
    }
    .post-catalog-flow {
      max-width: var(--max-w);
      margin: 3.3rem auto 0;
      padding: 0 2rem;
      display: grid;
      gap: 1.1rem;
    }
    .post-section {
      position: relative;
      overflow: hidden;
      padding: 1.45rem;
      border-radius: 26px;
      background:
        radial-gradient(circle at 12% 16%, rgba(197,154,63,0.12), transparent 24%),
        linear-gradient(180deg, rgba(12,27,42,0.96) 0%, rgba(8,19,31,0.95) 100%);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow:
        0 18px 42px rgba(7,14,24,0.18),
        inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .post-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 85% 18%, rgba(118,176,224,0.12), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.02), transparent 34%);
      pointer-events: none;
    }
    .post-section > * {
      position: relative;
      z-index: 1;
    }
    .post-section-head {
      display: grid;
      gap: .55rem;
    }
    .post-kicker {
      display: inline-flex;
      width: max-content;
      align-items: center;
      gap: .45rem;
      padding: .42rem .74rem;
      border-radius: 999px;
      border: 1px solid rgba(214,191,142,0.18);
      background: rgba(255,255,255,0.04);
      font-size: .68rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(243,247,251,0.78);
    }
    .post-title {
      margin: 0;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.68rem;
      font-weight: 600;
      line-height: 1.08;
      letter-spacing: -.05em;
      color: #f4f7fb;
      text-wrap: balance;
    }
    .post-copy {
      margin: 0;
      font-size: .92rem;
      line-height: 1.72;
      color: rgba(223,231,239,0.78);
      max-width: 64ch;
    }
    .post-note {
      margin: 0;
      font-size: .76rem;
      line-height: 1.5;
      color: rgba(214,223,233,0.62);
    }
    .post-btn {
      min-height: 48px;
      padding: .85rem 1.15rem;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .82rem;
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
    }
    .post-btn-primary {
      background: linear-gradient(135deg, #c59a3f 0%, #af7f25 100%);
      color: #132437;
      box-shadow: 0 14px 28px rgba(52,38,16,0.24);
    }
    .post-catalog-cta {
      display: grid;
      gap: 1rem;
      background:
        radial-gradient(circle at 90% 12%, rgba(118,176,224,0.12), transparent 26%),
        linear-gradient(135deg, rgba(13,33,50,0.98) 0%, rgba(12,43,44,0.9) 100%);
    }
    .post-cta-actions {
      display: grid;
      gap: .7rem;
      align-content: start;
    }
    .process-track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(260px, 84%);
      gap: .8rem;
      overflow-x: auto;
      padding-bottom: .2rem;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .process-track::-webkit-scrollbar {
      display: none;
    }
    .process-card {
      min-height: 100%;
      padding: 1rem;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,0.08);
      background:
        radial-gradient(circle at 18% 20%, rgba(197,154,63,0.12), transparent 22%),
        rgba(255,255,255,0.04);
      display: grid;
      gap: .58rem;
      scroll-snap-align: start;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .process-step {
      display: inline-flex;
      width: max-content;
      align-items: center;
      justify-content: center;
      padding: .28rem .55rem;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: .64rem;
      font-weight: 700;
      letter-spacing: .12em;
      color: #f0ddb0;
    }
    .process-card h3,
    .proof-feature h3 {
      margin: 0;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.04rem;
      font-weight: 600;
      line-height: 1.18;
      color: #f4f7fb;
      letter-spacing: -.03em;
    }
    .process-card p,
    .proof-card p,
    .authority-visual p,
    .faq-item p {
      margin: 0;
      font-size: .82rem;
      line-height: 1.62;
      color: rgba(223,231,239,0.76);
    }
    .process-card small,
    .choice-card small {
      font-size: .7rem;
      line-height: 1.45;
      color: rgba(214,223,233,0.58);
      font-weight: 600;
    }
    .proof-layout {
      display: grid;
      gap: .8rem;
    }
    .proof-feature {
      padding: 1rem;
      border-radius: 22px;
      background:
        radial-gradient(circle at 82% 20%, rgba(118,176,224,0.14), transparent 24%),
        linear-gradient(180deg, rgba(18,39,60,0.92) 0%, rgba(10,23,36,0.94) 100%);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .proof-feature-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: .72rem;
    }
    .proof-feature-list li {
      position: relative;
      padding-left: 1rem;
      font-size: .82rem;
      line-height: 1.58;
      color: rgba(223,231,239,0.78);
    }
    .proof-feature-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .48rem;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #d2b072;
      box-shadow: 0 0 0 4px rgba(210,176,114,0.14);
    }
    .proof-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .72rem;
    }
    .proof-card {
      padding: .95rem;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      display: grid;
      gap: .38rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .proof-label {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(223,231,239,0.56);
    }
    .proof-card strong {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -.05em;
      color: #f4f7fb;
    }
    .choice-list {
      display: grid;
      gap: .72rem;
    }
    .choice-card {
      padding: 1rem;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,0.08);
      background:
        linear-gradient(180deg, rgba(18,39,60,0.92) 0%, rgba(10,23,36,0.9) 100%);
      display: grid;
      gap: .4rem;
      box-shadow: 0 12px 28px rgba(7,14,24,0.12);
      transition: transform .2s ease, border-color .2s ease;
    }
    .choice-card:hover {
      transform: translateY(-2px);
      border-color: rgba(214,191,142,0.24);
    }
    .choice-card strong {
      font-size: 1rem;
      line-height: 1.18;
      letter-spacing: -.02em;
      color: #f4f7fb;
    }
    .choice-card span {
      font-size: .8rem;
      line-height: 1.58;
      color: rgba(223,231,239,0.74);
    }
    .brand-authority {
      display: grid;
      gap: .9rem;
      background:
        radial-gradient(circle at 8% 18%, rgba(197,154,63,0.14), transparent 20%),
        linear-gradient(135deg, rgba(14,31,48,0.98) 0%, rgba(15,38,58,0.96) 100%);
    }
    .authority-visual,
    .authority-copy {
      padding: 1rem;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .authority-visual {
      display: grid;
      gap: .62rem;
      align-content: start;
    }
    .authority-visual strong {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.1rem;
      line-height: 1.18;
      color: #f4f7fb;
      letter-spacing: -.04em;
    }
    .authority-pill-list {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-top: .2rem;
    }
    .authority-pill-list span {
      padding: .42rem .66rem;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: .7rem;
      font-weight: 600;
      color: rgba(240,244,249,0.84);
    }
    .authority-copy {
      display: grid;
      gap: .55rem;
    }
    .faq-list {
      display: grid;
      gap: .7rem;
    }
    .faq-item {
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      overflow: hidden;
    }
    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 1rem 1.05rem;
      font-size: .92rem;
      font-weight: 700;
      line-height: 1.42;
      color: #f4f7fb;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .85rem;
    }
    .faq-item summary::-webkit-details-marker {
      display: none;
    }
    .faq-item summary::after {
      content: "+";
      flex-shrink: 0;
      width: 1.35rem;
      height: 1.35rem;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.06);
      color: #f0ddb0;
      font-size: 1rem;
      line-height: 1;
    }
    .faq-item[open] summary::after {
      content: "–";
    }
    .faq-item p {
      padding: 0 1.05rem 1rem;
    }
    .final-cta {
      background:
        radial-gradient(circle at 86% 18%, rgba(197,154,63,0.16), transparent 24%),
        linear-gradient(180deg, rgba(17,41,63,0.98) 0%, rgba(11,28,44,0.98) 100%);
    }
    .post-catalog-flow + .footer {
      margin-top: 2rem;
    }
    .footer { margin-top: 3.3rem; }
    .stats { background: transparent; }
    .stats-in { max-width: var(--max-w); margin: 0 auto; padding: 3rem 2rem; text-align: center; border-radius: 30px; background: radial-gradient(circle at 15% 20%, rgba(197,154,63,0.10), transparent 20%), linear-gradient(135deg, #0f2032 0%, #14304b 100%); box-shadow: 0 24px 58px rgba(12, 23, 38, 0.14); border: 1px solid rgba(255,255,255,0.06); }
    .stats-t { font-family: 'Space Grotesk', sans-serif; font-size: 1.7rem; font-weight: 600; margin-bottom: .55rem; color: #fff; letter-spacing: -.05em; }
    .stats-s { font-size: .88rem; color: rgba(255,255,255,.68); max-width: 580px; margin: 0 auto 2rem; line-height: 1.8; }
    .stats-g { display: grid; grid-template-columns: repeat(5, 1fr); gap: .85rem; }
    .st-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 1.25rem 1rem; text-align: left; backdrop-filter: blur(10px); }
    .st-i { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(230,237,245,.55); margin-bottom: .8rem; font-weight: 700; }
    .st-n { font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -.05em; }
    .st-l { font-size: .74rem; color: rgba(230,237,245,.7); margin-top: .45rem; font-weight: 500; line-height: 1.5; }

    .about { max-width: var(--max-w); margin: 4.6rem auto 0; padding: 0 2rem; display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: stretch; }
    .about-vis { position: relative; min-height: 430px; border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 18% 22%, rgba(197,154,63,0.16), transparent 20%), linear-gradient(135deg, #0d1b2b 0%, #14293f 52%, #18344f 100%); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 22px 54px rgba(12,23,38,0.14); padding: 1.6rem; display: flex; align-items: flex-start; }
    .about-vis::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; right: -60px; top: -50px; background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.02) 55%, transparent 72%); }
    .about-vis::after { content: ""; position: absolute; right: 28px; bottom: 18px; width: 270px; height: 270px; background: url('../../images_catalog/goby-firefish.png') center/contain no-repeat; filter: drop-shadow(0 24px 42px rgba(0,0,0,0.35)); }
    .about-card { position: relative; z-index: 1; max-width: 290px; padding: 1.15rem; border-radius: 22px; background: rgba(10,21,34,0.54); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(12px); color: #eef2f7; }
    .about-card small { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(238,242,247,0.56); margin-bottom: .55rem; font-weight: 700; }
    .about-card strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; line-height: 1.35; letter-spacing: -.03em; }
    .about-card p { margin-top: .6rem; font-size: .8rem; color: rgba(238,242,247,0.76); line-height: 1.65; }
    .about-pills { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .8rem; }
    .about-pills span { padding: .4rem .65rem; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.09); font-size: .66rem; color: #eef2f7; letter-spacing: .04em; }
    .about-txt { background: linear-gradient(180deg, rgba(10,22,35,0.78) 0%, rgba(8,18,30,0.72) 100%); border: 1px solid rgba(255,255,255,0.1); border-radius: 28px; padding: 2rem; box-shadow: 0 18px 40px rgba(7,14,24,0.2); backdrop-filter: blur(16px); }
    .about-kicker { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .7rem; border-radius: 999px; background: rgba(15,100,87,0.16); color: #d6ece6; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; border: 1px solid rgba(106,192,177,0.12); }
    .about-txt h2 { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 600; margin-bottom: 1rem; line-height: 1.12; color: #f3f7fb; letter-spacing: -.05em; }
    .about-txt h2 span { color: #9fd5c7; }
    .about-txt p { color: rgba(223,231,239,0.76); font-size: .92rem; margin-bottom: .9rem; line-height: 1.85; }
    .about-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-top: 1.1rem; }
    .about-list div { padding: .9rem 1rem; border-radius: 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); font-size: .78rem; color: rgba(232,238,245,0.82); line-height: 1.55; font-weight: 600; }

    .footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #10243c 0%, #0b1828 100%); padding: 2rem 2rem 1.5rem; }
    .footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 10% 10%, rgba(197,154,63,0.08), transparent 20%); pointer-events: none; }
    .footer-callout { max-width: var(--max-w); margin: 0 auto 2.8rem; transform: none; padding: 1.3rem 1.5rem; border-radius: 24px; background: linear-gradient(180deg, rgba(19,48,75,0.98) 0%, rgba(15,39,63,0.98) 100%); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 22px 46px rgba(7,14,24,0.22); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1; }
    .footer-callout small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(236,241,246,0.58); margin-bottom: .4rem; font-weight: 700; }
    .footer-callout strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; color: #fff; letter-spacing: -.04em; }
    .footer-cta { min-height: 48px; padding: .78rem 1rem; border-radius: 999px; background: linear-gradient(135deg, #c59a3f 0%, #b18326 100%); color: #132437; font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
    .footer-in { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; position: relative; z-index: 1; }
    .footer-br { font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; font-weight: 600; color: #fff; margin-bottom: .7rem; letter-spacing: -.04em; }
    .footer p { font-size: .82rem; color: rgba(255,255,255,.52); line-height: 1.8; max-width: 34ch; }
    .footer h4 { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.46); margin-bottom: .9rem; }
    .footer-links { list-style: none; }
    .footer-links li { margin-bottom: .48rem; }
    .footer-links a { font-size: .82rem; color: rgba(255,255,255,.68); }
    .footer-bot { max-width: var(--max-w); margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .72rem; color: rgba(255,255,255,.36); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1; }
    .footer-pay { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
    .pay-icon { background: rgba(255,255,255,.08); padding: .3rem .55rem; border-radius: 999px; font-size: .65rem; color: rgba(255,255,255,.6); font-weight: 700; letter-spacing: .05em; }

    @media(min-width: 768px) {
      .post-catalog-cta {
        grid-template-columns: minmax(0, 1.2fr) auto;
        align-items: end;
      }
      .post-cta-actions {
        min-width: 220px;
      }
      .process-track {
        grid-auto-flow: initial;
        grid-auto-columns: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
      }
      .proof-layout {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
        align-items: start;
      }
      .choice-list,
      .faq-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .brand-authority {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        align-items: stretch;
      }
    }
    @media(min-width: 1024px) {
      .post-title {
        font-size: 1.92rem;
      }
      .process-track {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
    @media(max-width: 1024px) {
      .nav-in {
        grid-template-columns: 1fr;
        justify-items: stretch;
      }
      .nav-logo {
        justify-content: center;
      }
      .nav-acts {
        justify-content: center;
      }
      .hero-shell {
        grid-template-columns: 1fr;
        padding: 2.1rem 2rem 2.8rem;
        min-height: auto;
      }
      .hero-metrics {
        position: static;
        transform: none;
        width: auto;
        margin-top: 1.6rem;
        display: flex;
        flex-wrap: wrap;
      }
      .hero-copy {
        max-width: none;
      }
      .hero-stage {
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
      }
      .stats-g {
        grid-template-columns: repeat(3, 1fr);
      }
      .prod-grid { grid-template-columns: repeat(2, 1fr); }
      .catalog-wrap { grid-template-columns: 1fr; }
      .sidebar { position: static; }
      .about, .footer-in { grid-template-columns: 1fr; }
      .about-list {
        grid-template-columns: 1fr;
      }
    }
    @media(max-width: 768px) {
      .topbar {
        display: none;
      }
      .topbar-in, .nav-in, .mnav-in, .breadcrumb, .hero, .guarantee-bar, .catalog-wrap, .stats-in, .about, .footer, .post-catalog-flow { padding-left: 1rem; padding-right: 1rem; }
      .topbar-copy {
        gap: .7rem 1rem;
        font-size: .66rem;
      }
      .topbar-note {
        display: none;
      }
      .nav-in {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        position: relative;
        padding-top: .8rem;
        padding-bottom: .8rem;
      }
      .nav-mobile-btn,
      .nav-mobile-actions {
        display: flex;
      }
      .nav-mobile-actions {
        align-items: center;
        justify-content: flex-end;
        gap: .35rem;
        margin-left: auto;
      }
      .nav-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        justify-content: center;
        gap: .44rem;
        max-width: 132px;
        width: max-content;
      }
      .nav-logo-mark {
        --logo-mobile-offset-x: 2px;
        --logo-mobile-offset-y: -11px;
        width: 42px;
        height: 42px;
        border: 2px solid rgba(178,154,106,0.76);
        box-shadow:
          inset 0 0 0 2px rgba(178,154,106,0.1),
          0 6px 16px rgba(5,10,18,0.16);
      }
      .nav-logo-text b {
        font-size: .94rem;
        text-align: center;
      }
      .nav-logo-text small {
        display: none;
      }
      .nav-mobile-btn {
        width: 40px;
        height: 40px;
        border-radius: 13px;
      }
      .nav-mobile-glyph {
        font-size: .92rem;
      }
      .nav-mobile-menu-lines span {
        width: 16px;
      }
      .nav-mobile-cart .nav-cart-badge {
        top: 4px;
        right: 4px;
      }
      .nav-search-wrap {
        display: none;
        width: 100%;
        margin-top: .7rem;
      }
      .navbar.mobile-search-open .nav-search-wrap {
        display: block;
      }
      .nav-search {
        grid-template-columns: auto 1fr;
        padding-right: .95rem;
      }
      .nav-search-btn {
        display: none;
      }
      .nav-acts {
        display: none;
      }
      .nav-act-btn {
        flex: 1 1 calc(50% - .5rem);
        min-width: 0;
      }
      .mnav {
        display: none;
        border-top: 1px solid rgba(255,255,255,0.07);
      }
      .navbar.mobile-menu-open .mnav {
        display: block;
      }
      .mnav-in {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
        padding-top: .8rem;
        padding-bottom: .95rem;
      }
      .mnav-a {
        padding: .78rem .82rem;
        font-size: .78rem;
        text-align: center;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.07);
        border-bottom-width: 1px;
        background: rgba(255,255,255,0.03);
      }
      .mnav-a.active {
        border-bottom-color: rgba(178,154,106,0.72);
        background: rgba(178,154,106,0.08);
      }
      .hero {
        margin-top: .8rem;
        margin-bottom: 1.8rem;
      }
      .hero-shell {
        padding: 1.3rem 1rem 1.6rem;
        min-height: auto;
        border-radius: 22px;
      }
      .hero-copy {
        z-index: 3;
      }
      .hero-title {
        font-size: 1.96rem;
        max-width: none;
        line-height: 1.02;
        letter-spacing: -.035em;
        text-wrap: balance;
      }
      .hero-kicker {
        padding: .42rem .78rem;
        font-size: .66rem;
        letter-spacing: .11em;
      }
      .hero-kicker-full {
        display: none;
      }
      .hero-kicker-short {
        display: inline;
      }
      .hero-title-mobile-break {
        display: block;
      }
      .hero-desc {
        font-size: .88rem;
        line-height: 1.72;
      }
      .hero-actions,
      .hero-metrics {
        flex-direction: column;
      }
      .hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
      }
      .hero-btn-full {
        display: none;
      }
      .hero-btn-short {
        display: inline;
      }
      .hero-visual {
        min-height: auto;
        display: block;
        margin-top: .95rem;
        overflow: hidden;
      }
      .hero-metrics {
        position: static;
        transform: none;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: .9rem;
        width: auto;
        gap: .5rem;
      }
      .hero-btn,
      .hero-metric {
        width: 100%;
      }
      .hero-btn {
        min-height: 46px;
        padding: .78rem .7rem;
        font-size: .76rem;
      }
      .hero-metric {
        min-height: 72px;
        padding: .65rem .45rem;
        border-radius: 18px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: .42rem;
      }
      .hero-metric-badge {
        width: 31px;
        height: 31px;
        border-radius: 10px;
      }
      .hero-metric-icon {
        width: 15px;
        height: 15px;
      }
      .hero-metric-copy {
        width: auto;
        min-width: 0;
      }
      .hero-metric strong {
        font-size: 1.18rem;
      }
      .hero-metric span {
        margin-top: .16rem;
        font-size: .56rem;
        letter-spacing: .04em;
        line-height: 1.24;
      }
      .breadcrumb {
        margin-top: .18rem;
        padding-top: .75rem;
        border-top: 1px solid rgba(255,255,255,0.08);
      }
      .coll-header {
        padding: 1.65rem 1.1rem 1.45rem;
      }
      .coll-title {
        font-size: 2.02rem;
        line-height: 1.02;
      }
      .coll-active-category {
        margin-top: .48rem;
        font-size: 1rem;
        letter-spacing: -.01em;
      }
      .coll-count {
        margin-top: .52rem;
        font-size: .96rem;
      }
      .coll-desc {
        margin-top: .68rem;
        font-size: .84rem;
        line-height: 1.72;
      }
      .subcat-shell {
        padding: 0 .55rem;
        gap: .35rem;
        align-items: flex-start;
      }
      .subcat-viewport {
        mask-image: none;
        -webkit-mask-image: none;
        padding-top: .05rem;
      }
      .subcat-nav {
        width: 28px;
        height: 28px;
        margin-top: 1rem;
        border-radius: 10px;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.06),
          0 8px 18px rgba(4,10,18,0.18);
      }
      .subcat-nav span {
        font-size: .96rem;
        transform: translateY(-1px);
      }
      .hero-stage {
        min-height: 266px;
        width: 100%;
        margin-top: 0;
        overflow: visible;
        border-radius: 24px;
      }
      .hero-stage-panel {
        inset: 34px 0 14px 0;
        border-radius: 22px;
      }
      .hero-card {
        max-width: 150px;
        padding: .82rem .85rem .8rem;
        border-radius: 18px;
      }
      .hero-card.primary {
        left: 3%;
        top: 16%;
      }
      .hero-card.secondary {
        right: 3%;
        bottom: 17%;
        max-width: 126px;
      }
      .hero-card strong {
        font-size: .94rem;
      }
      .hero-card p {
        font-size: .69rem;
        line-height: 1.45;
      }
      .hero-card.secondary strong {
        font-size: .95rem;
      }
      .hero-fish.one {
        height: auto;
        width: var(--hero-fish-one-width-mobile, 45%);
        right: var(--hero-fish-one-right-mobile, 2%);
        left: var(--hero-fish-one-left-mobile, auto);
        top: var(--hero-fish-one-top-mobile, 3%);
        bottom: var(--hero-fish-one-bottom-mobile, auto);
        transform: rotate(var(--hero-fish-one-rotate-mobile, 3deg));
      }
      .hero-fish.two {
        z-index: var(--hero-fish-two-z-mobile, 7);
        height: auto;
        width: var(--hero-fish-two-width-mobile, 38%);
        right: var(--hero-fish-two-right-mobile, auto);
        left: var(--hero-fish-two-left-mobile, 7%);
        top: var(--hero-fish-two-top-mobile, auto);
        bottom: var(--hero-fish-two-bottom-mobile, -4%);
        transform: rotate(var(--hero-fish-two-rotate-mobile, 6deg));
        opacity: var(--hero-fish-two-opacity-mobile, .98);
      }
      body[data-current-department="corais"] .hero-stage-panel {
        inset: 28px 0 10px 0;
      }
      body[data-current-department="corais"] .hero-card.primary {
        left: 2%;
        top: 18%;
      }
      body[data-current-department="corais"] .hero-card.secondary {
        right: 1%;
        bottom: 18%;
        max-width: 138px;
      }
      body[data-current-department="corais"] .hero-fish.one {
        width: 45%;
        right: 0;
        top: 18%;
      }
      body[data-current-department="corais"] .hero-fish.two {
        width: 40%;
        left: 2%;
        bottom: 4%;
      }
      body[data-current-department="corais"] .prod-img-media img {
        transform: translateX(0) scale(1);
      }
      body[data-current-department="equipamentos"] .hero-stage-panel {
        inset: 30px 0 12px 0;
      }
      body[data-current-department="equipamentos"] .hero-card.primary {
        left: 2%;
        top: 20%;
      }
      body[data-current-department="equipamentos"] .hero-card.secondary {
        right: 2%;
        bottom: 16%;
        max-width: 132px;
      }
      body[data-current-department="equipamentos"] .hero-fish.one {
        width: 41%;
        right: 1%;
        top: 18%;
      }
      body[data-current-department="equipamentos"] .hero-fish.two {
        width: 40%;
        left: 1%;
        bottom: 4%;
      }
      body[data-current-department="equipamentos"] .prod-img-media img {
        transform: translateX(0) scale(.98);
      }
      body[data-current-department="alimentacao-e-suplementos"] .hero-stage-panel {
        inset: 30px 0 12px 0;
      }
      body[data-current-department="alimentacao-e-suplementos"] .hero-card.primary {
        left: 2%;
        top: 18%;
      }
      body[data-current-department="alimentacao-e-suplementos"] .hero-card.secondary {
        right: 2%;
        bottom: 15%;
        max-width: 136px;
      }
      body[data-current-department="alimentacao-e-suplementos"] .hero-fish.one {
        width: 40%;
        right: 1%;
        top: 18%;
      }
      body[data-current-department="alimentacao-e-suplementos"] .hero-fish.two {
        width: 41%;
        left: 1%;
        bottom: 4%;
      }
      body[data-current-department="alimentacao-e-suplementos"] .prod-img-media img {
        transform: translateX(0) scale(.99);
      }
      .sidebar {
        top: auto;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        backdrop-filter: none;
      }
      .sidebar-card {
        padding: 0 1rem;
        border-radius: 18px;
      }
      .filter-toolbar {
        padding: 1rem 0;
        margin: 0;
      }
      .filter-toolbar-status {
        display: inline;
      }
      .sidebar-collapse {
        display: none;
      }
      .sidebar.mobile-open .sidebar-collapse {
        display: block;
      }
      .sidebar:not(.mobile-open) .filter-toolbar {
        border-bottom: none;
      }
      .sidebar.mobile-open .filter-toggle .icon {
        transform: rotate(180deg);
        opacity: .72;
      }
      .guarantee-bar {
        margin-bottom: 1.25rem;
      }
      .post-catalog-flow {
        margin-top: 2.5rem;
        gap: .95rem;
      }
      .post-section {
        padding: 1.1rem;
        border-radius: 20px;
      }
      .post-title {
        font-size: 1.42rem;
        line-height: 1.08;
      }
      .post-copy {
        font-size: .84rem;
        line-height: 1.66;
      }
      .post-kicker {
        font-size: .62rem;
        padding: .38rem .66rem;
      }
      .post-btn {
        width: 100%;
        min-height: 46px;
        padding: .78rem .95rem;
        font-size: .78rem;
      }
      .proof-grid {
        gap: .62rem;
      }
      .proof-card {
        padding: .85rem;
      }
      .proof-card strong {
        font-size: 1.18rem;
      }
      .process-track {
        grid-auto-columns: minmax(238px, 86%);
      }
      .process-card,
      .proof-feature,
      .choice-card,
      .authority-visual,
      .authority-copy {
        border-radius: 18px;
      }
      .choice-card strong,
      .faq-item summary {
        font-size: .9rem;
      }
      .post-catalog-flow + .footer {
        margin-top: 1.8rem;
      }
      .guarantee-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem .85rem;
        padding: .95rem 1rem;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(11,40,39,0.7) 0%, rgba(10,31,31,0.62) 100%);
      }
      .guarantee-item {
        min-width: 0;
        gap: .5rem;
        font-size: .7rem;
        font-weight: 600;
        line-height: 1.28;
      }
      .guarantee-icon {
        width: 22px;
        height: 22px;
      }
      .guarantee-label-full {
        display: none;
      }
      .guarantee-label-short {
        display: inline;
      }
      .divider {
        display: block;
        margin: 0 auto .55rem;
      }
      .admin-toggle {
        display: none;
      }
      .admin-drawer {
        width: 100vw;
      }
      .stats-g {
        grid-template-columns: 1fr;
      }
      .stats-in {
        padding-top: 2.2rem;
        padding-bottom: 2.2rem;
      }
      .about {
        gap: 1.2rem;
        margin-top: 2.6rem;
      }
      .about-vis,
      .about-txt {
        min-height: auto;
      }
      .about-vis {
        min-height: 340px;
      }
      .about-vis::after {
        width: 210px;
        height: 210px;
      }
      .footer-callout {
        transform: none;
      }
      .grid-toolbar {
        gap: .45rem;
      }
      .grid-toolbar .mini {
        font-size: .62rem;
      }
      .prod-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
      }
      .prod-card {
        border-radius: 16px;
        background:
          radial-gradient(circle at 50% 120%, rgba(122,176,220,0.16), transparent 42%),
          linear-gradient(180deg, rgba(14,31,48,0.98) 0%, rgba(9,20,33,0.98) 100%);
        border-color: rgba(255,255,255,0.08);
        box-shadow:
          0 12px 26px rgba(4,10,18,0.2),
          inset 0 1px 0 rgba(255,255,255,0.04);
      }
      .prod-img {
        aspect-ratio: 1 / .94;
        width: calc(100% - .72rem);
        margin: .36rem .36rem 0;
        border-radius: 12px;
        overflow: hidden;
        background: #000;
        border: none;
        box-shadow: none;
      }
      .prod-img-media {
        inset: 0;
        padding: .16rem .18rem .12rem;
      }
      .prod-img-media img {
        max-width: 100%;
        max-height: 100%;
        object-position: center;
        transform: translateX(-4%) scale(.94);
        transform-origin: center center;
      }
      .prod-badge {
        display: inline-flex;
        top: .42rem;
        left: .42rem;
        padding: .16rem .42rem;
        border-radius: 999px;
        font-size: .42rem;
        letter-spacing: .05em;
        z-index: 3;
      }
      .prod-info {
        padding: .44rem .5rem .52rem;
        text-align: left;
        display: grid;
        gap: .36rem;
      }
      .prod-copy {
        display: grid;
        gap: 0;
      }
      .prod-name {
        font-family: 'Inter', sans-serif;
        font-size: .92rem;
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: -.01em;
        margin-bottom: 0;
        min-height: 0;
        overflow: hidden;
        white-space: normal;
        text-overflow: unset;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: .02rem;
      }
      .prod-tags,
      .prod-price-old {
        display: none;
      }
      .prod-sub {
        display: block;
        margin: 0 0 .7rem;
        font-size: .58rem;
        line-height: 1.26;
        color: rgba(214,223,233,0.6);
        font-style: italic;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .prod-copy .mini {
        display: -webkit-box;
        margin: 0 !important;
        font-size: .58rem;
        line-height: 1.48;
        color: rgba(219,227,236,0.72);
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      .prod-foot {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: .4rem;
        margin-top: 0;
      }
      .prod-price {
        font-family: 'Inter', sans-serif;
        font-size: 1.08rem;
        font-weight: 700;
        line-height: 1.1;
        color: #f0ddb0;
        margin: 0;
      }
      .prod-btn {
        width: auto;
        min-width: 0;
        align-self: auto;
        padding: .24rem .96rem;
        border-radius: 999px;
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .01em;
        text-align: center;
        white-space: nowrap;
      }
      .btn-buy {
        background: linear-gradient(135deg, #b79a63 0%, #8d744a 100%);
        color: #fff8ea;
        box-shadow: 0 10px 18px rgba(62,45,19,0.24);
      }
      .btn-notify {
        background: rgba(255,255,255,0.07);
        color: #ecf1f7;
        border: 1px solid rgba(255,255,255,0.1);
      }
      .subcat-strip { gap: .65rem; padding: 0 .2rem; }
      .subcat-item {
        --subcat-item-scale-active: var(--subcat-item-scale-mobile);
        min-width: 74px;
        gap: .42rem;
        padding: .1rem .15rem;
      }
      .subcat-thumb { width: 62px; height: 62px; }
      .subcat-label { max-width: 80px; font-size: .74rem; }
    .admin-item { grid-template-columns: 1fr; }
  }

.product-page {
  padding: 2.4rem 1.25rem 3.5rem;
}

.detail-shell {
  width: min(1160px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 1.35rem;
}

.detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  color: rgba(219, 227, 236, 0.66);
  font-size: .84rem;
}

.detail-breadcrumb a {
  color: rgba(240, 245, 250, 0.88);
  text-decoration: none;
}

.detail-hero {
  display: grid;
  gap: 1.2rem;
  padding: 1.2rem;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(19, 41, 63, 0.96), rgba(8, 19, 31, 0.98)),
    radial-gradient(circle at top right, rgba(179, 154, 99, 0.16), transparent 36%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 22px 60px rgba(4, 10, 18, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.detail-media-frame {
  position: relative;
  aspect-ratio: 1 / .92;
  min-height: 300px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(99, 165, 214, 0.22), transparent 36%),
    linear-gradient(180deg, rgba(7, 15, 25, 1) 0%, rgba(4, 10, 18, 1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.detail-media-frame img,
.detail-related-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.detail-status-badge {
  position: absolute;
  top: .95rem;
  left: .95rem;
  z-index: 2;
}

.detail-copy {
  display: grid;
  gap: 1rem;
}

.detail-headline {
  display: grid;
  gap: .55rem;
}

.detail-kicker,
.detail-section-kicker {
  display: inline-flex;
  width: fit-content;
  padding: .35rem .72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #d9be82;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.detail-title,
.detail-section h2,
.detail-empty-title,
.detail-final-cta h2 {
  margin: 0;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  line-height: .96;
  letter-spacing: -.04em;
  color: #f7f7f4;
}

.detail-section h2,
.detail-empty-title,
.detail-final-cta h2 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.detail-scientific {
  margin: 0;
  color: rgba(219, 227, 236, 0.66);
  font-style: italic;
  font-size: .95rem;
}

.detail-status-line {
  color: rgba(219, 227, 236, 0.8);
  font-size: .9rem;
  font-weight: 600;
}

.detail-price-row {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  flex-wrap: wrap;
}

.detail-price {
  font-size: 1.45rem;
  color: #f0ddb0;
  font-weight: 700;
}

.detail-price-consult {
  color: #eef3f8;
}

.detail-price-old {
  color: rgba(219, 227, 236, 0.44);
  text-decoration: line-through;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.detail-highlights,
.detail-specs,
.detail-related-grid {
  display: grid;
  gap: .72rem;
}

.detail-highlight,
.detail-spec-card,
.detail-related-card,
.detail-empty-card {
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(15, 31, 47, 0.94) 0%, rgba(8, 18, 29, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 16px 34px rgba(4, 10, 18, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.detail-highlight,
.detail-spec-card {
  padding: .9rem 1rem;
  display: grid;
  gap: .24rem;
}

.detail-highlight span,
.detail-spec-card span,
.detail-related-copy span {
  color: rgba(219, 227, 236, 0.62);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.detail-highlight strong,
.detail-spec-card strong,
.detail-related-copy strong {
  color: #f3f6f9;
  font-size: 1rem;
  line-height: 1.24;
}

.detail-grid,
.detail-section {
  display: grid;
  gap: .95rem;
}

.detail-section {
  padding: 1.2rem;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(12, 24, 37, 0.96) 0%, rgba(8, 16, 25, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.detail-section p,
.detail-empty-copy,
.detail-final-cta p {
  margin: 0;
  color: rgba(221, 229, 238, 0.8);
  line-height: 1.72;
  font-size: .98rem;
}

.detail-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .58rem;
  color: rgba(233, 239, 246, 0.84);
}

.detail-list li {
  line-height: 1.56;
}

.detail-faq {
  display: grid;
  gap: .7rem;
}

.detail-faq-item {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.detail-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.05rem;
  color: #f3f6f9;
  font-weight: 600;
}

.detail-faq-item summary::-webkit-details-marker {
  display: none;
}

.detail-faq-item p {
  padding: 0 1.05rem 1rem;
}

.detail-related-card {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.detail-related-media {
  aspect-ratio: 1 / .9;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 25%, rgba(99, 165, 214, 0.18), transparent 36%),
    #000;
}

.detail-related-copy {
  display: grid;
  gap: .25rem;
  padding: 1rem;
}

.detail-related-copy small {
  color: #f0ddb0;
  font-size: .88rem;
  font-weight: 700;
}

.detail-final-cta,
.detail-empty-card {
  padding: 1.3rem;
  display: grid;
  gap: .9rem;
}

.detail-empty {
  padding-top: 1rem;
}

.prod-detail-link {
  color: inherit;
  text-decoration: none;
}

.prod-media-link {
  display: block;
  height: 100%;
}

.prod-name-link {
  display: inline;
}

@media (min-width: 880px) {
  .product-page {
    padding-top: 2.8rem;
  }

  .detail-hero {
    grid-template-columns: minmax(0, .98fr) minmax(0, 1.1fr);
    align-items: stretch;
    padding: 1.45rem;
  }

  .detail-highlights,
  .detail-specs,
  .detail-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .detail-section:first-child {
    grid-column: 1 / -1;
  }

  .detail-final-cta {
    padding: 1.7rem 1.8rem;
  }
}

@media (max-width: 768px) {
  .product-page {
    padding: 1.35rem .95rem 2.6rem;
  }

  .detail-shell {
    gap: 1rem;
  }

  .detail-breadcrumb {
    font-size: .75rem;
    gap: .32rem;
  }

  .detail-hero,
  .detail-section,
  .detail-final-cta,
  .detail-empty-card {
    padding: 1rem;
    border-radius: 22px;
  }

  .detail-media-frame {
    min-height: 240px;
  }

  .detail-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .detail-actions .hero-btn {
    width: 100%;
    justify-content: center;
  }

  .detail-highlights,
  .detail-specs,
  .detail-related-grid {
    grid-template-columns: 1fr;
  }

  .detail-highlight,
  .detail-spec-card {
    padding: .82rem .9rem;
  }
}

.trust-page .nav-search-wrap {
  display: none;
}

.trust-page .nav-acts {
  margin-left: auto;
}

.info-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem 4rem;
  display: grid;
  gap: 1.2rem;
}

.info-section {
  display: grid;
  gap: 1rem;
  padding: 1.45rem;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(12, 24, 37, 0.96) 0%, rgba(8, 16, 25, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 46px rgba(7, 14, 24, 0.18);
}

.info-section-head {
  display: grid;
  gap: .55rem;
}

.info-section-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: .5rem;
  padding: .38rem .72rem;
  border-radius: 999px;
  background: rgba(15, 100, 87, 0.16);
  color: #d6ece6;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(106, 192, 177, 0.12);
}

.info-section h2,
.info-section h3 {
  margin: 0;
  color: #f3f7fb;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -.04em;
}

.info-section h2 {
  font-size: 1.9rem;
  line-height: 1.08;
}

.info-section h3 {
  font-size: 1.1rem;
  line-height: 1.2;
}

.info-section p,
.info-section li,
.info-note {
  margin: 0;
  color: rgba(223, 231, 239, 0.8);
  line-height: 1.78;
  font-size: .95rem;
}

.info-grid,
.commercial-grid,
.proof-grid,
.faq-page-list {
  display: grid;
  gap: .9rem;
}

.info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.commercial-grid,
.proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-card,
.commercial-card,
.proof-card {
  display: grid;
  gap: .45rem;
  padding: 1rem 1.05rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.info-card strong,
.commercial-card strong,
.proof-card strong {
  color: #f5f8fb;
  font-size: 1.03rem;
  line-height: 1.3;
}

.info-card span,
.commercial-card span,
.proof-card span {
  color: rgba(219, 227, 236, 0.62);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.info-list,
.legal-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .6rem;
}

.info-split {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 1rem;
}

.faq-page-item {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.faq-page-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.05rem;
  color: #f3f6f9;
  font-weight: 600;
}

.faq-page-item summary::-webkit-details-marker {
  display: none;
}

.faq-page-item .faq-page-content {
  display: grid;
  gap: .7rem;
  padding: 0 1.05rem 1rem;
}

.legal-copy {
  display: grid;
  gap: .9rem;
}

.info-cta-row {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.info-hero-note {
  display: grid;
  gap: .28rem;
  margin-top: .3rem;
  color: rgba(223, 231, 239, 0.72);
  font-size: .9rem;
}

@media (max-width: 980px) {
  .info-grid,
  .commercial-grid,
  .proof-grid,
  .info-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .trust-page .nav-acts {
    width: auto;
  }

  .info-page {
    padding: 0 1rem 3rem;
  }

  .info-section {
    padding: 1.1rem;
    border-radius: 24px;
  }

  .info-section h2 {
    font-size: 1.5rem;
  }
}

.ops-page {
  min-height: 100vh;
}

.ops-shell {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  gap: 1.2rem;
}

.ops-hero-card,
.ops-card,
.ops-kpi-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(14, 28, 46, 0.92) 0%, rgba(9, 19, 33, 0.92) 100%);
  box-shadow: 0 24px 60px rgba(4, 10, 18, 0.2);
}

.ops-hero-card,
.ops-card {
  border-radius: 28px;
  padding: 1.35rem;
}

.ops-hero-card {
  display: grid;
  gap: 1.25rem;
}

.ops-eyebrow,
.ops-card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(217, 199, 164, 0.92);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ops-hero-copy {
  display: grid;
  gap: 0.8rem;
}

.ops-hero-copy h1,
.ops-card h2 {
  font-family: "Space Grotesk", sans-serif;
  color: #f6f1e7;
  line-height: 1.06;
}

.ops-hero-copy h1 {
  font-size: clamp(2rem, 4vw, 3.3rem);
}

.ops-hero-copy p,
.ops-disclaimer {
  max-width: 70ch;
  color: rgba(223, 231, 239, 0.78);
}

.ops-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.ops-range-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ops-range-switch button {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #dfe7ef;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.ops-range-switch button[aria-pressed="true"] {
  background: rgba(197, 154, 63, 0.16);
  color: #f6f1e7;
  border-color: rgba(197, 154, 63, 0.52);
}

.ops-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.ops-hero-meta div,
.ops-kpi-card {
  border-radius: 22px;
  padding: 1rem 1.05rem;
  background: rgba(255, 255, 255, 0.04);
}

.ops-hero-meta small,
.ops-kpi-card small,
.ops-threshold-card small {
  display: block;
  color: rgba(223, 231, 239, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  margin-bottom: 0.35rem;
}

.ops-hero-meta strong,
.ops-kpi-card strong,
.ops-threshold-card strong {
  color: #f6f1e7;
}

.ops-kpi-grid,
.ops-grid,
.ops-threshold-grid {
  display: grid;
  gap: 1rem;
}

.ops-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ops-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-kpi-card strong {
  font-size: clamp(1.35rem, 2vw, 2.2rem);
}

.ops-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ops-table-wrap {
  overflow-x: auto;
}

.ops-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.ops-table th,
.ops-table td {
  padding: 0.85rem 0.75rem;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  vertical-align: top;
}

.ops-table thead th {
  border-top: none;
  color: rgba(223, 231, 239, 0.64);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

.ops-table td strong,
.ops-table td span {
  display: block;
}

.ops-table td span {
  color: rgba(223, 231, 239, 0.58);
  font-size: 0.84rem;
  margin-top: 0.12rem;
}

.ops-empty-cell,
.ops-empty-list-item {
  color: rgba(223, 231, 239, 0.6);
}

.ops-status-list,
.ops-routine-list {
  display: grid;
  gap: 0.75rem;
}

.ops-status-list li,
.ops-routine-list li {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.9rem 1rem;
}

.ops-status-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.ops-status-list li span,
.ops-routine-list li,
.ops-threshold-card p,
.ops-feedback-card p {
  color: rgba(223, 231, 239, 0.78);
}

.ops-threshold-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ops-threshold-card {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  padding: 1rem 1.05rem;
  display: grid;
  gap: 0.5rem;
}

.ops-feedback-card[data-variant="success"] {
  border-color: rgba(85, 163, 113, 0.36);
}

.ops-feedback-card[data-variant="error"] {
  border-color: rgba(198, 40, 40, 0.42);
}

.ops-feedback-card[data-variant="warning"] {
  border-color: rgba(197, 154, 63, 0.42);
}

@media (max-width: 1180px) {
  .ops-kpi-grid,
  .ops-threshold-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .ops-shell {
    padding: 1.1rem 1rem 2rem;
  }

  .ops-grid-two,
  .ops-hero-meta,
  .ops-kpi-grid,
  .ops-threshold-grid {
    grid-template-columns: 1fr;
  }

  .ops-hero-actions {
    align-items: stretch;
  }

  .ops-range-switch {
    width: 100%;
  }

  .ops-range-switch button {
    flex: 1 1 30%;
  }
}