/* AOC brand system — ported 1:1 from approved preview v2. Scoped under .aoc-scope. Dark world = .aoc-dark on wrapper. */
.aoc-scope{--paper:#FBF9F4;--paper-2:#F4EEE2;--card:#FFFFFF;
  --ink:#1C1A16;--ink-2:#4A4438;--muted:#7A7163;--line:#E4DCCC;--line-2:#D5CAB4;
  --a1:#E89A2C;--a2:#E0492C;--a3:#3F7D4E;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,monospace;
  --r:14px;--pill:30px;--maxw:1180px;--pad:clamp(18px,4.5vw,24px);}.aoc-scope,.aoc-scope *{margin:0;padding:0;box-sizing:border-box;}.aoc-scope{scroll-behavior:smooth;}.aoc-scope{font-family:var(--body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;font-size:15px;}.aoc-scope a{color:inherit;text-decoration:none;}.aoc-scope img{max-width:100%;display:block;}.aoc-scope button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}.aoc-scope input,.aoc-scope select,.aoc-scope textarea{font-family:inherit;}.aoc-scope :focus-visible{outline:2px solid var(--a2);outline-offset:2px;border-radius:3px;}.aoc-scope h1,.aoc-scope h2,.aoc-scope h3.disp{font-family:var(--disp);letter-spacing:-.03em;line-height:1.05;font-weight:700;}.aoc-scope .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}.aoc-scope .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--a2);font-weight:500;}.aoc-scope .price{font-family:var(--mono);font-weight:500;}.aoc-scope .crop{position:relative;}.aoc-scope .crop::before,.aoc-scope .crop::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;z-index:2;}.aoc-scope .crop::before{top:-7px;left:-7px;border-top:1.5px solid var(--line-2);border-left:1.5px solid var(--line-2);}.aoc-scope .crop::after{bottom:-7px;right:-7px;border-bottom:1.5px solid var(--line-2);border-right:1.5px solid var(--line-2);}.aoc-scope .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14.5px;padding:13px 24px;border-radius:var(--pill);background:var(--ink);color:var(--paper);transition:transform .15s,background .15s,filter .15s;white-space:nowrap;}.aoc-scope .btn:hover{transform:translateY(-1px);}.aoc-scope .btn-o{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}.aoc-scope .btn-o:hover{background:var(--ink);color:var(--paper);}.aoc-scope .btn-a{background:var(--a2);color:#fff;}.aoc-scope .btn-a:hover{filter:brightness(1.06);}.aoc-scope .btn-wa{background:#25D366;color:#0b3d20;}.aoc-scope .btn-lg{padding:15px 28px;font-size:15.5px;}.aoc-scope .btn-block{width:100%;}.aoc-scope .arrow{transition:transform .15s;}.aoc-scope .btn:hover .arrow{transform:translateX(3px);}.aoc-scope .link{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink);border-bottom:1.5px solid var(--a2);padding-bottom:2px;cursor:pointer;transition:.14s;white-space:nowrap;}.aoc-scope .link:hover{color:var(--a2);}.aoc-scope .pv{position:sticky;top:0;z-index:1200;background:#211E19;color:#EDE6D8;border-bottom:1px solid #000;}.aoc-scope .pv-bar{display:flex;align-items:center;gap:12px;max-width:1320px;margin:0 auto;padding:9px 14px;}.aoc-scope .pv-dots{display:flex;gap:6px;}.aoc-scope .pv-dots i{width:11px;height:11px;border-radius:50%;display:block;}.aoc-scope .pv-dots i:nth-child(1){background:#F4655B;}.aoc-scope .pv-dots i:nth-child(2){background:#F5BD4F;}.aoc-scope .pv-dots i:nth-child(3){background:#5BC466;}.aoc-scope .pv-url{flex:1;background:#15130F;border-radius:8px;padding:6px 13px;font-family:var(--mono);font-size:12px;color:#A89E8C;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.aoc-scope .pv-url b{color:#EDE6D8;font-weight:500;}.aoc-scope .pv-mode{font-family:var(--mono);font-size:10.5px;padding:3px 9px;border-radius:20px;background:#15130F;color:#8C8270;}.aoc-scope .pv-mode b{color:var(--a1);}.aoc-scope .pv-tabs{display:flex;gap:2px;max-width:1320px;margin:0 auto;padding:0 14px;overflow-x:auto;}.aoc-scope .pv-tab{font-family:var(--mono);font-size:11.5px;padding:8px 12px;border-radius:8px 8px 0 0;color:#A89E8C;white-space:nowrap;transition:.15s;}.aoc-scope .pv-tab:hover{color:#EDE6D8;}.aoc-scope .pv-tab.on{background:var(--paper);color:var(--ink);font-weight:600;}.aoc-scope.aoc-dark .pv-tab.on{background:#0C0C0E;color:#EDE7DA;}.aoc-scope .head{position:sticky;top:0;z-index:400;background:var(--paper);border-bottom:1px solid var(--line);}.aoc-scope .head-in{max-width:var(--maxw);margin:0 auto;padding:12px var(--pad);display:flex;align-items:center;gap:18px;}.aoc-scope .logo{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0;}.aoc-scope .logo .mk{width:32px;height:32px;border-radius:8px;background:var(--ink);position:relative;}.aoc-scope .logo .mk::before,.aoc-scope .logo .mk::after{content:"";position:absolute;background:var(--a1);left:50%;top:50%;}.aoc-scope .logo .mk::before{width:16px;height:1.5px;transform:translate(-50%,-50%);}.aoc-scope .logo .mk::after{width:1.5px;height:16px;transform:translate(-50%,-50%);}.aoc-scope .logo .mk i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;border:1.5px solid var(--a1);background:var(--ink);}.aoc-scope .logo .wm{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-.02em;line-height:1;}.aoc-scope .logo .wm small{display:block;font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:3px;}.aoc-scope .nav{display:flex;align-items:center;gap:2px;}.aoc-scope .nav a{font-size:14px;font-weight:500;color:var(--ink-2);padding:9px 12px;border-radius:8px;transition:.13s;white-space:nowrap;cursor:pointer;}.aoc-scope .nav a:hover,.aoc-scope .nav a.on{color:var(--ink);background:var(--paper-2);}.aoc-scope .head-r{display:flex;align-items:center;gap:10px;margin-left:auto;}.aoc-scope .seg{display:inline-flex;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--pill);padding:3px;font-family:var(--mono);font-size:11.5px;}.aoc-scope .seg button{padding:6px 14px;border-radius:var(--pill);color:var(--muted);font-weight:500;transition:.14s;white-space:nowrap;}.aoc-scope .seg button.on{background:var(--ink);color:var(--paper);}.aoc-scope .icn{width:20px;height:20px;color:var(--ink-2);}.aoc-scope .icnbtn{display:flex;align-items:center;justify-content:center;position:relative;padding:7px;border-radius:8px;transition:.13s;}.aoc-scope .icnbtn:hover{background:var(--paper-2);}.aoc-scope .cartdot{position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 3px;background:var(--a2);color:#fff;border-radius:9px;font-family:var(--mono);font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:600;}.aoc-scope .burger{display:none;}.aoc-scope .head-row2{display:none;}.aoc-scope.aoc-dark .head{background:#0C0C0E;border-bottom-color:#26262B;}.aoc-scope.aoc-dark .logo .wm{color:#EDE7DA;}.aoc-scope.aoc-dark .logo .mk{background:#17171B;}.aoc-scope.aoc-dark .nav a{color:#B7B2A6;}.aoc-scope.aoc-dark .nav a:hover,.aoc-scope.aoc-dark .nav a.on{color:#fff;background:#1A1A1E;}.aoc-scope.aoc-dark .seg{background:#17171B;border-color:#2A2A30;}.aoc-scope.aoc-dark .icn{color:#B7B2A6;}.aoc-scope.aoc-dark .icnbtn:hover{background:#1A1A1E;}.aoc-scope.aoc-dark .head-row2{background:#0C0C0E;border-top-color:#1E1E24;}.aoc-scope .crumb{max-width:var(--maxw);margin:0 auto;padding:16px var(--pad) 0;font-family:var(--mono);font-size:12px;color:var(--muted);}.aoc-scope .crumb a{cursor:pointer;}.aoc-scope .crumb a:hover{color:var(--ink);}.aoc-scope .crumb span{color:var(--line-2);margin:0 7px;}.aoc-scope .crumb b{color:var(--ink);font-weight:500;}.aoc-scope.aoc-dark .crumb b{color:#EDE7DA;}.aoc-scope .sec{padding:clamp(46px,7vw,80px) 0;}.aoc-scope .sh{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:clamp(22px,4vw,34px);}.aoc-scope .sh h2{font-size:clamp(24px,3.3vw,36px);margin-top:10px;}.aoc-scope .sh .lead{color:var(--muted);font-size:14.5px;margin-top:8px;max-width:400px;}.aoc-scope .hero{padding:clamp(34px,5vw,60px) 0 clamp(40px,6vw,66px);}.aoc-scope .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center;}.aoc-scope .hero h1{font-size:clamp(36px,5.8vw,64px);font-weight:800;margin:16px 0 0;letter-spacing:-.04em;}.aoc-scope .hero h1 em{font-style:normal;color:var(--a2);}.aoc-scope .hero .sub{font-size:clamp(15.5px,1.7vw,18px);color:var(--ink-2);max-width:400px;margin:20px 0 26px;}.aoc-scope .hero-cta{display:flex;gap:12px;flex-wrap:wrap;}.aoc-scope .hero-note{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:22px;line-height:1.7;}.aoc-scope .hero-note b{color:var(--ink);font-weight:500;}.aoc-scope .hero-art{position:relative;aspect-ratio:1/1;max-width:420px;margin-left:auto;width:100%;background:var(--paper-2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;}.aoc-scope .hero-art .tote{width:56%;filter:drop-shadow(0 22px 38px rgba(28,26,22,.18));}.aoc-scope .hero-art .tag{position:absolute;left:18px;bottom:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--pill);padding:8px 14px;font-family:var(--mono);font-size:11.5px;display:flex;gap:10px;align-items:center;}.aoc-scope .hero-art .tag .price{color:var(--a2);}.aoc-scope .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}.aoc-scope .trust-in{max-width:var(--maxw);margin:0 auto;padding:15px var(--pad);display:flex;gap:26px;flex-wrap:wrap;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--muted);}.aoc-scope .trust-in b{color:var(--ink);font-weight:500;}.aoc-scope .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}.aoc-scope .cat{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:22px 20px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;transition:.18s;cursor:pointer;overflow:hidden;}.aoc-scope .cat:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 16px 34px -24px rgba(28,26,22,.5);}.aoc-scope .cat .glyph{height:44px;display:flex;align-items:center;}.aoc-scope .cat .cn{font-weight:600;font-size:15px;}.aoc-scope .cat .ck{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:3px;display:block;}.aoc-scope .cat .go{position:absolute;top:18px;right:18px;font-family:var(--mono);color:var(--line-2);font-size:16px;transition:.16s;}.aoc-scope .cat:hover .go{color:var(--a2);transform:translate(2px,-2px);}.aoc-scope .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3.5vw,40px);}.aoc-scope .step .n{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--a2);letter-spacing:.1em;}.aoc-scope .step h4{font-weight:700;font-size:17px;margin:11px 0 7px;}.aoc-scope .step p{font-size:14px;color:var(--muted);line-height:1.6;}.aoc-scope .ig{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}.aoc-scope .igtile{aspect-ratio:1/1;border-radius:11px;overflow:hidden;position:relative;background:var(--paper-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.16s;}.aoc-scope .igtile:hover{transform:scale(1.02);}.aoc-scope .igtile .hd{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-family:var(--mono);font-size:10px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));}.aoc-scope .ig-note{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:12px;text-align:center;}.aoc-scope .biz{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:clamp(28px,4.5vw,52px);display:grid;grid-template-columns:1.25fr 1fr;gap:32px;align-items:center;}.aoc-scope .biz .eyebrow{color:var(--a1);}.aoc-scope .biz h2{font-size:clamp(23px,3vw,33px);margin:11px 0 13px;color:var(--paper);}.aoc-scope .biz p{opacity:.78;font-size:14.5px;max-width:440px;line-height:1.6;}.aoc-scope .biz-r{display:flex;flex-direction:column;gap:11px;}.aoc-scope .biz-r .row{display:flex;gap:11px;align-items:center;font-family:var(--mono);font-size:12.5px;opacity:.86;}.aoc-scope .biz-r .row b{color:var(--a1);font-weight:600;}.aoc-scope .biz .btn-gold{background:var(--a1);color:var(--ink);margin-top:6px;}.aoc-scope .foot{background:#15130F;color:#C9C0AE;}.aoc-scope .foot-top{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5vw,56px) var(--pad) 32px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px;}.aoc-scope .foot .logo .wm{color:#F3ECDD;}.aoc-scope .foot .logo .mk{background:#000;}.aoc-scope .foot .bl{font-size:13.5px;opacity:.6;max-width:250px;line-height:1.6;margin-top:15px;}.aoc-scope .foot h4{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#8C8270;margin-bottom:13px;}.aoc-scope .foot li{list-style:none;font-size:13.5px;margin-bottom:9px;opacity:.82;transition:.13s;cursor:pointer;}.aoc-scope .foot li:hover{opacity:1;color:var(--a1);}.aoc-scope .foot-bot{max-width:var(--maxw);margin:0 auto;padding:17px var(--pad);border-top:1px solid #2A271F;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:#8C8270;}.aoc-scope .foot-soc{display:flex;gap:8px;}.aoc-scope .foot-soc a{width:30px;height:30px;border:1px solid #33302A;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;}.aoc-scope .foot-soc a:hover{border-color:var(--a1);color:var(--a1);}.aoc-scope .foot-soc svg{width:15px;height:15px;}.aoc-scope .opts{display:flex;flex-direction:column;gap:16px;margin:20px 0;}.aoc-scope .opt .ol{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;display:flex;gap:6px;}.aoc-scope .opt .ol b{color:var(--ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:12.5px;}.aoc-scope.aoc-dark .opt .ol b{color:#EDE7DA;}.aoc-scope .pills{display:flex;gap:8px;flex-wrap:wrap;}.aoc-scope .pills button{padding:9px 15px;border-radius:9px;border:1.5px solid var(--line-2);background:var(--card);font-size:13.5px;font-weight:500;color:var(--ink-2);transition:.13s;}.aoc-scope .pills button.on{border-color:var(--a2);background:var(--a2);color:#fff;font-weight:600;}.aoc-scope.aoc-dark .pills button{background:#131316;border-color:#2E2E36;color:#B7B2A6;}.aoc-scope .swatches{display:flex;gap:9px;}.aoc-scope .swatches i{width:30px;height:30px;border-radius:50%;display:block;cursor:pointer;box-shadow:0 0 0 1px var(--line-2);transition:.13s;}.aoc-scope .swatches i.on{box-shadow:0 0 0 2px var(--ink);}.aoc-scope.aoc-dark .swatches i.on{box-shadow:0 0 0 2px #fff;}.aoc-scope .selc{width:100%;max-width:340px;padding:11px 34px 11px 13px;border:1.5px solid var(--line-2);border-radius:9px;font-size:14px;color:var(--ink);background:var(--paper);-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237A7163' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;}.aoc-scope .selc:focus{border-color:var(--a2);outline:none;}.aoc-scope.aoc-dark .selc{background:#131316;border-color:#2E2E36;color:#EDE7DA;}.aoc-scope .qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:9px;overflow:hidden;}.aoc-scope.aoc-dark .qty{border-color:#2E2E36;}.aoc-scope .qty button{width:40px;height:42px;font-size:18px;color:var(--ink-2);transition:.13s;}.aoc-scope .qty button:hover{background:var(--paper-2);}.aoc-scope .qty input{width:50px;height:42px;text-align:center;border:none;border-left:1.5px solid var(--line-2);border-right:1.5px solid var(--line-2);font-family:var(--mono);font-size:15px;background:var(--card);color:var(--ink);}.aoc-scope.aoc-dark .qty input{background:#131316;color:#EDE7DA;border-color:#2E2E36;}.aoc-scope .pp-price{font-family:var(--mono);font-weight:600;font-size:clamp(24px,3vw,30px);letter-spacing:-.02em;margin:8px 0 2px;}.aoc-scope .pp-price small{font-size:14px;color:var(--muted);font-weight:400;}.aoc-scope .pp-madeorder{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5;}.aoc-scope .pp-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0;}.aoc-scope .pp-actions .btn{flex:1;min-width:170px;}.aoc-scope .pd-ship{border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;background:var(--card);display:flex;flex-direction:column;gap:9px;}.aoc-scope.aoc-dark .pd-ship{background:#131316;border-color:#24242B;}.aoc-scope .pd-ship .r{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);}.aoc-scope .pd-ship .r .ic{color:var(--a3);flex-shrink:0;margin-top:1px;}.aoc-scope .pd-ship .r b{font-weight:600;color:var(--ink);}.aoc-scope.aoc-dark .pd-ship .r{color:#B7B2A6;}.aoc-scope.aoc-dark .pd-ship .r b{color:#EDE7DA;}.aoc-scope .pp-rate{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted);}.aoc-scope .stars{color:var(--a1);letter-spacing:2px;font-size:14px;}.aoc-scope .pd-lower{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}.aoc-scope .pd-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,52px);padding-top:clamp(36px,5vw,58px);border-top:1px solid var(--line);margin-top:clamp(18px,3.5vw,36px);}.aoc-scope.aoc-dark .pd-cols{border-color:#24242B;}.aoc-scope .pd-cols h3{font-weight:700;font-size:20px;letter-spacing:-.02em;margin-bottom:15px;}.aoc-scope .spec{font-family:var(--mono);font-size:13px;}.aoc-scope .spec .r{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);}.aoc-scope.aoc-dark .spec .r{border-color:#24242B;}.aoc-scope .spec .r span:first-child{color:var(--muted);}.aoc-scope .spec .r span:last-child{color:var(--ink);font-weight:500;}.aoc-scope.aoc-dark .spec .r span:last-child{color:#EDE7DA;}.aoc-scope .rev{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:12px;background:var(--card);}.aoc-scope.aoc-dark .rev{background:#131316;border-color:#24242B;}.aoc-scope .rev .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}.aoc-scope .rev .who{font-weight:600;font-size:14px;}.aoc-scope .rev .who small{font-family:var(--mono);font-size:10px;color:var(--muted);font-weight:400;display:block;margin-top:2px;}.aoc-scope .rev p{font-size:13.5px;color:var(--ink-2);line-height:1.55;}.aoc-scope.aoc-dark .rev p{color:#B7B2A6;}.aoc-scope .r-neon{width:100%;height:100%;background:#0A0A0C;display:flex;align-items:center;justify-content:center;}.aoc-scope .r-neon .w{font-family:var(--disp);font-style:italic;font-weight:700;font-size:clamp(20px,3.6vw,32px);text-align:center;line-height:1;}.aoc-scope .r-card{width:74%;height:47%;border-radius:8px;position:relative;overflow:hidden;box-shadow:0 14px 28px -16px rgba(0,0,0,.5);}.aoc-scope .r-card .fo{position:absolute;inset:0;padding:12px;display:flex;flex-direction:column;justify-content:space-between;}.aoc-scope .r-card .bn{font-family:var(--disp);font-weight:800;font-size:15px;background:linear-gradient(120deg,#E9D49A,#C9A24B,#F4E6BF,#A9842F);-webkit-background-clip:text;background-clip:text;color:transparent;}.aoc-scope .r-card .sm{font-family:var(--mono);font-size:8px;color:rgba(255,255,255,.72);letter-spacing:.04em;}.aoc-scope .r-sticker{width:64%;height:64%;background:#fff;border:2.5px dashed var(--line-2);border-radius:12px;display:flex;align-items:center;justify-content:center;transform:rotate(-4deg);box-shadow:0 8px 18px -10px rgba(0,0,0,.25);}.aoc-scope .r-sticker b{font-family:var(--disp);font-weight:800;font-size:18px;color:var(--a2);}.aoc-scope .r-decal{width:58%;height:64%;border:3px solid #4B4F6B;border-radius:8px 8px 24px 8px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;font-family:var(--disp);font-weight:700;font-size:13px;color:#4B4F6B;}.aoc-scope .r-acrylic{width:62%;height:62%;background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.25));border:1.5px solid rgba(201,162,75,.5);border-radius:8px;box-shadow:8px 8px 0 rgba(201,162,75,.14);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;color:#9A7A2F;font-size:15px;}.aoc-scope .r-wood{width:70%;height:56%;border-radius:6px;background:repeating-linear-gradient(90deg,#B07A43 0 5px,#9A6836 5px 10px,#A87340 10px 15px);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;color:#4A2F16;font-size:15px;box-shadow:inset 0 0 0 3px rgba(74,47,22,.25);}.aoc-scope .r-canvas{width:64%;height:58%;border:6px solid #fff;box-shadow:0 0 0 1.5px var(--line-2),0 12px 24px -12px rgba(0,0,0,.3);background:linear-gradient(135deg,#3F7D4E,#2C5C39);}.aoc-scope .r-banner{width:30%;height:76%;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--disp);font-weight:800;font-size:13px;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:2px;background:linear-gradient(#E0492C,#E89A2C);}.aoc-scope .r-tote{width:52%;height:66%;background:#F7F1E4;border-radius:5px 5px 8px 8px;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;}.aoc-scope .r-tote::before,.aoc-scope .r-tote::after{content:"";position:absolute;top:-15%;width:12%;height:22%;border:5px solid #E7DBC2;border-bottom:none;border-radius:12px 12px 0 0;}.aoc-scope .r-tote::before{left:22%;}.aoc-scope .r-tote::after{right:22%;}.aoc-scope .r-tote .m{font-family:var(--disp);font-weight:800;font-size:clamp(15px,2.4vw,20px);text-align:center;line-height:1;padding:0 6px;}.aoc-scope .r-qr{width:56%;height:56%;background:#fff;border:1.5px solid var(--line-2);border-radius:8px;background-image:linear-gradient(90deg,#1C1A16 2px,transparent 2px),linear-gradient(#1C1A16 2px,transparent 2px);background-size:8px 8px;}.aoc-scope .r-label{width:60%;height:60%;background:#fff;border:1.5px solid var(--line-2);border-radius:6px;display:grid;grid-template-rows:1fr 1fr 1fr;gap:3px;padding:8px;}.aoc-scope .r-label span{background:var(--paper-2);border-radius:3px;}.aoc-scope .pgrid{display:grid;gap:16px;}.aoc-scope .pgrid.c4{grid-template-columns:repeat(4,1fr);}.aoc-scope .pgrid.c3{grid-template-columns:repeat(3,1fr);}.aoc-scope .ptile{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);transition:.16s;cursor:pointer;display:flex;flex-direction:column;}.aoc-scope .ptile:hover{transform:translateY(-3px);box-shadow:0 16px 36px -26px rgba(28,26,22,.5);border-color:var(--line-2);}.aoc-scope .pimg{aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;background:var(--paper-2);overflow:hidden;}.aoc-scope .pbadge{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:9px;font-weight:600;padding:3px 8px;border-radius:5px;background:var(--ink);color:var(--paper);text-transform:uppercase;}.aoc-scope .pbadge.best{background:var(--a1);color:var(--ink);}.aoc-scope .pbadge.new{background:var(--a3);}.aoc-scope .pbody{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1;}.aoc-scope .pname{font-weight:600;font-size:14.5px;}.aoc-scope .ptheme{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:3px;}.aoc-scope .pfrom{font-family:var(--mono);font-size:13.5px;font-weight:500;margin-top:auto;padding-top:11px;}.aoc-scope .pfrom .q{color:var(--a2);}.aoc-scope.aoc-dark .ptile{background:#131316;border-color:#24242B;}.aoc-scope.aoc-dark .pimg{background:#0A0A0C;}.aoc-scope.aoc-dark .pname{color:#EDE7DA;}.aoc-scope .sg-hero{padding:clamp(40px,6vw,72px) 0;text-align:center;background:radial-gradient(circle at 78% 8%,rgba(255,61,165,.14),transparent 44%),radial-gradient(circle at 10% 92%,rgba(54,230,224,.12),transparent 46%);}.aoc-scope .sg-hero h1{font-family:var(--disp);font-style:italic;font-weight:700;font-size:clamp(48px,10vw,110px);line-height:.95;color:#36E6E0;text-shadow:0 0 10px rgba(54,230,224,.55),0 0 40px rgba(54,230,224,.3);margin:14px 0;}.aoc-scope .sg-hero h1 .pk{color:#FF3DA5;text-shadow:0 0 10px rgba(255,61,165,.55),0 0 40px rgba(255,61,165,.3);}.aoc-scope .sg-hero p{color:#B7B2A6;max-width:520px;margin:0 auto 22px;font-size:16px;}.aoc-scope .sg-dir{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;font-family:var(--mono);font-size:12.5px;color:#8C8C97;}.aoc-scope .sg-dir span{padding:4px 2px;}.aoc-scope .sg-dir a{color:#B7B2A6;cursor:pointer;}.aoc-scope .sg-dir a:hover{color:#36E6E0;}.aoc-scope .sg-feat{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;background:#131316;border:1px solid #24242B;border-radius:var(--r);padding:clamp(22px,3vw,40px);margin-bottom:40px;}.aoc-scope .sg-feat .big{aspect-ratio:16/10;background:#0A0A0C;border-radius:12px;display:flex;align-items:center;justify-content:center;}.aoc-scope .sg-feat .big .w{font-family:var(--disp);font-style:italic;font-weight:700;font-size:clamp(34px,6vw,64px);color:#FFB23E;text-shadow:0 0 10px #FFB23E,0 0 30px rgba(255,178,62,.5);}.aoc-scope .sg-feat h2{color:#fff;font-size:clamp(24px,3vw,32px);}.aoc-scope .sg-feat p{color:#9A96A0;font-size:14.5px;margin:12px 0 18px;line-height:1.6;}.aoc-scope .ncard{background:#131316;border:1px solid #24242B;border-radius:var(--r);overflow:hidden;cursor:pointer;transition:.16s;}.aoc-scope .ncard:hover{transform:translateY(-3px);border-color:#36E6E0;}.aoc-scope .ncard .nimg{aspect-ratio:4/3;background:#0A0A0C;display:flex;align-items:center;justify-content:center;}.aoc-scope .ncard .nb{padding:14px 15px;}.aoc-scope .ncard .nc{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#8C8C97;}.aoc-scope .ncard .nn{font-weight:600;font-size:14.5px;color:#EDE7DA;margin-top:4px;}.aoc-scope .ncard .nr{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-family:var(--mono);font-size:13px;}.aoc-scope .ncard .nr .p{color:#36E6E0;}.aoc-scope .cd-hero{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:clamp(30px,4vw,52px) 0;}.aoc-scope .cd-hero h1{font-size:clamp(38px,5.6vw,64px);font-weight:700;letter-spacing:-.03em;}.aoc-scope .cd-hero h1 em{font-style:italic;color:#1F5E47;}.aoc-scope .cd-hero .lead{font-size:16px;color:var(--ink-2);max-width:420px;margin:16px 0 22px;}.aoc-scope .cd-hero .micro{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:18px;display:flex;gap:18px;flex-wrap:wrap;}.aoc-scope .bc-stack{position:relative;height:300px;perspective:1100px;}.aoc-scope .bc{position:absolute;width:290px;height:172px;border-radius:11px;box-shadow:0 30px 50px -20px rgba(20,22,19,.5);overflow:hidden;}.aoc-scope .bc1{top:22px;left:24px;transform:rotateX(6deg) rotateY(-16deg) rotate(-3deg);background:linear-gradient(135deg,#1F5E47,#143D2F);}.aoc-scope .bc2{top:86px;left:104px;transform:rotateX(6deg) rotateY(-16deg) rotate(4deg);background:linear-gradient(135deg,#211E19,#3a352c);}.aoc-scope .bc .fo{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;justify-content:space-between;}.aoc-scope .bc .bn{font-family:var(--disp);font-weight:800;font-size:20px;background:linear-gradient(120deg,#E9D49A,#C9A24B,#F4E6BF,#A9842F);-webkit-background-clip:text;background-clip:text;color:transparent;}.aoc-scope .bc .sm{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.72);letter-spacing:.05em;}.aoc-scope .finband{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}.aoc-scope .fin{border:1px solid var(--line-2);border-radius:var(--r);padding:18px;background:var(--card);cursor:pointer;transition:.15s;}.aoc-scope .fin:hover{transform:translateY(-3px);box-shadow:0 16px 34px -24px rgba(28,26,22,.4);}.aoc-scope .fin .fs{height:96px;border-radius:9px;margin-bottom:13px;}.aoc-scope .fin h3{font-weight:700;font-size:16px;letter-spacing:-.01em;}.aoc-scope .fin p{font-size:12.5px;color:var(--muted);margin-top:4px;}.aoc-scope .fin .price{display:block;font-size:12.5px;margin-top:9px;color:#1F5E47;}.aoc-scope .foil-gold{background:linear-gradient(120deg,#E9D49A,#C9A24B,#F4E6BF,#A9842F);}.aoc-scope .foil-uv{background:linear-gradient(135deg,#2a2722,#48433a);}.aoc-scope .foil-cotton{background:#F4EEE0;box-shadow:inset 0 0 0 1px #E0D6C0;}.aoc-scope .foil-matte{background:#211E19;}.aoc-scope .foil-emer{background:linear-gradient(135deg,#1F5E47,#143D2F);}.aoc-scope .foil-die{background:repeating-linear-gradient(45deg,#EFE7D6 0 9px,#E3D8C0 9px 18px);}.aoc-scope .cd-corp{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:clamp(28px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;}.aoc-scope .cd-corp h2{color:var(--paper);font-size:clamp(23px,3vw,32px);}.aoc-scope .cd-corp p{opacity:.8;font-size:14.5px;margin:12px 0 0;line-height:1.6;}.aoc-scope .cd-corp .clist{font-family:var(--mono);font-size:13px;display:grid;gap:10px;}.aoc-scope .cd-corp .clist div{display:flex;gap:10px;}.aoc-scope .cd-corp .clist b{color:var(--a1);}.aoc-scope .st-hero{padding:clamp(34px,5vw,60px) 0 clamp(20px,3vw,30px);position:relative;}.aoc-scope .st-hero h1{font-size:clamp(44px,8vw,90px);font-weight:800;letter-spacing:-.04em;line-height:.95;}.aoc-scope .st-hero h1 em{font-style:italic;color:var(--a2);}.aoc-scope .st-hero .lead{font-size:17px;color:var(--ink-2);max-width:500px;margin:16px 0 0;}.aoc-scope .st-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}.aoc-scope .st-tag{font-family:var(--mono);font-size:12px;padding:7px 14px;border-radius:var(--pill);background:#fff;border:1.5px dashed var(--line-2);transform:rotate(-2deg);}.aoc-scope .st-tag:nth-child(2n){transform:rotate(2deg);background:#FFF3E9;}.aoc-scope .st-tag:nth-child(3n){transform:rotate(-1deg);}.aoc-scope .st-strip{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;padding:16px 0;font-family:var(--mono);font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}.aoc-scope .st-strip b{color:var(--ink);}.aoc-scope .st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}.aoc-scope .st-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-align:center;cursor:pointer;transition:.16s;}.aoc-scope .st-tile:nth-child(3n){transform:rotate(-1.4deg);}.aoc-scope .st-tile:nth-child(3n+1){transform:rotate(1.2deg);}.aoc-scope .st-tile:hover{transform:translateY(-4px) rotate(0);box-shadow:0 18px 36px -22px rgba(28,26,22,.45);}.aoc-scope .st-tile .simg{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}.aoc-scope .st-tile .sn{font-weight:600;font-size:14px;}.aoc-scope .st-tile .sp{font-family:var(--mono);font-size:12.5px;color:var(--a2);margin-top:5px;}.aoc-scope .dc-hero{padding:clamp(30px,4vw,50px) 0;}.aoc-scope .dc-hero h1{font-size:clamp(38px,5.6vw,62px);font-weight:800;letter-spacing:-.035em;}.aoc-scope .dc-hero h1 em{font-style:normal;color:#4B4F6B;}.aoc-scope .dc-hero .lead{font-size:16px;color:var(--ink-2);max-width:520px;margin:16px 0 0;}.aoc-scope .dc-scenes{display:flex;flex-direction:column;gap:18px;}.aoc-scope .scene{display:grid;grid-template-columns:1.2fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);cursor:pointer;transition:.15s;min-height:220px;}.aoc-scope .scene:nth-child(2n){grid-template-columns:1fr 1.2fr;}.aoc-scope .scene:nth-child(2n) .sc-vis{order:2;}.aoc-scope .scene:hover{box-shadow:0 20px 44px -28px rgba(28,26,22,.5);}.aoc-scope .sc-vis{display:flex;align-items:center;justify-content:center;padding:24px;}.aoc-scope .sc-wall{background:linear-gradient(160deg,#EDE7DA,#E2D9C6);}.aoc-scope .sc-car{background:linear-gradient(160deg,#D9DEE6,#B9C2D0);}.aoc-scope .sc-window{background:linear-gradient(160deg,#DDEBE6,#C4DAD1);}.aoc-scope .sc-floor{background:linear-gradient(160deg,#E6E0D2,#D2C8B2);}.aoc-scope .sc-body{padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;justify-content:center;}.aoc-scope .sc-body .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#4B4F6B;}.aoc-scope .sc-body h3{font-weight:700;font-size:clamp(20px,2.6vw,26px);margin:8px 0 8px;letter-spacing:-.02em;}.aoc-scope .sc-body p{font-size:14px;color:var(--muted);line-height:1.6;max-width:340px;}.aoc-scope .sc-body .sp{font-family:var(--mono);font-size:13.5px;color:#4B4F6B;font-weight:600;margin-top:14px;}.aoc-scope .uv-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:clamp(30px,4vw,52px) 0;}.aoc-scope .uv-hero h1{font-size:clamp(38px,5.6vw,64px);font-weight:800;letter-spacing:-.04em;}.aoc-scope .uv-hero h1 em{font-style:normal;color:var(--a2);}.aoc-scope .uv-hero .lead{font-size:16px;color:var(--ink-2);max-width:420px;margin:16px 0 0;}.aoc-scope .uv-vis{aspect-ratio:1/1;max-width:400px;margin-left:auto;width:100%;background:var(--paper-2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;}.aoc-scope .uv-themes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:36px;}.aoc-scope .uv-theme{aspect-ratio:3/4;border-radius:var(--r);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.16s;}.aoc-scope .uv-theme:hover{transform:translateY(-3px);}.aoc-scope .uv-theme .lab{position:absolute;left:0;right:0;bottom:0;padding:12px;font-family:var(--mono);font-size:11px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));}.aoc-scope .uv-theme .big{font-family:var(--disp);font-weight:800;font-size:34px;}.aoc-scope .pr-hero{text-align:center;padding:clamp(34px,5vw,60px) 0;}.aoc-scope .pr-hero h1{font-size:clamp(40px,7vw,80px);font-weight:800;letter-spacing:-.04em;line-height:.98;}.aoc-scope .pr-hero h1 em{font-style:normal;color:var(--a2);}.aoc-scope .pr-hero .lead{font-size:17px;color:var(--ink-2);max-width:520px;margin:16px auto 0;}.aoc-scope .pr-uses{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:20px;font-family:var(--mono);font-size:12.5px;}.aoc-scope .pr-uses span{padding:8px 15px;border-radius:var(--pill);background:var(--paper-2);color:var(--ink-2);}.aoc-scope .pr-rack{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:end;}.aoc-scope .pr-card{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;cursor:pointer;transition:.16s;text-align:center;}.aoc-scope .pr-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px -24px rgba(28,26,22,.5);}.aoc-scope .pr-card .pv2{background:var(--paper-2);display:flex;align-items:center;justify-content:center;padding:22px 0;}.aoc-scope .pr-card .pb{padding:14px;}.aoc-scope .pr-card .pn{font-weight:600;font-size:14px;}.aoc-scope .pr-card .pp2{font-family:var(--mono);font-size:12.5px;color:var(--a2);margin-top:5px;}.aoc-scope .ac-hero{text-align:center;padding:clamp(36px,5vw,64px) 0;}.aoc-scope .ac-hero .eyebrow{color:#9A7A2F;}.aoc-scope .ac-hero h1{font-size:clamp(38px,5.6vw,60px);font-weight:700;letter-spacing:-.03em;margin-top:12px;}.aoc-scope .ac-hero h1 em{font-style:italic;color:#9A7A2F;}.aoc-scope .ac-hero .lead{font-size:16px;color:var(--ink-2);max-width:460px;margin:14px auto 0;}.aoc-scope .ac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}.aoc-scope .ac-item{text-align:center;cursor:pointer;transition:.16s;}.aoc-scope .ac-item:hover{transform:translateY(-4px);}.aoc-scope .ac-vis{aspect-ratio:1/1;border-radius:var(--r);background:linear-gradient(160deg,#FBF9F4,#EFE7D6);display:flex;align-items:center;justify-content:center;box-shadow:0 22px 44px -30px rgba(154,122,47,.6);margin-bottom:14px;}.aoc-scope .ac-item .an{font-weight:600;font-size:15px;}.aoc-scope .ac-item .achip{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px;}.aoc-scope .ac-item .ap{font-family:var(--mono);font-size:13.5px;color:#9A7A2F;margin-top:8px;}.aoc-scope .wa-hero{padding:clamp(30px,4vw,52px) 0;}.aoc-scope .wa-hero h1{font-size:clamp(38px,5.6vw,62px);font-weight:800;letter-spacing:-.035em;}.aoc-scope .wa-hero h1 em{font-style:normal;color:#2C5C39;}.aoc-scope .wa-hero .lead{font-size:16px;color:var(--ink-2);max-width:500px;margin:16px 0 0;}.aoc-scope .wa-wall{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:120px;gap:16px;}.aoc-scope .wa-piece{border-radius:8px;overflow:hidden;cursor:pointer;transition:.16s;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 0 0 1.5px var(--line-2),0 14px 28px -18px rgba(0,0,0,.35);border:8px solid #fff;position:relative;}.aoc-scope .wa-piece:hover{transform:translateY(-4px);}.aoc-scope .wa-piece .lab{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-family:var(--mono);font-size:10px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));}.aoc-scope .wa-a{grid-column:span 3;grid-row:span 2;background:linear-gradient(135deg,#3F7D4E,#2C5C39);}.aoc-scope .wa-b{grid-column:span 3;grid-row:span 1;background:linear-gradient(135deg,#C9A24B,#9A7A2F);}.aoc-scope .wa-c{grid-column:span 3;grid-row:span 1;background:linear-gradient(160deg,#E0492C,#B6321F);}.aoc-scope .wa-d{grid-column:span 2;grid-row:span 2;background:linear-gradient(135deg,#211E19,#3a352c);}.aoc-scope .wa-e{grid-column:span 2;grid-row:span 1;background:linear-gradient(135deg,#E89A2C,#E0492C);}.aoc-scope .wa-f{grid-column:span 2;grid-row:span 1;background:linear-gradient(160deg,#6A6F8C,#3F4360);}.aoc-scope .pp{padding:clamp(18px,3vw,28px) 0 clamp(40px,6vw,68px);}.aoc-scope .pp-media{position:relative;border-radius:var(--r);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--paper-2);}.aoc-scope.aoc-dark .pp-media{background:#0A0A0C;}.aoc-scope .pp-thumbs{display:flex;gap:9px;margin-top:11px;}.aoc-scope .pp-thumbs .t{width:58px;height:58px;border-radius:9px;background:var(--paper-2);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;}.aoc-scope .pp-thumbs .t.on{border-color:var(--ink);}.aoc-scope.aoc-dark .pp-thumbs .t{background:#0A0A0C;border-color:#24242B;}.aoc-scope .pp-info h1{font-size:clamp(26px,3.6vw,38px);font-weight:700;letter-spacing:-.03em;margin-top:8px;}.aoc-scope.aoc-dark .pp-info h1{color:#EDE7DA;}.aoc-scope .pp-desc{font-size:15px;color:var(--ink-2);line-height:1.62;margin:14px 0 4px;max-width:460px;}.aoc-scope.aoc-dark .pp-desc{color:#B7B2A6;}.aoc-scope .pp-2col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,54px);align-items:start;}.aoc-scope .pp-sg .pp-media{aspect-ratio:1/1;background:#0A0A0C;}.aoc-scope .pp-cd .pp-media{background:var(--paper-2);}.aoc-scope .pp-st .pp-media{background:#FFF3E9;}.aoc-scope .pp-wide{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,48px);align-items:start;}.aoc-scope .pp-banner-media{aspect-ratio:3/4;}.aoc-scope .qpanel{border:1px solid var(--a2);border-radius:var(--r);background:var(--card);padding:20px;}.aoc-scope.aoc-dark .qpanel{background:#131316;}.aoc-scope .qpanel .qh{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--a2);font-weight:600;margin-bottom:6px;}.aoc-scope .qpanel h3{font-weight:700;font-size:19px;margin-bottom:6px;}.aoc-scope .qpanel p{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:14px;}.aoc-scope .tiers{display:flex;flex-direction:column;margin-bottom:16px;}.aoc-scope .tiers .t{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px;}.aoc-scope.aoc-dark .tiers .t{border-color:#24242B;}.aoc-scope .tiers .t b{color:var(--a2);font-weight:600;}.aoc-scope .tiers .t:last-child{border-bottom:none;}.aoc-scope .field{margin-bottom:12px;}.aoc-scope .field label{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}.aoc-scope .field input,.aoc-scope .field select,.aoc-scope .field textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line-2);border-radius:9px;font-size:14px;color:var(--ink);background:var(--paper);outline:none;transition:.16s;}.aoc-scope .field input:focus,.aoc-scope .field select:focus,.aoc-scope .field textarea:focus{border-color:var(--a2);}.aoc-scope.aoc-dark .field input,.aoc-scope.aoc-dark .field select,.aoc-scope.aoc-dark .field textarea{background:#0F0F12;border-color:#2E2E36;color:#EDE7DA;}.aoc-scope .field2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}.aoc-scope .upload{border:1.5px dashed var(--line-2);border-radius:11px;padding:16px;text-align:center;cursor:pointer;transition:.14s;background:var(--paper);}.aoc-scope .upload:hover{border-color:var(--a2);background:var(--paper-2);}.aoc-scope .upload .u1{font-weight:600;font-size:14px;}.aoc-scope .upload .u2{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px;}.aoc-scope.aoc-dark .upload{background:#0F0F12;border-color:#2E2E36;}.aoc-scope .bizstrip{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:clamp(24px,3.5vw,40px);display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;}.aoc-scope .bizstrip .eyebrow{color:var(--a1);}.aoc-scope .bizstrip h2{color:var(--paper);font-size:clamp(22px,2.8vw,30px);margin:10px 0 10px;}.aoc-scope .bizstrip p{opacity:.78;font-size:14px;max-width:420px;line-height:1.55;}.aoc-scope .bizstrip .btn-gold{background:var(--a1);color:var(--ink);}.aoc-scope.aoc-dark .bizstrip{background:#131316;border:1px solid #24242B;}.aoc-scope .scrim{position:fixed;inset:0;z-index:800;background:rgba(28,26,22,.42);opacity:0;visibility:hidden;transition:.2s;}.aoc-scope .scrim.open{opacity:1;visibility:visible;}.aoc-scope .cartdrawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:900;background:var(--paper);transform:translateX(100%);transition:.24s;display:flex;flex-direction:column;box-shadow:-20px 0 50px -24px rgba(0,0,0,.5);}.aoc-scope .cartdrawer.open{transform:none;}.aoc-scope .cd-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);}.aoc-scope .cd-head h3{font-weight:700;font-size:18px;}.aoc-scope .cd-x{font-size:22px;color:var(--muted);padding:4px 8px;}.aoc-scope .cd-body{flex:1;overflow-y:auto;padding:16px 20px;}.aoc-scope .cd-empty{text-align:center;padding:50px 20px;color:var(--muted);}.aoc-scope .cd-empty .big{font-weight:600;color:var(--ink);margin-bottom:6px;}.aoc-scope .ci{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);}.aoc-scope .ci-img{width:58px;height:58px;border-radius:9px;background:var(--paper-2);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}.aoc-scope .ci-info{flex:1;min-width:0;}.aoc-scope .ci-name{font-weight:600;font-size:14px;}.aoc-scope .ci-opt{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.5;}.aoc-scope .ci-bot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}.aoc-scope .ci-price{font-family:var(--mono);font-size:13.5px;font-weight:500;}.aoc-scope .ci-rm{font-family:var(--mono);font-size:11px;color:var(--muted);text-decoration:underline;cursor:pointer;}.aoc-scope .ci-rm:hover{color:var(--a2);}.aoc-scope .cd-foot{padding:18px 20px;border-top:1px solid var(--line);}.aoc-scope .cd-sub{display:flex;justify-content:space-between;font-family:var(--mono);font-size:17px;font-weight:600;margin-bottom:4px;}.aoc-scope .cd-note{font-family:var(--mono);font-size:11px;color:var(--muted);margin:8px 0 14px;}.aoc-scope .formpage{max-width:940px;margin:0 auto;padding:clamp(24px,4vw,44px) var(--pad) 80px;}.aoc-scope .formpage h1{font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-.02em;}.aoc-scope .formpage .fp-sub{color:var(--muted);font-size:15px;margin-top:8px;}.aoc-scope .co-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,44px);margin-top:30px;align-items:start;}.aoc-scope .co-card{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:22px;margin-bottom:16px;}.aoc-scope .co-card h3{font-weight:700;font-size:17px;margin-bottom:16px;}.aoc-scope .pay{display:flex;flex-direction:column;gap:10px;}.aoc-scope .pay label{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1.5px solid var(--line-2);border-radius:11px;cursor:pointer;transition:.13s;font-size:14px;}.aoc-scope .pay label:hover{border-color:var(--ink);}.aoc-scope .pay label.on{border-color:var(--a2);background:var(--paper-2);}.aoc-scope .pay .rd{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);flex-shrink:0;position:relative;}.aoc-scope .pay label.on .rd{border-color:var(--a2);}.aoc-scope .pay label.on .rd::after{content:"";position:absolute;inset:3px;background:var(--a2);border-radius:50%;}.aoc-scope .pay .pm{font-weight:600;}.aoc-scope .pay .pd2{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px;}.aoc-scope .summary{border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);padding:20px;position:sticky;top:90px;}.aoc-scope .summary h3{font-weight:700;font-size:16px;margin-bottom:14px;}.aoc-scope .sum-line{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:7px 0;color:var(--ink-2);}.aoc-scope .sum-line.tot{font-family:var(--mono);font-weight:600;font-size:17px;color:var(--ink);border-top:1px solid var(--line);margin-top:8px;padding-top:14px;}.aoc-scope .sum-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);}.aoc-scope .sum-item .si-img{width:44px;height:44px;border-radius:8px;background:var(--card);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}.aoc-scope .sum-item .si-n{font-size:13px;font-weight:600;}.aoc-scope .sum-item .si-o{font-family:var(--mono);font-size:10px;color:var(--muted);}.aoc-scope .sum-item .si-p{font-family:var(--mono);font-size:12.5px;margin-left:auto;white-space:nowrap;}.aoc-scope .confirm{max-width:640px;margin:0 auto;padding:clamp(40px,7vw,90px) var(--pad);text-align:center;}.aoc-scope .confirm .tick{width:72px;height:72px;border-radius:50%;background:var(--a3);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:34px;}.aoc-scope .confirm.q .tick{background:var(--a2);}.aoc-scope .confirm h1{font-size:clamp(26px,3.6vw,38px);font-weight:700;letter-spacing:-.02em;}.aoc-scope .confirm p{color:var(--ink-2);font-size:15.5px;margin:14px auto 8px;max-width:440px;line-height:1.6;}.aoc-scope .confirm .ordref{display:inline-block;font-family:var(--mono);font-size:14px;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:10px 18px;margin:18px 0 24px;}.aoc-scope .confirm .cbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}.aoc-scope .mcta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:500;background:var(--card);border-top:1px solid var(--line);padding:9px var(--pad);gap:9px;box-shadow:0 -8px 24px rgba(0,0,0,.08);}.aoc-scope .mcta .btn{flex:1;}.aoc-scope.aoc-dark .mcta{background:#0C0C0E;border-color:#24242B;}.aoc-scope .drawer{position:fixed;inset:0;z-index:950;background:rgba(28,26,22,.42);opacity:0;visibility:hidden;transition:.2s;}.aoc-scope .drawer.open{opacity:1;visibility:visible;}.aoc-scope .drawer-in{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--paper);padding:18px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;transform:translateX(100%);transition:.22s;}.aoc-scope .drawer.open .drawer-in{transform:none;}.aoc-scope .drawer-x{align-self:flex-end;font-size:22px;padding:6px 10px;color:var(--muted);}.aoc-scope .drawer-in .dcat{padding:12px 10px;font-size:16px;font-weight:600;border-radius:9px;cursor:pointer;}.aoc-scope .drawer-in .dcat:hover{background:var(--paper-2);}.aoc-scope .drawer-in .ddiv{height:1px;background:var(--line);margin:8px 0;}@media(max-width:1000px){.aoc-scope .cats{grid-template-columns:repeat(2,1fr);}.aoc-scope .pgrid.c4,.aoc-scope .st-grid,.aoc-scope .uv-themes,.aoc-scope .pr-rack{grid-template-columns:repeat(3,1fr);}.aoc-scope .foot-top{grid-template-columns:1fr 1fr;}.aoc-scope .ig{grid-template-columns:repeat(4,1fr);}.aoc-scope .wa-wall{grid-template-columns:repeat(4,1fr);}}@media(max-width:900px){.aoc-scope .hero-grid,.aoc-scope .biz,.aoc-scope .cd-hero,.aoc-scope .uv-hero,.aoc-scope .cd-corp,.aoc-scope .sg-feat,.aoc-scope .pp-2col,.aoc-scope .pp-wide,.aoc-scope .pd-cols,.aoc-scope .co-grid,.aoc-scope .bizstrip{grid-template-columns:1fr;}.aoc-scope .hero-art,.aoc-scope .uv-vis{max-width:340px;margin:0 auto;}.aoc-scope .nav{display:none;}.aoc-scope .burger{display:flex;}.aoc-scope .head-r .seg{display:none;}.aoc-scope .head-row2{display:block;border-top:1px solid var(--line);}.aoc-scope .head-row2-in{max-width:var(--maxw);margin:0 auto;padding:8px var(--pad);}.aoc-scope .head-row2 .seg{display:flex;width:100%;}.aoc-scope .head-row2 .seg button{flex:1;text-align:center;padding:8px;}.aoc-scope .steps,.aoc-scope .finband,.aoc-scope .st-grid,.aoc-scope .uv-themes,.aoc-scope .pr-rack,.aoc-scope .ac-grid{grid-template-columns:1fr 1fr;}.aoc-scope .scene,.aoc-scope .scene:nth-child(2n){grid-template-columns:1fr;}.aoc-scope .scene:nth-child(2n) .sc-vis{order:0;}.aoc-scope .summary{position:static;}.aoc-scope .wa-wall{grid-template-columns:repeat(2,1fr);}.aoc-scope .wa-a,.aoc-scope .wa-b,.aoc-scope .wa-c,.aoc-scope .wa-d,.aoc-scope .wa-e,.aoc-scope .wa-f{grid-column:span 1;grid-row:span 1;min-height:150px;}}@media(max-width:620px){.aoc-scope .pgrid.c4,.aoc-scope .pgrid.c3,.aoc-scope .st-grid,.aoc-scope .uv-themes,.aoc-scope .pr-rack,.aoc-scope .ac-grid,.aoc-scope .finband{grid-template-columns:1fr 1fr;}.aoc-scope .cats{grid-template-columns:1fr;}.aoc-scope .cat{min-height:auto;flex-direction:row;align-items:center;gap:16px;padding:16px 18px;}.aoc-scope .cat .glyph{height:auto;}.aoc-scope .cat>div:last-child{flex:1;}.aoc-scope .ig{grid-template-columns:repeat(3,1fr);}.aoc-scope .foot-top{grid-template-columns:1fr;gap:24px;}.aoc-scope .pp-actions .btn{min-width:100%;}.aoc-scope .field2{grid-template-columns:1fr;}.aoc-scope .mcta{display:flex;}.aoc-scope.has-mcta{padding-bottom:66px;}.aoc-scope .logo .wm small{display:none;}.aoc-scope .bc-stack{height:250px;}.aoc-scope .bc{width:230px;height:136px;}.aoc-scope .wa-wall{grid-template-columns:1fr;}}@media(prefers-reduced-motion:reduce){.aoc-scope,.aoc-scope *{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}

/* ---- plugin-only helpers (toggle visibility, overlays) ---- */
body:not(.aoc-wholesale-on) .aoc-b2b-only{display:none !important;}
body.aoc-wholesale-on .aoc-b2c-only{display:none !important;}
.aoc-scope .aoc-form-success{display:none;margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line);font-family:var(--mono);font-size:13px;color:var(--ink);}
.aoc-scope .aoc-drawer{position:fixed;inset:0;z-index:950;background:rgba(28,26,22,.42);opacity:0;visibility:hidden;transition:.2s;}
.aoc-scope .aoc-drawer.open{opacity:1;visibility:visible;}
.aoc-scope .aoc-drawer-in{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--paper);padding:18px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;transform:translateX(100%);transition:.22s;}
.aoc-scope .aoc-drawer.open .aoc-drawer-in{transform:none;}

