/* Design system. Colours and fonts come from theme variables printed by the layout (see Theme::cssVariables). */
:root {
  --c-bg: #ffffff; --c-bg-alt: #fff8e6; --c-gold: #ffc20e; --c-gold-deep: #f7941d;
  --c-text: #2b2b2b; --c-muted: #5f5a52; --c-border: #f0e2b8;
  --c-button-bg: #ffc20e; --c-button-text: #2b2b2b;
  --c-announce-bg: #3d3d3d; --c-announce-text: #ffe9a8;
  /* ShopHivePk brand extras (fixed, always readable): burnt orange for small accent text, red for sale tags */
  --c-accent-text: #b83f00; --c-red: #c8161d;
  --font-heading: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem;
  --radius: 6px;
  --container: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--c-gold); text-underline-offset: .2em; }
ul, ol { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }
main:focus { outline: none; }

h1, h2, h3, .logo-word, .type-display { text-wrap: balance; font-family: var(--font-heading); font-weight: 600; line-height: 1.2; margin: 0 0 var(--space-2); letter-spacing: .005em; }
h1 { font-size: clamp(2rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 var(--space-2); max-width: 66ch; }
.lead { font-size: 1.15rem; color: var(--c-text); max-width: 46ch; }
.type-display { font-size: 2.4rem; }

:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-2); top: -4rem; background: var(--c-text); color: var(--c-bg); padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { top: var(--space-1); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 22px; height: 22px; display: block; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-2); }
.narrow { max-width: 720px; }
@media (min-width: 720px) { .container { padding: 0 var(--space-3); } }

/* Announcement bar */
.announce { background: var(--c-announce-bg); color: var(--c-announce-text); text-align: center; font-size: .86rem; letter-spacing: .03em; padding: .55rem var(--space-2); }
.announce p { margin: 0 auto; max-width: none; }

/* Header: white top row (logo, search, tools) + orange menu bar (All Departments, links, account) */
:root { --c-nav-bg: #e95d2a; --c-nav-bg-2: #e95d2a; --c-nav-hover: #cf4a1a; --c-nav-text: #ffffff; }
.site-header { background: var(--c-bg); position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 0 var(--c-border); }
.hd-main-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; min-height: 64px; gap: var(--space-1); }
.logo { text-decoration: none; justify-self: center; display: inline-flex; align-items: center; }
.logo-img { height: 48px; width: auto; }
.logo-word { font-size: 1.5rem; letter-spacing: .01em; margin: 0; font-weight: 700; }
.icon-btn { background: none; border: 0; color: inherit; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.icon-sm { width: 18px; height: 18px; flex: none; }
.nav-toggle { justify-self: start; }
.header-tools { display: flex; justify-content: flex-end; align-items: center; gap: .25rem; }
.hd-track { display: none; }
.hd-search, .hd-nav { display: none; }

@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .hd-main-row { grid-template-columns: auto minmax(280px, 1fr) auto; gap: var(--space-3); min-height: 92px; }
  .logo-img { height: 72px; }
  .hd-search { display: flex; align-items: stretch; background: #fff; border: 2px solid var(--c-nav-bg); border-radius: 999px; overflow: hidden; min-width: 0; }
  .hd-search:focus-within { outline: 2px solid var(--c-text); outline-offset: 2px; }
  .hd-search-cat { position: relative; display: flex; align-items: center; border-right: 1px solid var(--c-border); padding-left: var(--space-2); color: var(--c-muted); }
  .hd-search-cat select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-size: .92rem; color: var(--c-text); padding: .7rem 1.6rem .7rem 0; max-width: 11rem; cursor: pointer; min-height: 0; }
  .hd-search-cat select:focus { outline: none; }
  .hd-search-cat .icon { position: absolute; right: .55rem; pointer-events: none; }
  .hd-search input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .95rem; padding: .7rem var(--space-2); color: var(--c-text); min-height: 0; }
  .hd-search input[type="search"]:focus { outline: none; }
  .hd-search-btn { border: 0; background: var(--c-nav-bg); color: #fff; width: 54px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .hd-search-btn:hover { background: var(--c-nav-hover); }
  .hd-track { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-weight: 600; font-size: .95rem; margin-right: var(--space-1); white-space: nowrap; }
  .hd-track:hover { color: var(--c-nav-bg); }
  .hd-nav { display: block; background: var(--c-nav-bg); color: var(--c-nav-text); }
}
.hd-nav-row { display: flex; align-items: stretch; gap: var(--space-3); min-height: 52px; }
.dept { position: relative; }
.dept-btn { height: 100%; display: inline-flex; align-items: center; gap: .6rem; background: var(--c-nav-bg-2); color: #fff; border: 0; padding: 0 var(--space-3) 0 var(--space-2); min-width: 250px; font: 600 .95rem var(--font-body); cursor: pointer; }
.dept-btn span { flex: 1; text-align: left; }
.dept-btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.dept-caret { transition: transform .2s; }
.dept.open .dept-caret { transform: rotate(180deg); }
.dept-panel { display: none; position: absolute; top: 100%; left: 0; min-width: 100%; background: #fff; color: var(--c-text); border: 1px solid var(--c-border); box-shadow: 0 14px 30px rgba(0,0,0,.16); z-index: 50; }
.dept.open .dept-panel, .dept:hover .dept-panel, .dept:focus-within .dept-panel { display: block; }
.dept-item { position: relative; border-bottom: 1px solid var(--c-border); }
.dept-item:last-child { border-bottom: 0; }
.dept-item > a { display: flex; align-items: center; gap: .7rem; padding: .5rem var(--space-2); text-decoration: none; font-size: .9rem; line-height: 1.25; }
.dept-item > a span { flex: 1; }
.dept-item > a:hover, .dept-item:focus-within > a { background: var(--c-bg-alt); color: var(--c-nav-bg); }
.dept-sub { display: none; position: absolute; top: -1px; left: 100%; min-width: 230px; background: #fff; border: 1px solid var(--c-border); box-shadow: 0 14px 30px rgba(0,0,0,.14); }
.dept-item.has-kids:hover > .dept-sub, .dept-item.has-kids:focus-within > .dept-sub { display: block; }
.dept-sub a { display: block; padding: .5rem var(--space-2); text-decoration: none; font-size: .9rem; border-bottom: 1px solid var(--c-border); }
.dept-sub li:last-child a { border-bottom: 0; }
.dept-sub a:hover { background: var(--c-bg-alt); color: var(--c-nav-bg); }
.nav-primary { flex: 1; display: flex; align-items: stretch; }
.nav-primary ul { display: flex; gap: var(--space-3); align-items: stretch; }
.nav-primary li { display: flex; }
.nav-primary a { display: flex; align-items: center; text-decoration: none; font-weight: 600; font-size: 1rem; padding: 0 .3rem; border-bottom: 3px solid transparent; border-top: 3px solid transparent; color: #fff; }
.nav-primary a:hover { border-bottom-color: var(--c-gold); }
.hd-account { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-size: .95rem; font-weight: 500; padding-left: var(--space-2); border-left: 1px solid rgba(255,255,255,.3); }
.hd-account:hover { text-decoration: underline; }

/* Mobile nav */
.mobile-nav { position: fixed; inset: 0; z-index: 60; display: flex; }
.mobile-nav-panel { background: var(--c-bg); width: min(86vw, 380px); height: 100%; overflow-y: auto; padding: var(--space-2) var(--space-3) var(--space-4); }
.mobile-nav-scrim { flex: 1; background: rgba(37, 37, 37, .45); }
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.mobile-nav-label { margin: var(--space-2) 0 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.mobile-nav-panel li a { display: block; padding: .9rem 0; text-decoration: none; border-bottom: 1px solid var(--c-border); font-family: var(--font-heading); font-size: 1.2rem; }
.search-mobile { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); }
.search-mobile input { flex: 1; min-width: 0; }
body.nav-open { overflow: hidden; }

/* Buttons and links */
.btn {
  display: inline-block; background: var(--c-button-bg); color: var(--c-button-text);
  border: 1px solid var(--c-button-bg); border-radius: var(--radius);
  padding: .95rem 2rem; font: 500 .95rem var(--font-body); letter-spacing: .04em; text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.btn:hover { background: var(--c-gold-deep); border-color: var(--c-gold-deep); }
.btn-outline { background: transparent; border-color: var(--c-text); color: var(--c-text); }
.btn-outline:hover { background: var(--c-text); border-color: var(--c-text); color: var(--c-bg); }
.btn-small { padding: .6rem 1.1rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.text-link { font-size: .95rem; letter-spacing: .02em; text-decoration: none; border-bottom: 1px solid var(--c-gold); padding-bottom: 2px; }
.text-link:hover { border-bottom-color: var(--c-text); }
.row-gap { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Sections */
.section { padding: var(--space-5) 0; }
.section-alt { background: var(--c-bg-alt); }
.section-head { margin-bottom: var(--space-4); }
.section-head p { color: var(--c-muted); margin: 0; }
.section-head-row { display: flex; justify-content: space-between; align-items: end; gap: var(--space-2); }
@media (min-width: 960px) { .section { padding: var(--space-6) 0; } }

/* Hero: the one memorable element is the large gold-line ring */
.hero { background: var(--c-bg-alt); overflow: hidden; padding: var(--space-4) 0 0; }
.hero-grid { display: grid; gap: var(--space-2); align-items: center; }
.hero-copy { padding: var(--space-3) 0 0; }
.hero-copy .btn { margin-top: var(--space-2); }
.hero-art img { width: min(100%, 560px); margin: 0 auto; animation: hero-reveal 1.6s cubic-bezier(.2, .7, .2, 1) both; }
/* The page's one entrance moment: the image opens like a lens. Disabled by the reduced-motion rule at the end of this file. */
@keyframes hero-reveal { from { clip-path: circle(0% at 50% 58%); } to { clip-path: circle(80% at 50% 58%); } }
@media (min-width: 960px) {
  .hero { padding: 0; }
  .hero-grid { grid-template-columns: 1fr 1fr; min-height: 640px; gap: var(--space-4); }
  .hero-copy { padding: var(--space-5) 0; }
  .hero-art img { width: 100%; max-width: 620px; margin: 0 0 0 auto; }
}

/* Category tiles */
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-2); }
.tile { text-decoration: none; display: block; }
.tile-media { display: block; background: var(--c-bg-alt); border: 1px solid var(--c-border); aspect-ratio: 1; overflow: hidden; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover .tile-media img { transform: scale(1.04); }
.tile-name { display: block; margin-top: var(--space-1); font-family: var(--font-heading); font-size: 1.2rem; }
@media (min-width: 960px) { .tile-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }

/* Products */
.section-products { border-top: 1px solid var(--c-border); }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-2); }
@media (min-width: 960px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4) var(--space-3); } }
.product-media { position: relative; display: block; background: var(--c-bg-alt); aspect-ratio: 4 / 5; overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-name { font-size: 1.3rem; margin: var(--space-1) 0 .15rem; }
.product-name a { text-decoration: none; }
.product-name a:hover { text-decoration: underline; text-decoration-color: var(--c-gold); }
.product-price { margin: 0; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; font-size: .98rem; }
.price-was { color: var(--c-muted); font-size: .9rem; }
.badge { position: absolute; top: .75rem; left: .75rem; background: var(--c-bg); color: var(--c-text); font-size: .8rem; padding: .2rem .6rem; letter-spacing: .03em; }
.badge-sale { background: var(--c-red); color: #fff; font-weight: 600; }
.badge-muted { background: var(--c-bg-alt); color: var(--c-text); border: 1px solid var(--c-border); }

/* Promise strip */
.promise { border-top: 1px solid var(--c-border); padding: var(--space-4) 0; }
.promise-list { display: grid; gap: var(--space-3); }
.promise-list h3 { font-size: 1.4rem; margin-bottom: .25rem; }
.promise-list p { margin: 0; color: var(--c-text); }
@media (min-width: 720px) {
  .promise-list { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .promise-list li { padding: 0 var(--space-3); border-left: 1px solid var(--c-border); }
  .promise-list li:first-child { padding-left: 0; border-left: 0; }
}

/* Footer */
.site-footer { background: var(--c-bg-alt); border-top: 1px solid var(--c-border); padding-top: var(--space-5); font-size: .95rem; }
.footer-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
.footer-grid section:first-child { grid-column: 1 / -1; }
.footer-title { font-size: 1.35rem; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--c-gold); }
.site-footer address { font-style: normal; }
.social { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-2); padding-bottom: var(--space-3); border-top: 1px solid var(--c-border); color: var(--c-muted); font-size: .88rem; }
.footer-base p { margin: 0; }
.footer-base ul { display: flex; gap: var(--space-3); }
.footer-base li { margin: 0; }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } .footer-grid section:first-child { grid-column: auto; } }

/* Forms */
.field { margin-bottom: var(--space-3); max-width: 420px; }
.field label { display: block; font-weight: 500; font-size: .92rem; margin-bottom: .35rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], input[type="date"], select, textarea {
  width: 100%; font: inherit; color: var(--c-text); background: var(--c-bg);
  border: 1px solid #d9cfae; border-radius: var(--radius); padding: .7rem .85rem; min-height: 46px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--c-text); outline-offset: 1px; border-color: var(--c-text); }
.field-error input { border-color: #9b2c2c; }
.field-msg { color: #9b2c2c; font-size: .88rem; margin: .35rem 0 0; }

/* Messages and states */
.alert { border: 1px solid var(--c-border); border-left-width: 4px; padding: var(--space-2); margin-bottom: var(--space-2); max-width: 66ch; background: var(--c-bg); }
.alert-success { border-left-color: #2f6b4f; }
.alert-error { border-left-color: #9b2c2c; }
.alert-info { border-left-color: var(--c-gold-deep); }
.empty-state { border: 1px dashed #d9cfae; padding: var(--space-4) var(--space-3); text-align: center; margin: var(--space-2) 0; }
.empty-state p { margin-left: auto; margin-right: auto; }
.empty-title { font-family: var(--font-heading); font-size: 1.6rem; margin-bottom: .25rem; }
.skeleton-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
@media (min-width: 960px) { .skeleton-grid { grid-template-columns: repeat(4, 1fr); } }
.skeleton { aspect-ratio: 4 / 5; background: linear-gradient(100deg, var(--c-bg-alt) 30%, var(--c-border) 50%, var(--c-bg-alt) 70%); background-size: 300% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.message-page { min-height: 50vh; }
.message-page .btn { margin-top: var(--space-2); }


/* ---------- Phase 2: catalogue ---------- */
.breadcrumbs { padding: var(--space-2) 0 0; font-size: .9rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--c-muted); margin-right: .5rem; }
.breadcrumbs a { text-decoration: none; color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-gold); }

.listing-head { padding: var(--space-3) 0 var(--space-2); }
.listing-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: .5rem; }
.listing-head .lead { color: var(--c-muted); }
.subcats, .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-2); }
.chip { display: inline-block; border: 1px solid var(--c-border); background: var(--c-bg); padding: .35rem .9rem; font-size: .9rem; text-decoration: none; border-radius: 999px; }
.chip:hover { border-color: var(--c-text); }
.chips { margin: 0 0 var(--space-3); }

.listing-grid { display: grid; gap: var(--space-3); padding-bottom: var(--space-5); }
@media (min-width: 960px) { .listing-grid { grid-template-columns: 250px 1fr; gap: var(--space-4); } .filters { position: sticky; top: 100px; align-self: start; } }
.filters-box { border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: var(--space-1) 0; }
.filters-box summary { font-family: var(--font-heading); font-size: 1.4rem; padding: .5rem 0; cursor: pointer; }
@media (min-width: 960px) { .filters-box summary { pointer-events: none; list-style: none; } .filters-box summary::-webkit-details-marker { display: none; } }
.filter-group { margin: 0 0 var(--space-2); padding: 0; border: 0; min-width: 0; }
.filter-group legend { font-weight: 500; font-size: .92rem; margin-bottom: .35rem; padding: 0; }
.filter-group .field { margin-bottom: var(--space-2); max-width: none; }
.price-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
.price-fields .field { margin: 0; }
.check { display: flex; gap: .6rem; align-items: center; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--c-text); }
.filter-actions { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }

.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-2); margin-bottom: var(--space-2); }
.result-count { margin: 0; color: var(--c-muted); }
.sort-field { display: flex; align-items: center; gap: .6rem; margin: 0; max-width: none; }
.sort-field label { margin: 0; white-space: nowrap; }
.sort-field select { width: auto; min-width: 11rem; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-1); margin-top: var(--space-5); }
.pagination ul { display: flex; gap: .35rem; }
.page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .9rem; border: 1px solid var(--c-border); text-decoration: none; background: var(--c-bg); }
a.page-link:hover { border-color: var(--c-text); }
.page-link.is-current { background: var(--c-text); border-color: var(--c-text); color: var(--c-bg); }
.page-gap { display: inline-flex; align-items: center; height: 44px; padding: 0 .3rem; color: var(--c-muted); }

