:root { --accent: #111; --on-accent: #fff; --sale: #c0121e; --ink: #111; --text: #333; --muted: #8a8a8a; --line: #e6e6e6; --bg: #fff; --bg-2: #f3f3f2; --radius: 0px; --btn-radius: 0px; --sec: 44px; --gap: 6px; --font: 'Inter', system-ui, sans-serif; --display: 'Playfair Display', Georgia, serif; --wrap: 1500px; --fs: 13.5px; }
.k-logotext { font-family: var(--display); font-weight: 700; letter-spacing: .08em; color: var(--ink); text-transform: uppercase; }
.k-minhead { border-bottom: 1px solid var(--line); padding: 12px 0; } .k-minhead .k-wrap { display: flex; justify-content: space-between; align-items: center; }
.k-annc { background: #e4e4e2; color: var(--ink); text-align: center; font-size: 12px; padding: 5px 0; }
.k-head { justify-content: center; position: relative; } .k-head h2 { font-size: 26px; font-weight: 500; } .k-head .k-more { position: absolute; right: 0; font-size: 12px; text-decoration: underline; }
.btn { text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }
.sh { background: var(--bg); position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--line); } .sh-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; min-height: 66px; padding: 0 24px; }
.sh-nav { display: flex; gap: 20px; flex-wrap: wrap; } .sh-nav a { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); } .sh-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sh-acts { justify-self: end; display: flex; align-items: center; gap: 16px; color: var(--ink); } .sh-acts > a { position: relative; display: block; } .sh-acts i { position: absolute; top: -7px; right: -9px; background: var(--ink); color: #fff; font-style: normal; font-size: 9.5px; min-width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; }
.sh-search { position: relative; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--ink); } .sh-search input { border: 0; background: none; width: 150px; padding: 4px 0; font-size: 12.5px; outline: none; border-radius: 0; }
.s-hero { position: relative; height: calc(var(--h, 80) * 1vh); min-height: 420px; overflow: hidden; } .s-hero > img { width: 100%; height: 100%; object-fit: cover; }
.s-hero__t { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 8%; color: #fff; } .s-hero h1 { color: #fff; font-size: clamp(38px, 7vw, 92px); font-weight: 400; margin: 0; max-width: 9em; line-height: 1; } .s-hero span { font-size: clamp(16px, 2vw, 26px); letter-spacing: .04em; margin-top: 14px; }
.sc { position: relative; } .sc-img { display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--bg-2); } .sc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .sc:hover .sc-img img { transform: scale(1.03); } .sc-fav { position: absolute; top: 8px; right: 8px; background: none; border: 0; color: var(--ink); padding: 4px; } .sc-fav.on { color: var(--sale); }
.sc h3 { font: 400 12.5px/1.35 var(--font); color: var(--ink); margin: 8px 4px 4px; } .sc-p { display: flex; gap: 8px; margin: 0 4px 12px; font-size: 12.5px; } .sc-p s { color: var(--muted); } .sc-p b { font-weight: 600; color: var(--ink); } .sc-p b.on { color: var(--sale); } .sc small { color: var(--muted); margin: 0 4px; }
.k-rail { position: relative; } .k-prail > .k-wrap { padding: 0 6px; max-width: none; } .k-track { --gap: 6px; }
.s-duo__g { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; padding-top: 6px; } .s-duo a { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: block; } .s-duo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .s-duo a:hover img { transform: scale(1.02); } .s-duo span { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; color: #fff; display: flex; flex-direction: column; } .s-duo b { font: 400 clamp(24px, 3vw, 42px)/1.1 var(--display); } .s-duo small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.s-news { padding: 40px 0; text-align: center; border-top: 1px solid var(--line); margin-top: 40px; } .s-news h2 { font-size: 24px; font-weight: 500; } .s-news form { display: flex; max-width: 440px; margin: 0 auto; border-bottom: 1px solid var(--ink); } .s-news input { flex: 1; border: 0; min-width: 0; background: none; outline: none; } .s-news button { background: none; border: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.sf { padding: 44px 0 18px; font-size: 13px; border-top: 1px solid var(--line); } .sf-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px; } .sf h4 { font: 600 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .sf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .sf a:hover { text-decoration: underline; } .sf-bottom { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 12px; color: var(--muted); }
.k-listhead { padding-bottom: 10px; } .k-listhead--slim { padding-bottom: 0; } .k-listhead h1 { font-size: 30px; font-weight: 500; margin: 0; } .k-listbody { padding-bottom: 44px; } .k-catdesc { color: var(--muted); } .k-catcols { margin-bottom: 12px; }
.k-catban { position: relative; height: 300px; overflow: hidden; } .k-catban img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .k-catban__t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .25); text-align: center; } .k-catban h1 { color: #fff; font-size: clamp(30px, 5vw, 56px); font-weight: 400; margin: 0; } .k-catban p { color: #fff; margin: 0; }
.kl { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; align-items: start; }
.s-crumb { padding: 0 24px; } .sp { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 34px; padding: 0 24px 40px 0; align-items: start; } .sp-gal { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .sp-gal > div { overflow: hidden; background: var(--bg-2); } .sp-gal img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; } .sp-b--zoom img { transform: scale(1.7); transform-origin: 50% 22%; }
.sp-info { position: sticky; top: 84px; } .sp-info small { color: var(--muted); font-size: 11.5px; } .sp-info h1 { font: 500 19px/1.3 var(--font); margin: 2px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .sp-price { display: flex; gap: 10px; font-size: 16px; margin-bottom: 14px; } .sp-price s { color: var(--muted); } .sp-price b { font-weight: 600; color: var(--ink); } .sp-price b.on { color: var(--sale); }
.kb-opt span { border-radius: 0; } .sp-acc { margin-top: 18px; border-top: 1px solid var(--line); } .sp-acc details { border-bottom: 1px solid var(--line); } .sp-acc summary { cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); padding: 12px 0; } .sp-acc details > div { padding-bottom: 12px; } .sp-wa { display: inline-block; margin-top: 12px; font-size: 12.5px; text-decoration: underline; }
@media (max-width: 1000px) { .sh-row { grid-template-columns: auto 1fr auto; padding: 0 14px; min-height: 58px; } .sh-nav, .sh-search { display: none; } .sh-logo { justify-self: start; } .s-duo__g { grid-template-columns: 1fr; } .sf-grid { grid-template-columns: 1fr 1fr; } .kl { grid-template-columns: minmax(0, 1fr); } .sp { grid-template-columns: minmax(0, 1fr); padding: 0 0 30px; } .sp-info { position: static; padding: 0 16px; } .k-head .k-more { position: static; } .k-head { justify-content: space-between; padding: 0 10px; } }
.k-prail { overflow: hidden; }