/*
Theme Name: Coffeeshop West
Theme URI: https://coffeeshopwest.drokkie.nl
Author: Coffeeshop West
Description: Standalone custom theme for Coffeeshop West — bilingual (NL/EN), built to the brand's brown/green design system. Pages are custom full-bleed templates (no theme header/footer chrome); each WordPress Page just picks a template from Page Attributes.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: coffeeshop-west
*/

* { box-sizing: border-box; }

:root {
  --brown: #4d3935;
  --accent: #38b449;
  --accent-hover: #2c9138;
  --cream: #F6F3EF;
  --border: rgba(77,57,53,0.1);
}

body {
  margin: 0;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 26px;
  color: var(--brown);
  background: #FFFFFF;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: var(--brown);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
  margin: 0 0 7px;
}
h1 { font-size: 54px; line-height: 62px; }
h2 { font-size: 34px; line-height: 44px; }
h3 { font-size: 22px; line-height: 34px; }
h4 { font-size: 18px; line-height: 32px; }
h5 { font-size: 16px; line-height: 26px; }
h6 { font-size: 14px; line-height: 24px; }
p { margin: 0 0 16px; color: var(--brown); }
a { color: inherit; text-decoration: none; }
a.underline-link { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
a.underline-link:hover { opacity: 0.7; }
button { font-family: 'Open Sans', Helvetica, Arial, sans-serif; cursor: pointer; }

.btn-primary { display:inline-block; background: var(--accent); color:#FFFFFF; font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:15px 28px; border-radius:999px; border:none; transition: background 0.15s ease; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline { display:inline-block; border:1px solid rgba(77,57,53,0.3); color: var(--brown); font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:15px 28px; border-radius:999px; background:transparent; }
.btn-outline:hover { background: rgba(77,57,53,0.06); }

.nav-link { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--brown); opacity: 0.8; }
.nav-link:hover, .nav-link[aria-current="page"] { opacity: 1; }

/* Flag dropdown language switcher (template-parts/language-switcher.php).
   Each language is still a real WP page, not a JS toggle — the dropdown
   just picks which one to link to. Same floating white toggle+panel style
   everywhere: once in .header-actions (desktop, hidden ≤980px) and again
   in .mobile-header-actions next to the hamburger button (hidden above
   980px) — see the media queries below. initLangSwitch() in assets/site.js
   wires up the open/close behaviour for every .lang-switch on the page. */
.lang-switch { position:relative; }
.lang-switch-toggle {
  display:flex; align-items:center; gap:7px; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(77,57,53,0.2); background:#FFFFFF; cursor:pointer;
  font-size:13px; font-weight:700; color:var(--brown); font-family:'Open Sans', Helvetica, Arial, sans-serif;
  transition: background 0.15s ease;
}
.lang-switch-toggle:hover { background: rgba(77,57,53,0.06); }
.lang-flag { font-size:16px; line-height:1; }
.lang-code { letter-spacing:0.02em; }
.lang-chevron { transition: transform 0.15s ease; flex-shrink:0; }
.lang-switch.is-open .lang-chevron { transform: rotate(180deg); }

.lang-switch-menu {
  position:absolute; top: calc(100% + 8px); right:0; min-width:180px;
  background:#FFFFFF; border:1px solid var(--border); border-radius:10px;
  box-shadow: 0 12px 28px rgba(77,57,53,0.18);
  padding:6px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index:30;
}
.lang-switch.is-open .lang-switch-menu { opacity:1; visibility:visible; transform:translateY(0); }
.lang-switch-menu a, .lang-switch-menu span {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px;
  font-size:14px; color:var(--brown); text-decoration:none;
}
.lang-switch-menu a:hover { background: rgba(77,57,53,0.06); }
.lang-switch-menu [aria-current="true"] { background: rgba(56,180,73,0.12); font-weight:700; }

/* On the narrow mobile-header instance the floating panel would otherwise
   overflow the right edge of the screen since it's so close to it — pull
   it in a little further than the 0 (flush-right) desktop default. */
.mobile-header-actions .lang-switch-menu { right:-4px; }

.kicker { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; color: var(--accent); font-family: 'Open Sans', Helvetica, Arial, sans-serif; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 48px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 18px rgba(77,57,53,0.09); }
.site-header .logo img { height:52px; width:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:34px; }

/* Mobile hamburger toggle (shown ≤980px, see media queries below), paired
   with its own language-switcher instance so a mobile visitor can change
   language without first opening the nav overlay. Hidden entirely on
   desktop — .header-actions already carries its own switcher there. */
.mobile-header-actions { display:none; align-items:center; gap:10px; }
.hamburger-btn {
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border:none; border-radius:4px;
  background:transparent; flex-shrink:0; transition: background 0.15s ease;
}
.hamburger-btn:hover { background: rgba(77,57,53,0.06); }

/* Mobile nav overlay (off-canvas panel sliding in from the right) */
.mobile-nav-overlay {
  position:fixed; top:0; right:0; bottom:0; z-index:100;
  width:100%; max-width:380px;
  background: var(--brown); color:#F6F3EF;
  padding: 26px 28px 32px;
  display:flex; flex-direction:column;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  overflow-y:auto;
  will-change: transform;
}
.mobile-nav-overlay.is-open { transform: translateX(0); }

.mobile-nav-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:36px; }
.mobile-nav-close {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border:none; border-radius:4px;
  background:transparent; color:#F6F3EF; transition: background 0.15s ease;
}
.mobile-nav-close:hover { background: rgba(246,243,239,0.12); }

