/*
Theme Name: Vista Ceramics
Theme URI: https://vistaceramics.com
Author: Vista Ceramics
Description: Custom block theme for Vista Ceramics fine art ceramic tile murals. Brand colours, fonts and sizes are Global Styles (Appearance, Editor, Styles). Pairs with the Vista Blocks plugin (mega menu, hero slider, logo) and WooCommerce.
Version: 1.1.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary (client project)
Text Domain: vista-ceramics
*/

/* ==========================================================================
   Design settings. Every value reads the WordPress Global Styles preset first,
   so changing a colour or font in the Site Editor changes the whole site.
   ========================================================================== */
:root {
  --ivory: var(--wp--preset--color--ivory, #F5F1E8);
  --charcoal: var(--wp--preset--color--charcoal, #242522);
  --sage: var(--wp--preset--color--sage, #7B8068);
  --sage-deep: var(--wp--preset--color--sage-deep, #666B55);
  --terracotta: var(--wp--preset--color--terracotta, #A65F43);
  --terracotta-deep: var(--wp--preset--color--terracotta-deep, #8C4D35);
  --brass: var(--wp--preset--color--brass, #B08A52);
  --brass-deep: var(--wp--preset--color--brass-deep, #7A5B30);
  --brass-light: var(--wp--preset--color--brass-light, #DCC49A);
  --espresso: var(--wp--preset--color--espresso, #3A2D25);
  --paper: var(--wp--preset--color--paper, #FBF8F2);
  --card: var(--wp--preset--color--card, #EEE7DB);
  --cream: var(--wp--preset--color--cream, #ECE5D8);
  --line: var(--wp--preset--color--line, #DDD4C4);
  --ink-soft: var(--wp--preset--color--ink-soft, #5A5B53);
  --white: var(--wp--preset--color--white, #FFFDF9);
  --on-dark-muted: color-mix(in srgb, var(--ivory) 78%, transparent);
  --display: var(--wp--preset--font-family--display, "Cinzel", Georgia, serif);
  --serif: var(--wp--preset--font-family--accent, "Cormorant Garamond", Georgia, serif);
  --sans: var(--wp--preset--font-family--body, "Montserrat", Arial, sans-serif);
  --fs-title: var(--wp--preset--font-size--title, clamp(26px, 3vw, 40px));
  --maxw: 1360px;
  --gutter: var(--wp--custom--gutter, clamp(16px, 3vw, 40px));
  --ease: cubic-bezier(.2, .7, .2, 1);
  --section-y: clamp(64px, 8vw, 110px);
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; }

/* Designed sections manage their own spacing */
:root :is(.announce, .site-header, .header__top, .utility, .home-content, .canvas-content, .vc-grid, .section__head, .section__head-text,
  .trust__item, .newsletter__inner, .newsletter__text, .footer__brand, .footer__col, .footer__base, .step, .review, .custom__body,
  .wp-block-cover__inner-container, .wp-block-media-text__content, .pdp-main) > * { margin-block: 0; }
:root .section > * + *, :root .newsletter > * + * { margin-block-start: clamp(32px, 4vw, 56px); }

/* ---------- Buttons (block styles) ---------- */
.wp-block-button__link { transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.wp-block-button.is-style-light .wp-block-button__link { background: var(--ivory); color: var(--charcoal); }
.wp-block-button.is-style-light .wp-block-button__link:hover { background: var(--terracotta); color: var(--ivory); }
.wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; color: var(--ivory); border-color: rgba(245,241,232,.75); }
.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: var(--ivory); color: var(--charcoal); }
.wp-block-button.is-style-accent .wp-block-button__link { background: var(--terracotta); color: var(--ivory); }
.wp-block-button.is-style-accent .wp-block-button__link:hover { background: var(--terracotta-deep); }
.wp-block-button.is-style-outline-dark .wp-block-button__link { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.wp-block-button.is-style-outline-dark .wp-block-button__link:hover { background: var(--charcoal); color: var(--ivory); }
.wp-block-button.is-style-text-link .wp-block-button__link { background: none; color: var(--charcoal); padding: 0 0 4px; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; }
.wp-block-button.is-style-text-link .wp-block-button__link:hover { color: var(--terracotta); background: none; }

.eyebrow { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; }
.eyebrow--light { color: var(--brass-light); }

/* ---------- Line icons (set by class: vc-icon vc-icon--shield etc.) ---------- */
.vc-icon::before { content: ""; display: block; flex: none; width: 28px; height: 28px; background: var(--brass); -webkit-mask: var(--vc-icon) center / contain no-repeat; mask: var(--vc-icon) center / contain no-repeat; }
.vc-icon--shield { --vc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l8%204v5c0%205-3.5%208-8%209-4.5-1-8-4-8-9V7z%27%2F%3E%3C%2Fsvg%3E"); }
.vc-icon--tiles { --vc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%278%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%2713%27%20y%3D%273%27%20width%3D%278%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2713%27%20width%3D%278%27%20height%3D%278%27%2F%3E%3Crect%20x%3D%2713%27%20y%3D%2713%27%20width%3D%278%27%20height%3D%278%27%2F%3E%3C%2Fsvg%3E"); }
.vc-icon--install { --vc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2012h13M12%206l6%206-6%206%27%2F%3E%3Cpath%20d%3D%27M21%204v16%27%2F%3E%3C%2Fsvg%3E"); }
.vc-icon--ruler { --vc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2017%2017%203l4%204L7%2021H3z%27%2F%3E%3Cpath%20d%3D%27m7%2013%202%202M10%2010l2%202M13%207l2%202%27%2F%3E%3C%2Fsvg%3E"); }
.vc-icon--leaf { --vc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2019c0-8%205-13%2014-14-1%209-6%2014-14%2014z%27%2F%3E%3Cpath%20d%3D%27M5%2019l7-7%27%2F%3E%3C%2Fsvg%3E"); }
.vc-icon--gem { --vc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%204h12l3%205-9%2011L3%209z%27%2F%3E%3Cpath%20d%3D%27M3%209h18M9%204l3%2016%203-16%27%2F%3E%3C%2Fsvg%3E"); }
.vc-icon--home { --vc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2011l9-7%209%207%27%2F%3E%3Cpath%20d%3D%27M5%2010v10h14V10%27%2F%3E%3Cpath%20d%3D%27M10%2020v-6h4v6%27%2F%3E%3C%2Fsvg%3E"); }
.vc-icon--pin { --vc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021s-7-6.2-7-11.5a7%207%200%200%201%2014%200C19%2014.8%2012%2021%2012%2021z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%279.5%27%20r%3D%272.5%27%2F%3E%3C%2Fsvg%3E"); }
.vc-icon--phone { --vc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2z%27%2F%3E%3C%2Fsvg%3E"); }
.vc-icon--mail { --vc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E"); }

/* ==========================================================================
   Header
   ========================================================================== */
/* The whole header sticks; the announcement bar above it scrolls away */
.wp-site-blocks > :has(> .site-header) { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) - 36px); z-index: 50; margin-block: 0; }
@media (max-width: 600px) { .wp-site-blocks > :has(> .site-header) { top: -36px; } }
.wp-site-blocks > * { margin-block: 0; }

.announce { background: var(--charcoal); color: var(--ivory); font-size: 11.5px; letter-spacing: .14em; text-align: center; }
.announce__track { position: relative; height: 36px; overflow: hidden; list-style: none; margin: 0; padding: 0; }
.announce__track > li { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 16px; opacity: 0; transform: translateY(100%); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.announce__track > li:first-child { opacity: 1; transform: none; }
.announce-ready .announce__track > li { opacity: 0; transform: translateY(100%); }
.announce-ready .announce__track > li.is-active { opacity: 1; transform: none; }
.announce-ready .announce__track > li.is-leaving { opacity: 0; transform: translateY(-100%); }
.announce a { color: var(--brass-light); text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }

.site-header { background: var(--ivory); color: var(--charcoal); border-bottom: 1px solid var(--line); transition: box-shadow .3s; position: relative; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(36,37,34,.08); }
.header__top { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(220px, 480px) minmax(max-content, 1fr); column-gap: 32px; align-items: center; max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter) 16px; transition: padding .35s var(--ease); }
.site-header.is-scrolled .header__top { padding-top: 8px; padding-bottom: 8px; }

/* search: a centred pill */
.header__search { justify-self: stretch; width: 100%; }
.header__search .wp-block-search__inside-wrapper { flex-direction: row-reverse; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 40px; padding: 4px 14px 4px 10px; transition: border-color .3s; }
.header__search .wp-block-search__inside-wrapper:focus-within { border-color: var(--charcoal); }
.header__search .wp-block-search__input { border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--charcoal); padding: 7px 4px; min-width: 0; outline: 0; }
.header__search .wp-block-search__input::placeholder { color: color-mix(in srgb, var(--charcoal) 50%, transparent); }
.header__search .wp-block-search__button { background: transparent; color: var(--ink-soft); border: 0; padding: 4px; margin: 0; min-width: 0; }
.header__search .wp-block-search__button svg { width: 20px; height: 20px; fill: currentColor; }
.site-header.is-scrolled .header__search .wp-block-search__input { padding-top: 4px; padding-bottom: 4px; }

.utility { justify-self: end; gap: 6px; }
.utility__link { white-space: nowrap; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; margin-right: 10px !important; }
.utility__link a { color: var(--ink-soft); }
.utility__link a:hover { color: var(--terracotta); }
.utility__account a, .utility__cart .wc-block-mini-cart__button { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; padding: 0; color: var(--charcoal); background: none; transition: background .25s, color .25s; }
.utility__account a:hover, .utility__cart .wc-block-mini-cart__button:hover { background: var(--cream); color: var(--terracotta); opacity: 1; }
.utility__account svg, .utility__cart .wc-block-mini-cart__icon { width: 24px; height: 24px; }
.utility__cart .wc-block-mini-cart__badge { background: var(--terracotta) !important; color: var(--ivory) !important; border: 0; font-size: 10px; font-weight: 600; min-width: 17px; height: 17px; }

/* ==========================================================================
   Sections
   ========================================================================== */
.home-content { margin: 0; }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--tint { background: var(--cream); }
.section--sage { background: var(--sage-deep); color: var(--ivory); }
.section--sage .eyebrow { color: var(--ivory); }
.section--sage .section__title { color: var(--ivory); }
.section__head { text-align: center; }
:root .section__head .eyebrow { margin-bottom: 14px; }
.section__title { font-family: var(--display); font-size: var(--fs-title); font-weight: 500; line-height: 1.25; letter-spacing: .03em; }
.section__title em, .feature__title em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.2em; letter-spacing: 0; color: var(--terracotta); line-height: 1.1; }
/* small brass ornament under centred section headings, echoing the logo rule */
.section__head:not(.section__head--row) .section__title::after { content: ""; display: block; width: 64px; height: 9px; margin: 18px auto 0; background: linear-gradient(var(--brass), var(--brass)) center / 100% 1px no-repeat, radial-gradient(circle, var(--brass) 0 3px, transparent 3.5px) center / 9px 9px no-repeat; }
.section--sage .section__title::after { filter: brightness(1.5); }
.section__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; text-align: left; }
.section__head-text .eyebrow { margin-bottom: 14px !important; }

/* reveal on scroll (only when JavaScript runs) */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Trust strip ---------- */
.trust { background: var(--paper); border-bottom: 1px solid var(--line); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__item { display: grid; grid-template-columns: 28px auto; column-gap: 14px; align-content: center; justify-content: center; padding: 22px 12px; }
.trust__item::before { grid-row: 1 / 3; align-self: center; }
.trust__item + .trust__item { border-left: 1px solid var(--line); }
.trust__title { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.4; }
.trust__text { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }

/* ---------- Image tiles (Shop by Space, Subjects) ---------- */
.wp-block-cover.space, .wp-block-cover.subject { position: relative; min-height: 0; padding: 22px; overflow: hidden; color: var(--white); align-items: flex-end; }
.wp-block-cover.space .wp-block-cover__image-background, .wp-block-cover.subject .wp-block-cover__image-background { transition: transform 1.4s var(--ease); }
.wp-block-cover.space:hover .wp-block-cover__image-background, .wp-block-cover.subject:hover .wp-block-cover__image-background { transform: scale(1.07); }
/* no tint on the photos (client, Oct 1): the title sits on a small ivory label instead */
.wp-block-cover.space .wp-block-cover__inner-container, .wp-block-cover.subject .wp-block-cover__inner-container { width: auto !important; max-width: 100%; background: var(--ivory); padding: 12px 16px 11px; }
.wp-block-cover.space .wp-block-cover__inner-container, .wp-block-cover.subject .wp-block-cover__inner-container { position: static; z-index: 2; width: 100%; color: var(--white); }
.wp-block-cover.space .wp-block-cover__inner-container > *, .wp-block-cover.subject .wp-block-cover__inner-container > * { position: relative; z-index: 2; }
/* the whole tile is the link */
.space__title a, .subject__title a { color: var(--charcoal); }
.space__title a::before, .subject__title a::before { content: ""; position: absolute; inset: -2000px; z-index: 3; }
.wp-block-cover.space, .wp-block-cover.subject { isolation: isolate; }
.space__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); z-index: 0; }
.space__video.is-playing { opacity: 1; }

.spaces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.wp-block-cover.space { aspect-ratio: 3 / 4.4; }
.space__title { font-family: var(--display); font-size: clamp(15px, 1.35vw, 19px); font-weight: 600; letter-spacing: .06em; line-height: 1.25; color: var(--charcoal); }
.space__cta, .subject__cta { pointer-events: none; display: inline-block; margin-top: 8px !important; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: border-color .3s; color: var(--white); }
.space:hover .space__cta, .subject:hover .subject__cta { border-color: var(--brass); }
.space__cta, .subject__cta { color: var(--brass-deep); }

.subjects { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; gap: 16px; }
.subjects > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.subjects > :nth-child(6) { grid-column: span 2; }
.wp-block-cover.subject { height: 100%; }
.subject__title { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: .07em; line-height: 1.25; color: var(--charcoal); }
.subjects > :nth-child(1) .subject__title { font-size: 30px; }
.subject__cta { border: 0; padding: 0; margin-top: 4px !important; }

/* carousel dots (phones and tablets; added by theme.js) */
.carousel-dots { display: none; justify-content: center; gap: 2px; }
.carousel-dots[hidden] { display: none !important; }
:root .section > .carousel-dots { margin-block-start: 18px; }
.carousel-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.carousel-dot::before { content: ""; width: 8px; height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--charcoal) 22%, transparent); transition: width .35s var(--ease), background .35s var(--ease); }
.carousel-dot.is-active::before { width: 22px; background: var(--brass); }
.carousel-dot:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; border-radius: 12px; }

/* ---------- Best sellers (WooCommerce product collection as a rail) ---------- */
.product-rail { position: relative; }
.product-rail .wc-block-product-template { display: grid !important; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 24px) / 4); grid-template-columns: none !important; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 0 4px; margin: 0; list-style: none; }
.product-rail .wc-block-product-template::-webkit-scrollbar { display: none; }
.product-rail .wc-block-product { scroll-snap-align: start; width: auto !important; max-width: none !important; margin: 0 !important; text-align: left; }
.product-rail .wc-block-components-product-image { margin: 0 0 16px !important; background: var(--card); overflow: hidden; }
.product-rail .wc-block-components-product-image img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease); }
.product-rail .wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }
.card__type { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-deep); margin: 0 !important; }
.card__type a { color: inherit; }
.card__type .wp-block-post-terms__separator { opacity: .6; }
.card__title { font-family: var(--serif) !important; font-size: 21px !important; font-weight: 500; line-height: 1.25; letter-spacing: 0; margin: 4px 0 6px !important; text-transform: none; }
.card__title a { color: var(--charcoal); }
.card__title a:hover { color: var(--terracotta); }
.card__price { font-weight: 600; font-size: 13.5px !important; text-align: left !important; margin: 0 !important; }
.rail__btn { position: absolute; top: 34%; z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--paper); color: var(--charcoal); box-shadow: 0 6px 20px rgba(0,0,0,.12); display: grid; place-items: center; cursor: pointer; transition: opacity .3s, transform .3s; }
.rail__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.rail__btn:hover { transform: scale(1.06); }
.rail__btn--prev { left: -22px; }
.rail__btn--next { right: -22px; }
.rail__btn[disabled] { opacity: 0; pointer-events: none; }

/* ---------- Product grids (shop, collections, search) ----------
   Cards in a row share one height, and the button sits at the bottom of each
   card, so buttons line up even when a title wraps to two lines. */
.wc-block-product-template .wc-block-product { display: flex; flex-direction: column; }
.wc-block-product-template .wc-block-product > .wp-block-woocommerce-product-button { margin-top: auto; }

/* ---------- Fine Art feature (media & text) ---------- */
.wp-block-media-text.feature { background: var(--espresso); color: var(--ivory); grid-template-columns: 53% auto; margin: 0; }
.wp-block-media-text.feature .wp-block-media-text__media { min-height: 620px; }
.wp-block-media-text.feature .wp-block-media-text__content { padding: clamp(48px, 7vw, 110px); }
.feature .eyebrow { margin-bottom: 14px !important; }
.feature__title { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.18; letter-spacing: .03em; color: var(--ivory); margin-bottom: 24px !important; }
.feature__title em { color: var(--brass-light); }
.feature__text { color: rgba(245,241,232,.82); font-weight: 300; max-width: 460px; }
.feature__list { list-style: none; padding: 0; margin: 28px 0 36px !important; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; max-width: 420px; }
.feature__list li { font-family: var(--serif); font-size: 20px; font-style: italic; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.14); margin: 0; }

/* ---------- Inspiration gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 16px; }
.wp-block-image.gallery__item { position: relative; margin: 0; overflow: hidden; height: 100%; }
.gallery > :first-child { grid-column: span 2; grid-row: span 2; }
.wp-block-image.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.wp-block-image.gallery__item:hover img { transform: scale(1.06); }
.wp-block-image.gallery__item figcaption { position: absolute; left: 18px; bottom: 16px; z-index: 1; margin: 0; color: var(--white); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: all .4s var(--ease); }
.wp-block-image.gallery__item figcaption { padding: 7px 10px 6px; background: var(--ivory); color: var(--charcoal); } /* ivory label, no tint on the photo (client, Oct 1) */
.wp-block-image.gallery__item:hover figcaption { opacity: 1; transform: none; }
.gallery { grid-auto-flow: dense; }
.gallery > .gallery__item--big { grid-column: span 2; grid-row: span 2; }
.gallery > .gallery__item--tall { grid-row: span 2; }
.wp-block-image.gallery__item > a { display: block; height: 100%; }
/* films: "vc-play--<name>" tiles play while on screen (theme.js) */
.gallery__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease), transform 1.4s var(--ease); pointer-events: none; }
.gallery__video.is-playing { opacity: 1; }
.wp-block-image.gallery__item:hover .gallery__video { transform: scale(1.06); }
.gallery__pause { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(33,27,22,.5); color: var(--white); cursor: pointer; opacity: 0; transition: opacity .3s var(--ease), background-color .2s; }
.gallery__pause:hover { background: rgba(33,27,22,.78); }
.gallery__item:hover .gallery__pause, .gallery__pause:focus-visible, .gallery__pause.is-paused { opacity: 1; }
.gallery__pause svg { width: 14px; height: 14px; fill: currentColor; }
.gallery__pause .i-play, .gallery__pause.is-paused .i-pause { display: none; }
.gallery__pause.is-paused .i-play { display: block; }
@media (hover: none) { .gallery__pause { opacity: .9; } }
.vc-focus--right img, .vc-focus--right video { object-position: 70% 50%; }
.vc-focus--left img, .vc-focus--left video { object-position: 30% 50%; }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(245,241,232,.22); border: 1px solid rgba(245,241,232,.22); }
.step { background: var(--sage-deep); padding: 44px 36px; }
.step__num { font-family: var(--serif); font-size: 58px; color: var(--brass-light); line-height: 1; font-style: italic; }
.step__title { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: .08em; margin: 18px 0 10px !important; color: var(--ivory); }
.step p { color: var(--ivory); }

/* ---------- Custom murals ---------- */
.custom__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.wp-block-image.custom__media { margin: 0; aspect-ratio: 5 / 4; box-shadow: 30px 30px 0 var(--cream); overflow: hidden; }
.wp-block-image.custom__media img { width: 100%; height: 100%; object-fit: cover; }
.custom__text { color: var(--ink-soft); margin: 20px 0 32px !important; max-width: 480px; font-size: 17px; font-weight: 300; }
.custom__body .eyebrow { margin-bottom: 14px !important; }
.custom__body .wp-block-buttons { gap: 24px; align-items: center; }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review { background: var(--paper); padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; }
.review__stars { color: var(--brass); letter-spacing: 3px; font-size: 15px; line-height: 1; }
.review__quote { font-family: var(--serif); font-size: 22px; line-height: 1.45; font-style: italic; flex: 1; }
.review__name { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

/* ==========================================================================
   Footer
   ========================================================================== */
.newsletter { background: var(--sage-deep); color: var(--ivory); padding-top: 60px; padding-bottom: 36px; }
.newsletter__inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.newsletter__title { font-family: var(--display); font-size: 28px; font-weight: 500; letter-spacing: .04em; margin-bottom: 6px !important; color: var(--ivory); }
.newsletter__form { display: flex; flex: 1; max-width: 520px; min-width: 260px; }
.newsletter__form input { flex: 1; min-width: 0; padding: 15px 18px; border: 1px solid rgba(245,241,232,.7); border-radius: 0; background: transparent; color: var(--white); font: inherit; outline: 0; }
.newsletter__form input::placeholder { color: rgba(245,241,232,.8); }
.newsletter__form input:focus { border-color: var(--ivory); }
.newsletter__form .wp-element-button { cursor: pointer; background: var(--charcoal); color: var(--ivory); border-radius: 0; }
.newsletter__form .wp-element-button:hover { background: var(--terracotta); }
.newsletter__note { flex-basis: 100%; text-align: right; font-size: 13px; color: var(--brass-light); margin: 0; }
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 30px; border-top: 1px solid rgba(245,241,232,.22); }
:root .newsletter > .values { margin-block-start: 44px; }
.value { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.value.vc-icon::before { width: 24px; height: 24px; background: var(--brass-light); }

.site-footer { background: var(--espresso); color: var(--on-dark-muted); padding-top: 72px; padding-bottom: 28px; font-size: 14px; }
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--brass-light); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer__about { margin: 16px 0 20px !important; max-width: 320px; font-weight: 300; }
.footer__contact { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; margin-bottom: 10px !important; }
.footer__contact.vc-icon::before { width: 17px; height: 17px; margin-top: 2px; background: var(--brass-light); }
.footer__social { margin-top: 20px !important; gap: 10px; }
.footer__social .wp-social-link { color: var(--on-dark-muted); }
.footer__social.is-style-logos-only .wp-social-link a { padding: 9px; border: 1px solid rgba(220,196,154,.35); border-radius: 50%; }
.footer__social .wp-social-link svg { width: 17px; height: 17px; }
.footer__heading { color: var(--brass-light); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px !important; }
.footer__links { list-style: none; padding: 0; margin: 0; }
.footer__links li { margin: 0; }
.footer__links a { display: block; padding: 5px 0; transition: color .2s; }
.footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(220,196,154,.18); font-size: 12px; color: color-mix(in srgb, var(--ivory) 68%, transparent); }
:root .site-footer > .footer__base { margin-block-start: 56px; }

/* ==========================================================================
   Pages, posts and shop pages
   ========================================================================== */
.page-main { padding-top: clamp(40px, 5vw, 72px); padding-bottom: var(--section-y); }
.page-title { font-family: var(--display); font-size: var(--fs-title); letter-spacing: .04em; }
.page-404 { text-align: center; }
.page-main .entry-content a:not(.wp-element-button) { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; }
.wc-block-components-product-price, .wc-block-grid__product-price { color: var(--charcoal); }
.wc-block-components-product-sale-badge, .onsale { background: var(--terracotta) !important; color: var(--ivory) !important; border: 0 !important; border-radius: 0 !important; }
.woocommerce-breadcrumb, .wc-block-breadcrumbs { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.wp-block-post-title a:hover { color: var(--terracotta); }

/* ==========================================================================
   Content pages (Size Guide, Custom Murals, Contact, Our Story...)
   ========================================================================== */
/* zero-specificity reset, so the spacing rules below always win */
:root :where(.page-hero, .page-hero .wp-block-cover__inner-container, .prose, .split__body, .info-card, .cta-band, .form-intro, .contact-info, .shop-story__intro, .post-foot) > * { margin-block: 0; }

/* page banner: photo with a dark scrim, or plain on cream */
.wp-block-cover.page-hero { min-height: clamp(320px, 38vw, 460px); padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 56px); align-items: flex-end; color: var(--ivory); overflow: hidden; }
.wp-block-cover.page-hero .wp-block-cover__image-background { animation: vcHeroZoom 9s var(--ease) both; }
@keyframes vcHeroZoom { from { transform: scale(1.08); } }
/* no tint on the banner photo (client, Oct 1): the text carries a soft shadow instead */
.wp-block-cover.page-hero { background-color: var(--charcoal); } /* dark while the photo loads */
.wp-block-cover.page-hero .wp-block-cover__inner-container { text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.4); }
.wp-block-cover.page-hero .wp-block-button__link { text-shadow: none; }
.wp-block-cover.page-hero .wp-block-cover__inner-container { position: relative; z-index: 2; color: var(--ivory); }
.page-hero .crumbs { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 22px !important; }
.page-hero .crumbs a:hover { color: var(--brass-light); }
.crumbs--light { color: var(--ivory); }
.page-hero .eyebrow { margin-bottom: 14px !important; }
.page-hero__title { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 4vw, 52px); line-height: 1.15; letter-spacing: .03em; color: var(--ivory); max-width: 820px; }
.page-hero__title em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15em; letter-spacing: 0; color: var(--brass-light); }
/* banner text lines up with the 1360px page column, even though each block is centred by the layout */
.page-hero .wp-block-cover__inner-container > .page-hero__intro, .page-hero--plain > .page-hero__intro, .page-hero .wp-block-cover__inner-container > .page-hero__title, .page-hero--plain > .page-hero__title { margin-left: max(0px, calc((100% - var(--maxw)) / 2)) !important; margin-right: auto !important; }
.page-hero__intro { max-width: 620px; margin-top: 16px !important; font-weight: 400; font-size: 16.5px; line-height: 1.7; color: var(--ivory); }
.wp-block-cover.page-hero .eyebrow { color: var(--ivory); }
.wp-block-cover.page-hero :is(.page-hero__intro, .crumbs, .eyebrow) { text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 10px rgba(0,0,0,.55), 0 2px 22px rgba(0,0,0,.45); }
.page-hero__cta { margin-top: 28px !important; gap: 14px; }
.page-hero--plain { background: var(--cream); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(32px, 4vw, 52px); color: var(--charcoal); }
.page-hero--plain .crumbs { color: var(--ink-soft); }
.page-hero--plain .crumbs a:hover { color: var(--terracotta); }
.page-hero--plain .page-hero__title { color: var(--charcoal); }
.page-hero--plain .page-hero__title em { color: var(--terracotta); }
.page-hero--plain .page-hero__intro, .page-hero--plain .post-meta { color: var(--ink-soft); }

/* reading column */
.prose { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
.prose--left { margin-left: 0 !important; }
:root .prose > * + * { margin-block-start: 1.1em; }
:root .prose > h2 { margin-block-start: 2em; }
:root .prose > h3 { margin-block-start: 1.6em; }
.prose > :first-child { margin-block-start: 0 !important; }
.prose h2, .split__body h2:not(.section__title) { font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: .03em; line-height: 1.25; }
.prose h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.prose p, .split__body p, .info-card p, .post-body p, .form-intro__text { color: var(--ink-soft); line-height: 1.8; }
.prose a:not(.wp-element-button), .split__body p a, .callout a, .faq a, .post-body p a, .post-body li a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 30px; color: var(--ink-soft); line-height: 1.7; margin: 0; }
.check-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 6px; border: solid var(--brass); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
.check-list strong, .steps-list strong { color: var(--charcoal); font-weight: 600; }
.steps-list { list-style: none; counter-reset: vcstep; padding: 0; margin: 0; display: grid; gap: 16px; }
.steps-list li { counter-increment: vcstep; position: relative; padding-left: 52px; color: var(--ink-soft); line-height: 1.7; margin: 0; }
.steps-list li::before { content: counter(vcstep, decimal-leading-zero); position: absolute; left: 0; top: -.15em; font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--brass); line-height: 1; }
.callout { background: var(--paper); border-left: 3px solid var(--brass); padding: 18px 22px; }
.callout p { font-size: 14.5px; color: var(--charcoal); line-height: 1.7; }
.narrow { max-width: 980px; margin-left: auto !important; margin-right: auto !important; }

/* tables (sizes, specifications) */
.wp-block-table.spec-table { margin: 0; }
.spec-table table { width: 100%; border-collapse: collapse; table-layout: auto !important; font-size: 14.5px; background: transparent; }
.spec-table th, .spec-table td { border: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 13px 16px 13px 0; text-align: left; vertical-align: top; }
.spec-table thead th { white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-deep); border-bottom: 1px solid var(--charcoal) !important; }
.spec-table tbody td:first-child { font-weight: 600; color: var(--charcoal); white-space: nowrap; }
.spec-table tbody td { color: var(--ink-soft); }
.spec-table tbody tr:last-child td { border-bottom: 0 !important; }

