/* ============================================================
   VIOLITA — subpage styles (shop · product · cart · checkout
   · search · blog · about · contact) — RTL Persian
   ============================================================ */

/* ---------- generic 2-col + panels ---------- */
.panel{
  background:var(--panel-bg); border:1px solid var(--line-soft); border-radius:12px;
  box-shadow:0 30px 60px -44px rgba(74,58,87,.4);
}
.section-label{ font-family:var(--fa); font-weight:600; font-size:20px; color:var(--plum); margin-bottom:20px; }
.muted{ color:var(--plum-faint); }
.divider{ height:1px; background:var(--line); margin:20px 0; }

/* form fields (shared) */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--fa); font-size:13px; font-weight:500; color:var(--plum-soft); }
.field input, .field textarea, .field select{
  font-family:var(--fa); font-size:15px; color:var(--plum);
  background:color-mix(in srgb, var(--page-bg) 60%, #fff);
  border:1px solid var(--line); border-radius:12px; padding:14px 16px; outline:none;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:130px; line-height:1.9; }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--plum-faint); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } }

/* ============================================================
   SHOP — filter rail + grid
   ============================================================ */
.shop-layout{ display:grid; grid-template-columns:240px 1fr; gap:clamp(28px,4vw,56px); align-items:start; }
.shop-aside{ position:sticky; top:120px; display:flex; flex-direction:column; gap:28px; }
.filter-group h4{ font-family:var(--fa); font-size:15px; font-weight:600; color:var(--plum); margin-bottom:12px; }
.filter-list{ display:flex; flex-direction:column; gap:2px; }
.filter-list a{ text-decoration:none; }
.filter-list button, .filter-list a{
  font-family:var(--fa); font-size:14px; font-weight:400; text-align:start;
  background:none; border:none; color:var(--plum-soft); cursor:pointer;
  padding:8px 12px; border-radius:8px; display:flex; justify-content:space-between; gap:10px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.filter-list button .n, .filter-list a .n{ color:var(--plum-faint); font-size:13px; }
.filter-list button:hover, .filter-list a:hover{ background:var(--mist); color:var(--plum); }
.filter-list button.active, .filter-list a.active{ background:var(--accent); color:#fff; }
.filter-list button.active .n{ color:rgba(255,255,255,.8); }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  font-family:var(--fa); font-size:13px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--line); background:none; color:var(--plum-soft); cursor:pointer;
  transition:all .3s var(--ease);
}
.chip:hover{ border-color:var(--accent); color:var(--plum); }
.chip.active{ background:var(--plum); color:#fff; border-color:var(--plum); }

.shop-bar{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.shop-count{ font-family:var(--fa); font-size:14px; color:var(--plum-faint); }
.shop-sort{ display:flex; align-items:center; gap:10px; }
.shop-sort select{ font-family:var(--fa); font-size:14px; color:var(--plum); border:1px solid var(--line); border-radius:999px; padding:9px 16px; background:var(--panel-bg); outline:none; }
.shop-grid .products{ grid-template-columns:repeat(3,1fr); }
@media (max-width:960px){ .shop-layout{ grid-template-columns:1fr; } .shop-aside{ position:static; flex-direction:row; flex-wrap:wrap; } }
@media (max-width:720px){ .shop-grid .products{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .shop-grid .products{ grid-template-columns:1fr; } }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pd-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px); align-items:start; }
.pd-gallery{ display:grid; grid-template-columns:72px 1fr; gap:16px; }
/* With a single photograph there is no thumbnail rail, and the main image would
   otherwise land in the 72px thumb column. */
.pd-gallery.no-thumbs{ grid-template-columns:1fr; }
.pd-thumbs{ display:flex; flex-direction:column; gap:12px; }
.pd-thumbs image-slot{ width:72px; height:88px; border-radius:8px; cursor:pointer; box-shadow:0 8px 20px -12px rgba(74,58,87,.4); }
.pd-thumbs image-slot.active{ box-shadow:0 0 0 2px var(--accent); }
.pd-main image-slot{ width:100%; aspect-ratio:4/4.6; border-radius:200px 200px 12px 12px; box-shadow:0 40px 80px -44px rgba(74,58,87,.5); }
.pd-info{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding-top:8px; }
.pd-info .eyebrow{ letter-spacing:0; }
.pd-title{ font-family:var(--fa); font-weight:600; font-size:clamp(30px,4vw,44px); color:var(--plum); line-height:1.3; }
.pd-price{ font-family:var(--fa); font-weight:600; font-size:26px; color:var(--plum); }
.pd-price .was{ font-size:17px; font-weight:300; color:var(--plum-faint); text-decoration:line-through; margin-inline-start:10px; }
.pd-rating{ display:flex; align-items:center; gap:8px; color:var(--accent); font-size:15px; }
.pd-rating .rc{ color:var(--plum-faint); font-family:var(--fa); }
.pd-desc{ font-family:var(--fa); font-weight:300; font-size:15px; color:var(--plum-soft); line-height:2; max-width:52ch; }

/* Live stock state for the selected variant. The design had no such indicator —
   it assumed a single always-available product — but with real per-variant stock
   the customer has to be told before they reach the cart. */
.pd-stock{ font-family:var(--fa); font-size:13.5px; font-weight:500; margin-top:4px; }
.pd-stock .in{ color:var(--ok); }
.pd-stock .low{ color:oklch(0.45 0.06 80); }
.pd-stock .out{ color:var(--err); }
.pd-actions .btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.size-row button[disabled], .swatch[disabled]{ opacity:.35; cursor:not-allowed; }
.opt-row{ display:flex; flex-direction:column; gap:10px; width:100%; }
.opt-row .opt-label{ font-family:var(--fa); font-size:14px; font-weight:500; color:var(--plum-soft); }
.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); cursor:pointer; position:relative; transition:transform .3s var(--ease); }
.swatch:hover{ transform:scale(1.08); }
.swatch.active{ box-shadow:0 0 0 2px var(--panel-bg), 0 0 0 3px var(--accent); }
.size-row{ display:flex; gap:8px; flex-wrap:wrap; }
.size-row button{ font-family:var(--fa); font-size:14px; min-width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:none; color:var(--plum); cursor:pointer; transition:all .3s var(--ease); }
.size-row button:hover{ border-color:var(--accent); }
.size-row button.active{ background:var(--plum); color:#fff; border-color:var(--plum); }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.qty button{ width:44px; height:44px; border:none; background:none; font-size:18px; color:var(--plum); cursor:pointer; }
.qty button:hover{ background:var(--mist); }
.qty span{ min-width:44px; text-align:center; font-family:var(--fa); font-weight:600; }
.pd-actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; width:100%; }
.pd-meta-list{ display:flex; flex-direction:column; gap:10px; width:100%; margin-top:6px; }
.pd-meta-list .row{ display:flex; justify-content:space-between; gap:16px; font-family:var(--fa); font-size:14px; padding:12px 0; border-top:1px solid var(--line-soft); }
.pd-meta-list .row .k{ color:var(--plum-faint); }
.pd-meta-list .row .v{ color:var(--plum); font-weight:500; }
.pd-perks{ display:flex; gap:20px; flex-wrap:wrap; margin-top:4px; }
.pd-perk{ display:flex; align-items:center; gap:10px; font-family:var(--fa); font-size:13px; color:var(--plum-soft); }
.pd-perk svg{ color:var(--accent); flex:none; }
@media (max-width:860px){ .pd-grid{ grid-template-columns:1fr; } .pd-gallery{ grid-template-columns:64px 1fr; } }

