/* Winter artwork overrides; layout and interactions inherit summer style.css. */
.mv { background: linear-gradient(#fbe0de, #eb617e); }
.mv img { height: auto; }
/* .inner { max-width: 1580px; } */
.tab-menu { padding-bottom: 19px; }
.tab-menu button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.tab-heading { width: 743px; max-width: 100%; margin-bottom: 8px; }
/* .product-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 24px; } */
.product-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.product-card { min-width: 0; }
.product-card a { display: block; }
.product-card img { width: 100%; height: auto; }
.popup, .tab-panel, .sp-accordion, .go_top { display: none; }
.sp-only { display: none !important; }
.category-section { flex: 1; min-width: 0; }
.category-menu button { width: 100%; }
.catalog-error { padding: 24px; text-align: center; }

@media (min-width: 769px) and (max-width: 1100px) {
  .product-list {  gap: 30px 15px; }
}
@media (max-width: 768px) {
  .inner { max-width: 100%; }
  .tab-menu { padding-top: 2.4vw; padding-bottom: 1.866667vw; }
  .tab-heading { width: 91.466667vw; margin-bottom: 2vw; }
  .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.666667vw; }
  .pc-only { display: none !important; }
  .sp-only { display: block !important; }
}
/* Constrain the 2x navigation/heading images to their CSS display width. */
.tab-menu picture { display: block; }
.tab-menu img, .tab-heading img { display: block; width: 100%; height: auto; }
.tab-menu .active_img { width: 100%; }

/* Accordion icons use the summer catalog SVGs and their original CSS. */
.category-menu picture, .category-menu img { display: block; }

/* Desktop artwork is exported at 2x: preserve an exact 1:2 display ratio.
   359px tracks accommodate all 716–718px source widths without squeezing. */
@media (min-width: 769px) {
  /* .product-list { grid-template-columns: repeat(auto-fill, 359px); column-gap: 20px; } */
  .product-card img[data-half-artwork] {
    display: block;
    width: var(--artwork-half-width, 350px);
    max-width: none;
    height: auto;
  }
  .Popup_img { width: var(--artwork-half-width, 350px); max-width: none; }
  .Popup_img img[data-half-artwork] {
    display: block;
    width: var(--artwork-half-width, 350px);
    max-width: none;
    height: auto;
    max-width: 350px;
  }
  .modaal-inner-wrapper { padding: 40px 20px; }
  .modaal-content-container { padding: 20px 12px; }
}

/* Popup size tabs: transparent buttons over the buttons drawn in the 1400px-wide popup artwork
   (x 1072–1352, y 1394 / 1560 / 1725, height 146). cqw keeps them aligned at any display width. */
.popup-variants { position: relative; container-type: inline-size; }
/* container-type gives the box no content width, so the shrink-to-fit Modaal container would collapse to 0
   on SP (PC already has a fixed .Popup_img width). Ask for the full viewport and let the container cap it. */
@media (max-width: 768px) {
  .popup-variants { width: 100vw; max-width: 100%; }
}
.popup-variant-btn {
  position: absolute;
  left: 76.571%;
  width: 20%;
  height: 10.429cqw;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.popup-variant-btn--1 { top: 99.571cqw; }
.popup-variant-btn--2 { top: 111.429cqw; }
.popup-variant-btn--3 { top: 123.214cqw; }
.popup-variant-btn[aria-pressed="true"] { cursor: default; }
/* Cross-fade: the next artwork fades in on top, then replaces the current one (script.js popupFadeDuration). */
.popup-variant-fade {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.popup-variant-fade.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .popup-variant-fade { transition: none; }
}

/* Card size tags: transparent links over the tags drawn at the bottom of the card artwork.
   PC (716px): tags flush with the bottom, 148px wide, 62px tall, every 158.5px.
   SP (668px): bottom edge ~102px above the image bottom, 211px wide, 89px tall, every 227.5px. */
.product-card { position: relative; container-type: inline-size; align-self: start; } /* height = artwork, so bottom-anchored tags line up */
.product-card picture, .product-card picture img { display: block; }
.card-variant-tag {
  position: absolute;
  bottom: 0;
  width: 20.7cqw;
  height: 8.7cqw;
}
.card-variant-tag--1 { left: 0; }
.card-variant-tag--2 { left: 22.14cqw; }
.card-variant-tag--3 { left: 44.28cqw; }
@media (max-width: 767px) {
  .card-variant-tag { bottom: 15.27cqw; width: 31.6cqw; height: 13.32cqw; }
  .card-variant-tag--2 { left: 34.06cqw; }
  .card-variant-tag--3 { left: 68.11cqw; }
}

/* Sticky stack on desktop: script.js measures the tab menu and heading so the heading and
   category menu sit flush at every width (fallbacks are the original summer values). */
@media (min-width: 769px) {
  .tab-heading { top: var(--sticky-heading-top, 11%); }
  .category-menu { top: var(--sticky-category-top, 204px); }
}
@media (max-width: 769px) {
.modaal-inner-wrapper {
  padding: 40px 0px;
}
}

.tab-menu button:focus,
.category-menu button:focus,
.popup-trigger:focus,
.popup-variant-btn:focus {
  outline: none;
}