/* ────────────────────────────────────────────────────────────
       Design tokens — 溫馨 (warm) palette
       ──────────────────────────────────────────────────────────── */
    :root {
      --cream:       #fbf5ea;
      --ivory:       #f3e7cf;
      --sand:        #ead8b8;
      --blush:       #ecc9b3;
      --rose:        #d59a82;
      --terracotta:  #b56b4d;
      --cognac:      #8b4a2c;
      --ink:         #3a2620;
      --ink-soft:    #5a4234;
      --ink-70:      rgba(58,38,32,0.72);
      --ink-50:      rgba(58,38,32,0.5);
      --ink-30:      rgba(58,38,32,0.3);
      --line:        rgba(58,38,32,0.12);
      --sage:        #8a8a6b;
      --gold:        #b08658;
      --wa:          #25D366;

      --display: 'Cormorant Garamond', 'Times New Roman', serif;
      --body:    'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      --cn:      'Noto Serif SC', 'Songti SC', 'STSong', serif;

      --r-sm: 6px;
      --r:    14px;
      --r-lg: 22px;
      --r-pill: 999px;

      --shadow-sm: 0 2px 8px rgba(58,38,32,0.06);
      --shadow:    0 12px 32px rgba(58,38,32,0.08);
      --shadow-lg: 0 24px 64px rgba(58,38,32,0.16);

      --container: 1280px;
      --gutter: clamp(20px, 4.5vw, 56px);
    }

    /* ── Base ─── */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
    body {
      margin: 0; background: var(--cream); color: var(--ink);
      font-family: var(--body); font-size: 16px; line-height: 1.6;
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    }
    img, svg { display: block; max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; transition: color .2s; }
    button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
    h1, h2, h3, h4 { margin: 0; font-weight: 400; }
    ul, ol { margin: 0; padding: 0; list-style: none; }
    p { margin: 0; }
    .sr-only { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
    .skip-link { position: fixed; top: 0; left: 0; padding: 8px 14px; background: var(--ink); color: var(--cream); z-index: 1000; transform: translateY(-100%); }
    .skip-link:focus { transform: translateY(0); }

    /* ── Type primitives ─── */
    .display {
      font-family: var(--display); font-weight: 400;
      font-size: clamp(30px, 4.6vw, 56px); line-height: 1.05;
      letter-spacing: -0.4px; color: var(--ink);
    }
    .display em { font-style: italic; color: var(--terracotta); font-weight: 500; }
    .display--xl  { font-size: clamp(40px, 6vw, 76px); line-height: 1; }
    .cn {
      font-family: var(--cn); font-weight: 500; letter-spacing: 4px;
      color: var(--cognac); font-size: 0.7em;
    }
    .eyebrow {
      font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
      color: var(--terracotta); font-weight: 600; display: inline-block;
    }
    .eyebrow--rule::before {
      content: ""; display: inline-block; width: 24px; height: 1px;
      background: currentColor; margin-right: 12px; vertical-align: middle;
    }

    /* ── Buttons ─── */
    .btn {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 26px; border-radius: var(--r-pill);
      font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
      font-weight: 600; line-height: 1; cursor: pointer;
      transition: transform .15s, background .2s, color .2s, box-shadow .2s;
    }
    .btn:active { transform: translateY(1px); }
    .btn--solid   { background: var(--ink); color: var(--cream); }
    .btn--solid:hover { background: var(--terracotta); }
    .btn--outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
    .btn--outline:hover { background: var(--ink); color: var(--cream); }
    .btn--wa { background: var(--wa); color: #fff; }
    .btn--wa:hover { background: #1ebb59; }
    .btn--terra { background: var(--terracotta); color: var(--cream); }
    .btn--terra:hover { background: var(--cognac); }

    /* ── Container ─── */
    .wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

    /* ────────────────────────────────────────────────────────────
       Topbar — slim utility row
       ──────────────────────────────────────────────────────────── */
    .topbar {
      background: var(--cognac); color: var(--cream);
      font-size: 11.5px; letter-spacing: 0.6px;
    }
    .topbar__inner {
      max-width: var(--container); margin: 0 auto;
      padding: 8px var(--gutter);
      display: flex; gap: 16px; align-items: center; justify-content: center;
      flex-wrap: wrap;
    }
    .topbar__inner > span { white-space: nowrap; }
    .topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blush); display: inline-block; }
    .topbar__sep { opacity: .4; }
    .topbar a { color: var(--blush); font-weight: 600; }
    .topbar a:hover { color: var(--cream); }

    /* ────────────────────────────────────────────────────────────
       Header
       ──────────────────────────────────────────────────────────── */
    .header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(251,245,234,0.92); backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--line);
    }
    /* WordPress admin bar (32px on desktop, 46px on mobile) is
       position:fixed at the very top of the viewport for logged-in
       users. Without an offset it overlaps the top of our sticky
       header — visually the brand + nav get squashed against an
       invisible ceiling, making the items look top-aligned even
       though .header__inner is `align-items:center`. Push the
       sticky header down by the admin-bar height so it has a real
       top edge to center against. */
    body.admin-bar .header { top: 32px; }
    @media (max-width: 782px) {
      body.admin-bar .header { top: 46px; }
    }
    /* Header sizing matches the static Shop.html / Cart.html wireframe:
       padding 14px + logo 48/60px = ~76px (mobile) / ~88px (desktop) tall.
       No min-height — the row sizes itself off the logo. */
    .header__inner {
      max-width: var(--container); margin: 0 auto;
      padding: 14px var(--gutter);
      display: flex; align-items: center !important; justify-content: space-between; gap: 16px;
    }
    .header__inner > * { align-self: center; }

    /* Belt-and-braces: force the brand link AND any logo inner anchor
       to behave as a tight flex container so the image cannot drift to
       the top or bottom of the header bar (some page builders inject
       extra inline-block wrappers that re-baseline the image). */
    .header__inner .brand,
    .header__inner .brand .custom-logo-link {
      display: inline-flex !important;
      align-items: center !important;
      align-self: center !important;
      height: auto;
      line-height: 0;
      margin: 0;
      padding: 0;
    }
    .header__inner .brand img,
    .header__inner .brand .custom-logo,
    .header__inner .brand .brand__logo {
      align-self: center !important;
      vertical-align: middle;
      margin: 0;
    }
    .brand { display: flex; align-items: center; gap: 12px; }
    .brand__logo,
    .brand .custom-logo,
    .brand .custom-logo-link img,
    .brand img {
      height: 48px !important;
      max-height: 48px !important;
      width: auto !important;
      max-width: 240px;
      display: block;
      object-fit: contain;
      transition: transform .25s;
    }
    /* WP's custom-logo link wraps the image in its own <a> — make sure
       it also centers vertically inside .brand. */
    .brand .custom-logo-link {
      display: inline-flex;
      align-items: center;
      line-height: 0;
    }
    @media (min-width: 720px) {
      .brand__logo,
      .brand .custom-logo,
      .brand .custom-logo-link img,
      .brand img {
        height: 60px !important;
        max-height: 60px !important;
      }
    }
    .brand:hover .brand__logo,
    .brand:hover .custom-logo,
    .brand:hover img { transform: scale(1.04); }
    .brand__name {
      font-family: var(--display); font-weight: 500; font-size: 19px;
      letter-spacing: 1.5px; color: var(--ink); line-height: 1.1;
    }
    .brand__cn {
      font-family: var(--cn); font-size: 11px; letter-spacing: 6px;
      color: var(--cognac); display: block; margin-top: 2px;
    }
    .nav { display: none; }
    .nav__list { display: flex; gap: 26px; font-size: 13px; letter-spacing: 0.4px; font-weight: 500; }
    .nav__list a { padding: 6px 0; position: relative; }
    .nav__list a::after {
      content: ""; position: absolute; left: 0; bottom: 0;
      width: 0; height: 1px; background: var(--terracotta); transition: width .25s;
    }
    .nav__list a:hover { color: var(--terracotta); }
    .nav__list a:hover::after { width: 100%; }
    .header__tools { display: flex; gap: 8px; align-items: center; }
    .icon-btn {
      width: 40px; height: 40px; border-radius: 50%;
      display: grid; place-items: center; color: var(--ink);
      transition: background .15s;
      position: relative;
    }
    .icon-btn:hover { background: var(--ivory); }
    /* Cart count badge — small terracotta pill in the top-right corner
       of the cart icon-btn, sitting half-on the edge. */
    .icon-btn__count {
      position: absolute; top: -2px; right: -4px;
      min-width: 18px; height: 18px;
      padding: 0 5px; box-sizing: border-box;
      background: var(--terracotta); color: var(--cream);
      border: 2px solid var(--cream);
      border-radius: 999px;
      display: grid; place-items: center;
      font-family: var(--body);
      font-size: 10px; font-weight: 700; line-height: 1;
      letter-spacing: 0;
      pointer-events: none;
    }
    .icon-btn__count:empty { display: none; }
    .header__cta { display: none; }
    .header__cta .btn { padding: 11px 18px; font-size: 11px; }

    /* mobile menu */
    .mobile-menu {
      position: fixed; inset: 0; z-index: 200;
      background: var(--cream); padding: 24px var(--gutter);
      transform: translateX(100%); transition: transform .3s ease;
      display: flex; flex-direction: column; gap: 10px;
    }
    .mobile-menu.is-open { transform: translateX(0); }
    .mobile-menu__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
    .mobile-menu a {
      display: flex; justify-content: space-between; align-items: center;
      padding: 18px 0; border-bottom: 1px solid var(--line);
      font-family: var(--display); font-size: 26px; color: var(--ink);
    }
    .mobile-menu a small { font-family: var(--cn); font-size: 12px; color: var(--cognac); letter-spacing: 3px; }
    .mobile-menu__foot { margin-top: auto; padding-top: 20px; display: flex; gap: 10px; flex-direction: column; }

    /* ────────────────────────────────────────────────────────────
       Hero
       ──────────────────────────────────────────────────────────── */
    .hero {
      position: relative; overflow: hidden;
      background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 60%, var(--ivory) 100%);
      padding: clamp(36px, 5vw, 80px) 0 clamp(56px, 7vw, 120px);
    }
    .hero__bg {
      position: absolute; right: -5%; top: 20%; width: 60%; height: 60%;
      background: radial-gradient(ellipse, var(--blush) 0%, transparent 65%);
      opacity: .35; filter: blur(40px); z-index: 0; pointer-events: none;
    }
    .hero__inner {
      max-width: var(--container); margin: 0 auto;
      padding: 0 var(--gutter);
      position: relative; z-index: 1;
      display: grid; grid-template-columns: 1fr; gap: 36px;
      align-items: center;
    }
    .hero__copy { max-width: 600px; }
    .hero__eyebrow { margin-bottom: 16px; }
    .hero__h1 { margin-bottom: 12px; }
    .hero__h1 .cn { display: block; margin-top: 10px; }
    .hero__sub {
      font-family: var(--display); font-weight: 500;
      font-size: clamp(20px, 2.5vw, 27px); line-height: 1.3;
      color: var(--ink-soft); margin: 14px 0 0; max-width: 540px;
    }
    .hero__lede {
      font-size: 16px; line-height: 1.65; color: var(--ink-70);
      margin: 16px 0 28px; max-width: 520px;
    }
    .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .hero__cta .btn--wa svg { margin-right: -2px; }
    .hero__trust {
      display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 36px;
      padding-top: 24px; border-top: 1px solid var(--line);
    }
    .hero__trust-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-70); }
    .hero__trust-item svg { color: var(--terracotta); flex-shrink: 0; }

    .hero__collage {
      position: relative; height: clamp(360px, 50vw, 560px);
    }
    .hero__tile {
      position: absolute; background-size: cover; background-position: center;
      box-shadow: var(--shadow);
    }
    .hero__tile--big {
      left: 4%; top: 0; width: 64%; height: 74%;
      border-radius: 50% 50% var(--r) var(--r) / 36% 36% var(--r) var(--r);
    }
    .hero__tile--top {
      right: 0; top: 6%; width: 36%; height: 30%;
      border-radius: var(--r);
    }
    .hero__tile--bot {
      right: 0; top: 42%; width: 36%; height: 34%;
      border-radius: var(--r);
    }
    .hero__stamp {
      position: absolute; left: 60%; bottom: 6%;
      width: 96px; height: 96px; border-radius: 50%;
      background: var(--ivory); border: 1px solid var(--line);
      display: grid; place-items: center; text-align: center;
      font-family: var(--display); font-style: italic;
      color: var(--cognac); transform: rotate(-8deg);
      box-shadow: var(--shadow);
    }
    .hero__stamp span { display: block; font-size: 14px; line-height: 1.15; }
    .hero__stamp small {
      font-family: var(--cn); font-style: normal; font-size: 9px; letter-spacing: 2px;
      color: var(--terracotta); margin-top: 6px; display: block;
    }

    /* ────────────────────────────────────────────────────────────
       Services — 4 categories (visible on first scroll)
       ──────────────────────────────────────────────────────────── */
    .services { padding: clamp(48px, 6vw, 96px) 0; background: var(--cream); }
    .section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; padding: 0 var(--gutter); }
    .section-head .display { margin: 12px 0 14px; }
    .section-head__lede { color: var(--ink-70); font-size: 15px; line-height: 1.6; }

    .services__grid {
      max-width: var(--container); margin: 0 auto;
      padding: 0 var(--gutter);
      display: grid; gap: 16px;
      grid-template-columns: 1fr 1fr;
    }
    .service-card {
      position: relative; aspect-ratio: 3/4; overflow: hidden;
      border-radius: var(--r); background: var(--ivory);
      cursor: pointer; transition: transform .3s;
    }
    .service-card:hover { transform: translateY(-4px); }
    .service-card__img {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      transition: transform .6s cubic-bezier(.2,.7,.3,1);
    }
    .service-card:hover .service-card__img { transform: scale(1.06); }
    .service-card__shade {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 30%, rgba(58,38,32,0.7) 100%);
    }
    .service-card__body {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: clamp(16px, 2.5vw, 24px); color: var(--cream);
    }
    .service-card__cn {
      font-family: var(--cn); font-size: 11px; letter-spacing: 4px;
      color: var(--blush); margin-bottom: 6px;
    }
    .service-card__name {
      font-family: var(--display); font-size: clamp(20px, 3vw, 28px);
      line-height: 1.05; margin: 0;
    }
    .service-card__desc {
      font-size: 11.5px; color: rgba(251,245,234,0.78);
      margin-top: 8px; line-height: 1.4;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .service-card__cta {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 12px; font-size: 10.5px; letter-spacing: 1.5px;
      text-transform: uppercase; font-weight: 600; color: var(--cream);
      padding-bottom: 2px; border-bottom: 1px solid rgba(251,245,234,0.4);
    }

    /* ────────────────────────────────────────────────────────────
       Featured products
       ──────────────────────────────────────────────────────────── */
    .featured { padding: clamp(48px, 6vw, 96px) 0; background: var(--ivory); }
    .featured__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
    .featured__head .display { margin-top: 10px; }
    .featured__head .link {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase;
      font-weight: 600; padding-bottom: 4px; border-bottom: 1px solid var(--ink);
    }
    .featured__head .link:hover { color: var(--terracotta); border-color: var(--terracotta); }

    /* Scope to ul.products so WooCommerce's <section class="related products">
       (which carries both .related AND .products) doesn't accidentally
       inherit the grid and squash the loop into a single column.

       We use !important on the core grid + reset rules to win against
       WooCommerce core CSS (`.woocommerce ul.products`, specificity 0,2,1)
       which otherwise applies display:flex/flex-wrap:wrap and lets cards
       size to content — causing rows to wrap at unpredictable widths and
       bleed past the page wrap on the shop archive. */
    ul.products,
    .woocommerce ul.products {
      display: grid !important;
      gap: clamp(20px, 2.5vw, 36px);
      grid-template-columns: 1fr 1fr;
      list-style: none; margin: 0; padding: 0;
    }
    /* Neutralise WC default float/width on loop items so our CSS grid
       owns the layout. Without this the cards stack at ~22% width and
       images render at avatar size on the shop archive. */
    ul.products li.product,
    .woocommerce ul.products li.product {
      float: none !important; width: auto !important; margin: 0 !important;
      clear: none !important;
    }
    ul.products li.product img { width: 100%; height: auto; display: block; }
    /* Belt-and-braces: WooCommerce sometimes injects non-product children
       into the products UL (a11y announcers, hidden notices, empty li
       placeholders). Any non-product direct child consumes a grid slot
       and leaves an empty column at the start of the first row. Hide
       anything that isn't a real product card or product-category tile. */
    ul.products > *:not(.product):not(.product-category):not(.inline-banner),
    .woocommerce ul.products > *:not(.product):not(.product-category):not(.inline-banner) {
      display: none !important;
    }
    /* Also skip explicitly hidden / empty list items (some plugins ship
       `<li class="screen-reader-text">` markers). */
    ul.products > li:empty,
    ul.products > li[hidden],
    ul.products > li[aria-hidden="true"],
    ul.products > li.screen-reader-text {
      display: none !important;
    }
    /* Modern :has() sweep — hide any direct child of ul.products that
       carries `.product` class but has NO inner media link (means it's
       an empty placeholder injected by WC or a plugin, which would
       otherwise consume a grid slot at the start of the row). */
    ul.products > li.product:not(:has(.product__media)):not(:has(a[href])),
    .woocommerce ul.products > li.product:not(:has(.product__media)):not(:has(a[href])) {
      display: none !important;
    }
    /* Last-resort: even if some plugin sneaks past every other guard,
       FORCE the first real product card to start in column 1. Grid
       auto-placement will then fill subsequent columns normally and
       no empty slot leads the row. */
    ul.products > li.product:first-of-type,
    .woocommerce ul.products > li.product:first-of-type {
      grid-column-start: 1 !important;
    }
    .product { position: relative; }
    .product__media {
      display: block; /* <a> is inline by default — aspect-ratio is ignored unless we make it a block box */
      position: relative; aspect-ratio: 4/5; overflow: hidden;
      border-radius: var(--r);
      background: var(--cream);
    }
    .product__img {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      transition: transform .6s cubic-bezier(.2,.7,.3,1);
    }
    .product:hover .product__img { transform: scale(1.04); }
    .product__tag {
      position: absolute; top: 12px; left: 12px; z-index: 2;
      background: var(--cream); color: var(--ink);
      padding: 5px 12px; border-radius: var(--r-pill);
      font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600;
    }
    .product__tag--sale { background: var(--terracotta); color: var(--cream); }

    .product__body { padding-top: 14px; }
    .product__cat {
      font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
      color: var(--terracotta); font-weight: 500;
    }
    .product__name {
      font-family: var(--display); font-size: clamp(17px, 2vw, 22px);
      line-height: 1.2; margin: 6px 0 0; color: var(--ink);
    }
    .product__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; }
    .product__price { font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; }
    .product__price del { font-weight: 400; color: var(--ink-50); font-size: 11px; margin-right: 6px; }
    .product__add {
      font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
      font-weight: 600; color: var(--cognac); padding-bottom: 2px;
      border-bottom: 1px solid var(--cognac);
    }
    .product__add:hover { color: var(--terracotta); border-color: var(--terracotta); }

    /* Add to cart — full-width subtle button below the price row. Styles
       target both our static markup (.product__cart) AND WooCommerce's
       native loop output. WC emits `<a class="button add_to_cart_button">`
       as a direct child of `<li class="product">` via
       `woocommerce_template_loop_add_to_cart` on the
       `woocommerce_after_shop_loop_item` hook — we do NOT call it again
       inside the body, so each card has exactly one button. */
    .product__cart,
    .product__cart-wrap > a.button,
    .product__cart-wrap > a.added_to_cart,
    li.product > a.button,
    li.product > a.added_to_cart,
    .woocommerce ul.products li.product > a.button,
    .woocommerce ul.products li.product > a.added_to_cart {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      width: auto; align-self: flex-start;
      margin-top: 14px !important; padding: 10px 18px !important;
      font-family: var(--body); font-size: 12px; letter-spacing: 1.5px;
      text-transform: uppercase; font-weight: 600; text-decoration: none;
      color: var(--ink); background: var(--ivory);
      border: 1px solid transparent !important; border-radius: 999px !important;
      cursor: pointer; line-height: 1;
      transition: background .2s, color .2s, border-color .2s, transform .15s;
    }
    .product__cart:hover,
    .product__cart-wrap > a.button:hover,
    .product__cart-wrap > a.added_to_cart:hover,
    li.product > a.button:hover,
    li.product > a.added_to_cart:hover,
    .woocommerce ul.products li.product > a.button:hover {
      background: var(--ink); color: var(--cream);
    }
    .product__cart:active,
    li.product > a.button:active { transform: translateY(1px); }
    .product__cart.is-added,
    li.product > a.button.added,
    .woocommerce ul.products li.product > a.button.added {
      background: var(--terracotta) !important; color: var(--cream) !important;
    }
    /* WC's "View cart" follow-up link */
    li.product > a.added_to_cart,
    .woocommerce ul.products li.product > a.added_to_cart {
      margin-left: 8px;
      background: transparent; color: var(--cognac);
      border-color: var(--cognac) !important;
    }
    li.product > a.added_to_cart:hover,
    .woocommerce ul.products li.product > a.added_to_cart:hover {
      background: var(--cognac) !important; color: var(--cream) !important;
    }
    /* WC also outputs an "Add to cart" loading spinner inside the link */
    li.product > a.button.loading { opacity: .7; pointer-events: none; }
    .product__cart svg { flex-shrink: 0; }
    .product__body { display: flex; flex-direction: column; align-items: flex-start; }
    /* Ensure the <li> stacks media → body → cart in a column with consistent gap */
    ul.products li.product,
    .woocommerce ul.products li.product {
      display: flex !important; flex-direction: column; align-items: stretch;
    }

    .featured__cta { text-align: center; margin-top: 40px; }

    /* ────────────────────────────────────────────────────────────
       Why us — 4 reasons
       ──────────────────────────────────────────────────────────── */
    .why { padding: clamp(48px, 6vw, 96px) 0; background: var(--sand); }
    .why__grid {
      max-width: var(--container); margin: 0 auto;
      padding: 0 var(--gutter);
      display: grid; gap: 16px;
      grid-template-columns: 1fr 1fr;
    }
    .why-card {
      background: var(--cream); border-radius: var(--r);
      padding: clamp(20px, 2.5vw, 28px);
      display: flex; flex-direction: column; gap: 10px;
    }
    .why-card__icon {
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--ivory); color: var(--terracotta);
      display: grid; place-items: center; margin-bottom: 4px;
    }
    .why-card__num {
      font-family: var(--display); font-style: italic;
      font-size: 14px; color: var(--cognac); letter-spacing: 1px; margin: 0;
    }
    .why-card__title {
      font-family: var(--display); font-size: 22px; line-height: 1.1;
      color: var(--ink);
    }
    .why-card__cn {
      font-family: var(--cn); font-size: 11px; letter-spacing: 3px;
      color: var(--cognac); display: block; margin-top: 4px;
    }
    .why-card__body { font-size: 13px; color: var(--ink-70); line-height: 1.55; margin: 4px 0 0; }

    /* ────────────────────────────────────────────────────────────
       About — story split
       ──────────────────────────────────────────────────────────── */
    .about { padding: clamp(64px, 8vw, 130px) 0; background: var(--cream); }
    .about__inner {
      max-width: var(--container); margin: 0 auto;
      padding: 0 var(--gutter);
      display: grid; gap: clamp(40px, 5vw, 80px);
      align-items: center; grid-template-columns: 1fr;
    }
    .about__media { position: relative; }
    .about__media-img {
      width: 100%; aspect-ratio: 4/5;
      background-size: cover; background-position: center;
      border-radius: var(--r); box-shadow: var(--shadow);
    }
    .about__cap {
      position: absolute; left: -10px; bottom: 24px;
      background: var(--cream); padding: 10px 18px 10px 36px;
      font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
      color: var(--ink-70); box-shadow: var(--shadow);
    }
    .about__cap::before {
      content: ""; position: absolute; left: 12px; top: 50%;
      transform: translateY(-50%); width: 18px; height: 1px; background: var(--terracotta);
    }
    .about__copy p { color: var(--ink-70); margin: 18px 0; font-size: 15px; line-height: 1.7; }
    .about__sig {
      font-family: var(--display); font-style: italic;
      color: var(--cognac); font-size: 18px; margin-top: 24px;
    }
    .about__sig small { display: block; font-family: var(--body); font-style: normal; font-size: 11px; color: var(--ink-50); letter-spacing: 1.5px; margin-top: 2px; }

    /* ────────────────────────────────────────────────────────────
       Process — how we work
       ──────────────────────────────────────────────────────────── */
    .process { padding: clamp(48px, 6vw, 96px) 0; background: var(--ivory); }
    .process__grid {
      max-width: var(--container); margin: 0 auto;
      padding: 0 var(--gutter);
      display: grid; gap: 24px; grid-template-columns: 1fr;
    }
    .step {
      display: grid; grid-template-columns: auto 1fr; gap: 18px;
      padding: 24px; background: var(--cream); border-radius: var(--r);
      align-items: start;
    }
    .step__num {
      width: 48px; height: 48px; border-radius: 50%;
      background: var(--terracotta); color: var(--cream);
      display: grid; place-items: center;
      font-family: var(--display); font-style: italic; font-size: 22px;
      font-weight: 500;
    }
    .step__title { font-family: var(--display); font-size: 24px; color: var(--ink); margin: 0 0 8px; }
    .step__title .cn { display: inline-block; margin-left: 8px; }
    .step__body { font-size: 13.5px; color: var(--ink-70); line-height: 1.55; margin: 0; }

    /* ────────────────────────────────────────────────────────────
       Reviews
       ──────────────────────────────────────────────────────────── */
    .reviews { padding: clamp(56px, 7vw, 110px) 0; background: var(--sand); text-align: center; }
    .reviews__track { position: relative; min-height: 240px; margin: 40px 0 16px; max-width: 880px; margin-left: auto; margin-right: auto; padding: 0 var(--gutter); }
    .review {
      position: absolute; inset: 0;
      opacity: 0; transition: opacity .5s;
      display: flex; flex-direction: column; align-items: center; gap: 18px;
    }
    .review.is-active { opacity: 1; position: relative; }
    .review__stars { color: var(--terracotta); letter-spacing: 4px; font-size: 14px; }
    .review__quote {
      font-family: var(--display); font-style: italic; font-weight: 400;
      font-size: clamp(20px, 2.6vw, 30px); line-height: 1.4; color: var(--ink);
      max-width: 720px; margin: 0;
    }
    .review__cite { display: flex; flex-direction: column; gap: 2px; }
    .review__name { font-weight: 600; font-size: 13px; }
    .review__place { font-size: 11.5px; color: var(--ink-70); }
    .reviews__dots { display: flex; gap: 8px; justify-content: center; }
    .reviews__dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--line); transition: all .25s;
    }
    .reviews__dot.is-active { background: var(--terracotta); width: 24px; border-radius: 4px; }

    /* ────────────────────────────────────────────────────────────
       Instagram
       ──────────────────────────────────────────────────────────── */
    .ig { padding: clamp(48px, 6vw, 96px) 0; background: var(--cream); }
    .ig__grid {
      max-width: var(--container); margin: 36px auto 0;
      padding: 0 var(--gutter);
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    }
    .ig__tile {
      aspect-ratio: 1/1; padding: 0;
      background-size: cover; background-position: center;
      position: relative; overflow: hidden;
    }
    .ig__tile::after {
      content: ""; position: absolute; inset: 0;
      background: rgba(58,38,32,0); transition: background .2s;
    }
    .ig__tile:hover::after { background: rgba(58,38,32,0.2); }

    /* ── Live feed (Smash Balloon) — restyle to match .ig__grid ──
       Smash Balloon outputs #sb_instagram > #sbi_images > .sbi_item.
       We override its inline cols/padding to lock our 3×2 grid, square
       tiles, 4px gutter and the cognac hover wash. Its own header / follow
       button / load-more are hidden (we render our own header + button). */
    .ig--live .ig__feed { max-width: var(--container); margin: 36px auto 0; padding: 0 var(--gutter); }
    .ig--live #sb_instagram { padding: 0 !important; }
    .ig--live #sb_instagram #sbi_images {
      padding: 0 !important;
      display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 4px;
    }
    .ig--live #sb_instagram .sbi_item {
      width: auto !important; padding: 0 !important;
      aspect-ratio: 1/1; position: relative; overflow: hidden;
    }
    .ig--live #sb_instagram .sbi_photo,
    .ig--live #sb_instagram .sbi_photo_wrap,
    .ig--live #sb_instagram .sbi_link {
      width: 100% !important; height: 100% !important; display: block;
    }
    .ig--live #sb_instagram .sbi_photo img {
      width: 100% !important; height: 100% !important; object-fit: cover;
    }
    .ig--live #sb_instagram .sbi_item::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: rgba(58,38,32,0); transition: background .2s;
    }
    .ig--live #sb_instagram .sbi_item:hover::after { background: rgba(58,38,32,0.2); }
    /* Hide the plugin's own chrome — header, follow button, load-more. */
    .ig--live #sb_instagram .sb_instagram_header,
    .ig--live #sb_instagram #sbi_load,
    .ig--live #sb_instagram .sbi_follow_btn { display: none !important; }

    /* ────────────────────────────────────────────────────────────
       Contact — prominent
       ──────────────────────────────────────────────────────────── */
    .contact {
      padding: clamp(56px, 7vw, 110px) 0;
      background: var(--ink); color: var(--cream);
    }
    .contact__inner {
      max-width: var(--container); margin: 0 auto;
      padding: 0 var(--gutter);
      display: grid; gap: clamp(32px, 4vw, 64px);
      grid-template-columns: 1fr;
    }
    .contact .eyebrow { color: var(--blush); }
    .contact .display { color: var(--cream); }
    .contact .display em { color: var(--rose); }
    .contact__lede { color: rgba(251,245,234,0.7); font-size: 15px; line-height: 1.65; margin: 14px 0 28px; max-width: 480px; }

    .contact__channels {
      display: grid; gap: 12px; margin-bottom: 28px;
    }
    .channel {
      display: flex; align-items: center; gap: 16px;
      padding: 16px 18px; border-radius: var(--r);
      background: rgba(251,245,234,0.05); border: 1px solid rgba(251,245,234,0.1);
      transition: background .2s, transform .2s;
    }
    .channel:hover { background: rgba(251,245,234,0.1); transform: translateX(4px); }
    .channel__icon {
      width: 44px; height: 44px; border-radius: 50%;
      display: grid; place-items: center; flex-shrink: 0;
    }
    .channel__icon--wa { background: var(--wa); color: #fff; }
    .channel__icon--phone { background: var(--terracotta); color: var(--cream); }
    .channel__icon--email { background: var(--gold); color: var(--cream); }
    .channel__label { font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: rgba(251,245,234,0.5); }
    .channel__value { font-family: var(--display); font-size: 20px; color: var(--cream); margin-top: 2px; }
    .channel__arrow { margin-left: auto; opacity: .4; }

    .contact__address {
      background: rgba(251,245,234,0.05); padding: 24px; border-radius: var(--r);
      border: 1px solid rgba(251,245,234,0.1);
    }
    .contact__address-title { font-family: var(--display); font-size: 22px; margin: 0 0 4px; }
    .contact__address-cn { font-family: var(--cn); font-size: 11px; letter-spacing: 3px; color: var(--rose); }
    .contact__address-text { font-size: 13px; line-height: 1.7; color: rgba(251,245,234,0.8); margin: 14px 0; }
    .contact__hours {
      display: grid; gap: 6px; padding-top: 16px;
      border-top: 1px solid rgba(251,245,234,0.12);
      font-size: 12.5px; color: rgba(251,245,234,0.7);
    }
    .contact__hours dl { display: flex; justify-content: space-between; margin: 0; }
    .contact__hours dt { color: rgba(251,245,234,0.55); }
    .contact__hours dd { margin: 0; }

    .contact__map {
      aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden;
      background: var(--ivory); position: relative;
    }
    .contact__map iframe { width: 100%; height: 100%; border: 0; }
    .contact__map-fallback {
      position: absolute; inset: 0; display: grid; place-items: center;
      background: linear-gradient(135deg, var(--blush), var(--rose));
      color: var(--cream);
    }

    /* ────────────────────────────────────────────────────────────
       Footer
       ──────────────────────────────────────────────────────────── */
    .footer { background: var(--cognac); color: rgba(251,245,234,0.7); padding: clamp(40px, 5vw, 70px) 0 22px; }
    .footer__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
    .footer__top {
      display: grid; gap: 32px; grid-template-columns: 1fr;
      padding-bottom: 30px; border-bottom: 1px solid rgba(251,245,234,0.12);
    }
    .footer__brand h4 {
      font-family: var(--display); font-size: 30px; color: var(--cream); margin: 0 0 4px;
    }
    .footer__brand-wordmark {
      display: block;
      width: 220px; height: auto;
      filter: brightness(0) invert(1);
      opacity: 0.95;
    }
    .contact__logo {
      display: block;
      width: 100px; height: 100px;
      background: var(--cream);
      border-radius: 50%;
      padding: 10px;
      box-sizing: border-box;
      object-fit: contain;
      margin: -56px 0 16px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.25);
      border: 1px solid rgba(251,245,234,0.18);
    }
    .footer__brand .cn { color: var(--blush); }
    .footer__brand p { font-size: 13px; line-height: 1.6; color: rgba(251,245,234,0.65); margin: 12px 0; max-width: 360px; }
    .footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer h5 {
      font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--blush); margin: 0 0 14px; font-weight: 600;
    }
    .footer ul li { margin-bottom: 8px; font-size: 13px; }
    .footer__pay {
      display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
      margin-top: 14px;
    }
    .footer__pay-fpx { flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.2); border-radius: 5px; }
    .footer__pay-note {
      font-size: 11px; color: rgba(251,245,234,0.55);
      letter-spacing: 0.3px; line-height: 1.4;
    }
    .footer__bottom {
      display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
      padding-top: 22px; font-size: 11px;
      color: rgba(251,245,234,0.45);
    }
    .footer__social { display: flex; gap: 10px; margin-top: 18px; }
    .footer__social a {
      width: 36px; height: 36px; border-radius: 50%;
      background: rgba(251,245,234,0.08); color: var(--cream);
      display: grid; place-items: center; transition: background .2s;
    }
    .footer__social a:hover { background: var(--terracotta); }
    .footer__social-text {
      font-family: var(--cn, "Noto Serif SC", serif);
      font-size: 9px; font-weight: 700; line-height: 1;
      letter-spacing: -0.5px; text-decoration: none;
    }

    /* ────────────────────────────────────────────────────────────
       Quick view modal
       ──────────────────────────────────────────────────────────── */
    .qv { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center; }
    .qv[hidden] { display: none; }
    .qv__bg { position: absolute; inset: 0; background: rgba(20,15,10,0.55); backdrop-filter: blur(4px); animation: fade .3s; }
    .qv__sheet {
      position: relative; width: min(720px, 100%); max-height: 92vh;
      background: var(--cream); border-radius: 24px 24px 0 0;
      padding: 22px var(--gutter) 32px; overflow: auto;
      animation: slide .35s cubic-bezier(.2,.7,.3,1);
    }
    .qv__close {
      position: absolute; top: 14px; right: 14px;
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--ivory); font-size: 18px;
    }
    .qv__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
    .qv__img {
      width: 100%; aspect-ratio: 4/5;
      background-size: cover; background-position: center; border-radius: var(--r);
    }
    .qv__name { font-family: var(--display); font-size: 28px; margin: 4px 0; }
    .qv__price { font-family: var(--display); font-size: 26px; color: var(--terracotta); margin: 12px 0; }
    .qv__desc { color: var(--ink-70); font-size: 14px; line-height: 1.6; }
    .qv__cta { display: flex; gap: 10px; margin-top: 20px; }
    .qv__cta .btn { flex: 1; justify-content: center; }

    @keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slide { from { transform: translateY(40px); } to { transform: translateY(0); } }

    /* ────────────────────────────────────────────────────────────
       WhatsApp FAB
       ──────────────────────────────────────────────────────────── */
    .wa-fab {
      position: fixed; bottom: 22px; right: 22px; z-index: 100;
      height: 56px; border-radius: 28px;
      background: var(--wa); color: #fff;
      display: inline-flex; align-items: center; padding: 0 18px; gap: 10px;
      box-shadow: 0 8px 28px rgba(37,211,102,0.5);
      font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
    }
    .wa-fab__label { display: none; }
    .wa-fab::before {
      content: ""; position: absolute; inset: -6px;
      border-radius: 50%; border: 2px solid rgba(37,211,102,0.4);
      animation: ring 2.2s ease-out infinite;
    }
    @keyframes ring {
      0%   { transform: scale(.85); opacity: .8; }
      100% { transform: scale(1.45); opacity: 0; }
    }

    /* ────────────────────────────────────────────────────────────
       Responsive ≥ 720 (tablet)
       ──────────────────────────────────────────────────────────── */
    @media (min-width: 720px) {
      .hero__inner       { grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 5vw, 80px); }
      .services__grid    { grid-template-columns: repeat(4, 1fr); gap: 20px; }
      ul.products       { grid-template-columns: repeat(3, 1fr); }
      .why__grid         { grid-template-columns: repeat(4, 1fr); }
      .about__inner      { grid-template-columns: 1fr 1.05fr; }
      .process__grid     { grid-template-columns: repeat(3, 1fr); }
      .contact__inner    { grid-template-columns: 1fr 1fr; }
      .footer__top       { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
      .footer__cols      { display: contents; }
      .wa-fab__label     { display: inline; }
    }

    /* ────────────────────────────────────────────────────────────
       Responsive ≥ 960 (desktop)
       ──────────────────────────────────────────────────────────── */
    @media (min-width: 960px) {
      .nav { display: block; }
      .header__menu { display: none; }
      .header__cta { display: inline-flex; }
      ul.products { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 959px) {
      .header__cta { display: none; }
    }

/* ──────────────────────────────────────────────────────────────────
 * Shop & Category pages — listing components
 * ──────────────────────────────────────────────────────────────── */

/* Breadcrumb */
.crumbs {
  max-width: var(--container); margin: 0 auto;
  padding: 18px var(--gutter);
  font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-50); display: flex; flex-wrap: wrap; gap: 6px;
}
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--terracotta); }
.crumbs__sep { opacity: .4; }
.crumbs__cur { color: var(--ink); }

