/* =====================================================================
   Alhoot Palace — storefront design v3 (one design system for every page)
   Source file: every "V3 " below is replaced by "html body.storefront.v3 "
   when public/assets/store-v3.css is built (php resources/design/build.php).
   Brand: navy + lime, Cairo. Calm surfaces, one card, one heading, one button set.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
html body.storefront.v3 {
  --v3-navy: var(--theme-primary, #041b41);
  --v3-navy-2: #0b2a5b;
  --v3-lime: var(--theme-accent, #d5f802);
  --v3-on-lime: #041b41;
  --v3-ink: #0d1930;
  --v3-text: #3b475b;
  --v3-muted: #6b778c;
  --v3-line: #e6eaf0;
  --v3-line-2: #d9dfe8;
  --v3-soft: #f5f7fa;
  --v3-soft-2: #eef1f6;
  --v3-card: #ffffff;
  --v3-danger: #c8322b;
  --v3-ok: #17804a;
  --v3-r-xl: 24px;
  --v3-r-lg: 20px;
  --v3-r: 16px;
  --v3-r-sm: 12px;
  --v3-shadow: 0 1px 2px rgba(4, 27, 65, .04), 0 2px 8px rgba(4, 27, 65, .04);
  --v3-shadow-hover: 0 14px 34px rgba(4, 27, 65, .10);
  --v3-gap: 20px;
  --v3-section: 56px;
  background: #fff !important;
  color: var(--v3-text);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 760px) {
  html body.storefront.v3 { --v3-gap: 12px; --v3-section: 36px; font-size: 14px; }
}

/* ---------- 2. Base type & layout ---------- */
html body.storefront.v3 h1, html body.storefront.v3 h2, html body.storefront.v3 h3 { color: var(--v3-ink); letter-spacing: -.2px; }
html body.storefront.v3 main h1 { font-size: 32px; line-height: 1.4; font-weight: 800; margin: 0 0 6px; }
html body.storefront.v3 main h2 { font-size: 24px; line-height: 1.45; font-weight: 800; }
html body.storefront.v3 main h3 { font-size: 17px; line-height: 1.5; font-weight: 700; }
html body.storefront.v3 p { color: var(--v3-text); }
html body.storefront.v3 small { color: var(--v3-muted); }
html body.storefront.v3 a { transition: color .15s ease; }
html body.storefront.v3 .container { max-width: 1280px; width: calc(100% - 48px); }
html body.storefront.v3 main > .section, html body.storefront.v3 main .section { padding-block: var(--v3-section) 0; }
html body.storefront.v3 main { padding-bottom: var(--v3-section); min-height: 50vh; }
html body.storefront.v3 .breadcrumb { font-size: 13px; color: var(--v3-muted); margin: 0 0 14px; }
html body.storefront.v3 .breadcrumb a { color: var(--v3-muted); }
html body.storefront.v3 .breadcrumb a:hover { color: var(--v3-navy); }
html body.storefront.v3 .eyebrow, html body.storefront.v3 .eyebrow.dark { color: #6f7f12; font-size: 12.5px; font-weight: 700; letter-spacing: 0; margin-bottom: 6px; }
@media (max-width: 760px) {
  html body.storefront.v3 .container { width: calc(100% - 32px); }
  html body.storefront.v3 main h1 { font-size: 25px; }
  html body.storefront.v3 main h2 { font-size: 20px; }
}

/* One section heading everywhere (catalog sections, home rails, blocks). */
html body.storefront.v3 .section-heading, html body.storefront.v3 .hb-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin: 0 0 18px; padding: 0; border: 0; background: none;
}
html body.storefront.v3 .section-heading h1, html body.storefront.v3 .section-heading h2, html body.storefront.v3 .hb-head h2 {
  font-size: 24px; margin: 0; padding: 0; border: 0; line-height: 1.4;
}
html body.storefront.v3 .section-heading h2::before, html body.storefront.v3 .section-heading h2::after, html body.storefront.v3 .hb-head h2::before, html body.storefront.v3 .hb-head h2::after { display: none !important; }
html body.storefront.v3 .section-heading > a, html body.storefront.v3 .hb-head .hb-more, html body.storefront.v3 .hb-more {
  display: inline-flex !important; align-items: center; gap: 6px; flex: none;
  min-height: 36px !important; padding: 0 14px !important; border-radius: 999px !important;
  border: 1px solid var(--v3-line-2) !important; background: #fff !important; color: var(--v3-navy) !important;
  font-size: 13px !important; font-weight: 700; text-decoration: none; box-shadow: none !important;
}
html body.storefront.v3 .section-heading > a:hover, html body.storefront.v3 .hb-more:hover { border-color: var(--v3-navy); }
html body.storefront.v3 .section-heading > a svg { width: 16px; height: 16px; }
@media (max-width: 760px) {
  html body.storefront.v3 .section-heading, html body.storefront.v3 .hb-head { margin-bottom: 12px; }
  html body.storefront.v3 .section-heading h1, html body.storefront.v3 .section-heading h2, html body.storefront.v3 .hb-head h2 { font-size: 19px; }
  html body.storefront.v3 .section-heading > a, html body.storefront.v3 .hb-more { min-height: 32px; padding: 0 12px; font-size: 12px; }
}