/* ============================================================
   CART
   ============================================================ */
.cart-layout{ display:grid; grid-template-columns:1fr 380px; gap:clamp(28px,4vw,48px); align-items:start; }
.cart-items{ display:flex; flex-direction:column; }
.cart-row{ display:grid; grid-template-columns:96px 1fr auto; gap:20px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line-soft); }
.cart-row image-slot{ width:96px; height:112px; border-radius:12px; }
.cart-row .ci-name{ font-family:var(--fa); font-size:17px; font-weight:600; color:var(--plum); text-decoration:none; display:inline-block; }
.cart-row a.ci-name:hover{ color:var(--accent); }
/* Shown when only a couple remain, so the customer is not surprised at checkout. */
.cart-row .ci-stock{ font-family:var(--fa); font-size:12.5px; font-weight:500; color:oklch(0.45 0.06 80); margin-top:6px; }
.cart-row .ci-meta{ font-family:var(--fa); font-size:13px; font-weight:300; color:var(--plum-faint); margin-top:4px; }
.cart-row .ci-remove{ font-family:var(--fa); font-size:13px; color:var(--plum-faint); background:none; border:none; cursor:pointer; margin-top:10px; padding:0; transition:color .3s var(--ease); }
.cart-row .ci-remove:hover{ color:#b06a6a; }
.cart-row .ci-right{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.cart-row .ci-price{ font-family:var(--fa); font-weight:600; font-size:17px; color:var(--plum); white-space:nowrap; }
.summary{ padding:28px; position:sticky; top:120px; display:flex; flex-direction:column; gap:14px; }
.summary .srow{ display:flex; justify-content:space-between; font-family:var(--fa); font-size:15px; color:var(--plum-soft); }
.summary .srow.total{ font-size:19px; font-weight:600; color:var(--plum); padding-top:14px; border-top:1px solid var(--line); }
.summary .promo{ display:flex; gap:8px; }
.summary .promo input{ flex:1; font-family:var(--fa); font-size:14px; border:1px solid var(--line); border-radius:999px; padding:12px 16px; outline:none; background:var(--page-bg); }
.summary .promo button{ font-family:var(--fa); font-size:13px; font-weight:600; border:1px solid var(--plum); background:none; color:var(--plum); border-radius:999px; padding:0 18px; cursor:pointer; }
.cart-empty{ text-align:center; padding:60px 0; display:flex; flex-direction:column; align-items:center; gap:16px; }
@media (max-width:860px){ .cart-layout{ grid-template-columns:1fr; } .summary{ position:static; } }

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout-layout{ display:grid; grid-template-columns:1fr 380px; gap:clamp(28px,4vw,48px); align-items:start; }
.checkout-steps{ display:flex; flex-direction:column; gap:24px; }
.co-block{ padding:28px; }
.co-block .num{ display:inline-flex; align-items:center; gap:10px; font-family:var(--fa); font-weight:600; color:var(--plum); margin-bottom:20px; font-size:18px; }
.co-block .num .b{ width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:14px; }
.pay-methods{ display:flex; flex-direction:column; gap:12px; }
.pay-opt{ display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:all .3s var(--ease); font-family:var(--fa); }
.pay-opt:hover{ border-color:var(--accent); }
.pay-opt.active{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.pay-opt .dot{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex:none; transition:all .3s var(--ease); }
.pay-opt.active .dot{ border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px var(--panel-bg); }
.co-summary{ position:sticky; top:120px; padding:28px; display:flex; flex-direction:column; gap:14px; }
.co-summary .mini-row{ display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; }
.co-summary .mini-row image-slot{ width:56px; height:64px; border-radius:8px; }
.co-summary .mini-row .mn{ font-family:var(--fa); font-size:14px; font-weight:500; color:var(--plum); }
.co-summary .mini-row .mm{ font-family:var(--fa); font-size:12px; color:var(--plum-faint); }
.co-summary .mini-row .mp{ font-family:var(--fa); font-size:14px; font-weight:600; }
@media (max-width:860px){ .checkout-layout{ grid-template-columns:1fr; } .co-summary{ position:static; } }

/* ============================================================
   SEARCH
   ============================================================ */
.search-hero{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; }
.search-box{ width:min(680px,100%); position:relative; }
.search-box input{
  width:100%; font-family:var(--fa); font-size:18px; color:var(--plum);
  background:var(--panel-bg); border:1px solid var(--line); border-radius:999px;
  padding:20px 60px 20px 24px; outline:none; box-shadow:0 20px 50px -30px rgba(74,58,87,.5);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.search-box input:focus{ border-color:var(--accent); box-shadow:0 24px 60px -30px rgba(212,180,131,.6); }
.search-box .sicon{ position:absolute; inset-inline-end:22px; top:50%; transform:translateY(-50%); color:var(--plum-faint); }
.search-suggest{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.search-suggest .lbl{ font-family:var(--fa); font-size:13px; color:var(--plum-faint); }
.search-results-head{ display:flex; justify-content:space-between; align-items:baseline; margin:var(--section-y) 0 28px; gap:16px; flex-wrap:wrap; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-feature{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:center; margin-bottom:var(--section-y); }
.blog-feature image-slot{ width:100%; aspect-ratio:4/3; border-radius:12px; box-shadow:0 40px 80px -44px rgba(74,58,87,.5); }
.blog-feature .bf-body{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.blog-feature .bf-cat{ font-family:var(--fa); font-size:13px; font-weight:600; color:var(--accent); }
.blog-feature .bf-title{ font-family:var(--fa); font-size:clamp(26px,3.4vw,40px); font-weight:600; color:var(--plum); line-height:1.4; }
.blog-cats{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:clamp(36px,5vh,56px); }
/* Category chips and the post category label are links now, so results are
   shareable and crawlable rather than client-side toggles. */
.blog-cats a.chip{ text-decoration:none; display:inline-block; }
a.post-cat{ text-decoration:none; }
@media (max-width:860px){ .blog-feature{ grid-template-columns:1fr; } }

/* blog post */
.post-hero{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; max-width:760px; margin:0 auto clamp(30px,4vh,48px); }
.post-cat{ font-family:var(--fa); font-size:13px; font-weight:600; color:var(--accent); }
.post-title{ font-family:var(--fa); font-size:clamp(32px,5vw,58px); font-weight:600; color:var(--plum); line-height:1.35; }
.post-byline{ display:flex; gap:14px; align-items:center; justify-content:center; font-family:var(--fa); font-size:14px; color:var(--plum-faint); }
.post-byline .dot{ width:4px; height:4px; border-radius:50%; background:var(--plum-faint); }
.post-cover{ width:min(1000px,100%); margin:0 auto clamp(36px,5vh,64px); }
.post-cover image-slot{ width:100%; aspect-ratio:16/8.5; border-radius:14px; box-shadow:0 40px 90px -46px rgba(74,58,87,.5); }
.post-body{ max-width:680px; margin:0 auto; }
.post-body h2{ font-family:var(--fa); font-size:26px; font-weight:600; color:var(--plum); margin:40px 0 16px; line-height:1.5; }
.post-body p{ font-family:var(--fa); font-size:17px; font-weight:300; color:var(--plum-soft); line-height:2.15; margin-bottom:22px; }
.post-body .drop::first-letter{ font-size:64px; font-weight:700; color:var(--accent); float:inline-start; line-height:.8; margin-inline-end:12px; margin-top:6px; }
.post-body blockquote{ margin:36px 0; padding:8px 28px; border-inline-start:3px solid var(--accent); }
.post-body blockquote .q{ font-family:var(--script); font-weight:500; font-size:26px; color:var(--plum); line-height:1.6; }
.post-body figure image-slot{ width:100%; aspect-ratio:16/9; border-radius:12px; margin:16px 0 8px; }
.post-body figcaption{ font-family:var(--fa); font-size:13px; color:var(--plum-faint); text-align:center; }
.post-share{ display:flex; gap:12px; align-items:center; justify-content:center; margin-top:44px; padding-top:32px; border-top:1px solid var(--line); }
.post-share .lbl{ font-family:var(--fa); font-size:14px; color:var(--plum-faint); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-hero{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.about-hero .ah-body{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.about-hero image-slot{ width:100%; aspect-ratio:4/4.6; border-radius:220px 220px 12px 12px; box-shadow:0 40px 90px -46px rgba(74,58,87,.5); }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:var(--section-y) 0; }
.stat{ text-align:center; padding:32px 16px; }
.stat .num{ font-family:var(--fa); font-weight:700; font-size:clamp(34px,4vw,52px); color:var(--accent); line-height:1; }
.stat .lbl{ font-family:var(--fa); font-size:14px; color:var(--plum-soft); margin-top:10px; }
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.value{ padding:32px; display:flex; flex-direction:column; gap:12px; }
.value .vicon{ width:48px; height:48px; border-radius:14px; background:color-mix(in srgb, var(--accent) 14%, transparent); display:grid; place-items:center; color:var(--accent); }
.value h3{ font-family:var(--fa); font-size:19px; font-weight:600; color:var(--plum); }
.value p{ font-family:var(--fa); font-size:14px; font-weight:300; color:var(--plum-soft); line-height:2; }
.team{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.member{ text-align:center; }
.member image-slot{ width:100%; aspect-ratio:1/1.1; border-radius:16px; margin-bottom:14px; }
.member .mn{ font-family:var(--fa); font-size:17px; font-weight:600; color:var(--plum); }
.member .mr{ font-family:var(--fa); font-size:13px; color:var(--plum-faint); margin-top:2px; }
@media (max-width:860px){ .about-hero{ grid-template-columns:1fr; } .values{ grid-template-columns:1fr; } .team{ grid-template-columns:1fr 1fr; } .stats{ grid-template-columns:1fr; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,64px); align-items:start; }
.contact-info{ display:flex; flex-direction:column; gap:28px; }
.contact-card{ display:flex; gap:16px; align-items:flex-start; }
.contact-card .cc-icon{ width:46px; height:46px; border-radius:12px; background:color-mix(in srgb, var(--accent) 12%, transparent); display:grid; place-items:center; color:var(--accent); flex:none; }
.contact-card .cc-t{ font-family:var(--fa); font-size:16px; font-weight:600; color:var(--plum); }
.contact-card .cc-v{ font-family:var(--fa); font-size:14px; font-weight:300; color:var(--plum-soft); line-height:1.9; margin-top:4px; }
.contact-form{ padding:clamp(28px,4vw,44px); display:flex; flex-direction:column; gap:18px; }
.map-slot image-slot{ width:100%; aspect-ratio:16/6.5; border-radius:16px; }
@media (max-width:860px){ .contact-layout{ grid-template-columns:1fr; } }

/* toast */
.toast{
  position:fixed; inset-block-end:28px; inset-inline-start:50%; transform:translate(-50%,20px);
  background:var(--plum); color:#fff; font-family:var(--fa); font-size:14px;
  padding:14px 26px; border-radius:999px; box-shadow:0 20px 50px -20px rgba(74,58,87,.6);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease); z-index:9998;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ============================================================
   STATUS TOKENS + ALERT MESSAGES
   ============================================================ */
:root{
  --ok:   oklch(0.60 0.09 155);
  --ok-bg: oklch(0.95 0.03 155);
  --warn: var(--gold);
  --warn-bg: oklch(0.95 0.045 92);
  --err:  #b06a6a;
  --err-bg: oklch(0.95 0.03 20);
  --info: var(--lavender);
  --info-bg: var(--mist);
}
.alert{
  display:flex; align-items:flex-start; gap:12px; width:100%;
  font-family:var(--fa); font-size:14px; line-height:1.8; font-weight:400;
  padding:14px 18px; border-radius:12px; border:1px solid var(--line-soft);
}
.alert .ai{ flex:none; margin-top:2px; }
.alert.ok  { background:var(--ok-bg);   color:oklch(0.42 0.08 155); border-color:oklch(0.85 0.05 155); }
.alert.err { background:var(--err-bg);  color:#8a4f4f; border-color:oklch(0.86 0.04 20); }
.alert.warn{ background:var(--warn-bg); color:oklch(0.45 0.06 80);  border-color:var(--gold-line); }
.alert.info{ background:var(--info-bg); color:var(--plum);          border-color:var(--line-soft); }
.alert .ac-close{ margin-inline-start:auto; background:none; border:none; color:currentColor; opacity:.6; cursor:pointer; padding:0; line-height:1; }
.alert .ac-close:hover{ opacity:1; }
.field-error{ font-family:var(--fa); font-size:12px; color:var(--err); margin-top:2px; min-height:1px; }
.field input.invalid, .field select.invalid{ border-color:var(--err); }

.status{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--fa); font-size:12.5px; font-weight:500;
  padding:6px 14px; border-radius:999px; line-height:1;
}
.status::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status.processing{ color:oklch(0.45 0.06 80);  background:var(--warn-bg); }
.status.shipped   { color:var(--plum);           background:var(--mist); }
.status.delivered { color:oklch(0.42 0.08 155);  background:var(--ok-bg); }
.status.cancelled { color:#8a4f4f;               background:var(--err-bg); }
.status.pending   { color:var(--plum-faint);     background:var(--line-soft); }

/* ============================================================
   AUTH — login · register · forgot (centered luminous card)
   ============================================================ */
.auth-wrap{ max-width:520px; margin:0 auto; }
.auth-card{
  position:relative; overflow:hidden;
  padding:clamp(34px,5vw,52px);
  display:flex; flex-direction:column; gap:22px;
}
.auth-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.8;
}
.auth-head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.auth-head .script{ font-size:clamp(22px,2.6vw,30px); }
.auth-sub{ font-family:var(--fa); font-size:14px; font-weight:300; color:var(--plum-soft); line-height:1.9; text-align:center; max-width:40ch; margin:0 auto; }
.auth-form{ display:flex; flex-direction:column; gap:18px; }
.auth-form .btn.block{ margin-top:4px; }
.auth-alt{
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  font-family:var(--fa); font-size:13.5px; color:var(--plum-soft);
}
.auth-alt a{ color:var(--accent); text-decoration:none; font-weight:600; }
.auth-alt a:hover{ text-decoration:underline; }
.auth-divider{ display:flex; align-items:center; gap:16px; color:var(--plum-faint); font-family:var(--fa); font-size:12px; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.auth-foot-links{ display:flex; justify-content:space-between; gap:12px; font-family:var(--fa); font-size:13px; }
.auth-foot-links a{ color:var(--plum-faint); text-decoration:none; }
.auth-foot-links a:hover{ color:var(--accent); }

/* phone input with fixed dial code */
.phone-input{ display:flex; align-items:stretch; gap:0; direction:ltr; }
.phone-input .dial{
  display:inline-flex; align-items:center; gap:6px; padding:0 14px;
  font-family:var(--fa); font-size:15px; color:var(--plum-soft);
  background:var(--mist); border:1px solid var(--line); border-inline-end:none;
  border-radius:0 12px 12px 0; white-space:nowrap;
}
.phone-input input{ flex:1; border-radius:12px 0 0 12px !important; text-align:left; letter-spacing:1px; }
[dir="rtl"] .phone-input .dial{ border-radius:12px 0 0 12px; border-inline-end:1px solid var(--line); border-inline-start:none; }
[dir="rtl"] .phone-input input{ border-radius:0 12px 12px 0 !important; }

/* step indicator */
.steps-ind{ display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:6px; }
.steps-ind .s{ display:flex; align-items:center; }
.steps-ind .dot{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--fa); font-size:13px; font-weight:600;
  background:var(--mist); color:var(--plum-faint); border:1px solid var(--line);
  transition:all .4s var(--ease);
}
.steps-ind .s.active .dot{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 8px 20px -10px var(--accent); }
.steps-ind .s.done .dot{ background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); border-color:var(--accent); }
.steps-ind .bar{ width:clamp(24px,7vw,54px); height:2px; background:var(--line); }
.steps-ind .s.done + .bar{ background:var(--accent); }

/* OTP boxes */
.otp-row{ display:flex; gap:12px; justify-content:center; direction:ltr; }
.otp-row input{
  width:56px; height:64px; text-align:center; font-family:var(--fa);
  font-size:26px; font-weight:600; color:var(--plum);
  background:color-mix(in srgb, var(--page-bg) 60%, #fff);
  border:1px solid var(--line); border-radius:14px; outline:none;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.otp-row input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.otp-row input.filled{ border-color:var(--accent); }
.otp-meta{ display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--fa); font-size:13px; color:var(--plum-faint); }
.otp-meta .resend{ background:none; border:none; color:var(--accent); font-family:var(--fa); font-size:13px; font-weight:600; cursor:pointer; padding:0; }
.otp-meta .resend:disabled{ color:var(--plum-faint); cursor:default; }
.auth-target{ font-family:var(--fa); font-weight:600; color:var(--plum); direction:ltr; unicode-bidi:embed; }
.step-pane{ display:none; flex-direction:column; gap:18px; }
.step-pane.active{ display:flex; animation:revealUp .5s var(--ease-out) both; }

/* auth mode toggle (password vs OTP) */
.auth-toggle{ display:flex; gap:4px; padding:4px; background:var(--mist); border:1px solid var(--line-soft); border-radius:999px; }
.auth-toggle .at-opt{ flex:1; font-family:var(--fa); font-size:13.5px; font-weight:600; color:var(--plum-soft); background:none; border:none; border-radius:999px; padding:11px 12px; cursor:pointer; transition:all .3s var(--ease); }
.auth-toggle .at-opt:hover{ color:var(--plum); }
.auth-toggle .at-opt.active{ background:var(--panel-bg); color:var(--plum); box-shadow:0 6px 16px -10px rgba(74,58,87,.5); }
.mode-pane{ display:none; flex-direction:column; gap:22px; }
.mode-pane.active{ display:flex; }

/* ============================================================
   ACCOUNT — shared sidebar layout
   ============================================================ */
.account-layout{ display:grid; grid-template-columns:264px 1fr; gap:clamp(24px,3.5vw,44px); align-items:start; }
.account-aside{ position:sticky; top:120px; display:flex; flex-direction:column; gap:18px; }
.account-id{ display:flex; align-items:center; gap:14px; padding:20px; }
.account-id .avatar{
  width:52px; height:52px; border-radius:50%; flex:none;
  background:linear-gradient(150deg, var(--lavender), var(--gold-glow));
  display:grid; place-items:center; font-family:var(--fa); font-weight:700; font-size:19px; color:var(--plum);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.account-id .ai-name{ font-family:var(--fa); font-size:16px; font-weight:600; color:var(--plum); }
.account-id .ai-sub{ font-family:var(--fa); font-size:12.5px; color:var(--plum-faint); direction:ltr; text-align:start; margin-top:2px; }
.account-nav{ display:flex; flex-direction:column; padding:8px; }
/* Sign-out is a POST button rather than a link, so the shared row styling has to
   cover both element types. */
.account-nav a, .account-nav button.logout{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px;
  font-family:var(--fa); font-size:14.5px; font-weight:500; color:var(--plum-soft);
  text-decoration:none; transition:background .3s var(--ease), color .3s var(--ease);
}
.account-nav button.logout{
  width:100%; background:none; border:none; cursor:pointer; text-align:start;
}
.logout-form{ margin:0; }
.account-nav a svg, .account-nav button.logout svg{ flex:none; opacity:.7; }
.account-nav a:hover, .account-nav button.logout:hover{ background:var(--mist); color:var(--plum); }
.account-nav a.active{ background:var(--accent); color:#fff; }
.account-nav a.active svg{ opacity:1; }
.account-nav button.logout{ color:var(--plum-faint); margin-top:4px; border-top:1px solid var(--line-soft); border-radius:0 0 10px 10px; }
.account-nav button.logout:hover{ color:var(--err); background:var(--err-bg); }
.account-main{ display:flex; flex-direction:column; gap:24px; min-width:0; }
.account-block{ padding:clamp(24px,3vw,36px); }
.account-block .ab-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.account-block .ab-head .section-label{ margin-bottom:0; }
.btn.sm{ padding:9px 20px; font-size:13px; }
.btn.ghost.sm{ padding:9px 20px; font-size:13px; }
@media (max-width:900px){
  .account-layout{ grid-template-columns:1fr; }
  .account-aside{ position:static; }
  .account-nav{ flex-direction:row; flex-wrap:wrap; }
  .account-nav a.logout{ border-top:none; }
}

/* address cards */
.address-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.address-card{ position:relative; padding:22px; border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; gap:8px; transition:border-color .3s var(--ease); }
.address-card.default{ border-color:var(--accent); }
.address-card .ac-badge{ position:absolute; top:16px; inset-inline-end:16px; font-family:var(--fa); font-size:11px; font-weight:600; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); padding:4px 10px; border-radius:999px; }
.address-card .ac-name{ font-family:var(--fa); font-size:15px; font-weight:600; color:var(--plum); }
.address-card .ac-line{ font-family:var(--fa); font-size:13.5px; font-weight:300; color:var(--plum-soft); line-height:1.9; }
.address-card .ac-actions{ display:flex; gap:14px; margin-top:6px; }
.address-card .ac-actions button{ background:none; border:none; font-family:var(--fa); font-size:13px; color:var(--plum-faint); cursor:pointer; padding:0; transition:color .3s var(--ease); }
.address-card .ac-actions button:hover{ color:var(--accent); }
.address-card .ac-actions button.del:hover{ color:var(--err); }
.address-add{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:22px; border:1.5px dashed var(--line); border-radius:14px; cursor:pointer;
  font-family:var(--fa); font-size:14px; color:var(--plum-faint); background:none; min-height:120px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.address-add:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:600px){ .address-grid{ grid-template-columns:1fr; } }

/* ============================================================
   MODAL — centered overlay dialog (account address, password change)
   html/body both get overflow:hidden while open: Chrome treats <html>, not
   <body>, as the page's default scroll root, so locking only one leaves the
   other still scrollable. overscroll-behavior:contain stops scroll chaining
   from the dialog body back out to the page once its own content is exhausted.
   ============================================================ */
html.modal-lock, html.modal-lock body{ overflow:hidden; }
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(74,58,87,.4); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-card{
  background:var(--panel-bg); border-radius:20px; width:100%; max-width:480px;
  max-height:min(88vh,720px); display:flex; flex-direction:column; min-height:0;
  box-shadow:0 40px 90px -30px rgba(74,58,87,.55);
  transform:scale(.96) translateY(8px); transition:transform .35s var(--ease);
}
.modal-overlay.open .modal-card{ transform:scale(1) translateY(0); }
.modal-card .dr-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:22px 24px; border-bottom:1px solid var(--line-soft); flex:none; }
.modal-card .dr-head h3{ font-family:var(--fa); font-size:18px; font-weight:600; color:var(--plum); }
.modal-card .dr-close{ width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:none; color:var(--plum-soft); cursor:pointer; display:grid; place-items:center; flex:none; }
.modal-card .dr-close:hover{ color:var(--plum); }
.modal-card .dr-body{ padding:24px; overflow-y:auto; overscroll-behavior:contain; flex:1; min-height:0; display:flex; flex-direction:column; gap:18px; }
.modal-card .dr-foot{ padding:18px 24px; border-top:1px solid var(--line-soft); display:flex; gap:12px; flex:none; }
@media (max-width:560px){ .modal-card{ max-height:92vh; } }

/* ============================================================
   ORDERS — list
   ============================================================ */
.orders-list{ display:flex; flex-direction:column; gap:18px; }
.order-card{ padding:0; overflow:hidden; }
.order-card .oc-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 24px; background:var(--mist); border-bottom:1px solid var(--line-soft); }
.order-card .oc-meta{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.order-card .oc-k{ font-family:var(--fa); font-size:12px; color:var(--plum-faint); }
.order-card .oc-v{ font-family:var(--fa); font-size:14px; font-weight:600; color:var(--plum); margin-top:2px; direction:ltr; text-align:right; }
.order-card .oc-body{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; flex-wrap:wrap; }
.order-thumbs{ display:flex; align-items:center; }
.order-thumbs image-slot{ width:60px; height:70px; border-radius:10px; margin-inline-start:-14px; box-shadow:0 6px 18px -10px rgba(74,58,87,.5), 0 0 0 3px var(--panel-bg); }
.order-thumbs image-slot:first-child{ margin-inline-start:0; }
.order-thumbs .more{ margin-inline-start:-14px; width:60px; height:70px; border-radius:10px; background:var(--plum); color:#fff; display:grid; place-items:center; font-family:var(--fa); font-size:14px; font-weight:600; box-shadow:0 0 0 3px var(--panel-bg); }
.order-card .oc-right{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.order-card .oc-total{ font-family:var(--fa); font-size:12px; color:var(--plum-faint); }
.order-card .oc-total b{ display:block; font-size:17px; font-weight:600; color:var(--plum); margin-top:2px; }

/* ============================================================
   ORDER DETAIL + INVOICE
   ============================================================ */
.od-grid{ display:grid; grid-template-columns:1fr 360px; gap:clamp(24px,3.5vw,40px); align-items:start; }
.od-main{ display:flex; flex-direction:column; gap:22px; }
.od-side{ position:sticky; top:120px; display:flex; flex-direction:column; gap:22px; }
/* status timeline */
.timeline{ display:flex; flex-direction:column; gap:0; }
.tl-step{ display:grid; grid-template-columns:auto 1fr; gap:16px; }
.tl-step .tl-mark{ display:flex; flex-direction:column; align-items:center; }
.tl-step .tl-dot{ width:16px; height:16px; border-radius:50%; border:2px solid var(--line); background:var(--panel-bg); flex:none; margin-top:3px; transition:all .3s var(--ease); }
.tl-step .tl-line{ width:2px; flex:1; background:var(--line); margin:4px 0; }
.tl-step:last-child .tl-line{ display:none; }
.tl-step.done .tl-dot{ background:var(--accent); border-color:var(--accent); }
.tl-step.done .tl-line{ background:var(--accent); }
.tl-step.current .tl-dot{ border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.tl-body{ padding-bottom:26px; }
.tl-step:last-child .tl-body{ padding-bottom:0; }
.tl-title{ font-family:var(--fa); font-size:15px; font-weight:600; color:var(--plum); }
.tl-step:not(.done):not(.current) .tl-title{ color:var(--plum-faint); font-weight:500; }
.tl-date{ font-family:var(--fa); font-size:12.5px; color:var(--plum-faint); margin-top:3px; }

/* invoice / items table */
.od-items{ display:flex; flex-direction:column; }
.od-item{ display:grid; grid-template-columns:64px 1fr auto; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.od-item:last-child{ border-bottom:none; }
.od-item image-slot{ width:64px; height:74px; border-radius:10px; }
.od-item .oi-name{ font-family:var(--fa); font-size:15px; font-weight:600; color:var(--plum); }
.od-item .oi-meta{ font-family:var(--fa); font-size:12.5px; color:var(--plum-faint); margin-top:3px; }
.od-item .oi-qty{ font-family:var(--fa); font-size:12.5px; color:var(--plum-soft); margin-top:5px; }
.od-item .oi-price{ font-family:var(--fa); font-size:15px; font-weight:600; color:var(--plum); white-space:nowrap; }
.sum-rows{ display:flex; flex-direction:column; gap:12px; }
.sum-rows .srow{ display:flex; justify-content:space-between; font-family:var(--fa); font-size:14px; color:var(--plum-soft); }
.sum-rows .srow.total{ font-size:18px; font-weight:600; color:var(--plum); padding-top:14px; border-top:1px solid var(--line); }
.info-list{ display:flex; flex-direction:column; gap:10px; }
.info-list .il-row{ display:flex; justify-content:space-between; gap:16px; font-family:var(--fa); font-size:13.5px; }
.info-list .il-k{ color:var(--plum-faint); }
.info-list .il-v{ color:var(--plum); font-weight:500; text-align:end; direction:ltr; }
.od-address{ font-family:var(--fa); font-size:14px; font-weight:300; color:var(--plum-soft); line-height:2; }
.od-address b{ font-weight:600; color:var(--plum); }
@media (max-width:860px){ .od-grid{ grid-template-columns:1fr; } .od-side{ position:static; } }

/* invoice print sheet (hidden on screen, shown on print) */
.invoice-sheet{ display:none; }
@media print{
  body > *{ display:none !important; }
  .invoice-sheet{ display:block !important; }
}

/* ============================================================
   CHECKOUT WIZARD (multi-step) · SHIPPING · GATEWAY · RESULT
   ============================================================ */
.co-wizard{ display:flex; flex-direction:column; gap:0; }
.co-steps-ind{ margin-bottom:26px; }
.co-pane{ display:none; }
.co-pane.active{ display:flex; flex-direction:column; gap:24px; animation:revealUp .5s var(--ease-out) both; }
.co-nav{ display:flex; align-items:center; gap:14px; margin-top:4px; }
.co-nav .btn.ghost{ flex:none; }
.co-nav .spacer{ flex:1; }
.co-back-link{ background:none; border:none; font-family:var(--fa); font-size:14px; font-weight:500; color:var(--plum-soft); cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:12px 6px; transition:color .3s var(--ease); }
.co-back-link:hover{ color:var(--accent); }

/* saved address chooser */
.addr-choice{ display:flex; flex-direction:column; gap:12px; margin-bottom:6px; }
.addr-pick{ position:relative; display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:all .3s var(--ease); }
.addr-pick:hover{ border-color:var(--accent); }
.addr-pick.active{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, transparent); }
.addr-pick .dot{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex:none; margin-top:3px; transition:all .3s var(--ease); }
.addr-pick.active .dot{ border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px var(--panel-bg); }
.addr-pick .ap-name{ font-family:var(--fa); font-size:15px; font-weight:600; color:var(--plum); }
.addr-pick .ap-line{ font-family:var(--fa); font-size:13.5px; font-weight:300; color:var(--plum-soft); line-height:1.9; margin-top:4px; }
.addr-pick .ap-badge{ font-family:var(--fa); font-size:11px; font-weight:600; color:var(--accent); }
.new-addr-toggle{ font-family:var(--fa); font-size:13.5px; font-weight:600; color:var(--accent); background:none; border:none; cursor:pointer; padding:2px 0; text-align:start; }

/* shipping methods */
.ship-methods{ display:flex; flex-direction:column; gap:12px; }
.ship-opt{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:16px 18px; border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:all .3s var(--ease); }
.ship-opt:hover{ border-color:var(--accent); }
.ship-opt.active{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, transparent); }
.ship-opt.unavailable{ cursor:not-allowed; opacity:.45; }
.ship-opt.unavailable:hover{ border-color:var(--line); }
.ship-opt .dot{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex:none; transition:all .3s var(--ease); }
.ship-opt.active .dot{ border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px var(--panel-bg); }
.ship-opt .so-name{ font-family:var(--fa); font-size:15px; font-weight:600; color:var(--plum); }
.ship-opt .so-eta{ font-family:var(--fa); font-size:12.5px; color:var(--plum-faint); margin-top:3px; }
.ship-opt .so-price{ font-family:var(--fa); font-size:14px; font-weight:600; color:var(--plum); white-space:nowrap; }
.ship-opt .so-price.free{ color:oklch(0.52 0.09 155); }
.pay-opt .po-badge{ margin-inline-start:auto; font-family:var(--fa); font-size:11px; font-weight:600; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); padding:4px 10px; border-radius:999px; }
.pay-opt .po-main{ display:flex; flex-direction:column; gap:3px; }
.pay-opt .po-sub{ font-family:var(--fa); font-size:12.5px; font-weight:300; color:var(--plum-faint); }

/* review step */
.review-block{ border:1px solid var(--line-soft); border-radius:14px; padding:20px 22px; }
.review-block .rb-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.review-block .rb-title{ font-family:var(--fa); font-size:14px; font-weight:600; color:var(--plum); }
.review-block .rb-edit{ font-family:var(--fa); font-size:12.5px; font-weight:600; color:var(--accent); background:none; border:none; cursor:pointer; padding:0; }
.review-block .rb-body{ font-family:var(--fa); font-size:13.5px; font-weight:300; color:var(--plum-soft); line-height:1.95; }
.review-block .rb-body b{ font-weight:600; color:var(--plum); }

/* ============================================================
   BANK GATEWAY (generic secure payment page)
   ============================================================ */
.gw-wrap{ max-width:560px; margin:0 auto; }
.gw-card{ position:relative; overflow:hidden; padding:0; }
.gw-top{ background:linear-gradient(160deg, var(--plum), #5a4869); color:#fff; padding:26px clamp(24px,4vw,36px); }
.gw-top .gw-secure{ display:flex; align-items:center; gap:10px; font-family:var(--fa); font-size:13px; font-weight:500; color:rgba(255,255,255,.82); }
.gw-top .gw-secure svg{ color:var(--gold-glow); }
.gw-top .gw-merchant{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; }
.gw-top .gw-m-name{ font-family:var(--fa); font-size:16px; font-weight:600; }
.gw-top .gw-m-id{ font-family:var(--fa); font-size:12px; color:rgba(255,255,255,.6); direction:ltr; margin-top:2px; }
.gw-top .gw-amount{ text-align:end; }
.gw-top .gw-amount .l{ font-family:var(--fa); font-size:11.5px; color:rgba(255,255,255,.6); }
.gw-top .gw-amount .v{ font-family:var(--fa); font-size:22px; font-weight:700; color:var(--gold-glow); margin-top:2px; }
.gw-body{ padding:clamp(24px,4vw,36px); display:flex; flex-direction:column; gap:18px; }
.gw-timer-row{ display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--fa); font-size:13px; color:var(--plum-soft); }
.gw-timer-row .t{ font-weight:700; color:var(--plum); direction:ltr; }
.card-num{ display:flex; gap:10px; direction:ltr; }
.card-num input{ flex:1; text-align:center; font-family:var(--fa); font-size:19px; font-weight:600; letter-spacing:2px; color:var(--plum); background:color-mix(in srgb, var(--page-bg) 60%, #fff); border:1px solid var(--line); border-radius:12px; padding:14px 4px; outline:none; transition:border-color .3s var(--ease); }
.card-num input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.gw-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gw-cvv2 .field-help, .gw-exp .field-help{ font-family:var(--fa); font-size:11px; color:var(--plum-faint); }
.gw-otp-inline{ display:flex; gap:10px; align-items:flex-end; }
.gw-otp-inline .field{ flex:1; }
.gw-otp-inline .btn.ghost.sm{ white-space:nowrap; }
.gw-actions{ display:flex; gap:12px; margin-top:4px; }
.gw-actions .btn{ flex:1; justify-content:center; }
.gw-brandline{ display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--fa); font-size:11.5px; color:var(--plum-faint); }
.gw-brandline .lock{ color:oklch(0.55 0.09 155); }

/* ============================================================
   RESULT PAGE (payment success / failure)
   ============================================================ */
.result-wrap{ max-width:620px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; }
.result-badge{ width:104px; height:104px; border-radius:50%; display:grid; place-items:center; position:relative; }
.result-badge.ok{ background:radial-gradient(circle at 50% 40%, oklch(0.93 0.06 155), oklch(0.88 0.08 155)); color:oklch(0.45 0.11 155); }
.result-badge.err{ background:radial-gradient(circle at 50% 40%, oklch(0.94 0.04 22), oklch(0.90 0.05 22)); color:#a85555; }
.result-badge svg{ width:52px; height:52px; }
.result-badge .ring{ position:absolute; inset:-10px; border-radius:50%; border:1px solid currentColor; opacity:.25; }
@media (prefers-reduced-motion: no-preference){
  html:not(.no-anim) .result-badge{ animation:badgePop .7s var(--ease-out) both; }
  html:not(.no-anim) .result-badge .ring{ animation:ringOut 1.1s var(--ease-out) .2s both; }
}
@keyframes badgePop{ 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.06); } 100%{ transform:scale(1); opacity:1; } }
@keyframes ringOut{ from{ transform:scale(.7); opacity:.5; } to{ transform:scale(1.25); opacity:0; } }
.result-title{ font-family:var(--fa); font-size:clamp(26px,3.4vw,38px); font-weight:600; color:var(--plum); }
.result-sub{ font-family:var(--fa); font-size:15px; font-weight:300; color:var(--plum-soft); line-height:1.95; max-width:46ch; }
.result-card{ width:100%; padding:24px 26px; text-align:start; display:flex; flex-direction:column; gap:14px; margin-top:6px; }
.result-card .rc-row{ display:flex; justify-content:space-between; gap:16px; font-family:var(--fa); font-size:14px; }
.result-card .rc-row .k{ color:var(--plum-faint); }
.result-card .rc-row .v{ color:var(--plum); font-weight:600; direction:ltr; }
.result-card .rc-row.total{ padding-top:14px; border-top:1px solid var(--line); font-size:17px; }
.result-actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; margin-top:4px; }
@media (max-width:520px){ .result-actions{ flex-direction:column; width:100%; } .result-actions .btn{ width:100%; justify-content:center; } }
@media (max-width:520px){
  .result-wrap{ gap:18px; }
  .result-badge{ width:88px; height:88px; }
  .result-badge svg{ width:44px; height:44px; }
  .result-card{ padding:20px 18px; }
  .result-card .rc-row{ gap:10px; flex-wrap:wrap; }
  .result-card .rc-row .v{ text-align:end; }
  .result-sub{ font-size:14px; line-height:1.85; }
}

/* ============================================================
   WISHLIST
   ============================================================ */
.wishlist-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,32px); }
.wish-card{ position:relative; }
.wish-card .wish-remove{
  position:absolute; top:12px; inset-inline-end:12px; z-index:5;
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:color-mix(in srgb, var(--panel-bg) 90%, transparent); backdrop-filter:blur(6px);
  color:var(--plum); display:grid; place-items:center; box-shadow:0 8px 20px -10px rgba(74,58,87,.5);
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.wish-card .wish-remove:hover{ color:var(--err); transform:scale(1.08); }
.wish-card .wish-actions{ margin-top:14px; display:flex; }
.wish-card .wish-actions .btn{ width:100%; justify-content:center; }
@media (max-width:820px){ .wishlist-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .wishlist-grid{ grid-template-columns:1fr; } }

/* empty state (shared) */
.empty-state{ text-align:center; padding:clamp(40px,7vh,80px) 24px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.empty-state .es-icon{ width:64px; height:64px; border-radius:50%; background:var(--mist); display:grid; place-items:center; color:var(--accent); margin-bottom:4px; }

/* ============================================================
   404 / ERROR PAGE
   ============================================================ */
.error-page{ min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:22px; position:relative; }
.error-code{ font-family:var(--fa); font-weight:700; font-size:clamp(90px,18vw,200px); line-height:.9; color:var(--plum); position:relative; }
.error-code .glow{ color:transparent; background:linear-gradient(150deg, var(--lavender), var(--accent)); -webkit-background-clip:text; background-clip:text; }
.error-actions{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:center; margin-top:6px; }