/* ==========================================================================
   U-LIK PRODUCTS — archive/listing (filters + card grid) and single product
   page. Loaded only on the Products archive/single pages (see
   inc/ulik-products-query.php → ulik_enqueue_product_assets()).

   Figma source: node 148:850 ("Products" archive) and node 701:255
   ("Product Details"), file "U-Lik Website Design" — pulled via live
   design-context calls on 2026-09-08. Colors/sizes below are transcribed
   directly from that design context rather than reused from this project's
   general token scale, since several (the exact greys/blues used here,
   the 5px/6px/8px radii, the hard-edged card shadow) are specific to this
   one page and don't already have a matching token — same "locked design"
   approach as every other ulik-* component (see helpers/ulik-helpers.php).
   Brand colors (--ulik-color-primary, --ulik-color-accent) and the
   Poppins/Inter font stacks ARE reused from the shared tokens, since those
   genuinely are the same values.

   One responsive adaptation from the static Figma frame (which is a fixed
   1440px mock): card widths below are `fr` grid tracks, not the Figma
   frame's literal fixed 284px/300px, so the grid actually reflows at
   tablet/phone widths instead of overflowing a fixed-width viewport.
   ========================================================================== */

:root {
  --ulik-products-blue: var(--ulik-color-primary);      /* #1F4E9E */
  --ulik-products-orange: var(--ulik-color-accent);     /* #E97324 */
  --ulik-products-text-dark: #17203a;
  --ulik-products-text-grey: #5b6478;
  --ulik-products-text-grey-2: #38415a;
  --ulik-products-tint: #eef3fb;
  --ulik-products-badge-bg: #fdecdd;
  --ulik-products-badge-text: #c85e15;
  --ulik-products-filter-disabled-grey: #a3a9b7; /* Unavailable-filter grey-out (2026-09-14) — see the ".is-filter-unavailable" rules below. */
}

/* ---- Filter sidebar (Figma node 148:1715) ---- */

.ulik-products-page {
  display: flex;
  align-items: flex-start;
  gap: 50px;
  margin-top: var(--ulik-space-5);
}

.ulik-products-page__sidebar {
  flex: 0 0 300px;
  position: sticky;
  top: var(--ulik-space-4);
}

.ulik-products-page__main {
  flex: 1 1 auto;
  min-width: 0;
}

.ulik-product-filters {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.ulik-product-filters__group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ulik-product-filters__label {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-semibold);
  font-size: var(--font-size-20);
  line-height: 1.2;
  color: var(--ulik-products-orange);
}

.ulik-product-filters__select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ulik-product-filters__select {
  /* Border/padding sized down from the initial Figma-literal build (4px
     border, 12/40/12/25 padding) per client feedback that the boxes read as
     too large/bulky in the sidebar. Text size was first dropped to 14px in
     that same pass, then brought back up to var(--font-size-20) per direct
     follow-up feedback that the smaller text itself was hard to read — this
     keeps the same visual language (custom chevron, bordered box, no native
     arrow) at a more compact box while keeping the label text easy to read. */
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 10px 34px 10px 16px;
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-regular);
  font-size: var(--font-size-16);
  color: var(--ulik-products-blue);
}

.ulik-product-filters__chevron {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 8px;
  color: var(--ulik-products-blue);
  pointer-events: none;
}

/* Whole-dropdown / per-option grey-out for filter combinations that would
   return 0 products (client request, 2026-09-14 — e.g. Category=Closures
   means every Material option returns 0, since no Closures product has a
   Material term at all). Options stay in the DOM, never removed — just
   `disabled`, which is what ulik-products.js toggles (mirroring the
   server-rendered state from ulik_render_product_filters() on first load).
   See inc/ulik-products-query.php → ulik_products_unavailable_terms(). */
.ulik-product-filters__group.is-filter-unavailable .ulik-product-filters__label {
  color: var(--ulik-products-filter-disabled-grey);
}

.ulik-product-filters__select:disabled {
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--ulik-products-filter-disabled-grey);
  cursor: not-allowed;
}

.ulik-product-filters__group.is-filter-unavailable .ulik-product-filters__chevron {
  color: var(--ulik-products-filter-disabled-grey);
}