.mobile-nav-links { display:flex; flex-direction:column; margin-bottom:30px; }
.mobile-nav-links a {
  display:block; padding:16px 2px; font-size:21px; font-weight:600;
  color:#F6F3EF; border-bottom:1px solid rgba(246,243,239,0.15);
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
/* Use a GPU-composited transform instead of animating padding-left: animating
   a layout property (padding) on text that opens at the same moment the
   parent panel is mid-transform causes blurry/fuzzy text rendering in
   real-device iOS Safari (not reproducible in desktop "mobile view" device
   emulation, which uses a different rendering engine). transform avoids the
   reflow entirely, so no blur. */
.mobile-nav-links a:hover { opacity:0.75; transform: translateX(8px); }
/* The current-page indent is a static state, not a hover interaction — apply
   it immediately with no transition so it never animates while the overlay
   itself is still sliding into view. */
.mobile-nav-links a[aria-current="page"] { opacity:0.75; transform: translateX(8px); transition: none; }

.mobile-nav-hours { margin-bottom:28px; }
.mobile-nav-hours h6 { color: rgba(246,243,239,0.55); margin-bottom:6px; }
.mobile-nav-hours p { color:#F6F3EF; margin:0; }

.mobile-nav-cta { text-align:center; margin-top:auto; }

body.csw-nav-open { overflow:hidden; }

/* Page hero banner (plain cream, no photo — used on every page) */
.page-hero { position:relative; padding: 80px 48px; background: var(--cream); overflow:hidden; }
.page-hero .inner { max-width:760px; margin:0 auto; text-align:center; position:relative; z-index:2; animation: csw-fade-up 0.7s ease both; }

/* Homepage hero slider */
.hero-slider { position:relative; width:100%; aspect-ratio:2.2/1; overflow:hidden; background:#EDE8E1; }
.hero-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; z-index:1; transition:opacity 0.7s ease; }
.hero-slide.is-active { opacity:1; z-index:2; }
.hero-slider::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.28), rgba(0,0,0,0) 45%); z-index:3; pointer-events:none; }
.hero-nav-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,0.85); display:flex; align-items:center; justify-content:center; }
.hero-nav-btn.prev { left:20px; }
.hero-nav-btn.next { right:20px; }
.hero-dots { position:absolute; left:0; right:0; bottom:22px; z-index:4; display:flex; justify-content:center; gap:8px; }
.hero-dot { height:8px; width:8px; border-radius:4px; border:none; padding:0; cursor:pointer; background:rgba(255,255,255,0.6); transition:all 0.3s ease; }
.hero-dot.is-active { width:22px; background: var(--accent); }
@media (max-width: 560px) { .hero-slider { aspect-ratio: 4/3; } }

