:root {
  --store-surface: #f7f8f4;
  --store-ink: #17211e;
  --store-muted: #66716d;
  --store-line: #d8dfd9;
  --store-accent: #d6603b;
  --store-accent-dark: #aa462c;
  --store-soft: #e3eee7;
  --store-radius: 18px;
}

:root[data-theme="dark"] {
  --store-surface: #121916;
  --store-ink: #edf3ee;
  --store-muted: #b3c0b8;
  --store-line: #344039;
  --store-accent: #f08b67;
  --store-accent-dark: #ffad8c;
  --store-soft: #1d3028;
}

html { scroll-behavior: smooth; }
.storefront {
  background: var(--store-surface);
  color: var(--store-ink);
  font-family: var(--font-sans);
}
.storefront h1, .storefront h2, .storefront h3, .storefront p { margin-top: 0; }
.storefront .button { border-radius: 999px; font-weight: 800; }
.storefront .primary { background: var(--store-accent); color: #fff; }
.storefront .primary:hover { background: var(--store-accent-dark); }
.storefront .ghost { background: transparent; border: 1px solid var(--store-line); color: var(--store-ink); }
.store-notice { background: var(--store-ink); color: var(--store-surface); padding: 9px 20px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .02em; }

.storefront-header {
  width: min(1380px, calc(100% - 48px));
  max-width: none;
  min-height: 76px;
  padding: 12px 0;
  align-items: center;
}
.store-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--store-ink); font-weight: 850; text-decoration: none; letter-spacing: -.035em; font-size: 18px; white-space: nowrap; }
.store-brand small { display: block; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--store-muted); }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--store-accent); color: #fff; font-size: 15px; }
.store-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; margin-right: 28px; }
.store-nav a, .footer-links a { color: var(--store-muted); font-size: 14px; font-weight: 700; text-decoration: none; }
.store-nav a:hover, .footer-links a:hover, .text-link:hover { color: var(--store-accent-dark); }
.store-nav .customer-account-link { min-height: 38px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--store-accent-dark) 28%, transparent); border-radius: 999px; color: var(--store-accent-dark); background: color-mix(in srgb, var(--store-accent) 9%, transparent); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.store-nav .customer-account-link:hover { border-color: color-mix(in srgb, var(--store-accent-dark) 52%, transparent); background: color-mix(in srgb, var(--store-accent) 16%, transparent); }
.store-nav .customer-account-link:active { transform: translateY(1px); }
.store-nav .customer-account-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--store-accent) 35%, transparent); outline-offset: 3px; }
.storefront .topbar-actions { gap: 8px; }
.cart-button { border: 1px solid var(--store-ink); background: var(--store-ink); color: var(--store-surface); border-radius: 999px; min-height: 42px; padding: 0 16px; cursor: pointer; font-size: 14px; font-weight: 800; white-space: nowrap; }
.cart-button span { display: inline-grid; min-width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--store-accent); color: #fff; font-size: 11px; }
.storefront .ui-preferences { box-shadow: none; padding: 3px; }
.storefront .ui-pref-button { min-height: 30px; padding: 0 9px; }

