/*
 * comic-shirts.com theme: option C-6 ("Spider Red and Blue") on top of Bootstrap 5.3.
 * Every color pair used for text or controls was checked against WCAG 2.2 AA:
 *   white on red #C1121F 6.22:1, white on blue #1D4ED8 6.70:1, blue on white 6.70:1,
 *   ink #1A1020 on white 18.4:1, muted #4B5060 on tint #F3F5FA 7.36:1,
 *   control borders #7E8496 on white 3.73:1 (1.4.11 needs 3:1).
 * Red and blue are nearly the same lightness (1.08:1 against each other), so never use red vs
 * blue alone to carry meaning (1.4.1); pair color with text, an icon or a strikethrough.
 */
:root {
    --cs-red: #C1121F;
    --cs-red-dark: #9A0E19;
    --cs-blue: #1D4ED8;
    --cs-blue-dark: #1E3A8A;
    --cs-ink: #1A1020;
    --cs-muted: #4B5060;
    --cs-tint: #F3F5FA;
    --cs-tint-2: #E4E8F3;
    --cs-divider: #E3E6EE;
    --cs-control-border: #7E8496;
    --cs-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cs-font-display: 'Archivo Black', 'DM Sans', system-ui, sans-serif;

    --bs-body-font-family: var(--cs-font-body);
    --bs-body-color: var(--cs-ink);
    --bs-body-color-rgb: 26, 16, 32;
    --bs-emphasis-color: var(--cs-ink);
    --bs-secondary-color: var(--cs-muted);          /* .text-muted / .text-body-secondary */
    --bs-link-color: var(--cs-blue);
    --bs-link-color-rgb: 29, 78, 216;
    --bs-link-hover-color: var(--cs-blue-dark);
    --bs-link-hover-color-rgb: 30, 58, 138;
    --bs-border-color: var(--cs-divider);           /* decorative dividers and card edges */
    --bs-primary: var(--cs-red);
    --bs-primary-rgb: 193, 18, 31;
}

/* Keep the sticky header from covering whatever has keyboard focus (2.4.11) */
html { scroll-padding-top: 7rem; }

