/* ============================================================================
   Storefront page skin
   ----------------------------------------------------------------------------
   Loaded on the supporting pages (cart, orders, profile, FAQ, notifications and
   the customer auth screens) only when a custom retail storefront template is
   active. Colours already arrive through the --theme-* palette that
   includes/head-common.php feeds to js/theme-loader.js; this file supplies the
   shape and typography that a palette alone cannot express, so the pages read
   as part of the Aura / Selene storefront instead of the default theme.
   ========================================================================== */

:root[data-storefront-theme] {
  --sfp-radius: 9px;
  --sfp-radius-sm: 6px;
  --sfp-heading: "Archivo", "Inter", system-ui, sans-serif;
  --sfp-body: "Inter", system-ui, sans-serif;
  --sfp-heading-weight: 700;
  --sfp-heading-spacing: -0.01em;
  --sfp-label-spacing: .09em;
  --sfp-line: var(--theme-border, #e7e3e5);
  --sfp-wash: var(--theme-surface-muted, #faf6f8);
  --sfp-paper: var(--theme-surface, #fff);
  --sfp-ink: var(--theme-text, #171717);
  --sfp-muted: var(--theme-text-muted, #6d6d6d);
  --sfp-accent: var(--theme-primary, #e11d74);
  --sfp-shadow: 0 18px 42px rgba(29, 20, 25, .09);
  --sfp-transition: .22s cubic-bezier(.4, 0, .2, 1);
}

:root[data-storefront-theme="selene_beauty"] {
  --sfp-radius: 2px;
  --sfp-radius-sm: 2px;
  --sfp-heading: "Playfair Display", Georgia, serif;
  --sfp-body: "Jost", system-ui, sans-serif;
  --sfp-heading-weight: 500;
  --sfp-heading-spacing: 0;
  --sfp-label-spacing: .13em;
  --sfp-shadow: 0 20px 55px rgba(48, 35, 40, .08);
}

:root[data-storefront-theme="giva_luxe"] {
  --sfp-radius: 16px;
  --sfp-radius-sm: 999px;
  --sfp-heading: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --sfp-body: "Mulish", "Inter", system-ui, sans-serif;
  --sfp-heading-weight: 400;
  --sfp-heading-spacing: .01em;
  --sfp-label-spacing: .07em;
  --sfp-shadow: 0 18px 46px rgba(20, 69, 61, .09);
}
/* Pill buttons and inputs, matching the storefront's controls. */
:root[data-storefront-theme="giva_luxe"] .btn,
:root[data-storefront-theme="giva_luxe"] .form-control,
:root[data-storefront-theme="giva_luxe"] .form-select {
  border-radius: 999px;
  text-transform: none;
  letter-spacing: .04em;
}

/* ---------- Typography ---------------------------------------------------- */

:root[data-storefront-theme] body {
  font-family: var(--sfp-body);
  letter-spacing: .005em;
}

:root[data-storefront-theme] h1, :root[data-storefront-theme] h2,
:root[data-storefront-theme] h3, :root[data-storefront-theme] h4,
:root[data-storefront-theme] h5, :root[data-storefront-theme] h6,
:root[data-storefront-theme] .h1, :root[data-storefront-theme] .h2,
:root[data-storefront-theme] .h3, :root[data-storefront-theme] .h4,
:root[data-storefront-theme] .h5, :root[data-storefront-theme] .h6,
:root[data-storefront-theme] .card-title,
:root[data-storefront-theme] .modal-title {
  font-family: var(--sfp-heading);
  font-weight: var(--sfp-heading-weight);
  letter-spacing: var(--sfp-heading-spacing);
}

:root[data-storefront-theme] .text-muted,
:root[data-storefront-theme] .small,
:root[data-storefront-theme] small { color: var(--sfp-muted) !important; }

/* ---------- Buttons ------------------------------------------------------- */

:root[data-storefront-theme] .btn {
  --bs-btn-border-radius: var(--sfp-radius-sm);
  border-radius: var(--sfp-radius-sm);
  font-family: var(--sfp-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--sfp-label-spacing);
  text-transform: uppercase;
  padding: 11px 20px;
  transition: background var(--sfp-transition), border-color var(--sfp-transition), color var(--sfp-transition);
}
:root[data-storefront-theme] .btn-sm { padding: 7px 13px; font-size: 11px; }
:root[data-storefront-theme] .btn-lg { padding: 14px 26px; font-size: 13px; }
:root[data-storefront-theme] .btn.btn-link { text-transform: none; letter-spacing: 0; }

:root[data-storefront-theme] .btn-primary,
:root[data-storefront-theme] .btn-success {
  border-color: var(--sfp-accent);
  background: var(--sfp-accent);
  color: #fff;
}
:root[data-storefront-theme] .btn-primary:hover,
:root[data-storefront-theme] .btn-primary:focus,
:root[data-storefront-theme] .btn-success:hover {
  border-color: var(--sfp-ink);
  background: var(--sfp-ink);
  color: #fff;
}
:root[data-storefront-theme] .btn-outline-primary,
:root[data-storefront-theme] .btn-outline-secondary {
  border-color: var(--sfp-line);
  background: transparent;
  color: var(--sfp-ink);
}
:root[data-storefront-theme] .btn-outline-primary:hover,
:root[data-storefront-theme] .btn-outline-secondary:hover {
  border-color: var(--sfp-accent);
  background: var(--sfp-accent);
  color: #fff;
}
:root[data-storefront-theme] .btn-light,
:root[data-storefront-theme] .btn-secondary {
  border-color: var(--sfp-line);
  background: var(--sfp-paper);
  color: var(--sfp-ink);
}
:root[data-storefront-theme] .btn-secondary:hover,
:root[data-storefront-theme] .btn-secondary:focus {
  border-color: var(--sfp-ink);
  background: var(--sfp-ink);
  color: #fff;
}

/* ---------- Surfaces ------------------------------------------------------ */

:root[data-storefront-theme] .card,
:root[data-storefront-theme] .modal-content,
:root[data-storefront-theme] .offcanvas,
:root[data-storefront-theme] .dropdown-menu,
:root[data-storefront-theme] .list-group,
:root[data-storefront-theme] .toast {
  border-radius: var(--sfp-radius);
  border-color: var(--sfp-line);
}
:root[data-storefront-theme] .card {
  background: var(--sfp-paper);
  box-shadow: none;
}
:root[data-storefront-theme] .card.shadow,
:root[data-storefront-theme] .card.shadow-sm { box-shadow: var(--sfp-shadow) !important; }
:root[data-storefront-theme] .card-header,
:root[data-storefront-theme] .card-footer {
  border-color: var(--sfp-line);
  background: transparent;
}
:root[data-storefront-theme] .rounded,
:root[data-storefront-theme] .rounded-2,
:root[data-storefront-theme] .rounded-3 { border-radius: var(--sfp-radius) !important; }
:root[data-storefront-theme] .border { border-color: var(--sfp-line) !important; }
:root[data-storefront-theme] .bg-light,
:root[data-storefront-theme] .bg-body-tertiary { background: var(--sfp-wash) !important; }

/* ---------- Forms --------------------------------------------------------- */

:root[data-storefront-theme] .form-control,
:root[data-storefront-theme] .form-select,
:root[data-storefront-theme] .input-group-text {
  border-radius: var(--sfp-radius-sm);
  border-color: var(--sfp-line);
  font-family: var(--sfp-body);
  font-size: 14px;
}
:root[data-storefront-theme] .form-control:focus,
:root[data-storefront-theme] .form-select:focus {
  border-color: var(--sfp-accent);
  box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 225, 29, 116), .14);
}
:root[data-storefront-theme] .form-label,
:root[data-storefront-theme] .form-floating > label {
  color: var(--sfp-muted);
  font-size: 13px;
}
:root[data-storefront-theme] .form-check-input:checked {
  border-color: var(--sfp-accent);
  background-color: var(--sfp-accent);
}

/* ---------- Tables, badges, alerts, accordions ---------------------------- */

:root[data-storefront-theme] .table { --bs-table-border-color: var(--sfp-line); }
:root[data-storefront-theme] .table > thead th {
  border-bottom-color: var(--sfp-line);
  background: var(--sfp-wash);
  color: var(--sfp-ink);
  font-family: var(--sfp-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--sfp-label-spacing);
  text-transform: uppercase;
}

:root[data-storefront-theme] .badge {
  border-radius: calc(var(--sfp-radius-sm) * .8);
  font-weight: 600;
  letter-spacing: .05em;
}
:root[data-storefront-theme] .badge.bg-primary { background: var(--sfp-accent) !important; }

:root[data-storefront-theme] .alert {
  border-radius: var(--sfp-radius);
  border-color: var(--sfp-line);
  font-size: 14px;
}
:root[data-storefront-theme] .alert-heading { font-family: var(--sfp-heading); }

:root[data-storefront-theme] .accordion {
  --bs-accordion-border-color: var(--sfp-line);
  --bs-accordion-border-radius: var(--sfp-radius);
  --bs-accordion-btn-focus-box-shadow: none;
}
:root[data-storefront-theme] .accordion-item { background: var(--sfp-paper); }
:root[data-storefront-theme] .accordion-button {
  font-family: var(--sfp-heading);
  font-size: 16px;
  font-weight: var(--sfp-heading-weight);
}
/* css/style.css forces the accordion button colours with !important, so the
   open-state accent has to be raised to match. */
:root[data-storefront-theme] .accordion-button {
  background-color: var(--sfp-paper) !important;
  color: var(--sfp-ink) !important;
}
:root[data-storefront-theme] .accordion-button:not(.collapsed) {
  background-color: var(--sfp-wash) !important;
  color: var(--sfp-accent) !important;
  box-shadow: none;
}
:root[data-storefront-theme] .accordion-body,
:root[data-storefront-theme] .accordion-body p { color: var(--sfp-muted) !important; font-size: 14px; }

:root[data-storefront-theme] .nav-tabs { --bs-nav-tabs-border-color: var(--sfp-line); }
:root[data-storefront-theme] .nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--sfp-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--sfp-label-spacing);
  text-transform: uppercase;
}
:root[data-storefront-theme] .nav-tabs .nav-link.active {
  border-bottom-color: var(--sfp-accent);
  background: transparent;
  color: var(--sfp-ink);
}

:root[data-storefront-theme] .list-group-item { border-color: var(--sfp-line); }
:root[data-storefront-theme] .breadcrumb { font-size: 12px; letter-spacing: .04em; }

/* ---------- Themed header (templates/partials/storefront-header.php) ------ */

:root[data-storefront-theme] .sfh-announcement {
  position: relative;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 44px;
  background: var(--sfp-ink);
  color: #fff;
  font-size: 12px;
  letter-spacing: .055em;
  text-align: center;
}
:root[data-storefront-theme] .sfh-announcement[hidden] { display: none; }
:root[data-storefront-theme] .sfh-announcement-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 32px; }
:root[data-storefront-theme] .sfh-announcement-close {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 12px;
  opacity: .7;
  transform: translateY(-50%);
}
:root[data-storefront-theme] .sfh-announcement-close:hover { background: rgba(255, 255, 255, .14); opacity: 1; }
:root[data-storefront-theme] .sfh-announcement a {
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
}
:root[data-storefront-theme] .sfh-announcement strong { color: #ffd8e8; font-weight: 600; }
:root[data-storefront-theme="selene_beauty"] .sfh-announcement strong { color: #f3d8dc; font-weight: 500; }

:root[data-storefront-theme] .sfh-header {
  position: sticky;
  z-index: 500;
  top: 0;
  border-bottom: 1px solid var(--sfp-line);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(14px);
}
:root[data-storefront-theme] .sfh-main {
  width: min(100%, 1400px);
  min-height: 60px;
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(240px, 520px) minmax(200px, auto);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
:root[data-storefront-theme] .sfh-icon-button {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--sfp-ink);
  font-size: 24px;
}
:root[data-storefront-theme] .sfh-brand {
  display: inline-flex;
  width: fit-content;
  max-width: 260px;
  flex-direction: column;
  justify-content: center;
  color: var(--sfp-ink);
  font-family: var(--sfp-heading);
  font-size: 18px;
  font-weight: var(--sfp-heading-weight);
  letter-spacing: .1em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}
:root[data-storefront-theme] .sfh-brand img { width: auto; max-width: 180px; height: 50px; object-fit: contain; object-position: left center; }

:root[data-storefront-theme] .sfh-search { position: relative; }
:root[data-storefront-theme] .sfh-search .search-form {
  height: 38px;
  gap: 9px;
  padding: 0 5px 0 13px;
  border: 1px solid var(--sfp-line);
  border-radius: var(--sfp-radius-sm);
  background: var(--sfp-wash);
}
:root[data-storefront-theme] .sfh-search .sfh-search-icon { color: var(--sfp-muted); }
:root[data-storefront-theme] .sfh-search input {
  flex: 1;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--sfp-ink);
  font-family: var(--sfp-body);
  font-size: 14px;
  outline: none;
}
:root[data-storefront-theme] .sfh-search .search-form > button {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: calc(var(--sfp-radius-sm) * .8);
  background: var(--sfp-ink);
  color: #fff;
}

:root[data-storefront-theme] .sfh-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
:root[data-storefront-theme] .sfh-action-wrap { position: relative; }
:root[data-storefront-theme] .sfh-action {
  position: relative;
  display: flex;
  min-width: 52px;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 7px;
  color: var(--sfp-ink);
  font-size: 9px;
  letter-spacing: .04em;
  text-decoration: none;
}
:root[data-storefront-theme] .sfh-action i { font-size: 17px; line-height: 1; }
:root[data-storefront-theme] .sfh-action:hover { color: var(--sfp-accent); }
:root[data-storefront-theme] .sfh-count {
  position: absolute;
  top: -1px;
  right: 6px;
  min-width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--sfp-accent);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

/* Category bar + mega panels */
:root[data-storefront-theme] .sfh-catnav { position: relative; border-top: 1px solid var(--sfp-line); }
:root[data-storefront-theme] .sfh-catnav-inner {
  width: min(100%, 1400px);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
:root[data-storefront-theme] .sfh-catnav-dynamic { display: contents; }
:root[data-storefront-theme] .sfh-cat-menu { position: static; }
:root[data-storefront-theme] .sfh-cat {
  position: relative;
  display: inline-flex;
  height: 38px;
  align-items: center;
  gap: 6px;
  padding: 0 17px;
  color: var(--sfp-ink);
  font-family: var(--sfp-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--sfp-label-spacing);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
:root[data-storefront-theme="selene_beauty"] .sfh-cat { font-family: var(--sfp-body); font-weight: 500; }
:root[data-storefront-theme] .sfh-cat i { font-size: 11px; transition: transform var(--sfp-transition); }
:root[data-storefront-theme] .sfh-cat::after {
  content: '';
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 0;
  height: 2px;
  background: var(--sfp-accent);
  transform: scaleX(0);
  transition: transform var(--sfp-transition);
}
:root[data-storefront-theme] .sfh-cat:hover::after,
:root[data-storefront-theme] .sfh-cat-menu:hover .sfh-cat::after { transform: scaleX(1); }
:root[data-storefront-theme] .sfh-cat-menu:hover .sfh-cat i { transform: rotate(180deg); }

:root[data-storefront-theme] .sfh-mega {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 100%;
  border-top: 1px solid var(--sfp-line);
  background: var(--sfp-paper);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--sfp-transition), transform var(--sfp-transition), visibility var(--sfp-transition);
}
:root[data-storefront-theme] .sfh-cat-menu:hover > .sfh-mega,
:root[data-storefront-theme] .sfh-cat-menu:focus-within > .sfh-mega { opacity: 1; visibility: visible; transform: none; }
:root[data-storefront-theme] .sfh-mega-inner {
  width: min(100%, 1400px);
  margin-inline: auto;
  padding: 30px 24px 34px;
}
:root[data-storefront-theme] .sfh-mega-columns,
:root[data-storefront-theme] .sfh-mega-flat {
  display: grid;
  align-content: start;
  max-height: min(60vh, 460px);
  overflow-y: auto;
}
:root[data-storefront-theme] .sfh-mega-columns { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px 26px; }
:root[data-storefront-theme] .sfh-mega-flat { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px 24px; }
:root[data-storefront-theme] .sfh-mega-title {
  display: block;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--sfp-line);
  color: var(--sfp-ink);
  font-family: var(--sfp-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}
:root[data-storefront-theme] .sfh-mega-column ul { margin: 0; padding: 0; list-style: none; }
:root[data-storefront-theme] .sfh-mega-link {
  display: block;
  padding: 4px 0 4px calc(var(--sfh-depth, 0) * 12px);
  color: var(--sfp-muted);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--sfp-transition), padding-left var(--sfp-transition);
}
:root[data-storefront-theme] .sfh-mega-link:hover { color: var(--sfp-ink); padding-left: calc(5px + (var(--sfh-depth, 0) * 12px)); }
:root[data-storefront-theme] .sfh-mega-link.is-all { color: var(--sfp-ink); font-weight: 500; }
:root[data-storefront-theme] .sfh-mega-flat-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  color: var(--sfp-muted);
  font-size: 13.5px;
  text-decoration: none;
  transition: color var(--sfp-transition), padding-left var(--sfp-transition);
}
:root[data-storefront-theme] .sfh-mega-flat-link:hover { color: var(--sfp-accent); padding-left: 5px; }
:root[data-storefront-theme] .sfh-mega-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--sfp-line); }
:root[data-storefront-theme] .sfh-mega-flat-link:hover .sfh-mega-dot { background: var(--sfp-accent); }