.storefront main { max-width: 1440px; padding: 0 24px 56px; }
.commerce-hero { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 580px; overflow: hidden; background: #dfe8e2; border-radius: var(--store-radius); }
.hero-copy { align-self: center; padding: 64px clamp(26px, 4vw, 64px); }
.eyebrow { color: var(--store-accent-dark); font-size: 11px; letter-spacing: .14em; font-weight: 850; margin-bottom: 16px; }
.hero-copy h1 { max-width: 560px; color: var(--store-ink); font-size: clamp(42px, 4.2vw, 60px); letter-spacing: -.075em; line-height: 1.03; margin-bottom: 22px; }
.hero-copy > p:not(.eyebrow) { max-width: 430px; color: var(--store-muted); font-size: 17px; line-height: 1.7; margin-bottom: 28px; }
.hero-actions { display: flex; align-items: center; gap: 22px; }
.hero-actions .button { padding: 14px 21px; }
.text-link { color: var(--store-ink); font-size: 14px; font-weight: 800; text-decoration: underline; text-decoration-color: var(--store-accent); text-underline-offset: 5px; }
.hero-media { min-height: 580px; margin: 0; overflow: hidden; }
.hero-media img, .living-story img { display: block; width: 100%; height: 100%; object-fit: cover; }

.service-strip { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; padding: 20px 4px 62px; }
.service-strip div { display: flex; flex-direction: column; gap: 3px; padding: 0 20px; border-left: 1px solid var(--store-line); }
.service-strip div:first-child { border-left: 0; }
.service-strip strong { font-size: 14px; }
.service-strip div:first-child strong { font-size: 16px; }
.service-strip span { color: var(--store-muted); font-size: 13px; }

.shop-intro { display: grid; grid-template-columns: 1fr .65fr; align-items: end; gap: 46px; padding: 0 4px 30px; }
.shop-intro h2, .living-copy h2, .assurance h2 { font-size: clamp(30px, 3.2vw, 48px); letter-spacing: -.055em; line-height: 1.07; margin: 0; }
.shop-intro > p, .living-copy > p, .assurance-copy p { max-width: 390px; color: var(--store-muted); font-size: 15px; line-height: 1.72; margin: 0 0 3px; }
.category-section { margin-bottom: 22px; }
.category-rail { display: flex; overflow-x: auto; gap: 10px; padding: 2px 0 8px; scrollbar-width: thin; }
.category-chip { flex: 0 0 auto; min-height: 42px; padding: 0 16px; border: 1px solid var(--store-line); border-radius: 999px; background: transparent; color: var(--store-ink); cursor: pointer; font-size: 13px; font-weight: 750; }
.category-chip[aria-pressed="true"] { background: var(--store-ink); color: var(--store-surface); border-color: var(--store-ink); }

.catalog-shell { padding: 32px; border: 1px solid var(--store-line); border-radius: var(--store-radius); background: var(--paper); }
.catalog-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 28px; }
.catalog-toolbar h2 { font-size: 24px; letter-spacing: -.04em; margin: 0 0 6px; }
.catalog-toolbar p { color: var(--store-muted); font-size: 13px; margin: 0; }
.result-count { color: var(--store-accent-dark); }
.catalog-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.store-search, .store-select { min-height: 42px; border: 1px solid var(--store-line); border-radius: 10px; background: var(--input); color: var(--store-ink); padding: 0 12px; font-size: 13px; outline: none; }
.store-search { width: 190px; }
.store-select { min-width: 124px; cursor: pointer; }
.store-search:focus, .store-select:focus { border-color: var(--store-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--store-accent) 18%, transparent); }
.clear-filters { min-height: 42px; padding: 0 13px; font-size: 13px; }

