/* Jashan shop, option B "fashion house" (D-057). Classes only: the CSP forbids inline styles. */
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/bodoni-moda-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/bodoni-moda-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* The other bundled fonts (BrandDefinition::FONTS), latin only. A browser downloads only the ones the brand's design uses. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url('../fonts/oswald-latin.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/fira-sans-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/fira-sans-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/fira-sans-600-latin.woff2') format('woff2'); }

:root {
  --white: #ffffff; --ink: #111111; --text-2: #3a3a3a; --muted: #5e5e5e; --line: #ececec; --line-strong: #cfcfcf;
  --footer: #f7f7f7; --accent: #8e1e4a; --focus: #f0b429;
  --serif: 'Bodoni Moda', Georgia, serif; --sans: 'Jost', 'Segoe UI', system-ui, sans-serif;
  --page: 1400px; --gutter-default: 24px; --gutter: var(--gutter-default);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page-bg, var(--white)); color: var(--ink); font: var(--text-weight, 400) calc(15px * var(--text-current, var(--text-scale, 1)))/var(--body-leading, 1.6) var(--sans); }
a { color: var(--ink); }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-weight: var(--heading-weight, 500); color: var(--heading-ink, inherit); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--white); padding: 8px 16px; z-index: 10; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.caps { letter-spacing: 0.12em; text-transform: uppercase; }
.muted { color: var(--muted); }
.placeholder { color: var(--muted); font-style: italic; }

/* Header */
.announce { background: var(--side, var(--ink)); color: var(--banner-ink, var(--side-ink, var(--white))); font-size: 12px; text-align: center; padding: 9px 16px; letter-spacing: 0.12em; text-transform: uppercase; }
.site-header { border-bottom: 1px solid var(--line); background: var(--header-bg, var(--white)); }
/* The name gets all the room between the icons. Both sides keep room for three 44px icons (two on phones), so it stays in the middle. */
.bar { display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr); align-items: center; padding-top: var(--header-padding, 14px); padding-bottom: var(--header-padding, 14px); }
.bar-left, .bar-right { display: flex; gap: 4px; align-items: center; }
.bar-right { justify-self: end; }
.icon { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; position: relative; }
/* The name wraps only between words. One too long for its space shrinks instead: shop.js lowers --wordmark-fit, which scales the size and,
   faster, the letter spacing. */
