/* Site-wide nav chrome — topbar, locale chip, hamburger, sidemenu drawer.
   Extracted from /assets/home/home.css so every page that includes
   partials/nav.njk gets the same look without depending on the homepage
   stylesheet. The homepage's home.css still loads on top for its
   video-pillar specific styles. */

/* Discount banner from partials/nav.njk. Hidden by default; klikkie.js
   reveals it (display:flex) when a coupon is detected. Sticky-positioned
   right below the topbar (top:var(--top-h)) so it pins to viewport on
   scroll alongside the topbar but still reserves its row in normal flow
   when at rest — content reflows naturally when the banner toggles on/off.
   The homepage overrides back to position:fixed in home.css because its
   full-viewport scroller needs both rows as overlays. */
.discountbanner {
  position:sticky; top:var(--top-h, 96px);
  /* Same flex-body escape hatch as .topbar — don't let webflow's
     `body.home { align-items:center }` collapse the banner row. */
  align-self:stretch;
  width:100%; max-width:100%;
  z-index:1000;
  display:none;
  align-items:center; justify-content:center;
  background:#fcf4ed;
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:8px 48px 8px 16px;
  font-family:'Lato', sans-serif;
  font-size:13px; font-weight:700; color:var(--ink, #1a1a1a);
  text-align:center;
}
.discountbanner .text-block-111 { margin:0; }
.discountbanner-close {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  appearance:none; border:0; background:transparent;
  font-size:20px; line-height:1; cursor:pointer;
  color:var(--ink, #1a1a1a); opacity:.55;
  padding:4px 8px;
}
.discountbanner-close:hover { opacity:1; }
@media (max-width: 760px) {
  .discountbanner { font-size:12px; padding:6px 36px 6px 16px; }
}

/* ─── fonts (klikkie self-hosted Lato) ───────────────────────────── */
@font-face { font-family:'Lato'; font-style:normal; font-weight:300; font-display:swap;
  src:url('/assets/fonts/lato/lato-300.woff2') format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/lato/lato-400.woff2') format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/lato/lato-700.woff2') format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap;
  src:url('/assets/fonts/lato/lato-900.woff2') format('woff2'); }

/* ─── tokens (edit these to retune the whole mockup) ─────────────── */
:root {
  --ink:          #1a1a1a;
  --ink-soft:     #555;
  --teal:         #18b2bb;   /* klikkie accent */
  --nav-h:        72px;
  --top-h:        96px;      /* white banner — fits the 80px logo with 8px padding */
  --label-pad:    44px;
  --side-w:       min(420px, 86vw);
  --ease:         cubic-bezier(.2,.7,.2,1);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:'Lato', sans-serif;
  font-weight:400;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* ─── top bar (white banner on desktop, transparent on mobile) ───── */
/* Topbar layout — sticky-positioned so it pins to the top on scroll
   but still reserves its row in normal flow. That means page content
   (and the discount banner row below) starts BELOW the topbar without
   any padding-top compensation math. The homepage overrides this back
   to position:fixed in home.css (its scroller needs full viewport).
   !important is pinned because non-home pages still load Webflow's
   legacy stylesheet which would otherwise drift the geometry. */
.topbar {
  position:sticky !important; top:0 !important;
  /* Several Webflow body classes (.home, .softbody, .body-7 …) flag the
     body as `display:flex; align-items:center`, which collapses sticky
     children to content width. align-self:stretch + width:100% defeat
     that and keep the topbar spanning the viewport. */
  align-self:stretch !important;
  width:100% !important; max-width:100% !important;
  height:var(--top-h) !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  padding:0 32px !important; z-index:1001;        /* above Webflow's .background-video (z:900)
                                                     and .floatingbutton (z:999) so the nav
                                                     never gets covered by page chrome */
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.06);
  font-family:'Lato', sans-serif !important;
  box-sizing:border-box !important;
}
.topbar *, .topbar *::before, .topbar *::after { box-sizing:border-box; }

/* logo + primary nav share the left half of the banner */
.topbar__left { display:flex !important; align-items:center !important; gap:36px !important; }

/* horizontal nav inside the banner (desktop only) */
.topbar-nav, .topbar-right {
  display:flex !important; align-items:center !important; gap:28px !important;
  font-family:'Lato', sans-serif !important;
}
.topbar-nav a, .topbar-right a {
  font-size:12px !important; letter-spacing:.18em !important; text-transform:uppercase !important;
  font-weight:700 !important;
  color:var(--ink) !important; text-decoration:none !important;
  opacity:.85; transition:opacity .25s var(--ease);
  white-space:nowrap;
}
.topbar-nav a:hover, .topbar-right a:hover { opacity:1; }
/* ─── selectgift funnel hero: make banner image full-width ───────
   The /selectgift-travel and /selectgift-pet pages render an inline
   <img class="image-158"> (or .image-159) inside .summary.short. Webflow
   defaults to intrinsic size + align-items:center → tiny hero. Push it
   to full-bleed at the top of the .blockcontainer.cleantop. */
.is-gift-select .blockcontainer.cleantop > .image-158,
.is-gift-select .blockcontainer.cleantop > .image-159,
.is-gift-select .summary.short > .image-158,
.is-gift-select .summary.short > .image-159 {
  width:100% !important; max-width:100% !important;
  height:auto !important;
  object-fit:cover; display:block !important;
  margin:0 0 24px !important;
}
/* Pad the top of the .blockcontainer so it doesn't kiss the sticky topbar. */
.is-gift-select .blockcontainer.cleantop { padding-top:24px !important; }

/* ─── gift-select funnel pages: hide the payment+copyright bar ──
   /selectgift, /selectgift-travel, /selectgift-pet are early-funnel
   pages where the user hasn't picked a product yet — payment icons
   are visual noise there. Footer grid (links + contact) stays. */
.is-gift-select .mockup-footer .footer { display:none !important; }

/* /getapp + funnel-style pages: Webflow ships `.funnelcontainer.start {
   margin-top: 167px }` as clearance for the OLD fixed nav. With the
   sticky topbar in flow that becomes 167px of empty space below the
   topbar — trim to a small chin. */
.funnelcontainer.start { margin-top:24px !important; }

/* ─── neutralise Webflow's old fixed-topbar clearance rules ──────
   Several Webflow CSS rules ship a `margin-top: 100-120px` or
   `padding-top: 100px` to leave room for the old position:fixed
   navbar. With our topbar now position:sticky (in normal flow),
   that clearance becomes double-padding — first the topbar's 96px
   row, then 100-120px of dead space before content. Zero it out
   sitewide so content starts directly below the topbar (with each
   element's own breathing room only). 24px replacement keeps a
   subtle chin so headings don't hug the bar. */
.headersection { padding-top:24px !important; }
.crumblepath.category.pathnone { margin-top:0 !important; }
.categorywrapper.frame { margin-top:0 !important; }
.section.light-blue.nopadding.new { margin-top:0 !important; }
.vacancypage { margin-top:0 !important; }
.section-12.nav-offset { padding-top:24px !important; }
.heading-74 { padding-top:24px !important; }

/* ─── account dropdown (desktop chip → panel with 5 shortcuts) ──
   Pattern mirrors .locale-pick. Trigger sits in .topbar-right where
   the old Account link used to live. */
.topbar-right .account-pick { position:relative; }
.account-pick__btn {
  appearance:none !important; border:0 !important; background:transparent !important; cursor:pointer;
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  padding:6px 4px !important;
  font-family:'Lato', sans-serif !important;
  font-size:12px !important; letter-spacing:.18em !important; text-transform:uppercase !important; font-weight:700 !important;
  color:var(--ink) !important;
}
.account-pick__btn:hover { opacity:.7; }
.account-pick__btn svg:first-child { opacity:.85; }
.account-pick__caret { opacity:.55; margin-left:2px; }
.account-pick__panel {
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:220px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  box-shadow:0 12px 32px -6px rgba(0,0,0,.16);
  padding:8px 0;
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  z-index:1020;
}
.account-pick__panel.is-open { opacity:1; pointer-events:auto; transform:translateY(0); }
.account-pick__panel a {
  /* Match the COMPUTED .locale-pick__lang a rhythm. The lang rule
     declares 13px/400/ink-soft but Webflow's anchor rules + topbar
     overrides resolve to 12px/700/.18em/ink. Mirror that so both
     pickers visually read as the same submenu component. */
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:9px 18px !important;
  font-family:'Lato', sans-serif !important;
  font-size:12px !important; font-weight:700 !important;
  letter-spacing:.18em !important; text-transform:uppercase !important;
  color:var(--ink) !important; text-decoration:none !important;
  transition:background .2s, color .2s;
  border:0 !important;
}
/* Section subheader inside the account dropdown (Design / Account).
   Same style the .locale-pick__label uses on the lang/country picker
   so the two panels feel like one component family. */
.account-pick__section {
  font-family:'Lato', sans-serif;
  font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink);
  padding:12px 18px 6px;
}
.account-pick__section + a { padding-top:6px !important; }
/* Subtle divider above the second section so DESIGN ⇆ ACCOUNT read as
   distinct groups, matching the locale picker's section divider. */
