/* ================= TOKENS ================= */
:root{
  --bg:        #FFFFFF;
  --bg-alt:    #F2F8FE;   /* pale sky tint, card surfaces */
  --bg-dark:   #16233B;   /* night-sky navy, contrast sections */
  --bg-dark-2: #101B2E;
  --ink:       #1F2A3D;
  --ink-soft:  #5C6B85;
  --ink-on-dark: #F1F6FD;
  --ink-on-dark-soft: #9FB1CC;
  --primary:   #4A93E8;   /* logo sky blue */
  --primary-dark:#3576C9;
  --primary-darker:#285C9E;
  --primary-light:#E6F1FD;
  --accent-pink: #F7C6C2; /* mascot's blush — sparingly */
  --star:      #E3A008;   /* rating gold, used sparingly */
  --line:      #E1E8F2;
  --line-dark: #233553;
  --radius:    14px;
  --radius-sm: 8px;
  --shadow:    0 1px 2px rgba(31,42,61,.05), 0 8px 24px -12px rgba(31,42,61,.16);
  --shadow-lg: 0 20px 60px -20px rgba(16,27,46,.35);
  --maxw:      1180px;
  --ease:      cubic-bezier(.22,.9,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden; /* .fg-hero breaks out to 100vw for a full-bleed photo — this stops that (plus any scrollbar-width mismatch) from ever creating page-level horizontal scroll/jitter */
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
button{font-family:inherit;}
h1,h2,h3,h4{font-family:'Fredoka',sans-serif;font-weight:700;margin:0;letter-spacing:-.015em;}
/* Footer navigation group labels ("Studio", "Shop", "Contact") — not real
   headings. They're link-group labels inside a footer landmark, not part
   of the page's content outline, so making them a real h1-h6 element
   creates heading-order violations that vary page to page depending on
   how deep that page's own content headings go. Same visual weight,
   deliberately not a heading tag. */
.foot-heading{font-family:'Fredoka',sans-serif;font-weight:700;font-size:14px;color:var(--ink);margin:0 0 14px;letter-spacing:-.01em;}
p{margin:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary-dark);
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--primary);}
.eyebrow.on-dark{color:#8FDC7E;}
.eyebrow.on-dark::before{background:#8FDC7E;}

/* stitch-line divider — signature motif, a dashed running seam */
.seam{height:1px;background-image:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px);border:none;margin:0;}
.seam.dark{background-image:repeating-linear-gradient(90deg, var(--line-dark) 0 10px, transparent 10px 18px);}

.btn{
  appearance:none;border:1px solid transparent;border-radius:999px;
  padding:13px 26px;font-size:14.5px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:transform .18s var(--ease), background .18s, border-color .18s, color .18s;
  font-family:'Inter',sans-serif;text-decoration:none;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--primary-dark);color:#fff;}
.btn-primary:hover{background:var(--primary-darker);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--bg);}
.btn-ghost.on-dark{color:var(--ink-on-dark);border-color:var(--ink-on-dark-soft);}
.btn-ghost.on-dark:hover{background:var(--ink-on-dark);color:var(--bg-dark);}
.btn-sm{padding:9px 16px;font-size:13px;}
.btn-block{width:100%;justify-content:center;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ================= NAV ================= */
header.site{
  position:sticky;top:0;left:0;right:0;z-index:500;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 28px;
  height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;}
.brand-logo{height:48px;width:auto;display:block;}
.brand .sub{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);align-self:flex-end;margin-bottom:6px;}

nav.tabs{display:flex;gap:2px;}
nav.tabs a{
  appearance:none;border:none;background:transparent;border-radius:999px;
  padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;
  transition:background .2s, color .2s;white-space:nowrap;text-decoration:none;
}
nav.tabs a[aria-current="page"]{background:var(--primary-light);color:var(--primary-dark);}
nav.tabs a:hover:not([aria-current="page"]){color:var(--ink);}

.nav-right{display:flex;align-items:center;gap:14px;}
.cart-btn{position:relative;background:none;border:1px solid var(--line);border-radius:999px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);text-decoration:none;}
.cart-btn:hover{border-color:var(--primary);}
.cart-badge{
  position:absolute;top:-5px;right:-5px;background:var(--primary-dark);color:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  min-width:17px;height:17px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px;
}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:999px;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;}

main{min-height:60vh;}

.section-head{padding:64px 0 40px;}
.section-head h1{font-size:clamp(30px,4.2vw,46px);max-width:720px;}
.section-head .lede{max-width:560px;color:var(--ink-soft);font-size:17px;margin-top:14px;}

