/*
Theme Name: Retreya
Theme URI: https://retreya.com
Description: Custom theme for Retreya garden pavilions store
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: Proprietary
Text Domain: retreya
*/

:root{
  /* palette — OKLCH, neutrals tinted warm toward the bone hue (~82) */
  --bone:      oklch(0.957 0.012 82);
  --bone-deep: oklch(0.928 0.016 80);
  --sand:      oklch(0.905 0.020 78);
  --paper:     oklch(0.978 0.008 84);
  --graphite:  oklch(0.225 0.004 80);
  --slate:     oklch(0.345 0.006 78);
  --stone:     oklch(0.66 0.018 76);
  --stone-soft:oklch(0.66 0.018 76 / .34);
  --olive:     oklch(0.55 0.038 128);
  --terra:     oklch(0.595 0.118 46);
  --terra-deep:oklch(0.52 0.115 44);

  --ink: var(--graphite);
  --bg: var(--bone);

  /* type */
  --serif: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --serif-text: "Libre Caslon Text", Georgia, serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* fluid scale */
  --step--1: clamp(0.80rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0:  clamp(1.0rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-4:  clamp(2.7rem, 1.8rem + 4.4vw, 5.6rem);

  /* space */
  --sp-2:4px;--sp-3:8px;--sp-4:12px;--sp-5:16px;--sp-6:24px;--sp-7:32px;--sp-8:48px;--sp-9:64px;--sp-10:96px;--sp-11:128px;
  --gut: clamp(20px, 5vw, 80px);
  --maxw: 1280px;
  --radius: 4px;
}
*{box-sizing:border-box;margin:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--step-0);line-height:1.62;font-weight:400}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-0.01em}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{font-family:var(--sans);font-size:var(--step--1);font-weight:600;text-transform:uppercase;letter-spacing:0.22em;color:var(--olive)}
.lede{max-width:62ch;color:var(--slate);font-size:var(--step-1);line-height:1.5}
.rule{height:1px;background:var(--stone-soft);border:0}
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:600;font-size:var(--step-0);
     padding:0.95em 1.6em;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s,color .3s}
.btn-primary{background:var(--graphite);color:var(--bone)}
.btn-primary:hover{background:var(--terra-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--graphite);border-color:var(--stone)}
.btn-ghost:hover{border-color:var(--graphite);transform:translateY(-2px)}
.arrow{transition:transform .35s}
.btn:hover .arrow{transform:translateX(4px)}

/* announcement */
.announce{background:var(--graphite);color:var(--bone);text-align:center;font-size:var(--step--1);
          letter-spacing:.05em;padding:9px 16px}
.announce b{color:oklch(0.78 0.10 60);font-weight:600}

/* header */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in oklch, var(--bone) 86%, transparent);
            backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid var(--stone-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:1.35rem;letter-spacing:.16em;text-transform:uppercase}
.brand svg{width:26px;height:26px;flex:none}
.navlinks{display:flex;gap:clamp(14px,2vw,30px);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.13em;font-weight:500}
.navlinks a{color:var(--slate);transition:color .25s}
.navlinks a:hover{color:var(--graphite)}
.navtools{display:flex;align-items:center;gap:var(--sp-6)}
.navtools .price{font-size:var(--step--1);color:var(--slate)}
@media(max-width:880px){.navlinks{display:none}.navtools .price{display:none}}

/* hero */
.hero{position:relative;padding-block:clamp(40px,6vw,84px) 0}
.hero-grid{display:grid;grid-template-columns:1.02fr 1.18fr;gap:clamp(20px,4vw,56px);align-items:end}
.hero h1{font-size:var(--step-4)}
.hero h1 em{font-family:var(--serif-text);font-style:italic}
.hero .lede{margin-top:var(--sp-6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin-top:var(--sp-8);align-items:center}
.hero-meta{display:flex;gap:var(--sp-7);margin-top:var(--sp-8);flex-wrap:wrap}
.hero-meta div{font-size:var(--step--1)}
.hero-meta b{display:block;font-family:var(--serif);font-size:1.5rem;letter-spacing:0;color:var(--graphite)}
.hero-meta span{color:var(--stone);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem}
.hero-fig{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2}
.hero-fig img{width:100%;height:100%;object-fit:cover}
.hero-tag{position:absolute;left:18px;bottom:18px;background:color-mix(in oklch,var(--bone) 90%,transparent);
          backdrop-filter:blur(4px);padding:7px 13px;border-radius:var(--radius);font-size:.72rem;
          text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--slate)}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-fig{order:-1}}