/* Shop hero / Category hero */
.shop-hero {
  padding: clamp(24px, 4vw, 60px) 0 clamp(32px, 4vw, 56px);
  background: var(--cream);
  text-align: center;
}
.shop-hero__inner {
  max-width: 820px; margin: 0 auto;
  padding: 0 var(--gutter);
}
.shop-hero .eyebrow { margin-bottom: 14px; }
.shop-hero__title { margin: 8px 0 16px; }
.shop-hero__lede {
  color: var(--ink-70); font-size: 15px; line-height: 1.65;
  max-width: 600px; margin: 0 auto;
}

.cat-hero {
  position: relative; overflow: hidden;
  background: var(--ivory);
  padding: 0;
}
.cat-hero__inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 0;
  align-items: stretch;
}
.cat-hero__media {
  aspect-ratio: 16/10;
  background-size: cover; background-position: center;
  position: relative;
}
.cat-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(58,38,32,0.45) 100%);
}
.cat-hero__copy {
  padding: clamp(32px, 5vw, 64px) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
.cat-hero__cn {
  font-family: var(--cn); font-size: 13px; letter-spacing: 6px;
  color: var(--cognac); margin-bottom: 8px;
}
.cat-hero__title { margin: 0 0 16px; }
.cat-hero__lede {
  color: var(--ink-70); font-size: 15px; line-height: 1.7;
  margin: 0 0 24px; max-width: 480px;
}
.cat-hero__meta {
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.cat-hero__meta-item { font-size: 12px; color: var(--ink-70); display: flex; align-items: center; gap: 8px; }
.cat-hero__meta-item strong { color: var(--ink); font-weight: 600; }

/* Filter chips row */
.filter-bar {
  position: sticky; top: 70px; z-index: 30;
  background: rgba(251,245,234,0.96); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.filter-bar__inner {
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; gap: 8px; overflow-x: auto;
  scrollbar-width: none;
}
.filter-bar__inner::-webkit-scrollbar { display: none; }
.filter-chip {
  flex-shrink: 0; padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--line); font-size: 12px; font-weight: 500;
  letter-spacing: 0.3px; transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.filter-chip:hover { border-color: var(--ink); }
.filter-chip.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.filter-chip__count { opacity: .55; font-size: 10.5px; }
.filter-chip.is-active .filter-chip__count { opacity: .65; }

/* Sort toolbar */
.toolbar {
  max-width: var(--container); margin: 0 auto;
  padding: 22px var(--gutter) 8px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.toolbar__count {
  font-size: 12px; color: var(--ink-70);
  font-family: var(--display); font-style: italic; font-size: 16px;
}
.toolbar__count strong { color: var(--ink); font-style: normal; font-family: var(--body); font-weight: 600; }
.toolbar__sort {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-70);
  line-height: 1;
}
.toolbar__sort > span,
.toolbar__sort > form,
.toolbar__sort .woocommerce-ordering {
  display: inline-flex; align-items: center; margin: 0;
  line-height: 1;
}
.toolbar__sort select {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; padding: 0 22px 0 4px;
  margin: 0; height: auto; line-height: 1;
  font: inherit; color: var(--ink); font-weight: 600; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%233a2620' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 4px center;
  vertical-align: middle;
}

/* Shop grid wrapper — compound selector wins against WC core's
   `.woocommerce ul.products` (specificity 0,2,1) so our padding,
   max-width and grid template columns are not overridden. */
.shop-grid,
.woocommerce ul.products.shop-grid {
  max-width: var(--container); margin: 0 auto;
  padding: 14px var(--gutter) clamp(56px, 7vw, 110px);
  /* Cards in the same row should keep their natural heights — a card
     with a 2-line product name shouldn't force shorter neighbours to
     grow empty space below the price row. WC's default grid stretches
     every cell to the row's tallest item without this. */
  align-items: start;
  display: grid; gap: clamp(24px, 3vw, 40px);
  grid-template-columns: 1fr 1fr;
  /* Belt-and-braces against the WC core `.woocommerce ul.products`
     base rules: explicit border-box + 100% width so the gutter
     padding stays *inside* the viewport bounds (otherwise on mobile
     the right column clips past the viewport edge). */
  box-sizing: border-box; width: 100%;
}
/* Grid items must shrink to fit their cell. Without `min-width: 0`,
   `min-width: auto` (the default for grid items) lets a single wide
   child (an image with intrinsic width, a long unbroken word, etc.)
   widen the column past 1fr, which propagates as horizontal overflow
   on small viewports. */
.shop-grid > li.product,
.woocommerce ul.products.shop-grid > li.product {
  min-width: 0;
  max-width: 100%;
}
.shop-grid .product__media,
.woocommerce ul.products.shop-grid .product__media {
  width: 100%; max-width: 100%;
}
@media (min-width: 720px) {
  .shop-grid,
  .woocommerce ul.products.shop-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .shop-grid,
  .woocommerce ul.products.shop-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Inline custom-order banner */
.inline-banner {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: var(--ivory); border-radius: var(--r); overflow: hidden;
  margin: 12px 0;
}
@media (min-width: 720px) {
  .inline-banner { grid-template-columns: 1fr 1.2fr; }
  .inline-banner__media { aspect-ratio: auto; height: 100%; }
}
.inline-banner__media {
  aspect-ratio: 16/10; background-size: cover; background-position: center;
}
.inline-banner__copy { padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; justify-content: center; }
.inline-banner__copy .display { margin: 8px 0 12px; }
.inline-banner__copy p { color: var(--ink-70); font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; }

/* Pagination */
.pagination {
  max-width: var(--container); margin: 0 auto;
  padding: 12px var(--gutter) clamp(48px, 6vw, 96px);
  display: flex; justify-content: center; align-items: center; gap: 6px;
}
.pagination__btn, .pagination__num {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--ink);
  transition: all .15s;
}
.pagination__btn:hover, .pagination__num:hover { border-color: var(--ink); }
.pagination__num.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pagination__btn[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; }
.pagination__dots { width: 24px; text-align: center; color: var(--ink-50); }

/* WooCommerce native pagination (`woocommerce_pagination()` output) —
   <nav class="woocommerce-pagination"><ul class="page-numbers">…
   styled to match the static .pagination above so the live archive looks
   the same as the prototype.

   IMPORTANT: WC core CSS uses high-specificity selectors like
   `.woocommerce nav.woocommerce-pagination ul li a` (0,2,3) which beat
   our `.woocommerce-pagination .page-numbers` (0,2,0). We mirror WC's
   selector chain so our pill styling actually wins. */
.woocommerce-pagination,
nav.woocommerce-pagination,
.woocommerce nav.woocommerce-pagination {
  max-width: var(--container); margin: 0 auto;
  padding: 12px var(--gutter) clamp(48px, 6vw, 96px);
  text-align: center;
}
.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: inline-flex !important; gap: 6px !important;
  align-items: center !important; flex-wrap: wrap !important;
  justify-content: center !important;
  border: 0 !important; white-space: normal !important;
}
.woocommerce-pagination ul.page-numbers li,
.woocommerce nav.woocommerce-pagination ul li {
  border: 0 !important; margin: 0 !important; padding: 0 !important;
  float: none !important; display: inline-flex !important; overflow: visible !important;
}
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
  box-sizing: border-box;
  min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: 999px !important;
  display: inline-grid !important; place-items: center;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line) !important;
  font-size: 13px; font-weight: 500; line-height: 1;
  text-decoration: none !important;
  transition: all .15s;
}
.woocommerce-pagination ul.page-numbers li a:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover {
  border-color: var(--ink) !important;
  background: var(--cream);
}
.woocommerce-pagination ul.page-numbers li .page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--ink) !important; color: var(--cream) !important;
  border-color: var(--ink) !important; font-weight: 600;
}
.woocommerce-pagination ul.page-numbers li .page-numbers.dots,
.woocommerce nav.woocommerce-pagination ul li .page-numbers.dots {
  border: 0 !important; min-width: 24px; padding: 0; color: var(--ink-50);
  background: transparent !important;
}
.woocommerce-pagination ul.page-numbers li a.prev,
.woocommerce-pagination ul.page-numbers li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 0 !important; /* hide "Previous"/"Next" text */
}
.woocommerce-pagination ul.page-numbers li a.prev::before,
.woocommerce-pagination ul.page-numbers li a.next::before,
.woocommerce nav.woocommerce-pagination ul li a.prev::before,
.woocommerce nav.woocommerce-pagination ul li a.next::before {
  content: ""; width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: var(--chev) center / contain no-repeat;
          mask: var(--chev) center / contain no-repeat;
}
.woocommerce-pagination ul.page-numbers li a.prev::before,
.woocommerce nav.woocommerce-pagination ul li a.prev::before {
  --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6l-6 6 6 6'/></svg>");
}
.woocommerce-pagination ul.page-numbers li a.next::before,
.woocommerce nav.woocommerce-pagination ul li a.next::before {
  --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>");
}