/* image + text */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--text { align-items: start; }
.wp-block-image.split__media { margin: 0; overflow: hidden; }
.wp-block-image.split__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.split--square .wp-block-image.split__media img { aspect-ratio: 1; } /* a whole tile design */
/* Ready to Hang collection (Oct 5): the client's film beside the steps, a photo under the story */
.rth-how { align-items: center; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } /* the film gets the larger column; phones stack (max-width: 980px rule below) */
.wp-block-image.rth-how__film { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--cream); }
.wp-block-image.rth-how__film img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.rth-how__film:hover .gallery__pause { opacity: 1; }
.wp-block-image.rth-story__img { margin: 28px 0 0; }
.wp-block-image.rth-story__img img { display: block; width: 100%; height: auto; }
#how, #murals, #questions { scroll-margin-top: 130px; }
:root .split__body > * + * { margin-block-start: 18px; }
.split__body .section__title { text-align: left; }
.split__body .eyebrow + .section__title { margin-top: 14px !important; }
.split__body--center { display: flex; align-items: center; justify-content: center; }
.split__lead { font-size: 17px; }

/* info cards */
.info-grid { display: grid; gap: 20px; }
.info-grid--two { grid-template-columns: repeat(2, 1fr); }
.info-grid--three { grid-template-columns: repeat(3, 1fr); }
.info-grid--four { grid-template-columns: repeat(4, 1fr); }
.info-card { background: var(--paper); padding: 30px 28px; border-top: 2px solid var(--brass); display: flex; flex-direction: column; }
.section--tint .info-card { background: var(--ivory); }
:root .info-card > * + * { margin-block-start: 10px; }
.info-card h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.info-card__link { margin-top: auto !important; padding-top: 12px; }
.info-card__link a { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-deep); text-decoration: none !important; }
.info-card__link a:hover { color: var(--terracotta); }

