/* ============ Round 11: the product card (31 Oct 2026, owner: "find amazingly designed product cards from Shopify and other great stores, and redo ours") ============
   Looked at: Brightland (a soft tile, small outlined tags on the picture, name and a quiet line, one full-width pill), Bloomscape (the picture, the name, the price: nothing
   else), The Sill (a rounded tile, a sale tag on it, name, price, one italic line, stars), and Sunday as what to avoid (a bordered box, red prices, a free-shipping line, stars,
   and a big button, all at once). What the ones that work have in common: the picture IS the card, the name and the price are the hierarchy, everything else is one quiet line,
   there is one action, and there is no box around it.
   So: no frame (the tile is the only surface), no description in the grid (the list view shows it), no three spec boxes (the NPK and the pack are one quiet line, the
   season is the season's own icon on the picture), no "View" button (the whole card is the link), and one full-width "Order" under the price and the price per kg.
   Markup: Front/Shop/ProductCard.php. The old card (.product-card.pc, section 5 of components.css and the rules of design.css) is not used by it any more; those rules stay
   for the price list (.shop-card) and for the other things that borrow their classes.
   1  the card and its tile     2  the picture shapes     3  badge, season, AI label     4  the text     5  the foot: price and Order     6  sold out
   7  hover and focus           8  the list view of the shop     9  phones, reduced motion */

