/* AFRAND: a compact catalog frame, with content-driven fallbacks for short viewports. */
:root {
    --af-ink: #203448;
    --af-dark: #152b43;
    --af-muted: #596b7a;
    --af-gold: #c5a576;
    --af-gold-pale: #eae0cd;
    --af-cream: #f3f6f9;
    --af-line: #d2dce5;
    --af-sand: #f3f6f9;
    --af-header: #152b43;
    --af-header-text: #ffffff;
    --af-sidebar: #e3ebf2;
    --af-collection: #dce6ef;
    --af-catalog: #dfe7ee;
    --af-accent: #203f5b;
    --af-accent-hover: #152b43;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; background: var(--af-sand); color: var(--af-ink); font-size: 14px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a, input, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; line-height: 1.5; }
button:disabled { cursor: not-allowed; }
button, input, select { border-radius: 6px; }
form { margin: 0; }
.page-shell { width: 100%; height: 100vh; height: 100dvh; padding: 8px; }
.shop-frame { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-rows: 64px minmax(0, 1fr) 40px; border: 1px solid #b9cbd9; border-radius: 10px; background: var(--af-cream); box-shadow: 0 7px 28px #203f5b17; }
.shop-frame:has(> .site-messages) { grid-template-rows: 64px auto minmax(0, 1fr) 40px; }
.site-header { display: flex; align-items: center; min-width: 0; gap: 20px; padding: 6px 18px; color: var(--af-header-text); background: var(--af-header); border-radius: 9px 9px 0 0; border-bottom: 1px solid #a88d62; position: relative; z-index: 30; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-logo { width: 44px; height: 50px; display: grid; place-items: center; border: 1px solid #c5a576; border-radius: 6px; background: #152b43; color: #ddc396; font: 29px Georgia, serif; }
.brand-text strong { display: block; font-size: 18px; font-weight: 800; line-height: 1.5; }
.brand-text > span { display: block; font-size: 10px; color: #d6e2eb; }
.brand-text bdi { letter-spacing: 1.6px; font-size: 10px; }
.header-nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: 24px; }
.header-nav a { display: inline-flex; align-items: center; min-height: 38px; font-size: 13px; color: #e6edf3; }
.header-nav a[aria-current="page"] { font-weight: 750; color: #edd3a1; border-bottom: 2px solid #edd3a1; }
.header-nav a:hover { color: #edd3a1; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-link, .user-trigger { height: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 14px; border: 1px solid #7c93a8; border-radius: 6px; background: #253e56; color: var(--af-header-text); font-size: 12px; white-space: nowrap; }
.header-link.gold { color: #27323d; background: #ddc396; border-color: #ddc396; font-weight: 750; }
.header-link:hover, .user-trigger:hover { border-color: #ddc396; }
.user-menu { position: relative; display: flex; align-items: center; }
.user-trigger { cursor: pointer; }
.user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.user-avatar { color: #ddc396; font-size: 22px; line-height: 1; }
.user-arrow { color: #edd3a1; }
.user-dropdown { position: absolute; top: calc(100% + 9px); left: 0; width: 248px; padding: 9px; border: 1px solid #d2dce5; border-radius: 8px; background: #ffffff; color: var(--af-ink); box-shadow: 0 14px 40px #152b432b; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .15s, transform .15s; z-index: 60; }
.user-menu.is-open .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu.is-open .user-arrow { transform: rotate(180deg); }
.dropdown-head { padding: 6px 10px 10px; margin-bottom: 5px; border-bottom: 1px solid var(--af-line); }
.dropdown-head strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.dropdown-head > span { display: block; font-size: 11px; color: var(--af-muted); }
.dropdown-item { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border: none; border-radius: 5px; background: transparent; color: var(--af-ink); text-align: right; font-size: 13px; }
.dropdown-item:hover { background: #f7fafd; }
.dropdown-item > span { color: #775d31; }
.dropdown-item.logout { color: #b12b3b; border-top: 1px solid var(--af-line); margin-top: 5px; }
.site-messages { max-height: 44px; padding: 5px 16px; overflow: auto; border-bottom: 1px solid var(--af-line); background: #f7fafd; font-size: 12px; }
.site-messages p { margin: 0; }
.shop-content { min-width: 0; min-height: 0; overflow: hidden; }
#shopScreen { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; padding: 10px; }
#shopScreen.shop-hidden { display: none !important; }
.gold-side { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid #b9cbd9; border-radius: 8px; background: var(--af-sidebar); color: #243d54; box-shadow: inset 0 3px 0 #c5a576; }
.gold-side > div:first-child { min-width: 0; }
.gold-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid #b9cbd9; }
.gold-brand span { color: #536b7d; font-size: 10px; }
.gold-brand h2 { margin: 2px 0 0; font-size: 15px; font-weight: 750; }
.gold-logo { display: grid; place-items: center; width: 31px; height: 36px; color: #ddc396; border: 1px solid #c5a576; border-radius: 5px; font: 25px Georgia, serif; }
.gold-search { display: flex; width: 100%; height: 40px; margin-top: 10px; border: 1px solid #b9cbd9; border-radius: 6px; background: white; overflow: hidden; }
.gold-search:focus-within { outline: 2px solid #775d31; outline-offset: 2px; }
.gold-search input { width: 100%; min-width: 0; padding: 7px; border: 0; border-radius: 0; background: white; color: var(--af-ink); outline: none; font-size: 11px; }
.gold-search input::placeholder { color: #596b7a; }
.gold-search button { padding: 0 10px; border: 0; border-right: 1px solid #a88d62; border-radius: 0; color: #27323d; background: #ddc396; font-size: 11px; font-weight: 700; }
.gold-service-card { margin-top: 10px; padding: 10px; border: 1px solid #b9cbd9; border-radius: 6px; background: #f7fafd; }
.gold-service-card > strong { display: block; font-size: 11px; font-weight: 750; color: #775d31; }
.gold-service-card p { margin: 5px 0 8px; color: #596b7a; font-size: 10px; line-height: 1.75; }
.gold-service-card > a { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.gold-service-card bdi { color: #243d54; font-size: 16px; letter-spacing: .4px; }
.gold-service-card a span { font-size: 10px; color: #536b7d; }
.gold-trust-grid { display: grid; margin-top: 7px; gap: 4px; }
.gold-trust-item { display: flex; align-items: center; justify-content: space-between; min-height: 29px; padding: 4px 8px; border: 1px solid #b9cbd9; border-radius: 5px; background: #f7fafd; font-size: 11px; color: #243d54; }
.gold-trust-item:hover { background: #f7fafd; border-color: #a88d62; }
.gold-trust-item span { color: #775d31; font-size: 15px; }
.gold-side-spacer { flex: 1; min-height: 0; }
.gold-cart { display: flex; flex-direction: column; min-height: 180px; max-height: 236px; padding: 10px; border: 1px solid #d2dce5; border-radius: 7px; background: #ffffff; color: var(--af-ink); box-shadow: 0 2px 8px #152b430d; }
.gold-cart-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid #d2dce5; }
.gold-cart-head small { color: #596b7a; font-size: 10px; }
.gold-cart-head strong { display: inline-block; margin-right: 6px; font-size: 13px; }
.gold-cart-icon { color: #9b7126; font-size: 18px; }
.gold-cart-lines { min-height: 33px; max-height: 91px; overflow: auto; margin: 5px 0; }
.gold-cart-line { display: grid; gap: 3px; padding: 5px 0; border-bottom: 1px solid #e7edf3; font-size: 10px; }
.gold-cart-line-name { overflow-wrap: anywhere; }
.gold-cart-line-actions { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.gold-cart-line-price { color: #775d31; font-size: 10px; }
.gold-remove-btn { width: 26px; height: 26px; border: 1px solid #d2dce5; background: #f8fafc; color: #596b7a; font-size: 18px; }
.gold-empty { padding: 10px 0; font-size: 10px; color: #596b7a; }
.gold-cart-total { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 3px 8px; padding: 6px 0; border-top: 1px solid #d2dce5; font-size: 10px; }
.gold-cart-total strong { color: #203448; font-size: 12px; }
.gold-cart-actions { display: flex; gap: 5px; }
.gold-cart-actions > form { flex: 1; }
.gold-checkout, .gold-clear { min-height: 32px; display: flex; align-items: center; justify-content: center; padding: 6px 8px; border-radius: 5px; font-size: 10px; font-weight: 650; }
.gold-checkout { flex: 1.5; background: #ddc396; color: #203448; border: 1px solid #a88d62; }
.gold-clear { width: 100%; background: #f7fafd; color: #596b7a; border: 1px solid #a88d62; }
.gold-main { min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-rows: 50px 72px 38px minmax(0, 1fr) 44px; gap: 8px; }
.gold-hero { display: flex; align-items: center; justify-content: space-between; min-height: 0; gap: 12px; padding: 6px 14px; border: 1px solid #d2dce5; border-radius: 7px; background: #ffffff; box-shadow: inset -4px 0 0 #c5a576; }
.gold-hero > div { min-width: 0; display: flex; align-items: baseline; gap: 13px; }
.gold-hero > div > small { display: none; }
.gold-hero h1 { margin: 0; font-size: 19px; line-height: 1.6; white-space: nowrap; font-weight: 800; }
.gold-hero p { margin: 0; color: #596b7a; font-size: 11px; line-height: 1.6; }
.gold-hero-badge { flex-shrink: 0; color: #775d31; }
.gold-hero-badge > span { font: 18px Georgia, serif; letter-spacing: 3px; }
.gold-hero-badge > small { display: none; }
.gold-collection-bar { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 0; padding: 10px 12px; border: 1px solid #b0c3d3; border-radius: 7px; background: var(--af-collection); }
.gold-collection-title { flex-shrink: 0; width: 60px; }
.gold-collection-title h2 { margin: 0; font-size: 13px; font-weight: 750; color: #2e465a; }
.gold-cats { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-content: center; gap: 5px; }
.gold-cat { min-width: 0; min-height: 38px; padding: 6px 3px; border: 1px solid #b0c3d3; border-radius: 6px; background: #f9fbfd; color: #2e465a; font-size: 13px; font-weight: 650; white-space: nowrap; }
.gold-cats:has(> .gold-cat:nth-child(11)) { grid-auto-rows: 24px; gap: 4px; }
.gold-cats:has(> .gold-cat:nth-child(11)) .gold-cat { min-height: 24px; padding: 2px 4px; font-size: 11px; }
.gold-cats:has(> .gold-cat:nth-child(21)) { max-height: 52px; overflow-y: auto; }
.gold-cat:hover { background: #ffffff; border-color: #203f5b; }
.gold-cat.active { background: var(--af-accent); border-color: var(--af-accent); color: #ffffff; box-shadow: inset 0 -2px 0 #ddc396; }
.gold-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 0; padding: 3px 10px; border: 1px solid #d2dce5; border-radius: 6px; background: #e7edf3; }
.gold-toolbar > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.gold-toolbar h2 { margin: 0; font-size: 14px; font-weight: 750; }
.gold-toolbar p { margin: 0; font-size: 10px; color: #596b7a; }
.gold-sort { width: 170px; min-height: 30px; padding: 3px 7px; border: 1px solid #d2dce5; border-radius: 5px; background: #ffffff; color: #596b7a; font-size: 11px; }
.gold-products { --catalog-columns: 3; --catalog-rows: 2; min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(var(--catalog-columns), minmax(0, 1fr)); grid-template-rows: repeat(var(--catalog-rows), minmax(0, 1fr)); gap: 10px; border-radius: 8px; background: var(--af-catalog); }
.gold-product { min-width: 0; min-height: 0; position: relative; display: grid; grid-template-columns: 38% minmax(0, 1fr); overflow: hidden; border: 1px solid #bbcbd8; border-radius: 8px; background: white; box-shadow: 0 2px 5px #203f5b10; }
.gold-product:hover, .gold-product:focus-within { border-color: #c5a576; box-shadow: 0 3px 10px #203f5b15; }
.gold-product-photo { min-width: 0; min-height: 0; position: relative; overflow: hidden; border-left: 1px solid #d2dce5; background: #f8fafc; }
.gold-product-image { display: block; width: 100%; height: 100%; padding: 7px; object-fit: contain; }
.gold-product-placeholder { height: 100%; display: grid; place-items: center; padding: 7px; color: #596b7a; font-size: 11px; }
.gold-product-preview { position: absolute; left: 7px; bottom: 7px; z-index: 3; }
.product-hover-actions { display: flex; }
.gold-eye-button { display: inline-grid; place-items: center; width: 30px; min-height: 30px; padding: 2px; border: 1px solid #d2dce5; border-radius: 5px; background: #ffffff; color: #203448; font-size: 0; }
.gold-eye-button svg { display: block; }
.gold-detail-button { display: none; }
.gold-product-badge { position: absolute; right: 7px; top: 7px; max-width: calc(38% - 14px); padding: 2px 5px; border: 1px solid #cbb995; border-radius: 4px; background: #eae0cd; color: #62502f; font-size: 11px; z-index: 2; }
.gold-product-info { min-width: 0; min-height: 0; padding: 8px; display: grid; grid-template-rows: 42px 20px minmax(0, 1fr); gap: 4px; }
.gold-product-top { position: absolute; top: 34px; right: 7px; max-width: calc(38% - 14px); z-index: 2; }
.gold-product-category { display: none; }
.gold-stock { padding: 2px 5px; border: 1px solid #bad2b5; border-radius: 4px; background: #edf5e7; color: #456a42; font-size: 11px; font-weight: 500; }
.gold-stock-empty { background: #fbf0f1; color: #9b3544; border-color: #e8c4ca; }
.gold-stock-low { background: #fbf0d8; color: #775d31; border-color: #dfc17e; }
.gold-product-name { margin: 0; font-size: 14px; line-height: 21px; font-weight: 750; max-height: 42px; overflow: hidden; }
.gold-product-name > button { width: 100%; padding: 0; border: 0; border-radius: 2px; text-align: right; color: inherit; background: transparent; font: inherit; line-height: inherit; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-details-link { position: absolute; bottom: 7px; right: 7px; z-index: 3; width: calc(38% - 51px); min-height: 30px; margin: 0; padding: 4px 2px; border: 1px solid #d2dce5; border-radius: 5px; background: #ffffff; color: #203448; font-size: 10px; }
.gold-product-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; min-width: 0; margin: 0; }
.gold-product-meta > span { padding: 2px 4px; border: 1px solid #d2dce5; border-radius: 4px; color: #596b7a; background: #e7edf3; font-size: 11px; white-space: nowrap; line-height: 1.2; }
.gold-price-row { min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.gold-price { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 3px; }
.gold-price strong { color: #203448; font-size: 19px; line-height: 1.25; font-weight: 800; letter-spacing: -.5px; }
.gold-price > span { color: #596b7a; font-size: 11px; }
.gold-price del { display: block; width: 100%; color: #596b7a; font-size: 11px; line-height: 1.4; }
.gold-product-actions, .gold-product-actions > form { min-width: 0; width: 100%; }
.gold-add { min-height: 34px; width: 100%; display: flex; align-items: center; justify-content: center; padding: 5px 6px; border: 1px solid var(--af-accent); border-radius: 5px; background: var(--af-accent); color: #ffffff; font-size: 12px; font-weight: 650; }
.gold-add:hover:not(:disabled) { background: var(--af-accent-hover); border-color: #c5a576; }
.gold-add:disabled, .gold-soldout { background: #e7edf2; border-color: #d2dce5; color: #5a6b79; }
.gold-quote { border-color: #cfb06c; background: #f9edcc; color: #6d501d; }
.gold-qty-control { min-height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 2px; border: 1px solid #d2dce5; border-radius: 5px; background: #e7edf3; }
.qty-btn { min-width: 28px; min-height: 28px; padding: 0; border: 1px solid #d2dce5; border-radius: 4px; background: white; color: #203448; font-size: 20px; line-height: 1.1; }
.qty-btn:disabled { color: #5a6b79; background: #e7edf2; }
.qty-center { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #596b7a; }
.qty-center > strong { font-size: 13px; color: #203448; }
.gold-pager { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 5px 8px; border: 1px solid #d2dce5; border-radius: 6px; background: #e7edf3; }
.gold-pager > button { min-width: 82px; min-height: 32px; padding: 5px 14px; border: 1px solid #203f5b; border-radius: 5px; background: #203f5b; color: #ffffff; font-size: 11px; }
.gold-pager > button:disabled { color: #5a6b79; border-color: #d2dce5; background: #e7edf2; }
.gold-page-indicator { font-size: 11px; color: #596b7a; }
.gold-empty-results { grid-column: 1 / -1; grid-row: 1 / -1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; border: 1px dashed #b9cbd9; border-radius: 7px; background: #ffffff; text-align: center; }
.gold-empty-results strong { font-size: 20px; }
.gold-empty-results p { margin: 0; color: #596b7a; font-size: 13px; }
.gold-empty-results button { min-height: 38px; padding: 8px 18px; border: none; background: #203f5b; color: white; font-size: 12px; }

.product-detail-view { display: none; }
.product-detail-view.active { display: block; }
.detail-topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--af-line); margin-bottom: 16px; background: var(--af-cream); }
.detail-back-button { border: 1px solid #d2dce5; color: var(--af-ink); padding: 8px 16px; min-height: 44px; background: white; font-size: 13px; }
.detail-title-mini { display: grid; text-align: left; }
.detail-title-mini strong { color: #775d31; font-size: 14px; }
.detail-title-mini > span { color: var(--af-muted); font-size: 12px; }
.detail-product-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.detail-gallery { aspect-ratio: .9; background: #f8fafc; border-radius: 16px; border: 1px solid var(--af-line); overflow: hidden; display: grid; place-items: center; }
.detail-gallery img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.detail-image-placeholder { padding: 24px; color: var(--af-muted); text-align: center; font-size: 14px; }
.detail-info { min-width: 0; }
.detail-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: #596b7a; }
.detail-category-pill, .detail-badge { border: 1px solid var(--af-line); padding: 4px 10px; border-radius: 6px; }
.detail-badge { color: #775d31; background: #eae0cd; }
.detail-info h2 { font-size: 26px; line-height: 1.8; margin: 16px 0 10px; }
.detail-short-description { font-size: 14px; color: #596b7a; line-height: 1.9; }
.detail-price-card, .premium-price-card { display: grid; padding: 18px 20px; background: #e7edf3; border-radius: 12px; border: 1px solid #d2dce5; margin: 24px 0 18px; }
.detail-price-card > span, .premium-price-card > span { font-size: 12px; color: #596b7a; }
.detail-price-card strong, .premium-price-card strong { font-size: 28px; line-height: 1.8; font-weight: 800; }
.detail-price-card del, .premium-price-card del { font-size: 13px; color: #596b7a; }
.pricing-pending-message { font-size: 12px; margin: 8px 0 0; color: #775d31; line-height: 1.9; }
.detail-spec-grid, .premium-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.detail-spec-grid > div, .premium-specs > div { display: grid; padding: 12px; border: 1px solid var(--af-line); border-radius: 8px; }
.detail-spec-grid span, .premium-specs span { color: #596b7a; font-size: 12px; }
.detail-spec-grid strong, .premium-specs strong { font-size: 14px; overflow-wrap: anywhere; }
.detail-price-note { background: #eae0cd; padding: 14px; border-radius: 10px; margin: 18px 0; color: #62502f; font-size: 12px; }
.detail-price-note p { margin: 0 0 8px; }
.detail-price-note a { color: #775d31; text-decoration: underline; text-underline-offset: 5px; }
.detail-mini-panel { padding: 18px 0; border-bottom: 1px solid var(--af-line); font-size: 13px; line-height: 1.95; }
.detail-mini-panel > strong { font-size: 14px; }
.detail-mini-panel p { margin: 8px 0 0; color: #596b7a; }
.detail-mini-panel ul { padding-right: 18px; margin: 8px 0 0; color: #596b7a; }
.detail-trust-chips { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 18px 0; }
.detail-trust-chips a { font-size: 12px; color: #775d31; text-decoration: underline; text-underline-offset: 5px; padding: 6px 0; }
.detail-add-button, .premium-add-to-cart { width: 100%; min-height: 50px; background: var(--af-accent); color: white; font-size: 14px; font-weight: 650; border: 1px solid var(--af-accent); padding: 10px 20px; }
.detail-add-button:disabled, .premium-add-to-cart:disabled { background: #e7edf2; border-color: #d2dce5; color: #5a6b79; }
.gold-lightbox { position: fixed; inset: 0; background: #152b43bf; backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; padding: 24px; z-index: 200; }
.gold-lightbox.active { display: flex; }
.premium-modal { position: relative; width: min(1000px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; background: white; border-radius: 20px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 36px; gap: 28px; box-shadow: 0 24px 90px #152b4344; }
.premium-close { position: absolute; left: 12px; top: 12px; width: 42px; height: 42px; border: 1px solid var(--af-line); background: white; color: var(--af-ink); font-size: 26px; z-index: 5; }
.premium-gallery-side { min-width: 0; padding-top: 18px; }
.premium-image-frame { position: relative; }
.premium-image-shell { position: relative; aspect-ratio: .9; overflow: hidden; background: #f8fafc; border-radius: 14px; }
.lightbox-image { width: 100%; height: 100%; padding: 20px; object-fit: contain; transition: transform .2s; cursor: zoom-in; }
.lightbox-image.zoomed { transform: scale(1.8); cursor: zoom-out; }
.lightbox-nav { position: absolute; top: 45%; min-width: 38px; height: 44px; border: 1px solid var(--af-line); background: white; color: var(--af-ink); font-size: 28px; z-index: 3; }
.lightbox-prev { right: 6px; }
.lightbox-next { left: 6px; }
.zoom-button { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); white-space: nowrap; min-height: 36px; padding: 6px 12px; border: 1px solid var(--af-line); background: white; font-size: 12px; color: #596b7a; }
.lightbox-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.lightbox-thumb { width: 58px; height: 58px; border: 1px solid var(--af-line); background: white; padding: 4px; }
.lightbox-thumb.active { border-color: var(--af-gold); }
.lightbox-thumb img { width: 100%; height: 100%; object-fit: contain; }
.premium-detail-side { min-width: 0; padding-top: 22px; }
.premium-detail-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11px; }
.premium-mini-label { color: #775d31; }
.premium-status { padding: 3px 8px; border-radius: 5px; color: #52623c; background: #eff4e5; }
.premium-detail-side h2 { font-size: 24px; line-height: 1.8; margin: 14px 0 4px; }
.premium-detail-side > p { margin: 0; color: #596b7a; font-size: 13px; }
.premium-description { padding: 22px 0; font-size: 13px; color: #596b7a; }
.premium-description > strong { color: var(--af-ink); }
.premium-description p { margin: 6px 0 0; }
.shop-toast { position: fixed; bottom: 24px; right: 24px; left: 24px; width: max-content; max-width: calc(100% - 48px); margin: 0 auto; padding: 14px 22px; background: var(--af-dark); color: #fff; font-size: 14px; border-radius: 12px; box-shadow: 0 8px 30px #152b4333; transform: translateY(25px); opacity: 0; pointer-events: none; transition: .2s; z-index: 300; }
.shop-toast.show { opacity: 1; transform: translateY(0); }

/* A single-line utility footer; complete contact information lives on its own page. */
.mini-footer { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 14px; border-top: 1px solid #c5a57680; border-radius: 0 0 9px 9px; background: #152b43; }
.footer-copy { flex-shrink: 0; margin: 0; color: #e6edf3; font-size: 10px; white-space: nowrap; }
.footer-copy bdi { color: #edd3a1; font-size: 10px; }
.footer-links { display: flex; align-items: center; justify-content: center; gap: 15px; min-width: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 30px; color: #e6edf3; font-size: 12px; white-space: nowrap; }
.footer-links a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.footer-phone { flex-shrink: 0; color: #edd3a1; font-size: 14px; white-space: nowrap; }
.gold-main.showing-detail { display: block; height: 100%; min-height: 0; overflow: hidden; }
.gold-main.showing-detail .product-detail-view.active { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 8px; }
body:has(.gold-lightbox.active) { overflow: hidden; }
body #ordersScreen { height: 100% !important; min-height: 0; overflow: hidden !important; }
body #ordersScreen .orders-side { width: 210px; height: 100%; min-height: 0; }
body #ordersScreen .orders-main { height: 100%; min-height: 0; overflow: hidden; }
body #ordersScreen .orders-list { min-height: 0; overflow-y: auto; }
@media (min-width: 1500px) {
    .gold-product-info { padding: 10px; gap: 7px; }
    .gold-product-name { font-size: 15px; }
    .gold-price strong { font-size: 22px; }
    .gold-product-meta > span { font-size: 11px; }
    .gold-add { min-height: 38px; font-size: 12px; }
    .gold-price-row { justify-content: space-between; padding-top: 5px; }
}
@media (min-width: 1600px) {
    .gold-products { --catalog-columns: 4; }
}
@media (min-width: 1600px) and (min-height: 980px) {
    .gold-products { --catalog-rows: 3; }
}
@media (max-width: 1199px) and (min-width: 761px) {
    #shopScreen { grid-template-columns: 200px minmax(0, 1fr); gap: 10px; }
    .gold-products { --catalog-columns: 2; --catalog-rows: 2; }
    .header-nav { gap: 15px; }
    .header-nav a { font-size: 12px; }
    .brand-text strong { font-size: 16px; }
    .gold-hero p { display: none; }
    .gold-hero h1 { font-size: 18px; }
    .gold-cats { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 28px; gap: 4px; }
    .gold-cat { min-height: 28px; padding: 3px; font-size: 12px; }
    .gold-cats:has(> .gold-cat:nth-child(11)) { grid-template-columns: repeat(6, minmax(0, 1fr)); max-height: 60px; overflow-y: auto; }
    .gold-collection-bar { gap: 8px; padding: 5px 8px; }
    .gold-collection-title { width: 50px; }
    .gold-collection-title h2 { font-size: 11px; }
    .gold-product-name { font-size: 14px; }
    .gold-price strong { font-size: 21px; }
    .footer-links { gap: 11px; }
}
@media (min-width: 761px) and (max-height: 700px) {
    .gold-products { --catalog-rows: 1; }
    .gold-side { padding: 10px; gap: 8px; }
    .gold-service-card p { display: none; }
    .gold-service-card { padding: 7px; }
    .gold-trust-grid { gap: 3px; }
    .gold-trust-item { min-height: 27px; }
    .gold-cart { min-height: 160px; }
    .gold-cart-lines { max-height: 55px; }
}
@media (max-width: 760px) {
    .page-shell { padding: 0; }
    .shop-frame { grid-template-rows: 60px minmax(0, 1fr) 76px; border-radius: 0; border: none; }
    .shop-frame:has(> .site-messages) { grid-template-rows: 60px auto minmax(0, 1fr) 76px; }
    .site-header { padding: 5px 12px; gap: 10px; border-radius: 0; }
    .brand { gap: 7px; }
    .brand-logo { width: 34px; height: 46px; font-size: 25px; }
    .brand-text strong { font-size: 15px; }
    .brand-text > span { font-size: 9px; }
    .brand-text bdi { font-size: 9px; letter-spacing: 1px; }
    .header-nav { display: none; }
    .header-actions { margin-right: auto; gap: 6px; }
    .header-link { height: 36px; min-height: 36px; padding: 7px 10px; font-size: 11px; }
    .user-trigger { height: 36px; min-height: 36px; width: 36px; padding: 0; }
    .user-name, .user-arrow { display: none; }
    .user-dropdown { width: min(265px, calc(100vw - 24px)); left: -62px; }
    #shopScreen { grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px minmax(0, 1fr); gap: 8px; padding: 8px; }
    .gold-side { display: block; min-height: 0; padding: 0; border: none; border-radius: 6px; background: transparent; box-shadow: none; }
    .gold-side > div:first-child { height: 100%; }
    .gold-brand, .gold-service-card, .gold-trust-grid, .gold-side-spacer, .gold-cart { display: none; }
    .gold-search { height: 44px; margin: 0; border-color: #b9cbd9; }
    .gold-search input { padding: 8px 12px; font-size: 12px; }
    .gold-search button { padding: 0 14px; font-size: 12px; }
    .gold-main { grid-template-rows: 56px 108px 36px minmax(0, 1fr) 44px; gap: 6px; }
    .gold-hero { padding: 6px 10px; gap: 6px; }
    .gold-hero > div { display: block; }
    .gold-hero h1 { font-size: 18px; line-height: 1.7; }
    .gold-hero p { display: none; }
    .gold-hero-badge > span { font-size: 14px; letter-spacing: 2px; }
    .gold-collection-bar { align-items: center; padding: 6px; gap: 0; }
    .gold-collection-title { display: none; }
    .gold-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 28px; align-content: center; gap: 4px; }
    .gold-cat { min-height: 28px; padding: 3px 2px; font-size: 12px; }
    .gold-cats:has(> .gold-cat:nth-child(11)) { grid-auto-rows: 28px; }
    .gold-cats:has(> .gold-cat:nth-child(11)) .gold-cat { min-height: 28px; padding: 3px 2px; font-size: 12px; }
    .gold-cats:has(> .gold-cat:nth-child(13)) { max-height: 94px; overflow-y: auto; }
    .gold-toolbar { gap: 6px; padding: 3px 7px; }
    .gold-toolbar > div { display: block; }
    .gold-toolbar h2 { font-size: 12px; line-height: 1.3; }
    .gold-toolbar p { font-size: 10px; line-height: 1.5; }
    .gold-sort { width: 146px; min-height: 28px; padding: 3px 5px; font-size: 10px; }
    .gold-products { --catalog-columns: 1; --catalog-rows: 2; gap: 8px; }
    .gold-product { display: grid; grid-template-columns: 38% minmax(0, 1fr); border-radius: 6px; }
    .gold-product-photo { height: auto; min-height: 0; max-height: none; border-left: 1px solid #d2dce5; border-bottom: 0; }
    .gold-product-image { padding: 7px; }
    .gold-product-info { padding: 8px; grid-template-rows: 42px 20px minmax(0, 1fr); gap: 4px; }
    .gold-product-name { font-size: 14px; }
    .gold-product-meta > span { font-size: 11px; }
    .gold-product-top { top: 33px; max-width: calc(38% - 14px); }
    .gold-product-badge { max-width: calc(38% - 14px); font-size: 11px; }
    .product-details-link { top: auto; left: auto; right: 7px; bottom: 7px; width: calc(38% - 51px); min-height: 30px; font-size: 10px; }
    .gold-product-preview { left: 7px; bottom: 7px; }
    .gold-eye-button { width: 30px; min-height: 30px; }
    .gold-price-row { gap: 5px; }
    .gold-price strong { font-size: 21px; }
    .gold-price > span { font-size: 11px; }
    .gold-price del { font-size: 11px; }
    .gold-add { min-height: 36px; font-size: 12px; }
    .gold-qty-control { min-height: 36px; }
    .qty-btn { min-height: 30px; min-width: 30px; }
    .qty-center { gap: 3px; }
    .gold-pager { padding: 5px 7px; }
    .gold-pager > button { min-width: 70px; min-height: 32px; }
    .gold-page-indicator { font-size: 10px; }
    .gold-empty-results { padding: 12px; gap: 7px; }
    .gold-empty-results strong { font-size: 16px; }
    .gold-empty-results p { font-size: 12px; }
    .mini-footer { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 32px 25px; gap: 3px 8px; padding: 6px 10px; border-radius: 0; }
    .footer-links { grid-column: 1 / -1; grid-row: 1; justify-content: space-between; gap: 5px; }
    .footer-links a { min-height: 30px; font-size: 11px; }
    .footer-copy { grid-row: 2; font-size: 9px; }
    .footer-copy span { display: none; }
    .footer-phone { grid-row: 2; font-size: 12px; justify-self: end; }
    .gold-lightbox { padding: 10px; }
    .premium-modal { grid-template-columns: 1fr; padding: 48px 18px 20px; max-height: calc(100dvh - 20px); border-radius: 10px; gap: 12px; }
    .premium-gallery-side { padding: 0; }
    .premium-image-shell { max-height: 38dvh; aspect-ratio: 1.4; }
    .premium-detail-side { padding: 0; }
    .premium-detail-side h2 { font-size: 21px; }
    .premium-price-card { margin: 14px 0; }
    .premium-price-card strong { font-size: 24px; }
    .premium-description { padding: 14px 0; }
    .detail-product-shell { grid-template-columns: 1fr; gap: 16px; }
    .detail-gallery { aspect-ratio: 1.35; max-height: 300px; }
    .detail-topbar { align-items: center; gap: 10px; margin-bottom: 16px; }
    .detail-title-mini > span { display: none; }
    .detail-info h2 { font-size: 23px; }
    body #ordersScreen.active { display: block !important; overflow-y: auto !important; }
    body #ordersScreen .orders-side, body #ordersScreen .orders-main { width: 100%; height: auto; overflow: visible; }
    body #ordersScreen .orders-list { overflow: visible; }
}
/* Keep readable controls when the address bar, keyboard or zoom leaves too little height. */
@media (min-width: 761px) and (max-height: 560px) {
    body { overflow: auto; }
    .page-shell { height: auto; min-height: 100dvh; }
    .shop-frame { height: 600px; min-height: 600px; }
    .gold-products { --catalog-rows: 1; }
}
@media (max-width: 760px) and (max-height: 820px) {
    body { overflow: auto; }
    .page-shell { height: auto; min-height: 100dvh; }
    .shop-frame { height: 820px; min-height: 820px; }
}
@media (max-width: 360px) {
    .brand-text strong { font-size: 13px; }
    .brand-text > span { display: none; }
    .header-link { padding: 7px 8px; font-size: 10px; }
    .gold-hero h1 { font-size: 16px; }
    .gold-hero-badge > span { font-size: 12px; }
    .gold-price strong { font-size: 20px; }
    .gold-product-name { font-size: 14px; }
    .gold-product-info { padding: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
    body { overflow: visible; }
    .page-shell, .shop-frame { height: auto; padding: 0; display: block; border: none; box-shadow: none; }
    .site-header, .gold-side, .mini-footer, .gold-collection-bar, .gold-toolbar, .gold-pager { display: none !important; }
    #shopScreen, .gold-main { display: block; height: auto; padding: 0; }
    .gold-products { grid-template-rows: auto; }
}