/* Saluxe styles, from the mockups' site.css (saluxe/website/mockups/landing-page/).
   WordPress additions are at the end, under "WordPress". */
/* Product themes: exact names and values from the exported saluxe.js. */
:root {
  --theme-ground: #0F1219;
  --theme-raised: #171B24;
  --theme-ink: #ECEEF1;
  --theme-ink-soft: #A3A9B5;
  --theme-line: #2B303B;
  --theme-accent: #5B4C8E;
  --theme-accent-ink: #ABA3D3;
  --theme-twilight: #4B566E;
  --theme-tint-1: #5B4C8E;
  --theme-tint-2: #625953;
  --theme-tint-3: #25427D;
  --theme-tint-4: #D9DEE5;
  --theme-step-1: #323D53;
  --theme-step-2: #2C3549;
  --theme-step-3: #262E3F;
  --theme-step-4: #202735;
  --theme-step-5: #1A1F2B;
  --theme-step-6: #151922;
}
html[data-product="morning"] {
  --theme-ground: #F2E6E8;
  --theme-raised: #F8F0F1;
  --theme-ink: #2A1F24;
  --theme-ink-soft: #65525A;
  --theme-line: #E0CDD1;
  --theme-accent: #C98E9B;
  --theme-accent-ink: #874657;
  --theme-twilight: #E9D7DA;
  --theme-tint-1: #E3B9C2;
  --theme-tint-2: #D8D4D6;
  --theme-tint-3: #C9D3E0;
  --theme-tint-4: #F7F5F5;
  --theme-step-1: #F8F0F1;
  --theme-step-2: #F7EEEF;
  --theme-step-3: #F6EDEE;
  --theme-step-4: #F5EBEC;
  --theme-step-5: #F4E9EB;
  --theme-step-6: #F3E8E9;
}

/* Saluxe frame: color comes only from the product theme above.
   Type: 14, 17, 20, 24, 29, 35, 44, 51, 73, 88px.
   Spacing uses the 4px grid; fluid section padding follows the brief. */
