/* VintageWoodCanvas — site styles.
 * Extends the design-system tokens + kit.css with the page-level layout this
 * storefront needs (craft-photo stand-ins, flash messages, content pages,
 * checkout, FAQ, etc.). Uses only the published tokens — no new colors. */

/* ---- Craft-photo stand-in ----------------------------------------------- */
/* No real photography was provided, so product imagery is a warm gradient
 * panel with a subtle grain overlay and an optional engraving line — exactly
 * how the design system renders product art. */
.vwc-photo{position:relative;width:100%;border-radius:2px;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;background:var(--paper-300);}
.vwc-photo__grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");}
.vwc-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(33,25,19,.42),rgba(33,25,19,0) 58%);}
.vwc-photo__engrave{position:relative;z-index:1;text-align:center;padding:0 10% 9%;color:rgba(255,255,255,.94);}
.vwc-photo__line{font-family:var(--font-display);font-size:clamp(20px,2.4vw,30px);line-height:1.1;
  text-shadow:0 1px 5px rgba(0,0,0,.45);}
.vwc-photo__sub{font-family:var(--font-sans);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;
  margin-top:8px;opacity:.9;text-shadow:0 1px 4px rgba(0,0,0,.45);}

/* Generic framed mat around imagery (mirrors hero__art / pdp__main). */
.vwc-mat{background:var(--paper-50);padding:14px;border:2px solid var(--border-strong);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-frame);}

/* ---- Header extras ------------------------------------------------------- */
.hdr__logo{display:inline-flex;align-items:center;cursor:pointer;}
.hdr__menu{display:none;margin-left:auto;}
.hdr__mobile{display:none;flex-direction:column;border-top:1px solid var(--border-subtle);
  background:var(--surface-card);padding:var(--space-3) var(--space-6);}
.hdr__mobile a{padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle);font-weight:500;color:var(--text-secondary);}
.hdr__mobile a:last-child{border-bottom:none;}

@media (max-width:900px){
  .hdr__menu{display:inline-flex;}
  .hdr__right{display:none;}
  .hdr__mobile[hidden]{display:none;}
  .hdr__mobile:not([hidden]){display:flex;}
}

/* ---- Flash messages ------------------------------------------------------ */
.flash-wrap{margin:var(--space-5) auto 0;display:flex;flex-direction:column;gap:var(--space-3);}
.flash{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-md);font-size:var(--text-sm);border:1px solid transparent;}
.flash svg{width:18px;height:18px;flex:0 0 18px;}
.flash--success{background:var(--success-bg);color:var(--success-fg);border-color:#cdddbb;}
.flash--error{background:var(--danger-bg);color:var(--danger-fg);border-color:#e8c4b6;}

/* ---- Buttons as links ---------------------------------------------------- */
a.vwc-btn{text-decoration:none;}

/* ---- Generic prose / content pages -------------------------------------- */
.page-head{padding:var(--space-16) 0 var(--space-8);}
.page-head--center{text-align:center;}
.page-head h1{font-family:var(--font-display);font-size:var(--text-4xl);line-height:1.06;margin-bottom:var(--space-3);}
.page-head .lede{font-size:var(--text-lg);color:var(--text-secondary);max-width:60ch;line-height:1.6;}
.page-head--center .lede{margin:0 auto;}

.prose{max-width:68ch;margin:0 auto;padding-bottom:var(--section-y);color:var(--text-secondary);}
.prose.prose--wide{max-width:80ch;}
.prose h2{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--text-primary);
  margin:var(--space-12) 0 var(--space-4);line-height:1.1;}
.prose h3{font-family:var(--font-display);font-size:var(--text-xl);color:var(--text-primary);margin:var(--space-8) 0 var(--space-3);}
.prose p{line-height:1.75;margin:0 0 var(--space-4);font-size:var(--text-md);}
.prose ul{line-height:1.7;padding-left:var(--space-5);margin:0 0 var(--space-5);}
.prose li{margin-bottom:var(--space-2);}
.prose a{color:var(--text-brand);text-decoration:underline;text-decoration-color:var(--clay-300);text-underline-offset:3px;}
.prose strong{color:var(--text-primary);}
.prose .updated{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);}

/* ---- Eyebrow / shared bits ---------------------------------------------- */
.center{text-align:center;}
.stack-sm > * + *{margin-top:var(--space-3);}

/* ---- Value props (icon row) --------------------------------------------- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);}
.value{display:flex;flex-direction:column;gap:var(--space-2);}
.value__icon{width:42px;height:42px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;
  background:var(--surface-card);border:1px solid var(--border-default);color:var(--brand-primary);box-shadow:var(--shadow-xs);}
.value__icon svg{width:21px;height:21px;stroke-width:1.75;}
.value h4{font-family:var(--font-display);font-size:var(--text-lg);}
.value p{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6;}

/* ---- Shop toolbar -------------------------------------------------------- */
.shop-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  flex-wrap:wrap;margin-bottom:var(--space-10);}
.shop-filters{display:flex;gap:var(--space-2);flex-wrap:wrap;}
.shop-filters a{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:500;
  padding:8px 16px;border-radius:var(--radius-pill);border:1px solid var(--border-default);
  background:var(--surface-card);color:var(--text-secondary);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);}
