/* ===================================================================
   AESTHETIC OFFICE CO. — BASE  ·  v3.0.0
   Mobile-first. Single source of truth. No stacked patch blocks.
   Every value below is a *default*; Elementor controls override it.
=================================================================== */

/* -------------------------------------------------------------
   1. TOKENS  (Brand Guidelines §2, §4, §6 — locked)
------------------------------------------------------------- */
.aoc-w.aoc-w{
  --paper:#FBF9F4;
  --paper-2:#F4EEE2;
  --paper-3:#EFE7D7;
  --card:#FFFFFF;
  --ink:#1C1A16;
  --ink-2:#4A4438;
  --muted:#7A7163;
  --line:#E4DCCC;
  --line-2:#D5CAB4;

  --accent:#E89A2C;    /* marigold */
  --accent-2:#E0492C;  /* poppy    */
  --accent-3:#3F7D4E;  /* sage     */
  --gold:#C9A24B;

  --disp:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,"DejaVu Sans Mono",monospace;

  --r:14px;
  --pill:30px;
  --maxw:1300px;
  --gut:18px;        /* horizontal gutter — grows at breakpoints */
  --sec:52px;        /* section vertical padding — grows at breakpoints */
}

/* -------------------------------------------------------------
   2. OVERFLOW GUARD  (the #1 mobile bug)
   Nothing inside a widget may ever exceed its own box.
------------------------------------------------------------- */
.aoc-w.aoc-w{max-width:100%;}
.aoc-w.aoc-w *{min-width:0;max-width:100%;}
.aoc-w.aoc-w img,
.aoc-w.aoc-w video,
.aoc-w.aoc-w svg,
.aoc-w.aoc-w iframe{max-width:100%;height:auto;display:block;}
.aoc-w.aoc-w input,
.aoc-w.aoc-w textarea,
.aoc-w.aoc-w select{max-width:100%;}
/* grid/flex children must be allowed to shrink below content width */
.aoc-w.aoc-w [class*="grid"] > *,
.aoc-w.aoc-w [class*="-in"] > *{min-width:0;}