.product-page { padding-bottom: var(--space-5); }
.product-layout { display: grid; gap: var(--space-3); padding-top: var(--space-2); }
@media (min-width: 960px) { .product-layout { grid-template-columns: 1.05fr 1fr; gap: var(--space-5); } .gallery { position: sticky; top: 100px; align-self: start; } }
.gallery-main { background: var(--c-bg-alt); aspect-ratio: 4 / 5; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: var(--space-1); margin-top: var(--space-1); }
.thumb { display: block; width: 72px; border: 1px solid var(--c-border); background: var(--c-bg-alt); }
.thumb.is-active { border-color: var(--c-text); }
.product-info h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.product-price-lg { font-size: 1.5rem; margin-bottom: var(--space-2); }
.product-price-lg .price-was { font-size: 1.05rem; }
.badge-inline { background: var(--c-text); color: var(--c-bg); font-size: .8rem; padding: .15rem .55rem; align-self: center; }
.buy-form { margin: var(--space-3) 0; padding: var(--space-3) 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.option-group { border: 0; padding: 0; margin: 0 0 var(--space-2); min-width: 0; }
.option-group legend, .option-group > label { font-weight: 500; font-size: .92rem; margin-bottom: .4rem; display: block; padding: 0; }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill span { display: inline-block; border: 1px solid #d9cfae; padding: .55rem 1.1rem; min-height: 44px; line-height: 1.7; }
.pill input:checked + span { border-color: var(--c-text); background: var(--c-bg-alt); box-shadow: inset 0 0 0 1px var(--c-text); }
.pill input:focus-visible + span { outline: 2px solid var(--c-text); outline-offset: 3px; }
.stock { font-weight: 500; margin: var(--space-2) 0 .25rem; min-height: 1.65em; }
.stock.in { color: #2f6b4f; }
.stock.out { color: #9b2c2c; }
.muted-line { color: var(--c-muted); font-size: .9rem; margin: 0 0 var(--space-2); }
.btn-block { display: block; width: 100%; text-align: center; margin-top: var(--space-1); }
.product-section { margin-top: var(--space-3); }
.product-section h2 { font-size: 1.7rem; }
.specs div { display: flex; gap: var(--space-2); padding: .55rem 0; border-bottom: 1px solid var(--c-border); }
.specs dt { flex: 0 0 9rem; font-weight: 500; }
.specs dd { margin: 0; }
.spec-wide { flex: 1; }
.related { border-top: 1px solid var(--c-border); margin-top: var(--space-5); padding-bottom: 0; }

/* Styleguide */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
.swatch { display: inline-block; width: 28px; height: 28px; border: 1px solid var(--c-border); vertical-align: middle; margin-right: .5rem; }
.data-table { border-collapse: collapse; width: 100%; max-width: 720px; margin-bottom: var(--space-4); }
.data-table th, .data-table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--c-border); }
code { font-size: .85em; background: var(--c-bg-alt); padding: .1rem .35rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Phase 4: logo image, promo banners ---------- */
.logo img { display: block; }
.logo-img { height: var(--logo-height, 36px); width: auto; max-width: min(240px, 52vw); object-fit: contain; }
.section-promo { border-top: 1px solid var(--c-border); }
.promo-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .promo-count-2 { grid-template-columns: repeat(2, 1fr); } .promo-count-3 { grid-template-columns: repeat(3, 1fr); } }
.promo-card { display: flex; flex-direction: column; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.promo-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-border); }
.promo-media img { width: 100%; height: 100%; object-fit: cover; }
.promo-body { padding: var(--space-3); }
.promo-body h3 { margin-bottom: .4rem; }
.promo-body p { margin-bottom: var(--space-2); }
.announce a { text-decoration-color: currentColor; }

/* ---------- Phase 5: bag, checkout, account ---------- */
.icon-bag { position: relative; }
.cart-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--c-text); color: var(--c-bg); font-size: .72rem; line-height: 18px; text-align: center; font-weight: 600; }
.flash-stack { padding-top: var(--space-2); }
.flash-stack .alert { margin-bottom: var(--space-1); }

.cart-layout, .checkout-layout { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .cart-layout, .checkout-layout { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--space-5); } .summary { position: sticky; top: 100px; } }
.table-wrap { overflow-x: auto; position: relative; }   /* positioning context: keeps sr-only text inside the scroller */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-weight: 500; font-size: .85rem; color: var(--c-muted); padding: .6rem .5rem; border-bottom: 1px solid var(--c-border); }
.cart-table td { padding: var(--space-2) .5rem; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.cart-table .num { text-align: right; white-space: nowrap; }
.cart-table tr.has-issue td { background: var(--c-bg-alt); }
.cart-item { display: flex; gap: var(--space-2); min-width: 220px; }
.cart-thumb { flex: none; width: 72px; background: var(--c-bg-alt); }
.cart-thumb img { display: block; width: 100%; height: auto; }
.cart-name { font-family: var(--font-heading); font-size: 1.15rem; text-decoration: none; }
.cart-name:hover { text-decoration: underline; text-decoration-color: var(--c-gold); }
.cart-item .muted-line { margin: .15rem 0 0; }
.qty-input { width: 5rem; min-height: 44px; font: inherit; border: 1px solid #d9cfae; border-radius: var(--radius); padding: .5rem; background: var(--c-bg); color: var(--c-text); }
.qty-field { max-width: 8rem; }
.qty-field input { width: 100%; }
.cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }

.summary { border: 1px solid var(--c-border); background: var(--c-bg-alt); padding: var(--space-3); }
.summary h2 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.summary .btn-block { margin-top: var(--space-2); }
.summary-lines { margin: 0 0 var(--space-2); padding: 0; list-style: none; font-size: .92rem; }
.summary-lines li { display: flex; justify-content: space-between; gap: var(--space-2); padding: .3rem 0; border-bottom: 1px solid var(--c-border); }
.totals { margin: 0; }
.totals > div { display: flex; justify-content: space-between; gap: var(--space-2); padding: .4rem 0; }
.totals dt, .totals dd { margin: 0; }
.totals .grand { border-top: 1px solid var(--c-text); margin-top: .4rem; padding-top: .7rem; font-weight: 600; font-size: 1.1rem; }
.totals-order { max-width: 360px; margin-left: auto; }
.coupon-form .field { max-width: none; margin-bottom: var(--space-2); }
.inline-field { display: flex; gap: var(--space-1); }
.inline-field input { flex: 1; min-width: 0; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--c-text); text-decoration: underline; cursor: pointer; }

