/*
Theme Name: Teddy Transfers
Theme URI: https://teddytransfers.com
Author: Teddy Transfers
Description: Custom block theme for Teddy Transfers — DTF transfers, gang sheets, and apparel printing. Built from scratch for full creative control.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
License: Proprietary
Text Domain: teddy-transfers
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, e-commerce
*/

/* ─── Riffic display font (uploaded to /wp-content/uploads/fonts/) ─── */
/* Force Riffic onto the display CSS variable in case theme.json caching
   gets stuck with the old Fredoka value. */
:root, body {
    --wp--preset--font-family--display: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    /* brand-dark is now black — derived "#6E4A40" was off-palette. */
    --wp--preset--color--brand-dark: #000000 !important;
}
/* Belt-and-braces: every heading + display surface uses Riffic directly. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.tt-how-title, .tt-cat-name, .tt-product-name, .tt-tool-card h3,
.tt-section-h2, .tt-newsletter-h, .tt-footer-newsletter__h {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
}
/* Accordions stay in Karla — Riffic is too chunky to scan as a question. */
.tt-faq-item > summary {
    font-family: 'Karla', system-ui, sans-serif !important;
    font-weight: 700 !important;
}

@font-face { font-family: 'Riffic'; font-style: normal; font-weight: 300; font-display: swap; src: url('/wp-content/uploads/fonts/riffic-light-webfont.woff') format('woff'); }
@font-face { font-family: 'Riffic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/riffic-book-webfont.woff') format('woff'); }
@font-face { font-family: 'Riffic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/riffic-medium-webfont.woff') format('woff'); }
@font-face { font-family: 'Riffic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/wp-content/uploads/fonts/riffic-semibold-webfont.woff') format('woff'); }
@font-face { font-family: 'Riffic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/fonts/riffic-bold-webfont.woff') format('woff'); }
@font-face { font-family: 'Riffic'; font-style: normal; font-weight: 800; font-display: swap; src: url('/wp-content/uploads/fonts/riffic-black-webfont.woff') format('woff'); }
@font-face { font-family: 'Riffic'; font-style: normal; font-weight: 900; font-display: swap; src: url('/wp-content/uploads/fonts/riffic-ultrabold-webfont.woff') format('woff'); }

/*
 * The Site Editor / theme.json drives the styling. Anything that needs to
 * stay outside theme.json's reach (e.g. animations, complex layout
 * tweaks specific to the brand) goes here.
 */

/* ─────────────────────────────────────────────────────────────────
   SITE HEADER — full custom (replaces the default wp:navigation).
   Three rows: announcement bar, logo+utility, primary nav.
   Sticky on scroll, mega menus on hover, mobile drawer on hamburger.
   ───────────────────────────────────────────────────────────────── */

/* The template-part block emits `<header tagName="header">` which then
   wraps our wp:html `<header class="tt-site-header">` inside it — two
   nested <header> elements. `position: sticky` on the inner element only
   sticks relative to that outer wrapper, which is just the height of its
   own contents → so sticky never actually engages on scroll. Collapse the
   outer wrapper with `display: contents` so the inner header becomes a
   direct child of `.wp-site-blocks` and sticks against the page scroll. */
body > .wp-site-blocks > header:not(.tt-site-header) {
    display: contents;
}
.tt-site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 1px 0 rgba(170,111,99,0.10); }
.tt-site-header * { box-sizing: border-box; }
/* While the mobile drawer is open, body has `overflow: hidden` which destroys
   the scroll context that `position: sticky` anchors against — the header would
   otherwise drop to its natural document position and disappear above the
   viewport if the user opened the drawer mid-scroll. Flip the header to fixed
   so it stays pinned to the viewport while the drawer is up. */
body.tt-drawer-open .tt-site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    /* Z-index ABOVE the mobile drawer backdrop (z:150) and drawer
       itself (z:200) so the logo + X button stay fully bright while
       the drawer is open — without this the rgba(0,0,0,0.45) backdrop
       washes over the header area too. */
    z-index: 220 !important;
}

/* ─── Condensed header on scroll ───────────────────────────────────
   Triggered by JS adding `.is-condensed` once scrollY ≥ 80.
   In condensed mode the header collapses to a SINGLE row:
       [ Logo  |  Primary nav (mega menus)  |  Builder · Account · Cart ]
   • Announcement bar collapses to 0
   • Outline utility pills (Track / Membership / Rewards) hide; the
     Builder LOGIN pill, account icon, and cart stay
   • Logo shrinks ~30%
   • Mega menus reposition against the header so they still span full
     viewport width despite the nav sitting in the middle grid column
   Implementation uses CSS grid on `.tt-site-header` itself with
   `display: contents` on the inner utility row so logo + utilities
   participate as direct grid items alongside `.tt-nav`. */
.tt-announce {
    overflow: hidden;
    /* Disable scroll-anchoring during the height animation. Without this
       Chrome/Firefox try to keep the user's viewport content stable as the
       announce bar grows/shrinks — which fires synthetic scroll events
       that can re-trigger the condense toggle and flicker. */
    overflow-anchor: none;
    transition: max-height .42s cubic-bezier(0.22, 1, 0.36, 1),
                padding-top .42s cubic-bezier(0.22, 1, 0.36, 1),
                padding-bottom .42s cubic-bezier(0.22, 1, 0.36, 1),
                opacity .28s ease-out;
    max-height: 60px;
}
/* The header itself transitions box-shadow + padding so the visual
   change reads as a gentle settle rather than a snap. */
.tt-site-header {
    transition: box-shadow .42s cubic-bezier(0.22, 1, 0.36, 1);
}
.tt-site-header.is-condensed {
    display: grid;
    /* Equal 1fr side columns guarantee the nav (auto, middle) sits
       optically centered on the page regardless of how wide the
       utilities cluster is vs the logo. */
    grid-template-columns: 1fr auto 1fr;
    /* Pin the (collapsing) announce bar to its own row that spans all
       three columns. Without this it auto-places into the logo cell
       and the text shifts left + a thin brown band shows mid-scroll.
       Rows auto-size to content so max-height can still animate smoothly. */
    grid-template-areas:
        "announce announce announce"
        "logo nav utilities";
    align-items: center;
    column-gap: clamp(12px, 2vw, 28px);
    padding: 8px clamp(16px, 4vw, 40px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.tt-site-header.is-condensed .tt-logo { justify-self: start; }
.tt-site-header.is-condensed .tt-utilities { justify-self: end; }
.tt-site-header.is-condensed .tt-announce {
    grid-area: announce;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    /* Belt-and-suspenders against the brown sliver: also hide via
       visibility so paints from sub-pixel rounding don't leak through. */
    visibility: hidden;
    transition: max-height .42s cubic-bezier(0.22, 1, 0.36, 1),
                padding-top .42s cubic-bezier(0.22, 1, 0.36, 1),
                padding-bottom .42s cubic-bezier(0.22, 1, 0.36, 1),
                opacity .18s ease-out,
                visibility 0s linear .18s;
}
/* Let the inner utility row's children (logo + utilities) flow into
   the header's grid so the nav can sit between them on one line. */
.tt-site-header.is-condensed .tt-header-row--utility {
    display: contents;
}
.tt-site-header.is-condensed .tt-logo { grid-area: logo; }
.tt-site-header.is-condensed .tt-utilities { grid-area: utilities; }
.tt-site-header.is-condensed .tt-nav {
    grid-area: nav;
    border-top: 0;
    border-bottom: 0;
    min-width: 0;
}
.tt-site-header.is-condensed .tt-nav-list {
    /* No longer a positioning context — mega menus now position
       against the header itself so they keep their full width. */
    position: static;
    padding: 0;
    margin: 0;
    max-width: none;
    justify-content: center;
}
/* Mega menu spans full header width in condensed mode (top:100% still
   resolves against the header since it's the nearest positioned
   ancestor — header is position:sticky). */
.tt-site-header.is-condensed .tt-mega {
    left: 0;
    right: 0;
}
.tt-logo img { transition: height .42s cubic-bezier(0.22, 1, 0.36, 1); }
.tt-site-header.is-condensed .tt-logo img,
body .tt-site-header.is-condensed .tt-logo img { height: 46px !important; }
@media (max-width: 720px) {
    .tt-site-header.is-condensed .tt-logo img,
    body .tt-site-header.is-condensed .tt-logo img { height: 36px !important; }
}
/* Outline + filled utility pills fade + collapse rather than snap-disappear
   so the rearrangement feels gentle. Keep them in the DOM (with width 0
   and opacity 0) so the right-side icons don't visually jolt left. */
.tt-util-btn--outline,
.tt-util-btn--filled {
    transition: opacity .28s ease-out,
                max-width .42s cubic-bezier(0.22, 1, 0.36, 1),
                padding .42s cubic-bezier(0.22, 1, 0.36, 1),
                margin .42s cubic-bezier(0.22, 1, 0.36, 1),
                border-width .42s cubic-bezier(0.22, 1, 0.36, 1);
    max-width: 220px;
    overflow: hidden;
}
.tt-site-header.is-condensed .tt-util-btn--outline,
.tt-site-header.is-condensed .tt-util-btn--filled {
    opacity: 0;
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    border-width: 0;
    pointer-events: none;
}
.tt-util-btn--builder { transition: padding .42s cubic-bezier(0.22, 1, 0.36, 1), font-size .42s cubic-bezier(0.22, 1, 0.36, 1); }
.tt-site-header.is-condensed .tt-util-btn--builder {
    padding: 7px 12px;
    font-size: 12.5px;
}
.tt-site-header.is-condensed .tt-util-btn--builder svg,
.tt-site-header.is-condensed .tt-util-builder-logo { width: 14px; height: 14px; }
/* Condensed header: the black builder pills drop to just "DTF" / "UV"
   so the single-row header reads less crowded once you scroll. Full
   label shows at rest; the short label swaps in when .is-condensed
   engages. The anchor's aria-label keeps the accessible name
   ("DTF Builder" / "UV Builder") stable in both states. */
.tt-builder-lbl__short { display: none; }
.tt-site-header.is-condensed .tt-builder-lbl__full { display: none; }
.tt-site-header.is-condensed .tt-builder-lbl__short { display: inline; }
/* "Sale Items" nav tab — a clean solid-red clearance badge that stands out
   from the (brown/cream) menu. No pseudo-element tip/hole (those rendered as
   a stray white dot + a seam line); just a rounded red pill with bold white
   text. Sizing is !important so the condensed-header nav rules can't reshape
   it on scroll; the shared hover-underline (::after) is removed. */
.tt-nav-link--sale {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    margin: 0 2px !important;
    padding: 6px 14px !important;
    background: #e11d2a !important;
    color: #fff !important;
    font-weight: 800;
    font-size: 12.5px !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(225,29,42,.30);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.tt-nav-link--sale::before,
.tt-nav-link--sale::after { content: none !important; display: none !important; }
.tt-nav-link--sale .tt-caret { display: none !important; }
.tt-nav-link--sale:hover,
.tt-nav-link--sale:focus {
    color: #fff !important;
    background: #c41722 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(225,29,42,.40);
}
/* Center the badge vertically in the nav row. .tt-nav-list is
   align-items:stretch, so each <li> fills the row height; a short badge with
   no centering would ride high. Making the item a centering flex box aligns
   the badge with the other links' text. */
.tt-nav-item--sale { display: flex; align-items: center; }

/* ─── Product-card sale badges ──────────────────────────────────────
   The shop grid uses WooCommerce's BLOCK sale badge
   (.wc-block-components-product-sale-badge, pinned top-RIGHT via
   --align-right) which lands right on the wishlist heart (.tt-card-heart,
   top:12px right:12px). Move it to the top-LEFT and make it a bold red/white
   pill. Also covers the classic .onsale flash (quick view, tucked below the
   "-50%" chip) and the theme's own "-50%" chip (.tt-badge--sale). The heart
   stays clear on the right. */
.tt-badge--sale {
    background: #e11d2a !important;
    color: #fff !important;
    border-color: #e11d2a !important;
    font-weight: 800 !important;
}
/* Block sale badge (shop grid / category archive) — off the heart + restyle. */
.wc-block-components-product-sale-badge,
.wc-block-components-product-sale-badge--align-right,
.wc-block-components-product-sale-badge--align-left {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 4px 11px !important;
    min-width: 0 !important;
    background: #e11d2a !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 6px rgba(225,29,42,.30) !important;
    z-index: 4 !important;
}
.wc-block-components-product-sale-badge__text { color: #fff !important; }
/* Sale ("now") price shown red + bold wherever it appears (grid, single,
   quick view, cart). WooCommerce wraps the discounted price in <ins> and the
   original struck price in <del>; we only recolor the <ins> and drop its
   default underline. */
ins .woocommerce-Price-amount,
ins.woocommerce-Price-amount,
.wc-block-components-product-price__value.is-discounted {
    color: #e11d2a !important;
    font-weight: 800 !important;
}
ins { text-decoration: none !important; background: transparent !important; }
/* Classic .onsale flash (quick view / classic templates) — top-left, tucked
   just below the "-50%" chip so it never overlaps it or the heart. */
.onsale {
    position: absolute !important;
    top: 46px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 4px 11px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: #e11d2a !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    z-index: 4 !important;
}
/* Nav links must never wrap mid-label ("Custom DTF" → "Custom" / "DTF")
   when the grid squeezes the nav cell on mid-width laptops. */
.tt-nav-link { white-space: nowrap; }
.tt-site-header.is-condensed .tt-nav-link {
    padding: 14px 12px;
    font-size: 14px;
}
.tt-site-header.is-condensed .tt-nav-link::after {
    bottom: 6px;
    left: 12px;
    right: 12px;
}
/* (Below 1500px the desktop nav is hidden entirely and the hamburger
   drawer takes over — see the @media (max-width: 1500px) rules above.) */
/* Respect users who prefer reduced motion — snap to the end state. */
@media (prefers-reduced-motion: reduce) {
    .tt-announce,
    .tt-site-header,
    .tt-logo img,
    .tt-util-btn--outline,
    .tt-util-btn--filled,
    .tt-util-btn--builder,
    .tt-nav-link { transition: none !important; }
}

.tt-announce {
    background: var(--wp--preset--color--brand);
    color: #fff;
    text-align: center;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
}
.tt-announce strong { font-weight: 700; }

.tt-header-row { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* Logo + utility row — tighter top/bottom so the icons sit higher */
.tt-header-row--utility {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.tt-logo { display: inline-flex; flex-shrink: 0; }
/* !important defeats WooCommerce's `.woocommerce-page img { height: auto }`
   which lives in wc's stylesheet and would otherwise let the logo render
   at its 1024x472 natural size on shop/product pages. */
.tt-site-header .tt-logo img,
.tt-logo img { display: block !important; height: 56px !important; width: auto !important; }
@media (max-width: 720px) {
    .tt-site-header .tt-logo img,
    .tt-logo img { height: 44px !important; }
}

/* Utility row layout — push to far right; small gaps between items */
.tt-utilities { display: flex; align-items: center; gap: 8px; }

/* Pill BUTTONS — Track Order + Rewards are real CTA-style buttons */
.tt-util-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
    white-space: nowrap;
}
.tt-util-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.tt-util-btn--outline {
    background: transparent;
    color: var(--wp--preset--color--brand);
    border-color: var(--wp--preset--color--brand);
}
.tt-util-btn--outline:hover {
    background: var(--wp--preset--color--brand);
    color: #fff;
    transform: translateY(-1px);
}
.tt-util-btn--filled {
    background: var(--wp--preset--color--brand);
    color: #fff !important;
    border-color: var(--wp--preset--color--brand);
}
.tt-util-btn--filled:hover {
    background: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
    transform: translateY(-1px);
}
/* Buildaur "Builder LOGIN" — black pill so it reads as a distinct
   cross-brand action, with the Buildaur logo on the left. Links to
   buildaur.app/login in a new tab. */
.tt-util-btn--builder {
    background: #000000;
    color: #FFFFFF !important;
    border-color: #000000;
    text-decoration: none !important;
}
.tt-util-btn--builder:hover {
    background: #AA6F63;
    border-color: #AA6F63;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}
.tt-util-builder-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    /* Force the logo to render white on the black pill regardless of
       what color the source PNG has. Drops black source pixels to
       white via filter invert; tweak/remove if your uploaded logo is
       already white-on-transparent. */
    filter: brightness(0) invert(1);
    display: block;
    flex-shrink: 0;
}

/* ICON-ONLY utilities — Login + Cart, no label, smaller footprint */
.tt-util {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px;
    border-radius: 999px;
    color: var(--wp--preset--color--ink);
    text-decoration: none !important;
    transition: background-color .15s ease, transform .12s ease;
    border: 0;
    cursor: pointer;
}
.tt-util .tt-util-icon { display: block; width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
/* Per-icon visual-weight tuning. Cart sits at 36px (user-approved
   reference). Account bumped a touch larger so the bear-in-heart
   reads with a little more presence. */
.tt-util[data-tt-util="login"] .tt-util-icon  { width: 40px; height: 40px; }
.tt-util[data-tt-util="cart"]  .tt-util-icon  { width: 36px; height: 36px; }
.tt-util:hover { background: var(--wp--preset--color--cream); transform: translateY(-1px); }
.tt-util--icon { padding: 4px; }
.tt-util--cart { position: relative; }
.tt-util--cart .tt-cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--wp--preset--color--brand);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid #fff;
    box-sizing: content-box;
    z-index: 2;
}
/* Hide the badge entirely when the cart is empty — no point showing a
   "0" sitting on top of the icon. JS will toggle data-count when items
   are added (or remove the [data-count="0"] attribute). */
.tt-util--cart .tt-cart-count[data-count="0"] { display: none; }
/* Mobile-y narrow widths: collapse Track Order / Rewards to icon-only
   so we don't crowd the row when there's not much horizontal room. */
@media (max-width: 980px) {
    .tt-util-btn span { display: none; }
    .tt-util-btn { padding: 8px; gap: 0; }
}

/* Hamburger — mobile only */
.tt-burger { display: none; padding: 8px; background: transparent; border: 0; cursor: pointer; }
.tt-burger span { display: block; width: 22px; height: 2px; margin: 5px 0; background: var(--wp--preset--color--brand); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
@media (max-width: 1500px) { .tt-burger { display: inline-block; } }
.tt-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tt-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tt-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Primary nav row (mega menus) */
.tt-nav { border-top: 1px solid var(--wp--preset--color--soft-pink); border-bottom: 1px solid var(--wp--preset--color--soft-pink); }
.tt-nav-list {
    display: flex;
    justify-content: center;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 1240px;
    margin: 0 auto;
}
/* No position:relative on .tt-nav-item — we want the mega menu to
   resolve its absolute positioning against .tt-nav-list (full nav
   row width) so the dropdown spans the whole header. */
.tt-nav-item { position: static; }
.tt-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 16px 22px;
    background: transparent;
    border: 0;
    color: var(--wp--preset--color--ink);
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: color .15s ease;
    /* Force identical box height across <button> and <a> variants —
       browsers compute line-height differently for each element type,
       which made dropdown items render 7px shorter than Pricing/Contact.
       Lock both to the same line-height + vertical alignment. */
    line-height: 1;
    height: auto;
    box-sizing: border-box;
    margin: 0;
    vertical-align: middle;
    font: inherit;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    font-weight: 600;
}
.tt-nav-link svg { display: block; }
.tt-nav-link::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 8px;
    height: 2px;
    background: var(--wp--preset--color--brand);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}
.tt-nav-link:hover,
.tt-has-mega:hover .tt-nav-link,
.tt-nav-item.is-active .tt-nav-link { color: var(--wp--preset--color--brand); }
.tt-nav-link:hover::after,
.tt-has-mega:hover .tt-nav-link::after,
.tt-nav-item.is-active .tt-nav-link::after { transform: scaleX(1); }
.tt-caret { width: 10px; height: 7px; transition: transform .2s ease; }
.tt-has-mega .tt-nav-link[aria-expanded="true"] .tt-caret { transform: rotate(180deg); }

/* Items without a dropdown carry an invisible caret SVG (.tt-caret--ghost)
   so they occupy the exact same horizontal box as items with one. Keeps
   the nav row visually balanced, prevents underline length jumping
   between adjacent items. */
/* Non-dropdown items (Pricing, Contact, Home) carry a ghost caret in
   the markup to keep all menu buttons consistent. `visibility: hidden`
   used to reserve its space — which made the hover underline span the
   full text + caret-sized empty slot, so the bar looked too long on
   the right. Switched to `display: none` so the underline now hugs
   just the visible text on those items. */
.tt-caret--ghost { display: none !important; }

/* Mega menu — anchored to nav row (full nav width), so it never
   overflows the viewport regardless of which trigger you hover.
   The wrapping `.tt-nav-list` is `position: relative` for this. */
.tt-nav-list { position: relative; }
.tt-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 28px 32px;
    background: #fff;
    border: 1px solid var(--wp--preset--color--soft-pink);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 24px 60px -16px rgba(170,111,99,0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    /* Closing transitions: 150 ms hover-intent grace before fading,
       then 180 ms fade. Visibility flips at the end so the panel
       stays hit-testable during fade — letting users dart from the
       nav link toward the mega without losing the menu mid-trip.
       (We removed `pointer-events: none` so visibility alone gates
       interactivity — `visibility:hidden` already disables clicks.) */
    transition: opacity .18s ease .15s,
                transform .18s ease .15s,
                visibility 0s linear .33s;
}
/* Invisible bridge above the panel so a cursor crossing the nav's
   border-bottom hairline still hits the mega's bounding box. */
.tt-mega::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}
.tt-has-mega .tt-mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s ease 0s,
                transform .18s ease 0s,
                visibility 0s;
}
.tt-mega-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.tt-mega-col h4,
.tt-mega-feature h4 {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 700;
    font-size: 13px;
    color: var(--wp--preset--color--brand);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 12px;
}
.tt-mega-col a {
    display: block;
    padding: 10px 12px;
    margin: 0 -12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--wp--preset--color--ink);
    transition: background-color .12s ease;
}
.tt-mega-col a:hover { background: var(--wp--preset--color--cream); }
/* Mega-menu link WITH a thumbnail — flex row, small square image on
   the left, title + description stacked on the right. The base anchor
   above already supplies padding + hover background. */
.tt-mega-col a.tt-mega-link--withthumb {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Lock dimensions with !important — shop archive rules
   (`ul.products img:first-of-type { max-width: 78% }`, etc.) were
   leaking onto the mega menu thumbs because both selectors target
   <img> and the shop rule has higher cascade priority via
   !important. Scoping to .tt-mega-link__thumb directly + !important
   on every dimensional rule wins regardless of context. */
.tt-mega-link__thumb {
    width: 96px !important;
    height: 72px !important;
    max-width: 96px !important;
    max-height: 72px !important;
    min-width: 96px !important;
    min-height: 72px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    background: var(--wp--preset--color--cream-light) !important;
    border: 1px solid var(--wp--preset--color--soft-pink) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}
.tt-mega-link__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tt-mega-link__copy strong { margin: 0 0 2px; }
.tt-mega-link__copy span { display: block; }
/* Link titles in mega menu — black/ink so they're easy to scan.
   Section headings (h4) keep brand brown; descriptions stay soft.
   Hover lifts to brand color so the affordance is still visible. */
.tt-mega-col a strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--wp--preset--color--ink);
    margin-bottom: 2px;
    transition: color .12s ease;
}
.tt-mega-col a:hover strong { color: var(--wp--preset--color--brand); }
.tt-mega-col a span { display: block; font-size: 13px; color: var(--wp--preset--color--ink-soft); line-height: 1.45; }

/* Featured promo card inside the mega menu */
.tt-mega-feature {
    background: linear-gradient(135deg, var(--wp--preset--color--soft-pink), var(--wp--preset--color--cream));
    padding: 20px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tt-mega-eyebrow {
    display: inline-block;
    align-self: flex-start;
    background: var(--wp--preset--color--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.tt-mega-feature h4 { font-size: 19px; text-transform: none; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 8px; color: var(--wp--preset--color--brand-dark); }
.tt-mega-feature p { font-size: 13.5px; color: var(--wp--preset--color--ink-soft); line-height: 1.5; margin: 0 0 14px; }
/* Save dropdown — 4-column card grid. Each card is a vertical stack:
   badge → title → description → CTA. Cards link to the matching
   verification page (or /membership/ for the paid tier). */
.tt-mega-grid--save {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
}
.tt-save-card {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px 20px;
    border-radius: 14px;
    background: #fff;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    text-decoration: none !important;
    color: inherit !important;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tt-save-card:hover {
    transform: translateY(-3px);
    border-color: var(--wp--preset--color--brand);
    box-shadow: 0 8px 24px -8px rgba(170, 111, 99, 0.28);
}
.tt-save-card__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--wp--preset--color--cream);
    border-radius: 10px;
    margin-bottom: 6px;
    display: block;
}
.tt-save-card__badge {
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    line-height: 1;
}
.tt-save-card__badge--mil    { background: #1f3a5f; }
.tt-save-card__badge--edu    { background: #6c43e0; }
.tt-save-card__badge--resale { background: #0f766e; }
.tt-save-card__badge--member {
    background: var(--wp--preset--color--brand);
}
.tt-save-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--wp--preset--color--brand-dark);
    line-height: 1.25;
    margin-top: 4px;
}
.tt-save-card__sub {
    font-size: 12.5px;
    color: var(--wp--preset--color--ink-soft);
    line-height: 1.45;
    flex: 1 1 auto; /* push CTA to bottom on tallest card */
}
.tt-save-card__cta {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wp--preset--color--brand);
    letter-spacing: 0.02em;
}
.tt-save-card:hover .tt-save-card__cta { color: var(--wp--preset--color--accent); }
@media (max-width: 980px) {
    .tt-mega-grid--save { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
    .tt-mega-grid--save { grid-template-columns: 1fr !important; }
}

/* Tile-grid variant of the mega menu — 3 columns of big square
   images with a title + one-line subtitle underneath. Used by the
   Wholesale Items dropdown so the catalog reads visually instead of
   as a column list with category headers. */
/* Footer row under a tiles mega-menu — a plain "shop all" link back to the
   parent category. Separate from .tt-mega-cta, which is a filled button used
   inside the flex feature columns and would look heavy under a tile grid. */
.tt-mega-foot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    text-align: center;
}
.tt-mega-foot__link {
    font-weight: 700;
    font-size: 14px;
    color: var(--wp--preset--color--brand) !important;
    text-decoration: none !important;
}
.tt-mega-foot__link:hover { text-decoration: underline !important; }

.tt-mega-grid--tiles {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 22px !important;
}
.tt-mega-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    color: inherit !important;
    padding: 12px;
    border-radius: 14px;
    transition: background-color .15s ease, transform .15s ease;
}
.tt-mega-tile:hover {
    background: var(--wp--preset--color--cream);
    transform: translateY(-2px);
}
.tt-mega-tile__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 12px;
    background: var(--wp--preset--color--cream);
    margin-bottom: 12px;
}
/* Wide graphics (e.g. the Custom Coozies tile) fill the square to the WIDTH
   with object-fit:contain, so they touch the side edges. A little inset gives
   them breathing room without affecting the tall product shots. */
.tt-mega-tile__img--pad { padding: 16px; box-sizing: border-box; }
.tt-mega-tile__title {
    font-weight: 700;
    font-size: 15px;
    color: var(--wp--preset--color--brand-dark);
    margin-bottom: 4px;
}
.tt-mega-tile__sub {
    font-size: 12.5px;
    color: var(--wp--preset--color--ink-soft);
    line-height: 1.4;
}
@media (max-width: 700px) {
    .tt-mega-grid--tiles { grid-template-columns: 1fr !important; }
}
/* Compact tiles — used by menus with more items than the 4-tile Wholesale menu
   (e.g. Premade Transfers has 7), so the whole grid stays visible without
   scrolling the dropdown. Smaller image + tighter type = ~2 short rows. */
.tt-mega-grid--compact { gap: 16px 20px !important; }
.tt-mega-grid--compact .tt-mega-tile { padding: 8px !important; }
.tt-mega-grid--compact .tt-mega-tile__img {
    aspect-ratio: auto !important;
    height: 116px !important;
    margin-bottom: 8px !important;
}
.tt-mega-grid--compact .tt-mega-tile__title { font-size: 14px !important; margin-bottom: 2px !important; }
.tt-mega-grid--compact .tt-mega-tile__sub { font-size: 12px !important; }

/* Image-on-left variant for the featured promo card — used by the
   Custom DTF Builder card so the gang-sheet sticker-roll art sits
   beside the copy at the same size shown on the /shop/ promo row. */
.tt-mega-feature--withimg {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 18px;
}
.tt-mega-feature__img {
    width: 140px;
    flex: 0 0 140px;
    height: auto;
    border-radius: 12px;
    object-fit: contain;
    display: block;
}
.tt-mega-feature__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
@media (max-width: 900px) {
    .tt-mega-feature--withimg { flex-direction: column; align-items: flex-start; }
    .tt-mega-feature__img { width: 100%; flex: 0 0 auto; max-height: 140px; }
}
.tt-mega-cta {
    display: inline-flex;
    align-self: flex-start;
    background: var(--wp--preset--color--brand);
    color: #fff !important;
    text-decoration: none !important;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background-color .15s ease;
}
.tt-mega-cta:hover { background: var(--wp--preset--color--accent); }

/* ─── Mobile drawer ─── */
.tt-mobile-drawer {
    position: fixed;
    /* Start a hair above the calculated header bottom so the header's
       1px box-shadow line (not counted in offsetHeight) doesn't leak the
       page through as a visible sliver. */
    top: calc(var(--tt-header-h, 100px) - 3px);
    right: 0;
    left: 0;
    width: 100vw;
    /* dvh (dynamic viewport height) matches the CURRENTLY-visible
       viewport — collapses with the URL bar shown, expands when it
       hides. Tried svh first (small viewport) but that locks the
       drawer to the smallest-possible height even when the URL bar
       is collapsed, leaving a visible gap below the drawer where
       the page shows through. dvh keeps the drawer flush with the
       real bottom of the viewport at any state. vh kept as the
       fallback for browsers that don't support dvh. */
    height: calc(100vh - var(--tt-header-h, 100px) + 3px);
    height: calc(100dvh - var(--tt-header-h, 100px) + 3px);
    max-height: calc(100dvh - var(--tt-header-h, 100px) + 3px);
    background: var(--wp--preset--color--cream, #FFF8F1);
    box-shadow: 0 -16px 60px -16px rgba(0,0,0,0.10);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 200;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Backdrop also starts a hair above the calculated header bottom so the
   1px shadow line doesn't leak page content through as a visible sliver.
   dvh fallback matches the drawer's so both clip to the same edges
   and the backdrop doesn't end short of the URL-bar area on iOS. */
.tt-mobile-backdrop {
    top: calc(var(--tt-header-h, 100px) - 3px) !important;
    height: calc(100vh - var(--tt-header-h, 100px) + 3px) !important;
    height: calc(100dvh - var(--tt-header-h, 100px) + 3px) !important;
    inset: auto auto 0 0 !important;
    right: 0 !important;
    left: 0 !important;
}
.tt-mobile-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px 24px;
    position: relative;
}
.tt-mobile-drawer__footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 20px;
    background: #fff;
    border-top: 1px solid var(--wp--preset--color--soft-pink);
}
.tt-mobile-drawer[aria-hidden="false"] { transform: translateX(0); }
.tt-mobile-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 150;
}
.tt-mobile-backdrop.is-visible { opacity: 1; pointer-events: auto; }
.tt-mobile-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: var(--wp--preset--color--cream);
    color: var(--wp--preset--color--brand);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}
.tt-mobile-close:hover { background: var(--wp--preset--color--soft-pink); }
.tt-mobile-drawer h4 {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 700;
    font-size: 13px;
    color: var(--wp--preset--color--brand);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 24px 0 8px;
}
.tt-mobile-drawer h4:first-child { margin-top: 8px; }
.tt-mobile-drawer .tt-mobile-section { border-bottom: 1px solid var(--wp--preset--color--soft-pink); padding-bottom: 16px; margin-bottom: 8px; }
.tt-mobile-drawer .tt-mobile-section:last-of-type { border-bottom: 0; }
.tt-mobile-drawer a {
    display: block;
    padding: 9px 12px;
    margin: 0 -12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--wp--preset--color--ink);
    font-size: 15.5px;
    font-weight: 600;
    transition: background .12s ease;
}
.tt-mobile-drawer a:hover { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--brand); }

/* Hide desktop nav row on mobile/tablet/small-laptop; show drawer instead.
   Breakpoint is 1500px: in the condensed (scrolled) single-row state the
   centered nav starts overrunning the logo (~1300px) and grazing the
   DTF/UV pills (~1480px), so we hand off to the hamburger before that. */
@media (max-width: 1500px) {
    .tt-nav { display: none; }
}
@media (min-width: 1501px) {
    .tt-mobile-drawer { display: none; }
}

/* ─── Smooth-scroll for in-page anchors ─── */
html { scroll-behavior: smooth; }

/* ─── Kill the gap between header and the first alignfull section.
   Block themes default to a content padding via theme.json's
   useRootPaddingAwareAlignments. We don't want that empty cream
   strip above the hero on the homepage — main flush against header. */
body.home main.wp-block-group,
body.home .wp-site-blocks > main { padding-top: 0 !important; margin-top: 0 !important; }
.wp-site-blocks > main:first-of-type > .alignfull:first-child,
body.home main > .wp-block-cover:first-child,
body.home main > .alignfull:first-child {
    margin-top: 0 !important;
    padding-top-block-spacing: 0;
}

/* ─── Trust strip — 6 cells of brand icons + tiny label below ─────
   Each icon's source artwork has a different aspect ratio (truck is
   2.5:1, stopwatch is ~1:1). Per-icon height nudges keep their visual
   mass equal, but every cell shares ONE fixed icon-row height so
   all labels start at the exact same Y. Labels also have a min-height
   so multi-line wrapping never makes one label end below another. */
/* GLOBAL FLUSH RULE — no gaps between sections, ever. Every section's
   own padding handles internal breathing room; nothing in between.
   Covers: post-content children, main↔footer, header↔main, and any
   block layout that injects margin-block-start via WP's block-gap. */
.wp-block-post-content > *,
.wp-block-post-content.is-layout-constrained > *,
body > .wp-site-blocks > main,
body > .wp-site-blocks > main > *,
body > .wp-site-blocks > header,
body > .wp-site-blocks > footer,
body.home main + footer,
body main + footer,
main > .wp-block-post-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}
/* And kill any default vertical padding that block themes add to main. */
body > .wp-site-blocks > main { padding-top: 0 !important; padding-bottom: 0 !important; }
.tt-hero { margin-bottom: 0 !important; }

/* ── Blog single: restore readable vertical rhythm ──────────────────
   The GLOBAL FLUSH RULE above zeroes margins on EVERY .wp-block-post-content
   child — intended to stack homepage SECTIONS edge-to-edge, but it also
   collapses the spacing between paragraphs/headings INSIDE an article, which
   reads as "crammed." Re-introduce consistent rhythm for blog content only,
   scoped to .tt-single__content with high specificity + !important so it beats
   the flush rule regardless of source order. */
.tt-single__body-wrap .tt-single__content { font-size: 1.05rem; line-height: 1.75; color: #2b2b2b; }
.tt-single__body-wrap .tt-single__content > * { margin-top: 0 !important; margin-bottom: 1.15em !important; }
.tt-single__body-wrap .tt-single__content > h2 { margin-top: 1.9em !important; margin-bottom: .55em !important; line-height: 1.2; }
.tt-single__body-wrap .tt-single__content > h3 { margin-top: 1.5em !important; margin-bottom: .45em !important; line-height: 1.25; }
.tt-single__body-wrap .tt-single__content > h4 { margin-top: 1.3em !important; margin-bottom: .4em !important; }
.tt-single__body-wrap .tt-single__content > ul,
.tt-single__body-wrap .tt-single__content > ol { margin-bottom: 1.15em !important; padding-left: 1.5em; }
.tt-single__body-wrap .tt-single__content li { margin-bottom: .45em; }
.tt-single__body-wrap .tt-single__content > blockquote,
.tt-single__body-wrap .tt-single__content > figure,
.tt-single__body-wrap .tt-single__content > .wp-block-image { margin-top: 1.6em !important; margin-bottom: 1.6em !important; }
.tt-single__body-wrap .tt-single__content > *:first-child { margin-top: 0 !important; }
.tt-single__body-wrap .tt-single__content > *:last-child { margin-bottom: 0 !important; }

/* ── Blog single: 2-column layout (article + sidebar) ─────────────── */
.tt-single__body-wrap .tt-single__grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 48px; align-items: start; }
@media (max-width: 980px){ .tt-single__body-wrap .tt-single__grid { grid-template-columns: 1fr; gap: 40px; } }
.tt-blog-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 980px){ .tt-blog-side { position: static; } }
.tt-blog-side__card { border: 2px solid var(--wp--preset--color--brand,#c8643c); border-radius: 14px; background: #FFF8F1; padding: 18px; }
.tt-blog-side__cta { text-align: center; }
.tt-blog-side__thumb { display: block; margin: 0 auto 12px; max-width: 100%; max-height: 260px; width: auto; height: auto; border-radius: 10px; }
.tt-blog-side__title { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.25; color: var(--wp--preset--color--brand,#c8643c); }
.tt-blog-side__title--sm { font-size: 1rem; text-align: left; }
.tt-blog-side__text { margin: 0 0 14px; font-size: .9rem; opacity: .8; }
.tt-blog-side__btn { display: inline-block; background: var(--wp--preset--color--brand,#c8643c); color: #fff; font-weight: 700; text-decoration: none; padding: 11px 20px; border-radius: 999px; }
.tt-blog-side__btn:hover { filter: brightness(1.05); }
.tt-blog-side__plist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tt-blog-side__pitem a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.tt-blog-side__pimg { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 8px; background:#F7EBE1; background-size: contain; background-position: center; background-repeat: no-repeat; border: 1px solid rgba(0,0,0,.06); }
.tt-blog-side__pname { display: block; font-weight: 600; font-size: .92rem; line-height: 1.25; }
.tt-blog-side__pcat { display: inline-block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #fff; background: var(--wp--preset--color--brand,#c8643c); padding: 1px 7px; border-radius: 999px; margin: 3px 0; }
.tt-blog-side__pprice { display: block; font-size: .85rem; opacity: .75; }
.tt-blog-side__pprice del { opacity: .6; margin-right: 4px; }

/* ── Blog single: "More Articles" related grid ────────────────────── */
.tt-single__more { padding: 8px clamp(20px,4vw,40px) clamp(48px,6vw,72px); }
.tt-more__head { text-align: center; margin: 0 0 24px; }
.tt-more__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 780px){ .tt-more__grid { grid-template-columns: 1fr; } }
.tt-more__card { display: block; text-decoration: none; color: inherit; border: 1px solid rgba(0,0,0,.1); border-radius: 14px; overflow: hidden; background: #fff; transition: transform .2s ease; }
.tt-more__card:hover { transform: translateY(-3px); }
.tt-more__img { display: block; aspect-ratio: 1/1; background:#F7EBE1; background-size: cover; background-position: center; background-repeat: no-repeat; }
.tt-more__body { display: block; padding: 14px 16px 18px; }
.tt-more__title { display: block; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.tt-more__date { display: block; font-size: .82rem; opacity: .65; }
.tt-more__all { text-align: center; margin: 28px 0 0; }
.tt-more__all a { color: var(--wp--preset--color--brand,#c8643c); font-weight: 700; text-decoration: none; }
/* Global safeguard against horizontal scrollbars from any negative-
   margin breakouts elsewhere in the theme.
   Uses `overflow-x: clip` (not `hidden`) so that `position: sticky` on
   .tt-site-header still works — `hidden` creates a new scroll container
   that traps sticky elements. `clip` does the same horizontal clipping
   without breaking sticky positioning. Falls back to `hidden` in older
   browsers via the first declaration. */
html, body { overflow-x: hidden; overflow-x: clip; }
/* Force the page's top-level template-part wrappers (header / main /
   footer) to span the full viewport on mobile. WordPress sometimes
   serializes an inline `padding` on .wp-site-blocks that, combined
   with the body's own margin reset, leaves a few pixels of body
   background visible at the left + right edges on small viewports —
   which reads as "the header and footer aren't full width." This
   rule pins everything at 0/100vw so the page truly bleeds edge to
   edge regardless of any inline styles WP injects. */
@media (max-width: 720px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .wp-site-blocks {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .wp-site-blocks > header,
    .wp-site-blocks > main,
    .wp-site-blocks > footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Flush-right hero CSS removed — reverted to the original
   contained hero with the bear photo centered in its column. */
.tt-trust-strip {
    color: var(--wp--preset--color--ink);
    margin-top: 0 !important;
    border-top: 2px solid var(--wp--preset--color--brand);
    border-bottom: 2px solid var(--wp--preset--color--brand);
}
.tt-trust-strip .wp-block-columns { gap: 16px !important; align-items: stretch !important; }
.tt-trust-strip .tt-trust-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0;
    flex-basis: 0 !important;
}
/* Fixed reservation for the icon — every cell gets the same vertical
   slot regardless of which icon is taller. The icon centers inside it. */
.tt-trust-strip .tt-trust-icon {
    margin: 0 !important;
    line-height: 0;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tt-trust-strip .tt-trust-icon img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
/* Per-icon visual-mass tuning. Each icon's actual displayed height
   inside the 92px slot — the truck is wide so a touch shorter; the
   stopwatch is squareish and looks tiny without a boost. */
.tt-trust-strip .tt-trust-cell:nth-child(1) .tt-trust-icon img { height: 92px; max-width: 180px; } /* truck — wide aspect + internal whitespace, fills the slot */
.tt-trust-strip .tt-trust-cell:nth-child(2) .tt-trust-icon img { height: 88px; } /* stopwatch */
.tt-trust-strip .tt-trust-cell:nth-child(3) .tt-trust-icon img { height: 84px; } /* arizona */
.tt-trust-strip .tt-trust-cell:nth-child(4) .tt-trust-icon img { height: 82px; } /* printer */
.tt-trust-strip .tt-trust-cell:nth-child(5) .tt-trust-icon img { height: 92px; } /* medal */
.tt-trust-strip .tt-trust-cell:nth-child(6) .tt-trust-icon img { height: 86px; } /* house */

.tt-trust-strip .tt-trust-label {
    color: var(--wp--preset--color--brand-dark);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 !important;
    text-align: center;
    min-height: 36px; /* enforces consistent end-position for 2-line labels */
}
.tt-trust-strip .tt-trust-label strong {
    font-weight: 700;
    color: var(--wp--preset--color--brand);
    display: block;
}
.tt-trust-strip .tt-trust-label strong { font-weight: 700; display: block; }
@media (max-width: 860px) {
    .tt-trust-strip .wp-block-columns {
        flex-wrap: wrap !important;
        gap: 18px 10px !important;
    }
    .tt-trust-strip .tt-trust-cell { flex: 0 0 calc(33.333% - 10px) !important; min-width: 0; }
}
@media (max-width: 480px) {
    .tt-trust-strip .tt-trust-cell { flex: 0 0 calc(50% - 10px) !important; }
}

/* ─── Subtle button hover lift (theme.json can't express transforms cleanly) ─── */
.wp-block-button__link.wp-element-button {
    transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
    will-change: transform;
}
.wp-block-button__link.wp-element-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -4px rgba(170, 111, 99, 0.35);
}

/* ─── Announcement bar wrapper — full-bleed even inside constrained content ─── */
.tt-announcement {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--wp--preset--color--brand);
    color: #fff;
    padding: 10px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ─── Body link underline cleanup — applies ONLY to inline text links
   inside paragraphs/lists/headings, not to card-shaped <a> elements. */
.entry-content :is(p, li, h1, h2, h3, h4, h5, h6) > a:not(.wp-element-button):not(.wp-block-navigation-item__content) {
    text-decoration: none;
    color: var(--wp--preset--color--brand);
    border-bottom: 1.5px solid transparent;
    transition: border-color .15s ease, color .15s ease;
}
.entry-content :is(p, li, h1, h2, h3, h4, h5, h6) > a:not(.wp-element-button):not(.wp-block-navigation-item__content):hover {
    color: var(--wp--preset--color--accent);
    border-bottom-color: currentColor;
}

/* ─── Heading styles — force Fredoka display + brand color + sizes
   regardless of where the heading lives. theme.json's `elements.h1`
   doesn't always cascade into block-themed cover/group blocks (the
   wp-block-heading wrapper picks up body styles instead). Override
   here so every H1/H2/H3 renders consistently.            */
h1, h2, h3, h4,
.wp-block-heading {
    font-family: var(--wp--preset--font-family--display, 'Fredoka', sans-serif);
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}
h1, .wp-block-heading.has-h1, h1.wp-block-heading {
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.005em;
}
h2, h2.wp-block-heading {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
}
h3, h3.wp-block-heading {
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.2;
}
h4, h4.wp-block-heading {
    font-size: clamp(18px, 2vw, 22px);
}

/* ═════════════════════════════════════════════════════════════════
   HOMEPAGE SECTIONS — sectional styles below. Each section is its
   own CSS block so we can lift and reuse them on other pages later.
   ═════════════════════════════════════════════════════════════════ */

/* (Stripe decorations removed per user request 2026-05-09. Stripes.png stays in the media library if we want to bring them back later.) */


/* Shared section bits */
.tt-eyebrow {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--brand) !important;
    margin: 0 0 8px !important;
}
.tt-section-h2 {
    font-family: var(--wp--preset--font-family--display);
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.1;
    margin: 0;
}
.tt-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.tt-section-more {
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color .15s ease, color .15s ease;
}
.tt-section-more:hover { border-bottom-color: currentColor; color: var(--wp--preset--color--accent); }

/* ─── 3. How It Works ─── */
.tt-how-step {
    background: #fff;
    border: 2px solid var(--wp--preset--color--brand);
    border-radius: 22px;
    padding: 28px 28px 30px;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease;
}
.tt-how-step:hover { transform: translateY(-3px); }
.tt-how-img {
    margin: 18px -28px 22px;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--wp--preset--color--cream-light);
    border-top: 1px solid var(--wp--preset--color--soft-pink);
    border-bottom: 1px solid var(--wp--preset--color--soft-pink);
}
.tt-how-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Old hover rule removed — see flex-grid hover above. */
/* Step label — small uppercase eyebrow with a leading accent line.
   Replaces the old chunky number badge. */
.tt-how-step-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--brand);
}
.tt-how-step-label::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--wp--preset--color--brand);
    border-radius: 2px;
}
/* Legacy number badge — hidden in case any old markup still has it. */
.tt-how-num { display: none; }
.tt-how-title {
    font-family: var(--wp--preset--font-family--display);
    color: var(--wp--preset--color--brand);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    margin: 8px 0 14px;
}
.tt-how-body {
    color: var(--wp--preset--color--ink);
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0;
}
.tt-how-body a { color: var(--wp--preset--color--brand); border-bottom: 1.5px solid var(--wp--preset--color--soft-pink); text-decoration: none; transition: border-color .15s ease; }
.tt-how-body a:hover { border-bottom-color: var(--wp--preset--color--brand); }

/* ─── 4. Shop by Category grid ─── */
.tt-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 900px) { .tt-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tt-cat-grid { grid-template-columns: 1fr; } }
.tt-cat-card {
    /* flex-column lets `.tt-cat-link { margin-top: auto }` push the
       "Shop now" line to the bottom of every card regardless of how
       short or long the description copy is, so the links line up
       across the row. */
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid var(--wp--preset--color--brand);
    border-radius: 22px;
    padding: 14px 14px 22px;
    text-decoration: none;
    transition: transform .2s ease;
    height: 100%;
}
.tt-cat-card:hover { transform: translateY(-3px); }
.tt-cat-art {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    border-radius: 16px;
    margin-bottom: 16px;
}
.tt-cat-emoji { font-size: 80px; }
/* Photo variant of the cat art slot — fills the 180px box, soft cream
   wash behind so transparent PNGs read on the white card. */
.tt-cat-art--photo {
    background: var(--wp--preset--color--cream-light);
    overflow: hidden;
    padding: 0;
}
.tt-cat-art--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}
.tt-cat-name {
    font-family: var(--wp--preset--font-family--display);
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    font-size: 22px;
    margin: 0 0 6px;
    padding: 0 8px;
}
.tt-cat-tag {
    color: var(--wp--preset--color--ink-soft);
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 14px;
    padding: 0 8px;
}
.tt-cat-link {
    display: inline-block;
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    font-size: 14px;
    padding: 0 8px;
    transition: color .15s ease;
    margin-top: auto; /* push to the bottom inside the flex column */
}
.tt-cat-card:hover .tt-cat-link { color: var(--wp--preset--color--accent); }

/* ─── 5. Custom Builder CTA ─── */
/* Photo variant for the right column — real gang sheet image. */
.tt-builder-photo { margin: 0 !important; }
.tt-builder-photo img {
    max-width: 360px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 14px;
    transform: rotate(-2deg);
}
@media (max-width: 720px) {
    .tt-builder-photo img { max-width: 280px; transform: rotate(-1deg); }
}
.tt-builder-mock {
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 24px 60px -16px rgba(0,0,0,0.25);
    transform: rotate(-2deg);
    max-width: 460px;
    margin: 0 auto;
}
.tt-builder-mock__bar {
    display: flex;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1ece8;
    margin-bottom: 12px;
}
.tt-builder-mock__bar span {
    width: 9px; height: 9px; border-radius: 50%;
    background: #f0d8cc;
}
.tt-builder-mock__bar span:nth-child(1) { background: #E89F82; }
.tt-builder-mock__sheet {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 80px 80px 60px;
    gap: 6px;
    background: repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #fff 10px, #fff 20px);
    border-radius: 8px;
    padding: 10px;
    border: 1px dashed #e0d8d2;
}
.tt-builder-mock__art {
    border-radius: 6px;
}
.tt-art-1 { grid-row: span 2; background: linear-gradient(135deg,#F7D2C7,#E89F82); }
.tt-art-2 { background: linear-gradient(135deg,#F0B582,#AA6F63); }
.tt-art-3 { background: linear-gradient(135deg,#F7EBE1,#F7D2C7); }
.tt-art-4 { background: linear-gradient(135deg,#E89F82,#F7D2C7); }
.tt-art-5 { background: linear-gradient(135deg,#F0B582,#F7EBE1); grid-column: span 2; }
.tt-art-6 { background: linear-gradient(135deg,#F7D2C7,#F0B582); }

/* ─── 6. Bestsellers product grid ─── */
.tt-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 900px) { .tt-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tt-product-grid { grid-template-columns: 1fr; } }
.tt-product-card {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 2px solid var(--wp--preset--color--brand);
    transition: transform .2s ease;
}
.tt-product-card:hover { transform: translateY(-3px); }
.tt-product-img {
    display: block;
    aspect-ratio: 1 / 1;
    width: 100%;
    /* Show the FULL image — no cropping. `contain` letterboxes the
       image inside the square slot; the cream fill behind matches
       the card background so the bars read as intentional padding,
       not a missing image. */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #F7EBE1;
    /* Breathing room so the artwork isn't flush to the card edges.
       background-origin: content-box is what makes the padding count —
       without it `contain` measures against the padding box and the
       image still paints edge-to-edge (same fix as the --cta variant).
       box-sizing keeps the slot square so the 4-col grid + 1/1 ratio
       don't shift. */
    background-origin: content-box !important;
    padding: 14px;
    box-sizing: border-box;
}
@media (max-width: 600px) { .tt-product-img { padding: 10px; } }
.tt-product-tag {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--wp--preset--color--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 10px;
    border-radius: 999px;
}
.tt-product-tag--bestseller { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--brand-dark); }
.tt-product-name {
    font-family: var(--wp--preset--font-family--display);
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    font-size: 18px;
    padding: 16px 16px 4px;
    margin: 0;
}
.tt-product-meta {
    color: var(--wp--preset--color--ink-soft);
    font-size: 13.5px;
    padding: 0 16px 18px;
    margin: 0;
}

/* ─── 7. Why Teddy points ─── */
/* Why Teddy photo on the right column — soft rounded corners, no shadow. */
.tt-why-photo { margin: 0 !important; }
.tt-why-photo img {
    width: 100%;
    height: auto;
    max-width: 480px;
    display: block;
    margin: 0 auto;
    border-radius: 22px;
}
/* ─── Gang Sheets landing — Build vs Upload paths ─── */
.tt-gs-paths {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto;
}
@media (max-width: 800px) { .tt-gs-paths { grid-template-columns: 1fr; } }
.tt-gs-path {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid var(--wp--preset--color--brand);
    border-radius: 22px;
    padding: 24px 24px 28px;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, border-color .15s ease;
    position: relative;
    box-sizing: border-box;
}
.tt-gs-path:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--brand); }
/* Override the global hover rule — keep CTA in the same brand brown,
   not the (now-black) brand-dark. */
.tt-gs-path:hover .tt-gs-path__cta { color: var(--wp--preset--color--brand) !important; }
.tt-gs-path--build:hover .tt-gs-path__cta { color: var(--wp--preset--color--soft-pink) !important; }
.tt-gs-path--build:hover .tt-gs-path__h,
.tt-gs-path--build:hover .tt-gs-path__sub,
.tt-gs-path--build:hover .tt-gs-path__list li { color: inherit; }
.tt-gs-path--build:hover { color: #fff; }

/* ─── Stripe graphic on the gang sheet hero — anchored to the left side
   so its right tip tucks BEHIND the hero image (z-index handles the
   occlusion: stripe at z=1, content + image at z=2). ─── */
.tt-gs-hero { position: relative; overflow: hidden; }
.tt-stripes-img {
    position: absolute;
    /* Position so the right tip of the stripe graphic lands behind the
       hero image (image lives in the left column ~x=216–500). The image
       sits at z-index:3 and occludes the part of the stripe behind it,
       so the visible portion appears to "emerge" from behind the image. */
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(380px, 38vw, 540px);
    height: auto;
    pointer-events: none;
    z-index: 1;
    user-select: none;
}
.tt-gs-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }
.tt-gs-hero .wp-block-image,
.tt-gs-hero .wp-block-image img { position: relative; z-index: 3; }
@media (max-width: 760px) {
    .tt-stripes-img { left: -120px; width: 360px; opacity: 0.7; top: 38%; }
}
/* ─── Wave transition between gang-sheet hero and the white "Choose"
   section. Wrapper background is a vertical gradient: cream above the
   wave (matches hero), white below (matches next section). The hard
   cream→white cut sits at ~48–52% — inside the opaque dark middle
   band of the wave, so the transition is hidden across the full width
   regardless of how the bands curve. ─── */
.tt-gs-hero-wave {
    line-height: 0;
    background: linear-gradient(
        to bottom,
        #FFF8F1 0%,
        #FFF8F1 48%,
        #FFFFFF 52%,
        #FFFFFF 100%
    ) !important;
    margin-top: clamp(-260px, -16vw, -100px) !important;
}
.tt-gs-hero-wave .wp-block-image,
.tt-gs-hero-wave figure { margin: 0; }
.tt-gs-hero-wave img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
/* Build variant: brand-brown card with inverted text — pulls focus
   over the outline Upload card. */
.tt-gs-path--build {
    background: var(--wp--preset--color--brand);
    border-color: var(--wp--preset--color--brand);
    color: #fff;
}
.tt-gs-path--build:hover { border-color: #fff; }
.tt-gs-path--build .tt-gs-path__pill { background: #fff; color: var(--wp--preset--color--brand); }
.tt-gs-path--build .tt-gs-path__h { color: #fff; }
.tt-gs-path--build .tt-gs-path__sub { color: var(--wp--preset--color--soft-pink); }
.tt-gs-path--build .tt-gs-path__list li { color: var(--wp--preset--color--cream-light); }
.tt-gs-path--build .tt-gs-path__list li::before { border-color: #fff; }
.tt-gs-path--build .tt-gs-path__cta { color: #fff; }
.tt-gs-path--build:hover .tt-gs-path__cta { color: var(--wp--preset--color--soft-pink); }
.tt-gs-path--build .tt-arrow-img { filter: brightness(0) invert(1); }
.tt-gs-path__pill {
    align-self: flex-start;
    background: var(--wp--preset--color--cream);
    color: var(--wp--preset--color--brand);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.tt-gs-path--upload .tt-gs-path__pill { background: var(--wp--preset--color--soft-pink); }
.tt-gs-path__art {
    margin: 0 0 22px;
    aspect-ratio: 16 / 10;
    background: var(--wp--preset--color--cream-light);
    border-radius: 14px;
    overflow: hidden;
}
.tt-gs-path__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-gs-path__h {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    color: var(--wp--preset--color--brand-dark);
    font-size: 28px;
    line-height: 1.1;
    margin: 0 0 12px;
    font-weight: 700;
}
.tt-gs-path__sub {
    color: var(--wp--preset--color--ink);
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0 0 16px;
}
.tt-gs-path__list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: grid;
    gap: 6px;
}
.tt-gs-path__list li {
    position: relative;
    padding-left: 22px;
    font-size: 14.5px;
    color: var(--wp--preset--color--ink-soft);
}
.tt-gs-path__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 6px;
    border-left: 2px solid var(--wp--preset--color--brand);
    border-bottom: 2px solid var(--wp--preset--color--brand);
    transform: rotate(-45deg);
    border-radius: 1px;
}
.tt-gs-path__cta {
    margin-top: auto;
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
}
.tt-gs-path:hover .tt-gs-path__cta { color: var(--wp--preset--color--brand-dark); }

/* ─── Pricing band (brand brown stripe) ─── */
.tt-gs-pricing-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
    color: #fff;
}
@media (max-width: 720px) { .tt-gs-pricing-row { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.tt-gs-pricing-cell { display: flex; flex-direction: column; gap: 4px; }
.tt-gs-pricing-num {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}
.tt-gs-pricing-label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--soft-pink);
}

/* ─── Size mockup grid ─── */
.tt-gs-size-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto;
}
@media (max-width: 1100px) { .tt-gs-size-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px)  { .tt-gs-size-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px)  { .tt-gs-size-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.tt-gs-size-card {
    margin: 0;
    background: var(--wp--preset--color--cream-light);
    border: 1px solid var(--wp--preset--color--soft-pink);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
}
.tt-gs-size-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    margin: 0 auto 10px;
}
.tt-gs-size-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.tt-gs-size-card strong {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    color: var(--wp--preset--color--brand-dark);
    font-size: 14.5px;
    font-weight: 700;
}
.tt-gs-size-card span {
    color: var(--wp--preset--color--ink-soft);
    font-size: 12.5px;
}

/* ─── USP grid (4 cells, single column on mobile) ─── */
.tt-gs-usp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
}
@media (max-width: 980px) { .tt-gs-usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tt-gs-usp-grid { grid-template-columns: 1fr; } }
.tt-gs-usp {
    background: #fff;
    border: 1px solid var(--wp--preset--color--soft-pink);
    border-radius: 18px;
    padding: 24px 22px;
    text-align: center;
}
.tt-gs-usp h3 {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    color: var(--wp--preset--color--brand);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 10px;
    text-align: center;
}
.tt-gs-usp p {
    color: var(--wp--preset--color--ink);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
    text-align: center;
}

/* ─── Print gallery — horizontal scroll-snap carousel ─── */
.tt-gallery-head {
    max-width: 1080px;
    margin: 0 auto 36px;
    padding: 0 clamp(20px, 4vw, 40px);
    text-align: center;
}
.tt-gallery-eyebrow {
    font-family: var(--wp--preset--font-family--body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--brand);
    margin: 0 0 8px;
}
.tt-gallery-h {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    color: var(--wp--preset--color--brand-dark);
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.1;
    margin: 0 0 12px;
    font-weight: 700;
}
.tt-gallery-sub {
    color: var(--wp--preset--color--ink-soft);
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
}
.tt-gallery-wrap {
    position: relative;
    max-width: 100%;
}
.tt-gallery-scroller {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: clamp(20px, 4vw, 40px);
    padding: 12px clamp(20px, 4vw, 40px);
    /* Hide scrollbar — arrows handle navigation, touch handles mobile. */
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.tt-gallery-scroller::-webkit-scrollbar { display: none; }
.tt-gallery-card {
    flex: 0 0 320px;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    overflow: hidden;
    background: var(--wp--preset--color--cream);
    scroll-snap-align: start;
    border: 1px solid var(--wp--preset--color--soft-pink);
}
.tt-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 600px) { .tt-gallery-card { flex: 0 0 78vw; } }

.tt-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, border-color .15s ease;
}
.tt-gallery-arrow:hover { background: var(--wp--preset--color--cream-light); border-color: var(--wp--preset--color--brand); }
.tt-gallery-arrow img { width: 18px; height: 18px; }
.tt-gallery-arrow--prev { left: clamp(8px, 2vw, 24px); }
.tt-gallery-arrow--next { right: clamp(8px, 2vw, 24px); }
@media (max-width: 720px) {
    .tt-gallery-arrow { width: 40px; height: 40px; }
    .tt-gallery-arrow img { width: 14px; height: 14px; }
}

/* ─── Contact page ─── */
.tt-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    /* Stretch both columns to the taller side's height so the
       contact form's border ends at the same bottom edge as the
       last "Track an order" card. */
    align-items: stretch;
}
@media (max-width: 880px) { .tt-contact-grid { grid-template-columns: 1fr; gap: 28px; } }
.tt-contact-options { display: grid; gap: 16px; }
.tt-contact-card {
    display: block;
    background: #fff;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 16px;
    padding: 22px 24px;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, border-color .15s ease;
}
.tt-contact-card:hover { transform: translateY(-2px); border-color: var(--wp--preset--color--brand); }
.tt-contact-card h3 {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    color: var(--wp--preset--color--brand);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
}
.tt-contact-card p { color: var(--wp--preset--color--ink); font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; }
.tt-contact-card__cta {
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tt-contact-form {
    background: var(--wp--preset--color--cream-light);
    border: 2px solid var(--wp--preset--color--brand);
    border-radius: 18px;
    padding: 28px;
    box-sizing: border-box;
    min-width: 0; /* allow shrink within grid cell */
    overflow: hidden; /* belt-and-braces clip if any field overflows */
}
.tt-contact-form * { box-sizing: border-box; max-width: 100%; }
.tt-contact-form__h {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    color: var(--wp--preset--color--brand);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
}
.tt-contact-form__sub { color: var(--wp--preset--color--ink-soft); font-size: 14.5px; margin: 0 0 22px; }
.tt-contact-field { display: block; margin: 0 0 16px; }
.tt-contact-field span {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--brand);
    margin: 0 0 6px;
}
.tt-contact-field input,
.tt-contact-field select,
.tt-contact-field textarea {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 10px;
    background: #fff;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    color: var(--wp--preset--color--ink);
    outline: none;
    transition: border-color .15s ease;
    display: block;
}
.tt-contact-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23AA6F63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
}
.tt-contact-field input:focus,
.tt-contact-field select:focus,
.tt-contact-field textarea:focus { border-color: var(--wp--preset--color--brand); }
.tt-contact-field textarea { resize: vertical; min-height: 110px; }
.tt-contact-form__btn {
    background: var(--wp--preset--color--brand);
    color: #fff;
    border: 0;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color .15s ease;
}
.tt-contact-form__btn:hover { background: var(--wp--preset--color--brand-dark); }
.tt-contact-form__btn .tt-arrow-img { filter: brightness(0) invert(1); width: 14px; height: 14px; }
.tt-contact-form__note { font-size: 12.5px; color: var(--wp--preset--color--ink-soft); margin: 14px 0 0; }

/* ─── Pricing page ─── */
.tt-pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
@media (max-width: 980px) { .tt-pricing-cards { grid-template-columns: 1fr; } }
.tt-pricing-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid var(--wp--preset--color--soft-pink);
    border-radius: 18px;
    padding: 28px 24px;
    transition: transform .15s ease, border-color .15s ease;
    position: relative;
}
.tt-pricing-card:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--brand); }
.tt-pricing-card--featured {
    background: var(--wp--preset--color--brand);
    border-color: var(--wp--preset--color--brand);
    color: #fff;
}
.tt-pricing-card--featured:hover { border-color: #fff; }
.tt-pricing-card__pill {
    position: absolute;
    top: -12px;
    right: 24px;
    background: #2F8F5A;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
}
.tt-pricing-card__h {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--wp--preset--color--brand);
}
.tt-pricing-card--featured .tt-pricing-card__h { color: #fff; }
.tt-pricing-card__rate {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--wp--preset--color--ink);
    line-height: 1;
}
.tt-pricing-card__rate span {
    display: block;
    font-family: var(--wp--preset--font-family--body);
    font-size: 12px;
    font-weight: 600;
    color: var(--wp--preset--color--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}
.tt-pricing-card--featured .tt-pricing-card__rate { color: #fff; }
.tt-pricing-card--featured .tt-pricing-card__rate span { color: var(--wp--preset--color--soft-pink); }
.tt-pricing-card__sub { color: var(--wp--preset--color--ink); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.tt-pricing-card--featured .tt-pricing-card__sub { color: var(--wp--preset--color--cream-light); }
.tt-pricing-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: grid;
    gap: 6px;
    font-size: 14px;
    color: var(--wp--preset--color--ink);
    border-top: 1px solid var(--wp--preset--color--soft-pink);
    padding-top: 14px;
}
.tt-pricing-card--featured .tt-pricing-card__list { color: #fff; border-top-color: rgba(255,255,255,0.3); }

/* Most Popular card — price rows: label on the left, $X.XX bold on
   the right. No pill around the price — the only green badge in
   this card is the "MOST POPULAR" tab at the top. */
.tt-pricing-card--featured .tt-pricing-card__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
}
.tt-pricing-card--featured .tt-pricing-card__list li strong {
    background: transparent;
    color: #fff;
    padding: 0;
    border-radius: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    min-width: 0;
    text-align: right;
    flex-shrink: 0;
}
.tt-pricing-card__cta {
    margin-top: auto;
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tt-pricing-card--featured .tt-pricing-card__cta { color: #fff; }
.tt-pricing-card--featured .tt-arrow-img { filter: brightness(0) invert(1); }

/* ─── Application instructions page ─── */
.tt-app-settings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 36px;
    background: var(--wp--preset--color--cream-light);
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 14px;
    padding: 22px;
}
@media (max-width: 720px) { .tt-app-settings { grid-template-columns: repeat(2, 1fr); } }
.tt-app-settings > div { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.tt-app-settings strong {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--brand);
}
.tt-app-settings span {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    color: var(--wp--preset--color--ink);
}
.tt-app-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.tt-app-steps > li {
    counter-increment: step;
    position: relative;
    padding: 0 0 28px 64px;
    margin: 0 0 24px;
    border-bottom: 1px solid var(--wp--preset--color--soft-pink);
}
.tt-app-steps > li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.tt-app-steps > li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--wp--preset--color--brand);
    background: var(--wp--preset--color--cream-light);
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tt-app-steps h3 {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    color: var(--wp--preset--color--brand-dark);
    font-size: 20px;
    font-weight: 700;
    margin: 6px 0 8px;
}
.tt-app-steps p { color: var(--wp--preset--color--ink); font-size: 16px; line-height: 1.6; margin: 0; }

/* ════════════════════════════════════════════════════════════════════
   WooCommerce single-product page — Vintage Heart-style redesign
   ════════════════════════════════════════════════════════════════════ */

/* Whole product page sits on white */
body.single-product { background: #fff !important; }
body.single-product .wp-site-blocks,
body.single-product .wp-site-blocks > main { background: #fff !important; }

/* Page wrapper: constrain to 1240px, centered, no main padding */
body.single-product .wp-site-blocks > .wp-block-group.woocommerce.product {
    max-width: 1240px;
    margin: 0 auto !important;
    padding: clamp(24px, 3vw, 40px) clamp(20px, 4vw, 40px) clamp(56px, 6vw, 80px) !important;
    background: transparent !important;
}
body.single-product main.wp-block-group.is-layout-constrained {
    max-width: none !important;
    padding: 0 !important;
}
body.single-product main.wp-block-group.is-layout-constrained > .alignwide,
body.single-product main.wp-block-group.is-layout-constrained > .alignfull { max-width: none !important; }

/* Breadcrumb */
body.single-product .woocommerce-breadcrumb,
body.single-product .wc-block-breadcrumbs {
    font-size: 13px !important;
    color: var(--wp--preset--color--ink-soft) !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}
body.single-product .wc-block-breadcrumbs a,
body.single-product .woocommerce-breadcrumb a {
    color: var(--wp--preset--color--ink-soft) !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}
body.single-product .wc-block-breadcrumbs a:hover { color: var(--wp--preset--color--brand) !important; }

/* === MAIN GRID: image left, summary right ============================ */
body.single-product div.product .wp-block-columns {
    gap: clamp(28px, 4vw, 48px) !important;
    align-items: flex-start !important;
}
body.single-product div.product .wp-block-columns > .wp-block-column {
    min-width: 0 !important;
    flex: 1 1 0 !important;
}
body.single-product div.product .wp-block-columns > .wp-block-column:first-child { flex: 1.05 1 0 !important; position: sticky; top: calc(var(--tt-header-h, 100px) + 16px); }
body.single-product div.product .wp-block-columns > .wp-block-column:last-child  { flex: 0.95 1 0 !important; }
@media (max-width: 880px) {
    body.single-product div.product .wp-block-columns { flex-direction: column !important; }
    body.single-product div.product .wp-block-columns > .wp-block-column { width: 100% !important; flex: 1 1 100% !important; position: static !important; }
}

/* === GALLERY ========================================================= */
body.single-product .woocommerce-product-gallery,
body.single-product div.product .wp-block-columns > .wp-block-column:first-child > .woocommerce-product-gallery {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}
body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .flex-viewport {
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #fff;
    box-shadow: none;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Containers that WRAP the gallery and have the dark background applied
   need the same rounded clip — otherwise the dark fills its rectangular
   parent and the wrapper's 16px corners get hidden inside it. */
body.single-product .wp-block-woocommerce-product-image-gallery,
body.single-product .woocommerce-product-gallery {
    border-radius: 16px !important;
    overflow: hidden !important;
}
/* Breathing room for the actual design within the frame. Padding on
   the IMG itself keeps the dark/cream background extending to the
   rounded card edges — only the design inside is inset, which reads
   as "card frame with a margin" rather than a colored ring. */
body.single-product .woocommerce-product-gallery img,
body.single-product .woocommerce-product-gallery .wp-post-image,
body.single-product .wp-block-woocommerce-product-image-gallery img {
    padding: 36px !important;
    box-sizing: border-box !important;
}
/* Kill the hover zoom/move on the gallery image. Disables any
   :hover transform plus the cursor + pointer feedback that suggests
   "click for zoom" — including WC's zoom on hover, the lightbox
   trigger pointer, and any inline transition the flexslider applies. */
body.single-product .woocommerce-product-gallery img:hover,
body.single-product .woocommerce-product-gallery .wp-post-image:hover,
body.single-product .wp-block-woocommerce-product-image-gallery img:hover,
body.single-product .woocommerce-product-gallery__image:hover,
body.single-product .woocommerce-product-gallery__image a:hover {
    transform: none !important;
    cursor: default !important;
}
body.single-product .woocommerce-product-gallery img,
body.single-product .woocommerce-product-gallery .wp-post-image,
body.single-product .wp-block-woocommerce-product-image-gallery img {
    transition: none !important;
    cursor: default !important;
}
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image a {
    cursor: default !important;
}
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image a,
body.single-product .woocommerce-product-gallery__image figure {
    margin: 0 !important;
    height: 100% !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.single-product .woocommerce-product-gallery img,
body.single-product .woocommerce-product-gallery .wp-post-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
}
/* WC zoom/lightbox trigger removed at user request — the click-to-enlarge
   magnifying glass on single-product gallery images was visually cluttering
   the product photo. WC still supports its zoom-on-hover separately. */
body.single-product .woocommerce-product-gallery__trigger { display: none !important; }

/* Single-product page badges — rendered as real HTML by
   tt_render_badges() (inc/product-meta.php), styled here. The two
   hardcoded CSS pseudo-element badges (Best Seller + Printed in AZ)
   that used to live here have been removed because they fired on
   every product regardless of any flag. The new system reads per-
   product meta from the "Teddy Transfers" admin tab so each badge
   can be toggled show / hide individually. */
body.single-product .tt-product-badges {
    /* Inline row of pills at the top of the summary column.
       Previous absolute positioning broke on block-theme layouts. */
    display: flex !important;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 14px !important;
    align-items: center;
    /* Lock dimensions so nothing inherits from gallery / thumbnail
       grid rules. */
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    pointer-events: auto;
}
body.single-product .tt-product-badge {
    background: var(--wp--preset--color--brand) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    /* Reset any text-transform or letter-spacing inherited from
       gallery-strip rules. */
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.single-product .tt-product-badge--made {
    background: #fff;
    color: var(--wp--preset--color--brand);
    border: 1px solid var(--wp--preset--color--soft-pink);
    font-weight: 600;
}
body.single-product .tt-product-badge--promo {
    background: #AA6F63;
    color: #FFFFFF;
    font-weight: 800;
    letter-spacing: .2px;
}
body.single-product .tt-product-badge--new   { background: #2F8F5A; }
body.single-product .tt-product-badge--sale  { background: var(--wp--preset--color--accent); color: #000; }
body.single-product .tt-product-badge--custom{ background: #000; color: #fff; }
/* Ensure the gallery wrapper is the positioning context for our badges. */
body.single-product .woocommerce-product-gallery__wrapper { position: relative;
}

/* Gallery thumbnails (when multiple images) */
body.single-product .flex-control-thumbs {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 10px !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
}
body.single-product .flex-control-thumbs li { width: auto !important; margin: 0 !important; aspect-ratio: 1; }
body.single-product .flex-control-thumbs img {
    width: 100% !important; height: 100% !important;
    object-fit: contain !important;
    background: var(--wp--preset--color--cream-light);
    border-radius: 0 !important;
    border: 2px solid var(--wp--preset--color--soft-pink) !important;
    cursor: pointer; opacity: 1 !important;
    padding: 4px;
    box-sizing: border-box;
    transition: border-color .15s ease;
}
body.single-product .flex-control-thumbs img.flex-active,
body.single-product .flex-control-thumbs img:hover { border-color: var(--wp--preset--color--brand) !important; }

/* === BUY BOX (right column) ========================================= */
body.single-product .summary,
body.single-product .entry-summary {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    padding-top: 4px;
}

/* Vendor strip hidden per user request — was "Teddy Transfers ·
   Premade DTF Collection" line above each product title. */
body.single-product .tt-product-vendor { display: none !important; }

/* Title — reduced per user request. The previous size felt huge
   especially after the global .wp-block-post-title rule was bumped
   to clamp(40px, 5.5vw, 64px) for page titles, which the block-
   theme product page was inheriting. Locked here at a smaller
   single-product-specific size. */
body.single-product .product_title.entry-title,
body.single-product h1.product_title,
body.single-product .wp-block-post-title,
body.single-product h1.wp-block-post-title {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    color: var(--wp--preset--color--brand) !important;
    font-size: clamp(22px, 2.4vw, 30px) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    margin: 6px 0 10px !important;
    letter-spacing: -0.01em;
}

/* Stars + review count line */
body.single-product .tt-product-stars {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--wp--preset--color--ink-soft);
    font-size: 14px;
}
body.single-product .tt-product-stars__icons { letter-spacing: 2px; font-size: 16px; line-height: 1; }
body.single-product .tt-product-stars__icons span { color: var(--wp--preset--color--soft-pink); }
body.single-product .tt-product-stars__icons span.is-on { color: var(--wp--preset--color--accent); }
body.single-product .tt-product-stars strong { color: var(--wp--preset--color--ink); }
body.single-product .tt-product-stars__sep { opacity: .5; }
body.single-product .tt-product-stars a {
    color: var(--wp--preset--color--brand) !important;
    text-decoration: none !important;
    font-weight: 600;
    border-bottom: 0 !important;
}

/* Price — Riffic (display) */
body.single-product div.product p.price,
body.single-product div.product span.price {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    font-size: clamp(28px, 3vw, 36px) !important;
    color: var(--wp--preset--color--brand-dark) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em;
    margin: 0 0 6px !important;
    display: flex !important;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}
body.single-product div.product p.price del,
body.single-product div.product span.price del {
    opacity: 1 !important;
    color: var(--wp--preset--color--ink-soft) !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    font-family: var(--wp--preset--font-family--body) !important;
    margin: 0 !important;
}
body.single-product div.product p.price ins {
    background: transparent !important;
    color: inherit !important;
    text-decoration: none !important;
    font-weight: inherit !important;
}

/* Ship-by-time note */
body.single-product .tt-product-ship-note {
    font-size: 13px;
    color: var(--wp--preset--color--ink-soft);
    margin: 0 0 22px;
}
body.single-product .tt-product-ship-note strong { color: #2F8F5A; font-weight: 700; }

/* Short description */
body.single-product .woocommerce-product-details__short-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--wp--preset--color--ink);
    margin: 0 0 24px;
    padding: 0;
    background: transparent;
    border: 0;
}
body.single-product .woocommerce-product-details__short-description p { margin: 0 0 8px; }
body.single-product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* === SIZE SELECTOR — converted from select to button-grid via CSS === */
body.single-product form.variations_form { margin: 0 !important; padding: 0 !important; }
body.single-product .variations { width: 100%; border: 0; margin: 0 0 8px !important; }
body.single-product .variations tbody { display: block; }
body.single-product .variations tr { display: block; margin-bottom: 8px !important; border: 0; padding: 0; }
body.single-product .variations tr:last-child { margin-bottom: 0 !important; }
body.single-product .variations td { display: block; padding: 0 !important; border: 0; }
body.single-product .variations .label label {
    display: flex;
    justify-content: space-between;
    font-family: var(--wp--preset--font-family--body) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--brand) !important;
    margin: 0 0 10px !important;
}
body.single-product .variations select {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 12px;
    background: #fff;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    font-weight: 600;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23AA6F63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 44px;
    transition: border-color .15s ease;
}
body.single-product .variations select:focus { outline: none; border-color: var(--wp--preset--color--brand); }

/* Hide the native select once JS has converted it to button group, but
   keep it focusable / present for WC's variation form to read from. */
body.single-product .variations select.tt-var-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
}

/* Branded button group for variation options */
body.single-product .tt-var-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
body.single-product .tt-var-btn {
    padding: 12px 18px;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 12px;
    background: #fff;
    font-family: var(--wp--preset--font-family--body);
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
    transition: all .15s ease;
    min-width: 60px;
}
body.single-product .tt-var-btn:hover {
    border-color: var(--wp--preset--color--brand);
    color: var(--wp--preset--color--brand);
}
body.single-product .tt-var-btn.is-active {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}
body.single-product .reset_variations {
    font-size: 12px;
    color: var(--wp--preset--color--ink-soft);
    margin-top: 6px;
    display: inline-block;
}
body.single-product .single_variation_wrap { margin: 0 !important; }
body.single-product .single_variation { margin: 0 0 6px !important; }
body.single-product .single_variation_wrap .price {
    margin: 0 0 4px !important;
    font-size: clamp(26px, 2.8vw, 32px) !important;
}
body.single-product .single_variation_wrap .stock {
    font-size: 13px;
    color: #2F8F5A;
    margin: 0 0 8px !important;
    font-weight: 600;
}
body.single-product .single_variation_wrap .variations_button { margin: 0 !important; padding: 0 !important; }

/* === QUANTITY + ADD TO CART ROW ===================================== */
body.single-product form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    margin: 0 0 14px !important;
    padding: 0 !important;
}
body.single-product .quantity {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}
body.single-product .quantity input.qty {
    width: 56px;
    height: 52px;
    border: 0 !important;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    background: transparent;
    outline: none;
    color: var(--wp--preset--color--ink);
    -moz-appearance: textfield;
}
body.single-product .quantity input.qty::-webkit-outer-spin-button,
body.single-product .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

body.single-product button.single_add_to_cart_button {
    flex: 1;
    background: var(--wp--preset--color--brand) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    height: 52px;
    padding: 0 24px !important;
    font-family: var(--wp--preset--font-family--body) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(170,111,99,.28);
    transition: background-color .15s ease, transform .12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 220px;
}
body.single-product button.single_add_to_cart_button:hover { background: var(--wp--preset--color--brand-dark) !important; transform: translateY(-1px); }
body.single-product button.single_add_to_cart_button.disabled,
body.single-product button.single_add_to_cart_button:disabled {
    opacity: .5; cursor: not-allowed; transform: none !important;
}

/* Pay strip would normally go below — leave spot for now */

/* === TRUST STRIP ==================================================== */
body.single-product .tt-product-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 24px;
}
body.single-product .tt-product-trust__cell {
    background: #fff;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    font-size: 12px;
    color: var(--wp--preset--color--ink-soft);
}
body.single-product .tt-product-trust__cell strong {
    display: block;
    color: var(--wp--preset--color--ink);
    font-size: 13px;
    margin: 4px 0 2px;
    font-weight: 700;
}
body.single-product .tt-product-trust__ico { font-size: 18px; line-height: 1; }

/* === META (SKU, category) =========================================== */
body.single-product .product_meta {
    border-top: 1px solid var(--wp--preset--color--soft-pink);
    padding-top: 14px;
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--wp--preset--color--ink-soft);
    line-height: 1.7;
}
body.single-product .product_meta > span { display: block; }
body.single-product .product_meta a { color: var(--wp--preset--color--brand) !important; text-decoration: none !important; border-bottom: 0 !important; }

/* === ACCORDIONS (replaces tabs) ===================================== */
body.single-product .tt-product-accordions {
    margin: 24px 0 0;
    border-top: 1px solid var(--wp--preset--color--soft-pink);
}
body.single-product .tt-product-acc {
    border-bottom: 1px solid var(--wp--preset--color--soft-pink);
    padding: 16px 4px;
}
body.single-product .tt-product-acc > summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--wp--preset--font-family--body) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--wp--preset--color--ink) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
body.single-product .tt-product-acc > summary::-webkit-details-marker { display: none; }
body.single-product .tt-product-acc__plus {
    font-size: 22px;
    color: var(--wp--preset--color--brand);
    font-weight: 300;
    transition: transform .2s ease;
    line-height: 1;
}
body.single-product .tt-product-acc[open] .tt-product-acc__plus { transform: rotate(45deg); }
body.single-product .tt-product-acc p {
    margin: 10px 0 0;
    color: var(--wp--preset--color--ink-soft);
    font-size: 14px;
    line-height: 1.6;
}
body.single-product .tt-product-acc a {
    color: var(--wp--preset--color--brand);
    text-decoration: none;
    border-bottom: 1.5px solid var(--wp--preset--color--soft-pink);
}

/* Hide legacy WC tabs container + the block-theme variant */
body.single-product .woocommerce-tabs,
body.single-product .woocommerce-tabs.wc-tabs-wrapper,
body.single-product .wp-block-woocommerce-product-details,
body.single-product .wc-tabs-wrapper,
body.single-product ul.tabs.wc-tabs,
body.single-product .woocommerce-Tabs-panel,
body.single-product #tab-description,
body.single-product #tab-additional_information,
body.single-product #tab-reviews > h2:first-of-type,
body.single-product #reviews > #comments > h2.woocommerce-Reviews-title { display: none !important; }
/* But still show the actual review LIST inside #reviews — only the
   duplicate H2 above is hidden. */
body.single-product #reviews { display: block !important; }

/* === RELATED PRODUCTS =============================================== */
body.single-product .related.products,
body.single-product .upsells.products {
    margin-top: clamp(56px, 6vw, 80px);
    padding-top: clamp(40px, 4vw, 56px);
    border-top: 1px solid var(--wp--preset--color--soft-pink);
}
body.single-product .related.products > h2,
body.single-product .upsells.products > h2 {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    color: var(--wp--preset--color--brand) !important;
    font-size: clamp(24px, 2.6vw, 32px) !important;
    margin: 0 0 28px !important;
}

/* === REVIEWS — score card + bars + filter chips + grid ============== */
body.single-product .tt-product-reviews {
    margin-top: clamp(56px, 6vw, 80px);
    padding-top: clamp(40px, 4vw, 56px);
    border-top: 1px solid var(--wp--preset--color--soft-pink);
}
body.single-product .tt-rv-head {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
    margin-bottom: 32px;
}
@media (max-width: 720px) { body.single-product .tt-rv-head { grid-template-columns: 1fr; } }
body.single-product .tt-rv-score {
    background: #fff;
    border: 2px solid var(--wp--preset--color--brand);
    border-radius: 20px;
    padding: 28px 22px;
    text-align: center;
}
body.single-product .tt-rv-score__num {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif;
    font-size: 64px;
    line-height: 1;
    color: var(--wp--preset--color--brand);
    font-weight: 700;
}
body.single-product .tt-rv-score__stars {
    color: var(--wp--preset--color--accent);
    letter-spacing: 3px;
    font-size: 20px;
    margin: 6px 0;
}
body.single-product .tt-rv-score__total { color: var(--wp--preset--color--ink-soft); font-size: 13px; }
body.single-product .tt-rv-bars { display: flex; flex-direction: column; gap: 8px; }
body.single-product .tt-rv-bar {
    display: grid;
    grid-template-columns: 50px 1fr 40px;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--wp--preset--color--ink-soft);
}
body.single-product .tt-rv-bar__track {
    height: 8px;
    background: var(--wp--preset--color--soft-pink);
    border-radius: 99px;
    overflow: hidden;
}
body.single-product .tt-rv-bar__fill {
    height: 100%;
    background: var(--wp--preset--color--accent);
    border-radius: 99px;
}

body.single-product .tt-rv-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
body.single-product .tt-rv-filters { display: flex; gap: 8px; flex-wrap: wrap; }
body.single-product .tt-rv-chip {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
    transition: all .15s ease;
}
body.single-product .tt-rv-chip:hover { border-color: var(--wp--preset--color--brand); }
body.single-product .tt-rv-chip.is-active {
    background: var(--wp--preset--color--brand);
    color: #fff;
    border-color: var(--wp--preset--color--brand);
}
body.single-product .tt-rv-actions { display: flex; gap: 10px; align-items: center; }
body.single-product .tt-rv-sort {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    background: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    color: var(--wp--preset--color--ink);
}
body.single-product .tt-rv-write {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--wp--preset--color--brand);
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    border-bottom: 0 !important;
    transition: background-color .15s ease;
}
body.single-product .tt-rv-write:hover { background: var(--wp--preset--color--brand-dark); }

/* Hide WC's default "1 review for X" heading and the duplicate hidden
   commentlist that sometimes renders inside .comments_area */
body.single-product #reviews #comments > h2.woocommerce-Reviews-title { display: none !important; }
body.single-product #reviews .commentlist:empty,
body.single-product .comments .commentlist[style*="display:none"] { display: none !important; }

/* Reviews grid — auto-fit so a single card spans full width and 2+ cards
   tile naturally without an orphaned half-row. */
body.single-product #reviews .commentlist {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 16px;
}
@media (max-width: 720px) { body.single-product #reviews .commentlist { grid-template-columns: 1fr; } }

body.single-product #reviews .commentlist li.review,
body.single-product #reviews .commentlist li.comment {
    background: #fff;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 16px;
    padding: 22px;
    margin: 0 !important;
    list-style: none !important;
}
body.single-product #reviews .commentlist li.review::before,
body.single-product #reviews .commentlist li.comment::before { display: none !important; }

body.single-product #reviews .commentlist .comment_container {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: start;
}

/* Replace the default Gravatar img with a brand-gradient initials circle.
   The PHP filter (see inc/product-accordions.php) outputs the customer's
   initials inside a span that we style here. */
body.single-product #reviews .commentlist img.avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--wp--preset--color--brand), var(--wp--preset--color--accent)) !important;
    flex-shrink: 0;
    border: 0 !important;
    box-shadow: none !important;
}
body.single-product #reviews .commentlist .tt-rv-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wp--preset--color--brand), var(--wp--preset--color--accent));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

body.single-product #reviews .commentlist .comment-text {
    grid-column: 2;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
body.single-product #reviews .commentlist .meta {
    margin: 0 0 8px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}
body.single-product #reviews .commentlist .meta strong {
    font-weight: 700;
    color: var(--wp--preset--color--ink);
    font-size: 14px;
}
body.single-product #reviews .commentlist .meta time {
    color: var(--wp--preset--color--ink-soft);
    font-size: 12px;
}
body.single-product #reviews .commentlist .meta .tt-rv-verified,
body.single-product #reviews .commentlist .woocommerce-review__verified,
body.single-product #reviews .commentlist .verified {
    color: #2F8F5A !important;
    background: rgba(47,143,90,0.10);
    font-weight: 700 !important;
    font-size: 11px !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-style: normal !important;
}
body.single-product #reviews .commentlist .woocommerce-review__verified::before,
body.single-product #reviews .commentlist .verified::before {
    content: "✓ ";
    font-weight: 700;
}
/* Hide the "(verified owner)" parenthesized variant if the theme uses it */
body.single-product #reviews .commentlist .woocommerce-review__author + .woocommerce-review__verified { margin-left: 4px; }
body.single-product #reviews .star-rating {
    color: var(--wp--preset--color--accent) !important;
    font-size: 14px;
    margin: 0 0 6px !important;
    float: none !important;
}
body.single-product #reviews .description {
    color: var(--wp--preset--color--ink);
    font-size: 14px;
    line-height: 1.55;
}
body.single-product #reviews .description p { margin: 0 0 6px; }
body.single-product #reviews .description p:last-child { margin: 0; }

/* No reviews yet — friendlier message */
body.single-product #reviews #comments .woocommerce-noreviews,
body.single-product #reviews .woocommerce-noreviews {
    background: var(--wp--preset--color--cream-light);
    border: 1.5px dashed var(--wp--preset--color--brand);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    color: var(--wp--preset--color--ink-soft);
    font-size: 14.5px;
    margin: 0 0 24px;
}

/* Review submission form */
body.single-product #reviews #respond {
    background: var(--wp--preset--color--cream-light);
    border: 2px solid var(--wp--preset--color--brand);
    border-radius: 18px;
    padding: 28px;
}
body.single-product #reviews #respond #reply-title {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    color: var(--wp--preset--color--brand) !important;
    font-size: 22px !important;
    margin: 0 0 14px !important;
}
body.single-product #reviews .comment-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
body.single-product #reviews .comment-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 10px;
    background: #fff;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    margin-bottom: 12px;
}
body.single-product #reviews #respond input[type="submit"] {
    background: var(--wp--preset--color--brand) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    font-family: var(--wp--preset--font-family--body) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    cursor: pointer;
}

/* Write-a-review CTA card at the bottom */
body.single-product .tt-rv-cta {
    margin-top: 24px;
    background: linear-gradient(135deg, var(--wp--preset--color--soft-pink), #fff);
    border: 1.5px dashed var(--wp--preset--color--brand);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
body.single-product .tt-rv-cta h3 {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    color: var(--wp--preset--color--brand) !important;
    font-size: 20px !important;
    margin: 0 !important;
}
body.single-product .tt-rv-cta p {
    margin: 4px 0 0;
    color: var(--wp--preset--color--ink-soft);
    font-size: 14px;
}

/* WC notices — only style when they actually have content; if empty,
   collapse to nothing so we don't get a stranded empty bar above the hero */
body.single-product .wc-block-store-notices:empty,
body.single-product .woocommerce-notices-wrapper:empty,
body.single-product .woocommerce-notices-wrapper:not(:has(.woocommerce-message)) { display: none !important; }
body.single-product .woocommerce-message {
    background: var(--wp--preset--color--cream-light) !important;
    border-left: 4px solid var(--wp--preset--color--brand) !important;
    color: var(--wp--preset--color--brand-dark) !important;
    border-radius: 10px;
    padding: 14px 18px !important;
    margin: 0 0 18px !important;
}
body.single-product .wc-block-store-notices {
    margin: 0 0 18px !important;
}
body.single-product .wc-block-store-notices:not(:has(.woocommerce-message)):not(:has(.wc-block-components-notice-banner)) { display: none !important; padding: 0 !important; margin: 0 !important; }
body.single-product .woocommerce-message a.button {
    background: var(--wp--preset--color--brand) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   WooCommerce Shop archive — branded mockup port
   ════════════════════════════════════════════════════════════════════ */

/* Page wrapper — match single-product container */
body.woocommerce-shop .wp-site-blocks > .wp-block-group.woocommerce,
body.tax-product_cat .wp-site-blocks > .wp-block-group.woocommerce,
body.post-type-archive-product .wp-site-blocks > .wp-block-group.woocommerce {
    max-width: 1240px;
    margin: 0 auto !important;
    padding: clamp(24px, 3vw, 40px) clamp(20px, 4vw, 40px) clamp(56px, 6vw, 80px) !important;
}
/* Mobile: drop the wrapper's horizontal side padding so the shop
   content goes edge-to-edge, matching the header + footer rather
   than appearing narrower with visible side gutters. The
   product-grid + .tt-shop-hero already handle their own breathing
   room via the 16px gutter at .woocommerce in line 9797. */
@media (max-width: 720px) {
    body.woocommerce-shop .wp-site-blocks > .wp-block-group.woocommerce,
    body.tax-product_cat .wp-site-blocks > .wp-block-group.woocommerce,
    body.post-type-archive-product .wp-site-blocks > .wp-block-group.woocommerce {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
body.woocommerce-shop main.wp-block-group.is-layout-constrained,
body.tax-product_cat main.wp-block-group.is-layout-constrained,
body.post-type-archive-product main.wp-block-group.is-layout-constrained {
    max-width: none !important;
    padding: 0 !important;
}

/* Hide WC default page title (we render our own hero) */
body.woocommerce-shop .woocommerce-products-header,
body.tax-product_cat .woocommerce-products-header,
body.post-type-archive-product .woocommerce-products-header { display: none !important; }

/* === HERO ============================================================ */
.tt-shop-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    flex-wrap: wrap;
    padding: 8px 0 28px;
}
.tt-shop-hero__copy { flex: 1 1 540px; }
.tt-shop-hero__tag {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wp--preset--color--brand);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.tt-shop-hero__dot {
    width: 8px; height: 8px; background: var(--wp--preset--color--brand); border-radius: 50%;
}
.tt-shop-hero__h {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    color: var(--wp--preset--color--brand) !important;
    font-size: clamp(34px, 4.6vw, 54px) !important;
    line-height: 1.05 !important;
    margin: 0 0 14px !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.tt-shop-hero__sub {
    color: var(--wp--preset--color--ink);
    max-width: 540px;
    margin: 0;
    line-height: 1.55;
    font-size: 15px;
}
/* Category description rendered under the H1 — may contain paragraphs + a link. */
.tt-shop-hero__desc { max-width: 640px; }
.tt-shop-hero__desc p { margin: 0 0 8px; }
.tt-shop-hero__desc p:last-child { margin-bottom: 0; }
.tt-shop-hero__desc a { color: var(--wp--preset--color--brand, #AA6F63); text-decoration: underline; font-weight: 700; }
.tt-shop-hero__meta {
    text-align: right;
    color: var(--wp--preset--color--ink-soft);
    font-size: 14px;
    line-height: 1.7;
}
.tt-shop-hero__meta strong { color: var(--wp--preset--color--ink); }
.tt-shop-hero__rating { color: var(--wp--preset--color--accent); font-weight: 600; }

/* === TWO-COLUMN GRID: sidebar + main ================================ */
.tt-shop-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    align-items: start;
}
@media (max-width: 1024px) { .tt-shop-grid { grid-template-columns: 1fr; } }
.tt-shop-main { min-width: 0; }

/* === SIDEBAR ========================================================= */
.tt-shop-side {
    background: #fff;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 16px;
    padding: 22px;
}

/* === MOBILE FILTER POP-UP =========================================== */
/* Filter trigger button — visible only on mobile (the sidebar shows
   inline on desktop so the button is redundant there). */
.tt-tb-filter-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--wp--preset--color--brand);
    border-radius: 999px;
    background: #fff;
    color: var(--wp--preset--color--brand);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease;
}
.tt-tb-filter-btn:hover { background: var(--wp--preset--color--cream); }
.tt-tb-filter-btn svg { display: block; }
.tt-shop-side__close { display: none; }
@media (max-width: 1024px) {
    .tt-tb-filter-btn { display: inline-flex; }
    /* Hide the inline sidebar on mobile; pop it in via .is-open. */
    .tt-shop-side {
        position: fixed !important;
        top: 0; right: 0; bottom: 0;
        width: min(420px, 92vw);
        max-height: 100vh;
        overflow-y: auto;
        z-index: 9999;
        border-radius: 16px 0 0 16px;
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: -12px 0 36px rgba(0, 0, 0, 0.22);
        margin: 0 !important;
        padding-bottom: 80px;
    }
    .tt-shop-side.is-open { transform: translateX(0); }
    .tt-shop-side__close {
        display: block;
        position: absolute;
        top: 12px;
        right: 16px;
        background: transparent;
        border: 0;
        font-size: 28px;
        color: var(--wp--preset--color--ink);
        cursor: pointer;
        line-height: 1;
        padding: 4px 8px;
    }
}
/* Backdrop overlay — injected by JS as a sibling of the sidebar. */
.tt-shop-filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 9998;
}
.tt-shop-filter-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Grid/List toggle UI fully removed — server stopped rendering it.
   Defensive CSS hides any cached / inline-edited remnant just in
   case a CDN holds an older HTML response after deploy. */
.tt-tb-view { display: none !important; }

/* Default-sort dropdown removed from the shop toolbar 2026-05-20.
   Defensive hide so any cached HTML or block-template fallback
   that still renders WooCommerce's catalog-ordering form is
   invisible. To restore: delete this rule + re-add the
   woocommerce_catalog_ordering() call in inc/shop-archive.php. */
body.woocommerce-shop .woocommerce-ordering,
body.tax-product_cat .woocommerce-ordering,
body.post-type-archive-product .woocommerce-ordering { display: none !important; }

/* Mobile filter-popup breathing room — pad the panel further off the
   left/right viewport edges so radio rows + section headings don't
   crowd the inner border. Inner form rows ALSO get their own left
   padding so the radio dot/option text aren't kissing the panel's
   inner left edge (previously they were flush against it). */
@media (max-width: 1024px) {
    .tt-shop-side[data-tt-filter-panel] {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .tt-shop-side[data-tt-filter-panel] .tt-shop-side__h {
        padding-right: 36px; /* keep heading clear of the × close button */
        margin-bottom: 20px !important;
    }
    .tt-shop-side[data-tt-filter-panel] .tt-facet,
    .tt-shop-side[data-tt-filter-panel] .tt-facet__opt,
    .tt-shop-side[data-tt-filter-panel] details {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}
.tt-shop-side__h {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    font-size: 20px !important;
    color: var(--wp--preset--color--brand) !important;
    margin: 0 0 14px !important;
    font-weight: 700;
}
.tt-shop-side__form { display: flex; flex-direction: column; gap: 0; }
.tt-facet {
    border-top: 1px solid var(--wp--preset--color--soft-pink);
    padding: 16px 0;
}
.tt-facet:first-of-type { border-top: 0; padding-top: 0; }
.tt-facet__h {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--wp--preset--color--ink-soft) !important;
    margin: 0 0 10px !important;
    font-weight: 700;
}
.tt-facet__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 2px 0;
    line-height: 1.3;
    cursor: pointer;
    color: var(--wp--preset--color--ink);
}
.tt-facet__opt input[type="radio"],
.tt-facet__opt input[type="checkbox"] {
    accent-color: var(--wp--preset--color--brand);
}
.tt-facet__count {
    margin-left: auto;
    color: var(--wp--preset--color--ink-soft);
    font-size: 12px;
}
.tt-facet__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-facet__chip {
    border: 1px solid var(--wp--preset--color--soft-pink);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    background: #fff;
    cursor: pointer;
    color: var(--wp--preset--color--ink);
    user-select: none;
    display: inline-flex;
    align-items: center;
    transition: all .15s ease;
}
.tt-facet__chip:hover { border-color: var(--wp--preset--color--brand); }
.tt-facet__chip:has(input:checked),
.tt-facet__chip.is-active {
    background: var(--wp--preset--color--brand);
    color: #fff;
    border-color: var(--wp--preset--color--brand);
}
.tt-facet__chip input { display: none; }

/* ── Collapsible filter dropdown — replaces the bubble/chip style for
   product attribute filters (Holiday, Style, Theme, etc.). Native
   <details>/<summary> + a chevron that rotates when open. ──────── */
.tt-facet--collapsible {
    border-top: 1px solid var(--wp--preset--color--soft-pink);
    padding: 0;
}
.tt-facet--collapsible[open] {
    padding-bottom: 14px;
}
.tt-facet__h-collapsible {
    cursor: pointer;
    list-style: none; /* hide default ▶ marker */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--ink-soft);
    font-weight: 700;
    user-select: none;
}
.tt-facet__h-collapsible::-webkit-details-marker { display: none; }
.tt-facet__h-collapsible:hover { color: var(--wp--preset--color--brand); }
.tt-facet__chev {
    transition: transform .18s ease;
    color: var(--wp--preset--color--brand);
    font-size: 14px;
    line-height: 1;
}
.tt-facet--collapsible[open] .tt-facet__chev { transform: rotate(180deg); }
.tt-facet__opts {
    display: flex;
    flex-direction: column;
    gap: 0; /* row padding on .tt-facet__opt handles spacing */
    /* Right padding clears the scrollbar so counts don't touch it. */
    padding: 0 12px 4px 0;
    /* Optional: cap height + scroll for very long term lists (rare). */
    max-height: 240px;
    overflow-y: auto;
}
.tt-facet__opts::-webkit-scrollbar { width: 4px; }
.tt-facet__opts::-webkit-scrollbar-thumb {
    background: rgba(170, 111, 99, .25);
    border-radius: 4px;
}

.tt-shop-side__apply {
    background: var(--wp--preset--color--brand);
    color: #fff;
    border: 0;
    padding: 14px;
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    margin-top: 12px;
    transition: background-color .15s ease;
}
.tt-shop-side__apply:hover { background: #000; }
.tt-shop-side__clear {
    color: var(--wp--preset--color--ink-soft);
    text-align: center;
    text-decoration: underline !important;
    font-size: 13px;
    margin-top: 10px;
    border-bottom: 0 !important;
    display: block;
}

/* === TOOLBAR — applied filter pills + view toggle + sort =========== */
.tt-shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 14px 20px;
    border-radius: 14px;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    margin: 0 0 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.tt-tb-applied { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tt-tb-applied-lbl {
    font-size: 13px;
    color: var(--wp--preset--color--ink-soft);
    font-weight: 700;
}
.tt-tb-applied-lbl--muted { font-weight: 500; }
.tt-tb-pill {
    background: var(--wp--preset--color--cream-light);
    color: var(--wp--preset--color--brand);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.tt-tb-pill a {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    opacity: 0.6;
    line-height: 1;
}
.tt-tb-pill a:hover { opacity: 1; }
.tt-tb-clear {
    font-size: 13px;
    color: var(--wp--preset--color--ink-soft) !important;
    text-decoration: underline !important;
    border-bottom: 0 !important;
    margin-left: 4px;
}
.tt-tb-right { display: flex; gap: 12px; align-items: center; }
.tt-tb-search { display: flex; align-items: center; border: 1px solid var(--wp--preset--color--tan, #EAD9CC); border-radius: 999px; background: #fff; overflow: hidden; }
.tt-tb-search__input { border: 0; outline: 0; background: transparent; padding: 7px 12px; font-size: 14px; color: #3B2A24; min-width: 150px; width: 190px; max-width: 42vw; }
.tt-tb-search__input::placeholder { color: #A8968C; }
.tt-tb-search__btn { border: 0; background: transparent; color: #AA6F63; padding: 7px 12px 7px 4px; cursor: pointer; display: flex; align-items: center; }
.tt-tb-search__btn:hover { color: #3B2A24; }
@media (max-width: 600px) { .tt-tb-search__input { min-width: 110px; width: 120px; } }
.tt-tb-view {
    display: flex;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 999px;
    overflow: hidden;
}
.tt-tb-view__btn {
    border: 0;
    padding: 8px 14px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--wp--preset--color--ink);
    transition: background-color .15s ease;
}
.tt-tb-view__btn.is-active {
    background: var(--wp--preset--color--ink);
    color: #fff;
}

/* Hide the WC native result count + ordering above-loop wrappers — our
   toolbar already covers them. */
body.woocommerce-shop .woocommerce-result-count,
body.tax-product_cat .woocommerce-result-count,
body.post-type-archive-product .woocommerce-result-count { display: none !important; }

/* === SIDEBAR — Color palette swatches ============================== */
.tt-facet__swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.tt-facet__swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--swatch);
    cursor: pointer;
    display: inline-block;
    position: relative;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--wp--preset--color--soft-pink);
    transition: box-shadow .15s ease;
}
.tt-facet__swatch:hover { box-shadow: 0 0 0 2px var(--wp--preset--color--brand); }
.tt-facet__swatch:has(input:checked),
.tt-facet__swatch.is-active {
    box-shadow: 0 0 0 2px var(--wp--preset--color--brand);
}
.tt-facet__swatch input { display: none; }

/* Counts on size chips */
.tt-facet__chip-count { opacity: 0.6; margin-left: 4px; font-size: 11px; }

/* === Cross-sell promo card (spans 2 columns inside the grid) ====== */
.tt-shop-promo {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--wp--preset--color--cream-light), var(--wp--preset--color--soft-pink));
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 18px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none !important;
    overflow: hidden;
}
.tt-shop-promo::before { display: none !important; }
.tt-shop-promo__icon { font-size: 60px; line-height: 1; flex-shrink: 0; }
/* Image variant of the icon — replaces the color-palette emoji.
   Transparent background, contain-fit so the full art shows without
   cropping, sized bigger than the original 140px icon slot. */
.tt-shop-promo__art {
    flex: 0 0 220px;
    width: 220px;
    height: auto;
    aspect-ratio: 1 / 1.2;
    margin: 0;
    background: transparent;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tt-shop-promo__art img {
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    background: transparent;
    display: block;
}
@media (max-width: 640px) {
    .tt-shop-promo__art { flex: 0 0 160px; width: 160px; }
}
.tt-shop-promo__copy { flex: 1; }
.tt-shop-promo__copy h3 {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    font-size: clamp(22px, 2.4vw, 30px) !important;
    color: var(--wp--preset--color--brand) !important;
    margin: 0 0 8px !important;
    font-weight: 700;
    line-height: 1.1;
}
.tt-shop-promo__copy p {
    color: var(--wp--preset--color--ink);
    margin: 0 0 16px;
    line-height: 1.5;
    font-size: 15px;
}
.tt-shop-promo__cta {
    background: var(--wp--preset--color--brand);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    border-bottom: 0 !important;
    transition: background-color .15s ease;
}
.tt-shop-promo__cta:hover { background: #000; }
@media (max-width: 720px) {
    /* On mobile the product grid is 2 columns; span:1 made the promo
       a skinny half-column. Force full-width with grid-column: 1 / -1
       so it spans every column regardless of grid-template. */
    .tt-shop-promo {
        grid-column: 1 / -1 !important;
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }
    .tt-shop-promo__art { flex: 0 0 auto; width: 200px; aspect-ratio: 1 / 1; }
}

/* === ORIGINAL TOOLBAR (sort + result count) — kept for fallback ===== */
body.woocommerce-shop .woocommerce-result-count,
body.tax-product_cat .woocommerce-result-count,
body.post-type-archive-product .woocommerce-result-count {
    color: var(--wp--preset--color--ink-soft);
    font-size: 13px;
    margin: 0;
}
body.woocommerce-shop .woocommerce-ordering,
body.tax-product_cat .woocommerce-ordering,
body.post-type-archive-product .woocommerce-ordering { margin: 0; }
body.woocommerce-shop .woocommerce-ordering select,
body.tax-product_cat .woocommerce-ordering select,
body.post-type-archive-product .woocommerce-ordering select {
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff;
    font-family: var(--wp--preset--font-family--body);
    font-size: 14px;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23AA6F63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT CARDS — clean rewrite, works for both legacy ul.products
   and the block-theme ul.wc-block-product-template.
   ════════════════════════════════════════════════════════════════════ */

/* Preorder chip — amber, sits in the top-left thumbnail badge stack next to
   Sale/New. Slightly longer text than the other chips, so drop the uppercase. */
.tt-card-badge--preorder,
.tt-product-badge--preorder {
    background: #F5A623;
    color: #3a2600;
    text-transform: none;
    letter-spacing: .2px;
    font-weight: 800;
}

/* Grid */
ul.products,
ul.wc-block-product-template {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 24px 0 !important;
}
@media (max-width: 1024px) {
    ul.products,
    ul.wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
    ul.products,
    ul.wc-block-product-template { grid-template-columns: 1fr !important; }
}

/* Last-row balancer tile (injected by assets/shop.js when the grid would
   otherwise end on a partial row — e.g. 24 products + the 2-col promo = 26
   cells). Spans the trailing empty column(s) so the grid always looks full,
   and doubles as a soft "build your own" CTA. */
.tt-grid-filler { list-style: none !important; margin: 0 !important; }
.tt-grid-filler::before { display: none !important; }
/* The filler li is height-pinned to the row's card height by shop.js and
   must NOT grid-stretch taller (or it bleeds into the next section). */
ul.products li.tt-grid-filler,
ul.wc-block-product-template li.tt-grid-filler { align-self: start; }
.tt-grid-filler__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 28px 24px;
    text-align: center;
    text-decoration: none;
    border: 1.5px dashed var(--wp--preset--color--soft-pink, #f0cabb);
    border-radius: 18px;
    background: linear-gradient(135deg,
        var(--wp--preset--color--cream-light, #fdf6f0),
        var(--wp--preset--color--soft-pink, #f7d2c8));
    color: var(--wp--preset--color--brown, #7a4f44);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tt-grid-filler__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(122, 79, 68, .14);
}
.tt-grid-filler__icon  { font-size: 34px; line-height: 1; }
.tt-grid-filler__title { font-weight: 800; font-size: 16px; }
.tt-grid-filler__sub   { font-size: 13.5px; font-weight: 600; opacity: .85; }
ul.products::before, ul.products::after { display: none !important; }

/* ── Category line under the single-product title (added by
   inc/product-accordions.php @ priority 6). ───────────────────────── */
.tt-product-category {
    margin: 2px 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--brand, #aa6f63);
}

/* ── Product-card control alignment ───────────────────────────────────
   Size dropdown + qty stepper + Add button must line up across a row no
   matter how many lines the title wraps to (1, 2, or 3). The grids
   already make every card in a row equal height; pushing the control
   block (.tt-card-cart-row) to the bottom with margin-top:auto lines the
   controls up regardless of title height — full titles still show (no
   truncation). Covers the shop/category grid AND the "More designs
   you'll love" related block. */
ul.products li.product,
ul.wc-block-product-template li.product { height: 100%; }
ul.products li.product .tt-card-cart-row,
ul.wc-block-product-template li.product .tt-card-cart-row,
.tt-product-card--cta .tt-card-cart-row {
    margin-top: auto !important;
}
/* Reserve ~2 lines for the title so 1-line titles don't leave the price
   floating high — does NOT cap height, so 3-line titles show in full. */
ul.products li.product .woocommerce-loop-product__title,
ul.wc-block-product-template li.product .woocommerce-loop-product__title,
.tt-product-card--cta .tt-product-name {
    min-height: 2.6em;
}

/* Card shell */
ul.products li.product,
ul.wc-block-product-template li.product {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    background: #fff;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 16px;
    overflow: hidden;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
ul.products li.product:hover,
ul.wc-block-product-template li.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(170, 111, 99, 0.15);
}
ul.products li.product::before { display: none !important; }

/* Image area — peach-tinted square frame, image contained at 78% */
ul.products li.product > a:first-of-type,
ul.wc-block-product-template li.product .wc-block-components-product-image {
    /* Positioning context for the absolutely-positioned img below.
       Display:block (not flex) plus the ::before padding-top hack
       guarantees the container has an explicitly resolved height —
       which absolute % offsets need to anchor against. */
    display: block !important;
    position: relative !important;
    aspect-ratio: 1 / 1;
    background: var(--wp--preset--color--cream-light);
    overflow: hidden;
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: 0 !important;
    text-decoration: none !important;
}
/* White-on-transparent designs disappear on the cream frame. The
   `.tt-card--dark-bg` class is added in PHP by post_class when the
   featured image's _tt_light_image meta is 1 (set at upload time and
   for back-fill, see inc/shop-archive.php tt_image_is_mostly_light). */
ul.products li.product.tt-card--dark-bg > a:first-of-type,
ul.wc-block-product-template li.product.tt-card--dark-bg .wc-block-components-product-image {
    background: #111 !important;
}
/* Single-product page mirror — body gets `.tt-single--dark-bg` from
   the body_class filter when the featured image is light. Applies to
   the main gallery frame on the product detail page. */
body.tt-single--dark-bg .woocommerce-product-gallery,
body.tt-single--dark-bg .woocommerce-product-gallery__image,
body.tt-single--dark-bg .woocommerce-product-gallery__image a,
body.tt-single--dark-bg .flex-viewport,
body.tt-single--dark-bg .wp-block-woocommerce-product-image-gallery,
body.tt-single--dark-bg .wp-block-woocommerce-product-image-gallery img {
    background: #111 !important;
}
ul.wc-block-product-template li.product .wc-block-components-product-image::before {
    content: "";
    display: block;
    padding-top: 100%; /* belt-and-suspenders height: 100% of width */
}
ul.products li.product .attachment-woocommerce_thumbnail,
ul.products li.product img:first-of-type,
ul.wc-block-product-template li.product .wc-block-components-product-image img {
    /* Inset 11% from every edge gives the image a 78%×78% box to fit
       inside, centered. object-fit:contain scales the image to fit
       within that box without cropping — so tall designs (DILF) and
       wide designs (LAKE BABE banner) both render fully visible.
       Note: for absolutely-positioned <img>, width:auto uses the
       NATURAL pixel width (not calc from offsets), so we have to set
       explicit width+height percentages. The ::before padding-top
       hack on the parent gives % heights a resolved value to use. */
    position: absolute !important;
    top: 11% !important;
    left: 11% !important;
    width: 78% !important;
    height: 78% !important;
    max-width: 78% !important;
    max-height: 78% !important;
    right: auto !important;
    bottom: auto !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Badges (top-left, stacked) — pointer-events off so click passes to link */
.tt-card-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}
.tt-card-badge {
    color: #fff;
    background: var(--wp--preset--color--brand);
    font: 700 10.5px/1.4 var(--wp--preset--font-family--body);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.tt-card-badge--made { background: #fff; color: var(--wp--preset--color--brand); border: 1px solid var(--wp--preset--color--soft-pink); }
/* Promo / sales badge — high-attention brand brown filled. Replaces
   the legacy "Printed in AZ" badge slot. Text is per-product editable
   via the Teddy Transfers admin tab. */
.tt-card-badge--promo {
    background: #AA6F63;
    color: #FFFFFF;
    border: 0;
    font-weight: 800;
    letter-spacing: .2px;
}
.tt-card-badge--new { background: #2F8F5A; }
.tt-card-badge--sale { background: var(--wp--preset--color--accent); color: #000; }
/* Sold Out — neutral grey so it reads as unavailable, not promotional.
   Same modifier on the single-product badge base. */
.tt-card-badge--soldout,
.tt-product-badge--soldout { background: #6b6b6b; color: #fff; }
/* Sold-out shop-loop button — greyed and non-interactive-looking. WC points it
   at the product permalink (view details), so it stays clickable but never adds.
   Full-width + centered: out of stock it's the only control in the cart row
   (qty stepper is skipped), so it spans the card and centers its label. */
/* High specificity (element + two classes) so this beats WordPress's global
   `.wp-element-button` background, which ties a bare `.tt-soldout-btn` on
   specificity and wins by load order — that's why it was still showing the
   brand-brown pill. */
a.button.tt-soldout-btn,
ul.products li.product a.button.tt-soldout-btn,
.tt-card-cart-row a.button.tt-soldout-btn {
    background: #e6e4e2 !important;
    color: #8a8580 !important;
    border-color: #e6e4e2 !important;
    cursor: not-allowed !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
}
/* Sold-out row is single-column so the button spans the full card width. */
ul.products li.product .tt-card-cart-row:has(.tt-soldout-btn),
.tt-card-cart-row:has(.tt-soldout-btn) {
    display: block !important;
    grid-template-columns: 1fr !important;
}
/* Block-grid (Product Collection) sold-out cards render a WC blocks button /
   "Read more" link WITHOUT the .tt-soldout-btn class, so the rule above missed
   them and they showed a left-aligned brand-brown pill. Target the out-of-stock
   <li> directly so the sold-out control is full-width, centered and muted. */
ul.wc-block-product-template li.product.outofstock .tt-card-cart-row,
ul.wc-block-product-template li.product.outofstock .wc-block-components-product-button,
ul.wc-block-product-template li.product.outofstock .wp-block-woocommerce-product-button,
ul.products li.product.outofstock .tt-card-cart-row {
    display: block !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
}
ul.wc-block-product-template li.product.outofstock .wc-block-components-product-button .wp-block-button__link,
ul.wc-block-product-template li.product.outofstock a.button,
ul.wc-block-product-template li.product.outofstock button.wp-block-button__link,
ul.products li.product.outofstock a.button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: #e6e4e2 !important;
    color: #8a8580 !important;
    border-color: #e6e4e2 !important;
    cursor: not-allowed !important;
    margin: 0 !important;
}
/* Keep the sold-out button muted on HOVER too — the in-stock hover rule
   (…li.product…:hover → black + lift) also matches an out-of-stock card; the
   extra .outofstock raises specificity so this wins, and it cancels the base
   .wp-element-button lift/glow. Without this, hovering Sold Out turned it black. */
ul.wc-block-product-template li.product.outofstock .wc-block-components-product-button .wp-block-button__link:hover,
ul.wc-block-product-template li.product.outofstock .wp-block-woocommerce-product-button .wp-block-button__link:hover,
ul.wc-block-product-template li.product.outofstock a.button:hover,
ul.products li.product.outofstock a.button:hover {
    background: #e6e4e2 !important;
    color: #8a8580 !important;
    transform: none !important;
    box-shadow: none !important;
}
/* Variant-proof sold-out button: target .tt-soldout-btn directly (the class the
   loop filter stamps on it) AND force every possible wrapper to a full-width
   block, so no sold-out control — block button, variable-product "Read more",
   or a mobile grid cell — can hang off to one side. */
.tt-soldout-btn,
ul.wc-block-product-template li.product.outofstock .wp-block-button__link,
ul.wc-block-product-template li.product.outofstock a.button,
ul.products li.product.outofstock a.button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
    background: #e6e4e2 !important;
    color: #8a8580 !important;
    border-color: #e6e4e2 !important;
    cursor: not-allowed !important;
    margin: 0 !important;
}
ul.wc-block-product-template li.product.outofstock .wc-block-components-product-button,
ul.wc-block-product-template li.product.outofstock .wp-block-woocommerce-product-button,
ul.wc-block-product-template li.product.outofstock .wp-block-button,
ul.wc-block-product-template li.product.outofstock .tt-card-cart-row {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
    margin: 0 16px 16px !important;   /* same side inset as the rest of the card body */
}

/* Low-stock urgency badge ("Only N left!") — sits in the card body above the
   buy row (see tt_low_stock hook in inc/shop-archive.php). */
.tt-card-stock-alert {
    margin: 4px 16px 6px !important;
    padding: 0 !important;
    font: 700 12px/1.3 var(--wp--preset--font-family--body, system-ui, sans-serif) !important;
    color: #c0392b !important;
    text-align: center !important;
    letter-spacing: .02em !important;
}
/* The card is a flex column with explicit child orders; without one, the alert
   defaults to order:0 and lands under the image. Slot it just above the buy row. */
ul.wc-block-product-template li.product .tt-card-stock-alert { order: 14 !important; }

/* Centered add-to-cart error toast (shop.js ttCenterToast) — replaces the old
   ugly top-right WC notice that only appeared on the NEXT page load. */
#tt-center-toast {
    position: fixed; inset: 0; z-index: 100000;
    display: grid; place-items: center; padding: 20px; pointer-events: none;
}
#tt-center-toast .tt-ct-inner {
    pointer-events: auto; cursor: pointer;
    display: flex; align-items: center; gap: 12px;
    max-width: 400px; background: #fff; color: #4A3328;
    border: 1px solid rgba(200,85,61,.22); border-left: 4px solid #C8553D;
    border-radius: 14px; padding: 15px 20px;
    box-shadow: 0 16px 48px rgba(0,0,0,.20);
    font: 600 14px/1.45 var(--wp--preset--font-family--body, system-ui, sans-serif);
    opacity: 0; transform: translateY(8px) scale(.97);
    transition: opacity .2s ease, transform .2s ease;
}
#tt-center-toast.is-in .tt-ct-inner { opacity: 1; transform: none; }
#tt-center-toast .tt-ct-ico {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    background: #C8553D; color: #fff; display: grid; place-items: center;
    font: 800 15px/1 system-ui, sans-serif;
}

/* Heart (top-right) — outside the link, clickable on its own */
.tt-card-heart {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    background: #fff;
    border: 1px solid var(--wp--preset--color--soft-pink);
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 3;
    color: var(--wp--preset--color--brand);
    padding: 0;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.tt-card-heart svg { display: block; }
.tt-card-heart:hover { background: var(--wp--preset--color--brand); color: #fff; transform: scale(1.05); }

/* Card body — all text centered. Eyebrow sits close to the image
   with just a small breathing gap, then title + price follow. */
.tt-card-eyebrow {
    margin: 8px 16px 2px !important;
    padding: 0 !important;
    font: 600 11px/1.2 var(--wp--preset--font-family--body) !important;
    letter-spacing: 0.08em !important;
    color: var(--wp--preset--color--ink-soft) !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3,
ul.wc-block-product-template li.product h2.wp-block-post-title,
ul.wc-block-product-template li.product .wp-block-post-title {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #000 !important;
    margin: 0 16px 6px !important;
    padding: 0 !important;
    text-align: center !important;
    letter-spacing: -0.005em !important;
}
ul.wc-block-product-template li.product h2.wp-block-post-title a,
ul.wc-block-product-template li.product .wp-block-post-title a,
ul.products li.product .woocommerce-loop-product__title a {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

/* Review row — centered */
.tt-card-reviewcount {
    margin: 0 16px 8px !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: var(--wp--preset--color--ink) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.tt-card-stars { color: var(--wp--preset--color--soft-pink); letter-spacing: 1px; line-height: 1; }
.tt-card-stars .on { color: var(--wp--preset--color--accent); }
.tt-card-rating-num { font-weight: 700; color: #000; }
.tt-card-rating-cnt { color: var(--wp--preset--color--ink-soft); font-size: 12px; }
/* Hide WC's default star rating (we render our own) */
ul.products li.product .star-rating,
ul.wc-block-product-template li.product .wc-block-components-product-rating { display: none !important; }

/* Price — Karla on shop cards (per-product display) */
ul.products li.product .price,
ul.wc-block-product-template li.product .wc-block-components-product-price,
ul.wc-block-product-template li.product .wp-block-woocommerce-product-price {
    margin: 12px 16px 10px !important;
    padding: 0 !important;
    font-family: 'Karla', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #000 !important;
    text-align: center !important;
    display: flex !important;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0;
}
/* Coozie landing cards: show the oz size on its own line under the price.
   :has() scopes the flex-wrap so only price blocks carrying an oz sub-line
   wrap — every other product card is untouched. */
.wp-block-woocommerce-product-price:has(.tt-coozie-landing-price__oz),
.wc-block-components-product-price:has(.tt-coozie-landing-price__oz) {
    flex-wrap: wrap !important;
}
/* In the block price wrapper the size sits on its own centered line, so the
   inline separator is redundant there — hide it. In compact card grids
   (.tt-product-card__price, a plain block) the separator stays and cleanly
   splits "… min · 12 oz". */
.wp-block-woocommerce-product-price .tt-coozie-landing-price__sep,
.wc-block-components-product-price .tt-coozie-landing-price__sep {
    display: none;
}
.tt-coozie-landing-price__oz {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 2px;
    font: 700 12px/1.2 'Karla', system-ui, sans-serif;
    color: var(--wp--preset--color--brand, #AA6F63);
    text-align: center;
    letter-spacing: 0.02em;
}
ul.wc-block-product-template li.product .wc-block-components-product-price::before {
    content: 'From';
    font: 500 11px/1 var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--ink-soft);
    text-transform: none;
    letter-spacing: 0;
}
ul.wc-block-product-template li.product .wc-block-components-product-price::before {
    content: 'From';
    font: 500 12px/1 var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--ink-soft);
    text-transform: none;
    letter-spacing: 0;
}
ul.products li.product .price del,
ul.wc-block-product-template li.product .wc-block-components-product-price del {
    font: 500 13px/1 var(--wp--preset--font-family--body) !important;
    color: var(--wp--preset--color--ink-soft) !important;
    text-decoration: line-through !important;
    margin-left: 6px !important;
    opacity: 1 !important;
}
ul.products li.product .price ins,
ul.wc-block-product-template li.product .wc-block-components-product-price ins {
    background: transparent !important;
    text-decoration: none !important;
    font-weight: inherit !important;
}

/* Clickable size pills row on product cards — centered */
.tt-card-sizes {
    margin: 0 16px 14px !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.tt-card-size {
    padding: 5px 11px;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 999px;
    font: 600 12px/1.2 var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--ink);
    background: #fff;
    cursor: pointer;
    transition: all .15s ease;
    line-height: 1;
}
.tt-card-size:hover {
    border-color: var(--wp--preset--color--brand);
    color: var(--wp--preset--color--brand);
}
.tt-card-size.is-active,
.tt-card-size--hot {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* Mobile mirror: server renders a <select> INSIDE .tt-card-cart-row
   alongside qty + ATC so the size picker lines up to the LEFT of the
   quantity stepper on mobile. Hidden on desktop where pills (above)
   handle size selection. */
.tt-card-sizes-select {
    display: none;
    padding: 0 28px 0 14px;
    height: 36px;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 999px;
    background: #fff;
    font: 700 13px/1 var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--ink);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%234A3328' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    flex: 0 0 auto;
    min-width: 70px;
    box-sizing: border-box;
}
/* Legacy mobile rules removed 2026-05-20 — the new .tt-card-cart-row
   grid base (3 cols on desktop, 2 cols + ATC-on-row-2 on mobile)
   replaces them entirely. Old flex/wrap rules conflicted with the
   grid layout and caused variant + qty to break onto separate lines. */

/* Military / School / Reseller benefits page — full-bleed layout.
   The page.html template renders a wp:post-title above the content
   that duplicated the in-page hero h1; also the main wrapper's
   clamp(20-40px) horizontal padding kept the alignfull hero cover
   from bleeding viewport-edge to viewport-edge. Targeting page-id
   so this only affects /military-school-discounts/. */
body.page-id-382 main > .wp-block-post-title,
body.page-id-382 main > h1.wp-block-post-title { display: none !important; }
body.page-id-382 main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    max-width: none !important;
}
body.page-id-382 .wp-block-post-content,
body.page-id-382 main > .wp-block-post-content {
    max-width: none !important;
    width: 100% !important;
}

/* Add-to-cart button states (loading / added) on shop cards.
   The button keeps its natural width — we hide the "Add" label with
   color:transparent and overlay a spinner or checkmark via ::after,
   so the pill never grows or shrinks between states. */
.add_to_cart_button.is-loading,
.add_to_cart_button.is-added,
.add_to_cart_button.is-error,
ul.products li.product .add_to_cart_button.is-loading,
ul.wc-block-product-template li.product .wp-block-button__link.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.add_to_cart_button.is-loading::after,
.add_to_cart_button.is-added::after,
.add_to_cart_button.is-error::after,
ul.wc-block-product-template li.product .wp-block-button__link.is-loading::after {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    content: '';
}
/* Spinner — pure CSS rotating ring */
.add_to_cart_button.is-loading::after,
ul.wc-block-product-template li.product .wp-block-button__link.is-loading::after {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tt-atc-spin .7s linear infinite;
}
@keyframes tt-atc-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* Success — just a checkmark glyph, no "Added" text */
.add_to_cart_button.is-added::after {
    content: '✓';
    font: 700 16px/1 var(--wp--preset--font-family--body, system-ui, sans-serif);
}
ul.products li.product .add_to_cart_button.is-added,
ul.wc-block-product-template li.product .wp-block-button__link.is-added {
    background: #2F8F5A !important;
}
/* Error — exclamation only, brand-error red */
.add_to_cart_button.is-error::after {
    content: '!';
    font: 800 16px/1 var(--wp--preset--font-family--body, system-ui, sans-serif);
}
.add_to_cart_button.is-error {
    background: #C8553D !important;
}
/* Robust label-hiding for all three states across BOTH button types. The WC
   blocks button renders its "Add" label in an inner <span>, and color:transparent
   on the button doesn't reliably hide it (the span can carry its own colour) — so
   the checkmark landed on top of a still-visible "Add". Collapse the inner content
   directly and keep only the ::after glyph. */
.add_to_cart_button.is-added, .add_to_cart_button.is-loading, .add_to_cart_button.is-error,
.wp-block-button__link.is-added, .wp-block-button__link.is-loading, .wp-block-button__link.is-error {
    position: relative;
    color: transparent !important;
    text-shadow: none !important;
}
.add_to_cart_button.is-added > *, .add_to_cart_button.is-loading > *, .add_to_cart_button.is-error > *,
.wp-block-button__link.is-added > *, .wp-block-button__link.is-loading > *, .wp-block-button__link.is-error > * {
    opacity: 0 !important;   /* hides the inner <span> label; ::after (not a child) stays visible */
}
/* Ensure the block button (may lack .add_to_cart_button after variation sync)
   still gets the checkmark/exclamation glyph. */
.wp-block-button__link.is-added::after  { content: '✓'; }
.wp-block-button__link.is-error::after  { content: '!'; }
.wp-block-button__link.is-added::after, .wp-block-button__link.is-error::after {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #fff; font: 700 16px/1 var(--wp--preset--font-family--body, system-ui, sans-serif);
}

/* Cart row: variant ▾  |  qty stepper  |  Add-to-Cart, side-by-side
   on every breakpoint. Grid layout pins each element so they never
   wrap onto separate lines regardless of card width. On mobile the
   ATC button shifts to row 2 (see the @media ≤720px below); on
   desktop all three sit inline on a single row. */
.tt-card-cart-row {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    gap: 8px;
    margin: 0 16px 16px;
    align-items: center;
}
/* Variant dropdown — always shown on cards that have it; sits in
   the first cart-row column. The legacy size-pills row above the
   title is hidden everywhere since the dropdown does the same job
   and consolidates the picker to the cart-row. */
.tt-card-sizes { display: none !important; }
.tt-card-sizes-select {
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}
.tt-card-cart-row .tt-card-qty {
    grid-column: 2;
    grid-row: 1;
}
/* Mobile cart-row: same variant + qty layout (row 1), but the ATC
   wraps to row 2 spanning both columns. The card is too narrow at
   ~150px on a 2-col 360px viewport to fit all three side-by-side. */
@media (max-width: 720px) {
    .tt-card-cart-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        margin: 0 12px 14px !important;
    }
    .tt-card-sizes-select { grid-column: 1 !important; grid-row: 1 !important; padding: 0 22px 0 10px !important; height: 36px !important; }
    .tt-card-cart-row .tt-card-qty { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; }
    .tt-card-cart-row .tt-card-qty__btn { width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; }
    .tt-card-cart-row .tt-card-qty__input { width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; }
    .tt-card-cart-row .wc-block-components-product-button,
    .tt-card-cart-row .wp-block-woocommerce-product-button,
    .tt-card-cart-row .wp-block-button {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
    }
    ul.products li.product .button.add_to_cart_button,
    ul.products li.product .added_to_cart,
    ul.wc-block-product-template li.product .wc-block-components-product-button .wp-block-button__link,
    ul.wc-block-product-template li.product .wp-block-woocommerce-product-button .wp-block-button__link {
        width: 100% !important;
        padding: 10px 8px !important;
        letter-spacing: 0.03em !important;
        font-size: 11px !important;
    }
}
.tt-card-cart-row .wc-block-components-product-button,
.tt-card-cart-row .wp-block-woocommerce-product-button {
    grid-column: 3;
    grid-row: 1;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    min-width: 0;
}
.tt-card-cart-row .wp-block-button {
    margin: 0 !important;
    display: inline-block;
}
.tt-card-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
    flex: 0 0 auto;
}
.tt-card-qty__btn {
    width: 28px;
    height: 36px;
    border: 0;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
    line-height: 1;
}
.tt-card-qty__btn:hover { color: var(--wp--preset--color--brand); }
.tt-card-qty__input {
    width: 28px;
    height: 36px;
    border: 0;
    text-align: center;
    font: 700 13px/1 var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--ink);
    background: transparent;
    outline: none;
    -moz-appearance: textfield;
}
.tt-card-qty__input::-webkit-outer-spin-button,
.tt-card-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Add to Cart button — fills the rest of the row */
ul.products li.product .button.add_to_cart_button,
ul.products li.product .added_to_cart,
ul.wc-block-product-template li.product .wc-block-components-product-button .wp-block-button__link,
ul.wc-block-product-template li.product .wp-block-woocommerce-product-button .wp-block-button__link {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    background: var(--wp--preset--color--brand) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    height: 36px;
    box-sizing: border-box;
    font: 700 12px/1 var(--wp--preset--font-family--body) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    transition: background-color .15s ease, transform .12s ease !important;
}
ul.products li.product .button.add_to_cart_button:hover,
ul.wc-block-product-template li.product .wc-block-components-product-button .wp-block-button__link:hover,
ul.wc-block-product-template li.product .wp-block-woocommerce-product-button .wp-block-button__link:hover {
    background: #000 !important;
    transform: translateY(-1px);
}
ul.wc-block-product-template li.product .wc-block-components-product-button,
ul.wc-block-product-template li.product .wp-block-woocommerce-product-button {
    margin: 0 !important;
    text-align: left !important;
    order: 7;
}

/* ── Builder-product card CTA (coozies "Build yours →", by-size "Upload
   your designs →"). The product-button block emits our raw
   <a class="button tt-product-card__add …"> WITHOUT the .wp-block-button__link
   wrapper the rules above style, so it was rendering as a plain underlined
   link. Give it the same pill button and pin it to the card bottom. ── */
ul.wc-block-product-template li.product a.button.tt-product-card__add,
ul.products li.product a.button.tt-product-card__add {
    align-self: stretch !important;               /* fill the card width */
    margin: auto 14px 16px !important;             /* top:auto pins to card bottom */
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto !important;
    max-width: none !important;
    background: var(--wp--preset--color--brand) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;                 /* filled rectangle, not a pill */
    padding: 14px 24px !important;
    font: 700 13px/1 var(--wp--preset--font-family--body) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .15s ease, transform .12s ease !important;
}
ul.wc-block-product-template li.product a.button.tt-product-card__add:hover,
ul.products li.product a.button.tt-product-card__add:hover {
    background: #000 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* === SLIDE-OUT CART DRAWER ========================================== */
.tt-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 100000;   /* above the chat launcher (99998) so the cart covers it */
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    cursor: pointer;
}
.tt-cart-overlay.is-open { opacity: 1; visibility: visible; }

/* ============================================================
   TEDDY TRANSFERS — SLIDE-OUT CART REDESIGN
   ============================================================ */

/* ---------- Drawer container ---------- */
aside.tt-cart-drawer {
  width: 460px !important;
  max-width: 100vw;
  position: fixed;
  top: 0;
  right: 0;
  /* dvh tracks the currently-visible viewport so the drawer
     never extends below the visible area on iOS Safari (vh
     includes the URL-bar zone, which pushed the footer's
     coupon + Checkout button into iOS's bottom gesture strip
     where taps were getting hijacked into Safari's
     back/share/tabs UI). vh stays as a fallback for older
     browsers without dvh support. */
  height: 100vh;
  height: 100dvh;
  background: #F7EBE1 !important;
  box-shadow: -12px 0 40px rgba(0, 0, 0, .18) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 100001;   /* above the chat launcher (99998) + the cart overlay */
  overflow: hidden !important;
  padding: 0 !important;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
aside.tt-cart-drawer.is-open { transform: translateX(0); }

/* Stack order inside the drawer */
aside.tt-cart-drawer > .tt-cart-drawer__head { order: 0; flex: 0 0 auto; }
aside.tt-cart-drawer > .tt-ship-bar          { order: 1; flex: 0 0 auto; }
aside.tt-cart-drawer > .tt-cart-drawer__body { order: 2; flex: 1 1 auto; min-height: 100px; overflow-y: auto !important; }
aside.tt-cart-drawer > .tt-cart-foot         { order: 4; flex: 0 0 auto; }

/* Desktop ≥ 1024px: widen the drawer and split into two columns —
   line items on the left, totals + checkout on the right. Mobile/
   tablet keeps the single-column slide-out unchanged. */
@media (min-width: 1024px) {
  aside.tt-cart-drawer {
    width: min(920px, 92vw) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "ship ship"
      "body foot";
  }
  aside.tt-cart-drawer > .tt-cart-drawer__head { grid-area: head; }
  aside.tt-cart-drawer > .tt-ship-bar          { grid-area: ship; }
  aside.tt-cart-drawer > .tt-cart-drawer__body {
    grid-area: body;
    overflow-y: auto !important;
    border-right: 1px solid rgba(170, 111, 99, .14);
  }
  aside.tt-cart-drawer > .tt-cart-foot {
    grid-area: foot;
    overflow-y: auto;
    padding: 22px 24px !important;
    background: #fff !important;
    box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
  }
}

.tt-cart-drawer__body::-webkit-scrollbar { width: 6px; }
.tt-cart-drawer__body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .2); border-radius: 3px; }

/* ---------- Header ---------- */
.tt-cart-drawer__head {
  /* Solid TT brand brown across the top — no gradient. */
  background: #AA6F63 !important;
  color: #FFFFFF !important;
  padding: 12px 20px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none !important;
}
.tt-cart-drawer__h {
  font-family: 'Karla', sans-serif;
  font-size: 18px !important;
  margin: 0 !important;
  color: #FFFFFF !important;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Cart icon in the title — cream so it reads as a soft accent
   against the brown bar while the title text stays crisp white. */
.tt-cart-drawer__h > svg { color: #F7EBE1; }
.tt-cart-drawer__h .tt-cart-count {
  background: #F7EBE1;
  color: #AA6F63;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 700;
  font-family: 'Karla', sans-serif;
}
.tt-cart-drawer__close {
  background: transparent !important;
  color: #F7EBE1 !important;
  border: 1px solid rgba(247, 235, 225, .35) !important;
  border-radius: 50% !important;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  cursor: pointer;
}
.tt-cart-drawer__close:hover {
  background: rgba(247, 235, 225, .15) !important;
  transform: rotate(90deg);
}
.tt-cart-drawer__close svg line { stroke: #F7EBE1 !important; }

/* ---------- Free-shipping progress bar ----------
   Same solid brown as the header so the top section reads as one
   unified bar. White text, cream icon, no gradient. */
.tt-ship-bar {
  padding: 10px 20px;
  background: #AA6F63;
  color: #FFFFFF;
  border-top: 1px solid rgba(247, 235, 225, .15);
}
.tt-ship-bar__msg {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  margin-bottom: 7px;
  font-weight: 500;
  color: #FFFFFF;
}
.tt-ship-bar__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: #F7EBE1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #AA6F63;
  overflow: hidden;
}
.tt-ship-bar__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.tt-ship-bar__msg strong { color: #F7EBE1; font-weight: 700; }
.tt-ship-bar__track {
  position: relative;
  height: 6px;
  background: rgba(247, 235, 225, .25);
  border-radius: 999px;
  overflow: hidden;
}
.tt-ship-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: #F7EBE1;
  border-radius: 999px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.tt-ship-bar__fill.is-complete {
  background: #F7D2C7;
}

/* ---------- Body / items ---------- */
.tt-cart-drawer__body { padding: 14px 18px 8px !important; }
.woocommerce-mini-cart.cart_list {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.woocommerce-mini-cart-item.mini_cart_item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  margin: 0 0 6px !important;
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  border-radius: 12px !important;
  position: relative !important;
  transition: all .2s;
}
.woocommerce-mini-cart-item.mini_cart_item:hover {
  border-color: #AA6F63 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

/* The tile is the ONE source of truth for thumb size — the <img> below fills
   it. Change the size here and the image follows. `overflow:hidden` means a
   stray image can never visually escape the tile onto the title. */
.tt-item-thumb {
  flex-shrink: 0;
  display: block;
  line-height: 0;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 8px;
}
/* Lock down the thumb image — WooCommerce's defaults
   (`.woocommerce ul.cart_list li img { width: 32px; float: right }`)
   would float the image to the right and break the flex layout. The
   triple-selector below outscopes those defaults so our sizing wins
   regardless of stylesheet load order. `object-fit: contain` so wide
   gang-sheet designs aren't cropped — letterboxing inside the tile
   reads cleaner than chopping the design's edges.

   Sized in PERCENT, not pixels: these used to be a hard 72px in all six
   dimensions, so when the mobile breakpoint shrank the .tt-item-thumb box to
   58px the image kept its 72px and overflowed 14px to the right, over the
   product title ("the letters are going into the image and the image looks
   like its going out of the box" — owner screenshot, 2026-08-01). Binding the
   image to its container makes that class of bug impossible at any width. */
.tt-cart-drawer .tt-item-thumb img,
.tt-cart-drawer .mini_cart_item .tt-item-thumb img,
.tt-cart-drawer .woocommerce-mini-cart-item .tt-item-thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
  object-fit: contain !important;
  background: #FFF8F1 !important;
  border: 1px solid #F0E1D2 !important;
  box-sizing: border-box !important;
}
/* Any stray <img> directly inside the mini cart item (e.g. a
   leftover from a stale fragment) gets neutralised the same way so
   it can't visually mis-render before buildDrawer() restructures. */
.tt-cart-drawer .woocommerce-mini-cart-item > img,
.tt-cart-drawer .mini_cart_item > img {
  width: 72px !important;
  height: 72px !important;
  float: none !important;
  margin: 0 !important;
}

.tt-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Right-side stack: price on top, qty stepper directly under it. */
.tt-item-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
}
/* Title — high specificity to beat any WC defaults like
   `.woocommerce ul.cart_list li a { font-size: ... font-weight: 700 }`. */
.tt-cart-drawer .tt-item-title,
.tt-cart-drawer .mini_cart_item .tt-item-title,
.tt-cart-drawer .woocommerce-mini-cart-item .tt-item-title {
  font-family: 'Karla', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #000000 !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
  padding-right: 18px !important;
  /* Wrap long titles to two lines instead of hard-truncating them to a
     single word ("Custom DTF Gang Sh…" / "Baseb…"). The flex/grid row
     absorbs the extra height; min-width:0 on .tt-item-info keeps the
     stepper on the row. */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tt-cart-drawer .tt-item-price {
  font-size: 12px !important;
  color: #AA6F63 !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
.tt-cart-drawer .tt-item-price b { color: #000000 !important; font-weight: 700 !important; }
/* BOGO — struck-through original + red sale price (cart drawer + cart/checkout). */
.tt-cart-drawer .tt-item-price__was{display:block;color:#b6a5a0;text-decoration:line-through;font-size:.72rem;font-weight:600;line-height:1;}
.tt-cart-drawer .tt-item-price__now{color:#c0392b !important;font-weight:800 !important;}
del.tt-bogo-was{color:#b6a5a0;text-decoration:line-through;margin-right:5px;}
ins.tt-bogo-now{text-decoration:none;color:#c0392b;font-weight:700;}

/* Variation attributes the WC template emits via
   wc_get_formatted_cart_item_data — render them small + muted directly
   under the title (no gap) so the meta reads as a subtitle. */
.tt-cart-drawer .tt-item-meta,
.tt-cart-drawer .woocommerce-mini-cart-item .tt-item-meta {
  font-size: 12px !important;
  color: #6E5145 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
}
/* "Preview design" pill in the slide-out cart — matches the checkout pill. */
.tt-cart-drawer .woocommerce-mini-cart-item .tt-item-preview {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 8px 0 0; padding: 6px 12px;
  background: #f1ecff; color: #6c43e0 !important;
  border: 1px solid #ddd2ff; border-radius: 999px;
  font-family: 'Karla', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .2px; text-decoration: none; line-height: 1;
  transition: background .15s ease, border-color .15s ease;
  /* Keep the pill on one line at its natural width instead of getting
     squeezed/wrapped when the info column is narrow. */
  align-self: flex-start;
  flex-shrink: 0;
  white-space: nowrap;
  max-width: 100%;
}
.tt-cart-drawer .woocommerce-mini-cart-item .tt-item-preview svg { flex-shrink: 0; }
.tt-cart-drawer .woocommerce-mini-cart-item .tt-item-preview:hover {
  background: #7c5cfd; border-color: #7c5cfd; color: #fff !important;
}
.tt-cart-drawer .woocommerce-mini-cart-item .tt-item-preview svg { display: block; }
.tt-cart-drawer .tt-item-meta p,
.tt-cart-drawer .tt-item-meta dl { margin: 0 !important; padding: 0 !important; }
.tt-cart-drawer .tt-item-meta dt,
.tt-cart-drawer .tt-item-meta dd {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.tt-cart-drawer .tt-item-meta dd::after { content: " "; }

/* Quantity stepper */
.tt-qty {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: #F7EBE1;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 999px;
  overflow: hidden;
  height: 28px;
}
.tt-qty button {
  width: 24px;
  height: 28px;
  border: none;
  background: transparent;
  color: #000000;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s;
}
.tt-qty button:hover { background: #AA6F63; color: #FFFFFF; }
.tt-qty button:disabled { opacity: .35; cursor: not-allowed; }
.tt-qty__val {
  min-width: 22px;
  text-align: center;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #000000;
}
/* Compact the slide-out cart qty picker. .tt-qty__val is an
   <input type="number"> which renders at the browser default (~152px)
   with native spinner arrows, making the whole stepper ~209px wide and
   overlapping the item name/price. Cap the width, strip the spinners,
   and blend the field into the pill so it reads as a tidy − 1 + control. */
.tt-cart-drawer .tt-qty__val {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}
.tt-cart-drawer .tt-qty__val::-webkit-inner-spin-button,
.tt-cart-drawer .tt-qty__val::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Remove (×) button — now sits at top of the right-side column above
   the price + qty stack. Static positioning since it's inline. */
.woocommerce-mini-cart-item a.remove,
.tt-item-side a.remove {
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 16px !important;
  text-align: center;
  font-size: 13px !important;
  font-weight: 700;
  background: transparent !important;
  color: rgba(0, 0, 0, .4) !important;
  border-radius: 50%;
  text-decoration: none !important;
  transition: opacity .2s, color .2s;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 2px;
}
/* Hover: just fade the X. Selector includes .tt-cart-drawer ancestor so
   it outscopes WooCommerce core's `.woocommerce a.remove:hover { color:
   #fff !important; background: var(--wc-red) }`, which otherwise made
   the X turn white-on-transparent and vanish into the white card. */
.tt-cart-drawer .woocommerce-mini-cart-item a.remove:hover,
.tt-cart-drawer .tt-item-side a.remove:hover {
  opacity: .65 !important;
  color: rgba(0, 0, 0, .55) !important;
  background: transparent !important;
}

/* Hide native WC quantity text + button block (replaced by our UI) */
.woocommerce-mini-cart-item .quantity { display: none !important; }
.woocommerce-mini-cart__total,
.woocommerce-mini-cart__buttons,
.woocommerce-mini-cart__fee { display: none !important; } /* __fee is a JS data source; shown as a footer row instead */

/* ---------- Footer ---------- */
.tt-cart-foot {
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, .08);
  /* Reserve generous bottom space so the coupon input + Checkout
     button sit clearly above iOS Safari's bottom gesture strip
     (home indicator zone + back/share/tabs trigger area). Without
     this, taps inside the bottom ~44px were getting hijacked by
     Safari's chrome. 32px buffer + env(safe-area-inset-bottom)
     for devices with a home indicator (an extra 34px). */
  padding: 12px 20px calc(32px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .05);
}
.tt-cart-foot__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Karla', sans-serif;
}
.tt-cart-foot__row + .tt-cart-foot__row { margin-top: 5px; }
.tt-cart-foot__row span:first-child { color: #AA6F63; font-size: 13px; }
.tt-cart-foot__row span:last-child { color: #000000; font-size: 14px; font-weight: 600; }
/* Automatic-discount rows (e.g. "Buy More, Save More") read as a saving. */
.tt-cart-foot__row--discount span { color: #2e7d52 !important; font-weight: 700; }

.tt-cart-foot__total {
  padding-top: 9px;
  margin-top: 9px;
  border-top: 1px dashed rgba(0, 0, 0, .15);
}
.tt-cart-foot__total span:first-child {
  font-size: 15px;
  font-weight: 700;
  color: #000000;
  font-family: 'Karla', sans-serif;
}
.tt-cart-foot__total span:last-child {
  font-size: 24px;
  font-weight: 700;
  color: #000000;
  font-family: 'Karla', sans-serif;
}

/* Members-save line under total */
.tt-member-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 12px;
  background: #F7EBE1;
  border: 1px dashed #AA6F63;
  border-radius: 10px;
  font-size: 12.5px;
  color: #000000;
  font-family: 'Karla', sans-serif;
}
.tt-member-line__icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  background: #AA6F63;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
}
.tt-member-line__text { flex: 1; line-height: 1.3; }
.tt-member-line__text b { font-weight: 700; }
.tt-member-line__cta {
  color: #000000;
  font-weight: 700;
  text-decoration: underline;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.tt-cart-foot__note {
  text-align: center;
  font-size: 11.5px;
  color: #AA6F63;
  margin: 6px 0 8px;
}

.tt-cart-foot__btns {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  margin-top: 6px;
}
/* Single-button mode — full-width Checkout, no View Cart sibling. */
.tt-cart-foot__btns--single {
  grid-template-columns: 1fr;
}
.tt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-family: 'Karla', sans-serif;
  font-size: 13.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none !important;
  transition: all .25s;
  border: none;
}
.tt-btn--ghost {
  background: #fff;
  color: #000000;
  border: 1.5px solid #000000;
}
.tt-btn--ghost:hover { background: #000000; color: #F7EBE1; }
.tt-btn--primary {
  background: #000000;
  color: #F7EBE1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.tt-btn--primary:hover {
  background: #AA6F63;
  color: #F7EBE1;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(170, 111, 99, .35);
}

.tt-trust {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}
.tt-trust__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #AA6F63;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.tt-trust__item svg { color: #AA6F63; }

/* Empty-cart message inside the new drawer */
.tt-cart-drawer__body .woocommerce-mini-cart__empty-message {
  text-align: center;
  color: #AA6F63;
  padding: 40px 0;
  font-size: 15px;
  font-family: 'Karla', sans-serif;
}

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
  aside.tt-cart-drawer { width: 100vw !important; }
}

/* === LIST VIEW =====================================================
   When toggled to "List" view, each product becomes a horizontal row:
   image left (200px), body middle (eyebrow / title / reviews / sizes /
   price stacked), cart on the right (heart + qty stepper + ADD TO CART).
   Implementation uses CSS grid because the card template can't be
   easily wrapped — we instead place the image and cart row into fixed
   grid columns (column 1 and column 3), spanning all rows, and let the
   remaining children auto-flow into column 2 (the body column). */
ul.products.tt-view-list,
ul.wc-block-product-template.tt-view-list {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}
ul.products.tt-view-list li.product,
ul.wc-block-product-template.tt-view-list li.product {
    display: grid !important;
    grid-template-columns: 200px minmax(0, 1fr) auto;
    grid-auto-rows: min-content;
    column-gap: 24px;
    row-gap: 4px;
    align-items: start;
    padding: 16px !important;
    /* Reset flex so the children we placed into the grid layout don't
       inherit weird flex sizing from the default grid card styles. */
    flex-direction: initial !important;
}

/* Image column — fixed 200px, spans every row. */
ul.products.tt-view-list li.product > a:first-of-type,
ul.wc-block-product-template.tt-view-list li.product .wc-block-components-product-image {
    grid-column: 1;
    grid-row: 1 / -1;
    flex: 0 0 200px !important;
    width: 200px;
    aspect-ratio: 1 / 1;
    align-self: center;
    margin: 0 !important;
}

/* Cart column — auto-width, spans every row, vertically centered. */
ul.wc-block-product-template.tt-view-list li.product .tt-card-cart-row,
ul.products.tt-view-list li.product .tt-card-cart-row {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;
    margin-left: 0 !important;
    width: fit-content;
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 320px;
}

/* Body column — everything else auto-flows here in document order. */
ul.wc-block-product-template.tt-view-list li.product
  > :is(.tt-card-eyebrow, h2.wp-block-post-title, .wp-block-post-title,
        .tt-card-reviewcount, .tt-card-sizes, .wp-block-woocommerce-product-price,
        .wc-block-components-product-price, .price) {
    grid-column: 2;
    margin: 0 !important;
    text-align: left !important;
    min-width: 0;
    max-width: 100%;
}

/* Title — let it wrap normally; the per-letter wrap was caused by
   `word-break: break-all` inherited from grid card rules. */
ul.products.tt-view-list li.product h2,
ul.products.tt-view-list li.product .wp-block-post-title,
ul.wc-block-product-template.tt-view-list li.product h2.wp-block-post-title,
ul.wc-block-product-template.tt-view-list li.product .wp-block-post-title {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.25;
    text-align: left !important;
}

/* Size pills stay in a horizontal row, wrapping if needed. */
ul.products.tt-view-list li.product .tt-card-sizes,
ul.wc-block-product-template.tt-view-list li.product .tt-card-sizes {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

/* Heart button in list view — keep it inline with the cart controls,
   don't let it absolute-position over the product image. */
ul.products.tt-view-list li.product .tt-card-heart,
ul.wc-block-product-template.tt-view-list li.product .tt-card-heart {
    position: static !important;
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    margin: 0 !important;
}

/* Quantity stepper — constrain so the pill doesn't stretch. */
ul.products.tt-view-list li.product .tt-card-qty,
ul.wc-block-product-template.tt-view-list li.product .tt-card-qty {
    width: fit-content !important;
    flex-shrink: 0;
}

/* ADD TO CART button — never let it overflow the cart column. */
ul.wc-block-product-template.tt-view-list li.product
  .wc-block-components-product-button .wp-block-button__link,
ul.products.tt-view-list li.product .add_to_cart_button {
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
}

/* Mobile (< 700px) collapses back to image-on-top stacked layout. */
@media (max-width: 700px) {
    ul.products.tt-view-list li.product,
    ul.wc-block-product-template.tt-view-list li.product {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto;
    }
    ul.products.tt-view-list li.product > a:first-of-type,
    ul.wc-block-product-template.tt-view-list li.product .wc-block-components-product-image {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        flex: none !important;
    }
    ul.products.tt-view-list li.product .tt-card-cart-row,
    ul.wc-block-product-template.tt-view-list li.product .tt-card-cart-row {
        grid-column: 1;
        grid-row: auto;
        margin-left: 0 !important;
    }
    ul.wc-block-product-template.tt-view-list li.product
      > :is(.tt-card-eyebrow, h2.wp-block-post-title, .wp-block-post-title,
            .tt-card-reviewcount, .tt-card-sizes, .wp-block-woocommerce-product-price) {
        grid-column: 1;
    }
}

/* === HIDE "ITEM REMOVED · UNDO?" NOTICE ===
   CSS belt for the PHP suspenders in inc/side-cart.php. Targets any
   WC notice element that contains a `.restore-item` link (only the
   removed-item notice has one). Hides the whole banner. Uses :has()
   which is supported in all modern browsers (Safari 15.4+, Chrome
   105+, Firefox 121+) — fine on mobile. */
.woocommerce-message:has(.restore-item),
.woocommerce-info:has(.restore-item),
.woocommerce-notice:has(.restore-item),
.wc-block-components-notice-banner:has(.restore-item),
li.woocommerce-message:has(.restore-item) {
    display: none !important;
}

/* === BLOCK-THEME WC HEADER SUPPRESSION ===
   WooCommerce's block-theme archive template renders breadcrumbs, a
   sorting <select>, the archive title, and the term description as
   separate blocks ABOVE our custom hero + toolbar. Since they're
   blocks (not legacy hooked actions), `remove_action()` can't touch
   them — we hide them with CSS scoped to shop / archive pages. The
   custom `.tt-shop-hero` block below already shows a styled title +
   description, so these duplicates are pure clutter. */
/* Breadcrumbs hidden across the whole site. Single product pages get
   our own custom `.tt-product-breadcrumb` rendered via PHP (see
   inc/product-accordions.php), so WC's native breadcrumb would just
   duplicate it. Hiding both block-based and legacy versions. */
body.woocommerce .wp-block-woocommerce-breadcrumbs,
body.woocommerce .wc-block-breadcrumbs,
body.woocommerce nav.woocommerce-breadcrumb,
body.woocommerce .woocommerce-breadcrumb,
body.woocommerce .wp-block-woocommerce-catalog-sorting,
body.woocommerce .wc-block-catalog-sorting,
body.woocommerce .wc-block-product-catalog-sorting,
body.woocommerce .wp-block-woocommerce-product-results-count,
body.woocommerce .wc-block-product-template__results-count,
/* Archive title (Premade UV DTF) — block-theme version uses
   wp-block-query-title with `data-query-title-type` of "archive"
   when on a product taxonomy. The legacy class for the same
   element is .woocommerce-products-header__title. */
body.tax-product_cat .wp-block-query-title,
body.tax-product_tag .wp-block-query-title,
body.post-type-archive-product .wp-block-query-title,
body.woocommerce .woocommerce-products-header,
body.woocommerce .woocommerce-products-header__title,
/* Term description ("Ready-to-press UV DTF transfers…") rendered
   above the loop on category pages. */
body.tax-product_cat .wp-block-term-description,
body.tax-product_tag .wp-block-term-description,
body.woocommerce .term-description,
body.woocommerce .archive-description {
    display: none !important;
}

/* Single-product breadcrumb styling block removed — WC's native
   breadcrumb is now hidden everywhere (above), and our custom
   .tt-product-breadcrumb (rendered via PHP) is the only one that
   shows on product pages. */

/* Custom theme-rendered breadcrumb (PHP-injected by
   inc/product-accordions.php → `woocommerce_before_single_product`).
   This is the always-on backup that doesn't depend on whatever
   block-theme template WC happens to render. */
.tt-product-breadcrumb {
    font-family: 'Karla', sans-serif;
    font-size: 13px;
    color: rgba(0, 0, 0, .55);
    padding: 16px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 1240px;
    margin: 0 auto;
}
.tt-product-breadcrumb a {
    color: var(--wp--preset--color--brand) !important;
    font-weight: 700;
    text-decoration: none !important;
}
.tt-product-breadcrumb a:hover { text-decoration: underline !important; }
.tt-product-breadcrumb__sep { color: rgba(0, 0, 0, .3); }
.tt-product-breadcrumb__current { color: #000000; font-weight: 600; }

/* Active heart — filled brand brown */
.tt-card-heart.is-active {
    background: var(--wp--preset--color--brand);
    color: #fff;
    border-color: var(--wp--preset--color--brand);
}
.tt-card-heart.is-active svg { fill: currentColor; }

/* Block-theme child element ordering. The image block stays at the
   default flex order (0) so it always renders FIRST regardless of source
   position. Every other text block gets an explicit order ≥ 10 so they
   stack below the image in the right sequence:
   IMAGE → PRICE → PREMADE DTF eyebrow → TITLE → REVIEW → SIZE PILLS
   → QTY + ADD TO CART row */
ul.wc-block-product-template li.product .wc-block-components-product-image,
ul.wc-block-product-template li.product .wp-block-woocommerce-product-image { order: 0 !important; }
ul.wc-block-product-template li.product .wc-block-components-product-price,
ul.wc-block-product-template li.product .wp-block-woocommerce-product-price { order: 10 !important; }
ul.wc-block-product-template li.product .tt-card-eyebrow { order: 11 !important; }
ul.wc-block-product-template li.product h2.wp-block-post-title,
ul.wc-block-product-template li.product .wp-block-post-title { order: 12 !important; }
ul.wc-block-product-template li.product .tt-card-reviewcount { order: 13 !important; }
ul.wc-block-product-template li.product .tt-card-sizes { order: 14 !important; }
ul.wc-block-product-template li.product .tt-card-cart-row { order: 15 !important; }


/* === PAGINATION ====================================================== */
body.woocommerce nav.woocommerce-pagination {
    text-align: center;
    margin: 40px 0 0 !important;
}
body.woocommerce nav.woocommerce-pagination ul {
    border: 0 !important;
    display: inline-flex;
    gap: 8px;
}
body.woocommerce nav.woocommerce-pagination ul li {
    border: 0 !important;
    margin: 0 !important;
}
body.woocommerce nav.woocommerce-pagination ul li a,
body.woocommerce nav.woocommerce-pagination ul li span {
    border: 1.5px solid var(--wp--preset--color--soft-pink) !important;
    background: #fff !important;
    width: 40px;
    height: 40px;
    display: grid !important;
    place-items: center;
    border-radius: 50% !important;
    font-weight: 700 !important;
    color: var(--wp--preset--color--ink) !important;
    padding: 0 !important;
    text-decoration: none !important;
}
body.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--wp--preset--color--ink) !important;
    color: #fff !important;
    border-color: var(--wp--preset--color--ink) !important;
}

/* === TRUST STRIP — uses ONLY user-supplied palette hex codes ======== */
/* Shop stats strip — full-bleed terracotta bar with four big numbers
   separated by a peach dot. Breaks out of the parent's content
   constraint to span the entire viewport edge-to-edge. The global
   `html, body { overflow-x: hidden }` rule prevents the 100vw from
   causing a horizontal scrollbar. */
.tt-stats {
    background: #B5685C;
    padding: 60px clamp(20px, 4vw, 40px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: clamp(40px, 5vw, 60px);
    border-radius: 0; /* sharp edges, no pill shape */
}
.tt-stats .tt-stat {
    text-align: center;
    position: relative;
    flex: 1;
}
.tt-stats .tt-stat:not(:last-child)::after {
    content: '●';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    color: #FFD7B5;
    font-size: 14px;
}
.tt-stats .tt-num {
    font-family: 'Fredoka', sans-serif;
    font-size: 64px;
    font-weight: 700;
    color: #FFF1E0;
    line-height: 1;
}
.tt-stats .tt-txt {
    font-size: 14px;
    color: #FFD7B5;
    font-weight: 600;
    margin-top: 12px;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .tt-stats {
        flex-wrap: wrap;
        gap: 30px;
        padding: 40px 20px;
    }
    .tt-stats .tt-stat { flex: 0 0 45%; }
    .tt-stats .tt-stat:not(:last-child)::after { display: none; }
    .tt-stats .tt-num { font-size: 48px; }
}

/* ─── Buildaur iframe wrapper (DTF by Size landing) ─── */
.tt-builder-section { scroll-margin-top: 24px; }
/* The pasted embed already sets max-width:600px + centers itself, so
   the wrapper is just a passthrough — no card, no extra borders. */
.tt-buildaur-frame { margin: 0 auto; }

/* ─── Newsletter section (homepage) — brown bg, centered, real form ─── */
.tt-newsletter-block { text-align: center; max-width: 560px; margin: 0 auto; }
.tt-newsletter-block__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--soft-pink);
    margin: 0 0 16px;
}
.tt-newsletter-block__eyebrow .tt-star-img { width: 14px; height: 14px; }
.tt-newsletter-block__h {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif !important;
    font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1.1;
    color: #FFFFFF;
    margin: 0 0 14px;
    font-weight: 700;
}
.tt-newsletter-block__sub {
    color: var(--wp--preset--color--cream-light);
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 28px;
}
.tt-newsletter-block__form {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 480px;
    margin: 0 auto 14px;
    border: 2px solid #FFFFFF;
    background: #FFFFFF;
    overflow: hidden;
}
.tt-newsletter-block__input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 16px 20px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    color: var(--wp--preset--color--ink);
    outline: none;
    min-width: 0;
}
.tt-newsletter-block__input::placeholder { color: var(--wp--preset--color--ink-soft); opacity: 0.7; }
.tt-newsletter-block__btn {
    border: 0;
    background: #FFFFFF;
    color: var(--wp--preset--color--brand);
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 24px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
    border-left: 2px solid var(--wp--preset--color--brand);
}
.tt-newsletter-block__btn:hover { background: var(--wp--preset--color--soft-pink); }
.tt-newsletter-block__fineprint {
    font-size: 12.5px;
    color: rgba(255,255,255,0.7);
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 560px) {
    .tt-newsletter-block__form {
        flex-direction: column;
        border: 0;
        background: transparent;
        gap: 10px;
        max-width: 340px;
    }
    .tt-newsletter-block__input {
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
        width: 100%;
        padding: 16px 24px;
        line-height: 1.2;
        border: 2px solid #FFFFFF;
        border-radius: 10px;
        background: #FFFFFF;
        color: var(--wp--preset--color--brand);
        text-align: center;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        height: auto;
    }
    .tt-newsletter-block__input::placeholder {
        color: var(--wp--preset--color--brand);
        opacity: 0.7;
        text-transform: uppercase;
    }
    .tt-newsletter-block__btn {
        box-sizing: border-box;
        width: 100%;
        padding: 16px 24px;
        line-height: 1.2;
        height: auto;
    }
    .tt-newsletter-block__btn {
        height: 48px;
        padding: 0 24px;
        border: 2px solid #FFFFFF;
        border-left: 2px solid #FFFFFF;
        border-radius: 10px;
        background: var(--wp--preset--color--brand);
        color: #FFFFFF;
        width: 100%;
        justify-content: center;
    }
    .tt-newsletter-block__btn:hover {
        background: #FFFFFF;
        color: var(--wp--preset--color--brand);
    }
}

/* ─── FAQ accordion ─── */
/* Two-column flex layout. Items are split into separate column
   wrappers at runtime by assets/header.js → ttFaqSplitIntoColumns
   so each column is its own flex stack — expanding an item only
   grows ITS column, never re-balances across the gutter (which
   was the issue with `column-count`). */
.tt-faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    max-width: 1080px;
    margin: 0 auto;
    align-items: start;
}
@media (max-width: 781px) {
    .tt-faq-list {
        grid-template-columns: 1fr;
    }
}
.tt-faq-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tt-faq-item {
    background: #fff;
    border: 2px solid var(--wp--preset--color--brand);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s ease;
    display: block;
}
.tt-faq-item[open] { border-color: var(--wp--preset--color--brand); }
.tt-faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 700;
    font-size: 16.5px;
    color: var(--wp--preset--color--brand-dark);
    line-height: 1.3;
}
.tt-faq-item > summary::-webkit-details-marker { display: none; }
.tt-faq-item > summary:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: -2px; }
.tt-faq-toggle {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    position: relative;
}
.tt-faq-toggle::before,
.tt-faq-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: var(--wp--preset--color--brand);
    transform: translate(-50%, -50%);
    transition: transform .2s ease;
    border-radius: 2px;
}
.tt-faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.tt-faq-item[open] .tt-faq-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.tt-faq-answer {
    padding: 0 22px 20px;
    color: var(--wp--preset--color--ink);
    font-size: 15px;
    line-height: 1.65;
}
.tt-faq-answer p { margin: 0; }
.tt-faq-answer a {
    color: var(--wp--preset--color--brand);
    border-bottom: 1.5px solid var(--wp--preset--color--soft-pink);
    text-decoration: none;
    transition: border-color .15s ease;
}
.tt-faq-answer a:hover { border-bottom-color: var(--wp--preset--color--brand); }

/* ─── Footer newsletter (inline, hairline above) ─── */
.tt-footer-newsletter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: clamp(32px, 4vw, 48px);
    padding: clamp(28px, 3.5vw, 40px) 0 clamp(8px, 1.5vw, 16px);
    border-top: 1px solid #F7D2C7;
    color: var(--wp--preset--color--brand);
}
.tt-footer-newsletter__copy { flex: 1 1 360px; min-width: 280px; }
.tt-footer-newsletter__eyebrow {
    font-family: var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--brand);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.tt-footer-newsletter__h {
    font-family: var(--wp--preset--font-family--display);
    color: #000;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.15;
}
.tt-footer-newsletter__sub {
    color: #000;
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0;
}
.tt-footer-newsletter__form {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: 1 1 360px;
    max-width: 460px;
    border: 1.5px solid var(--wp--preset--color--brand);
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}
.tt-footer-newsletter__input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 14px 18px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    color: var(--wp--preset--color--ink);
    outline: none;
    min-width: 0;
}
.tt-footer-newsletter__input::placeholder { color: var(--wp--preset--color--ink-soft); opacity: 0.7; }
.tt-footer-newsletter__btn {
    border: 0;
    background: var(--wp--preset--color--brand);
    color: #fff;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color .15s ease;
}
.tt-footer-newsletter__btn:hover { background: var(--wp--preset--color--brand-dark); }
.tt-footer-newsletter__btn .tt-arrow-img { width: 14px; height: 14px; margin-left: 2px; color: #fff; display: inline-block; flex: 0 0 auto; }
@media (max-width: 720px) {
    .tt-footer-newsletter { flex-direction: column; align-items: flex-start; gap: 18px; }
    .tt-footer-newsletter__form { width: 100%; max-width: 100%; }
}

.tt-why-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 720px) { .tt-why-points { grid-template-columns: 1fr; gap: 14px; } }
.tt-why-point {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    border: 2px solid var(--wp--preset--color--brand);
}
.tt-why-icon { font-size: 26px; display: block; margin-bottom: 6px; }
.tt-why-point strong {
    display: block;
    font-family: var(--wp--preset--font-family--display);
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 2px;
}
.tt-why-point span {
    color: var(--wp--preset--color--ink-soft);
    font-size: 13px;
    line-height: 1.4;
}

/* ─── 8. Reviews / Testimonials ─── */
.tt-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) { .tt-reviews-grid { grid-template-columns: 1fr; } }
.tt-review {
    background: #fff;
    border: 2px solid var(--wp--preset--color--brand);
    border-radius: 22px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tt-review-stars { display: inline-flex; gap: 4px; align-items: center; line-height: 1; }
.tt-review-stars img { width: 24px; height: 24px; object-fit: contain; display: block; }

/* ─── Brand-image arrow (replaces unicode → / &rarr;) ─── */
.tt-arrow-img {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin-left: 8px;
    transition: transform .2s ease;
}
.wp-block-button__link:hover .tt-arrow-img,
.tt-cat-card:hover .tt-arrow-img,
.tt-tool-card:hover .tt-arrow-img,
.tt-section-more:hover .tt-arrow-img,
a:hover > .tt-arrow-img {
    transform: translateX(3px);
}
/* Arrow keeps its natural cream-and-brown brand color — works on
   both light pills (brown outline reads) and dark pills (cream fill
   reads). Only size adjustment in different contexts. */
.wp-block-button__link .tt-arrow-img,
.tt-newsletter-cta .tt-arrow-img,
.tt-mega-cta .tt-arrow-img {
    width: 16px;
    height: 16px;
}

/* ─── Buttons: Karla uppercase for max scannability ─── */
.wp-block-button__link.wp-element-button,
.tt-newsletter-cta,
.tt-mega-cta,
.tt-util-btn {
    font-family: var(--wp--preset--font-family--body) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}
/* Equalize filled vs outline button heights — both should have the
   exact same outer dimensions so paired CTAs read as equal weight. */
.wp-block-button__link.wp-element-button {
    padding: 14px 26px !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
    padding: 12px 24px !important; /* 2px less to compensate for the 2px border */
}

/* ─── Brand-image stars (replaces the unicode ★ character) ─── */
.tt-star-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin: 0 1px;
}
.tt-star-line {
    color: var(--wp--preset--color--brand);
    font-size: 13.5px;
    font-weight: 600;
    margin: 36px 0 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}
.tt-star-line .tt-star-img { width: 18px; height: 18px; }
.tt-star-line span { margin-left: 8px; }
.tt-eyebrow-stars {
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.tt-eyebrow-stars--center { display: flex; justify-content: center; }
.tt-eyebrow-stars .tt-star-img { width: 16px; height: 16px; }
.tt-eyebrow-stars span { margin-left: 6px; letter-spacing: 0.18em; }
.tt-review-quote {
    font-size: 16px;
    line-height: 1.6;
    color: #1F1410;
    margin: 0;
    flex: 1;
}
/* Reviews section sits on brown — cards stay white with near-black text. */
.tt-reviews .tt-review { box-shadow: 0 10px 30px -12px rgba(0,0,0,0.35); border-color: transparent; }
.tt-reviews .tt-review-meta strong { color: #1F1410; }
.tt-reviews .tt-review-meta span { color: rgba(31,20,16,0.65); }
.tt-review-meta { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.tt-review-meta strong {
    font-family: var(--wp--preset--font-family--display);
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    font-size: 15px;
}
.tt-review-meta span {
    color: var(--wp--preset--color--ink-soft);
    font-size: 13px;
}

/* ─── 9. Tools & Resources ─── */
.tt-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) { .tt-tool-grid { grid-template-columns: 1fr; } }
.tt-tool-card {
    display: block;
    background: #fff;
    border: 2px solid var(--wp--preset--color--brand);
    border-radius: 22px;
    padding: 32px 28px;
    text-decoration: none;
    transition: transform .2s ease;
}
.tt-tool-card:hover { transform: translateY(-3px); }
.tt-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--wp--preset--color--cream);
    color: var(--wp--preset--color--brand);
    margin-bottom: 18px;
}
.tt-tool-icon svg { width: 28px; height: 28px; }
.tt-tool-card h3 {
    font-family: var(--wp--preset--font-family--display);
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    font-size: 22px;
    margin: 0 0 10px;
}
.tt-tool-card p {
    color: var(--wp--preset--color--ink);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 0 16px;
}
.tt-tool-link {
    display: inline-block;
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    font-size: 14px;
    transition: color .15s ease;
}
.tt-tool-card:hover .tt-tool-link { color: var(--wp--preset--color--accent); }

/* ─── 10. Newsletter final CTA ─── */
.tt-newsletter {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.tt-newsletter-eyebrow {
    color: var(--wp--preset--color--brand);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.tt-newsletter-h {
    font-family: var(--wp--preset--font-family--display);
    color: var(--wp--preset--color--brand);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.1;
    margin: 0 0 8px;
}
.tt-newsletter-sub {
    color: var(--wp--preset--color--brand-dark);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    max-width: 50ch;
}
.tt-newsletter-cta {
    background: var(--wp--preset--color--brand);
    color: #fff !important;
    text-decoration: none !important;
    padding: 16px 36px;
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: 0.04em;
    transition: background-color .15s ease, transform .12s ease;
    white-space: nowrap;
}
.tt-newsletter-cta:hover { background: var(--wp--preset--color--accent); transform: translateY(-1px); }

/* ─── Footer typography — keep headings small and tracked ─── */
.tt-footer-heading,
.wp-block-heading.tt-footer-heading {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 700;
    font-size: 17px;
    color: var(--wp--preset--color--brand);
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin: 0 0 12px !important;
}

/* ─── Footer link lists — strip bullets + underlines, restyle as a clean column of body links. Lives on the wp:list block we tagged with className "is-style-tt-footer-list". ─── */
.wp-block-list.is-style-tt-footer-list,
.is-style-tt-footer-list {
    list-style: none !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
}
.is-style-tt-footer-list li {
    margin: 0 0 8px !important;
    line-height: 1.4;
}
.is-style-tt-footer-list a {
    color: var(--wp--preset--color--ink) !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    transition: color .15s ease;
    font-size: 14.5px;
}
.is-style-tt-footer-list a:hover {
    color: var(--wp--preset--color--brand) !important;
}

/* ─── Footer brand contact link (the email address) ─── */
footer.wp-block-template-part a[href^="mailto:"] {
    color: var(--wp--preset--color--brand);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition: border-color .15s ease;
}
footer.wp-block-template-part a[href^="mailto:"]:hover {
    border-bottom-color: var(--wp--preset--color--accent);
}

/* ─── Footer bottom-bar copyright links — lighter, no underline ─── */
footer.wp-block-template-part .has-text-align-center a {
    color: var(--wp--preset--color--brand) !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}
footer.wp-block-template-part .has-text-align-center a:hover {
    color: var(--wp--preset--color--accent) !important;
}

/* ─── Header navigation hover state ─── */
.wp-block-navigation .wp-block-navigation-item__content {
    transition: color .15s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--brand);
}

/* ────────────────────────────────────────────────────────────────
   UPLOAD GANG SHEET PAGE (/upload-gang-sheet/)
   Self-contained styles for the new upload-flow landing page.
   Mirrors the design tokens used by /dtf-gang-sheets/ (warm
   #FFF8F1 background, #AA6F63 accent, brand serif/sans cadence)
   so the page feels like part of the same family.
   ──────────────────────────────────────────────────────────────── */

/* Hero — embed iframe wrapper. Lets the iframe breathe inside its
   column so the dashed drop-zone never sits flush against the
   column edge on narrower viewports. */
.tt-upload-hero .tt-upload-embed-wrap,
.tt-by-size-hero .tt-upload-embed-wrap {
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .18),
                0 2px 6px rgba(0, 0, 0, .06);
}
.tt-upload-hero .tt-upload-embed-wrap iframe,
.tt-by-size-hero .tt-upload-embed-wrap iframe {
    display: block;
}
@media (max-width: 781px) {
    .tt-upload-hero .tt-upload-embed-wrap,
    .tt-by-size-hero .tt-upload-embed-wrap {
        padding: 12px;
    }
}

/* Step row — 3 numbered cards, stack on mobile */
.tt-upload-how .tt-upload-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    max-width: 980px;
    margin: 0 auto;
}
.tt-upload-step {
    background: #FFF8F1;
    border: 1px solid rgba(170, 111, 99, 0.14);
    border-radius: 18px;
    padding: 32px 28px;
    text-align: left;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tt-upload-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(170, 111, 99, 0.14);
    border-color: rgba(170, 111, 99, 0.28);
}
.tt-upload-step__num {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #AA6F63;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 6px 16px rgba(170, 111, 99, 0.28);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.tt-upload-step__h {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #2A1B14;
    letter-spacing: -0.3px;
}
.tt-upload-step__p {
    color: #4A3328;
    font-size: 15.5px;
    line-height: 1.65;
    margin: 0;
}
@media (max-width: 781px) {
    .tt-upload-how .tt-upload-steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Spec cards — same grid, but white card surface on the warm bg */
.tt-upload-specs .tt-upload-spec-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: 980px;
    margin: 0 auto;
}
.tt-upload-spec-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
    text-align: left;
}
.tt-upload-spec-card__icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 14px;
}
.tt-upload-spec-card__h {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #2A1B14;
    letter-spacing: -0.2px;
}
.tt-upload-spec-card__p {
    color: #000000;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}
.tt-upload-spec-card__p strong { color: #2A1B14; }
@media (max-width: 781px) {
    .tt-upload-specs .tt-upload-spec-cards {
        grid-template-columns: 1fr;
    }
}

/* CMYK explainer — centred prose block */
.tt-upload-cmyk-block {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.tt-upload-cmyk-block__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #AA6F63;
    margin: 0 0 12px;
}
.tt-upload-cmyk-block__h {
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.15;
    margin: 0 0 20px;
    color: #2A1B14;
    letter-spacing: -0.3px;
}
.tt-upload-cmyk-block__p {
    font-size: 17px;
    line-height: 1.65;
    color: #000000;
    margin: 0;
}

/* Helpful guides / tips card grid */
.tt-upload-tips-block {
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}
.tt-upload-tips-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #AA6F63;
    margin: 0 0 8px;
}
.tt-upload-tips-h {
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.15;
    margin: 0 0 12px;
    color: #2A1B14;
    letter-spacing: -0.3px;
}
.tt-upload-tips-sub {
    font-size: 16px;
    color: #4A3328;
    max-width: 640px;
    margin: 0 auto 40px;
    line-height: 1.55;
}
.tt-upload-tips-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.tt-upload-tip-card {
    display: flex;
    flex-direction: column;
    background: #FFF8F1;
    border: 1px solid rgba(170, 111, 99, 0.14);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    text-align: left;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tt-upload-tip-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(170, 111, 99, 0.14);
    border-color: rgba(170, 111, 99, 0.28);
}
.tt-upload-tip-card__thumb {
    margin: 0;
    overflow: hidden;
    background: #fff;
}
.tt-upload-tip-card__thumb img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}
.tt-upload-tip-card:hover .tt-upload-tip-card__thumb img {
    transform: scale(1.04);
}
.tt-upload-tip-card__body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.tt-upload-tip-card__icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 14px;
}
.tt-upload-tip-card__h {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #2A1B14;
    letter-spacing: -0.2px;
    line-height: 1.3;
}
.tt-upload-tip-card__p {
    font-size: 15px;
    color: #4A3328;
    line-height: 1.55;
    margin: 0 0 16px;
    flex: 1;
}
.tt-upload-tip-card__cta {
    font-size: 14px;
    font-weight: 700;
    color: #AA6F63;
}
@media (max-width: 781px) {
    .tt-upload-tips-grid { grid-template-columns: 1fr; }
}

/* Wholesale (/wholesale-dtf-transfers/) hero — mimic the homepage "Our most
   popular tool" section (same roll photo, .tt-builder-photo): 42/58 image+text
   columns, roll capped at 360px & centered in its column, LEFT-aligned copy so
   the text doesn't fall away to the far right. Padding already matches home;
   vertical centering + rounded image come from the base rules further down. */
.page-id-187 .tt-hero{padding-top:clamp(24px,3vw,48px)!important;padding-bottom:clamp(32px,4vw,64px)!important;}
.page-id-187 .tt-hero-img{max-width:360px!important;height:auto;margin-left:auto!important;margin-right:auto!important;}
@media(min-width:782px){
  .page-id-187 .tt-hero-cols{column-gap:clamp(24px,4vw,56px)!important;}
  .page-id-187 .tt-hero-cols > .wp-block-column:first-child{flex:0 1 42%!important;max-width:42%!important;}
  .page-id-187 .tt-hero-cols > .wp-block-column:last-child{flex:0 1 58%!important;max-width:58%!important;}
  .page-id-187 .tt-hero-cols > .wp-block-column:last-child,
  .page-id-187 .tt-hero-cols > .wp-block-column:last-child *{text-align:left!important;}
  .page-id-187 .tt-hero-cols > .wp-block-column:last-child .wp-block-buttons{justify-content:flex-start!important;}
}
@media(max-width:781px){.page-id-187 .tt-hero-img{max-width:260px!important;}}

/* Wholesale tiered pricing list */
.tt-wholesale-tiers {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 560px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid rgba(170, 111, 99, 0.14);
    border-radius: 16px;
    overflow: hidden;
}
.tt-wholesale-tiers li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(170, 111, 99, 0.10);
    font-size: 16px;
    color: #2A1B14;
}
.tt-wholesale-tiers li:last-child { border-bottom: 0; }
.tt-wholesale-tier__size { font-weight: 700; }
.tt-wholesale-tier__rate { color: #4A3328; }
.tt-wholesale-tier__rate strong {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    background: #3FA66B;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tt-wholesale-tier--best {
    background: #AA6F63;
    color: #FFFFFF;
}
.tt-wholesale-tier--best .tt-wholesale-tier__rate {
    color: #FFFFFF;
}
/* The size label on the highlighted "Best Value" row (105"-150") was
   rendering dark brown on the brown row. The rule above already sets
   white on the <li>, but `.tt-wholesale-tiers li` (0,1,1) outranks
   `.tt-wholesale-tier--best` (0,1,0) and won the cascade, so only the
   rate — which has its own two-class override — actually turned white.
   Match that specificity so the whole row reads white. (2026-07-21) */
.tt-wholesale-tiers li.tt-wholesale-tier--best,
.tt-wholesale-tiers li.tt-wholesale-tier--best .tt-wholesale-tier__size {
    color: #FFFFFF;
}

/* ────────────────────────────────────────────────────────────────
   SIZE-GUIDE PAGES (/dtf-size-guides/, /uv-dtf-size-guides/)
   Two-column garment cards + 4-up placement grid + UV quicklist.
   ──────────────────────────────────────────────────────────────── */

/* Common card + caption styles shared by the two-column rows */
.tt-size-cards {
    display: grid;
    gap: 24px;
    max-width: 980px;
    margin: 0 auto;
}
.tt-size-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 781px) {
    .tt-size-cards--two { grid-template-columns: 1fr; }
}

.tt-size-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 18px;
    padding: 22px 22px 18px;
    margin: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tt-size-card__h {
    font-size: 17px;
    font-weight: 700;
    color: #2A1B14;
    margin: 0;
    letter-spacing: -0.2px;
}
.tt-size-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    background: #FFF8F1;
}
.tt-size-card__caption {
    font-size: 13.5px;
    color: #6E5145;
    margin: 0;
    line-height: 1.55;
}

/* Placement guide — 2 columns desktop (so the line-art is readable
   at a useful size), 1 column on phone. Was 4 cols originally but
   the 250px-ish images were too cramped to read against. Click an
   image to open the lightbox below for a full-size view. */
.tt-placement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}
.tt-placement-card {
    margin: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
    display: flex;
    flex-direction: column;
}
.tt-placement-card img {
    display: block;
    width: 100%;
    height: auto;
    background: #FFF8F1;
    aspect-ratio: 500 / 290;
    object-fit: contain;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    cursor: zoom-in;
    transition: background .15s;
}
.tt-placement-card img:hover { background: #FFF1E2; }
.tt-placement-card figcaption {
    padding: 18px 22px 22px;
}
.tt-placement-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #2A1B14;
    margin: 0 0 4px;
    letter-spacing: -0.2px;
}
.tt-placement-card__size {
    font-size: 13px;
    font-weight: 700;
    color: #AA6F63;
    margin: 0 0 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tt-placement-card__hint {
    font-size: 14px;
    color: #000000;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 700px) {
    .tt-placement-grid { grid-template-columns: 1fr; gap: 18px; }
    .tt-placement-card img { padding: 14px; }
}

/* Lightbox overlay for the placement images. Pure CSS + tiny JS in
   the page. Click any placement image to enlarge; click the
   overlay / press Esc to close. */
.tt-lightbox {
    position: fixed; inset: 0;
    background: rgba(9, 3, 26, .82);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 32px;
    opacity: 0; pointer-events: none;
    transition: opacity .15s;
}
.tt-lightbox.is-open { opacity: 1; pointer-events: auto; }
.tt-lightbox img {
    max-width: 92vw;
    max-height: 90vh;
    border-radius: 14px;
    background: #fff;
    padding: 24px;
    box-shadow: 0 24px 64px -12px rgba(0,0,0,.5);
}
.tt-lightbox-close {
    position: absolute;
    top: 18px; right: 22px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    border: 0;
    color: #fff;
    font-size: 24px; line-height: 1;
    cursor: pointer;
}
.tt-lightbox-close:hover { background: rgba(255,255,255,.28); }

/* UV quicklist (stub page) — clean key/value pairs */
.tt-uv-quicklist {
    max-width: 540px;
    margin: 0 auto;
}
.tt-uv-quicklist ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #FFF8F1;
    border-radius: 14px;
    overflow: hidden;
}
.tt-uv-quicklist li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 20px;
    font-size: 15px;
    color: #2A1B14;
    border-bottom: 1px solid rgba(170, 111, 99, .14);
}
.tt-uv-quicklist li:last-child { border-bottom: 0; }
.tt-uv-quicklist li strong { font-weight: 700; }
.tt-uv-quicklist li span {
    color: #AA6F63;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   TEDDY TRANSFERS — SINGLE PRODUCT PICKER (.tt-picker)
   Replaces WC's native add-to-cart form on /product/<slug>/.
   Size pills + qty stepper + ADD TO CART with live price.
   ============================================================ */
.tt-picker {
    margin: 18px 0 22px;
    font-family: 'Karla', system-ui, -apple-system, sans-serif;
    color: #000000;
}

.tt-picker .tt-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #AA6F63;
    margin: 0 0 10px;
}
.tt-picker .tt-label-mt { margin-top: 18px; }
.tt-picker .tt-label .tt-val { display: none !important; }

/* Size pills */
.tt-picker .tt-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tt-picker .tt-size {
    appearance: none;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
    background: #fff;
    color: #000000;
    font: 700 14px/1 'Karla', sans-serif;
    padding: 10px 16px;
    min-width: 54px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s ease;
}
.tt-picker .tt-size:hover:not(:disabled) {
    background: #F7EBE1;
    border-color: #AA6F63;
    color: #000000;
}
.tt-picker .tt-size.tt-active {
    background: #000000;
    border-color: #000000;
    color: #F7EBE1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.tt-picker .tt-size:disabled,
.tt-picker .tt-size.tt-oos {
    opacity: 0.4;
    text-decoration: line-through;
    cursor: not-allowed;
}

/* Quantity + cart row */
.tt-picker .tt-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.tt-picker .tt-qty {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    /* Lock to 48px overall (border counts inside the box) so the
       qty stepper and the Add-to-Cart button below sit at the same
       height. Without box-sizing the 1.5px borders made the qty
       box 51px while the cart was 48px. */
    box-sizing: border-box;
    height: 48px;
}
.tt-picker .tt-step,
.tt-picker .tt-qty-input {
    box-sizing: border-box;
    height: 100%;
}
.tt-picker .tt-qty:focus-within { border-color: #AA6F63; }
.tt-picker .tt-step {
    width: 40px;
    height: 48px;
    border: 0;
    background: #AA6F63;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.tt-picker .tt-step:hover { background: #8F5B50; color: #FFFFFF; }
.tt-picker .tt-step:disabled { background: #D9C3BB; color: #FFF8F1; cursor: default; }
.tt-picker .tt-qty-input {
    width: 42px;
    height: 48px;
    border: 0;
    background: transparent;
    text-align: center;
    font: 700 15px/1 'Karla', sans-serif;
    color: #000000;
    -moz-appearance: textfield;
    outline: none;
}
.tt-picker .tt-qty-input::-webkit-inner-spin-button,
.tt-picker .tt-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ADD TO CART button — TT brand brown. */
.tt-picker .tt-cart {
    flex: 1;
    appearance: none;
    border: 0;
    background: #AA6F63;
    color: #FFFFFF;
    border-radius: 999px;
    padding: 0 24px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: 800 13.5px/1 'Karla', sans-serif;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 4px 14px rgba(170, 111, 99, 0.32);
}
.tt-picker .tt-cart:hover:not(:disabled) {
    background: #000000;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.tt-picker .tt-cart:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}
.tt-picker .tt-cart.is-loading,
.tt-picker .tt-cart.is-added {
    background: #E89F82;
    color: #F7EBE1;
}
.tt-picker .tt-price {
    opacity: 0.85;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* Notes / errors */
.tt-picker .tt-note {
    margin: 18px 0;
    padding: 8px 0;
    font-size: 12.5px;
    color: #AA6F63;
    line-height: 1.5;
}
.tt-picker .tt-error {
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(170, 111, 99, 0.10);
    border-left: 3px solid #AA6F63;
    font-size: 13px;
    color: #000000;
}
/* Inline "that's the max we can ship" hint under the qty row. Shown by
   product-picker.js when + is tapped at the stock/pack ceiling. */
.tt-picker .tt-qty-hint {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #8F5B50;
    line-height: 1.4;
}
.tt-picker .tt-qty-hint:not(.is-visible) { display: none; }

/* Hide the now-unused WC native variation form if any residual markup
   is still emitted by other plugins or templates we don't control. */

/* Hide WC's native variation form / add-to-cart on ALL single product
   pages, anywhere it renders (in the summary, at the bottom, inside a
   block-theme legacy-template wrapper, etc.). Our custom .tt-picker
   replaces it entirely. Previous sibling-only selector missed the
   instance that block themes inject below the summary. */
body.single-product form.variations_form.cart,
body.single-product form.cart.variations_form,
body.single-product form.cart {
    display: none !important;
}
/* The blockified add-to-cart-form block also emits a bare "<n> in stock"
   <p class="stock"> as a sibling of the (now hidden) form; it otherwise
   orphans at the bottom of the description. Hide it — we render our own
   stock label as a pill up by the price (tt_pdp_stock_pill). */
body.single-product .wp-block-woocommerce-add-to-cart-form > p.stock,
body.single-product .wp-block-woocommerce-add-to-cart-form .stock {
    display: none !important;
}
/* Our repositioned stock label — a small pill under the price. */
.tt-stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 10px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.2;
}
.tt-stock-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.tt-stock-pill--in  { background: #E7F4EC; color: #217A4B; }
.tt-stock-pill--low { background: #FCEBD9; color: #C0631A; }
/* But DO show our picker (which contains the bits we need). The
   picker isn't a <form>, so the above rule doesn't touch it. */

/* Mobile — qty + ATC stack and BOTH render as identical full-width
   pills. Previously the qty rendered wider than the ATC because the
   row stayed flex-row at >520px (so flex-grow split the space) and
   because the ATC's flex:1 didn't override its 220px min-width on
   tablets. Bumping the breakpoint to 860 and explicitly matching
   width + height + box-sizing keeps the two as a visually-matched
   pair on every phone + small tablet. */
@media (max-width: 860px) {
    .tt-picker .tt-row {
        flex-direction: column;
        gap: 10px;
    }
    .tt-picker .tt-qty,
    .tt-picker .tt-cart {
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        height: 56px !important;
        border-radius: 999px !important;
        box-sizing: border-box !important;
    }
    .tt-picker .tt-qty { justify-content: space-between; }
    .tt-picker .tt-step { height: 56px !important; }
    .tt-picker .tt-qty-input { flex: 1; height: 56px !important; }
    .tt-picker .tt-cart {
        padding: 0 24px !important;
        font-size: 14px !important;
    }
}

/* ============================================================
   TEDDY TRANSFERS — MY ACCOUNT PAGE
   Branded override of WC's /my-account/ dashboard. Strict palette:
   #AA6F63 brand · #000000 ink · #F7EBE1 cream · #F7D2C7 pink
   #E89F82 peach · #F0B582 tan · #FFFFFF white
   ============================================================ */
/* Break out of the page template's 780px content constraint so the
   full-width hero + two-column dashboard layout has room to breathe.
   Block theme pages wrap content in `wp:group { type:"constrained",
   contentSize:"780px" }`, which would otherwise squeeze this view. */
.tt-account {
    background: #F7EBE1;
    margin: 0 calc(50% - 50vw) -40px;
    width: 100vw;
    padding-bottom: 40px;
}

/* Hide the auto-rendered "My account" page title that the block-theme
   page.html injects above wp:post-content. Our hero already shows a
   personalized greeting. Scoped to the WC account body class so other
   pages keep their titles. */
body.woocommerce-account .wp-block-post-title { display: none !important; }
/* Strip the page template's horizontal padding on this page so the
   account hero genuinely runs edge-to-edge. */
body.woocommerce-account main.wp-block-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

.tt-account__hero {
    /* Solid cream — gradient + decorative blob circles removed per user
       request so the brand mark sits cleanly against a flat background. */
    background: #F7EBE1;
    padding: 48px 24px 32px;
    position: relative;
    overflow: hidden;
}
/* (decorative ::before / ::after blobs removed) */
.tt-account__hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
/* Brand mark — bare PNG, no circle, no border. The favicon already
   IS the visual brand mark, so wrapping it in another container would
   double-frame it. Sized to ~96px and centered above the greeting. */
.tt-account__brandmark {
    display: block;
    width: 96px;
    height: auto;
    margin: 0 auto 16px;
}
.tt-account__h1 {
    font-family: 'Riffic', 'Fredoka', 'Karla', system-ui, sans-serif;
    font-size: clamp(28px, 3.6vw, 38px);
    color: #000000;
    margin: 0 0 8px;
    font-weight: 700;
    line-height: 1.1;
}
.tt-account__sub {
    color: rgba(0, 0, 0, .6);
    font-size: 15px;
    margin: 0 0 24px;
    font-family: 'Karla', sans-serif;
}
.tt-account__tier {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #000000;
    color: #F7EBE1;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: 'Karla', sans-serif;
}
.tt-account__tier-dot {
    width: 8px; height: 8px;
    background: #F0B582;
    border-radius: 50%;
}

.tt-account__container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}
.tt-account__layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 24px;
}
@media (max-width: 880px) {
    .tt-account__layout { grid-template-columns: 1fr; }
}

.tt-account__panel {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .03);
}
.tt-account__side-card { margin-bottom: 20px; }
.tt-account__side-card:last-child { margin-bottom: 0; }
.tt-account__panel-h {
    font-family: 'Riffic', 'Fredoka', 'Karla', system-ui, sans-serif;
    font-size: 20px;
    color: #000000;
    margin: 0 0 18px;
    font-weight: 700;
}

/* Loyalty progress ring */
.tt-account__ring-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px;
    background: linear-gradient(135deg, #F7D2C7, #FFFFFF);
    border-radius: 18px;
    margin-bottom: 20px;
}
.tt-account__ring {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tt-account__ring-inner {
    width: 60px; height: 60px;
    background: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #000000;
    font-size: 17px;
    font-family: 'Karla', sans-serif;
}
.tt-account__ring-info strong {
    display: block;
    color: #000000;
    font-size: 17px;
    margin: 0 0 2px;
    font-family: 'Karla', sans-serif;
    font-weight: 700;
}
.tt-account__ring-info span {
    color: rgba(0, 0, 0, .6);
    font-size: 13px;
    font-family: 'Karla', sans-serif;
}

/* Mini stats — three tiles after removing Downloads. */
.tt-account__mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.tt-account__mini {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 14px;
}
.tt-account__mini-num {
    font-family: 'Riffic', 'Fredoka', 'Karla', system-ui, sans-serif;
    font-size: 26px;
    color: #AA6F63;
    font-weight: 700;
    line-height: 1.1;
}
.tt-account__mini-lbl {
    font-size: 11px;
    color: rgba(0, 0, 0, .55);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px;
    font-family: 'Karla', sans-serif;
    font-weight: 600;
}

/* Side menu */
.tt-account__menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tt-account__menu-item { margin-bottom: 4px; list-style: none !important; }
.tt-account__menu a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: #000000;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 15px;
    transition: background .15s;
    font-family: 'Karla', sans-serif;
}
.tt-account__menu a:hover,
.tt-account__menu a:focus {
    background: #F7EBE1;
    color: #000 !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.tt-account__menu a:hover .tt-account__menu-label,
.tt-account__menu a:hover .tt-account__menu-ic { color: #000 !important; }
/* Active item — solid brand-brown background. Force white on the
   anchor AND every span inside it so the label, icon (emoji), and
   chevron all read clearly against the dark fill. Some global block-
   theme link colors would otherwise inherit and turn the label brown
   on a brown background. */
.tt-account__menu-item.is-active a,
.tt-account__menu-item.is-active a:link,
.tt-account__menu-item.is-active a:visited,
.tt-account__menu-item.is-active a:hover {
    background: #AA6F63 !important;
    color: #FFFFFF !important;
}
.tt-account__menu-item.is-active a > span,
.tt-account__menu-item.is-active .tt-account__menu-label,
.tt-account__menu-item.is-active .tt-account__menu-ic {
    color: #FFFFFF !important;
}
.tt-account__menu-ic {
    font-size: 24px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}
.tt-account__menu-ic .tt-account__menu-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    /* Scale up to compensate for the transparent margin around the
       uploaded PNGs — the icon content fills the visible chip while
       the transparent padding harmlessly overflows. */
    transform: scale(1.35);
    transform-origin: center;
}
.tt-account__menu-item.is-active .tt-account__menu-ic .tt-account__menu-img {
    filter: brightness(0) invert(1);
}
.tt-account__menu-chev {
    margin-left: auto;
    color: rgba(0, 0, 0, .35);
    font-size: 20px;
    line-height: 1;
}
.tt-account__menu-item.is-active .tt-account__menu-chev { color: #F7EBE1; }

/* Dashboard never shows the brown active background — use a soft cream
   tile instead so the colored dashboard icon reads cleanly, and the
   hover doesn't flash pink (the default hover bg for inactive items). */
.tt-account__menu-item--dashboard.is-active a,
.tt-account__menu-item--dashboard.is-active a:link,
.tt-account__menu-item--dashboard.is-active a:visited,
.tt-account__menu-item--dashboard.is-active a:hover {
    background: #F7EBE1 !important;
    color: inherit !important;
}
.tt-account__menu-item--dashboard.is-active .tt-account__menu-label,
.tt-account__menu-item--dashboard.is-active .tt-account__menu-ic { color: inherit !important; }
.tt-account__menu-item--dashboard.is-active .tt-account__menu-chev { color: rgba(0, 0, 0, .35); }
.tt-account__menu-item--dashboard.is-active .tt-account__menu-ic .tt-account__menu-img { filter: none; }

/* Right column — Quick Action tiles */
.tt-account__actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
@media (max-width: 600px) { .tt-account__actions { grid-template-columns: 1fr; } }
.tt-account__action {
    background: linear-gradient(135deg, #FFFFFF, #F7EBE1);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;
    padding: 18px;
    text-decoration: none !important;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    font-family: 'Karla', sans-serif;
}
.tt-account__action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(170, 111, 99, .15);
    border-color: #AA6F63;
}
.tt-account__action-ic {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: #F7D2C7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.tt-account__action strong {
    display: block;
    color: #000000;
    font-size: 15px;
    font-family: 'Karla', sans-serif;
    font-weight: 700;
}
.tt-account__action span {
    font-size: 12.5px;
    color: rgba(0, 0, 0, .55);
}

/* Order timeline */
.tt-account__timeline {
    position: relative;
    padding-left: 28px;
}
.tt-account__timeline::before {
    content: '';
    position: absolute;
    left: 8px; top: 8px; bottom: 8px;
    width: 2px;
    background: rgba(0, 0, 0, .08);
}
.tt-account__tl-item {
    position: relative;
    padding-bottom: 18px;
}
.tt-account__tl-item:last-child { padding-bottom: 0; }
.tt-account__tl-dot {
    position: absolute;
    left: -26px; top: 4px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid #AA6F63;
}
.tt-account__tl-item--delivered .tt-account__tl-dot { background: #AA6F63; border-color: #AA6F63; }
.tt-account__tl-item--shipped .tt-account__tl-dot   { background: #E89F82; border-color: #E89F82; }
.tt-account__tl-item--process .tt-account__tl-dot   { background: #F0B582; border-color: #F0B582; }
.tt-account__tl-item--cancelled .tt-account__tl-dot { background: rgba(0, 0, 0, .25); border-color: rgba(0, 0, 0, .25); }

.tt-account__tl-card {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.tt-account__tl-body { flex: 1; min-width: 0; }
.tt-account__tl-meta {
    font-size: 12px;
    color: rgba(0, 0, 0, .55);
    margin: 0 0 4px;
    font-family: 'Karla', sans-serif;
}
.tt-account__tl-title {
    font-weight: 600;
    color: #000000;
    margin: 0 0 4px;
    font-family: 'Karla', sans-serif;
    font-size: 15px;
}
.tt-account__tl-title a {
    color: inherit;
    text-decoration: none !important;
}
.tt-account__tl-title a:hover { color: #AA6F63; }
.tt-account__tl-items {
    font-size: 13px;
    color: rgba(0, 0, 0, .55);
    font-family: 'Karla', sans-serif;
}
.tt-account__tl-right {
    text-align: right;
    flex-shrink: 0;
}
.tt-account__tl-price {
    font-family: 'Riffic', 'Fredoka', 'Karla', system-ui, sans-serif;
    font-size: 19px;
    color: #000000;
    font-weight: 700;
}
.tt-account__tl-status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 4px;
    font-family: 'Karla', sans-serif;
}
.tt-account__tl-item--delivered .tt-account__tl-status { color: #AA6F63; }
.tt-account__tl-item--shipped .tt-account__tl-status   { color: #E89F82; }
.tt-account__tl-item--process .tt-account__tl-status   { color: #AA6F63; }
.tt-account__tl-item--cancelled .tt-account__tl-status { color: rgba(0, 0, 0, .35); }

.tt-account__view-all {
    margin: 18px 0 24px;
    text-align: right;
}
.tt-account__view-all a {
    color: #AA6F63;
    font-weight: 700;
    text-decoration: none !important;
    font-family: 'Karla', sans-serif;
    font-size: 14px;
}

.tt-account__empty {
    background: #F7EBE1;
    border-radius: 14px;
    padding: 24px;
    color: rgba(0, 0, 0, .65);
    text-align: center;
    margin: 0 0 24px;
    font-family: 'Karla', sans-serif;
}
.tt-account__empty a { color: #AA6F63; font-weight: 700; }

/* CTA banner */
.tt-account__cta {
    background: #AA6F63;
    color: #FFFFFF;
    border-radius: 24px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    position: relative;
    overflow: hidden;
}
.tt-account__cta::before {
    content: '🧸';
    position: absolute;
    right: 24px;
    font-size: 96px;
    opacity: .1;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.tt-account__cta-copy { position: relative; z-index: 1; }
.tt-account__cta h3 {
    font-family: 'Riffic', 'Fredoka', 'Karla', system-ui, sans-serif;
    font-size: 22px;
    margin: 0 0 6px;
    color: #FFFFFF;
    font-weight: 700;
}
.tt-account__cta p {
    opacity: .85;
    font-size: 14px;
    margin: 0;
    font-family: 'Karla', sans-serif;
}
.tt-account__cta-btn {
    background: #F0B582;
    color: #000000;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none !important;
    font-weight: 700;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    font-family: 'Karla', sans-serif;
    font-size: 14px;
    letter-spacing: .04em;
    transition: background .2s;
}
.tt-account__cta-btn:hover { background: #FFFFFF; }

/* ============================================================
   ── ACCOUNT v2 MOCKUP OVERRIDES (2026-05-21) ──────────────────
   Compact page-head, 4-card stat row, branded quick actions,
   timeline-style recent orders, gradient promo CTA. The earlier
   .tt-account__hero block above is unused by my-account.php now
   — its rules are dead but harmless. Variables here use the new
   palette names; defaults fall back to the rgb hex values so this
   block works without a separate :root token block.
   ============================================================ */
.tt-account {
    --tt-cream:      #FBEFE5;
    --tt-cream-2:    #F6E3D2;
    --tt-peach:      #F2D3BC;
    --tt-tan:        #E8B89A;
    --tt-terracotta: #C77B5C;
    --tt-brown:      #8B5A3C;
    --tt-espresso:   #3D2418;
    --tt-muted:      #8a6a5b;
    --tt-white:      #FFFAF4;
    --tt-line:       rgba(139,90,60,.15);
    background: var(--tt-cream) !important;
    color: var(--tt-espresso);
    font-family: 'Nunito', 'Karla', system-ui, sans-serif;
}
.tt-account__container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
}

/* Page head — avatar + greeting + tier pill, inline at the top */
.tt-account__page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0 18px;
}
.tt-account__greet { display: flex; align-items: center; gap: 14px; }
.tt-account__avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tt-tan), var(--tt-terracotta));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(139,90,60,.18);
}
.tt-account .tt-account__h1 {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: var(--tt-espresso) !important;
    font-family: 'Nunito', 'Karla', system-ui, sans-serif !important;
    margin: 0 !important;
}
.tt-account .tt-account__sub {
    font-size: 13px !important;
    color: var(--tt-muted) !important;
    margin: 2px 0 0 !important;
    font-family: inherit !important;
}
.tt-account__tier-pill {
    background: var(--tt-espresso);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: none;
}
.tt-account__tier-pill .tt-account__tier-dot,
.tt-account__tier-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tt-tan);
    display: inline-block;
}

/* Layout — sidebar + main. Sidebar 210px (was 230px) tightens the
   left column to match the compacted menu rows. */
.tt-account__layout {
    display: grid !important;
    grid-template-columns: 210px 1fr !important;
    gap: 24px !important;
    padding-bottom: 48px;
}
.tt-account__side {
    height: fit-content;
    position: sticky;
    top: 18px;
}
.tt-account__side-card {
    background: var(--tt-white) !important;
    border: 1px solid var(--tt-line) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.tt-account__main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Sidebar menu — tightened 2026-05-21 per mockup: smaller padding,
   smaller font + icon, lighter weight so the sidebar reads as a
   compact list rather than a stack of bold rows. */
.tt-account__menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tt-account__menu-item {
    list-style: none !important;
    margin: 0 !important;
}
.tt-account__menu-divider {
    height: 1px;
    background: var(--tt-line);
    margin: 6px 6px;
    list-style: none !important;
}
.tt-account__menu a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--tt-espresso) !important;
    margin-bottom: 1px;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    transition: background .15s ease;
    line-height: 1.2;
}
.tt-account__menu a:hover { background: var(--tt-cream) !important; }
.tt-account__menu-item.is-active a {
    background: var(--tt-cream-2) !important;
    color: var(--tt-brown) !important;
}
.tt-account__menu-item--signout a { color: var(--tt-terracotta) !important; }
.tt-account__menu-ic {
    width: 16px;
    font-size: 14px;
    display: inline-flex;
    justify-content: center;
    color: var(--tt-brown);
    font-style: normal;
    flex: 0 0 16px;
}
.tt-account__menu-label { flex: 1; }
.tt-account__menu-chev { display: none; }

/* Stats row */
.tt-account__stats {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
    gap: 14px !important;
}
.tt-account__stat {
    background: #ffffff;
    border: 1px solid var(--tt-line);
    border-radius: 16px;
    padding: 18px;
}
.tt-account__stat--progress {
    display: flex;
    align-items: center;
    gap: 14px;
}
.tt-account__ring {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.tt-account__ring-inner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    color: var(--tt-brown);
}
.tt-account__stat-label {
    font-size: 11px;
    color: var(--tt-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-top: 6px;
}
.tt-account__stat-title {
    font-size: 15px;
    font-weight: 800;
    margin-top: 2px;
    color: var(--tt-espresso);
}
.tt-account__stat-sub {
    font-size: 12px;
    color: var(--tt-muted);
    margin-top: 2px;
}
.tt-account__stat--progress .tt-account__stat-label { margin-top: 0; }
.tt-account__stat-num {
    font-size: 22px;
    font-weight: 900;
    color: var(--tt-brown);
    line-height: 1;
}

/* Section heads */
.tt-account__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 4px;
}
.tt-account__section-head h2 {
    font-size: 15px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    color: var(--tt-espresso) !important;
    font-family: 'Nunito', 'Karla', system-ui, sans-serif !important;
}
.tt-account__section-head a {
    font-size: 12px;
    color: var(--tt-brown);
    font-weight: 700;
    text-decoration: none;
}

/* Quick actions */
.tt-account__quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.tt-account__qa {
    background: #ffffff;
    border: 1px solid var(--tt-line);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: .15s ease;
    text-decoration: none;
    color: inherit;
}
.tt-account__qa:hover {
    transform: translateY(-2px);
    border-color: var(--tt-tan);
}
.tt-account__qa-ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--tt-cream-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}
.tt-account__qa-t {
    font-size: 14px;
    font-weight: 800;
    color: var(--tt-espresso);
}
.tt-account__qa-s {
    font-size: 11px;
    color: var(--tt-muted);
    margin-top: 1px;
}

/* Recent orders */
.tt-account__orders {
    background: #ffffff;
    border: 1px solid var(--tt-line);
    border-radius: 16px;
    overflow: hidden;
}
.tt-account__order {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    gap: 18px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--tt-line);
}
.tt-account__order:last-child { border-bottom: 0; }
.tt-account__order-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.tt-account__order-dot--delivered  { background: var(--tt-brown); }
.tt-account__order-dot--processing { background: var(--tt-tan); }
.tt-account__order-dot--shipped    { background: var(--tt-terracotta); }
.tt-account__order-dot--cancelled  { background: rgba(0,0,0,0.25); }
.tt-account__order-meta {
    font-size: 11px;
    color: var(--tt-muted);
    font-weight: 700;
}
.tt-account__order-title {
    font-size: 14px;
    font-weight: 800;
    margin-top: 1px;
    color: var(--tt-espresso);
}
.tt-account__order-items {
    font-size: 12px;
    color: var(--tt-muted);
    margin-top: 1px;
}
.tt-account__order-right { text-align: right; }
.tt-account__order-price {
    font-size: 15px;
    font-weight: 900;
    color: var(--tt-espresso);
}
.tt-account__order-status {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: none;
    background: rgba(0, 0, 0, 0.05);
    color: var(--tt-espresso);
    white-space: nowrap;
}
.tt-account__order-status--processing { background: #FCE9D2; color: #8B5A3C; }
.tt-account__order-status--shipped    { background: #E5DAFF; color: #4A3D85; }
.tt-account__order-status--delivered  { background: #DCEFD7; color: #2A6A3B; }
.tt-account__order-status--cancelled  { background: rgba(0,0,0,0.08); color: rgba(0,0,0,0.55); }
.tt-account__order-cta {
    font-size: 12px;
    font-weight: 800;
    color: var(--tt-brown);
    padding: 7px 12px;
    border: 1px solid var(--tt-line);
    border-radius: 8px;
    background: #ffffff;
    text-decoration: none;
    transition: background .15s ease;
}
.tt-account__order-cta:hover { background: var(--tt-cream-2); }
.tt-account__empty-card {
    padding: 24px;
    text-align: center;
    color: var(--tt-muted);
    font-size: 14px;
}
.tt-account__empty-card a { color: var(--tt-brown); font-weight: 800; }

/* Promo card */
.tt-account__promo-card {
    background: linear-gradient(135deg, var(--tt-brown), var(--tt-terracotta));
    color: #fff;
    border-radius: 16px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.tt-account__promo-card h3 {
    font-size: 16px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    color: #fff !important;
    font-family: inherit !important;
}
.tt-account__promo-card p {
    font-size: 12px !important;
    opacity: .9;
    margin: 2px 0 0 !important;
    color: #fff !important;
}
.tt-account__promo-btn {
    background: #fff !important;
    color: var(--tt-brown) !important;
    border: 0 !important;
    padding: 9px 16px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    cursor: pointer;
    text-decoration: none !important;
    flex: 0 0 auto;
}
.tt-account__promo-btn:hover { background: var(--tt-cream) !important; }

/* Panel wrapper for non-dashboard endpoints (orders / addresses / etc.) */
.tt-account__panel {
    background: #fff;
    border: 1px solid var(--tt-line);
    border-radius: 16px;
    padding: 24px;
}

/* Responsive */
@media (max-width: 900px) {
    .tt-account__layout {
        grid-template-columns: 1fr !important;
    }
    .tt-account__side {
        position: static;
    }
    .tt-account__stats {
        grid-template-columns: 1fr 1fr !important;
    }
    .tt-account__quick {
        grid-template-columns: 1fr 1fr !important;
    }
    .tt-account__page-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .tt-account__order {
        grid-template-columns: 12px 1fr auto;
        gap: 12px;
    }
    .tt-account__order-cta { display: none; }
}
@media (max-width: 560px) {
    .tt-account__container { padding: 0 16px; }
    .tt-account__stats { grid-template-columns: 1fr; }
    .tt-account__quick { grid-template-columns: 1fr; }
}

/* ============================================================
   LOGGED-OUT login/register state (same /my-account/ URL)
   ============================================================ */
.woocommerce-account.logged-out .woocommerce {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 24px;
}
.woocommerce-account.logged-out .u-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
@media (max-width: 700px) {
    .woocommerce-account.logged-out .u-columns { grid-template-columns: 1fr; }
}
.woocommerce-account.logged-out .col-1,
.woocommerce-account.logged-out .col-2 {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 24px;
    padding: 32px;
    width: auto !important;
    max-width: none !important;
    float: none !important;
}
.woocommerce-account.logged-out h2 {
    font-family: 'Riffic', 'Fredoka', 'Karla', system-ui, sans-serif;
    color: #000000;
    font-size: 26px;
    margin: 0 0 18px;
    font-weight: 700;
}
.woocommerce-form-row label {
    font-family: 'Karla', sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 13px;
}
.woocommerce-account.logged-out input[type="text"],
.woocommerce-account.logged-out input[type="email"],
.woocommerce-account.logged-out input[type="password"] {
    background: #F7EBE1;
    border: 1.5px solid rgba(0, 0, 0, .1);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Karla', sans-serif;
    font-size: 14px;
    width: 100%;
}
.woocommerce-account.logged-out input:focus { border-color: #AA6F63; outline: none; }
.woocommerce-account.logged-out button.woocommerce-button {
    background: #AA6F63 !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 12px 26px !important;
    font-family: 'Karla', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background .15s;
}
.woocommerce-account.logged-out button.woocommerce-button:hover { background: #000000 !important; }

/* ============================================================
   TEDDY TRANSFERS — MEMBERSHIP
   /membership/ landing page + my-account membership tab.
   Strict TT palette only.
   ============================================================ */

.tt-membership-hero {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
    padding: 24px 20px 0;
}
.tt-membership-eyebrow {
    color: #AA6F63;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 0 0 12px;
    font-family: 'Karla', sans-serif;
}
.tt-membership-h1 {
    font-family: 'Riffic', 'Fredoka', sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    color: #000000;
    margin: 0 0 20px;
    line-height: 1.1;
}
.tt-membership-sub {
    font-family: 'Karla', sans-serif;
    font-size: 17px;
    color: rgba(0, 0, 0, .65);
    margin: 0;
    line-height: 1.5;
}

.tt-membership-banner {
    max-width: 720px;
    margin: 0 auto 32px;
    padding: 14px 20px;
    background: #F7EBE1;
    border-left: 4px solid #AA6F63;
    border-radius: 12px;
    color: #000000;
    font-family: 'Karla', sans-serif;
    font-size: 14px;
    text-align: center;
}
.tt-membership-banner--warn {
    background: #F7D2C7;
    border-left-color: #E89F82;
}

.tt-membership-active {
    max-width: 600px;
    margin: 0 auto 48px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 24px;
    padding: 40px 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}
.tt-membership-active h2 {
    font-family: 'Riffic', sans-serif;
    color: #AA6F63;
    font-size: 28px;
    margin: 0 0 12px;
}
.tt-membership-active p {
    color: rgba(0, 0, 0, .7);
    font-family: 'Karla', sans-serif;
    font-size: 15px;
    margin: 0 0 24px;
}

.tt-membership-plans {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}
@media (max-width: 700px) {
    .tt-membership-plans { grid-template-columns: 1fr; }
}

.tt-membership-plan {
    background: #FFFFFF;
    border: 2px solid rgba(0, 0, 0, .08);
    border-radius: 24px;
    padding: 36px 28px 32px;
    position: relative;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    display: flex;
    flex-direction: column;
}
.tt-membership-plan:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(170, 111, 99, .12);
    border-color: #AA6F63;
}
.tt-membership-plan--featured {
    border-color: #AA6F63;
    background: linear-gradient(180deg, #FFFFFF, #F7EBE1);
}
.tt-membership-plan__pill {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #AA6F63;
    color: #FFFFFF;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-family: 'Karla', sans-serif;
    white-space: nowrap;
}
.tt-membership-plan__h {
    font-family: 'Riffic', sans-serif;
    color: #AA6F63;
    font-size: 13px;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.tt-membership-plan__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}
.tt-membership-plan__amt {
    font-family: 'Riffic', sans-serif;
    color: #000000;
    font-size: 48px;
    line-height: 1;
    font-weight: 700;
}
.tt-membership-plan__per {
    font-family: 'Karla', sans-serif;
    color: rgba(0, 0, 0, .55);
    font-size: 15px;
}
.tt-membership-plan__small {
    font-family: 'Karla', sans-serif;
    color: rgba(0, 0, 0, .5);
    font-size: 13px;
    margin: 0 0 20px;
}
.tt-membership-plan__list {
    list-style: none;
    padding: 0;
    margin: 16px 0 28px;
    flex: 1;
}
.tt-membership-plan__list li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-family: 'Karla', sans-serif;
    font-size: 14.5px;
    color: #000000;
    line-height: 1.4;
}
.tt-membership-plan__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 8px;
    color: #AA6F63;
    font-weight: 700;
    font-size: 16px;
}

.tt-membership-btn {
    display: inline-block;
    background: #AA6F63;
    color: #FFFFFF;
    border: 0;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s, transform .15s, box-shadow .15s;
    text-align: center;
}
.tt-membership-btn:hover { background: #000000; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.tt-membership-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.tt-membership-btn--primary { background: #AA6F63; }

.tt-membership-signin-note,
.tt-membership-admin-note {
    max-width: 720px;
    margin: 24px auto 0;
    text-align: center;
    font-family: 'Karla', sans-serif;
    font-size: 14px;
    color: rgba(0, 0, 0, .6);
    padding: 0 20px;
}
.tt-membership-signin-note a { color: #AA6F63; font-weight: 700; }
.tt-membership-admin-note {
    background: #F7D2C7;
    border-radius: 12px;
    padding: 14px 20px;
    color: #000000;
}

/* FAQ */
.tt-membership-faq {
    max-width: 720px;
    margin: 64px auto 32px;
    padding: 0 20px;
}
.tt-membership-faq h2 {
    text-align: center;
    font-family: 'Riffic', sans-serif;
    font-size: 28px;
    color: #000000;
    margin: 0 0 24px;
}
.tt-membership-faq details {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 10px;
    font-family: 'Karla', sans-serif;
}
.tt-membership-faq summary {
    cursor: pointer;
    font-weight: 700;
    color: #000000;
    font-size: 15px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tt-membership-faq summary::-webkit-details-marker { display: none; }
.tt-membership-faq summary::after {
    content: '+';
    color: #AA6F63;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.tt-membership-faq details[open] summary::after { content: '−'; }
.tt-membership-faq details p {
    margin: 12px 0 0;
    color: rgba(0, 0, 0, .7);
    line-height: 1.55;
    font-size: 14.5px;
}

/* ============================================================
   /my-account/membership/ endpoint content
   ============================================================ */
.tt-membership-status {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 8px 0 0;
}
@media (max-width: 640px) {
    .tt-membership-status { grid-template-columns: 1fr; }
}
.tt-membership-status__col {
    background: #F7EBE1;
    border-radius: 14px;
    padding: 16px;
}
.tt-membership-status__lbl {
    font-family: 'Karla', sans-serif;
    color: rgba(0, 0, 0, .55);
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
}
.tt-membership-status__val {
    font-family: 'Karla', sans-serif;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
}
.tt-membership-status__val--active { color: #AA6F63; }
.tt-membership-status__pill {
    background: #F0B582;
    color: #000000;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tt-membership-note {
    color: rgba(0, 0, 0, .55);
    font-family: 'Karla', sans-serif;
    font-size: 13px;
    margin-top: 8px;
}
.tt-account__banner {
    background: #F7EBE1;
    border-left: 4px solid #AA6F63;
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 20px;
    font-family: 'Karla', sans-serif;
    color: #000000;
}

/* "More designs you'll love" — uses block theme's native `alignfull`
   class to break out of the constrained parent. The theme's root
   CSS already provides:
     .alignfull {
        margin-left:  calc(-1 * var(--wp--style--root--padding-left));
        margin-right: calc(-1 * var(--wp--style--root--padding-right));
        max-width: unset;
        width: auto;
     }
   …which is the correct way on a root-padding-aware theme.
   Manual `100vw` math was off-center because the theme applies
   asymmetric root padding via theme.json's
   `useRootPaddingAwareAlignments: true`. */
.tt-more-products.alignfull {
    margin-top: clamp(56px, 6vw, 80px);
    padding: clamp(40px, 4vw, 56px) clamp(20px, 4vw, 40px) clamp(40px, 5vw, 64px);
    border-top: 1px solid var(--wp--preset--color--soft-pink);
    background: var(--wp--preset--color--cream-light);
    box-sizing: border-box;
}
.tt-more-products__h {
    font-family: 'Riffic', 'Fredoka', sans-serif !important;
    color: var(--wp--preset--color--brand) !important;
    font-size: clamp(28px, 3vw, 38px) !important;
    margin: 0 auto 32px !important;
    text-align: center;
    max-width: 1240px;
}
.tt-more-products .tt-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto;
}
@media (max-width: 900px) { .tt-more-products .tt-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tt-more-products .tt-product-grid { grid-template-columns: 1fr; } }

/* WC's add-to-cart.js auto-injects an `<a class="added_to_cart">View cart</a>`
   after every AJAX add. The slide-out drawer + per-card "Added ✓" state
   already convey the add, so this extra link reads as duplicate noise
   crammed under each upsell card. Hide it globally — the cart icon in
   the header is the canonical entry point. */
a.added_to_cart.wc-forward { display: none !important; }

/* Shop archive — flip the visual order of the WC product-collection
   children so pagination sits ABOVE the trust strip (not crammed at
   the page bottom under the icons). The actual grid is .tt-shop-grid
   (custom theme markup), not .wc-block-product-template. */
body.archive .wp-block-woocommerce-product-collection {
    display: flex !important;
    flex-direction: column !important;
}
body.archive .wp-block-woocommerce-product-collection > .wc-block-components-notices { order: 0; }
body.archive .wp-block-woocommerce-product-collection > .tt-shop-hero            { order: 1; }
body.archive .wp-block-woocommerce-product-collection > .tt-shop-grid,
body.archive .wp-block-woocommerce-product-collection > ul.wc-block-product-template,
body.archive .wp-block-woocommerce-product-collection > .wc-block-product-template { order: 2; }
body.archive .wp-block-woocommerce-product-collection > .wp-block-query-pagination,
body.archive .wp-block-woocommerce-product-collection > nav.woocommerce-pagination  { order: 3; }
body.archive .wp-block-woocommerce-product-collection > .tt-trust-strip,
body.archive .wp-block-woocommerce-product-collection > .tt-trust-strip--shop      { order: 4; }
body.archive .wp-block-woocommerce-product-collection > *                          { order: 5; }

/* Pretty pagination — rounded pills, brand colour, larger tap target.
   Applies to BOTH the block-query pagination and the legacy
   .woocommerce-pagination so the same look carries everywhere. */
.wp-block-query-pagination,
nav.woocommerce-pagination {
    margin: 28px auto 24px !important;
    padding: 0 16px;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.wp-block-query-pagination a,
.wp-block-query-pagination span.page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .wp-block-query-pagination-previous,
nav.woocommerce-pagination ul.page-numbers li a,
nav.woocommerce-pagination ul.page-numbers li span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--wp--preset--color--brand, #AA6F63) !important;
    border: 1.5px solid rgba(170, 111, 99, .25);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none !important;
    transition: background .15s, color .15s, border-color .15s;
}
.wp-block-query-pagination a:hover,
nav.woocommerce-pagination ul.page-numbers li a:hover {
    background: var(--wp--preset--color--cream-light, #FFF8F1);
    border-color: var(--wp--preset--color--brand, #AA6F63);
}
.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination span.current,
nav.woocommerce-pagination ul.page-numbers li span.current {
    background: var(--wp--preset--color--brand, #AA6F63) !important;
    color: #fff !important;
    border-color: var(--wp--preset--color--brand, #AA6F63);
}
.wp-block-query-pagination .wp-block-query-pagination-previous::before { content: "← "; }
.wp-block-query-pagination .wp-block-query-pagination-next::after { content: " →"; }
nav.woocommerce-pagination ul.page-numbers { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; }
nav.woocommerce-pagination ul.page-numbers li { margin: 0; }

/* "More designs you'll love" — restructured card layout: image, price,
   name, qty+ADD. Mirrors the checkout upsell carousel so the same
   visual language carries across pages. */
.tt-product-card--cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    text-align: center;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    padding: 0 0 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    text-decoration: none !important;
}
.tt-product-card--cta .tt-product-card__art {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--wp--preset--color--cream-light, #FFF8F1);
    position: relative;
}
.tt-product-card--cta .tt-product-card__art .tt-product-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: block;
}
.tt-product-card--cta .tt-product-card__price {
    padding: 12px 12px 4px;
    font-size: 17px;
    color: var(--wp--preset--color--ink, #3A2A22);
    font-weight: 700;
}
.tt-product-card--cta .tt-product-name {
    display: block;
    padding: 0 12px 10px;
    font-family: 'Riffic', 'Fredoka', sans-serif;
    color: var(--wp--preset--color--brand, #AA6F63) !important;
    font-size: 18px;
    text-decoration: none !important;
}
.tt-product-card--cta .tt-product-card__form {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0 12px;
}
.tt-product-card--cta .tt-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--wp--preset--color--soft-pink, #E9D6CD);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.tt-product-card--cta .tt-qty__minus,
.tt-product-card--cta .tt-qty__plus {
    background: transparent;
    border: 0;
    width: 28px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    color: var(--wp--preset--color--ink, #3A2A22);
}
.tt-product-card--cta .tt-qty__val {
    width: 36px;
    text-align: center;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--wp--preset--color--ink, #3A2A22);
    -moz-appearance: textfield;
    appearance: textfield;
}
.tt-product-card--cta .tt-qty__val::-webkit-outer-spin-button,
.tt-product-card--cta .tt-qty__val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tt-product-card--cta .tt-product-card__add {
    flex: 1;
    display: inline-block;
    background: var(--wp--preset--color--brand, #AA6F63);
    color: #fff !important;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none !important;
    text-align: center;
}
.tt-product-card--cta .tt-product-card__add:hover { filter: brightness(1.05); }

/* "More designs you'll love" grid — design inset from frame edges, and
   dark frame when the featured image is white-on-transparent. Mirrors
   the shop-card behaviour so the related grid looks consistent. */
.tt-product-card--cta .tt-product-card__art .tt-product-img {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    /* Without `background-origin: content-box` the background image
       extends into the padding box and `contain` measures against the
       full element — so padding gets ignored visually. */
    background-origin: content-box !important;
    padding: 28px !important;
    box-sizing: border-box !important;
}
.tt-product-card.tt-card--dark-bg .tt-product-card__art,
.tt-product-card.tt-card--dark-bg .tt-product-card__art .tt-product-img,
.tt-product-card.tt-card--dark-bg .tt-product-img {
    background-color: #111 !important;
}

/* Cart row inside the related grid — mirrors the shop-card cart-row
   but lives inside .tt-product-card. Slightly tighter spacing because
   the related grid renders 4-up on a narrower column than the shop. */
.tt-product-card--cta .tt-card-cart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 0 12px;
    margin: 0;
    align-items: center;
}
.tt-product-card--cta .tt-card-cart-row .tt-card-sizes-select {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 22px 0 10px;
    border: 1px solid var(--wp--preset--color--soft-pink);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: var(--wp--preset--color--ink);
    appearance: none;
    cursor: pointer;
}
.tt-product-card--cta .tt-card-cart-row .tt-card-qty {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--wp--preset--color--soft-pink);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.tt-product-card--cta .tt-card-cart-row .tt-card-qty__btn {
    flex: 1 1 0;
    background: transparent;
    border: 0;
    height: 34px;
    font-size: 18px;
    cursor: pointer;
    color: var(--wp--preset--color--ink);
}
.tt-product-card--cta .tt-card-cart-row .tt-card-qty__input {
    flex: 1 1 0;
    text-align: center;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--wp--preset--color--ink);
    width: 0; min-width: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}
.tt-product-card--cta .tt-card-cart-row .add_to_cart_button {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    background: var(--wp--preset--color--brand) !important;
    color: #fff !important;
    border: 0;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    margin-top: 4px;
}

/* Page title — bump the size of the .wp-block-post-title heading that
   renders at the top of regular pages (block-theme template). Shop loop
   product titles use the same class but are scoped under
   `ul.wc-block-product-template li.product`, which has higher
   specificity, so this rule only affects standalone page titles. */
.wp-block-post-title {
    font-family: 'Riffic', 'Fredoka', sans-serif;
    font-size: clamp(40px, 5.5vw, 64px);
    line-height: 1.1;
    color: var(--wp--preset--color--brand);
    margin: 24px 0 32px;
}

/* Hide WC's stock product-meta block (SKU / Categories / Tags row).
   Our custom badges + breadcrumb already convey the same info. */
.wp-block-woocommerce-product-meta { display: none !important; }

/* Download Invoice button on the customer view-order page. Injected
   INSIDE the WC overview paragraph via the woocommerce_order_details_status
   filter in inc/staff-dashboard.php, so the paragraph that wraps
   "Order #X … is currently STATUS." is also the flex container that
   pushes the button to the right edge on desktop. */
.woocommerce-MyAccount-content > p:has(.tt-order-status-text) {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.tt-order-status-text { flex: 1 1 auto; min-width: 0; }
.tt-invoice-download-row {
    margin: 8px 0 22px !important;
}
a.tt-invoice-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--wp--preset--color--brand, #AA6F63);
    color: #fff !important;
    padding: 11px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(170, 111, 99, 0.25);
    transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}
a.tt-invoice-download:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(170, 111, 99, 0.32);
}
a.tt-invoice-download:active { transform: translateY(0); }
a.tt-invoice-download svg { display: block; }

/* Kill the default yellow <mark> background on order details / received
   pages — WC wraps the order date + status in <mark> tags ("Order #X
   was placed on <mark>DATE</mark> and is currently <mark>STATUS</mark>"),
   which browsers render with a yellow highlight per HTML5 default. */
.woocommerce mark,
.woocommerce-page mark,
.woocommerce-order-details mark,
.woocommerce-thankyou-order-details mark,
.woocommerce-MyAccount-content mark,
body.woocommerce-account mark {
    background: transparent !important;
    color: inherit !important;
    font-weight: 600;
    padding: 0 !important;
}

/* ============================================================
   CHECKOUT — Option A (Teddy Brand) rebuild
   Two-column form-left / summary-right with brand bar at top.
   Uses .tt-checkout CSS variables for one-line color tweaks.
   ============================================================ */

body.woocommerce-checkout { background: #F7EBE1; }
body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-checkout .wp-block-site-title { display: none !important; }

.tt-checkout {
    --tt-brand:      #AA6F63;
    --tt-brand-dk:   #8A5347;
    --tt-line:       #EADBCF;
    --tt-bg:         #F7EBE1;
    --tt-card:       #FFFFFF;
    --tt-ink:        #000000;
    --tt-muted:      #7a6555;
    --tt-peach:      #F7D2C7;
    --tt-pill-bg:    #F4F0EB;
    --tt-ok:         #4A8A5E;

    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 24px 80px;
    font-family: 'Karla', system-ui, sans-serif;
    color: var(--tt-ink);
}

/* Brand bar */
.tt-checkout__brand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 12px;
}
.tt-checkout__logo {
    font-family: 'Riffic', 'Fredoka', sans-serif;
    font-size: 28px;
    color: var(--tt-brand);
    letter-spacing: -.5px;
    font-weight: 700;
    text-decoration: none !important;
    line-height: 1;
}
.tt-checkout__logo small {
    display: block;
    font-size: 10px;
    color: var(--tt-ink);
    letter-spacing: 3px;
    margin-top: 2px;
    font-family: 'Karla', sans-serif;
    font-weight: 600;
}
.tt-checkout__steps {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    color: var(--tt-muted);
    font-weight: 600;
}
.tt-checkout__steps a {
    color: var(--tt-muted) !important;
    text-decoration: none !important;
}
.tt-checkout__steps strong { color: var(--tt-brand); }
.tt-checkout__sep { color: rgba(0, 0, 0, .3); }

/* Grid — explicit aside width so the order summary doesn't reflow
   left/right as shipping label lengths change. Flat-rate label "Flat
   Rate Shipping (UPS/USPS) · 3–5 business days" sets the natural
   width at ~380px; pinning the aside to 380px keeps it stable when
   the customer switches to a shorter rate ("USPS — Priority Mail")
   and prevents the main column from flexing wider in response. */
.tt-checkout__grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px;
}
@media (max-width: 880px) {
    .tt-checkout__grid { grid-template-columns: 1fr; }
}
.tt-checkout__aside { min-width: 0; }

/* ============================================================
   CHECKOUT — Coupon code field inside the order summary
   ============================================================ */
.tt-checkout__coupon {
    margin: 0 0 16px;
    padding: 0 0 14px;
    border-bottom: 1px dashed var(--tt-line, rgba(0,0,0,0.10));
}
.tt-checkout__coupon-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tt-checkout__coupon-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tt-pill-bg, #F4F0EB);
    border: 1px solid var(--tt-line, rgba(0,0,0,0.10));
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tt-brand, #AA6F63);
}
.tt-checkout__coupon-remove {
    border: 0;
    background: var(--tt-brand, #AA6F63);
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.tt-checkout__coupon-row {
    display: flex;
    gap: 8px;
}
.tt-checkout__coupon-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    border: 1.5px solid var(--tt-line, rgba(0,0,0,0.10));
    border-radius: 10px;
    background: #FDF8F3;
    font-size: 14px;
    font-family: inherit;
    color: var(--tt-ink, #000);
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}
.tt-checkout__coupon-input:focus {
    border-color: var(--tt-brand, #AA6F63);
    background: #fff;
}
.tt-checkout__coupon-apply {
    flex: 0 0 auto;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--tt-brand, #AA6F63);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background .15s ease;
}
.tt-checkout__coupon-apply:hover { background: var(--tt-brand-dk, #8A5347); }
.tt-checkout__coupon-msg {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--tt-muted, #7a6555);
    line-height: 1.4;
}
.tt-checkout__coupon-msg[data-kind="error"]   { color: #B22822; }
.tt-checkout__coupon-msg[data-kind="success"] { color: #2F8F5A; }

/* ============================================================
   CHECKOUT — Upsell carousel above the order summary
   ============================================================ */
.tt-checkout__card--upsells {
    padding: 18px 18px 22px !important;
}
.tt-upsells__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.tt-upsells__head .tt-checkout__h {
    margin: 0 !important;
    font-size: 15px !important;
}
.tt-upsells__nav {
    display: flex;
    gap: 6px;
}
.tt-upsells__arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wp--preset--color--cream, #FFF8F1);
    border: 1px solid var(--tt-line, rgba(0,0,0,0.10));
    color: var(--wp--preset--color--brand, #AA6F63);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, border-color .15s ease;
}
.tt-upsells__arrow:hover {
    background: var(--wp--preset--color--brand, #AA6F63);
    border-color: var(--wp--preset--color--brand, #AA6F63);
    color: #fff;
}
.tt-upsells__track {
    display: flex;
    /* Size each card to its own content instead of stretching them all
       to the tallest card in the strip — the stretch is what pushed the
       qty stepper far below the variant select on shorter cards. */
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0 6px;
}
.tt-upsells__track::-webkit-scrollbar { display: none; }
.tt-upsell {
    flex: 0 0 calc(50% - 6px);
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--tt-line, rgba(0,0,0,0.08));
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.tt-upsell__art {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: var(--wp--preset--color--cream, #FFF8F1);
    display: block;
}
.tt-upsell__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tt-upsell__body {
    /* Don't grow to fill the card — keep the variant select and the
       qty/ATC buy row snug together. */
    flex: 0 0 auto;
    min-width: 0;
}
.tt-upsell__title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wp--preset--color--brand-dark, #4A3328);
    line-height: 1.3;
    text-decoration: none !important;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* Reserve two lines so 1- and 2-line titles keep the buy rows
       aligned now that cards are no longer stretched to equal height. */
    min-height: 2.6em;
}
.tt-upsell__title:hover { color: var(--wp--preset--color--brand, #AA6F63); }
.tt-upsell__price {
    font-size: 13px;
    font-weight: 800;
    color: var(--wp--preset--color--brand-dark, #4A3328);
}
.tt-upsell__price .woocommerce-Price-amount { font-weight: 800; }
.tt-upsell__price del { color: var(--wp--preset--color--ink-soft, #6E5145); opacity: .65; font-weight: 600; margin-right: 4px; font-size: 12px; }
/* Scoped under .tt-checkout with !important because the generic
   `.tt-checkout select` form rule (background:#fff !important;
   padding:0 14px !important; height:46px !important) otherwise wins on
   specificity + !important and strips the chevron off this select. */
.tt-checkout .tt-upsell__variant {
    margin-top: 4px;
    height: auto !important;
    padding: 8px 32px 8px 12px !important;
    border: 1.5px solid var(--tt-line, rgba(0,0,0,0.10)) !important;
    border-radius: 8px !important;
    font: 600 13px/1.2 var(--wp--preset--font-family--body, system-ui) !important;
    color: var(--wp--preset--color--ink, #000) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* Chevron — brand color, bigger viewBox + stroke so it's clearly
       visible against the cream background. Declared as background
       longhands with !important so the generic `background:#fff
       !important` can't wipe the image. */
    background-color: #FDF8F3 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'><path d='M2 2.5l5 5 5-5' fill='none' stroke='%23AA6F63' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px 10px !important;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}
.tt-checkout .tt-upsell__variant:focus {
    outline: none !important;
    border-color: var(--wp--preset--color--brand, #AA6F63) !important;
    box-shadow: 0 0 0 3px rgba(170, 111, 99, .15) !important;
}
.tt-upsell__atc {
    background: var(--wp--preset--color--brand, #AA6F63);
    color: #fff !important;
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
    display: block;
}
.tt-upsell__atc:hover {
    background: var(--wp--preset--color--brand-dark, #8B5544);
    transform: translateY(-1px);
}
.tt-upsell__atc.is-loading { opacity: .7; cursor: wait; }
.tt-upsell__atc.is-added { background: #2F8F5A; }

/* Per-card quantity stepper + buy row */
.tt-upsell__buy { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.tt-upsell__qty {
    display: inline-flex; align-items: center; align-self: center;
    height: 32px; border: 1.5px solid var(--tt-line, rgba(0,0,0,0.10));
    border-radius: 999px; background: #FDF8F3; overflow: hidden;
}
.tt-upsell__qty-btn {
    width: 30px; height: 32px; border: 0; background: transparent;
    color: #7a6a60; font-size: 16px; font-weight: 700; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .12s ease, color .12s ease;
}
.tt-upsell__qty-btn:hover { background: var(--wp--preset--color--brand, #AA6F63); color: #fff; }
.tt-upsell__qty-val {
    width: 32px; height: 32px; border: 0; background: transparent;
    text-align: center; font: 700 13px/1 'Karla', sans-serif; color: #2a2118;
    -moz-appearance: textfield; appearance: textfield;
}
.tt-upsell__qty-val::-webkit-outer-spin-button,
.tt-upsell__qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 880px) {
    /* Still 2 cards visible on mobile; user can scroll the rest. */
    .tt-upsell { flex-basis: calc(50% - 6px); }
}

/* Cards */
.tt-checkout__card {
    background: var(--tt-card);
    border: 1px solid var(--tt-line);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 18px;
    box-shadow: 0 8px 24px rgba(122, 63, 51, .06);
}
/* Sticky only the order-summary card — upsells stay in normal flow
   so they scroll away with the page. Aside must NOT be align-self:
   start (which would shrink it to content height and starve the
   sticky child of scroll room); leaving it as the grid default
   (stretch) gives the sticky summary the full main-column height
   to travel within. */
@media (min-width: 881px) {
    .tt-checkout__card--summary {
        position: sticky;
        top: 20px;
        align-self: start;
    }
}

/* Checkout marketing opt-in checkbox — sits under the email in the Contact card. */
.tt-checkout__optin{display:flex;align-items:flex-start;gap:9px;margin-top:14px;cursor:pointer;font-size:13.5px;line-height:1.4}
.tt-checkout__optin input{margin-top:2px;width:16px;height:16px;accent-color:#c0392b;flex:0 0 auto;cursor:pointer}
.tt-checkout__optin span{color:#5a4a40}

.tt-checkout__h {
    font-family: 'Riffic', 'Fredoka', sans-serif !important;
    font-size: 18px !important;
    color: var(--tt-ink) !important;
    font-weight: 700 !important;
    margin: 0 0 18px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.2;
}
.tt-checkout__num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tt-brand);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Karla', sans-serif;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

/* WC h3 inside cards = small subhead */
body.woocommerce-checkout .tt-checkout h3,
.tt-checkout .woocommerce-billing-fields > h3,
.tt-checkout .woocommerce-shipping-fields h3,
.tt-checkout .woocommerce-additional-fields h3,
.tt-checkout #payment_heading {
    font-family: 'Riffic', 'Fredoka', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--tt-brand-dk) !important;
    margin: 18px 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    display: block !important;
}

/* Inputs */
.tt-checkout input[type="text"],
.tt-checkout input[type="email"],
.tt-checkout input[type="tel"],
.tt-checkout input[type="number"],
.tt-checkout input[type="password"],
.tt-checkout select,
.tt-checkout textarea,
.tt-checkout .select2-selection {
    width: 100% !important;
    height: 44px !important;
    padding: 0 12px !important;
    border: 1px solid var(--tt-line) !important;
    border-radius: 10px !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 14px !important;
    color: var(--tt-ink) !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
}
.tt-checkout textarea {
    height: auto !important;
    min-height: 96px !important;
    padding: 12px !important;
    line-height: 1.45 !important;
}
.tt-checkout input:focus,
.tt-checkout select:focus,
.tt-checkout textarea:focus,
.tt-checkout .select2-container--focus .select2-selection {
    outline: none !important;
    border-color: var(--tt-brand) !important;
    box-shadow: 0 0 0 3px rgba(170, 111, 99, .15) !important;
}
.tt-checkout .select2-selection__rendered {
    line-height: 42px !important;
    color: var(--tt-ink) !important;
    padding-left: 0 !important;
}
.tt-checkout .select2-selection__arrow {
    height: 44px !important;
    top: 0 !important;
    right: 8px !important;
}

/* Form labels */
.tt-checkout .form-row > label,
.tt-checkout label.form-label {
    display: block !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 12px !important;
    color: var(--tt-muted) !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    margin: 0 0 4px !important;
}
/* Checkbox + radio labels stay normal */
.tt-checkout label.woocommerce-form__label-for-checkbox,
.tt-checkout label:has(> input[type="checkbox"]),
.tt-checkout label:has(> input[type="radio"]) {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 13.5px !important;
    color: var(--tt-ink) !important;
    font-weight: 500 !important;
}

/* Billing/shipping fields — 2-col grid */
.tt-checkout .form-row { margin-bottom: 12px; }
.tt-checkout .woocommerce-billing-fields__field-wrapper,
.tt-checkout .woocommerce-shipping-fields__field-wrapper,
.tt-checkout .woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}
.tt-checkout #billing_email_field,
.tt-checkout #billing_country_field,
.tt-checkout #billing_address_1_field,
.tt-checkout #billing_address_2_field,
.tt-checkout #billing_company_field,
.tt-checkout #shipping_country_field,
.tt-checkout #shipping_address_1_field,
.tt-checkout #shipping_address_2_field,
.tt-checkout #shipping_company_field,
.tt-checkout #order_comments_field { grid-column: 1 / -1; }

/* "Ship to a different address" toggle styled as numbered subhead */
.tt-checkout .woocommerce-shipping-fields h3#ship-to-different-address {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-size: 18px !important;
    color: var(--tt-ink) !important;
    margin: 18px 0 12px !important;
}
.tt-checkout .woocommerce-shipping-fields h3#ship-to-different-address::before {
    content: '2';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    background: var(--tt-brand);
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Karla', sans-serif;
    flex-shrink: 0;
}

/* Order summary card — line items, totals, etc. */
.tt-checkout__card--summary {
    padding: 24px;
}
.tt-checkout__promo {
    background: var(--tt-peach);
    color: var(--tt-ink);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
    font-weight: 600;
    text-align: center;
}

/* Order review table */
.tt-checkout .shop_table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 12px;
    background: transparent !important;
    border: 0 !important;
}
.tt-checkout .shop_table thead { display: none; }
.tt-checkout .shop_table th,
.tt-checkout .shop_table td {
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--tt-line) !important;
    background: transparent !important;
    font-family: 'Karla', sans-serif !important;
    color: var(--tt-ink) !important;
    font-size: 14px !important;
}
.tt-checkout .shop_table .product-name {
    color: var(--tt-ink) !important;
    font-weight: 700 !important;
}
.tt-checkout .shop_table .product-quantity {
    color: var(--tt-muted);
    font-size: 12px;
}
.tt-checkout .shop_table tfoot th {
    font-weight: 700 !important;
    color: var(--tt-muted) !important;
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: .04em;
}
.tt-checkout .shop_table tfoot .order-total th,
.tt-checkout .shop_table tfoot .order-total td {
    font-family: 'Riffic', 'Fredoka', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--tt-ink) !important;
    border-top: 1.5px solid var(--tt-line) !important;
    padding-top: 14px !important;
    text-transform: none !important;
}

/* Free shipping pill */
.tt-checkout .shop_table tfoot .shipping td bdi,
.tt-checkout .shop_table tfoot .shipping td .woocommerce-Price-amount,
.tt-checkout .shop_table tfoot .shipping td .amount {
    background: var(--tt-pill-bg) !important;
    color: var(--tt-ok) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-block;
    text-transform: none !important;
    letter-spacing: 0;
}

/* Coupon — small inline group */
.tt-checkout .checkout_coupon {
    display: flex;
    gap: 8px;
    margin: 14px 0;
}
.tt-checkout .checkout_coupon p.form-row { flex: 1; margin: 0; }
.tt-checkout .checkout_coupon button[name="apply_coupon"] {
    background: #FFFFFF !important;
    color: var(--tt-brand) !important;
    border: 1.5px solid var(--tt-brand) !important;
    padding: 0 18px !important;
    height: 44px !important;
    border-radius: 10px !important;
    font-family: 'Karla', sans-serif !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.tt-checkout .checkout_coupon button[name="apply_coupon"]:hover {
    background: var(--tt-brand) !important;
    color: #FFFFFF !important;
}
/* Hide the top WC "Have a coupon?" info banner — we keep the
   inline coupon form WC also renders inside #order_review. */
.tt-checkout > .woocommerce-info:first-child,
.tt-checkout .woocommerce-form-coupon-toggle {
    display: none !important;
}

/* Shipping radio group (payment is restyled in the redesign block
   at the end of this file — these rules cover shipping only now). */
.tt-checkout .shipping_method {
    list-style: none !important;
    padding: 0 !important;
    margin: 6px 0 14px !important;
    border: 1px solid var(--tt-line);
    border-radius: 12px;
    background: #FFFFFF;
    overflow: hidden;
}
.tt-checkout .woocommerce-shipping-methods li {
    border-bottom: 1px solid var(--tt-line);
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    position: relative;
}
.tt-checkout .woocommerce-shipping-methods li:last-child { border-bottom: 0; }
.tt-checkout .woocommerce-shipping-methods input[type="radio"] {
    position: absolute;
    left: 14px;
    top: 18px;
    accent-color: var(--tt-brand);
}
.tt-checkout .woocommerce-shipping-methods li label {
    display: block !important;
    padding: 14px 16px 14px 42px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 14px !important;
    color: var(--tt-ink) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

/* (Old .tt-checkout #place_order and .payment_box rules removed —
   superseded by the Payment Section Redesign block at the end.) */

/* Trust strip */
.tt-checkout__trust {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 14px;
    font-size: 12px;
    color: var(--tt-muted);
    font-weight: 500;
    flex-wrap: wrap;
}

/* WC notices */
.tt-checkout .woocommerce-error,
.tt-checkout .woocommerce-info,
.tt-checkout .woocommerce-message {
    background: var(--tt-peach) !important;
    border-left: 4px solid var(--tt-brand) !important;
    color: var(--tt-ink) !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    list-style: none !important;
    font-family: 'Karla', sans-serif !important;
    margin-bottom: 14px;
}
.tt-checkout #order_review_heading { display: none !important; }

/* Mobile: stack form fields into single column */
@media (max-width: 600px) {
    .tt-checkout .woocommerce-billing-fields__field-wrapper,
    .tt-checkout .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   CHECKOUT — Option A v2 patch
   • Logo + Place Order = accent orange #FF8C42 (mockup spec)
   • New: ship/pickup toggle, email opt-in row, pickup panel
   ============================================================ */

.tt-checkout {
    --tt-accent: #FF8C42;      /* logo + Place Order */
    --tt-accent-dk: #E87A32;
}

/* Logo: accent orange */
.tt-checkout__logo { color: var(--tt-accent) !important; }

/* (Old accent-orange place_order override removed — Place Order
   uses brand brown per Payment Section Redesign at the end.) */

/* Ship-to-me / Pickup toggle */
.tt-checkout__delivery-toggle {
    display: flex;
    background: var(--tt-bg);
    border-radius: 12px;
    padding: 4px;
    margin: 0 0 16px;
    gap: 4px;
}
.tt-checkout__toggle-btn {
    flex: 1;
    padding: 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: var(--tt-muted);
    border-radius: 9px;
    font-family: 'Karla', sans-serif;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.tt-checkout__toggle-btn.is-on {
    background: var(--tt-brand);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(170, 111, 99, .25);
}

/* Pickup panel content */
.tt-checkout__pickup-panel {
    padding: 16px;
    background: var(--tt-bg);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--tt-ink);
}
.tt-checkout__pickup-panel p { margin: 0 0 10px; }
.tt-checkout__pickup-panel p:last-child { margin: 0; }
.tt-checkout__pickup-note {
    font-size: 12.5px;
    color: var(--tt-muted);
}

/* "Email me with discounts" opt-in row in Section 1 */
.tt-checkout__optin {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    font-family: 'Karla', sans-serif;
    font-size: 13.5px;
    color: var(--tt-ink);
    cursor: pointer;
}
.tt-checkout__optin input { accent-color: var(--tt-brand); }
.tt-checkout__optin span { font-weight: 500; }

/* Footer top border — 1px solid brand brown above the footer block. */
footer.wp-block-group {
    border-top: 1px solid #AA6F63 !important;
}

/* Checkout logo image + nuke the WC coupon-toggle banner + WC's
   default subsection headings ("Billing details" etc.) — multiple
   reports of all three being ugly/intrusive. */
.tt-checkout__logo img {
    max-height: 56px;
    width: auto;
    display: block;
}
.tt-checkout__logo small { display: none !important; }

.tt-checkout .woocommerce-form-coupon-toggle,
.tt-checkout > .woocommerce-info,
form.checkout > .woocommerce-info,
body.woocommerce-checkout .woocommerce > .woocommerce-info {
    display: none !important;
}
.tt-checkout .woocommerce-billing-fields > h3,
.tt-checkout #payment_heading {
    display: none !important;
}

/* ============================================================
   CHECKOUT — final visual fixes after live page review
   ============================================================ */

/* 1. Coupon banner at top — broader selector. It renders BEFORE
   .tt-checkout in the DOM, so the .tt-checkout-scoped rule didn't
   catch it. Scope to the whole woocommerce-checkout body. */
body.woocommerce-checkout .woocommerce > .woocommerce-info,
body.woocommerce-checkout form.checkout > .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce-form-coupon {
    display: none !important;
}

/* 2. Express payment buttons (G Pay / Amazon Pay) + "— OR —"
   separator — these render outside the form card by default. Hide
   them entirely until properly integrated; Stripe still works via
   the regular card-payment radio in the order review. */
body.woocommerce-checkout #wc-stripe-payment-request-button,
body.woocommerce-checkout .wc-stripe-payment-request-wrapper,
body.woocommerce-checkout #wc-stripe-payment-request-button-separator,
body.woocommerce-checkout .wc-block-components-express-payment,
body.woocommerce-checkout .wc-block-components-express-payment-continue-rule {
    display: none !important;
}

/* 3. Checkbox/radio labels — force sentence case, kill all the
   uppercase tracked styling that was leaking from form-row rules.
   Direct selectors with !important so they win regardless of
   :has() support quirks. */
.tt-checkout .woocommerce-form__label-for-checkbox,
.tt-checkout .woocommerce-form__label-for-checkbox *,
.tt-checkout label.checkbox,
.tt-checkout label.checkbox *,
.tt-checkout #ship-to-different-address-checkbox,
.tt-checkout #ship-to-different-address-checkbox *,
.tt-checkout .form-row.create-account label,
.tt-checkout .form-row.create-account label *,
.tt-checkout p.form-row label.checkbox,
.tt-checkout p.form-row label.checkbox *,
.tt-checkout .woocommerce-additional-fields label,
.tt-checkout label[for="createaccount"],
.tt-checkout label[for="ship-to-different-address-checkbox"],
.tt-checkout label[for*="wc-stripe-new-payment-method"],
.tt-checkout label[for*="wc-stripe-save"] {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 13.5px !important;
    color: var(--tt-ink) !important;
    font-weight: 500 !important;
    font-family: 'Karla', sans-serif !important;
}

/* 4. Order notes — hide entirely (mockup doesn't show this; clutters
   the form). Customers who really need to leave a note can email
   us, and the order receipt has a contact link. */
.tt-checkout #order_comments_field,
.tt-checkout .woocommerce-additional-fields {
    display: none !important;
}

/* 5. WC privacy-policy block + terms below the button — keep terms
   but hide the long privacy paragraph above the button (mockup
   doesn't have it; it makes the right column too tall). */
.tt-checkout .woocommerce-privacy-policy-text {
    display: none !important;
}

/* 6. "Ship to a different address?" — pulled tight against the left
   edge of the card and snapped up close to the email-marketing
   checkbox above. Previously sat in a soft-bg pill with 16px of top
   margin which made it feel like a separate section; now it reads
   as an inline sub-option directly under the "I would like to
   receive emails…" line. */
.tt-checkout .woocommerce-shipping-fields h3#ship-to-different-address {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 4px 0 0 !important;
    font-size: 14px !important;
    color: var(--tt-ink) !important;
    font-family: 'Karla', sans-serif !important;
    font-weight: 600 !important;
}
.tt-checkout .woocommerce-shipping-fields h3#ship-to-different-address::before {
    content: none !important;
}
.tt-checkout .woocommerce-shipping-fields h3#ship-to-different-address label,
.tt-checkout .woocommerce-shipping-fields h3#ship-to-different-address span {
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--tt-ink) !important;
    font-weight: 600 !important;
    font-family: 'Karla', sans-serif !important;
}

/* 7. Order summary — restyle line items so they have breathing room
   and a clearer hierarchy. */
.tt-checkout .shop_table .cart_item td.product-name {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    line-height: 1.4 !important;
    width: auto !important;
    white-space: normal !important;
}
.tt-checkout .shop_table .cart_item td.product-total {
    text-align: right !important;
    font-weight: 700 !important;
    color: var(--tt-ink) !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    /* width:1% + nowrap collapses the price/qty column to its
       intrinsic content width so the product-name column gets the
       remaining horizontal space. Without this, table-layout:auto
       was giving the price column equal width and the name was
       wrapping one word per line. */
    width: 1% !important;
    white-space: nowrap !important;
}
/* Title inside the product-name cell must not get capped by an
   inherited max-width — let it flow into the full grid 1fr slot. */
.tt-checkout .shop_table .cart_item td.product-name .tt-co-item-name {
    max-width: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}
.tt-checkout .shop_table .cart_item .product-quantity {
    color: var(--tt-muted);
    font-size: 13px;
    margin-left: 4px;
}

/* 8. "SHIPMENT" → cleaner shipping row */
.tt-checkout .shop_table .shipping th {
    font-size: 12px !important;
    color: var(--tt-muted) !important;
}
.tt-checkout .shop_table .shipping label { display: none !important; }

/* ============================================================
   CHECKOUT — centering + final visual polish (post-review)
   ============================================================ */

/* Force the WC wrapper to center within the alignwide container.
   WC's default max-width:1000px + margin:0 was pinning the form
   to the left of the 1240px content area. */
body.woocommerce-checkout .entry-content > .woocommerce,
body.woocommerce-checkout .wp-block-post-content > .woocommerce {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.tt-checkout {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Kill the "Billing details" heading no matter where WC drops it. */
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-shipping-fields h3:not(#ship-to-different-address),
body.woocommerce-checkout #customer_details h3,
body.woocommerce-checkout .tt-checkout__delivery-fields > h3 {
    display: none !important;
}

/* (Removed earlier .tt-checkout #payment rules — superseded by the
   Payment Section Redesign block at the end of this file.) */

/* (Place Order rules moved to Payment Section Redesign block at end.) */

/* Terms / privacy text near place order — small + muted */
.tt-checkout .woocommerce-terms-and-conditions-wrapper {
    font-size: 12px;
    color: var(--tt-muted, #7a6a5e);
    margin-bottom: 8px;
}
.tt-checkout .woocommerce-terms-and-conditions-wrapper label {
    font-family: 'Karla', sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ============================================================
   CHECKOUT — fields + dropdowns + payment polish
   ============================================================ */

/* Legacy WC sets form-row-first/last to width: 47% which collapses
   them inside the grid wrapper. Fill the grid cell. */
.tt-checkout .woocommerce-billing-fields__field-wrapper,
.tt-checkout .woocommerce-shipping-fields__field-wrapper,
.tt-checkout .woocommerce-additional-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 14px !important;
}
.tt-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.tt-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.tt-checkout .form-row-wide,
.tt-checkout .form-row.notes,
.tt-checkout .form-row.address-field.form-row-wide:not(.form-row-first):not(.form-row-last) {
    grid-column: 1 / -1 !important;
}

/* Inputs — uniform brand styling. Scoped to address forms only so it
   doesn't mangle checkbox labels inside the payment box. */
.tt-checkout .woocommerce-billing-fields__field-wrapper .form-row > label,
.tt-checkout .woocommerce-shipping-fields__field-wrapper .form-row > label {
    font-family: 'Karla', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--tt-muted, #7a6a5e) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    display: block !important;
}
.tt-checkout .form-row .required {
    color: var(--tt-brand) !important;
    text-decoration: none !important;
}
/* Save payment row inside .payment_box — flatten the <p class="form-row"> */
.tt-checkout .payment_box .form-row {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    height: auto !important;
}
.tt-checkout input.input-text,
.tt-checkout textarea,
.tt-checkout select {
    width: 100% !important;
    height: 46px !important;
    padding: 0 14px !important;
    border: 1.5px solid var(--tt-line, #EADBCF) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--tt-ink, #2a2118) !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 14px !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box !important;
}
.tt-checkout textarea {
    height: auto !important;
    min-height: 80px;
    padding: 12px 14px !important;
}
.tt-checkout input.input-text:focus,
.tt-checkout textarea:focus,
.tt-checkout select:focus {
    border-color: var(--tt-brand) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(170, 111, 99, .15) !important;
}

/* Select2 — match the brand inputs */
.tt-checkout .select2-container--default .select2-selection--single {
    height: 46px !important;
    border: 1.5px solid var(--tt-line, #EADBCF) !important;
    border-radius: 10px !important;
    background: #fff !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}
.tt-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--tt-ink, #2a2118) !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 14px !important;
    line-height: 1 !important;
    padding: 0 !important;
    flex: 1 !important;
}
.tt-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
    width: 26px !important;
    right: 8px !important;
    top: 0 !important;
}
.tt-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--tt-brand) transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
}
.tt-checkout .select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent var(--tt-brand) transparent !important;
    border-width: 0 5px 6px 5px !important;
}
.tt-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.tt-checkout .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--tt-brand) !important;
    box-shadow: 0 0 0 3px rgba(170, 111, 99, .15) !important;
}
/* Select2 dropdown panel (renders outside .tt-checkout, scope to body) */
body.woocommerce-checkout .select2-container--open .select2-dropdown {
    border: 1.5px solid var(--tt-brand) !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
body.woocommerce-checkout .select2-container--open .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--tt-line, #EADBCF) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 14px !important;
}
body.woocommerce-checkout .select2-results__option {
    font-family: 'Karla', sans-serif !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    color: var(--tt-ink, #2a2118) !important;
}
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--tt-cream, #F7EBE1) !important;
    color: var(--tt-brand) !important;
}

/* (Removed earlier payment options block — superseded by the
   Payment Section Redesign block at the end of this file.) */
.tt-checkout #payment > h3 { display: none !important; }
.tt-checkout #payment::before { display: none !important; }

/* WooCommerce error/notice styling inside checkout */
.tt-checkout .woocommerce-error,
.tt-checkout .woocommerce-NoticeGroup li {
    background: #fff5f0 !important;
    border: 1px solid #e89f82 !important;
    border-radius: 10px !important;
    color: #7a3d2d !important;
    padding: 10px 14px !important;
    font-family: 'Karla', sans-serif !important;
}

/* (Removed earlier :has(li:only-child) rules — superseded by the
   Payment Section Redesign block at the end of this file.) */

/* Order summary line items — thumbnail + name layout */
.tt-checkout .shop_table .cart_item td.product-name {
    padding: 14px 8px 14px 0 !important;
    vertical-align: top !important;
}
.tt-co-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px;
}
.tt-co-thumb {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    border-radius: 12px;
    object-fit: contain;
    padding: 5px;
    box-sizing: border-box;
    background: var(--tt-cream, #F7EBE1);
    border: 1px solid var(--tt-line, #EADBCF);
}
.tt-co-thumb--ph {
    display: inline-block;
}
.tt-co-item-name {
    font-family: 'Karla', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tt-ink, #2a2118);
    line-height: 1.3;
    display: block;
}
/* Variation/meta — sits as a sibling AFTER .tt-co-item in the TD, so
   push it right by (thumb width + gap) to land directly under the
   title. No "Design:" prefix (bridge plugin passes an empty key). */
.tt-checkout .shop_table .cart_item .product-name dl.variation {
    margin: 1px 0 0 74px !important; /* 56 thumb + 18 gap */
    padding: 0 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #6E5145 !important;
    line-height: 1.35 !important;
}
.tt-checkout .shop_table .cart_item .product-name dl.variation p {
    margin: 0 !important;
    padding: 0 !important;
}
.tt-checkout .shop_table .cart_item .product-name dl.variation dt,
.tt-checkout .shop_table .cart_item .product-name dl.variation dd {
    display: inline;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: inherit !important;
    font-size: inherit !important;
}

/* Right cell: price on top, qty stepper directly below it. The 14px
   right padding keeps the price / × / qty stepper off the card edge so
   they don't read as jammed against the right side. */
.tt-checkout .shop_table .cart_item td.product-total {
    padding: 14px 14px 14px 8px !important;
    vertical-align: top !important;
    text-align: right !important;
}
.tt-co-price-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.tt-co-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--tt-ink, #2a2118);
    line-height: 1.2;
    white-space: nowrap;
}
.tt-co-price .woocommerce-Price-amount,
.tt-co-price bdi { font-weight: 700; }
/* Checkout-flavor stepper sized a touch smaller than the drawer one. */
.tt-qty.tt-qty--checkout {
    height: 26px;
}
.tt-qty.tt-qty--checkout button {
    width: 22px;
    height: 26px;
    font-size: 13px;
}
.tt-qty.tt-qty--checkout .tt-qty__val {
    min-width: 18px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #2a2118;
}

/* ════════════════════════════════════════════════════════════════
   Order summary de-clutter (2026-06-18) — WooCommerce's default
   shop_table borders were stacking with the row layout to read as
   "double lines everywhere". Strip ALL default borders and use ONE
   hairline between line items + one above the totals. Tidy the qty
   stepper and style the per-line "Preview design" link.
   ════════════════════════════════════════════════════════════════ */
.tt-checkout .woocommerce-checkout-review-order-table { border-collapse: collapse !important; width: 100%; }
.tt-checkout .woocommerce-checkout-review-order-table,
.tt-checkout .woocommerce-checkout-review-order-table thead th,
.tt-checkout .woocommerce-checkout-review-order-table tbody td,
.tt-checkout .woocommerce-checkout-review-order-table tbody th,
.tt-checkout .woocommerce-checkout-review-order-table tfoot th,
.tt-checkout .woocommerce-checkout-review-order-table tfoot td { border: 0 !important; }
/* one hairline between consecutive line items only */
.tt-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item + tr.cart_item td { border-top: 1px solid var(--tt-line, #EADBCF) !important; }
/* totals: even spacing, single divider above the block */
.tt-checkout .woocommerce-checkout-review-order-table tfoot tr th { padding: 6px 0; }
.tt-checkout .woocommerce-checkout-review-order-table tfoot tr td { padding: 6px 14px 6px 0; }
.tt-checkout .woocommerce-checkout-review-order-table tfoot tr:first-child th,
.tt-checkout .woocommerce-checkout-review-order-table tfoot tr:first-child td { border-top: 1px solid var(--tt-line, #EADBCF) !important; padding-top: 16px !important; }

/* Tidier checkout qty stepper — clean white pill, less cramped. */
.tt-qty.tt-qty--checkout { height: 30px; background: #fff; border-color: var(--tt-line, #EADBCF); }
.tt-qty.tt-qty--checkout button { width: 28px; height: 30px; font-size: 15px; color: #7a6a60; }
.tt-qty.tt-qty--checkout button:hover { background: #AA6F63; color: #fff; }
.tt-qty.tt-qty--checkout .tt-qty__val { min-width: 30px; font-size: 13px; }

/* Per-line "Preview design" — an actual button (matches the purple
   Buildaur preview buttons elsewhere in the account area). */
.tt-checkout .shop_table .cart_item .product-name .tt-co-preview {
    display: inline-flex; align-items: center; gap: 5px;
    /* The product-name cell is a 2-col grid (thumb | content); span both
       columns + justify-self:start so the pill sits flush under the
       thumbnail at the row's left edge instead of indented in col 2. */
    grid-column: 1 / -1; justify-self: start;
    margin: 10px 0 2px 0;
    background: #f1ecff; color: #6c43e0 !important;
    border: 1px solid #ddd2ff; border-radius: 999px; padding: 6px 13px;
    font-family: 'Karla', sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: .2px; text-decoration: none; line-height: 1;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.tt-checkout .shop_table .cart_item .product-name .tt-co-preview:hover { background: #7c5cfd; border-color: #7c5cfd; color: #fff !important; text-decoration: none; }
.tt-checkout .shop_table .cart_item .product-name .tt-co-preview:active { transform: translateY(1px); }
.tt-checkout .shop_table .cart_item .product-name .tt-co-preview svg { display: block; }
/* Remove × button on each cart row in the checkout order summary. */
.tt-cart-remove {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    line-height: 1;
    font-size: 16px;
    color: #9b8e85;
    cursor: pointer;
    align-self: flex-end;
    margin-bottom: -2px;
    transition: color 120ms ease;
}
.tt-cart-remove:hover,
.tt-cart-remove:focus {
    color: #c0392b;
    outline: none;
}

/* ============================================================
   Keep only the Stripe-probe-input hide rule. Everything else
   (payment box, UPE wrapper, save row, errors) is now handled by
   the Payment Section Redesign block below.
   ============================================================ */

/* Default <fieldset> chrome inside the payment box — kill it. */
.tt-checkout .payment_box fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

/* Hide the Stripe style-probe + tracker inputs. */
.tt-checkout #wc-stripe-hidden-style-input,
.tt-checkout input.wc-stripe-hidden-style-input,
.tt-checkout #wc-stripe-payment-method-upe,
.tt-checkout #wc_stripe_selected_upe_payment_type {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Empty saved-payment-methods UL — collapse when empty. */
.tt-checkout .woocommerce-SavedPaymentMethods:empty {
    display: none !important;
}

/* ============================================================
   Checkout · Payment Methods — flat, breathable (final)
   Scope: body.woocommerce-checkout #payment
   ============================================================ */

/* Outer container — no card, no chrome */
body.woocommerce-checkout #payment.woocommerce-checkout-payment{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Method list */
body.woocommerce-checkout ul.wc_payment_methods.payment_methods{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Each method row (Card·Apple Pay·Klarna, PayPal, etc) */
body.woocommerce-checkout ul.wc_payment_methods > li.wc_payment_method{
  background: transparent !important;
  border: 1px solid #ecdfd6 !important;
  border-radius: 12px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease;
}

/* Selected state */
body.woocommerce-checkout ul.wc_payment_methods > li.wc_payment_method:has(input[name="payment_method"]:checked){
  border-color: #b07a63 !important;
  background: #fbf6f2 !important;
}

/* Top label row — flex with native radio left of text */
body.woocommerce-checkout ul.wc_payment_methods > li.wc_payment_method > label{
  font-family: 'Karla', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--tt-ink, #2b1d18) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
}

/* Native radio — accent brand brown, no custom mask */
body.woocommerce-checkout ul.wc_payment_methods > li.wc_payment_method > input[type="radio"]{
  appearance: auto !important;
  -webkit-appearance: radio !important;
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 8px 0 0 !important;
  accent-color: #b07a63 !important;
  opacity: 1 !important;
}
/* Drop the focus rectangle around the radio after a mouse click — it
   reads as an unwanted border. Keep it for keyboard users so tab
   navigation is still visible. */
body.woocommerce-checkout ul.wc_payment_methods > li.wc_payment_method > input[type="radio"]:focus:not(:focus-visible){
  outline: none !important;
  box-shadow: none !important;
}

/* Inner payment_box — remove nested card + tooltip arrow */
body.woocommerce-checkout #payment .payment_box{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 0 4px 0 !important;
  margin: 8px 0 0 0 !important;
  color: var(--tt-ink, #2b1d18) !important;
}
body.woocommerce-checkout #payment .payment_box::before{ display: none !important; }

/* Stripe element host — flatten so the iframe sits flush */
body.woocommerce-checkout .wc-upe-form,
body.woocommerce-checkout #wc-stripe-upe-form,
body.woocommerce-checkout .wc-stripe-upe-element,
body.woocommerce-checkout .StripeElement,
body.woocommerce-checkout .wc-stripe-upe-element.StripeElement{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
body.woocommerce-checkout .wc-stripe-upe-element.StripeElement--focus,
body.woocommerce-checkout .wc-stripe-upe-element.StripeElement--invalid{
  box-shadow: none !important;
  border: 0 !important;
}
body.woocommerce-checkout #wc-stripe-upe-errors:not(:empty){
  color: #c0392b;
  font-size: 13px;
  margin-top: 10px;
}

/* Strip WC form-row chrome inside payment box */
body.woocommerce-checkout .payment_box p.form-row,
body.woocommerce-checkout .payment_box .woocommerce-validated,
body.woocommerce-checkout .payment_box .woocommerce-invalid{
  outline: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.woocommerce-checkout .payment_box fieldset{
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Hide the "Save payment information…" row entirely (also disabled
   via WC filters server-side; CSS belt-and-suspenders). */
body.woocommerce-checkout .payment_box p.woocommerce-SavedPaymentMethods-saveNew,
body.woocommerce-checkout .payment_box fieldset:has(> p.woocommerce-SavedPaymentMethods-saveNew),
body.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew{
  display: none !important;
}

/* PLACE ORDER BUTTON — brand brown, flush, no card */
body.woocommerce-checkout #place_order{
  width: 100% !important;
  margin-top: 22px !important;
  background: var(--tt-brand, #aa6f63) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  font-family: 'Karla', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .15s ease, transform .05s ease;
}
body.woocommerce-checkout #place_order:hover{ background: #8a554a !important; }
body.woocommerce-checkout #place_order:active{ transform: translateY(1px); }

/* ============================================================
   DTF Transfers by Size — Hero iframe + Pricing-by-size block
   ============================================================ */

/* Hero iframe wrapper inherits .tt-upload-embed-wrap styling (white
   bg + 18px radius + soft shadow) — see rule at top of this file.
   The .tt-by-size-hero scope is here only for the iframe itself. */
.tt-by-size-hero .tt-upload-embed-wrap iframe {
    display: block;
}

/* Section 2 image + pricing two-column */
.page-id-100 .tt-bysize-photo,
.page-id-100 .tt-bysize-photo img,
.page-id-100 .tt-builder-section .tt-bysize-photo,
.page-id-100 .tt-builder-section .tt-bysize-photo img {
    background: transparent !important;
    box-shadow: none !important;
}

.tt-bysize-pricecard {
    background: #FFF8F1;
    border: 1px solid #EADBCF;
    border-radius: 18px;
    padding: clamp(20px, 3vw, 32px);
    box-shadow: 0 8px 24px -18px rgba(74, 51, 40, .25);
    font-family: 'Karla', sans-serif;
    color: #4A3328;
}
.tt-bysize-pricecard__eyebrow {
    margin: 0 0 6px;
    color: #AA6F63;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.tt-bysize-pricecard__h {
    margin: 0 0 18px;
    font-family: 'Riffic', 'Fredoka', sans-serif;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.15;
    color: #2B1D18;
}
.tt-bysize-pricecard__h strong {
    color: #AA6F63;
    font-weight: 700;
}
.tt-bysize-pricelist {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
}
.tt-bysize-pricelist li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #EADBCF;
    font-size: 15px;
}
.tt-bysize-pricelist li:first-child,
.tt-bysize-pricelist li:nth-child(2) {
    border-top: 1px solid #EADBCF;
}
@media (max-width: 600px) {
    .tt-bysize-pricelist { grid-template-columns: 1fr; column-gap: 0; }
    .tt-bysize-pricelist li:nth-child(2) { border-top: 0; }
}
.tt-bysize-pricelist__size {
    flex: 0 0 auto;
    font-weight: 700;
    color: #2B1D18;
    min-width: 38px;
}
.tt-bysize-pricelist__dot {
    flex: 1 1 auto;
    border-bottom: 1.5px dotted #C9B7A9;
    transform: translateY(-4px);
}
.tt-bysize-pricelist__price {
    flex: 0 0 auto;
    font-weight: 700;
    color: #AA6F63;
    font-variant-numeric: tabular-nums;
}
.tt-bysize-pricecard__note {
    margin: 0 0 18px;
    font-size: 13px;
    color: #7a665d;
    line-height: 1.5;
}
.tt-bysize-pricecard__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #AA6F63;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 12px;
    transition: background .15s ease, transform .05s ease;
}
.tt-bysize-pricecard__cta:hover { background: #8a554a; }
.tt-bysize-pricecard__cta:active { transform: translateY(1px); }
.tt-bysize-pricecard__cta .tt-arrow-img {
    width: 14px;
    height: auto;
    filter: brightness(0) invert(1);
}

@media (max-width: 781px) {
    .page-id-100 .tt-builder-section .wp-block-columns {
        gap: 24px !important;
    }
    .page-id-100 .tt-builder-section .wp-block-column { flex-basis: 100% !important; }
}

/* ============================================================
   Blog — single post + archive grid
   ============================================================ */

/* Single post hero — text col + image col, flex row */
.tt-single__hero {
    padding: 70px 5% !important;
    background: #FFF8F1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 60px !important;
}
.tt-single__hero .hero-text-col {
    flex: 1 1 60%;
    max-width: 60%;
}
.tt-single__hero .hero-img-col {
    flex: 0 0 360px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tt-single__hero .hero-img-col figure,
.tt-single__hero .hero-img-col .wp-block-post-featured-image {
    width: 340px;
    height: 340px;
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(139, 90, 60, 0.18);
}
.tt-single__hero .hero-img-col img {
    width: 340px;
    height: 340px;
    object-fit: cover;
    display: block;
    border-radius: 24px;
}

.tt-single__crumb {
    margin: 0 0 1rem !important;
    font-size: 13px;
    font-weight: 600;
    color: #AA6F63;
}
.tt-single__crumb a {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease;
}
.tt-single__crumb a:hover { color: #8a554a; }
.tt-single .tt-single__title {
    font-family: 'Riffic', 'Fredoka', sans-serif !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    line-height: 1.1 !important;
    color: #2B1D18 !important;
    margin: 0.5rem 0 1rem !important;
}
.tt-single__meta {
    display: flex !important;
    align-items: center !important;
    gap: 4px 8px !important;
    flex-wrap: wrap !important;
    color: #7A665D !important;
    font-size: 14px !important;
    margin: 1rem 0 0 !important;
    opacity: 0.85 !important;
}
.tt-single__meta .wp-block-post-date,
.tt-single__meta .wp-block-post-terms {
    font-family: 'Karla', sans-serif;
    color: #7A665D;
    font-size: 14px;
    margin: 0;
}
.tt-single__meta .wp-block-post-terms a {
    color: #AA6F63;
    text-decoration: none;
    font-weight: 600;
}

/* Hide the old standalone featured-image strip */
.tt-single__featured-wrap { display: none !important; }

/* Mobile: stack hero vertically */
@media (max-width: 900px) {
    .tt-single__hero {
        flex-direction: column !important;
        gap: 30px !important;
        padding: 50px 5% !important;
    }
    .tt-single__hero .hero-text-col,
    .tt-single__hero .hero-img-col {
        max-width: 100% !important;
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* Article body */
.tt-single__content {
    font-family: 'Karla', sans-serif;
    font-size: 17px;
    line-height: 1.75;
    color: #2B1D18;
}
.tt-single__content > * + * { margin-top: 1.1em; }
.tt-single__content h2 {
    font-family: 'Riffic', 'Fredoka', sans-serif;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.2;
    color: #2B1D18;
    margin: 1.8em 0 .5em;
}
.tt-single__content h3 {
    font-family: 'Riffic', 'Fredoka', sans-serif;
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.25;
    color: #2B1D18;
    margin: 1.6em 0 .4em;
}
.tt-single__content p { margin: 0 0 1.1em; }
.tt-single__content a {
    color: #AA6F63;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(170, 111, 99, .35);
    transition: text-decoration-color .15s ease;
}
.tt-single__content a:hover {
    text-decoration-color: #AA6F63;
}
.tt-single__content ul,
.tt-single__content ol {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}
.tt-single__content li { margin: 0 0 .4em; }
.tt-single__content blockquote {
    margin: 1.5em 0;
    padding: 16px 22px;
    background: #FFF8F1;
    border-left: 4px solid #AA6F63;
    border-radius: 0 12px 12px 0;
    font-size: 17px;
    color: #4A3328;
}
.tt-single__content blockquote p:last-child { margin-bottom: 0; }
.tt-single__content img,
.tt-single__content figure img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

/* Squarespace intrinsic-ratio wrappers create a giant padding-bottom
   equal to the image height (their absolute-positioned image hack).
   We don't bring the positioning CSS along, so the padding is just
   dead space. Flatten the whole sqs image-wrapper stack. */
.tt-single__content .sqs-image-shape-container-element,
.tt-single__content .image-block-wrapper,
.tt-single__content .image-block-outer-wrapper,
.tt-single__content .sqs-block-image-figure,
.tt-single__content figure.sqs-block-image-figure {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
}
.tt-single__content figure.sqs-block-image-figure {
    margin-top: 1.4em !important;
    margin-bottom: 1.4em !important;
}
.tt-single__content .sqs-image-shape-container-element img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
}
/* Squarespace blog wrapper grid — reset to plain flow */
.tt-single__content .sqs-layout,
.tt-single__content .sqs-row,
.tt-single__content .sqs-block,
.tt-single__content .sqs-block-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}
.tt-single__content figure {
    margin: 1.6em 0;
}
.tt-single__content figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: #7A665D;
    text-align: center;
}
.tt-single__content code {
    background: #FFF8F1;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .92em;
}
.tt-single__content hr {
    border: 0;
    border-top: 1px solid #EADBCF;
    margin: 2em 0;
}

/* Archive (blog index) — equal-height cards, bigger images.
   Force full width — the block theme's `is-layout-constrained`
   parent caps the inner post-template at theme.json contentSize
   (~780px), which would shrink the cards. */
.tt-archive__query.wp-block-query,
.tt-archive__query.wp-block-query > * {
    max-width: none !important;
    width: 100% !important;
}
.tt-archive__grid .wp-block-post-template,
.tt-archive__grid,
ul.wp-block-post-template.tt-archive__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
    max-width: none !important;
    width: 100% !important;
}
.tt-archive__grid .wp-block-post-template > li,
.tt-archive__grid > li {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}
@media (max-width: 900px) {
    .tt-archive__grid .wp-block-post-template,
    .tt-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }
}
@media (max-width: 600px) {
    .tt-archive__grid .wp-block-post-template,
    .tt-archive__grid { grid-template-columns: 1fr !important; }
}

.tt-card {
    background: #fff;
    border: 1px solid #EADBCF;
    border-radius: 18px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}
.tt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -22px rgba(43, 29, 24, .25);
}

/* Image — square aspect so the 1080×1080 source artwork fills the
   top of the card edge-to-edge without cream gutters. */
.tt-card__image {
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    background: #FFF8F1 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}
.tt-card__image a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 0 !important;
}
.tt-card__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
}

/* Body — stretches to fill remaining card height so read-more
   always sits at the bottom regardless of title/excerpt length. */
.tt-card__body {
    padding: 22px 24px 24px !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    min-height: 0 !important;
}
.tt-card__date {
    margin: 0 0 10px !important;
    color: #AA6F63 !important;
    font-family: 'Karla', sans-serif;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    flex: 0 0 auto !important;
}
.tt-card__title {
    font-family: 'Riffic', 'Fredoka', sans-serif !important;
    font-size: 21px !important;
    line-height: 1.2 !important;
    color: #2B1D18 !important;
    margin: 0 0 12px !important;
    flex: 0 0 auto !important;
}
.tt-card__title a {
    color: inherit !important;
    text-decoration: none !important;
}
.tt-card__title a:hover { color: #AA6F63 !important; }
.tt-card__excerpt {
    font-family: 'Karla', sans-serif;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: #4A3328 !important;
    margin: 0 0 18px !important;
    flex: 1 1 auto !important;
}
.tt-card__excerpt p { margin: 0 !important; }

/* Read-more — pinned to bottom of the body via margin-top:auto.
   This works regardless of excerpt length / missing excerpt. */
.tt-card__readmore {
    margin: auto 0 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    flex: 0 0 auto !important;
}
.tt-card__readmore a {
    color: #AA6F63 !important;
    text-decoration: none !important;
}
.tt-card__readmore a:hover { color: #8a554a !important; }

/* Pagination */
.tt-archive__pagination {
    margin-top: 48px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    align-items: center;
}
.tt-archive__pagination a,
.tt-archive__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #EADBCF;
    background: #fff;
    color: #2B1D18 !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tt-archive__pagination .current {
    background: #AA6F63;
    color: #fff !important;
    border-color: #AA6F63;
}
.tt-archive__pagination a:hover {
    border-color: #AA6F63;
    color: #AA6F63 !important;
}

/* ── Checkout totals: labels flush left, amounts flush right ──
   tfoot rows (subtotal / shipment / total) were rendering with the
   amount mid-row instead of pushed against the right edge — looked
   half-off-center next to the labels. Explicit text-align lock so
   each row reads cleanly as "LABEL ........... $X.XX". */
.tt-checkout .shop_table tfoot tr th { text-align: left !important; }
.tt-checkout .shop_table tfoot tr td { text-align: right !important; width: 1%; white-space: nowrap; }
/* Lock the whole order-summary table to the card width so no row
   can ever push it past the boundary. */
.tt-checkout .shop_table { table-layout: auto; width: 100% !important; max-width: 100% !important; }

/* Shipping rate description on its own full-width row below the
   SHIPPING/$cost row. Lets long carrier labels like "Flat Rate
   Shipping (UPS/USPS) · 3–5 business days" flow across the full
   card width instead of squeezing into the narrow price column. */
.tt-checkout .shop_table tr.tt-shipping-method-row td {
    padding-top: 4px !important;
    padding-bottom: 12px !important;
    border-top: 0 !important;
    text-align: left !important;
    color: var(--tt-muted, #7a6555);
    font-size: 12.5px;
    line-height: 1.4;
    white-space: normal !important;
    width: auto !important;
}

/* Rewards "earn on this order" bar — same story as the shipping-method
   row above. inc/rewards.php:419 injects
   <tr class="tt-earn-row"><td colspan="2">…</td></tr> into this table's
   tfoot, so the money-cell rule on line 10368 (width:1%; white-space:
   nowrap) hit it too and made the whole sentence unbreakable. Its
   min-content then became the auto-layout table's minimum width,
   blowing the 330px summary card out to 555px and pushing the entire
   checkout form into horizontal overflow (measured 2026-07-21).
   Selector deliberately omits `tfoot` so it keeps working if the earn
   row is ever re-hooked into tbody. */
.tt-checkout .shop_table tr.tt-earn-row > td {
    white-space: normal !important;
    width: auto !important;
    text-align: left !important;
}

/* ── Order summary can never be wider than its card ──────────────
   The review-order table was auto-layout, so its width was driven by its
   own minimum content — a 76px thumbnail column plus a quantity stepper
   that cannot wrap — giving it a hard floor of 279px it would not go
   below. Whenever the summary card was narrower than that, every price,
   stepper and total hung off the right-hand edge.

   This is a CONTAINER problem, not a viewport one, which is why an
   earlier max-width media query did not fix it: .tt-checkout__grid keeps
   a fixed 380px aside above 880px and goes full-width below it, so the
   card's width does not track the viewport in any way you can express as
   a breakpoint.

   table-layout: fixed removes the dependency entirely — the table takes
   the width it is given and sizes columns from the first row instead of
   from content. Verified zero overflow at container widths of 420, 340,
   280 and 240px, with the price and the stepper still fitting inside
   their own cells. Desktop is visually unchanged apart from the totals
   column gaining ~16px, which the price and stepper were tight in anyway.
   (2026-07-21) */
.tt-checkout .woocommerce-checkout-review-order-table { table-layout: fixed !important; }
.tt-checkout .shop_table .cart_item td.product-total,
.tt-checkout .shop_table thead th.product-total { width: 104px !important; }

/* ── Order summary on narrow phones ──────────────────────────────
   The review-order table is auto-layout, so its width is driven by its
   own minimum content: a 76px thumbnail column + a 12px gap on the left,
   and an 88px quantity stepper (which cannot wrap) on the right. That
   put a hard floor of 279px on the table. A ~320px phone leaves the
   summary card roughly 250px of content box, so the table simply refused
   to fit and every price, stepper and total hung off the right edge of
   the card — measured 2026-07-21 against a Transfers-by-Size cart.

   Two changes, both scoped to small screens:
     1. Shrink the pieces that set the floor (thumb 76 -> 44, stepper
        buttons 28 -> 22, tighter cell padding). Floor 279 -> 244.
     2. table-layout: fixed with a pinned total column, which stops the
        table sizing itself from content at all. Verified to hold with
        zero overflow down to a 200px card, with the price and the
        stepper still fitting inside their own cells.

   Desktop keeps auto layout and the 76px thumb — it has the room, and
   the larger design preview is worth having there. */
@media (max-width: 600px) {
    .tt-checkout .shop_table .cart_item td.product-name {
        grid-template-columns: 44px 1fr !important;
        column-gap: 10px !important;
        padding-right: 4px !important;
    }
    .tt-checkout .shop_table .cart_item td.product-name .tt-co-thumb,
    .tt-checkout .shop_table .cart_item td.product-name .buildaur-co-thumb {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        flex: 0 0 44px !important;
    }
    .tt-checkout .shop_table .cart_item td.product-total {
        padding-left: 4px !important;
        padding-right: 6px !important;
    }
    .tt-qty.tt-qty--checkout button { width: 22px !important; }
    .tt-qty.tt-qty--checkout .tt-qty__val { min-width: 22px !important; }
    .tt-checkout .woocommerce-checkout-review-order-table tfoot tr td { padding-right: 6px !important; }

    /* Tighter totals column to match the smaller stepper above. */
    .tt-checkout .shop_table .cart_item td.product-total,
    .tt-checkout .shop_table thead th.product-total { width: 96px !important; }
}

/* Select2's accessible-hide class, which nothing on this site was
   defining. Select2's JS hides the ORIGINAL <select> by tagging it
   .select2-hidden-accessible and relies on its own stylesheet to shrink
   it to 1px — but that stylesheet isn't enqueued here, so billing_country
   and billing_state stayed full-width, absolutely positioned, and hung
   218px off the right edge of /checkout/. Only `clip` was reaching them,
   which hides the paint but still counts toward scrollable overflow, so
   the whole page scrolled sideways. This is select2's own rule verbatim
   (plus max/min-width, since a bare <select> won't shrink below its
   intrinsic width). Site-wide on purpose — the same selects appear on
   my-account and the cart shipping calculator. (2026-07-21) */
.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    min-width: 0 !important;
    max-width: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: -1px !important;
    position: absolute !important;
    white-space: nowrap !important;
}

/* ─── My Account → Wishlist tab ─────────────────────────────────── */
.woocommerce-account .tt-wishlist-empty { text-align: center; padding: 40px 20px; }
.woocommerce-account .tt-wishlist-empty h2 { font-size: 22px; margin: 0 0 8px; color: var(--wp--preset--color--brand); }
.woocommerce-account .tt-wishlist-empty p { color: var(--wp--preset--color--ink-soft, #6e5145); margin: 0 0 16px; }
.tt-wishlist-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.tt-wishlist-item {
    background: #fff;
    border: 1.5px solid var(--wp--preset--color--soft-pink, #f7d2c7);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color .15s ease, transform .15s ease;
}
.tt-wishlist-item:hover { border-color: var(--wp--preset--color--brand); transform: translateY(-2px); }
.tt-wishlist-item__link { display: block; color: inherit; text-decoration: none; padding: 14px; }
.tt-wishlist-item__thumb img { width: 100%; height: auto; border-radius: 8px; display: block; }
.tt-wishlist-item__name {
    display: block;
    font-family: 'Karla', sans-serif;
    font-weight: 600;
    margin-top: 10px;
    color: var(--wp--preset--color--ink, #2b1d18);
}
.tt-wishlist-item__price { display: block; margin-top: 4px; color: var(--wp--preset--color--brand); font-weight: 700; }
.tt-wishlist-item__remove {
    margin: 0 14px 14px;
    background: transparent;
    border: 1.5px solid var(--wp--preset--color--brand);
    color: var(--wp--preset--color--brand);
    padding: 8px 12px;
    border-radius: 10px;
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.tt-wishlist-item__remove:hover { background: var(--wp--preset--color--brand); color: #fff; }
.tt-wishlist-item__remove:disabled { opacity: .6; cursor: wait; }

/* ════════════════════════════════════════════════════════════════
   MEMBERSHIP PAGE  ─ scoped to .tt-mem so the generic class names
   (.hero, .plans, .calc, .faq, etc.) don't leak elsewhere.
   ═══════════════════════════════════════════════════════════════ */
.tt-mem {
    --mem-bg: #FFF8F1;
    --mem-panel: #FFFFFF;
    --mem-soft: #F7EBE1;
    --mem-softer: #E8C9B8;
    --mem-line: #EFDDCC;
    --mem-ink: #4A3328;
    --mem-brown: #6E5145;
    --mem-accent: #AA6F63;
    --mem-muted: #8A6F62;
    color: var(--mem-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--mem-bg);
    /* Escape WP's constrained-layout content-size cap (~780px) so the
       hero and every section run edge-to-edge. The inner .tt-mem-wrap
       still caps content at 1040px and centers it. */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
}
.tt-mem h1, .tt-mem h2, .tt-mem h3 {
    font-family: var(--wp--preset--font-family--display, 'Riffic', 'Fredoka', sans-serif);
    margin: 0;
    color: var(--mem-ink);
    font-weight: 600;
    letter-spacing: -.01em;
}
.tt-mem .tt-mem-wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* Hero */
.tt-mem .tt-mem-hero { padding: 88px 0 56px; text-align: center; position: relative; }
.tt-mem .tt-mem-sparkle { position: absolute; font-size: 18px; color: var(--mem-accent); opacity: .6; }
.tt-mem .tt-mem-sparkle.s1 { top: 60px; left: 14%; }
.tt-mem .tt-mem-sparkle.s2 { top: 120px; right: 18%; font-size: 14px; }
.tt-mem .tt-mem-sparkle.s3 { top: 200px; left: 8%; font-size: 22px; }
.tt-mem .tt-mem-sparkle.s4 { top: 50px; right: 10%; font-size: 22px; }
.tt-mem .tt-mem-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--mem-accent); font-size: 12px; letter-spacing: .22em;
    text-transform: uppercase; margin-bottom: 20px;
    background: var(--mem-soft); padding: 8px 16px; border-radius: 999px;
    font-weight: 600;
}
.tt-mem .tt-mem-hero h1 { font-size: 64px; line-height: 1.02; margin: 0 0 18px; font-weight: 600; }
.tt-mem .tt-mem-hero h1 .tt-mem-squiggle { position: relative; display: inline-block; z-index: 1; }
.tt-mem .tt-mem-hero h1 .tt-mem-squiggle:after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
    height: 14px; background: var(--mem-softer); z-index: -1; border-radius: 6px;
}
.tt-mem .tt-mem-hero p { max-width: 520px; margin: 0 auto; color: var(--mem-brown); font-size: 17px; line-height: 1.55; }
.tt-mem .tt-mem-stats { display: flex; justify-content: center; gap: 48px; margin-top: 36px; flex-wrap: wrap; }
.tt-mem .tt-mem-stat { font-size: 13px; color: var(--mem-muted); }
.tt-mem .tt-mem-stat b {
    display: block;
    font-family: var(--wp--preset--font-family--display, 'Riffic', 'Fredoka', sans-serif);
    color: var(--mem-ink); font-size: 24px; font-weight: 600; margin-bottom: 2px;
}

/* Plans */
.tt-mem .tt-mem-plans {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    margin: 56px auto 96px; max-width: 860px;
    border: 1px solid var(--mem-line); border-radius: 18px;
    overflow: hidden; background: #fff;
}
.tt-mem .tt-mem-plan { padding: 40px 36px; position: relative; }
.tt-mem .tt-mem-plan + .tt-mem-plan { border-left: 1px solid var(--mem-line); background: var(--mem-soft); }
.tt-mem .tt-mem-plan .tt-mem-tag {
    font-size: 11px; letter-spacing: .2em; font-weight: 600;
    color: var(--mem-brown); text-transform: uppercase; margin-bottom: 14px;
    display: inline-block; width: auto;
    background: var(--mem-bg); padding: 5px 12px; border-radius: 999px;
    white-space: nowrap;
}
.tt-mem .tt-mem-plan .tt-mem-tag--featured { background: var(--mem-accent); color: #FFF8F1; }
.tt-mem .tt-mem-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tt-mem .tt-mem-price .tt-mem-num {
    font-family: var(--wp--preset--font-family--display, 'Riffic', 'Fredoka', sans-serif);
    font-size: 52px; font-weight: 600; color: var(--mem-ink); line-height: 1;
}
.tt-mem .tt-mem-price .tt-mem-per { color: var(--mem-brown); font-size: 15px; }
.tt-mem .tt-mem-sub { color: var(--mem-brown); font-size: 13px; margin-bottom: 28px; min-height: 18px; }
.tt-mem ul.tt-mem-features { list-style: none; padding: 0; margin: 0 0 32px; }
.tt-mem ul.tt-mem-features li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 8px 0; font-size: 14px; color: var(--mem-ink);
}
.tt-mem .tt-mem-check {
    flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--mem-softer); color: var(--mem-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px; margin-top: 1px;
}
.tt-mem .tt-mem-cta {
    display: block; width: 50%; text-align: center;
    margin-right: auto;
    border: 1px solid var(--mem-ink); background: transparent;
    color: var(--mem-ink); border-radius: 999px;
    padding: 14px; font-weight: 600; font-size: 14px;
    cursor: pointer; font-family: 'Inter', sans-serif;
    transition: all .15s; text-decoration: none;
}
.tt-mem .tt-mem-cta:hover { background: var(--mem-ink); color: #FFF8F1; }
.tt-mem .tt-mem-cta--primary { background: var(--mem-ink); color: #FFF8F1; border-color: var(--mem-ink); }
.tt-mem .tt-mem-cta--primary:hover { background: var(--mem-accent); border-color: var(--mem-accent); }

/* Sections */
.tt-mem .tt-mem-sec { margin-bottom: 96px; }
.tt-mem .tt-mem-sec-head { text-align: center; margin-bottom: 40px; }
.tt-mem .tt-mem-kicker {
    display: inline-block; color: var(--mem-accent);
    font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
    margin-bottom: 12px; font-weight: 600;
}
.tt-mem .tt-mem-sec-head h2 { font-size: 38px; font-weight: 600; }
.tt-mem .tt-mem-wink { display: inline-block; animation: tt-mem-wiggle 3s ease-in-out infinite; transform-origin: bottom center; }
@keyframes tt-mem-wiggle { 0%, 90%, 100% { transform: rotate(0); } 94% { transform: rotate(15deg); } 97% { transform: rotate(-10deg); } }
.tt-mem .tt-mem-sec-head p { color: var(--mem-brown); font-size: 15px; margin-top: 8px; }

/* Calculator */
.tt-mem .tt-mem-calc {
    background: var(--mem-ink); color: #FFF8F1; border-radius: 18px; padding: 48px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
    align-items: center; position: relative; overflow: hidden;
}
.tt-mem .tt-mem-calc .tt-mem-blob { position: absolute; font-size: 80px; opacity: .08; right: 30px; bottom: -10px; }
.tt-mem .tt-mem-calc h3 { font-size: 24px; margin-bottom: 10px; color: #FFF8F1; }
.tt-mem .tt-mem-calc-intro { color: #F7EBE1; font-size: 14px; line-height: 1.55; margin-bottom: 28px; opacity: .8; }
.tt-mem .tt-mem-slider-wrap label {
    display: flex; justify-content: space-between;
    font-size: 13px; color: #F7EBE1; margin-bottom: 14px; opacity: .85;
}
.tt-mem .tt-mem-slider-wrap label b { color: #FFF8F1; font-weight: 600; opacity: 1; }
.tt-mem input[type=range] {
    width: 100%; -webkit-appearance: none; appearance: none;
    height: 4px; background: rgba(255, 248, 241, .18);
    border-radius: 999px; outline: none;
}
.tt-mem input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; background: var(--mem-softer);
    border-radius: 50%; cursor: pointer; border: 3px solid #FFF8F1;
}
.tt-mem .tt-mem-calc-out { border-left: 1px solid rgba(255, 248, 241, .15); padding-left: 48px; }
.tt-mem .tt-mem-calc-row {
    display: flex; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid rgba(255, 248, 241, .12);
    font-size: 14px; color: #F7EBE1;
}
.tt-mem .tt-mem-calc-row b { color: #FFF8F1; font-weight: 500; }
.tt-mem .tt-mem-calc-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 20px; }
.tt-mem .tt-mem-calc-total span { color: #F7EBE1; font-size: 12px; text-transform: uppercase; letter-spacing: .18em; opacity: .8; }
.tt-mem .tt-mem-calc-total .tt-mem-big {
    font-family: var(--wp--preset--font-family--display, 'Riffic', 'Fredoka', sans-serif);
    font-size: 42px; color: #FFF8F1; font-weight: 600;
}

/* Benefits */
.tt-mem .tt-mem-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tt-mem .tt-mem-bcard {
    background: #fff; border: 1px solid var(--mem-line);
    border-radius: 18px; padding: 28px;
    transition: transform .2s, border-color .2s;
}
.tt-mem .tt-mem-bcard:hover { transform: translateY(-3px); border-color: var(--mem-accent); }
.tt-mem .tt-mem-bcard .tt-mem-ic {
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--mem-soft); color: var(--mem-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; margin-bottom: 18px; font-weight: 700;
}
.tt-mem .tt-mem-bcard:nth-child(2) .tt-mem-ic,
.tt-mem .tt-mem-bcard:nth-child(4) .tt-mem-ic,
.tt-mem .tt-mem-bcard:nth-child(6) .tt-mem-ic { background: var(--mem-softer); }
.tt-mem .tt-mem-bcard h3 { font-size: 17px; margin-bottom: 8px; font-family: 'Inter', sans-serif; font-weight: 600; }
.tt-mem .tt-mem-bcard p { margin: 0; color: var(--mem-brown); font-size: 14px; line-height: 1.55; }

/* Compare */
.tt-mem .tt-mem-compare { background: #fff; border: 1px solid var(--mem-line); border-radius: 18px; overflow: hidden; }
.tt-mem .tt-mem-compare table { width: 100%; border-collapse: collapse; }
.tt-mem .tt-mem-compare th,
.tt-mem .tt-mem-compare td {
    padding: 18px 22px; text-align: left; font-size: 14px;
    border-bottom: 1px solid var(--mem-line); color: var(--mem-ink);
}
.tt-mem .tt-mem-compare th { background: var(--mem-soft); font-weight: 600; color: var(--mem-brown); font-size: 12px; text-transform: uppercase; letter-spacing: .18em; }
.tt-mem .tt-mem-compare th.tt-mem-featured-col { background: var(--mem-softer); color: var(--mem-ink); }
.tt-mem .tt-mem-compare td.tt-mem-featured-col { background: var(--mem-soft); }
.tt-mem .tt-mem-compare td.tt-mem-center,
.tt-mem .tt-mem-compare th.tt-mem-center { text-align: center; }
.tt-mem .tt-mem-compare tr:last-child td { border-bottom: 0; }
.tt-mem .tt-mem-yes { color: var(--mem-accent); font-weight: 700; font-size: 16px; }
.tt-mem .tt-mem-no { color: #D9C5B4; }

/* Reviews */
.tt-mem .tt-mem-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tt-mem .tt-mem-review { background: #fff; border: 1px solid var(--mem-line); border-radius: 18px; padding: 24px; position: relative; }
.tt-mem .tt-mem-review .tt-mem-quote {
    position: absolute; top: 14px; right: 20px;
    font-family: var(--wp--preset--font-family--display, 'Riffic', 'Fredoka', sans-serif);
    font-size: 48px; color: var(--mem-softer); line-height: 1;
}
.tt-mem .tt-mem-stars { color: var(--mem-accent); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.tt-mem .tt-mem-review p { font-size: 14px; line-height: 1.6; color: var(--mem-ink); margin: 0 0 16px; position: relative; z-index: 1; }
.tt-mem .tt-mem-who { font-size: 13px; display: flex; align-items: center; gap: 10px; }
.tt-mem .tt-mem-av {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--mem-soft); color: var(--mem-accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
    font-family: var(--wp--preset--font-family--display, 'Riffic', 'Fredoka', sans-serif);
}
.tt-mem .tt-mem-who b { display: block; font-weight: 600; color: var(--mem-ink); }
.tt-mem .tt-mem-who small { color: var(--mem-muted); }

/* FAQ */
.tt-mem .tt-mem-faq { max-width: 680px; margin: 0 auto; }
.tt-mem .tt-mem-qa { background: #fff; border: 1px solid var(--mem-line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.tt-mem .tt-mem-qa summary {
    list-style: none; cursor: pointer; padding: 18px 22px;
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 500; color: var(--mem-ink); font-size: 15px;
}
.tt-mem .tt-mem-qa summary::-webkit-details-marker { display: none; }
.tt-mem .tt-mem-plus {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--mem-soft); color: var(--mem-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 600;
    transition: transform .2s, background .2s;
}
.tt-mem .tt-mem-qa[open] .tt-mem-plus { transform: rotate(45deg); background: var(--mem-accent); color: #FFF8F1; }
.tt-mem .tt-mem-qa .tt-mem-body { padding: 0 22px 20px; color: var(--mem-brown); font-size: 14px; line-height: 1.6; max-width: 560px; }

/* Final CTA */
.tt-mem .tt-mem-final {
    background: var(--mem-soft); border: 1px solid var(--mem-line);
    border-radius: 18px; padding: 56px 40px;
    text-align: center; position: relative; overflow: hidden; margin-bottom: 64px;
}
.tt-mem .tt-mem-final .tt-mem-bears { position: absolute; font-size: 90px; opacity: .12; color: var(--mem-accent); }
.tt-mem .tt-mem-final .tt-mem-bears.l { left: 30px; top: 20px; transform: rotate(-15deg); }
.tt-mem .tt-mem-final .tt-mem-bears.r { right: 30px; bottom: 0; transform: rotate(15deg); }
.tt-mem .tt-mem-final h2 { font-size: 38px; margin-bottom: 10px; position: relative; }
.tt-mem .tt-mem-final p { color: var(--mem-brown); max-width: 480px; margin: 0 auto 24px; font-size: 15px; position: relative; }
.tt-mem .tt-mem-final .tt-mem-cta {
    display: inline-block; width: auto; padding: 14px 32px;
    background: var(--mem-ink); color: #FFF8F1; border-radius: 999px;
    font-weight: 600; border: 0; position: relative;
}
.tt-mem .tt-mem-final .tt-mem-cta:hover { background: var(--mem-accent); }

@media (max-width: 780px) {
    .tt-mem .tt-mem-plans,
    .tt-mem .tt-mem-benefits,
    .tt-mem .tt-mem-reviews { grid-template-columns: 1fr; }
    .tt-mem .tt-mem-plan + .tt-mem-plan { border-left: 0; border-top: 1px solid var(--mem-line); }
    .tt-mem .tt-mem-calc { grid-template-columns: 1fr; padding: 28px; gap: 28px; }
    .tt-mem .tt-mem-calc-out { border-left: 0; border-top: 1px solid rgba(255, 248, 241, .15); padding-left: 0; padding-top: 28px; }
    .tt-mem .tt-mem-hero h1 { font-size: 42px; }
}

/* ════════════════════════════════════════════════════════════════
   LOGIN PAGE (WC my-account form-login.php override)
   Scoped to .tt-login. Brand-adapted from the orange/peach mockup
   to the Teddy Transfers brown/cream palette.
   ═══════════════════════════════════════════════════════════════ */
.tt-login {
    --lg-bg-1: #FFF8F1;
    --lg-bg-2: #F7EBE1;
    /* Brand-correct brown gradient (matches header / footer / membership panels). */
    --lg-panel-1: #AA6F63;
    --lg-panel-2: #8C5A4F;
    --lg-ink: #4A3328;
    --lg-brown: #6E5145;
    --lg-accent: #AA6F63;
    --lg-muted: #8A6F62;
    --lg-line: #F0E1D2;
    --lg-soft: #FDF8F3;
    color: var(--lg-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, var(--lg-bg-1) 0%, var(--lg-bg-2) 100%);
    min-height: calc(100vh - 200px);
    padding: 40px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Escape WP's constrained-layout content-size cap (~780px) so the
       two-column card runs edge-to-edge instead of being squished. */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
}
/* Also strip the page template's horizontal padding so the gradient
   background reaches the screen edges. */
body.woocommerce-account main.wp-block-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Hide the auto-rendered "My account" page title above the login form. */
body.woocommerce-account .wp-block-post-title { display: none !important; }
.tt-login *, .tt-login *::before, .tt-login *::after { box-sizing: border-box; }

.tt-login-card {
    width: 100%;
    max-width: 1200px;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(58, 36, 24, 0.12);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    min-height: 620px;
}

/* ── Left brand panel ──────────────────────────────────────────── */
.tt-login-left {
    background: var(--lg-panel-1);
    background: linear-gradient(160deg, var(--lg-panel-1) 0%, var(--lg-panel-2) 100%);
    color: #FFF8F1;
    padding: 60px 50px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tt-login-left::before,
.tt-login-left::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
}
.tt-login-left::before { width: 280px; height: 280px; top: -100px; right: -80px; }
.tt-login-left::after  { width: 200px; height: 200px; bottom: -60px; left: -60px; }

.tt-login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--wp--preset--font-family--display, 'Riffic', 'Fredoka', sans-serif);
    font-size: 26px;
    font-weight: 600;
    position: relative;
    z-index: 2;
    color: #fff;
}
.tt-login-bear-icon {
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    overflow: hidden;
}
.tt-login-bear-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}

.tt-login-hero {
    position: relative;
    z-index: 2;
    margin: 32px 0;
}
.tt-login-hero h1 {
    font-family: var(--wp--preset--font-family--display, 'Riffic', 'Fredoka', sans-serif);
    font-size: 42px;
    line-height: 1.1;
    font-weight: 600;
    margin: 0 0 16px;
    color: #fff;
}
.tt-login-hero p {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
    max-width: 360px;
    margin: 0;
    color: #FFF8F1;
}

.tt-login-perks {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tt-login-perk {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.tt-login-perk-icon {
    width: 32px;
    height: 32px;
    background: #fff;
    color: var(--lg-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    font-size: 14px;
}

/* ── Right form panel ──────────────────────────────────────────── */
.tt-login-right {
    padding: 56px clamp(36px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}
.tt-login-right h2 {
    font-family: var(--wp--preset--font-family--display, 'Riffic', 'Fredoka', sans-serif);
    font-size: 36px;
    font-weight: 600;
    color: var(--lg-ink);
    margin: 0 0 8px;
}
.tt-login-subtitle {
    color: var(--lg-muted);
    font-size: 15px;
    margin: 0 0 32px;
}
.tt-login-subtitle a {
    color: var(--lg-accent);
    font-weight: 600;
    text-decoration: none;
}
.tt-login-subtitle a:hover { text-decoration: underline; }

.tt-login-form { margin: 0; }

.tt-login-field { margin-bottom: 20px; }
.tt-login-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--lg-brown);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.tt-login-input-wrap { position: relative; }
.tt-login-input-wrap .tt-login-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lg-muted);
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}
.tt-login-input-wrap input[type=text],
.tt-login-input-wrap input[type=email],
.tt-login-input-wrap input[type=password] {
    width: 100%;
    padding: 15px 18px 15px 46px;
    border: 2px solid var(--lg-line);
    border-radius: 14px;
    font-size: 15px;
    font-family: inherit;
    background: var(--lg-soft);
    color: var(--lg-ink);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    box-sizing: border-box;
    outline: none;
}
.tt-login-input-wrap input:focus {
    border-color: var(--lg-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(170, 111, 99, 0.12);
}

.tt-login-toggle-pw {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lg-accent);
    cursor: pointer;
    background: none;
    border: none;
    font-size: 13px;
    font-family: inherit;
    font-weight: 600;
    padding: 4px 8px;
    z-index: 2;
}

.tt-login-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    font-size: 14px;
    gap: 12px;
    flex-wrap: wrap;
}
.tt-login-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--lg-brown);
    cursor: pointer;
    margin: 0;
    font-weight: 500;
}
.tt-login-checkbox-wrap input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: var(--lg-accent);
    cursor: pointer;
    margin: 0;
}
.tt-login-forgot {
    color: var(--lg-accent);
    text-decoration: none;
    font-weight: 600;
}
.tt-login-forgot:hover { text-decoration: underline; }

.tt-login-btn-primary {
    width: 100%;
    padding: 16px;
    background: var(--lg-ink);
    color: #FFF8F1;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tt-login-btn-primary:hover {
    background: var(--lg-accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(58, 36, 24, 0.25);
}

/* WooCommerce notices inside the login panel */
.tt-login .woocommerce-notices-wrapper { margin-bottom: 18px; }
.tt-login .woocommerce-message,
.tt-login .woocommerce-error,
.tt-login .woocommerce-info {
    background: var(--lg-soft);
    border: 1px solid var(--lg-line);
    border-radius: 12px;
    color: var(--lg-ink);
    padding: 14px 18px;
    list-style: none;
    margin: 0 0 14px;
    font-size: 14px;
}
.tt-login .woocommerce-error { border-color: #E2A0A0; background: #FBEDED; color: #8B2A2A; }

/* ── Sign-in / Create-account tabs ─────────────────────────────── */
.tt-login-tabs {
    display: inline-flex;
    background: var(--lg-soft);
    border: 1px solid var(--lg-line);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    margin: 0 0 24px;
    align-self: flex-start;
}
.tt-login-tab {
    border: none;
    background: transparent;
    color: var(--lg-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.tt-login-tab.is-active {
    background: var(--lg-accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(170, 111, 99, 0.22);
}
.tt-login-tab:not(.is-active):hover { color: var(--lg-brown); }

.tt-login-pane { display: none; }
.tt-login-pane.is-active { display: block; }

.tt-login-switch-note {
    margin: 28px 0 0;
    font-size: 14px;
    color: var(--lg-muted);
    text-align: center;
}
.tt-login-switch-note a {
    color: var(--lg-accent);
    font-weight: 600;
    text-decoration: none;
}
.tt-login-switch-note a:hover { text-decoration: underline; }

@media (max-width: 860px) {
    .tt-login { padding: 20px 16px; }
    .tt-login-card { grid-template-columns: 1fr; min-height: 0; }
    .tt-login-left  { padding: 40px 28px; gap: 24px; }
    .tt-login-right { padding: 36px 28px; }
    .tt-login-hero h1 { font-size: 32px; }
    .tt-login-hero { margin: 24px 0; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE PASS — home-page + global mobile UX fixes.
   All overrides scoped to ≤860px where they make sense.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Header utility buttons — on mobile/tablet keep only Account + Cart icons.
      Track Order / Membership / Rewards / Builder Login move into the drawer.
      Synced with the nav-hide breakpoint (1500px). */
@media (max-width: 1500px) {
    .tt-utilities .tt-util-btn { display: none !important; }
}

/* Wholesale (page 187) hero: two-column image + text. Image column is
   authored FIRST, so mobile stacks image-on-top with no reverse needed. */
.page-id-187 .tt-hero-cols { align-items: center; }
.page-id-187 .tt-hero-img img { width: 100%; height: auto; display: block; border-radius: 16px; }

/* 2. Hero on mobile — base rules (every hero stacks to one column and
   shrinks the image). The column ORDER (image-top vs text-top) varies
   by page and is set page-by-page below. */
@media (max-width: 860px) {
    .tt-hero .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
    .tt-hero .wp-block-image img { max-width: 220px !important; margin-inline: auto !important; }
    /* …but the wholesale hero image should fill its column, not shrink to 220px. */
    .page-id-187 .tt-hero .wp-block-image img { max-width: 100% !important; }
    /* Home page only: original column order is text-then-image, but the
       hero design wants the image visible first on mobile. */
    body.home .tt-hero .wp-block-columns,
    .page-id-39 .tt-hero .wp-block-columns {
        flex-direction: column-reverse !important;
    }
    /* DTF gang sheets (page 136) hero is image-then-text in markup, so
       natural mobile stack already lands image-on-top. No reverse needed. */
    /* Upload Gang Sheet (168), DTF Transfers by Size (100), Upload UV
       (188): markup is text-then-iframe, so natural stack puts text
       first. No reverse needed. */
    /* UV DTF (145) page has its own layout — verify per section. */
}
/* Make the header sticky on both desktop and mobile — re-asserted so
   no mobile rule accidentally unsets it. */
@media (max-width: 860px) {
    .tt-site-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }
}

/* Desktop ≥861px — if the JS-injected track + cloned cells exist (page
   loaded at mobile width then resized), DON'T let the clones double the
   strip. Hide the aria-hidden clones, and unwrap the track so the
   original cells become direct flex children of .wp-block-columns again. */
@media (min-width: 861px) {
    .tt-trust-strip .tt-trust-cell[aria-hidden="true"] { display: none !important; }
    .tt-trust-strip .tt-trust-track { display: contents; }
}

/* 3. Trust strip — seamless auto-scroll marquee on mobile.
      The JS wraps the cells in `.tt-trust-track` and clones each one,
      so the track is exactly 2× its visible content. Animating
      translateX(0 → -50%) on the track produces a continuous loop
      with no visible reset (cell 7 = clone of cell 1, etc.). */
@media (max-width: 860px) {
    /* Shrink the section's vertical padding so the strip reads skinnier
       and the icons fill more of the visible area. Overrides the inline
       padding-top:32px / padding-bottom:32px set on the wrapper.
       Also zero the horizontal padding so the marquee clips at the
       viewport edge — otherwise the strip's inline clamp(16px,4vw,40px)
       left/right padding leaves a visible cream gap before icons reach
       the edge of the screen. */
    .tt-trust-strip {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .tt-trust-strip .wp-block-columns {
        display: block !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    .tt-trust-strip .tt-trust-track {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        width: max-content;
        animation: tt-trust-marquee 32s linear infinite;
    }
    .tt-trust-strip .tt-trust-track:hover { animation-play-state: paused; }
    @keyframes tt-trust-marquee {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    /* Respect reduced-motion — freeze the marquee. */
    @media (prefers-reduced-motion: reduce) {
        .tt-trust-strip .tt-trust-track { animation: none; }
    }
    .tt-trust-strip .tt-trust-cell {
        flex: 0 0 auto !important;
        width: 150px !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.65);
        border-radius: 14px;
        gap: 6px !important;
    }
    .tt-trust-strip--shop .tt-trust-cell { background: #fff; }
    /* Uniform icon container HEIGHT across all cells so the marquee row
       doesn't visually shift as cells scroll past. The image inside is
       sized to a consistent VISUAL HEIGHT (80px) with width tuned per
       icon to match its natural aspect — that way the wide truck and the
       tall medal both read at the same "visual mass" as the square
       stopwatch/printer/house icons. */
    .tt-trust-strip .tt-trust-icon {
        height: 90px !important;
        width: 100% !important;
        margin: 0 auto !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tt-trust-strip .tt-trust-icon img {
        height: 80px !important;
        width: auto !important;
        max-height: 80px !important;
        max-width: 130px !important;
        object-fit: contain !important;
    }
    /* Per-icon width tuning — equalizes visual mass given each icon's aspect.
       :nth-child works for both originals (1-6) and the JS-cloned set (7-12). */
    .tt-trust-strip .tt-trust-cell:nth-child(6n+1) .tt-trust-icon img { height: 70px !important; max-width: 130px !important; } /* truck */
    .tt-trust-strip .tt-trust-cell:nth-child(6n+2) .tt-trust-icon img { height: 64px !important; max-width: 64px !important; }  /* stopwatch — smaller to match visual mass */
    .tt-trust-strip .tt-trust-cell:nth-child(6n+3) .tt-trust-icon img { height: 80px !important; max-width: 72px !important; }  /* arizona */
    .tt-trust-strip .tt-trust-cell:nth-child(6n+4) .tt-trust-icon img { height: 80px !important; max-width: 80px !important; }  /* printer */
    .tt-trust-strip .tt-trust-cell:nth-child(6n+5) .tt-trust-icon img { height: 80px !important; max-width: 76px !important; }  /* medal */
    .tt-trust-strip .tt-trust-cell:nth-child(6n+6) .tt-trust-icon img { height: 80px !important; max-width: 80px !important; }  /* house */
    .tt-trust-strip .tt-trust-label { font-size: 11.5px !important; line-height: 1.3 !important; }
}

/* Shop trust strip — full-width breakout from any constrained WC container,
   plus cream background to differentiate from the homepage version. */
.tt-trust-strip--shop {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
    background: #FFF8F1 !important;
}
.tt-trust-strip--shop .wp-block-columns {
    max-width: 1240px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Center cells vertically so the row sits balanced between top/bottom borders.
   WP block defaults add margin-block to .wp-block-columns which was creating
   a visible "more space below than above" gap inside the trust strip. */
.tt-trust-strip--shop .tt-trust-cell {
    justify-content: center;
}

/* 4. "What can we make for you today?" cards — visual separation
      on mobile so cards don't read as overlapping (28px gap reads as
      cleanly separated without leaving big pink dead-zones). */
@media (max-width: 600px) {
    .tt-cat-grid {
        gap: 28px !important;
        padding: 0 8px !important;
    }
    .tt-cat-card {
        padding: 16px 16px 22px !important;
        height: auto !important;
    }
    .tt-cat-art { height: 200px !important; margin-bottom: 14px !important; }
}

/* 5. Builder CTA "Our most popular tool" — left-align the gang-sheet
      image on mobile. WP's wp-block-image.aligncenter wrapper applies
      auto-margins to BOTH the figure AND img, so we override both. */
@media (max-width: 860px) {
    .tt-builder-photo,
    .tt-builder-photo.aligncenter,
    figure.tt-builder-photo {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    .tt-builder-photo img {
        max-width: 200px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        display: block !important;
    }
    .tt-builder-cta { padding-bottom: 48px !important; margin-bottom: 16px !important; }
    .tt-bestsellers { padding-top: 56px !important; }
}

/* 6. Fresh designs (and any WC product grid) — keep 2-col on mobile instead
      of dropping to 1. Covers both WC `ul.products` AND the theme's custom
      `.tt-product-grid` used by the [teddy_recent_products] shortcode. */
@media (max-width: 600px) {
    ul.products,
    ul.wc-block-product-template,
    .tt-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}
@media (max-width: 480px) {
    .tt-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

/* 7. Why Teddy — image stacks above text, image shrinks. */
@media (max-width: 860px) {
    .tt-why .wp-block-columns {
        flex-direction: column-reverse !important;
    }
    .tt-why .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
    .tt-why .wp-block-image img { max-width: 220px !important; margin-inline: auto !important; }
}

/* 8. Footer "Stay in the loop" newsletter — on phones, stack input above
      button with explicit heights so the input doesn't grow vertically
      from inherited flex:1 (which had made it render as a huge box). */
@media (max-width: 720px) {
    /* Stop the .copy and .form children from inheriting flex:1 1 360px from
       desktop — in column flex that means "minimum height 360px each", which
       left a giant empty pink gap between the copy and the form. */
    .tt-footer-newsletter__copy,
    .tt-footer-newsletter__form {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
    .tt-footer-newsletter {
        gap: 18px !important;
    }
    .tt-footer-newsletter__form {
        flex-direction: column;
        align-items: stretch;
        border: 0;
        background: transparent;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .tt-footer-newsletter__input,
    .tt-footer-newsletter__btn {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        height: 48px;
    }
    .tt-footer-newsletter__input {
        background: #fff;
        border: 1.5px solid var(--wp--preset--color--brand);
        border-radius: 10px;
        padding: 0 16px;
    }
    .tt-footer-newsletter__btn {
        justify-content: center;
        padding: 0 22px;
        border-radius: 10px;
    }
}

/* 9. Mobile drawer overhaul — brand-tinted backdrop + accordion sections.
      NOTE: backdrop-filter: blur was removed — on iOS Safari the blur made the
      whole viewport (including the drawer panel) render hazy and the GPU layer
      promotion blocked pointer events on accordion summaries. Solid tint only. */
.tt-mobile-backdrop {
    background: rgba(74, 51, 40, 0.55) !important;
}

/* Account row at top of drawer — pill-style quick links */
.tt-mobile-drawer .tt-mobile-account {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0 20px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--wp--preset--color--soft-pink);
}
.tt-mobile-drawer .tt-mobile-account__link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px !important;
    margin: 0 !important;
    background: var(--wp--preset--color--cream);
    color: var(--wp--preset--color--brand-dark);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.tt-mobile-drawer .tt-mobile-account__link:hover {
    background: var(--wp--preset--color--soft-pink);
    color: var(--wp--preset--color--brand);
}

/* Sections rendered as <details> — each one is a white pill so the row
   visually matches the flat top-level links (Pricing, Contact). */
.tt-mobile-drawer details.tt-mobile-section {
    background: #fff;
    border: 1px solid var(--wp--preset--color--soft-pink) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    overflow: hidden;
}
.tt-mobile-drawer details.tt-mobile-section > summary {
    list-style: none;
    cursor: pointer;
    padding: 16px !important;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 700;
    font-size: 17px;
    color: var(--wp--preset--color--brand-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tt-mobile-drawer details.tt-mobile-section > summary::-webkit-details-marker { display: none; }
.tt-mobile-chevron {
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--wp--preset--color--brand);
    border-bottom: 2px solid var(--wp--preset--color--brand);
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.tt-mobile-drawer details.tt-mobile-section[open] .tt-mobile-chevron {
    transform: rotate(-135deg);
}
.tt-mobile-drawer .tt-mobile-section__body {
    padding: 8px 12px 14px;
    border-top: 1px solid var(--wp--preset--color--soft-pink);
}
.tt-mobile-drawer .tt-mobile-section__body a {
    padding: 10px 14px !important;
    margin: 0 !important;
    border-radius: 8px;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--wp--preset--color--ink) !important;
    display: block;
}
.tt-mobile-drawer .tt-mobile-section__body a:hover {
    background: var(--wp--preset--color--cream);
}

/* Mega-menu-style links inside the mobile drawer — thumbnail on the left,
   title + description on the right, mirrors the desktop mega menu cards. */
.tt-mobile-drawer .tt-mobile-link {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 8px 10px !important;
    margin: 2px 0 !important;
    border-radius: 10px;
    text-decoration: none !important;
    background: transparent;
}
.tt-mobile-drawer .tt-mobile-link:hover,
.tt-mobile-drawer .tt-mobile-link:active {
    background: var(--wp--preset--color--cream);
}
.tt-mobile-drawer .tt-mobile-link__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--wp--preset--color--cream);
    display: block;
}
/* Wide/landscape promo tiles (e.g. the Custom Coozies banner) would get their
   sides cropped by object-fit:cover in the 56px square — show them whole. */
.tt-mobile-drawer .tt-mobile-link__thumb--contain {
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
}
.tt-mobile-drawer .tt-mobile-link__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.tt-mobile-drawer .tt-mobile-link__copy strong {
    /* Same display font as the desktop nav but lighter weight so the
       drawer reads as a scannable list instead of a row of bold
       headlines crammed together. Display fonts at 700 felt heavy on
       lines like "Build a DTF Gang Sheet" — dropping to 500 keeps the
       brand voice while feeling lighter. */
    font-family: var(--wp--preset--font-family--display);
    font-weight: 500;
    font-size: 15.5px;
    color: var(--wp--preset--color--brand-dark);
    line-height: 1.2;
}
.tt-mobile-drawer .tt-mobile-link__desc {
    font-size: 13px;
    line-height: 1.35;
    color: var(--wp--preset--color--ink-soft, #6E5145);
    font-weight: 400;
}
/* For links without a thumb (e.g. the feature CTA "Start a Sheet →"), keep them
   compact and align with the thumbed rows visually. */
.tt-mobile-drawer .tt-mobile-link:not(.tt-mobile-link--withthumb) {
    padding-left: 78px !important;
    position: relative;
}
.tt-mobile-drawer .tt-mobile-link:not(.tt-mobile-link--withthumb) .tt-mobile-link__copy strong {
    color: var(--wp--preset--color--brand) !important;
}
.tt-mobile-drawer .tt-mobile-toplink {
    display: block;
    padding: 16px 4px !important;
    margin: 0 !important;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 700;
    font-size: 17px;
    color: var(--wp--preset--color--brand-dark) !important;
    border-bottom: 1px solid var(--wp--preset--color--soft-pink) !important;
}
.tt-mobile-drawer .tt-mobile-toplink:last-child { border-bottom: 0 !important; }

/* ════════════════════════════════════════════════════════════════
   MOBILE DRAWER — search + quick action pills + promo + sticky footer
   Builds on the existing .tt-mobile-drawer rules; all rules scoped
   under .tt-mobile-drawer so nothing leaks elsewhere.
   ═══════════════════════════════════════════════════════════════ */

/* Close button — position to match the new body padding */
.tt-mobile-drawer .tt-mobile-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: #fff;
    color: var(--wp--preset--color--brand);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    z-index: 5;
}

/* Search bar */
.tt-mobile-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--wp--preset--color--soft-pink);
    border-radius: 16px;
    padding: 12px 14px;
    margin: 8px 0 16px;
}
.tt-mobile-search svg { color: var(--wp--preset--color--brand); flex-shrink: 0; }
.tt-mobile-search input {
    border: 0;
    outline: 0;
    background: transparent;
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-family: inherit;
    color: var(--wp--preset--color--ink);
}
.tt-mobile-search input::placeholder { color: var(--wp--preset--color--brand); opacity: 0.55; }

/* Quick action pills — 2×2 grid */
.tt-mobile-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 18px;
}
.tt-mobile-pill {
    display: flex !important;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--wp--preset--color--soft-pink);
    border-radius: 14px;
    padding: 12px !important;
    margin: 0 !important;
    font-weight: 600;
    font-size: 13.5px !important;
    color: var(--wp--preset--color--brand-dark) !important;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.tt-mobile-pill:active { transform: scale(0.98); }
/* Newsletter success message — the JS-swapped thanks <p> inherits no
   color of its own; scope it per surface so it stays readable on both
   the mauve in-page blocks and the cream footer. */
.tt-newsletter-block .tt-newsletter-thanks { color: #FFFFFF; }
.tt-footer-newsletter .tt-newsletter-thanks { color: var(--wp--preset--color--ink, #4A3328); }

/* Trio row — Track / Rewards / Member on one line; compact so three
   pills fit a 360px viewport without wrapping. */
.tt-mobile-pills--trio { grid-template-columns: 1fr 1fr 1fr; margin-bottom: 8px; }
.tt-mobile-pills--trio .tt-mobile-pill { flex-direction: column; gap: 6px; padding: 10px 6px !important; font-size: 12.5px !important; text-align: center; }
.tt-mobile-pills--trio .tt-mobile-pill__icon { width: 24px; height: 24px; border-radius: 8px; }
.tt-mobile-pills--trio .tt-mobile-pill__icon svg { width: 14px; height: 14px; }
.tt-mobile-pill__icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--wp--preset--color--cream);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--wp--preset--color--brand);
}
.tt-mobile-pill__icon svg { width: 16px; height: 16px; }
.tt-mobile-pill__icon img { width: 18px; height: 18px; object-fit: contain; }
.tt-mobile-pill__label { line-height: 1.2; }
/* Accent variant — solid brown bg, used for Membership */
.tt-mobile-pill--accent {
    background: var(--wp--preset--color--brand) !important;
    color: #FFFFFF !important;
    border-color: var(--wp--preset--color--brand) !important;
}
.tt-mobile-pill--accent .tt-mobile-pill__icon {
    background: rgba(255,255,255,0.18);
    color: #FFFFFF;
}
/* Dark variant — pure black bg, used for Builder Login */
.tt-mobile-pill--dark {
    background: #000000 !important;
    color: #FFFFFF !important;
    border-color: #000000 !important;
}
.tt-mobile-pill--dark .tt-mobile-pill__icon {
    background: rgba(255,255,255,0.16);
    color: #FFFFFF;
}

/* Section label between pills and accordions */
.tt-mobile-section-label {
    font-size: 11px;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--wp--preset--color--brand);
    text-transform: uppercase;
    padding: 6px 4px 8px;
}

/* Top-level flat link (e.g. Pricing, Contact) */
.tt-mobile-drawer .tt-mobile-toplink {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid var(--wp--preset--color--soft-pink) !important;
    border-radius: 14px;
    padding: 16px !important;
    margin: 0 0 10px !important;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 700;
    font-size: 17px;
    color: var(--wp--preset--color--brand-dark) !important;
    text-decoration: none !important;
}
.tt-mobile-toplink__chev {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--wp--preset--color--brand);
    border-bottom: 2px solid var(--wp--preset--color--brand);
    transform: rotate(-45deg);
    flex-shrink: 0;
}

/* Featured promo card inside an accordion — image on the LEFT,
   title + description + CTA stacked on the RIGHT. The image
   sits transparent (no white chip background) at ~110px wide so
   the gang-sheet art is readable next to the copy. */
.tt-mobile-promo {
    margin: 10px 6px 4px;
    background: var(--wp--preset--color--soft-pink);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}
.tt-mobile-promo__img {
    flex: 0 0 110px;
    width: 110px;
    height: auto;
    max-height: 130px;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    margin: 0;
}
.tt-mobile-promo__copy {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tt-mobile-promo__tag {
    display: inline-block;
    background: #fff;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--wp--preset--color--brand-dark);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.tt-mobile-promo h4 {
    margin: 4px 0 4px;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 700;
    color: var(--wp--preset--color--brand-dark);
    font-size: 16px;
}
.tt-mobile-promo p {
    margin: 0;
    font-size: 12.5px;
    color: var(--wp--preset--color--ink, #4A3328);
    line-height: 1.4;
}
/* Selector boosted to beat the more-specific `.tt-mobile-drawer
   .tt-mobile-section__body a { color: ink !important }` rule that was
   forcing the CTA text to brown. Anchor + class + parent context
   gives this 0,4,1 specificity. */
.tt-mobile-drawer .tt-mobile-section__body a.tt-mobile-promo__cta,
.tt-mobile-drawer .tt-mobile-promo a.tt-mobile-promo__cta,
.tt-mobile-promo__cta {
    background: var(--wp--preset--color--brand) !important;
    color: #FFFFFF !important;
    border-radius: 999px;
    padding: 8px 14px !important;
    margin: 4px 0 0 !important;
    font-weight: 700;
    font-size: 12px !important;
    text-decoration: none !important;
    white-space: nowrap;
    /* Sits inside the right-side copy column as an inline-flex pill,
       directly below the description. align-self:flex-start so it
       hugs the left of the column and doesn't stretch the full width. */
    align-self: flex-start;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Sticky account footer at the bottom of the drawer */
.tt-mobile-acct {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}
.tt-mobile-acct__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--wp--preset--color--cream);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    overflow: hidden;
}
.tt-mobile-acct__avatar img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}
.tt-mobile-acct__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tt-mobile-acct__copy small {
    font-size: 11px;
    color: var(--wp--preset--color--ink-soft, #6E5145);
    line-height: 1.2;
}
.tt-mobile-acct__copy b {
    font-size: 14px;
    color: var(--wp--preset--color--brand-dark);
    line-height: 1.2;
}
.tt-mobile-acct__btn {
    background: var(--wp--preset--color--brand, #AA6F63);
    color: #FFFFFF !important;
    border: 2px solid var(--wp--preset--color--brand, #AA6F63);
    border-radius: 14px;
    padding: 10px 16px !important;
    margin: 0 !important;
    font-weight: 700;
    font-size: 13px !important;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.tt-mobile-acct__btn:hover,
.tt-mobile-acct__btn:focus {
    background: #FFFFFF;
    color: var(--wp--preset--color--brand, #AA6F63) !important;
}

/* Older .tt-mobile-account class (now unused) — hide if it still gets rendered */
.tt-mobile-drawer .tt-mobile-account { display: none; }

/* ─── Shop page mobile width — full bleed ───────────────────────
   Previously added 16px horizontal padding here for "breathing
   room" around chips/filters, but customer feedback (2026-05-20)
   was that the shop hero + footer felt not-full-width because of
   it. Drop the wrapper-level padding so backgrounds + edges bleed
   to the viewport edge; targeted inner elements (chips, applied
   filter pills) can add their own padding where really needed. */
@media (max-width: 860px) {
    body.woocommerce-shop main,
    body.tax-product_cat main,
    body.post-type-archive-product main,
    body.archive.tax-product_cat main,
    body.woocommerce-shop .woocommerce,
    body.tax-product_cat .woocommerce {
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }
    /* The applied-filter chip strip + the product card inner content
       still need some side breathing room — add it to those specific
       elements so the visible content has gutters without making the
       overall page wrapper feel inset. Toolbar (where the Filter
       button lives) needs more gutter so the button doesn't touch
       the right edge; same for the hero copy and applied-pills row. */
    ul.products,
    ul.wc-block-product-template {
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box;
    }
    .tt-shop-toolbar,
    .tt-shop-hero,
    .tt-shop-hero__copy,
    .tt-shop-hero__meta,
    .tt-tb-applied,
    .tt-shop-toolbar .tt-tb-right {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
    /* Defensive: the toolbar itself wraps applied-pills + Filter
       button; keep ITS outer padding so both ends sit 20px from the
       viewport edge instead of bunching against the borders. */
    .tt-shop-toolbar {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .tt-shop-hero {
        padding: 8px 0 24px !important;
    }
    .tt-shop-hero__h { font-size: clamp(28px, 7vw, 38px) !important; }
}

/* ════════════════════════════════════════════════════════════════
   ORDER ISSUE FORM (/order-issue/) — brand-styled CF7
   ═══════════════════════════════════════════════════════════════ */
.tt-order-issue {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background: var(--wp--preset--color--cream, #FFF8F1);
    padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 40px);
    box-sizing: border-box;
}
.tt-order-issue .wpcf7 {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--wp--preset--color--soft-pink);
    padding: clamp(24px, 4vw, 36px);
    box-shadow: 0 10px 30px rgba(74, 51, 40, 0.06);
}
.tt-order-issue form.wpcf7-form { margin: 0; }
.tt-order-issue form.wpcf7-form > p { margin: 0 0 18px; }
.tt-order-issue label {
    display: block;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 600;
    font-size: 14px;
    color: var(--wp--preset--color--brand-dark);
    margin-bottom: 16px;
}
.tt-order-issue .wpcf7-form-control-wrap {
    display: block;
    margin-top: 6px;
}
.tt-order-issue input[type="text"],
.tt-order-issue input[type="email"],
.tt-order-issue input[type="tel"],
.tt-order-issue select,
.tt-order-issue textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 12px;
    background: #FDF8F3;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    color: var(--wp--preset--color--ink);
    outline: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tt-order-issue input:focus,
.tt-order-issue select:focus,
.tt-order-issue textarea:focus {
    border-color: var(--wp--preset--color--brand);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(170, 111, 99, 0.14);
}
.tt-order-issue textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.5;
}
/* Native select arrow (matches the contact form treatment) */
.tt-order-issue select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23AA6F63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
}
/* File picker — restyle the native button with a brand pill */
.tt-order-issue input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px dashed var(--wp--preset--color--brand);
    border-radius: 12px;
    background: var(--wp--preset--color--cream, #FFF8F1);
    font-family: var(--wp--preset--font-family--body);
    font-size: 14px;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
}
.tt-order-issue input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--wp--preset--color--brand);
    color: #FFFFFF;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.tt-order-issue input[type="file"]::file-selector-button:hover { background: var(--wp--preset--color--brand-dark); }
/* Submit button */
.tt-order-issue .wpcf7-submit,
.tt-order-issue input[type="submit"] {
    width: 100%;
    padding: 16px 24px;
    border: 0;
    border-radius: 14px;
    background: var(--wp--preset--color--ink, #4A3328);
    color: #FFFFFF !important;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
    margin-top: 8px;
}
.tt-order-issue .wpcf7-submit:hover,
.tt-order-issue input[type="submit"]:hover {
    background: var(--wp--preset--color--brand);
    transform: translateY(-1px);
}
/* CF7 response messages */
.tt-order-issue .wpcf7-response-output {
    border: 1.5px solid var(--wp--preset--color--soft-pink) !important;
    border-radius: 12px !important;
    background: #FDF8F3;
    color: var(--wp--preset--color--brand-dark);
    padding: 14px 18px !important;
    margin: 18px 0 0 !important;
    font-size: 14px;
}
.tt-order-issue .wpcf7-not-valid-tip {
    color: #B22822;
    font-size: 13px;
    margin-top: 6px;
}
.tt-order-issue .wpcf7-spinner { display: inline-block; margin-left: 10px; }

/* ════════════════════════════════════════════════════════════════
   VERIFICATION REQUEST FORM (/military-school-discounts/)
   Brand-styled CF7 — mirrors .tt-order-issue but framed in a
   centered card so the form reads as a focused intake rather than
   a generic stretched form. Wrapper is an alignfull cream section,
   the actual form card sits centered at 560px max-width on top.
   ═══════════════════════════════════════════════════════════════ */
.tt-verify .wpcf7 {
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border-radius: 22px;
    border: 1px solid var(--wp--preset--color--soft-pink);
    padding: clamp(24px, 4vw, 36px);
    box-shadow: 0 14px 38px rgba(74, 51, 40, 0.07);
}
.tt-verify form.wpcf7-form { margin: 0; }
.tt-verify form.wpcf7-form > p { margin: 0 0 16px; }
.tt-verify label {
    display: block;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 600;
    font-size: 14px;
    color: var(--wp--preset--color--brand-dark);
    margin-bottom: 14px;
}
.tt-verify .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.tt-verify input[type="text"],
.tt-verify input[type="email"],
.tt-verify input[type="tel"],
.tt-verify select,
.tt-verify textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 12px;
    background: #FDF8F3;
    font-family: var(--wp--preset--font-family--body);
    font-size: 15px;
    color: var(--wp--preset--color--ink);
    outline: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tt-verify input:focus,
.tt-verify select:focus,
.tt-verify textarea:focus {
    border-color: var(--wp--preset--color--brand);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(170, 111, 99, 0.14);
}
/* Radio group — render the 3 benefit choices as stacked branded
   pills so each tier reads as a self-contained option instead of a
   compact list of native inputs. */
.tt-verify .wpcf7-radio {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tt-verify .wpcf7-list-item {
    display: block !important;
    margin: 0 !important;
}
.tt-verify .wpcf7-list-item label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 12px 14px;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 12px;
    background: #FDF8F3;
    cursor: pointer;
    font-weight: 600;
    color: var(--wp--preset--color--ink);
    transition: border-color .15s ease, background .15s ease;
}
.tt-verify .wpcf7-list-item label:hover {
    border-color: var(--wp--preset--color--brand);
    background: #fff;
}
.tt-verify .wpcf7-list-item input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--wp--preset--color--brand);
    border-radius: 50%;
    margin: 0;
    flex: 0 0 auto;
    position: relative;
    cursor: pointer;
}
.tt-verify .wpcf7-list-item input[type="radio"]:checked {
    background: var(--wp--preset--color--brand);
    box-shadow: inset 0 0 0 3px #fff;
}
/* File picker */
.tt-verify input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px dashed var(--wp--preset--color--brand);
    border-radius: 12px;
    background: var(--wp--preset--color--cream, #FFF8F1);
    font-family: var(--wp--preset--font-family--body);
    font-size: 14px;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
}
.tt-verify input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--wp--preset--color--brand);
    color: #FFFFFF;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.tt-verify input[type="file"]::file-selector-button:hover { background: var(--wp--preset--color--brand-dark); }
/* Submit button */
.tt-verify .wpcf7-submit,
.tt-verify input[type="submit"] {
    width: 100%;
    padding: 16px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--wp--preset--color--brand);
    color: #FFFFFF !important;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
    margin-top: 8px;
}
.tt-verify .wpcf7-submit:hover,
.tt-verify input[type="submit"]:hover {
    background: var(--wp--preset--color--brand-dark);
    transform: translateY(-1px);
}
.tt-verify .wpcf7-response-output {
    border: 1.5px solid var(--wp--preset--color--soft-pink) !important;
    border-radius: 12px !important;
    background: #FDF8F3;
    color: var(--wp--preset--color--brand-dark);
    padding: 14px 18px !important;
    margin: 18px 0 0 !important;
    font-size: 14px;
}
.tt-verify .wpcf7-not-valid-tip {
    color: #B22822;
    font-size: 13px;
    margin-top: 6px;
}
.tt-verify .wpcf7-spinner { display: inline-block; margin-left: 10px; }
.tt-verify .tt-verify-fineprint {
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--wp--preset--color--ink-soft);
    text-align: center;
    line-height: 1.5;
}

/* Cart drawer — extra left/right breathing room on mobile so content
   isn't hugging the screen edges. */
@media (max-width: 600px) {
    aside.tt-cart-drawer .tt-cart-drawer__head {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    aside.tt-cart-drawer .tt-ship-bar {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    aside.tt-cart-drawer .tt-cart-drawer__body {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
    aside.tt-cart-drawer .tt-cart-foot {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* Footer columns on mobile — once the column grid collapses, give each
   heading enough top space so "Discover" / "Support" don't visually
   crowd against the previous column's last link. */
@media (max-width: 781px) {
    .tt-footer-heading { margin-top: 32px; }
    .wp-block-columns > .wp-block-column > .tt-footer-heading:first-child { margin-top: 0; }
}

/* ─── Side cart coupon area ─────────────────────────────────────
   Apply input + button row, followed by status message and pills
   showing currently-applied coupon codes (each with X to remove). */
.tt-cart-coupon {
    display: flex;
    gap: 8px;
    margin: 12px 0 8px;
}
.tt-cart-coupon__input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    border: 1.5px solid var(--wp--preset--color--soft-pink);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--wp--preset--color--ink);
    background: #FDF8F3;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}
.tt-cart-coupon__input:focus {
    border-color: var(--wp--preset--color--brand);
    background: #fff;
}
.tt-cart-coupon__btn {
    border: 0;
    border-radius: 10px;
    padding: 10px 18px;
    background: var(--wp--preset--color--brand);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease;
    flex-shrink: 0;
}
.tt-cart-coupon__btn:hover { background: var(--wp--preset--color--brand-dark, #6E5145); }
.tt-cart-coupon__msg {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    margin: 0 0 8px;
    line-height: 1.35;
}
.tt-cart-coupon__msg.is-success { background: rgba(0, 128, 67, .12); color: #0a6a37; }
.tt-cart-coupon__msg.is-error   { background: rgba(217, 48, 37, .12); color: #8B2A2A; }
.tt-cart-coupon__msg.is-info    { background: var(--wp--preset--color--cream, #FFF8F1); color: var(--wp--preset--color--brand-dark, #6E5145); }
.tt-cart-coupon__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tt-cart-coupon__list:empty { display: none; }
.tt-cart-coupon__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--wp--preset--color--cream, #FFF8F1);
    color: var(--wp--preset--color--brand-dark, #6E5145);
    border: 1px solid var(--wp--preset--color--soft-pink);
    border-radius: 999px;
    padding: 5px 10px 5px 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: inherit;
}
.tt-cart-coupon__pill:hover { background: var(--wp--preset--color--soft-pink); }
.tt-cart-coupon__pill-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(170, 111, 99, .15);
    font-size: 13px;
    line-height: 1;
}

/* ════════════════════════════════════════════════════════════════
   PER-PAGE MOBILE / DESKTOP TUNING
   - 136 DTF Gang Sheets: "What's a gang sheet" image reduce + left
   - 145 UV DTF: "What's UV DTF" image-first on mobile
   - 100 DTF by Size: reduce image/pricing gap on mobile, enlarge image on desktop
   ═══════════════════════════════════════════════════════════════ */

/* DTF Gang Sheets (136) — "What's a gang sheet" section.
   Markup is image-first (column 1) then text (column 2), so default mobile
   stack already shows image on top. Shrink it and push to the left. */
@media (max-width: 860px) {
    .page-id-136 .tt-gs-what .wp-block-image {
        margin: 0 0 18px 0 !important;
        text-align: left;
    }
    .page-id-136 .tt-gs-what .wp-block-image img {
        max-width: 200px !important;
        margin: 0 !important;
        margin-inline: 0 !important;
    }
    .page-id-136 .tt-gs-what .wp-block-columns {
        gap: 18px !important;
    }
}

/* UV DTF (145) — "What's UV DTF" section.
   Markup is text-first (column 1) then image (column 2). User wants image
   to appear BEFORE the text on mobile, so reverse the stack. */
@media (max-width: 860px) {
    .page-id-145 .tt-gs-what .wp-block-columns {
        flex-direction: column-reverse !important;
    }
    .page-id-145 .tt-gs-what .wp-block-image img {
        max-width: 240px !important;
        margin-inline: auto !important;
    }
}

/* DTF Transfers by Size (100):
   Desktop — bump the photo size for more visual impact.
   Mobile — pull the price card closer to the image (less column gap). */
@media (min-width: 861px) {
    .page-id-100 .tt-builder-section .tt-bysize-photo img {
        max-width: none;
        width: 100%;
        max-height: 520px;
        object-fit: contain;
    }
    .page-id-100 .tt-builder-section .wp-block-columns {
        gap: clamp(24px, 3vw, 48px) !important;
    }
}
@media (max-width: 860px) {
    .page-id-100 .tt-builder-section .wp-block-columns {
        gap: 16px !important;
    }
    .page-id-100 .tt-bysize-photo,
    .page-id-100 .tt-builder-section .tt-bysize-photo {
        margin: 0 0 4px !important;
    }
    .page-id-100 .tt-bysize-pricecard {
        margin-top: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE QUEUE — shop padding, trust-cell bg, blog 1-col,
   single-product qty/atc match, mobile menu hover off
   ═══════════════════════════════════════════════════════════════ */

/* Trust-strip cells — remove white pill background so the icons sit
   directly on the section background. Applies on all viewports. */
.tt-trust-strip .tt-trust-cell { background: transparent !important; }
.tt-trust-strip--shop .tt-trust-cell { background: transparent !important; }

/* Shop & category archive: mobile side padding for the content
   area only. The previous version also padded `<body>` itself,
   which pushed the header, main and footer all inward and was
   the actual cause of the recurring "header/footer not full
   width on mobile" reports — body is the root for the whole
   page, so a 16px inset there inset *everything*. Restricting
   to `main` / `.woocommerce` keeps the product hero + filters
   + chips inset while letting the site header and footer bleed
   to the viewport edges. */
@media (max-width: 860px) {
    body.woocommerce-shop main,
    body.tax-product_cat main,
    body.post-type-archive-product main,
    body.woocommerce-shop .woocommerce,
    body.tax-product_cat .woocommerce,
    body.post-type-archive-product .woocommerce {
        padding-left: clamp(14px, 4vw, 20px) !important;
        padding-right: clamp(14px, 4vw, 20px) !important;
        box-sizing: border-box;
    }
    /* Belt-and-suspenders: explicitly strip any padding that earlier
       rules (or future inline styles WP may inject) put on the body
       for these archive templates. */
    body.woocommerce-shop,
    body.tax-product_cat,
    body.post-type-archive-product {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Blog archive — single column on mobile (was dropping at 600px which left
   tablets / large phones still on 2-col; bump to 860px to align with the
   site-wide mobile breakpoint). */
@media (max-width: 860px) {
    .tt-archive__grid .wp-block-post-template,
    .tt-archive__grid,
    ul.wp-block-post-template.tt-archive__grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* Single product — make the quantity stepper and the Add to Cart button
   render at identical width, height, and padding so they stack as a
   matched pair on mobile. Previously the ATC button kept its desktop
   inline-flex sizing while the qty stretched full-width, producing the
   "qty wide / ATC short" mismatch in the customer's screenshot. */
@media (max-width: 860px) {
    body.single-product .quantity,
    body.single-product button.single_add_to_cart_button {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 56px !important;
        border-radius: 14px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }
    body.single-product .quantity input.qty { height: 56px !important; }
    body.single-product button.single_add_to_cart_button {
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }
}

/* Mobile drawer — disable hover background on the flat toplinks (Pricing,
   Contact). On touch the inherited `.tt-mobile-drawer a:hover` rule was
   applying a cream-color flash on tap and looking like an unfinished active
   state. Top-level direct links keep their solid white pill regardless. */
.tt-mobile-drawer .tt-mobile-toplink:hover,
.tt-mobile-drawer .tt-mobile-toplink:focus,
.tt-mobile-drawer .tt-mobile-toplink:active {
    background: #fff !important;
    color: var(--wp--preset--color--brand-dark) !important;
}
@media (hover: none) {
    .tt-mobile-drawer .tt-mobile-toplink { transition: none !important; }
}

/* DTF Gang Sheets (136) hero — push the image left on mobile.
   The figure has inline margin:0 auto + class .aligncenter that centers
   the image inside its column. Override both to flush-left on phones. */
@media (max-width: 860px) {
    .tt-gs-hero .wp-block-column:first-child .wp-block-image,
    .tt-gs-hero .wp-block-column:first-child .wp-block-image.aligncenter {
        margin: 0 !important;
        text-align: left !important;
    }
    .tt-gs-hero .wp-block-column:first-child .wp-block-image img {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* UV DTF (145) hero on mobile — image-first (markup is text-first), pushed left. */
@media (max-width: 860px) {
    .tt-uv-hero .wp-block-columns {
        flex-direction: column-reverse !important;
    }
    /* Column 2 in markup holds the image. Override aligncenter / margin so
       it sits at the left edge once stacked. */
    .tt-uv-hero .wp-block-column:nth-child(2) .wp-block-image,
    .tt-uv-hero .wp-block-column:nth-child(2) .wp-block-image.aligncenter {
        margin: 0 !important;
        text-align: left !important;
    }
    .tt-uv-hero .wp-block-column:nth-child(2) .wp-block-image img {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   POLICY PAGES (Returns & Exchanges, Privacy Policy, etc.) —
   long-form text content. Scoped to .tt-policy.
   ═══════════════════════════════════════════════════════════════ */

/* Hide the auto-rendered WP post title on policy pages — our custom
   hero already includes the H1, so the default title was rendering
   twice (and at the huge page-title size). Also strip the page
   template's horizontal padding so the cream hero reaches the edges. */
.page-id-329 .wp-block-post-title,
.page-id-3   .wp-block-post-title {
    display: none !important;
}
.page-id-329 main.wp-block-group,
.page-id-3   main.wp-block-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Break the cream hero out of the constrained-layout cap so the
   background reaches the screen edges (mirrors the .tt-login pattern). */
.tt-policy-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
}
.tt-policy {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
}

.tt-policy-body {
    color: #4A3328;
    font-size: 16px;
    line-height: 1.7;
}
.tt-policy-body h2 {
    font-family: var(--wp--preset--font-family--display, 'Riffic', 'Fredoka', sans-serif);
    font-size: clamp(22px, 2.4vw, 28px);
    color: #4A3328;
    margin: 40px 0 12px;
    line-height: 1.25;
}
.tt-policy-body h2:first-child { margin-top: 0; }
.tt-policy-body h3 {
    font-family: var(--wp--preset--font-family--display, 'Riffic', 'Fredoka', sans-serif);
    font-size: 18px;
    color: #4A3328;
    margin: 24px 0 8px;
}
.tt-policy-body p { margin: 0 0 14px; }
.tt-policy-body ul {
    margin: 0 0 18px;
    padding-left: 22px;
}
.tt-policy-body ul li { margin-bottom: 8px; }
.tt-policy-body strong { color: #4A3328; font-weight: 700; }
.tt-policy-body a { color: #AA6F63; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tt-policy-body a:hover { color: #6E5145; }

/* ════════════════════════════════════════════════════════════════
   ACCOUNT ICON HOVER DROPDOWN — desktop only. Hovering (or focusing)
   the header account icon reveals a small panel with the same menu
   items as the My Account sidebar.
   ═══════════════════════════════════════════════════════════════ */
.tt-account-pop {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.tt-account-pop__menu {
    position: absolute;
    top: calc(100% + 12px);
    /* Center the dropdown under the icon instead of right-aligning it
       (right-align dragged the whole menu off to the left of the icon). */
    left: 50%;
    transform: translate(-50%, -6px);
    min-width: 220px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(58, 36, 24, 0.16), 0 2px 6px rgba(58, 36, 24, 0.06);
    border: 1px solid #F0E1D2;
    padding: 8px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
/* Hover-bridge so the gap between the icon and the menu doesn't drop
   the hover state. Centered under the icon to match the menu. */
.tt-account-pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 14px;
}
.tt-account-pop:hover .tt-account-pop__menu,
.tt-account-pop:focus-within .tt-account-pop__menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.tt-account-pop:hover > a[aria-haspopup],
.tt-account-pop:focus-within > a[aria-haspopup] { aria-expanded: true; }

.tt-account-pop__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    color: #000;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none !important;
    border-bottom: 0 !important;
    transition: background .15s ease, color .15s ease;
    font-family: 'Karla', sans-serif;
}
.tt-account-pop__item:hover,
.tt-account-pop__item:focus-visible {
    background: #F7EBE1;
    color: #000;
    text-decoration: none !important;
}
.tt-account-pop__ic {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tt-account-pop__ic img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transform: scale(1.6);
    transform-origin: center;
    display: block;
}
.tt-account-pop__item--logout {
    margin-top: 4px;
    border-top: 1px solid #F0E1D2 !important;
    border-radius: 0 0 10px 10px;
    padding-top: 12px;
}

/* Hide the dropdown on mobile — the drawer already handles account
   navigation there, and we don't want a popover competing with the
   hamburger menu. */
@media (max-width: 860px) {
    .tt-account-pop__menu { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   MY ACCOUNT — Order detail (view-order) cleanup. 2026-05-14.
   Tighten WC's default order-details + customer-details rendering
   so the page reads as part of the Teddy account UI instead of the
   bloated default WC chrome.
   ═══════════════════════════════════════════════════════════════ */

/* Section headings — Order details / Billing address / Shipping address.
   WC renders these as <h2> which inherits the theme's display-font
   sizing meant for hero h2s. Bring them down to the same scale as the
   account panel headings. */
.woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-family: 'Riffic', 'Fredoka', 'Karla', system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #4A3328 !important;
    margin: 0 0 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.25 !important;
}

/* Intro paragraph "Order #343 was placed on…" — currently full-size
   serif with weird yellow highlight outline. Knock down to a normal
   body line. */
.woocommerce-MyAccount-content > p:first-child,
.woocommerce-MyAccount-content .woocommerce-order-details + p,
.woocommerce-MyAccount-content p.woocommerce-customer-details--phone,
.woocommerce-MyAccount-content .woocommerce-order > p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #4A3328 !important;
    margin: 0 0 14px !important;
}

/* Customer-details addresses: WC wraps them in <address> which the
   theme's serif-styled body inherits. Tighten + use the body font so
   it reads like contact info, not a poem. */
.woocommerce-MyAccount-content address,
.woocommerce-customer-details address {
    font-family: 'Karla', system-ui, sans-serif !important;
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #4A3328 !important;
    border: 1px solid #F0E1D2 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    background: #FDF8F3 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Order-details + customer-details cards — wrap each section in
   a soft card so it doesn't sit as a raw HTML island. */
.woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-MyAccount-content .woocommerce-customer-details {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .03);
}

/* Customer-details has TWO columns side-by-side (billing + shipping)
   when both exist. Make them grid. */
.woocommerce-customer-details .woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.woocommerce-customer-details .woocommerce-column {
    padding: 0;
    min-width: 0;
}

/* Order-details table — tighten + remove the heavy borders the theme
   inherited from a global table reset. */
.woocommerce-MyAccount-content .woocommerce-table--order-details,
.woocommerce-MyAccount-content table.shop_table {
    border: 0 !important;
    border-collapse: collapse !important;
    width: 100% !important;
    font-size: 14px !important;
}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
    padding: 12px 8px !important;
    border-top: 1px solid #F0E1D2 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    color: #4A3328 !important;
    background: transparent !important;
}
.woocommerce-MyAccount-content table.shop_table thead th {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #6E5145 !important;
    border-top: 0 !important;
    background: transparent !important;
}
.woocommerce-MyAccount-content table.shop_table tfoot td,
.woocommerce-MyAccount-content table.shop_table tfoot th {
    font-weight: 600 !important;
}

/* Product link in the table */
.woocommerce-MyAccount-content table.shop_table .product-name > a {
    color: #4A3328 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.woocommerce-MyAccount-content table.shop_table .product-name > a:hover {
    color: #AA6F63 !important;
}

/* Total row — emphasize. */
.woocommerce-MyAccount-content table.shop_table tfoot tr:last-child td,
.woocommerce-MyAccount-content table.shop_table tfoot tr:last-child th {
    font-size: 16px !important;
    color: #4A3328 !important;
    padding-top: 14px !important;
    border-top: 2px solid #AA6F63 !important;
}

/* Strip the giant yellow highlight that WC sometimes paints around
   inline status/date markers (some plugins inject it). */
.woocommerce-MyAccount-content mark {
    background: transparent !important;
    color: inherit !important;
    font-weight: 600 !important;
}

/* HARD OVERRIDE — "Billing address" / "Shipping address" / "Order details"
   headings on the my-account order-detail view. Block theme + Karla family
   inheritance were beating the earlier ancestor-scoped rule, so we re-state
   it here at end-of-file with !important on every property a parent could
   have set. */
body.woocommerce-account h2.woocommerce-column__title,
body.woocommerce-orders h2.woocommerce-column__title,
body h2.woocommerce-column__title,
.woocommerce-column__title,
body.woocommerce-account h2.woocommerce-order-details__title,
body h2.woocommerce-order-details__title,
.woocommerce-order-details__title {
    font-family: 'Karla', system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #6E5145 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   /checkout/ order summary — design-token line items.
   When the Buildaur Bridge prepends a design preview to the cart
   item name, lay it out as a clean two-column row:
   [ design thumb 64x64 ]  [ name / qty stepper / meta ]    [ price ]
   ═══════════════════════════════════════════════════════════════ */

/* Each cart row's product cell uses CSS grid: thumb on the left
   spanning all rows, then a 1fr right column that stacks
   name → meta → qty stepper vertically. `display: contents` on
   the .tt-co-item wrapper dissolves it into the grid so its
   children (thumb + name) participate directly. */
.tt-checkout .shop_table .cart_item td.product-name {
    display: grid !important;
    grid-template-columns: 76px 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: start !important;
    padding: 14px 8px 14px 0 !important;
}
.tt-checkout .shop_table .cart_item td.product-name > .tt-co-item {
    display: contents !important;
}
.tt-checkout .shop_table .cart_item td.product-name .tt-co-thumb,
.tt-checkout .shop_table .cart_item td.product-name .buildaur-co-thumb {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    align-self: start !important;
    /* Pin the size here (beats the global img{height:auto} + max-width:100%
       that otherwise squashed the thumb into the grid column). Uncropped
       'medium' source + contain shows the whole design, letterboxed. */
    width: 76px !important;
    height: 76px !important;
    object-fit: contain !important;
}
.tt-checkout .shop_table .cart_item td.product-name .tt-co-item-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 14.5px !important;
    font-weight: 600;
    line-height: 1.3 !important;
    color: #2a2118;
    align-self: start;
}
/* Cart item meta on its own line below the title */
.tt-checkout .shop_table .cart_item td.product-name dl.variation {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 12px;
    line-height: 1.4;
    color: #7a6a5e;
}
.tt-checkout .shop_table .cart_item td.product-name dl.variation dt,
.tt-checkout .shop_table .cart_item td.product-name dl.variation dd {
    display: inline;
    padding: 0;
    margin: 0;
}
/* NOTE: no `dt::after { content: ': ' }` — WC already renders
   "Design:" with its own colon, adding a second produced "Design::". */
.tt-checkout .shop_table .cart_item td.product-name dl.variation dd + dt { margin-left: 8px; }
/* Qty stepper as the bottom row */
.tt-checkout .shop_table .cart_item td.product-name .bda-coqty {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    margin: 4px 0 0 !important;
}
/* WC's hidden quantity strong (×1) — keep hidden */
.tt-checkout .shop_table .cart_item td.product-name > strong.product-quantity {
    display: none !important;
}
/* Right-side total column: align top so it matches the stacked
   left-column content's top edge. */
.tt-checkout .shop_table .cart_item td.product-total {
    vertical-align: top !important;
    padding-top: 14px !important;
    white-space: nowrap;
    font-weight: 700;
    color: #2a2118;
}

/* ════════════════════════════════════════════════════════════════
   /checkout/order-received/ — Teddy Transfers Order Received redesign.
   Re-skins the WC block-based confirmation page (status banner,
   summary strip, totals card, address cards) using the brand
   palette only. Scoped to .woocommerce-order-received body class
   so it can't leak into other pages.
   ═══════════════════════════════════════════════════════════════ */
:root {
    --tt-cream: #f7ebe1;
    --tt-cream-2: #fff8f1;
    --tt-ink: #4a3328;
    --tt-ink-2: #6e5145;
    --tt-brand: #aa6f63;
    --tt-blush: #f7d2c7;
    --tt-black: #141413;
    --tt-white: #ffffff;
    --tt-line: rgba(74, 51, 40, .12);
    --tt-radius: 18px;
    --tt-shadow: 0 1px 2px rgba(74, 51, 40, .06), 0 12px 32px rgba(74, 51, 40, .08);
}

/* Page background */
body.woocommerce-order-received,
.woocommerce-order-received .wp-site-blocks {
    background: var(--tt-cream);
}

/* ---------- Hero status banner ---------- */
.wp-block-woocommerce-order-confirmation-status.wc-block-order-confirmation-status {
    background: var(--tt-brand);
    color: var(--tt-cream-2);
    border-radius: var(--tt-radius);
    padding: 36px 40px;
    box-shadow: var(--tt-shadow);
    position: relative;
    overflow: hidden;
    margin: 0 0 24px;
}
.wp-block-woocommerce-order-confirmation-status::before {
    content: "";
    position: absolute;
    right: -60px; top: -60px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: rgba(255, 248, 241, .10);
}
.wp-block-woocommerce-order-confirmation-status::after {
    content: "";
    position: absolute;
    right: 40px; bottom: -80px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: var(--tt-blush);
    opacity: .35;
}
.wp-block-woocommerce-order-confirmation-status h1,
.wp-block-woocommerce-order-confirmation-status .wp-block-heading {
    color: var(--tt-cream-2);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 14px 0 6px;
}
.wp-block-woocommerce-order-confirmation-status p {
    color: var(--tt-cream-2);
    opacity: .92;
    font-size: 15px;
    max-width: 560px;
    line-height: 1.5;
    margin: 0;
}

/* Optional confirmed badge (markup: <span class="tt-badge"><span class="tt-check"></span> Order confirmed</span>) */
.tt-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 248, 241, .16);
    border: 1px solid rgba(255, 248, 241, .35);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--tt-cream-2);
}
.tt-check {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--tt-cream-2);
    display: inline-block;
    position: relative;
}
.tt-check::after {
    content: "";
    position: absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: solid var(--tt-brand);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---------- Summary strip (Order#, Date, Total, Email, Payment) ---------- */
.wp-block-woocommerce-order-confirmation-summary.wc-block-order-confirmation-summary {
    background: var(--tt-cream-2);
    border-radius: var(--tt-radius);
    padding: 8px;
    box-shadow: var(--tt-shadow);
    margin: 0 0 24px;
}
.wc-block-order-confirmation-summary-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 0;
    gap: 0;
}
.wc-block-order-confirmation-summary-list-item {
    padding: 18px 20px;
    border-right: 1px solid var(--tt-line);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.wc-block-order-confirmation-summary-list-item:last-child { border-right: 0; }
.wc-block-order-confirmation-summary-list-item__key {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tt-ink-2);
    font-weight: 600;
}
.wc-block-order-confirmation-summary-list-item__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--tt-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Highlight total cell — Woo adds this modifier automatically */
.wc-block-order-confirmation-summary-list-item--total .wc-block-order-confirmation-summary-list-item__value,
.wc-block-order-confirmation-summary-list-item:nth-child(3) .wc-block-order-confirmation-summary-list-item__value {
    color: var(--tt-brand);
    font-size: 18px;
}

/* ---------- Two-column layout ---------- */
.wc-block-order-confirmation-totals-wrapper + .wp-block-columns,
.woocommerce-order-received .wp-block-columns {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
}

/* ---------- Totals / line-item card ---------- */
.wp-block-woocommerce-order-confirmation-totals-wrapper {
    background: var(--tt-cream-2);
    border-radius: var(--tt-radius);
    padding: 28px 32px;
    box-shadow: var(--tt-shadow);
}
.wp-block-woocommerce-order-confirmation-totals-wrapper .wp-block-heading,
.wc-block-order-confirmation-address-wrapper .wp-block-heading {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--tt-ink);
    display: flex;
    align-items: center;
    gap: 10px;
}
.wp-block-woocommerce-order-confirmation-totals-wrapper .wp-block-heading::before,
.wc-block-order-confirmation-address-wrapper .wp-block-heading::before {
    content: "";
    width: 6px;
    height: 18px;
    background: var(--tt-brand);
    border-radius: 3px;
}

.wc-block-order-confirmation-totals__table {
    width: 100%;
    border-collapse: collapse;
}
.wc-block-order-confirmation-totals__table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tt-ink-2);
    font-weight: 600;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--tt-line);
}
.wc-block-order-confirmation-totals__table th:last-child { text-align: right; }
.wc-block-order-confirmation-totals__product {
    padding: 18px 0;
    border-bottom: 1px solid var(--tt-line);
    vertical-align: top;
}
.wc-block-order-confirmation-totals__table td:last-child { text-align: right; }

/* Product name link */
.woocommerce-table__line-item.order_item a:not(.buildaur-bridge-preview) {
    color: var(--tt-ink) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}

/* Quantity pill */
.product-quantity {
    display: inline-block;
    margin-left: 6px;
    background: var(--tt-blush);
    color: var(--tt-brand);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

/* Item meta */
.wc-item-meta {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--tt-ink-2);
}
.wc-item-meta-label { font-weight: 600; color: var(--tt-ink-2); }

/* Preview-design wrapper: no chrome — inner <a> renders the purple pill
   via the buildaur-bridge plugin's inline CSS. */
.buildaur-bridge-preview {
    display: block;
    margin: 10px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
}
.buildaur-bridge-preview::before { content: none; }

/* Orders LIST — Actions column: side-by-side, compact pills. */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    width: auto !important;
    margin: 0 !important;
}

/* Prices */
.woocommerce-Price-amount.amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--tt-ink);
}

/* Tax label rows */
.wc-block-order-confirmation-totals__label {
    padding: 10px 0;
    color: var(--tt-ink-2);
    font-size: 14px;
}

/* Grand total row */
.wc-block-order-confirmation-totals__total td {
    padding-top: 18px;
    font-size: 20px;
    font-weight: 800;
    color: var(--tt-ink);
    border-top: 2px solid var(--tt-ink);
}
.wc-block-order-confirmation-totals__total .wc-block-order-confirmation-totals__label {
    color: var(--tt-ink);
    font-weight: 800;
    font-size: 16px;
}

/* ---------- Billing / shipping address cards ---------- */
.wc-block-order-confirmation-address-wrapper,
.wp-block-woocommerce-order-confirmation-billing-address,
.wp-block-woocommerce-order-confirmation-shipping-address {
    background: var(--tt-cream-2);
    border-radius: var(--tt-radius);
    padding: 28px;
    box-shadow: var(--tt-shadow);
}
.wc-block-order-confirmation-address-wrapper address {
    font-style: normal;
    line-height: 1.6;
    color: var(--tt-ink);
    font-size: 14px;
}
.wc-block-order-confirmation-address-wrapper a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--tt-brand);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

/* Optional COD note (markup: <div class="tt-pay-note"><span class="ico">$</span><span><b>Cash on delivery</b> Have $… ready.</span></div>) */
.tt-pay-note {
    margin-top: 18px;
    background: var(--tt-blush);
    border: 1px dashed var(--tt-brand);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13px;
    color: var(--tt-ink);
    display: flex;
    gap: 10px;
    align-items: center;
}
.tt-pay-note .ico {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--tt-cream-2);
    color: var(--tt-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
.tt-pay-note b { display: block; margin-bottom: 2px; color: var(--tt-ink); }

/* ---------- Optional CTA strip below totals ---------- */
.tt-cta-strip {
    margin-top: 24px;
    background: var(--tt-black);
    color: var(--tt-cream-2);
    border-radius: var(--tt-radius);
    padding: 22px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--tt-shadow);
}
.tt-cta-strip h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--tt-cream-2); }
.tt-cta-strip p { margin: 2px 0 0; color: rgba(255, 248, 241, .7); font-size: 13px; }
.tt-cta-strip .actions { margin-left: auto; display: flex; gap: 10px; }
.tt-cta-strip a {
    background: var(--tt-brand);
    color: var(--tt-cream-2);
    text-decoration: none;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px;
}
.tt-cta-strip a.ghost {
    background: transparent;
    color: var(--tt-cream-2);
    border: 1px solid rgba(255, 248, 241, .25);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .woocommerce-order-received .wp-block-columns {
        grid-template-columns: 1fr;
    }
    .wc-block-order-confirmation-summary-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .wc-block-order-confirmation-summary-list-item {
        border-right: 0;
        border-bottom: 1px solid var(--tt-line);
    }
    .wp-block-woocommerce-order-confirmation-status {
        padding: 28px 24px;
    }
    .wp-block-woocommerce-order-confirmation-status h1 { font-size: 26px; }
}

/* ── Order-received polish (2026-07-01) ─────────────────────────────
   Two fixes after seeing the live page:
   1) MISALIGNED CARDS ("looks nuts"): the status / summary / totals
      cards are `alignwide` capped at max-width:1240px but render as
      content-box, so each card's padding is ADDED outside the 1240 cap
      — banner→1320px, summary→1256px, totals→1304px — while the plain
      columns block is a true 1240. Their left/right edges therefore
      never line up. border-box makes every card exactly 1240 → aligned.
   2) SQUISHED TITLE: the status <h1> is Riffic 800 with letter-spacing
      -0.02em + line-height 1.05, which crams the chunky letters. Open
      the tracking + leading and nudge the size up a touch. */
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-status,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-summary,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-totals-wrapper,
body.woocommerce-order-received .wc-block-order-confirmation-address-wrapper,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-billing-address,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-shipping-address {
    box-sizing: border-box;
}
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-status h1 {
    font-size: clamp(30px, 2.6vw, 38px);
    line-height: 1.2;
    letter-spacing: .005em;
    /* Riffic 800 (Black) read as "too thick" — drop to semibold. */
    font-weight: 600;
    /* Give the title real air top + bottom so it isn't touching the
       banner top or crowding the "Thank you" line below it. */
    margin: 10px 0 14px;
}
/* Comfortable, symmetric banner padding + a touch more room under the
   subtitle. */
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-status {
    padding: 40px 40px 42px;
}
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-status p {
    line-height: 1.55;
}

/* 3) NO GAPS BETWEEN SECTIONS ("overlapping"): the block layout zeroes
      the redesign's margin-bottom, so the banner / summary / totals /
      address cards butt together edge-to-edge. Restore real vertical
      breathing room. !important because the layout reset wins otherwise. */
body.woocommerce-order-received main.wp-block-group > .wp-block-woocommerce-order-confirmation-status,
body.woocommerce-order-received main.wp-block-group > .wp-block-woocommerce-order-confirmation-summary,
body.woocommerce-order-received main.wp-block-group > .wp-block-woocommerce-order-confirmation-totals-wrapper {
    margin-bottom: 24px !important;
}

/* 4) TOP TOUCHES HEADER / BOTTOM TOUCHES FOOTER: the GLOBAL FLUSH RULE
      (~line 962) zeroes main's top/bottom padding so the homepage's
      full-bleed sections stack edge-to-edge. The order-received cards
      aren't full-bleed heroes, so with zero padding the banner butts
      against the header and the address cards against the footer.
      Restore comfortable top/bottom padding (higher specificity +
      !important to beat the flush rule). */
body.woocommerce-order-received main.wp-block-group {
    padding-top: clamp(28px, 4vw, 44px) !important;
    padding-bottom: clamp(48px, 6vw, 80px) !important;
}

/* 5) SUMMARY STRIP "strangely spaced": WooCommerce's block CSS overrides
      the intended grid with display:flex + justify-content:space-between,
      so the content-sized cells (Order#, Date, Total, Email) get pushed
      apart at uneven x-positions. Force even, equal-width columns — one
      per item, whatever the count (4 without a payment method, 5 with). */
body.woocommerce-order-received .wc-block-order-confirmation-summary-list {
    display: grid !important;
    /* Clear the redesign's explicit repeat(5,1fr) — with only 4 cells it
       left a dead 5th column on the right. auto-flow column + auto 1fr
       makes exactly one equal column per item. */
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 1fr !important;
    justify-content: initial !important;
    gap: 0 !important;
}
@media (max-width: 720px) {
    body.woocommerce-order-received .wc-block-order-confirmation-summary-list {
        grid-auto-flow: row !important;
        grid-auto-columns: auto !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   /cart/ — Teddy Transfers EMPTY-cart redesign.
   Scoped to body.woocommerce-cart so the page chrome + recs grid +
   help row only fire on the cart page.
   Uses only the brand palette (--tt-cream / --tt-brand / --tt-ink /
   --tt-blush). Markup hooks expected (add as needed): .tt-empty-card,
   .tt-perk-strip, .tt-recs, .tt-help.
   ═══════════════════════════════════════════════════════════════ */

/* Page chrome */
body.woocommerce-cart .wp-site-blocks,
body.woocommerce-cart { background: var(--tt-cream); }

/* Page title */
.woocommerce-cart .wp-block-post-title {
    font-size: 38px; font-weight: 800; letter-spacing: -.02em;
    color: var(--tt-ink); margin: 0 0 28px;
}
.tt-crumbs { font-size: 13px; color: var(--tt-ink-2); margin-bottom: 8px; }
.tt-crumbs a { color: var(--tt-ink-2); text-decoration: none; }
.tt-crumbs .sep { margin: 0 6px; opacity: .5; }

/* ---------- Empty-cart hero card ---------- */
.tt-empty-card {
    background: var(--tt-cream-2);
    border-radius: var(--tt-radius);
    box-shadow: var(--tt-shadow);
    padding: 56px 40px;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px;
    align-items: center;
    position: relative; overflow: hidden;
}
.tt-empty-card::before {
    content: ""; position: absolute; right: -100px; top: -100px;
    width: 340px; height: 340px; border-radius: 50%;
    background: var(--tt-blush); opacity: .55;
}
.tt-empty-card::after {
    content: ""; position: absolute; right: 120px; bottom: -140px;
    width: 260px; height: 260px; border-radius: 50%;
    background: var(--tt-cream);
}
.tt-empty-card .tt-content { position: relative; z-index: 2; max-width: 480px; }
.tt-empty-card .tt-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tt-blush); color: var(--tt-brand);
    border-radius: 999px; padding: 6px 12px;
    font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.tt-empty-card .tt-pill .dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--tt-brand);
}
.wc-block-cart__empty-cart__title,
.tt-empty-card h2 {
    font-size: 42px; font-weight: 800; letter-spacing: -.02em;
    color: var(--tt-ink); margin: 16px 0 10px; line-height: 1.05;
}
.tt-empty-card p.tt-lede {
    color: var(--tt-ink-2); font-size: 16px; line-height: 1.55;
    margin: 0 0 24px; max-width: 440px;
}
.tt-empty-card .tt-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tt-empty-card .tt-actions .wp-block-button__link {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--tt-brand); color: var(--tt-cream-2);
    text-decoration: none; border: 0; border-radius: 999px;
    padding: 14px 22px; font-weight: 800;
    letter-spacing: .02em; font-size: 14px;
}
.tt-empty-card .tt-actions .wp-block-button__link:hover { background: var(--tt-ink); }
.tt-empty-card .tt-actions .wp-block-button__link.ghost {
    background: transparent; color: var(--tt-ink);
    border: 1.5px solid var(--tt-ink);
}
.tt-empty-card .tt-actions .wp-block-button__link.ghost:hover {
    background: var(--tt-ink); color: var(--tt-cream-2);
}

/* Quick secondary links */
.tt-quick {
    margin-top: 28px; display: flex; flex-wrap: wrap;
    gap: 18px; font-size: 13px;
}
.tt-quick a {
    color: var(--tt-brand); text-decoration: none; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
}
.tt-quick a:hover { text-decoration: underline; }
.tt-quick a::before { content: "›"; color: var(--tt-brand); font-weight: 800; }

/* ---------- CSS-only shopping-bag illustration ---------- */
.tt-empty-card .tt-art {
    position: relative; z-index: 2; height: 280px;
    display: flex; align-items: center; justify-content: center;
}
.tt-bag { position: relative; width: 200px; height: 220px; }
.tt-bag .body {
    position: absolute; inset: 40px 0 0 0;
    background: var(--tt-brand);
    border-radius: 18px 18px 28px 28px;
    box-shadow: 0 24px 48px -16px rgba(74, 51, 40, .35);
}
.tt-bag .body::after {
    content: ""; position: absolute; inset: 14px;
    border-radius: 14px 14px 22px 22px;
    border: 2px dashed rgba(255, 248, 241, .35);
}
.tt-bag .handle {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 120px; height: 90px;
    border: 14px solid var(--tt-ink); border-bottom: 0;
    border-radius: 60px 60px 0 0; background: transparent;
}
.tt-bag .tag {
    position: absolute; top: 120px; left: 50%;
    transform: translateX(-50%) rotate(-6deg);
    background: var(--tt-cream-2); color: var(--tt-ink);
    padding: 8px 14px; border-radius: 8px;
    font-size: 11px; font-weight: 800; letter-spacing: .1em;
    border: 1px solid var(--tt-line);
    box-shadow: 0 8px 16px rgba(74, 51, 40, .18);
}
.tt-bag .sparkle { position: absolute; font-weight: 800; font-size: 18px; }
.tt-bag .s1 { top: 10px; left: -20px; color: var(--tt-brand); }
.tt-bag .s2 { top: 60px; right: -30px; color: var(--tt-ink); }
.tt-bag .s3 { bottom: 20px; left: -30px; color: var(--tt-brand); }

/* ---------- Membership perk strip ---------- */
.tt-perk-strip {
    margin-top: 24px; background: var(--tt-ink); color: var(--tt-cream-2);
    border-radius: var(--tt-radius); padding: 18px 24px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    box-shadow: var(--tt-shadow);
}
.tt-perk-strip h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--tt-cream-2); }
.tt-perk-strip p  { margin: 2px 0 0; color: rgba(255, 248, 241, .7); font-size: 13px; }
.tt-perk-strip .cta { margin-left: auto; display: flex; gap: 10px; }
.tt-perk-strip .cta a {
    background: var(--tt-brand); color: var(--tt-cream-2);
    text-decoration: none; font-weight: 700;
    padding: 10px 16px; border-radius: 999px; font-size: 13px;
}
.tt-perk-strip .cta a.ghost {
    background: transparent; color: var(--tt-cream-2);
    border: 1px solid rgba(255, 248, 241, .25);
}

/* ---------- Recommendations grid ---------- */
.tt-recs { margin-top: 48px; }
.tt-recs-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 20px; gap: 16px; flex-wrap: wrap;
}
.tt-recs-head h2.wp-block-heading {
    font-size: 24px; font-weight: 800; color: var(--tt-ink); margin: 0;
    display: flex; align-items: center; gap: 10px; letter-spacing: -.01em;
}
.tt-recs-head h2.wp-block-heading::before {
    content: ""; width: 6px; height: 22px;
    background: var(--tt-brand); border-radius: 3px;
}
.tt-recs-head .filters { display: flex; gap: 8px; flex-wrap: wrap; }
.tt-recs-head .filters a {
    background: var(--tt-cream-2); border: 1px solid var(--tt-line);
    color: var(--tt-ink-2); padding: 6px 14px;
    border-radius: 999px; font-size: 12.5px; font-weight: 600;
    text-decoration: none;
}
.tt-recs-head .filters a.active {
    background: var(--tt-ink); color: var(--tt-cream-2);
    border-color: var(--tt-ink);
}

/* Product cards reuse Woo's wc-block-grid markup */
.woocommerce-cart .wc-block-grid__products {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.woocommerce-cart .wc-block-grid__product {
    background: var(--tt-cream-2); border-radius: var(--tt-radius);
    box-shadow: var(--tt-shadow); padding: 14px;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
}
.woocommerce-cart .wc-block-grid__product .tt-ribbon {
    position: absolute; top: 14px; left: 14px;
    background: var(--tt-ink); color: var(--tt-cream-2);
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; z-index: 2;
}
.woocommerce-cart .wc-block-grid__product .tt-ribbon.brand { background: var(--tt-brand); }
.woocommerce-cart .wc-block-grid__product .wc-block-grid__product-image {
    width: 100%; aspect-ratio: 1 / 1; border-radius: 14px;
    background: var(--tt-blush);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px; overflow: hidden;
}
.woocommerce-cart .wc-block-grid__product .wc-block-grid__product-image img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 14px;
}
.woocommerce-cart .wc-block-grid__product .wc-block-grid__product-title {
    font-size: 15px; font-weight: 700; color: var(--tt-ink);
    margin: 0; line-height: 1.3; text-decoration: none;
}
.woocommerce-cart .wc-block-grid__product .wc-block-grid__product-rating {
    margin: 6px 0 0; font-size: 12px; color: var(--tt-ink-2);
    display: flex; align-items: center; gap: 6px;
}
.woocommerce-cart .wc-block-grid__product .star-rating {
    color: var(--tt-brand); letter-spacing: 1px; font-size: 13px;
}
.woocommerce-cart .wc-block-grid__product .wc-block-grid__product-price {
    margin: 8px 0 12px; color: var(--tt-ink); font-weight: 800;
    font-size: 15px; font-variant-numeric: tabular-nums;
}
.woocommerce-cart .wc-block-grid__product .wc-block-grid__product-add-to-cart { margin-top: auto; }
.woocommerce-cart .wc-block-grid__product .add_to_cart_button {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--tt-ink); color: var(--tt-cream-2);
    text-decoration: none; border-radius: 999px;
    padding: 10px 14px; font-size: 12.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}
.woocommerce-cart .wc-block-grid__product .add_to_cart_button:hover { background: var(--tt-brand); }
.woocommerce-cart .wc-block-grid__product .add_to_cart_button .tt-plus {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--tt-brand); color: var(--tt-cream-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1;
}
.woocommerce-cart .wc-block-grid__product .add_to_cart_button:hover .tt-plus {
    background: var(--tt-cream-2); color: var(--tt-brand);
}

/* ---------- Help row ---------- */
.tt-help {
    margin-top: 48px; display: grid;
    grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.tt-help-card {
    background: var(--tt-cream-2); border-radius: var(--tt-radius);
    padding: 24px; box-shadow: var(--tt-shadow);
}
.tt-help-card .ico {
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--tt-blush); color: var(--tt-brand);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px; margin-bottom: 14px;
}
.tt-help-card h4 { margin: 0 0 6px; color: var(--tt-ink); font-size: 16px; font-weight: 800; }
.tt-help-card p { margin: 0 0 12px; color: var(--tt-ink-2); font-size: 13.5px; line-height: 1.55; }
.tt-help-card a { color: var(--tt-brand); text-decoration: none; font-weight: 700; font-size: 13px; }
.tt-help-card a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
    .woocommerce-cart .wc-block-grid__products { grid-template-columns: repeat(2, 1fr); }
    .tt-help { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .tt-empty-card {
        grid-template-columns: 1fr; padding: 40px 28px; text-align: center;
    }
    .tt-empty-card .tt-content { margin: 0 auto; }
    .tt-empty-card .tt-actions { justify-content: center; }
    .tt-quick { justify-content: center; }
    .tt-empty-card .tt-art { order: -1; height: 200px; margin-bottom: 8px; }
    .wc-block-cart__empty-cart__title { font-size: 32px; }
}

/* ============================================================
   CHECKOUT — Section #3 (Shippo live shipping rates)
   ============================================================ */

.tt-checkout__card--shipping.is-collapsed .tt-checkout__shipping-body {
    display: none;
}

/* Section #4 — Payment. Same card shell as #1/#2/#3 so the four
   sections read as a vertical flow in the main column. Payment UI
   itself (radios, gateway descriptions, place-order button) is
   styled by the existing .wc_payment_methods rules. */
.tt-checkout__card--payment .tt-checkout__payment-body {
    margin-top: 12px;
}
.tt-checkout__card--payment #payment {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tt-checkout__card--payment .form-row.place-order {
    padding: 16px 0 0 !important;
    margin: 0 !important;
    border-top: 1px dashed rgba(0,0,0,0.10);
}
/* "To be determined" label in the order summary's SHIPPING row,
   shown until the customer clicks "Continue to shipping" and rate
   options are loaded. Reads as the same muted ink as the labels
   so it doesn't compete visually with the actual line totals. */
.tt-shipping-tbd {
    color: var(--wp--preset--color--ink-soft, #7a6a5e);
    font-style: italic;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.tt-checkout__card--shipping .tt-checkout__shipping-body {
    margin-top: -4px;
}
.tt-shipping-placeholder {
    color: #7a6a5e;
    font-size: 14px;
    margin: 0;
}
/* "Need to edit your address? Click here" helper in the Shipping section. */
.tt-checkout__edit-addr {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--tt-line, #EADBCF);
    font-size: 13px;
    color: #7a6a5e;
}
.tt-checkout__edit-addr-link {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 4px;
    color: var(--tt-brand, #AA6F63);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.tt-checkout__edit-addr-link:hover { color: var(--tt-brand-dk, #8A5347); }
.tt-shipping-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6E5145;
    font-size: 14px;
    padding: 10px 0;
}
/* Browser's [hidden] sets display:none, but our display:flex overrides it.
   Explicit rule for the hidden state. Same fix applied to the options list
   and the error/placeholder rows where their default display would mask hidden. */
.tt-shipping-loading[hidden],
.tt-shipping-options[hidden],
.tt-shipping-error[hidden],
.tt-shipping-placeholder[hidden] {
    display: none !important;
}
.tt-shipping-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(170,111,99,.18);
    border-top-color: var(--wp--preset--color--brand, #AA6F63);
    border-radius: 50%;
    animation: tt-shippo-spin .9s linear infinite;
    display: inline-block;
}
@keyframes tt-shippo-spin { to { transform: rotate(360deg); } }
.tt-shipping-error {
    color: #b03a3a;
    background: #FCE6E2;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    margin: 10px 0 0;
}
.tt-shipping-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tt-shipping-option {
    background: #fff;
    border: 1.5px solid #ecdfd6;
    border-radius: 12px;
    transition: border-color .15s ease, background .15s ease;
}
.tt-shipping-option:hover { border-color: var(--wp--preset--color--brand, #AA6F63); }
.tt-shipping-option:has(input[type="radio"]:checked) {
    border-color: var(--wp--preset--color--brand, #AA6F63);
    background: #fbf6f2;
}
.tt-shipping-option label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    margin: 0;
    font-family: inherit;
}
.tt-shipping-option input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--wp--preset--color--brand, #AA6F63);
    margin: 0;
}
.tt-shipping-option__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tt-shipping-option__title {
    font-weight: 600;
    color: var(--wp--preset--color--ink, #4A3328);
    font-size: 14.5px;
    line-height: 1.25;
}
.tt-shipping-option__sub {
    font-size: 12.5px;
    color: #7a6a5e;
}
.tt-shipping-option__amt {
    flex-shrink: 0;
    font-family: 'Karla', sans-serif; /* live-rate price in Karla, not the Riffic display font */
    font-weight: 700;
    color: var(--wp--preset--color--ink, #4A3328);
    font-size: 16px;
    white-space: nowrap;
}

/* Delivery card — collapsed state (after user moves on to shipping) */
.tt-checkout__card--delivery.is-collapsed {
    cursor: pointer;
    position: relative;
}
.tt-checkout__card--delivery.is-collapsed > *:not(.tt-checkout__h) {
    display: none;
}
.tt-checkout__card--delivery.is-collapsed::after {
    content: 'Edit ›';
    position: absolute;
    top: 22px;
    right: 22px;
    color: var(--wp--preset--color--brand, #AA6F63);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
}
.tt-checkout__card--delivery.is-collapsed .tt-checkout__h::after {
    content: attr(data-summary);
    display: block;
    font-family: var(--wp--preset--font-family--body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #7a6a5e !important;
    margin-top: 6px;
}

.tt-checkout__delivery-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 11px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--wp--preset--color--brand, #AA6F63);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    letter-spacing: .04em;
}
.tt-checkout__delivery-done:hover {
    background: var(--wp--preset--color--brand-dark, #000);
}

/* ============================================================
   CART PAGE — Teddy Transfers redesign (/cart/)
   ============================================================ */

body.woocommerce-cart .entry-content > *:not(.tt-cart-page),
body.woocommerce-cart .wp-block-post-content > *:not(.tt-cart-page) {
    /* let our wrapper own the page area */
}

.tt-cart-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px clamp(16px, 4vw, 32px) 60px;
    color: var(--wp--preset--color--ink, #4A3328);
    font-family: var(--wp--preset--font-family--body);
}
.tt-cart-page__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(32px, 4vw, 44px);
    color: var(--wp--preset--color--ink, #4A3328);
    font-weight: 700;
    margin: 0 0 28px;
    line-height: 1.1;
}
.tt-cart-page__dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--wp--preset--color--accent, #E89B6E);
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: 6px;
}
.tt-cart-page__grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 900px) {
    .tt-cart-page__grid { grid-template-columns: 1fr; }
}

/* ── Items card ─────────────────────────────────────────────── */
.tt-cart-card {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(74,51,40,.06);
}
.tt-cart-card__header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--wp--preset--color--soft-pink, #E5D3C2);
    font-weight: 700;
    color: var(--wp--preset--color--brand, #AA6F63);
    letter-spacing: 1px;
    font-size: 13px;
    text-transform: uppercase;
}
.tt-cart-line {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--wp--preset--color--soft-pink, #E5D3C2);
    align-items: flex-start;
}
.tt-cart-line:last-child { border-bottom: 0; }
.tt-cart-line__thumb {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    background: linear-gradient(135deg, #FAD9BF, #F4C9A8);
    border: 2px solid #F4C9A8;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tt-cart-line__thumb img,
.tt-cart-line__thumb a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    border: 0 !important;
    padding: 6px !important;
    border-radius: 14px !important;
    display: block !important;
}
.tt-cart-line__body { min-width: 0; }
.tt-cart-line__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: 18px;
    font-weight: 600;
    color: var(--wp--preset--color--ink, #4A3328);
    text-decoration: none;
    display: block;
    margin: 0 0 6px;
    line-height: 1.25;
}
.tt-cart-line__title:hover { color: var(--wp--preset--color--brand, #AA6F63); }

.tt-cart-line__meta {
    font-size: 13px;
    color: #8a6f5f;
    margin: 0 0 4px;
    line-height: 1.35;
}
.tt-cart-line__meta dl,
.tt-cart-line__meta p { margin: 0; padding: 0; }
.tt-cart-line__meta dt,
.tt-cart-line__meta dd { display: inline; margin: 0; padding: 0; font-weight: inherit; }

.tt-cart-line__desc {
    font-size: 12.5px;
    color: #a08573;
    margin: 0 0 14px;
    max-width: 480px;
    line-height: 1.45;
}

.tt-cart-line__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tt-cart-line__qty-hidden { display: none !important; }
.tt-qty.tt-qty--cart {
    display: inline-flex;
    align-items: center;
    background: var(--wp--preset--color--cream, #F7EBE1);
    border-radius: 30px;
    padding: 4px;
    gap: 2px;
    height: 36px;
    border: 0;
}
.tt-qty.tt-qty--cart button {
    width: 28px;
    height: 28px;
    border: 0;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    color: var(--wp--preset--color--ink, #4A3328);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.tt-qty.tt-qty--cart button:hover { background: #FAD9BF; }
.tt-qty.tt-qty--cart button:disabled { opacity: .35; cursor: not-allowed; }
.tt-qty.tt-qty--cart .tt-qty__val {
    padding: 0 10px;
    font-weight: 700;
    color: var(--wp--preset--color--ink, #4A3328);
    font-size: 14px;
    min-width: 32px;
    text-align: center;
}
.tt-cart-line__trash {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--wp--preset--color--brand, #AA6F63);
    border-radius: 50%;
    margin-left: 4px;
    text-decoration: none !important;
    font-size: 0;
    transition: background-color .15s ease;
}
.tt-cart-line__trash:hover { background: #FCE6E2; color: var(--wp--preset--color--brand, #AA6F63); }
.tt-cart-line__trash svg { display: block; }

.tt-cart-line__total {
    font-family: var(--wp--preset--font-family--display);
    font-size: 22px;
    color: var(--wp--preset--color--ink, #4A3328);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    align-self: center;
}
.tt-cart-line__total .woocommerce-Price-amount,
.tt-cart-line__total bdi { font-weight: 700; }

/* ── Summary card ───────────────────────────────────────────── */
.tt-cart-summary {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(74,51,40,.06);
    position: sticky;
    top: 20px;
}
.tt-cart-summary__h {
    font-family: var(--wp--preset--font-family--display);
    font-size: 24px;
    margin: 0 0 18px;
    color: var(--wp--preset--color--ink, #4A3328);
    font-weight: 700;
}
.tt-cart-summary__ship-progress {
    background: var(--wp--preset--color--cream, #F7EBE1);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 18px;
    font-size: 13px;
    text-align: center;
    color: var(--wp--preset--color--ink, #4A3328);
}
.tt-cart-summary__ship-progress b { color: var(--wp--preset--color--brand, #AA6F63); }
.tt-cart-summary__progress-bar {
    height: 8px;
    background: #fff;
    border-radius: 8px;
    margin-top: 8px;
    overflow: hidden;
}
.tt-cart-summary__progress-bar > div {
    height: 100%;
    background: linear-gradient(90deg, var(--wp--preset--color--accent, #E89B6E), var(--wp--preset--color--brand, #AA6F63));
    border-radius: 8px;
    transition: width .4s ease;
}

.tt-cart-summary__coupon {
    background: var(--wp--preset--color--cream, #F7EBE1);
    border-radius: 14px;
    margin-bottom: 18px;
    overflow: hidden;
}
.tt-cart-summary__coupon > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--wp--preset--color--brand, #AA6F63);
}
.tt-cart-summary__coupon > summary::-webkit-details-marker { display: none; }
.tt-cart-summary__coupon > summary::after {
    content: '＋';
    font-size: 20px;
    color: var(--wp--preset--color--brand, #AA6F63);
    line-height: 1;
}
.tt-cart-summary__coupon[open] > summary::after { content: '×'; }
.tt-cart-summary__coupon-form {
    display: flex;
    gap: 6px;
    padding: 0 14px 14px;
}
.tt-cart-summary__coupon-form input {
    flex: 1;
    border: 1px solid var(--wp--preset--color--soft-pink, #E5D3C2);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--wp--preset--color--ink, #4A3328);
    outline: none;
    min-width: 0;
}
.tt-cart-summary__coupon-form input:focus {
    border-color: var(--wp--preset--color--brand, #AA6F63);
}
.tt-cart-summary__coupon-form button {
    background: var(--wp--preset--color--brand, #AA6F63);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 0 16px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    letter-spacing: .04em;
}

.tt-cart-summary__lines { margin-top: 4px; }
.tt-cart-summary__line {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #6b4f42;
}
.tt-cart-summary__line .woocommerce-Price-amount,
.tt-cart-summary__line bdi { color: inherit; }
/* Discount/fee lines (e.g. "Buy More, Save More") read as a saving. */
.tt-cart-summary__line--fee { color: #2e7d52; font-weight: 700; }
.tt-cart-summary__line--fee .woocommerce-Price-amount,
.tt-cart-summary__line--fee bdi { color: #2e7d52; }

.tt-cart-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-top: 2px solid var(--wp--preset--color--soft-pink, #E5D3C2);
    border-bottom: 2px solid var(--wp--preset--color--soft-pink, #E5D3C2);
    margin: 10px 0 18px;
}
.tt-cart-summary__total-label {
    font-family: var(--wp--preset--font-family--display);
    font-size: 18px;
    color: var(--wp--preset--color--ink, #4A3328);
    font-weight: 700;
}
.tt-cart-summary__total-amt {
    font-family: var(--wp--preset--font-family--display);
    font-size: 28px;
    color: var(--wp--preset--color--brand, #AA6F63);
    font-weight: 700;
    line-height: 1;
}
.tt-cart-summary__total-amt .woocommerce-Price-amount,
.tt-cart-summary__total-amt bdi { color: inherit; font-weight: 700; }

.tt-cart-summary__checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--wp--preset--color--brand, #AA6F63);
    color: #fff !important;
    border: 0;
    padding: 16px;
    border-radius: 50px;
    font-family: var(--wp--preset--font-family--display);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background-color .15s ease, transform .12s ease;
    box-shadow: 0 4px 14px rgba(170,111,99,.3);
    text-decoration: none !important;
}
.tt-cart-summary__checkout-btn:hover {
    background: var(--wp--preset--color--brand-dark, #000);
    transform: translateY(-2px);
}

/* Hide WC's old cart-table + collaterals chrome when our redesign is active. */
body.woocommerce-cart .woocommerce-cart-form table.shop_table_responsive,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .woocommerce > .cart-empty,
body.woocommerce-cart .woocommerce-shipping-calculator,
body.woocommerce-cart .return-to-shop { /* keep alongside redesign */ }

/* ── Trust row + recommended (rendered via woocommerce_after_cart hook) ── */
.tt-cart-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
    padding: 24px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(74,51,40,.06);
}
@media (max-width: 900px) {
    .tt-cart-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .tt-cart-trust { grid-template-columns: 1fr; }
}
.tt-cart-trust__item { display: flex; align-items: center; gap: 12px; }
.tt-cart-trust__icon {
    width: 48px;
    height: 48px;
    background: var(--wp--preset--color--cream, #F7EBE1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.tt-cart-trust__text strong {
    display: block;
    font-family: var(--wp--preset--font-family--display);
    color: var(--wp--preset--color--ink, #4A3328);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}
.tt-cart-trust__text span {
    font-size: 12px;
    color: #8a6f5f;
}

/* Recommended products grid below cart */
.tt-cart-recommend { margin-top: 40px; }
.tt-cart-recommend__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 12px;
}
.tt-cart-recommend__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: 26px;
    color: var(--wp--preset--color--ink, #4A3328);
    font-weight: 700;
    line-height: 1.2;
}
.tt-cart-recommend__title em {
    font-style: normal;
    color: var(--wp--preset--color--accent, #E89B6E);
}
.tt-cart-recommend__sub {
    color: #8a6f5f;
    font-size: 14px;
    margin: 4px 0 0;
}
.tt-cart-recommend__see-all {
    color: var(--wp--preset--color--brand, #AA6F63);
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
}
.tt-cart-recommend__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 900px) {
    .tt-cart-recommend__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .tt-cart-recommend__grid { grid-template-columns: 1fr; }
}

/* Mobile cart line — stack thumb/body, push total beside body */
@media (max-width: 600px) {
    .tt-cart-line {
        grid-template-columns: 80px 1fr;
        gap: 14px;
    }
    .tt-cart-line__thumb { width: 80px; height: 80px; }
    .tt-cart-line__total {
        grid-column: 2 / 3;
        text-align: left;
        font-size: 18px;
        align-self: start;
        margin-top: -4px;
    }
}

/* ════════════════════════════════════════════════════════════════
   Global overrides — added 2026-05-28.
   ════════════════════════════════════════════════════════════════ */

/* Force Karla on all CTA / form buttons. Without this, buttons inherit
   the display family (Riffic) from broader heading/text rules and read
   as too chunky for action labels. */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
.woocommerce-Button,
.woocommerce a.button,
.woocommerce button.button,
.tt-mem-cta,
.tt-membership-btn,
.tt-cart__label {
    font-family: 'Karla', system-ui, sans-serif !important;
}

/* Addresses page — Edit / Add link inline with the section heading,
   pulled out of its own row so it doesn't read as orphan text.
   Kill WC core's `float: left` on the h3 + `float: right` on the .edit
   (defined in .woocommerce-account .addresses .title h3/.edit) which
   was leaving the heading offset from its column's left edge. */
.woocommerce-Address-title.title {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 16px;
    margin: 0 0 14px !important;
    padding: 0 !important;
    text-align: left !important;
    flex-wrap: wrap;
}
.woocommerce-Address-title.title h2,
.woocommerce-Address-title.title h3 {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    text-align: left !important;
}
.woocommerce-Address-title.title .edit {
    font-size: 13px;
    white-space: nowrap;
    font-weight: 600;
    float: none !important;
}
.woocommerce-Address address {
    padding: 0 !important;
    margin: 0 !important;
}

/* Order details — Preview-design pill text was being darkened by the
   theme's product-name link color rule (which excluded the wrapper
   .buildaur-bridge-preview but not the inner <a>). Force white again. */
.woocommerce-table__line-item.order_item .buildaur-bridge-preview a,
.woocommerce-table__line-item.order_item .buildaur-bridge-preview a:hover {
    color: #fff !important;
}

/* Membership plan cards — flex column so the CTA button pins to the
   bottom on both cards regardless of how many bullet lines each has.
   Prevents the off-centered look from the monthly card sitting shorter. */
.tt-mem .tt-mem-plan {
    display: flex;
    flex-direction: column;
}
.tt-mem .tt-mem-cta {
    margin-top: auto;
}

/* Membership page only — the parent page wrapper has a default white
   background, and there's a small gap between where .tt-mem ends and
   the footer begins. Painting the body cream makes that gap blend in
   instead of flashing as a bright white band above the footer. */
body.page-id-230 {
    background: #FFF8F1 !important;
}

/* Contact form — file input + submit status messaging. */
.tt-contact-field--file span em {
    font-style: normal;
    color: var(--wp--preset--color--ink-soft, #8a6f62);
    font-weight: 400;
    margin-left: 4px;
    font-size: 12.5px;
}
.tt-contact-field--file input[type="file"] {
    border: 1px dashed #D8C7B6;
    background: #FDF8F3;
    padding: 12px;
    border-radius: 10px;
    font-size: 13px;
    color: #4A3328;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}
.tt-contact-field--file input[type="file"]:hover { border-color: #AA6F63; }
.tt-contact-field--file input[type="file"]::file-selector-button {
    background: #AA6F63;
    color: #fff;
    border: 0;
    padding: 6px 12px;
    border-radius: 6px;
    margin-right: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12.5px;
    font-family: 'Karla', system-ui, sans-serif;
}
.tt-contact-field--file input[type="file"]::file-selector-button:hover { background: #8E5C52; }

.tt-contact-form__status {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.45;
    min-height: 1em;
}
.tt-contact-form__status.is-success { color: #1F7A4A; font-weight: 600; }
.tt-contact-form__status.is-error   { color: #A0392B; font-weight: 600; }

/* Force Karla on the shipping price spans at checkout. Whatever
   global rule was inheriting Riffic into .amount on these labels
   gets overridden here scoped to the shipping methods list. */
.tt-checkout .woocommerce-shipping-methods li label,
.tt-checkout .woocommerce-shipping-methods li label *,
.tt-checkout .shipping_method label .woocommerce-Price-amount,
.tt-checkout .shipping_method label .amount,
.tt-checkout .shipping_method label bdi {
    font-family: 'Karla', system-ui, sans-serif !important;
}

/* ════════════════════════════════════════════════════════════════
   REWARDS — My Account page + checkout toggle. 2026-05-28.
   ════════════════════════════════════════════════════════════════ */
.tt-rewards-hero {
    background: #F7EBE1;
    border-radius: 16px;
    padding: 28px;
    margin: 0 0 24px;
    text-align: center;
}
.tt-rewards-hero__balance-amt {
    font-family: 'Riffic', 'Fredoka', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #4A3328;
    line-height: 1;
}
.tt-rewards-hero__balance-lbl {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #AA6F63;
    margin-top: 8px;
    font-weight: 700;
}
.tt-rewards-hero__sub {
    font-size: 14px;
    color: #6E5145;
    max-width: 480px;
    margin: 16px auto 0;
    line-height: 1.5;
}

.tt-rewards-progress {
    background: #FFFFFF;
    border: 1px solid #F0E1D2;
    border-radius: 14px;
    padding: 20px 22px;
    margin: 0 0 28px;
}
.tt-rewards-progress__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #4A3328;
    margin-bottom: 10px;
}
.tt-rewards-progress__need { color: #AA6F63; font-weight: 700; font-size: 13px; }
.tt-rewards-progress__bar { height: 10px; background: #F0E1D2; border-radius: 999px; overflow: hidden; }
.tt-rewards-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, #AA6F63, #8B5A3C);
    border-radius: 999px;
    transition: width .4s ease;
}
.tt-rewards-progress__foot { font-size: 12.5px; color: #8A6F62; margin-top: 8px; }
.tt-rewards-progress--maxed { background: #FFF8F1; }
.tt-rewards-progress--maxed p { margin: 0; color: #4A3328; line-height: 1.5; }

.tt-rewards-tiers__h {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 14px;
    color: #4A3328;
}
.tt-rewards-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 0 22px;
}
.tt-rewards-tier {
    background: #FFFFFF;
    border: 1px solid #F0E1D2;
    border-radius: 12px;
    padding: 16px;
    opacity: 0.55;
    transition: opacity .2s, border-color .2s;
}
.tt-rewards-tier.is-unlocked { opacity: 1; border-color: #AA6F63; }
.tt-rewards-tier__n {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #AA6F63;
    font-weight: 700;
}
.tt-rewards-tier__lbl {
    font-size: 18px;
    font-weight: 700;
    color: #4A3328;
    margin: 4px 0 8px;
    font-family: 'Riffic', 'Fredoka', sans-serif;
}
.tt-rewards-tier__detail {
    font-size: 13px;
    color: #6E5145;
    line-height: 1.4;
}
.tt-rewards-tier__badge {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #1F7A4A;
}
.tt-rewards-foot { font-size: 13px; color: #6E5145; }

/* Checkout toggle — sits above the order-review totals. */
.tt-rewards-apply {
    background: #FFF8F1;
    border: 1px solid #F0E1D2;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 14px;
}
.tt-rewards-apply__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #4A3328;
    cursor: pointer;
    margin: 0;
}
.tt-rewards-apply__label input {
    accent-color: #AA6F63;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.tt-rewards-apply__label strong { color: #4A3328; }

/* Rewards — cart drawer line (mirrors .tt-member-line). */
.tt-rewards-line {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F7EBE1;
    border: 1px solid #F0E1D2;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 10px 0 12px;
    font-size: 13px;
    color: #4A3328;
}
.tt-rewards-line__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #AA6F63;
    color: #fff;
    border-radius: 50%;
}
.tt-rewards-line__text { flex: 1; line-height: 1.35; }
.tt-rewards-line__text b { color: #4A3328; font-weight: 700; }
.tt-rewards-line__cta {
    color: #AA6F63;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    font-size: 13px;
}
.tt-rewards-line__cta:hover { color: #8E5C52; }

/* Rewards — thank-you page banner. */
.tt-rewards-thankyou {
    background: #FFF8F1;
    border: 1px solid #F0E1D2;
    border-left: 4px solid #AA6F63;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
    color: #4A3328;
}
.tt-rewards-thankyou strong { color: #4A3328; font-weight: 700; }
.tt-rewards-thankyou__earned,
.tt-rewards-thankyou__applied { margin-bottom: 6px; }
.tt-rewards-thankyou__balance {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #F0E1D2;
    font-size: 14px;
    color: #6E5145;
}
.tt-rewards-thankyou__balance a {
    margin-left: 12px;
    color: #AA6F63;
    font-weight: 700;
    text-decoration: none;
}
.tt-rewards-thankyou--guest {
    border-left-color: #8B5A3C;
}
.tt-rewards-thankyou--guest a {
    display: inline-block;
    margin-top: 8px;
    color: #AA6F63;
    font-weight: 700;
    text-decoration: none;
}

/* Shop card — pack-of-N variant of the qty stepper. Locked to the
   pack size (no ± buttons, no editable input) so the customer can't
   try to add 1 and hit the "minimum is 4" error at checkout. */
.tt-card-qty.tt-card-qty--pack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFF8F1;
    border: 1.5px solid var(--wp--preset--color--soft-pink, #F0E1D2);
    border-radius: 999px;
    padding: 0 14px;
    height: 40px;
    font-family: 'Karla', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--wp--preset--color--brand, #AA6F63);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.tt-card-qty.tt-card-qty--pack .tt-card-qty__lock {
    display: inline-block;
}

/* Single product page — pack-of-N badge above the qty + Add to cart row. */
.tt-picker .tt-pack-badge {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}
.tt-picker .tt-pack-badge__pill {
    display: inline-block;
    background: #AA6F63;
    color: #fff;
    font-family: 'Karla', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
}
.tt-picker .tt-pack-badge__sub {
    font-family: 'Karla', system-ui, sans-serif;
    font-size: 13px;
    color: #6E5145;
    font-weight: 500;
}
.tt-picker .tt-row--pack .tt-qty-input { background: #FFF8F1; color: #4A3328; }
/* Pack steppers are live (step in pack multiples) — keep them looking
   interactive; only the input itself is readonly. */
.tt-picker .tt-row--pack .tt-step { opacity: 1; cursor: pointer; }

/* Pack-of-N price display — used on shop cards + single product page
   so the price reflects the pack total instead of the unit price. */
.tt-pack-price {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    line-height: 1.2;
}
.tt-pack-price__total .woocommerce-Price-amount,
.tt-pack-price__total bdi {
    font-weight: 700;
}
.tt-pack-price__sub {
    font-size: 13px;
    color: var(--wp--preset--color--ink-soft, #6E5145);
    font-weight: 600;
    margin-left: 2px;
}
.tt-pack-price__unit {
    font-size: 12px;
    color: var(--wp--preset--color--ink-soft, #8a6f62);
    opacity: 0.85;
}
.tt-pack-price__unit .woocommerce-Price-amount,
.tt-pack-price__unit bdi {
    font-weight: 500;
}

/* Hide the new WooCommerce blocks mini-cart icon. We use a custom
   side-cart drawer site-wide (inc/side-cart.php + assets/js/cart-drawer.js)
   and the cart utility in the header. The block-based mini-cart got
   re-enabled by the WC 10.8.1 update and started showing up as a stray
   cart icon on the checkout page. */
.wc-block-cart-link,
.wc-block-mini-cart,
.wp-block-woocommerce-mini-cart,
.wp-block-woocommerce-cart-link {
    display: none !important;
}

/* ════════ Checkout QA fixes — 2026-06-18 ════════ */
/* Q2 — shipping price in Karla (the pill rule sets everything but font-family) */
.tt-checkout .shop_table tfoot .shipping td bdi,
.tt-checkout .shop_table tfoot .shipping td .woocommerce-Price-amount,
.tt-checkout .shop_table tfoot .shipping td .amount {
    font-family: 'Karla', sans-serif !important;
}
/* Q5 — kill the native number-spinner ("doubled line") on the checkout qty input */
.tt-qty.tt-qty--checkout .tt-qty__val::-webkit-outer-spin-button,
.tt-qty.tt-qty--checkout .tt-qty__val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tt-qty.tt-qty--checkout .tt-qty__val {
    -moz-appearance: textfield;
    appearance: textfield;
}
/* Q6 — show the WHOLE upsell design instead of cropping it. `height:100%`
   did not resolve against the aspect-ratio'd box (content-box img + 6px
   padding overflowed to 177x203 inside a 165 square and got clipped by
   overflow:hidden — bottom ~17% of every design cut off). Absolute-position
   the img so it gets a definite 165x165 box and truly contains. */
.tt-upsell__art { position: relative; }
/* Category badge (DTF / UV DTF / Coozie) overlaid on the upsell image. */
.tt-upsell__cat {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(74, 51, 40, .82);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
}
.tt-upsell__art img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}
/* Q4 — dynamic free-shipping progress bar in the checkout Order Summary */
.tt-checkout__promo { line-height: 1.35; }
.tt-checkout__promo.is-complete {
    background: var(--tt-pill-bg, #e7f3e9);
    color: var(--tt-ok, #2e7d52);
}
.tt-checkout__promo-msg strong { font-weight: 800; }
.tt-checkout__promo-bar {
    margin-top: 8px;
    height: 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.10);
    overflow: hidden;
}
.tt-checkout__promo-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--tt-brand, #AA6F63);
    transition: width .35s ease;
}
.tt-checkout__promo.is-complete .tt-checkout__promo-fill {
    background: var(--tt-ok, #2e7d52);
}

/* ════════ Shop mobile polish — 2026-06-18 ════════ */
@media (max-width: 1024px) {
    /* (#2) The "All designs" toolbar card was edge-to-edge; inset it so it
       doesn't touch both phone walls. */
    .tt-shop-toolbar {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }
    /* (#5) Even breathing room inside the slide-in filter panel so the facet
       headings (Designers / Category / Holiday) don't hug the left wall. */
    .tt-shop-side[data-tt-filter-panel] {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .tt-shop-side[data-tt-filter-panel] .tt-facet,
    .tt-shop-side[data-tt-filter-panel] .tt-facet__opt,
    .tt-shop-side[data-tt-filter-panel] .tt-facet__h,
    .tt-shop-side[data-tt-filter-panel] .tt-facet__h-collapsible,
    .tt-shop-side[data-tt-filter-panel] details {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (max-width: 768px) {
    /* (#3) "Showing 1 of 1 designs" left-aligned on phones (was right). */
    .tt-shop-hero__meta { text-align: left !important; }
}

/* ════════ Checkout: two-column live rates (UPS | USPS) — 2026-06-18 ════════ */
.tt-ship-cols {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0;
    margin: 10px 0 0;
}
.tt-ship-col__h {
    font-family: 'Riffic', 'Fredoka', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wp--preset--color--brand, #AA6F63);
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--wp--preset--color--soft-pink, #f7d2c7);
}
.tt-ship-col__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
/* Compact the option rows so service name + price fit in the narrow columns. */
.tt-ship-cols .tt-shipping-option label { padding: 9px 10px; gap: 8px; flex-wrap: wrap; }
.tt-ship-cols .tt-shipping-option__body { min-width: 0; }
.tt-ship-cols .tt-shipping-option__title { font-size: 13px; line-height: 1.2; }
.tt-ship-cols .tt-shipping-option__sub { font-size: 11.5px; }
.tt-ship-cols .tt-shipping-option__amt { font-size: 14px; }

/* ════════ Coozie / product-card polish — 2026-06-18 ════════ */
/* (#3) Equal card heights so the Add button lines up across every card. */
ul.wc-block-product-template li.product { display: flex; flex-direction: column; }
ul.wc-block-product-template li.product .tt-card-cart-row { margin-top: auto !important; }

/* (#1) "From $16.00 / pack of four" — tighten so it reads as one clean line. */
.tt-pack-price { gap: 4px; row-gap: 0; }
.tt-pack-price__sub  { font-size: 12px; color: var(--wp--preset--color--ink-soft, #7a6a5e); }
.tt-pack-price__unit { font-size: 12px; }

/* (#4) On cards WITH a variant, match the qty pill height to the variant
   dropdown so their top/bottom padding lines up. */
.tt-card-cart-row .tt-card-sizes-select,
.tt-card-cart-row .tt-card-qty { height: 38px; box-sizing: border-box; }
.tt-card-cart-row .tt-card-qty__btn,
.tt-card-cart-row .tt-card-qty__input { height: 100%; }

/* (#2) Cards with NO variant dropdown: qty stepper goes full width (was
   floating off to one side) and the Add button stacks below it. */
.tt-card-cart-row:not(:has(.tt-card-sizes-select)) { grid-template-columns: 1fr !important; }
.tt-card-cart-row:not(:has(.tt-card-sizes-select)) .tt-card-qty {
    grid-column: 1 !important; width: 100% !important; justify-content: space-between;
}
.tt-card-cart-row:not(:has(.tt-card-sizes-select)) .tt-card-qty__btn,
.tt-card-cart-row:not(:has(.tt-card-sizes-select)) .tt-card-qty__input { flex: 1 1 0 !important; }

/* (#5) "More designs you'll love" — category eyebrow before the price, matching the shop grid. */
.tt-product-card--cta .tt-product-card__cat {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--wp--preset--color--brand, #AA6F63);
    font-size: .82em;
}

/* ════════ View Order — card-dashboard redesign (2026-06-18) ════════ */
.tt-account__panel:has(.tt-vieworder) { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
.tt-vieworder {
    --vo-ink:#4A3B33; --vo-muted:#9A8B82; --vo-brand:#AA6F63; --vo-brand-dark:#8B5A3C;
    --vo-line:#F0E6DD; --vo-green:#3FA56B; --vo-green-bg:#E9F6EF; --vo-shadow:0 8px 30px rgba(120,80,50,.08);
    display:flex; flex-direction:column; gap:20px; color:var(--vo-ink);
}
.tt-vieworder h2 { font-family:'Riffic','Fredoka',sans-serif; font-size:14px; letter-spacing:1.2px; text-transform:uppercase; color:var(--vo-muted); margin:0 0 16px; }
/* Order Items heading row: title left, order-level Reorder button right. */
.tt-vo-cardhead { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 16px; flex-wrap:wrap; }
.tt-vo-cardhead h2 { margin:0; }
.tt-vo-reorder { display:inline-flex; align-items:center; gap:6px; background:#7c5cfd; color:#fff !important; border-radius:9px; padding:9px 16px; font-family:'Karla',sans-serif; font-size:13.5px; font-weight:700; letter-spacing:.2px; text-decoration:none; line-height:1; box-shadow:0 2px 6px rgba(124,92,253,.32); transition:transform .12s ease, box-shadow .12s ease, background .12s ease; }
.tt-vo-reorder:hover { background:#6c43e0; box-shadow:0 4px 12px rgba(124,92,253,.42); transform:translateY(-1px); color:#fff !important; }
.tt-vo-reorder:active { transform:translateY(0); }
.tt-vo-reorder svg { display:block; }
.tt-vo-card, .tt-vo-hero, .tt-vo-tracker { background:#fff; border-radius:18px; padding:24px 26px; box-shadow:var(--vo-shadow); }
.tt-vo-hero { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.tt-vo-hero__num { font-family:'Riffic','Fredoka',sans-serif; font-size:24px; color:var(--vo-ink); margin:0; }
.tt-vo-hero__date { color:var(--vo-muted); font-size:14px; margin-top:4px; }
.tt-vo-status { display:inline-flex; align-items:center; gap:7px; background:var(--vo-green-bg); color:var(--vo-green); font-weight:700; padding:6px 13px; border-radius:20px; font-size:13px; margin-top:10px; }
.tt-vo-status--cancelled { background:#FBEAEA; color:#C0392B; }
.tt-vo-status__dot { width:8px; height:8px; border-radius:50%; background:currentColor; }
.tt-vo-btn { background:linear-gradient(135deg,var(--vo-brand),var(--vo-brand-dark)); color:#fff; border:none; padding:12px 22px; border-radius:12px; font-weight:700; font-size:14px; cursor:pointer; box-shadow:0 8px 20px rgba(170,111,99,.28); transition:.2s; white-space:nowrap; }
.tt-vo-btn:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(170,111,99,.38); }
.tt-vo-steps { display:flex; justify-content:space-between; position:relative; margin-top:10px; }
.tt-vo-steps::before { content:""; position:absolute; top:16px; left:6%; right:6%; height:3px; background:var(--vo-line); border-radius:2px; }
.tt-vo-barfill { position:absolute; top:16px; left:6%; height:3px; background:var(--vo-brand); border-radius:2px; width:calc(var(--tt-step) / 3 * 88%); transition:width .4s ease; z-index:1; }
.tt-vo-step { position:relative; z-index:2; text-align:center; flex:1; }
.tt-vo-node { width:34px; height:34px; border-radius:50%; background:#fff; border:3px solid var(--vo-line); margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--vo-muted); font-weight:700; }
.tt-vo-step.done .tt-vo-node { background:var(--vo-brand); border-color:var(--vo-brand); color:#fff; }
.tt-vo-step.current .tt-vo-node { border-color:var(--vo-brand); color:var(--vo-brand); animation:ttVoPulse 1.8s infinite; }
@keyframes ttVoPulse { 0%{box-shadow:0 0 0 0 rgba(170,111,99,.4);} 70%{box-shadow:0 0 0 10px rgba(170,111,99,0);} 100%{box-shadow:0 0 0 0 rgba(170,111,99,0);} }
.tt-vo-step small { font-size:12px; color:var(--vo-muted); font-weight:600; }
.tt-vo-step.done small, .tt-vo-step.current small { color:var(--vo-ink); }
.tt-vo-item { display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--vo-line); }
.tt-vo-item:last-child { border-bottom:none; }
.tt-vo-thumb { width:60px; height:60px; border-radius:12px; background:linear-gradient(135deg,#FCEFE6,#F7DCC9); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.tt-vo-thumb img { width:100%; height:100%; object-fit:cover; }
.tt-vo-thumb__ph { font-size:24px; }
.tt-vo-item__info { flex:1; min-width:0; }
.tt-vo-item__info b { font-size:15px; }
.tt-vo-qty { background:var(--vo-green-bg); color:var(--vo-brand-dark); padding:2px 9px; border-radius:8px; font-size:12px; font-weight:700; margin-left:6px; }
.tt-vo-item__meta { font-size:13px; color:var(--vo-muted); margin-top:3px; }
.tt-vo-item__meta p { margin:0; }
.tt-vo-item__link { display:inline-block; margin-top:4px; font-size:12.5px; color:var(--vo-brand); font-weight:700; text-decoration:none; }
.tt-vo-item__price { font-weight:800; font-size:16px; white-space:nowrap; }
.tt-vo-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
.tt-vo-totrow { display:flex; justify-content:space-between; padding:8px 0; font-size:14px; }
.tt-vo-totrow span:first-child { color:var(--vo-muted); }
.tt-vo-totrow--grand { border-top:2px dashed var(--vo-line); margin-top:6px; padding-top:14px; font-size:18px; font-weight:800; }
.tt-vo-totrow--grand span:last-child { color:var(--vo-brand-dark); }
.tt-vo-pay { display:flex; align-items:center; gap:8px; background:#FBF6F1; padding:11px 15px; border-radius:11px; margin-top:12px; font-weight:600; font-size:13.5px; }
.tt-vo-addr { font-size:14px; line-height:1.8; }
.tt-vo-addr__row { display:flex; gap:8px; color:var(--vo-muted); margin-top:4px; }
.tt-vo-addr__lbl { color:var(--vo-brand); font-weight:700; font-size:12px; }

/* Shipping-address self-edit form (customer view) */
.tt-vo-btn--ghost { background:transparent; color:var(--vo-brand); box-shadow:none; border:1.5px solid var(--vo-brand); padding:9px 18px; }
.tt-vo-btn--ghost:hover { background:var(--vo-brand); color:#fff; transform:none; box-shadow:none; }
.tt-vo-shipform { margin-top:6px; }
.tt-vo-shipform__grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tt-vo-shipform__grid--3 { grid-template-columns:1.2fr .9fr .9fr; }
.tt-vo-field { display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--vo-muted); margin-top:12px; }
.tt-vo-field input, .tt-vo-field select {
    font:400 14px/1.3 'Karla', sans-serif; color:#2a2118;
    padding:11px 12px; border:1.5px solid var(--tt-line, #EADBCF); border-radius:10px;
    background:#fff; box-sizing:border-box; width:100%;
}
.tt-vo-field input:focus, .tt-vo-field select:focus {
    outline:none; border-color:var(--vo-brand); box-shadow:0 0 0 3px rgba(170,111,99,.15);
}
.tt-vo-shipform__actions { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.tt-vo-shipform__msg { margin-top:14px; padding:11px 14px; border-radius:10px; font-size:13.5px; font-weight:600; }
.tt-vo-shipform__msg--ok  { background:#e7f3e9; color:#2e7d52; }
.tt-vo-shipform__msg--err { background:#fdecea; color:#b3261e; }
.tt-vo-ship__hint { margin:12px 0 0; font-size:12.5px; color:var(--vo-muted); }
@media (max-width:600px){ .tt-vo-shipform__grid, .tt-vo-shipform__grid--3 { grid-template-columns:1fr; } }

@media (max-width:700px){ .tt-vo-grid{ grid-template-columns:1fr; } .tt-vo-step small{ font-size:10px; } .tt-vo-hero__num{ font-size:21px; } }
@media print {
    /* "Download Invoice" outputs ONLY the clean invoice — not the fancy
       on-screen order dashboard, and not the rest of the site. */
    body * { visibility: hidden !important; }
    .tt-invoice, .tt-invoice * { visibility: visible !important; }
    .tt-invoice { display: block !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    .tt-vieworder { display: none !important; }
    /* Blank trailing pages fix (2026-06-24): the header/footer and the
       <main> padding were only visibility:hidden, so they STILL reserved
       their full height and printed as 2-3 empty pages after the invoice.
       Remove the site chrome from flow and zero the layout padding so the
       only printable height is the invoice itself. */
    .tt-site-header,
    .wp-site-blocks > header,
    .wp-site-blocks > footer,
    body > footer,
    footer.wp-block-group,
    .woocommerce-MyAccount-navigation,
    .tt-site-footer { display: none !important; }
    html, body, .wp-site-blocks, main,
    .woocommerce-MyAccount-content,
    .woocommerce-account .woocommerce {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }
    @page { margin: 16mm; }
}

/* ── Clean invoice (hidden on screen; revealed only by Download Invoice /
   browser print). Plain black-on-white, no gradients, links, or tracker. ── */
.tt-invoice { display: none; color:#1a1a1a; font-family:'Karla',Arial,Helvetica,sans-serif; font-size:13px; line-height:1.5; background:#fff; }
.tt-invoice * { box-sizing: border-box; }
.tt-inv__top { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; border-bottom:2px solid #1a1a1a; padding-bottom:16px; margin-bottom:22px; }
.tt-inv__logoimg { max-height:66px; max-width:240px; width:auto; height:auto; display:block; }
.tt-inv__logo { font-family:'Riffic','Fredoka',sans-serif; font-size:26px; font-weight:700; color:#AA6F63; line-height:1; }
.tt-inv__tag { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#777; margin-top:5px; }
.tt-inv__title { font-size:24px; font-weight:700; letter-spacing:3px; text-align:right; color:#1a1a1a; }
.tt-inv__metatbl { margin-left:auto; margin-top:8px; border-collapse:collapse; font-size:12.5px; }
.tt-inv__metatbl td { padding:1px 0 1px 14px; text-align:right; }
.tt-inv__metatbl td:first-child { color:#888; text-transform:uppercase; font-size:11px; letter-spacing:.5px; }
.tt-inv__parties { display:flex; gap:40px; margin-bottom:22px; }
.tt-inv__party { flex:1; }
.tt-inv__party h3 { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#888; margin:0 0 7px; border-bottom:1px solid #e3e3e3; padding-bottom:4px; }
.tt-inv__party, .tt-inv__party address { font-style:normal; }
.tt-inv__items { width:100%; border-collapse:collapse; margin-bottom:18px; }
.tt-inv__items thead th { text-align:left; font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:#fff; background:#1a1a1a; padding:8px 10px; }
.tt-inv__items tbody td { padding:9px 10px; border-bottom:1px solid #e8e8e8; vertical-align:top; }
.tt-inv__c { text-align:center; }
.tt-inv__r { text-align:right; white-space:nowrap; }
.tt-inv__imeta { font-size:11.5px; color:#888; margin-top:3px; }
.tt-inv__imeta p, .tt-inv__imeta table { margin:0; font-size:11.5px; }
.tt-inv__totals { display:flex; justify-content:flex-end; margin-bottom:20px; }
.tt-inv__totals table { border-collapse:collapse; min-width:270px; }
.tt-inv__totals td { padding:5px 12px; }
.tt-inv__totals td:last-child { text-align:right; white-space:nowrap; }
.tt-inv__totals tr.tt-inv__grand td { border-top:2px solid #1a1a1a; font-weight:700; font-size:15px; padding-top:9px; }
.tt-inv__pay { font-size:12.5px; color:#444; margin-bottom:26px; }
.tt-inv__foot { border-top:1px solid #e3e3e3; padding-top:14px; text-align:center; color:#888; font-size:11.5px; }
.tt-inv__foot div:first-child { font-weight:700; color:#AA6F63; font-size:13px; margin-bottom:3px; }

/* Product reviews — honest empty state (no fake numbers when 0 reviews). */
.tt-rv-head--empty { display:block; }
.tt-rv-empty { text-align:center; padding:40px 24px; width:100%; max-width:560px; margin:6px auto; box-sizing:border-box;
    background:linear-gradient(180deg,#fffaf6,#fdf1ea); border:1px solid #f0e1d6; border-radius:18px; }
.tt-rv-empty__badge { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%;
    background:#fff; border:1px solid #f0d8c8; color:var(--wp--preset--color--accent,#E2A86B);
    box-shadow:0 8px 18px rgba(170,111,99,.12); margin-bottom:4px; }
.tt-rv-empty__badge svg { fill:rgba(226,168,107,.20); }
.tt-rv-empty__title { font-family:'Riffic','Fredoka',sans-serif; font-size:23px; color:var(--wp--preset--color--ink,#3b2c25); margin:12px 0 6px; }
.tt-rv-empty__sub { color:var(--wp--preset--color--ink-soft,#6E5145); max-width:420px; margin:0 auto; font-size:14px; line-height:1.55; }

/* Reviews tabs — "This product" vs "All product reviews" */
.tt-rv-tabs { display:flex; gap:0; border-bottom:1px solid #f0e1d6; margin:0 0 24px; flex-wrap:wrap; }
.tt-rv-tab { appearance:none; background:none; border:0; border-bottom:3px solid transparent; padding:10px 2px; margin-right:26px;
    font-family:inherit; font-size:15px; font-weight:700; color:#9c8a7f; cursor:pointer; }
.tt-rv-tab:hover { color:var(--wp--preset--color--brand,#AA6F63); }
.tt-rv-tab.is-active { color:var(--wp--preset--color--ink,#3b2c25); border-bottom-color:var(--wp--preset--color--brand,#AA6F63); }
.tt-rv-panel[hidden] { display:none !important; }
.tt-rv-allhead { color:#6E5145; font-size:14px; margin:0 0 18px; }
.tt-rv-forproduct { display:block; font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--wp--preset--color--brand,#AA6F63); text-decoration:none; margin:0 0 6px; }
.tt-rv-forproduct:hover { text-decoration:underline; }
/* Retired lines: a note, not a product. Rendered as a <span> so there is
   nothing to click, and set in the muted ink rather than the brand colour
   so it doesn't read as a link that has stopped working. */
.tt-rv-forproduct--retired {
    color: var(--wp--preset--color--ink-soft, #6E5145);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
    cursor: default;
}
.tt-rv-forproduct--retired:hover { text-decoration: none; }

/* Payment step — reassurance subline + trust row (2026-06-18). */
.tt-pay-reassure { color: var(--tt-muted, #7A6A60); font-size: 13px; margin: -2px 0 16px; }
.tt-pay-trust { display: flex; justify-content: center; gap: 24px; margin-top: 16px; color: var(--tt-muted, #7A6A60); font-size: 12.5px; font-weight: 600; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════
   PAYMENT STEP REDESIGN (2026-06-18) — push the real (flat) WC
   gateways toward the approved mockup: clean white method cards with
   a left icon tile + a right custom radio, brand-highlighted
   selection, and a gradient full-width Place Order. Scoped under
   .tt-checkout__card--payment (+ body.woocommerce-checkout) so these
   win over the base .wc_payment_methods rules earlier in the file.
   ════════════════════════════════════════════════════════════════ */
body.woocommerce-checkout .tt-checkout__card--payment ul.wc_payment_methods { gap: 12px !important; }
/* Method row → flex: [icon tile] [name grows] [radio right]; box full width below */
body.woocommerce-checkout .tt-checkout__card--payment ul.wc_payment_methods > li.wc_payment_method{
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 14px !important;
  background: #fff !important; border: 1.5px solid #E6D9CE !important; border-radius: 15px !important;
  padding: 16px 18px !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
body.woocommerce-checkout .tt-checkout__card--payment ul.wc_payment_methods > li.wc_payment_method:hover{ border-color: #C77B5A !important; }
/* left icon tile (consistent line-style icon, like the mockup) */
body.woocommerce-checkout .tt-checkout__card--payment ul.wc_payment_methods > li.wc_payment_method::before{
  content: ''; order: 1; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
  background: #FBF4EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A85F40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
body.woocommerce-checkout .tt-checkout__card--payment ul.wc_payment_methods > li.payment_method_cod::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A85F40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
}
/* name (label) takes the middle */
body.woocommerce-checkout .tt-checkout__card--payment ul.wc_payment_methods > li.wc_payment_method > label{
  order: 2 !important; flex: 1 1 auto !important; min-width: 0 !important;
}
/* custom radio, right-aligned */
body.woocommerce-checkout .tt-checkout__card--payment ul.wc_payment_methods > li.wc_payment_method > input[type="radio"]{
  order: 3 !important; margin: 0 0 0 auto !important;
  appearance: none !important; -webkit-appearance: none !important;
  width: 22px !important; height: 22px !important; flex: 0 0 22px !important;
  border: 2px solid #E0D2C6 !important; border-radius: 50% !important; background: #fff !important;
  position: relative !important; cursor: pointer;
}
body.woocommerce-checkout .tt-checkout__card--payment ul.wc_payment_methods > li.wc_payment_method > input[type="radio"]:checked{ border-color: #C77B5A !important; }
body.woocommerce-checkout .tt-checkout__card--payment ul.wc_payment_methods > li.wc_payment_method > input[type="radio"]:checked::after{
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #C77B5A;
}
/* selected row: brand border + soft shadow */
body.woocommerce-checkout .tt-checkout__card--payment ul.wc_payment_methods > li.wc_payment_method:has(input[name="payment_method"]:checked){
  border-color: #C77B5A !important; box-shadow: 0 4px 18px rgba(199,123,90,.14) !important; background: #fff !important;
}
/* the card-entry / description area sits full width below the row */
body.woocommerce-checkout .tt-checkout__card--payment ul.wc_payment_methods > li.wc_payment_method > .payment_box{
  order: 4 !important; flex-basis: 100% !important; width: 100% !important;
}
/* gradient full-width Place Order (keeps WC's total label inside) */
body.woocommerce-checkout #place_order{
  background: linear-gradient(135deg, #C77B5A, #A85F40) !important;
  box-shadow: 0 10px 24px rgba(199,123,90,.30) !important;
  border-radius: 16px !important;
}
body.woocommerce-checkout #place_order:hover{
  background: linear-gradient(135deg, #bd6f4d, #9c5236) !important;
  transform: translateY(-1px); box-shadow: 0 14px 30px rgba(199,123,90,.40) !important;
}

/* Payment gating — the "4 Payment" step stays VISIBLE but CLOSED until a
   shipping method (or pickup) is chosen: the header shows so customers
   know the step exists, but the gateway UI + Place Order are hidden and a
   hint takes their place. JS removes .is-locked on that selection, which
   reveals the payment body and hides the hint. */
.tt-pay-locked-hint{ display: none; }
.tt-checkout__card--payment.is-locked .tt-checkout__num{
    background: var(--tt-muted, #B9A99D) !important;
}
.tt-checkout__card--payment.is-locked .tt-checkout__payment-body,
.tt-checkout__card--payment.is-locked .tt-pay-reassure,
.tt-checkout__card--payment.is-locked .tt-pay-trust{
    display: none !important;
}
.tt-checkout__card--payment.is-locked .tt-pay-locked-hint{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    padding: 12px 14px;
    background: var(--tt-cream, #FBF4EE);
    border: 1px dashed var(--tt-line, #EADBCF);
    border-radius: 10px;
    color: var(--tt-muted, #7A6A60);
    font-size: 13.5px;
    font-weight: 600;
}
.tt-pay-locked-hint__ico{ font-size: 15px; line-height: 1; }

/* ── Checkout address assist (2026-06-18) — Google Places dropdown +
   Shippo "Verify address" button/result. ── */
.pac-container { z-index: 100000 !important; border-radius: 12px; box-shadow: 0 8px 30px rgba(120,80,50,.18); border: 1px solid #E6D9CE; font-family: 'Karla', sans-serif; margin-top: 4px; }
.pac-item { padding: 8px 12px; cursor: pointer; font-size: 13.5px; }
.pac-item:hover, .pac-item-selected { background: #FBF4EE; }

/* View Order — item actions row (Preview design pill + View product link). */
.tt-vo-item__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 7px; }
.tt-vo-item__actions .button.buildaur_preview { margin: 0 !important; }

/* ============================================================================
   TEDDY TRANSFERS — TOAST NOTIFICATIONS  (added 2026-07-15)
   Behavior: assets/notices.js re-presents WooCommerce notices as toasts.
   The original inline notice is hidden via .tt-toasted-hidden (kept in the
   DOM for any WC script that reads it). Remove this whole block + notices.js
   enqueue to revert.
   ========================================================================== */

/* Original inline WooCommerce notice, once mirrored into a toast. */
.tt-toasted-hidden { display: none !important; }

.tt-toasts {
  /* -- Brand palette (scoped; no --wp--preset--* dependencies) -- */
  --tt-brand:        #AA6F63;
  --tt-accent:       #E89F82;
  --tt-accent-2:     #F0B582;
  --tt-soft-pink:    #F7D2C7;
  --tt-cream:        #F7EBE1;
  --tt-cream-light:  #FFF8F1;
  --tt-white:        #FFFFFF;
  --tt-ink:          #4A3328;
  --tt-ink-soft:     #6E5145;

  /* -- Card surface: cream-light kept opaque enough that even error text
        stays legible over busy content; backdrop blur is a pure enhancement -- */
  --tt-card-bg:      rgba(255, 248, 241, 0.93);
  --tt-card-border:  rgba(74, 51, 40, 0.12);
  --tt-hairline:     inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --tt-shadow:
      0 1px 1px rgba(74, 51, 40, 0.05),
      0 8px 18px -8px rgba(74, 51, 40, 0.20),
      0 26px 44px -26px rgba(170, 111, 99, 0.34);
  --tt-shadow-hover:
      0 2px 3px rgba(74, 51, 40, 0.06),
      0 12px 24px -8px rgba(74, 51, 40, 0.24),
      0 32px 54px -26px rgba(170, 111, 99, 0.40);

  /* -- Links: deepened brand rose, AA on the cream card, underlined by default -- */
  --tt-link:         #9C4F3F;
  --tt-link-hover:   #7E3B2E;

  /* -- Type stacks (title = Riffic, body = Karla) -- */
  --tt-font-title:   'Riffic', 'Fredoka', system-ui, -apple-system, sans-serif;
  --tt-font-body:    'Karla', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* -- Motion / timing (JS may override --tt-duration per toast) -- */
  --tt-duration:     5s;
  --tt-in:           0.42s;
  --tt-out:          0.36s;
  --tt-gap:          12px;

  /* -- Layout: fixed top-right, stacks downward; sits just below the sticky
        header (site-wide convention: var(--tt-header-h, 100px)) -- */
  position: fixed;
  top: calc(var(--tt-header-h, 100px) + 14px);
  right: 18px;
  z-index: 2147483000;             /* clears sticky header + Google Places (100000) + modals */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--tt-gap);
  width: min(384px, calc(100vw - 36px));
  max-height: 100vh;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;            /* container never blocks the page */
  font-family: var(--tt-font-body);
}

/* -- Card -- */
.tt-toasts .tt-toast {
  --tt-icon:      var(--tt-brand);
  --tt-icon-bg:   rgba(170, 111, 99, 0.14);
  --tt-icon-ring: rgba(74, 51, 40, 0.12);
  --tt-title:     var(--tt-ink);
  --tt-bar:       var(--tt-brand);
  --tt-ring:      var(--tt-brand);

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 14px 14px 15px;
  overflow: hidden;                /* clips the progress bar to the rounded corners */
  border-radius: 15px;
  background: var(--tt-card-bg);
  border: 1px solid var(--tt-card-border);
  box-shadow: var(--tt-hairline), var(--tt-shadow);
  color: var(--tt-ink);
  pointer-events: auto;            /* the card itself is interactive */
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  transition: box-shadow 0.2s ease;
  animation: tt-in var(--tt-in) cubic-bezier(0.21, 1.02, 0.73, 1) both;
  will-change: transform, opacity;
}
@media (hover: hover) {
  .tt-toasts .tt-toast:hover { box-shadow: var(--tt-hairline), var(--tt-shadow-hover); }
}
/* Solid-surface fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tt-toasts .tt-toast { --tt-card-bg: rgba(255, 248, 241, 0.99); }
}

/* -- Icon chip -- */
.tt-toasts .tt-toast__icon {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  border-radius: 11px;
  color: var(--tt-icon);
  background: var(--tt-icon-bg);
  box-shadow: inset 0 0 0 1px var(--tt-icon-ring);                       /* fallback */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tt-icon) 25%, transparent);
}
.tt-toasts .tt-toast__icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -- Body -- */
.tt-toasts .tt-toast__body { grid-column: 2; min-width: 0; padding-top: 1px; }
.tt-toasts .tt-toast__title {
  margin: 0 0 3px;
  font-family: var(--tt-font-title);
  font-weight: 500;                /* 500 = heaviest real Riffic weight -> no faux-bold */
  font-size: 14.5px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--tt-title);
}
.tt-toasts .tt-toast__msg {
  font-family: var(--tt-font-body);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.48;
  color: var(--tt-ink-soft);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tt-toasts .tt-toast__msg b,
.tt-toasts .tt-toast__msg strong { color: var(--tt-ink); font-weight: 700; }

.tt-toasts .tt-toast__msg a {
  color: var(--tt-link);
  font-weight: 700;                /* bold = a weight Karla actually ships, no faux-semibold */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(156, 79, 63, 0.5);                        /* #9C4F3F @ 50%, fallback */
  text-decoration-color: color-mix(in srgb, var(--tt-link) 50%, transparent);
  text-underline-offset: 2px;
  border-radius: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.tt-toasts .tt-toast__msg a:hover {
  color: var(--tt-link-hover);
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}
.tt-toasts .tt-toast__msg a:focus-visible {
  outline: 2px solid var(--tt-link);
  outline-offset: 2px;
}

/* Some WooCommerce notices (e.g. the empty "No order has been made yet.
   Browse products" state) ship a full .button CTA inside the message. Left
   alone it inherits the site's giant global button styles and overruns the
   toast grid, colliding with the text + close control. Normalise any such
   button to a compact pill on its own line. */
.tt-toasts .tt-toast__msg .button,
.tt-toasts .tt-toast__msg a.button,
.tt-toasts .tt-toast__msg a.wc-forward,
.tt-toasts .tt-toast__msg .wp-element-button {
  display: inline-block;
  float: none;
  position: static;
  width: auto;
  max-width: 100%;
  margin: 9px 0 1px;
  padding: 7px 15px;
  font-family: var(--tt-font-body);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .01em;
  border: 0;
  border-radius: 999px;
  background: var(--tt-brand, #AA6F63);
  color: #fff !important;
  text-decoration: none;
  box-shadow: none;
  white-space: nowrap;
}
.tt-toasts .tt-toast__msg .button:hover,
.tt-toasts .tt-toast__msg a.button:hover,
.tt-toasts .tt-toast__msg a.wc-forward:hover,
.tt-toasts .tt-toast__msg .wp-element-button:hover {
  filter: brightness(.95);
  color: #fff !important;
  text-decoration: none;
}

/* -- Close button -- */
.tt-toasts .tt-toast__close {
  grid-column: 3;
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin: -3px -3px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--tt-font-body);
  font-size: 19px;
  line-height: 1;
  color: var(--tt-ink-soft);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.tt-toasts .tt-toast__close:hover { color: var(--tt-ink); background: rgba(74, 51, 40, 0.08); }
.tt-toasts .tt-toast__close:active { transform: scale(0.92); }
.tt-toasts .tt-toast__close:focus-visible {
  outline: 2px solid var(--tt-ring);
  outline-offset: 2px;
  color: var(--tt-ink);
}

/* -- Auto-dismiss progress bar -- */
.tt-toasts .tt-toast__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  background: var(--tt-bar);                                            /* solid fallback */
  background: linear-gradient(90deg, var(--tt-bar),
              color-mix(in srgb, var(--tt-bar) 62%, var(--tt-accent-2)));
  opacity: 0.9;
  border-bottom-left-radius: 15px;
  animation: tt-bar var(--tt-duration) linear forwards;
}
/* Pause the countdown while the visitor reads (hover) OR tabs in (focus) */
.tt-toasts .tt-toast:hover .tt-toast__bar,
.tt-toasts .tt-toast:focus-within .tt-toast__bar { animation-play-state: paused; }

/* -- Variants: colour lives in the chip + bar; the icon SHAPE and the title
      text also encode type, so nothing relies on colour alone (WCAG 1.4.1) -- */
.tt-toasts .tt-toast--error {
  --tt-icon:      #C0453F;
  --tt-icon-bg:   #FBEDED;
  --tt-icon-ring: rgba(139, 42, 42, 0.28);
  --tt-title:     #8B2A2A;
  --tt-bar:       #C0453F;
  --tt-ring:      #C0453F;
  border-color: rgba(226, 160, 160, 0.60);
}
.tt-toasts .tt-toast--success {
  --tt-icon:      #2F8A5E;
  --tt-icon-bg:   #E7F3EC;
  --tt-icon-ring: rgba(39, 97, 69, 0.26);
  --tt-title:     #276145;
  --tt-bar:       #2F8A5E;
  --tt-ring:      #2F8A5E;
  border-color: rgba(120, 178, 146, 0.55);
}
.tt-toasts .tt-toast--info {
  --tt-icon:      #C77F3D;
  --tt-icon-bg:   #FBEEDD;
  --tt-icon-ring: rgba(138, 86, 38, 0.26);
  --tt-title:     #8A5626;
  --tt-bar:       #E0A15A;
  --tt-ring:      #C77F3D;
  border-color: rgba(240, 181, 130, 0.60);
}

/* -- Exit (JS adds .tt-toast--out, then removes the node on animationend) -- */
.tt-toasts .tt-toast--out {
  pointer-events: none;
  animation: tt-out var(--tt-out) cubic-bezier(0.4, 0, 1, 1) forwards;
}
.tt-toasts .tt-toast--out .tt-toast__bar { animation: none; }

/* -- Keyframes -- */
@keyframes tt-in {
  from { opacity: 0; transform: translateX(18px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes tt-out {
  0%   { opacity: 1; transform: translateX(0)    scale(1);    max-height: 500px; }
  55%  { opacity: 0; transform: translateX(26px) scale(0.97); max-height: 500px; margin-bottom: 0; }
  100% { opacity: 0; transform: translateX(26px) scale(0.97); max-height: 0;
         margin-bottom: calc(-1 * var(--tt-gap));           /* cancels the flex gap so the stack settles */
         padding-top: 0; padding-bottom: 0; }
}
@keyframes tt-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* -- Responsive: near-full-width across the top on small screens -- */
@media (max-width: 560px) {
  .tt-toasts {
    top: calc(var(--tt-header-h, 100px) + 8px);
    right: 10px;
    left: 10px;
    width: auto;
    align-items: stretch;
  }
  .tt-toasts .tt-toast { border-radius: 14px; }
  .tt-toasts .tt-toast__bar { border-bottom-left-radius: 14px; }
  @keyframes tt-in {
    from { opacity: 0; transform: translateY(-14px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0)     scale(1); }
  }
  @keyframes tt-out {
    0%   { opacity: 1; transform: translateY(0)     scale(1);    max-height: 500px; }
    55%  { opacity: 0; transform: translateY(-14px) scale(0.98); max-height: 500px; margin-bottom: 0; }
    100% { opacity: 0; transform: translateY(-14px) scale(0.98); max-height: 0;
           margin-bottom: calc(-1 * var(--tt-gap)); padding-top: 0; padding-bottom: 0; }
  }
}

/* -- Reduced motion: cross-fade only; freeze the progress bar (no sweep) -- */
@media (prefers-reduced-motion: reduce) {
  .tt-toasts .tt-toast { animation: tt-fade-in 0.2s ease both; }
  .tt-toasts .tt-toast--out { animation: tt-fade-out 0.2s ease forwards; }
  .tt-toasts .tt-toast__bar { animation: none; }   /* static accent rule; JS still times dismissal */
  @keyframes tt-fade-in  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tt-fade-out { from { opacity: 1; } to { opacity: 0; } }
}

/* -- Windows High Contrast / forced colours: keep separation + bar visible -- */
@media (forced-colors: active) {
  .tt-toasts .tt-toast { border: 1px solid CanvasText; }
  .tt-toasts .tt-toast__icon { border: 1px solid CanvasText; }
  .tt-toasts .tt-toast__bar { background: Highlight; }
}

/* Visually-hidden live regions for toast screen-reader announcements */
.tt-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   REWARDS "EARN ON THIS ORDER" BAR  (added 2026-07-15)
   Drawer: sits under the ship bar. Checkout: full-width row under the total.
   Mirrors .tt-ship-bar structure; warm "rewards gold" treatment to read as
   a distinct-but-related progress bar. JS: assets/js/cart-drawer.js /
   PHP: inc/rewards.php (tt_rewards_projection).
   ========================================================================== */
.tt-earn-bar {
  padding: 10px 20px;
  background: linear-gradient(180deg, #FFF8F1, #F7EBE1);
  color: #4A3328;
  border-top: 1px solid rgba(74, 51, 40, .08);
}
.tt-earn-bar__msg {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  margin-bottom: 7px;
  font-weight: 500;
  color: #4A3328;
}
.tt-earn-bar__msg strong { color: #AA6F63; font-weight: 800; }
.tt-earn-bar__icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #F0B582, #E89F82);
  color: #fff;
  box-shadow: 0 1px 3px rgba(170, 111, 99, .30);
}
.tt-earn-bar__icon svg { width: 15px; height: 15px; display: block; }
.tt-earn-bar__cta {
  margin-left: auto;
  color: #AA6F63;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.tt-earn-bar__cta:hover { text-decoration: underline; }
.tt-earn-bar__track {
  position: relative;
  height: 6px;
  background: rgba(170, 111, 99, .18);
  border-radius: 999px;
  overflow: hidden;
}
.tt-earn-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #F0B582, #E89F82);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.tt-earn-bar__fill.is-complete { background: linear-gradient(90deg, #AA6F63, #E89F82); }

/* Checkout variant — full-width row inside the order-review table */
tr.tt-earn-row > td { padding: 0 !important; border: 0 !important; }
.tt-earn-bar--checkout {
  border: 1px solid rgba(170, 111, 99, .20);
  border-radius: 12px;
  margin: 12px 0 4px;
  padding: 12px 16px;
}

/* Earn bar as a contained card inside the drawer foot (under Total, above
   the Members-save line) — not the full-bleed top-region treatment. */
.tt-earn-bar--foot {
  border: 1px solid rgba(170, 111, 99, .20);
  border-radius: 12px;
  padding: 11px 14px;
  margin: 12px 0 0;
  border-top: 1px solid rgba(170, 111, 99, .20);
}
.tt-earn-bar--foot .tt-earn-bar__msg { font-size: 12px; margin-bottom: 6px; }
.tt-earn-bar--foot .tt-earn-bar__icon { width: 24px; height: 24px; min-width: 24px; }
.tt-earn-bar--foot .tt-earn-bar__icon svg { width: 13px; height: 13px; }

/* Order-received "Need to change your shipping address?" edit affordance */
.tt-tyedit { margin-top: 14px; }
.tt-tyedit__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: #AA6F63;
}
.tt-tyedit__toggle:hover { color: #8B5A4E; text-decoration: underline; }
.tt-tyedit__form { margin-top: 12px; max-width: 560px; }

/* ============================================================================
   EXPRESS-PAY (Stripe wallet buttons) LOAD SMOOTHING  (added 2026-07-15)
   Reserve space + shimmer while Stripe resolves Apple/Google/Amazon/Link so
   the buttons don't shove the checkout down as they pop in. Class toggled by
   assets/express-pay.js; released once the buttons settle.
   ========================================================================== */
#wc-stripe-express-checkout-element.tt-express-loading {
  position: relative;
  min-height: 108px;
}
#wc-stripe-express-checkout-element.tt-express-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 12px;
  background: rgba(170, 111, 99, .07);
  background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .6) 50%, transparent 80%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: tt-express-shimmer 1.3s ease-in-out infinite;
}
/* Buttons (Stripe's slots) render above the shimmer; the shimmer only shows
   through the not-yet-filled area. */
#wc-stripe-express-checkout-element.tt-express-loading > * { position: relative; z-index: 1; }
@keyframes tt-express-shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}
@media (prefers-reduced-motion: reduce) {
  #wc-stripe-express-checkout-element.tt-express-loading::before { animation: none; }
}

/* Rewards gift SVG in the account nav + dropdown (no rewards PNG exists;
   reuse the header REWARDS button icon). Sized to sit with the PNG icons;
   inherits currentColor so it flips white on the active nav item. */
.tt-account__menu-ic .tt-account__menu-svg {
  width: 26px;
  height: 26px;
  display: block;
  color: #AA6F63;
}
.tt-account__menu-item.is-active .tt-account__menu-ic .tt-account__menu-svg { color: #fff; }
.tt-account-pop__ic .tt-account-pop__svg {
  width: 20px;
  height: 20px;
  display: block;
  color: #AA6F63;
}

/* ════════════════════════════════════════════════════════════════
   LOST PASSWORD FLOW (WC my-account lost-password endpoint)
   Request form / email-sent confirmation / choose-new-password.
   Reuses the .tt-login card system; only flow-specific bits here.
   ═══════════════════════════════════════════════════════════════ */

/* Success (email sent) pane — centered confirmation state. */
.tt-lostpw-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.tt-lostpw-success h2 { margin-top: 20px; }
.tt-lostpw-check {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #EAF5EE;
    color: #3E8E5A;
    border: 2px solid #BFE3CC;
    font-size: 34px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tt-lostpw-hint {
    font-size: 13px;
    color: var(--lg-muted);
    background: var(--lg-soft);
    border: 1px solid var(--lg-line);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 0 24px;
    max-width: 420px;
}

/* Primary button rendered as an <a> (confirmation "Back to sign in"). */
a.tt-lostpw-btn-link {
    text-decoration: none;
    width: 100%;
    max-width: 320px;
}
a.tt-lostpw-btn-link:hover { color: #FFF8F1; }

/* Make room for the Show/Hide toggle inside password inputs. */
.tt-lostpw .tt-login-input-wrap:has(.tt-login-toggle-pw) input {
    padding-right: 74px;
}

/* Account-nav SVG icon set (2026-07-15): the active Dashboard item uses a
   cream tile (not the brown pill), so its icon must keep the accent color
   instead of the white flip the other active items get. Mirrors the old
   .tt-account__menu-img filter:none exception. */
.tt-account__menu-item--dashboard.is-active .tt-account__menu-ic .tt-account__menu-svg { color: #AA6F63; }

/* ── My Membership: "not a member yet" join card ───────────────────
   Fun empty state for /my-account/my-membership/. Espresso CTA on a
   peach→tan gradient so it can never fall into the brown-on-brown
   trap the old .tt-membership-btn link hit (theme.json paints global
   links brand #AA6F63 — the same brown as that button's background). */
.tt-mem-join {
    text-align: center;
    background: linear-gradient(135deg, var(--tt-peach, #F2D3BC), var(--tt-tan, #E8B89A));
    border-radius: 20px;
    padding: 40px 28px 30px;
    max-width: 560px;
}
.tt-mem-join__bear {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 6px;
    animation: tt-mem-bounce 2.4s ease-in-out infinite;
}
@keyframes tt-mem-bounce {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-8px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) { .tt-mem-join__bear { animation: none; } }
.tt-mem-join__h {
    font-family: 'Riffic', 'Fredoka', sans-serif;
    font-size: 30px;
    color: var(--tt-espresso, #3D2418);
    margin: 0 0 8px;
}
.tt-mem-join__sub {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--tt-espresso, #3D2418);
    max-width: 400px;
    margin: 0 auto 18px;
}
.tt-mem-join__perks {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    gap: 8px;
    justify-content: center;
}
.tt-mem-join__perks li {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--tt-espresso, #3D2418);
    background: rgba(255, 250, 244, .65);
    border-radius: 999px;
    padding: 7px 18px;
}
.tt-mem-join__prices {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.tt-mem-join__chip {
    background: var(--tt-espresso, #3D2418);
    color: #FFFAF4;
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 800;
    font-size: 13px;
}
.tt-mem-join__chip--deal { background: #FFFAF4; color: var(--tt-espresso, #3D2418); }
a.tt-mem-join__cta,
a.tt-mem-join__cta:link,
a.tt-mem-join__cta:visited {
    display: inline-block;
    background: var(--tt-espresso, #3D2418);
    color: #FFFAF4 !important;
    font-family: 'Karla', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 15px 34px;
    border-radius: 999px;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(61, 36, 24, .25);
    transition: transform .15s, box-shadow .15s, background .15s;
}
a.tt-mem-join__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(61, 36, 24, .3);
    background: #000;
    color: #fff !important;
}
.tt-mem-join__wink {
    margin: 14px 0 0;
    font-size: 13px;
    font-style: italic;
    color: rgba(61, 36, 24, .65);
}

/* Readability guard: anywhere .tt-membership-btn renders as an <a>
   (e.g. "My Membership →" on /member/), the theme.json global link
   color (brand #AA6F63) could override its white text — same brown
   as the button background. Force white in every link state. */
a.tt-membership-btn,
a.tt-membership-btn:link,
a.tt-membership-btn:visited,
a.tt-membership-btn:hover { color: #fff !important; }

/* ── Account head: savings badges (member / military / educator /
      tax-exempt / store credit), each with its own icon + color.
      Replaces the single dot-pill .tt-account__tier-pill. ──────── */
.tt-account__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    max-width: 420px;
}
.tt-account__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    color: #fff;
    background: var(--tt-espresso, #3D2418);
    white-space: nowrap;
}
.tt-account__badge-ic { font-size: 13px; line-height: 1; }
.tt-account__badge--member   { background: var(--tt-espresso, #3D2418); }
.tt-account__badge--military { background: #1f3a5f; }
.tt-account__badge--educator { background: #6c43e0; }
.tt-account__badge--resale   { background: #0f766e; }
.tt-account__badge--credit   { background: #a16207; }
@media (max-width: 700px) {
    .tt-account__badges { justify-content: flex-start; max-width: none; }
}

/* ── Store Credit tab ────────────────────────────────────────────── */
.tt-credit-hero {
    text-align: center;
    background: var(--tt-cream, #F7EBE1);
    border: 1px dashed var(--tt-line, rgba(139, 90, 60, .25));
    border-radius: 18px;
    padding: 30px 24px;
    max-width: 460px;
}
.tt-credit-hero--has {
    background: linear-gradient(135deg, var(--tt-peach, #F2D3BC), var(--tt-tan, #E8B89A));
    border: 0;
}
.tt-credit-hero__label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--tt-muted, #8a6a5b);
}
.tt-credit-hero--has .tt-credit-hero__label { color: rgba(61, 36, 24, .7); }
.tt-credit-hero__amt {
    font-family: 'Riffic', 'Fredoka', sans-serif;
    font-size: 44px;
    line-height: 1.15;
    color: var(--tt-espresso, #3D2418);
    margin: 4px 0 6px;
}
.tt-credit-hero__sub {
    margin: 0 auto;
    max-width: 340px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tt-espresso, #3D2418);
}
.tt-credit-h3 {
    font-family: 'Riffic', 'Fredoka', sans-serif;
    font-size: 19px;
    margin: 26px 0 10px;
    color: var(--tt-espresso, #3D2418);
}
.tt-credit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.tt-credit-table th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--tt-muted, #8a6a5b);
    padding: 8px 10px;
    border-bottom: 2px solid var(--tt-line, rgba(139, 90, 60, .15));
}
.tt-credit-table td {
    padding: 10px;
    border-bottom: 1px solid var(--tt-line, rgba(139, 90, 60, .12));
    color: var(--tt-espresso, #3D2418);
}
.tt-credit-plus  { color: #15803d; font-weight: 800; }
.tt-credit-minus { color: #b91c1c; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════════
   Wholesale UV DTF Cupwraps — 100-pack configurator (inc/cupwrap-wholesale.php)
   ═══════════════════════════════════════════════════════════════════ */
/* --- Buy box, sold as a landing page rather than a stock listing --- */
.tt-cw-launch { margin: 8px 0 4px; }
.tt-cw-launch__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--brand, #AA6F63); margin: 0 0 6px; }
.tt-cw-launch__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tt-cw-launch__amt { font-size: 40px; font-weight: 800; line-height: 1; color: var(--wp--preset--color--brand-dark, #000); }
.tt-cw-launch__amt .woocommerce-Price-amount { font-size: inherit; }
.tt-cw-launch__per { font-size: 14px; font-weight: 700; color: #2e9e5b; background: rgba(46,158,91,.1); border-radius: 999px; padding: 3px 10px; }
.tt-cw-launch__unit { font-size: 13px; color: var(--wp--preset--color--ink-soft, #6E5145); margin: 6px 0 0; }
.tt-cw-props { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.tt-cw-props li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--wp--preset--color--ink, #4A3328); }
.tt-cw-props li span { font-size: 15px; }
.tt-cw-launch__note { font-size: 12.5px; color: var(--wp--preset--color--ink-soft, #6E5145); margin: 10px 0 16px; }
.tt-cw-open { cursor: pointer; width: 100%; text-align: center; font-size: 16px !important; padding: 15px 22px !important; }

/* --- Sales sections below the buy box --- */
.tt-cw-sales { max-width: 1100px; margin: 40px auto 10px; padding: 0 20px; }
.tt-cw-sales__band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: var(--wp--preset--color--cream-light, #FFF8F1); border: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); border-radius: 16px; padding: 18px; text-align: center; }
.tt-cw-sales__band div { display: flex; flex-direction: column; gap: 2px; }
.tt-cw-sales__band strong { font-size: 22px; color: var(--wp--preset--color--brand, #AA6F63); }
.tt-cw-sales__band span { font-size: 12px; color: var(--wp--preset--color--ink-soft, #6E5145); }
.tt-cw-sales__h { margin: 36px 0 16px; font-size: 26px; }
.tt-cw-sales__p { font-size: 15px; line-height: 1.65; color: var(--wp--preset--color--ink, #4A3328); max-width: 780px; }
.tt-cw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tt-cw-step { background: #fff; border: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); border-radius: 14px; padding: 18px; }
.tt-cw-step__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--wp--preset--color--brand, #AA6F63); color: #fff; font-weight: 800; font-size: 14px; }
.tt-cw-step h3 { margin: 10px 0 6px; font-size: 17px; }
.tt-cw-step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--ink-soft, #6E5145); }
@media (max-width: 782px) {
    .tt-cw-sales__band { grid-template-columns: 1fr 1fr; }
    .tt-cw-steps { grid-template-columns: 1fr; }
}

body.tt-cw-lock { overflow: hidden; }
.tt-cw-modal[hidden] { display: none; }
.tt-cw-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tt-cw-modal__overlay { position: absolute; inset: 0; background: rgba(40,26,20,.55); }
.tt-cw-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 940px; max-height: 92vh; display: flex; flex-direction: column;
    background: var(--wp--preset--color--cream-light, #FFF8F1); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.tt-cw-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); }
.tt-cw-modal__title { margin: 0; font-size: 22px; }
.tt-cw-modal__sub { margin: 4px 0 0; font-size: 13px; color: var(--wp--preset--color--ink-soft, #6E5145); }
.tt-cw-modal__close { border: 0; background: transparent; font-size: 30px; line-height: 1; cursor: pointer; color: var(--wp--preset--color--ink, #4A3328); }

.tt-cw-uploads { padding: 14px 22px; background: #fff; border-bottom: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); }
.tt-cw-uploads__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tt-cw-upload-add { border: 1px dashed var(--wp--preset--color--brand, #AA6F63); background: transparent; color: var(--wp--preset--color--brand, #AA6F63); font-weight: 700; border-radius: 10px; padding: 6px 12px; cursor: pointer; }
.tt-cw-upload-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.tt-cw-upload-rows:empty { margin-top: 0; }
.tt-cw-upload-row { display: flex; align-items: center; gap: 12px; background: var(--wp--preset--color--cream-light, #FFF8F1); border: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); border-radius: 12px; padding: 8px 10px; }
.tt-cw-upload-row.is-invalid { border-color: #d9534f; box-shadow: 0 0 0 2px rgba(217,83,79,.2); }
.tt-cw-upload-row .tt-cw-file { font-size: 12px; max-width: 190px; }
.tt-cw-upload-del { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: #b06; flex: 0 0 auto; }
.tt-cw-uploads__hint { margin: 8px 0 0; font-size: 12px; color: var(--wp--preset--color--ink-soft, #6E5145); }
/* upload preview + print-quality readout */
.tt-cw-up-preview { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 9px; overflow: hidden; background: #fff; border: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); display: grid; place-items: center; }
.tt-cw-up-preview img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.tt-cw-up-ph { font-size: 11px; font-weight: 800; color: var(--wp--preset--color--brand, #AA6F63); }
.tt-cw-up-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tt-cw-up-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tt-cw-up-name { font-size: 12.5px; font-weight: 700; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wp--preset--color--ink, #4A3328); }
.tt-cw-up-size, .tt-cw-up-dims { font-size: 11px; color: var(--wp--preset--color--ink-soft, #6E5145); }
.tt-cw-dpi { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.tt-cw-dpi--great { background: rgba(46,158,91,.14); color: #1f7a45; }
.tt-cw-dpi--ok    { background: rgba(170,111,99,.14); color: #8a5449; }
.tt-cw-dpi--low   { background: rgba(240,150,30,.16); color: #9a5c00; }
.tt-cw-dpi--bad   { background: rgba(217,83,79,.14); color: #b02a26; }

/* Filter bar — search + holiday chips */
.tt-cw-filters { padding: 12px 22px; background: #fff; border-bottom: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); }
.tt-cw-search { width: 100%; border: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); border-radius: 10px; padding: 9px 12px; font-size: 14px; background: var(--wp--preset--color--cream-light, #FFF8F1); }
.tt-cw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tt-cw-chip { border: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); background: #fff; color: var(--wp--preset--color--ink, #4A3328); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.tt-cw-chip span { font-weight: 800; font-size: 11px; opacity: .55; }
.tt-cw-chip.is-on { background: var(--wp--preset--color--brand, #AA6F63); border-color: var(--wp--preset--color--brand, #AA6F63); color: #fff; }
.tt-cw-chip.is-on span { opacity: .8; }

/* Design grid — 4 across on desktop, stepping down on smaller screens. */
.tt-cw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px 22px; overflow-y: auto; align-content: start; }
.tt-cw-tile[hidden] { display: none; }
@media (max-width: 900px) { .tt-cw-grid { grid-template-columns: repeat(3, 1fr); } }

/* Zoom-to-preview button on each tile */
.tt-cw-tile__img { position: relative; }
.tt-cw-zoom { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 8px; border: 0; cursor: pointer;
    background: rgba(255,255,255,.9); color: var(--wp--preset--color--brand, #AA6F63); font-size: 13px; line-height: 1;
    display: grid; place-items: center; opacity: 0; transition: opacity .15s ease; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.tt-cw-tile:hover .tt-cw-zoom, .tt-cw-zoom:focus { opacity: 1; }
@media (hover: none) { .tt-cw-zoom { opacity: 1; } }

/* Lightbox — closer look, scoped inside the modal */
.tt-cw-lb[hidden] { display: none; }
.tt-cw-lb { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; }
.tt-cw-lb__overlay { position: absolute; inset: 0; background: rgba(40,26,20,.75); }
.tt-cw-lb__fig { position: relative; z-index: 1; margin: 0; background: #fff; border-radius: 14px; padding: 12px; max-width: min(560px, 92%); max-height: 84%; display: flex; flex-direction: column; gap: 8px; }
.tt-cw-lb__fig img { max-width: 100%; max-height: 62vh; object-fit: contain; border-radius: 8px; background: var(--wp--preset--color--cream, #F7EBE1); }
.tt-cw-lb__fig figcaption { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--wp--preset--color--ink, #4A3328); }
.tt-cw-lb__close { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); font-size: 20px; line-height: 1; cursor: pointer; color: var(--wp--preset--color--ink, #4A3328); }
.tt-cw-tile { background: #fff; border: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.tt-cw-tile.is-selected { border-color: var(--wp--preset--color--brand, #AA6F63); box-shadow: 0 0 0 2px rgba(170,111,99,.25); }
.tt-cw-tile.is-invalid { border-color: #d9534f; box-shadow: 0 0 0 2px rgba(217,83,79,.25); }
.tt-cw-tile__img { aspect-ratio: 1/1; background: var(--wp--preset--color--cream, #F7EBE1); border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.tt-cw-tile__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.tt-cw-tile__name { font-size: 12px; line-height: 1.3; font-weight: 600; color: var(--wp--preset--color--ink, #4A3328); min-height: 2.6em; }
.tt-cw-tile__warn { font-size: 11px; font-weight: 700; color: #d9534f; }

.tt-cw-qty { display: flex; align-items: center; border: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); border-radius: 9px; overflow: hidden; }
.tt-cw-qty__btn { border: 0; background: var(--wp--preset--color--cream, #F7EBE1); width: 30px; height: 34px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--wp--preset--color--brand-dark, #000); }
.tt-cw-qty__val { flex: 1; width: 100%; min-width: 0; border: 0; text-align: center; font-size: 14px; font-weight: 700; -moz-appearance: textfield; }
.tt-cw-qty__val::-webkit-outer-spin-button, .tt-cw-qty__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tt-cw-qty--upload { width: 120px; flex: 0 0 auto; }

.tt-cw-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); background: #fff; flex-wrap: wrap; }
.tt-cw-count { font-size: 15px; font-weight: 700; color: var(--wp--preset--color--ink, #4A3328); }
.tt-cw-count__num { font-size: 22px; color: var(--wp--preset--color--brand, #AA6F63); }
.tt-cw-count.is-complete .tt-cw-count__num { color: #2e9e5b; }
.tt-cw-count.is-over .tt-cw-count__num { color: #d9534f; }
.tt-cw-count__msg { font-weight: 500; font-size: 13px; color: var(--wp--preset--color--ink-soft, #6E5145); margin-left: 4px; }
.tt-cw-add { cursor: pointer; }
.tt-cw-add[disabled] { opacity: .45; cursor: not-allowed; }
.tt-cw-add.is-loading { opacity: .7; cursor: wait; }
.tt-cw-empty { grid-column: 1/-1; padding: 30px; text-align: center; color: var(--wp--preset--color--ink-soft, #6E5145); }

@media (max-width: 600px) {
    .tt-cw-modal { padding: 0; }
    .tt-cw-modal__dialog { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
    .tt-cw-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
    .tt-cw-props { grid-template-columns: 1fr; }
    .tt-cw-upload-row { flex-wrap: wrap; }
    .tt-cw-upload-row .tt-cw-file { max-width: 100%; }
}
/* Fixed-qty label for the wholesale cupwrap bundle line (no stepper). */
.tt-qty--fixed { font-size: 12px; font-weight: 700; color: var(--wp--preset--color--ink-soft, #6E5145); white-space: nowrap; align-self: center; }

/* ═══════════════════════════════════════════════════════════════════
   Wholesale cupwrap SALES PAGE (tt_cupwrap_render_salespage)
   Landing-page treatment for product 2394. Uses the theme's own fonts
   (Display=Riffic/Fredoka, Body=Karla) so it matches the site without
   pulling external webfonts.
   ═══════════════════════════════════════════════════════════════════ */
/* Teddy brand brown — NOT the mockup's darker #7d463b. Both tokens map to
   the theme's own brand colour so the page matches the rest of the site. */
.tt-cwsp { --cw-brown: var(--wp--preset--color--brand, #AA6F63);
    --cw-brown-d: var(--wp--preset--color--brand, #AA6F63);
    --cw-cream:#fdf6f0; --cw-cream2:#f7e9df;
    --cw-ink: var(--wp--preset--color--ink, #4A3328); --cw-muted:#8a7169;
    --cw-accent:#e08a6f; --cw-green:#3aa17e; }
/* <main> is a CONSTRAINED layout: it clamps children to the theme's 780px
   contentSize with `margin-left/right: auto !important`. The .alignfull class
   on the container (see tt_cupwrap_render_salespage) opts out of that rule so
   the bands can run edge to edge. This reset is the belt-and-braces half —
   higher specificity than `.is-layout-constrained > :where(...)` so it wins
   even if another rule re-clamps. No 100vw here on purpose: 100vw includes the
   scrollbar and would force a horizontal scrollbar. */
body.tt-cwsp-page .tt-cwsp {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto;
}
/* Background bands are already full-width inside the bled root — re-applying
   the breakout here would double it and push them off-screen. */
.tt-cwsp-bleed { margin-left: 0; margin-right: 0; }
.tt-cwsp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.tt-cwsp h1, .tt-cwsp h2, .tt-cwsp h3, .tt-cwsp .tt-cwsp-price, .tt-cwsp .n { font-family: var(--wp--preset--font-family--display, 'Riffic', 'Fredoka', system-ui, sans-serif); }
.tt-cwsp-sec { padding: 70px 0; }

/* hero */
.tt-cwsp-hero { background: linear-gradient(160deg,#fdf6f0 0%,#f7e3d8 100%); padding: 40px 0 60px; overflow: hidden; }
.tt-cwsp-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.tt-cwsp-badge { display: inline-block; background: #fff; border: 2px solid var(--cw-cream2); color: var(--cw-brown); font-weight: 800; font-size: 12px; letter-spacing: 1.5px; padding: 7px 16px; border-radius: 30px; text-transform: uppercase; box-shadow: 0 6px 16px rgba(156,95,82,.08); }
.tt-cwsp-h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; margin: 18px 0 14px; color: var(--cw-brown-d); }
.tt-cwsp-h1 span { color: var(--cw-accent); }
.tt-cwsp-sub { font-size: 19px; color: var(--cw-muted); max-width: 520px; font-weight: 600; }
.tt-cwsp-pricerow { display: flex; align-items: flex-end; gap: 14px; margin: 26px 0 6px; flex-wrap: wrap; }
.tt-cwsp-pricerow--center { justify-content: center; }
.tt-cwsp-price { font-weight: 700; font-size: 56px; color: var(--cw-brown-d); line-height: 1; }
.tt-cwsp-price--light { color: #fff; }
.tt-cwsp-perwrap { background: #e5f4ee; color: var(--cw-green); font-weight: 800; padding: 6px 14px; border-radius: 20px; font-size: 16px; margin-bottom: 8px; }
.tt-cwsp-value { font-size: 14px; color: var(--cw-muted); font-weight: 700; margin: 4px 0 0; }
.tt-cwsp-value strong { color: var(--cw-green); }
.tt-cwsp-meta { color: var(--cw-muted); font-weight: 700; margin: 10px 0 22px; font-size: 14px; }
.tt-cwsp-cta { display: inline-block; background: var(--cw-brown, #AA6F63); color: #fff; text-decoration: none; font-family: var(--wp--preset--font-family--display, 'Riffic','Fredoka',sans-serif); font-weight: 600; font-size: 20px; padding: 18px 36px; border-radius: 16px; box-shadow: 0 12px 26px rgba(170,111,99,.35); border: none; cursor: pointer; transition: transform .12s; text-transform: uppercase; letter-spacing: 1px; }
.tt-cwsp-cta:hover { transform: translateY(-2px); }
.tt-cwsp-cta--light { background: #fff; color: var(--cw-brown-d); }
.tt-cwsp-micro { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; color: var(--cw-muted); font-weight: 700; font-size: 14px; }
.tt-cwsp-micro b { color: var(--cw-green); }
.tt-cwsp-heroart { position: relative; }
/* No card treatment — the product shot sits straight on the hero gradient. */
.tt-cwsp-imgcard { background: transparent; border-radius: 0; padding: 0; box-shadow: none; transform: none; }
.tt-cwsp-imgcard img { width: 100%; border-radius: 0; display: block; background: transparent; }
.tt-cwsp-floaty { position: absolute; background: #fff; border-radius: 16px; padding: 10px 16px; font-weight: 800; box-shadow: 0 12px 26px rgba(122,70,59,.18); font-size: 14px; }
.tt-cwsp-floaty--1 { top: 24px; right: 10px; color: var(--cw-green); }
.tt-cwsp-floaty--2 { bottom: 18px; left: -6px; color: var(--cw-brown); }

/* stat strip */
.tt-cwsp-strip { background: var(--cw-brown-d); color: #fff; padding: 22px 0; }
.tt-cwsp-strip__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; text-align: center; }
.tt-cwsp-strip .n { font-weight: 700; font-size: 32px; line-height: 1; }
.tt-cwsp-strip .l { font-size: 12px; opacity: .85; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

/* shared section bits */
.tt-cwsp-eyebrow { text-align: center; color: var(--cw-accent); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; }
.tt-cwsp-eyebrow--left { text-align: left; }
.tt-cwsp-eyebrow--light { color: #f0c9b8; }
.tt-cwsp-h2 { text-align: center; font-size: clamp(26px, 3.2vw, 42px); color: var(--cw-brown-d); margin: 8px 0 10px; }
.tt-cwsp-h2--left { text-align: left; }
.tt-cwsp-h2--light { color: #fff; }
.tt-cwsp-lead { text-align: center; color: var(--cw-muted); font-size: 18px; max-width: 640px; margin: 0 auto 46px; font-weight: 600; }
.tt-cwsp-lead--light { color: rgba(255,255,255,.9); }

/* steps */
.tt-cwsp-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.tt-cwsp-step { background: #fff; border-radius: 22px; padding: 34px 28px; box-shadow: 0 14px 30px rgba(122,70,59,.08); border: 1px solid #f1e2d8; position: relative; }
.tt-cwsp-step .num { position: absolute; top: -18px; left: 28px; width: 44px; height: 44px; background: var(--cw-brown, #AA6F63); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; box-shadow: 0 8px 16px rgba(170,111,99,.3); }
.tt-cwsp-step h3 { font-size: 21px; color: var(--cw-brown-d); margin: 12px 0 8px; }
.tt-cwsp-step p { color: var(--cw-muted); font-weight: 600; margin: 0; }

/* benefits */
.tt-cwsp-benefits { background: linear-gradient(160deg,#f7e9df,#fdf6f0); }
.tt-cwsp-bgrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; max-width: 900px; margin: 0 auto; }
.tt-cwsp-bcard { display: flex; gap: 16px; background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 10px 24px rgba(122,70,59,.07); }
.tt-cwsp-bcard .ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; background: var(--cw-cream2); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.tt-cwsp-bcard h3 { margin: 0 0 4px; font-size: 19px; color: var(--cw-brown-d); }
.tt-cwsp-bcard p { margin: 0; color: var(--cw-muted); font-weight: 600; }

/* split */
.tt-cwsp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
/* Bare image — no card, shadow or rounding. */
.tt-cwsp-split img { width: 100%; border-radius: 0; box-shadow: none; background: transparent; display: block; }
.tt-cwsp-check { list-style: none; padding: 0; margin: 0; }
.tt-cwsp-check li { padding: 10px 0 10px 36px; position: relative; font-weight: 700; font-size: 16px; color: var(--cw-ink); }
.tt-cwsp-check li:before { content: "✓"; position: absolute; left: 0; top: 8px; width: 24px; height: 24px; background: var(--cw-green); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; }

/* final + faq */
.tt-cwsp-final { background: var(--cw-brown-d); color: #fff; text-align: center; padding: 76px 0; }
.tt-cwsp-guarantee { margin-top: 22px; font-weight: 700; opacity: .85; }
.tt-cwsp-faq { max-width: 760px; margin: 40px auto 0; }
/* Brown outline on each Q&A card. These sit on a cream section, and a white
   card with only a 6%-opacity shadow had almost no edge against it — the
   questions read as one undifferentiated block. The border does the
   separating; the shadow is lifted slightly so the two don't fight. */
.tt-cwsp-qa { background: #fff; border: 2px solid var(--cw-brown, #AA6F63); border-radius: 16px; padding: 22px 26px; margin-bottom: 14px; box-shadow: 0 8px 20px rgba(122,70,59,.08); }
.tt-cwsp-qa h3 { margin: 0 0 6px; color: var(--cw-brown-d); font-size: 18px; }
.tt-cwsp-qa p { margin: 0; color: var(--cw-muted); font-weight: 600; }

@media (max-width: 860px) {
    .tt-cwsp-hero__grid, .tt-cwsp-split { grid-template-columns: 1fr; gap: 30px; }
    /* Hero stacks IMAGE-first on mobile/tablet (copy div is authored first). */
    .tt-cwsp-heroart { order: -1; }
    .tt-cwsp-steps { grid-template-columns: 1fr; }
    .tt-cwsp-strip__grid { grid-template-columns: 1fr 1fr; }
    .tt-cwsp-bgrid { grid-template-columns: 1fr; }
    .tt-cwsp-cta { width: 100%; }
}
/* Sales page starts at the hero — no breadcrumb trail. The theme's crumb
   (product-accordions.php) is an anonymous closure on
   woocommerce_before_single_product, so it can't be cleanly unhooked;
   the tt-cwsp-page body class scopes this to the wholesale product only. */
body.tt-cwsp-page .tt-product-breadcrumb { display: none; }

/* ── Wholesale cupwrap SALES PAGE: escape the product-page container ──
   The single-product page is wrapped in a centred 1240px box with clamp()
   side padding (see body.single-product .wp-site-blocks > .wp-block-group
   .woocommerce.product, ~line 2189). A full-bleed sales page can never
   reach the window edge from inside that box, and .tt-cwsp was ALSO still
   being clamped to the 780px contentSize on top of it. Neutralise both —
   scoped to this one page via the tt-cwsp-page body class. */
body.tt-cwsp-page .wp-site-blocks > .wp-block-group.woocommerce.product {
    max-width: none !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.tt-cwsp-page main.wp-block-group,
body.tt-cwsp-page main.wp-block-group.is-layout-constrained {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Beat the constrained layout's contentSize clamp on our container. */
body.tt-cwsp-page main .tt-cwsp,
body.tt-cwsp-page .tt-cwsp {
    max-width: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* The reviews block shares that wrapper — give it back its own inset so it
   doesn't run to the window edge now that the wrapper padding is gone. */
body.tt-cwsp-page .tt-product-reviews {
    max-width: 1240px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
}
/* Close the white gap between the nav and the hero. <main> carries a 24px
   block-gap margin-top which collapses through the (padding-less) product
   wrapper and pushes the whole sales page down. The theme's global flush
   rule only targets `body > .wp-site-blocks > main`, and here main is nested
   inside .wp-block-group.woocommerce.product, so it never matched. */
body.tt-cwsp-page .wp-block-group.woocommerce.product > main,
body.tt-cwsp-page main > .tt-cwsp,
body.tt-cwsp-page .tt-cwsp,
body.tt-cwsp-page .tt-cwsp > .tt-cwsp-hero {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/* ── Slide-out cart: bundle line polish ──────────────────────────────
   1) WooCommerce core styles <dl> inside cart lists with
      `border-left: 2px solid rgba(0,0,0,.1); padding-left: 1em`
      (.woocommerce ul.cart_list li dl). That renders as a stray vertical
      rule before "Your pack:". The theme zeroes the dl's margin/padding
      but never the border, so kill it here.
   2) .tt-qty--fixed inherits the .tt-qty pill (border + bg + radius) but
      had no side padding, so "100 pcs" sat flush against the pill edge. */
.tt-cart-drawer .tt-item-meta dl,
.tt-cart-drawer .tt-item-meta dl.variation,
.tt-cart-drawer .woocommerce-mini-cart-item dl.variation {
    border-left: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.tt-qty--fixed { padding: 0 12px; }

/* Reviews empty-state: was capped at 560px so the "No reviews yet" card sat
   noticeably narrower than the tab divider rule above it. Let it fill the
   panel so its edges line up with that line. */
.tt-rv-empty { max-width: none !important; }
.tt-rv-empty__sub { max-width: 520px; }

/* ── Sales-page tweaks ─────────────────────────────────────────────── */
/* "EST:" qualifier on the ~9.4x4 wrap size (it's a nominal size, art varies). */
.tt-cwsp-est { font-style: normal; font-size: 0.5em; font-weight: 800; opacity: .7; letter-spacing: .08em; vertical-align: middle; }

/* Checklist ticks: the circles were absolutely positioned at a fixed top,
   so they drifted out of line with the text (and would miss entirely on a
   wrapped line). Flex aligns each tick to its first text line instead. */
.tt-cwsp-check li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; position: static; }
.tt-cwsp-check li:before {
    position: static;
    flex: 0 0 24px;
    width: 24px; height: 24px;
    margin-top: 1px;   /* optical centre against the cap-height of line 1 */
}

/* Reviews empty state: `.tt-rv-head--empty { display:block }` (0,1,0) was
   losing to `body.single-product .tt-rv-head { display:grid;
   grid-template-columns:320px 1fr }` (0,2,1), so on product pages the empty
   card was dropped into the 320px first column — a small square in the
   corner instead of a full-width panel. Match the specificity to beat it. */
body.single-product .tt-rv-head--empty {
    display: block !important;
    grid-template-columns: none !important;
}
body.single-product .tt-rv-head--empty .tt-rv-empty {
    max-width: none !important;
    width: 100%;
}
/* Load-more button under a review list. */
.tt-rv-loadmore { display:block; margin:18px auto 4px; padding:11px 22px; cursor:pointer;
    background:#fff; color:var(--wp--preset--color--brand,#AA6F63);
    border:1px solid var(--wp--preset--color--soft-pink,#F7D2C7); border-radius:999px;
    font-weight:800; font-size:13.5px; transition:background .15s ease; }
.tt-rv-loadmore:hover { background:var(--wp--preset--color--cream-light,#FFF8F1); }
.tt-rv-loadmore[hidden] { display:none; }
/* Star rating by the buy box acts as a jump-to-reviews control. */
.tt-rating-jump { cursor: pointer; }
.tt-rating-jump:hover .woocommerce-review-link,
.tt-rating-jump:hover .wc-block-components-product-rating__reviews_count { text-decoration: underline; }
.tt-rating-jump:focus-visible { outline: 2px solid var(--wp--preset--color--brand, #AA6F63); outline-offset: 3px; border-radius: 6px; }
/* Fallback if any #reviews anchor ever resolves to our section. */
.tt-product-reviews { scroll-margin-top: 130px; }
/* Wholesale entry in the UV DTF mega menu — icon tile instead of a photo. */
.tt-mega-link__ico { display: flex !important; align-items: center; justify-content: center;
    background: var(--wp--preset--color--cream, #F7EBE1); color: var(--wp--preset--color--brand, #AA6F63);
    border-radius: 10px; }
.tt-mega-link__ico svg { width: 22px; height: 22px; }
.tt-mega-tag { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    background: var(--wp--preset--color--brand, #AA6F63); color: #fff; border-radius: 999px; padding: 2px 7px; margin-left: 6px;
    vertical-align: middle; }

/* ═══════════════════════════════════════════════════════════════════
   Custom Coozie builder (inc/coozie-builder.php)
   ═══════════════════════════════════════════════════════════════════ */
.tt-cz { --cz-trim: #ccc; margin: 6px 0 0; }
.tt-cz__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.tt-cz__h { margin: 0 0 18px; font-size: 24px; color: var(--wp--preset--color--brand, #AA6F63); }

/* --- mockup stage: base -> art -> overlay --- */
.tt-cz-stage { position: relative; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden;
    background: var(--wp--preset--color--cream-light, #FFF8F1);
    border: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); }
.tt-cz-stage__base, .tt-cz-stage__over { position: absolute; inset: 0; background-size: contain;
    background-position: center; background-repeat: no-repeat; }
.tt-cz-stage__base.is-placeholder { border-radius: 14px; opacity: .28; }
.tt-cz-stage__art { position: absolute; background-size: cover; background-position: center;
    border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.10); }
.tt-cz-stage__over { pointer-events: none; }
.tt-cz-stage__empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
    color: var(--wp--preset--color--ink-soft, #6E5145); gap: 6px; }
.tt-cz-stage__empty span { font-size: 34px; }
.tt-cz-stage__empty p { margin: 0; font-size: 13px; }
.tt-cz-stage__note { margin: 8px 0 0; font-size: 11.5px; color: var(--wp--preset--color--ink-soft, #6E5145); text-align: center; }

/* --- controls --- */
.tt-cz-field { margin-bottom: 20px; }
.tt-cz-label { display: block; font-weight: 800; font-size: 13px; margin-bottom: 8px;
    color: var(--wp--preset--color--ink, #4A3328); }
.tt-cz-label em { font-style: normal; font-weight: 600; color: var(--wp--preset--color--ink-soft, #6E5145); }
.tt-cz-file { font-size: 13px; width: 100%; }
.tt-cz-upmeta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }

/* ── Upload dropzone (replaces the raw <input type=file>) ── */
.tt-cz-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; text-align: center; cursor: pointer;
    padding: 22px 16px; border-radius: 14px;
    border: 2px dashed var(--wp--preset--color--soft-pink, #F1B7A8);
    background: var(--wp--preset--color--cream-light, #FFF8F1);
    color: var(--wp--preset--color--ink, #4A3328);
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.tt-cz-drop:hover { border-color: var(--wp--preset--color--brand, #AA6F63); background: #fff; }
.tt-cz-drop.is-over {
    border-color: var(--wp--preset--color--brand, #AA6F63);
    background: #fff; transform: scale(1.01);
    box-shadow: 0 4px 18px rgba(170, 111, 99, .18);
}
.tt-cz-drop.is-filled { border-style: solid; border-color: var(--wp--preset--color--brand, #AA6F63); background: #fff; }
.tt-cz-drop__icon { color: var(--wp--preset--color--brand, #AA6F63); line-height: 0; }
.tt-cz-drop.is-filled .tt-cz-drop__icon { color: #2E7D32; }
.tt-cz-drop__main { font: 800 14px/1.2 var(--wp--preset--font-family--body); }
.tt-cz-drop__or { font-weight: 600; color: var(--wp--preset--color--ink-soft, #6E5145); }
.tt-cz-drop__sub { font-size: 11.5px; color: var(--wp--preset--color--ink-soft, #6E5145); }

/* ── Design library picker ── */
.tt-cz-or { display:flex; align-items:center; gap:10px; margin:12px 0; color:var(--wp--preset--color--ink-soft,#6E5145); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.tt-cz-or::before, .tt-cz-or::after { content:""; flex:1; height:1px; background:var(--wp--preset--color--soft-pink,#F1B7A8); }
.tt-cz-liblaunch { width:100%; padding:12px 16px; border-radius:12px; border:1.5px solid var(--wp--preset--color--brand,#AA6F63); background:#fff; color:var(--wp--preset--color--brand,#AA6F63); font-weight:800; font-size:14px; cursor:pointer; transition:background .15s ease, color .15s ease; }
.tt-cz-liblaunch:hover { background:var(--wp--preset--color--brand,#AA6F63); color:#fff; }
.tt-cz-lib { position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; }
.tt-cz-lib[hidden] { display:none; }
.tt-cz-lib__overlay { position:absolute; inset:0; background:rgba(61,36,24,.5); }
.tt-cz-lib__panel { position:relative; width:min(760px,92vw); max-height:86vh; display:flex; flex-direction:column; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); }
/* A shop reply hanging under a customer review. Indented + tinted so it
   reads as a response, not another review. */
.tt-rv-reply {
    margin: 10px 0 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--wp--preset--color--brand, #AA6F63);
    background: var(--wp--preset--color--cream-light, #FFF8F1);
    border-radius: 0 10px 10px 0;
}
.tt-rv-reply__who {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--wp--preset--color--brand, #AA6F63);
    margin-bottom: 3px;
}
.tt-rv-reply p { margin: 0; font-size: 13.5px; line-height: 1.55; }

/* Category filter in the design picker. A <select>, not a chip row —
   with 75+ patterns the chips overflowed the panel and the tail was
   unreachable. A native select also gets the OS picker on mobile. */
.tt-cz-lib__cats {
    flex: 0 0 auto;   /* load-bearing: panel is a flex column with max-height */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.tt-cz-lib__catlabel {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8A6A5C;
    flex: 0 0 auto;
}
.tt-cz-lib__catsel {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 320px;
    padding: 9px 12px;
    border: 1px solid #E4D3C4;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #4A3328;
    cursor: pointer;
}
.tt-cz-lib__catsel:focus {
    outline: none;
    border-color: #AA6F63;
    box-shadow: 0 0 0 3px rgba(170,111,99,.15);
}

.tt-cz-lib__head { flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--wp--preset--color--soft-pink,#F7D2C7); }
.tt-cz-lib__head strong { font-size:16px; color:var(--wp--preset--color--ink,#4A3328); }
.tt-cz-lib__search { flex:1; padding:9px 14px; border:1.5px solid var(--wp--preset--color--soft-pink,#F7D2C7); border-radius:999px; font-size:14px; }
.tt-cz-lib__x { width:34px; height:34px; border:0; background:var(--wp--preset--color--cream-light,#FFF8F1); border-radius:50%; font-size:22px; line-height:1; color:var(--wp--preset--color--ink,#4A3328); cursor:pointer; }
.tt-cz-lib__grid { flex:1 1 auto; min-height:0; padding:16px 20px; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:14px; }
.tt-cz-lib__item { border:1.5px solid transparent; background:var(--wp--preset--color--cream-light,#FFF8F1); border-radius:12px; padding:8px; cursor:pointer; text-align:center; transition:border-color .12s ease, transform .12s ease; }
.tt-cz-lib__item:hover { border-color:var(--wp--preset--color--brand,#AA6F63); transform:translateY(-2px); }
.tt-cz-lib__thumb { display:block; width:100%; aspect-ratio:1/1; background:#fff center/contain no-repeat; border-radius:8px; }
.tt-cz-lib__name { display:block; margin-top:6px; font-size:11.5px; font-weight:700; color:var(--wp--preset--color--ink,#4A3328); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tt-cz-lib__empty { padding:24px; text-align:center; color:var(--wp--preset--color--ink-soft,#6E5145); }

/* ── On-canvas editor: selection frame + resize handles ── */
.tt-cz-frame {
    position: absolute; z-index: 8; pointer-events: none;
    outline: 1.5px solid rgba(255, 255, 255, .95);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .38);
    border-radius: 1px;
}
.tt-cz-frame[hidden] { display: none; }
.tt-cz-frame.is-resizing { outline-color: var(--wp--preset--color--brand, #AA6F63); }
.tt-cz-handle {
    position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px;
    background: #fff; border: 2px solid var(--wp--preset--color--brand, #AA6F63);
    border-radius: 50%; pointer-events: auto; touch-action: none; z-index: 9;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.tt-cz-handle:hover { background: var(--wp--preset--color--brand, #AA6F63); }
.tt-cz-handle--nw { left: 0;    top: 0;    cursor: nwse-resize; }
.tt-cz-handle--ne { left: 100%; top: 0;    cursor: nesw-resize; }
.tt-cz-handle--sw { left: 0;    top: 100%; cursor: nesw-resize; }
.tt-cz-handle--se { left: 100%; top: 100%; cursor: nwse-resize; }
/* Mid-edge handles — flatter "bar" shape signals stretch (one axis). */
.tt-cz-handle--edge { border-radius: 5px; }
.tt-cz-handle--n { left: 50%;  top: 0;    cursor: ns-resize; width: 26px; height: 12px; margin: -6px 0 0 -13px; }
.tt-cz-handle--s { left: 50%;  top: 100%; cursor: ns-resize; width: 26px; height: 12px; margin: -6px 0 0 -13px; }
.tt-cz-handle--w { left: 0;    top: 50%;  cursor: ew-resize; width: 12px; height: 26px; margin: -13px 0 0 -6px; }
.tt-cz-handle--e { left: 100%; top: 50%;  cursor: ew-resize; width: 12px; height: 26px; margin: -13px 0 0 -6px; }
.tt-cz-upname { font-size: 12.5px; font-weight: 700; }
.tt-cz-upsize, .tt-cz-updims { font-size: 11px; color: var(--wp--preset--color--ink-soft, #6E5145); }
.tt-cz-dpi { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.tt-cz-dpi--great { background: rgba(46,158,91,.14); color: #1f7a45; }
.tt-cz-dpi--ok    { background: rgba(170,111,99,.14); color: #8a5449; }
.tt-cz-dpi--low   { background: rgba(240,150,30,.16); color: #9a5c00; }
.tt-cz-dpi--bad   { background: rgba(217,83,79,.14); color: #b02a26; }

.tt-cz-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tt-cz-size { text-align: left; background: #fff; cursor: pointer; padding: 10px 12px; border-radius: 12px;
    border: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); display: flex; flex-direction: column; gap: 2px; }
.tt-cz-size strong { font-size: 13.5px; color: var(--wp--preset--color--ink, #4A3328); }
.tt-cz-size span { font-size: 11px; color: var(--wp--preset--color--ink-soft, #6E5145); }
.tt-cz-size .tt-cz-size__fits { font-size: 10.5px; line-height: 1.35; margin-top: 2px;
    color: var(--wp--preset--color--brand, #AA6F63); font-weight: 600; }
.tt-cz-size.is-on { border-color: var(--wp--preset--color--brand, #AA6F63); box-shadow: 0 0 0 2px rgba(170,111,99,.22); }

.tt-cz-trims { display: flex; flex-wrap: wrap; gap: 8px; }
/* The colour fills the whole swatch. Previously the button carried
   padding:3px over a white background plus a 1px border, so a white ring ate
   the outer ~4px of every circle and the colour only reached the middle.
   Definition now comes from box-shadow rings, which paint OUTSIDE the box
   and so cost the swatch no area; the inset hairline keeps the white and
   pale swatches legible against the cream panel. */
.tt-cz-trim { width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
    background: transparent; border: 0; line-height: 0;
    box-shadow: 0 0 0 1px rgba(74,51,40,.18); }
.tt-cz-trim span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); }
/* Selected: white gap then a brand ring, both outside the circle. */
.tt-cz-trim.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp--preset--color--brand, #AA6F63); }
.tt-cz-trim:focus-visible { outline: 2px solid var(--wp--preset--color--brand, #AA6F63); outline-offset: 3px; }
.tt-cz-trimname { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--wp--preset--color--ink-soft, #6E5145); }

.tt-cz-qty { display: inline-flex; align-items: center; border: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7);
    border-radius: 10px; overflow: hidden; }
.tt-cz-qty__btn { border: 0; background: var(--wp--preset--color--cream, #F7EBE1); width: 40px; height: 42px;
    font-size: 20px; cursor: pointer; }
.tt-cz-qty__val { border: 0; width: 90px; height: 42px; text-align: center; font-weight: 800; font-size: 15px;
    -moz-appearance: textfield; }
.tt-cz-qty__val::-webkit-outer-spin-button, .tt-cz-qty__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tt-cz-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 14px 0; border-top: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7);
    font-size: 13px; color: var(--wp--preset--color--ink-soft, #6E5145); }
.tt-cz-total__amt { font-size: 30px; font-weight: 800; color: var(--wp--preset--color--brand-dark, #000); }
.tt-cz-add { width: 100%; text-align: center; cursor: pointer; }
.tt-cz-add[disabled] { opacity: .45; cursor: not-allowed; }
.tt-cz-add.is-loading { opacity: .7; cursor: wait; }
.tt-cz-msg { min-height: 18px; margin: 8px 0 0; font-size: 12.5px; color: var(--wp--preset--color--ink-soft, #6E5145); }

@media (max-width: 860px) {
    .tt-cz__grid { grid-template-columns: 1fr; gap: 22px; }
}
/* Trim layer: a white silhouette of the trim used as a CSS mask, filled with
   the chosen colour. One mask export per size renders every trim colour. */
.tt-cz-stage__trim {
    position: absolute; inset: 0;
    background-color: var(--cz-trim, #ccc);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    pointer-events: none;
    transition: background-color .15s ease;
}
.tt-cz-stage__trim[hidden] { display: none; }

/* ── Coozie mockup layers ─────────────────────────────────────────────
   Each layer is absolutely placed by its own rect (% of the stage) because
   the Canva exports are cropped to their own content and share no canvas.
   Stack order is DOM order: can → body → art → trim → overlay. */
.tt-cz-l { position: absolute; background-size: 100% 100%; background-position: center;
    background-repeat: no-repeat; pointer-events: none; }
.tt-cz-l[hidden] { display: none; }
.tt-cz-l--art {
    background-size: cover;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Full, uncropped artwork shown while positioning. Invisible at rest so the
   mockup stays clean; the stage gets .is-adjusting on drag/zoom. Deliberately
   NOT masked — seeing the part that falls outside the coozie is the whole
   point of it. */
.tt-cz-l--ghost {
    background-size: cover;
    opacity: 0;
    transition: opacity .12s ease;
}
.tt-cz-stage.is-adjusting .tt-cz-l--ghost { opacity: .32; }
/* A dashed outline of the print area, so it's obvious where the crop falls. */
.tt-cz-stage.is-adjusting .tt-cz-l--art {
    outline: 1px dashed rgba(255, 255, 255, .55);
    outline-offset: -1px;
}
.tt-cz-l--trim {
    background-color: var(--cz-trim, #ccc);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    transition: background-color .15s ease;
}

/* ── Coozie: body tint + artwork drag/zoom ───────────────────────────
   The body silhouette is masked and filled, so the customer picks the real
   sleeve colour — which is what shows through artwork with a transparent
   background. */
.tt-cz-l--body {
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    transition: background-color .15s ease;
}
/* The art layer is the clip window (masked to the coozie); the inner div
   carries the image + transform so it can be dragged/zoomed inside it. */
.tt-cz-l--art { pointer-events: auto; cursor: grab; touch-action: none; overflow: hidden; }
.tt-cz-l--art.is-dragging { cursor: grabbing; }
/* `contain`, not `cover`. With `cover` the artwork was cropped to FILL the
   sleeve the moment it loaded — a wide design lost its left and right edges
   before the customer had touched anything, so dragging it right just moved
   an already-cut image and there was no way to recover the missing part.
   `contain` shows the whole upload at 100%; the zoom slider takes it up to
   300% for anyone who does want it to bleed off the edges. */
.tt-cz-art-inner { position: absolute; inset: 0; background-size: contain; background-position: center;
    background-repeat: no-repeat; transform-origin: center; will-change: transform; }

.tt-cz-adjust { margin-top: 10px; padding: 10px 12px; border-radius: 12px;
    background: var(--wp--preset--color--cream-light, #FFF8F1);
    border: 1px solid var(--wp--preset--color--soft-pink, #F7D2C7); }
.tt-cz-adjust[hidden] { display: none; }
.tt-cz-adjust__row { display: flex; align-items: center; gap: 10px; }
.tt-cz-adjust__row label { font-size: 12px; font-weight: 800; color: var(--wp--preset--color--ink, #4A3328); }
.tt-cz-zoom { flex: 1; accent-color: var(--wp--preset--color--brand, #AA6F63); }
.tt-cz-zoomval { font-size: 11.5px; font-weight: 700; min-width: 40px; text-align: right;
    color: var(--wp--preset--color--ink-soft, #6E5145); }
.tt-cz-adjust__hint { margin-top: 6px; font-size: 11.5px; display: flex; align-items: center;
    justify-content: space-between; gap: 8px; color: var(--wp--preset--color--ink-soft, #6E5145); }
.tt-cz-reset { border: 0; background: transparent; cursor: pointer; font-weight: 800; font-size: 11.5px;
    color: var(--wp--preset--color--brand, #AA6F63); text-decoration: underline; }

/* ── Coozie builder: mockup is the hero, not a sidebar thumbnail ──────
   The stock gallery + its column are killed in PHP, so the summary column
   is the only one left — force it to span the row, then let .tt-cz__grid
   do the real two-column split with the mockup large on the left.
   Scope to `main >` — the footer runs its own 4-column block that an
   unscoped rule would stack into a vertical list. */
body.tt-cz-page main > .wp-block-columns { display: block !important; }
body.tt-cz-page main > .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important; width: 100% !important; }
body.tt-cz-page .tt-cz { margin-top: 22px; }
body.tt-cz-page .tt-cz__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; }
/* Sticky so the mockup stays in view while they work down the form. */
body.tt-cz-page .tt-cz__preview { position: sticky; top: 108px; }
body.tt-cz-page .tt-cz-stage { border-radius: 20px; }
body.tt-cz-page .tt-cz-stage__empty span { font-size: 46px; }
body.tt-cz-page .tt-cz-stage__empty p { font-size: 14px; }
.tt-cz-stage__empty[hidden] { display: none; }
@media (max-width: 900px) {
    body.tt-cz-page .tt-cz__grid { grid-template-columns: 1fr; gap: 22px; }
    body.tt-cz-page .tt-cz__preview { position: static; }
}

/* ── Custom t-shirt builder (3D) ─────────────────────────────────── */
.tt-shirt { display:flex; flex-direction:column; gap:14px; margin:14px 0 8px; }
.woocommerce-product-gallery.tt-shirt__stage { width:100%; margin-bottom:0; }
.tt-shirt__stage { position:relative; aspect-ratio:1/1.05; background:linear-gradient(180deg,#FBF6F1,#F3E9E0);
    border:1px solid #F0E1D2; border-radius:16px; overflow:hidden; }
.tt-shirt__canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.tt-shirt__canvas:active { cursor:grabbing; }
.tt-shirt__loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-weight:700; color:#8A6A5C; background:#FBF6F1; }
.tt-shirt__loading[hidden] { display:none; }
.tt-shirt__hint { position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:11.5px; color:#8A6A5C; pointer-events:none; }
.tt-shirt__panel { display:flex; flex-direction:column; gap:14px; }
.tt-shirt__drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    border:2px dashed #D9C3B0; border-radius:14px; padding:22px 16px; cursor:pointer; text-align:center;
    font-weight:800; color:#6E5145; background:#FFFDFB; transition:.15s; }
.tt-shirt__drop:hover,.tt-shirt__drop.is-over { border-color:#AA6F63; background:#FFF6EF; }
.tt-shirt__dropsub { font-size:11.5px; font-weight:500; color:#8A6A5C; }
.tt-shirt__meta { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:#6E5145; }
.tt-shirt__meta[hidden] { display:none; }
.tt-shirt__dpi { font-weight:800; }
.tt-shirt__dpi.is-good { color:#15803d; } .tt-shirt__dpi.is-ok { color:#b45309; } .tt-shirt__dpi.is-low { color:#b91c1c; }
.tt-shirt__row { display:flex; align-items:center; gap:12px; }
.tt-shirt__lbl { flex:0 0 78px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#8A6A5C; }
.tt-shirt__swatches { display:flex; flex-wrap:wrap; gap:7px; }
.tt-shirt__sw { width:28px; height:28px; border-radius:50%; border:2px solid #E4D3C4; cursor:pointer; padding:0; }
.tt-shirt__sw.is-active { border-color:#AA6F63; box-shadow:0 0 0 3px rgba(170,111,99,.2); }
.tt-shirt__sizes { display:flex; flex-wrap:wrap; gap:6px; }
.tt-shirt__size { border:1px solid #E4D3C4; background:#fff; color:#6E5145; font-family:inherit; font-size:12.5px;
    font-weight:700; padding:6px 12px; border-radius:8px; cursor:pointer; }
.tt-shirt__size.is-active { background:#AA6F63; border-color:#AA6F63; color:#fff; }
.tt-shirt__range { flex:1 1 auto; accent-color:#AA6F63; }
.tt-shirt__qty { display:inline-flex; align-items:center; border:1px solid #E4D3C4; border-radius:8px; overflow:hidden; }
.tt-shirt__qty button { border:0; background:#FFF6EF; color:#6E5145; font-size:16px; width:32px; height:32px; cursor:pointer; }
.tt-shirt__qty input { border:0; width:54px; height:32px; text-align:center; font-family:inherit; font-weight:700; color:#3D2418; }
.tt-shirt__total { display:flex; justify-content:space-between; align-items:baseline; padding-top:6px;
    border-top:1px solid #F0E1D2; font-size:13px; color:#8A6A5C; }
.tt-shirt__total strong { font-size:20px; color:#3D2418; }
.tt-shirt__add { background:#AA6F63; color:#fff; border:0; border-radius:10px; padding:14px 20px;
    font-family:inherit; font-size:15px; font-weight:800; cursor:pointer; }
.tt-shirt__add:disabled { opacity:.5; cursor:not-allowed; }
.tt-shirt__note { font-size:12px; color:#b45309; margin:0; min-height:16px; }
@media (max-width:900px) { .tt-shirt { grid-template-columns:1fr; } }
.tt-shirt__reset { border:1px solid #E4D3C4; background:#fff; color:#6E5145; font-family:inherit;
    font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px; cursor:pointer; }
.tt-shirt__reset:hover { border-color:#AA6F63; color:#AA6F63; }
.tt-shirt__zonetabs { display:flex; flex-wrap:wrap; gap:6px; }
.tt-shirt__zonetab { position:relative; border:1px solid #E4D3C4; background:#fff; color:#6E5145;
    font-family:inherit; font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:8px; cursor:pointer; }
.tt-shirt__zonetab em { font-style:normal; font-weight:600; opacity:.65; margin-left:4px; font-size:11px; }
.tt-shirt__zonetab.is-active { background:#AA6F63; border-color:#AA6F63; color:#fff; }
.tt-shirt__zonedot { position:absolute; top:-4px; right:-4px; color:#15803d; font-size:11px; }
.tt-shirt__zonetab.is-active .tt-shirt__zonedot { color:#BFE3CB; }
.tt-shirt__rm { border:0; background:none; color:#b91c1c; font-family:inherit; font-size:11.5px;
    font-weight:700; cursor:pointer; padding:0; }

/* ── T-shirt builder: flat edit layer + 3D preview toggle ────────── */
.tt-shirt__edit { position:absolute; inset:0; }
.tt-shirt__edit[hidden] { display:none; }
.tt-shirt__still { position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
    user-select:none; -webkit-user-drag:none; pointer-events:none; }
.tt-shirt__guide { position:absolute; border:2px dashed rgba(170,111,99,.45); border-radius:4px;
    pointer-events:none; }
.tt-shirt__guide[hidden] { display:none; }
.tt-shirt__box { position:absolute; cursor:grab; touch-action:none;
    outline:2px dashed rgba(170,111,99,.9); outline-offset:2px; }
.tt-shirt__box[hidden] { display:none; }
.tt-shirt__box:active { cursor:grabbing; }
.tt-shirt__art { width:100%; height:100%; object-fit:contain; pointer-events:none;
    user-select:none; -webkit-user-drag:none; display:block; }
.tt-shirt__h { position:absolute; width:15px; height:15px; background:#fff; border:2px solid #AA6F63;
    border-radius:3px; touch-action:none; }
.tt-shirt__h[data-h="nw"] { left:-9px;  top:-9px;    cursor:nwse-resize; }
.tt-shirt__h[data-h="ne"] { right:-9px; top:-9px;    cursor:nesw-resize; }
.tt-shirt__h[data-h="sw"] { left:-9px;  bottom:-9px; cursor:nesw-resize; }
.tt-shirt__h[data-h="se"] { right:-9px; bottom:-9px; cursor:nwse-resize; }
.tt-shirt__mode { position:absolute; right:10px; top:10px; z-index:3; border:1px solid #E4D3C4;
    background:rgba(255,255,255,.94); color:#6E5145; font-family:inherit; font-size:12.5px;
    font-weight:800; padding:8px 14px; border-radius:999px; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.08); }
.tt-shirt__mode:hover { border-color:#AA6F63; color:#AA6F63; }

/* ════════════════════════════════════════════════════════════════
   iPad PORTRAIT PASS — 768–1024px wide, portrait only.
   The mobile pass above stops at 860px and WordPress only stacks block
   columns at ≤781px, so iPads held in PORTRAIT (10.9″ 820, 11″ 834,
   12.9″ 1024) render cramped, side-by-side sections. These rules stack /
   relax the affected homepage + footer sections for iPad portrait.
   Phones (<768) and desktop / landscape / >1024 are untouched.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    /* Home — "How It Works": 3 step cards stack into a single column. */
    .tt-how .wp-block-columns { flex-direction: column !important; }
    .tt-how .wp-block-columns > .wp-block-column {
        flex-basis: 100% !important; width: 100% !important; max-width: 640px !important;
        margin-left: auto !important; margin-right: auto !important;
    }

    /* Home — "Shop by Category": clean 2-up with real separation so the
       cards never read as overlapping (mirrors the ≤600 phone rule). */
    .tt-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }
    .tt-cat-card { height: auto !important; }

    /* Hero (all pages) stacks through iPad Pro 12.9″ (1024). The WP columns
       container is flex-row/nowrap, so setting the columns to 100% basis alone
       just shrinks them side-by-side — force the CONTAINER to a column so the
       text + builder-iframe (upload 168, by-size 100, UV upload 188, gang 136)
       actually stack. */
    .tt-hero .wp-block-columns { flex-direction: column !important; flex-wrap: wrap !important; }
    .tt-hero .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
    .tt-hero .wp-block-image img { max-width: 240px !important; margin-inline: auto !important; }
    .page-id-187 .tt-hero .wp-block-image img { max-width: 100% !important; }
    /* Home hero keeps image-first when stacked (image column is authored 2nd). */
    body.home .tt-hero .wp-block-columns,
    .page-id-39 .tt-hero .wp-block-columns { flex-direction: column-reverse !important; }

    /* Home — Builder CTA (gang-sheet image + copy) stacks. */
    .tt-builder-cta .wp-block-columns { flex-direction: column !important; }
    .tt-builder-cta .wp-block-columns > .wp-block-column {
        flex-basis: 100% !important; width: 100% !important;
    }

    /* Home — "Why" section (image + copy) stacks. */
    .tt-why .wp-block-columns { flex-direction: column !important; }
    .tt-why .wp-block-columns > .wp-block-column {
        flex-basis: 100% !important; width: 100% !important;
    }

    /* Footer — brand full-width on top, then Shop / Discover / Support as
       three comfortable columns instead of four cramped ones. */
    footer .wp-block-columns { flex-wrap: wrap !important; }
    footer .wp-block-columns > .wp-block-column { flex-basis: calc(33.333% - 40px) !important; }
    footer .wp-block-columns > .wp-block-column:first-child { flex-basis: 100% !important; }

    /* Wholesale Cup Wraps (product 2394) — hero + custom-art split stack
       through iPad Pro 12.9″ (1024, past the page's own 860 breakpoint), with
       the hero product image FIRST. */
    .tt-cwsp-hero__grid, .tt-cwsp-split { grid-template-columns: 1fr !important; gap: 30px !important; }
    .tt-cwsp-heroart { order: -1 !important; }
}

/* ── Mobile cart-drawer item: stop the squeeze (2026-08-01) ──────────────
   The drawer item is one flex row — [thumb 72px][info][price+qty]. In a
   narrow drawer the right-hand price/qty column and the thumb together
   starve .tt-item-info so hard that the title wrapped to ONE CHARACTER per
   line ("U" / "V…") and the qty stepper collided with the meta text.
   Below 560px the row now wraps into two: thumb + title/meta on top, then
   price + qty on their own full-width line. Reported with a screenshot by
   the owner, 2026-08-01. */
@media (max-width: 560px) {
  .tt-cart-drawer .woocommerce-mini-cart-item.mini_cart_item {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    row-gap: 10px !important;
    column-gap: 12px !important;
    padding: 12px !important;
  }
  /* Only the BOX is resized — the <img> is percent-sized against it (see the
     .tt-item-thumb img rule above), so it shrinks with the tile instead of
     overflowing onto the title. */
  .tt-cart-drawer .tt-item-thumb,
  .tt-cart-drawer .mini_cart_item .tt-item-thumb {
    width: 58px !important;
    height: 58px !important;
  }
  .tt-cart-drawer .tt-item-info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  /* Full-width second row so nothing has to compete for horizontal space. */
  .tt-cart-drawer .tt-item-side {
    flex: 1 1 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-left: 0 !important;
    gap: 10px !important;
    padding-top: 2px;
    border-top: 1px solid #F4ECE5;
  }
  /* Title gets room to breathe now — allow two honest lines, then ellipsis. */
  .tt-cart-drawer .tt-item-title,
  .tt-cart-drawer .mini_cart_item .tt-item-title,
  .tt-cart-drawer .woocommerce-mini-cart-item .tt-item-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3 !important;
  }
  .tt-cart-drawer .tt-item-meta {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }
}

/* ── Classic [products] shortcode cards (2026-08-01) ────────────────────
   Landing pages built with [products …] (/uv-dtf-cup-wraps/, /dtf-transfers/)
   render WooCommerce's CLASSIC loop, where ONE anchor wraps image + eyebrow +
   title + sizes + price. The block grid on /shop/ instead gives the image its
   own container. The shared card rules above target `> a:first-of-type` as if
   it were that image container — so on classic cards the whole content block
   got aspect-ratio:1/1 + overflow:hidden and was crushed into a square: the
   absolutely-positioned image covered the text, titles clipped mid-word
   ("Berry Sweet Bloom…", "Books Are My Lov Language") and prices vanished.

   Fix: hand the anchor back to normal flow, and give the IMAGE its own square
   frame in-flow rather than absolutely positioned. Scoped to the classic
   markup only (a.woocommerce-LoopProduct-link), so /shop/ is untouched. */
ul.products li.product > a.woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
    margin: 0 !important;
}
/* Image: real square frame, in flow, above the text. */
ul.products li.product > a.woocommerce-LoopProduct-link > img,
ul.products li.product > a.woocommerce-LoopProduct-link > img:first-of-type,
ul.products li.product > a.woocommerce-LoopProduct-link .attachment-woocommerce_thumbnail {
    position: static !important;
    order: -1;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 100% !important;
    max-height: none !important;
    top: auto !important;
    left: auto !important;
    object-fit: contain !important;
    background: var(--wp--preset--color--cream-light);
    padding: 11% !important;
    box-sizing: border-box !important;
    margin: 0 0 6px !important;
    display: block !important;
}
ul.products li.product.tt-card--dark-bg > a.woocommerce-LoopProduct-link > img {
    background: #111 !important;
}
/* Titles wrap honestly instead of being clipped by the old square. */
ul.products li.product > a.woocommerce-LoopProduct-link .woocommerce-loop-product__title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding: 0 10px !important;
}
ul.products li.product > a.woocommerce-LoopProduct-link .tt-card-eyebrow,
ul.products li.product > a.woocommerce-LoopProduct-link .price {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
/* Keep the wishlist heart clear of the now-taller title. */
ul.products li.product .tt-card-heart { z-index: 3; }

/* ── ADD button: one checkmark, not two (2026-08-01) ────────────────────
   product-picker.js swaps the button label to "✓ ADDED" on success, while the
   rules above ALSO stamp a ::after "✓" over the button and hide its children.
   Where the label isn't a direct child (so `> *` misses it) the result was a
   glyph sitting on top of the word — the overlap the owner reported. Buttons
   that manage their own label keep it; the decorative glyph is suppressed. */
.add_to_cart_button.is-added:has(.tt-cart__label)::after,
.wp-block-button__link.is-added:has(.tt-cart__label)::after,
.add_to_cart_button.is-loading:has(.tt-cart__label)::after,
.wp-block-button__link.is-loading:has(.tt-cart__label)::after {
    content: none !important;
}
.add_to_cart_button.is-added:has(.tt-cart__label),
.wp-block-button__link.is-added:has(.tt-cart__label),
.add_to_cart_button.is-loading:has(.tt-cart__label),
.wp-block-button__link.is-loading:has(.tt-cart__label) {
    color: #fff !important;
}
.add_to_cart_button.is-added .tt-cart__label,
.wp-block-button__link.is-added .tt-cart__label,
.add_to_cart_button.is-loading .tt-cart__label,
.wp-block-button__link.is-loading .tt-cart__label {
    opacity: 1 !important;
}

/* ── Shortcode product grids: break out of the narrow content column ─────
   Pages built with [products …] (/uv-dtf-cup-wraps/, /dtf-transfers/) render
   inside .entry-content, which the theme constrains to 780px for readable
   prose. That's right for paragraphs and wrong for a product grid: on a
   1536px screen the grid sat in 780px with ~370px of dead space either side,
   and the shortcode's columns="4" could only fit 3. /shop/ doesn't have this
   problem because its block grid is alignwide (1240px).

   So the grid — and only the grid — breaks out to the same wide measure the
   rest of the shop uses. The intro paragraph above it keeps the narrow,
   readable width. Reported with a screenshot by the owner, 2026-08-01.  */
.entry-content > .woocommerce.columns-3,
.entry-content > .woocommerce.columns-4,
.entry-content > .woocommerce.columns-5 {
    --tt-wide: min(1240px, calc(100vw - 48px));
    width: var(--tt-wide);
    max-width: var(--tt-wide) !important;
    /* Centre the wide block on the page even though its parent is narrow:
       pull left by half the overflow. !important because WordPress's
       .is-layout-constrained rule sets `margin-left: auto`, which with a
       width wider than the parent resolves to 0 and dumps the whole grid off
       the right edge. 100% here is the narrow parent, which is what we want
       to measure the overflow against. */
    margin-left: calc((100% - var(--tt-wide)) / 2) !important;
    margin-right: 0 !important;
}

/* Honour the shortcode's own column count now that there's room for it. */
.entry-content > .woocommerce.columns-4 ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.entry-content > .woocommerce.columns-3 ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 1100px) {
    .entry-content > .woocommerce.columns-4 ul.products,
    .entry-content > .woocommerce.columns-3 ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 780px) {
    .entry-content > .woocommerce.columns-3,
    .entry-content > .woocommerce.columns-4,
    .entry-content > .woocommerce.columns-5 {
        width: 100%;
        max-width: 100% !important;
        margin-left: 0;
    }
    .entry-content > .woocommerce.columns-4 ul.products,
    .entry-content > .woocommerce.columns-3 ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ── Cup wraps are WIDE artwork (measured median 2.26:1) ─────────────────
   A 1:1 image tile letterboxed them into a thin strip and threw away ~56% of
   every card's height. WooCommerce tags each card with its category, so this
   follows the products wherever they appear — archive, search, related —
   rather than being pinned to one page. */
ul.products li.product.product_cat-premade-uv-dtf > a.woocommerce-LoopProduct-link > img,
ul.products li.product.product_cat-premade-uv-dtf .wc-block-components-product-image img,
ul.products li.product.product_cat-premade-uv-dtf > a:first-of-type > img,
li.product.product_cat-premade-uv-dtf .wc-block-components-product-image img {
    aspect-ratio: 2 / 1 !important;
    object-fit: contain !important;
    padding: 4% 5% !important;
}

/* ── Shortcode-grid pages: line the heading up with the products ─────────
   The grid breaks out to 1240px, but the page title and intro stayed in the
   theme's 780px prose column — leaving the heading indented ~230px from the
   products underneath it. Give the title and intro the same left edge as the
   grid, and cap the intro's MEASURE (not its position) so paragraphs stay
   readable instead of running the full 1240px. */
body.tt-has-shortcode-grid .wp-block-post-title,
body.tt-has-shortcode-grid .entry-content > p,
body.tt-has-shortcode-grid .entry-content > h2,
body.tt-has-shortcode-grid .entry-content > h3 {
    --tt-wide: min(1240px, calc(100vw - 48px));
    width: var(--tt-wide);
    max-width: var(--tt-wide);
    margin-left: calc((100% - var(--tt-wide)) / 2) !important;
    margin-right: 0 !important;
}
/* Keep prose readable at the wide measure. */
body.tt-has-shortcode-grid .entry-content > p {
    max-width: min(720px, 100%);
}
/* The title was jammed straight under the sticky nav. */
body.tt-has-shortcode-grid .wp-block-post-title {
    padding-top: 26px;
    margin-bottom: 10px;
}
@media (max-width: 780px) {
    body.tt-has-shortcode-grid .wp-block-post-title,
    body.tt-has-shortcode-grid .entry-content > p,
    body.tt-has-shortcode-grid .entry-content > h2,
    body.tt-has-shortcode-grid .entry-content > h3 {
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
    }
    body.tt-has-shortcode-grid .wp-block-post-title { padding-top: 14px; }
}

/* ── Shortcode-grid pagination ───────────────────────────────────────────
   WooCommerce ships this as a bare <ul> of links; unstyled it rendered as a
   cramped run of bare numbers. Match the rounded, brand-coloured controls
   used elsewhere on the site. */
.woocommerce-pagination { margin: 34px 0 8px; }
.woocommerce-pagination ul.page-numbers {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.woocommerce-pagination ul.page-numbers li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
}
.woocommerce-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #EADBCF;
    background: #fff;
    color: #6B5B52;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .15s, color .15s, border-color .15s;
}
.woocommerce-pagination .page-numbers:hover {
    background: #F7E7DC;
    border-color: #DFC7B5;
    color: #4A3328;
}
.woocommerce-pagination .page-numbers.current {
    background: #AA6F63;
    border-color: #AA6F63;
    color: #fff;
}
.woocommerce-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}
@media (max-width: 560px) {
    .woocommerce-pagination .page-numbers { min-width: 34px; height: 34px; padding: 0 9px; font-size: 13px; }
    .woocommerce-pagination ul.page-numbers { gap: 6px; flex-wrap: wrap; }
}

/* ── Cross-sell banner under a shortcode grid ──────────────────────────
   Selector carries TWO classes deliberately. WordPress's inline layout rule
   `.is-layout-constrained > :where(…)` is specificity (0,1,0) and is printed
   in <head> AFTER this stylesheet, so a bare `.tt-xsell` ties on specificity
   and loses on source order — width and margin-left both got clobbered. */
.entry-content > .tt-xsell {
    --tt-wide: min(1240px, calc(100vw - 48px));
    width: var(--tt-wide) !important;
    max-width: var(--tt-wide) !important;
    margin: 48px 0 8px;
    /* !important for the same reason the grid needs it: WordPress's
       .is-layout-constrained rule sets margin-left:auto, which with a width
       wider than the parent resolves to 0 and leaves this offset from the
       products above it. */
    margin-left: calc((100% - var(--tt-wide)) / 2) !important;
    margin-right: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
.tt-xsell__card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #EADBCF;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tt-xsell__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -18px rgba(120, 80, 70, .5);
    border-color: #AA6F63;
}
.tt-xsell__img {
    flex: 0 0 116px;
    width: 116px;
    height: 116px;
    border-radius: 14px;
    object-fit: contain;
    background: #FFF8F1;
    padding: 8px;
    box-sizing: border-box;
}
.tt-xsell__body { min-width: 0; }
.tt-xsell__eyebrow {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #AA6F63;
    margin: 0 0 5px;
}
.tt-xsell__h {
    font-family: 'Riffic', 'Fredoka', system-ui, sans-serif;
    font-size: 19px;
    font-weight: 800;
    color: #3B2A24;
    margin: 0 0 6px;
    line-height: 1.25;
}
.tt-xsell__p {
    font-size: 13.5px;
    line-height: 1.55;
    color: #8A7169;
    margin: 0 0 10px;
}
.tt-xsell__cta {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    color: #AA6F63;
}
.tt-xsell__card:hover .tt-xsell__cta { text-decoration: underline; }
@media (max-width: 820px) {
    .entry-content > .tt-xsell { grid-template-columns: 1fr; gap: 14px; margin-top: 34px; }
}
@media (max-width: 780px) {
    .entry-content > .tt-xsell { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; }
}
@media (max-width: 460px) {
    .tt-xsell__card { flex-direction: column; align-items: flex-start; text-align: left; }
    .tt-xsell__img { flex: 0 0 auto; width: 100%; height: 150px; }
}

/* ── iOS input zoom on the design pickers ────────────────────────────────
   Safari on iOS zooms the entire page whenever a focused input has a
   font-size under 16px. Both design-library search boxes were 14px, so
   tapping "Choose from library" on a phone scaled the page in and dumped the
   customer into a text field instead of the design grid. 16px on touch
   widths stops the zoom; desktop keeps the tighter 14px.
   (The matching autofocus-on-open was removed in coozie-builder.js.) */
@media (max-width: 900px) {
    .tt-cz-lib__search,
    .tt-cw-search,
    .tt-tb-search__input {
        font-size: 16px !important;
    }
}

/* Same trap, everywhere else a customer types on a phone. Anything under
   16px here costs a zoom-in the moment the field is focused. */
@media (max-width: 900px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ── Custom Coozie builder: hide the bare product price ──────────────────
   Product 2399 is wholesale, priced PER PIECE with a 100 piece minimum
   ($2.00 each at 100, down to $1.70 at 500). WooCommerce prints the base
   price on its own above the image, so the page opened with a large "$2.00"
   that reads as "a coozie costs two dollars" when the smallest real order is
   $200. The builder below shows live per-piece and total pricing as soon as a
   size and quantity are chosen, so the standalone figure adds nothing except
   the wrong first impression. Removed on desktop and mobile alike at the
   owner's request, 2026-08-01. */
body.postid-2399 .wp-block-woocommerce-product-price,
body.postid-2399 .wc-block-components-product-price,
body.postid-2399 .product .summary > .price,
body.postid-2399 p.price {
    display: none !important;
}