/* ─── WooCommerce notices ───────────────────────────────────────────
   "X has been added to your cart." / cart errors / form info banners.
   WC outputs:
     <div class="woocommerce-notices-wrapper">
       <div class="woocommerce-message" role="alert">
         <a class="button wc-forward" href="...cart">View cart</a>
         "Yellow Rose…" has been added to your cart.
       </div>
     </div>
   Restyled to match the florist editorial palette: cream card, cognac
   side accent, display-serif name, ivory pill "View cart" button. */
.woocommerce-notices-wrapper {
  max-width: var(--container); margin: 0 auto;
  padding: 8px var(--gutter) 0;
}
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 4px solid var(--terracotta);
  border-radius: var(--r);
  padding: 16px 20px 16px 56px;
  margin: 16px 0 0;
  font-size: 14px; line-height: 1.55;
  list-style: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  box-shadow: 0 2px 12px rgba(58, 38, 32, 0.04);
}
.woocommerce-message { border-left-color: var(--cognac); }
.woocommerce-info    { border-left-color: var(--terracotta); }
.woocommerce-error   { border-left-color: #b54a3a; background: #fbf1ee; }

/* Leading status glyph — ✿ for the brand, becomes ✓ on add-to-cart,
   ✕ on errors, ⋯ for info. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-notice::before {
  position: absolute;
  left: 18px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--body);
  font-size: 13px; font-weight: 700; line-height: 1;
  background: var(--cognac); color: var(--cream);
  content: "✓";
}
.woocommerce-info::before    { background: var(--terracotta); content: "i"; font-style: italic; }
.woocommerce-error::before   { background: #b54a3a; content: "!"; }

/* Product names in WC's add-to-cart message are wrapped in double-quotes
   in the localised string — make them feel display-serif. */
.woocommerce-message { font-family: var(--body); }
.woocommerce-message strong,
.woocommerce-message b {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  color: var(--cognac);
  font-size: 1.15em;
  letter-spacing: 0.2px;
}

/* "View cart" / "Continue shopping" / etc. — WC outputs them with
   class `button wc-forward`. Match the ivory pill we use for the
   loop add-to-cart button. */
.woocommerce-message a.button.wc-forward,
.woocommerce-message a.button,
.woocommerce-info a.button.wc-forward,
.woocommerce-info a.button,
.woocommerce-error a.button.wc-forward,
.woocommerce-error a.button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px !important;
  font-family: var(--body); font-size: 11.5px; letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 600;
  color: var(--cream) !important; background: var(--ink) !important;
  border: 1px solid var(--ink) !important; border-radius: 999px !important;
  text-decoration: none !important;
  transition: background .2s, color .2s, border-color .2s;
  /* Push the button to the right end of the notice row. */
  margin-left: auto !important;
  order: 99;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
  background: var(--terracotta) !important;
  border-color: var(--terracotta) !important;
}
.woocommerce-message a.button.wc-forward::after,
.woocommerce-info a.button.wc-forward::after {
  content: "→"; font-size: 14px; line-height: 1; margin-left: 2px;
}

