:root {
     --red:#df111b;
     --red2:#ff2430;
     --red3:#a9060f;
     --black:#0b0c0f;
     --ink:#17181d;
     --soft:#5e626b;
     --paper:#f6f6f7;
     --white:#fff;
     --line:#e5e6e9;
     --green:#15803d;
     --amber:#b45309;
     --shadow:0 22px 70px rgba(13,14,18,.12);
     --radius:26px;
     --header:82px;
   }
   * {
     box-sizing:border-box
   }
   html {
     scroll-behavior:smooth;
     background:var(--paper)
   }
   body {
     margin:0;
     color:var(--ink);
     background:var(--paper);
     font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
     overflow-x:hidden
   }
   button,input,select,textarea {
     font:inherit
   }
   button,a {
     -webkit-tap-highlight-color:transparent
   }
   a {
     color:inherit;
     text-decoration:none
   }
   img {
     display:block;
     max-width:100%
   }
   ::selection {
     background:var(--red);
     color:#fff
   }
   /* AMBIENT LAYER */ #scrollProgress {
     position:fixed;
     left:0;
     top:0;
     height:3px;
     width:0;
     background:linear-gradient(90deg,#fff,var(--red2),#ff9aa0);
     z-index:9999;
     box-shadow:0 0 18px rgba(223,17,27,.7)
   }
   .ambient {
     position:fixed;
     inset:0;
     pointer-events:none;
     z-index:-3;
     overflow:hidden;
     background: radial-gradient(900px 550px at 95% -10%,rgba(223,17,27,.17),transparent 60%), radial-gradient(700px 450px at -10% 55%,rgba(223,17,27,.09),transparent 60%), linear-gradient(#fafafa,#f3f3f4)
   }
   .ambient:before {
     content:"";
     position:absolute;
     inset:0;
     opacity:.3;
     background-image:linear-gradient(rgba(15,15,18,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,15,18,.035) 1px,transparent 1px);
     background-size:48px 48px;
     mask-image:linear-gradient(to bottom,black,transparent 78%)
   }
   .ambient:after {
     content:"MYZ • WHOLESALE • FOOD • DRINK •";
     white-space:nowrap;
     position:absolute;
     font-size:10vw;
     font-weight:950;
     letter-spacing:-.06em;
     color:transparent;
     -webkit-text-stroke:1px rgba(223,17,27,.045);
     top:42%;
     left:-8%;
     transform:rotate(-7deg)
   }
   .noise {
     position:fixed;
     inset:0;
     pointer-events:none;
     z-index:9998;
     opacity:.035;
     background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E")
   }
   .cursorGlow {
     position:fixed;
     width:320px;
     height:320px;
     border-radius:50%;
     pointer-events:none;
     z-index:-1;
     background:radial-gradient(circle,rgba(223,17,27,.09),transparent 68%);
     transform:translate(-50%,-50%);
     transition:width .2s,height .2s;
     filter:blur(4px)
   }
   /* ANNOUNCEMENT */ .announce {
     height:34px;
     background:var(--black);
     color:#fff;
     display:flex;
     align-items:center;
     overflow:hidden;
     font-size:12px;
     font-weight:800;
     letter-spacing:.12em;
     text-transform:uppercase
   }
   .announce-track {
     display:flex;
     gap:56px;
     min-width:max-content;
     animation:marquee 28s linear infinite
   }
   .announce-track span:before {
     content:"✦";
     color:var(--red2);
     margin-right:16px
   }
   @keyframes marquee {
     to {
       transform:translateX(-50%)
     }
   }
   /* HEADER */ .header {
     position:sticky;
     top:0;
     z-index:1000;
     height:var(--header);
     display:flex;
     align-items:center;
     background:rgba(246,246,247,.82);
     backdrop-filter:blur(20px) saturate(150%);
     border-bottom:1px solid rgba(20,20,24,.07)
   }
   .header-inner {
     width:min(1460px,calc(100% - 40px));
     margin:auto;
     display:grid;
     grid-template-columns:auto 1fr auto;
     align-items:center;
     gap:30px
   }
   .logo {
     width:152px;
     height:58px;
     display:flex;
     align-items:center;
     justify-content:flex-start;
     transition:.35s transform
   }
   .logo:hover {
     transform:rotate(-1deg) scale(1.025)
   }
   .logo picture {
     display:block;
     width:100%;
     height:100%
   }
   .logo img {
     width:100%;
     height:100%;
     object-fit:contain
   }
   .nav {
     display:flex;
     justify-content:center;
     gap:4px
   }
   .nav a {
     position:relative;
     padding:13px 15px;
     border-radius:999px;
     font-size:13px;
     font-weight:800;
     letter-spacing:.035em
   }
   .nav a:hover,.nav a.active {
     background:#fff;
     box-shadow:0 8px 25px rgba(0,0,0,.07)
   }
   .nav a.active:after {
     content:"";
     position:absolute;
     height:3px;
     width:18px;
     border-radius:10px;
     background:var(--red);
     left:50%;
     bottom:5px;
     transform:translateX(-50%)
   }
   .header-actions {
     display:flex;
     align-items:center;
     gap:8px
   }
   .iconBtn {
     position:relative;
     width:45px;
     height:45px;
     border:1px solid #dddfe3;
     background:#fff;
     border-radius:50%;
     display:grid;
     place-items:center;
     cursor:pointer;
     transition:.25s;
     box-shadow:0 6px 22px rgba(0,0,0,.04)
   }
   .iconBtn:hover {
     transform:translateY(-3px);
     border-color:var(--red);
     box-shadow:0 12px 30px rgba(223,17,27,.13)
   }
   .iconBtn svg {
     width:19px;
     height:19px
   }
   .badge {
     position:absolute;
     right:-3px;
     top:-3px;
     min-width:19px;
     height:19px;
     padding:0 5px;
     border-radius:999px;
     background:var(--red);
     color:#fff;
     font-size:10px;
     font-weight:900;
     display:grid;
     place-items:center;
     border:2px solid var(--paper)
   }
   .menuBtn {
     display:none
   }
   /* GLOBAL */ .page {
     animation:pageIn .6s cubic-bezier(.16,1,.3,1)
   }
   @keyframes pageIn {
     from {
       opacity:0;
       transform:translateY(18px) scale(.995)
     }
     to {
       opacity:1;
       transform:none
     }
   }
   .container {
     width:min(1400px,calc(100% - 40px));
     margin-inline:auto
   }
   .section {
     padding:95px 0
   }
   .section-tight {
     padding:64px 0
   }
   .eyebrow {
     display:inline-flex;
     align-items:center;
     gap:10px;
     font-size:12px;
     font-weight:900;
     letter-spacing:.16em;
     text-transform:uppercase;
     color:var(--red)
   }
   .eyebrow:before {
     content:"";
     width:28px;
     height:2px;
     background:var(--red)
   }
   .display {
     font-size:clamp(52px,7.7vw,128px);
     line-height:.82;
     letter-spacing:-.075em;
     margin:18px 0 24px;
     font-weight:950;
     text-transform:uppercase
   }
   .display .stroke {
     color:transparent;
     -webkit-text-stroke:2px var(--red)
   }
   .h2 {
     font-size:clamp(38px,5vw,78px);
     line-height:.92;
     letter-spacing:-.06em;
     margin:12px 0 18px;
     font-weight:950;
     text-transform:uppercase
   }
   .h3 {
     font-size:26px;
     letter-spacing:-.035em;
     margin:0 0 10px;
     font-weight:900
   }
   .lead {
     font-size:clamp(18px,2vw,23px);
     line-height:1.55;
     color:var(--soft);
     max-width:760px
   }
   .muted {
     color:var(--soft)
   }
   .tiny {
     font-size:12px;
     color:var(--soft)
   }
   .btn {
     display:inline-flex;
     align-items:center;
     justify-content:center;
     gap:10px;
     min-height:52px;
     padding:0 22px;
     border:none;
     border-radius:16px;
     font-weight:900;
     cursor:pointer;
     transition:.25s transform,.25s box-shadow,.25s background;
     position:relative;
     overflow:hidden
   }
   .btn:before {
     content:"";
     position:absolute;
     inset:0;
     transform:translateX(-120%) skewX(-20deg);
     background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
     transition:.7s
   }
   .btn:hover:before {
     transform:translateX(120%) skewX(-20deg)
   }
   .btn:hover {
     transform:translateY(-3px)
   }
   .btn-red {
     background:var(--red);
     color:#fff;
     box-shadow:0 14px 34px rgba(223,17,27,.25)
   }
   .btn-red:hover {
     box-shadow:0 20px 42px rgba(223,17,27,.34)
   }
   .btn-dark {
     background:var(--black);
     color:#fff
   }
   .btn-light {
     background:#fff;
     color:var(--ink);
     border:1px solid #e3e4e8
   }
   .btn-ghost {
     background:transparent;
     border:1px solid rgba(255,255,255,.4);
     color:#fff
   }
   .chip {
     display:inline-flex;
     align-items:center;
     gap:7px;
     border:1px solid #dddfe3;
     background:#fff;
     padding:9px 13px;
     border-radius:999px;
     font-weight:800;
     font-size:12px
   }
   .chip.red {
     background:#fff0f1;
     color:var(--red);
     border-color:#ffd5d7
   }
   /* Metadata chips beside the product status tag share its compact shape. */
   .detail-info .chip,
   .quick-info .chip {
     min-height:24px;
     padding:0 10px;
     border-radius:7px;
     font-size:11.5px;
     font-weight:700;
     line-height:1
   }
   .chip.dark {
     background:var(--black);
     color:#fff;
     border-color:var(--black)
   }
   .glass {
     background:rgba(255,255,255,.72);
     border:1px solid rgba(255,255,255,.82);
     backdrop-filter:blur(18px);
     box-shadow:var(--shadow)
   }
   .hr {
     height:1px;
     background:var(--line)
   }
   /* HERO */ .hero {
     min-height:calc(100vh - 116px);
     position:relative;
     display:flex;
     align-items:center;
     padding:62px 0 80px;
     overflow:hidden
   }
   .hero-grid {
     display:grid;
     grid-template-columns:1.12fr .88fr;
     gap:40px;
     align-items:center
   }
   .hero-copy {
     position:relative;
     z-index:3
   }
   .hero-copy .lead {
     max-width:640px
   }
   .hero-actions {
     display:flex;
     gap:12px;
     flex-wrap:wrap;
     margin-top:30px
   }
   .hero-proof {
     display:flex;
     gap:24px;
     flex-wrap:wrap;
     margin-top:38px
   }
   .proof {
     display:flex;
     align-items:center;
     gap:10px;
     font-weight:800;
     font-size:13px
   }
   .proof-dot {
     width:30px;
     height:30px;
     border-radius:50%;
     display:grid;
     place-items:center;
     background:#fff;
     border:1px solid #e1e2e5;
     color:var(--red);
     box-shadow:0 8px 22px rgba(0,0,0,.06)
   }
   .hero-stage {
     height:640px;
     position:relative;
     perspective:1200px
   }
   .hero-orbit {
     position:absolute;
     inset:50% auto auto 50%;
     width:520px;
     height:520px;
     transform:translate(-50%,-50%);
     border:1px solid rgba(223,17,27,.22);
     border-radius:50%;
     animation:spin 32s linear infinite
   }
   .hero-orbit:before,.hero-orbit:after {
     content:"";
     position:absolute;
     border-radius:50%;
     inset:55px;
     border:1px dashed rgba(15,15,18,.16)
   }
   .hero-orbit:after {
     inset:118px;
     border-style:solid;
     border-color:rgba(223,17,27,.12)
   }
   @keyframes spin {
     to {
       transform:translate(-50%,-50%) rotate(360deg)
     }
   }
   .hero-core {
     position:absolute;
     width:305px;
     height:390px;
     left:50%;
     top:50%;
     transform:translate(-50%,-50%) rotate(-4deg);
     border-radius:44px;
     background:linear-gradient(145deg,#e31520,#a90810);
     box-shadow:0 45px 100px rgba(223,17,27,.35);
     overflow:hidden;
     display:flex;
     align-items:center;
     justify-content:center
   }
   .hero-core:before {
     content:"";
     position:absolute;
     inset:-40%;
     background:conic-gradient(from 90deg,transparent,rgba(255,255,255,.22),transparent 28%);
     animation:spin2 8s linear infinite
   }
   @keyframes spin2 {
     to {
       transform:rotate(360deg)
     }
   }
   .hero-core-logo {
     width:68%;
     position:relative;
     z-index:2;
     filter:drop-shadow(0 14px 30px rgba(0,0,0,.25))
   }
   .floatPack {
     position:absolute;
     width:170px;
     height:190px;
     border-radius:30px;
     background:rgba(255,255,255,.9);
     box-shadow:0 25px 70px rgba(0,0,0,.13);
     border:1px solid rgba(255,255,255,.9);
     padding:14px;
     animation:float 5.8s ease-in-out infinite;
     overflow:hidden
   }
   .floatPack img {
     width:100%;
     height:126px;
     object-fit:contain;
     border-radius:20px;
     background:#fff
   }
   .floatPack strong {
     font-size:11px;
     line-height:1.15;
     display:block;
     margin-top:8px;
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis
   }
   .floatPack:nth-child(2) {
     left:0;
     top:8%;
     animation-delay:-1s;
     transform:rotate(-7deg)
   }
   .floatPack:nth-child(3) {
     right:-2%;
     top:14%;
     animation-delay:-3s;
     transform:rotate(7deg)
   }
   .floatPack:nth-child(4) {
     left:5%;
     bottom:5%;
     animation-delay:-2s;
     transform:rotate(5deg)
   }
   .floatPack:nth-child(5) {
     right:2%;
     bottom:0;
     animation-delay:-4s;
     transform:rotate(-5deg)
   }
   @keyframes float {
     50% {
       translate:0 -16px;
       rotate:1.5deg
     }
   }
   .hero-scanner {
     position:absolute;
     left:-15%;
     right:-15%;
     height:2px;
     top:0;
     background:linear-gradient(90deg,transparent,var(--red),transparent);
     box-shadow:0 0 24px var(--red);
     animation:scan 6s ease-in-out infinite;
     opacity:.45
   }
   @keyframes scan {
     0%,100% {
       top:7%
     }
     50% {
       top:94%
     }
   }
   /* STATS */ .stats {
     display:grid;
     grid-template-columns:repeat(4,1fr);
     background:var(--black);
     color:#fff;
     border-radius:30px;
     overflow:hidden;
     box-shadow:0 28px 70px rgba(0,0,0,.18)
   }
   .stat {
     padding:34px;
     border-right:1px solid rgba(255,255,255,.12);
     position:relative;
     overflow:hidden
   }
   .stat:last-child {
     border:0
   }
   .stat:after {
     content:"";
     position:absolute;
     width:120px;
     height:120px;
     border-radius:50%;
     background:var(--red);
     filter:blur(45px);
     opacity:.16;
     right:-50px;
     bottom:-50px
   }
   .stat b {
     font-size:40px;
     letter-spacing:-.05em
   }
   .stat span {
     display:block;
     margin-top:5px;
     color:#b9bbc1;
     font-size:12px;
     font-weight:800;
     text-transform:uppercase;
     letter-spacing:.13em
   }
   /* CATEGORY CARDS */ .section-head {
     display:flex;
     align-items:end;
     justify-content:space-between;
     gap:30px;
     margin-bottom:34px
   }
   .section-head .h2 {
     max-width:800px
   }
   .category-grid {
     display:grid;
     grid-template-columns:repeat(4,1fr);
     gap:16px
   }
   .category-card {
     min-height:250px;
     border-radius:28px;
     background:var(--black);
     color:#fff;
     padding:24px;
     position:relative;
     overflow:hidden;
     cursor:pointer;
     isolation:isolate;
     box-shadow:0 18px 50px rgba(0,0,0,.12);
     transition:.45s cubic-bezier(.16,1,.3,1)
   }
   .category-card:hover {
     transform:translateY(-10px) scale(1.01);
     box-shadow:0 28px 70px rgba(0,0,0,.2)
   }
   .category-card img {
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
     object-fit:cover;
     opacity:.62;
     z-index:-2;
     transition:.7s transform
   }
   .category-card:hover img {
     transform:scale(1.1) rotate(1deg)
   }
   .category-card:after {
     content:"";
     position:absolute;
     inset:0;
     background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.05) 75%);
     z-index:-1
   }
   .category-card .count {
     position:absolute;
     right:18px;
     top:18px;
     border-radius:999px;
     background:rgba(255,255,255,.14);
     backdrop-filter:blur(8px);
     padding:7px 10px;
     font-weight:900;
     font-size:11px
   }
   .category-card h3 {
     position:absolute;
     left:24px;
     bottom:22px;
     font-size:27px;
     letter-spacing:-.045em;
     margin:0;
     max-width:80%
   }
   /* BRAND TICKER */ .brand-zone {
     background:#fff;
     border-block:1px solid var(--line);
     overflow:hidden
   }
   .brand-row {
     display:flex;
     gap:12px;
     width:max-content;
     padding:22px 0;
     animation:brandmove 40s linear infinite
   }
   .brand-pill {
     padding:15px 22px;
     border:1px solid #e2e3e6;
     border-radius:15px;
     background:#fafafa;
     font-weight:950;
     letter-spacing:-.02em;
     white-space:nowrap
   }
   .brand-pill:nth-child(3n) {
     color:var(--red)
   }
   @keyframes brandmove {
     to {
       transform:translateX(-50%)
     }
   }
   /* PRODUCT GRID */ .catalogue-shell {
     display:grid;
     grid-template-columns:280px 1fr;
     gap:26px;
     align-items:start
   }
   .filters {
     position:sticky;
     top:calc(var(--header) + 22px);
     border-radius:26px;
     background:#fff;
     border:1px solid var(--line);
     padding:20px;
     box-shadow:0 15px 50px rgba(0,0,0,.05)
   }
   .filter-group {
     padding:16px 0;
     border-bottom:1px solid var(--line)
   }
   .filter-group:last-child {
     border:0
   }
   .filter-label {
     font-size:11px;
     text-transform:uppercase;
     letter-spacing:.13em;
     font-weight:900;
     margin-bottom:10px;
     color:#727681
   }
   .input,.select,.textarea {
     width:100%;
     border:1px solid #dfe1e5;
     background:#fff;
     border-radius:14px;
     padding:13px 14px;
     outline:none;
     transition:.2s
   }
   .input:focus,.select:focus,.textarea:focus {
     border-color:var(--red);
     box-shadow:0 0 0 4px rgba(223,17,27,.09)
   }
   .textarea {
     min-height:120px;
     resize:vertical
   }
   .range-row {
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:8px
   }
   .checkbox {
     display:flex;
     align-items:center;
     gap:9px;
     font-size:13px;
     font-weight:750;
     margin:9px 0
   }
   .checkbox input {
     accent-color:var(--red);
     width:17px;
     height:17px
   }
   .category-checks {
     max-height:290px;
     overflow:auto;
     padding-right:4px
   }
   .catalogue-toolbar {
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:12px;
     margin-bottom:18px
   }
   .catalogue-toolbar .left {
     display:flex;
     gap:10px;
     align-items:center;
     flex:1
   }
   .catalogue-toolbar .input {
     max-width:520px
   }
   .mobileFilter {
     display:none
   }
   .resultCount {
     font-size:13px;
     color:var(--soft);
     font-weight:750
   }
   .product-grid {
     display:grid;
     grid-template-columns:repeat(4,minmax(0,1fr));
     gap:16px
   }
   .product-card {
     background:#fff;
     border:1px solid var(--line);
     border-radius:24px;
     overflow:hidden;
     position:relative;
     transition:.45s cubic-bezier(.16,1,.3,1);
     transform-style:preserve-3d;
     min-width:0
   }
   .product-card:hover {
     transform:translateY(-8px);
     box-shadow:0 28px 70px rgba(0,0,0,.13);
     border-color:#f2c1c4
   }
   .product-media {
     height:230px;
     background:linear-gradient(145deg,#f9f9fa,#f0f0f2);
     position:relative;
     padding:14px;
     overflow:hidden
   }
   .product-media img {
     width:100%;
     height:100%;
     object-fit:contain;
     mix-blend-mode:multiply;
     transition:.55s transform;
     filter:drop-shadow(0 14px 20px rgba(0,0,0,.12))
   }
   .product-image-burger-box {
     object-position:center center!important;
     display:block;
     margin-left:auto;
     margin-right:auto
   }
   .product-card:hover .product-media img {
     transform:scale(1.07) rotate(-1deg)
   }
   .media-top {
     position:absolute;
     left:12px;
     right:12px;
     top:12px;
     display:flex;
     justify-content:space-between;
     z-index:4
   }
   .tag {
     display:inline-flex;
     align-items:center;
     align-self:center;
     min-height:24px;
     font-size:10.5px;
     font-weight:700;
     line-height:1;
     text-transform:uppercase;
     letter-spacing:.06em;
     white-space:nowrap;
     border-radius:7px;
     padding:0 8px;
     border:1px solid rgba(0,0,0,.08);
     background:#fff;
     box-shadow:0 3px 10px rgba(0,0,0,.07)
   }
   .tag.red {
     background:#fff0f1;
     color:#b50d16;
     border-color:#f1b6ba;
     box-shadow:none
   }
   /* One or two status chips (Halal / HMC, VAT item) share a wrapping group so they never run under the favourite control. */
   .tag-group {
     display:flex;
     flex-wrap:wrap;
     align-items:flex-start;
     gap:5px;
     min-width:0;
     max-width:calc(100% - 44px)
   }
   .detail-info .tag-group,
   .quick-info .tag-group {
     max-width:none
   }
   /* Narrowest cards: tighter chip metrics so "Halal / HMC" fits beside the favourite control. */
   @media (max-width:360px) {
     .media-top {
       left:8px;
       right:8px;
       top:8px
     }
     .tag {
       padding:0 6px;
       font-size:10px;
       letter-spacing:.02em
     }
     .tag-group {
       max-width:calc(100% - 40px)
     }
   }
   .heartBtn {
     width:35px;
     height:35px;
     border:0;
     border-radius:50%;
     background:#fff;
     display:grid;
     place-items:center;
     cursor:pointer;
     box-shadow:0 7px 20px rgba(0,0,0,.1);
     font-size:17px;
     transition:.25s
   }
   .heartBtn:hover,.heartBtn.on {
     background:var(--red);
     color:#fff;
     transform:scale(1.08)
   }
   .product-body {
     padding:17px
   }
   .brand {
     font-size:10px;
     color:var(--red);
     font-weight:950;
     letter-spacing:.12em;
     text-transform:uppercase;
     height:15px;
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis
   }
   .product-name {
     font-size:15px;
     font-weight:900;
     line-height:1.25;
     margin:7px 0 8px;
     height:38px;
     display:-webkit-box;
     -webkit-line-clamp:2;
     -webkit-box-orient:vertical;
     overflow:hidden
   }
   .meta {
     font-size:11px;
     color:var(--soft);
     display:flex;
     gap:6px;
     flex-wrap:wrap;
     min-height:30px
   }
   .price-row {
     display:flex;
     justify-content:space-between;
     align-items:end;
     margin-top:14px;
     gap:8px
   }
   .price-control {
     display:grid;
     gap:6px;
     min-width:0
   }
   .price-options {
     display:flex;
     gap:4px;
     align-items:center
   }
   .price-option {
     border:1px solid #dfe1e5;
     background:#fff;
     color:var(--soft);
     border-radius:999px;
     padding:5px 8px;
     font-size:9px;
     line-height:1;
     font-weight:950;
     cursor:pointer
   }
   .price-option.active,.price-option:hover {
     border-color:var(--red);
     background:var(--red);
     color:#fff
   }
   .price {
     font-size:23px;
     font-weight:950;
     letter-spacing:-.04em;
     white-space:nowrap
   }
   .price small {
     font-size:9px;
     color:var(--soft);
     font-weight:800;
     margin-left:3px;
     letter-spacing:0
   }
   .price-control-detail {
     margin:24px 0 8px
   }
   .price-control-detail .price-options {
     margin-bottom:2px
   }
   .price-control-detail .detail-price {
     margin:0
   }
   .detail-price small {
     font-size:12px;
     color:var(--soft);
     font-weight:800;
     margin-left:5px;
     letter-spacing:0
   }
   .addBtn {
     width:43px;
     height:43px;
     border:none;
     border-radius:14px;
     background:var(--black);
     color:#fff;
     font-size:22px;
     cursor:pointer;
     transition:.25s
   }
   .addBtn:hover {
     background:var(--red);
     transform:rotate(6deg) scale(1.08)
   }
   .quickOverlay {
     position:absolute;
     inset:auto 12px 12px 12px;
     z-index:3;
     opacity:0;
     transform:translateY(8px);
     transition:.3s
   }
   .product-card:hover .quickOverlay {
     opacity:1;
     transform:none
   }
   .quickOverlay button {
     width:100%;
     height:38px;
     border:0;
     border-radius:12px;
     background:rgba(11,12,15,.92);
     color:#fff;
     font-weight:900;
     cursor:pointer;
     backdrop-filter:blur(10px)
   }
   .pagination {
     display:flex;
     justify-content:center;
     align-items:center;
     gap:8px;
     margin-top:32px
   }
   .pageBtn {
     min-width:42px;
     height:42px;
     border:1px solid var(--line);
     background:#fff;
     border-radius:13px;
     font-weight:900;
     cursor:pointer
   }
   .pageBtn.active {
     background:var(--red);
     color:#fff;
     border-color:var(--red)
   }
   /* SHOP HERO: moved to responsive.css (A9.4) */
   .bread {
     display:flex;
     gap:9px;
     font-size:12px;
     color:#c8cad0;
     margin-bottom:18px
   }
   .bread a {
     color:#fff;
     font-weight:800
   }
   /* FEATURE BLOCKS */ .split {
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:24px;
     align-items:stretch
   }
   .impact-card {
     border-radius:34px;
     overflow:hidden;
     position:relative;
     background:var(--black);
     color:#fff;
     min-height:520px;
     padding:42px;
     display:flex;
     flex-direction:column;
     justify-content:flex-end;
     isolation:isolate
   }
   .impact-card img.bg {
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
     object-fit:cover;
     z-index:-3;
     opacity:.55
   }
   .impact-card:after {
     content:"";
     position:absolute;
     inset:0;
     background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.05));
     z-index:-2
   }
   .impact-card.red {
     background:linear-gradient(145deg,var(--red),#920710)
   }
   .impact-card.red:after {
     background:radial-gradient(circle at 70% 10%,rgba(255,255,255,.18),transparent 38%)
   }
   .impact-card .h2 {
     font-size:clamp(44px,5.5vw,84px)
   }
   .bento {
     display:grid;
     grid-template-columns:repeat(12,1fr);
     gap:16px
   }
   .bento .tile {
     border-radius:28px;
     padding:28px;
     background:#fff;
     border:1px solid var(--line);
     min-height:250px;
     position:relative;
     overflow:hidden
   }
   .tile.big {
     grid-column:span 7
   }
   .tile.small {
     grid-column:span 5
   }
   .tile.half {
     grid-column:span 6
   }
   .tile.dark {
     background:var(--black);
     color:#fff
   }
   .tile.red {
     background:var(--red);
     color:#fff
   }
   .tile-number {
     font-size:68px;
     font-weight:950;
     letter-spacing:-.07em;
     line-height:1
   }
   .tile-label {
     font-size:12px;
     text-transform:uppercase;
     letter-spacing:.12em;
     font-weight:850;
     color:inherit;
     opacity:.7
   }
   .tile p {
     line-height:1.6;
     color:inherit;
     opacity:.75;
     max-width:520px
   }
   .tile-orb {
     position:absolute;
     width:240px;
     height:240px;
     border-radius:50%;
     border:1px solid currentColor;
     opacity:.12;
     right:-70px;
     top:-70px;
     box-shadow:0 0 0 45px currentColor,0 0 0 90px currentColor
   }
   /* FORMS */ .form-card {
     border-radius:30px;
     background:#fff;
     border:1px solid var(--line);
     box-shadow:var(--shadow);
     padding:28px
   }
   .form-grid {
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:14px
   }
   .form-grid .full {
     grid-column:1/-1
   }
   .form-card label {
     display:block;
     font-size:11px;
     text-transform:uppercase;
     letter-spacing:.1em;
     font-weight:900;
     margin-bottom:7px;
     color:#6c7078
   }
   .form-note {
     background:#fff3f3;
     color:#831018;
     border:1px solid #ffd5d8;
     padding:13px 14px;
     border-radius:14px;
     font-size:12px;
     line-height:1.5;
     margin:14px 0
   }
   .contact-grid {
     display:grid;
     grid-template-columns:.85fr 1.15fr;
     gap:24px
   }
   .info-stack {
     display:grid;
     gap:12px
   }
   .info-card {
     padding:22px;
     border-radius:22px;
     background:#fff;
     border:1px solid var(--line)
   }
   .info-card b {
     display:block;
     font-size:18px;
     margin-bottom:5px
   }
   .hours {
     display:grid;
     grid-template-columns:1fr auto;
     gap:8px 20px;
     margin-top:15px;
     font-size:14px
   }
   /* PRODUCT DETAIL */ .product-detail {
     display:grid;
     grid-template-columns:1.02fr .98fr;
     gap:50px;
     align-items:start
   }
   .detail-media {
     min-height:620px;
     background:#fff;
     border-radius:34px;
     border:1px solid var(--line);
     display:flex;
     align-items:center;
     justify-content:center;
     padding:50px;
     position:sticky;
     top:calc(var(--header) + 22px);
     overflow:hidden
   }
   .detail-media:before {
     content:"";
     position:absolute;
     width:500px;
     height:500px;
     border-radius:50%;
     background:radial-gradient(circle,rgba(223,17,27,.12),transparent 65%)
   }
   .detail-media img {
     width:90%;
     height:520px;
     object-fit:contain;
     mix-blend-mode:multiply;
     position:relative;
     filter:drop-shadow(0 30px 30px rgba(0,0,0,.12))
   }
   .detail-info {
     padding:16px 0
   }
   .detail-title {
     font-size:clamp(42px,5vw,72px);
     line-height:.94;
     letter-spacing:-.06em;
     margin:15px 0;
     font-weight:950
   }
   .detail-price {
     font-size:46px;
     font-weight:950;
     letter-spacing:-.05em;
     margin:24px 0 8px
   }
   .detail-meta {
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:10px;
     margin:24px 0
   }
   .meta-box {
     padding:14px;
     border:1px solid var(--line);
     border-radius:16px;
     background:#fff
   }
   .meta-box small {
     display:block;
     font-size:9px;
     text-transform:uppercase;
     letter-spacing:.12em;
     color:#7a7e86;
     font-weight:900
   }
   .meta-box strong {
     font-size:13px;
     display:block;
     margin-top:4px;
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis
   }
   .qty {
     display:flex;
     align-items:center;
     border:1px solid var(--line);
     border-radius:15px;
     background:#fff;
     width:max-content;
     overflow:hidden
   }
   .qty button {
     width:42px;
     height:46px;
     border:0;
     background:transparent;
     font-size:20px;
     cursor:pointer
   }
   .qty span {
     width:46px;
     text-align:center;
     font-weight:900
   }
   .buy-row {
     display:flex;
     gap:10px;
     align-items:center;
     margin-top:20px
   }
   .buy-row .btn {
     min-height:48px
   }
   .variant-list {
     display:flex;
     flex-wrap:wrap;
     gap:8px;
     margin:14px 0 24px
   }
   .variant {
     border:1px solid var(--line);
     background:#fff;
     border-radius:12px;
     padding:10px 12px;
     font-size:12px;
     font-weight:850;
     cursor:pointer
   }
   .variant:hover {
     border-color:var(--red);
     color:var(--red)
   }
   /* CART */ .cart-layout {
     display:grid;
     grid-template-columns:1fr 360px;
     gap:25px;
     align-items:start
   }
   .cart-list {
     display:grid;
     gap:12px
   }
   .cart-item {
     display:grid;
     grid-template-columns:110px 1fr auto;
     gap:16px;
     padding:14px;
     background:#fff;
     border:1px solid var(--line);
     border-radius:22px;
     align-items:center
   }
   .cart-item img {
     width:110px;
     height:100px;
     object-fit:contain;
     background:#f4f4f5;
     border-radius:16px
   }
   .cart-item h4 {
     margin:0 0 7px;
     font-size:16px
   }
   .cart-item .price {
     font-size:18px
   }
   .summary {
     position:sticky;
     top:calc(var(--header) + 22px);
     padding:24px;
     border-radius:24px;
     background:var(--black);
     color:#fff
   }
   .summary-line {
     display:flex;
     justify-content:space-between;
     gap:18px;
     padding:10px 0;
     border-bottom:1px solid rgba(255,255,255,.12)
   }
   .summary-line.total {
     font-size:22px;
     font-weight:950;
     border:0;
     padding-top:18px
   }
   .empty {
     padding:70px 24px;
     text-align:center;
     border:1px dashed #ccd0d5;
     border-radius:26px;
     background:#fff
   }
   .empty .bigIcon {
     font-size:60px;
     margin-bottom:10px
   }
   /* BRANDS */ .brand-grid {
     display:grid;
     grid-template-columns:repeat(5,1fr);
     gap:12px
   }
   .brand-card {
     min-height:84px;
     padding:16px 15px;
     display:flex;
     align-items:center;
     gap:12px;
     position:relative;
     overflow:hidden;
     background:linear-gradient(145deg,#fff,#f8f8f9);
     border:1px solid var(--line);
     border-radius:20px;
     text-align:left;
     cursor:pointer;
     transition:.3s
   }
   .brand-card:after {
     content:"";
     position:absolute;
     right:-24px;
     bottom:-34px;
     width:90px;
     height:90px;
     border:1px solid rgba(223,17,27,.1);
     border-radius:50%;
     box-shadow:0 0 0 16px rgba(223,17,27,.025),0 0 0 32px rgba(223,17,27,.018);
     pointer-events:none
   }
   .brand-card:hover {
     transform:translateY(-6px);
     border-color:#f3bdc1;
     box-shadow:0 16px 40px rgba(223,17,27,.09)
   }
   .brand-card-mark {
     width:44px;
     height:44px;
     flex:0 0 44px;
     display:grid;
     place-items:center;
     position:relative;
     overflow:hidden;
     border-radius:14px;
     color:#fff;
     font-size:13px;
     font-weight:950;
     letter-spacing:-.04em;
     box-shadow:0 9px 22px rgba(13,14,18,.14)
   }
   .brand-card-mark:after {
     content:"";
     position:absolute;
     width:25px;
     height:25px;
     right:-8px;
     top:-9px;
     border:1px solid rgba(255,255,255,.45);
     border-radius:50%;
     box-shadow:0 0 0 7px rgba(255,255,255,.08)
   }
   .brand-card-mark.tone-a {
     background:linear-gradient(145deg,#17181d,#555862)
   }
   .brand-card-mark.tone-b {
     background:linear-gradient(145deg,#df111b,#ff5d66)
   }
   .brand-card-mark.tone-c {
     background:linear-gradient(145deg,#102b52,#2d75b6)
   }
   .brand-card-mark.tone-d {
     background:linear-gradient(145deg,#b46b0c,#f0b83d)
   }
   .brand-card-mark.tone-e {
     background:linear-gradient(145deg,#075b4f,#28a47f)
   }
   .brand-card-copy {
     min-width:0;
     position:relative;
     z-index:1
   }
   .brand-card b {
     display:block;
     font-size:15px;
     line-height:1.12;
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis
   }
   .brand-card small {
     display:block;
     color:var(--soft);
     margin-top:5px;
     font-size:10px;
     font-weight:800
   }
   .brand-card-arrow {
     margin-left:auto;
     position:relative;
     z-index:1;
     color:var(--red);
     font-size:16px;
     font-weight:950;
     opacity:.55;
     transition:.25s
   }
   .brand-card:hover .brand-card-arrow {
     opacity:1;
     transform:translate(2px,-2px)
   }
   /* SEARCH */ .overlay {
     position:fixed;
     inset:0;
     z-index:3000;
     background:rgba(10,11,14,.72);
     backdrop-filter:blur(16px);
     opacity:0;
     pointer-events:none;
     transition:.3s
   }
   .overlay.open {
     opacity:1;
     pointer-events:auto
   }
   .searchPanel {
     position:absolute;
     left:50%;
     top:70px;
     transform:translateX(-50%) translateY(-15px);
     width:min(900px,calc(100% - 28px));
     max-height:calc(100vh - 120px);
     overflow:auto;
     background:#fff;
     border-radius:30px;
     padding:24px;
     box-shadow:0 40px 100px rgba(0,0,0,.3);
     transition:.35s
   }
   .overlay.open .searchPanel {
     transform:translateX(-50%) translateY(0)
   }
   .searchBig {
     font-size:26px;
     font-weight:900;
     border:0;
     border-bottom:2px solid var(--ink);
     border-radius:0;
     padding:16px 5px;
     width:100%;
     outline:0
   }
   .search-results {
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:8px;
     margin-top:16px
   }
   .search-hit {
     display:grid;
     grid-template-columns:66px 1fr auto;
     gap:10px;
     align-items:center;
     padding:9px;
     border:1px solid var(--line);
     border-radius:14px;
     cursor:pointer
   }
   .search-hit:hover {
     border-color:var(--red);
     background:#fff8f8
   }
   .search-hit img {
     width:66px;
     height:60px;
     object-fit:contain
   }
   .search-hit b {
     font-size:12px
   }
   .search-hit span {
     font-weight:950;
     color:var(--red)
   }
   /* MODAL + DRAWER */ .modalWrap {
     position:fixed;
     inset:0;
     z-index:3100;
     background:rgba(10,11,14,.74);
     backdrop-filter:blur(14px);
     display:none;
     align-items:center;
     justify-content:center;
     padding:20px
   }
   .modalWrap.open {
     display:flex
   }
   .modal {
     width:min(900px,100%);
     max-height:92vh;
     overflow:auto;
     background:#fff;
     border-radius:30px;
     box-shadow:0 40px 100px rgba(0,0,0,.33);
     position:relative
   }
   .modalClose {
     position:absolute;
     right:14px;
     top:14px;
     z-index:5;
     width:42px;
     height:42px;
     border-radius:50%;
     border:0;
     background:#111;
     color:#fff;
     font-size:20px;
     cursor:pointer
   }
   .quick-grid {
     display:grid;
     grid-template-columns:1fr 1fr
   }
   .quick-img {
     min-height:460px;
     background:#f5f5f6;
     display:grid;
     place-items:center;
     padding:35px
   }
   .quick-img img {
     width:100%;
     height:390px;
     object-fit:contain;
     mix-blend-mode:multiply
   }
   .quick-info {
     padding:45px 32px
   }
   .quick-info h2 {
     font-size:38px;
     letter-spacing:-.05em;
     margin:10px 0
   }
   .quick-info .price-control {
     margin-top:22px
   }
   .quick-info .price {
     font-size:35px
   }
   .drawerShade {
     position:fixed;
     inset:0;
     z-index:2790;
     background:rgba(0,0,0,.45);
     opacity:0;
     pointer-events:none;
     transition:.3s
   }
   .drawerShade.open {
     opacity:1;
     pointer-events:auto
   }
   .drawer {
     position:fixed;
     right:0;
     top:0;
     bottom:0;
     width:min(470px,100%);
     z-index:2800;
     background:#fff;
     box-shadow:-30px 0 80px rgba(0,0,0,.2);
     transform:translateX(110%);
     transition:.45s cubic-bezier(.16,1,.3,1);
     display:flex;
     flex-direction:column
   }
   .drawer.open {
     transform:none
   }
   .drawerHead {
     padding:22px;
     border-bottom:1px solid var(--line);
     display:flex;
     justify-content:space-between;
     align-items:center
   }
   .drawerHead h3 {
     margin:0;
     font-size:24px
   }
   .drawerBody {
     padding:16px;
     overflow:auto;
     flex:1
   }
   .drawerFoot {
     padding:18px;
     border-top:1px solid var(--line)
   }
   .miniCart {
     display:grid;
     grid-template-columns:70px 1fr auto;
     gap:9px;
     align-items:center;
     padding:10px 0;
     border-bottom:1px solid var(--line)
   }
   .miniCart img {
     width:70px;
     height:65px;
     object-fit:contain;
     background:#f4f4f5;
     border-radius:12px
   }
   .miniCart b {
     font-size:12px;
     line-height:1.2
   }
   .miniCart .x {
     border:0;
     background:none;
     font-size:18px;
     cursor:pointer
   }
   /* MOBILE NAV: moved to responsive.css (A9.4) */
   /* TOAST */ .toasts {
     position:fixed;
     right:18px;
     bottom:18px;
     z-index:5000;
     display:grid;
     gap:9px
   }
   .toast {
     min-width:260px;
     max-width:380px;
     background:var(--black);
     color:#fff;
     padding:14px 16px;
     border-radius:15px;
     box-shadow:0 18px 50px rgba(0,0,0,.25);
     font-size:13px;
     font-weight:750;
     animation:toastIn .35s cubic-bezier(.16,1,.3,1)
   }
   .toast b {
     color:#ff6e75
   }
   @keyframes toastIn {
     from {
       opacity:0;
       transform:translateY(12px) scale(.96)
     }
   }
   /* MYZ PULSE */ .pulse-grid {
     display:grid;
     grid-template-columns:1.2fr .8fr .8fr;
     grid-auto-rows:240px;
     gap:14px
   }
   .pulse-card {
     position:relative;
     border-radius:28px;
     overflow:hidden;
     background:#111;
     color:#fff;
     isolation:isolate;
     padding:24px;
     display:flex;
     flex-direction:column;
     justify-content:flex-end
   }
   .pulse-card:first-child {
     grid-row:span 2
   }
   .pulse-card img {
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
     object-fit:cover;
     z-index:-3;
     opacity:.66;
     transition:transform .8s
   }
   .pulse-card:hover img {
     transform:scale(1.1)
   }
   .pulse-card:after {
     content:"";
     position:absolute;
     inset:0;
     background:linear-gradient(to top,rgba(0,0,0,.92),transparent 70%);
     z-index:-2
   }
   .pulse-card .pulse-kicker {
     font-size:10px;
     font-weight:950;
     letter-spacing:.13em;
     text-transform:uppercase;
     color:#ff7a82
   }
   .pulse-card h3 {
     font-size:25px;
     line-height:1;
     letter-spacing:-.04em;
     margin:7px 0 0
   }
   .pulse-live {
     position:absolute;
     right:16px;
     top:16px;
     width:11px;
     height:11px;
     border-radius:50%;
     background:#ff2733;
     box-shadow:0 0 0 0 rgba(255,39,51,.6);
     animation:pulseLive 2s infinite
   }
   @keyframes pulseLive {
     70% {
       box-shadow:0 0 0 14px rgba(255,39,51,0)
     }
   }
   @media(max-width:900px) {
     .pulse-grid {
       grid-template-columns:1fr 1fr
     }
     .pulse-card:first-child {
       grid-column:1/-1;
       grid-row:auto
     }
   }
   @media(max-width:620px) {
     .pulse-grid {
       grid-template-columns:1fr;
       grid-auto-rows:210px
     }
     .pulse-card:first-child {
       grid-column:auto
     }
   }
   /* FOOTER */ .footer {
     background:var(--black);
     color:#fff;
     padding:72px 0 25px;
     margin-top:90px;
     position:relative;
     overflow:hidden
   }
   .footer:before {
     content:"MYZ";
     position:absolute;
     right:-.03em;
     bottom:-.2em;
     font-size:27vw;
     font-weight:950;
     letter-spacing:-.09em;
     color:#fff;
     opacity:.025;
     line-height:1
   }
   .footer-grid {
     display:grid;
     grid-template-columns:1.3fr repeat(3,1fr);
     gap:40px;
     position:relative
   }
   .footer-logo {
     width:170px;
     height:auto;
     margin-bottom:20px
   }
   .footer p {
     color:#aaaeb6;
     line-height:1.7;
     max-width:420px
   }
   .footer h4 {
     font-size:12px;
     text-transform:uppercase;
     letter-spacing:.13em;
     color:#8b8e95
   }
   .footer a {
     display:block;
     color:#d9dbe0;
     padding:5px 0;
     font-size:14px
   }
   .footer a:hover {
     color:#fff
   }
   .footer-bottom {
     margin-top:50px;
     padding-top:22px;
     border-top:1px solid rgba(255,255,255,.11);
     display:flex;
     justify-content:space-between;
     gap:20px;
     color:#84878e;
     font-size:11px
   }
   /* REVEAL */ .reveal {
     opacity:0;
     transform:translateY(34px);
     transition:1s cubic-bezier(.16,1,.3,1)
   }
   .reveal.visible {
     opacity:1;
     transform:none
   }
   .stagger>* {
     opacity:0;
     transform:translateY(18px)
   }
   .stagger.visible>* {
     animation:staggerIn .65s cubic-bezier(.16,1,.3,1) forwards
   }
   .stagger.visible>*:nth-child(2) {
     animation-delay:.06s
   }
   .stagger.visible>*:nth-child(3) {
     animation-delay:.12s
   }
   .stagger.visible>*:nth-child(4) {
     animation-delay:.18s
   }
   .stagger.visible>*:nth-child(5) {
     animation-delay:.24s
   }
   .stagger.visible>*:nth-child(6) {
     animation-delay:.3s
   }
   @keyframes staggerIn {
     to {
       opacity:1;
       transform:none
     }
   }
   /* RESPONSIVE */ @media(max-width:1180px) {
     .nav {
       display:none
     }
     .menuBtn {
       display:grid
     }
     .hero-grid {
       grid-template-columns:1fr
     }
     .hero-stage {
       height:540px
     }
     .hero-copy {
       text-align:center
     }
     .hero-copy .lead {
       margin:auto
     }
     .hero-actions,.hero-proof {
       justify-content:center
     }
     .product-grid {
       grid-template-columns:repeat(3,1fr)
     }
     .category-grid {
       grid-template-columns:repeat(2,1fr)
     }
     .footer-grid {
       grid-template-columns:1.3fr 1fr 1fr
     }
     .footer-grid>div:last-child {
       grid-column:2/4
     }
     .brand-grid {
       grid-template-columns:repeat(4,1fr)
     }
   }
   @media(max-width:900px) {
     :root {
       --header:70px
     }
     .header-inner {
       width:min(100% - 24px,1400px)
     }
     .logo {
       width:126px;
       height:49px
     }
     .announce {
       height:30px
     }
     .hero {
       min-height:auto;
       padding-top:55px
     }
     .display {
       font-size:clamp(52px,15vw,90px)
     }
     .hero-stage {
       height:470px
     }
     .hero-orbit {
       width:400px;
       height:400px
     }
     .hero-core {
       width:240px;
       height:310px
     }
     .floatPack {
       width:140px;
       height:158px
     }
     .floatPack img {
       height:100px
     }
     .stats {
       grid-template-columns:1fr 1fr
     }
     .stat:nth-child(2) {
       border-right:0
     }
     .stat:nth-child(-n+2) {
       border-bottom:1px solid rgba(255,255,255,.12)
     }
     .catalogue-shell {
       grid-template-columns:1fr
     }
     .filters {
       display:none;
       position:static
     }
     .filters.mobile-open {
       display:block
     }
     .mobileFilter {
       display:inline-flex
     }
     .product-grid {
       grid-template-columns:repeat(2,1fr)
     }
     .split,.product-detail,.contact-grid,.cart-layout {
       grid-template-columns:1fr
     }
     .detail-media {
       position:relative;
       top:0;
       min-height:470px
     }
     .detail-media img {
       height:400px
     }
     .summary {
       position:static
     }
     .bento .tile {
       grid-column:1/-1
     }
     .footer-grid {
       grid-template-columns:1fr 1fr
     }
     .footer-grid>div:first-child {
       grid-column:1/-1
     }
     .footer-grid>div:last-child {
       grid-column:auto
     }
     .brand-grid {
       grid-template-columns:repeat(3,1fr)
     }
     .quick-grid {
       grid-template-columns:1fr
     }
     .quick-img {
       min-height:360px
     }
     .quick-img img {
       height:300px
     }
   }
   @media(max-width:620px) {
     .container {
       width:min(100% - 24px,1400px)
     }
     .section {
       padding:70px 0
     }
     .section-tight {
       padding:46px 0
     }
     .header-actions .accountBtn {
       display:none
     }
     .hero-stage {
       height:390px
     }
     .hero-orbit {
       width:320px;
       height:320px
     }
     .hero-core {
       width:190px;
       height:255px;
       border-radius:30px
     }
     .floatPack {
       width:108px;
       height:126px;
       border-radius:18px;
       padding:8px
     }
     .floatPack img {
       height:78px;
       border-radius:12px
     }
     .floatPack strong {
       display:none
     }
     .stats {
       border-radius:22px
     }
     .stat {
       padding:23px
     }
     .stat b {
       font-size:31px
     }
     .category-grid {
       grid-template-columns:1fr 1fr;
       gap:10px
     }
     .category-card {
       min-height:190px;
       border-radius:21px;
       padding:16px
     }
     .category-card h3 {
       font-size:19px;
       left:16px;
       bottom:15px
     }
     .category-card .count {
       right:10px;
       top:10px
     }
     .section-head {
       align-items:start;
       flex-direction:column
     }
     .catalogue-toolbar {
       align-items:stretch;
       flex-direction:column
     }
     .catalogue-toolbar .left {
       width:100%
     }
     .catalogue-toolbar .input {
       max-width:none
     }
     .product-grid {
       gap:10px
     }
     .product-card {
       border-radius:18px
     }
     .product-media {
       height:175px;
       padding:9px
     }
     .product-body {
       padding:12px
     }
     .product-name {
       font-size:13px;
       height:34px
     }
     .price {
       font-size:19px
     }
     .addBtn {
       width:38px;
       height:38px
     }
     .quickOverlay {
       display:none
     }
     .detail-title {
       font-size:42px
     }
     .detail-media {
       min-height:380px;
       padding:24px
     }
     .detail-media img {
       height:310px
     }
     .detail-meta {
       grid-template-columns:1fr
     }
     .buy-row {
       align-items:stretch;
       flex-direction:column
     }
     .buy-row .qty {
       width:100%;
       justify-content:center
     }
     .buy-row .btn {
       width:100%
     }
     .cart-item {
       grid-template-columns:82px 1fr
     }
     .cart-item>div:last-child {
       grid-column:2
     }
     .cart-item img {
       width:82px;
       height:80px
     }
     .brand-grid {
       grid-template-columns:1fr 1fr
     }
     .form-grid {
       grid-template-columns:1fr
     }
     .form-grid .full {
       grid-column:auto
     }
     .search-results {
       grid-template-columns:1fr
     }
     .footer-grid {
       grid-template-columns:1fr
     }
     .footer-grid>div,.footer-grid>div:last-child {
       grid-column:auto
     }
     .footer-bottom {
       flex-direction:column
     }
     .impact-card {
       min-height:430px;
       padding:26px
     }
     .toasts {
       left:12px;
       right:12px
     }
     .toast {
       min-width:0;
       max-width:none
     }
     .cursorGlow {
       display:none
     }
   }
   @media(prefers-reduced-motion:reduce) {
     *,*:before,*:after {
       animation-duration:.001ms!important;
       animation-iteration-count:1!important;
       scroll-behavior:auto!important;
       transition-duration:.001ms!important
     }
     .reveal,.stagger>* {
       opacity:1!important;
       transform:none!important
     }
   }
   @media(max-width:620px) {
     .announce-track {
       width:max-content;
       min-width:max-content;
       animation:marquee 28s linear infinite!important;
       animation-duration:28s!important;
       animation-iteration-count:infinite!important;
       animation-play-state:running!important;
       will-change:transform
     }
   }
   @media(max-width:620px) {
     .header {
       background:#fff;
       backdrop-filter:none;
       -webkit-backdrop-filter:none;
       isolation:isolate
     }
   }
   /* =========================================================
      MYZ HOMEPAGE V2 — HIGH-ENERGY FRONT EXPERIENCE
      ========================================================= */ .home-x {
     position:relative;
     isolation:isolate;
     overflow:hidden
   }
   .home-x-hero {
     position:relative;
     min-height:calc(100vh - 116px);
     padding:48px 0 62px;
     overflow:hidden;
     background: radial-gradient(900px 560px at var(--hx,78%) var(--hy,20%),rgba(255,36,48,.18),transparent 58%), linear-gradient(135deg,#fafafb 0%,#f7f7f8 50%,#eceef1 100%)
   }
   .home-x-hero:before {
     content:"";
     position:absolute;
     inset:0;
     pointer-events:none;
     opacity:.58;
     background-image: linear-gradient(rgba(14,15,18,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(14,15,18,.04) 1px,transparent 1px);
     background-size:54px 54px;
     mask-image:radial-gradient(circle at 70% 30%,#000 12%,transparent 73%)
   }
   .home-x-hero:after {
     content:"WHOLESALE";
     position:absolute;
     right:-3vw;
     bottom:-4vw;
     font-size:clamp(90px,18vw,300px);
     font-weight:950;
     letter-spacing:-.09em;
     line-height:.72;
     color:transparent;
     -webkit-text-stroke:1px rgba(223,17,27,.08);
     transform:rotate(-4deg);
     pointer-events:none;
     z-index:-1
   }
   .hx-signalbar {
     display:flex;
     gap:10px;
     align-items:center;
     flex-wrap:wrap;
     margin-bottom:28px
   }
   .hx-signal {
     display:inline-flex;
     align-items:center;
     gap:9px;
     border-radius:999px;
     padding:9px 13px;
     background:rgba(255,255,255,.76);
     border:1px solid rgba(15,15,18,.08);
     backdrop-filter:blur(16px);
     font-size:11px;
     font-weight:900;
     letter-spacing:.08em;
     text-transform:uppercase;
     box-shadow:0 10px 30px rgba(0,0,0,.045)
   }
   .hx-live {
     width:8px;
     height:8px;
     border-radius:50%;
     background:var(--red);
     box-shadow:0 0 0 0 rgba(223,17,27,.45);
     animation:hxPulse 1.8s infinite
   }
   @keyframes hxPulse {
     60% {
       box-shadow:0 0 0 10px rgba(223,17,27,0)
     }
   }
   .hx-grid {
     display:grid;
     grid-template-columns:minmax(0,1.12fr) minmax(440px,.88fr);
     gap:50px;
     align-items:center;
     position:relative;
     z-index:3
   }
   .hx-copy {
     padding:18px 0
   }
   .hx-kicker {
     display:flex;
     align-items:center;
     gap:12px;
     font-size:12px;
     font-weight:950;
     text-transform:uppercase;
     letter-spacing:.18em;
     color:var(--red)
   }
   .hx-kicker:before {
     content:"";
     width:42px;
     height:3px;
     border-radius:9px;
     background:linear-gradient(90deg,var(--red),#ff8a91)
   }
   .hx-price-match {
     display:inline-flex;
     align-items:center;
     gap:10px;
     margin:14px 0 4px;
     padding:10px 14px;
     border:1px solid rgba(223,17,27,.24);
     border-radius:999px;
     background:rgba(255,255,255,.78);
     box-shadow:0 10px 28px rgba(223,17,27,.08);
     backdrop-filter:blur(14px)
   }
   .hx-price-match>span {
     width:28px;
     height:28px;
     border-radius:50%;
     display:grid;
     place-items:center;
     background:var(--red);
     color:#fff;
     font-size:16px;
     font-weight:950
   }
   .hx-price-match b {
     font-size:13px;
     letter-spacing:.04em;
     color:var(--ink)
   }
   .hx-price-match small {
     font-size:11px;
     color:var(--soft);
     font-weight:700
   }
   .hx-title {
     font-size:clamp(62px,8.3vw,142px);
     line-height:.78;
     letter-spacing:-.085em;
     margin:18px 0 26px;
     text-transform:uppercase;
     font-weight:950;
     max-width:900px
   }
   .hx-title .red {
     color:var(--red);
     position:relative;
     display:inline-block
   }
   .hx-title .red:after {
     content:"";
     position:absolute;
     height:.09em;
     border-radius:999px;
     background:var(--red);
     left:.02em;
     right:.02em;
     bottom:-.06em;
     transform-origin:left;
     animation:hxUnderline 1.1s cubic-bezier(.16,1,.3,1) .4s both
   }
   @keyframes hxUnderline {
     from {
       transform:scaleX(0)
     }
     to {
       transform:scaleX(1)
     }
   }
   .hx-outline {
     color:transparent;
     -webkit-text-stroke:2px #17181d
   }
   .hx-copy .lead {
     max-width:720px;
     margin-bottom:28px
   }
   .hx-copy strong.em {
     color:var(--ink)
   }
   .hx-search {
     position:relative;
     max-width:760px;
     margin:28px 0 18px
   }
   .hx-searchbox {
     display:grid;
     grid-template-columns:52px 1fr auto;
     align-items:center;
     background:#fff;
     border:1px solid rgba(13,14,18,.1);
     border-radius:22px;
     padding:7px;
     box-shadow:0 20px 60px rgba(18,18,23,.11);
     transition:.3s
   }
   .hx-searchbox:focus-within {
     transform:translateY(-3px);
     box-shadow:0 26px 80px rgba(223,17,27,.17);
     border-color:rgba(223,17,27,.35)
   }
   .hx-searchbox svg {
     width:21px;
     margin:auto
   }
   .hx-searchbox input {
     border:0;
     outline:0;
     background:transparent;
     min-width:0;
     height:54px;
     font-size:16px;
     font-weight:700;
     color:var(--ink)
   }
   .hx-searchbox .btn {
     min-height:52px;
     border-radius:16px
   }
   .hx-suggestions {
     position:absolute;
     left:0;
     right:0;
     top:calc(100% + 8px);
     z-index:40;
     background:#fff;
     border:1px solid var(--line);
     border-radius:20px;
     box-shadow:0 28px 70px rgba(0,0,0,.16);
     padding:8px;
     display:none;
     max-height:360px;
     overflow:auto
   }
   .hx-suggestions.open {
     display:block;
     animation:pageIn .25s ease
   }
   .hx-suggest {
     display:grid;
     grid-template-columns:52px 1fr auto;
     gap:12px;
     align-items:center;
     padding:9px;
     border-radius:14px
   }
   .hx-suggest:hover {
     background:#f5f5f6
   }
   .hx-suggest img {
     width:52px;
     height:52px;
     object-fit:contain;
     border-radius:10px;
     background:#fff
   }
   .hx-suggest b {
     font-size:13px;
     display:block
   }
   .hx-suggest small {
     color:var(--soft)
   }
   .hx-suggest .p {
     font-weight:950;
     color:var(--red)
   }
   .hx-quickchips {
     display:flex;
     gap:8px;
     flex-wrap:wrap;
     margin-top:13px
   }
   .hx-quickchips button {
     border:1px solid #dedfe3;
     background:rgba(255,255,255,.7);
     border-radius:999px;
     padding:8px 12px;
     font-size:11px;
     font-weight:850;
     cursor:pointer;
     transition:.2s
   }
   .hx-quickchips button:hover {
     background:var(--black);
     color:#fff;
     border-color:var(--black);
     transform:translateY(-2px)
   }
   .hx-actions {
     display:flex;
     gap:11px;
     flex-wrap:wrap;
     margin-top:26px
   }
   .hx-trust {
     display:flex;
     gap:20px;
     align-items:center;
     flex-wrap:wrap;
     margin-top:28px;
     padding-top:25px;
     border-top:1px solid rgba(16,17,20,.08)
   }
   .hx-trust-item {
     display:flex;
     gap:10px;
     align-items:center
   }
   .hx-trust-icon {
     width:34px;
     height:34px;
     border-radius:12px;
     background:#fff;
     display:grid;
     place-items:center;
     color:var(--red);
     box-shadow:0 8px 25px rgba(0,0,0,.06);
     font-weight:950
   }
   .hx-trust-item b {
     display:block;
     font-size:12px
   }
   .hx-trust-item small {
     color:var(--soft);
     font-size:11px
   }
   .hx-stage {
     min-height:650px;
     position:relative;
     perspective:1300px
   }
   .hx-ring,.hx-ring2 {
     position:absolute;
     border-radius:50%;
     border:1px solid rgba(223,17,27,.23);
     left:50%;
     top:48%;
     transform:translate(-50%,-50%);
     width:520px;
     height:520px;
     animation:hxSpin 30s linear infinite
   }
   .hx-ring:before,.hx-ring:after {
     content:"";
     position:absolute;
     inset:56px;
     border:1px dashed rgba(16,17,20,.16);
     border-radius:50%
   }
   .hx-ring:after {
     inset:116px;
     border-style:solid;
     border-color:rgba(223,17,27,.12)
   }
   .hx-ring2 {
     width:410px;
     height:410px;
     border-style:dashed;
     animation-duration:20s;
     animation-direction:reverse
   }
   @keyframes hxSpin {
     to {
       transform:translate(-50%,-50%) rotate(360deg)
     }
   }
   .hx-core {
     position:absolute;
     left:50%;
     top:48%;
     width:300px;
     height:410px;
     transform:translate(-50%,-50%) rotate(0deg);
     border-radius:45px;
     background:linear-gradient(145deg,#eb1722 0%,#c50711 54%,#76050b 100%);
     box-shadow:0 52px 120px rgba(223,17,27,.36);
     overflow:hidden;
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     color:#fff;
     z-index:2
   }
   .hx-core:before {
     content:"";
     position:absolute;
     inset:-60%;
     background:conic-gradient(from 180deg,transparent,rgba(255,255,255,.28),transparent 26%);
     animation:hxCoreSpin 9s linear infinite
   }
   .hx-core:after {
     content:"";
     position:absolute;
     inset:10px;
     border:1px solid rgba(255,255,255,.24);
     border-radius:37px
   }
   .hx-core picture {
     display:block;
     width:68%;
     position:relative;
     z-index:2
   }
   .hx-core img {
     display:block;
     width:100%;
     height:auto;
     position:relative;
     z-index:2;
     filter:drop-shadow(0 15px 28px rgba(0,0,0,.24))
   }
   .hx-core-meta {
     position:relative;
     z-index:3;
     text-align:center;
     margin-top:28px
   }
   .hx-core-meta .kicker {
     display:block;
     font-size:10px;
     line-height:1.1;
     letter-spacing:.13em;
     text-transform:uppercase;
     font-weight:950;
     opacity:.82;
     margin-bottom:8px
   }
   .hx-core-meta strong {
     font-size:42px;
     line-height:1;
     letter-spacing:-.06em
   }
   .hx-core-meta small {
     display:block;
     text-transform:uppercase;
     letter-spacing:.14em;
     font-weight:850;
     opacity:.78;
     margin-top:5px
   }
   @keyframes hxCoreSpin {
     to {
       transform:rotate(360deg)
     }
   }
   .hx-pack {
     position:absolute;
     width:185px;
     height:206px;
     background:rgba(255,255,255,.93);
     border:1px solid rgba(255,255,255,.9);
     border-radius:26px;
     padding:13px;
     box-shadow:0 24px 65px rgba(0,0,0,.14);
     z-index:3;
     transition:.35s;
     animation:hxFloat 5.8s ease-in-out infinite
   }
   .hx-pack:hover {
     z-index:5;
     transform:translateY(-8px) scale(1.06)!important
   }
   .hx-pack img {
     height:142px;
     width:100%;
     object-fit:contain;
     border-radius:17px;
     background:#fff
   }
   .hx-pack span {
     display:flex;
     justify-content:space-between;
     gap:6px;
     align-items:center;
     margin-top:7px;
     font-size:10px;
     font-weight:850
   }
   .hx-pack em {
     font-style:normal;
     color:var(--red);
     font-weight:950
   }
   .hx-pack:nth-of-type(1) {
     left:0;
     top:7%;
     transform:rotate(-8deg);
     animation-delay:-1s
   }
   .hx-pack:nth-of-type(2) {
     right:-2%;
     top:11%;
     transform:rotate(7deg);
     animation-delay:-2s
   }
   .hx-pack:nth-of-type(3) {
     left:3%;
     bottom:9%;
     transform:rotate(5deg);
     animation-delay:-3s
   }
   .hx-pack:nth-of-type(4) {
     right:1%;
     bottom:3%;
     transform:rotate(-6deg);
     animation-delay:-4s
   }
   @keyframes hxFloat {
     50% {
       translate:0 -16px;
       rotate:1deg
     }
   }
   .hx-beam {
     position:absolute;
     left:-25%;
     right:-25%;
     height:2px;
     background:linear-gradient(90deg,transparent,var(--red),transparent);
     box-shadow:0 0 25px rgba(223,17,27,.85);
     animation:hxBeam 5.2s ease-in-out infinite;
     z-index:4;
     opacity:.55
   }
   @keyframes hxBeam {
     0%,100% {
       top:6%
     }
     50% {
       top:94%
     }
   }
   .hx-meteor {
     position:absolute;
     height:1px;
     width:150px;
     background:linear-gradient(90deg,transparent,rgba(223,17,27,.6),transparent);
     transform:rotate(-25deg);
     opacity:.45;
     animation:hxMeteor 8s linear infinite
   }
   .hx-meteor.m1 {
     left:8%;
     top:9%
   }
   .hx-meteor.m2 {
     right:20%;
     top:18%;
     animation-delay:-4s
   }
   .hx-meteor.m3 {
     left:42%;
     bottom:5%;
     animation-delay:-7s
   }
   @keyframes hxMeteor {
     0% {
       translate:-160px -80px;
       opacity:0
     }
     15% {
       opacity:.6
     }
     60%,100% {
       translate:520px 260px;
       opacity:0
     }
   }
   .hx-ribbon {
     background:var(--red);
     color:#fff;
     overflow:hidden;
     transform:rotate(-1.2deg);
     margin:-15px -2vw 42px;
     box-shadow:0 16px 40px rgba(223,17,27,.2)
   }
   .hx-ribbon-track {
     display:flex;
     min-width:max-content;
     animation:marquee 24s linear infinite
   }
   .hx-ribbon-track span {
     padding:16px 32px;
     font-size:12px;
     font-weight:950;
     letter-spacing:.14em;
     text-transform:uppercase
   }
   .hx-ribbon-track span:after {
     content:"✦";
     margin-left:32px;
     color:#ffbac0
   }
   .hx-command {
     padding:32px;
     border-radius:32px;
     background:linear-gradient(145deg,#101115,#08090b);
     color:#fff;
     position:relative;
     overflow:hidden;
     box-shadow:0 30px 80px rgba(0,0,0,.2)
   }
   .hx-command:before {
     content:"";
     position:absolute;
     width:360px;
     height:360px;
     border-radius:50%;
     background:var(--red);
     filter:blur(110px);
     opacity:.2;
     right:-110px;
     top:-140px
   }
   .hx-command-head {
     display:flex;
     justify-content:space-between;
     gap:20px;
     align-items:center;
     position:relative
   }
   .hx-command-head small {
     color:#aeb1b7
   }
   .hx-dotrow {
     display:flex;
     gap:5px
   }
   .hx-dotrow i {
     width:7px;
     height:7px;
     border-radius:50%;
     background:#555
   }
   .hx-dotrow i:first-child {
     background:var(--red)
   }
   .hx-form-grid {
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:12px;
     margin-top:22px;
     position:relative
   }
   .hx-field {
     display:flex;
     flex-direction:column;
     gap:7px
   }
   .hx-field.full {
     grid-column:1/-1
   }
   .hx-field label {
     font-size:10px;
     font-weight:900;
     letter-spacing:.12em;
     text-transform:uppercase;
     color:#b9bbc2
   }
   .hx-field input,.hx-field select,.hx-field textarea {
     width:100%;
     border:1px solid rgba(255,255,255,.13);
     background:rgba(255,255,255,.075);
     color:#fff;
     border-radius:15px;
     padding:14px 14px;
     outline:0;
     transition:.2s
   }
   .hx-field input::placeholder,.hx-field textarea::placeholder {
     color:#858993
   }
   .hx-field input:focus,.hx-field select:focus,.hx-field textarea:focus {
     border-color:#ff5d66;
     background:rgba(255,255,255,.105);
     box-shadow:0 0 0 4px rgba(223,17,27,.13)
   }
   .hx-field select option {
     color:#111
   }
   .hx-field textarea {
     min-height:88px;
     resize:vertical
   }
   .hx-command .btn {
     width:100%;
     margin-top:14px
   }
   .hx-form-note {
     font-size:10px;
     color:#888d96;
     margin-top:10px;
     position:relative
   }
   .hx-rail {
     display:grid;
     grid-template-columns:repeat(4,1fr);
     gap:0;
     border:1px solid var(--line);
     border-radius:28px;
     overflow:hidden;
     background:#fff;
     box-shadow:0 24px 65px rgba(0,0,0,.07)
   }
   .hx-rail a {
     padding:26px 24px;
     position:relative;
     min-height:150px;
     border-right:1px solid var(--line);
     transition:.3s
   }
   .hx-rail a:last-child {
     border:0
   }
   .hx-rail a:hover {
     background:var(--black);
     color:#fff;
     transform:translateY(-4px)
   }
   .hx-rail .num {
     font-size:42px;
     font-weight:950;
     letter-spacing:-.06em;
     color:var(--red)
   }
   .hx-rail a:hover .num {
     color:#fff
   }
   .hx-rail b {
     display:block;
     font-size:15px;
     margin-top:14px
   }
   .hx-rail small {
     display:block;
     color:var(--soft);
     margin-top:5px;
     line-height:1.45
   }
   .hx-rail a:hover small {
     color:#b9bbc3
   }
   .hx-catgrid {
     display:grid;
     grid-template-columns:repeat(12,1fr);
     gap:14px
   }
   .hx-cat {
     min-height:240px;
     grid-column:span 3;
     border-radius:28px;
     position:relative;
     overflow:hidden;
     background:#111;
     color:#fff;
     padding:22px;
     display:flex;
     flex-direction:column;
     justify-content:flex-end;
     isolation:isolate;
     transition:.45s cubic-bezier(.16,1,.3,1)
   }
   .hx-cat:nth-child(1),.hx-cat:nth-child(6) {
     grid-column:span 6
   }
   .hx-cat:nth-child(4),.hx-cat:nth-child(7) {
     grid-column:span 4
   }
   .hx-cat:nth-child(5),.hx-cat:nth-child(8) {
     grid-column:span 2
   }
   .hx-cat:hover {
     transform:translateY(-8px) scale(1.01);
     box-shadow:0 28px 70px rgba(0,0,0,.22)
   }
   .hx-cat img {
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
     object-fit:cover;
     z-index:-3;
     transition:.8s;
     filter:saturate(.9)
   }
   .hx-cat:hover img {
     transform:scale(1.11) rotate(1deg);
     filter:saturate(1.15)
   }
   .hx-cat:before {
     content:"";
     position:absolute;
     inset:0;
     background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.85));
     z-index:-2
   }
   .hx-cat:after {
     content:"";
     position:absolute;
     width:160px;
     height:160px;
     border-radius:50%;
     background:var(--red);
     filter:blur(65px);
     right:-70px;
     bottom:-70px;
     opacity:.38;
     z-index:-1
   }
   .hx-cat-count {
     align-self:flex-start;
     border-radius:999px;
     background:rgba(255,255,255,.16);
     backdrop-filter:blur(14px);
     padding:7px 10px;
     font-size:10px;
     font-weight:900;
     text-transform:uppercase;
     letter-spacing:.1em;
     margin-bottom:auto
   }
   .hx-cat h3 {
     font-size:clamp(21px,2vw,32px);
     margin:0;
     letter-spacing:-.04em
   }
   .hx-cat span:last-child {
     font-size:11px;
     color:#ddd;
     margin-top:5px
   }
   .hx-product-strip {
     display:grid;
     grid-template-columns:repeat(4,1fr);
     gap:14px
   }
   .hx-product-strip .product-card:nth-child(1) {
     transform:rotate(-1deg)
   }
   .hx-product-strip .product-card:nth-child(3) {
     transform:rotate(1deg)
   }
   .hx-flow {
     display:grid;
     grid-template-columns:1.15fr .85fr;
     gap:16px
   }
   .hx-flow-panel {
     border-radius:32px;
     padding:38px;
     position:relative;
     overflow:hidden
   }
   .hx-flow-panel.red {
     background:linear-gradient(145deg,var(--red),#a60710);
     color:#fff
   }
   .hx-flow-panel.light {
     background:#fff;
     border:1px solid var(--line);
     box-shadow:var(--shadow)
   }
   .hx-steps {
     display:grid;
     gap:8px;
     margin-top:24px
   }
   .hx-step {
     display:grid;
     grid-template-columns:45px 1fr auto;
     gap:14px;
     align-items:center;
     padding:16px;
     border-radius:18px;
     background:rgba(255,255,255,.1);
     border:1px solid rgba(255,255,255,.12)
   }
   .hx-step b:first-child {
     width:45px;
     height:45px;
     border-radius:14px;
     display:grid;
     place-items:center;
     background:#fff;
     color:var(--red)
   }
   .hx-step strong {
     display:block
   }
   .hx-step small {
     opacity:.76
   }
   .hx-step em {
     font-style:normal;
     font-size:19px
   }
   .hx-contact-stack {
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:11px;
     margin-top:24px
   }
   .hx-contact-mini {
     padding:17px;
     border-radius:18px;
     border:1px solid var(--line);
     background:#fafafa
   }
   .hx-contact-mini b {
     display:block;
     margin-bottom:5px
   }
   .hx-contact-mini span {
     font-size:13px;
     color:var(--soft)
   }
   .hx-final {
     position:relative;
     border-radius:38px;
     background:#0a0b0e;
     color:#fff;
     padding:64px;
     overflow:hidden;
     isolation:isolate
   }
   .hx-final:before {
     content:"";
     position:absolute;
     inset:-50%;
     background:repeating-conic-gradient(from 0deg,rgba(223,17,27,.15) 0 4deg,transparent 4deg 14deg);
     animation:hxCoreSpin 38s linear infinite;
     z-index:-2
   }
   .hx-final:after {
     content:"";
     position:absolute;
     inset:1px;
     border-radius:37px;
     background:radial-gradient(circle at 78% 20%,rgba(223,17,27,.29),transparent 35%),#0a0b0e;
     z-index:-1
   }
   .hx-final .h2 {
     max-width:900px
   }
   .hx-final-actions {
     display:flex;
     gap:10px;
     flex-wrap:wrap;
     margin-top:26px
   }
   /* FLOATING WHATSAPP + ASSISTANT */ .comm-stack {
     position:fixed;
     right:22px;
     bottom:22px;
     z-index:3200;
     display:flex;
     flex-direction:column;
     gap:10px;
     align-items:flex-end
   }
   .comm-btn {
     width:58px;
     height:58px;
     border-radius:19px;
     border:0;
     display:grid;
     place-items:center;
     cursor:pointer;
     box-shadow:0 16px 45px rgba(0,0,0,.22);
     transition:.25s;
     position:relative
   }
   .comm-btn:hover {
     transform:translateY(-5px) scale(1.04)
   }
   .comm-btn svg {
     width:27px;
     height:27px
   }
   .wa-btn {
     background:#22c55e;
     color:#fff
   }
   .ai-btn {
     background:linear-gradient(145deg,var(--red),#93050d);
     color:#fff;
     animation:aiBreathe 2.5s ease-in-out infinite
   }
   .ai-btn:after {
     content:"AI";
     position:absolute;
     right:-4px;
     top:-5px;
     background:#fff;
     color:var(--red);
     font-size:8px;
     font-weight:950;
     letter-spacing:.06em;
     padding:4px 5px;
     border-radius:7px;
     box-shadow:0 6px 15px rgba(0,0,0,.13)
   }
   @keyframes aiBreathe {
     50% {
       box-shadow:0 16px 45px rgba(223,17,27,.38),0 0 0 9px rgba(223,17,27,.06)
     }
   }
   .comm-tip {
     position:absolute;
     right:68px;
     white-space:nowrap;
     background:#0a0b0e;
     color:#fff;
     padding:8px 10px;
     border-radius:10px;
     font-size:10px;
     font-weight:900;
     opacity:0;
     pointer-events:none;
     transform:translateX(8px);
     transition:.2s
   }
   .comm-btn:hover .comm-tip {
     opacity:1;
     transform:none
   }
   .ai-panel {
     position:fixed;
     right:22px;
     bottom:96px;
     width:min(390px,calc(100vw - 30px));
     height:560px;
     max-height:calc(100vh - 130px);
     z-index:3199;
     border-radius:28px;
     background:#fff;
     border:1px solid rgba(0,0,0,.08);
     box-shadow:0 35px 100px rgba(0,0,0,.26);
     overflow:hidden;
     display:flex;
     flex-direction:column;
     opacity:0;
     pointer-events:none;
     transform:translateY(20px) scale(.96);
     transform-origin:bottom right;
     transition:.3s cubic-bezier(.16,1,.3,1)
   }
   .ai-panel.open {
     opacity:1;
     pointer-events:auto;
     transform:none
   }
   .ai-head {
     background:linear-gradient(135deg,#111216,#08090b);
     color:#fff;
     padding:18px;
     display:flex;
     align-items:center;
     gap:12px
   }
   .ai-avatar {
     width:44px;
     height:44px;
     border-radius:15px;
     background:var(--red);
     display:grid;
     place-items:center;
     font-weight:950
   }
   .ai-head h4 {
     margin:0;
     font-size:15px
   }
   .ai-head small {
     color:#aeb1b7
   }
   .ai-close {
     margin-left:auto;
     background:rgba(255,255,255,.1);
     border:0;
     color:#fff;
     width:36px;
     height:36px;
     border-radius:12px;
     font-size:20px;
     line-height:1;
     cursor:pointer;
     transition:background .18s
   }
   .ai-close:hover {
     background:rgba(255,255,255,.2)
   }
   .ai-messages {
     flex:1;
     overflow:auto;
     padding:16px;
     background:linear-gradient(#fbfbfc,#f4f5f6)
   }
   .ai-msg {
     max-width:88%;
     margin:0 0 10px;
     padding:11px 13px;
     border-radius:16px;
     font-size:13px;
     line-height:1.48
   }
   .ai-msg.bot {
     background:#fff;
     border:1px solid #e7e8eb;
     box-shadow:0 8px 22px rgba(0,0,0,.045);
     border-top-left-radius:5px
   }
   .ai-msg.user {
     background:var(--red);
     color:#fff;
     margin-left:auto;
     border-top-right-radius:5px
   }
   .ai-product {
     display:grid;
     grid-template-columns:46px 1fr auto;
     align-items:center;
     gap:9px;
     margin-top:8px;
     padding:7px;
     background:#f7f7f8;
     border-radius:12px
   }
   .ai-product img {
     width:46px;
     height:46px;
     object-fit:contain;
     background:#fff;
     border-radius:9px
   }
   .ai-product b {
     font-size:11px;
     display:block
   }
   .ai-product span {
     font-size:11px;
     font-weight:950;
     color:var(--red)
   }
   /* A9.6 deterministic assistant: result cards, count line, links, pending state */
   .ai-product {
     min-width:0;
     color:inherit;
     text-decoration:none
   }
   .ai-product:hover,.ai-product:focus-visible {
     background:#f0f0f2
   }
   .ai-product:focus-visible {
     outline:2px solid var(--red);
     outline-offset:2px
   }
   .ai-product .ai-product-img,.ai-product .ai-product-text,.ai-product .ai-product-price {
     min-width:0
   }
   .ai-product .ai-product-text {
     color:inherit;
     font-weight:400;
     overflow-wrap:anywhere
   }
   .ai-product .ai-product-text small {
     display:block;
     font-size:10.5px;
     line-height:1.35;
     color:#5d6168
   }
   .ai-product .ai-product-price {
     text-align:right;
     white-space:nowrap
   }
   .ai-product .ai-product-price small {
     display:block;
     font-size:10px;
     font-weight:700;
     color:#5d6168
   }
   .ai-count {
     display:block;
     font-weight:700
   }
   .ai-more {
     margin-top:8px
   }
   .ai-link {
     color:var(--red);
     font-weight:900
   }
   .ai-msg.ai-pending {
     color:#5d6168;
     font-style:italic
   }
   .ai-chips {
     display:flex;
     flex-wrap:wrap;
     gap:6px;
     padding:12px 14px 4px;
     background:#fff
   }
   .ai-chips button {
     flex:0 0 auto;
     min-height:34px;
     border:1px solid var(--line);
     background:var(--paper);
     color:var(--ink);
     border-radius:999px;
     padding:0 10px;
     font:inherit;
     font-size:12px;
     font-weight:700;
     line-height:1;
     cursor:pointer;
     transition:background .18s,border-color .18s,color .18s,transform .18s
   }
   .ai-chips button:hover {
     background:#fff;
     border-color:var(--red);
     color:var(--red)
   }
   .ai-chips button:active {
     transform:scale(.97)
   }
   .ai-chips button:focus-visible,.ai-close:focus-visible {
     outline:2px solid var(--red);
     outline-offset:2px
   }
   .ai-inputrow {
     display:flex;
     align-items:center;
     gap:6px;
     margin:10px 14px 0;
     padding:5px 5px 5px 16px;
     background:var(--paper);
     border:1.5px solid var(--line);
     border-radius:18px;
     transition:border-color .18s,box-shadow .18s,background .18s
   }
   .ai-inputrow:focus-within {
     background:#fff;
     border-color:var(--red);
     box-shadow:0 0 0 4px rgba(223,17,27,.1)
   }
   .ai-inputrow input {
     flex:1;
     min-width:0;
     height:40px;
     border:0;
     background:transparent;
     color:var(--ink);
     font:inherit;
     font-size:14px;
     padding:0;
     text-overflow:ellipsis;
     outline:0
   }
   .ai-inputrow input::placeholder {
     color:#8a8e96;
     opacity:1
   }
   .ai-inputrow button {
     flex:none;
     width:40px;
     height:40px;
     display:grid;
     place-items:center;
     padding:0;
     border:0;
     border-radius:13px;
     background:linear-gradient(145deg,var(--red2),var(--red3));
     color:#fff;
     cursor:pointer;
     box-shadow:0 6px 16px rgba(223,17,27,.28);
     transition:transform .18s,box-shadow .18s,opacity .18s
   }
   .ai-inputrow button svg {
     width:18px;
     height:18px
   }
   .ai-inputrow button:hover {
     transform:translateY(-1px);
     box-shadow:0 9px 20px rgba(223,17,27,.36)
   }
   .ai-inputrow button:active {
     transform:scale(.94);
     box-shadow:0 3px 8px rgba(223,17,27,.3)
   }
   .ai-inputrow button:focus-visible {
     outline:2px solid var(--ink);
     outline-offset:2px
   }
   .ai-inputrow button:disabled {
     opacity:.45;
     cursor:default;
     transform:none;
     box-shadow:none
   }
   .ai-note {
     font-size:10px;
     color:#8a8e96;
     text-align:center;
     padding:8px 14px 12px;
     background:#fff
   }
   @media(max-width:1150px) {
     .hx-grid {
       grid-template-columns:1fr
     }
     .hx-copy {
       padding-top:10px
     }
     .hx-stage {
       min-height:580px;
       max-width:720px;
       width:100%;
       margin:auto
     }
     .hx-rail {
       grid-template-columns:1fr 1fr
     }
     .hx-rail a:nth-child(2) {
       border-right:0
     }
     .hx-rail a:nth-child(-n+2) {
       border-bottom:1px solid var(--line)
     }
     .hx-cat {
       grid-column:span 4!important
     }
     .hx-cat:nth-child(1),.hx-cat:nth-child(6) {
       grid-column:span 8!important
     }
     .hx-flow {
       grid-template-columns:1fr
     }
     .hx-product-strip {
       grid-template-columns:repeat(2,1fr)
     }
   }
   @media(max-width:760px) {
     .home-x-hero {
       padding-top:30px
     }
     .hx-grid {
       gap:28px
     }
     .hx-title {
       font-size:clamp(54px,17vw,84px)
     }
     .hx-outline {
       -webkit-text-stroke:1.4px #17181d
     }
     .hx-searchbox {
       grid-template-columns:46px 1fr
     }
     .hx-searchbox .btn {
       grid-column:1/-1;
       width:100%;
       margin-top:3px
     }
     .hx-stage {
       min-height:470px;
       transform:scale(.92);
       transform-origin:top center;
       margin-bottom:-36px
     }
     .hx-ring {
       width:400px;
       height:400px
     }
     .hx-ring2 {
       width:320px;
       height:320px
     }
     .hx-core {
       width:235px;
       height:330px
     }
     .hx-pack {
       width:124px;
       height:145px
     }
     .hx-pack img {
       height:91px
     }
     .hx-ribbon {
       margin-top:0
     }
     .hx-command {
       padding:24px
     }
     .hx-form-grid {
       grid-template-columns:1fr
     }
     .hx-field.full {
       grid-column:auto
     }
     .hx-rail {
       grid-template-columns:1fr
     }
     .hx-rail a {
       border-right:0;
       border-bottom:1px solid var(--line)!important
     }
     .hx-rail a:last-child {
       border:0!important
     }
     .hx-catgrid {
       grid-template-columns:1fr 1fr
     }
     .hx-cat {
       grid-column:auto!important;
       min-height:200px
     }
     .hx-cat:nth-child(1),.hx-cat:nth-child(6) {
       grid-column:1/-1!important
     }
     .hx-product-strip {
       grid-template-columns:1fr
     }
     .hx-flow-panel {
       padding:26px
     }
     .hx-contact-stack {
       grid-template-columns:1fr
     }
     .hx-final {
       padding:36px 24px
     }
     .comm-stack {
       right:14px;
       bottom:14px
     }
     .comm-btn {
       width:54px;
       height:54px;
       border-radius:18px
     }
     .ai-panel {
       right:10px;
       bottom:82px;
       width:calc(100vw - 20px);
       height:min(610px,calc(100vh - 100px))
     }
   }
   @media(max-width:480px) {
     .hx-catgrid {
       grid-template-columns:1fr
     }
     .hx-cat,.hx-cat:nth-child(1),.hx-cat:nth-child(6) {
       grid-column:1/-1!important
     }
     .hx-stage {
       transform:scale(.8);
       width:125%;
       margin-left:-12.5%;
       margin-bottom:-80px
     }
     .hx-signalbar {
       gap:6px
     }
     .hx-signal {
       font-size:9px;
       padding:8px 10px
     }
     .hx-trust {
       gap:12px
     }
     .hx-trust-item {
       width:calc(50% - 6px)
     }
     .comm-tip {
       display:none
     }
   }
   @media(max-width:760px) {
     .hx-pack span {
       min-width:0;
       align-items:flex-start;
       overflow:hidden
     }
     .hx-pack b {
       min-width:0;
       display:-webkit-box;
       overflow:hidden;
       text-overflow:ellipsis;
       -webkit-box-orient:vertical;
       -webkit-line-clamp:2;
       line-height:1.15;
       word-break:break-word
     }
     .hx-pack em {
       flex:0 0 auto;
       white-space:nowrap
     }
   }
   @media(max-width:620px) {
     .brand-card {
       min-height:74px;
       padding:12px 11px;
       gap:9px;
       border-radius:16px
     }
     .brand-card-mark {
       width:36px;
       height:36px;
       flex-basis:36px;
       border-radius:11px;
       font-size:11px
     }
     .brand-card b {
       font-size:12px
     }
     .brand-card small {
       font-size:9px;
       margin-top:4px
     }
     .brand-card-arrow {
       display:none
     }
   }
   @media(max-width:760px) {
     .hx-pack {
       width:150px;
       height:176px;
       padding:11px
     }
     .hx-pack img {
       height:112px
     }
   }
   /* =========================================================
      MYZ HOMEPAGE V4 — WHOLESALE MOTION / SECTOR UX
      ========================================================= */ .dept-v4 {
     position:relative;
     background:#0a0b0e;
     color:#fff;
     overflow:hidden;
     padding:110px 0
   }
   .dept-v4:before {
     content:"";
     position:absolute;
     inset:0;
     background:radial-gradient(700px 460px at 10% 0%,rgba(223,17,27,.25),transparent 62%),radial-gradient(760px 480px at 96% 100%,rgba(255,255,255,.06),transparent 64%);
     pointer-events:none
   }
   .dept-v4:after {
     content:"MYZ / DEPARTMENTS / WHOLESALE /";
     position:absolute;
     left:-3%;
     bottom:-2%;
     font-size:8vw;
     font-weight:950;
     letter-spacing:-.06em;
     white-space:nowrap;
     color:transparent;
     -webkit-text-stroke:1px rgba(255,255,255,.045);
     transform:rotate(-3deg);
     pointer-events:none
   }
   .dept-v4 .section-head {
     position:relative;
     z-index:3
   }
   .dept-v4 .lead {
     color:#aeb2ba
   }
   .dept-v4 .eyebrow {
     color:#ff626b
   }
   .dept-v4 .eyebrow:before {
     background:#ff626b
   }
   .dept-v4-grid {
     display:grid;
     grid-template-columns:repeat(12,1fr);
     gap:12px;
     position:relative;
     z-index:2
   }
   .dept-v4-card {
     grid-column:span 3;
     min-height:300px;
     padding:24px;
     border:1px solid rgba(255,255,255,.1);
     border-radius:30px;
     background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
     position:relative;
     overflow:hidden;
     isolation:isolate;
     display:flex;
     flex-direction:column;
     transition:.5s cubic-bezier(.16,1,.3,1);
     box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
   }
   .dept-v4-card:nth-child(1),.dept-v4-card:nth-child(6) {
     grid-column:span 6
   }
   .dept-v4-card:nth-child(4),.dept-v4-card:nth-child(7) {
     grid-column:span 4
   }
   .dept-v4-card:nth-child(5),.dept-v4-card:nth-child(8) {
     grid-column:span 2
   }
   .dept-v4-card:before {
     content:"";
     position:absolute;
     inset:-1px;
     background:radial-gradient(320px 240px at var(--mx,80%) var(--my,10%),rgba(223,17,27,.26),transparent 58%);
     z-index:-2;
     transition:.2s
   }
   .dept-v4-card:after {
     content:"";
     position:absolute;
     height:1px;
     left:-20%;
     right:-20%;
     top:-10%;
     background:linear-gradient(90deg,transparent,rgba(255,75,86,.9),transparent);
     box-shadow:0 0 25px rgba(223,17,27,.55);
     animation:deptScan 7s ease-in-out infinite;
     opacity:.45;
     z-index:-1
   }
   @keyframes deptScan {
     50% {
       top:110%
     }
   }
   .dept-v4-card:hover {
     transform:translateY(-10px);
     border-color:rgba(255,78,89,.45);
     box-shadow:0 30px 80px rgba(0,0,0,.35)
   }
   .dept-v4-code {
     position:absolute;
     right:-.04em;
     bottom:-.16em;
     font-size:clamp(95px,9vw,170px);
     font-weight:950;
     line-height:1;
     letter-spacing:-.1em;
     color:transparent;
     -webkit-text-stroke:1px rgba(255,255,255,.07);
     z-index:-1;
     pointer-events:none
   }
   .dept-v4-top {
     display:flex;
     justify-content:space-between;
     align-items:center;
     gap:12px
   }
   .dept-v4-index {
     font-size:11px;
     font-weight:950;
     letter-spacing:.15em;
     color:#ff7780;
     text-transform:uppercase
   }
   .dept-v4-count {
     font-size:10px;
     font-weight:900;
     letter-spacing:.11em;
     text-transform:uppercase;
     padding:7px 9px;
     border:1px solid rgba(255,255,255,.12);
     border-radius:999px;
     color:#d7d9de;
     background:rgba(255,255,255,.05)
   }
   .dept-v4-card h3 {
     font-size:clamp(28px,3vw,50px);
     line-height:.9;
     letter-spacing:-.055em;
     margin:28px 0 18px;
     max-width:90%
   }
   .dept-v4-card p {
     font-size:12px;
     line-height:1.55;
     color:#9da1aa;
     max-width:430px;
     margin:0 0 20px
   }
   .dept-v4-preview {
     margin-top:auto;
     display:grid;
     gap:6px
   }
   .dept-v4-line {
     display:grid;
     grid-template-columns:1fr auto;
     gap:12px;
     align-items:center;
     padding:9px 11px;
     border-radius:12px;
     background:rgba(255,255,255,.055);
     font-size:10px;
     color:#c8cbd1
   }
   .dept-v4-line b {
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis
   }
   .dept-v4-line span {
     font-weight:950;
     color:#fff
   }
   .dept-v4-go {
     margin-top:13px;
     font-size:11px;
     font-weight:950;
     letter-spacing:.09em;
     text-transform:uppercase;
     color:#ff737b;
     display:flex;
     align-items:center;
     justify-content:space-between
   }
   .dept-v4-go i {
     font-style:normal;
     width:30px;
     height:30px;
     border-radius:50%;
     display:grid;
     place-items:center;
     background:var(--red);
     color:#fff;
     transition:.3s
   }
   .dept-v4-card:hover .dept-v4-go i {
     transform:translateX(4px) rotate(-8deg)
   }
   .biz-v4 {
     padding:120px 0 105px;
     position:relative;
     overflow:hidden;
     background:linear-gradient(180deg,#f6f6f7 0,#fff 55%,#f6f6f7 100%)
   }
   .biz-v4:before {
     content:"";
     position:absolute;
     width:700px;
     height:700px;
     border-radius:50%;
     border:1px solid rgba(223,17,27,.08);
     right:-280px;
     top:-250px;
     box-shadow:0 0 0 75px rgba(223,17,27,.025),0 0 0 150px rgba(223,17,27,.018);
     animation:bizOrbit 28s linear infinite
   }
   @keyframes bizOrbit {
     to {
       transform:rotate(360deg)
     }
   }
   .biz-v4-head {
     display:grid;
     grid-template-columns:1.1fr .9fr;
     gap:50px;
     align-items:end;
     margin-bottom:42px;
     position:relative
   }
   .biz-v4-head .lead {
     margin-left:auto;
     max-width:560px
   }
   .biz-v4-kicker {
     display:inline-flex;
     align-items:center;
     gap:10px;
     color:var(--red);
     font-size:11px;
     letter-spacing:.16em;
     font-weight:950;
     text-transform:uppercase
   }
   .biz-v4-kicker:before {
     content:"";
     width:30px;
     height:2px;
     background:var(--red)
   }
   .biz-v4-grid {
     display:grid;
     grid-template-columns:repeat(12,1fr);
     grid-auto-rows:250px;
     gap:14px;
     position:relative
   }
   .biz-v4-card {
     grid-column:span 4;
     grid-row:span 2;
     position:relative;
     border-radius:34px;
     overflow:hidden;
     color:#fff;
     isolation:isolate;
     box-shadow:0 24px 70px rgba(12,13,16,.14);
     transition:.5s cubic-bezier(.16,1,.3,1);
     border:1px solid rgba(0,0,0,.06);
     transform-style:preserve-3d;
     background:#111
   }
   .biz-v4-card:nth-child(1) {
     grid-column:span 7
   }
   .biz-v4-card:nth-child(2) {
     grid-column:span 5
   }
   .biz-v4-card:nth-child(3) {
     grid-column:span 4;
     grid-row:span 1
   }
   .biz-v4-card:nth-child(4) {
     grid-column:span 4;
     grid-row:span 1
   }
   .biz-v4-card:nth-child(5) {
     grid-column:span 4;
     grid-row:span 1
   }
   .biz-v4-card>img {
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
     object-fit:cover;
     z-index:-4;
     filter:saturate(.95) contrast(1.04);
     transition:1s cubic-bezier(.16,1,.3,1)
   }
   .biz-v4-card:before {
     content:"";
     position:absolute;
     inset:0;
     background:linear-gradient(180deg,rgba(4,5,7,.05) 10%,rgba(4,5,7,.2) 42%,rgba(4,5,7,.94) 100%);
     z-index:-3
   }
   .biz-v4-card:after {
     content:"";
     position:absolute;
     inset:0;
     background:radial-gradient(420px 300px at var(--mx,75%) var(--my,15%),rgba(255,55,68,.36),transparent 60%);
     z-index:-2;
     mix-blend-mode:screen;
     opacity:.68;
     transition:.2s
   }
   .biz-v4-card:hover {
     transform:translateY(-10px) scale(1.012);
     box-shadow:0 38px 90px rgba(0,0,0,.24)
   }
   .biz-v4-card:hover>img {
     transform:scale(1.08)
   }
   .biz-v4-body {
     position:absolute;
     inset:0;
     padding:28px;
     display:flex;
     flex-direction:column;
     justify-content:flex-end;
     transform:translateZ(25px)
   }
   .biz-v4-top {
     position:absolute;
     left:28px;
     right:28px;
     top:25px;
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:10px
   }
   .biz-v4-label {
     font-size:10px;
     font-weight:950;
     letter-spacing:.15em;
     text-transform:uppercase;
     padding:8px 11px;
     border-radius:999px;
     background:rgba(0,0,0,.38);
     backdrop-filter:blur(13px);
     border:1px solid rgba(255,255,255,.17)
   }
   .biz-v4-lines {
     font-size:10px;
     font-weight:950;
     padding:8px 11px;
     border-radius:999px;
     background:#fff;
     color:#111;
     box-shadow:0 8px 25px rgba(0,0,0,.15)
   }
   .biz-v4-card h3 {
     font-size:clamp(34px,4.2vw,70px);
     line-height:.88;
     letter-spacing:-.065em;
     margin:0 0 10px;
     text-shadow:0 6px 30px rgba(0,0,0,.35)
   }
   .biz-v4-card:nth-child(n+3) h3 {
     font-size:clamp(28px,3vw,44px)
   }
   .biz-v4-card p {
     font-size:13px;
     line-height:1.5;
     color:#e3e5e9;
     max-width:520px;
     margin:0 0 18px
   }
   .biz-v4-chips {
     display:flex;
     gap:7px;
     flex-wrap:wrap
   }
   .biz-v4-chips span {
     font-size:9px;
     font-weight:900;
     letter-spacing:.06em;
     text-transform:uppercase;
     padding:7px 9px;
     border-radius:999px;
     background:rgba(255,255,255,.13);
     border:1px solid rgba(255,255,255,.18);
     backdrop-filter:blur(10px)
   }
   .biz-v4-cta {
     position:absolute;
     right:28px;
     bottom:28px;
     width:50px;
     height:50px;
     border-radius:16px;
     background:var(--red);
     display:grid;
     place-items:center;
     font-size:22px;
     font-weight:900;
     box-shadow:0 14px 35px rgba(223,17,27,.35);
     transition:.35s
   }
   .biz-v4-card:hover .biz-v4-cta {
     transform:rotate(-8deg) scale(1.08)
   }
   .biz-v4-note {
     display:flex;
     justify-content:space-between;
     gap:20px;
     align-items:center;
     margin-top:22px;
     padding:16px 18px;
     border-radius:18px;
     background:#fff;
     border:1px solid var(--line);
     font-size:12px
   }
   .biz-v4-note b {
     font-size:13px
   }
   .biz-v4-note span {
     color:var(--soft)
   }
   .order-tools-v4 {
     padding:18px 0 70px
   }
   .order-tools-v4 .tools-shell {
     background:#fff;
     border:1px solid var(--line);
     border-radius:32px;
     box-shadow:0 24px 70px rgba(0,0,0,.07);
     padding:16px;
     display:grid;
     grid-template-columns:1.5fr repeat(4,1fr);
     gap:10px
   }
   .tool-v4 {
     min-height:175px;
     border:0;
     border-radius:22px;
     padding:22px;
     text-align:left;
     cursor:pointer;
     background:#f6f6f7;
     color:var(--ink);
     position:relative;
     overflow:hidden;
     transition:.35s;
     display:flex;
     flex-direction:column;
     justify-content:space-between
   }
   .tool-v4.primary {
     background:linear-gradient(145deg,#df111b,#a8060f);
     color:#fff
   }
   .tool-v4.dark {
     background:#0b0c0f;
     color:#fff
   }
   .tool-v4:hover {
     transform:translateY(-6px);
     box-shadow:0 18px 45px rgba(0,0,0,.12)
   }
   .tool-v4:after {
     content:"";
     position:absolute;
     width:150px;
     height:150px;
     border-radius:50%;
     border:1px solid currentColor;
     opacity:.08;
     right:-60px;
     top:-60px;
     box-shadow:0 0 0 35px currentColor,0 0 0 70px currentColor
   }
   .tool-v4-num {
     font-size:10px;
     font-weight:950;
     letter-spacing:.15em;
     text-transform:uppercase;
     opacity:.65
   }
   .tool-v4 strong {
     font-size:22px;
     letter-spacing:-.035em;
     line-height:1
   }
   .tool-v4 small {
     font-size:11px;
     line-height:1.45;
     opacity:.7
   }
   .tool-v4-icon {
     width:37px;
     height:37px;
     border-radius:12px;
     background:rgba(255,255,255,.9);
     color:var(--red);
     display:grid;
     place-items:center;
     font-weight:950;
     box-shadow:0 8px 25px rgba(0,0,0,.08)
   }
   .tool-v4:not(.primary):not(.dark) .tool-v4-icon {
     background:#fff
   }
   .quick-order-grid {
     display:grid;
     grid-template-columns:1fr 90px;
     gap:8px
   }
   .quick-order-grid+.quick-order-grid {
     margin-top:8px
   }
   .quick-order-results {
     margin-top:14px;
     padding:12px;
     border-radius:14px;
     background:#f6f6f7;
     font-size:12px;
     line-height:1.6
   }
   .saved-list-row {
     display:grid;
     grid-template-columns:1fr auto auto;
     gap:8px;
     align-items:center;
     padding:11px 0;
     border-bottom:1px solid var(--line)
   }
   .saved-list-row:last-child {
     border-bottom:0
   }
   .saved-list-row b {
     font-size:13px
   }
   .saved-list-row small {
     display:block;
     color:var(--soft);
     margin-top:3px
   }
   .mini-action {
     border:1px solid var(--line);
     background:#fff;
     border-radius:10px;
     padding:8px 10px;
     font-size:11px;
     font-weight:900;
     cursor:pointer
   }
   .mini-action.red {
     background:var(--red);
     color:#fff;
     border-color:var(--red)
   }
   .cart-tool-row {
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:8px;
     margin-top:12px
   }
   .cart-tool-row .btn {
     min-height:42px;
     padding:0 12px;
     font-size:11px
   }
   .contact-replace {
     padding:18px 0 70px
   }
   .contact-replace-shell {
     display:grid;
     grid-template-columns:1.4fr repeat(3,1fr);
     gap:10px;
     background:#fff;
     border:1px solid var(--line);
     border-radius:32px;
     box-shadow:0 24px 70px rgba(0,0,0,.07);
     padding:16px
   }
   .contact-replace-lead,.contact-replace-card {
     min-height:190px;
     border-radius:22px;
     padding:22px;
     position:relative;
     overflow:hidden;
     display:flex;
     flex-direction:column;
     justify-content:space-between
   }
   .contact-replace-lead {
     background:linear-gradient(145deg,#df111b,#a8060f);
     color:#fff
   }
   .contact-replace-lead:after,.contact-replace-card:after {
     content:"";
     position:absolute;
     width:170px;
     height:170px;
     border-radius:50%;
     border:1px solid currentColor;
     opacity:.1;
     right:-65px;
     top:-65px;
     box-shadow:0 0 0 35px currentColor,0 0 0 70px currentColor
   }
   .contact-replace-card {
     background:#f6f6f7;
     color:var(--ink);
     text-decoration:none;
     transition:.35s
   }
   .contact-replace-card:hover {
     transform:translateY(-6px);
     box-shadow:0 18px 45px rgba(0,0,0,.12)
   }
   .contact-replace-num {
     font-size:10px;
     font-weight:950;
     letter-spacing:.15em;
     text-transform:uppercase;
     opacity:.68
   }
   .contact-replace-lead strong,.contact-replace-card strong {
     font-size:clamp(20px,2vw,28px);
     letter-spacing:-.045em;
     line-height:1.02;
     position:relative;
     z-index:1
   }
   .contact-replace-lead p,.contact-replace-card small {
     font-size:11px;
     line-height:1.45;
     opacity:.72;
     position:relative;
     z-index:1
   }
   .contact-replace-lead .btn {
     width:max-content;
     position:relative;
     z-index:1
   }
   .contact-replace-icon {
     width:37px;
     height:37px;
     border-radius:12px;
     background:#fff;
     color:var(--red);
     display:grid;
     place-items:center;
     font-weight:950;
     box-shadow:0 8px 25px rgba(0,0,0,.08);
     position:relative;
     z-index:1
   }
   @media(max-width:1050px) {
     .contact-replace-shell {
       grid-template-columns:repeat(2,1fr)
     }
     .contact-replace-lead {
       grid-column:span 2
     }
   }
   @media(max-width:680px) {
     .contact-replace-shell {
       grid-template-columns:1fr;
       padding:10px;
       border-radius:24px
     }
     .contact-replace-lead {
       grid-column:auto
     }
     .contact-replace-lead,.contact-replace-card {
       min-height:155px
     }
     .tool-v4,.contact-replace-card {
       position:relative
     }
     .tool-v4-icon,.contact-replace-icon {
       position:absolute!important;
       top:18px!important;
       right:18px!important;
       left:auto!important;
       margin:0!important;
       align-self:flex-end!important;
       transform:none!important
     }
   }
   /* Online ordering is not enabled yet. Keep browsing and enquiries available without cart controls. */ .addBtn,.buy-row .qty,.buy-row .btn-red,.quick-info .btn-red,.header-actions button[aria-label="Cart"],a[href="#/cart"],#cartDrawer,#drawerShade {
     display:none!important
   }
   @media(max-width:1050px) {
     .dept-v4-card {
       grid-column:span 6!important
     }
     .biz-v4-grid {
       grid-auto-rows:230px
     }
     .biz-v4-card,.biz-v4-card:nth-child(n) {
       grid-column:span 6;
       grid-row:span 2
     }
     .biz-v4-card:nth-child(5) {
       grid-column:span 12;
       grid-row:span 1
     }
     .order-tools-v4 .tools-shell {
       grid-template-columns:repeat(2,1fr)
     }
     .tool-v4.primary {
       grid-column:span 2
     }
     .biz-v4-head {
       grid-template-columns:1fr
     }
     .biz-v4-head .lead {
       margin-left:0
     }
   }
   @media(max-width:680px) {
     .dept-v4 {
       padding:76px 0
     }
     .dept-v4-grid {
       gap:9px
     }
     .dept-v4-card {
       grid-column:span 12!important;
       min-height:245px;
       border-radius:23px;
       padding:19px
     }
     .dept-v4-card h3 {
       font-size:36px;
       margin-top:22px
     }
     .biz-v4 {
       padding:78px 0
     }
     .biz-v4-grid {
       display:flex;
       overflow-x:auto;
       scroll-snap-type:x mandatory;
       padding:3px 2px 15px;
       gap:12px
     }
     .biz-v4-card,.biz-v4-card:nth-child(n) {
       min-width:86vw;
       height:500px;
       grid-column:auto;
       grid-row:auto;
       scroll-snap-align:center;
       border-radius:27px
     }
     .biz-v4-body {
       padding:21px
     }
     .biz-v4-top {
       left:21px;
       right:21px;
       top:21px
     }
     .biz-v4-cta {
       right:21px;
       bottom:21px
     }
     .biz-v4-card h3,.biz-v4-card:nth-child(n+3) h3 {
       font-size:42px
     }
     .biz-v4-note {
       align-items:flex-start;
       flex-direction:column
     }
     .order-tools-v4 .tools-shell {
       grid-template-columns:1fr;
       padding:10px;
       border-radius:24px
     }
     .tool-v4.primary {
       grid-column:auto
     }
     .tool-v4 {
       min-height:145px
     }
     .cart-tool-row {
       grid-template-columns:1fr
     }
     .quick-order-grid {
       grid-template-columns:1fr 72px
     }
   }
   /* Final mobile guardrails: keep the hero artwork and dense catalogue content inside the viewport. */ @media(max-width:760px) {
     .container {
       width:min(100% - 24px,1400px)
     }
     .hx-grid,.hx-copy,.hx-stage {
       min-width:0
     }
     .hx-stage {
       width:100%;
       max-width:100%;
       transform:none;
       margin-left:0;
       margin-bottom:-30px;
       overflow:visible
     }
     .hx-pack {
       max-width:calc(50% - 8px)
     }
     .hx-title,.h2,.display {
       overflow-wrap:break-word
     }
     .catalogue-toolbar,.section-head {
       min-width:0
     }
     .catalogue-toolbar .left,.catalogue-toolbar .input {
       min-width:0
     }
     .searchPanel,.modal,.drawer {
       max-width:100vw
     }
   }
   @media(max-width:480px) {
     .hx-stage {
       min-height:410px;
       margin-bottom:-42px
     }
     .hx-ring {
       width:300px;
       height:300px
     }
     .hx-ring2 {
       width:240px;
       height:240px
     }
     .hx-core {
       width:178px;
       height:248px;
       border-radius:28px
     }
     .hx-core-meta {
       margin-top:17px
     }
     .hx-core-meta strong {
       font-size:31px
     }
     .hx-core-meta small {
       font-size:8px
     }
     .hx-pack {
       width:102px;
       height:126px;
       padding:8px;
       border-radius:18px
     }
     .hx-pack img {
       height:78px;
       border-radius:12px
     }
     .hx-pack span {
       font-size:9px
     }
     .hx-pack:nth-of-type(1) {
       left:-3%;
       top:6%
     }
     .hx-pack:nth-of-type(2) {
       right:-3%;
       top:8%
     }
     .hx-pack:nth-of-type(3) {
       left:0;
       bottom:3%
     }
     .hx-pack:nth-of-type(4) {
       right:0;
       bottom:0
     }
     .form-card,.hx-command,.hx-flow-panel {
       padding:22px 18px
     }
     .price-row {
       align-items:center
     }
     .price {
       font-size:18px
     }
   }
   @media(max-width:760px) {
     .header-inner {
       gap:12px
     }
     .header-actions {
       gap:4px
     }
     .header-actions .iconBtn {
       width:42px;
       height:42px
     }
   }
   @media(max-width:480px) {
     .header-inner {
       width:calc(100% - 18px);
       gap:8px
     }
     .header-actions {
       margin-left:auto
     }
     .header-actions .iconBtn {
       width:39px;
       height:39px
     }
     .header-actions .iconBtn svg {
       width:17px;
       height:17px
     }
   }
   .product-media,.product-media img,.detail-media,.detail-media img,.quick-img,.quick-img img,.cart-item img,.miniCart img,.search-hit img,.ai-product img {
     background:#fff!important
   }
   .detail-media:before {
     display:none
   }
  
/* ---- A9.1 resilience: first-load skeletons, refresh note, local Instagram glyph ---- */
.sk-block,.sk-line,.sk-chip{background:linear-gradient(100deg,#efeff1 30%,#f8f8fa 50%,#efeff1 70%);background-size:200% 100%;animation:sk-shimmer 1.4s linear infinite}
.sk-line{display:block;height:11px;border-radius:6px;margin:0 0 9px}
.sk-line.sk-price{height:18px;margin-top:14px;margin-bottom:0}
.sk-w20{width:20%}.sk-w30{width:30%}.sk-w40{width:40%}.sk-w50{width:50%}.sk-w60{width:60%}.sk-w90{width:90%}
.sk-card{pointer-events:none}
.sk-card:hover{transform:none;box-shadow:none;border-color:var(--line)}
.sk-card .product-media{padding:0}
.sk-card .product-body{min-height:177px}
.sk-pager{display:flex;align-items:center;justify-content:center;height:42px;margin-top:32px}
@media(max-width:760px){.sk-card .product-body{min-height:156px}}
.sk-chip{display:inline-block;width:92px;height:14px;border-radius:7px;margin:0 18px}
.hx-pack-sk{pointer-events:none}
.hx-pack-sk>i{display:block;width:100%;height:100%;min-height:56px;border-radius:14px}
.sk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.search-pending{padding:16px;font-size:13px}
.catalogue-loading-note,.cat-error{text-align:center}
.catalogue-refresh-note{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:8px 16px;font-size:12px;font-weight:700;color:#5a3b00;background:#fff4d6;border-bottom:1px solid #f0d58a}
.catalogue-refresh-note[hidden]{display:none}
.catalogue-refresh-note .btn{padding:4px 12px;font-size:12px}
.instagram-icon svg{display:block;width:9px;height:9px;color:#fff}
@keyframes sk-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.sk-block,.sk-line,.sk-chip{animation:none}}

/* A9.1: before the first render the footer is a padded box with no children; it sat in the first paint and was pushed away when the app rendered (CLS). */
#footer:not(:has(*)){display:none}
/* A9.4 responsive layer. Loaded after foundation.css. Replaces the old circular Shop hero and the full-screen red mobile menu, and
   holds the header / floating-action / shop-toolbar / brand-strip fixes. Plain CSS, no framework, no external asset. */

/* ------------------------------------------------------------------ PAGE HERO (Shop, Brands, Delivery, About, Contact, pending frames) */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4vw, 52px) 0 clamp(30px, 4.2vw, 56px);
  background: radial-gradient(70% 120% at 100% 0%, rgba(223, 17, 27, .2), rgba(223, 17, 27, 0) 62%), var(--black);
  color: #fff;
}
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}
.page-hero-copy { min-width: 0; }
.page-hero .bread { margin-bottom: 14px; flex-wrap: wrap; }
.page-hero .eyebrow { color: #ff6e75; }
.page-hero .h2 {
  max-width: none;
  margin: 10px 0 14px;
  font-size: clamp(32px, 9vw, 46px);
  overflow-wrap: break-word;
}
.page-hero .lead {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(16px, 4.2vw, 18px);
  color: #c3c5ca;
}
/* The media is a rounded rectangle with a fixed aspect ratio (no stretching, no layout shift); the crop is steered per breakpoint with --hero-pos
   so the building, the MYZ sign and the entrance of shop-hero-v2 stay in frame. */
.page-hero-media {
  --hero-pos: 70% 40%;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #14151a;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 60px -26px rgba(0, 0, 0, .85);
}
.page-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos);
}
/* Compact split: tablets, laptops and landscape phones. Copy 44 %, media 56 %. */
@media (min-width: 720px), (orientation: landscape) and (min-width: 560px) and (max-height: 520px) {
  .page-hero { padding: clamp(26px, 3.4vw, 48px) 0 clamp(28px, 3.6vw, 52px); }
  .page-hero-grid { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: clamp(22px, 4vw, 64px); }
  .page-hero .h2 { font-size: clamp(30px, 4.2vw, 60px); }
  .page-hero .lead { font-size: clamp(15px, 1.7vw, 20px); }
  .page-hero-media { --hero-pos: 66% 40%; aspect-ratio: 16 / 9; border-radius: clamp(16px, 2vw, 24px); }
}
@media (min-width: 1100px) {
  .page-hero-media { --hero-pos: 68% 36%; aspect-ratio: 2 / 1; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .page-hero { padding: 20px 0 24px; }
  .page-hero .h2 { font-size: clamp(26px, 4vw, 40px); margin: 6px 0 8px; }
  .page-hero .lead { font-size: 14px; }
  .page-hero .bread { margin-bottom: 8px; }
}

/* ------------------------------------------------------------------ MOBILE NAVIGATION DRAWER */
.mobileNav {
  position: fixed;
  inset: 0;
  z-index: 2600;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .4s;
}
.mobileNav.open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mnav-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 9, .64);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s ease;
}
.mobileNav.open .mnav-scrim { opacity: 1; }
.mnav-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #fff;
  background: radial-gradient(120% 55% at 100% 0%, rgba(223, 17, 27, .5), rgba(223, 17, 27, 0) 62%), radial-gradient(90% 40% at 0% 100%, rgba(223, 17, 27, .16), rgba(223, 17, 27, 0) 70%), linear-gradient(180deg, #17181d, #0b0c0f);
  border-left: 1px solid rgba(255, 255, 255, .09);
  box-shadow: -28px 0 70px rgba(0, 0, 0, .5);
  transform: translateX(104%);
  transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}
.mobileNav.open .mnav-panel { transform: none; }
.mnav-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.mnav-logo { display: flex; align-items: center; width: 112px; min-height: 44px; }
.mnav-logo picture, .mnav-logo img { display: block; width: 100%; height: auto; }
.mobileClose {
  position: static;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.mobileClose svg { width: 20px; height: 20px; }
.mobileClose:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.mnav-primary, .mnav-secondary { display: grid; }
.mnav-primary { gap: 2px; }
.mnav-primary a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 12px 0 14px;
  border-radius: 14px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .9);
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .32s ease, transform .38s cubic-bezier(.16, 1, .3, 1), background .2s;
}
.mnav-primary a::after { content: "›"; font-size: 22px; line-height: 1; color: rgba(255, 255, 255, .38); }
.mnav-primary a:hover { background: rgba(255, 255, 255, .07); }
.mnav-primary a[aria-current="page"] { background: linear-gradient(90deg, rgba(223, 17, 27, .34), rgba(223, 17, 27, .06)); color: #fff; }
.mnav-primary a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--red2);
}
.mnav-primary a[aria-current="page"]::after { color: #ff6e75; }
.mnav-secondary { grid-template-columns: 1fr 1fr; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity .32s ease .24s, transform .38s cubic-bezier(.16, 1, .3, 1) .24s; }
.mnav-secondary a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.mnav-secondary a:hover { background: rgba(255, 255, 255, .11); }
.mnav-secondary a[aria-current="page"] { border-color: var(--red2); background: rgba(223, 17, 27, .22); }
.mnav-info { margin: auto 0 0; padding-top: 8px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .58); opacity: 0; transition: opacity .32s ease .3s; }
.mobileNav.open .mnav-primary a { opacity: 1; transform: none; }
.mobileNav.open .mnav-primary a:nth-child(1) { transition-delay: .04s; }
.mobileNav.open .mnav-primary a:nth-child(2) { transition-delay: .08s; }
.mobileNav.open .mnav-primary a:nth-child(3) { transition-delay: .12s; }
.mobileNav.open .mnav-primary a:nth-child(4) { transition-delay: .16s; }
.mobileNav.open .mnav-primary a:nth-child(5) { transition-delay: .2s; }
.mobileNav.open .mnav-primary a:nth-child(6) { transition-delay: .24s; }
.mobileNav.open .mnav-secondary { opacity: 1; transform: none; }
.mobileNav.open .mnav-info { opacity: 1; }
.mnav-panel a:focus-visible, .mnav-panel button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (min-width: 1181px) { .mobileNav { display: none; } }
@media (max-height: 520px) {
  .mnav-panel { gap: 10px; }
  .mnav-top { min-height: 48px; }
  .mnav-primary a { min-height: 44px; font-size: 17px; }
  .mnav-info { display: none; }
}
/* The body scroll lock is applied by toggleMobile (body overflow + this class on <html>). */
html.nav-open { overflow: hidden; }

/* ------------------------------------------------------------------ FLOATING WHATSAPP / ASSISTANT */
.comm-stack {
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  gap: 12px;
  transition: opacity .2s ease, visibility 0s linear 0s;
}
.ai-panel { transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .3s cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s; }
/* Suspended while the navigation drawer is open, restored on close (nothing is removed or disabled permanently). */
html.nav-open .comm-stack,
html.nav-open .ai-panel { opacity: 0; visibility: hidden; pointer-events: none; }
html.nav-open .comm-stack { transition: opacity .15s ease, visibility 0s linear .15s; }
/* The assistant panel sits above the AI button, where the WhatsApp button would cover its send box: that button steps aside while the panel is open. */
body:has(.ai-panel.open) .wa-btn { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); }
.ai-panel {
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 58px + 14px);
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
}
@media (max-width: 760px) {
  .comm-stack { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); gap: 12px; }
  .comm-btn { width: 52px; height: 52px; border-radius: 17px; }
  .comm-btn svg { width: 25px; height: 25px; }
  .ai-panel {
    right: max(10px, env(safe-area-inset-right));
    left: max(10px, env(safe-area-inset-left));
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 52px + 12px);
    width: auto;
    height: min(610px, calc(100vh - 160px));
    height: min(610px, calc(100dvh - 160px));
    max-height: none;
  }
  /* 16px keeps iOS from zooming the page when the message box is focused. */
  .ai-inputrow input { font-size: 16px; }
  .ai-chips button { min-height: 38px; }
  /* Room under the last content so the floating buttons never cover the footer legal line or the last controls. */
  .footer { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}
@media (max-width: 400px) {
  /* Narrow phones: a tidy 3 + 2 grid instead of a lone orphan chip. */
  .ai-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ai-chips button { padding: 0 6px; }
}

/* ------------------------------------------------------------------ HEADER */
.header-inner { min-width: 0; }
.logo { flex: none; }
@media (max-width: 1180px) {
  .header-inner { grid-template-columns: auto minmax(0, 1fr); }
  .header-actions { justify-self: end; }
}
@media (max-width: 900px) {
  .header-actions { gap: 6px; }
  .header-actions .iconBtn { width: 44px; height: 44px; }
}
@media (max-width: 480px) {
  .header-inner { width: calc(100% - 20px); gap: 6px; }
  .logo { width: 104px; height: 42px; }
  .header-actions { gap: 2px; }
  .header-actions .iconBtn { width: 44px; height: 44px; }
  .header-actions .iconBtn svg { width: 18px; height: 18px; }
}
@media (max-width: 340px) {
  .header-inner { width: calc(100% - 12px); }
  .logo { width: 92px; height: 38px; }
}
.iconBtn:focus-visible, .nav a:focus-visible, .logo:focus-visible, .btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ------------------------------------------------------------------ SHOP FILTER / SEARCH / SORT */
@media (max-width: 620px) {
  .catalogue-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; }
  .catalogue-toolbar .left { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .catalogue-toolbar .resultCount { grid-column: 1; grid-row: 2; min-width: 0; }
  .catalogue-toolbar .select { grid-column: 2; grid-row: 2; width: auto !important; max-width: 100%; }
  .catalogue-toolbar .input, .catalogue-toolbar .select, .catalogue-toolbar .mobileFilter { min-height: 46px; }
  .catalogue-toolbar .mobileFilter { flex: none; }
}

/* ------------------------------------------------------------------ BRAND STRIP */
/* brand-strip.css loads after this file, so these rules carry an extra selector level instead of relying on order. */
body .brands { max-width: 100%; }
body .brands .imgee { object-position: center; }
@media (prefers-reduced-motion: reduce) {
  /* No movement: the strip becomes a plain, swipeable row (an intentional internal horizontal scroller) without the duplicated, aria-hidden copies. */
  body .brands { overflow-x: auto; scrollbar-width: none; }
  body .brands::-webkit-scrollbar { display: none; }
  body .brands .brand-logo-track { animation: none; will-change: auto; }
  body .brands .brand-logo-track [aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------------------------ MOTION */
@media (prefers-reduced-motion: reduce) {
  .mobileNav, .mobileNav *, .mnav-panel, .mnav-scrim, .comm-stack, .ai-panel { transition-duration: 0s !important; transition-delay: 0s !important; }
  .mnav-primary a, .mnav-secondary { transform: none !important; }
  .mnav-panel { transform: none; opacity: 0; }
  .mobileNav.open .mnav-panel { opacity: 1; }
}

   .brands {
     display:block;
     position:relative;
     width:100%;
     padding:16px max(16px,3vw);
     background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,246,247,.96),rgba(255,255,255,.92));
     border-block:1px solid rgba(15,15,18,.08);
     overflow:hidden
   }
   .brand-logo-track {
     display:flex;
     align-items:center;
     gap:clamp(12px,2.8vw,38px);
     width:max-content;
     animation:brandLogoSlide 24s linear infinite;
     will-change:transform
   }
   .imgee {
     flex:0 0 clamp(118px,14vw,170px);
     width:clamp(118px,14vw,170px);
     height:70px;
     object-fit:contain;
     padding:10px 14px;
     border:1px solid rgba(15,15,18,.08);
     border-radius:18px;
     background:rgba(255,255,255,.76);
     box-shadow:0 10px 28px rgba(15,15,18,.06);
     transition:.3s transform,.3s box-shadow,.3s border-color
   }
   .imgee:hover {
     transform:translateY(-4px) rotate(-1deg);
     border-color:rgba(223,17,27,.28);
     box-shadow:0 16px 34px rgba(223,17,27,.12)
   }
   .brands:hover .brand-logo-track {
     animation-play-state:paused
   }
   @keyframes brandLogoSlide {
     from {
       transform:translateX(0)
     }
     to {
       transform:translateX(calc(-50% - clamp(6px,1.4vw,19px)))
     }
   }
   @media(max-width:620px) {
     .brands {
       padding:11px 12px
     }
     .brand-logo-track {
       gap:9px;
       animation-duration:22s
     }
     .imgee {
       flex-basis:112px;
       width:112px;
       height:54px;
       padding:7px 8px;
       border-radius:14px
     }
   }
  

/* =========================================================
   VIDEO SHOWCASE
========================================================= */

.video-showcase {
  --card-width: 230px;
  --card-gap: 22px;
  --arrow-size: 42px;

  position: relative;

  width: 100%;
  max-width: 920px;

  margin: 0 auto;

  padding:
    24px
    52px
    58px;

  box-sizing: border-box;

  overflow: hidden;

  isolation: isolate;
}


/* =========================================================
   VIEWPORT
========================================================= */

.video-viewport {
  position: relative;

  width: 100%;

  overflow: hidden;

  border-radius: 24px;
}


/*
   Very subtle edge fade.

   It makes the centre video feel more intentional without
   placing any layer over the actual video controls.
*/

.video-viewport::before,
.video-viewport::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  width: 30px;

  z-index: 15;

  pointer-events: none;
}

.video-viewport::before {
  left: 0;

  background:
    linear-gradient(
      to right,
      rgba(255,255,255,.65),
      rgba(255,255,255,0)
    );
}

.video-viewport::after {
  right: 0;

  background:
    linear-gradient(
      to left,
      rgba(255,255,255,.65),
      rgba(255,255,255,0)
    );
}


/* =========================================================
   VIDEO TRACK
========================================================= */

.video-track {
  display: flex;

  align-items: center;

  gap: var(--card-gap);

  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;

  scroll-snap-type: x mandatory;

  scrollbar-width: none;

  overscroll-behavior-x: contain;

  -webkit-overflow-scrolling: touch;

  padding:
    26px
    calc(50% - (var(--card-width) / 2));

  box-sizing: border-box;
}

.video-track::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   VIDEO CARD
========================================================= */

.video-card {
  flex:
    0
    0
    var(--card-width);

  width: var(--card-width);

  scroll-snap-align: center;

  scroll-snap-stop: always;

  position: relative;

  transform:
    scale(.88);

  opacity: .42;

  filter:
    brightness(.72)
    saturate(.75);

  transition:
    transform .48s cubic-bezier(.22,1,.36,1),
    opacity .38s ease,
    filter .38s ease;

  will-change:
    transform,
    opacity,
    filter;
}


/* ACTIVE CARD */

.video-card.active {
  transform:
    scale(1);

  opacity: 1;

  filter:
    brightness(1)
    saturate(1);

  z-index: 5;
}


/* Slight side depth */

.video-card:not(.active) {
  cursor: pointer;
}


/* =========================================================
   VIDEO BOX
========================================================= */

.video-box {
  position: relative;

  width: 100%;

  /*
     9:16 keeps the original reel/social-video shape.
  */
  aspect-ratio: 9 / 16;

  overflow: hidden;

  border-radius: 20px;

  background: #050505;

  border:
    1px solid
    rgba(0,0,0,.08);

  box-shadow:
    0 8px 18px rgba(0,0,0,.08),
    0 20px 45px rgba(0,0,0,.15);

  transition:
    box-shadow .4s ease,
    border-color .4s ease;
}


.video-card.active .video-box {
  box-shadow:
    0 10px 22px rgba(0,0,0,.10),
    0 24px 55px rgba(0,0,0,.20);
}


/* =========================================================
   VIDEO
========================================================= */

/* A9.2 poster + click-to-load. The poster fills the same 9:16 box the video uses, so nothing shifts when it is swapped. */

.video-poster,
.video-poster img {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: inherit;
}

.video-poster {
  position: absolute;

  inset: 0;
}

.video-poster[hidden],
.video-play[hidden] {
  display: none;
}

.video-poster img {
  object-fit: cover;

  background: #0b0b0e;
}

.video-play {
  position: absolute;

  inset: 0;

  z-index: 6;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;

  border-radius: inherit;

  cursor: pointer;

  color: #fff;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,.34)
    );

  -webkit-tap-highlight-color: transparent;
}

.video-play-icon {
  display: block;

  width: 58px;
  height: 58px;

  border-radius: 50%;

  background:
    rgba(8,8,11,.72)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9.2 6.6v10.8c0 .5.5.8.9.5l8.1-5.4c.4-.3.4-.8 0-1.1L10.1 6.1c-.4-.3-.9 0-.9.5z'/%3E%3C/svg%3E")
    center / 30px 30px
    no-repeat;

  border:
    2px solid
    rgba(255,255,255,.88);

  box-shadow:
    0 8px 24px rgba(0,0,0,.35);

  transition:
    transform .22s cubic-bezier(.22,1,.36,1),
    background-color .22s ease;
}

.video-play:hover .video-play-icon {
  transform: scale(1.08);

  background-color: rgba(223,17,27,.9);
}

.video-play:focus-visible {
  outline:
    3px solid
    #fff;

  outline-offset: -6px;
}

.video-play:focus-visible .video-play-icon {
  background-color: rgba(223,17,27,.9);
}

.video-play:disabled {
  cursor: progress;
}

.video-card.video-loading .video-play-icon {
  animation: video-play-pulse 1s ease-in-out infinite;
}

@keyframes video-play-pulse {
  50% {
    opacity: .55;
  }
}

.video-error {
  position: absolute;

  left: 12px;
  right: 12px;
  bottom: 84px;

  z-index: 7;

  margin: 0;

  padding: 8px 10px;

  border-radius: 12px;

  color: #fff;

  background: rgba(0,0,0,.78);

  font-size: 11px;

  line-height: 1.35;

  text-align: center;

  pointer-events: none;
}

.video-error[hidden] {
  display: none;
}

.video-box video {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  /*
     IMPORTANT

     contain = entire video visible.

     Nothing gets cropped from the top or bottom.
  */
  object-fit: contain;

  object-position: center;

  background: #000;

  border-radius: inherit;
}


/* =========================================================
   TOP DESCRIPTION
========================================================= */

.video-description {
  position: absolute;

  /*
     Kept intentionally at the very top.

     Native play / timeline / volume / fullscreen controls
     remain completely unobstructed.
  */
  top: 10px;

  left: 10px;
  right: 10px;

  display: flex;

  justify-content: center;

  z-index: 20;

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(-8px)
    scale(.97);

  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .3s cubic-bezier(.22,1,.36,1);

  pointer-events: none;
}


/* Desktop hover */

@media (hover: hover) and (pointer: fine) {

  .video-card.active .video-box:hover .video-description {
    opacity: 1;

    visibility: visible;

    transform:
      translateY(0)
      scale(1);

    pointer-events: auto;
  }

}


/* =========================================================
   DESCRIPTION LINK
========================================================= */

.video-description a {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  max-width: calc(100% - 8px);

  padding:
    7px
    10px;

  box-sizing: border-box;

  border-radius: 999px;

  color: #fff;

  background:
    rgba(0,0,0,.68);

  border:
    1px solid
    rgba(255,255,255,.16);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  text-decoration: none;

  text-align: center;

  font-family:
    inherit;

  font-size: 9.5px;

  line-height: 1.25;

  font-weight: 600;

  letter-spacing: .01em;

  box-shadow:
    0 6px 18px rgba(0,0,0,.22);

  transition:
    background .2s ease,
    transform .2s ease,
    border-color .2s ease;
}


.video-description a:hover {
  background:
    rgba(0,0,0,.9);

  border-color:
    rgba(255,255,255,.28);

  transform:
    translateY(-1px);
}


.instagram-icon {
  display: inline-flex;
background: linear-gradient(
    135deg,
    #833ab4,
    #fd1d1d,
    #fcb045
  );
  align-items: center;

  justify-content: center;

  width: 15px;
  height: 15px;

  flex:
    0
    0
    15px;

  border:
    1.5px solid
    rgba(255,255,255,.88);

  border-radius: 50%;

  font-size: 9px;

  line-height: 1;
}


/* =========================================================
   CAROUSEL ARROWS
========================================================= */

.carousel-arrow {
  position: absolute;

  top: 50%;

  width: var(--arrow-size);
  height: var(--arrow-size);

  padding: 0;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 40;

  color: #fff;

  background:
    rgba(10,10,10,.82);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  font-size: 17px;

  font-weight: 400;

  line-height: 1;

  box-shadow:
    0 7px 22px rgba(0,0,0,.18);

  transform:
    translateY(-50%);

  transition:
    transform .22s cubic-bezier(.22,1,.36,1),
    background .22s ease,
    box-shadow .22s ease;
}


.carousel-arrow:hover {
  background:
    rgba(0,0,0,.96);

  transform:
    translateY(-50%)
    scale(1.08);

  box-shadow:
    0 10px 28px rgba(0,0,0,.25);
}


.carousel-arrow:active {
  transform:
    translateY(-50%)
    scale(.94);
}


.carousel-arrow:focus-visible {
  outline:
    3px solid
    rgba(0,0,0,.2);

  outline-offset: 3px;
}


.carousel-prev {
  left: 4px;
}


.carousel-next {
  right: 4px;
}


/* =========================================================
   DOT NAVIGATION
========================================================= */

.carousel-dots {
  position: absolute;

  left: 50%;

  bottom: 13px;

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  z-index: 40;
}


.dot {
  width: 7px;
  height: 7px;

  min-width: 7px;

  padding: 0;

  border: none;

  border-radius: 999px;

  background:
    rgba(0,0,0,.22);

  cursor: pointer;

  transition:
    width .3s cubic-bezier(.22,1,.36,1),
    background .25s ease,
    transform .2s ease;
}


.dot:hover {
  background:
    rgba(0,0,0,.5);

  transform:
    scale(1.15);
}


.dot.active {
  width: 25px;

  background: #111;

  transform: none;
}


.dot:focus-visible {
  outline:
    2px solid
    rgba(0,0,0,.4);

  outline-offset: 3px;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

  .video-showcase {
    --card-width: 225px;
    --card-gap: 20px;

    max-width: 900px;

    padding-left: 54px;
    padding-right: 54px;
  }

}


/* =========================================================
   NORMAL DESKTOP / LAPTOP
========================================================= */

@media (min-width: 901px) and (max-width: 1199px) {

  .video-showcase {
    --card-width: 215px;
    --card-gap: 18px;

    max-width: 820px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 601px) and (max-width: 900px) {

  .video-showcase {
    --card-width: 225px;
    --card-gap: 17px;
    --arrow-size: 40px;

    max-width: 720px;

    padding:
      20px
      45px
      55px;
  }


  .video-track {
    padding-top: 22px;
    padding-bottom: 22px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .video-showcase {
    --card-width: min(68vw, 245px);
    --card-gap: 14px;
    --arrow-size: 35px;

    width: 100%;

    max-width: 100%;

    padding:
      12px
      28px
      48px;
  }


  .video-viewport {
    border-radius: 18px;
  }


  .video-viewport::before,
  .video-viewport::after {
    width: 14px;
  }


  .video-track {
    padding-top: 18px;
    padding-bottom: 18px;
  }


  .video-card {
    transform:
      scale(.9);

    opacity: .45;

    filter:
      brightness(.77)
      saturate(.82);
  }


  .video-card.active {
    transform:
      scale(1);

    opacity: 1;

    filter:
      brightness(1)
      saturate(1);
  }


  .video-box {
    border-radius: 17px;
  }


  /*
     On touch screens there is no reliable hover.

     Show the Instagram link only on the active card,
     still at the TOP of the video.
  */

  .video-card.active .video-description {
    top: 8px;

    left: 7px;
    right: 7px;

    opacity: 1;

    visibility: visible;

    transform: none;

    pointer-events: auto;
  }


  .video-description a {
    max-width: 92%;

    padding:
      6px
      9px;

    font-size: 8.5px;

    background:
      rgba(0,0,0,.66);
  }


  .instagram-icon {
    width: 13px;
    height: 13px;

    flex-basis: 13px;

    font-size: 8px;
  }


  .carousel-prev {
    left: 0;
  }


  .carousel-next {
    right: 0;
  }


  .carousel-dots {
    bottom: 11px;
  }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

  .video-showcase {
    --card-width: 67vw;

    padding-left: 25px;
    padding-right: 25px;
  }


  .video-description a {
    font-size: 8px;

    padding:
      5px
      7px;
  }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .video-track {
    scroll-behavior: auto;
  }


  .video-card,
  .video-description,
  .carousel-arrow,
  .dot,
  .video-play-icon {
    transition: none;
  }

  .video-card.video-loading .video-play-icon {
    animation: none;
  }

}