/* ====================================================
   MATCHAJI UI STANDARD: buttons, cards and popups, the same on every page.
   Loaded after style.css and shop.css. It also restyles the older class names those files and the
   pages already use (btn-primary, btn-ghost, nav-btn, cer-window, cart-checkout-btn, ...), so
   existing markup follows the standard without being rewritten.

   Buttons  square, small uppercase label. Primary = filled ink, outline = ink border.
   Cards    white, 1px hairline, 4px corners, no drop shadow.
   Popups   paper background, 1px hairline, 4px corners; a pale scrim, never a dark one.
   ==================================================== */
:root {
  --ui-ink: #111111;
  --ui-paper: #FDFBF7;
  --ui-card: #FFFFFF;
  --ui-line: rgba(17, 17, 17, 0.12);
  --ui-muted: #6B665E;
  --ui-accent: #2D4C38;
  --ui-radius: 20px;
  --ui-radius-sm: 12px;
  --ui-pill: 9999px;
  --ui-btn: 12px;
  --ui-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ui-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Buttons ---------- */
.btn, .btn-primary, .btn-ghost, .btn-outline, .nav-btn, .hero-card-btn,
.cart-checkout-btn, .pdetail-add-btn, .checkout-pay-btn, .success-wa-btn, .success-close-btn,
.midtrans-success-btn, .midtrans-cancel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.6rem; border-radius: var(--ui-btn); box-shadow: none;
  font-family: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.16s var(--ui-ease-out);
}
.btn:active, .btn-primary:active, .btn-ghost:active, .btn-outline:active, .nav-btn:active, .hero-card-btn:active,
.cart-checkout-btn:active, .pdetail-add-btn:active, .checkout-pay-btn:active, .success-wa-btn:active,
.success-close-btn:active, .midtrans-success-btn:active, .midtrans-cancel-btn:active { transform: scale(0.98); }

/* primary: filled ink */
.btn--primary, .btn-primary, .cart-checkout-btn, .pdetail-add-btn, .checkout-pay-btn, .success-wa-btn, .midtrans-success-btn {
  background: var(--ui-ink); color: #fff; border: 1px solid var(--ui-ink);
}
/* outline: ink border */
.btn--outline, .btn-outline, .btn-ghost, .success-close-btn, .midtrans-cancel-btn {
  background: transparent; color: var(--ui-ink); border: 1px solid var(--ui-ink);
}
/* small: for the nav and cards over photos (their colours stay with the page: light/dark nav, photo card) */
.btn--sm, .nav-btn, .hero-card-btn { min-height: 2.5rem; padding: 0 1.1rem; font-size: 0.72rem; }
.hero-card-btn { width: auto; }
.btn--block { width: 100%; }
/* style.css hides the nav's Contact button on phones (it lives in the menu there); keep that */
@media (max-width: 768px) { .nav-btn { display: none; } }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover, .btn-primary:hover, .cart-checkout-btn:hover, .pdetail-add-btn:hover, .checkout-pay-btn:hover,
  .success-wa-btn:hover, .midtrans-success-btn:hover { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; transform: none; box-shadow: none; }
  .btn--outline:hover, .btn-outline:hover, .btn-ghost:hover, .success-close-btn:hover, .midtrans-cancel-btn:hover { background: var(--ui-ink); color: #fff; border-color: var(--ui-ink); }
  .hero-card-btn:hover { transform: none; box-shadow: none; }
}
.btn:disabled, .btn-primary:disabled, .cart-checkout-btn:disabled, .checkout-pay-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* text links keep the homepage's underlined arrow link */
.cer-btn { border-bottom-width: 1px; }

/* ---------- Cart in the nav ----------
   Pages with a shop show the cart in the nav (a floating button would sit on content, e.g. the
   homepage hero card). It takes the nav's text colour: light over the dark hero, ink once scrolled. */
