/* ==========================================================================
   Product page — redesign, 1 October 2026 (at JBM's request).

   Loaded only by product.php (through $page_styles). Same tokens as the rest of
   the site; everything is scoped to the pd-* wrappers inside <main id="main">,
   so the cart, the admin and the supplier portal never see it.

   Layout: one grid with three areas. On a desktop the photograph and the
   product's details run down the left while the purchase panel holds the
   right; on a phone the order is photograph → buy → details, so the price and
   the button are never below the specification tables.
   ========================================================================== */

#main .pd-hero {
  background: linear-gradient(180deg, var(--paper) 0, #fbfaf7 360px, #fff 760px);
  padding-bottom: 56px;
}

#main .pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 464px;
  grid-template-areas: "gallery buy" "info buy";
  grid-template-rows: auto 1fr;
  gap: 26px 44px;
  align-items: start;
  padding-bottom: 0;
}
#main .pd-gallery { grid-area: gallery; min-width: 0; }
#main .pd-buy     { grid-area: buy; min-width: 0; }
#main .pd-info    { grid-area: info; min-width: 0; }

/* --- Gallery -------------------------------------------------------------- */
#main .pd-gallery .gallery-main {
  position: relative; isolation: isolate; aspect-ratio: 4 / 3; padding: 30px;
  background: #fff; border: 1px solid #ecebe5; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(23,27,25,.04), 0 28px 50px -38px rgba(23,27,25,.55);
}
/* The JBM slash, clipped by the frame: the same mark as the category banner. */
#main .pd-gallery .gallery-main::after {
  content: ""; position: absolute; z-index: 1; top: -30px; right: 56px; width: 14px; height: 110px;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-hover)); transform: skew(-22deg); opacity: .9;
  pointer-events: none;
}
#main .pd-gallery .gallery-main img { position: relative; z-index: 0; }
/* No photograph yet: the JBM placeholder fills the frame, edge to edge. */
#main .pd-gallery .gallery-main:has(.photo[src*="product-placeholder"]) { padding: 0; background: #f7f6f2; }
#main .pd-gallery .gallery-main .photo[src*="product-placeholder"] { width: 100%; height: 100%; max-height: none; object-fit: contain; background: transparent; }
#main .pd-gallery-flag {
  position: absolute; z-index: 2; top: 18px; left: 18px; padding: 6px 12px; border-radius: 999px;
  background: var(--ink); color: var(--yellow); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
#main .pd-gallery .gallery-thumbs { gap: 10px; margin-top: 14px; }
#main .pd-gallery .gallery-thumb {
  width: 82px; height: 82px; border-radius: 12px; border: 1px solid #e6e4dc; background: #fff;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
#main .pd-gallery .gallery-thumb:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -12px rgba(23,27,25,.45); }
#main .pd-gallery .gallery-thumb[aria-current="true"] { border: 2px solid var(--ink); box-shadow: 0 0 0 3px rgba(246,191,20,.45); }

/* --- At a glance ---------------------------------------------------------- */
#main .pd-facts { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; }
#main .pd-fact {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 14px 16px; background: #fff; border: 1px solid #ecebe5; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(23,27,25,.04), 0 12px 24px -22px rgba(23,27,25,.45);
}
#main .pd-fact-icon {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: #fff4cc; color: var(--ink);
}
#main .pd-fact-icon .icon { width: 19px; height: 19px; }
#main .pd-fact dt { align-self: end; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #6b726d; }
#main .pd-fact dd { align-self: start; margin: 2px 0 0; font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }
#main .pd-fact dd.stock-in { color: #1f7a3d; }
#main .pd-fact dd.stock-low { color: #9a6400; }
#main .pd-fact dd.stock-out { color: #9b2820; }
#main .pd-fact dd.stock-special, #main .pd-fact dd.stock-confirm { color: #3f6497; }