body { background: #fff; }

h1, h2, h3, .h1, .h2, .h3, .font-display {
    font-family: var(--cs-font-display);
    font-weight: 400;          /* Archivo Black has a single weight; never synthesize bold */
    letter-spacing: -0.01em;
}
h4, h5, h6, .h4, .h5, .h6 { font-family: var(--cs-font-body); font-weight: 700; }

/* ---- Focus (2.4.7) and skip link (2.4.1) --------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--cs-blue);
    outline-offset: 3px;
}
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn-check:focus-visible + .btn,
.accordion-button:focus-visible,
.page-link:focus-visible,
.btn-close:focus-visible {
    outline: 3px solid var(--cs-blue);
    outline-offset: 2px;
    box-shadow: none;
}
.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    background: var(--cs-blue);
    color: #fff;
    padding: .75rem 1.1rem;
    border-radius: .5rem;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { top: .75rem; color: #fff; }

/* ---- Controls: visible boundaries at 3:1 (1.4.11) ----------------------------------- */
.form-control,
.form-select,
.form-check-input { border-color: var(--cs-control-border); }
.form-control::placeholder { color: var(--cs-muted); opacity: 1; }
.form-check-input:checked { background-color: var(--cs-blue); border-color: var(--cs-blue); }

.btn-primary {
    --bs-btn-bg: var(--cs-red);
    --bs-btn-border-color: var(--cs-red);
    --bs-btn-hover-bg: var(--cs-red-dark);
    --bs-btn-hover-border-color: var(--cs-red-dark);
    --bs-btn-active-bg: var(--cs-red-dark);
    --bs-btn-active-border-color: var(--cs-red-dark);
    --bs-btn-disabled-bg: var(--cs-muted);
    --bs-btn-disabled-border-color: var(--cs-muted);
    --bs-btn-disabled-opacity: 1;
}
.btn-outline-ink {
    --bs-btn-color: var(--cs-ink);
    --bs-btn-border-color: var(--cs-control-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-ink);
    --bs-btn-hover-border-color: var(--cs-ink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cs-ink);
    --bs-btn-active-border-color: var(--cs-ink);
}
.btn-pill { border-radius: 2rem; padding-left: 1.5rem; padding-right: 1.5rem; }
.btn, .page-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Size picker: selected state uses fill + weight, not color alone */
.size-option { min-width: 3.25rem; }
.btn-check:checked + .size-option { background: var(--cs-ink); border-color: var(--cs-ink); color: #fff; font-weight: 700; }
.btn-check:disabled + .size-option { text-decoration: line-through; opacity: 1; color: var(--cs-muted); border-style: dashed; }

/* ---- Header -------------------------------------------------------------------------- */
.promo-bar { background: var(--cs-red); color: #fff; }
.site-header { background: #fff; border-bottom: 1px solid var(--cs-divider); }
.site-logo { color: var(--cs-red); text-decoration: none; }
.site-logo:hover { color: var(--cs-red-dark); }
.site-logo-text { font-family: var(--cs-font-display); font-size: 1.5rem; line-height: 1; }
.cs-badge {
    display: inline-block;
    background: var(--cs-blue);
    color: #fff;
    font-family: var(--cs-font-display);
    padding: .3rem .6rem;
    transform: skew(-8deg);
    text-transform: uppercase;
}
.main-nav .nav-link { color: var(--cs-ink); font-weight: 500; padding: .6rem .8rem; }
.main-nav .nav-link:hover { color: var(--cs-blue); text-decoration: underline; }
.main-nav .nav-link[aria-current="page"] { color: var(--cs-red); font-weight: 700; }
.header-search {
    border: 1px solid var(--cs-control-border);
    background: var(--cs-tint);
    color: var(--cs-muted);
    border-radius: 2rem;
    min-width: 13rem;
    justify-content: flex-start;
}
.header-search:hover { background: var(--cs-tint-2); color: var(--cs-ink); }
.icon-link-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--cs-ink); }

/* ---- Listings ------------------------------------------------------------------------ */
.product-card-img {
    position: relative;
    background: var(--cs-tint);
    border-radius: .75rem;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.product-card-img img { width: 100%; height: 100%; object-fit: cover; }
.product-card.is-sold-out .product-card-img img { opacity: .6; }   /* image only: text keeps full contrast */
.product-card-title a { color: var(--cs-ink); text-decoration: none; }
.product-card-title a:hover { text-decoration: underline; }
.badge-soldout {
    position: absolute; top: .6rem; left: .6rem;
    background: var(--cs-ink); color: #fff; font-weight: 700;
}
.badge-instock {
    position: absolute; top: .6rem; left: .6rem;
    background: #fff; color: #166534; border: 1px solid #166534; font-weight: 700;
}
.size-badge { background: #fff; color: var(--cs-ink); border: 1px solid var(--cs-divider); font-weight: 400; }
.size-badge.is-out { text-decoration: line-through; color: var(--cs-muted); }
.filter-list { max-height: 18rem; overflow-y: auto; }
.filter-list a { display: block; padding: .3rem .25rem; color: var(--cs-ink); text-decoration: none; }
.filter-list a:hover { text-decoration: underline; }
.filter-list a[aria-current="true"] { font-weight: 700; color: var(--cs-blue); }
.filter-list a[aria-current="true"]::before { content: "\2713\00a0"; }   /* check mark, so state is not color alone */
.chip {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: .5rem 1.1rem; border: 1px solid var(--cs-control-border); border-radius: 2rem;
    color: var(--cs-ink); text-decoration: none; font-weight: 500; background: #fff;
}
.chip:hover { background: var(--cs-tint); text-decoration: underline; }
.chip { gap: .5rem; }
.brand-icon { width: 1.5rem; height: 1.5rem; flex: none; }
.brand-icon-wide { width: 2.1rem; }   /* wide silhouettes (the bat) fill their chip at the same height */
.pagination { --bs-pagination-color: var(--cs-ink); --bs-pagination-active-bg: var(--cs-blue); --bs-pagination-active-border-color: var(--cs-blue); --bs-pagination-border-color: var(--cs-control-border); }
.breadcrumb a { color: var(--cs-ink); }

/* ---- Home ---------------------------------------------------------------------------- */
.hero { background: var(--cs-tint); border-radius: 1rem; overflow: hidden; }
.hero-placeholder {
    background: var(--cs-tint-2);
    min-height: 20rem;
    color: var(--cs-muted);
}
.new-badge {
    display: inline-block; background: var(--cs-blue); color: #fff;
    font-family: var(--cs-font-display); font-size: .8rem; padding: .35rem .75rem;
    transform: skew(-8deg); text-transform: uppercase;
}

/* Homepage bands: every section after the hero is full width, alternating white and tint.
   On tinted bands, product image wells go white so cards stand out instead of blending in. */
.home-band { background: #fff; }
.home-band-alt { background: var(--cs-tint); }
.home-band-alt .product-card-img { background: #fff; }

/* ---- Footer -------------------------------------------------------------------------- */
.site-footer { background: var(--cs-tint); border-top: 1px solid var(--cs-control-border); }
.site-footer a { color: var(--cs-ink); }
.site-footer h2 { font-family: var(--cs-font-body); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }

/* ---- Motion (2.3.3 / user preference) ------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .product-card .product-card-img img { transition: transform .2s ease; }
    .product-card:hover .product-card-img img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}