/* Archivo (SIL OFL 1.1), self-hosted as a single variable file — 35 KB for
 * every weight. Self-hosted rather than pulled from a font CDN: /checkout has
 * to stay free of third-party sources for PCI reasons, and one convention
 * across the site means nobody has to remember which pages are special.
 *
 * font-display: swap — text renders immediately in the fallback and reflows
 * when the font lands, rather than leaving the hero blank on a slow phone. */
@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-var.woff2') format('woff2-variations');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

/* ElBatt Creations — storefront
 *
 * Bold and graphic: heavy black, hot orange from the logo, big product
 * imagery, uppercase display type. The shirts are the point, so chrome stays
 * out of the way and photography gets the space.
 *
 * Self-hosted only — no font CDN, no external stylesheet. /checkout has to
 * stay free of third-party script and style sources for PCI reasons, and
 * keeping one convention across the whole site means nobody has to remember
 * which pages are special.
 */

:root {
    --brand:      #e5783e;
    --brand-deep: #bb5219;
    --brand-dark: #944114;
    --brand-soft: #f2ba9c;
    --brand-tint: #fdf1ea;
    --ink:        #16130f;
    --ink-2:      #2c1306;

    --bg:      #ffffff;
    --surface: #ffffff;
    --sunken:  #f6f5f3;
    --border:  #e6e3df;
    --text:    #16130f;
    --muted:   #726b63;
    --muted-2: #a49c93;

    --radius: 10px;
    --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);

    --display: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --body:    'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font: 16px/1.6 var(--body);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
    margin: 0;
}

.eyebrow {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--brand-deep);
}

/* ================================================================ header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ink);
    color: #fff;
    border-bottom: 3px solid var(--brand);
}
.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 88px;
}
.site-header a { text-decoration: none; }

/* Badge only. It carries the wordmark itself, so it gets room to breathe
   and scales up rather than sharing space with duplicate text. */
.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img { width: 72px; height: auto; transition: transform .2s ease; }
.logo:hover img { transform: scale(1.04); }

