@charset "utf-8";
:root { color-scheme: light; --blue:#587a90; --blue-deep:#35586f; --ink:#26343b; --muted:#738087; --line:#e2e5e3; --shadow:0 12px 40px rgba(41,62,76,.15); --serif:Georgia,serif; --sans:"Segoe UI",Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:#f8f7f8; color:var(--ink); font-family:var(--sans); font-size:14px; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; color:inherit; }
button,a,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
[hidden] { display:none!important; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.header { max-width:1240px; min-height:72px; margin:auto; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand-logo { display:block; width:min(220px,55vw); height:auto; object-fit:contain; }
.button { min-height:42px; padding:10px 18px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--blue); border-radius:4px; text-align:center; }
.button-outline { background:#fff; color:var(--blue-deep); }
.button-dark { background:var(--blue-deep); color:#fff; }
.catalog-section { max-width:1240px; margin:auto; padding:12px 28px 40px; }
.catalog-filter-bar { min-height:94px; padding:14px 16px; display:grid; grid-template-columns:260px minmax(0,1fr); align-items:center; gap:18px; border:1px solid #d7dde1; border-radius:20px; background:#fff; }
.gender-switch { width:fit-content; padding:5px; display:flex; align-items:center; border-radius:16px; background:#f3eff4; }
.gender-tab { min-width:120px; height:54px; padding:0 20px; border:0; border-radius:12px; background:transparent; color:#788692; font-weight:600; }
.gender-tab.is-active { background:#fff; color:#38566d; box-shadow:0 3px 12px rgba(45,57,68,.09); }
.catalog-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; }
.search-box { display:flex; border:1px solid var(--line); border-radius:4px; height:42px; }
.search-box input { min-width:0; width:100%; border:0; background:transparent; padding:0 12px; }
.search-box button { background:none; border:0; padding:0 13px; font-size:20px; }
.sort-box select,.mobile-filter-toggle { height:42px; padding:0 12px; border:1px solid var(--line); border-radius:4px; background:#fff; }
.mobile-filter-toggle { display:none; }
.mobile-filter-toggle span { margin-left:6px; }
.category-tabs { display:flex; align-items:center; justify-content:center; gap:8px; overflow-x:auto; margin:0; scrollbar-width:none; }
.category-tabs::-webkit-scrollbar { display:none; }
.category-tab { position:relative; min-height:52px; flex:0 0 auto; padding:0 18px; border:0; border-radius:26px; background:transparent; color:#657582; font-weight:600; white-space:nowrap; }
.category-tab.is-active { background:#f4f6f7; color:#38566d; }
.category-tab.is-active::after { position:absolute; right:18px; bottom:6px; left:18px; height:2px; background:#587a90; content:""; }
.filter-panel { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.filter-group { display:flex; flex-direction:column; gap:6px; flex:1 1 130px; font-size:12px; }
.filter-group select,.filter-group input { width:100%; height:38px; padding:0 9px; border:1px solid var(--line); border-radius:4px; background:#fff; }
.check-row { display:flex; align-items:center; gap:7px; height:38px; font-size:12px; }
input[type=checkbox] { accent-color:var(--blue); }
.clear-filters { height:38px; padding:0; border:0; background:none; color:var(--blue-deep); font-size:12px; text-decoration:underline; }
.catalog-results { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:16px 0; font-size:12px; color:var(--muted); }
.active-filters { display:flex; flex-wrap:wrap; gap:6px; }
.filter-chip { display:flex; align-items:center; gap:5px; padding:4px 7px; border-radius:3px; background:#eef3f5; color:var(--blue-deep); }
.filter-chip button { border:0; background:none; padding:0 2px; font-size:15px; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 20px; }
.product-card { min-width:0; }
.product-image-button { width:100%; display:block; border:0; padding:0; background:#f4f4f4; }
.product-image-frame { display:block; aspect-ratio:3/4; overflow:hidden; }
.product-image-frame img { display:block; width:100%; height:100%; object-fit:contain; }
.no-photo { display:grid; place-items:center; width:100%; height:100%; color:var(--muted); }
.product-info { padding-top:10px; }
.product-title { margin:0 0 6px; font-size:14px; line-height:1.4; font-weight:400; }
.product-title button { padding:0; border:0; background:none; text-align:left; }
.product-price-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; }
.product-price { font-weight:600; font-size:14px; }
.product-compare { color:var(--muted); font-size:12px; text-decoration:line-through; }
.empty-state { padding:55px 10px; text-align:center; }
.empty-state h3 { font-weight:500; }
.empty-state p { color:var(--muted); }
.load-more-wrap { display:flex; justify-content:center; margin-top:30px; }
.sync-message { padding:12px; margin-bottom:18px; background:#f5f6f6; line-height:1.5; }
.sync-message button { border:0; background:none; text-decoration:underline; }
.skeleton-card span { display:block; aspect-ratio:3/4; background:#f1f2f2; }
.skeleton-card i,.skeleton-card b { display:block; width:70%; height:12px; margin-top:10px; background:#f1f2f2; }
.skeleton-card b { width:40%; }
.product-dialog, .fit-dialog { position: fixed; max-width: calc(100vw - 26px); max-height: calc(100vh - 26px); padding: 0; border: 0; background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.product-dialog { width: min(860px, calc(100vw - 36px)); }
.product-dialog::backdrop, .fit-dialog::backdrop { background: rgba(25,40,49,.53); backdrop-filter: blur(2px); }
.dialog-close { position: absolute; z-index: 3; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(190,203,207,.85); border-radius: 50%; background: rgba(255,255,255,.94); color: var(--blue-deep); cursor: pointer; font-size: 22px; line-height: 1; }
.product-dialog-content { min-height: 420px; display: grid; grid-template-columns: 1fr 1fr; }
.detail-loading { min-height: 300px; grid-column: 1 / -1; padding: 35px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.detail-loading .eyebrow { margin: 9px 0; }
.detail-loading h2 { max-width: 450px; margin: 0; color: #304b5b; font-family: var(--serif); font-size: 29px; font-weight: 400; }
.detail-loading p:last-child { color: #849196; font-size: 10px; }
.loading-sparkle { color: #8ba5ad; font-size: 26px; animation: shimmer 1.2s ease infinite alternate; }
.detail-gallery { position: relative; min-height: 420px; background: #eff2f0; }
.detail-gallery > img { width: 100%; height: 100%; max-height: 620px; display: block; object-fit: cover; }
.detail-thumbs { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 7px; }
.detail-thumb { width: 42px; height: 49px; overflow: hidden; padding: 0; border: 2px solid white; background: #fff; cursor: pointer; }
.detail-thumb.is-active { border-color: var(--blue-deep); }
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail-copy { padding: clamp(28px,4vw,46px) clamp(22px,4vw,45px) 30px; display: flex; flex-direction: column; justify-content: center; }
.detail-copy .product-category { font-size: 9px; }
.detail-title { margin: 5px 0 10px; padding-right: 14px; color: #304b5b; font-family: var(--serif); font-size: clamp(25px,3vw,34px); font-weight: 400; line-height: 1.08; }
.detail-description { max-height: 97px; overflow: auto; margin: 0 0 15px; color: #77848a; font-size: 10px; line-height: 1.55; }
.detail-price { margin: 3px 0 17px; color: #304b5b; font-size: 18px; font-weight: 650; }
.detail-price small { margin-left: 8px; color: #92a0a3; font-size: 10px; font-weight: 400; text-decoration: line-through; }
.detail-option { margin: 0 0 14px; }
.detail-option label { margin-bottom: 6px; display: block; color: #708087; font-size: 9px; font-weight: 600; }
.detail-option select { width: 100%; height: 39px; padding: 0 10px; border: 1px solid #dfe5e4; background: #fff; color: #596b73; font-size: 10px; }
.detail-stock { margin: 0 0 14px; color: #859298; font-size: 9px; }
.detail-actions { display: grid; gap: 8px; }
.detail-actions .button { width: 100%; }
.detail-fit { padding: 7px; border: 0; background: none; color: var(--blue-deep); cursor: pointer; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.detail-footnote { margin-top: 12px; color: #9aa3a5; font-size: 8px; line-height: 1.45; }

.fit-dialog { width: min(590px, calc(100vw - 28px)); }
.fit-dialog-inner { min-height: 490px; padding: 34px clamp(23px,6vw,62px) 29px; }
.fit-intro { text-align: center; }
.fit-mark { width: 39px; height: 39px; margin: 0 auto 11px; display: grid; place-items: center; border-radius: 50%; background: #eaf0f0; color: var(--blue); font-family: var(--serif); font-size: 26px; }
.fit-intro .eyebrow { margin-bottom: 7px; justify-content: center; font-size: 8px; }
.fit-intro .eyebrow-rule { display: none; }
.fit-intro h2 { margin: 0; color: #334f60; font-family: var(--serif); font-size: 31px; font-weight: 400; }
.fit-intro > p:last-child { max-width: 370px; margin: 8px auto 0; color: #879398; font-size: 10px; line-height: 1.55; }
.fit-progress { margin: 24px auto 27px; display: flex; justify-content: center; align-items: center; gap: 9px; }
.progress-step { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #dce4e4; border-radius: 50%; color: #9ba7aa; font-size: 8px; }
.progress-step.is-current, .progress-step.is-complete { border-color: var(--blue); background: var(--blue); color: white; }
.progress-line { width: 32px; height: 1px; background: #d9e0e0; }
.fit-step h3 { margin: 0; color: #455d69; font-family: var(--serif); font-size: 21px; font-weight: 400; text-align: center; }
.fit-step-copy { max-width: 380px; margin: 7px auto 19px; color: #879397; font-size: 10px; line-height: 1.55; text-align: center; }
.fit-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.fit-input > span:first-child { margin-bottom: 6px; display: block; color: #687981; font-size: 9px; }
.input-with-unit { height: 43px; display: flex; align-items: center; border: 1px solid #dfe6e5; }
.input-with-unit input { width: 100%; height: 100%; padding: 0 10px; border: 0; outline: 0; color: #425762; font-size: 13px; }
.input-with-unit em { padding-right: 11px; color: #879499; font-size: 9px; font-style: normal; }
.fit-privacy { margin: 10px 0 20px; color: #9aa4a6; font-size: 8px; }
.fit-privacy span { margin-right: 4px; color: #7c9aa5; }
.fit-next { width: 100%; }
.measure-layout { margin: 2px 0 17px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 12px; }
.fit-figure { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.fit-figure svg { width: 132px; max-height: 184px; }
.figure-caption { margin-top: -4px; color: #98a3a5; font-family: var(--serif); font-size: 9px; font-style: italic; }
.measure-fields { display: grid; gap: 9px; }
.measure-field { display: flex; justify-content: space-between; align-items: center; gap: 5px; color: #63757d; font-size: 10px; }
.measure-field > span:last-child { display: flex; align-items: center; gap: 3px; }
.measure-field button { width: 25px; height: 27px; border: 1px solid #dfe6e5; background: white; color: var(--blue-deep); cursor: pointer; font-size: 14px; }
.measure-field input { width: 48px; height: 27px; padding: 0 2px; border: 1px solid #dfe6e5; color: #536770; font-size: 10px; text-align: center; }
.measure-field em { margin-left: -1px; color: #9ba5a7; font-size: 8px; font-style: normal; }
.fit-step-actions { display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; gap: 10px; }
.back-action { justify-self: start; padding: 10px 0; border: 0; background: none; color: #71838a; cursor: pointer; font-size: 9px; }
.fit-result { text-align: center; }
.result-sparkle { color: #a28564; font-size: 25px; }
.fit-result .eyebrow { justify-content: center; margin: 8px 0; font-size: 8px; }
.fit-result h3 { max-width: 400px; margin: 0 auto; font-size: 25px; line-height: 1.18; }
.fit-result h3 span { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.fit-result > p:not(.eyebrow) { max-width: 360px; margin: 12px auto 16px; color: #859297; font-size: 10px; line-height: 1.5; }
.fit-product-note { margin: 0 0 14px; padding: 10px; background: #f4f7f6; color: #657881; font-size: 9px; }
.fit-result-actions { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.fit-result-actions .button { padding: 0 11px; font-size: 9px; }
.fit-result .fit-disclaimer { max-width: 380px; margin: 14px auto 0; color: #a0a9ab; font-size: 8px; line-height: 1.45; }
.toast { position: fixed; z-index: 10; right: 20px; bottom: 20px; max-width: calc(100vw - 40px); padding: 11px 15px; background: #273f50; color: white; box-shadow: 0 6px 20px rgba(22,42,53,.18); font-size: 10px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s; }
.toast.is-visible { opacity: 1; transform: none; }


.detail-title,.fit-intro h2,.fit-step h3,.fit-result h3 { font-family:var(--sans); font-weight:500; }
.detail-description { font-size:13px; max-height:100px; }
.detail-option label,.detail-option select,.detail-stock,.detail-fit,.fit-intro>p:last-child,.fit-step-copy,.fit-input>span:first-child,.fit-privacy,.measure-field,.back-action,.fit-result>p:not(.eyebrow) { font-size:12px; }
.detail-footnote,.fit-result .fit-disclaimer { font-size:11px; }
.detail-gallery>img { object-fit:contain; }
.detail-title { font-size:24px; line-height:1.3; }
.detail-copy { padding:30px; }
.detail-fit { text-decoration:none; }
.fit-result-actions .button { font-size:12px; }
.product-category { color:var(--muted); font-size:12px; margin:0 0 8px; }
.eyebrow { color:var(--muted); font-size:11px; }
@media(max-width:900px) { .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:650px) {
  .header { min-height:68px; padding:12px 16px; gap:10px; }
  .brand-logo { width:min(190px,64vw); }
  .catalog-section { padding:8px 12px 26px; }
  .catalog-filter-bar { min-height:0; padding:10px; grid-template-columns:1fr; gap:10px; border-radius:15px; }
  .gender-switch { width:100%; }
  .gender-tab { width:50%; min-width:0; height:43px; }
  .category-tabs { justify-content:flex-start; gap:3px; }
  .category-tab { min-height:43px; padding:0 11px; font-size:12px; }
  .category-tab.is-active::after { right:12px; bottom:4px; left:12px; }
  .catalog-results { margin:12px 2px; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; }
  .product-title,.product-price { font-size:13px; }
  .product-dialog-content { display:block; min-height:0; }
  .detail-gallery { min-height:0; height:300px; }
  .detail-copy { padding:22px; }
  .fit-dialog-inner { min-height:0; padding:28px 20px; }
  .measure-layout { grid-template-columns:.7fr 1.3fr; }
  .fit-result-actions { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }