@layer theme {
    /* ============================================================
       STOREFRONT DESIGN SYSTEM — inline, zero external dependencies
       Design tokens from: ui-kit/saauzi-UI-kit/scss/abstracts/_variables.scss
       Reference UI: nuxt/bos/app/pages/ecomm/dashboard/index.vue
    ============================================================ */

    /* ── Reset ── */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }

    img, video {
      display: block;
      max-width: 100%;
    }

    a { color: inherit; }

    button {
      font: inherit;
      cursor: pointer;
      border: none;
      background: none;
    }

    /* ── Token defaults (override via theme_css_vars injection) ── */
    :root {
      /* Brand — pumpkin (#e67e22) from ui-kit _variables.scss as warm fallback */
      --brand:                  #e67e22;
      --theme-color-primary:    #e67e22;
      --theme-color-secondary:  #1d26a2;
      --theme-color-accent:     #fa5e12;
      --theme-color-bg:         #f5f4f2;
      --theme-color-text:       #111110;
      --theme-font-heading:     -apple-system, 'Segoe UI', sans-serif;
      --theme-font-body:        -apple-system, 'Segoe UI', sans-serif;
      --theme-spacing-unit:     1rem;

      /* Header logo sizing — overridden by the theme settings sliders. */
      --theme-logo-height-desktop: 60px;
      --theme-logo-height-mobile:  60px;

      /* Primary button tokens. These defaults reproduce the values the
         primary CTAs were hardcoded to before they were tokenised, so a
         tenant with no saved buttons group renders byte-identically. */
      --theme-btn-bg:           var(--te-accent);
      --theme-btn-text:         #ffffff;
      --theme-btn-radius:       8px;

      /* Internal surface tokens — match BOS dashboard palette */
      --te-surface:             #ffffff;
      --te-surface-sub:         #faf9f8;
      --te-surface-muted:       #f2f1ef;
      --te-border:              rgba(0, 0, 0, 0.07);
      --te-border-mid:          rgba(0, 0, 0, 0.11);
      --te-border-strong:       rgba(0, 0, 0, 0.16);
      --te-text-1:              #111110;
      --te-text-2:              #4a4845;
      --te-text-3:              #8a8784;
      --te-text-4:              #b5b3b0;

      /* Accent — derived from the tenant's brand, never a fixed hue.
         mid/light used to be literal orange (#c95d1f / rgba(224,108,42,.09)),
         which is this file's DEFAULT accent hard-coded. Every consumer —
         cart hover, active variant chips, focus rings — then rendered orange
         on a store whose brand was any other colour. Mixing off --te-accent
         keeps them in the store's own hue. */
      --te-accent:              var(--brand, #e06c2a);
      --te-accent-mid:          color-mix(in srgb, var(--te-accent) 80%, #000);
      --te-accent-light:        color-mix(in srgb, var(--te-accent) 9%, transparent);

      /* Shadows — exact values from BOS dashboard */
      --te-shadow-xs: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
      --te-shadow-sm: 0 2px 8px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
      --te-shadow-md: 0 6px 20px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05);
      --te-shadow-lg: 0 16px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);

      /* Radius */
      --te-r-sm:  8px;
      --te-r-md:  12px;
      --te-r-lg:  16px;
      --te-r-xl:  20px;
      --te-r-2xl: 28px;

      /* Motion — matches BOS dashboard easing */
      --te-ease:     cubic-bezier(0.22, 1, 0.36, 1);
      --te-ease-out: cubic-bezier(0, 0, 0.2, 1);
      --te-dur:      220ms;
    }

    /* ── Base body ── */
    body.te-page {
      font-family: var(--theme-font-body, -apple-system, 'Segoe UI', sans-serif);
      background-color: var(--theme-color-bg, #f5f4f2);
      color: var(--te-text-1, #111110);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.6;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* ── Container ── */
    .te-container {
      width: 100%;
      max-width: 1280px;
      margin-inline: auto;
      padding-inline: 2rem;
    }

    /* ── Skip nav (accessibility) ── */
    .te-skip-nav {
      position: absolute;
      top: -100%;
      left: 1rem;
      z-index: 9999;
      background: var(--te-accent);
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: 0 0 var(--te-r-sm) var(--te-r-sm);
      font-weight: 600;
      font-size: 0.85rem;
      text-decoration: none;
      transition: top 0.2s;
    }
    .te-skip-nav:focus { top: 0; }

    /* ══════════════════════════════════════════════
       HEADER — sticky, frosted-glass
    ══════════════════════════════════════════════ */
    /* Announcement bar — header slot. Defaults to the tenant's brand colour;
       per-bar background/color props override inline. Not sticky: it scrolls
       away while .te-header stays pinned, which is the Shopify behaviour and
       stops a promo bar eating viewport on mobile. */
    .te-block-announcement {
      background: var(--theme-color-primary, var(--brand));
      color: #fff;
      font-size: 0.8125rem;
      line-height: 1.4;
    }
    .te-announcement__inner {
      max-width: 1280px;
      margin-inline: auto;
      padding: 0.5rem 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      flex-wrap: wrap;
      text-align: center;
    }
    .te-announcement__link {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
      font-weight: 600;
      white-space: nowrap;
    }
    @media (max-width: 768px) {
      .te-announcement__inner { padding: 0.5rem 1rem; }
    }

    .te-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--te-border-mid);
      box-shadow: var(--te-shadow-xs);
      transition: box-shadow var(--te-dur) var(--te-ease);
    }

    .te-header__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      /* min-height, not height: the logo height is owner-set up to 200px, so
         the bar must be able to grow rather than crop the logo. */
      min-height: 64px;
    }

    /* Store wordmark / logo */
    .te-header__brand {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      text-decoration: none;
      flex-shrink: 0;
    }

    .te-header__brand-mark {
      width: 32px;
      height: 32px;
      border-radius: var(--te-r-sm);
      background: var(--te-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .te-header__brand-mark svg {
      width: 18px;
      height: 18px;
      fill: #fff;
    }

    /* Uploaded header logo. Height is owner-set (20-200px) via theme
       settings; width follows the aspect ratio. The header uses min-height,
       so a logo taller than the 64px default grows the bar instead of
       being clipped by it. */
    .te-header__logo {
      height: var(--theme-logo-height-desktop, 60px);
      width: auto;
      max-width: 220px;
      object-fit: contain;
    }

    .te-header__store-name {
      font-family: var(--theme-font-heading, -apple-system, 'Segoe UI', sans-serif);
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--te-text-1);
      letter-spacing: -0.03em;
      white-space: nowrap;
    }

    /* Primary nav */
    .te-nav {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      list-style: none;
    }

    .te-nav__link {
      display: inline-flex;
      align-items: center;
      padding: 0.375rem 0.75rem;
      border-radius: var(--te-r-sm);
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--te-text-2);
      text-decoration: none;
      transition:
        background var(--te-dur) var(--te-ease),
        color var(--te-dur) var(--te-ease);
      white-space: nowrap;
    }

    .te-nav__link:hover {
      background: var(--te-surface-muted);
      color: var(--te-text-1);
    }

    /* Nested-menu dropdown — CSS-only hover/focus reveal. */
    .te-nav__item { position: relative; }
    .te-nav__item--has-children .te-nav__link::after {
      content: ' ▾';
      font-size: 0.65rem;
      margin-left: 0.25rem;
      opacity: 0.55;
    }
    .te-nav__dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 180px;
      background: var(--te-surface);
      border: 1px solid var(--te-border-mid);
      border-radius: var(--te-r-md);
      box-shadow: var(--te-shadow-md);
      padding: 0.4rem;
      list-style: none;
      display: none;
      z-index: 200;
    }
    .te-nav__item:hover .te-nav__dropdown,
    .te-nav__item:focus-within .te-nav__dropdown { display: block; }
    .te-nav__dropdown-link {
      display: block;
      padding: 0.45rem 0.7rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--te-text-2);
      border-radius: var(--te-r-sm);
      text-decoration: none;
      white-space: nowrap;
    }
    .te-nav__dropdown-link:hover { background: var(--te-surface-muted); color: var(--te-text-1); }

    /* Level 3 inside a plain dropdown: indented under its parent. */
    .te-nav__dropdown-sub { list-style: none; margin: 0 0 0.2rem; padding: 0 0 0 0.7rem; }
    .te-nav__dropdown-link--sub { font-weight: 500; font-size: 0.8rem; padding-block: 0.3rem; }

    /* Mega menu (Premium — Header → Menu style). A full-width panel hanging off
       the header's bottom edge: the item stays static so the panel measures
       against the (sticky, positioned) header, not the <li>. Opened by
       .is-open (hover intent script in _drawer_script) or keyboard focus. */
    .te-nav__item--mega { position: static; }
    .te-mega {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      z-index: 200;
      background: var(--te-surface, #fff);
      border-top: 1px solid var(--te-border-mid, #e5e5e5);
      border-bottom: 1px solid var(--te-border-mid, #e5e5e5);
      box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.22);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
      text-align: left;
    }
    .te-nav__item--mega.is-open > .te-mega,
    .te-nav__item--mega:focus-within > .te-mega,
    html:not(.te-js) .te-nav__item--mega:hover > .te-mega {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition-delay: 0s;
    }
    .te-mega__inner {
      max-width: var(--te-container, 1200px);
      margin: 0 auto;
      padding: 1.75rem 1.5rem 1.5rem;
      max-height: min(70vh, 640px);
      overflow-y: auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 240px;
      gap: 2.5rem;
      align-items: start;
    }
    .te-mega__inner > :only-child { grid-column: 1 / -1; }
    /* Right-hand card: the top-level item itself, so a short menu still fills the panel. */
    .te-mega__feature {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 0.35rem;
      min-height: 170px;
      padding: 1.25rem;
      border-radius: var(--te-r-md, 10px);
      background: var(--te-surface-muted, #f5f5f4);
      border: 1px solid var(--te-border-mid, #e5e5e5);
      text-decoration: none;
      transition: border-color .15s ease, transform .15s ease;
    }
    .te-mega__feature:hover { border-color: var(--te-text-3, #999); transform: translateY(-2px); }
    .te-mega__feature-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--te-text-3, #777); }
    .te-mega__feature-title { font-size: 1.35rem; font-weight: 700; line-height: 1.15; color: var(--te-text-1, #111); }
    .te-mega__cols {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 1.5rem 2rem;
    }
    .te-mega__col { min-width: 0; }
    .te-mega__head {
      display: block;
      padding-bottom: 0.55rem;
      margin-bottom: 0.55rem;
      border-bottom: 1px solid var(--te-border-mid, #e5e5e5);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--te-text-1, #111);
      text-decoration: none;
    }
    .te-mega__list, .te-mega__sub { list-style: none; margin: 0; padding: 0; }
    .te-mega__link, .te-mega__sublink {
      display: block;
      padding: 0.3rem 0;
      font-size: 0.88rem;
      color: var(--te-text-2, #444);
      text-decoration: none;
      transition: color .12s ease, transform .12s ease;
    }
    .te-mega__sub { margin: 0 0 0.35rem; padding-left: 0.8rem; border-left: 1px solid var(--te-border-mid, #e5e5e5); }
    .te-mega__sublink { font-size: 0.82rem; padding-block: 0.2rem; color: var(--te-text-3, #777); }
    .te-mega__head:hover, .te-mega__link:hover, .te-mega__sublink:hover { color: var(--te-accent, var(--te-text-1, #111)); }
    .te-mega__link:hover, .te-mega__sublink:hover { transform: translateX(2px); }
    .te-mega__all {
      display: inline-flex;
      align-self: flex-start;
      gap: 0.4rem;
      margin-top: 0.5rem;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--te-text-1, #111);
      text-decoration: none;
      border-bottom: 1px solid currentColor;
      padding-bottom: 1px;
    }
    .te-mega__feature:hover .te-mega__all span { transform: translateX(3px); }
    @media (max-width: 900px) { .te-mega__inner { grid-template-columns: 1fr; } .te-mega__feature { min-height: 0; } }
    .te-mega__all span { transition: transform .15s ease; }
    @media (prefers-reduced-motion: reduce) {
      .te-mega, .te-mega__link, .te-mega__sublink { transition: none; }
    }

    /* Cart icon button in header */
    .te-header__cart {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.5rem 1rem;
      border-radius: var(--te-r-sm);
      background: var(--te-accent);
      color: #fff;
      font-size: 0.83rem;
      font-weight: 700;
      text-decoration: none;
      /* Glow tracks the accent — a literal orange rgba() here tinted every
         store's cart button orange no matter its brand colour. */
      box-shadow: 0 2px 8px color-mix(in srgb, var(--te-accent) 28%, transparent);
      transition:
        background var(--te-dur) var(--te-ease),
        box-shadow var(--te-dur) var(--te-ease),
        transform var(--te-dur) var(--te-ease);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .te-header__cart:hover {
      background: var(--te-accent-mid);
      box-shadow: 0 4px 14px color-mix(in srgb, var(--te-accent) 38%, transparent);
      transform: translateY(-1px);
    }

    .te-header__cart:active { transform: translateY(0); }

    /* Header call-to-action, e.g. "Get a quote". Three styles so it can sit
       beside the cart button without both shouting. */
    .te-header__cta {
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1.1rem;
      border-radius: var(--te-r-sm);
      font-size: 0.83rem;
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
      flex-shrink: 0;
      border: 1px solid transparent;
      transition:
        background var(--te-dur) var(--te-ease),
        color var(--te-dur) var(--te-ease),
        border-color var(--te-dur) var(--te-ease),
        transform var(--te-dur) var(--te-ease);
    }

    .te-header__cta:hover { transform: translateY(-1px); }
    .te-header__cta:active { transform: translateY(0); }

    .te-header__cta--solid {
      background: var(--te-text-1, #111110);
      color: #fff;
    }

    .te-header__cta--solid:hover {
      background: var(--te-accent);
    }

    .te-header__cta--outline {
      border-color: var(--te-border, rgba(0,0,0,.18));
      color: var(--te-text-1, #111110);
    }

    .te-header__cta--outline:hover {
      border-color: var(--te-accent);
      color: var(--te-accent);
    }

    .te-header__cta--link {
      padding-inline: 0.25rem;
      color: var(--te-text-1, #111110);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .te-header__cta--link:hover { color: var(--te-accent); }

    /* The two ways to ask, side by side. With only the button it keeps the
       full width, so a normal shop's Add to cart is unchanged. */
    .te-pd__cta-row { display: grid; gap: 0.75rem; }
    .te-pd__cta-row--split { grid-template-columns: 1fr 1fr; align-items: stretch; }
    .te-pd__cta-row--split .te-pd__cta,
    .te-pd__cta-row--split .te-pd__whatsapp { margin: 0; width: 100%; }

    @media (max-width: 480px) {
      /* Two uppercase labels side by side stop fitting; stack them. */
      .te-pd__cta-row--split { grid-template-columns: 1fr; }
    }

    /* "Chat on WhatsApp" beside the buy box in enquiry mode. */
    .te-pd__whatsapp {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      padding: 0.7rem 1.25rem;
      border-radius: var(--te-r-sm);
      border: 1px solid #25d366;
      color: #128c4a;
      font-size: 0.9rem;
      font-weight: 700;
      text-decoration: none;
      transition:
        background var(--te-dur) var(--te-ease),
        color var(--te-dur) var(--te-ease);
    }

    .te-pd__whatsapp:hover { background: #25d366; color: #fff; }

    /* Header search */
    .te-header__search {
      display: inline-flex;
      align-items: center;
      background: var(--te-surface-muted, #f4f4f5);
      border: 1px solid var(--te-border, rgba(0,0,0,0.1));
      border-radius: var(--te-r-sm);
      overflow: hidden;
      flex-shrink: 1;
      min-width: 0;
    }
    .te-header__search input {
      border: 0;
      background: transparent;
      outline: none;
      padding: 0.5rem 0.75rem;
      font-size: 0.83rem;
      width: 11rem;
      max-width: 36vw;
      color: var(--te-text-1, #18181b);
    }
    .te-header__search button {
      border: 0;
      background: transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 0.7rem;
      color: var(--te-text-2, #52525b);
      transition: color var(--te-dur) var(--te-ease);
    }
    .te-header__search button:hover { color: var(--te-accent); }
    @media (max-width: 640px) {
      /* Separate mobile logo height — the second slider in theme settings. */
      .te-header__logo { height: var(--theme-logo-height-mobile, 60px); }

      /* Search moves into the nav drawer on mobile. Kept in the header at
         640px it can only fit by shrinking until it truncates its own
         placeholder ("Search prod…"), which is what it used to do. */
      .te-js .te-header__search { display: none; }
    }

    /* The drawer is mobile-only. Belt and braces: the toggle is already
       display:none on desktop so it can never open, but a stray `is-open`
       must not be able to cover a desktop page. */
    @media (min-width: 641px) {
      .te-mobile-nav { display: none !important; }
    }

    /* Mobile nav toggle */
    .te-nav-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: var(--te-r-sm);
      background: var(--te-surface-muted);
      border: 1px solid var(--te-border-mid);
      cursor: pointer;
      flex-shrink: 0;
    }

    .te-nav-toggle span {
      display: block;
      width: 20px;
      height: 2px;
      background: var(--te-text-2);
      border-radius: 2px;
      position: relative;
      transition: background var(--te-dur);
    }

    .te-nav-toggle span::before,
    .te-nav-toggle span::after {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--te-text-2);
      border-radius: 2px;
    }

    .te-nav-toggle span::before { top: -6px; }
    .te-nav-toggle span::after  { top: 6px; }

    /* Header actions cluster (search + cart + toggle) */
    .te-header__actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    /* ══════════════════════════════════════════════
       MOBILE NAV DRAWER
       Off-canvas panel driven by .te-nav-toggle. Desktop never shows it
       (the toggle is display:none above 640px), so all of this is inert
       on desktop regardless of the `hidden` attribute.
    ══════════════════════════════════════════════ */
    .te-mobile-nav {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: block;
    }
    .te-mobile-nav[hidden] { display: none; }

    .te-mobile-nav__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.44);
      opacity: 0;
      transition: opacity var(--te-dur) var(--te-ease);
    }
    .te-mobile-nav.is-open .te-mobile-nav__backdrop { opacity: 1; }

    .te-mobile-nav__panel {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(20rem, 86vw);
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      padding: 0.75rem;
      background: var(--te-surface, #fff);
      border-left: 1px solid var(--te-border-mid);
      box-shadow: -8px 0 28px rgba(0, 0, 0, 0.12);
      transform: translateX(100%);
      transition: transform var(--te-dur) var(--te-ease);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .te-mobile-nav.is-open .te-mobile-nav__panel { transform: translateX(0); }

    .te-mobile-nav__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.25rem 0.25rem 0.5rem;
    }
    .te-mobile-nav__title {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--te-text-2);
    }
    .te-mobile-nav__close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-right: -0.35rem;
      border: 0;
      border-radius: var(--te-r-sm);
      background: transparent;
      color: var(--te-text-2);
      cursor: pointer;
    }
    .te-mobile-nav__close:hover { background: var(--te-surface-muted); }

    /* Search lives in the drawer on mobile — there is no room for it in the
       header at 320px without truncating its own placeholder. */
    .te-mobile-nav__search {
      display: flex;
      align-items: center;
      margin: 0 0 0.5rem;
      border: 1px solid var(--te-border-mid);
      border-radius: var(--te-r-sm);
      background: var(--te-surface-muted);
      overflow: hidden;
    }
    .te-mobile-nav__search input {
      flex: 1 1 auto;
      min-width: 0;
      border: 0;
      outline: none;
      background: transparent;
      padding: 0.7rem 0.75rem;
      font-size: 0.9rem;
      color: var(--te-text-1, #18181b);
    }
    .te-mobile-nav__search button {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border: 0;
      background: transparent;
      color: var(--te-text-2);
      cursor: pointer;
    }

    .te-mobile-nav__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .te-mobile-nav__link,
    .te-mobile-nav__sublink {
      display: flex;
      align-items: center;
      min-height: 44px;
      padding: 0.5rem 0.6rem;
      border-radius: var(--te-r-sm);
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--te-text-1);
      text-decoration: none;
    }
    .te-mobile-nav__link:hover,
    .te-mobile-nav__sublink:hover { background: var(--te-surface-muted); }

    .te-mobile-nav__sublist {
      list-style: none;
      margin: 0 0 0.25rem;
      padding: 0 0 0 0.6rem;
      border-left: 2px solid var(--te-border);
    }
    .te-mobile-nav__sublink {
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--te-text-2);
    }
    /* A drawer row: the link, and — for parents — the fold chevron. */
    .te-mobile-nav__row { display: flex; align-items: center; gap: 2px; }
    .te-mobile-nav__row > a { flex: 1; min-width: 0; }
    .te-mobile-nav__fold {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      border-radius: var(--te-r-sm);
      background: transparent;
      color: var(--te-text-2);
      cursor: pointer;
    }
    .te-mobile-nav__fold[hidden] { display: none; }
    .te-mobile-nav__fold:hover { background: var(--te-surface-muted); color: var(--te-text-1); }
    .te-mobile-nav__fold:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
    .te-mobile-nav__fold svg { transition: transform .2s ease; }
    .te-mobile-nav__fold[aria-expanded="true"] svg { transform: rotate(180deg); }
    .te-mobile-nav__sublist[hidden] { display: none; }
    .te-mobile-nav__sublist:not([hidden]) { animation: te-fold-in .18s ease; }
    @keyframes te-fold-in { from { opacity: 0; transform: translateY(-4px); } }
    @media (prefers-reduced-motion: reduce) {
      .te-mobile-nav__fold svg, .te-mobile-nav__sublist:not([hidden]) { transition: none; animation: none; }
    }

    /* Third menu level, indented under its level-2 parent. */
    .te-mobile-nav__sublist--deep { margin: 0 0 0.35rem 0.6rem; }
    .te-mobile-nav__sublink--deep { min-height: 38px; font-size: 0.82rem; color: var(--te-text-3, var(--te-text-2)); }

    /* Body scroll lock while the drawer is open. position:fixed (not just
       overflow:hidden, which iOS Safari ignores) — the JS pins `top` to the
       current offset and restores it on close so the page doesn't jump. */
    body.te-nav-open {
      position: fixed;
      width: 100%;
      overflow: hidden;
    }

    /* ══════════════════════════════════════════════
       MAIN CONTENT
    ══════════════════════════════════════════════ */
    .te-page__main {
      flex: 1;
    }

    /* Blocks share a vertical rhythm — no margin on first/last */
    .te-block + .te-block {
      margin-top: 0;
    }

    /* ══════════════════════════════════════════════
       HERO BLOCK
    ══════════════════════════════════════════════ */
    .te-block-hero {
      position: relative;
      overflow: hidden;
      min-height: 520px;
      display: flex;
      align-items: center;
      background: linear-gradient(135deg,
        color-mix(in srgb, var(--te-accent) 90%, #000) 0%,
        var(--te-accent-mid) 60%,
        var(--theme-color-secondary, #1d26a2) 100%);
      color: #fff;
    }

    /* ── Shared block height presets ──────────────────────────────────────
       SINGLE SOURCE OF TRUTH for the Small / Medium / Large / Full options
       exposed by the builder's height control (height_preset prop). Any block
       that adds a `te-h-*` class gets these exact heights, so the presets stay
       identical across block types. The `.te-block` compound keeps specificity
       above per-block base heights (e.g. .te-block-hero's 520px). 'custom'
       heights are applied inline via style="min-height:Npx". md == 520px so it
       matches the historical hero default. */
    .te-block.te-h-sm   { min-height: 360px; }
    .te-block.te-h-md   { min-height: 520px; }
    .te-block.te-h-lg   { min-height: 720px; }
    .te-block.te-h-full { min-height: 100vh; }

    /* Background image layer */
    .te-hero__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .te-hero__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    /* Dark overlay on top of BG image */
    .te-hero__overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        105deg,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.38) 55%,
        rgba(0, 0, 0, 0.18) 100%
      );
    }

    /* Gradient overlay (no image) — every stop derives from the tenant's
       palette. It used to read primary -> #c95d1f -> #1d26a2, which was the
       DEFAULT palette written out literally (a darkened default orange, and
       the default secondary). Only the first stop followed the theme, so a
       store with a purple primary still rendered an orange middle band.
       Two-stop primary -> secondary is the floor; the darkened-primary middle
       needs color-mix, so it upgrades in via @supports rather than dropping
       the whole declaration on a browser that lacks it. */
    .te-block-hero:not(:has(.te-hero__bg)) {
      background: linear-gradient(135deg,
        var(--theme-color-primary, var(--brand, #e67e22)) 0%,
        var(--theme-color-secondary, #1d26a2) 100%);
    }
    @supports (background: linear-gradient(color-mix(in srgb, red 50%, #000), blue)) {
      .te-block-hero:not(:has(.te-hero__bg)) {
        background: linear-gradient(135deg,
          var(--theme-color-primary, var(--brand, #e67e22)) 0%,
          color-mix(in srgb, var(--theme-color-primary, var(--brand, #e67e22)) 80%, #000) 50%,
          var(--theme-color-secondary, #1d26a2) 100%);
      }
    }

    /* Subtle noise grain texture on hero */
    .te-block-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: 0.04;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      pointer-events: none;
    }

    .te-hero__body {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1280px;
      margin-inline: auto;
      padding: 5rem 2rem;
    }

    /* Alignment variants */
    .te-align-center .te-hero__body {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .te-align-right .te-hero__body {
      text-align: right;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .te-align-left .te-hero__body {
      text-align: left;
    }

    .te-hero__eyebrow {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.72);
      margin-bottom: 1rem;
    }

    .te-hero__headline {
      font-family: var(--theme-font-heading, -apple-system, 'Segoe UI', sans-serif);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: -0.04em;
      color: #fff;
      margin-bottom: 1.25rem;
      max-width: 18ch;
      text-shadow: 0 2px 20px rgba(0,0,0,0.25);
    }

    .te-align-center .te-hero__headline,
    .te-align-right .te-hero__headline {
      max-width: 100%;
    }

    .te-hero__subheadline {
      font-size: clamp(1rem, 2vw, 1.25rem);
      font-weight: 500;
      color: rgba(255, 255, 255, 0.82);
      line-height: 1.6;
      margin-bottom: 2.5rem;
      max-width: 52ch;
    }

    .te-align-center .te-hero__subheadline { max-width: 100%; }

    .te-hero__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.875rem 2rem;
      background: #fff;
      color: var(--te-accent);
      border-radius: var(--te-r-md);
      font-weight: 800;
      font-size: 0.95rem;
      text-decoration: none;
      letter-spacing: -0.01em;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.15);
      transition:
        transform var(--te-dur) var(--te-ease),
        box-shadow var(--te-dur) var(--te-ease),
        background var(--te-dur) var(--te-ease);
    }

    .te-hero__cta::after {
      content: '→';
      display: inline-block;
      transition: transform var(--te-dur) var(--te-ease);
    }

    .te-hero__cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.15);
      background: #f9f9f9;
    }

    .te-hero__cta:hover::after { transform: translateX(4px); }

    .te-hero__cta:active { transform: translateY(0); }

    /* ── Hero, gallery style (props.style = "gallery") ──────────────────────
       A light section: eyebrow, big headline, text, a row of rounded photo
       cards, a tagline and a link. Its own classes (te-hg__*) on purpose:
       every theme restyles .te-block-hero for the dark banner, and none of
       that (white text, gradient, min-height) belongs here. Colours and
       fonts still come from the theme tokens. */
    .te-block-hero-gallery {
      background: var(--theme-color-bg, #f5f4f2);
      color: var(--theme-color-text, #111110);
      padding: clamp(2.75rem, 6vw, 5rem) 0;
    }
    .te-hg__inner { max-width: 1280px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
    .te-hg__head { display: flex; flex-direction: column; gap: .9rem; max-width: 1040px; }
    .te-align-center .te-hg__head { margin-inline: auto; align-items: center; text-align: center; }
    .te-align-right .te-hg__head { margin-left: auto; align-items: flex-end; text-align: right; }
    .te-hg__eyebrow {
      margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
      color: color-mix(in srgb, var(--theme-color-text, #111110) 62%, transparent);
    }
    .te-hg__headline {
      margin: 0; font-family: var(--theme-font-heading, -apple-system, 'Segoe UI', sans-serif);
      font-size: clamp(1.85rem, 4.2vw, 3.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
      color: var(--theme-color-text, #111110); text-wrap: balance;
    }
    .te-hg__text {
      margin: 0; max-width: 60ch; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.6;
      color: color-mix(in srgb, var(--theme-color-text, #111110) 78%, transparent); text-wrap: pretty;
    }
    /* The photos are the focus: nearly full width (a thin side margin), small
       gaps, tall cards — but never taller than the screen. */
    .te-hg__photos {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, .9vw, .85rem);
      margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-inline: clamp(.5rem, 1.1vw, 1rem);
    }
    .te-hg__photos--1 { grid-template-columns: minmax(0, 1fr); }
    .te-hg__photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .te-hg__card {
      position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; max-height: 86vh; width: 100%;
      border-radius: var(--te-r-lg, 18px); background: var(--te-surface-muted, #f2f1ef);
      color: #fff; text-decoration: none; isolation: isolate;
    }
    .te-hg__photos--1 .te-hg__card { aspect-ratio: 16 / 9; }
    .te-hg__photos--2 .te-hg__card { aspect-ratio: 5 / 4; }
    /* Photo size (props.photo_size): the side space and the height move
       together, so a smaller size is narrower AND shorter, never a squashed
       strip. Large is the default above (nearly edge to edge, 4:5). */
    .te-hg__photos--medium {
      max-width: 1600px; margin-inline: auto; padding-inline: clamp(1rem, 2.5vw, 2rem);
      gap: clamp(.6rem, 1vw, 1rem);
    }
    .te-hg__photos--medium.te-hg__photos--3 .te-hg__card { aspect-ratio: 1 / 1; max-height: 72vh; }
    .te-hg__photos--small {
      max-width: 1280px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem);
      gap: clamp(.75rem, 1.4vw, 1.25rem);
    }
    .te-hg__photos--small.te-hg__photos--3 .te-hg__card { aspect-ratio: 5 / 4; max-height: 58vh; }
    .te-hg__photos--small.te-hg__photos--2 .te-hg__card { aspect-ratio: 16 / 10; }
    .te-hg__photos--small.te-hg__photos--1 .te-hg__card { aspect-ratio: 21 / 9; }
    .te-hg__card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--te-ease, ease); }
    a.te-hg__card:hover img { transform: scale(1.04); }
    a.te-hg__card:focus-visible { outline: 3px solid var(--te-accent, #e67e22); outline-offset: 3px; }
    .te-hg__empty { position: absolute; inset: 0; background: linear-gradient(135deg, var(--te-surface-muted, #f2f1ef), var(--te-border, #e6e3de)); }
    .te-hg__label {
      position: absolute; left: .75rem; bottom: .75rem; padding: .35rem .7rem; border-radius: 999px;
      background: rgba(17, 17, 16, .6); backdrop-filter: blur(6px); font-size: .82rem; font-weight: 600;
    }
    .te-hg__more {
      position: absolute; right: .75rem; bottom: .75rem; padding: .35rem .7rem; border-radius: 999px;
      background: rgba(17, 17, 16, .72); font-size: .9rem; font-weight: 700;
    }
    .te-hg__foot {
      display: flex; flex-direction: column; gap: 1rem; margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
    }
    .te-align-center .te-hg__foot { align-items: center; text-align: center; }
    .te-align-right .te-hg__foot { align-items: flex-end; text-align: right; }
    .te-hg__tagline { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 600; color: var(--theme-color-text, #111110); }
    .te-hg__cta { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; text-decoration: none; }
    .te-hg__cta--link {
      font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--theme-color-primary, var(--te-accent, #e67e22));
    }
    .te-hg__cta--link span:last-child { transition: transform .2s var(--te-ease, ease); }
    .te-hg__cta--link:hover span:last-child { transform: translateX(4px); }
    .te-hg__cta--link:hover { text-decoration: underline; text-underline-offset: 4px; }
    .te-hg__cta--solid, .te-hg__cta--outline {
      padding: .8rem 1.4rem; border-radius: var(--theme-btn-radius, 8px); font-size: .95rem;
    }
    .te-hg__cta--solid { background: var(--theme-btn-bg, var(--te-accent, #e67e22)); color: var(--theme-btn-text, #fff); }
    .te-hg__cta--solid:hover { filter: brightness(1.06); }
    .te-hg__cta--outline { border: 1.5px solid currentColor; color: var(--theme-color-text, #111110); }
    /* Phones: the cards become a swipeable row, the next one peeking in. */
    @media (max-width: 640px) {
      .te-hg__photos, .te-hg__photos--2 {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem;
        padding-inline: .75rem; scroll-padding-inline: .75rem; scrollbar-width: none;
      }
      .te-hg__photos::-webkit-scrollbar { display: none; }
      .te-hg__photos .te-hg__card { flex: 0 0 86%; scroll-snap-align: start; aspect-ratio: 4 / 5; }
      .te-hg__photos--1 { display: grid; }
      .te-hg__photos--1 .te-hg__card { flex: none; aspect-ratio: 4 / 3; }
    }

    /* ══════════════════════════════════════════════
       PRODUCT GRID BLOCK
    ══════════════════════════════════════════════ */
    .te-block-product-grid,
    .te-block-collection-grid {
      padding: 5rem 0;
      background: var(--theme-color-bg, #f5f4f2);
    }

    .te-block-product-grid > .te-container {
      /* section wrapper uses te-container class applied via template tag logic;
         since blocks don't have direct container wrappers, we set max-width on the section itself */
    }

    /* Inner container for product grid content */
    .te-product-grid__inner {
      width: 100%;
      max-width: 1280px;
      margin-inline: auto;
      padding-inline: 2rem;
    }

    .te-product-grid__header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 2.5rem;
      gap: 1rem;
    }

    .te-product-grid__title {
      font-family: var(--theme-font-heading, -apple-system, 'Segoe UI', sans-serif);
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      font-weight: 800;
      color: var(--te-text-1);
      letter-spacing: -0.04em;
      line-height: 1.1;
    }

    /* Grid — column count set via CSS custom property from block.props.columns */
    .te-product-grid__items {
      display: grid;
      gap: var(--te-grid-gap, 1.5rem);
    }

    .te-cols-1 { grid-template-columns: 1fr; }
    .te-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .te-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .te-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .te-cols-5 { grid-template-columns: repeat(5, 1fr); }

    /* Product card */
    .te-product-card {
      display: block;
      text-decoration: none;
      background: var(--te-surface);
      border: 1px solid var(--te-border-mid);
      border-radius: var(--te-r-lg);
      overflow: hidden;
      box-shadow: var(--te-shadow-xs);
      transition:
        transform var(--te-dur) var(--te-ease),
        box-shadow var(--te-dur) var(--te-ease),
        border-color var(--te-dur) var(--te-ease);
      position: relative;
    }

    .te-product-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--te-shadow-md);
      border-color: var(--te-border-strong);
    }

    /* Image wrapper — enforces 4:3 aspect ratio */
    .te-product-card__img-wrap {
      position: relative;
      width: 100%;
      padding-top: 75%; /* 4:3 */
      background: var(--te-surface-muted);
      overflow: hidden;
    }

    .te-product-card__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 400ms var(--te-ease);
    }

    .te-product-card:hover .te-product-card__img {
      transform: scale(1.05);
    }

    /* Placeholder when no image */
    .te-product-card__img-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--te-text-4);
    }

    .te-product-card__img-placeholder svg {
      width: 40px;
      height: 40px;
      opacity: 0.5;
    }

    /* Badge (Sale / New) */
    .te-product-card__badge {
      position: absolute;
      top: 0.75rem;
      left: 0.75rem;
      z-index: 2;
      padding: 0.2rem 0.6rem;
      border-radius: 100px;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .te-badge--sale {
      background: #dc2626;
      color: #fff;
    }

    .te-badge--new {
      background: var(--te-accent);
      color: #fff;
    }

    /* Card body */
    .te-product-card__body {
      padding: 1rem 1.125rem 1.25rem;
    }

    .te-product-card__name {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--te-text-1);
      letter-spacing: -0.01em;
      line-height: 1.35;
      margin-bottom: 0.375rem;
      /* clamp to 2 lines */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .te-product-card__price {
      font-size: 1rem;
      font-weight: 800;
      color: var(--te-accent);
      letter-spacing: -0.03em;
    }

    /* Empty state */
    .te-product-grid__empty {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.25rem;
      padding: 4rem 2rem;
      background: var(--te-surface);
      border: 2px dashed var(--te-border-strong);
      border-radius: var(--te-r-xl);
      text-align: center;
    }

    .te-product-grid__empty-icon {
      width: 64px;
      height: 64px;
      border-radius: var(--te-r-lg);
      background: var(--te-accent-light);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .te-product-grid__empty-icon svg {
      width: 32px;
      height: 32px;
      color: var(--te-accent);
    }

    .te-product-grid__empty-title {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--te-text-1);
      letter-spacing: -0.03em;
    }

    .te-product-grid__empty-desc {
      font-size: 0.875rem;
      color: var(--te-text-3);
      font-weight: 500;
      max-width: 36ch;
      line-height: 1.6;
    }

    /* ══════════════════════════════════════════════
       TEXT BLOCK (prose)
    ══════════════════════════════════════════════ */
    .te-block-text {
      padding: 4rem 0;
    }

    .te-text__inner {
      width: 100%;
      max-width: 1280px;
      margin-inline: auto;
      padding-inline: 2rem;
    }

    .te-text__body {
      max-width: 720px;
      font-size: 1.0625rem;
      line-height: 1.75;
      color: var(--te-text-2);
    }

    .te-align-center .te-text__body {
      margin-inline: auto;
      text-align: center;
    }

    .te-align-right .te-text__body {
      margin-left: auto;
      text-align: right;
    }

    /* Prose typography inside text blocks */
    .te-text__body h1,
    .te-text__body h2,
    .te-text__body h3 {
      font-family: var(--theme-font-heading, -apple-system, 'Segoe UI', sans-serif);
      font-weight: 800;
      color: var(--te-text-1);
      letter-spacing: -0.03em;
      line-height: 1.2;
      margin-top: 2em;
      margin-bottom: 0.75em;
    }

    .te-text__body h1 { font-size: 2rem; }
    .te-text__body h2 { font-size: 1.5rem; }
    .te-text__body h3 { font-size: 1.2rem; }

    .te-text__body p {
      margin-bottom: 1.25em;
    }

    .te-text__body a {
      color: var(--te-accent);
      text-decoration: underline;
      text-underline-offset: 3px;
      font-weight: 600;
      transition: color var(--te-dur) var(--te-ease);
    }

    .te-text__body a:hover { color: var(--te-accent-mid); }

    .te-text__body ul,
    .te-text__body ol {
      padding-left: 1.5em;
      margin-bottom: 1.25em;
    }

    .te-text__body li {
      margin-bottom: 0.375em;
    }

    .te-text__body blockquote {
      border-left: 3px solid var(--te-accent);
      padding-left: 1.25rem;
      margin: 1.5em 0;
      color: var(--te-text-3);
      font-style: italic;
    }

    .te-text__body code {
      font-family: 'Menlo', 'Consolas', monospace;
      font-size: 0.875em;
      background: var(--te-surface-muted);
      border-radius: 4px;
      padding: 0.15em 0.4em;
    }

    /* ══════════════════════════════════════════════
       IMAGE GRID BLOCK
    ══════════════════════════════════════════════ */
    .te-block-image-grid {
      padding: 4rem 0;
      background: var(--te-surface);
    }

    .te-image-grid__inner {
      width: 100%;
      max-width: 1280px;
      margin-inline: auto;
      padding-inline: 2rem;
    }

    .te-image-grid__header {
      margin-bottom: 2.5rem;
    }

    .te-image-grid__title {
      font-family: var(--theme-font-heading, -apple-system, 'Segoe UI', sans-serif);
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      font-weight: 800;
      color: var(--te-text-1);
      letter-spacing: -0.04em;
      line-height: 1.1;
    }

    .te-image-grid__items {
      display: grid;
      gap: 1rem;
    }

    .te-image-grid__cell {
      display: block;
      overflow: hidden;
      border-radius: var(--te-r-lg);
      background: var(--te-surface-muted);
      box-shadow: var(--te-shadow-xs);
      transition:
        transform var(--te-dur) var(--te-ease),
        box-shadow var(--te-dur) var(--te-ease);
    }

    a.te-image-grid__cell {
      text-decoration: none;
      cursor: pointer;
    }

    a.te-image-grid__cell:hover {
      transform: translateY(-3px);
      box-shadow: var(--te-shadow-md);
    }

    .te-image-grid__cell img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      display: block;
      transition: transform 400ms var(--te-ease);
    }

    a.te-image-grid__cell:hover img {
      transform: scale(1.04);
    }

    /* Category header alignment (category_header align). The section carries
       te-align-*, which the hero already uses, so a design restyling either
       gets both. */
    .te-block-category-header.te-align-center .te-cat-header__inner { text-align: center; }
    .te-block-category-header.te-align-center .te-cat-header__sub { margin-inline: auto; }
    .te-block-category-header.te-align-right .te-cat-header__inner { text-align: right; }
    .te-block-category-header.te-align-right .te-cat-header__sub { margin-left: auto; margin-right: 0; }

    /* Where a card's name and price sit (category_products card_align). Set on
       the section so it reaches the product cards and the sub-category cards
       alike — they are the same card. */
    .te-cards-center .te-product-card__body { text-align: center; }
    .te-cards-center .te-product-card__price,
    .te-cards-center .te-collection-card__count { justify-content: center; }

    /* Sub-categories of the category being viewed, above its own products.
       Uses the same card as the Category grid, so it inherits every design's
       restyling of it without each design having to know about this strip. */
    .te-subcats { margin-bottom: 2.5rem; }

    .te-subcats__title {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--te-text-3, #8a8784);
      margin-bottom: 1rem;
    }

    /* ══════════════════════════════════════════════
       SHOWCASE — portfolio photos, grouped and filterable
    ══════════════════════════════════════════════ */
    .te-block-showcase {
      padding: 4rem 0;
      background: var(--te-surface);
    }

    .te-showcase__inner {
      width: 100%;
      max-width: 1280px;
      margin-inline: auto;
      padding-inline: 2rem;
    }

    .te-showcase__filters {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 2rem;
    }

    .te-showcase__filter {
      padding: 0.5rem 1.1rem;
      border-radius: 999px;
      border: 1px solid var(--te-border, rgba(0,0,0,.12));
      background: transparent;
      color: var(--te-text-2, #555);
      font-size: 0.875rem;
      font-weight: 600;
      line-height: 1.2;
      white-space: nowrap;
      transition:
        background var(--te-dur) var(--te-ease),
        color var(--te-dur) var(--te-ease),
        border-color var(--te-dur) var(--te-ease);
    }

    .te-showcase__filter:hover {
      border-color: var(--te-text-1);
      color: var(--te-text-1);
    }

    .te-showcase__filter[aria-selected="true"] {
      background: var(--te-text-1, #111110);
      border-color: var(--te-text-1, #111110);
      color: #fff;
    }

    .te-showcase__group {
      font-family: var(--theme-font-heading, -apple-system, 'Segoe UI', sans-serif);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--te-text-1);
      letter-spacing: -0.02em;
      margin: 2.5rem 0 1.25rem;
    }

    .te-showcase__group:first-of-type { margin-top: 0; }

    .te-showcase__group small {
      font-weight: 500;
      font-size: 0.875rem;
      color: var(--te-text-2, #666);
      margin-left: 0.5rem;
    }

    .te-showcase__items {
      display: grid;
      gap: 1rem;
    }

    .te-showcase__items + .te-showcase__group { margin-top: 3rem; }

    .te-showcase__cell {
      position: relative;
      overflow: hidden;
      border-radius: var(--te-r-lg);
      background: var(--te-surface-muted);
      box-shadow: var(--te-shadow-xs);
      transition:
        transform var(--te-dur) var(--te-ease),
        box-shadow var(--te-dur) var(--te-ease);
    }

    .te-showcase__cell:hover {
      transform: translateY(-3px);
      box-shadow: var(--te-shadow-md);
    }

    /* The whole cell is the click target in lightbox mode; reset the button. */
    .te-showcase__link {
      display: block;
      width: 100%;
      padding: 0;
      border: none;
      background: none;
      text-decoration: none;
      cursor: pointer;
    }

    .te-showcase__cell img {
      width: 100%;
      height: 280px;
      object-fit: cover;
      display: block;
      transition: transform 400ms var(--te-ease);
    }

    .te-showcase__cell:hover img { transform: scale(1.04); }

    .te-showcase__caption {
      padding: 0.75rem 0.9rem;
      font-size: 0.8125rem;
      color: var(--te-text-2, #666);
      background: var(--te-surface);
    }

    /* Hidden by the category filter. */
    .te-showcase__cell[hidden] { display: none !important; }

    /* Nothing uploaded yet — a theme's shipped default, or a half-filled
       section. Says what is missing instead of drawing an empty grid. */
    .te-showcase__empty {
      padding: 2.5rem;
      text-align: center;
      color: var(--te-text-3, #8a8784);
      font-size: 0.9rem;
      border: 1px dashed var(--te-border, rgba(0,0,0,0.14));
      border-radius: var(--te-r-md, 6px);
    }

    /* ── Masonry: CSS columns, so photos keep their own proportions ── */
    .te-showcase--masonry .te-showcase__items {
      display: block;
      column-count: var(--te-showcase-cols, 3);
      column-gap: 1rem;
    }

    .te-showcase--masonry .te-showcase__cell {
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      margin-bottom: 1rem;
      display: block;
    }

    .te-showcase--masonry .te-showcase__cell img {
      height: auto;
    }

    /* ── Lightbox (built by the showcase script) ── */
    /* display:flex would beat the UA's [hidden]{display:none}, so the closed
       state has to be stated here or Escape leaves the overlay on screen. */
    .te-lightbox[hidden] { display: none; }

    .te-lightbox {
      position: fixed;
      inset: 0;
      z-index: 9998;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      background: rgba(10, 10, 10, 0.92);
      border: none;
    }

    .te-lightbox img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      border-radius: var(--te-r-md, 8px);
      object-fit: contain;
    }

    .te-lightbox__close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      color: #fff;
      font-size: 1.25rem;
      line-height: 1;
    }

    .te-lightbox__close:hover { background: rgba(255, 255, 255, 0.26); }

    /* ══════════════════════════════════════════════
       BEFORE & AFTER — wipe between two photos
    ══════════════════════════════════════════════ */
    .te-block-before-after {
      padding: 4rem 0;
      background: var(--te-surface);
    }

    .te-ba__inner {
      width: 100%;
      max-width: 1280px;
      margin-inline: auto;
      padding-inline: 2rem;
    }

    .te-ba__items {
      display: grid;
      gap: 2rem;
    }

    .te-ba__item { min-width: 0; }

    .te-ba__wipe {
      position: relative;
      overflow: hidden;
      border-radius: var(--te-r-lg);
      background: var(--te-surface-muted);
      box-shadow: var(--te-shadow-xs);
      aspect-ratio: 4 / 3;
      touch-action: pan-y;
    }

    .te-ba__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* The before photo is clipped to the handle position. clip-path (not a
       width) keeps the photo at full size underneath, so it reveals rather
       than squashing — and needs no JS to sync pixel widths. */
    .te-ba__clip {
      position: absolute;
      inset: 0;
      clip-path: inset(0 calc(100% - var(--te-ba-pos, 50%)) 0 0);
      will-change: clip-path;
    }

    .te-ba__handle {
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--te-ba-pos, 50%);
      width: 2px;
      margin-left: -1px;
      background: #fff;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
      pointer-events: none;
    }

    .te-ba__handle::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2.5rem;
      height: 2.5rem;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    }

    /* The range input is the real control: full-bleed and invisible, so a
       drag anywhere on the photo moves the wipe and keyboards still work. */
    .te-ba__range {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: ew-resize;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
    }

    .te-ba__range:focus-visible { outline: 2px solid var(--te-accent, #1f6feb); outline-offset: 3px; }
    .te-ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 3rem; height: 100%; }
    .te-ba__range::-moz-range-thumb { width: 3rem; height: 100%; border: none; opacity: 0; }

    .te-ba__tag {
      position: absolute;
      bottom: 0.75rem;
      padding: 0.3rem 0.7rem;
      border-radius: 999px;
      background: rgba(10, 10, 10, 0.62);
      color: #fff;
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      pointer-events: none;
    }

    .te-ba__tag--before { left: 0.75rem; }
    .te-ba__tag--after { right: 0.75rem; }

    .te-ba__side {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
    }

    .te-ba__half {
      position: relative;
      overflow: hidden;
      border-radius: var(--te-r-lg);
      background: var(--te-surface-muted);
      aspect-ratio: 4 / 3;
    }

    .te-ba__half img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .te-ba__half .te-ba__tag--after { right: auto; left: 0.75rem; }

    .te-ba__meta {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      margin-top: 0.9rem;
    }

    .te-ba__label {
      font-family: var(--theme-font-heading, -apple-system, 'Segoe UI', sans-serif);
      font-size: 1rem;
      font-weight: 700;
      color: var(--te-text-1);
      letter-spacing: -0.01em;
    }

    .te-ba__caption {
      font-size: 0.875rem;
      line-height: 1.55;
      color: var(--te-text-2, #666);
    }

    /* ══════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════ */
    .te-footer {
      background: var(--te-text-1, #111110);
      color: rgba(255,255,255,0.8);
      padding-top: 4rem;
      margin-top: auto;
    }

    .te-footer__grid {
      width: 100%;
      max-width: 1280px;
      margin-inline: auto;
      padding-inline: 2rem;
      display: grid;
      grid-template-columns: 1.5fr repeat(var(--ft-menu-cols, 1), 1fr);
      gap: 3rem;
      padding-bottom: 3rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    /* No link columns — the brand shouldn't sit next to an empty track. */
    .te-footer__grid--brand-only {
      grid-template-columns: 1fr;
    }

    /* Column 1: Store info */
    .te-footer__brand {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      margin-bottom: 1rem;
      text-decoration: none;
    }

    .te-footer__brand-mark {
      width: 30px;
      height: 30px;
      border-radius: var(--te-r-sm);
      background: var(--te-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .te-footer__brand-mark svg {
      width: 16px;
      height: 16px;
      fill: #fff;
    }

    .te-footer__store-name {
      font-size: 1rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
    }

    .te-footer__logo-img {
      max-height: 48px;
      width: auto;
      object-fit: contain;
      display: block;
    }

    /* Optional picture under the tagline. Capped so a merchant uploading a
       full-size photo can't blow the footer's height out. */
    .te-footer__image {
      margin-top: 1.25rem;
      max-width: 100%;
      max-height: 120px;
      width: auto;
      object-fit: contain;
      border-radius: var(--te-r-sm);
      display: block;
    }

    .te-footer__tagline {
      font-size: 0.875rem;
      color: rgba(255,255,255,0.52);
      line-height: 1.65;
      font-weight: 500;
      max-width: 34ch;
    }

    /* Social profiles under the tagline. Text labels rather than icons: the
       footer inherits the store's own type, and a wrong-brand glyph set is
       worse than a word. */
    .te-footer__social {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem 1rem;
      margin-top: 1.25rem;
      list-style: none;
      padding: 0;
    }

    .te-footer__social-link {
      font-size: 0.8125rem;
      font-weight: 600;
      color: rgba(255,255,255,0.62);
      text-decoration: none;
      transition: color var(--te-dur) var(--te-ease);
    }

    .te-footer__social-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

    /* Get in touch: an address reads as text, the phone and email as links. */
    .te-footer__contact li {
      font-size: 0.875rem;
      line-height: 1.65;
      color: rgba(255,255,255,0.52);
    }

    /* Column 2: Links */
    .te-footer__col-title {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.38);
      margin-bottom: 1.25rem;
    }

    .te-footer__links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
    }

    .te-footer__link {
      font-size: 0.875rem;
      font-weight: 500;
      color: rgba(255,255,255,0.65);
      text-decoration: none;
      transition: color var(--te-dur) var(--te-ease);
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
    }

    .te-footer__link:hover { color: #fff; }

    /* Copyright bar */
    .te-footer__bar {
      width: 100%;
      max-width: 1280px;
      margin-inline: auto;
      padding: 1.25rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .te-footer__copy {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.35);
      font-weight: 500;
    }

    .te-footer__powered {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.25);
      font-weight: 500;
    }

    .te-footer__powered a {
      color: rgba(255,255,255,0.45);
      text-decoration: none;
      transition: color var(--te-dur) var(--te-ease);
    }

    .te-footer__powered a:hover { color: rgba(255,255,255,0.7); }

    /* ══════════════════════════════════════════════
       UNKNOWN BLOCK (builder targeting)
    ══════════════════════════════════════════════ */
    .te-block-unknown {
      display: none;
    }

    /* ══════════════════════════════════════════════
       TEXT-WITH-IMAGE / IMAGE-WITH-TEXT
    ══════════════════════════════════════════════ */
    .te-block-text-with-image {
      padding: 4rem 0;
    }

    .te-twi__inner {
      max-width: 1280px;
      margin-inline: auto;
      padding-inline: 2rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3.5rem;
      align-items: center;
    }

    /* align:right — image moves to the right column via order swap */
    .te-twi__inner--right .te-twi__img-col  { order: 2; }
    .te-twi__inner--right .te-twi__text-col { order: 1; }

    .te-twi__img-wrap {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--te-shadow-md);
    }

    .te-twi__img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      aspect-ratio: 4 / 3;
    }

    .te-twi__img-placeholder {
      aspect-ratio: 4 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f4f2;
      border-radius: 12px;
      border: 1px dashed #d5d3cf;
      color: #b5b3af;
    }

    .te-twi__img-placeholder svg {
      width: 48px;
      height: 48px;
    }

    .te-twi__heading {
      font-size: 1.875rem;
      font-weight: 700;
      line-height: 1.25;
      color: var(--theme-color-text, #111110);
      margin: 0 0 1rem;
    }

    .te-twi__body {
      font-size: 1rem;
      line-height: 1.7;
      color: var(--theme-color-text, #4a4845);
    }

    .te-twi__body p { margin: 0 0 0.875rem; }
    .te-twi__body p:last-child { margin-bottom: 0; }
    .te-twi__body a { color: var(--brand, #e67e22); text-underline-offset: 3px; }
    .te-twi__body a:hover { opacity: 0.85; }

    /* Optional CTA button (image-with-text show_button) — sits below copy. */
    .te-twi__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 1.5rem;
      padding: 0.8rem 1.75rem;
      border-radius: var(--theme-btn-radius, 8px);
      background: var(--theme-btn-bg, #e67e22);
      color: var(--theme-btn-text, #fff);
      font-weight: 700;
      font-size: 0.95rem;
      text-decoration: none;
      transition: background var(--te-dur, .2s) var(--te-ease, ease),
                  transform var(--te-dur, .2s) var(--te-ease, ease);
    }
    .te-twi__cta:hover { background: var(--te-accent-mid, #d2691e); transform: translateY(-2px); }
    .te-twi__cta:active { transform: translateY(0); }

    /* ══════════════════════════════════════════════
       FAQ
    ══════════════════════════════════════════════ */
    .te-block-faq {
      padding: 4rem 0;
    }

    .te-faq__inner {
      max-width: 1280px;
      margin-inline: auto;
      padding-inline: 2rem;
    }

    .te-faq__heading {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--theme-color-text, #111110);
      margin: 0 0 2rem;
    }

    .te-faq__list {
      display: flex;
      flex-direction: column;
      gap: 0;
      border: 1px solid rgba(0,0,0,0.09);
      border-radius: 10px;
      overflow: hidden;
    }

    .te-faq__item {
      border-bottom: 1px solid rgba(0,0,0,0.09);
    }

    .te-faq__item:last-child {
      border-bottom: none;
    }

    .te-faq__question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.125rem 1.25rem;
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--theme-color-text, #111110);
      cursor: pointer;
      list-style: none;
      background: #fafaf9;
      transition: background 0.15s;
      user-select: none;
    }

    /* Remove default marker in WebKit */
    .te-faq__question::-webkit-details-marker { display: none; }
    .te-faq__question::marker               { display: none; }

    .te-faq__item[open] .te-faq__question {
      background: #f5f3f0;
    }

    .te-faq__question-text {
      flex: 1;
    }

    /* CSS-driven +/− indicator, no JS */
    .te-faq__indicator {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      position: relative;
      color: var(--brand, #e67e22);
    }

    .te-faq__indicator::before,
    .te-faq__indicator::after {
      content: '';
      position: absolute;
      background: currentColor;
      border-radius: 2px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: transform 0.18s ease, opacity 0.18s ease;
    }

    /* Horizontal bar (always visible) */
    .te-faq__indicator::before {
      width: 10px;
      height: 2px;
    }

    /* Vertical bar (rotates to 0 when open) */
    .te-faq__indicator::after {
      width: 2px;
      height: 10px;
    }

    .te-faq__item[open] .te-faq__indicator::after {
      transform: translate(-50%, -50%) rotate(90deg);
      opacity: 0;
    }

    .te-faq__answer {
      padding: 0.875rem 1.25rem 1.125rem;
      font-size: 0.9375rem;
      line-height: 1.65;
      color: var(--theme-color-text, #4a4845);
      background: #ffffff;
      border-top: 1px solid rgba(0,0,0,0.06);
    }

    .te-faq__empty {
      padding: 2rem;
      text-align: center;
      color: #8a8784;
      font-size: 0.875rem;
      border: 1px dashed rgba(0,0,0,0.12);
      border-radius: 10px;
    }

    /* ══════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════ */

    @media (max-width: 1024px) {
      .te-footer__grid {
        grid-template-columns: 1fr 1fr;
      }

      /* Repeated inside the query: the rule above would otherwise re-impose a
         second, empty track on a footer that has no link columns. */
      .te-footer__grid--brand-only {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .te-container,
      .te-product-grid__inner,
      .te-image-grid__inner,
      .te-text__inner,
      .te-twi__inner,
      .te-faq__inner,
      .te-footer__grid,
      .te-footer__bar {
        padding-inline: 1.25rem;
      }

      /* text-with-image: single column below 768px */
      .te-twi__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      /* restore natural DOM order regardless of align:right flip */
      .te-twi__inner--right .te-twi__img-col,
      .te-twi__inner--right .te-twi__text-col {
        order: unset;
      }

      .te-header__inner {
        height: 56px;
      }

      /* The inline nav collapses into the drawer only when JS is available to
         open it. No JS → the nav stays visible and wraps; an ugly nav beats an
         unreachable one. */
      .te-js .te-nav {
        display: none;
      }

      .te-js .te-nav-toggle { display: flex; }

      /* No-JS fallback: wrap the nav so it can't overflow, and unfold the
         hover-only dropdowns — hover doesn't exist on touch, so their children
         would otherwise be unreachable. */
      html:not(.te-js) .te-nav {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.25rem 0 0.5rem;
      }
      html:not(.te-js) .te-mega {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        background: transparent;
      }
      html:not(.te-js) .te-mega__inner { padding: 0.5rem 0; max-height: none; }
      html:not(.te-js) .te-nav__dropdown {
        position: static;
        display: flex;
        flex-wrap: wrap;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        padding: 0;
        background: transparent;
        min-width: 0;
      }

      .te-cols-2,
      .te-cols-3,
      .te-cols-4,
      .te-cols-5 {
        grid-template-columns: repeat(2, 1fr);
      }

      .te-hero__body {
        padding: 3.5rem 1.25rem;
      }

      .te-footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .te-image-grid__cell img {
        height: 200px;
      }

      /* Masonry is CSS columns, so te-cols-* can't reach it. */
      .te-showcase--masonry .te-showcase__items { column-count: 2; }
      .te-showcase__cell img { height: 200px; }
      .te-showcase--masonry .te-showcase__cell img { height: auto; }

      .te-showcase__inner,
      .te-ba__inner { padding-inline: 1.25rem; }
    }

    @media (max-width: 480px) {
      .te-cols-2,
      .te-cols-3,
      .te-cols-4,
      .te-cols-5 {
        grid-template-columns: 1fr;
      }

      .te-showcase--masonry .te-showcase__items { column-count: 1; }

      /* Side-by-side halves get too narrow to read; stack them. */
      .te-ba__side { grid-template-columns: 1fr; }

      .te-header__cart span {
        display: none; /* show icon-only on very small screens */
      }

      .te-hero__body {
        padding: 2.5rem 1rem;
      }
    }

    /* ══════════════════════════════════════════════════════════════
       FULL-ROUTE BLOCKS — product_detail / blog_list / blog_detail /
       category_header / category_products / search / cart
    ══════════════════════════════════════════════════════════════ */

    /* Product detail */
    .te-block-product-detail {
      padding-block: clamp(2rem, 6vw, 4rem);
      background: var(--te-surface);
    }
    .te-pd__inner {
      max-width: 1200px;
      margin-inline: auto;
      padding-inline: 1.25rem;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(1.5rem, 4vw, 3rem);
    }
    .te-pd__media,
    .te-pd__media .te-pd__img-placeholder {
      background: var(--te-surface-muted);
      border-radius: var(--te-r-lg);
      overflow: hidden;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .te-pd__img { width: 100%; height: 100%; object-fit: cover; }
    .te-pd__img-placeholder svg { width: 80px; height: 80px; color: var(--te-text-4); }
    .te-pd__title {
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.15;
      color: var(--te-text-1);
      margin-bottom: 1rem;
    }
    /* Optional description shown directly below the product title. */
    .te-pd__desc--top {
      color: var(--te-text-2, #4a4845);
      font-size: 0.95rem;
      line-height: 1.65;
      margin: -0.25rem 0 1.1rem;
    }
    .te-pd__desc--top p { margin: 0 0 0.65rem; }
    .te-pd__desc--top p:last-child { margin-bottom: 0; }
    .te-pd__price {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--te-accent);
      margin-bottom: 1.25rem;
    }
    .te-pd__description {
      font-size: 0.95rem;
      line-height: 1.75;
      color: var(--te-text-2);
      margin-bottom: 1.5rem;
    }
    .te-pd__cta {
      display: inline-flex;
      align-items: center;
      padding: 0.85rem 1.6rem;
      background: var(--theme-btn-bg);
      color: var(--theme-btn-text);
      border-radius: var(--theme-btn-radius);
      font-weight: 700;
      text-decoration: none;
      transition: background var(--te-dur) var(--te-ease), transform var(--te-dur) var(--te-ease);
    }
    .te-pd__cta { border: none; cursor: pointer; }
    .te-pd__cta:hover { background: var(--te-accent-mid); transform: translateY(-1px); }
    .te-pd__empty { padding: 4rem 1rem; text-align: center; color: var(--te-text-3); }

    /* Gallery */
    .te-pd__gallery { display: flex; flex-direction: column; gap: 0.75rem; }
    .te-pd__gallery-main { position: relative; background: var(--te-surface-muted); border-radius: var(--te-r-lg); overflow: hidden; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
    /* How the photo fills its frame (product_detail image_fit). "Fit" pads
       rather than crops, so the frame's own background shows through. */
    .te-pd__gallery-main--contain { background: var(--te-surface); }

    /* Hover magnifier (image_zoom). transform-origin is set from the cursor
       by the block's script; the class only supplies the scale, so with JS
       off — or on a touch screen, where the script bows out — the photo is
       exactly as it was. */
    .te-pd__gallery-main[data-pd-zoom] { cursor: zoom-in; }

    /* "In the photo": the image scales in place. */
    .te-pd__gallery-main[data-pd-zoom="inside"] .te-pd__img {
      transition: transform 220ms var(--te-ease, ease);
      will-change: transform;
    }
    .te-pd__gallery-main[data-pd-zoom="inside"].is-zooming .te-pd__img { transform: scale(2); }
    @media (prefers-reduced-motion: reduce) {
      .te-pd__gallery-main[data-pd-zoom="inside"] .te-pd__img { transition: none; }
    }

    /* "Beside it": a rectangle marks the slice, a panel shows it enlarged.
       The panel is a sibling of the frame because the frame clips its own
       overflow, and it is laid over the page rather than widening it. */
    .te-pd__gallery { position: relative; }

    .te-pd__lens {
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.35), 0 2px 10px rgba(17, 24, 39, 0.25);
      background: rgba(255, 255, 255, 0.12);
      pointer-events: none;
      will-change: transform;
    }

    .te-pd__zoom-pane {
      position: absolute;
      top: 0;
      left: calc(100% + 1rem);
      width: 100%;
      /* Square, to match the frame's 1/1 aspect. */
      aspect-ratio: 1 / 1;
      z-index: 20;
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-lg);
      background-color: var(--te-surface);
      background-repeat: no-repeat;
      box-shadow: 0 12px 34px rgba(17, 24, 39, 0.16);
      pointer-events: none;
    }

    .te-pd__lens[hidden],
    .te-pd__zoom-pane[hidden] { display: none !important; }

    /* No room to the side: fall back to magnifying in place. */
    @media (max-width: 1100px) {
      .te-pd__zoom-pane, .te-pd__lens { display: none !important; }
      .te-pd__gallery-main[data-pd-zoom="pane"].is-zooming .te-pd__img { transform: scale(2); }
      .te-pd__gallery-main[data-pd-zoom="pane"] .te-pd__img { transition: transform 220ms var(--te-ease, ease); }
    }

    .te-pd__discount-badge { position: absolute; top: 1rem; left: 1rem; background: #b91c1c; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 4px 8px; border-radius: 999px; }
    .te-pd__gallery-thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .te-pd__thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--te-r-sm); cursor: pointer; border: 1px solid var(--te-border); }

    /* Body details */
    .te-pd__category { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--te-text-3); margin-bottom: 0.5rem; }
    .te-pd__category a { text-decoration: none; }
    .te-pd__category a:hover { color: var(--te-accent); }
    .te-pd__rating { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; font-size: 0.85rem; }
    .te-pd__rating-stars { color: #f59e0b; font-weight: 700; }
    .te-pd__rating-count { color: var(--te-text-3); }
    .te-pd__price-row { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 1.25rem; }
    .te-pd__price { font-size: 1.7rem; font-weight: 800; color: var(--te-accent); margin: 0; }
    .te-pd__marked-price { font-size: 1rem; font-weight: 500; color: var(--te-text-3); text-decoration: line-through; }

    /* Variants */
    .te-pd__variants { margin: 1.25rem 0; }
    .te-pd__variants-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--te-text-2); margin-bottom: 0.5rem; }
    .te-pd__variants-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .te-pd__variant { padding: 0.45rem 0.85rem; border: 1px solid var(--te-border-mid); border-radius: var(--te-r-sm); background: var(--te-surface); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: border-color var(--te-dur) var(--te-ease), background var(--te-dur) var(--te-ease); }
    .te-pd__variant:hover { border-color: var(--te-accent); }
    .te-pd__variant--active { border-color: var(--te-accent); background: var(--te-accent-light); color: var(--te-accent-mid); }

    /* Cart form */
    .te-pd__cart-form { display: flex; align-items: end; gap: 0.75rem; margin-top: 1.25rem; }
    .te-pd__qty-row { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
    .te-pd__qty-label { font-size: 0.72rem; font-weight: 600; color: var(--te-text-3); text-transform: uppercase; letter-spacing: 0.04em; }
    .te-pd__qty-input { width: 70px; padding: 0.55rem 0.7rem; border: 1px solid var(--te-border-mid); border-radius: var(--te-r-sm); font: inherit; }
    .te-pd__qty-input:focus { outline: none; border-color: var(--te-accent); box-shadow: 0 0 0 3px var(--te-accent-light); }

    /* Meta */
    .te-pd__meta { margin-top: 1.5rem; border-top: 1px solid var(--te-border); padding-top: 1rem; }
    .te-pd__meta summary { font-weight: 600; cursor: pointer; padding: 0.5rem 0; }
    .te-pd__meta-body { font-size: 0.9rem; color: var(--te-text-2); padding: 0.5rem 0 0.75rem; }
    .te-pd__brand { margin-top: 0.85rem; font-size: 0.78rem; color: var(--te-text-3); }

    /* Cart submit feedback toast — inline, dismisses after 4s. */
    .te-pd__cart-feedback {
      margin-top: 0.75rem;
      padding: 0.55rem 0.85rem;
      border-radius: var(--te-r-sm);
      font-size: 0.85rem;
      font-weight: 600;
      transition: opacity var(--te-dur) var(--te-ease);
    }
    .te-pd__cart-feedback:empty { display: none; }
    .te-pd__cart-feedback--ok {
      background: rgba(16, 185, 129, 0.10);
      color: #047857;
      border: 1px solid rgba(16, 185, 129, 0.25);
    }
    .te-pd__cart-feedback--err {
      background: rgba(220, 38, 38, 0.08);
      color: #b91c1c;
      border: 1px solid rgba(220, 38, 38, 0.20);
    }
    .te-pd__legacy-link {
      display: inline-flex;
      align-items: center;
      margin-top: 1rem;
      padding: 0.5rem 0;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--te-text-3);
      text-decoration: none;
      border-bottom: 1px dashed var(--te-border-mid);
      transition: color var(--te-dur) var(--te-ease), border-color var(--te-dur) var(--te-ease);
    }
    .te-pd__legacy-link:hover { color: var(--te-accent); border-color: var(--te-accent); }

    /* Breadcrumb */
    .te-pd__breadcrumb {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.25rem;
      font-size: 0.8rem;
      color: var(--te-text-3);
      margin-bottom: 0.5rem;
    }
    .te-pd__breadcrumb a { text-decoration: none; color: var(--te-text-3); }
    .te-pd__breadcrumb a:hover { color: var(--te-accent); }
    .te-pd__crumb-sep { color: var(--te-text-4); }
    .te-pd__crumb-current { color: var(--te-text-1); font-weight: 600; }

    /* Color / size option pickers */
    .te-pd__opts-row { margin: 1rem 0; }
    .te-pd__opts-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--te-text-3); margin-bottom: 0.4rem; }
    .te-pd__opts-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .te-pd__opt {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.4rem 0.8rem;
      border: 1px solid var(--te-border-mid);
      border-radius: 999px;
      background: var(--te-surface);
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      transition: border-color var(--te-dur) var(--te-ease), background var(--te-dur) var(--te-ease);
    }
    .te-pd__opt:hover { border-color: var(--te-accent); }
    /* One selected look everywhere: accent ring + tint. The focus ring shows
       for keyboard use only, so a just-clicked chip doesn't look different
       from the other selected one. */
    .te-pd__opt--active { border-color: var(--te-accent); background: var(--te-accent-light); color: var(--te-accent-mid); box-shadow: inset 0 0 0 1px var(--te-accent); }
    .te-pd__opt:focus { outline: none; }
    .te-pd__opt:focus-visible { outline: 2px solid var(--te-accent); outline-offset: 2px; }

    /* Searchable dropdown — option groups with many values or long labels
       (theme_engine/variant_display.py decides). */
    .te-pd__select { position: relative; max-width: 22rem; }
    .te-pd__select-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.55rem 0.8rem;
      border: 1px solid var(--te-border-mid);
      border-radius: 10px;
      background: var(--te-surface);
      color: var(--te-text-1);
      font-size: 0.85rem;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      transition: border-color var(--te-dur) var(--te-ease);
    }
    .te-pd__select-trigger:hover,
    .te-pd__select-trigger[aria-expanded="true"] { border-color: var(--te-accent); }
    .te-pd__select-trigger:focus { outline: none; }
    .te-pd__select-trigger:focus-visible { outline: 2px solid var(--te-accent); outline-offset: 2px; }
    .te-pd__select-trigger svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--te-dur) var(--te-ease); }
    .te-pd__select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
    .te-pd__select-placeholder { color: var(--te-text-3); font-weight: 500; }
    .te-pd__select-panel {
      position: absolute;
      z-index: 30;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      padding: 0.5rem;
      background: var(--te-surface);
      border: 1px solid var(--te-border-mid);
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    }
    .te-pd__select-search {
      width: 100%;
      padding: 0.5rem 0.7rem;
      border: 1px solid var(--te-border-mid);
      border-radius: 8px;
      background: var(--te-surface-sub);
      color: var(--te-text-1);
      font-size: 0.85rem;
    }
    .te-pd__select-search:focus { outline: none; border-color: var(--te-accent); }
    .te-pd__select-list { list-style: none; margin: 0.4rem 0 0; padding: 0; max-height: 16rem; overflow-y: auto; }
    .te-pd__select-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.6rem;
      border-radius: 8px;
      color: var(--te-text-1);
      font-size: 0.85rem;
      cursor: pointer;
    }
    .te-pd__select-item[hidden] { display: none; }
    .te-pd__select-item:hover,
    .te-pd__select-item:focus { background: var(--te-surface-sub); outline: none; }
    .te-pd__select-item:focus-visible { box-shadow: inset 0 0 0 2px var(--te-accent); }
    .te-pd__select-item--active { background: var(--te-accent-light); color: var(--te-accent-mid); font-weight: 600; }
    .te-pd__select-item--unavailable { color: var(--te-text-3); }
    .te-pd__select-item--unavailable .te-pd__opt-label { text-decoration: line-through; }
    .te-pd__select-note { margin-left: auto; font-size: 0.72rem; font-weight: 500; color: var(--te-text-3); }
    .te-pd__select-empty { margin: 0.5rem 0.6rem 0.25rem; font-size: 0.8rem; color: var(--te-text-3); }
    /* Sold-out hint — Shopify pattern. Buttons stay clickable + readable;
       picking a sold-out value just auto-switches the sibling axis. The
       cross-line through the label/swatch is the soft visual cue.       */
    .te-pd__opt--unavailable {
      color: var(--te-text-3);
      background: var(--te-surface-sub);
      position: relative;
      cursor: pointer;
    }
    .te-pd__opt--unavailable .te-pd__opt-label,
    .te-pd__opt--unavailable .te-pd__swatch {
      opacity: 0.65;
    }
    /* Diagonal slash line drawn across the chip — the standard Shopify
       sold-out indicator. Skip on the active chip so the active state
       always wins visually.                                             */
    .te-pd__opt--unavailable::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(
        to top right,
        transparent calc(50% - 1px),
        var(--te-text-4) 50%,
        transparent calc(50% + 1px)
      );
      border-radius: inherit;
      opacity: 0.55;
    }
    .te-pd__opt--unavailable.te-pd__opt--active::after { display: none; }
    .te-pd__opt--unavailable:hover {
      border-color: var(--te-text-3);
      color: var(--te-text-2);
    }
    /* "Out of stock for this combination" notice — shown when the active */
    /* color+size pair has no matching ProductSku.                        */
    .te-pd__no-combo {
      margin: 0.5rem 0 0;
      font-size: 0.78rem;
      font-weight: 600;
      color: #b91c1c;
    }
    .te-pd__swatch {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--swatch, var(--te-border-mid));
      border: 1px solid rgba(0,0,0,0.12);
      flex-shrink: 0;
    }

    /* Price enhancements */
    .te-pd__price-currency { font-size: 0.95rem; font-weight: 700; color: var(--te-text-2); align-self: baseline; }
    .te-pd__discount-pill { display: inline-flex; align-items: center; padding: 2px 8px; background: #fef3c7; color: #92400e; font-size: 0.72rem; font-weight: 700; border-radius: 999px; margin-left: 0.25rem; }

    /* Quantity stepper */
    .te-pd__qty-stepper { display: inline-flex; align-self: flex-start; width: auto; align-items: center; border: 1px solid var(--te-border-mid); border-radius: var(--te-r-sm); overflow: hidden; }
    .te-pd__qty-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--te-surface-muted);
      border: none;
      cursor: pointer;
      font-size: 1.1rem;
      line-height: 1;
      color: var(--te-text-1);
      transition: background var(--te-dur) var(--te-ease);
    }
    .te-pd__qty-btn:hover { background: var(--te-accent-light); color: var(--te-accent); }
    .te-pd__qty-stepper .te-pd__qty-input {
      flex: 0 0 52px;
      width: 52px;
      border: none;
      border-radius: 0;
      border-left: 1px solid var(--te-border-mid);
      border-right: 1px solid var(--te-border-mid);
      text-align: center;
    }

    /* Cart form layout reset to column for new sub-elements */
    .te-pd__cart-form { flex-direction: column; align-items: stretch; gap: 0.85rem; }
    .te-pd__cta { width: 100%; justify-content: center; font-size: 1rem; padding: 0.9rem 1.6rem; }

    /* Stock indicator */
    .te-pd__stock { display: inline-flex; align-self: flex-start; width: auto; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 700; padding: 0.42rem 0.85rem; border-radius: 999px; margin: 0.1rem 0 0.2rem; }
    .te-pd__stock[hidden] { display: none; }
    .te-pd__stock--in { color: #065f46; background: rgba(16,185,129,0.12); }
    .te-pd__stock--out { color: #991b1b; background: rgba(239,68,68,0.12); }
    .te-pd__stock-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10b981; flex-shrink: 0; }
    .te-pd__stock--out .te-pd__stock-dot, .te-pd__stock-dot--out { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
    .te-pd__stock-units { font-weight: 500; color: var(--te-text-3); margin-left: 0.2rem; }
    /* Sold-out CTA */
    .te-pd__cta--soldout, .te-pd__cta:disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; box-shadow: none; }
    .te-pd__cta--soldout:hover, .te-pd__cta:disabled:hover { background: #e5e7eb; transform: none; }
    /* Out-of-stock image badge */
    .te-pd__oos-badge { position: absolute; top: 12px; right: 12px; z-index: 3; background: #991b1b; color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.4rem 0.75rem; border-radius: 999px; box-shadow: 0 3px 10px rgba(153,27,27,0.35); }

    /* Wishlist link */
    .te-pd__wishlist {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.7rem 1.6rem;
      border: 1px solid var(--te-border-mid);
      border-radius: var(--te-r-sm);
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--te-text-2);
      text-decoration: none;
      transition: border-color var(--te-dur) var(--te-ease), color var(--te-dur) var(--te-ease);
    }
    .te-pd__wishlist:hover { border-color: var(--te-accent); color: var(--te-accent); }
    .te-pd__wishlist { margin-top: 0.6rem; }

    /* Dimensions / weight */
    .te-pd__dims { font-size: 0.78rem; color: var(--te-text-3); margin-top: 0.35rem; }

    /* Tabs strip (Description / Reviews / Enquiries) */
    .te-pd__tabs-outer { max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; padding-block: 2rem 1rem; }
    .te-pd__tabs { border: 1px solid var(--te-border); border-radius: var(--te-r-lg); overflow: hidden; }
    .te-pd__tab { border-bottom: 1px solid var(--te-border); }
    .te-pd__tab:last-child { border-bottom: none; }
    .te-pd__tab > summary {
      list-style: none;
      padding: 1rem 1.25rem;
      font-weight: 700;
      font-size: 0.9rem;
      cursor: pointer;
      background: var(--te-surface-muted);
      user-select: none;
      transition: background var(--te-dur) var(--te-ease);
    }
    .te-pd__tab > summary::-webkit-details-marker { display: none; }
    .te-pd__tab[open] > summary { background: var(--te-accent-light); color: var(--te-accent-mid); }
    .te-pd__tab-body { padding: 1rem 1.25rem; font-size: 0.9rem; line-height: 1.75; color: var(--te-text-2); }

    /* ── Product detail — professional polish pass (overrides above) ── */
    .te-block-product-detail { padding-block: clamp(1.5rem, 4vw, 3rem); }
    .te-pd__inner { gap: clamp(2rem, 5vw, 4rem); align-items: start; }
    /* Sticky gallery on desktop — the info column scrolls beside it (premium PDP pattern). */
    .te-pd__gallery { position: sticky; top: 1.5rem; }
    .te-pd__gallery-main {
      border: 1px solid var(--te-border);
      box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    }
    .te-pd__thumb { transition: border-color var(--te-dur) var(--te-ease); }
    .te-pd__thumb:hover, .te-pd__thumb--active { border-color: var(--te-accent); }
    /* Tighter, more editorial type + spacing */
    .te-pd__title { font-weight: 700; letter-spacing: -0.025em; margin-bottom: 0.65rem; }
    .te-pd__desc--top { color: var(--te-text-2); }
    /* Price: clearer hierarchy, sits on a soft divider */
    .te-pd__price-row {
      align-items: baseline; gap: 0.55rem;
      padding-bottom: 1.15rem; margin-bottom: 1.35rem;
      border-bottom: 1px solid var(--te-border);
    }
    .te-pd__price { font-size: clamp(1.7rem, 3vw, 2rem); letter-spacing: -0.02em; }
    .te-pd__price-currency { font-size: 0.78rem; color: var(--te-text-3); font-weight: 600; }
    .te-pd__discount-pill { background: var(--te-accent-light); color: var(--te-accent-mid); }
    /* Actions: calmer, with a soft brand shadow instead of a flat slab */
    .te-pd__cta { border-radius: var(--theme-btn-radius, 10px); box-shadow: 0 2px 10px color-mix(in srgb, var(--te-accent) 22%, transparent); letter-spacing: 0.01em; }
    .te-pd__cta:hover { box-shadow: 0 5px 18px color-mix(in srgb, var(--te-accent) 30%, transparent); }
    .te-pd__wishlist, .te-pd__qty-stepper, .te-pd__qty-input { border-radius: 10px; }
    /* Tabs: flatter, editorial — no filled summary bars */
    .te-pd__tabs { border-radius: var(--te-r-lg); }
    .te-pd__tab > summary { background: transparent; font-size: 0.875rem; }
    .te-pd__tab[open] > summary { background: transparent; color: var(--te-text-1); }
    .te-pd__tab > summary:hover { color: var(--te-accent); }

    @media (max-width: 768px) {
      .te-pd__inner { grid-template-columns: 1fr; }
      .te-pd__breadcrumb { margin-bottom: 0.25rem; }
      .te-pd__gallery { position: static; }
    }

    /* Blog list */
    .te-block-blog-list { padding-block: clamp(2rem, 5vw, 3.5rem); }
    .te-blog-list__inner { max-width: 1280px; margin-inline: auto; padding-inline: 1.25rem; }
    .te-blog-list__heading {
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 1.5rem;
    }
    .te-blog-list__grid {
      display: grid;
      grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
      gap: 1.5rem;
    }
    .te-cols-2 .te-blog-list__grid, .te-blog-list__grid.te-cols-2 { --cols: 2; }
    .te-cols-3 .te-blog-list__grid, .te-blog-list__grid.te-cols-3 { --cols: 3; }
    .te-cols-4 .te-blog-list__grid, .te-blog-list__grid.te-cols-4 { --cols: 4; }
    .te-post-card {
      display: block;
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-md);
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      transition: box-shadow var(--te-dur) var(--te-ease), transform var(--te-dur) var(--te-ease);
    }
    .te-post-card:hover { box-shadow: var(--te-shadow-md); transform: translateY(-2px); }
    .te-post-card__img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      display: block;
    }
    .te-post-card__img-placeholder {
      width: 100%;
      aspect-ratio: 16 / 10;
      background: var(--te-surface-muted);
    }
    .te-post-card__body { padding: 1rem 1.1rem 1.2rem; }
    .te-post-card__title {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin-bottom: 0.4rem;
    }
    .te-post-card__excerpt {
      font-size: 0.85rem;
      color: var(--te-text-2);
      line-height: 1.6;
      margin-bottom: 0.6rem;
    }
    .te-post-card__meta {
      font-size: 0.75rem;
      color: var(--te-text-3);
      font-weight: 600;
    }
    .te-blog-list__empty { padding: 3rem 1rem; text-align: center; color: var(--te-text-3); }
    @media (max-width: 768px) {
      .te-blog-list__grid { grid-template-columns: 1fr; }
    }

    /* Blog detail */
    .te-block-blog-detail { padding-block: clamp(2rem, 6vw, 4rem); }
    .te-bd__inner { max-width: 760px; margin-inline: auto; padding-inline: 1.25rem; }
    .te-bd__title {
      font-size: clamp(1.8rem, 3.6vw, 2.8rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 0.5rem;
    }
    .te-bd__meta { font-size: 0.85rem; color: var(--te-text-3); margin-bottom: 1.5rem; }
    .te-bd__hero { width: 100%; border-radius: var(--te-r-lg); margin-bottom: 1.75rem; }
    .te-bd__content { font-size: 1rem; line-height: 1.8; color: var(--te-text-2); }
    .te-bd__content h2 { font-size: 1.5rem; font-weight: 800; margin: 2rem 0 0.75rem; color: var(--te-text-1); }
    .te-bd__content p { margin-bottom: 1rem; }

    /* Category header */
    .te-block-category-header { padding-block: clamp(1.5rem, 4vw, 2.5rem); background: var(--te-surface); }
    .te-cat-header__inner { max-width: 1280px; margin-inline: auto; padding-inline: 1.25rem; text-align: center; }
    .te-cat-header__title {
      font-size: clamp(1.6rem, 3.2vw, 2.4rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 0.4rem;
    }
    .te-cat-header__sub { color: var(--te-text-3); font-size: 0.95rem; }

    /* Search */
    .te-block-search { padding-block: clamp(2rem, 5vw, 3rem); }
    .te-search__inner { max-width: 1280px; margin-inline: auto; padding-inline: 1.25rem; }
    .te-search__form {
      display: flex;
      gap: 0.6rem;
      max-width: 640px;
      margin-inline: auto;
      margin-bottom: 1.5rem;
    }
    .te-search__input {
      flex: 1;
      padding: 0.85rem 1rem;
      border: 1px solid var(--te-border-mid);
      border-radius: var(--te-r-sm);
      background: var(--te-surface);
      font: inherit;
    }
    .te-search__input:focus { outline: none; border-color: var(--te-accent); box-shadow: 0 0 0 3px var(--te-accent-light); }
    .te-search__submit {
      padding: 0.85rem 1.4rem;
      background: var(--theme-btn-bg);
      color: var(--theme-btn-text);
      border-radius: var(--theme-btn-radius);
      font-weight: 700;
    }
    .te-search__heading { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }

    /* CMS page (page_content block) */
    .te-block-page-content { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
    .te-page-content__inner { max-width: 760px; margin-inline: auto; padding-inline: 1.25rem; }
    .te-page-content__title {
      font-size: clamp(1.8rem, 3.6vw, 2.6rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: 1.25rem;
    }
    .te-page-content__body {
      font-size: 1rem;
      line-height: 1.8;
      color: var(--te-text-2);
    }
    .te-page-content__body h2 {
      font-size: 1.5rem;
      font-weight: 800;
      margin: 1.8rem 0 0.7rem;
      color: var(--te-text-1);
    }
    .te-page-content__body h3 {
      font-size: 1.2rem;
      font-weight: 700;
      margin: 1.4rem 0 0.6rem;
      color: var(--te-text-1);
    }
    .te-page-content__body p { margin-bottom: 1rem; }
    .te-page-content__body a { color: var(--te-accent); text-decoration: underline; }
    .te-page-content__placeholder { color: var(--te-text-3); padding: 2rem 0; }

    /* Cart */
    .te-block-cart { padding-block: clamp(2rem, 5vw, 3.5rem); }
    .te-cart__inner { max-width: 1280px; margin-inline: auto; padding-inline: 1.25rem; }
    .te-cart__head { text-align: left; margin-bottom: 1.5rem; }
    .te-cart__heading { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 0.4rem; letter-spacing: -0.02em; }
    .te-cart__sub { color: var(--te-text-3); }
    .te-cart__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
    @media (max-width: 768px) { .te-cart__grid { grid-template-columns: 1fr; } }

    .te-cart__lines { display: flex; flex-direction: column; gap: 1rem; }
    .te-cart__line {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr) auto;
      gap: 1rem;
      padding: 1rem;
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-md);
      align-items: center;
    }
    .te-cart__line-img-wrap { display: block; }
    .te-cart__line-img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--te-r-sm); }
    .te-cart__line-body { min-width: 0; }
    .te-cart__line-title { font-weight: 700; color: var(--te-text-1); text-decoration: none; line-height: 1.3; }
    .te-cart__line-title:hover { color: var(--te-accent); }
    .te-cart__line-meta { font-size: 0.78rem; color: var(--te-text-3); margin: 0.2rem 0 0.35rem; }
    .te-cart__line-price { font-size: 0.85rem; color: var(--te-text-2); margin-bottom: 0.5rem; }
    .te-cart__line-actions { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
    .te-cart__line-update {
      width: 26px; height: 26px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--te-border-mid);
      border-radius: var(--te-r-sm);
      color: var(--te-text-2);
      text-decoration: none;
      font-weight: 700;
      transition: border-color var(--te-dur) var(--te-ease), color var(--te-dur) var(--te-ease);
    }
    .te-cart__line-update:hover { border-color: var(--te-accent); color: var(--te-accent); }
    .te-cart__line-qty { font-weight: 700; min-width: 22px; text-align: center; }
    .te-cart__line-remove { color: #b91c1c; text-decoration: none; font-weight: 600; margin-left: auto; font-size: 0.78rem; }
    .te-cart__line-remove:hover { text-decoration: underline; }
    .te-cart__line-subtotal { font-weight: 800; font-size: 1rem; color: var(--te-text-1); }

    .te-cart__summary {
      padding: 1.4rem;
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-md);
      box-shadow: var(--te-shadow-sm);
      position: sticky;
      top: 88px;
    }
    .te-cart__summary-heading { font-size: 1.05rem; font-weight: 800; margin-bottom: 1rem; letter-spacing: -0.01em; }
    .te-cart__summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid var(--te-border); font-size: 0.9rem; color: var(--te-text-2); }
    .te-cart__summary-row dt { font-weight: 600; }
    .te-cart__summary-row dd { font-weight: 700; color: var(--te-text-1); }
    .te-cart__summary-row--discount dd { color: #047857; }
    .te-cart__summary-row--total { border-bottom: none; padding-top: 0.85rem; font-size: 1.05rem; }
    .te-cart__summary-row--total dt { font-weight: 800; }
    .te-cart__summary-row--total dd { font-size: 1.1rem; font-weight: 800; color: var(--te-accent); }
    .te-cart__checkout-cta {
      display: block;
      margin-top: 1.1rem;
      padding: 0.85rem 1.2rem;
      background: var(--theme-btn-bg);
      color: var(--theme-btn-text);
      border-radius: var(--theme-btn-radius);
      font-weight: 800;
      text-align: center;
      text-decoration: none;
      transition: background var(--te-dur) var(--te-ease), transform var(--te-dur) var(--te-ease);
    }
    .te-cart__checkout-cta:hover { background: var(--te-accent-mid); transform: translateY(-1px); }
    /* No payment gateway enabled — the CTA renders as a dead <span>. */
    .te-cart__checkout-cta--disabled {
      background: var(--te-surface-2, #f1f1f1);
      color: var(--te-text-3, #8a8791);
      cursor: not-allowed;
      pointer-events: none;
    }
    .te-cart__blocked {
      margin: 1.1rem 0 0;
      padding: 0.75rem 0.85rem;
      border: 1px solid #f5c6a5;
      background: #fdf4ec;
      border-radius: var(--theme-btn-radius);
      font-size: 0.82rem;
      line-height: 1.55;
      color: #7a4a1d;
    }
    .te-cart__blocked strong { display: block; }
    .te-cart__blocked-hint { display: block; margin-top: 0.35rem; font-size: 0.76rem; opacity: 0.85; }
    .te-cart__blocked-hint a { color: inherit; }
    .te-cart__continue { display: block; text-align: center; margin-top: 0.6rem; font-size: 0.8rem; color: var(--te-text-3); text-decoration: none; }
    .te-cart__continue:hover { color: var(--te-accent); }

    .te-cart__empty {
      padding: clamp(2.5rem, 6vw, 4rem) 1rem;
      text-align: center;
      background: var(--te-surface);
      border: 1px dashed var(--te-border-mid);
      border-radius: var(--te-r-md);
    }
    .te-cart__empty-icon { width: 48px; height: 48px; margin: 0 auto 1rem; color: var(--te-text-4); }
    .te-cart__empty-icon svg { width: 100%; height: 100%; }
    .te-cart__empty-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.4rem; color: var(--te-text-1); }
    .te-cart__empty-body { color: var(--te-text-3); margin-bottom: 1.25rem; }
    .te-cart__cta {
      display: inline-flex;
      padding: 0.85rem 1.6rem;
      background: var(--theme-btn-bg);
      color: var(--theme-btn-text);
      border-radius: var(--theme-btn-radius);
      font-weight: 700;
      text-decoration: none;
    }
    .te-cart__cta:hover { background: var(--te-accent-mid); }

    /* ============================================================
       Phase L — customer storefront pages (account dashboard,
       orders, profile, addresses, reviews, support, wishlist,
       order tracking, thank you). All sections share the
       `.te-account__*` token set + a small reusable bag for forms,
       pills, and order timelines.
    ============================================================ */
    .te-block-account-home,
    .te-block-customer-orders,
    .te-block-order-status,
    .te-block-customer-profile,
    .te-block-address-book,
    .te-block-customer-reviews,
    .te-block-customer-support,
    .te-block-customer-wishlist,
    .te-block-track,
    .te-block-thankyou { padding-block: clamp(2rem, 5vw, 3.5rem); }

    .te-account__inner { max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }
    .te-account__inner--narrow { max-width: 720px; }

    .te-account__head { text-align: left; margin-bottom: 1.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
    .te-account__head--row { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
    .te-account__heading { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--te-text-1); }
    .te-account__sub { color: var(--te-text-3); font-size: 0.92rem; }
    .te-account__back {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-size: 0.82rem; font-weight: 600; color: var(--te-text-3);
      text-decoration: none; margin-bottom: 0.3rem;
    }
    .te-account__back:hover { color: var(--te-accent); }

    .te-account__cta {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0.7rem 1.4rem;
      background: var(--te-accent);
      color: #fff;
      border-radius: var(--te-r-sm);
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
      border: none;
      transition: background var(--te-dur) var(--te-ease), transform var(--te-dur) var(--te-ease);
    }
    .te-account__cta:hover { background: var(--te-accent-mid, var(--te-accent)); transform: translateY(-1px); }

    .te-account__empty {
      padding: clamp(2rem, 6vw, 3.5rem) 1rem;
      text-align: center;
      background: var(--te-surface);
      border: 1px dashed var(--te-border-mid);
      border-radius: var(--te-r-md);
    }
    .te-account__empty-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.4rem; color: var(--te-text-1); }
    .te-account__empty-body { color: var(--te-text-3); margin-bottom: 1.2rem; line-height: 1.55; }

    .te-pill {
      display: inline-flex; align-items: center;
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.02em;
      background: rgba(0,0,0,0.05);
      color: var(--te-text-2);
      text-transform: uppercase;
    }
    .te-pill--pending,
    .te-pill--order-confirmed { background: rgba(234,179,8,0.14); color: #b45309; }
    .te-pill--ready-to-ship   { background: rgba(59,130,246,0.14); color: #1d4ed8; }
    .te-pill--ontheway,
    .te-pill--shipped         { background: rgba(99,102,241,0.14); color: #4338ca; }
    .te-pill--delivered,
    .te-pill--success         { background: rgba(34,197,94,0.14); color: #15803d; }
    .te-pill--canceled,
    .te-pill--danger          { background: rgba(220,38,38,0.14); color: #b91c1c; }

    .te-account__cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .te-account__card {
      display: flex; gap: 0.85rem; align-items: flex-start;
      padding: 1.2rem;
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-md);
      text-decoration: none;
      transition: border-color var(--te-dur) var(--te-ease), transform var(--te-dur) var(--te-ease), box-shadow var(--te-dur) var(--te-ease);
    }
    .te-account__card:hover {
      border-color: var(--te-accent);
      transform: translateY(-2px);
      box-shadow: var(--te-shadow-sm);
    }
    .te-account__icon { width: 28px; height: 28px; color: var(--te-accent); flex-shrink: 0; }
    .te-account__card-title { font-weight: 800; color: var(--te-text-1); font-size: 0.98rem; margin-bottom: 0.2rem; }
    .te-account__card-sub { font-size: 0.82rem; color: var(--te-text-3); line-height: 1.45; }

    .te-account__recent { margin-top: 1.5rem; }
    .te-account__recent-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.7rem; }
    .te-account__recent-title { font-size: 1rem; font-weight: 800; color: var(--te-text-1); }
    .te-account__recent-link { font-size: 0.82rem; color: var(--te-accent); text-decoration: none; font-weight: 600; }
    .te-account__recent-link:hover { text-decoration: underline; }
    .te-account__recent-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
    .te-account__recent-row {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: 0.85rem;
      align-items: center;
      padding: 0.75rem 1rem;
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-sm);
    }
    .te-account__recent-id { font-weight: 700; color: var(--te-text-1); text-decoration: none; }
    .te-account__recent-id:hover { color: var(--te-accent); }
    .te-account__recent-date { font-size: 0.82rem; color: var(--te-text-3); }
    .te-account__recent-total { font-weight: 800; color: var(--te-text-1); }

    .te-orders__table {
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-md);
      overflow: hidden;
    }
    .te-orders__head,
    .te-orders__row {
      display: grid;
      grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1.4fr;
      gap: 0.5rem;
      padding: 0.9rem 1.1rem;
      align-items: center;
    }
    .te-orders__head {
      background: var(--te-surface-sub, rgba(0,0,0,0.025));
      font-size: 0.74rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--te-text-3);
    }
    .te-orders__row + .te-orders__row { border-top: 1px solid var(--te-border); }
    .te-orders__row:hover { background: var(--te-surface-sub, rgba(0,0,0,0.015)); }
    .te-orders__id { font-weight: 700; color: var(--te-text-1); text-decoration: none; }
    .te-orders__id:hover { color: var(--te-accent); }
    .te-orders__date,
    .te-orders__total { color: var(--te-text-2); font-size: 0.9rem; }
    .te-orders__total { font-weight: 800; color: var(--te-text-1); }
    .te-orders__actions { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
    .te-orders__action {
      padding: 0.4rem 0.85rem;
      border-radius: var(--te-r-sm);
      font-size: 0.78rem;
      font-weight: 700;
      text-decoration: none;
      transition: background var(--te-dur) var(--te-ease);
    }
    .te-orders__action--view    { background: rgba(0,0,0,0.05); color: var(--te-text-1); }
    .te-orders__action--view:hover { background: rgba(0,0,0,0.09); }
    .te-orders__action--reorder { background: var(--te-accent); color: #fff; }
    .te-orders__action--reorder:hover { background: var(--te-accent-mid, var(--te-accent)); }
    @media (max-width: 768px) {
      .te-orders__head { display: none; }
      .te-orders__row { grid-template-columns: 1fr; }
      .te-orders__actions { justify-content: flex-start; }
    }

    .te-order-status__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
      gap: 1.5rem;
      align-items: start;
    }
    @media (max-width: 900px) { .te-order-status__grid { grid-template-columns: 1fr; } }

    .te-order-timeline {
      list-style: none;
      display: flex; justify-content: space-between;
      gap: 0.5rem;
      margin: 0 0 1.5rem;
      padding: 1.2rem 1.1rem;
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-md);
      position: relative;
    }
    .te-order-timeline__step { flex: 1; text-align: center; position: relative; }
    .te-order-timeline__step + .te-order-timeline__step::before {
      content: '';
      position: absolute; left: -50%; right: 50%; top: 12px;
      height: 2px;
      background: var(--te-border-mid);
      z-index: 0;
    }
    .te-order-timeline__step.is-done + .te-order-timeline__step::before { background: var(--te-accent); }
    .te-order-timeline__dot {
      position: relative;
      display: block;
      width: 24px; height: 24px;
      margin: 0 auto 0.4rem;
      border-radius: 50%;
      background: var(--te-surface);
      border: 2px solid var(--te-border-mid);
      z-index: 1;
    }
    .te-order-timeline__step.is-done .te-order-timeline__dot { background: var(--te-accent); border-color: var(--te-accent); }
    .te-order-timeline__label { font-size: 0.75rem; font-weight: 700; color: var(--te-text-3); }
    .te-order-timeline__step.is-done .te-order-timeline__label { color: var(--te-text-1); }

    .te-order-status__lines { display: flex; flex-direction: column; gap: 0.7rem; }
    .te-order-status__line {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr) auto;
      gap: 0.9rem;
      align-items: center;
      padding: 0.85rem;
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-md);
    }
    .te-order-status__line-img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--te-r-sm); }
    .te-order-status__line-title { font-weight: 700; color: var(--te-text-1); text-decoration: none; line-height: 1.3; }
    .te-order-status__line-title:hover { color: var(--te-accent); }
    .te-order-status__line-meta { font-size: 0.78rem; color: var(--te-text-3); margin-top: 0.15rem; }
    .te-order-status__line-qty { font-size: 0.8rem; color: var(--te-text-2); margin-top: 0.3rem; display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
    .te-order-status__line-subtotal { font-weight: 800; color: var(--te-text-1); }

    .te-order-status__aside { display: flex; flex-direction: column; gap: 0.9rem; position: sticky; top: 88px; }
    .te-order-status__card {
      padding: 1.1rem;
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-md);
    }
    .te-order-status__card--ctas { display: flex; flex-direction: column; gap: 0.55rem; }
    .te-order-status__card-title { font-size: 0.96rem; font-weight: 800; margin-bottom: 0.7rem; color: var(--te-text-1); }
    .te-order-status__row { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid var(--te-border); font-size: 0.88rem; color: var(--te-text-2); }
    .te-order-status__row dt { font-weight: 600; }
    .te-order-status__row dd { font-weight: 700; color: var(--te-text-1); }
    .te-order-status__row--good dd { color: #15803d; }
    .te-order-status__row--total { border-bottom: none; padding-top: 0.7rem; font-size: 1rem; }
    .te-order-status__meta { font-size: 0.78rem; color: var(--te-text-3); margin-top: 0.5rem; }
    .te-order-status__addr-name { font-weight: 700; color: var(--te-text-1); margin-bottom: 0.2rem; }
    .te-order-status__addr-line { font-size: 0.88rem; color: var(--te-text-2); line-height: 1.45; }
    .te-order-status__cta {
      padding: 0.65rem 1rem;
      background: rgba(0,0,0,0.04);
      border-radius: var(--te-r-sm);
      font-size: 0.86rem;
      font-weight: 700;
      color: var(--te-text-1);
      text-align: center;
      text-decoration: none;
    }
    .te-order-status__cta:hover { background: rgba(0,0,0,0.08); }
    .te-order-status__cta--primary { background: var(--te-accent); color: #fff; }
    .te-order-status__cta--primary:hover { background: var(--te-accent-mid, var(--te-accent)); }

    .te-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.85rem 1rem;
      margin-bottom: 1rem;
    }
    .te-form-field { display: flex; flex-direction: column; gap: 0.35rem; }
    .te-form-field--full { grid-column: 1 / -1; }
    .te-form-field--checkbox { flex-direction: row; align-items: center; gap: 0.55rem; }
    .te-form-field--checkbox span { font-size: 0.88rem; color: var(--te-text-2); }
    .te-form-label {
      font-size: 0.74rem; font-weight: 700;
      letter-spacing: 0.05em; text-transform: uppercase;
      color: var(--te-text-3);
    }
    .te-form-input {
      padding: 0.65rem 0.85rem;
      border: 1px solid var(--te-border-mid);
      border-radius: var(--te-r-sm);
      font: inherit;
      font-size: 0.95rem;
      color: var(--te-text-1);
      background: var(--te-surface);
      outline: none;
      transition: border-color var(--te-dur) var(--te-ease), box-shadow var(--te-dur) var(--te-ease);
    }
    .te-form-input:focus { border-color: var(--te-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--te-accent) 12%, transparent); }
    @media (max-width: 640px) { .te-form-grid { grid-template-columns: 1fr; } }

    .te-profile-form { background: var(--te-surface); border: 1px solid var(--te-border); border-radius: var(--te-r-md); padding: 1.5rem; }
    .te-profile-form__avatar { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.2rem; }
    .te-profile-form__avatar-img,
    .te-profile-form__avatar-placeholder {
      width: 76px; height: 76px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--te-surface-muted);
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 1.6rem; color: var(--te-text-3);
    }
    .te-profile-form__upload {
      display: inline-flex; align-items: center;
      gap: 0.45rem;
      cursor: pointer;
      padding: 0.55rem 0.95rem;
      border: 1px solid var(--te-border-mid);
      border-radius: var(--te-r-sm);
      font-size: 0.82rem; font-weight: 600; color: var(--te-text-2);
    }
    .te-profile-form__upload input { display: none; }
    .te-profile-form__upload:hover { border-color: var(--te-accent); color: var(--te-accent); }
    .te-profile-form__actions { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-top: 0.5rem; }

    .te-address__list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
    .te-address__row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1rem;
      padding: 1rem 1.2rem;
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-md);
      align-items: start;
    }
    .te-address__row.is-default { border-color: var(--te-accent); box-shadow: 0 0 0 1px var(--te-accent) inset; }
    .te-address__label-row { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 0.25rem; }
    .te-address__label { font-weight: 800; color: var(--te-text-1); }
    .te-address__name { font-weight: 700; color: var(--te-text-1); margin-bottom: 0.15rem; }
    .te-address__line { font-size: 0.88rem; color: var(--te-text-2); line-height: 1.45; }
    .te-address__actions { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
    .te-address__btn {
      padding: 0.4rem 0.8rem;
      background: rgba(0,0,0,0.04);
      border: 1px solid transparent;
      border-radius: var(--te-r-sm);
      font: inherit;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--te-text-1);
      cursor: pointer;
      transition: background var(--te-dur) var(--te-ease);
    }
    .te-address__btn:hover { background: rgba(0,0,0,0.08); }
    .te-address__btn--danger { color: #b91c1c; background: rgba(220,38,38,0.06); }
    .te-address__btn--danger:hover { background: rgba(220,38,38,0.14); }
    .te-address__form { background: var(--te-surface); border: 1px solid var(--te-border); border-radius: var(--te-r-md); padding: 1.25rem; }
    .te-address__form--hidden { display: none; }
    .te-address__status { margin-top: 0.5rem; }

    .te-review__list { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }
    .te-review__row {
      padding: 1rem 1.2rem;
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-md);
    }
    .te-review__product { font-weight: 700; color: var(--te-text-1); text-decoration: none; }
    .te-review__product:hover { color: var(--te-accent); }
    .te-review__rating { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0.4rem 0 0.5rem; color: var(--te-text-3); font-size: 0.92rem; }
    .te-review__star { color: var(--te-border-mid); font-size: 1.05rem; line-height: 1; }
    .te-review__star.is-on { color: #f59e0b; }
    .te-review__rating-num { font-weight: 700; color: var(--te-text-2); font-size: 0.82rem; margin-left: 0.25rem; }
    .te-review__text { color: var(--te-text-2); line-height: 1.55; margin-bottom: 0.45rem; }
    .te-review__meta { font-size: 0.78rem; color: var(--te-text-3); }

    .te-support__form { background: var(--te-surface); border: 1px solid var(--te-border); border-radius: var(--te-r-md); padding: 1.4rem; margin-bottom: 1.5rem; }
    .te-support__history { margin-top: 1.25rem; }
    .te-support__list { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
    .te-support__row {
      padding: 0.9rem 1.1rem;
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-md);
    }
    .te-support__row-head { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; flex-wrap: wrap; }
    .te-support__type { font-weight: 800; color: var(--te-text-1); }
    .te-support__date { font-size: 0.78rem; color: var(--te-text-3); }
    .te-support__issue { color: var(--te-text-2); line-height: 1.55; font-size: 0.9rem; }

    .te-wishlist__grid {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 1rem;
    }
    .te-wishlist__card {
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-md);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .te-wishlist__img-wrap { display: block; aspect-ratio: 1; background: var(--te-surface-muted); }
    .te-wishlist__img { width: 100%; height: 100%; object-fit: cover; }
    .te-wishlist__body { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
    .te-wishlist__title { font-weight: 700; color: var(--te-text-1); text-decoration: none; line-height: 1.3; }
    .te-wishlist__title:hover { color: var(--te-accent); }
    .te-wishlist__meta { font-size: 0.78rem; color: var(--te-text-3); }
    .te-wishlist__price { font-weight: 800; color: var(--te-text-1); margin-top: auto; }
    .te-wishlist__actions { display: flex; gap: 0.45rem; margin-top: 0.5rem; }
    .te-wishlist__btn {
      flex: 1;
      padding: 0.55rem 0.7rem;
      border-radius: var(--te-r-sm);
      font-size: 0.8rem;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
      transition: background var(--te-dur) var(--te-ease);
    }
    .te-wishlist__btn--primary { background: var(--theme-btn-bg); color: var(--theme-btn-text); }
    .te-wishlist__btn--primary:hover { background: var(--te-accent-mid, var(--te-accent)); }
    .te-wishlist__btn--ghost { background: rgba(0,0,0,0.04); color: var(--te-text-1); }
    .te-wishlist__btn--ghost:hover { background: rgba(0,0,0,0.08); }

    .te-track__form { background: var(--te-surface); border: 1px solid var(--te-border); border-radius: var(--te-r-md); padding: 1.4rem; margin-bottom: 1rem; }
    .te-track__error {
      padding: 0.7rem 0.95rem;
      background: rgba(220,38,38,0.08);
      color: #b91c1c;
      border-radius: var(--te-r-sm);
      font-size: 0.88rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }
    .te-track__result {
      background: var(--te-surface);
      border: 1px solid var(--te-border);
      border-radius: var(--te-r-md);
      padding: 1.25rem;
    }
    .te-track__result-head { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 0.4rem; }
    .te-track__result-id { font-weight: 800; color: var(--te-text-1); font-size: 1.05rem; }
    .te-track__addr { margin-top: 0.6rem; }

    .te-thankyou__inner { text-align: center; }
    .te-thankyou__hero { padding: 2rem 1rem 1rem; }
    .te-thankyou__check {
      width: 64px; height: 64px;
      margin: 0 auto 0.85rem;
      border-radius: 50%;
      background: rgba(34,197,94,0.12);
      color: #15803d;
      display: flex; align-items: center; justify-content: center;
    }
    .te-thankyou__check svg { width: 36px; height: 36px; }
    .te-thankyou__heading { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
    .te-thankyou__sub { color: var(--te-text-3); margin-bottom: 0.6rem; }
    .te-thankyou__order-id { font-weight: 800; color: var(--te-accent); font-size: 1.1rem; }
    .te-thankyou__card { text-align: left; margin-top: 1rem; padding: 1.2rem; background: var(--te-surface); border: 1px solid var(--te-border); border-radius: var(--te-r-md); }
    .te-thankyou__lines { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
    .te-thankyou__line { display: flex; justify-content: space-between; align-items: baseline; gap: 0.85rem; font-size: 0.92rem; }
    .te-thankyou__line-title { color: var(--te-text-1); }
    .te-thankyou__line-qty { color: var(--te-text-3); font-size: 0.82rem; margin-left: 0.4rem; }
    .te-thankyou__line-price { font-weight: 700; color: var(--te-text-1); }
    .te-thankyou__ctas { display: inline-flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center; margin-top: 1.2rem; }

    /* ============================================================
       Checkout (Phase L) — single-page Shopify-style flow.
       Five collapsible accordion sections + sticky right-rail
       order summary. Two-column layout > 980px, single column
       on mobile with the summary stacking above the form.
    ============================================================ */
    .te-block-checkout { padding-block: clamp(1.5rem, 4vw, 2.75rem); background: var(--te-surface, #fff); min-height: 70vh; }
    .te-checkout__inner {
      max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem;
      display: grid; grid-template-columns: 1fr; gap: 1.4rem;
    }
    @media (min-width: 980px) {
      .te-checkout__inner { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); gap: 3.5rem; align-items: start; }
    }

    .te-checkout__main { display: flex; flex-direction: column; gap: 0; }
    .te-checkout__head { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1.4rem; }
    .te-checkout__heading { font-size: clamp(1.5rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--te-text-1); }
    .te-checkout__signin { color: var(--te-text-3); font-size: 0.9rem; }
    .te-checkout__signin a { color: var(--te-accent); text-decoration: none; font-weight: 600; }
    .te-checkout__signin a:hover { text-decoration: underline; }

    /* Section — flat, Shopify-style: no card chrome, just a hairline
       between steps. The accordion behaviour is unchanged; only the
       chrome around it is gone. */
    .te-checkout__section {
      background: transparent;
      border: none;
      border-top: 1px solid var(--te-border, rgba(0,0,0,0.09));
      border-radius: 0;
    }
    .te-checkout__section:first-of-type { border-top: none; }
    .te-checkout__section.is-expanded { box-shadow: none; }
    .te-checkout__section-head {
      display: flex; align-items: center; gap: 0.75rem;
      padding: 1.25rem 0 0.5rem;
      cursor: pointer;
      user-select: none;
    }
    /* Shopify labels its steps by name, not by number. */
    .te-checkout__section-num { display: none; }
    .te-checkout__section-title { flex: 1; min-width: 0; }
    .te-checkout__section-title h2 { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--te-text-1); letter-spacing: -0.01em; }
    .te-checkout__section-summary {
      font-size: 0.85rem; color: var(--te-text-3, #6b6864);
      margin: 0.15rem 0 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Shopify shows the completed value in plain grey, no tick. */
    .te-checkout__section-edit {
      background: transparent; border: none; cursor: pointer;
      color: var(--te-accent, #e67e22); font-weight: 600; font-size: 0.85rem;
      padding: 0.35rem 0.5rem;
    }
    .te-checkout__section-edit:hover { text-decoration: underline; }
    .te-checkout__section.is-expanded .te-checkout__section-edit { display: none; }

    .te-checkout__section-body {
      display: none;
      padding: 0 0 1.5rem;
      animation: te-checkout-fade-in 240ms var(--te-ease, ease);
    }
    .te-checkout__section.is-expanded .te-checkout__section-body { display: block; }
    @keyframes te-checkout-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

    /* Form bits */
    .te-checkout__label {
      display: block;
      font-size: 0.82rem; font-weight: 500;
      letter-spacing: 0; text-transform: none;
      color: var(--te-text-3, #6b6864);
      margin: 0.75rem 0 0.3rem;
    }
    .te-checkout__input {
      width: 100%;
      padding: 0.78rem 0.9rem;
      border: 1px solid var(--te-border, rgba(0,0,0,0.22));
      border-radius: 8px;
      font: inherit; font-size: 0.95rem;
      color: var(--te-text-1, #111);
      background: var(--te-surface, #fff);
      outline: none;
      transition: border-color 180ms, box-shadow 180ms;
    }
    .te-checkout__input:focus {
      border-color: var(--te-accent, #e67e22);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--te-accent) 45%, transparent);
    }
    .te-checkout__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .te-checkout__col { min-width: 0; }
    .te-checkout__hint { font-size: 0.78rem; color: var(--te-text-3, #6b6864); margin: 0.35rem 0 0; }
    .te-checkout__checkbox { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--te-text-2, #333); margin-top: 0.8rem; }
    .te-checkout__legend { font-size: 0.85rem; color: var(--te-text-3, #6b6864); margin-bottom: 0.4rem; }
    .te-checkout__error { color: #b91c1c; font-size: 0.85rem; background: rgba(220,38,38,0.08); padding: 0.55rem 0.7rem; border-radius: 8px; margin-top: 0.5rem; }
    .te-checkout__empty { color: var(--te-text-3, #6b6864); font-size: 0.9rem; padding: 0.8rem; background: rgba(0,0,0,0.03); border-radius: 9px; }
    .te-checkout__empty a { color: var(--te-accent); font-weight: 600; }

    /* Submit / CTA */
    .te-checkout__submit {
      margin-top: 1.25rem;
      width: 100%;
      padding: 1rem 1.2rem;
      background: var(--te-accent, #e67e22);
      color: #fff; border: none;
      border-radius: 8px;
      font-weight: 600; font-size: 1rem;
      cursor: pointer;
      transition: background 200ms;
      box-shadow: none;
    }
    .te-checkout__submit:hover { background: var(--te-accent-strong, #d35400); }
    .te-checkout__submit:disabled { opacity: 0.6; cursor: progress; transform: none; }
    /* Whole-page block: no payment gateway enabled, so the checkout renders
       this panel instead of the accordion. */
    .te-checkout__blocked {
      max-width: 620px;
      margin: 0 auto;
      padding: clamp(2.5rem, 6vw, 4rem) 1.25rem;
      text-align: center;
    }
    .te-checkout__blocked-title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; margin: 0 0 0.75rem; }
    .te-checkout__blocked-text { font-size: 1rem; color: var(--te-text-2, #55535b); margin: 0 0 1.25rem; line-height: 1.6; }
    .te-checkout__blocked-owner {
      font-size: 0.85rem;
      line-height: 1.6;
      color: #7a4a1d;
      background: #fdf4ec;
      border: 1px solid #f5c6a5;
      border-radius: 12px;
      padding: 0.85rem 1rem;
      margin: 0 0 1.5rem;
    }
    .te-checkout__blocked-owner a { color: inherit; font-weight: 700; }
    .te-checkout__blocked-back { font-size: 0.9rem; font-weight: 700; color: var(--te-accent); text-decoration: none; }
    .te-checkout__submit--secondary {
      background: transparent;
      color: var(--te-accent, #e67e22);
      border: 1px solid var(--te-accent, #e67e22);
      box-shadow: none;
      margin-top: 0;
      width: auto;
      padding: 0.6rem 1rem;
      font-size: 0.85rem;
    }
    .te-checkout__submit--secondary:hover { background: color-mix(in srgb, var(--te-accent) 8%, transparent); color: var(--te-accent, #e67e22); }
    .te-checkout__submit--primary { font-size: 1rem; padding: 1rem 1.4rem; }

    .te-checkout__link {
      background: transparent; border: none; cursor: pointer;
      color: var(--te-accent, #e67e22); font-weight: 600; font-size: 0.85rem;
    }
    .te-checkout__link:hover { text-decoration: underline; }

    /* Address book cards */
    .te-checkout__addresses { display: flex; flex-direction: column; gap: 0; margin-bottom: 0.9rem; }
    .te-checkout__address-card {
      display: flex; align-items: flex-start; gap: 0.75rem;
      padding: 1rem;
      border: 1px solid var(--te-border, rgba(0,0,0,0.22));
      border-radius: 0;
      cursor: pointer;
      transition: border-color 200ms, background 200ms;
      background: var(--te-surface, #fff);
      margin-top: -1px;
    }
    .te-checkout__address-card:first-child { border-radius: 8px 8px 0 0; margin-top: 0; }
    .te-checkout__address-card:last-child { border-radius: 0 0 8px 8px; }
    .te-checkout__address-card:first-child:last-child { border-radius: 8px; }
    .te-checkout__address-card:has(input:checked) {
      border-color: var(--te-accent, #e67e22);
      background: color-mix(in srgb, var(--te-accent) 5%, transparent);
      position: relative; z-index: 1;
      box-shadow: 0 0 0 1px var(--te-accent, #e67e22);
    }
    .te-checkout__address-card input[type="radio"] { margin-top: 0.25rem; accent-color: var(--te-accent, #e67e22); }
    .te-checkout__address-body { flex: 1; min-width: 0; }
    .te-checkout__address-name { font-weight: 700; color: var(--te-text-1); display: inline-flex; align-items: center; gap: 0.5rem; }
    .te-checkout__address-line { font-size: 0.86rem; color: var(--te-text-2, #333); margin-top: 0.15rem; }
    .te-checkout__address-meta { color: var(--te-text-3, #6b6864); font-size: 0.78rem; }
    .te-checkout__chip {
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
      padding: 0.18rem 0.5rem; border-radius: 999px;
      background: color-mix(in srgb, var(--te-accent) 12%, transparent); color: var(--te-accent, #e67e22);
      text-transform: uppercase;
    }
    /* Shopify shows the address fields plainly — no dashed box around them. */
    .te-checkout__new-address {
      margin-top: 0.4rem;
      padding: 0;
      border: none;
      border-radius: 0;
    }
    .te-checkout__new-address legend { display: none; }

    /* Shown until the address is complete enough to resolve a zone. */
    .te-checkout__shipping-placeholder {
      font-size: 0.9rem; color: var(--te-text-3, #6b6864);
      padding: 1rem;
      border: 1px solid var(--te-border, rgba(0,0,0,0.22));
      border-radius: 8px;
      margin: 0;
    }

    /* Radio rows (shipping methods + payment gateways).
       Shopify groups these into one bordered box rather than separate
       cards, so the rows collapse their shared borders and only the
       outer corners round. */
    .te-checkout__radio {
      display: flex; align-items: center; gap: 0.85rem;
      padding: 1rem;
      border: 1px solid var(--te-border, rgba(0,0,0,0.22));
      border-radius: 0;
      cursor: pointer;
      transition: border-color 200ms, background 200ms;
      background: var(--te-surface, #fff);
      margin: -1px 0 0;
    }
    .te-checkout__radio:first-of-type { border-radius: 8px 8px 0 0; margin-top: 0; }
    .te-checkout__radio:last-of-type { border-radius: 0 0 8px 8px; }
    .te-checkout__radio:first-of-type:last-of-type { border-radius: 8px; }
    .te-checkout__radio:has(input:checked) {
      border-color: var(--te-accent, #e67e22);
      background: color-mix(in srgb, var(--te-accent) 5%, transparent);
      /* lifts the selected row so its accent border isn't clipped by
         the neighbour it overlaps */
      position: relative; z-index: 1;
      box-shadow: 0 0 0 1px var(--te-accent, #e67e22);
    }
    .te-checkout__radio input[type="radio"] { accent-color: var(--te-accent, #e67e22); }
    .te-checkout__radio-body { flex: 1; min-width: 0; }
    .te-checkout__radio-title { font-weight: 700; color: var(--te-text-1); font-size: 0.95rem; }
    .te-checkout__radio-sub { font-size: 0.82rem; color: var(--te-text-3, #6b6864); margin-top: 0.15rem; }
    .te-checkout__radio-price { font-weight: 700; color: var(--te-text-1, #111); font-size: 0.9rem; flex-shrink: 0; }

    /* Promo panels (gift card + coupon) */
    /* The page is white now, so the tinted panel that used to separate these
       from the background just reads as a stray grey box. */
    .te-checkout__promo {
      padding: 0;
      background: transparent;
      border-radius: 0;
      margin-bottom: 1.1rem;
    }
    .te-checkout__promo-title { font-size: 0.82rem; font-weight: 500; color: var(--te-text-3); text-transform: none; letter-spacing: 0; margin-bottom: 0.4rem; }
    .te-checkout__promo-applied { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.9rem; color: var(--te-text-1); }
    .te-checkout__inline-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .te-checkout__inline-form .te-checkout__input { flex: 1; min-width: 160px; }

    .te-checkout__review-copy { font-size: 0.9rem; color: var(--te-text-2, #333); margin-bottom: 0.75rem; line-height: 1.55; }

    /* Sticky right-rail order summary. On desktop Shopify paints the whole
       right half of the page grey, edge to edge — the box-shadow spread does
       the painting and the clip-path stops it bleeding over the left column
       (it starts halfway across the gutter). */
    .te-checkout__summary {
      background: var(--te-surface-2, #f5f5f5);
      border: none;
      border-radius: var(--te-r-md, 12px);
      padding: 1.4rem;
      position: sticky; top: 84px;
      align-self: start;
      max-height: calc(100vh - 104px);
      overflow-y: auto;
    }
    @media (min-width: 980px) {
      /* clips both axes, so the 100vmax spread below stops at the section
         instead of painting over the footer. `clip` (not `hidden`) keeps the
         summary's position:sticky resolving against the viewport. */
      .te-block-checkout { overflow: clip; }
      .te-checkout__summary {
        border-radius: 0;
        padding: 1.4rem 0 1.4rem 1.75rem;
        box-shadow: 0 0 0 100vmax var(--te-surface-2, #f5f5f5);
        clip-path: inset(-100vh -100vw -100vh -1.75rem);
      }
    }
    .te-checkout__summary-heading { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--te-text-1); }
    .te-checkout__summary-lines { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.95rem; padding-bottom: 0.95rem; border-bottom: 1px solid var(--te-border); }
    .te-checkout__summary-line { display: flex; align-items: center; gap: 0.75rem; }
    .te-checkout__summary-line-img {
      position: relative;
      width: 52px; height: 52px;
      flex-shrink: 0;
      border-radius: 9px;
      background: rgba(0,0,0,0.05);
      overflow: hidden;
    }
    .te-checkout__summary-line-img img { width: 100%; height: 100%; object-fit: cover; }
    .te-checkout__summary-line-qty {
      position: absolute; top: -7px; right: -7px;
      width: 22px; height: 22px;
      background: var(--te-text-1, #111); color: #fff;
      font-size: 0.7rem; font-weight: 700;
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .te-checkout__summary-line-body { flex: 1; min-width: 0; }
    .te-checkout__summary-line-title { font-weight: 600; color: var(--te-text-1); font-size: 0.88rem; line-height: 1.3; }
    .te-checkout__summary-line-meta { font-size: 0.76rem; color: var(--te-text-3, #6b6864); margin-top: 0.15rem; }
    .te-checkout__summary-line-price { font-weight: 700; color: var(--te-text-1); font-size: 0.88rem; flex-shrink: 0; }
    .te-checkout__summary-empty { font-size: 0.88rem; color: var(--te-text-3); }

    .te-checkout__summary-totals { display: flex; flex-direction: column; gap: 0.5rem; }
    .te-checkout__summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; font-size: 0.9rem; color: var(--te-text-2, #333); margin: 0; }
    .te-checkout__summary-row dt { font-weight: 500; }
    .te-checkout__summary-row dd { margin: 0; font-weight: 600; }
    .te-checkout__summary-row--discount dd { color: #15803d; }
    .te-checkout__summary-row--total {
      margin-top: 0.5rem; padding-top: 0.75rem;
      border-top: 1px solid var(--te-border);
      font-size: 1.05rem;
      color: var(--te-text-1, #111);
    }
    .te-checkout__summary-row--total dt, .te-checkout__summary-row--total dd { font-weight: 800; }
    .te-checkout__summary-back { display: inline-block; margin-top: 1rem; font-size: 0.85rem; color: var(--te-text-3); text-decoration: none; }
    .te-checkout__summary-back:hover { color: var(--te-accent); }

    @media (max-width: 768px) {
      .te-checkout__row { grid-template-columns: 1fr; }
      .te-checkout__summary { position: static; max-height: none; }
      .te-checkout__section-head { padding: 1.1rem 0 0.4rem; gap: 0.6rem; }
      .te-checkout__section-body { padding: 0 0 1.25rem; }
    }

    /* ── Themes v2: shared pieces every design builds on ─────────────── */
    .te-eyebrow {
      margin: 0 0 .75rem;
      font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
      color: var(--te-text-2, #555);
    }
    .te-btn {
      display: inline-flex; align-items: center; gap: .55rem;
      font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer;
      transition: background var(--te-dur) var(--te-ease), color var(--te-dur) var(--te-ease), border-color var(--te-dur) var(--te-ease);
    }
    .te-btn--solid {
      padding: .8rem 1.4rem; border: 1px solid transparent; border-radius: var(--theme-btn-radius, 8px);
      background: var(--theme-btn-bg, var(--te-accent)); color: var(--theme-btn-text, #fff);
    }
    .te-btn--outline {
      padding: .7rem 1.1rem; border: 1px solid currentColor; border-radius: var(--theme-btn-radius, 8px);
      background: transparent; color: inherit;
    }
    .te-btn--outline:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
    .te-btn--link { padding: .2rem 0; border: 0; background: none; color: inherit; }
    .te-btn--link span { transition: transform var(--te-dur) var(--te-ease); }
    .te-btn--link:hover span { transform: translateX(4px); }
    .te-hero__eyebrow {
      margin: 0 0 1rem; font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    }

    /* Section heading: title, optional text beside it, optional link. */
    .te-section-head {
      display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2.5rem;
      flex-wrap: wrap; margin-bottom: 2.5rem;
    }
    .te-section-head__title {
      margin: 0; font-family: var(--theme-font-heading, inherit);
      font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.15; color: var(--te-text-1);
    }
    .te-section-head__text { margin: 0; max-width: 44rem; color: var(--te-text-3, #666); line-height: 1.6; }
    .te-section-head--with-text .te-section-head__title { flex: 0 1 auto; }
    .te-section-head__link { margin-left: auto; font-size: .9rem; font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; }
    .te-section-head__link:hover { text-decoration: underline; }

    /* Product card: was-price and % off. */
    .te-product-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
    .te-product-card__compare { color: var(--te-text-4, #999); font-size: .88em; font-weight: 400; }
    .te-badge--discount { background: #fff; color: var(--theme-color-secondary, #1d26a2); border-radius: 2px; }

    /* Slider: a horizontally scrolling grid with arrows and dots. */
    .te-carousel { position: relative; }
    .te-carousel[data-te-carousel] > [data-te-carousel-track] {
      display: grid; grid-auto-flow: column; grid-template-columns: none;
      grid-auto-columns: calc((100% - (var(--te-cols, 4) - 1) * var(--te-grid-gap, 1.5rem)) / var(--te-cols, 4));
      overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
      scrollbar-width: none; overscroll-behavior-x: contain;
    }
    .te-carousel[data-te-carousel] > [data-te-carousel-track]::-webkit-scrollbar { display: none; }
    .te-carousel[data-te-carousel] > [data-te-carousel-track] > * { scroll-snap-align: start; }
    .te-carousel [data-te-carousel-track].te-cols-1 { --te-cols: 1; }
    .te-carousel [data-te-carousel-track].te-cols-2 { --te-cols: 2; }
    .te-carousel [data-te-carousel-track].te-cols-3 { --te-cols: 3; }
    .te-carousel [data-te-carousel-track].te-cols-4 { --te-cols: 4; }
    .te-carousel [data-te-carousel-track].te-cols-5 { --te-cols: 5; }
    .te-carousel__arrow {
      position: absolute; top: 40%; z-index: 3; display: grid; place-items: center;
      width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
      background: var(--te-surface, #fff); color: var(--te-text-1, #111); box-shadow: var(--te-shadow-sm);
    }
    .te-carousel__arrow:disabled { opacity: .35; cursor: default; }
    .te-carousel__arrow--prev { left: -20px; }
    .te-carousel__arrow--next { right: -20px; }
    .te-carousel:not([data-te-carousel]) .te-carousel__arrow,
    .te-carousel:not([data-te-carousel]) .te-carousel__dots { display: none; }
    .te-carousel__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.75rem; }
    .te-carousel__dots:empty { display: none; }
    .te-carousel__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--te-border-strong, #ccc); cursor: pointer; }
    .te-carousel__dot[aria-current="true"] { background: var(--te-text-1, #111); }
    .te-carousel[data-te-carousel].is-static .te-carousel__arrow { display: none; }

    /* Promo banners */
    .te-block-promo-banners { padding: 3rem 0; }
    .te-promo__grid {
      width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 2rem;
      display: grid; gap: 1.5rem; grid-template-columns: repeat(var(--promo-cols, 1), minmax(0, 1fr));
    }
    .te-promo--cols-2 { --promo-cols: 2; }
    .te-promo--cols-3 { --promo-cols: 3; }
    .te-promo {
      position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
      min-height: var(--promo-h, 380px); background: var(--te-surface-muted, #f3f3f2); border-radius: var(--te-r-md, 12px);
    }
    .te-promo--h-sm { --promo-h: 240px; }
    .te-promo--h-md { --promo-h: 380px; }
    .te-promo--h-lg { --promo-h: 560px; }
    .te-promo__media { position: relative; min-height: 100%; }
    .te-promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .te-promo__body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .25rem; padding: 2.5rem; }
    .te-promo__heading { margin: 0 0 .75rem; font-family: var(--theme-font-heading, inherit); font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1.15; font-weight: 600; }
    .te-promo__text { margin: 0 0 1.5rem; max-width: 30rem; line-height: 1.6; opacity: .8; }
    .te-promo--img-right .te-promo__media { order: 2; }
    .te-promo--img-cover .te-promo { grid-template-columns: 1fr; }
    .te-promo--img-cover .te-promo__media { position: absolute; inset: 0; }
    .te-promo--img-cover .te-promo__body { max-width: 60%; }
    .te-promo:not(:has(.te-promo__media)) { grid-template-columns: 1fr; }
    .te-promo--cols-2 .te-promo, .te-promo--cols-3 .te-promo { grid-template-columns: 1fr; }
    .te-promo--cols-2 .te-promo__media, .te-promo--cols-3 .te-promo__media { position: absolute; inset: 0; }
    .te-promo--cols-2 .te-promo__body, .te-promo--cols-3 .te-promo__body { max-width: 62%; }
    .te-promo--text-light .te-promo { color: #fff; }
    .te-promo--w-full .te-promo__grid { max-width: none; padding-inline: 0; }
    .te-promo--w-full .te-promo { border-radius: 0; }
    /* Product tabs */
    .te-block-product-tabs { padding: 4rem 0; }
    .te-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; margin: 0 0 2.5rem; }
    .te-tabs__tab {
      padding: .65rem 1.6rem; border: 0; border-radius: var(--theme-btn-radius, 8px); background: transparent;
      font: inherit; font-weight: 600; color: inherit; cursor: pointer;
    }
    .te-tabs__tab[aria-selected="true"] { background: var(--theme-btn-bg, #111); color: var(--theme-btn-text, #fff); }
    .te-block-product-tabs .te-product-grid__items { display: grid; gap: var(--te-grid-gap, 1.5rem); }
    /* Image with text: two overlapping images */
    .te-twi__img-col--pair { position: relative; padding: 0 0 28% 0; }
    .te-twi__img-col--pair .te-twi__img-wrap { width: 78%; }
    .te-twi__img-col--pair .te-twi__img-wrap--second { position: absolute; right: 0; bottom: 0; }
    .te-twi__img-col--pair .te-twi__img { aspect-ratio: 3 / 2; object-fit: cover; }
    .te-promo__head { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 2rem; }

    /* Testimonials */
    .te-block-testimonials { padding: 4.5rem 0; }
    .te-testimonials__inner { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 2rem; text-align: center; }
    .te-testimonials__heading { margin-bottom: 2rem; }
    .te-testimonials__items { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .te-carousel[data-te-carousel] > .te-testimonials__items { --te-cols: 1; }
    .te-testimonial { margin: 0; padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
    .te-testimonial__mark { font-family: Georgia, serif; font-size: 4rem; line-height: .6; color: var(--te-accent); }
    .te-testimonial__quote { margin: 0; max-width: 46rem; font-size: 1.1rem; line-height: 1.7; }
    .te-testimonial__who { display: flex; align-items: center; gap: .75rem; text-align: left; }
    .te-testimonial__who small { display: block; color: var(--te-text-3, #666); font-size: .8rem; }
    .te-testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
    .te-stars { color: #f5a524; letter-spacing: .12em; font-size: .9rem; }
    .te-stars__off { color: var(--te-border-strong, #ccc); }

    /* Logo strip */
    .te-block-logo-strip { padding: 2.5rem 0; }
    .te-logos__inner { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 2rem; }
    .te-logos__heading { margin: 0 0 1.25rem; text-align: center; font-weight: 600; color: var(--te-text-3, #666); }
    .te-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
    .te-logos img { display: block; height: 32px; width: auto; max-width: 140px; object-fit: contain; }
    .te-logos--gray img { filter: grayscale(1); opacity: .75; transition: opacity var(--te-dur), filter var(--te-dur); }
    .te-logos--gray img:hover { filter: none; opacity: 1; }

    /* Stats */
    .te-block-stats { padding: 3.5rem 0; background: var(--stats-bg, var(--te-surface-muted, #f3f3f2)); }
    .te-stats__inner { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 2rem; text-align: center; }
    .te-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
    .te-stat { margin: 0; padding: 0 1rem; }
    .te-stat + .te-stat { border-left: 1px solid var(--te-border-mid, #ddd); }
    .te-stat__value { font-family: var(--theme-font-heading, inherit); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; color: var(--te-accent); }
    .te-stat__label { margin: .25rem 0 0; font-weight: 600; }
    .te-stat__text { margin: .5rem auto 0; max-width: 20rem; font-size: .88rem; color: var(--te-text-3, #666); }

    /* Blog post kicker (category — date) */
    .te-post-card__kicker { display: block; margin-bottom: .5rem; font-size: .78rem; color: var(--te-text-3, #666); }
    .te-post-card__kicker b { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
    .te-post-card__byline { display: none; }
    .te-post-card__readmore, .te-product-card__cta,
    .te-collection-card__count, .te-collection-card__cta { display: none; }
    .te-collection-card__count b { font-weight: inherit; }
    .te-blog-posts__foot { display: flex; justify-content: center; margin-top: 2.5rem; }
    .te-product-grid__foot { display: none; }
    .te-block-blog-posts { padding: 4.5rem 0; }

    /* Image-with-text quote */
    .te-twi__quote { margin: 2.5rem 0 0; padding-top: 2.5rem; border-top: 1px solid var(--te-border-mid, #ddd); }
    .te-twi__quote blockquote { margin: .9rem 0; line-height: 1.7; color: var(--te-text-2, #444); }
    .te-twi__quote figcaption { font-weight: 600; }

    @media (max-width: 900px) {
      .te-promo, .te-promo--cols-2 .te-promo__grid, .te-promo__grid { grid-template-columns: 1fr; }
      .te-promo__media { position: relative !important; min-height: 240px; order: 0 !important; }
      .te-promo__body { max-width: none !important; }
      .te-carousel[data-te-carousel] > [data-te-carousel-track] { --te-cols: 2 !important; }
      .te-carousel__arrow { display: none; }
      .te-stat + .te-stat { border-left: 0; }
    }
    @media (max-width: 480px) {
      .te-carousel[data-te-carousel] > [data-te-carousel-track] { grid-auto-columns: 78%; }
      .te-carousel[data-te-carousel] > .te-testimonials__items { grid-auto-columns: 100%; }
    }

    /* Button styles on the older hero / image-with-text buttons. */
    .te-hero__cta.te-btn--outline, .te-hero__cta.te-btn--link {
      background: transparent; box-shadow: none; color: inherit; transform: none;
    }
    .te-hero__cta.te-btn--outline { border: 1px solid currentColor; border-radius: var(--theme-btn-radius, 8px); padding: .75rem 1.25rem; }
    .te-hero__cta.te-btn--link { padding: .25rem 0; border-radius: 0; }
    .te-hero__cta.te-btn--outline:hover, .te-hero__cta.te-btn--link:hover { background: transparent; box-shadow: none; transform: none; }
    .te-twi__cta.te-btn--outline, .te-twi__cta.te-btn--link { background: transparent; color: inherit; transform: none; }
    .te-twi__cta.te-btn--outline { border: 1px solid currentColor; padding: .7rem 1.1rem; }
    .te-twi__cta.te-btn--link { padding: 0; }
    .te-twi__cta.te-btn--outline:hover, .te-twi__cta.te-btn--link:hover { background: color-mix(in srgb, currentColor 6%, transparent); transform: none; }

    /* Category page with filters (category_products show_filters) */
    .te-catalog { padding: 2.5rem 0 4rem; }
    .te-catalog__inner { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
    .te-catalog__group { margin-bottom: 2rem; }
    .te-catalog__title { margin: 0 0 .9rem; font-weight: 600; font-size: .95rem; }
    .te-catalog__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
    .te-catalog__cats a { display: flex; align-items: center; gap: .55rem; color: var(--te-text-2, #333); text-decoration: none; font-size: .88rem; }
    .te-catalog__cats a small { margin-left: auto; color: var(--te-text-4, #999); }
    .te-catalog__check { width: 14px; height: 14px; flex: none; border: 1px solid var(--te-border-strong, #bbb); border-radius: 3px; }
    .te-catalog__cats a.is-current { color: var(--te-text-1, #111); font-weight: 600; }
    .te-catalog__cats a.is-current .te-catalog__check { background: var(--te-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center/10px no-repeat; border-color: var(--te-accent); }
    .te-catalog__price-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; align-items: end; }
    .te-catalog__price-row label { display: grid; gap: .25rem; font-size: .75rem; color: var(--te-text-3, #666); }
    .te-catalog__price-row input { width: 100%; min-width: 0; padding: .45rem .5rem; border: 1px solid var(--te-border-strong, #ccc); border-radius: 4px; font: inherit; font-size: .85rem; }
    .te-catalog__price-row button { padding: .5rem .7rem; border: 0; border-radius: 4px; background: var(--te-surface-muted, #eee); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
    /* Horizontal filters (filter_layout "horizontal"): a row of dropdowns
       above full-width products. More specific than a design's own
       .te-catalog__inner columns, so the sidebar track never comes back. */
    .te-catalog.te-catalog--horizontal .te-catalog__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .te-hfilters { border-bottom: 1px solid var(--te-border-mid, rgba(0,0,0,.11)); margin-bottom: 1.25rem; }
    .te-hfilters__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 2rem; padding-bottom: .9rem; }
    .te-hfilter { position: relative; }
    .te-hfilter > summary {
      display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 0; list-style: none; cursor: pointer;
      font-size: .86rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--te-text-1, #111);
    }
    .te-hfilter > summary::-webkit-details-marker { display: none; }
    .te-hfilter > summary::after {
      content: ""; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
      border-top: 5px solid currentColor; transition: transform var(--te-dur, 200ms);
    }
    .te-hfilter[open] > summary::after { transform: rotate(180deg); }
    .te-hfilter__n {
      display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
      background: var(--te-accent); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: 0;
    }
    .te-hfilter__panel {
      position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 230px; max-height: 340px; overflow: auto;
      padding: 1rem 1.1rem; background: var(--te-surface, #fff); color: var(--te-text-1, #111);
      border: 1px solid var(--te-border-mid, rgba(0,0,0,.11)); border-radius: var(--te-r-sm, 8px); box-shadow: var(--te-shadow-md);
    }
    .te-hfilter__panel .te-catalog__price-row { min-width: 260px; }
    @media (max-width: 640px) {
      .te-hfilters__bar { gap: .1rem 1.25rem; }
      .te-hfilter { position: static; }
      .te-hfilters { position: relative; }
      .te-hfilter__panel { left: 0; right: 0; min-width: 0; }
    }
    .te-catalog__banner { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 240px; margin-bottom: 1.5rem; border-radius: var(--te-r-md, 12px); background: var(--te-surface-muted, #eef); }
    .te-catalog__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
    .te-catalog__banner-body { position: relative; max-width: 50%; padding: 2rem 2.5rem; }
    .te-catalog__banner h2 { margin: 0 0 .75rem; font-family: var(--theme-font-heading, inherit); font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.2; }
    .te-catalog__banner p { margin: 0; color: var(--te-text-3, #555); line-height: 1.6; }
    .te-catalog__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
    .te-catalog__count { margin: 0; font-size: .85rem; color: var(--te-text-2, #333); }
    .te-catalog__sort select { padding: .4rem .5rem; border: 0; background: transparent; font: inherit; font-size: .85rem; cursor: pointer; }
    .te-catalog__active { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1.25rem; font-size: .82rem; }
    .te-catalog__active a { color: var(--te-text-2, #333); text-decoration: none; }
    .te-catalog__active a:hover { text-decoration: line-through; }
    .te-pager { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: 3rem; }
    .te-pager a { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 .5rem; border: 1px solid var(--te-border-strong, #ccc); color: var(--te-text-1, #111); text-decoration: none; font-size: .85rem; }
    .te-pager a[aria-current="page"] { background: var(--te-text-1, #111); border-color: var(--te-text-1, #111); color: #fff; }
    .te-pager .te-pager__step { border-color: transparent; }
    @media (max-width: 900px) {
      .te-catalog__inner { grid-template-columns: 1fr; }
      .te-catalog__side { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1.5rem; }
      .te-catalog__banner-body { max-width: none; background: rgba(255,255,255,.8); }
    }

    /* Blog with sidebar */
    .te-blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 3.5rem; align-items: start; }
    .te-blog-layout--detail { max-width: 1280px; margin-inline: auto; padding: 2.5rem 2rem 4rem; }
    .te-blog-layout--detail .te-bd__inner { max-width: none; margin: 0; padding: 0; }
    .te-blog-side { position: sticky; top: 120px; display: grid; gap: 2rem; }
    .te-blog-side__search { display: flex; border: 1px solid var(--te-border-strong, #ccc); }
    .te-blog-side__search input { flex: 1; min-width: 0; border: 0; padding: .6rem .8rem; font: inherit; font-size: .85rem; outline: none; background: transparent; }
    .te-blog-side__search button { border: 0; background: none; padding: 0 .75rem; cursor: pointer; color: inherit; }
    .te-blog-side__title { margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--te-border-mid, #ddd); font-weight: 600; font-size: .95rem; }
    .te-blog-side__posts, .te-blog-side__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
    .te-blog-side__posts a { display: grid; grid-template-columns: 64px 1fr; gap: .75rem; align-items: center; text-decoration: none; color: inherit; font-size: .85rem; font-weight: 600; line-height: 1.35; }
    .te-blog-side__posts img, .te-blog-side__thumb { width: 64px; height: 64px; object-fit: cover; background: var(--te-surface-muted, #eee); }
    .te-blog-side__posts small { display: block; font-weight: 400; font-size: .72rem; color: var(--te-text-3, #666); margin-bottom: .2rem; }
    .te-blog-side__cats { gap: .55rem; }
    .te-blog-side__cats a { color: inherit; text-decoration: none; font-size: .88rem; }
    .te-blog-side__cats a::before { content: '›'; margin-right: .5rem; }
    .te-post-card__more { display: inline-block; margin-top: .9rem; font-weight: 600; font-size: .88rem; color: var(--te-text-1, #111); }
    .te-bd__author { display: flex; gap: 1.25rem; align-items: center; margin-top: 3rem; padding: 1.75rem; background: var(--te-surface-muted, #f3f3f2); }
    .te-bd__author-mark { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--te-accent); color: #fff; font-weight: 700; font-size: 1.25rem; }
    .te-bd__author p { margin: .35rem 0 0; font-size: .88rem; color: var(--te-text-3, #666); line-height: 1.6; }
    @media (max-width: 900px) {
      .te-blog-layout { grid-template-columns: 1fr; }
      .te-blog-side { position: static; }
    }
    .te-blog-list__grid.te-cols-1 { --cols: 1; }
    .te-blog--with-side .te-post-card { display: block; }
    .te-blog--with-side .te-post-card__img { width: 100%; height: auto; }
    .te-blog--with-side .te-post-card__meta { display: block; }
    .te-product-card__kicker { display: none; }

    /* ── Menu board (restaurant / café menu) ───────────────────────────── */
    .te-block-menu-board { padding: 4rem 0; }
    .te-menu__inner { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 2rem; }
    .te-menu__nav {
      position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: .4rem .5rem;
      margin: 0 0 2.5rem; padding: .75rem 0; background: var(--te-surface, #fff);
    }
    .te-menu__nav-link {
      padding: .45rem 1rem; border: 1px solid var(--te-border-mid, #ddd); border-radius: 999px;
      color: inherit; text-decoration: none; font-size: .85rem; font-weight: 600; white-space: nowrap;
      transition: background var(--te-dur), color var(--te-dur), border-color var(--te-dur);
    }
    .te-menu__nav-link:hover { background: var(--te-accent); border-color: var(--te-accent); color: #fff; }
    .te-menu__courses { display: grid; gap: 3.5rem; }
    .te-menu__course { scroll-margin-top: 7rem; }
    .te-menu__course-head { margin-bottom: 1.75rem; text-align: center; }
    .te-menu__course-title {
      margin: 0; font-family: var(--theme-font-heading, inherit);
      font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: .02em;
    }
    .te-menu__course-note { margin: .5rem 0 0; font-size: .9rem; color: var(--te-text-3, #666); }
    .te-menu__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
    .te-menu__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; }
    .te-menu__item-img-wrap {
      display: block; width: 88px; height: 88px; flex: none; overflow: hidden;
      border-radius: var(--te-r-sm, 8px); background: var(--te-surface-muted, #f2f2f2);
    }
    .te-menu__item-img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .te-menu__item-body { min-width: 0; }
    .te-menu__item-line { display: flex; align-items: baseline; gap: .5rem; }
    .te-menu__item-name {
      flex: 1 1 auto; min-width: 0;
      font-family: var(--theme-font-heading, inherit); font-weight: 600; font-size: 1.05rem;
      color: inherit; text-decoration: none;
    }
    .te-menu__item-name:hover { color: var(--te-accent); }
    .te-menu__leader { display: none; }
    .te-menu--leader .te-menu__leader {
      display: block; flex: 1 1 auto; min-width: 1.5rem; height: 0;
      border-bottom: 1px dotted var(--te-border-strong, #c9c3b8); transform: translateY(-.25rem);
    }
    .te-menu__item-price { font-weight: 600; white-space: nowrap; color: var(--te-accent); }
    .te-menu__item-was { margin-right: .35rem; font-weight: 400; color: var(--te-text-4, #999); }
    .te-menu__item-desc { margin: .4rem 0 0; font-size: .9rem; line-height: 1.6; color: var(--te-text-3, #666); }
    .te-menu__item-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 0; padding: 0; }
    .te-menu__tag {
      padding: .18rem .55rem; border: 1px solid var(--te-border-mid, #ddd); border-radius: 999px;
      font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--te-text-3, #666);
    }
    .te-menu__item.is-special .te-menu__item-name::after {
      content: 'Special'; margin-left: .55rem; padding: .1rem .45rem; border-radius: 3px;
      background: var(--te-accent); color: #fff; font-size: .62rem; letter-spacing: .08em;
      text-transform: uppercase; vertical-align: middle;
    }
    .te-menu__item-cta { display: inline-block; margin-top: .75rem; padding: .45rem 1rem; font-size: .8rem; }
    .te-menu--no-img .te-menu__item { grid-template-columns: minmax(0, 1fr); }
    .te-menu--two-column .te-menu__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem; }
    .te-menu--cards .te-menu__items { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .te-menu--cards .te-menu__item {
      grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden;
      border: 1px solid var(--te-border-mid, #e6e0d6); border-radius: var(--te-r-md, 12px);
      background: var(--te-surface, #fff);
    }
    .te-menu--cards .te-menu__item-img-wrap { width: 100%; height: 180px; border-radius: 0; }
    .te-menu--cards .te-menu__item-body { padding: 1.1rem 1.25rem 1.35rem; }
    @media (max-width: 760px) {
      .te-menu--two-column .te-menu__items, .te-menu--cards .te-menu__items { grid-template-columns: minmax(0, 1fr); }
      .te-menu__item-img-wrap { width: 68px; height: 68px; }
      .te-menu__nav { overflow-x: auto; flex-wrap: nowrap; }
      /* On a phone the dish name owns its line and the price sits under it —
         side by side, a long name and a was-price collide. */
      .te-menu--leader .te-menu__leader { display: none; }
      .te-menu__item-line { flex-wrap: wrap; row-gap: .15rem; }
      .te-menu__item-name { flex: 1 1 100%; }
      .te-menu__item-price { font-size: .95rem; }
    }

    /* ── Opening hours ─────────────────────────────────────────────────── */
    /* ── Cart drawer + cart count (every theme) ─────────────────────────
       chrome/_cart_drawer.html. Slides in from the right on add to cart and
       on the header's cart icon. Surface / text / border tokens, so each
       theme paints it in its own colours. */
    .te-header__cart { position: relative; }
    .te-cart-count {
      position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px;
      display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
      border-radius: 999px; background: var(--te-accent); color: #fff;
      font-size: .66rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
      box-shadow: 0 0 0 2px var(--te-surface, #fff); pointer-events: none;
    }
    .te-cart-count[hidden] { display: none; }
    /* The classic header's cart is an accent pill: a light badge reads on it. */
    .te-header__cart:not(.ed-icon) .te-cart-count { background: #fff; color: var(--te-accent); box-shadow: 0 0 0 2px var(--te-accent); }
    .te-cart-drawer { position: fixed; inset: 0; z-index: 1100; }
    .te-cart-drawer[hidden] { display: none; }
    .te-cart-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity 240ms var(--te-ease); }
    .te-cart-drawer.is-open .te-cart-drawer__backdrop { opacity: 1; }
    .te-cart-drawer__panel {
      position: absolute; top: 0; right: 0; bottom: 0; width: min(26rem, 92vw);
      display: flex; flex-direction: column; background: var(--te-surface, #fff); color: var(--te-text-1, #111);
      box-shadow: -12px 0 40px rgba(0, 0, 0, .18); transform: translateX(100%); transition: transform 260ms var(--te-ease);
    }
    .te-cart-drawer.is-open .te-cart-drawer__panel { transform: translateX(0); }
    .te-cart-drawer__panel.is-busy .te-cart-drawer__lines { opacity: .55; pointer-events: none; }
    .te-cart-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem .75rem; }
    .te-cart-drawer__title { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: inherit; }
    .te-cart-drawer__close { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -.5rem; border: 0; border-radius: var(--te-r-sm, 8px); background: none; color: inherit; cursor: pointer; }
    .te-cart-drawer__close:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
    .te-cart-drawer__notice { margin: 0 1.5rem .5rem; padding: .55rem .8rem; border-radius: var(--te-r-sm, 8px); font-size: .82rem;
      background: color-mix(in srgb, var(--te-accent) 14%, transparent); }
    .te-cart-drawer__notice[hidden] { display: none; }
    .te-cart-drawer__cols { display: flex; justify-content: space-between; margin: 0 1.5rem; padding: .5rem 0;
      border-bottom: 1px solid var(--te-border-mid, rgba(0,0,0,.1)); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
    .te-cart-drawer__cols[hidden] { display: none; }
    .te-cart-drawer__body { flex: 1; overflow-y: auto; padding: 0 1.5rem; -webkit-overflow-scrolling: touch; }
    .te-cart-drawer__loading { margin: 1.5rem 0; font-size: .9rem; opacity: .75; }
    .te-cart-drawer__loading a { color: inherit; }
    .te-cart-drawer__empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem 0; text-align: center; }
    .te-cart-drawer__empty p { margin: 0; opacity: .75; }
    .te-cart-drawer__lines { list-style: none; margin: 0; padding: 0; }
    .te-cart-drawer__line { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 1rem; padding: 1.25rem 0;
      border-bottom: 1px solid var(--te-border, rgba(0,0,0,.07)); align-items: start; }
    .te-cart-drawer__img { display: block; width: 80px; aspect-ratio: 1; border-radius: var(--te-r-sm, 8px); overflow: hidden;
      background: color-mix(in srgb, currentColor 5%, transparent); }
    .te-cart-drawer__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .te-cart-drawer__info { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
    .te-cart-drawer__name { font-size: .9rem; font-weight: 600; line-height: 1.35; color: inherit; text-decoration: none; }
    a.te-cart-drawer__name:hover { text-decoration: underline; }
    .te-cart-drawer__variant { font-size: .78rem; opacity: .7; }
    .te-cart-drawer__price { font-size: .85rem; opacity: .85; font-variant-numeric: tabular-nums; }
    .te-cart-drawer__row { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; }
    .te-cart-drawer__qty { display: inline-flex; align-items: center; border: 1px solid var(--te-border-strong, rgba(0,0,0,.2)); border-radius: var(--te-r-sm, 8px); }
    .te-cart-drawer__qty button { width: 34px; height: 34px; border: 0; background: none; color: inherit; font-size: 1.05rem; cursor: pointer; }
    .te-cart-drawer__qty button:disabled { opacity: .35; cursor: not-allowed; }
    .te-cart-drawer__qty span { min-width: 2rem; text-align: center; font-size: .88rem; font-variant-numeric: tabular-nums; }
    .te-cart-drawer__remove { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--te-r-sm, 8px); background: none; color: inherit; opacity: .7; cursor: pointer; }
    .te-cart-drawer__remove:hover { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }
    .te-cart-drawer__total { font-size: .9rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .te-cart-drawer__foot { padding: 1rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--te-border-mid, rgba(0,0,0,.1)); display: grid; gap: .6rem; }
    .te-cart-drawer__foot[hidden] { display: none; }
    .te-cart-drawer__subtotal { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
    .te-cart-drawer__subtotal strong { font-size: 1.15rem; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
    .te-cart-drawer__note { margin: 0; font-size: .78rem; opacity: .7; }
    .te-cart-drawer__checkout { display: flex; justify-content: center; width: 100%; box-sizing: border-box; }
    .te-cart-drawer__view { justify-self: center; font-size: .82rem; color: inherit; opacity: .8; }
    body.te-cart-open { position: fixed; width: 100%; }
    @media (max-width: 480px) {
      .te-cart-drawer__head, .te-cart-drawer__foot { padding-inline: 1.1rem; }
      .te-cart-drawer__body { padding-inline: 1.1rem; }
      .te-cart-drawer__cols, .te-cart-drawer__notice { margin-inline: 1.1rem; }
      .te-cart-drawer__line { grid-template-columns: 64px minmax(0, 1fr); }
      .te-cart-drawer__img { width: 64px; }
      .te-cart-drawer__total { grid-column: 2; }
    }

    /* ── Form (Forms app) ───────────────────────────────────────────
       Borders and fills come from currentColor so the same section reads
       right on light and dark themes; the button is the theme's own. */
    .te-block-form { padding: 4rem 0; background: var(--form-bg, transparent); }
    .te-form__inner { width: 100%; max-width: 720px; margin-inline: auto; padding-inline: 2rem; display: grid; gap: 2rem; }
    .te-form--split .te-form__inner { max-width: 1080px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: start; }
    .te-form--stacked.te-form--align-center .te-form__intro { text-align: center; }
    .te-form--stacked.te-form--align-right .te-form__intro { text-align: right; }
    .te-form__lead { margin: .75rem 0 0; color: var(--te-text-3, #666); line-height: 1.7; }
    .te-form { display: grid; gap: 1.5rem; }
    .te-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
    .te-form__field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
    .te-form__field--half { grid-column: auto; }
    .te-form__label { font-size: .875rem; font-weight: 600; padding: 0; letter-spacing: .01em; }
    .te-form__req { color: #d14343; }
    .te-block-form .te-form__input {
      width: 100%; box-sizing: border-box; padding: .85rem 1rem; font: inherit; font-size: .95rem; color: inherit;
      /* A 4%-of-currentColor tint was invisible against an ivory page: the
         fields looked like empty space. Sit them on the surface instead. */
      background: var(--te-surface, #fff);
      border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: var(--te-r-sm, 8px);
      transition: border-color var(--te-dur), box-shadow var(--te-dur), background var(--te-dur);
    }
    .te-block-form .te-form__input:hover { border-color: color-mix(in srgb, currentColor 32%, transparent); }
    .te-block-form textarea.te-form__input { resize: vertical; min-height: 8rem; }
    .te-block-form .te-form__input:focus { outline: none; border-color: var(--te-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--te-accent) 22%, transparent); }
    .te-block-form .te-form__input::placeholder { color: currentColor; opacity: .45; }
    .te-form__set { margin: 0; padding: 0; border: 0; display: grid; gap: .55rem; }
    .te-form__set .te-form__label { margin-bottom: .1rem; }

    /* Choice cards. The whole card is the hit area — on a phone a 1rem radio
       dot is a miss waiting to happen — and auto-fit means four short options
       sit on one row while long ones get a row each, with no per-form config. */
    .te-form__choices {
      display: grid; gap: .5rem;
      grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    }
    .te-form__choice {
      display: flex; align-items: center; gap: .65rem; min-width: 0;
      padding: .75rem .9rem; cursor: pointer;
      font-size: .93rem; line-height: 1.35;
      background: var(--te-surface, #fff);
      border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
      border-radius: var(--te-r-sm, 8px);
      transition: border-color var(--te-dur), background var(--te-dur), box-shadow var(--te-dur);
    }
    .te-form__choice:hover { border-color: color-mix(in srgb, var(--te-accent) 45%, transparent); }
    .te-form__choice-text { min-width: 0; overflow-wrap: anywhere; }

    /* The input stays in the DOM and stays focusable — it is just not what you
       see. Clipping it (not display:none) keeps it announced and tabbable. */
    .te-form__choice input {
      position: absolute; width: 1px; height: 1px; margin: -1px;
      padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .te-form__mark {
      flex: none; width: 1.1rem; height: 1.1rem; display: grid; place-items: center;
      border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
      background: var(--te-surface, #fff);
      transition: border-color var(--te-dur), background var(--te-dur);
    }
    .te-form__mark--radio { border-radius: 50%; }
    .te-form__mark--checkboxes { border-radius: 4px; }
    .te-form__mark::after {
      content: ""; width: .5rem; height: .5rem; border-radius: inherit;
      background: #fff; transform: scale(0); transition: transform var(--te-dur);
    }
    .te-form__mark--checkboxes::after { width: .34rem; height: .62rem; border-radius: 0; background: none;
      border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); margin-top: -2px; }

    /* Adjacent-sibling rules, so the mark reads as checked even where :has()
       does not apply; :has() then lifts the whole card to match. */
    .te-form__choice input:checked + .te-form__mark { border-color: var(--te-accent); background: var(--te-accent); }
    .te-form__choice input:checked + .te-form__mark::after { transform: scale(1); }
    .te-form__choice input:checked + .te-form__mark--checkboxes::after { transform: rotate(45deg) scale(1); }
    .te-form__choice:has(input:checked) {
      border-color: var(--te-accent);
      background: color-mix(in srgb, var(--te-accent) 7%, var(--te-surface, #fff));
      box-shadow: inset 0 0 0 1px var(--te-accent);
    }
    .te-form__choice:has(input:focus-visible) {
      outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--te-accent) 25%, transparent);
    }
    .te-form__check { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; line-height: 1.45; cursor: pointer; }
    .te-form__check input { width: 1.05rem; height: 1.05rem; margin: .15rem 0 0; flex-shrink: 0; accent-color: var(--te-accent); }
    .te-form__help { margin: 0; font-size: .8rem; opacity: .65; }
    .te-form__error { margin: 0; font-size: .82rem; color: #d14343; }
    .te-form__alert { margin: 0; padding: .75rem 1rem; border-radius: var(--te-r-sm, 8px); font-size: .9rem;
      background: color-mix(in srgb, #d14343 12%, transparent); color: inherit; border: 1px solid color-mix(in srgb, #d14343 35%, transparent); }
    .te-form__submit { justify-self: start; min-width: 10rem; justify-content: center; text-align: center; }
    .te-form--align-center.te-form--stacked .te-form__submit { justify-self: center; }
    .te-form__submit[disabled] { opacity: .55; cursor: not-allowed; }
    .te-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .te-form__done { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 2.5rem 1.5rem; text-align: center;
      border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: var(--te-r-md, 12px); }
    .te-form__done[hidden] { display: none; }
    .te-form__done svg { color: var(--te-accent); }
    .te-form__done p { margin: 0; font-size: 1.05rem; line-height: 1.6; }
    .te-form__empty { padding: 2rem; text-align: center; border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
      border-radius: var(--te-r-md, 12px); font-size: .9rem; opacity: .75; }
    @media (max-width: 800px) {
      .te-form--split .te-form__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    }
    @media (max-width: 560px) {
      .te-block-form { padding: 3rem 0; }
      .te-form__inner { padding-inline: 1.25rem; }
      .te-form__grid { grid-template-columns: minmax(0, 1fr); }
      .te-form__choices { grid-template-columns: minmax(0, 1fr); }
      .te-form__submit { justify-self: stretch; }
    }

    .te-block-hours { padding: 4rem 0; background: var(--hours-bg, transparent); }
    .te-hours__inner {
      width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 2rem;
      display: grid; gap: 2.5rem; align-items: center;
    }
    .te-hours--with-img .te-hours__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .te-hours__media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: var(--te-r-md, 12px); display: block; }
    .te-hours__text { margin: .75rem 0 0; color: var(--te-text-3, #666); line-height: 1.7; }
    .te-hours__rows { margin: 1.75rem 0 0; display: grid; gap: .1rem; }
    .te-hours__row { display: flex; align-items: baseline; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--te-border-mid, #e6e0d6); }
    .te-hours__day { margin: 0; font-weight: 600; }
    .te-hours__time { margin: 0 0 0 auto; color: var(--te-text-3, #666); white-space: nowrap; }
    .te-hours__where { margin-top: 1.75rem; }
    .te-hours__where-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; }
    .te-hours__address { margin: 0; line-height: 1.7; color: var(--te-text-3, #666); }
    .te-hours__phone { display: inline-block; margin-top: .5rem; color: inherit; font-weight: 600; }
    .te-hours__cta { display: inline-block; margin-top: 1.75rem; }
    @media (max-width: 760px) {
      .te-hours--with-img .te-hours__inner { grid-template-columns: minmax(0, 1fr); }
    }

/* ── Columns block ──────────────────────────────────────────────────────────
   A layout container: any number of columns, each holding ordinary blocks.
   Widths come from each column's `width` share (--te-col-span), so a 2 beside
   a 1 is twice as wide. Columns stack below the chosen breakpoint. */
.te-block-columns { padding-block: 3rem; }
.te-cols__inner { width: min(100% - 2rem, var(--te-wrap, 1200px)); margin-inline: auto; }
.te-cols__header { margin-bottom: 1.75rem; }
.te-cols__title { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.15; }

.te-cols__row { display: grid; grid-template-columns: 1fr; }
.te-cols__col { min-width: 0; }              /* let children shrink, never overflow */
.te-cols__col > * { margin-block: 0; }

.te-cols__row--gap-sm { gap: 1rem; }
.te-cols__row--gap-md { gap: 2rem; }
.te-cols__row--gap-lg { gap: 3.25rem; }

.te-cols__row--align-start   { align-items: start; }
.te-cols__row--align-center  { align-items: center; }
.te-cols__row--align-stretch { align-items: stretch; }

/* Side by side only above the chosen breakpoint; below it they stack, which is
   the safe default on a phone regardless of how many columns were added. */
@media (min-width: 520px)  { .te-cols__row--stack-sm { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
@media (min-width: 860px)  { .te-cols__row--stack-md { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
@media (min-width: 1100px) { .te-cols__row--stack-lg { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

/* A column with an explicit width takes that share of the row. */
@media (min-width: 520px) {
  .te-cols__row--stack-sm > .te-cols__col { grid-column: span var(--te-col-span, 1); }
}
@media (min-width: 860px) {
  .te-cols__row--stack-md > .te-cols__col { grid-column: span var(--te-col-span, 1); }
}
@media (min-width: 1100px) {
  .te-cols__row--stack-lg > .te-cols__col { grid-column: span var(--te-col-span, 1); }
}

/* Blocks nested in a column shed their own outer section padding — the column
   owns the rhythm, otherwise every child adds another 3rem. */
.te-cols__col > .te-block { padding-block: 0; }
.te-cols__col .te-text__inner,
.te-cols__col .te-image-grid__inner { width: 100%; margin-inline: 0; padding-inline: 0; }

/* A column set to equal height passes that height down: an image nested in a
   column fills it instead of floating in a short box beside taller text. */
.te-cols__row--align-stretch > .te-cols__col { display: flex; flex-direction: column; }
.te-cols__row--align-stretch > .te-cols__col > .te-block { flex: 1 1 auto; display: flex; flex-direction: column; }
/* The whole chain has to stretch, or the grid row stays content-height and a
   100%-tall cell resolves against nothing. */
.te-cols__row--align-stretch .te-image-grid__inner { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.te-cols__row--align-stretch .te-image-grid__items { flex: 1 1 auto; display: grid; min-height: 0; grid-auto-rows: 1fr; align-items: stretch; }
.te-cols__row--align-stretch .te-image-grid__cell { height: 100%; min-height: 0; }
.te-cols__row--align-stretch .te-image-grid__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* Image grid spacing is settable per block (Layout > Space above and below).
   Falls back to the 4rem the block has always used when unset. */
.te-block-image-grid {
  padding-top: var(--te-ig-pt, 4rem);
  padding-bottom: var(--te-ig-pb, 4rem);
  padding-left: var(--te-ig-pl, 0);
  padding-right: var(--te-ig-pr, 0);
}
/* Inside a column the column owns the rhythm, so the block adds none. */
/* Inside a column the column owns the rhythm, so nothing is added
   unless the block asks for it. */
.te-cols__col > .te-block-image-grid {
  padding-top: var(--te-ig-pt, 0);
  padding-bottom: var(--te-ig-pb, 0);
}


/* ── Stats: heading spacing and a settable number per row ──────────────────
   The heading carried no bottom margin, so it sat directly on the numbers. */
.te-block-stats .te-section-head__title { margin-bottom: 2.25rem; }

/* "Fit" keeps the old auto behaviour; a number pins the row so five items
   don't reflow into an uneven second row. */
.te-stats[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.te-stats[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.te-stats[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.te-stats[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* The divider belongs between items in a row, not down the left edge of the
   first item on a new row — that stray rule is what showed beside item 05. */
.te-stats[data-cols="2"] .te-stat:nth-child(2n + 1),
.te-stats[data-cols="3"] .te-stat:nth-child(3n + 1),
.te-stats[data-cols="4"] .te-stat:nth-child(4n + 1),
.te-stats[data-cols="5"] .te-stat:nth-child(5n + 1) { border-left: 0; }

@media (max-width: 720px) {
  .te-stats[data-cols] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .te-stats[data-cols] .te-stat { border-left: 0; }
}


/* "Space above and below" set to 0 should mean flush. The inner wrapper still
   carried its own side gutter, which showed as bands either side of the image
   inside a column. Vertical spacing stays under the block's own control. */
/* Hand the side gutter over ONLY when the merchant sets a left/right value.
   The old selector matched --te-ig-p* — so setting just top/bottom padding
   silently stripped the page gutter and ran the photos off the screen. */
.te-block-image-grid[style*="--te-ig-pl"] .te-image-grid__inner,
.te-block-image-grid[style*="--te-ig-pr"] .te-image-grid__inner { padding-inline: 0; }


/* ── Case studies ─────────────────────────────────────────────────────────
   A project reads as a story: what it was, what it became, what we built. */
.te-block-cases { padding-block: 4rem; background: var(--te-surface); }
.te-cases__inner { width: min(100% - 2rem, var(--te-wrap, 1200px)); margin-inline: auto; }
.te-cases__title { margin: 0 0 .75rem; }
.te-cases__intro { margin: 0 0 1.75rem; max-width: 46rem; color: var(--te-text-2, #555); }

.te-cases__filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.te-cases__filter { padding: .45rem .95rem; font: inherit; font-size: .85rem; cursor: pointer;
  border: 1px solid var(--te-border, #ddd); border-radius: 999px; background: none;
  color: inherit; transition: background 120ms, color 120ms, border-color 120ms; }
.te-cases__filter[aria-selected="true"] { background: var(--te-accent); border-color: var(--te-accent); color: #fff; }

/* Every case carries its own top rule — including the first, which reads as a
   hairline under the filter bar. Exempting the first with :first-of-type broke
   as soon as a filter hid it: the rule reappeared mid-list. */
.te-case { padding-block: 2.5rem; border-top: 1px solid var(--te-border, #e6e6e6); }
.te-case__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: 1.25rem; }
.te-case__title { margin: 0; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem); }
.te-case__place { font-size: .9rem; color: var(--te-text-3, #777); }
.te-case__place::before { content: "— "; }

.te-case__pair { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.te-case__shot { position: relative; margin: 0; }
.te-case__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 3px; }
.te-case__tag { position: absolute; top: .6rem; left: .6rem; padding: .2rem .55rem;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(0,0,0,.72); color: #fff; border-radius: 2px; }
.te-case__shot--after .te-case__tag { background: var(--te-accent); }

/* Slider variant — one wide frame instead of the two-up pair. Everything
   else (.te-ba__clip, the handle, the range) is the before/after block's,
   reused as-is so there is one wipe implementation on the storefront. */
.te-case__wipe { aspect-ratio: 16 / 10; border-radius: 3px; }

.te-case__made { margin-top: 1.4rem; }
.te-case__madeh { margin: 0 0 .5rem; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--te-text-3, #777); }
.te-case__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .45rem .5rem; }
.te-case__list li { padding: .3rem .7rem; font-size: .87rem;
  border: 1px solid var(--te-border, #e2e2e2); border-radius: 999px; }

.te-case__more { display: inline-block; margin-top: 2.5rem; font-weight: 600;
  color: var(--te-accent); text-decoration: none; }
.te-case__more:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 760px) {
  .te-case__pair { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}


/* ── Contact details ──────────────────────────────────────────────────────
   Under the quote form. Whole card is the link, so a thumb finds it. */
.te-block-contact { padding-block: 3.5rem; background: var(--te-surface); }
.te-contact__inner { width: min(100% - 2rem, var(--te-wrap, 1200px)); margin-inline: auto; max-width: 900px; }
.te-contact__title { margin: 0 0 .6rem; text-align: center; }
.te-contact__intro { margin: 0 auto 2rem; max-width: 40rem; text-align: center; color: var(--te-text-3, #666); }

.te-contact__list { list-style: none; margin: 0; padding: 0;
  display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.te-contact__card {
  height: 100%; display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.1rem; text-decoration: none; color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--te-r-md, 12px);
  transition: border-color var(--te-dur), transform var(--te-dur), box-shadow var(--te-dur);
}
.te-contact__card:hover { border-color: var(--te-accent);
  transform: translateY(-2px); box-shadow: var(--te-shadow-xs); }
.te-contact__icon { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: 50%; color: var(--te-accent);
  background: color-mix(in srgb, var(--te-accent) 12%, transparent); }
.te-contact__text { display: grid; gap: .15rem; min-width: 0; }
.te-contact__label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--te-text-3, #777); }
.te-contact__value { font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .te-contact__list { grid-template-columns: minmax(0, 1fr); }
}


/* ── Header at phone width ────────────────────────────────────────────────
   brand (103px, no shrink) + a 2rem gap either side + cart + CTA + burger
   came to 415px inside a 350px bar, so every page scrolled sideways. The
   pieces are all needed; they just have to be smaller here. */
@media (max-width: 560px) {
  .te-header__inner { gap: .75rem; }
  .te-header__actions { gap: .35rem; min-width: 0; }
  .te-header__cta {
    padding: .45rem .7rem;
    font-size: .72rem;
    letter-spacing: .02em;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 380px) {
  /* Below this the CTA cannot shrink further without becoming unreadable.
     The burger still reaches every page, contact included. */
  .te-header__cta { display: none; }
}

/* Product grid "Columns on phones" (block.props.mobile_columns: 1 or 2).
   Unset = the defaults above (2 per row to 480px, 1 below). The .te-block
   prefix outranks .te-cols-* and the carousel's --te-cols override. */
@media (max-width: 640px) {
  .te-block .te-product-grid__items.te-mcols-1 { grid-template-columns: 1fr; }
  .te-block .te-product-grid__items.te-mcols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .te-block .te-carousel[data-te-carousel] > [data-te-carousel-track].te-mcols-1 { --te-cols: 1 !important; }
  .te-block .te-carousel[data-te-carousel] > [data-te-carousel-track].te-mcols-2 { --te-cols: 2 !important; }
}
}