.site-nav { display: flex; gap: 26px; margin-left: auto; }
.site-nav a {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.82);
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a.on { color: #fff; border-bottom-color: var(--brand); }
.shop-dropdown { position: relative; }
.shop-dropdown summary { cursor: pointer; list-style: none; color: rgba(255,255,255,.82); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 4px 0; border-bottom: 2px solid transparent; }
.shop-dropdown summary::-webkit-details-marker { display: none; }
.shop-dropdown summary:hover, .shop-dropdown summary.on { color: white; border-bottom-color: var(--brand); }
.shop-dropdown summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.shop-dropdown-links { position: absolute; left: 0; top: calc(100% + 10px); z-index: 50; min-width: 190px; padding: 8px; background: #fff; border: 1px solid #e5e3dc; border-radius: 10px; box-shadow: 0 10px 30px #0003; }
.site-nav .shop-dropdown-links a { display: block; padding: 12px; color: #292a29; border: 0; text-transform: none; letter-spacing: 0; border-radius: 6px; }
.site-nav .shop-dropdown-links a:hover, .site-nav .shop-dropdown-links a:focus { color: #8a421f; background: #fcf0e7; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    padding: 8px 14px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 700;
}
.cart-btn:hover { background: rgba(255,255,255,.18); }
.cart-btn .n {
    background: var(--brand);
    color: #fff;
    border-radius: 20px;
    min-width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    font-size: 11px;
    padding: 0 5px;
}

/* ================================================================== hero */

/* Tall and full-bleed: 78vh, matching the proportion the owner asked for.
 * The headline is set with clamp() so it scales from a phone to a wide
 * desktop without a breakpoint per size — 136px at the top end, which is
 * where a display face earns its place. */

.hero {
    position: relative;
    background: var(--ink);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
/* One layer per image, cross-fading. The stack sits behind the gradient and
   the content, so only opacity animates — no layout, no repaint of text. */
.hero-slide {
    position: absolute;
    inset: -12% 0 -12% 0;      /* overscan so nothing crops oddly */
    z-index: -2;
    background-size: cover;
    background-position: center 28%;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
    will-change: opacity;
}
.hero-slide.on { opacity: 1; }

@media (max-width: 860px) {
    .hero-slide { background-position: center top; }
}

/* Someone who has asked their system to reduce motion gets one still image,
   not a fade. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Dark at both ends so the headline reads at the bottom and the header
       does not float on a bright patch of photo. */
    /* Protect the text column, then get out of the way.
     *
     * The horizontal wash carries almost all the work and clears to fully
     * transparent by two-thirds across, so the subject stays bright. The
     * vertical pass only touches the very top and bottom edges — enough to
     * seat the header and the orange strip against the photo, not enough to
     * flatten it. */
    background:
        linear-gradient(to right,
            rgba(22,19,15,.95) 0%,
            rgba(22,19,15,.70) 28%,
            rgba(22,19,15,.20) 58%,
            rgba(22,19,15,0)   78%),
        linear-gradient(to top,
            rgba(22,19,15,.55) 0%,
            rgba(22,19,15,0)   26%,
            rgba(22,19,15,0)   74%,
            rgba(22,19,15,.40) 100%);
}

.hero .wrap {
    min-height: 78vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 72px;
    padding-bottom: 72px;
}

.hero h1 {
    text-shadow: 0 2px 28px rgba(22,19,15,.5);
    font-size: clamp(44px, 10.6vw, 136px);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: .95;
    margin: 14px 0 0;
    max-width: 15ch;
}
.hero .sub {
    text-shadow: 0 1px 16px rgba(22,19,15,.55);
    color: rgba(255,255,255,.86);
    font-size: clamp(15px, 1.7vw, 19px);
    max-width: 46ch;
    margin: 22px 0 0;
}

/* Two equal calls to action, side by side. */
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

/* ================================================================ strips */

.strip {
    background: var(--brand);
    color: #fff;
    padding: 13px 0;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.strip .wrap { display: flex; gap: 34px; justify-content: center; flex-wrap: wrap; }

/* ============================================================== sections */

section.block { padding: 68px 0; }
section.block.sunken { background: var(--sunken); }

.block-head { margin-bottom: 30px; }
.block-head h2 { font-size: clamp(24px, 3vw, 34px); text-transform: uppercase; }
.block-head p  { color: var(--muted); margin: 8px 0 0; }

/* ========================================================= product cards */

.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 22px;
}

.pcard { text-decoration: none; display: block; }
.pcard .shot {
    background: var(--sunken);
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    position: relative;
    border: 1px solid var(--border);
}
.pcard .shot img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.pcard:hover .shot img { transform: scale(1.045); }
.pcard .tag {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--ink);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    padding: 4px 9px;
    border-radius: 20px;
}
.pcard h3 { font-size: 15px; margin: 13px 0 3px; letter-spacing: -.01em; }
.pcard .price { font-weight: 700; font-size: 14px; }
.pcard .sub { color: var(--muted); font-size: 13px; }

/* =============================================================== product */

.product { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 56px; padding: 44px 0 72px; }

.gallery { position: sticky; top: 96px; align-self: start; }
.gallery .main {
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
}
.gallery .main img { width: 100%; height: 100%; object-fit: contain; }

.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.product h1 { font-size: clamp(27px, 3.4vw, 40px); text-transform: uppercase; margin-bottom: 8px; }
.product .lede { color: var(--muted); font-size: 16px; margin: 0 0 18px; }
.product .price-now { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 26px; }
.product .price-now small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }

.opt { margin-bottom: 24px; }
.opt > label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .11em;
    margin-bottom: 10px;
}
.opt > label .chosen { color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }

.swatch-row { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch-row input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-row label {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    position: relative;
    box-shadow: inset 0 0 0 3px #fff;
    transition: transform .12s ease;
}
.swatch-row label:hover { transform: scale(1.08); }
.swatch-row input:checked + label { border-color: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.swatch-row input:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 2px; }

.size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.size-row input { position: absolute; opacity: 0; pointer-events: none; }
.size-row label {
    min-width: 52px;
    padding: 10px 12px;
    text-align: center;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    background: #fff;
}
.size-row label:hover { border-color: var(--muted-2); }
.size-row input:checked + label { background: var(--ink); color: #fff; border-color: var(--ink); }
.size-row input:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 2px; }
.size-row label .up { display: block; font-size: 10px; font-weight: 600; color: var(--muted); }
.size-row input:checked + label .up { color: rgba(255,255,255,.7); }

.actions { display: flex; flex-direction: column; gap: 11px; margin-top: 30px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 2px solid transparent;
    border-radius: 40px;
    padding: 15px 28px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .1s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-ready-made { background: #0c6972; border-color: #0c6972; color: #fff; }
.btn-ready-made:hover { background: #084d55; border-color: #084d55; color: #fff; }
.btn-ready-made:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.process-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.process-card { display: flex; align-items: center; gap: 24px; padding: 32px; border: 1px solid #d7e1de; border-radius: 16px; background: #edf5f2; color: #164e50; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.process-embroidery { background: #fbf1e8; border-color: #ead9c8; color: #7b4327; }
.process-card > svg { width: 52px; height: 52px; flex: 0 0 52px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.process-card h3 { font-size: 26px; line-height: 1.25; margin: 0 0 7px; }
.process-card p { font-size: 14px; line-height: 1.6; margin: 0; color: #53605b; }
.process-card:hover { border-color: currentColor; box-shadow: 0 5px 18px #0000000b; }
.process-card:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.process-arrow { margin-left: auto; font-size: 26px; }
@media (max-width: 700px) {
    .process-grid { grid-template-columns: 1fr; gap: 14px; }
    .process-card { padding: 24px 20px; gap: 16px; }
    .process-card > svg { width: 40px; height: 40px; flex-basis: 40px; }
    .process-card h3 { font-size: 23px; }
}
.btn-outline { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-lg { padding: 17px 34px; font-size: 15px; }
.btn-hero { padding: 18px 36px; font-size: 14px; }

.spec { border-top: 1px solid var(--border); margin-top: 34px; padding-top: 22px; font-size: 14.5px; }
.spec dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 20px; margin: 0; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; font-weight: 600; }

/* ================================================================ footer */

.site-footer { background: var(--ink); color: rgba(255,255,255,.65); padding: 54px 0 30px; margin-top: 60px; }
.site-footer a { color: rgba(255,255,255,.65); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.site-footer h4 {
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 0 0 13px;
    font-weight: 800;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.foot-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 40px;
    padding-top: 20px;
    font-size: 12.5px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* ================================================================ notice */

.preview-bar {
    background: var(--brand-deep);
    color: #fff;
    text-align: center;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .03em;
}

.empty-state { text-align: center; padding: 90px 20px; }
.empty-state h2 { font-size: 26px; text-transform: uppercase; margin-bottom: 10px; }
.empty-state p { color: var(--muted); max-width: 46ch; margin: 0 auto 24px; }

/* ================================================================ mobile */

@media (max-width: 900px) {
    .hero .wrap { min-height: 62vh; padding-top: 54px; padding-bottom: 54px; }
    .product { grid-template-columns: 1fr; gap: 32px; padding-top: 26px; }
    .gallery { position: static; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 700px) {
    .wrap { padding: 0 16px; }
    .site-header .wrap { height: auto; min-height: 70px; gap: 14px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 12px; }
    .site-nav { display: flex; flex-wrap: wrap; order: 3; width: 100%; margin: 0; gap: 12px 18px; }
    .site-nav > a, .shop-dropdown summary { font-size: 11px; min-height: 36px; display: flex; align-items: center; gap: 5px; }
    .header-actions { margin-left: auto; }
    .logo img { width: 56px; }
    section.block { padding: 44px 0; }
    .strip .wrap { gap: 18px; font-size: 11px; }
    .foot-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * The hidden attribute must actually hide things.
 *
 * `[hidden] { display: none }` lives in the browser's own stylesheet, and ANY
 * author rule setting display beats it — regardless of specificity, because
 * author styles outrank user-agent styles. So `.dz-busy { display: grid }`
 * silently defeated `<div class="dz-busy" hidden>` and left a "Working…"
 * overlay permanently covering the editor.
 *
 * One rule, declared last, closes it for every element on the page.
 * -------------------------------------------------------------------------*/
[hidden] { display: none !important; }

/* ================================================================== cart */

.notice { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14.5px; font-weight: 600; }
.notice.success { background: #e8f5ec; color: #0a7d33; }
.notice.error   { background: #fdeceb; color: #b3261e; }
.notice.info    { background: var(--sunken); color: var(--muted); }

.cart-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 30px; align-items: start; }

.cart-line {
    display: grid;
    grid-template-columns: 84px minmax(0,1fr) 78px 110px 34px;
    gap: 16px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}
.cart-line:first-child { border-top: 1px solid var(--border); }
.cart-line.gone { opacity: .55; }

.cart-thumb {
    width: 84px; height: 105px;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-thumb figure { margin: 0; height: 100%; }

/* Two-sided design: front and back side by side, each captioned. The row's
   first column widens to suit rather than the garments shrinking — at half
   this size a thumbnail stops being readable, which defeats the point. */
.cart-line.two-sided { grid-template-columns: 176px minmax(0,1fr) 78px 110px 34px; }

.cart-thumb.two {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--sunken);
}
.cart-thumb.two figure {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.cart-thumb.two img { flex: 1; min-height: 0; }
.cart-thumb.two figcaption {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    text-align: center;
    padding: 2px 0 3px;
}

@media (max-width: 900px) {
    .cart-line.two-sided { grid-template-columns: 132px minmax(0,1fr) 34px; }
}

.cart-title { font-weight: 700; text-decoration: none; font-size: 15.5px; }
.cart-title:hover { text-decoration: underline; }
.cart-meta { color: var(--muted); font-size: 13.5px; margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cart-meta .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.pill-sm {
    background: var(--brand-tint);
    color: var(--brand-deep);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 8px;
    border-radius: 20px;
}
.cart-note { font-size: 12.5px; color: var(--muted); margin-top: 7px; max-width: 46ch; }
.cart-note.warn { color: var(--brand-deep); font-weight: 600; }
.cart-note.bad  { color: #b3261e; font-weight: 600; }

.cart-qty input {
    width: 100%;
    padding: 9px 8px;
    border: 1px solid var(--border-2, #d4d4d8);
    border-radius: 7px;
    font: inherit;
    text-align: center;
}
.cart-price { text-align: right; }
.cart-price strong { display: block; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.cart-price span { font-size: 12px; color: var(--muted); }

.cart-remove button {
    background: none;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--muted-2);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}
.cart-remove button:hover { color: #b3261e; background: #fdeceb; }

.cart-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.hidden-form { display: none; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- summary */

.cart-summary {
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    position: sticky;
    top: 108px;
}
.cart-summary h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }
.cart-summary dl { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; margin: 0 0 16px; font-size: 14.5px; }
.cart-summary dt { color: var(--muted); }
.cart-summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cart-summary dt small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.cart-summary .good { color: #0a7d33; font-weight: 600; }

.ship-nudge {
    background: #fff;
    border: 1px dashed var(--brand);
    color: var(--brand-deep);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin: 0 0 16px;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 2px solid var(--ink);
    padding-top: 14px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cart-total strong { font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.tax-note { font-size: 12px; color: var(--muted); margin: 10px 0 18px; }
.cart-checkout { width: 100%; }

.coupon { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 18px; }
.coupon label { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row input {
    flex: 1; min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--border-2, #d4d4d8);
    border-radius: 7px;
    font: inherit;
    text-transform: uppercase;
}
.coupon-row .btn { padding: 11px 18px; }

@media (max-width: 900px) {
    .cart-grid { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
    .cart-line {
        grid-template-columns: 68px minmax(0,1fr) 34px;
        grid-template-areas: "thumb detail remove" "thumb qty price";
        row-gap: 10px;
    }
    .cart-thumb { grid-area: thumb; width: 68px; height: 85px; }
    .cart-detail { grid-area: detail; }
    .cart-qty { grid-area: qty; width: 78px; }
    .cart-price { grid-area: price; text-align: left; }
    .cart-remove { grid-area: remove; }
}

/* =========================================================================
   Checkout
   ========================================================================= */

.wrap-narrow { max-width: 780px; }

/* Demo mode is loud on purpose. A checkout that looks finished but takes no
   money is exactly the thing someone forgets is switched off. */
.demo-banner {
    display: flex;
    gap: 14px;
    align-items: baseline;
    flex-wrap: wrap;
    background: var(--brand-tint);
    border: 1px solid var(--brand-soft);
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.55;
}
.demo-banner strong {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 11.5px;
    color: var(--brand-dark);
    white-space: nowrap;
}
.demo-banner span { flex: 1; min-width: 240px; color: var(--ink-2); }

.checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 48px;
    align-items: start;
}

.checkout-form fieldset {
    border: 0;
    border-top: 1px solid var(--border);
    padding: 24px 0 4px;
    margin: 0;
}
.checkout-form fieldset:first-child { border-top: 0; padding-top: 0; }
.checkout-form legend {
    padding: 0;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: 16px;
}

.field { margin-bottom: 16px; }
.field label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 6px;
}
.field label .opt {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: .07em;
    color: var(--muted-2);
    margin-left: 4px;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--border-2, #d4d4d8);
    border-radius: 7px;
    font: inherit;
    background: #fff;
    color: var(--text);
}
.field textarea { resize: vertical; min-height: 76px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
}
.field small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }

.field-row { display: grid; grid-template-columns: minmax(0,1fr) 110px 130px; gap: 12px; }
.field-sm { margin-bottom: 16px; }

.ship-note { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.pay-note  { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; text-align: center; }

/* ------------------------------------------------------------- summary */

.checkout-summary {
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    position: sticky;
    top: 108px;
}
.checkout-summary h3 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 16px;
}
.checkout-summary dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px 12px;
    margin: 0 0 16px;
    font-size: 14.5px;
}
.checkout-summary dt { color: var(--muted); }
.checkout-summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.checkout-summary dt small {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.checkout-summary .good,
.thanks-panel .good { color: #0a7d33; font-weight: 600; }
.checkout-summary .btn { width: 100%; margin-top: 6px; }

.co-items { list-style: none; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--border); }
.co-items li {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 10px 0;
}
.co-items li + li { border-top: 1px solid var(--border); }

.co-thumb {
    position: relative;
    width: 52px;
    height: 62px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.co-thumb img { width: 100%; height: 100%; object-fit: contain; }
/* Quantity rides on the thumbnail rather than taking its own column — the
   summary is narrow and every column costs the product title room. */
.co-qty {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.co-detail { min-width: 0; font-size: 13.5px; line-height: 1.45; }
.co-detail strong { display: block; font-size: 14px; }
.co-detail span { display: block; color: var(--muted); font-size: 12.5px; }
.co-detail .pill-sm { margin-top: 5px; }

.co-price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.check {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    margin: 18px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}
.check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--brand); }

.co-back { display: block; text-align: center; margin-top: 14px; font-size: 13.5px; color: var(--muted); }

/* =========================================================================
   Order confirmation
   ========================================================================= */

.thanks-head { text-align: center; padding: 8px 0 32px; }
.thanks-tick {
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 28px;
    line-height: 54px;
}
.thanks-head h2 { margin: 0 0 10px; }
.thanks-number { font-size: 15px; margin: 0 0 6px; }
.thanks-number strong { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.notice.warn { background: var(--brand-tint); color: var(--ink-2); font-weight: 500; line-height: 1.55; }
.notice.warn strong { display: block; margin-bottom: 3px; font-weight: 800; }

/* What happens next, as a list rather than a progress bar: a bar implies a
   known duration, and made-to-order printing does not have one. */
.thanks-steps {
    list-style: none;
    counter-reset: step;
    margin: 28px 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.thanks-steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 16px 20px;
    font-size: 14px;
}
.thanks-steps li + li { border-top: 1px solid var(--border); }
.thanks-steps li::before {
    content: counter(step);
    grid-row: span 2;
    align-self: start;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sunken);
    color: var(--muted-2);
    font-size: 12.5px;
    font-weight: 800;
    line-height: 26px;
    text-align: center;
}
.thanks-steps li.done::before { content: "\2713"; background: #e8f5ec; color: #0a7d33; }
.thanks-steps li.now::before  { background: var(--brand); color: #fff; }
.thanks-steps strong { display: block; }
.thanks-steps span { display: block; color: var(--muted); font-size: 13px; }

.thanks-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 20px;
}
.thanks-panel h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 0 0 16px;
}
.thanks-panel dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px 12px;
    margin: 0 0 16px;
    font-size: 14.5px;
}
.thanks-panel dt { color: var(--muted); }
.thanks-panel dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.thanks-panel dt small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.thanks-panel address { font-style: normal; line-height: 1.7; font-size: 14.5px; }

.thanks-help { font-size: 13.5px; color: var(--muted); text-align: center; margin: 24px 0; }
.thanks-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }

@media (max-width: 900px) {
    .checkout-grid { grid-template-columns: 1fr; gap: 32px; }
    /* Sticky is worse than useless once the summary sits below the form. */
    .checkout-summary { position: static; }
}

@media (max-width: 560px) {
    .field-row { grid-template-columns: 1fr 1fr; }
    .field-row .field:first-child { grid-column: 1 / -1; }
}

/* ------------------------------------------------- printing method picker */

/* Cards, side by side. "DTG" and "Embroidery" do not explain themselves, so
   each option carries one line saying when to pick it — which a <select>
   cannot show at the moment of choosing.
 *
 * The native radio is hidden and the whole card becomes the control, with a
 * drawn dot standing in for it. Clicking anywhere on the card selects it, and
 * the label stays associated with the input, so keyboard and screen-reader
 * behaviour is unchanged. */
.method-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}
.method-row input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.method-row label {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 13px 14px;
    cursor: pointer;
    background: var(--surface);
    transition: border-color .12s ease, background .12s ease;
}
/* Every child is placed explicitly. The label holds three grid items — the
   dot, the name and the blurb — in a two-column grid, so without this the
   blurb wraps onto row two into the 16px dot column and renders one word per
   line. */
.method-row label::before {
    content: '';
    grid-column: 1;
    grid-row: 1;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    border: 1.5px solid var(--muted-2);
    background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.method-row label:hover { border-color: var(--muted-2); }

.method-row input:checked + label { border-color: var(--brand); background: var(--brand-tint); }
.method-row input:checked + label::before {
    border-color: var(--brand);
    /* The dot itself, drawn with an inset shadow so it needs no extra element. */
    box-shadow: inset 0 0 0 4px var(--brand);
}
.method-row input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }

.method-row .mname {
    grid-column: 2;
    grid-row: 1;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.3;
}
.method-row .mname .up { color: var(--brand-deep); font-weight: 600; margin-left: 5px; }
.method-row .mblurb {
    grid-column: 2;
    grid-row: 2;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
    margin-top: 4px;
}


/* =========================================================================
   Content pages — About, Contact, FAQ, policies
   ========================================================================= */

.page-head { padding: 8px 0 28px; border-bottom: 2px solid var(--ink); margin-bottom: 32px; }
.page-head h1 { font-size: clamp(30px, 5vw, 46px); }
.page-head p { color: var(--muted); font-size: 17px; margin: 12px 0 0; max-width: 60ch; }

/* A measure of about 68 characters. Long-form text set the full width of a
   1200px page is genuinely hard to read — the eye loses the line return. */
.prose { max-width: 68ch; font-size: 16.5px; line-height: 1.75; }

.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 18px; }

.prose .lede { font-size: 19px; line-height: 1.6; color: var(--ink-2); margin-bottom: 28px; }

.prose h2 {
    font-size: 22px;
    margin: 38px 0 12px;
    padding-top: 4px;
    letter-spacing: -.01em;
}
.prose h3 {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--brand-deep);
    margin: 26px 0 10px;
}

.prose ul { margin: 0 0 18px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--brand); }

.prose strong { font-weight: 700; }
.prose a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--brand-dark); }

/* Phone and email on the contact page: big enough to tap without hunting. */
.prose .big-link {
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--brand);
    padding-bottom: 2px;
}
.prose .big-link:hover { border-bottom-width: 3px; }

.page-siblings {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}
.page-siblings h2 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: 12px;
}
.page-siblings ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.page-siblings a { font-size: 14.5px; font-weight: 600; }

/* ------------------------------------------------------------ card entry */

/* Square draws the fields inside its own iframe, so all this styles is the
   box they sit in. Matching the height of our own inputs stops the form
   jumping when the iframe finishes loading. */
#card-container { min-height: 90px; }

.pay-error {
    background: #fdeceb;
    color: #b3261e;
    border-radius: 7px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-weight: 600;
    margin: 12px 0 0;
}

.pay-secured {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}
.pay-secured svg { flex: 0 0 auto; }
.shop-filters { display:flex; flex-wrap:wrap; gap:16px; align-items:end; margin-bottom:28px; }
.shop-filters label { display:grid; gap:6px; }
.shop-filters select { max-width:100%; padding:12px; border:1px solid #ccc; border-radius:8px; background:white; font:inherit; }
.embroidery-contact { padding:24px; margin:20px 0; background:#f7f1e9; border-radius:12px; }
.embroidery-contact .btn { margin:4px 4px 4px 0; white-space:normal; }
.contact-form { display:grid; gap:16px; }
.contact-form label { display:grid; gap:6px; font-weight:600; }
.contact-form input, .contact-form select, .contact-form textarea { box-sizing:border-box; width:100%; min-width:0; padding:12px; border:1px solid #bbb; border-radius:8px; background:white; font:inherit; }
.contact-form details label { margin-top:12px; }
.contact-form button { justify-self:start; }
.contact-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.contact-notice { padding:14px; border:2px solid currentColor; border-radius:8px; }
.purchase-picker { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.purchase-picker p { flex-basis:100%; margin:0; font-weight:600; }
.purchase-picker .btn { white-space:normal; text-align:left; }