/*
 * Card Shop DE — NOVA 5.7.1 child theme.
 * Loaded after NOVA. Native layout, validation, AJAX, gallery and checkout
 * behaviour remain owned by JTL. No external fonts or assets are requested.
 */
:root {
    --cs-ink: #191919;
    --cs-ink-soft: #34332f;
    --cs-muted: #62615b;
    --cs-paper: #ffffff;
    --cs-ivory: #f5f3ee;
    --cs-line: #dedbd2;
    --cs-gold: #b39552;
    --cs-gold-dark: #765719;
    --cs-gold-light: #ead9b0;
    --cs-error: #a51f2a;
    --cs-focus: #8b651b;
    --cs-radius: 12px;
    --cs-radius-small: 6px;
    --cs-shadow: 0 12px 35px rgba(35, 29, 16, .06);
    --cs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Shared native surfaces. Bootstrap columns and responsive utilities stay intact. */
body.is-nova {
    color: var(--cs-ink);
    background: var(--cs-paper);
    font-family: var(--cs-font);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.is-nova h1, .is-nova h2, .is-nova h3,
.is-nova h4, .is-nova h5, .is-nova h6,
.is-nova .h1, .is-nova .h2, .is-nova .h3 {
    color: var(--cs-ink);
    font-family: var(--cs-font);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.22;
}
.is-nova h1 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.is-nova a { color: var(--cs-ink); }
.is-nova a:hover { color: var(--cs-gold-dark); }
.is-nova hr { border-color: var(--cs-line); }
.is-nova .text-muted { color: var(--cs-muted) !important; }
.is-nova :focus-visible,
.cs-home :focus-visible,
.cs-footer-brand :focus-visible {
    outline: 3px solid var(--cs-focus);
    outline-offset: 4px;
}
.is-nova .btn-skip-to:focus {
    color: var(--cs-paper);
    background: var(--cs-ink);
    outline: 3px solid var(--cs-gold);
    outline-offset: 2px;
}
.is-nova .breadcrumb-container {
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: var(--cs-muted);
    font-size: .8125rem;
}
.is-nova .breadcrumb { background: transparent; }
.is-nova .breadcrumb-item.active { color: var(--cs-muted); }

/* Header. Keep NOVA's sticky navigation, mobile menu and search controls. */
#header-top-bar {
    color: #f7f4ec;
    background: var(--cs-ink);
    border-bottom: 1px solid #3a3427;
    font-size: .75rem;
    letter-spacing: .025em;
}
#header-top-bar a { color: #f7f4ec; }
#header-top-bar a:hover { color: var(--cs-gold-light); }
#header-top-bar .dropdown-menu { color: var(--cs-ink); background: var(--cs-paper); }
#header-top-bar .dropdown-menu a { color: var(--cs-ink); }
#jtl-nav-wrapper {
    color: var(--cs-ink);
    background: var(--cs-paper);
    border-bottom: 1px solid var(--cs-line);
    box-shadow: 0 3px 14px rgba(25, 25, 25, .035);
}
#jtl-nav-wrapper .navbar { background: var(--cs-paper); }
#jtl-nav-wrapper .navbar-brand .cs-header-logo {
    display: block;
    width: 58px;
    height: 58px;
    max-width: 100%;
    max-height: 58px;
    padding: 4px;
    object-fit: contain;
    background: #000;
    border-radius: var(--cs-radius-small);
}
#mainNavigation .nav-link {
    color: var(--cs-ink);
    font-weight: 600;
    letter-spacing: .01em;
}
#mainNavigation .nav-link:hover,
#mainNavigation .nav-link:focus { color: var(--cs-gold-dark); }
#jtl-nav-wrapper .dropdown-menu {
    border-color: var(--cs-line);
    border-radius: var(--cs-radius-small);
    box-shadow: var(--cs-shadow);
}
/* NOVA midnight uses white header text. CardShop's mobile header is white,
   while the opened navigation keeps midnight's dark off-canvas surface. */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper #burger-menu {
        color: #000;
    }
    #jtl-nav-wrapper #mainNavigation {
        color: #fff;
    }
    #jtl-nav-wrapper #mainNavigation a,
    #jtl-nav-wrapper #mainNavigation .nav-link,
    #jtl-nav-wrapper #mainNavigation .nav-offcanvas-title,
    #jtl-nav-wrapper #mainNavigation .nav-mobile-heading,
    #jtl-nav-wrapper #mainNavigation .navbar-toggler {
        color: #fff;
    }
    #jtl-nav-wrapper #mainNavigation a:hover,
    #jtl-nav-wrapper #mainNavigation a:focus,
    #jtl-nav-wrapper #mainNavigation .nav-link:hover,
    #jtl-nav-wrapper #mainNavigation .nav-link:focus {
        color: #fff;
    }
}
#search-header .form-control,
#jtl-nav-wrapper .main-search-wrapper .form-control {
    background: var(--cs-ivory);
    border-color: var(--cs-line);
}
#search .tt-hint { background: var(--cs-ivory) !important; }
.is-nova .search-form-wrapper-fixed { background: var(--cs-paper); }
.is-nova .secure-checkout-topbar { color: var(--cs-muted); }

/* Native buttons: color and surface only; no transforms, global dimensions or
   selectors targeting payment-provider iframes and express checkout controls. */
