.iym-sale-page {
  --iym-sale-navy: #17223c;
  --iym-sale-green: #116b5c;
  --iym-sale-mint: #50c9ad;
  --iym-sale-cream: #f7f5ec;
  --iym-sale-red: #d7343a;
  --iym-sale-gold: #b99545;
  --iym-sale-ink: #22282a;
  --iym-sale-muted: #697370;
  --iym-sale-line: #e3e8e4;
  --iym-sale-soft: #f1f7f3;
  --iym-sale-container: 1180px;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  color: var(--iym-sale-ink);
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: .02em;
  line-height: 1.5;
}

.iym-sale-page,
.iym-sale-page * { box-sizing: border-box; }
.iym-sale-page button,
.iym-sale-page input,
.iym-sale-page select { font: inherit; }
.iym-sale-page button,
.iym-sale-page a { -webkit-tap-highlight-color: transparent; }
.iym-sale-page button { cursor: pointer; }
.iym-sale-page img { display: block; max-width: 100%; }
.iym-sale-container { width: min(calc(100% - 40px), var(--iym-sale-container)); margin-inline: auto; }
.iym-sale-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.iym-sale-eyebrow { margin: 0; color: var(--iym-sale-green); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.iym-sale-section { margin-top: 70px; margin-bottom: 72px; }
.iym-sale-hero { padding-top: 20px; }
.iym-sale-hero img { width: 100%; border-radius: 3px; box-shadow: 0 12px 32px rgba(23,34,60,.1); }
.iym-sale-offer-console { display: grid; grid-template-columns: 1.15fr 1fr 1fr; margin-top: 18px; overflow: hidden; border-radius: 12px; background: var(--iym-sale-navy); color: #fff; box-shadow: 0 10px 24px rgba(23,34,60,.14); }
.iym-sale-offer-console > div { min-height: 166px; padding: 22px 28px; border-right: 1px solid rgba(255,255,255,.14); }
.iym-sale-offer-console > div:last-child { border-right: 0; }
.iym-sale-offer-console .iym-sale-eyebrow { color: #8be0cb; }
.iym-sale-offer-console h1 { margin: 8px 0 6px; font-size: 18px; }
.iym-sale-deadline-label { margin: 0; color: #c5ccd5; font-size: 11px; }
.iym-sale-countdown { display: flex; gap: 8px; margin-top: 8px; }
.iym-sale-countdown__unit { display: flex; align-items: flex-end; gap: 3px; }
.iym-sale-countdown__unit strong { min-width: 42px; padding: 7px 8px; border-radius: 5px; background: #fff; color: var(--iym-sale-navy); text-align: center; font-size: 19px; }
.iym-sale-countdown__unit span { margin-bottom: 7px; color: #aeb6c3; font-size: 9px; }
.iym-sale-offer-console__discounts { display: grid; grid-template-columns: 1fr 1fr; place-content: center; gap: 14px; text-align: center; }
.iym-sale-offer-console__discounts div { padding: 10px 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: #22304f; }
.iym-sale-offer-console__discounts small, .iym-sale-offer-console__discounts strong { display: block; }
.iym-sale-offer-console__discounts small { color: #bdc8d6; font-size: 10px; }
.iym-sale-offer-console__discounts strong { margin-top: 4px; font-size: 19px; }
.iym-sale-offer-console__discounts p { grid-column: 1 / -1; margin: -4px 0 0; color: #bdc8d6; font-size: 10px; }
.iym-sale-offer-console__shipping { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.iym-sale-offer-console__shipping strong { font-size: 20px; line-height: 1.4; }
.iym-sale-offer-console__shipping small { margin-top: 7px; color: #bdc8d6; font-size: 9px; }
.iym-sale-offer-console__shipping button { margin-top: 8px; border: 0; border-bottom: 1px solid #8be0cb; background: transparent; color: #8be0cb; font-size: 10px; }

.iym-sale-editorial { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 22px; padding: 38px 42px; overflow: hidden; border: 1px solid #ebe6d5; border-radius: 12px; background: linear-gradient(110deg,#f4f0df,#fbfaf5 60%,#edf7f1); }
.iym-sale-editorial::after { position: absolute; top: -110px; right: -80px; width: 240px; height: 240px; border: 52px solid rgba(80,201,173,.1); border-radius: 50%; content: ""; }
.iym-sale-editorial__copy { position: relative; z-index: 1; }
.iym-sale-editorial h2 { margin: 10px 0 14px; color: var(--iym-sale-navy); font-family: "Yu Mincho", serif; font-size: 34px; line-height: 1.4; }
.iym-sale-editorial__copy > p:last-child { margin: 0; color: #52605c; font-size: 13px; line-height: 1.9; }
.iym-sale-editorial__links { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.iym-sale-editorial__links button { position: relative; min-height: 88px; padding: 16px; border: 1px solid #e1e7e1; border-radius: 10px; background: #fff; text-align: left; box-shadow: 0 6px 18px rgba(56,71,62,.06); }
.iym-sale-editorial__links b, .iym-sale-editorial__links span { display: block; }
.iym-sale-editorial__links b { color: var(--iym-sale-navy); font-size: 14px; }
.iym-sale-editorial__links span { margin-top: 6px; color: var(--iym-sale-muted); font-size: 10px; }
.iym-sale-editorial__links i { position: absolute; top: 16px; right: 16px; color: var(--iym-sale-green); font-style: normal; }

.iym-sale-section-heading { margin-bottom: 28px; text-align: center; }
.iym-sale-section-heading h2, .iym-sale-recommendations h2, .iym-sale-products-section h2 { margin: 8px 0 6px; color: var(--iym-sale-navy); font-family: Georgia, "Yu Mincho", serif; font-size: 31px; }
.iym-sale-section-heading > p:last-child, .iym-sale-recommendations__head p:last-child, .iym-sale-products-section__head p:last-child { margin: 0; color: var(--iym-sale-muted); font-size: 12px; }
.iym-sale-ranking-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: minmax(360px, auto); gap: 16px; }
.iym-sale-ranking-grid > .iym-sale-product-card:first-child { grid-row: span 2; }
.iym-sale-product-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--iym-sale-line); border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(27,43,36,.07); }
.iym-sale-product-card__media { position: relative; height: 220px; flex: 0 0 auto; overflow: hidden; background: #f3f2ed; }
.iym-sale-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.iym-sale-product-card--featured .iym-sale-product-card__media { height: 370px; }
.iym-sale-rank-badge { position: absolute; top: 14px; left: 14px; width: 54px; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; background: var(--iym-sale-navy); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.iym-sale-rank-badge--gold { background: var(--iym-sale-gold); }
.iym-sale-rank-badge small { font-size: 8px; line-height: 1; }
.iym-sale-rank-badge strong { margin-top: 2px; font-size: 21px; line-height: 1; }
.iym-sale-product-card__body { min-height: 0; display: flex; flex: 1; flex-direction: column; padding: 18px; }
.iym-sale-badge-row { min-height: 27px; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.iym-sale-badge { align-self: flex-start; padding: 5px 8px; border-radius: 4px; color: #fff; font-size: 9px; font-weight: 800; }
.iym-sale-badge--sale { background: var(--iym-sale-red); }
.iym-sale-badge--quick { background: var(--iym-sale-green); }
.iym-sale-badge--new { background: #d7882f; }
.iym-sale-product-card__name { color: var(--iym-sale-ink); font-size: 13px; font-weight: 700; line-height: 1.6; text-decoration: none; }
.iym-sale-product-card--featured .iym-sale-product-card__name { font-size: 16px; }
.iym-sale-product-card__review { margin: 10px 0; color: #b98d2f; font-size: 10px; }
.iym-sale-product-card__review.iym-sale-is-new { color: #d7882f; }
.iym-sale-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: auto; }
.iym-sale-price-row del { color: #969e9a; font-size: 11px; }
.iym-sale-price-row strong { color: var(--iym-sale-red); font-size: 21px; }
.iym-sale-price-row span { color: var(--iym-sale-red); font-size: 9px; font-weight: 700; }

/* 指摘箇所：在庫表示とCTAを離し、視覚的・操作的な余白を確保 */
.iym-sale-stock-line { min-height: 1.6em; margin: 12px 0 16px; color: var(--iym-sale-red); font-size: 10px; font-weight: 700; line-height: 1.6; }
.iym-sale-cart-button { width: 100%; min-height: 42px; flex: 0 0 auto; border: 0; border-radius: 6px; background: var(--iym-sale-green); color: #fff; font-size: 12px; font-weight: 800; transition: background .2s, transform .2s; }
.iym-sale-cart-button:hover { background: #0d594d; }
.iym-sale-cart-button:active { transform: translateY(1px); }
.iym-sale-cart-button.iym-sale-is-added { background: var(--iym-sale-navy); }

.iym-sale-category-strip { position: sticky; top: 0; z-index: 10; border-block: 1px solid var(--iym-sale-line); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.iym-sale-category-strip__inner { min-height: 78px; display: flex; align-items: center; gap: 12px; }
.iym-sale-category-tabs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.iym-sale-category-tabs::-webkit-scrollbar { display: none; }
.iym-sale-category-tabs button { min-width: 88px; padding: 10px 18px; border: 1px solid #d2dad5; border-radius: 22px; background: #fff; color: #4f5956; font-size: 12px; font-weight: 700; white-space: nowrap; }
.iym-sale-category-tabs button.iym-sale-is-active { border-color: var(--iym-sale-navy); background: var(--iym-sale-navy); color: #fff; }
.iym-sale-filter-button { margin-left: auto; padding: 10px 16px; border: 1px solid #cfd8d2; border-radius: 6px; background: #f7f9f7; color: #46514d; font-size: 11px; font-weight: 700; white-space: nowrap; }
.iym-sale-filter-button span { margin-left: 12px; color: var(--iym-sale-green); }
.iym-sale-filter-panel { display: flex; align-items: flex-end; gap: 42px; padding-top: 18px; padding-bottom: 20px; border-top: 1px solid var(--iym-sale-line); }
.iym-sale-filter-panel fieldset { display: flex; gap: 14px; border: 0; }
.iym-sale-filter-panel legend { margin-bottom: 8px; color: var(--iym-sale-navy); font-size: 12px; font-weight: 800; }
.iym-sale-filter-panel label { font-size: 11px; }
.iym-sale-filter-panel > button { margin-left: auto; padding: 11px 22px; border: 0; border-radius: 5px; background: var(--iym-sale-green); color: #fff; font-size: 11px; font-weight: 800; }

.iym-sale-recommendations { padding: 54px 0 62px; background: var(--iym-sale-soft); }
.iym-sale-recommendations__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.iym-sale-recommendations__head button { border: 0; background: transparent; color: var(--iym-sale-green); font-size: 11px; font-weight: 700; }
.iym-sale-recommendation-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.iym-sale-recommendation-card { height: 150px; display: grid; grid-template-columns: 42% 1fr; overflow: hidden; border: 1px solid var(--iym-sale-line); border-radius: 10px; background: #fff; }
.iym-sale-recommendation-card img { width: 100%; height: 100%; object-fit: cover; }
.iym-sale-recommendation-card div { min-width: 0; padding: 17px 14px; }
.iym-sale-recommendation-card small, .iym-sale-recommendation-card b, .iym-sale-recommendation-card strong { display: block; }
.iym-sale-recommendation-card small { color: var(--iym-sale-green); font-size: 8px; font-weight: 800; }
.iym-sale-recommendation-card b { margin: 7px 0 10px; font-size: 11px; line-height: 1.5; }
.iym-sale-recommendation-card strong { color: var(--iym-sale-red); font-size: 16px; }

.iym-sale-products-section__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }
.iym-sale-sort-select { display: flex; align-items: center; gap: 8px; color: var(--iym-sale-muted); font-size: 10px; }
.iym-sale-sort-select select { min-height: 40px; padding: 0 30px 0 12px; border: 1px solid #d1dad4; border-radius: 5px; background: #fff; color: var(--iym-sale-ink); font-size: 11px; }
.iym-sale-product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.iym-sale-product-grid .iym-sale-product-card { min-height: 470px; }
.iym-sale-product-grid .iym-sale-product-card__media { height: 220px; }
.iym-sale-load-more { display: block; width: min(280px,100%); height: 48px; margin: 34px auto 0; border: 1px solid var(--iym-sale-navy); border-radius: 5px; background: #fff; color: var(--iym-sale-navy); font-size: 12px; font-weight: 800; }
.iym-sale-empty-state { padding: 50px 20px; border: 1px dashed var(--iym-sale-line); color: var(--iym-sale-muted); text-align: center; }

.iym-sale-trust { padding: 48px 0; background: var(--iym-sale-navy); color: #fff; }
.iym-sale-trust__inner { display: grid; grid-template-columns: 1.15fr repeat(3,1fr); gap: 38px; align-items: center; }
.iym-sale-trust h2 { margin: 0 0 10px; font-family: Georgia, "Yu Mincho", serif; font-size: 25px; }
.iym-sale-trust p { margin: 0; color: #c3cad4; font-size: 10px; line-height: 1.8; }
.iym-sale-trust__item { padding-left: 25px; border-left: 1px solid rgba(255,255,255,.18); }
.iym-sale-trust__item span, .iym-sale-trust__item b, .iym-sale-trust__item small { display: block; }
.iym-sale-trust__item span { color: #8be0cb; font-size: 17px; font-weight: 800; }
.iym-sale-trust__item b { margin: 8px 0; font-size: 14px; }
.iym-sale-trust__item small { color: #c3cad4; font-size: 9px; }
@media (max-width: 980px) {
  .iym-sale-offer-console { grid-template-columns: 1.2fr 1fr; }
  .iym-sale-offer-console__shipping { grid-column: 1 / -1; min-height: auto !important; border-top: 1px solid rgba(255,255,255,.14); }
  .iym-sale-ranking-grid { grid-template-columns: 1fr 1fr; }
  .iym-sale-ranking-grid > .iym-sale-product-card:first-child { grid-row: auto; }
  .iym-sale-product-card--featured .iym-sale-product-card__media { height: 220px; }
  .iym-sale-recommendation-list, .iym-sale-product-grid { grid-template-columns: repeat(3,1fr); }
  .iym-sale-trust__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .iym-sale-container { width: min(calc(100% - 24px), var(--iym-sale-container)); }
  .iym-sale-hero { padding-top: 12px; }
  .iym-sale-hero img { border-radius: 8px; }
  .iym-sale-offer-console { display: block; margin-top: 10px; }
  .iym-sale-offer-console > div { min-height: auto; padding: 20px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .iym-sale-offer-console h1 { font-size: 18px; }
  .iym-sale-countdown { justify-content: space-between; }
  .iym-sale-countdown__unit { flex-direction: column; align-items: center; gap: 4px; }
  .iym-sale-countdown__unit strong { min-width: 54px; font-size: 21px; }
  .iym-sale-countdown__unit span { margin: 0; }
  .iym-sale-offer-console__discounts { display: grid !important; grid-template-columns: 1fr 1fr; }
  .iym-sale-offer-console__shipping { border-bottom: 0 !important; }
  .iym-sale-editorial { display: block; margin-top: 12px; padding: 24px 20px; }
  .iym-sale-editorial h2 { font-size: 28px; }
  .iym-sale-editorial__links { margin-top: 22px; }
  .iym-sale-editorial__links button { min-height: 72px; padding: 12px; }
  .iym-sale-editorial__links b { max-width: calc(100% - 20px); font-size: 11px; }
  .iym-sale-editorial__links span { font-size: 8px; }
  .iym-sale-section { margin-top: 48px; margin-bottom: 52px; }
  .iym-sale-section-heading { text-align: left; }
  .iym-sale-section-heading h2, .iym-sale-recommendations h2, .iym-sale-products-section h2 { font-size: 25px; }
  .iym-sale-ranking-grid { display: flex; gap: 12px; overflow-x: auto; padding: 4px 1px 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .iym-sale-ranking-grid::-webkit-scrollbar { display: none; }
  .iym-sale-ranking-grid .iym-sale-product-card { width: 82vw; min-width: 82vw; scroll-snap-align: start; }
  .iym-sale-ranking-grid .iym-sale-product-card__media, .iym-sale-product-card--featured .iym-sale-product-card__media { height: 250px; }
  .iym-sale-category-strip__inner { min-height: 96px; display: block; padding-block: 10px; }
  .iym-sale-category-tabs { width: 100%; }
  .iym-sale-category-tabs button { min-width: 74px; padding-inline: 14px; font-size: 10px; }
  .iym-sale-filter-button { width: 100%; margin-top: 10px; }
  .iym-sale-filter-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .iym-sale-filter-panel fieldset { display: block; padding: 0; }
  .iym-sale-filter-panel label { display: block; margin-top: 6px; }
  .iym-sale-filter-panel > button { grid-column: 1 / -1; width: 100%; margin: 0; }
  .iym-sale-recommendations { padding-block: 38px 44px; }
  .iym-sale-recommendations__head { align-items: flex-end; }
  .iym-sale-recommendations__head button { max-width: 95px; padding: 0; font-size: 9px; }
  .iym-sale-recommendation-list { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
  .iym-sale-recommendation-list::-webkit-scrollbar { display: none; }
  .iym-sale-recommendation-card { width: 68vw; min-width: 68vw; height: 126px; }
  .iym-sale-recommendation-card div { padding: 12px 10px; }
  .iym-sale-products-section__head { align-items: center; }
  .iym-sale-sort-select { display: block; text-align: right; }
  .iym-sale-sort-select select { display: block; width: 145px; margin-top: 4px; }
  .iym-sale-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .iym-sale-product-grid .iym-sale-product-card { min-height: 470px; border-radius: 9px; }
  .iym-sale-product-grid .iym-sale-product-card__media { height: 180px; }
  .iym-sale-product-card__body { padding: 12px; }
  .iym-sale-product-card__name { font-size: 11px; line-height: 1.55; }
  .iym-sale-product-card__review { min-height: 30px; font-size: 8px; }
  .iym-sale-price-row { gap: 5px; }
  .iym-sale-price-row del { font-size: 9px; }
  .iym-sale-price-row strong { font-size: 18px; }
  .iym-sale-price-row span { display: none; }
  .iym-sale-stock-line { margin-top: 12px; margin-bottom: 18px; font-size: 8px; }
  .iym-sale-cart-button { min-height: 46px; font-size: 10px; }
  .iym-sale-trust { padding-block: 36px; }
  .iym-sale-trust__inner { display: block; }
  .iym-sale-trust__inner > div:first-child { margin-bottom: 22px; }
  .iym-sale-trust__item { margin-top: 10px; padding: 14px; border: 0; border-radius: 8px; background: #22304d; }
}

@media (max-width: 430px) {
  .iym-sale-hero { width: 100%; }
  .iym-sale-hero img { border-radius: 0; }
  .iym-sale-offer-console { width: calc(100% - 24px); }
  .iym-sale-countdown__unit strong { min-width: 50px; }
  .iym-sale-editorial__links { grid-template-columns: 1fr 1fr; gap: 8px; }
  .iym-sale-product-grid .iym-sale-product-card { min-height: 450px; }
  .iym-sale-product-grid .iym-sale-product-card__media { height: 155px; }
  .iym-sale-badge { padding: 4px 6px; font-size: 8px; }
  .iym-sale-price-row strong { font-size: 16px; }
  .iym-sale-cart-button { min-height: 44px; }
}

.iym-sale-page :focus-visible { outline: 3px solid rgba(80,201,173,.75); outline-offset: 3px; }

/* ==========================================================================
   Integration overrides — everything above this line is the delivered design
   file, unmodified. Below: the differences between the static handoff (a demo
   where every control was a <button> over hardcoded data) and the real page,
   where the same controls are server-rendered links and form inputs.
   ========================================================================== */

/* The handoff sets overflow:hidden on the page wrapper, which turns it into a
   scroll container and stops the sticky category strip from ever sticking.
   Horizontal overflow is already contained by the carousels' own
   overflow-x:auto, so the wrapper does not need to clip. */
.iym-sale-page { overflow: visible; }

/* Theme header sits above the page; the strip parks under it rather than at
   the very top of the viewport. */
.iym-sale-category-strip { top: 0; }

/* --- controls that became links ------------------------------------------ */
/* Category tabs: <a> instead of <button>, same pill. */
.iym-sale-category-tabs a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 88px; padding: 10px 18px; border: 1px solid #d2dad5; border-radius: 22px;
  background: #fff; color: #4f5956; font-size: 12px; font-weight: 700;
  white-space: nowrap; text-decoration: none;
}
.iym-sale-category-tabs a.iym-sale-is-active { border-color: var(--iym-sale-navy); background: var(--iym-sale-navy); color: #fff; }

/* Editorial tiles: <a> when a destination is set, <div> when it is not. */
.iym-sale-editorial__links a,
.iym-sale-editorial__links div {
  position: relative; display: block; min-height: 88px; padding: 16px;
  border: 1px solid #e1e7e1; border-radius: 10px; background: #fff;
  text-align: left; text-decoration: none; box-shadow: 0 6px 18px rgba(56,71,62,.06);
}
.iym-sale-editorial__links a b,
.iym-sale-editorial__links div b { color: var(--iym-sale-navy); }

/* Cart CTA: a real <button> for one-click add, an <a> to the product page for
   everything that still needs a choice. Both must look identical. */
a.iym-sale-cart-button {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: #fff;
}

/* Recommendation cards and the product name are links in the real page. */
a.iym-sale-recommendation-card { text-decoration: none; color: inherit; }
.iym-sale-product-card__name:hover { text-decoration: underline; }
.iym-sale-product-card__media a { display: block; height: 100%; }

/* "もっと見る" is the next-page link. */
a.iym-sale-load-more { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* --- filter panel --------------------------------------------------------- */
/* The panel absorbed the old left sidebar (keyword, すぐ配/在庫, 割引率, 価格,
   category), so it holds more groups than the two the mockup drew and has to
   wrap instead of sitting on one row. */
.iym-sale-filter-panel { flex-wrap: wrap; align-items: flex-start; }
.iym-sale-filter-panel fieldset { flex-direction: column; gap: 4px; padding: 0; margin: 0; min-width: 0; }
.iym-sale-filter-panel label { display: block; white-space: nowrap; }
.iym-sale-filter-panel input[type="checkbox"],
.iym-sale-filter-panel input[type="radio"] { margin-right: 5px; vertical-align: middle; }
.iym-sale-filter-keywords {
  width: 190px; min-height: 34px; padding: 0 10px;
  border: 1px solid #d1dad4; border-radius: 5px; background: #fff; font-size: 12px;
}
.iym-sale-filter-panel > button { align-self: flex-end; }

/* --- ranking band --------------------------------------------------------- */
/* The handoff makes the RANK 1 card span two grid ROWS, which worked when every
   card was ~360px. With legible type and coupon badges they are ~590px, so the
   spanning card stretched to ~1175px of mostly empty image.
   It now spans two COLUMNS on a 3-column grid instead: same visual emphasis,
   and the 5 cards tile exactly (1+2 on row one, 3 on row two) at a normal
   card height. */
.iym-sale-ranking-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
.iym-sale-ranking-grid > .iym-sale-product-card:first-child { grid-row: auto; grid-column: span 2; }
.iym-sale-product-card--featured .iym-sale-product-card__media { height: 300px; }

/* Long merchant titles otherwise run to five lines and push cards past 670px. */
.iym-sale-product-card__name {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- coupon badges -------------------------------------------------------- */
/* Colours carried over from the previous card so a coupon reads the same here
   as it does everywhere else on the storefront. */
.iym-sale-badge--coupon   { background: #f09217; }
.iym-sale-badge--shipping { background: #00bfa5; }
.iym-sale-badge--points   { background: #ffc107; color: #333; }

/* A product can carry a sale price and up to three coupons at once, so the row
   has to grow to a second line instead of overflowing the card. */
.iym-sale-badge-row { min-height: 27px; height: auto; }

/* --- recommendation cards ------------------------------------------------- */
/* The handoff card was label + name + price at a fixed 150px with no nested
   elements, so it styled its content column as ".iym-sale-recommendation-card
   div". That selector (0,1,1) also catches the badge row and price row added
   here, and outranks their own single-class rules — which forced them to
   flex-direction:column with 12px padding and broke the card apart.
   Everything below is therefore either child-scoped (> div) or written with two
   classes so it actually wins. */
.iym-sale-recommendation-list { grid-template-columns: repeat(3, 1fr); }
.iym-sale-recommendation-card { height: 196px; grid-template-columns: 40% 1fr; }
.iym-sale-recommendation-card > div {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 13px 12px;
}
.iym-sale-recommendation-card img { object-position: center; }
.iym-sale-recommendation-card small { flex: 0 0 auto; }
.iym-sale-recommendation-card b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; flex: 0 0 auto; margin: 5px 0 8px;
}

/* Two classes so the broad "card div" rule above cannot re-orient these. */
.iym-sale-recommendation-card .iym-sale-badge-row--compact {
  display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start;
  flex: 0 0 auto; min-height: 0; padding: 0; gap: 4px; margin: 0 0 8px;
}
.iym-sale-recommendation-card .iym-sale-reco-price {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline;
  flex: 0 0 auto; padding: 0; gap: 6px; margin-top: auto;
}
.iym-sale-reco-price del { color: #969e9a; }
.iym-sale-reco-price strong { display: inline; color: var(--iym-sale-red); }

@media (max-width: 720px) {
  /* Wider than the handoff's 68vw so the image column is not a sliver:
     at 375px this gives a ~131x188 thumbnail instead of 96x198. */
  .iym-sale-recommendation-card { width: 76vw; min-width: 76vw; height: 190px; grid-template-columns: 46% 1fr; }
  .iym-sale-recommendation-card > div { padding: 11px 10px; }
}

/* --- pagination ----------------------------------------------------------- */
.iym-sale-pagination { margin-top: 24px; text-align: center; }
.iym-sale-pagination a {
  display: inline-block; margin: 0 2px; padding: 6px 12px;
  border: 1px solid var(--iym-sale-line); border-radius: 4px;
  background: #fff; color: var(--iym-sale-navy); font-size: 12px; text-decoration: none;
}
.iym-sale-pagination a.iym-sale-is-active { border-color: var(--iym-sale-navy); background: var(--iym-sale-navy); color: #fff; }

@media (max-width: 720px) {
  .iym-sale-filter-panel { grid-template-columns: 1fr 1fr; }
  .iym-sale-filter-keywords { width: 100%; }
  .iym-sale-filter-panel > button { align-self: stretch; }
}

/* ==========================================================================
   Legibility pass
   The delivered design bottoms out at 8-9px, which is too small for a large
   part of this shop's audience. Nothing here changes layout or colour — only
   type size, and the line-heights that stop the larger text from crowding.
   Floor: 12px on desktop, 11px on mobile, 10px on the very smallest badges.
   ========================================================================== */

/* Section eyebrows and small print */
.iym-sale-eyebrow { font-size: 12px; letter-spacing: .14em; }
.iym-sale-section-heading > p:last-child,
.iym-sale-recommendations__head p:last-child,
.iym-sale-products-section__head p:last-child { font-size: 14px; }

/* Offer console */
.iym-sale-offer-console h1 { font-size: 20px; }
.iym-sale-deadline-label { font-size: 13px; }
.iym-sale-countdown__unit strong { min-width: 48px; font-size: 21px; }
.iym-sale-countdown__unit span { font-size: 11px; }
.iym-sale-offer-console__discounts small { font-size: 12px; }
.iym-sale-offer-console__discounts strong { font-size: 21px; }
.iym-sale-offer-console__discounts p { font-size: 12px; }
.iym-sale-offer-console__shipping strong { font-size: 21px; }
.iym-sale-offer-console__shipping small { font-size: 11px; }
.iym-sale-offer-console__shipping a { font-size: 12px; }

/* Editorial */
.iym-sale-editorial__copy > p:last-child { font-size: 14px; }
.iym-sale-editorial__links b { font-size: 15px; }
.iym-sale-editorial__links span { font-size: 12px; }

/* Product cards — the densest text on the page */
.iym-sale-badge { font-size: 11px; padding: 5px 9px; }
.iym-sale-product-card__name { font-size: 15px; line-height: 1.65; }
.iym-sale-product-card--featured .iym-sale-product-card__name { font-size: 17px; }
.iym-sale-product-card__review { font-size: 12px; }
.iym-sale-price-row del { font-size: 13px; }
.iym-sale-price-row strong { font-size: 23px; }
.iym-sale-price-row span { font-size: 11px; }
.iym-sale-stock-line { font-size: 12px; }
.iym-sale-cart-button { min-height: 46px; font-size: 14px; }
.iym-sale-rank-badge small { font-size: 9px; }

/* Tabs, filters, sort */
.iym-sale-category-tabs a { font-size: 14px; }
.iym-sale-filter-button { font-size: 13px; }
.iym-sale-filter-panel legend { font-size: 14px; }
.iym-sale-filter-panel label { font-size: 13px; }
.iym-sale-filter-keywords { font-size: 13px; }
.iym-sale-filter-panel > button { font-size: 13px; }
.iym-sale-sort-select { font-size: 13px; }
.iym-sale-sort-select select { font-size: 13px; }
.iym-sale-pagination a { font-size: 14px; }
.iym-sale-load-more { font-size: 14px; }

/* Recommendations */
.iym-sale-recommendation-card small { font-size: 11px; }
.iym-sale-recommendation-card b { font-size: 13px; line-height: 1.5; }
.iym-sale-reco-price del { font-size: 12px; }
.iym-sale-reco-price strong { font-size: 18px; }
.iym-sale-badge-row--compact .iym-sale-badge { padding: 3px 6px; font-size: 10px; }

/* Trust band */
.iym-sale-trust p { font-size: 13px; }
.iym-sale-trust__item span { font-size: 18px; }
.iym-sale-trust__item b { font-size: 16px; }
.iym-sale-trust__item small { font-size: 12px; }

.iym-sale-empty-state { font-size: 15px; }

@media (max-width: 720px) {
  .iym-sale-eyebrow { font-size: 11px; }
  .iym-sale-badge { font-size: 10px; padding: 4px 7px; }
  .iym-sale-product-card__name { font-size: 13px; line-height: 1.6; }
  .iym-sale-product-card__review { font-size: 11px; min-height: 32px; }
  .iym-sale-price-row del { font-size: 12px; }
  .iym-sale-price-row strong { font-size: 20px; }
  .iym-sale-stock-line { font-size: 11px; }
  .iym-sale-cart-button { font-size: 13px; }
  .iym-sale-category-tabs a { font-size: 13px; }
  .iym-sale-recommendation-card small { font-size: 10px; }
  .iym-sale-recommendation-card b { font-size: 12px; }
  .iym-sale-badge-row--compact .iym-sale-badge { font-size: 9px; }
  .iym-sale-trust__item small { font-size: 11px; }
  .iym-sale-countdown__unit span { font-size: 11px; }
}

@media (max-width: 430px) {
  /* The design shrinks badges again here; hold the floor instead. */
  .iym-sale-badge { font-size: 10px; padding: 4px 6px; }
  .iym-sale-price-row strong { font-size: 19px; }
}

/* Landing target for the sort/filter round-trip: clears the sticky strip so the
   heading is not hidden underneath it. */
#iym-sale-products { scroll-margin-top: 96px; }


/* ==========================================================================
   Mobile: stack the showcase bands instead of scrolling them sideways
   The handoff turns 売れ筋TOP5 and あなたへのおすすめ into horizontal scrollers
   at <=720px, with cards at 82vw / 68vw. Everything past the first card is off
   screen with no affordance saying so, and reviewers read it as "only rank 1
   renders". Wrapped into normal rows here so every item is reachable by
   scrolling the page, which is what the rest of the page already does.
   ========================================================================== */
@media (max-width: 720px) {
  .iym-sale-ranking-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; overflow-x: visible; padding: 0;
    scroll-snap-type: none;
  }
  .iym-sale-ranking-grid .iym-sale-product-card {
    width: auto; min-width: 0; scroll-snap-align: none;
  }
  /* Rank 1 keeps its emphasis by taking the full row. */
  .iym-sale-ranking-grid > .iym-sale-product-card:first-child { grid-column: 1 / -1; }
  .iym-sale-ranking-grid .iym-sale-product-card__media { height: 180px; }
  .iym-sale-product-card--featured .iym-sale-product-card__media { height: 240px; }

  /* The recommendation card is a horizontal image+text tile, so two across at
     375px leaves nothing for the text. One per row keeps it readable. */
  .iym-sale-recommendation-list {
    display: grid; grid-template-columns: 1fr; gap: 10px;
    overflow-x: visible;
  }
  .iym-sale-recommendation-card { width: auto; min-width: 0; height: 168px; grid-template-columns: 38% 1fr; }
}

/* ==========================================================================
   Design review: 画像エリア全幅 / 背景は全幅 / margin PC 80px SP 30px
   The handoff clamps the hero, the offer console and the editorial band to the
   1180px container, so their backgrounds stop at the container edge. The review
   asks for the hero image and every section background to run the full viewport
   width, with the CONTENT still aligned to the container — hence the .iym-sale-band
   wrappers: the band paints edge to edge, the inner .iym-sale-container holds
   the content in place.
   ========================================================================== */

/* Hero: 画像エリア全幅 */
.iym-sale-hero { padding-top: 0; }
.iym-sale-hero img { border-radius: 0; box-shadow: none; }

/* Bands: 背景は全幅 */
.iym-sale-band { width: 100%; }

.iym-sale-band--console { background: var(--iym-sale-navy); }
/* The card treatment moves to the band, so the inner grid is transparent. */
.iym-sale-offer-console {
  margin-top: 0; border-radius: 0; box-shadow: none; background: transparent;
}

.iym-sale-band--editorial {
  position: relative; overflow: hidden;
  border-block: 1px solid #ebe6d5;
  background: linear-gradient(110deg, #f4f0df, #fbfaf5 60%, #edf7f1);
}
/* The decorative ring belongs to the full-width band now, not the inner grid. */
.iym-sale-band--editorial::after {
  position: absolute; top: -110px; right: -80px; width: 240px; height: 240px;
  border: 52px solid rgba(80,201,173,.1); border-radius: 50%; content: "";
}
.iym-sale-editorial {
  margin-top: 0; padding: 38px 0; border: 0; border-radius: 0;
  background: none; overflow: visible;
}
.iym-sale-editorial::after { content: none; }
.iym-sale-editorial-html { padding: 38px 0; }

/* Vertical rhythm: PC 80px.
   Scoped under .iym-sale-page to outrank the theme's own
   "body.page-home section { margin-top: 0 }" (specificity 0,1,2), which is why
   the handoff's original 70px top margin never applied on this layout either. */
.iym-sale-page .iym-sale-section { margin-top: 80px; margin-bottom: 80px; }
.iym-sale-recommendations { padding: 80px 0; }
.iym-sale-trust { padding: 80px 0; }

@media (max-width: 720px) {
  /* SP 30px */
  .iym-sale-page .iym-sale-section { margin-top: 30px; margin-bottom: 30px; }
  .iym-sale-recommendations { padding: 30px 0; }
  .iym-sale-trust { padding: 30px 0; }
  .iym-sale-editorial { padding: 30px 0; }
  .iym-sale-editorial-html { padding: 30px 0; }
  .iym-sale-hero img { border-radius: 0; }
}

/* ==========================================================================
   Full viewport width
   The category layout caps its <main> at 1500px and centres it, so on wide
   screens the full-bleed hero and section backgrounds were cropped to 1500px
   with gutters either side.
   Safe to lift here: common_header.php links this stylesheet only on the
   /special-sale/listing/rate/ route, so no other page using this layout is
   affected. Content stays put — .iym-sale-container still holds it at 1180px.
   ========================================================================== */
main.main-search {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}