/* This collection's own styles — the grid, product cards, and filter
   controls. Shared chrome (fonts, colors, header/footer/nav, back-to-top)
   lives in /assets/css/base.css, loaded before this file. */

.btn-download {
  display: inline-block;
  min-width: 140px;
  font-family: var(--font-headline);
  border: 1px solid var(--color-text);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  padding: 10px 20px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-download:hover {
  background: var(--color-text);
  color: #fff;
}

/* Search is first in the action-button group now, so it's the one that
   carries the margin-left:auto separating this group from the filters.
   Wider than the pill fields (240px vs their 140px min) — a long
   underline reads oddly short, and there's no separate label above it
   any more (see .input-search) eating into the available width. */
.control-field--search {
  margin-left: auto;
  min-width: 240px;
  justify-content: flex-end;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}

/* top:50% + translateY(-50%) centers it against the input's text/
   placeholder regardless of the field's own height — a plain position:
   absolute with no top set (this used to) keeps an element at its normal-
   flow position instead, which landed it lower than the text and, at
   15px, visibly smaller than the 0.8rem placeholder next to it. */
.search-field__icon {
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(calc(-50% - 5px));
  pointer-events: none;
}

/* Underline instead of the pill fields either side of it — "Search" only
   ever appears as the placeholder (no separate .control-label above, so
   this needs its own bottom padding to land at the same baseline as the
   pill buttons next to it, which sit on .controls' align-items:flex-end). */
.input-search {
  width: 100%;
  font-family: var(--font-headline);
  font-size: 0.8rem;
  text-transform: uppercase;
  padding: 0 0 10px 24px;
  border: none;
  border-bottom: 1px solid var(--color-text);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  box-sizing: border-box;
}

.input-search::placeholder {
  color: var(--color-text);
}

.input-search:focus {
  outline: none;
  border-bottom-width: 2px;
}

/* Remove the native webkit "clear" (x) and search icon decorations —
   this has its own icon (.search-field__icon) and the underline styling
   above doesn't want the browser's own search-input chrome. */
.input-search::-webkit-search-decoration,
.input-search::-webkit-search-cancel-button,
.input-search::-webkit-search-results-button,
.input-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.btn-reset-favorites {
  min-width: 140px;
  font-family: var(--font-headline);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 10px 16px;
  border: 1px solid var(--color-text);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-reset-favorites:hover {
  background: var(--color-text);
  color: #fff;
}

/* Controls (Type/Gender/Currency filters + Reset/Download buttons) */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 32px;
  padding: 24px var(--page-padding) 0;
}

/* Wraps just the 3 filter fields (not Reset/Download). On desktop this
   collapses to nothing visually — display:contents passes its
   control-field children straight through into .controls' own flex row,
   same as if they weren't wrapped at all — and the toggle stays hidden.
   Only under the mobile breakpoint below does the wrapper actually do
   anything, becoming a collapsible panel behind a "Filters" button. */
.filters-panel {
  display: contents;
}

.filters-toggle {
  display: none;
}

@media (max-width: 900px) {
  /* The 2 buttons still get their own row same as before; the 3 filters
     move behind .filters-toggle instead of also always being on-screen. */
  .controls {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  /* Search moves to the very end on mobile (after Reset/Download) —
     order:1 against their default 0 — rather than leading the group like
     it does on desktop, immediately left of Download. Extra margin-top on
     top of .controls' own 16px gap: the underline field has much less
     visual weight than the pill buttons above it, so the plain 16px gap
     that's enough between two pills read as too tight here. */
  .control-field--search {
    margin-left: 0;
    margin-top: 16px;
    order: 1;
  }

  /* Thin divider between the filters group above and the Reset/Download/
     Search buttons below — margin-top adds air above the line (on top of
     .controls' own 16px gap), padding-top adds matching air below it
     before Reset's own content starts. Reset (not Search) carries this
     now since it's visually first in the group on mobile. */
  .control-field--reset {
    margin-left: 0;
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--color-text);
  }

  /* Plain text now, not a pill button — align-self:flex-start so it hugs
     its own width instead of stretching full-width like .controls'
     other (still pill-shaped) children. */
  .filters-toggle {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    font-family: var(--font-headline);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text);
    cursor: pointer;
  }

  .filters-toggle__label {
    text-decoration: underline;
  }

  .filters-toggle::after {
    content: '';
    display: inline-block;
    width: 11px;
    height: 8px;
    background-image: url('/assets/graphics/ARROW-RIGHT.svg');
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    transition: transform 0.15s ease;
  }

  .filters-toggle[aria-expanded="true"]::after {
    transform: rotate(-90deg);
  }

  /* Collapsed by default (JS toggles .is-open on the panel itself — see
     main.js) — display:contents above only applies on desktop, so this
     override doesn't need one of its own to "turn off" first. */
  .filters-panel {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .filters-panel.is-open {
    display: flex;
  }
}

/* Chips summarizing the active Type/Gender selection (main.js renders
   these from the dropdowns' checked inputs) — :empty rather than a JS-
   toggled class collapses the row entirely when nothing's selected,
   since the container has no whitespace between its opening/closing tag
   in the markup. Sits below .controls regardless of the mobile
   filters-panel's open/collapsed state, since it's outside that wrapper. */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px var(--page-padding) 0;
}