.form-block { border: 0; border-top: 1px solid var(--c-border); padding: var(--space-3) 0 var(--space-1); margin: 0; min-width: 0; }
.form-block legend { font-family: var(--font-heading); font-size: 1.5rem; padding: 0; float: left; width: 100%; margin-bottom: var(--space-2); }
.form-block legend + * { clear: both; }
.form-block .field { max-width: 520px; }
.hint { color: var(--c-muted); font-size: .88rem; margin: .35rem 0 0; }
.choice { display: flex; align-items: center; gap: var(--space-2); border: 1px solid #d9cfae; padding: .9rem 1rem; margin-bottom: var(--space-1); cursor: pointer; max-width: 520px; }
.choice input { width: 20px; height: 20px; accent-color: var(--c-text); flex: none; }
.choice > span:nth-of-type(1) { flex: 1; }
.choice:has(input:checked) { border-color: var(--c-text); background: var(--c-bg-alt); }
.choice:focus-within { outline: 2px solid var(--c-text); outline-offset: 2px; }
.choice-price { white-space: nowrap; font-weight: 500; }

.order-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.order-meta dt { color: var(--c-muted); font-size: .85rem; }
.order-meta dd { margin: 0; }
.order-detail address { font-style: normal; margin-bottom: var(--space-2); }
.account-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-3); }
@media (min-width: 960px) { .account-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plain-list { list-style: none; padding: 0; margin: 0 0 var(--space-1); }
.plain-list li { padding: .4rem 0; border-bottom: 1px solid var(--c-border); }
.address-list { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.address-card { border: 1px solid var(--c-border); padding: var(--space-2); }
.address-card address { font-style: normal; margin: .5rem 0; }
.address-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.address-actions form { margin: 0; }
.checkout-complete .lead { max-width: none; }

/* ---------- Phase 5: order confirmation / order detail ---------- */
.confirm-head { max-width: 640px; margin: 0 auto var(--space-4); text-align: center; }
.confirm-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #2f6b4f; color: #fff; margin-bottom: var(--space-2); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--c-muted); margin: 0 0 .4rem; }
.confirm-head h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: var(--space-2); }
.order-chip { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .6rem; border: 1px solid var(--c-border); background: var(--c-bg-alt); padding: .6rem 1.1rem; margin: 0 0 var(--space-2); }
.order-chip span { color: var(--c-muted); font-size: .85rem; }
.order-chip strong { font-size: 1.15rem; letter-spacing: .04em; white-space: nowrap; }
.confirm-note { color: var(--c-text); margin: 0 auto; max-width: 52ch; }
.confirm-actions { text-align: center; margin-top: var(--space-4); }
.nowrap { white-space: nowrap; }
.order-detail { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .order-detail { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: var(--space-5); } }
.order-detail h2 { font-size: 1.5rem; margin: 0 0 var(--space-2); }
.order-side { border: 1px solid var(--c-border); background: var(--c-bg-alt); padding: var(--space-3); }
.order-side .order-meta { grid-template-columns: 1fr 1fr; margin: 0 0 var(--space-3); }
.order-side .order-meta dd .muted-line { display: block; margin: .15rem 0 0; }
.order-side address { margin: 0 0 var(--space-1); line-height: 1.7; }
.order-main .totals-order { max-width: none; margin-left: 0; margin-top: var(--space-2); }
.confirm-head p, .confirm-actions { margin-left: auto; margin-right: auto; max-width: none; }
.confirm-head .confirm-note { max-width: 52ch; }
.confirm-head .order-chip { display: inline-flex; }

/* ---------- Information pages (About, Contact, FAQ, Shipping, Returns, Privacy, Terms) ---------- */
.content-page { padding-top: var(--space-3); }
.content-page h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
.content-page .lead { color: var(--c-muted); }
.content-section { margin-top: var(--space-4); }
.content-section h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); margin-bottom: var(--space-1); }
.content-page p { max-width: 68ch; }
.content-page a { text-decoration-thickness: 1px; }
.bullets { margin: 0 0 var(--space-2); padding: 0; display: grid; gap: .55rem; }
.bullets li { position: relative; padding-left: 1.4rem; max-width: 68ch; }
.bullets li::before { content: ""; position: absolute; left: .2rem; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold-deep); }
.info-cards { display: grid; gap: var(--space-2); grid-template-columns: 1fr; margin: var(--space-3) 0 0; }
.info-cards li { display: grid; gap: .25rem; padding: var(--space-2) var(--space-3); background: var(--c-bg-alt); border: 1px solid var(--c-border); }
.info-label { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.info-cards a { font-size: 1.1rem; overflow-wrap: anywhere; }
@media (min-width: 720px) { .info-cards { grid-template-columns: 1fr 1fr; } }
.fact-list { margin: var(--space-3) 0 0; border: 1px solid var(--c-border); background: var(--c-bg); }
.fact-list > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .8rem var(--space-2); border-bottom: 1px solid var(--c-border); }
.fact-list > div:last-child { border-bottom: 0; }
.fact-list dt { color: var(--c-muted); font-size: .9rem; }
.fact-list dd { margin: 0; font-weight: 500; }
@media (min-width: 640px) { .fact-list > div { grid-template-columns: 14rem 1fr; gap: var(--space-2); } }
.faq-list { border-top: 1px solid var(--c-border); }
.faq-list details { border-bottom: 1px solid var(--c-border); }
.faq-list summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; position: relative; font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: .25rem; top: .85rem; font-size: 1.4rem; line-height: 1; color: var(--c-accent-text); }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { margin: 0 0 var(--space-2); color: var(--c-muted); }
.content-actions { margin-top: var(--space-4); }

/* ---- Phase 6: free-shipping bar, stock indicator, activity counters ---- */
.ship-bar { margin: 0 0 var(--space-3, 1rem); padding: .85rem 1rem; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius); }
.ship-bar-msg { margin: 0 0 .5rem; font-weight: 500; }
.ship-bar.is-reached .ship-bar-msg { color: #2f6b4f; }
.ship-bar-note { margin: .45rem 0 0; }
.ship-bar-track, .stock-bar { display: block; width: 100%; height: 8px; border: 0; border-radius: 99px; overflow: hidden; background: var(--c-border); appearance: none; -webkit-appearance: none; }
.ship-bar-track::-webkit-progress-bar, .stock-bar::-webkit-progress-bar { background: var(--c-border); border-radius: 99px; }
.ship-bar-track::-webkit-progress-value, .stock-bar::-webkit-progress-value { background: var(--c-gold); border-radius: 99px; }
.ship-bar-track::-moz-progress-bar, .stock-bar::-moz-progress-bar { background: var(--c-gold); border-radius: 99px; }
.ship-bar.is-reached .ship-bar-track::-webkit-progress-value { background: #2f6b4f; }
.ship-bar.is-reached .ship-bar-track::-moz-progress-bar { background: #2f6b4f; }
.stock.low { color: #8a6416; }
.stock-box .stock { margin-bottom: .35rem; }
.stock-bar { max-width: 16rem; height: 6px; margin: 0 0 .5rem; }
.stock-bar[hidden] { display: none; }
.stock-bar::-webkit-progress-value { background: #b7791f; }
.stock-bar::-moz-progress-bar { background: #b7791f; }
.activity { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--c-muted); font-size: .9rem; }
.activity li + li::before { content: none; }

/* ---- Phase 7: popups (added to bag, quick view) ---- */
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; background: rgba(37,37,37,.55); padding: 0; }
.modal-box { position: relative; width: 100%; max-width: 30rem; max-height: 92vh; overflow-y: auto; background: var(--c-bg); border-top: 3px solid var(--c-gold); padding: 1.5rem 1.25rem 1.25rem; outline: none; }
.modal-wide { max-width: 56rem; }
.modal-close { position: absolute; top: .4rem; right: .6rem; width: 2.5rem; height: 2.5rem; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--c-text); }
.modal-close:hover, .modal-close:focus-visible { color: var(--c-accent-text); }
.modal-title { margin: 0 2rem .75rem 0; font-family: var(--font-heading); font-size: 1.2rem; }
.added-item { display: flex; gap: .9rem; align-items: center; margin-bottom: .75rem; }
.added-item img { width: 72px; height: 90px; object-fit: cover; background: var(--c-bg-alt); }
.added-name { margin: 0 0 .15rem; font-weight: 500; }
.added-total { margin: .5rem 0 .75rem; font-weight: 500; }
.modal-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.modal-actions .btn { flex: 1 1 auto; text-align: center; }
.qv { display: grid; gap: 1.25rem; }
.qv-media img { width: 100%; height: auto; max-height: 52vh; object-fit: cover; background: var(--c-bg-alt); }
.qv-title { margin: 0 2rem .5rem 0; font-family: var(--font-heading); font-size: 1.6rem; }
.qv-title a { color: inherit; text-decoration: none; }
.qv-open { margin-top: .5rem; }
@media (min-width: 720px) {
  .modal { align-items: center; padding: 1.5rem; }
  .modal-box { border-top-width: 3px; padding: 1.75rem; }
  .qv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; }
  .qv-media img { max-height: 70vh; }
}

/* ---- Phase 8: sales booster notifications ---- */
.sn { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 150; width: calc(100% - 2rem); max-width: 22rem; pointer-events: none; }
.sn[hidden] { display: none; }
.sn-left { left: 1rem; }
.sn-right { right: 1rem; }
.sn-card { position: relative; display: flex; gap: .8rem; align-items: center; padding: .85rem 2.2rem .85rem .85rem; background: var(--c-bg); border: 1px solid var(--c-border); border-left: 3px solid var(--c-gold); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(37,37,37,.14); pointer-events: auto; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.sn.is-in .sn-card { opacity: 1; transform: none; }
.sn-img { flex: none; width: 56px; height: 70px; object-fit: cover; background: var(--c-bg-alt); }
.sn-body { min-width: 0; }
.sn-title { margin: 0 0 .15rem; font-weight: 600; }
.sn-text { margin: 0 0 .25rem; font-size: .9rem; }
.sn-time { margin: .15rem 0 0; font-size: .8rem; color: var(--c-muted); }
.sn-link { font-size: .9rem; color: var(--c-accent-text); font-weight: 500; }
.sn-product { display: block; color: var(--c-text); text-decoration: none; }
.sn-product:hover, .sn-product:focus-visible { text-decoration: underline; }
.sn-close { position: absolute; top: .15rem; right: .3rem; width: 2rem; height: 2rem; border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--c-muted); }
.sn-close:hover, .sn-close:focus-visible { color: var(--c-text); }
@media (prefers-reduced-motion: reduce) { .sn-card { transition: none; transform: none; } }

/* ---- Phase 9: product card action buttons, product page redesign, image magnifier ---- */
.product-card { text-align: center; }
.product-card .product-price { margin-left: auto; margin-right: auto; }
.product-actions { display: flex; justify-content: center; gap: .5rem; margin-top: .6rem; }
.act-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; font: inherit; background: var(--c-button-bg); color: var(--c-button-text); border: 1px solid var(--c-button-bg); border-radius: 4px; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; }
.act-btn .icon { width: 20px; height: 20px; }
.act-btn:hover, .act-btn:focus-visible { background: var(--c-gold-deep); border-color: var(--c-gold-deep); color: var(--c-button-text); }
.card-add { margin: 0; display: inline-flex; }
.act-btn[disabled] { opacity: .5; cursor: wait; }
.qv-open { display: none; }

/* gallery: vertical thumbnails on the left (desktop), strip below (mobile) */
.gallery { display: grid; gap: var(--space-1); grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "thumbs"; }
.gallery-main { grid-area: main; position: relative; cursor: default; }
.gallery-thumbs { grid-area: thumbs; margin-top: 0; flex-wrap: wrap; list-style: none; padding: 0; }
@media (min-width: 720px) {
  .gallery { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "thumbs main"; align-items: start; gap: var(--space-2); }
  .gallery:not(:has(.gallery-thumbs)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
  .gallery-thumbs { flex-direction: column; }
  .thumb { width: 84px; }
}
.gallery-main img { transition: transform .15s ease-out; will-change: transform; }
.gallery-main.is-zooming { cursor: zoom-in; }
.gallery-main.is-zooming img { transform: scale(2.2); transition: none; }
.zoom-btn { position: absolute; right: .75rem; bottom: .75rem; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-button-bg); color: var(--c-button-text); border: 0; cursor: pointer; z-index: 2; }
.zoom-btn:hover, .zoom-btn:focus-visible { background: var(--c-gold-deep); }
.zoom-btn[hidden] { display: none; }
.lightbox-img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; object-fit: contain; }

/* product info */
.save-line { font-size: .9rem; color: var(--c-muted); font-family: var(--font-body); }
.save-line[hidden] { display: none; }
.save-off { color: var(--c-red); }
.quick-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: 0 0 var(--space-2); padding: 0; font-size: .92rem; }
.quick-links a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--c-text); }
.quick-links a:hover { color: var(--c-accent-text); }
.quick-links .icon { width: 18px; height: 18px; }
.buy-row { display: flex; gap: var(--space-1); align-items: stretch; margin-top: var(--space-1); }
.qty-stepper { display: inline-flex; align-items: stretch; border: 1px solid #d9cfae; background: var(--c-bg); flex: none; }
.qty-stepper input { width: 3rem; min-height: 48px; border: 0; text-align: center; padding: 0; -moz-appearance: textfield; appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input:focus { outline-offset: -2px; }
.qty-step { width: 2.6rem; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--c-text); }
.qty-step[hidden] { display: none; }
.qty-step:hover { background: var(--c-bg-alt); }
.buy-row .btn-add { flex: 1; text-transform: uppercase; letter-spacing: .08em; }
.pd-acc { border: 1px solid var(--c-border); margin-top: var(--space-3); }
.pd-acc summary { cursor: pointer; list-style: none; padding: .9rem 1.1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: .92rem; display: flex; justify-content: space-between; align-items: center; }
.pd-acc summary::-webkit-details-marker { display: none; }
.pd-acc summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-right: .2rem; }
.pd-acc[open] summary::after { transform: rotate(-135deg); }
.pd-acc-body { padding: 0 1.1rem 1rem; }
.pd-acc-body p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .gallery-main img, .act-btn { transition: none; } }