/* -------------------------------------------------------------
   3. RESET  (scoped — never leaks to the theme)
------------------------------------------------------------- */
.aoc-w.aoc-w,
.aoc-w.aoc-w *,
.aoc-w.aoc-w *::before,
.aoc-w.aoc-w *::after{box-sizing:border-box;margin:0;padding:0;}
.aoc-w.aoc-w{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.aoc-w.aoc-w a,
.aoc-w.aoc-w a:link,
.aoc-w.aoc-w a:visited,
.aoc-w.aoc-w a:hover,
.aoc-w.aoc-w a:focus,
.aoc-w.aoc-w a:active{color:inherit;text-decoration:none;box-shadow:none;background-image:none;}
.aoc-w.aoc-w ul,.aoc-w.aoc-w ol,.aoc-w.aoc-w li{list-style:none;}
.aoc-w.aoc-w li::before{content:none;}
.aoc-w.aoc-w li::marker{content:none;}
.aoc-w.aoc-w h1,.aoc-w.aoc-w h2,.aoc-w.aoc-w h3,
.aoc-w.aoc-w h4,.aoc-w.aoc-w h5,.aoc-w.aoc-w h6,
.aoc-w.aoc-w .aoc-h{font-family:var(--disp);color:inherit;text-transform:none;font-weight:700;}
.aoc-w.aoc-w button{
  font-family:inherit;cursor:pointer;border:none;background:none;
  -webkit-appearance:none;appearance:none;text-transform:none;letter-spacing:normal;color:inherit;
}
.aoc-w.aoc-w input,
.aoc-w.aoc-w textarea,
.aoc-w.aoc-w select{
  font-family:var(--body);-webkit-appearance:none;appearance:none;
  box-shadow:none;text-transform:none;border-radius:0;
}
.aoc-w.aoc-w :focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}
.aoc-w.aoc-w .aoc-sr{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* -------------------------------------------------------------
   4. CATEGORY WORLDS  (Brand Guidelines §3)
   The world now carries its own BACKGROUND + MOOD, not just accents,
   so one dropdown genuinely themes a whole sub-store.
------------------------------------------------------------- */
.aoc-w.aoc-w[data-world="totes"]{
  --accent:#E89A2C;--accent-2:#E0492C;--accent-3:#3F7D4E;
  --paper:#FBF9F4;--paper-2:#F6EFE0;
}
.aoc-w.aoc-w[data-world="neon"]{
  --accent:#36E6E0;--accent-2:#FF3DA5;--accent-3:#FFB23E;
  --paper:#0C0C0E;--paper-2:#131316;--paper-3:#1A1A20;--card:#131316;
  --ink:#EDE7DA;--ink-2:#CFC9BE;--muted:#8C8C97;
  --line:#24242B;--line-2:#2E2E36;
}
.aoc-w.aoc-w[data-world="cards"]{
  --accent:#C9A24B;--accent-2:#1F5E47;--accent-3:#8A6D2E;
  --paper:#F4EEE2;--paper-2:#EDE4D2;
}
.aoc-w.aoc-w[data-world="decals"]{
  --accent:#6A6F8C;--accent-2:#3F4360;--accent-3:#8A8FA8;
  --paper:#F5F5F7;--paper-2:#ECECF1;--line:#DEDEE6;--line-2:#C9C9D6;
}
.aoc-w.aoc-w[data-world="stickers"]{
  --accent:#E0492C;--accent-2:#B6321F;--accent-3:#E89A2C;
  --paper:#FDF8F2;--paper-2:#FBEDE4;
}
.aoc-w.aoc-w[data-world="acrylic"]{
  --accent:#C9A24B;--accent-2:#9A7A2F;--accent-3:#3F7D4E;
  --paper:#FAFAF8;--paper-2:#F1EFE7;
}

/* Explicit scheme override (Style tab) always beats the world default. */
.aoc-w.aoc-w[data-scheme="dark"]{
  --paper:#0C0C0E;--paper-2:#131316;--paper-3:#1A1A20;--card:#131316;
  --ink:#EDE7DA;--ink-2:#CFC9BE;--muted:#8C8C97;
  --line:#24242B;--line-2:#2E2E36;
}
.aoc-w.aoc-w[data-scheme="light"]{
  --paper:#FBF9F4;--paper-2:#F4EEE2;--paper-3:#EFE7D7;--card:#FFFFFF;
  --ink:#1C1A16;--ink-2:#4A4438;--muted:#7A7163;
  --line:#E4DCCC;--line-2:#D5CAB4;
}
/* Surfaces follow the scheme automatically. */
.aoc-w.aoc-w .cattile,.aoc-w.aoc-w .ptile,.aoc-w.aoc-w .growcard,
.aoc-w.aoc-w .b2b-card,.aoc-w.aoc-w .ugtile,.aoc-w.aoc-w .fin,
.aoc-w.aoc-w .auditem{background:var(--card);}
.aoc-w.aoc-w .pimg{background:var(--paper-2);}
.aoc-w.aoc-w[data-world="neon"] .pimg,
.aoc-w.aoc-w[data-scheme="dark"] .pimg{background:#0A0A0C;}

/* -------------------------------------------------------------
   5. LAYOUT PRIMITIVES  (mobile-first)
------------------------------------------------------------- */
.aoc-w.aoc-w .wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gut);
}
.aoc-w.aoc-w .sec{padding-block:var(--sec);}

.aoc-w.aoc-w .sh{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;margin-bottom:26px;
}
.aoc-w.aoc-w .sh h2,
.aoc-w.aoc-w .sh .aoc-h{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(24px,6.2vw,38px);
  letter-spacing:-.025em;line-height:1.06;
}
.aoc-w.aoc-w .sh .sub{
  color:var(--muted);font-size:clamp(14px,3.6vw,15px);
  margin-top:8px;line-height:1.6;
}
.aoc-w.aoc-w .viewall{
  font-family:var(--mono);font-size:13px;font-weight:600;
  color:var(--accent-2);white-space:nowrap;
}
.aoc-w.aoc-w .viewall:hover{text-decoration:underline;}

/* Signature motif — crop / registration marks */
.aoc-w.aoc-w .crop{position:relative;}
.aoc-w.aoc-w .crop::before,
.aoc-w.aoc-w .crop::after{
  content:"";position:absolute;width:13px;height:13px;
  pointer-events:none;z-index:2;
}
.aoc-w.aoc-w .crop::before{top:-6px;left:-6px;border-top:1.5px solid var(--line-2);border-left:1.5px solid var(--line-2);}
.aoc-w.aoc-w .crop::after{bottom:-6px;right:-6px;border-bottom:1.5px solid var(--line-2);border-right:1.5px solid var(--line-2);}