.is-nova .btn {
    font-family: var(--cs-font);
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--cs-radius-small);
}
.is-nova .btn-primary {
    color: #fff;
    background-color: var(--cs-ink);
    border-color: var(--cs-ink);
}
.is-nova .btn-primary:hover,
.is-nova .btn-primary:focus,
.is-nova .btn-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #3d3320;
    border-color: #3d3320;
}
.is-nova .btn-secondary,
.is-nova .btn-outline-primary {
    color: var(--cs-ink);
    background-color: var(--cs-paper);
    border-color: #9a978e;
}
.is-nova .btn-secondary:hover,
.is-nova .btn-secondary:focus,
.is-nova .btn-outline-primary:hover,
.is-nova .btn-outline-primary:focus {
    color: var(--cs-ink);
    background-color: var(--cs-ivory);
    border-color: var(--cs-gold-dark);
}
.is-nova .btn-link { color: var(--cs-ink); text-underline-offset: .2em; }
.is-nova .btn-link:hover { color: var(--cs-gold-dark); }
.is-nova .btn:disabled, .is-nova .btn.disabled { opacity: .6; }
.is-nova .page-link { color: var(--cs-ink); border-color: var(--cs-line); }
.is-nova .page-link:hover { background: var(--cs-ivory); color: var(--cs-gold-dark); }
.is-nova .page-item.active .page-link {
    color: #fff;
    background: var(--cs-ink);
    border-color: var(--cs-ink);
}

