/* jdtheme26 - CAKE PRODUCT PAGE top section (redesign 2026-10-03, built in the static preview first).
   Scope: body.jd-cake-product (product category "cake", body_class filter). Markup: gallery (WoodMart) | summary = eyebrow, title, rating row,
   price, short description, four feature items (.jd-cake-feats), the order form inside a cream paper panel (.jd-cake-panel), the peach note
   (peach note removed 16:55). The form itself is the real WooCommerce / plugin form - only its look and order are changed here.
   Shared rules keep their own file: this sheet only sets the tokens those rules already read (--jd-qty-*, --jd-atc-*, --jd-wish-*,
   --jd-product-title-size in jd-product-page.css; --jd-date-* in the inline field rules of jd-cake-auto-variation.php). */

body.jd-cake-product {
  --jd-product-title-size: 24px;
  --jd-qty-w: 120px;
  --jd-qty-pad: 0;
  --jd-qty-btn-w: 36px;
  --jd-qty-divider: 1px solid var(--jd-border);
  --jd-wish-border: 1px solid var(--jd-border);
  --jd-wish-radius: 50%;
  --jd-wish-bg: #fff;
  --jd-cake-panel-gap: 16px;
  --jd-drop-thumb: 72px;
  --jd-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c4a3c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  /* calendar glyph (left) + chevron (right) of the pick-up date field */
  --jd-date-pad-inline: 48px 40px;
  --jd-date-icons:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c4a3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 17.2h.01M12 17.2h.01'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c4a3c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
  body.jd-cake-product { --jd-product-title-size: 28px; }
}

/* ---- gallery: big rounded main image; thumbnails in a column on the left (WoodMart `thumbs-position-left`) ---- */
body.jd-cake-product .woocommerce-product-gallery { --wd-thumbs-width: 100px; }   /* WoodMart's own variable: width of the left thumbnail column */
body.jd-cake-product .wd-gallery-images .wd-carousel-inner { border-radius: var(--jd-card-radius); overflow: hidden; }
body.jd-cake-product .wd-gallery-thumb .wd-carousel-item img { border-radius: 14px; }
/* phones + tablets (WoodMart lays the thumbnails out as a horizontal row up to 1024px): ONE row over the full gallery width, every thumbnail the same
   square, no arrows. The count per row = the number of images: WoodMart's swiper reads --wd-col-md / --wd-col-sm of the thumbs carousel (inline style printed
   with the markup), which the cake page sets to the image count, so nothing is cut off and nothing slides. */
