/* lagem-web — single stylesheet for the static LA GEM showcase site.
   Brand: white, ink #222, gold #c9b07d; Frank Ruhl Libre headings, Noto Sans body. */

:root {
  --gold: #c9b07d;
  --gold-dark: #ad9159;
  --ink: #222;
  --ink-soft: #5c5c5c;
  --hairline: #e7e2d9;
  --bg: #fff;
  --bg-soft: #faf8f4;
  --footer-bg: #1d1c19;
  --serif: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --sans: 'Noto Sans', system-ui, -apple-system, sans-serif;
  --container: 1200px;
  --header-h: 76px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* respect users who ask the OS to minimise motion: kill smooth scroll and the
   image-zoom / fade transitions used throughout the site */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* long unbreakable strings (e.g. pasted URLs in prose) must not force
     the mobile viewport wider than the screen */
  overflow-wrap: break-word;
  /* short pages (e.g. /kontakt/) must not show the light body background
     below the dark footer — stretch <main> so the footer reaches the
     bottom edge of the viewport */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

main { flex-grow: 1; }
/* skip-link target: focusable but no focus ring on the whole content area,
   and offset so it isn't tucked under the sticky header */
main:focus { outline: none; }
main { scroll-margin-top: calc(var(--header-h) + 16px); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 .6em;
}

a { color: var(--ink); text-decoration: none; }
p a, li a, td a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }
p a:hover, li a:hover, td a:hover { color: var(--gold); }

/* keyboard focus: links lose their underline in the nav/cards, so give every
   focusable element a clearly visible ring (mouse clicks stay unaffected) */
:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
  border-radius: 1px;
}

/* skip link — first tab stop, jumps keyboard/AT users past the mega-menu */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1000;
  background: var(--gold);
  color: #fff;
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: 1px;
  border-radius: 0 0 4px 4px;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 13px 34px;
  border: 1px solid var(--gold);
  color: var(--gold-dark);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background .25s, color .25s;
}
.btn:hover { background: var(--gold); color: #fff; }

.btn-solid { background: var(--gold); color: #fff; }
.btn-solid:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

/* ── header ──────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}

/* desktop: centered logo row, menu centered on its own row below (as on lagem.cz).
   The utility cluster (lang switch + account) floats to the top-right corner of
   the logo row — the "centered wordmark, corner utilities" layout used by Cartier
   et al. */
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  padding-bottom: 4px;
  max-width: 1320px; /* wide enough for the whole menu on one row */
  position: relative;
}

/* utility cluster: lang switch + account icon */
.header-utils {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.header-utils .lang-switch { margin: 0; }
.header-utils .account-link { margin-left: 0; }

@media (min-width: 901px) {
  /* pin to the top-right, vertically centred against the 40px logo row */
  .header-utils {
    position: absolute;
    top: 20px;         /* matches .header-inner padding-top */
    right: 24px;       /* matches .container gutter → aligns with content edge */
    height: 40px;      /* = logo height, so the cluster centres on the wordmark */
  }
  /* over the transparent hero header the cluster must read white */
  body.home .header-utils { color: #fff; }
}

/* homepage: header floats transparent over the full-screen hero (as on lagem.cz) */
body.home .site-header {
  position: absolute;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
}
body.home .nav-toggle span { background: #fff; }

.logo {
  display: inline-block;
  line-height: 0;
}
.logo img {
  display: block;
  width: auto;
  height: 40px;
}

/* desktop nav */
.main-nav > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.main-nav > ul > li { position: relative; }

.main-nav > ul > li > a {
  display: inline-block;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.active > a {
  color: var(--gold-dark);
  border-bottom-color: var(--gold);
}

/* homepage: white menu over the hero image (dropdown panels stay white/ink) */
@media (min-width: 901px) {
  body.home .main-nav > ul > li > a { color: #fff; }
  body.home .main-nav > ul > li > a:hover,
  body.home .main-nav > ul > li.active > a {
    color: var(--gold);
    border-bottom-color: var(--gold);
  }
}

.sub-toggle { display: none; }

@media (min-width: 901px) {
  /* dropdowns open on hover (li:hover, below), on keyboard focus, and — via
     site.js — on a short hover-intent delay so a panel doesn't vanish while
     the cursor travels to it */
  .main-nav li:focus-within > .dropdown,
  .main-nav > ul > li.hover-open > .dropdown { display: flex; gap: 40px; }

  /* multi-column mega panels anchor to the whole nav row instead of their
     item — a 5–6 column panel centered under an off-center item overflows
     the viewport on ≤1366px screens, leaving links unreachable */
  .main-nav > ul { position: relative; }
  .main-nav > ul > li:has(> .dropdown > ul + ul) { position: static; }
  .main-nav > ul > li > .dropdown:has(> ul + ul) {
    left: 0; right: 0;
    transform: none;
    max-width: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 34px 60px;
  }

  /* invisible hover-bridge over the sliver between the nav row and an open
     panel, so the panel doesn't close while the cursor travels down to it */
  .main-nav > ul > li.has-children > .dropdown::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -18px;
    height: 18px;
  }
}

/* dropdown / mega panel */
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
  padding: 26px 34px;
  min-width: 230px;
  z-index: 110;
}
li:hover > .dropdown { display: flex; gap: 40px; }

.dropdown ul { list-style: none; margin: 0; padding: 0; min-width: 170px; }
.dropdown li { margin: 0 0 9px; }
.dropdown a {
  font-size: 12px;
  letter-spacing: 1.4px;
  white-space: nowrap;
}
.dropdown a:hover { color: var(--gold-dark); }
.dropdown .group-title a,
.dropdown a.group-title {
  color: var(--gold-dark);
  border-bottom: 1px solid var(--hairline);
  display: inline-block;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform .25s, opacity .25s;
}

/* ── hero ────────────────────────────────────────────────────────────── */

/* full-screen image, header overlaid, small caps text bottom-center (as on lagem.cz) */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: var(--ink);
  padding: 140px 0 46px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(10, 10, 8, .28), rgba(10, 10, 8, .04) 30%, rgba(10, 10, 8, .08) 60%, rgba(10, 10, 8, .45));
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1560px;
}
.hero h1 {
  /* scales with the viewport so the headline doesn't shrink into the photo on
     1080p / 2K screens (was capped at 26px — far too small on a 2560px hero) */
  font-size: clamp(19px, 1.55vw, 34px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.6;
  max-width: 30em;
  margin: 0 auto 14px;
}
.hero-text {
  font-size: clamp(12.5px, 0.78vw, 17px);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  line-height: 1.9;
  margin: 0;
  max-width: 60ch;        /* keep the all-caps lead a readable measure on 2K */
  margin-inline: auto;
  color: rgba(255, 255, 255, .95);
}

.gold-rule {
  width: 56px;
  height: 2px;
  background: var(--gold);
  border: none;
  margin: 0 auto 26px;
}

/* ── statement band (the original big H1 on its background photo) ────── */

.statement {
  position: relative;
  background: url('/img/site/hp3_h1_background.jpg') center / cover no-repeat;
  text-align: center;
  color: #fff;
  padding: 150px 24px;
}
.statement::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 8, .35);
}
.statement-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}
.statement h2, .statement p {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 36px);
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  color: #fff;
}

/* ── full-bleed homepage panels (original kn_container layout) ───────── */

.hp-panel { display: flex; flex-wrap: wrap; }
.hp-panel:nth-of-type(even) { flex-direction: row-reverse; }

.hp-text {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f3f1;
  padding: 50px;
}
.hp-text-inner { max-width: 640px; }
.hp-text h2 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.4;
  margin: 0 0 14px;
}
.hp-text h2 a { color: var(--ink); }
.hp-text h2 a:hover { color: var(--gold-dark); }
.hp-text p {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .5px;
  margin: 0 0 10px;
}

.hp-img { width: 50%; min-height: 450px; }
.hp-img img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1440px) {
  .hp-text { padding: 100px; }
  .hp-text-inner { max-width: 720px; }
}

/* 1080p / 2K: the panel text was a 14px block stranded in a half-screen of
   whitespace — give it room and size so it reads as a deliberate column */
@media (min-width: 1800px) {
  .hp-text-inner { max-width: 840px; }
  .hp-text h2 { font-size: 19px; }
  .hp-text p { font-size: 16px; line-height: 1.78; }
}

/* ── product grid ────────────────────────────────────────────────────── */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 36px 28px;
}

.product-card .card-img {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  margin-bottom: 14px;
  transition: border-color .3s;
}
.product-card:hover .card-img { border-color: var(--gold); }
.product-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.product-card:hover .card-img img { transform: scale(1.045); }

.product-card .card-name {
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.35;
  display: block;
  margin-bottom: 6px;
}
.product-card:hover .card-name { color: var(--gold-dark); }
.product-card .card-price {
  font-size: 14.5px;
  letter-spacing: .8px;
  color: var(--gold-dark);
}

/* subcategory tiles at top of category pages */
.subcat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
  margin-bottom: 64px;
}
.subcat-tiles a {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
}
.subcat-tiles img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: transform .6s ease, opacity .3s;
}
.subcat-tiles a:hover img { transform: scale(1.05); opacity: .65; }
.subcat-tiles span {
  position: absolute;
  inset: auto 0 0;
  padding: 40px 16px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
  color: #fff;
  font-family: var(--serif);
  font-size: 19px;
  text-align: center;
}

/* ── page headers / breadcrumbs ──────────────────────────────────────── */

.page-head { padding: 56px 0 40px; text-align: center; }
.page-head h1 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 10px; }
.page-head .intro {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--ink-soft);
}

.breadcrumbs {
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.breadcrumbs a { color: var(--ink-soft); }
.breadcrumbs a:hover { color: var(--gold-dark); }
.breadcrumbs .sep { color: var(--gold); margin: 0 7px; }

/* ── product detail ──────────────────────────────────────────────────── */

.breadcrumbs-row { padding: 28px 0 0; }

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 32px 0 72px;
  align-items: start;
}

