@font-face {
  font-family: Vazir;
  src: url('assets/vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --content-max: 1160px;
  --page-gutter: 24px;
  --paper: #ffffff;
  --ink: var(--green-12, #193b2d);
  --primary: var(--green-11, #218358);
  --muted: var(--sage-11, #5f6563);
  --surface: var(--sage-2, #f7f9f8);
  --line: var(--sage-6, #d7dad9);
  --accent-soft: var(--green-3, #e6f6eb);
  --accent-hover: var(--green-4, #d6f1df);
  --white: #ffffff;
  --hover: var(--green-3, #e6f6eb);
  --on-ink: var(--green-3, #e6f6eb);
  --button-hover: var(--green-12, #193b2d);
  --glass: rgb(255 255 255 / .76);
  --glass-edge: rgb(255 255 255 / .9);
  --glass-filter: blur(18px) saturate(1.4);
  --glass-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(255 255 255 / .3), 0 10px 28px rgb(25 59 45 / .1);
  --header-glass: rgb(242 250 245 / .68);
  --chrome-soft: #d6f1df;
  --chrome-muted: #456552;
  --chrome-line: #b7d9c5;
  --scrim: #193b2d78;
  --drawer-shadow: #193b2d26;
  --dialog-shadow: #193b2d33;
  --radius: 10px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --press-time: 140ms;
  --state-time: 180ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 170px; }
html.lenis { scroll-behavior: auto; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.9 Vazir, Tahoma, sans-serif; -webkit-font-smoothing: antialiased; }
body.layer-open { overflow: hidden; }
::selection { background: var(--accent-soft); color: var(--ink); }
html { scrollbar-color: var(--ink) var(--paper); }
input { caret-color: var(--ink); }
.product-price, .cart-total { font-variant-numeric: tabular-nums; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; user-select: none; -webkit-user-select: none; transition: transform var(--press-time) var(--ease), background-color var(--state-time) var(--ease), color var(--state-time) var(--ease); }
a { color: inherit; text-decoration: none; }
button, a[href], label[for] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .5; }
a, button { touch-action: manipulation; }
button:not(:disabled):active, a.button:active { transform: scale(.97); }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 650; }
[hidden] { display: none !important; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width:min(var(--content-max),calc(100% - var(--page-gutter) * 2)); margin-inline:auto; }
.skip-link { position: fixed; top: -90px; right: 20px; z-index: 150; background: var(--ink); color: white; padding: 12px 24px; }
.skip-link:focus { top: 10px; }

/* v8: a shop window, an object-led category shelf, and a catalog with a side index. */
.announcement { display:flex; justify-content:space-between; gap:16px; padding:5px max(36px,calc((100vw - 1320px)/2)); background:var(--chrome-soft); color:var(--ink); font-size:11px; }
.site-header { position:sticky; top:0; z-index:30; background:var(--header-glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.site-header.scrolled { box-shadow:0 2px 10px #193b2d09; }
.nav-wrap { width:min(1320px,calc(100% - 72px)); margin:auto; min-height:91px; display:flex; align-items:center; gap:52px; }
.brand { display:inline-flex; flex-direction:column; align-items:flex-start; gap:3px; flex-shrink:0; }
.brand-logo { display:block; width:176px; height:auto; }
.brand-caption { display:block; font-size:10px; font-weight:450; line-height:1.5; color:var(--muted); padding-inline-start:3px; }
.header-search { min-width:0; flex:1; min-height:48px; padding:10px 18px; display:flex; align-items:center; gap:13px; text-align:right; background:var(--white); border:1px solid var(--chrome-line); border-radius:10px; color:var(--muted); font-size:13px; }
.header-search svg { width:20px; }
.header-search .search-hint { margin-inline-start:auto; font-size:11px; color:var(--ink); }
.nav-actions { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.icon-button,.saved-link { width:44px; height:44px; display:grid; place-items:center; padding:10px; border-radius:8px; }
.icon-button svg,.saved-link svg { width:21px; height:21px; }
.cart-toggle { display:flex; align-items:center; gap:9px; min-height:44px; font-size:13px; padding:6px 0; }
.cart-count { min-width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--primary); color:white; font-size:11px; padding:0 4px; }
.nav-shelf { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:50px; border-top:1px solid var(--chrome-line); }
.desktop-nav,.shelf-links { display:flex; align-items:center; gap:27px; font-size:13px; }
.desktop-nav a,.shelf-links a { display:inline-flex; align-items:center; gap:8px; min-height:48px; }
.desktop-nav a:first-child { font-weight:700; }
.shelf-links { gap:24px; }
.shelf-links a:last-child { color:var(--ink); }
.shelf-links svg { width:19px; height:19px; }
.mobile-menu-toggle { display:none; }
.mobile-nav { padding:12px 22px 20px; display:flex; flex-wrap:wrap; gap:8px 24px; background:var(--surface); }
.mobile-nav a { min-height:44px; display:flex; align-items:center; }
.button { min-height:48px; padding:12px 24px; display:inline-flex; align-items:center; justify-content:center; gap:14px; border-radius:8px; font-size:14px; font-weight:550; transition:transform var(--press-time) var(--ease),background-color var(--state-time) var(--ease),color var(--state-time) var(--ease); }
.button svg { width:20px; height:20px; }
.button-dark { background:var(--primary); color:var(--white); }
.button-soft { background:var(--accent-soft); color:var(--ink); }
.button-outline { background:var(--paper); border:1px solid var(--line); }
.text-link { display:inline-flex; align-items:center; min-height:44px; padding:0; font-size:13px; text-decoration:underline; text-underline-offset:6px; }
.hero { padding-top:24px; }
.hero-window { display:grid; grid-template-columns:42% 58%; border-radius:24px; overflow:hidden; background:var(--accent-soft); }
.hero-copy { padding:44px 44px 28px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; }
.hero h1 { font-size:clamp(44px,4.4vw,62px); font-weight:800; line-height:1.45; letter-spacing:normal; }
.hero-description { color:var(--ink); font-size:14px; line-height:2.1; margin-top:20px; }
.hero-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:26px; }
.hero-bottom { display:flex; align-items:center; gap:9px; margin-top:32px; font-size:11px; color:var(--muted); }
.hero-bottom svg { width:18px; height:18px; }
.hero-main-photo { position:relative; min-width:0; }
.hero-image-frame { position:relative; min-height:450px; height:100%; overflow:hidden; background:var(--surface); }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.glass-note { position:absolute; bottom:25px; left:26px; display:flex; align-items:center; gap:12px; max-width:calc(100% - 52px); padding:13px 16px; background:var(--glass); border:1px solid var(--glass-edge); border-radius:12px; text-align:right; backdrop-filter:var(--glass-filter); -webkit-backdrop-filter:var(--glass-filter); box-shadow:var(--glass-shadow); }
.note-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--primary); color:white; }
.note-icon svg { width:18px; height:18px; }
.glass-note small { display:block; font-size:10px; color:#365547; }
.glass-note strong { display:block; font-size:13px; font-weight:650; }
.glass-note>svg { width:18px; margin-right:10px; }
.category-section { display:grid; grid-template-columns:200px 1fr; gap:44px; align-items:center; padding-block:45px 48px; }
.category-intro h2 { font-size:28px; line-height:1.6; }
.category-intro p { font-size:12px; line-height:1.9; color:var(--muted); margin-top:10px; }
.category-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.category { min-width:0; display:flex; flex-direction:column; align-items:center; padding:8px; border-radius:12px; }
.category-art { width:104px; height:104px; border-radius:50%; overflow:hidden; display:block; border:4px solid var(--paper); outline:1px solid var(--line); }
.category strong { display:block; font-size:14px; font-weight:650; margin-top:12px; }
.category small { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.category[aria-pressed="true"] .category-art { outline:3px solid var(--primary); }
.category[aria-pressed="true"] strong { text-decoration:underline; text-underline-offset:5px; }
.collection-section { background:var(--surface); padding-block:54px 58px; scroll-margin-top:12px; }
.shop-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:34px; }
.shop-index h2 { font-size:30px; line-height:1.5; }
.shop-index>p { color:var(--muted); font-size:13px; margin-top:13px; }
.shop-categories { display:flex; flex-direction:column; align-items:stretch; margin-top:24px; }
.shop-categories a,.shop-categories button { display:flex; align-items:center; justify-content:space-between; text-align:right; min-height:44px; padding:6px 10px; margin-right:-10px; border-radius:7px; font-size:13px; }
.shop-categories svg { width:17px; height:17px; }
.shop-categories a { font-weight:700; }
.shop-categories button[aria-pressed="true"] { background:var(--primary); color:white; }
.shop-gift-link { display:flex; align-items:flex-start; gap:11px; padding-top:23px; margin-top:20px; border-top:1px solid var(--line); font-size:12px; }
.shop-gift-link svg { width:22px; height:22px; }
.shop-gift-link small { display:block; color:var(--muted); margin-top:5px; }
.catalog { min-width:0; }
.collection-controls { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; min-height:45px; }
.filter-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.filter-tabs button { display:flex; gap:7px; align-items:center; min-height:44px; padding:7px 13px; border-radius:7px; font-size:12px; }
.filter-tabs button.selected { background:var(--ink); color:white; font-weight:650; }
.filter-tabs svg { width:15px; height:15px; }
.sample-note { font-size:10px; color:var(--muted); }
.product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; min-height: 390px; }
.product-card { min-width: 0; padding-bottom: 16px; }
.product-image-wrap { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--surface); border-radius: var(--radius); }
.product-open { display: block; width: 100%; height: 100%; padding: 0; }
.product-open:focus-visible { outline-offset: -5px; }
.product-art { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s var(--ease); }
.product-open>img { width: 100%; height: 100%; object-fit: cover; }
.favorite-button { position: absolute; top: 8px; left: 8px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; background: var(--glass); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); backdrop-filter:var(--glass-filter); -webkit-backdrop-filter:var(--glass-filter); border-radius: 50%; }
.favorite-button svg { width: 19px; height: 19px; }
.favorite-button.is-favorite { color: var(--primary); }
.favorite-button.is-favorite svg { fill: currentColor; }
.product-info { padding-top: 16px; }
.product-type { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); line-height: 1.8; }
.color-dot { width: 7px; height: 7px; flex-shrink: 0; background: var(--dot); border-radius: 50%; }
.product-title { font-size: 16px; font-weight: 550; margin-top: 4px; }
.product-title button { padding: 0; min-height: 44px; text-align: right; }
.product-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.product-price { display: flex; gap: 5px; align-items: baseline; font-size: 15px; font-weight: 650; }
.product-price small { font-size: 12px; font-weight: 400; color: var(--muted); }
.add-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 112px; min-height: 44px; background: var(--surface); padding: 7px 12px; border-radius: var(--radius); font-size: 13px; }
.add-icon, .add-label { display: inline-grid; overflow: hidden; }
.add-icon { width: 18px; height: 18px; }
.add-icon svg { display: block; width: 18px; height: 18px; }
.add-icon>span, .add-label>span { grid-area: 1/1; transition: opacity var(--state-time) var(--ease), transform var(--state-time) var(--ease); }
.add-default { opacity: 1; transform: translateY(0); }
.add-success { opacity: 0; transform: translateY(8px); }
[data-add].is-added { background: var(--accent-soft); color: var(--ink); }
.is-added .add-default { opacity: 0; transform: translateY(-8px); }
.is-added .add-success { opacity: 1; transform: translateY(0); }
.filter-status { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 16px; margin-bottom: 24px; background: var(--accent-soft); border-radius: var(--radius); overflow-wrap: anywhere; }
.filter-status button { min-height: 44px; min-width: 80px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.empty-products { text-align: center; padding: 40px 22px; background: var(--surface); }
.empty-products>svg { margin-bottom: 12px; }
.empty-products h3 { font-size: 20px; }
.empty-products p { margin-block: 12px 22px; color: var(--muted); }
.catalog-loading { grid-column: 1/-1; align-self: center; text-align: center; color: var(--muted); }
.storage-notice, .no-script-notice { margin-bottom: 24px; padding: 14px 18px; border-inline-start: 3px solid var(--ink); background: var(--surface); font-size: 13px; line-height: 2; }
.product-grid:empty { display: none; }


.product-grid { gap:22px; min-height:0; }
.product-card { background:var(--paper); padding:8px 8px 14px; border-radius:14px; }
.product-image-wrap { border-radius:9px; }
.product-info { padding:12px 6px 0; }
.product-title { font-size:15px; }
.product-type { font-size:10px; }
.product-bottom { gap:10px; flex-direction:column; align-items:stretch; margin-top:6px; }
.product-price { font-size:15px; }
.add-button { width:100%; min-height:44px; margin-top:2px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font-size:12px; }
.favorite-button { width:40px; height:40px; top:4px; left:4px; }
.product-image-wrap .favorite-button { width:44px; height:44px; }
.gift-section { padding-block:70px; display:grid; grid-template-columns:38% 62%; align-items:center; gap:0; }
.gift-copy { padding:20px 12px 20px 40px; }
.gift-mark { width:32px; height:32px; margin-bottom:16px; color:var(--primary); }
.gift-copy h2 { font-size:clamp(30px,3vw,43px); font-weight:750; line-height:1.6; }
.gift-copy p { margin-block:20px 26px; font-size:14px; line-height:2; color:var(--muted); }
.gift-disclaimer { display:block; color:var(--muted); font-size:10px; margin-top:17px; }
.gift-composition { display:grid; grid-template-columns:1.12fr 1fr; align-items:start; gap:22px; padding:30px; border-radius:24px; background:var(--accent-soft); }
.gift-piece { min-width:0; background:var(--paper); padding:8px 8px 0; border-radius:12px; overflow:hidden; text-align:right; }
.gift-piece-image { display:block; aspect-ratio:1; overflow:hidden; border-radius:7px; }
.gift-piece>span:last-child { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 8px; font-size:12px; }
.gift-piece>span:last-child svg { width:18px; height:18px; }
.gift-pen { margin-top:72px; }
.selection-guide { display:grid; grid-template-columns:38% 62%; gap:0; padding-block:12px 70px; }
.guide-heading { padding:10px 12px 0 40px; }
.guide-heading h2 { font-size:30px; line-height:1.6; }
.guide-heading p { color:var(--muted); font-size:13px; margin-top:14px; }
.guide-questions { min-width:0; }
.guide-questions details { border-bottom:1px solid var(--line); }
.guide-questions details:first-child { border-top:1px solid var(--line); }
.guide-questions summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:70px; padding:15px 2px; font-size:15px; font-weight:550; }
.guide-questions summary::-webkit-details-marker { display:none; }
.guide-questions summary>span { display:grid; place-items:center; width:28px; height:28px; font-size:24px; font-weight:350; }
.guide-questions details[open] summary>span { transform:rotate(45deg); }
.guide-questions details>div { padding:0 2px 20px 28px; }
.guide-questions p { color:var(--muted); font-size:13px; line-height:2.1; max-width:630px; }
.guide-questions .text-link { margin-top:8px; }
summary:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
.site-footer { background:var(--chrome-soft); color:var(--ink); padding-top:48px; }
.footer-main { display:grid; grid-template-columns:1.3fr 1fr 1fr 1.15fr; gap:40px; padding-bottom:40px; }
.footer-brand p { font-size:12px; line-height:2; color:var(--chrome-muted); margin-top:20px; }
.footer-links { display:flex; flex-direction:column; align-items:flex-start; }
.footer-links h2 { font-size:13px; margin-block:4px 12px; font-weight:650; }
.footer-links a { display:flex; align-items:center; min-height:38px; font-size:12px; color:var(--chrome-muted); }
.footer-note p { font-size:21px; line-height:1.7; }
.footer-note .button { margin-top:20px; min-height:44px; font-size:12px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:18px; border-top:1px solid var(--chrome-line); color:var(--chrome-muted); font-size:10px; }
.footer-bottom a { min-height:44px; display:inline-flex; align-items:center; }
.site-footer :focus-visible { outline-color:var(--ink); }
.overlay { position: fixed; inset: 0; z-index: 80; background: var(--scrim); animation: fadeIn .18s; }
.cart-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 90; width: min(460px,100%); display: flex; flex-direction: column; padding: 28px; background: var(--paper); box-shadow: 10px 0 40px var(--drawer-shadow); animation: drawerIn .24s var(--ease); } /* taste-skill-ignore: shadow belongs to an actual modal overlay. */
.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 24px; }
.drawer-header h2 { font-size: 23px; font-weight: 600; }
.cart-items { flex: 1; overflow-y: auto; min-height: 0; padding-block: 12px; }
.cart-empty { text-align: center; padding: 70px 12px; color: var(--muted); }
.cart-empty svg { width: 36px; height: 36px; margin-bottom: 16px; }
.cart-row { display: flex; align-items: center; gap: 14px; padding: 16px 12px; background: var(--surface); margin-bottom: 12px; border-radius: var(--radius); }
.cart-row-art { width: 72px; height: 80px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden; }
.cart-row-art>img { width: 100%; height: 100%; object-fit: cover; }
.cart-row-copy { flex: 1; min-width: 0; }
.cart-row h3 { font-size: 14px; font-weight: 550; }
.cart-row p { color: var(--muted); font-size: 13px; margin-block: 3px 8px; }
.quantity-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.quantity-controls button { min-width: 44px; height: 44px; display: grid; place-items: center; background: var(--paper); border-radius: var(--radius); }
.quantity-controls svg { width: 16px; height: 16px; }
.quantity-controls span { min-width: 22px; text-align: center; font-size: 13px; }
.quantity-controls .cart-row-remove { margin-right: auto; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; font-size: 12px; }
.cart-summary { padding: 20px; background: var(--surface); margin-top: 16px; }
.cart-summary>div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cart-summary p { font-size: 13px; color: var(--muted); margin-block: 16px; }
.cart-summary .button { width: 100%; }
.search-dialog, .product-dialog { position: fixed; z-index: 90; left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--paper); border-radius: 12px; max-height: 90dvh; overflow-y: auto; box-shadow: 0 20px 60px var(--dialog-shadow); } /* taste-skill-ignore: shadow belongs to actual centered dialog overlays. */
.search-dialog { width: min(680px,calc(100% - 40px)); padding: 28px; }
.search-dialog label { display: block; margin-top: 24px; font-size: 14px; }
.search-field { display: flex; align-items: center; gap: 12px; margin-block: 10px 18px; }
.search-field input { width: 100%; min-width: 0; min-height: 48px; padding: 9px 12px; border: 1px solid var(--muted); border-radius: var(--radius); background: var(--white); font-size: 16px; }
.search-field input::placeholder { color: var(--muted); opacity: 1; }
.search-dialog>p { color: var(--muted); font-size: 12px; }
.product-dialog { width: min(820px,calc(100% - 40px)); display: grid; grid-template-columns: 1fr 1fr; direction: ltr; }
.detail-close { position: absolute; right: 10px; top: 10px; z-index: 5; background: var(--paper); }
.detail-image { min-height: 400px; overflow: hidden; background: var(--surface); }
.detail-image>.product-art { min-height: 400px; }
.detail-image>img { width: 100%; height: 100%; object-fit: contain; }
.detail-copy { direction: rtl; padding: 64px 28px 30px; }
.detail-copy h2 { font-size: 25px; line-height: 1.8; }
.detail-type { display: block; font-size: 13px; color: var(--muted); margin-top: 8px; }
.detail-copy p { color: var(--ink); font-size: 16px; margin-block: 20px; }
.detail-copy .product-price { font-size: 22px; margin-block: 22px; }
.detail-copy .button { width: 100%; }
.demo-small { display: block; font-size: 12px; line-height: 1.9; margin-top: 16px; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 32px); padding: 13px 20px; color: var(--paper); background: var(--ink); border-radius: var(--radius); font-size: 14px; pointer-events: none; opacity: 0; transform: translate(-50%,10px); transition: opacity .18s,transform .18s; }
.toast.visible { opacity: 1; transform: translate(-50%,0); }
.toast svg { width: 20px; height: 20px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawerIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.cart-drawer, .cart-items, .product-dialog, .search-dialog { overscroll-behavior: contain; }
.cart-drawer { padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)); }
.toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
html[data-input-mode="keyboard"] button, html[data-input-mode="keyboard"] .add-label>span, html[data-input-mode="keyboard"] .add-icon>span { transition: none; }
html[data-input-mode="keyboard"] button:active, html[data-input-mode="keyboard"] a.button:active { transform: none; }
html[data-input-mode="keyboard"] .overlay, html[data-input-mode="keyboard"] .cart-drawer { animation: none; }

