@import url("../tokens.d231585bb66c.css");
/* Shared button primitives (.btn-custom, .btn-outline-custom) — used by both
   the storefront and the staff workspace. See catalog/static/catalog/primitives.css. */
@import url("../primitives.fbf03aaea7cd.css");
/* Shared utility/semantic classes (CSP style-src unsafe-inline removal —
   replaces inline style="..." attributes across catalog/ and portal/
   templates). See catalog/static/catalog/utilities.css. staff/base.html
   links this file directly instead, since staff doesn't extend
   catalog/base.html / import this stylesheet. */
@import url("../utilities.beb9d05f52dc.css");

/* Global Button Styling: .btn-custom / .btn-outline-custom now live in
   primitives.css (imported above) — kept out of this file to avoid two
   sources of truth. */

/* Utility classes for shared partials */
.detail-back-link {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.detail-back-link:hover {
    color: var(--accent-color);
}

.placeholder-image {
    height: 500px;
    background-color: var(--bg-color, #ffffff);
    color: var(--text-muted, #adb5bd);
    border-radius: 2px;
    border: 1px solid #eef0f2;
}

.placeholder-image i {
    font-size: 4rem;
}

.trust-badges {
    font-size: 0.85rem;
}

/* Image classes */
.product-image { object-fit: contain !important; height: 220px !important; width: 100% !important; border-bottom: 1px solid #eef0f2; background-color: #ffffff; }
.detail-image { max-height: 500px; object-fit: contain; width: 100%; height: 100%; border-radius: 2px; }

/* Cart */
.cart-shell { margin: 0 auto; max-width: 1180px; }
.cart-page-header { align-items: end; border-bottom: 1px solid var(--border-subtle); display: flex; gap: 1.5rem; justify-content: space-between; margin-bottom: 2rem; padding-bottom: 1.5rem; }
.cart-page-header h1 { font-size: 2.25rem; font-weight: 500; margin: 0 0 0.35rem; }
.cart-discount { background: var(--surface-support); border-left: 3px solid var(--status-success); display: grid; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem 1.25rem; }
.cart-discount h2 { font-size: 0.95rem; margin: 0 0 0.2rem; }
.cart-discount p { color: var(--text-body); font-size: 0.85rem; margin: 0; }
.cart-progress-wrap { width: 100%; }
.cart-progress-bar { appearance: none; background: var(--border-strong); border: 0; border-radius: 999px; display: block; height: 8px; overflow: hidden; width: 100%; }
.cart-progress-bar::-webkit-progress-bar { background: var(--border-strong); border-radius: 999px; }
.cart-progress-bar::-webkit-progress-value { background: var(--color-brand); border-radius: 999px; transition: width var(--motion-standard) var(--ease-standard); }
.cart-progress-bar::-moz-progress-bar { background: var(--color-brand); border-radius: 999px; transition: width var(--motion-standard) var(--ease-standard); }
.cart-progress-labels { color: var(--text-subtle); display: flex; font-size: 0.7rem; justify-content: space-between; margin-top: 0.4rem; }
.cart-items { border-top: 1px solid var(--border-subtle); }
.cart-row { align-items: center; border-bottom: 1px solid var(--border-subtle); display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) auto; padding: 1.25rem 0; }
.cart-product { align-items: center; display: grid; gap: 1rem; grid-template-columns: 88px minmax(0, 1fr); min-width: 0; }
.cart-item-img, .cart-item-placeholder { align-items: center; background: var(--surface-muted); display: flex; height: 88px; justify-content: center; object-fit: cover; width: 88px; }
.cart-product h2 { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; }
.cart-product h2 a { color: var(--text-strong); text-decoration: none; }
.cart-product h2 a:hover { color: var(--color-brand); }
.cart-selection, .cart-unit-price { color: var(--text-subtle); font-size: 0.8rem; margin: 0.15rem 0 0; }
.cart-selections { color: var(--text-subtle); font-size: 0.78rem; list-style-position: inside; margin: 0.25rem 0; padding: 0; }
.cart-row-controls { align-items: center; display: grid; gap: 1.25rem; grid-template-columns: auto 8.5rem auto; }
.cart-quantity { align-items: center; display: flex; gap: 0.35rem; }
.cart-quantity form { margin: 0; }
.cart-quantity .btn { align-items: center; display: flex; height: 40px; justify-content: center; padding: 0; width: 40px; }
.cart-quantity output { align-items: center; border: 1px solid var(--border-subtle); display: flex; height: 40px; justify-content: center; min-width: 44px; }
.cart-line-total { margin: 0; text-align: right; }
.cart-line-total span { color: var(--text-subtle); display: block; font-size: 0.7rem; }
.cart-line-total strong { font-size: 0.9rem; white-space: nowrap; }
.cart-remove { align-items: center; display: flex; flex-direction: column; font-size: 0.7rem; gap: 0.1rem; padding: 0.25rem; }
.cart-review-layout { align-items: start; display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem); margin-top: 2rem; }
.cart-continue { justify-self: start; }
.cart-checkout { background: var(--surface-subtle); border: 1px solid var(--border-subtle); padding: 1.5rem; }
.cart-checkout > h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.cart-totals { margin-bottom: 1.5rem; }
.cart-totals > div { display: flex; font-size: 0.9rem; justify-content: space-between; margin-bottom: 0.5rem; }
.cart-totals dd { margin: 0; }
.cart-totals .is-discount { color: var(--status-success); }
.cart-totals .cart-final-total { border-top: 1px solid var(--border-strong); font-size: 1.05rem; font-weight: 700; margin-top: 0.75rem; padding-top: 0.75rem; }
.cart-payment-note { align-items: start; background: var(--status-warning-soft); display: flex; gap: 0.75rem; margin: 1rem 0; padding: 0.85rem; }
.cart-payment-note > i { color: var(--status-warning); font-size: 1.2rem; }
.cart-payment-note p { font-size: 0.8rem; margin: 0; }
.cart-payment-note span { color: var(--text-subtle); display: block; margin-top: 0.15rem; }
.cart-submit { align-items: center; display: flex; gap: 0.5rem; justify-content: center; min-height: 48px; width: 100%; }
.cart-empty { padding: 5rem 1rem; text-align: center; }
.cart-empty > i { color: var(--text-subtle); display: block; font-size: 3rem; margin-bottom: 1rem; }
.cart-empty h2 { font-size: 1.35rem; }
.cart-empty p { color: var(--text-subtle); margin-bottom: 1.5rem; }

@media (max-width: 767.98px) {
    .cart-page-header { align-items: start; flex-direction: column; }
    .cart-row { align-items: start; gap: 1rem; grid-template-columns: 1fr; }
    .cart-row-controls { grid-template-columns: auto minmax(7rem, 1fr) auto; }
    .cart-review-layout { gap: 1.5rem; grid-template-columns: 1fr; }
    .cart-checkout { grid-row: 1; }
}

@media (max-width: 419.98px) {
    .cart-product { align-items: start; grid-template-columns: 72px minmax(0, 1fr); }
    .cart-item-img, .cart-item-placeholder { height: 72px; width: 72px; }
    .cart-row-controls { gap: 0.5rem; grid-template-columns: 1fr auto; }
    .cart-quantity { grid-column: 1; }
    .cart-line-total { grid-column: 2; grid-row: 1; }
    .cart-row-controls > form { grid-column: 1 / -1; }
    .cart-remove { flex-direction: row; }
}

/* Decorative */
.accent-line { width: 50px; height: 2px; background-color: var(--accent-color); margin-bottom: 2rem; }

/* Typography */
.font-light-spacing { font-weight: 300; letter-spacing: 1px; }
.text-main-lh { line-height: 1.8; color: var(--text-main); font-size: 1.05rem; }

/* Badge styling */
.badge-featured {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--accent-color);
    color: white;
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 0.3rem 0.6rem;
    border-radius: 2px;
    z-index: 10;
}

/* Custom Polish for Alert Messages */
.alert-danger {
    background-color: #fdf2f2 !important;
    border: 1px solid #fde8e8 !important;
    color: #9b1c1c !important;
    font-weight: 500;
}
.alert-success {
    background-color: #f3faf7 !important;
    border: 1px solid #def7ec !important;
    color: #03543f !important;
    font-weight: 500;
}

/* Back to Top Button */
#backToTopBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--accent-color);
    color: white;
    cursor: pointer;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

#backToTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#backToTopBtn:hover {
    background-color: var(--accent-hover);
    transform: translateY(-3px);
}

