/* =========================================================================
   DEPTHS COFFEE — pages/shop.css (shop.html · store listing)
   No shop design exists: composed from HOME lineup 408-499 (shead/filters/PCARD grid),
   PDP B2B band 545-559 (dark band) and BOARD mobile lineup 588-605 / sticky strip 238.
   Components come from base.css: .inner-head .filters .inp .line-grid .pcard .notice
   .btn .kakao-btn .tlink .band--ink .eyebrow — this file only arranges them.
   ========================================================================= */
@layer pages {

  /* ---- page head ---- */
  body.pg-shop .shop-list { padding-bottom: clamp(40px,5vw,72px); }
  body.pg-shop .inner-head .t { flex: 1 1 420px; min-width: 0; }
  body.pg-shop .inner-head .meta { flex: none; margin-left: auto; text-align: right; white-space: nowrap; }

  /* ---- filter bar: categories left, search + sort right (HOME 420-425) ---- */
  body.pg-shop .shop-bar { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; border-bottom: 1px solid var(--ink); }
  body.pg-shop .shop-bar .filters { border-bottom: 0; }
  body.pg-shop .shop-bar .tools { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 8px; padding-block: 6px; }
  body.pg-shop #shop-search {
    width: 250px; padding-left: 34px; -webkit-appearance: none; appearance: none;
    background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230E0E0E' stroke-opacity='.55' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") no-repeat 12px center;
  }
  body.pg-shop #shop-search::-webkit-search-decoration { -webkit-appearance: none; }
  body.pg-shop #shop-sort { width: auto; min-width: 132px; cursor: pointer; }
  body.pg-shop #shop-count { padding: 12px 0; font: 400 11px/1.5 var(--mono); letter-spacing: .06em; color: var(--ink-62); }
  @media (min-width: 761px) {
    body.pg-shop .shop-bar .filters button:last-child { border-right: 0; }
    /* compact fields sized to the 48px category row; phones keep base 14/16px (no iOS focus zoom) */
    body.pg-shop .shop-bar .inp { padding-block: 7px; font-size: 13px; }
  }
  /* bar wraps: tools take their own full row under the categories */
  @media (min-width: 761px) and (max-width: 1080px) {
    body.pg-shop .shop-bar .tools { flex-basis: 100%; justify-content: flex-start; padding-block: 8px; border-top: 1px solid var(--line); }
    body.pg-shop #shop-search { flex: 1 1 auto; width: auto; min-width: 0; }
  }

  /* ---- PCARD grid: 1px dividers, no rule on the outer right edge (HOME 427-491) ---- */
  body.pg-shop #shop-grid { margin-right: -1px; border-top: 1px solid var(--line); clip-path: inset(0 1px 0 0); }
  body.pg-shop #shop-grid .pcard:focus-visible { outline-offset: -3px; }
  /* sold out: ink label on a dimmed image — the base paper scrim lets label artwork text bleed into 'SOLD OUT' */
  body.pg-shop #shop-grid .pcard .soldout { inset: auto; top: 50%; left: 50%; padding: 9px 14px; background: var(--ink); color: var(--paper); transform: translate(-50%, -50%); white-space: nowrap; }
  body.pg-shop #shop-grid .pcard .imgw:has(> .soldout) img { opacity: .42; filter: grayscale(1); }
  @media (max-width: 760px) {
    body.pg-shop #shop-grid .pcard .soldout { padding: 7px 10px; font-size: 11px; letter-spacing: .12em; }
  }

  /* ---- empty result ---- */
  body.pg-shop #shop-grid .empty-line { padding: clamp(28px,4vw,56px) 0; }
  body.pg-shop .empty-line .notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; max-width: 640px; margin-inline: auto; padding: 18px 20px; text-align: left; }
  body.pg-shop .empty-line .msg { flex: 1 1 260px; min-width: 0; font: 400 13px/1.6 var(--kr); letter-spacing: -.01em; color: var(--ink-62); }
  body.pg-shop .empty-line .msg b { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }

  /* ---- B2B dark band (PDP 545-559) ---- */
  /* band sits right above the ink footer: a wrap-width hairline keeps the two apart */
  body.pg-shop .shop-b2b .in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(22px,3vw,48px); padding-block: clamp(30px,3.8vw,56px); border-bottom: 1px solid var(--inv-line); }
  body.pg-shop .shop-b2b .copy { flex: 1 1 340px; min-width: 0; }
  body.pg-shop .shop-b2b h3 { margin-top: 16px; font-size: clamp(22px,3.2vw,36px); line-height: 1.14; letter-spacing: -.04em; }
  body.pg-shop .shop-b2b .acc { color: var(--acc); }
  body.pg-shop .shop-b2b p { max-width: 520px; margin-top: 16px; font-size: 14.5px; line-height: 1.8; color: var(--inv-66); }
  body.pg-shop .shop-b2b .acts { display: flex; flex: none; flex-direction: column; align-items: flex-start; gap: 12px; }
  body.pg-shop .shop-b2b .alt { font: 400 11.5px/1.5 var(--mono); letter-spacing: .04em; color: var(--inv-62); }
  body.pg-shop .shop-b2b .alt .tlink--acc { font-size: 11.5px; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; }
  body.pg-shop .shop-b2b .alt .tlink--acc:hover { color: var(--paper); }

  /* ---- mobile (BOARD 588-605) ---- */
  @media (max-width: 760px) {
    body.pg-shop .shop-list { padding-bottom: 28px; }
    body.pg-shop .inner-head { padding: 22px 0 16px; border-bottom: 0; }
    body.pg-shop .inner-head h1 { margin-top: 12px; }
    body.pg-shop .inner-head .lead { margin-top: 10px; font-size: 14px; line-height: 1.7; }
    body.pg-shop .inner-head .meta { display: none; }

    /* the bar dissolves so the category strip can stick for the whole list */
    body.pg-shop .shop-bar { display: contents; }
    body.pg-shop .shop-bar .filters {
      position: sticky; top: calc(var(--head-h) - 1px); z-index: 40; /* top rule tucks under the header rule */
      gap: 8px; margin-inline: calc(-1 * var(--gut)); padding: 10px var(--gut);
      scroll-padding-inline: var(--gut);
      background: rgba(252,252,250,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      border-block: 1px solid var(--ink);
    }
    body.pg-shop .shop-bar .tools { justify-content: stretch; margin-top: 12px; padding: 0; }
    body.pg-shop .shop-bar .inp { min-height: 46px; padding-block: 10px; }
    body.pg-shop #shop-search { flex: 1 1 auto; width: auto; min-width: 0; }
    body.pg-shop #shop-sort { flex: none; min-width: 0; width: 118px; }
    body.pg-shop #shop-count { padding: 12px 0 10px; }

    body.pg-shop #shop-grid { margin-inline: calc(-1 * var(--gut)); clip-path: none; }
    body.pg-shop #shop-grid > .pcard:nth-child(2n) { border-right: 0; }
    body.pg-shop #shop-grid .empty-line { padding: 22px var(--gut); }
    body.pg-shop .empty-line .notice { padding: 16px; }
    body.pg-shop .empty-line .notice .btn { flex: 1 1 100%; }

    body.pg-shop .shop-b2b .in { gap: 16px; padding-block: 26px; }
    body.pg-shop .shop-b2b .copy { flex-basis: 100%; }
    body.pg-shop .shop-b2b h3 { margin-top: 12px; font-size: 21px; }
    body.pg-shop .shop-b2b p { margin-top: 12px; font-size: 14px; line-height: 1.75; }
    body.pg-shop .shop-b2b .acts { flex: 1 1 100%; align-items: stretch; gap: 4px; }
    body.pg-shop .shop-b2b .kakao-btn { min-height: 48px; font-size: 12px; }
    body.pg-shop .shop-b2b .alt { display: flex; align-items: center; justify-content: center; min-height: 44px; }
    body.pg-shop .shop-b2b .alt .tlink--acc { margin-left: .4em; }
  }
}