/* =============== HERO (Home) =============== */
.hero{position:relative;padding:56px 0 40px;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.hero h1{font-size:clamp(36px,5vw,58px);line-height:1.05;letter-spacing:-.02em;}
.hero h1 span.accent{color:var(--primary);}
.hero p.lede{margin-top:22px;font-size:18px;color:var(--ink-soft);max-width:480px;}
.hero-ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}

.tape-figure{position:relative;aspect-ratio:1/1.05;}
.tape-figure svg{width:100%;height:100%;}

.hero-gallery{position:relative;aspect-ratio:1/1.05;border-radius:19px;overflow:hidden;background:#F2F8FE;border:1px solid #E1E8F2;}
.hero-gallery-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;cursor:pointer;}
.hero-gallery-slide.active{opacity:1;}
.hero-gallery-slide img,.hero-gallery-slide > div{width:100%;height:100%;}
.hero-gallery-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(0deg,rgba(15,25,45,.62),transparent);color:#fff;}
.hero-gallery-cap .hgc-name{font-size:14.5px;font-weight:600;}
.hero-gallery-cap .hgc-price{font-family:'IBM Plex Mono',monospace;font-size:12px;opacity:.9;margin-top:2px;}
.hero-gallery-dots{position:absolute;top:14px;right:14px;display:flex;gap:6px;}
.hero-gallery-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);transition:background .2s,transform .2s;}
.hero-gallery-dots span.active{background:#fff;transform:scale(1.3);}
@media (prefers-reduced-motion: reduce){.hero-gallery-slide{transition:none;}}

.stat-row{display:flex;gap:38px;margin-top:52px;flex-wrap:wrap;}
.stat b{font-family:'Fredoka',sans-serif;font-size:30px;display:block;color:var(--ink);}
.stat span{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase;}

.craft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:20px;}
.craft-card{background:var(--bg);padding:30px 26px;}
.craft-card .ico{width:34px;height:34px;color:var(--primary);margin-bottom:18px;}
.craft-card h3{font-size:18px;margin-bottom:8px;}
.craft-card p{color:var(--ink-soft);font-size:14.5px;}

/* =============== REVIEWS (intriguing version) =============== */
.reviews-block{background:var(--bg-alt);border-radius:var(--radius);padding:56px 8px;margin:80px 0;}
.reviews-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:0 28px 34px;}
.rating-summary{display:flex;align-items:center;gap:18px;}
.rating-summary .score{font-family:'Fredoka',sans-serif;font-size:44px;font-weight:700;line-height:1;}
.rating-summary .stars{display:flex;gap:2px;margin-bottom:6px;}
.rating-summary .stars svg{width:15px;height:15px;color:var(--star);}
.rating-summary .count{font-size:12.6px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;}

.review-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:auto;gap:16px;padding:0 28px;}
.review-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:14px;position:relative;}
.review-card.featured{grid-row:span 2;background:var(--bg-dark);border-color:var(--bg-dark);color:var(--ink-on-dark);}
.review-card .stars{display:flex;gap:2px;}
.review-card .stars svg{width:14px;height:14px;color:var(--star);}
.review-card .quote{font-size:15px;line-height:1.5;flex:1;}
.review-card.featured .quote{font-family:'Fredoka',sans-serif;font-size:19px;font-weight:600;line-height:1.4;}
.review-who{display:flex;align-items:center;gap:12px;}
.avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:14px;color:#fff;flex:none;}
.review-who .meta{line-height:1.3;}
.review-who .wname{font-size:13.5px;font-weight:600;}
.review-who .wloc{font-size:11.8px;color:var(--ink-soft);}
.review-card.featured .wloc{color:var(--ink-on-dark-soft);}
.verified-badge{position:absolute;top:22px;right:22px;background:var(--primary-light);color:var(--primary-dark);font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:999px;}
.review-card.featured .verified-badge{background:rgba(255,255,255,.12);color:#8FDC7E;}
.garment-tag{font-family:'IBM Plex Mono',monospace;font-size:10.8px;color:var(--primary-dark);background:var(--primary-light);padding:3px 8px;border-radius:999px;display:inline-block;width:fit-content;}
.review-card.featured .garment-tag{background:rgba(255,255,255,.1);color:#8FDC7E;}

footer.site{border-top:1px solid var(--line);padding:52px 0 40px;margin-top:60px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
.foot-grid h4{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;font-weight:600;}
.foot-grid a{display:block;font-size:14px;color:var(--ink);text-decoration:none;padding:4px 0;}
.foot-grid a:hover{color:var(--primary);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);flex-wrap:wrap;gap:10px;}

/* =============== MEASUREMENTS =============== */
.process-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:10px 0 64px;}
.p-step{background:var(--bg-alt);border-radius:var(--radius);padding:22px 18px;position:relative;}
.p-step .num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--primary-dark);}
.p-step h3{font-size:15px;margin:12px 0 6px;line-height:1.25;}
.p-step p{font-size:12.8px;color:var(--ink-soft);}

