/* =========================================================
   NOODLER — design system
   Filament-thread visual language.
   ========================================================= */

:root{
  /* ---- palette (light) ---- */
  --ink:        #15151B;
  --paper:      #ECEAE3;
  --paper-2:    #E1DED3;
  --line:       #C9C4B4;
  --muted:      #6B6759;

  --magenta:    #FF3D7F;
  --cyan:       #16C5D9;
  --amber:      #FFB020;
  --violet:     #6F52FF;
  --lime:       #9FDB3E;

  --fg:         var(--ink);
  --bg:         var(--paper);
  --bg-raised:  #F5F3EC;
  --card-line:  var(--line);

  --radius: 14px;
  --radius-lg: 26px;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --shadow-thread: 0 2px 0 0 currentColor;
}

html{ font-size: 15px; scroll-behavior: smooth; }

html[data-theme="dark"]{
  --fg:         #F3F1EA;
  --bg:         #131318;
  --bg-raised:  #1B1B22;
  --ink:        #F3F1EA;
  --paper:      #131318;
  --paper-2:    #1E1E26;
  --line:       #33333E;
  --muted:      #94908A;
}

/* product photography inverts opposite to theme, per spec:
   light theme -> darker toy render; dark theme -> lighter toy render */
html[data-theme="light"] .product-photo img{ filter: brightness(0.86) saturate(1.05); }
html[data-theme="dark"]  .product-photo img{ filter: brightness(1.18) saturate(1.05); }

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 .4em;
}

a{ color: inherit; text-decoration: none; }
button, input, select{ font-family: inherit; color: inherit; }

.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* ---------------- top bar ---------------- */
.topbar{
  position: sticky; top:0; z-index: 40;
  background: var(--bg);
  border-bottom: 3px solid var(--fg);
}
.topbar-inner{
  display:flex; align-items:center; gap: 22px;
  height: 76px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-weight: 800; font-size: 22px;
  letter-spacing: -0.03em;
}
.logo svg{ height: 34px; width: 34px; }

.topbar-search{
  flex:1;
  display:flex; align-items:center; gap:10px;
  background: var(--bg-raised);
  border: 2px solid var(--fg);
  border-radius: 999px;
  padding: 8px 18px;
  max-width: 460px;
}
.topbar-search svg{ width:18px; height:18px; flex-shrink:0; color: var(--muted); }
.topbar-search input{
  border:0; background:transparent; outline:none;
  color: var(--fg); font-weight:600; font-size:14px; width:100%;
}

.topbar-actions{ display:flex; align-items:center; gap: 10px; margin-left:auto; }

.icon-btn{
  width:42px; height:42px; border-radius:50%;
  border: 2px solid var(--fg);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; background: var(--bg); color: var(--fg);
  position: relative;
}
.icon-btn:hover{ background: var(--fg); color: var(--bg); }
.icon-btn svg{ width:19px; height:19px; }

.badge-count{
  position:absolute; top:-6px; right:-6px;
  background: var(--magenta); color:#fff;
  font-size: 10px; font-weight:800;
  min-width:18px; height:18px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  border: 2px solid var(--bg);
}

.notif-wrap{ position:relative; }
.notif-dropdown{
  position:absolute; top:52px; right:0; width:320px; max-width:calc(100vw - 32px);
  background: var(--bg); border:2px solid var(--fg); border-radius: var(--radius-lg);
  box-shadow: 6px 6px 0 rgba(0,0,0,.18); z-index:60; overflow:hidden;
}
.notif-dropdown-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:2px dashed var(--line); font-weight:800; font-size:13px;
}
.notif-empty{ padding:20px 16px; color:var(--muted); font-weight:600; font-size:13px; }
.notif-list{ max-height:340px; overflow-y:auto; }
.notif-item{ padding:12px 16px; border-bottom:1px dashed var(--line); cursor:pointer; }
.notif-item:last-child{ border-bottom:0; }
.notif-item:hover{ background: var(--paper-2); }
.notif-item.unread{ background: color-mix(in srgb, var(--violet) 8%, var(--bg)); }
.notif-msg{ font-size:13px; font-weight:600; }
.notif-date{ font-size:11px; color:var(--muted); font-weight:700; margin-top:4px; }