html {
  --font-display: "Noto Serif Display", Georgia, serif;
  --font-body: "Mona Sans", system-ui, sans-serif;
  --frame-line: color-mix(in oklch, var(--theme-ink) 14%, transparent);
  --control-line: color-mix(in oklch, var(--theme-ink) 45%, transparent);
  --section-space: clamp(72px, 11vw, 144px);
  --minor-section-space: clamp(40px, 5.5vw, 72px);
  background: var(--theme-ground);
  color: var(--theme-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  scroll-behavior: smooth;
  scroll-padding-top: 72px; /* The fixed header's height, so anchors land below it. */
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
a {
  color: var(--theme-accent-ink);
  text-decoration: underline;
  /* Font-provided underline metrics draw a heavy bar in Firefox. */
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 400ms ease;
}
a:hover { color: var(--theme-ink); }
:focus-visible { outline: 2px solid var(--theme-accent-ink); outline-offset: 4px; }
h1, h2, h3 { font-family: var(--font-display); }
h1, h2 { font-weight: 300; text-wrap: balance; }
h2 { font-size: clamp(35px, 3.54vw, 51px); line-height: 1.1; letter-spacing: -.01em; }
h3 { font-size: 24px; font-weight: 400; line-height: 1.2; }
p { text-wrap: pretty; }
.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 28px; }
.section { padding-block: var(--section-space); }
.section p, .section dl { max-width: 640px; }
.text-column { max-width: 640px; }
.section-heading { max-width: 640px; margin-bottom: 32px; }
/* One shared split: five image columns, one empty column, six text columns.
   The image comes first in the DOM and on narrow screens. */
.split { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); align-items: start; }
.split-image { grid-column: 1 / span 5; grid-row: 1; min-width: 0; }
.split-copy { grid-column: 7 / span 6; grid-row: 1; min-width: 0; }
.split-reverse > .split-image { grid-column: 8 / span 5; }
.split-reverse > .split-copy { grid-column: 1 / span 6; }
.small { font-size: 14px; line-height: 1.45; }
.soft { color: var(--theme-ink-soft); }
.lead { font-size: 20px; line-height: 1.5; }
.accent { color: var(--theme-accent-ink); font-style: italic; }
.note {
  padding: 0 4px;
  border: 1px dashed color-mix(in oklch, currentColor 45%, transparent);
  border-radius: 2px;
  background: color-mix(in oklch, currentColor 7%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 56px;
  padding: 0 24px;
  background: var(--theme-ink);
  color: var(--theme-ground);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 400ms ease;
}
.button:hover { background: color-mix(in oklch, var(--theme-ink) 84%, var(--theme-ground)); color: var(--theme-ground); }
.button:active { background: color-mix(in oklch, var(--theme-ink) 72%, var(--theme-ground)); }
/* The secondary button: an outline, for actions that must not compete with the main one. */
.button-secondary { border: 0; background: transparent; color: var(--theme-ink); box-shadow: inset 0 0 0 1px var(--control-line); font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .08em; cursor: pointer; }
.button-secondary:hover { background: var(--theme-ink); color: var(--theme-ground); }
/* The SALUXE logo (Graphics/Logo in pCloud) is inlined so it takes the theme's ink; its
   original plum disappears on Nightfall's dark. Below 20px its thin strokes fade on 1x screens. */
.logo { display: block; width: auto; height: 20px; color: var(--theme-ink); }
.logo-link { display: block; padding-block: 12px; color: var(--theme-ink); }
/* The header floats over the hero photo. On desktop it stays fixed, turns solid once the page
   scrolls and hides its action while the order panel is in view; on mobile it scrolls away and
   the sticky bar carries the action. */
.site-header { position: fixed; inset: 0 0 auto; z-index: 30; border-bottom: 1px solid transparent; transition: background-color 300ms ease, border-color 300ms ease; }
.site-header.is-solid { background: var(--theme-ground); border-bottom-color: var(--frame-line); }
.header-action { display: flex; align-items: center; gap: 24px; justify-self: end; transition: opacity 300ms ease, visibility 300ms; }
.site-header.is-at-order .header-action { opacity: 0; visibility: hidden; }
/* One row: the logo, the links centred, the action on the right (option B of three; Henrik,
   23 October 2026). */
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 72px; gap: 32px; }
/* About, Contact and the phone are trust signals for a new shop (Henrik, 23 October 2026).
   Uppercase and tracked, they echo the logo's spaced capitals. They stay visible while the
   action hides at the order panel. */
.header-nav { display: flex; align-items: center; gap: 32px; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
.header-nav a { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--theme-ink); text-decoration: none; }
.header-nav a:hover { text-decoration: underline; }
/* A thin line icon marks the number as a phone; its 1.5 stroke matches the logo's thin strokes. */
.phone-icon { flex: none; width: 14px; height: 14px; }
/* A lighter outline button, so the header supports the hero's solid button instead of repeating it. */
.site-header .button { min-height: 44px; padding: 0 20px; background: transparent; color: var(--theme-ink); box-shadow: inset 0 0 0 1px var(--control-line); font-size: 13px; }
.site-header .button:hover { background: var(--theme-ink); color: var(--theme-ground); }

/* Photograph placeholders retain D's mineral tints and diagonal texture.
   These visible production notes are the only other monospace text. */