.gallery-main {
  border: 1px solid var(--hairline);
  background: var(--bg-soft);
  margin-bottom: 14px;
}
.gallery-main img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
}
.gallery-thumbs button {
  padding: 0;
  border: 1px solid var(--hairline);
  background: var(--bg-soft);
  cursor: pointer;
  transition: border-color .25s;
}
.gallery-thumbs button:hover { border-color: var(--gold); }
.gallery-thumbs button.active { border-color: var(--gold-dark); }
.gallery-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.gallery-video {
  margin-top: 14px;
  border: 1px solid var(--hairline);
  background: var(--bg-soft);
}
.gallery-video video { width: 100%; display: block; }

.product-info h1 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 14px; }

.short-desc { color: #333; font-size: 15px; }
.short-desc p { margin: 0 0 .9em; }

.product-price {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--gold-dark);
  margin: 18px 0 2px;
}
.price-note { font-size: 13px; color: var(--ink-soft); margin: 0 0 18px; }

.avail-rows { font-size: 14px; margin-bottom: 24px; }
.avail-rows div { padding: 3px 0; }
.avail-rows .label { color: var(--ink-soft); margin-right: 6px; }
.avail-rows .in-stock { color: #3a7d44; font-weight: 600; }

.product-cta { margin-bottom: 12px; }

/* full-width description band below the gallery/info row (original layout) */
.p-desc-full {
  border-top: 1px solid var(--hairline);
  padding: 56px 0 88px;
}
.p-desc-full h2 {
  font-size: 26px;
  margin-bottom: 24px;
}
.product-desc { color: #333; max-width: 900px; }
.product-desc p { margin: 0 0 1em; }
.product-desc img { margin: 24px 0; }

.param-table {
  width: 100%;
  max-width: 720px;
  border-collapse: collapse;
  margin-top: 36px;
  font-size: 14.5px;
}
.param-table th, .param-table td {
  text-align: left;
  padding: 10px 4px;
  border-bottom: 1px solid var(--hairline);
  font-weight: 400;
  vertical-align: top;
}
.param-table th {
  color: var(--ink-soft);
  white-space: nowrap;
  padding-right: 28px;
  width: 1%;
}

/* ── prose pages (info, blog post) ───────────────────────────────────── */

.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 0 96px;
}
.prose h2 { font-size: 28px; margin-top: 1.6em; }
.prose h3 { font-size: 22px; margin-top: 1.5em; }
.prose img { margin: 28px auto; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.prose th, .prose td {
  border-bottom: 1px solid var(--hairline);
  padding: 9px 10px;
  text-align: left;
}
.prose blockquote {
  border-left: 2px solid var(--gold);
  margin: 1.4em 0;
  padding: 2px 0 2px 22px;
  color: var(--ink-soft);
  font-style: italic;
}
.post-date {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── blog index ──────────────────────────────────────────────────────── */

.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 44px 32px;
  padding-bottom: 96px;
}
.blog-card .card-img {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  margin-bottom: 16px;
}
.blog-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.blog-card:hover .card-img img { transform: scale(1.04); }
.blog-card h2 { font-size: 22px; margin: 6px 0 8px; }
.blog-card:hover h2 { color: var(--gold-dark); }
.blog-card p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* ── contact band ────────────────────────────────────────────────────── */

.contact-band {
  background: var(--footer-bg);
  color: #efece6;
  text-align: center;
  padding: 84px 24px;
}
.contact-band h2 { font-size: clamp(26px, 3vw, 36px); color: #fff; }
.contact-band p { color: #b9b4aa; max-width: 560px; margin: 0 auto 30px; }

/* ── footer ──────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--footer-bg);
  color: #b9b4aa;
  border-top: 1px solid rgba(201, 176, 125, .35);
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 64px 0 48px;
}
.site-footer h4 {
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: #b9b4aa; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-logo {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 6px;
  color: #fff;
  display: inline-block;
  margin-bottom: 14px;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 20px 0;
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── 404 ─────────────────────────────────────────────────────────────── */

.not-found { text-align: center; padding: 140px 24px; }
.not-found h1 { font-size: 44px; }

/* ── responsive ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --header-h: 64px; }

  /* back to a single logo-left / burger-right row */
  .header-inner {
    flex-direction: row;
    justify-content: space-between;
    height: var(--header-h);
    gap: 16px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .logo img { height: 28px; }

  .nav-toggle { display: block; }

  /* on mobile the homepage header must scroll with you — absolute would
     leave no way to open the menu after the first swipe */
  body.home .site-header {
    position: sticky;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--hairline);
  }
  body.home .nav-toggle span { background: var(--ink); }

  .main-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--hairline);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h)); /* exclude mobile browser chrome so last items aren't clipped */
    overflow-y: auto;
    overscroll-behavior: contain;               /* scrolling the menu doesn't chain to the locked body */
    padding: 12px 24px 28px;
  }
  body.nav-open .main-nav { display: block; }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .main-nav > ul { display: block; }
  .main-nav > ul > li { border-bottom: 1px solid var(--hairline); }
  .main-nav > ul > li > a { display: inline-block; padding: 14px 0; border-bottom: none; }

  .main-nav li.has-children { position: relative; }
  .sub-toggle {
    display: block;
    position: absolute;
    top: 6px;
    right: 0;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gold-dark);
    font-size: 18px;
    transition: transform .25s;
  }
  li.open > .sub-toggle { transform: rotate(45deg); }

  .dropdown {
    position: static;
    transform: none;
    display: none;
    border: none;
    box-shadow: none;
    padding: 0 0 14px 16px;
    min-width: 0;
  }
  li:hover > .dropdown { display: none; }       /* hover off on touch */
  li.open > .dropdown { display: block !important; }
  .dropdown ul { min-width: 0; }
  .dropdown li { margin: 0; }
  .dropdown a { display: inline-block; padding: 7px 0; white-space: normal; }

  .hero { min-height: 86svh; padding: 100px 0 calc(36px + env(safe-area-inset-bottom)); }
  .hero h1 { letter-spacing: 2px; }
  .statement { padding: 90px 24px; }

  /* panels stack: text block, then image, original order */
  .hp-panel, .hp-panel:nth-of-type(even) { flex-direction: column; }
  .hp-text { width: 100%; padding: 60px 24px; }
  .hp-img { width: 100%; min-height: 0; }
  .hp-img img { height: auto; }

  .product-detail { grid-template-columns: 1fr; gap: 36px; padding-bottom: 64px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* comfortable tap targets (≥24px) for breadcrumb and footer links */
  .breadcrumbs a { display: inline-block; padding: 4px 0; }
  .site-footer li { margin-bottom: 2px; }
  .site-footer li a { display: inline-block; padding: 5px 0; }
}

@media (max-width: 540px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  .product-card .card-name { font-size: 15px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   ALT HOMEPAGE — English "High Jewellery" concept (/high-jewellery/).
   Fully scoped under `.hj-*`; does not touch the original homepage.
   ════════════════════════════════════════════════════════════════════════ */

.hj-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0 18px;
}
.hj-eyebrow-light { color: var(--gold); }

/* ── shared buttons ─────────────────────────────────────────────────────── */
.hj-btn {
  display: inline-block;
  padding: 15px 40px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  color: var(--gold-dark);
  text-decoration: none;
  transition: background .25s, color .25s, border-color .25s;
}
.hj-btn:hover { background: var(--gold); color: #fff; }
.hj-btn-solid { background: var(--gold); color: #fff; border-color: var(--gold); }
.hj-btn-solid:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }
.hj-btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.hj-btn-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.hj-cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.hj-cta-center { justify-content: center; }

.hj-link-arrow {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
.hj-link-arrow::after { content: ' \2192'; transition: margin-left .2s; }
.hj-link-arrow:hover { color: #fff; }
.hj-link-arrow:hover::after { margin-left: 5px; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hj-hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;      /* text sits at the bottom so the ring stays clear */
  justify-content: center;
  text-align: center;
  color: #fff;
  background: var(--ink);
  padding: 150px 0 76px;
  overflow: hidden;
}
.hj-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;   /* keeps the ring in the upper, text-free zone */
}
.hj-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(8,8,6,.28) 0%, rgba(8,8,6,.10) 38%, rgba(8,8,6,.46) 70%, rgba(8,8,6,.84) 100%);
}
.hj-hero-content { position: relative; z-index: 1; max-width: 940px; }
.hj-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 62px);
  line-height: 1.12;
  letter-spacing: .5px;
  margin: 0 0 22px;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.hj-hero-lead {
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.75;
  max-width: 46em;
  margin: 0 auto;
  color: rgba(255,255,255,.94);
}
.hj-scroll {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 1;
  width: 1px;
  height: 46px;
  background: linear-gradient(rgba(255,255,255,0), var(--gold));
  transform: translateX(-50%);
}

/* ── trust strip ───────────────────────────────────────────────────────── */
.hj-trust {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--hairline);
}
.hj-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.hj-trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: left;
}
.hj-trust-item + .hj-trust-item { border-left: 1px solid var(--hairline); }
.hj-trust-mark { color: var(--gold); font-size: 20px; line-height: 1; }
.hj-trust-item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 22em;
}
.hj-trust-item strong { color: var(--ink); font-weight: 600; }

