/* Homepage sections. Calm and roomy; product cards come from the theme so they match the rest of the shop. */
.spos-h{--spos-accent:#3F7D72;--spos-ink:#1F2A30;--spos-sub:#56656C;--spos-line:#E4EAEB;--spos-soft:#F4F6F5;--spos-r:22px;
  display:flex;flex-direction:column;gap:clamp(36px,6vw,72px);max-width:1240px;margin:0 auto;padding:clamp(12px,2vw,24px) 0 clamp(40px,6vw,80px);color:var(--spos-ink)}
.spos-h *{box-sizing:border-box}
.spos-h__sec{min-width:0}
.spos-h h1,.spos-h h2,.spos-h h3{color:inherit;margin:0;letter-spacing:-.02em;font-weight:700;line-height:1.12}
.spos-h__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px}
.spos-h__head h2{font-size:clamp(22px,2.6vw,30px)}
.spos-h__head a{font-weight:600;color:var(--spos-accent);text-decoration:none;white-space:nowrap}
.spos-h__head a:hover{text-decoration:underline}
.spos-h__btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:14px;background:var(--spos-accent);color:var(--spos-on-accent,#fff)!important;font-weight:600;font-size:16px;text-decoration:none!important;transition:filter .15s}
.spos-h__btn:hover{filter:brightness(.93)}
.spos-h__btn:focus-visible,.spos-h a:focus-visible{outline:2px solid var(--spos-accent);outline-offset:3px}
.spos-h__eyebrow{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--spos-accent)}
.spos-h__text{margin:10px 0 18px;font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:var(--spos-sub)}
.spos-h__img{display:block;width:100%;height:100%;object-fit:cover}