/* Drawer */
:root[data-storefront-theme] .sfh-scrim { position: fixed; z-index: 900; inset: 0; background: rgba(14, 10, 12, .48); }
:root[data-storefront-theme] .sfh-drawer {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: min(400px, 92vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--sfp-paper);
  box-shadow: 20px 0 60px rgba(0, 0, 0, .16);
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform .27s ease, visibility .27s;
}
:root[data-storefront-theme] .sfh-drawer.is-open { transform: translateX(0); visibility: visible; }
:root[data-storefront-theme] .sfh-drawer-head {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--sfp-line);
}
:root[data-storefront-theme] .sfh-drawer-head strong { font-family: var(--sfp-heading); font-size: 18px; }
:root[data-storefront-theme] .sfh-drawer-head button { width: 42px; height: 42px; border: 0; background: transparent; font-size: 28px; }
:root[data-storefront-theme] .sfh-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
:root[data-storefront-theme] .sfh-drawer-link {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--sfp-line);
  color: var(--sfp-ink);
  text-decoration: none;
}
:root[data-storefront-theme] .sfh-drawer-group { border-bottom: 1px solid var(--sfp-line); }
:root[data-storefront-theme] .sfh-drawer-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border: 0;
  background: transparent;
  color: var(--sfp-ink);
  font-weight: 700;
  text-align: left;
}
:root[data-storefront-theme] .sfh-drawer-toggle i { transition: transform var(--sfp-transition); }
:root[data-storefront-theme] .sfh-drawer-group.is-open .sfh-drawer-toggle i { transform: rotate(180deg); }
:root[data-storefront-theme] .sfh-drawer-panel { display: none; padding: 0 0 12px 12px; }
:root[data-storefront-theme] .sfh-drawer-group.is-open .sfh-drawer-panel { display: block; }
:root[data-storefront-theme] .sfh-drawer-sublink {
  display: block;
  padding: 8px 0 8px calc(var(--sfh-depth, 0) * 14px);
  color: var(--sfp-muted);
  font-size: 13px;
  text-decoration: none;
}
:root[data-storefront-theme] .sfh-drawer-sublink.is-heading { color: var(--sfp-ink); font-weight: 600; padding-top: 12px; }

