/* Single product. Ported from design-src/product-numbers/page.css (approved mockup), plus theme additions at the end. */

/* ===== single product (additions to the E · Selah system) ===== */


/* product top */
.pdp{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:72px;align-items:start;padding-bottom:100px}
.stage{position:relative;aspect-ratio:1;background:var(--linen);overflow:hidden}
.stage img{width:100%;height:100%;object-fit:cover;transition:opacity .3s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.stage img.contain{object-fit:contain;background:var(--ivory)}
.stage:hover img{transform:scale(1.03)}
.stage .tag{position:absolute;top:16px;left:16px;background:var(--white);padding:6px 12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--brown)}
.nav-arrow{position:absolute;top:50%;width:46px;height:46px;margin-top:-23px;background:var(--white);border:none;color:var(--brown);font:400 26px/1 var(--serif);cursor:pointer;opacity:0;transition:.25s}
.nav-arrow.prev{left:16px}.nav-arrow.next{right:16px}
.stage:hover .nav-arrow{opacity:1}
.nav-arrow:hover{background:var(--brown);color:var(--white)}
.count{position:absolute;right:16px;bottom:16px;background:rgba(255,255,255,.92);padding:5px 10px;color:var(--brown);font-size:10px}
.thumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:10px}
.thumbs button{aspect-ratio:1;border:none;padding:0;background:var(--linen);cursor:pointer;position:relative;overflow:hidden}
.thumbs img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:.25s}
.thumbs button:hover img,.thumbs button.on img{opacity:1}
.thumbs button.on::after{content:"";position:absolute;inset:0;border:2px solid var(--brown)}

.summary{position:sticky;top:116px}
.summary h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,3.6vw,52px);line-height:1.04;color:var(--brown);margin:12px 0 6px}
.summary h1 em{font-style:italic;font-weight:400;display:block}
.subline{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--gold-deep)}
.price-row{display:flex;align-items:baseline;gap:22px;margin:18px 0 24px;padding-bottom:22px;border-bottom:1px solid var(--gold-soft)}
.price-row .price{font-family:var(--serif);font-size:32px;font-weight:500;color:var(--brown)}
.rev-link{font-size:13px;color:var(--brown-mid);border-bottom:1px solid var(--gold);padding-bottom:1px}
.rev-link:hover{color:var(--gold-deep)}

.verse-card{background:var(--ivory);border-left:3px solid var(--gold);padding:20px 24px 18px;margin-bottom:28px}
.verse-card blockquote{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.45;color:var(--brown)}
.verse-card figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.verse-card .caps{color:var(--gold-deep);font-size:10px}
.verse-card a{font-size:13px;color:var(--brown);border-bottom:1px solid var(--gold)}
.verse-card a:hover{color:var(--gold-deep)}

.opt{margin-bottom:22px}
.opt-head{display:flex;gap:12px;align-items:baseline;margin-bottom:12px;color:var(--brown-mid);font-size:14px}
.opt-head .caps{color:var(--brown)}
.swatches{display:flex;gap:14px}
.sw{width:44px;height:44px;border-radius:50%;border:none;background:var(--c);cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(47,36,31,.14);transition:transform .2s}
.sw::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid transparent;transition:.2s}
.sw:hover{transform:scale(1.06)}
.sw:hover::after{border-color:var(--gold-soft)}
.sw.on::after{border-color:var(--brown)}
.styles{display:grid;grid-template-columns:1fr 1fr}
.style{border:1px solid var(--gold-soft);padding:13px 16px;display:flex;flex-direction:column;line-height:1.35;transition:.2s}
.style+.style{margin-left:-1px}
.style b{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}
.style small{font-size:13px;color:var(--brown-mid)}
.style.on{border-color:var(--brown);box-shadow:inset 0 0 0 1px var(--brown);position:relative}
a.style:hover{background:var(--ivory);border-color:var(--gold)}
a.style:hover small{color:var(--gold-deep)}

.cta{display:flex;gap:12px;margin-top:28px}
.cta .add{flex:1;padding:19px 20px}
.cta .add.done{background:var(--gold-deep);border-color:var(--gold-deep)}

.mini-specs{display:flex;flex-wrap:wrap;gap:8px 0;margin-top:18px;color:var(--brown-mid);font-size:10px}
.mini-specs span+span::before{content:"";display:inline-block;width:5px;height:5px;background:var(--gold);transform:rotate(45deg);margin:0 14px 1px}

