/* LECommerce storefront. --brand, --brand-contrast (text on the brand color), --brand-text (the brand color for
   words, deeper where the brand is too light to read) and --logo-height come from Store Settings (see _Layout); an
   area with a background of its own (the page, the menu bar, a page row) sets the rest as a "palette". The owner's
   fonts, sizes and text colors (Settings > Fonts and text) come after this file, from TextStyleCss, so a class
   here that shows a kind of text keeps the name TextSlotInfo gives it. */

:root {
    --brand: #0d6efd;
    --brand-contrast: #fff;
    --brand-text: #0b5ed7;
    --ink: #1d1d1f;
    --muted: #6b6b70;
    --line: #e7e5e4;
    --surface: #ffffff;
    --card: #ffffff;
    --tint: #f7f5f3;
    --logo-height: 48px;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
    /* What every font falls back to (Services/Fonts.cs): the standard ones, or a language's own below */
    --fallback-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --fallback-serif: Georgia, "Times New Roman", serif;
    --font-sans: var(--fallback-sans);
    --font-display: var(--fallback-serif);
}

/* Languages in other scripts (Services/Languages.cs). The web fonts have Latin, Vietnamese and Cyrillic letters;
   Chinese, Japanese, Korean and Arabic take the shopper's own system fonts for their language, so the characters
   Chinese and Japanese share take their Simplified, Traditional or Japanese shapes. The page's lang does the rest. */
:root:lang(zh-Hans) {
    --fallback-sans: "Segoe UI", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
    --fallback-serif: Georgia, "Songti SC", "SimSun", "Noto Serif SC", "Noto Serif CJK SC", serif;
}
:root:lang(zh-Hant) {
    --fallback-sans: "Segoe UI", -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", system-ui, sans-serif;
    --fallback-serif: Georgia, "Songti TC", "PMingLiU", "Noto Serif TC", "Noto Serif CJK TC", serif;
}
:root:lang(ja) {
    --fallback-sans: "Segoe UI", -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
    --fallback-serif: Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
}
:root:lang(ko) {
    --fallback-sans: "Segoe UI", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif;
    --fallback-serif: Georgia, "AppleMyungjo", "Batang", "Noto Serif KR", "Noto Serif CJK KR", serif;
}
:root:lang(ar) {
    --fallback-sans: "Segoe UI", -apple-system, "Geeza Pro", Tahoma, "Noto Sans Arabic", system-ui, sans-serif;
    --fallback-serif: Georgia, "Times New Roman", "Noto Naskh Arabic", "Geeza Pro", serif;
}
/* Arabic letters join, so spacing them apart breaks the words; Chinese, Japanese and Korean have no capitals or italics to speak of */
:lang(ar) * { letter-spacing: normal !important; }
:lang(zh-Hans) *, :lang(zh-Hant) *, :lang(ja) *, :lang(ko) * { font-synthesis: none; }
/* Korean puts spaces between words, so lines break there as in English, not between any two syllables */
:root:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
/* Japanese has no spaces: browsers that know its phrases break lines between them rather than inside a word */
:root:lang(ja) { word-break: auto-phrase; overflow-wrap: break-word; }

html { font-size: 16px; }

body.storefront {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

/* An area with a background of its own: Bootstrap's components (forms, dropdowns, cards) take its
   colors too, and _Layout / _Page set data-bs-theme to match how dark it is */
.palette {
    --bs-body-bg: var(--card);
    --bs-body-color: var(--ink);
    --bs-emphasis-color: var(--ink);
    --bs-heading-color: inherit;
    --bs-secondary-color: var(--muted);
    --bs-tertiary-color: var(--muted);
    --bs-border-color: var(--line);
    --bs-secondary-bg: var(--tint);
    --bs-tertiary-bg: var(--tint);
    color: var(--ink);
}

/* Full width (Settings): pages use the whole screen, with a little room at the edges; reading
   columns (.narrow) stay narrow */
.layout-wide .container:not(.narrow):not(.narrow-lg) { max-width: none; padding-inline: clamp(.75rem, 2.5vw, 2.5rem); }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--brand-text); }

/* Keyboard focus: a ring in the text color, which reads on any background. Bootstrap's rings are
   faint, and buttons in the brand color had none (they only darkened, as they do on hover). */