.account-pick__section ~ .account-pick__section {
  border-top:1px solid rgba(0,0,0,.06);
  margin-top:6px;
  padding-top:14px;
}
.account-pick__panel a:hover { background:rgba(0,0,0,.04); color:var(--ink) !important; }
.account-pick__panel a svg {
  width:18px; height:18px; flex:0 0 18px;
  color:var(--ink); opacity:.7;
}

/* ─── sidemenu account picker (mobile drawer) ────────────────────
   Mirrors the language/country pickers: click the bottom Account
   button opens a floating panel ABOVE it (the trigger sits near the
   bottom of the drawer), not an inline accordion. */
.sidemenu__account-wrap { width:100%; position:relative; }
.sidemenu__account-caret {
  margin-left:auto; opacity:.55;
  transition:transform .2s var(--ease);
}
#sidemenu-account[aria-expanded="true"] .sidemenu__account-caret { transform:rotate(180deg); }
.sidemenu__account-menu {
  position:absolute;
  left:12px; right:12px;
  bottom:calc(100% + 6px);
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:8px;
  box-shadow:0 12px 32px -6px rgba(0,0,0,.16);
  padding:6px 0;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transform:translateY(4px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  z-index:1010;
}
.sidemenu__account-menu.is-open { opacity:1; pointer-events:auto; transform:translateY(0); }
.sidemenu__account-menu a {
  /* Match the COMPUTED .sidemenu__lang-menu a rhythm — Webflow forces
     bold on anchors inside the drawer, so even though the lang rule
     declares weight 400 the actual rendered weight is 700. Mirror that
     so the two pickers feel like one component family. */
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:10px 12px !important;
  font-family:'Lato', sans-serif !important;
  font-size:12px !important; font-weight:700 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:var(--ink-soft) !important; text-decoration:none !important;
}
/* Section subheader inside the mobile account submenu. */
.sidemenu__account-section {
  font-family:'Lato', sans-serif;
  font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
  padding:10px 18px 4px;
  opacity:.65;
}
.sidemenu__account-section + a { padding-top:6px !important; }
.sidemenu__account-menu a:hover { background:rgba(0,0,0,.04); }
.sidemenu__account-menu a svg {
  width:18px; height:18px; flex:0 0 18px; opacity:.7;
}

/* ─── shared FAQ accordion ───────────────────────────────────────
   Same look as the PDP FAQ (head-styles-photobooks.njk). Pulled out
   so funnel pages (selectgift-travel, gift card flows) can reuse it
   without inheriting the body.photobooks-page scope. */
.faq-section { padding:48px 16px; max-width:800px; margin:0 auto; }
.faq-section h2 { font-size:24px; font-weight:400; text-align:center; margin:0 0 32px; font-family:'Lato',sans-serif; }
.faq-section .accordion { border-top:1px solid #e8ddd4; }
.faq-section .accordion-item { border-bottom:1px solid #e8ddd4; }
.faq-section .accordion-header {
  display:flex; justify-content:space-between; align-items:center;
  width:100%; padding:16px 0; cursor:pointer;
  font-family:'Lato',sans-serif;
  font-weight:700; font-size:15px; line-height:1.4;
  text-align:left;
  background:none; background-color:transparent; border:none;
  color:inherit;
  text-transform:none; letter-spacing:normal;
}
.faq-section .accordion-header::after { content:'+'; font-size:20px; color:#999; margin-left:12px; }
.faq-section .accordion-item.open .accordion-header::after { content:'−'; }
.faq-section .accordion-body { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-section .accordion-item.open .accordion-body { max-height:1200px; }
.faq-section .accordion-body p {
  padding:0 0 16px; margin:0;
  font-size:14px; color:#666; line-height:1.6;
}

/* external-link nav item (klikkie agent → books.klikkie.com) */
.topbar-nav__external,
.sidemenu__list-external {
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
}
.topbar-nav__external svg { opacity:.65; }
.sidemenu__list-external svg { opacity:.55; margin-top:1px; }
.topbar-right a.is-profile { color:#000 !important; opacity:1; }

/* locale chip — single trigger that opens a panel with both pickers.
   The chip shows: country flag + active language code. Language and
   country are independent inside the panel. */
.topbar-right .locale-pick { position:relative; }
.locale-pick__btn {
  appearance:none !important; border:1px solid rgba(0,0,0,.1) !important; background:#fff !important; cursor:pointer;
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  font-family:'Lato', sans-serif !important;
  font-size:12px !important; letter-spacing:.18em !important; text-transform:uppercase !important; font-weight:700 !important;
  color:var(--ink) !important;
  padding:6px 10px 6px 8px !important; border-radius:999px !important;
  box-shadow:none !important;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.locale-pick__btn:hover { border-color:rgba(0,0,0,.25); background:#fafafa; }
.locale-pick__flag { font-size:16px; line-height:1; }
.locale-pick__caret { opacity:.55; }

/* the panel — wider than a single dropdown since it hosts two pickers */
.locale-pick__panel {
  position:absolute; top:calc(100% + 10px); right:0;
  width:320px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  box-shadow:0 12px 32px -6px rgba(0,0,0,.16);
  padding:14px 0;
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  z-index:1020;
}
.locale-pick__panel.is-open { opacity:1; pointer-events:auto; transform:translateY(0); }

.locale-pick__section { padding:6px 0; }
.locale-pick__section + .locale-pick__section { border-top:1px solid rgba(0,0,0,.06); margin-top:6px; padding-top:12px; }
.locale-pick__label {
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--ink);
  padding:0 18px 8px;
}
/* Hide an empty "Suggested" subgroup (the JS leaves the suggested slot
   empty if the browser hints a language we don't ship). The label would
   otherwise float in space. */
.locale-pick__subgroup[data-slot="lang-suggested-group"]:has(.locale-pick__suggested:empty),
.locale-pick__subgroup[data-slot="lang-suggested-group"]:has(.sidemenu__lang-suggested:empty) {
  display:none;
}
.locale-pick__subgroup + .locale-pick__subgroup { margin-top:8px; }
.locale-pick__sublabel {
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--ink-soft);
  padding:4px 18px;
  opacity:.75;
}

.locale-pick__lang, .locale-pick__country { display:flex; flex-direction:column; }
.locale-pick__country { max-height:280px; overflow-y:auto; }
.locale-pick__lang a, .locale-pick__country a {
  display:flex; align-items:center; gap:10px;
  padding:9px 18px;
  font-size:13px; font-weight:400;
  color:var(--ink-soft); text-decoration:none;
  transition:background .2s, color .2s;
}
.locale-pick__lang a:hover, .locale-pick__country a:hover {
  background:rgba(0,0,0,.04); color:var(--ink);
}
.locale-pick__lang a[hidden], .locale-pick__country a[hidden] { display:none; }
/* Tint the currently-active language and country wherever they
   appear. For language: in the Suggested row when it's a browser-
   detected lang, or in "Other languages" if not. For country: at
   the top of the unified list (JS moves the .is-current row to the
   top of the list). */
.locale-pick__lang a.is-current,
.sidemenu__lang-menu a.is-current,
[data-slot="lang-suggested"] a.is-current,
.locale-pick__country a.is-current,
.sidemenu__country-list a.is-current {
  background:rgba(24,178,187,.08);
  color:var(--ink);
  font-weight:700;
}

.locale-pick__search,
.sidemenu__country-search {
  appearance:none; outline:none;
  margin:0 14px 8px; padding:8px 12px;
  width:calc(100% - 28px);
  font-family:'Lato', sans-serif; font-size:13px; color:var(--ink);
  background:#f5f5f5; border:1px solid transparent; border-radius:6px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.locale-pick__search:focus,
.sidemenu__country-search:focus { background:#fff; border-color:rgba(0,0,0,.2); }

/* "Suggested" (language we recognised) and "Selected" (active country)
   rows pinned at the top of each picker section. Only the "Selected"
   country row gets the teal tint — it's the actual current state. The
   Suggested language row is a hint, not a state, so it stays neutral. */
.locale-pick__suggested,
.sidemenu__lang-suggested,
.sidemenu__country-selected {
  margin:0 8px 8px;
  border-radius:6px;
  overflow:hidden;
}
/* Tint only the actively-selected country row. */
.locale-pick__suggested[data-slot="country-selected"],
.sidemenu__country-selected {
  background:rgba(24,178,187,.08);   /* var(--teal) at 8% */
}
.locale-pick__suggested:empty,
.sidemenu__lang-suggested:empty,
.sidemenu__country-selected:empty { display:none; }
.locale-pick__suggested a,
.sidemenu__lang-suggested a,
.sidemenu__country-selected a {
  display:flex !important; align-items:center; gap:10px;
  padding:10px 12px !important;
  font-weight:700 !important;
  color:var(--ink) !important; text-decoration:none !important;
}
.locale-pick__suggested .pick-badge,
.sidemenu__lang-suggested .pick-badge,
.sidemenu__country-selected .pick-badge {
  margin-left:auto;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--teal); opacity:.9;
}

.pick-flag { font-size:16px; line-height:1; flex-shrink:0; }

/* preserve brand lowercase "klikkie" inside uppercase nav labels */
.lc { text-transform:lowercase !important; }


/* Hamburger button — icon only by default. The white topbar provides
   enough chrome contrast on its own; no pill background needed at
   this size. The homepage adds a glass treatment on transparent
   mobile topbar via home.css. */
.hamburger {
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:8px;
  /* !important to defeat Webflow's button/anchor display rules on
     non-home pages — without it the hamburger leaked through next to
     the desktop nav above 1180px. */
  display:none !important; align-items:center; justify-content:center;
  color:var(--ink);
  transition:opacity .2s var(--ease), transform .15s var(--ease);
}
.hamburger:hover { opacity:.7; }
.hamburger:active { transform:translateY(1px); }
.hamburger__bars {
  display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center;
  width:22px; height:14px; gap:5px;
}
.hamburger__bars span {
  display:block; width:20px; height:1.5px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s var(--ease), width .35s var(--ease);
}
.hamburger__bars span:nth-child(2) { width:16px; }
.hamburger:hover .hamburger__bars span:nth-child(2) { width:20px; }
.hamburger.is-open .hamburger__bars span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); width:20px; }
.hamburger.is-open .hamburger__bars span:nth-child(2) { opacity:0; }
.hamburger.is-open .hamburger__bars span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); width:20px; }

/* Self-contained SVG logo (black circle + white wordmark in one file) */
.brand { display:inline-flex !important; align-items:center !important; text-decoration:none !important; padding:0 !important; margin:0 !important; }
.brand img { width:80px !important; height:80px !important; display:block !important; max-width:none !important; }
/* On phones the logo shrinks so the topbar doesn't crowd content. */
@media (max-width: 760px) {
  .brand img { width:60px !important; height:60px !important; }
}


/* ─── side menu (slide-out drawer from the left) ─────────────────── */
.sidemenu-backdrop {
  /* z-index above the topbar (1001) and the .discountbanner (1000)
     so the drawer's dim+drawer stack covers the whole viewport when
     the menu is open — no nav row or coupon strip bleeds through. */
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.42);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.sidemenu-backdrop.is-open { opacity:1; pointer-events:auto; }

.sidemenu {
  /* Always anchored to the right edge — the hamburger sits in the
     top-right of the topbar, so the drawer sliding out from the same
     side reads as direct cause-and-effect. Hidden by translating
     OFF the right of the viewport (positive 100%). */
  position:fixed; top:0; bottom:0; right:0; left:auto; z-index:2001;
  width:var(--side-w); max-width:100vw;
  background:#fff;
  transform:translateX(100%);
  transition:transform .5s var(--ease);
  display:flex; flex-direction:column;
  padding:calc(var(--top-h) + 24px) 0 0;   /* leaves room for the floating topbar controls */
  box-shadow:0 0 40px rgba(0,0,0,.08);
}
.sidemenu.is-open { transform:translateX(0); }

/* The hamburger's job is "open the drawer". Once the drawer is open
   the close × inside the drawer is the only control users need —
   hide the hamburger to avoid showing two X-like buttons next to each
   other (visible on the homepage, where the topbar is position:fixed
   and the hamburger morphs to X behind the drawer's own ×). */
.hamburger.is-open { display:none !important; }

/* Close × inside the drawer — always visible regardless of page chrome.
   Sits at the top right of the drawer where users expect it. */
.sidemenu__close {
  appearance:none; border:0; background:transparent; cursor:pointer;
  position:absolute; top:18px; right:18px;
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink);
  border-radius:999px;
  transition:background .2s var(--ease);
}
.sidemenu__close:hover { background:rgba(0,0,0,.05); }
.sidemenu__close svg { display:block; }

.sidemenu__list {
  list-style:none; margin:0; padding:0 0 18px;
  display:flex; flex-direction:column; flex:1;   /* fills the menu so we can pin profile to the bottom */
  overflow-y:auto;
}
.sidemenu__list a {
  display:block; padding:18px 32px;
  font-size:22px !important; font-weight:300; letter-spacing:-.005em;
  color:var(--ink) !important; text-decoration:none !important; text-transform:none !important;
  transition:padding-left .25s var(--ease), color .25s var(--ease);
  position:relative;
}
.sidemenu__list a:hover {
  padding-left:40px; color:#000;
}
.sidemenu__list a:hover:before {
  opacity:1; transform:translateY(-50%) translateX(0);
}
.sidemenu__list a:before {
  content:"→"; position:absolute; left:20px; top:50%;
  transform:translateY(-50%) translateX(-8px);
  opacity:0; transition:transform .25s var(--ease), opacity .25s var(--ease);
  color:var(--teal); font-size:14px;
}
.sidemenu__list li + li a { border-top:1px solid rgba(0,0,0,.04); }

/* Two separate boxes side-by-side — account + language */
.sidemenu__top {
  display:flex; flex-direction:column;
  gap:10px;
  margin:0 18px 18px;
}
.sidemenu__top-btn--full { width:100%; }
/* the two small chips below Account share a row */
.sidemenu__chip-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px;
}
.sidemenu__lang-wrap, .sidemenu__country-wrap { position:relative; }

/* push the bottom box to the bottom of the drawer */
.sidemenu__top--bottom {
  margin-top:auto;
  margin-bottom:24px;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,.06);
}
/* both dropdowns open UPWARD (their triggers are at the bottom of the drawer) */
.sidemenu__top--bottom .sidemenu__lang-menu,
.sidemenu__top--bottom .sidemenu__country-menu {
  top:auto; bottom:calc(100% + 6px); right:0;
  transform:translateY(4px);
}
.sidemenu__top--bottom .sidemenu__lang-menu.is-open,
.sidemenu__top--bottom .sidemenu__country-menu.is-open { transform:translateY(0); }
.sidemenu__top-btn {
  display:flex !important; align-items:center; justify-content:center; gap:8px;
  padding:16px 12px !important;
  background:#f3f3f3;
  border:1px solid rgba(0,0,0,.06);
  font-size:12px !important; font-weight:700 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:var(--ink) !important; text-decoration:none !important;
  transition:background .2s ease, border-color .2s ease;
}
.sidemenu__top-btn:hover { background:#ebebeb; }
.sidemenu__top > a.sidemenu__top-btn { border:none !important; }   /* Account: no outline */
.sidemenu__top-btn svg { flex-shrink:0; }
.sidemenu__top-btn:before { content:none !important; }   /* kill the inherited arrow */
button.sidemenu__top-btn { appearance:none; border:0; cursor:pointer; width:100%; }

/* mobile language + country dropdowns — open below the button by default */
.sidemenu__lang-menu { min-width:180px; }
.sidemenu__country-menu { min-width:240px; max-height:50vh; overflow-y:auto; }
.sidemenu__lang-menu, .sidemenu__country-menu {
  position:absolute; top:calc(100% + 6px); right:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:6px;
  box-shadow:0 8px 24px -4px rgba(0,0,0,.15);
  padding:6px 0;
  opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  z-index:1010;
}
.sidemenu__lang-menu.is-open,
.sidemenu__country-menu.is-open { opacity:1; pointer-events:auto; transform:translateY(0); }
.sidemenu__lang-menu a,
.sidemenu__country-menu a {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:400;
  color:var(--ink-soft); text-decoration:none;
  transition:background .2s, color .2s;
}
.sidemenu__lang-menu a[hidden],
.sidemenu__country-menu a[hidden] { display:none; }
.sidemenu__lang-menu a:before,
.sidemenu__country-menu a:before { content:none !important; }
.sidemenu__lang-menu a:hover,
.sidemenu__country-menu a:hover { background:rgba(0,0,0,.04); color:var(--ink) !important; }
.sidemenu__lang-menu a.is-current,
.sidemenu__country-menu a.is-current { color:var(--ink) !important; font-weight:700 !important; }

.sidemenu__foot {
  margin-top:auto; padding:24px 32px;
  border-top:1px solid rgba(0,0,0,.06);
  display:flex; gap:18px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
}
.sidemenu__foot a { color:var(--ink-soft) !important; text-decoration:none !important; }
.sidemenu__foot a:hover { color:var(--ink) !important; }

/* ─── nav-collapse breakpoint ────────────────────────────────────
   5 nav items + locale chip + Account need roughly 1080px to fit
   without "Monthly Prints" cropping (logo 80 + gap 36 + 5 items × ~120
   + locale ~80 + Account ~80 + 64 padding ≈ 1040). Collapse to the
   hamburger at <=1180px to leave breathing room. Below 760px the real
   phone tweaks (font sizes, video tile cropping, etc.) kick in. */
@media (max-width: 1180px) {
  .topbar-nav, .topbar-right { display:none !important; }
  .hamburger { display:inline-flex !important; }
  /* sidemenu base rule already anchors right with translateX(100%) — open state inherits transform:translateX(0) from the base too */
}


/* ─── Site-wide mockup-style footer (formerly homepage-only) ─────────
   Moved here from home.css so partials/footer.njk can render the
   "Assouline-style" footer on every page, not just /. The
   .mockup-footer__intro SEO paragraph stays in home.css since it's
   homepage-specific. */

.mockup-footer { scroll-snap-align:start; }

.mockup-footer { background:#fff; padding-bottom:0; margin-top:80px; }

.mockup-footer__intro {
  max-width:720px;
  margin:0 auto;
  /* Top padding clears the fixed topbar height (var(--top-h)) plus
     visual breathing room so the first line isn't behind the chrome. */
  padding:calc(var(--top-h) + 32px) 24px 8px;
  text-align:center;
}

.mockup-footer__intro p {
  margin:0;
  font-size:14px; line-height:1.7;
  color:var(--ink-soft);
}

@media (max-width: 760px) {
  .mockup-footer__intro { padding:calc(var(--top-h) + 16px) 20px 4px; }
  .mockup-footer__intro p { font-size:13px; line-height:1.65; }
}

.mockup-footer .section {
  height:auto; min-height:0; scroll-snap-align:none; display:block;
  padding:72px 48px 24px;
  background:#fff !important;
  /* No border-top — the SEO paragraph above already provides the
     visual transition from the video pillars into the footer. */
  border-top:0 !important;
}

.mockup-footer .section.no-bottom-padding.softcolor { border-top:0 !important; }

.mockup-footer .footer .section {
  background:#fff !important;
  padding:24px 48px 32px;
  border-top:1px solid rgba(0,0,0,.06);
}

/* When a sticky bottom CTA bar is on the page (.sticky-cta from
   head-styles.njk: position:fixed; bottom:0; ~84px tall), it covers
   the footer's payment + copyright strip. Pad the footer down so
   the user can scroll past the sticky CTA and still see the bar. */
body:has(.sticky-cta) .mockup-footer {
  padding-bottom:92px;
}
@media (max-width: 760px) {
  body:has(.sticky-cta) .mockup-footer { padding-bottom:80px; }
}

.mockup-footer .full-container {
  display:block !important;   /* override Webflow's .full-container { display:flex }

which would shrink .footer-grid to content-width */
  max-width:1280px !important; margin:0 auto !important; padding:0 !important;
}
/* On medium+ widths give the grid an explicit 5-col layout. Webflow's
   .w-layout-grid CSS provides this in the original site, but the rule
   only matches when its full inheritance chain is intact — easier to
   just spell it out here. */
.mockup-footer .footer-grid {
  display:grid !important;
  grid-template-columns:repeat(5, 1fr);
  gap:32px 24px;
  padding:48px 32px;
}

.mockup-footer .footer-card,
.mockup-footer .footer-card * { text-align:left !important; }

.mockup-footer .footer-card { display:flex !important; flex-direction:column; align-items:flex-start; gap:8px; }

.mockup-footer .footer-header,
.mockup-footer .footer-header-2 {
  font-size:14px !important; font-weight:700 !important;
  letter-spacing:.2em !important; text-transform:uppercase !important;
  color:var(--ink) !important;
  border:none !important; padding:0 !important; margin:0 0 16px !important;
  text-decoration:none !important;
}

.mockup-footer .footer-link {
  display:block !important;
  font-size:13px !important; font-weight:400 !important; line-height:1.8 !important;
  color:var(--ink-soft) !important; text-decoration:none !important;
  /* Webflow ships `.footer-link { border-bottom: 1px solid transparent }`
     paired with `.footer-link:hover { border-bottom-color:#595959 }` —
     which reads as an underline on hover. Bold colour shift is enough,
     drop the line. */
  border:0 !important;
  padding:0 !important; margin:0 !important;
  transition:color .2s ease;
}

.mockup-footer .footer-link:hover {
  color:var(--ink) !important;
  border-bottom-color:transparent !important;
  text-decoration:none !important;
}

.mockup-footer .container-8 { display:flex !important; flex-direction:column !important; gap:12px !important; padding:0 !important; }

.mockup-footer .link-block-9 .footer-link.with-logo-items { display:none !important; }

.mockup-footer .link-block-9 { text-decoration:none !important; }

.mockup-footer .link-block-9 img { display:none !important; }

.social-badge {
  width:34px; height:34px;
  background:#000; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:#fff;
}

.social-badge svg { width:16px; height:16px; display:block; }

.link-block-9.tiktok .social-badge svg { transform:translateY(1px); }
/* Webflow ships `.link-block-9.tiktok { margin-top:-9px }` which shifts
   the TikTok button 9px above its siblings. Zero it out so all four
   social icons share the same baseline. */
.mockup-footer .link-block-9.tiktok { margin-top:0 !important; }

/* Bottom bar — payments LEFT, copyright RIGHT, one row on every viewport.
   The markup nests payments inside .footer-bar__row but renders .footertext
   as a SIBLING of that row inside .footer-bar — so .footer-bar itself is
   the flex container that lays them side-by-side. Same pattern is used on
   mobile (below) with smaller fonts. */
/* Bottom bar: payment icons LEFT (flush with the topbar brand's left
   edge — both use 32px from page edge so the page has a single visual
   left baseline), copyright RIGHT (flush with the right edge). Defeat
   Webflow's wrapping .section padding so the bar spans the viewport. */
.mockup-footer .footer .section.clean.div-block-220 {
  padding-left:0 !important; padding-right:0 !important;
}
.mockup-footer .footer-bar {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
  flex-wrap:wrap !important;
  max-width:none !important; margin:0 !important;
  padding:0 32px !important;   /* matches .topbar padding so payment icons line up with the klikkie brand */
}
.mockup-footer .footer-bar__row {
  display:flex !important; align-items:center !important;
  justify-content:flex-start !important;
  flex:0 1 auto !important;
  gap:24px !important;
  padding:0 !important;
  margin-right:auto !important;   /* pin to the left edge of footer-bar */
}

.mockup-footer .paymentmethods {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;   /* defeat Webflow's justify-content:center */
  gap:10px !important;
  padding:0 !important;
}

.mockup-footer .footertext {
  font-size:12px; color:var(--ink-soft) !important; letter-spacing:.04em;
  text-align:right !important; margin:0 !important;
  flex:0 0 auto; width:auto !important;
}

.mockup-footer .languagedrop { display:none !important; }

/* .back-to-top removed (Jeff feedback) */

@media (max-width: 1100px) and (min-width: 761px) {
  .mockup-footer .footer-grid {
    grid-template-columns:repeat(2, 1fr) !important;
    gap:32px 24px !important;
    padding:32px 24px !important;
  }
}

@media (max-width: 760px) {
  .mockup-footer .full-container { max-width:100% !important; }
  .mockup-footer .footer-grid {
    display:block !important;     /* override webflow's .w-layout-grid */
    grid-template-columns:none !important;
    gap:0 !important;
    padding:0 !important;
    /* No border-top — the SEO paragraph above shouldn't be visually
       underlined by a divider. */
  }
  .mockup-footer .footer-card,
  .mockup-footer .footer-card * { text-align:left !important; }
  /* Higher specificity (.w-layout-grid.footer-grid) needed to beat
     Webflow's "width:calc(50% - 8px) !important" rule. */
  .mockup-footer .w-layout-grid.footer-grid .footer-card,
  .mockup-footer .footer-card {
    display:block !important; padding:0 !important;
    width:100% !important; max-width:100% !important; min-width:0 !important;
    flex:initial !important;          /* drop webflow's flex:0 0 calc(50%-8px) */
    min-height:0 !important;          /* override webflow's 250px floor */
    border-bottom:1px solid rgba(0,0,0,.08);
    align-self:stretch !important;
  }
  /* header is the accordion toggle. Flexbox so the label stays
     vertically centred with the chevron even when it wraps to two
     lines (e.g. "About us" on a narrow card).
     Selector is .mockup-footer .w-layout-grid.footer-grid .footer-card …
     to outscore head-styles.njk's sitewide rule that forces
     padding-top:0 / margin-top:0 on .footer-header at ≤991px. */
  .mockup-footer .w-layout-grid.footer-grid .footer-card .footer-header,
  .mockup-footer .w-layout-grid.footer-grid .footer-card .footer-header-2,
  .mockup-footer .footer-header,
  .mockup-footer .footer-header-2 {
    display:flex !important; align-items:center; justify-content:space-between;
    gap:12px;
    cursor:pointer; user-select:none;
    font-size:12px !important; font-weight:700 !important;
    text-transform:uppercase !important; letter-spacing:.18em !important;
    color:var(--ink) !important;
    border:none !important;
    padding:20px 24px !important;
    margin:0 !important;
  }
  .mockup-footer .footer-header::after,
  .mockup-footer .footer-header-2::after {
    content:""; flex-shrink:0;
    width:8px; height:8px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translate(-2px, -2px);
    transition:transform .3s var(--ease);
  }
  .mockup-footer .footer-card.is-expanded .footer-header::after,
  .mockup-footer .footer-card.is-expanded .footer-header-2::after {
    transform:rotate(-135deg) translate(-2px, -2px);
  }
  /* the collapsible body */
  .mockup-footer .footer-card__body {
    max-height:0; overflow:hidden;
    transition:max-height .35s var(--ease);
  }
  .mockup-footer .footer-card.is-expanded .footer-card__body { max-height:600px; }
  .mockup-footer .footer-card__body > * {
    display:block !important;
    padding:6px 24px !important;
    font-size:13px !important;
    line-height:1.6 !important;
    color:var(--ink-soft) !important;
    text-decoration:none !important;
  }
  .mockup-footer .footer-card__body > *:first-child { padding-top:0 !important; }
  .mockup-footer .footer-card__body > *:last-child { padding-bottom:20px !important; }
  .mockup-footer .footer-card__body .container-8 {
    padding:6px 24px 20px !important;
    display:flex !important; flex-direction:row !important; gap:18px !important;
  }
  .mockup-footer .footer-card__body .link-block-9 {
    display:inline-flex !important; align-items:center;
  }
  .mockup-footer .footer-card__body .with-logo-items { display:none !important; }
  /* (back-to-top rules removed alongside the JS injection — Jeff feedback) */
  /* "Follow us" — not an accordion; always-visible icon row above the bottom bar */
  .mockup-footer .footer-card:last-of-type { border-bottom:none !important; }
  .mockup-footer .footer-card:last-of-type .footer-header-2,
  .mockup-footer .footer-card:last-of-type .footer-header { display:none !important; }
  /* Follow Us body becomes a flex ROW so the social icon strip sits
     LEFT and the .back-to-top button sits RIGHT on the SAME row. */
  .mockup-footer .footer-card:last-of-type .footer-card__body {
    max-height:none !important; overflow:visible !important;
    display:flex !important; flex-direction:row !important;
    align-items:center !important;
    /* Social icons now sit alone — the back-to-top sibling was removed
       per Jeff's feedback — so center them in the row. */
    justify-content:center !important;
    gap:16px !important;
    padding:16px 24px !important;
  }
  /* Stop the generic .footer-card__body > * rule from padding the
     children of this row — the row itself handles padding now. */
  .mockup-footer .footer-card:last-of-type .footer-card__body > * {
    padding:0 !important; margin:0 !important;
  }
  .mockup-footer .footer-card:last-of-type .container-8 {
    display:flex !important; flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;   /* social icons centered in the row */
    gap:16px !important;
    /* Defeat Webflow's .w-container { margin:0 auto; max-width:940px }
       and any inherited text-indent / list padding that was pushing the
       first social icon ~16px to the right of where I expected it. */
    width:auto !important; max-width:none !important;
    flex:0 1 auto !important;
    margin:0 !important;
    padding:0 !important;
    text-indent:0 !important;
  }
  /* Belt + braces: first social link starts at the container's edge — no
     inherited margin-left from Webflow's .link-block-9 modifiers. */
  .mockup-footer .footer-card:last-of-type .container-8 > .link-block-9:first-child {
    margin-left:0 !important;
  }
  /* Webflow's .w-container ships ::before { content:" "; display:table }
     as a clearfix. In flex layouts that becomes a phantom first item, and
     the parent's `gap:16px` adds a 16px gap BEFORE the real first social
     icon (so it lands at x=40 instead of x=24). Suppressing the pseudo
     puts the social row flush with the payment row above. */
  .mockup-footer .footer-card:last-of-type .container-8::before,
  .mockup-footer .footer-card:last-of-type .container-8::after {
    content:none !important; display:none !important;
  }
  /* mobile: bigger badges (40px), no handle text */
  .mockup-footer .footer-card:last-of-type .link-block-9 {
    display:inline-flex !important; gap:0 !important; padding:0 !important;
  }
  .mockup-footer .footer-card:last-of-type .social-badge {
    width:40px; height:40px;
  }
  .mockup-footer .footer-card:last-of-type .social-badge svg { width:20px; height:20px; }
  .mockup-footer .footer-card:last-of-type .with-logo-items { display:none !important; }
  /* bottom bar on mobile: payments LEFT, copyright RIGHT on one row.
     Note: the markup wraps payments in .footer-bar__row but renders
     .footertext as a SIBLING of that row (inside .footer-bar). To get
     them on one line we make .footer-bar itself the flex container. */
  /* Section padding is asymmetric: 0 horizontally so the payment row
     starts flush with the page edge (matches the accordion items'
     visual left baseline), but 24px horizontal padding on .footer-bar
     so copyright doesn't kiss the right edge either. */
  .mockup-footer .footer .section { padding:16px 0 28px !important; }
  /* Mobile bottom bar: payment icons on top (centered), copyright on
     its own line below (also centered). Stacking column → no left/right
     decision to make on narrow screens. */
  .mockup-footer .footer-bar {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px;
    padding:0 24px !important;
  }
  .mockup-footer .footer-bar__row {
    display:flex !important;
    align-items:center;
    justify-content:center;
    /* Full row width on mobile so .paymentmethods inside can centre
       inside the viewport rather than clinging to its own intrinsic
       width at the left edge. */
    flex:0 0 auto;
    width:100%;
    padding:0 !important;
  }
  .mockup-footer .paymentmethods {
    justify-content:center !important; flex-wrap:wrap; gap:6px !important;
    padding-left:0 !important;
  }
  .mockup-footer .paymentmethods img { width:28px !important; height:auto !important; }
  .mockup-footer .footertext {
    font-size:11px !important;
    text-align:center !important;
    margin:0 !important;
    flex:0 0 auto;
    width:auto !important;
    white-space:nowrap;
  }
}

.mockup-footer .languagedrop { overflow:visible !important; max-width:100% !important; }

.mockup-footer .kk-lang-dropdown {
  display:flex; flex-wrap:wrap; justify-content:flex-end;
  white-space:nowrap;   /* each language stays on one line */
}

.mockup-footer .footer-bar__row { flex-wrap:wrap !important; gap:16px; padding:0 32px; }

@media (max-width: 760px) {
  .mockup-footer .footer-bar__row { justify-content:center; }
  .mockup-footer .kk-lang-dropdown { justify-content:center; }
  .mockup-footer .paymentmethods { justify-content:center; flex-wrap:wrap; }
}

@media (max-width: 760px) {
  /* On the homepage's transparent mobile topbar the hamburger sits
     over the hero video — make it match the .tile__cta glass pill so
     both interactive elements feel like the same design language. */
  /* When the drawer is open the hamburger sits over the white
     sidemenu — drop the glass treatment and switch the bars (now
     the "X") to dark ink so they're visible. */
  /* topbar-nav / topbar-right / hamburger / sidemenu side: handled by
     the 980px breakpoint above. Phone-only visual tweaks stay here. */
  /* compact bottom-nav labels so all 3 fit cleanly */
  /* on phones, hide the right "image-only" tile (it's decorative) */
  /* less empty space below the footer on phones; the SEO paragraph
     above already has its own top padding for the topbar, so the
     section below it only needs a small breathing gap. */
  .mockup-footer { padding-bottom:24px; }
  .mockup-footer .section { padding:8px 0 12px; }
}