/* ── split section (rare gemstones) ────────────────────────────────────── */
.hj-split { display: flex; flex-wrap: wrap; }
.hj-split-text {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 90px 60px;
}
.hj-split-inner { max-width: 560px; }
.hj-split-inner h2 {
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.15;
  margin: 0 0 22px;
}
.hj-split-inner > p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.hj-split-inner .hj-btn { margin-top: 32px; }
.hj-split-img { width: 50%; min-height: 560px; background: var(--bg-soft); }
.hj-split-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── signature creations carousel (attached to the split section) ────────── */
.hj-showcase { background: #fff; padding: 78px 0 96px; }
.hj-showcase-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.hj-showcase-head h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  margin: 0;
}
.hj-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.hj-carousel-card {
  flex: 0 0 auto;
  width: clamp(228px, 24vw, 264px);
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--ink);
}
.hj-carousel-img {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
}
.hj-carousel-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hj-carousel-card:hover .hj-carousel-img img { transform: scale(1.05); }
.hj-carousel-name {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .3px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ── bespoke dark band ─────────────────────────────────────────────────── */
/* NB: the .hj-bespoke container + .hj-bespoke-inner layout live in the grid
   block further down ("bespoke dark band"); only the typography is set here. */
.hj-bespoke h2 {
  font-size: clamp(28px, 3.2vw, 48px);
  color: #fff;
  line-height: 1.15;
  margin: 0 0 24px;
}
.hj-bespoke p {
  font-size: 17px;
  line-height: 1.85;
  color: #c9c4ba;
  margin: 0 auto;
  max-width: 40em;
}

/* ── ready to own ──────────────────────────────────────────────────────── */
.hj-own { padding: 100px 0; background: #fff; }
.hj-own-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.hj-own-head h2 { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.15; margin: 0 0 20px; }
.hj-own-lead { font-size: 16px; line-height: 1.8; color: var(--ink-soft); margin: 0 auto 34px; }
.hj-own-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.hj-own-tile {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
}
.hj-own-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hj-own-tile:hover img { transform: scale(1.05); }

/* ── the journey ───────────────────────────────────────────────────────── */
.hj-journey { padding: 100px 0; background: var(--bg-soft); }
.hj-journey-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.hj-journey-head h2 { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.12; margin: 0; }
.hj-journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 64px;
}
.hj-step { display: flex; gap: 26px; align-items: flex-start; }
.hj-step-num {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  color: var(--gold);
  flex: 0 0 auto;
  min-width: 1.4em;
}
.hj-step-body h3 { font-size: 22px; line-height: 1.25; margin: 4px 0 10px; }
.hj-step-lead { font-size: 15.5px; font-style: italic; color: var(--ink); margin: 0 0 10px; }
.hj-step-body p:last-child { font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); margin: 0; }

/* ── final CTA band ────────────────────────────────────────────────────── */
.hj-final {
  background: url('/img/site/v2/hj-final.jpg?v=2') center / cover no-repeat, var(--ink);
  color: #fff;
  text-align: center;
  padding: 120px 24px;
  position: relative;
}
.hj-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(12,10,8,.55), rgba(12,10,8,.68));
}
.hj-final-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.hj-final h2 { font-size: clamp(28px, 3.4vw, 48px); color: #fff; line-height: 1.15; margin: 0 0 20px; }
.hj-final > .container > p, .hj-final-inner > p {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255,255,255,.9);
  max-width: 40em;
  margin: 0 auto;
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hj-hero { min-height: 88svh; padding: 120px 0 70px; }
  .hj-trust-grid { grid-template-columns: 1fr; gap: 0; padding: 8px 0; }
  .hj-trust-item {
    justify-content: flex-start;
    padding: 20px 4px;
  }
  .hj-trust-item + .hj-trust-item { border-left: none; border-top: 1px solid var(--hairline); }
  .hj-trust-item p { max-width: none; }

  .hj-split { flex-direction: column; }
  .hj-split-text { width: 100%; padding: 64px 24px; }
  .hj-split-img { width: 100%; min-height: 0; aspect-ratio: 4 / 5; }

  /* container padding is deliberately omitted — the band is full-bleed; its
     inner text column carries its own padding (see the grid block below) */
  .hj-showcase { padding: 56px 0 68px; }
  .hj-showcase-head { margin-bottom: 32px; }
  .hj-own, .hj-journey { padding: 72px 0; }
  .hj-own-gallery { grid-template-columns: 1fr; gap: 20px; max-width: 440px; margin: 0 auto; }
  .hj-own-tile { aspect-ratio: 4 / 5; }
  .hj-journey-list { grid-template-columns: 1fr; gap: 44px; }
  .hj-final { padding: 84px 24px; }
}

@media (max-width: 600px) {
  /* Stack the hero on phones: photo on top, text on the dark band below —
     the ring is never covered by text. */
  .hj-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    text-align: center;
    background: var(--ink);
  }
  .hj-hero-bg {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-position: 50% 40%;
  }
  .hj-hero::after { display: none; }
  .hj-hero-content { position: static; z-index: auto; padding: 40px 24px 50px; }
  .hj-hero h1 { font-size: 29px; margin-bottom: 18px; }
  .hj-hero-lead { font-size: 15px; }
  .hj-scroll { display: none; }
}

@media (max-width: 540px) {
  .hj-step { gap: 18px; }
  .hj-step-num { font-size: 38px; }
  .hj-cta-row .hj-btn { width: 100%; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════════════════
   REDESIGN 2026-07 — page sections + chrome from the Claude design import.
   Appended (not replacing) the original stylesheet above, so existing
   pages keep their rules and the new design pages get theirs. Scoped by
   distinct class prefixes (.cat- .pd- .ac- .sf- .tc- .hj- …) + body class.
   ═══════════════════════════════════════════════════════════════════════ */

/* inlined from https://la-gem.duckdns.org/css/style.css */
/* lagem-web, single stylesheet for the static LA GEM showcase site.
   Brand: white, ink #222, gold #c9b07d; Frank Ruhl Libre headings, Noto Sans body. */

:root {
  --gold: #c9b07d;
  --gold-dark: #ad9159;
  --ink: #222;
  --ink-soft: #5c5c5c;
  --hairline: #e7e2d9;
  --bg: #fff;
  --bg-soft: #faf8f4;
  --footer-bg: #1d1c19;
  --serif: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --sans: 'Noto Sans', system-ui, -apple-system, sans-serif;
  --container: 1200px;
  --header-h: 76px;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* long unbreakable strings (e.g. pasted URLs in prose) must not force
     the mobile viewport wider than the screen */
  overflow-wrap: break-word;
  /* short pages (e.g. /kontakt/) must not show the light body background
     below the dark footer, stretch <main> so the footer reaches the
     bottom edge of the viewport */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
/* skip link, first tab stop, jumps keyboard/AT users past the mega-menu */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1000;
  background: var(--gold);
  color: #fff;
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: 1px;
  border-radius: 0 0 4px 4px;
  transition: top .2s;
}
@media (min-width: 901px) {
  /* dropdowns open on hover (li:hover, below), on keyboard focus, and — via
     site.js — on a short hover-intent delay so a panel doesn't vanish while
     the cursor travels to it */
  .main-nav li:focus-within > .dropdown,
  .main-nav > ul > li.hover-open > .dropdown { display: flex; gap: 40px; }

  /* multi-column mega panels anchor to the whole nav row instead of their
     item, a 5–6 column panel centered under an off-center item overflows
     the viewport on ≤1366px screens, leaving links unreachable */
  .main-nav > ul { position: relative; }
  .main-nav > ul > li:has(> .dropdown > ul + ul) { position: static; }
  .main-nav > ul > li > .dropdown:has(> ul + ul) {
    left: 0; right: 0;
    transform: none;
    max-width: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 34px 60px;
  }

  /* invisible hover-bridge over the sliver between the nav row and an open
     panel, so the panel doesn't close while the cursor travels down to it */
  .main-nav > ul > li.has-children > .dropdown::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -18px;
    height: 18px;
  }
}
.hero h1 {
  /* scales with the viewport so the headline doesn't shrink into the photo on
     1080p / 2K screens (was capped at 26px, far too small on a 2560px hero) */
  font-size: clamp(19px, 1.55vw, 34px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.6;
  max-width: 30em;
  margin: 0 auto 14px;
}
/* ── statement band (the original big H1 on its background photo) ────── */

.statement {
  position: relative;
  background: url('https://la-gem.duckdns.org/img/site/hp3_h1_background.jpg') center / cover no-repeat;
  text-align: center;
  color: #fff;
  padding: 150px 24px;
}
/* 1080p / 2K: the panel text was a 14px block stranded in a half-screen of
   whitespace, give it room and size so it reads as a deliberate column */
@media (min-width: 1800px) {
  .hp-text-inner { max-width: 840px; }
  .hp-text h2 { font-size: 19px; }
  .hp-text p { font-size: 16px; line-height: 1.78; }
}
.footer-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-top: 16px;
  border: 1px solid rgba(201, 176, 125, .45);
  border-radius: 50%;
  color: var(--gold);
  transition: background .25s, color .25s, border-color .25s;
}
.footer-ig:hover { background: var(--gold); color: var(--footer-bg); border-color: var(--gold); }
.footer-certs { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:38px; padding:26px 0 4px; border-top:1px solid rgba(255,255,255,.08); }
.footer-certs img { height:38px; width:auto; display:block; opacity:.75; filter:grayscale(1) invert(1); transition:opacity .25s; mix-blend-mode:screen; }
.footer-certs img:hover { opacity:1; }
@media (max-width:600px){ .footer-certs { gap:24px; } .footer-certs img { height:30px; } }
/* ── responsive ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --header-h: 64px; }

  /* back to a single logo-left / burger-right row */
  .header-inner {
    flex-direction: row;
    justify-content: space-between;
    height: var(--header-h);
    gap: 16px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .logo img { height: 28px; }

  .nav-toggle { display: block; }

  /* on mobile the homepage header must scroll with you, absolute would
     leave no way to open the menu after the first swipe */
  body.home .site-header {
    position: sticky;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--hairline);
  }
  body.home .nav-toggle span { background: var(--ink); }

  .main-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--hairline);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h)); /* exclude mobile browser chrome so last items aren't clipped */
    overflow-y: auto;
    overscroll-behavior: contain;               /* scrolling the menu doesn't chain to the locked body */
    padding: 12px 24px 28px;
  }
  body.nav-open .main-nav { display: block; }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .main-nav > ul { display: block; }
  .main-nav > ul > li { border-bottom: 1px solid var(--hairline); }
  .main-nav > ul > li > a { display: inline-block; padding: 14px 0; border-bottom: none; }

  .main-nav li.has-children { position: relative; }
  .sub-toggle {
    display: block;
    position: absolute;
    top: 6px;
    right: 0;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gold-dark);
    font-size: 18px;
    transition: transform .25s;
  }
  li.open > .sub-toggle { transform: rotate(45deg); }

  .dropdown {
    position: static;
    transform: none;
    display: none;
    border: none;
    box-shadow: none;
    padding: 0 0 14px 16px;
    min-width: 0;
  }
  li:hover > .dropdown { display: none; }       /* hover off on touch */
  li.open > .dropdown { display: block !important; }
  .dropdown ul { min-width: 0; }
  .dropdown li { margin: 0; }
  .dropdown a { display: inline-block; padding: 7px 0; white-space: normal; }

  .hero { min-height: 86svh; padding: 100px 0 calc(36px + env(safe-area-inset-bottom)); }
  .hero h1 { letter-spacing: 2px; }
  .statement { padding: 90px 24px; }

  /* panels stack: text block, then image, original order */
  .hp-panel, .hp-panel:nth-of-type(even) { flex-direction: column; }
  .hp-text { width: 100%; padding: 60px 24px; }
  .hp-img { width: 100%; min-height: 0; }
  .hp-img img { height: auto; }

  .product-detail { grid-template-columns: 1fr; gap: 36px; padding-bottom: 64px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* comfortable tap targets (≥24px) for breadcrumb and footer links */
  .breadcrumbs a { display: inline-block; padding: 4px 0; }
  .site-footer li { margin-bottom: 2px; }
  .site-footer li a { display: inline-block; padding: 5px 0; }
}
/* ════════════════════════════════════════════════════════════════════════
   ALT HOMEPAGE, English "High Jewellery" concept (/high-jewellery/).
   Fully scoped under `.hj-*`; does not touch the original homepage.
   ════════════════════════════════════════════════════════════════════════ */