/* ---------- 3. Buttons, fields, panels ---------- */
html body.storefront.v3 .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--v3-r-sm);
  border: 1px solid var(--v3-navy); background: var(--v3-navy); color: #fff;
  font-size: 14.5px; font-weight: 700; line-height: 1.3; box-shadow: none; transform: none;
}
html body.storefront.v3 .button:hover { background: var(--v3-navy-2); border-color: var(--v3-navy-2); color: #fff; }
html body.storefront.v3 .button.lime { background: var(--v3-lime); border-color: var(--v3-lime); color: var(--v3-on-lime); }
html body.storefront.v3 .button.lime:hover { filter: brightness(.96); background: var(--v3-lime); color: var(--v3-on-lime); }
html body.storefront.v3 .button.ghost { background: #fff; border-color: var(--v3-line-2); color: var(--v3-navy); }
html body.storefront.v3 .button.ghost:hover { border-color: var(--v3-navy); background: #fff; color: var(--v3-navy); }
html body.storefront.v3 .button:disabled, html body.storefront.v3 .button[disabled] { background: var(--v3-soft-2); border-color: var(--v3-soft-2); color: #9aa4b5; cursor: not-allowed; }
html body.storefront.v3 .button svg { width: 18px; height: 18px; }
html body.storefront.v3 .text-button { color: var(--v3-navy); font-weight: 700; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v3-line-2); }
html body.storefront.v3 .text-button.danger, html body.storefront.v3 .danger { color: var(--v3-danger) !important; }

html body.storefront.v3 main label { font-size: 13.5px; font-weight: 700; color: var(--v3-ink); }
html body.storefront.v3 main input:not([type=checkbox]):not([type=radio]):not([type=range]), html body.storefront.v3 main select, html body.storefront.v3 main textarea {
  min-height: 48px; border: 1px solid var(--v3-line-2); border-radius: var(--v3-r-sm);
  background: #fff; color: var(--v3-ink); font-size: 15px; padding: 10px 14px; box-shadow: none;
}
html body.storefront.v3 main textarea { min-height: 96px; }
html body.storefront.v3 main input:focus, html body.storefront.v3 main select:focus, html body.storefront.v3 main textarea:focus {
  outline: none; border-color: var(--v3-navy); box-shadow: 0 0 0 4px rgba(213, 248, 2, .45);
}
html body.storefront.v3 main input::placeholder, html body.storefront.v3 main textarea::placeholder { color: #9aa4b5; }
html body.storefront.v3 .check input, html body.storefront.v3 main input[type=checkbox], html body.storefront.v3 main input[type=radio] { accent-color: var(--v3-navy); }

html body.storefront.v3 .panel {
  background: #fff; border: 1px solid var(--v3-line); border-radius: var(--v3-r-lg);
  padding: 24px; box-shadow: var(--v3-shadow); margin-bottom: 18px;
}
html body.storefront.v3 .panel h2 { font-size: 19px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
html body.storefront.v3 .panel h2 .step { width: 28px; height: 28px; flex: none; margin: 0; display: inline-grid; place-items: center; border-radius: 50%; background: var(--v3-navy); color: var(--v3-lime); font-size: 13px; }
@media (max-width: 760px) { html body.storefront.v3 .panel { padding: 18px; border-radius: var(--v3-r); } html body.storefront.v3 .panel h2 { font-size: 17px; } }

html body.storefront.v3 .alert { border-radius: var(--v3-r-sm); font-size: 14px; }
html body.storefront.v3 .empty { padding: 56px 20px; }
html body.storefront.v3 .empty-symbol { background: var(--v3-soft); color: var(--v3-navy); }
html body.storefront.v3 .status { border-radius: 999px; font-size: 12px; font-weight: 700; padding: 4px 12px; }
html body.storefront.v3 table th { background: var(--v3-soft); color: var(--v3-muted); font-size: 12.5px; }
html body.storefront.v3 table td { border-color: var(--v3-line); font-size: 14px; }

/* ---------- 4. Header ---------- */
html body.storefront.v3 .announcement { background: var(--v3-navy); color: #dfe6f3; font-size: 12.5px; padding: 7px 0; }
html body.storefront.v3 .announcement a { color: var(--v3-lime); }
html body.storefront.v3 .site-header { background: #fff; border-bottom: 1px solid var(--v3-line); box-shadow: none; position: sticky; top: 0; z-index: 40; }
html body.storefront.v3 .header-row { padding-block: 14px; gap: 28px; }
html body.storefront.v3 .site-header .brand img { width: 44px; height: 44px; }
html body.storefront.v3 .site-header .brand { font-size: 21px; color: var(--v3-ink); }
html body.storefront.v3 .site-header .brand-custom .custom-logo { max-height: 52px; width: auto; }
html body.storefront.v3 .site-header .search {
  background: var(--v3-soft); border: 1px solid var(--v3-soft); border-radius: 999px; height: 48px; overflow: hidden;
  transition: border-color .15s, background .15s;
}
html body.storefront.v3 .site-header .search:focus-within { background: #fff; border-color: var(--v3-navy); box-shadow: 0 0 0 4px rgba(213, 248, 2, .35); }
html body.storefront.v3 .site-header .search input { font-size: 14.5px; padding: 0 20px; height: 46px; min-height: 0; border: 0; background: transparent; box-shadow: none; }
html body.storefront.v3 .site-header .search button { width: 40px; height: 40px; margin-inline-end: 4px; border-radius: 50%; background: var(--v3-navy); color: #fff; display: grid; place-items: center; padding: 0; flex: none; }
html body.storefront.v3 .site-header .search button svg { width: 18px; height: 18px; }
html body.storefront.v3 .header-actions { gap: 8px; }
html body.storefront.v3 .header-actions .icon-button, html body.storefront.v3 .header-actions .cart-link, html body.storefront.v3 .header-actions .account-link {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; min-width: 44px; padding: 0 12px;
  border: 1px solid var(--v3-line); border-radius: 999px; background: #fff; color: var(--v3-ink); font-size: 13.5px; font-weight: 700; box-shadow: none;
}
html body.storefront.v3 .header-actions .cart-link:hover, html body.storefront.v3 .header-actions .account-link:hover, html body.storefront.v3 .header-actions .icon-button:hover { border-color: var(--v3-navy); }
html body.storefront.v3 .header-actions svg { width: 20px; height: 20px; }
/* Cart count: a small badge sitting on the corner of the cart icon. */
html body.storefront.v3 .header-actions .cart-link { position: relative !important; overflow: visible !important; }
html body.storefront.v3 .header-actions .cart-link b {
  position: absolute !important; top: -6px !important; inset-inline-end: -6px !important; left: auto; right: auto; margin: 0 !important;
  min-width: 20px !important; height: 20px !important; line-height: 20px !important; padding: 0 5px !important; border-radius: 999px !important;
  background: var(--v3-navy) !important; color: #fff !important; border: 2px solid #fff !important; box-sizing: content-box;
  font-size: 11px !important; font-weight: 800; text-align: center; transform: none !important;
}
html body.storefront.v3 .header-actions .cart-link b:empty, html body.storefront.v3 .header-actions .cart-link b[data-count="0"] { display: none !important; }
html body.storefront.v3 .language-toggle img { border-radius: 3px; }
html body.storefront.v3 .language-toggle { flex-direction: row !important; }
html body.storefront.v3 .language-toggle small { display: none !important; }

html body.storefront.v3 .categories-nav { padding-block: 0; gap: 4px; min-height: 52px; align-items: center; border-top: 1px solid var(--v3-line); }
html body.storefront.v3 .categories-nav .all-categories {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px;
  background: var(--v3-navy); color: #fff; font-weight: 700; font-size: 13.5px; border: 0; margin-inline-end: 8px;
}
html body.storefront.v3 .categories-nav .all-categories svg { width: 18px; height: 18px; }
html body.storefront.v3 .managed-category-links { gap: 2px; }
html body.storefront.v3 .managed-category-links a.desktop-category {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 999px;
  color: var(--v3-text); font-size: 13.5px; font-weight: 600; background: none; border: 0;
}
html body.storefront.v3 .managed-category-links a.desktop-category:hover { background: var(--v3-soft); color: var(--v3-navy); }
html body.storefront.v3 .managed-category-links a.desktop-category img { width: 20px; height: 20px; }
html body.storefront.v3 .managed-quick-links { gap: 8px; }
html body.storefront.v3 .managed-quick-links a {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px;
  background: #f3f9cf; color: var(--v3-navy); border: 0; font-size: 13px; font-weight: 700; box-shadow: none;
}
html body.storefront.v3 .managed-quick-links a svg { width: 16px; height: 16px; }
html body.storefront.v3 .catalog-panel { border-radius: var(--v3-r-lg); border: 1px solid var(--v3-line); box-shadow: var(--v3-shadow-hover); }

@media (max-width: 760px) {
  html body.storefront.v3 .site-header { position: relative; }
  html body.storefront.v3 .header-row { padding-block: 10px; gap: 10px; }
  html body.storefront.v3 .site-header .search { height: 46px; }
  html body.storefront.v3 .header-actions .icon-button, html body.storefront.v3 .header-actions .cart-link { height: 40px; min-width: 40px; padding: 0 9px; }
  html body.storefront.v3 .menu-toggle { width: 40px; height: 40px; border: 1px solid var(--v3-line); border-radius: 50%; background: #fff; }
  html body.storefront.v3 .mobile-catalog-bar { padding-block: 0 10px; }
  html body.storefront.v3 .header-actions .account-link { display: none !important; }
  html body.storefront.v3 .site-header .brand { font-size: 18px; }
  html body.storefront.v3 .site-header .brand img { width: 40px; height: 40px; }
  html body.storefront.v3 .mobile-catalog-bar button { height: 40px; border-radius: 999px; background: var(--v3-soft); border: 0; color: var(--v3-ink); font-weight: 700; }
  html body.storefront.v3 .mobile-catalog-bar a { color: var(--v3-navy); font-weight: 700; font-size: 13px; }
}

/* Mobile bottom bar */
html body.storefront.v3 .mobile-store-bar { background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); border-top: 1px solid var(--v3-line); box-shadow: 0 -6px 20px rgba(4, 27, 65, .06); }
html body.storefront.v3 .mobile-store-bar a, html body.storefront.v3 .mobile-store-bar button { color: var(--v3-muted); font-size: 11.5px; font-weight: 600; }
html body.storefront.v3 .mobile-store-bar [aria-current="page"], html body.storefront.v3 .mobile-store-bar .is-current { color: var(--v3-navy); }
html body.storefront.v3 .mobile-store-bar [aria-current="page"] .mobile-bar-icon, html body.storefront.v3 .mobile-store-bar .is-current .mobile-bar-icon { background: var(--v3-lime); color: var(--v3-on-lime); }
html body.storefront.v3 .mobile-cart-badge { background: var(--v3-navy) !important; color: #fff !important; }

/* ---------- 5. Footer ---------- */
html body.storefront.v3 .footer { background: var(--v3-navy); color: #c9d3e5; margin-top: 0; padding-top: 56px; border: 0; }
html body.storefront.v3 .footer-grid { gap: 40px; }
html body.storefront.v3 .footer h3 { color: #fff; font-size: 15px; margin-bottom: 16px; }
html body.storefront.v3 .footer p, html body.storefront.v3 .footer-grid > div > a:not(.brand) { color: #aebad0; font-size: 13.5px; }
html body.storefront.v3 .footer-grid > div > a:not(.brand):hover { color: var(--v3-lime); }
html body.storefront.v3 .footer-grid > div > a svg, html body.storefront.v3 .managed-footer-contact svg { width: 17px; height: 17px; opacity: .8; }
html body.storefront.v3 .footer-logo-plate { background: #fff; border-radius: var(--v3-r); padding: 10px 14px; display: inline-flex; }
html body.storefront.v3 .payment-chip { border-color: rgba(255, 255, 255, .18); color: var(--v3-lime); background: rgba(255, 255, 255, .04); border-radius: 999px; padding: 6px 14px; }
html body.storefront.v3 .footer-bottom { border-top-color: rgba(255, 255, 255, .1); color: #8f9db6; font-size: 12.5px; }
html body.storefront.v3 .footer-bottom a { color: #aebad0; }

/* ---------- 6. The product card (one card everywhere) ---------- */
html body.storefront.v3 .v3c {
  position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%;
  background: #fff; border: 1px solid var(--v3-line); border-radius: var(--v3-r-lg); overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
html body.storefront.v3 .v3c:hover { box-shadow: var(--v3-shadow-hover); border-color: transparent; transform: translateY(-2px); }
html body.storefront.v3 .v3c-media { display: block; margin: 8px 8px 0; aspect-ratio: 1 / 1; background: var(--v3-soft); border-radius: var(--v3-r); overflow: hidden; }
html body.storefront.v3 .v3c-media img { width: 100%; height: 100%; object-fit: contain; padding: 12%; mix-blend-mode: multiply; transition: transform .35s ease; }
html body.storefront.v3 .v3c:hover .v3c-media img { transform: scale(1.04); }
html body.storefront.v3 .v3c-tags { position: absolute; top: 16px; inset-inline-start: 16px; display: flex; gap: 6px; z-index: 2; pointer-events: none; }
html body.storefront.v3 .v3c-off, html body.storefront.v3 .v3c-badge, html body.storefront.v3 .v3c-rank {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 800; line-height: 1;
}
html body.storefront.v3 .v3c-off { background: var(--v3-lime); color: var(--v3-on-lime); }
html body.storefront.v3 .v3c-badge { background: var(--v3-navy); color: #fff; }
html body.storefront.v3 .v3c-rank { background: #fff; color: var(--v3-navy); border: 1px solid var(--v3-line-2); min-width: 24px; justify-content: center; padding: 0 6px; }
html body.storefront.v3 .v3c-fav { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; margin: 0; }
html body.storefront.v3 .v3c-fav button, html body.storefront.v3 a.v3c-fav {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; padding: 0;
  background: rgba(255, 255, 255, .92); color: var(--v3-ink); border: 1px solid var(--v3-line); cursor: pointer;
}
html body.storefront.v3 .v3c-fav button:hover, html body.storefront.v3 a.v3c-fav:hover { color: var(--v3-danger); }
html body.storefront.v3 .v3c-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; gap: 2px; }
html body.storefront.v3 .v3c-brand { font-size: 12px; color: var(--v3-muted); font-weight: 600; }
html body.storefront.v3 .v3c-name { margin: 0; font-size: 14.5px; line-height: 1.55; font-weight: 700; min-height: calc(1.55em * 2); }
html body.storefront.v3 .v3c-name a { color: var(--v3-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body.storefront.v3 .v3c-name a:hover { color: var(--v3-navy); }
html body.storefront.v3 .v3c-opt { margin: 0; font-size: 12.5px; color: var(--v3-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.storefront.v3 .v3c-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
html body.storefront.v3 .v3c-foot form { margin: 0; flex: none; }
html body.storefront.v3 .v3c-price { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
html body.storefront.v3 .v3c-price strong { font-size: 17px; font-weight: 800; color: var(--v3-ink); white-space: nowrap; }
html body.storefront.v3 .v3c-price del { font-size: 12.5px; color: #98a2b3; white-space: nowrap; }
html body.storefront.v3 .v3c-add {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; padding: 0;
  background: var(--v3-navy); color: #fff; border: 0; cursor: pointer; transition: background .15s, transform .15s;
}
html body.storefront.v3 .v3c-add:hover { background: var(--v3-lime); color: var(--v3-on-lime); }
html body.storefront.v3 .v3c-add:active { transform: scale(.94); }
html body.storefront.v3 .v3c-add:disabled { background: var(--v3-soft-2); color: #a3adbd; cursor: not-allowed; }
html body.storefront.v3 .v3c-stock { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--v3-danger); }
html body.storefront.v3 .v3c.is-out .v3c-media img { opacity: .55; }
@media (max-width: 760px) {
  html body.storefront.v3 .v3c { border-radius: var(--v3-r); }
  html body.storefront.v3 .v3c-media { margin: 6px 6px 0; border-radius: 12px; }
  html body.storefront.v3 .v3c-tags { top: 12px; inset-inline-start: 12px; }
  html body.storefront.v3 .v3c-fav { top: 10px; inset-inline-end: 10px; }
  html body.storefront.v3 .v3c-fav button, html body.storefront.v3 a.v3c-fav { width: 30px; height: 30px; }
  html body.storefront.v3 .v3c-body { padding: 10px 10px 12px; }
  html body.storefront.v3 .v3c-name { font-size: 13px; }
  html body.storefront.v3 .v3c-price strong { font-size: 15px; }
  html body.storefront.v3 .v3c-add { width: 38px; height: 38px; border-radius: 12px; }
}

/* Grids and rails of cards */
html body.storefront.v3 .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v3-gap); }
html body.storefront.v3 .catalog-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1200px) { html body.storefront.v3 .catalog-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { html body.storefront.v3 .product-grid, html body.storefront.v3 .catalog-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { html body.storefront.v3 .product-grid, html body.storefront.v3 .catalog-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

html body.storefront.v3 .cs-wrap { position: relative; }
html body.storefront.v3 .cs-row, html body.storefront.v3 .v3-rail {
  display: grid !important; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * var(--v3-gap)) / 5);
  gap: var(--v3-gap) !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px 2px 14px !important; margin: 0 !important; flex-wrap: nowrap;
}
html body.storefront.v3 .cs-row::-webkit-scrollbar { display: none; }
html body.storefront.v3 .cs-row > * { scroll-snap-align: start; width: auto !important; max-width: none !important; min-width: 0 !important; }
@media (max-width: 1100px) { html body.storefront.v3 .cs-row { grid-auto-columns: calc((100% - 3 * var(--v3-gap)) / 4); } }
@media (max-width: 760px) { html body.storefront.v3 .cs-row { grid-auto-columns: 46%; } }
html body.storefront.v3 .cs-arrow {
  position: absolute; top: 40%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--v3-navy); border: 1px solid var(--v3-line); box-shadow: var(--v3-shadow-hover);
  display: grid; place-items: center; z-index: 3; cursor: pointer;
}
html body.storefront.v3 .cs-arrow[hidden] { display: none; }
html body.storefront.v3 .cs-arrow:hover { background: var(--v3-navy); color: #fff; border-color: var(--v3-navy); }
html body.storefront.v3 .cs-prev { inset-inline-start: -18px; }
html body.storefront.v3 .cs-next { inset-inline-end: -18px; }
@media (max-width: 760px) { html body.storefront.v3 .cs-arrow { display: none; } }

/* ---------- 7. Home ---------- */
html body.storefront.v3 .home-refresh, html body.storefront.v3 .home-signature, html body.storefront.v3 .home-refine-v3 { background: #fff; }
html body.storefront.v3 .image-slider { border-radius: var(--v3-r-xl); overflow: hidden; margin-top: 20px; box-shadow: none; }
html body.storefront.v3 .image-slider img { border-radius: 0; }
html body.storefront.v3 .slider-controls button { background: rgba(255, 255, 255, .9); color: var(--v3-navy); border: 0; }
/* Slider dots: the button stays a clear 44px tap area; only a small pill inside it is coloured
   (painting the whole button made big circles on top of the banner). */
html body.storefront.v3 .slider-controls .slide-dot { background: transparent !important; box-shadow: none !important; width: 28px; min-width: 28px; height: 32px; padding: 0; }
html body.storefront.v3 .slider-controls .slide-dot::after { content: ''; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(11, 22, 48, .25); transition: width .2s, background .2s; }
html body.storefront.v3 .slider-controls .slide-dot[aria-pressed="true"]::after { width: 22px; background: var(--v3-navy, #0b1630); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }

/* The home sections share one rhythm and no grey boxes. */
html body.storefront.v3 .home-refresh > .section, html body.storefront.v3 .home-refresh > .hb, html body.storefront.v3 .home-refresh > section.container { margin-top: var(--v3-section); margin-bottom: 0; }
html body.storefront.v3 .home-refresh > .hv-strip { margin-top: 20px; }
html body.storefront.v3 .hb-panel { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }

/* Benefits row */
html body.storefront.v3 .hb-benefits .hb-benefits-grid, html body.storefront.v3 .benefits-carousel .auto-track { gap: 12px; }
html body.storefront.v3 .hb-benefit, html body.storefront.v3 .benefit-card {
  background: var(--v3-soft) !important; border: 0 !important; border-radius: var(--v3-r) !important; box-shadow: none !important;
  padding: 16px !important; color: var(--v3-ink);
}
html body.storefront.v3 .hb-benefit-icon, html body.storefront.v3 .benefit-icon { background: #fff !important; color: var(--v3-navy) !important; border-radius: 12px !important; border: 0 !important; }
html body.storefront.v3 .hb-benefit b, html body.storefront.v3 .benefit-card b { font-size: 14px; color: var(--v3-ink); }
html body.storefront.v3 .hb-benefit small, html body.storefront.v3 .benefit-card p { font-size: 12.5px; color: var(--v3-muted); }

/* Categories */
html body.storefront.v3 .home-category-static {
  display: grid !important; grid-template-columns: none !important; grid-template-rows: auto !important; grid-auto-flow: column !important;
  grid-auto-columns: calc((100% - 7 * 12px) / 8) !important; gap: 12px !important;
  overflow-x: auto !important; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 2px 8px !important;
}
html body.storefront.v3 .home-category-static::-webkit-scrollbar { display: none; }
html body.storefront.v3 .home-category-static > * { scroll-snap-align: start; }
html body.storefront.v3 .category-tile {
  display: flex !important; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px 14px !important;
  background: #fff !important; border: 1px solid var(--v3-line) !important; border-radius: var(--v3-r-lg) !important; box-shadow: none !important;
  text-align: center; min-width: 0 !important; width: auto !important; transition: border-color .15s, box-shadow .15s, transform .15s;
}
html body.storefront.v3 .category-tile:hover { border-color: transparent !important; box-shadow: var(--v3-shadow-hover) !important; transform: translateY(-2px); background: #fff !important; }
html body.storefront.v3 .category-tile img { width: 64px !important; height: 64px !important; object-fit: contain; padding: 8px; background: var(--v3-soft); border-radius: 18px; margin: 0 !important; }
html body.storefront.v3 .category-tile b { font-size: 13px !important; line-height: 1.45; color: var(--v3-ink); font-weight: 700; }
@media (max-width: 1100px) { html body.storefront.v3 .home-category-static { grid-auto-columns: calc((100% - 5 * 12px) / 6) !important; } }
@media (max-width: 760px) {
  html body.storefront.v3 .home-category-static { grid-auto-columns: calc((100% - 4 * 8px) / 4.4) !important; gap: 8px !important; }
  html body.storefront.v3 .category-tile { padding: 10px 4px !important; border-radius: var(--v3-r) !important; gap: 6px; }
  html body.storefront.v3 .category-tile img { width: 52px !important; height: 52px !important; border-radius: 14px; }
  html body.storefront.v3 .category-tile b { font-size: 11.5px !important; }
}

/* Shortcuts */
html body.storefront.v3 .hv-shortcuts { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px !important; }
html body.storefront.v3 .hv-sc {
  display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 12px !important;
  min-height: 64px; padding: 12px 16px !important; border-radius: var(--v3-r-lg) !important;
  background: #fff !important; border: 1px solid var(--v3-line) !important; color: var(--v3-ink) !important; box-shadow: none !important;
}
html body.storefront.v3 .hv-sc:hover { border-color: var(--v3-navy) !important; }
html body.storefront.v3 .hv-sc svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--v3-soft); color: var(--v3-navy); }
html body.storefront.v3 .hv-sc-deals svg { background: #fff1e6; color: #c2410c; }
html body.storefront.v3 .hv-sc-inst svg { background: #eaf1ff; color: #1d4ed8; }
html body.storefront.v3 .hv-sc-new svg { background: #f3f9cf; color: #4d5c00; }
html body.storefront.v3 .hv-sc-track svg { background: #f1ecff; color: #6d28d9; }
html body.storefront.v3 .hv-sc b { font-size: 14px !important; color: var(--v3-ink) !important; }
@media (max-width: 760px) {
  html body.storefront.v3 .hv-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
  html body.storefront.v3 .hv-sc { min-height: 56px; padding: 8px 10px !important; gap: 8px !important; border-radius: var(--v3-r) !important; }
  html body.storefront.v3 .hv-sc svg { width: 34px; height: 34px; padding: 7px; }
  html body.storefront.v3 .hv-sc b { font-size: 13px !important; }
}

/* Installments banner */
html body.storefront.v3 .hb-inst {
  display: flex !important; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px !important;
  border-radius: var(--v3-r-xl) !important; background: var(--v3-navy) !important; color: #fff !important; border: 0 !important; box-shadow: none !important;
  background-image: radial-gradient(circle at 12% 120%, rgba(213, 248, 2, .22), transparent 45%) !important;
}
html body.storefront.v3 .hb-inst-text b { color: #fff !important; font-size: 24px !important; }
html body.storefront.v3 .hb-inst-text small { color: #c9d3e5 !important; font-size: 14px !important; }
html body.storefront.v3 .hb-inst-button { background: var(--v3-lime) !important; color: var(--v3-on-lime) !important; border-radius: 999px !important; padding: 10px 20px !important; font-weight: 800; display: inline-flex; margin-top: 12px; }
html body.storefront.v3 .hb-inst-badge { background: rgba(255, 255, 255, .08) !important; color: var(--v3-lime) !important; border-radius: 22px !important; }
@media (max-width: 760px) { html body.storefront.v3 .hb-inst { padding: 20px !important; } html body.storefront.v3 .hb-inst-text b { font-size: 19px !important; } }

/* Brands */
html body.storefront.v3 .hb-brands-grid { display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 10px !important; }
html body.storefront.v3 .hb-brands-grid a {
  display: grid; place-items: center; min-height: 64px; padding: 8px !important; border-radius: var(--v3-r) !important;
  background: #fff !important; border: 1px solid var(--v3-line) !important; box-shadow: none !important;
}
html body.storefront.v3 .hb-brands-grid a:hover { border-color: var(--v3-navy) !important; }
html body.storefront.v3 .hb-brands-grid b { font-size: 15px; color: var(--v3-ink); font-weight: 800; }
@media (max-width: 760px) {
  html body.storefront.v3 .hb-brands-grid { display: flex !important; overflow-x: auto; scrollbar-width: none; }
  html body.storefront.v3 .hb-brands-grid a { flex: none; min-width: 108px; min-height: 52px; }
}

/* Deals timer */
html body.storefront.v3 .hb-timer { background: var(--v3-navy) !important; color: #fff !important; border-radius: 999px !important; padding: 6px 14px !important; }
html body.storefront.v3 .hb-timer-digits i { background: rgba(255, 255, 255, .1) !important; color: var(--v3-lime) !important; border-radius: 8px !important; }
html body.storefront.v3 .hb-deals-more { margin-top: 6px; text-align: center; }

/* Budget */
html body.storefront.v3 .hb-budget-grid { gap: 12px !important; }
html body.storefront.v3 .hb-budget-grid a {
  background: var(--v3-soft) !important; border: 1px solid transparent !important; border-radius: var(--v3-r-lg) !important;
  padding: 18px 12px !important; box-shadow: none !important; color: var(--v3-ink) !important; text-align: center;
}
html body.storefront.v3 .hb-budget-grid a:hover { background: #fff !important; border-color: var(--v3-navy) !important; }
html body.storefront.v3 .hb-budget-grid b { font-size: 30px !important; color: var(--v3-navy) !important; font-weight: 800; }
html body.storefront.v3 .hb-budget-grid small, html body.storefront.v3 .hb-budget-grid em { color: var(--v3-muted) !important; font-style: normal; }

/* Reviews */
html body.storefront.v3 .hb-reviews-row { gap: 12px !important; }
html body.storefront.v3 .hb-review { background: var(--v3-soft) !important; border: 0 !important; border-radius: var(--v3-r-lg) !important; box-shadow: none !important; padding: 18px !important; }
html body.storefront.v3 .hb-stars { color: #f5b301 !important; }
html body.storefront.v3 .hb-review-text { color: var(--v3-text) !important; font-size: 14px; }

/* Benefits band: no full-width grey band in v3 */
html body.storefront.v3 .benefits-carousel, html body.storefront.v3 .hb-benefits { background: none !important; border: 0 !important; padding-block: 0 !important; box-shadow: none !important; }
html body.storefront.v3 .benefits-carousel::before, html body.storefront.v3 .benefits-carousel::after, html body.storefront.v3 .hb-benefits::before, html body.storefront.v3 .hb-benefits::after { display: none !important; }

/* Closing blocks: offers / installments paths and the help card */
html body.storefront.v3 .signature-paths { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--v3-gap) !important; }
html body.storefront.v3 .signature-path {
  display: flex !important; align-items: center; gap: 16px; padding: 24px !important; min-height: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important;
  border-radius: var(--v3-r-xl) !important; border: 1px solid var(--v3-line) !important; background: var(--v3-soft) !important; color: var(--v3-ink) !important; box-shadow: none !important;
}
html body.storefront.v3 .signature-path-dark { background: var(--v3-navy) !important; border-color: var(--v3-navy) !important; color: #fff !important; }
html body.storefront.v3 .signature-path h2 { font-size: 20px !important; margin: 2px 0 !important; color: inherit !important; }
html body.storefront.v3 .signature-path p { margin: 0 !important; font-size: 13.5px; color: inherit !important; opacity: .78; }
html body.storefront.v3 .signature-path-icon { flex: none; width: 52px !important; height: 52px !important; border-radius: 16px !important; display: grid !important; place-items: center; background: #fff !important; color: var(--v3-navy) !important; }
html body.storefront.v3 .signature-path-dark .signature-path-icon { background: rgba(255, 255, 255, .1) !important; color: var(--v3-lime) !important; }
html body.storefront.v3 .signature-kicker { font-size: 12.5px; font-weight: 700; color: inherit; opacity: .8; }
html body.storefront.v3 .signature-help {
  display: flex !important; align-items: center; gap: 18px; padding: 24px 28px !important; margin-top: var(--v3-gap) !important;
  border-radius: var(--v3-r-xl) !important; background: var(--v3-soft) !important; border: 0 !important; box-shadow: none !important;
}
html body.storefront.v3 .signature-help > div:nth-child(2) { flex: 1; }
html body.storefront.v3 .signature-help h2 { font-size: 20px !important; margin: 0 !important; }
html body.storefront.v3 .signature-help p { margin: 2px 0 0 !important; font-size: 13.5px; }
html body.storefront.v3 .signature-help-icon { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--v3-lime) !important; color: var(--v3-on-lime) !important; }
@media (max-width: 760px) { html body.storefront.v3 .signature-help { flex-wrap: wrap; padding: 18px !important; } html body.storefront.v3 .signature-help .button { width: 100%; } }

/* Track + delivery strip */
html body.storefront.v3 .hv-strip > .container, html body.storefront.v3 .hv-strip > .hb { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
html body.storefront.v3 .hb-track-card { border: 1px solid var(--v3-line) !important; border-radius: var(--v3-r-lg) !important; box-shadow: var(--v3-shadow) !important; }
html body.storefront.v3 .hv-bar { border-radius: var(--v3-r-lg) !important; background: var(--v3-navy) !important; color: #c9d3e6 !important; margin: 0; }
html body.storefront.v3 .hv-bar-text b { color: #fff !important; }

/* Custom banners and banner groups */
html body.storefront.v3 .custom-banner img, html body.storefront.v3 .bc-card, html body.storefront.v3 .bc-card img { border-radius: var(--v3-r-xl) !important; }

/* Recently viewed + misc rows */
html body.storefront.v3 .hv-recent-row { gap: var(--v3-gap) !important; }

/* Home closing blocks (help / contact) */
html body.storefront.v3 .home-refresh :is(.growth-cta, .help-banner, .contact-banner) { border-radius: var(--v3-r-xl) !important; }

/* ---------- 8. Catalog ---------- */
html body.storefront.v3 .catalog-page .section-heading { margin-bottom: 20px; }
html body.storefront.v3 .catalog-layout { grid-template-columns: 264px minmax(0, 1fr); gap: 28px; align-items: start; }
html body.storefront.v3 .filters.panel { position: sticky; top: 132px; padding: 20px; border-radius: var(--v3-r-lg); box-shadow: none; }
html body.storefront.v3 .filters h3 { font-size: 16px; }
html body.storefront.v3 .filters label { margin-bottom: 14px; }
html body.storefront.v3 .catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--v3-soft) !important; border: 0 !important; border-radius: var(--v3-r) !important; padding: 10px 14px !important; margin-bottom: 18px;
}
html body.storefront.v3 .catalog-toolbar select { min-height: 40px !important; background: #fff; }
html body.storefront.v3 .active-filters a, html body.storefront.v3 .active-filters span { border-radius: 999px; background: #fff; border: 1px solid var(--v3-line-2); }
html body.storefront.v3 .subcategory-card { border-radius: var(--v3-r) !important; border: 1px solid var(--v3-line) !important; background: #fff !important; box-shadow: none !important; }
html body.storefront.v3 .subcategory-card:hover { border-color: var(--v3-navy) !important; }
html body.storefront.v3 .pagination { gap: 10px; }
html body.storefront.v3 .pagination a, html body.storefront.v3 .pagination span { border-radius: 999px; }
@media (max-width: 1000px) { html body.storefront.v3 .catalog-layout { grid-template-columns: 1fr; } html body.storefront.v3 .filters.panel { position: static; } }

/* ---------- 9. Cart, checkout, order ---------- */
html body.storefront.v3 .checkout-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
html body.storefront.v3 .summary { position: sticky; top: 132px; }
html body.storefront.v3 .summary h2 { font-size: 19px; }
html body.storefront.v3 .summary > div:not(.alert) { font-size: 14px; border-bottom-color: var(--v3-line); }
html body.storefront.v3 .summary .summary-total { font-size: 18px; color: var(--v3-ink); }
html body.storefront.v3 .summary .summary-total b { font-size: 20px; }
html body.storefront.v3 .fulfillment-choices label {
  border-radius: var(--v3-r) !important; border: 1px solid var(--v3-line-2) !important; padding: 16px !important; font-size: 14.5px;
}
html body.storefront.v3 .fulfillment-choices label:has(input:checked) { border-color: var(--v3-navy) !important; background: #f8fbe6 !important; box-shadow: 0 0 0 3px rgba(213, 248, 2, .35); }
html body.storefront.v3 .payment-option { border-radius: var(--v3-r) !important; border: 1px solid var(--v3-line-2) !important; background: #fff !important; }
html body.storefront.v3 .payment-option:has(input:checked) { border-color: var(--v3-navy) !important; background: #f8fbe6 !important; }
html body.storefront.v3 .line-item { border-bottom-color: var(--v3-line); }
html body.storefront.v3 .order-number { color: var(--v3-muted); font-size: 15px; }
html body.storefront.v3 .timeline > div { border-inline-start-color: var(--v3-line-2); }
html body.storefront.v3 .timeline > div::before { background: var(--v3-navy); box-shadow: 0 0 0 3px var(--v3-lime); }
@media (max-width: 1000px) { html body.storefront.v3 .checkout-layout { grid-template-columns: 1fr; } html body.storefront.v3 .summary { position: static; } }

/* ---------- 10. Account, auth, static pages ---------- */
html body.storefront.v3 .auth-card { border-radius: var(--v3-r-xl); padding: 36px; box-shadow: var(--v3-shadow-hover); border: 1px solid var(--v3-line); }
html body.storefront.v3 .auth-card h1 { font-size: 26px; }
html body.storefront.v3 .prose { border-radius: var(--v3-r-xl); }
html body.storefront.v3 .prose .preline { font-size: 15.5px; line-height: 2.1; color: var(--v3-text); }
html body.storefront.v3 .contact-grid { gap: 40px; }

/* ---------- 11. Product page (keeps its layout, shares the tokens) ---------- */
html body.storefront.v3 .pv6-gallery, html body.storefront.v3 .pv6-main-img, html body.storefront.v3 .pv5-gallery { border-radius: var(--v3-r-xl) !important; }
html body.storefront.v3 .pv6-buy .button, html body.storefront.v3 .pv6-actions .button { min-height: 52px; border-radius: 14px; }

/* ---------- 12. Preview notice ---------- */
.design-preview-bar { position: sticky; top: 0; z-index: 60; padding: 8px 16px; text-align: center; font-size: 13px; font-weight: 700; background: #d5f802; color: #041b41; }
.design-preview-bar a { color: #041b41; text-decoration: underline; margin-inline-start: 8px; }
@media (min-width: 761px) { html body.storefront.v3 .design-preview-bar ~ .site-header { top: 36px; } }
@media (max-width: 760px) { html body.storefront.v3 .site-header { top: 0 !important; } .design-preview-bar { position: relative; } }