.measure-body{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start;margin-bottom:64px;}
.measure-points{list-style:none;margin:0;padding:0;}
.measure-points li{display:flex;gap:16px;padding:15px 0;border-bottom:1px dashed var(--line);align-items:baseline;}
.measure-points li:first-child{padding-top:0;}
.measure-points .mk{font-family:'IBM Plex Mono',monospace;color:var(--primary-dark);font-size:12px;width:22px;flex:none;}
.measure-points .mname{font-weight:600;font-size:14.5px;flex:1;}
.measure-points .mdesc{color:var(--ink-soft);font-size:12.8px;flex:1.4;}

.calc-card{background:var(--bg-alt);border-radius:var(--radius);padding:32px;}
.calc-card h2{font-size:20px;margin-bottom:6px;}
.calc-card .lede{color:var(--ink-soft);font-size:13.8px;margin-bottom:22px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1/-1;}
.field label{font-size:12px;font-weight:600;color:var(--ink-soft);}
.field input,.field select,.field textarea{
  border:1px solid var(--line);background:var(--bg);border-radius:var(--radius-sm);
  padding:11px 12px;font-size:14px;font-family:inherit;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);}
.calc-actions{display:flex;gap:10px;margin-top:20px;}
.saved-note{margin-top:14px;font-size:13px;color:var(--primary-dark);display:none;}
.saved-note.show{display:block;}

/* FAQ (AEO) */
.faq-list{max-width:760px;}
.faq-item{border-bottom:1px solid var(--line);padding:20px 0;}
.faq-item h3{font-size:16px;margin-bottom:8px;}
.faq-item p{color:var(--ink-soft);font-size:14.5px;}

/* =============== BOOKING =============== */
.booking-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;}
.book-form{background:var(--bg-alt);border-radius:var(--radius);padding:34px;}
.book-form .form-grid{margin-top:18px;}
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;}
.slot{border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px;text-align:center;font-size:12.8px;background:var(--bg);cursor:pointer;font-family:'IBM Plex Mono',monospace;}
.slot.active{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.mode-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px;}
.mode-grid.two-col{grid-template-columns:1fr 1fr;}
.mode{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 10px;font-size:13px;text-align:center;cursor:pointer;background:var(--bg);}
.mode.active{border-color:var(--primary);background:#fff;box-shadow:inset 0 0 0 1px var(--primary);}

.side-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:18px;}
.side-card h3{font-size:15px;margin-bottom:10px;}
.side-card p{font-size:13.3px;color:var(--ink-soft);}