.hj-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0 18px;
}
.hj-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 28px;
  padding-bottom: 28px;
}
/* ── stone overlay section (rare gemstones, text over image) ─────────────── */
.hj-stone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 78vh;
  padding: 90px clamp(24px, 8vw, 130px);
  color: #fff;
  background: var(--ink);
  overflow: hidden;
}
.hj-stone-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.hj-stone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(12,10,8,.82) 0%, rgba(12,10,8,.55) 42%, rgba(12,10,8,.12) 78%, rgba(12,10,8,.02) 100%);
}
.hj-stone-inner {
  position: relative;
  z-index: 1;
  max-width: 540px;
}
.hj-stone-rule {
  display: block;
  width: 60px;
  height: 2px;
  margin: 2px 0 24px;
  background: var(--gold);
}
.hj-stone-inner h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.12;
  margin: 0 0 22px;
  text-shadow: 0 2px 26px rgba(0,0,0,.35);
}
.hj-stone-lead {
  font-size: 16.5px;
  line-height: 1.85;
  color: rgba(255,255,255,.9);
  margin: 0 0 34px;
}
@media (max-width: 700px) {
  .hj-stone { min-height: 0; padding: 72px 24px; }
  .hj-stone::after { background: linear-gradient(rgba(12,10,8,.55), rgba(12,10,8,.72)); }
}
/* ── split section (rare gemstones) ────────────────────────────────────── */.hj-split { display: flex; flex-wrap: wrap; }
.hj-split-text {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 48px 56px;
}
.hj-split-inner { max-width: 620px; }
.hj-split-img { width: 50%; min-height: 0; background: var(--bg-soft); }
/* ── signature creations carousel (attached to the split section) ────────── */
.hj-showcase { background: #fff; padding: 62px 0 72px; }
.hj-carousel-img {
  display: block;
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
}
.hj-carousel-img::after {
  content: 'View piece \2192';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(29,28,25,.12), rgba(29,28,25,.42));
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.hj-carousel-card:hover .hj-carousel-img::after { opacity: 1; transform: translateY(0); }
/* ── bespoke dark band ─────────────────────────────────────────────────── */
.hj-bespoke {
  background: var(--footer-bg);
  color: #efece6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.hj-bespoke-media { min-height: 0; }
.hj-bespoke-media img { width: 100%; height: 100%; object-fit: cover; }
.hj-bespoke-inner { max-width: 620px; margin: 0 auto; text-align: center; padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
/* ── ready to own ──────────────────────────────────────────────────────── */
.hj-own { padding: 72px 0; background: #fff; }
.hj-own-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.hj-own-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.hj-own-tile { display: block; text-decoration: none; color: var(--ink); }
.hj-own-tile-img {
  display: block;
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
}
.hj-own-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hj-own-tile:hover .hj-own-tile-img img { transform: scale(1.05); }
.hj-own-tile-img::after {
  content: 'View piece \2192';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(29,28,25,.12), rgba(29,28,25,.42));
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.hj-own-tile:hover .hj-own-tile-img::after { opacity: 1; transform: translateY(0); }
.hj-own-tile-name {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .3px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
}
/* ── the journey ───────────────────────────────────────────────────────── */
.hj-journey { padding: 72px 0; background: var(--bg-soft); }
.hj-journey-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.hj-journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 64px;
}
/* ── editorial gallery strip ────────────────────────────────────────────── */
.hj-gallery-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--ink);
}
.hj-gallery-strip img {
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  .hj-gallery-strip { grid-template-columns: 1fr; }
  .hj-gallery-strip img { aspect-ratio: 4 / 3; }
}
/* ── final CTA band ────────────────────────────────────────────────────── */
.hj-final {
  background: url('uploads/IMG_1921-7769b500.jpg') center / cover no-repeat, var(--ink);
  color: #fff;
  text-align: center;
  padding: 84px 24px;
  position: relative;
}
/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hj-hero { min-height: 88svh; padding: 120px 0 70px; }
  .hj-trust-grid { grid-template-columns: 1fr; gap: 0; padding: 8px 0; }
  .hj-trust-item {
    justify-content: flex-start;
    padding: 20px 4px;
  }
  .hj-trust-item + .hj-trust-item { border-left: none; border-top: 1px solid var(--hairline); }
  .hj-trust-item p { max-width: none; }

  .hj-split { flex-direction: column; }
  .hj-split-text { width: 100%; padding: 64px 24px; }
  .hj-split-img { width: 100%; min-height: 0; aspect-ratio: 4 / 5; }

  .hj-bespoke { grid-template-columns: 1fr; }
  .hj-bespoke-media { min-height: 0; aspect-ratio: 4 / 5; order: -1; }
  .hj-bespoke-inner { padding: 80px 24px; }
  .hj-showcase { padding: 56px 0 68px; }
  .hj-showcase-head { margin-bottom: 32px; }
  .hj-own, .hj-journey { padding: 72px 0; }
  .hj-own-gallery { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
  .hj-journey-list { grid-template-columns: 1fr; gap: 44px; }
  .hj-final { padding: 84px 24px; }
}
/* ═══ Ready to Own catalogue ══════════════════════════════════════════════ */
.cat-note { background:#fff; border-bottom:1px solid var(--hairline); }
.cat-note p { text-align:center; margin:0; padding:18px 0; font-size:14px; letter-spacing:.3px; color: var(--ink-soft); }
.cat-note a { color: var(--gold-dark); font-weight:600; white-space:nowrap; }
.cat-cta-bottom .cat-cta-inner { justify-content:flex-end; padding-bottom:34px; gap:6px; }
.cat-lead-line { max-width:70ch; margin:0 0 10px; font-size:14px; line-height:1.7; color: var(--ink-soft); font-style:italic; }
/* USP */
.cat-usp { padding: 74px 0; background:#fff; border-bottom:1px solid var(--hairline); }
.cat-usp-intro { max-width:70ch; margin:16px auto 0; font-size:15.5px; line-height:1.8; color: var(--ink-soft); }
.cat-usp-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 30px; margin-top:8px; }
.cat-usp-card { text-align:left; padding:28px 24px; background: var(--bg-soft); border:1px solid var(--hairline); }
.cat-usp-ico { color: var(--gold); font-size:16px; }
.cat-usp-card h3 { font-size:18px; margin:12px 0 10px; line-height:1.35; }
.cat-usp-card p { font-size:14px; line-height:1.7; color: var(--ink-soft); margin:0; }
.cat-usp-note { text-align:center; margin-top:38px; }
.cat-usp-note p { font-size:15px; color: var(--ink); margin:0; }
.cat-usp-note a { color: var(--gold-dark); font-weight:600; }
.cat-process-6 { grid-template-columns: repeat(3,1fr); gap: 40px 34px; max-width:1080px; }
@media (max-width: 900px) {
  .cat-usp-grid { grid-template-columns: repeat(2,1fr); gap:20px; }
  .cat-process-6 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cat-usp-grid { grid-template-columns: 1fr; }
}
.cat-hero { text-align:center; padding: 64px 0 44px; background: var(--bg-soft); border-bottom:1px solid var(--hairline); }
.cat-hero h1 { font-size: clamp(30px,4vw,52px); margin: 6px 0 18px; }
.cat-hero-lead { max-width: 60ch; margin: 0 auto; font-size: 16.5px; line-height:1.8; color: var(--ink-soft); }
.cat-controls { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); }
.cat-controls-inner { display:flex; flex-wrap:nowrap; align-items:center; gap: 10px 16px; padding-top:12px; padding-bottom:12px; }
.cat-tabs { display:flex; gap: 4px; flex:0 0 auto; }
.cat-tab { font-family: var(--sans); font-size: 11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding: 7px 12px; border:1px solid var(--hairline); background:#fff; color: var(--ink); cursor:pointer; transition: all .2s; }
.cat-tab:hover { border-color: var(--gold); color: var(--gold-dark); }
.cat-tab.is-active { background: var(--ink); color:#fff; border-color: var(--ink); }
.cat-subtabs { display:flex; flex-wrap:wrap; gap: 18px; }
.cat-subtabs[hidden] { display:none; }
.cat-subtab { font-family: var(--sans); font-size: 12.5px; letter-spacing:.5px; padding: 4px 0; border:none; border-bottom:1px solid transparent; background:none; color: var(--ink-soft); cursor:pointer; transition: all .2s; }
.cat-subtab:hover { color: var(--ink); }
.cat-subtab.is-active { color: var(--gold-dark); border-bottom-color: var(--gold); }
.cat-tools { display:flex; align-items:center; gap: 10px; margin-left:auto; flex:0 1 auto; min-width:0; }
.cat-switch { display:inline-flex; align-items:center; gap:10px; font-size:13px; color: var(--ink); cursor:pointer; user-select:none; }
.cat-switch input { position:absolute; opacity:0; width:0; height:0; }
.cat-switch-track { width:40px; height:22px; border-radius:22px; background:#d9d3c7; position:relative; transition: background .2s; flex:0 0 auto; }
.cat-switch-thumb { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition: transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.cat-switch input:checked + .cat-switch-track { background: var(--gold); }
.cat-switch input:checked + .cat-switch-track .cat-switch-thumb { transform: translateX(18px); }
.cat-switch input:focus-visible + .cat-switch-track { outline:2px solid var(--gold-dark); outline-offset:2px; }
.cat-sort { font-size:13px; color: var(--ink-soft); display:inline-flex; align-items:center; gap:7px; }
.cat-sort-label { font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color: var(--ink-soft); white-space:nowrap; }
.cat-select { position:relative; }
.cat-select-btn { display:inline-flex; align-items:center; gap:8px; font-family: var(--sans); font-size:11px; font-weight:600; letter-spacing:.5px; color: var(--ink); background:#fff; border:1px solid var(--hairline); padding:8px 11px; cursor:pointer; transition: border-color .2s; min-width:118px; justify-content:space-between; white-space:nowrap; }
.cat-select-btn:hover { border-color: var(--gold); }
.cat-select.is-open .cat-select-btn { border-color: var(--gold); }
.cat-select-caret { color: var(--gold-dark); transition: transform .25s; flex:0 0 auto; }
.cat-select.is-open .cat-select-caret { transform: rotate(180deg); }
.cat-select-menu { position:absolute; top:calc(100% + 6px); right:0; left:0; margin:0; padding:6px; list-style:none; background:#fff; border:1px solid var(--hairline); box-shadow:0 18px 40px -22px rgba(29,28,25,.5); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s, transform .18s, visibility .18s; z-index:20; }
.cat-select.is-open .cat-select-menu { opacity:1; visibility:visible; transform:translateY(0); }
.cat-select-opt { font-size:12px; letter-spacing:.3px; color: var(--ink); padding:9px 11px; cursor:pointer; transition: background .15s, color .15s; white-space:nowrap; }
.cat-select-opt:hover { background: var(--bg-soft); }
.cat-select-opt.is-active { color: var(--gold-dark); font-weight:600; }
.cat-select-opt.is-active::after { content:'\2713'; float:right; color: var(--gold); }
.cat-carat-control { display:flex; align-items:center; gap:8px; }
.cat-carat-control input[type="range"] { width:90px; accent-color: var(--gold-dark); cursor:pointer; }
.cat-carat-control output { font-size:11px; font-weight:600; color: var(--ink); min-width:44px; }
/* USP + sourcing (shared with bespoke, redefined for clarity) */
.cat-sourcing { background: var(--footer-bg); color:#fff; padding: 76px 0; }
.cat-sourcing-inner { display:flex; justify-content:center; }
.cat-sourcing-text { max-width: 720px; text-align:center; }
.cat-sourcing-text h2 { color:#fff; font-size: clamp(21px,2.4vw,32px); margin: 10px 0 18px; white-space:nowrap; }
.cat-sourcing-text p { color: rgba(255,255,255,.82); font-size:15.5px; line-height:1.85; margin:0 0 16px; }
  @media (max-width: 640px){ .cat-sourcing-text h2 { white-space:normal; } }
.cat-sourcing-text .hj-cta-row { justify-content:center; margin-top:22px; }
.cat-grid-wrap { padding: 40px 0 20px; }
.cat-count { font-size:13px; letter-spacing:.5px; color: var(--ink-soft); margin:0 0 22px; }
.cat-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 30px 26px; }
/* Editorial interludes spliced into the product grid as full-width rows (bespoke-creations) */
.cat-inline { grid-column: 1 / -1; margin: 10px 0; padding: 44px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.cat-inline .cat-section-head { margin: 0 auto; }
.cat-inline-cards .cat-usp-note { margin-top: 32px; }
.cat-card { display:flex; flex-direction:column; text-decoration:none; color: var(--ink); }
.cat-card-img { position:relative; display:block; aspect-ratio: 3/4; overflow:hidden; background: var(--bg-soft); border:1px solid var(--hairline); }
.cat-card-img img { width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.cat-card:hover .cat-card-img img { transform: scale(1.05); }
.cat-chip { position:absolute; top:12px; left:12px; font-size:10.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; padding:6px 10px; background:rgba(255,255,255,.92); color: var(--ink); }
.cat-chip-made { color: var(--gold-dark); }
.cat-card-view { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(rgba(29,28,25,.1),rgba(29,28,25,.42)); color:#fff; font-size:12px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s; }
.cat-card:hover .cat-card-view { opacity:1; transform:translateY(0); }
.cat-card-name { font-family: var(--serif); font-size: 17px; margin: 16px 0 4px; line-height:1.35; }
.cat-card-price { font-size: 14px; letter-spacing:.5px; color: var(--gold-dark); }
/* CTA promo card spans 2 cols */
.cat-cta { position:relative; grid-column: span 2; aspect-ratio: auto; overflow:hidden; min-height: 100%; }
.cat-cta img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cat-cta::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,18,15,.72), rgba(20,18,15,.15)); }
.cat-cta-inner { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; padding: 40px; color:#fff; }
.cat-cta-eyebrow { font-size:9.5px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color: var(--gold); }
.cat-cta-title { font-family: var(--serif); font-size: clamp(17px,1.5vw,22px); max-width:13ch; }
.cat-cta-btn { margin-top:2px; font-size:9.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; padding:7px 13px; background: var(--gold); color:#fff; transition: background .25s; align-self:flex-start; }
.cat-cta:hover .cat-cta-btn { background: var(--gold-dark); }
.cat-cta-low .cat-cta-inner { justify-content:flex-end; padding-bottom:56px; }
.cat-cta-tight .cat-cta-inner { gap:6px; justify-content:flex-start; padding-top:36px; }
.cat-cta-top .cat-cta-inner { gap:6px; justify-content:flex-start; padding-top:36px; }
.cat-empty { text-align:center; padding: 40px 0; color: var(--ink-soft); }
.cat-benefits { background: var(--bg-soft); border-top:1px solid var(--hairline); padding: 64px 0; }
.cat-benefits-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 34px; }
.cat-benefit { text-align:center; }
.cat-benefit-ico { color: var(--gold); font-size:18px; }
.cat-benefit h3 { font-size:19px; margin:14px 0 8px; }
.cat-benefit p { font-size:14.5px; line-height:1.7; color: var(--ink-soft); margin:0; }
.cat-section-head { text-align:center; max-width:720px; margin:0 auto 44px; }
.cat-section-head h2 { font-size: clamp(26px,3vw,40px); }
.cat-process { padding: 80px 0; }
.cat-process-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 40px; max-width:1000px; margin:0 auto; }
.cat-step { text-align:center; }
.cat-step-num { font-family: var(--serif); font-size: 40px; color: var(--gold); }
.cat-step h3 { font-size:21px; margin:10px 0 8px; }
.cat-step p { font-size:14.5px; line-height:1.75; color: var(--ink-soft); margin:0; }
.cat-faq { padding: 20px 0 90px; }
.cat-faq-list { max-width: 820px; margin:0 auto; }
.cat-faq-item { border-top:1px solid var(--hairline); }
.cat-faq-item:last-child { border-bottom:1px solid var(--hairline); }
.cat-faq-item summary { list-style:none; cursor:pointer; padding: 22px 40px 22px 0; position:relative; font-family: var(--serif); font-size:19px; color: var(--ink); }
.cat-faq-item summary::-webkit-details-marker { display:none; }
.cat-faq-item summary::after { content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:24px; color: var(--gold-dark); font-family: var(--sans); }
.cat-faq-item[open] summary::after { content:'–'; }
.cat-faq-item p { margin:0 0 22px; color: var(--ink-soft); line-height:1.8; max-width:70ch; }
.cat-final { background: var(--footer-bg); color:#fff; text-align:center; padding: 90px 24px; }
.cat-final h2 { color:#fff; font-size: clamp(26px,3vw,42px); }
.cat-final p { color: rgba(255,255,255,.85); font-size:16.5px; line-height:1.75; max-width:44ch; margin:0 auto; }
@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(2,1fr); gap: 24px 16px; }
  .cat-cta { grid-column: span 2; min-height: 340px; }
  .cat-benefits-grid { grid-template-columns: repeat(2,1fr); gap: 30px; }
  .cat-process-grid { grid-template-columns: 1fr; gap: 30px; }
  /* controls become a single horizontally-scrollable row */
  .cat-controls-inner { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:8px 10px; scrollbar-width:none; }
  .cat-controls-inner::-webkit-scrollbar { display:none; }
  .cat-tools { margin-left:8px; gap:8px; }
  .cat-sort-label { display:none; }
  .cat-select-btn { min-width:0; }
}
@media (max-width: 560px) {
  .cat-hero { padding-top: 44px; }
  .cat-tab { padding:7px 10px; }
  .cat-cta-inner { padding: 26px; }
  .cat-card-name { font-size: 14px; }
  .cat-note p { font-size:12.5px; padding:14px 0; }
  .cat-select-menu { left:auto; right:0; min-width:150px; }
}
/* ═══ Atelier page ════════════════════════════════════════════════════════ */
.at-hero { position:relative; min-height: 86vh; display:flex; align-items:flex-end; overflow:hidden; }
.at-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
.at-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,15,.25), rgba(20,18,15,.05) 40%, rgba(20,18,15,.55)); }
.at-hero-inner { position:relative; z-index:1; width:100%; max-width:var(--container,1200px); margin:0 auto; padding: 0 24px 72px; color:#fff; text-align:left; }
.at-hero-inner h1 { color:#fff; font-size: clamp(38px,5vw,64px); margin: 10px 0 12px; }
.at-hero-inner p { color: rgba(255,255,255,.88); font-size: 17px; letter-spacing:.4px; margin:0; }
.at-section { padding: 90px 0; }
.at-section-soft { background: var(--bg-soft); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.at-split { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items:center; }
.at-split-rev .at-text { order:2; }
 .at-split-rev .at-media { order:1; }
.at-text h2 { font-size: clamp(28px,3vw,42px); margin: 8px 0 22px; }
.at-text p { font-size: 15.5px; line-height:1.9; color: var(--ink-soft); margin: 0 0 16px; max-width: 56ch; }
.at-pull { font-family: var(--serif); font-style:italic; font-size: 18px !important; color: var(--ink) !important; border-left: 2px solid var(--gold); padding-left: 20px; margin-top: 26px !important; }
.at-media img { width:100%; height:auto; display:block; aspect-ratio: 4/5; object-fit:cover; }
.at-bleed { line-height:0; }
.at-bleed img { width:100%; height: 70vh; max-height: 760px; object-fit:cover; object-position: 50% 30%; }
.at-dark { background: var(--footer-bg); color:#fff; padding: 96px 0; }
.at-dark-inner { display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 64px; align-items:center; }
.at-dark h2 { color:#fff; font-size: clamp(24px,2.6vw,36px); margin: 10px 0 24px; line-height:1.35; }
.at-dark p { color: rgba(255,255,255,.82); font-size: 15.5px; line-height:1.9; margin: 0 0 16px; max-width:58ch; }
.at-dark-media img { width:100%; height:auto; display:block; aspect-ratio: 4/5; object-fit:cover; }
.at-intro { font-size: 16px; color: var(--ink-soft); line-height:1.8; max-width:56ch; margin: 0 auto; }
.at-approach-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 44px; max-width:1080px; margin: 20px auto 0; }
.at-approach-item { text-align:center; }
.at-approach-item h3 { font-size: 20px; margin: 10px 0 10px; line-height:1.35; }
.at-approach-item p { font-size: 14.5px; line-height:1.75; color: var(--ink-soft); margin:0; }
.at-quote { max-width: 760px; margin: 64px auto 0; text-align:center; }
.at-quote p { font-size: 15.5px; line-height:1.9; color: var(--ink-soft); margin:0 0 16px; }
.at-quote .at-pull { border-left:none; padding-left:0; text-align:center; }
.at-gallery { display:grid; grid-template-columns: repeat(3,1fr); gap: 4px; line-height:0; }
.at-cert { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items:center; }
.at-cert-text h2 { font-size: clamp(26px,2.8vw,38px); margin: 8px 0 20px; }
.at-cert-text p { font-size:15.5px; line-height:1.9; color: var(--ink-soft); margin:0 0 16px; max-width:52ch; }
.hj-btn-ghost { display:inline-block; margin-top:10px; border:1px solid var(--gold); color: var(--gold-dark); background:transparent; padding:13px 26px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; text-decoration:none; transition: all .25s; }
.hj-btn-ghost:hover { background: var(--gold); color:#fff; }
.at-cert-frame { position:relative; display:block; background:#fff; padding:18px; border:1px solid var(--hairline); box-shadow: 0 30px 60px -34px rgba(29,28,25,.5); }
.at-cert-doc { width:100%; display:block; border:1px solid var(--hairline); background: var(--bg-soft); }
@media (max-width: 900px) { .at-cert { grid-template-columns: 1fr; gap: 30px; } }
.at-gallery img { width:100%; height: 62vh; max-height: 640px; object-fit:cover; }
@media (max-width: 900px) {
  .at-split, .at-dark-inner { grid-template-columns: 1fr; gap: 34px; }
  .at-split-rev .at-text { order:1; } .at-split-rev .at-media { order:2; }
  .at-approach-grid { grid-template-columns: 1fr; gap: 32px; }
  .at-gallery { grid-template-columns: 1fr; }
  .at-gallery img { height: 52vh; }
  .at-section { padding: 64px 0; }
  .at-hero { min-height: 70svh; }
}
/* ═══ Terms page ══════════════════════════════════════════════════════════ */
.cat-hero { text-align:center; padding: 64px 0 44px; background: var(--bg-soft); border-bottom:1px solid var(--hairline); }
.cat-hero-lead { max-width: 62ch; margin: 0 auto; font-size: 16px; line-height:1.8; color: var(--ink-soft); }
.tc-body { padding: 64px 0 90px; }
.tc-layout { display:grid; grid-template-columns: 240px minmax(0,1fr); gap: 64px; align-items:start; }
.tc-nav { position: sticky; top: calc(var(--header-h) + 24px); display:flex; flex-direction:column; gap: 4px; }
.tc-nav .hj-eyebrow { margin-bottom: 10px; }
.tc-nav a { font-family: var(--sans); font-size: 13px; line-height:1.5; color: var(--ink-soft); text-decoration:none; padding: 5px 0 5px 14px; border-left: 1px solid var(--hairline); transition: color .2s, border-color .2s; }
.tc-nav a:hover { color: var(--gold-dark); border-left-color: var(--gold); }
.tc-content { max-width: 760px; }
.tc-section { padding: 26px 0 10px; border-top: 1px solid var(--hairline); }
.tc-section:first-child { border-top: none; padding-top: 0; }
.tc-section h2 { font-size: 24px; margin: 0 0 16px; }
.tc-section p, .tc-section li { font-size: 15px; line-height: 1.85; color: var(--ink-soft); }
.tc-section p { margin: 0 0 14px; }
.tc-section strong { color: var(--ink); font-weight:600; }
.tc-section ol, .tc-section ul { margin: 0 0 14px; padding-left: 22px; }
.tc-section li { margin-bottom: 10px; }
.tc-section a { color: var(--gold-dark); }
.tc-date { font-size: 13px; letter-spacing: .5px; color: var(--ink-soft); font-style: italic; }
.tc-content-center { max-width:880px; margin:0 auto; }
.tc-table-wrap { overflow-x:auto; margin:0 0 14px; }
.tc-table-wrap .tc-table { margin:0; }
.tc-section code { font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size:12.5px; color: var(--ink); background: var(--bg-soft); padding:1px 5px; border:1px solid var(--hairline); border-radius:3px; }
.tc-table { width:100%; border-collapse:collapse; margin:0 0 14px; font-family: var(--sans); }
.tc-table th, .tc-table td { text-align:left; padding:11px 14px; font-size:14px; line-height:1.6; border:1px solid var(--hairline); vertical-align:top; }
.tc-table th { font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color: var(--ink); background: var(--bg-soft); }
.tc-table td { color: var(--ink-soft); }
.tc-table td:first-child { color: var(--ink); }
@media (max-width: 900px) {
  .tc-layout { grid-template-columns: 1fr; gap: 34px; }
  .tc-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  .tc-nav .hj-eyebrow { width: 100%; }
  .tc-nav a { border-left: none; padding: 4px 0; }
}
.hm-figure { margin: 8px 0 4px; }
.hm-figure img { width:100%; max-width:520px; height:auto; display:block; border:1px solid var(--hairline); }
.hm-figure figcaption { margin-top:12px; font-size:13px; letter-spacing:.4px; color: var(--ink-soft); font-style:italic; }
.account-link { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; color: var(--ink); margin-left: 18px; transition: color .2s; }
.account-link:hover { color: var(--gold-dark); }
body.home .account-link { color:#fff; }
@media (max-width: 900px) {
  body.home .account-link { color: var(--ink); }
  /* logo left, then the utility cluster + burger grouped on the right */
  .header-utils { order: 2; margin-left: auto; margin-right: 4px; gap: 10px; }
  .nav-toggle { order: 3; }
}
/* ═══ Product detail ═════════════════════════════════════════════════════ */
.pd-wrap { padding: 56px 0 30px; }
.pd-grid { display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 64px; align-items:start; }
.pd-main-img { aspect-ratio: 1/1; overflow:hidden; background: var(--bg-soft); border:1px solid var(--hairline); }
.pd-main-img img { width:100%; height:100%; object-fit:cover; }
.pd-thumbs { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.pd-thumb { width:76px; height:76px; padding:0; border:1px solid var(--hairline); background:var(--bg-soft); cursor:pointer; overflow:hidden; opacity:.75; transition:opacity .2s, border-color .2s; }
.pd-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb:hover, .pd-thumb.is-active { opacity:1; border-color: var(--gold); }
.pd-video { margin-top:14px; border:1px solid var(--hairline); background: var(--bg-soft); overflow:hidden; }
.pd-video video { display:block; width:100%; height:auto; }
.pd-summary h1 { font-size: clamp(26px,3vw,40px); margin: 8px 0 6px; }
.pd-id { font-family: var(--sans); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color: var(--ink-soft); margin:0 0 18px; }
.pd-short { font-size:16px; line-height:1.75; color: var(--ink-soft); margin:0 0 22px; }
.pd-price { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.pd-price-vat { font-family: var(--serif); font-size:26px; color: var(--ink); }
.pd-price-ex { font-size:13.5px; letter-spacing:.4px; color: var(--ink-soft); }
.pd-price-note { font-size:13.5px; line-height:1.7; color: var(--gold-dark); font-style:italic; margin:0 0 6px; }
.pd-variants { margin: 18px 0 6px; }
.pd-variants h3 { font-size:16px; margin:0 0 10px; }
.pd-variants ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pd-variants li { font-family: var(--sans); font-size:12px; letter-spacing:.6px; border:1px solid var(--hairline); padding:8px 13px; color: var(--ink); background:#fff; }
.pd-cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:22px 0 24px; }
.pd-fav { display:inline-flex; align-items:center; gap:9px; background:none; border:1px solid var(--hairline); padding:13px 20px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color: var(--ink); cursor:pointer; transition: all .25s; }
.pd-fav:hover { border-color: var(--gold); color: var(--gold-dark); }
.pd-fav.is-on { border-color: var(--gold); color: var(--gold-dark); }
.pd-fav.is-on svg { fill: var(--gold); stroke: var(--gold); }
.pd-trust { list-style:none; margin:0; padding:18px 0 0; border-top:1px solid var(--hairline); }
.pd-trust li { font-size:14px; line-height:1.7; color: var(--ink-soft); padding-left:22px; position:relative; margin-bottom:9px; }
.pd-trust li::before { content:'\2726'; position:absolute; left:0; color: var(--gold); font-size:12px; }
.pd-section { padding: 58px 0; }
.pd-section-soft { background: var(--bg-soft); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.pd-narrow { max-width: 820px; }
.pd-section h2 { font-size: clamp(24px,2.6vw,34px); margin: 8px 0 20px; }
.pd-section p { font-size:15px; line-height:1.85; color: var(--ink-soft); margin:0 0 14px; }
.pd-section strong { color: var(--ink); }
.pd-spec-title { font-size:18px; margin: 26px 0 12px; }
.pd-table { width:100%; border-collapse:collapse; }
.pd-table th, .pd-table td { text-align:left; padding: 11px 14px; font-size:14px; line-height:1.6; border-bottom:1px solid var(--hairline); }
.pd-table th { font-family:var(--sans); font-weight:600; letter-spacing:.4px; color: var(--ink); width: 38%; }
.pd-table td { color: var(--ink-soft); }
.pd-pack { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
.pd-pack-media img { width:100%; height:auto; display:block; aspect-ratio: 4/3; object-fit:cover; object-position: 50% 40%; border:1px solid var(--hairline); }
.pd-form label { display:block; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color: var(--ink); margin-bottom:16px; }
.pd-form input, .pd-form textarea { display:block; width:100%; margin-top:7px; padding:13px 14px; font-family:var(--sans); font-size:14px; color:var(--ink); background:#fff; border:1px solid var(--hairline); outline:none; transition:border-color .2s; box-sizing:border-box; }
.pd-form input:focus, .pd-form textarea:focus { border-color: var(--gold); }
.pd-form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pd-form-note { font-size:13.5px; margin-top:16px; }
.pd-form-note a { color: var(--gold-dark); }
@media (max-width: 900px) {
  .pd-grid, .pd-pack { grid-template-columns: 1fr; gap: 30px; }
  .pd-form-row { grid-template-columns: 1fr; gap: 0; }
  .pd-section { padding: 44px 0; }
}
/* inlined from https://la-gem.duckdns.org/css/style.css */
/* NOTE: the old static-site's duplicate :root block and its "Ring catalogue"
   .cat-* ruleset used to live here. Because they were appended AFTER the
   design-faithful "Ready to Own catalogue" band (~L1688, ported verbatim from
   the Claude design import), the old rules won the cascade and made the
   category-page filters look wrong (oversized 210px selects, 12.5px labels,
   wrapping controls) instead of the compact Claude-design filters. Removed
   2026-07-21 so the design band at ~L1688 is the single source of truth for
   the .cat-* filters shared by bespoke-creations / ready-to-own / gemstones /
   engagement / category. The .cr-* / .ct-* / .ac-* sections below are unique
   and still needed, so they are kept. */
/* ═══ Creations / works page ═══════════════════════════════════════════════ */
.cr-hero { position: relative; min-height: 90vh; display: flex; align-items: flex-end; justify-content: center; text-align: center; color: #fff; overflow: hidden; }
.cr-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
.cr-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(8,8,6,.34) 0%, rgba(8,8,6,.12) 42%, rgba(8,8,6,.34) 74%, rgba(8,8,6,.72) 100%); }
.cr-hero-content { position: relative; z-index: 1; max-width: 860px; padding: 0 24px 96px; }
.cr-hero h1 { font-size: clamp(34px, 5vw, 62px); margin: 14px 0 20px; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.cr-hero-lead { font-size: clamp(15px,1.1vw,19px); line-height: 1.8; color: rgba(255,255,255,.94); max-width: 42em; margin: 0 auto; }
.cr-rule { display:inline-block; width: 60px; height: 2px; background: var(--gold); }
.cr-rule-center { display:block; width: 60px; height: 2px; background: var(--gold); margin: 4px auto 24px; }
.cr-intro { text-align: center; max-width: 780px; margin: 0 auto; padding: 96px 24px 8px; }
.cr-intro h2 { font-size: clamp(25px,2.7vw,36px); }
.cr-intro p { font-size: 17px; line-height: 1.85; color: var(--ink-soft); margin: 0; }
.cr-chapter { padding: 84px 0; }
.cr-chapter:nth-of-type(even of .cr-chapter) { background: var(--bg-soft); }
.cr-chapter-grid { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.cr-chapter--reverse .cr-chapter-media { order: 2; }
.cr-chapter-media { position: sticky; top: 96px; align-self: start; }
.cr-chapter-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; box-shadow: 0 26px 60px -30px rgba(29,28,25,.5); }
.cr-num { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-dark); }
.cr-chapter-text h2 { font-size: clamp(26px,2.9vw,42px); margin: 14px 0 6px; }
.cr-sub { font-family: var(--sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 26px; }
.cr-lead { font-style: italic; font-size: 19px; line-height: 1.6; color: var(--ink); margin: 0 0 20px; }
.cr-chapter-text p { line-height: 1.85; color: var(--ink-soft); margin: 0 0 16px; }
.cr-quote { border-left: 2px solid var(--gold); padding: 4px 0 4px 24px; margin: 30px 0; font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--ink); font-style: italic; }
.cr-gallery { max-width: 1240px; margin: 44px auto 0; padding: 0 24px; display: grid; gap: 16px; }
.cr-gallery-1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
.cr-gallery-2 { grid-template-columns: repeat(2,1fr); }
.cr-gallery-3 { grid-template-columns: repeat(3,1fr); }
.cr-gallery img { width:100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 2px; }
.cr-final { position: relative; text-align:center; color:#fff; overflow: hidden; padding: 104px 24px; }
.cr-final-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 50% 45%; }
.cr-final::after { content:''; position:absolute; inset:0; background: linear-gradient(rgba(12,10,8,.6), rgba(12,10,8,.72)); }
.cr-final-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.cr-final h2 { font-size: clamp(28px,3.2vw,46px); color:#fff; }
.cr-final p { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,.9); }
@media (max-width: 900px) {
  .cr-hero { min-height: 74svh; }
  .cr-chapter { padding: 60px 0; }
  .cr-chapter-grid { grid-template-columns: 1fr; gap: 32px; }
  .cr-chapter--reverse .cr-chapter-media { order: 0; }
  .cr-chapter-media { position: static; }
  .cr-chapter-media img { aspect-ratio: 4/5; max-height: 70svh; }
  .cr-gallery-3 { grid-template-columns: 1fr 1fr; }
}
/* stacked media (2-image creations) + footer image + mobile refinements */
.cr-media-stack { display: grid; gap: 16px; }
.cr-media-stack img { aspect-ratio: 4/5; }
@media (max-width: 600px) {
  .cr-hero { min-height: 78svh; }
  .cr-hero-content { padding: 0 20px 56px; }
  .cr-hero h1 { font-size: 34px; margin: 10px 0 16px; }
  .cr-hero-lead { font-size: 15px; }
  .cr-intro { padding: 60px 20px 4px; }
  .cr-intro h2 { font-size: 24px; }
  .cr-intro p { font-size: 16px; }
  .cr-chapter { padding: 48px 0; }
  .cr-chapter-grid { padding: 0 20px; gap: 26px; }
  .cr-chapter-text h2 { font-size: 26px; }
  .cr-lead { font-size: 17px; }
  .cr-quote { font-size: 18px; padding-left: 18px; margin: 22px 0; }
  .cr-chapter-media img { max-height: 66svh; }
  .cr-media-stack { gap: 12px; }
  .cr-gallery { margin-top: 28px; padding: 0 20px; }
  .cr-gallery-2, .cr-gallery-3 { grid-template-columns: 1fr; }
  .cr-final { padding: 72px 20px; }
  .cr-final h2 { font-size: 27px; }
}
/* ═══ Contact page ═══════════════════════════════════════════════════════ */
.ct-hero { text-align:center; padding: 72px 0 52px; background: var(--bg-soft); border-bottom:1px solid var(--hairline); }
.ct-hero h1 { font-size: clamp(30px,3.6vw,48px); margin: 6px 0 18px; }
.ct-hero-lead { max-width: 58ch; margin:0 auto; font-size:16px; line-height:1.8; color: var(--ink-soft); }
.ct-main { padding: 80px 0; }
.ct-grid { display:grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 72px; align-items:start; }
.ct-info h2, .ct-form-wrap h2 { font-size: clamp(24px,2.4vw,32px); margin: 0 0 26px; }
.ct-block { margin-bottom: 30px; }
.ct-block h3 { font-family: var(--sans); font-size: 11px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color: var(--gold-dark); margin:0 0 8px; }
.ct-block p { margin:0 0 4px; font-size:15.5px; line-height:1.7; color: var(--ink); }
.ct-block a { color: var(--ink); text-decoration:none; border-bottom:1px solid var(--gold); transition: color .2s; }
.ct-block a:hover { color: var(--gold-dark); }
.ct-note { font-size:13px !important; color: var(--ink-soft) !important; }
.ct-legal { border-top:1px solid var(--hairline); padding-top:18px; margin-top:34px; }
.ct-legal p { font-size:12.5px; color: var(--ink-soft); margin:0; letter-spacing:.4px; }
.ct-form-wrap { background:#fff; border:1px solid var(--hairline); padding: 40px 42px 44px; box-shadow: 0 30px 60px -40px rgba(29,28,25,.35); }
.ct-form-lead { font-size:14.5px; line-height:1.7; color: var(--ink-soft); margin:0 0 26px; }
.ct-form { display:flex; flex-direction:column; gap:18px; }
.ct-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ct-field { display:flex; flex-direction:column; gap:7px; }
.ct-field span { font-family: var(--sans); font-size:11px; font-weight:600; letter-spacing:1.8px; text-transform:uppercase; color: var(--ink); }
.ct-field span em { color: var(--gold-dark); font-style:normal; margin-left:2px; }
.ct-field span small { text-transform:none; letter-spacing:.3px; font-weight:400; color: var(--ink-soft); }
.ct-field input, .ct-field select, .ct-field textarea { font-family: var(--sans); font-size:15px; color: var(--ink); background: var(--bg-soft); border:1px solid var(--hairline); padding: 13px 14px; outline:none; transition: border-color .2s, background .2s; border-radius:0; -webkit-appearance:none; appearance:none; }
.ct-field select { background-image:url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23a08340' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer; }
.ct-field textarea { resize:vertical; min-height:120px; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { border-color: var(--gold); background:#fff; }
.ct-privacy, .pd-form-privacy { font-size:12.5px; line-height:1.5; color: var(--ink-soft); margin:0; }
.pd-form-privacy { margin-top:16px; }
.ct-privacy a, .pd-form-privacy a { text-decoration:underline; color:inherit; }
.ct-submit { align-self:flex-start; border:none; cursor:pointer; }
.ct-sent { font-size:14px; color: var(--gold-dark); margin:0; }
.ct-sent a { color: var(--gold-dark); font-weight:600; }
.ct-error { font-size:14px; color:#a3423a; margin:0; }
.ct-error a { color:#a3423a; font-weight:600; }
/* Honeypot: off-screen for humans, still submitted by naive bots. */
.ct-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ct-assure { background: var(--bg-soft); border-top:1px solid var(--hairline); padding: 56px 0; }
.ct-assure-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; text-align:center; }
.ct-assure-item h3 { font-size:18px; margin:0 0 8px; }
.ct-assure-item p { font-size:14px; line-height:1.7; color: var(--ink-soft); margin:0; max-width:34ch; margin-inline:auto; }
@media (max-width: 900px) {
  .ct-grid { grid-template-columns:1fr; gap:48px; }
  .ct-form-wrap { padding: 28px 22px 32px; }
  .ct-row { grid-template-columns:1fr; }
  .ct-assure-grid { grid-template-columns:1fr; gap:26px; }
  .ct-main { padding: 56px 0; }
}
/* ═══ Account ════════════════════════════════════════════════════════════ */
.pd-form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:700px){ .pd-form-row { grid-template-columns:1fr; gap:0; } }
.ac-section { padding: 56px 0 90px; }
.ac-narrow { max-width: 640px; }
.ac-card { border:1px solid var(--hairline); background: var(--bg-soft); padding: 40px; }
.ac-card h2 { font-size: 26px; margin: 0 0 12px; }
.ac-card p { font-size:15px; line-height:1.8; color: var(--ink-soft); margin:0 0 22px; }
.ac-card input[type=text], .ac-card input[type=email] { background:#fff; }
.ac-card label, #acProfileForm label { display:block; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color: var(--ink); margin-bottom:16px; }
.ac-card input, #acProfileForm input { display:block; width:100%; margin-top:7px; padding:13px 14px; font-family:var(--sans); font-size:14px; color:var(--ink); background:#fff; border:1px solid var(--hairline); outline:none; transition:border-color .2s; box-sizing:border-box; }
.ac-card input:focus, #acProfileForm input:focus { border-color: var(--gold); }
.ac-consent { display:flex !important; gap:12px; align-items:flex-start; text-transform:none !important; letter-spacing:0 !important; font-weight:400 !important; margin: 4px 0 22px !important; cursor:pointer; }
.ac-consent input { width:auto !important; margin:3px 0 0 !important; accent-color: var(--gold-dark); flex:0 0 auto; }
.ac-consent span { font-family: var(--sans); font-size:13.5px; line-height:1.7; color: var(--ink-soft); }
.ac-consent a { color: var(--gold-dark); }
.ac-consent-note { font-family: var(--sans); font-size:13px; line-height:1.65; color: var(--ink-soft); margin: 4px 0 22px; }
.ac-consent-note a { color: var(--gold-dark); text-decoration:underline; }
.ac-layout { display:grid; grid-template-columns: 220px minmax(0,1fr); gap: 64px; align-items:start; }
.ac-content { max-width: 760px; }
.ac-welcome { font-family: var(--serif); font-size: 22px; color: var(--ink); margin: 0 0 8px; }
.ac-favs { display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ac-fav-card { position:relative; display:flex; flex-direction:column; text-decoration:none; color: var(--ink); border:1px solid var(--hairline); background:#fff; }
.ac-fav-card img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.ac-fav-name { font-family: var(--serif); font-size:15px; padding: 12px 14px 2px; line-height:1.4; }
.ac-fav-price { font-size:13px; color: var(--gold-dark); padding: 2px 14px 14px; }
.ac-fav-rm { position:absolute; top:8px; right:8px; width:28px; height:28px; border:none; border-radius:50%; background:rgba(255,255,255,.92); color: var(--ink); font-size:16px; line-height:1; cursor:pointer; transition: color .2s; }
.ac-fav-rm:hover { color: #a33; }
.ac-empty, .ac-note { font-size:14px; line-height:1.75; color: var(--ink-soft); }
.ac-note { margin-top:14px; }
.ac-empty a, .ac-note a { color: var(--gold-dark); }
.ac-saved { font-family:var(--sans); font-size:13px; color: var(--gold-dark); margin-left:14px; }
#acProfileForm button, #ac-service .hj-btn { margin-top: 6px; }
.tc-section a.ac-btn, .ac-btn { color:#fff !important; }
.tc-section a.ac-btn:hover { color:#fff !important; }
.ac-share { margin-top: 22px; }
.ac-share-btn { display:inline-flex; align-items:center; gap:10px; padding: 13px 26px; font-size: 12px; }
#acShareNote { margin-top: 10px; color: var(--gold-dark); }
@media (max-width: 900px) {
  .ac-layout { grid-template-columns: 1fr; gap: 30px; }
  .ac-favs { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ac-card { padding: 26px 20px; }
}
.sf-section { padding: 56px 0 80px; }
.sf-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
.ac-fav-card { position:relative; display:flex; flex-direction:column; text-decoration:none; color: var(--ink); border:1px solid var(--hairline); background:#fff; transition: box-shadow .25s; }
.ac-fav-card:hover { box-shadow: 0 20px 40px -28px rgba(29,28,25,.45); }
.ac-fav-name { font-family: var(--serif); font-size:16px; padding: 14px 16px 2px; line-height:1.4; }
.ac-fav-price { font-size:13px; color: var(--gold-dark); padding: 2px 16px 4px; }
.ac-fav-tag { font-family: var(--sans); font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color: var(--ink-soft); padding: 0 16px 16px; }
.ac-empty { text-align:center; font-size:14px; color: var(--ink-soft); }
.ac-empty a { color: var(--gold-dark); }
@media (max-width: 700px){ .sf-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
/* ═══ Consent manager (HANDOFF-gdpr §2.2) ════════════════════════════════════ */
.cm-banner { position:fixed; z-index:200; left:24px; bottom:24px; width:380px; max-width:calc(100vw - 48px);
  display:flex; flex-direction:column; gap:16px;
  background:var(--bg); color:var(--ink); border:1px solid var(--hairline);
  padding:22px 24px; box-shadow:0 8px 30px -18px rgba(29,28,25,.55); }
.cm-banner[hidden] { display:none !important; }
.cm-banner-text { margin:0; font-family:var(--sans); font-size:13.5px; line-height:1.65; color:var(--ink-soft); }
.cm-banner-text a { color:var(--gold-dark); text-decoration:underline; }
.cm-banner-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }

.cm-btn { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
  padding:11px 18px; border:1px solid var(--ink); background:var(--bg); color:var(--ink);
  cursor:pointer; border-radius:0; transition:background .2s, color .2s, border-color .2s; }
.cm-btn:hover { border-color:var(--gold-dark); color:var(--gold-dark); }
.cm-btn-solid { background:var(--ink); color:#fff; border-color:var(--ink); }
.cm-btn-solid:hover { background:var(--gold-dark); border-color:var(--gold-dark); color:#fff; }
.cm-link { border:none; background:none; padding:6px 4px; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); text-decoration:underline; }
.cm-link:hover { color:var(--ink); }

.cm-modal { position:fixed; z-index:210; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; }
.cm-modal[hidden] { display:none !important; }
.cm-backdrop { position:absolute; inset:0; background:rgba(29,28,25,.5); }
.cm-panel { position:relative; z-index:1; width:560px; max-width:100%; max-height:86vh; overflow-y:auto;
  background:var(--bg); border:1px solid var(--hairline); padding:40px 42px 34px;
  box-shadow:0 30px 60px -40px rgba(29,28,25,.5); }
.cm-close { position:absolute; top:16px; right:18px; border:none; background:none; font-size:26px; line-height:1;
  color:var(--ink-soft); cursor:pointer; }
.cm-close:hover { color:var(--ink); }
.cm-panel h2 { font-family:var(--serif); font-size:26px; margin:0 0 12px; }
.cm-intro { font-family:var(--sans); font-size:14px; line-height:1.7; color:var(--ink-soft); margin:0 0 26px; }
.cm-intro a { color:var(--gold-dark); text-decoration:underline; }
.cm-cat { border-top:1px solid var(--hairline); padding:20px 0; }
.cm-cat-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cm-cat-name { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
.cm-always { font-family:var(--sans); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--gold-dark); flex:0 0 auto; }
.cm-cat-desc { font-family:var(--sans); font-size:13px; line-height:1.65; color:var(--ink-soft); margin:10px 0 0; }
.cm-none { font-family:var(--sans); font-size:12px; font-style:italic; color:var(--ink-soft); margin:10px 0 0; opacity:.8; }
.cm-none[hidden] { display:none; }
.cm-items { list-style:none; margin:10px 0 0; padding:0; }
.cm-items[hidden] { display:none; }
.cm-items li { font-family:var(--sans); font-size:12.5px; line-height:1.6; color:var(--ink-soft); padding:4px 0 4px 14px; position:relative; }
.cm-items li::before { content:"·"; position:absolute; left:2px; color:var(--gold-dark); }
.cm-toggle { position:relative; display:inline-flex; flex:0 0 auto; width:42px; height:24px; cursor:pointer; }
.cm-toggle input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.cm-track { position:absolute; inset:0; background:#d9d3c8; border-radius:999px; transition:background .2s; }
.cm-track::before { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.cm-toggle input:checked + .cm-track { background:var(--gold-dark); }
.cm-toggle input:checked + .cm-track::before { transform:translateX(18px); }
.cm-toggle input:disabled { cursor:not-allowed; }
.cm-toggle input:disabled + .cm-track { opacity:.5; }
.cm-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; padding-top:22px; border-top:1px solid var(--hairline); }
body.cm-open { overflow:hidden; }
@media (max-width: 560px) {
  .cm-banner { left:0; right:0; bottom:0; width:auto; max-width:none; border-left:none; border-right:none; border-bottom:none; }
  .cm-panel { padding:28px 22px 24px; }
  .cm-actions .cm-btn { flex:1 1 auto; }
}