.btn:focus-visible, .nav-link:focus-visible, .page-link:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    box-shadow: none;
}

.pre-line { white-space: pre-line; }
.narrow { max-width: 640px; }
.narrow-lg { max-width: 920px; }

.skip-link { position: absolute; inset-inline-start: 1rem; top: 1rem; z-index: 2000; background: var(--card); color: var(--ink); padding: .5rem 1rem; border-radius: 6px; }

/* Buttons in the brand color */
.btn-brand {
    --bs-btn-color: var(--brand-contrast);
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: var(--brand-contrast);
    --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 85%, #000);
    --bs-btn-active-color: var(--brand-contrast);
    --bs-btn-active-bg: color-mix(in srgb, var(--brand) 75%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--brand) 75%, #000);
    --bs-btn-disabled-color: var(--brand-contrast);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    border-radius: 999px;
    font-weight: 600;
    padding-inline: 1.4rem;
}
.btn-outline-brand {
    --bs-btn-color: var(--brand-text);
    --bs-btn-border-color: var(--brand-text);
    --bs-btn-hover-color: var(--brand-contrast);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-color: var(--brand-contrast);
    --bs-btn-active-bg: var(--brand);
    border-radius: 999px;
    font-weight: 600;
    padding-inline: 1.4rem;
}
.btn-lg.btn-brand, .btn-lg.btn-outline-brand { padding: .75rem 1.75rem; font-size: 1.05rem; }
.link-brand { color: var(--brand-text); text-decoration: none; font-weight: 600; }
.link-brand:hover { text-decoration: underline; color: var(--brand-text); }
/* Plain outline buttons (Apply a discount code, the payment options) in the text color: Bootstrap's grey
   is too light on a tinted panel, and its dark one disappears on a dark background */
.btn-outline-secondary, .btn-outline-dark {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: color-mix(in srgb, var(--ink) 45%, transparent);
    --bs-btn-hover-color: var(--surface);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: var(--surface);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
}

.form-control:focus, .form-select:focus {
    border-color: color-mix(in srgb, var(--brand) 60%, var(--surface));
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 20%, transparent);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.pagination { --bs-pagination-active-color: var(--brand-contrast); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-color: var(--ink); }

/* Header */
.site-header {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.site-header .navbar { padding-block: .75rem; }
/* Logo size (Settings): its height on wide screens; phones cap it so the cart and menu buttons fit */
.site-logo { display: block; height: var(--logo-height); width: auto; max-width: min(60vw, 520px); object-fit: contain; }
.site-name { font-family: var(--font-display); font-size: max(1.1rem, calc(var(--logo-height) / 2)); font-weight: 600; letter-spacing: .01em; }
@media (max-width: 991.98px) {
    /* Room for the account, cart and menu buttons beside it */
    .site-logo { height: min(var(--logo-height), 56px); max-width: calc(100vw - 13.5rem); }
    .site-name { font-size: min(max(1.1rem, calc(var(--logo-height) / 2)), 1.6rem); }
}
.site-header .nav-link { font-weight: 500; color: var(--ink); }
.site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--brand-text); }
.site-search { position: relative; }
.site-search .bi-search { position: absolute; inset-inline-start: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .9rem; }
.site-search .form-control { border-radius: 999px; padding-inline-start: 2.2rem; min-width: 200px; background: var(--tint); border-color: transparent; }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-size: 1.35rem; text-decoration: none; color: var(--ink); }
.nav-icon:hover { background: var(--tint); }
.cart-count {
    position: absolute; top: 4px; inset-inline-end: 2px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--brand); color: var(--brand-contrast);
    font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* Hero */
.hero { padding: 4.5rem 0 4rem; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, var(--surface)), var(--surface)); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 600; color: var(--brand-text); margin-bottom: .75rem; }
.hero-title { font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.08; font-weight: 600; margin-bottom: 1.25rem; }
.hero-intro { font-size: 1.15rem; color: var(--muted); max-width: 36rem; }
.hero-mosaic { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.hero-mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.hero-mosaic-1 { grid-template-columns: 1fr; }
.hero-mosaic-1 img { aspect-ratio: 4 / 3; }
.hero-mosaic-3 img:first-child { grid-row: span 2; aspect-ratio: auto; height: 100%; }

/* Sections */
.section { padding: 3.5rem 0; }
.section-tint { background: var(--tint); }
.section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.section-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; margin-bottom: 1.25rem; }
.page { padding-top: 1.5rem; padding-bottom: 4rem; }
.page-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; margin-bottom: 1.25rem; }
.breadcrumb { font-size: .875rem; --bs-breadcrumb-divider-color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-text); }