.gp-nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.gp-nav-cart {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
  min-height: 2.5rem; padding: 0 1rem; border: 1px solid currentColor; border-radius: 0; background: transparent;
  font: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff;
  transition: background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.16s var(--ui-ease-out);
}
.nav-wrap.scrolled .gp-nav-cart, body.gp .gp-nav-cart { color: var(--ui-ink); }
.gp-nav-cart:active { transform: scale(0.98); }
.gp-nav-cart-count {
  min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem; border-radius: 2px;
  display: inline-grid; place-items: center;
  background: currentColor; font-size: 0.7rem; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
/* the number sits on the badge, so it takes the opposite colour of the button text */
.gp-nav-cart-count { color: var(--ui-ink); }
.nav-wrap.scrolled .gp-nav-cart-count, body.gp .gp-nav-cart-count { color: #fff; }
.gp-nav-cart-count[data-zero="true"] { display: none; }
body:has(.gp-nav-cart) .floating-cart-btn { display: none; }
@media (hover: hover) and (pointer: fine) {
  .gp-nav-cart:hover { background: rgba(255, 255, 255, 0.12); }
  .nav-wrap.scrolled .gp-nav-cart:hover, body.gp .gp-nav-cart:hover { background: var(--ui-ink); color: #fff; }
  .nav-wrap.scrolled .gp-nav-cart:hover .gp-nav-cart-count, body.gp .gp-nav-cart:hover .gp-nav-cart-count { color: var(--ui-ink); }
}
@media (max-width: 768px) {
  .gp-nav-cart-label { display: none; }
  .gp-nav-cart { padding: 0 0.75rem; }
}

/* ---------- Cards ---------- */
.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
  color: inherit; text-decoration: none;
  transition: border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.card-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; padding: 1.25rem; }
.card-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-muted); }
.card-kicker span { font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-style: italic; }
.card-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.card-text { font-size: 0.9rem; line-height: 1.55; color: var(--ui-muted); }
@media (hover: hover) and (pointer: fine) {
  a.card:hover { border-color: var(--ui-ink); }
}

/* the homepage's product windows and boxes follow the same card */
.cer-window { border-radius: var(--ui-radius); border: 1px solid var(--ui-line); box-shadow: none; }
.cer-window-dots { display: none; }
.cta-box { border-radius: var(--ui-radius); padding: 0; border: 0; background: none; }
.cta-inner { border-radius: var(--ui-radius); border: 1px solid var(--ui-line); background: var(--ui-card); }
.hero-card, .hero-card-avatar { border-radius: var(--ui-radius); }

