/* Candle page */
.pd{padding:clamp(80px,9vw,104px) var(--gut) clamp(64px,9vw,110px)}
.back{display:inline-block;margin:0 0 18px;color:var(--ash);text-decoration:none;font-size:15px}
.back:hover{color:var(--soot)}
.pd-grid{display:grid;gap:clamp(24px,4vw,64px)}
@media(min-width:900px){.pd-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}}

/* gallery: swipe on phones, thumbnails on computers */
.stage{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:8px;background:var(--linen);aspect-ratio:4/5}
.stage::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:start;position:relative;overflow:hidden}
.slide img,.slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumbs{display:none;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs button{position:relative;width:72px;aspect-ratio:4/5;padding:0;border:1px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;background:var(--linen);opacity:.7;transition:opacity .2s,border-color .2s}
.thumbs button[aria-current="true"]{opacity:1;border-color:var(--soot)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs .play{position:absolute;inset:0;margin:auto;width:0;height:0;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;filter:drop-shadow(0 0 3px rgba(0,0,0,.5))}
.dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--linen)}
.dots i.on{background:var(--soot)}
@media(min-width:900px){.thumbs{display:flex}.dots{display:none}.gallery{position:sticky;top:84px}}

/* the information column stays in view while the photos scroll */
.info h1{margin:0;font-size:clamp(36px,4.6vw,60px);line-height:1.02}
.info .price{font-size:22px;margin:12px 0 18px}
.info .lead{margin:0 0 24px;max-width:46ch}
.sizes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.sizes button{border:1px solid var(--linen);background:transparent;border-radius:99px;padding:9px 16px;cursor:pointer}
.sizes button[aria-pressed="true"]{border-color:var(--soot);background:var(--soot);color:var(--wax)}
.info .add{width:100%;justify-content:center;padding:16px 26px;font-size:17px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin:26px 0 0;border-top:1px solid var(--linen);border-bottom:1px solid var(--linen)}
.facts div{padding:14px 0}
.facts dt{color:var(--ash);font-size:14px}
.facts dd{margin:2px 0 0;font:400 20px/1.2 var(--serif);font-variation-settings:"SOFT" 100}
.promises{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;font-size:15.5px}
.promises li{padding-left:22px;position:relative}
.promises li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--flame)}
.occ{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.occ a{font-size:14px;text-decoration:none;border:1px solid var(--linen);border-radius:99px;padding:6px 14px}
.occ a:hover{border-color:var(--soot)}
@media(min-width:900px){.info{position:sticky;top:96px}}

.about{max-width:680px;margin:clamp(56px,8vw,100px) 0 0}
.about h2,.more h2{margin:0 0 16px;font-size:clamp(28px,3.4vw,42px);line-height:1.1}
.about p{margin:0 0 14px}
.more{margin-top:clamp(56px,8vw,100px)}
.rel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
@media(min-width:800px){.rel{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.rel .card{text-decoration:none}
.rel .media{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--linen)}
.rel .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rel .name{margin:12px 0 2px;font:400 19px/1.25 var(--serif);font-variation-settings:"SOFT" 100}
.rel .cprice{color:var(--ash);font-size:15px}

/* phones: the price and button stay at the bottom of the screen */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(243,236,228,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 -1px 0 var(--linen);transform:translateY(110%);transition:transform .3s}
.buybar.on{transform:none}
.buybar div{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.buybar b{font:400 17px/1.2 var(--serif);font-variation-settings:"SOFT" 100;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar span{color:var(--ash);font-size:14px}
.buybar .btn{flex:none;padding:12px 22px}
@media(min-width:900px){.buybar{display:none}}
footer .logo-e{height:96px;width:auto;filter:brightness(0) invert(.92);margin-bottom:14px}
@media(max-width:899px){footer{padding-bottom:110px}}
.vslide video{opacity:0;transition:opacity .25s}
.vslide.ready video{opacity:1}
.rel .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* arrows on the photo: appear on hover on computers, always shown on phones */
.stage-wrap{position:relative}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:rgba(243,236,228,.88);color:var(--soot);box-shadow:0 2px 10px rgba(28,20,18,.18);transition:opacity .2s,background .2s}
.arrow svg{width:22px;height:22px}
.arrow:hover{background:#fff}
.arrow.prev{left:12px}.arrow.next{right:12px}
.arrow[hidden]{display:none}
@media(hover:hover){.arrow{opacity:0}.stage-wrap:hover .arrow,.arrow:focus-visible{opacity:1}}
@media(hover:none){.arrow{width:36px;height:36px;background:rgba(243,236,228,.75)}.arrow svg{width:18px;height:18px}}

/* phones: a short description sits beside the name and price instead of leaving empty space */
@media(max-width:899px){
  .info .head.side{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
  .info .head.side .price{margin-bottom:0}
  .info .head.side .lead{margin:6px 0 0;font-size:15px;line-height:1.45;max-width:none}
  .info .head.side + *{margin-top:20px}
}
.rel .media{position:relative}

/* Candle header (old layout still at ?v1): name, then price with a smaller, lighter "Add to cart" beside it, then the short description. */
.info .head.v2 h1{margin-bottom:12px}
.info .pr-row{display:flex;align-items:center;margin:0 0 18px}
.info .pr-row .sp{flex:7;min-width:16px}
.info .pr-row::before,.info .pr-row::after{content:"";flex:1.5}
.info .pr-row .price{margin:0}
.info .btn.add.soft{width:auto;margin:0;padding:10px 22px;font-size:15px;background:#7a5a4c;color:#fff}
.info .btn.add.soft:hover{background:#654739}
.info .head.v2 .lead{margin:0 0 22px}
/* Phones: name and price centred, a full-width "Add to cart" under the price (either thumb, any grip), then the description.
   The sticky bar at the bottom (name, price, button) appears once this button has scrolled away. */
@media(max-width:899px){.info .head.v2 h1{text-align:center}.info .head.v2 .lead{font-size:16px}
  .info .pr-row{flex-direction:column;align-items:stretch;gap:12px}.info .pr-row::before,.info .pr-row::after,.info .pr-row .sp{display:none}
  .info .pr-row .price{font-size:25px;text-align:center}
  .info .btn.add.soft{width:100%;justify-content:center;padding:15px 26px;font-size:17px}
  .facts div{text-align:center}}
.buybar .bb-add{background:#7a5a4c;color:#fff}
@media(min-width:900px){.info .pr-row::before{display:none}.info .pr-row .sp{flex:0 0 28px}.info .pr-row::after{flex:1}}