.ulik-product-filters__select option:disabled {
  color: var(--ulik-products-filter-disabled-grey);
}

/* Product Code search box (client request, 2026-09-25) — same bordered-box
   language as .ulik-product-filters__select (border, radius, padding, blue
   text) so it reads as part of the same filter group, with a search icon in
   place of the dropdown's chevron. */
.ulik-product-filters__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ulik-product-filters__search-input {
  width: 100%;
  background: transparent;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 10px 40px 10px 16px;
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-regular);
  font-size: var(--font-size-16);
  color: var(--ulik-products-blue);
}

.ulik-product-filters__search-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.ulik-product-filters__search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ulik-products-blue);
  pointer-events: none;
}

.ulik-product-filters__search-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ulik-product-filters__reset {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--ulik-font-body);
  font-size: var(--font-size-14);
  color: var(--ulik-products-blue);
  text-decoration: underline;
  cursor: pointer;
}

/* ---- Capacity dual-handle range slider (Figma node 148:1272) ---- */

.ulik-capacity-slider {
  position: relative;
  height: 26px; /* was 34px — sized down per client feedback ("a bit smaller"). */
  margin-top: 10px;
}

.ulik-capacity-slider__track {
  position: absolute;
  top: 50%;
  left: 9px;
  right: 9px;
  height: 9px; /* was 12px */
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.1);
}

.ulik-capacity-slider__range {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(31, 78, 158, 0.46);
}

.ulik-capacity-slider__input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: none;
  pointer-events: none;
}

.ulik-capacity-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 17px;
  height: 26px;
  border-radius: 11px;
  background: var(--ulik-products-blue);
  border: none;
  cursor: pointer;
}

.ulik-capacity-slider__input::-moz-range-thumb {
  pointer-events: auto;
  width: 17px;
  height: 26px;
  border-radius: 11px;
  background: var(--ulik-products-blue);
  border: none;
  cursor: pointer;
}

.ulik-capacity-slider__values {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-family: var(--ulik-font-heading);
  font-size: var(--font-size-18);
  color: var(--ulik-products-blue);
}

/* ---- Product grid + card (Figma node 352:117) ---- */

.ulik-product-grid.is-loading {
  opacity: 0.5;
}

.ulik-product-grid__count {
  margin-bottom: var(--ulik-space-3);
  font-size: var(--font-size-14);
  color: var(--ulik-products-text-grey);
}

.ulik-product-grid__list {
  display: grid;
  justify-content: normal; /* neutralizes an unrelated component's `.ulik-product-grid__list { justify-content: center }` — see the class-collision comment on .ulik-product-card below. */
  grid-template-columns: repeat(3, 1fr);
  /* align-items: start (not CSS Grid's default `stretch`) — without this, a
     shorter card (e.g. a Closures card with no Capacity/Material meta line,
     one fewer text row than a bottle card) gets stretched to match the
     tallest card in its row, which shows up as an unexplained blank gap
     inside the shorter card rather than as harmless extra margin below it.
     Every card's own internal sizing (the 216px media box, the flex body)
     is already fixed/content-driven, so this only changes how leftover
     row height is handled, not each card's own layout. */
  align-items: start;
  gap: 30px;
}