/* =====================================================================
   v8 additions — underline reset, working cart, upload, account, a11y,
   and responsiveness improvements.
===================================================================== */

/* ---- 1. KILL UNDERLINES (the "AI look"). Scoped, so the theme can't add
   them back either. <u>/<ins> keep intentional underlines. ---- */
.aoc-scope, .aoc-scope *:not(u):not(ins){ text-decoration: none !important; }
.aoc-scope u, .aoc-scope ins{ text-decoration: underline !important; }
/* the .link chip used a decorative bottom-border underline — soften it to a
   quiet accent tick that appears on hover only */
.aoc-scope .link{ border-bottom: none; }
.aoc-scope .link:hover{ color: var(--a2); }
.aoc-scope .ci-rm{ text-decoration: none !important; border-bottom: 1px solid var(--line-2); padding-bottom: 1px; }
.aoc-scope .ci-rm:hover{ border-bottom-color: var(--a2); }

/* ---- 2. cart drawer helpers (count badge, qty controls) ---- */
.aoc-scope .cartdot.aoc-cart-count{ }               /* styled by .cartdot */
.aoc-scope .ci-qtybtn{ display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--line-2);border-radius:6px;font-size:14px;color:var(--ink-2);cursor:pointer;user-select:none;vertical-align:middle; }
.aoc-scope .ci-qtybtn:hover{ border-color:var(--ink);color:var(--ink); }
.aoc-scope .cd-actions{ display:flex;flex-direction:column;gap:9px;margin-top:12px; }