/* ---- 1. the card and its tile -------------------------------------------------------------------------------------------------------------------- */
.pcd { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; color: var(--ink-2, #232c26); }
.pcd-tile {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 26px;
  background: radial-gradient(120% 90% at 50% 18%, #fff 0%, #ecf2e8 70%, #e1eadc 100%);
}
/* three or four across: a square tile, so the card is not taller than the screen; two across on a phone and on a tablet: 4:5, the shape of the bag photographs */
@media (min-width: 1101px) { .pcd-tile { aspect-ratio: 1 / 1; } }
.pcd-media { position: absolute; inset: 0; z-index: 1; display: block; }
.pcd-media img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }

/* ---- 2. the picture shapes ------------------------------------------------------------------------------------------------------------------------ */
.pcd-media.is-fill img { object-fit: cover; object-position: 50% 45%; }
/* a cut-out (a bag, a bottle, the sprayer): it stands on the tile with a soft shadow under it */
.pcd-media.is-cutout img { object-fit: contain; padding: 10% 12% 9%; filter: drop-shadow(0 14px 12px rgba(43, 30, 21, .22)); }
/* a very tall or squarish photograph: whole, in the middle, its side edges fading into a blurred copy of itself */
.pcd-media .fi-bd { position: absolute; inset: -12%; z-index: 1; width: 124%; height: 124%; object-fit: cover; filter: blur(28px) saturate(.8) brightness(1.04); opacity: .9; }
/* (the picture comes with an inline style that fills the frame, so these need !important) */
.pcd-media.is-whole img:not(.fi-bd) {
  inset: 0 auto 0 50% !important; width: auto !important; max-width: 100% !important; height: 100% !important; transform: translateX(-50%); object-fit: contain !important;
  -webkit-mask: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.07) 2.17%, rgba(0, 0, 0, 0.26) 4.33%, rgba(0, 0, 0, 0.5) 6.5%, rgba(0, 0, 0, 0.74) 8.67%, rgba(0, 0, 0, 0.93) 10.83%, #000 13%, #000 87%, rgba(0, 0, 0, 0.93) 89.17%, rgba(0, 0, 0, 0.74) 91.33%, rgba(0, 0, 0, 0.5) 93.5%, rgba(0, 0, 0, 0.26) 95.67%, rgba(0, 0, 0, 0.07) 97.83%, transparent 100%); mask: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.07) 2.17%, rgba(0, 0, 0, 0.26) 4.33%, rgba(0, 0, 0, 0.5) 6.5%, rgba(0, 0, 0, 0.74) 8.67%, rgba(0, 0, 0, 0.93) 10.83%, #000 13%, #000 87%, rgba(0, 0, 0, 0.93) 89.17%, rgba(0, 0, 0, 0.74) 91.33%, rgba(0, 0, 0, 0.5) 93.5%, rgba(0, 0, 0, 0.26) 95.67%, rgba(0, 0, 0, 0.07) 97.83%, transparent 100%);
}
.pcd-media .pc-noimg { position: absolute; inset: 0; }

/* ---- 3. badge, season, AI label --------------------------------------------------------------------------------------------------------------------- */
.pcd-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--green-ink, #1d3a2c);
  font: 600 12.5px / 1.1 var(--font-sans), sans-serif; box-shadow: 0 6px 16px -10px rgba(20, 40, 28, .45);
}
.pcd-badge.is-soldout { background: rgba(236, 228, 217, .94); color: var(--loam, #4b3425); }
.pcd-season {
  position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--green-deep, #2f7a55); box-shadow: 0 6px 16px -10px rgba(20, 40, 28, .45); --hi-w: 1.6;
}
.pcd-season svg { width: 21px; height: 21px; }
.pcd-season[data-season="spring"] { color: var(--season-spring); }
.pcd-season[data-season="summer"] { color: var(--season-summer); }
.pcd-season[data-season="autumn"] { color: var(--season-autumn); }
.pcd-season[data-season="winter"] { color: var(--season-winter); }
.pcd-tile .ai-label { z-index: 3; }

/* ---- 4. the text ------------------------------------------------------------------------------------------------------------------------------------------ */
.pcd-body { display: flex; flex: 1; flex-direction: column; gap: 5px; padding: 15px 4px 0; }
.pcd-name { margin: 0; color: var(--green-ink, #1d3a2c); font: 600 clamp(18px, 1.45vw, 21px) / 1.2 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.015em; }
.pcd-name a { color: inherit; text-decoration: none; }
/* the name is the link of the whole card; the Order button sits above it */
.pcd-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 26px; }
.pcd-type { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--text-muted, #5a645d); font-size: 14px; line-height: 1.35; }
.pcd-type svg { flex: none; width: 17px; height: 17px; color: var(--green-deep, #2f7a55); --hi-w: 1.5; }
.pcd-facts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 1px 0 0; color: var(--ink-3, #3b463f); font: 600 13.5px / 1.4 var(--font-sans), sans-serif; font-variant-numeric: tabular-nums; }
.pcd-body .pc-rating { display: flex; align-items: center; margin-top: 3px; }
.pcd-desc { display: none; margin: 0; }

/* ---- 5. the foot: the price, the price per kg, and one Order -------------------------------------------------------------------------------------------- */
.pcd-foot { display: grid; gap: 12px; margin-top: auto; padding-top: 16px; }
.pcd-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.pcd-price b { color: var(--green-ink, #1d3a2c); font: 600 clamp(21px, 1.7vw, 24px) / 1.1 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.015em; }
.pcd-price small { color: var(--text-muted, #5a645d); font: 400 13px / 1.3 var(--font-sans), sans-serif; font-variant-numeric: tabular-nums; }
.pcd-order, .pcd-soldout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; padding: 0 20px; border: 0; border-radius: 999px; font: 600 15.5px / 1 var(--font-sans), sans-serif; }
.pcd-order {
  position: relative; z-index: 2; background: var(--green-deep, #2f7a55); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .3s var(--ease-soft), transform .25s var(--ease-soft);
}
.pcd-order::before {
  content: ""; flex: none; width: 17px; height: 17px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pcd-order:active { transform: scale(.98); }
.pcd-order:disabled { opacity: .75; cursor: default; }

/* ---- 6. sold out ------------------------------------------------------------------------------------------------------------------------------------------- */
.pcd-soldout { background: rgba(75, 52, 37, .07); color: var(--loam, #4b3425); }
.pcd.is-soldout .pcd-media img { opacity: .72; filter: saturate(.6); }
.pcd.is-soldout .pcd-media.is-cutout img { filter: saturate(.6) drop-shadow(0 14px 12px rgba(43, 30, 21, .16)); }

/* ---- 7. hover and focus ------------------------------------------------------------------------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .pcd-order:hover { background: var(--green-ink, #1d3a2c); }
  .pcd:hover .pcd-name { color: var(--green-deep, #2f7a55); }
  .pcd-name { transition: color .3s var(--ease-soft); }
}
.pcd-order:focus-visible { outline: 3px solid var(--focus, #2f7a55); outline-offset: 3px; }
.pcd:has(.pcd-name a:focus-visible) .pcd-tile { outline: 3px solid var(--focus, #2f7a55); outline-offset: 3px; }

/* ---- 8. the list view of the shop ----------------------------------------------------------------------------------------------------------------------------- */
.shop-products.list .pcd {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 28px; height: auto; padding: 12px; border-radius: 36px;
  background: #fff; box-shadow: var(--elev-1);
}
.shop-products.list .pcd-tile { border-radius: 26px; }
.shop-products.list .pcd-body { padding: 8px 24px 8px 0; }
.shop-products.list .pcd-name a::after { border-radius: 36px; }
.shop-products.list .pcd-desc { display: -webkit-box; max-width: 58ch; margin: 4px 0 2px; overflow: hidden; color: var(--ink-2, #232c26); font-size: 15.5px; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.shop-products.list .pcd-foot { grid-template-columns: auto minmax(0, 260px); align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 8px; padding-top: 12px; }
.shop-products.list .pcd-price { flex-direction: column; align-items: flex-start; justify-content: flex-start; }

/* ---- 9. phones, reduced motion ----------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .pcd-tile { border-radius: 20px; }
  .pcd-name a::after { border-radius: 20px; }
  .pcd-badge { top: 9px; left: 9px; padding: 5px 10px; font-size: 12px; }
  .pcd-season { top: 7px; right: 7px; width: 32px; height: 32px; }
  .pcd-season svg { width: 19px; height: 19px; }
  .pcd-body { gap: 4px; padding: 12px 2px 0; }
  .pcd-name { font-size: 17px; }
  .pcd-type { font-size: 13px; }
  .pcd-facts { font-size: 12.5px; }
  .pcd-foot { gap: 10px; padding-top: 12px; }
  .pcd-price b { font-size: 20px; }
  .pcd-price small { font-size: 12px; }
  .pcd-order, .pcd-soldout { height: 44px; padding: 0 12px; font-size: 15px; }
  .shop-products.list .pcd { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 10px; border-radius: 26px; }
  .shop-products.list .pcd-tile { border-radius: 18px; }
  .shop-products.list .pcd-body { padding: 4px 4px 4px 0; }
  .shop-products.list .pcd-name { font-size: 17px; }
  .shop-products.list .pcd-desc { display: none; }
  .shop-products.list .pcd-facts, .shop-products.list .pc-rating { display: none; }
  .shop-products.list .pcd-foot { grid-template-columns: 1fr; margin-top: 4px; padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcd-order, .pcd-name { transition: none; }
  .pcd-order:active { transform: none; }
}