@media (hover:hover) and (pointer:fine) {
  .desktop-nav a:hover,.shelf-links a:hover,.footer-links a:hover,.mobile-nav a:hover,.product-title button:hover { text-decoration:underline; text-underline-offset:5px; }
  .icon-button:hover,.saved-link:hover,.cart-toggle:hover,.button-outline:hover,.quantity-controls button:not(:disabled):hover,.shop-categories button:not([aria-pressed="true"]):hover { background:var(--hover); }
  .header-search:hover { border-color:var(--primary); }
  .filter-tabs button:not(.selected):hover { background:var(--accent-soft); }
  .button-dark:not(.is-added):hover,.add-button:not(.is-added):hover { background:var(--button-hover); color:var(--white); }
  .button-soft:hover { background:var(--accent-hover); }
  .text-link:hover { text-decoration-thickness:2px; }
  .glass-note:hover { background:rgb(255 255 255 / .88); }
  .category:hover .category-art { outline-color:var(--primary); }
  .favorite-button:hover { background:var(--accent-soft); }
  .gift-piece:hover>span:last-child { text-decoration:underline; text-underline-offset:4px; }
}
@media (min-width:901px) { .mobile-nav { display:none; } }
@media (max-width:1150px) {
  .nav-wrap { gap:28px; }
  .desktop-nav { gap:18px; font-size:12px; }
  .shelf-links { gap:16px; font-size:12px; }
  .hero-copy { padding:30px; }
  .hero h1 { font-size:48px; }
  .hero-actions { gap:12px; }
  .hero-bottom { margin-top:22px; }
  .hero-image-frame { min-height:430px; }
  .category-section { grid-template-columns:160px 1fr; gap:30px; }
  .shop-layout { grid-template-columns:170px minmax(0,1fr); gap:28px; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .product-bottom { flex-direction:row; align-items:center; }
  .add-button { width:auto; min-width:108px; }
  .collection-controls { align-items:flex-start; flex-direction:column; gap:10px; }
  .gift-composition { padding:22px; gap:16px; }
  .gift-copy { padding-left:26px; }
  .footer-main { gap:25px; }
}
@media (max-width:900px) {
  .nav-wrap { gap:20px; min-height:86px; }
  .desktop-nav,.nav-shelf { display:none; }
  .mobile-menu-toggle { display:grid; }
  .brand-logo { width:156px; }
  .nav-actions { gap:6px; }
  .saved-link { display:none; }
  .header-search .search-hint { display:none; }
  .header-search { font-size:11px; padding:10px 12px; }
  .cart-word { display:none; }
  .hero-window { grid-template-columns:44% 56%; }
  .hero-copy { padding:26px; }
  .hero h1 { font-size:40px; }
  .hero-description { font-size:12px; margin-top:16px; }
  .hero-actions { flex-direction:column; align-items:flex-start; margin-top:22px; gap:8px; }
  .hero-bottom { display:none; }
  .hero-image-frame { min-height:400px; }
  .glass-note { bottom:18px; left:18px; max-width:calc(100% - 36px); gap:10px; padding:12px; }
  .glass-note>svg { display:none; }
  .category-section { grid-template-columns:145px 1fr; gap:18px; padding-block:34px; }
  .category-intro h2 { font-size:25px; }
  .category-art { width:86px; height:86px; }
  .category strong { font-size:12px; }
  .category small { font-size:10px; }
  .category-list { gap:6px; }
  .shop-layout { grid-template-columns:150px minmax(0,1fr); gap:24px; }
  .shop-index h2 { font-size:26px; }
  .product-grid { gap:18px; }
  .product-bottom { flex-direction:column; align-items:stretch; }
  .add-button { width:100%; }
  .gift-copy h2 { font-size:31px; }
  .gift-copy p { font-size:12px; }
  .gift-copy .button { font-size:12px; padding-inline:18px; }
  .gift-composition { padding:18px; gap:12px; }
  .gift-piece>span:last-child { font-size:10px; padding:10px 3px; }
  .gift-pen { margin-top:48px; }
  .footer-main { grid-template-columns:1.3fr 1fr 1fr; }
  .footer-note { display:none; }
}
@media (max-width:700px) {
  html { scroll-padding-top:155px; }
  .announcement { padding:5px 18px; font-size:10px; }
  .nav-wrap { width:calc(100% - 36px); display:grid; grid-template-columns:1fr auto; gap:12px; padding-block:13px; }
  .brand-logo { width:150px; }
  .site-header .brand-caption { display:none; }
  .nav-actions { gap:10px; }
  .header-search { grid-row:2; grid-column:1/-1; min-height:44px; font-size:12px; }
  .header-search .search-hint { display:inline; }
  .hero { padding-top:18px; }
  .hero-window { grid-template-columns:1fr; border-radius:18px; }
  .hero-copy { padding:28px 26px; }
  .hero h1 { font-size:43px; line-height:1.4; }
  .hero-description { font-size:13px; margin-top:14px; }
  .hero-actions { flex-direction:row; align-items:center; margin-top:20px; gap:22px; }
  .hero-actions .button { font-size:12px; padding-inline:18px; }
  .hero-image-frame { min-height:0; height:auto; aspect-ratio:1.45; }
  .glass-note { bottom:16px; left:16px; padding:10px 13px; }
  .glass-note small { font-size:9px; }
  .glass-note strong { font-size:12px; }
  .category-section { grid-template-columns:1fr; gap:18px; padding-block:30px; }
  .category-intro { display:flex; justify-content:space-between; align-items:center; gap:18px; }
  .category-intro h2 { font-size:23px; }
  .category-intro h2 br { display:none; }
  .category-intro p { margin:0; font-size:10px; }
  .category-intro p br { display:none; }
  .category-list { gap:4px; }
  .category { padding:4px 0; }
  .category-art { width:72px; height:72px; border-width:3px; }
  .category strong { font-size:11px; margin-top:10px; }
  .category small { display:none; }
  .collection-section { padding-block:32px; }
  .shop-layout { grid-template-columns:1fr; gap:6px; }
  .shop-index h2 { font-size:26px; }
  .shop-index h2 br { display:none; }
  .shop-index>p { margin-top:8px; font-size:12px; }
  .shop-index>p br { display:none; }
  .shop-categories { display:none; }
  .shop-gift-link { display:none; }
  .collection-controls { display:block; min-height:0; margin-bottom:14px; }
  .filter-tabs { display:none; }
  .sample-note { width:100%; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .product-card { padding:6px 6px 12px; border-radius:12px; }
  .product-info { padding:10px 4px 0; }
  .product-title { font-size:13px; }
  .product-title button { line-height:1.8; }
  .product-type { font-size:9px; gap:4px; }
  .color-dot { width:5px; height:5px; }
  .product-price { font-size:13px; }
  .product-price small { font-size:10px; }
  .favorite-button { top:2px; left:2px; }
  .favorite-button svg { width:17px; height:17px; }
  .filter-status { padding:8px 12px; font-size:12px; gap:12px; }
  .gift-section { padding-block:38px; grid-template-columns:1fr; gap:24px; }
  .gift-copy { padding:0; }
  .gift-mark { display:none; }
  .gift-copy h2 { font-size:31px; }
  .gift-copy h2 br { display:none; }
  .gift-copy p { font-size:13px; margin-block:14px 20px; }
  .gift-composition { padding:22px; gap:15px; border-radius:18px; }
  .gift-piece>span:last-child { font-size:11px; }
  .gift-pen { margin-top:40px; }
  .selection-guide { grid-template-columns:1fr; padding-block:0 36px; gap:24px; }
  .guide-heading { padding:0; }
  .guide-heading h2 { font-size:26px; }
  .guide-heading h2 br { display:none; }
  .guide-heading p { font-size:12px; margin-top:10px; }
  .guide-heading p br { display:none; }
  .guide-questions summary { font-size:13px; gap:12px; min-height:66px; }
  .guide-questions p { font-size:12px; }
  .guide-questions details>div { padding-left:12px; }
  .site-footer { padding-top:32px; }
  .footer-main { grid-template-columns:1fr 1fr; gap:28px 18px; padding-bottom:26px; }
  .footer-brand { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .footer-brand p { margin:0; font-size:11px; }
  .footer-links a { min-height:44px; }
  .footer-links h2 { margin-bottom:6px; }
  .footer-bottom { flex-wrap:wrap; gap:8px 18px; padding-block:14px; }
  .footer-bottom p { order:3; width:100%; }
  .product-dialog { grid-template-columns:1fr; width:calc(100% - 28px); }
  .detail-image { aspect-ratio:1.2; min-height:0; }
  .detail-image>.product-art { min-height:0; }
  .detail-copy { padding:26px 22px; }
  .detail-copy h2 { font-size:23px; }
  .search-dialog { width:calc(100% - 28px); padding:22px; }
  .drawer-header h2 { font-size:21px; }
  .search-field { align-items:stretch; flex-direction:column; }
  .cart-drawer { padding:22px 18px max(22px,env(safe-area-inset-bottom)); }
}
@media (max-width:359px) {
  .announcement { font-size:9px; gap:8px; }
  .brand-logo { width:150px; }
  .nav-actions { gap:6px; }
  .hero h1 { font-size:39px; }
  .hero-copy { padding:25px 20px; }
  .hero-actions { gap:12px; }
  .category-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .category-intro p { display:none; }
  .product-grid { grid-template-columns:1fr; }
  .product-bottom { flex-direction:row; align-items:center; }
  .add-button { width:auto; }
  .gift-composition { padding:12px; gap:10px; }
  .gift-piece>span:last-child { font-size:9px; }
  .gift-piece>span:last-child svg { width:14px; }
  .footer-brand { flex-direction:column; align-items:flex-start; gap:14px; }
}
@media (max-height:500px) {
  .cart-drawer { overflow-y:auto; }
  .cart-items { flex:none; overflow:visible; }
  .drawer-header,.cart-summary { flex-shrink:0; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}

/* v10: an album that turns from its binding; suspended objects stay clear of copy. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero-window { grid-template-columns:42% 58%; }
.hero-copy { padding-top:0; padding-bottom:32px; justify-content:flex-start; }
.hero-decor { position:relative; display:flex; align-items:flex-start; justify-content:space-between; width:100%; max-width:360px; height:132px; margin-bottom:12px; pointer-events:none; user-select:none; }
.hanging-object { position:relative; display:block; width:95px; padding-top:34px; transform-origin:50% 0; }
.hanging-thread { position:absolute; top:0; left:50%; width:1px; height:44px; background:#193b2d50; transform:translateX(-50%); }
.hanging-thread::after { content:""; position:absolute; bottom:-4px; left:-3px; width:6px; height:6px; border-radius:50%; border:1px solid #193b2d70; background:var(--accent-soft); z-index:2; }
.hanging-item { display:block; width:100%; height:88px; object-fit:contain; filter:drop-shadow(7px 12px 7px #193b2d24); }
.hanging-pencil { width:94px; padding-top:22px; }
.hanging-pencil .hanging-thread { height:34px; left:76%; }
.hanging-pencil .hanging-item { transform:rotate(-14deg); }
.hanging-notebook { width:80px; padding-top:35px; }
.hanging-notebook .hanging-thread { height:43px; }
.hanging-notebook .hanging-item { transform:rotate(8deg); }
.hanging-eraser { width:108px; padding-top:27px; }
.hanging-eraser .hanging-thread { height:46px; left:62%; }
.hanging-eraser .hanging-item { transform:rotate(-10deg); }
.hero h1 { font-size:clamp(42px,4.1vw,58px); }
.hero-bottom { margin-top:24px; }
.hero-carousel { position:relative; display:flex; flex-direction:column; min-width:0; background:var(--paper); }
.hero-carousel:focus-visible { outline:3px solid var(--primary); outline-offset:-4px; }
.hero-slides { position:relative; flex:1; min-height:510px; perspective:1400px; isolation:isolate; background:var(--surface); overflow:hidden; touch-action:pan-y pinch-zoom; }
.hero-slide { position:absolute; inset:0; transform-origin:right center; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; background:var(--paper); }
.hero-slide.is-active { z-index:2; }
.hero-slide.is-leaving { z-index:3; }
.hero-slide.is-entering { z-index:4; }
.hero-slide::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#193b2d40,transparent 60%); opacity:var(--turn-shadow,0); }
.hero-slide.is-leaving::after { opacity:.35; }
.hero-slide.is-entering::after { opacity:.12; }
.hero-slide .hero-image { object-position:center; }
.hero-carousel-controls { position:absolute; z-index:5; bottom:18px; left:50%; transform:translateX(-50%); display:none; height:30px; min-height:0; width:132px; max-width:calc(100% - 24px); align-items:center; justify-content:center; padding:0; border:1px solid var(--glass-edge); border-radius:999px; background:var(--glass); backdrop-filter:var(--glass-filter); -webkit-backdrop-filter:var(--glass-filter); box-shadow:var(--glass-shadow); }
.hero-slide .glass-note { top:22px; right:22px; bottom:auto; left:auto; }
.hero-carousel[data-ready="true"] .hero-carousel-controls { display:flex; }
.hero-pagination,.hero-dots { display:flex; align-items:center; gap:0; height:30px; }
.hero-prev,.hero-next,.hero-dots button { display:grid; place-items:center; min-width:44px; height:44px; border-radius:50%; padding:10px; }
.hero-prev,.hero-next { display:none; }
.hero-prev svg,.hero-next svg { width:19px; height:19px; }
.hero-prev svg { transform:rotate(180deg); }
.hero-dots button { min-width:44px; padding:10px 8px; }
.hero-dots span { display:block; width:5px; height:5px; background:#b5c5bb; border-radius:50%; }
.hero-dots [aria-current="true"] span { width:16px; border-radius:5px; background:var(--primary); }
.editorial-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; }
.editorial-heading h2 { font-size:32px; line-height:1.6; }
.editorial-heading p { font-size:13px; color:var(--muted); margin-top:8px; }
.reviews-section { padding-block:48px 52px; background:var(--surface); }
.review-sample-label { border:1px solid var(--line); border-radius:5px; padding:5px 10px; font-size:11px; color:var(--muted); }
.review-disclosure { font-size:12px; color:var(--muted); margin-block:-12px 26px; }
.review-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; }
.review-note { margin:0; padding:0 24px 0 0; border-inline-start:2px solid var(--line); }
.quote-mark { display:block; font:72px/1 Georgia,serif; height:48px; color:var(--primary); }
.review-note blockquote { margin:0; font-size:15px; line-height:2.1; }
.review-note figcaption { display:flex; align-items:center; gap:12px; margin-top:22px; font-size:12px; }
.review-note figcaption small { display:block; color:var(--muted); font-size:10px; margin-top:2px; }
.review-avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--accent-soft); }
.review-avatar svg { width:18px; height:18px; }
.journal-section { padding-block:62px 72px; }
.journal-label { color:var(--primary); font-size:13px; }
.journal-layout { display:grid; grid-template-columns:1.05fr 1fr; gap:44px; }
.journal-feature { min-width:0; }
.journal-image-link { display:block; overflow:hidden; border-radius:14px; aspect-ratio:1.8; }
.journal-image-link img { width:100%; height:100%; object-fit:cover; }
.journal-copy { padding:18px 0 0; }
.journal-topic { display:block; font-size:11px; color:var(--muted); margin-bottom:7px; }
.journal-copy h3 { font-size:23px; line-height:1.8; }
.journal-copy p { font-size:13px; color:var(--muted); margin-top:8px; }
.journal-section .text-link { gap:12px; margin-top:10px; }
.journal-section .text-link svg { width:17px; height:17px; }
.journal-side { display:grid; grid-template-rows:1fr 1fr; gap:24px; }
.journal-entry { display:grid; grid-template-columns:42% 1fr; gap:20px; align-items:center; min-width:0; }
.journal-entry-image { display:block; min-width:0; border-radius:12px; overflow:hidden; aspect-ratio:1; }
.journal-entry-image img { width:100%; height:100%; object-fit:cover; }
.journal-entry h3 { font-size:18px; line-height:1.8; }
.journal-entry p { font-size:12px; line-height:1.9; color:var(--muted); margin-top:7px; }
@media (hover:hover) and (pointer:fine) {
  .hero-prev:hover,.hero-next:hover,.hero-dots button:hover { background:var(--accent-soft); }
  .journal-section h3 a:hover { text-decoration:underline; text-underline-offset:6px; }
}
@media (max-width:1150px) {
  .shelf-links { gap:14px; }
  .desktop-nav { gap:16px; }
  .hero-slides { min-height:500px; }
  .hero-decor { height:120px; margin-bottom:8px; }
  .hero h1 { font-size:46px; }
  .review-grid { gap:24px; }
  .review-note { padding-inline-start:18px; }
  .journal-layout { gap:28px; }
  .journal-entry { gap:16px; }
  .journal-entry h3 { font-size:16px; }
  .journal-entry p { display:none; }
}
@media (max-width:900px) {
  .hero-window { grid-template-columns:44% 56%; }
  .hero h1 { font-size:40px; }
  .hero-decor { height:108px; }
  .hanging-object { width:75px; }
  .hanging-item { height:72px; }
  .hanging-notebook { width:64px; }
  .hanging-eraser { width:83px; }
  .hero-slides { min-height:450px; }
  .review-grid { gap:18px; }
  .review-note blockquote { font-size:13px; }
  .journal-layout { grid-template-columns:1fr 1fr; }
  .journal-entry { grid-template-columns:38% 1fr; gap:12px; }
  .journal-copy h3 { font-size:20px; }
  .journal-entry h3 { font-size:15px; }
}
@media (max-width:700px) {
  .hero-window { position:relative; display:block; }
  /* Keep the page title accessible; mobile presents only the three photo slides. */
  .hero-window > .hero-copy { position:absolute; width:1px; height:1px; min-height:0; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; }
  .hero-copy > :not(h1), .hero-copy::before { display:none; }
  .hero-slides { flex:none; min-height:0; aspect-ratio:1.25; }
  .hero-carousel-controls { bottom:16px; }
  .hero-slide .glass-note { top:14px; right:14px; max-width:calc(100% - 28px); }
  .editorial-heading { flex-wrap:wrap; gap:12px; margin-bottom:22px; }
  .editorial-heading h2 { font-size:27px; }
  .editorial-heading p { font-size:12px; }
  .reviews-section { padding-block:32px; }
  .review-disclosure { line-height:1.9; font-size:11px; margin-block:0 24px; }
  .review-grid { grid-template-columns:1fr; gap:28px; }
  .review-note { padding-inline-start:18px; }
  .quote-mark { font-size:58px; height:38px; }
  .review-note blockquote { font-size:14px; }
  .review-note figcaption { margin-top:14px; }
  .journal-section { padding-block:36px 44px; }
  .journal-layout { grid-template-columns:1fr; gap:28px; }
  .journal-copy h3 { font-size:21px; }
  .journal-side { gap:24px; }
  .journal-entry { grid-template-columns:36% 1fr; gap:16px; }
  .journal-entry h3 { font-size:16px; }
  .journal-entry .text-link { font-size:12px; margin-top:4px; }
}
@media (max-width:359px) {
  .hero h1 { font-size:39px; }
  .journal-entry h3 { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .hanging-object { transform:none !important; }
  .hero-slide { transform:none !important; }
}

/* v14 material surfaces: static backdrop blur, bright edges, readable content. */
.cart-drawer, .search-dialog, .product-dialog {
  background:rgb(246 253 249 / .9);
  border:1px solid var(--glass-edge);
  backdrop-filter:var(--glass-filter);
  -webkit-backdrop-filter:var(--glass-filter);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .glass-note, .hero-carousel-controls, .favorite-button, .cart-drawer, .search-dialog, .product-dialog { background:#f2faf5; }
}
@media (prefers-reduced-transparency:reduce) {
  .glass-note, .hero-carousel-controls, .favorite-button, .cart-drawer, .search-dialog, .product-dialog { background:#f2faf5; backdrop-filter:none; -webkit-backdrop-filter:none; }
}