/* --- Purchase panel ------------------------------------------------------- */
#main .pd-buy {
  position: relative; padding: 32px 30px 28px; background: #fff;
  border: 1px solid #ecebe5; border-radius: 20px;
  box-shadow: 0 2px 4px rgba(23,27,25,.04), 0 36px 64px -42px rgba(23,27,25,.6);
}
#main .pd-buy::before {
  content: ""; position: absolute; top: -1px; left: 30px; width: 64px; height: 5px;
  border-radius: 0 0 5px 5px; background: linear-gradient(90deg, var(--yellow), var(--yellow-hover));
}
#main .pd-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
#main .pd-kicker a {
  display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
#main .pd-kicker a::before { content: ""; width: 24px; height: 3px; border-radius: 2px; background: var(--yellow); }
#main .pd-kicker a:hover { text-decoration: underline; text-underline-offset: 4px; }
#main .pd-buy h1 { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.12; letter-spacing: -.035em; margin: 0 0 12px; }
#main .pd-buy .detail-meta { margin: 0 0 18px; }
#main .pd-buy .detail-meta span {
  display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--paper);
  border: 1px solid #efece4; font-size: 12px; font-weight: 700; color: #59615c; letter-spacing: .02em;
}

#main .pd-price-card {
  padding: 18px 20px 16px; border-radius: 16px; border: 1px solid #efe9d6;
  background: radial-gradient(120% 140% at 100% 0%, #fff6d8 0%, #fffdf6 46%, #fbfaf6 100%);
}
#main .pd-price-card .detail-price { justify-content: space-between; align-items: center; gap: 12px; }
#main .pd-price-card .price { font-size: 42px; font-weight: 800; letter-spacing: -.045em; line-height: 1; margin: 0; }
#main .pd-price-card .price span { font-size: 16px; letter-spacing: 0; }
#main .pd-price-card .price .price-from { font-size: 11px; margin-bottom: 6px; }
#main .pd-price-card .price-was { font-size: 18px; font-weight: 600; color: #8a908b; margin-left: 4px; letter-spacing: 0; }
#main .pd-price-card .stock-pill {
  margin: 0; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid #e7e4da;
  box-shadow: 0 6px 14px -10px rgba(23,27,25,.4); white-space: nowrap;
}
#main .pd-price-card .tax-note { margin: 10px 0 0; font-size: 12.5px; color: #636a65; }

#main .pd-buy .selling-mode-note {
  display: flex; gap: 11px; align-items: flex-start; margin: 14px 0 6px; padding: 12px 14px;
  background: #fbfaf7; border: 1px solid #f0eee7; border-left: 3px solid var(--yellow); border-radius: 10px;
  font-size: 13px; line-height: 1.55; color: #454d48;
}
#main .pd-buy .selling-mode-note .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #8a6b00; }
#main .pd-buy .selling-mode-note strong { color: var(--ink); }

/* Options */
#main .pd-buy .option-legend, #main .pd-buy .quantity-field label { font-size: 13px; font-weight: 800; letter-spacing: .01em; color: var(--ink); }
#main .pd-buy .option-pill span { border-radius: 11px; border-color: #dcdfd8; background: #fff; transition: border-color .18s, background .18s, box-shadow .18s; }
#main .pd-buy .option-pill:hover span { border-color: #9da49f; }
#main .pd-buy .option-pill input:checked + span {
  border-color: var(--ink); background: #fff8dc; box-shadow: 0 8px 16px -12px rgba(23,27,25,.5);
}

/* Quantity, with its unit inside the field */
#main .pd-qty-input { position: relative; margin-top: 8px; }
#main .pd-buy .quantity-field input {
  min-height: 56px; border-radius: 12px; border: 1px solid #d6dad3; padding: 12px 64px 12px 18px;
  font-size: 19px; font-weight: 800; color: var(--ink); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
#main .pd-buy .quantity-field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(246,191,20,.45); }
#main .pd-qty-unit {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%); padding: 4px 10px; border-radius: 8px;
  background: var(--paper); font-size: 13px; font-weight: 800; color: #59615c; pointer-events: none;
}

