/* Product discovery, using the storefront's existing palette and product cards. */
.shop-page .notice { margin:0; }
.shop-page :is(a,button,input,select):focus-visible { outline:2px solid var(--clover-deep); outline-offset:4px; }
.shop-skip { position:fixed; z-index:200; top:10px; left:10px; padding:10px 18px; border-radius:8px; background:var(--paper); transform:translateY(-150%); }
.shop-skip:focus { transform:none; }
.shop-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.shop-breadcrumb { display:flex; gap:12px; padding-top:28px; font-size:11px; color:var(--ink-soft); }
.shop-breadcrumb a:hover { text-decoration:underline; text-underline-offset:4px; }
.shop-intro { margin:47px 0 32px; text-align:center; }
.shop-intro>.en { color:var(--clover-deep); font-size:20px; margin:0 0 12px; }
.shop-intro h1 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(25px,3vw,34px); font-weight:500; letter-spacing:.1em; line-height:1.75; margin:0; }
.shop-intro__break { display:none; }
.shop-intro__lead { color:var(--ink-soft); font-size:12px; line-height:2; margin:18px 0 0; }
.shop-search-area { max-width:660px; margin:0 auto 52px; }
.shop-search { display:flex; align-items:center; min-width:0; gap:13px; padding:7px 8px 7px 22px; border:1px solid var(--sand); border-radius:999px; background:var(--paper); }
.shop-search>svg { flex:none; width:21px; height:21px; fill:none; stroke:var(--clover-deep); stroke-width:1.4; stroke-linecap:round; }
.shop-search input { min-width:0; flex:1; width:100%; border:0; background:transparent; font:inherit; font-size:13px; color:var(--ink); height:40px; outline:none; }
.shop-search input::placeholder { color:var(--ink-soft); opacity:1; }
.shop-search button { flex:none; border:0; padding:12px 26px; border-radius:999px; background:var(--clover-deep); color:#fff; font-size:12px; }
.shop-search:focus-within { border-color:var(--clover-deep); box-shadow:0 0 0 2px #557d5012; }
.shop-keywords { display:flex; justify-content:center; align-items:baseline; gap:12px; margin-top:14px; font-size:10px; color:var(--ink-soft); }
.shop-keywords>span { flex:none; }
.shop-keywords>div { display:flex; justify-content:center; flex-wrap:wrap; gap:4px 13px; }
.shop-keywords a { font-size:11px; border:0; background:transparent; padding:3px 0; color:var(--ink-soft); text-underline-offset:4px; }
.shop-keywords a::before { content:"#"; margin-right:3px; opacity:.6; }
.shop-keywords a:hover,.shop-keywords a[aria-current] { color:var(--clover-deep); text-decoration:underline; }
.shop-layout { display:grid; grid-template-columns:192px minmax(0,1fr); gap:38px; padding-top:30px; border-top:1px solid var(--sand); align-items:start; }
.shop-filter { min-width:0; }
.shop-filter>.en { margin:0; color:var(--clover-deep); font-size:18px; }
.shop-filter h2 { margin:3px 0 18px; font-weight:500; font-size:13px; }
.shop-categories { display:grid; gap:5px; }
.shop-categories a { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; min-height:43px; width:100%; text-align:left; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--ink-soft); padding:10px 12px; font-size:11px; }
.shop-categories a span:last-child { color:inherit; opacity:.72; font-size:10px; letter-spacing:0; }
.shop-categories a[aria-current] { background:var(--sage); color:var(--clover-deep); }
.shop-categories a:hover { border-color:var(--sand); }
.shop-filter__column { display:grid; grid-template-columns:1fr auto; margin-top:29px; padding:22px 13px; border-top:1px solid var(--sand); font-size:11px; line-height:1.9; }
.shop-filter__column .en { grid-column:1/-1; margin-bottom:8px; color:var(--rose); font-size:18px; }
.shop-filter__column>span:last-child { align-self:end; font-size:20px; color:var(--clover-deep); }
.shop-results { min-width:0; }
.shop-results__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.shop-results__head h2 { margin:0; font-size:17px; font-weight:500; line-height:1.6; overflow-wrap:anywhere; }
.shop-count { margin:6px 0 0; font-size:11px; color:var(--ink-soft); }
.shop-count strong { color:var(--ink); font-size:15px; font-weight:500; margin-right:4px; }
.shop-sort { display:flex; align-items:center; gap:10px; font-size:10px; color:var(--ink-soft); }
.shop-sort select { max-width:100%; appearance:auto; font:inherit; font-size:11px; color:var(--ink); background:var(--paper); border:1px solid var(--sand); border-radius:8px; min-height:38px; padding:7px 8px; }
.shop-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 17px; }
.shop-grid .p-card { border:1px solid #e4d8c559; border-radius:17px; }
.shop-grid .p-card__img { padding:12px; }
.shop-grid .p-card__body { padding:15px 13px; }
.shop-grid .p-card__name { min-height:3.3em; }
.shop-grid .p-card__price { font-size:15px; letter-spacing:.01em; }
.shop-grid .p-card__price small { font-size:9px; }
.shop-grid .btn-cart { width:34px; height:34px; }
.shop-grid .btn-cart svg { width:19px; height:19px; }
.shop-active-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.shop-active-filters button { max-width:100%; font-size:10px; border:1px solid var(--sand); border-radius:999px; background:transparent; padding:5px 11px; overflow-wrap:anywhere; text-align:left; }
.shop-active-filters button span { margin-left:8px; }
.shop-active-filters .shop-clear { border:0; color:var(--clover-deep); text-decoration:underline; text-underline-offset:4px; }
.shop-empty { text-align:center; background:var(--paper); border:1px solid var(--beige); border-radius:20px; padding:50px 18px; }
.shop-empty>svg { width:46px; height:46px; fill:none; stroke:var(--clover-deep); stroke-width:1.2; stroke-linecap:round; margin-bottom:12px; }
.shop-empty h3 { font-size:14px; font-weight:500; margin:0 0 12px; line-height:1.8; }
.shop-empty p { font-size:12px; color:var(--ink-soft); margin:0 0 24px; }
.shop-empty .btn { font-size:12px; }
.shop-back { display:table; font-size:12px; color:var(--clover-deep); margin:56px auto 76px; text-underline-offset:6px; }
.shop-back:hover { text-decoration:underline; }
.shop-footer { padding:44px 0 24px; background:var(--beige); border-top:1px solid var(--sand); }
.shop-footer__in { display:flex; justify-content:space-between; gap:36px; }
.shop-footer .logo { font-size:16px; }
.shop-footer__in>div>p { margin:18px 0 0; font-size:11px; color:var(--ink-soft); }
.shop-footer nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:17px 38px; font-size:12px; }
.shop-footer nav a:hover { text-decoration:underline; text-underline-offset:4px; }
.shop-footer__copy { text-align:center; font-size:10px; color:var(--ink-soft); margin:40px 0 0; }
.shop-page .bnav svg { flex:none; }
@media(max-width:1100px) {
  .shop-layout { grid-template-columns:170px minmax(0,1fr); gap:28px; }
  .shop-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:860px) {
  .shop-breadcrumb { padding-top:20px; font-size:10px; }
  .shop-intro { margin:31px 0 27px; }
  .shop-search-area { margin-bottom:32px; }
  .shop-layout { grid-template-columns:minmax(0,1fr); gap:28px; padding-top:25px; }
  .shop-filter>.en { display:none; }
  .shop-filter h2 { margin:0 0 13px; font-size:12px; }
  .shop-categories { display:flex; flex-wrap:wrap; gap:7px; }
  .shop-categories a { width:auto; min-height:39px; padding:9px 13px; border:1px solid var(--sand); border-radius:999px; font-size:10px; gap:9px; }
  .shop-filter__column { display:none; }
  .shop-results__head h2 { font-size:16px; }
  .shop-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 12px; }
  .shop-grid .p-card__body { padding:12px 10px; }
  .shop-grid .p-card__name { font-size:10px; }
  .shop-sort>span { display:none; }
  .shop-footer__in { gap:24px; }
  .shop-footer nav { gap:13px 20px; font-size:11px; }
}
@media(max-width:640px) {
  .shop-intro__break { display:block; }
  .shop-intro>.en { font-size:19px; }
  .shop-intro__lead { font-size:11px; }
  .shop-search { padding-left:15px; gap:8px; }
  .shop-search input { font-size:11px; }
  .shop-search button { padding:11px 19px; }
  .shop-keywords { display:block; text-align:center; }
  .shop-keywords>span { display:none; }
  .shop-keywords>div { gap:4px 16px; }
  .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
  .shop-results__head { align-items:center; gap:10px; }
  .shop-results__head h2 { font-size:14px; }
  .shop-results__head>div { flex:1; min-width:0; }
  .shop-sort { flex:none; }
  .shop-sort select { max-width:122px; font-size:10px; }
  .shop-categories { gap:7px 6px; }
  .shop-categories a { padding:8px 10px; font-size:10px; gap:7px; }
  .shop-back { margin:38px auto 50px; }
  .shop-footer__in { flex-direction:column; }
  .shop-footer nav { gap:13px 20px; }
}
@media(max-width:360px) {
  .shop-page .container { width:calc(100% - 28px); }
  .shop-search { gap:6px; padding-left:12px; }
  .shop-search input { font-size:10px; }
  .shop-search button { padding:11px 14px; }
  .shop-grid { gap:13px 10px; }
  .shop-grid .p-card__price { font-size:13px; }
  .shop-grid .p-card__img { padding:10px; }
  .shop-grid .p-card__body { padding:11px 9px; }
}
@media(prefers-reduced-motion:reduce) {
  .shop-page { scroll-behavior:auto; }
  .shop-page *, .shop-page *::before, .shop-page *::after { scroll-behavior:auto!important; transition:none!important; }
}