.confirm-card{display:none;background:var(--bg-dark);color:var(--ink-on-dark);border-radius:var(--radius);padding:30px;margin-top:20px;}
.confirm-card.show{display:block;}
.confirm-card .ref{font-family:'IBM Plex Mono',monospace;color:#8FDC7E;font-size:13px;}

/* =============== SHOP =============== */
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px;}
.chip{border:1px solid var(--line);background:var(--bg-alt);border-radius:999px;padding:8px 16px;font-size:13px;cursor:pointer;font-weight:600;}
.chip.active{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:70px;}
.p-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s;}
.p-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.p-thumb{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;position:relative;}
.p-thumb .brand-tag{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.85);font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;}
.p-info{padding:14px 16px 18px;}
.p-info .pname{font-size:14.5px;font-weight:600;margin-bottom:3px;}
.p-info .pcat{font-size:11.5px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;}
.p-info .prow{display:flex;justify-content:space-between;align-items:center;margin-top:12px;}
.p-info .price{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:14.5px;}
.add-btn{border:1px solid var(--ink);background:var(--bg);border-radius:999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.add-btn:hover{background:var(--ink);color:var(--bg);}

.overlay{position:fixed;inset:0;background:rgba(15,25,18,.42);z-index:800;opacity:0;pointer-events:none;transition:opacity .25s;}
.overlay.show{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:-420px;width:400px;max-width:92vw;height:100%;background:var(--bg);z-index:900;box-shadow:var(--shadow-lg);transition:right .32s var(--ease);display:flex;flex-direction:column;}
.drawer.show{right:0;}
.drawer-head{padding:22px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.drawer-head h2{font-size:18px;}
.drawer-close{background:none;border:none;font-size:22px;cursor:pointer;line-height:1;}
.drawer-items{flex:1;overflow-y:auto;padding:14px 24px;}
.cart-line{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);}
.cart-thumb{width:56px;height:56px;border-radius:var(--radius-sm);flex:none;}
.cart-line .ci-name{font-size:13.8px;font-weight:600;}
.cart-line .ci-meta{font-size:11.8px;color:var(--ink-soft);margin-top:2px;}
.qty-ctrl{display:flex;align-items:center;gap:8px;margin-top:8px;}
.qty-ctrl button{width:22px;height:22px;border:1px solid var(--line);background:none;border-radius:6px;cursor:pointer;font-size:13px;line-height:1;}
.qty-ctrl span{font-family:'IBM Plex Mono',monospace;font-size:13px;min-width:14px;text-align:center;}
.cart-empty{text-align:center;padding:60px 20px;color:var(--ink-soft);font-size:13.8px;}
.drawer-foot{padding:20px 24px 26px;border-top:1px solid var(--line);}
.drawer-foot .sub-row{display:flex;justify-content:space-between;font-size:14.5px;margin-bottom:14px;font-family:'IBM Plex Mono',monospace;}

.checkout-modal{position:fixed;inset:0;z-index:950;display:none;align-items:center;justify-content:center;padding:20px;}
.checkout-modal.show{display:flex;}
.checkout-box{background:var(--bg);border-radius:var(--radius);max-width:460px;width:100%;padding:30px;max-height:88vh;overflow-y:auto;}
.checkout-box h2{font-size:20px;margin-bottom:18px;}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:13px 22px;border-radius:999px;font-size:13.5px;z-index:1000;opacity:0;pointer-events:none;transition:all .3s var(--ease);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* =============== WHATSAPP FLOAT BUTTON =============== */
.whatsapp-float{
  position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));right:24px;z-index:700;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -6px rgba(37,211,102,.55), 0 2px 8px rgba(0,0,0,.12);
  text-decoration:none;
  animation:wa-pulse 2.6s infinite;
  transition:bottom .2s var(--ease);
}
.whatsapp-float:hover{background:#1EBE5A;}
.whatsapp-float svg{width:28px;height:28px;}
.whatsapp-tip{
  position:fixed;bottom:calc(38px + env(safe-area-inset-bottom));right:88px;z-index:700;
  background:var(--ink);color:#fff;font-size:12.8px;font-weight:600;
  padding:8px 14px;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transform:translateX(6px);
  transition:opacity .2s, transform .2s;
}
.whatsapp-float:hover + .whatsapp-tip,
.whatsapp-tip:hover{opacity:1;transform:translateX(0);pointer-events:auto;}
@keyframes wa-pulse{
  0%,100%{box-shadow:0 8px 24px -6px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,.35);}
  50%{box-shadow:0 8px 24px -6px rgba(37,211,102,.55), 0 0 0 10px rgba(37,211,102,0);}
}
@media (max-width:560px){
  .whatsapp-float{bottom:calc(18px + env(safe-area-inset-bottom));right:18px;width:50px;height:50px;}
  .whatsapp-float svg{width:25px;height:25px;}
  .whatsapp-tip{display:none;}
}
/* When the product page's sticky "Add to cart" bar is showing, lift the
   WhatsApp button clear above it so the two never overlap. --sticky-bar-h
   is set by script.js from the bar's *actual* rendered height (it already
   includes the safe-area inset baked into its own padding), so this stays
   correct no matter the device or how much the bar's content wraps.
   The 96px fallback only applies if JS hasn't run yet. */
body.has-sticky-cta .whatsapp-float{bottom:calc(var(--sticky-bar-h, 96px) + 16px);}
body.has-sticky-cta .whatsapp-tip{bottom:calc(var(--sticky-bar-h, 96px) + 30px);}

/* =============== CONTACT PAGE =============== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-bottom:80px;}
.contact-form{background:var(--bg-alt);border-radius:var(--radius);padding:34px;}
.contact-info .side-card svg{color:var(--primary);width:20px;height:20px;margin-bottom:10px;}

/* =============== PRODUCT DETAIL =============== */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:30px 0 20px;align-items:start;}
.pd-media{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);}

/* ============ PRODUCT PAGE — VARIANT B (gallery layout) ============ */
.pd-gallery-wrap{display:flex;gap:14px;}
.pd-thumbs{display:flex;flex-direction:column;gap:10px;width:64px;flex:none;}
.pd-thumb{width:64px;height:64px;border-radius:var(--radius-sm);overflow:hidden;border:2px solid transparent;cursor:pointer;background:var(--bg-alt);}
.pd-thumb.active{border-color:var(--primary);}
.pd-main-media{flex:1;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);}
@media (max-width:640px){ .pd-gallery-wrap{flex-direction:column-reverse;} .pd-thumbs{flex-direction:row;width:auto;} }