/* Highlighted Products Slider */
.custom-slider {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.custom-slider::-webkit-scrollbar { 
    display: none; /* Safari and Chrome */
}
.slider-card {
    scroll-snap-align: start;
    width: 100%; 
}
.product-list-image {
    background: #ffffff;
    height: clamp(15rem, 28vw, 22rem);
    object-fit: contain;
    width: 100%;
}
img.product-list-image {
    display: block;
}

.slider-control-prev, .slider-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: white;
    border: 1px solid #eef0f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}
.slider-control-prev:hover, .slider-control-next:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.slider-control-prev { left: -22px; }
.slider-control-next { right: -22px; }

@media (max-width: 1200px) {
    .slider-control-prev { left: 10px; }
    .slider-control-next { right: 10px; }
}

@media (max-width: 767.98px) {
    .product-list-image {
        height: clamp(13rem, 70vw, 17rem);
    }
}

/* Rectangular Indicators */
.slider-dot {
    width: 30px;
    height: 6px;
    border-radius: 2px;
    background-color: #eef0f2;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.slider-dot:hover {
    background-color: #ced4da;
}
.slider-dot.active {
    background-color: var(--accent-color);
}

/* Toast Notifications - Top Right, Shimmer Effect */
.toast-container {
    position: fixed;
    top: 5.5rem;
    right: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.toast-item {
    pointer-events: auto;
    background: #ffffff;
    border: 1px solid #eef0f2;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.25rem;
    min-width: 280px;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-item.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-item.hiding {
    opacity: 0;
    transform: translateX(100%);
}

/* Shimmer sweep animation */
.toast-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(139, 28, 49, 0.08),
        transparent
    );
    animation: toast-shimmer 2s ease-in-out 0.3s;
}

.toast-item.success::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(25, 135, 84, 0.08),
        transparent
    );
}

.toast-item.error::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(220, 53, 69, 0.08),
        transparent
    );
}

.toast-item.info::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(13, 110, 253, 0.08),
        transparent
    );
}

