/* ============================================================================
   YourChoiceX — enhancement layer (additive, theme-preserving)
   All new components are prefixed .ycx-* and built on the existing --theme-*
   tokens so every storefront theme keeps working. Nothing here changes the
   base theme; it only adds the Amazon/eBay-style depth that was missing.
   ============================================================================ */

:root {
  --ycx-deal: #b12704;            /* deep red — reserved for low-stock / urgency */
  --ycx-deal-soft: #fbeae6;
  --ycx-save: #117a3f;            /* green — discount badge & savings */
  --ycx-line: var(--theme-line, #dddddd);
  --ycx-surface: var(--theme-surface, #ffffff);
  --ycx-soft: var(--theme-surface-soft, #f7f9fa);
  --ycx-ink: var(--theme-ink, #0f1111);
  --ycx-muted: var(--theme-muted, #565959);
  --ycx-link: #146eb4;            /* clean Amazon blue (was teal) */
  --ycx-link-hover: #0b5394;
  --ycx-good: var(--theme-good, #007600);
  --ycx-radius: 10px;
  --ycx-shadow: 0 1px 2px rgba(15, 17, 17, 0.08);
  --ycx-shadow-lg: 0 6px 22px rgba(20, 30, 45, 0.14);
}

.ycx-section { width: 100%; }
.ycx-page { width: 100%; }
.ycx-link { color: var(--ycx-link); cursor: pointer; text-decoration: none; }
.ycx-link:hover { color: var(--ycx-link-hover); text-decoration: underline; }

/* Enhancement anchors must out-specify theme-temp.css `html[data-theme] a` (0,1,2),
   otherwise every link in the enhancement layer snaps back to the theme teal. */
html[data-theme] .ycx-home a,
html[data-theme] #ycxPage a,
html[data-theme] a.ycx-link,
html[data-theme] .ycx-shelf-head a { color: var(--ycx-link); }
html[data-theme] .ycx-home a:hover,
html[data-theme] #ycxPage a:hover,
html[data-theme] a.ycx-link:hover,
html[data-theme] .ycx-shelf-head a:hover { color: var(--ycx-link-hover); }
/* search suggestions sit in the header (outside .ycx-home) — keep them near-black */
html[data-theme] .ycx-suggest-row { color: #111; }
html[data-theme] .ycx-suggest-row.term { color: var(--ycx-muted); }

/* hide the SPA's storefront/product sections while an enhance page is open.
   NOTE: #ycxPage is itself a `main > section`, so it MUST be excluded from the
   hide rule — otherwise the !important display:none hides the enhance page too
   (the non-important display:block below can't override !important). */
body.ycx-page-open main > section:not(#ycxPage) { display: none !important; }
#ycxPage { display: none; }
body.ycx-page-open #ycxPage { display: block !important; }

/* home extras: only on the landing/storefront view (not category/product/info/enhance) */
#ycxHome { display: none; }
body:not(.category-view):not(.product-view):not(.document-view):not(.ycx-page-open) #ycxHome { display: block; }

/* ---------------------------------------------------------------- card deals */
.product-card .product-media { position: relative; }

.ycx-badge {
  position: absolute;
  top: 8px;
  left: 0;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ycx-deal);
  padding: 3px 9px 3px 8px;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.ycx-badge.bestseller { background: #c45500; }
.ycx-badge.deal { background: var(--ycx-save); }
.ycx-badge.new { background: #1a7a6b; }
.ycx-badge.popular { background: #232f3e; }
.ycx-badge.limited { background: #b12704; }
/* smaller, cleaner badge on the compact rail cards */
.ycx-mini-media .ycx-badge { font-size: 10px; padding: 2px 7px; letter-spacing: 0.01em; }

.ycx-price-wrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-top: 1px; }
.ycx-price-was {
  font-size: 12px;
  color: var(--ycx-muted);
  text-decoration: line-through;
}
.ycx-price-save {
  font-size: 12px;
  font-weight: 600;
  color: var(--ycx-save);
}
.ycx-card-free {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--ycx-good);
  font-weight: 600;
  margin-top: 3px;
}

.ycx-quick-add {
  margin: 4px 12px 12px;
  width: calc(100% - 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #f2c200;
  background: linear-gradient(to bottom, #ffe27a 0%, #ffd814 58%, #f7ca00 100%);
  color: #0f1111;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 140ms ease, transform 120ms ease;
}
.ycx-quick-add:hover { background: linear-gradient(to bottom, #ffd75e, #f7ca00); border-color: #e0b500; }
.ycx-quick-add:active { transform: translateY(1px); }
.ycx-quick-add.added { background: var(--theme-good, #007600) !important; border-color: #0a6b2e !important; color: #fff !important; }

/* ---- Amazon-yellow checkout & cart CTAs (scoped — does NOT change the site theme) ---- */
#ycxGoCheckout,
#ycxPlaceOrder,
.ycx-co-actions .button.primary,
.purchase-panel [data-ycx-pp-add] {
  background: linear-gradient(to bottom, #ffe27a 0%, #ffd814 58%, #f7ca00 100%) !important;
  border: 1px solid #f2c200 !important;
  color: #0f1111 !important;
  text-shadow: none !important;
}
#ycxGoCheckout:hover,
#ycxPlaceOrder:hover,
.ycx-co-actions .button.primary:hover,
.purchase-panel [data-ycx-pp-add]:hover {
  background: linear-gradient(to bottom, #ffd75e 0%, #f7ca00 100%) !important;
  border-color: #e0b500 !important;
}
/* Buy Now stays Amazon orange so it reads distinct from the yellow Add to Cart */
.purchase-panel [data-ycx-pp-buy] {
  background: linear-gradient(to bottom, #ffc04d 0%, #ffa41c 60%, #fa8900 100%) !important;
  border: 1px solid #e0860c !important;
  color: #0f1111 !important;
}
.purchase-panel [data-ycx-pp-buy]:hover { background: linear-gradient(to bottom, #ffb733 0%, #f08f00 100%) !important; border-color: #cc7a00 !important; }

/* ------------------------------------------------------------- home: tiles  */
.ycx-home { padding-top: 8px; }
.ycx-home-section { margin: 0 0 22px; }

.ycx-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 18px 0 26px;
}
.ycx-tile {
  background: var(--ycx-surface);
  border: 1px solid var(--ycx-line);
  border-radius: var(--ycx-radius);
  padding: 18px 18px 14px;
  text-decoration: none;
  color: var(--ycx-ink);
  display: flex;
  flex-direction: column;
  min-height: 230px;
  box-shadow: var(--ycx-shadow);
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.ycx-tile:hover { box-shadow: var(--ycx-shadow-lg); transform: translateY(-2px); }
.ycx-tile h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ycx-ink); }
.ycx-tile-art {
  flex: 1;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  min-height: 120px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--ycx-soft);
}
/* imports / deals have no hero slide image — clean themed gradient instead */
.ycx-tile-art-fallback {
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--ycx-link), #ffffff 60%), color-mix(in srgb, var(--ycx-link), #000000 12%));
}

/* Mobile Money payment status (rendered ON the checkout page so it never vanishes) */
.ycx-paystatus { max-width: 540px; margin: 30px auto; text-align: center; background: var(--ycx-surface); border: 1px solid var(--ycx-line); border-radius: var(--ycx-radius); padding: 34px 26px; box-shadow: var(--ycx-shadow); }
.ycx-paystatus-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; background: var(--ycx-soft); }
.ycx-paystatus-icon i, .ycx-paystatus-icon svg { width: 30px; height: 30px; }
.ycx-paystatus h1 { font-size: 22px; margin: 0 0 8px; }
.ycx-paystatus p { color: var(--ycx-muted); font-size: 14px; line-height: 1.5; margin: 0 auto; max-width: 430px; }
.ycx-paystatus .ycx-order-pill { display: inline-block; margin-top: 14px; padding: 6px 14px; border-radius: 999px; background: var(--ycx-soft); font-weight: 600; font-size: 13px; }
.ycx-paystatus-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.ycx-paystatus.ok .ycx-paystatus-icon { color: var(--theme-good, #007600); }
.ycx-paystatus.bad .ycx-paystatus-icon { color: var(--ycx-deal, #b12704); }
.ycx-paystatus.pending .ycx-paystatus-icon { color: var(--ycx-link, #007185); }

/* "filled in from your saved details" note on the checkout */
.ycx-prefill-note { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; padding: 9px 12px; border-radius: 8px; background: var(--ycx-soft); color: var(--ycx-muted); font-size: 12.5px; }
.ycx-prefill-note i, .ycx-prefill-note svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ycx-link); }
.ycx-tile-cta { margin-top: 11px; font-size: 13px; font-weight: 600; color: var(--ycx-link); }
.ycx-tile:hover .ycx-tile-cta { color: var(--ycx-link-hover); text-decoration: underline; }

/* striped image placeholder */
.ycx-ph {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.045) 0 12px, rgba(0,0,0,0.02) 12px 24px),
    var(--ycx-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ycx-muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 8px;
}

/* ------------------------------------------------------------- home: shelves */
.ycx-shelf {
  background: var(--ycx-surface);
  border: 1px solid var(--ycx-line);
  border-radius: var(--ycx-radius);
  padding: 16px 4px 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--ycx-shadow);
  position: relative;
}
.ycx-shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-right: 16px;
  margin-bottom: 12px;
}
.ycx-shelf-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }

/* Imports section: plain full-width grid (cards match the main product grid) */
.ycx-imports-shelf { margin: 6px 0 26px; }
.ycx-imports-shelf .ycx-shelf-head { margin-bottom: 14px; }
.ycx-shelf-head a { font-size: 13px; font-weight: 600; color: var(--ycx-link); text-decoration: none; white-space: nowrap; }
.ycx-shelf-head a:hover { color: var(--ycx-link-hover); text-decoration: underline; }

.ycx-rail-wrap { position: relative; }
.ycx-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 2px 16px 8px 0;
  scrollbar-width: thin;
}
.ycx-rail::-webkit-scrollbar { height: 8px; }
.ycx-rail::-webkit-scrollbar-thumb { background: var(--ycx-line); border-radius: 4px; }

.ycx-mini {
  flex: 0 0 176px;
  width: 176px;
  background: var(--ycx-surface);
  border: 1px solid var(--ycx-line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ycx-ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.ycx-mini:hover { box-shadow: var(--ycx-shadow-lg); border-color: color-mix(in srgb, var(--ycx-line), #000 16%); }
.ycx-mini-media { position: relative; aspect-ratio: 1 / 1; background: #f4f5f7; border-bottom: 1px solid var(--ycx-line); }
.ycx-mini-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ycx-mini-body { padding: 9px 11px 12px; display: flex; flex-direction: column; gap: 4px; }
.ycx-mini-title { font-size: 13px; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; color: var(--ycx-ink); }
.ycx-mini-price { font-size: 18px; font-weight: 700; color: var(--ycx-ink); }
.ycx-mini .ycx-price-was { font-size: 12.5px; }

.ycx-rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ycx-line);
  background: rgba(255,255,255,0.96);
  color: var(--ycx-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.16);
  z-index: 3;
}
.ycx-rail-arrow.prev { left: -6px; }
.ycx-rail-arrow.next { right: 8px; }
.ycx-rail-arrow:hover { background: #fff; }
.ycx-rail-arrow svg { width: 20px; height: 20px; }

/* small rating row reused in minis & lists */
.ycx-stars { position: relative; display: inline-block; font-size: 15px; line-height: 1; white-space: nowrap; font-family: Arial, sans-serif; }
.ycx-stars-base { color: #d5d9d9; letter-spacing: 1px; }
.ycx-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; color: #de7921; letter-spacing: 1px; }
.ycx-rating-row { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ycx-muted); }
.ycx-rating-row .ycx-rating-count { color: var(--ycx-muted); }

/* ====================================================== PRODUCT PAGE additions */
.ycx-pp-rating { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; font-size: 13px; }
.ycx-pp-rating .ycx-rating-count { color: var(--ycx-link); cursor: pointer; }
.ycx-pp-rating .ycx-rating-count:hover { color: var(--ycx-link-hover); text-decoration: underline; }

.ycx-pp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 4px 0 2px; }
.ycx-pp-save { color: var(--ycx-save); font-weight: 600; font-size: 14px; }
.ycx-pp-was { color: var(--ycx-muted); font-size: 14px; }
.ycx-pp-was s { color: var(--ycx-muted); }

.ycx-qty { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.ycx-qty label { font-size: 13px; font-weight: 600; color: var(--ycx-ink); }
.ycx-stepper { display: inline-flex; align-items: center; border: 1px solid #888; border-radius: 8px; overflow: hidden; background: #fff; }
.ycx-stepper button { width: 38px; height: 38px; border: 0; background: var(--ycx-soft); cursor: pointer; font-size: 18px; color: var(--ycx-ink); display: flex; align-items: center; justify-content: center; }
.ycx-stepper button:hover { background: #ececec; }
.ycx-stepper input { width: 46px; height: 38px; border: 0; border-left: 1px solid var(--ycx-line); border-right: 1px solid var(--ycx-line); text-align: center; font-size: 15px; font-weight: 600; -moz-appearance: textfield; }
.ycx-stepper input::-webkit-outer-spin-button, .ycx-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ycx-deliver-est {
  border: 1px solid var(--ycx-line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
  background: var(--ycx-soft);
}
.ycx-deliver-est-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ycx-deliver-est select { margin-left: auto; padding: 5px 8px; border: 1px solid #888; border-radius: 6px; font-size: 13px; background: #fff; max-width: 56%; }
.ycx-deliver-est-out { margin-top: 8px; font-size: 13px; color: var(--ycx-ink); }
.ycx-deliver-est-out strong { color: var(--ycx-good); }

.ycx-pp-extra-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ycx-textbtn { background: none; border: 0; color: var(--ycx-link); cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; }
.ycx-textbtn:hover { color: var(--ycx-link-hover); text-decoration: underline; }
.ycx-textbtn.on { color: var(--ycx-deal); font-weight: 600; }

/* specs table */
.ycx-block { margin-top: 30px; }
.ycx-block > h3 { font-size: 18px; font-weight: 700; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ycx-line); }
.ycx-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.ycx-specs th, .ycx-specs td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--ycx-line); vertical-align: top; }
.ycx-specs th { width: 38%; max-width: 230px; background: var(--ycx-soft); font-weight: 600; color: var(--ycx-ink); }
.ycx-specs tr:last-child th, .ycx-specs tr:last-child td { border-bottom: 0; }

/* related rail reuses .ycx-rail / .ycx-mini */

/* reviews */
.ycx-reviews { margin-top: 30px; }
.ycx-rev-grid { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.ycx-rev-summary .ycx-rev-avg { display: flex; align-items: center; gap: 10px; }
.ycx-rev-avg-num { font-size: 40px; font-weight: 700; line-height: 1; }
.ycx-rev-bars { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.ycx-rev-bar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ycx-link); cursor: default; }
.ycx-rev-bar .lbl { width: 44px; white-space: nowrap; }
.ycx-rev-bar .track { flex: 1; height: 14px; background: #f0f1f2; border: 1px solid #d8dcdc; border-radius: 3px; overflow: hidden; }
.ycx-rev-bar .fill { height: 100%; background: linear-gradient(to bottom, #ffd277, #f0a847); }
.ycx-rev-bar .pct { width: 34px; text-align: right; color: var(--ycx-muted); }
.ycx-rev-write { margin-top: 18px; }

.ycx-rev-list { display: flex; flex-direction: column; gap: 22px; }
.ycx-rev-item { border-bottom: 1px solid var(--ycx-line); padding-bottom: 20px; }
.ycx-rev-item:last-child { border-bottom: 0; }
.ycx-rev-who { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.ycx-rev-ava { width: 30px; height: 30px; border-radius: 50%; background: var(--ycx-soft); border: 1px solid var(--ycx-line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ycx-muted); }
.ycx-rev-name { font-size: 13px; font-weight: 600; }
.ycx-rev-head { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.ycx-rev-title { font-size: 14px; font-weight: 700; color: var(--ycx-ink); }
.ycx-rev-meta { font-size: 12px; color: var(--ycx-muted); margin-bottom: 6px; }
.ycx-rev-verified { color: #c45500; font-weight: 600; }
.ycx-rev-body { font-size: 14px; line-height: 1.5; color: #222; }
.ycx-rev-helpful { margin-top: 9px; font-size: 12px; color: var(--ycx-muted); display: flex; align-items: center; gap: 12px; }
.ycx-rev-helpful button { border: 1px solid #888; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--ycx-ink); }
.ycx-rev-helpful button:hover { background: var(--ycx-soft); }

/* review write form */
.ycx-revform { background: var(--ycx-soft); border: 1px solid var(--ycx-line); border-radius: 8px; padding: 16px; margin-bottom: 22px; }
.ycx-revform.hidden { display: none; }
.ycx-revform label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.ycx-revform input[type=text], .ycx-revform textarea { width: 100%; border: 1px solid #888; border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 14px; }
.ycx-starpick { display: inline-flex; gap: 2px; font-size: 26px; color: #d5d9d9; cursor: pointer; }
.ycx-starpick span:hover, .ycx-starpick span.on { color: #de7921; }

/* ============================================================= CHECKOUT page */
.ycx-checkout { padding: 18px 0 60px; }
.ycx-checkout-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.ycx-checkout-top h1 { font-size: 24px; margin: 0; font-weight: 700; }
.ycx-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ycx-good); font-weight: 600; }

.ycx-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
.ycx-stepnav { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ycx-muted); }
.ycx-stepnav .dot { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--ycx-line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.ycx-stepnav.active { color: var(--ycx-ink); font-weight: 700; }
.ycx-stepnav.active .dot { border-color: var(--theme-primary-strong, #e5b230); background: var(--theme-primary, #f0c14b); color: #111; }
.ycx-stepnav.done .dot { border-color: var(--ycx-good); background: var(--ycx-good); color: #fff; }
.ycx-steps .sep { width: 26px; height: 2px; background: var(--ycx-line); }

.ycx-co-grid { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start; }
.ycx-co-main { min-width: 0; }
.ycx-panel { background: var(--ycx-surface); border: 1px solid var(--ycx-line); border-radius: var(--ycx-radius); padding: 22px; margin-bottom: 18px; box-shadow: var(--ycx-shadow); }
.ycx-panel h2 { font-size: 18px; margin: 0 0 16px; font-weight: 700; }
.ycx-field { margin-bottom: 14px; }
.ycx-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.ycx-field input, .ycx-field select, .ycx-field textarea {
  width: 100%; border: 1px solid #888c8c; border-radius: 7px; padding: 10px 12px; font: inherit; font-size: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(15,17,17,0.06) inset;
}
.ycx-field input:focus, .ycx-field select:focus, .ycx-field textarea:focus { outline: 0; border-color: var(--ycx-link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ycx-link), transparent 80%); }
.ycx-field.err input, .ycx-field.err select { border-color: var(--ycx-deal); }
.ycx-field .ycx-err-msg { color: var(--ycx-deal); font-size: 12px; margin-top: 4px; display: none; }
.ycx-field.err .ycx-err-msg { display: block; }
.ycx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* payment methods */
.ycx-pay-methods { display: flex; flex-direction: column; gap: 10px; }
.ycx-pay-opt { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--ycx-line); border-radius: 8px; padding: 13px 15px; cursor: pointer; transition: border-color 140ms ease, background 140ms ease; }
.ycx-pay-opt:hover { background: var(--ycx-soft); }
.ycx-pay-opt.sel { border-color: var(--theme-primary-strong, #e5b230); background: color-mix(in srgb, var(--theme-primary, #f0c14b), transparent 88%); box-shadow: 0 0 0 1px var(--theme-primary-strong, #e5b230) inset; }
.ycx-pay-opt input { margin-top: 3px; }
.ycx-pay-opt .ycx-pay-main { flex: 1; }
.ycx-pay-opt .ycx-pay-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ycx-pay-opt .ycx-pay-sub { font-size: 12.5px; color: var(--ycx-muted); margin-top: 2px; }
.ycx-pay-logos { display: flex; gap: 4px; align-items: center; }
.ycx-paylogo { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 3px; color: #fff; letter-spacing: 0.02em; }
.ycx-paylogo.visa { background: #1a1f71; }
.ycx-paylogo.mc { background: #cc0c39; }
.ycx-paylogo.airtel { background: #e40000; }
.ycx-paylogo.mtn { background: #ffcc00; color: #111; }
.ycx-pay-detail { margin-top: 12px; padding: 14px; border: 1px dashed var(--ycx-line); border-radius: 8px; background: var(--ycx-soft); }

.ycx-co-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap; }

/* order summary */
.ycx-summary { position: sticky; top: 118px; }
.ycx-summary .ycx-sum-line { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 9px; }
.ycx-summary .ycx-sum-line.total { font-size: 18px; font-weight: 700; border-top: 1px solid var(--ycx-line); padding-top: 12px; margin-top: 4px; }
.ycx-summary .muted { color: var(--ycx-muted); }
.ycx-summary .save { color: var(--ycx-deal); }
.ycx-sum-items { margin: 4px 0 14px; display: flex; flex-direction: column; gap: 12px; max-height: 280px; overflow-y: auto; }
.ycx-sum-item { display: flex; gap: 10px; }
.ycx-sum-item img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; border: 1px solid var(--ycx-line); }
.ycx-sum-item .nm { font-size: 12.5px; line-height: 1.3; }
.ycx-sum-item .qp { font-size: 12px; color: var(--ycx-muted); }
.ycx-promo { display: flex; gap: 8px; margin: 6px 0 14px; }
.ycx-promo input { flex: 1; border: 1px solid #888c8c; border-radius: 7px; padding: 9px 11px; font: inherit; font-size: 13px; text-transform: uppercase; }
.ycx-promo button { border: 1px solid #888; background: var(--ycx-soft); border-radius: 7px; padding: 0 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ycx-promo button:hover { background: #ececec; }
.ycx-promo-msg { font-size: 12px; margin: -8px 0 12px; }
.ycx-promo-msg.ok { color: var(--ycx-good); }
.ycx-promo-msg.bad { color: var(--ycx-deal); }
.ycx-trust { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--ycx-muted); }
.ycx-trust div { display: flex; align-items: center; gap: 7px; }
.ycx-trust svg { width: 15px; height: 15px; color: var(--ycx-good); }

/* review step list */
.ycx-review-list { display: flex; flex-direction: column; gap: 14px; }
.ycx-review-line { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--ycx-line); padding-bottom: 14px; }
.ycx-review-line:last-child { border-bottom: 0; }
.ycx-review-line img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ycx-line); }
.ycx-recap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ycx-recap .ycx-recap-box { border: 1px solid var(--ycx-line); border-radius: 8px; padding: 14px; }
.ycx-recap h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ycx-muted); }
.ycx-recap p { margin: 0; font-size: 14px; line-height: 1.5; }

/* confirmation + tracking */
.ycx-confirm { max-width: 760px; margin: 0 auto; padding: 30px 0 60px; }
.ycx-confirm-head { background: var(--ycx-surface); border: 1px solid var(--ycx-line); border-top: 4px solid var(--ycx-good); border-radius: var(--ycx-radius); padding: 28px; text-align: center; box-shadow: var(--ycx-shadow); }
.ycx-confirm-tick { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--ycx-good), transparent 86%); color: var(--ycx-good); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.ycx-confirm-tick svg { width: 36px; height: 36px; }
.ycx-confirm-head h1 { font-size: 24px; margin: 0 0 6px; }
.ycx-confirm-head p { margin: 0; color: var(--ycx-muted); }
.ycx-order-pill { display: inline-block; margin-top: 12px; background: var(--ycx-soft); border: 1px solid var(--ycx-line); border-radius: 999px; padding: 7px 16px; font-weight: 700; }

.ycx-track { margin-top: 22px; background: var(--ycx-surface); border: 1px solid var(--ycx-line); border-radius: var(--ycx-radius); padding: 24px; box-shadow: var(--ycx-shadow); }
.ycx-track h2 { font-size: 18px; margin: 0 0 20px; }
.ycx-timeline { display: flex; flex-direction: column; gap: 0; }
.ycx-tl-step { display: flex; gap: 14px; position: relative; padding-bottom: 26px; }
.ycx-tl-step:last-child { padding-bottom: 0; }
.ycx-tl-mark { position: relative; flex: 0 0 auto; width: 30px; display: flex; justify-content: center; }
.ycx-tl-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ycx-line); background: #fff; z-index: 2; margin-top: 2px; }
.ycx-tl-step.done .ycx-tl-dot { background: var(--ycx-good); border-color: var(--ycx-good); }
.ycx-tl-step.current .ycx-tl-dot { background: var(--theme-primary, #f0c14b); border-color: var(--theme-primary-strong, #e5b230); box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-primary, #f0c14b), transparent 75%); }
.ycx-tl-line { position: absolute; top: 18px; bottom: -4px; left: 50%; width: 2px; transform: translateX(-50%); background: var(--ycx-line); }
.ycx-tl-step.done .ycx-tl-line { background: var(--ycx-good); }
.ycx-tl-step:last-child .ycx-tl-line { display: none; }
.ycx-tl-body h4 { margin: 0 0 2px; font-size: 14.5px; }
.ycx-tl-body p { margin: 0; font-size: 13px; color: var(--ycx-muted); }
.ycx-tl-step.pending .ycx-tl-body { opacity: 0.55; }

/* ================================================== account / lists / compare */
.ycx-list-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0 18px; flex-wrap: wrap; }
.ycx-list-head h1 { font-size: 24px; margin: 0; font-weight: 700; }
.ycx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.ycx-empty { text-align: center; padding: 60px 20px; color: var(--ycx-muted); }
.ycx-empty svg { width: 46px; height: 46px; opacity: 0.5; margin-bottom: 10px; }
.ycx-empty h3 { margin: 0 0 6px; color: var(--ycx-ink); }

.ycx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ycx-line); margin-bottom: 20px; overflow-x: auto; }
.ycx-tab { border: 0; background: none; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--ycx-muted); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.ycx-tab.active { color: var(--ycx-ink); border-bottom-color: var(--theme-primary-strong, #e5b230); }

.ycx-acc-order { border: 1px solid var(--ycx-line); border-radius: var(--ycx-radius); margin-bottom: 16px; overflow: hidden; background: var(--ycx-surface); }
.ycx-acc-order-top { display: flex; flex-wrap: wrap; gap: 18px 30px; background: var(--ycx-soft); padding: 14px 18px; border-bottom: 1px solid var(--ycx-line); font-size: 12px; }
.ycx-acc-order-top .k { color: var(--ycx-muted); text-transform: uppercase; letter-spacing: 0.03em; font-size: 11px; }
.ycx-acc-order-top .v { font-size: 14px; font-weight: 600; }
.ycx-acc-order-top .ycx-acc-num { margin-left: auto; text-align: right; }
.ycx-acc-order-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.ycx-acc-line { display: flex; gap: 14px; align-items: center; }
.ycx-acc-line img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ycx-line); }
.ycx-acc-line .nm { font-size: 14px; font-weight: 600; }
.ycx-acc-line .sub { font-size: 12.5px; color: var(--ycx-muted); }
.ycx-status-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em; }
.ycx-status-tag.delivered { background: var(--theme-good-soft, #ecf7ec); color: var(--ycx-good); }
.ycx-status-tag.transit { background: #eef4fb; color: #0b6aa2; }
.ycx-status-tag.processing { background: #fff4e5; color: #b65c00; }

/* compare */
.ycx-compare-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--theme-subheader, #232f3e); color: #fff;
  display: none; align-items: center; gap: 14px;
  padding: 10px 18px; box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
}
.ycx-compare-bar.show { display: flex; }
.ycx-compare-bar .ycx-cb-items { display: flex; gap: 8px; flex: 1; overflow-x: auto; }
.ycx-cb-thumb { position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,0.3); background: #fff; }
.ycx-cb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ycx-cb-thumb button { position: absolute; top: -1px; right: -1px; background: rgba(0,0,0,0.6); border: 0; color: #fff; width: 16px; height: 16px; border-radius: 0 0 0 6px; cursor: pointer; font-size: 11px; line-height: 1; }
.ycx-cb-empty { width: 46px; height: 46px; border: 1px dashed rgba(255,255,255,0.35); border-radius: 6px; }
.ycx-compare-table-wrap { overflow-x: auto; margin-top: 16px; }
.ycx-compare-table { border-collapse: collapse; width: 100%; min-width: 560px; background: var(--ycx-surface); }
.ycx-compare-table th, .ycx-compare-table td { border: 1px solid var(--ycx-line); padding: 12px 14px; text-align: left; vertical-align: top; font-size: 13px; }
.ycx-compare-table thead th { background: var(--ycx-soft); }
.ycx-compare-table .rowlabel { background: var(--ycx-soft); font-weight: 600; width: 150px; }
.ycx-compare-prod img { width: 100%; max-width: 130px; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; border: 1px solid var(--ycx-line); }
.ycx-compare-prod a { display: block; font-weight: 600; color: var(--ycx-link); margin-top: 6px; text-decoration: none; font-size: 13px; }

/* search suggestions */
.ycx-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 80;
  background: #fff; border: 1px solid var(--ycx-line); border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); overflow: hidden; display: none;
}
.ycx-suggest.show { display: block; }
.ycx-suggest-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; color: #111; text-decoration: none; }
.ycx-suggest-row:hover, .ycx-suggest-row.active { background: #f0f3f5; }
.ycx-suggest-row img { width: 38px; height: 38px; object-fit: cover; border-radius: 5px; border: 1px solid var(--ycx-line); }
.ycx-suggest-row .s-name { font-size: 13px; flex: 1; }
.ycx-suggest-row .s-price { font-size: 13px; font-weight: 700; }
.ycx-suggest-row.term { color: var(--ycx-muted); }
.ycx-suggest-row.term svg { width: 16px; height: 16px; }
.ycx-suggest-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ycx-muted); padding: 8px 14px 4px; }

/* the header search needs relative positioning for the dropdown */
.header-search { position: relative; }

/* ----------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .ycx-co-grid { grid-template-columns: 1fr; }
  .ycx-summary { position: static; }
  .ycx-rev-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
  .ycx-checkout-top h1 { font-size: 20px; }
  .ycx-row2 { grid-template-columns: 1fr; }
  .ycx-recap { grid-template-columns: 1fr; }
  .ycx-tile { min-height: 200px; }
  .ycx-mini { flex-basis: 150px; width: 150px; }
  .ycx-stepnav .label { display: none; }
  .ycx-panel { padding: 16px; }
  .ycx-confirm { padding: 18px 0 50px; }
}

/* ============================================================ Amazon-style filters */
.category-results-shell { grid-template-columns: 238px minmax(0, 1fr) !important; gap: 26px !important; }

.ycx-filterbar { padding: 0 !important; border: 0 !important; background: transparent !important; gap: 0 !important; }
.ycx-filterbar .refinement-heading { padding: 0 0 10px; border-bottom: 1px solid var(--ycx-line); margin-bottom: 2px; }
.ycx-filterbar .refinement-heading strong { font-size: 18px; font-weight: 700; color: var(--ycx-ink); }
.ycx-filterbar [data-ycx-clearfilters] { color: var(--ycx-link); font-size: 12px; font-weight: 600; background: none; border: 0; cursor: pointer; }
.ycx-filterbar [data-ycx-clearfilters]:hover { color: var(--ycx-link-hover); text-decoration: underline; }

.ycx-fgroup { border-bottom: 1px solid var(--ycx-line); padding: 13px 0; gap: 4px; }
.ycx-fgroup:last-child { border-bottom: 0; }
.ycx-filterbar .refinement-group-toggle { padding: 0 0 7px; background: none; border: 0; cursor: pointer; }
.ycx-filterbar .refinement-group-title { font-size: 15px; font-weight: 700; color: var(--ycx-ink); letter-spacing: -0.01em; }
.ycx-filterbar .refinement-group-toggle i { width: 16px; height: 16px; color: var(--ycx-muted); }
.ycx-filterbar .refinement-options { gap: 1px; }

.ycx-filterbar .refinement-option {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 0; padding: 5px 6px; border: 0; background: none;
  font-size: 13px; color: var(--ycx-ink); text-align: left; border-radius: 5px; cursor: pointer; text-decoration: none;
}
.ycx-filterbar .refinement-option:hover { background: var(--ycx-soft); color: var(--ycx-link); }
.ycx-filterbar .refinement-option.active { color: var(--ycx-link); font-weight: 700; background: transparent; border-color: transparent; }
.ycx-fopt-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ycx-fopt-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ycx-fcount { color: var(--ycx-muted); font-size: 12px; font-weight: 400; flex: 0 0 auto; }
.ycx-fdept.active { font-weight: 700; }
.ycx-fstar-txt { color: var(--ycx-ink); font-weight: 600; }
.ycx-filterbar .refinement-option.active .ycx-fstar-txt { color: var(--ycx-link); }
.ycx-filterbar .ycx-stars { font-size: 15px; }

.ycx-check { width: 15px; height: 15px; border: 1px solid #888c8c; border-radius: 3px; background: #fff; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.refinement-option.active .ycx-check { background: var(--ycx-link); border-color: var(--ycx-link); }
.refinement-option.active .ycx-check::after { content: "✓"; color: #fff; font-size: 11px; line-height: 1; }

.ycx-price-custom { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding: 0 6px; }
.ycx-price-custom input { width: 100%; min-width: 0; border: 1px solid #888c8c; border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; }
.ycx-price-custom input:focus { outline: 0; border-color: var(--ycx-link); }
.ycx-price-custom span { color: var(--ycx-muted); }
.ycx-price-custom button { flex: 0 0 auto; width: 33px; height: 33px; border: 1px solid #888c8c; border-radius: 6px; background: var(--ycx-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ycx-price-custom button:hover { background: #ececec; }
.ycx-price-custom button i { width: 16px; height: 16px; }

.active-refinements:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.active-refinements .ycx-result-count { font-size: 13px; color: var(--ycx-muted); font-weight: 600; }
.ycx-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--ycx-soft); border: 1px solid var(--ycx-line); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; color: var(--ycx-ink); cursor: pointer; }
.ycx-chip:hover { border-color: var(--ycx-deal); color: var(--ycx-deal); }
.ycx-chip i { width: 13px; height: 13px; }
.ycx-chip-clear { color: var(--ycx-link); font-weight: 600; font-size: 12.5px; background: none; border: 0; cursor: pointer; }
.ycx-chip-clear:hover { text-decoration: underline; }

@media (max-width: 992px) {
  .category-results-shell { grid-template-columns: 1fr !important; }
  .ycx-filterbar { padding: 16px !important; background: var(--ycx-surface) !important; border: 1px solid var(--ycx-line) !important; border-radius: 10px; }
  .ycx-filterbar .refinement-options { flex-direction: column !important; overflow: visible !important; }
  .ycx-price-custom { flex-wrap: nowrap; }
}

/* ===================================================== Amazon "All" department panel */
/* retire the old small dropdown — the slide-in panel replaces it */
#shopMenuDropdown { display: none !important; }

.ycx-dept-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.ycx-dept-overlay.open { opacity: 1; visibility: visible; }

.ycx-dept-panel {
  position: absolute; top: 0; left: 0; height: 100%;
  width: 365px; max-width: 84vw;
  background: var(--ycx-surface, #fff);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  box-shadow: 0 0 34px rgba(0, 0, 0, 0.35);
}
.ycx-dept-overlay.open .ycx-dept-panel { transform: translateX(0); }

.ycx-dept-close {
  position: absolute; top: 12px; left: calc(min(365px, 84vw) + 10px);
  background: none; border: 0; color: #fff; cursor: pointer; padding: 4px;
  opacity: 0; transition: opacity 0.25s ease 0.1s;
}
.ycx-dept-overlay.open .ycx-dept-close { opacity: 0.92; }
.ycx-dept-close:hover { opacity: 1; }
.ycx-dept-close i { width: 28px; height: 28px; }

.ycx-dept-head {
  background: var(--theme-header, #131921);
  color: var(--theme-nav-text, #fff);
  flex: 0 0 auto; padding: 14px 18px;
}
.ycx-dept-greet {
  display: flex; align-items: center; gap: 11px;
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 17px; font-weight: 700; padding: 0; width: 100%; text-align: left;
}
.ycx-dept-greet i { width: 26px; height: 26px; }

.ycx-dept-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 0 36px; -webkit-overflow-scrolling: touch; }
.ycx-dept-section { padding: 8px 0; }
.ycx-dept-section h3 { font-size: 17px; font-weight: 700; padding: 8px 18px 6px; margin: 0; color: var(--ycx-ink); }
.ycx-dept-divider { height: 8px; background: var(--ycx-soft); border-top: 1px solid var(--ycx-line); border-bottom: 1px solid var(--ycx-line); }

.ycx-dept-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 11px 18px; background: none; border: 0; text-align: left; cursor: pointer;
  text-decoration: none; font: inherit;
}
.ycx-dept-row:hover { background: var(--ycx-soft); }
html[data-theme] .ycx-dept-row { color: var(--ycx-ink); }
.ycx-dept-ico { width: 22px; flex: 0 0 auto; color: var(--ycx-muted); display: inline-flex; align-items: center; justify-content: center; }
.ycx-dept-ico i { width: 21px; height: 21px; }
.ycx-dept-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ycx-dept-label strong { font-weight: 600; font-size: 14px; color: var(--ycx-ink); }
.ycx-dept-sub { font-size: 12px; color: var(--ycx-muted); font-weight: 400; }
.ycx-dept-chev { color: #bbb; flex: 0 0 auto; display: inline-flex; }
.ycx-dept-chev i { width: 17px; height: 17px; }