/* Storefront art direction from the September 2026 review. */
:root {
    --brand-gold: #c9982c;
    --brand-gray: #54595f;
    --brand-blue: #2596be;
    --brand-badge: #92bc5c;
    --brand-description: #a5a5a5;
    --brand-radius: 10px;
    --brand-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    --color-black: #303338;
    --color-dark: #54595f;
    --color-gray: #74797f;
    --color-light-gray: #e7e8ea;
    --color-cream: #f5f6f8;
    --color-beige: #f5f6f8;
    --color-sale: var(--brand-gold);
    --ozone-gold: var(--brand-gold);
    --font-sans: 'Google Sans', Arial, sans-serif;
    --font-display: var(--font-sans);
    --shadow-md: var(--brand-shadow);
}
body { color: var(--brand-gray); background: var(--color-cream); }
body *, body *::before, body *::after { letter-spacing: 0 !important; }
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 4px; }
.btn { border-radius: var(--brand-radius); text-transform: none; font-size: 14px; }
.btn-primary, .filter-apply-btn, .btn-add-cart { background: var(--brand-gold); border-color: var(--brand-gold); color: #fff; }
.btn-primary:hover, .filter-apply-btn:hover, .btn-add-cart:hover { background: #ac7d18; border-color: #ac7d18; color: #fff; }
.announcement-bar { background: #242424; padding: 7px 0; font-size: 11px; text-transform: none; }
.announcement-center { color: #ddd; }
.announcement-journal { margin-left: auto; }
.promotion-bar { padding: 9px 20px; background: var(--brand-gold); color: #fff; text-align: center; font-size: 13px; }
.site-header { background: #fff; border-color: #e7e8ea; box-shadow: 0 4px 16px rgba(0,0,0,.04); backdrop-filter: none; }
.header-inner { height: 78px; }
.main-nav .nav-list { gap: 22px; }
.main-nav .nav-list > li > a, .nav-link-dropdown { color: var(--brand-gray); font-size: 12px; text-transform: none; }
.header-icon:hover { color: var(--brand-gold); background: #f5f6f8; }
.header-actions .icon-badge { background: var(--brand-gold); color: #fff; border-color: #fff; }
.header-actions .icon-badge:empty { display: none; }
.ozone-mega-intro { background: #54595f; }
.ozone-mega-kicker, .ozone-mega-intro a:hover { color: #f3d88f; }
.ozone-mega-intro p { color: #e1e3e5; }
.ozone-mega-feature { background: #f1f3f5; }
.ozone-hero h1 { font-size: 66px; }
.ozone-hero-orbit, .hero-visual-glow { display: none; }
.section-title { font-size: 34px; color: var(--brand-gray); }
.section { padding: 64px 0; }
.page-header { padding: 36px 0 28px; background: #f5f6f8; border-color: #e7e8ea; }
.page-header h1 { color: var(--brand-gray); font-size: 36px; }
.page-content { padding-top: 34px; }
.products-grid { gap: 18px; }
.product-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #e7e8ea; border-radius: var(--brand-radius); background: #fff; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.product-card:hover { border-color: #d9dce0; box-shadow: var(--brand-shadow); }
.product-card-image { background: #fff; aspect-ratio: 1; }
.product-card-image > a { display: block; width: 100%; height: 100%; }
.product-card-image img { padding: 22px; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; }
.product-card-info { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 18px; }
.product-card .product-name { order: -1; margin: 0 0 7px; min-height: 42px; font-size: 14px; font-weight: 500; color: #34373b; }
.product-card .product-brand { color: var(--brand-description); font-size: 11px; text-transform: none; }
.product-card .product-price { margin-top: auto; padding-top: 12px; }
.product-price .price, .product-price .price-sale { color: var(--brand-gold); }
.product-price .price-old { color: var(--brand-description); font-size: 12px; }
.badge { border-radius: 20px; background: var(--brand-badge); color: #243411; font-size: 10px; padding: 3px 8px; }
.badge-new, .badge-sale, .badge-bestseller { background: var(--brand-badge); color: #243411; }
.product-card .wishlist-btn { opacity: 1; transform: none; background: #fff; color: #777; }
.product-card .wishlist-btn.active { color: #b44051; }
.product-card .badge ~ .badge { display: none; }
.btn-add-cart { font-size: 12px; text-transform: none; }
.shop-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 26px; }
.shop-sidebar { top: 100px; }
.shop-sidebar .filter-panel { border: 1px solid #e7e8ea; border-radius: var(--brand-radius); box-shadow: var(--brand-shadow); }
.filter-panel-head { padding: 22px 20px; background: #fff; color: var(--brand-gray); border-bottom: 1px solid #eee; }
.filter-panel-head h2 { color: var(--brand-gray); font-size: 18px; }
.filter-panel-kicker { color: var(--brand-gold); font-size: 10px; }
.filter-group { padding: 20px; border-color: #eee; }
.filter-group h3, .filter-list li label { color: var(--brand-gray); text-transform: none; font-size: 13px; }
.filter-list input[type=radio]:checked { border-color: var(--brand-gold); background: var(--brand-gold); }
.filter-list label:has(input:checked) { color: var(--brand-gray); }
.filter-search, .price-range input, .sort-select { background: #fff; border-color: #e7e8ea; border-radius: 6px; font-size: 12px; }
.filter-reset-link, .filter-expand-btn { color: #686e74; }
.filter-apply-btn { min-height: 42px; font-size: 12px; }
.shop-toolbar { border: 0; margin-bottom: 18px; }
.shop-count { text-transform: none; color: var(--brand-gray); font-size: 13px; }
.product-detail { gap: 28px; align-items: stretch; }
.product-gallery, .product-info-detail { position: relative; min-width: 0; background: #fff; border-radius: var(--brand-radius); box-shadow: var(--brand-shadow); padding: 30px; }
.product-gallery-sale { position: absolute; top: 20px; right: 20px; left: auto; z-index: 1; }
.product-tax-note { color: #74797f; font-size: 12px; margin: 4px 0 20px; }
.product-delivery { padding: 18px 0; border-bottom: 1px solid #e7e8ea; font-size: 12px; line-height: 1.6; }
.product-highlights { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.product-highlights li { position: relative; padding-left: 23px; font-size: 13px; line-height: 1.7; }
.product-highlights li::before { content: '\2713'; position: absolute; left: 0; color: var(--brand-gold); }
.product-gallery-main { background: #fff; aspect-ratio: 1; max-height: 480px; margin-bottom: 20px; }
.product-gallery-main img { width: 100%; height: 100%; max-height: 480px; object-fit: contain; mix-blend-mode: normal; }
.product-gallery-thumbs { gap: 12px; flex-wrap: wrap; }
.gallery-thumb { width: 86px; height: 86px; border: 1px solid #e7e8ea; border-radius: 6px; background: #fff; }
.gallery-thumb img { object-fit: contain; }
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--brand-gold); }
.product-info-detail .product-title { color: var(--brand-gray); font-size: 28px; font-weight: 500; overflow-wrap: anywhere; }
.product-info-detail .product-brand { color: var(--brand-gold); font-size: 11px; margin-bottom: 12px; }
.product-short-description { padding: 0; margin: 0 0 24px; border: 0; background: none; color: #81868b; font-size: 14px; line-height: 1.7; }
.product-short-description.product-html-content { color: var(--brand-description); }
.product-info-detail .product-price { margin-top: 0; margin-bottom: 6px; }
.product-info-detail .price-old { order: -1; }
.product-info-detail .price, .product-info-detail .price-sale { font-size: 30px; }
.product-purchase-controls { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; border-top: 1px solid #eee; padding-top: 20px; }
.quantity-selector { border-radius: 8px; overflow: hidden; }
.product-purchase-controls .quantity-selector { width: 116px; }
.product-purchase-controls .qty-btn { width: 34px; border-color: #e7e8ea; }
.product-purchase-controls .qty-input { width: 48px; border-color: #e7e8ea; }
.product-purchase-controls .product-actions { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; }
.product-purchase-controls .product-actions .btn { min-width: 0; padding: 12px; white-space: normal; }
.product-purchase-controls .product-wishlist-btn { flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid #e7e8ea; border-radius: 8px; }
.product-actions .btn-primary { min-height: 48px; }
.product-assurance { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 20px; border: 0; border-top: 1px solid #eee; background: transparent; }
.product-assurance span { justify-content: flex-start; min-height: 0; padding: 0; background: transparent; color: #7b8085; font-size: 12px; text-align: left; }
.product-assurance i { background: #fbf5e8; color: var(--brand-gold); }
.product-details-link { display: inline-block; margin-top: 20px; color: #a87b19; font-size: 13px; }
.product-content-section { margin-top: 48px; border-color: #e7e8ea; background: transparent; }
.product-content-section .tab-buttons { background: #f0f1f3; border-color: #e7e8ea; }
.product-content-section .tab-btn { color: var(--brand-gray); font-size: 13px; text-transform: none; }
.product-content-section .tab-btn.active { color: var(--brand-gray); }
.product-tabs .tab-panel { display: block; background: #fff; scroll-margin-top: 100px; }
.product-tabs.tabs-enhanced .tab-panel:not(.active) { display: none; }
.product-editorial, .product-html-content { color: var(--brand-gray); }
.product-editorial-lead { font-size: 25px; color: var(--brand-gray); }
.product-editorial h2 { color: var(--brand-gray); font-size: 22px; }
.product-benefit-list li, .product-note { background: #f6f7f8; border-color: #e7e8ea; color: var(--brand-gray); }
.product-benefit-list li::before { background: var(--brand-badge); }
.routine-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid #e3e5e8; }
.routine-section h2 { font-size: 26px; font-weight: 500; margin-bottom: 24px; }
.routine-form { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
.routine-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.routine-item { position: relative; padding: 18px; min-width: 0; background: #fff; border: 1px solid #e7e8ea; border-radius: var(--brand-radius); }
.routine-item:has(input:checked) { border-color: var(--brand-gold); }
.routine-item label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; }
.routine-item input { margin-top: 4px; accent-color: var(--brand-gold); }
.routine-item img { width: 100%; height: 180px; object-fit: contain; margin-bottom: 16px; }
.routine-item .price { display: block; color: #a87b19; margin-top: 12px; }
.routine-item select { width: 100%; margin-top: 12px; padding: 8px; border: 1px solid #ddd; border-radius: 6px; }
.routine-summary { align-self: start; padding: 22px 0; }
.routine-total { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.routine-total output { font-size: 23px; color: #a87b19; }
.routine-summary .btn { width: 100%; background: var(--brand-blue); border-color: var(--brand-blue); white-space: normal; }
.routine-status { margin-top: 12px; font-size: 13px; }
.editorial-section { padding: 64px 0; border-top: 1px solid #e7e8ea; }
.editorial-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 32px; }
.editorial-section h2 { margin-bottom: 22px; font-size: 26px; font-weight: 500; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.video-card { min-width: 0; }
.video-poster { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #242424; border-radius: var(--brand-radius); }
.video-poster img { width: 100%; height: 100%; object-fit: cover; }
.video-poster span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 46px; height: 34px; background: #d52328; border-radius: 8px; color: #fff; }
.video-card h3 { font-size: 13px; font-weight: 500; margin-top: 12px; }
.video-player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--brand-radius); background: #242424; }
.video-fallback { display: inline-block; margin-top: 8px; font-size: 12px; color: #73777c; }
.journal-article { max-width: 780px; margin: 0 auto; padding: 0 0 40px; background: transparent; box-shadow: none; }
.journal-article-image { width: 100%; height: 340px; object-fit: contain; background: #fff; margin-bottom: 30px; }
.journal-article h2 { font-size: 23px; margin: 28px 0 14px; }
.journal-article p { line-height: 1.8; }
.journal-back { display: inline-block; margin-top: 28px; color: #a87b19; }
.journal-item { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 16px; padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid #e2e4e7; }
.journal-item img { width: 86px; height: 86px; object-fit: contain; background: #fff; border-radius: 6px; }
.journal-item h3 { font-size: 15px; font-weight: 500; line-height: 1.4; }
.journal-item span { display: block; margin-top: 10px; color: #a87b19; font-size: 12px; }
.site-footer { background: #242424; color: #fff; }
.footer-lead { padding: 36px 0; border-color: #454545; }
.footer-lead h2 { font-size: 26px; }
.site-footer .section-label { color: #e7c77c; }
.footer-grid { padding: 36px 0; gap: 30px; }
.footer-brand p, .footer-links li, .footer-links a { color: #c7c7c7; font-size: 12px; }
.footer-links h4 { color: #fff; font-size: 13px; text-transform: none; }
.footer-links a:hover { color: #e7c77c; }
.footer-bottom { border-color: #454545; color: #b9b9b9; }
.back-to-top { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #54595f; font-size: 20px; }
.newsletter-form input { min-width: 0; }
.footer-lead .newsletter-form button { background: var(--brand-gold); color: #fff; }
@media (min-width: 769px) {
    .site-header .has-dropdown { position: static; }
    .site-header .dropdown-ozone-mega { display: none; position: absolute; top: 100%; left: 50%; }
    .site-header .has-dropdown:hover .dropdown-ozone-mega,
    .site-header .has-dropdown:focus-within .dropdown-ozone-mega { display: block; opacity: 1; visibility: visible; transform: translateX(-50%); }
}
@media (min-width: 1200px) {
    .shop-main .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .editorial-layout { grid-template-columns: 1fr; }
    .journal-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .routine-form { grid-template-columns: 1fr; }
    .routine-summary { max-width: 420px; width: 100%; justify-self: end; }
}
@media (max-width: 768px) {
    .header-inner { height: 68px; }
    .announcement-center, .announcement-journal { display: none; }
    .ozone-hero h1 { font-size: 48px; }
    .section-title, .page-header h1 { font-size: 28px; }
    .section, .editorial-section { padding: 42px 0; }
    .shop-layout { grid-template-columns: 1fr; gap: 0; }
    .shop-sidebar { top: 0; }
    .shop-sidebar .filter-panel { border-radius: 0; }
    .product-detail { gap: 20px; }
    .product-gallery, .product-info-detail { padding: 20px; }
    .product-info-detail .product-title { font-size: 24px; }
    .product-purchase-controls { grid-template-columns: 1fr; }
    .product-purchase-controls .product-actions .btn { flex: 1; }
    .product-card-info { padding: 10px 12px 14px; }
    .product-card .product-name { font-size: 13px; }
    .product-card-image img { padding: 12px; }
    .products-grid { gap: 12px; }
    .routine-items { grid-template-columns: 1fr; }
    .routine-item { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; }
    .routine-item > a { grid-row: span 3; }
    .routine-item img { height: 120px; margin: 0; }
    .routine-item .price, .routine-item select { margin: 0; }
    .video-grid { grid-template-columns: 1fr; gap: 24px; }
    .journal-list { grid-template-columns: 1fr; gap: 0; }
    .footer-lead h2 { font-size: 24px; }
    .footer-brand .ozone-logo { position: static; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
