@charset "utf-8";
/* ==========================================================================
   Cosh Boy — public site
   --------------------------------------------------------------------------
   The 1950s tabloid-poster look, as a real stylesheet. Colours are sampled
   from assets/images/content/mainFull.jpg rather than approximated: the orange
   is 42% of that artwork and the logo red is the same #8E1821 the site already
   uses for buttons.

   Loaded AFTER custom.css on master-page sections (shop, checkout), so a few
   rules here carry !important purely to beat custom.css, which is written
   almost entirely in !important — including .container { max-width: 800px }.
   ========================================================================== */

:root {
    --cb-orange: #FD741C;
    --cb-ink:    #282826;
    --cb-red:    #8E1821;
    --cb-red-dk: #76141C;
    --cb-paper:  #F4F2ED;
    --cb-yellow: #F2E96B;
    --cb-muted:  #6f6b64;
}

body.cosh {
    margin: 0 !important;
    font-family: 'Fauna One', Georgia, serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--cb-ink) !important;
    background: var(--cb-orange) !important;
}

body.cosh a { color: var(--cb-red); text-decoration: none; }
body.cosh a:hover { color: var(--cb-ink); text-decoration: none; }

body.cosh h1, body.cosh h2, body.cosh h3, .cosh-display {
    font-family: Anton, Impact, 'Haettenschweiler', sans-serif !important;
    font-weight: 400 !important;
    margin: 0;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--cb-ink);
}

/* The public site's container is pinned to 800px in custom.css, which is what
   squeezes every page. Widened here for redesigned sections only. */
body.cosh .container,
body.cosh .cosh-wrap {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    width: 100%;
}

/* ---------- navigation ---------- */
.cosh-nav { background: var(--cb-ink); }
.cosh-nav__in {
    max-width: 1180px; margin: 0 auto; padding: 0 32px;
    display: flex; align-items: center; justify-content: space-between;
    min-height: 54px; gap: 18px; flex-wrap: wrap;
}
.cosh-nav__links { display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
    list-style: none; margin: 0; padding: 0; }
.cosh-nav__links a {
    color: #fff; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    display: block; padding: 6px 0;
}
.cosh-nav__links a:hover, .cosh-nav__links a.on { color: var(--cb-yellow); }

/* ---------- the diagonal banner motif ---------- */
.cosh-slash-wrap { overflow: hidden; }
.cosh-slash {
    background: var(--cb-ink); color: var(--cb-yellow);
    font-family: Anton, Impact, sans-serif;
    transform: rotate(-2.4deg);
    padding: 10px 0; text-align: center;
    font-size: 19px; letter-spacing: .11em; text-transform: uppercase;
    /* wider than the viewport so rotation never reveals the corners */
    width: 108%; margin-left: -4%;
}

/* ---------- buttons ---------- */
body.cosh .btn, .cosh-btn {
    display: inline-block; background: var(--cb-red) !important; color: #fff !important;
    font-family: Anton, Impact, sans-serif !important; font-size: 15px !important;
    letter-spacing: .13em; text-transform: uppercase;
    padding: 13px 28px !important; border: 0 !important; border-radius: 0 !important;
}
body.cosh .btn:hover, .cosh-btn:hover { background: var(--cb-ink) !important; color: #fff !important; }
.cosh-btn--ghost {
    background: transparent !important; color: var(--cb-ink) !important;
    border: 2px solid var(--cb-ink) !important;
}
.cosh-btn--ghost:hover { background: var(--cb-ink) !important; color: #fff !important; }

.cosh-eyebrow {
    font-family: Anton, Impact, sans-serif; font-size: 13px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--cb-ink); opacity: .72;
}
.cosh-rule { height: 3px; background: var(--cb-ink); }

/* ---------- section headings ---------- */
.cosh-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: 16px; flex-wrap: wrap;
}
.cosh-head h2 { font-size: 40px; line-height: 1; }
.cosh-head a {
    font-family: Anton, Impact, sans-serif; letter-spacing: .12em;
    text-transform: uppercase; font-size: 13px;
}

