/* =========================================================
   SHOP — one screen: header, icon filters, sliding row of cards
   ========================================================= */
.shop {
  --sh-ink: #0f2a20;
  --sh-muted: #6a655d;
  --sh-gold: #b98a4a;
  --sh-green: #0f3a2a;
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: clamp(26px, 4.4vh, 64px) 0 clamp(18px, 3vh, 48px);
  background:
    radial-gradient(ellipse 50% 50% at 50% 0%, rgba(255, 240, 214, .7), transparent 70%),
    linear-gradient(180deg, #fbf6ee 0%, #f7efe4 100%);
}

/* soft flowers down both edges (from the photo) + gold sprig top right */
.shop-flowers { position: absolute; top: 0; bottom: 0; z-index: 0; width: clamp(70px, 9vw, 170px); pointer-events: none; background: url("../img/shop.webp") no-repeat; }
.shop-flowers-l { left: 0; background-position: 0 50%; background-size: auto 100%; -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent); mask-image: linear-gradient(90deg, #000 35%, transparent); }
.shop-flowers-r { right: 0; background-position: 100% 100%; background-size: auto 100%; -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent), linear-gradient(180deg, transparent 40%, #000 70%); -webkit-mask-composite: source-in; mask-image: linear-gradient(270deg, #000 30%, transparent), linear-gradient(180deg, transparent 40%, #000 70%); mask-composite: intersect; }
.shop-sprig { position: absolute; right: 0; top: 0; z-index: 0; width: clamp(160px, 17vw, 300px); height: auto; opacity: .9; pointer-events: none; }

.shop-wrap { position: relative; z-index: 1; width: min(1560px, 100%); margin-inline: auto; padding-inline: clamp(16px, 7vw, 140px); }

/* header */
.shop .shop-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: clamp(12px, 2.2vh, 26px); }
.shop .eyebrow { color: #a8813f; font-weight: 800; letter-spacing: .28em; margin-bottom: clamp(8px, 1.4vh, 14px); }
.shop .eyebrow::before { width: 40px; opacity: 1; background: var(--sh-gold); }
.shop h2 { margin: 0; color: var(--sh-ink); font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem, min(3.2vw, 5.8vh), 3.4rem); line-height: 1.05; letter-spacing: -.02em; }
.shop h2 em .w-i { background: linear-gradient(180deg, #c99a4e 0%, #a8742c 55%, #7d501c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shop .shop-lede { max-width: 460px; margin-top: clamp(20px, 4vh, 44px); color: var(--sh-muted); font-size: clamp(.9rem, min(1.05vw, 2vh), 1.02rem); line-height: 1.6; }

/* filter chips with icons */
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(6px, 1.4vh, 18px); }
.shop .filters { margin: 0; gap: 10px; flex-wrap: wrap; }
.shop .filter {
  display: inline-flex; align-items: center; gap: 9px;
  padding: .62em 1.05em .62em .95em;
  font-family: var(--sans); font-size: .9rem; font-weight: 600; color: var(--sh-ink);
  border: 1px solid rgba(185, 138, 74, .22); background: rgba(255, 253, 249, .85);
  box-shadow: 0 8px 18px -14px rgba(70, 48, 16, .4);
  transition: color .4s var(--ease), border-color .4s, transform .4s var(--ease);
}
.shop .filter:hover { transform: translateY(-2px); border-color: rgba(185, 138, 74, .5); }
.shop .filter { white-space: nowrap; flex: none; }
.shop .filter svg { width: 20px; height: 20px; fill: none; stroke: #b27d31; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.shop .filter sup {
  margin: 0; opacity: 1; top: 0;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center;
  font-size: .7rem; font-weight: 700; color: #7a5520; background: #f3e8d6;
}
.shop .filter[aria-selected="true"] { color: #fff; border-color: transparent; background: transparent; box-shadow: none; }
.shop .filter[aria-selected="true"] svg { stroke: #f2e3c2; }
.shop .filter[aria-selected="true"] sup { background: rgba(255, 255, 255, .16); color: #fff; }
.shop .filter-pill { background: var(--sh-green); box-shadow: 0 12px 24px -12px rgba(10, 50, 30, .7); }

.shop-nav { display: flex; gap: 10px; flex: none; }
.shop-arrow { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #c9a063; color: var(--sh-ink); background: rgba(255, 253, 249, .8); transition: background .3s, color .3s, opacity .3s, transform .4s var(--ease); }
.shop-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shop-arrow:hover { transform: scale(1.06); }
.shop-arrow-solid { background: var(--sh-green); border-color: var(--sh-green); color: #fff; }
.shop-arrow:disabled { opacity: .35; pointer-events: none; }

/* the sliding row */
.p-rail { position: relative; margin-inline: -12px; }
.shop .p-grid {
  display: grid; grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: calc((100% - 3 * clamp(14px, 1.6vw, 26px)) / 4);
  gap: clamp(14px, 1.6vw, 26px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 12px 12px 18px;
  scrollbar-width: none;
  cursor: grab;
}
.shop .p-grid::-webkit-scrollbar { display: none; }
.shop .p-grid.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.shop .p-grid.dragging * { pointer-events: none; }

/* card */
.shop .p-card {
  scroll-snap-align: start;
  padding: 0; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, #fffdf9 0%, #fbf5ec 100%);
  border: 1px solid rgba(185, 138, 74, .14);
  box-shadow: 0 24px 46px -32px rgba(70, 48, 16, .45), 0 1px 0 #fff inset;
}
.shop .p-card:hover { transform: translateY(-8px); box-shadow: 0 34px 56px -30px rgba(70, 48, 16, .5), 0 1px 0 #fff inset; }
.shop .p-card.is-in-cart { border-color: rgba(15, 58, 42, .35); }

.shop .p-art { aspect-ratio: 1.6; border-radius: 0; background: radial-gradient(circle at 30% 22%, #fff 0%, var(--tint) 75%); }
.shop .p-art::before { display: none; }
.shop .p-art.has-photo .p-art-inner { position: absolute; inset: 0; width: 100%; overflow: hidden; transform: none; }
.shop .p-art.has-photo .p-art-inner img { position: absolute; max-width: none; height: auto; filter: none; transition: transform 1.2s var(--ease); transform-origin: 50% 50%; }
.shop .p-card:hover .p-art.has-photo .p-art-inner img { transform: scale(1.06); }
.shop .p-art:not(.has-photo) .p-art-inner { width: 58%; }

.shop .p-badge { top: 14px; left: 14px; padding: .45em .95em; font-size: .66rem; font-weight: 700; letter-spacing: .14em; color: #7a5520; background: rgba(255, 246, 228, .92); }
.shop .p-badge.is-dark { color: #fff; background: var(--sh-green); }
.p-fav {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--sh-ink);
  box-shadow: 0 8px 18px -10px rgba(40, 30, 10, .45);
  transition: transform .4s var(--ease), color .3s;
}
.p-fav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: fill .3s; }
.p-fav:hover { transform: scale(1.1); }
.p-fav.on { color: #c2456f; }
.p-fav.on svg { fill: currentColor; }
.p-fav.pop { animation: favPop .5s var(--ease); }
@keyframes favPop { 40% { transform: scale(1.3); } }
.shop .p-quick { top: auto; bottom: 12px; right: 12px; width: 36px; height: 36px; }
.shop .p-no { display: none; }

.shop .p-body { padding: clamp(10px, 1.6vh, 20px) clamp(16px, 1.6vw, 26px) clamp(12px, 1.8vh, 22px); }
.shop .p-meta { margin-bottom: .2rem; }
.shop .p-cat { font-size: .7rem; font-weight: 800; letter-spacing: .24em; color: #a8813f; }
.shop .p-swatch { display: none; }
.shop .p-body h3 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.2; color: var(--sh-ink); margin-bottom: .3rem; }
.shop .p-desc { font-size: clamp(.82rem, .9vw, .9rem); line-height: 1.45; color: var(--sh-muted); margin-bottom: .55rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop .p-price { display: block; margin-bottom: .55rem; font-family: var(--serif); font-weight: 700; font-size: 1.2rem; color: var(--sh-ink); }
.shop .p-price small { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .16em; color: var(--sh-muted); margin-right: 4px; }
.shop .p-foot { display: block; }

/* stepper + add button row */
.p-buy { display: flex; align-items: center; gap: 10px; }
.shop .p-buy .stepper { flex: none; background: #fffdf9; border: 1px solid rgba(185, 138, 74, .35); height: 40px; }
.shop .p-buy .stepper button { width: 34px; height: 38px; font-size: 1.05rem; color: var(--sh-ink); }
.shop .p-buy .stepper .qty { min-width: 18px; font-weight: 600; }
.shop .p-buy .add-btn, .shop .p-buy .view-btn {
  flex: 1; justify-content: center; height: 40px; padding: 0 1em;
  font-size: .86rem; font-weight: 700; border-radius: 999px;
}
.shop .p-buy .add-btn { background: var(--sh-green); color: #fff; box-shadow: 0 10px 22px -12px rgba(10, 50, 30, .7); }
.shop .p-buy .add-btn:hover { background: #1c5c40; }
.shop .p-buy .add-btn svg { width: 17px; height: 17px; stroke-width: 1.7; }
.shop .p-buy .add-btn:hover svg { transform: none; }
.shop .p-buy .view-btn { background: #e7f0ea; color: var(--sh-green); display: inline-flex; align-items: center; gap: .4em; }
.shop .p-buy .view-btn svg { width: 16px; height: 16px; }

/* responsive */
@media (max-width: 1200px) {
  .shop .p-grid { grid-auto-columns: calc((100% - 2 * clamp(14px, 1.6vw, 26px)) / 3); }
}
@media (max-width: 899px) {
  .shop { min-height: 0; }
  .shop .shop-head { flex-direction: column; gap: 10px; }
  .shop .shop-lede { margin-top: 0; }
  .shop .p-grid { grid-auto-columns: 46%; }
  .shop .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .shop .filters::-webkit-scrollbar { display: none; }
  .shop-flowers, .shop-sprig { opacity: .35; }
}
@media (max-width: 560px) {
  .shop .p-grid { grid-auto-columns: 80%; }
  .shop-nav { display: none; }
}

/* flying card ghost keeps the photo crop */
.fly-ghost .p-art-inner img[style*="left"] { position: absolute; height: auto; max-width: none; }

@media (max-height: 800px) and (min-width: 900px) {
  .shop-wrap { padding-inline: clamp(16px, 8vw, 170px); }
}