/* SHOP / COFFEE ATELIER — speciality roastery: cream, espresso, tasting notes, 3D tilt, subscription configurator */
body[data-niche="shop"] {
  --paper:#FFFAF2; --paper-2:#F5EBD9; --paper-3:#FFFFFF;
  --espresso:#2A1E15; --espresso-2:#3E2D20; --espresso-3:#5A4332;
  --crema:#C9A37A; --crema-deep:#A37F58; --crema-soft:#E8D4B8;
  --cherry:#B8443C; --cherry-deep:#8C2F26;
  --bone:#8B7C6B; --hairline:rgba(42,30,21,.10); --hairline-2:rgba(42,30,21,.18);
  --hairline-on-dark:rgba(255,250,242,.10);
  --surface-page:var(--paper); --surface-card:var(--paper-3); --surface-soft:var(--paper-2);
  --text-primary:var(--espresso); --text-secondary:var(--bone); --border-soft:var(--hairline);
  --accent:var(--crema); --accent-dark:var(--crema-deep);
  background:var(--paper); color:var(--espresso); font-family:var(--font-sans);
}
body[data-niche="shop"] h1, body[data-niche="shop"] h2, body[data-niche="shop"] h3 {
  font-family:'DM Serif Display','Playfair Display',Georgia,serif; font-weight:400; color:var(--espresso); line-height:1.05; letter-spacing:-0.005em;
}
body[data-niche="shop"] .container { max-width:1280px; margin:0 auto; padding:0 24px; }

/* Subtle paper grain */
body[data-niche="shop"]::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 80% 0%, rgba(201,163,122,.10), transparent 50%);
}