@media (max-width: 1024px) {
  body.jd-cake-product .wd-gallery-thumb .wd-thumb-nav { display: none; }
  body.jd-cake-product .wd-gallery-thumb .wd-carousel-item img { aspect-ratio: 1; object-fit: cover; }
}
/* active thumbnail = pink ring, not WoodMart's half-opacity */
body.jd-cake-product .wd-gallery-thumb :is(.wd-carousel-item:hover, .wd-thumb-active) { opacity: 1; }
body.jd-cake-product .wd-gallery-thumb .wd-thumb-active img { outline: 2px solid #f4a3ad; outline-offset: -2px; }

/* ---- summary column: one vertical rhythm ---- */
body.jd-cake-product .summary-inner { --wd-mb: 0px; display: flex; flex-direction: column; gap: 14px; }
/* gallery + summary block above the later birthday-set row: the summary holds size containers (own stacking contexts), so the date popover can only
   open over the next row when this whole block sits above it */
body.jd-cake-product .product-image-summary-wrap { position: relative; z-index: 2; }
body.jd-cake-product .summary-inner > * { margin: 0; }
body.jd-cake-product .summary-inner .product_title { font-weight: 700; line-height: 1.35; }

.jd-cake-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.jd-cake-rating__link { display: inline-flex; align-items: center; gap: 6px 10px; color: inherit; }
.jd-cake-rating__link:hover .jd-cake-rating__txt,
.jd-cake-rating__link:focus-visible .jd-cake-rating__txt { text-decoration: underline; text-underline-offset: 3px; }
.jd-cake-rating__stars {
  font-size: 18px;
  line-height: 1;
  letter-spacing: 2px;
  color: transparent;
  background: linear-gradient(90deg, var(--wd-star-color) calc(var(--jd-rating, 0) * 20%), var(--wd-empty-star-color) 0);
  -webkit-background-clip: text;
  background-clip: text;
}
.jd-cake-rating__score { font-size: 14px; font-weight: 700; color: var(--jd-text-title); }
.jd-cake-rating__txt { font-size: 13px; color: var(--jd-text-muted); }
.jd-cake-rating__sep { width: 1px; height: 14px; background: var(--jd-card-border); }
.jd-cake-rating__sold { font-size: 13px; color: var(--jd-text-muted); }
html.jd-count-pending [data-jd-count] { visibility: hidden; }   /* set by jd-count.js until the figure is in its 0 state (no flash of the final number) */
.jd-cake-rating__sold strong { color: var(--jd-text-title); font-weight: 700; font-variant-numeric: tabular-nums; }   /* digits keep their width while counting */

/* Note font: Chenyu Luoyan Thin (github.com/Chenyu-otf/chenyuluoyan_thin, SIL OFL 1.1, Reserved Font Names Chenyu / Luoyan).
   Subset of the two note lines only (16 KB); OFL: a modified copy may not use the reserved name, so the subset is renamed "JD Note Hand";
   the licence file ships next to it (assets/fonts/jd-note-hand-OFL-license.txt). If the note text changes, re-subset from the original TTF. */
@font-face { font-family: "JD Note Hand"; src: url("../fonts/jd-note-hand-subset.woff2") format("woff2"); font-display: swap; }
/* price row = the price only. The note tag is a decoration: by default absolutely positioned on the right of the row, so it takes no layout space and ignores
   the pointer. Every size / position value is a token on .jd-cake-price-note so one line can change it:
   --jd-cake-note-pos (absolute | static), --jd-note-tag-fs / -lh / -fw / -ls / -pad / -tilt / -ff (the shared component tokens), --jd-cake-note-scale,
   --jd-cake-note-dy, --jd-cake-note-top / -right. With --jd-cake-note-pos: static the tag becomes a normal block under the price (set scale 1, dy 0). */
.jd-cake-price-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.jd-cake-price-row .price { margin: 0; }
.jd-cake-price-note {
  --jd-note-tag-fs: 14px; --jd-note-tag-lh: 14px; --jd-note-tag-fw: normal; --jd-note-tag-ls: 0; --jd-note-tag-pad: 25px 40px; --jd-note-tag-tilt: -4deg;
  --jd-note-tag-ff: "JD Note Hand", var(--jd-font-body, inherit);
  --jd-cake-note-pos: absolute;
  --jd-cake-note-scale: 1;   /* real size everywhere; tablets and 360px phones scale down below so it clears the price */
  --jd-cake-note-dy: -6px;
  --jd-cake-note-top: 50%;
  --jd-cake-note-right: -20px;
  position: var(--jd-cake-note-pos);
  top: var(--jd-cake-note-top);
  right: var(--jd-cake-note-right);
  translate: 0 calc(-50% + var(--jd-cake-note-dy));
  scale: var(--jd-cake-note-scale);
  transform-origin: right center;
  white-space: nowrap;   /* each of the two lines stays one line */
  pointer-events: none;
}
/* per width, from measuring the free area against the rating line, the price and the first description lines */
@media (max-width: 767.98px) { .jd-cake-price-note { --jd-cake-note-dy: -22px; --jd-note-tag-tilt: -3deg; } }   /* phones: up beside the sold count + the price */
@media (max-width: 374.98px) { .jd-cake-price-note { --jd-cake-note-scale: .9; } }   /* very small phones (360) */
@media (min-width: 768px) and (max-width: 1024.98px) { .jd-cake-price-note { --jd-cake-note-scale: .85; } }   /* tablets: narrow summary column */
@media (min-width: 1280px) { .jd-cake-price-note { --jd-cake-note-dy: 8px; } }
body.jd-cake-product .summary-inner .price { --wd-primary-color: var(--jd-sale); font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; }

/* ---- four feature items ---- */
.jd-cake-feats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 6px 0;
  padding: 0;
  list-style: none;
}
.jd-cake-feats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  text-align: center;
}
.jd-cake-feats__item img { display: block; width: 100%; height: 56px; margin-bottom: 8px; object-fit: contain; }
.jd-cake-feats__item strong { font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; color: var(--jd-text-title); }
.jd-cake-feats__item span { font-size: 12px; line-height: 1.3; letter-spacing: .06em; color: var(--jd-text-muted); }