/* ---- 3. artwork upload zone ---- */
.aoc-scope .aoc-upload-zone{ border:1.5px dashed var(--line-2);border-radius:11px;padding:14px 16px;text-align:center;cursor:pointer;transition:.14s;background:var(--paper); }
.aoc-scope .aoc-upload-zone:hover{ border-color:var(--a2);background:var(--paper-2); }
.aoc-scope .aoc-upload-zone.has-file{ border-style:solid;border-color:var(--a3);background:rgba(63,125,78,.06); }
.aoc-scope .aoc-upload-zone .u1{ font-weight:600;font-size:13.5px; }
.aoc-scope .aoc-upload-zone .u2{ font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:3px; }
.aoc-scope.aoc-dark .aoc-upload-zone{ background:#0F0F12;border-color:#2E2E36; }

/* ---- 4. account page tabs ---- */
.aoc-scope .aoc-account-page{ max-width:var(--maxw);margin:0 auto;padding:clamp(24px,4vw,44px) var(--pad) 80px; }
.aoc-scope .acc-head h1{ font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.02em; }
.aoc-scope .acc-head p{ color:var(--muted);font-size:15px;margin-top:8px; }
.aoc-scope .aoc-acc-tabs{ display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:24px 0 26px; }
.aoc-scope .aoc-acc-tab{ padding:11px 16px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:.13s;white-space:nowrap; }
.aoc-scope .aoc-acc-tab:hover{ color:var(--ink); }
.aoc-scope .aoc-acc-tab.on{ color:var(--a2);border-bottom-color:var(--a2); }
.aoc-scope .acc-grid{ display:grid;grid-template-columns:1fr 1fr;gap:16px; }

/* ---- 5. checkout confirmation reveal ---- */
.aoc-scope .aoc-checkout-done{ display:none; }

/* ---- 6. RESPONSIVENESS improvements ---- */
.aoc-scope .head-in{ flex-wrap:wrap;row-gap:10px; }
@media(max-width:1000px){
  .aoc-scope .nav a{ padding:9px 9px;font-size:13.5px; }
  .aoc-scope .trust-in{ gap:16px 22px; }
}
@media(max-width:900px){
  .aoc-scope .head-in{ gap:12px; }
  .aoc-scope .logo .wm{ font-size:16px; }
  .aoc-scope .acc-grid{ grid-template-columns:1fr; }
  .aoc-scope .cartdrawer{ width:min(420px,94vw); }
  .aoc-scope .pp-thumbs{ flex-wrap:wrap; }
  .aoc-scope .qpanel{ padding:16px; }
}
@media(max-width:620px){
  .aoc-scope{ font-size:14.5px; }
  .aoc-scope .head-r{ gap:6px; }
  .aoc-scope .head-r .icnbtn{ padding:6px; }
  .aoc-scope .trust-in{ justify-content:flex-start; }
  .aoc-scope .sh{ gap:12px; }
  .aoc-scope .pp-actions{ flex-direction:column; }
  .aoc-scope .pp-actions .btn{ width:100%;min-width:0; }
  .aoc-scope .co-card{ padding:16px; }
  .aoc-scope .field2{ grid-template-columns:1fr; }
  .aoc-scope .aoc-acc-tab{ flex:1;text-align:center;padding:10px 8px; }
}

/* ===================================================================
   v8.1 · UV DTF / TOTE BAGS — bespoke category + product layouts
   Namespaced .aoc-tbc (category) and .aoc-tbp (product). Reuses brand
   tokens; unique structure so totes don't look like the other worlds.
=================================================================== */

/* ---- shared canvas texture used by tote renders ---- */
.aoc-scope .tbx-canvas{background:
  linear-gradient(135deg,#F7F1E4,#EFE6D3);
  position:relative;}
.aoc-scope .tbx-canvas::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(120,100,70,.05) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(120,100,70,.05) 0 1px,transparent 1px 4px);}
/* a bigger tote render for tote pages */
.aoc-scope .tote-big{width:60%;aspect-ratio:5/6;background:#F7F1E4;border-radius:6px 6px 12px 12px;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 26px 46px -26px rgba(28,26,22,.4);display:flex;align-items:center;justify-content:center;z-index:1;}
.aoc-scope .tote-big::before,.aoc-scope .tote-big::after{content:"";position:absolute;top:-13%;width:11%;height:20%;border:6px solid #E7DBC2;border-bottom:none;border-radius:14px 14px 0 0;}
.aoc-scope .tote-big::before{left:24%;}.aoc-scope .tote-big::after{right:24%;}
.aoc-scope .tote-big .m{font-family:var(--disp);font-weight:800;font-size:clamp(22px,4vw,40px);text-align:center;line-height:1.05;padding:0 10px;color:var(--ink);transition:.2s;}

/* ---------- CATEGORY: hero ---------- */
.aoc-scope .tbc-hero{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,58px);align-items:center;padding:clamp(30px,4.5vw,56px) 0 clamp(20px,3vw,30px);}
.aoc-scope .tbc-hero h1{font-size:clamp(38px,6vw,68px);font-weight:800;letter-spacing:-.04em;line-height:1;margin:14px 0 0;}
.aoc-scope .tbc-hero h1 em{font-style:normal;color:var(--a2);}
.aoc-scope .tbc-hero .lead{font-size:clamp(15.5px,1.7vw,17.5px);color:var(--ink-2);max-width:430px;margin:18px 0 24px;line-height:1.6;}
.aoc-scope .tbc-cta{display:flex;gap:12px;flex-wrap:wrap;}
.aoc-scope .tbc-micro{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-family:var(--mono);font-size:11.5px;color:var(--muted);}
.aoc-scope .tbc-micro span{display:flex;align-items:center;gap:7px;}
.aoc-scope .tbc-micro span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a3);}
.aoc-scope .tbc-stage{position:relative;aspect-ratio:1/1;max-width:440px;width:100%;margin-left:auto;border-radius:var(--r);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.aoc-scope .tbc-stage .tag{position:absolute;right:16px;bottom:16px;z-index:2;background:var(--card);border:1px solid var(--line);border-radius:var(--pill);padding:9px 15px;font-family:var(--mono);font-size:11.5px;display:flex;gap:10px;align-items:center;box-shadow:0 10px 24px -14px rgba(0,0,0,.3);}
.aoc-scope .tbc-stage .tag b{color:var(--a2);font-weight:600;}

/* ---------- CATEGORY: fabric swatch strip ---------- */

/* ---------- CATEGORY: theme rail ---------- */
.aoc-scope .tbc-themes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.aoc-scope .tbc-theme{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);cursor:pointer;transition:.16s;display:flex;flex-direction:column;}
.aoc-scope .tbc-theme:hover{transform:translateY(-4px);box-shadow:0 18px 38px -24px rgba(28,26,22,.45);border-color:var(--line-2);}
.aoc-scope .tbc-theme .tt-vis{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;}
.aoc-scope .tbc-theme .tt-vis .m{font-family:var(--disp);font-weight:800;font-size:clamp(18px,2.4vw,26px);color:var(--ink);text-align:center;padding:0 10px;line-height:1.1;}
.aoc-scope .tbc-theme .tt-b{padding:13px 15px;}
.aoc-scope .tbc-theme .tt-n{font-weight:600;font-size:14.5px;}
.aoc-scope .tbc-theme .tt-k{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:3px;}
.aoc-scope .tbc-theme .tt-c{font-family:var(--mono);font-size:12px;color:var(--a2);margin-top:9px;}

/* ---------- CATEGORY: process ---------- */
.aoc-scope .tbc-proc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,34px);}
.aoc-scope .tbc-pstep{position:relative;padding-top:20px;border-top:2px solid var(--ink);}
.aoc-scope .tbc-pstep .n{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--a2);letter-spacing:.08em;}
.aoc-scope .tbc-pstep h4{font-weight:700;font-size:17px;margin:9px 0 6px;}
.aoc-scope .tbc-pstep p{font-size:13.5px;color:var(--muted);line-height:1.6;}

/* ---------- CATEGORY: bulk / merch band ---------- */
.aoc-scope .tbc-bulk{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:clamp(26px,4vw,46px);display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;}
.aoc-scope .tbc-bulk .eyebrow{color:var(--a1);}
.aoc-scope .tbc-bulk h2{color:var(--paper);font-size:clamp(23px,3vw,33px);margin:11px 0 12px;}
.aoc-scope .tbc-bulk p{opacity:.8;font-size:14.5px;max-width:430px;line-height:1.6;}
.aoc-scope .tbc-bulk .btn-gold{background:var(--a1);color:var(--ink);margin-top:18px;}
.aoc-scope .tbc-tiers{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:20px;font-family:var(--mono);}
.aoc-scope .tbc-tiers .tr{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px;}
.aoc-scope .tbc-tiers .tr:last-child{border-bottom:none;}
.aoc-scope .tbc-tiers .tr b{color:var(--a1);font-weight:600;}

/* ---------- PRODUCT: layout ---------- */
.aoc-scope .aoc-tbp{padding:clamp(16px,3vw,26px) 0 clamp(38px,6vw,64px);}
.aoc-scope .tbp-2col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4.5vw,52px);align-items:start;}
.aoc-scope .tbp-stage{position:relative;border-radius:var(--r);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.aoc-scope .tbp-swatches{display:flex;gap:10px;margin-top:12px;align-items:center;flex-wrap:wrap;}
.aoc-scope .tbp-swatches .lab{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-right:2px;}
.aoc-scope .tbp-swatches i{width:34px;height:34px;border-radius:9px;cursor:pointer;box-shadow:0 0 0 1px var(--line-2);transition:.13s;}
.aoc-scope .tbp-swatches i.on{box-shadow:0 0 0 2px var(--ink);}
.aoc-scope .tbp-info .eyebrow{color:var(--a2);}
.aoc-scope .tbp-info h1{font-size:clamp(27px,3.6vw,40px);font-weight:800;letter-spacing:-.035em;margin-top:8px;}
.aoc-scope .tbp-rate{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:10px;}
.aoc-scope .tbp-desc{font-size:15px;color:var(--ink-2);line-height:1.62;margin:14px 0 2px;max-width:460px;}
/* theme chooser chips */
.aoc-scope .tbp-themebar{margin:18px 0 4px;}
.aoc-scope .tbp-themebar .tl{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
.aoc-scope .tbp-chips{display:flex;gap:8px;flex-wrap:wrap;}
/* DTF process band */
.aoc-scope .tbp-dtf{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,30px);margin-top:clamp(20px,3.5vw,34px);}
.aoc-scope .tbp-dtf h3{font-weight:700;font-size:19px;margin-bottom:16px;letter-spacing:-.02em;}
.aoc-scope .tbp-dtf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.aoc-scope .tbp-dtf-step .n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--a1);font-family:var(--mono);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.aoc-scope .tbp-dtf-step h4{font-weight:600;font-size:14.5px;}
.aoc-scope .tbp-dtf-step p{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:5px;}

@media(max-width:900px){
  .aoc-scope .tbc-hero,.aoc-scope .tbp-2col,.aoc-scope .tbc-bulk{grid-template-columns:1fr;}
  .aoc-scope .tbc-stage{max-width:360px;margin:0 auto;}
  .aoc-scope .tbc-themes{grid-template-columns:repeat(2,1fr);}
  .aoc-scope .tbc-proc{grid-template-columns:1fr;gap:22px;}
  .aoc-scope .tbp-dtf-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .aoc-scope .tbc-themes{grid-template-columns:1fr;}
  .aoc-scope .tbp-dtf-grid{grid-template-columns:1fr;}
  .aoc-scope .tote-big{width:70%;}
}

/* ===================================================================
   v8.2 · Cart drawer — premium, restrained, on-brand.
   Removes the heavy orange; ink + paper with a single hairline accent.
=================================================================== */
.aoc-scope .cartdrawer{width:min(410px,93vw);background:var(--paper);box-shadow:-24px 0 60px -30px rgba(28,26,22,.55);}
.aoc-scope .cartdrawer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ink);z-index:2;}
.aoc-scope .cd-head{padding:20px 22px 16px;border-bottom:1px solid var(--line);align-items:baseline;}
.aoc-scope .cd-head h3{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px;}
.aoc-scope .cd-head h3 .aoc-cart-count{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted);}
.aoc-scope .cd-x{color:var(--muted);border-radius:8px;line-height:1;transition:.13s;}
.aoc-scope .cd-x:hover{background:var(--paper-2);color:var(--ink);}
.aoc-scope .cd-body{padding:6px 22px;}
.aoc-scope .cd-empty{padding:60px 20px;}
.aoc-scope .cd-empty .big{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--ink);}

/* item rows — calmer, cleaner */
.aoc-scope .ci{gap:14px;padding:16px 0;border-bottom:1px solid var(--line);}
.aoc-scope .ci-img{width:60px;height:60px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line);}
.aoc-scope .ci-name{font-weight:600;font-size:14px;letter-spacing:-.01em;}
.aoc-scope .ci-opt{color:var(--muted);}
.aoc-scope .ci-price{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);}
.aoc-scope .ci-rm{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:1px;}
.aoc-scope .ci-rm:hover{color:var(--ink);border-color:var(--ink);}
.aoc-scope .ci-qtybtn{border-color:var(--line-2);color:var(--ink-2);border-radius:7px;}
.aoc-scope .ci-qtybtn:hover{border-color:var(--ink);color:var(--ink);background:var(--paper-2);}

/* footer — ink primary, hairline accent, no orange field */
.aoc-scope .cd-foot{padding:18px 22px 20px;border-top:1px solid var(--line);background:var(--paper-2);}
.aoc-scope .cd-sub{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;}
.aoc-scope .cd-sub .aoc-cart-subtotal{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.01em;text-transform:none;}
.aoc-scope .cd-note{color:var(--muted);margin:6px 0 14px;line-height:1.5;}
.aoc-scope .cd-actions{display:flex;flex-direction:column;gap:9px;}
.aoc-scope .cd-actions .btn{width:100%;}
.aoc-scope .cd-actions .btn:first-child{background:var(--ink);color:var(--paper);}
.aoc-scope .cd-actions .btn-o{background:transparent;color:var(--ink);border:1.5px solid var(--line-2);}
.aoc-scope .cd-actions .btn-o:hover{border-color:var(--ink);background:transparent;color:var(--ink);}