.ulik-product-card {
  /* FOUND THE ROOT CAUSE (2026-09-09), confirmed by the client's own
     DevTools inspection: this theme already has an UNRELATED, pre-existing
     homepage element also called "Product Grid" (cornerstone/elements/
     ulik-product-grid.php, a totally different feature — a small icon-card
     teaser section — built long before this Products CPT system existed).
     It happens to use the exact same class names: `.ulik-product-grid`,
     `.ulik-product-grid__list`, `.ulik-product-card`, `.ulik-product-card__body`,
     `.ulik-product-card__title`, `.ulik-product-card__link` (all defined in
     assets/css/ulik-components.css, loaded on every page). Wherever THIS
     file (loaded after ulik-components.css) doesn't explicitly redeclare a
     property that the other component sets, that property leaks through
     unopposed — CSS only picks a winner when two rules of EQUAL selector
     specificity both declare the SAME property; if only one of them
     declares it, there's no contest and it just applies. That's exactly
     what caused the "huge blank gaps" / "image sitting small in the
     corner" reports: the other component's `.ulik-product-card` rule sets
     `align-items: flex-start` (so our flex children shrink to content width
     instead of stretching to fill the card — explaining the small,
     top-left-aligned photo), `gap: var(--ulik-space-5)` = 50px (an
     unwanted gap between our media/divider/body), and
     `padding: var(--ulik-space-4) 25px` = 30px/25px (unwanted padding
     around the whole card, since OUR padding is meant to live only on
     `.ulik-product-card__body`). All three are neutralized explicitly
     below. The real, longer-term fix is giving this Products CPT system
     its own non-colliding class prefix so this entire category of bug
     can't recur — flagged as follow-up; these three overrides make the
     current classes fully safe in the meantime. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--ulik-color-white);
  border: 1px solid rgba(130, 130, 130, 0.19);
  border-radius: 5px;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.ulik-product-card:hover,
.ulik-product-card:focus-within {
  /* Also explicitly re-declared (not just `transform`) — the colliding
     component's own :hover rule sets a blue border-color and a colored
     glow box-shadow, which would otherwise leak in on hover the same way
     the properties above did at rest. */
  border-color: rgba(130, 130, 130, 0.19);
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.ulik-product-card__media {
  /* min-height (not just height) + overflow:hidden so this box can never
     silently grow taller than this height and leave a visible gap above the
     Category/Title text — a fixed `height` alone can still be stretched by
     a parent flex/grid rule elsewhere on the page; this locks it down from
     both directions. Raised from 216px to 260px per client feedback that
     product photos (several of which are tall/narrow bottle shots) looked
     "squashed" — object-fit:cover was cropping too much of their height
     out of the old, shorter box. */
  height: 260px;
  min-height: 260px;
  max-height: 260px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ulik-color-white);
}

.ulik-product-card__media img.ulik-product-card__photo,
.ulik-product-card__photo,
.ulik-product-card__photo--placeholder {
  /* Figma's actual product-list card (node 352:117) fills the media frame
     edge-to-edge — confirmed by the client against the live site, which
     was showing a lot of empty space around each photo with `contain`.
     This is a deliberate, scoped exception to the object-fit:contain
     approach used elsewhere in this project (see the v2.3.3 changelog):
     that fix was for a landscape frame holding portrait Finished-Product
     photos on the About Us page, a real aspect-ratio mismatch that made
     `cover` crop off the top of tall bottles. The product card frame here
     is roughly square-ish and the source photos are catalog product shots
     already framed to fill it, so `cover` reads as intended — full-bleed,
     no letterboxing — rather than cropping anything important away.
     `!important` + the doubled-up selector + a matching inline `style`
     attribute on the <img> itself (see ulik_render_product_card() in
     inc/ulik-products-query.php) are three independent layers against the
     same failure mode: some other stylesheet loaded on the page (WordPress
     core, the Pro parent theme, or a plugin) setting its own `img { width;
     height; object-fit }`-style rule that would otherwise leave the photo
     at a small, unstretched, top-left-aligned size inside this frame — the
     exact "so much empty space" symptom reported from the live site. If a
     future product photo turns out to be an awkward aspect ratio and gets
     visibly cropped, that one case may need its own object-position tweak
     rather than reverting this rule globally. */
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.ulik-product-card__photo--placeholder {
  background: var(--ulik-color-surface);
}

.ulik-product-card__divider {
  height: 1px;
  background: rgba(130, 130, 130, 0.19);
}

.ulik-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px; /* was 12px/16px — bumped slightly to keep breathing room around the larger text sizes above (2026-09-10) */
}

.ulik-product-card__category {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-16); /* was font-size-14 — bumped per client request for bigger card text (2026-09-10) */
  color: #000;
  /* min-height reserves room for 2 lines (in `em`, so it scales with this
     rule's own font-size — including the smaller override on
     .ulik-product-grid__list--related below — rather than needing its own
     copy there). Client screenshot, 2026-09-09: a 2-word category like
     "T&C Personal Care" wraps to 2 lines while a shorter one like "Talcum"
     stays on 1, and with no reserved height every element below it (title,
     meta, button) sat one line higher on the short-category card than its
     neighbor in the same grid row — cards looked inconsistently sized even
     though their box model was identical. Reserving 2 lines' worth of
     height regardless of actual line count keeps every card in a row
     starting its title at the same y-position. */
  min-height: 2.6em;
  line-height: 1.3;
}