.wordmark { justify-self: center; text-align: center; font-family: var(--serif); font-size: calc(var(--wordmark-size, calc(30px * var(--heading-current, var(--heading-scale, 1)))) * var(--wordmark-fit, 1)); font-weight: 500; letter-spacing: calc(0.42em * var(--wordmark-fit, 1)); padding-left: calc(0.42em * var(--wordmark-fit, 1)); text-decoration: none; color: var(--ink); }
.wordmark-with-logo { display: inline-flex; align-items: center; gap: 0.42em; padding-left: 0; letter-spacing: normal; }
.wordmark-logo { width: var(--logo-custom-height, 38px); height: var(--logo-custom-height, 38px); flex-shrink: 0; object-fit: contain; border-radius: 3px; }
.wordmark-text { letter-spacing: calc(0.42em * var(--wordmark-fit, 1)); margin-right: calc(-0.42em * var(--wordmark-fit, 1)); }
.brand-logo { display: block; height: var(--logo-height, 44px); width: auto; max-width: calc(var(--logo-height, 44px) * 5); object-fit: contain; }
.main-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; padding: 4px var(--gutter) 14px; font-size: 13px; }
.main-nav a { text-decoration: none; }
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; z-index: 5; top: 48px; left: 0; width: min(320px, 90vw); background: var(--white); border: 1px solid var(--line); padding: 12px 16px; }
.menu-panel a { display: block; padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu-panel .depth-1 { padding-left: 16px; }
.menu-panel .depth-2, .menu-panel .depth-3 { padding-left: 32px; }

/* Home */
.hero { position: relative; background: var(--side, #6e4f45); color: var(--banner-ink, var(--side-ink, var(--white))); min-height: var(--banner-height, 520px); display: flex; align-items: flex-end; justify-content: center; text-align: center; padding: 48px var(--gutter) 56px; }
/* Without max-width the minimum height, carried through the aspect ratio, makes tablet banners wider than the screen. */
.hero-with-image { color: var(--banner-ink, var(--side-ink, var(--white))); min-height: var(--banner-height, 420px); aspect-ratio: var(--banner-aspect, 1942 / 809); max-width: 100%; overflow: hidden; }
.hero-image { position: absolute; inset: 0; }
.hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--banner-x, 50%) var(--banner-y, 0%); }
/* Photos are tinted with the brand's banner colour where the words sit, so every colour theme shows on them. */
.hero-with-image::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--banner-overlay-opacity, 1); background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--side, #000) 20%, transparent) 68%, color-mix(in srgb, var(--side, #000) 60%, transparent) 100%); }
.hero-copy { position: relative; z-index: 2; }
.hero-eyebrow { font-size: calc(13px * var(--text-current, var(--text-scale, 1))); letter-spacing: 0.3em; text-transform: uppercase; }
.hero h1, .hero-title { font-family: var(--serif); font-size: clamp(calc(40px * var(--heading-current, var(--heading-scale, 1))), calc(7vw * var(--heading-current, var(--heading-scale, 1))), calc(72px * var(--heading-current, var(--heading-scale, 1)))); line-height: 1; letter-spacing: var(--heading-tracking, 0.04em); text-transform: var(--heading-case, uppercase); margin: 12px 0 24px; }
/* Slides share one grid cell. The new slide fades in on top; the old one stays until the fade ends, then hides. */
/* The slides, stacked in one track: the chosen one fades in over the others (up to five; the copy of the first only slides). */
.hero-carousel { position: relative; display: grid; }
.hero-track { display: grid; min-width: 0; touch-action: pan-y pinch-zoom; }
.hero-slide { grid-area: 1 / 1; z-index: 0; opacity: 0; visibility: hidden; transition: opacity 0s 0.8s, visibility 0s 0.8s; }
:root:not([data-banner-motion="slide"]) .hero-clone { display: none; }
.hero-clone .hero-title { font-weight: var(--heading-weight, 500); }
.hero-slide-1, .hero-carousel:has(#hero-slide-2:checked) .hero-slide-2, .hero-carousel:has(#hero-slide-3:checked) .hero-slide-3,
.hero-carousel:has(#hero-slide-4:checked) .hero-slide-4, .hero-carousel:has(#hero-slide-5:checked) .hero-slide-5 { z-index: 1; opacity: 1; visibility: visible; transition: opacity 0.8s ease; }
.hero-carousel:has(:is(#hero-slide-2, #hero-slide-3, #hero-slide-4, #hero-slide-5):checked) .hero-slide-1 { z-index: 0; opacity: 0; visibility: hidden; transition: opacity 0s 0.8s, visibility 0s 0.8s; }
@media (prefers-reduced-motion: reduce) { .hero-carousel .hero-slide { transition: none !important; } }
.hero-controls { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; border: 0; padding: 0; margin: 0; }
.hero-control { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.hero-control input { appearance: none; width: 12px; height: 12px; margin: 0; border: 1px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }
.hero-control input:checked { background: #fff; }
.hero-control input:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.hero-carousel:has(.hero-controls) .hero { padding-bottom: 64px; }
.hero-pause { position: absolute; bottom: 0; right: 16px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: #fff; cursor: pointer; }
.hero-pause[hidden], .hero-play-icon, .hero-pause.is-paused .hero-pause-icon { display: none; }
.hero-pause.is-paused .hero-play-icon { display: block; }
.hero-pause:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* A category or collection photo across the page; a tall photo (made for the category tiles) shows its top, where faces are. */
.section-photo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: center top; margin-bottom: 24px; }
/* The banner's button, filled with the brand's main colour so a colour theme shows at a glance (only the banner uses it). */
.btn-outline-light { display: inline-block; border: 1px solid var(--accent, var(--white)); border-radius: var(--button-radius, 0); background: var(--accent, transparent); color: var(--button-ink, var(--accent-ink, var(--white))); text-decoration: none; min-height: var(--button-height, 0); padding: 13px var(--button-x, 40px); font-size: 13px; letter-spacing: 0.2em; text-transform: var(--heading-case, uppercase); }
.btn-outline-light:hover { background: var(--accent-dark, var(--white)); border-color: var(--accent-dark, var(--white)); color: var(--button-ink, var(--accent-dark-ink, var(--ink))); }
.section { padding-top: calc(56px * var(--space-scale, 1)); padding-bottom: calc(24px * var(--space-scale, 1)); }
.section-title { color: var(--heading-ink, inherit); font-size: calc(24px * var(--heading-current, var(--heading-scale, 1))); letter-spacing: var(--heading-tracking, 0.08em); text-transform: var(--heading-case, uppercase); text-align: center; margin: 0; }
.section-sub { text-align: center; color: var(--muted); margin: 6px 0 28px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; padding-top: calc(40px * var(--space-scale, 1)); padding-bottom: calc(40px * var(--space-scale, 1)); }
.tile { --tile-tone: var(--side, #5f4b44); --tile-ink: var(--side-ink, var(--white)); position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 100 / var(--tile-ratio, 125); border-radius: var(--card-radius, 0); overflow: hidden; background: var(--tile-tone); color: var(--tile-ink); text-decoration: none; padding-bottom: 36px; text-align: center; }
.tile:nth-child(2n) { --tile-tone: var(--accent-dark, #4e5a63); --tile-ink: var(--accent-dark-ink, var(--white)); }
.tile:nth-child(3n) { --tile-tone: var(--accent, #6b4a52); --tile-ink: var(--accent-ink, var(--white)); }
.tile.tile-with-image { overflow: hidden; }
.tile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.tile-with-image::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--tile-tone) 60%, transparent) 100%); }
.tile-copy { position: relative; z-index: 2; }
.tile-title { display: block; font-family: var(--serif); font-size: calc(40px * var(--heading-current, var(--heading-scale, 1))); text-transform: var(--heading-case, uppercase); letter-spacing: var(--heading-tracking, 0.04em); }
.tile-cta { display: inline-block; margin-top: 10px; border-bottom: 1px solid currentColor; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.tile:hover { color: var(--tile-ink); filter: brightness(1.08); }
.occasions-title { margin-bottom: 28px; }
.occasions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.occasion { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; }
.occasion-circle { display: block; width: 150px; max-width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: #ebd9dc; }
.occasion:nth-child(2n) .occasion-circle { background: #efe3d2; }
.occasion:nth-child(3n) .occasion-circle { background: #e3e0d8; }
.occasion:nth-child(4n) .occasion-circle { background: #e1e6e0; }
.occasion:nth-child(5n) .occasion-circle { background: #e8d6d6; }
.occasion-circle img { width: 100%; height: 100%; object-fit: cover; }
.occasion-name { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.picks { display: flex; align-items: center; gap: 8px; }
.picks-arrow { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.picks-arrow[hidden] { display: none; }
.picks-arrow:hover { border-color: var(--ink); }
.picks-track { flex: 1 1 auto; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.picks-track::-webkit-scrollbar { display: none; }
.pick { position: relative; scroll-snap-align: start; }
.pick-save { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }
.heart { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--white); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.heart:hover { color: var(--accent); }
.heart-on svg { fill: var(--accent); color: var(--accent); }
/* The other product rows (New in, Best sellers, a category's): the heading, and "Shop all" under a category's. */
.row-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; }
.row-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; text-underline-offset: 6px; }
/* The brand story: the photo beside the words (stacked on phones); without a photo, the words alone in the middle. */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding-top: calc(56px * var(--space-scale, 1)); padding-bottom: calc(56px * var(--space-scale, 1)); }
.story-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story-title { font-family: var(--serif); font-size: clamp(calc(28px * var(--heading-current, var(--heading-scale, 1))), calc(3.6vw * var(--heading-current, var(--heading-scale, 1))), calc(44px * var(--heading-current, var(--heading-scale, 1)))); text-transform: var(--heading-case, uppercase); letter-spacing: var(--heading-tracking, 0.04em); line-height: 1.1; margin: 12px 0 16px; }
.story-text { margin: 0; color: var(--text-2); white-space: pre-line; }
.story-text-only { grid-template-columns: minmax(0, 1fr); max-width: 760px; text-align: center; }
/* The email sign-up: a band on the soft background colour. */
.signup-band { background: var(--accent-soft, #fbf1f5); --muted: var(--secondary-ink, var(--text-2)); text-align: center; padding: calc(56px * var(--space-scale, 1)) 0; }
.signup-copy { max-width: 640px; }
.signup-band .section-sub { margin-bottom: 24px; }
.signup-band .btn-dark { display: inline-flex; align-items: center; text-decoration: none; }
.signup-consent { margin: 0 0 16px; font-size: 14px; }
.signup-note { margin: 16px 0 0; font-size: 14px; }
/* Customer reviews: a card for each of the newest, linking to its product. */
.home-reviews { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.home-review { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.home-review p { margin: 0; }
.home-review-stars { color: var(--accent); letter-spacing: 0.12em; }
.home-review-by { font-size: 12px; color: var(--muted); }
.home-review-product { margin-top: auto; font-size: 13px; }
.bridal-band { position: relative; overflow: hidden; background: var(--side, #5a2a33); color: var(--banner-ink, var(--side-ink, var(--white))); margin-top: 40px; min-height: var(--banner-height, 520px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 64px var(--gutter); }
.bridal-band-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bridal-band-with-image { color: var(--white); }
.bridal-band-with-image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(40, 12, 20, 0.45); }
.bridal-band-copy { position: relative; z-index: 2; max-width: 640px; }
.bridal-band-copy p { margin: 0 0 28px; }
.bridal-band-title { font-family: var(--serif); font-size: clamp(calc(36px * var(--heading-current, var(--heading-scale, 1))), calc(6vw * var(--heading-current, var(--heading-scale, 1))), calc(56px * var(--heading-current, var(--heading-scale, 1)))); text-transform: var(--heading-case, uppercase); letter-spacing: var(--heading-tracking, 0.04em); line-height: 1.05; margin: 12px 0 16px; }
.btn-light { display: inline-block; background: var(--white); border-radius: var(--button-radius, 0); color: var(--button-ink, #111111); text-decoration: none; min-height: var(--button-height, 0); padding: 14px var(--button-x, 40px); font-size: 13px; letter-spacing: 0.2em; text-transform: var(--heading-case, uppercase); }
.btn-light:hover { background: var(--ink); color: var(--white); }
.bottom-bar { display: none; }
.bottom-bar :is(svg, .badge) { display: none; }
.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; text-align: center; padding-top: calc(48px * var(--space-scale, 1)); padding-bottom: calc(48px * var(--space-scale, 1)); border-top: 1px solid var(--line); margin-top: 32px; }
.promise-title { font-size: calc(13px * var(--text-current, var(--text-scale, 1))); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.promise-text { font-size: calc(13px * var(--text-current, var(--text-scale, 1))); color: var(--muted); }
.hero-side { display: none; }

/* Layout choices made in Master: data attributes on <html> (header, banner, tiles, products) and on each homepage band
   (its background). With none set, or the defaults, the page looks exactly as before. */
/* Logo on the left: the header itself becomes the grid and the bar's parts join it, so the menu (still the header's own row
   in the original layout, with the whole width) sits beside the logo. The side padding keeps the bar's page width. */
:is([data-header="left"], [data-header="over"]) .site-header { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "left logo nav right"; column-gap: 24px; align-items: center; padding: var(--header-padding, 14px) max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter))); }
:is([data-header="left"], [data-header="over"]) .site-header > .bar { display: contents; }
:is([data-header="left"], [data-header="over"]) .bar-left { grid-area: left; }
:is([data-header="left"], [data-header="over"]) .wordmark { grid-area: logo; justify-self: start; padding-left: 0; }
:is([data-header="left"], [data-header="over"]) .main-nav { grid-area: nav; justify-content: flex-start; gap: 8px 24px; padding: 0; }
:is([data-header="left"], [data-header="over"]) .bar-right { grid-area: right; }
/* A menu too long for one line beside the logo gets its own row under it, as on tablets, never several rows beside it (shop.js measures it). */
:is([data-header="left"], [data-header="over"]) .site-header.nav-below { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "left logo right" "nav nav nav"; }
:is([data-header="left"], [data-header="over"]) .nav-below .main-nav { padding-top: 18px; }
[data-banner="split"] .hero-with-image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; aspect-ratio: auto; min-height: 0; max-width: 100%; padding: 0; background: var(--accent-soft, #fbf1f5); color: var(--ink); text-align: left; }
[data-banner="split"] .hero-with-image::before { content: none; }
[data-banner="split"] .hero-image, [data-banner="split"] .hero-side { display: block; position: relative; inset: auto; grid-column: 1; grid-row: 1; width: 100%; height: var(--banner-height, clamp(440px, 42vw, 640px)); object-fit: cover; object-position: var(--banner-x, 50%) var(--banner-y, 0%); }
/* The starter pack's upright side-by-side photo, kept to its top so the face stays in view; an admin's wide banner photo is cut to its middle. */
[data-banner="split"] .hero-with-image:has(.hero-side) .hero-image { display: none; }
[data-banner="split"] .hero-copy { grid-column: 2; grid-row: 1; padding: 48px clamp(24px, 5vw, 80px); }
[data-banner="split"] .hero h1, [data-banner="split"] .hero-title { font-size: clamp(calc(32px * var(--heading-current, var(--heading-scale, 1))), calc(4vw * var(--heading-current, var(--heading-scale, 1))), calc(56px * var(--heading-current, var(--heading-scale, 1)))); }
[data-banner="split"] .hero-controls { left: 75%; }
[data-banner="split"] .hero-control input { border-color: var(--ink); }
[data-banner="split"] .hero-control input:checked { background: var(--ink); }
[data-banner="split"] .hero-pause { color: var(--ink); }
[data-banner="split"] .hero-control input:focus-visible, [data-banner="split"] .hero-pause:focus-visible { outline-color: var(--ink); }
/* With several banners the dots sit under the words, so the photo still reaches the banner's bottom edge. */
[data-banner="split"] .hero-carousel:has(.hero-controls) .hero { padding-bottom: 0; }
[data-banner="tall"] .hero-with-image { aspect-ratio: auto; min-height: var(--banner-height, max(560px, calc(100svh - 150px))); max-width: 100%; }
/* Every layout gets up to four tiles; the 2- and 3-across layouts hide the rest, and 3 or 4 always fill one row. */
[data-tiles="two"] .tile:nth-child(n+3), [data-tiles="three"] .tile:nth-child(n+4) { display: none; }
[data-tiles="three"] .tiles, [data-tiles="four"] .tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* Narrower tiles: the title shrinks with its tile (container units) on tablets and phones, so a long name stays whole. */
[data-tiles="three"] .tile, [data-tiles="four"] .tile { container-type: inline-size; }
[data-tiles="three"] .tile-title { font-size: calc(30px * var(--heading-current, var(--heading-scale, 1))); font-size: min(calc(30px * var(--heading-current, var(--heading-scale, 1))), 11cqi); }
[data-tiles="four"] .tile { aspect-ratio: 100 / var(--tile-ratio, 133.3333); }
[data-tiles="four"] .tile-title { font-size: calc(24px * var(--heading-current, var(--heading-scale, 1))); font-size: min(calc(24px * var(--heading-current, var(--heading-scale, 1))), 11cqi); }
/* The grid shows the first 8 of up to 12 products, two rows of four. */
[data-products="grid"] .picks-track { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; overflow: visible; scroll-snap-type: none; }
[data-products="grid"] .picks-arrow, [data-products="grid"] .pick:nth-child(n+9) { display: none; }
/* Logo on the left with a big search bar between it and the icons, and the menu in its own row under them. */
.bar-search { display: none; }
[data-header="search"] .site-header { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "left logo search right" "nav nav nav nav"; column-gap: 24px; align-items: center; padding: var(--header-padding, 14px) max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter))) 0; }
[data-header="search"] .site-header > .bar { display: contents; }
[data-header="search"] .bar-left { grid-area: left; }
[data-header="search"] .bar-left > a.icon { display: none; }
[data-header="search"] .wordmark { grid-area: logo; justify-self: start; padding-left: 0; }
[data-header="search"] .bar-search { display: block; grid-area: search; width: 100%; max-width: 680px; justify-self: center; }
[data-header="search"] .bar-search input { width: 100%; height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--accent-soft, #f7f7f7); color: var(--ink); font: inherit; }
[data-header="search"] .bar-right { grid-area: right; }
[data-header="search"] .main-nav { grid-area: nav; justify-content: flex-start; gap: 8px 28px; padding: 14px 0; }
/* Over the banner: laid out as with the logo on the left, and see-through over a homepage that opens with a banner photo (a message
   above it, or any other first section, keeps the normal header; Master's preview wraps the sections, hence not main > .band). A soft
   shade at the photo's top keeps the menu readable. */
[data-header="over"]:has(main .band:first-child :is(.hero-with-image, .hero-carousel)) .site-header { position: absolute; left: 0; right: 0; z-index: 7; background: transparent; border-bottom-color: transparent; }
[data-header="over"]:has(main .band:first-child :is(.hero-with-image, .hero-carousel)) .site-header :is(.wordmark, .icon, .main-nav a) { color: var(--banner-ink, #fff); }
[data-header="over"] main .band:first-child .hero-with-image::after { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 160px; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--side, #000) 45%, transparent), transparent); }
/* Inside the page edges: the banner keeps the page's width and side padding, its corners those of the photos. */
[data-banner="boxed"] .band[data-band="hero"] { padding: calc(16px * var(--space-scale, 1)) max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter))) 0; }
[data-banner="boxed"] .band[data-band="hero"] > :is(.hero, .hero-carousel) { border-radius: var(--card-radius, 0); overflow: hidden; }
/* Round pictures: each tile (up to four) a circle with its name under it, the row centred. */
[data-tiles="circles"] .tiles { grid-template-columns: repeat(auto-fit, minmax(120px, 180px)); justify-content: center; gap: 24px 40px; }
[data-tiles="circles"] .tile { aspect-ratio: auto; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0; overflow: visible; background: none; color: var(--ink); }
[data-tiles="circles"] .tile::before { content: ""; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--tile-tone); }
[data-tiles="circles"] .tile-photo { inset: 0 0 auto; height: auto; aspect-ratio: 1; border-radius: 50%; }
[data-tiles="circles"] .tile-with-image::after, [data-tiles="circles"] .tile-cta { display: none; }
[data-tiles="circles"] .tile-title { margin-top: 14px; font-size: calc(17px * var(--heading-current, var(--heading-scale, 1))); }
[data-tiles="circles"] .tile:hover { color: var(--accent); }
/* Full-width panels, one under another, each the whole width of the screen. */
[data-tiles="one"] .tiles { grid-template-columns: minmax(0, 1fr); max-width: none; padding-left: 0; padding-right: 0; gap: 4px; }
[data-tiles="one"] .tile { aspect-ratio: auto; min-height: clamp(340px, 42vw, 620px); max-width: 100%; padding-bottom: 56px; }
[data-tiles="one"] .tile-title { font-size: calc(52px * var(--heading-current, var(--heading-scale, 1))); }
/* Three across with arched tops (the top corners as round as the tile is wide). */
[data-tiles="arches"] .tile:nth-child(n+4) { display: none; }
[data-tiles="arches"] .tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; }
[data-tiles="arches"] .tile { container-type: inline-size; aspect-ratio: 100 / var(--tile-ratio, 150); border-radius: 999px 999px var(--card-radius, 0) var(--card-radius, 0); }
[data-tiles="arches"] .tile-title { font-size: calc(30px * var(--heading-current, var(--heading-scale, 1))); font-size: min(calc(30px * var(--heading-current, var(--heading-scale, 1))), 11cqi); }
/* A scrolling top strip: the message moves right to left and stops under the pointer; still for people who ask for less motion. */
[data-announce="scroll"] .announce { overflow: hidden; white-space: nowrap; padding-left: 0; padding-right: 0; }
[data-announce="scroll"] .announce-text { display: inline-block; padding-left: 100%; animation: announce-scroll 24s linear infinite; }
[data-announce="scroll"] .announce:hover .announce-text { animation-play-state: paused; }
@keyframes announce-scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  [data-announce="scroll"] .announce { white-space: normal; padding-left: 16px; padding-right: 16px; }
  [data-announce="scroll"] .announce-text { padding-left: 0; animation: none; }
}
/* The top strip with links either side: finding an order and contact on the left, the social pages on the right (narrower screens: the
   message alone). */
.announce-links { display: none; }
[data-announce="links"] .announce { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); align-items: center; column-gap: 16px; padding: 0 max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter))); }
[data-announce="links"] .announce-links { display: flex; align-items: center; white-space: nowrap; }
[data-announce="links"] .announce-social { justify-content: flex-end; }
[data-announce="links"] .announce-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: inherit; text-decoration: none; }
[data-announce="links"] .announce-links a:first-child { padding-left: 0; }
[data-announce="links"] .announce-links a:last-child { padding-right: 0; }
[data-announce="links"] .announce-links a + a { border-left: 1px solid color-mix(in srgb, currentColor 45%, transparent); }
[data-announce="links"] .announce-links a:hover { text-decoration: underline; }
/* Logo in the centre over the banner photo: laid out as "Logo in the centre", the menu only in the menu button, and see-through over a
   homepage that opens with a banner photo (as "over"). The header stays at the top of the screen; over the photo it does so once the top
   strip has scrolled away, on its own background again (shop.js marks data-scrolled). */
[data-header="over-centre"] .site-header { position: sticky; top: 0; z-index: 7; transition: background-color 0.2s; }
[data-header="over-centre"] { scroll-padding-top: calc(var(--header-height, 80px) + 8px); }
[data-header="over-centre"] .main-nav { display: none; }
[data-header="over-centre"] .menu-panel { max-height: calc(100svh - 72px); overflow-y: auto; overscroll-behavior: contain; }
[data-header="over-centre"]:has(main .band:first-child :is(.hero-with-image, .hero-carousel)) .site-header { position: absolute; top: auto; left: 0; right: 0; background: transparent; border-bottom-color: transparent; }
[data-header="over-centre"]:has(main .band:first-child :is(.hero-with-image, .hero-carousel)) .site-header :is(.wordmark, .icon) { color: var(--banner-ink, #fff); }
[data-header="over-centre"][data-scrolled]:has(main .band:first-child :is(.hero-with-image, .hero-carousel)) .site-header { position: fixed; top: 0; background: var(--header-bg, var(--white)); border-bottom-color: var(--line); }
[data-header="over-centre"][data-scrolled]:has(main .band:first-child :is(.hero-with-image, .hero-carousel)) .site-header :is(.wordmark, .icon) { color: var(--header-ink, var(--ink)); }
/* A logo image turns white over the photo, as the logo text does (a one-colour logo reads best), and back once the header has its background. */
[data-header="over-centre"]:not([data-scrolled]):has(main .band:first-child :is(.hero-with-image, .hero-carousel)) .site-header :is(.brand-logo, .wordmark-logo) { filter: brightness(0) invert(1); }
[data-header="over-centre"] main .band:first-child .hero-with-image::after { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 200px; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--side, #000) 55%, transparent), color-mix(in srgb, var(--side, #000) 45%, transparent) 90px, transparent); }
/* The whole first screen: the photo reaches the bottom of the screen (under a header over the photo, from just under the top strip), the
   words small and low; with several photos, short lines at the bottom right choose them. */
[data-banner="screen"] .hero-with-image { aspect-ratio: auto; min-height: var(--banner-height, max(480px, calc(100svh - var(--strip-height, 40px) - 110px))); max-width: 100%; padding-bottom: 64px; }
:is([data-header="over"], [data-header="over-centre"])[data-banner="screen"] main .band:first-child .hero-with-image { min-height: var(--banner-height, max(480px, calc(100svh - var(--strip-height, 40px)))); }
[data-banner="screen"] .hero h1, [data-banner="screen"] .hero-title { font-size: clamp(calc(28px * var(--heading-current, var(--heading-scale, 1))), calc(3vw * var(--heading-current, var(--heading-scale, 1))), calc(44px * var(--heading-current, var(--heading-scale, 1)))); line-height: 1.15; margin: 8px 0 20px; }
[data-banner="screen"] .hero-carousel:has(.hero-controls) .hero { padding-bottom: 72px; }
[data-banner="screen"] .hero-controls { left: auto; right: max(var(--gutter), 28px); bottom: 28px; transform: none; }
[data-banner="screen"] .hero-control { width: auto; min-width: 44px; padding: 0 6px; }
[data-banner="screen"] .hero-control input { width: 40px; height: 5px; border: 0; border-radius: 0; background: rgb(255 255 255 / 0.3); box-shadow: inset 0 0 0 1px #fff; transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; }
[data-banner="screen"] .hero-control input:checked { width: 80px; background: #fff; }
[data-banner="screen"][data-hero-tone="dark"] .hero-control input { background: rgb(18 18 18 / 0.3); box-shadow: inset 0 0 0 1px #121212; }
[data-hero-tone="dark"]:not([data-banner="split"]) .hero-control input { border-color: #121212; }
[data-hero-tone="dark"]:not([data-banner="split"]) .hero-control input:checked { background: #121212; }
[data-hero-tone="dark"]:not([data-banner="split"]) .hero-pause { color: #121212; }
[data-hero-tone="dark"]:not([data-banner="split"]) :is(.hero-control input, .hero-pause):focus-visible { outline-color: #121212; }
@media (prefers-reduced-motion: reduce) { [data-banner="screen"] .hero-control input { transition: none; } }
[data-banner="screen"] .hero-pause { right: auto; left: var(--gutter); }
/* Category pictures in a sliding row: tall, the name at the bottom left in the text font, four across on computers. The heading the owner
   writes for them sits above. */
.tiles-head { padding-top: calc(56px * var(--space-scale, 1)); padding-bottom: 20px; }
.tiles-head:has(.section-title:empty) { display: none; }
.tiles-head .section-sub { margin-bottom: 0; }
.tiles-head .section-sub:empty { display: none; }
.tiles-head:has(.section-title:not(:empty)) + .tiles { padding-top: 0; }
[data-tiles="cards"] .tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(calc((100% - 36px) / 4), 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
[data-tiles="cards"] .tiles::-webkit-scrollbar { display: none; }
[data-tiles="cards"] .tile { aspect-ratio: 100 / var(--tile-ratio, 114); justify-content: flex-start; text-align: left; padding: 0 20px 20px; scroll-snap-align: start; }
[data-tiles="cards"] .tile:focus-visible { outline-offset: -3px; }
[data-tiles="cards"] .tile-with-image::after { background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--tile-tone) 75%, transparent) 100%); }
[data-tiles="cards"] .tile-with-image:focus-visible::after { box-shadow: inset 0 0 0 3px var(--focus); }
[data-tiles="cards"] .tile-title { font-family: var(--sans); font-size: calc(16px * var(--text-current, var(--text-scale, 1))); font-weight: 500; letter-spacing: 0; text-transform: none; }
[data-tiles="cards"] .tile-cta { display: none; }
/* Big collection pictures, the names in capitals on them: up to three side by side; with four or more, the first two share a row (one
   wider) and the rest follow three to a row, a last row of one or two filling the width. */
[data-occasions="mosaic"] .occasion { position: relative; justify-content: flex-end; gap: 0; min-height: clamp(360px, 46vw, 760px); padding: 0 16px 28px; border-radius: var(--card-radius, 0); overflow: hidden; background: var(--side, #3a0d1f); color: var(--banner-ink, var(--side-ink, var(--white))); }
[data-occasions="mosaic"] .occasion:nth-child(n) .occasion-circle { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: none; }
[data-occasions="mosaic"] .occasion::after { content: ""; position: absolute; inset: auto 0 0; height: 180px; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--side, #000) 75%, transparent)); }
[data-occasions="mosaic"] .occasion-name { position: relative; z-index: 1; font-family: var(--serif); font-size: calc(20px * var(--heading-current, var(--heading-scale, 1))); font-weight: var(--heading-weight, 500); letter-spacing: var(--heading-tracking, 0.04em); }
[data-occasions="mosaic"] .occasion:hover { color: var(--banner-ink, var(--side-ink, var(--white))); filter: brightness(1.06); }
@media (min-width: 701px) {
  [data-occasions="mosaic"] .occasions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; }
  [data-occasions="mosaic"] .occasions:has(> .occasion:nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  [data-occasions="mosaic"] .occasions:has(> .occasion:nth-child(4)) > .occasion { grid-column: span 4; min-height: clamp(320px, 44vw, 760px); }
  [data-occasions="mosaic"] .occasions:has(> .occasion:nth-child(4)) > .occasion:nth-child(-n+2) { grid-column: span 5; min-height: clamp(420px, 62vw, 1100px); }
  [data-occasions="mosaic"] .occasions:has(> .occasion:nth-child(4)) > .occasion:first-child { grid-column: span 7; }
  [data-occasions="mosaic"] .occasions:has(> .occasion:nth-child(4)) > .occasion:nth-child(-n+2) .occasion-name { font-size: calc(28px * var(--heading-current, var(--heading-scale, 1))); }
  [data-occasions="mosaic"] .occasions:has(> .occasion:nth-child(4)) > .occasion:nth-child(3n):last-child { grid-column: span 12; }
  [data-occasions="mosaic"] .occasions:has(> .occasion:nth-child(4)) > .occasion:nth-child(3n):nth-last-child(2),
  [data-occasions="mosaic"] .occasions:has(> .occasion:nth-child(4)) > .occasion:nth-child(3n):nth-last-child(2) + .occasion { grid-column: span 6; }
}
/* A sliding row of five products with a thin line under it showing how far along it is. */
[data-products="slider"] .picks-track { grid-auto-columns: calc((100% - 80px) / 5); gap: 20px; padding-bottom: 20px; scrollbar-width: thin; scrollbar-color: currentColor color-mix(in srgb, currentColor 20%, transparent); }
/* Section headings on the left and larger, with "Shop all" and the product arrows on the right; the email sign-up becomes one row, the
   words on the left and the button on the right. */
[data-headings="left"] :is(.section-title, .section-sub) { text-align: left; }
[data-headings="left"] .section-title { font-size: calc(30px * var(--heading-current, var(--heading-scale, 1))); letter-spacing: var(--heading-tracking, 0); }
[data-headings="left"] .row-head { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
[data-headings="left"] .row-link { letter-spacing: 0.04em; text-transform: none; text-decoration: underline; }
[data-headings="left"] .signup-band { text-align: left; }
[data-headings="left"] .signup-copy { max-width: var(--page); }
@media (min-width: 701px) {
  [data-headings="left"] .section:has(> .picks) { position: relative; }
  [data-headings="left"] .section .picks-arrow { position: absolute; top: calc(56px * var(--space-scale, 1) - 6px); right: var(--gutter); border: 0; background: none; color: inherit; }
  [data-headings="left"] .section .picks-arrow[data-picks-step="-1"] { right: calc(var(--gutter) + 48px); }
  [data-headings="left"]:not([data-products="grid"]) .section:has(.picks-arrow:not([hidden])) > :is(.row-head, .section-title, .section-sub) { padding-right: 104px; }
  [data-headings="left"] .signup-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
  [data-headings="left"] .signup-copy > .section-title { grid-column: 1; grid-row: 1; }
  [data-headings="left"] .signup-copy > .section-sub { grid-column: 1; grid-row: 2; margin: 6px 0 0; }
  [data-headings="left"] .signup-copy > :not(.section-title, .section-sub) { grid-column: 2; justify-self: end; max-width: 480px; text-align: right; }
  [data-headings="left"] .signup-copy > :is(.btn-dark, form) { grid-row: 1; }
  [data-headings="left"] .signup-copy > form { grid-row: 1 / span 2; }
  [data-headings="left"] .signup-copy > .signup-note { grid-row: 2; margin-top: 8px; }
  [data-headings="left"] .signup-copy > .section-sub + .signup-note { grid-row: 1 / span 2; margin: 0; }
}
/* The "New in page" choice: the menu's link to that page and the New in row's Shop all (only Master's preview draws them while the choice is
   off, so it can switch at once); on phones each row's Shop all becomes a rounded button under its products. */
:root:not([data-new-page="on"]) :is(.menu-new, #new-in + .row-link) { display: none; }
@media (max-width: 700px) {
  [data-new-page="on"] .section:has(> .row-head > .row-link) { display: flex; flex-direction: column; }
  [data-new-page="on"] .section > .row-head:has(> .row-link) { display: contents; }
  [data-new-page="on"] .row-head:has(> .row-link) > .section-title { margin-bottom: 24px; }
  [data-new-page="on"] .row-head > .row-link { order: 1; align-self: center; margin-top: 24px; padding: 0 32px; border-radius: 999px; background: var(--solid-button, #111111); color: var(--button-ink, var(--solid-button-ink, var(--white))); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: var(--heading-case, uppercase); text-decoration: none; }
}
/* The brand's name first in the footer, large like a logo, its links on the right and the copyright line on the left. */
[data-footer="brand"] .site-footer { border-top: 1px solid var(--line); }
[data-footer="brand"] .footer-cols { gap: 32px 64px; }
[data-footer="brand"] .footer-brand { flex: 1 1 320px; }
/* The page prints the columns in the chosen order; only Master's preview, while the footer choice changes before it reloads, needs them moved. */
[data-footer="brand"] .footer-care + .footer-brand, :root:not([data-footer="brand"]) .footer-brand + .footer-care { order: -1; }
[data-footer="brand"] .footer-cols > .footer-brand > h2 { font-family: var(--serif); font-size: calc(30px * var(--heading-current, var(--heading-scale, 1))); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 20px; }
[data-footer="brand"] .footer-cols h2 { font-size: 15px; letter-spacing: 0.02em; text-transform: none; }
[data-footer="brand"] .footer-join { margin-left: 0; }
[data-footer="brand"] .footer-base { max-width: var(--page); margin: 0 auto; text-align: left; }
/* The category or collection photo from edge to edge of the screen and shorter; clipping hides the few pixels a desktop scrollbar takes. */
[data-page-photo="wide"] body { overflow-x: clip; }
[data-page-photo="wide"] .section-photo { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); aspect-ratio: auto; height: clamp(240px, 34vw, 560px); }
/* A category's own wide page photo: the whole picture, as wide as the page or the screen, no height limit; on phones the middle of it,
   twice as wide as it is tall, its full height kept. */
:root .section-photo.section-photo-banner { aspect-ratio: auto 2172 / 724; height: auto; object-fit: fill; }
@media (max-width: 700px) { :root .section-photo.section-photo-banner { aspect-ratio: 2 / 1; object-fit: cover; object-position: center; } }
/* The rows of big pictures (banners placed in a row): two across alternate wide and narrow (7 and 5 of 12 columns), three across make
   the middle one wider; each photo fills its box, the words at the bottom left over a shade. Phones show one under another. */
.pictures { display: grid; gap: 20px; }
.pictures-2 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pictures-2 > .picture:nth-child(4n + 1), .pictures-2 > .picture:nth-child(4n) { grid-column: span 7; }
.pictures-2 > .picture:nth-child(4n + 2), .pictures-2 > .picture:nth-child(4n + 3) { grid-column: span 5; }
.pictures-2 > .picture:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pictures-3 { grid-template-columns: 4fr 5fr 4fr; }
.pictures-3:has(> .picture:only-child) { grid-template-columns: 1fr; }
.pictures-3:has(> .picture:nth-child(2):last-child) { grid-template-columns: 7fr 5fr; }
.pictures-3 > .picture:nth-child(3n + 1):last-child { grid-column: 1 / -1; }
.pictures-3 > .picture:nth-child(3n + 2):last-child { grid-column: 2 / -1; }
.picture { position: relative; display: flex; flex-direction: column; justify-content: flex-end; max-width: 100%; min-height: clamp(320px, 38vw, 720px); padding: 28px; border-radius: var(--card-radius, 0); overflow: hidden; background: var(--side, #1a1a1a); color: var(--white); text-decoration: none; }
.pictures-3 .picture { max-width: 100%; min-height: clamp(300px, 34vw, 660px); }
.picture-photo, .picture-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.picture-photo img { object-fit: cover; object-position: center top; }
.picture::after { content: ""; position: absolute; inset: auto 0 0; height: 60%; pointer-events: none; background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.6)); }
.picture-copy { position: relative; z-index: 1; display: grid; gap: 6px; justify-items: start; }
.picture-eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.picture-title { font-family: var(--serif); font-size: calc(26px * var(--heading-current, var(--heading-scale, 1))); font-weight: var(--heading-weight, 500); line-height: 1.15; }
.picture-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
a.picture:hover { color: var(--white); }
a.picture:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Product cards with a small white tag. On a computer, pointing at one brings its photo a little closer and slides up a white bar over the
   photo with View details (the card's link), the quick look and the heart; phones show the heart and the quick look as outlined circles at
   the photo's top right. */
[data-cards="bar"] .card { gap: 4px; }
[data-cards="bar"] .card-photo { margin-bottom: 12px; }
[data-cards="bar"] .card-tag { padding: 2px 10px; border-radius: 4px; background: var(--white); color: #111111; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; text-transform: none; }
[data-cards="bar"] .card-name { font-size: calc(14px * var(--text-current, var(--text-scale, 1))); font-weight: 500; }
[data-cards="bar"] .card-price { font-size: calc(16px * var(--text-current, var(--text-scale, 1))); font-weight: 700; }
[data-cards="bar"] .card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 8px; }
[data-cards="bar"] .card-actions .pick-save { position: static; inset: auto; display: block; }
[data-cards="bar"] :is(.card-quick, .card-actions .heart) { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--white); border-radius: 50%; background: rgb(0 0 0 / 0.45); color: var(--white); }
[data-cards="bar"] :is(.card-quick, .card-actions .heart) svg { width: 16px; height: 16px; }
[data-cards="bar"] .card-actions .heart-on svg { fill: currentColor; color: var(--white); }
[data-cards="bar"] .card-quick { order: 1; }
[data-cards="bar"] .card-detail { display: none; }
[data-cards="bar"] :is(.card-quick, .card-actions .heart) { position: relative; }
[data-cards="bar"] :is(.card-quick, .card-actions .heart)::after { content: ""; position: absolute; inset: -7px; }
@media (hover: hover) and (min-width: 990px) {
  [data-cards="bar"] .card-photo img { transition: transform 0.5s ease; }
  [data-cards="bar"] .card-view { position: absolute; left: 12px; right: 12px; bottom: -15%; display: flex; align-items: center; gap: 8px; height: 51px; padding: 12px 16px; border-radius: 8px; background: var(--white); color: #111111; font-size: 14px; opacity: 0; visibility: hidden; transition: bottom 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0s 0.4s; }
  [data-cards="bar"] .card-actions { flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: 16px; padding: 0 28px 25px 0; opacity: 0; transform: translateY(40px); transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; }
  [data-cards="bar"] :is(.pick, .card-box):is(:hover, :focus-within) .card-view { bottom: 12px; }
  [data-cards="bar"] :is(.pick, .card-box):is(:hover, :focus-within) :is(.card-view, .card-actions) { opacity: 1; visibility: visible; transition-delay: 0s; }
  [data-cards="bar"] :is(.pick, .card-box):not(:hover, :focus-within) .card-actions > * { pointer-events: none; }
  [data-cards="bar"] :is(.pick, .card-box):is(:hover, :focus-within) .card-actions { transform: none; }
  [data-cards="bar"] :is(.card-quick, .card-actions .heart)::after { inset: -10px; }
  [data-cards="bar"] :is(.card-quick, .card-actions .heart) { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: #757575; }
  [data-cards="bar"] .card-actions .card-quick svg { width: 24px; height: 24px; }
  [data-cards="bar"] .card-actions .heart svg { width: 20px; height: 20px; }
  [data-cards="bar"] .card-actions .heart-on svg { color: #757575; }
  [data-cards="bar"] :is(.card-quick, .card-actions .heart):hover { color: #111111; }
  [data-cards="bar"] .card-quick { order: 0; }
}
@media (hover: hover) and (min-width: 990px) and (prefers-reduced-motion: no-preference) {
  [data-cards="bar"] :is(.pick, .card-box):hover .card-photo img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { [data-cards="bar"] :is(.card-photo img, .card-view, .card-actions) { transition: none !important; } }
/* Lists of products four across, MariaB's spacing (three on tablets, two on phones). */
@media (min-width: 990px) { [data-cards="bar"] .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 96px 20px; } }
@media (max-width: 989px) {
  [data-cards="bar"] .card-tag { top: 8px; left: 8px; }
}
@media (min-width: 701px) and (max-width: 989px) { [data-cards="bar"] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 16px; } }
@media (max-width: 700px) {
  [data-cards="bar"] .card-tag { padding: 2px 4px; font-size: 8px; line-height: 10px; }
  [data-cards="bar"] .card-name { font-size: calc(12px * var(--text-current, var(--text-scale, 1))); }
  [data-cards="bar"] .grid { gap: 32px 12px; }
}
/* With the edge-to-edge page photo, a category or collection page as MariaB's: the path in plain words, a big title on the left and its
   subcategories as rounded buttons on the left. */
:is([data-page-photo="wide"], [data-page-photo="none"]) .page-head { text-align: left; }
:is([data-page-photo="wide"], [data-page-photo="none"]) .crumbs { font-size: 13px; letter-spacing: 0; text-transform: none; }
:is([data-page-photo="wide"], [data-page-photo="none"]) .crumbs [aria-current] { color: var(--ink); }
:is([data-page-photo="wide"], [data-page-photo="none"]) .page-head .page-title { font-size: clamp(calc(24px * var(--heading-current, var(--heading-scale, 1))), 3.5vw, calc(52px * var(--heading-current, var(--heading-scale, 1)))); font-weight: 600; letter-spacing: 0; }
:is([data-page-photo="wide"], [data-page-photo="none"]) .chips { justify-content: flex-start; gap: 16px; }
:is([data-page-photo="wide"], [data-page-photo="none"]) .chips a { min-height: 40px; padding: 0 24px; border-color: #f2f2f2; border-radius: 6px; font-size: 14px; font-weight: 500; }
:is([data-page-photo="wide"], [data-page-photo="none"]) .chips a:hover { background: #f2f2f2; color: var(--ink); }
/* Pointing at a picture (rows of pictures always; category cards, collection pictures and the header's icons with the Maria.b cards)
   brings it a little closer and softens its colour, as on MariaB; the header's icons grow a little. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is([data-cards="bar"][data-tiles="cards"] .tile-photo, [data-cards="bar"][data-occasions="mosaic"] .occasion-circle img, .picture-photo img) { transition: transform 0.5s ease, filter 0.5s ease; }
  :is([data-cards="bar"][data-tiles="cards"] .tile:hover .tile-photo, [data-cards="bar"][data-occasions="mosaic"] .occasion:hover .occasion-circle img, a.picture:hover .picture-photo img) { transform: scale(1.02); filter: grayscale(0.3); }
  [data-header="over-centre"][data-cards="bar"] .site-header .icon { transition: transform 0.2s ease; }
  [data-header="over-centre"][data-cards="bar"] .site-header .icon:hover { transform: scale(1.07); }
}
/* The quick look: the product's own photos and buying part in a window (shop.js), with a link to the whole page. */
.quick-look { width: min(980px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: var(--card-radius, 0); background: var(--page-bg, var(--white)); color: var(--ink); }
.quick-look::backdrop { background: rgb(18 18 18 / 0.5); backdrop-filter: blur(10px); }
.quick-look-close { position: sticky; top: 0; float: right; z-index: 3; width: 48px; height: 48px; border: 0; background: var(--page-bg, var(--white)); color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.quick-look-body { padding: 24px; }
.quick-look .product { gap: 32px; padding-bottom: 0; }
.quick-look .gallery { flex-basis: 380px; }
.quick-look :is(.fold, .alert-form, .alert-form + .small) { display: none; }
.quick-look-more { align-self: flex-start; text-underline-offset: 5px; }
/* Main banner slides sliding sideways (MariaB's: one second, the whole photo moving): the slides side by side in a clipped track that
   moves to the chosen one, the others hidden once out of sight; its words rise in. shop.js carries on from the last to the copy of the
   first and back to the real first without moving. For people who ask for less motion they change at once. */
[data-banner-motion="slide"] .hero-carousel { overflow: hidden; overflow: clip; }
[data-banner-motion="slide"] .hero-track { display: flex; transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1); }
[data-banner-motion="slide"] .hero-track.is-jumping, [data-banner-motion="slide"] .hero-track.is-jumping :is(.hero-slide, .hero-copy) { transition: none !important; }
[data-banner-motion="slide"] .hero-slide { flex: 0 0 100%; grid-area: auto; z-index: auto; opacity: 1; visibility: hidden; transition: visibility 0s 1s; }
[data-banner-motion="slide"] :is(.hero-slide-1, .hero-carousel:has(#hero-slide-2:checked) .hero-slide-2, .hero-carousel:has(#hero-slide-3:checked) .hero-slide-3,
  .hero-carousel:has(#hero-slide-4:checked) .hero-slide-4, .hero-carousel:has(#hero-slide-5:checked) .hero-slide-5, .is-wrapping .hero-clone) { visibility: visible; transition: none; }
[data-banner-motion="slide"] .hero-carousel:has(:is(#hero-slide-2, #hero-slide-3, #hero-slide-4, #hero-slide-5):checked) .hero-track:not(.is-wrapping) .hero-slide-1 { z-index: auto; opacity: 1; visibility: hidden; transition: visibility 0s 1s; }
[data-banner-motion="slide"] .hero-track.is-moving > .hero-slide:not(.hero-clone) { visibility: visible !important; transition: none; }
[data-banner-motion="slide"] .hero-carousel:has(#hero-slide-2:checked) .hero-track { transform: translateX(-100%); }
[data-banner-motion="slide"] .hero-carousel:has(#hero-slide-3:checked) .hero-track { transform: translateX(-200%); }
[data-banner-motion="slide"] .hero-carousel:has(#hero-slide-4:checked) .hero-track { transform: translateX(-300%); }
[data-banner-motion="slide"] .hero-carousel:has(#hero-slide-5:checked) .hero-track { transform: translateX(-400%); }
[data-banner-motion="slide"] .hero-slide .hero-copy { opacity: 0; transform: translateY(12px); transition: opacity 0.35s ease-out, transform 0.35s ease-out; }
[data-banner-motion="slide"] :is(.hero-carousel:not(:has(:is(#hero-slide-2, #hero-slide-3, #hero-slide-4, #hero-slide-5):checked)) .hero-slide-1, .hero-carousel:has(#hero-slide-2:checked) .hero-slide-2,
  .hero-carousel:has(#hero-slide-3:checked) .hero-slide-3, .hero-carousel:has(#hero-slide-4:checked) .hero-slide-4, .hero-carousel:has(#hero-slide-5:checked) .hero-slide-5, .is-wrapping .hero-clone) .hero-copy { opacity: 1; transform: none; transition-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) { [data-banner-motion="slide"] :is(.hero-track, .hero-slide, .hero-slide .hero-copy) { transition: none !important; } }
/* A banner's own words on its photo (Homepage banners): where they sit, their colour and the heading's style, over the design's own
   banner text alignment. Phones put them at the foot of the photo, left or centred. */
:root:not([data-banner="split"]) .hero.hero-slide[data-position="bottom-left"] { align-items: flex-end; justify-content: flex-start; text-align: left; }
:root:not([data-banner="split"]) .hero.hero-slide[data-position="middle-left"] { align-items: center; justify-content: flex-start; text-align: left; }
:root:not([data-banner="split"]) .hero.hero-slide[data-position="bottom-centre"] { align-items: flex-end; justify-content: center; text-align: center; }
:root:not([data-banner="split"]) .hero.hero-slide[data-position="middle-centre"] { align-items: center; justify-content: center; text-align: center; }
:root:not([data-banner="split"]) .hero.hero-slide[data-position="middle-right"] { align-items: center; justify-content: flex-end; text-align: right; }
:root:not([data-banner="split"]) .hero-slide[data-position] .hero-copy { align-self: auto; max-width: min(720px, 100%); }
.hero-slide[data-tone="light"] { --hero-ink: #ffffff; }
.hero-slide[data-tone="dark"] { --hero-ink: #121212; }
.hero-slide[data-tone="gold"] { --hero-ink: #ffd15c; }
:root:not([data-banner="split"]) .hero-slide[data-tone] .hero-copy { color: var(--hero-ink); }
.hero-slide[data-tone="dark"]::before { opacity: 0; }
/* Light or gold words sit on a dark photo: the button keeps a light edge there, so a dark button still shows. */
:root:not([data-banner="split"]) .hero-slide:is([data-tone="light"], [data-tone="gold"]) .btn-outline-light { border-color: rgb(255 255 255 / 0.75); }
.hero-slide[data-style] :is(h1, .hero-title) { margin: 10px 0 22px; font-size: clamp(48px, 6vw, 104px); line-height: 1; }
.hero-slide[data-style="serif"] :is(h1, .hero-title) { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 400; letter-spacing: 0; text-transform: none; }
.hero-slide[data-style="caps"] :is(h1, .hero-title) { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-slide[data-style="bold"] :is(h1, .hero-title) { font-family: 'Montserrat', 'Segoe UI', sans-serif; font-weight: 700; letter-spacing: -0.01em; text-transform: none; }
.hero-slide[data-style] .hero-eyebrow { letter-spacing: 0.16em; }
/* Over a light photo (dark words) the header goes dark too, from the moment shop.js marks the page with that slide's colour. */
[data-header="over"][data-hero-tone="dark"]:has(main .band:first-child .hero-carousel) .site-header :is(.wordmark, .icon, .main-nav a),
[data-header="over-centre"][data-hero-tone="dark"]:not([data-scrolled]):has(main .band:first-child .hero-carousel) .site-header :is(.wordmark, .icon, .main-nav a) { color: #121212; transition: color 0.2s ease; }
[data-header="over-centre"][data-hero-tone="dark"]:not([data-scrolled]):has(main .band:first-child .hero-carousel) .site-header :is(.brand-logo, .wordmark-logo) { filter: none; }
[data-header="over"]:is([data-hero-tone="light"], [data-hero-tone="gold"]):has(main .band:first-child .hero-carousel) .site-header :is(.wordmark, .icon, .main-nav a),
[data-header="over-centre"]:is([data-hero-tone="light"], [data-hero-tone="gold"]):not([data-scrolled]):has(main .band:first-child .hero-carousel) .site-header :is(.wordmark, .icon) { color: #ffffff; transition: color 0.2s ease; }
[data-header="over-centre"]:is([data-hero-tone="light"], [data-hero-tone="gold"]):not([data-scrolled]):has(main .band:first-child .hero-carousel) .site-header :is(.brand-logo, .wordmark-logo) { filter: brightness(0) invert(1); }
[data-header="over"][data-hero-tone="dark"] main .band:first-child .hero-with-image::after, [data-header="over-centre"][data-hero-tone="dark"] main .band:first-child .hero-with-image::after { background: linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.4) 90px, transparent); }
@media (max-width: 700px) {
  :root:not([data-banner="split"]) .hero.hero-slide[data-position] { align-items: flex-end; }
  :root:not([data-banner="split"]) .hero.hero-slide:is([data-position="bottom-left"], [data-position="middle-left"]) { justify-content: flex-start; text-align: left; }
  :root:not([data-banner="split"]) .hero.hero-slide:is([data-position="bottom-centre"], [data-position="middle-centre"], [data-position="middle-right"]) { justify-content: center; text-align: center; }
  .hero-slide[data-style] :is(h1, .hero-title) { font-size: clamp(34px, 9vw, 54px); }
  /* On a phone the words sit low, often over the clothes: dark words get a soft white fade behind them. */
  :root:not([data-banner="split"]) .hero-slide[data-tone="dark"]::before { opacity: 1; background: linear-gradient(180deg, transparent 40%, rgb(255 255 255 / 0.5) 62%, rgb(255 255 255 / 0.7) 100%); }
}
/* With the admin's sign-up photo: the photo behind, the words on a light panel on its left; phones show the photo above the words. */
.signup-with-photo { position: relative; display: flex; align-items: center; min-height: clamp(320px, 30vw, 480px); text-align: left; }
.signup-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.signup-band.signup-with-photo .signup-copy { position: relative; display: block; width: min(520px, calc(100% - 2 * var(--gutter))); max-width: none; margin: 0 0 0 max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter))); padding: 32px; border-radius: var(--card-radius, 0); background: rgb(255 255 255 / 0.9); text-align: left; }
@media (min-width: 701px) {
  .signup-band.signup-with-photo .signup-copy, .signup-band.signup-with-photo .signup-copy :is(h2, .section-title) { --ink: #111111; --muted: #3a3a3a; color: #111111; }
}
.signup-band.signup-with-photo .signup-copy > * { text-align: left; }
.signup-band.signup-with-photo .signup-copy > .section-sub { margin: 6px 0 24px; }
.signup-band.signup-with-photo .signup-copy > .signup-note { margin-top: 16px; }
@media (max-width: 700px) {
  .signup-with-photo { display: block; min-height: 0; padding-top: 0; }
  .signup-photo { position: static; display: block; aspect-ratio: 2 / 1; height: auto; margin-bottom: 24px; }
  .signup-band.signup-with-photo .signup-copy { width: auto; margin: 0; padding: 0 var(--gutter); background: none; }
}
/* The collections slider: words and the lines on the left, the chosen collection's big photo on the right with its name across it. */
.slides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: center; }
.slides-copy { display: grid; gap: 14px; justify-items: start; align-content: center; }
.slides-copy .section-title, .slides-copy .section-sub { text-align: left; margin: 0; }
.slides-eyebrow { font-size: 12px; letter-spacing: 0.08em; }
.slides-eyebrow:empty { display: none; }
/* Every slide's words share one cell, so the section is as tall as the longest and nothing below it moves when the slide changes. */
.slides-words { display: grid; }
.slide-copy { grid-area: 1 / 1; display: grid; gap: 20px; justify-items: start; align-content: start; visibility: hidden; opacity: 0; }
.slides-button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 28px; border: 1px solid var(--line); border-radius: var(--button-radius, 0); background: var(--accent-soft, #f6f4f1); color: var(--ink); text-decoration: none; }
.slides-button:hover { border-color: var(--ink); color: var(--ink); }
/* The lines (and the pause button) never run wider than their column: with many slides the lines get shorter. */
.slides-nav { display: flex; align-items: center; gap: 12px; margin-top: 28px; min-width: 0; max-width: 100%; }
.slides-controls { display: flex; gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; }
.slides-control { position: relative; display: block; flex: 0 1 auto; width: 40px; min-width: 16px; height: 24px; cursor: pointer; transition: width 0.3s; }
.slides-control::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 50%, transparent); transition: width 0.3s; }
.slides-control:has(input:checked) { width: 80px; }
.slides-control:has(input:checked)::after { background: var(--ink); }
.slides-control input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.slides-control:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.slides-photos { display: grid; touch-action: pan-y pinch-zoom; }
.slide-photo { grid-area: 1 / 1; position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1920 / 1000; border-radius: var(--card-radius, 0); overflow: hidden; background: var(--side, #1a1a1a); opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0s 0.6s; }
.slide-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.slide-photo::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.25); }
.slide-name { position: relative; z-index: 1; padding: 0 24px; color: var(--white); font-size: clamp(28px, 4.2vw, 64px); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; text-shadow: 0 2px 24px rgb(0 0 0 / 0.45); }
:is(.slides, .story-slides):has(input[value="1"]:checked) [data-slide="1"], :is(.slides, .story-slides):has(input[value="2"]:checked) [data-slide="2"],
:is(.slides, .story-slides):has(input[value="3"]:checked) [data-slide="3"], :is(.slides, .story-slides):has(input[value="4"]:checked) [data-slide="4"],
:is(.slides, .story-slides):has(input[value="5"]:checked) [data-slide="5"], :is(.slides, .story-slides):has(input[value="6"]:checked) [data-slide="6"],
.slides:not(:has(input)) [data-slide="1"] { display: grid; opacity: 1; visibility: visible; transition: opacity 0.6s; }
/* The pause button shop.js shows when the slides move on by themselves (cPanel, Settings: the homepage banner's switch, D-103). */
.slides-pause { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.slides-pause[hidden], .slides-play-icon, .slides-pause.is-paused .slides-pause-icon { display: none; }
.slides-pause.is-paused .slides-play-icon { display: block; }
.slides-pause:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
/* The brand story with more slides (cPanel, Homepage banners: Brand story slides): its photo and words change together, as in the
   collections slider; the photos keep the story's square corners and 4:3 shape on every screen. */
.story-slides .slide-photo { aspect-ratio: 4 / 3; border-radius: 0; background: var(--accent-soft, #f6f4f1); }
.story-slides .slide-photo::after { content: none; }
.story-slides .slide-photo img { object-position: center; }
.story-slides .slide-copy { gap: 0; }
.story-slides .slides-button { margin-top: 24px; }
/* Sliding banners (Master's design): the photos slide sideways, marked by shop.js while they move: on to a later slide from the right,
   back to an earlier one from the left. The rounded corners go on the frame, so two photos meet edge to edge. */
[data-banner-motion="slide"] .slides-photos { overflow: hidden; overflow: clip; }
[data-banner-motion="slide"] .slides .slides-photos { border-radius: var(--card-radius, 0); }
[data-banner-motion="slide"] :is(.slides, .story-slides) .slide-photo { border-radius: 0; transition: none !important; }
.slide-photo:is(.is-coming-next, .is-coming-back, .is-going-next, .is-going-back) { visibility: visible; opacity: 1; animation: 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
.slide-photo.is-coming-next { animation-name: slide-from-right; }
.slide-photo.is-coming-back { animation-name: slide-from-left; }
.slide-photo.is-going-next { animation-name: slide-to-left; }
.slide-photo.is-going-back { animation-name: slide-to-right; }
@keyframes slide-from-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes slide-from-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes slide-to-left { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes slide-to-right { from { transform: none; } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { :is(.slide-photo, .slide-copy, .slides-control), .slides-control::after { transition: none !important; } .slide-photo { animation: none !important; } }
@media (max-width: 700px) {
  .slides { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .slides-photos { order: -1; }
  .slide-photo { aspect-ratio: 4 / 5; }
  .slides-nav { margin-top: 12px; }
}
@media (max-width: 700px) {
  .pictures-2, .pictures-3 { grid-template-columns: 1fr; }
  :is(.pictures-2, .pictures-3) > .picture:nth-child(n) { grid-column: auto; }
  .picture, .pictures-3 .picture { min-height: 0; aspect-ratio: 4 / 5; padding: 20px; }
}
.band[data-bg="soft"] { background: var(--accent-soft, #fbf1f5); --muted: var(--secondary-ink, var(--text-2)); }
.band[data-bg="dark"] { background: var(--side, #3a0d1f); color: var(--banner-ink, var(--side-ink, var(--white))); --muted: var(--side-ink, var(--white)); --line: transparent; }
.band[data-bg="dark"] :is(.card, .occasion), .band[data-bg="dark"] :is(.card, .occasion):hover { color: inherit; }
.band:is([data-bg="soft"], [data-bg="dark"]) > .section { padding-bottom: calc(56px * var(--space-scale, 1)); }
.band:is([data-bg="soft"], [data-bg="dark"]) .promises { margin-top: 0; border-top: 0; }

/* Product grid and cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 16px; }
.card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.card-photo { position: relative; border-radius: var(--card-radius, 0); aspect-ratio: 100 / var(--product-ratio, 150); background: var(--footer); overflow: hidden; }
.card-photo img { width: 100%; height: 100%; object-fit: var(--product-fit, cover); object-position: center top; }
.card-tag { position: absolute; top: 12px; left: 12px; background: var(--ink); color: var(--white); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; }
/* Beside each card, over its photo (the box the photo's shape): the quick look and the heart, shown by the choices below. */
.card-box { position: relative; }
.card-actions { position: absolute; inset: 0 0 auto; z-index: 2; aspect-ratio: 100 / var(--product-ratio, 150); pointer-events: none; }
.card-actions > * { pointer-events: auto; }
.card-quick, .card-view, :where(.card-box .card-actions) .pick-save { display: none; }
.card-name { font-size: calc(14px * var(--text-current, var(--text-scale, 1))); }
.card-detail { font-size: calc(12px * var(--text-current, var(--text-scale, 1))); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.card-price { font-size: calc(14px * var(--text-current, var(--text-scale, 1))); font-weight: 500; }
/* A sale: the earlier price crossed out before the price, and the saving as the card's tag (white on red, 5.4:1). */
.card-was { margin-right: 6px; color: var(--muted); font-weight: 400; }
.card-tag.card-tag-sale { background: #C62F2F; color: #FFFFFF; }
.empty { text-align: center; color: var(--muted); padding: 48px 0; }

/* Category page */
.page-head { padding-top: 32px; text-align: center; }
.page-title { font-family: var(--serif); font-size: clamp(calc(30px * var(--heading-current, var(--heading-scale, 1))), calc(4vw * var(--heading-current, var(--heading-scale, 1))), calc(40px * var(--heading-current, var(--heading-scale, 1)))); letter-spacing: var(--heading-tracking, 0.04em); text-transform: var(--heading-case, uppercase); margin: 0 0 8px; }
.crumbs { font-size: 12px; letter-spacing: var(--heading-tracking, 0.08em); text-transform: uppercase; color: var(--muted); margin: 20px 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 32px; padding: 0; list-style: none; }
.chips a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 16px; border: 1px solid var(--line-strong); text-decoration: none; font-size: 13px; }
.pager { display: flex; justify-content: center; gap: 16px; padding: 32px 0; }
.filters { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.filter-panel summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-size: 13px; }
.filter-groups { display: flex; flex-wrap: wrap; gap: 24px 48px; padding: 8px 0 16px; }
.filter-groups fieldset { border: 0; margin: 0; padding: 0; min-width: 140px; }
.filter-groups legend { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.sort-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0; font-size: 13px; }
.sort-row select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); background: var(--white); font: inherit; }
/* Filters in a drawer (the "drawer" filters choice; shop.js): a bar with the Filter button on the left and the Sort button on the right
   (opening a small list of the sort choices under it), the filter choices in a drawer from the left over the dimmed page, and the filters in
   use above the products, each taking itself away. Without the script the panel opens under the bar. */
.applied { display: none; }
[data-filters="drawer"] .filters.is-live { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; }
[data-filters="drawer"] .filters.is-live .sort-row > :is([type="submit"], a, label, select) { display: none; }
.filter-open { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.sort-menu { position: relative; }
.sort-open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.sort-open:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.sort-choices { position: absolute; top: calc(100% + 6px); right: 0; z-index: 4; min-width: 220px; margin: 0; padding: 6px 0; list-style: none; border: 1px solid var(--line); border-radius: 6px; background: var(--page-bg, var(--white)); box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
.sort-choices button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 20px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer; }
.sort-choices button:is(:hover, [aria-current]) { color: var(--ink); }
.sort-choices button[aria-current] { background: color-mix(in srgb, var(--ink) 6%, transparent); font-weight: 500; }
.sort-choices button:focus-visible { outline-offset: -3px; }
.filter-drawer { position: fixed; inset: 0 auto 0 0; width: min(480px, 85vw); height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--page-bg, var(--white)); color: var(--ink); }
.filter-drawer[open] { display: flex; flex-direction: column; }
.filter-drawer::backdrop { background: rgb(18 18 18 / 0.5); backdrop-filter: blur(10px); }
html:has(.filter-drawer[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .filter-drawer[open] { animation: filter-drawer-in 0.3s ease; }
  @keyframes filter-drawer-in { from { transform: translateX(-100%); } }
}
.filter-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 24px; border-bottom: 1px solid var(--line); }
.filter-drawer-head h2 { margin: 0; font-size: 14px; letter-spacing: 0.14em; }
.filter-drawer-close { width: 48px; height: 48px; border: 0; background: none; color: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.filter-drawer .filter-groups { flex: 1 1 auto; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0 24px; overflow-y: auto; }
.filter-drawer .filter-groups fieldset { margin: 20px 0 0; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.filter-drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--line); }
.filter-drawer-foot a { font-size: 13px; text-underline-offset: 4px; }
[data-filters="drawer"] .applied { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
[data-filters="drawer"] .applied a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 18px; color: var(--ink); font-size: 13px; text-decoration: none; }
[data-filters="drawer"] .applied a:hover { border-color: var(--ink); }
[data-filters="drawer"] .applied .applied-clear { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.listing[aria-busy="true"] { opacity: 0.5; transition: opacity 0.2s; }
/* Category and search lists with the "scroll" choice (shop.js): beside the sort, bigger pictures (two across on a computer, one on a
   phone), the design's own size, or smaller ones with the photo only (eight across, six on a tablet, four on a phone; the name and price
   still read out); and the next products as the list nears its end, its page links (the way on without the script) hidden. With the
   filter drawer, a phone puts the Sort button under the switch, still on the right, so its list opens on the screen. */
.grid-size { display: none; }
[data-browse="scroll"] .grid-size { display: flex; gap: 4px; }
[data-filters="drawer"] .filters.is-live .grid-size { margin-left: auto; }
[data-browse="scroll"] .filters.is-live { justify-content: flex-end; }
.grid-size button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.grid-size button:hover { color: var(--ink); }
.grid-size button[aria-pressed="true"] { background: var(--line); color: var(--ink); }
[data-browse="scroll"] .listing[data-grid="large"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-browse="scroll"] .listing[data-grid="small"] .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
[data-browse="scroll"] .listing[data-grid="small"] .card-photo { margin-bottom: 0; border-radius: calc(var(--card-radius, 0px) / 2); }
[data-browse="scroll"] .listing[data-grid="small"] :is(.card-tag, .card-name, .card-detail, .card-price) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-browse="scroll"] .listing[data-grid="small"] :is(.card-view, .card-actions) { display: none; }
@media (min-width: 701px) and (max-width: 989px) { [data-browse="scroll"] .listing[data-grid="small"] .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  [data-browse="scroll"] .listing[data-grid="large"] .grid { grid-template-columns: minmax(0, 1fr); }
  [data-browse="scroll"] .listing[data-grid="small"] .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pager[hidden] { display: none; }
.list-end { padding: 24px 0 48px; text-align: center; }
.list-top:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 14px; text-underline-offset: 4px; }
.btn-dark { min-height: var(--button-height, 44px); padding: 0 var(--button-x, 24px); border: 0; border-radius: var(--button-radius, 0); background: var(--solid-button, #111111); color: var(--button-ink, var(--solid-button-ink, var(--white))); font: inherit; font-size: 13px; letter-spacing: 0.16em; text-transform: var(--heading-case, uppercase); cursor: pointer; }
.btn-dark:hover { background: var(--accent); color: var(--button-ink, var(--accent-ink, var(--white))); }
.search-form { display: flex; max-width: 560px; margin: 16px auto; }
.search-form input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); font: inherit; }

/* Product page */
.product { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-bottom: 64px; }
.gallery { flex: 1 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gallery img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: center top; background: var(--footer); }
.gallery .only, .gallery-photo:only-child { grid-column: span 2; }
/* The photos (shop.js). Every photo at once, two across; or, with the "One big photo" choice and in every quick look, one photo at a time
   in a row that swipes (snapping), with arrows and a count over it and the small photos under it, the shown one outlined. */
.gallery-stage, .gallery-track { display: contents; }
.gallery-photo { display: block; position: relative; cursor: zoom-in; }
.gallery-thumbs, .gallery-step, .gallery-count { display: none; }
:is([data-gallery="viewer"], .quick-look) .gallery { display: flex; flex-direction: column; gap: 12px; }
:is([data-gallery="viewer"], .quick-look) .gallery-stage { display: block; position: relative; }
:is([data-gallery="viewer"], .quick-look) .gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
:is([data-gallery="viewer"], .quick-look) .gallery-track::-webkit-scrollbar { display: none; }
:is([data-gallery="viewer"], .quick-look) .gallery-photo { flex: 0 0 100%; scroll-snap-align: start; }
:is([data-gallery="viewer"], .quick-look) .gallery-step:not([hidden]) { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.85); color: #111111; cursor: pointer; }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
:is([data-gallery="viewer"], .quick-look) .gallery-count:not([hidden]) { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; display: block; margin: 0; padding: 2px 10px; border-radius: 12px; background: rgb(255 255 255 / 0.85); color: #111111; font-size: 12px; }
:is([data-gallery="viewer"], .quick-look) .gallery-thumbs { display: flex; gap: 8px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
:is([data-gallery="viewer"], .quick-look) .gallery-thumbs li { flex: 0 0 64px; }
:is([data-gallery="viewer"], .quick-look) .gallery-thumbs a { display: block; position: relative; border: 1px solid transparent; opacity: 0.6; }
:is([data-gallery="viewer"], .quick-look) :is(.gallery-photo, .gallery-thumbs a):focus-visible { outline-offset: -3px; }
:is([data-gallery="viewer"], .quick-look) .gallery-thumbs a:is([aria-current], :hover, :focus-visible) { opacity: 1; }
:is([data-gallery="viewer"], .quick-look) .gallery-thumbs a[aria-current] { border-color: var(--ink); }
[data-gallery="viewer"] main .product > .gallery { flex: 1 1 520px; max-width: 560px; }
[data-gallery="viewer"] main .product { justify-content: center; }
/* Full screen photos (shop.js photoViewer): the photo as large as fits, zoomed to 2.5 times inside a box that scrolls. */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #FFFFFF; color: #111111; }
.lightbox::backdrop { background: #FFFFFF; }
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox-stage { position: absolute; inset: 0; display: flex; overflow: hidden; touch-action: pan-y pinch-zoom; }
.lightbox-stage img { flex: none; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; cursor: zoom-in; }
.lightbox-stage.is-zoomed { overflow: auto; touch-action: auto; }
.lightbox-stage.is-zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
.lightbox-count { position: absolute; top: 12px; left: 16px; margin: 0; font-size: 13px; line-height: 48px; }
.lightbox :is(.lightbox-close, .lightbox-step, .lightbox-zoom) { position: absolute; display: grid; place-items: center; border: 1px solid var(--line, #ececec); background: rgb(255 255 255 / 0.9); color: #111111; cursor: pointer; }
.lightbox-close { top: 12px; right: 12px; width: 48px; height: 48px; font-size: 28px; line-height: 1; }
.lightbox-step { top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox .lightbox-zoom { bottom: 16px; left: 50%; translate: -50% 0; min-height: 44px; padding: 0 24px; font: inherit; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.lightbox .lightbox-zoom[aria-pressed="true"] { background: #111111; color: #FFFFFF; }
.lightbox.is-single :is(.lightbox-step, .lightbox-count) { display: none; }
.buybox { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.brandline { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.product-title { font-size: calc(22px * var(--heading-current, var(--heading-scale, 1))); letter-spacing: 0.06em; text-transform: var(--heading-case, uppercase); line-height: 1.3; margin: 8px 0; }
.price { font-size: 20px; }
.price-was { margin-right: 8px; color: var(--muted); font-size: 0.85em; }
.price-off { display: inline-block; margin-left: 8px; padding: 2px 8px; background: #C62F2F; color: #FFFFFF; font-size: 12px; font-weight: 500; vertical-align: middle; }
.small { font-size: 12px; color: var(--muted); }
.options-title { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; margin: 0 0 8px; }
.option-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.option-list li { min-height: 44px; min-width: 52px; display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--line-strong); font-size: 13px; }
.option-list li.out { color: var(--muted); text-decoration: line-through; }
.fold { border-top: 1px solid var(--line); }
.fold details { border-bottom: 1px solid var(--line); }
.fold summary { min-height: 52px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: '+'; }
.fold details[open] summary::after { content: '−'; }
.fold-body { font-size: 14px; color: var(--text-2); padding-bottom: 16px; }
.fold-body dl { margin: 0; }
.fold-body dt { font-weight: 500; }
.fold-body dd { margin: 0 0 6px; }

/* Size guide: radio buttons switch cm/inches without JavaScript */
.units { display: flex; margin: 8px 0; }
.units input { position: absolute; opacity: 0; }
.units label { min-height: 44px; display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid var(--ink); cursor: pointer; font-size: 13px; }
.units input:checked + label { background: var(--ink); color: var(--white); }
.units input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.chart-in { display: none; }
.size-guide:has([id$="unit-in"]:checked) .chart-in { display: block; }
.size-guide:has([id$="unit-in"]:checked) .chart-cm { display: none; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
th, td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-weight: 500; }

/* Messages, bag and checkout */
.center { text-align: center; }
.narrow { max-width: 640px; }
.flash { padding-top: 16px; }
.flash-ok, .flash-error, .notice { margin: 0 0 12px; padding: 12px 16px; font-size: 14px; }
.flash-ok { background: #eef6ee; color: #1f5f2c; }
.flash-error { background: #fbeaea; color: #8a1c1c; }
.notice { background: var(--footer); border-left: 3px solid var(--accent); }
.badge { position: absolute; top: 5px; right: 3px; background: var(--ink); color: var(--white); font-size: 10px; line-height: 16px; min-width: 16px; text-align: center; border-radius: 8px; }
.inline { display: inline; }
.link-button { background: none; border: 0; padding: 0 4px; min-height: 44px; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; color: var(--ink); }
.link-button:hover { color: var(--accent); }
.block { display: block; width: 100%; text-align: center; text-decoration: none; line-height: 44px; }
.btn-dark[disabled] { background: var(--line-strong); color: var(--muted); cursor: not-allowed; }
/* Link buttons keep their words in the middle when the design makes buttons taller (Master, Precise sizes, Button height). */
a:is(.btn-dark, .btn-outline-light) { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.btn-dark.block { display: flex; line-height: normal; }
.btn-light { display: inline-flex; align-items: center; justify-content: center; min-height: var(--button-height, 44px); padding: 0 var(--button-x, 24px); border: 1px solid var(--ink); border-radius: var(--button-radius, 0); background: var(--white); color: var(--button-ink, #111111); font: inherit; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.btn-light:hover { background: var(--accent-dark); color: var(--button-ink, var(--accent-dark-ink, var(--white))); border-color: var(--accent-dark); }
.pay-actions { display: grid; gap: 12px; margin-top: 16px; }
.bag { padding-top: 32px; padding-bottom: 32px; }
.bag-layout { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; margin-top: 24px; }
.bag-parcels { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.parcel { border-top: 1px solid var(--ink); }
.parcel-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.parcel-head h2 { font-size: 13px; margin: 0; }
.line { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.line-photo { width: 96px; aspect-ratio: 2 / 3; background: var(--footer); flex: 0 0 96px; }
.line-photo img { width: 100%; height: 100%; object-fit: cover; }
.line-body { flex: 1 1 220px; min-width: 0; font-size: 14px; }
.line-name { text-decoration: none; letter-spacing: var(--heading-tracking, 0.04em); text-transform: uppercase; }
.line-problem { color: #8a1c1c; margin-top: 6px; }
.line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.qty-form { display: flex; align-items: center; gap: 4px; }
.qty-form input, .add-form input[type="number"], .add-form select { min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); background: var(--white); font: inherit; }
.qty-form input, .add-form input[type="number"] { width: 80px; }
.line-total { font-weight: 500; }
.summary { flex: 1 1 300px; max-width: 420px; background: var(--footer); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.summary h2 { font-size: 13px; margin: 0; }
.sum-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.sum-row.total { font-size: 16px; font-weight: 500; border-top: 1px solid var(--ink); padding-top: 12px; }
.add-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.add-form label.options-title { flex-basis: 100%; }
.variant-options { flex-basis: 100%; min-width: 0; border: 0; padding: 0; margin: 0 0 8px; }
.variant-options legend { margin-bottom: 8px; }
.variant-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.variant-options label { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-strong); font-size: 13px; cursor: pointer; }
.variant-options input:checked + label { background: var(--ink); color: var(--white); border-color: var(--ink); }
.variant-options input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; }
.variant-options input:disabled + label { color: var(--muted); text-decoration: line-through; cursor: not-allowed; }
.alert-form { margin-top: 20px; }
.alert-form input { flex: 1 1 200px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); background: var(--white); font: inherit; }
.nudge { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 500; color: var(--accent-dark, var(--accent)); }
.trust-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--text-2); }
.trust-row li { display: inline-flex; align-items: center; gap: 10px; }
.trust-row li::before { content: ""; width: 5px; height: 10px; margin-top: -3px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Buying on a product page. "Big boxes" (data-buybox="large", like MariaB): a stock tag beside the name, big size boxes with a Size chart button
   that opens the size guide in a window, − and + around the quantity (both shop.js), and Add to wishlist beside Add to bag. Otherwise, and
   without JavaScript for the window and − +, as before: these parts are in the markup but not shown. */
.title-row, .stepper, .buy-actions { display: contents; }
.stock-pill, .size-chart-open, .stepper-step, .buy-wish, .buy-icon { display: none; }
[data-buybox="large"] .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
[data-buybox="large"] .stock-pill { display: inline-flex; flex: none; align-items: center; min-height: 36px; margin-top: 8px; padding: 0 14px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 14px; }
[data-buybox="large"] .add-form { row-gap: 24px; }
[data-buybox="large"] .variant-options legend { float: left; margin: 0; line-height: 44px; }
[data-buybox="large"] .size-chart-open:not([hidden]) { float: right; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
[data-buybox="large"] .size-chart-open:hover { color: var(--accent); }
[data-buybox="large"] .buybox:has(.size-chart-open:not([hidden])) .size-guide { display: none; }
[data-buybox="large"] .option-list { clear: both; gap: 12px; }
[data-buybox="large"] .variant-options label { position: relative; min-width: 70px; min-height: 42px; padding: 0 16px; border-color: color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 8px; font-size: 16px; font-weight: 500; }
[data-buybox="large"] .variant-options label::after { content: ""; position: absolute; inset: -7px 0; }
[data-buybox="large"] .variant-options input:not(:disabled) + label:hover { border-color: var(--ink); }
[data-buybox="large"] .variant-options input:disabled + label { border-color: var(--line); }
[data-buybox="large"] .stepper { display: flex; flex-basis: 100%; flex-wrap: wrap; align-items: center; }
[data-buybox="large"] .qty-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; flex-basis: 100%; margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
[data-buybox="large"] .stepper-step:not([hidden]) { display: grid; place-items: center; width: 44px; height: 44px; padding: 2px; border: 0; background: var(--solid-button, #111111) content-box; color: var(--button-ink, var(--solid-button-ink, var(--white))); cursor: pointer; }
[data-buybox="large"] .stepper-step[aria-disabled="true"] { background-color: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--muted); cursor: not-allowed; }
[data-buybox="large"] .stepper-step:not([hidden]) + input { width: 48px; padding: 0; border: 0; background: none; text-align: center; appearance: textfield; -moz-appearance: textfield; }
[data-buybox="large"] .stepper input::-webkit-inner-spin-button, [data-buybox="large"] .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
[data-buybox="large"] .buy-actions { display: flex; flex-basis: 100%; gap: 12px; }
[data-buybox="large"] .buy-actions > * { display: inline-flex; flex: 1 1 50%; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: var(--heading-case, uppercase); text-decoration: none; }
[data-buybox="large"] .buy-icon { display: block; flex: none; }
[data-buybox="large"] .buy-wish.is-saved svg { fill: currentColor; }
[data-buybox="large"] .wish-line { display: none; }
@media (max-width: 700px) {
  [data-buybox="large"] .variant-options label { min-width: 62px; min-height: 32px; border-radius: 4px; font-size: 14px; }
  [data-buybox="large"] .qty-label { flex-basis: auto; margin: 0 auto 0 0; }
  [data-buybox="large"] .buy-actions > .buy-wish { flex: 0 0 56px; padding: 0; }
  [data-buybox="large"] .buy-wish-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* The size guide in its window (shop.js sizeChart), over the page as the quick look is. */
.size-chart { width: min(760px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: var(--card-radius, 0); background: var(--page-bg, var(--white)); color: var(--ink); }
.size-chart::backdrop { background: rgb(18 18 18 / 0.5); backdrop-filter: blur(10px); }
html:has(.size-chart[open]) { overflow: hidden; }
.size-chart-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 24px; border-bottom: 1px solid var(--line); background: var(--page-bg, var(--white)); }
.size-chart-head h2 { margin: 0; font-size: 14px; letter-spacing: 0.14em; }
.size-chart-close { width: 48px; height: 48px; border: 0; background: none; color: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.size-chart-body { padding: 8px 24px 24px; }
.size-chart .size-guide > summary { display: none; }
.stack fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.stack legend { font-size: 13px; margin-bottom: 8px; }
.stack label { display: block; font-size: 13px; margin: 12px 0 4px; }
.pay-choice { border: 0; padding: 0; margin: 0 0 16px; }
.pay-choice legend { font-size: 13px; margin-bottom: 8px; }
.pay-choice label { display: flex; gap: 10px; align-items: center; font-size: 14px; padding: 12px; border: 1px solid #ddd; margin-bottom: 8px; cursor: pointer; }
.stack input { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--line-strong); font: inherit; }
.discount-code-row { display: flex; align-items: stretch; gap: 8px; }
.discount-code-row input { flex: 1; min-width: 0; }
.discount-code-row button { min-height: 48px; margin: 0; white-space: nowrap; }
.stack textarea { display: block; width: 100%; padding: 12px; border: 1px solid var(--line-strong); font: inherit; resize: vertical; }
.review-block { border-top: 1px solid var(--line); padding: 16px 0; }
.account-page { padding-top: 32px; padding-bottom: 32px; }
.account-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 24px; }
.account-nav a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 16px; border: 1px solid var(--line-strong); text-decoration: none; font-size: 13px; }
.account-nav a[aria-current="page"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.narrow-center { max-width: 640px; margin: 0 auto; }
.account-page .stack button { margin-top: 16px; }
.sign-in .stack button { display: block; margin-left: auto; margin-right: auto; }
.account-page form + p, .account-page p + form { margin-top: 16px; }
.review-block h2 { font-size: 13px; margin: 0 0 8px; }

/* Footer */
.site-footer { background: var(--footer); font-size: calc(13px * var(--text-current, var(--text-scale, 1))); margin-top: 48px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 64px; padding-top: 48px; padding-bottom: 32px; }
.footer-join { flex: 0 1 380px; margin-left: auto; }
.footer-cols .footer-join .btn-dark { display: inline-flex; align-items: center; color: var(--button-ink, var(--solid-button-ink, var(--white))); }
.footer-cols h2 { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 8px; }
.footer-cols a, .footer-cols p { display: block; color: var(--footer-ink, var(--text-2)); text-decoration: none; margin: 0 0 8px; }
.footer-cols .footer-social { display: flex; flex-wrap: wrap; margin-left: -12px; }
.footer-cols .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; }
.footer-base { text-align: center; padding: 16px var(--gutter) 24px; color: var(--footer-ink, var(--muted)); }

@media (max-width: 700px) {
  :root { --gutter-default: 16px; --gutter: var(--gutter-default); }
  .main-nav { display: none; }
  .bar { grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr); }
  .wordmark { font-size: calc(22px * var(--heading-current, var(--heading-scale, 1))); letter-spacing: calc(0.3em * var(--wordmark-fit, 1)); padding-left: calc(0.3em * var(--wordmark-fit, 1)); }
  .wordmark-with-logo { font-size: 20px; gap: 0.2em; padding-left: 0; letter-spacing: normal; }
  .wordmark-logo { width: var(--logo-custom-height, 30px); height: var(--logo-custom-height, 30px); }
  .wordmark-text { letter-spacing: calc(0.2em * var(--wordmark-fit, 1)); margin-right: calc(-0.2em * var(--wordmark-fit, 1)); }
  .hero { min-height: var(--banner-height-phone, var(--banner-height, 420px)); }
  .hero-with-image { min-height: var(--banner-height-phone, var(--banner-height, 480px)); aspect-ratio: var(--banner-aspect-phone, var(--banner-aspect, 2 / 3)); padding-bottom: 32px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery .only, .gallery-photo:only-child { grid-column: auto; }
  .icon-wishlist { display: none; }
  .picks-track { grid-auto-columns: 70%; }
  .picks-arrow { display: none; }
  .tile-title { font-size: calc(32px * var(--heading-current, var(--heading-scale, 1))); }
  .bridal-band { min-height: 440px; }
  .story { grid-template-columns: minmax(0, 1fr); }
  .footer-join { margin-left: 0; }
  .bottom-bar { display: flex; position: sticky; bottom: 0; z-index: 6; background: var(--white); border-top: 1px solid var(--line); justify-content: space-around; padding: 6px 0; }
  .bottom-bar a { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 4px; font-size: 12px; text-decoration: none; }
  :is([data-header="left"], [data-header="over"]) .site-header { column-gap: 12px; }
  [data-banner="split"] .hero-with-image { grid-template-columns: minmax(0, 1fr); }
  [data-banner="split"] .hero-with-image:has(.hero-side) .hero-image { display: block; }
  [data-banner="split"] .hero-side { display: none; }
  /* The photo takes at most 44% of the screen, so the words and button show under the header without scrolling; a phone banner height
     the owner set wins. */
  [data-banner="split"] .hero-image { height: var(--banner-height-phone, var(--banner-height, auto)); aspect-ratio: var(--banner-aspect-phone, var(--banner-aspect, 3 / 4)); max-height: var(--banner-height-phone, 44svh); }
  [data-banner="split"] .hero-copy { grid-column: 1; grid-row: 2; padding: 28px var(--gutter) 36px; }
  [data-banner="split"] .hero-controls { left: 50%; }
  [data-banner="split"] .hero-carousel:has(.hero-controls) .hero { padding-bottom: 64px; }
  [data-banner="tall"] .hero-with-image { min-height: var(--banner-height-phone, var(--banner-height, calc(100svh - 110px))); }
  [data-tiles="three"] .tiles, [data-tiles="four"] .tiles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  [data-tiles="three"] .tile:nth-child(3), [data-tiles="four"] .tile:nth-child(3):last-child { grid-column: 1 / -1; aspect-ratio: 100 / var(--tile-ratio, 50); }
  :is([data-tiles="three"], [data-tiles="four"]) .tile-title { font-size: calc(22px * var(--heading-current, var(--heading-scale, 1))); font-size: min(calc(22px * var(--heading-current, var(--heading-scale, 1))), 11cqi); }
  [data-products="grid"] .picks-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  /* The search bar takes its own row under the logo; the menu is in the menu button, as in every layout on phones. */
  [data-header="search"] .site-header { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "left logo right" "search search search" "nav nav nav"; column-gap: 8px; padding-bottom: 10px; }
  [data-header="search"] .wordmark { justify-self: center; }
  [data-header="search"] .bar-search { max-width: none; }
  [data-tiles="circles"] .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 12px; }
  [data-tiles="circles"] .tile-title { margin-top: 8px; font-size: 13px; }
  [data-tiles="one"] .tile { min-height: 56svh; }
  [data-tiles="one"] .tile-title { font-size: calc(34px * var(--heading-current, var(--heading-scale, 1))); }
  [data-tiles="arches"] .tiles { gap: 8px; }
  /* The sticky bottom bar covers the foot of the screen, so the words sit above it. */
  [data-banner="screen"] .hero-with-image { min-height: var(--banner-height-phone, var(--banner-height, max(420px, calc(100svh - var(--strip-height, 40px) - 70px)))); padding-bottom: 88px; }
  :is([data-header="over"], [data-header="over-centre"])[data-banner="screen"] main .band:first-child .hero-with-image { min-height: var(--banner-height-phone, var(--banner-height, max(420px, calc(100svh - var(--strip-height, 40px))))); }
  [data-banner="screen"] :is(.hero-controls, .hero-pause) { bottom: 60px; }
  [data-banner="screen"] .hero-controls { right: auto; left: calc(var(--gutter) + 44px); transform: none; }
  [data-banner="screen"] .hero-control { min-width: 44px; padding: 0 2px; }
  [data-banner="screen"] .hero-control input { width: 20px; height: 3px; }
  [data-banner="screen"] .hero-control input:checked { width: 40px; }
  [data-banner="screen"] .hero-carousel:has(.hero-controls) .hero { padding-bottom: 128px; }
  [data-tiles="cards"] .tiles { grid-auto-columns: 78%; gap: 8px; }
  [data-tiles="cards"] .tile { padding: 0 16px 16px; }
  [data-occasions="mosaic"] .occasions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  [data-occasions="mosaic"] .occasion { min-height: 240px; }
  [data-occasions="mosaic"] .occasion:nth-child(-n+2), [data-occasions="mosaic"] .occasion:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 400px; }
  [data-occasions="mosaic"] .occasion:nth-child(n+3):last-child:nth-child(odd) { min-height: 260px; }
  [data-products="slider"] .picks-track { grid-auto-columns: 44%; gap: 12px; }
  [data-headings="left"] .section-title { font-size: calc(24px * var(--heading-current, var(--heading-scale, 1))); }
}
/* The floating bottom bar ("Bottom bar on phones", as MariaB's): white and rounded, 16px in from the edges and the bottom, an icon over each
   word and the bag's count in a small bubble (the words "(n)" stay for screen readers); the header keeps only the menu, logo and account.
   Moving down the page slides the bar, and a header that stays at the top, out of the way; moving up, or reaching them with the keyboard,
   brings them back (shop.js marks data-scrolling-down). Without the script they simply stay. */
@media (max-width: 700px) {
  [data-phone-bar="float"] { scroll-padding-bottom: 100px; }
  [data-phone-bar="float"] .bottom-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; padding: 8px 0; border-top: 0; border-radius: 8px; background: #ffffff; box-shadow: 0 2px 12px rgb(0 0 0 / 0.08); }
  [data-phone-bar="float"] .bottom-bar a { position: relative; flex-direction: column; gap: 4px; min-width: 64px; color: #757575; line-height: 16px; }
  [data-phone-bar="float"] .bottom-bar a:hover { color: #111111; }
  [data-phone-bar="float"] .bottom-bar :is(svg, .badge) { display: block; }
  [data-phone-bar="float"] .bottom-bar .badge { top: 0; right: auto; left: calc(50% + 4px); padding: 0 4px; }
  [data-phone-bar="float"] .bottom-bar-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  [data-phone-bar="float"][data-scrolling-down] .bottom-bar:not(:has(:focus-visible)) { transform: translateY(calc(100% + 32px)); }
  [data-phone-bar="float"] .site-header :is(.bar-left > a.icon, .icon-bag) { display: none; }
  [data-phone-bar="float"] .site-footer { padding-bottom: 88px; }
  [data-header="over-centre"][data-phone-bar="float"][data-scrolling-down] .site-header:not(:has(:focus-visible), :has(.menu[open])) { transform: translateY(-100%); }
  [data-phone-bar="float"]:is([data-banner="screen"], [data-banner="tall"]) .hero-with-image { padding-bottom: 116px; }
  [data-phone-bar="float"]:is([data-banner="screen"], [data-banner="tall"]) :is(.hero-controls, .hero-pause) { bottom: 88px; }
  [data-phone-bar="float"]:is([data-banner="screen"], [data-banner="tall"]) .hero-carousel:has(.hero-controls) .hero { padding-bottom: 156px; }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  [data-phone-bar="float"] .bottom-bar { transition: transform 0.3s ease; }
  [data-header="over-centre"][data-phone-bar="float"] .site-header { transition: background-color 0.2s, transform 0.3s ease; }
}
/* Too narrow for the links beside the message (tablets and phones): the message alone, a little smaller on phones so it takes fewer lines. */
@media (max-width: 1100px) {
  [data-announce="links"] .announce { display: block; padding: 9px 16px; }
  [data-announce="links"] .announce-links { display: none; }
}
@media (max-width: 700px) {
  [data-announce="links"] .announce { font-size: 11px; letter-spacing: 0.06em; padding: 8px 16px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .picks-track { grid-auto-columns: calc((100% - 32px) / 3); }
  [data-products="slider"] .picks-track { grid-auto-columns: calc((100% - 40px) / 3); }
  [data-tiles="cards"] .tiles { grid-auto-columns: calc((100% - 24px) / 3.4); }
}
/* Logo on the left on a tablet or phone: the menu (hidden on phones) drops to its own row under the logo. */
@media (max-width: 1000px) {
  :is([data-header="left"], [data-header="over"]) .site-header { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "left logo right" "nav nav nav"; }
  :is([data-header="left"], [data-header="over"]) .main-nav { padding-top: 18px; }
}

@media (max-width: 360px) {
  .wordmark-with-logo { font-size: 15px; gap: 0.04em; }
  .wordmark-logo { width: var(--logo-custom-height, 22px); height: var(--logo-custom-height, 22px); }
  .wordmark-text { letter-spacing: var(--heading-tracking, 0.04em); margin-right: -0.04em; }
}

/* Admin-written website pages (W1) */
.prose { padding-top: 32px; padding-bottom: 48px; line-height: 1.7; }
.prose h2 { font-family: var(--serif); font-size: calc(22px * var(--heading-current, var(--heading-scale, 1))); margin: 28px 0 8px; }
.prose h3 { font-size: 17px; margin: 20px 0 6px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose a { text-decoration: underline; }

/* Error pages */
.error-page { text-align: center; padding-top: 64px; padding-bottom: 96px; }
.error-page .btn-dark { display: inline-flex; align-items: center; margin-top: 16px; color: var(--button-ink, var(--solid-button-ink, var(--white))); text-decoration: none; }

/* The owner's text/background choices and numeric overrides; automatic values retain the layout's own rules. */
.site-header .menu-panel { background: var(--header-bg, var(--white)); }
.site-header :is(a, .icon) { color: var(--header-ink, var(--ink)); }
.site-footer :is(h2, h3) { color: var(--footer-ink, inherit); }
.hero :is(h1, h2, h3), .tile :is(h1, h2, h3), .band[data-bg="dark"] :is(h1, h2, h3), .bridal-band :is(h1, h2, h3) { color: inherit; }
[data-banner="split"] .hero :is(h1, h2, h3) { color: var(--heading-ink, inherit); }
[data-banner-align="left"] .hero { text-align: left; justify-content: flex-start; }
[data-banner-align="centre"] .hero { text-align: center; justify-content: center; }
[data-banner-align="right"] .hero { text-align: right; justify-content: flex-end; }
@media (max-width: 700px) {
  :root { --heading-current: var(--heading-scale-phone, var(--heading-scale, 1)); --text-current: var(--text-scale-phone, var(--text-scale, 1)); }
  .wordmark { font-size: calc(min(var(--wordmark-size, calc(22px * var(--heading-current, var(--heading-scale, 1)))), 9vw) * var(--wordmark-fit, 1)); }
}

/* A heading breaks inside a word only when that word cannot fit on a line of its own. */
:is(h1, h2, h3) { overflow-wrap: break-word; }
.wordmark { min-width: 0; max-width: 100%; }
.brand-logo { max-width: min(100%, calc(var(--logo-height, 44px) * 5)); }

/* Banner copy position and explicit tint strength. Automatic preserves the selected layout. */
[data-banner-vertical="top"] .hero-copy { align-self: start; }
[data-banner-vertical="middle"] .hero-copy { align-self: center; }
[data-banner-vertical="bottom"] .hero-copy { align-self: end; }