.shop-filters a:hover{border-color:var(--border-strong);}
.shop-filters a.is-active{background:var(--pine-500);color:var(--text-inverse);border-color:var(--pine-500);}
.shop-sort{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--text-secondary);}
.shop-sort .vwc-select-wrap{width:auto;min-width:180px;}
.shop-count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);}

/* Product cards use real <a> wrapper; keep frame photo aspect like kit. */
.vwc-pcard__frame .vwc-photo{aspect-ratio:4/5;}
.rating{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--text-secondary);}
.rating .stars{color:var(--brass-500);letter-spacing:1px;}
.rating .count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);}

/* ---- Product detail extras ---------------------------------------------- */
.pdp__photo.vwc-photo{aspect-ratio:4/5;}
.pdp__form{display:flex;flex-direction:column;}
.qty-stepper{display:inline-flex;align-items:center;gap:var(--space-2);border:1px solid var(--border-default);
  border-radius:var(--radius-md);padding:3px;background:var(--surface-raised);width:max-content;}
.qty-stepper input{width:44px;text-align:center;border:none;background:transparent;font-family:var(--font-mono);
  font-size:var(--text-sm);font-weight:700;color:var(--text-primary);}
.qty-stepper input:focus{outline:none;}
.spec-list{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);}
.spec-list li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;}
.spec-list svg{width:17px;height:17px;color:var(--brand-primary);flex:0 0 17px;margin-top:2px;}

/* ---- CSS-only product tabs ---------------------------------------------- */
.ptabs__radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.ptabs__nav label{appearance:none;background:none;border:none;cursor:pointer;font-family:var(--font-sans);
  font-size:var(--text-sm);font-weight:600;color:var(--text-muted);padding:var(--space-3) var(--space-4);position:relative;}
.ptabs__nav label:hover{color:var(--text-primary);}
.ptabs__panel{display:none;padding:20px 4px;}
#pt-1:checked ~ .ptabs__nav label[for="pt-1"],
#pt-2:checked ~ .ptabs__nav label[for="pt-2"],
#pt-3:checked ~ .ptabs__nav label[for="pt-3"],
#pt-4:checked ~ .ptabs__nav label[for="pt-4"]{color:var(--text-primary);}
#pt-1:checked ~ .ptabs__nav label[for="pt-1"]::after,
#pt-2:checked ~ .ptabs__nav label[for="pt-2"]::after,
#pt-3:checked ~ .ptabs__nav label[for="pt-3"]::after,
#pt-4:checked ~ .ptabs__nav label[for="pt-4"]::after{content:"";position:absolute;left:var(--space-4);right:var(--space-4);
  bottom:-1px;height:2px;background:var(--brand-accent);border-radius:2px;}
#pt-1:checked ~ .ptabs__panels #pp-1,
#pt-2:checked ~ .ptabs__panels #pp-2,
#pt-3:checked ~ .ptabs__panels #pp-3,
#pt-4:checked ~ .ptabs__panels #pp-4{display:block;}
.ptabs__radio:focus-visible ~ .ptabs__nav label{outline:2px solid var(--focus-ring);outline-offset:2px;}

/* ---- Customizer extras (uses .cz from kit) ------------------------------ */
.cz__canvas.vwc-photo{aspect-ratio:4/5;}
.cz__upload-hint{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);}
.switch-track{width:44px;height:26px;border-radius:999px;background:var(--paper-300);border:1px solid var(--border-strong);
  position:relative;flex:0 0 44px;cursor:pointer;transition:background var(--dur-base);}
.switch-track.on{background:var(--brand-primary);}
.switch-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:999px;background:#fff;
  box-shadow:var(--shadow-sm);transition:left var(--dur-base);}
.switch-track.on .switch-knob{left:20px;}

/* ---- Checkout ------------------------------------------------------------ */
.checkout{display:grid;grid-template-columns:1.3fr .9fr;gap:var(--space-12);
  padding:var(--space-10) 0 var(--section-y);align-items:start;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
.form-grid .vwc-field--full{grid-column:1 / -1;}
.checkout fieldset{border:none;margin:0 0 var(--space-8);padding:0;}
.checkout legend{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-4);padding:0;}
.invoice-note{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--surface-sunken);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-4);
  font-size:var(--text-sm);color:var(--text-secondary);line-height:1.6;margin-bottom:var(--space-6);}