/* WC also occasionally outputs <ul class="woocommerce-error">…<li>…</li></ul>
   — keep list items inheriting the wrapper style. */
ul.woocommerce-error li,
ul.woocommerce-info li,
ul.woocommerce-message li {
  list-style: none; margin: 0; padding: 0;
}

/* Tier explainer card (category page) */
.tier-card {
  background: var(--sand); border-radius: var(--r);
  padding: clamp(20px, 3vw, 32px); margin: 0;
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .tier-card { grid-template-columns: repeat(3, 1fr); } }
.tier {
  background: var(--cream); border-radius: var(--r);
  padding: 20px;
}
.tier__name { font-family: var(--display); font-size: 24px; color: var(--ink); margin: 0 0 4px; }
.tier__cn { font-family: var(--cn); font-size: 11px; letter-spacing: 3px; color: var(--cognac); }
.tier__price { font-family: var(--display); font-size: 30px; color: var(--terracotta); margin: 14px 0 12px; }
.tier__price small { font-size: 13px; color: var(--ink-50); font-family: var(--body); }
.tier__list { font-size: 13px; color: var(--ink-70); line-height: 1.6; }
.tier__list li { display: flex; gap: 8px; margin-bottom: 6px; }
.tier__list li::before { content: "✿"; color: var(--terracotta); }

/* FAQ — accordion styles now live in the dedicated FAQ page block at the
   END of this file (paired with template-parts/faq.php). The earlier
   scaffold that lived here was removed in 1.1.2 because its
   `summary::after` toggle circle collided with the new `.faq__icon`,
   producing TWO plus-signs per question on the live FAQ page. */

/* Container helper */
.section { padding: clamp(48px, 6vw, 96px) 0; }
.section--ivory { background: var(--ivory); }
.section--sand  { background: var(--sand); }
.section--cream { background: var(--cream); }

/* Category local-SEO content + FAQ (archive-product.php) */
.cat-seo__prose { max-width: 760px; }
.cat-seo__title { font-size: clamp(28px, 3.4vw, 40px); margin: 12px 0 18px; }
.cat-seo__prose p { color: var(--ink-70); font-size: 15px; line-height: 1.75; margin: 0 0 16px; }
.cat-seo__areas {
  font-size: 13px; line-height: 1.7; color: var(--cognac);
  border-top: 1px solid var(--line); padding-top: 16px; margin: 4px 0 0;
}
.cat-faq__list { max-width: 840px; margin: 0 auto; }
.cat-faq .section-head { margin-bottom: clamp(20px, 3vw, 36px); }