.shot {
  --shot-ratio: 4 / 5;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  aspect-ratio: var(--shot-ratio);
  padding: 16px;
  gap: 8px;
  background-color: var(--theme-raised);
  background-image:
    radial-gradient(120% 80% at 50% 28%, color-mix(in oklch, var(--theme-ink) 8%, transparent), transparent 62%),
    repeating-linear-gradient(135deg, color-mix(in oklch, var(--theme-ink) 6%, transparent) 0 1px, transparent 1px 12px);
  color: var(--theme-ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.4;
}
.shot-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; letter-spacing: .06em; }
.shot-notes { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.shot-description { max-width: 34ch; text-wrap: pretty; }
.placeholder-tag { padding: 0 4px; border: 1px solid var(--frame-line); }
.tint-1 { background-color: color-mix(in oklch, var(--theme-tint-1) 20%, var(--theme-raised)); }
.tint-2 { background-color: color-mix(in oklch, var(--theme-tint-2) 20%, var(--theme-raised)); }
.tint-3 { background-color: color-mix(in oklch, var(--theme-tint-3) 20%, var(--theme-raised)); }
/* D's soft ink falls to 3.54:1 over this pale tint and its texture.
   Full theme ink keeps the required visible notes above AA. */
.tint-4 { background-color: color-mix(in oklch, var(--theme-tint-4) 20%, var(--theme-raised)); color: var(--theme-ink); }
.ratio-portrait { --shot-ratio: 3 / 4; }
.ratio-mobile { display: none; }
/* Generated draft photos (images/; see export-placeholder-images.py) cover the placeholder.
   A missing file removes itself, so the labeled placeholder shows instead. */
.shot-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.darija-media [hidden] { display: none; }
.shot:has(.shot-photo) .shot-head, .shot:has(.shot-photo) .shot-description { display: none; }
.shot:has(.shot-photo) .shot-notes { position: relative; margin-top: auto; }
.hero-shot:has(.shot-photo) .shot-notes { margin-top: 0; }
.shot:has(.shot-photo) .placeholder-tag { background: color-mix(in oklch, var(--theme-ground) 70%, transparent); color: var(--theme-ink); }

.hero { position: relative; background: var(--theme-step-1); }
.hero-photo { position: relative; }
/* The top padding clears the floating header for the placeholder notes and tag. */
.hero-shot { --shot-ratio: 16 / 9; justify-content: flex-start; padding-top: 88px; }
/* Wide screens: 16:9 of the width outgrew the window (1072px in a 1920 x 960 window, 30 October
   2026), pushing the button below the fold. Cap the hero at the window, cropping the photo's
   empty top and bottom. The 700px floor limits how far the headline reaches into the products
   on short laptop windows (at 640px it covered the selenite at 1366 x 640; at 700px it only
   touches its tip), and the button still ends at 628px. */
@media (min-width: 980px) { .hero-shot { max-height: max(100svh, 700px); } }
/* Darkens the top of the photo so the floating logo and price stay legible over light objects. */
.hero-photo::after { content: ""; position: absolute; inset: 0 0 auto; height: 160px; pointer-events: none; background: linear-gradient(to bottom, color-mix(in oklch, var(--theme-step-1) 85%, transparent), transparent); }
.hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--theme-step-1) 0%, color-mix(in oklch, var(--theme-step-1) 90%, transparent) 34%, transparent 72%); }
.hero-content { position: absolute; inset: auto 0 0; }
.hero-inner { padding-bottom: 72px; }
/* Above 1600px the photo keeps growing while the headline stops at 88px. Lift the text by
   up to 88px, keeping it clear of the selenite. This must follow the base padding rule:
   placing it above that rule silently cancelled the desktop lift (31 October 2026). */