/* ---- order form panel (cream paper) ---- */
.jd-cake-panel { --paper-color: var(--jd-cream-50); --paper-pad: 28px; z-index: 2; container-type: inline-size; }   /* z-index: the panel is its own stacking context, the date popover needs it above the next row */
.jd-cake-panel table.variations { margin: 0; }   /* only the (hidden) pre-order / in-stock row lives here */
.jd-cake-panel form.cart { margin: 0; }
.jd-cake-panel .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--jd-cake-panel-gap);
  margin: 0;
}
/* the plugin's field wrapper does not take part in the layout: its fields become the flex items */
.jd-cake-panel .woocommerce-variation-add-to-cart > div:has(#hidden_delivery_date) { display: contents; }
/* an empty full-width spacer div printed by the cake fields plugin took a flex row + the panel gap above the pick-up date field */
.jd-cake-panel .woocommerce-variation-add-to-cart > div:empty { display: none; }
.jd-cake-panel span:has(> #hidden_delivery_date) { order: 1; flex: 0 0 100%; min-width: 0; position: relative; }
.jd-cake-panel .jd-cake-alert-wrap { order: 3; flex: 0 0 100%; }
/* pre-order fields: ONE sub-section card (heading + hint, name | candle age, photo drop zone); shown only in pre-order mode (the mu-plugin script toggles it) */
.jd-cake-custom {
  order: 4;
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--jd-card-border);
  border-radius: var(--jd-card-radius);
  background: var(--jd-white);
}
.jd-cake-custom[style*="display: none"] { display: none; }   /* jQuery .toggle() writes display:none inline; keep it winning over display:grid */
.jd-cake-custom > p { grid-column: 1 / -1; margin: 0; }
.jd-cake-custom__hint { font-size: 12px; line-height: 1.6; color: var(--jd-text-muted); }
.jd-cake-custom > span { min-width: 0; }
.jd-cake-custom > span:has(> #pet_photo) { grid-column: 1 / -1; }
.jd-cake-panel .woocommerce-variation-add-to-cart > p.points { order: 5; flex: 0 0 100%; margin: 0; }
/* last row: quantity stepper | add to cart (.jd-btn, flex 1) | heart */
.jd-cake-panel .quantity { order: 6; }
.jd-cake-panel .single_add_to_cart_button { --jd-btn-h: 48px; --jd-btn-px: 20px; --jd-btn-fs: 16px; order: 7; flex: 1 1 0; min-width: 0; }
.jd-cake-panel .single_add_to_cart_button .jd-btn__icon { order: -1; }
.jd-cake-panel .wd-wishlist-btn { order: 8; }

/* pick-up date: the field opens the calendar as a popover (jd-product-cake.js); without the script the calendar stays inline above the field */
.jd-cake-date.is-ready #delivery_date { display: none; position: absolute; z-index: 6; top: calc(100% + 8px); left: 0; width: min(360px, 100%); }
.jd-cake-date.is-ready.is-open #delivery_date { display: block; }
.jd-cake-date.is-ready #delivery_date > .ui-datepicker { margin: 0; }

/* photo drop zone: dashed outline, thumbnail (.image-bg, set by the plugin script and by jd-product-cake.js), texts, change / remove */
.jd-cake-drop-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 2px dashed var(--jd-border);
  border-radius: 14px;
  background: var(--jd-cream-0);
  transition: border-color .15s ease, background-color .15s ease;
}
.jd-cake-drop-wrap:hover { border-color: var(--jd-cream-300); }
.jd-cake-lead { margin: 0 0 var(--jd-space-xs); color: var(--jd-ink-700); }   /* keyword line under the rating; running text size from the body rules */
.jd-cake-drop-wrap.is-picking { border-style: solid; border-color: var(--jd-accent); background: var(--jd-white); }   /* the picker is open (jd-product-cake.js) */
.jd-cake-drop-wrap.has-file { border-style: solid; border-color: var(--jd-accent); background: var(--jd-white); }
.jd-cake-drop-wrap:has(.jd-cake-field-error) { border-color: var(--jd-error); background: var(--jd-error-bg); }
.jd-cake-drop {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 14px;
  min-width: 0;
  cursor: pointer;
}
.jd-cake-drop:focus-visible { outline: 2px solid var(--jd-accent); outline-offset: 4px; border-radius: 14px; }
.jd-cake-drop .image-bg { flex: none; width: var(--jd-drop-thumb); height: var(--jd-drop-thumb); background-size: cover; background-position: center; transition: transform .12s ease; }
.jd-cake-drop:active .image-bg { transform: scale(.94); }
.jd-cake-drop__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jd-cake-drop__title { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--jd-text-title); }
.jd-cake-drop__hint,
.jd-cake-drop__file { font-size: 12px; line-height: 1.5; color: var(--jd-text-muted); overflow-wrap: anywhere; }
.jd-cake-drop__actions { display: flex; flex: none; gap: 8px; }
.jd-cake-drop__err { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: var(--jd-error); }
.jd-cake-drop__err[hidden] { display: none; }
.jd-cake-drop__actions[hidden],
.jd-cake-drop__file[hidden] { display: none; }

