/* Store home (functions/_shared/render-store-html.js). Loaded after product.css,
   which holds the shared bar, buttons, dialogs, footer and toast.
   Rules kept from the product page: no text under 14px; the page zooms.
   Every movement here stops for shoppers who ask their device to reduce motion. */

.wrap.home{max-width:1440px;padding:0 16px 48px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{margin:32px 0}
#products{scroll-margin-top:16px}
#new-h{scroll-margin-top:16px}
section h2{font:700 24px/1.25 var(--font-head);margin:0 0 14px}

/* --- header -------------------------------------------------------------------- */
/* The header scrolls away with the page (Andy, 2026-11-02: never frozen on top),
   so the logo can be big enough to read. */
.home-bar{gap:8px;min-height:96px;padding-top:10px;padding-bottom:10px}
.bar-brand{flex:1;min-width:0;display:flex;align-items:center;font:700 22px/1.2 var(--font-head);color:var(--bar-fg);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-brand .logo{display:block;max-height:var(--logo-h,80px);max-width:min(360px,100%);width:auto;height:auto;object-fit:contain}
.bar-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.bar-links a{display:inline-flex;align-items:center;min-height:44px;padding:6px 10px;border-radius:22px;color:var(--bar-fg);font-size:15px;font-weight:600;text-decoration:none}
.bar-links a:hover{background:rgba(0,0,0,.06)}
.bar-links a.lang{border:1px solid currentColor}
.bar-links a.cta{background:var(--accent-raw);color:var(--on-accent);padding:6px 16px}
.bar-links a.cta:hover{filter:brightness(1.08);background:var(--accent-raw)}
/* Phone: the links take their own row so the logo keeps its full width. */
@media (max-width:600px){.home-bar{flex-wrap:wrap;min-height:0}.bar-brand .logo{max-height:calc(var(--logo-h,80px) * .75);max-width:100%}.bar-links{order:3;width:100%;justify-content:flex-start;padding-bottom:4px}}

/* --- banner: the PHOTOS rotate, words and buttons stay put ------------------------- */
.hero{position:relative;margin:16px 0 8px}
.hero h1{color:inherit;font:700 clamp(28px,4.5vw,48px)/1.12 var(--font-head);margin:0 0 12px}
.hero .eyebrow{display:block;margin:0 0 8px;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hero .lead{font-size:18px;margin:0 0 20px;max-width:46ch}
.hero-btn{background:#fff;color:#1d1d1f;border-color:#fff;text-shadow:none}
.hero-btn.ghost{background:transparent;color:#fff;border-color:#fff}
.hero-btns{display:flex;flex-wrap:wrap;gap:10px}
.hero.plain{padding:24px 0 0}
.rot{position:absolute;inset:0;overflow:hidden;background:#e9e9ee}
.rot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.rot img.on{opacity:1}
.rot.kb img.on{animation:kb 7s ease-out both}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.rot-ctl{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:22px;background:rgba(0,0,0,.45)}
.rot-ctl button{display:grid;place-items:center;min-width:28px;min-height:28px;border:0;border-radius:14px;background:transparent;color:#fff;cursor:pointer;padding:0}
.rot-ctl .dot::before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55)}
.rot-ctl .dot[aria-current="true"]::before{background:#fff}
.rot-ctl .pp{font-size:14px;font-weight:700;width:28px}
.rot-ctl button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.hero.brand{display:grid;grid-template-columns:1fr;border-radius:18px;overflow:hidden;background:var(--panel);color:var(--panel-fg)}
.hero.brand .panel{padding:32px 24px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hero.brand .photo{position:relative;min-height:280px}
.hero.brand .side{display:block;color:#fff;text-decoration:none}
.hero.brand .side .tag{position:absolute;left:12px;bottom:12px;z-index:2;padding:6px 12px;border-radius:16px;background:rgba(0,0,0,.6);font-size:15px;font-weight:700}
@media (min-width:900px){.hero.brand{grid-template-columns:58fr 42fr;min-height:460px}.hero.brand .panel{padding:48px}}
@media (min-width:1100px){.hero.brand.trio{grid-template-columns:44fr 30fr 26fr}}
@media (min-width:900px) and (max-width:1099px){.hero.brand.trio .side{grid-column:1/-1;min-height:240px}}
.hero.banner{border-radius:18px;overflow:hidden;min-height:360px;display:flex;align-items:flex-end;color:#fff}
.hero.banner .photo{position:absolute;inset:0}
.hero.banner .over{position:relative;z-index:2;padding:28px 24px 56px;width:100%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55) 35%,rgba(0,0,0,.8));text-shadow:0 1px 3px rgba(0,0,0,.6)}
@media (min-width:900px){.hero.banner{min-height:480px}.hero.banner .over{padding:48px 48px 56px}}
.hero.split{display:grid;gap:16px;grid-template-columns:1fr}
.hero.split a{position:relative;display:block;border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;min-height:300px}
.hero.split .cap{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:24px 24px 56px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55) 35%,rgba(0,0,0,.8));text-shadow:0 1px 3px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
@media (min-width:900px){.hero.split{grid-template-columns:62fr 36fr}.hero.split a{min-height:520px}}

/* --- category tiles, Shop by Collection ---------------------------------------------- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,min(260px,calc(50% - 8px)));justify-content:center;gap:16px;margin:0;padding:0;list-style:none}
.cats a,.collections li a{display:flex;flex-direction:column;gap:8px;color:#1d1d1f;text-decoration:none;font-size:17px;font-weight:700}
.cats img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;background:#f2f2f4;transition:transform .5s ease}
.cats a:hover img{transform:scale(1.03)}
.collections{display:grid;gap:16px;grid-template-columns:1fr}
.collections .col-text{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.collections ul{display:grid;grid-template-columns:repeat(auto-fill,min(300px,calc(50% - 8px)));gap:16px;margin:0;padding:0;list-style:none}
.collections li a{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;color:#fff}
.collections li img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.collections li a:hover img{transform:scale(1.05)}
.collections li span{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 14px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7));text-shadow:0 1px 3px rgba(0,0,0,.6)}
@media (min-width:900px){.collections{grid-template-columns:240px 1fr;align-items:center}}
.btn.soft{background:#ececf0;color:#1d1d1f;border-color:#ececf0}
.landing.off{display:none}

/* --- New Arrivals row: swipe, arrows, one nudge ---------------------------------------- */
.row-scroll{position:relative}
.hrow{display:flex;gap:16px;margin:0;padding:4px 2px 12px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin}
.hrow > li{flex:0 0 min(240px,44vw);scroll-snap-align:start}
.hrow.g-tile > li{flex-basis:min(280px,62vw)}
.hrow.nudge{animation:nudge 1.1s ease-in-out 1}
@keyframes nudge{0%,100%{transform:translateX(0)}40%{transform:translateX(-28px)}}
.row-arrow{position:absolute;top:38%;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid #d9d9df;background:#fff;color:#1d1d1f;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.row-arrow.prev{left:-6px}.row-arrow.next{right:-6px}

/* --- toolbar ------------------------------------------------------------------------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 8px}
.toolbar .search{flex:1 1 260px}
.toolbar input[type=search],.toolbar select,.flt select{width:100%;min-height:52px;padding:10px 14px;border:1.5px solid #c7c7cc;border-radius:12px;font:16px var(--font-body);background:#fff;color:#1d1d1f}
.toolbar .sort{flex:0 1 300px}
.toolbar .btn{min-height:52px}
.count{margin:4px 0 16px;color:#555;font-size:15px}
.empty{padding:32px 0;text-align:center;font-size:17px}

/* --- filters panel -------------------------------------------------------------------- */
.picker.filters-dlg{height:auto;max-height:94dvh}
.flt-form:focus{outline:none}
.flt-form{display:flex;flex-direction:column;gap:14px;padding:16px;overflow-y:auto}
.flt{display:flex;flex-direction:column;gap:6px;font-size:16px;font-weight:600}
.flt-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding-top:4px}

/* --- pictures: second photo on mouse-over, slow zoom, swipe on a phone ----------------- */
.pic{position:relative;display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#f2f2f4;border:1px solid #ececf0}
.pic img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .6s ease,opacity .4s ease}
.pic.cover img{object-fit:cover}
.pic .ph{display:block;width:100%;height:100%}
.pic.two img.alt{position:absolute;inset:0;opacity:0}
.pdots{display:none}
@media (hover:hover){
  a:hover .pic.zoom img{transform:scale(1.06)}
  a:hover .pic.two img.alt{opacity:1}
}
@media (hover:none){
  .pic.two{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pic.two::-webkit-scrollbar{display:none}
  .pic.two img{flex:0 0 100%;scroll-snap-align:start}
  .pic.two img.alt{position:static;opacity:1}
  .pdots{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;gap:5px;padding:3px 6px;border-radius:10px;background:rgba(0,0,0,.4)}
  .pdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6)}
  .pdots i.on{background:#fff}
}
.pic .new{position:absolute;z-index:2;top:8px;left:8px;padding:4px 10px;border-radius:14px;background:#b3261e;color:#fff;font-size:14px;font-weight:700}
.pill{position:absolute;z-index:2;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:6px 12px;border-radius:18px;background:#fff;color:#1d1d1f;font-size:15px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.name{font-size:16px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.opts-n{font-size:14px;color:#555}
.price{font-size:17px;font-weight:700;color:#1d1d1f}
.price.ask{color:var(--accent)}
.stock{align-self:flex-start;font-size:14px;font-weight:600;padding:2px 10px;border-radius:12px;background:#f2f2f4}
.stock.green{color:#1b6e2f;background:#e7f4ea}
.stock.red{color:#b3261e;background:#fbe9e8}
.stock.gold,.stock.brand{color:#7a4b00;background:#fdf1dc}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 18px;border-radius:22px;background:var(--accent-raw);color:var(--on-accent);font-size:15px;font-weight:700}
.item[hidden]{display:none}

/* --- grids: FIXED item width, more columns on wider screens -----------------------------
   Never stretched (CLAUDE.md "Card/Grid Item Sizing"). On a phone two across. */
.grid{--w:240px;--gap:16px;display:grid;grid-template-columns:repeat(auto-fill,min(var(--w),calc(50% - var(--gap) / 2)));gap:24px var(--gap);justify-content:center;margin:0 auto;padding:0;list-style:none}
.pcard,.ptile,.plist,.pgal{display:flex;flex-direction:column;gap:6px;height:100%;color:#1d1d1f;text-decoration:none}
.pcard:hover .name,.ptile:hover .name,.plist:hover .name,.pgal:hover .name,.pedit:hover .name{text-decoration:underline}
/* boutique: picture tiles; boutique_N shows at most N across */
.grid.g-tile{--w:300px;--gap:24px}
.grid.boutique-2{--w:460px;max-width:calc(2 * var(--w) + var(--gap))}
.grid.boutique-3{--w:380px;max-width:calc(3 * var(--w) + 2 * var(--gap))}
.grid.boutique-4{--w:290px;max-width:calc(4 * var(--w) + 3 * var(--gap))}
.ptile .name{font:600 17px/1.3 var(--font-head)}
/* editorial: one product per row, max 1000px, its description in full */
.grid.g-editorial{grid-template-columns:1fr;max-width:1000px;gap:16px}
.pedit{display:grid;grid-template-columns:minmax(120px,300px) 1fr;gap:20px;align-items:center;padding:12px;border:1px solid #ececf0;border-radius:16px;color:#1d1d1f;text-decoration:none;background:#fff}
.pedit .body{display:flex;flex-direction:column;gap:10px;min-width:0}
.pedit .name{font:600 22px/1.25 var(--font-head)}
.pedit .desc{font-size:16px;color:#3a3a3c;line-height:1.5}
.pedit .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media (max-width:600px){.pedit{grid-template-columns:1fr}}
/* listings: big photos, price first, full-width button */
.grid.g-listings{--w:360px}
.plist{border:1px solid #ececf0;border-radius:16px;overflow:hidden;background:#fff}
.plist .pic{aspect-ratio:4/3;border:0;border-radius:0}
.plist .body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1}
.plist .price{font-size:clamp(18px,4.6vw,22px)}
.plist .cta{margin-top:auto;width:100%}
/* gallery: a photo wall, each photo at its own shape, fixed column width */
.gallery-wrap{container-type:inline-size}
.grid.g-gallery{display:block;--n:2;column-count:var(--n);column-gap:16px;width:min(100%,calc(var(--n) * 252px - 16px));margin:0 auto}
@container (min-width:740px){.grid.g-gallery{--n:3}}
@container (min-width:992px){.grid.g-gallery{--n:4}}
@container (min-width:1244px){.grid.g-gallery{--n:5}}
.g-gallery > li{break-inside:avoid;margin:0 0 20px}
.pic.natural{aspect-ratio:auto;border-radius:16px;border:0}
.pic.natural img{height:auto}
/* immersive: one product at a time */
.imm{position:relative}
.g-immersive{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;margin:0;padding:0;list-style:none;scrollbar-width:none}
.g-immersive::-webkit-scrollbar{display:none}
.g-immersive > li{flex:0 0 100%;scroll-snap-align:center}
.pimm{display:flex;flex-direction:column;gap:10px;color:#1d1d1f;text-decoration:none}
.pimm .stage{position:relative;display:block;height:min(60vh,600px);border-radius:16px;overflow:hidden;background:#222}
.pimm .blur{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(24px) brightness(.8)}
.pimm .main{position:relative;display:block;height:100%;width:100%;object-fit:contain}
.pimm .body{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;max-width:1000px;margin:0 auto;padding:0 8px}
.pimm .name{font:600 22px/1.25 var(--font-head);flex:1 1 260px}
.imm-arrow{position:absolute;top:calc(min(60vh,600px) / 2 - 24px);z-index:2;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:#1d1d1f;font-size:28px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.imm-arrow.prev{left:12px}.imm-arrow.next{right:12px}
.imm-count{position:absolute;top:12px;right:12px;z-index:2;padding:4px 12px;border-radius:14px;background:rgba(0,0,0,.65);color:#fff;font-size:15px;font-weight:700}

/* --- services layout ------------------------------------------------------------------- */
.alert-bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;padding:10px 16px;background:#b3261e;color:#fff;font-size:16px;font-weight:600;text-align:center}
.alert-bar .hero-btn{min-height:40px;color:#b3261e}
.svc-band{display:grid;gap:16px;grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.svc-band{grid-template-columns:1.2fr 1fr}}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.trust li{padding:8px 14px;border-radius:18px;background:#f2f2f4;font-size:15px;font-weight:600}
.trust li::before{content:"✓ ";color:#1b6e2f}
.zip{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid #ececf0;border-radius:14px;background:#fff}
.zip label{font-size:17px;font-weight:700}
.zip-row{display:flex;gap:8px}
.zip input{flex:1;min-width:0;min-height:52px;padding:10px 14px;border:1.5px solid #c7c7cc;border-radius:12px;font:16px var(--font-body)}
.zip-out{margin:0;font-size:16px;font-weight:600;min-height:1.4em}
.zip-out.yes{color:#1b6e2f}.zip-out.no{color:#7a4b00}
.svc-group{max-width:932px;margin:0 auto}
.svc-group h3{font:700 22px/1.25 var(--font-head);margin:24px 0 10px}
.mi .pic .new{display:none}
.svc-group[hidden]{display:none}
.svc-list{display:grid;grid-template-columns:repeat(auto-fill,min(460px,100%));justify-content:start;gap:12px;margin:0 auto;padding:0;list-style:none}
.mi{display:flex;align-items:center;gap:12px;height:100%;padding:10px;border:1px solid #ececf0;border-radius:14px;background:#fff}
.mi-link{flex:1;min-width:0;display:flex;align-items:center;gap:12px;color:#1d1d1f;text-decoration:none}
.mi-link .pic{flex:0 0 96px;width:96px;aspect-ratio:1/1}
.mi-link .body{display:flex;flex-direction:column;gap:4px;min-width:0}
.mi-link:hover .name{text-decoration:underline}
.mi .desc{font-size:15px;color:#4a4a4f;line-height:1.4}
.mi .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dur{padding:2px 10px;border-radius:12px;background:#f2f2f4;font-size:14px;font-weight:600;color:#3a3a3c}
.mi .price{font-size:16px}
@media (max-width:560px){.mi{flex-wrap:wrap}.mi-link{flex-basis:100%}.mi-link .pic{flex-basis:84px;width:84px}.mi .btn.book{width:100%}}
.btn.book{flex:none;min-height:44px;background:var(--accent-raw);color:var(--on-accent);border-color:var(--accent-raw)}
.svc-tiles{display:grid;grid-template-columns:repeat(auto-fill,min(300px,100%));justify-content:center;gap:16px;margin:0 auto;padding:0;list-style:none}
.rtile{display:flex;flex-direction:column;height:100%;border:1px solid #ececf0;border-radius:16px;overflow:hidden;background:#fff;color:#1d1d1f;text-decoration:none}
.rtile .pic{aspect-ratio:16/10;border:0;border-radius:0}
.rtile .body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1}
.rtile .desc{font-size:15px;color:#4a4a4f}
.rtile .cta{margin-top:auto;align-self:flex-start}
.svc-tiers{display:grid;grid-template-columns:repeat(auto-fill,min(320px,100%));justify-content:center;gap:16px;margin:0 auto;padding:12px 0 0;list-style:none}
.tier{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;padding:16px;border:1.5px solid #e2e2e8;border-radius:16px;background:#fff}
.tier.pop{border-color:var(--accent-raw);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.tier .popular{position:absolute;top:-12px;left:16px;padding:4px 12px;border-radius:14px;background:var(--accent-raw);color:var(--on-accent);font-size:14px;font-weight:700}
.tier-pic .pic{aspect-ratio:16/10}
.tier .name{font:700 22px/1.25 var(--font-head);color:#1d1d1f;text-decoration:none}
.tier .name:hover{text-decoration:underline}
.tier .price{font-size:22px}
.tier .desc{font-size:15px;color:#4a4a4f}
.inc{margin:0;padding-left:20px;font-size:15px;line-height:1.5}
.tier .btn{margin-top:auto}
.call-dock{display:none}
@media (max-width:700px){
  .call-dock{display:flex;position:fixed;z-index:20;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));min-height:52px;align-items:center;justify-content:center;border-radius:26px;background:var(--accent-raw);color:var(--on-accent);font-size:17px;font-weight:700;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.25)}
  body.svc-request .foot{padding-bottom:84px}
}

/* --- recently viewed, testimonials, about ------------------------------------------- */
.recent summary{font:700 20px/1.3 var(--font-head);cursor:pointer;padding:8px 0;min-height:44px}
.recent .grid{margin-top:12px}
.quotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:16px;margin:0;padding:0;list-style:none}
.quotes figure{margin:0;height:100%;padding:20px;border-radius:14px;background:#f7f7f9}
.quotes blockquote{margin:0 0 12px;font-size:17px}
.quotes figcaption{font-size:15px;font-weight:600;color:#444}
.stars{margin:0 0 8px;color:#b07a00;font-size:18px;letter-spacing:2px}
.about{max-width:1000px}
.about p{font-size:17px}
.foot-name{font:700 18px/1.3 var(--font-head)}

/* --- sections rise gently into view (store.js adds .rv-on; without it, all visible) --- */
html.rv-ready .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.rv-ready .rv.rv-on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rot img{transition:none}.rot.kb img.on{animation:none}
  .hrow.nudge{animation:none}
  .pic img,.cats img,.collections li img{transition:none}
  a:hover .pic.zoom img,.cats a:hover img,.collections li a:hover img{transform:none}
  html.rv-ready .rv{opacity:1;transform:none;transition:none}
  .hrow,.g-immersive{scroll-behavior:auto}
}