/* The default layout offsets content to clear the old position:fixed header.
   The themed header is sticky and sits in the flow, so those offsets go. */
:root[data-storefront-theme] #main,
:root[data-storefront-theme] main#main { margin-top: 0 !important; padding-top: 0; }
:root[data-storefront-theme] #cartPageContainer,
:root[data-storefront-theme] #placedOrderPageContainer {
  margin-top: 0 !important;
  height: auto !important;
  min-height: 60vh;
}
/* The header is in the flow here, so a fixed vh offset cannot know its height. Let the
   page body fill the viewport and the content area take whatever the header leaves. */
:root[data-storefront-theme] body.cart-page,
:root[data-storefront-theme] body.placed-orders-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
:root[data-storefront-theme] body.cart-page > #cartPageContainer,
:root[data-storefront-theme] body.placed-orders-page > #placedOrderPageContainer {
  flex: 1 0 auto;
  width: 100%;
}

@media (max-width: 992px) {
  :root[data-storefront-theme] .sfh-catnav { display: none; }
  :root[data-storefront-theme] .sfh-icon-button { display: inline-flex; }
  /* Row one keeps the standard header height once the search wraps below it. */
  :root[data-storefront-theme] .sfh-main { grid-template-columns: 40px 1fr auto; grid-template-rows: 56px auto; gap: 0 10px; min-height: 56px; padding-inline: 15px; }
  :root[data-storefront-theme] .sfh-brand { align-items: center; justify-self: center; max-width: 160px; font-size: 15px; text-align: center; }
  :root[data-storefront-theme] .sfh-brand img { max-width: 140px; height: 50px; object-position: center; }
  :root[data-storefront-theme] .sfh-search { grid-column: 1 / -1; grid-row: 2; margin-bottom: 9px; }
  :root[data-storefront-theme] .sfh-search .search-form { height: 36px; }
  :root[data-storefront-theme] .sfh-action-desktop { display: none; }
  :root[data-storefront-theme] .sfh-action { min-width: 44px; }
  :root[data-storefront-theme] .sfh-action span { display: none; }
  :root[data-storefront-theme] .sfh-announcement .sfh-announcement-secondary { display: none; }
}