/* The working, then the total on charcoal — the one figure that matters. */
#main .pd-buy .calc-panel {
  margin-top: 18px; padding: 12px 18px 16px; border: 1px solid #ecebe5; border-radius: 16px; background: #fff;
}
#main .pd-buy .calc-row { padding: 7px 0; border-bottom: 1px dashed #ebe9e2; }
#main .pd-buy .calc-row:last-of-type { border-bottom: 0; }
#main .pd-buy .calc-row span:first-child { flex: none; }
#main .pd-buy .calc-total {
  align-items: center; margin: 10px -8px 0; padding: 15px 18px; border: 0; border-radius: 12px;
  background: var(--ink); color: #fff;
  box-shadow: 0 16px 28px -20px rgba(23,27,25,.9);
}
#main .pd-buy .calc-total span { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #c9cdca; }
#main .pd-buy .calc-total strong { font-size: 32px; letter-spacing: -.04em; color: var(--yellow); }
#main .pd-buy .calc-note { margin-top: 10px; line-height: 1.5; }

#main .pd-buy .purchase-actions { gap: 10px; margin-top: 18px; }
#main .pd-buy .purchase-actions .button { min-height: 56px; border-radius: 12px; font-size: 16px; }
#main .pd-buy .purchase-actions .button-primary { box-shadow: 0 14px 24px -16px rgba(180,132,0,.95); }
#main .pd-buy .purchase-actions .button-primary:not(:disabled):hover { transform: translateY(-1px); }

/* Pickup and delivery */
#main .pd-buy .fulfilment { margin-top: 22px; padding-top: 20px; gap: 10px; border-top-color: #ecebe5; }
#main .pd-buy .fulfilment-item {
  align-items: flex-start; gap: 13px; padding: 13px 14px; border-radius: 13px;
  background: #fbfaf7; border: 1px solid #f0eee7; line-height: 1.55;
}
#main .pd-ful-icon {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: #fff; border: 1px solid #ebe8df; color: var(--ink);
}
#main .pd-ful-icon .icon { width: 19px; height: 19px; }
#main .pd-buy .postcode-check {
  display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 5px 5px 5px 14px;
  border: 1px solid #d6dad3; border-radius: 13px; background: #fff; transition: border-color .15s, box-shadow .15s;
}
#main .pd-buy .postcode-check:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(246,191,20,.45); }
#main .pd-buy .postcode-check > .icon { flex: none; width: 18px; height: 18px; color: #6b726d; }
#main .pd-buy .postcode-check input {
  flex: 1; min-width: 0; width: auto; min-height: 44px; border: 0; padding: 8px 4px; font-size: 15px; font-weight: 700; background: transparent;
}
#main .pd-buy .postcode-check input:focus { outline: none; box-shadow: none; }
#main .pd-buy .postcode-check .button { min-height: 44px; border-radius: 9px; flex: none; }
#main .pd-buy #postcode-status:empty { display: none; }

/* --- Details -------------------------------------------------------------- */
#main .pd-info.detail-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0; margin-top: 8px; }
#main .pd-card {
  padding: 26px 28px; background: #fff; border: 1px solid #ecebe5; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(23,27,25,.04), 0 18px 36px -32px rgba(23,27,25,.45);
}
#main .pd-card h2 { display: flex; align-items: center; gap: 11px; font-size: 21px; margin: 0 0 16px; }
#main .pd-card h2::before { content: ""; flex: none; width: 5px; height: 22px; border-radius: 3px; background: var(--yellow); }
#main .pd-card .prose { font-size: 15.5px; }
#main .pd-card .prose ul { list-style: none; padding: 0; }
#main .pd-card .prose ul li { position: relative; padding-left: 28px; margin: 9px 0; }
#main .pd-card .prose ul li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 16px; height: 16px; border-radius: 50%;
  background: #fff4cc radial-gradient(circle, var(--yellow-hover) 0 3px, transparent 3.5px);
}
#main .pd-card .spec-table th, #main .pd-card .spec-table td { padding: 13px 12px; border-bottom: 1px solid #f0eee7; }
#main .pd-card .spec-table tbody tr:nth-child(odd) { background: #fbfaf7; }
#main .pd-card .spec-table tbody tr:last-child th, #main .pd-card .spec-table tbody tr:last-child td { border-bottom: 0; }
#main .pd-card .spec-table tbody th { font-weight: 600; color: #5d655f; }
#main .pd-card .spec-table tbody td { font-weight: 700; color: var(--ink); }
#main .pd-card .spec-table thead th {
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #6b726d;
  border-bottom: 2px solid #ecebe5;
}
#main .pd-card .spec-table caption { padding: 0 0 10px; font-weight: 600; }
#main .pd-card .spec-table .stock-pill { margin: 0; }
#main .pd-card .document-list a { border-radius: 10px; padding: 12px 10px; }
#main .pd-card .document-list a:hover { background: var(--paper); }