.filter-chips:empty {
  display: none;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 6px 10px 6px 14px;
  border: 1px solid var(--color-text);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.filter-chip:hover {
  background: var(--color-text);
  color: #fff;
}

.filter-chip__remove {
  font-size: 0.95rem;
  line-height: 1;
}

.control-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-label {
  font-family: var(--font-headline);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

/* Filter dropdowns (Type/Gender): built on <details>/<summary> so open/close
   needs no JS. Both are multi-selects (checkboxes) — none checked means no
   filter applied. Pill-shaped with a red stroke matching the text color,
   Director for the button label, and the same arrow graphic as the
   carousel nav on the product cards (rotated to point down). */
.multiselect {
  position: relative;
}

.multiselect__summary {
  font-family: var(--font-headline);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 140px;
  padding: 10px 16px;
  border: 1px solid var(--color-text);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.multiselect__summary::-webkit-details-marker {
  display: none;
}

.multiselect__summary::after {
  content: '';
  display: inline-block;
  margin-left: 8px;
  width: 11px;
  height: 8px;
  background-image: url('/assets/graphics/ARROW-RIGHT.svg');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(90deg);
  vertical-align: middle;
}

.multiselect:focus-within .multiselect__summary,
.multiselect__summary:focus {
  outline: 2px solid var(--color-text);
  outline-offset: 1px;
}

.multiselect__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 5;
  min-width: 180px;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px 0;
  border: 1px solid var(--color-text);
  border-radius: 12px;
  background: #fff;
}

.multiselect__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}

.multiselect__option input[type="checkbox"],
.multiselect__option input[type="radio"] {
  accent-color: var(--color-text);
}

.multiselect__option:hover {
  background: var(--color-bg);
}

/* One flat products grid now — no per-type section wrappers or headings
   (the JS filter shows/hides individual .product-card elements directly
   via their data-type/data-gender attributes instead). This still needs
   the page's horizontal padding, previously provided by the (now removed)
   per-type .linesheet-section wrapper. */
.products-section {
  padding: 0 var(--page-padding);
}

/* Grid */
.linesheet-grid {
  display: grid;
  /* Column minimum is whichever is larger: 260px, or a third of the row
     (accounting for the two gaps a 3-column row has) — so on wide screens
     that third exceeds 260px and a 4th column can never fit, capping it
     at 3, while narrow screens still fall back to fewer, wider columns. */
  grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 2 * var(--grid-gap)) / 3)), 1fr));
  gap: var(--grid-gap);
  padding: 50px 0 16px;
}

.product-card {
  display: flex;
  flex-direction: column;
}

.product-card__image {
  /* This exact ratio isn't load-bearing for the frame anymore (see
     .product-card__frame below — --ticket-clip fits any box size/ratio
     without distortion), just the card's own proportions; kept as-is
     rather than rounded to 3/4 to avoid an unrequested layout change. */
  aspect-ratio: 268 / 359.28;
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Intro card: a text-only card the same size as a product one (it reuses
   .product-card__image for that), sitting before the type sections. No
   frame overlay here (unlike product cards) — the text sits flush against
   the card's top-left edge instead. */
.intro-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
}

.intro-card__title {
  font-family: var(--font-headline);
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.intro-card__subtitle {
  font-family: 'GenWanMin JP', var(--font-body);
  font-size: 3rem;
  margin: 0;
}

.intro-card__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-muted);
  margin: 4px 0 0;
}

@media (max-width: 900px) {
  /* On a single-column mobile grid, the intro card's 3:4 aspect-ratio
     (sized for a portrait product photo) makes it much taller than the
     text actually needs, leaving a lot of blank space above the first
     product. Dropping the ratio and taking .intro-card__content out of
     absolute positioning lets the card's height follow its content
     instead. */
  .intro-card .product-card__image {
    aspect-ratio: auto;
  }

  .intro-card__content {
    position: static;
    padding: 32px 0;
  }
}

/* Same fixed-corner-radius ring as the header and homepage tiles (two
   stacked --ticket-clip layers, see base.css's :root and
   .site-header__frame, and home.css's .home-tile__frame, for the full
   explanation) — not the old WB-FRAME.svg <img>, whose corner curve was
   baked into that file's own fixed viewBox and so scaled proportionally
   with whatever size the card rendered at, unlike the header's fixed-px
   radius. --ticket-clip's corners are plain px and its straight runs are
   calc(100% - Npx), so the same shape fits this card at any grid width
   without distortion, always at the exact same radius as the header. */
.product-card__image .product-card__frame,
.product-card__image .product-card__frame-inner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: var(--ticket-clip);
}

.product-card__image .product-card__frame {
  z-index: 1;
  background: var(--color-text);
}

.product-card__image .product-card__frame-inner {
  inset: 1px;
  z-index: 2;
  background: var(--color-bg);
}

/* Inset 1px and clipped to the same (now 1px-smaller) --ticket-clip shape
   as .product-card__frame-inner, not the full card — same technique as
   .home-tile__hover-bg in home.css: sharing that inner footprint is what
   keeps the ring visible around the photo instead of the photo covering
   it, without needing a z-index-above-the-ring trick. top/left/width/
   height, not inset — <img> is a replaced element, and for an absolutely
   positioned replaced element, inset alone doesn't auto-compute a size
   from those offsets the way it does for a plain div; it falls back to
   the image's own intrinsic size instead. z-index 3, above
   .product-card__frame-inner's 2 (and below the favorite/nav buttons'
   4), only actually matters when there's no photo: the "No image"
   placeholder (.image-placeholder, a flex item with no position of its
   own) would otherwise paint *underneath* frame-inner's opaque fill and
   disappear — this is what a photo's own image content sitting above
   frame-inner accomplishes for free. */
.product-card__image .product-card__photo {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  z-index: 3;
  clip-path: var(--ticket-clip);
}

.product-card__image img,
.product-card__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* z-index (not just a flex item's default stacking) so it paints above
   .product-card__frame-inner's opaque fill instead of underneath it —
   without a photo present, this is the only thing standing in for the
   photo's own role in staying visible above that layer. */
.image-placeholder {
  position: relative;
  z-index: 3;
  font-size: 0.8rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* z-index 4, above .product-card__photo's 3 — same requirement as
   before (these need to stay clickable/visible over the photo), just a
   higher number now that the photo itself sits above the frame ring. */
.image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__image .image-nav img {
  width: 15px;
  height: auto;
  display: block;
}

.image-nav--prev {
  left: 8px;
}

.image-nav--next {
  right: 8px;
}

/* One dot per photo, centered along the bottom edge — same z-index as
   .image-nav so it stays above the photo regardless of how many shots a
   product has. A subtle shadow (rather than a solid backing pill) keeps
   dots readable over both light and dark product photos without adding
   a visible UI chrome element across every card. */
.image-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 6px;
  pointer-events: none;
}

.image-dots__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--color-text);
  /* White halo (not the dark one this had for white dots) — product
     photos in this catalog are mostly shot on a light background, where
     the brand red already reads clearly on its own, but this keeps the
     dots visible if a photo's own colors run red too. */
  box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.8);
}

.image-dots__dot--active {
  background: var(--color-text);
}

/* top/right percentages resolve against the box's height/width
   respectively, not a single shared dimension — on this 3:4 (portrait)
   box, an equal 5%/5% left the top gap visibly bigger than the side gap.
   top is scaled by the same 3:4 ratio (5% * 3/4 = 3.75%) so both read as
   the same absolute distance from the edge. */
.favorite-toggle--card {
  position: absolute;
  top: 3.75%;
  right: 5%;
  z-index: 4;
}

.product-card__details {
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.product-card__details-right {
  text-align: right;
}

.product-card__name {
  font-family: var(--font-headline);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.product-card__meta {
  font-family: var(--font-headline);
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin: 0 0 2px;
}

/* Empty state */
.empty-state {
  padding: 80px var(--page-padding);
  text-align: center;
  color: var(--color-muted);
}

.empty-state code {
  background: #f4f4f4;
  padding: 2px 6px;
}