/*
 * The shared purchase box (Issue #155 fix1). Single source of truth for
 * .purchase-box and everything inside it -- the work single page
 * (episode/single/omnibus, template-parts/work/content-standard.php and
 * content-omnibus.php, both calling inc/work-view.php's
 * paimori_purchase_box()) and the matome-series [paimori_purchase_card]
 * shortcode (inc/purchase-card.php) both render this exact markup via
 * that same PHP function, and both load THIS file for it -- there is no
 * longer a second copy of these declarations anywhere in the theme.
 * assets/css/work-pages.css used to declare these rules itself; they were
 * moved here verbatim (values unchanged) specifically so a future edit to
 * the work page's purchase box only ever has one place to make it, and
 * the matome-series card can never drift out of sync by forgetting to
 * mirror a change.
 *
 * This file only ever needs to be loaded alongside something that already
 * defines --c-main/--c-dark/--c-light/--c-border/--c-border-strong/--sale/
 * --num -- work-pages.css's own top-of-file token block
 * (.hd-work-page, .hd-work-page .article { --c-main: ...; ... }) does this
 * for the work page; assets/css/purchase-card.css's .hd-purchase-card
 * wrapper does the equivalent for the shortcode's regular-post context
 * (aliasing this theme's global --hd-c-* brand tokens, since a regular
 * post never has .hd-work-page/.article as an ancestor). Custom-property
 * inheritance resolves through the DOM tree regardless of which
 * stylesheet declares the token or the two files' relative enqueue order,
 * so this file carries no dependency on either token source itself --
 * see functions.php's and inc/purchase-card.php's own enqueue calls for
 * why each context's dependency array still lists this handle first
 * (load-order hygiene/documentation, not a correctness requirement for
 * these particular selectors).
 *
 * .purchase-box-top's two rules below (hiding .purchase-top, removing
 * .purchase-bottom's top border on SP) are a work-page-only feature -- the
 * shortcode's card always renders paimori_purchase_box()'s 'bottom'
 * context and never carries a .purchase-box-top class, so these two rules
 * simply never match anything there. They stay in this shared file rather
 * than being split out, since this file's whole point is to be the one
 * place all of .purchase-box's behavior -- including its work-page-only
 * modifier -- lives.
 */
.purchase-box {
  background:#fff;
  border:1px solid var(--c-border-strong);
  border-radius:12px;
  overflow:hidden;
  margin:1.3rem 0;
  box-shadow:0 3px 14px rgba(44,94,71,.08);
}

.purchase-top {
  display:flex;
  align-items:center;
}

.purchase-thumb {
  width:160px;
  height:120px;
  flex-shrink:0;
  background:linear-gradient(135deg,var(--c-main),color-mix(in srgb,var(--c-main) 58%,#000));
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.8);
  font-size:11px;
  font-weight:700;
}

.purchase-thumb img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.purchase-info {
  padding:12px 14px;
  flex:1;
  width:100%;
}

.purchase-title {
  font-size:14px;
  font-weight:bold;
  color:#333;
  line-height:1.4;
  margin-bottom:4px;
}

.purchase-circle {
  font-size:12px;
  color:#555555;
}

.purchase-compil-range {
  font-size:12px;
  color:#555555;
  margin-top:2px;
}

.purchase-bottom {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  padding:12px 16px;
  border-top:.5px solid var(--c-border);
}

.ep-price-row {
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
}

.ep-price-main {
  display:flex;
  align-items:baseline;
  gap:8px;
}

.ep-price-original {
  font-family:var(--num);
  font-size:15px;
  color:#999;
  text-decoration:line-through;
}

.ep-price-sale {
  font-family:var(--num);
  font-size:22px;
  font-weight:bold;
  color:var(--sale);
}

.ep-price-label {
  font-size:12px;
  color:#777;
}

.ep-price-manual {
  font-family:var(--num);
  font-size:22px;
  font-weight:bold;
  color:#333;
}

.ep-price-note {
  margin:0;
  padding:0 16px 12px;
  font-size:12px;
  line-height:1.5;
  color:#777;
  text-align:right;
}

.ep-off-badge {
  font-family:var(--num);
  font-size:11px;
  font-weight:bold;
  color:#fff;
  background:var(--sale);
  padding:2px 8px;
  border-radius:4px;
}

.ep-btn-fanza {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--fanza);
  color:#fff;
  font-size:14px;
  font-weight:bold;
  padding:12px 24px;
  border-radius:8px;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .15s;
}

.ep-btn-fanza:hover {
  background:color-mix(in srgb,var(--fanza) 80%,#000);
}

.ep-btn-fanza svg {
  width:14px;
  height:14px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

/*
 * SP breakpoint. Verbatim from work-pages.css's own former
 * @media(max-width:599px) block (this exact rule set used to live inside
 * that file's single large SP media query, alongside dozens of unrelated
 * rules for other components) -- those unrelated rules stay in
 * work-pages.css; only the .purchase-box-family rules moved, into this
 * file's own equivalent @media block, so this file's SP behavior does not
 * depend on work-pages.css at all (needed since purchase-card.css's
 * shortcode context never loads work-pages.css).
 */
@media (max-width: 599px) {
  .purchase-box-top .purchase-top {
    display:none;
  }

  .purchase-box-top .purchase-bottom {
    border-top:none;
  }

  .purchase-top {
    flex-direction:column;
  }

  .purchase-thumb {
    width:100%;
    height:auto;
    aspect-ratio:4/3;
  }

  .purchase-bottom {
    flex-direction:column;
    align-items:stretch;
  }

  .ep-price-row {
    justify-content:flex-start;
  }

  .ep-price-note {
    text-align:left;
  }
}