@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');
:root { --paper:#f7f4ee; --card:#fffdfa; --ink:#20302b; --muted:#56675e; --green:#1e5b49; --line:#d8ddd3; --soft:#e2ede2; --display:"Playfair Display",Georgia,serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.5 "DM Sans",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible { outline:3px solid #387b65; outline-offset:3px; }
button { font:inherit; cursor:pointer; }
[hidden] { display:none !important; }
.page-shell { width:min(1380px,100%); padding:0 clamp(16px,4vw,54px); margin:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:116px; border-bottom:1px solid var(--line); }
.brand-lockup { display:flex; align-items:center; min-width:0; }
.brand-mark { width:64px; height:64px; flex:none; }
.brand-divider { height:44px; border-left:1px solid var(--line); margin:0 18px; }
.brand-copy { display:grid; gap:4px; }
.brand-copy strong { font:600 clamp(16px,2.5vw,27px)/1.12 var(--display); }
.eyebrow { color:var(--green); font-size:10px; font-weight:700; letter-spacing:.19em; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 15px; border:1px solid var(--green); border-radius:999px; background:var(--card); color:var(--green); font-size:13px; font-weight:700; }
.button:hover { background:var(--soft); }
.button:disabled { opacity:.5; cursor:default; }
.primary, .primary:hover { background:var(--green); color:white; }
.primary:hover { filter:brightness(.9); }
#inquiry-count { min-width:22px; text-align:center; background:var(--soft); border-radius:999px; }
.hero { display:grid; grid-template-columns:1fr 1fr; min-height:320px; margin:24px 0 28px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#e7eee3; }
.hero-copy { align-self:center; padding:clamp(24px,5vw,72px); }
h1,h2,h3,p { margin:0; }
h1,.section-title h2,.dialog-title h2 { font-family:var(--display); }
h1 { font-size:clamp(34px,5vw,64px); line-height:1.08; margin:8px 0 13px; }
.hero p,.brand-intro p { color:var(--muted); }
.hero .button { margin-top:20px; }
.hero-photos { min-width:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:4px; background:var(--card); }
.hero-photos img { width:100%; height:100%; min-height:0; display:block; object-fit:cover; aspect-ratio:2/1; }
.section-title { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); margin:0 0 16px; padding:0 0 9px; }
.section-title span,.card-copy p { color:var(--muted); 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; padding:9px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:0 6px 20px #20302b09; }
.brand-card:hover { border-color:var(--green); }
.card-photo { aspect-ratio:1; overflow:hidden; border-radius:10px; background:#eeece5; }
.card-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.card-photo img.placeholder { object-fit:contain; padding:25%; }
.card-copy { display:flex; flex:1; flex-direction:column; gap:4px; padding:10px 4px 4px; overflow-wrap:anywhere; }
.card-copy h2,.card-copy h3 { font-size:16px; line-height:1.25; }
.card-copy p span { float:right; color:var(--green); }
.add-item { align-self:start; margin-top:auto; }
.add-item[aria-pressed=true] { background:var(--soft); }
.back { display:inline-block; margin:20px 0 12px; font-weight:700; color:var(--green); }
.brand-intro { padding:24px; margin-bottom:18px; background:#e7eee3; border:1px solid var(--line); border-radius:16px; }
.category-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.category-bar a { padding:7px 12px; border:1px solid var(--line); border-radius:99px; background:var(--card); font-size:13px; }
.category-bar a[aria-current] { background:var(--green); color:white; }
.pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:24px; }
.empty { grid-column:1/-1; padding:30px; background:var(--card); border:1px solid var(--line); border-radius:16px; }
footer { margin-top:42px; padding:20px 0; color:var(--muted); border-top:1px solid var(--line); }
dialog { width:min(480px,calc(100% - 30px)); max-height:85vh; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--ink); }
dialog::backdrop { background:#14251cb0; }
.dialog-title,.dialog-actions,#inquiry-items li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
#inquiry-items { list-style:none; padding:0; }
#inquiry-items li { padding:8px 0; border-bottom:1px solid var(--line); }
#inquiry-items li span { flex:1; overflow-wrap:anywhere; }
#copy-fallback { width:100%; min-height:8em; margin-top:10px; }
#inquiry-status { color:var(--green); margin-top:8px; }
@media(max-width:900px) { .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:640px) { .site-header { min-height:88px; } .brand-mark { width:45px;height:45px; } .brand-divider { margin:0 9px; } .hero { grid-template-columns:1fr; } .hero-photos { grid-template-columns:repeat(4,1fr); grid-template-rows:1fr; } .hero-photos img { aspect-ratio:1; } .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .card-copy h2,.card-copy h3 { font-size:14px; } .add-item { font-size:12px; padding-inline:9px; } }

.header-actions { display:flex; align-items:center; gap:8px; }
.header-action { white-space:nowrap; }
.header-action #inquiry-count { background:#ffffff2b; }
.brand-products .product-card { transition:border-color .2s, box-shadow .2s, transform .2s; }
.brand-products .product-card:hover { border-color:#1e5b4950; box-shadow:0 12px 25px #20302b16; transform:translateY(-2px); }
.zoom-image { position:relative; display:block; cursor:zoom-in; }
.zoom-image img { object-fit:contain; }
.zoom-hint { position:absolute; right:8px; bottom:8px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--card); color:var(--green); box-shadow:0 2px 8px #20302b25; }
.card-copy .eyebrow { color:var(--green); font-size:10px; }
.product-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px; }
.product-actions .add-item { flex:1 1 auto; }
.add-item.is-added { background:var(--soft); color:var(--green); }
.has-inquiry .page-shell { padding-bottom:86px; }
.inquiry-dock { position:fixed; z-index:3; inset:auto 0 0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px max(clamp(16px,4vw,54px),calc((100vw - 1272px)/2)) max(10px,env(safe-area-inset-bottom)); color:white; background:#153f34; box-shadow:0 -8px 30px #153f342b; font-weight:700; }
.toast { position:fixed; z-index:4; right:clamp(16px,4vw,54px); bottom:75px; padding:8px 14px; border-radius:999px; background:var(--green); color:white; opacity:0; pointer-events:none; }
.toast.is-visible { opacity:1; }
body:has(dialog[open]) { overflow:hidden; }
.icon-button { width:40px; padding:0; font-size:22px; }
#inquiry { position:fixed; inset:0 0 0 auto; margin:0; width:min(510px,calc(100% - 20px)); height:100dvh; max-width:none; max-height:none; padding:0; border:0; border-radius:0; }
#inquiry[open] { display:flex; flex-direction:column; }
#inquiry .dialog-title, #inquiry .dialog-actions { padding:16px 20px; background:var(--paper); }
#inquiry .dialog-title { border-bottom:1px solid var(--line); }
#inquiry .dialog-actions { border-top:1px solid var(--line); }
.inquiry-body { flex:1; min-height:0; overflow:auto; padding:15px 20px; }
#inquiry-items li { flex-wrap:nowrap; align-items:start; justify-content:start; }
#inquiry-items li > img { width:64px; height:64px; object-fit:contain; border-radius:7px; background:var(--paper); }
#inquiry-items li > div { min-width:0; overflow-wrap:anywhere; }
#inquiry-items p, #preview-id { color:var(--muted); font-size:13px; }
.quantity-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:6px; }
.quantity-controls .button { min-width:36px; min-height:36px; padding:4px 9px; }
#inquiry-status { padding:0 20px; }
#inquiry-status:empty { margin:0; }
#copy-fallback { width:calc(100% - 40px); margin:10px 20px; }
#product-preview { width:min(850px,calc(100% - 24px)); max-height:calc(100dvh - 24px); border-radius:16px; padding:14px; }
#product-preview .dialog-title { flex-wrap:nowrap; align-items:start; padding-bottom:10px; overflow-wrap:anywhere; }
#preview-title { font-size:clamp(16px,3vw,24px); }
.preview-image { display:grid; place-items:center; border-radius:10px; background:var(--paper); }
.preview-image img { display:block; width:100%; height:min(63dvh,620px); object-fit:contain; }
.preview-actions, .preview-navigation { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.preview-actions { justify-content:space-between; padding-top:10px; }
.preview-navigation .button { min-width:40px; padding-inline:8px; }
@media(max-width:640px) {
  .header-actions { flex-direction:column-reverse; align-items:stretch; gap:4px; padding-block:8px; }
  .header-actions .button { min-height:34px; padding:4px 8px; font-size:11px; }
  .product-actions .share-item { padding-inline:9px; }
  .product-actions .add-item { flex-basis:100%; }
  .preview-image img { height:min(56dvh,560px); }
  .preview-actions { justify-content:start; }
}
@media(prefers-reduced-motion:reduce) { .brand-products .product-card { transition:none; } }

.promo-carousel { margin:24px 0 12px; }
.promo-stage { aspect-ratio:3/1; min-height:220px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#ede8dd; box-shadow:0 10px 30px #20302b0f; }
.promo-slide { display:grid; width:100%; height:100%; margin:0; place-items:center; animation:banner-in .32s ease-out; }
.promo-slide img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; }
.promo-placeholder { grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:linear-gradient(120deg,#e8eee1,#eae1d4); }
.promo-placeholder figcaption { display:grid; align-content:center; justify-items:start; gap:11px; padding:clamp(14px,4vw,54px); }
.promo-placeholder strong { font:600 clamp(24px,5vw,62px)/1.08 var(--display); overflow-wrap:anywhere; }
.promo-placeholder img { background:#00000007; }
.promo-controls { position:relative; display:flex; justify-content:center; align-items:center; gap:10px; min-height:48px; padding-inline:64px; }
.promo-controls .icon-button { width:32px; min-height:32px; padding:0; font-size:17px; }
.promo-dot { width:10px; height:10px; padding:0; border:0; border-radius:999px; background:#9eb4a6; }
.promo-dot[aria-pressed=true] { width:24px; background:var(--green); }
#promo-pause { position:absolute; right:0; min-height:30px; padding:3px 9px; }
@keyframes banner-in { from { opacity:.4; } to { opacity:1; } }
.section-title h1 { font-size:clamp(25px,4vw,38px); margin:0; }
.alphabet { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:17px; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.alphabet a,.alphabet span { display:grid; place-items:center; min-width:34px; min-height:34px; padding-inline:7px; border-radius:8px; font-weight:700; }
.alphabet a:hover { background:var(--soft); color:var(--green); }
.alphabet a[aria-current] { background:var(--green); color:white; }
.alphabet span { color:#838a83; font-weight:400; }
.brand-jump { margin:0 0 14px; }
.brand-jump summary { width:fit-content; cursor:pointer; color:var(--green); font-weight:700; }
.brand-jump .alphabet { margin:9px 0 0; }
.product-card { padding:10px; border-color:#20302b16; }
.brand-card { transition:transform .2s, box-shadow .2s, border-color .2s; }
.brand-card:hover { transform:translateY(-2px); box-shadow:0 12px 24px #20302b15; }
.brand-card .card-photo img { object-fit:contain; }
.card-photo { background:radial-gradient(ellipse at 50% 35%,#fff,#f1ede5 74%); }
.brand-card .card-copy { padding:12px 4px 5px; gap:6px; }
.brand-card .card-copy p span { display:grid; place-items:center; width:25px; height:25px; background:var(--soft); border-radius:50%; font-weight:700; }
.clear-inquiry { color:#9b372d; border-color:#d4a39a; }
.clear-inquiry:hover { background:#f9e8e4; }
.inquiry-rep { color:var(--muted); padding:0 20px 10px; font-size:13px; }
#inquiry[open] { animation:drawer-in .25s ease-out; }
#inquiry[open]::backdrop { animation:backdrop-in .25s ease-out; }
#inquiry.is-closing::backdrop { animation:backdrop-out .24s ease-in forwards; }
@keyframes drawer-in { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes backdrop-out { from { opacity:1; } to { opacity:0; } }
.gallery-thumbnails { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.gallery-thumbnails button { padding:0; width:50px; height:50px; border-radius:8px; border:1px solid var(--line); overflow:hidden; background:var(--paper); }
.gallery-thumbnails button[aria-pressed=true] { border:2px solid var(--green); }
.gallery-thumbnails img { width:100%; height:100%; object-fit:contain; }
#preview-description { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:8px; color:var(--muted); }
@media(max-width:640px) {
  .promo-stage { aspect-ratio:2.5/1; min-height:138px; }
  .promo-placeholder figcaption { gap:5px; }
  .promo-placeholder strong { font-size:clamp(18px,5vw,27px); }
  .promo-placeholder .eyebrow { font-size:8px; }
  .promo-placeholder .button { min-height:30px; padding:4px 7px; font-size:11px; }
  .alphabet { gap:3px; }
  .alphabet a,.alphabet span { min-width:30px; min-height:34px; }
  #inquiry .dialog-actions { padding-inline:12px; justify-content:start; gap:5px; }
  #inquiry .dialog-actions .button { padding-inline:9px; }
}
@media(prefers-reduced-motion:reduce) {
  .promo-slide,#inquiry[open],#inquiry[open]::backdrop,.brand-card { animation:none; transition:none; }
}