/* jdtheme26 - product page bundle block (markup: plugin justdog-checkout-addons includes/bundles-render.php, script: assets/js/jd-cake-bundle.js).
   A .jd-card under the product summary: heading in the home title style, a collapsed summary (three thumbnails joined by plus signs, the total,
   a chevron) that opens a list with one row per item (checkbox, thumbnail, name, small variation select, price), the total and the add button.
   Colours / radius / shadow come from the shared tokens (.jd-card in jd-product-card.css, justdog-colors.css). */

.jd-bundle-wrap {
  --jd-bundle-thumb: 64px;       /* list rows */
  --jd-bundle-bar-thumb: 72px;   /* collapsed bar */
  --jd-bundle-ease: cubic-bezier(.22, .61, .36, 1);   /* soft ease-out for the open / close motion */
  margin-block: var(--jd-bundle-mb, var(--jd-space-m));   /* 0 inside the cake page's picture row (.jd-cake-trio sets the token) */
}
.jd-bundle {
  padding: var(--jd-space-m);
}
.jd-bundle [hidden] {
  display: none;   /* the saving elements are toggled with the hidden attribute; their display values must not win */
}
.jd-bundle__top {
  margin-bottom: var(--jd-space-s);
}
/* the sub-line sits right next to the heading (inside the head): eyebrow on its own row, then heading + sub-line on one row (wraps when narrow) */
.jd-bundle__head {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--jd-space-xs);   /* row gap = the shared head gap (jd-home-sections.css) */
  margin-bottom: 0;
}
.jd-bundle__head .jd-home-eyebrow {
  flex-basis: 100%;
}
.jd-bundle__sub {
  order: 3;
  margin: -6px 0 0;   /* wrapped under the heading (phones): 4px below it; beside it the baseline alignment ignores this */
  color: var(--jd-text-muted);
  font-size: 13px;
}

/* collapsed summary = one big button */
.jd-bundle__summary {
  display: flex;
  align-items: center;
  gap: var(--jd-space-s);
  width: 100%;
  min-height: 48px;
  padding: var(--jd-space-xs) var(--jd-space-s);
  border: 1px solid var(--jd-border);
  border-radius: 14px;
  background: var(--jd-white);
  color: var(--jd-text-title);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) {
  .jd-bundle__summary:hover { background: var(--jd-cream-0); }
}
.jd-bundle__summary:focus-visible,
.jd-bundle__var:focus-visible,
.jd-bundle__check input:focus-visible + .jd-bundle__box {
  outline: 2px solid var(--jd-accent);
  outline-offset: 2px;
}
.jd-bundle__thumbs {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  --jd-bundle-thumb: var(--jd-bundle-bar-thumb);   /* the bar's thumbnails are one step bigger than the rows' */
}
.jd-bundle__thumbpair {
  display: contents;   /* a plus sign + thumbnail that the script shows / hides together */
}
.jd-bundle__thumb {
  display: block;
  flex: none;
  width: var(--jd-bundle-thumb);
  height: var(--jd-bundle-thumb);
  overflow: hidden;
  border: 1px solid var(--jd-card-border);
  border-radius: 12px;
  background: var(--jd-white);
}
.jd-bundle__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jd-bundle__plus {
  color: var(--jd-text-muted);
  font-weight: 700;
}
.jd-bundle__sum {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;            /* label, struck original and bundle price always on ONE line */
  align-items: baseline;
  gap: var(--jd-bundle-sum-gap, var(--jd-space-xs));
  font-size: var(--jd-bundle-sum-fs, inherit);
  letter-spacing: var(--jd-bundle-sum-ls, normal);
  white-space: nowrap;
}
.jd-bundle__sum-total {
  color: var(--jd-sale);
  font-size: var(--jd-bundle-total-fs, 22px);
  line-height: 1.2;
}
.jd-bundle__sum-was,
.jd-bundle__was {
  color: var(--jd-text-muted);
  font-weight: 400;
}
/* deal tag (組合省): butter patch, the title spark on its left */
.jd-bundle__tag--deal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 12px 2px 8px;
  border-radius: 999px 14px 999px 14px;
  background: var(--jd-butter-300);
  color: var(--jd-text-title);
  font-size: 13px;
  font-weight: 700;
}
.jd-bundle__tag--deal::before {
  content: "";
  flex: none;
  width: 10px;
  height: 15px;
  background: url("../img/jd-title-spark.webp") center / contain no-repeat;
}
.jd-bundle__chev {
  flex: none;
  width: 22px;
  height: 22px;
  transition: transform .45s var(--jd-bundle-ease);
}
.jd-bundle__summary[aria-expanded="true"] .jd-bundle__chev {
  transform: rotate(180deg);
}

