:root {
  color-scheme: light;
  --paper: #fcf7ef; --white: #fffdf9; --cream: #f6ecdf;
  --gold: #bc7929; --gold2: #e8bc73; --gold-dark: #83501f;
  --ink: #2b211a; --muted: #635c53; --line: #ecdfcf;
  --shadow: 0 3px 12px #87613712;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-family: var(--sans);
  color: var(--ink); background: var(--paper); font-synthesis: none;
  text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; padding-bottom: calc(72px + env(safe-area-inset-bottom)); background: #f7eddf; }
button, input, select, textarea { font: inherit; }
.brand-copy strong, .banner-copy h2, .section-title-row h2, .page-heading h1 { font-synthesis: weight; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { color: inherit; cursor: pointer; } a { color: inherit; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }
.app-shell { position: relative; max-width: 560px; min-height: 100dvh; margin: 0 auto; background: linear-gradient(#fffaf2 0, #fffdf9 410px, #fcf8f2 100%); box-shadow: 0 0 48px #603b1810; }
main, #app { min-width: 0; max-width: 100%; }
main { padding: 0 14px 24px; }
.topbar { position: relative; isolation: isolate; display: flex; align-items: center; gap: 7px; min-height: 88px; padding: 16px 14px 12px; }
.topbar-decoration { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.topbar-blossom { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.brand { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; flex: 1; text-decoration: none; }
.seal { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #c98e43; border-radius: 50%; background: linear-gradient(145deg, #f9e2b7, #b97522); color: #fff; font: 700 20px var(--serif); box-shadow: inset 0 0 0 2px #ffffff70; overflow: hidden; }
.brand-logo { width: 32px; height: 32px; object-fit: contain; }
.brand-copy { min-width: 0; display: grid; gap: 5px; }
.brand-copy strong { font: 700 20px/1.35 var(--serif); letter-spacing: .035em; white-space: nowrap; }
.brand-copy small { color: #63513e; font: 500 11px/1.55 var(--sans); letter-spacing: .015em; }
.header-action, .icon-button, .plain-back { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); text-decoration: none; }
.header-action svg, .icon-button svg, .plain-back svg { width: 23px; height: 23px; }
.route-category .topbar, .route-wishlist .topbar { display: none; }
.home-hero { padding-top: 0; min-width: 0; }
.search-form { display: flex; align-items: center; gap: 8px; height: 48px; margin: 1px 0 14px; padding: 0 10px 0 14px; border: 1px solid #f0e4d5; border-radius: 28px; background: #fff; box-shadow: 0 3px 10px #7850200e; }
.search-form > span, .search-form button { display: grid; place-items: center; color: #936231; }
.search-form svg { width: 21px; height: 21px; }
.search-form input { min-width: 0; flex: 1; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 15px; }
.search-form input::placeholder { color: #6f685f; opacity: 1; }
.search-form button { flex: 0 0 36px; width: 36px; height: 42px; border: 0; background: transparent; }
.search-form:focus-within { border-color: #bf8a49; }
.compact-search { margin: 0 0 13px; } .compact-search[hidden] { display: none; }
.category-rail-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 8px; }
.category-rail-heading h2 { margin: 0; color: #67503a; font: 600 13px/1.5 var(--sans); letter-spacing: .08em; }
.category-rail-heading a { min-height: 32px; display: inline-flex; align-items: center; color: #74512e; font-size: 14px; font-weight: 600; text-decoration: none; }
.category-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 84px; grid-template-columns: none; gap: 7px; max-width: 100%; margin: 0; padding: 0 0 5px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.category-strip::-webkit-scrollbar { display: none; }
.category-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; width: 100%; min-height: 112px; padding: 0; border: 1px solid transparent; border-radius: 14px; background: #f7efe4; overflow: hidden; text-align: center; text-decoration: none; scroll-snap-align: start; }
.category-artwork { display: block; flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.category-label { display: block; width: 100%; padding: 2px 1px 9px; color: #2e241c; font: 600 16px/1.4 var(--sans); white-space: nowrap; }
.category-tile.active { border-color: #c28a40; background: #f8e8cc; box-shadow: inset 0 0 0 1px #fff5df; }
.category-tile.active .category-label { color: #805019; }
.category-fallback { display: grid; place-items: center; width: 100%; aspect-ratio: 1; color: #ab8b5d; font-size: 38px; }
.category-scroll-hint { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 4px 0 12px; color: #74614c; font: 12px/1.5 var(--sans); letter-spacing: .025em; }
.category-scroll-hint span { font-size: 14px; }
.brand-banner, .page-banner { position: relative; isolation: isolate; width: 100%; min-width: 0; overflow: hidden; border: 1px solid #f0e3cf; border-radius: 14px; background: #f1e1c9; }
.banner-background { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.brand-banner { display: flex; align-items: center; min-height: 176px; aspect-ratio: 2 / 1; padding: 17px 19px; }
.banner-copy { position: relative; min-width: 0; }
.brand-banner .banner-copy { width: 61%; }
.banner-copy h2 { margin: 0; color: #2d1d10; font: 700 clamp(25px, 6.8vw, 36px)/1.4 var(--serif); letter-spacing: .04em; }
.banner-copy h2 span { display: block; }
.brand-banner .banner-copy p { margin: 8px 0 10px; color: #57422e; font: 500 14px/1.55 var(--sans); white-space: nowrap; }
.brand-banner .banner-copy a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 5px 14px; border: 1px solid #ffe6bd; border-radius: 22px; background: linear-gradient(110deg, #8c5b23, #7f4c1b); color: #fffdf9; font: 600 15px/1.4 var(--sans); text-decoration: none; box-shadow: 0 2px 7px #885a2528; }
.brand-banner .banner-copy a span { font: 24px/1 sans-serif; }
.status-tabs { display: flex; align-items: stretch; gap: 4px; margin: 15px 0 0; padding: 3px; border-radius: 27px; background: #f5ede2; }
.state-tab { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 42px; flex: 1; padding: 8px 3px; border-radius: 24px; color: #534332; font: 600 14px/1.4 var(--sans); text-align: center; text-decoration: none; }
.state-tab small { font: 600 12px/1 var(--sans); }
.state-tab.active, .filter-chip.selected, .wishlist-tab.active { background: linear-gradient(110deg, #9c5d17, #824710); color: #fffdf7; box-shadow: inset 0 0 0 1px #e5b768, 0 2px 5px #9c65211a; }
.home-section { padding: 18px 0 0; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 1px 10px; }
.section-title-row h2, .sku-gallery h2, .product-info h2, .recommend-section h2 { margin: 0; color: #2d2117; font: 700 24px/1.4 var(--serif); letter-spacing: .025em; }
.section-title-row > a, .text-button { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: transparent; color: #665b4e; font-size: 14px; font-weight: 500; text-decoration: none; }
.selection-source { display: block; margin-top: 3px; color: #74614c; font: 12px/1.5 var(--sans); letter-spacing: 0; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
.product-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #f0e4d5; border-radius: 13px; background: var(--white); box-shadow: var(--shadow); }
.product-image-link { position: relative; display: block; color: inherit; }
.product-image-link > img, .product-image-link > .image-empty { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #f5e9d9; }
.image-empty { display: grid; place-items: center; color: #b58a55; font: 15px var(--serif); letter-spacing: .15em; }
.product-image-link > .image-empty { display: grid; }
.favorite-button { position: absolute; top: 7px; right: 7px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #f7efe1; border-radius: 50%; background: #fffdf7eb; color: #926b44; box-shadow: 0 2px 7px #754b1712; }
.favorite-button svg, .detail-favorite svg, .detail-heart svg { width: 22px; height: 22px; }
.favorite-button.is-favorite, .detail-favorite.is-favorite, .detail-heart.is-favorite { color: #cf4938; }
.favorite-button.is-favorite svg, .detail-favorite.is-favorite svg, .detail-heart.is-favorite svg { fill: #e35843; }
.product-copy { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 10px 10px 11px; color: inherit; text-decoration: none; }
.product-copy h3 { margin: 0; color: #2b211a; font: 600 16px/1.5 var(--sans); overflow-wrap: anywhere; }
.card-facts { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.card-fee { color: #91401f; font-size: 14px; font-weight: 500; line-height: 1.65; overflow-wrap: anywhere; }
.card-status { align-self: flex-start; display: inline-flex; justify-content: center; align-items: center; min-height: 25px; margin-top: auto; padding: 3px 11px; border-radius: 16px; background: #ffe6b4; color: #684018; font: 600 13px/1.4 var(--sans); }
.card-status-preorder { background: #fae6d8; color: #9e5b2d; } .card-status-sold { background: #eeebe6; color: #62574a; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 14px; background: #ffedc9; color: #87521c; font-size: 10px; line-height: 1.15; white-space: nowrap; }
.status-preorder { background: #fff0df; color: #a84920; } .status-sold { background: #eeeeec; color: #77716b; }
.page-heading { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; min-height: 76px; padding: 11px 0 9px; }
.page-heading h1 { margin: 0; color: #2c241e; text-align: center; font: 700 25px/1.4 var(--serif); letter-spacing: .07em; }
.selection-heading { margin: 4px 0 0; color: #70583f; text-align: center; font-size: 12px; }
.category-banner { display: grid; place-items: center; min-height: 65px; aspect-ratio: 5 / 1; padding: 9px 12px; text-align: center; }
.category-banner .banner-copy h2 { font-size: clamp(19px, 5vw, 26px); line-height: 1.4; letter-spacing: .06em; }
.category-banner .banner-copy p { margin: 3px 0 0; color: #65503b; font: 500 12px/1.5 var(--sans); letter-spacing: .08em; }
.category-page-strip { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; gap: 6px; margin: 12px 0 13px; padding: 0; overflow: visible; scroll-snap-type: none; touch-action: pan-y; }
.category-page-strip .category-tile { min-height: 0; border-radius: 11px; }
.category-page-strip .category-label { padding: 1px 0 8px; font-size: 14px; }
.filter-chips { display: flex; gap: 7px; max-width: 100%; padding: 3px 0 8px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; min-height: 40px; padding: 8px 14px; border: 1px solid transparent; border-radius: 23px; background: #f6eee3; color: #493927; font: 600 15px/1.4 var(--sans); white-space: nowrap; }
.list-toolbar { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 7px; margin: 5px 0 9px; }
.sort-select { display: flex; align-items: center; justify-content: space-between; gap: 1px; min-width: 0; min-height: 42px; padding: 4px 10px; border: 1px solid #e9d4b6; border-radius: 24px; background: #fffbf4; color: #65503a; font-size: 13px; white-space: nowrap; }
.sort-select > span { flex-shrink: 0; }
.sort-select select { min-width: 0; max-width: 100%; border: 0; background: transparent; color: #433221; font-size: 14px; font-weight: 500; outline: none; }
.sorting-note { margin: 0 2px 10px; color: #685f54; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.list-count { margin: 6px 1px 9px; color: #60564b; font-size: 14px; }
.category-grid { padding-bottom: 10px; }
.soft-empty { padding: 19px 13px; border: 1px solid #f0e5d7; border-radius: 13px; background: #faf4eb; color: #64584c; text-align: center; font-size: 13px; line-height: 1.7; }
.category-empty { grid-column: 1 / -1; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 23px 0; padding: 29px 18px; }
.empty-state strong { color: #61432d; font: 600 17px/1.5 var(--serif); }
.empty-state p { margin: 0 0 8px; line-height: 1.7; } .empty-flower { color: #c69958; font-size: 37px; }
.outline-button, .cta-primary, .cta-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 17px; border-radius: 25px; text-align: center; text-decoration: none; font-size: 13px; }
.outline-button, .cta-secondary { border: 1px solid #c68a39; background: #fffdf9; color: #935d20; }
.cta-primary { border: 1px solid #b97928; background: linear-gradient(110deg, #9c5d17, #824710); color: #fff; font-weight: 600; }
.wishlist-banner { display: flex; align-items: center; min-height: 144px; aspect-ratio: 2.5 / 1; padding: 18px; }
.wishlist-banner .banner-copy { width: 79%; }
.wishlist-banner .banner-copy h2 { font-size: clamp(21px, 5.6vw, 30px); line-height: 1.6; letter-spacing: .025em; }
.wishlist-banner .banner-copy p { margin: 8px 0 0; color: #624a32; font: 500 12px/1.7 var(--sans); }
.wishlist-tabs { display: flex; gap: 5px; margin: 16px 0 13px; }
.wishlist-tab { display: flex; flex: 1; align-items: center; justify-content: center; min-width: 0; min-height: 42px; padding: 8px 2px; border: 1px solid transparent; border-radius: 24px; background: #f6eee3; color: #4d3d2c; font: 600 14px/1.4 var(--sans); white-space: nowrap; text-decoration: none; }
.wishlist-grid { padding-bottom: 3px; }
.more-button { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f8f0e5; color: #816b55; font-size: 13px; }
.wishlist-grid .card-status { margin-right: 30px; }
.card-more-menu { position: absolute; z-index: 5; right: 7px; bottom: 45px; display: grid; min-width: 112px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: 0 5px 18px #34201126; }
.card-more-menu[hidden] { display: none; }
.card-more-menu a, .card-more-menu button { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border: 0; background: transparent; color: #624832; text-align: left; text-decoration: none; font-size: 12px; }
.wishlist-actions { display: flex; gap: 8px; margin-top: 18px; padding: 12px 0; }
.wishlist-actions > * { flex: 1; padding-inline: 8px; font-size: 14px; }
.bottom-nav { position: fixed; z-index: 15; bottom: 0; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 560px); min-height: 65px; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid #e8dece; background: #fffdf9f5; backdrop-filter: blur(14px); }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; color: #625a51; font-size: 13px; font-weight: 500; text-decoration: none; }
.nav-icon { display: grid; place-items: center; width: 25px; height: 25px; }
.bottom-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav a.active { color: #905619; font-weight: 700; } .bottom-nav a.active svg { fill: #bd843e20; stroke-width: 2; }
.site-footer { padding: 2px 16px 22px; color: var(--muted); text-align: center; font-size: 12px; line-height: 1.6; }
.site-footer a { display: inline-block; max-width: 100%; min-height: 42px; padding: 12px 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; }

/* Detail uses the original verified product photographs and native page scrolling. */
.detail-view .topbar, .detail-view .bottom-nav { display: none; }
.detail-view { padding-bottom: 0; }
.detail-page { margin: 0 -14px; padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
.detail-photo-stage { position: relative; height: min(100vw, 460px); min-height: 320px; overflow: hidden; background: linear-gradient(180deg, #f4e9d9, #fcf6ed); }
.detail-carousel { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: auto; }
.detail-carousel::-webkit-scrollbar { display: none; }
.gallery-open { position: relative; flex: 0 0 100%; width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; scroll-snap-align: start; scroll-snap-stop: always; touch-action: auto; }
.gallery-open img, .gallery-open .image-empty { width: 100%; height: 100%; object-fit: contain; background: transparent; user-select: none; -webkit-user-drag: none; }
.detail-carousel.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.detail-carousel.is-dragging .gallery-open { cursor: grabbing; }
.detail-image-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #856943; font: 18px var(--serif); }
.detail-back, .detail-share, .detail-favorite { position: absolute; z-index: 2; top: calc(15px + env(safe-area-inset-top)); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #e4d5bf9c; border-radius: 50%; background: #fffdf6e8; color: #4c3524; box-shadow: 0 2px 9px #63401b0d; }
.detail-back { left: 16px; } .detail-share { right: 68px; } .detail-favorite { right: 16px; }
.detail-back svg, .detail-share svg { width: 21px; height: 21px; }
.image-count { position: absolute; z-index: 1; right: 17px; bottom: 32px; padding: 6px 13px; border-radius: 18px; background: #493823a8; color: #fff; font-size: 14px; pointer-events: none; }
.detail-photo-stage > .status-pill { display: none; }
.detail-panel { position: relative; z-index: 1; margin-top: -21px; padding: 24px 18px 20px; border-radius: 25px 25px 0 0; background: linear-gradient(#fffdf8, #fffaf3); box-shadow: 0 -5px 20px #8b652408; }
.detail-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.detail-title-row > div { min-width: 0; flex: 1; }
.detail-title-row h1 { margin: 0 0 9px; color: #4d2d1c; font: 600 27px/1.45 var(--serif); overflow-wrap: anywhere; }
.material-line { margin: 0; color: #746552; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.detail-title-row > .status-pill { flex: 0 0 auto; margin-top: 6px; }
.inquiry-price { margin: 12px 0 19px; color: #976025; font: 18px/1.7 var(--serif); overflow-wrap: anywhere; }
.craft-card { position: relative; margin: 20px 0; padding: 17px 16px 19px; border: 1px solid #e7ce9b; border-radius: 14px; background: linear-gradient(125deg, #fbf0d8, #fff9ed 70%, #f5e8cd); box-shadow: inset 0 0 0 3px #fffaf04d; }
.craft-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #755023; }
.craft-heading h2 { flex: 1; min-width: 0; margin: 0; color: #59361f; font: 600 21px/1.5 var(--serif); overflow-wrap: anywhere; }
.craft-mark { display: flex; flex: 0 0 34px; color: #aa7735; } .craft-mark svg { width: 34px; height: 34px; }
.craft-flourish { display: flex; flex: 0 0 37px; color: #d9b97b; opacity: .65; transform: rotate(-12deg); }
.craft-flourish svg { width: 37px; height: 37px; }
.craft-content p { margin: 0; color: #69533b; white-space: pre-line; overflow-wrap: anywhere; font-size: 16px; line-height: 1.85; }
.craft-content.has-craft-photo { display: grid; grid-template-columns: minmax(0, 1fr) 100px; align-items: start; gap: 12px; }
.craft-photo { width: 100px; min-width: 0; height: 112px; padding: 4px; border: 1px solid #d9bb81; border-radius: 11px; background: #fffaf0; }
.craft-photo img { width: 100%; height: 100%; border-radius: 7px; object-fit: contain; }
.detail-services { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: 20px 0; align-items: stretch; }
.detail-service-card { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 14px 6px 12px; border: 1px solid #ead9bb; border-radius: 13px; background: linear-gradient(#fffaf0, #f7eddb); color: #765636; text-align: center; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.detail-service-card[data-detail-service="exchange"] { border-color: #d9bb80; background: linear-gradient(150deg, #f8e9c8, #fff7e4); }
.detail-service-card strong { color: #64411f; font: 600 16px/1.5 var(--serif); }
.detail-service-icon { display: grid; place-items: center; width: 36px; height: 36px; color: #aa752d; }
.detail-service-icon svg { width: 34px; height: 34px; }
.detail-service-note { color: #78684f; }
.detail-service-card:hover { border-color: #c89954; }
.detail-service-card:focus-visible { outline: 2px solid #a66b21; outline-offset: 3px; }
.legacy-detail-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.legacy-detail-services > div { padding: 13px 5px; border: 1px solid #ead9bb; border-radius: 11px; background: #faf2e4; text-align: center; overflow-wrap: anywhere; font-size: 16px; line-height: 1.6; }
.legacy-detail-services small { display: block; margin-top: 5px; color: #78684f; font-size: 16px; }
.detail-rules[hidden] { display: none; }
.detail-rules { position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; padding: calc(20px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom)); background: #322315a8; }
.detail-rules-panel { position: relative; width: min(100%, 470px); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 30px 23px 24px; border: 1px solid #d9bb85; border-radius: 19px; background: #fffbf2; box-shadow: 0 15px 60px #25150640; }
.detail-rules-close { position: absolute; top: 6px; right: 7px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 28px; }
.detail-rules-eyebrow { margin: 5px 0 10px; color: #926b36; font-size: 15px; }
.detail-rules-panel h2 { margin: 0 25px 17px 0; color: #59361f; font: 600 23px/1.5 var(--serif); overflow-wrap: anywhere; }
.detail-rules-body, .detail-rules-price { white-space: pre-line; overflow-wrap: anywhere; font-size: 16px; line-height: 1.85; }
.detail-rules-price { padding: 11px; border-radius: 9px; background: #f5ead6; }
.detail-rules-panel > .cta-secondary { width: 100%; margin-top: 15px; font-size: 16px; }
.eta-card { display: flex; align-items: center; gap: 13px; margin: 4px 0 14px; padding: 16px; border-radius: 13px; background: linear-gradient(105deg, #fff1db, #fff9ed); color: #9e511b; }
.eta-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; } .eta-icon svg { width: 34px; height: 34px; }
.eta-card strong { font: 600 16px var(--serif); } .eta-card p { margin: 5px 0 0; color: #8d6947; font-size: 12px; line-height: 1.5; }
.store-note { padding: 14px; border: 1px solid #f0e0cc; border-radius: 12px; background: #fffaf2; }
.store-note strong { font: 600 15px var(--serif); } .store-note p { margin: 5px 0 0; color: #85796c; font-size: 12px; line-height: 1.55; }
.sold-callout { padding: 16px; border-radius: 13px; background: #f2f1ee; color: #4b443d; }
.sold-callout strong { font: 600 16px/1.5 var(--serif); } .sold-callout p { margin: 5px 0 0; color: #746a61; font-size: 12px; line-height: 1.7; }
.product-info { margin: 19px 1px; } .product-info h2, .sku-gallery h2 { font-size: 18px; } .product-info dl { margin: 9px 0; }
.product-info dl > div { display: grid; grid-template-columns: 32% minmax(0, 1fr); padding: 12px 4px; border-top: 1px solid #eee3d2; font-size: 16px; line-height: 1.65; }
.product-info dt { color: #8e8378; } .product-info dd { margin: 0; color: #66564a; overflow-wrap: anywhere; }
.sold-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0 0 12px; padding: 10px 0; border-radius: 12px; background: #faf5ed; }
.sold-facts span { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 2px 8px; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.sold-facts span + span { border-left: 1px solid var(--line); } .sold-facts small { color: #796b5b; font-size: 14px; }
.sku-gallery { margin: 18px 1px; } .sku-gallery h2 { margin-bottom: 9px; }
.sku-option { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 3px 10px; width: 100%; margin: 7px 0; padding: 7px; border: 1px solid #f0e8dd; border-radius: 11px; background: white; text-align: left; }
.sku-option img, .sku-option .image-empty { grid-row: 1 / 3; width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.sku-option span { min-width: 0; overflow-wrap: anywhere; font-size: 16px; line-height: 1.6; } .sku-option small { color: #8c6335; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.sku-option[aria-pressed="true"] { outline: 2px solid var(--gold); outline-offset: -2px; }
.detail-thumbnails { display: flex; gap: 12px; padding: 11px 1px 17px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.detail-thumbnails button { flex: 0 0 calc((100% - 24px) / 3); min-width: 80px; aspect-ratio: 1; padding: 5px; border: 1px solid #e1c99d; border-radius: 12px; background: #fffaf2; }
.detail-thumbnails button[aria-pressed="true"] { padding: 4px; border: 2px solid var(--gold-dark); box-shadow: 0 0 0 1px #c79b5226; }
.detail-thumbnails img { width: 100%; height: 100%; border-radius: 5px; object-fit: contain; }
.style-reference-images { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fffcf7; }
.style-reference-images h2 { margin: 0 0 5px; font: 600 15px var(--serif); } .style-reference-images p { margin: 0; font-size: 11px; line-height: 1.6; }
.recommend-section { padding: 0 14px 18px; } .recommend-section .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.recommend-section .product-copy { padding: 8px 6px; } .recommend-section .product-copy h3 { font-size: 12px; } .recommend-section .card-facts, .recommend-section .card-fee { font-size: 10px; }
.detail-cta { position: fixed; z-index: 8; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; width: min(100%, 560px); min-height: 76px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #eee4d8; background: #fffdf8f5; backdrop-filter: blur(14px); }
.detail-cta .cta-secondary, .detail-cta .cta-primary { flex: 1; min-width: 0; min-height: 48px; padding: 9px 7px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.detail-heart { display: grid; justify-items: center; gap: 2px; min-width: 49px; min-height: 48px; border: 0; background: transparent; color: #624a34; } .detail-heart small { font-size: 13px; }
.simple-page { padding: 18px 2px; } .eyebrow { margin: 0 0 7px; color: #aa7135; font-size: 11px; letter-spacing: .16em; }
.simple-ornament, .profile-mark { display: grid; place-items: center; width: 68px; height: 68px; margin: 12px auto 20px; border-radius: 50%; background: linear-gradient(145deg, #fff8eb, #f0dfc6); color: #a96d24; }
.simple-ornament svg, .profile-mark svg { width: 32px; height: 32px; } .simple-page > .eyebrow { text-align: center; }
.simple-page h1 { margin: 7px 0 8px; color: #4b2515; text-align: center; font: 600 30px/1.35 var(--serif); letter-spacing: .08em; }
.lead { max-width: 340px; margin: 12px auto 20px; color: #80766c; text-align: center; font-size: 13px; line-height: 1.85; }
.store-card, .about-card { padding: 15px; border: 1px solid #f0e4d5; border-radius: 12px; background: #fffaf2; }
.store-card strong, .about-card strong { font: 600 15px var(--serif); } .store-card p, .about-card p { color: #76695b; font-size: 12px; line-height: 1.7; }
.store-card span, .about-card small { color: #a18b72; font-size: 10px; } .simple-page > h2 { margin: 21px 0 10px; font: 600 17px var(--serif); }
.action-stack { display: grid; gap: 9px; margin: 19px 0; } .privacy-note { color: #a09589; text-align: center; font-size: 10px; }
.me-page .profile-mark { margin-top: 0; } .me-page > .section-title-row { margin-top: 23px; }
.me-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 5px; border-bottom: 1px solid #eee6dc; color: inherit; text-decoration: none; font-size: 13px; }
.me-row span { display: flex; align-items: center; gap: 8px; } .me-row svg { width: 19px; height: 19px; color: #a96d24; }
.me-row b { color: #8c8075; font-size: 11px; font-weight: 400; } .about-card { margin-top: 18px; }
.store-contact-card { margin: 22px 0; padding: 22px; border: 1px solid #e3ccb0; border-radius: 18px; background: #fffaf2; text-align: left; overflow-wrap: anywhere; }
.store-contact-card h2 { margin: 0 0 16px; color: #63361e; font-size: 20px; } .contact-detail { margin: 16px 0; }
.contact-detail > span { display: block; margin-bottom: 5px; color: #76644f; font-size: 13px; } .contact-detail strong { font-size: 20px; user-select: text; }
.copyable-address { white-space: pre-line; user-select: text; } .contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.contact-actions > * { flex: 1 1 130px; min-width: 0; text-align: center; font-size: 14px; }
.store-contact-card small { display: block; color: #81735f; line-height: 1.6; } .arrival-note { white-space: pre-line; line-height: 1.7; }
.contact-external { display: inline-block; margin: 8px 14px 8px 0; color: #8b5929; }
.store-qr { max-width: 170px; margin: 16px auto; text-align: center; } .store-qr img { width: 100%; }
.site-activity { position: relative; margin: 18px 0; overflow: hidden; border: 1px solid #e7d6c4; border-radius: 16px; background: #fffaf4; }
.site-activity > img { display: block; width: 100%; max-height: 280px; object-fit: cover; } .site-activity > div { padding: 18px; }
.site-activity h2 { margin: 0 0 8px; font: 600 20px var(--serif); } .site-activity p { white-space: pre-line; overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; }
.site-activity a { color: #8a5826; font-size: 13px; text-decoration: none; }
.banner-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 7px; font-size: 12px; }
.banner-controls button { min-height: 36px; width: 36px; border: 1px solid var(--line); border-radius: 50%; background: #fff9ee; color: #754724; font-size: 22px; }
.muted { color: var(--muted); font-size: 12px; }
.lightbox[hidden] { display: none; } .lightbox { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: #17130ff5; touch-action: pan-y; }
.lightbox img { max-width: 100vw; max-height: 82dvh; object-fit: contain; transform-origin: center center; user-select: none; touch-action: none; transition: transform .12s ease-out; }
.lightbox button { position: absolute; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ffffff26; color: #fff; font-size: 28px; }
.lightbox-close { top: calc(12px + env(safe-area-inset-top)); right: 16px; } .lightbox-prev { top: 50%; left: 12px; transform: translateY(-50%); }
.lightbox-next { top: 50%; right: 12px; transform: translateY(-50%); } .lightbox-count { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); color: #fff; font-size: 12px; }
.lightbox-zoom { position: absolute; z-index: 2; bottom: calc(52px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.lightbox-zoom button { position: static; width: 46px; height: 46px; font-size: 20px; } .lightbox-zoom [data-zoom-reset] { width: 64px; font-size: 12px; }
.no-scroll { overflow: hidden; }
.share-fallback[hidden] { display: none; }
.share-fallback { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgb(30 25 19 / .5); }
.share-fallback-card { position: relative; width: min(100%, 440px); max-height: 100%; overflow: auto; box-sizing: border-box; border-radius: 18px; padding: 28px 22px 20px; background: var(--paper, #fffdf8); color: var(--ink, #30281f); box-shadow: 0 16px 60px #0003; }
.share-fallback-card h2 { margin: 0 40px 14px 0; font-size: 22px; }
.share-fallback-card p { line-height: 1.65; }
.share-fallback-card label { display: block; margin: 18px 0 8px; font-size: 14px; }
.share-fallback-card textarea { display: block; width: 100%; box-sizing: border-box; resize: none; padding: 12px; border: 1px solid #d7c7ad; border-radius: 8px; background: #fff; color: inherit; font: 14px/1.5 sans-serif; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.share-fallback-card .cta-primary { width: 100%; min-height: 44px; margin-top: 16px; }
.share-fallback-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 28px; }
.share-feedback { min-height: 1.65em; font-size: 14px; }
.toast { position: fixed; z-index: 40; bottom: calc(83px + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 10px); max-width: calc(100vw - 28px); padding: 10px 15px; border-radius: 20px; background: #3b2718ef; color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 380px) {
  main { padding-inline: 12px; } .topbar { padding-inline: 10px; gap: 3px; } .brand { gap: 6px; }
  .brand-copy strong { font-size: 18px; } .brand-copy small { font-size: 11px; } .seal { flex-basis: 32px; width: 32px; height: 32px; }
  .header-action { flex-basis: 34px; width: 34px; } .category-strip { grid-auto-columns: 78px; gap: 6px; }
  .category-tile { min-height: 106px; } .category-label { font-size: 16px; }
  .category-page-strip { grid-auto-columns: auto; gap: 5px; } .category-page-strip .category-label { font-size: 14px; }
  .brand-banner { padding: 15px; min-height: 164px; } .brand-banner .banner-copy h2 { font-size: 25px; }
  .brand-banner .banner-copy p { font-size: 12px; } .brand-banner .banner-copy a { min-height: 36px; padding-inline: 12px; font-size: 14px; }
  .product-grid { gap: 8px; } .product-copy { padding: 9px 8px; gap: 5px; } .product-copy h3 { font-size: 16px; }
  .card-facts, .card-fee { font-size: 13px; } .favorite-button { width: 35px; height: 35px; right: 5px; top: 5px; }
  .sort-select { padding-inline: 7px; font-size: 12px; } .sort-select select { font-size: 13px; }
  .list-toolbar { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 5px; }
  .wishlist-banner { padding: 15px; min-height: 138px; } .wishlist-banner .banner-copy h2 { font-size: 21px; }
  .wishlist-banner .banner-copy p { font-size: 12px; } .wishlist-tab { font-size: 13px; }
  .detail-page { margin-inline: -12px; } .detail-cta { padding-inline: 8px; }
  .detail-panel { padding-inline: 16px; } .detail-title-row h1 { font-size: 25px; }
}
@media (max-width: 340px) {
  .brand-copy strong { font-size: 17px; letter-spacing: 0; } .brand-copy small { font-size: 11px; letter-spacing: 0; }
  .category-page-strip .category-label { font-size: 13px; } .category-page-strip { gap: 4px; }
  .brand-banner .banner-copy { width: 65%; } .brand-banner .banner-copy h2 { font-size: 23px; }
  .state-tab { font-size: 13px; } .wishlist-banner .banner-copy h2 { font-size: 20px; }
  .wishlist-banner .banner-copy { width: 83%; } .wishlist-banner .banner-copy p { font-size: 12px; }
  .filter-chip { padding-inline: 12px; font-size: 13px; } .sort-select > span { font-size: 0; }
  .bottom-nav a { font-size: 12px; } .section-title-row h2 { font-size: 23px; }
}
@media (min-width: 520px) {
  .home-section .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-strip { grid-auto-columns: 98px; } .category-page-strip { grid-auto-columns: auto; }
  .topbar { min-height: 96px; } .brand-copy strong { font-size: 21px; } .brand-copy small { font-size: 11px; }
  .brand-banner { padding: 22px 27px; } .brand-banner .banner-copy p { font-size: 15px; }
  .brand-banner .banner-copy a { min-height: 42px; font-size: 16px; }
  .wishlist-banner { padding: 24px; } .wishlist-banner .banner-copy p { font-size: 13px; }
}
@media (min-width: 600px) { body { padding-bottom: 0; } .app-shell { min-height: 100vh; } .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } }
@media (max-width: 430px) { .store-contact-card { padding: 16px; } .store-contact-card h2 { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* The gift-selection addition is scoped; the existing catalog keeps its layout. */
.pick-for-you { margin: 0 0 12px; padding: 0 7px 9px; border: 1px solid #edcfa9; border-radius: 15px; background: linear-gradient(125deg, #fff7e8, #fffaf3 70%); overflow: hidden; }
.pick-intro { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 106px; margin: 0 -7px 5px; padding: 14px 12px 12px 32%; text-decoration: none; }
.pick-gift-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.pick-intro::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #fff8ee00 22%, #fff8eedb 42%, #fff8ee55 86%, #fff8ee00); content: ''; pointer-events: none; }
.pick-intro-copy { min-width: 0; }
.pick-intro-copy h2 { margin: 0 0 3px; color: #4b2d15; font: 700 clamp(23px, 6.1vw, 30px)/1.3 var(--serif); font-synthesis: weight; }
.pick-intro-copy p { margin: 0 0 4px; color: #4f3824; font-size: 13px; line-height: 1.55; }
.pick-intro-copy > span { display: block; color: #69513a; font-size: 11px; line-height: 1.6; }
.pick-intro-copy b { margin-left: 3px; font-size: 16px; font-weight: 400; }
.pick-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.pick-home-entry { position: relative; display: flex; align-items: center; min-width: 0; min-height: 79px; overflow: hidden; border: 1px solid #efddc6; border-radius: 11px; background: #fffaf2; text-decoration: none; }
.pick-home-entry > .pick-person-art { flex: 0 0 42%; width: 42%; height: 100%; min-height: 79px; align-self: stretch; object-fit: cover; }
.pick-entry-copy { position: relative; display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; padding: 8px 10px 8px 6px; }
.pick-entry-copy strong { color: #3b2a1b; font: 600 14px/1.45 var(--sans); overflow-wrap: anywhere; }
.pick-entry-copy small { color: #725b45; font: 11px/1.5 var(--sans); overflow-wrap: anywhere; }
.pick-entry-arrow { position: absolute; right: 4px; top: 50%; color: #95652e; font-size: 20px; transform: translateY(-50%); }
.pick-page .page-heading { min-height: 66px; padding: 7px 0; }
.pick-page .page-heading h1 { font-size: 24px; }
.pick-theme { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 140px; margin: 0 -14px 11px; overflow: hidden; background: linear-gradient(110deg, #fcebd3, #fff8ed); }
.pick-theme-art { position: absolute; z-index: -1; right: 0; top: 0; width: 45%; height: 100%; object-fit: cover; object-position: center 35%; }
.pick-theme::after { position: absolute; z-index: -1; inset: 0 30% 0 0; content: ''; background: linear-gradient(90deg, #fff3e0 65%, #fff3e000); }
.pick-theme-copy { width: 63%; min-width: 0; padding: 16px 14px 16px 19px; }
.pick-theme-copy h2 { margin: 0 0 7px; color: #4f3018; font: 700 clamp(23px, 6vw, 30px)/1.35 var(--serif); font-synthesis: weight; overflow-wrap: anywhere; }
.pick-theme-copy p { margin: 0; color: #674d35; font-size: 13px; line-height: 1.7; }
.pick-theme-all .pick-theme-art { width: 100%; object-position: center; }
.pick-theme-all .pick-theme-copy { padding-left: 33%; width: 100%; }
.pick-theme-all::after { display: none; }
.pick-page-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pick-page-entry { display: flex; align-items: center; min-width: 0; min-height: 57px; padding: 0; overflow: hidden; border: 1px solid #efdfcb; border-radius: 9px; background: #fffaf3; text-align: left; }
.pick-page-entry > .pick-person-art { flex: 0 0 44%; width: 44%; height: 57px; object-fit: cover; }
.pick-page-entry > span { min-width: 0; padding: 5px; color: #4e3927; font: 500 12px/1.5 var(--sans); overflow-wrap: anywhere; }
.pick-page-entry.selected { border-color: #b87b32; background: #fff0d9; box-shadow: inset 0 0 0 1px #dba35c; }
.pick-page-entry.selected > span { color: #794812; font-weight: 600; }
.pick-page-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 3px; }
.pick-page-options .sort-select { flex: 0 1 175px; min-height: 35px; font-size: 12px; }
.pick-page-options select { font-size: 13px; }
.pick-all-button { min-height: 35px; padding: 5px 10px; border: 1px solid #ebddc8; border-radius: 20px; background: #fffaf3; color: #6b533a; font-size: 13px; }
.pick-all-button.selected { border-color: #b98544; background: #f9e9ce; color: #795020; }
.pick-kind-tabs { display: flex; gap: 17px; max-width: 100%; margin: 0 0 7px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
.pick-kind-tabs::-webkit-scrollbar { display: none; }
.pick-kind { position: relative; flex: 0 0 auto; min-height: 43px; padding: 7px 1px 9px; border: 0; background: transparent; color: #79644f; font-size: 14px; white-space: nowrap; }
.pick-kind.selected { color: #654016; font-weight: 600; }
.pick-kind.selected::after { position: absolute; right: 0; bottom: 2px; left: 0; height: 3px; border-radius: 3px; background: #b4782c; content: ''; }
.pick-results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 1px 0 8px; }
.pick-results-heading h2 { margin: 0; color: #54381e; font: 600 15px/1.6 var(--sans); }
.pick-results-heading > span { flex-shrink: 0; color: #796b5b; font-size: 12px; }
.pick-empty .outline-button { display: inline-flex; margin: 5px 4px; }
@media (max-width: 360px) {
  .pick-intro { padding-left: 29%; }
  .pick-intro-copy p { font-size: 12px; }
  .pick-home-entry > .pick-person-art { flex-basis: 39%; width: 39%; }
  .pick-entry-copy { padding-left: 5px; }
  .pick-entry-copy strong { font-size: 13px; }
  .pick-page-entry > span { padding: 3px; }
}