/* This is a STATIC block (no PHP render step) — the frontend for any
   ALREADY-PUBLISHED post renders whatever HTML is already stored, not a
   fresh save() run. 20 real posts have the OLD flat shape (image+content
   directly inside .gaia-product-item, no __row wrapper — matched by the
   deprecated schema entry in editor.js, which does NOT add the
   --row-wrap modifier below). This base rule must therefore stay exactly
   what it always was, so that old content keeps rendering correctly
   under this same live stylesheet regardless of the markup restructure
   below. Do not fold the new column/padding:0/overflow:hidden treatment
   into this bare selector — see .gaia-product-item--row-wrap. */
.gaia-product-item {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: var(--space-20, 20px);
  padding: var(--space-16, 16px);
  border: 1px solid var(--color-border-subtle, #dddddd);
  border-radius: var(--radius-12, 12px);
  background: var(--color-surface-page, #fff);
}

/* New (current, post-2026-08-31) markup shape: root becomes a column
   (optional countdown banner above a nested .gaia-product-item__row),
   tagged with this modifier class — added unconditionally by the
   CURRENT edit()/save() (whether or not a countdown/coupon/badge is
   actually configured) — specifically so OLD flat-structure posts (no
   modifier class, no __row child in their stored HTML) keep matching
   the plain row rule above, completely untouched. */
.gaia-product-item--row-wrap {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden; /* clips the countdown banner's square top corners to the card's own border-radius */
}

.gaia-product-item__row {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: var(--space-20, 20px);
  padding: var(--space-16, 16px);
}

/* ── 商品画像 ── */
.gaia-product-item__image {
  flex: 0 0 clamp(100px, 30%, 160px);
  aspect-ratio: 1 / 1;
  /* Backdrop for the letterbox gaps object-fit:contain below leaves
     around a non-square image (e.g. a 16:9 photo in this 1:1 box) —
     white per explicit request (real product photos already shoot
     against a white backdrop, so this reads as a seamless continuation
     of the photo rather than a visible box edge). */
  background: var(--color-surface-page, #fff);
  border-radius: var(--radius-8, 8px);
  overflow: hidden;
}

.gaia-product-item__image img {
  width: 100%;
  height: 100%;
  display: block;
  /* Was cover (crops to fill the square) — switched to contain per
     explicit request: uploaded product photos aren't always 1:1, and
     cover was cropping non-square images (e.g. 16:9) rather than
     showing the whole product. */
  object-fit: contain;
}

.gaia-product-item__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-subtle, #f5f5f5);
  border-radius: var(--radius-8, 8px);
  color: var(--color-text-muted, #999);
  font-size: var(--font-size-caption, 12px);
  letter-spacing: 0.05em;
}

/* Editor-only image wrap with change/remove actions */
.gaia-product-item__image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.gaia-product-item__image-actions {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  display: flex;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.85);
  padding: 0.25rem;
}

/* ── 商品情報 ── */
.gaia-product-item__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* ── バッジ（タイトル上） ── */
.gaia-product-item__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0 0 var(--space-4, 4px);
  padding: 4px 8px;
  background: var(--color-grey-92, #f7f6f0);
  color: var(--color-brand-primary, #49352d);
  font-size: var(--font-size-caption, 12px);
  font-weight: var(--font-weight-bold, 700);
  border-radius: var(--radius-4, 4px);
}

.gaia-product-item__title {
  /* !important: the parent theme's own paragraph spacing (.entry-content p
     etc.) otherwise wins here and inflates this to ~32px — same class of
     conflict as the body/heading font-family rules further up this file. */
  margin: 0 0 var(--space-4, 4px) !important;
  font-size: var(--font-size-body, 16px);
  /* !important: .post_content p { line-height: 2.2 } from the parent theme
     otherwise wins here — its specificity (0,1,1) beats this single class
     (0,1,0) regardless of source order. */
  line-height: normal !important;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-heading, #000);
}

/* Clamp to 3 lines via CSS -webkit-line-clamp, not a single line —
   plain white-space:nowrap+text-overflow:ellipsis would collapse every
   wrapped line into one. "GaiaEllipsisFix" first in font-family fixes
   the auto-inserted "…"'s off-baseline position — see that @font-face's
   own comment near the top of the parent theme's style.css. This was
   briefly switched to text-truncate.js (the JS canvas-measured utility
   used elsewhere in this theme) for consistency, then switched BACK:
   unlike this utility's other usages (#related_blog_list .title,
   .writer_archive__card_bio — both always plain text), this description is
   a RichText field with real inline formatting in production (13 of 20
   real published posts use <strong>/<br> here) — text-truncate.js
   writes via .textContent, which unconditionally flattens that
   formatting away on every element it touches, even ones short enough
   to never actually need truncating. Confirmed live on real posts
   before reverting. Pure CSS line-clamp never touches the DOM, so this
   formatting survives untouched. */
.gaia-product-item__description {
  margin: 0 0 var(--space-8, 8px) !important;
  font-size: var(--font-size-body-sm, 14px);
  line-height: 1.6 !important; /* same .post_content p override as the title */
  color: var(--color-text-secondary, #5c5650);
  font-family: "GaiaEllipsisFix", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gaia-product-item__description:empty {
  display: none;
}

/* ── 価格 ── */
.gaia-product-item__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-8, 8px);
  margin: 0 0 var(--space-12, 12px) !important;
}

.gaia-product-item__price-main,
.gaia-product-item__price-sale {
  font-size: var(--font-size-h3, 18px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-brand-primary, #49352d);
}

.gaia-product-item__price-original {
  font-size: var(--font-size-body-sm, 14px);
  color: var(--color-text-muted, #999);
  text-decoration: line-through;
}

.gaia-product-item__tax {
  font-size: var(--font-size-caption, 12px);
  color: var(--color-text-muted, #999);
}

.gaia-product-item__discount-badge {
  font-size: var(--font-size-caption, 12px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-inverse, #fff);
  background: var(--color-brand-accent-dark, #e8501e);
  padding: 2px 8px;
  border-radius: var(--radius-4, 4px);
}

/* ── セール期間ゲーティング ──────────────────────────
   Only present at all when priceMarkup() opts into "windowed" (salePrice
   + saleEndDate both set) — an unconfigured product renders none of
   this, unaffected. Default (no JS yet, or view.js hasn't verified the
   window is active) is the safe "regular price only" state; view.js
   toggles "is-sale-active" on .gaia-product-item__price--windowed once
   it confirms "now" is within [saleStartDate, saleEndDate) — the
   compound .price--windowed.is-sale-active selector matches the SAME
   element view.js adds the class to (the price wrapper itself). */
.gaia-product-item__price--windowed .gaia-product-item__price-original,
.gaia-product-item__price--windowed .gaia-product-item__price-sale,
.gaia-product-item__price--windowed .gaia-product-item__discount-badge--windowed {
  display: none;
}
.gaia-product-item__price--windowed.is-sale-active .gaia-product-item__price-main--regular-fallback {
  display: none;
}
.gaia-product-item__price--windowed.is-sale-active .gaia-product-item__price-original,
.gaia-product-item__price--windowed.is-sale-active .gaia-product-item__price-sale,
.gaia-product-item__price--windowed.is-sale-active .gaia-product-item__discount-badge--windowed {
  display: inline;
}

/* ── カウントダウンバナー ──
   Sized up from an earlier, more compact pass per explicit feedback
   ("i feel like the impact is low") — bigger icon/text/number-boxes and
   more padding throughout, not just one property. */
.gaia-product-item__countdown {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8, 8px);
  padding: var(--space-12, 12px) var(--space-16, 16px);
  background: var(--color-grey-92, #f7f6f0);
  border-bottom: 1px solid var(--color-border-subtle, #dddddd);
}
.gaia-product-item__countdown.is-sale-active {
  display: flex;
}
.gaia-product-item__countdown-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  color: var(--color-brand-accent-dark, #e8501e);
  -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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E")
    no-repeat center / contain;
  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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
.gaia-product-item__countdown-text {
  font-size: var(--font-size-h3, 20px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-brand-accent-dark, #e8501e);
}
/* "終了まで" + the timer boxes wrapped together (not standalone siblings
   of .countdown) so they move as ONE unit: margin-left:auto here pushes
   the whole group to the right edge on desktop (label sitting flush
   before the digits, not trailing the "セール開催中！" text on the left);
   on mobile (below) this same wrapper gets width:100% so the group wraps
   onto its own full line together, rather than "終了まで" landing on the
   first line with the banner text while the timer wraps separately. */
.gaia-product-item__countdown-remaining {
  display: flex;
  align-items: center;
  gap: var(--space-8, 8px);
  margin-left: auto;
}
.gaia-product-item__countdown-label {
  font-size: var(--font-size-body-sm, 14px);
  color: var(--color-text-secondary, #5c5650);
}
.gaia-product-item__countdown-timer {
  display: flex;
  align-items: center;
  gap: var(--space-8, 8px);
}
.gaia-product-item__countdown-unit {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.gaia-product-item__countdown-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  box-sizing: border-box;
  padding: 6px 8px;
  background: var(--color-surface-page, #fff);
  color: var(--color-brand-primary, #49352d);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--font-size-h3, 20px);
  border-radius: var(--radius-4, 4px);
}
.gaia-product-item__countdown-suffix {
  font-size: var(--font-size-body-sm, 14px);
  color: var(--color-text-secondary, #5c5650);
}

/* ── クーポン ──────────────────────────────────────
   couponCode alone (no dates) -> always visible, no JS dependency
   (--always). Either date set -> hidden by default, view.js reveals via
   "is-coupon-active" once verified (--gated.is-coupon-active). */
.gaia-product-item__coupon {
  display: none;
  align-items: center;
  gap: var(--space-8, 8px);
  margin: 0 0 var(--space-12, 12px);
  padding: 6px 12px;
  border: 1px dashed var(--color-border-subtle, #dddddd);
  border-radius: var(--radius-8, 8px);
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}
.gaia-product-item__coupon.gaia-product-item__coupon--always,
.gaia-product-item__coupon.gaia-product-item__coupon--gated.is-coupon-active {
  display: flex;
}
.gaia-product-item__coupon-label {
  font-size: var(--font-size-caption, 12px);
  color: var(--color-text-secondary, #5c5650);
  white-space: nowrap;
}
.gaia-product-item__coupon-divider {
  color: var(--color-border-subtle, #dddddd);
}
.gaia-product-item__coupon-code {
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-brand-primary, #49352d);
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}
.gaia-product-item__coupon-copy {
  flex: 0 0 auto;
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-brand-primary, #49352d);
}
.gaia-product-item__coupon-copy:before {
  content: "";
  position: absolute;
  inset: 3px;
  background-color: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E")
    no-repeat center / contain;
  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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
.gaia-product-item__coupon-copy.copied:before {
  -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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
    no-repeat center / contain;
  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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* ── ボタン ── */
.gaia-product-item__button {
  display: block;
  box-sizing: border-box;
  text-align: center;
  /* extra breathing room above the CTA — keeps it visually separate from
     the description/price block above, whichever one happens to be last */
  margin: var(--space-16, 16px) 0 0 !important;
  padding: 0 20px !important;
  height: 42px !important;
  line-height: 42px !important;
  background: var(--color-brand-primary, #49352d);
  color: var(--color-text-inverse, #fff) !important;
  font-size: var(--font-size-body-sm, 14px);
  font-weight: var(--font-weight-bold, 700);
  border: none;
  border-radius: var(--radius-8, 8px);
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.35s ease;
}

.gaia-product-item__button:hover {
  background: var(--color-brand-accent-light, #f7941d);
}

/* ══════════════════════════════════════════════════
   EDITOR — Inspector date-field UI (renderDateField())
══════════════════════════════════════════════════ */
.gaia-product-item__field-hint {
  margin: 4px 0 12px;
  font-size: 12px;
  color: var(--color-text-muted, #999);
}
.gaia-product-item__date-field {
  margin-bottom: 12px;
}
.gaia-product-item__date-field-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: var(--font-weight-medium, 500);
}

/* ── スマホ：画像を上に ──
   Old flat-structure posts (root IS the row, no --row-wrap modifier)
   vs. new nested posts (.gaia-product-item__row is the row) both need
   this — :not() (not :has(), which would be needed to detect "has a
   __row child" instead and isn't worth the extra complexity here) keeps
   this simple and broadly supported. */
@media (max-width: 600px) {
  .gaia-product-item:not(.gaia-product-item--row-wrap),
  .gaia-product-item__row {
    flex-direction: column;
  }
  .gaia-product-item__image {
    flex: none;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    align-self: center;
  }
  .gaia-product-item__countdown {
    justify-content: center;
  }
  .gaia-product-item__countdown-remaining {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}