/* call to action band */
.cta-band { max-width: 720px; margin: 0 auto !important; text-align: center; }
.cta-band .section__title { color: var(--ivory); }
.cta-band .section__title::after { display: none; }
.cta-band p { margin-top: 14px !important; color: rgba(245,241,232,.86); font-weight: 300; font-size: 16.5px; }
.cta-band .wp-block-buttons { margin-top: 28px !important; justify-content: center; gap: 14px; }

/* FAQ (details blocks) */
.faq { max-width: 860px; margin-left: auto !important; margin-right: auto !important; border-top: 1px solid var(--line); }
:root .faq > * { margin: 0; }
.faq .wp-block-details { border-bottom: 1px solid var(--line); padding: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 22px; color: var(--brass-deep); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--terracotta); }
.faq .wp-block-details > p { margin: 0 0 20px; color: var(--ink-soft); line-height: 1.75; max-width: 720px; }

/* forms beside an introduction */
.form-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.form-intro .section__title { text-align: left; }
.form-intro .section__title::after { display: none; }
:root .form-intro > * + *, :root .contact-info > * + * { margin-block-start: 16px; }
.form-intro .eyebrow + .section__title { margin-top: 14px !important; }
.contact-info .section__title { text-align: left; }
.contact-info .section__title::after { display: none; }
.contact-line { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.6; }
.contact-line.vc-icon::before { width: 20px; height: 20px; margin-top: 3px; }
.contact-line a:hover, .contact-note a { color: var(--terracotta); }
.contact-note { color: var(--ink-soft); }
.contact-note a { text-decoration: underline; text-underline-offset: 3px; }