/* Forms, accounts, basket and checkout inherit the same legible components. */
.is-nova .form-control,
.is-nova .custom-select {
    color: var(--cs-ink);
    background-color: var(--cs-paper);
    border-color: #a5a198;
    border-radius: var(--cs-radius-small);
    font-family: var(--cs-font);
}
.is-nova .form-control::placeholder { color: #6f6c65; opacity: 1; }
.is-nova .form-control:focus,
.is-nova .custom-select:focus {
    color: var(--cs-ink);
    background-color: var(--cs-paper);
    border-color: var(--cs-focus);
    box-shadow: 0 0 0 .2rem rgba(139, 101, 27, .18);
}
.is-nova .form-control:disabled,
.is-nova .form-control[readonly] { color: #62605a; background-color: #efede7; }
.is-nova .input-group-text { color: var(--cs-ink); background: var(--cs-ivory); border-color: #a5a198; }
.is-nova input[type="checkbox"], .is-nova input[type="radio"] { accent-color: var(--cs-ink); }
.is-nova .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--cs-ink);
    background-color: var(--cs-ink);
}
.is-nova .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(139, 101, 27, .2);
}
.is-nova .form-control.is-invalid,
.is-nova .was-validated .form-control:invalid,
.is-nova .has-error .form-control { border-color: var(--cs-error); }
.is-nova .invalid-feedback,
.is-nova .invalid-tooltip,
.is-nova .has-error .help-block { color: var(--cs-error); }
.is-nova .invalid-tooltip { background: #fff0f1; }
.is-nova .alert-danger { color: #751824; background: #fff1f2; border-color: #e8abb2; }
.is-nova .alert-warning { color: #624813; background: #fff8e7; border-color: #e4cb94; }
.is-nova .alert-success { color: #235335; background: #edf7ef; border-color: #a9ccb1; }
.is-nova .alert-info { color: #294959; background: #eff6f9; border-color: #b6cbd5; }
.is-nova .card,
.is-nova .modal-content {
    color: var(--cs-ink);
    background: var(--cs-paper);
    border-color: var(--cs-line);
    border-radius: var(--cs-radius);
}
.is-nova .card-header,
.is-nova .modal-header,
.is-nova .modal-footer { border-color: var(--cs-line); }
.is-nova .card-header { background: var(--cs-ivory); }
.is-nova .table { color: var(--cs-ink); }
.is-nova .table th, .is-nova .table td { border-color: var(--cs-line); }
.is-nova .table thead th { background: var(--cs-ivory); }
#account .card, #checkout .card { box-shadow: 0 5px 20px rgba(35, 29, 16, .035); }
#account .nav-link.active,
#checkout .nav-link.active { color: var(--cs-gold-dark); }
#account .form-group, #checkout .form-group { margin-bottom: 1.25rem; }
#account h1, #checkout h1 { margin-bottom: 1.5rem; }

/* Product discovery. Native grid width, gallery swaps and variation panels stay intact. */
.is-nova #product-list { padding-top: .75rem; }
.is-nova .productbox {
    background: var(--cs-paper);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    box-shadow: 0 4px 16px rgba(35, 29, 16, .025);
}
.is-nova .productbox-inner { padding: 1rem; }
.is-nova .productbox:hover,
.is-nova .productbox:focus-within { border-color: #b4a688; }
.is-nova .productbox-images { background: #fff; }
.is-nova .productbox-images img,
.is-nova #gallery .product-image,
.is-nova #gallery_preview img { object-fit: contain; }
.is-nova .productbox-title {
    margin-top: .75rem;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.45;
}
.is-nova .productbox-title a { color: var(--cs-ink); }
.is-nova .productbox-title a:hover { color: var(--cs-gold-dark); }
.is-nova .productbox-quick-actions .btn { background-color: var(--cs-paper); }
.is-nova #sidepanel_left .card { box-shadow: none; }
.is-nova #sidepanel_left .nav-link { line-height: 1.5; }
.is-nova #sidepanel_left .nav-link.active { color: var(--cs-gold-dark); font-weight: 700; }
.is-nova #sidepanel_left .box { border-color: var(--cs-line); }
.is-nova .product-title { font-size: clamp(1.65rem, 2.65vw, 2.6rem); margin-bottom: 1rem; }
.is-nova .product-info-inner { padding-bottom: 1.5rem; }
.is-nova .product-headline { margin-bottom: 1rem; }
.is-nova .product-info .info-essential { color: var(--cs-muted); font-size: .875rem; line-height: 1.8; }
.is-nova .shortdesc { line-height: 1.75; }
.is-nova .product-gallery { margin-bottom: 1.5rem; }
.is-nova #gallery_wrapper { background: #fff; }
.is-nova .product-thumbnails-wrapper { margin-top: 1rem; }
.is-nova .product-detail-image-topbar { color: var(--cs-ink); }
.is-nova .nav-tabs { border-color: var(--cs-line); }
.is-nova .nav-tabs .nav-link { color: var(--cs-muted); }
.is-nova .nav-tabs .nav-link.active { color: var(--cs-ink); font-weight: 700; border-bottom-color: var(--cs-gold); }

/* Home: full-width editorial hero followed by live JTL products and collections. */
#content-wrapper.cs-home-wrapper { padding-top: 0; }
#content-wrapper.cs-home-wrapper #content {
    display: flow-root;
    width: 100%;
    margin-inline: 0;
}
.cs-home {
    width: min(1320px, calc(100% - 64px));
    margin-inline: auto;
    color: var(--cs-ink);
}
.cs-home h1, .cs-home h2, .cs-home h3 { font-family: var(--cs-font); }
.cs-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(500px, 42vw, 650px);
    width: 100%;
    max-width: none;
    margin: 0;
    color: #fff;
    background: #15130e;
    overflow: hidden;
}
.cs-home.cs-hero { width: 100%; }
.cs-hero-copy {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 7vw, 7rem);
    background: linear-gradient(90deg, #15130e 76%, rgba(21, 19, 14, 0));
}
.cs-hero-signature {
    margin: 2rem 0 0;
    color: #d7c69c;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.cs-eyebrow {
    display: block;
    margin: 0 0 1.3rem;
    color: var(--cs-gold-dark);
    font-size: .6875rem;
    font-weight: 750;
    line-height: 1.6;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.cs-home .cs-title {
    max-width: 11ch;
    margin: 0 0 1.5rem;
    color: var(--cs-ink);
    font-size: clamp(2.6rem, 4.7vw, 4.7rem);
    font-weight: 750;
    line-height: 1.055;
    letter-spacing: -.055em;
    text-wrap: balance;
}
.cs-hero .cs-title { color: #fff; }
.cs-lead { max-width: 43ch; margin: 0; color: var(--cs-muted); font-size: 1rem; line-height: 1.8; }
.cs-hero .cs-lead { color: #e3ded3; }
.cs-title em { color: var(--cs-gold-light); font-style: normal; }
.cs-hero .cs-eyebrow { color: var(--cs-gold-light); }
.cs-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.cs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 48px;
    padding: .8rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--cs-radius-small);
    font-family: var(--cs-font);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.cs-button--primary, .is-nova .cs-button--primary {
    color: #fff;
    background: var(--cs-ink);
    border-color: var(--cs-ink);
}
.cs-button--primary:hover, .is-nova .cs-button--primary:hover {
    color: #fff;
    background: #3d3320;
    border-color: #3d3320;
    text-decoration: none;
}
.cs-button--secondary, .is-nova .cs-button--secondary {
    color: var(--cs-ink);
    background: transparent;
    border-color: #aaa294;
}
.cs-button--secondary:hover, .is-nova .cs-button--secondary:hover {
    color: var(--cs-ink);
    background: #ece7dc;
    border-color: var(--cs-gold-dark);
    text-decoration: none;
}
.cs-hero .cs-button--primary { color: #17140e; background: var(--cs-gold-light); border-color: var(--cs-gold-light); }
.cs-hero .cs-button--primary:hover { color: #17140e; background: #f7e7c2; border-color: #f7e7c2; }
.cs-hero .cs-button--secondary { color: #fff; background: #15130e; border-color: #b7aa8e; }
.cs-hero .cs-button--secondary:hover { color: #fff; background: #ffffff1a; border-color: #fff; }
.cs-hero-stage {
    position: relative;
    z-index: 0;
    min-width: 0;
    overflow: hidden;
    background: radial-gradient(circle at 55% 48%, #9c783b 0, #49371c 31%, #17140e 75%);
}
.cs-hero-halo { position: absolute; inset: 8% 8%; border: 1px solid rgba(232, 202, 129, .28); border-radius: 50%; transform: rotate(-13deg); }
.cs-hero-card {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: clamp(160px, 20vw, 290px);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .55);
}
.cs-hero-card--left { transform: translate(-105%, -45%) rotate(-15deg); z-index: 1; }
.cs-hero-card--center { transform: translate(-50%, -54%) rotate(-2deg); z-index: 3; }
.cs-hero-card--right { transform: translate(5%, -42%) rotate(12deg); z-index: 2; }
.cs-hero-logo {
    position: absolute;
    z-index: 4;
    right: 7%;
    bottom: 10%;
    display: block;
    width: clamp(58px, 7vw, 90px);
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 6px 24px #0008;
}
.cs-hero-caption { position: absolute; z-index: 4; left: 7%; bottom: 10%; margin: 0; color: #f0ddb2; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.cs-quickfind {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 1rem 3rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: -2.25rem;
    position: relative;
    z-index: 5;
    background: #fff;
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    box-shadow: 0 18px 46px #17140e16;
}
.cs-quickfind .cs-eyebrow { margin-bottom: .35rem; }
.cs-quickfind h2 { margin: 0 .5rem .35rem 0; font-size: clamp(1.5rem, 2.5vw, 2.2rem); letter-spacing: -.04em; }
.cs-quickfind-intro > p:last-child { margin: 0; color: var(--cs-muted); font-size: .875rem; line-height: 1.6; }
.cs-quickfind-form label { display: block; margin-bottom: .5rem; font-size: .8125rem; font-weight: 700; }
.cs-quickfind-input-row { display: flex; min-width: 0; }
.cs-quickfind-input-row input {
    width: 100%; min-width: 0; min-height: 52px; padding: .75rem 1rem;
    border: 1px solid #aaa294; border-right: 0; border-radius: var(--cs-radius-small) 0 0 var(--cs-radius-small);
    background: #fff; color: var(--cs-ink); font: inherit;
}
.cs-quickfind-input-row .tt-hint { background: #fff !important; }
.cs-quickfind-input-row button {
    min-width: 112px; padding: .75rem 1rem; border: 1px solid var(--cs-ink);
    border-radius: 0 var(--cs-radius-small) var(--cs-radius-small) 0;
    background: var(--cs-ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.cs-quickfind-input-row button:hover { background: #3d3320; }
.cs-quickfind-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--cs-line); }
.cs-quickfind-links span { margin-right: .5rem; color: var(--cs-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cs-quickfind-links a { padding: .4rem .7rem; border: 1px solid var(--cs-line); border-radius: 999px; color: var(--cs-ink); font-size: .75rem; font-weight: 700; text-decoration: none; }
.cs-quickfind-links a:hover { border-color: var(--cs-gold-dark); background: var(--cs-ivory); }
.cs-list-search { margin: 1rem 0 2rem; padding: clamp(1rem, 2.5vw, 1.75rem); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: var(--cs-ivory); }
.cs-list-search h2 { margin: 0 0 .75rem; font-size: clamp(1.25rem, 2vw, 1.65rem); }
.cs-list-search label { display: block; margin-bottom: .4rem; font-size: .8rem; font-weight: 700; }
.cs-list-search-row { display: flex; max-width: 720px; }
.cs-list-search-row input { flex: 1; min-width: 0; min-height: 44px; padding: .6rem .85rem; border: 1px solid #aaa294; border-radius: var(--cs-radius-small) 0 0 var(--cs-radius-small); background: #fff; color: var(--cs-ink); }
.cs-list-search-row button { min-width: 96px; padding: .6rem .85rem; border: 1px solid var(--cs-ink); border-radius: 0 var(--cs-radius-small) var(--cs-radius-small) 0; background: var(--cs-ink); color: #fff; font-weight: 700; cursor: pointer; }
.cs-list-search-row button:hover { background: #3d3320; }
.cs-list-search p { margin: .6rem 0 0; color: var(--cs-muted); font-size: .8rem; }
.cs-section { padding: clamp(3rem, 6vw, 5.5rem) 0 0; }
.cs-section-heading { margin-bottom: 1.75rem; }
.cs-section-heading h2,
.cs-community h2 { margin: 0 0 .8rem; font-size: clamp(1.65rem, 2.7vw, 2.4rem); letter-spacing: -.035em; }
.cs-section-heading p { max-width: 64ch; margin: 0; color: var(--cs-muted); line-height: 1.75; }
.cs-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.cs-category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: clamp(1.5rem, 2.5vw, 2.5rem);
    color: var(--cs-ink);
    background: var(--cs-ivory);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
}
.cs-category-card:hover { border-color: #b4a688; }
.cs-category-title { margin: 0 0 .85rem; font-size: 1.35rem; line-height: 1.3; font-weight: 700; }
.cs-category-text { flex: 1; margin: 0 0 1.75rem; color: var(--cs-muted); font-size: .9375rem; line-height: 1.7; }
.cs-category-link { color: var(--cs-ink); font-size: .8125rem; font-weight: 700; text-decoration: underline; text-underline-offset: .3em; }
.cs-category-link:hover { color: var(--cs-gold-dark); }
.cs-community {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: clamp(3rem, 6vw, 5.5rem);
    padding: clamp(2rem, 4vw, 4rem);
    color: #f5f3ec;
    background: #191919;
    border: 1px solid #403a2d;
    border-radius: var(--cs-radius);
}
.cs-community h2, .cs-community h3 { color: #fff; }
.cs-community .cs-eyebrow { color: var(--cs-gold-light); }
.cs-community-copy p { max-width: 55ch; color: #d5d2c9; line-height: 1.8; }
.cs-community-aside { align-self: center; padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid #625640; }
.cs-community-aside p { color: #d5d2c9; }
.cs-community-aside strong { display: block; color: var(--cs-gold-light); font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 700; line-height: 1.1; letter-spacing: -.055em; }
.cs-community-aside span { display: block; margin-top: .75rem; color: #d5d2c9; font-size: .875rem; letter-spacing: .04em; }
.cs-community a { color: var(--cs-gold-light); }
.cs-community a:hover { color: #fff; }
.cs-community .cs-button--primary { color: var(--cs-ink); background: var(--cs-gold-light); border-color: var(--cs-gold-light); }
.cs-community .cs-button--primary:hover { color: var(--cs-ink); background: #f7e7c2; border-color: #f7e7c2; }
.cs-community .cs-button--secondary { color: #f5f3ec; border-color: #948369; }
.cs-community .cs-button--secondary:hover { color: #fff; background: #3b3529; }
.cs-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.cs-guide-step { padding: 1.75rem 0 1rem; border-top: 2px solid var(--cs-gold); }
.cs-guide-step h3 { margin: 0 0 .75rem; font-size: 1.1rem; }
.cs-guide-step p { color: var(--cs-muted); font-size: .9375rem; line-height: 1.75; }
.cs-guide-step a { font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }

/* Shared help, shipping and service content uses native editable page bodies. */
.cs-content-page { max-width: 1100px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3.5rem) 0; }
.cs-kicker { margin-bottom: 1rem; color: var(--cs-gold-dark); font-size: .6875rem; font-weight: 750; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; }
.cs-content-page > h1 { max-width: 24ch; margin-bottom: 1.25rem; font-size: clamp(2rem, 4vw, 3.25rem); }
.cs-content-page > p { max-width: 72ch; color: var(--cs-muted); line-height: 1.8; }
.cs-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.cs-service-card { min-width: 0; padding: 2rem; color: var(--cs-ink); background: var(--cs-ivory); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); }
.cs-service-card h2 { margin-top: 0; margin-bottom: 1rem; font-size: 1.4rem; }
.cs-service-card h3 { font-size: 1.125rem; }
.cs-service-card p, .cs-service-card li { line-height: 1.8; }
.cs-service-card p:last-child { margin-bottom: 0; }
.cs-service-card a { text-decoration: underline; text-underline-offset: .25em; }
.cs-service-intro { margin-bottom: 2rem; }
.cs-service-intro .cs-lead { max-width: 72ch; }
.cs-product-help { margin: 1.5rem 0; padding: 1.25rem 1.5rem; background: var(--cs-ivory); border: 1px solid var(--cs-line); border-left: 3px solid var(--cs-gold); border-radius: var(--cs-radius-small); font-size: .875rem; line-height: 1.75; }
.cs-product-help p:last-child { margin-bottom: 0; }
.cs-product-help a { text-decoration: underline; text-underline-offset: .25em; }

/* Native CMS / legal pages. Content and required disclosures are never hidden. */
.is-nova .link-content,
.is-nova #tos,
.is-nova #revocation-instruction,
.is-nova #online-revocation-form,
.is-nova #revocation-form,
.is-nova #data-privacy { color: var(--cs-ink); line-height: 1.8; overflow-wrap: anywhere; }
.is-nova .link-content a,
.is-nova #tos a,
.is-nova #revocation-instruction a,
.is-nova #revocation-form a,
.is-nova #data-privacy a { text-decoration: underline; text-underline-offset: .2em; }
.is-nova #tos h2,
.is-nova #revocation-instruction h2,
.is-nova #data-privacy h2 { margin-top: 2rem; }

/* Footer retains native link groups, newsletter consent, tax and shipping note. */
#footer {
    margin-top: clamp(3rem, 6vw, 5rem);
    color: #e1ded5;
    background: #181815;
    border-top: 2px solid var(--cs-gold);
}
#footer h2, #footer h3, #footer h4, #footer h5,
#footer .h2, #footer .h3, #footer .h4, #footer .h5 { color: #fff; }
#footer a { color: #e7e2d6; }
#footer a:hover { color: var(--cs-gold-light); }
#footer .text-muted { color: #c3bfb4 !important; }
#footer .newsletter-footer { background: #22221d; border-bottom: 1px solid #444136; }
#footer .newsletter-footer-heading { color: #fff; }
#footer .form-control { color: var(--cs-ink); background: #fff; }
#footer .btn-primary { color: var(--cs-ink); background: var(--cs-gold-light); border-color: var(--cs-gold-light); }
#footer .btn-primary:hover { color: var(--cs-ink); background: #f7e7c2; border-color: #f7e7c2; }
#footer .btn-secondary { color: var(--cs-ink); background: #fff; }
#footer .btn-icon-secondary { color: #eee9dc; background: #2c2b25; border-color: #656052; }
#footer .btn-icon-secondary:hover { color: var(--cs-gold-light); border-color: var(--cs-gold); }
#footer .footnote-vat { color: #d8d3c6; padding-top: 1rem; padding-bottom: 1.5rem; line-height: 1.75; }
#footer .footnote-vat a { color: #eee5d1; text-decoration: underline; text-underline-offset: .2em; }
#footer #copyright { color: #c3bfb4; background: #10100e; border-top: 1px solid #3a372e; }
#footer .invalid-feedback, #footer .has-error .help-block { color: #ffb9c0; }
.cs-footer-brand {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    padding: 2.5rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #494335;
}
.cs-footer-brand-logo { display: block; width: 72px; height: 72px; padding: 4px; object-fit: contain; background: #000; border-radius: var(--cs-radius-small); }
.cs-footer-brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cs-footer-brand-copy { min-width: 0; }
.cs-footer-brand-copy .cs-eyebrow { margin: 0 0 .5rem; color: var(--cs-gold-light); font-size: .625rem; }
.cs-footer-brand-copy h2 { margin: 0; color: #fff; font-size: 1.35rem; }
.cs-footer-brand-copy strong { display: block; color: #fff; font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.cs-footer-brand-copy p { max-width: 60ch; margin: .35rem 0 0; color: #c9c5ba; font-size: .875rem; line-height: 1.7; }
.cs-footer-brand-links { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; font-size: .8125rem; }
.cs-footer-brand-links a { text-underline-offset: .3em; }

/* Four deliberate layouts: wide desktop, laptop, tablet and phone. */
@media (min-width: 992px) {
    .is-nova .product-info-inner { padding-left: 1.5rem; }
    .is-nova #sidepanel_left { padding-right: 1.75rem; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
    .cs-hero-copy { padding: clamp(2.5rem, 5vw, 4rem); }
    .cs-home .cs-title { font-size: clamp(3.1rem, 4.5vw, 4rem); }
}
@media (max-width: 991.98px) {
    .cs-home { width: calc(100% - 40px); }
    .cs-hero { grid-template-columns: 1fr 1fr; min-height: 480px; }
    .cs-hero-copy { padding: 2.5rem 1.5rem 2.5rem 2rem; }
    .cs-home .cs-title { max-width: 13ch; font-size: clamp(2.7rem, 5vw, 3.6rem); }
    .cs-hero-card { width: clamp(150px, 24vw, 230px); }
    .cs-hero-caption { max-width: 23ch; }
    .cs-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .cs-category-card { padding: 1.5rem; }
    .cs-community { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .cs-community-aside { padding: 1.25rem 0 0; border-top: 1px solid #625640; border-left: 0; }
    .cs-guide-grid { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .cs-footer-brand { grid-template-columns: 64px minmax(0, 1fr); }
    .cs-footer-brand-logo { width: 64px; height: 64px; }
    .cs-footer-brand-links { grid-column: 2; }
    #jtl-nav-wrapper .navbar-brand .cs-header-logo { width: 44px; height: 44px; max-height: 44px; }
}
@media (max-width: 767.98px) {
    .cs-quickfind { grid-template-columns: 1fr; margin-top: 1rem; }
    .cs-quickfind-links { grid-column: 1; }
    .cs-home { width: calc(100% - 30px); }
    .cs-hero { grid-template-columns: 1fr 1fr; min-height: 440px; }
    .cs-hero-copy { padding: 2rem 1rem 2rem 1.5rem; }
    .cs-home .cs-title { font-size: clamp(2.25rem, 6.5vw, 3.2rem); }
    .cs-lead { font-size: .9375rem; line-height: 1.7; }
    .cs-actions { margin-top: 1.5rem; }
    .cs-hero-signature { margin-top: 1.5rem; }
    .cs-hero-card { width: clamp(130px, 25vw, 180px); }
    .cs-hero-caption { display: none; }
    .cs-section { padding-top: 2.75rem; }
    .cs-category-grid { grid-template-columns: minmax(0, 1fr); }
    .cs-category-card { padding: 1.5rem; }
    .cs-category-text { max-width: 55ch; margin-bottom: 1.25rem; }
    .cs-community { margin-top: 2.75rem; padding: 1.5rem; }
    .cs-guide-step { padding-top: 1.5rem; }
    .cs-help-grid { grid-template-columns: minmax(0, 1fr); }
    .cs-service-card { padding: 1.5rem; }
    .cs-footer-brand { gap: 1rem; padding: 2rem 0; }
    .cs-footer-brand-links { grid-column: 1 / -1; }
    .is-nova .productbox-inner { padding: .7rem; }
    .is-nova .productbox-title { font-size: .875rem; }
    .is-nova .product-title { font-size: 1.75rem; }
}
@media (max-width: 679.98px) {
    .cs-hero { display: block; position: relative; min-height: 570px; }
    .cs-hero-copy { display: flex; flex-direction: column; min-height: 570px; padding: 2rem 1.5rem 1.5rem; background: linear-gradient(180deg, #15130e 0, #15130e 28%, transparent 56%, #15130e 100%); }
    .cs-home .cs-title { font-size: clamp(2.35rem, 9vw, 3rem); }
    .cs-hero .cs-lead { display: none; }
    .cs-hero .cs-actions { margin-top: auto; }
    .cs-hero .cs-button { width: 100%; }
    .cs-hero-signature { margin-top: 1rem; font-size: .56rem; }
    .cs-hero-stage { position: absolute; inset: 0; }
    .cs-hero-halo { inset: 23% -35%; }
    .cs-hero-card { top: 55%; width: clamp(140px, 38vw, 190px); }
    .cs-hero-card--left { transform: translate(-115%, -45%) rotate(-17deg); }
    .cs-hero-card--center { transform: translate(-50%, -55%) rotate(-2deg); }
    .cs-hero-card--right { transform: translate(15%, -43%) rotate(13deg); }
    .cs-hero-logo { right: 1rem; bottom: 6.5rem; width: 50px; }
    .cs-category-card { padding: 1.25rem; }
    .cs-community { padding: 1.25rem; }
    .cs-community-aside strong { font-size: 3.5rem; }
}
@media (max-width: 389.98px) {
    .cs-home { width: calc(100% - 24px); }
    .cs-hero-copy { padding: 1.5rem 1.1rem; }
    .cs-home .cs-title { font-size: 2.25rem; }
    .cs-eyebrow { letter-spacing: .12em; }
    .cs-actions { flex-direction: column; align-items: stretch; }
    .cs-hero-logo { width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-button { transition: none; }
}
@media (forced-colors: active) {
    .cs-hero, .cs-category-card, .cs-community, .cs-button,
    .is-nova .productbox { border: 1px solid CanvasText; }
    .cs-home :focus-visible, .is-nova :focus-visible { outline-color: Highlight; }
}
@media print {
    .cs-home, .cs-hero, .cs-hero-copy, .cs-category-card, .cs-community { color: #000; background: #fff; box-shadow: none; }
    .cs-community h2, .cs-community h3, .cs-community p { color: #000; }
    .cs-hero-stage { border: 0; }
    .cs-button { color: #000 !important; background: #fff !important; border-color: #777; }
}

/* Visitor-controlled dark appearance. Product photos and third-party payment
   widgets retain their original colours. */
.cs-theme-dark {
    --cs-ink: #f2f0e9;
    --cs-ink-soft: #ddd9ce;
    --cs-muted: #bcb8ad;
    --cs-paper: #171a1c;
    --cs-ivory: #202426;
    --cs-line: #3c4143;
    --cs-gold: #dec182;
    --cs-gold-dark: #ebcf91;
    --cs-gold-light: #f2dda9;
    --cs-error: #ff9aa5;
    --cs-focus: #ebc96e;
    --cs-shadow: 0 12px 35px rgba(0, 0, 0, .2);
    color-scheme: dark;
}
html.cs-theme-dark,
.cs-theme-dark body.is-nova,
.cs-theme-dark #content-wrapper,
.cs-theme-dark #main-wrapper,
.cs-theme-dark #content,
.cs-theme-dark .breadcrumb-container { color: var(--cs-ink); background-color: var(--cs-paper); }
.cs-theme-dark body.is-nova { background: var(--cs-paper); }
.cs-theme-dark #jtl-nav-wrapper,
.cs-theme-dark #jtl-nav-wrapper .navbar,
.cs-theme-dark .search-form-wrapper-fixed { color: var(--cs-ink); background: #1d2022; border-color: var(--cs-line); }
.cs-theme-dark #header-top-bar { color: #f7f4ec; background: #111315; border-color: #363a3c; }
.cs-theme-dark #jtl-nav-wrapper #burger-menu { color: var(--cs-ink); }
.cs-theme-dark #mainNavigation .nav-link,
.cs-theme-dark #shop-nav .nav-link,
.cs-theme-dark #shop-nav .btn,
.cs-theme-dark #shop-nav a { color: var(--cs-ink); }
.cs-theme-dark #jtl-nav-wrapper .dropdown-menu,
.cs-theme-dark .dropdown-menu { color: var(--cs-ink); background: #24282a; border-color: var(--cs-line); }
.cs-theme-dark .dropdown-item { color: var(--cs-ink); }
.cs-theme-dark .dropdown-item:hover,
.cs-theme-dark .dropdown-item:focus { color: var(--cs-ink); background: #38352c; }
.cs-theme-dark .form-control,
.cs-theme-dark .custom-select,
.cs-theme-dark select,
.cs-theme-dark textarea,
.cs-theme-dark #search-header .form-control,
.cs-theme-dark #jtl-nav-wrapper .main-search-wrapper .form-control,
.cs-theme-dark .cs-quickfind-input-row input,
.cs-theme-dark .cs-list-search-row input { color: var(--cs-ink); background: #24282a; border-color: #697074; }
.cs-theme-dark .form-control::placeholder,
.cs-theme-dark .cs-quickfind-input-row input::placeholder,
.cs-theme-dark .cs-list-search-row input::placeholder { color: #bab6ac; opacity: 1; }
.cs-theme-dark .form-control:disabled,
.cs-theme-dark .form-control[readonly] { color: #c6c1b6; background: #303436; }
.cs-theme-dark .form-group label.col-form-label,
.cs-theme-dark .form-group .col-form-label { color: var(--cs-ink-soft) !important; background: #24282a !important; }
.cs-theme-dark .form-group .col-form-label::after { background: #24282a !important; color: #ff9aa5; }
.cs-theme-dark #search .tt-hint { background: #24282a !important; }
.cs-theme-dark .cs-quickfind-input-row .tt-hint { background: #24282a !important; }
.cs-theme-dark .input-group-text { color: var(--cs-ink); background: #2a2e30; border-color: var(--cs-line); }
.cs-theme-dark .is-nova .btn-primary,
.cs-theme-dark .is-nova .page-item.active .page-link,
.cs-theme-dark .cs-button--primary,
.cs-theme-dark .cs-quickfind-input-row button,
.cs-theme-dark .cs-list-search-row button { color: #17140e; background: var(--cs-gold-light); border-color: var(--cs-gold-light); }
.cs-theme-dark .is-nova .btn-primary:hover,
.cs-theme-dark .cs-button--primary:hover,
.cs-theme-dark .cs-quickfind-input-row button:hover,
.cs-theme-dark .cs-list-search-row button:hover { color: #17140e; background: #ffe8b4; border-color: #ffe8b4; }
.cs-theme-dark .is-nova .btn-secondary,
.cs-theme-dark .is-nova .btn-outline-primary,
.cs-theme-dark .is-nova .btn-outline-secondary,
.cs-theme-dark .is-nova .page-link { color: var(--cs-ink); background: #282c2e; border-color: #72777a; }
.cs-theme-dark .is-nova .btn-secondary:hover,
.cs-theme-dark .is-nova .btn-outline-primary:hover,
.cs-theme-dark .is-nova .btn-outline-secondary:hover,
.cs-theme-dark .is-nova .page-link:hover { color: var(--cs-ink); background: #353a3c; }
.cs-theme-dark .is-nova .card,
.cs-theme-dark .is-nova .modal-content,
.cs-theme-dark .is-nova .productbox,
.cs-theme-dark .cs-quickfind,
.cs-theme-dark .cs-category-card,
.cs-theme-dark .cs-service-card,
.cs-theme-dark .cs-list-search,
.cs-theme-dark .cs-product-help { color: var(--cs-ink); background: var(--cs-ivory); border-color: var(--cs-line); }
.cs-theme-dark .is-nova .card-header,
.cs-theme-dark .is-nova .table thead th { color: var(--cs-ink); background: #2b3032; }
.cs-theme-dark .is-nova .table,
.cs-theme-dark .is-nova .table td,
.cs-theme-dark .is-nova .table th,
.cs-theme-dark .table-striped tbody tr:nth-of-type(odd) { color: var(--cs-ink); background-color: transparent; border-color: var(--cs-line); }
.cs-theme-dark .table-hover tbody tr:hover { color: var(--cs-ink); background-color: #2c3032; }
.cs-theme-dark .is-nova .nav-tabs .nav-link.active { color: var(--cs-ink); background: var(--cs-paper); border-color: var(--cs-line) var(--cs-line) var(--cs-gold); }
.cs-theme-dark .list-group-item,
.cs-theme-dark .pagination,
.cs-theme-dark .alert,
.cs-theme-dark .accordion .card,
.cs-theme-dark .custom-control-label::before { border-color: var(--cs-line); }
.cs-theme-dark .list-group-item { color: var(--cs-ink); background: var(--cs-ivory); }
.cs-theme-dark .cs-quickfind-links a { color: var(--cs-ink); background: #292d2f; }
.cs-theme-dark .cs-category-link { color: var(--cs-gold-light); }
.cs-theme-dark .cs-home .cs-eyebrow,
.cs-theme-dark .cs-kicker { color: var(--cs-gold-light); }
.cs-theme-dark .cs-hero .cs-button--primary,
.cs-theme-dark .cs-community .cs-button--primary { color: #17140e; }
.cs-theme-dark .cs-hero .cs-button--secondary { color: #fff; }
.cs-theme-dark .is-nova .productbox-images,
.cs-theme-dark .is-nova #gallery_wrapper { background: #fff; }
.cs-theme-dark .is-nova .productbox-inner::before { background: var(--cs-ivory); }
.cs-theme-dark .is-nova .productbox-title a,
.cs-theme-dark .is-nova .productbox .price,
.cs-theme-dark .is-nova .product-info .price { color: var(--cs-ink); }
.cs-theme-dark #sidepanel_left,
.cs-theme-dark #sidepanel_left .box { color: var(--cs-ink); background: var(--cs-paper); border-color: var(--cs-line); }
.cs-theme-dark #sidepanel_left .nav-link { color: var(--cs-ink); }
.cs-theme-dark #sidepanel_left .productlist-filter-headline,
.cs-theme-dark #sidepanel_left .box-normal-link { color: var(--cs-ink); }
.cs-theme-dark .is-nova .alert-danger { color: #ffd4d8; background: #4c1920; border-color: #95505b; }
.cs-theme-dark .is-nova .alert-warning { color: #ffe5ac; background: #493718; border-color: #94723e; }
.cs-theme-dark .is-nova .alert-success { color: #d0f0d7; background: #183e29; border-color: #3f7953; }
.cs-theme-dark .is-nova .alert-info { color: #d6ebf5; background: #193744; border-color: #4b7890; }
.cs-theme-dark .is-nova .text-muted { color: var(--cs-muted) !important; }
.cs-theme-dark .is-nova .btn-skip-to:focus { color: #17140e; background: var(--cs-gold-light); }

/* Search-adjacent, keyboard accessible appearance switch. */
#shop-nav .cs-theme-control { display: flex; align-items: center; margin: 0 .3rem; }
#shop-nav .cs-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 38px; padding: .35rem .55rem;
    color: var(--cs-ink); background: transparent; border: 1px solid var(--cs-line);
    border-radius: 6px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
#shop-nav .cs-theme-toggle:hover { color: var(--cs-gold-dark); background: var(--cs-ivory); }
#shop-nav .cs-theme-toggle:focus-visible { outline: 3px solid var(--cs-focus); outline-offset: 2px; }
#shop-nav .cs-theme-icon { font-size: 1.15rem; line-height: 1; }
@media (max-width: 575.98px) {
    #shop-nav .cs-theme-control { margin: 0 .1rem; }
    #shop-nav .cs-theme-toggle { width: 34px; min-height: 34px; padding: .2rem; }
    #shop-nav .cs-theme-label { display: none; }
}
@media print {
    .cs-theme-dark body.is-nova { color: #000 !important; background: #fff !important; }
    #shop-nav .cs-theme-control { display: none !important; }
}

/* Keep gallery product cards aligned despite per-item inline heights. */
.is-nova #product-list.layout-gallery .product-wrapper { display: flex; height: auto !important; }
.is-nova #product-list.layout-gallery .product-wrapper > .productbox { flex: 1 1 auto; min-width: 0; height: auto !important; }
/* Maintain readable text on the light withdrawal button in dark mode. */
html.cs-theme-dark #footer a.withdrawal-link.btn-primary { color: #17140e !important; }

/* Use one row gap instead of a margin on every card except the last. */
.is-nova #product-list.layout-gallery { row-gap: 4rem; }
.is-nova #product-list.layout-gallery .product-wrapper { margin-bottom: 0 !important; }


/* Checkout summary: readable dark surfaces and controls. */
html.cs-theme-dark body.is-nova.is-checkout #checkout .card,
html.cs-theme-dark body.is-nova.is-checkout #checkout .card-body,
html.cs-theme-dark body.is-nova.is-checkout #checkout .checkout-steps.stepper,
html.cs-theme-dark body.is-nova.is-checkout #checkout .checkout-steps.stepper .step {
    background: #202426 !important;
    color: #f2f0e9 !important;
    border-color: #3c4143 !important;
}
html.cs-theme-dark body.is-nova.is-checkout #checkout .card-header {
    background: #2b3032 !important;
    color: #f2f0e9 !important;
    border-color: #3c4143 !important;
}
html.cs-theme-dark body.is-nova.is-checkout #checkout h1,
html.cs-theme-dark body.is-nova.is-checkout #checkout h2,
html.cs-theme-dark body.is-nova.is-checkout #checkout h3,
html.cs-theme-dark body.is-nova.is-checkout #checkout h4,
html.cs-theme-dark body.is-nova.is-checkout #checkout .card p,
html.cs-theme-dark body.is-nova.is-checkout #checkout .card span,
html.cs-theme-dark body.is-nova.is-checkout #checkout .card label,
html.cs-theme-dark body.is-nova.is-checkout #checkout .table,
html.cs-theme-dark body.is-nova.is-checkout #checkout .table th,
html.cs-theme-dark body.is-nova.is-checkout #checkout .table td {
    color: #f2f0e9 !important;
}
html.cs-theme-dark body.is-nova.is-checkout #checkout .form-control,
html.cs-theme-dark body.is-nova.is-checkout #checkout textarea {
    background: #24282a !important;
    color: #f2f0e9 !important;
    border-color: #697074 !important;
}
html.cs-theme-dark body.is-nova.is-checkout #checkout .form-control::placeholder,
html.cs-theme-dark body.is-nova.is-checkout #checkout textarea::placeholder {
    color: #bcb8ad !important;
    opacity: 1;
}
html.cs-theme-dark body.is-nova.is-checkout #checkout .checkout-confirmation .card-header .btn-link {
    background: #e7c322 !important;
    border: 1px solid #e7c322 !important;
    border-radius: .4rem;
    color: #17140e !important;
    padding: .45rem .75rem;
    text-decoration: none;
}