.ulik-product-card__title {
  margin: 0;
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-28); /* was font-size-24 — bumped per client request for bigger card text (2026-09-10) */
  color: var(--ulik-products-blue);
}

.ulik-product-card__meta {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-light);
  font-size: var(--font-size-16); /* was the Figma-literal 15px — bumped per client request for bigger card text (2026-09-10); the 1px-off "locked design" literal no longer applies once the client has asked for a deliberately different size. */
  color: #000;
}

.ulik-product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0; /* neutralizes an unrelated component's `.ulik-product-card__link { margin-top: 10px }` — see the class-collision comment on .ulik-product-card above. */
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-16); /* was the Figma-literal 15px — see .ulik-product-card__meta comment above. */
  color: var(--ulik-products-orange);
}

.ulik-product-card__link svg {
  width: 15px;
  height: 15px;
}

.ulik-product-grid__empty {
  color: var(--ulik-products-text-grey);
}

/* Related Products / Series Products / Compatible Closures (single page)
   all reuse the same card and grid as the archive, sized down to match
   Figma node 701:460 — smaller category label, tighter type, no shadow.
   `grid-template-columns` is overridden to a narrower track (was inheriting
   the archive grid's 3-equal-columns-of-the-full-page-width layout, which
   read as much too wide for a "more from this series" strip with only a
   few items in it) so each card sizes to a normal card width instead of a
   third of the whole content column.

   2026-09-09 UPDATE: this used to be a fixed `repeat(auto-fill, 220px)`
   track (a flat px width, not `minmax(220px, 1fr)`) — that first fix
   stopped the earlier "cards visibly resizing on their own" bug
   (`minmax(...,1fr)`'s `1fr` max meant each card kept stretching to fill
   whatever space was left over as the browser was resized), but it also
   meant this grid's column count changed at completely different widths
   than the main archive grid's, and by a different mechanism (however many
   220px columns fit) rather than a deliberate breakpoint. The client asked
   for these related-card grids (Compatible Closures/Bottles, Product
   Variants, Series Products) to "follow exactly" the main archive grid's
   width and responsiveness instead — so this became the exact same
   `repeat(N, 1fr)` rule, at the exact same two breakpoints, as
   `.ulik-product-grid__list` below (see the two @media blocks).

   2026-09-09 UPDATE #2 (later same day): reverted back to a fixed pixel
   width, per explicit client follow-up — the single-product page's content
   column is wider than the archive grid's, so the SAME `1fr` fractions
   resolved to noticeably wider cards there (client screenshot: ~490px vs
   the archive's ~300px), which read as "too wide" and, combined with the
   card's fixed 150px media height, made the product photo look tiny/lost
   inside the oversized card. Fixed-width tracks (not `minmax(width, 1fr)`,
   for the same "keeps growing" reason noted above) keep these cards a
   constant, predictable size regardless of which page or how wide its
   content column is, and `auto-fill` reflows the column count on its own
   as the container narrows — no separate breakpoint overrides needed here,
   unlike the main archive grid below. */
.ulik-product-grid__list--related {
  /* 225px, not 220px — client asked for these cards "a tiny bit bigger,
     +5" after confirming the fixed-width fix above looked right
     (2026-09-09). */
  grid-template-columns: repeat(auto-fill, 225px);
}

.ulik-product-grid__list--related .ulik-product-card {
  box-shadow: none;
}

.ulik-product-grid__list--related .ulik-product-card__media {
  /* min-height/max-height, not just height — the base
     .ulik-product-card__media rule locks those to a taller height, which
     would otherwise win over this override since it doesn't redeclare them
     (min/max-height constrain height regardless of which rule set `height`
     itself). Raised from 150px to 200px per client request (2026-09-10) —
     these "Product Variants" cards were feeling short/cramped next to the
     bigger text sizes below. */
  height: 200px;
  min-height: 200px;
  max-height: 200px;
}

