/*===========================================================================
  Shared storefront design system
  ---------------------------------------------------------------------------
  Every theme loads this file, then its own style.css on top. Themes differ by
  composition (which sections, in what order) and by the tunables declared
  here, not by duplicating component CSS.

  Colours come from the theme engine's :root block (--tp-theme-primary,
  --tp-site-bg, --tp-text-body, --tp-heading-primary, --tp-ff-body ...), so
  every theme is fully colour-editable by the merchant without any extra work.

  Theme tunables -- override these in a theme's style.css:
    --sf-radius        card / image corner radius
    --sf-radius-sm     button / input corner radius
    --sf-gap           grid gutter
    --sf-section-y     vertical rhythm between sections
    --sf-card-bg       product card background
    --sf-card-border   product card border
    --sf-card-shadow   product card resting shadow
    --sf-card-shadow-h product card hover shadow
    --sf-surface       secondary surface (rails, strips)
    --sf-muted         secondary text
    --sf-title-weight  section heading weight
    --sf-title-size    section heading size
===========================================================================*/

:root {
  --sf-radius: 10px;
  --sf-radius-sm: 8px;
  --sf-gap: 20px;
  --sf-section-y: 56px;
  --sf-card-bg: #fff;
  --sf-card-border: 1px solid rgba(0, 0, 0, .07);
  --sf-card-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --sf-card-shadow-h: 0 10px 30px rgba(0, 0, 0, .10);
  --sf-surface: rgba(0, 0, 0, .025);
  --sf-muted: rgba(0, 0, 0, .55);
  --sf-title-weight: 700;
  --sf-title-size: 24px;
  --sf-maxw: 1290px;
  --sf-ease: cubic-bezier(.4, 0, .2, 1);
}

/*--- layout -------------------------------------------------------------*/

.sf { color: var(--tp-text-body); }
.sf-wrap { max-width: var(--sf-maxw); margin: 0 auto; padding: 0 16px; }
.sf-section { padding: var(--sf-section-y) 0; }
.sf-section--tight { padding: calc(var(--sf-section-y) * .55) 0; }
.sf-section--surface { background: var(--sf-surface); }

.sf-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.sf-head h2 {
  font-size: var(--sf-title-size);
  font-weight: var(--sf-title-weight);
  color: var(--tp-heading-primary);
  margin: 0; line-height: 1.2;
}
.sf-head p { margin: 6px 0 0; font-size: 14px; color: var(--sf-muted); }
.sf-head-link {
  font-size: 13px; font-weight: 600; color: var(--tp-theme-primary);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.sf-head-link:hover { gap: 10px; transition: gap .2s var(--sf-ease); }

.sf-grid { display: grid; gap: var(--sf-gap); }
.sf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sf-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sf-grid--5 { grid-template-columns: repeat(5, 1fr); }
.sf-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* Horizontal rail -- scrolls on touch, no JS required. */
.sf-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr);
  gap: var(--sf-gap); overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 6px; scrollbar-width: thin;
}
.sf-rail > * { scroll-snap-align: start; }
.sf-rail::-webkit-scrollbar { height: 6px; }
.sf-rail::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 99px; }

/*--- buttons ------------------------------------------------------------*/

.sf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: var(--sf-radius-sm); border: 1px solid transparent;
  background: var(--tp-theme-primary); color: #fff;
  font-weight: 600; font-size: 14px; line-height: 1; cursor: pointer;
  transition: transform .18s var(--sf-ease), filter .18s var(--sf-ease);
}
.sf-btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.sf-btn--ghost {
  background: transparent; color: var(--tp-heading-primary);
  border-color: currentColor;
}
.sf-btn--ghost:hover { background: var(--tp-theme-primary); border-color: var(--tp-theme-primary); color: #fff; }
.sf-btn--sm { padding: 9px 18px; font-size: 13px; }
.sf-btn--block { width: 100%; }

/*--- product card -------------------------------------------------------*/

.sf-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--sf-card-bg); border: var(--sf-card-border);
  border-radius: var(--sf-radius); box-shadow: var(--sf-card-shadow);
  overflow: hidden; height: 100%;
  transition: box-shadow .25s var(--sf-ease), transform .25s var(--sf-ease);
}
.sf-card:hover { box-shadow: var(--sf-card-shadow-h); transform: translateY(-3px); }