/* ---------- Site chrome (default header, still used in wholesale mode) ---- */

:root[data-storefront-theme] #header.header {
  border-bottom: 1px solid var(--sfp-line);
  background: var(--sfp-paper);
  box-shadow: none;
}
:root[data-storefront-theme] #header .logo span {
  font-family: var(--sfp-heading);
  font-weight: var(--sfp-heading-weight);
  letter-spacing: .06em;
  text-transform: uppercase;
}
:root[data-storefront-theme] #header .nav-link { color: var(--sfp-ink); }
:root[data-storefront-theme] #header .nav-link:hover { color: var(--sfp-accent); }
:root[data-storefront-theme] #header .search-form {
  border-radius: var(--sfp-radius-sm);
  border: 1px solid var(--sfp-line);
  background: var(--sfp-wash);
}

:root[data-storefront-theme] .footer {
  border-top: 1px solid var(--sfp-line);
  background: var(--sfp-wash);
  color: var(--sfp-muted);
}
:root[data-storefront-theme] .footer h4,
:root[data-storefront-theme] .footer h5 {
  font-family: var(--sfp-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--sfp-label-spacing);
  text-transform: uppercase;
}
:root[data-storefront-theme] .footer a,
:root[data-storefront-theme] .footer p { color: var(--sfp-muted) !important; }
:root[data-storefront-theme] .footer a:hover { color: var(--sfp-accent) !important; }

