@import url("css/effects.css?v=3");
/* Glass Skin SA: neutral editorial theme.
   Loaded after store.css and the brand colours, so it only re-colours and re-types the storefront.
   No layout, cart or checkout behaviour lives here. The dark theme from store.css is untouched.
   Motion (hero slider, fade-ins, hover lift) lives in css/effects.css, imported above. */

:root{
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}

/* ---------- light palette: ivory, oat, taupe, espresso ---------- */
html[data-theme="light"]{
  --accent:#3b332e;
  --accent-hover:#6b5d53;
  --accent-deep:#8c7662;
  --accent-tint:#f0e9e0;
  --accent-ink:#3b332e;
  --bar-bg:rgba(250,248,245,.88);
  --sheet-bg:#faf8f5;
  --ink:#2a2522;
  --ink-soft:rgba(42,37,34,.82);
  --ink-big:#2a2522;
  --ink-dim:#7b716a;
  --curtain:rgba(243,238,232,.55);
  --hairline:#e6dfd7;
  --frame:#e6dfd7;
  --focus:rgba(140,118,98,.55);
  color-scheme:light;
}
html[data-theme="light"] body{background:#faf8f5}
html body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:#e4d8cb;color:#2a2522}

/* ---------- headline typography ---------- */
html .hero h1,
html .ct-head h1,
html .c2-head h1,
html .pd h1,
html .bg h1,
html .ct-h2,
html .rs-title,
html .rs-side p,
html .ar-head h2,
html .ar-lead h3,
html .ct-usp-item h3,
html .gn-chip-title,
html .gn-bag-title{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.012em;
}
html .rs-title{font-size:56px}
html .ar-head h2 b,html .ar-head h2{font-weight:500}
html .ar-lead h3{font-size:30px}
html .ct-usp-item h3{font-size:23px}

/* ---------- navigation ---------- */
html[data-theme="light"] .gn-link{color:var(--ink)}
.gn-wordmark{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:.01em;color:inherit;white-space:nowrap;line-height:1}
@media(max-width:600px){.gn-wordmark{font-size:17px}}
html[data-theme="light"] .gn.solid .gn-bar,
html[data-theme="light"] .gn-bar{border-bottom:1px solid rgba(42,37,34,.06)}
html[data-theme="light"] .gn-burger .l1,
html[data-theme="light"] .gn-burger .l2{background:var(--ink)}

/* ---------- hero ---------- */
html .hero{
  min-height:80vh;
  padding:104px 24px 88px;
  background:radial-gradient(120% 90% at 50% 0%,#fcfaf7 0%,#f4eee6 55%,#eadfd3 100%);
}
html .hero .eyebrow{
  display:block;margin-bottom:24px;
  font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-deep);
}
html .hero h1{font-size:clamp(44px,7.4vw,92px);line-height:1.03;letter-spacing:-.022em;max-width:11em}
html .hero p{font-size:clamp(16px,2vw,20px);line-height:1.6;max-width:31em;margin-top:22px;color:var(--ink-dim)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:38px}
.hero-cta .pd-buy{padding:15px 34px;font-size:15px}
.hero-cta .btn-ghost{
  display:inline-block;padding:14px 32px;border-radius:980px;font-size:15px;font-weight:500;
  border:1px solid currentColor;color:var(--ink);background:transparent;
  transition:background .2s,color .2s,border-color .2s;
}
.hero-cta .btn-ghost:hover{background:var(--ink);color:#faf8f5;border-color:var(--ink)}
.hero-meta{margin-top:52px;display:flex;gap:10px 30px;flex-wrap:wrap;justify-content:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.hero-meta span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45;margin-right:30px;vertical-align:middle}
@media(max-width:640px){
  html .hero{min-height:72vh;padding:80px 20px 64px}
  .hero-meta{gap:8px 18px;font-size:11px}
  .hero-meta span+span::before{margin-right:18px}
}
html[data-theme="dark"] .hero .eyebrow{color:var(--d-tag)}
html[data-theme="dark"] .hero-cta .btn-ghost:hover{background:var(--d-text);color:#16171a;border-color:var(--d-text)}

/* ---------- bands, cards and rails ---------- */
html[data-theme="light"] .ct-band,
html[data-theme="light"] .rs,
html[data-theme="light"] .ar{background:#f3eee8}
html[data-theme="light"] .ct-card,
html[data-theme="light"] .ar-card{
  background:#fff;border:1px solid #ece5dd;
  box-shadow:0 1px 2px rgba(42,37,34,.04),0 14px 30px -18px rgba(42,37,34,.16);
}
html[data-theme="light"] .ct-card:hover,
html[data-theme="light"] .ar-card:hover{box-shadow:0 1px 2px rgba(42,37,34,.05),0 22px 40px -18px rgba(42,37,34,.22)}
html[data-theme="light"] .ar-lead{background:#ebe2d8;border:1px solid #e3d8cc}
html[data-theme="light"] .ar-lead p{color:#5d544d}
html[data-theme="light"] .c2-card{background:#fff}
html[data-theme="light"] .pd-art{background:#f3eee8}
html[data-theme="light"] .rs-art span{background:#fff}
html[data-theme="light"] .rs-btn,
html[data-theme="light"] .ar-btn{background:#fff;color:var(--ink)}
html[data-theme="light"] .ar-btn{background:#ebe4db}
html[data-theme="light"] .ar-btn:hover{background:#e0d6ca}
/* the template's coloured illustration is not part of a neutral palette; the html prefix beats rails.js's own rule, which is injected later */
html .ar-scene{display:none}
html[data-theme="light"] .rs-title,
html[data-theme="light"] .rs-side p,
html[data-theme="light"] .rs-label,
html[data-theme="light"] .ar-head h2 b,
html[data-theme="light"] .ar-lead h3,
html[data-theme="light"] .ar-name,
html[data-theme="light"] .ar-price{color:var(--ink)}
html[data-theme="light"] .ar-head h2{color:var(--ink-dim)}
html[data-theme="light"] .rs-side a{color:var(--accent-ink)}
html[data-theme="light"] .ar-tag,html[data-theme="light"] .ct-tag,html[data-theme="light"] .c2-tag,html[data-theme="light"] .pd-tag{color:var(--accent-deep)}

/* ---------- buttons, chips, form fields ---------- */
.pd-buy,.gn-bagbtn{letter-spacing:.02em;font-weight:500}
html[data-theme="light"] .pd-buy.is-added{background:#6b5d53}
html[data-theme="light"] .ct-chip.on,
html[data-theme="light"] .c2-chip.on,
html[data-theme="light"] .gn-chip-fill{background:var(--accent);border-color:var(--accent);color:#fff}
html[data-theme="light"] .pd-subnote{background:#f3eee8;color:#5d544d}
html[data-theme="light"] .rs-fbadge{background:var(--accent)}
html[data-theme="light"] .pd-opt select,
html[data-theme="light"] .pd-opt input,
html[data-theme="light"] .bg-email,
html[data-theme="light"] .bg-qty{border-color:#ddd3c9;background:#fff}

/* ---------- why-us and footer ---------- */
html[data-theme="light"] .ct-why{border-top:1px solid var(--hairline)}
html[data-theme="light"] .ct-usp-item p{color:#5d544d}
html[data-theme="light"] footer.rs-foot{background:#f3eee8;border-top:1px solid var(--hairline);padding:36px 22px 56px}
html[data-theme="light"] footer.rs-foot a{color:var(--ink)}
html[data-theme="light"] footer.rs-foot a:hover{text-decoration:underline}

/* ---------- product photos: whole product visible, never cropped or zoomed ---------- */
/* Cards (category, store and the home page Featured rail): the photo sits in a clean white
   square tile with the full product shown (contain), and the name and price sit beneath it
   in normal text instead of over a dark gradient. */
html .ct-card.has-photo,
html .c2-card.has-photo,
html .ar-card.has-photo{padding:12px 12px 26px;min-height:0;justify-content:flex-start;overflow:hidden}
html .ct-art.has-img,
html .c2-art.has-img,
html .ar-art.has-img{position:relative;flex:none;display:block;width:100%;min-height:0;aspect-ratio:1/1;background:#fff;border-radius:14px;overflow:hidden;margin-bottom:18px}
html .ct-art.has-img::after,
html .c2-art.has-img::after,
html .ar-art.has-img::after{display:none}
html .ct-art.has-img .rs-img,
html .c2-art.has-img .rs-img,
html .ar-art.has-img .rs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:3%}
html .ct-card.has-photo .ct-tag,
html .ct-card.has-photo .ct-name,
html .ct-card.has-photo .ct-price,
html .c2-card.has-photo .c2-tag,
html .c2-card.has-photo .c2-name,
html .c2-card.has-photo .c2-price,
html .ar-card.has-photo .ar-tag,
html .ar-card.has-photo .ar-name,
html .ar-card.has-photo .ar-price{padding-left:10px;padding-right:10px}
html .ct-card.has-photo .ct-name,
html .ct-card.has-photo .ct-price,
html .c2-card.has-photo .c2-name,
html .c2-card.has-photo .c2-price,
html .ar-card.has-photo .ar-name,
html .ar-card.has-photo .ar-price{color:var(--ink)}
html .ct-card.has-photo .ct-name,
html .c2-card.has-photo .c2-name,
html .ar-card.has-photo .ar-name{font-size:16px;line-height:1.35;margin-top:4px}
html .ct-card.has-photo .ct-price,
html .c2-card.has-photo .c2-price,
html .ar-card.has-photo .ar-price{font-size:15px;margin-top:8px;color:var(--ink-dim)}
html .ct-card.has-photo .ct-tag,
html .c2-card.has-photo .c2-tag,
html .ar-card.has-photo .ar-tag{color:var(--accent-deep);margin-top:0}
html[data-theme="dark"] .ct-card.has-photo .ct-tag,
html[data-theme="dark"] .c2-card.has-photo .c2-tag,
html[data-theme="dark"] .ar-card.has-photo .ar-tag{color:var(--d-tag)}
html .ct-card.has-photo .rs-pill,
html .c2-card.has-photo .rs-pill,
html .ar-card.has-photo .rs-pill{background:rgba(255,255,255,.92);border-color:#e6dfd7;color:#2a2522;top:22px;left:22px}
html .c2-card.has-photo:hover .c2-art.has-img .rs-img{transform:scale(1.02)}
@media (max-width:833px){
  html .ct-card.has-photo,
  html .c2-card.has-photo,
  html .ar-card.has-photo{padding:8px 8px 20px}
  html .ct-art.has-img,
  html .c2-art.has-img,
  html .ar-art.has-img{border-radius:10px;margin-bottom:14px}
  html .ct-card.has-photo .ct-name,
  html .c2-card.has-photo .c2-name,
  html .ar-card.has-photo .ar-name{font-size:14px}
  html .ct-card.has-photo .ct-price,
  html .c2-card.has-photo .c2-price,
  html .ar-card.has-photo .ar-price{font-size:13px}
  html .ct-card.has-photo .rs-pill,
  html .c2-card.has-photo .rs-pill,
  html .ar-card.has-photo .rs-pill{top:16px;left:16px}
}

/* Product page: the main photo and the thumbnails show the whole product on white. */
html .pd-art.has-img{background:#fff;border:1px solid var(--hairline);border-radius:22px;box-shadow:0 1px 2px rgba(42,37,34,.04),0 22px 44px -28px rgba(42,37,34,.22)}
html[data-theme="dark"] .pd-art.has-img{border-color:var(--d-edge);box-shadow:none}
html .pd-art.has-img .rs-img{object-fit:contain;padding:2%}
html .pd-thumb{background:#fff}
html .pd-thumb img{object-fit:contain;padding:3px}

/* ---------- checkout: no discount codes are in use, so hide the code box (7 Nov 2026; delete these two lines to bring it back) ---------- */
html .co-field:has(#coCodeBox){display:none!important}
html #coCodeBox,html #coCodeMsg,html label[for="coCode"]{display:none!important}