.sf-card-media {
  position: relative; display: block; aspect-ratio: 1 / 1;
  background: var(--sf-surface); overflow: hidden;
}
.sf-card-media img {
  width: 100%; height: 100%; object-fit: contain; padding: 8%;
  transition: transform .45s var(--sf-ease);
}
.sf-card:hover .sf-card-media img { transform: scale(1.06); }
/* Themes where photography should fill the frame set this. */
.sf-card--cover .sf-card-media img { object-fit: cover; padding: 0; }

.sf-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--tp-theme-primary); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: var(--sf-radius-sm);
}
.sf-badge--out { background: rgba(0, 0, 0, .62); }

.sf-card-body { padding: 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.sf-card-brand { font-size: 11px; color: var(--sf-muted); text-transform: uppercase; letter-spacing: .05em; }
.sf-card-name {
  font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--tp-heading-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.8em;
}
.sf-card:hover .sf-card-name { color: var(--tp-theme-primary); }
.sf-card-foot { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sf-price { font-size: 16px; font-weight: 700; color: var(--tp-heading-primary); }
.sf-mrp { font-size: 13px; color: var(--sf-muted); text-decoration: line-through; }
.sf-off { font-size: 12px; font-weight: 700; color: #16a34a; }

.sf-stars { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: #f5a524; }
.sf-stars-n { color: var(--sf-muted); margin-left: 4px; }

/*--- category tiles -----------------------------------------------------*/

.sf-cat {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 18px 10px; border-radius: var(--sf-radius);
  background: var(--sf-card-bg); border: var(--sf-card-border);
  transition: box-shadow .22s var(--sf-ease), transform .22s var(--sf-ease);
}
.sf-cat:hover { box-shadow: var(--sf-card-shadow-h); transform: translateY(-3px); }
.sf-cat-img {
  width: 78px; height: 78px; border-radius: 50%; object-fit: cover;
  background: var(--sf-surface);
}
.sf-cat-name { font-size: 13px; font-weight: 600; color: var(--tp-heading-primary); line-height: 1.3; }
.sf-cat-n { font-size: 11px; color: var(--sf-muted); }

/* Square-tile variant used by the denser themes. */
.sf-cat--tile { padding: 0; overflow: hidden; gap: 0; }
.sf-cat--tile .sf-cat-img { width: 100%; height: auto; aspect-ratio: 1/1; border-radius: 0; }
.sf-cat--tile .sf-cat-name { padding: 10px 8px; }

/*--- hero ---------------------------------------------------------------*/

.sf-hero { position: relative; overflow: hidden; }
.sf-hero-slide { position: relative; display: block; }
.sf-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-hero-copy {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 14px; padding: 6vw;
  max-width: 620px;
}
.sf-hero-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tp-theme-primary);
}
.sf-hero-title { font-size: clamp(26px, 4vw, 50px); font-weight: 800; line-height: 1.08; color: var(--tp-heading-primary); margin: 0; }
.sf-hero-sub { font-size: clamp(14px, 1.3vw, 17px); color: var(--sf-muted); margin: 0; }
.sf-hero-copy .sf-btn { align-self: flex-start; }
/* Readability scrim for themes that place copy over full-bleed photography. */
.sf-hero--scrim .sf-hero-copy::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 70%);
  z-index: -1;
}
.sf-hero--scrim .sf-hero-title,
.sf-hero--scrim .sf-hero-sub { color: #fff; }

/*--- promo / trust ------------------------------------------------------*/

.sf-promo { position: relative; display: block; border-radius: var(--sf-radius); overflow: hidden; }
.sf-promo img { width: 100%; display: block; transition: transform .5s var(--sf-ease); }
.sf-promo:hover img { transform: scale(1.04); }
.sf-promo-copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 30px; }
.sf-promo-copy h3 { font-size: 20px; font-weight: 700; margin: 0 0 4px; color: #fff; }
.sf-promo-copy p { font-size: 13px; margin: 0; color: rgba(255, 255, 255, .88); }

.sf-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sf-gap); }
.sf-trust-item { display: flex; align-items: center; gap: 12px; }
.sf-trust-ico {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 17px;
  background: color-mix(in srgb, var(--tp-theme-primary) 12%, transparent);
  color: var(--tp-theme-primary);
}
.sf-trust-item h4 { font-size: 14px; font-weight: 600; margin: 0; color: var(--tp-heading-primary); }
.sf-trust-item p { font-size: 12px; margin: 1px 0 0; color: var(--sf-muted); }