:root[data-storefront-theme] .bottom-cart-bar {
  border-top: 1px solid var(--sfp-line);
  background: var(--sfp-ink);
  color: #fff;
}
:root[data-storefront-theme] .bottom-cart-bar a,
:root[data-storefront-theme] .bottom-cart-bar .cart-icon { color: inherit; }

/* ---------- Cart, orders, profile ---------------------------------------- */

:root[data-storefront-theme] .see-all-link,
:root[data-storefront-theme] .category-heading-link {
  color: var(--sfp-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--sfp-label-spacing);
  text-transform: uppercase;
}
:root[data-storefront-theme] .selling-price {
  font-family: var(--sfp-heading);
  font-weight: 700;
}
:root[data-storefront-theme] .product-title,
:root[data-storefront-theme] .product-name { font-family: var(--sfp-body); }
:root[data-storefront-theme] .order-card,
:root[data-storefront-theme] .profile-card,
:root[data-storefront-theme] .summary-card {
  border-radius: var(--sfp-radius);
  border-color: var(--sfp-line);
}

/* ---------- Customer auth screens ---------------------------------------- */

:root[data-storefront-theme] .auth-page {
  background:
    radial-gradient(circle at top left, rgba(var(--theme-primary-rgb, 225, 29, 116), .10), transparent 32rem),
    linear-gradient(135deg, var(--sfp-paper) 0%, var(--sfp-wash) 55%, var(--sfp-paper) 100%);
  color: var(--sfp-ink);
}
:root[data-storefront-theme] .auth-brand-panel {
  border-right: 1px solid var(--sfp-line);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .3)),
    linear-gradient(135deg, rgba(var(--theme-primary-rgb, 225, 29, 116), .14), var(--sfp-wash));
}
:root[data-storefront-theme] .auth-brand-title {
  font-family: var(--sfp-heading);
  font-weight: var(--sfp-heading-weight);
  letter-spacing: var(--sfp-heading-spacing);
}
:root[data-storefront-theme] .auth-brand-text { color: var(--sfp-muted); }
:root[data-storefront-theme] .auth-card {
  border-radius: var(--sfp-radius);
  border: 1px solid var(--sfp-line);
  background: var(--sfp-paper);
  box-shadow: var(--sfp-shadow);
}
:root[data-storefront-theme] .auth-form-title {
  font-family: var(--sfp-heading);
  font-weight: var(--sfp-heading-weight);
  letter-spacing: var(--sfp-heading-spacing);
}
:root[data-storefront-theme] .auth-form-subtitle { color: var(--sfp-muted); }
:root[data-storefront-theme] .auth-primary-btn {
  width: 100%;
  border-color: var(--sfp-accent);
  background: var(--sfp-accent);
  color: #fff;
}
:root[data-storefront-theme] .auth-primary-btn:hover,
:root[data-storefront-theme] .auth-primary-btn:focus {
  border-color: var(--sfp-ink);
  background: var(--sfp-ink);
}
:root[data-storefront-theme] .auth-link-row a,
:root[data-storefront-theme] .auth-switch-link a { color: var(--sfp-accent); }
:root[data-storefront-theme] .social-login-btn {
  border-radius: var(--sfp-radius-sm);
  border: 1px solid var(--sfp-line);
  text-transform: none;
  letter-spacing: 0;
}
:root[data-storefront-theme] .social-login-divider span {
  color: var(--sfp-muted);
  font-size: 11px;
  letter-spacing: var(--sfp-label-spacing);
  text-transform: uppercase;
}
/* css/auth.css hardcodes its own greys and radii, so these need matching or
   higher specificity to pick up the storefront palette. */