.pd-size-note{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;background:var(--bg-alt);font-size:13px;margin-top:14px;display:flex;justify-content:space-between;align-items:center;}
.pd-size-note b{font-family:'IBM Plex Mono',monospace;}
.pd-size-note a{color:var(--primary-dark);font-weight:600;text-decoration:none;font-size:12.5px;}

.pd-sticky-bar{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(31,42,61,.18);padding:12px 24px calc(12px + env(safe-area-inset-bottom));z-index:400;transform:translateY(100%);transition:transform .25s var(--ease);}
.pd-sticky-bar.show{transform:translateY(0);}
.pd-sticky-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.pd-sticky-inner .info{display:flex;align-items:center;gap:12px;min-width:0;}
.pd-sticky-inner .thumb{width:40px;height:40px;border-radius:8px;overflow:hidden;flex:none;}
.pd-sticky-inner .name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pd-sticky-inner .price{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-soft);}

.pd-cross-section{padding:50px 0;border-top:1px solid var(--line);}
.pd-cross-section h2{font-size:20px;margin-bottom:20px;}
.pd-cross-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
.pd-cross-row .thumb{width:60px;height:60px;border-radius:var(--radius-sm);overflow:hidden;flex:none;background:var(--bg-alt);}
.pd-cross-row .info{flex:1;min-width:0;}
.pd-cross-row .name{font-size:14px;font-weight:600;}
.pd-cross-row .meta{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.pd-cross-row .price{font-family:'IBM Plex Mono',monospace;font-size:13.5px;margin-right:14px;}

/* Homepage — auto-sliding product gallery */
.hg-wrap{position:relative;margin-top:22px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.hg-track{display:flex;gap:18px;width:max-content;animation:hg-scroll 34s linear infinite;}
.hg-wrap:hover .hg-track{animation-play-state:paused;}
.hg-card{flex:0 0 190px;text-decoration:none;color:var(--ink);display:block;}
.hg-thumb{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease),box-shadow .2s;}
.hg-card:hover .hg-thumb{transform:translateY(-3px);box-shadow:var(--shadow);}
.hg-name{font-size:13.5px;font-weight:600;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hg-price{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);margin-top:2px;}
@keyframes hg-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.hg-track{animation:none;overflow-x:auto;}}
@media (max-width:640px){.hg-card{flex-basis:150px;}}

.pd-uniform-strip{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;}
.pd-uniform-strip .p-card{flex:0 0 200px;}
.pd-tailor-credit{align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--primary-dark);text-decoration:none;background:var(--primary-light);border-radius:999px;padding:8px 14px;width:fit-content;}
.pd-tailor-credit:hover{background:var(--primary);color:#fff;}
.pd-tailor-credit b{font-weight:600;}

/* Tailors directory (tailors.html) */
.td-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;margin-bottom:70px;}
.td-card{display:block;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);text-decoration:none;color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s;}
.td-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.td-photo{aspect-ratio:1/1;}
.td-photo > div,.td-photo img{width:100%;height:100%;}
.td-info{padding:16px 18px 20px;}
.td-name{font-size:16px;font-weight:600;font-family:'Fredoka',sans-serif;}
.td-title{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--primary-dark);margin-top:4px;}
.td-tagline{font-size:13.3px;color:var(--ink-soft);margin-top:10px;line-height:1.5;}
@media (max-width:980px){ .td-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .td-grid{grid-template-columns:1fr;} }
.pd-info h1{font-size:clamp(24px,3vw,32px);margin-top:6px;}
.pd-price{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:600;margin-top:16px;}
.pd-desc{color:var(--ink-soft);font-size:14.8px;margin-top:16px;line-height:1.6;}

/* Feature icon strip — small icon+label callouts, e.g. "Hand-Finished Seams" */
.pd-feature-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px;margin-top:20px;padding:18px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);}
.pd-feature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
.pd-feature svg{width:22px;height:22px;color:var(--primary);}
.pd-feature span{font-size:10.8px;font-weight:600;color:var(--ink-soft);line-height:1.3;}

/* Product-specific selling points (from the admin "Features" box) — a new
   full-width section under the product grid, each feature in its own
   tick-marked card. */
.pd-features-section{margin-top:44px;padding-top:34px;border-top:1px dashed var(--line);}
.pd-features-section .eyebrow{margin-bottom:14px;}
.pd-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.pd-feature-card{background:var(--bg-alt);border-radius:var(--radius);padding:18px 20px;display:flex;gap:12px;align-items:flex-start;}
.pd-feature-card .tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;margin-top:1px;}
.pd-feature-card .tick svg{width:12px;height:12px;stroke:var(--bg);}
.pd-feature-card .pd-fc-title{font-size:14px;font-weight:700;color:var(--ink);line-height:1.4;}
.pd-feature-card .pd-fc-desc{font-size:12.8px;color:var(--ink-soft);line-height:1.55;margin-top:4px;}