/* meaning + give */
section.block.meaning{padding-top:0}
.meaning .wrap{padding-top:90px;background:linear-gradient(var(--gold-soft),var(--gold-soft)) center top/calc(100% - 64px) 1px no-repeat}
@media (max-width:640px){.meaning .wrap{background-size:calc(100% - 32px) 1px}}
.meaning .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:80px;align-items:start}
.meaning h2,.details h2,.empty h2,.give h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.8vw,50px);line-height:1.08;color:var(--brown);margin:10px 0 18px}
.meaning h2 em,.details h2 em,.empty h2 em,.give h2 em,.faq-intro h2 em{font-style:italic}
.answer{font-size:17px;color:var(--brown-mid);max-width:40em}
.lines{list-style:none;margin-top:34px;border-top:1px solid #dccfb9}
.lines li{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 6px;border-bottom:1px solid #dccfb9}
.lines .n{padding-top:8px;font-size:12px;letter-spacing:.14em;color:var(--gold-deep);font-weight:700}
.lines h3{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(22px,2vw,27px);line-height:1.2;color:var(--brown)}
.lines p{margin-top:6px;color:var(--brown-mid);font-size:15px}
.give{background:var(--linen);padding:44px 40px 36px;border-top:3px solid var(--gold);position:sticky;top:120px}
.give h2{font-size:clamp(30px,3vw,40px);margin-top:8px}
.give > p{color:var(--brown-mid);font-size:15px}
.give ul{list-style:none;margin-top:22px}
.give li{position:relative;padding:14px 0 14px 26px;border-top:1px solid #dccfb9}
.give li::before{content:"";position:absolute;left:3px;top:24px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.give li b{display:block;font-family:var(--serif);font-weight:500;font-size:21px;color:var(--brown);line-height:1.2}
.give li span{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--gold-deep)}

/* details + specs */
.details{background:var(--linen)}
/* top-aligned, and the photo stays in view beside long descriptions (same pattern as the summary and "Give This Blessing") */
.details .wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.det-img{aspect-ratio:4/5;overflow:hidden;background:#e5d9c5;position:sticky;top:120px}
.det-img img{width:100%;height:100%;object-fit:cover}
.det-text > p{color:var(--brown-mid);margin-bottom:14px}

/* reviews empty state (reuses .review) */
.empty .stars.hollow{color:var(--gold);font-size:22px;margin-top:16px}
.empty h2{margin-top:14px}
.empty .invite{max-width:640px;margin:0 auto;color:var(--brown-mid);font-size:17px}
.empty .all{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* faq extras */
.faq-list details p a{border-bottom:1px solid var(--gold);color:var(--brown)}

/* related */
.related .grid{grid-template-columns:repeat(3,1fr)}

/* sticky add-to-cart (mobile) */
.sticky-buy{display:none}

@media (max-width:1060px){
  .pdp{grid-template-columns:minmax(0,1fr);gap:40px;padding-bottom:72px}
  .summary{position:static}
  .meaning .wrap{grid-template-columns:1fr;gap:50px}
  .give{position:static}
  .details .wrap{grid-template-columns:1fr;gap:40px}
  .det-img{aspect-ratio:3/2;position:static}
  .related .grid{grid-template-columns:repeat(2,1fr)}
  .nav-arrow{opacity:1}
}
@media (max-width:760px){
  .sticky-buy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;gap:12px;background:var(--white);border-top:2px solid var(--gold);padding:10px 16px;box-shadow:0 -14px 30px -18px rgba(47,36,31,.45);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .sticky-buy.show{transform:none}
  .sticky-buy img{width:48px;height:48px;object-fit:cover;flex:none}
  .sb-text{flex:1;min-width:0;line-height:1.3}
  .sb-text b{display:block;font-family:var(--serif);font-weight:500;font-size:17px;color:var(--brown);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sb-text > span{font-size:12px;color:var(--brown-mid)}
  .sticky-buy .btn{padding:14px 18px;font-size:11px;flex:none}
  .site-footer{padding-bottom:100px}
}
@media (max-width:640px){
  .thumbs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64px;overflow-x:auto;gap:8px;scrollbar-width:none}
  .summary h1{font-size:38px}
  .styles{grid-template-columns:1fr}.style+.style{margin:-1px 0 0}
  .verse-card{padding:18px 18px 16px}.verse-card blockquote{font-size:19px}
  .give{padding:34px 20px 26px}
  .lines li{grid-template-columns:36px 1fr;gap:10px}
}

/* ===== theme additions ===== */
.single-product .rise{animation-duration:.7s}
.buy{border:0}
.buy fieldset.opt{border:0;padding:0;min-width:0}
.buy legend.opt-head{padding:0;float:left;width:100%}
.buy legend.opt-head + *{clear:both}
.swatches{flex-wrap:wrap}
label.sw{display:block;flex:none}
.sw:has(input:focus-visible)::after{border-color:var(--gold-deep);border-width:2px}
.sw.soldout{opacity:.55}
.sw.soldout::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px;background:var(--brown);transform:rotate(45deg)}
.cta .add:disabled{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--brown-mid)}
.buy-msg{margin-top:12px;font-size:14px;color:var(--heart)}
.buy-msg a{color:var(--brown);border-bottom:1px solid var(--gold)}
.soon-box{margin-top:26px;background:var(--ivory);border:1px solid var(--gold-soft);border-top:3px solid var(--gold);padding:20px 22px}
.soon-box b{display:block;font-family:var(--serif);font-weight:500;font-size:24px;color:var(--brown)}
.soon-box p{margin-top:6px;font-size:15px;color:var(--brown-mid)}
.soon-box a{color:var(--brown);border-bottom:1px solid var(--gold)}
.price-row .price del{font-size:.7em;color:var(--brown-mid);margin-right:8px}
.price-row .price ins{text-decoration:none}
.meaning .wrap.single{grid-template-columns:minmax(0,1fr)}
.meaning .wrap.single .give{position:static;max-width:640px}
.det-text .desc p{color:var(--brown-mid);margin-bottom:14px}
.det-text .desc strong{font-weight:600;color:var(--brown)}
/* reviews: list + form */
.review .eyebrow{color:var(--gold-deep)}
.review.has-reviews .rv-summary{margin:14px 0 8px;color:var(--brown-mid);font-size:14px}
.review.has-reviews .rv-summary .stars{margin-right:10px}
.rv{max-width:880px;margin:30px auto 0}
.rv + .rv{padding-top:30px;border-top:1px solid var(--gold-soft)}
.rv blockquote{margin:14px auto 16px}
.rv figcaption{color:var(--brown-mid)}
.rv-thanks{max-width:640px;margin:18px auto 0;background:var(--white);border:1px solid var(--gold-soft);padding:14px 18px;color:var(--brown)}
.review .all{margin-top:30px}
.rv-form{display:none;max-width:640px;margin:40px auto 0;text-align:left;background:var(--white);border:1px solid var(--gold-soft);border-top:3px solid var(--gold);padding:34px 36px}
.rv-form:target,.rv-form:has(:focus){display:block}
.rv-title{font-family:var(--serif);font-weight:500;font-size:30px;color:var(--brown);line-height:1.1}
.rv-title small{display:none}
.rv-note{font-size:13px;color:var(--brown-mid);margin:6px 0 18px}
.rv-form p{margin-top:16px}
.rv-form label,.rv-rating legend{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--brown);margin-bottom:8px}
.rv-form input[type=text],.rv-form input[type=email],.rv-form textarea{width:100%;border:1px solid var(--gold);background:var(--white);padding:12px 14px;font:400 16px var(--sans);color:var(--brown);outline:none}
.rv-form input:focus,.rv-form textarea:focus{border-color:var(--brown)}
.rv-rating{border:0;padding:0;margin-top:4px}
.rv-stars{display:inline-flex;flex-direction:row-reverse;gap:4px}
.rv-stars input{position:absolute;opacity:0;width:1px;height:1px}
.rv-stars label{font-size:30px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--gold-soft);cursor:pointer;margin:0;line-height:1}
.rv-stars label:hover,.rv-stars label:hover ~ label,.rv-stars input:checked ~ label{color:var(--gold)}
.rv-stars input:focus-visible + label{outline:2px solid var(--gold-deep)}
.rv-form .comment-form-cookies-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--brown-mid)}
.rv-form .comment-form-cookies-consent label{font-size:13px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--brown-mid)}
.rv-form .form-submit{margin-top:22px}
@media (max-width:640px){.rv-form{padding:26px 20px}.woocommerce-notices-wrapper{padding:16px 16px 0}}