/* ---------- Popups ---------- */
.shop-overlay {
  background: rgba(253, 251, 247, 0.6);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.pdetail-modal, .checkout-modal, .success-modal, .midtrans-sim-modal {
  background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
  box-shadow: 0 30px 60px -30px rgba(40, 30, 20, 0.3);
  transform: scale(0.97); opacity: 0;
  transition: transform 0.15s var(--ui-ease-out), opacity 0.15s cubic-bezier(0.32, 0.72, 0, 1);   /* closing: quick */
}
.shop-overlay.active :is(.pdetail-modal, .checkout-modal, .success-modal, .midtrans-sim-modal) { transform: none; opacity: 1; transition-duration: 0.22s; }

.cart-drawer {
  background: var(--ui-paper); border-left: 1px solid var(--ui-line); border-radius: var(--ui-radius) 0 0 var(--ui-radius);
  box-shadow: -30px 0 60px -40px rgba(40, 30, 20, 0.35);
  /* hidden when closed: no stray shadow on the page edge, nothing focusable off-screen */
  visibility: hidden;
  transition: transform 0.24s var(--ui-ease-drawer), visibility 0s linear 0.24s;
}
.cart-drawer.open { visibility: visible; transition: transform 0.36s var(--ui-ease-drawer), visibility 0s; }
.cart-drawer-header, .cart-drawer-footer { background: transparent; }

/* everything rounded inside the popups uses the same corner */
.cart-item, .cart-item-img, .pdetail-img-box, .pdetail-variant-chip, .form-input, .form-textarea,
.checkout-items-preview, .checkout-pay-badge, .midtrans-amount-box, .midtrans-method-item, .success-order-box,
.shipping-section, .shipping-option, .checkout-total-display, .weight-breakdown, .courier-tab, .qty-btn, .cart-close-btn {
  border-radius: var(--ui-radius-sm);
}
.cart-item { background: var(--ui-card); border: 1px solid var(--ui-line); }
.form-input, .form-textarea { background: var(--ui-card); border: 1px solid var(--ui-line); }
.form-input:focus, .form-textarea:focus { border-color: var(--ui-ink); box-shadow: none; }
.pdetail-variant-chip.active, .shipping-option:has(input:checked) { border-color: var(--ui-ink); background: var(--ui-card); }
.shipping-option input[type="radio"] { accent-color: var(--ui-ink); }

/* toast and floating cart */
.shop-toast {
  background: var(--ui-ink); color: #fff; border: 0; border-radius: var(--ui-pill);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.45);
  transition: transform 0.24s var(--ui-ease-out), opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.shop-toast-icon { display: none; }
body:has(.shop-overlay.active) .shop-toast { opacity: 0; pointer-events: none; }
.floating-cart-btn {
  border-radius: var(--ui-btn); background: var(--ui-ink); border: 1px solid var(--ui-ink);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.45);
  transition: background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.16s var(--ui-ease-out);
}
.floating-cart-btn:active { transform: scale(0.98); }
.cart-badge-count, .nav-cart-badge { border-radius: var(--ui-pill); }
@media (hover: hover) and (pointer: fine) {
  .floating-cart-btn:hover { background: var(--ui-accent); border-color: var(--ui-accent); transform: none; box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.45); }
}

@media (prefers-reduced-motion: reduce) {
  .pdetail-modal, .checkout-modal, .success-modal, .midtrans-sim-modal, .shop-toast { transform: none !important; }
}