.paycards{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.paycards span{font-size:.6rem;font-weight:700;letter-spacing:.04em;color:var(--slate);background:var(--paper);
  border:1px solid var(--stone-soft);border-radius:4px;padding:5px 9px;text-transform:uppercase;white-space:nowrap}

/* marquee strip */
.strip{border-block:1px solid var(--stone-soft);margin-top:clamp(40px,6vw,80px)}
.strip-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-6);padding-block:18px;
          font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;color:var(--slate)}
.strip-in span{display:flex;align-items:center;gap:9px}
.strip-in svg{width:16px;height:16px;stroke:var(--olive)}

section{padding-block:clamp(56px,8vw,var(--sp-11))}
.sec-head{max-width:34ch}
.sec-head h2{font-size:var(--step-3);margin-top:var(--sp-5)}

/* category reframe */
.reframe{background:var(--graphite);color:var(--bone)}
.reframe .eyebrow{color:oklch(0.74 0.06 92)}
.reframe h2{font-size:var(--step-3);max-width:18ch;color:var(--bone)}
.reframe .lede{color:oklch(0.86 0.012 84);max-width:54ch}
.reframe-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.reframe-fig{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden}
.reframe-fig img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.reframe-grid{grid-template-columns:1fr}}

/* features — editorial number rows */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.feat + .feat{margin-top:clamp(48px,7vw,104px)}
.feat:nth-child(even) .feat-fig{order:2}
.feat-fig{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--sand)}
.feat-fig img,.hero-fig img,.reframe-fig img{object-position:center}
.feat-fig img{width:100%;height:100%;object-fit:cover}
.feat-num{font-family:var(--serif);font-size:1.1rem;color:var(--terra)}
.feat h3{font-size:var(--step-2);margin:var(--sp-4) 0 var(--sp-5)}
.feat p{max-width:46ch;color:var(--slate)}
.feat .spec{margin-top:var(--sp-6);display:flex;gap:var(--sp-6);flex-wrap:wrap;font-size:var(--step--1);
            text-transform:uppercase;letter-spacing:.12em;color:var(--stone)}
.feat .spec b{color:var(--slate);font-weight:600}
@media(max-width:760px){.feat{grid-template-columns:1fr}.feat:nth-child(even) .feat-fig{order:0}}

/* full-bleed lifestyle */
.band{position:relative;min-height:clamp(360px,52vw,600px);display:grid;align-items:end;
      background-size:cover;background-position:center;border-radius:var(--radius);overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,oklch(0.20 0.01 80 / .72))}
.band-copy{position:relative;z-index:2;padding:clamp(24px,5vw,56px);color:var(--bone);max-width:40ch}
.band-copy h2{color:var(--bone);font-size:var(--step-3)}
.band-copy p{color:oklch(0.9 0.01 84);margin-top:var(--sp-4)}

/* comparison */
.cmp{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.cmp th,.cmp td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--stone-soft);vertical-align:top}
.cmp thead th{font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--stone);font-weight:600}
.cmp .col-us{background:var(--paper)}
.cmp thead .col-us{color:var(--graphite);font-family:var(--serif);font-size:1.05rem;letter-spacing:0;text-transform:none}
.cmp td.col-us{font-weight:600;color:var(--graphite)}
.cmp .yes{color:var(--olive);font-weight:700}
.cmp .no{color:var(--stone)}
.cmp-wrap{overflow-x:auto;border:1px solid var(--stone-soft);border-radius:var(--radius)}

/* tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);align-items:stretch}
.tier{background:var(--paper);border:1px solid var(--stone-soft);border-radius:var(--radius);padding:var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-4)}
.tier.feat-tier{background:var(--graphite);color:var(--bone);border-color:var(--graphite);transform:translateY(-10px)}
.tier.feat-tier .tier-sub,.tier.feat-tier li{color:oklch(0.86 0.012 84)}
.tier-tag{align-self:flex-start;font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;
          color:var(--terra);padding:4px 9px;border:1px solid currentColor;border-radius:99px}
.tier h3{font-family:var(--serif);font-size:var(--step-1);letter-spacing:0}
.tier .price{font-family:var(--serif);font-size:2.2rem}
.tier .was{font-size:.85rem;color:var(--stone);text-decoration:line-through;margin-left:8px}
.tier-sub{font-size:var(--step--1);color:var(--slate)}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:var(--step--1);margin-top:auto}
.tier li{display:flex;gap:9px;color:var(--slate)}
.tier li svg{width:15px;height:15px;flex:none;stroke:var(--olive);margin-top:4px}
.tier .btn{margin-top:var(--sp-5);justify-content:center}
@media(max-width:820px){.tiers{grid-template-columns:1fr}.tier.feat-tier{transform:none}}

/* guarantees */
.gtee{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.gtee-card{padding:var(--sp-7);background:var(--sand);border-radius:var(--radius)}
.gtee-card .eyebrow{color:var(--terra)}
.gtee-card h3{font-size:var(--step-1);margin:var(--sp-4) 0;letter-spacing:0}
.gtee-card p{color:var(--slate);font-size:var(--step--1);max-width:48ch}
@media(max-width:720px){.gtee{grid-template-columns:1fr}}

/* faq */
.faq details{border-bottom:1px solid var(--stone-soft);padding:var(--sp-5) 0}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;
             font-family:var(--serif);font-size:var(--step-1);letter-spacing:0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{font-family:var(--sans);font-size:1.4rem;color:var(--terra);transition:transform .3s;flex:none}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq p{color:var(--slate);max-width:64ch;padding-top:var(--sp-4)}

/* closing cta */
.closer{background:var(--graphite);color:var(--bone);text-align:center}
.closer h2{color:var(--bone);font-size:var(--step-3);max-width:18ch;margin-inline:auto}
.closer .lede{color:oklch(0.86 0.012 84);margin:var(--sp-5) auto var(--sp-8);text-align:center}

/* footer */
footer.site{background:var(--bone-deep);padding-block:var(--sp-9) var(--sp-7);font-size:var(--step--1)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-7)}
.foot-grid h4{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--stone);margin-bottom:var(--sp-5);font-weight:600}
.foot-grid a{display:block;color:var(--slate);padding:5px 0}
.foot-grid a:hover{color:var(--graphite)}
.foot-brand p{color:var(--slate);max-width:34ch;margin-top:var(--sp-4)}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:var(--sp-9);
          padding-top:var(--sp-5);border-top:1px solid var(--stone-soft);color:var(--stone);font-size:.74rem}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr 1fr}}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn:hover{transform:none}}

/* ===================== PRODUCT PAGE (PDP) CSS ===================== */
.crumb{font-size:var(--step--1);color:var(--stone);padding-block:var(--sp-6) 0;text-transform:uppercase;letter-spacing:.1em}
.crumb a:hover{color:var(--slate)}

/* product layout */
.pdp{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,64px);padding-block:var(--sp-6) var(--sp-10);align-items:start}
@media(max-width:900px){.pdp{grid-template-columns:1fr;gap:var(--sp-7)}}

/* gallery */
.gallery{position:sticky;top:84px}
@media(max-width:900px){.gallery{position:static}}
.gmain{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:var(--sand)}
.gmain img{width:100%;height:100%;object-fit:cover}
.gthumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-3);margin-top:var(--sp-3)}
.gthumbs button{padding:0;border:1px solid var(--stone-soft);border-radius:var(--radius);overflow:hidden;cursor:pointer;
                aspect-ratio:1/1;background:var(--sand);transition:border-color .2s}
.gthumbs button[aria-current="true"]{border-color:var(--graphite)}
.gthumbs img{width:100%;height:100%;object-fit:cover}

/* buy box */
.buy h1{font-size:var(--step-3);margin:var(--sp-4) 0 var(--sp-3)}
.sub{color:var(--slate);font-size:var(--step-1);font-family:var(--serif-text);font-style:italic;max-width:42ch}
.priceblock{display:flex;align-items:baseline;gap:12px;margin:var(--sp-6) 0 var(--sp-2);flex-wrap:wrap}
.priceblock .now{font-family:var(--serif);font-size:2.6rem;line-height:1}
.priceblock .was{font-size:1.1rem;color:var(--stone);text-decoration:line-through}
.save{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--terra);
      border:1px solid var(--terra);border-radius:99px;padding:4px 10px}
.mo{font-size:var(--step--1);color:var(--stone)}.mo b{color:var(--slate)}
.opt-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--stone);font-weight:600;margin:var(--sp-7) 0 var(--sp-4)}
.swatches{display:flex;gap:var(--sp-4)}
.swatch{display:flex;align-items:center;gap:9px;border:1px solid var(--stone-soft);border-radius:var(--radius);
        padding:9px 14px;cursor:pointer;font-size:var(--step--1);transition:border-color .2s}
.swatch[aria-current="true"]{border-color:var(--graphite)}
.dot{width:18px;height:18px;border-radius:50%;border:1px solid var(--stone-soft)}
.dot.graphite{background:oklch(0.27 0.005 80)}.dot.slate{background:oklch(0.40 0.006 250)}

/* bundle radios */
.bundles{display:flex;flex-direction:column;gap:var(--sp-3)}
.bundle{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;border:1px solid var(--stone-soft);
        border-radius:var(--radius);padding:14px 16px;cursor:pointer;transition:border-color .2s,background .2s}