/* --- More from this category --------------------------------------------- */
#main .pd-related { background: var(--paper); border-top: 1px solid #efece4; padding-top: 50px; }
#main .pd-related .related-section { padding-block: 0 60px; }

/* --- Narrower screens ----------------------------------------------------- */
@media (max-width: 1180px) {
  #main .pd-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px 30px; }
  #main .pd-facts.has-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main .pd-buy { padding: 28px 24px 24px; }
  #main .pd-price-card .price { font-size: 36px; }
  #main .pd-buy .purchase-actions .button { flex: 1 1 100%; }
  /* Four related products sit in one row, never three and an orphan. */
  #main .pd-related .product-grid.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 959px) {
  #main .pd-related .product-grid.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #main .pd-buy .purchase-actions .button { flex: 1; }
  #main .pd-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gallery" "buy" "info"; grid-template-rows: none; gap: 22px; }
  #main .pd-facts.has-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #main .pd-info.detail-sections { margin-top: 4px; }
  #main .pd-hero { padding-bottom: 40px; }
}
@media (max-width: 680px) {
  #main .pd-facts, #main .pd-facts.has-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #main .pd-gallery .gallery-main { aspect-ratio: 1; padding: 18px; border-radius: 16px; }
  #main .pd-gallery .gallery-main::after { right: 30px; width: 10px; height: 80px; }
}
@media (max-width: 440px) {
  #main .pd-buy { padding: 24px 18px 20px; border-radius: 16px; }
  #main .pd-buy::before { left: 18px; }
  #main .pd-buy h1 { font-size: 24px; }
  #main .pd-price-card { padding: 16px; }
  #main .pd-price-card .price { font-size: 34px; }
  #main .pd-buy .calc-total strong { font-size: 27px; }
  #main .pd-fact { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 12px; }
  #main .pd-fact-icon { width: 34px; height: 34px; border-radius: 10px; }
  #main .pd-fact dd { font-size: 14px; }
  #main .pd-card { padding: 20px 16px; border-radius: 16px; }
  #main .pd-card .spec-table th, #main .pd-card .spec-table td { padding: 11px 8px; }
  #main .pd-related { padding-top: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  #main .pd-gallery .gallery-thumb, #main .pd-buy .option-pill span { transition: none; }
  #main .pd-gallery .gallery-thumb:hover, #main .pd-buy .purchase-actions .button-primary:hover { transform: none; }
}
@media print {
  #main .pd-hero, #main .pd-related { background: none; }
  #main .pd-buy, #main .pd-card, #main .pd-fact, #main .pd-gallery .gallery-main { box-shadow: none; }
}

/* --- Long option groups as dropdowns (demo review issue 13) ---------------
   More than four sizes or values render a <select>; the pills stay for small
   groups. 16px on phones so iOS does not zoom; 48px tall for touch. */
#main .pd-buy .option-group-select { margin: 18px 0; }
#main .pd-buy .option-select {
  display: block; width: 100%; min-height: 48px; padding: 10px 44px 10px 14px;
  border: 1px solid #dcdfd8; border-radius: 11px; background: #fff; color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171b19' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px;
  box-shadow: 0 1px 0 rgba(23,27,25,.06);
  transition: border-color .15s, box-shadow .15s;
}
#main .pd-buy .option-select:hover { border-color: #9da49f; }
#main .pd-buy .option-select:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-color: var(--ink); }
#main .pd-buy .option-select option:disabled { color: #9aa09b; }