/* ---------- Footer (spec sheet): wordmark, ruled columns with mono labels ---------- */
.site-footer {
  --sf-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--ui-paper); color: var(--ui-ink); border-top: 1px solid var(--ui-ink);
  padding: 5rem 0 2.5rem; font-size: 0.9rem; position: relative; z-index: 1;
}
.site-footer .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.sf-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 2.5rem; }
.sf-mark { font-size: clamp(2.25rem, 7vw, 4.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ui-ink); text-decoration: none; }
.sf-tag { font-family: var(--sf-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-muted); margin: 0; }
.sf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.sf-col { display: flex; flex-direction: column; gap: 0.55rem; padding: 0 0 1.5rem; }
.sf-label { font-family: var(--sf-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-muted); margin: 0 0 0.4rem; }
.site-footer .sf-col a { color: var(--ui-ink); text-decoration: none; width: fit-content; line-height: 1.4; overflow-wrap: anywhere; }
.sf-bottom { display: flex; justify-content: space-between; gap: 0.75rem 1.5rem; flex-wrap: wrap; padding-top: 1.5rem; font-family: var(--sf-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-muted); }
@media (hover: hover) and (pointer: fine) {
  .site-footer .sf-col a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.25s var(--ui-ease-out); }
  .site-footer .sf-col a:hover { background-size: 100% 1px; }
}
@media (max-width: 700px) {
  .site-footer { padding-top: 3rem; }
  .sf-grid { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ====================================================
   CLICKABLE vs NOT
   Clickable: square, 1px ink border (or filled ink), pointer, fills on hover. Text links carry an arrow and underline.
   Static (tags, badges): soft tint, no border, 2px corners, default cursor. They never look like a button.
   ==================================================== */
.tag, .sv-tag, .pdp-badge {
  display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 0.75rem; border: 0; border-radius: var(--ui-pill);
  background: rgba(17, 17, 17, 0.06); color: var(--ui-ink); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em;
  cursor: default; user-select: text;
}
.tag--accent, .sv-tag--ink { background: rgba(45, 76, 56, 0.12); color: var(--ui-accent); font-weight: 600; border: 0; }
.pdp-badge { width: auto; height: auto; min-height: 1.75rem; padding: 0 0.75rem; border-radius: var(--ui-pill); background: rgba(45, 76, 56, 0.12); color: var(--ui-accent); font-size: 0.9rem; font-weight: 600; text-transform: none; }
/* product tabs and sizes are real controls: the same bordered square, filled when selected */
.pdp-tabs { gap: 0.5rem; }
.pdp-tabs button, .pdp-sizes button {
  border: 1px solid var(--ui-ink); border-radius: var(--ui-btn); background: transparent; color: var(--ui-ink); cursor: pointer;
  min-height: 2.5rem; padding: 0 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.16s var(--ui-ease-out);
}
.pdp-tabs button { padding-bottom: 0; }
.pdp-tabs button[aria-selected="true"], .pdp-sizes button[aria-checked="true"] { background: var(--ui-ink); color: #fff; }
.pdp-tabs button[aria-selected="true"]::after { display: none; }
.pdp-tabs button:active, .pdp-sizes button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .pdp-tabs button:not([aria-selected="true"]):hover, .pdp-sizes button[aria-checked="false"]:hover { background: rgba(17, 17, 17, 0.07); }
}

/* ---------- Header: floating rounded controls, no bar (logo pill, link pill, circle cart and menu) ---------- */
.nav-wrap { top: 0.9rem; padding: 0 1.25rem; }
.nav, .nav-wrap.scrolled .nav, body.gp .nav-wrap .nav, body.gp .nav-wrap.scrolled .nav {
  max-width: 1400px; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* shared glass for the floating pieces */
.nav .logo, .nav .nav-links {
  --nv-fg: #fff; --nv-bg: rgba(255, 255, 255, 0.14); --nv-line: rgba(255, 255, 255, 0.32);
  background: var(--nv-bg); border: 1px solid var(--nv-line); border-radius: var(--ui-pill);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.nav-wrap.scrolled .nav .logo, .nav-wrap.scrolled .nav .nav-links, body.gp .nav .logo, body.gp .nav .nav-links {
  --nv-fg: var(--ui-ink); --nv-bg: rgba(253, 251, 247, 0.82); --nv-line: var(--ui-line);
}
.nav .logo { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.2rem; color: var(--nv-fg) !important; }
.nav .nav-links { gap: 0.15rem; padding: 0.25rem; }
.nav-links a, .nav-wrap.scrolled .nav-links a, body.gp .nav-wrap .nav-links a {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 1rem; border-radius: var(--ui-pill);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nv-fg) !important; text-shadow: none; opacity: 1; background: none;
  transition: background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.nav-links a[aria-current="page"], body.gp .nav-wrap .nav-links a[aria-current="page"] { background: var(--ui-ink); color: #fff !important; }
.nav-wrap:not(.scrolled) .nav-links a[aria-current="page"] { background: #fff; color: var(--ui-ink) !important; }
body.gp .nav-wrap .nav-links a[aria-current="page"] { background: var(--ui-ink); color: #fff !important; }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:not([aria-current="page"]):hover { background: rgba(127, 127, 127, 0.18); opacity: 1; }
}
/* right side: circle cart, pill contact, circle menu */
.gp-nav-actions { gap: 0.5rem; }
.gp-nav-cart {
  position: relative; width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; justify-content: center;
  border: 0; border-radius: 50%; background: var(--ui-ink); color: #fff;
}
.nav-wrap:not(.scrolled) .gp-nav-cart { background: #fff; color: var(--ui-ink); }
body.gp .nav-wrap:not(.scrolled) .gp-nav-cart { background: var(--ui-ink); color: #fff; }
.nav-wrap.scrolled .gp-nav-cart, body.gp .gp-nav-cart { background: var(--ui-ink); color: #fff; }
.gp-nav-cart-label { display: none; }
.gp-nav-cart-count {
  position: absolute; top: -0.3rem; right: -0.3rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; border-radius: var(--ui-pill);
  background: var(--ui-accent) !important; color: #fff !important; font-size: 0.65rem; box-shadow: 0 0 0 2px var(--ui-paper);
}
@media (hover: hover) and (pointer: fine) {
  .gp-nav-cart:hover, .nav-wrap.scrolled .gp-nav-cart:hover, body.gp .gp-nav-cart:hover { background: var(--ui-accent); color: #fff; }
}
.nav-wrap:not(.scrolled) .nav-btn { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.32); color: #fff; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nav-wrap.scrolled .nav-btn, body.gp .nav-wrap .nav-btn { background: var(--ui-ink) !important; border: 1px solid var(--ui-ink); color: #fff !important; }
.burger {
  width: 2.75rem; height: 2.75rem; padding: 0; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--ui-ink); color: #fff; box-shadow: none; cursor: pointer;
}
.nav-wrap:not(.scrolled) .burger { background: #fff; color: var(--ui-ink); }
body.gp .nav-wrap:not(.scrolled) .burger { background: var(--ui-ink); color: #fff; }
.nav-wrap.scrolled .burger, body.gp .burger { background: var(--ui-ink); color: #fff; }
.burger span { background: currentColor !important; border-radius: 2px; width: 18px; }
.burger span:nth-child(2) { width: 12px; }
@media (max-width: 768px) {
  .nav-wrap { top: 0.6rem; padding: 0 0.75rem; }
  .nav .nav-links { display: none; }
}

body.gp .nav-wrap .burger span, .nav-wrap.scrolled .burger span { background: currentColor !important; }

/* ---------- Scroll reveal: heavy fade-up, only hides once JS has marked the page (see app.js) ---------- */
.js-reveal .reveal, .js-reveal .pc-grid > li { transition: opacity 0.9s cubic-bezier(0.32, 0.72, 0, 1), transform 0.9s cubic-bezier(0.32, 0.72, 0, 1); }
.js-reveal .reveal:not(.visible), .js-reveal .pc-grid > li:not(.visible) { opacity: 0; transform: translateY(2.5rem); }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal:not(.visible), .js-reveal .pc-grid > li:not(.visible) { opacity: 1; transform: none; }
  .js-reveal .reveal, .js-reveal .pc-grid > li { transition: none; }
}

/* ---------- Main menu: one family of full pills and circles (page buttons stay at --ui-btn) ---------- */
.nav-wrap .nav-btn { border-radius: var(--ui-pill); }
.nav-wrap .nav-btn:has(svg) { gap: 0.6rem; padding-right: 0.3rem; }
/* "button-in-button": the arrow sits in its own circle, flush with the right edge */
.nav-wrap .nav-btn svg {
  box-sizing: content-box; width: 10px; height: 10px; padding: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
@media (hover: hover) and (pointer: fine) {
  .nav-wrap .nav-btn:hover svg { transform: translate(2px, -1px) scale(1.05); background: rgba(255, 255, 255, 0.28); }
}
.nav-wrap .nav-btn:active, .burger:active, .gp-nav-cart:active { transform: scale(0.97); }

/* hamburger: three lines morph into an X (style.css holds the transform), circle button stays put */
.burger { gap: 5px; transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.burger span { transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1), width 0.4s cubic-bezier(0.32, 0.72, 0, 1); }
.burger.open span:nth-child(1), .burger.open span:nth-child(3) { width: 18px; }
.burger.open { background: var(--ui-ink) !important; color: #fff !important; }

/* mobile menu: frosted full-screen sheet, links rise one by one */
.mob-menu { background: rgba(253, 251, 247, 0.86); -webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3); }
.mob-menu ul { display: grid; gap: 0.25rem; }
.mob-menu li { margin: 0; }
.mob-menu a { font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 600; letter-spacing: -0.035em; padding: 0.35rem 0; }
.mob-menu a:active { opacity: 0.55; }

/* ---------- Selected vs. clickable: two different colours ----------
   Buttons that DO something are solid ink (or white on glass). Options that are CHOSEN are matcha green:
   a soft green fill, a green outline and a dot, so "selected" never looks like another button. */
:root { --ui-sel-bg: #E3ECE5; --ui-sel-fg: #1F3A2A; --ui-sel-line: #2D4C38; }
.pdp-tabs button[aria-selected="true"], .pdp-sizes button[aria-checked="true"],
.courier-tab.active {
  background: var(--ui-sel-bg); color: var(--ui-sel-fg); border-color: var(--ui-sel-line);
  box-shadow: inset 0 0 0 1px var(--ui-sel-line);
}
.pdp-tabs button[aria-selected="true"]::before, .pdp-sizes button[aria-checked="true"]::before {
  content: ''; flex: none; width: 0.4rem; height: 0.4rem; margin-right: 0.45rem; border-radius: 50%; background: var(--ui-sel-line);
}
.pdp-tabs button, .pdp-sizes button { display: inline-flex; align-items: center; justify-content: center; }
.pc-buy .pc-sizes button[aria-checked]:only-child { box-shadow: none; }
.pc-buy .pc-sizes button[aria-checked]:only-child::before { display: none; }
/* current page in the menu (on light glass) */
.nav-wrap.scrolled .nav-links a[aria-current="page"], body.gp .nav-wrap .nav-links a[aria-current="page"] {
  background: var(--ui-sel-bg); color: var(--ui-sel-fg) !important; box-shadow: inset 0 0 0 1px var(--ui-sel-line);
}

/* ---------- Process page: same header, same pill family, selected = mint on dark glass ---------- */
.nav-wrap .nav, .nav-wrap.scrolled .nav { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-wrap .nav::before { display: none; }
.view-tool-btn.active { background: rgba(167, 214, 182, 0.24); color: #D5EBDB; box-shadow: inset 0 0 0 1px rgba(167, 214, 182, 0.55); }
.view-tool-btn.active svg { stroke: #D5EBDB; }
.btn-interactive, .nav-btn-secondary, .nav-btn-primary, .btn-secondary-light, .btn-primary-light { border-radius: var(--ui-btn); }

/* ---------- Home: text links become real buttons, the hint emoji becomes a dot ---------- */
.cer-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1.1rem;
  border: 1px solid var(--ui-ink); border-radius: var(--ui-btn); background: transparent; color: var(--ui-ink);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}
.cer-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cer-btn:hover { background: var(--ui-ink); color: #fff; opacity: 1; } }
.pulse-icon { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ui-sel-line); }

/* ---------- Logo: the raccoon mark in its own circle, coloured by the header state ---------- */
.nav .logo { width: 2.75rem; min-height: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; font-size: 0; line-height: 0; }
.nav .logo::before {
  content: ''; width: 2.1rem; height: 2.1rem; background: currentColor;
  -webkit-mask: url(logo-mark.png) center / contain no-repeat; mask: url(logo-mark.png) center / contain no-repeat;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
@media (hover: hover) and (pointer: fine) { .nav .logo:hover::before { transform: rotate(-6deg) scale(1.06); } }

/* ---------- Other grades: the whole card is the link ---------- */
.gl-list { gap: 1rem; }
.gl-item {
  padding: 1.25rem; background: #fff; border: 1px solid rgba(17, 17, 17, 0.12); border-radius: 14px; /* same card as /products */
  transition: border-color 0.25s cubic-bezier(0.32, 0.72, 0, 1), transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.gl-visual { height: 200px; padding: 1rem 0 0; border-bottom: 0; border-radius: 0; background: transparent; align-items: flex-end; }
.gl-caption { align-items: center; }
.gl-arrow {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; margin-left: auto;
  background: var(--ui-ink); color: #fff; font-size: 0.9rem; line-height: 1;
}
.gl-item:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .gl-item:hover { border-color: var(--ui-ink); } }
.gl-item:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }

/* ---------- Product cards on phones: compact facts, sizes and cart icon share one row, equal card heights ---------- */
.pc-buy { margin-top: auto; }
@media (max-width: 760px) {
  .pc-link { padding: 0.75rem 0.75rem 0.5rem; gap: 0.5rem; }
  .pc-bottom { gap: 0; }
  .pc-name { font-size: 0.9375rem; line-height: 1.25; }
  .pc-price { font-size: 0.75rem; }
  .pc-facts { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; padding-top: 0.5rem; }
  .pc-facts > span { gap: 0.05rem; }
  .pc-k { font-size: 0.5625rem; }
  .pc-val { font-size: 0.75rem; line-height: 1.25; }
  .pc-buy { grid-template-columns: minmax(0, 1fr) 2.5rem; align-items: end; gap: 0.375rem; padding: 0 0.75rem 0.75rem; }
  .pc-sizes { grid-auto-flow: row; gap: 0.25rem; }
  .pc-sizes button { min-height: 2.25rem; height: 2.25rem; padding: 0 0.4rem; font-size: 0.625rem; letter-spacing: 0.04em; }
  .pc-sizes button[aria-checked="true"]::before { width: 0.3rem; height: 0.3rem; margin-right: 0.3rem; }
  .pc-add { justify-self: end; align-self: end; width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 380px) {
  .pc-sizes button { padding: 0 0.25rem; font-size: 0.5625rem; letter-spacing: 0.02em; }
  .pc-buy { grid-template-columns: minmax(0, 1fr) 2.25rem; }
  .pc-add { width: 2.25rem; height: 2.25rem; }
}

/* ---------- Phones: one size control per card, tap to switch to the next size ---------- */
@media (max-width: 760px) {
  .pc-buy { align-items: center; }
  .pc-sizes button[aria-checked="false"] { display: none; }
  .pc-sizes button[aria-checked]::before { display: none; }
  .pc-sizes button[aria-checked="true"]:not(:only-child)::after {
    content: ''; flex: none; width: 0.38rem; height: 0.38rem; margin: -0.15rem 0 0 0.45rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  }
  .pc-add { align-self: center; }
}

/* ---------- Accessibility ---------- */
.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 1000; padding: 0.7rem 1.1rem; border-radius: var(--ui-btn); background: var(--ui-ink); color: #fff; font-size: 0.8rem; font-weight: 700; text-decoration: none; transform: translateY(-200%); transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1); }
.skip-link:focus-visible { transform: none; }
@media (pointer: coarse) { .site-footer a { display: inline-block; padding: 0.6rem 0; } }

/* ---------- Policy pages (/privacy, /returns, /shipping) ---------- */
.policy { padding: 7rem 0 4rem; }
.policy-wrap { max-width: 46rem; }
.policy-title { margin: 0; font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.policy-meta { margin: 0.75rem 0 1.5rem; font-family: var(--mono, 'IBM Plex Mono', monospace); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: #6B665E; }
.policy-lead { margin: 0 0 2.5rem; font-size: 1.125rem; line-height: 1.65; }
.policy-sec { padding: 1.75rem 0; border-top: 1px solid var(--ui-line); }
.policy-sec h2 { margin: 0 0 0.75rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.policy-sec p, .policy-sec li { line-height: 1.7; color: #2b2a27; }
.policy-sec ul, .policy-sec ol { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.policy-sec a, .policy-lead a { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }
.policy-more { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 2rem; border-top: 1px solid var(--ui-line); }
.policy-more a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.1rem; border: 1px solid var(--ui-ink); border-radius: var(--ui-btn); color: var(--ui-ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s cubic-bezier(0.32, 0.72, 0, 1); }
@media (hover: hover) and (pointer: fine) { .policy-more a:hover { background: var(--ui-ink); color: #fff; } }