.pd-qty-row{display:flex;align-items:center;gap:10px;margin-top:26px;margin-bottom:14px;}
.pd-qty-row label{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.pd-qty-row input{width:70px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 10px;font-size:14px;}

/* Stock urgency badge — "Only N left", "In stock", or an out-of-stock note */
.pd-stock-badge{display:none;align-items:center;gap:6px;font-size:12.5px;font-weight:600;margin-top:14px;padding:0;}
.pd-stock-badge::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;}
.pd-stock-badge.low{color:#B4530A;}
.pd-stock-badge.low::before{background:#E8890C;}
.pd-stock-badge.ok{color:var(--primary-dark);}
.pd-stock-badge.ok::before{background:var(--primary);}
.pd-stock-badge.out{color:var(--ink-soft);}
.pd-stock-badge.out::before{background:var(--ink-soft);}

/* Add to cart + "need a custom size" sit as two equally-weighted actions,
   so made-to-measure never reads as an afterthought next to buying. */
.pd-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pd-cta-row.single{grid-template-columns:1fr;}
@media (max-width:520px){ .pd-cta-row{grid-template-columns:1fr;} }
.pd-cta-row .btn{text-align:center;}

/* "Order on WhatsApp" — sits below the main CTA row as a third, distinct
   way to order. Uses WhatsApp's own green (already established site-wide
   for the floating chat button) so it reads as WhatsApp, not a second
   brand-blue button competing with Add to cart. */
.btn-whatsapp{margin-top:10px;background:#25D366;color:#fff;border-color:#25D366;gap:8px;}
.btn-whatsapp:hover{background:#1EBE5A;border-color:#1EBE5A;}
.pd-meta-list{margin-top:24px;display:flex;flex-direction:column;gap:8px;}
.pd-meta-list p{font-size:13px;color:var(--ink-soft);}

/* Accordion — Details / Materials & Care / Sizing */
.pd-accordion{margin-top:36px;border-top:1px solid var(--line);}
.pd-acc-item{border-bottom:1px solid var(--line);}
.pd-acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;padding:18px 2px;cursor:pointer;text-align:left;font-family:'Fredoka',sans-serif;font-size:15px;font-weight:600;color:var(--ink);}
.pd-acc-trigger .chev{width:16px;height:16px;color:var(--ink-soft);transition:transform .25s var(--ease);flex:none;}
.pd-acc-item.open .pd-acc-trigger .chev{transform:rotate(180deg);}
.pd-acc-panel{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.pd-acc-item.open .pd-acc-panel{max-height:600px;}
.pd-acc-panel-inner{padding:0 2px 20px;font-size:13.8px;color:var(--ink-soft);line-height:1.65;}
.pd-acc-panel-inner .pd-detail-grid{margin-top:4px;}

.pd-sizing-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--primary-dark);font-size:13px;font-weight:600;text-decoration:none;}
.pd-sizing-link:hover{text-decoration:underline;}
.pd-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
.pd-detail-item{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;background:var(--bg-alt);}
.pd-detail-item .label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;}
.pd-detail-item .value{font-size:14px;font-weight:600;color:var(--ink);}

/* =============== ADMIN =============== */
.admin-list{display:flex;flex-direction:column;gap:10px;}
.admin-row{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;background:var(--bg);}
.admin-row-thumb{width:48px;height:48px;border-radius:8px;overflow:hidden;flex:none;}
.admin-row-info{flex:1;}
.admin-row-name{font-size:13.8px;font-weight:600;}
.admin-row-meta{font-size:11.8px;color:var(--ink-soft);margin-top:2px;}
.admin-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:36px;overflow-x:auto;}
.admin-tab{font-family:'Inter',sans-serif;font-size:13.8px;font-weight:600;color:var(--ink-soft);background:none;border:none;padding:12px 18px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s;}
.admin-tab:hover{color:var(--ink);}
.admin-tab.active{color:var(--primary-dark);border-bottom-color:var(--primary-dark);}
.admin-tab-panel{display:none;}
.admin-tab-panel.active{display:block;}