/*--- empty state --------------------------------------------------------*/

.sf-empty {
  text-align: center; padding: 50px 20px; color: var(--sf-muted);
  border: 1px dashed rgba(0, 0, 0, .14); border-radius: var(--sf-radius);
}

/*--- responsive ---------------------------------------------------------*/

@media (max-width: 1200px) {
  .sf-grid--6 { grid-template-columns: repeat(4, 1fr); }
  .sf-grid--5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 992px) {
  :root { --sf-section-y: 42px; --sf-gap: 16px; --sf-title-size: 21px; }
  .sf-grid--6, .sf-grid--5, .sf-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .sf-trust { grid-template-columns: repeat(2, 1fr); }
  .sf-hero-copy { max-width: none; padding: 8vw 6vw; }
}
@media (max-width: 640px) {
  :root { --sf-section-y: 32px; --sf-gap: 12px; --sf-title-size: 19px; }
  .sf-grid--6, .sf-grid--5, .sf-grid--4, .sf-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .sf-card-body { padding: 11px; }
  .sf-card-name { font-size: 13px; }
  .sf-price { font-size: 15px; }
  .sf-cat-img { width: 62px; height: 62px; }
  .sf-rail { grid-auto-columns: minmax(150px, 1fr); }
  .sf-head { margin-bottom: 18px; }
}

/* Respect a visitor's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .sf-card, .sf-cat, .sf-promo img, .sf-card-media img, .sf-btn { transition: none !important; }
  .sf-card:hover, .sf-cat:hover { transform: none; }
  .sf-card:hover .sf-card-media img, .sf-promo:hover img { transform: none; }
}

/* ===========================================================================
   Shapes -- see themes/_shared/shapes.php

   These are the structures that make one layout look unlike another. The
   per-theme stylesheets then change proportion: card aspect, grid density,
   hero height, type scale.
   ======================================================================== */