.ulik-product-grid__list--related .ulik-product-card__category {
  font-size: var(--font-size-16); /* was font-size-12 — bumped per client request (2026-09-10) */
  /* The base .ulik-product-card__category rule reserves 2 lines of height
     (min-height: 2.6em) and a fixed line-height so every card in a row of
     the MAIN archive grid stays aligned regardless of category text
     length (see that rule's own comment). These smaller "Product Variants"
     cards don't need that reserved space — client asked for it removed
     here specifically, without touching the main archive grid's fix. */
  min-height: 0;
  line-height: var(--font-size-14); /* client request (2026-09-10): bring back a line-height, set to the --font-size-14 token */
  padding-bottom: 5px; /* client request (2026-09-10): small gap before the title below — the body's flex `gap: 10px` alone read as too tight once the category wraps to 2 lines */
}

.ulik-product-grid__list--related .ulik-product-card__title {
  font-size: var(--font-size-24); /* was font-size-18, briefly font-size-20 — bumped again per client request (2026-09-10) */
}

.ulik-product-grid__list--related .ulik-product-card__meta {
  font-size: var(--font-size-16); /* was font-size-12 — bumped per client request (2026-09-10) */
  font-weight: var(--ulik-fw-light);
  color: var(--ulik-products-text-grey);
}

.ulik-product-grid__list--related .ulik-product-card__link {
  font-size: var(--font-size-14); /* was font-size-12 — bumped per client request (2026-09-10) */
}

/* ---- Pagination ----
   Redesigned 2026-09-09 per client reference screenshot: a small, centered
   "‹ 1 2 3 4 5 ›" row (was a larger, left-aligned Figma-mock style), plus
   bottom margin so it isn't sitting flush against whatever comes after the
   grid.
   Enlarged 2026-09-10 per further client feedback that the row read as too
   small/hard to tap — each number and the ‹ › arrows are now a proper
   min-44px tap target (WCAG's recommended minimum) with its own padding and
   a rounded hover/current background, rather than bare small text with only
   a gap between items. */

.ulik-product-grid__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--ulik-space-5);
  margin-bottom: var(--ulik-space-6);
  font-family: var(--ulik-font-heading);
  font-size: var(--font-size-18);
}

.ulik-product-grid__pagination a,
.ulik-product-grid__pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border-radius: var(--ulik-radius-sm, 8px);
  color: var(--ulik-products-text-grey);
  text-decoration: none;
  transition: background-color var(--ulik-transition-fast, 150ms ease), color var(--ulik-transition-fast, 150ms ease);
}

.ulik-product-grid__pagination a:hover {
  background-color: var(--ulik-color-surface-tint, rgba(31, 78, 158, 0.06));
  color: var(--ulik-products-blue);
}

.ulik-product-grid__pagination .current {
  background-color: var(--ulik-products-blue);
  color: var(--ulik-color-white, #fff);
  font-weight: var(--ulik-fw-semibold);
}

/* ---- "Back to Products" link (client request, 2026-09-09) ---- */

.ulik-product-detail__back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Top spacing (client screenshot, 2026-09-09: "too close to the
     header") — the section this link sits in intentionally uses the
     'flush' modifier (zero top/bottom padding, see the comment on
     .ulik-product-detail below) so the whole page doesn't get a big empty
     band under the sticky header, but that left this link's own text
     touching the header with no breathing room at all. Adding the space
     here, on the link itself, keeps the section flush while fixing the
     look. */
  margin-top: var(--ulik-space-5);
  margin-bottom: var(--ulik-space-3);
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-semibold);
  font-size: var(--font-size-18); /* was --font-size-14 — client asked for the link to read bigger (2026-09-09) */
  color: var(--ulik-products-orange); /* was --ulik-products-blue — client asked for orange (2026-09-09) */
  text-decoration: none;
}

.ulik-product-detail__back-link svg {
  width: 18px;
  height: 18px;
}

.ulik-product-detail__back-link:hover {
  text-decoration: underline;
}

/* ---- Single product: hero (gallery + info column) — Figma node 701:267 ---- */

.ulik-product-detail {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  /* The section this sits in uses the 'flush' modifier (zero top AND
     bottom padding) so the back-link/gallery start right under the page
     header with no wasted gap above them — but that same zero bottom
     padding meant the Applications pills (the last thing in the info
     column, when a product has no long-form Full Description) butted
     straight up against the very next band (Compatible Closures/Bottles or
     Series Products) with no breathing room at all (client screenshot,
     2026-09-09: "sitting literally on top of the next section"). Restoring
     spacing here, on the content itself, keeps the top flush while fixing
     the bottom. */
  margin-bottom: var(--ulik-space-8);
}