.category-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.category-tile {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: 1.4rem 1.5rem; border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand) 7%, var(--surface));
    text-decoration: none; font-weight: 600; font-size: 1.1rem;
    transition: transform .15s ease, background .15s ease;
}
.category-tile:hover { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); transform: translateY(-2px); color: var(--ink); }
.category-tile .bi { color: var(--brand); }
.category-tile-subtitle { display: block; margin-top: .2rem; font-size: .8em; font-weight: 400; color: var(--muted); }

/* Product cards */
.product-grid { display: grid; gap: 1.75rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .product-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.product-card { display: flex; flex-direction: column; }
.product-card-media {
    position: relative; display: block; aspect-ratio: 1;
    border-radius: var(--radius); overflow: hidden; background: var(--tint);
}
.product-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .product-card-media img { transform: scale(1.04); }
.product-card-placeholder { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: #c9c5c1; font-size: 2.5rem; }
.product-badge {
    position: absolute; top: .75rem; inset-inline-start: .75rem;
    background: var(--brand); color: var(--brand-contrast);
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .3rem .65rem; border-radius: 999px;
}
.product-badge-muted { background: #3a3a3c; color: #fff; }
.product-card-body { padding-top: .85rem; }
.product-card-kind { font-size: .78rem; color: var(--muted); margin-bottom: .2rem; }
.product-card-title { font-size: 1rem; font-weight: 600; margin-bottom: .3rem; line-height: 1.35; }
.product-card-title a { text-decoration: none; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.price-current { font-weight: 600; }
.price-compare { color: var(--muted); font-size: .9em; }
.price-lg .price-current { font-size: 1.6rem; }
.price-save { font-size: .8rem; font-weight: 700; color: var(--brand-text); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); padding: .15rem .5rem; border-radius: 999px; }

/* Services list (home) */
.service-list { display: grid; gap: .75rem; }
.service-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    background: var(--card); border-radius: var(--radius); padding: 1.25rem 1.5rem; box-shadow: var(--shadow);
}
.service-row a { text-decoration: none; }
.service-meta { display: flex; align-items: center; gap: 1.25rem; white-space: nowrap; }
@media (max-width: 575.98px) { .service-row { flex-direction: column; align-items: flex-start; } }

/* Catalog */
.catalog-header { margin-bottom: 1.5rem; }
.catalog-description { color: var(--muted); max-width: 48rem; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.catalog-toolbar .form-select { width: auto; }
.catalog-sidebar { position: sticky; top: 6rem; }
.sidebar-heading { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; margin-bottom: .75rem; }
.category-nav a { display: block; padding: .35rem 0; text-decoration: none; color: var(--ink); }
.category-nav a.active { color: var(--brand-text); font-weight: 600; }
.chip { display: inline-block; padding: .35rem .9rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: .9rem; }
.chip:hover { border-color: var(--brand); }
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.empty-state .bi { font-size: 2.75rem; display: block; margin-bottom: .75rem; }

/* Product detail */
.gallery-main { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--tint); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.gallery-thumb { width: 76px; height: 76px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; background: var(--tint); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.active { border-color: var(--brand); }
.product-summary { position: sticky; top: 6rem; }
.product-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.15; }
.product-kind { color: var(--muted); margin-bottom: .75rem; }
.product-lead { font-size: 1.08rem; color: color-mix(in srgb, var(--ink) 85%, var(--surface)); margin-top: 1rem; }
.purchase-box { margin-top: 1.5rem; padding: 1.25rem; border-radius: var(--radius); background: var(--tint); }
.qty-input { width: 5.5rem; text-align: center; }
.form-control-sm.qty-input { width: 4.5rem; }
.stock-note { margin: .75rem 0 0; font-size: .9rem; }
.prose { line-height: 1.7; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.prose h2, .prose h3 { font-family: var(--font-display); margin-top: 1.5rem; }
/* On a right-to-left page each of the owner's paragraphs takes its own direction, so one not translated yet reads as English */
[dir=rtl] .prose :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, figcaption) { unicode-bidi: plaintext; }
.spec-table th { font-weight: 500; color: var(--muted); width: 40%; }

/* Cart & checkout */
.cart-lines { border-top: 1px solid var(--line); }
.cart-line { display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.cart-line.has-problem { background: #fff8f7; }
.cart-line-img { flex: 0 0 88px; height: 88px; border-radius: var(--radius-sm); overflow: hidden; background: var(--tint); display: flex; align-items: center; justify-content: center; color: #c9c5c1; font-size: 1.5rem; }
.cart-line-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-name { font-weight: 600; text-decoration: none; }
.cart-line-actions { display: flex; gap: 1.25rem; align-items: center; margin-top: .5rem; }
.cart-line-total { font-weight: 600; white-space: nowrap; }
.js .js-hide { display: none; }

.summary-card { background: var(--tint); border-radius: var(--radius); padding: 1.5rem; }
.summary-lines li { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.summary-line-img { position: relative; flex: 0 0 52px; height: 52px; border-radius: 8px; background: var(--card); }
.summary-line-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.summary-qty { position: absolute; top: -8px; inset-inline-end: -8px; min-width: 20px; height: 20px; border-radius: 10px; background: #6b6b70; color: #fff; font-size: .72rem; font-weight: 700; text-align: center; line-height: 20px; padding: 0 5px; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; margin: 1rem 0 .5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.totals dt { font-weight: 400; color: var(--muted); }
.totals dd { margin: 0; text-align: end; }
.totals .totals-grand { font-size: 1.15rem; font-weight: 700; color: var(--ink); padding-top: .5rem; border-top: 1px solid var(--line); margin-top: .25rem; }

.checkout-section { margin-bottom: 2rem; }
.checkout-section legend { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; }
.checkout-account { margin-top: -.5rem; margin-bottom: 1rem; clear: both; }
.card-container { min-height: 90px; }
.wallet-button { min-height: 48px; margin-bottom: .5rem; }
.apple-pay-button { display: block; width: 100%; height: 48px; padding: 0; border: 0; border-radius: 4px; cursor: pointer; }
@supports (-webkit-appearance: -apple-pay-button) { .apple-pay-button { -webkit-appearance: -apple-pay-button; -apple-pay-button-type: plain; -apple-pay-button-style: black; } }
paypal-button, venmo-button, paypal-pay-later-button { display: block; width: 100%; }
#shop-pay-button { --shop-pay-button-width: 100%; --shop-pay-button-height: 48px; }
.more-ways { margin-top: 1.5rem; }
.pay-option { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: .75rem; }
.pay-option-title { font-weight: 600; margin-bottom: .5rem; }
.pay-divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--muted); font-size: .85rem; }
.pay-divider::before, .pay-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.order-thanks { text-align: center; padding: 2rem 1rem 1.5rem; }
.order-thanks .bi { font-size: 3rem; color: var(--brand); }
.access-card { border: 2px solid color-mix(in srgb, var(--brand) 35%, var(--surface)); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1.5rem 0; background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.order-facts dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.order-facts dd { margin-bottom: 1rem; }
.account-prompt { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.5rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }

/* Shoppers' accounts */
.account-narrow { max-width: 440px; }
.account-section { padding: 1.75rem 0; border-top: 1px solid var(--line); }
.account-section:first-of-type { margin-top: 1rem; }
.account-message-icon { font-size: 3rem; color: var(--brand); }

/* Footer */
.site-footer { background: var(--tint); padding: 3.5rem 0 1.5rem; margin-top: 2rem; font-size: .95rem; }
.footer-brand { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin-bottom: .5rem; }
.footer-heading { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; margin-bottom: 1rem; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { text-decoration: none; }
.social-links { display: flex; gap: .5rem; }
.social-links a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--card); text-decoration: none; font-size: 1.1rem; }
.social-links a:hover { background: var(--brand); color: var(--brand-contrast); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.25rem; color: var(--muted); font-size: .85rem; }

/* Page rows and parts (layouts from Admin > Pages) */
.page-row { padding: 3.5rem 0; }
.page-row-tinted { background: var(--tint); }
.page-row.palette { background: var(--surface); }
.page-row-main { padding: 1.5rem 0 3rem; }
.page-row-main + .page-row:not(.page-row-tinted):not(.palette):not(.page-row-full) { padding-top: 0; }
.page-row-full { padding: 0; }
.page-col { display: flex; flex-direction: column; gap: 3rem; min-width: 0; }
.page-row-full .page-col { gap: 0; }
.page-row-full .page-part:not(.part-bleed) { padding: 3.5rem clamp(1rem, 4vw, 3rem); }
.page-col-side .section-title { font-size: 1.3rem; margin-bottom: 1rem; }
.page-col-side .section-header { margin-bottom: 1rem; }

/* Product lists size themselves to their column, not the window */
.part-list { container: part / inline-size; }
.part-grid { --n: 2; display: grid; gap: 1.75rem 1.25rem; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.part-carousel { --n: 2; }
@container part (min-width: 600px) {
    .cols-3, .cols-4, .cols-5, .cols-6 { --n: 3; }
}
@container part (min-width: 1000px) {
    .cols-4 { --n: 4; }
    .cols-5 { --n: 5; }
    .cols-6 { --n: 6; }
}
@container part (max-width: 480px) {
    .service-row { flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1rem 1.25rem; }
}

.part-carousel-track {
    display: grid; grid-auto-flow: column; gap: 1.25rem;
    grid-auto-columns: calc((100% - (var(--n) - 1) * 1.25rem) / var(--n));
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding-bottom: .75rem; scrollbar-width: thin;
}
.part-carousel-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--radius-sm); }
.part-carousel-item { scroll-snap-align: start; min-width: 0; }

/* Image sets (Pages > Image set): logos or photos at one height. Row centers them and wraps;
   Scrolling keeps one line, which site.js sets drifting when it doesn't fit */
.image-set-title { text-align: center; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 500; color: var(--muted); margin-bottom: 1.5rem; }
.image-set-track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 3rem; }
.image-set-item { flex: none; }
.image-set-item a { display: block; border-radius: 4px; }
.image-set-item img { display: block; height: var(--image-height); width: auto; max-width: min(80vw, 22rem); object-fit: contain; }
.image-set-mono img { filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.image-set-mono .image-set-item:hover img, .image-set-mono a:focus-visible img { filter: none; opacity: 1; }
[data-image-set="scroll"] .image-set-viewport { overflow-x: auto; scrollbar-width: none; }
[data-image-set="scroll"] .image-set-viewport::-webkit-scrollbar { display: none; }
[data-image-set="scroll"] .image-set-track { flex-wrap: nowrap; width: max-content; margin-inline: auto; }
[data-image-set="scroll"].is-scrolling .image-set-viewport { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
[data-image-set="scroll"].is-scrolling .image-set-track { margin-inline: 0; animation: image-set-scroll var(--scroll-duration, 30s) linear infinite; }
[data-image-set="scroll"].is-scrolling:hover .image-set-track, [data-image-set="scroll"].is-scrolling:focus-within .image-set-track { animation-play-state: paused; }
[data-image-set="scroll"].is-paused .image-set-track { animation-play-state: paused; }
/* Pause and play for a drifting set (shown while it drifts) */
.image-set-controls { display: flex; justify-content: flex-end; margin-top: .75rem; }
@keyframes image-set-scroll { to { transform: translateX(calc(var(--scroll-way, -1) * var(--scroll-distance, 0px))); } }
/* Read right to left, the copy comes in from the left: the row drifts rightward */
[dir=rtl] [data-image-set] { --scroll-way: 1; }
@media (prefers-reduced-motion: reduce) { [data-image-set="scroll"] .image-set-track { animation: none !important; } }
/* Cards (Pages > Cards): short blocks in the row's colors, as many to a line as their column fits, up
   to the number chosen (info-cols-N). --accent is a card's own color, else the brand's: it marks the
   ring around a photo or initials, the quote mark and the check, never the words. */
.part-cards { container: part / inline-size; }
.info-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.info-n { --n: 1; }
/* Numbers fit two to a line even on a phone */
.info-cards-number.info-cols-2, .info-cards-number.info-cols-3, .info-cards-number.info-cols-4 { --n: 2; }
@container part (min-width: 540px) { .info-n.info-cols-2, .info-n.info-cols-3, .info-n.info-cols-4 { --n: 2; } }
@container part (min-width: 820px) { .info-n.info-cols-3, .info-n.info-cols-4 { --n: 3; } }
@container part (min-width: 1040px) { .info-n.info-cols-4 { --n: 4; } }
.info-card-track { list-style: none; margin: 0; padding-inline-start: 0; }
.info-card {
    --accent: var(--brand);
    position: relative; height: 100%; display: flex; flex-direction: column; gap: .75rem; min-width: 0;
    padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
    transition: transform .15s ease, border-color .15s ease;
}
.info-card-linked:hover { transform: translateY(-2px); border-color: var(--accent); }
.info-card-image { display: block; width: calc(100% + 3rem); max-width: none; margin: -1.5rem -1.5rem .25rem; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.info-card-label { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.info-card-title { font-size: 1.2rem; font-weight: 600; line-height: 1.3; margin: 0; }
.info-card-title a, a.info-card-value { text-decoration: none; color: inherit; }
.info-card-text { margin: 0; line-height: 1.65; white-space: pre-line; }
.info-card-more { margin-top: auto; padding-top: .25rem; font-weight: 600; color: var(--brand-text); }
.info-card-value { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1.05; color: var(--brand-text); overflow-wrap: anywhere; }
.info-cards-number .info-card { gap: .35rem; }
.info-cards-number .info-card-text { color: var(--muted); font-size: .9rem; }
.info-card-person { display: flex; align-items: center; gap: .85rem; margin: 0; }
.info-card-avatar {
    flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--accent); color: var(--ink); font-weight: 700; letter-spacing: .02em;
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
}
.info-card-person .info-card-title { font-size: 1.05rem; }
.info-card-person .info-card-label { margin-top: .15rem; }
.info-card-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.info-card-tags li { font-size: .75rem; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--tint); }
.info-card-quote { margin: 0; }
.info-card-quote-mark { font-family: Georgia, "Times New Roman", serif; font-size: 3.5rem; line-height: .7; height: 1.6rem; color: var(--accent); }
.info-card-quote blockquote { flex: 1; margin: 0; font-style: italic; }
.info-card-quote figcaption { padding-top: .9rem; border-top: 1px solid var(--line); }
.info-card-quote .info-card-avatar { width: 2.6rem; height: 2.6rem; font-size: .85rem; }
.info-card-check { flex-direction: row; align-items: flex-start; gap: .75rem; padding: 1rem 1.15rem; }
.info-card-check-mark { flex: none; font-size: 1.2rem; line-height: 1.5rem; color: var(--accent); }
.info-card-check .info-card-title { font-size: 1rem; font-weight: 500; line-height: 1.5rem; }
.info-card-check .info-card-text { margin-top: .25rem; color: var(--muted); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .info-card { transition: none; } .info-card-linked:hover { transform: none; } }

.carousel-nav { display: none; gap: .35rem; }
.js .carousel-nav { display: flex; }
.carousel-nav.is-static { display: none; }
.carousel-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.carousel-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.carousel-btn:disabled { opacity: .35; }

.compact-list { display: grid; gap: .25rem; margin: 0; }
.compact-item { display: flex; align-items: center; gap: .85rem; padding: .45rem; margin: 0 -.45rem; border-radius: var(--radius-sm); text-decoration: none; }
.compact-item:hover { background: var(--tint); color: inherit; }
.compact-thumb { flex: 0 0 60px; height: 60px; border-radius: var(--radius-sm); overflow: hidden; background: var(--tint); display: flex; align-items: center; justify-content: center; color: #c9c5c1; }
.compact-thumb img { width: 100%; height: 100%; object-fit: cover; }
.compact-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.compact-name { font-weight: 600; line-height: 1.3; }
.compact-info .price { font-size: .9rem; }

.hero-boxed { border-radius: var(--radius); padding: clamp(2rem, 5vw, 3.5rem); }

.banner {
    position: relative; overflow: hidden; display: flex; align-items: center;
    min-height: 260px; border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand) 12%, var(--surface));
}
.banner-bleed { border-radius: 0; min-height: 380px; }
.banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner.has-image { color: #fff; }
.banner.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.15)); }
.banner-body { position: relative; z-index: 1; width: 100%; padding: clamp(1.5rem, 4vw, 3rem); }
.banner-bleed .banner-body { padding-block: 3.5rem; }
.banner-copy { max-width: 36rem; }
.banner-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 600; line-height: 1.12; margin-bottom: .75rem; }
.banner-text { font-size: 1.08rem; margin-bottom: 1.25rem; opacity: .92; }
.page-col-side .banner { min-height: 200px; }
.page-col-side .banner-title { font-size: 1.4rem; }

.preview-bar { background: #1d1d1f; color: #fff; padding: .6rem 0; font-size: .9rem; }

/* Languages (Admin > Languages): the menu, the bar offering the browser's language, and the footer's links */
.language-menu { border: 0; background: none; }
.language-offer { background: var(--tint); border-bottom: 1px solid var(--line); padding: .55rem 0; font-size: .92rem; }
.language-offer .container { display: flex; align-items: center; gap: .4rem 1rem; flex-wrap: wrap; }
.language-offer a { font-weight: 600; color: var(--brand-text); }
.language-offer-close { border: 0; background: none; padding: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; margin-inline-start: auto; }
.footer-languages { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .75rem; }
.footer-languages a { color: inherit; }
.footer-languages a[aria-current] { font-weight: 600; text-decoration: none; }

/* Cookie consent (when the store asks; see tracking.js) */
.consent-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(0,0,0,.08); padding: 1rem 0; }
.consent-inner { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; justify-content: space-between; }
.consent-inner p { margin: 0; max-width: 48rem; font-size: .92rem; }
.consent-actions { display: flex; gap: .5rem; }
.footer-link-button { border: 0; background: none; padding: 0; margin-inline-start: 1rem; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }

/* Variant pickers */
.variant-form { display: grid; gap: 1rem; }
.variant-option { border: 0; padding: 0; margin: 0; min-width: 0; }
.variant-option-label { font-size: .9rem; font-weight: 600; margin-bottom: .5rem; float: none; width: auto; }
.variant-option-label [data-chosen] { font-weight: 400; color: var(--muted); }

/* Extended warranties: the choice on the product page, on each cart line, and in order summaries */
.warranty-choice { border: 0; padding: 0; margin: 1.25rem 0 .75rem; min-width: 0; }
.warranty-option { display: flex; gap: .65rem; align-items: flex-start; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .45rem; background: var(--card); }
.warranty-option:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.warranty-option .form-check-input { flex: none; margin-top: .2rem; }
.warranty-label { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; cursor: pointer; }
.warranty-name, .warranty-price { font-weight: 600; }
.warranty-price { white-space: nowrap; }
.warranty-detail { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }
.warranty-detail a { color: inherit; }
.cart-warranty { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: .6rem; }
.cart-warranty .form-select { width: auto; max-width: 100%; }
.summary-lines .summary-line-warranty { padding-top: 0; font-size: .9rem; color: var(--muted); }
.variant-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.variant-choice {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 3rem; min-height: 2.6rem;
    padding: .4rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
    cursor: pointer; font-weight: 500; user-select: none;
}
.variant-choice:hover { border-color: var(--ink); }
.btn-check:checked + .variant-choice { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.btn-check:focus-visible + .variant-choice { outline: 2px solid var(--ink); outline-offset: 2px; }
.variant-choice.is-unavailable { color: var(--muted); text-decoration: line-through; background: var(--tint); }
/* Choices made at order, and the way to ask for anything else */
.product-choices { margin: .25rem 0 1rem; }
.choice-quote { margin: .25rem 0 0; font-size: .9rem; color: var(--muted); }
.cart-line-choices { color: var(--muted); }

/* What a choice changes the price by, from the variant shown ("+$193.00") */
.variant-choice-price { margin-inline-start: .4rem; font-size: .82em; color: var(--muted); }
.variant-choice-price:empty { display: none; }
.variant-swatch { min-width: 2.6rem; padding: .3rem; border-radius: 50%; }
.variant-swatch.is-unavailable { opacity: .45; }
.swatch-dot { display: block; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
/* In stock, low or not: deeper than Bootstrap's green and amber, so they read on the tinted box (and lighter on a dark one) */
.purchase-box .stock-note { color: color-mix(in srgb, #198754 60%, var(--ink)); }
.purchase-box .stock-note.is-low { color: color-mix(in srgb, #997404 60%, var(--ink)); }
.variant-form .stock-note { margin: -.25rem 0 0; }

/* "Need more? Step up to the …" under the buy box */
.step-up { margin-top: 1rem; padding: .6rem 1rem; border: 1px dashed color-mix(in srgb, var(--ink) 30%, var(--surface)); border-radius: var(--radius-sm); }
.step-up-label { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.step-up-link { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; padding: .5rem 0; color: var(--ink); text-decoration: none; }
.step-up-link + .step-up-link { border-top: 1px solid var(--line); }
.step-up-name { font-weight: 600; transition: color .15s; }
.step-up-link:hover .step-up-name, .step-up-link:focus-visible .step-up-name { color: var(--brand-text); }
.step-up-price { font-size: .9rem; color: var(--brand-text); white-space: nowrap; }

/* Discount code box (cart and checkout summaries) */
.discount-box { margin-bottom: .75rem; }
.discount-form { display: flex; gap: .5rem; }
.discount-form .form-control { flex: 1; background: var(--card); }
.discount-code { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .7rem; border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--surface)); border-radius: var(--radius-sm); background: var(--card); margin-bottom: .4rem; font-size: .9rem; }
.discount-code.is-unused { border-color: var(--line); color: var(--muted); }
.discount-applied { font-size: .9rem; color: var(--brand-text); font-weight: 600; margin-bottom: .4rem; }
.totals .totals-discount { color: var(--brand-text); }
.totals .totals-note { display: block; font-size: .8rem; color: var(--brand-text); }

/* Checkout shipping options */
.shipping-options { display: grid; gap: .5rem; }
.shipping-option { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; }
.shipping-option:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.shipping-option .form-check-input { margin: 0; flex-shrink: 0; }
.shipping-option-name { flex: 1; }
.shipping-option-price { font-weight: 600; white-space: nowrap; }

/* Blog: post cards (photo, date, title, a few lines), the list of titles for sidebars, and a post */
.post-grid { gap: 2rem 1.5rem; }
.post-card { display: flex; flex-direction: column; }
.post-card-media { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--tint); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.post-card:hover .post-card-media img { transform: scale(1.03); }
.post-card-placeholder { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--muted); font-size: 2.5rem; opacity: .5; }
.post-card-body { padding-top: .9rem; }
.post-card-date { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .25rem; }
.post-card-title { font-size: 1.15rem; font-weight: 600; line-height: 1.35; margin-bottom: .4rem; }
.post-card-title a { color: inherit; text-decoration: none; }
.post-card-title a:hover { text-decoration: underline; }
.post-card-text { color: var(--muted); margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-list li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.post-list li:last-child { border-bottom: 0; }
.post-list a { display: block; font-weight: 600; color: inherit; text-decoration: none; line-height: 1.35; }
.post-list a:hover { text-decoration: underline; }
.post-back { display: inline-block; margin-bottom: 1rem; font-size: .9rem; color: var(--muted); text-decoration: none; }
.post-back:hover { color: inherit; }
.post .page-title { margin-bottom: .5rem; }
.post-meta { color: var(--muted); margin-bottom: 1.5rem; }
.post-image { margin: 0 0 2rem; border-radius: var(--radius); overflow: hidden; background: var(--tint); }
.post-image img { display: block; width: 100%; height: auto; }
.post-products { margin-top: 3.5rem; }

/* Read right to left (Arabic): the page mirrors (Bootstrap's own right-to-left sheet, and start/end above); arrows
   that point the way through the page turn round with it. An email, a phone number or a ZIP code reads left to
   right in any language, and an address is written in Latin letters for the carrier's label. */
[dir=rtl] .bi-arrow-left::before, [dir=rtl] .bi-arrow-right::before,
[dir=rtl] .bi-chevron-left::before, [dir=rtl] .bi-chevron-right::before { transform: scaleX(-1); }
[dir=rtl] input[type=email], [dir=rtl] input[type=tel], [dir=rtl] input[autocomplete~=postal-code],
[dir=rtl] input[autocomplete~=address-line1], [dir=rtl] input[autocomplete~=address-line2],
[dir=rtl] input[autocomplete~=address-level1], [dir=rtl] input[autocomplete~=address-level2] { direction: ltr; text-align: end; }