:root { --app-bg:#f4efe6; --paper:#fffdf9; --ink:#29231f; --copper:#9b633c; --line:#ddd2c3; }

html { overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { background:var(--app-bg); padding-bottom:0; }
button, a, input, select, textarea { max-width:100%; }
.button { min-height:44px; height:auto; padding:12px 20px; line-height:1.15; text-align:center; white-space:normal; overflow-wrap:anywhere; }
.button-row, .hero-buttons, .result-actions, .taste-nav { min-width:0; }
.button-row > *, .hero-buttons > *, .result-actions > *, .taste-nav > * { min-width:0; }
h1,h2,h3,p,span,b,strong { max-width:100%; }
h1,h2,h3,p { overflow-wrap:break-word; }
.profile-layout, .result-layout { grid-template-columns:minmax(0,1fr) minmax(0,.8fr); }
.business-hero { grid-template-columns:minmax(0,1fr); }
.account-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.profile-layout > *, .account-grid > *, .result-layout > *, .business-hero > *, .profile-card, .info-card { min-width:0; max-width:100%; }
.profile-card, .info-card { overflow:hidden; }
.profile-name { max-width:100%; overflow-wrap:break-word; word-break:normal; }
.axis { grid-template-columns:minmax(78px,105px) minmax(0,1fr) 38px; min-width:0; }
.axis > * { min-width:0; }
.data-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; }
.data-row span, .data-row b { min-width:0; overflow-wrap:break-word; }

.store-shell { width:min(1380px, calc(100% - 48px)); margin:0 auto; padding:42px 0 80px; }
.store-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; padding:0 0 28px; border-bottom:1px solid var(--line); }
.store-intro > div { min-width:0; max-width:780px; }
.store-intro h1 { margin:3px 0 8px; font-size:clamp(38px,5vw,72px); line-height:.98; font-weight:500; letter-spacing:-.035em; }
.store-intro p:not(.eyebrow) { margin:0; max-width:680px; color:#655d56; font-size:17px; line-height:1.5; }
.store-intro > .button { flex:0 0 auto; }

.starter-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px 28px; margin:24px 0 42px; padding:24px; background:#302923; color:#fffaf2; border-radius:18px; }
.taste-sequence.starter-sequence { grid-column:1/-1; width:100%; max-width:none; margin:0; color:#deb48c; }
.taste-sequence.starter-sequence span { border-color:rgba(222,180,140,.58); color:#f0d5bb; }
.taste-sequence.starter-sequence i { background:rgba(222,180,140,.34); }
.starter-copy { min-width:0; }
.starter-copy .eyebrow { color:#cfa77f; margin-bottom:5px; }
.starter-copy h2 { margin:0 0 5px; font-size:clamp(22px,2.5vw,34px); line-height:1.1; font-weight:500; }
.starter-copy > p:last-child { margin:0; color:#d6cec5; }
.starter-buy { display:flex; align-items:center; gap:20px; min-width:0; }
.starter-buy strong { font-size:24px; white-space:nowrap; }
.starter-card .button.primary, .business-hero .button.primary { color:#fffaf2; background:transparent; border-color:rgba(222,180,140,.62); box-shadow:inset 0 0 0 1px rgba(222,180,140,.08); }
.starter-card .button.primary:hover, .business-hero .button.primary:hover { background:rgba(222,180,140,.09); border-color:rgba(239,205,174,.86); }

.catalog-section { padding:0; }
.section-heading { align-items:flex-end; gap:24px; margin-bottom:22px; }
.section-heading > div:first-child { min-width:0; }
.section-heading h2 { margin-top:4px; font-size:clamp(27px,3.4vw,46px); line-height:1.05; }
.filter-row { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.filter-row button { min-height:38px; padding:8px 15px; white-space:nowrap; }
.product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.product-card { min-width:0; border-radius:15px; overflow:hidden; }
.product-image { aspect-ratio:1.2/1; }
.product-body { padding:16px; min-width:0; }
.product-body h3 { font-size:22px; line-height:1.08; margin:9px 0 7px; }
.product-body p { min-height:0; line-height:1.4; }
.product-meta { min-width:0; gap:6px; }
.product-meta span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-bottom { gap:12px; }

.taste-welcome { display:block; max-width:820px; margin:0 auto; padding:clamp(26px,5vw,58px); background:var(--paper); border:1px solid var(--line); border-radius:22px; }
.taste-welcome > img { display:none; }
.taste-welcome-copy { max-width:660px; margin:0 auto; }
.taste-sequence { display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto; align-items:center; width:min(100%,620px); margin:0 auto 34px; color:var(--copper); }
.taste-sequence span { display:grid; place-items:center; width:38px; aspect-ratio:1; border:1px solid rgba(155,99,60,.45); border-radius:50%; font:600 16px/1 sans-serif; }
.taste-sequence i { height:1px; background:rgba(155,99,60,.28); }
.taste-welcome-copy h1 { font-size:clamp(38px,6vw,66px); line-height:1; }

.mobile-tabbar { display:none; }

.business-copy { max-width:920px; }
.business-hero > .business-visual { min-width:0; padding:0 clamp(35px,6vw,80px) clamp(35px,6vw,80px); overflow:hidden; }
.business-hero h1 { max-width:850px; text-wrap:balance; }
.business-copy > p:not(.eyebrow) { max-width:760px; line-height:1.55; }
.business-visual > img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border:1px solid rgba(240,213,187,.18); border-radius:18px; }

.expert-bridge { display:grid; grid-template-columns:74px minmax(0,1fr) auto; align-items:center; gap:24px; margin-top:20px; padding:clamp(22px,3vw,34px); color:var(--ink); background:linear-gradient(118deg,#fffaf3 0%,#f7ede1 100%); border:1px solid var(--line); text-decoration:none; overflow:hidden; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.expert-bridge:hover { transform:translateY(-2px); border-color:#c9ab8d; box-shadow:0 14px 34px rgba(65,42,27,.08); }
.expert-mark { display:grid; place-items:center; width:74px; aspect-ratio:1; border:1px solid #c7a17b; border-radius:50%; background:rgba(255,255,255,.46); }
.expert-mark img { width:52px; height:52px; object-fit:contain; }
.expert-copy { display:block; min-width:0; }
.expert-copy .eyebrow { display:block; margin:0 0 5px; color:var(--copper); }
.expert-copy strong { display:block; margin-bottom:7px; font:500 clamp(27px,3vw,39px)/1.05 Georgia,serif; letter-spacing:-.02em; }
.expert-description { display:block; max-width:650px; color:#655d56; font-size:15px; line-height:1.45; }
.expert-action { display:flex; align-items:center; gap:18px; min-height:48px; padding:0 0 0 24px; border-left:1px solid var(--line); font:600 13px/1.25 sans-serif; white-space:nowrap; }
.expert-action b { font:400 25px/1 Georgia,serif; color:var(--copper); }

@media (max-width:1040px) {
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .store-shell { width:min(100% - 34px, 960px); padding-top:32px; }
  .starter-card { grid-template-columns:minmax(0,1fr) auto; }
  .starter-buy { justify-content:flex-start; }
  .business-hero { grid-template-columns:minmax(0,1fr); }
}

@media (max-width:720px) {
  body { padding-bottom:74px; }
  .demo-ribbon { font-size:10px; }
  .site-header { min-height:66px; padding:9px 15px; }
  .site-header .brand small, .taste-chip { display:none; }
  .site-header .brand b { font-size:20px; }
  .site-header .brand img { width:40px; height:40px; }
  .store-shell { width:calc(100% - 28px); padding:24px 0 46px; }
  .store-intro { display:block; padding-bottom:21px; }
  .store-intro h1 { font-size:42px; }
  .store-intro p:not(.eyebrow) { font-size:15px; }
  .store-intro > .button { width:100%; margin-top:18px; }
  .starter-card { grid-template-columns:minmax(0,1fr); gap:16px; margin:18px 0 30px; padding:18px 17px; border-radius:14px; }
  .taste-sequence.starter-sequence { grid-column:1; margin-bottom:2px; }
  .taste-sequence.starter-sequence span { width:32px; font-size:14px; }
  .starter-copy h2 { font-size:21px; }
  .starter-copy > p:last-child { font-size:13px; line-height:1.35; }
  .starter-buy { grid-column:1; display:grid; grid-template-columns:1fr 1fr; width:100%; gap:12px; }
  .starter-buy strong { align-self:center; font-size:21px; }
  .starter-buy .button { width:100%; }
  .section-heading { display:block; }
  .section-heading h2 { font-size:31px; }
  .filter-row { justify-content:flex-start; flex-wrap:wrap; overflow:visible; padding:3px 0 7px; }
  .filter-row::-webkit-scrollbar { display:none; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .product-image { aspect-ratio:1/1; }
  .product-body { padding:12px; }
  .product-meta { display:block; }
  .product-meta span { display:block; font-size:10px; }
  .product-meta span + span { display:none; }
  .product-body h3 { min-height:0; font-size:18px; }
  .product-body p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; }
  .product-bottom strong { font-size:17px; }
  .add-button { flex:0 0 38px; width:38px; height:38px; }
  .mobile-tabbar { position:fixed; z-index:50; display:grid; grid-template-columns:repeat(4,1fr); left:0; right:0; bottom:0; padding:7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background:rgba(255,253,249,.96); border-top:1px solid var(--line); backdrop-filter:blur(14px); }
  .mobile-tabbar button { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; padding:2px; border:0; background:none; color:#4f4740; font:500 10px/1.1 sans-serif; }
  .mobile-tabbar span { font-size:20px; line-height:1; }
  footer { display:none; }
  .page-shell, .taste-shell { width:100%; }
  .page-top { gap:15px; }
  .page-top .button { width:100%; }
  .button-row { display:flex; flex-wrap:wrap; }
  .button-row > * { flex:1 1 150px; }
  .taste-panel, .profile-layout, .account-grid, .result-layout { min-width:0; }
  .taste-nav { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:9px; }
  .taste-nav .button { width:100%; padding-inline:10px; }
  .taste-shell { width:100%; padding:18px 14px 42px; }
  .taste-welcome { width:100%; padding:32px 22px 36px; border-radius:18px; }
  .taste-welcome-copy { width:100%; max-width:none; padding:0; }
  .taste-sequence { width:100%; margin-bottom:28px; }
  .taste-sequence span { width:34px; font-size:15px; }
  .taste-welcome-copy h1 { max-width:100%; margin-bottom:24px; font-size:clamp(38px,11vw,48px); line-height:.96; letter-spacing:-.035em; overflow-wrap:normal; word-break:normal; hyphens:none; }
  .taste-welcome-copy > p:not(.eyebrow) { margin-bottom:22px; font-size:16px; line-height:1.55; }
  .taste-welcome-copy ol { margin:20px 0 26px; padding-left:24px; font-size:15px; line-height:1.45; }
  .taste-welcome-copy li { padding:5px 0 5px 4px; }
  .taste-welcome-copy > .button, .taste-intro-actions .button.primary { width:100%; }
  .result-actions { display:grid; grid-template-columns:1fr; }
  .result-actions .button { width:100%; }
  .profile-layout, .account-grid, .result-layout, .business-hero { grid-template-columns:minmax(0,1fr); }
  .page-shell { padding:30px 18px 54px; }
  .view[data-view="business"] .page-shell { padding:22px 10px 48px; }
  .business-hero > .business-copy { padding:30px 20px 26px; }
  .business-hero h1 { margin-bottom:22px; font-size:clamp(36px,10.5vw,43px); line-height:.98; letter-spacing:-.035em; }
  .business-copy > p:not(.eyebrow) { font-size:15px; line-height:1.52; }
  .page-title { font-size:clamp(39px,12vw,52px); line-height:.98; overflow-wrap:normal; word-break:normal; hyphens:none; }
  .profile-card, .info-card { padding:24px; }
  .profile-name { font-size:clamp(38px,12vw,55px); line-height:.94; }
  .profile-description { font-size:15px; line-height:1.5; }
  .axis { grid-template-columns:minmax(72px,90px) minmax(0,1fr) 30px; gap:9px; }
  .data-row { gap:14px; font-size:14px; }
  .data-row b { text-align:right; }
  .side-menu, .cart-drawer { width:100%; max-width:100vw; right:0; }
  .business-hero > .business-visual { padding:0 14px 14px; }
  .business-visual > img { border-radius:14px; }
  .expert-bridge { grid-template-columns:60px minmax(0,1fr); gap:15px; padding:20px; }
  .expert-mark { width:60px; }
  .expert-mark img { width:42px; height:42px; }
  .expert-copy strong { font-size:27px; }
  .expert-description { font-size:13px; }
  .expert-action { grid-column:1/-1; justify-content:space-between; min-height:44px; padding:15px 0 0; border-top:1px solid var(--line); border-left:0; white-space:normal; }
}

@media (max-width:370px) {
  .product-grid { grid-template-columns:1fr; }
  .starter-card { grid-template-columns:1fr; }
  .starter-buy { grid-column:1; }
  .taste-sequence.starter-sequence span { width:28px; font-size:12px; }
  .page-shell { padding-inline:14px; }
  .profile-card, .info-card { padding:20px; }
  .page-title { font-size:38px; }
  .profile-name { font-size:38px; }
  .data-row { grid-template-columns:1fr; gap:4px; }
  .data-row b { text-align:left; }
  .taste-sequence span { width:30px; font-size:13px; }
  .expert-bridge { grid-template-columns:1fr; }
  .expert-mark { display:none; }
}
.result-layout .result-accent { color:#e4c3a6; font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin:-8px 0 0; }
.result-layout .result-note { border-left:2px solid #c99570; padding:4px 0 4px 14px; font-size:14px; margin-top:22px; }
.taste-intro-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.taste-welcome-copy .resume-note { border-left:2px solid var(--copper); padding:4px 0 4px 14px; color:var(--ink); font-size:14px; }
.auth-card #authContent > p:not(.auth-soon):not(.auth-error) { color:var(--muted); }
.auth-card .link-field { display:grid; gap:6px; font-size:11px; font-weight:700; margin:18px 0 14px; }
.auth-card .link-field input { width:100%; border:1px solid var(--line); background:white; padding:12px; font-size:13px; color:var(--ink); }
.auth-card .button-row { margin-bottom:6px; }
.auth-card .button.text.wide { margin-top:10px; }
.auth-soon { color:var(--muted); font-size:12px; margin:18px 0 0; }
.auth-error { color:#9b2f2f; font-size:13px; min-height:1px; margin:8px 0; }
.auth-error:empty { margin:0; }
.checkout-card .consent { display:flex; align-items:flex-start; gap:10px; font-weight:400; font-size:12px; color:var(--muted); line-height:1.4; }
.checkout-card .consent input { width:18px; height:18px; flex:0 0 18px; margin:1px 0 0; padding:0; }
.account-actions { margin-top:22px; align-items:center; }
button[disabled] { opacity:.6; cursor:progress; }