/* =============== BLOG =============== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:70px;}
.blog-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);text-decoration:none;color:inherit;display:block;transition:transform .2s var(--ease);}
.blog-card:hover{transform:translateY(-3px);}
.blog-thumb{aspect-ratio:16/10;}
.blog-card-body{padding:18px 18px 22px;}
.blog-card-tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--primary-dark);text-transform:uppercase;letter-spacing:.06em;}
.blog-card-title{font-size:16.5px;margin:8px 0 6px;line-height:1.3;}
.blog-card-excerpt{font-size:13px;color:var(--ink-soft);line-height:1.5;}
.blog-card-date{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);margin-top:12px;display:block;}

.article-head{max-width:720px;margin:0 auto;padding:56px 0 20px;text-align:left;}
.article-head h1{font-size:clamp(28px,4vw,42px);}
.article-meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);margin-top:14px;}
.article-hero{max-width:900px;margin:0 auto 40px;aspect-ratio:16/8;border-radius:var(--radius);overflow:hidden;}
.article-body{max-width:720px;margin:0 auto 80px;font-size:16.5px;line-height:1.75;}
.article-body h2{font-size:22px;margin:38px 0 14px;}
.article-body h3{font-size:18px;margin:28px 0 10px;}
.article-body p{margin-bottom:18px;color:var(--ink);}
.article-body figure{margin:32px 0;}
.article-body figure img, .article-body figure > div{border-radius:var(--radius);}
.article-body figcaption{font-size:12.5px;color:var(--ink-soft);margin-top:10px;text-align:center;}
.article-body ul{margin:0 0 18px;padding-left:20px;}
.article-body li{margin-bottom:8px;}

@media (max-width: 980px){
  nav.tabs{position:fixed;top:64px;left:0;right:0;background:var(--bg);flex-direction:column;border-radius:0;border-bottom:1px solid var(--line);padding:8px;display:none;}
  nav.tabs.show{display:flex;}
  nav.tabs a{text-align:left;width:100%;}
  .menu-toggle{display:flex;}
  .hero-grid, .measure-body, .booking-grid, .contact-grid, .product-detail{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr 1fr;}
  .craft-grid{grid-template-columns:1fr;}
  .process-rail{grid-template-columns:repeat(3,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
  .mode-grid, .mode-grid.two-col{grid-template-columns:1fr;}
  .review-grid{grid-template-columns:1fr 1fr;}
  .review-card.featured{grid-row:span 1;grid-column:1/-1;}
  .fg-hero{height:min(72vh,620px);}
  .fg-content{max-width:88%;}
  .fg-arrow{width:38px;height:38px;}
}
@media (max-width: 560px){
  .process-rail{grid-template-columns:1fr 1fr;}
  .product-grid{grid-template-columns:1fr 1fr;}
  .stat-row{gap:24px;}
  .review-grid{grid-template-columns:1fr;}
  .reviews-head{flex-direction:column;align-items:flex-start;}
  .blog-grid{grid-template-columns:1fr;}
  .fg-hero{height:min(66vh,540px);min-height:420px;border-radius:0;}
  .fg-content{padding:26px 22px;max-width:100%;}
  .fg-arrow.prev{left:10px;}
  .fg-arrow.next{right:10px;}
  .fg-dots{right:22px;bottom:20px;}
}

/* ============================================================
   HOMEPAGE VARIATION — full-bleed photo hero (index-full-gallery.html)
   A structural alternative to the boxed .hero-gallery slideshow: one
   large edge-to-edge cross-fading photo with overlay text, prev/next
   arrows and a progress-style dot strip. Built to match this site's
   existing design tokens (Fredoka headings, brand blue CTA, the same
   .eyebrow/.btn components used everywhere else) — see DESIGN-GUIDE.md.
   Scoped entirely to .fg-* classes so it can't affect any other page.
============================================================= */
.fg-hero{
  position:relative;
  width:100vw;margin-left:calc(50% - 50vw); /* full-bleed: break out of .wrap */
  height:min(78vh,720px);min-height:480px;
  overflow:hidden;margin-top:4px;margin-bottom:8px;
  background:var(--bg-dark);
}
.fg-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;}
.fg-slide.active{opacity:1;z-index:1;}
.fg-media{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:var(--bg-dark);}
/* Product photos are portrait shots; on a wide short desktop banner a hard
   cover-crop zooms in and cuts the garment off. Fix: a blurred, oversized
   copy of the same photo fills the banner as a backdrop, while the real
   photo sits on top fully visible (object-fit:contain, never cropped). On
   the narrow mobile viewport this still looks like a normal filled photo,
   since contain + cover backdrop end up nearly identical there. */