/* --- split hero: picture beside the words, never under them -------------- */
.sf-split { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.sf-split--flip .sf-split-media { order:2; }
.sf-split-media { min-height:var(--sf-split-h,520px); overflow:hidden; background:var(--sf-surface); }
.sf-split-media img { width:100%; height:100%; object-fit:cover; display:block; }
.sf-split-copy { display:flex; align-items:center; padding:48px clamp(20px,5vw,72px); background:var(--sf-bg); }
.sf-split-copy .sf-hero-title { font-size:clamp(28px,3.4vw,52px); line-height:1.08; margin:10px 0 14px; }
.sf-split-copy .sf-hero-sub { max-width:46ch; margin-bottom:26px; }
@media (max-width:820px){
  .sf-split { grid-template-columns:1fr; }
  .sf-split--flip .sf-split-media { order:0; }
  .sf-split-media { min-height:300px; }
  .sf-split-copy { padding:32px 20px 40px; }
}

/* --- band hero: no photograph, search up front --------------------------- */
.sf-band { background:var(--sf-primary); color:#fff; }
.sf-band-in { padding:44px 16px 40px; text-align:center; }
.sf-band-promise { display:inline-block; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
                   background:rgba(255,255,255,.16); padding:5px 13px; border-radius:20px; margin-bottom:14px; }
.sf-band-title { font-size:clamp(26px,3.6vw,40px); margin:0 0 6px; color:#fff; }
.sf-band-sub { margin:0 0 22px; opacity:.9; }
.sf-band-search { display:flex; gap:8px; max-width:560px; margin:0 auto; }
.sf-band-search input { flex:1; padding:13px 16px; border:0; border-radius:var(--sf-radius,8px);
                        font:inherit; font-size:15px; }
.sf-band-search .sf-btn { background:#fff; color:var(--sf-primary); border:0; }

/* --- category chips: one scrolling row ----------------------------------- */
.sf-strip { border-bottom:1px solid var(--sf-line); background:var(--sf-bg); }
.sf-strip-in { display:flex; gap:10px; overflow-x:auto; padding:14px clamp(12px,4vw,24px);
               scrollbar-width:none; }
.sf-strip-in::-webkit-scrollbar { display:none; }
.sf-chip { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:7px;
           text-decoration:none; color:inherit; width:88px; }
.sf-chip-img { width:60px; height:60px; border-radius:50%; overflow:hidden; background:var(--sf-surface);
               display:block; }
.sf-chip-img img { width:100%; height:100%; object-fit:cover; }
.sf-chip-name { font-size:12px; text-align:center; line-height:1.3; }
.sf-chip:hover .sf-chip-name { color:var(--sf-primary); }

/* --- editorial block ----------------------------------------------------- */
.sf-editorial { padding:clamp(48px,7vw,96px) 0; }
.sf-editorial-in { max-width:660px; text-align:center; }
.sf-editorial-in h2 { font-size:clamp(22px,2.6vw,32px); margin:0 0 16px; }
.sf-editorial-in p { font-size:16px; line-height:1.85; color:var(--sf-text-2); margin:0 0 24px; }

/* --- deal strip ---------------------------------------------------------- */
.sf-dealstrip { background:var(--sf-ink,#1f2d3d); color:#fff; }
.sf-dealstrip-in { display:flex; gap:14px; align-items:center; justify-content:center;
                   padding:11px 16px; font-size:13.5px; flex-wrap:wrap; }
.sf-dealstrip-in a { color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* --- two large promo tiles ----------------------------------------------- */
.sf-duo { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sf-duo-item { position:relative; display:block; overflow:hidden; border-radius:var(--sf-radius,10px);
               min-height:260px; text-decoration:none; color:#fff; }
.sf-duo-item img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.sf-duo-copy { position:relative; padding:28px; background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.12)); height:100%; }
.sf-duo-copy h3 { margin:0 0 6px; font-size:22px; color:#fff; }
.sf-duo-copy p { margin:0 0 14px; opacity:.92; font-size:14px; }
.sf-duo-cta { font-size:13px; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:720px){ .sf-duo { grid-template-columns:1fr; } }

/* --- category list ------------------------------------------------------- */
.sf-catlist { border:1px solid var(--sf-line); border-radius:var(--sf-radius,10px); padding:16px 18px;
              background:var(--sf-bg); }
.sf-catlist h3 { margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.05em;
                 color:var(--sf-text-2); }
.sf-catlist ul { list-style:none; margin:0; padding:0; }
.sf-catlist li + li { border-top:1px solid var(--sf-line); }
.sf-catlist a { display:flex; justify-content:space-between; padding:9px 0; text-decoration:none;
                color:inherit; font-size:14px; }
.sf-catlist a:hover { color:var(--sf-primary); }
.sf-catlist span { color:var(--sf-text-2); font-size:12.5px; }