/* cart badge — ink chip, not a loud orange dot */
.aoc-scope .cartdot{background:var(--ink);color:var(--paper);box-shadow:0 0 0 2px var(--paper);font-weight:600;}
.aoc-scope.aoc-dark .cartdot{background:var(--a1);color:#0C0C0E;box-shadow:0 0 0 2px #0C0C0E;}
.aoc-scope.aoc-dark .cartdrawer{background:#0F0F12;}
.aoc-scope.aoc-dark .cartdrawer::before{background:var(--a1);}
.aoc-scope.aoc-dark .cd-head,.aoc-scope.aoc-dark .ci{border-color:#24242B;}
.aoc-scope.aoc-dark .cd-foot{background:#131316;border-color:#24242B;}
.aoc-scope.aoc-dark .cd-head h3,.aoc-scope.aoc-dark .cd-empty .big,.aoc-scope.aoc-dark .ci-name,.aoc-scope.aoc-dark .cd-sub .aoc-cart-subtotal,.aoc-scope.aoc-dark .ci-price{color:#EDE7DA;}
.aoc-scope.aoc-dark .ci-img{background:#0A0A0C;border-color:#24242B;}
.aoc-scope.aoc-dark .cd-actions .btn:first-child{background:var(--a1);color:#0C0C0E;}
.aoc-scope.aoc-dark .cd-actions .btn-o{color:#EDE7DA;border-color:#2E2E36;}

/* ===================================================================
   v8.2 · Neon builder controls (colour dots + day/night)
=================================================================== */
.aoc-scope .nb-dots{display:flex;gap:11px;margin-top:16px;flex-wrap:wrap;}
.aoc-scope .nb-dots i{width:24px;height:24px;border-radius:50%;cursor:pointer;transition:.14s;outline:2px solid transparent;outline-offset:2px;}
.aoc-scope .nb-dots i.on{outline-color:currentColor;transform:scale(1.08);}
.aoc-scope .nb-daynight{display:inline-flex;gap:2px;background:#0A0A0C;border:1px solid #24242B;border-radius:var(--pill);padding:3px;font-family:var(--mono);font-size:12px;margin-top:4px;}
.aoc-scope .nb-daynight span{padding:6px 14px;border-radius:var(--pill);color:#8C8C97;cursor:pointer;transition:.14s;user-select:none;}
.aoc-scope .nb-daynight span.on{background:#EDE7DA;color:#0C0C0E;font-weight:600;}
.aoc-scope .pp-sg .nb-daynight{background:#0A0A0C;}
/* cards preview stage sits on paper, not dark */
.aoc-scope .pp-cd .pp-media{background:var(--paper-2);}
.aoc-scope .cd-finchips button{min-width:0;}

/* ---- WordPress-menu navigation (Header widget · nav_source = wp) ---- */
/* WP nav — resets only; appearance is controlled by the v8.4.0 block below */
.aoc-scope nav.aoc-wpnav{display:flex;align-items:center;}
.aoc-scope .aoc-wpnav-ul{display:flex;align-items:center;list-style:none;margin:0;padding:0;}
.aoc-scope .aoc-wpnav-ul li{list-style:none;position:relative;}
.aoc-scope .aoc-wpnav-drawer .aoc-wpnav-ul{flex-direction:column;align-items:stretch;}
.aoc-scope .aoc-wpnav-drawer .aoc-wpnav-ul ul{list-style:none;}

/* ==========================================================================
   v8.4.0 — full-width mega-nav bar · wholesale category view · cart artwork ·
   premium mobile drawer
   ========================================================================== */

/* ---- top row: logo + actions only (nav moved to its own bar) ---- */
.aoc-scope .head-in{gap:16px;}

/* ---- full-width navigation bar ---- */
.aoc-scope .head-bar{border-top:1px solid var(--line);background:var(--paper);}
.aoc-scope.aoc-dark .head-bar{background:#0C0C0E;border-top-color:#1E1E24;}
.aoc-scope .head-bar-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;justify-content:center;}
.aoc-scope .head-bar .nav{display:flex;flex-wrap:nowrap;justify-content:center;gap:0;}
.aoc-scope .head-bar nav.aoc-wpnav{display:flex;justify-content:center;}
.aoc-scope .head-bar .aoc-wpnav-ul{flex-wrap:nowrap;justify-content:center;gap:0;}
/* top-level links */
.aoc-scope .head-bar .aoc-wpnav-ul>li{position:relative;}
.aoc-scope .head-bar .aoc-wpnav-ul>li>a,
.aoc-scope .head-bar .nav>a{position:relative;padding:14px 15px;border-radius:0;font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:color .13s;}
.aoc-scope .head-bar .aoc-wpnav-ul>li>a:hover,
.aoc-scope .head-bar .aoc-wpnav-ul>li:hover>a,
.aoc-scope .head-bar .nav>a:hover{background:transparent;color:var(--ink);}
.aoc-scope .head-bar .aoc-wpnav-ul>li>a::after,
.aoc-scope .head-bar .nav>a::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--a2);transform:scaleX(0);transition:transform .16s;}
.aoc-scope .head-bar .aoc-wpnav-ul>li:hover>a::after,
.aoc-scope .head-bar .nav>a:hover::after{transform:scaleX(1);}
/* caret on parents */
.aoc-scope .head-bar .aoc-wpnav-ul>li.menu-item-has-children>a{padding-right:27px;}
.aoc-scope .head-bar .aoc-wpnav-ul>li.menu-item-has-children>a::before{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.45;}
.aoc-scope.aoc-dark .head-bar .aoc-wpnav-ul>li>a,.aoc-scope.aoc-dark .head-bar .nav>a{color:#B7B2A6;}
.aoc-scope.aoc-dark .head-bar .aoc-wpnav-ul>li:hover>a,.aoc-scope.aoc-dark .head-bar .nav>a:hover{color:#fff;}
/* premium dropdown card */
.aoc-scope .head-bar .aoc-wpnav-ul ul{display:none;position:absolute;top:100%;left:0;transform:translateY(0);min-width:236px;background:var(--card);border:1px solid var(--line);border-top:2px solid var(--a2);border-radius:0 0 14px 14px;box-shadow:0 26px 54px -26px rgba(28,26,22,.5);padding:8px;z-index:600;flex-direction:column;gap:1px;}
.aoc-scope .head-bar .aoc-wpnav-ul>li:hover>ul{display:flex;}
.aoc-scope .head-bar .aoc-wpnav-ul>li>ul::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px;}
.aoc-scope .head-bar .aoc-wpnav-ul ul li{position:relative;}
.aoc-scope .head-bar .aoc-wpnav-ul ul a{display:block;padding:10px 13px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--ink-2);transition:.12s;white-space:nowrap;}
.aoc-scope .head-bar .aoc-wpnav-ul ul a:hover{background:var(--paper-2);color:var(--ink);padding-left:17px;}
/* nested (3rd level) opens to the side */
.aoc-scope .head-bar .aoc-wpnav-ul ul ul{top:-9px;left:100%;border-top-left-radius:14px;}
.aoc-scope.aoc-dark .head-bar .aoc-wpnav-ul ul{background:#131316;border-color:#24242B;}
.aoc-scope.aoc-dark .head-bar .aoc-wpnav-ul ul a{color:#B7B2A6;}
.aoc-scope.aoc-dark .head-bar .aoc-wpnav-ul ul a:hover{background:#1A1A1E;color:#fff;}
@media(max-width:900px){.aoc-scope .head-bar{display:none;}}

/* ---- Wholesale (B2B) category view ---- */
.aoc-scope .aoc-ws{padding-top:clamp(30px,4vw,54px);}
.aoc-scope .aoc-ws-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,52px);align-items:start;}
.aoc-scope .aoc-ws-copy h2{font-size:clamp(24px,3.2vw,36px);margin:10px 0 0;}
.aoc-scope .aoc-ws-copy .lead{color:var(--ink-2);font-size:15px;line-height:1.6;margin:14px 0 0;max-width:470px;}
.aoc-scope .aoc-ws-feats{display:grid;gap:15px;margin:24px 0 4px;}
.aoc-scope .aoc-ws-feats .wf{display:flex;gap:13px;align-items:flex-start;}
.aoc-scope .aoc-ws-feats .wfi{width:38px;height:38px;flex-shrink:0;border-radius:9px;background:var(--ink);color:var(--a1);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:15px;}
.aoc-scope .aoc-ws-feats .wf b{display:block;font-size:14.5px;font-weight:600;}
.aoc-scope .aoc-ws-feats .wf span{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:2px;}
.aoc-scope .aoc-ws-tiers{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);}
.aoc-scope .aoc-ws-tiers .tr{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px;}
.aoc-scope .aoc-ws-tiers .tr:last-child{border-bottom:none;}
.aoc-scope .aoc-ws-tiers .tr b{color:var(--a2);font-weight:600;}
.aoc-scope.aoc-dark .aoc-ws-tiers{background:#131316;border-color:#24242B;}
.aoc-scope.aoc-dark .aoc-ws-tiers .tr{border-color:#24242B;}
.aoc-scope .aoc-ws-quote .qpanel{position:sticky;top:96px;}
@media(max-width:900px){.aoc-scope .aoc-ws-grid{grid-template-columns:1fr;}.aoc-scope .aoc-ws-quote .qpanel{position:static;}}

/* ---- cart / checkout line artwork ---- */
.aoc-scope .ci-art{margin-top:8px;font-family:var(--mono);font-size:11px;line-height:1.4;}
.aoc-scope .ci-art.ok{color:var(--a3);word-break:break-word;}
.aoc-scope .ci-art.up{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1.5px dashed var(--line-2);border-radius:8px;color:var(--a2);cursor:pointer;transition:.13s;}
.aoc-scope .ci-art.up:hover{border-color:var(--a2);background:var(--paper-2);}
.aoc-scope .sum-item .ci-art{margin-top:6px;}

/* ---- premium mobile drawer ---- */
.aoc-scope .aoc-drawer-in{padding:0;gap:0;width:min(360px,88vw);background:var(--paper);}
.aoc-scope .aoc-drawer-in::after{content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--ink);}
.aoc-scope.aoc-dark .aoc-drawer-in::after{background:var(--a1);}
.aoc-scope .dr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;border-bottom:1px solid var(--line);}
.aoc-scope .dr-head .logo{cursor:default;}
.aoc-scope .dr-x{width:36px;height:36px;border-radius:9px;font-size:17px;color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.13s;}
.aoc-scope .dr-x:hover{background:var(--paper-2);color:var(--ink);}
.aoc-scope .dr-body{flex:1;overflow-y:auto;padding:12px 14px;}
.aoc-scope .dr-foot{padding:16px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;}
.aoc-scope .dr-seg .seg{display:flex;width:100%;}
.aoc-scope .dr-seg .seg button{flex:1;text-align:center;padding:9px;}
.aoc-scope .dr-body .dcat{display:block;padding:13px 14px;font-size:15.5px;font-weight:600;border-radius:10px;color:var(--ink);}
.aoc-scope .dr-body .dcat:hover{background:var(--paper-2);}
/* WP drawer accordion */
.aoc-scope .aoc-wpnav-drawer .aoc-wpnav-ul{gap:2px;}
.aoc-scope .aoc-wpnav-drawer>.aoc-wpnav-ul>li{position:relative;}
.aoc-scope .aoc-wpnav-drawer>.aoc-wpnav-ul>li>a{display:block;padding:13px 14px;font-size:15.5px;font-weight:600;border-radius:10px;color:var(--ink);}
.aoc-scope .aoc-wpnav-drawer>.aoc-wpnav-ul>li>a:hover{background:var(--paper-2);}
.aoc-scope .aoc-wpnav-drawer li.has-sub>a{padding-right:52px;}
.aoc-scope .dsub-toggle{position:absolute;top:4px;right:4px;width:40px;height:40px;border-radius:9px;font-size:19px;color:var(--muted);display:flex;align-items:center;justify-content:center;line-height:1;background:transparent;}
.aoc-scope .dsub-toggle:hover{background:var(--paper-2);color:var(--ink);}
.aoc-scope .aoc-wpnav-drawer li>ul{display:none;list-style:none;padding:2px 0 6px;margin:2px 0 4px 12px;border-left:2px solid var(--line);}
.aoc-scope .aoc-wpnav-drawer li.open>ul{display:block;}
.aoc-scope .aoc-wpnav-drawer li>ul li a{display:block;padding:10px 14px;font-size:14px;color:var(--ink-2);border-radius:8px;}
.aoc-scope .aoc-wpnav-drawer li>ul li a:hover{background:var(--paper-2);color:var(--ink);}

/* ==========================================================================
   v8.4.1 — header nav hardened so a real WordPress menu can't be broken by the
   active theme's own menu CSS (desktop dropdowns + mobile drawer). Header only.
   ========================================================================== */

/* never let an ancestor clip the desktop dropdown */
.aoc-scope .head, .aoc-scope .head-bar, .aoc-scope .head-bar-in, .aoc-scope .head-in{ overflow:visible !important; }
.aoc-scope .head{ z-index:600 !important; }

/* strip inherited theme list styling from our navs */
.aoc-scope nav.aoc-wpnav ul, .aoc-scope nav.aoc-wpnav li{ list-style:none !important; margin:0 !important; }
.aoc-scope nav.aoc-wpnav a{ text-decoration:none !important; }

/* ---------- DESKTOP: full-width bar + hover dropdown ---------- */
.aoc-scope .head-bar nav.aoc-wpnav{ display:flex !important; justify-content:center; width:100%; }
.aoc-scope .head-bar .aoc-wpnav-ul{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start; gap:0 !important; padding:0 !important; /* 9.13.3: was width:auto !important, which made the list size to its    OWN content. scrollWidth then always equalled clientWidth, so the    overflow logic could never detect that anything did not fit and the    More panel was always empty. It must fill its container instead. */ width:100% !important; min-width:0 !important; }
.aoc-scope .head-bar .aoc-wpnav-ul > li{ position:relative !important; display:block !important; float:none !important; }
.aoc-scope .head-bar .aoc-wpnav-ul > li > a{ display:flex !important; align-items:center; padding:14px 15px !important; font-size:14px; font-weight:500; color:var(--ink-2) !important; white-space:nowrap; background:transparent !important; }
.aoc-scope .head-bar .aoc-wpnav-ul > li:hover > a{ color:var(--ink) !important; }

/* the dropdown panel — controlled by visibility/opacity so theme display rules can't fight it */
.aoc-scope .head-bar .aoc-wpnav-ul > li > ul{
  display:block !important; visibility:hidden; opacity:0; pointer-events:none;
  position:absolute !important; top:100% !important; left:0 !important; right:auto !important; bottom:auto !important;
  min-width:230px; width:max-content; max-width:320px; margin:0 !important; padding:8px !important;
  background:var(--card); border:1px solid var(--line); border-top:2px solid var(--a2);
  border-radius:0 0 14px 14px; box-shadow:0 26px 54px -26px rgba(28,26,22,.5);
  z-index:2000 !important; transform:translateY(4px);
  transition:opacity .14s, transform .14s, visibility .14s;
}
.aoc-scope .head-bar .aoc-wpnav-ul > li:hover > ul{ visibility:visible !important; opacity:1 !important; pointer-events:auto !important; transform:translateY(0); }
/* invisible bridge so the pointer can travel from the item to the panel */
.aoc-scope .head-bar .aoc-wpnav-ul > li > ul::before{ content:""; position:absolute; top:-8px; left:0; right:0; height:8px; }
.aoc-scope .head-bar .aoc-wpnav-ul ul li{ position:relative; display:block !important; float:none !important; width:100%; }
.aoc-scope .head-bar .aoc-wpnav-ul ul a{ display:block !important; padding:10px 13px !important; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--ink-2) !important; white-space:nowrap; background:transparent !important; text-align:left !important; }
.aoc-scope .head-bar .aoc-wpnav-ul ul a:hover{ background:var(--paper-2) !important; color:var(--ink) !important; }
/* third level opens to the side */
.aoc-scope .head-bar .aoc-wpnav-ul ul ul{ top:-9px !important; left:100% !important; }
.aoc-scope.aoc-dark .head-bar .aoc-wpnav-ul > li > ul{ background:#131316; border-color:#24242B; }
.aoc-scope.aoc-dark .head-bar .aoc-wpnav-ul ul a{ color:#B7B2A6 !important; }
.aoc-scope.aoc-dark .head-bar .aoc-wpnav-ul ul a:hover{ background:#1A1A1E !important; color:#fff !important; }

/* ---------- MOBILE: premium drawer, left-aligned block list + accordion ---------- */
.aoc-scope .aoc-drawer .dr-head .logo{ display:flex !important; align-items:center; gap:10px; text-align:left !important; }
.aoc-scope .aoc-drawer .dr-head .logo .wm{ display:block !important; }
.aoc-scope .aoc-drawer .dr-head .logo .wm small{ display:block !important; }
.aoc-scope .aoc-drawer nav.aoc-wpnav-drawer{ display:block !important; width:100% !important; }
.aoc-scope .aoc-wpnav-drawer .aoc-wpnav-ul{ display:block !important; width:100% !important; margin:0 !important; padding:0 !important; }
.aoc-scope .aoc-wpnav-drawer .aoc-wpnav-ul > li{ display:block !important; position:relative !important; float:none !important; width:100% !important; text-align:left !important; margin:0 !important; }
.aoc-scope .aoc-wpnav-drawer .aoc-wpnav-ul > li > a{ display:block !important; text-align:left !important; padding:13px 52px 13px 14px !important; font-size:15.5px !important; font-weight:600 !important; line-height:1.3 !important; color:var(--ink) !important; border-radius:10px; background:transparent !important; }
.aoc-scope .aoc-wpnav-drawer .aoc-wpnav-ul > li > a:hover{ background:var(--paper-2) !important; }
.aoc-scope .aoc-drawer .dsub-toggle{ position:absolute !important; top:3px !important; right:3px !important; left:auto !important; width:42px; height:42px; border-radius:9px; font-size:20px; line-height:1; color:var(--muted); display:flex !important; align-items:center; justify-content:center; background:transparent; }
.aoc-scope .aoc-drawer .dsub-toggle:hover{ background:var(--paper-2); color:var(--ink); }
.aoc-scope .aoc-wpnav-drawer li > ul{ display:none !important; list-style:none !important; width:auto !important; margin:2px 0 6px 12px !important; padding:2px 0 6px !important; border:none; border-left:2px solid var(--line) !important; background:transparent !important; box-shadow:none !important; position:static !important; }
.aoc-scope .aoc-wpnav-drawer li.open > ul{ display:block !important; }
.aoc-scope .aoc-wpnav-drawer li > ul li{ display:block !important; float:none !important; width:100% !important; text-align:left !important; margin:0 !important; }
.aoc-scope .aoc-wpnav-drawer li > ul li a{ display:block !important; text-align:left !important; padding:10px 14px !important; font-size:14px !important; font-weight:500 !important; color:var(--ink-2) !important; border-radius:8px; background:transparent !important; }
.aoc-scope .aoc-wpnav-drawer li > ul li a:hover{ background:var(--paper-2) !important; color:var(--ink) !important; }

/* ==========================================================================
   v8.4.2 — make the desktop mega-menu dropdown ALWAYS visible on hover:
   (1) open via CSS :hover, :focus-within AND a JS .aoc-open class,
   (2) stop Elementor/theme wrappers from clipping or stacking under it.
   ========================================================================== */
.aoc-scope .head-bar .aoc-wpnav-ul > li.aoc-open > a{ color:var(--ink) !important; }
.aoc-scope .head-bar .aoc-wpnav-ul > li.aoc-open > ul,
.aoc-scope .head-bar .aoc-wpnav-ul > li:focus-within > ul{
  visibility:visible !important; opacity:1 !important; pointer-events:auto !important; transform:translateY(0) !important;
}

/* GLOBAL (outside .aoc-scope): the header lives inside Elementor wrappers that
   can clip the dropdown. Lift overflow + raise the header so nothing covers it. */
.elementor-widget-aoc_header{ position:relative; z-index:1000; }
.elementor-widget-aoc_header,
.elementor-widget-aoc_header > .elementor-widget-container{ overflow:visible !important; }
.elementor-element:has(.elementor-widget-aoc_header),
.e-con:has(.elementor-widget-aoc_header),
.e-con-inner:has(.elementor-widget-aoc_header),
.elementor-section:has(.elementor-widget-aoc_header),
.elementor-container:has(.elementor-widget-aoc_header),
.elementor-column:has(.elementor-widget-aoc_header),
.elementor-column-wrap:has(.elementor-widget-aoc_header),
.elementor-widget-wrap:has(.elementor-widget-aoc_header){ overflow:visible !important; }

/* ==========================================================================
   v8.4.3 — desktop mega-menu dropdown as a body-level floating panel. Rendered
   outside every Elementor/theme wrapper, so nothing can clip or cover it.
   Brand tokens (--card/--line/--a2/… + fonts) are copied onto it by aoc.js.
   ========================================================================== */
.aoc-mega-pop{ position:fixed; z-index:2147483000; min-width:230px; max-width:340px; width:max-content;
  background:var(--card,#fff); border:1px solid var(--line,#E6E1D6); border-top:2px solid var(--a2,#C15B3B);
  border-radius:0 0 14px 14px; box-shadow:0 26px 54px -26px rgba(28,26,22,.5); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(4px); pointer-events:none;
  transition:opacity .14s, transform .14s, visibility .14s; }
.aoc-mega-pop.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.aoc-mega-pop ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
.aoc-mega-pop li{ list-style:none !important; margin:0 !important; position:relative; }
.aoc-mega-pop a{ display:block !important; padding:10px 13px !important; border-radius:8px; font-size:13.5px;
  font-weight:500; line-height:1.35; color:var(--ink-2,#5B554A) !important; text-decoration:none !important;
  white-space:nowrap; transition:background .12s, color .12s; }
.aoc-mega-pop a:hover{ background:var(--paper-2,#F2EFE8) !important; color:var(--ink,#1C1A16) !important; }
.aoc-mega-pop ul ul{ margin-top:4px !important; padding-left:8px !important; border-left:2px solid var(--line,#E6E1D6); }

/* =====================================================================
   v9 additions — WooCommerce-backed cart, live grids, artwork upload
   feedback, toasts, pagination, and AOC-styled Woo checkout.
===================================================================== */

/* real product photos inside the CSS-drawn tile frames */
.aoc-scope .pimg .aoc-ptile-img{width:100%;height:100%;object-fit:cover;}
.aoc-scope .pimg img{width:100%;height:100%;object-fit:cover;}

/* option add-on note shown in cart / checkout item meta */
.aoc-scope .aoc-addon,.woocommerce .aoc-addon{font-family:var(--mono);font-size:11px;color:var(--muted);}
.aoc-artflag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:20px;background:#FFF3E9;color:#B6321F;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle;}

/* add-to-cart busy state */
.aoc-scope .btn.is-busy{opacity:.66;pointer-events:none;}

/* coupon row on the cart page */
.aoc-scope .aoc-coupon{display:flex;gap:8px;margin-top:12px;}
.aoc-scope .aoc-coupon input{flex:1;min-width:0;padding:11px 13px;border:1.5px solid var(--line-2);border-radius:9px;font-family:var(--mono);font-size:12.5px;background:var(--card);color:var(--ink);outline:none;}
.aoc-scope .aoc-coupon input:focus{border-color:var(--a2);}
.aoc-scope .aoc-coupon .btn{padding:11px 18px;font-size:13px;}

/* numbered pagination for live archive grids */
.aoc-scope .aoc-pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:clamp(26px,4vw,40px);font-family:var(--mono);font-size:13px;}
.aoc-scope .aoc-pager .page-numbers{min-width:38px;height:38px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--line-2);border-radius:9px;color:var(--ink-2);transition:.13s;}
.aoc-scope .aoc-pager .page-numbers:hover{border-color:var(--ink);color:var(--ink);}
.aoc-scope .aoc-pager .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600;}
.aoc-scope.aoc-dark .aoc-pager .page-numbers{border-color:#2E2E36;color:#B7B2A6;}
.aoc-scope.aoc-dark .aoc-pager .page-numbers.current{background:var(--a2);border-color:var(--a2);color:#0C0C0E;}

/* toast for add-to-cart / upload feedback */
.aoc-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:1400;max-width:min(420px,92vw);padding:13px 20px;border-radius:12px;background:#1C1A16;color:#FBF9F4;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:14px;line-height:1.45;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:.2s;}
.aoc-toast.on{opacity:1;visibility:visible;transform:translate(-50%,0);}
.aoc-toast.err{background:#B6321F;}

/* editor-only placeholder where the live Woo checkout will render */
.aoc-scope .aoc-editor-note{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:26px;text-align:center;font-size:14px;color:var(--ink-2);line-height:1.6;background:var(--paper-2);}
.aoc-scope .aoc-editor-note b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--a2);display:block;margin-bottom:8px;}

/* ---- WooCommerce checkout, dressed in the AOC system ----------------------
   Structure-agnostic on purpose. Depending on the WooCommerce version and the
   active theme, the billing/shipping columns sit either directly inside
   #customer_details or nested in a .col2-set. Treating BOTH as flex rows with
   the columns as flex items works in either case — and never traps the whole
   form in one half of a grid, which is what a grid on #customer_details does
   when its only child is a single .col2-set.                                */
.aoc-scope .aoc-woo-checkout{margin-top:26px;}
.aoc-scope .aoc-woo-checkout form.checkout{margin:0;}

/* the two columns, however they happen to be nested */
.aoc-scope .aoc-woo-checkout #customer_details,
.aoc-scope .aoc-woo-checkout .col2-set{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,34px);align-items:flex-start;width:auto;float:none;}
.aoc-scope .aoc-woo-checkout .col2-set{flex:1 1 100%;}
.aoc-scope .aoc-woo-checkout .col-1,
.aoc-scope .aoc-woo-checkout .col-2{flex:1 1 320px;min-width:0;width:auto;float:none;padding:0;}
.aoc-scope .aoc-woo-checkout::after{content:"";display:table;clear:both;}

/* desktop: details on the left, order summary sticky on the right */
@media(min-width:1001px){
  .aoc-scope .aoc-woo-checkout form.checkout{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(26px,3.5vw,46px);align-items:start;}
  .aoc-scope .aoc-woo-checkout #customer_details{grid-column:1;grid-row:1 / span 2;}
  .aoc-scope .aoc-woo-checkout #order_review_heading{grid-column:2;grid-row:1;margin-top:0;}
  .aoc-scope .aoc-woo-checkout #order_review{grid-column:2;grid-row:2;position:sticky;top:92px;}
  .aoc-scope .aoc-woo-checkout .woocommerce-NoticeGroup,
  .aoc-scope .aoc-woo-checkout .woocommerce-form-coupon-toggle,
  .aoc-scope .aoc-woo-checkout .woocommerce-form-coupon{grid-column:1 / -1;}
}

/* headings */
.aoc-scope .aoc-woo-checkout h3,
.aoc-scope .aoc-woo-checkout #order_review_heading{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.02em;margin:0 0 16px;color:var(--ink);}
.aoc-scope .aoc-woo-checkout .woocommerce-billing-fields h3,
.aoc-scope .aoc-woo-checkout .woocommerce-shipping-fields h3{padding-bottom:12px;border-bottom:1.5px solid var(--line);}
.aoc-scope .aoc-woo-checkout .woocommerce-additional-fields{margin-top:26px;}

/* fields */
.aoc-scope .aoc-woo-checkout .woocommerce-billing-fields__field-wrapper,
.aoc-scope .aoc-woo-checkout .woocommerce-shipping-fields__field-wrapper,
.aoc-scope .aoc-woo-checkout .woocommerce-additional-fields__field-wrapper{display:flex;flex-wrap:wrap;gap:0 12px;}
.aoc-scope .aoc-woo-checkout p.form-row{margin:0 0 13px;padding:0;flex:1 1 100%;min-width:0;display:block;}
.aoc-scope .aoc-woo-checkout p.form-row-first,
.aoc-scope .aoc-woo-checkout p.form-row-last{flex:1 1 calc(50% - 6px);width:auto;float:none;}
.aoc-scope .aoc-woo-checkout label{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.aoc-scope .aoc-woo-checkout label .required{color:var(--a2);border:none;text-decoration:none;}
.aoc-scope .aoc-woo-checkout .input-text,
.aoc-scope .aoc-woo-checkout select,
.aoc-scope .aoc-woo-checkout textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line-2);border-radius:9px;font-family:var(--body);font-size:14px;line-height:1.4;color:var(--ink);background:var(--card);outline:none;transition:.16s;height:auto;box-shadow:none;}
.aoc-scope .aoc-woo-checkout textarea{min-height:88px;resize:vertical;}
.aoc-scope .aoc-woo-checkout .input-text:focus,
.aoc-scope .aoc-woo-checkout select:focus,
.aoc-scope .aoc-woo-checkout textarea:focus{border-color:var(--a2);}
.aoc-scope .aoc-woo-checkout .woocommerce-input-wrapper{display:block;width:100%;}

/* select2 (country / state) matched to the plain inputs */
.aoc-scope .aoc-woo-checkout .select2-container--default .select2-selection--single{height:auto;padding:10px 13px;border:1.5px solid var(--line-2);border-radius:9px;background:var(--card);}
.aoc-scope .aoc-woo-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{padding:0;line-height:1.4;font-size:14px;color:var(--ink);}
.aoc-scope .aoc-woo-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:8px;}

/* checkboxes (ship to different address, terms, create account) */
.aoc-scope .aoc-woo-checkout .form-row.woocommerce-validated label.checkbox,
.aoc-scope .aoc-woo-checkout label.checkbox,
.aoc-scope .aoc-woo-checkout .woocommerce-form__label-for-checkbox{display:flex;align-items:flex-start;gap:9px;font-family:var(--body);font-size:13.5px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-2);cursor:pointer;}
.aoc-scope .aoc-woo-checkout input[type=checkbox]{width:17px;height:17px;margin:1px 0 0;accent-color:var(--a2);flex-shrink:0;}
.aoc-scope .aoc-woo-checkout #ship-to-different-address{margin-bottom:14px;}
.aoc-scope .aoc-woo-checkout #ship-to-different-address h3{border:none;padding:0;margin:0;font-size:15px;}

/* order summary card */
.aoc-scope .aoc-woo-checkout #order_review,
.aoc-scope .aoc-woo-checkout .woocommerce-checkout-review-order{border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);padding:20px;}
.aoc-scope .aoc-woo-checkout table.shop_table{width:100%;border:none;border-collapse:collapse;font-size:13.5px;margin:0;background:none;border-radius:0;}
.aoc-scope .aoc-woo-checkout table.shop_table th,
.aoc-scope .aoc-woo-checkout table.shop_table td{padding:10px 0;border:none;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-weight:400;color:var(--ink-2);}
.aoc-scope .aoc-woo-checkout table.shop_table thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.aoc-scope .aoc-woo-checkout table.shop_table td.product-total,
.aoc-scope .aoc-woo-checkout table.shop_table th.product-total,
.aoc-scope .aoc-woo-checkout table.shop_table tfoot td{text-align:right;font-family:var(--mono);white-space:nowrap;}
.aoc-scope .aoc-woo-checkout table.shop_table td.product-name{color:var(--ink);font-weight:600;}
.aoc-scope .aoc-woo-checkout .product-quantity{font-family:var(--mono);color:var(--muted);font-weight:400;}
.aoc-scope .aoc-woo-checkout table.shop_table tfoot th{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);}
.aoc-scope .aoc-woo-checkout table.shop_table tfoot .order-total th,
.aoc-scope .aoc-woo-checkout table.shop_table tfoot .order-total td{font-size:17px;font-weight:600;color:var(--ink);border-bottom:none;padding-top:14px;}

/* the customer's chosen options, printed under each line */
.aoc-scope .aoc-woo-checkout .variation,
.aoc-scope .aoc-woo-checkout dl.variation{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin:5px 0 0;line-height:1.55;}
.aoc-scope .aoc-woo-checkout dl.variation dt,
.aoc-scope .aoc-woo-checkout dl.variation dd{display:inline;margin:0;font-weight:400;}
.aoc-scope .aoc-woo-checkout dl.variation dt{color:var(--ink-2);}
.aoc-scope .aoc-woo-checkout dl.variation dd{margin-right:9px;}
.aoc-scope .aoc-woo-checkout dl.variation dd p{display:inline;margin:0;}

/* payment methods */
.aoc-scope .aoc-woo-checkout #payment{background:none;border-radius:0;margin-top:18px;}
.aoc-scope .aoc-woo-checkout .wc_payment_methods{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:9px;}
.aoc-scope .aoc-woo-checkout .wc_payment_method{padding:0;}
.aoc-scope .aoc-woo-checkout .wc_payment_method>label{display:flex;align-items:center;gap:10px;padding:13px 15px;border:1.5px solid var(--line-2);border-radius:11px;background:var(--card);font-family:var(--body);font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);margin:0;cursor:pointer;transition:.13s;}
.aoc-scope .aoc-woo-checkout .wc_payment_method>label:hover{border-color:var(--ink);}
.aoc-scope .aoc-woo-checkout .wc_payment_method input[type=radio]{width:17px;height:17px;accent-color:var(--a2);flex-shrink:0;}
.aoc-scope .aoc-woo-checkout .wc_payment_method input[type=radio]:checked+label{border-color:var(--a2);background:var(--paper-2);}
.aoc-scope .aoc-woo-checkout .payment_box{font-size:13px;color:var(--ink-2);line-height:1.55;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:8px 0 0;}
.aoc-scope .aoc-woo-checkout .payment_box::before{display:none;}
.aoc-scope .aoc-woo-checkout .payment_box p:last-child{margin-bottom:0;}

/* place order */
.aoc-scope .aoc-woo-checkout #place_order,
.aoc-scope .aoc-woo-checkout .button.alt{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:15px 28px;border:none;border-radius:var(--pill);background:var(--a2);color:#fff;font-family:var(--body);font-weight:600;font-size:15.5px;line-height:1;cursor:pointer;transition:filter .15s,transform .15s;}
.aoc-scope .aoc-woo-checkout #place_order:hover{filter:brightness(1.06);transform:translateY(-1px);}
.aoc-scope .aoc-woo-checkout .woocommerce-terms-and-conditions-wrapper{margin-bottom:14px;font-size:13px;color:var(--muted);}

/* notices, coupon toggle */
.aoc-scope .aoc-woo-checkout .woocommerce-info,
.aoc-scope .aoc-woo-checkout .woocommerce-message,
.aoc-scope .aoc-woo-checkout .woocommerce-error,
.aoc-scope .aoc-woo-checkout .woocommerce-NoticeGroup ul{border:1px solid var(--line);border-left:3px solid var(--a1);border-radius:11px;background:var(--paper-2);padding:14px 16px;font-size:13.5px;color:var(--ink-2);list-style:none;margin:0 0 18px;}
.aoc-scope .aoc-woo-checkout .woocommerce-error{border-left-color:#B6321F;color:#B6321F;}
.aoc-scope .aoc-woo-checkout .woocommerce-info::before,
.aoc-scope .aoc-woo-checkout .woocommerce-message::before,
.aoc-scope .aoc-woo-checkout .woocommerce-error::before{display:none;}
.aoc-scope .aoc-woo-checkout .woocommerce-form-coupon{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.aoc-scope .aoc-woo-checkout .woocommerce-form-coupon p{margin:0;}
.aoc-scope .aoc-woo-checkout .blockUI.blockOverlay{background:var(--paper)!important;opacity:.6!important;}

@media(max-width:620px){
  .aoc-scope .aoc-woo-checkout p.form-row-first,
  .aoc-scope .aoc-woo-checkout p.form-row-last{flex:1 1 100%;}
}

/* ---- variable product states ---- */
.aoc-scope .aoc-varnote{margin:10px 0 0;font-family:var(--mono);font-size:12px;line-height:1.5;color:#B6321F;}
.aoc-scope .aoc-product .btn.is-off{opacity:.45;pointer-events:none;filter:grayscale(.4);}
.aoc-scope .pills button[data-value],.aoc-scope .swatches i[data-value]{position:relative;}


/* ============================================================================
   v9.3 — MEASURED SKIN   (replaces the v9.2 sharp skin)
   ----------------------------------------------------------------------------
   Appearance only. No markup, class names, behaviour or breakpoints change.

   The "generated" look does not come from rounded corners. It comes from
   UNIFORMITY: the same radius, the same blurred shadow and the same hairline
   border applied to every element regardless of what that element does. That
   sameness is what reads as machine-made, because a person designing by hand
   makes different decisions for a product card than for a button.

   So this layer varies treatment by role instead of pushing either extreme:

     · radius scales with the size of the thing. Large panels 6px, cards 5px,
       controls 4px, small chips 3px. Nothing is a capsule; nothing is a
       hard square.
     · borders rest quiet (line) and commit on interaction (ink). Weight is
       reserved for the few places that structure the page.
     · shadows are short, low and tinted with the brand ink rather than black,
       and only appear on hover — depth as a response, not as decoration.
     · the crop-mark motif reads clearly without shouting.
   ========================================================================== */

.aoc-scope{
  --r:6px;          /* large panels, media, hero blocks   */
  --r-card:5px;     /* product cards, tiles               */
  --r-ctl:4px;      /* buttons, inputs, pills             */
  --r-chip:3px;     /* badges, tags, small labels         */
  --pill:4px;       /* buttons: settled, not capsules     */
  --rule:1px;       /* resting hairline                   */
  --rule-md:1.5px;  /* committed / active                 */
  --lift:0 6px 16px -8px rgba(28,26,22,.30);
  --lift-sm:0 4px 10px -6px rgba(28,26,22,.26);
}

/* ---- 1. TYPE — confident, not cramped ------------------------------------ */
.aoc-scope h1,.aoc-scope h2,.aoc-scope h3.disp{letter-spacing:-.035em;line-height:1.01;}
.aoc-scope .eyebrow{letter-spacing:.17em;font-weight:600;font-size:11px;}
.aoc-scope .opt .ol,.aoc-scope .field label,.aoc-scope .foot h4{letter-spacing:.12em;}

/* ---- 2. SURFACES — radius by role, quiet borders ------------------------- */
.aoc-scope .biz,.aoc-scope .bizstrip,.aoc-scope .cd-corp,.aoc-scope .sg-feat,
.aoc-scope .hero-art,.aoc-scope .uv-vis,.aoc-scope .pp-media,.aoc-scope .scene,
.aoc-scope .summary,.aoc-scope .qpanel,.aoc-scope .co-card{border-radius:var(--r);}

.aoc-scope .cat,.aoc-scope .ptile,.aoc-scope .fin,.aoc-scope .st-tile,
.aoc-scope .pr-card,.aoc-scope .ncard,.aoc-scope .rev,.aoc-scope .pd-ship,
.aoc-scope .ac-vis,.aoc-scope .uv-theme,.aoc-scope .igtile{border-radius:var(--r-card);}

.aoc-scope .ci-img,.aoc-scope .sum-item .si-img,.aoc-scope .pp-thumbs .t{border-radius:var(--r-ctl);}

/* rest quiet */
.aoc-scope .cat,.aoc-scope .ptile,.aoc-scope .fin,.aoc-scope .st-tile,
.aoc-scope .pr-card,.aoc-scope .co-card,.aoc-scope .rev,.aoc-scope .pd-ship{
  border:var(--rule) solid var(--line-2);
}
/* commit on hover: a short lift, the border firms to ink, no scaling */
.aoc-scope .cat:hover,.aoc-scope .ptile:hover,.aoc-scope .fin:hover,
.aoc-scope .st-tile:hover,.aoc-scope .pr-card:hover,.aoc-scope .scene:hover{
  transform:translateY(-2px);
  box-shadow:var(--lift);
  border-color:var(--ink);
}
.aoc-scope .st-tile:hover{transform:translateY(-2px) rotate(0);}
.aoc-scope .ac-item:hover,.aoc-scope .uv-theme:hover,.aoc-scope .wa-piece:hover,
.aoc-scope .igtile:hover{transform:translateY(-2px);}
.aoc-scope .ac-vis{box-shadow:var(--lift-sm);}

.aoc-scope.aoc-dark .ptile,.aoc-scope.aoc-dark .ncard,.aoc-scope.aoc-dark .rev,
.aoc-scope.aoc-dark .pd-ship,.aoc-scope.aoc-dark .qpanel{border-color:#2E2E36;}
.aoc-scope.aoc-dark .ptile:hover,.aoc-scope.aoc-dark .ncard:hover{
  border-color:#36E6E0;box-shadow:0 6px 18px -8px rgba(54,230,224,.34);
}

/* ---- 3. BUTTONS — settled corners, real weight, gentle response ---------- */
.aoc-scope .btn{
  border-radius:var(--pill);
  font-weight:650;
  letter-spacing:-.002em;
  transition:transform .14s,box-shadow .14s,background .14s,color .14s;
}
.aoc-scope .btn:hover{transform:translateY(-1.5px);box-shadow:var(--lift-sm);}
.aoc-scope .btn:active{transform:translateY(0);box-shadow:none;}
.aoc-scope .btn-o{border:var(--rule-md) solid var(--ink);}
.aoc-scope .btn-a:hover{filter:brightness(1.04);}
.aoc-scope.aoc-dark .btn-o{border-color:#EDE7DA;}

/* ---- 4. CONTROLS --------------------------------------------------------- */
.aoc-scope .pills button{
  border-radius:var(--r-ctl);
  border:var(--rule) solid var(--line-2);
  font-weight:600;
  transition:.13s;
}
.aoc-scope .pills button:hover{border-color:var(--ink);color:var(--ink);}
.aoc-scope .pills button.on{
  background:var(--ink);border-color:var(--ink);color:var(--paper);
}
.aoc-scope.aoc-dark .pills button{border-color:#2E2E36;}
.aoc-scope.aoc-dark .pills button.on{background:#36E6E0;border-color:#36E6E0;color:#0C0C0E;}

/* swatches stay circular — they read as pigment, not as UI */
.aoc-scope .swatches i{box-shadow:0 0 0 var(--rule) var(--line-2);}
.aoc-scope .swatches i.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink);}
.aoc-scope.aoc-dark .swatches i.on{box-shadow:0 0 0 2px #0C0C0E,0 0 0 3.5px #EDE7DA;}

.aoc-scope .field input,.aoc-scope .field select,.aoc-scope .field textarea,
.aoc-scope .selc,.aoc-scope .qty,.aoc-scope .upload{
  border-radius:var(--r-ctl);border-width:var(--rule-md);border-color:var(--line-2);
}
.aoc-scope .field input:focus,.aoc-scope .field select:focus,
.aoc-scope .field textarea:focus,.aoc-scope .selc:focus{border-color:var(--a2);box-shadow:none;}
.aoc-scope .upload{border-style:dashed;}

/* ---- 5. THE PRESS MOTIF — legible, not loud ----------------------------- */
.aoc-scope .crop::before,.aoc-scope .crop::after{width:15px;height:15px;}
.aoc-scope .crop::before{border-top:var(--rule-md) solid var(--ink-2);border-left:var(--rule-md) solid var(--ink-2);}
.aoc-scope .crop::after{border-bottom:var(--rule-md) solid var(--ink-2);border-right:var(--rule-md) solid var(--ink-2);}
.aoc-scope.aoc-dark .crop::before{border-top-color:#6E6E7A;border-left-color:#6E6E7A;}
.aoc-scope.aoc-dark .crop::after{border-bottom-color:#6E6E7A;border-right-color:#6E6E7A;}

/* section heads: a hairline, not a slab */
.aoc-scope .sh{border-bottom:var(--rule) solid var(--line);padding-bottom:16px;}
.aoc-scope.aoc-dark .sh{border-bottom-color:#26262B;}
.aoc-scope .trust,.aoc-scope .st-strip{border-top-width:var(--rule);border-bottom-width:var(--rule);border-color:var(--line);}

/* ---- 6. HEADER / FOOTER / DRAWERS --------------------------------------- */
.aoc-scope .head{border-bottom:var(--rule-md) solid var(--line-2);}
.aoc-scope.aoc-dark .head{border-bottom-color:#26262B;}
.aoc-scope .logo .mk{border-radius:var(--r-ctl);}
/* nav: an underline on the active item reads more intentional than a pill */
.aoc-scope .nav a{border-radius:0;border-bottom:2px solid transparent;padding:9px 11px;font-weight:600;}
.aoc-scope .nav a:hover,.aoc-scope .nav a.on{background:none;border-bottom-color:var(--a2);color:var(--ink);}
.aoc-scope.aoc-dark .nav a:hover,.aoc-scope.aoc-dark .nav a.on{background:none;color:#fff;}
.aoc-scope .icnbtn{border-radius:var(--r-ctl);}
.aoc-scope .cartdot{border-radius:var(--r-chip);}
/* Shop / Wholesale toggle — unmistakably a switch, just not a capsule */
.aoc-scope .seg{border-radius:var(--r-ctl);border:var(--rule) solid var(--line-2);padding:3px;}
.aoc-scope .seg button{border-radius:var(--r-chip);font-weight:600;}
.aoc-scope .foot-soc a{border-radius:var(--r-ctl);}
.aoc-scope .cd-head{border-bottom:var(--rule) solid var(--line);}
.aoc-scope .cd-foot{border-top:var(--rule) solid var(--line);}

/* ---- 7. TILES & CHIPS ---------------------------------------------------- */
.aoc-scope .pbadge{border-radius:var(--r-chip);letter-spacing:.05em;padding:4px 9px;}
.aoc-scope .pimg{border-bottom:var(--rule) solid var(--line);}
.aoc-scope.aoc-dark .pimg{border-bottom-color:#24242B;}
.aoc-scope .st-tag{border-radius:var(--r-chip);border-width:var(--rule-md);}
.aoc-scope .pr-uses span{border-radius:var(--r-chip);}
.aoc-scope .hero-art .tag{border-radius:var(--r-ctl);}

/* ---- 8. CART / CHECKOUT -------------------------------------------------- */
.aoc-scope .pay label{border-radius:var(--r-ctl);border-width:var(--rule-md);}
.aoc-scope .pay label.on{box-shadow:none;border-color:var(--a2);}
.aoc-scope .aoc-coupon input{border-radius:var(--r-ctl);}
.aoc-scope .confirm .ordref{border-radius:var(--r-ctl);}
.aoc-scope .confirm .tick{border-radius:50%;border:none;}
.aoc-scope .aoc-pager .page-numbers{border-radius:var(--r-ctl);border-color:var(--line-2);}
.aoc-scope .aoc-pager .page-numbers.current{border-color:var(--ink);}
.aoc-scope .aoc-woo-checkout .input-text,
.aoc-scope .aoc-woo-checkout select,
.aoc-scope .aoc-woo-checkout textarea,
.aoc-scope .aoc-woo-checkout .select2-container--default .select2-selection--single{
  border-radius:var(--r-ctl);border-color:var(--line-2);
}
.aoc-scope .aoc-woo-checkout #order_review,
.aoc-scope .aoc-woo-checkout .woocommerce-checkout-review-order{
  border-radius:var(--r);border:var(--rule) solid var(--line);
}
.aoc-scope .aoc-woo-checkout .wc_payment_method>label{border-radius:var(--r-ctl);border-color:var(--line-2);}
.aoc-scope .aoc-woo-checkout .wc_payment_method>label:hover{border-color:var(--ink);}
.aoc-scope .aoc-woo-checkout #place_order,
.aoc-scope .aoc-woo-checkout .button.alt{border-radius:var(--pill);border:none;font-weight:650;}
.aoc-scope .aoc-woo-checkout #place_order:hover{transform:translateY(-1.5px);box-shadow:var(--lift-sm);filter:brightness(1.04);}
.aoc-scope .aoc-woo-checkout .woocommerce-info,
.aoc-scope .aoc-woo-checkout .woocommerce-message,
.aoc-scope .aoc-woo-checkout .woocommerce-error,
.aoc-scope .aoc-woo-checkout .woocommerce-NoticeGroup ul{border-radius:var(--r-ctl);border-left-width:3px;}
.aoc-toast{border-radius:var(--r-ctl);}

/* ---- 9. MOTION PREFERENCES ---------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .aoc-scope .btn:hover,.aoc-scope .ptile:hover,.aoc-scope .cat:hover,
  .aoc-scope .fin:hover,.aoc-scope .st-tile:hover,.aoc-scope .pr-card:hover{transform:none;}
}

/* ============================================================================
   v9.3.1 — CORRECTIONS
   Appearance only: hover colour, reading size, search panel, mega menu.
   ========================================================================== */

/* ---- 1. NO PINK -----------------------------------------------------------
   WooCommerce ships a mauve-pink (#a46497) as its default button colour, and
   it bleeds onto anything Woo renders — add-to-cart, Place Order, coupon and
   form submits. It is not a brand colour and was never ours. Every interactive
   state resolves to brand ink instead.                                       */
.aoc-scope .btn:hover,
.aoc-scope .btn:focus-visible,
.aoc-scope .btn-a:hover,
.aoc-scope .btn-a:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink);filter:none;}
.aoc-scope .btn-a:active,.aoc-scope .btn:active{background:var(--ink);color:var(--paper);}
.aoc-scope .btn-o:hover{background:var(--ink);color:var(--paper);}
.aoc-scope.aoc-dark .btn:hover,.aoc-scope.aoc-dark .btn-a:hover{background:#EDE7DA;color:#0C0C0E;border-color:#EDE7DA;}

/* Woo's own buttons, wherever they render inside our scope */
.aoc-scope .woocommerce a.button,.aoc-scope .woocommerce button.button,
.aoc-scope .woocommerce input.button,.aoc-scope .woocommerce #respond input#submit,
.aoc-scope a.button,.aoc-scope button.button,.aoc-scope input.button,
.aoc-scope .aoc-woo-checkout #place_order,.aoc-scope .aoc-woo-checkout .button.alt,
.aoc-scope .added_to_cart{
  background:var(--ink);color:var(--paper);border-radius:var(--r-ctl);font-weight:650;
}
.aoc-scope .woocommerce a.button:hover,.aoc-scope .woocommerce button.button:hover,
.aoc-scope .woocommerce input.button:hover,.aoc-scope .woocommerce #respond input#submit:hover,
.aoc-scope a.button:hover,.aoc-scope button.button:hover,.aoc-scope input.button:hover,
.aoc-scope .aoc-woo-checkout #place_order:hover,.aoc-scope .aoc-woo-checkout .button.alt:hover{
  background:#000;color:var(--paper);filter:none;
}
/* focus ring in ink, not accent — accents read as an error state on a button */
.aoc-scope :focus-visible{outline-color:var(--ink);}
.aoc-scope .field input:focus,.aoc-scope .field select:focus,
.aoc-scope .field textarea:focus,.aoc-scope .selc:focus,
.aoc-scope .aoc-woo-checkout .input-text:focus,
.aoc-scope .aoc-woo-checkout select:focus,
.aoc-scope .aoc-woo-checkout textarea:focus{border-color:var(--ink);}
.aoc-scope .pay label.on,.aoc-scope .aoc-woo-checkout .wc_payment_method input[type=radio]:checked+label{
  border-color:var(--ink);background:var(--paper-2);
}

/* ---- 2. READING SIZE ------------------------------------------------------
   The old 14.5px base left pages looking thin and under-filled. 16px is the
   comfortable web baseline; the component sizes below move with it so the
   proportions stay right rather than one value drifting out of scale.        */
.aoc-scope{font-size:16px;}
.aoc-scope .sh .lead{font-size:16px;}
.aoc-scope .hero .sub{font-size:clamp(16.5px,1.8vw,19px);}
.aoc-scope .pname{font-size:15.5px;}
.aoc-scope .ptheme{font-size:11.5px;}
.aoc-scope .pfrom{font-size:14.5px;}
.aoc-scope .cat .cn{font-size:16px;}
.aoc-scope .cat .ck{font-size:12px;}
.aoc-scope .step p,.aoc-scope .fin p,.aoc-scope .sc-body p{font-size:15px;}
.aoc-scope .step h4{font-size:18px;}
.aoc-scope .pp-desc{font-size:16px;}
.aoc-scope .pills button{font-size:14.5px;padding:10px 16px;}
.aoc-scope .opt .ol{font-size:11.5px;}
.aoc-scope .opt .ol b{font-size:13.5px;}
.aoc-scope .btn{font-size:15px;padding:14px 25px;}
.aoc-scope .btn-lg{font-size:16px;padding:16px 30px;}
.aoc-scope .field input,.aoc-scope .field select,.aoc-scope .field textarea,
.aoc-scope .selc{font-size:15px;}
.aoc-scope .spec,.aoc-scope .tiers .t{font-size:13.5px;}
.aoc-scope .rev p{font-size:14.5px;}
.aoc-scope .ci-name{font-size:15px;}
.aoc-scope .ci-opt{font-size:11.5px;}
.aoc-scope .nav a{font-size:15px;}
.aoc-scope .foot li{font-size:14.5px;}
.aoc-scope .foot .bl{font-size:14.5px;}
.aoc-scope .trust-in,.aoc-scope .st-strip{font-size:13px;}
.aoc-scope .sum-line{font-size:14.5px;}
.aoc-scope .aoc-woo-checkout .input-text,.aoc-scope .aoc-woo-checkout select,
.aoc-scope .aoc-woo-checkout textarea{font-size:15px;}
.aoc-scope .aoc-woo-checkout table.shop_table{font-size:14.5px;}

/* ---- 3. HEADER SEARCH ----------------------------------------------------- */
.aoc-scope .aoc-search{position:relative;display:flex;align-items:center;}
.aoc-scope .aoc-search-panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:520;
  display:flex;gap:8px;align-items:center;width:min(420px,84vw);
  background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r-ctl);
  padding:8px;box-shadow:var(--lift);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;
}
.aoc-scope .aoc-search.open .aoc-search-panel{opacity:1;visibility:visible;transform:none;}
.aoc-scope .aoc-search-panel input[type=search]{
  flex:1;min-width:0;padding:11px 13px;font-family:var(--body);font-size:15px;
  color:var(--ink);background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--r-chip);outline:none;
}
.aoc-scope .aoc-search-panel input[type=search]:focus{border-color:var(--ink);}
.aoc-scope .aoc-search-panel .btn{padding:11px 18px;font-size:14px;white-space:nowrap;}
.aoc-scope.aoc-dark .aoc-search-panel{background:#131316;border-color:#3A3A44;}
.aoc-scope.aoc-dark .aoc-search-panel input[type=search]{background:#0C0C0E;border-color:#2E2E36;color:#EDE7DA;}
@media(max-width:620px){
  .aoc-scope .aoc-search-panel{position:fixed;left:12px;right:12px;top:auto;width:auto;}
}

/* ---- 4. MEGA MENU — shared chrome ------------------------------------------
   The old "tiered" stylesheet that lived here (three fixed panel widths, CSS
   multi-column lists, !important on almost every line) was removed in 9.8.3.

   Its .aoc-mega-pop.aoc-mega-c1{width:270px} was the cause of the horizontal
   scrollbar: the panel was pinned to 270px while its list items are nowrap, so
   anything wider simply overflowed — and because the panel also sets
   overflow-y:auto, CSS computes overflow-x to auto as well, which is where the
   sideways scroll came from.

   The panel is now measured and sized in aoc.js so every sub-item of the
   hovered category is visible at once, with no scrolling in either direction.
   Only the shared chrome lives here.                                        */
.aoc-mega-pop{
  background:var(--paper,#FBF9F4);
  border:1px solid var(--line-2,#D5CAB4);
  border-top:2px solid var(--ink,#1C1A16);
  border-radius:0 0 8px 8px;
  box-shadow:0 18px 44px -20px rgba(28,26,22,.30);
  overscroll-behavior:contain;
  transition:opacity .13s,transform .13s,visibility .13s;
}
/* never scroll sideways — the panel is sized to fit instead */
.aoc-mega-pop{ overflow-x:hidden !important; }

/* slim scrollbar so a genuinely long menu never looks broken */
.aoc-mega-pop::-webkit-scrollbar{width:8px;}
.aoc-mega-pop::-webkit-scrollbar-thumb{background:var(--line-2,#D5CAB4);border-radius:8px;}
.aoc-mega-pop::-webkit-scrollbar-track{background:transparent;}

/* dark treatment (Neon world) */
.aoc-mega-pop.aoc-pop-dark{background:#131316;border-color:#2E2E36;border-top-color:#36E6E0;}
.aoc-mega-pop.aoc-pop-dark a{color:#B7B2A6 !important;}
.aoc-mega-pop.aoc-pop-dark a:hover{background:#1E1E24 !important;color:#fff !important;}

/* ---- 5. SEARCH RESULTS ----------------------------------------------------- */
.aoc-scope .sr-head{padding:clamp(28px,4vw,48px) 0 0;}
.aoc-scope .sr-head h1{font-size:clamp(26px,3.6vw,40px);font-weight:700;letter-spacing:-.03em;margin-top:10px;}
.aoc-scope .sr-head h1 em{font-style:normal;color:var(--a2);}
.aoc-scope .sr-count{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:12px;}
.aoc-scope .sr-form{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0 0;max-width:560px;}
.aoc-scope .sr-form input[type=search]{
  flex:1;min-width:200px;padding:13px 15px;font-family:var(--body);font-size:15px;
  color:var(--ink);background:var(--card);border:1.5px solid var(--line-2);
  border-radius:var(--r-ctl);outline:none;transition:.14s;
}
.aoc-scope .sr-form input[type=search]:focus{border-color:var(--ink);}
.aoc-scope .sr-empty{padding:clamp(30px,5vw,56px) 0;border-top:1px solid var(--line);margin-top:26px;}
.aoc-scope .sr-empty h2{font-size:clamp(20px,2.6vw,26px);font-weight:700;}
.aoc-scope .sr-empty p{color:var(--ink-2);font-size:15.5px;margin:12px 0 0;max-width:520px;line-height:1.6;}
.aoc-scope .sr-sugg{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
.aoc-scope .sr-sugg a{
  font-family:var(--mono);font-size:13px;padding:9px 15px;
  border:1.5px solid var(--line-2);border-radius:var(--r-ctl);
  color:var(--ink-2);transition:.13s;
}
.aoc-scope .sr-sugg a:hover{border-color:var(--ink);color:var(--ink);}
.aoc-scope .sr-help{margin-top:26px;font-size:14.5px;color:var(--muted);line-height:1.7;}
.aoc-scope .sr-help b{color:var(--ink);font-weight:600;}

/* ---- 6b. NO PINK, ANYWHERE -------------------------------------------------
   The earlier override was scoped to .aoc-scope, so any button rendered by
   WooCommerce or the theme OUTSIDE our wrapper kept Woo's default mauve-pink
   (#a46497). These rules are unscoped and marked important so the pink cannot
   survive on any button on the site, whoever printed it.                    */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce #respond input#submit,.woocommerce #respond input#submit.alt,
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce span.onsale,
.woocommerce-page a.button,.woocommerce-page button.button,.woocommerce-page input.button{
  background-color:#1C1A16 !important;
  color:#FBF9F4 !important;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,.woocommerce-page button.button:hover,.woocommerce-page input.button:hover{
  background-color:#000 !important;
  color:#FBF9F4 !important;
}
.woocommerce .star-rating span::before,.woocommerce p.stars a::before{color:#E89A2C !important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#1C1A16 !important;}
/* our own buttons, wherever they end up in the DOM */
.btn:hover,.btn:focus-visible,.aoc-scope .btn:hover,.aoc-scope .btn:focus-visible{
  background-color:#1C1A16 !important;color:#FBF9F4 !important;
}
.aoc-scope .btn-a:hover,.aoc-scope .btn-a:active,.aoc-scope .btn-a:focus-visible{
  background-color:#1C1A16 !important;color:#FBF9F4 !important;
}
.aoc-scope.aoc-dark .btn:hover,.aoc-scope.aoc-dark .btn-a:hover{
  background-color:#EDE7DA !important;color:#0C0C0E !important;
}


/* ---- mega menu: names only, no product thumbnails -------------------------
   The menu shows category and product NAMES as text links, matching how the
   sub-categories read. Any thumbnail the renderer emits is hidden, and the
   price chip is muted so a name-only column stays clean.                     */
.aoc-mega-pop .mg-list .mg-t{display:none !important;}
.aoc-mega-pop .mg-list a{padding-left:0 !important;}
.aoc-mega-pop .mg-list .mg-n{font-size:13.5px;}
.aoc-mega-pop .mg-list .mg-p{display:none !important;}

/* ---- dark world: paint the wrapper itself --------------------------------
   The base .aoc-scope sets a light paper background. Every .aoc-dark rule
   restyles CHILD elements, but nothing set the dark background on the wrapper,
   so a dark (signage/neon) widget kept a light background while its text was
   forced to white — i.e. invisible. This paints the wrapper and covers the
   headings/paragraphs that were hard-coded light.                            */
.aoc-scope.aoc-dark{background:#0C0C0E;color:#EDE7DA;}
.aoc-scope.aoc-dark .sec,.aoc-scope.aoc-dark .pp,.aoc-scope.aoc-dark .hero{background:transparent;}
.aoc-scope.aoc-dark h1,.aoc-scope.aoc-dark h2,.aoc-scope.aoc-dark h3{color:#EDE7DA;}
.aoc-scope.aoc-dark p,.aoc-scope.aoc-dark .lead,.aoc-scope.aoc-dark .sh .lead{color:#B7B2A6;}
.aoc-scope.aoc-dark .sh{border-bottom-color:#24242B;}
.aoc-scope.aoc-dark .spec .r{border-color:#24242B;}
.aoc-scope.aoc-dark .spec .r span:first-child{color:#8C8C97;}
.aoc-scope.aoc-dark .spec .r span:last-child{color:#EDE7DA;}
/* live product tiles inside a dark widget */
.aoc-scope.aoc-dark .ptile{background:#131316;border-color:#24242B;}
.aoc-scope.aoc-dark .pimg{background:#0A0A0C;border-bottom-color:#24242B;}
.aoc-scope.aoc-dark .pname{color:#EDE7DA;}
.aoc-scope.aoc-dark .ptheme{color:#8C8C97;}

/* ==========================================================================
   v9.8.0 — TWO-PANE MEGA MENU
   Level 2 becomes a left rail; level 3 fills the pane beside it. Styles are
   written OUTSIDE .aoc-scope because aoc.js relocates the panel to a
   body-level .aoc-mega-pop wrapper (brand tokens are copied onto it there).
   ========================================================================== */

/* the floating wrapper, in its wide two-pane form */
.aoc-mega-pop.is-wide{
  max-width:none; padding:0; overflow:hidden;
  border-radius:0 0 16px 16px;
  box-shadow:0 34px 70px -30px rgba(28,26,22,.55);
}
/* never let a long menu run off the bottom of the screen (moved here from
   aoc-density.css in 9.8.2, along with the rest of the mega styling) */
.aoc-mega-pop{ max-height:78vh; overflow-y:auto; }
.aoc-mega-pop.is-wide{ overflow:hidden; }
@media(max-width:900px){ .aoc-mega-pop{ display:none !important; } }
.aoc-mega-pop.is-wide .aoc-mega-in{ display:grid; grid-template-columns:246px minmax(0,1fr); }

/* in-place fallback (before aoc.js moves it, or with JS off) */
.aoc-scope .head-bar .aoc-wpnav-ul > li > .aoc-mega{
  position:absolute; top:100%; left:0; z-index:2000;
  visibility:hidden; opacity:0; pointer-events:none; transform:translateY(4px);
  transition:opacity .14s, transform .14s, visibility .14s;
  background:var(--card); border:1px solid var(--line); border-top:2px solid var(--a2);
  border-radius:0 0 16px 16px; box-shadow:0 26px 54px -26px rgba(28,26,22,.5);
  overflow:hidden;
}
.aoc-scope .head-bar .aoc-wpnav-ul > li > .aoc-mega.aoc-mega-2pane{ width:min(940px,92vw); }
.aoc-scope .head-bar .aoc-wpnav-ul > li > .aoc-mega.aoc-mega-plain{
  width:max-content; max-width:min(940px,92vw);
}
.aoc-scope .head-bar .aoc-wpnav-ul > li:hover > .aoc-mega,
.aoc-scope .head-bar .aoc-wpnav-ul > li:focus-within > .aoc-mega{
  visibility:visible; opacity:1; pointer-events:auto; transform:none;
}
.aoc-scope .head-bar .aoc-wpnav-ul > li > .aoc-mega .aoc-mega-in{
  display:grid; grid-template-columns:246px minmax(0,1fr);
}

/* ---- left rail (level 2) ---- */
.aoc-mega .mg-rail{
  background:var(--paper-2,#F2EFE8); border-right:1px solid var(--line,#E6E1D6);
  padding:12px 10px; display:flex; flex-direction:column; gap:1px; min-height:100%;
}
.aoc-mega .mg-rail-i{
  position:relative; display:flex !important; align-items:center; justify-content:space-between;
  gap:10px; padding:11px 13px 11px 15px !important; border-radius:9px;
  font-size:14px !important; font-weight:500; line-height:1.3;
  color:var(--ink-2,#5B554A) !important; text-decoration:none !important;
  white-space:normal !important; transition:background .13s, color .13s;
}
.aoc-mega .mg-rail-i::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px;
  background:var(--a2,#E0492C); transform:scaleY(0); transform-origin:center;
  transition:transform .16s;
}
.aoc-mega .mg-rail-i:hover{ color:var(--ink,#1C1A16) !important; }
.aoc-mega .mg-rail-i.is-on{
  background:var(--card,#fff) !important; color:var(--ink,#1C1A16) !important; font-weight:600;
  box-shadow:0 2px 10px -6px rgba(28,26,22,.4);
}
.aoc-mega .mg-rail-i.is-on::before{ transform:scaleY(1); }
.aoc-mega .mg-rail-c{
  width:6px; height:6px; flex:none; opacity:0; transition:opacity .14s, transform .14s;
  border-right:1.6px solid currentColor; border-top:1.6px solid currentColor;
  transform:rotate(45deg) translateX(-2px);
}
.aoc-mega .mg-rail-i.is-on .mg-rail-c{ opacity:.55; transform:rotate(45deg); }

/* ---- right pane (level 3) ---- */
.aoc-mega .mg-panes{ padding:22px 26px 20px; min-width:0; overflow-y:auto; }
.aoc-mega .mg-pane{ display:none; }
.aoc-mega .mg-pane.is-on{ display:block; animation:aocMgIn .18s ease both; }
@keyframes aocMgIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }
.aoc-mega .mg-pane-h{
  font-family:var(--mono,ui-monospace,monospace); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--a2,#E0492C); margin-bottom:14px;
}
.aoc-mega .mg-list{ list-style:none !important; margin:0 !important; padding:0 !important; }
.aoc-mega .mg-list li{ list-style:none !important; margin:0 !important; }
.aoc-mega .mg-list a{
  display:flex !important; align-items:center; gap:10px;
  padding:8px 10px !important; margin:0 -10px; border-radius:8px;
  font-size:14px !important; font-weight:500; line-height:1.35;
  color:var(--ink-2,#5B554A) !important; text-decoration:none !important;
  white-space:normal !important; transition:background .12s, color .12s;
}
.aoc-mega .mg-list a:hover{ background:var(--paper-2,#F2EFE8) !important; color:var(--ink,#1C1A16) !important; }
.aoc-mega .mg-t{
  width:34px; height:34px; flex:none; border-radius:7px; overflow:hidden;
  background:var(--paper-2,#F2EFE8); display:flex; align-items:center; justify-content:center;
}
.aoc-mega .mg-t img{ width:100%; height:100%; object-fit:cover; display:block; }
.aoc-mega .mg-n{ min-width:0; }
.aoc-mega .mg-p{
  margin-left:auto; font-family:var(--mono,ui-monospace,monospace); font-size:12px;
  color:var(--a2,#E0492C); white-space:nowrap;
}
.aoc-mega .mg-empty{ font-size:13.5px; color:var(--muted,#7A7163); margin:0 0 4px; }
.aoc-mega .mg-all{
  display:inline-block !important; margin-top:14px; padding:0 !important;
  font-family:var(--mono,ui-monospace,monospace); font-size:12.5px; font-weight:500;
  color:var(--ink,#1C1A16) !important; text-decoration:none !important;
  border-bottom:1.5px solid var(--a2,#E0492C); padding-bottom:2px !important;
  transition:color .13s;
}
.aoc-mega .mg-all:hover{ color:var(--a2,#E0492C) !important; background:transparent !important; }

/* ---- plain column list (menus with no level 3) ----
   grid-auto-flow:column over a fixed row count. Each column sizes to its own
   longest label, so nothing wraps and nothing overlaps; the panel (which is
   width:max-content) simply widens to suit. CSS multi-column could not do
   this — it divides a fixed width instead of growing to fit. */
.aoc-mega-plain .aoc-mega-in{ padding:10px; }
.aoc-mega-plain .mg-flat{
  display:grid !important;
  grid-auto-flow:column;
  grid-template-rows:repeat(var(--mg-rows,8), auto);
  grid-auto-columns:max-content;
  gap:1px 12px;
  align-content:start;
}
.aoc-mega-plain .mg-flat li{ min-width:0; }
.aoc-mega-plain .mg-flat a{
  margin:0; white-space:nowrap !important;
  padding:9px 12px !important; border-radius:8px;
}

/* very narrow viewports: collapse back to one column so nothing overflows */
@media(max-width:860px){
  .aoc-mega-plain .mg-flat{
    grid-auto-flow:row; grid-template-rows:none;
    grid-template-columns:minmax(0,1fr); grid-auto-columns:auto;
  }
  .aoc-mega-plain .mg-flat a{ white-space:normal !important; }
}

/* ---- dark treatment (Neon world header) ---- */
.aoc-mega-pop.aoc-pop-dark .mg-rail,
.aoc-scope.aoc-dark .head-bar .aoc-mega .mg-rail{ background:#0F0F12; border-right-color:#24242B; }
.aoc-mega-pop.aoc-pop-dark .mg-rail-i.is-on,
.aoc-scope.aoc-dark .head-bar .aoc-mega .mg-rail-i.is-on{ background:#1A1A1E !important; color:#fff !important; }
.aoc-mega-pop.aoc-pop-dark .mg-list a:hover,
.aoc-scope.aoc-dark .head-bar .aoc-mega .mg-list a:hover{ background:#1A1A1E !important; color:#fff !important; }
.aoc-mega-pop.aoc-pop-dark .mg-t{ background:#1A1A1E; }

/* ---- narrow desktops: stack the rail above the pane ---- */
@media(max-width:1040px){
  .aoc-mega-pop.is-wide .aoc-mega-in,
  .aoc-scope .head-bar .aoc-wpnav-ul > li > .aoc-mega .aoc-mega-in{ grid-template-columns:210px minmax(0,1fr); }
}

/* ==========================================================================
   v9.8.0 — REAL ARTWORK
   aoc_art() now returns a bundled image instead of a flat coloured block.
   ========================================================================== */
.aoc-scope .aoc-art{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; overflow:hidden; background:transparent;
}
.aoc-scope .aoc-art .aoc-art-img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
}
/* small icons inside the category grid keep their intrinsic size */
.aoc-scope .glyph .aoc-art,
.aoc-scope .aoc-art-glyph{ width:auto; height:auto; }
.aoc-scope .aoc-glyph{
  width:calc(34px * var(--kl,1)); height:calc(34px * var(--kl,1));
  display:block; color:var(--a2);
}
.aoc-scope .glyph .aoc-glyph-img{ width:34px; height:34px; object-fit:contain; }
/* v9.9.3: these used object-fit:contain, which is what left a paper-coloured
   frame around every stage. Filling is handled in the v9.9.3 block below. */

/* ==========================================================================
   v9.8.0 — CUSTOM ORDER PANEL
   What the category hero's "custom" button opens. Same slide-in language as
   the cart drawer so it reads as part of the same shop, not a bolted-on form.
   ========================================================================== */
body.aoc-co-lock{ overflow:hidden; }

.aoc-co-root .aoc-co-scrim{
  position:fixed; inset:0; z-index:1400; background:rgba(28,26,22,.46);
  opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
}
.aoc-co-root.open .aoc-co-scrim{ opacity:1; visibility:visible; }

.aoc-scope .aoc-co{
  position:fixed; top:0; right:0; bottom:0; z-index:1500;
  width:min(460px,94vw); background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  box-shadow:-24px 0 60px -28px rgba(0,0,0,.55);
}
.aoc-scope .aoc-co.open{ transform:none; }

.aoc-scope .aoc-co-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:20px 22px 16px; border-bottom:1px solid var(--line); flex:none;
}
.aoc-scope .aoc-co-head h3{
  font-family:var(--disp); font-weight:700; font-size:21px;
  letter-spacing:-.02em; margin-top:6px;
}
.aoc-scope .aoc-co-x{
  width:36px; height:36px; flex:none; border-radius:9px; font-size:15px;
  color:var(--muted); display:flex; align-items:center; justify-content:center;
  transition:.13s;
}
.aoc-scope .aoc-co-x:hover{ background:var(--paper-2); color:var(--ink); }

.aoc-scope .aoc-co-body{ flex:1; overflow-y:auto; padding:18px 22px 22px; }
.aoc-scope .aoc-co-sub{
  font-size:13.5px; color:var(--muted); line-height:1.55; margin:0 0 18px;
}
.aoc-scope .aoc-co-rule{
  display:flex; align-items:center; gap:12px; margin:20px 0 14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.aoc-scope .aoc-co-rule::after{ content:""; flex:1; height:1px; background:var(--line); }
.aoc-scope .aoc-co-err{
  margin-top:14px; padding:10px 13px; border-radius:9px;
  background:#FFF3E9; border:1px solid rgba(224,73,44,.3);
  color:#B6321F; font-size:13px; line-height:1.5;
}

.aoc-scope .aoc-co-foot{
  flex:none; padding:16px 22px 20px; border-top:1px solid var(--line);
  background:var(--card); display:flex; flex-direction:column; gap:10px;
}
.aoc-scope .aoc-co-note,
.aoc-scope .aoc-co-trust{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  line-height:1.55; margin:0; text-align:center;
}
.aoc-scope .aoc-co-trust{ padding-top:2px; opacity:.8; }

/* dark shell (Neon world) */
.aoc-scope.aoc-dark .aoc-co{ background:#0C0C0E; color:#EDE7DA; }
.aoc-scope.aoc-dark .aoc-co-head,
.aoc-scope.aoc-dark .aoc-co-foot{ border-color:#24242B; background:#0C0C0E; }

@media(max-width:520px){
  .aoc-scope .aoc-co{ width:100%; }
  .aoc-scope .aoc-co-head h3{ font-size:19px; }
}

/* ==========================================================================
   v9.8.1 — PRICES

   Two rules further up this file were quietly wrecking every WooCommerce
   price on the site:

     .aoc-scope *:not(u):not(ins){ text-decoration:none !important; }
     .aoc-scope u, .aoc-scope ins  { text-decoration:underline !important; }

   They were written for prose (<del>/<ins> as edited text), but WooCommerce
   uses <del> for the OLD price and <ins> for the SALE price. So the old price
   lost its strikethrough and the sale price gained an underline — a sale read
   as "Rs 2,400 Rs 1,800" with the wrong half underlined.

   Below: strikethrough restored, underline removed, and a proper typographic
   treatment for the whole price system — quieter currency symbol, tabular
   figures so prices line up down a grid column, and a clear old/new pairing.
   ========================================================================== */

/* --- 1. undo the damage -------------------------------------------------- */
.aoc-scope del,
.aoc-scope del *{ text-decoration:line-through !important; }
.aoc-scope ins,
.aoc-scope ins *{ text-decoration:none !important; }
.aoc-scope ins{ background:none; }

/* --- 2. figures that line up -------------------------------------------- */
.aoc-scope .price,
.aoc-scope .pfrom,
.aoc-scope .pp-price,
.aoc-scope .ci-price,
.aoc-scope .cd-sub,
.aoc-scope .sum-line,
.aoc-scope .si-p,
.aoc-scope .mg-p,
.aoc-scope .tiers .t,
.aoc-scope .ncard .nr,
.aoc-scope .st-tile .sp,
.aoc-scope .pr-card .pp2,
.aoc-scope .ac-item .ap,
.aoc-scope .sc-body .sp,
.aoc-scope .aoc-ws-tiers .tr,
.aoc-scope .woocommerce-Price-amount{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* --- 3. the amount itself ------------------------------------------------ */
.aoc-scope .woocommerce-Price-amount{ white-space:nowrap; }
.aoc-scope .woocommerce-Price-amount bdi{ display:inline; }

/* the currency word carries no information once you've seen it twice —
   set it back so the number is what the eye lands on */
.aoc-scope .woocommerce-Price-currencySymbol{
  font-size:.78em; font-weight:500; opacity:.6;
  margin-right:.14em; letter-spacing:.02em;
}

/* --- 4. old price / sale price pairing ---------------------------------- */
.aoc-scope del{
  color:var(--muted); font-weight:400; font-size:.84em;
  opacity:.8; margin-right:.5em;
}
.aoc-scope ins{ color:var(--a2); font-weight:600; }
.aoc-scope .woocommerce-price-suffix{
  font-size:.76em; font-weight:400; color:var(--muted); margin-left:.35em;
}

/* --- 5. per-context sizing ---------------------------------------------- */
/* product tile in a grid */
.aoc-scope .pfrom{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 6px;
  letter-spacing:-.01em; color:var(--ink);
}
.aoc-scope.aoc-dark .pfrom{ color:#EDE7DA; }

/* the big number on a product page */
.aoc-scope .pp-price{
  letter-spacing:-.015em; display:flex; align-items:baseline;
  flex-wrap:wrap; gap:0 10px; line-height:1.1;
}
.aoc-scope .pp-price del{ font-size:.5em; margin-right:0; }
.aoc-scope .pp-price ins{ color:inherit; }

/* mega menu row price */
.aoc-scope .mg-p,
.aoc-mega .mg-p{ font-weight:500; letter-spacing:-.01em; }

/* cart drawer / summary totals */
.aoc-scope .cd-sub,
.aoc-scope .sum-line.tot{ letter-spacing:-.015em; }

/* dark worlds: the muted old price needs more lift to stay readable */
.aoc-scope.aoc-dark del{ color:#8C8C97; opacity:.9; }
.aoc-scope.aoc-dark .woocommerce-Price-currencySymbol{ opacity:.7; }

/* ==========================================================================
   v9.8.2 — PRICE TYPEFACE

   Prices were set in Spline Sans Mono. A monospace face gives every glyph the
   same advance width, so "Rs 24,000" carries a lot of air between characters
   and reads like code rather than a number you are about to pay.

   They now use the body face (Hanken Grotesk) at a heavier weight with the
   tracking pulled in — denser, more confident, and it still keeps tabular
   figures so a column of prices stays aligned. The mono stays where it earns
   its keep: eyebrows, spec tables, order references.
   ========================================================================== */
.aoc-scope{ --price:"Hanken Grotesk",system-ui,-apple-system,sans-serif; }

.aoc-scope .price,
.aoc-scope .pfrom,
.aoc-scope .pp-price,
.aoc-scope .ci-price,
.aoc-scope .cd-sub,
.aoc-scope .sum-line,
.aoc-scope .sum-item .si-p,
.aoc-scope .mg-p,
.aoc-mega .mg-p,
.aoc-scope .tiers .t,
.aoc-scope .aoc-ws-tiers .tr,
.aoc-scope .ncard .nr,
.aoc-scope .st-tile .sp,
.aoc-scope .pr-card .pp2,
.aoc-scope .ac-item .ap,
.aoc-scope .sc-body .sp,
.aoc-scope .fin .price,
.aoc-scope .hero-art .tag .price,
.aoc-scope .woocommerce-Price-amount,
.aoc-scope .aoc-total{
  font-family:var(--price) !important;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* weights: the number you pay is the heaviest thing in its block */
.aoc-scope .pfrom,
.aoc-scope .ci-price,
.aoc-scope .sum-item .si-p,
.aoc-scope .st-tile .sp,
.aoc-scope .pr-card .pp2,
.aoc-scope .ac-item .ap,
.aoc-scope .sc-body .sp,
.aoc-scope .fin .price,
.aoc-scope .ncard .nr .p,
.aoc-scope .mg-p,
.aoc-mega .mg-p{ font-weight:700; }

.aoc-scope .pp-price,
.aoc-scope .cd-sub,
.aoc-scope .sum-line.tot,
.aoc-scope .aoc-total{ font-weight:700; letter-spacing:-.03em; }

/* the big product-page figure carries the tightest tracking of all */
.aoc-scope .pp-price{ font-size:clamp(26px,3.2vw,34px); }
.aoc-scope .pp-price small{ font-family:var(--price); font-weight:500; letter-spacing:-.01em; }

/* supporting rows stay a step lighter so the price still leads */
.aoc-scope .tiers .t,
.aoc-scope .aoc-ws-tiers .tr,
.aoc-scope .sum-line{ font-weight:500; }
.aoc-scope .tiers .t b,
.aoc-scope .aoc-ws-tiers .tr b{ font-weight:700; }

/* old price: lighter and smaller, but not so faint it reads as disabled */
.aoc-scope del{ font-weight:500; }
.aoc-scope ins{ font-weight:700; }

/* the currency word keeps a touch more air than the digits around it */
.aoc-scope .woocommerce-Price-currencySymbol{ letter-spacing:0; font-weight:600; }

/* ==========================================================================
   v9.8.3 — MEGA MENU SIZING
   aoc.js measures the widest label and sets --mg-rows so the columns fit the
   viewport exactly. These rules just have to not fight it.
   ========================================================================== */
.aoc-mega-pop.is-plain{ padding:10px; width:max-content; }
.aoc-mega-pop.is-plain .aoc-mega-in{ padding:0; }

/* the measured single-column fallback for labels wider than the screen */
.aoc-mega-plain .mg-flat.mg-wrap{
  grid-auto-flow:row; grid-template-rows:none;
  grid-template-columns:minmax(0,1fr); grid-auto-columns:auto;
}
.aoc-mega-plain .mg-flat.mg-wrap a{ white-space:normal !important; }

/* two-pane: the rail must reach the panel edge, so no padding on the wrapper */
.aoc-mega-pop.is-wide{ padding:0 !important; overflow:hidden !important; }
.aoc-mega-pop.is-wide .mg-panes{ overflow-x:hidden; }

/* nothing inside a panel may push it sideways */
.aoc-mega-pop .aoc-mega,
.aoc-mega-pop .aoc-mega-in{ max-width:100%; }

/* ==========================================================================
   v9.8.3 — CURRENCY SWITCHER
   Sits in the header next to search. Deliberately quiet: it is a utility, not
   a call to action, so it reads as a set of small mono labels rather than
   competing with the cart button next to it.
   ========================================================================== */
.aoc-scope .aoc-cur{ display:flex; align-items:center; flex:none; }

/* ---- pills ---- */
.aoc-scope .aoc-cur-pills{
  gap:1px; padding:3px; border-radius:var(--r-chip,999px);
  background:var(--paper-2); border:1px solid var(--line);
}
.aoc-scope .aoc-cur-b{
  display:block; padding:5px 10px; border-radius:var(--r-chip,999px);
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.04em;
  color:var(--muted) !important; text-decoration:none !important;
  white-space:nowrap; transition:background .13s, color .13s;
}
.aoc-scope .aoc-cur-b:hover{ color:var(--ink) !important; }
.aoc-scope .aoc-cur-b.is-on{
  background:var(--card) !important; color:var(--ink) !important;
  box-shadow:0 1px 4px -2px rgba(28,26,22,.45);
}

/* ---- dropdown ---- */
.aoc-scope .aoc-cur-sel{
  appearance:none; -webkit-appearance:none;
  padding:7px 26px 7px 11px; border-radius:var(--r-chip,999px);
  background:var(--paper-2); border:1px solid var(--line); color:var(--ink);
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.04em;
  cursor:pointer; outline:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) 51%, calc(100% - 9px) 51%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.aoc-scope .aoc-cur-sel:focus-visible{ border-color:var(--ink); }

/* ---- dark shell (Neon world) ---- */
.aoc-scope.aoc-dark .aoc-cur-pills,
.aoc-scope.aoc-dark .aoc-cur-sel{ background:#17171B; border-color:#2E2E36; }
.aoc-scope.aoc-dark .aoc-cur-b.is-on{ background:#26262E !important; color:#fff !important; }
.aoc-scope.aoc-dark .aoc-cur-sel{ color:#EDE7DA; }

/* ---- small screens: the pills are the first thing to go ---- */
@media(max-width:820px){
  .aoc-scope .head-r .aoc-cur-pills{ display:none; }
}
@media(max-width:420px){
  .aoc-scope .head-r .aoc-cur{ display:none; }
}

/* ==========================================================================
   v9.9.0 — MOBILE

   The layout was responsive in the sense that nothing broke, but it was built
   from the desktop down and never tuned for a phone. Three things made product
   cards read as tall and thin:

     1. .pimg is a 1:1 square. In a 2-up grid on a 360px screen that is a
        ~160px image with only ~90px of text under it — a tall, top-heavy card.
     2. .pbody kept its desktop padding (14/15/16), which is a lot of the card
        once the card is 160px wide.
     3. Nothing clamped .pname, so a long product name wrapped to four lines
        and every card in the row grew to match the worst one.

   Below: shorter image crop, tighter padding, clamped names so every card in
   a row is the same height, and a real <=430px step (there wasn't one — a
   360px phone was getting 619px styling).

   Everything here is inside a media query, so desktop is untouched.
   ========================================================================== */

@media(max-width:620px){

  /* ---- rhythm: less air between sections on a small screen ---- */
  .aoc-scope .sec{ padding:clamp(34px,7vw,54px) 0; }
  .aoc-scope .sh{ margin-bottom:18px; }
  .aoc-scope .sh h2{ font-size:clamp(21px,6vw,27px); }
  .aoc-scope .sh .lead{ font-size:13.5px; }

  /* ---- product cards ---- */
  .aoc-scope .pgrid{ gap:11px; }
  .aoc-scope .pimg{ aspect-ratio:4/3; }          /* shorter than a square */
  .aoc-scope .pbody{ padding:10px 11px 12px; }
  .aoc-scope .pname{
    font-size:13.5px; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;                              /* equal-height cards */
  }
  .aoc-scope .ptheme{ font-size:9.5px; margin-top:2px; }
  .aoc-scope .pfrom{ font-size:13px; padding-top:8px; }
  .aoc-scope .pbadge{ font-size:8.5px; padding:2px 6px; top:7px; left:7px; }
  /* the lift-on-hover is meaningless on touch and causes sticky :hover */
  .aoc-scope .ptile:hover,
  .aoc-scope .cat:hover,
  .aoc-scope .st-tile:hover,
  .aoc-scope .fin:hover,
  .aoc-scope .ac-item:hover,
  .aoc-scope .pr-card:hover,
  .aoc-scope .wa-piece:hover,
  .aoc-scope .uv-theme:hover{ transform:none; }

  /* ---- category tiles ---- */
  .aoc-scope .cats{ grid-template-columns:1fr 1fr; gap:10px; }
  .aoc-scope .cat{
    min-height:auto; flex-direction:column; align-items:stretch;
    gap:10px; padding:13px 14px;
  }
  .aoc-scope .cat.has-photo{ padding:0; overflow:hidden; }
  .aoc-scope .cat .cn{ font-size:13.5px; line-height:1.3; }
  .aoc-scope .cat .ck{ font-size:9.5px; }
  .aoc-scope .cat .go{ top:12px; right:12px; font-size:14px; }

  /* ---- other card grids: 2-up, tighter, shorter crops ---- */
  .aoc-scope .st-grid,
  .aoc-scope .uv-themes,
  .aoc-scope .pr-rack,
  .aoc-scope .ac-grid,
  .aoc-scope .finband{ gap:11px; }
  .aoc-scope .st-tile{ padding:11px; }
  .aoc-scope .st-tile .simg{ aspect-ratio:4/3; margin-bottom:8px; }
  .aoc-scope .st-tile .sn{ font-size:13px; }
  .aoc-scope .st-tile .sp{ font-size:11.5px; }
  /* the playful rotation reads as misalignment at this size */
  .aoc-scope .st-tile:nth-child(3n),
  .aoc-scope .st-tile:nth-child(3n+1){ transform:none; }
  .aoc-scope .uv-theme{ aspect-ratio:4/5; }
  .aoc-scope .ac-vis{ aspect-ratio:4/3; margin-bottom:9px; }
  .aoc-scope .ac-item .an{ font-size:13.5px; }
  .aoc-scope .fin{ padding:13px; }
  .aoc-scope .fin .fs{ height:64px; margin-bottom:9px; }
  .aoc-scope .fin h3{ font-size:14.5px; }
  .aoc-scope .pr-card .pv2{ padding:14px 0; }

  /* ---- wall art: two up, not one giant column ---- */
  .aoc-scope .wa-wall{ grid-template-columns:1fr 1fr; grid-auto-rows:104px; gap:10px; }
  .aoc-scope .wa-piece{ border-width:5px; }
  .aoc-scope .wa-a,.aoc-scope .wa-d{ grid-column:span 2; grid-row:span 2; }
  .aoc-scope .wa-b,.aoc-scope .wa-c,
  .aoc-scope .wa-e,.aoc-scope .wa-f{ grid-column:span 1; grid-row:span 1; min-height:0; }

  /* ---- decal scenes: stop the 220px floor stacking up ---- */
  .aoc-scope .scene{ min-height:0; }
  .aoc-scope .sc-vis{ aspect-ratio:16/10; padding:16px; }
  .aoc-scope .sc-body{ padding:16px 17px 20px; }
  .aoc-scope .sc-body h3{ font-size:19px; }
  .aoc-scope .sc-body p{ font-size:13.5px; }

  /* ---- hero + product page media ---- */
  .aoc-scope .hero-art,
  .aoc-scope .uv-vis{ max-width:290px; }
  .aoc-scope .pp-media{ aspect-ratio:4/5; }
  .aoc-scope .pp-banner-media{ aspect-ratio:4/5; }
  .aoc-scope .pp-thumbs .t{ width:48px; height:48px; }
  .aoc-scope .pp-desc{ font-size:14px; }
  .aoc-scope .bc-stack{ height:200px; }
  .aoc-scope .bc{ width:196px; height:116px; }
  .aoc-scope .bc1{ top:14px; left:10px; }
  .aoc-scope .bc2{ top:64px; left:74px; }
  .aoc-scope .bc .fo{ padding:15px; }
  .aoc-scope .bc .bn{ font-size:15px; }

  /* ---- neon world ---- */
  .aoc-scope .ncard .nimg{ aspect-ratio:4/3; }
  .aoc-scope .ncard .nb{ padding:11px 12px; }
  .aoc-scope .ncard .nn{ font-size:13.5px; }

  /* ---- controls sit closer together ---- */
  .aoc-scope .opts{ gap:13px; margin:16px 0; }
  .aoc-scope .pills button{ padding:8px 13px; font-size:13px; }
  .aoc-scope .swatches i{ width:27px; height:27px; }
  .aoc-scope .btn{ padding:12px 20px; font-size:14px; }
  .aoc-scope .btn-lg{ padding:13px 22px; font-size:14.5px; }
}

/* ---- real phones: 430px and under ------------------------------------- */
@media(max-width:430px){
  .aoc-scope{ font-size:14.5px; }
  .aoc-scope .pgrid{ gap:9px; }
  .aoc-scope .pbody{ padding:9px 10px 11px; }
  .aoc-scope .pname{ font-size:13px; }
  .aoc-scope .pfrom{ font-size:12.5px; padding-top:7px; }
  .aoc-scope .cats{ gap:9px; }
  .aoc-scope .sec{ padding:30px 0; }
  .aoc-scope .hero h1{ font-size:clamp(30px,9vw,38px); }
  .aoc-scope .hero .sub{ font-size:14.5px; margin:14px 0 20px; }
  .aoc-scope .st-hero h1,
  .aoc-scope .dc-hero h1,
  .aoc-scope .wa-hero h1,
  .aoc-scope .cd-hero h1,
  .aoc-scope .uv-hero h1,
  .aoc-scope .ac-hero h1{ font-size:clamp(29px,8.5vw,38px); }
  .aoc-scope .pr-hero h1{ font-size:clamp(30px,9vw,40px); }
  .aoc-scope .sg-hero h1{ font-size:clamp(38px,13vw,54px); }
  .aoc-scope .hero-art,
  .aoc-scope .uv-vis{ max-width:250px; }
  .aoc-scope .wa-wall{ grid-auto-rows:88px; }
  /* buttons go full width rather than sitting in an awkward half-row */
  .aoc-scope .hero-cta{ gap:9px; }
  .aoc-scope .hero-cta .btn{ flex:1 1 100%; }
}

/* ---- category tiles that carry a real photo ---------------------------- */
.aoc-scope .cat.has-photo{ padding:0; overflow:hidden; }
.aoc-scope .cat-photo{
  aspect-ratio:4/3; overflow:hidden; background:var(--paper-2);
}
.aoc-scope .cat-photo-img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.aoc-scope .cat.has-photo:hover .cat-photo-img{ transform:scale(1.04); }
.aoc-scope .cat.has-photo > div:last-child{ padding:13px 15px 15px; }
.aoc-scope .cat.has-photo .go{
  background:var(--card); border-radius:50%;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
}

/* The shorter mobile crop is right for photography, but the bundled vector
   plates are square with their subject centred — cropping those to 4:3 cuts
   the artwork. Photos keep cover; drawn plates switch to contain so they stay
   whole. Same rule for the other tile types that got a shorter crop. */
@media(max-width:620px){
  /* Every bundled plate keeps its subject inside the middle ~70%, so a 4:3
     cover crop never cuts the artwork — and it fills the tile properly.
     `contain` made the art look like a stamp floating in an empty panel. */
  .aoc-scope .pimg .aoc-art-img,
  .aoc-scope .st-tile .simg .aoc-art-img,
  .aoc-scope .ac-vis .aoc-art-img,
  .aoc-scope .ncard .nimg .aoc-art-img,
  .aoc-scope .pimg .aoc-ptile-img{ object-fit:cover; padding:0; }
}

/* ==========================================================================
   v9.9.1 — MOBILE HEADER, LINK COLOUR, CARD INTERNALS
   ========================================================================== */

/* ---- a link that has been visited must not turn purple -----------------
   .aoc-scope a sets color:inherit, but that does not cover :visited, so any
   product tile the shopper had already opened rendered its name in the
   browser's default visited colour. Product names are inside <a>, so this was
   visible on the category grids as one card in a different colour. */
.aoc-scope a,
.aoc-scope a:visited,
.aoc-scope a:active{ color:inherit; }
.aoc-scope .ptile .pname,
.aoc-scope .ptile:visited .pname,
.aoc-scope .cat .cn,
.aoc-scope .st-tile .sn,
.aoc-scope .pr-card .pn{ color:var(--ink); }
.aoc-scope.aoc-dark .ptile .pname,
.aoc-scope.aoc-dark .cat .cn{ color:#EDE7DA; }

@media(max-width:620px){

  /* ---- header: one row, always -------------------------------------
     The wordmark is scaled up 32% by the density layer (--kl), which on a
     phone left no room for the icons and pushed them onto a second line.
     The logo now shrinks and truncates instead; the icons never move. */
  .aoc-scope .head-in{
    flex-wrap:nowrap; gap:10px; align-items:center;
    padding-left:14px; padding-right:14px;
  }
  .aoc-scope .logo{ flex:1 1 auto; min-width:0; gap:9px; }
  /* the mark and wordmark are sized by --kl in aoc-density.css, which loads
     after this file — the phone override lives there so it actually wins */
  .aoc-scope .head-r{ flex:none; gap:1px; margin-left:auto; }
  .aoc-scope .head-r .icnbtn{ padding:7px; }
  .aoc-scope .head-r .icn{ width:20px; height:20px; }
  .aoc-scope .cartdot{ min-width:15px; height:15px; font-size:8.5px; }

  /* ---- hero buttons: side by side, not two full-width slabs ---- */
  .aoc-scope .hero-cta{ gap:9px; }
  .aoc-scope .hero-cta .btn{
    flex:1 1 calc(50% - 5px); min-width:0; padding:12px 12px;
    font-size:13.5px; text-align:center;
  }

  /* ---- finish cards: even heights, no orphaned "/ 100" ---- */
  .aoc-scope .fin{ display:flex; flex-direction:column; padding:12px; }
  .aoc-scope .fin h3{ font-size:13.5px; line-height:1.25; }
  .aoc-scope .fin p{
    font-size:11.5px; line-height:1.45; margin-top:3px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .aoc-scope .fin .price{
    font-size:12px; margin-top:auto; padding-top:9px;
    text-wrap:balance;                 /* keeps "/ 100" with the figure */
  }

  /* ---- product tiles: fit the price on one line ---- */
  .aoc-scope .pfrom{ font-size:12px; gap:2px 4px; line-height:1.3; }
  /* the range dash should not be able to start a new line on its own */
  .aoc-scope .pfrom .woocommerce-Price-amount{ white-space:nowrap; }
  .aoc-scope .woocommerce-Price-currencySymbol{ font-size:.86em; opacity:.7; }
  .aoc-scope .ptheme{
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* ---- other card grids: even heights ---- */
  .aoc-scope .st-tile,
  .aoc-scope .pr-card,
  .aoc-scope .ac-item{ display:flex; flex-direction:column; }
  .aoc-scope .st-tile .sp,
  .aoc-scope .pr-card .pp2,
  .aoc-scope .ac-item .ap{ margin-top:auto; }
  .aoc-scope .ac-item .an,
  .aoc-scope .st-tile .sn,
  .aoc-scope .pr-card .pn{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; line-height:1.28;
  }

  /* ---- section intros ---- */
  .aoc-scope .sh .lead{ max-width:none; }
}

/* ---- currency switcher inside the mobile drawer ------------------------ */
.aoc-scope .dr-cur{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.aoc-scope .dr-cur-l{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.aoc-scope .dr-cur .aoc-cur-pills{ display:flex; }
.aoc-scope .dr-cur .aoc-cur-b{ padding:6px 11px; font-size:11.5px; }

/* ==========================================================================
   v9.9.2 — MOBILE TYPE SCALE & ALIGNMENT

   The density layer multiplies type by --k (and on phones adds --ksm:1.22 to
   spacing). That was tuned on a desktop, so several headings that look right
   at 1200px are far too large at 390px. These cap the display sizes rather
   than rescaling everything, so the desktop proportions are untouched.
   ========================================================================== */
@media(max-width:620px){

  /* ---- display headings: cap, don't just scale ---- */
  .aoc-scope .hero h1{ font-size:clamp(30px,8.4vw,40px); line-height:1.04; }
  .aoc-scope .cd-hero h1,
  .aoc-scope .dc-hero h1,
  .aoc-scope .uv-hero h1,
  .aoc-scope .wa-hero h1,
  .aoc-scope .ac-hero h1,
  .aoc-scope .st-hero h1{ font-size:clamp(29px,8.2vw,38px); line-height:1.06; }
  .aoc-scope .pr-hero h1{ font-size:clamp(30px,8.6vw,40px); line-height:1.04; }
  .aoc-scope .sg-hero h1{ font-size:clamp(38px,12vw,54px); line-height:1; }
  .aoc-scope .sh h2,
  .aoc-scope .biz h2,
  .aoc-scope .cd-corp h2,
  .aoc-scope .bizstrip h2,
  .aoc-scope .sg-feat h2{ font-size:clamp(20px,5.6vw,25px); line-height:1.12; }
  .aoc-scope .pp-info h1{ font-size:clamp(21px,6vw,26px); }
  .aoc-scope .pp-price{ font-size:clamp(22px,6.6vw,27px); }
  .aoc-scope .pd-cols h3,
  .aoc-scope .qpanel h3,
  .aoc-scope .co-card h3{ font-size:16px; }

  /* ---- body copy ---- */
  .aoc-scope .hero .sub,
  .aoc-scope .cd-hero .lead,
  .aoc-scope .dc-hero .lead,
  .aoc-scope .uv-hero .lead,
  .aoc-scope .wa-hero .lead,
  .aoc-scope .ac-hero .lead,
  .aoc-scope .st-hero .lead,
  .aoc-scope .pr-hero .lead{
    font-size:14.5px; line-height:1.55; max-width:none; margin-top:12px;
  }
  .aoc-scope .sg-hero p{ font-size:14.5px; }
  .aoc-scope .biz p,
  .aoc-scope .cd-corp p,
  .aoc-scope .bizstrip p,
  .aoc-scope .sg-feat p{ font-size:13.5px; max-width:none; }
  .aoc-scope .step p,
  .aoc-scope .sc-body p{ font-size:13.5px; }
  .aoc-scope .eyebrow{ font-size:10px; letter-spacing:.13em; }

  /* spacing multiplier is dialled back in aoc-density.css, which owns --ksm */

  /* ---- alignment: centred heroes stay centred, left ones stay left ---- */
  .aoc-scope .pr-hero,
  .aoc-scope .ac-hero{ text-align:center; }
  .aoc-scope .pr-hero .lead,
  .aoc-scope .ac-hero .lead{ margin-inline:auto; }
  .aoc-scope .sh{ flex-direction:column; align-items:flex-start; gap:6px; }
  .aoc-scope .sh > *{ width:100%; }
  .aoc-scope .hero-note{ font-size:10.5px; line-height:1.6; margin-top:16px; }
  .aoc-scope .micro,
  .aoc-scope .cd-hero .micro{ gap:6px 14px; font-size:11px; }

  /* ---- strips and tag rows wrap tidily instead of overflowing ---- */
  .aoc-scope .st-strip,
  .aoc-scope .trust-in{ gap:8px 16px; font-size:11px; padding-block:12px; }
  .aoc-scope .pr-uses{ gap:6px; font-size:11.5px; }
  .aoc-scope .pr-uses span{ padding:6px 12px; }
  .aoc-scope .st-tag{ font-size:11px; padding:6px 11px; transform:none; }
  .aoc-scope .sg-dir{ font-size:11.5px; }

  /* ---- dark bands ---- */
  .aoc-scope .biz,
  .aoc-scope .cd-corp,
  .aoc-scope .bizstrip{ padding:22px 18px; gap:18px; }
  .aoc-scope .qpanel{ padding:16px; }
  .aoc-scope .co-card{ padding:16px; }
  .aoc-scope .summary{ padding:16px; }

  /* ---- the sticky bottom bar must not cover the last section ---- */
  .aoc-scope.has-mcta{ padding-bottom:72px; }
}

@media(max-width:430px){
  .aoc-scope .hero h1{ font-size:clamp(27px,8.6vw,34px); }
  .aoc-scope .cd-hero h1,
  .aoc-scope .dc-hero h1,
  .aoc-scope .uv-hero h1,
  .aoc-scope .wa-hero h1,
  .aoc-scope .ac-hero h1,
  .aoc-scope .st-hero h1,
  .aoc-scope .pr-hero h1{ font-size:clamp(26px,8.4vw,33px); }
  .aoc-scope .sg-hero h1{ font-size:clamp(34px,12vw,46px); }
  .aoc-scope .sh h2{ font-size:clamp(19px,5.8vw,23px); }
  .aoc-scope .st-strip,
  .aoc-scope .trust-in{ font-size:10.5px; gap:6px 12px; }
}

/* photo swatch on a finish card (Elementor "Photo" field on each finish) */
.aoc-scope .fin .fs.has-photo{ overflow:hidden; padding:0; background:var(--paper-2); }
.aoc-scope .fin .fs.has-photo img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
}

/* ==========================================================================
   v9.9.3 — IMAGES FILL THEIR CONTAINER

   Every media box (.pp-media, .pimg, .hero-art, .simg, .nimg, .ac-vis …) has a
   paper-coloured background so an empty slot still looks deliberate. That was
   fine while the art was a drawn plate with built-in margins, but a real photo
   was being rendered at 64–80% width and centred on top of it — so the panel
   showed as a grey frame around every product.

   The background stays as the empty-state, but any image inside now fills the
   box completely. One rule per container type rather than a blanket `img`
   selector, so logos, icons and badges are not caught by it.
   ========================================================================== */

/* the class the product/hero stages now use instead of an inline width */
.aoc-scope .pp-img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
}

/* every media container: fill, no letterboxing, no inherited padding */
.aoc-scope .pp-media > img,
.aoc-scope .pp-media > .aoc-art,
.aoc-scope .pimg > img,
.aoc-scope .pimg > .aoc-art,
.aoc-scope .hero-art > img,
.aoc-scope .hero-art > .aoc-art,
.aoc-scope .uv-vis > img,
.aoc-scope .uv-vis > .aoc-art,
.aoc-scope .ac-vis > img,
.aoc-scope .ac-vis > .aoc-art,
.aoc-scope .sc-vis > img,
.aoc-scope .sc-vis > .aoc-art,
.aoc-scope .simg > img,
.aoc-scope .simg > .aoc-art,
.aoc-scope .nimg > img,
.aoc-scope .nimg > .aoc-art,
.aoc-scope .igtile > img,
.aoc-scope .igtile > .aoc-art,
.aoc-scope .pr-card .pv2 > img,
.aoc-scope .pr-card .pv2 > .aoc-art,
.aoc-scope .wa-piece > img,
.aoc-scope .wa-piece > .aoc-art,
.aoc-scope .cat-photo > img,
.aoc-scope .ci-img > img,
.aoc-scope .si-img > img,
.aoc-scope .pp-thumbs .t > img,
.aoc-scope .pp-banner-media > img{
  width:100% !important; height:100% !important;
  object-fit:cover; display:block; padding:0 !important; margin:0;
  max-width:none; border-radius:inherit;
}

/* the drawn plates fill too — no more stamp-in-a-panel */
.aoc-scope .aoc-art{ width:100%; height:100%; }
.aoc-scope .aoc-art .aoc-art-img{
  width:100%; height:100%; object-fit:cover; display:block; padding:0;
}

/* containers that carried their own inner padding for the old centred art */
.aoc-scope .sc-vis{ padding:0; }
.aoc-scope .pr-card .pv2{ padding:0; }
.aoc-scope .simg{ overflow:hidden; border-radius:10px; }
.aoc-scope .pimg,
.aoc-scope .pp-media,
.aoc-scope .hero-art,
.aoc-scope .uv-vis,
.aoc-scope .ac-vis,
.aoc-scope .nimg,
.aoc-scope .cat-photo{ overflow:hidden; }

/* the wall-art mount, kept as a class instead of a long inline style */
.aoc-scope .pp-frame{
  width:100%; height:100%; border:12px solid #fff;
  box-shadow:0 0 0 1.5px var(--line-2), 0 18px 34px -18px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-2); overflow:hidden;
}

/* the paper panel is an EMPTY state — hide it once real media is in there */
.aoc-scope .pp-media:has(> img),
.aoc-scope .pimg:has(> img),
.aoc-scope .hero-art:has(> img),
.aoc-scope .uv-vis:has(> img),
.aoc-scope .ac-vis:has(> img),
.aoc-scope .simg:has(> img),
.aoc-scope .nimg:has(> img),
.aoc-scope .igtile:has(> img),
.aoc-scope .pr-card .pv2:has(> img){ background:transparent; }

/* mobile kept a shorter crop; the fill behaviour is the same */
@media(max-width:620px){
  .aoc-scope .pimg .aoc-art-img,
  .aoc-scope .st-tile .simg .aoc-art-img,
  .aoc-scope .ac-vis .aoc-art-img,
  .aoc-scope .ncard .nimg .aoc-art-img,
  .aoc-scope .pimg .aoc-ptile-img,
  .aoc-scope .pp-img{ object-fit:cover; padding:0; }
}

/* Category-grid glyphs are small inline icons, not media — the fill rules
   above must not stretch them to the width of their tile. */
.aoc-scope .glyph .aoc-art,
.aoc-scope .aoc-art-glyph,
.aoc-scope .cat .glyph .aoc-art{ width:auto; height:auto; }
.aoc-scope .glyph .aoc-glyph-img{ width:34px; height:34px; object-fit:contain; }
.aoc-scope .aoc-glyph{
  width:calc(34px * var(--kl,1)); height:calc(34px * var(--kl,1));
  display:block; color:var(--a2);
}

/* ==========================================================================
   v9.9.4 — PRODUCT GALLERY
   The thumbnail strip is now real: featured image first, then the WooCommerce
   product gallery. It is only printed when there is more than one picture.
   ========================================================================== */
.aoc-scope .pp-gal{ display:block; }
.aoc-scope .pp-thumbs{ display:flex; gap:9px; margin-top:11px; flex-wrap:wrap; }
.aoc-scope .pp-thumbs .t{
  width:58px; height:58px; padding:0; flex:none;
  border-radius:9px; overflow:hidden; cursor:pointer;
  background:var(--paper-2); border:1.5px solid var(--line);
  transition:border-color .14s, transform .14s;
}
.aoc-scope .pp-thumbs .t img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.aoc-scope .pp-thumbs .t:hover{ border-color:var(--line-2); transform:translateY(-1px); }
.aoc-scope .pp-thumbs .t.on{ border-color:var(--ink); }
.aoc-scope.aoc-dark .pp-thumbs .t{ background:#0A0A0C; border-color:#24242B; }
.aoc-scope.aoc-dark .pp-thumbs .t.on{ border-color:#36E6E0; }

@media(max-width:620px){
  .aoc-scope .pp-thumbs{ gap:7px; margin-top:9px; }
  .aoc-scope .pp-thumbs .t{ width:52px; height:52px; }
}

/* ==========================================================================
   v9.10.0 — NAV FITS, ALWAYS

   The nav bar was flex-wrap:nowrap with justify-content:center. With nine
   top-level categories — several of them long ("DTF & UV DTF Custom Printing")
   — the row is wider than the viewport, and because it is CENTRED the overflow
   spills off BOTH edges at once. That is the cropping in the screenshot: the
   first item loses its start and the last loses its end, with no scrollbar to
   reveal either.

   The fix is to let the row wrap. Before it wraps it tightens: the gap and
   font step down at two intermediate widths, so on most desktops everything
   still sits on one line, and only genuinely narrow windows get a second row.
   Nothing is ever hidden at any width.
   ========================================================================== */
.aoc-scope .head-bar-in{ padding-block:0; }
.aoc-scope .head-bar .nav,
.aoc-scope .head-bar nav.aoc-wpnav{ max-width:100%; }
/* 9.12.0: back to ONE row. Wrapping was safe but the client finds two rows
   worse than a single tight row. See the v9.12.0 block at the end of this file
   for how it stays readable without cropping. */
.aoc-scope .head-bar .nav,
.aoc-scope .head-bar .aoc-wpnav-ul{
  flex-wrap:nowrap !important;
  justify-content:center;
  row-gap:0;
}

/* step 1: tighten before wrapping */
@media(max-width:1360px){
  .aoc-scope .head-bar .aoc-wpnav-ul>li>a,
  .aoc-scope .head-bar .nav>a{ padding:13px 11px; font-size:13.5px; }
  .aoc-scope .head-bar .aoc-wpnav-ul>li.menu-item-has-children>a{ padding-right:23px; }
  .aoc-scope .head-bar .aoc-wpnav-ul>li.menu-item-has-children>a::before{ right:10px; }
}

/* step 2: tighter still */
@media(max-width:1180px){
  .aoc-scope .head-bar .aoc-wpnav-ul>li>a,
  .aoc-scope .head-bar .nav>a{ padding:12px 9px; font-size:13px; }
  .aoc-scope .head-bar .aoc-wpnav-ul>li.menu-item-has-children>a{ padding-right:21px; }
  .aoc-scope .head-bar .aoc-wpnav-ul>li>a::after,
  .aoc-scope .head-bar .nav>a::after{ left:8px; right:8px; }
}

/* step 3: two rows, evenly spaced, still centred */
@media(max-width:1040px){
  .aoc-scope .head-bar-in{ padding-block:4px; }
  .aoc-scope .head-bar .aoc-wpnav-ul>li>a,
  .aoc-scope .head-bar .nav>a{ padding:10px 9px; }
}

/* ==========================================================================
   v9.10.0 — SUB-CATEGORY PAGE
   Deliberately compact. By the time someone is on "Collector Cards" they know
   what they want, so the grid arrives fast and the copy stays out of the way.
   ========================================================================== */
.aoc-scope .sub-hero{
  display:grid; grid-template-columns:minmax(0,1fr); gap:26px;
  padding-block:clamp(26px,4vw,44px);
}
.aoc-scope .sub-hero.has-img{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; }
.aoc-scope .sub-crumb{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); display:flex; gap:8px; align-items:center; margin-bottom:10px;
}
.aoc-scope .sub-crumb a{ color:var(--a2); }
.aoc-scope .sub-crumb a:hover{ text-decoration:underline; }
.aoc-scope .sub-hero h1{
  font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:1.04;
  font-size:clamp(30px,4.4vw,50px);
}
.aoc-scope .sub-intro{
  margin-top:12px; color:var(--ink-2); font-size:16px; line-height:1.6; max-width:56ch;
}
.aoc-scope .sub-hero-img{
  aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--paper-2);
}

/* spec strip: facts, not features */
.aoc-scope .sub-specs{
  display:flex; flex-wrap:wrap; gap:0 34px; margin:22px 0 0; padding-top:18px;
  border-top:1px solid var(--line);
}
.aoc-scope .sub-specs div{ padding:6px 0; }
.aoc-scope .sub-specs dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 3px;
}
.aoc-scope .sub-specs dd{ margin:0; font-size:14px; font-weight:600; color:var(--ink); }

/* sibling rail — jump sideways without going back up a level */
.aoc-scope .sub-sibs{ padding-block:clamp(22px,3vw,34px); }
.aoc-scope .sib-rail{
  display:flex; gap:9px; margin-top:12px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:thin;
}
.aoc-scope .sib{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  padding:10px 15px; border-radius:999px; white-space:nowrap;
  background:var(--card); border:1px solid var(--line);
  font-size:13.5px; font-weight:500; color:var(--ink-2);
  transition:border-color .14s, color .14s, transform .14s;
}
.aoc-scope .sib span{ opacity:.4; transition:opacity .14s, transform .14s; }
.aoc-scope .sib:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-1px); }
.aoc-scope .sib:hover span{ opacity:1; transform:translateX(2px); }

/* help band */
.aoc-scope .sub-help{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center;
  padding:26px 28px; border-radius:16px;
  background:var(--paper-2); border:1px solid var(--line);
}
.aoc-scope .sub-help h2{
  font-family:var(--disp); font-weight:700; letter-spacing:-.02em; font-size:22px;
}
.aoc-scope .sub-help p{ margin-top:7px; color:var(--ink-2); font-size:14.5px; line-height:1.6; max-width:60ch; }
.aoc-scope.aoc-dark .sub-help{ background:#131316; border-color:#24242B; }
.aoc-scope.aoc-dark .sib{ background:#131316; border-color:#24242B; color:#B7B2A6; }

@media(max-width:860px){
  .aoc-scope .sub-hero.has-img{ grid-template-columns:minmax(0,1fr); }
  .aoc-scope .sub-hero-img{ order:-1; aspect-ratio:16/9; }
  .aoc-scope .sub-help{ grid-template-columns:minmax(0,1fr); }
}
@media(max-width:620px){
  .aoc-scope .sub-hero{ gap:18px; padding-block:22px; }
  .aoc-scope .sub-hero h1{ font-size:clamp(26px,7.6vw,34px); }
  .aoc-scope .sub-intro{ font-size:14.5px; margin-top:10px; }
  .aoc-scope .sub-specs{ gap:0 22px; margin-top:16px; padding-top:14px; }
  .aoc-scope .sub-specs dd{ font-size:13px; }
  .aoc-scope .sub-help{ padding:18px; }
  .aoc-scope .sub-help h2{ font-size:19px; }
  .aoc-scope .sub-help p{ font-size:13.5px; }
}

/* ==========================================================================
   v9.11.0 — HEADER: SHOP/WHOLESALE AND CURRENCY MATCHED

   The two controls were built at different times and never compared. .seg had
   3px padding with 6px/14px buttons; .aoc-cur-pills had 3px padding with
   5px/10px buttons and a different font size. Side by side that reads as two
   heights and two weights.

   They now share one set of numbers, so they look like one control split in
   two. Anything that affects height is set on BOTH.
   ========================================================================== */
.aoc-scope .head-r .seg,
.aoc-scope .head-r .aoc-cur-pills{
  display:inline-flex; align-items:center; gap:2px;
  height:36px; padding:3px;
  border-radius:var(--pill); box-sizing:border-box;
  background:var(--paper-2); border:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; line-height:1;
}
.aoc-scope .head-r .seg button,
.aoc-scope .head-r .aoc-cur-b{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; padding:0 13px; border-radius:var(--pill);
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.03em;
  color:var(--muted); white-space:nowrap; transition:background .14s, color .14s;
}
.aoc-scope .head-r .seg button.on,
.aoc-scope .head-r .aoc-cur-b.is-on{
  background:var(--ink) !important; color:var(--paper) !important; font-weight:600;
  box-shadow:none;
}
.aoc-scope .head-r .seg button:hover,
.aoc-scope .head-r .aoc-cur-b:hover{ color:var(--ink) !important; }
.aoc-scope .head-r .seg button.on:hover,
.aoc-scope .head-r .aoc-cur-b.is-on:hover{ color:var(--paper) !important; }
.aoc-scope.aoc-dark .head-r .seg,
.aoc-scope.aoc-dark .head-r .aoc-cur-pills{ background:#17171B; border-color:#2A2A30; }
.aoc-scope.aoc-dark .head-r .seg button.on,
.aoc-scope.aoc-dark .head-r .aoc-cur-b.is-on{ background:#EDE7DA !important; color:#0C0C0E !important; }

/* ==========================================================================
   v9.11.0 — SUB-CATEGORY PAGE, RICHER
   Same compact intent, more considered: an accent rule under the title, the
   spec strip as real cards, and a numbered feel to the sibling rail.
   ========================================================================== */
.aoc-scope .sub-hero{ position:relative; }
.aoc-scope .sub-hero h1{ position:relative; padding-bottom:16px; }
.aoc-scope .sub-hero h1::after{
  content:""; position:absolute; left:0; bottom:0; width:56px; height:3px;
  border-radius:3px; background:var(--a2);
}
.aoc-scope .sub-specs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px; border-top:none; padding-top:0; margin-top:26px;
}
.aoc-scope .sub-specs div{
  padding:13px 15px; border-radius:11px;
  background:var(--card); border:1px solid var(--line);
  transition:border-color .15s, transform .15s;
}
.aoc-scope .sub-specs div:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.aoc-scope .sub-specs dd{ font-size:14.5px; letter-spacing:-.01em; }
.aoc-scope .sub-hero-img{
  border-radius:16px; box-shadow:0 26px 54px -30px rgba(28,26,22,.5);
}
.aoc-scope .sub-hero.has-img .sub-hero-img{ aspect-ratio:5/4; }
.aoc-scope .sub-sibs{ border-top:1px solid var(--line); }
.aoc-scope .sib{ padding:11px 17px; }
.aoc-scope .sub-help{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--paper-2), var(--card));
}
.aoc-scope .sub-help::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--a2);
}
.aoc-scope .sub-help > div:first-child{ padding-left:8px; }
@media(max-width:620px){
  .aoc-scope .sub-specs{ grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; }
  .aoc-scope .sub-specs div{ padding:10px 12px; }
  .aoc-scope .sub-hero h1::after{ width:44px; }
}

/* ==========================================================================
   v9.11.1 — SIDE GUTTER, GUARANTEED

   Marketing Materials lost its side padding on mobile only. The hero is
   <header class="wrap cd-hero">, i.e. ONE element that is both the gutter
   (.wrap gives padding:0 var(--pad)) and a two-column grid. On desktop the
   1180px max-width keeps text away from the edge so the missing gutter never
   shows; on a phone the max-width does nothing, so the padding IS the only
   gutter — and any rule that touches .cd-hero's padding removes it.

   Rather than chase which rule wins on which widget, the gutter is now
   enforced with padding-inline on .wrap itself, which cannot be cancelled by
   a `padding:` shorthand set elsewhere on the same element (shorthand is
   overridden by the longhand that comes after it in the cascade).

   This is also why adding padding in Elementor did not help: that pads the
   widget wrapper, outside .wrap, so the content inside kept its full width.
   ========================================================================== */
.aoc-scope .wrap{
  padding-inline:var(--pad);
  max-width:var(--maxw);
  margin-inline:auto;
  width:100%;
}
/* heroes that are ALSO the wrap: the grid must not remove the gutter */
.aoc-scope header.wrap,
.aoc-scope section.wrap,
.aoc-scope .wrap.cd-hero,
.aoc-scope .wrap.st-hero,
.aoc-scope .wrap.dc-hero,
.aoc-scope .wrap.uv-hero,
.aoc-scope .wrap.wa-hero,
.aoc-scope .wrap.ac-hero,
.aoc-scope .wrap.pr-hero,
.aoc-scope .wrap.sg-hero,
.aoc-scope .wrap.sub-hero{ padding-inline:var(--pad) !important; box-sizing:border-box; }

/* a section that never got a .wrap child still gets a gutter on small screens */
@media(max-width:620px){
  .aoc-scope .sec > .finband,
  .aoc-scope .sec > .pgrid,
  .aoc-scope .sec > .cats,
  .aoc-scope .sec > .sh,
  .aoc-scope .sec > .tbc-themes,
  .aoc-scope .sec > .st-grid,
  .aoc-scope .sec > .dc-scenes,
  .aoc-scope .sec > .ac-grid,
  .aoc-scope .sec > .pr-rack,
  .aoc-scope .sec > .wa-wall{ padding-inline:var(--pad); }
}

/* ==========================================================================
   v9.12.0 — NAV: ONE ROW, NEVER CROPPED

   Two rows were safe but read as clutter. One row it is — the trick is that
   the row must be allowed to SCROLL rather than be clipped, and it has to look
   deliberate when it does.

   The type and gap tighten in steps, so on a normal desktop nine categories
   fit with room to spare. If the window is narrow (or the client adds a tenth
   category), the row scrolls horizontally instead of hiding anything, with a
   soft fade at whichever edge has more content — the standard signal that
   there is more to see. Nothing is ever cut off with no way to reach it,
   which was the original complaint.
   ========================================================================== */
.aoc-scope .head-bar{ position:relative; }
.aoc-scope .head-bar-in{
  overflow-x:auto; overflow-y:visible;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-behavior:smooth; overscroll-behavior-x:contain;
  /* fade only where content actually overflows */
  mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
}
.aoc-scope .head-bar-in::-webkit-scrollbar{ display:none; }
.aoc-scope .head-bar .nav,
.aoc-scope .head-bar .aoc-wpnav-ul{ width:max-content; margin-inline:auto; min-width:100%; }

/* tighten in steps before any scrolling is needed */
@media(max-width:1400px){
  .aoc-scope .head-bar .aoc-wpnav-ul>li>a,
  .aoc-scope .head-bar .nav>a{ padding:13px 10px; font-size:13.5px; letter-spacing:-.005em; }
}
@media(max-width:1240px){
  .aoc-scope .head-bar .aoc-wpnav-ul>li>a,
  .aoc-scope .head-bar .nav>a{ padding:12px 8px; font-size:13px; }
  .aoc-scope .head-bar .aoc-wpnav-ul>li.menu-item-has-children>a{ padding-right:19px; }
  .aoc-scope .head-bar .aoc-wpnav-ul>li.menu-item-has-children>a::before{ right:8px; }
}
@media(max-width:1080px){
  .aoc-scope .head-bar .aoc-wpnav-ul>li>a,
  .aoc-scope .head-bar .nav>a{ padding:11px 7px; font-size:12.5px; }
}

/* ==========================================================================
   v9.12.0 — MOBILE HEADER BACK TO ONE CLEAN ROW

   9.8.3 put the currency switcher in the header bar. On a phone that is a
   third control competing with search, cart and menu, and it pushed the row
   out of shape. Mobile gets the pre-currency header back: logo + icons only.
   The switcher lives in the menu drawer, where it was reachable all along.
   ========================================================================== */
@media(max-width:900px){
  .aoc-scope .head-r .aoc-cur,
  .aoc-scope .head-r .aoc-cur-pills,
  .aoc-scope .head-r .aoc-cur-sel{ display:none !important; }
  .aoc-scope .head-in{ gap:12px; }
  .aoc-scope .head-r{ gap:2px; }
}

/* ==========================================================================
   v9.12.0 — NAV BACK TO ONE ROW

   9.10.0 let the nav wrap so nothing was cropped. It solved the cropping but
   two ragged rows read worse than one. This keeps the "nothing is ever hidden"
   guarantee while staying on a single line:

     1. the row is a flex line that never wraps
     2. gap and font step down progressively as space runs out
     3. below that it scrolls horizontally, with the ends faded so it is
        obvious there is more — a deliberate, contained scroll rather than
        content silently disappearing off both edges

   The mega panels still open normally; only the strip itself scrolls.
   ========================================================================== */
.aoc-scope .head-bar{ position:relative; }
.aoc-scope .head-bar .nav,
.aoc-scope .head-bar .aoc-wpnav-ul{
  flex-wrap:nowrap !important;
  justify-content:center;
  max-width:100%;
  overflow-x:auto;
  /* NOTE: a browser forces the other axis to auto once one is scrollable,
     so this strip does clip vertically. It does not matter: aoc.js moves
     every mega panel to body level, so the dropdowns are not inside this
     element when they open. */
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-behavior:smooth;
}
.aoc-scope .head-bar .nav::-webkit-scrollbar,
.aoc-scope .head-bar .aoc-wpnav-ul::-webkit-scrollbar{ display:none; }
.aoc-scope .head-bar .aoc-wpnav-ul > li{ flex:0 0 auto; }

/* progressive tightening before anything needs to scroll */
@media(max-width:1400px){
  .aoc-scope .head-bar .aoc-wpnav-ul>li>a,
  .aoc-scope .head-bar .nav>a{ padding:13px 10px; font-size:13.5px; }
  .aoc-scope .head-bar .aoc-wpnav-ul>li.menu-item-has-children>a{ padding-right:22px; }
  .aoc-scope .head-bar .aoc-wpnav-ul>li.menu-item-has-children>a::before{ right:9px; }
}
@media(max-width:1240px){
  .aoc-scope .head-bar .aoc-wpnav-ul>li>a,
  .aoc-scope .head-bar .nav>a{ padding:12px 8px; font-size:13px; letter-spacing:-.005em; }
  .aoc-scope .head-bar .aoc-wpnav-ul>li.menu-item-has-children>a{ padding-right:19px; }
  .aoc-scope .head-bar .aoc-wpnav-ul>li>a::after,
  .aoc-scope .head-bar .nav>a::after{ left:7px; right:7px; }
}
@media(max-width:1100px){
  .aoc-scope .head-bar .aoc-wpnav-ul,
  .aoc-scope .head-bar .nav{ justify-content:flex-start; }
  .aoc-scope .head-bar .aoc-wpnav-ul>li>a,
  .aoc-scope .head-bar .nav>a{ padding:12px 7px; font-size:12.5px; }
  /* fade the ends so a scrollable strip reads as scrollable */
  .aoc-scope .head-bar-in{ position:relative; }
  .aoc-scope .head-bar-in::before,
  .aoc-scope .head-bar-in::after{
    content:""; position:absolute; top:0; bottom:0; width:26px;
    pointer-events:none; z-index:3;
  }
  .aoc-scope .head-bar-in::before{ left:0;  background:linear-gradient(90deg,var(--paper),transparent); }
  .aoc-scope .head-bar-in::after{  right:0; background:linear-gradient(270deg,var(--paper),transparent); }
  .aoc-scope.aoc-dark .head-bar-in::before{ background:linear-gradient(90deg,#0C0C0E,transparent); }
  .aoc-scope.aoc-dark .head-bar-in::after{  background:linear-gradient(270deg,#0C0C0E,transparent); }
}

/* ==========================================================================
   v9.12.0 — MOBILE HEADER REVERTED

   The currency switcher was added to the top bar in 9.8.3 and squeezed the
   row on phones. It belongs in the drawer on mobile, where it already is.
   ========================================================================== */
@media(max-width:900px){
  .aoc-scope .head-r .aoc-cur,
  .aoc-scope .head-r .aoc-cur-pills,
  .aoc-scope .head-r .aoc-cur-sel{ display:none !important; }
  .aoc-scope .head-in{ gap:12px; }
  .aoc-scope .head-r{ gap:2px; }
}
/* the drawer copy stays visible and comfortable */
.aoc-scope .drawer .aoc-cur,
.aoc-scope .dr-cur .aoc-cur{ display:flex !important; }

/* ==========================================================================
   v9.13.0 — NAV: LEFT-ALIGNED, WITH A "MORE" OVERFLOW

   Replaces the horizontal scroll from 9.12.0. Centring a row that overflows
   pushes the FIRST items off the left edge, so Home was invisible with no clue
   it was there. The row is now left-aligned and never scrolls; aoc.js measures
   it and moves whatever does not fit into a More dropdown at the end.
   ========================================================================== */
.aoc-scope .head-bar .nav,
.aoc-scope .head-bar .aoc-wpnav-ul{
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  overflow:visible !important;
  width:100%;
}
.aoc-scope .head-bar-in::before,
.aoc-scope .head-bar-in::after{ content:none !important; }   /* scroll fades gone */

.aoc-scope .aoc-more{ position:relative; margin-left:auto; }
.aoc-scope .aoc-more > a{ display:flex; align-items:center; gap:5px; white-space:nowrap; }
/* This must beat the legacy rule
     .aoc-scope .head-bar .aoc-wpnav-ul ul{ display:none; }
   which hides ANY nested list in the bar (it was written for the old
   hover-submenu markup). My original rules only toggled opacity and
   visibility, so the panel stayed display:none and clicking More appeared to
   do nothing at all. Setting display explicitly, with the same ancestor path
   so specificity wins, is what actually reveals it. */
/* inside More the item's own mega panel is suppressed: it is already a list */

/* ==========================================================================
   v9.13.0 — MOBILE HEADER: ONE Shop/Wholesale TOGGLE

   The toggle was rendered twice: once in .head-r (top bar) and once in the
   row below. On a phone the top-bar copy overlapped the title, search, cart
   and menu icons. The row below is the real one, so the top-bar copy is
   hidden on small screens.
   ========================================================================== */
@media(max-width:900px){
  .aoc-scope .head-r .seg{ display:none !important; }
  .aoc-scope .head-in{ gap:12px; }
}

/* ==========================================================================
   v9.13.0 — NEON PRODUCT: NO WHITE-ON-WHITE
   The page was built dark, so several blocks still set white text. On the
   light shell those became invisible. Anything inside .pp-ne that is not on a
   genuinely dark panel now uses the ink colours.
   ========================================================================== */
.aoc-scope .pp-ne,
.aoc-scope .pp-ne h1,
.aoc-scope .pp-ne h2,
.aoc-scope .pp-ne h3,
.aoc-scope .pp-ne p,
.aoc-scope .pp-ne li,
.aoc-scope .pp-ne .pp-price,
.aoc-scope .pp-ne .pp-desc,
.aoc-scope .pp-ne .step h4,
.aoc-scope .pp-ne .step p,
.aoc-scope .pp-ne .sum-line,
.aoc-scope .pp-ne label{ color:var(--ink); }
.aoc-scope .pp-ne .pp-desc,
.aoc-scope .pp-ne .step p,
.aoc-scope .pp-ne .muted,
.aoc-scope .pp-ne .sm{ color:var(--ink-2); }
.aoc-scope .pp-ne .eyebrow{ color:var(--a2); }
/* the media stage keeps a dark backdrop: neon reads best against it */
.aoc-scope .pp-ne .pp-media{ background:#101014; }
.aoc-scope .pp-ne .pp-media,
.aoc-scope .pp-ne .pp-media *{ color:#EDE7DA; }
/* option chips and buttons back to the standard light treatment */
.aoc-scope .pp-ne .pills button,
.aoc-scope .pp-ne .selc{ color:var(--ink); background:var(--card); border-color:var(--line); }
.aoc-scope .pp-ne .pills button.on{ background:var(--ink); color:var(--paper); }

/* ==========================================================================
   v9.13.2 — "MORE" OVERFLOW PANEL

   A <div>, deliberately NOT a nested <ul>: the bar carries a legacy rule,
     .aoc-scope .head-bar .aoc-wpnav-ul ul{ display:none; }
   written for the old hover submenus, which hides any nested list inside it.
   A div cannot match that selector, so the panel is immune to it instead of
   having to out-specify it.

   Overflowing items are hidden in place rather than moved, so the mega-menu
   code's references to them stay valid.
   ========================================================================== */
.aoc-scope .head-bar .aoc-wpnav-ul > li.aoc-ov-hidden,
.aoc-scope .head-bar .nav > .aoc-ov-hidden{ display:none !important; }

.aoc-scope .aoc-more{ position:relative; margin-left:auto; flex:0 0 auto; }
.aoc-scope .aoc-more > a{
  display:flex !important; align-items:center; gap:5px; white-space:nowrap; cursor:pointer;
}
.aoc-scope .aoc-more.open > a{ color:var(--ink); }

.aoc-scope .aoc-more-panel{
  position:absolute; top:100%; right:0; z-index:2400;
  min-width:236px; max-height:72vh; overflow-y:auto;
  padding:8px; flex-direction:column; gap:1px;   /* display set inline by aoc.js */
  background:var(--paper); border:1px solid var(--line-2);
  border-top:2px solid var(--ink); border-radius:0 0 12px 12px;
  box-shadow:0 22px 48px -22px rgba(28,26,22,.42);
}
.aoc-scope .aoc-more-panel > a{
  display:block; padding:10px 13px; border-radius:8px;
  font-size:14px; font-weight:500; line-height:1.3;
  color:var(--ink-2); text-decoration:none; white-space:nowrap;
  transition:background .12s, color .12s;
}
.aoc-scope .aoc-more-panel > a:hover{ background:var(--paper-2); color:var(--ink); }
.aoc-scope .aoc-more-panel > a::after{ content:none !important; }
.aoc-scope.aoc-dark .aoc-more-panel{
  background:#131316; border-color:#2E2E36; border-top-color:#36E6E0;
}
.aoc-scope.aoc-dark .aoc-more-panel > a{ color:#B7B2A6; }
.aoc-scope.aoc-dark .aoc-more-panel > a:hover{ background:#1E1E24; color:#fff; }

/* ---- Custom size control (9.13.4) ---------------------------------- */
.aoc-scope .aoc-cs-in{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.aoc-scope .aoc-cs-in input[type=number]{width:92px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;}
.aoc-scope .aoc-cs-in input[type=number]:focus{outline:2px solid var(--a2);outline-offset:1px;}
.aoc-scope .aoc-cs-x{color:var(--ink-2);font-size:14px;}
.aoc-scope .aoc-cs-u{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;}
.aoc-scope .aoc-cs-hint{display:block;margin-top:6px;font-size:12px;color:var(--ink-2);}
.aoc-scope.aoc-dark .aoc-cs-in input[type=number],
.aoc-scope.aoc-dark .aoc-cs-u{background:#141419;border-color:#2A2A32;color:#EDEAE3;}

/* ---- More menu: two-column panel (9.13.5) ---------------------------- */
.aoc-scope .aoc-more-panel.aoc-more-2col,
.aoc-more-panel.aoc-more-2col{
  position:fixed; right:auto; bottom:auto; z-index:2400;
  display:none; flex-direction:row; gap:0;
  padding:0; min-width:min(560px,92vw); max-height:74vh; overflow:hidden;
  background:var(--paper,#fff); border:1px solid var(--line-2,#E7E2D8);
  border-top:2px solid var(--ink,#1C1A16); border-radius:0 0 14px 14px;
  box-shadow:0 22px 48px -22px rgba(28,26,22,.42);
}
.aoc-more-panel.aoc-more-2col .aoc-more-rail{
  flex:0 0 42%; max-width:260px; padding:10px; overflow-y:auto;
  border-right:1px solid var(--line-2,#E7E2D8); background:var(--paper-2,#F7F4EE);
}
.aoc-more-panel.aoc-more-2col .aoc-more-rail button{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; padding:10px 12px; margin:0 0 2px; border:0; border-radius:9px;
  background:transparent; cursor:pointer; text-align:left;
  font:inherit; font-size:14px; font-weight:600; line-height:1.3;
  color:var(--ink-2,#5C5749); transition:background .12s,color .12s;
}
.aoc-more-panel.aoc-more-2col .aoc-more-rail button::after{
  content:"\203A"; opacity:.5; font-size:15px;
}
.aoc-more-panel.aoc-more-2col .aoc-more-rail button:hover,
.aoc-more-panel.aoc-more-2col .aoc-more-rail button.on{
  background:var(--paper,#fff); color:var(--ink,#1C1A16);
}
.aoc-more-panel.aoc-more-2col .aoc-more-pane{
  flex:1 1 auto; padding:12px; overflow-y:auto;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:2px 10px; align-content:start;
}
.aoc-more-panel.aoc-more-2col .aoc-more-pane > a{
  display:block; padding:8px 10px; border-radius:8px;
  font-size:13.5px; font-weight:500; line-height:1.35;
  color:var(--ink-2,#5C5749); text-decoration:none;
  transition:background .12s,color .12s;
}
.aoc-more-panel.aoc-more-2col .aoc-more-pane > a:hover{
  background:var(--paper-2,#F7F4EE); color:var(--ink,#1C1A16);
}
.aoc-more-panel.aoc-more-2col .aoc-more-pane > a::after{ content:none !important; }
@media (max-width:640px){
  .aoc-more-panel.aoc-more-2col{ flex-direction:column; min-width:min(340px,94vw); }
  .aoc-more-panel.aoc-more-2col .aoc-more-rail{
    flex:0 0 auto; max-width:none; border-right:0;
    border-bottom:1px solid var(--line-2,#E7E2D8);
  }
}
.aoc-more-panel.aoc-more-2col.aoc-dark{
  background:#131316; border-color:#2E2E36; border-top-color:#36E6E0;
}
.aoc-more-panel.aoc-more-2col.aoc-dark .aoc-more-rail{ background:#0E0E11; border-right-color:#2E2E36; }
.aoc-more-panel.aoc-more-2col.aoc-dark .aoc-more-rail button{ color:#B7B2A6; }
.aoc-more-panel.aoc-more-2col.aoc-dark .aoc-more-rail button:hover,
.aoc-more-panel.aoc-more-2col.aoc-dark .aoc-more-rail button.on{ background:#1E1E24; color:#fff; }
.aoc-more-panel.aoc-more-2col.aoc-dark .aoc-more-pane > a{ color:#B7B2A6; }
.aoc-more-panel.aoc-more-2col.aoc-dark .aoc-more-pane > a:hover{ background:#1E1E24; color:#fff; }

/* ---- Custom size reveal (9.13.5) ------------------------------------- */
.aoc-scope .opt.aoc-cs[hidden]{ display:none !important; }
.aoc-scope .opt.aoc-cs{
  margin-top:2px; padding:12px 13px; border-radius:10px;
  background:var(--paper-2,#F7F4EE); border:1px solid var(--line-2,#E7E2D8);
}
.aoc-scope.aoc-dark .opt.aoc-cs{ background:#141419; border-color:#2A2A32; }

/* ---- Sub-category row above a live grid (9.14.0) --------------------- */
.aoc-scope .aoc-subcats{ margin:0 0 18px; }
.aoc-scope .aoc-subcats-in{ display:flex; flex-wrap:wrap; gap:8px; }
.aoc-scope .aoc-subcats-in > a{
  display:inline-block; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line,#E7E2D8); background:var(--paper,#fff);
  font-size:13.5px; font-weight:500; line-height:1.2;
  color:var(--ink-2,#5C5749); text-decoration:none;
  transition:background .12s, color .12s, border-color .12s;
}
.aoc-scope .aoc-subcats-in > a:hover{
  background:var(--ink,#1C1A16); border-color:var(--ink,#1C1A16); color:var(--paper,#fff);
}
.aoc-scope .aoc-subcats-in > a::after{ content:none !important; }
.aoc-scope.aoc-dark .aoc-subcats-in > a{
  background:#141419; border-color:#2A2A32; color:#B7B2A6;
}
.aoc-scope.aoc-dark .aoc-subcats-in > a:hover{ background:#fff; border-color:#fff; color:#111; }