@media (min-width: 980px) { .hero-inner { padding-bottom: clamp(72px, calc(72px + (100vw - 1600px) * .2), 160px); } }
/* Full ink, not soft: over the draft hero photo the soft label measured 3.08:1 at 1440px. */
.hero-label { margin-bottom: 24px; font-size: 14px; line-height: 1.4; }
/* 8:4 leaves the Noto italic phrase on one line beside the purchase group. */
.hero-grid { display: grid; grid-template-columns: minmax(0,8fr) minmax(0,4fr); gap: 0 48px; }
.hero h1 { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; grid-column: 1 / -1; grid-row: 1 / 3; font-size: clamp(44px, 6.1vw, 88px); line-height: 1.06; letter-spacing: -.015em; text-wrap: initial; }
.hero-title-line, .hero h1 .accent { display: block; }
.hero-title-line { grid-column: 1 / -1; grid-row: 1; }
/* Both headline lines span the full width, so the italic line never breaks beside the action. */
.hero h1 .accent { grid-column: 1 / -1; grid-row: 2; align-self: end; }
.hero-lead { grid-column: 1; grid-row: 3; max-width: 30em; margin-top: 12px; }
/* Sits beside the lead, below both headline lines, and aligns with the lead's last line. */
.hero-action { grid-column: 2; grid-row: 3; align-self: end; padding-top: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.hero-price { margin-bottom: 16px; line-height: 1.4; }
.assurance { background: var(--theme-step-2); border-block: 1px solid var(--frame-line); }
.assurance-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-block: 0; padding-block: var(--minor-section-space); list-style: none; }
/* Centered in three equal columns on desktop, so short items do not leave the strip leaning left (Henrik, 26 October 2026). */
.assurance-list li { padding: 4px 24px; font-size: 14px; line-height: 1.4; text-align: center; }
.assurance-list li + li { border-left: 1px solid var(--frame-line); }
.evening { background: var(--theme-step-4); }
.evening-copy { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
/* Collection first (strategy 4.3): the stones follow the hero, then the evening story. */
.inside { background: var(--theme-step-3); }
.inside-intro { max-width: 32em; margin-top: 12px; }
.stone-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 48px 24px; margin-top: 64px; }
.stone-card { display: grid; align-content: start; gap: 24px; min-width: 0; }
.stone-meta { margin-top: 12px; }
.stone-description { margin-top: 8px; }
/* The set's pieces sit beside a tall 4:5 photograph; centering keeps a short list from stranding its lower half. */
.set-split { margin-top: 64px; align-items: center; }
.extras { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
.extra-card h4 { margin: 0; font-family: var(--font-body); font-size: 17px; font-weight: 500; line-height: 1.3; }
.extra-card p { margin-top: 4px; }
.stock-note { margin-top: 32px; }
.ritual { background: var(--theme-step-5); }
/* The ritual is optional, so its steps stay light: small numbers and hairlines. */
.steps { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: baseline; gap: 4px 16px; border-top: 1px solid var(--frame-line); padding-top: 20px; }
.step-number { grid-column: 1; grid-row: 1 / 3; display: block; color: var(--theme-accent-ink); font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.2; }
.steps h3 { grid-column: 2; font-family: var(--font-body); font-size: 17px; font-weight: 500; line-height: 1.3; }
.steps p { grid-column: 2; }
.breathing-note { margin-top: 32px; }
.optional-note { margin-top: 16px; }
.darija { background: var(--theme-step-6); }
.darija-copy > p { margin-top: 12px; }
.darija-copy > p:first-child { margin-top: 0; }
.darija-copy > p + p { margin-top: 16px; }
.darija-quote { margin-top: 32px; }
.quote-mark { display: block; color: var(--theme-accent-ink); font-family: var(--font-display); font-size: 51px; font-weight: 400; line-height: 1.05; }
/* Upright display type: the italic accent is kept for the hero line (Typography). */
.darija-quote-text { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.35; }
.darija-quote-by { margin-top: 16px; }
.darija-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 24px; }
.order, .faq, .closing, .site-footer { background: var(--theme-ground); }
/* Order and FAQ share the darkest ground, so their paddings would add up to one 288px gap. */
.order + .faq { padding-top: 0; }
.order-panel { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); border: 1px solid var(--frame-line); }
.order-copy { grid-column: 2; grid-row: 1; background: var(--theme-raised); padding: 48px; }
.order-copy h2 { font-size: clamp(29px, 2.43vw, 35px); line-height: 1.15; }
.order-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin-top: 12px; }
.price-display { font-family: var(--font-display); font-size: 44px; font-weight: 300; line-height: 1.1; }
.order-facts { margin-top: 32px; }
.order-facts > div, .purchase-terms { padding-block: 16px; border-top: 1px solid var(--frame-line); }
.order-facts dt { color: var(--theme-ink-soft); font-size: 14px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.order-facts dd { margin-top: 8px; text-wrap: pretty; }
.includes { margin: 0; padding: 0; list-style: none; }
.includes li + li { margin-top: 8px; }
.includes strong { font-weight: 500; }
.purchase-terms { border-bottom: 1px solid var(--frame-line); }
.order-button { display: flex; width: 100%; margin-top: 32px; }
.checkout-note { margin-top: 12px; }
/* Payment marks: one outlined chip each, in soft ink like the footer's social icons, so they inform without competing with the button.
   48px chips with 6px gaps keep all five on one row in the 269px order panel of a 375px phone. */
.payment-methods { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.checkout-note + .payment-methods { margin-top: 12px; }
.payment-methods li { display: flex; align-items: center; justify-content: center; width: 48px; height: 32px; border: 1px solid var(--control-line); border-radius: 4px; color: var(--theme-ink-soft); }
.payment-methods svg { width: 30px; height: 30px; fill: currentColor; }
.gift-copy { margin-top: 32px; }
.order-image { position: relative; grid-column: 1; grid-row: 1; min-width: 0; }
.gift-shot { position: absolute; inset: 0; height: 100%; aspect-ratio: 4 / 5; }
.crop-note { display: inline; }
/* Honest proof under the order panel: Darija's unedited phone photos of a packed box, beside the studio photos. */
.real-photos { margin-top: 64px; }
.real-photos-intro { max-width: 32em; margin-top: 12px; }
.real-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 32px; }
.ratio-square { --shot-ratio: 1 / 1; }
.real-caption { margin-top: 12px; }
.faq-list { margin-top: 32px; border-top: 1px solid var(--frame-line); }
.faq details { border-bottom: 1px solid var(--frame-line); }
.faq summary { min-height: 80px; padding: 16px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { display: flex; align-items: center; justify-content: space-between; gap: 24px; line-height: 1.3; }
.faq-toggle { display: flex; flex: 0 0 44px; align-items: center; justify-content: center; height: 44px; border: 1px solid var(--frame-line); color: var(--theme-accent-ink); font-family: var(--font-body); font-size: 20px; line-height: 1.3; }
.faq-toggle::before { content: "+"; }
details[open] .faq-toggle::before { content: "−"; }
.faq-answer { max-width: 40em; padding: 0 68px 24px 0; color: var(--theme-ink-soft); }
.closing { padding-block: var(--minor-section-space); border-top: 1px solid var(--frame-line); }
.closing-inner { text-align: center; }
.closing-inner > .text-column { margin-inline: auto; }
.closing h2 { max-width: 12em; margin-inline: auto; font-size: clamp(44px, 5.07vw, 73px); line-height: 1.06; letter-spacing: -.015em; }
.closing-action { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; margin-top: 32px; }
.closing-price { font-family: var(--font-display); font-size: 29px; font-weight: 300; line-height: 1.1; }
.about-contact { padding-block: var(--minor-section-space); border-top: 1px solid var(--frame-line); background: var(--theme-ground); }
.about-contact-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 48px 24px; }
#about { grid-column: 1 / span 6; }
#contact { grid-column: 8 / span 5; }
.about-contact h2 { margin-bottom: 16px; font-size: clamp(29px, 2.43vw, 35px); font-weight: 300; line-height: 1.15; }
.contact-list { display: grid; gap: 16px; }
.contact-list dt { color: var(--theme-ink-soft); font-size: 14px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.contact-list dd { margin-top: 4px; }
.contact-write { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 32px 24px; margin-top: var(--minor-section-space); }
/* The divider is a grid row, not the container's border, so it stops at the content edges. */
.contact-write::before { content: ""; grid-column: 1 / -1; border-top: 1px solid var(--frame-line); margin-bottom: calc(var(--minor-section-space) - 32px); }
.contact-write-intro { grid-column: 1 / span 5; }
.contact-write-form { grid-column: 7 / span 6; }
.contact-form { display: grid; gap: 16px; }
.contact-form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 16px; border: 1px solid var(--control-line); background: var(--theme-raised); color: var(--theme-ink); font: inherit; }
.contact-form textarea { min-height: 144px; resize: vertical; }
.contact-form ::placeholder { color: var(--theme-ink-soft); opacity: 1; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--theme-accent-ink); }
.contact-form .button { justify-self: start; }
.contact-privacy { margin-top: 16px; }
.contact-note { margin: 0; }
.contact-note:not(:empty) { margin-top: 16px; padding: 16px; border: 1px solid var(--theme-accent-ink); background: var(--theme-raised); color: var(--theme-ink); font-size: 16px; line-height: 1.5; }
.contact-note.is-error { border-color: var(--theme-ink); }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.site-footer { border-top: 1px solid var(--frame-line); padding: 64px 0 48px; }
.footer-grid { display: grid; grid-template-columns: minmax(0,2fr) repeat(2,minmax(0,1fr)); gap: 32px; }
/* Column labels match the contact list's small uppercase labels. */
.footer-heading { margin-bottom: 4px; color: var(--theme-ink-soft); font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; }
.footer-links a { display: flex; align-items: center; min-height: 44px; }
.footer-company p { margin-top: 16px; }
/* Outlined round icons as on Crystal Cleanse: 44px targets, soft ink, full ink on hover. */
.footer-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.footer-socials a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--control-line); border-radius: 50%; color: var(--theme-ink-soft); }
.footer-socials a:hover { border-color: var(--theme-ink); color: var(--theme-ink); }
.footer-socials svg { width: 17px; height: 17px; fill: currentColor; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--frame-line); }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.sticky-bar { display: none; }
/* Policy pages: no hero, so the header is solid from the start (class is-solid in the markup) and
   the page starts below it. One 640px reading column, like the sales page's text. */