/* -------------------------------------------------------------
   6. BUTTONS / LABELS
------------------------------------------------------------- */
.aoc-w.aoc-w .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:14.5px;line-height:1.2;
  padding:13px 22px;border-radius:var(--pill);
  background:var(--ink);color:var(--paper);
  text-align:center;transition:transform .15s,background .15s,color .15s;
  min-height:46px;                 /* touch target */
}
.aoc-w.aoc-w .btn:hover{transform:translateY(-1px);}
.aoc-w.aoc-w .btn-o{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.aoc-w.aoc-w .btn-o:hover{background:var(--ink);color:var(--paper);}
.aoc-w.aoc-w .btn-acc{background:var(--accent-2);color:#fff;}
.aoc-w.aoc-w .btn-gold{background:var(--accent);color:var(--ink);}
.aoc-w.aoc-w .btn-row{display:flex;flex-direction:column;gap:10px;align-items:stretch;}

.aoc-w.aoc-w .eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-2);font-weight:500;
}
.aoc-w.aoc-w .price{font-family:var(--mono);font-weight:500;}
.aoc-w.aoc-w .spectag{
  font-family:var(--mono);font-size:10px;padding:3px 9px;border-radius:20px;
  background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line);
  display:inline-block;
}

/* -------------------------------------------------------------
   7. CSS-DRAWN GLYPHS  (no stock photos, no emoji icons)
------------------------------------------------------------- */
.aoc-w.aoc-w .glyph{height:52px;display:flex;align-items:center;justify-content:center;margin-bottom:11px;}
.aoc-w.aoc-w .g-neon{width:44px;height:30px;border:2.5px solid var(--accent-2);border-radius:8px;box-shadow:0 0 8px var(--accent-2),inset 0 0 6px rgba(224,73,44,.4);}
.aoc-w.aoc-w .g-acrylic{width:40px;height:40px;background:linear-gradient(135deg,rgba(63,125,78,.25),rgba(63,125,78,.05));border:1.5px solid var(--accent-3);border-radius:6px;transform:rotate(-8deg);box-shadow:6px 6px 0 rgba(63,125,78,.15);}
.aoc-w.aoc-w .g-wood{width:44px;height:34px;border-radius:5px;background:repeating-linear-gradient(90deg,#B07A43 0 3px,#9A6836 3px 6px,#A87340 6px 9px);}
.aoc-w.aoc-w .g-sticker{width:40px;height:40px;background:var(--card);border:2px dashed var(--line-2);border-radius:9px;position:relative;transform:rotate(6deg);}
.aoc-w.aoc-w .g-sticker::after{content:"";position:absolute;inset:7px;background:var(--accent);border-radius:5px;}
.aoc-w.aoc-w .g-decal{width:44px;height:40px;border:2.5px solid var(--ink);border-radius:6px 6px 20px 6px;}
.aoc-w.aoc-w .g-tote{width:32px;height:38px;background:var(--paper-2);border:2px solid var(--accent-3);border-radius:3px 3px 6px 6px;position:relative;}
.aoc-w.aoc-w .g-tote::before,.aoc-w.aoc-w .g-tote::after{content:"";position:absolute;top:-9px;width:5px;height:12px;border:2px solid var(--accent-3);border-bottom:none;border-radius:6px 6px 0 0;}
.aoc-w.aoc-w .g-tote::before{left:5px;}
.aoc-w.aoc-w .g-tote::after{right:5px;}
.aoc-w.aoc-w .g-canvas{width:44px;height:34px;background:linear-gradient(135deg,var(--accent),var(--accent-2));border:3px solid var(--paper);box-shadow:0 0 0 1.5px var(--line-2);}
.aoc-w.aoc-w .g-card{width:46px;height:30px;border-radius:4px;background:linear-gradient(135deg,#1F5E47,#143D2F);position:relative;}
.aoc-w.aoc-w .g-card::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:3px;background:var(--gold);box-shadow:0 6px 0 rgba(201,162,75,.6);}
.aoc-w.aoc-w .g-banner{width:26px;height:44px;background:linear-gradient(var(--accent-2),var(--accent));border-radius:2px;position:relative;}
.aoc-w.aoc-w .g-banner::before,.aoc-w.aoc-w .g-banner::after{content:"";position:absolute;top:3px;width:4px;height:4px;border-radius:50%;background:var(--paper);}
.aoc-w.aoc-w .g-banner::before{left:4px;}
.aoc-w.aoc-w .g-banner::after{right:4px;}
.aoc-w.aoc-w .g-nail{width:40px;height:40px;position:relative;}
.aoc-w.aoc-w .g-nail span{position:absolute;width:9px;height:16px;background:var(--accent-2);border-radius:8px 8px 3px 3px;}
.aoc-w.aoc-w .g-nail span:nth-child(1){left:2px;top:12px;transform:rotate(-12deg);}
.aoc-w.aoc-w .g-nail span:nth-child(2){left:14px;top:8px;background:var(--accent);}
.aoc-w.aoc-w .g-nail span:nth-child(3){left:26px;top:12px;transform:rotate(12deg);background:var(--accent-3);}

/* -------------------------------------------------------------
   8. PRODUCT GRID + TILES
   auto-fit + minmax(0,…) — can never overflow a narrow screen.
------------------------------------------------------------- */
.aoc-w.aoc-w .pgrid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
}
.aoc-w.aoc-w .ptile{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--card);transition:.16s;display:flex;flex-direction:column;
}
.aoc-w.aoc-w .ptile:hover{transform:translateY(-3px);box-shadow:0 18px 38px -24px rgba(28,26,22,.42);border-color:var(--line-2);}
.aoc-w.aoc-w a.ptile,.aoc-w.aoc-w .ptile-link{display:flex;flex-direction:column;color:inherit;}
.aoc-w.aoc-w .pimg{
  aspect-ratio:4/3;position:relative;display:flex;
  align-items:center;justify-content:center;overflow:hidden;
}
.aoc-w.aoc-w .pbadge{
  position:absolute;top:8px;left:8px;font-family:var(--mono);
  font-size:9.5px;font-weight:600;letter-spacing:.04em;padding:3px 8px;
  border-radius:5px;background:var(--ink);color:var(--paper);text-transform:uppercase;
}
.aoc-w.aoc-w .pbadge.new{background:var(--accent-3);}
.aoc-w.aoc-w .pbadge.sale{background:var(--accent-2);}
.aoc-w.aoc-w .pbody{padding:12px 12px 14px;}
.aoc-w.aoc-w .pname{font-weight:600;font-size:13.5px;letter-spacing:-.01em;line-height:1.35;}
.aoc-w.aoc-w .pfrom{font-family:var(--mono);font-size:11.5px;color:var(--accent-2);font-weight:500;margin-top:6px;}
.aoc-w.aoc-w .pfrom del{opacity:.55;margin-right:6px;}
.aoc-w.aoc-w .pfrom ins{text-decoration:none;}
.aoc-w.aoc-w .prate{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:9px;font-family:var(--mono);font-size:11px;color:var(--muted);}
.aoc-w.aoc-w .stars{color:var(--accent);letter-spacing:1px;}
.aoc-w.aoc-w .pcart{padding:0 12px 12px;margin-top:auto;}
.aoc-w.aoc-w .pcart .btn{width:100%;padding:11px 14px;font-size:13px;min-height:42px;}
.aoc-w.aoc-w .aoc-note{grid-column:1/-1;font-family:var(--mono);font-size:13px;color:var(--muted);padding:22px 0;}

/* CSS-drawn product renders */
.aoc-w.aoc-w .r-neon{background:#0C0C0E;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.aoc-w.aoc-w .r-neon .w{font-family:var(--disp);font-style:italic;font-weight:700;font-size:clamp(22px,7vw,34px);text-align:center;}
.aoc-w.aoc-w .r-acrylic{width:64%;height:64%;background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.25));border:1.5px solid rgba(63,125,78,.4);border-radius:8px;box-shadow:8px 8px 0 rgba(63,125,78,.12);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;color:var(--accent-3);font-size:clamp(12px,3.4vw,15px);}
.aoc-w.aoc-w .r-wood{width:70%;height:58%;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:clamp(12px,3.4vw,15px);box-shadow:inset 0 0 0 3px rgba(74,47,22,.25);}
.aoc-w.aoc-w .r-sticker{width:66%;height:66%;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-w.aoc-w .r-sticker b{font-family:var(--disp);font-weight:800;font-size:clamp(13px,4vw,16px);color:var(--accent-2);}
.aoc-w.aoc-w .r-decal{width:60%;height:66%;border:3px solid var(--ink);border-radius:8px 8px 26px 8px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;font-family:var(--disp);font-weight:700;font-size:clamp(11px,3.2vw,13px);}
.aoc-w.aoc-w .r-tote{width:46%;height:74%;background:#F7F1E4;border-radius:4px 4px 8px 8px;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;}
.aoc-w.aoc-w .r-tote::before,.aoc-w.aoc-w .r-tote::after{content:"";position:absolute;top:-16%;width:13%;height:22%;border:5px solid #E7DBC2;border-bottom:none;border-radius:12px 12px 0 0;}
.aoc-w.aoc-w .r-tote::before{left:20%;}
.aoc-w.aoc-w .r-tote::after{right:20%;}
.aoc-w.aoc-w .r-tote .pr{font-family:var(--disp);font-weight:800;font-size:clamp(12px,3.6vw,15px);text-align:center;line-height:1.1;}
.aoc-w.aoc-w .r-canvas{width:66%;height:60%;border:6px solid #fff;box-shadow:0 0 0 1.5px var(--line-2),0 12px 24px -12px rgba(0,0,0,.3);}
.aoc-w.aoc-w .r-card{width:70%;height:46%;border-radius:7px;position:relative;overflow:hidden;box-shadow:0 14px 28px -14px rgba(0,0,0,.5);}
.aoc-w.aoc-w .r-card .fo{position:absolute;inset:0;padding:10px;display:flex;flex-direction:column;justify-content:space-between;}
.aoc-w.aoc-w .r-card .bn{font-family:var(--disp);font-weight:800;font-size:clamp(12px,3.6vw,15px);background:linear-gradient(120deg,#E9D49A,#C9A24B,#F4E6BF,#A9842F);-webkit-background-clip:text;background-clip:text;color:transparent;}
.aoc-w.aoc-w .r-card .sm{font-family:var(--mono);font-size:8px;color:rgba(255,255,255,.7);}
.aoc-w.aoc-w .r-banner{width:32%;height:78%;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;}

/* -------------------------------------------------------------
   9. PRICE / CURRENCY  (PKR default · USD toggle)
------------------------------------------------------------- */
.aoc-w.aoc-w .aoc-cur{font-family:var(--mono);font-weight:500;white-space:nowrap;}
.aoc-w.aoc-w .aoc-cur .u{display:none;}
html[data-aoc-cur="usd"] .aoc-w.aoc-w .aoc-cur .p{display:none;}
html[data-aoc-cur="usd"] .aoc-w.aoc-w .aoc-cur .u{display:inline;}
.aoc-w.aoc-w .aoc-curswap{
  font-family:var(--mono);font-size:11.5px;display:inline-flex;
  border:1px solid var(--line-2);border-radius:20px;overflow:hidden;
}
.aoc-w.aoc-w .aoc-curswap button{padding:4px 10px;color:var(--muted);line-height:1.4;}
.aoc-w.aoc-w .aoc-curswap button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}

/* -------------------------------------------------------------
   10. RESPONSIVE SCALE-UP  (mobile-first: everything above is phone)
------------------------------------------------------------- */
@media (min-width:480px){
  .aoc-w.aoc-w{--gut:22px;--sec:60px;}
  .aoc-w.aoc-w .pgrid{gap:14px;}
  .aoc-w.aoc-w .btn-row{flex-direction:row;}
}
@media (min-width:768px){
  .aoc-w.aoc-w{--gut:26px;--sec:74px;}
  .aoc-w.aoc-w .pgrid{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:18px;}
  .aoc-w.aoc-w .pbody{padding:15px 15px 16px;}
  .aoc-w.aoc-w .pname{font-size:14px;}
  .aoc-w.aoc-w .pfrom{font-size:12px;}
  .aoc-w.aoc-w .sh{
    flex-direction:row;align-items:flex-end;justify-content:space-between;
    gap:24px;flex-wrap:wrap;margin-bottom:34px;
  }
  .aoc-w.aoc-w .sh .sub{max-width:460px;}
  .aoc-w.aoc-w .btn{padding:14px 26px;}
}
@media (min-width:1024px){
  .aoc-w.aoc-w{--gut:28px;--sec:88px;}
  .aoc-w.aoc-w .pgrid{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:20px;}
}

/* Full-width buttons on phones only — never a 3px-wide pill in a flex row */
@media (max-width:479px){
  .aoc-w.aoc-w .btn{width:100%;}
  .aoc-w.aoc-w .btn.btn-inline{width:auto;}
}

@media (prefers-reduced-motion:reduce){
  .aoc-w.aoc-w *{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}