/* quick view: thumbnails + full details */
.qv-thumbs { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.qv-thumbs .thumb { width: 56px; }
.qv-details { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--c-border); }
.qv-details-title { font-size: 1.2rem; margin-bottom: .5rem; }
.qv .buy-form { margin-top: var(--space-2); }

/* ---- Phase 10: wishlist + recently viewed ---- */
.wl-btn.is-on { background: var(--c-gold-deep); border-color: var(--c-gold-deep); }
.wish-link { margin: 0; }
.wish-link .wl-btn { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: 0; font: inherit; color: var(--c-text); cursor: pointer; width: auto; height: auto; }
.wish-link .wl-btn .icon { width: 18px; height: 18px; }
.wish-link .wl-btn:hover, .wish-link .wl-btn:focus-visible { color: var(--c-accent-text); background: none; }
.wish-link .wl-btn.is-on { background: none; color: var(--c-accent-text); }
.wishlist-page .result-count { margin-bottom: var(--space-1); }
.recent { border-top: 1px solid var(--c-border); }
.icon-wish { position: relative; }
.gallery-main .badge { z-index: 2; pointer-events: none; }

/* ---- Sliders: hero, product rows, and the shared arrows / dots ------------------------------------------------ */
.slider-ui { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.slider-arrow { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--c-border); border-radius: 50%; background: var(--c-bg); color: var(--c-text); cursor: pointer; transition: border-color .15s, color .15s; }
.slider-arrow:hover:not(:disabled) { border-color: var(--c-accent-text); color: var(--c-accent-text); }
.slider-arrow:disabled { opacity: .35; cursor: default; }
.slider-arrow .icon { width: 20px; height: 20px; }
.slider-dots { display: flex; align-items: center; gap: 4px; }
.slider-dot { position: relative; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.slider-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #b9b3a6; transition: background .15s; }
.slider-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 1px solid var(--c-text); border-radius: 50%; opacity: 0; transition: opacity .15s; }
.slider-dot.is-active::before { background: var(--c-text); }
.slider-dot.is-active::after { opacity: 1; }
.slider-dot:hover::before { background: var(--c-gold-deep); }

/* Product slider: scroll-snap track. Without JS it is simply a swipeable row. */
.product-slider { --per: 2; --gap: var(--space-2); }
.slider-track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 2px; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-item { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); min-width: 0; scroll-snap-align: start; }
@media (min-width: 640px) { .product-slider { --per: 3; } }
@media (min-width: 960px) { .product-slider { --per: 4; --gap: var(--space-3); } }
@media (prefers-reduced-motion: reduce) { .slider-track { scroll-behavior: auto; } }