.policy { padding: calc(72px + var(--minor-section-space)) 0 var(--section-space); background: var(--theme-ground); }
.policy-head { max-width: 640px; padding-bottom: 32px; border-bottom: 1px solid var(--frame-line); }
.policy-label { margin-bottom: 16px; color: var(--theme-ink-soft); font-size: 14px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.policy h1 { font-size: clamp(44px, 5.07vw, 73px); line-height: 1.06; letter-spacing: -.015em; }
.policy-meta { margin-top: 16px; }
.policy-draft { margin-top: 12px; }
.policy-body { max-width: 640px; }
.policy-body h2 { margin-top: 48px; font-size: clamp(29px, 2.43vw, 35px); line-height: 1.15; }
.policy-body h3 { margin-top: 32px; }
.policy-body h2 + p, .policy-body h2 + ul, .policy-body h2 + ol, .policy-body h3 + p, .policy-body h3 + ul { margin-top: 12px; }
.policy-body p, .policy-body ul, .policy-body ol, .policy-body dl, .policy-body .policy-table { margin-top: 16px; }
.policy-body > :first-child { margin-top: 32px; }
.policy-body ul, .policy-body ol { padding-left: 1.25em; }
.policy-body li + li { margin-top: 8px; }
.policy-body li::marker { color: var(--theme-ink-soft); }
/* Facts such as the seller's details: small uppercase labels, as in the sales page's contact list. */
.policy-body dt { margin-top: 16px; color: var(--theme-ink-soft); font-size: 14px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.policy-body dt:first-child { margin-top: 0; }
.policy-body dd { margin-top: 4px; }
/* A plain table for facts such as data, purpose and retention; it scrolls inside itself on phones. */
.policy-table { overflow-x: auto; }
.policy-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.policy-table th, .policy-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--frame-line); text-align: left; vertical-align: top; }
.policy-table th { color: var(--theme-ink-soft); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
/* Darija's page: the policy head, then the sales page's split with her portrait beside the text. */
.profile-split { margin-top: 48px; }
/* Trim ceiling space in layout; retain the uncropped source for WordPress exports. */
.profile-portrait { overflow: hidden; }
.profile-portrait .shot-photo { transform: scale(1.12); transform-origin: 50% 65%; }
.profile-split .policy-body > :first-child { margin-top: 0; }
.profile-split .policy-body h2 { margin-top: 40px; }
.profile-action { margin-top: 40px; }

@media (max-width: 979.98px) {
  .hero-content { position: static; }
  .hero-inner { padding-top: 32px; }
  .hero-scrim { display: none; }
  .hero-grid { grid-template-columns: minmax(0,1fr); row-gap: 32px; }
  .hero h1, .hero-lead, .hero-action { grid-column: auto; grid-row: auto; }
  .hero-action { padding-top: 0; }
  .hero h1 { display: block; }
  .hero-lead { margin-top: -20px; } /* 32px grid gap minus 20px = the shared 12px heading-to-text rhythm. */
  .stone-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .split { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .split > .split-image, .split > .split-copy { grid-column: 1; grid-row: auto; }
  .split-copy { max-width: 640px; }
  .order-panel { grid-template-columns: minmax(0,1fr); }
  .order-copy, .order-image { grid-column: auto; grid-row: auto; }
  .gift-shot { position: relative; height: auto; }
  .crop-note { display: none; }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-company { grid-column: 1 / -1; }
  .header-nav .header-phone { display: none; }
  #about, #contact, .contact-write-intro, .contact-write-form { grid-column: 1 / -1; }
}
@media (max-width: 759.98px) {
  /* Phones show only the logo and the links: with the price as well, the row ran the logo into
     About at 412px (Henrik, 30 October 2026). The price follows in the hero and sticky bar. */
  .header-action { display: none; }
  html { scroll-padding-top: 0; }
  .site-header { position: absolute; }
  .logo { height: 16px; }
  .contact-form-row { grid-template-columns: minmax(0,1fr); }
  .policy { padding-top: calc(72px + 32px); }
  /* On phones each table row becomes a block, each cell labeled from its column (data-label). */
  .policy-table thead { display: none; }
  .policy-table table, .policy-table tbody, .policy-table tr, .policy-table td { display: block; }
  .policy-table tr { padding-block: 16px; border-bottom: 1px solid var(--frame-line); }
  .policy-table td { padding: 4px 0; border: 0; }
  .policy-table td::before { content: attr(data-label); display: block; color: var(--theme-ink-soft); letter-spacing: .08em; text-transform: uppercase; }
  .header-inner { grid-template-columns: auto auto; justify-content: space-between; gap: 16px; }
  .header-nav { gap: 16px; font-size: 12px; letter-spacing: .08em; }
  /* The full 4:5 phone photograph, edge to edge. Its composition (v2, 30 October 2026) leaves
     clear backdrop above the shell for the overlaid header, so it needs no shorter frame. */
  .hero-shot { --shot-ratio: 4 / 5; }
  .ratio-desktop { display: none; }
  .ratio-mobile { display: inline; }
  .hero-action { align-items: stretch; }
  .assurance-list { grid-template-columns: minmax(0,1fr); }
  .assurance-list li { padding: 16px 0; text-align: left; }
  .assurance-list li + li { border-left: 0; border-top: 1px solid var(--frame-line); }
  /* Stack stone shots, retaining their ratios and the 14px type floor. */
  .stone-grid { grid-template-columns: minmax(0,1fr); row-gap: 32px; }
  /* Two columns, so six squares do not make one very long scroll. */
  .real-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 16px; }
  .order-copy { padding: 32px 24px; }
  .site-footer { padding-bottom: calc(144px + env(safe-area-inset-bottom)); }
  .sticky-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 80px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--theme-raised);
    color: var(--theme-ink);
    border-top: 1px solid var(--frame-line);
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 700ms cubic-bezier(.2,.6,.2,1), opacity 700ms ease;
  }
  .sticky-bar.is-visible { transform: translateY(0); opacity: 1; visibility: visible; }
  .sticky-label { white-space: nowrap; }
}
/* WordPress: Blocksy's "Skip to content" link stays hidden until keyboard focus, as
   WordPress's screen-reader-text class expects; Blocksy's own rule for it is dequeued. */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { z-index: 100000; top: 8px; left: 8px; width: auto; height: auto; padding: 12px 16px; clip-path: none; background: var(--theme-ink); color: var(--theme-ground); }