/* Big picture */
.spos-h__hero{position:relative;border-radius:var(--spos-r);overflow:hidden;background:#E3DDD3}
.spos-h__hero .spos-h__media{position:absolute;inset:0}
.spos-h__hero.h-tall{min-height:clamp(420px,62vh,640px)}
.spos-h__hero.h-medium{min-height:clamp(320px,44vh,480px)}
.spos-h__hero.h-short{min-height:clamp(220px,28vh,320px)}
.spos-h__hero h1,.spos-h__hero h2{font-size:clamp(30px,4.6vw,56px)}
.spos-h__copy h1,.spos-h__copy h2,.spos-h__copy p{text-wrap:pretty}
.spos-h__hero .spos-h__copy{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,40px)}
.spos-h__hero.is-card .spos-h__copy{left:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);max-width:560px;border-radius:18px;background:rgba(255,255,255,.94);background:color-mix(in srgb,var(--spos-surface,#fff) calc(var(--spos-veil,.94)*100%),transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.spos-h__hero.is-over .spos-h__copy{color:#fff;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));padding-top:120px}
.spos-h__hero.is-over .spos-h__text{color:rgba(255,255,255,.88)}
.spos-h__hero.is-over .spos-h__eyebrow{color:#fff}
.spos-h__hero.no-img{background:var(--spos-soft)}
.spos-h__hero.no-img.is-over{background:var(--spos-accent)}
.spos-h__hero.no-img.is-over .spos-h__copy{background:none}
.spos-h__hero.no-img.is-over .spos-h__btn{background:#fff;color:var(--spos-ink)!important}
@media (min-width:860px){
  .spos-h__hero.is-beside{display:grid;grid-template-columns:1fr 1fr;background:var(--spos-soft)}
  .spos-h__hero.is-beside .spos-h__media{position:relative;order:2}
  .spos-h__hero.is-beside .spos-h__copy{position:static;align-self:center;padding:clamp(28px,4vw,56px)}
}
@media (max-width:859px){
  .spos-h__hero.is-beside{min-height:0;background:var(--spos-soft)}
  .spos-h__hero.is-beside .spos-h__media{position:relative;aspect-ratio:4/3}
  .spos-h__hero.is-beside .spos-h__copy{position:static}
}

/* Categories */
.spos-h__cats{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.spos-h__cats li{margin:0}
.spos-h__cats a{display:block;text-decoration:none;color:inherit}
.spos-h__cats.is-tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.spos-h__cats.is-tiles .spos-h__cat-img{display:block;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--spos-soft)}
.spos-h__cats.is-tiles .spos-h__cat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.spos-h__cats.is-tiles a:hover img{transform:scale(1.04)}
.spos-h__cats.is-tiles .spos-h__cat-name{display:block;margin-top:8px;font-weight:600;font-size:15px}
.spos-h__cats.is-circles{grid-auto-flow:column;grid-auto-columns:96px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;gap:16px;scrollbar-width:none}
.spos-h__cats.is-circles::-webkit-scrollbar{display:none}
.spos-h__cats.is-circles li{scroll-snap-align:start;text-align:center}
.spos-h__cats.is-circles .spos-h__cat-img{display:block;width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--spos-soft)}
.spos-h__cats.is-circles img{width:100%;height:100%;object-fit:cover;display:block}
.spos-h__cats.is-circles .spos-h__cat-name{display:block;margin-top:8px;font-weight:600;font-size:14px}
.spos-h__cats.is-pills{display:flex;flex-wrap:wrap;gap:8px}
.spos-h__cats.is-pills .spos-h__cat-img{display:none}
.spos-h__cats.is-pills a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:22px;background:var(--spos-soft);font-weight:600}
.spos-h__cats.is-pills a:hover{background:var(--spos-line)}
.spos-h__cat-img.is-empty{background:linear-gradient(135deg,var(--spos-soft),var(--spos-line))!important}

/* Products: WooCommerce's list, laid out as a swipe row or a grid */
.spos-h__products .woocommerce{margin:0}
.spos-h__products ul.products{margin:0!important;padding:0!important}
.spos-h__products ul.products::before,.spos-h__products ul.products::after{display:none!important}
.spos-h__products.is-row ul.products{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(200px,calc((100% - (var(--spt-cols,4) - 1)*16px)/var(--spt-cols,4)));gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px!important;scrollbar-width:thin}
.spos-h__products.is-grid ul.products{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px}
.spos-h__products ul.products li.product{width:auto!important;margin:0!important;float:none!important;max-width:none!important;scroll-snap-align:start;flex:none!important;padding:0!important}
@media (max-width:860px){
  .spos-h__products.is-row ul.products{grid-auto-columns:minmax(150px,44%)}
  .spos-h__products.is-grid ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
}

/* Brands */
.spos-h__brands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.spos-h__brands li{margin:0}
.spos-h__brands a{display:flex;align-items:center;justify-content:center;height:84px;padding:14px;border-radius:16px;background:var(--spos-soft);text-decoration:none;color:var(--spos-ink);font-weight:700;font-size:16px;text-align:center}
.spos-h__brands a:hover{background:var(--spos-line)}
.spos-h__brands img{max-height:100%;max-width:100%;width:auto;object-fit:contain}

/* Banner */
.spos-h__banner{position:relative;border-radius:var(--spos-r);overflow:hidden;display:grid;align-items:center;min-height:200px}
.spos-h__banner .spos-h__copy{position:relative;padding:clamp(24px,4vw,48px);max-width:680px}
.spos-h__banner h2{font-size:clamp(24px,3vw,38px)}
.spos-h__banner.is-accent{background:var(--spos-accent);color:var(--spos-on-accent,#fff)}
.spos-h__banner.is-accent .spos-h__text{color:rgba(255,255,255,.88)}
.spos-h__banner.is-accent .spos-h__btn{background:#fff;color:var(--spos-ink)!important}
.spos-h__banner.is-soft{background:var(--spos-soft)}
.spos-h__banner.is-dark{background:#1F2A30;color:#fff}
.spos-h__banner.is-dark .spos-h__text{color:rgba(255,255,255,.8)}
.spos-h__banner.has-img{color:#fff}
.spos-h__banner.has-img .spos-h__media{position:absolute;inset:0}
.spos-h__banner.has-img .spos-h__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.1))}
.spos-h__banner.has-img .spos-h__text{color:rgba(255,255,255,.88)}

/* Deals */
.spos-h__deals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.spos-h__deals li{margin:0}
.spos-h__deals a{display:flex;flex-direction:column;gap:4px;height:100%;padding:18px;border-radius:18px;background:var(--spos-soft);text-decoration:none;color:var(--spos-ink);border:1px solid transparent}
.spos-h__deals a:hover{border-color:var(--spos-line)}
.spos-h__deal-label{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#B0432F}
.spos-h__deal-name{font-weight:600}
.spos-h__deal-ends{font-size:13px;color:var(--spos-sub)}

/* Text and visit */
.spos-h__prose{max-width:720px}
.spos-h__prose.is-center{margin:0 auto;text-align:center}
.spos-h__prose h2{font-size:clamp(24px,3vw,36px);margin-bottom:12px}
.spos-h__prose p{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--spos-sub);margin:0 0 12px}
.spos-h__visit{border-radius:var(--spos-r);background:var(--spos-soft);padding:clamp(24px,4vw,44px)}
.spos-h__visit h2{font-size:clamp(24px,3vw,34px);margin-bottom:18px}
.spos-h__visit-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.spos-h__visit h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--spos-sub);margin-bottom:6px}
.spos-h__visit p{margin:0 0 8px;line-height:1.55}
.spos-h__link{color:var(--spos-accent);font-weight:600}
@media (prefers-reduced-motion:reduce){.spos-h *{transition:none!important}}
.spos-h__off{margin:0;padding:10px 14px;border-radius:12px;background:#F6EEDA;color:#7A5F22;font-weight:600;font-size:14px}

/* Many themes keep page text in a narrow column. The sections break out of it to a shop-wide width. */
.spos-h{width:min(1240px,calc(100vw - 32px))!important;max-width:none!important;position:relative;left:50%;transform:translateX(-50%);margin-left:0!important;margin-right:0!important}
.spos-h__products ul.products li.product a img{width:100%!important;height:auto;margin:0 0 10px!important;border-radius:14px;aspect-ratio:1;object-fit:cover}
.spos-h__products ul.products li.product .button{white-space:nowrap}
.spos-h__products .woocommerce{max-width:none!important;width:auto!important;margin:0!important;padding:0!important}
.spos-h__products ul.products{width:auto!important;max-width:none!important;justify-items:stretch!important}
.spos-h__products ul.products li.product{width:100%!important;min-width:0!important;justify-self:stretch!important;display:flex;flex-direction:column}
.spos-h__products ul.products li.product{align-items:stretch!important;text-align:left}
.spos-h__products ul.products li.product>a:first-child{display:block!important;width:100%!important}
.spos-h__products ul.products li.product .button,.spos-h__products ul.products li.product .added_to_cart{align-self:flex-start;margin-top:auto}
.spos-h__products.is-row ul.products{grid-template-columns:none!important;grid-auto-flow:column!important;grid-auto-columns:minmax(200px,calc((100% - 3*16px)/4))!important}
.spos-h__products.is-grid ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:860px){
  .spos-h__products.is-row ul.products{grid-auto-columns:minmax(150px,44%)!important}
  .spos-h__products.is-grid ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Stronger than the column widths themes give ul.products.columns-N li.product. */
.spos-h .spos-h__products ul.products.products li.product.product{width:100%!important;max-width:none!important;margin:0!important;float:none!important}
.spos-h__products ul.products li.product .button{border-radius:14px!important}
.spos-h__brands img,.spos-h__cats img{border-radius:inherit}
/* Categories without a photo: an icon in the shop colour on a soft circle or tile */
.spos-h__cat-img.has-icon{display:grid!important;place-items:center;color:var(--spos-accent-text,var(--spos-accent))}
.spos-h__cat-img.has-icon.is-empty{background:var(--spos-soft)!important}
.spos-h__cats.is-tiles .spos-h__cat-icon{width:34%;height:auto}
.spos-h__cats.is-pills .spos-h__cat-img.has-icon{display:inline-grid!important;background:none!important;margin-right:8px}
.spos-h__cats.is-pills .spos-h__cat-img.has-icon svg{width:18px;height:18px}
/* Banner with a drawing instead of a photo: words and drawing side by side, drawing on top on phones */
.spos-h__hero.has-art{display:grid;grid-template-columns:1fr;min-height:0!important;background:var(--spos-soft)}
.spos-h__hero.has-art .spos-h__media{position:relative;inset:auto;display:grid;place-items:center;padding:clamp(16px,3vw,32px) clamp(16px,3vw,32px) 0}
.spos-h__hero.has-art .spos-art{width:100%;max-width:520px;height:auto}
.spos-h__hero.has-art .spos-h__copy{position:static!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:inherit!important;padding:clamp(20px,4vw,56px)!important;max-width:none!important}
.spos-h__hero.has-art .spos-h__text{color:var(--spos-sub)!important}
.spos-h__hero.has-art .spos-h__eyebrow{color:var(--spos-accent)!important}
@media (min-width:860px){
  .spos-h__hero.has-art{grid-template-columns:1.05fr 1fr;align-items:center}
  .spos-h__hero.has-art .spos-h__media{order:2;padding:clamp(24px,3vw,40px)}
}

/* ---------- Slider: a row of big pictures that snaps one at a time ---------- */
.spos-h__slider{position:relative;border-radius:var(--spos-r);overflow:hidden;background:#E3DDD3}
.spos-h__slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.spos-h__slides::-webkit-scrollbar{display:none}
.spos-h__slides:focus-visible{outline:2px solid var(--spos-accent);outline-offset:-4px}
.spos-h__slide{position:relative;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.spos-h__slider.h-tall .spos-h__slide{min-height:clamp(420px,62vh,640px)}
.spos-h__slider.h-medium .spos-h__slide{min-height:clamp(320px,44vh,480px)}
.spos-h__slider.h-short .spos-h__slide{min-height:clamp(220px,28vh,320px)}
.spos-h__slide .spos-h__media{position:absolute;inset:0}
.spos-h__slide h1,.spos-h__slide h2{font-size:clamp(30px,4.6vw,56px)}
.spos-h__slide .spos-h__copy{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,40px) clamp(20px,3vw,40px) clamp(44px,5vw,56px)}
.spos-h__slider.is-over .spos-h__copy{color:#fff;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));padding-top:120px}
.spos-h__slider.is-over .spos-h__text{color:rgba(255,255,255,.88)}
.spos-h__slider.is-over .spos-h__eyebrow{color:#fff}
.spos-h__slider.is-card .spos-h__copy{left:clamp(12px,2vw,24px);right:auto;bottom:clamp(36px,4vw,48px);max-width:min(560px,calc(100% - 24px));border-radius:18px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:clamp(18px,3vw,32px)}
.spos-h__slide.no-img{background:var(--spos-accent)}
.spos-h__slider.is-over .spos-h__slide.no-img .spos-h__copy{background:none}
.spos-h__slide.no-img .spos-h__btn{background:#fff;color:var(--spos-ink)!important}
.spos-h__arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--spos-ink);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.15);padding:0}
.spos-h__arrow.is-prev{left:14px}.spos-h__arrow.is-next{right:14px}
.spos-h__arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:700px),(hover:none){.spos-h__arrow{display:none}}
.spos-h__dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:4px}
.spos-h__dots button{width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.spos-h__dots button::before{content:"";width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.15);transition:width .2s}
.spos-h__dots button[aria-current]::before{width:22px;background:#fff}

/* ---------- Image boxes ---------- */
.spos-h__boxes{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.6vw,18px);grid-template-columns:1fr}
@media (min-width:600px){.spos-h__boxes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.spos-h__boxes{grid-template-columns:repeat(var(--per,3),minmax(0,1fr))}}
.spos-h__boxes li{margin:0;min-width:0}
.spos-h__boxes a,.spos-h__boxes li>div{display:block;position:relative;text-decoration:none;color:inherit;border-radius:var(--spos-r);overflow:hidden}
.spos-h__box-media{display:block;background:var(--spos-soft);overflow:hidden}
.spos-h__boxes.shape-wide .spos-h__box-media{aspect-ratio:16/10}
.spos-h__boxes.shape-square .spos-h__box-media{aspect-ratio:1}
.spos-h__boxes.shape-tall .spos-h__box-media{aspect-ratio:4/5}
.spos-h__box-media.no-img{background:linear-gradient(135deg,var(--spos-soft),var(--spos-line))}
.spos-h__box-media img{transition:transform .5s ease}
.spos-h__boxes a:hover .spos-h__box-media img{transform:scale(1.05)}
.spos-h__box-words{display:block}
.spos-h__box-words h3{font-size:clamp(18px,1.8vw,22px)}
.spos-h__box-words p{margin:4px 0 0;font-size:14px}
.spos-h__boxes.is-over .spos-h__box-words{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2vw,24px);color:#fff;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));padding-top:60px}
.spos-h__boxes.is-over .spos-h__box-words p{color:rgba(255,255,255,.88)}
.spos-h__boxes.is-below a,.spos-h__boxes.is-below li>div{border-radius:0;overflow:visible}
.spos-h__boxes.is-below .spos-h__box-media{border-radius:var(--spos-r)}
.spos-h__boxes.is-below .spos-h__box-words{padding:12px 2px 0}
.spos-h__boxes.is-below .spos-h__box-words p{color:var(--spos-sub)}

/* ---------- Features ---------- */
.spos-h__features{list-style:none;margin:0;padding:0;display:grid;gap:14px 22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.spos-h__features li{margin:0;display:flex;align-items:center;gap:14px;min-width:0}
.spos-h__feat-ico{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--spos-soft);color:var(--spos-accent)}
.spos-h__features strong{display:block;font-size:16px;line-height:1.3}
.spos-h__features small{display:block;font-size:14px;line-height:1.4;color:var(--spos-sub);margin-top:2px}
.spos-h__features.is-cards li{padding:18px;border-radius:18px;border:1px solid var(--spos-line);background:var(--c-surface,#fff)}
.spos-h__features.is-band{padding:clamp(18px,3vw,28px);border-radius:var(--spos-r);background:var(--spos-accent);color:var(--spos-on-accent,#fff)}
.spos-h__features.is-band .spos-h__feat-ico{background:rgba(255,255,255,.16);color:inherit}
.spos-h__features.is-band small{color:inherit;opacity:.85}

/* ---------- Product tabs ---------- */
.spos-h__tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 18px;padding:2px}
.spos-h__tabs::-webkit-scrollbar{display:none}
.spos-h__tabs [role=tab]{flex:none;min-height:42px;padding:0 18px;border-radius:21px;border:1px solid var(--spos-line);background:transparent;color:var(--spos-ink);font:inherit;font-weight:600;font-size:15px;cursor:pointer}
.spos-h__tabs [role=tab][aria-selected=true]{background:var(--spos-ink);border-color:var(--spos-ink);color:#fff}
.spos-h__tabs [role=tab]:focus-visible{outline:2px solid var(--spos-accent);outline-offset:2px}
.spos-h__tabpanel[hidden]{display:none}

/* ---------- Countdown ---------- */
.spos-h__cd{display:flex;gap:10px;margin:6px 0 20px;flex-wrap:wrap}
.spos-h__cd-unit{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:10px 6px;border-radius:14px;background:rgba(255,255,255,.14)}
.spos-h__countdown.is-soft .spos-h__cd-unit{background:#fff}
.spos-h__cd-unit b{font-size:clamp(24px,3vw,34px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.spos-h__cd-unit small{font-size:12px;margin-top:4px;opacity:.8;text-transform:uppercase;letter-spacing:.06em}

/* ---------- Reviews ---------- */
.spos-h__reviews{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.spos-h__reviews li{margin:0;padding:20px;border-radius:18px;background:var(--spos-soft);display:flex;flex-direction:column;gap:10px}
.spos-h__stars{color:#E0A100;font-size:18px;letter-spacing:2px;line-height:1}
.spos-h__stars span{color:var(--spos-line)}
.spos-h__reviews blockquote{margin:0;padding:0;border:0;font-size:16px;line-height:1.5;font-style:normal;color:var(--spos-ink);flex:1}
.spos-h__who{margin:0;font-size:14px;color:var(--spos-sub)}
.spos-h__who a{color:inherit;font-weight:600}

/* ---------- Video ---------- */
.spos-h__head.is-stack{display:block}
.spos-h__head.is-stack p{margin:8px 0 0;color:var(--spos-sub);max-width:640px}
.spos-h__video{position:relative;aspect-ratio:16/9;border-radius:var(--spos-r);overflow:hidden;background:#1F2A30}
.spos-h__play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;background:none;cursor:pointer;display:block}
.spos-h__play-ico{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#1F2A30;box-shadow:0 6px 24px rgba(0,0,0,.25);transition:transform .2s}
.spos-h__play-ico svg{margin-left:4px;fill:currentColor}
.spos-h__play:hover .spos-h__play-ico{transform:translate(-50%,-50%) scale(1.06)}
.spos-h__play:focus-visible{outline:3px solid var(--spos-accent);outline-offset:-3px}
.spos-h__iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Journal ---------- */
.spos-h__posts{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2vw,24px);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.spos-h__posts li{margin:0}
.spos-h__posts a{display:block;text-decoration:none;color:inherit}
.spos-h__post-media{display:block;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--spos-soft)}
.spos-h__post-media.no-img{background:linear-gradient(135deg,var(--spos-soft),var(--spos-line))}
.spos-h__post-media img{transition:transform .5s ease}
.spos-h__posts a:hover img{transform:scale(1.04)}
.spos-h__post-date{display:block;margin:12px 0 4px;font-size:13px;color:var(--spos-sub)}
.spos-h__posts h3{font-size:19px}
.spos-h__posts p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--spos-sub)}

/* ---------- Newsletter ---------- */
.spos-h__news{display:grid;gap:18px;align-items:center;padding:clamp(24px,4vw,48px);border-radius:var(--spos-r)}
@media (min-width:860px){.spos-h__news{grid-template-columns:1fr 1fr}}
.spos-h__news h2{font-size:clamp(24px,3vw,36px)}
.spos-h__news .spos-h__text{margin-bottom:0}
.spos-h__news.is-soft{background:var(--spos-soft)}
.spos-h__news.is-accent{background:var(--spos-accent);color:var(--spos-on-accent,#fff)}
.spos-h__news.is-dark{background:#1F2A30;color:#fff}
.spos-h__news.is-accent .spos-h__text,.spos-h__news.is-dark .spos-h__text{color:inherit;opacity:.85}
.spos-h__news.is-accent .spos-h__btn,.spos-h__news.is-dark .spos-h__btn{background:#fff;color:#1F2A30!important}
.spos-h__news-form{display:flex;flex-wrap:wrap;gap:10px}
.spos-h__news-form input[type=email]{flex:1 1 220px;min-width:0;min-height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--spos-line);background:#fff;color:#1F2A30;font:inherit;font-size:16px}
.spos-h__news-form .spos-h__btn{border:0;cursor:pointer;font:inherit;font-weight:600}
.spos-h__news-form .spos-h__btn:disabled{opacity:.6;cursor:default}
.spos-h__news-form.is-done input[type=email],.spos-h__news-form.is-done .spos-h__btn{display:none}
.spos-h__news-msg{flex-basis:100%;margin:0;font-size:15px;font-weight:600;min-height:1em}
.spos-h__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* ---------- Questions ---------- */
.spos-h__faq{max-width:820px;border-top:1px solid var(--spos-line)}
.spos-h__faq details{border-bottom:1px solid var(--spos-line)}
.spos-h__faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;cursor:pointer;list-style:none;font-weight:600;font-size:17px}
.spos-h__faq summary::-webkit-details-marker{display:none}
.spos-h__faq summary .spos-h__ico{flex:none;transition:transform .2s;color:var(--spos-sub)}
.spos-h__faq details[open] summary .spos-h__ico{transform:rotate(180deg)}
.spos-h__faq summary:focus-visible{outline:2px solid var(--spos-accent);outline-offset:2px}
.spos-h__faq-a{padding:0 2px 18px;color:var(--spos-sub);line-height:1.6}
.spos-h__faq-a p{margin:0 0 10px}

@media (prefers-reduced-motion:reduce){.spos-h *{transition:none!important}}
/* Phones: features two side by side, icon above, so four lines take two rows instead of four */
@media (max-width:599px){
  .spos-h__features:not(.is-cards){grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .spos-h__features:not(.is-cards) li{flex-direction:column;align-items:flex-start;gap:8px}
  .spos-h__features .spos-h__feat-ico{width:44px;height:44px}
}

/* Ready-made photos with the empty space on the right: the card sits on the right, never over the subject. */
.spos-h__hero.side-right.is-card .spos-h__copy{left:auto}
@media(max-width:700px){.spos-h__hero.side-right.is-card .spos-h__copy{left:clamp(12px,2vw,24px)}}

/* Phone: a card over the photo would hide the dog or cat. Photo on top, the words on a card beneath it. */
@media (max-width:700px){
  .spos-h__hero.is-card:not(.no-img){min-height:0;background:var(--spos-soft)}
  .spos-h__hero.is-card:not(.no-img) .spos-h__media{position:relative;inset:auto;aspect-ratio:4/3}
  .spos-h__hero.is-card.h-short:not(.no-img) .spos-h__media{aspect-ratio:16/9}
  .spos-h__hero.is-card:not(.no-img) .spos-h__copy{position:static;max-width:none;margin:0;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding:18px 18px 22px}
}
/* a ready-made photo with its empty space on the right: the card sits there, off the subject */
.spos-h__slider.is-card .spos-h__slide.side-right .spos-h__copy{left:auto;right:clamp(12px,2vw,24px)}
@media(max-width:700px){.spos-h__slider.is-card .spos-h__slide.side-right .spos-h__copy{left:clamp(12px,2vw,24px);right:auto}}

/* ---------- Design pass: calmer headings, roomier cards, soft lift on hover ---------- */
.spos-h{--spos-shadow:0 1px 2px rgba(31,42,48,.05),0 8px 24px -12px rgba(31,42,48,.16);--spos-shadow-up:0 2px 4px rgba(31,42,48,.06),0 16px 32px -14px rgba(31,42,48,.24)}
.spos-h__head{align-items:flex-end;margin-bottom:22px}
.spos-h__head h2{position:relative;padding-bottom:12px}
.spos-h__head h2::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;border-radius:2px;background:var(--spos-accent)}
.spos-h__head a{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:999px;background:var(--spos-soft);font-size:14px;transition:background .15s}
.spos-h__head a:hover{background:var(--spos-line);text-decoration:none}
.spos-h__btn{box-shadow:0 6px 16px -8px var(--spos-accent);transition:transform .15s,filter .15s,box-shadow .15s}
.spos-h__btn:hover{transform:translateY(-1px);filter:none;box-shadow:0 10px 20px -8px var(--spos-accent)}
.spos-h__hero,.spos-h__banner,.spos-h__news,.spos-h__visit,.spos-h__slider,.spos-h__video{box-shadow:var(--spos-shadow)}

/* Categories: bigger tiles, names under them, a soft lift */
.spos-h__cats.is-tiles{grid-template-columns:repeat(auto-fill,minmax(160px,200px));gap:18px;justify-content:start}
.spos-h__cats.is-tiles a{transition:transform .2s}
.spos-h__cats.is-tiles a:hover{transform:translateY(-3px)}
.spos-h__cats.is-tiles .spos-h__cat-img{box-shadow:var(--spos-shadow)}
.spos-h__cats.is-tiles .spos-h__cat-name{margin-top:10px;font-size:16px}
.spos-h__cats.is-circles .spos-h__cat-img{box-shadow:var(--spos-shadow)}
.spos-h__cats.is-pills a{border:1px solid transparent;transition:border-color .15s,background .15s}
.spos-h__cats.is-pills a:hover{border-color:var(--spos-accent);background:#fff}

/* Cards that lift: brands, deals, reviews, image boxes, features */
.spos-h__brands a{background:#fff;border:1px solid var(--spos-line);transition:transform .2s,box-shadow .2s,border-color .2s}
.spos-h__brands a:hover{background:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:var(--spos-shadow-up)}
.spos-h__deals a{background:#fff;border-color:var(--spos-line);box-shadow:var(--spos-shadow);transition:transform .2s,box-shadow .2s}
.spos-h__deals a:hover{border-color:var(--spos-line);transform:translateY(-2px);box-shadow:var(--spos-shadow-up)}
.spos-h__reviews li{background:#fff;border:1px solid var(--spos-line);box-shadow:var(--spos-shadow);padding:22px}
.spos-h__boxes a,.spos-h__boxes li>div{box-shadow:var(--spos-shadow);transition:transform .2s,box-shadow .2s}
.spos-h__boxes a:hover{transform:translateY(-3px);box-shadow:var(--spos-shadow-up)}
.spos-h__boxes.is-below a,.spos-h__boxes.is-below li>div{box-shadow:none}
.spos-h__boxes.is-below a:hover{box-shadow:none}
.spos-h__features li{padding:6px 0}
.spos-h__features.is-cards li{box-shadow:var(--spos-shadow);transition:transform .2s,box-shadow .2s}
.spos-h__features.is-cards li:hover{transform:translateY(-2px);box-shadow:var(--spos-shadow-up)}
.spos-h__feat-ico{width:56px;height:56px;background:color-mix(in srgb,var(--spos-accent) 12%,#fff)}
.spos-h__posts a{transition:transform .2s}
.spos-h__posts a:hover{transform:translateY(-3px)}

/* Banner and newsletter: a little shape on the coloured ones */
.spos-h__banner.is-accent,.spos-h__news.is-accent{background-image:radial-gradient(circle at 92% 12%,rgba(255,255,255,.18) 0,rgba(255,255,255,0) 42%),radial-gradient(circle at 84% 120%,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 46%)}
.spos-h__banner.is-dark,.spos-h__news.is-dark{background-image:radial-gradient(circle at 92% 12%,rgba(255,255,255,.08) 0,rgba(255,255,255,0) 42%)}
.spos-h__banner.is-soft{border:1px solid var(--spos-line)}

/* Questions: each one a card, full width */
.spos-h__faq{max-width:none;border-top:0;display:grid;gap:10px}
.spos-h__faq details{border:1px solid var(--spos-line);border-radius:16px;background:#fff;box-shadow:var(--spos-shadow);transition:border-color .15s}
.spos-h__faq details[open]{border-color:var(--spos-accent)}
.spos-h__faq summary{padding:18px 22px}
.spos-h__faq-a{padding:0 22px 20px}
@media (min-width:900px){.spos-h__faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}

/* Product tabs: the picked one in the shop colour */
.spos-h__tabs [role=tab][aria-selected=true]{background:var(--spos-accent);border-color:var(--spos-accent);color:var(--spos-on-accent,#fff)}
@media (prefers-reduced-motion:reduce){.spos-h *{transition:none!important}}
/* Price table */
.spos-h__price-lede{margin:-8px 0 24px;color:var(--spos-sub);font-size:17px;max-width:60ch}
.spos-h__price{display:grid;gap:18px;align-items:stretch;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.spos-h__price--1{max-width:420px}
.spos-h__price--2{max-width:860px}
.spos-h__price.is-band{padding:clamp(18px,3vw,36px);border-radius:var(--spos-r);background:var(--spos-soft)}
.spos-h__plan{position:relative;display:flex;flex-direction:column;padding:30px 26px 26px;border-radius:var(--spos-r);background:#fff;border:1px solid var(--spos-line);box-shadow:var(--spos-shadow);transition:transform .2s,box-shadow .2s}
.spos-h__plan:hover{transform:translateY(-3px);box-shadow:var(--spos-shadow-up)}
.spos-h__plan.is-featured{border:2px solid var(--spos-accent);padding-top:36px}
@media (min-width:800px){.spos-h__plan.is-featured{transform:scale(1.03);z-index:1}.spos-h__plan.is-featured:hover{transform:scale(1.03) translateY(-3px)}}
.spos-h__plan-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:6px 14px;border-radius:999px;background:var(--spos-accent);color:var(--spos-on-accent,#fff);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.spos-h__plan-name{margin:0 0 10px;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--spos-sub)}
.spos-h__plan.is-featured .spos-h__plan-name{color:var(--spos-accent)}
.spos-h__plan-price{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;color:var(--spos-ink)}
.spos-h__plan-price strong{font-size:clamp(36px,4vw,46px);line-height:1.05;font-weight:800;letter-spacing:-.02em}
.spos-h__plan-price span{color:var(--spos-sub);font-size:15px}
.spos-h__plan-text{margin:10px 0 0;color:var(--spos-sub);line-height:1.5}
.spos-h__plan-list{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--spos-line);display:grid;gap:11px;flex:1}
.spos-h__plan-list li{display:flex;gap:10px;align-items:flex-start;line-height:1.4;color:var(--spos-ink)}
.spos-h__plan-list svg{flex:none;margin-top:1px;padding:3px;width:22px;height:22px;border-radius:50%;background:var(--spos-soft);color:var(--spos-accent)}
.spos-h__plan-list li.is-off{color:var(--spos-sub)}
.spos-h__plan-list li.is-off span:first-of-type{text-decoration:line-through;text-decoration-color:rgba(86,101,108,.45)}
.spos-h__plan-list li.is-off svg{background:transparent;color:var(--spos-line);color:#B7C2C5}
.spos-h__plan-btn{margin-top:24px;width:100%}
.spos-h__btn.is-ghost{background:transparent;color:var(--spos-accent)!important;box-shadow:inset 0 0 0 1.5px var(--spos-accent)}
.spos-h__btn.is-ghost:hover{background:var(--spos-soft)}
.spos-h__price-note{margin:18px 0 0;font-size:14px;color:var(--spos-sub)}
@media (prefers-reduced-motion:reduce){.spos-h__plan,.spos-h__plan:hover,.spos-h__plan.is-featured{transition:none;transform:none}}

/* ---------- Top list: big rank numbers behind each product, on a coloured band ---------- */
.spos-h__rankband{background:linear-gradient(135deg,color-mix(in srgb,var(--c-accent,#3F7D72) 12%,#fff) 0%,color-mix(in srgb,#F4B740 14%,#fff) 100%);border-radius:28px;padding:28px 28px 20px;position:relative;overflow:hidden}
.spos-h__rankband::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:color-mix(in srgb,#F4B740 22%,transparent);pointer-events:none}
.spos-h__rankband .spos-h__head h2::before{content:"🔥 ";}
.spos-h__products.is-rank ul.products{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column!important;grid-auto-columns:minmax(230px,calc((100% - 3*20px)/4))!important;gap:20px!important;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 12px!important;counter-reset:spos-rank;scrollbar-width:thin;position:relative;z-index:1}
.spos-h__products.is-rank ul.products li.product{counter-increment:spos-rank;position:relative;padding:0 0 0 58px!important;scroll-snap-align:start;background:none!important;box-shadow:none!important}
.spos-h__products.is-rank ul.products li.product::before{content:counter(spos-rank);position:absolute;left:-6px;top:24px;font-size:150px;font-weight:900;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:3px color-mix(in srgb,var(--c-accent,#3F7D72) 70%,#000);z-index:0;font-family:Georgia,'Times New Roman',serif;pointer-events:none}
.spos-h__products.is-rank ul.products li.product:nth-child(1)::before{color:#F4B740;-webkit-text-stroke:0;text-shadow:0 6px 18px rgba(244,183,64,.45)}
.spos-h__products.is-rank ul.products li.product:nth-child(2)::before{color:#B8C2CC;-webkit-text-stroke:0;text-shadow:0 6px 16px rgba(120,130,140,.35)}
.spos-h__products.is-rank ul.products li.product:nth-child(3)::before{color:#D08A57;-webkit-text-stroke:0;text-shadow:0 6px 16px rgba(208,138,87,.35)}
.spos-h__products.is-rank ul.products li.product>*:not(.spos-heart){position:relative;z-index:1}
.spos-h__products.is-rank ul.products li.product>a.woocommerce-LoopProduct-link{position:relative}
.spos-h__products.is-rank ul.products li.product>a.woocommerce-LoopProduct-link img{box-shadow:0 10px 26px rgba(30,40,50,.12)}
body .spos-h .spos-h__products.is-rank ul.products li.product .spos-heart.is-card{position:absolute!important;left:auto!important;right:10px!important;top:10px!important;transform:none!important;z-index:3}
.spos-h__products.is-rank ul.products li.product:nth-child(-n+3)>a.woocommerce-LoopProduct-link::after{content:"HOT";position:absolute;top:10px;left:10px;z-index:2;background:#E5484D;color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px}
@media (max-width:760px){
  .spos-h__rankband{padding:20px 14px 14px;border-radius:22px;margin:0 -4px}
  .spos-h__products.is-rank ul.products{grid-auto-columns:minmax(170px,62%)!important;gap:14px!important}
  .spos-h__products.is-rank ul.products li.product{padding-left:42px!important}
  .spos-h__products.is-rank ul.products li.product::before{font-size:110px;left:-4px;top:40px}
}

/* ---------- Text position: left, centre or right, for the big picture and each slide ---------- */
.spos-h__hero.al-left .spos-h__copy,.spos-h__slide.al-left .spos-h__copy{text-align:left}
.spos-h__hero.al-center .spos-h__copy,.spos-h__slide.al-center .spos-h__copy{text-align:center}
.spos-h__hero.al-right .spos-h__copy,.spos-h__slide.al-right .spos-h__copy{text-align:right}
/* On a card the box itself moves. Left is where it normally sits. */
.spos-h__hero.is-card.al-left .spos-h__copy{left:clamp(12px,2vw,24px);right:auto}
.spos-h__hero.is-card.al-center .spos-h__copy{left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 2*clamp(12px,2vw,24px))}
.spos-h__hero.is-card.al-right .spos-h__copy{left:auto;right:clamp(12px,2vw,24px)}
.spos-h__slider.is-card .spos-h__slide.al-left .spos-h__copy{left:clamp(12px,2vw,24px);right:auto;transform:none}
.spos-h__slider.is-card .spos-h__slide.al-center .spos-h__copy{left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 2*clamp(12px,2vw,24px))}
.spos-h__slider.is-card .spos-h__slide.al-right .spos-h__copy{left:auto;right:clamp(12px,2vw,24px);transform:none}
/* Over the photo: the words use the width of the band, so only the alignment of the lines changes. Keep the button with the words. */
.spos-h__hero.is-over.al-center .spos-h__copy .spos-h__text,.spos-h__slider.is-over .al-center .spos-h__text{margin-left:auto;margin-right:auto}
.spos-h__hero.is-over.al-right .spos-h__copy .spos-h__text,.spos-h__slider.is-over .al-right .spos-h__text{margin-left:auto}
@media(max-width:700px){
  .spos-h__hero.is-card.al-right .spos-h__copy,.spos-h__hero.is-card.al-center .spos-h__copy{left:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);transform:none;width:auto}
  .spos-h__slider.is-card .spos-h__slide.al-right .spos-h__copy,.spos-h__slider.is-card .spos-h__slide.al-center .spos-h__copy{left:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);transform:none;width:auto}
}

/* Category block: every picture sits in the same square, whatever size or background it came with. Names go on the picture
   over a soft shade, white-background pictures blend into the tint, and tiles without a photo are filled with the shop colour. */
.spos-h .spos-h__cats.is-tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;justify-content:stretch}
.spos-h .spos-h__cats.is-tiles li{min-width:0}
.spos-h .spos-h__cats.is-tiles a{position:relative;display:block;aspect-ratio:1;border-radius:20px;overflow:hidden;background:var(--spos-soft)}
.spos-h .spos-h__cats.is-tiles .spos-h__cat-img{position:absolute;inset:0;width:auto;aspect-ratio:auto;border-radius:0;box-shadow:none;background:var(--spos-soft)}
.spos-h .spos-h__cats.is-tiles .spos-h__cat-img img{width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:multiply}
.spos-h .spos-h__cats.is-tiles .spos-h__cat-img.is-empty,.spos-h .spos-h__cats.is-tiles .spos-h__cat-img.has-icon.is-empty{background:linear-gradient(145deg,var(--spos-accent),color-mix(in srgb,var(--spos-accent) 70%,#000))!important;color:#fff}
.spos-h .spos-h__cats.is-tiles .spos-h__cat-img.has-icon svg{width:38%;height:auto;margin-bottom:14%}
.spos-h .spos-h__cats.is-tiles .spos-h__cat-name{position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 12px 11px;font-size:15px;font-weight:700;line-height:1.25;color:#fff;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.35);background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.spos-h .spos-h__cats.is-tiles a:hover{transform:translateY(-3px)}
.spos-h .spos-h__cats.is-circles .spos-h__cat-img{background:var(--spos-soft);box-shadow:var(--spos-shadow)}
.spos-h .spos-h__cats.is-circles .spos-h__cat-img img{mix-blend-mode:multiply}
.spos-h .spos-h__cats.is-circles .spos-h__cat-img.is-empty{background:linear-gradient(145deg,var(--spos-accent),color-mix(in srgb,var(--spos-accent) 70%,#000))!important;color:#fff}
@media (max-width:600px){.spos-h .spos-h__cats.is-tiles{grid-template-columns:repeat(2,1fr);gap:10px}.spos-h .spos-h__cats.is-tiles .spos-h__cat-name{font-size:14px}}