/* ── the shop (shop.html, tools/k_shop.py): sweetmaescookies.com/order, ours. No intro card (his call): a short
   title, then the products at a big scale, each on its own soft fabric pallet with a stitched cream card inside,
   like the story cards; the magazines two to a row, the gifts three. Ends with the story page's frame and footer. ── */
.k-shop { background: url("../img/c/story-ground.webp?h=f53ea0f6") left top / 14.354% auto repeat, #e9b7a6; }
.k-shop > section { --u: calc(100cqw / 1672); position: relative; }
.k-shop-head { padding: calc(var(--u) * 190) 7.5% calc(var(--u) * 70); text-align: center; }
.k-shop-head h1, .k-shop-sub { margin: 0; font: 400 calc(var(--u) * 72)/1.05 "Alfa Slab One", "Zilla Slab", Georgia, serif; letter-spacing: .05em;
  text-transform: uppercase; color: #4a5f6b; text-shadow: 2px 2px 0 rgba(255, 246, 236, .7); }
.k-shop-head p { max-width: 34em; margin: calc(var(--u) * 22) auto 0; font: 500 calc(var(--u) * 24)/1.5 "Zilla Slab", Georgia, serif; color: #5d4a40; }
.k-shop-sub { font-size: calc(var(--u) * 56); text-align: center; margin: calc(var(--u) * 110) 0 calc(var(--u) * 60); }
/* four to a row, like Sweet Mae's (five, theirs): the magazines fill one row, the gifts wrap centred */
.k-prods { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 56) 2.6%; margin: 0; padding: 0 7.5%; list-style: none; }
.k-prod { box-sizing: border-box; width: 23.05%; padding: calc(var(--u) * 26); background: var(--fab) left top / calc(var(--u) * 150) auto repeat, #efe3d4;
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 14) rgba(110, 60, 40, .16); }
.k-prod-card { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10% 9% 11%;
  background: url("../img/c/story-linen.webp?h=0207da0f") center / 50% auto, #f6efe2; }
.k-prod-card::before { content: ""; position: absolute; inset: calc(var(--u) * 8); pointer-events: none; --d: #a2603f;
  background: linear-gradient(90deg, var(--d) 50%, transparent 0) repeat-x left top / calc(var(--u) * 30) 2px,
    linear-gradient(90deg, var(--d) 50%, transparent 0) repeat-x left bottom / calc(var(--u) * 30) 2px,
    linear-gradient(0deg, var(--d) 50%, transparent 0) repeat-y left top / 2px calc(var(--u) * 30),
    linear-gradient(0deg, var(--d) 50%, transparent 0) repeat-y right top / 2px calc(var(--u) * 30); }
.k-prod-pic { display: grid; place-items: center; width: 100%; aspect-ratio: 1; }
.k-prod-pic img { width: 88%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 14) calc(var(--u) * 16) rgba(70, 40, 25, .28));
  transition: transform .6s var(--ease-back), filter .6s; }
.k-prod-pic:hover img { transform: translateY(calc(var(--u) * -12)) rotate(-2deg) scale(1.03); filter: drop-shadow(0 calc(var(--u) * 26) calc(var(--u) * 22) rgba(70, 40, 25, .24)); }
.k-prod h3 { margin: calc(var(--u) * 18) 0 0; font: 400 calc(var(--u) * 19)/1.15 "Alfa Slab One", "Zilla Slab", Georgia, serif; letter-spacing: .05em; text-transform: uppercase; color: #7a4a3a; }
.k-prod-price { margin: calc(var(--u) * 10) 0 calc(var(--u) * 20); font: 600 calc(var(--u) * 17)/1 "Zilla Slab", Georgia, serif; letter-spacing: .08em; color: #5d5a53; }
.k-prod-price s { margin-right: .5em; color: #a2603f; opacity: .7; }
.k-prod .k-btn { margin-top: auto; padding: .8em 1.9em; font-size: calc(var(--u) * 14); }
.k-shop .k-sp-tail { margin-top: calc(var(--u) * 130); }
@media (max-width: 989px) {
  .k-shop { background-size: 62vw auto; }
  .k-shop > section { --u: calc(100cqw / 760); }
  .k-shop-head { padding: 150px 16px 30px; }
  .k-prods { gap: 14px 3%; padding: 0 4%; }
  .k-prod { width: 48.5%; padding: 8px; }
  .k-prod h3 { font-size: 14px; } .k-prod-price { font-size: 12px; } .k-prod .k-btn { font-size: 11px; padding: .75em 1.4em; }
}

/* ── every product she makes (his message, 2026-11-07): four groups with a jump row, and her own photos of the
   new pieces as polaroids (no peg: his call) (her cut-outs stay as they were) ── */
.k-shop-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 12) calc(var(--u) * 14); margin-top: calc(var(--u) * 34); }
.k-shop-jump a { padding: .7em 1.4em; border-radius: 99px; background: #fff9ef; box-shadow: 0 3px 8px rgba(110, 60, 40, .14); outline: 1.5px dashed rgba(162, 96, 63, .55); outline-offset: -5px;
  font: 600 calc(var(--u) * 16)/1 "Zilla Slab", Georgia, serif; letter-spacing: .08em; text-transform: uppercase; color: #7a4a3a; text-decoration: none; transition: transform .45s var(--ease-back); }
.k-shop-jump a:hover { transform: rotate(-3deg) scale(1.05); }
.k-shop-group { scroll-margin-top: calc(var(--u) * 140); }
.k-prod-pol { position: relative; }
.k-pol { display: block; width: 76%; padding: 5.5% 5.5% 17%; box-sizing: border-box; background: #fffdf8; rotate: -2.5deg;
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(70, 40, 25, .25); transition: transform .6s var(--ease-back); }
.k-prod:nth-child(even) .k-pol { rotate: 2deg; }
.k-pol img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: none; }
.k-prod-pol:hover .k-pol { transform: translateY(calc(var(--u) * -10)) rotate(1.5deg) scale(1.03); }
.k-prod-pol:hover img { transform: none; }
.k-prod-price small { font-size: .78em; letter-spacing: .04em; color: #8a7a6e; }
.k-prod .k-btn.is-off { opacity: .55; cursor: default; pointer-events: none; }
.k-prod.is-soon .k-pol { filter: saturate(.85); }
@media (max-width: 989px) { .k-shop-jump a { font-size: 11px; padding: .75em 1.1em; } .k-shop-group { scroll-margin-top: 90px; } }

/* a piece with its inside shown (the heart card): the closed piece, and her photo of it opened as a small polaroid */
.k-prod-in { position: relative; }
.k-prod-in > img { width: 74%; translate: -12% 0; }
.k-pol--inside { position: absolute; right: 2%; bottom: 4%; width: 46%; rotate: 5deg; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(70, 40, 25, .3); }
.k-prod-in:hover .k-pol--inside { transform: translateY(calc(var(--u) * -8)) rotate(-3deg) scale(1.04); }