.bundle[aria-current="true"]{border-color:var(--graphite);background:var(--paper)}
.bundle .mark{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--stone);position:relative}
.bundle[aria-current="true"] .mark{border-color:var(--graphite)}
.bundle[aria-current="true"] .mark::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--graphite)}
.bundle .bt{font-weight:600}.bundle .bd{font-size:var(--step--1);color:var(--stone)}
.bundle .bp{font-family:var(--serif);font-size:1.1rem;text-align:right}
.bundle .pop{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--terra)}

.cta-row{margin-top:var(--sp-6)}
.bump{display:flex;gap:11px;align-items:flex-start;border:1px dashed var(--stone);border-radius:var(--radius);
      padding:13px 15px;margin-top:var(--sp-4);font-size:var(--step--1);cursor:pointer}
.bump input{margin-top:3px;accent-color:var(--terra-deep)}
.bump b{color:var(--graphite)}.bump span{color:var(--slate)}
.assure{display:flex;flex-wrap:wrap;gap:var(--sp-5) var(--sp-7);margin-top:var(--sp-6);font-size:var(--step--1);color:var(--slate)}
.assure span{display:flex;align-items:center;gap:8px}
.assure svg{width:16px;height:16px;stroke:var(--olive)}
.paycards-pdp{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:var(--sp-4)}
.paycards-pdp span{font-size:.6rem;font-weight:700;letter-spacing:.04em;color:var(--slate);background:var(--paper);
  border:1px solid var(--stone-soft);border-radius:4px;padding:5px 9px;text-transform:uppercase;white-space:nowrap}
.incl{margin-top:var(--sp-7);border-top:1px solid var(--stone-soft);padding-top:var(--sp-6)}
.incl h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--stone);font-weight:600;margin-bottom:var(--sp-4)}
.incl ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:var(--step--1);color:var(--slate)}
.incl li{display:flex;gap:8px}.incl li svg{width:14px;height:14px;stroke:var(--olive);flex:none;margin-top:4px}

/* lower content */
.sec-head-pdp{max-width:36ch;margin-bottom:var(--sp-8)}
.sec-head-pdp h2{font-size:var(--step-2);margin-top:var(--sp-4)}
.story{max-width:70ch;font-size:var(--step-1);color:var(--slate);line-height:1.6}
.story p+p{margin-top:var(--sp-5)}
.specs{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.specs td{padding:13px 4px;border-bottom:1px solid var(--stone-soft);vertical-align:top}
.specs td:first-child{color:var(--stone);width:42%;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem}
.specs td:last-child{color:var(--slate);font-weight:500}
.acc details{border-bottom:1px solid var(--stone-soft);padding:var(--sp-5) 0}
.acc summary{display:flex;justify-content:space-between;cursor:pointer;font-family:var(--serif);font-size:var(--step-1);list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{font-family:var(--sans);color:var(--terra);font-size:1.3rem;transition:transform .3s}
.acc details[open] .pm{transform:rotate(45deg)}
.acc p,.acc li{color:var(--slate);font-size:var(--step--1);max-width:70ch;padding-top:var(--sp-3)}
.acc ul{padding-left:18px;padding-top:var(--sp-3)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr}.incl ul{grid-template-columns:1fr}}

.gtee-pdp{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.gtee-pdp .gtee-card{padding:var(--sp-6);background:var(--sand);border-radius:var(--radius)}
.gtee-pdp .gtee-card .eyebrow{color:var(--terra)}.gtee-pdp .gtee-card h3{font-size:var(--step-1);margin:var(--sp-3) 0;letter-spacing:0}
.gtee-pdp .gtee-card p{color:var(--slate);font-size:var(--step--1)}
@media(max-width:620px){.gtee-pdp{grid-template-columns:1fr}}

/* sticky mobile bar */
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:60;background:color-mix(in oklch,var(--bone) 94%,transparent);
            backdrop-filter:blur(10px);border-top:1px solid var(--stone-soft);padding:10px var(--gut);
            display:none;align-items:center;justify-content:space-between;gap:16px}
.sticky-buy .sp{font-family:var(--serif);font-size:1.3rem}.sticky-buy .sw{font-size:.8rem;color:var(--stone);text-decoration:line-through;margin-left:6px}
.sticky-buy .btn{width:auto;padding:.8em 1.4em}
@media(max-width:900px){.sticky-buy{display:flex}body{padding-bottom:72px}}

/* WooCommerce integration overrides */
.woocommerce .btn-primary,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background:var(--graphite);color:var(--bone);border-radius:var(--radius);font-family:var(--sans);font-weight:600;
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: var(--olive);
}