/* writtengift tokens. Plugins read --wg-*; values point at theme.json presets, with theme.json's own values as the
   fallbacks (writtengift's palette, docs/design-system.md). tools/capture-design rewrites the GENERATED block from a
   reference site: a mockup-phase tool, not to be run on this theme again. */
:root {
  /* GENERATED:start (writtengift palette, round 3 E1; first captured from andopen.co 2026-10-08) */
  --wg-ink: var(--wp--preset--color--ink, #161616);
  --wg-surface: var(--wp--preset--color--white, #ffffff);
  --wg-surface-2: var(--wp--preset--color--canvas, #f2ebe0);
  --wg-line: var(--wp--preset--color--stone, #e9d9c2);
  --wg-muted: var(--wp--preset--color--muted, #5f5b55);
  --wg-accent: var(--wp--preset--color--accent, #23408e);
  --wg-lime: var(--wp--preset--color--accent-soft, #efd9a7);
  --wg-sky: var(--wp--preset--color--sky, #e1e7f6);
  --wg-peach: var(--wp--preset--color--peach, #f6e8c8);
  --wg-radius: 9999px;
  --wg-radius-lg: 16px;
  /* GENERATED:end */
  --wg-space-4: 20px;
  /* State colours: late or failed, and at risk or waiting on someone. Words carry the state; these support it. */
  --wg-late: #a3361f;
  --wg-risk: #8a5a00;
  /* The edge of a field people type in or choose from: 3.4:1 or more on white, cream and sand (WCAG 1.4.11).
     --wg-line stays for dividers and cards, which need no contrast. */
  --wg-field: #857d72;
  /* Keyboard focus: the accent on light surfaces, accent-soft on ink (both 7:1 or more). */
  --wg-focus: var(--wg-accent);
  /* Buttons: one scale for the theme, WooCommerce and the plugins. A 48px pill for actions, 44px (never less: a
     comfortable tap target) in compact rows: WooCommerce's order tables (View, Pay, Cancel), its notices ("View
     cart") and the account nudge (rules below); one radius, padding and type size. */
  --wg-btn-h: 48px;
  --wg-btn-h-sm: 44px;
  --wg-btn-pad: 24px;
  --wg-btn-pad-sm: 18px;
  --wg-btn-radius: 999px;
  --wg-btn-font: .9375rem;
  /* Choice chips (finder categories and quantity box, search chips, product page quantity chips and photo modes):
     one height; the plugins fall back to the same 36px where the theme is not loaded. */
  --wg-chip-h: 36px;
  /* The site header's height on wide screens (parts/header.html: the logo, links, search box and cart in 14px of
     padding; 70px measured at 1100 to 1440px). The product page's photo panel leaves it out from its first paint
     (core's product-page.css --wgp-head), before its script measures the header. */
  --wg-header-h: 70px;
}
body { -webkit-font-smoothing: antialiased; }
/* Read by screen readers, not shown: WordPress's own class, the one utility for the theme and the plugins (shop
   status, product page labels, account tables). */
.screen-reader-text:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Keyboard focus on every control, including the black pills where the browser's dark ring disappears. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--wg-focus); outline-offset: 3px; }
:where(.has-ink-background-color, .wg-nudge) { --wg-focus: var(--wg-lime); }
/* The closed mini-cart drawer sits off-screen: nothing in it may take focus. WooCommerce marks it closed as its
   300ms slide-out starts, so it turns invisible once the slide has played. */
.wc-block-mini-cart__drawer[aria-hidden="true"], .wc-block-components-drawer__screen-overlay--is-hidden { visibility: hidden; transition: visibility 0s linear .3s; }
/* A section opened from a link starts a little below the top edge. */
:target { scroll-margin-top: 24px; }
/* The homepage hero and the product page start right under the header (no strip of page colour between them). */
.wp-site-blocks > main.wg-main-flush { margin-block-start: 0; }

.wg-eyebrow { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wg-muted); }
.wg-trust { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .9375rem; color: var(--wg-muted); }
.wg-trust span::before { content: '✓'; margin-right: 6px; color: var(--wg-accent); font-weight: 500; }
.wg-card { position: relative; background: var(--wg-surface); border-radius: var(--wg-radius-lg); padding: 24px; }
/* A card whose heading is a link: the whole card opens it. */
.wg-card h3 a { color: inherit; text-decoration: none; }
.wg-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--wg-radius-lg); }
.wg-card h3 a:focus-visible { outline: none; }
.wg-card h3 a:focus-visible::after { outline: 2px solid var(--wg-focus); outline-offset: 3px; }
.wg-card:hover h3 a { text-decoration: underline; text-underline-offset: 4px; }
.wg-card__go { margin-top: 12px; color: var(--wg-accent); font-size: .9375rem; }
.wg-steps { counter-reset: step; }
.wg-steps .wg-card { counter-increment: step; }
.wg-steps .wg-card::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--wp--preset--font-family--display); font-size: 2rem; color: var(--wg-accent); margin-bottom: 8px; }
/* Personalise's booking-fee card (not shown at the moment): inside the page gutters on phones, above the product bar
   (78px, core's --wgp-bar, which is set on the product form and so not seen by this card in the footer). */
.wg-nudge { position: fixed; right: 16px; bottom: 16px; max-width: 340px; background: var(--wg-ink); color: var(--wg-surface); padding: 16px; border-radius: var(--wg-radius-lg); z-index: 50; box-shadow: 0 10px 30px rgb(0 0 0 / .2); }
.wg-nudge .button { display: inline-flex; align-items: center; min-height: var(--wg-btn-h-sm); padding: 0 var(--wg-btn-pad-sm); border-radius: var(--wg-btn-radius); background: var(--wg-surface); color: var(--wg-ink); text-decoration: none; }
body:has(.wgp-bar):not(.wgp-bar-hidden) .wg-nudge { bottom: calc(16px + 78px); }
@media (max-width: 640px) { .wg-nudge { left: 16px; right: 16px; max-width: none; } }

/* Hero demo: a real product photo with the visitor's logo on its print area, then its price and arrival date.
   Desktop: the price and date at the top of the card, so both are in the first screen (1440x900 and up) above
   the photo's lower half. Phones: photo and price side by side, the drop button below them. */
.wg-demo { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 32px; padding: 24px; background: var(--wg-surface); border-radius: var(--wg-radius-lg); box-shadow: 0 30px 60px rgb(22 22 22 / .08); }
.wg-demo__media { position: relative; }
.wg-demo__stage { position: relative; aspect-ratio: 1; background: var(--wg-surface); border-radius: 12px; overflow: hidden; }
.wg-demo__stage img.wg-demo__product { display: block; width: 100%; height: 100%; object-fit: contain; }
.wg-demo__logo { position: absolute; left: 34%; top: 42%; width: 32%; height: 32%; object-fit: contain; mix-blend-mode: multiply; pointer-events: none; }
.wg-demo__drop { position: absolute; inset: auto 12px 12px 12px; display: grid; gap: 2px; justify-items: center; min-height: 48px; padding: 12px; border: 1px dashed var(--wg-ink); border-radius: 12px; background: color-mix(in srgb, var(--wg-surface) 88%, transparent); color: var(--wg-ink); font: inherit; text-align: center; cursor: pointer; }
.wg-demo__drop small { color: var(--wg-muted); }
.wg-demo__side { display: grid; gap: 20px; padding-top: 8px; }
.wg-demo__name { margin: 0; color: var(--wg-muted); font-size: .9375rem; }
.wg-demo__facts { display: grid; gap: 14px; font-size: .875rem; }
.wg-demo__facts[hidden] { display: none; }
.wg-demo__facts span { color: var(--wg-muted); }
.wg-demo__facts strong { display: block; color: var(--wg-ink); font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 1.75rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wg-demo__go { justify-self: start; }
@media (max-width: 759px) {
  .wg-demo { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; grid-template-areas: "stage name" "stage facts" "drop drop" "trust trust" "go go"; align-items: start; gap: 12px 16px; padding: 12px; }
  .wg-demo__media, .wg-demo__side { display: contents; }
  .wg-demo__stage { grid-area: stage; }
  .wg-demo__drop { grid-area: drop; position: static; }
  .wg-demo__name { grid-area: name; font-size: .875rem; line-height: 1.3; }
  .wg-demo__facts { grid-area: facts; gap: 6px; font-size: .8125rem; }
  .wg-demo__facts strong { font-size: 1.25rem; }
  .wg-demo__side > .wg-trust { grid-area: trust; gap: 4px 16px; font-size: .875rem; }
  .wg-demo__go { grid-area: go; justify-self: stretch; text-align: center; }
}

/* The look. theme.json's settings.custom.motif (--wp--custom--motif--*) draws the writtengift motif: ruled writing
   paper, a postmark stamp "priced and dated", a written underline under the main heading and the logo's mark in
   the accent, with the earlier &Open-derived soft shapes off. The Launch look style variation (styles/launch.json,
   Appearance › Editor › Styles) sets the same variables the other way round, with the launch palette, so the owner
   can go back to the earlier look in one click. The fallbacks below are theme.json's values. Lines and stamp are
   CSS: no image, no web font. */
body {
  --wg-shapes: var(--wp--custom--motif--shapes, none);
  --wg-stamp: var(--wp--custom--motif--stamp, grid);
  --wg-underline: var(--wp--custom--motif--underline, block);
  --wg-rules: var(--wp--custom--motif--rules, 1);
  --wg-mark: var(--wp--custom--motif--mark, #23408e);
}
.wg-brand svg [fill="#0a5844"] { fill: var(--wg-mark); }
.wg-brand svg [stroke="#0a5844"] { stroke: var(--wg-mark); }
/* Ruled paper: a faint line every 36px in the accent, transparent (0%) with the Launch look. */
.wg-hero, .wg-info-hero { background-image: repeating-linear-gradient(to bottom, transparent 0 35px, color-mix(in srgb, var(--wg-accent) calc(12% * var(--wg-rules)), transparent) 35px 36px); }
/* The written underline under the main heading. */
.wg-hero h1::after, .wg-info-hero h1::after { content: ''; display: var(--wg-underline); width: 96px; height: 4px; margin: 20px auto 0; border-radius: 2px; background: var(--wg-accent); transform: rotate(-1.5deg); }
/* The postmark: a double ring with "Priced and dated" and three cancellation bars, at the hero's top right where
   the headline never reaches (wide screens only; phones keep the lines and the underline). */
.wg-hero__stamp { display: none; }
@media (min-width: 1280px) {
  .wg-hero__stamp { display: var(--wg-stamp); position: absolute; z-index: -1; top: 44px; right: max(40px, calc(50% - 600px)); box-sizing: border-box; width: 132px; height: 132px; place-content: center; justify-items: center; gap: 2px; border: 2px solid var(--wg-accent); border-radius: 50%; outline: 1px solid var(--wg-accent); outline-offset: -9px; color: var(--wg-accent); font-family: var(--wp--preset--font-family--body); font-size: .75rem; font-weight: 500; line-height: 1.25; letter-spacing: .16em; text-transform: uppercase; text-align: center; transform: rotate(-12deg); pointer-events: none; }
  .wg-hero__stamp::after { content: ''; position: absolute; top: 50%; right: calc(100% - 6px); width: 64px; height: 22px; margin-top: -11px; background: repeating-linear-gradient(to bottom, var(--wg-accent) 0 2px, transparent 2px 10px); opacity: .55; }
}

/* Hero: centred serif copy on a sand band (ruled paper; the soft shapes only with the Launch look) */
.wg-hero { position: relative; overflow: hidden; background-color: var(--wg-surface-2); border-radius: 0 0 24px 24px; isolation: isolate; }
.wg-hero__shape { display: var(--wg-shapes); position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.wg-hero__shape--lime { width: 560px; height: 560px; left: -240px; top: -200px; background: radial-gradient(circle at 34% 30%, var(--wg-surface-2) 0 48%, var(--wg-lime) calc(48% + 1px)); }
.wg-hero__shape--sky { width: 120px; height: 120px; left: 46%; top: -60px; background: var(--wg-sky); }
.wg-hero__shape--peach { width: 360px; height: 360px; right: -140px; top: 160px; background: var(--wg-peach); }
@media (max-width: 700px) { .wg-hero__shape--lime { width: 300px; height: 300px; left: -170px; top: -120px; } .wg-hero__shape--sky { width: 80px; height: 80px; top: -40px; } .wg-hero__shape--peach { width: 160px; height: 160px; right: -100px; top: auto; bottom: 120px; } }
.wg-hero h1 { margin-top: 0; }
.wg-hero p.wg-hero__kicker { margin-top: 0; margin-bottom: 12px; color: var(--wg-accent); font-weight: 500; }
/* The lead in the large size (a class would carry WordPress's !important and win over the phone size below). */
.wg-hero p.wg-hero__lead { font-size: var(--wp--preset--font-size--large); }
@media (max-width: 600px) { .wg-hero h1 { font-size: 2.25rem; line-height: 1.1; } .wg-hero p.wg-hero__lead { font-size: 1.0625rem; } }
/* The homepage on phones: four gift cards rather than eight, and a tighter section (its search box's placeholder
   says what the line under the heading said), so the festive order-by dates, with the season's strip above them,
   start within three screens (y 2,532 at 390x844) even with the strip at its 420px cap and each card's arrival line;
   "See all gifts" under the cards opens the rest. Cards only are counted: the note finder.js puts first in the grid
   (a relaxed or closest match) takes no card's place. */
@media (max-width: 600px) {
  .wg-main-flush > .wg-shop--compact .wg-grid > li.wg-pcard ~ li.wg-pcard ~ li.wg-pcard ~ li.wg-pcard ~ li.wg-pcard { display: none; }
  .wg-main-flush > .wg-shop--compact .wg-shop__sub { display: none; }
  .wg-main-flush > .wg-shop--compact .wg-shop__h { margin-bottom: 12px; }
  .wg-main-flush > .wg-shop--compact .wg-shop__bar { margin-top: 16px; }
  .wg-main-flush > .wg-shop--compact { padding-bottom: 24px; }
  .wg-main-flush > .wg-shop--compact .wg-shop__more { margin-top: 16px; }
  .wg-hero h1::after { margin-top: 12px; }
}
/* One heading scale (theme.json): on the homepage the gift finder's and the order-by dates' headings are section
   headings (H2) like the others. */
h2:is(.wg-shop__h, .wg-orderby__h) { font-size: var(--wp--preset--font-size--x-large); line-height: 1.2; }
/* Homepage sections link on to their full page (How it works, For teams, FAQ). */
p.wg-more { margin-top: 20px; font-size: 1rem; }
.wg-more a { color: var(--wg-accent); text-underline-offset: 3px; }
.wg-more a::after { content: ' →'; }
.wg-block-lime { background: var(--wg-lime); border-radius: 24px; }

/* Buttons: the theme's and WooCommerce's own (log in, register, account forms, notices; WooCommerce gives most of
   them the wp-element-button class) are one pill: --wg-btn-h tall, the same padding, radius and type, at every
   width. WooCommerce's cart and checkout block buttons (wc-block-components-button) keep their own sizing. */
:is(.wp-block-button__link, .wp-element-button, .wg-demo__go):not(.wc-block-components-button),
body .woocommerce :is(a.button, button.button, input.button, .button):not(.wc-block-components-button) {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: var(--wg-btn-h);
  padding: 0 var(--wg-btn-pad); border-radius: var(--wg-btn-radius); font-size: var(--wg-btn-font); line-height: 1.2;
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
}
.wp-block-button__link { white-space: nowrap; }
/* The demo's "Continue" stays hidden until a logo is chosen (hero-demo.js); display above would show it. */
.wg-demo__go[hidden] { display: none; }
.wp-block-button.is-style-outline > .wp-block-button__link { padding: 0 var(--wg-btn-pad); border-width: 1px; background: transparent; color: var(--wg-ink); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wg-ink); color: var(--wp--preset--color--paper, #fcf8f2); }
@media (max-width: 480px) { .wp-block-buttons .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link { padding: 0 var(--wg-btn-pad-sm); } }
body .woocommerce :is(a.button, button.button, input.button, .button):not(.wc-block-components-button):not(.wp-element-button) {
  border: 1px solid var(--wg-ink); background: var(--wg-ink); color: var(--wp--preset--color--paper, #fcf8f2);
  font-family: inherit; font-weight: 400; cursor: pointer;
}
body .woocommerce :is(a.button, button.button, input.button, .button):not(.wc-block-components-button):not(.wp-element-button):hover { background: var(--wg-accent); border-color: var(--wg-accent); }
/* Compact rows: buttons inside WooCommerce's tables (the orders list's View, Pay and Cancel; cart and order tables)
   and notices ("View cart", "Log in") are --wg-btn-h-sm, 44px, with the compact padding. The second selector
   reaches notices printed outside a .woocommerce wrapper (block themes' store notices). */
body .woocommerce :is(table.shop_table, .woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) :is(a.button, button.button, input.button, .button, .wp-element-button):not(.wc-block-components-button),
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) :is(.button, .wp-element-button):not(.wc-block-components-button) {
  min-height: var(--wg-btn-h-sm); padding: 0 var(--wg-btn-pad-sm);
}

/* WooCommerce forms (log in, register, account details, addresses, company details): 48px fields with a
   visible edge and 16px text, so phones do not zoom in on focus. */
body .woocommerce form .form-row :is(input.input-text, select) {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--wg-field); border-radius: 12px; background: var(--wg-surface); color: var(--wg-ink); font: inherit; font-size: 16px; line-height: 1.3;
}
/* textarea.input-text too: WooCommerce's own rules for it (.woocommerce form .form-row .input-text, and the block
   theme's 13px) are more specific than a bare textarea selector (the Company page's registered address). */
body .woocommerce form .form-row :is(textarea, textarea.input-text) { box-sizing: border-box; width: 100%; min-height: 96px; padding: 12px 16px; border: 1px solid var(--wg-field); border-radius: 12px; background: var(--wg-surface); color: var(--wg-ink); font: inherit; font-size: 16px; line-height: 1.5; }
/* WooCommerce's form colours and corners (its select2 country pickers on Addresses read these) match the fields. */
body { --wc-form-border-color: var(--wg-field); --wc-form-border-radius: 12px; --wc-form-color-text: var(--wg-ink); }
body .woocommerce form .form-row .select2-container .select2-selection--single { display: flex; align-items: center; min-height: 48px; border: 1px solid var(--wg-field); border-radius: 12px; background: var(--wg-surface); }
body .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered { padding: 0 44px 0 16px; color: var(--wg-ink); font-size: 16px; line-height: 1.3; }
body .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow { top: 0; right: 14px; height: 100%; }
body.woocommerce-page .select2-container { font-size: 16px; }
.select2-container .select2-dropdown { border-color: var(--wg-field); border-radius: 12px; overflow: hidden; }
.select2-container .select2-search--dropdown .select2-search__field { min-height: 44px; padding: 0 12px; border: 1px solid var(--wg-field); border-radius: 8px; font-size: 16px; }
/* Help under a field (Account details: "This will be how your name will be displayed…"): smaller than its label.
   That one line only: WooCommerce's other .form-row .description is a focus tooltip (hidden, blue) its script shows. */
body .woocommerce form .form-row #account_display_name_description { display: block; margin-top: 6px; color: var(--wg-muted); font-size: .875rem; line-height: 1.4; }
body .woocommerce form .form-row #account_display_name_description em { font-style: normal; }
body .woocommerce form .form-row label:has(> .input-text) { display: grid; gap: 6px; }
body .woocommerce form.login, body .woocommerce form.register { border: 0; border-radius: var(--wg-radius-lg); background: var(--wg-surface); padding: 32px; }
body.woocommerce-account:not(.logged-in) .woocommerce h2 { margin: 0 0 16px; font-size: 1.5rem; }
body .woocommerce form .form-row label { font-size: .9375rem; }
body .woocommerce form .form-row .required { color: var(--wg-late); text-decoration: none; }
@media (max-width: 700px) { body .woocommerce form.login, body .woocommerce form.register { padding: 20px; } }
/* Notices: the cream theme's colours instead of WooCommerce's blue. */
.wc-block-components-notice-banner.is-info, .woocommerce-info { background: var(--wg-surface-2); border-color: var(--wg-accent); color: var(--wg-ink); }
.wc-block-components-notice-banner.is-info > svg { background-color: var(--wg-accent); }
.wc-block-components-notice-banner .wc-forward, .woocommerce-info .button { text-decoration: none; }
/* A notice's button ("Find a gift", "View cart"): an outlined pill after the message. WooCommerce floats it as a
   bare link with !important (no padding, transparent), which left our pill border tight around the text and,
   on phones, squeezed the message into a narrow column beside it. */
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content:has(> .wc-forward) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward { order: 2; float: none; display: inline-flex; align-items: center; min-height: var(--wg-btn-h-sm); margin: 0; padding: 0 20px !important; border: 1px solid var(--wg-ink); border-radius: 999px; background: transparent !important; color: var(--wg-ink) !important; opacity: 1; font-size: .875rem; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward:hover { background: var(--wg-ink) !important; color: var(--wp--preset--color--paper, #fcf8f2) !important; }
/* The empty cart (inc/cart-empty.php): a heading and two ways on, then four gifts and the festive order-by dates,
   instead of WooCommerce's notice. Should a stock empty-cart block still show (a cart page saved before), its icon
   and "New in store" grid stay hidden. The footer reaches the bottom of the window. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none; }
.wp-block-woocommerce-empty-cart-block > .wp-block-separator, .wp-block-woocommerce-empty-cart-block > .wp-block-separator ~ * { display: none; }
.wg-cart-empty__head { padding: 8px 0 0; }
.wg-cart-empty__h { margin: 0 0 8px; font-size: var(--wp--preset--font-size--x-large); }
.wg-cart-empty__lead { margin: 0 0 20px; max-width: 60ch; color: var(--wg-muted); font-size: 1.0625rem; }
.wg-cart-empty__go { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.wg-cart-empty__go a.wg-cart-empty__shop { border: 1px solid var(--wg-ink); background: transparent; color: var(--wg-ink); }
.wg-cart-empty__go a.wg-cart-empty__shop:hover { background: var(--wg-ink); color: var(--wp--preset--color--paper, #fcf8f2); }
.wg-cart-empty { margin-top: 40px; }
body.woocommerce-cart .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.woocommerce-cart .wp-site-blocks > main { flex: 1 0 auto; }
/* Checkout: its heading (functions.php) and the logo in its header (parts/checkout-header.html). */
.wg-checkout-title { margin: 32px 0 8px; font-size: var(--wp--preset--font-size--x-large); }
.wg-checkout-header .wc-block-cart-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--wg-ink); font-size: .9375rem; text-decoration: none; }
.wg-checkout-header .wc-block-cart-link:hover .wc-block-cart-link__text { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .wg-checkout-header .wc-block-cart-link__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
/* Cart and checkout lines: what was chosen, the logo and the date (Cart::showItemData), not the product's
   description again. */
:is(.wc-block-cart, .wc-block-checkout, .wc-block-mini-cart__drawer) .wc-block-components-product-metadata__description { display: none; }

/* Header: logo, centred navigation, region chip, account and cart. */
.wg-header { background: var(--wp--preset--color--paper, #fcf8f2); position: relative; z-index: 50; }
.wg-brand { display: inline-flex; align-items: center; color: inherit; }
.wg-brand svg { height: 28px; width: auto; display: block; }
.wg-nav { font-size: 15px; }
.wg-nav .wp-block-navigation-item__content { padding: 6px 10px; border-radius: 999px; }
.wg-nav .wp-block-navigation-item__content:hover { background: rgba(22, 22, 22, .06); text-decoration: none; }
.wg-header__tools { align-items: center; }
@media (max-width: 600px) { .wg-brand svg { height: 24px; } .wg-header { padding-left: 16px !important; } }
/* Five links need about 1000px next to the logo and tools: below that they fold into the menu button
   (core folds them only under 600px). The open menu is the site's paper colour with large serif links. */
@media (min-width: 600px) and (max-width: 1023px) {
  .wg-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .wg-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* While folded, the menu button sits at the right edge after the tools, with a 44px tap target. */
@media (max-width: 1023px) {
  .wg-header .wg-nav { order: 3; flex: none; margin-left: 4px; }
  .wg-header .wg-header__tools { margin-left: auto; }
  .wg-nav .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 999px; }
}
@media (min-width: 1024px) and (max-width: 1180px) { .wg-nav .wp-block-navigation-item__content { padding: 6px 7px; } }
/* With the season's link (inc/nav.php: "Christmas gifts", at longest "Chinese New Year gifts") all six links stay on
   the bar from 1024px, as the five do: closer together, and until 1280px the header search shows as its icon, as it
   does below 1100px, rather than as a 220px box (core's finder.css), which leaves them room. */
@media (min-width: 1024px) and (max-width: 1279px) {
  nav.wg-nav:has(.wg-nav__season) .wp-block-navigation__container { gap: 4px; }
  nav.wg-nav:has(.wg-nav__season) .wp-block-navigation-item__content { padding: 6px 7px; }
  .wg-header:has(.wg-nav__season) .wg-find-btn { width: auto; padding: 0 10px; background: transparent; color: var(--wg-ink); }
  .wg-header:has(.wg-nav__season) .wg-find-btn:hover { background: rgba(22, 22, 22, .06); }
  .wg-header:has(.wg-nav__season) :is(.wg-find-btn__t, .wg-find-btn kbd) { display: none; }
}
/* From 1280px the six fit on one line, closer together (the longest season name is "Chinese New Year"). */
@media (min-width: 1280px) and (max-width: 1439px) {
  nav.wg-nav:has(.wg-nav__season) .wp-block-navigation__container { gap: 4px; }
  nav.wg-nav:has(.wg-nav__season) .wp-block-navigation-item__content { padding: 6px 8px; }
}
.wg-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--paper, #fcf8f2); color: var(--wg-ink); }
.wg-nav .is-menu-open .wp-block-navigation-item__content { padding: 8px 12px; font-family: var(--wp--preset--font-family--display); font-size: 1.75rem; line-height: 1.2; }
.wg-nav .is-menu-open .wp-block-navigation-item__content:hover { background: none; text-decoration: underline; }
/* Links only for the open menu (Your account, Contact us): the header has its own icons for them. */
.wg-nav li.wg-nav__menu-only { display: none; }
.wg-nav .is-menu-open li.wg-nav__menu-only { display: flex; }
.wg-nav .is-menu-open li.wg-nav__menu-only .wp-block-navigation-item__content { font-family: inherit; font-size: 1.125rem; }
/* Every control in the open menu is a 44px tap target: the links, the menu-only ones and "Close menu" (core's is
   a bare 24px icon; the negative margin keeps the icon where it was). */
.wg-nav .is-menu-open .wp-block-navigation-item__content { display: flex; align-items: center; box-sizing: border-box; min-height: 44px; }
.wg-nav .wp-block-navigation__responsive-container-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -10px 0 0; border-radius: 999px; }
/* The region chip's copy (inc/nav.php): in the open menu at every width, like "Your account" (wg-nav__menu-only);
   up to 400px it is the only way to the region drawer. Never hidden in the open menu: core keeps Tab inside the
   menu by wrapping from its last focusable item, and a hidden last item would let focus out behind it. */
.wg-nav__region-btn { gap: 8px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
/* Phones up to 400px wide (many Android phones are 360px): the logo, the four tools and the menu button fit with
   no sideways scroll. Smaller logo and edges, no gaps, and the region chip moves into the menu. */
@media (max-width: 400px) {
  .wp-block-group.wg-header { gap: 8px; padding-left: 12px !important; padding-right: 12px !important; }
  .wg-brand svg { height: 20px; }
  .wg-header .wg-header__tools { gap: 0 !important; }
  .wg-header__tools .wg-region-chip { display: none; }
  .wg-header .wg-nav { margin-left: 0; }
  /* The finder's "Price for [150] pcs" and its sort menu (shop, home, empty cart, 404) share one row: a narrower
     quantity box and sort padding fit them at 320px; should they still not fit, the sort menu wraps under. */
  .wg-shop__tools { flex-wrap: wrap; row-gap: 8px; }
  .wg-shop__tools .wg-shop__qty { gap: 4px; }
  .wg-shop__tools .wg-shop__qty input { width: 64px; }
  .wg-shop__tools select { min-width: 0; max-width: 100%; padding: 0 8px; }
}

/* My Account: a wide two-column layout (the gift calendar, quotes and orders need the room). */
body.woocommerce-account .wp-block-post-content, body.woocommerce-account .is-layout-constrained > .woocommerce, body.woocommerce-account .is-layout-constrained > .wp-block-post-title { max-width: 1200px !important; }
body.woocommerce-account .woocommerce { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start; }
body.woocommerce-account .woocommerce::before, body.woocommerce-account .woocommerce::after { content: none; }
/* min-width 0: the phone's scrolling row of pills must not widen the column past the screen. */
body.woocommerce-account .woocommerce-MyAccount-navigation, body.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }
body.woocommerce-account .woocommerce > :not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; }
body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* WooCommerce's block-theme styles space each item 1em apart and underline the active one. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li { margin: 0; padding: 0; border: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 15px; }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: rgba(22, 22, 22, .06); }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--wg-ink); color: var(--wp--preset--color--paper, #fcf8f2); text-decoration: none; }
@media (max-width: 800px) {
  body.woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  body.woocommerce-account .woocommerce-MyAccount-navigation ul li a { white-space: nowrap; border: 1px solid var(--wg-line); }
}

/* Footer: ink band, paper text. Column headings are small capitals so they read as labels, not links. */
footer .wp-block-list { list-style: none; padding: 0; display: grid; gap: 8px; }
footer .wp-block-list a { text-decoration: none; }
footer .wp-block-list a:hover { text-decoration: underline; }
.wg-footer h2, .wg-footer h3 { margin: 0 0 12px; font-family: var(--wp--preset--font-family--body); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.wg-footer .wp-block-site-title { margin: 0 0 8px; }
.wg-footer-legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgb(252 248 242 / .18); font-size: .875rem; color: var(--wp--preset--color--stone, #e9d9c2); }
.wg-footer-legal p { margin: 0 0 8px; }
.wg-footer-legal__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; padding: 0; list-style: none; }
.wg-footer-legal__links a { color: inherit; text-decoration: none; }
.wg-footer-legal__links a:hover { text-decoration: underline; }
/* Who sells and how to reach them (functions.php, inc/contact.php): only once the owner has entered them. */
.wg-footer-legal__who { margin: 0 0 8px; font-style: normal; }
.wg-footer-legal__contact { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0 0; padding: 0; list-style: none; }
.wg-footer-legal__contact a { color: inherit; text-underline-offset: 3px; }
/* Checkout keeps its slim header and footer: who sells, how to reach them and the Terms and Privacy links, without
   the site's columns (parts/checkout-footer.html). */
.wg-checkout-footer .wg-footer-legal { margin-top: 0; padding-top: 0; border-top: 0; }
/* The product page's order bar is fixed to the bottom: the footer's last line stays above it. */
body.single-product .wp-site-blocks > footer { padding-bottom: 78px; background: var(--wp--preset--color--ink, #161616); }

/* Homepage FAQ: heading on the left, questions on the right, the same accordion as the FAQ page. */
.wg-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
.wg-faq > h2 { grid-column: 1; grid-row: 1 / span 20; margin: 0; }
.wg-faq > :not(h2) { grid-column: 2; }
.wg-faq > details { margin: 0; border-bottom: 1px solid var(--wg-line); }
.wg-faq > details:first-of-type { border-top: 1px solid var(--wg-line); }
.wg-faq summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 18px 48px 18px 0; color: var(--wg-ink); font-size: 1.0625rem; font-weight: 450; line-height: 1.35; }
.wg-faq summary::-webkit-details-marker { display: none; }
.wg-faq summary::after { content: ''; position: absolute; right: 2px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--wg-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' fill='none' stroke='%23161616' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .2s, background-color .2s; }
.wg-faq details[open] summary::after { transform: rotate(45deg); background-color: var(--wg-lime); }
.wg-faq summary:hover { color: var(--wg-accent); }
.wg-faq details > p { margin: 0 0 18px; max-width: 64ch; }
@media (max-width: 760px) { .wg-faq { grid-template-columns: minmax(0, 1fr); } .wg-faq > h2, .wg-faq > :not(h2) { grid-column: 1; grid-row: auto; } .wg-faq > h2 { margin-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .wg-faq summary::after { transition: none; } }

/* My account → Your gifts (core Library): one card per gift ordered, with "Order again". */
.wg-gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin: 16px 0 32px; }
.wg-gift { display: flex; flex-direction: column; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-radius-lg); overflow: hidden; }
.wg-gift__img { display: block; aspect-ratio: 1; background: var(--wg-surface-2); }
.wg-gift__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wg-gift__body { display: grid; gap: 6px; padding: 16px; flex: 1; align-content: start; }
.wg-gift__body p { margin: 0; font-size: .875rem; }
.wg-gift__t { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.wg-gift__spec, .wg-gift__last, .wg-gift__times { color: var(--wg-muted); }
.wg-gift__chip { justify-self: start; padding: 2px 10px; border-radius: 9999px; background: var(--wg-surface-2); }
.wg-gift__body .wg-gift__chip { font-size: .8125rem; }
.wg-gift__chip--down { background: color-mix(in srgb, var(--wg-lime) 45%, transparent); }
.wg-gift__chip--up { background: color-mix(in srgb, var(--wg-peach) 50%, transparent); }
.wg-gift__chip--off { background: var(--wg-line); }
.wg-gift__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.wg-gift__actions form { margin: 0; }
.wg-gifts--compact { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.wg-gifts--compact .wg-gift__img { aspect-ratio: 4 / 3; }
.wg-home-gifts__h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 24px; }
.wg-home-gifts__h h2 { margin: 0; font-size: 1.375rem; }
.wg-gifts-empty { background: var(--wg-surface-2); border-radius: var(--wg-radius-lg); padding: 24px; display: grid; gap: 12px; justify-items: start; }
.wg-gifts-empty p { margin: 0; }
.wg-pill { display: inline-block; padding: 2px 10px; border-radius: 9999px; background: var(--wg-surface-2); font-size: .8125rem; white-space: nowrap; }
.wg-pill--muted { background: var(--wg-line); color: var(--wg-muted); }
.wg-pill--ok { background: color-mix(in srgb, var(--wg-lime) 50%, transparent); }
.wg-pill--due { background: color-mix(in srgb, var(--wg-peach) 55%, transparent); }
.wg-quote-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 600px) { .wg-gifts { grid-template-columns: 1fr 1fr; gap: 12px; } .wg-gift__body { padding: 12px; } }
@media (max-width: 380px) { .wg-gifts { grid-template-columns: 1fr; } }
/* My account: invoices, references on an order, vendor pack (core Invoices, Procurement, VendorPack). */
.wg-invoices .wg-credit-note td { color: var(--wg-muted); font-size: .875rem; }
.wg-refs { margin: 24px 0; }
.wg-po-edit { margin-top: 8px; }
.wg-po-edit summary { cursor: pointer; color: var(--wg-accent); }
.wg-po-edit form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin-top: 8px; }
.wg-vendor { margin-top: 32px; padding: 20px 24px; background: var(--wg-surface-2); border-radius: var(--wg-radius-lg); }
.wg-vendor h2 { margin-top: 0; }

/* Ask a person (inc/ask.php): FAQ, For teams, Contact and 404. Here, not in pages.css, as the Contact and 404 pages
   do not load it. 48px fields with a visible edge and 16px text (phones do not zoom), errors next to their field. */
.wg-ask { box-sizing: border-box; max-width: 792px; margin: 56px auto 0; padding: 28px 20px; border-radius: var(--wg-radius-lg); background: var(--wg-surface); scroll-margin-top: 16px; }
.wg-ask__h { margin: 0 0 8px; font-size: clamp(1.625rem, 4.5vw, 2rem); }
.wg-ask__intro { margin: 0 0 20px; color: var(--wg-muted); }
.wg-ask__form { display: grid; gap: 16px; margin: 0; }
.wg-ask__form[hidden] { display: none; }
.wg-ask__row { display: grid; gap: 16px; }
.wg-ask__f { display: grid; gap: 6px; margin: 0; }
.wg-ask__f label { font-size: .9375rem; }
.wg-ask__f :is(input, textarea) { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--wg-field); border-radius: 12px; background: var(--wg-surface); color: var(--wg-ink); font: inherit; font-size: 16px; line-height: 1.3; }
.wg-ask__f textarea { min-height: 120px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.wg-ask__f [aria-invalid="true"] { border-color: var(--wg-late); box-shadow: 0 0 0 1px var(--wg-late); }
.wg-ask__err { color: var(--wg-late); font-size: .9375rem; }
.wg-ask__err[hidden] { display: none; }
.wg-ask__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wg-ask__privacy { margin: 0; color: var(--wg-muted); font-size: .875rem; }
.wg-ask__privacy a, .wg-ask__intro a { color: inherit; text-underline-offset: 3px; }
.wg-ask__send { margin: 0; }
.wg-ask__status { margin: 0; font-size: .9375rem; }
.wg-ask__status:empty { display: none; }
.wg-ask__done { margin: 0; padding: 14px 16px; border-left: 3px solid var(--wg-accent); border-radius: 0 12px 12px 0; background: var(--wg-surface-2); font-size: 1.0625rem; }
.wg-ask__done[hidden] { display: none; }
@media (min-width: 640px) { .wg-ask { padding: 40px; } .wg-ask__row { grid-template-columns: 1fr 1fr; } }
.wg-info .wg-ask { margin: 64px max(16px, calc((100% - 792px) / 2)) 0; }
.wg-site-page .wg-ask { margin-left: 0; margin-right: 0; }
.wg-ask:last-child { margin-bottom: 64px; }

/* Proof of past work (core Proof, block writtengift/proof): shown only once the owner adds clients who agreed in
   writing. A row of logos in grey until hovered, then up to three of their words. */
.wg-proof { box-sizing: border-box; max-width: 1280px; margin: 56px auto 0; }
.wg-info .wg-proof { max-width: calc(1120px + 32px); padding: 0 16px; }
.wg-proof__h { margin: 0 0 20px; font-size: var(--wp--preset--font-size--x-large); text-wrap: balance; }
ul.wg-proof__logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.wg-proof__logo { display: grid; place-items: center; min-height: 88px; margin: 0; padding: 16px; border-radius: var(--wg-radius-lg); background: var(--wg-surface); }
.wg-proof__img { display: block; max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .2s, opacity .2s; }
.wg-proof__logo:hover .wg-proof__img { filter: none; opacity: 1; }
.wg-proof__name { font-family: var(--wp--preset--font-family--display); font-size: 1.125rem; text-align: center; }
.wg-proof__quotes { display: grid; gap: 16px; margin-top: 16px; }
.wg-proof__quote { display: grid; gap: 12px; align-content: start; margin: 0; padding: 24px; border-radius: var(--wg-radius-lg); background: var(--wg-surface); }
.wg-proof__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.wg-proof__quote blockquote { margin: 0; padding: 0; border: 0; }
.wg-proof__quote blockquote p { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 1.25rem; line-height: 1.4; }
.wg-proof__quote figcaption { display: grid; gap: 2px; font-size: .9375rem; }
.wg-proof__who { font-weight: 500; }
.wg-proof__role { color: var(--wg-muted); }
.wg-proof__gift { margin-top: 6px; color: var(--wg-accent); text-underline-offset: 3px; }
@media (min-width: 900px) { .wg-proof__quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .wg-proof__img { transition: none; } }

/* Not found: a heading, a way back and gifts to look at. */
.wg-404 { padding: 56px 0 0; }
.wg-404 h1 { margin: 0 0 12px; }
.wg-404 > p { max-width: 60ch; margin: 0 0 24px; font-size: 1.125rem; color: var(--wg-muted); }
/* Site pages (Contact, Delivery, Returns, Terms, Privacy) and who sells. */
.wg-company { margin: 0; }
.wg-site-page .wg-contact { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wg-site-page .wg-contact span { color: var(--wg-muted); }
.wg-site-page .wp-block-heading { margin-top: 40px; }