.theme-toggle{
  width:42px; height:42px; border-radius:50%;
  border: 2px solid var(--fg);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; background: var(--bg); color: var(--fg);
  padding:0;
}
.theme-toggle:hover{ background: var(--fg); color: var(--bg); }
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

/* .eyebrow is still used standalone by calculator.html's calc-page header
   (hero section itself was removed — the catalog grid is the landing point). */
.eyebrow{
  font-family: var(--font-mono); font-size:11px; font-weight:700;
  text-transform: uppercase; letter-spacing:.12em; color: var(--magenta);
  display:flex; align-items:center; gap:7px; margin-bottom:6px;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: currentColor; }

.btn{
  font-family: var(--font-display); font-weight:800; font-size:15px;
  padding: 14px 24px; border-radius: 999px; border: 3px solid var(--fg);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-align:center;
}
.btn-solid{ background: var(--fg); color: var(--bg); }
.btn-solid:hover{ background: var(--magenta); border-color: var(--magenta); color:#fff; }
.btn-ghost{ background: transparent; color: var(--fg); }
.btn-ghost:hover{ background: var(--fg); color: var(--bg); }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-solid:disabled:hover{ background: var(--fg); border-color: var(--fg); color: var(--bg); }

.admin-shortcut{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  border:2px solid var(--violet); color: var(--violet); border-radius:999px;
  padding:9px 16px; font-weight:800; font-size:13px;
}
.admin-shortcut svg{ width:16px; height:16px; }
.admin-shortcut:hover{ background: var(--violet); color:#fff; }

/* ---------------- filters row ---------------- */
.filters{
  display:flex; align-items:center; gap:10px; flex-wrap: wrap;
  padding: 22px 0; border-bottom: 2px dashed var(--line);
}
.chip{
  border:2px solid var(--fg); border-radius: 999px; padding:7px 14px;
  font-weight:700; font-size:13px; cursor:pointer; background:transparent;
}
.chip.active{ background: var(--violet); border-color: var(--violet); color:#fff; }
.filters .spacer{ flex:1; }
.sort-label{ font-size:12px; font-weight:700; color:var(--muted); }

select.chip{
  appearance: none; -webkit-appearance: none;
  padding: 7px 34px 7px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315151B' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}
html[data-theme="dark"] select.chip{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F1EA' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------------- combo sets (catalog) ---------------- */
.combo-section{ padding: 20px 0 4px; }
.combo-section-head{ font-size:18px; margin-bottom:14px; }
.combo-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.combo-card{
  display:flex; flex-direction:column; gap:10px; padding:16px;
  border:2px solid var(--fg); border-radius: var(--radius); background: var(--bg-raised);
}
.combo-card-photos{ display:flex; gap:8px; }
.combo-card-photos .product-thumb{ border-radius:10px; }
.combo-card-name{ font-family: var(--font-display); font-weight:700; font-size:15px; }
.combo-card-items{ font-size:12px; color:var(--muted); font-weight:600; margin-top:2px; }
.combo-card-price{ font-family: var(--font-mono); font-weight:800; font-size:16px; margin-top:6px; }
.combo-card-price .old{ text-decoration:line-through; color:var(--muted); font-size:13px; margin-right:6px; font-weight:600; }
.combo-card-savings{ font-size:12px; font-weight:800; color: var(--lime); margin-top:2px; }

/* ---------------- product tiles (catalog, similar-products grids) ---------------- */
.product-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px; padding: 20px 0 60px;
}
.product-card{
  display:flex; flex-direction:column;
  border: 2px solid var(--fg); border-radius: var(--radius);
  background: var(--bg); overflow:hidden; position:relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover{ transform: translateY(-3px); box-shadow: 5px 5px 0 var(--fg); }
.card-thumb{ position:relative; aspect-ratio: 1/1; background: var(--bg-raised); border-bottom: 2px solid var(--fg); }
.card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-badge{
  position:absolute; top:10px; left:10px;
  font-family: var(--font-mono); font-size:11px; font-weight:800;
  padding:3px 9px; border-radius:999px; color:#fff;
}
.card-badge.new{ background: var(--lime); color: var(--ink); }
.card-badge.sale{ background: var(--magenta); }
.card-badge.stock{ background: var(--muted); }
.product-card.out-of-stock .card-thumb img{ opacity:.55; filter: grayscale(.4); }
.product-card.out-of-stock .card-name{ color: var(--muted); }
.card-body{ padding:14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-tag{ font-size:11px; font-weight:700; color:var(--muted); font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }
.card-name{
  font-family: var(--font-display); font-weight:700; font-size:15px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height: 2.6em;
}
.card-footer{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* shared with cart.html's row layout */
.product-info .name{ font-family: var(--font-display); font-weight:700; font-size:17px; }
.product-info .tag{ font-size:12px; color: var(--muted); font-weight:700; font-family: var(--font-mono); }
.product-thumb{
  width:96px; height:96px; border-radius: var(--radius);
  border: 2px solid var(--fg); overflow:hidden; background: var(--bg-raised);
}
.product-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Two product photos side-by-side, filling one .product-thumb square — the
   cart's fallback combo image when no custom combo photo was uploaded. */
.combo-thumb-pair{ display:flex; }
.combo-thumb-pair img{ width:50%; height:100%; object-fit:cover; display:block; }
.combo-thumb-pair img:first-child{ border-right:1px solid var(--fg); }

.price{ font-family: var(--font-mono); font-weight:800; font-size:17px; white-space:nowrap; }
.price .old{ text-decoration: line-through; color: var(--muted); font-size:13px; margin-right:6px; }
.card-price{ font-family: var(--font-mono); font-weight:800; font-size:16px; }
.card-price .old{ display:block; text-decoration: line-through; color: var(--muted); font-size:12px; font-weight:600; }

.row-cta{
  width:46px; height:46px; border-radius:50%; border:2px solid var(--fg);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background: var(--bg); flex-shrink:0;
}
.row-cta:hover{ background: var(--lime); border-color: var(--lime); }
.card-cta{ width:38px; height:38px; }
.card-cta svg{ width:16px; height:16px; }

.load-more-wrap{ display:flex; justify-content:center; padding: 20px 0; }

/* Empty/error states inside a .product-grid — spans every column instead of
   sitting in a single card-width track like a stray grid item would. */
.empty-state{
  grid-column: 1 / -1; text-align:center;
  padding: 60px 20px; color: var(--muted); font-weight:600;
}

/* ---------------- product page ---------------- */
.product-page{ padding: 40px 0 80px; }
.breadcrumb{ font-family: var(--font-mono); font-size:12px; color:var(--muted); font-weight:700; margin-bottom: 18px; }
.product-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.product-head{ font-size: clamp(28px, 4vw, 44px); max-width: 20ch; }
.product-head-row .icon-btn{ flex-shrink:0; margin-top:4px; }

.product-main{
  display:grid; grid-template-columns: 1fr 380px; gap: 46px; margin-top: 26px;
}
.product-photo{
  border: 3px solid var(--fg); border-radius: var(--radius-lg);
  overflow:hidden; background: var(--bg-raised); aspect-ratio: 1/1;
}
.product-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.photo-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.photo-thumb{
  width:64px; height:64px; border-radius:10px; padding:0; cursor:pointer;
  border:2px solid var(--line); overflow:hidden; background: var(--bg-raised);
}
.photo-thumb.active{ border-color: var(--fg); }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.buy-panel{ display:flex; flex-direction:column; gap:20px; }
.buy-actions{ display:flex; gap:10px; }
.buy-actions .btn{ flex:1; }

.stock-status{ font-size:13px; font-weight:700; font-family: var(--font-mono); }
.stock-status.in{ color: var(--lime); }
.stock-status.out{ color: var(--magenta); }

.desc{ font-size:14px; color: var(--fg); font-weight:600; }
.desc h4{ font-family: var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:8px;}

.wholesale-tiers{
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 12px 16px;
  font-size:13px; font-weight:600;
}
.wholesale-tiers .row{ display:flex; justify-content:space-between; padding:4px 0; }
.wholesale-tiers .row b{ font-family: var(--font-mono); color: var(--magenta); }

.delivery-widget{ border: 2px solid var(--fg); border-radius: var(--radius-lg); overflow:hidden; }
.delivery-widget-head{
  padding:12px 16px; font-size:12px; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); border-bottom:2px dashed var(--line);
}
.delivery-option{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px dashed var(--line);
}
.delivery-option:last-child{ border-bottom:0; }
.delivery-option img{ width:32px; height:32px; object-fit:contain; flex-shrink:0; }
.delivery-option .info{ flex:1; min-width:0; }
.delivery-option .name{ font-weight:700; font-size:14px; }
.delivery-option .time{ font-size:12px; color:var(--muted); font-weight:600; }
.delivery-option .price{ font-family: var(--font-mono); font-weight:700; font-size:13px; white-space:nowrap; }

.similar-block{ margin-top: 64px; }
.similar-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 18px; }

/* ---------------- cart ---------------- */
.cart-page{ padding: 44px 0 90px; }
.cart-list{ display:flex; flex-direction:column; margin-bottom: 26px; }
.cart-row{
  display:grid; grid-template-columns: 80px 1.6fr auto auto auto;
  gap: 18px; align-items:center;
  padding: 16px 6px; border-bottom: 2px solid var(--line);
}
.cart-row .product-thumb{ width:80px; height:80px; }
/* display:contents keeps the anchor's children as direct grid items of
   .cart-row (so the 5-column template is unaffected) while a click anywhere
   on the thumb/name still bubbles up to the wrapping <a>. */
.cart-row-link{ display:contents; cursor:pointer; }
.cart-row-link:hover .name{ text-decoration: underline; }
.qty-stepper{
  display:flex; align-items:center; gap:10px;
  border: 2px solid var(--fg); border-radius: 999px; padding: 4px 6px;
  font-family: var(--font-mono); font-weight:700; font-size:14px;
}
.qty-stepper button{
  width:24px; height:24px; border-radius:50%; border:0; background:transparent;
  cursor:pointer; font-size:16px; line-height:1;
}
.qty-stepper button:hover{ background: var(--paper-2); }
.qty-stepper span{ min-width:16px; text-align:center; }
.cart-summary{ max-width:340px; margin-left:auto; }

/* ---------------- profile / account (vertical tabs) ---------------- */
.profile-page{ padding: 44px 0 80px; }
.btn-link{
  background:none; border:0; padding:0; font:inherit; font-weight:700;
  color: var(--magenta); cursor:pointer; text-decoration:underline;
}
.btn-danger{ border-color: var(--magenta); color: var(--magenta); }
.btn-danger:hover{ background: var(--magenta); border-color: var(--magenta); color:#fff; }

.account-layout{ display:grid; grid-template-columns: 230px 1fr; gap:32px; align-items:start; margin-top:24px; }
.account-tabs{
  display:flex; flex-direction:column; gap:4px; border:2px solid var(--fg);
  border-radius: var(--radius-lg); padding:12px; background: var(--bg-raised);
  position:sticky; top:96px;
}
.account-tab{
  text-align:left; padding:12px 14px; border-radius:10px; font-weight:700;
  font-size:14px; cursor:pointer; background:transparent; border:0; color: var(--fg);
}
.account-tab:hover{ background: var(--paper-2); }
.account-tab.active{ background: var(--fg); color: var(--bg); }
.account-tab-actions{
  margin-top:10px; padding-top:14px; border-top:2px dashed var(--line);
  display:flex; flex-direction:column; gap:8px;
}
.account-panel{ min-width:0; }

/* authCard and referralCard are mutually exclusive (logged out vs in) —
   only one is ever visible, so a single column, not a 2-up grid. */
.profile-grid{ display:grid; grid-template-columns: 1fr; gap: 30px; max-width: 640px; }
.card{
  border: 2px solid var(--fg); border-radius: var(--radius-lg); padding: 26px;
  background: var(--bg-raised);
}
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color: var(--muted); }
.field input, .field select{
  border: 2px solid var(--fg); border-radius: 10px; padding: 11px 14px;
  background: var(--bg); color: var(--fg); font-weight:600; font-size:14px; outline:none;
}
.field input:focus, .field select:focus{ border-color: var(--violet); }

.ref-box{
  display:flex; gap:10px; align-items:center; border:2px dashed var(--fg);
  border-radius: 12px; padding: 12px 16px; font-family: var(--font-mono); font-size:13px; font-weight:700;
}
.ref-box span{ overflow-wrap:anywhere; }

/* ---------------- referral gamification ---------------- */
.ref-stats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
  margin-top:20px; text-align:center;
}
.ref-stat{ border:2px solid var(--fg); border-radius: var(--radius); padding:12px 6px; background: var(--bg); }
.ref-stat .v{ font-family: var(--font-mono); font-size:20px; font-weight:800; }
.ref-stat .k{ font-size:11px; font-weight:700; color:var(--muted); margin-top:4px; }
.ref-progress{ margin-top:18px; }
.ref-progress-bar{
  height:14px; border:2px solid var(--fg); border-radius:999px; overflow:hidden; background: var(--bg);
}
.ref-progress-fill{
  height:100%; background: linear-gradient(90deg, var(--lime), var(--cyan));
  transition: width .4s ease; border-radius:999px;
}
.ref-progress-label{ font-size:12px; font-weight:700; color:var(--muted); margin:8px 0 0; }

/* ---------------- order history (profile) / order detail (admin) ---------------- */
.pill-status{
  font-family: var(--font-mono); font-size:11px; font-weight:700; padding:3px 10px;
  border-radius:999px; border:2px solid var(--fg); display:inline-block;
}
.pill-status.paid, .pill-status.confirmed, .pill-status.completed{ border-color: var(--lime); }
.pill-status.pending, .pill-status.packing_started{ border-color: var(--amber); }
.pill-status.printing, .pill-status.processed{ border-color: var(--cyan); }
.pill-status.shipped{ border-color: var(--violet); }
.pill-status.cancelled, .pill-status.rejected, .pill-status.returned{ border-color: var(--magenta); opacity:.8; }

.order-row{ border-bottom:2px solid var(--line); }
.order-row:last-child{ border-bottom:0; }
.order-row-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 4px; cursor:pointer;
}
.order-row-head:hover{ background: var(--paper-2); }
.order-id{ font-family: var(--font-mono); font-weight:800; }
.order-total{ font-family: var(--font-mono); font-weight:700; margin-left:auto; }
.order-date{ font-size:12px; color:var(--muted); font-weight:700; }
.order-row-detail{ padding: 4px 4px 18px; }
.order-items{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.order-item-row{ display:flex; justify-content:space-between; font-size:13px; font-weight:600; }
.order-meta{ font-size:13px; font-weight:600; display:flex; flex-direction:column; gap:4px; color:var(--fg); }
.order-meta b{ color:var(--muted); font-weight:700; }

.result-line{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:2px dashed var(--line); }
.result-line .k{ font-weight:700; color: var(--muted); font-size:14px; }
.result-line .v{ font-family: var(--font-mono); font-weight:800; font-size:20px; }

/* ---------------- full-page checkout ---------------- */
.checkout-page{ padding: 44px 0 90px; }
.checkout-grid{ display:grid; grid-template-columns: 1fr 360px; gap: 40px; margin-top:24px; align-items:start; }
.checkout-summary{ position:sticky; top:96px; }
.checkout-summary .modal-cart-row{ padding: 6px 0; }

.contact-toggle{
  display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px;
  margin: 4px 0 18px; cursor:pointer;
}
.contact-toggle input{ width:18px; height:18px; accent-color: var(--fg); cursor:pointer; }

.contact-method-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:20px; }
.contact-method-card{
  display:flex; align-items:center; gap:12px; border:2px solid var(--line);
  border-radius: var(--radius); padding:12px 14px; cursor:pointer; background: var(--bg);
  text-align:left;
}
.contact-method-card:hover{ border-color: var(--fg); }
.contact-method-card.active{ border-color: var(--fg); box-shadow: 3px 3px 0 var(--fg); }
.contact-method-card span{ font-weight:700; font-size:14px; }
.contact-method-icon{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.contact-method-icon svg{ width:20px; height:20px; }
.contact-method-icon.phone{ background: var(--amber); }
.contact-method-icon.telegram{ background: #2AABEE; }
.contact-method-icon.viber{ background: #7360F2; }
.contact-method-icon.whatsapp{ background: #25D366; }

.address-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.address-card{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  border:2px solid var(--line); border-radius: var(--radius); padding:14px 16px; cursor:pointer;
}
.address-card:hover{ border-color: var(--fg); }
.address-card.active{ border-color: var(--fg); box-shadow: 3px 3px 0 var(--fg); }
.address-card .label{ font-weight:800; font-size:13px; }
.address-card .detail{ font-size:12px; color: var(--muted); font-weight:600; margin-top:2px; }
.address-card .remove-btn{ width:32px; height:32px; flex-shrink:0; }
.address-card .remove-btn svg{ width:14px; height:14px; }
.address-card-main{ display:flex; align-items:center; gap:12px; min-width:0; }
.address-card-icon{ width:30px; height:30px; border-radius:50%; border:2px solid var(--line); flex-shrink:0; object-fit:cover; }
.address-card-text{ min-width:0; }
.address-card-text .label, .address-card-text .detail{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.add-address-btn{
  display:flex; align-items:center; gap:8px; border:2px dashed var(--fg);
  border-radius: var(--radius); padding:14px 16px; cursor:pointer; background:transparent;
  font-weight:700; font-size:14px; color: var(--fg); width:100%;
}
.add-address-btn:hover{ background: var(--paper-2); }
.save-address-toggle{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; margin: 10px 0 16px; }
.save-address-toggle input{ width:16px; height:16px; accent-color: var(--fg); }

/* ---------------- skeleton loaders ---------------- */
.skeleton{
  background: linear-gradient(90deg, var(--paper-2) 25%, var(--line) 37%, var(--paper-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-shine 1.4s ease infinite;
  border-radius: var(--radius);
}
@keyframes skeleton-shine{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }
.skeleton-card{ border-radius: var(--radius); overflow:hidden; border: 2px solid var(--line); }
.skeleton-card .skeleton-thumb{ aspect-ratio: 1/1; border-radius:0; }
.skeleton-card .skeleton-body{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.skeleton-line{ height:13px; border-radius:6px; }
.skeleton-photo{ aspect-ratio: 1/1; border-radius: var(--radius-lg); }

/* ---------------- footer ---------------- */
.footer{ border-top: 3px solid var(--fg); padding: 34px 0; margin-top: 40px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.footer-middle{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.footer-group{ display:flex; align-items:center; gap:10px; }
.footer-group-label{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.footer-divider{ width:2px; height:26px; background: var(--line); flex-shrink:0; }
.social-links{ display:flex; gap:8px; }
.social-icon{
  width:38px; height:38px; border-radius:50%; border:2px solid var(--fg);
  display:flex; align-items:center; justify-content:center; color: var(--fg);
}
.social-icon svg{ width:17px; height:17px; }
.social-icon:hover{ background: var(--cyan); border-color: var(--cyan); color:#fff; }
.support-link{
  display:flex; align-items:center; gap:8px; border:2px solid var(--fg); border-radius:999px;
  padding:9px 16px; font-weight:800; font-size:13px;
}
.support-link:hover{ background: var(--lime); border-color: var(--lime); }
.legal-links{ display:flex; gap:16px; flex-wrap:wrap; }
.legal-links a{ font-size:12px; font-weight:700; color: var(--muted); text-decoration:underline; }
.legal-links a:hover{ color: var(--fg); }
.footer-end{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; }

/* ---------------- legal pages (privacy/offer) ---------------- */
.legal-page{ padding: 44px 0 80px; max-width: 760px; }
.legal-draft-note{
  border: 2px dashed var(--amber); border-radius: var(--radius);
  padding: 12px 16px; font-size:13px; font-weight:700; color: var(--fg);
  background: var(--bg-raised); margin: 14px 0 30px;
}
.legal-body h3{ font-size:16px; margin-top:26px; }
.legal-body p{ font-size:14px; font-weight:500; color: var(--fg); line-height:1.6; }
.legal-body ul{ margin: 6px 0; padding-left: 20px; }
.legal-body li{ font-size:14px; font-weight:500; color: var(--fg); line-height:1.6; margin: 4px 0; }
.legal-body a{ color: var(--fg); text-decoration: underline; }

/* The brandbook's "нитка як роздільник" motif (see brandbook.html section 05):
   three wavy lines of decreasing weight/opacity, used once per page as a
   section-transition accent — never as a repeating background texture. */
.thread-divider{ height: 48px; width:100%; overflow:hidden; margin: 10px 0 0; }
.thread-divider svg{ display:block; width:100%; height:100%; }

/* ---------------- buy-flow modal (checkout.js) ---------------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100;
  display:none; align-items:flex-start; justify-content:center;
  padding: 40px 16px; overflow-y:auto;
}
.modal-overlay.open{ display:flex; }
.modal{
  position:relative; width:100%; max-width:480px; background: var(--bg);
  border: 3px solid var(--fg); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: 8px 8px 0 rgba(0,0,0,.25);
}
.modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:2px solid var(--fg); background: var(--bg); color: var(--fg);
  font-size:18px; line-height:1; cursor:pointer;
}
.modal-close:hover{ background: var(--magenta); border-color: var(--magenta); color:#fff; }
.modal-step .field{ margin-bottom:14px; }

.modal-cart-list{ display:flex; flex-direction:column; gap:10px; margin:14px 0; max-height:260px; overflow-y:auto; }
.modal-cart-row{ display:grid; grid-template-columns: 56px 1fr auto auto; gap:12px; align-items:center; }

.free-shipping-note{ font-size:12px; font-weight:700; color:var(--muted); margin:8px 0 0; }
.free-shipping-note.ok{ color: var(--lime); }

.carrier-picker{ display:flex; gap:8px; flex-wrap:wrap; }
.carrier-option{
  display:flex; align-items:center; gap:8px; border:2px solid var(--fg); border-radius:999px;
  padding:8px 14px; font-weight:700; font-size:13px; cursor:pointer; background:transparent; color: var(--fg);
}
.carrier-option img{ width:18px; height:18px; object-fit:contain; }
.carrier-option.active{ background: var(--fg); color: var(--bg); }

.search-results{
  margin-top:4px; max-height:160px; overflow-y:auto;
  border: 2px solid var(--line); border-radius:10px;
}
.search-results:empty{ border:0; }
.search-result-item{ padding:9px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.search-result-item:hover{ background: var(--bg-raised); }
.search-result-item .title{ font-size:14px; font-weight:800; }
.search-result-item .subtitle{ font-size:12px; font-weight:600; color: var(--muted); margin-top:1px; }
.np-type-badge{
  display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; padding:2px 6px; border-radius:999px;
  background: var(--bg-raised); color: var(--muted); vertical-align:middle;
}

/* ---------------- toast / feedback animations ---------------- */
.toast-root{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:300; display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none;
}
.toast{
  background: var(--fg); color: var(--bg); font-weight:700; font-size:13px;
  padding:10px 20px; border-radius:999px; box-shadow: 4px 4px 0 rgba(0,0,0,.2);
  opacity:0; transform:translateY(10px);
  animation: toastIn .25s ease forwards, toastOut .25s ease forwards 1.6s;
}
@keyframes toastIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-8px); } }

@keyframes cartBump{ 0%{ transform:scale(1); } 45%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
.bump{ animation: cartBump .4s ease; }

/* ---------------- responsive: tablet ---------------- */
@media (max-width: 900px){
  .product-main, .profile-grid, .checkout-grid{ grid-template-columns: 1fr; }
  .product-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .cart-row{ grid-template-columns: 56px 1fr; row-gap: 8px; }
  .topbar-search{ display:none; }
  .ref-stats{ gap:8px; }
  .checkout-summary{ position:static; }
  .account-layout{ grid-template-columns: 1fr; }
  .account-tabs{
    flex-direction:row; overflow-x:auto; position:static; padding:8px; gap:6px;
    -webkit-overflow-scrolling:touch;
  }
  .account-tab{ white-space:nowrap; }
  .account-tab-actions{
    flex-direction:row; margin-top:0; padding-top:0; border-top:0;
    margin-left:auto; padding-left:10px; border-left:2px dashed var(--line);
  }
}

/* ---------------- responsive: phones / small tablets ---------------- */
@media (max-width: 640px){
  .wrap{ padding: 0 16px; }
  .topbar-inner{ height:64px; gap:12px; }
  .logo{ font-size:18px; gap:8px; }
  .logo svg{ height:28px; width:28px; }
  .icon-btn, .theme-toggle{ width:38px; height:38px; }
  .icon-btn svg, .theme-toggle svg{ width:17px; height:17px; }

  .filters{ padding:16px 0; }
  .chip{ padding:6px 12px; font-size:12px; }
  .sort-label{ display:none; }

  .product-grid{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .card-body{ padding:10px; gap:6px; }
  .card-name{ font-size:13px; }
  .card-price{ font-size:14px; }

  .product-head{ font-size: clamp(22px, 6vw, 32px); }
  .buy-actions{ flex-direction:column; }

  .modal{ padding:20px; max-width: 100%; }
  .modal-overlay{ padding: 16px 10px; }
  .modal-cart-row{ grid-template-columns: 44px 1fr auto auto; gap:8px; }
  .modal-cart-row .product-thumb{ width:44px; height:44px; }
  .carrier-option{ padding:7px 12px; font-size:12px; }

  .cart-row{
    grid-template-columns: 64px 1fr auto;
    grid-template-areas: "thumb info remove" "qty qty price";
    row-gap: 10px;
  }
  .cart-row .product-thumb{ grid-area: thumb; width:64px; height:64px; }
  .cart-row .product-info{ grid-area: info; }
  .cart-row .qty-stepper{ grid-area: qty; justify-self:start; }
  .cart-row .price{ grid-area: price; justify-self:end; font-size:14px; }
  .cart-row .row-cta{ grid-area: remove; width:36px; height:36px; }
  .cart-row .row-cta svg{ width:14px; height:14px; }
  .cart-summary{ max-width:none; }

  .ref-stats{ grid-template-columns: repeat(3, 1fr); gap:6px; }
  .ref-stat{ padding:10px 4px; }
  .ref-stat .v{ font-size:16px; }
  .ref-stat .k{ font-size:10px; }

  .order-row-head{ gap:8px; }
  .order-total{ margin-left:0; }
  .order-date{ width:100%; order:5; }

  .footer-inner{ flex-direction:column; align-items:flex-start; gap:14px; }
  .footer-end{ align-items:flex-start; }
}

@media (max-width: 420px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .ref-stats{ grid-template-columns: 1fr; }
}