/* ─── Northcore-style ecom — Mobile-first ─────────────────────────── */

:root {
    --bs-body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-serif: 'Source Serif 4', Georgia, serif;
    --color-accent: #f6a123;
    --color-teal: #0da19a;
    --color-dark: #020912;
    --color-footer: #3a3a3a;
    --color-badge-bg: rgba(0,0,0,0.04);
    --section-spacing: 2.5rem;

    /* Override Bootstrap primary so utilities (text-primary, bg-primary, border-primary,
       btn-outline-primary, link-primary, spinner-border text-primary, etc.) pick up
       the brand dark colour instead of Bootstrap's default blue. */
    --bs-primary: #020912;
    --bs-primary-rgb: 2, 9, 18;
    --bs-link-color: #020912;
    --bs-link-color-rgb: 2, 9, 18;
    --bs-link-hover-color: #f6a123;
    --bs-link-hover-color-rgb: 246, 161, 35;
}

body { background: #fff; }

/* ─── Focus states (keyboard accessibility) ────────────────────── */
*:focus-visible {
    outline: 2px solid var(--color-accent, #f6a123);
    outline-offset: 2px;
    border-radius: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-accent, #f6a123);
    outline-offset: 2px;
}
/* Remove the default focus when using mouse */
*:focus:not(:focus-visible) { outline: none; }

/* ─── Typography ────────────────────────────────────────────────── */

h1, h2, h3, .display-4, .display-5, .display-6 {
    font-family: var(--font-heading);
    letter-spacing: var(--heading-letter-spacing, 0.03em);
}

.display-4 { font-size: 2.5rem; }
@media (min-width: 768px) { .display-4 { font-size: 4rem; } }
@media (min-width: 992px) { .display-4 { font-size: 5rem; } }

/* ─── Buttons — square corners like Northcore ───────────────────── */

.btn {
    /* Radius is a per-site token. 0 is the long-standing default, so a site that sets nothing is
       unchanged; Optimum Time's live store uses a 40px pill. */
    border-radius: var(--btn-radius, 0); min-width: 160px; text-align: center;
    font-family: var(--btn-font, inherit); font-size: var(--btn-font-size, 16px);
    text-transform: var(--btn-text-transform, uppercase); letter-spacing: var(--btn-letter-spacing, 2px);
    padding: var(--btn-padding, 0.75em 2em); line-height: 1.5;
}
.btn-sm {
    min-width: auto !important; font-size: 0.85rem !important; padding: 0.4em 1.2em !important;
    line-height: 1.5 !important;
}
.form-control, .form-select, .input-group-text { border-radius: 0; }

/* Primary button — CMS-configurable */
.btn-primary {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-bg) !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    filter: brightness(0.85);
}
.btn-outline-primary {
    color: var(--btn-primary-bg) !important;
    border: var(--btn-border-width, 2px) solid var(--btn-primary-bg) !important;
    background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

/* Secondary button — CMS-configurable */
.btn-secondary {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border-color: var(--btn-secondary-bg) !important;
}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
    background-color: var(--btn-secondary-bg) !important;
    border-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    filter: brightness(0.85);
}
.btn-outline-secondary {
    color: var(--btn-secondary-bg) !important;
    border: var(--btn-border-width, 2px) solid var(--btn-secondary-bg) !important;
    background: transparent !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:active {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
}

/* Accent button — alias for primary */
.btn-accent {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-bg) !important;
}
.btn-accent:hover {
    filter: brightness(0.85);
}

/* Dark button — uses secondary colours */
.btn-dark {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border-color: var(--btn-secondary-bg) !important;
}
.btn-dark:hover {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    filter: brightness(0.85);
}
.btn-outline-dark {
    color: var(--btn-secondary-bg) !important;
    border-color: var(--btn-secondary-bg) !important;
}
.btn-outline-dark:hover {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
}

/* ─── Header — white bg, dark text ──────────────────────────────── */

.navbar {
    background: #fff !important;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.navbar .nav-link {
    color: #222 !important;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.navbar .nav-link:hover { color: var(--color-accent) !important; }
.navbar-brand img { max-height: 28px; }

@media (min-width: 992px) {
    .navbar .nav-link { font-size: 1.25rem; }
}

/* ─── Hero ──────────────────────────────────────────────────────── */

.hero-section {
    position: relative;
    overflow: hidden;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000;
    opacity: 0.4;
}
.hero-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.hero-content {
    position: relative;
    z-index: 2;
}

/* ─── Trust Badges ──────────────────────────────────────────────── */

.trust-badges {
    background: var(--color-badge-bg);
    padding: 1.2rem 0;
}
.trust-badge-text {
    font-family: var(--trust-badge-font, var(--font-heading));
    font-size: var(--trust-badge-size, 1.1rem);
    letter-spacing: var(--trust-badge-spacing, 0.05em);
    font-weight: var(--trust-badge-weight, 300);
}
@media (min-width: 768px) {
    .trust-badge-text { font-size: var(--trust-badge-size-d, 1.4rem); }
}

/* ─── Collection Cards ──────────────────────────────────────────── */

.collection-card {
    transition: transform 0.3s ease;
    cursor: pointer;
    aspect-ratio: 1/1;
}
.collection-card:hover { transform: scale(1.02); }

.collection-card img {
    filter: grayscale(30%);
    transition: filter 0.4s ease;
}
.collection-card:hover img { filter: grayscale(0%); }

.collection-card-overlay {
    background: rgba(0,0,0,0.25);
    transition: background 0.3s ease;
}
.collection-card:hover .collection-card-overlay {
    background: rgba(0,0,0,0.45);
}
.collection-card-btn {
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(10px);
    background-color: var(--color-accent) !important;
    color: var(--color-accent-text, #000) !important;
    border: none !important;
    border-radius: 0;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.collection-card:hover .collection-card-btn {
    opacity: 1 !important;
    transform: translateY(0);
}

/* ─── Product Cards ─────────────────────────────────────────────── */

.product-card {
    border-radius: 0;
}
.quick-add-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent;
    color: #555; cursor: pointer; padding: 0;
    transition: color 0.15s ease;
}
.quick-add-btn i { font-size: 1.05rem; line-height: 1; }
.quick-add-btn:hover { color: var(--color-primary, #333); }
/* Full-width "Choose options"/"Add to cart" card CTA (product_card_action=button) */
.pc-choose-btn {
    display: block; width: 100%; margin-top: 0.75rem;
    border: 1px solid var(--pc-choose-border, #1f1f21); background: transparent;
    color: var(--pc-choose-color, #1f1f21); padding: 0.6em 1em; cursor: pointer;
    font-family: var(--btn-font, inherit); font-size: 0.85rem; line-height: 1.4;
    letter-spacing: var(--pc-choose-letter-spacing, 0.3px); text-transform: var(--btn-text-transform, uppercase);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background 0.15s ease, color 0.15s ease;
}
.pc-choose-btn:hover { background: var(--pc-choose-border, #1f1f21); color: #fff; }
/* Per-site content width at wide viewports (default = Bootstrap's 1320px). */
@media (min-width: 1400px) {
    .container { max-width: var(--container-max-width, 1320px); }
}
/* Newsletter "inline" style: one borderless field with the arrow inside it. */
/* The rule and placeholder derive from the text colour rather than being fixed black, so the
   inline style works on a dark band as well as a light one - the homepage section's own default
   background is #212529, where hard-coded black was invisible. The rgba values stay first as the
   fallback for anything without color-mix, so nothing changes on the light bands already using
   this. */
.newsletter-inline-input {
    width: 100%; background: transparent; border: 0;
    border-bottom: 1px solid rgba(0,0,0,0.35);
    border-bottom-color: color-mix(in srgb, currentColor 40%, transparent);
    padding: 0.6rem 2.5rem 0.6rem 0.25rem; font-size: 1rem; color: inherit;
}
.newsletter-inline-input:focus { outline: 0; border-bottom-color: rgba(0,0,0,0.7); border-bottom-color: color-mix(in srgb, currentColor 75%, transparent); }
.newsletter-inline-input::placeholder { color: rgba(0,0,0,0.5); color: color-mix(in srgb, currentColor 55%, transparent); }
.newsletter-inline-btn {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    background: transparent; border: 0; color: inherit; font-size: 1.25rem;
    line-height: 1; cursor: pointer; padding: 0.25rem 0.4rem;
}
.product-card .card-body { padding: 0.875rem; }
.product-card .card-img-top { border-radius: 0; }
.ratio picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio picture img { width: 100%; height: 100%; }

/* Product card image carousel (PLP hover) */
.card-img-carousel { position: relative; }
.card-img-nav {
    position: absolute !important; top: 50% !important; left: auto !important; right: auto !important;
    transform: translateY(-50%); z-index: 2;
    width: auto !important; height: auto !important; border-radius: 8px; border: none;
    background: rgba(248,249,250,0.85); color: #333; font-size: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: none;
    padding: 3px 6px; line-height: 1;
    opacity: 0; transition: opacity 0.2s ease;
    pointer-events: none;
}
.card-img-prev { left: 6px !important; }
.card-img-next { right: 6px !important; left: auto !important; }
.card-img-carousel.has-gallery:hover .card-img-nav { opacity: 1; pointer-events: auto; }
.card-img-dots {
    position: absolute !important; bottom: 6px !important; top: auto !important;
    left: 50% !important; transform: translateX(-50%);
    width: auto !important; height: auto !important;
    display: flex; gap: 4px; z-index: 2;
    background: rgba(248,249,250,0.85); border-radius: 8px; padding: 3px 6px;
    opacity: 0; transition: opacity 0.2s ease;
    pointer-events: none;
}
.card-img-carousel.has-gallery:hover .card-img-dots { opacity: 1; pointer-events: auto; }
@media (hover: none) {
    .card-img-carousel.has-gallery .card-img-dots { opacity: 1; pointer-events: auto; }
    .card-img-carousel.has-gallery .card-img-nav { display: none !important; }
}
.card-img-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(0,0,0,0.25); transition: background 0.15s;
}
.card-img-dot.active { background: rgba(0,0,0,0.7); }
.card-img-track { position: absolute !important; top: 0; left: 0; height: 100%; }
.card-img-track-slide { overflow: hidden; background: var(--product-image-bg, #f8f9fa); }
/* One contract for every image in the card carousel. The static first image sits
   under the JS-built track, so the two must render identically or the tile jumps the
   moment the track takes over on the first swipe. Both are styled here and nowhere
   else: no inline styles on the card image, no styling in the carousel JS. */
.card-img-carousel .card-img-slide,
.card-img-track-slide img {
    object-fit: var(--product-image-fit, contain);
    /* Image Padding in admin Settings > Product Images. It used to be hardcoded here
       with !important, which quietly made that control do nothing on listing cards.
       Uniform on all four sides: the dots strip is a translucent pill that overlays
       the image, so it does not need a reserved band under it. */
    padding: var(--product-image-padding, 1.25rem);
    mix-blend-mode: var(--product-img-blend, multiply);
    transform: scale(var(--product-image-scale, 1));
    -webkit-user-drag: none;
    user-select: none;
}
/* A chosen listing image is a lifestyle shot meant to fill the tile. It is always
   slide one, so it gets the same treatment static or in the track. */
.card-img-carousel .card-img-slide.plp-cover,
.card-img-track-slide.plp-cover img {
    object-fit: cover;
    padding: 0;
    mix-blend-mode: normal;
}

/* Product image thumbnails (cart, checkout sidebars, account order lines) */
.product-thumb {
    width: 50px; height: 50px; border-radius: 4px; overflow: hidden;
    background: #f8f9fa; flex-shrink: 0;
}
/* Line-item thumbs get their own blend key rather than sharing --product-img-blend
   with the listing tiles. A site can want the listing images left alone (normal,
   because the photos carry a real white background) while these 50px thumbs, which
   sit on a grey checkout/cart panel, still need multiply to avoid a white square. */
.product-thumb img {
    width: 100%; height: 100%;
    object-fit: var(--product-image-fit, contain);
    mix-blend-mode: var(--product-thumb-blend, multiply);
}

/* Price colors */
.price-current { color: var(--color-teal); font-weight: 700; }
.price-was { color: #999; text-decoration: line-through; }

/* Line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 2.8em;
}
/* Product card names: allow more lines so long names are not truncated (per-site;
   default keeps the 2-line clamp). Cart/checkout keep the plain .line-clamp-2. */
.product-card .line-clamp-2 { -webkit-line-clamp: var(--pc-name-clamp, 2); }

/* ─── Product Scroll (mobile carousel) ──────────────────────────── */

.product-scroll {
    display: flex; gap: 1rem; overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 0.5rem;
}
.product-scroll::-webkit-scrollbar { display: none; }
.product-scroll { cursor: grab; }
.product-scroll > * { scroll-snap-align: start; }
.product-scroll-item { flex: 0 0 45%; min-width: 160px; }
@media (min-width: 768px) { .product-scroll-item { flex: 0 0 30%; } }
@media (min-width: 992px) { .product-scroll-item { flex: 0 0 22%; } }
.product-scroll-wrap { position: relative; }
.scroll-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15);
    background: #fff; color: #333; display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: opacity 0.2s;
    min-width: auto !important; padding: 0 !important; font-size: 0.9rem;
}
.scroll-arrow:hover { background: #f5f5f5; }
.scroll-arrow-left { left: -12px; }
.scroll-arrow-right { right: -12px; }
.scroll-arrow.hidden { opacity: 0; pointer-events: none; }

/* ─── About Section ─────────────────────────────────────────────── */

.about-section h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.5rem;
}
@media (min-width: 768px) {
    .about-section h2 { font-size: 2rem; }
}

/* ─── Thumbnail Gallery ─────────────────────────────────────────── */

.thumbnail-img {
    opacity: 0.6;
    transition: opacity 0.15s;
    cursor: pointer;
}
.thumbnail-img.active,
.thumbnail-img:hover {
    opacity: 1;
    border-color: #222 !important;
}

/* ─── Attribute Selectors ───────────────────────────────────────── */

.btn-check:checked + .btn-outline-dark {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border-color: var(--btn-secondary-bg) !important;
}

/* ─── Pagination ────────────────────────────────────────────────── */

.pagination { gap: 0.35rem; }
.pagination .page-link {
    border: none; border-radius: 0 !important; color: var(--pagination-color, var(--nav-text-color, #222));
    font-family: var(--body-font, inherit); font-size: 1.1rem;
    padding: 0.6rem 1rem; min-width: 44px; text-align: center;
}
.pagination .page-link:hover { background: rgba(0,0,0,0.05); color: var(--pagination-hover-color, var(--nav-hover-color, #f6a123)); }
.pagination .page-item.active .page-link { background: var(--btn-secondary-bg, #020912); color: var(--btn-secondary-text, #fff); border-color: var(--btn-secondary-bg, #020912); }
.pagination .page-item.disabled .page-link { color: rgba(0,0,0,0.25); background: none; }

/* ─── Quantity Selector ─────────────────────────────────────────── */

.qty-selector { display: inline-flex; align-items: center; border: 1px solid rgba(0,0,0,0.15); }
.qty-btn { width: 36px; height: 36px; border: none; background: none; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #333; min-width: auto !important; }
.qty-btn:hover { background: rgba(0,0,0,0.05); }
.qty-input { width: 40px; height: 36px; border: none; border-left: 1px solid rgba(0,0,0,0.15); border-right: 1px solid rgba(0,0,0,0.15); text-align: center; font-size: 0.9rem; -moz-appearance: textfield; min-height: auto !important; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ─── Filter Toggle ─────────────────────────────────────────────── */

.quick-add-sizechart-toggle { font-size: 0.72rem; }
.filter-toggle {
    border: var(--filter-toggle-border, none); background: none; color: #555; font-size: 0.85rem;
    padding: var(--filter-toggle-pad, 0.3rem 0); cursor: pointer; text-decoration: none; border-radius: var(--btn-radius, 0);
}
.filter-toggle:hover { color: var(--color-accent); }
.filter-toggle i { font-size: 0.8rem; }
.filter-section { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(0,0,0,0.08); }
.filter-label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #555; margin-bottom: 0.5rem; }

/* ─── Subcategory Pills ─────────────────────────────────────────── */

.subcategory-scroll-wrap { position: relative; }
.subcategory-scroll-wrap::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 40px;
    background: linear-gradient(to right, transparent, #fff);
    pointer-events: none; z-index: 1;
}
.subcategory-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
}
.subcategory-scroll::-webkit-scrollbar { display: none; }
.subcategory-pill {
    display: inline-block; padding: 0.4em 1.2em; font-size: 0.8rem;
    border: 1px solid rgba(0,0,0,0.15); color: #333; text-decoration: none;
    letter-spacing: 0.03em; transition: all 0.2s; white-space: nowrap; flex-shrink: 0;
}
.subcategory-pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
.subcategory-pill.active { border-color: var(--btn-secondary-bg); background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }

/* ─── Breadcrumbs ───────────────────────────────────────────────── */

.breadcrumb-nav { padding: 0.75rem 0; }
.breadcrumb-nav .breadcrumb { font-size: 0.8rem; letter-spacing: 0.03em; }
.breadcrumb-nav .breadcrumb-item a { color: rgba(0,0,0,0.5); text-decoration: none; }
.breadcrumb-nav .breadcrumb-item a:hover { color: var(--color-accent); }
.breadcrumb-nav .breadcrumb-item.active { color: rgba(0,0,0,0.7); }
.breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before { color: rgba(0,0,0,0.3); }

/* A long trail wrapped onto a second line, which pushed the page content down and read as
   clutter. Kept on one line and swiped instead, the way the subcategory pills above already
   work. Bootstrap's .breadcrumb is a flex row with flex-wrap: wrap, so the wrap has to be
   turned off explicitly - overflow alone will not do it. Mobile only: from 768px there is
   room for the full trail, and a hidden scrollbar is a poor affordance for a mouse. */
.breadcrumb-nav .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
}
.breadcrumb-nav .breadcrumb::-webkit-scrollbar { display: none; }
/* Each crumb holds its own line, so one long category name cannot break the row, and does not
   shrink - the same guard .subcategory-pill uses, so the row overflows rather than squashing. */
.breadcrumb-nav .breadcrumb-item { white-space: nowrap; flex-shrink: 0; }

@media (min-width: 768px) {
    .breadcrumb-nav .breadcrumb { flex-wrap: wrap; overflow-x: visible; }
}

/* ─── Product Description ───────────────────────────────────────── */

.product-description-inline,
.product-description-inline div,
.product-description-inline p,
.product-description-inline span,
.product-description-inline li,
.product-description-inline a {
    font-family: var(--body-font) !important;
    font-size: var(--body-font-size) !important;
    line-height: var(--body-line-height) !important;
    letter-spacing: var(--body-letter-spacing) !important;
    text-transform: none !important;
}
.product-description-inline h1,
.product-description-inline h2,
.product-description-inline h3,
.product-description-inline h4,
.product-description-inline h5,
.product-description-inline h6 {
    font-family: var(--subheading-font) !important;
    font-size: var(--subheading-font-size) !important;
    font-weight: var(--subheading-font-weight) !important;
    letter-spacing: var(--body-letter-spacing) !important;
    line-height: var(--body-line-height) !important;
    text-transform: none !important;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.product-description-inline ul { padding-left: 1.2rem; }
.product-description-inline li { margin-bottom: 0.3rem; }
.product-description-inline img { max-width: 100%; height: auto; margin: 1rem 0; }

/* ─── Cart Drawer ───────────────────────────────────────────────── */

.cart-drawer-item { padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.cart-drawer-item:last-child { border-bottom: none; }
.cart-drawer-empty { text-align: center; padding: 3rem 1rem; color: #999; }
.cart-drawer-empty i { font-size: 3rem; display: block; margin-bottom: 1rem; }

/* ─── CMS Content ───────────────────────────────────────────────── */

.cms-content { line-height: 1.7; color: #444; }
.cms-content h2, .cms-content h3, .cms-content h4 { color: #222; margin-top: 1.5em; margin-bottom: 0.5em; }
.cms-content h2:first-child, .cms-content h3:first-child, .cms-content h4:first-child { margin-top: 0; }
.cms-content p { margin-bottom: 1em; }
.cms-content ul, .cms-content ol { margin-bottom: 1em; padding-left: 1.5em; }
.cms-content li { margin-bottom: 0.35em; }
.cms-content a { color: var(--color-link, var(--color-accent, #f6a123)); text-decoration: underline; }
.cms-content a:hover { opacity: 0.8; }
.cms-content blockquote { border-left: 3px solid var(--color-accent, #f6a123); padding: 0.75em 1.25em; margin: 1.5em 0; background: #f8f9fa; border-radius: 0 4px 4px 0; }
.cms-content table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.cms-content th, .cms-content td { padding: 0.6em 0.75em; border-bottom: 1px solid #eee; text-align: left; }
.cms-content th { font-weight: 600; color: #333; }
.cms-content img { max-width: 100%; height: auto; border-radius: 4px; }
/* Live shipping rate tables rendered from CMS > Settings > Shipping ({{shipping_rates}}).
   Scoped to the table so nothing here can leak into another site's typography. */
.shipping-rates th.rate-cost, .shipping-rates td.rate-cost { text-align: right; white-space: nowrap; }
.shipping-rates .rate-note { color: #888; font-weight: 400; }
.shipping-rates .rate-free { color: #198754; font-weight: 600; }
/* The destinations a zone covers, printed under its heading. Quieter than the heading and tight to
   it, so it reads as a qualifier rather than as body copy. */
.shipping-rates-countries { margin: -0.35rem 0 0.6rem; font-size: 0.85rem; color: #666; }

.cms-content-full { max-width: 100%; }
.cms-content-full section[style*="grid"] { grid-template-columns: 1fr !important; }
@media (min-width: 768px) { .cms-content-full section[style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr 1fr !important; } .cms-content-full section[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; } }

/* ─── Footer ────────────────────────────────────────────────────── */

footer .footer-heading { font-family: var(--footer-heading-font, inherit); font-size: var(--footer-heading-size, 0.85rem); font-weight: var(--footer-heading-weight, 700); letter-spacing: var(--footer-heading-spacing, 0.08em); text-transform: uppercase; }
.footer-region .form-select { background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: #f1f1f0; font-size: 0.85rem; }
.footer-region .form-select:focus { background-color: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: #fff; }
.footer-region .form-select option { background: #333; color: #f1f1f0; }

footer {
    background-color: var(--color-footer) !important;
}
footer a { color: #f1f1f0 !important; }
footer a:hover { color: var(--color-accent) !important; }

/* ─── Newsletter Section ────────────────────────────────────────── */

.newsletter-section input {
    border: 2px solid rgba(255,255,255,0.55);
    background: transparent;
    color: #fff;
}
.newsletter-section input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-section .btn { background: var(--color-accent); color: var(--color-accent-text, #000); border: none; }

/* ─── Responsive Utilities ──────────────────────────────────────── */

html { scroll-behavior: smooth; }
.cursor-pointer { cursor: pointer; }
.object-fit-contain { object-fit: contain; }
.object-fit-cover { object-fit: cover; }
.offcanvas {
    max-width: calc(100vw - 4rem); height: 100vh !important; height: 100dvh !important; top: 0 !important;
    transition: transform 0.3s ease !important; z-index: 1070 !important; overflow: hidden;
}
@media (min-width: 768px) { .offcanvas { max-width: 24rem; } }
.offcanvas-backdrop { background: rgba(0,0,0,0.5) !important; z-index: 1065 !important; }
.offcanvas-backdrop.show { opacity: 1 !important; }

@media (max-width: 1199.98px) {
    header a[href="/"] img { transform: scale(0.75); transform-origin: left center; }
}
@media (max-width: 767.98px) {
    .btn { width: 100%; text-align: center; }
    .input-group .btn, .btn-sm { width: auto; }
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .form-control, .form-select { min-height: 44px; font-size: 16px; }
    .navbar-brand { font-size: 1rem; }
    :root { --section-spacing: 1.5rem; }
}

@media (min-width: 992px) {
    .sticky-lg-top { position: sticky !important; }
}

/* Product description */
.product-description img { max-width: 100%; height: auto; }
.product-description table { width: 100%; overflow-x: auto; display: block; }

/* ─── Nav Hover Dropdowns (pure CSS, no Bootstrap JS) ───────────── */

.nav-hover-dd {
    position: relative;
}

.nav-hover-panel {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    min-width: 200px;
    padding: 0.5rem 0;
    z-index: 1080;
    display: none;
}

.nav-hover-dd.nav-open > .nav-hover-panel {
    display: block;
}

/* ─── Wishlist heart ─────────────────────────────────────────────── */
.wishlist-heart {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent;
    color: #555; cursor: pointer; padding: 0;
    transition: color 0.15s ease;
}
.wishlist-heart:hover { color: var(--color-accent, #f6a123); }
.wishlist-heart.active { color: var(--color-accent, #f6a123); }
.wishlist-heart i { font-size: 1.05rem; line-height: 1; }
.wishlist-heart-wrap .wishlist-heart { width: 44px; height: 44px; }
.wishlist-heart-wrap .wishlist-heart i { font-size: 1.4rem; }

/* ─── Toast notifications ────────────────────────────────────────── */
.app-toast {
    background: #1f1f21 !important; color: #fff !important;
    border-radius: 0 !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25) !important;
    border-top: 3px solid var(--color-accent, #f6a123) !important;
    min-width: 320px; max-width: 460px;
}
.app-toast .toast-body { font-size: 0.95rem; line-height: 1.4; padding: 1rem 1rem 1rem 1.1rem; color: #fff; }
.app-toast .toast-body i.bi { color: var(--color-accent, #f6a123); font-size: 1.05rem; }
.app-toast .toast-body a { color: var(--color-link, var(--color-accent, #f6a123)); font-weight: 600; text-decoration: underline; }
.app-toast .btn-close { filter: invert(1) grayscale(100%) brightness(2); font-size: 0.75rem; padding: 0.5rem; opacity: 0.7; }
.app-toast .btn-close:hover { opacity: 1; }
.app-toast-danger { border-top-color: #ff5a4e !important; }
.app-toast-danger .toast-body i.bi { color: #ff5a4e; }
.app-toast-warning { border-top-color: #ffc94a !important; }
.app-toast-warning .toast-body i.bi { color: #ffc94a; }

/* ─── Alerts — on-brand override ─────────────────────────────────── */
.alert {
    border-radius: 0;
    border: none;
    border-left: 3px solid transparent;
    padding: 0.9rem 1.1rem;
    font-size: 0.95rem;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    background: #f6f6f7;
    color: #1f1f21;
}
.alert.small { font-size: 0.95rem; }
.alert > i.bi:first-child,
.alert > .alert-icon {
    font-size: 1.25rem;
    line-height: 1.2;
    flex-shrink: 0;
    margin-top: 0.05rem;
}
.alert .alert-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.alert .alert-link:hover { opacity: 0.8; }
.alert-dismissible .btn-close { padding: 1rem; }

.alert-info {
    background: #eef7f6;
    color: #114b48;
    border-left-color: var(--color-teal, #0da19a);
}
.alert-info > i.bi:first-child { color: var(--color-teal, #0da19a); }

.alert-success {
    background: #ecf6ee;
    color: #1d4d2a;
    border-left-color: #2e8c44;
}
.alert-success > i.bi:first-child { color: #2e8c44; }

.alert-warning {
    background: #fdf3e2;
    color: #5a3b06;
    border-left-color: var(--color-accent, #f6a123);
}
.alert-warning > i.bi:first-child { color: var(--color-accent, #f6a123); }

.alert-danger {
    background: #fdecea;
    color: #5a1612;
    border-left-color: #d14b3f;
}
.alert-danger > i.bi:first-child { color: #d14b3f; }

.alert-light {
    background: #f6f6f7;
    color: #1f1f21;
    border-left-color: #d9d9dc;
}

/* Quick-add modal: sold-out sizes stay selectable (to join the waitlist) but read as unavailable */
.quick-size-btn.quick-size-oos { opacity: 0.55; }
.quick-size-btn.quick-size-oos.active { opacity: 1; }

/* ─── Express checkout (PayPal / Apple Pay / Google Pay) ─────────────────── */
.express-checkout { margin-top: 1rem; }
.express-checkout-divider { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; color: #6c757d; font-size: .8125rem; white-space: nowrap; }
.express-checkout-divider::before, .express-checkout-divider::after { content: ""; flex: 1 1 auto; border-top: 1px solid #dee2e6; }
.express-checkout-buttons { display: grid; gap: .5rem; }
.express-checkout-wallet { min-height: 44px; }
.express-checkout-wallet apple-pay-button { --apple-pay-button-width: 100%; --apple-pay-button-height: 44px; --apple-pay-button-border-radius: 4px; display: block; }
.express-checkout-wallet[data-express-wallet="googlepay"] { height: 44px; }
.express-checkout--drawer { margin-top: .75rem; }
.express-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); }
.express-checkout--checkout { margin: 0 0 2.5rem; }
.express-checkout--product { margin: 0 0 1.5rem; }

/* ------------------------------------------------------------------------------------------
   Designed CMS page blocks (Our Story, Stockists and anything else laid out by hand).

   Every selector is gated behind an opt-in class. There is no bare element rule, so a page that
   does not use these classes is untouched and no other brand inherits anything by writing
   content. Colours resolve from --color-accent so each site uses its own.

   The accordion deliberately avoids Bootstrap's .accordion / .accordion-item / .accordion-button
   classes: those paint a bordered, rounded, filled box with a chevron, where these pages want
   bare hairline rows with a coloured +/- on the end. Only Bootstrap's Collapse BEHAVIOUR is
   used - the panel keeps .collapse and data-bs-parent - so there is no new JavaScript and no
   box to override. The toggle is an <a> because safe_html() strips <button> from page content.

   Note for anyone editing these pages: safe_html() has no <hr> in its tag allowlist, so a rule
   written as <hr> vanishes silently. .cms-rule is a <div> for that reason.
   ------------------------------------------------------------------------------------------ */
.cms-display-title { font-weight: 800; line-height: 1.0; letter-spacing: -0.025em;
    font-size: clamp(3rem, 4.6vw, 5rem); margin: 0 0 1rem; color: #141414; }
.cms-display-title span { display: block; }
.cms-content .cms-accent, .cms-accent { color: var(--color-accent, #f6a123); }
.cms-content .cms-rule { border-top: 1px solid #e3e3e3; margin: 2.25rem 0; height: 0; }

/* Slightly larger, roomier prose for a designed column. */
.cms-content .cms-prose p { font-size: 1.0625rem; line-height: 1.75; margin-bottom: 1.15em; }
.cms-content .cms-prose .cms-lead { font-size: 1.3rem; font-weight: 700; color: #141414; line-height: 1.5; }
.cms-content .cms-prose h2 { font-size: 1.8rem; margin-top: 0; margin-bottom: 0.6rem; }
.cms-content .cms-prose h3 { font-size: 1.4rem; margin-top: 2.25rem; margin-bottom: 0.5rem; }
.cms-content .cms-prose small { font-size: 0.875rem; color: #6b6b6b; }

.cms-accordion { margin-bottom: 2.75rem; }
.cms-accordion .cms-accordion-item { border-bottom: 1px solid #e3e3e3; }
.cms-accordion .cms-accordion-item:first-child { border-top: 1px solid #e3e3e3; }
.cms-content .cms-accordion .cms-accordion-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 0; font-weight: 700; font-size: 1.0625rem; color: #141414; text-decoration: none; }
.cms-content .cms-accordion .cms-accordion-toggle:hover { color: var(--color-accent, #f6a123); opacity: 1; }
.cms-accordion .cms-accordion-toggle .cms-accordion-icon {
    color: var(--color-accent, #f6a123); font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.cms-accordion .cms-accordion-toggle .cms-accordion-icon::before { content: "\2212"; }
.cms-accordion .cms-accordion-toggle.collapsed .cms-accordion-icon::before { content: "+"; }
.cms-accordion .cms-accordion-panel { padding: 0.25rem 0 1.25rem; }
.cms-content .cms-accordion .cms-accordion-panel ul { list-style: none; padding-left: 0; margin-bottom: 0.75rem; }
.cms-content .cms-accordion .cms-accordion-panel li { margin-bottom: 0.3rem; }
.cms-content .cms-accordion .cms-accordion-panel h4 {
    font-size: 0.95rem; font-weight: 600; color: #6b6b6b; margin: 1.1rem 0 0.4rem; }
.cms-content .cms-accordion .cms-accordion-panel a { color: inherit; text-decoration: none; }
.cms-content .cms-accordion .cms-accordion-panel a:hover { color: var(--color-accent, #f6a123); text-decoration: underline; }

/* Collection banner height. The value arrives as --cat-banner-h from the section (a style key,
   a section setting, or the long-standing 250px / 360px defaults), so every site keeps exactly
   the height it had. --cat-banner-h-mobile is opt-in and falls back to the desktop value, which
   is what the inline height used to do at every width. It lives here rather than inline because
   an inline height cannot be varied by a media query without !important. */
.category-banner { height: var(--cat-banner-h, 250px); }
@media (max-width: 749px) {
    .category-banner { height: var(--cat-banner-h-mobile, var(--cat-banner-h, 250px)); }
}

/* Links inside a CMS heading, opt-in. .cms-content a is a red underlined body link, which is
   right in a paragraph and wrong for a row of navigation numerals in a heading - on the live
   site those read as bold black text, not links. Opt in per heading with class="cms-plain-links"
   so nothing else changes. */
.cms-content .cms-plain-links a { color: inherit; text-decoration: none; font-weight: 700; }
.cms-content .cms-plain-links a:hover { color: var(--color-accent, #f6a123); text-decoration: none; }

/* A rates table is the one piece of CMS content that can genuinely need more width than a phone
   has, so it gets its own scroll container rather than forcing the page to scroll sideways.
   Only the table moves; the rest of the page stays put. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll > table { margin-bottom: 0; }

/* The cost cell is held on one line so a price never breaks mid-figure, but it also carries the
   free-delivery qualifier - "£4.95 (£1.00 over £75.00, free over £150.00)" - which cannot wrap
   and was wide enough on its own to push the shipping table past the viewport. On a phone the
   note is allowed to wrap; the figures themselves are short enough not to break badly. */
@media (max-width: 575.98px) {
    .shipping-rates th.rate-cost, .shipping-rates td.rate-cost { white-space: normal; }
    .shipping-rates .rate-note { display: block; }
}


/* The newsletter form is a flex row, so the submit button stretches to the input's height. With
   only padding to position it, the label then sits off-centre vertically. Making the button its
   own centring flex box fixes that without touching every button on the site. */
#newsletter-form .btn { display: inline-flex; align-items: center; justify-content: center; }

/* Mega-menu children stack or sit in columns per site. row is the long-standing default. */
.nav-hover-panel-inner { flex-direction: var(--nav-submenu-direction, row); }