/* Product fact strip — extractable facts at the top of each PDP tab panel */
.spec-strip { margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--line); display: grid; gap: 9px; }
.spec-strip__row { display: grid; grid-template-columns: 138px 1fr; gap: 16px; align-items: baseline; }
.spec-strip__k { margin: 0; font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600; color: var(--ink-50); }
.spec-strip__k span { display: block; margin-top: 3px; text-transform: none; letter-spacing: 2px; font-family: var(--cn); font-weight: 500; font-size: 11px; color: var(--cognac); }
.spec-strip__v { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 480px) { .spec-strip__row { grid-template-columns: 1fr; gap: 3px; } }

/* Two-up category page detail */
@media (min-width: 960px) {
  .cat-hero__inner { grid-template-columns: 1fr 1fr; }
  .cat-hero__media { aspect-ratio: auto; min-height: 480px; }
}


/* ──────────────────────────────────────────────────────────────────
 * Product detail page (PDP)
 * ──────────────────────────────────────────────────────────────── */
.pdp {
  background: var(--cream);
  padding: clamp(20px, 3vw, 40px) 0 0;
}
.pdp__inner,
body .pdp__inner,
body.single-product .pdp__inner {
  max-width: var(--container); margin: 0 auto;
  /* !important + body.single-product chain so WC core's `.woocommerce
     div.product` resets, page-builder plugins and Storefront-style
     parents can't strip our page gutters. */
  padding: 0 var(--gutter) !important;
  box-sizing: border-box;
  display: grid; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: 1fr;
}
/* Defensive: if our single-product.php override isn't loaded (because
   the user is on a child theme or the file hasn't been uploaded), WC
   falls back to its native template using `.woocommerce-product-gallery`
   and `.summary` inside a `div.product`. Give those the same wrap. */
body.single-product div.product,
body.single-product .woocommerce-page div.product {
  max-width: var(--container) !important;
  margin: 0 auto !important;
  padding: clamp(20px, 3vw, 40px) var(--gutter) clamp(36px, 5vw, 64px) !important;
  box-sizing: border-box;
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  body.single-product div.product,
  body.single-product .woocommerce-page div.product {
    grid-template-columns: 1.05fr 1fr !important;
    align-items: start;
  }
}
/* Gallery — give the WC native gallery image the same rounded corner
   treatment as our card thumbnails so single-product pages match. */
body.single-product .woocommerce-product-gallery {
  width: 100% !important; float: none !important; margin: 0 !important;
}
body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery__image {
  border-radius: var(--r); overflow: hidden; background: var(--ivory);
}
body.single-product .woocommerce-product-gallery__wrapper a,
body.single-product .woocommerce-product-gallery__image a {
  display: block;
}
body.single-product .woocommerce-product-gallery__wrapper img,
body.single-product .woocommerce-product-gallery__image img,
body.single-product .wp-post-image {
  border-radius: var(--r);
  display: block; width: 100% !important; height: auto !important;
}
body.single-product .woocommerce-product-gallery__trigger {
  background: rgba(251,245,234,0.95) !important;
  color: var(--ink) !important;
  border-radius: 50% !important;
  width: 38px !important; height: 38px !important;
  display: grid !important; place-items: center !important;
  font-size: 16px !important;
  text-decoration: none !important;
  top: 16px !important; right: 16px !important;
  box-shadow: 0 2px 8px rgba(58,38,32,0.08);
}

/* Summary column */
body.single-product .summary,
body.single-product .entry-summary {
  width: 100% !important; float: none !important; margin: 0 !important;
  display: flex; flex-direction: column; gap: 18px;
}
body.single-product .product_title,
body.single-product h1.product_title {
  font-family: var(--display) !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 1.1 !important; font-weight: 500;
  color: var(--ink) !important;
  margin: 0 !important;
  letter-spacing: -0.4px;
}
body.single-product .summary .price,
body.single-product p.price,
body.single-product span.price {
  font-family: var(--display) !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  color: var(--ink) !important;
  font-weight: 500;
  margin: 0 !important;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
body.single-product .summary .price ins,
body.single-product p.price ins {
  text-decoration: none;
  color: var(--terracotta) !important;
  background: transparent !important;
}
body.single-product .summary .price del,
body.single-product p.price del {
  color: var(--ink-50) !important;
  font-size: 0.65em !important;
  font-weight: 400;
}
body.single-product .summary .price .woocommerce-Price-currencySymbol {
  font-size: 0.7em; opacity: 0.7; margin-right: 2px;
}
body.single-product .woocommerce-product-details__short-description,
body.single-product .summary > div:not(.cart):not(.product_meta):not(.quantity) {
  color: var(--ink-70);
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.7;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
body.single-product .woocommerce-product-details__short-description p { margin: 0; }

/* Quantity + add to cart row */
body.single-product .summary form.cart,
body.single-product .summary .cart {
  display: flex !important; gap: 12px !important; align-items: center;
  flex-wrap: wrap; margin: 0 !important; padding: 0 !important;
}
body.single-product .summary .cart .quantity {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 6px; background: var(--cream);
  margin: 0 !important;
}
body.single-product .summary .cart .quantity input.qty,
body.single-product .summary input.qty {
  width: 48px !important; height: 36px !important;
  border: 0 !important; background: transparent !important;
  text-align: center !important;
  font-family: var(--body) !important;
  font-size: 14px !important; font-weight: 600;
  color: var(--ink) !important;
  appearance: textfield;
  -moz-appearance: textfield;
}
body.single-product .summary input.qty::-webkit-outer-spin-button,
body.single-product .summary input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
/* The big "Add to cart" — overrides WC purple default with theme ink */
body.single-product .summary .single_add_to_cart_button,
body.single-product button.single_add_to_cart_button,
body.single-product .summary button[name="add-to-cart"],
body.single-product .woocommerce-page .single_add_to_cart_button {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 8px !important;
  padding: 14px 28px !important;
  font-family: var(--body) !important;
  font-size: 12px !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--cream) !important;
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
body.single-product .summary .single_add_to_cart_button:hover,
body.single-product button.single_add_to_cart_button:hover {
  background: var(--terracotta) !important;
  border-color: var(--terracotta) !important;
}
body.single-product .summary .single_add_to_cart_button:active {
  transform: translateY(1px);
}

/* Category meta line */
body.single-product .product_meta {
  font-size: 12px !important;
  letter-spacing: 1px;
  color: var(--ink-50) !important;
  border-top: 1px solid var(--line);
  padding-top: 18px !important;
  margin: 6px 0 0 !important;
  display: flex; flex-direction: column; gap: 4px;
}
body.single-product .product_meta > span { display: block; }
body.single-product .product_meta a {
  color: var(--cognac) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
body.single-product .product_meta a:hover { border-bottom-color: var(--cognac); }

/* WooCommerce tabs — restyled to match the editorial card system.
   Left-aligned underlined tabs (NOT filled pills) — mirrors
   `Product.html`'s `.tabs-nav` so the live PDP reads as a clean
   editorial product page, not WC's default purple.

   Sizing: the parent wrapper (`.pdp__tabs` in our single-product.php,
   or the `<div class="product">` grid in WC's fallback template) is
   already constrained to var(--container) with gutter padding. Don't
   stack ANOTHER max-width / margin:auto / padding-top here — that's
   what was visually centring + narrowing the rail and breaking
   alignment with the related-products section below. Just span the
   parent's full content box. */
body.single-product .woocommerce-tabs,
body.single-product .wc-tabs-wrapper {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left;
}
body.single-product .woocommerce-tabs .tabs.wc-tabs,
body.single-product ul.tabs.wc-tabs {
  list-style: none !important;
  display: flex !important;
  gap: 28px !important;
  margin: 0 0 28px !important; padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: none !important;
  text-align: left !important;
  overflow-x: auto; scrollbar-width: none;
}
body.single-product .woocommerce-tabs .tabs.wc-tabs::-webkit-scrollbar,
body.single-product ul.tabs.wc-tabs::-webkit-scrollbar { display: none; }
body.single-product .woocommerce-tabs ul.tabs li,
body.single-product ul.tabs li {
  background: transparent !important;
  border: 0 !important; border-radius: 0 !important;
  margin: 0 !important; padding: 0 !important;
  display: inline-block;
}
body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after {
  display: none !important; /* WC core uses ::before/::after for tab borders */
}
body.single-product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 14px 0 !important;
  font-family: var(--body) !important;
  font-size: 11.5px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--ink-50) !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: color .15s, border-color .15s;
}
body.single-product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--ink) !important;
  background: none !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ink) !important;
  background: none !important;
  border-bottom-color: var(--ink) !important;
}
body.single-product .woocommerce-tabs .panel {
  font-family: var(--body);
  color: var(--ink-70);
  font-size: 14.5px;
  line-height: 1.75;
  max-width: none;
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-align: left;
}
body.single-product .woocommerce-tabs .panel h2 {
  font-family: var(--display) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
  margin: 0 0 18px !important;
  text-align: left !important;
}
body.single-product .woocommerce-tabs .panel h3,
body.single-product .woocommerce-tabs .panel h4 {
  font-family: var(--display);
  font-size: 22px; font-weight: 500;
  color: var(--ink); margin: 24px 0 10px;
}
body.single-product .woocommerce-tabs .panel p { margin: 0 0 1em; }
body.single-product .woocommerce-tabs .panel ul {
  list-style: none; padding: 0; margin: 0 0 1em;
}
body.single-product .woocommerce-tabs .panel ul li {
  padding-left: 22px; position: relative; margin-bottom: 8px;
}
body.single-product .woocommerce-tabs .panel ul li::before {
  content: "✿"; position: absolute; left: 0; color: var(--terracotta);
}

/* Stock indicator */
body.single-product .stock {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cognac) !important;
  font-weight: 600;
}
body.single-product .stock.out-of-stock { color: #b54a3a !important; }

/* WC native breadcrumb (`woocommerce_breadcrumb()` output) — same look
   as `.crumbs` so the PDP gets the editorial breadcrumb back even when
   our `single-product.php` template override isn't loaded. */
.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb {
  max-width: var(--container);
  margin: 0 auto !important;
  padding: 18px var(--gutter) !important;
  font-family: var(--body);
  font-size: 11.5px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-50) !important;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: transparent !important; border: 0 !important;
}
.woocommerce-breadcrumb a {
  color: var(--ink-70) !important;
  text-decoration: none !important;
  transition: color .15s;
}
.woocommerce-breadcrumb a:hover { color: var(--cognac) !important; }

/* PDP sale flash — WC emits `<span class="onsale">Sale!</span>` from
   either our `single-product.php` (rendered as `.pdp__gallery-tag--sale`)
   or its default chain (`woocommerce_show_product_sale_flash` on
   `woocommerce_before_single_product_summary`). On some live sites
   the default ends up outside our gallery wrapper, so its absolute
   positioning anchors to `<main>` instead of the image corner.

   Solution (combined with the JS relocator in main.js):
   1. Force the gallery wrapper to be `position: relative` so child
      absolute elements anchor to it.
   2. Style the `.onsale` pill identical to `.pdp__gallery-tag--sale`
      (terracotta pill, top-left 16px).
   3. The JS in main.js moves the `.onsale` element INTO the gallery
      wrapper on page load if it landed elsewhere. */
body.single-product .pdp__gallery-main,
body.single-product .woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery__wrapper {
  position: relative !important;
}
body.single-product .onsale,
body.single-product span.onsale,
body.single-product .woocommerce-product-gallery span.onsale,
body.single-product .pdp__gallery-main .onsale {
  display: inline-block !important;
  position: absolute !important;
  top: 16px !important; left: 16px !important;
  background: var(--terracotta) !important;
  color: var(--cream) !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-family: var(--body) !important;
  font-size: 10px !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  min-height: auto !important;
  min-width: auto !important;
  width: auto !important; height: auto !important;
  margin: 0 !important;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(58,38,32,0.12);
  pointer-events: none;
}

/* Mobile: pin the sale badge to the actual image rect, not the page.
   `.pdp__gallery-main` already has `position: relative` so the badge
   anchors correctly; this just guards against parent layouts that flip
   `display` on small viewports. */
@media (max-width: 719px) {
  .pdp__gallery-main { position: relative !important; }
  .pdp__gallery-tag,
  body.single-product .onsale {
    top: 12px !important; left: 12px !important;
    padding: 5px 12px !important;
    font-size: 9px !important;
  }
}

/* Category meta — restyle WC's `.posted_in` to read as an eyebrow
   above/around the price (matches our prototype's "Grand Opening · 开张花篮"). */
body.single-product .product_meta .posted_in,
body.single-product .product_meta span.posted_in {
  display: block;
  font-family: var(--body);
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--ink-50) !important;
  font-weight: 500;
}
body.single-product .product_meta .posted_in a {
  color: var(--terracotta) !important;
  letter-spacing: 2.5px;
  font-weight: 600;
  border-bottom: 0 !important;
}
body.single-product .product_meta .posted_in a:hover { color: var(--cognac) !important; }

/* PDP gallery — preserve the product photo's NATURAL aspect ratio.
   Earlier versions forced `aspect-ratio: 4/5` + `object-fit: cover`,
   which cropped portrait-shaped flower-stand photos and made the
   preview look stretched/wrong. We now cap the height instead and
   use `object-fit: contain` so the whole arrangement is visible. */