/* inspiration wall */
.gallery-wall { columns: 3 300px; column-gap: 16px; }
:root .gallery-wall > .gallery__item { break-inside: avoid; margin: 0 0 16px; height: auto; }
.gallery-wall .wp-block-image.gallery__item img { height: auto; }
.gallery-wall .wp-block-image.gallery__item figcaption { opacity: 1; transform: none; }

/* shop page: story + FAQ */
.shop-page { margin: 0; }
:root .shop-page > * { margin-block: 0; }
.shop-story { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.shop-story .section__title { text-align: left; }
.shop-story .section__title::after { display: none; }
.shop-story__intro .eyebrow { margin-bottom: 14px !important; }
.shop-story__text { margin-top: 20px !important; color: var(--ink-soft); font-weight: 300; line-height: 1.8; max-width: 480px; }
.shop-story .faq { max-width: none; margin: 0 !important; }

/* blog */
.blog-page, .post-page { margin: 0; }
:root .blog-page > *, :root .post-page > * { margin-block: 0; }
.blog-list { padding-top: clamp(40px, 5vw, 72px); }
.post-cards { gap: clamp(24px, 3vw, 40px) !important; }
.post-card__image { margin: 0 0 16px !important; overflow: hidden; }
.post-card__image img { transition: transform 1.2s var(--ease); }
.post-card__image:hover img { transform: scale(1.04); }
.post-card__date { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-deep); }
.post-card__title { font-family: var(--serif) !important; font-size: 26px !important; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.2; margin: 6px 0 8px !important; }
.post-card__title a:hover { color: var(--terracotta); }
.post-card__excerpt { color: var(--ink-soft); }
.post-card__excerpt .wp-block-post-excerpt__more-link { color: var(--terracotta); }
.post-meta { margin-top: 12px !important; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.post-hero-image { margin: clamp(32px, 4vw, 56px) auto 0 !important; }
.post-body { padding-top: clamp(32px, 4vw, 56px); padding-bottom: 20px; }
.post-body p, .post-body li { font-size: 17px; }
.post-body h2 { font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px); margin-top: 1.8em !important; }
.post-body .wp-block-image { margin: 2em 0; }
.post-foot { padding: 20px 0 var(--section-y); }