.ulik-product-detail__media {
  flex: 0 0 511px;
  max-width: 511px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ulik-product-detail__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ulik-product-detail__hero-image-wrap {
  position: relative;
  /* aspect-ratio, not a fixed height — a fixed 460px was fine at the 511px
     desktop column width Figma specced (511:460 IS this ratio), but at
     mobile widths (where .ulik-product-detail__media drops to 100% width,
     see the responsive block below) that same fixed 460px stayed just as
     tall on a much narrower box, so a `contain`-fit photo only filled the
     top portion and left a big empty gradient strip underneath (client
     screenshot, 2026-09-09). aspect-ratio scales the box proportionally to
     whatever width it actually has at any breakpoint, so it can't happen. */
  aspect-ratio: 511 / 460;
  border: 1px solid rgba(20, 30, 60, 0.08);
  border-radius: 10px;
  background: linear-gradient(138deg, #eef3fb 14%, #dfe9f9 86%);
  overflow: hidden;
}

/* Prev/Next slider arrows — only rendered by single-product.php when a
   product has 2+ images (Featured Image + Product Gallery). The thumbnail
   strip below still works independently; these arrows are the same
   cycle-through-images action for anyone who'd rather click through a
   slider than pick a thumbnail directly, matching the Figma "slider"
   treatment for multi-image products. */
.ulik-product-detail__gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ulik-products-blue);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 30, 60, 0.15);
}

.ulik-product-detail__gallery-arrow--prev {
  left: 16px;
}

.ulik-product-detail__gallery-arrow--next {
  right: 16px;
}

.ulik-product-detail__gallery-arrow:hover {
  background: var(--ulik-color-white);
}

.ulik-product-detail__hero-image,
.ulik-product-detail__hero-image--placeholder {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ulik-product-detail__hero-image--placeholder {
  aspect-ratio: 511 / 460; /* standalone placeholder isn't inside .hero-image-wrap, so it needs its own ratio to get a height at all — see the comment on .hero-image-wrap above. */
  border: 1px solid rgba(20, 30, 60, 0.08);
  border-radius: 10px;
  background: linear-gradient(138deg, #eef3fb 14%, #dfe9f9 86%);
}

.ulik-product-detail__thumbs {
  display: flex;
  gap: 12px;
}

.ulik-product-detail__thumb {
  width: 96px;
  height: 96px;
  padding: 0;
  border-radius: 8px;
  background: #f7f9fc;
  border: 2px solid var(--ulik-color-white);
  cursor: pointer;
  overflow: hidden;
}

.ulik-product-detail__thumb.is-active {
  background: #eef3fb;
  border-color: var(--ulik-products-orange);
}

.ulik-product-detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ulik-product-detail__badge {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--ulik-products-badge-bg);
  font-family: var(--ulik-font-body);
  font-weight: var(--ulik-fw-semibold);
  font-size: var(--font-size-12);
  color: var(--ulik-products-badge-text);
}

.ulik-product-detail__title {
  margin: 0;
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-32);
  color: var(--ulik-products-blue);
}

.ulik-product-detail__subtitle {
  margin: 0;
  font-family: var(--ulik-font-body);
  font-size: var(--font-size-14);
  color: var(--ulik-products-text-grey);
}

.ulik-product-detail__short-desc {
  margin: 0;
  max-width: 560px;
  font-family: var(--ulik-font-body);
  font-size: var(--font-size-16);
  color: var(--ulik-products-text-grey-2);
}

/* REMOVED (2026-09-09) — `.ulik-product-detail__variant`,
   `__variant-label`, and `__variant-select` used to style the "Select
   Variant:" dropdown. That control is gone (see
   ulik_render_product_variants_section() in inc/ulik-products-query.php) in
   favor of a card-based "Product Variants" section, which reuses the shared
   `.ulik-product-related` / `.ulik-product-grid__list--related` rules
   already defined for Compatible Closures/Bottles and Series Products —
   no new CSS needed for it. */