@keyframes toast-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-icon.success { color: #198754; }
.toast-icon.error { color: #dc3545; }
.toast-icon.info { color: var(--accent-color, #8b1c31); }

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main, #1a1a1a);
    margin-bottom: 0.15rem;
}

.toast-message {
    font-size: 0.85rem;
    color: var(--text-muted, #6c757d);
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--text-muted, #6c757d);
    opacity: 0.6;
    transition: opacity 0.2s;
}

.toast-close:hover {
    opacity: 1;
}

/* Cart Badge Animation */
#cart-badge-trigger .badge {
    transition: transform 0.2s ease;
}

/* Infinite Scroll & Skeleton Loader Styles */
.htmx-indicator {
    display: none !important;
}
.htmx-request .htmx-indicator {
    display: flex !important;
}
.skeleton-placeholder {
    background-color: #eef0f2 !important;
    opacity: 0.6;
    border-radius: 2px;
}
.skeleton-image {
    background-color: #f8f9fa !important;
    height: 220px;
    width: 100%;
    border-bottom: 1px solid #eef0f2;
}
.skeleton-btn {
    background-color: transparent !important;
    border: 1px solid #eef0f2 !important;
    height: 38px;
}

/* Product and bundle detail */
.unsaved-preview-bar { background: var(--status-warning-soft); border-bottom: 2px solid var(--status-warning); border-top: 2px solid var(--status-warning); box-shadow: var(--shadow-sm); color: var(--text-strong); position: sticky; top: 0; z-index: 1025; }
.unsaved-preview-bar-inner { align-items: center; display: grid; gap: 1rem; grid-template-columns: 3rem minmax(0, 1fr) auto; min-height: 5.5rem; padding-bottom: 0.8rem; padding-top: 0.8rem; }
.unsaved-preview-marker { align-items: center; background: var(--status-warning); color: var(--surface-canvas); display: flex; font-size: 1.25rem; height: 3rem; justify-content: center; width: 3rem; }
.unsaved-preview-copy { display: flex; flex-direction: column; min-width: 0; }
.unsaved-preview-copy > span { color: var(--status-warning); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.unsaved-preview-copy > strong { font-size: 1rem; margin-top: 0.1rem; }
.unsaved-preview-copy > p { color: var(--text-body); font-size: 0.78rem; margin: 0.15rem 0 0; }
.unsaved-preview-return { align-items: center; background: var(--status-warning); border: 1px solid var(--status-warning); color: var(--surface-canvas); display: inline-flex; font-size: 0.82rem; font-weight: 700; gap: 0.45rem; min-height: 44px; padding: 0.55rem 0.85rem; white-space: nowrap; }
.unsaved-preview-return:hover, .unsaved-preview-return:focus-visible { background: var(--text-strong); border-color: var(--text-strong); color: var(--surface-canvas); }
.detail-page { max-width: 1260px; min-width: 0; }
.detail-back-link { margin: 0.5rem 0 1.5rem; }
.detail-purchase-stage { align-items: start; background: var(--surface-canvas); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); display: grid; gap: 0 3rem; grid-template-areas: "media identity" "media checkout"; grid-template-columns: minmax(0, 1.08fr) minmax(21rem, 0.92fr); overflow: clip; }
.detail-identity { border-top: 5px solid var(--color-brand); grid-area: identity; min-width: 0; padding: 2rem 2rem 0; }
.detail-identity h1 { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.05; margin: 0 0 1rem; overflow-wrap: anywhere; }
.detail-kicker { color: var(--color-brand); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.09em; margin: 0 0 0.55rem; text-transform: uppercase; }
.detail-summary { color: var(--text-body); font-size: 0.95rem; line-height: 1.65; margin: 0 0 1.25rem; }
.detail-facts { border-bottom: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0 0 1.25rem; padding: 0.8rem 0; }
.detail-facts div { min-width: 6rem; }
.detail-facts dt { color: var(--text-subtle); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; }
.detail-facts dd { color: var(--text-strong); font-size: 0.82rem; font-weight: 650; margin: 0.15rem 0 0; }
.detail-price-row { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.detail-price { color: var(--text-strong); font-size: 1.65rem; font-weight: 700; margin: 0; }
.detail-availability { border: 1px solid currentColor; font-size: 0.78rem; font-weight: 700; padding: 0.32rem 0.55rem; text-transform: uppercase; }
.detail-availability.is-available { color: var(--status-success); }
.detail-availability.is-unavailable { color: var(--status-danger); }
.detail-savings { color: var(--status-success); font-size: 0.85rem; font-weight: 650; margin: 0.7rem 0 0; }
.detail-media { align-self: start; grid-area: media; min-width: 0; padding: 2rem; }
.detail-checkout { grid-area: checkout; min-width: 0; padding: 1.5rem 2rem 2rem; }
.detail-gallery { min-width: 0; position: relative; }
.gallery-slider { display: flex; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100%; }
.gallery-slider::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; width: 100%; }
.detail-gallery-frame { align-items: center; aspect-ratio: 1 / 1; background-color: var(--surface-subtle); border: 1px solid var(--border-subtle); display: flex; justify-content: center; overflow: hidden; width: 100%; }
.detail-gallery-frame .detail-image { height: 100%; max-width: 100%; object-fit: contain; width: 100%; }
.gallery-control-prev, .gallery-control-next { align-items: center; background-color: rgba(255, 255, 255, 0.94); border: 1px solid var(--border-strong); border-radius: 50%; box-shadow: var(--shadow-sm); cursor: pointer; display: flex; height: 44px; justify-content: center; position: absolute; top: calc(50% - 2.75rem); transform: translateY(-50%); width: 44px; z-index: 2; }
.gallery-control-prev:hover, .gallery-control-next:hover { background-color: var(--surface-canvas); border-color: var(--color-brand); color: var(--color-brand); }
.gallery-control-prev { left: 1rem; }
.gallery-control-next { right: 1rem; }
.detail-gallery-thumbnails { display: flex; gap: 0.5rem; margin-top: 0.75rem; max-width: 100%; overflow-x: auto; padding: 0.2rem; }
.detail-gallery-thumbnail { background: var(--surface-canvas); border: 2px solid var(--border-subtle); flex: 0 0 64px; height: 64px; padding: 0; }
.detail-gallery-thumbnail img { height: 100%; object-fit: cover; width: 100%; }
.detail-gallery-thumbnail.active { border-color: var(--color-brand); }
.detail-purchase { border-top: 1px solid var(--border-subtle); margin-top: 0; padding-top: 1.25rem; }
.detail-options { border: 0; margin: 0 0 1.25rem; min-width: 0; padding: 0; }
.detail-options > legend { font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; }
.detail-factor-list { display: flex; gap: 0; margin-bottom: 1rem; max-width: 100%; overflow-x: auto; }
.detail-factor-button { background: var(--surface-canvas); border: 1px solid var(--border-strong); color: var(--text-body); flex: 0 0 auto; font-size: 0.9rem; font-weight: 700; min-height: 44px; padding: 0.6rem 0.95rem; }
.detail-factor-button + .detail-factor-button { border-left: 0; }
.detail-factor-button.is-active { background: var(--color-brand); color: var(--text-on-brand); }
.detail-option-group + .detail-option-group { border-top: 1px solid var(--border-subtle); margin-top: 1rem; padding-top: 1rem; }
.detail-option-group-title { font-size: 0.92rem; font-weight: 700; margin: 0 0 0.65rem; }
.detail-option-group-title span { color: var(--text-subtle); font-weight: 500; }
.detail-option-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.detail-option { border: 1px solid var(--border-strong); cursor: pointer; display: flex; flex-direction: column; min-width: 5.5rem; padding: 0.68rem 0.85rem; text-align: center; }
.detail-option > span { font-size: 0.95rem; font-weight: 650; }
.btn-check:focus-visible + .detail-option { box-shadow: var(--focus-ring); outline: 2px solid var(--focus-color); outline-offset: 2px; }
.btn-check:checked + .detail-option { background-color: var(--text-strong); border-color: var(--text-strong); color: var(--surface-canvas); }
.detail-option.is-unavailable { color: var(--text-subtle); cursor: not-allowed; text-decoration: line-through; }
.detail-option small { font-size: 0.78rem; margin-top: 0.18rem; }
.detail-selected-variant { color: var(--text-subtle); font-size: 0.88rem; margin: 0.9rem 0 0; }
.detail-selected-variant strong { color: var(--text-body); }
.detail-fixed-variant { align-items: center; border-bottom: 1px solid var(--border-subtle); display: flex; font-size: 0.92rem; justify-content: space-between; margin: 0 0 1.25rem; padding-bottom: 1rem; }
.detail-fixed-variant span { color: var(--text-subtle); }
.detail-purchase-actions { align-items: end; display: grid; gap: 0.75rem; grid-template-columns: 7.5rem minmax(0, 1fr); }
.detail-quantity label { display: block; font-size: 0.9rem; font-weight: 650; margin-bottom: 0.4rem; }
.detail-quantity input { font-size: 1rem; min-height: 48px; }
.detail-add-button { align-items: center; display: flex; gap: 0.5rem; justify-content: center; min-height: 48px; width: 100%; }
.detail-unavailable-note { color: var(--status-danger); font-size: 0.8rem; margin: 0.75rem 0 0; }
.add-confirmation { align-items: start; background: var(--status-success-soft); border-left: 3px solid var(--status-success); display: flex; gap: 0.75rem; margin: 0 0 1.25rem; padding: 1rem; }
.add-confirmation > i { color: var(--status-success); font-size: 1.25rem; }
.trust-badges { border-top: 1px solid var(--border-subtle); font-size: 0.75rem; margin-top: 1.25rem; padding-top: 1rem; }
.trust-badges p { color: var(--text-subtle); margin: 0; }
.trust-badges i { color: var(--status-success); margin-right: 0.4rem; }
.detail-information, .detail-faq { border-top: 4px solid var(--color-brand); margin-top: 3rem; padding-top: 1.5rem; }
.detail-section-heading { align-items: end; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.detail-section-heading .detail-kicker { margin-bottom: 0.25rem; }
.detail-section-heading h2 { font-size: clamp(1.55rem, 2.5vw, 2.2rem); font-weight: 600; letter-spacing: -0.035em; margin: 0; }
.detail-tab-list { border-bottom: 1px solid var(--border-strong); display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.detail-tab-list button { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--text-subtle); flex: 0 0 auto; font-size: 0.78rem; font-weight: 700; margin-bottom: -1px; min-height: 46px; padding: 0.7rem 1rem; }
.detail-tab-list button[aria-selected="true"] { border-bottom-color: var(--color-brand); color: var(--color-brand); }
.detail-tab-panel { border-bottom: 1px solid var(--border-subtle); overflow-wrap: anywhere; padding: 1.5rem 0; }
.detail-tab-panel > h3 { font-size: 1.1rem; font-weight: 650; margin: 0 0 1rem; }
.is-tabs-enhanced .detail-tab-panel { border-bottom: 0; }
.product-description { max-width: 58rem; overflow-x: auto; }
.product-description > :first-child { margin-top: 0; }
.product-description > :last-child { margin-bottom: 0; }
.product-description img { height: auto; max-width: 100%; }
.bundle-contents { border-top: 1px solid var(--border-subtle); margin-top: 1.25rem; padding-top: 1.25rem; }
.bundle-contents h4 { font-size: 0.9rem; font-weight: 700; margin: 0 0 0.5rem; }
.bundle-item-list { display: grid; }
.bundle-item { align-items: start; border-bottom: 1px solid var(--border-subtle); display: grid; gap: 1rem; grid-template-columns: 64px minmax(0, 1fr); padding: 1rem 0; }
.bundle-item:last-child { border-bottom: 0; }
.bundle-item-image { align-items: center; background: var(--surface-muted); display: flex; height: 64px; justify-content: center; object-fit: cover; width: 64px; }
.bundle-item-copy { min-width: 0; }
.bundle-item-heading { align-items: baseline; display: flex; gap: 0.75rem; justify-content: space-between; }
.bundle-item h5 { font-size: 0.92rem; font-weight: 650; margin: 0; }
.bundle-item-heading strong { color: var(--text-body); font-size: 0.72rem; white-space: nowrap; }
.bundle-item p { color: var(--text-subtle); font-size: 0.76rem; margin: 0.3rem 0 0; }
.bundle-item-description { line-height: 1.5; }
.bundle-item-option span { color: var(--text-body); font-weight: 650; margin-right: 0.45rem; }
.detail-faq { border-top-color: var(--status-success); }
.detail-faq .detail-section-heading > p { color: var(--text-subtle); font-size: 0.82rem; line-height: 1.55; margin: 0; max-width: 34rem; }
.detail-faq-grid { background: var(--surface-subtle); border: 1px solid var(--border-strong); display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; }
.detail-faq-item { border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; min-width: 0; padding: 1.25rem; }
.detail-faq-item:nth-child(odd) { border-right: 1px solid var(--border-subtle); }
.detail-faq-item h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin: 0 0 0.75rem; }
.detail-faq-context { color: var(--text-body); font-size: 0.94rem; line-height: 1.65; margin-bottom: 1rem; }
.detail-faq-answer { background: var(--surface-canvas); border-left: 3px solid var(--status-success); color: var(--text-strong); margin-top: auto; padding: 1rem 1.1rem; }
.detail-faq-answer > span { color: var(--status-success); display: block; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.08em; margin-bottom: 0.35rem; text-transform: uppercase; }
.detail-faq-answer .text-main-lh { color: var(--text-strong); font-size: 0.92rem; line-height: 1.65; }
.detail-faq-answer .text-main-lh > :first-child, .detail-faq-context > :first-child { margin-top: 0; }
.detail-faq-answer .text-main-lh > :last-child, .detail-faq-context > :last-child { margin-bottom: 0; }
.detail-service-band { border: 1px solid var(--border-strong); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 3rem; }
.detail-service-band > div { min-width: 0; padding: 2rem; }
.detail-service-support { background: var(--surface-support); border-top: 5px solid var(--status-success); }
.detail-service-payment { background: var(--status-info-soft); border-left: 1px solid var(--border-strong); border-top: 5px solid var(--status-info); }
.detail-service-band h2 { font-size: 1.35rem; font-weight: 650; margin: 0 0 0.65rem; }
.detail-service-band p:not(.detail-kicker) { color: var(--text-body); font-size: 0.85rem; line-height: 1.6; margin: 0 0 1.25rem; }
.detail-service-payment p:not(.detail-kicker) { margin-bottom: 0; }

@media (max-width: 991.98px) {
    .detail-purchase-stage { gap: 0; grid-template-areas: "identity" "media" "checkout"; grid-template-columns: minmax(0, 1fr); }
    .detail-identity { padding-bottom: 1.5rem; }
    .detail-media { padding-bottom: 1rem; position: static; }
    .detail-gallery-frame { aspect-ratio: 4 / 3; }
}

@media (max-width: 575.98px) {
    .unsaved-preview-bar { position: static; }
    .unsaved-preview-bar-inner { align-items: start; grid-template-columns: 2.5rem minmax(0, 1fr); }
    .unsaved-preview-marker { font-size: 1rem; height: 2.5rem; width: 2.5rem; }
    .unsaved-preview-return { grid-column: 1 / -1; justify-content: center; width: 100%; }
    .detail-page { padding-top: 1.5rem !important; }
    .detail-back-link { margin-bottom: 1rem; }
    .detail-identity { padding: 1.5rem 1.25rem 1.25rem; }
    .detail-identity h1 { font-size: 1.85rem; }
    .detail-media { padding: 0 1.25rem 1rem; }
    .detail-checkout { padding: 1.25rem; }
    .detail-gallery-frame { aspect-ratio: 1 / 1; }
    .gallery-control-prev { left: 0.5rem; }
    .gallery-control-next { right: 0.5rem; }
    .detail-purchase-actions { grid-template-columns: 1fr; }
    .detail-quantity { max-width: 8rem; }
    .detail-section-heading { align-items: start; flex-direction: column; }
    .detail-faq-grid { grid-template-columns: 1fr; padding: 0.5rem; }
    .detail-faq-item, .detail-faq-item:nth-child(odd) { border-right: 0; padding: 1.25rem 1rem; }
    .detail-tab-list button { padding-left: 0.75rem; padding-right: 0.75rem; }
    .bundle-item { gap: 0.75rem; grid-template-columns: 52px minmax(0, 1fr); }
    .bundle-item-image { height: 52px; width: 52px; }
    .bundle-item-heading { align-items: start; flex-direction: column; gap: 0.2rem; }
    .detail-service-band { grid-template-columns: 1fr; }
    .detail-service-band > div { padding: 1.5rem 1.25rem; }
    .detail-service-payment { border-left: 0; }
}

/* WYSIWYG Heading Coherence */
.text-main-lh h1, .info-content h1, .product-description h1 {
    font-size: 1.55rem;
    font-weight: 600;
    margin-top: 1.8rem;
    margin-bottom: 0.9rem;
    color: var(--text-main, #1a1a1a);
    line-height: 1.4;
}
.text-main-lh h2, .info-content h2, .product-description h2 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 1.6rem;
    margin-bottom: 0.8rem;
    color: var(--text-main, #1a1a1a);
    line-height: 1.4;
}
.text-main-lh h3, .info-content h3, .product-description h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1.4rem;
    margin-bottom: 0.7rem;
    color: var(--text-main, #1a1a1a);
    line-height: 1.4;
}
.text-main-lh h4, .info-content h4, .product-description h4 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1.2rem;
    margin-bottom: 0.6rem;
    color: var(--text-main, #1a1a1a);
    line-height: 1.4;
}

/* WYSIWYG Table Coherence */
.text-main-lh table, .info-content table, .product-description table {
    width: 100% !important;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: var(--text-main, #1a1a1a);
    border: 1.5px solid #eef0f2;
}
.text-main-lh table th, .info-content table th, .product-description table th {
    background-color: #f8f9fa;
    color: var(--text-main, #1a1a1a);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border: 1.5px solid #eef0f2;
}
.text-main-lh table td, .info-content table td, .product-description table td {
    padding: 0.75rem 1rem;
    border: 1.5px solid #eef0f2;
    line-height: 1.6;
}
.text-main-lh table tr:nth-child(even), .info-content table tr:nth-child(even), .product-description table tr:nth-child(even) {
    background-color: #fcfdfe;
}
.text-main-lh table tr:hover, .info-content table tr:hover, .product-description table tr:hover {
    background-color: #f8f9fa;
}

/* Information center */
.info-center-page { padding: clamp(1.5rem, 4vw, 3.5rem); }
.info-kicker { color: var(--color-brand); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.09em; margin: 0 0 0.45rem; text-transform: uppercase; }
.info-center-header { align-items: end; border-bottom: 1px solid var(--border-subtle); display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.75fr); padding-bottom: 2rem; }
.info-center-header h1 { color: var(--text-strong); font-size: clamp(2rem, 4vw, 3.7rem); font-weight: 650; letter-spacing: -0.055em; line-height: 1.02; margin: 0; max-width: 48rem; }
.info-center-header > p { color: var(--text-subtle); font-size: 0.92rem; line-height: 1.65; margin: 0; }
.info-topic-section { margin-top: 2.25rem; }
.info-section-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 1rem; }
.info-section-heading h2 { color: var(--text-strong); font-size: 1.05rem; font-weight: 700; margin: 0; }
.info-section-heading > span { color: var(--text-subtle); font-size: 0.72rem; font-weight: 650; text-transform: uppercase; }
.info-topic-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-topic-card { align-items: center; background: var(--surface-canvas); border: 1px solid var(--border-strong); color: var(--text-body); display: grid; gap: 1rem; grid-template-columns: 2.75rem minmax(0, 1fr) auto; min-height: 8rem; padding: 1.15rem; text-decoration: none; }
.info-topic-card:hover { color: var(--text-body); }
.info-topic-icon { align-items: center; background: var(--color-brand-soft); color: var(--color-brand); display: flex; font-size: 1.15rem; height: 2.75rem; justify-content: center; width: 2.75rem; }
.info-topic-copy { display: flex; flex-direction: column; min-width: 0; }
.info-topic-copy strong { color: var(--text-strong); font-size: 0.92rem; font-weight: 700; }
.info-topic-copy > span { color: var(--text-subtle); display: -webkit-box; font-size: 0.78rem; line-height: 1.55; margin-top: 0.3rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.info-topic-arrow { color: var(--color-brand); font-size: 0.9rem; transition: transform var(--motion-fast) var(--ease-standard); }
.info-topic-card:hover .info-topic-arrow { transform: translateX(0.2rem); }
.info-center-empty { align-items: center; background: var(--surface-subtle); border: 1px dashed var(--border-strong); display: flex; flex-direction: column; margin-top: 2rem; min-height: 16rem; padding: 2rem; text-align: center; }
.info-center-empty > i { color: var(--color-brand); font-size: 2rem; }
.info-center-empty h2 { font-size: 1.1rem; margin: 0.75rem 0 0; }
.info-center-empty p { color: var(--text-subtle); font-size: 0.85rem; margin: 0.35rem 0 0; }
.info-support-callout { align-items: center; background: var(--surface-cream); border-left: 3px solid var(--color-brand); display: flex; gap: 2rem; justify-content: space-between; margin-top: 2.5rem; padding: 1.5rem; }
.info-support-callout h2 { color: var(--text-strong); font-size: 1.2rem; font-weight: 700; margin: 0; }
.info-support-callout div > p:last-child { color: var(--text-subtle); font-size: 0.82rem; margin: 0.35rem 0 0; }
.info-support-callout .btn { flex: 0 0 auto; }

.info-back-link { align-items: center; color: var(--color-brand); display: inline-flex; font-size: 0.78rem; font-weight: 700; gap: 0.4rem; margin-bottom: 1.5rem; text-decoration: none; }
.info-back-link:hover { color: var(--color-brand-hover); }
.info-article-header { align-items: end; border-bottom: 1px solid var(--border-subtle); display: flex; gap: 2rem; justify-content: space-between; padding-bottom: 1.75rem; }
.info-article-header h1 { color: var(--text-strong); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 650; letter-spacing: -0.05em; line-height: 1.05; margin: 0; }
.info-article-summary { color: var(--text-subtle); font-size: 0.95rem; line-height: 1.65; margin: 0.75rem 0 0; max-width: 44rem; }
.info-article-meta { align-items: flex-end; color: var(--text-subtle); display: flex; flex: 0 0 auto; flex-direction: column; font-size: 0.72rem; gap: 0.5rem; white-space: nowrap; }
.info-preview-state { background: var(--status-warning-soft); border: 1px solid var(--status-warning); color: var(--status-warning); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.35rem 0.45rem; text-transform: uppercase; }
.info-article-layout { display: grid; gap: 2rem; grid-template-columns: 12.5rem minmax(0, 1fr); margin-top: 2rem; }
.info-topic-rail { align-self: start; position: sticky; top: 6.5rem; }
.info-topic-rail > p { color: var(--text-subtle); font-size: 0.65rem; font-weight: 750; letter-spacing: 0.07em; margin: 0 0 0.6rem; text-transform: uppercase; }
.info-topic-rail nav { border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; }
.info-topic-rail a { align-items: center; border-bottom: 1px solid var(--border-subtle); color: var(--text-body); display: grid; font-size: 0.78rem; gap: 0.6rem; grid-template-columns: 1rem minmax(0, 1fr); padding: 0.75rem 0.4rem; text-decoration: none; }
.info-topic-rail a:hover { color: var(--color-brand); }
.info-topic-rail a.active { border-left: 2px solid var(--color-brand); color: var(--color-brand); font-weight: 700; padding-left: 0.7rem; }
.info-article-surface { background: var(--surface-canvas); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); min-width: 0; padding: clamp(1.5rem, 3.5vw, 3rem); }
.info-article-content { color: var(--text-body); font-size: 0.94rem; line-height: 1.8; max-width: 46rem; }
.info-article-content > :first-child { margin-top: 0; }
.info-article-content > :last-child { margin-bottom: 0; }
.info-article-content p, .info-article-content ul, .info-article-content ol { margin-bottom: 1.15rem; }
.info-article-content li + li { margin-top: 0.4rem; }
.info-article-content a { color: var(--color-brand); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 0.2rem; }
.info-article-content blockquote { background: var(--surface-cream); border-left: 3px solid var(--color-brand); color: var(--text-body); margin: 1.5rem 0; padding: 1rem 1.25rem; }
.info-article-content img { height: auto; margin: 1.5rem 0; max-width: 100%; }
.info-article-content hr { border-color: var(--border-strong); margin: 2rem 0; opacity: 1; }
.info-article-content table { display: block; max-width: 100%; overflow-x: auto; }
.info-article-empty { align-items: center; color: var(--text-subtle); display: flex; flex-direction: column; min-height: 14rem; justify-content: center; text-align: center; }
.info-article-empty i { font-size: 2rem; }
.info-article-empty p { margin: 0.75rem 0 0; }
.info-mobile-topics { background: var(--surface-subtle); border: 1px solid var(--border-strong); margin-top: 1.25rem; }
.info-mobile-topics summary { align-items: center; cursor: pointer; display: flex; font-size: 0.82rem; font-weight: 700; justify-content: space-between; list-style: none; min-height: 3rem; padding: 0.75rem 1rem; }
.info-mobile-topics summary::-webkit-details-marker { display: none; }
.info-mobile-topics summary span { align-items: center; display: flex; gap: 0.5rem; }
.info-mobile-topics summary > i { transition: transform var(--motion-fast) var(--ease-standard); }
.info-mobile-topics[open] summary > i { transform: rotate(180deg); }
.info-mobile-topics nav { border-top: 1px solid var(--border-subtle); display: grid; padding: 0.4rem; }
.info-mobile-topics nav a { color: var(--text-body); font-size: 0.8rem; padding: 0.65rem; text-decoration: none; }
.info-mobile-topics nav a.active { background: var(--color-brand); color: var(--text-on-brand); font-weight: 700; }
.info-article-pagination { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.5rem 0 0 calc(12.5rem + 2rem); }
.info-article-pagination a { border: 1px solid var(--border-strong); color: var(--text-body); display: flex; flex-direction: column; min-height: 5.5rem; padding: 1rem; text-decoration: none; transition: border-color var(--motion-standard) var(--ease-standard), box-shadow var(--motion-standard) var(--ease-standard), transform var(--motion-standard) var(--ease-standard); }
.info-article-pagination a:last-child { align-items: flex-end; grid-column: 2; text-align: right; }
.info-article-pagination a:hover { border-color: var(--color-brand); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.info-article-pagination small { color: var(--text-subtle); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; }
.info-article-pagination span { align-items: center; color: var(--text-strong); display: flex; font-size: 0.82rem; font-weight: 700; gap: 0.5rem; margin-top: 0.35rem; }



/* Product list page: highlighted-product card + hero section styling.
   Moved from an inline <style nonce> block in product_list.html because
   this content lives inside {% block content %}, which htmx's hx-boost
   AJAX-swaps on same-origin navigation — nonce'd inline <style> inside
   body breaks after the first boosted navigation (see base.html's
   base-interactions.js comment for the full nonce/boost mismatch
   explanation). A real stylesheet needs no nonce and is unaffected. */
.custom-card {
    border: 1px solid #eef0f2;
    border-radius: 2px;
    background-color: var(--card-bg);
    box-shadow: none;
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}
.custom-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.card-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.hero-section {
    padding: 4rem 0 3rem;
    text-align: center;
}

.catalog-intro {
    background-color: var(--surface-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.catalog-intro-copy { max-width: 42rem; }
.catalog-toolbar { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-4); }
.catalog-pagination .page-link {
    border-color: var(--border-strong);
    color: var(--text-body);
}
.catalog-pagination .page-item.active .page-link {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--text-on-brand);
}
.hero-title {
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}
.hero-subtitle {
    color: var(--text-muted);
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
}

/* Product grid filter-banner slide-down animation. Moved from an inline
   <style nonce> block in partials/product_grid.html — that partial is
   htmx-swapped on infinite scroll AND boosted navigation, so nonce'd
   inline <style> inside it breaks CSP after the first swap (see
   base-interactions.js for the full nonce/boost mismatch explanation). */
@keyframes slideDown {
    0% {
        max-height: 0;
        opacity: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden;
    }
    100% {
        max-height: 200px;
        opacity: 1;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
}
.filter-banner-container {
    overflow: hidden;
    box-sizing: border-box;
    max-height: 200px;
    opacity: 1;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1.5rem !important;
}
.filter-banner-animate {
    animation: slideDown 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Storefront visual system */
.storefront-body { background: var(--surface-page); padding-top: 0; }
.storefront-topbar-inner { min-height: var(--app-topbar-height); }
.storefront-floating-nav { display: flex; flex-direction: column; left: max(28px, calc(50vw - 692px)); position: fixed; top: 102px; width: var(--app-navigation-width); z-index: 20; }
.storefront-mobile-dock { display: none; }
.storefront-main { margin: 0 auto; max-width: 1440px; padding: 1.6rem 28px 4.5rem calc(44px + var(--app-navigation-width)); width: 100%; }
.storefront-main > .container:first-child { max-width: none; padding: 0; }
.storefront-page { min-width: 0; }
.storefront-welcome > h1 { font-size: clamp(2.8rem, 4.5vw, 4.8rem); font-weight: 600; letter-spacing: -0.06em; line-height: 0.98; margin: 0 0 1.6rem; max-width: 1050px; }
.storefront-slogan-line { display: block; white-space: nowrap; }
.storefront-slogan-accent--brand { color: var(--color-brand); }
.storefront-slogan-accent--green { color: var(--status-success); }
.storefront-featured-surface, .storefront-catalog-panel, .storefront-curated { background: var(--surface-canvas); border: 1px solid var(--border-strong); box-shadow: 0 18px 38px rgba(24,33,29,0.1); padding: 2.5rem; }
.storefront-section-heading { align-items: end; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 1.35rem; }
.storefront-section-heading h1, .storefront-section-heading h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 650; letter-spacing: -0.045em; margin: 0; }
.storefront-section-heading p { color: var(--text-subtle); font-size: 0.84rem; margin: 0.4rem 0 0; }
.storefront-section-heading a { color: var(--color-brand); font-size: 0.78rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.storefront-featured-grid { display: grid; gap: 1.2rem; grid-template-columns: 1.15fr 0.85fr; }
.storefront-feature-card { border: 1px solid var(--border-strong); display: grid; grid-template-columns: 1fr 1fr; min-height: 360px; overflow: hidden; }
.storefront-feature-card.is-primary { background: var(--color-brand); color: var(--text-on-brand); grid-template-columns: 0.92fr 1.08fr; }
.storefront-feature-card.is-secondary { background: var(--surface-canvas); }
.storefront-feature-copy { display: flex; flex-direction: column; padding: 2rem; }
.storefront-feature-label { align-self: flex-start; background: var(--color-brand-soft); color: var(--color-brand); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 1.4rem; padding: 0.38rem 0.5rem; text-transform: uppercase; }
.is-primary .storefront-feature-label { background: rgba(255,255,255,0.15); color: var(--text-on-brand); }
.storefront-feature-copy h3 { font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 650; letter-spacing: -0.05em; line-height: 0.96; margin: 0 0 0.85rem; }
.storefront-feature-copy p { color: inherit; font-size: 0.86rem; line-height: 1.6; margin: 0; opacity: 0.82; }
.storefront-feature-footer { margin-top: auto; padding-top: 1.5rem; }
.storefront-feature-actions { align-items: center; display: flex; justify-content: space-between; }
.storefront-feature-copy strong { font-size: 0.94rem; white-space: nowrap; }
.storefront-feature-copy a { border: 1px solid currentColor; color: inherit; font-size: 0.74rem; font-weight: 700; padding: 0.78rem 0.9rem; text-decoration: none; white-space: nowrap; }
.storefront-feature-image { align-items: center; background: var(--surface-muted); display: flex; justify-content: center; overflow: hidden; padding: 1rem; position: relative; }
.is-primary .storefront-feature-image { background: var(--color-brand-hover); }
.storefront-feature-image img { height: 100%; object-fit: contain; width: 100%; }
.storefront-image-placeholder { align-items: center; color: var(--text-subtle); display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; min-height: 12rem; width: 100%; }
.storefront-image-placeholder i { font-size: 2rem; }
.storefront-bundles { background: var(--surface-cream); border: 1px solid var(--border-strong); box-shadow: 0 12px 28px rgba(24,33,29,0.07); margin: 2.25rem 0; padding: 2.5rem; }
.storefront-bundle-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.storefront-bundle-card { background: var(--surface-canvas); border: 1px solid var(--border-strong); box-shadow: 0 8px 18px rgba(24,33,29,0.07); display: grid; grid-template-columns: 0.9fr 1.1fr; min-height: 320px; }
.storefront-bundle-image { align-items: center; background: var(--surface-muted); display: flex; justify-content: center; min-width: 0; overflow: hidden; padding: 2rem 1rem 1rem; position: relative; }
.storefront-bundle-card:nth-child(2) .storefront-bundle-image { background: var(--color-brand-soft); }
.storefront-bundle-image img { height: 100%; object-fit: contain; width: 100%; }
.storefront-saving-tag { background: var(--status-success); box-shadow: var(--shadow-sm); color: var(--text-on-brand); font-size: 0.7rem; font-weight: 700; left: 0.8rem; letter-spacing: 0.04em; padding: 0.45rem 0.55rem; position: absolute; text-transform: uppercase; top: 0.8rem; }
.storefront-bundle-copy { display: flex; flex-direction: column; padding: 1.5rem; }
.storefront-bundle-copy > span { align-self: flex-start; background: var(--color-brand-soft); color: var(--color-brand); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 1rem; padding: 0.4rem 0.5rem; text-transform: uppercase; }
.storefront-bundle-copy h3 { font-size: 1.55rem; letter-spacing: -0.035em; margin: 0 0 0.7rem; }
.storefront-bundle-copy p { color: var(--text-body); font-size: 0.84rem; line-height: 1.55; margin: 0; }
.storefront-bundle-price { align-items: center; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; margin-top: auto; padding-top: 1rem; }
.storefront-bundle-price span { display: flex; flex-direction: column; }
.storefront-bundle-price strong { color: var(--status-success); font-size: 0.94rem; }
.storefront-bundle-price del { color: var(--text-subtle); font-size: 0.72rem; }
.storefront-bundle-price a { background: var(--color-brand); color: var(--text-on-brand); font-size: 0.74rem; font-weight: 700; padding: 0.82rem 0.95rem; text-decoration: none; white-space: nowrap; }
.storefront-curated { margin-top: 0.25rem; }
.storefront-product-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
.storefront-product-card { background: var(--surface-canvas); border: 1px solid var(--border-strong); box-shadow: 0 2px 5px rgba(24,33,29,0.04); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.storefront-feature-card, .storefront-bundle-card, .storefront-product-card { cursor: pointer; position: relative; transition: box-shadow 160ms ease, transform 160ms ease; }
.storefront-feature-card:hover, .storefront-feature-card:focus-within,
.storefront-bundle-card:hover, .storefront-bundle-card:focus-within,
.storefront-product-card:hover, .storefront-product-card:focus-within { box-shadow: 0 12px 24px rgba(24,33,29,0.1); transform: translateY(-3px); }
.storefront-card-link { z-index: 1; }
.storefront-card-link::after { content: ""; inset: 0; position: absolute; z-index: 3; }
.storefront-feature-card:focus-within, .storefront-bundle-card:focus-within, .storefront-product-card:focus-within { outline: 3px solid var(--focus-color); outline-offset: 3px; }
.storefront-product-card.is-curated-primary { display: grid; grid-column: span 2; grid-template-columns: minmax(0,1.08fr) minmax(16rem,0.92fr); min-height: 360px; }
.storefront-product-card.is-curated-secondary { grid-row: span 2; }
.storefront-product-visual { align-items: center; aspect-ratio: 1 / 0.88; background: var(--surface-muted); display: flex; justify-content: center; overflow: hidden; padding: 2rem 1rem; position: relative; }
.storefront-product-card:nth-child(3n+1) .storefront-product-visual { background: var(--color-brand-soft); }
.storefront-product-visual img { height: 100%; object-fit: contain; width: 100%; }
.is-curated-primary .storefront-product-visual { aspect-ratio: auto; min-height: 358px; }
.is-curated-primary .storefront-product-visual img { inset: 0; padding: 2rem 1rem; position: absolute; }
.storefront-product-badge, .storefront-product-category { box-shadow: 0 4px 10px rgba(24,33,29,0.14); font-size: 0.66rem; font-weight: 700; padding: 0.45rem 0.55rem; position: absolute; text-transform: uppercase; z-index: 2; }
.storefront-product-badge { background: var(--color-brand); color: var(--text-on-brand); left: 0.75rem; top: 0.75rem; }
.storefront-offer-badge { background: var(--status-success); }
.storefront-product-category { background: var(--text-strong); bottom: 0.75rem; color: var(--surface-canvas); left: 0.75rem; }
.storefront-product-info { border-top: 1px solid var(--border-subtle); display: flex; flex: 1; flex-direction: column; padding: 0.85rem 1rem; }
.is-curated-primary .storefront-product-info { border-left: 1px solid var(--border-subtle); border-top: 0; padding: 1.5rem; }
.storefront-product-info h3 { font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 0.45rem; }
.is-curated-primary .storefront-product-info h3 { font-size: 1.65rem; }
.storefront-product-info > p { color: var(--text-body); font-size: 0.8rem; line-height: 1.45; margin: 0 0 0.65rem; }
.storefront-product-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 0.7rem; margin: 0 0 0.75rem; }
.storefront-product-facts div { align-items: baseline; display: flex; gap: 0.2rem; }
.storefront-product-facts dt { color: var(--text-subtle); font-size: 0.62rem; font-weight: 650; text-transform: uppercase; }
.storefront-product-facts dt::after { content: ':'; }
.storefront-product-facts dd { font-size: 0.7rem; font-weight: 650; margin: 0; }
.storefront-feature-copy .storefront-product-facts { margin-bottom: 0.9rem; }
.storefront-feature-card.is-primary .storefront-product-facts dt { color: rgba(255,255,255,0.76); }
.storefront-feature-card.is-primary .storefront-product-facts dd { color: var(--text-on-brand); }
.storefront-product-footer { margin-top: auto; }
.storefront-product-actions { align-items: center; display: flex; justify-content: space-between; }
.storefront-product-price { font-size: 0.88rem; font-weight: 700; white-space: nowrap; }
.storefront-product-actions a { color: var(--color-brand); font-size: 0.74rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.storefront-catalog-panel { min-height: 30rem; }
.storefront-catalog-tools { border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); display: grid; grid-template-columns: minmax(260px,1fr) minmax(210px,0.35fr); margin-bottom: 2rem; }
.storefront-search { align-items: center; border-right: 1px solid var(--border-subtle); display: grid; grid-template-columns: auto 1fr auto; min-height: 52px; }
.storefront-search label { color: var(--text-subtle); padding-left: 1rem; }
.storefront-search input[type='search'] { border: 0; min-height: 50px; min-width: 0; padding: 0 0.8rem; width: 100%; }
.storefront-search input:focus:not(:focus-visible) { box-shadow: none; outline: 0; }
.storefront-search > a { color: var(--color-brand); font-size: 0.72rem; font-weight: 700; padding: 0 1rem; text-decoration: none; white-space: nowrap; }
.storefront-category-select { align-items: center; display: flex; gap: 0.7rem; min-height: 50px; padding: 0 1rem; }
.storefront-category-select span { color: var(--text-subtle); font-size: 0.68rem; font-weight: 650; }
.storefront-category-select select { background: transparent; border: 0; flex: 1; font-size: 0.76rem; font-weight: 650; min-width: 0; }
.storefront-empty-state { align-items: center; color: var(--text-subtle); display: flex; flex-direction: column; grid-column: 1/-1; justify-content: center; min-height: 16rem; text-align: center; }
.storefront-empty-state i { font-size: 2rem; }
.storefront-body .storefront-main .card { border: 1px solid var(--border-strong); border-radius: 0; box-shadow: var(--shadow-sm); }
.storefront-body .bg-light { background: var(--surface-muted) !important; }

/* Editorial articles follow the storefront's standard content and card system. */
.article-hub, .article-page { margin: 0 auto; max-width: 1160px; padding: clamp(1.5rem, 4vw, 3.5rem); }
.article-hub-header h1 { color: var(--text-strong); font-size: clamp(2rem, 4vw, 3.7rem); font-weight: 650; letter-spacing: -0.055em; line-height: 1.02; margin: 0; }
.article-topic-filter { border-bottom: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1.5rem 0; }
.article-topic-filter a { border: 1px solid var(--border-strong); color: var(--text-body); font-size: 0.78rem; font-weight: 650; min-height: 40px; padding: 0.58rem 0.85rem; text-decoration: none; }
.article-topic-filter a:hover, .article-topic-filter a:focus-visible { border-color: var(--color-brand); color: var(--color-brand); }
.article-topic-filter a.active { background: var(--color-brand); border-color: var(--color-brand); color: var(--text-on-brand); }
.article-card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.5rem; }
.article-card { background: var(--surface-canvas); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); min-width: 0; }
.article-card > a { color: var(--text-body); display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; transition: box-shadow var(--motion-standard) var(--ease-standard), transform var(--motion-standard) var(--ease-standard); }
.article-card > a:hover, .article-card > a:focus-visible { box-shadow: 0 12px 24px rgba(24,33,29,0.1); transform: translateY(-3px); }
.article-card > a:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; }
.article-card-image { aspect-ratio: 16 / 9; background: var(--surface-muted); display: block; flex: 0 0 auto; overflow: hidden; position: relative; width: 100%; }
.article-card-image img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; }
.article-card-placeholder { align-items: center; color: var(--color-brand); display: flex; font-size: 2rem; justify-content: center; }
.article-card-copy { display: flex; flex-direction: column; min-width: 0; padding: 1.4rem; }
.article-card-meta { color: var(--color-brand); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.article-card-copy h2 { color: var(--text-strong); font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.15; margin: 0.65rem 0; }
.article-card-summary { color: var(--text-subtle); display: -webkit-box; font-size: 0.82rem; line-height: 1.6; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.article-card-action { color: var(--color-brand); font-size: 0.76rem; font-weight: 700; margin-top: auto; padding-top: 1rem; }
.article-card-action i { margin-left: 0.2rem; transition: transform var(--motion-fast) var(--ease-standard); }
.article-card > a:hover .article-card-action i { transform: translateX(0.2rem); }
.article-pagination { align-items: center; border-top: 1px solid var(--border-subtle); display: grid; font-size: 0.78rem; grid-template-columns: 1fr auto 1fr; margin-top: 2rem; padding-top: 1.5rem; }
.article-pagination > span { color: var(--text-subtle); text-align: center; }
.article-pagination a { align-items: center; color: var(--color-brand); display: inline-flex; font-weight: 700; gap: 0.4rem; text-decoration: none; }
.article-pagination a:last-child { justify-self: end; }
.article-page-header { margin-bottom: 2rem; }
.article-detail-surface { background: var(--surface-canvas); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); overflow: hidden; }
.article-lead { background: var(--surface-muted); border-bottom: 1px solid var(--border-subtle); margin: 0; }
.article-lead img { display: block; max-height: 620px; object-fit: cover; width: 100%; }
.article-body { font-size: 0.98rem; line-height: 1.8; margin: 0 auto; max-width: 52rem; padding: clamp(1.5rem, 4vw, 3.5rem); }
.article-sources { border-top: 1px solid var(--border-subtle); margin: 0 clamp(1.5rem, 4vw, 3.5rem); padding: 2rem 0; }
.article-sources h2 { font-size: 1.25rem; font-weight: 700; }
.article-sources ol { margin: 1rem 0 0; padding-left: 1.25rem; }
.article-sources li { font-size: 0.88rem; line-height: 1.5; margin-bottom: 0.8rem; }
.article-sources li a { color: var(--color-brand); font-weight: 600; }
.article-sources li span { color: var(--text-subtle); display: block; font-size: 0.75rem; }
.article-disclaimer { align-items: flex-start; background: var(--color-brand-soft); border-left: 3px solid var(--color-brand); display: flex; gap: 0.8rem; margin: 0 clamp(1.5rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem); padding: 1rem; }
.article-disclaimer i { color: var(--color-brand); }
.article-disclaimer p { color: var(--text-body); font-size: 0.8rem; line-height: 1.6; margin: 0; }
.article-related { border-top: 4px solid var(--color-brand); margin-top: 3rem; padding-top: 1.5rem; }
.article-related .storefront-section-heading h2 { font-size: clamp(1.55rem, 2.5vw, 2.2rem); }
.article-neighbors { margin-left: 0; }

@media (max-width: 991.98px) {
    .storefront-floating-nav { flex-direction: row; left: auto; margin: 1.25rem auto 0; position: static; top: auto; width: max-content; }
    .storefront-nav-heading, .storefront-floating-nav .storefront-nav-cart, .storefront-floating-nav > a > i { display: none; }
    .storefront-main { padding: 1.5rem 28px 4rem; }
    .storefront-featured-grid, .storefront-bundle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .storefront-feature-card { grid-template-columns: 1fr; }
    .storefront-feature-copy, .storefront-feature-image { min-height: 270px; }
    .storefront-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .storefront-product-card.is-curated-primary { grid-column: span 2; }
    .storefront-bundle-card { grid-template-columns: 1fr; }
    .storefront-bundle-image { min-height: 260px; }
    .info-article-layout { display: block; margin-top: 1rem; }
    .info-article-pagination { margin-left: 0; }
}

@media (max-width: 680px) {
    .storefront-body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .storefront-topbar-actions { display: none; }
    .storefront-floating-nav { display: none; }
    .storefront-mobile-dock { background: rgba(255,255,255,0.98); border-top: 1px solid var(--border-strong); bottom: 0; box-shadow: 0 -8px 24px rgba(24,33,29,0.12); display: grid; grid-template-columns: repeat(5,1fr); left: 0; padding: 0.4rem 0 calc(0.4rem + env(safe-area-inset-bottom)); position: fixed; right: 0; z-index: 1040; }
    .storefront-mobile-dock.has-articles { grid-template-columns: repeat(6,1fr); }
    .storefront-mobile-dock a { align-items: center; color: var(--text-body); display: flex; flex-direction: column; font-size: 0.6rem; font-weight: 650; gap: 0.2rem; justify-content: center; min-height: 52px; text-decoration: none; }
    .storefront-mobile-dock a.active { color: var(--color-brand); }
    .storefront-mobile-dock i { font-size: 1rem; }
    .storefront-main { padding: 1rem 18px 2rem; }
    .storefront-welcome > h1 { font-size: clamp(1.75rem, 7.8vw, 2.75rem); }
    .storefront-featured-surface, .storefront-catalog-panel, .storefront-curated { box-shadow: none; padding: 1.5rem 18px; }
    .storefront-bundles { box-shadow: none; margin: 1.25rem 0; padding: 1.5rem 18px; }
    .storefront-section-heading { align-items: flex-start; flex-direction: column; gap: 0.8rem; }
    .storefront-featured-grid, .storefront-bundle-grid, .storefront-product-grid { grid-template-columns: 1fr; }
    .storefront-feature-card { grid-template-columns: 1fr 0.92fr; min-height: 305px; }
    .storefront-feature-copy { min-height: 0; padding: 1.4rem; }
    .storefront-feature-image { min-height: 0; padding: 0.5rem; }
    .storefront-feature-copy h3 { font-size: 1.75rem; }
    .storefront-feature-actions { align-items: flex-start; flex-direction: column; gap: 0.75rem; }
    .storefront-bundle-card { grid-template-columns: 0.9fr 1.1fr; min-height: 290px; }
    .storefront-bundle-image { min-height: 0; }
    .storefront-bundle-copy { padding: 1rem; }
    .storefront-product-card.is-curated-primary, .storefront-product-card.is-curated-secondary { display: flex; grid-column: auto; grid-row: auto; min-height: 0; }
    .is-curated-primary .storefront-product-visual { aspect-ratio: 1.25/1; min-height: 0; }
    .is-curated-primary .storefront-product-info { border-left: 0; border-top: 1px solid var(--border-subtle); padding: 0.85rem 1rem; }
    .is-curated-primary .storefront-product-info h3 { font-size: 1rem; }
    .storefront-product-visual { aspect-ratio: 1.25/1; }
    .storefront-catalog-tools { display: block; }
    .storefront-search { border-bottom: 1px solid var(--border-subtle); border-right: 0; }
    .info-center-page { padding: 1.25rem; }
    .article-hub, .article-page { padding: 1.25rem; }
    .article-card-grid { grid-template-columns: 1fr; }
    .article-card-copy { padding: 1.1rem; }
    .article-card-summary { -webkit-line-clamp: 2; }
    .article-detail-surface { box-shadow: none; }
    .article-body { padding: 1.5rem 1.25rem; }
    .article-sources { margin: 0 1.25rem; }
    .article-disclaimer { margin: 0 1.25rem 1.25rem; }
    .info-center-header { align-items: start; gap: 1rem; grid-template-columns: 1fr; padding-bottom: 1.5rem; }
    .info-center-header h1, .info-article-header h1 { font-size: 2rem; }
    .info-topic-grid { grid-template-columns: 1fr; }
    .info-topic-card { min-height: 7rem; }
    .info-support-callout { align-items: stretch; flex-direction: column; gap: 1rem; }
    .info-support-callout .btn { width: 100%; }
    .info-article-header { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .info-article-meta { align-items: flex-start; }
    .info-article-surface { padding: 1.25rem; }
    .info-article-pagination { grid-template-columns: 1fr; }
    .info-article-pagination a:last-child { grid-column: 1; }
}