/* expanded list: the panel's height runs from 0 to its content (grid row 0fr -> 1fr) while it fades in; closed = inert (jd-cake-bundle.js) */
.jd-bundle__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s var(--jd-bundle-ease), opacity .35s ease;
}
.jd-bundle__panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.jd-bundle__panel-in {
  min-height: 0;
  overflow: hidden;   /* clips the list's top margin too, so a closed panel is 0px high */
  transform: translateY(-8px);
  transition: transform .45s var(--jd-bundle-ease);
}
.jd-bundle__panel.is-open .jd-bundle__panel-in {
  transform: none;
}
.jd-bundle__list {
  margin: var(--jd-space-s) 0 0;
  padding: 0;
  list-style: none;
}
.jd-bundle__row {
  display: grid;
  grid-template-columns: auto var(--jd-bundle-thumb) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--jd-space-s);
  margin: 0;
  padding: var(--jd-space-xs) 0;
  border-bottom: 1px solid var(--jd-card-border);
}
/* with only two items showing (main + 1 extra) there is no checkbox column; the script adds .has-checks to the block while more than two rows show */
.jd-bundle:not(.has-checks) .jd-bundle__row {
  grid-template-columns: var(--jd-bundle-thumb) minmax(0, 1fr) auto;
}
.jd-bundle:not(.has-checks) .jd-bundle__check {
  display: none;
}
.jd-bundle__row.is-off .jd-bundle__thumb,
.jd-bundle__row.is-off .jd-bundle__info,
.jd-bundle__row.is-off .jd-bundle__price {
  opacity: .45;
}
.jd-bundle__check {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}
.jd-bundle__check input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.jd-bundle__box {
  display: block;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--jd-cream-300);
  border-radius: 7px;
  background: var(--jd-white);
}
.jd-bundle__check input:checked + .jd-bundle__box {
  border-color: var(--jd-accent);
  background: var(--jd-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 80% no-repeat;
}
/* main product row: empty cell in the checkbox column (it is always part of the bundle) */
.jd-bundle__check--none {
  width: 24px;
  cursor: default;
}
.jd-bundle__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.jd-bundle__tag {
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--jd-butter-100);
  color: var(--jd-text-title);
  font-size: 12px;
}
.jd-bundle__tag--deal {
  padding: 1px 10px 1px 6px;
  background: var(--jd-butter-300);
  font-size: 12px;
}
.jd-bundle__name {
  font-size: 12px;
  color: var(--jd-text-title);
  text-decoration: none;
}
.jd-bundle__var {
  max-width: 100%;
  height: 40px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--jd-border);
  border-radius: 14px;
  background-color: var(--jd-white);
  font-size: 13px;
}
.jd-bundle__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--jd-text-title);
  font-weight: 700;
  white-space: nowrap;
}
.jd-bundle__price .jd-bundle__now {
  color: var(--jd-sale);
}
.jd-bundle__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--jd-space-s) 0 4px;
}
.jd-bundle__total-amt {
  display: inline-flex;
  align-items: baseline;
  gap: var(--jd-space-xs);
}
.jd-bundle__total strong {
  color: var(--jd-sale);
  font-size: 20px;
}
/* add-on / done mode: rows already in the cart say so (their price is not part of the total) */
.jd-bundle__row.is-incart .jd-bundle__price {
  visibility: hidden;
}
.jd-bundle__msg {
  min-height: 0;
  margin: var(--jd-space-xs) 0 0;
  color: var(--jd-error);
}
.jd-bundle__msg.is-ok {
  color: var(--jd-text-title);
}
.jd-bundle__msg:empty {
  display: none;
}

@media (max-width: 767.98px) {
  .jd-bundle-wrap { --jd-bundle-thumb: 56px; --jd-bundle-bar-thumb: 64px; --jd-bundle-total-fs: 17px; --jd-bundle-sum-gap: 6px; --jd-bundle-sum-ls: .04em; --jd-bundle-sum-fs: 13px; }   /* phones: the whole price line fits beside the chevron at 360px */
  .jd-bundle__add { width: 100%; height: auto; min-height: 48px; padding-block: 10px; white-space: normal; line-height: 1.4; }   /* main action is full width on phones; the long add-on text wraps */
  .jd-bundle__summary { flex-wrap: wrap; }
  .jd-bundle__thumbs { flex-basis: 100%; }
  .jd-bundle__sum { flex-basis: calc(100% - 22px - var(--jd-space-s)); }
  .jd-bundle__row {
    grid-template-columns: auto var(--jd-bundle-thumb) minmax(0, 1fr);
    gap: var(--jd-space-xs) var(--jd-space-s);
  }
  .jd-bundle:not(.has-checks) .jd-bundle__row { grid-template-columns: var(--jd-bundle-thumb) minmax(0, 1fr); }
  .jd-bundle:not(.has-checks) .jd-bundle__row .jd-bundle__price { grid-column: 2; }
  .jd-bundle__price { grid-column: 3; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--jd-space-xs); }
}
@media (min-width: 1280px) {
  /* three items in the narrow third column of the cake picture row: smaller bar thumbnails so the price line ends left of the chevron */
  .jd-cake-trio .jd-bundle.has-checks { --jd-bundle-bar-thumb: 40px; }
}
@media (min-width: 768px) {
  .jd-bundle__add { min-width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .jd-bundle__panel, .jd-bundle__panel-in, .jd-bundle__chev { transition: none; }
}