.ulik-product-detail__applications-label {
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-semibold);
  font-size: var(--font-size-16);
  color: var(--ulik-products-text-dark);
}

.ulik-product-detail__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* was `0 10px` (zero row-gap) — pills wrapping onto a 2nd line had no vertical breathing room at all. */
}

.ulik-product-detail__pill {
  padding: 8px 14px;
  border: 1.5px solid rgba(20, 30, 60, 0.15);
  border-radius: 100px;
  font-family: var(--ulik-font-body);
  font-size: var(--font-size-14);
  color: var(--ulik-products-text-grey-2);
  background: var(--ulik-color-white);
}

.ulik-product-detail__full-desc {
  margin-top: var(--ulik-space-2);
  font-family: var(--ulik-font-body);
  font-size: var(--font-size-16);
  color: var(--ulik-color-text);
}

/* ---- Stock available / MOQ table (client reference, 2026-09-09) ---- */

.ulik-product-stock-table {
  width: 100%; /* full width of the content column, matching the spec table above it — no max-width constraint (removed per client feedback to match the reference exactly). */
  border-collapse: collapse;
  border: 1px solid rgba(20, 30, 60, 0.12);
  border-radius: 6px;
  overflow: hidden;
  font-family: var(--ulik-font-body);
  font-size: var(--font-size-14);
}

/* Orange/light-orange for BOTH states (client follow-up, 2026-09-25 — the
   earlier version of this table colored the default in-stock row blue and
   only the non-stock row orange; client feedback was that seeing both blue
   and orange tables across different products read as inconsistent, so this
   is now one single color treatment for every product, in-stock or not).
   `--ulik-products-badge-bg` is the same light-orange tint already used for
   this page's other orange badges, reused here rather than inventing a new
   color. */
.ulik-product-stock-table th {
  background: var(--ulik-products-orange);
  color: var(--ulik-color-white);
  text-align: left;
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-semibold);
  padding: 10px 16px;
}

.ulik-product-stock-table td {
  padding: 10px 16px;
  background: var(--ulik-products-badge-bg);
  color: var(--ulik-products-text-dark);
}

/* ---- Spec list: flat, zebra-striped, no group headers — Figma node 701:285 ---- */

.ulik-product-specs__list {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
}

.ulik-product-specs__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  font-family: var(--ulik-font-body);
  font-size: var(--font-size-14);
}

.ulik-product-specs__row--tint {
  background: var(--ulik-products-tint);
}

.ulik-product-specs__row dt {
  flex: 0 0 220px;
  color: var(--ulik-products-text-grey);
  font-weight: var(--ulik-fw-semibold); /* was --ulik-fw-regular — client asked for the spec labels (Product Code, Height, etc.) to be semi-bold, 2026-09-09. */
}

.ulik-product-specs__row dd {
  /* flex: 1 + right-align, not the old shrink-wrapped-left-of-the-label
     default — with only `justify-content: space-between` and a fixed-width
     dt, the value sat in whatever room was left over on desktop but on a
     narrow mobile column (where dt's 220px already eats most of the row)
     it visibly hugged the label instead of reaching the row's own right
     edge (client screenshot, 2026-09-09: "not filling the space on the
     right"). Growing dd and right-aligning its text makes the value always
     reach the same right edge as the row's own padding, at any width. */
  flex: 1 1 auto;
  margin: 0;
  text-align: right;
  font-weight: var(--ulik-fw-medium); /* client asked for spec values at medium weight (labels are semi-bold, just above) — already medium, unchanged. */
  color: var(--ulik-products-text-dark);
}

/* ---- Compatible Closures / Bottles + Related Products bands ---- */

.ulik-product-related {
  padding: 64px 48px;
}

.ulik-product-related--tinted {
  background: var(--ulik-color-surface-blue); /* #F0F3F8 — same token as the What's New hero's left panel; confirmed identical to Figma's #f0f3f8 here */
}

.ulik-product-related__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ulik-space-3);
  margin-bottom: 28px;
}

.ulik-product-related__title {
  margin: 0 0 6px;
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-bold);
  font-size: var(--font-size-22);
  color: var(--ulik-products-blue);
}

.ulik-product-related__subtitle {
  margin: 0;
  font-family: var(--ulik-font-body);
  font-size: var(--font-size-14);
  color: var(--ulik-products-text-grey);
}