/* TOPBAR */
.cf-top { position:absolute; top:0; left:0; right:0; z-index:30; padding:18px 0; transition:all .3s; }
.cf-top.scrolled { position:fixed; padding:14px 0; background:rgba(255,250,242,.94); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--hairline); }
.cf-top-inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.cf-nav { display:flex; gap:28px; }
.cf-nav a { color:var(--espresso-3); font-family:var(--font-sans); font-size:13px; font-weight:600; letter-spacing:.04em; transition:color .2s; }
.cf-nav a:hover { color:var(--cherry); }
.cf-brand { text-align:center; }
.cf-brand b { font-family:'DM Serif Display',serif; font-size:30px; color:var(--espresso); display:block; line-height:1; letter-spacing:-0.005em; }
.cf-brand b em { color:var(--cherry); font-style:italic; }
.cf-brand span { font-family:var(--font-sans); font-size:9px; letter-spacing:.42em; text-transform:uppercase; color:var(--bone); display:block; margin-top:5px; }
.cf-actions { justify-self:end; display:flex; gap:14px; align-items:center; }
.cf-actions-bag { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:1.5px solid var(--espresso); color:var(--espresso); border-radius:50px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:all .25s; }
.cf-actions-bag:hover { background:var(--espresso); color:var(--paper); }
.cf-actions-bag b { background:var(--cherry); color:var(--paper); width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
@media (max-width:840px) { .cf-nav { display:none; } .cf-top-inner { grid-template-columns:1fr 1fr; } .cf-brand { text-align:left; } }

/* HERO */
.cf-hero { padding:140px 0 100px; position:relative; z-index:1; overflow:hidden; }
.cf-hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; }
.cf-hero-eye { display:inline-flex; align-items:center; gap:14px; color:var(--cherry); font-size:11px; letter-spacing:.32em; text-transform:uppercase; font-weight:700; margin-bottom:28px; font-family:var(--font-sans); }
.cf-hero-eye::before { content:''; width:28px; height:1px; background:var(--cherry); }
.cf-hero h1 { font-size:clamp(56px, 8.4vw, 130px); margin:0 0 28px; }
.cf-hero h1 em { color:var(--cherry); font-style:italic; }
.cf-hero p { color:var(--espresso-3); font-size:clamp(16px, 1.3vw, 19px); line-height:1.65; max-width:54ch; margin:0 0 32px; }
.cf-hero-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:48px; }
.cf-cta { display:inline-flex; align-items:center; gap:8px; padding:14px 24px; background:var(--espresso); color:var(--paper); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; border-radius:50px; transition:all .25s; font-family:var(--font-sans); }
.cf-cta:hover { background:var(--cherry); transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(184,68,60,.4); }
.cf-cta.gh { background:transparent; color:var(--espresso); border:1.5px solid var(--espresso); }
.cf-cta.gh:hover { background:var(--espresso); color:var(--paper); }
.cf-hero-meta { display:flex; gap:28px; align-items:center; font-family:var(--font-sans); font-size:12px; color:var(--bone); }
.cf-hero-meta b { color:var(--espresso); font-size:24px; font-weight:800; font-family:'DM Serif Display',serif; }
.cf-hero-meta em { font-style:italic; color:var(--cherry); }
.cf-hero-photo { position:relative; aspect-ratio:1/1.15; }
.cf-hero-photo-img { position:absolute; inset:0; background-size:cover; background-position:center; background-color:var(--espresso-3); border-radius:50% 50% 50% 50% / 50% 50% 50% 50%; box-shadow:0 32px 64px -32px rgba(42,30,21,.4); transform:rotate(-3deg); transition:transform .8s var(--ease-smooth); }
.cf-hero-photo:hover .cf-hero-photo-img { transform:rotate(0); }
.cf-hero-photo-stamp { position:absolute; top:24px; right:0; transform:translateX(40%) rotate(8deg); background:var(--paper-3); border:1px solid var(--cherry); color:var(--cherry); padding:14px 20px; max-width:160px; text-align:center; font-family:var(--font-sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.cf-hero-photo-stamp b { display:block; font-family:'DM Serif Display',serif; font-style:italic; font-size:24px; letter-spacing:0; text-transform:none; color:var(--cherry); margin-bottom:4px; font-weight:400; }
@media (max-width:980px) { .cf-hero-grid { grid-template-columns:1fr; gap:40px; } .cf-hero-photo { max-width:480px; margin:0 auto; } }

/* MARQUEE — coffee origins */
.cf-marquee { background:var(--espresso); border-top:1px solid var(--crema); border-bottom:1px solid var(--crema); padding:18px 0; overflow:hidden; position:relative; z-index:1; }
.cf-marquee-track { display:flex; gap:64px; animation:cf-mq 38s linear infinite; white-space:nowrap; }
.cf-marquee:hover .cf-marquee-track { animation-play-state:paused; }
.cf-marquee span { font-family:'DM Serif Display',serif; font-style:italic; color:var(--crema); font-size:22px; }
.cf-marquee span::before { content:'☕'; margin-right:64px; font-style:normal; }
@keyframes cf-mq { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* SECTIONS */
.cf-sec { padding:clamp(80px, 9vw, 130px) 0; position:relative; z-index:1; }
.cf-sec.bg2 { background:var(--paper-2); }
.cf-sec.dark { background:var(--espresso); color:var(--paper); }
.cf-sec.dark h2, .cf-sec.dark h3 { color:var(--paper); }
.cf-eye { color:var(--cherry); font-family:var(--font-sans); font-size:11px; letter-spacing:.32em; text-transform:uppercase; font-weight:700; margin-bottom:18px; display:inline-block; }
.cf-sec.dark .cf-eye { color:var(--crema); }
.cf-h2 { font-size:clamp(40px, 5.6vw, 80px); margin:0 0 16px; }
.cf-h2 em { color:var(--cherry); font-style:italic; }
.cf-sec.dark .cf-h2 em { color:var(--crema); }
.cf-lead { color:var(--bone); font-size:clamp(15px, 1.2vw, 17px); line-height:1.7; max-width:60ch; }
.cf-sec.dark .cf-lead { color:rgba(255,250,242,.78); }

/* BEANS — 3D tilt cards */
.cf-beans { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; perspective:1200px; }
.cf-bean { background:var(--paper-3); border:1px solid var(--hairline); border-radius:24px; padding:32px 30px; transition:transform .3s var(--ease-smooth), box-shadow .3s; position:relative; transform-style:preserve-3d; }
.cf-bean:hover { box-shadow:0 24px 48px -16px rgba(42,30,21,.16); }
.cf-bean-flag { position:absolute; top:24px; right:30px; font-size:28px; transform:translateZ(40px); }
.cf-bean-origin { font-family:var(--font-sans); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--cherry); font-weight:800; margin-bottom:10px; transform:translateZ(20px); }
.cf-bean h3 { font-size:32px; margin:0 0 8px; transform:translateZ(30px); }
.cf-bean h3 em { color:var(--cherry); font-style:italic; }
.cf-bean-roast { display:inline-block; font-family:var(--font-sans); font-size:11px; padding:4px 10px; background:var(--paper-2); color:var(--espresso-3); border-radius:50px; font-weight:600; letter-spacing:.06em; margin-bottom:18px; transform:translateZ(20px); }
.cf-bean-notes { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px; transform:translateZ(20px); }
.cf-bean-note { padding:5px 10px; border:1px solid var(--hairline-2); color:var(--espresso-3); font-family:var(--font-sans); font-size:11px; font-weight:600; border-radius:50px; }
.cf-bean-meter { margin-bottom:22px; transform:translateZ(20px); }
.cf-bean-meter-row { display:flex; align-items:center; justify-content:space-between; font-family:var(--font-sans); font-size:11px; letter-spacing:.06em; color:var(--bone); margin-bottom:8px; font-weight:600; text-transform:uppercase; }
.cf-bean-meter-row b { color:var(--espresso); font-weight:800; }
.cf-bean-meter-bar { width:100%; height:4px; background:var(--paper-2); border-radius:2px; overflow:hidden; }
.cf-bean-meter-bar-fill { height:100%; background:linear-gradient(90deg, var(--crema), var(--cherry)); border-radius:2px; transform-origin:left; }
.cf-bean-foot { display:flex; justify-content:space-between; align-items:flex-end; padding-top:18px; border-top:1px solid var(--hairline); transform:translateZ(20px); }
.cf-bean-price { font-family:'DM Serif Display',serif; font-size:32px; color:var(--espresso); font-weight:400; line-height:1; letter-spacing:-0.01em; }
.cf-bean-price small { color:var(--bone); font-size:13px; margin-left:6px; font-family:var(--font-sans); }
.cf-bean-buy { display:inline-flex; padding:10px 16px; background:var(--espresso); color:var(--paper); font-family:var(--font-sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; border-radius:50px; transition:background .25s; }
.cf-bean-buy:hover { background:var(--cherry); }
@media (max-width:980px) { .cf-beans { grid-template-columns:1fr 1fr; } }
@media (max-width:600px)  { .cf-beans { grid-template-columns:1fr; } }

/* SUBSCRIPTION CONFIGURATOR */
.cf-sub { background:var(--paper-3); border-radius:32px; padding:clamp(36px, 5vw, 64px); margin-top:56px; box-shadow:0 32px 64px -32px rgba(42,30,21,.16); display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; position:relative; overflow:hidden; }
.cf-sub::before { content:''; position:absolute; top:-100px; right:-100px; width:340px; height:340px; background:radial-gradient(circle, var(--crema-soft), transparent 65%); pointer-events:none; }
.cf-sub-row { margin-bottom:24px; position:relative; z-index:1; }
.cf-sub-row label { display:block; font-family:var(--font-sans); font-size:11px; letter-spacing:.18em; color:var(--bone); margin-bottom:12px; font-weight:700; text-transform:uppercase; }
.cf-sub-row label b { color:var(--cherry); font-weight:800; }
.cf-sub-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cf-sub-tile { padding:14px 12px; background:var(--paper-2); border:2px solid transparent; border-radius:14px; cursor:pointer; text-align:center; transition:all .2s; font-family:var(--font-sans); font-weight:600; font-size:13px; color:var(--espresso-3); }
.cf-sub-tile.active { background:var(--espresso); color:var(--paper); border-color:var(--cherry); }
.cf-sub-tile:not(.active):hover { background:var(--paper-3); border-color:var(--espresso); }
.cf-sub-tile small { display:block; font-size:11px; opacity:.7; margin-top:2px; font-weight:500; }
.cf-sub-result { background:linear-gradient(160deg, var(--espresso-2), var(--espresso)); color:var(--paper); padding:40px; border-radius:24px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; }
.cf-sub-result::before { content:''; position:absolute; top:-30px; right:-30px; width:160px; height:160px; background:radial-gradient(circle, rgba(201,163,122,.3), transparent 65%); pointer-events:none; }
.cf-sub-label { font-family:var(--font-sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--crema); font-weight:700; position:relative; z-index:1; }
.cf-sub-price { font-family:'DM Serif Display',serif; font-size:clamp(48px, 5.5vw, 72px); font-weight:400; line-height:1; position:relative; z-index:1; letter-spacing:-0.01em; }
.cf-sub-price small { font-size:16px; color:var(--crema); margin-left:8px; font-family:var(--font-sans); font-style:italic; }
.cf-sub-summary { font-family:var(--font-sans); color:rgba(255,250,242,.85); font-size:14px; line-height:1.6; padding-top:14px; border-top:1px solid rgba(255,250,242,.2); position:relative; z-index:1; }
.cf-sub-summary b { color:var(--crema); font-weight:600; }
.cf-sub-result a { display:inline-block; margin-top:12px; padding:14px 20px; background:var(--paper); color:var(--espresso); font-family:var(--font-sans); font-weight:700; border-radius:50px; text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; transition:transform .2s; position:relative; z-index:1; }
.cf-sub-result a:hover { transform:translateY(-2px); }
@media (max-width:900px) { .cf-sub { grid-template-columns:1fr; } }

/* BREWING METHODS */
.cf-brew { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:56px; border:1px solid var(--hairline-on-dark); border-radius:24px; overflow:hidden; }
.cf-brew-card { padding:36px 28px; border-right:1px solid var(--hairline-on-dark); transition:background .25s; cursor:pointer; }
.cf-brew-card:last-child { border-right:0; }
.cf-brew-card:hover { background:rgba(255,250,242,.04); }
.cf-brew-card-icon { width:64px; height:64px; background:rgba(201,163,122,.15); border:1px solid var(--crema); color:var(--crema); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; margin-bottom:22px; transition:transform .4s var(--ease-smooth); }
.cf-brew-card:hover .cf-brew-card-icon { transform:rotate(-8deg) scale(1.05); background:var(--crema); color:var(--espresso); }
.cf-brew-card h3 { font-size:24px; margin:0 0 8px; }
.cf-brew-card-meta { display:flex; gap:14px; margin:14px 0; font-family:var(--font-sans); font-size:11px; color:rgba(255,250,242,.6); letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.cf-brew-card-meta div b { display:block; font-family:'DM Serif Display',serif; font-size:18px; color:var(--crema); margin-bottom:2px; text-transform:none; letter-spacing:0; font-weight:400; }
.cf-brew-card p { font-family:var(--font-sans); color:rgba(255,250,242,.78); font-size:13px; line-height:1.6; margin:0; }
@media (max-width:900px) { .cf-brew { grid-template-columns:1fr 1fr; } .cf-brew-card { border-right:1px solid var(--hairline-on-dark); border-bottom:1px solid var(--hairline-on-dark); } .cf-brew-card:nth-child(2n) { border-right:0; } }
@media (max-width:540px) { .cf-brew { grid-template-columns:1fr; } .cf-brew-card { border-right:0 !important; } }

/* CAFE BLOCK */
.cf-cafe { display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:48px; align-items:center; }
.cf-cafe-photo { aspect-ratio:4/5; background-size:cover; background-position:center; background-color:var(--paper-2); border-radius:32px; overflow:hidden; position:relative; }
.cf-cafe-photo::after { content:''; position:absolute; inset:auto 0 0 0; height:50%; background:linear-gradient(180deg, transparent, rgba(42,30,21,.5)); }
.cf-cafe-info h2 { margin-bottom:24px; }
.cf-cafe-info p { font-size:16px; line-height:1.7; color:var(--espresso-3); margin:0 0 18px; }
.cf-cafe-info p em { font-style:italic; color:var(--cherry); }
.cf-cafe-hours { background:var(--paper-3); border:1px solid var(--hairline); border-radius:18px; padding:24px 28px; margin-top:24px; }
.cf-cafe-hours-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--hairline); font-family:var(--font-sans); font-size:13px; }
.cf-cafe-hours-row:last-child { border-bottom:0; }
.cf-cafe-hours-row span { color:var(--bone); }
.cf-cafe-hours-row b { color:var(--espresso); font-weight:700; }
@media (max-width:900px) { .cf-cafe { grid-template-columns:1fr; } }

/* FAQ */
.cf-faq { max-width:880px; margin:36px auto 0; }
.cf-faq details { border-bottom:1px solid var(--hairline); padding:22px 0; }
.cf-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; font-family:'DM Serif Display',serif; font-size:24px; line-height:1.3; }
.cf-faq summary::-webkit-details-marker { display:none; }
.cf-faq summary::after { content:'+'; color:var(--cherry); font-size:28px; transition:transform .25s; font-family:var(--font-sans); font-weight:300; }
.cf-faq details[open] summary::after { transform:rotate(45deg); }
.cf-faq details > div { padding-top:14px; color:var(--espresso-3); line-height:1.7; font-size:15px; max-width:78ch; }

/* FOOTER */
.cf-foot { background:var(--espresso); color:var(--paper); padding:64px 0 28px; border-top:1px solid var(--crema); }
.cf-foot-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px; }
.cf-foot-brand b { font-family:'DM Serif Display',serif; font-size:36px; color:var(--paper); display:block; line-height:1; }
.cf-foot-brand b em { color:var(--crema); font-style:italic; }
.cf-foot-brand p { color:rgba(255,250,242,.72); margin:14px 0 0; max-width:34ch; line-height:1.65; font-size:13px; }
.cf-foot h5 { color:var(--crema); font-family:var(--font-sans); font-size:11px; letter-spacing:.26em; text-transform:uppercase; margin:0 0 14px; font-weight:700; }
.cf-foot a { color:rgba(255,250,242,.7); display:block; padding:4px 0; font-size:13px; }
.cf-foot a:hover { color:var(--crema); }
.cf-foot-bot { padding-top:20px; border-top:1px solid var(--hairline-on-dark); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; color:rgba(255,250,242,.5); font-size:12px; }
@media (max-width:800px) { .cf-foot-top { grid-template-columns:1fr 1fr; } }
@media (max-width:540px) { .cf-foot-top { grid-template-columns:1fr; } }

body[data-niche="shop"] .reveal { opacity:0; transform:translateY(20px); transition:opacity 700ms var(--ease-smooth), transform 700ms var(--ease-smooth); }
body[data-niche="shop"] .reveal.in { opacity:1; transform:none; }