section { padding: 96px 48px; }
.section-tight { padding: 64px 48px; }
.max-1240 { max-width:1240px; margin:0 auto; }
.max-760 { max-width:760px; margin:0 auto; }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:40px; }
.grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:40px; }
.split { display:grid; grid-template-columns: 0.9fr 1.1fr; gap:72px; align-items:center; }

.usp-item { border-top:2px solid var(--accent); padding-top:22px; }
.usp-item svg { color: var(--accent); margin-bottom:16px; }
.usp-item p { font-size:14px; line-height:22px; color: rgba(77,57,53,0.65); margin:0; }

.photo-tile { aspect-ratio:4/3; border-radius:4px; overflow:hidden; }
.photo-tile img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.6s ease; }
.photo-tile:hover img { transform: scale(1.06); }

.banner-cta { background: var(--accent); padding: 64px 48px; }
.banner-cta .row { max-width:1240px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.banner-cta h2, .banner-cta p { color:#FFFFFF; }
.banner-cta .btn-white { background:#FFFFFF; color: var(--accent); font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:15px 28px; border-radius:999px; white-space:nowrap; display:inline-block; transition: transform 0.15s ease, box-shadow 0.2s ease; }
.banner-cta .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.15); }

.body-copy { font-size:16px; line-height:26px; color: rgba(77,57,53,0.75); }
.small-copy { font-size:14px; line-height:22px; color: rgba(77,57,53,0.65); }

.faq-item { border-bottom:1px solid var(--border); padding: 22px 0; transition: background 0.2s ease; }
.faq-item:hover { background: rgba(77,57,53,0.025); }
.faq-item h4 { margin-bottom:8px; }
.faq-item p { margin:0; color: rgba(77,57,53,0.75); font-size:15px; line-height:24px; }

.info-card { background:#FFFFFF; border:1px solid var(--border); border-radius:6px; padding:28px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.info-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(77,57,53,0.09); }

.card-review { background: #FFFFFF; border:1px solid var(--border); border-radius:6px; padding:28px; box-shadow: 0 1px 2px rgba(77,57,53,0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-review:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(77,57,53,0.09); }
.card-review .stars { display:flex; gap:3px; margin-bottom:16px; color: var(--accent); }
.card-review .quote { font-size:15px; line-height:24px; color: rgba(77,57,53,0.7); font-style:italic; margin-bottom:18px; }
.card-review .source { font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color: rgba(77,57,53,0.5); }

/* Footer */
.site-footer { background: var(--brown); padding: 72px 48px 32px; color: #D9CFCB; }
.site-footer h6 { color:#B7A9A4; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px; }
.site-footer a { color:#D9CFCB; }
.footer-links { display:flex; flex-direction:column; gap:10px; font-size:14px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12px; color:#B7A9A4; flex-wrap:wrap; gap:12px; }

.footer-grid { display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.12); }

.footer-trustpilot { padding-top:28px; }
.footer-trustpilot .trustpilot-widget { max-width:320px; }

/* Footer accordion toggle — inert on desktop (buttons render, but the
   media query below is what actually turns them into working dropdowns) */
.footer-col-toggle {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; background:transparent; border:none; padding:0; margin:0;
  font:inherit; text-align:left; color:inherit; cursor:default;
}
.footer-col-toggle h6 { margin-bottom:0; }
.footer-col-chevron { flex-shrink:0; display:none; color:#B7A9A4; transition: transform 0.25s ease; }
.footer-col-body { overflow:hidden; }

/* Follow-us icon row (footer + Contact page) */
.social-links { display:flex; gap:16px; }
.social-links a { display:flex; transition: opacity 0.15s ease, transform 0.15s ease; }
.social-links a:hover { opacity:0.7; transform: translateY(-2px); }

/* Contact page form (the static HTML fallback shown only if WPForms is
   ever deactivated — see template-contact-nl.php / -en.php) */
.contact-form label { display:block; font-size:13px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color: rgba(77,57,53,0.7); margin-bottom:6px; }
.contact-form input, .contact-form textarea {
  width:100%; padding:12px 14px; margin-bottom:18px; border:1px solid rgba(77,57,53,0.2); border-radius:3px;
  font-family:'Open Sans', Helvetica, Arial, sans-serif; font-size:15px; color:var(--brown); background:#FFFFFF;
}
.contact-form textarea { resize:vertical; min-height:110px; }

/* WPForms contact form (the real, live form — form 76 on the NL Contact
   page, form 69 on the EN one) — WPForms ships its own default styling
   (blue button, generic labels), so these overrides bring it in line with
   the site's own .contact-form look above. Scoped to .wpforms-container
   so it doesn't touch WPForms usage anywhere else; !important is needed
   because WPForms' own stylesheet loads after this one and is fairly
   specific. If WPForms changes its markup in a future version and a rule
   here stops matching, the form still works — it just reverts to
   WPForms' own default look until the selector is updated. */
.wpforms-container { font-family: 'Open Sans', Helvetica, Arial, sans-serif !important; }
.wpforms-container .wpforms-field { padding: 0 !important; margin-bottom: 18px !important; }
.wpforms-container .wpforms-field-label,
.wpforms-container label {
  display: block !important; font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: 0.03em !important; text-transform: uppercase !important;
  color: rgba(77,57,53,0.7) !important; margin-bottom: 6px !important;
}
.wpforms-container .wpforms-field-sublabel { text-transform: none !important; font-weight: 400 !important; letter-spacing: 0 !important; }
.wpforms-container .wpforms-required-label { color: #c0392b !important; }

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
  width: 100% !important; padding: 12px 14px !important; border: 1px solid rgba(77,57,53,0.2) !important;
  border-radius: 3px !important; font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
  font-size: 15px !important; color: var(--brown) !important; background: #FFFFFF !important;
  box-shadow: none !important; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wpforms-container textarea { resize: vertical !important; min-height: 110px !important; }
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  outline: none !important; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(56,180,73,0.15) !important;
}

.wpforms-container .wpforms-submit-container { margin-top: 6px !important; }
.wpforms-container button.wpforms-submit,
.wpforms-container .wpforms-submit {
  display: inline-block !important; background: var(--accent) !important; color: #FFFFFF !important;
  font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.04em !important;
  text-transform: uppercase !important; padding: 15px 28px !important; border-radius: 999px !important;
  border: none !important; cursor: pointer; box-shadow: none !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.wpforms-container button.wpforms-submit:hover,
.wpforms-container .wpforms-submit:hover {
  background: var(--accent-hover) !important; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(56,180,73,0.28) !important;
}

.wpforms-container .wpforms-error,
.wpforms-container label.wpforms-error {
  color: #c0392b !important; font-size: 13px !important; text-transform: none !important;
  font-weight: 400 !important; letter-spacing: 0 !important; margin-top: 4px !important;
}
.wpforms-container .wpforms-field-description { color: rgba(77,57,53,0.55) !important; font-size: 13px !important; }

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .grid-3, .grid-2, .split { grid-template-columns: 1fr !important; }
  h1 { font-size: 40px !important; line-height: 46px !important; }
  .site-header { padding: 14px 24px !important; }
  .nav-links, .header-actions { display: none !important; }
  .mobile-header-actions { display: flex !important; }
  .hamburger-btn { display: flex !important; }

  /* Homepage hero tagline ("PREMIUM QUALITY - XXX - PURE EXPERIENCE") —
     hidden on mobile only, kept on desktop. Same ≤980px breakpoint the
     rest of the theme uses to mean "mobile" (it's when the header switches
     to the hamburger menu above). */
  .hero-tagline { display: none !important; }

  /* Footer: stack into a single column and turn Menu/Visit/Connect into
     tap-to-expand dropdowns instead of a cramped 4-column grid. */
  .footer-grid { display:block; }
  .footer-brand { margin-bottom:8px; }
  .footer-col { border-top:1px solid rgba(255,255,255,0.12); }
  .footer-col:last-of-type { border-bottom:1px solid rgba(255,255,255,0.12); }
  .footer-col-toggle { cursor:pointer; padding:18px 0; }
  .footer-col-chevron { display:block; }
  .footer-col.is-open .footer-col-chevron { transform: rotate(180deg); }
  .footer-col-body { max-height:0; transition: max-height 0.3s ease; }
  .footer-col-body-inner { padding-bottom:20px; }
}
@media (min-width: 981px) {
  .hamburger-btn { display: none !important; }
  .mobile-header-actions { display: none !important; }
  .mobile-nav-overlay { display: none !important; }
}
@media (max-width: 560px) {
  section, .page-hero { padding-left: 24px !important; padding-right: 24px !important; }
  h1 { font-size: 32px !important; line-height: 38px !important; }
  .mobile-nav-overlay { max-width: none; }
}

/* ---------- Age-verification gate ---------- */
/* Hidden by default; html.csw-age-gate-open (see the inline script in
   head-meta.php and initAgeGate() in site.js) shows it and hides/locks
   everything else so it can't be dismissed by clicking away or tabbing
   past it. */
.age-gate-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(77,57,53,0.6);
  backdrop-filter: blur(6px);
}
html.csw-age-gate-open .age-gate-overlay { display: flex; }
html.csw-age-gate-open body { overflow: hidden; }
html.csw-age-gate-open body > *:not(.age-gate-overlay) { visibility: hidden; }

.age-gate-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 400px; width: 100%;
  padding: 86px 32px 32px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  animation: csw-fade-up 0.4s ease both;
}
.age-gate-badge {
  position: absolute; top: -65px; left: 50%; transform: translateX(-50%);
  width: 130px; height: 130px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center;
}
.age-gate-badge img { width: 100px; height: auto; max-width: 78%; object-fit: contain; display: block; }
.age-gate-kicker { font-size: 14px; color: rgba(77,57,53,0.55); margin-bottom: 8px; }
.age-gate-question { font-size: 26px; font-weight: 700; color: var(--brown); margin: 0 0 24px; }
.age-gate-actions { display: flex; gap: 12px; margin-bottom: 24px; }
.age-gate-actions .btn-primary { flex: 1; }
.age-gate-disclaimer { font-size: 13px; line-height: 20px; color: rgba(77,57,53,0.55); margin: 0; }

/* ---------- Motion & transitions ---------- */

html { scroll-behavior: smooth; }

.nav-link { position: relative; transition: opacity 0.15s ease; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px;
  background: var(--accent); transition: right 0.25s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { right: 0; }

.btn-primary { transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(56,180,73,0.28); }
.btn-outline { transition: background 0.15s ease, transform 0.15s ease; }
.btn-outline:hover { transform: translateY(-2px); }

/* Scroll-triggered reveal for content blocks */
.reveal-target { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-target.is-visible { opacity: 1; transform: translateY(0); }

/* Floating "back to top" button (template-parts/scroll-top.php). Sits below
   the mobile nav overlay (z-index 100) and the age-gate (1000), so both
   automatically cover/hide it when open — no extra JS needed for that. */
.scroll-top-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #FFFFFF;
  box-shadow: 0 6px 20px rgba(77,57,53,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.scroll-top-btn.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top-btn:hover { background: var(--cream); box-shadow: 0 10px 26px rgba(77,57,53,0.24); transform: translateY(-2px); }
.scroll-top-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
  .scroll-top-btn { width: 44px; height: 44px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

@keyframes csw-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-target { opacity: 1 !important; transform: none !important; }
  .page-hero .inner, .photo-tile img, .btn-primary, .btn-outline, .banner-cta .btn-white,
  .info-card, .card-review, .hero-slide, .scroll-top-btn,
  .wpforms-container button.wpforms-submit, .wpforms-container .wpforms-submit {
    animation: none !important; transition: none !important; transform: none !important;
  }
  /* Keep the off-canvas transform (open/closed state) but drop the slide animation itself */
  .mobile-nav-overlay, .mobile-nav-links a { transition: none !important; }
  .footer-col-body, .footer-col-chevron { transition: none !important; }
  .age-gate-card { animation: none !important; }
}