.shop-page { color: #172033; font-family: 'Open Sans', sans-serif; font-size: 1rem; padding-bottom: 3rem; }
.shop-page-header { text-align: center; background: transparent; padding: 1.5rem 0 2rem; }
.shop-page-header h1 { color: inherit; margin: .5rem 0; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.3; overflow-wrap: anywhere; }
.shop-page-header p { margin: .5rem 0; color: #66758a; }
.shop-page a { color: #1670cc; }
.shop-page a:focus-visible, .shop-page button:focus-visible, .shop-page select:focus-visible, .shop-page input:focus-visible { outline: 2px solid #1670cc; outline-offset: 3px; }
.shop-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.shop-filters label { flex: 1 1 220px; }
.shop-size-filter { flex: 1 0 100%; order: 1; min-width: 0; padding: 0; margin: .25rem 0 0; border: 0; }
.shop-size-filter legend { padding: 0; margin-bottom: .65rem; font-size: .95rem; color: inherit; }
.shop-size-options { display: flex; flex-wrap: wrap; gap: .6rem; }
.shop-page .shop-size-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; min-height: 2.75rem; max-width: 100%; padding: .55rem .9rem; border: 1px solid #dbe2eb; border-radius: .75rem; background: #fff; color: #172033; font: inherit; font-size: 1rem; line-height: 1.4; cursor: pointer; overflow-wrap: anywhere; transition: background-color .15s, border-color .15s; }
.shop-page .shop-size-chip:hover:not(:disabled) { background: #edf5ff; border-color: #1670cc; }
.shop-page .shop-size-chip:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.shop-page .shop-size-chip[aria-pressed=true] { background: #1670cc; border-color: #1670cc; color: #fff; font-weight: 600; }
body.dark .shop-page .shop-size-chip { background: #29323d; color: #e4eaf2; border-color: #53647a; }
body.dark .shop-page .shop-size-chip:hover:not(:disabled) { background: #364457; border-color: #85bcff; }
body.dark .shop-page .shop-size-chip[aria-pressed=true] { background: #2d4663; border-color: #85bcff; color: #e4eaf2; }
.shop-page label { display: block; color: inherit; font-size: .95rem; }
.shop-page input[type=search], .shop-page select { box-sizing: border-box; display: block; width: 100%; height: 3rem; margin: .4rem 0 0; padding: .65rem .8rem; border: 1px solid #cbd5e1; border-radius: .75rem; background: #fff; color: inherit; font-family: inherit; font-size: 1rem; }
.shop-page .shop-action { min-height: 3rem; padding: .65rem 1rem; border: 0; border-radius: .75rem; background: #1670cc; color: #fff; font-family: inherit; font-size: 1rem; cursor: pointer; }
.shop-page .shop-action:hover { background: #125cac; }
.shop-page a.shop-action { display: inline-flex; align-items: center; color: #fff; text-align: center; }
.shop-page .shop-action:disabled { opacity: .6; cursor: default; }
.shop-purchase-nav { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; }
.shop-nav-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.shop-user-menu { position: relative; font-size: .95rem; }
.shop-user-menu summary { display: flex; align-items: center; gap: .5rem; color: #1670cc; cursor: pointer; list-style: none; }
.shop-user-menu summary::-webkit-details-marker { display: none; }
.shop-user-menu summary .fa-chevron-down { font-size: .8rem; }
.shop-user-menu > div { position: absolute; right: 0; top: calc(100% + .7rem); z-index: 30; min-width: 15rem; padding: .5rem; background: #fff; border-radius: .85rem; box-shadow: 0 8px 28px #17203326; }
.shop-user-menu > div > a { display: flex; align-items: center; gap: .65rem; padding: .75rem; border-radius: .5rem; white-space: nowrap; }
.shop-user-menu > div > a:hover, .shop-user-menu > div > a:focus-visible { background: #edf5ff; }
.shop-user-menu summary:focus-visible { outline: 2px solid #1670cc; outline-offset: 3px; }
body.dark .shop-user-menu summary { color: #85bcff; }
body.dark .shop-user-menu > div { background: #29323d; }
body.dark .shop-user-menu > div > a:hover, body.dark .shop-user-menu > div > a:focus-visible { background: #364457; }
@media (max-width: 520px) { .shop-purchase-nav { flex-wrap: wrap; } .shop-nav-actions { gap: 1rem; } }
.shop-page input[type=number], .shop-checkout-form input:not([type=hidden]), .shop-native-lookup input, .shop-checkout-form textarea { box-sizing: border-box; width: 100%; height: auto; min-height: 3rem; margin: .4rem 0 0; padding: .65rem .8rem; border: 1px solid #cbd5e1; border-radius: .75rem; background: #fff; color: inherit; font-family: inherit; font-size: 1rem; }
.shop-buy-form { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.shop-buy-form label { max-width: 8rem; }
.shop-purchase-error { color: #922626; line-height: 1.6; }
.shop-cart-item { display: flex; align-items: start; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid #dbe2eb; }
.shop-cart-item > a { flex: 0 0 6rem; }
.shop-cart-item img { width: 6rem; height: 6rem; object-fit: contain; border-radius: .75rem; }
.shop-cart-item-info { flex: 1; }
.shop-cart-item h2 { font-size: 1.15rem; margin: 0 0 .5rem; line-height: 1.5; }
.shop-cart-item-actions { min-width: 13rem; }
.shop-cart-item-actions .shop-buy-form { margin: 0 0 .5rem; }
.shop-cart-item-actions strong { display: block; margin-top: .75rem; }
.shop-text-button { padding: .25rem 0; background: transparent; border: 0; color: #1670cc; font-family: inherit; font-size: .95rem; cursor: pointer; }
.shop-cart-total { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; font-size: 1.15rem; }
.shop-unpaid-orders { margin-bottom: 2rem; }
.shop-unpaid-orders h2 { margin: 0 0 .75rem; font-size: 1.25rem; line-height: 1.5; color: inherit; }
.shop-unpaid-order { padding: 1.25rem 0; border-bottom: 1px solid #dbe2eb; }
.shop-unpaid-order-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.shop-unpaid-order-head h3 { margin: 0; font-size: 1.1rem; line-height: 1.5; }
.shop-unpaid-item { display: flex; align-items: center; gap: .85rem; margin: 1rem 0; }
.shop-unpaid-item img { width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: .6rem; }
body.dark .shop-unpaid-order { border-color: #53647a; }
.shop-checkout-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 3rem; }
.shop-checkout-form, .shop-native-lookup { display: grid; gap: 1rem; }
.shop-checkout-form h2 { font-size: 1.4rem; margin: 1.25rem 0 0; }
.shop-checkout-form textarea { resize: vertical; }
.shop-checkout-form .shop-secondary { margin: 0; }
.shop-checkout-address-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.shop-checkout-summary h2 { font-size: 1.4rem; margin-top: 0; }
.shop-checkout-layout h2, .shop-cart-item h2 { color: inherit; }
.shop-summary-item { display: flex; justify-content: space-between; align-items: start; gap: 1rem; border-bottom: 1px solid #dbe2eb; padding: 1rem 0; line-height: 1.6; }
.shop-summary-item strong { white-space: nowrap; }
.shop-delivery-rule { line-height: 1.6; margin: 0; }
body.dark .shop-page input[type=number], body.dark .shop-checkout-form input:not([type=hidden]), body.dark .shop-native-lookup input, body.dark .shop-checkout-form textarea { background: #29323d; border-color: #53647a; color: #e4eaf2; }
body.dark .shop-checkout-form input::placeholder { color: #aebed1; opacity: 1; }
body.dark .shop-cart-item, body.dark .shop-summary-item { border-color: #53647a; }
body.dark .shop-purchase-error { color: #ffb9b9; }
body.dark .shop-text-button { color: #85bcff; }
body.dark .shop-page a.shop-action { color: #fff; }
@media (max-width: 760px) { .shop-checkout-layout { grid-template-columns: 1fr; gap: 2rem; } .shop-cart-item { flex-wrap: wrap; } .shop-cart-item-actions { flex-basis: 100%; } .shop-cart-item-info { min-width: 12rem; } }
.shop-page .shop-secondary { color: #66758a; font-size: .95rem; line-height: 1.5; margin: .65rem 0; }
.shop-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.shop-product { min-width: 0; padding-bottom: 1rem; border-bottom: 1px solid #dbe2eb; }
.shop-product-image { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 1rem; background: #f3f6fa; }
.shop-product-image img { width: 100%; height: 100%; object-fit: contain; }
.shop-product h2 { margin: .65rem 0; font-size: 1.15rem; line-height: 1.5; }
.shop-product h2 a { color: inherit; }
.shop-list-price { font-weight: 700; font-size: 1.15rem; margin: .65rem 0; }
.shop-photo-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; color: #66758a; background: #f3f6fa; border-radius: 1rem; font-size: 1rem; }
.shop-empty { text-align: center; padding: 2rem 0; line-height: 1.7; }
.shop-pagination { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.shop-product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 2.5rem; }
.shop-gallery-main { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 1rem; background: #f3f6fa; }
.shop-gallery-stage { position: relative; }
.shop-gallery-open { display: block; width: 100%; padding: 0; border: 0; border-radius: 1rem; background: transparent; cursor: zoom-in; }
.shop-gallery-open:disabled { cursor: default; }
.shop-page [hidden] { display: none !important; }
.shop-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: #ffffffed; color: #172033; box-shadow: 0 2px 12px #17203326; font-size: 2rem; line-height: 1; cursor: pointer; }
.shop-gallery-arrow.is-prev { left: .75rem; }
.shop-gallery-arrow.is-next { right: .75rem; }
.shop-gallery-count { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); border-radius: 1rem; padding: .25rem .65rem; background: #ffffffed; color: #172033; font-size: .95rem; font-variant-numeric: tabular-nums; pointer-events: none; }
.shop-page [data-shop-swipe] { touch-action: pan-y pinch-zoom; }
.shop-photo-dialog { box-sizing: border-box; width: min(1100px, 96vw); max-width: 96vw; max-height: 94vh; max-height: 94dvh; margin: auto; padding: 3.5rem .5rem .5rem; border: 0; border-radius: 1rem; background: #fff; color: #172033; }
.shop-photo-dialog::backdrop { background: rgba(23, 32, 51, .8); }
.shop-photo-close { position: absolute; top: .5rem; right: .75rem; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: #edf3fa; color: #172033; font-size: 2rem; line-height: 1; cursor: pointer; }
.shop-photo-stage { position: relative; }
.shop-photo-stage > img { display: block; width: 100%; height: min(78vh, 900px); height: min(78dvh, 900px); object-fit: contain; }
body.dark .shop-photo-dialog { background: #222b36; color: #e4eaf2; }
body.dark .shop-gallery-arrow, body.dark .shop-gallery-count, body.dark .shop-photo-close { background: #29323df2; color: #e4eaf2; }
.shop-gallery-thumbnails { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.shop-gallery-thumbnails a { display: block; width: 4.5rem; height: 4.5rem; border-radius: .5rem; overflow: hidden; }
.shop-gallery-thumbnails a[aria-current=true] { outline: 2px solid #1670cc; outline-offset: 2px; }
.shop-gallery-thumbnails img { width: 100%; height: 100%; object-fit: contain; background: #f3f6fa; }
.shop-product-price { font-size: 1.8rem; font-weight: 700; margin: .5rem 0; }
.shop-availability { margin: .5rem 0 1.5rem; font-size: 1rem; }
.shop-variant-picker { display: grid; gap: .5rem; margin: 1.5rem 0; }
.shop-variant-picker fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.shop-variant-picker legend { padding: 0; margin-bottom: .65rem; font-size: .95rem; color: inherit; }
.shop-description { margin-top: 2rem; font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
.shop-description h2 { font-size: 1.5rem; line-height: 1.4; margin: 1.5rem 0 .75rem; color: inherit; }
.shop-description h3 { font-size: 1.2rem; line-height: 1.4; margin: 1.25rem 0 .65rem; color: inherit; }
.shop-description p { margin: .75rem 0; }
.shop-description ul, .shop-description ol { padding-left: 1.5rem; margin: .75rem 0; }
.shop-description ul, .shop-description ul li { list-style-type: disc; }
.shop-description ol, .shop-description ol li { list-style-type: decimal; }
.shop-description li { margin: .4rem 0; }
body.dark .shop-page { color: #e4eaf2; color-scheme: dark; }
body.dark .shop-page-header { background: transparent; }
body.dark .shop-page-header h1,
body.dark .shop-product h2,
body.dark .shop-page label,
body.dark .shop-product-price,
body.dark .shop-list-price,
body.dark .shop-availability,
body.dark .shop-description,
body.dark .shop-description h2,
body.dark .shop-description h3 { color: #e4eaf2; }
body.dark .shop-page .shop-secondary, body.dark .shop-page-header p, body.dark .shop-photo-placeholder { color: #aebed1; }
body.dark .shop-page a { color: #85bcff; }
body.dark .shop-product h2 a { color: #e4eaf2; }
body.dark .shop-page input[type=search], body.dark .shop-page select { background: #29323d; border-color: #53647a; color: #e4eaf2; }
body.dark .shop-page input[type=search]::placeholder { color: #aebed1; opacity: 1; }
body.dark .shop-product-image, body.dark .shop-gallery-main, body.dark .shop-gallery-thumbnails img, body.dark .shop-photo-placeholder { background: #222b36; }
body.dark .shop-product { border-color: #53647a; }
body.dark .shop-page a:focus-visible, body.dark .shop-page button:focus-visible, body.dark .shop-page select:focus-visible, body.dark .shop-page input:focus-visible, body.dark .shop-gallery-thumbnails a[aria-current=true] { outline-color: #85bcff; }
@media (max-width: 1000px) { .shop-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-product-layout { gap: 1.5rem; } }
@media (max-width: 640px) { .shop-products { grid-template-columns: 1fr; } .shop-product-layout { grid-template-columns: 1fr; } .shop-filters label { flex-basis: 100%; } .shop-page-header { padding-top: 1rem; } }