/* Hero slider: slides share one grid cell and cross-fade; the tallest sets the height, so nothing jumps. */
.hero-slider { position: relative; }
.hero-slider .hero-track { display: grid; }
.hero-slider .hero-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.hero-slider .hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.hero-slider .hero-art img { animation: none; }
.hero-slider .hero-slide.is-active .hero-art img { animation: hero-reveal 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.hero-slider .hero-grid { padding-bottom: 3.5rem; }
@media (min-width: 960px) { .hero-slider .hero-grid { padding-bottom: 4rem; } }
.hero-title { font-size: clamp(2.6rem, 6vw, 4.6rem); }
@media (prefers-reduced-motion: reduce) { .hero-slider .hero-slide, .hero-slider .hero-slide.is-active { transition: none; } .hero-slider .hero-slide.is-active .hero-art img { animation: none; } }

/* Elegant Essentials: two columns of pictures drifting in opposite directions beside a short text block */
.essentials { display: grid; gap: var(--space-4); align-items: center; }
.essentials-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); height: 420px; overflow: hidden; border-radius: 12px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); }
.ess-col { overflow: hidden; min-width: 0; }
.ess-run { display: flex; flex-direction: column; will-change: transform; }
.ess-run img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; margin-bottom: var(--space-2); background: var(--c-bg-alt); }
.ess-up .ess-run { animation: ess-up 45s linear infinite; }
.ess-down .ess-run { animation: ess-down 45s linear infinite; }
.essentials-gallery:hover .ess-run { animation-play-state: paused; }
@keyframes ess-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes ess-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.essentials-copy h2 { margin-bottom: var(--space-2); }
.essentials-copy p:not(.eyebrow) { color: var(--c-muted); max-width: 52ch; margin: 0; }
@media (min-width: 960px) {
  .essentials { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
  .essentials-gallery { height: 560px; }
}
@media (prefers-reduced-motion: reduce) { .ess-up .ess-run, .ess-down .ess-run { animation: none; } }

/* ---- Hero, full-width image slides (2026 style: slow zoom, text rise, progress-bar indicators) ----------------- */
.hero-full { padding: 0; background: #1d1a15; color: #fff; position: relative; }
.hero-full .hero-track { display: grid; }
.hero-full .hero-slide { grid-area: 1 / 1; position: relative; overflow: hidden; min-height: clamp(460px, 76vh, 720px); display: flex; align-items: center; background: var(--c-bg-alt); color: var(--c-text); opacity: 1; visibility: visible; }
.hero-full.hero-slider .hero-slide { opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.hero-full.hero-slider .hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s ease; z-index: 1; }
.hero-full .hero-slide-bleed { color: #fff; background: #1d1a15; }
.hero-full .hero-grid { position: relative; z-index: 2; width: 100%; grid-template-columns: 1fr; padding-bottom: 5rem; padding-top: var(--space-4); }
.hero-full .hero-slide-bleed .hero-grid { min-height: 0; }
.hero-full .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.1); transition: transform 9s cubic-bezier(.2, .6, .2, 1); }
.hero-full .hero-slide.is-active .hero-bg { transform: scale(1); }
.hero-full .hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20, 17, 12, .72) 0%, rgba(20, 17, 12, .38) 48%, rgba(20, 17, 12, .08) 100%), linear-gradient(0deg, rgba(20, 17, 12, .45), transparent 35%); }
.hero-full .hero-slide-bleed .hero-copy { max-width: 36rem; padding: 0; }
.hero-full .hero-slide-bleed .hero-title { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.hero-full .hero-slide-bleed .lead { color: rgba(255, 255, 255, .88); max-width: 32rem; }
.hero-full .hero-slide:not(.hero-slide-bleed) .hero-grid { padding-bottom: 5rem; }
@media (min-width: 960px) {
  .hero-full .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-full .hero-slide:not(.hero-slide-bleed) .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-full .hero-slide-bleed .hero-copy { padding-left: 0; }
}
/* Text rises in, one line after another, each time a slide becomes active */
.hero-full .hero-slide .hero-copy > * { opacity: 0; transform: translateY(22px); }
.hero-full .hero-slide.is-active .hero-copy > * { animation: hero-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero-full .hero-slide.is-active .hero-copy > :nth-child(2) { animation-delay: .15s; }
.hero-full .hero-slide.is-active .hero-copy > :nth-child(3) { animation-delay: .3s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Controls: a frosted pill with counter, progress bars (they also drive the auto-play) and arrows */
.hero-ui-wrap { position: absolute; left: 0; right: 0; bottom: var(--space-3); margin: 0 auto; z-index: 3; pointer-events: none; }
.hero-ui { pointer-events: auto; display: flex; align-items: center; gap: var(--space-2); padding: .55rem .7rem .55rem 1.1rem; max-width: 34rem; border-radius: 999px; background: rgba(24, 20, 14, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.hero-count { margin: 0; font-size: .85rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-count-sep { opacity: .55; }
.hero-bars { display: flex; flex: 1; gap: 6px; min-width: 0; }
.hero-bar { flex: 1; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.hero-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(255, 255, 255, .32); }
.hero-bar-fill { position: absolute; left: 0; top: 50%; height: 3px; width: 0; margin-top: -1.5px; border-radius: 2px; background: #fff; }
.hero-bar.is-active .hero-bar-fill { animation: hero-fill 6.5s linear forwards; }
.hero-slider.is-paused .hero-bar.is-active .hero-bar-fill { animation-play-state: paused; }
@keyframes hero-fill { from { width: 0; } to { width: 100%; } }
.hero-arrows { display: flex; gap: 6px; }
.hero-ui .slider-arrow { width: 36px; height: 36px; background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.hero-ui .slider-arrow:hover:not(:disabled) { background: #fff; color: #1d1a15; border-color: #fff; }
@media (min-width: 960px) { .hero-ui-wrap { bottom: var(--space-4); } }
@media (max-width: 520px) { .hero-count { display: none; } .hero-ui { padding-left: .8rem; } }
@media (prefers-reduced-motion: reduce) {
  .hero-full .hero-bg, .hero-full .hero-slide.is-active .hero-bg { transform: none; transition: none; }
  .hero-full .hero-slide .hero-copy > *, .hero-full .hero-slide.is-active .hero-copy > * { opacity: 1; transform: none; animation: none; }
  .hero-full.hero-slider .hero-slide, .hero-full.hero-slider .hero-slide.is-active { transition: none; }
  .hero-bar.is-active .hero-bar-fill { animation: none; width: 100%; }
}

/* Product cards: price sits in the centre under the centred name */
.product-card .product-price { justify-content: center; text-align: center; width: 100%; margin-left: 0; margin-right: 0; }

/* ---- Product card: price centred under the name ---- */
.product-card .product-price { justify-content: center; }

/* ---- Added-to-bag drawer: slides in from the right ---- */
.modal-side { align-items: stretch; justify-content: flex-end; padding: 0; }
.modal-box.modal-drawer { max-width: 26rem; width: 100%; height: 100%; max-height: none; border-top: 0; border-left: 3px solid var(--c-gold); padding: 1.75rem 1.25rem; animation: drawer-in .28s ease-out; }
.modal-drawer .modal-actions { flex-direction: column; }
.modal-drawer .modal-actions .btn { width: 100%; }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (min-width: 720px) { .modal-side { padding: 0; align-items: stretch; } .modal-box.modal-drawer { padding: 2rem 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .modal-box.modal-drawer { animation: none; } }

/* ---- Cart drawer contents ---- */
.modal-drawer .modal-body { display: flex; flex-direction: column; min-height: 100%; }
.modal-drawer.is-busy { opacity: .75; pointer-events: none; }
.dr-note { margin: 0 0 .75rem; padding: .5rem .75rem; background: var(--c-bg-alt); border: 1px solid var(--c-border); font-size: .92rem; }
.dr-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border); }
.dr-item { position: relative; display: flex; gap: .9rem; padding: 1rem 2rem 1rem 0; border-bottom: 1px solid var(--c-border); }
.dr-thumb img { display: block; width: 72px; height: 90px; object-fit: cover; background: var(--c-bg-alt); }
.dr-info { flex: 1 1 auto; min-width: 0; }
.dr-name { display: block; color: inherit; text-decoration: none; line-height: 1.35; margin-bottom: .15rem; }
.dr-name:hover { text-decoration: underline; text-decoration-color: var(--c-gold); }
.dr-info .muted-line { margin: 0 0 .25rem; }
.dr-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .4rem; }
.dr-price { font-size: .98rem; }
.dr-qty { display: inline-flex; align-items: center; border: 1px solid var(--c-border); }
.dr-step { width: 2.1rem; height: 2.1rem; border: 0; background: none; font: inherit; font-size: 1.1rem; cursor: pointer; color: var(--c-text); }
.dr-step:hover:not([disabled]), .dr-step:focus-visible { background: var(--c-bg-alt); }
.dr-step[disabled] { opacity: .35; cursor: not-allowed; }
.dr-qty-n { min-width: 2rem; text-align: center; }
.dr-remove { position: absolute; top: 1rem; right: 0; width: 1.5rem; height: 1.5rem; padding: 0; border: 1px solid var(--c-border); background: none; line-height: 1; font-size: 1rem; cursor: pointer; color: var(--c-muted); }
.dr-remove:hover, .dr-remove:focus-visible { color: var(--c-text); border-color: var(--c-text); }
.dr-foot { margin-top: auto; padding-top: 1rem; }
.dr-foot .btn { display: block; width: 100%; text-align: center; margin-top: .6rem; }
.dr-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .35rem; font-size: 1.05rem; }
.dr-subtotal span { text-transform: uppercase; letter-spacing: .03em; }

/* ---- Options chooser inside the right-hand drawer ---- */
.modal-drawer .qv { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.modal-drawer .qv-media img { max-height: 38vh; }
.modal-drawer .qv-title { margin-right: 2.5rem; }

/* ---- Product cards: buttons sit on one line across a row, whatever the title length ---- */
.product-card { display: flex; flex-direction: column; }
.product-card .product-actions { margin-top: auto; padding-top: .6rem; }

/* Sliders: each slide stretches so the card buttons line up across the row */
.slider-item { display: flex; }
.slider-item > .product-card { flex: 1 1 auto; min-width: 0; width: 100%; }

/* ---- Checkout: steps ---- */
.field[hidden], .co-map[hidden], .co-step[hidden] { display: none !important; }
.field-error select { border-color: #9b2c2c; }
.co-progress { display: flex; gap: .5rem; list-style: none; margin: 0 0 var(--space-3); padding: 0; flex-wrap: wrap; }
.co-progress li { flex: 1 1 8rem; min-width: 0; }
.co-progress button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .7rem .8rem; background: none; border: 0; border-bottom: 3px solid var(--c-border); font: inherit; color: var(--c-muted); cursor: pointer; text-align: left; }
.co-progress button[disabled] { cursor: default; }
.co-n { display: inline-grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid currentColor; font-size: .85rem; }
.co-progress .is-done button { color: var(--c-text); border-bottom-color: var(--c-gold); }
.co-progress .is-done .co-n { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-text); }
.co-progress .is-active button { color: var(--c-text); border-bottom-color: var(--c-text); font-weight: 600; }
.co-progress .is-active .co-n { background: var(--c-text); border-color: var(--c-text); color: #fff; }
.co-title { font-size: 1.7rem; margin: 0 0 var(--space-2); }
.co-title:focus { outline: none; }
.co-js .co-title { margin-top: var(--space-1); }
.co-recap { margin: 0 0 var(--space-2); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--c-gold); cursor: pointer; }
.co-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0 var(--space-2); }
.co-nav .btn { min-width: 11rem; }
.co-nav-final .btn[type="submit"] { min-width: 14rem; }

/* ---- Checkout: live map ---- */
.co-map { margin: var(--space-2) 0 var(--space-1); max-width: 520px; }
.co-map-title { font-weight: 500; margin: 0 0 .4rem; }
.co-map iframe, .deliver-map iframe { display: block; width: 100%; height: 260px; border: 1px solid var(--c-border); background: var(--c-bg-alt); }

/* ---- Order placed ---- */
.confirm-lead { font-size: 1.1rem; margin: 0 auto var(--space-2); max-width: 46ch; }
.chip-btn { border: 1px solid var(--c-border); background: var(--c-bg); padding: .15rem .6rem; font: inherit; font-size: .8rem; cursor: pointer; color: var(--c-text); }
.chip-btn:hover, .chip-btn:focus-visible { border-color: var(--c-text); }
.order-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); list-style: none; margin: 0 auto var(--space-4); padding: 0; max-width: 900px; }
@media (min-width: 720px) { .order-track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.order-track li { position: relative; display: flex; flex-direction: column; gap: .15rem; padding-top: 1.4rem; border-top: 3px solid var(--c-border); }
.order-track li.is-done { border-top-color: #2f6b4f; }
.ot-dot { position: absolute; top: -.55rem; left: 0; width: .9rem; height: .9rem; border-radius: 50%; background: var(--c-bg); border: 2px solid var(--c-border); }
.order-track li.is-done .ot-dot { background: #2f6b4f; border-color: #2f6b4f; }
.deliver-card { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); border: 1px solid var(--c-border); background: var(--c-bg-alt); padding: var(--space-3); margin: 0 auto var(--space-5); max-width: 1000px; }
/* the embedded map was removed for privacy: the address card now uses the full width */
.deliver-info h2 { font-size: 1.5rem; margin: 0 0 var(--space-1); }
.deliver-info address { font-style: normal; line-height: 1.7; margin-bottom: var(--space-2); }
.deliver-map iframe { height: 100%; min-height: 280px; }
@media print { .site-header, .site-footer, .confirm-actions, .chip-btn, .deliver-map, .co-progress { display: none !important; } }

/* ---- Order tracking ---- */
.track-box { max-width: 520px; margin: 0 auto; }
.track-form .btn { margin: var(--space-1) 0 var(--space-2); }
.order-track li.is-current { border-top-color: var(--c-gold-deep); }
.order-track li.is-current .ot-dot { border-color: var(--c-gold-deep); background: var(--c-gold); box-shadow: 0 0 0 4px rgba(255, 194, 14, .35); }
.order-track.is-closed li:not(.is-done) { opacity: .5; }
.order-track .muted-line { font-size: .85rem; }

/* ---- Phase 11: product page social proof (sold in last N hours, estimated delivery, people looking) ---- */
.proof-line { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 .75rem; font-size: .95rem; line-height: 1.45; color: var(--c-text); }
.proof-line .icon { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .12rem; }
.proof-sold { font-size: .9rem; }

/* Sale countdown */
.sale-cd { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; margin: 0 0 var(--space-2, 1rem); padding: .7rem .9rem; border: 1px solid var(--c-border); background: var(--c-bg-alt); border-radius: 6px; }
.sale-cd[hidden] { display: none; }
.sale-cd-label { font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.sale-cd-units { display: inline-flex; gap: .4rem; }
.sale-cd-u { display: inline-flex; flex-direction: column; align-items: center; min-width: 3rem; padding: .35rem .3rem; background: var(--c-text); color: var(--c-bg); border-radius: 4px; line-height: 1.1; }
.sale-cd-u b { font-size: 1.25rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.sale-cd-u i { font-style: normal; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.sale-cd.is-ended { opacity: .6; }
.sale-cd-sm { padding: .3rem .5rem; margin: .15rem 0 .5rem; gap: .3rem .5rem; background: transparent; border: 0; padding-left: 0; }
.sale-cd-sm .sale-cd-label { font-size: .72rem; }
.sale-cd-sm .sale-cd-u { min-width: 1.9rem; padding: .15rem .2rem; }
.sale-cd-sm .sale-cd-u b { font-size: .8rem; }
.sale-cd-sm .sale-cd-u i { display: none; }
@media (max-width: 480px) { .sale-cd:not(.sale-cd-sm) { justify-content: space-between; } .sale-cd-u { min-width: 2.7rem; } }

/* Product page spacing: give the delivery note, proof lines and policy note room under the Add to bag row */
.product-info .buy-row { margin-bottom: 1.1rem; }
.product-info .proof-delivery { margin: 1.1rem 0 .9rem; padding: .85rem 1rem; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: 6px; }
.product-info .proof-looking { margin: 0 0 .9rem; }
.product-info form > .muted-line { margin: .9rem 0 0; line-height: 1.6; }
.wa-order { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: var(--space-3, 1.5rem) 0 var(--space-2, 1rem); text-align: center; }
.btn-wa { background: #25d366; color: #0b3d1e; border-color: #25d366; }
.btn-wa:hover, .btn-wa:focus-visible { background: #1ebe5a; border-color: #1ebe5a; }

/* Hero pictures that turn with the mouse: gentle on hover, wider when dragged. The picture is oversized so its edges never show. */
.hero-tilt .hero-slide-bleed { perspective: 1400px; touch-action: pan-y; cursor: grab; --ry: 0deg; --rx: 0deg; --mx: 70%; --my: 40%; }
.hero-tilt.is-dragging .hero-slide-bleed { cursor: grabbing; }
.hero-tilt.is-dragging, .hero-tilt.is-dragging * { user-select: none; -webkit-user-select: none; }
.hero-tilt .hero-bg { -webkit-user-drag: none; user-drag: none; }
.hero-tilt.hero-full .hero-slide-bleed .hero-bg, .hero-tilt.hero-full .hero-slide.is-active .hero-bg { scale: 1.3; rotate: 1 0 0 var(--rx); transform: rotateY(var(--ry)); transition: transform .35s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.hero-tilt.hero-full.is-dragging .hero-slide-bleed .hero-bg { transition: transform .08s linear; }
.hero-tilt .hero-shade::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 238, 200, .45), rgba(255, 238, 200, 0) 38%); transition: opacity .3s; }
.hero-tilt .hero-copy, .hero-tilt .hero-copy a { cursor: auto; }
@media (prefers-reduced-motion: reduce) { .hero-tilt.hero-full .hero-slide-bleed .hero-bg, .hero-tilt.hero-full .hero-slide.is-active .hero-bg { transform: none; transition: none; } .hero-tilt .hero-shade::after { display: none; } }

/* Default hero: interactive 3D ring (falls back to the flat picture without WebGL / JS) */

/* ---- Frequently bought together ---- */
.fbt { border-top: 1px solid var(--c-border); margin-top: var(--space-5); padding-top: var(--space-4); }
.fbt-form { max-width: 880px; border: 1px solid var(--c-border); background: var(--c-bg-alt); padding: var(--space-3); display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .fbt-form { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); align-items: center; } .fbt-total { grid-column: 1 / -1; } }
.fbt-strip { display: flex; align-items: center; gap: .6rem; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; }
.fbt-pic { width: 112px; flex: none; border: 1px solid var(--c-border); background: var(--c-bg); transition: opacity .2s, transform .2s; }
.fbt-pic:first-child { border-color: var(--c-gold-deep); }
.fbt-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.fbt-pic.is-off { opacity: .3; transform: scale(.96); }
.fbt-plus { font-size: 1.3rem; color: var(--c-accent-text); line-height: 1; flex: none; }
.fbt-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-border); }
.fbt-item { display: flex; align-items: center; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--c-border); }
.fbt-item.is-off .fbt-name, .fbt-item.is-off .fbt-price { opacity: .45; }
.fbt-item:not(.fbt-main) { cursor: pointer; }
.fbt-check { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; flex: none; }
.fbt-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--c-gold-deep); cursor: pointer; }
.fbt-check-fixed { width: 1.4rem; flex: none; text-align: center; color: var(--c-accent-text); font-weight: 600; }
.fbt-name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.fbt-main .fbt-name strong { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent-text); border: 1px solid var(--c-accent-text); padding: .1rem .45rem; }
.fbt-name a { text-decoration: none; }
.fbt-name a:hover { text-decoration: underline; }
.fbt-variant select { font: inherit; font-size: .88rem; padding: .25rem .5rem; border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text); }
.fbt-variant-text { color: var(--c-muted); font-size: .88rem; }
.fbt-price { white-space: nowrap; font-weight: 500; }
.fbt-total { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-2); border-top: 1px solid var(--c-border); }
.fbt-sum { margin: 0; font-size: .95rem; color: var(--c-muted); }
.fbt-sum strong { display: block; font-size: 1.6rem; line-height: 1.2; color: var(--c-text); font-weight: 600; }
.fbt-total .btn-add { text-transform: uppercase; letter-spacing: .08em; min-width: 240px; }
@media (max-width: 560px) {
  .fbt-form { padding: var(--space-2); }
  .fbt-pic { width: calc((100% - 2.6rem) / 3); }
  .fbt-strip { width: 100%; }
  .fbt-total { flex-direction: column; align-items: stretch; }
  .fbt-total .btn-add { width: 100%; min-width: 0; }
}

/* Shop by brand: a tall banner beside that brand's products (stacks on phones, alternates sides on desktop) */
.section-brands { border-top: 1px solid var(--c-border); }
.brand-row { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-bottom: var(--space-5); }
.brand-row:last-child { margin-bottom: 0; }
.brand-banner { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--c-bg-alt); border: 1px solid var(--c-border); display: flex; flex-direction: column; }
.brand-banner img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.brand-banner-body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.brand-banner-body h3 { margin: 0; }
.brand-banner-body p { margin: 0; color: var(--c-muted); }
.brand-grid { list-style: none; margin: 0; padding: 0; }
.brand-more { margin: var(--space-2) 0 0; text-align: right; }
@media (min-width: 960px) {
  .brand-row { grid-template-columns: 1fr 3.2fr; align-items: start; }
  .brand-row-flip { grid-template-columns: 3.2fr 1fr; }
  .brand-row-flip .brand-banner { order: 2; }
  .brand-banner img { aspect-ratio: 4 / 5; height: auto; }
  .brand-row .brand-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3) var(--space-2); }
}
.brand-banner img { object-position: top; }