.fg-media-backdrop{position:absolute;inset:-6%;background-size:cover;background-position:center;filter:blur(32px) brightness(.55) saturate(1.15);transform:scale(1.1);}
.fg-media-fg{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:2%;}
.fg-media-fg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);}
.fg-media-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary) 0%,var(--bg-dark) 130%);}
.fg-media-fallback svg{width:34%;height:34%;opacity:.5;}
.fg-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,27,46,.82) 0%,rgba(16,27,46,.42) 38%,rgba(16,27,46,.05) 62%);}
.fg-content{position:absolute;left:0;bottom:0;padding:min(6vw,56px);max-width:600px;z-index:2;}
.fg-content .eyebrow{margin-bottom:16px;}
.fg-content h2{font-size:clamp(30px,4.4vw,52px);line-height:1.06;letter-spacing:-.02em;color:#fff;}
.fg-content p{margin-top:16px;font-size:16px;line-height:1.55;color:var(--ink-on-dark-soft);max-width:460px;}
.fg-content .btn{margin-top:28px;}
.fg-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:999px;
  background:rgba(16,27,46,.4);border:1px solid rgba(241,246,253,.3);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s,transform .18s var(--ease);
}
.fg-arrow:hover{background:rgba(16,27,46,.68);}
.fg-arrow:active{transform:translateY(-50%) scale(.94);}
.fg-arrow svg{width:18px;height:18px;}
.fg-arrow.prev{left:20px;}
.fg-arrow.next{right:20px;}
.fg-dots{position:absolute;right:min(6vw,56px);bottom:30px;display:flex;gap:8px;z-index:3;}
.fg-dots span{width:30px;height:4px;border-radius:999px;background:rgba(241,246,253,.35);cursor:pointer;transition:background .2s,width .2s;}
.fg-dots span.active{background:#fff;width:42px;}
@media (prefers-reduced-motion: reduce){.fg-slide{transition:none;}}

/* =============== TECH PACK PRINT VIEW =============== */
/* Hidden on screen entirely; only shown (and everything else hidden)
   when printing/exporting to PDF via window.print() in exportTechPackPdf().
   Handles Urdu natively through the browser's own text engine (RTL +
   the Noto Nastaliq Urdu webfont) rather than a PDF library that would
   need custom font embedding to render Arabic-script glyphs at all. */
.tp-print-view{display:none;}
@media print{
  body *{visibility:hidden;}
  .tp-print-view, .tp-print-view *{visibility:visible;}
  .tp-print-view{
    display:block;position:absolute;top:0;left:0;width:100%;
    padding:24px;font-family:'Inter',Arial,sans-serif;color:#1F2A3D;
  }
  .tp-print-view h1{font-family:'Fredoka',sans-serif;font-size:22px;margin-bottom:4px;}
  .tp-print-meta{font-size:12px;color:#5C6B85;margin-bottom:20px;}
  .tp-print-view h2{font-family:'Fredoka',sans-serif;font-size:15px;margin:22px 0 8px;border-top:1px dashed #E1E8F2;padding-top:16px;}
  .tp-print-view h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#5C6B85;margin-bottom:6px;}
  .tp-print-table{width:100%;border-collapse:collapse;font-size:13px;}
  .tp-print-table th{text-align:left;width:160px;padding:6px 10px 6px 0;color:#5C6B85;font-weight:600;vertical-align:top;}
  .tp-print-table td{padding:6px 0;vertical-align:top;}
  .tp-print-langs{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .tp-print-langs p{font-size:13px;line-height:1.6;white-space:pre-wrap;}
  .tp-urdu{font-family:'Noto Nastaliq Urdu','Noto Sans Arabic',serif;font-size:15px;text-align:right;}
  @page{margin:16mm;}
}

/* =============== ANALYTICS DASHBOARD =============== */
.an-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.an-kpi-card{background:var(--bg-dark);border-radius:14px;padding:18px 20px;}
.an-kpi-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-on-dark-soft);margin-bottom:6px;}
.an-kpi-value{font-family:'Fredoka',sans-serif;font-weight:700;font-size:24px;color:var(--ink-on-dark);}
.an-section-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:820px){.an-section-grid{grid-template-columns:1fr;}}
.an-funnel{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.an-funnel-step{position:relative;}
.an-funnel-bar{background:var(--primary-light);border-radius:8px;overflow:hidden;height:38px;position:relative;}
.an-funnel-fill{background:linear-gradient(90deg,var(--primary-dark),var(--primary));height:100%;border-radius:8px;transition:width .4s var(--ease);}
.an-funnel-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:12.5px;font-weight:600;color:var(--ink);}
.an-funnel-label span:last-child{font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);}
.an-funnel-drop{font-size:11px;color:var(--ink-soft);margin-top:2px;padding-left:2px;}
.an-transition-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:12.8px;background:var(--bg);}
.an-transition-row .an-path{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink-soft);}
.an-transition-row .an-count{font-weight:600;color:var(--primary-dark);}