@media (min-width: 720px) {
  body.single-product .woocommerce-product-gallery {
    max-height: 720px;
  }
  body.single-product .woocommerce-product-gallery__wrapper,
  body.single-product .woocommerce-product-gallery__image {
    max-height: 720px;
  }
  body.single-product .woocommerce-product-gallery__wrapper img,
  body.single-product .woocommerce-product-gallery__image img,
  body.single-product .wp-post-image {
    width: 100% !important;
    height: auto !important;
    max-height: 720px;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center;
  }
}
  display: grid; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: 1fr;
}
.pdp__gallery { display: flex; flex-direction: column; gap: 12px; }
.pdp__gallery-main {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  background: var(--ivory); border-radius: var(--r);
}
.pdp__gallery-main img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
.pdp__gallery-tag {
  position: absolute; top: 16px; left: 16px;
  background: var(--ink); color: var(--cream);
  padding: 6px 14px; border-radius: var(--r-pill);
  font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.pdp__gallery-tag--sale {
  background: var(--terracotta);
  color: var(--cream);
}
.pdp__gallery-thumbs {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.pdp__gallery-thumbs::-webkit-scrollbar { display: none; }
.pdp__thumb {
  flex-shrink: 0; width: 78px; height: 96px;
  background-size: cover; background-position: center;
  border-radius: 8px; border: 1px solid var(--line); opacity: .55;
  transition: opacity .2s, border-color .2s;
  cursor: pointer; padding: 0;
}
.pdp__thumb:hover { opacity: .85; }
.pdp__thumb.is-active { opacity: 1; border: 2px solid var(--ink); }

.pdp__summary { display: flex; flex-direction: column; gap: 22px; }
.pdp__title { margin: 6px 0 0; }
.pdp__cn-name {
  font-family: var(--cn); font-size: 14px; letter-spacing: 5px;
  color: var(--cognac); margin-top: 6px;
}
.pdp__price-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
}
.pdp__price { font-family: var(--display); font-size: clamp(28px, 4vw, 40px); color: var(--ink); }
.pdp__price del { font-size: 18px; color: var(--ink-50); margin-left: 8px; font-weight: 400; }
.pdp__rating { display: flex; align-items: center; gap: 10px; color: var(--terracotta); letter-spacing: 3px; }
.pdp__rating-count { font-family: var(--body); font-size: 11.5px; color: var(--ink-70); letter-spacing: 0; }

.pdp__short {
  color: var(--ink-70); font-size: 14.5px; line-height: 1.7;
  padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pdp__label {
  font-family: var(--body); font-size: 11px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--terracotta); font-weight: 600;
  margin: 0 0 12px;
}

/* Tier radios — visual cards */
.tier-radio { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 540px) { .tier-radio { grid-template-columns: repeat(3, 1fr); } }
.tier-radio__item { position: relative; }
.tier-radio__input { position: absolute; opacity: 0; pointer-events: none; }
.tier-radio__label {
  display: block; padding: 16px 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--cream); cursor: pointer; transition: all .2s;
}
.tier-radio__input:checked + .tier-radio__label {
  border-color: var(--ink); background: var(--ink); color: var(--cream);
  box-shadow: 0 4px 14px rgba(58,38,32,0.18);
}
.tier-radio__name { font-family: var(--display); font-size: 20px; line-height: 1; }
.tier-radio__desc { font-size: 10.5px; opacity: .75; margin-top: 4px; letterspacing: 0.3px; }
.tier-radio__price { font-weight: 600; font-size: 13px; margin-top: 8px; }

/* Signage input */
.signage {
  padding: 14px; border-radius: var(--r);
  background: var(--ivory); border: 1px solid var(--line);
}
.signage textarea {
  width: 100%; background: transparent; border: 0; outline: 0; resize: none;
  font-family: var(--display); font-style: italic; font-size: 17px;
  color: var(--ink); min-height: 64px; line-height: 1.45;
}
.signage__suggestions { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.signage__chip {
  font-size: 11px; padding: 4px 10px; border-radius: 100px;
  background: var(--cream); border: 1px solid var(--line); color: var(--cognac);
  font-family: var(--cn); letter-spacing: 2px; cursor: pointer;
}
.signage__chip:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.signage__foot {
  display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-50);
  padding-top: 8px; border-top: 1px solid var(--line);
}

/* Date picker */
.date-row {
  display: grid; gap: 10px; grid-template-columns: 1fr;
}
@media (min-width: 540px) { .date-row { grid-template-columns: 1fr 1fr; } }
.date-row input, .date-row select {
  width: 100%; padding: 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--cream);
  font: inherit; color: var(--ink); font-size: 14px;
  appearance: none; -webkit-appearance: none;
}
.date-row input:focus, .date-row select:focus { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.date-row select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%233a2620' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px;
}

/* Add-on checkboxes */
.addon { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); cursor: pointer; background: var(--cream); }
.addon + .addon { margin-top: 8px; }
.addon input { margin-top: 3px; accent-color: var(--terracotta); }
.addon__title { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.addon__desc { font-size: 12px; color: var(--ink-70); margin-top: 2px; }
.addon__price { margin-left: auto; font-weight: 600; font-size: 13px; color: var(--terracotta); white-space: nowrap; }

/* Quantity + add to bag (sticky on mobile) */
.pdp__cta {
  display: flex; gap: 10px; align-items: center;
  padding: 14px 0;
}
.qty {
  display: inline-flex; align-items: center; padding: 2px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--cream);
}
.qty__btn { width: 38px; height: 38px; border-radius: 50%; font-size: 18px; }
.qty__val { min-width: 28px; text-align: center; font-weight: 600; font-size: 14px; }
.pdp__cta .btn { flex: 1; min-width: 180px; justify-content: center; }

.pdp__sticky-cta {
  position: sticky; bottom: 0; z-index: 30;
  background: rgba(251,245,234,0.95); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  margin: 0 calc(-1 * var(--gutter));
  display: flex; gap: 10px; align-items: center;
}
.pdp__sticky-cta .pdp__sticky-price {
  font-family: var(--display); font-size: 22px; color: var(--ink); flex-shrink: 0;
}
@media (min-width: 720px) { .pdp__sticky-cta { display: none; } }

/* Trust mini row */
.pdp__trust {
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-70);
}
.pdp__trust li { display: flex; align-items: center; gap: 6px; }
.pdp__trust svg { color: var(--terracotta); flex-shrink: 0; }

/* Tabs */
.pdp__tabs {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(36px, 5vw, 80px) var(--gutter);
  border-top: 1px solid var(--line); margin-top: 40px;
}
.tabs-nav { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin: 0 0 28px; overflow-x: auto; scrollbar-width: none; }
.tabs-nav::-webkit-scrollbar { display: none; }
.tabs-nav button {
  padding: 14px 0; font-size: 11.5px; letter-spacing: 1.6px;
  text-transform: uppercase; font-weight: 500; color: var(--ink-50);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; flex-shrink: 0;
}
.tabs-nav button.is-active { color: var(--ink); border-color: var(--ink); }
.tab-panel { font-size: 14.5px; line-height: 1.75; color: var(--ink-70); max-width: 720px; }
.tab-panel[hidden] { display: none; }
.tab-panel p { margin: 0 0 1em; }
.tab-panel h4 { font-family: var(--display); font-size: 22px; color: var(--ink); margin: 24px 0 10px; }
.tab-panel ul { list-style: none; padding: 0; }
.tab-panel ul li { padding-left: 22px; position: relative; margin-bottom: 8px; }
.tab-panel ul li::before { content: "✿"; position: absolute; left: 0; color: var(--terracotta); }

/* Related products rail */
.related { padding: clamp(36px, 5vw, 80px) 0 clamp(56px, 7vw, 110px); background: var(--ivory); }
/* WC outputs `<section class="related products">` directly — give it the
   same ivory full-bleed treatment as the manual `.related` div used in
   our static prototypes, then constrain the children (heading + grid)
   to the 1280px page wrap with horizontal gutters. */
section.related.products,
section.related {
  display: block !important;
  background: var(--ivory);
  padding: clamp(36px, 5vw, 80px) 0 clamp(56px, 7vw, 110px);
  /* Full-bleed: section is now a top-level sibling of `<div class="product">`
     (see woocommerce/content-single-product.php override), so it isn't
     trapped in a grid cell anymore. The classic negative-margin trick
     reaches the viewport edges cleanly from any normal block parent. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
}
/* Prevent the full-bleed trick from causing a horizontal scrollbar. */
body.single-product { overflow-x: hidden; }
/* Container constraint — applies to BOTH:
   • our editorial override (`section.related > .wrap` wraps the
     featured__head + product loop together)
   • WC's default markup (bare `> h2` + `> ul.products` direct children)
   so either path renders inside the 1280px page wrap with gutters. */
section.related > .wrap,
section.related > h2,
section.related > ul.products,
section.related > .woocommerce > ul.products {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  box-sizing: border-box;
}
/* Default-WC heading (fallback if our related.php override isn't loaded) */
section.related > h2 {
  font-family: var(--display); font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15; margin-bottom: clamp(24px, 3vw, 40px); color: var(--ink);
  font-weight: 500;
}
/* Editorial override — eyebrow + display heading + "View all" CTA.
   `.featured__head` and `.eyebrow` / `.display` / `.link` are already
   defined globally; this just ensures the head sits flush with the
   grid below and the bottom margin matches the prototype. */
section.related > .wrap > .featured__head { margin-bottom: clamp(24px, 3vw, 40px); }
section.related > .wrap > .featured__head .display { margin: 6px 0 0; }
/* Force the related-products UL to use OUR responsive grid template even
   though it doesn't carry the `.shop-grid` class. WC ships a `columns-N`
   helper on the UL that we deliberately ignore — related-products row
   count is consistent so a fixed ramp is correct. */
section.related ul.products,
.woocommerce section.related ul.products {
  grid-template-columns: 1fr 1fr !important;
}
@media (min-width: 720px) {
  section.related ul.products,
  .woocommerce section.related ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 960px) {
  section.related ul.products,
  .woocommerce section.related ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (min-width: 960px) {
  .pdp__inner { grid-template-columns: 1.05fr 1fr; align-items: start; }
  .pdp__summary { position: sticky; top: 100px; }
  .pdp__gallery { flex-direction: row; }
  .pdp__gallery-thumbs { flex-direction: column; order: -1; }
  .pdp__thumb { width: 60px; height: 78px; }
}

/* ──────────────────────────────────────────────────────────────────
 * Cart page
 * ──────────────────────────────────────────────────────────────── */
.cart-page {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) var(--gutter) clamp(56px, 7vw, 110px);
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) { .cart-page { grid-template-columns: 1.4fr 1fr; align-items: start; } }

.cart-list { display: flex; flex-direction: column; gap: 8px; }
.cart-row {
  display: grid; gap: 14px;
  grid-template-columns: 92px 1fr;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.cart-row__img {
  width: 92px; aspect-ratio: 4/5;
  background-size: cover; background-position: center;
  border-radius: 8px;
}
.cart-row__main { display: flex; flex-direction: column; gap: 4px; }
.cart-row__cat {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--terracotta); font-weight: 500;
}
.cart-row__name { font-family: var(--display); font-size: 20px; color: var(--ink); margin: 0; line-height: 1.15; }
.cart-row__opts { font-size: 12px; color: var(--ink-70); }
.cart-row__opts li { margin: 2px 0; }
.cart-row__desc {
  font-size: 12.5px;
  color: var(--ink-70);
  line-height: 1.55;
  margin: 4px 0 0;
  max-width: 56ch;
}
.cart-row__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; gap: 16px; flex-wrap: wrap;
}
.cart-row__price { font-family: var(--display); font-size: 20px; color: var(--ink); }
.cart-row__remove {
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 600; color: var(--ink-50); padding: 4px 0; border-bottom: 1px solid var(--line);
}
.cart-row__remove:hover { color: var(--terracotta); border-color: var(--terracotta); }

.cart-summary {
  background: var(--ivory); border-radius: var(--r);
  padding: clamp(20px, 3vw, 32px);
  position: sticky; top: 100px;
}
.cart-summary__title { font-family: var(--display); font-size: 24px; margin: 0 0 16px; color: var(--ink); }
.cart-summary__row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 13.5px; color: var(--ink-70); }
.cart-summary__row strong { font-weight: 600; color: var(--ink); }
.cart-summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--line);
}
.cart-summary__total-label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-50); }
.cart-summary__total-amt { font-family: var(--display); font-size: 32px; color: var(--ink); }

.promo {
  display: flex; gap: 0; margin: 14px 0 20px;
  border-radius: var(--r-pill); background: var(--cream);
  border: 1px solid var(--line); overflow: hidden;
}
.promo input { flex: 1; padding: 11px 16px; border: 0; background: transparent; font: inherit; outline: 0; font-size: 13px; }
.promo button {
  padding: 0 18px; background: var(--ink); color: var(--cream);
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600;
}

.cart-empty { text-align: center; padding: 80px 20px; }
.cart-empty .display { margin-top: 24px; }
.cart-empty p { color: var(--ink-70); margin: 14px 0 24px; }