/* Until the shop opens, the order panel's button is plain text in the button's shape:
   it keeps its place in the design but does nothing on hover or click. */
.order-button.is-coming-soon, .order-button.is-coming-soon:hover { background: transparent; color: var(--theme-ink); box-shadow: inset 0 0 0 1px var(--control-line); cursor: default; }
/* Logged in, the fixed header sits below the admin bar (32px; 46px below 783px, where the
   bar stops being fixed under 601px and the header is absolute anyway). */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .darija-media video { display: none; }
  .darija-media img { display: block; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The cookie banner: one strip above everything at the bottom, Accept and Decline the
   same outline button so declining is as easy as accepting (Cookie Policy). */
.consent { position: fixed; inset: auto 16px 16px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; max-width: 880px; margin-inline: auto; padding: 20px 24px; border: 1px solid var(--frame-line); background: var(--theme-raised); color: var(--theme-ink); box-shadow: 0 12px 40px rgb(0 0 0 / .35); }
.consent[hidden] { display: none; }
.consent p { flex: 1 1 320px; }
.consent-actions { display: flex; gap: 12px; }
.consent-actions .button { min-height: 48px; }
.footer-button { display: flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--theme-accent-ink); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; transition: color 400ms ease; }
.footer-button:hover { color: var(--theme-ink); }
@media (max-width: 759.98px) {
  .consent { inset: auto 0 0; padding: 16px; border-inline: 0; border-bottom: 0; }
  .consent-actions { width: 100%; }
  .consent-actions .button { flex: 1; }
}