:root[data-storefront-theme] .auth-form-section { background: rgba(255, 255, 255, .82); }
:root[data-storefront-theme] .auth-logo-wrap h4,
:root[data-storefront-theme] .auth-brand-title,
:root[data-storefront-theme] .auth-form-title { color: var(--sfp-ink); }
/* theme.css sets `p { color: ... !important }`, so muted copy has to match it. */
:root[data-storefront-theme] .auth-brand-text,
:root[data-storefront-theme] .auth-form-subtitle,
:root[data-storefront-theme] .auth-helper-text,
:root[data-storefront-theme] .social-login-divider { color: var(--sfp-muted) !important; }
:root[data-storefront-theme] .social-login-divider hr { color: var(--sfp-line); }

/* The palette's hairline is too faint to read as a field boundary on the auth
   cards, so form controls there get a stronger border derived from the ink.
   theme.css sets `border-color: … !important` on every input, so this has to
   match that priority. */
:root[data-storefront-theme] .auth-form .form-floating > .form-control,
:root[data-storefront-theme] .auth-page .form-control,
:root[data-storefront-theme] .auth-page .form-select {
  border: 1px solid rgba(var(--theme-text-rgb, 23, 23, 23), .55) !important;
  border-radius: var(--sfp-radius-sm);
  background-color: var(--sfp-paper);
  color: var(--sfp-ink);
  font-family: var(--sfp-body);
}
:root[data-storefront-theme] .auth-form .form-floating > .form-control:hover,
:root[data-storefront-theme] .auth-page .form-control:hover {
  border-color: rgba(var(--theme-text-rgb, 23, 23, 23), .72) !important;
}
:root[data-storefront-theme] .auth-form .form-floating > .form-control:focus,
:root[data-storefront-theme] .auth-page .form-control:focus {
  border-color: var(--sfp-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 225, 29, 116), .14);
}
:root[data-storefront-theme] .auth-page .auth-form .form-control.invalid-input,
:root[data-storefront-theme] .auth-page .auth-form .form-control.is-invalid,
:root[data-storefront-theme] .auth-page .auth-form .form-select.invalid-input,
:root[data-storefront-theme] .auth-page .auth-form .form-select.is-invalid {
  border-color: var(--theme-danger, #dc3545) !important;
}
:root[data-storefront-theme] .auth-form .form-floating > label {
  background: transparent;
  color: var(--sfp-muted);
}
:root[data-storefront-theme] .auth-form .form-floating > .form-control:-webkit-autofill ~ label,
:root[data-storefront-theme] .auth-form .form-floating > .form-control:not(:placeholder-shown) ~ label,
:root[data-storefront-theme] .auth-form .form-floating > .form-control:focus ~ label {
  background: var(--sfp-paper);
  color: var(--sfp-muted);
}

:root[data-storefront-theme] .loading-line { background-color: var(--sfp-wash); }
:root[data-storefront-theme] .loading-line::before { background-color: var(--sfp-accent); }

:root[data-storefront-theme] .auth-otp-box {
  border: 1px solid rgba(var(--theme-text-rgb, 23, 23, 23), .55) !important;
  border-radius: var(--sfp-radius-sm);
  background: var(--sfp-wash);
  color: var(--sfp-ink);
  font-family: var(--sfp-heading);
}
:root[data-storefront-theme] .auth-otp-box:focus {
  border-color: var(--sfp-accent) !important;
  background: var(--sfp-paper);
  box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 225, 29, 116), .14);
}

/* ---------- Small screens ------------------------------------------------- */

/* Auth screens go edge-to-edge on phones: css/auth.css already drops the card
   chrome at this breakpoint, but these themed rules outrank it (they carry the
   :root[data-storefront-theme] prefix), so the surface has to be cleared here
   too or the card keeps floating on its own panel. */
@media (max-width: 767.98px) {
  :root[data-storefront-theme] .auth-form-section,
  :root[data-storefront-theme] .auth-card,
  :root[data-storefront-theme] .auth-card--signup {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (max-width: 575.98px) {
  :root[data-storefront-theme] .btn { padding: 10px 16px; font-size: 11px; }
  :root[data-storefront-theme] .accordion-button { font-size: 15px; }
}