.ulik-product-related__all-link {
  flex-shrink: 0;
  font-family: var(--ulik-font-heading);
  font-weight: var(--ulik-fw-semibold);
  font-size: var(--font-size-14);
  color: var(--ulik-products-orange);
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .ulik-product-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .ulik-product-detail {
    flex-direction: column;
    /* `align-items: flex-start` (the base rule, above) is meant for the
       desktop ROW layout's cross axis (vertical) — it lets the media column
       and the content column have independent heights instead of being
       stretched to match each other. Once flex-direction flips to column
       here, that same "flex-start" instead constrains the HORIZONTAL axis:
       without overriding it, `.ulik-product-detail__content` (and
       everything inside it — the spec list, the stock table, etc.) shrinks
       to its own content width instead of filling the column, which is
       exactly why `.ulik-product-specs__list` and friends read as "not
       full width" on phone/tablet (client feedback, 2026-09-09) — the same
       bug pattern already found and fixed for `.ulik-products-page` below.
       `stretch` makes both the media and content columns fill the full
       available width, same as the (already-100%-width) rule the media
       column gets right below. */
    align-items: stretch;
  }

  .ulik-product-detail__media {
    max-width: 100%;
    flex-basis: auto;
  }
}

/* Phone in LANDSCAPE orientation (client feedback, 2026-09-09: "the product
   details is not phone horizontal friendly"). The rule above stacks the
   gallery on top of the info column at any width ≤1024px, which is right
   for a tall, narrow portrait phone screen — but on a short, wide landscape
   phone screen the hero image (aspect-ratio 511:460, so nearly as tall as
   it is wide) then renders at close to the full viewport width, making it
   taller than the entire visible screen and burying everything else below
   a long scroll. Restoring the side-by-side row layout here — gated on
   short viewport HEIGHT via `orientation: landscape` + `max-height`, not
   viewport width, so it only kicks in for genuinely short screens (phones
   in landscape), never for a portrait phone or an already-side-by-side
   tablet/desktop — keeps the image to a sensible fraction of the screen
   instead of dominating it. Placed after the max-width:1024px block on
   purpose so it wins the cascade when both conditions are true (most
   landscape phones are also ≤1024px wide). */
@media (orientation: landscape) and (max-height: 500px) {
  .ulik-product-detail {
    flex-direction: row;
    align-items: flex-start;
  }

  .ulik-product-detail__media {
    flex: 0 0 42%;
    max-width: 42%;
  }

  .ulik-product-detail__hero-image-wrap {
    max-height: 80vh; /* belt-and-suspenders alongside the 42% width above — aspect-ratio already keeps this in proportion, this just guards against an unusually tall future photo. */
  }

  .ulik-product-detail__content {
    flex: 1 1 58%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .ulik-products-page {
    flex-direction: column;
    /* .ulik-products-page has `align-items: flex-start` for the desktop
       (row) layout, so the sidebar and the card grid don't get stretched to
       match each other's height side-by-side. Once flex-direction flips to
       column here, "flex-start" on the CROSS axis means horizontal — so
       without this override, .ulik-products-page__main (and the card grid
       inside it) shrink-wraps to its own content width instead of filling
       the screen, which is why the product card read as narrower than the
       viewport with empty space beside it on mobile (client screenshot,
       2026-09-09). */
    align-items: stretch;
  }

  .ulik-products-page__sidebar {
    flex: 1 1 auto;
    width: 100%;
    position: static;
  }

  .ulik-product-related {
    padding: 40px 24px;
  }

  .ulik-product-related__head {
    flex-direction: column;
  }

  .ulik-product-detail {
    margin-bottom: var(--ulik-space-6);
  }

  /* ---- "Back to Products" link: less top space on mobile ---- */
  .ulik-product-detail__back-link {
    /* The 40px (--ulik-space-5) desktop value (added so the link wasn't
       touching the sticky header — see the rule above) reads as an
       oversized gap on a phone screen; client feedback 2026-09-10. Half
       that is still enough breathing room at this width. */
    margin-top: var(--ulik-space-3);
  }
}

@media (max-width: 560px) {
  .ulik-product-grid__list {
    grid-template-columns: 1fr;
  }
}