/* ===== Pacific Chill — content pages (FAQ, Shipping, Policy, Payment) ===== */
/* uses the design tokens + footer from style.css; this adds the page layout */

.page{background:var(--ink);color:var(--paper);min-height:100svh;display:flex;flex-direction:column}

/* top bar */
.page__bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:max(clamp(18px,2.4vw,26px),env(safe-area-inset-top)) max(clamp(20px,5vw,56px),env(safe-area-inset-right)) clamp(18px,2.4vw,26px) max(clamp(20px,5vw,56px),env(safe-area-inset-left));
  background:rgba(10,14,20,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.page__brand{display:flex;align-items:center;gap:14px;font-family:var(--sans);font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;font-size:.74rem;color:var(--paper)}
.page__brand img{height:26px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.page__barlinks{display:flex;gap:clamp(16px,2.4vw,34px);align-items:center}
.page__barlinks a{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);transition:color .3s}
.page__barlinks a:hover{color:var(--paper)}
.page__shop{border:1px solid currentColor;border-radius:40px;padding:.55em 1.3em;color:var(--paper)!important}
.page__shop:hover{background:var(--paper);color:var(--ink)!important}

/* hero / title */
.page__head{padding:clamp(60px,11vw,140px) clamp(24px,6vw,80px) clamp(30px,5vw,60px);
  max-width:980px;margin:0 auto;width:100%;text-align:center}
.page__kicker{font-family:var(--sans);font-weight:500;letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;font-size:clamp(.66rem,1.2vw,.8rem);color:var(--sand)}
.page__title{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7vw,5rem);line-height:1;margin-top:.25em}
.page__intro{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.1rem,2.2vw,1.5rem);color:var(--mist);margin-top:1em;max-width:60ch;margin-inline:auto}

/* feature image (About) */
.page__media{width:100%;max-width:1180px;margin:0 auto;padding:clamp(6px,1.5vw,18px) clamp(24px,6vw,80px)}
.page__media img{width:100%;height:clamp(260px,48vh,560px);object-fit:cover;border-radius:3px;
  filter:grayscale(.5) contrast(1.04);transition:filter 1.4s var(--ease)}
.page__media:hover img{filter:grayscale(0)}

/* content */
.page__content{flex:1;width:100%;max-width:820px;margin:0 auto;padding:clamp(10px,2vw,30px) clamp(24px,6vw,80px) clamp(70px,10vw,130px)}
.page__content section{padding:clamp(26px,3.5vw,46px) 0;border-top:1px solid var(--line)}
.page__content section:first-child{border-top:none}
.page__content h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.15;margin-bottom:.6em;color:var(--paper)}
.page__content h3{font-family:var(--sans);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  font-size:.82rem;color:var(--sand);margin:1.6em 0 .7em}
.page__content p,.page__content li{font-family:var(--sans);font-weight:300;
  font-size:clamp(.98rem,1.5vw,1.08rem);line-height:1.8;color:var(--mist)}
.page__content p+p{margin-top:1em}
.page__content ul{list-style:none;margin:.4em 0}
.page__content li{position:relative;padding-left:1.4em;margin:.55em 0}
.page__content li::before{content:"—";position:absolute;left:0;color:var(--sand)}
.page__content a{color:var(--paper);border-bottom:1px solid var(--line);transition:border-color .3s}
.page__content a:hover{border-color:var(--paper)}
.page__content strong{color:var(--paper);font-weight:500}
.page__note{margin-top:2.4em;padding:1.4em 1.6em;border:1px solid var(--line);border-radius:3px;
  font-size:.92rem;color:var(--mist)}
.page__cta{display:inline-block;margin-top:1.4em;font-family:var(--sans);font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;border:1px solid var(--paper)!important;border-radius:40px;padding:.95em 2.2em;
  color:var(--paper);transition:background .35s,color .35s}
.page__cta:hover{background:var(--paper);color:var(--ink)}

@media (max-width:600px){
  .page__barlinks{gap:14px}
  .page__barlinks a:not(.page__shop){display:none}
}
/* touch devices: ≥44px tap targets */
@media (hover:none) and (pointer:coarse){
  .page__shop{min-height:48px;display:inline-flex;align-items:center}
  .page__cta{min-height:48px}
  .page__barlinks a{padding:8px 0}
}