/* narrow panels (phones; tablets where WoodMart gives the summary half the width; the panel is the size container, set above) stack the group */
@container (max-width: 480px) {
  .jd-cake-custom { grid-template-columns: minmax(0, 1fr); padding: 16px; --jd-drop-thumb: 56px; }
  .jd-cake-drop-wrap { flex-wrap: wrap; }
  .jd-cake-drop { flex-basis: 100%; }   /* the thumbnail + texts take the first line, change / remove wrap to a second one */
  .jd-cake-drop__actions { flex-basis: 100%; justify-content: flex-end; }
}


/* ---- phones ---- */
@media (max-width: 767.98px) {
  /* phones: rating on line 1, sold count on its own line 2 (no divider) */
  .jd-cake-rating__sep { display: none; }
  .jd-cake-rating__sold { flex-basis: 100%; }
  .jd-cake-feats__item { padding-inline: 2px; }
  .jd-cake-feats__item img { height: 40px; margin-bottom: 6px; }
  .jd-cake-feats__item strong { font-size: 12px; letter-spacing: .02em; }
  .jd-cake-feats__item span { font-size: 11px; letter-spacing: .02em; }
  body.jd-cake-product { --jd-qty-w: 100px; --jd-qty-btn-w: 32px; }
  .jd-cake-panel { --paper-pad: 22px 16px; }
  .jd-cake-panel .woocommerce-variation-add-to-cart { column-gap: 8px; }
  .jd-cake-panel .single_add_to_cart_button { --jd-btn-px: 12px; --jd-btn-fs: 14px; letter-spacing: .04em; }
  .jd-cake-panel span:has(> #hidden_delivery_date) { flex: 0 0 100%; }

  body.jd-cake-product .summary-inner .price { font-size: 22px; }

}

/* ---- illustration + facts picture + birthday set, one row on desktop (operator 2026-10-03) ----
   Desktop: three columns; the two picture columns get fr values equal to their aspect ratios (1200/831 and 1200/800), so both pictures come out
   the SAME height whatever the width. Tablet: the two pictures side by side (same trick), the bundle full width below. Phones: one picture per
   row, full width, then the bundle. */
.jd-cake-trio {
  --jd-bundle-mb: 0px;
  /* the bundle column is narrow in the three-column row: smaller bar thumbnails and price line so the price ends left of the chevron */
  --jd-bundle-total-fs: 17px; --jd-bundle-sum-gap: 6px; --jd-bundle-sum-ls: .04em; --jd-bundle-sum-fs: 13px;
  display: grid;
  grid-template-columns: 1.444fr 1.5fr 2.3fr;
  align-items: start;   /* columns stay at the top: opening the birthday set list must not move the pictures */
  gap: var(--jd-space-m);
  margin-block: var(--jd-space-m);
}
.jd-cake-trio__pic { margin: 0; }
.jd-cake-trio__pic img { display: block; width: 100%; height: auto; }
.jd-cake-trio__bundle { min-width: 0; }
/* the birthday set hides itself when the chosen date has no stock (jd-cake-bundle.js): the two pictures then fill the row */
@media (min-width: 768px) { .jd-cake-trio:has(> .jd-cake-trio__bundle[hidden]) { grid-template-columns: 1.444fr 1.5fr; } }
@media (min-width: 1280px) { .jd-cake-trio .jd-bundle-wrap { --jd-bundle-bar-thumb: 60px; } }   /* three-column row: the bundle column is narrow */
@media (max-width: 1279.98px) {
  .jd-cake-trio { grid-template-columns: 1.444fr 1.5fr; --jd-bundle-total-fs: 22px; --jd-bundle-sum-gap: var(--jd-space-xs); --jd-bundle-sum-ls: normal; --jd-bundle-sum-fs: inherit; }
  .jd-cake-trio__bundle { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .jd-cake-trio { grid-template-columns: 1fr; gap: var(--jd-space-s); }
}