/* ---------- product cards ---------- */
.cosh-grid { display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cosh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cosh-card { background: #fff; border: 1px solid rgba(40,40,38,.17); display: block; color: inherit; }
.cosh-card:hover { box-shadow: 0 4px 14px rgba(40,40,38,.18); color: inherit; }
.cosh-card__img { aspect-ratio: 1/1; background: var(--cb-paper); overflow: hidden; }
.cosh-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cosh-card__b { padding: 13px 14px 16px; }
.cosh-card__n {
    font-family: Anton, Impact, sans-serif; font-size: 16px; text-transform: uppercase;
    line-height: 1.15; margin-bottom: 5px;
}
.cosh-card__s { font-size: 12px; color: var(--cb-muted); line-height: 1.45; min-height: 32px; }
.cosh-card__p { font-family: Anton, Impact, sans-serif; font-size: 19px; color: var(--cb-red); margin-top: 7px; }

/* ---------- panels ---------- */
.cosh-band { padding: 52px 0 58px; }
.cosh-band--paper { background: var(--cb-paper); }
.cosh-band--ink { background: var(--cb-ink); color: #fff; }
.cosh-band--ink h1, .cosh-band--ink h2, .cosh-band--ink h3 { color: #fff; }

/* ---------- forms ---------- */
body.cosh .form-control, .cosh-fld {
    padding: 12px 13px !important; border: 2px solid var(--cb-ink) !important;
    border-radius: 0 !important; font-family: inherit !important; font-size: 14px !important;
    background: #fff !important; color: var(--cb-ink) !important; width: 100%;
    height: auto !important; box-shadow: none !important;
}
body.cosh .form-control:focus, .cosh-fld:focus { border-color: var(--cb-red) !important; }
body.cosh label, body.cosh .control-label {
    font-family: Anton, Impact, sans-serif; font-size: 12px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--cb-muted); margin-bottom: 4px; display: block;
}

/* ---------- friends scrapbook ---------- */
.cosh-wall { columns: 4; column-gap: 16px; }
.cosh-wall figure {
    break-inside: avoid; margin: 0 0 16px; background: #fff; padding: 9px 9px 0;
    box-shadow: 0 3px 9px rgba(0,0,0,.2);
}
.cosh-wall figure:nth-child(7n+1) { transform: rotate(-1.4deg); }
.cosh-wall figure:nth-child(7n+2) { transform: rotate(0.9deg); }
.cosh-wall figure:nth-child(7n+3) { transform: rotate(-0.5deg); }
.cosh-wall figure:nth-child(7n+4) { transform: rotate(1.6deg); }
.cosh-wall figure:nth-child(7n+5) { transform: rotate(-1.1deg); }
.cosh-wall figure:nth-child(7n+6) { transform: rotate(0.4deg); }
.cosh-wall figure:nth-child(7n+7) { transform: rotate(1.2deg); }
.cosh-wall img { width: 100%; display: block; }
.cosh-wall figcaption { font-size: 12px; line-height: 1.45; padding: 9px 3px 11px; color: #3a3833; }

/* ---------- footer ---------- */
.cosh-foot { background: var(--cb-ink); color: #fff; padding: 40px 0 30px; }
.cosh-foot__tag {
    font-family: Anton, Impact, sans-serif; font-size: 25px; line-height: 1.35;
    text-transform: uppercase; color: var(--cb-orange);
}
.cosh-foot a { color: #cfcbc2; font-size: 13px; }
.cosh-foot a:hover { color: var(--cb-yellow); }
.cosh-foot__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }

/* ---------- hero ---------- */
.cosh-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: end;
    padding: 44px 0 10px; }
.cosh-hero h1 { font-size: 92px; line-height: .9; }
.cosh-hero__strap { font-size: 14px; line-height: 1.75; max-width: 410px; margin: 0 0 22px; }
.cosh-hero__art { width: 100%; max-width: 470px; display: block; margin-left: auto; }
.cosh-hero__logo { width: 232px; display: block; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
    .cosh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cosh-wall { columns: 3; }
    .cosh-foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    body.cosh .container, body.cosh .cosh-wrap { padding-left: 18px !important; padding-right: 18px !important; }
    .cosh-hero { grid-template-columns: 1fr; padding-top: 26px; }
    .cosh-hero h1 { font-size: 44px; }
    .cosh-hero__logo { width: 172px; }
    .cosh-hero__art { max-width: 100%; }
    .cosh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .cosh-wall { columns: 2; }
    .cosh-head h2 { font-size: 28px; }
    .cosh-slash { font-size: 13px; letter-spacing: .07em; }
    .cosh-foot__cols { grid-template-columns: 1fr; gap: 22px; }
    .cosh-band { padding: 32px 0 36px; }
}
@media (max-width: 460px) {
    .cosh-wall { columns: 1; }
}

/* ---------- mini cart in the nav ---------- */
.cosh-nav__burger {
    display: none; background: none; border: 0; color: #fff; font-size: 20px;
    padding: 8px 4px; cursor: pointer; line-height: 1;
}
.cosh-cart { position: relative; }
.cosh-cart__btn {
    background: none; border: 1px solid rgba(255,255,255,.45); color: #fff;
    font-family: Anton, Impact, sans-serif; font-size: 12px; letter-spacing: .12em;
    text-transform: uppercase; padding: 7px 14px; cursor: pointer;
}
.cosh-cart__btn:hover { background: rgba(255,255,255,.12); }
.cosh-cart__menu {
    min-width: 320px; padding: 14px; border-radius: 0; border: 2px solid var(--cb-ink);
    z-index: 2000;
}
.cosh-cart__table { margin-bottom: 8px; font-size: 12px; }
.cosh-cart__table td { padding: 6px 4px; vertical-align: middle; }
.cosh-cart__table img { max-width: 44px; height: auto; }
.cosh-cart__totals div { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.cosh-cart__grand {
    font-family: Anton, Impact, sans-serif; font-size: 17px; color: var(--cb-red);
    border-top: 2px solid var(--cb-ink); margin-top: 6px; padding-top: 7px;
}

@media (max-width: 860px) {
    .cosh-nav__burger { display: block; }
    .cosh-nav__collapse { flex-basis: 100%; }
    .cosh-nav__links { flex-direction: column; gap: 0; align-items: flex-start; padding-bottom: 10px; }
    .cosh-nav__links a { padding: 9px 0; }
}

/* Small-screen nav: the links live in .cosh-nav__collapse, toggled by the burger.
   Bootstrap's own .collapse is deliberately not used here — pairing it with
   navbar-expand-* is what kept the links visible on desktop, and dropping that class
   in the redesign hid the whole menu at every width. */
@media (min-width: 861px) {
    .cosh-nav__collapse { display: block !important; }
}
@media (max-width: 860px) {
    .cosh-nav__collapse { display: none; }
    .cosh-nav__collapse.is-open { display: block; }
}

/* Nav and footer links sit on charcoal, so they must beat the blanket `body.cosh a`
   rule above — a single class loses to it and the links rendered dark red on near-black. */
body.cosh .cosh-nav__links a,
body.cosh .cosh-cart__btn,
body.cosh .cosh-nav__burger { color: #fff; }
body.cosh .cosh-nav__links a:hover { color: var(--cb-yellow); }
body.cosh .cosh-foot a { color: #cfcbc2; }
body.cosh .cosh-foot a:hover { color: var(--cb-yellow); }

/* Page headings sat hard against the nav bar and Anton's cap-height got clipped.
   Space for the master-page content area and the standalone pages alike. */
body.cosh .cosh-main { padding-top: 30px !important; padding-bottom: 20px !important; }
body.cosh h1 { padding-top: 2px; }

/* Shop category strip and page heading, restyled to match. */
body.cosh .headlinetext-shop, body.cosh .headlinetext, body.cosh .headlinetext2 {
    font-family: Anton, Impact, sans-serif !important;
    color: var(--cb-ink) !important;
}
body.cosh .product-filter {
    background: #fff; border: 1px solid rgba(40,40,38,.17);
    padding: 14px 16px; margin-bottom: 18px;
}
body.cosh .nav-pills, body.cosh .categoryNav { margin-bottom: 18px; }

/* The shop's headline was right-aligned in the old layout; left-aligned now so it sits
   with every other page heading. */
body.cosh .headlinetext-shop.text-right,
body.cosh .headlinetext.text-right { text-align: left !important; }

/* contact.aspx uses Material-style markup: the <label> comes AFTER its input in the
   source and was floated into place by a stylesheet the site no longer loads. Without
   that, the label rendered underneath its field. Flip the pair so the label reads above
   the input, without touching the markup (and so the asp:TextBox IDs stay as they are). */
body.cosh .md-form { display: flex; flex-direction: column-reverse; margin-bottom: 14px; }
body.cosh .md-form label { margin: 0 0 4px; }
body.cosh .md-form .form-control { margin-bottom: 0 !important; }

/* ==========================================================================
   Turning it back towards the old site
   --------------------------------------------------------------------------
   The first pass came out tidy but generic. The original's character came from
   three things I had flattened out: real paper grain behind the content, a much
   bigger display scale (.headlinetext was 120px), and hard black printed rules
   rather than soft grey card borders. Those go back in here.
   ========================================================================== */

/* 1. Paper, not a flat swatch. The same texture the old .containerback used. */
body.cosh .cosh-band--paper,
body.cosh .cosh-main,
body.cosh .containerback {
    background-color: #F4F2ED;
    background-image: url('/assets/images/paper-texture-2.jpg') !important;
    background-repeat: repeat !important;
}

/* 2. The display scale the site actually had. 120px was the old headline size;
      these sit just under it so they still shout without wrapping badly. */
body.cosh .cosh-hero h1 { font-size: 104px; line-height: .86; }
body.cosh .cosh-page-title { font-size: 84px !important; line-height: .88 !important; }
body.cosh .cosh-head h2 { font-size: 58px; line-height: .92; }

/* 3. Printed rules, not web borders. */
body.cosh .cosh-rule { height: 5px; background: var(--cb-ink); }
body.cosh .cosh-head { border-bottom: 0; align-items: baseline; }
body.cosh .cosh-card {
    background: #fff;
    border: 2px solid var(--cb-ink);
}
body.cosh .cosh-card:hover { box-shadow: 5px 5px 0 var(--cb-ink); }
body.cosh .cosh-card__img { border-bottom: 2px solid var(--cb-ink); }
body.cosh .cosh-card__n { font-size: 18px; }
body.cosh .cosh-card__p { font-size: 22px; }

/* the scrapbook prints get a harder edge too */
body.cosh .cosh-wall figure { border: 1px solid rgba(40,40,38,.35); box-shadow: 4px 4px 0 rgba(40,40,38,.35); }

/* 4. Section headings read as a masthead: heavy rule above, kicker, big word. */
body.cosh .cosh-head h2::after { content: ''; }
body.cosh .cosh-band { padding-top: 46px; }

/* 5. The old footer tagline was 28px Anton on a 60px line. */
body.cosh .cosh-foot__tag { font-size: 30px; line-height: 1.45; }

/* 6. Buttons as printed blocks. */
body.cosh .btn, body.cosh .cosh-btn {
    border: 2px solid var(--cb-ink) !important;
    box-shadow: 4px 4px 0 var(--cb-ink);
}
body.cosh .btn:hover, body.cosh .cosh-btn:hover { box-shadow: 2px 2px 0 var(--cb-ink); }

/* 7. Newsprint behind the Daily Cosh, as the old .containernews did. */
body .containernews {
    background-image: url('/assets/images/newspaperbackground2.jpg') !important;
    background-repeat: repeat !important;
}

@media (max-width: 760px) {
    body.cosh .cosh-hero h1 { font-size: 46px; }
    body.cosh .cosh-page-title { font-size: 42px !important; }
    body.cosh .cosh-head h2 { font-size: 30px; }
    body.cosh .cosh-foot__tag { font-size: 20px; }
}

/* The printed drop-shadow belongs on real calls to action, not on the shop's category
   strip or the list/grid toggles — those are rendered as .btn-default by
   shop/default.aspx.cs and picked it up from the blanket .btn rule above. */
body.cosh .btn-default,
body.cosh .btn-group .btn,
body.cosh .btn-xs,
body.cosh .btn-sm {
    box-shadow: none !important;
    border-width: 2px !important;
}
body.cosh .btn-group { box-shadow: none !important; }

/* Give the hero's second and third lines room — .86 had "AN" and "'EDWARDIAN'"
   almost touching. The poster sets them apart. */
body.cosh .cosh-hero h1 { line-height: .95; }

/* ---------- closer to the old site, without losing the modern layout ---------- */

/* The brush-script mark signing off the footer. */
.cosh-foot__mark { width: 210px; max-width: 60%; display: block; margin-bottom: 14px; }

/* Newspaper section divider: hairline above, heavy rule below, the way the Daily Cosh
   masthead is set. Gives each section the feel of a page furniture break rather than a
   web card heading. */
body.cosh .cosh-head {
    border-top: 1px solid rgba(40,40,38,.45);
    padding-top: 10px;
}
body.cosh .cosh-head h2 { letter-spacing: .005em; }

/* Kicker above section headings, in the tabloid manner. */
.cosh-kicker {
    font-family: Anton, Impact, sans-serif;
    font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--cb-red); margin-bottom: 2px;
}

@media (max-width: 760px) {
    .cosh-foot__mark { width: 160px; }
}

/* ==========================================================================
   Round 2 — the design handoff of 22 Sep 2026
   --------------------------------------------------------------------------
   Everything below uses new class names, prefixed cb-, on purpose. The home
   and friends pages were NOT redesigned in this round and are built from the
   cosh- classes above (2px ink cards, paper texture, the big display scale).
   Restyling those classes would have changed both pages; adding new ones
   leaves them exactly as they are. Only the nav and footer are shared.

   Values are lifted from the design files, not approximated. The three
   motifs the brief calls out are the slash banner (.cb-slash), the price
   sticker (.cb-sticker) and the tilted photo mount (.cb-mount).
   ========================================================================== */

:root {
    --cb-body2:  #4A4842;   /* secondary paragraphs on paper */
    --cb-flink:  #CFCBC2;   /* links on charcoal */
    --cb-fmeta:  #8F8A82;   /* copyright line */
    --cb-was:    #9B968D;   /* struck-through price */
    --cb-hair:   rgba(40,40,38,.17);
    --cb-anton:  Anton, Impact, "Haettenschweiler", sans-serif;
}

/* ---------- page shell ---------- */

/* master1's content wrapper normally centres an 1180px paper box. Redesigned pages
   run their bands edge to edge, so for them it is switched to this instead. */
body.cosh .cb-main {
    max-width: none !important; width: auto !important;
    margin: 0 !important; padding: 0 !important;
    background: none !important;
    /* the slash banner is a rotated full-width strip; without this its corners push a
       fraction of a pixel past the viewport and give the page a sideways scroll */
    overflow-x: clip;
}
.cb-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

/* ---------- type ---------- */
.cb-eyebrow {
    font-family: var(--cb-anton); font-size: 13px; letter-spacing: .22em;
    text-transform: uppercase; opacity: .72;
}
body.cosh .cb-h1 { font-size: 84px; line-height: .88; margin-top: 4px; padding-top: 0; }
body.cosh .cb-h1--product { font-size: 60px; line-height: .92; }
body.cosh .cb-h1--huge { font-size: 132px; line-height: .82; }
.cb-lede { font-size: 15px; line-height: 1.75; margin: 16px 0 0; max-width: 470px; }
.cb-label {
    font-family: var(--cb-anton); font-size: 12px; letter-spacing: .18em;
    text-transform: uppercase; opacity: .75; margin-bottom: 10px;
}

/* ---------- hero ---------- */
.cb-hero {
    max-width: 1180px; margin: 0 auto; padding: 44px 32px 0; box-sizing: border-box;
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 30px; align-items: end;
}
.cb-hero--wide  { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
.cb-hero--mid   { grid-template-columns: minmax(0,1.1fr)  minmax(0,1fr); }
.cb-hero__art   { text-align: right; }
.cb-hero__art img { width: 100%; max-width: 390px; display: inline-block; }

.cb-stats { display: flex; gap: 26px; margin-top: 22px; align-items: flex-end; }
.cb-stat__n { font-family: var(--cb-anton); font-size: 34px; line-height: 1; color: var(--cb-red); }
.cb-stat__l {
    font-family: var(--cb-anton); font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase; opacity: .72;
}
.cb-stat__rule { width: 2px; height: 38px; background: rgba(40,40,38,.3); }

/* ---------- motif 1: the slash banner ---------- */
.cb-slash {
    background: var(--cb-ink); color: var(--cb-yellow);
    font-family: var(--cb-anton); font-size: 19px; letter-spacing: .11em;
    text-transform: uppercase; text-align: center;
    padding: 10px 0; margin: 24px 0 0;
    transform: rotate(-2.4deg);
    position: relative; z-index: 2;   /* it overlaps the band below */
}
.cb-slash + .cb-band { margin-top: 22px; }

/* ---------- bands ---------- */
.cb-band        { background: var(--cb-paper); padding: 44px 0 56px; }
.cb-band--ink   { background: var(--cb-ink); color: #fff; }
.cb-band--white { background: #fff; }
body.cosh .cb-band--ink h1, body.cosh .cb-band--ink h2, body.cosh .cb-band--ink h3 { color: #fff; }

.cb-rule { height: 3px; background: var(--cb-ink); margin-bottom: 34px; }

.cb-sechead {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin: 48px 0 14px;
}
.cb-sechead:first-child { margin-top: 0; }
body.cosh .cb-sechead h2 { font-size: 40px; line-height: 1; }
body.cosh .cb-sechead a,
.cb-sechead__note {
    font-family: var(--cb-anton); font-size: 13px; letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---------- buttons ---------- */
body.cosh .cb-btn {
    display: inline-block; -webkit-appearance: none; appearance: none; cursor: pointer;
    background: var(--cb-red); color: #fff; border: 2px solid var(--cb-red); border-radius: 0;
    font-family: var(--cb-anton); font-size: 15px; letter-spacing: .13em; line-height: 1.2;
    text-transform: uppercase; text-align: center; padding: 13px 28px;
}
body.cosh .cb-btn:hover, body.cosh .cb-btn:focus-visible {
    background: var(--cb-ink); border-color: var(--cb-ink); color: #fff;
}
body.cosh .cb-btn--ink { background: transparent; color: var(--cb-ink); border-color: var(--cb-ink); }
body.cosh .cb-btn--ink:hover { background: var(--cb-ink); color: #fff; }
body.cosh .cb-btn--yellow { background: var(--cb-yellow); color: var(--cb-ink); border-color: var(--cb-yellow); }
body.cosh .cb-btn--lg { font-size: 18px; padding: 16px 30px; }
body.cosh .cb-btn--block { display: block; width: 100%; }
body.cosh .cb-btn[disabled], body.cosh .cb-btn.aspNetDisabled { opacity: .45; cursor: not-allowed; }

/* Visible focus everywhere, as the brief asks: never remove the outline. */
body.cosh .cb-main a:focus-visible,
body.cosh .cb-main button:focus-visible,
body.cosh .cb-main input:focus-visible,
body.cosh .cb-main select:focus-visible,
body.cosh .cb-main textarea:focus-visible {
    outline: 2px solid var(--cb-yellow); outline-offset: 2px;
}

/* ---------- filter chips and sort ---------- */
.cb-toolbar {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; margin-bottom: 14px;
}
.cb-chips { display: flex; gap: 9px; flex-wrap: wrap; }
body.cosh .cb-chip {
    display: inline-block; font-family: var(--cb-anton); font-size: 12px; letter-spacing: .13em;
    text-transform: uppercase; padding: 9px 16px; border: 2px solid var(--cb-ink); color: var(--cb-ink);
}
body.cosh .cb-chip.is-on, body.cosh .cb-chip:hover { background: var(--cb-ink); color: #fff; }
.cb-sort {
    font-family: var(--cb-anton); font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
    display: flex; gap: 14px; align-items: center;
}
.cb-sort__l { opacity: .6; }
body.cosh .cb-sort a { opacity: .75; }
body.cosh .cb-sort a.is-on { opacity: 1; border-bottom: 2px solid var(--cb-red); }

/* ---------- product grid and cards ---------- */
.cb-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 30px 26px;
}
.cb-grid--240 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cb-grid--270 { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 34px 26px; }

/* the card must NOT clip: the sticker hangs off its corner */
body.cosh .cb-pcard {
    display: block; position: relative; background: #fff;
    border: 1px solid var(--cb-hair); color: var(--cb-ink);
}
body.cosh .cb-pcard:hover { color: var(--cb-ink); }
.cb-pcard__img { aspect-ratio: 1/1; background: var(--cb-paper); overflow: hidden; position: relative; }
.cb-pcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-pcard__b { padding: 14px 15px 17px; }
.cb-pcard__n { font-family: var(--cb-anton); font-size: 17px; text-transform: uppercase; line-height: 1.12; }
.cb-pcard__s { font-size: 12px; color: var(--cb-muted); line-height: 1.45; margin-top: 5px; }
.cb-pcard__z {
    font-family: var(--cb-anton); font-size: 11px; letter-spacing: .16em;
    text-transform: uppercase; opacity: .6; margin-top: 9px;
}

/* ---------- motif 2: the price sticker ---------- */
.cb-sticker {
    position: absolute; top: -11px; right: -11px; z-index: 1;
    background: var(--cb-red); color: #fff;
    font-family: var(--cb-anton); font-size: 18px; line-height: 1.2; padding: 8px 12px;
    box-shadow: 0 3px 8px rgba(0,0,0,.28);
    transform: rotate(-7deg);
}
/* Alternating tilt so no two neighbours match: the design's own sequence. */
.cb-grid > :nth-child(7n+2) .cb-sticker { transform: rotate(5deg); }
.cb-grid > :nth-child(7n+3) .cb-sticker { transform: rotate(-4deg); }
.cb-grid > :nth-child(7n+4) .cb-sticker { transform: rotate(6deg); }
.cb-grid > :nth-child(7n+5) .cb-sticker { transform: rotate(-6deg); }
.cb-grid > :nth-child(7n+6) .cb-sticker { transform: rotate(4deg); }
.cb-grid > :nth-child(7n+7) .cb-sticker { transform: rotate(-5deg); }

/* ---------- motif 3: the tilted photo mount ---------- */
.cb-mount {
    margin: 0; background: #fff; padding: 9px 9px 0;
    box-shadow: 0 3px 10px rgba(0,0,0,.2); transform: rotate(-1.4deg);
}
.cb-mount img { width: 100%; display: block; }
.cb-mount figcaption { font-size: 12px; line-height: 1.45; padding: 9px 3px 12px; color: #3a3833; }
.cb-mount--lg { padding: 12px 12px 0; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
/* the same seven-step cycle the friends wall uses */
.cb-tilts > :nth-child(7n+2) .cb-mount, .cb-tilts > .cb-mount:nth-child(7n+2) { transform: rotate(.9deg); }
.cb-tilts > :nth-child(7n+3) .cb-mount, .cb-tilts > .cb-mount:nth-child(7n+3) { transform: rotate(-.5deg); }
.cb-tilts > :nth-child(7n+4) .cb-mount, .cb-tilts > .cb-mount:nth-child(7n+4) { transform: rotate(1.6deg); }
.cb-tilts > :nth-child(7n+5) .cb-mount, .cb-tilts > .cb-mount:nth-child(7n+5) { transform: rotate(-1.1deg); }
.cb-tilts > :nth-child(7n+6) .cb-mount, .cb-tilts > .cb-mount:nth-child(7n+6) { transform: rotate(.4deg); }
.cb-tilts > :nth-child(7n+7) .cb-mount, .cb-tilts > .cb-mount:nth-child(7n+7) { transform: rotate(1.2deg); }

/* ---------- charcoal info strip (sizing / postage / returns) ---------- */
.cb-info {
    margin-top: 44px; background: var(--cb-ink); padding: 26px 30px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px;
}
.cb-info__h { font-family: var(--cb-anton); font-size: 17px; text-transform: uppercase; color: var(--cb-yellow); }
.cb-info p { font-size: 13px; color: var(--cb-flink); line-height: 1.65; margin: 6px 0 0; }
body.cosh .cb-info a { color: var(--cb-yellow); }

/* ---------- pagination ---------- */
.cb-pager { display: flex; gap: 10px; justify-content: center; margin-top: 40px; flex-wrap: wrap;
    list-style: none; padding: 0; }
.cb-pager li { list-style: none; }
body.cosh .cb-pager a, .cb-pager .cb-pager__cur {
    display: inline-block; font-family: var(--cb-anton); font-size: 13px; letter-spacing: .13em;
    text-transform: uppercase; border: 2px solid var(--cb-ink); padding: 10px 18px; color: var(--cb-ink);
}
body.cosh .cb-pager a:hover, body.cosh .cb-pager .is-on a, .cb-pager .cb-pager__cur { background: var(--cb-ink); color: #fff; }

/* ---------- breadcrumb ---------- */
.cb-crumbs {
    max-width: 1180px; margin: 0 auto; padding: 22px 32px 0; box-sizing: border-box;
    font-family: var(--cb-anton); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.cb-crumbs__sep { opacity: .5; }
.cb-crumbs__here { opacity: .75; }

/* ---------- product page ---------- */
.cb-product {
    max-width: 1180px; margin: 0 auto; padding: 26px 32px 44px; box-sizing: border-box;
    display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 44px; align-items: start;
}
.cb-shot { background: #fff; border: 2px solid var(--cb-ink); position: relative; }
.cb-shot img { width: 100%; display: block; }
.cb-flag {
    position: absolute; top: -14px; left: -14px; z-index: 1;
    background: var(--cb-yellow); color: var(--cb-ink);
    font-family: var(--cb-anton); font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
    padding: 8px 13px; transform: rotate(-7deg); box-shadow: 0 3px 9px rgba(0,0,0,.3);
}
.cb-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
body.cosh .cb-thumbs a { display: block; background: #fff; border: 1px solid rgba(40,40,38,.25); }
body.cosh .cb-thumbs a.is-on { border: 2px solid var(--cb-ink); }
.cb-thumbs img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }

.cb-price { font-family: var(--cb-anton); font-size: 44px; line-height: 1; color: var(--cb-red); margin: 14px 0 0; }
.cb-desc { font-size: 16px; line-height: 1.75; margin: 16px 0 0; max-width: 480px; }
.cb-rule--gap { margin: 26px 0 20px; }

.cb-opts { margin-bottom: 18px; }
.cb-sizes { display: flex; gap: 9px; flex-wrap: wrap; }
body.cosh .cb-size {
    -webkit-appearance: none; appearance: none; border-radius: 0; cursor: pointer;
    border: 2px solid var(--cb-ink); background: transparent; color: var(--cb-ink);
    padding: 11px 19px; font-family: var(--cb-anton); font-size: 15px; line-height: 1.2;
}
body.cosh .cb-size[aria-pressed="true"] { background: var(--cb-ink); color: #fff; }
/* the real dropdown stays in the page, and in the postback, once buttons stand in for it */
.cb-chips-for { position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cb-size-note { display: flex; gap: 16px; align-items: center; margin-top: 11px; flex-wrap: wrap; }
body.cosh .cb-size-note a {
    font-family: var(--cb-anton); font-size: 12px; letter-spacing: .13em;
    text-transform: uppercase; border-bottom: 2px solid var(--cb-red);
}
.cb-size-note span { font-size: 13px; color: var(--cb-body2); }

.cb-buy { display: flex; gap: 12px; align-items: stretch; margin-top: 24px; flex-wrap: wrap; }
.cb-qty { display: flex; border: 2px solid var(--cb-ink); background: #fff; }
.cb-qty button {
    -webkit-appearance: none; appearance: none; background: none; border: 0; cursor: pointer;
    padding: 13px 15px; font-family: var(--cb-anton); font-size: 17px; color: var(--cb-ink);
}
.cb-qty button:first-child { border-right: 2px solid var(--cb-ink); }
.cb-qty button:last-child  { border-left: 2px solid var(--cb-ink); }
body.cosh .cb-qty input {
    width: 54px; border: 0; border-radius: 0; padding: 13px 4px; text-align: center; background: #fff;
    font-family: var(--cb-anton); font-size: 17px; color: var(--cb-ink);
}
.cb-buy .cb-btn { flex: 1; min-width: 220px; }

.cb-post { background: var(--cb-ink); color: #fff; padding: 20px 22px; margin-top: 22px; }
.cb-post__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; }
.cb-post__row:first-child { padding-top: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.cb-post__svc { font-family: var(--cb-anton); font-size: 15px; text-transform: uppercase; }
.cb-post__amt { font-family: var(--cb-anton); font-size: 20px; color: var(--cb-yellow); white-space: nowrap; }
.cb-post p { font-size: 13px; line-height: 1.7; margin: 8px 0 0; color: var(--cb-flink); }

.cb-worn {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
    gap: 40px; align-items: center;
}
.cb-worn .cb-mount { transform: rotate(-1.2deg); }
.cb-worn__rule { height: 3px; background: var(--cb-ink); margin: 14px 0 16px; }
.cb-worn p { font-size: 15px; line-height: 1.75; margin: 0; }

/* ---------- shared nav additions (every public page) ---------- */
body.cosh .cosh-nav__links a.on { color: var(--cb-yellow); }
.cosh-nav__right { display: flex; align-items: center; gap: 16px; }
body.cosh .cosh-nav__who {
    font-family: var(--cb-anton); font-size: 14px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cb-yellow);
}
body.cosh .cosh-nav__signin {
    color: #fff; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
body.cosh .cosh-nav__signin:hover { color: var(--cb-yellow); }

/* Checkout's cut-down bar: wordmark left, no shop links, a way back on the right. */
body.cosh .cosh-nav__mark {
    font-family: var(--cb-anton); font-size: 15px; letter-spacing: .08em;
    text-transform: uppercase; color: #fff;
}
.cosh-nav__secure {
    font-family: var(--cb-anton); font-size: 12px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--cb-yellow);
}
body.cosh .cosh-nav__back {
    color: #fff; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.45); padding: 6px 13px;
}
body.cosh .cosh-nav__back:hover { background: rgba(255,255,255,.12); color: #fff; }

/* a portrait photo would otherwise make this block twice the design's height */
.cb-worn .cb-mount img { max-height: 470px; object-fit: cover; object-position: center top; }

/* ---------- sale ---------- */
.cb-hero--sale {
    grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); align-items: center;
    padding-bottom: 46px;
}
body.cosh .cb-hero--sale .cb-h1--huge { margin-top: 6px; }
.cb-slash--flush { margin: 0; font-size: 20px; padding: 11px 0; }
.cb-band--sale { padding-top: 52px; }
.cb-saleprice { font-family: var(--cb-anton); font-size: 24px; color: var(--cb-red); margin-top: 10px; }

/* ---------- about & contact, and the shared form card ---------- */
body.cosh .cb-h2 { font-size: 36px; line-height: 1; }
body.cosh .cb-worn .cb-h2 { font-size: 40px; }
.cb-two {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 44px; align-items: start;
}
body.cosh .cb-mail { font-family: var(--cb-anton); font-size: 26px; line-height: 1; color: var(--cb-red); }
.cb-panel { background: #fff; border: 2px solid var(--cb-ink); padding: 28px 30px; position: relative; }
body.cosh .cb-panel__h { font-size: 36px; line-height: 1; }
.cb-panel__rule { height: 3px; background: var(--cb-ink); margin: 14px 0 20px; }
.cb-panel p { font-size: 14.5px; line-height: 1.75; margin: 0; }
body.cosh .cb-panel .cb-panel__foot { font-size: 13px; line-height: 1.7; margin: 20px 0 0; color: var(--cb-body2); }
.cb-fields { display: flex; flex-direction: column; gap: 12px; }
body.cosh .cb-field { display: block; margin: 0; font-family: inherit; font-size: inherit;
    letter-spacing: normal; text-transform: none; color: inherit; }
.cb-field__l {
    display: block; font-family: var(--cb-anton); font-size: 11px; letter-spacing: .16em;
    text-transform: uppercase; opacity: .75;
}
body.cosh .cb-input {
    display: block; width: 100%; margin-top: 5px; padding: 12px 13px; box-sizing: border-box;
    border: 2px solid var(--cb-ink); border-radius: 0; background: #fff; color: var(--cb-ink);
    font-family: inherit; font-size: 14px; line-height: 1.4; box-shadow: none;
}
body.cosh textarea.cb-input { resize: vertical; min-height: 130px; }
.cb-alert {
    border: 2px solid var(--cb-red); background: #fff; color: var(--cb-red);
    padding: 10px 14px; margin-bottom: 16px; font-size: 14px;
}
.cb-body { font-size: 14.5px; line-height: 1.75; margin: 0 0 16px; }
.cb-plates { display: grid; gap: 12px; }
.cb-plate {
    background: var(--cb-ink); color: #fff; padding: 18px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.cb-plate__svc { font-family: var(--cb-anton); font-size: 18px; text-transform: uppercase; line-height: 1.15; }
.cb-plate__amt { font-family: var(--cb-anton); font-size: 40px; line-height: 1; color: var(--cb-yellow); white-space: nowrap; }
.cb-note { font-size: 13px; line-height: 1.6; color: var(--cb-muted); margin: 12px 0 0; }
.cb-rules { list-style: none; margin: 0; background: #fff; border: 1px solid var(--cb-hair); padding: 6px 22px 8px; }
.cb-rules li {
    display: flex; gap: 14px; align-items: flex-start; padding: 14px 0;
    border-bottom: 1px solid rgba(40,40,38,.14); font-size: 14px; line-height: 1.7;
}
.cb-rules li:last-child { border-bottom: 0; }
.cb-num { font-family: var(--cb-anton); font-size: 20px; color: var(--cb-red); line-height: 1.1; flex: 0 0 auto; }
.cb-terms { max-width: 860px; }
.cb-terms p { font-size: 14px; line-height: 1.75; margin: 0 0 14px; color: var(--cb-body2); }

/* ---------- mailing list ---------- */
.cb-hero--mailing { align-items: center; gap: 40px; }
.cb-panel--signup { padding: 26px 28px; margin-top: 26px; max-width: 470px; }
.cb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cb-pair--narrow { grid-template-columns: 90px 90px; margin-top: 5px; }
.cb-pair--narrow .cb-input { margin-top: 0; text-align: center; }
.cb-consent { border: 0; padding: 0; margin: 2px 0 0; min-width: 0; }
.cb-consent legend { margin-bottom: 6px; padding: 0; width: auto; }
body.cosh .cb-check {
    display: flex; gap: 10px; align-items: flex-start; margin: 0 0 6px;
    font-family: inherit; font-size: 13px; line-height: 1.6;
    letter-spacing: normal; text-transform: none; color: var(--cb-ink);
}
.cb-check input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--cb-ink); flex: 0 0 auto; }
.cb-legal { font-size: 11.5px; line-height: 1.6; color: var(--cb-muted); margin: 4px 0 0; }
.cb-cards4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.cb-card4 { background: #fff; border: 1px solid var(--cb-hair); padding: 22px 24px; }
.cb-card4__h { font-family: var(--cb-anton); font-size: 32px; line-height: 1; color: var(--cb-red); text-transform: uppercase; }
.cb-card4 p { font-size: 13.5px; line-height: 1.7; margin: 8px 0 0; color: var(--cb-body2); }
.cb-card4--ink { background: var(--cb-ink); border-color: var(--cb-ink); }
.cb-card4--ink .cb-card4__h { color: var(--cb-yellow); }
.cb-card4--ink p { color: var(--cb-flink); }

/* ---------- the daily cosh ---------- */
.cb-paper { background: var(--cb-paper); }
.cb-masthead { background: var(--cb-ink); padding: 36px 0 30px; text-align: center; }
.cb-masthead__the {
    font-family: var(--cb-anton); font-size: 13px; letter-spacing: .3em;
    text-transform: uppercase; color: var(--cb-yellow);
}
body.cosh .cb-masthead__h { font-size: 118px; line-height: .84; color: #fff; margin-top: 2px; }
.cb-masthead__rule { height: 3px; background: var(--cb-orange); max-width: 620px; margin: 18px auto 14px; }
.cb-masthead__strap {
    color: var(--cb-yellow); font-family: var(--cb-anton); font-size: 17px; letter-spacing: .06em;
    text-transform: uppercase; line-height: 1.5; margin: 0; padding: 0 18px;
}
.cb-masthead__line {
    max-width: 620px; margin: 20px auto 0; padding: 11px 32px 0; box-sizing: border-box;
    display: flex; justify-content: space-between; gap: 12px;
    font-family: var(--cb-anton); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--cb-fmeta); border-top: 1px solid rgba(255,255,255,.22);
}
.cb-slash--orange { background: var(--cb-orange); color: var(--cb-ink); }

body.cosh .cb-lead {
    display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 34px;
    align-items: center; color: var(--cb-ink);
}
body.cosh .cb-lead--noimg { grid-template-columns: minmax(0,1fr); }
body.cosh .cb-lead:hover { color: var(--cb-ink); }
.cb-lead .cb-mount { transform: rotate(-1.2deg); }
.cb-mount__pad { height: 12px; }
.cb-tag {
    display: inline-block; background: var(--cb-red); color: #fff;
    font-family: var(--cb-anton); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 6px 12px;
}
.cb-story__date {
    font-family: var(--cb-anton); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    opacity: .7; margin-top: 18px;
}
body.cosh .cb-lead__h { font-size: 60px; line-height: .94; margin-top: 6px; }
.cb-lead__p { font-size: 16px; line-height: 1.75; margin: 14px 0 0; }
.cb-lead__more {
    margin-top: 20px; display: flex; gap: 16px; align-items: center;
    font-family: var(--cb-anton); font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
}
.cb-readlink { color: var(--cb-red); border-bottom: 2px solid var(--cb-red); }

body.cosh .cb-story { display: block; color: var(--cb-ink); }
body.cosh .cb-story:hover { color: var(--cb-ink); }
body.cosh .cb-story:hover .cb-story__h { color: var(--cb-red); }
.cb-mount--story img { aspect-ratio: 4/3; object-fit: cover; }
.cb-mount--story .cb-mount__pad { height: 9px; }
body.cosh .cb-story__h { font-size: 26px; line-height: 1.04; margin-top: 6px; }
.cb-story__p { font-size: 13.5px; line-height: 1.7; margin: 8px 0 0; color: var(--cb-body2); }
.cb-story__more {
    margin-top: 12px; font-family: var(--cb-anton); font-size: 12px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--cb-red);
}
.cb-signup {
    background: var(--cb-ink); padding: 26px 26px 28px;
    display: flex; flex-direction: column; justify-content: center;
}
body.cosh .cb-signup__h { font-size: 28px; line-height: 1.05; color: var(--cb-orange); }
.cb-signup p { color: var(--cb-flink); font-size: 13.5px; line-height: 1.7; margin: 9px 0 16px; }
.cb-pager--pair { margin: 44px 0 0; padding-bottom: 54px; }

/* one story */
.cb-masthead-slim { background: var(--cb-ink); padding: 16px 0 14px; text-align: center; border-bottom: 3px solid var(--cb-orange); }
body.cosh .cb-masthead-slim a {
    font-family: var(--cb-anton); font-size: 30px; letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.cb-col { max-width: 800px; margin: 0 auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
.cb-col--wide { max-width: 960px; }
.cb-crumbs--inline { max-width: none; padding: 0; margin-bottom: 22px; }
body.cosh .cb-article__h { font-size: 74px; line-height: .92; margin-top: 0; }
.cb-byline {
    display: flex; gap: 18px; align-items: center; margin-top: 22px; padding-top: 14px;
    border-top: 3px solid var(--cb-ink);
    font-family: var(--cb-anton); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.cb-byline__dot { opacity: .4; }
.cb-mount--hero { padding: 14px 14px 0; box-shadow: 0 6px 18px rgba(0,0,0,.22); transform: rotate(-.9deg); }
/* Article bodies are the site's own HTML from admin, so style whatever is in them. */
.cb-article { font-size: 17.5px; line-height: 1.8; }
.cb-article p { margin: 0 0 22px; }
.cb-article img { max-width: 100%; height: auto; }
.cb-article h2, .cb-article h3 { margin: 36px 0 12px; }
.cb-article__foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(40,40,38,.25); font-size: 14px; color: var(--cb-body2); }
.cb-figpair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.cb-figpair img { aspect-ratio: 4/3; object-fit: cover; }
.cb-filed { padding-top: 18px; border-top: 3px solid var(--cb-ink); padding-bottom: 46px; }

/* ---------- checkout (presentation only: every control is unchanged) ---------- */
.cb-checkout-head { padding: 40px 0 34px; }
body.cosh .cb-h1--checkout { font-size: 78px; line-height: .9; }
.cb-steps { display: flex; gap: 0; list-style: none; padding: 0; margin: 20px 0 0; flex-wrap: wrap; }
.cb-steps li {
    font-family: var(--cb-anton); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    padding: 9px 16px; border: 2px solid var(--cb-ink); color: var(--cb-ink);
}
.cb-steps li + li { border-left: 0; }
.cb-steps li.is-done { background: var(--cb-ink); color: #fff; }
.cb-steps li.is-on { background: var(--cb-ink); color: var(--cb-yellow); }

.cb-checkout {
    display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
    gap: 40px; align-items: start;
}
.cb-cpanel { margin-bottom: 22px; }
body.cosh .cb-cpanel__h { font-size: 24px; line-height: 1.05; margin-bottom: 16px; }
.cb-cpanel p { font-size: 14px; line-height: 1.7; margin: 0 0 10px; }
.cb-cgrid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
    border: 0; padding: 0; margin: 0 0 14px; min-width: 0;
}
.cb-cfield { min-width: 0; }
.cb-cfield--full { grid-column: 1 / -1; }
.cb-cfield .form-control { margin-top: 5px; }
.cb-cregister { border: 0; padding: 14px 0 0; margin: 0; border-top: 1px solid rgba(40,40,38,.18); }
.cb-cchecks { display: flex; gap: 22px; margin: 6px 0 10px; }
body.cosh .cb-check--terms { margin-top: 4px; }
.cb-check input[type=checkbox] { margin-top: 4px; }
.cb-cactions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
body.cosh .cb-cactions__link {
    font-family: var(--cb-anton); font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
}
.cb-cerror { color: var(--cb-red); font-size: 13px; margin-top: 8px; }

/* The site's buttons carry a printed drop-shadow from the 16 Sep pass; the checkout design's
   are flat. Scoped to checkout so no other page changes. */
body.cosh .cb-checkout .btn {
    box-shadow: none !important; border: 2px solid var(--cb-red) !important;
    font-size: 15px !important; padding: 12px 24px !important;
}
body.cosh .cb-checkout .btn:hover { border-color: var(--cb-ink) !important; }

.cb-bag { background: #fff; border: 2px solid var(--cb-ink); }
.cb-bag__head {
    background: var(--cb-ink); color: var(--cb-yellow); padding: 14px 20px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--cb-anton); font-size: 22px; text-transform: uppercase;
}
body.cosh .cb-bag__head a {
    color: #fff; font-size: 12px; letter-spacing: .14em; opacity: .8;
}
.cb-bag__lines { padding: 6px 20px 0; }
.cb-bag__lines table { width: 100%; border-collapse: collapse; margin: 0; font-size: 13px; }
.cb-bag__lines table.table-bordered, .cb-bag__lines table.table-bordered td { border: 0; }
.cb-bag__lines thead td {
    font-family: var(--cb-anton); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
    opacity: .6; padding: 8px 4px; border-bottom: 1px solid var(--cb-hair) !important;
}
.cb-bag__lines tbody td { padding: 12px 4px; vertical-align: middle; border-bottom: 1px solid var(--cb-hair) !important; }
.cb-bag__lines tbody img { width: 62px !important; height: 62px; object-fit: cover; background: var(--cb-paper); }
.cb-bag__lines tfoot td { padding: 5px 4px; font-size: 13.5px; }
.cb-bag__lines tfoot strong { font-weight: 400; }
/* the last row of the totals is the total */
.cb-bag__lines tfoot tr:last-child td {
    border-top: 3px solid var(--cb-ink); padding-top: 12px;
    font-family: var(--cb-anton); font-size: 22px; text-transform: uppercase;
}
.cb-bag__lines tfoot tr:last-child td:last-child { font-size: 34px; color: var(--cb-red); }
.cb-bag__sect { padding: 16px 20px; border-top: 1px solid var(--cb-hair); }
.cb-bag__sect .form-control { margin-top: 5px; }
.cb-bag__code { display: flex; gap: 8px; align-items: stretch; margin-top: 5px; }
.cb-bag__code .form-control { margin-top: 0; }
body.cosh .cb-bag__code .btn { white-space: nowrap; }
.cb-bag__go { background: var(--cb-paper); }
body.cosh .cb-bag__go .btn { display: block; width: 100%; font-size: 18px !important; padding: 16px 20px !important; }
.cb-bag__note { font-size: 12px; line-height: 1.6; color: var(--cb-muted); margin: 10px 0 0; }
.cb-help { background: var(--cb-ink); color: #fff; padding: 20px 22px; margin-top: 18px; }
.cb-help__h { font-family: var(--cb-anton); font-size: 16px; text-transform: uppercase; color: var(--cb-yellow); }
.cb-help p { font-size: 13px; line-height: 1.7; margin: 6px 0 0; color: var(--cb-flink); }
body.cosh .cb-help a { color: #fff; }

/* The code-behind's messages arrive as Bootstrap alerts; square them off to match. */
body.cosh .cb-checkout .alert {
    border-radius: 0; border: 2px solid currentColor; margin: 10px 0 0; padding: 10px 14px; font-size: 13.5px;
}
body.cosh .cb-checkout .alert-danger { color: var(--cb-red); background: #fff; }
body.cosh .cb-checkout .alert-success { color: var(--cb-ink); background: var(--cb-yellow); border-color: var(--cb-ink); }
.cb-bag > .alert { margin: 14px 20px 0; }

/* ---------- my account: option 1b, "the ledger" ---------- */
.cb-acct-top {
    padding: 30px 40px; display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto; box-sizing: border-box;
}
body.cosh .cb-acct-top__h { font-size: 54px; line-height: .92; margin-top: 4px; }
.cb-acct-top__meta {
    font-family: var(--cb-anton); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 8px;
}
.cb-slash--acct { margin: 0; transform: rotate(-1.4deg); padding: 9px 0; font-size: 16px; }
.cb-acct {
    display: grid; grid-template-columns: 262px minmax(0,1fr); align-items: stretch;
    background: var(--cb-paper); margin-top: -8px;
}
.cb-acct-nav { background: var(--cb-ink); padding: 38px 0 40px; }
.cb-acct-nav__g {
    font-family: var(--cb-anton); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--cb-fmeta); padding: 0 26px 12px;
}
body.cosh .cb-acct-nav a {
    display: flex; justify-content: space-between; align-items: center; padding: 13px 26px;
    font-family: var(--cb-anton); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
body.cosh .cb-acct-nav a:hover { color: var(--cb-yellow); }
body.cosh .cb-acct-nav a.is-on { background: var(--cb-yellow); color: var(--cb-ink); }
body.cosh .cb-acct-nav a.cb-acct-nav__plain {
    display: block; padding: 10px 26px; font-family: inherit; font-size: 13.5px;
    letter-spacing: normal; text-transform: none; color: var(--cb-flink);
}
body.cosh .cb-acct-nav a.cb-acct-nav__plain:hover { color: var(--cb-yellow); }
.cb-acct-nav__rule { height: 1px; background: rgba(255,255,255,.18); margin: 18px 26px; }
.cb-pill { background: var(--cb-red); color: #fff; font-size: 11px; padding: 3px 8px; letter-spacing: .05em; }
.cb-acct__pane { padding: 38px 38px 48px; min-width: 0; }

.cb-stats3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.cb-stat3 { background: #fff; border: 1px solid var(--cb-hair); padding: 18px 20px; }
.cb-stat3__l { font-family: var(--cb-anton); font-size: 11px; letter-spacing: .17em; text-transform: uppercase; opacity: .7; }
.cb-stat3__n { font-family: var(--cb-anton); font-size: 38px; line-height: 1; margin-top: 5px; }
.cb-stat3__s { font-size: 12px; color: var(--cb-muted); margin-top: 4px; }
.cb-stat3--red { background: var(--cb-red); border-color: var(--cb-red); color: #fff; }
.cb-stat3--red .cb-stat3__l { color: var(--cb-yellow); opacity: 1; }
.cb-stat3--red .cb-stat3__s { color: #fff; }
.cb-sechead--acct { margin: 32px 0 10px; }
body.cosh .cb-sechead--acct .cb-h2 { font-size: 26px; }
.cb-sechead--acct:first-child { margin-top: 0; }

.cb-ledger { background: #fff; border: 1px solid var(--cb-hair); overflow-x: auto; }
.cb-ledger table { width: 100%; border-collapse: collapse; }
.cb-ledger th {
    font-family: var(--cb-anton); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 400; text-align: left; padding: 11px 16px; border-bottom: 2px solid var(--cb-ink);
}
.cb-ledger td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid rgba(40,40,38,.12); white-space: nowrap; }
.cb-ledger tr:last-child td { border-bottom: 0; }
.cb-ledger__no { font-family: var(--cb-anton); font-size: 15px; }
body.cosh .cb-ledger__no a { color: var(--cb-ink); }
body.cosh .cb-ledger__go { font-family: var(--cb-anton); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.cb-ledger tr.is-unpaid { background: #FFF9E8; }
.cb-ledger tr.is-unpaid .cb-ledger__flag { color: var(--cb-red); font-weight: 700; }
.cb-ledger__empty { padding: 18px 16px; margin: 0; font-size: 13.5px; }

.cb-acct-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 30px; }
body.cosh .cb-acct-card {
    display: block; background: #fff; border: 2px solid var(--cb-ink); padding: 20px 22px;
    color: var(--cb-ink); font-size: 13.5px; line-height: 1.6;
}
body.cosh .cb-acct-card:hover { background: var(--cb-yellow); color: var(--cb-ink); }
.cb-acct-card__h { display: block; font-family: var(--cb-anton); font-size: 22px; text-transform: uppercase; margin-bottom: 6px; }

.cb-filterbar {
    display: flex; gap: 16px; flex-wrap: wrap; background: #fff; border: 2px solid var(--cb-ink);
    padding: 14px 18px; margin-bottom: 14px;
}
body.cosh .cb-filterbar__f {
    display: flex; align-items: center; gap: 10px; margin: 0; font-family: inherit;
    letter-spacing: normal; text-transform: none; color: inherit;
}
body.cosh .cb-filterbar .form-control { width: auto; min-width: 110px; padding: 8px 10px !important; }

.cb-odetail { background: #fff; border: 2px solid var(--cb-ink); }
.cb-odetail__head {
    border-bottom: 2px solid var(--cb-ink); padding: 13px 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
body.cosh .cb-odetail__head h2 { font-size: 24px; }
body.cosh .cb-odetail__head a { font-family: var(--cb-anton); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; }
.cb-odetail__body { padding: 20px; display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 28px; }
.cb-oline {
    display: grid; grid-template-columns: 56px minmax(0,1fr) auto auto; gap: 13px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid rgba(40,40,38,.12);
}
.cb-oline:last-child { border-bottom: 0; }
.cb-oline__img { width: 56px; height: 56px; overflow: hidden; background: var(--cb-paper); }
.cb-oline__img img { width: 56px !important; height: 56px !important; object-fit: cover; display: block; }
.cb-oline__n { font-family: var(--cb-anton); font-size: 14px; text-transform: uppercase; }
.cb-oline__s { font-size: 12px; color: var(--cb-muted); }
.cb-oline__q { font-size: 12.5px; color: var(--cb-muted); }
.cb-oline__p { font-size: 13.5px; }
.cb-odetail__side { background: var(--cb-paper); padding: 16px 18px; }
.cb-odetail__side p { font-size: 13px; line-height: 1.6; margin: 6px 0 14px; }
.cb-osum { display: flex; justify-content: space-between; font-size: 13px; margin-top: 4px; }
.cb-osum--total {
    align-items: baseline; border-top: 2px solid var(--cb-ink); margin-top: 9px; padding-top: 9px;
    font-family: var(--cb-anton); font-size: 15px; text-transform: uppercase;
}
.cb-osum--total span:last-child { font-size: 23px; color: var(--cb-red); }

.cb-acct-two { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 22px; align-items: start; }
body.cosh .cb-cpanel__h--rule { padding-bottom: 12px; border-bottom: 2px solid var(--cb-ink); }

/* ---------- round 2 responsive ---------- */
@media (max-width: 900px) {
    .cb-hero, .cb-hero--wide, .cb-hero--mid, .cb-hero--sale,
    .cb-product, .cb-worn, .cb-two, body.cosh .cb-lead, .cb-checkout,
    .cb-acct, .cb-odetail__body, .cb-acct-two { grid-template-columns: minmax(0,1fr); }
    .cb-acct-nav { padding: 18px 0; }
    .cb-acct__pane { padding: 26px 18px 36px; }
    .cb-acct-top { padding: 24px 18px; }
    body.cosh .cb-masthead__h { font-size: 84px; }
    body.cosh .cb-lead__h { font-size: 44px; }
    body.cosh .cb-article__h { font-size: 52px; }
    .cb-hero__art { text-align: left; }
    .cb-hero__art img { max-width: 320px; }
    body.cosh .cb-h1--huge { font-size: 96px; }
}
@media (max-width: 600px) {
    .cb-wrap, .cb-hero, .cb-product, .cb-crumbs { padding-left: 18px; padding-right: 18px; }
    body.cosh .cb-h1 { font-size: 52px; }
    body.cosh .cb-h1--product { font-size: 42px; }
    body.cosh .cb-h1--huge { font-size: 64px; }
    body.cosh .cb-sechead h2 { font-size: 30px; }
    .cb-slash { font-size: 13px; letter-spacing: .07em; }
    /* two-up products, per the 390px board */
    .cb-grid, .cb-grid--240 { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
    .cb-sticker { font-size: 15px; top: -9px; right: -9px; padding: 6px 9px; }
    .cb-pcard__b { padding: 11px 11px 13px; }
    .cb-pcard__n { font-size: 14px; }
    .cb-pcard__z { font-size: 10px; }
    /* chips scroll sideways rather than stacking into a wall */
    .cb-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; max-width: 100%; }
    body.cosh .cb-chip { flex: 0 0 auto; }
    .cb-info { padding: 22px 20px; }
    .cb-band { padding: 32px 0 40px; }

    /* checkout and account forms: one field per row on a phone */
    .cb-cgrid, .cb-pair { grid-template-columns: minmax(0,1fr); }
    .cb-pair--narrow { grid-template-columns: 90px 90px; }
    body.cosh .cb-h1--checkout { font-size: 54px; }
    .cb-steps li { padding: 8px 10px; font-size: 11px; }
    .cb-panel { padding: 22px 18px; }

    /* the account sidebar becomes a compact row of links above the page */
    .cb-acct-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px; }
    .cb-acct-nav__g, .cb-acct-nav__rule { display: none; }
    body.cosh .cb-acct-nav a,
    body.cosh .cb-acct-nav a.cb-acct-nav__plain {
        display: inline-flex; gap: 6px; padding: 7px 11px; font-family: var(--cb-anton);
        font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
        border: 1px solid rgba(255,255,255,.3); color: #fff;
    }
    body.cosh .cb-acct-top__h { font-size: 40px; }
    .cb-stats3 { grid-template-columns: minmax(0,1fr); }
    .cb-oline { grid-template-columns: 48px minmax(0,1fr) auto auto; gap: 10px; }
    .cb-oline__img, .cb-oline__img img { width: 48px !important; height: 48px !important; }
}

/* ==========================================================================
   Sign in — designs/Login.dc.html board 1a (6 Oct 2026)
   --------------------------------------------------------------------------
   Two cards on the paper band: the form on the left, the reasons to register
   on the right. Built from the round-2 kit (.cb-hero / .cb-slash / .cb-band /
   .cb-panel / .cb-fields) so this page carries no styling of its own beyond
   the charcoal card variant and the password row.
   ========================================================================== */

.cb-hero--login .cb-hero__art img { max-width: 330px; }

.cb-login {
    max-width: 980px; margin: 0 auto; padding: 0 32px; box-sizing: border-box;
    display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
    gap: 30px; align-items: stretch;
}
/* both cards are flex columns so the Join button can sit on the bottom edge */
.cb-login__card { display: flex; flex-direction: column; }
.cb-login__push { flex: 1; }

.cb-panel--ink { background: var(--cb-ink); border-color: var(--cb-ink); color: #fff; }
body.cosh .cb-panel--ink .cb-panel__h { color: var(--cb-orange); }
.cb-panel--ink .cb-panel__rule { background: var(--cb-orange); }
.cb-panel--ink p { color: var(--cb-flink); font-size: 14px; }

/* "Forgotten it?" sits on the password label's line, right-aligned */
.cb-field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
body.cosh .cb-field__forgot {
    font-family: 'Fauna One', Georgia, serif; font-size: 12.5px; letter-spacing: normal;
    text-transform: none; border-bottom: 1px solid var(--cb-red); white-space: nowrap;
}

/* the numbered list, dropped onto charcoal */
.cb-rules--ink { background: none; border: 0; padding: 0; margin-top: 12px; }
.cb-rules--ink li { border-bottom-color: rgba(255,255,255,.16); padding: 11px 0; }
.cb-rules--ink .cb-num { font-size: 18px; color: var(--cb-yellow); }

.cb-login__foot {
    max-width: 980px; margin: 26px auto 0; padding: 0 32px; box-sizing: border-box;
    text-align: center; font-size: 13px; line-height: 1.7; color: var(--cb-body2);
}

/* ---------- register ----------
   No board was drawn for this page, so it borrows the sign-in one: the same hero, slash and
   paper band, with the long form in the wide card and the way back to sign-in beside it. The
   field classes are checkout's (.cb-cpanel / .cb-cgrid / .cb-cfield), which already exist. */
.cb-login--reg {
    max-width: 1100px;
    grid-template-columns: minmax(0,1.65fr) minmax(0,1fr);
    align-items: start;   /* the aside is short; it must not stretch to the form's height */
}
.cb-login--reg + .cb-login__foot { max-width: 1100px; }
.cb-login__aside { align-self: start; }
.cb-opt { font-style: normal; opacity: .55; letter-spacing: .08em; }
body.cosh .cb-aside__note { font-size: 13px; margin: 14px 0 0; color: var(--cb-flink); }
body.cosh .cb-aside__note a { color: var(--cb-yellow); border-bottom: 1px solid rgba(242,233,107,.45); }

/* the ValidationSummary is a plain <ul>; give it the card's alert look rather than bootstrap's */
.cb-cerror ul { margin: 0; padding-left: 18px; }
.cb-cerror ul:not(:empty) {
    border: 2px solid var(--cb-red); background: #fff; padding: 10px 14px 10px 32px; margin-bottom: 18px;
}

/* Stacking only below 760px, not at the shared 900px breakpoint: two form cards still sit
   happily side by side in a window that is not maximised, and the design is the pair. */
@media (max-width: 760px) {
    .cb-login, .cb-login--reg { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 600px) {
    .cb-login, .cb-login__foot { padding-left: 18px; padding-right: 18px; }
}

/* ---------- My photos (7 Oct 2026) ----------
   The account area's send-us-a-photo page. No board was drawn for it; built from the account
   pages' own kit, with a file picker that actually says what you picked. */
.cb-alert--ok { border-color: var(--cb-ink); color: var(--cb-ink); }

/* the real file input is hidden and driven by the label, so it can be styled */
.cb-file__input { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
body.cosh .cb-file {
    display: flex; align-items: stretch; gap: 0; margin-top: 5px; cursor: pointer;
    border: 2px solid var(--cb-ink); background: #fff; font-family: inherit;
    letter-spacing: normal; text-transform: none; color: inherit;
}
.cb-file__btn {
    background: var(--cb-ink); color: #fff; font-family: var(--cb-anton);
    font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    padding: 12px 18px; white-space: nowrap; flex: 0 0 auto;
}
.cb-file__name {
    padding: 12px 14px; font-size: 13.5px; color: var(--cb-body2); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center;
}
/* keyboard users get the same focus ring the inputs have */
.cb-file__input:focus-visible + .cb-legal, .cb-file__input:focus-visible ~ .cb-file,
body.cosh .cb-file:focus-within { outline: 3px solid var(--cb-red); outline-offset: 2px; }
.cb-file__preview { margin-top: 14px; max-width: 260px; }
.cb-file__preview .cb-mount { transform: rotate(-1.4deg); }
.cb-file__preview img { width: 100%; display: block; }

@media (max-width: 600px) {
    body.cosh .cb-file { flex-direction: column; }
    .cb-file__name { padding-top: 8px; }
}