.invoice-note svg{width:20px;height:20px;color:var(--brand-primary);flex:0 0 20px;margin-top:1px;}
.mini-line{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle);}
.mini-line__thumb{width:54px;aspect-ratio:4/5;border-radius:var(--radius-sm);border:2px solid var(--border-default);
  padding:3px;background:var(--paper-50);flex:0 0 54px;}
.mini-line__thumb .vwc-photo{aspect-ratio:4/5;}
.mini-line__body{flex:1;min-width:0;}
.mini-line__title{font-family:var(--font-display);font-size:var(--text-md);line-height:1.2;}
.mini-line__meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;}
.mini-line__price{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:700;white-space:nowrap;}

/* ---- Order confirmation -------------------------------------------------- */
.confirm{max-width:var(--container-md);margin:0 auto;padding:var(--space-16) 0 var(--section-y);}
.confirm__badge{width:64px;height:64px;border-radius:999px;background:var(--success-bg);color:var(--success-fg);
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-5);}
.confirm__badge svg{width:30px;height:30px;}
.confirm__ref{font-family:var(--font-mono);font-size:var(--text-lg);background:var(--surface-sunken);
  border:1px dashed var(--border-strong);border-radius:var(--radius-md);padding:6px 14px;display:inline-block;}

/* ---- FAQ accordion ------------------------------------------------------- */
.faq-list{max-width:var(--container-md);margin:0 auto;padding-bottom:var(--section-y);}
.faq-item{border-bottom:1px solid var(--border-default);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-4);padding:var(--space-5) 0;font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-primary);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .chev{transition:transform var(--dur-base) var(--ease-out);color:var(--text-muted);flex:0 0 auto;}
.faq-item[open] summary .chev{transform:rotate(180deg);}
.faq-item p{margin:0 0 var(--space-5);color:var(--text-secondary);line-height:1.75;max-width:64ch;}

/* ---- Contact ------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:1fr .8fr;gap:var(--space-16);padding:var(--space-10) 0 var(--section-y);align-items:start;}
.contact__aside h3{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-3);}
.contact__aside .row{display:flex;gap:var(--space-3);align-items:flex-start;margin-bottom:var(--space-4);color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6;}
.contact__aside .row svg{width:19px;height:19px;color:var(--brand-primary);flex:0 0 19px;margin-top:2px;}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---- Story / split sections --------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center;padding:var(--section-y) 0;}
.split--reverse .split__media{order:2;}
.split__media .vwc-photo{aspect-ratio:4/3;}
.split h2{font-family:var(--font-display);font-size:var(--text-3xl);line-height:1.08;margin-bottom:var(--space-4);}
.split p{color:var(--text-secondary);line-height:1.7;font-size:var(--text-md);margin-bottom:var(--space-4);}
.stat-row{display:flex;gap:var(--space-10);margin-top:var(--space-6);}
.stat b{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--brand-primary);display:block;}
.stat span{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}

/* ---- Materials grid ------------------------------------------------------ */
.mat-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8);padding-bottom:var(--section-y);}
.mat-card{display:grid;grid-template-columns:120px 1fr;gap:var(--space-5);background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);}
.mat-card__swatch{border-radius:var(--radius-md);min-height:120px;border:1px solid rgba(0,0,0,.08);}
.mat-card h3{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-2);}
.mat-card p{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6;}

/* ---- Testimonials band --------------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.quote-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);
  padding:var(--space-6);box-shadow:var(--shadow-sm);}
.quote-card .stars{color:var(--brass-500);letter-spacing:2px;font-size:var(--text-sm);}
.quote-card blockquote{margin:var(--space-3) 0;font-family:var(--font-serif);font-size:var(--text-md);
  line-height:1.6;color:var(--text-primary);}
.quote-card cite{font-style:normal;font-size:var(--text-sm);color:var(--text-muted);}

/* ---- CTA band ------------------------------------------------------------ */
.cta-band{background:var(--surface-inverse);color:var(--text-inverse);border-radius:var(--radius-lg);
  padding:var(--space-16);text-align:center;}
.cta-band h2{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--paper-50);margin-bottom:var(--space-3);}
.cta-band p{color:var(--paper-300);max-width:46ch;margin:0 auto var(--space-6);line-height:1.6;}

/* ---- Gift cards ---------------------------------------------------------- */
.giftcard{position:relative;aspect-ratio:1.6/1;border-radius:var(--radius-lg);padding:var(--space-6);
  display:flex;flex-direction:column;justify-content:space-between;color:var(--paper-50);
  background:linear-gradient(150deg,#3b5c49,#243b2e 70%);box-shadow:var(--shadow-lg);border:2px solid var(--bark-700);}
.giftcard .amt{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:700;}
.gift-amounts{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-4) 0;}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:900px){
  .values{grid-template-columns:1fr 1fr;}
  .checkout,.contact,.split,.split--reverse{grid-template-columns:1fr;gap:var(--space-10);}
  .split--reverse .split__media{order:0;}
  .quotes,.mat-cards{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .page-head h1{font-size:var(--text-3xl);}
}