/* ---- Product cards: every card in a row lines up (title block = 2 lines, price, then buttons at the bottom) ---- */
.product-grid > li { display: flex; }
.product-grid > li > .product-card { flex: 1 1 auto; width: 100%; min-width: 0; }
.product-card .product-name { font-size: 1.1rem; line-height: 1.3; height: 2.6em; margin: var(--space-1) 0 .25rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-card .product-price { min-height: 1.7em; align-items: center; flex-wrap: wrap; row-gap: 0; }
@media (min-width: 960px) { .product-card .product-name { font-size: 1.15rem; } }

/* ---- No sideways page scroll: grid/flex children may shrink, and anything that still pokes out is clipped at the page edge ---- */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } body { overflow-x: clip; } }
.product-grid > li, .brand-row > *, .tile-grid > li, .essentials > * { min-width: 0; }
.hd-main-row > *, .hd-nav-row > * { min-width: 0; }
img, svg, video { max-width: 100%; }
.icon-sprite { max-width: none; }

/* Header search: live suggestions and styled category picker */
.hd-search, .search-mobile { position: relative; }
.hd-search { overflow: visible; }
.hd-search-btn { border-radius: 0 999px 999px 0; }
.hd-search-cat { border-radius: 999px 0 0 999px; }
.hd-search-cat.is-enhanced select, .hd-search-cat.is-enhanced > .icon { display: none; }
.cat-btn { appearance: none; border: 0; background: transparent; font: inherit; font-size: .92rem; color: var(--c-text, #222); cursor: pointer; display: flex; align-items: center; gap: .4rem; padding: .7rem 1.7rem .7rem 0; max-width: 11rem; min-height: 0; position: relative; }
.cat-btn::after { content: ""; position: absolute; right: .6rem; top: 50%; width: .42rem; height: .42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .15s; opacity: .7; }
.cat-btn[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); }
.cat-btn:focus-visible { outline: 2px solid var(--c-nav-bg, #e8612a); outline-offset: 2px; border-radius: 6px; }
.cat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-list { position: absolute; z-index: 60; top: calc(100% + 8px); left: -2px; min-width: 15rem; max-height: 22rem; overflow-y: auto; margin: 0; padding: .35rem; list-style: none; background: #fff; border: 1px solid var(--c-border, #e4dfd6); border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.16); }
.cat-opt { padding: .6rem .8rem; border-radius: 9px; cursor: pointer; font-size: .93rem; color: var(--c-text, #222); }
.cat-opt:hover, .cat-opt:focus { background: #fff3ea; outline: none; }
.cat-opt.is-selected { font-weight: 600; background: #ffe9db; }
.cat-opt.is-selected::after { content: "\2713"; float: right; color: var(--c-nav-bg, #e8612a); }

.sg { position: absolute; z-index: 55; top: calc(100% + 8px); left: 0; right: 0; max-height: min(72vh, 34rem); overflow-y: auto; background: #fff; border: 1px solid var(--c-border, #e4dfd6); border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.18); padding: .4rem; text-align: left; }
.sg[hidden], .cat-list[hidden] { display: none; }
.sg-head { margin: .5rem .7rem .2rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted, #777); font-weight: 600; }
.sg-empty { margin: 0; padding: 1rem; color: var(--c-muted, #777); font-size: .93rem; }
.sg-item, .sg-cat, .sg-all { display: flex; align-items: center; gap: .75rem; padding: .5rem .6rem; border-radius: 11px; color: var(--c-text, #222); text-decoration: none; }
.sg-item:hover, .sg-item.is-active, .sg-cat:hover, .sg-cat.is-active, .sg-all:hover, .sg-all.is-active { background: #fff3ea; }
.sg-pic { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 9px; background: #f6f3ee; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sg-pic img { width: 100%; height: 100%; object-fit: contain; }
.sg-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.sg-name { font-size: .94rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-meta { display: flex; flex-wrap: wrap; gap: .2rem .7rem; font-size: .78rem; color: var(--c-muted, #777); }
.sg-out { color: #b42318; font-weight: 600; }
.sg-price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-size: .92rem; white-space: nowrap; }
.sg-price s { font-size: .78rem; color: var(--c-muted, #777); }
.sg mark { background: #ffe08a; color: inherit; border-radius: 3px; padding: 0 1px; }
.sg-cat { justify-content: space-between; font-weight: 600; font-size: .93rem; }
.sg-go { font-size: .78rem; font-weight: 500; color: var(--c-muted, #777); }
.sg-all { justify-content: center; margin-top: .25rem; font-weight: 600; font-size: .92rem; border-top: 1px solid var(--c-border, #e4dfd6); border-radius: 0 0 11px 11px; color: var(--c-nav-bg, #c24a14); }
@media (max-width: 899px) { .sg { position: absolute; left: 0; right: 0; } .sg-price { font-size: .86rem; } }

/* Listing: products fade while the next page loads in place */

/* Listing filters */
.listing-grid.is-loading .results { opacity: .5; transition: opacity .15s; pointer-events: none; }
.listing-grid.is-loading .filters { pointer-events: none; }
.filter-title { margin: 0 0 .4rem; font-size: .9rem; font-weight: 600; }
.price-quick { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.price-quick .chip { font-size: .82rem; padding: .3rem .65rem; }
.price-quick .chip.is-on { background: var(--c-nav-bg, #e8612a); color: #fff; border-color: transparent; }
.filters .filter-group .check { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; cursor: pointer; }
.filters fieldset.filter-group { border: 0; padding: 0; margin-inline: 0; }
.filters fieldset.filter-group legend { padding: 0; margin-bottom: .35rem; font-weight: 600; }

/* Filters stay in view while scrolling the products; if the panel is taller than the screen it scrolls on its own */
@media (min-width: 960px) {
  .listing-grid > .filters { position: sticky; top: calc(var(--hd-h, 150px) + 16px); align-self: start; max-height: calc(100vh - var(--hd-h, 150px) - 32px); overflow-y: auto; overscroll-behavior: contain; padding-right: .5rem; scrollbar-width: thin; scrollbar-color: var(--c-border, #ddd) transparent; }
  .listing-grid > .filters::-webkit-scrollbar { width: 6px; }
  .listing-grid > .filters::-webkit-scrollbar-thumb { background: var(--c-border, #ddd); border-radius: 6px; }
}

.cat-links { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.cat-links a { display: block; padding: .3rem 0; color: inherit; text-decoration: none; }
.cat-links a:hover { color: var(--c-nav-bg, #e8612a); }
.cat-links a.is-on { font-weight: 700; color: var(--c-nav-bg, #e8612a); }

/* sub-categories under a parent in the Category filter */
.filters .check-sub { margin: 0 0 .35rem 1.1rem; padding-left: .75rem; border-left: 2px solid var(--c-border, #e5dcc8); }
.filters .check-sub .check { font-size: .92rem; }

/* Shop page */
.shop-hero { padding: var(--space-3) 0 var(--space-2); }
.shop-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 .25rem; }
.shop-hero .lead { color: var(--c-muted); margin: 0; }
.shop-tiles { display: flex; gap: .75rem; overflow-x: auto; padding: .25rem 0 var(--space-2); margin-bottom: var(--space-2); scrollbar-width: thin; }
.shop-tile { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem .5rem .5rem; border: 1px solid var(--c-border, #e5dcc8); border-radius: 999px; background: #fff; color: inherit; text-decoration: none; white-space: nowrap; }
.shop-tile:hover, .shop-tile.is-on { border-color: var(--c-accent, #f26b21); box-shadow: 0 0 0 1px var(--c-accent, #f26b21) inset; }
.shop-tile-img, .shop-tile-ico { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #f6efe0; font-weight: 600; flex: none; }
.shop-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.shop-tile-name { font-weight: 500; }

/* Shop page: full width, more products per row on big screens */
.container.shop-wide { max-width: min(1760px, 100%); padding-inline: clamp(1rem, 3vw, 3rem); }
@media (min-width: 960px) {
  .shop-wide .listing-grid { grid-template-columns: 270px minmax(0, 1fr); }
  .shop-wide .product-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
}

/* Shop banner */
.shop-banner { display: grid; margin: var(--space-2) 0 var(--space-3); border-radius: 14px; overflow: hidden; color: #fff;
  background: radial-gradient(900px 260px at 100% 0%, rgba(255,194,14,.20), transparent 60%), linear-gradient(135deg, #2b2b2b 0%, #3d3d3d 100%); }
.shop-banner-main { padding: clamp(1.4rem, 3vw, 2.4rem); }
.shop-banner-eyebrow { margin: 0 0 .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold); }
.shop-banner-main h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 .5rem; line-height: 1.12; color: #fff; font-weight: 600; }
.shop-banner-sub { margin: 0 0 1.25rem; max-width: 56ch; color: rgba(255,255,255,.72); font-size: .98rem; }
.shop-banner-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.sb-btn { display: inline-flex; align-items: center; padding: .6rem 1.2rem; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; color: #fff; text-decoration: none; font-size: .92rem; font-weight: 500; transition: background .15s, border-color .15s; }
.sb-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }
.sb-btn-solid { background: var(--c-gold); border-color: var(--c-gold); color: #2b2b2b; font-weight: 600; }
.sb-btn-solid:hover { background: var(--c-gold-deep); border-color: var(--c-gold-deep); }
.shop-perks { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid rgba(255,255,255,.12); }
.shop-perks li { display: flex; align-items: center; gap: .85rem; padding: .9rem clamp(1.4rem, 3vw, 2.4rem); }
.shop-perks li + li { border-top: 1px solid rgba(255,255,255,.12); }
.shop-perk-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,194,14,.45); color: var(--c-gold); }
.shop-perks strong { display: block; font-size: .96rem; font-weight: 600; }
.shop-perks small { display: block; color: rgba(255,255,255,.65); font-size: .85rem; }
@media (min-width: 720px) {
  .shop-perks { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .shop-perks li + li { border-top: 0; border-left: 1px solid rgba(255,255,255,.12); }
}
.shop-tiles-title { font-size: 1.15rem; margin: 0 0 .5rem; }
@media (min-width: 960px) { .shop-banner { grid-template-columns: minmax(0, 1fr) 280px; } }

/* Rotating "trending" hint inside the empty search box (fire icon + real product names). */
.q-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.q-wrap input[type="search"] { width: 100%; }
.q-hint { position: absolute; left: var(--space-2, .75rem); right: .5rem; top: 50%; transform: translateY(-50%); display: none; align-items: center; gap: .4rem; color: var(--c-muted, #777); font-size: .95rem; pointer-events: none; white-space: nowrap; overflow: hidden; }
.q-hint.is-on { display: flex; }
.q-hint .fire { flex: none; font-size: 1rem; line-height: 1; }
.q-hint .txt { overflow: hidden; text-overflow: ellipsis; animation: qHintIn .45s ease both; }
.q-hint .txt.out { animation: qHintOut .3s ease both; }
@keyframes qHintIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes qHintOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
.q-wrap.has-hint input::placeholder { color: transparent; }
@media (prefers-reduced-motion: reduce) { .q-hint .txt, .q-hint .txt.out { animation: none; } }

/* ---- Shop by Category: centered title with side lines + pastel rounded tiles in a scroll row ---- */
.shopcat-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.shopcat-head::before, .shopcat-head::after { content: ""; flex: 1; height: 1px; background: #dcdcdc; }
.shopcat-head h2 { margin: 0; font-family: "Poppins", var(--font-heading), sans-serif; font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 700; text-align: center; white-space: nowrap; }
.shopcat-sub { text-align: center; color: var(--c-muted); margin: calc(var(--space-1) * -1) auto var(--space-2); }
.shopcat-box { position: relative; background: #fff; border: 1px solid #eee; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.04); padding: var(--space-3) var(--space-3) var(--space-3); }
.shopcat-track { display: flex; gap: var(--space-3); margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.shopcat-track::-webkit-scrollbar { display: none; }
.shopcat-item { flex: 0 0 auto; width: 150px; scroll-snap-align: start; text-align: center; }
.shopcat-link { display: block; text-decoration: none; color: var(--c-text); }
.shopcat-media { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #ffe0a3; }
.shopcat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.shopcat-link:hover .shopcat-media img { transform: scale(1.06); }
.shopcat-name { display: block; margin-top: .85rem; font-family: "Poppins", sans-serif; font-size: .85rem; line-height: 1.3; color: #333; }
.shopcat-link:hover .shopcat-name { color: var(--c-accent-text); }
.shopcat-item.c0 .shopcat-media { background: #ffc965; }
.shopcat-item.c1 .shopcat-media { background: #ffe2ae; }
.shopcat-item.c2 .shopcat-media { background: #ffb88f; }
.shopcat-item.c3 .shopcat-media { background: #e05c5c; }
.shopcat-item.c4 .shopcat-media { background: #dcaa6e; }
.shopcat-item.c5 .shopcat-media { background: #eeeeee; }
.shopcat-item.c6 .shopcat-media { background: #62aed4; }
.shopcat-item.c7 .shopcat-media { background: #6dbdbd; }
.shopcat-arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 2; width: 28px; height: 44px; border: 0; border-radius: 6px; background: #4a6fa5; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); padding: 0; min-height: 0; }
.shopcat-arrow:hover { background: #3a5985; }
.shopcat-arrow:focus-visible { outline: 2px solid var(--c-text); outline-offset: 2px; }
.shopcat-arrow[hidden] { display: none; }
.shopcat-prev { left: 10px; }
.shopcat-next { right: 10px; }
@media (max-width: 640px) {
  .shopcat-box { padding: var(--space-2); }
  .shopcat-track { gap: var(--space-2); }
  .shopcat-item { width: 104px; }
  .shopcat-name { font-size: .78rem; }
  .shopcat-arrow { width: 24px; height: 38px; }
  .shopcat-prev { left: 4px; } .shopcat-next { right: 4px; }
}

/* Shop by Category: keep the scroller fully contained so it can never shift the page sideways */
.shopcat, .shopcat .container { min-width: 0; max-width: 100%; }
.shopcat-box { min-width: 0; max-width: 100%; overflow: hidden; contain: paint; }
.shopcat-track { overscroll-behavior-x: contain; scroll-snap-type: none; max-width: 100%; }
.shopcat-arrow { touch-action: manipulation; }

/* Minimum order: locked checkout button + notice */
.dr-min-note, .min-order-note { margin: 0 0 var(--space-1); padding: .6rem .8rem; border-radius: 8px; background: #fdecea; color: #8a1c14; border: 1px solid #f3c2bd; font-size: .9rem; line-height: 1.4; }
.btn.is-locked, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

.order-line { display: flex; gap: var(--space-2, .75rem); align-items: flex-start; }
.order-thumb { flex: none; width: 56px; height: auto; background: var(--c-bg-alt); display: block; }
.deliver-card { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .deliver-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }

/* ===== Daily Sale (032) ===== */
.nav-primary a.nav-deal { align-self: center; background: var(--c-gold); color: #2b2b2b; border: 0; border-radius: 999px; padding: .3rem .95rem; font-weight: 700; animation: ds-pulse 2.4s ease-in-out infinite; }
.nav-primary a.nav-deal:hover { background: #fff; }
.mobile-nav-panel li a.nav-deal { color: var(--c-accent-text, #b83f00); font-weight: 700; }
@keyframes ds-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,194,14,.55); } 50% { box-shadow: 0 0 0 7px rgba(255,194,14,0); } }
@media (prefers-reduced-motion: reduce) { .nav-primary a.nav-deal { animation: none; } }

.ds-eyebrow { display: inline-block; margin: 0 0 .4rem; padding: .15rem .7rem; border-radius: 999px; background: var(--c-gold); color: #2b2b2b; font: 700 .72rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.ds-hero { display: grid; gap: var(--space-3); align-items: center; margin: 0 0 var(--space-3); padding: var(--space-4) var(--space-3); border-radius: 16px; color: #fff;
  background: radial-gradient(circle at 85% 20%, rgba(255,194,14,.35), transparent 45%), linear-gradient(135deg, #c8161d 0%, #e95d2a 60%, #f7941d 100%); box-shadow: 0 10px 28px rgba(200,22,29,.22); }
.ds-hero h1 { margin: 0 0 .4rem; font-size: clamp(2rem, 6vw, 3.2rem); color: #fff; }
.ds-sub { margin: 0 0 var(--space-2); max-width: 52ch; color: #fff3df; }
.ds-stats { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; }
.ds-stats li { display: flex; align-items: baseline; gap: .4rem; }
.ds-stats strong { font: 700 1.4rem var(--font-heading); color: var(--c-gold); }
.ds-stats span { font-size: .9rem; color: #fff3df; }
@media (min-width: 820px) { .ds-hero { grid-template-columns: 1fr auto; padding: var(--space-4); } }

.ds-timer { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; }
.ds-timer-label { font: 600 .85rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.ds-timer-units { display: inline-flex; gap: .5rem; }
.ds-unit { display: flex; flex-direction: column; align-items: center; min-width: 4.2rem; padding: .55rem .4rem .4rem; border-radius: 10px; background: #2b2b2b; color: #fff; }
.ds-unit b { font: 700 1.9rem/1 var(--font-heading); font-variant-numeric: tabular-nums; color: var(--c-gold); }
.ds-unit i { margin-top: .25rem; font: 500 .68rem var(--font-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #ddd; }
.ds-timer.is-ended .ds-unit b { color: #bbb; }
.ds-timer-sm .ds-unit { min-width: 3.3rem; padding: .4rem .3rem .3rem; }
.ds-timer-sm .ds-unit b { font-size: 1.35rem; }

.ds-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); }
.ds-chips, .ds-sorts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ds-chip, .ds-sort { display: inline-block; padding: .4rem .95rem; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-bg); text-decoration: none; font-size: .9rem; }
.ds-chip small { color: var(--c-muted); }
.ds-chip:hover, .ds-sort:hover { border-color: var(--c-gold-deep); }
.ds-chip.is-on, .ds-sort.is-on { background: #2b2b2b; border-color: #2b2b2b; color: #fff; }
.ds-chip.is-on small { color: var(--c-gold); }
.ds-sort { border-color: transparent; padding: .4rem .7rem; }
.ds-sort.is-on { background: var(--c-bg-alt); border-color: var(--c-gold); color: var(--c-text); font-weight: 600; }
.ds-grid { margin-bottom: var(--space-3); }
.ds-note { margin: 0 0 var(--space-4); max-width: none; }
.ds-empty { margin-bottom: var(--space-5); }

.deal-item { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-width: 0; }
.deal-item > .product-card { flex: 1 1 auto; }
.deal-meta { padding: .5rem .25rem 0; text-align: center; }
.deal-save { margin: 0 0 .35rem; font-size: .88rem; color: #1f7a3f; max-width: none; }
.deal-progress { display: block; width: 100%; height: 8px; margin: 0 0 .3rem; border: 0; border-radius: 999px; overflow: hidden; background: #f2e7c8; appearance: none; -webkit-appearance: none; }
.deal-progress::-webkit-progress-bar { background: #f2e7c8; border-radius: 999px; }
.deal-progress::-webkit-progress-value { background: linear-gradient(90deg, #f7941d, #c8161d); border-radius: 999px; }
.deal-progress::-moz-progress-bar { background: linear-gradient(90deg, #f7941d, #c8161d); border-radius: 999px; }
.deal-left { margin: 0; font-size: .8rem; color: var(--c-muted); max-width: none; }
.deal-left.is-low { color: var(--c-red); font-weight: 600; }

.section-ds { padding: var(--space-3) 0; }
.ds-strip { padding: var(--space-3); border-radius: 16px; background: linear-gradient(135deg, #fff3d6 0%, #ffe3b0 100%); border: 1px solid #f5cf7a; }
.ds-strip-head { display: grid; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-2); }
.ds-strip-head h2 { margin: 0 0 .15rem; }
.ds-strip-head p { margin: 0; color: var(--c-muted); }
.ds-strip-head .ds-timer { color: var(--c-text); }
.ds-strip-link { justify-self: start; display: inline-block; padding: .5rem 1.1rem; border-radius: 999px; background: #c8161d; color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.ds-strip-link:hover { background: #a60f15; }
@media (min-width: 820px) { .ds-strip-head { grid-template-columns: 1fr auto auto; gap: var(--space-3); } }

/* Category banners under Shop by Category */
.cat-banners { margin: var(--space-3, 1.5rem) 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.cat-banner { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: transform .25s ease, box-shadow .25s ease; }
.cat-banner img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; }
.cat-banner:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.cat-banner:focus-visible { outline: 3px solid var(--c-nav-bg, #e8612a); outline-offset: 3px; }
@media (max-width: 639px) { .cat-banner img { aspect-ratio: auto; height: 150px; object-position: left center; } }
/* Phones: banners with a phone-sized picture become a swipe row (next banner peeks in); banners without one keep the cropped strip above */
.cat-banner picture { display: block; }
@media (max-width: 639px) {
  .cat-banner.has-m img { aspect-ratio: 672 / 680; height: auto; object-position: center; }
  .cat-banners:has(.has-m) { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding-bottom: .6rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .cat-banners:has(.has-m) > li { min-width: 0; scroll-snap-align: start; }
}
/* Brand banners are tall pictures with the name at the top: on phones show them whole instead of cutting the bottom off */
@media (max-width: 959px) {
  .brand-banner { max-width: 440px; width: 100%; margin-inline: auto; }
  .brand-banner img { aspect-ratio: 4 / 5; height: auto; }
}

/* Search typo notice ("Showing results for ...") */
.search-notice{margin:0 0 14px;padding:10px 14px;border:1px solid var(--border,#e4e4e4);border-left:4px solid var(--accent,#e8612a);border-radius:8px;background:var(--surface,#fff8f2);font-size:.95rem}
.search-notice a{margin-left:4px;text-decoration:underline}

/* ======================================================================
   Responsive hardening (all devices): cart cards, search bar, tablet hero,
   tap targets, overflow guards. Keep at the end of the file.
   ====================================================================== */

/* Grid children may shrink: stops filters/summary pushing past the screen on 320px phones */
.listing-grid > *, .cart-layout > *, .checkout-layout > *, .product-layout > *, .hero-grid > * { min-width: 0; }
@media (max-width: 959px) { .listing-grid { grid-template-columns: minmax(0, 1fr); } }

/* Mobile/tablet search bar under the header (desktop has the full search in the header) */
.hd-search-m { background: var(--c-bg); padding: 0 0 .65rem; }
.hd-search-m-row { display: flex; align-items: stretch; border: 0; }
.hd-search-m input[type="search"] { flex: 1; min-width: 0; border-radius: 999px 0 0 999px; border: 2px solid var(--c-nav-bg); border-right: 0; padding: .55rem 1rem; min-height: 44px; }
.hd-search-m button { width: 52px; border: 2px solid var(--c-nav-bg); background: var(--c-nav-bg); color: #fff; border-radius: 0 999px 999px 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
@media (min-width: 960px) { .hd-search-m { display: none; } }

/* Cart: stacked cards on phones instead of a side-scrolling table */
.cart-thumb { align-self: flex-start; }
.cart-thumb img { aspect-ratio: 4 / 5; object-fit: contain; }
@media (max-width: 719px) {
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .cart-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--c-border); }
  .cart-table td { padding: 0; border: 0; }
  .cart-table td.c-item { grid-column: 1 / -1; }
  .cart-item { min-width: 0; }
  .cart-name { font-size: 1.05rem; overflow-wrap: anywhere; }
  .cart-table td.c-price::before, .cart-table td.c-qty::before, .cart-table td.c-total::before { content: attr(data-label); display: block; font-size: .78rem; color: var(--c-muted); margin-bottom: .2rem; }
  .cart-table td.c-total { text-align: left; }
  .cart-table td.c-remove { grid-column: 1 / -1; }
  .cart-table .c-remove .btn { min-height: 44px; }
  .cart-table tr.has-issue { background: var(--c-bg-alt); padding-left: .5rem; padding-right: .5rem; }
  .cart-actions .btn { flex: 1 1 100%; min-height: 48px; }
}
.table-wrap { max-width: 100%; overflow-x: auto; }

/* Tablet: two-column hero from 720px so the page does not open with one giant picture */
@media (min-width: 720px) and (max-width: 959px) {
  .hero-grid { grid-template-columns: 1fr 1fr; min-height: 0; gap: var(--space-3); }
  .hero-full .hero-slide:not(.hero-slide-bleed) .hero-grid { grid-template-columns: 1fr 1fr; }
}

/* Checkout steps stay on one row on phones */
@media (max-width: 719px) {
  .co-progress { flex-wrap: nowrap; gap: .25rem; }
  .co-progress li { flex: 1 1 0; }
  .co-progress button { flex-direction: column; gap: .2rem; padding: .55rem .2rem; text-align: center; font-size: .82rem; }
}

/* Touch-friendly tap targets */
@media (max-width: 959px), (pointer: coarse) {
  .site-footer li a, .footer-base a { display: inline-block; padding: .6rem 0; }
  .site-footer li { margin-bottom: 0; }
  .footer-base ul { gap: var(--space-2); }
  .check, .filters .filter-group .check { min-height: 44px; }
  .check input { width: 22px; height: 22px; flex: none; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
  .slider-dot { width: 28px; height: 28px; }
  .text-link { display: inline-block; padding: .55rem 0; }
}
/* Phones/tablets only: let grid cells shrink (desktop keeps the original 4-column / auto-fill rules) */
@media (max-width: 959px) { .product-grid, .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Homepage: each category banner is followed by its own products */
.cat-block { margin-top: var(--space-4, 2rem); }
.cat-block:first-of-type { margin-top: var(--space-3, 1.5rem); }
.cat-block .cat-banner { margin-bottom: 1rem; }
.cat-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .75rem; }
.cat-block-head h3 { margin: 0; font-size: 1.25rem; }

/* smaller product cards inside homepage category blocks */
.cat-block .product-slider { --per: 2; --gap: .75rem; }
@media (min-width: 640px) { .cat-block .product-slider { --per: 3; } }
@media (min-width: 960px) { .cat-block .product-slider { --per: 5; } }
@media (min-width: 1280px) { .cat-block .product-slider { --per: 6; --gap: 1rem; } }

/* homepage category blocks: centered heading, tidy cards, rows centered when few products */
.cat-block-head { justify-content: center; position: relative; margin: 1.25rem 0 1rem; }
.cat-block-head h3 { font-size: 1.35rem; text-align: center; }
.cat-block-head h3::after { content: ""; display: block; width: 44px; height: 3px; margin: .4rem auto 0; border-radius: 3px; background: var(--c-nav-bg, #e8612a); }
.cat-block-head .text-link { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: .9rem; }
.cat-block .slider-track { padding: .35rem .15rem .9rem; }
.cat-block .slider-item:first-child { margin-left: auto; }
.cat-block .slider-item:last-child { margin-right: auto; }
.cat-block .product-card { background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 14px; padding: .7rem .7rem .8rem; box-shadow: 0 2px 8px rgba(0,0,0,.05); transition: transform .2s ease, box-shadow .2s ease; }
.cat-block .product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
.cat-block .product-media { aspect-ratio: 1 / 1; border-radius: 10px; background: #fff; }
.cat-block .product-media img { object-fit: contain; padding: .35rem; transition: transform .25s ease; }
.cat-block .product-card:hover .product-media img { transform: scale(1.05); }
.cat-block .product-card .product-name { font-size: .95rem; font-weight: 600; }
.cat-block .product-card .product-price { font-weight: 700; }
@media (max-width: 639px) { .cat-block-head .text-link { position: static; transform: none; } .cat-block-head { flex-direction: column; gap: .3rem; } }

/* All Departments: compact list, flyout stays on screen */
.dept-item { position: static; }
.dept-item > a { padding: .38rem var(--space-2); font-size: .86rem; line-height: 1.2; gap: .55rem; }
.dept-sub { top: -1px; left: 100%; max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; z-index: 60; }
.dept-sub a { padding: .4rem var(--space-2); font-size: .85rem; }
@media (max-width: 900px) {
  .dept-panel { max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain; }
  .dept-item { position: relative; }
  .dept-sub { position: static; min-width: 0; max-height: none; overflow: visible; box-shadow: none; border: 0; border-top: 1px solid var(--c-border); background: var(--c-bg-alt); }
  .dept-sub a { padding-left: calc(var(--space-2) + 1.2rem); }
}

/* Card button tooltips (mouse only; phones never show them) */
.act-btn { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .act-btn[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: .3rem .55rem; border-radius: 4px; background: #222; color: #fff; font-size: .75rem; font-weight: 500; line-height: 1.2; letter-spacing: 0; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease; z-index: 30; }
  .act-btn[data-tip]::before { content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translate(-50%, 4px); border: 5px solid transparent; border-top-color: #222; border-bottom: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease; z-index: 30; }
  .act-btn[data-tip]:hover::after, .act-btn[data-tip]:focus-visible::after, .act-btn[data-tip]:hover::before, .act-btn[data-tip]:focus-visible::before { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: .25s; }
  /* keep the first and last tooltip inside the card */
  .product-actions > :first-child .act-btn[data-tip]::after, .product-actions > a.act-btn:first-child::after { left: 0; transform: translate(0, 4px); }
  .product-actions > :first-child .act-btn[data-tip]:hover::after, .product-actions > :first-child .act-btn[data-tip]:focus-visible::after, .product-actions > a.act-btn:first-child:hover::after { transform: translate(0, 0); }
  .product-actions > a.act-btn:last-child::after { left: auto; right: 0; transform: translate(0, 4px); }
  .product-actions > a.act-btn:last-child:hover::after, .product-actions > a.act-btn:last-child:focus-visible::after { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .act-btn[data-tip]::after, .act-btn[data-tip]::before { transition: none; } }

/* Quick view loading skeleton (shown instantly while the popup content arrives) */
.qv-skel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; min-height: 16rem; }
.qv-skel-img, .qv-skel-line, .qv-skel-btn { border-radius: 6px; background: linear-gradient(90deg, #eceae6 25%, #f6f4f1 50%, #eceae6 75%); background-size: 200% 100%; animation: qv-shimmer 1.2s linear infinite; }
.qv-skel-img { min-height: 16rem; }
.qv-skel-col { display: flex; flex-direction: column; gap: .8rem; padding-top: .6rem; }
.qv-skel-line { height: 1rem; } .qv-skel-line.w30 { width: 30%; } .qv-skel-line.w70 { width: 70%; height: 1.4rem; } .qv-skel-line.w90 { width: 90%; }
.qv-skel-btn { height: 2.6rem; width: 100%; margin-top: 1rem; }
.modal-drawer .qv-skel { grid-template-columns: minmax(0, 1fr); }
.modal-drawer .qv-skel-img { min-height: 10rem; }
@keyframes qv-shimmer { to { background-position: -200% 0; } }
@media (max-width: 640px) { .qv-skel { grid-template-columns: minmax(0, 1fr); } .qv-skel-img { min-height: 11rem; } }
@media (prefers-reduced-motion: reduce) { .qv-skel-img, .qv-skel-line, .qv-skel-btn { animation: none; } }

/* ---- No pinch zoom + page never wider than the screen (mobile) ---- */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: relative; overscroll-behavior-x: none; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
main, .site-header, .site-footer, .announce, section, .container { max-width: 100%; }
.hero, .hero-full, .hero-full .hero-slide, .section-ds, .ds-strip, .shopcat-box, .product-slider, .cat-block, .brand-row, .essentials-gallery { overflow-x: clip; max-width: 100%; }
@media (max-width: 959px) {
  .sg, .cat-list { max-width: calc(100vw - 1.5rem); }
  .modal-box, .modal-box.modal-drawer { max-width: 100%; }
  .sn { left: 1rem; right: 1rem; width: auto; max-width: none; }
}

.cart-contact { margin: 0 0 var(--space-2); padding: .85rem 1rem; background: #fff; border: 1px dashed var(--c-border); border-radius: var(--radius); }
.cart-contact-title { margin: 0 0 .15rem; }
.cart-contact .field { margin: 0 0 .6rem; max-width: none; }
.cart-contact .hint { margin: 0 0 .7rem; }

/* product page: gallery was too tall/huge on desktop (4:5 ratio on a ~900px column) */
.gallery-main { aspect-ratio: 1 / 1; max-height: 620px; background: #fff; }
.gallery-main img { object-fit: contain; }
@media (min-width: 960px) {
  .product-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 959px) { .gallery-main { max-height: 420px; } }

/* product page: right side (title/price/details) was oversized */
.product-info h1 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.3; margin-bottom: .6rem; }
.product-price-lg { font-size: 1.25rem; margin-bottom: 1rem; }
.product-info { font-size: .95rem; }
.product-info .buy-row { margin-bottom: .9rem; }
@media (min-width: 960px) {
  .product-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .product-info { max-width: 560px; }
}

/* product page: smaller image + room for a promo banner on the right */
.product-promo { display: none; }
.product-promo img { width: 100%; height: auto; display: block; border-radius: 8px; }
.product-promo-card { background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: 8px; padding: 1.2rem; display: grid; gap: .3rem; text-align: center; }
@media (min-width: 1200px) {
  .product-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) 260px; gap: var(--space-4); }
  .gallery-main { max-height: 520px; }
  .product-info { max-width: none; }
  .product-promo { display: block; position: sticky; top: 100px; align-self: start; }
}

/* sponsored banner (product page, right column) */
.sp-banner { position: relative; overflow: hidden; border-radius: 14px; padding: 2.2rem 1.2rem 1.3rem; text-align: center; color: #3a1d00; background: linear-gradient(160deg, #ffd23f 0%, #ffb21e 55%, #ff8a1f 100%); box-shadow: 0 8px 24px rgba(255, 138, 31, .25); }
.sp-banner::before, .sp-banner::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .22); pointer-events: none; }
.sp-banner::before { width: 150px; height: 150px; top: -50px; right: -50px; }
.sp-banner::after { width: 110px; height: 110px; bottom: -40px; left: -40px; }
.sp-banner > * { position: relative; z-index: 1; }
.sp-tag { position: absolute !important; top: .6rem; left: .7rem; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; background: rgba(255, 255, 255, .7); color: #6b3a00; padding: .15rem .5rem; border-radius: 99px; z-index: 2; }
.sp-badge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 50%; background: #fff; color: #c8161d; font-size: .6rem; font-weight: 700; letter-spacing: .06em; line-height: 1.1; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); margin-bottom: .8rem; }
.sp-badge strong { font-size: 1.8rem; letter-spacing: 0; }
.sp-banner h3 { margin: 0 0 .5rem; font-size: 1.35rem; line-height: 1.2; color: #3a1d00; }
.sp-banner p { margin: 0 0 .8rem; font-size: .85rem; line-height: 1.45; }
.sp-points { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .3rem; font-size: .82rem; font-weight: 500; }
.sp-points li::before { content: "\2713"; margin-right: .4rem; font-weight: 700; color: #c8161d; }
.sp-btn { display: inline-block; background: #3a1d00; color: #fff; padding: .65rem 1.6rem; border-radius: 99px; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.sp-btn:hover, .sp-btn:focus-visible { background: #c8161d; color: #fff; transform: translateY(-2px); }
.sp-banner-img { padding: 0; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); }
.sp-banner-img::before, .sp-banner-img::after { display: none; }
.sp-banner-img img { display: block; width: 100%; height: auto; border-radius: 14px; }

/* offers slider (pure CSS, 3 slides x 4s) */
.sp-slider { position: relative; height: 340px; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #ffd23f 0%, #ffb21e 55%, #ff8a1f 100%); box-shadow: 0 8px 24px rgba(255, 138, 31, .25); color: #3a1d00; }
.sp-slider::before { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 255, 255, .22); top: -60px; right: -60px; }
.sp-slide { position: absolute; inset: 0; padding: 1.4rem 1.2rem 2.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; animation: sp-fade 12s infinite; }
.sp-s1 { animation-delay: 0s; } .sp-s2 { animation-delay: 4s; } .sp-s3 { animation-delay: 8s; }
.sp-ico { width: 64px; height: 64px; color: #3a1d00; margin-bottom: .6rem; }
.sp-kicker { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; background: #fff; color: #c8161d; padding: .2rem .7rem; border-radius: 99px; margin-bottom: .7rem; }
.sp-slide h3 { margin: 0 0 .5rem; font-size: 1.2rem; line-height: 1.25; color: #3a1d00; font-weight: 500; }
.sp-slide h3 b { font-size: 1.55rem; font-weight: 700; color: #c8161d; }
.sp-slide p { margin: 0 0 .9rem; font-size: .82rem; line-height: 1.4; }
.sp-dots { position: absolute; bottom: .8rem; left: 0; right: 0; display: flex; justify-content: center; gap: .4rem; }
.sp-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(58, 29, 0, .3); animation: sp-dot 12s infinite; }
.sp-dots i:nth-child(2) { animation-delay: 4s; } .sp-dots i:nth-child(3) { animation-delay: 8s; }
.sp-slider:hover .sp-slide, .sp-slider:hover .sp-dots i { animation-play-state: paused; }
@keyframes sp-fade { 0% { opacity: 0; transform: translateX(14px); } 5%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateX(-14px); } }
@keyframes sp-dot { 0%, 33% { background: #3a1d00; width: 18px; border-radius: 99px; } 34%, 100% { background: rgba(58, 29, 0, .3); width: 7px; } }
.sp-advertise { display: block; margin-top: .6rem; text-align: center; font-size: .75rem; color: var(--c-muted); text-decoration: underline; }
.sp-advertise:hover { color: var(--c-accent-text); }
@media (prefers-reduced-motion: reduce) { .sp-slide { animation: none; opacity: 0; } .sp-s1 { opacity: 1; } .sp-dots i { animation: none; } }