.cart-trust {
  display: grid; gap: 12px; padding: 14px 0; grid-template-columns: 1fr;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.cart-trust li {
  display: flex; gap: 10px; align-items: center;
  font-size: 11.5px; color: var(--ink-70);
}
.cart-trust svg { color: var(--terracotta); flex-shrink: 0; }

/* ──────────────────────────────────────────────────────────────────
 * Checkout page
 * ──────────────────────────────────────────────────────────────── */
.checkout-header {
  background: var(--cream); border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.checkout-header__inner {
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.checkout-header__secure {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-70); font-weight: 500;
}
.checkout-header__secure svg { color: var(--sage); }

.stepper {
  max-width: var(--container); margin: 0 auto;
  padding: 18px var(--gutter) 4px;
  display: flex; gap: 0; align-items: center;
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  overflow-x: auto; scrollbar-width: none;
}
.stepper::-webkit-scrollbar { display: none; }
.stepper__step {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-50); flex-shrink: 0; white-space: nowrap;
}
.stepper__step.is-active { color: var(--ink); font-weight: 600; }
.stepper__step.is-done   { color: var(--terracotta); }
.stepper__num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ivory); display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: inherit;
  border: 1px solid var(--line);
}
.stepper__step.is-active .stepper__num { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.stepper__step.is-done   .stepper__num { background: var(--terracotta); color: var(--cream); border-color: var(--terracotta); }
.stepper__sep {
  flex: 1; min-width: 16px; height: 1px;
  background: var(--line); margin: 0 12px;
}

.checkout-page {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(56px, 7vw, 110px);
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) { .checkout-page { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; } }
@media (min-width: 1200px) { .checkout-page { grid-template-columns: minmax(0, 1fr) 420px; } }

.checkout-section {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(20px, 3vw, 32px);
  margin-bottom: 16px;
}
.checkout-section__title {
  font-family: var(--display); font-size: 24px; margin: 0 0 4px; color: var(--ink);
  display: flex; align-items: center; gap: 12px;
}
.checkout-section__num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--terracotta); color: var(--cream);
  display: grid; place-items: center;
  font-family: var(--display); font-style: italic; font-size: 17px; font-weight: 500;
}
.checkout-section__sub { font-size: 12px; color: var(--ink-70); margin: 0 0 22px 44px; }

.form-grid {
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 540px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-70); font-weight: 600;
}
.form-field input, .form-field select, .form-field textarea {
  padding: 13px 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--cream);
  font: inherit; color: var(--ink); font-size: 14px; outline: 0;
  transition: border .15s, box-shadow .15s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(181,107,77,0.15);
}
.form-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%233a2620' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px;
}
.form-field textarea { resize: vertical; min-height: 80px; font-family: var(--display); font-style: italic; }

/* Bank tiles for FPX */
.bank-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 540px) { .bank-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .bank-grid { grid-template-columns: repeat(4, 1fr); } }
.bank { position: relative; }
.bank input { position: absolute; opacity: 0; pointer-events: none; }
.bank__label {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--cream); transition: all .15s;
}
.bank input:checked + .bank__label {
  border-color: var(--terracotta); background: rgba(181,107,77,0.06);
  box-shadow: 0 0 0 3px rgba(181,107,77,0.12);
}
.bank__mark {
  width: 28px; height: 28px; border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--body); font-weight: 700; font-size: 12px;
  color: #fff; flex-shrink: 0; letter-spacing: 0;
}
.bank__name { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }

/* Order summary line items */
.order-summary { padding: clamp(20px, 3vw, 32px); background: var(--ivory); border-radius: var(--r); position: sticky; top: 100px; }
.order-summary__title { font-family: var(--display); font-size: 22px; margin: 0 0 18px; color: var(--ink); }
.order-summary__items { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.order-summary__row { display: flex; gap: 12px; }
.order-summary__thumb { width: 60px; height: 76px; flex-shrink: 0; background-size: cover; background-position: center; border-radius: 6px; }
.order-summary__name { font-family: var(--display); font-size: 16px; line-height: 1.2; color: var(--ink); margin: 0; }
.order-summary__opt { font-size: 11px; color: var(--ink-70); margin-top: 2px; }
.order-summary__price { margin-left: auto; font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.order-summary__totals { padding: 14px 0; }
.order-summary__totals .cart-summary__row { padding: 6px 0; }

/* Place-order CTA */
.place-order {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 14px;
}
.place-order .btn { width: 100%; justify-content: center; padding: 16px; font-size: 12px; }
.place-order__note { font-size: 11px; color: var(--ink-50); text-align: center; line-height: 1.5; }

/* ──────────────────────────────────────────────────────────────────
   Catalog mode (YITH WooCommerce Catalog Mode OR the theme toggle).
   `body.jemem-catalog-mode` is added by `body_class` filter in
   functions.php. CSS sweeps any add-to-cart UI that PHP can't reach —
   sticky-bar plugins, variation forms, page-builder grids, AJAX
   re-renders. Belt-and-braces on top of the PHP guards in
   `jemem_card_body()`, `single-product.php`, and the
   `woocommerce_loop_add_to_cart_link` filter.
   ────────────────────────────────────────────────────────────────── */
body.jemem-catalog-mode .product__cart-wrap,
body.jemem-catalog-mode li.product > a.button.add_to_cart_button,
body.jemem-catalog-mode li.product > a.added_to_cart,
body.jemem-catalog-mode .add_to_cart_button,
body.jemem-catalog-mode .single_add_to_cart_button,
body.jemem-catalog-mode button.single_add_to_cart_button,
body.jemem-catalog-mode form.cart,
body.jemem-catalog-mode .summary form.cart,
body.jemem-catalog-mode .summary .quantity,
body.jemem-catalog-mode .summary .pdp__label,
body.jemem-catalog-mode .pdp__summary form.cart,
body.jemem-catalog-mode .pdp__summary .quantity,
body.jemem-catalog-mode .pdp__summary .pdp__label,
body.jemem-catalog-mode .woocommerce-variation-add-to-cart,
body.jemem-catalog-mode .yith-wcqv-button,
body.jemem-catalog-mode .ywctm-button,
body.jemem-catalog-mode .wc-pao-addon-wrap + .cart,
body.jemem-catalog-mode .woocommerce-mini-cart__buttons,
body.jemem-catalog-mode a.checkout-button,
body.jemem-catalog-mode .wc-block-cart,
body.jemem-catalog-mode .wc-block-checkout,
/* Sticky / floating buy bars added by booster plugins. */
body.jemem-catalog-mode .wc-sticky-add-to-cart,
body.jemem-catalog-mode #wc-sticky-add-to-cart,
body.jemem-catalog-mode .sticky-add-to-cart,
body.jemem-catalog-mode .single-product-sticky,
body.jemem-catalog-mode .pdp__sticky-cta,
/* Buy Now / Direct Checkout buttons (WC Direct Checkout, Buy Now Express). */
body.jemem-catalog-mode .buy-now-button,
body.jemem-catalog-mode .direct-checkout-button,
body.jemem-catalog-mode .wcdc-button {
  display: none !important;
}

/* Defensive: any `<form class="cart">` descendant on the PDP — even
   if its container class differs (variable products wrap the form in
   `.variations_form`, grouped in `.grouped_form`, etc.). */
body.jemem-catalog-mode.single-product form.cart,
body.jemem-catalog-mode.single-product .variations_form,
body.jemem-catalog-mode.single-product .grouped_form,
body.jemem-catalog-mode.single-product .product-type-external .cart {
  display: none !important;
}

/* In catalog mode the cart icon in the header is dead weight — hide it
   so visitors don't end up on an empty cart page. (`.icon-btn--cart`
   is the wrapper in `header.php`.) */
body.jemem-catalog-mode .icon-btn--cart,
body.jemem-catalog-mode [data-cart-count] {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────
   Mobile shop-page hardening.
   The sticky header was failing on mobile (rendering with a gap above
   it instead of pinned to the very top). Root cause: somewhere up the
   ancestor chain an `overflow` value other than `visible` was killing
   `position: sticky` — and on iOS Safari even `overflow-x: clip` can
   trip the same behaviour. Rather than chase the offending ancestor,
   switch the mobile header to plain `position: fixed`, which works
   regardless of ancestor overflow. Pad the body to compensate for
   the now out-of-flow header so the page content doesn't slip under it.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .header {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 50 !important;
    margin-top: 0 !important;
  }
  /* Compensate for the fixed header height so content starts below it. */
  body { padding-top: 64px; }
  /* Topbar — keep it as a normal-flow band ABOVE the fixed header so
     it stays visible at the top of the page and scrolls away with the
     content (matches the desktop behaviour). The fixed header still
     sits below it because the topbar is on the page background and
     the header is layered on top via z-index. To make this work the
     header needs to know about the topbar — easiest: simply DON'T
     show the topbar on mobile (the info inside is duplicated below
     in the breadcrumb / hero anyway). */
  .topbar { display: none !important; }
  body.admin-bar .header { top: 46px !important; }
  body.admin-bar { padding-top: 110px; }
}


/* ────────────────────────────────────────────────────────────
   FAQ page — accordion (native <details>), bilingual.
   Used by template-parts/faq.php via page-faq.php (Template: FAQ Page).
   Mirrors the warm token system; no JS required.
   ──────────────────────────────────────────────────────────── */
.faq-hero { padding: clamp(64px,8vw,120px) 0 clamp(28px,4vw,44px); text-align: center; background: var(--cream); }
.faq-hero__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.faq-hero .display { margin: 14px 0 18px; }
.faq-hero__lede { color: var(--ink-70); font-size: 16px; line-height: 1.7; max-width: 560px; margin: 0 auto; }

.faq { padding: 0 0 clamp(56px,7vw,104px); background: var(--cream); }
.faq__inner { max-width: 840px; margin: 0 auto; padding: 0 var(--gutter); }

.faq__group { margin-top: clamp(36px,5vw,56px); }
.faq__group:first-child { margin-top: 8px; }
.faq__group-label {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; color: var(--terracotta);
  margin-bottom: 6px;
}
.faq__group-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.faq__group-cn { font-family: var(--cn); font-size: 11px; letter-spacing: 2px; color: var(--cognac); font-weight: 500; }

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 18px;
  padding: 22px 0; user-select: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q {
  flex: 1; font-family: var(--display); font-size: clamp(20px,2.4vw,25px); line-height: 1.25; color: var(--ink);
  transition: color .2s;
}
.faq__q small { font-family: var(--cn); font-size: 12px; letter-spacing: 2px; color: var(--cognac); font-weight: 500; display: block; margin-top: 5px; }
.faq__item summary:hover .faq__q { color: var(--terracotta); }
/* Show/hide toggle — circular +/× icon */
.faq__icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--terracotta); margin-top: 2px;
  transition: background .2s, border-color .2s;
}
.faq__icon svg { display: block; transition: transform .25s; }
.faq__item summary:hover .faq__icon { border-color: var(--terracotta); }
.faq__item[open] .faq__icon { background: var(--terracotta); border-color: var(--terracotta); color: var(--cream); }
.faq__item[open] .faq__icon svg { transform: rotate(45deg); }

.faq__a { padding: 2px 52px 30px 0; max-width: 660px; }
.faq__a-en { color: var(--ink-soft); font-size: 15px; line-height: 1.85; }
.faq__a-en p { margin: 0 0 12px; }
.faq__a-en p:last-child { margin-bottom: 0; }
.faq__a-en strong { color: var(--ink); font-weight: 600; }
.faq__a-en a { color: var(--terracotta); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.faq__a-cn { margin-top: 26px; font-family: var(--cn); color: var(--ink-70); font-size: 15px; line-height: 2.05; letter-spacing: 0.5px; }
.faq__a-cn p { margin: 0 0 10px; }
.faq__a-cn p:last-child { margin-bottom: 0; }
.faq__a-cn strong { font-weight: 600; color: var(--ink-soft); }
.faq__a-cn a { color: var(--cognac); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.faq__item[open] .faq__a { animation: faqReveal .28s ease; }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.faq-cta {
  margin-top: clamp(48px,6vw,72px); text-align: center;
  background: var(--ivory); border-radius: 6px; padding: clamp(36px,5vw,56px) 28px;
}
.faq-cta .display { font-size: clamp(26px,3.4vw,40px); margin: 0 0 10px; }
.faq-cta__lede { color: var(--ink-70); font-size: 15px; max-width: 440px; margin: 0 auto 24px; line-height: 1.65; }
.faq-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 560px) {
  .faq__a { padding-right: 0; }
  .faq__item summary { gap: 12px; }
}

/* ════════════════════════════════════════════════════════════
   JOURNAL (blog) — editorial listing + single post + prose
   Paired with index.php, single.php, template-parts/post-card.php
   ════════════════════════════════════════════════════════════ */

/* ── Listing header ── */
.journal-hero { padding: clamp(56px,7vw,104px) 0 clamp(28px,4vw,48px); text-align: center; background: var(--cream); }
.journal-hero__inner { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }
.journal-hero .display { margin: 14px 0 16px; }
.journal-hero__lede { color: var(--ink-70); font-size: 16px; line-height: 1.7; max-width: 540px; margin: 0 auto; }

/* ── Card grid ── */
.journal { padding: 0 0 clamp(56px,7vw,104px); background: var(--cream); }
.journal__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.journal__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: clamp(28px,3vw,44px) clamp(24px,2.5vw,36px);
}