.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.product-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 0; border-radius: 14px; background: transparent; box-shadow: none; }
.product-card:hover { transform: translateY(-3px); box-shadow: none; }
.product-image { height: 245px; border-radius: 14px; background-color: var(--store-soft); background-position: center; background-size: cover; }
.product-body { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "meta price" "origin origin" "title title" "notes notes" "actions actions"; gap: 7px 10px; padding: 14px 2px 4px; }
.product-body h3 { grid-area: title; margin: 0; color: var(--store-ink); font-size: 16px; line-height: 1.35; }
.product-cat { grid-area: meta; color: var(--store-muted); font-size: 11px; }
.product-origin { grid-area: origin; color: #7b3e25; font-size: 11px; font-weight: 750; }
.product-price { grid-area: price; color: var(--store-ink); font-size: 17px; font-weight: 850; }
.product-tags { display: none; }
.product-notes { grid-area: notes; min-height: 34px; color: var(--store-muted); font-size: 12px; line-height: 1.45; margin: 0; }
.product-actions { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 3px; }
.product-actions .button { min-height: 38px; padding: 0 9px; font-size: 12px; }
.product-skeleton { pointer-events: none; }
.store-skeleton-image, .store-skeleton-line { display: block; border-radius: 10px; background: linear-gradient(90deg, var(--store-soft) 20%, var(--paper) 50%, var(--store-soft) 80%); background-size: 240% 100%; animation: storeSkeletonSweep 1.35s ease-in-out infinite; }
.store-skeleton-image { height: 245px; }
.store-skeleton-line { height: 11px; width: 100%; }
.store-skeleton-title { width: 74%; height: 18px; }.store-skeleton-short { width: 45%; }.store-skeleton-price { width: 38%; height: 22px; margin-top: 10px; }
@keyframes storeSkeletonSweep { from { background-position: 100% 0; } to { background-position: -140% 0; } }
.store-empty-content { display: grid; justify-items: center; gap: 8px; padding: 52px 12px; text-align: center; }.store-empty-content strong { font-size: 18px; }.store-empty-content p { max-width: 460px; margin: 0; color: var(--store-muted); }

.living-story { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(32px, 6vw, 84px); align-items: center; padding: 96px clamp(8px, 5vw, 72px); }
.living-story figure { height: 440px; margin: 0; overflow: hidden; border-radius: var(--store-radius); }.living-copy > p { margin: 22px 0 28px; }
.assurance { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; padding: 42px; border-radius: var(--store-radius); background: var(--store-soft); }
.assurance-copy p { margin-top: 17px; }.assurance-list { display: grid; grid-template-columns: 1fr 1.1fr .9fr; gap: 18px; }.assurance-list article { padding-left: 14px; border-left: 2px solid var(--store-accent); }.assurance-list article:nth-child(2) { margin-top: 22px; }.assurance-list strong { font-size: 14px; }.assurance-list p { color: var(--store-muted); font-size: 12px; line-height: 1.55; margin: 9px 0 0; }

.detail-shell { margin-top: 20px; }.detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }.detail-image { height: 400px; border-radius: 14px; background-position: center; background-size: cover; }.detail-image-button { padding: 0; border: 0; cursor: zoom-in; }.detail-info { display: flex; flex-direction: column; gap: 10px; }.detail-info .eyebrow { margin: 0; }.detail-info h2 { margin: 0; font-size: 32px; letter-spacing: -.05em; }.detail-price { font-size: 28px; font-weight: 850; }.detail-tags { display: flex; gap: 8px; flex-wrap: wrap; }.tag { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; }.tag-stock, .tag-service { color: var(--store-ink); background: var(--store-soft); }.tag-low { color: var(--warning); background: #f5ead4; }.detail-summary { color: var(--store-muted); line-height: 1.65; margin: 0; }.detail-highlights { display: grid; gap: 8px; margin: 0; padding-left: 18px; }.detail-highlights li::marker { color: var(--store-accent); }.detail-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.detail-services > div { display: grid; gap: 4px; padding: 13px; border-radius: 12px; background: var(--store-soft); }.detail-services strong { font-size: 12px; }.detail-services small, .stock-note { color: var(--store-muted); font-size: 11px; line-height: 1.45; }.detail-add { width: 100%; margin-top: 4px; }.detail-back { margin-bottom: 20px; }

.store-footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 24px; max-width: 1440px; padding: 48px 24px; margin: 0 auto; color: var(--store-muted); font-size: 13px; }.store-footer p { margin: 0; }.footer-links { display: flex; gap: 18px; }
.overlay { position: fixed; inset: 0; z-index: 40; background: rgb(16 25 21 / .5); backdrop-filter: blur(3px); }.lightbox { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 24px; }.lightbox img { max-width: min(92vw, 900px); max-height: 86vh; border-radius: 12px; box-shadow: 0 30px 80px rgb(0 0 0 / .35); background: var(--paper); object-fit: contain; }.lightbox-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--paper); color: var(--store-ink); font-size: 16px; cursor: pointer; }.lightbox-close:hover { background: var(--store-soft); }.cart-drawer { position: fixed; inset: 0 0 0 auto; z-index: 50; display: flex; flex-direction: column; width: min(410px, 94vw); background: var(--paper); border-left: 1px solid var(--store-line); box-shadow: -18px 0 60px rgb(16 25 21 / .2); }.cart-head { display: flex; justify-content: space-between; align-items: start; padding: 24px; border-bottom: 1px solid var(--store-line); }.cart-head .eyebrow { margin-bottom: 6px; }.cart-head h2 { font-size: 25px; margin: 0; }.delete-btn { border: 0; background: transparent; color: var(--store-muted); cursor: pointer; font-weight: 800; }.cart-items { flex: 1; overflow-y: auto; display: grid; gap: 14px; padding: 20px 24px; }.cart-item { padding-bottom: 14px; border-bottom: 1px solid var(--store-line); }.ci-main, .ci-controls, .cart-total { display: flex; justify-content: space-between; align-items: center; }.ci-main { gap: 10px; margin-bottom: 9px; }.ci-name, .ci-price { font-size: 14px; font-weight: 800; }.ci-qty { display: flex; align-items: center; gap: 10px; }.ci-qty button { width: 28px; height: 28px; border: 1px solid var(--store-line); border-radius: 8px; background: var(--store-surface); color: var(--store-ink); cursor: pointer; }.ci-qty output { min-width: 20px; text-align: center; }.cart-item-custom { padding: 14px; border: 1px solid var(--store-line); border-radius: 12px; background: var(--store-soft); }.cart-item-custom .ci-main { align-items: flex-start; flex-direction: column; }.ci-custom-meta { color: var(--store-muted); font-size: 11px; line-height: 1.5; }.ci-custom-badge { padding: 5px 8px; border-radius: 999px; background: var(--paper); color: var(--store-accent-dark); font-size: 10px; font-weight: 800; }.cart-foot { padding: 20px 24px 26px; border-top: 1px solid var(--store-line); }.cart-total { margin-bottom: 15px; font-size: 15px; }.cart-total strong { font-size: 20px; }.cart-foot .button { width: 100%; }.cart-note, .cart-status { font-size: 12px; line-height: 1.5; }.cart-note { margin: 12px 0 0; color: var(--store-muted); }.cart-status { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; }.cart-status-info, .cart-status-success { background: var(--store-soft); color: var(--store-ink); }.cart-status-warning { background: #f5ead4; color: var(--warning); }.cart-status-error { background: #f1dddd; color: var(--danger); }.cart-empty { display: grid; justify-items: center; gap: 8px; padding: 38px 0; text-align: center; color: var(--store-muted); }.cart-empty strong { color: var(--store-ink); }.cart-empty p { margin: 0 0 8px; }
.ci-fulfillment { display: block; color: var(--store-muted); font-size: 10.5px; line-height: 1.45; }.cart-item:not(.cart-item-custom) .ci-main { flex-wrap: wrap; }.cart-item:not(.cart-item-custom) .ci-fulfillment { flex: 1 0 100%; order: 3; }.cart-trust { margin-top: 14px; padding: 12px; border: 1px solid var(--store-line); border-radius: 12px; background: var(--store-soft); color: var(--store-muted); font-size: 11px; line-height: 1.5; }.cart-trust p { margin: 0; }.cart-trust strong { color: var(--store-ink); }.cart-trust-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }.cart-trust-links a { color: var(--store-accent-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }.cart-support a { color: var(--store-accent-dark); font-weight: 800; }.storefront a:focus-visible, .storefront button:focus-visible, .storefront input:focus-visible, .storefront select:focus-visible { outline: 3px solid var(--store-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.storefront *, .storefront *::before, .storefront *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 980px) { .store-nav { gap: 16px; margin-right: 16px; }.commerce-hero { grid-template-columns: 1fr 1fr; min-height: 500px; }.hero-media { min-height: 500px; }.hero-copy { padding: 48px 36px; }.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.catalog-toolbar { display: block; }.catalog-controls { justify-content: flex-start; margin-top: 18px; }.living-story { padding: 72px 22px; }.assurance { grid-template-columns: 1fr; gap: 28px; }.store-footer { grid-template-columns: 1fr 1fr; }.footer-links { grid-column: 1 / -1; } }
@media (max-width: 720px) { .storefront-header { display: flex; align-items: center; width: min(100% - 32px, 1380px); min-height: 66px; flex-wrap: wrap; gap: 10px; }.store-nav { display: flex; order: 3; width: 100%; margin: 0; gap: 6px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; scroll-snap-type: x proximity; }.store-nav a { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 44px; padding: 0 2px; white-space: nowrap; scroll-snap-align: start; }.store-nav::-webkit-scrollbar { display: none; }.storefront .topbar-actions { display: flex; width: auto; margin: 0 0 0 auto; }.storefront .topbar-actions > .cart-button { width: auto; min-height: 44px; margin: 0; }.storefront .ui-preferences { display: none; }.commerce-hero { grid-template-columns: 1fr; border-radius: 14px; }.hero-copy { padding: 44px 26px 34px; }.hero-copy h1 { font-size: clamp(40px, 12vw, 58px); }.hero-media { min-height: 350px; }.service-strip { gap: 0; padding: 28px 0 48px; }.service-strip div { padding: 0 12px; }.service-strip strong { font-size: 12px; }.service-strip span { font-size: 11px; }.shop-intro { grid-template-columns: 1fr; gap: 16px; }.catalog-shell { padding: 22px 16px; border-radius: 14px; }.catalog-controls { display: grid; grid-template-columns: 1fr 1fr; }.store-search { grid-column: 1 / -1; width: 100%; }.store-select, .clear-filters { width: 100%; }.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }.product-image { height: 185px; }.product-body { padding-top: 11px; }.product-body h3 { font-size: 14px; }.product-price { font-size: 15px; }.product-notes { display: none; }.product-actions { grid-template-columns: 1fr; }.product-actions .button { min-height: 44px; }.product-actions .button:first-child { display: none; }.living-story { grid-template-columns: 1fr; gap: 28px; padding: 66px 4px; }.living-story figure { height: 360px; }.assurance { padding: 28px 22px; border-radius: 14px; }.assurance-list { grid-template-columns: 1fr; gap: 18px; }.assurance-list article:nth-child(2) { margin-top: 0; }.store-footer { grid-template-columns: 1fr; padding: 38px 24px; }.footer-links { grid-column: auto; flex-wrap: wrap; }.footer-links a { display: inline-flex; align-items: center; min-height: 40px; }.ci-qty button { width: 36px; height: 36px; }.detail-layout { grid-template-columns: 1fr; }.detail-image { height: 320px; }.detail-services { grid-template-columns: 1fr; } }
@media (max-width: 390px) { .store-notice { font-size: 11px; }.cart-button { padding: 0 12px; }.product-grid { grid-template-columns: 1fr; }.product-image { height: 250px; } }
:root[data-theme="dark"] .commerce-hero { background: var(--store-soft) !important; }
@media (max-width: 720px) { .storefront .ui-preferences { display: inline-flex; padding: 0; }.storefront .ui-pref-select:not(.ui-language-select) { display: none; }.storefront .ui-pref-button { min-width: 44px; min-height: 44px; padding: 0 10px; } }