/* ==========================================================================
   Cart, checkout, order confirmation and account
   ========================================================================== */
.woocommerce-cart main, .woocommerce-checkout main, .woocommerce-order-received main { padding-bottom: var(--section-y); }
.woocommerce-cart .wp-block-post-title, .woocommerce-checkout .wp-block-post-title, .woocommerce-account .page-title { font-family: var(--display); font-size: var(--fs-title); letter-spacing: .04em; }
.wc-block-components-button:not(.is-link), .woocommerce button.button, .woocommerce a.button, .woocommerce input.button { background: var(--charcoal) !important; color: var(--ivory) !important; border: 0 !important; border-radius: 2px !important; font-family: var(--sans) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase !important; padding: 15px 28px !important; transition: background .3s var(--ease); }
.wc-block-components-button:not(.is-link):hover, .woocommerce button.button:hover, .woocommerce a.button:hover { background: var(--terracotta) !important; }
.wc-block-components-text-input input, .wc-block-components-textarea, .wc-block-components-combobox .wc-block-components-combobox-control input, .wc-blocks-components-select .wc-blocks-components-select__select, .woocommerce form .form-row .input-text, .woocommerce form .form-row select { border-radius: 2px !important; border-color: var(--line) !important; background-color: var(--white) !important; font-family: var(--sans) !important; }
.wc-block-components-text-input input:focus, .woocommerce form .form-row .input-text:focus { border-color: var(--charcoal) !important; box-shadow: none !important; }
.wc-block-components-title, .wc-block-cart__totals-title, .wc-block-checkout__form .wc-block-components-checkout-step__title, .wc-block-components-checkout-order-summary__title-text { font-family: var(--display) !important; font-weight: 500 !important; letter-spacing: .06em !important; }
.wc-block-components-product-name, .wc-block-cart-item__product .wc-block-components-product-name { font-family: var(--serif) !important; font-size: 20px !important; color: var(--charcoal) !important; }
.wc-block-components-product-metadata, .wc-block-components-product-details { color: var(--ink-soft); font-size: 13px; }
.wc-block-components-sidebar .wc-block-components-panel, .wp-block-woocommerce-checkout-order-summary-block, .wc-block-cart .wc-block-components-sidebar { background: var(--paper); }
.wp-block-woocommerce-checkout-order-summary-block { padding: 8px 18px; border: 1px solid var(--line) !important; border-radius: 0 !important; }
/* cart totals as a card: WooCommerce puts the column gap inside the sidebar as left padding only */
body .wc-block-cart .wc-block-cart__sidebar { padding: 22px 28px 12px !important; border: 1px solid var(--line); align-self: flex-start; }
/* below WooCommerce's large layout the card sits under the items and the "Cart totals" title is hidden */
.wc-block-cart:not(.is-large) .wc-block-cart__sidebar { margin-top: 28px !important; padding-top: 6px !important; }
.wc-block-cart:not(.is-large) .wc-block-cart__totals-title + * { border-top: 0 !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value, .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-family: var(--serif); font-size: 22px; }
.wc-block-components-notice-banner { border-radius: 2px !important; }
.wc-block-cart .wc-block-cart__empty-cart__title, .wp-block-woocommerce-empty-cart-block h2 { font-family: var(--display); }
/* My Account (classic) */
.woocommerce-account .page-main.is-layout-constrained > *, .woocommerce-account .page-main .entry-content > * { max-width: 1100px; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); margin: 0; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 11px 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft) !important; text-decoration: none !important; }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { color: var(--terracotta) !important; }
.checkout-main { padding-top: clamp(24px, 3vw, 40px); padding-bottom: var(--section-y); }
.checkout-header { max-width: var(--maxw); margin: 0 auto !important; padding: 14px var(--gutter); border-bottom: 1px solid var(--line); align-items: center; }
.checkout-header .logo__full { display: none; }
.checkout-header .logo__compact { opacity: 1 !important; height: 40px !important; }
.checkout-header__note { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 !important; }
.checkout-header__note a { color: var(--charcoal); text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--paper); padding: 28px !important; }
.woocommerce-account h2 { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: .06em; }

/* ==========================================================================
   Tablet and phone
   ========================================================================== */
@media (max-width: 1180px) {
  .product-rail .wc-block-product-template { grid-auto-columns: calc((100% - 2 * 24px) / 3); }
}
@media (max-width: 980px) {
  .split, .form-split, .shop-story { grid-template-columns: minmax(0, 1fr); }
  .info-grid--three, .info-grid--four { grid-template-columns: repeat(2, 1fr); }
  .header__top { grid-template-columns: auto 1fr auto; column-gap: 8px; }
  .header__top, .site-header.is-scrolled .header__top { padding-top: 8px; padding-bottom: 8px; }
  .header__search { display: none !important; }
  .header__top .logo { justify-self: start; }
  .utility__link { display: none; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__item:nth-child(3) { border-left: 0; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  /* Shop by Space becomes a swipeable carousel: runs edge to edge, cards snap into
     place, the next card peeks in from the screen edge, dots below (theme.js) */
  :root .spaces { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 40%; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: none !important; margin-left: calc(-1 * var(--wp--style--root--padding-left, 16px)) !important; margin-right: calc(-1 * var(--wp--style--root--padding-right, 16px)) !important; padding-inline: var(--wp--style--root--padding-left, 16px); scroll-padding-inline: var(--wp--style--root--padding-left, 16px); }
  .spaces::-webkit-scrollbar { display: none; }
  .spaces > * { scroll-snap-align: start; }
  .carousel-dots { display: flex; }
  .wp-block-media-text.feature { grid-template-columns: 100% !important; }
  .wp-block-media-text.feature .wp-block-media-text__media { min-height: 380px; grid-column: 1; grid-row: 1; }
  .wp-block-media-text.feature .wp-block-media-text__content { grid-column: 1; grid-row: 2; }
  .subjects { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .steps { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .wp-block-image.gallery__item figcaption { opacity: 1; transform: none; }
  .custom__inner { grid-template-columns: 1fr; }
  .reviews { grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .value { justify-content: flex-start; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .rail__btn { display: none; }
}
@media (max-width: 640px) {
  .info-grid--two, .info-grid--three, .info-grid--four { grid-template-columns: 1fr; }
  .wp-block-cover.page-hero { min-height: 300px; }
  .gallery-wall { columns: 2 140px; column-gap: 10px; }
  :root .gallery-wall > .gallery__item { margin-bottom: 10px; }
  .faq summary { font-size: 19px; }
  /* product grids on phones: titles wrap between words, buttons stay on one line */
  .wc-block-product-template .wc-block-product .wp-block-post-title { font-size: 17px !important; letter-spacing: .02em; overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .wc-block-product-template .wc-block-product .wp-block-button__link { width: 100%; padding: 13px 8px; letter-spacing: .1em; font-size: 11px; }
  .utility { gap: 0; }
  .utility__account a, .utility__cart .wc-block-mini-cart__button { width: 36px; height: 36px; }
  .trust__item { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 8px; padding: 18px 8px; }
  .trust__item::before { grid-row: auto; }
  :root .spaces { grid-auto-columns: 78%; gap: 12px; }
  .wp-block-cover.space { padding: 14px; }
  .space__title { font-size: 22px; }
  .product-rail .wc-block-product-template { grid-auto-columns: 78%; gap: 16px; }
  .subjects { grid-auto-rows: 170px; gap: 10px; }
  .wp-block-cover.subject { padding: 14px; }
  .subject__title { font-size: 20px; }
  .subjects > :nth-child(1) .subject__title { font-size: 30px; }
  .gallery { grid-auto-rows: 150px; gap: 10px; }
  .wp-block-image.gallery__item figcaption { left: 12px; bottom: 10px; font-size: 10px; }
  .wp-block-image.custom__media { box-shadow: 14px 14px 0 var(--cream); }
  .footer__grid { grid-template-columns: 1fr; }
  .newsletter__form { flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}