/* ── Post card ── */
.jcard { display: flex; flex-direction: column; }
.jcard__media {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r); aspect-ratio: 3 / 2; background: var(--ivory);
}
.jcard__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.jcard__media:hover .jcard__img { transform: scale(1.05); }
.jcard__cat {
  position: absolute; left: 12px; top: 12px;
  background: rgba(251,245,234,.92); color: var(--cognac);
  font-family: var(--body); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700;
  padding: 6px 11px; border-radius: var(--r-pill);
}
.jcard__body { padding: 18px 2px 0; display: flex; flex-direction: column; flex: 1; }
.jcard__meta { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-50); font-weight: 600; margin-bottom: 9px; }
.jcard__title {
  font-family: var(--display); font-weight: 500; font-size: clamp(21px,2.2vw,25px); line-height: 1.22;
  color: var(--ink); margin: 0 0 10px; letter-spacing: -.2px;
}
.jcard__title a { color: inherit; text-decoration: none; transition: color .18s; }
.jcard__title a:hover { color: var(--terracotta); }
.jcard__excerpt { color: var(--ink-70); font-size: 14.5px; line-height: 1.7; margin: 0 0 16px; }
.jcard__more {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--body); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700;
  color: var(--terracotta); text-decoration: none;
}
.jcard__more svg { transition: transform .2s; }
.jcard__more:hover svg { transform: translateX(4px); }

/* ── Featured (first post, full-width) ── */
.jcard--feature { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .jcard--feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px,3.5vw,52px); align-items: center; }
  .jcard--feature .jcard__media { aspect-ratio: 4 / 3; height: 100%; }
  .jcard--feature .jcard__body { padding: 0; }
  .jcard--feature .jcard__title { font-size: clamp(28px,3.4vw,40px); }
  .jcard--feature .jcard__excerpt { font-size: 15.5px; }
}

/* ── Pagination ── */
.journal__nav { margin-top: clamp(40px,5vw,64px); }
.journal__nav .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.journal__nav .page-numbers {
  display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent;
  font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.journal__nav .page-numbers:hover { border-color: var(--terracotta); color: var(--terracotta); }
.journal__nav .page-numbers.current { background: var(--terracotta); border-color: var(--terracotta); color: var(--cream); }
.journal__nav .page-numbers.dots { border: 0; }

/* ════ SINGLE POST ════ */
.post { background: var(--cream); padding: clamp(48px,6vw,88px) 0 clamp(56px,7vw,104px); }
.post__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.post__back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px;
  font-family: var(--body); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700;
  color: var(--ink-50); text-decoration: none; transition: color .18s;
}
.post__back:hover { color: var(--terracotta); }
.post__back svg { transition: transform .2s; }
.post__back:hover svg { transform: translateX(-3px); }
.post__head { text-align: center; max-width: 680px; margin: 0 auto; }
.post__cat {
  display: inline-block; font-family: var(--body); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; color: var(--terracotta); margin-bottom: 16px;
}
.post__title { margin: 0 0 18px; letter-spacing: -.5px; }
.post__meta {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; letter-spacing: .4px; color: var(--ink-50); font-weight: 500;
}
.post__meta span { display: inline-flex; align-items: center; gap: 7px; }
.post__meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rose); }
.post__banner { margin: clamp(30px,4vw,52px) 0; }
.post__banner img { width: 100%; height: auto; border-radius: var(--r-lg); display: block; }

/* ── Prose (the_content) ── */
.prose { color: var(--ink-soft); font-size: 17px; line-height: 1.78; }
.prose > * + * { margin-top: 1.4em; }
.prose p { margin: 0; }
.prose h2 {
  font-family: var(--display); font-weight: 600; font-size: clamp(26px,3vw,33px); line-height: 1.2;
  color: var(--ink); margin: 1.8em 0 0; letter-spacing: -.3px;
}
.prose h3 {
  font-family: var(--display); font-weight: 600; font-size: clamp(21px,2.3vw,26px); line-height: 1.25;
  color: var(--ink); margin: 1.6em 0 0;
}
.prose a { color: var(--terracotta); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; }
.prose li { margin: .5em 0; }
.prose li::marker { color: var(--terracotta); }
.prose img { max-width: 100%; height: auto; border-radius: var(--r); display: block; }
.prose figure { margin: 0; }
.prose figcaption { font-size: 13px; color: var(--ink-50); text-align: center; margin-top: 10px; font-style: italic; }
.prose blockquote {
  margin: 1.6em 0; padding: 6px 0 6px 28px; border-left: 3px solid var(--blush);
  font-family: var(--display); font-style: italic; font-size: clamp(21px,2.4vw,26px); line-height: 1.4; color: var(--cognac);
}
.prose blockquote p { margin: 0; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em;
  background: var(--ivory); padding: 2px 7px; border-radius: var(--r-sm); color: var(--cognac);
}

/* ── Post footer: tags + share + back ── */
.post__footer { max-width: 760px; margin: clamp(40px,5vw,64px) auto 0; padding: clamp(28px,3vw,40px) var(--gutter) 0; border-top: 1px solid var(--line); }
.post__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.post__tags-label { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-50); font-weight: 700; margin-right: 4px; }
.post__tag {
  font-family: var(--body); font-size: 12px; color: var(--ink-soft); text-decoration: none;
  padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); transition: border-color .15s, color .15s;
}
.post__tag:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* ── Related / more from journal ── */
.post-related { background: var(--ivory); padding: clamp(48px,6vw,88px) 0; }
.post-related__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.post-related .section-head { margin-bottom: clamp(28px,3vw,44px); }

@media (max-width: 600px) {
  .journal__grid { grid-template-columns: 1fr; }
  .prose { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════
   CUSTOM ORDER page — guided bespoke request form.
   Paired with page-custom-order.php → template-parts/custom-order.php.
   ════════════════════════════════════════════════════════════ */
.co-hero { position: relative; padding: clamp(56px,7vw,104px) 0 clamp(40px,5vw,72px); background: var(--cream); overflow: hidden; }
.co-hero__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: clamp(32px,4vw,56px); align-items: center;
}
.co-hero__copy { max-width: 560px; }
.co-hero .display { margin: 14px 0 18px; }
.co-hero__lede { color: var(--ink-70); font-size: 17px; line-height: 1.7; }
.co-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; }
.co-hero__meta li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.co-hero__meta svg { color: var(--terracotta); flex-shrink: 0; }
.co-hero__media {
  position: relative; aspect-ratio: 5/4; border-radius: var(--r);
  background-size: cover; background-position: center;
  box-shadow: 0 30px 60px -28px rgba(58,38,32,0.4);
}
.co-hero__stamp {
  position: absolute; right: -14px; bottom: -14px;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--ivory); color: var(--cognac);
  display: grid; place-items: center; text-align: center;
  font-family: var(--cn); font-size: 13px; letter-spacing: 2px; line-height: 1.5;
  box-shadow: 0 16px 30px -16px rgba(58,38,32,0.5);
}
@media (min-width: 900px) {
  .co-hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}

/* Form */
.co-form { padding: clamp(48px,6vw,96px) 0; background: var(--cream); }
.co-form__inner { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); }
.co-form__card {
  background: var(--ivory); border-radius: var(--r);
  padding: clamp(28px,4vw,52px);
  box-shadow: 0 24px 50px -34px rgba(58,38,32,0.35);
}
.co-grid { display: grid; grid-template-columns: 1fr; gap: 22px 24px; }
@media (min-width: 660px) { .co-grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field > label {
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: baseline; gap: 8px;
}
.field > label .cn-lbl { font-family: var(--cn); font-size: 11px; letter-spacing: 1px; text-transform: none; color: var(--cognac); font-weight: 500; }
.field > label .req { color: var(--terracotta); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 15px; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: 8px;
  padding: 13px 14px; width: 100%; transition: border-color .18s, box-shadow .18s; -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
/* Gift-card message & flowers note — elegant serif italic, matching Checkout's gift message */
#message, #flowers { font-family: var(--display); font-style: italic; font-size: 16px; line-height: 1.5; }
#message::placeholder, #flowers::placeholder { font-style: italic; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(181,107,77,0.14);
}
.field select { background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b4a2c' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.field__hint { font-size: 12px; color: var(--ink-50); }
.co-msgmeta { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--ink-50); margin-top: 2px; }
.co-msgmeta .over { color: var(--terracotta); font-weight: 600; }

/* Budget chips */
.co-budget { grid-column: 1 / -1; }
.co-budget__legend {
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
}
.co-budget__legend .cn-lbl { font-family: var(--cn); font-size: 11px; letter-spacing: 1px; text-transform: none; color: var(--cognac); font-weight: 500; }
.co-budget__legend .req { color: var(--terracotta); }
.co-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .co-chips { grid-template-columns: repeat(4, 1fr); } }
.co-chip { position: relative; }
.co-chip input { position: absolute; opacity: 0; pointer-events: none; }
.co-chip span {
  display: block; text-align: center; cursor: pointer;
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  padding: 13px 8px; font-size: 14px; color: var(--ink-soft); transition: all .16s;
}
.co-chip span small { display: block; font-size: 11px; color: var(--ink-50); margin-top: 2px; }
.co-chip input:checked + span { background: var(--terracotta); border-color: var(--terracotta); color: var(--cream); }
.co-chip input:checked + span small { color: rgba(251,245,234,0.8); }
.co-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(181,107,77,0.18); }

/* Inline chip group inside a single grid cell (e.g. gender) */
.co-inline { border: 0; margin: 0; padding: 0; min-width: 0; }
.co-inline legend {
  padding: 0; margin-bottom: 8px;
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: baseline; gap: 8px;
}
.co-inline legend .cn-lbl { font-family: var(--cn); font-size: 11px; letter-spacing: 1px; text-transform: none; color: var(--cognac); font-weight: 500; }
.co-chips--inline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.co-chips--inline .co-chip span { padding: 11px 6px; }

/* Colour swatches (single-select) */
.co-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 480px) { .co-swatches { grid-template-columns: repeat(4, 1fr); } }
.co-swatch { position: relative; }
.co-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.co-swatch span {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 14px; font-size: 14px; color: var(--ink-soft); transition: all .16s;
}
.co-swatch span i { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: block; }
.co-swatch span small { font-family: var(--cn); font-size: 12px; color: var(--ink-50); }
.co-swatch input:checked + span { border-color: var(--terracotta); background: #fff; box-shadow: 0 0 0 1px var(--terracotta) inset; }
.co-swatch input:checked + span small { color: var(--cognac); }
.co-swatch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(181,107,77,0.18); }

.co-form__foot { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.co-form__note { font-size: 13px; color: var(--ink-70); line-height: 1.6; flex: 1; min-width: 220px; }
.co-form__note a { color: var(--terracotta); text-decoration: none; border-bottom: 1px solid currentColor; }
.co-form__submit { display: inline-flex; align-items: center; gap: 10px; }

/* Pricing guidance */
.pricing { padding: clamp(48px,6vw,96px) 0; background: var(--ivory); }
.pricing__grid {
  max-width: var(--container); margin: 28px auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 680px) { .pricing__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pricing__grid { grid-template-columns: repeat(4, 1fr); } }
.tier {
  background: var(--cream); border-radius: var(--r); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line);
}
.tier__range { font-family: var(--display); font-size: 26px; color: var(--terracotta); font-weight: 500; }
.tier__name { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); }
.tier__desc { font-size: 14px; color: var(--ink-70); line-height: 1.65; margin: 0; }
.pricing__foot { text-align: center; color: var(--ink-50); font-size: 13px; margin: 26px auto 0; max-width: 560px; padding: 0 var(--gutter); line-height: 1.6; }

/* Confirmation dialog */
.co-dialog { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; }
.co-dialog[hidden] { display: none; }
.co-dialog__bg { position: absolute; inset: 0; background: rgba(26,18,8,0.55); backdrop-filter: blur(2px); animation: coFade .2s ease; }
.co-dialog__sheet {
  position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  background: var(--cream); border-radius: var(--r); padding: clamp(28px,4vw,40px);
  box-shadow: 0 40px 80px -30px rgba(26,18,8,0.6); animation: coRise .26s ease;
}
.co-dialog__sheet .display { font-size: clamp(28px,3.6vw,40px); margin: 10px 0 12px; }
.co-dialog__lede { color: var(--ink-70); font-size: 14px; line-height: 1.6; margin: 0 0 22px; }
.co-dialog__close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: 22px; line-height: 1;
  cursor: pointer; transition: background .15s, color .15s;
}
.co-dialog__close:hover { background: var(--terracotta); color: var(--cream); border-color: var(--terracotta); }
.co-summary { margin: 0 0 26px; border-top: 1px solid var(--line); }
.co-summary div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.co-summary dt { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; color: var(--ink-50); }
.co-summary dd { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.5; word-break: break-word; }
.co-dialog__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.co-dialog__actions .btn { flex: 1; justify-content: center; min-width: 140px; }
.co-dialog__error {
  margin: 0 0 18px; padding: 11px 14px; border-radius: 8px;
  background: rgba(192,57,43,0.08); color: #a23; font-size: 13px; line-height: 1.5;
}
.co-dialog__tick {
  width: 60px; height: 60px; border-radius: 50%; margin: 4px auto 16px;
  display: grid; place-items: center;
  background: var(--sage, #8a8a6b); color: #fff;
}
.co-dialog__tick + .display em { font-style: normal; color: var(--rose); }
@keyframes coFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes coRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }