/* FD - Pricing Display, see system/fd-pricing-display.ocmod.xml

   Selectors start with :is(#fd-pricing, body) — the id never exists, it only lends ID-level
   specificity so these rules beat Journal3's own price rules
   (e.g. .route-product-product:not(.popup) .product-info .product-details .product-price-new,
   .product-thumb .price > div span) without !important.

   Sizes live in custom properties per variant: page (product page), card (grids and carousels),
   side (side lists).

   Labels are translated, so their length varies per language (НА ЕДРО / WHOLESALE / ΧΟΝΔΡΙΚΗ /
   EN-GROS). --fd-label-w is therefore a minimum, not a fixed width: where subgrid is supported the
   label column auto-sizes to the longest label in the block and every row stays aligned; without
   it the label simply takes the room it needs. */

:is(#fd-pricing, body) .fd-pricing {
  --fd-red: #e0322b;
  --fd-red-grad: linear-gradient(135deg, #f0463f 0%, #c9201e 100%);
  --fd-purple: #5a2fa3;
  --fd-purple-border: #8d62cf;
  --fd-purple-grad: linear-gradient(135deg, #9466d6 0%, #5b34a8 100%);
  --fd-muted: #9aa0a6;
  --fd-ink: #1c2021;

  /* page defaults */
  --fd-gap: 10px;
  --fd-col-gap: 12px;
  --fd-label-w: 120px;
  --fd-title-fs: 13px;
  --fd-label-fs: 12px;
  --fd-regular-fs: 16px;
  --fd-promo-fs: 34px;
  --fd-b2b-fs: 21px;
  --fd-badge-fs: 13px;
  --fd-badge-minw: 54px;
  --fd-badge-pad: 4px 10px;
  --fd-row-h: 28px;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--fd-gap);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  white-space: normal;
}

:is(#fd-pricing, body) .fd-pricing--card {
  --fd-gap: 6px;
  --fd-col-gap: 8px;
  --fd-label-w: 74px;
  --fd-title-fs: 11px;
  --fd-label-fs: 10px;
  --fd-regular-fs: 12px;
  --fd-promo-fs: 22px;
  --fd-b2b-fs: 16px;
  --fd-badge-fs: 11px;
  --fd-badge-minw: 42px;
  --fd-badge-pad: 3px 6px;
  --fd-row-h: 22px;
}

:is(#fd-pricing, body) .fd-pricing--side {
  --fd-gap: 5px;
  --fd-col-gap: 6px;
  --fd-label-w: 62px;
  --fd-title-fs: 10px;
  --fd-label-fs: 9px;
  --fd-regular-fs: 11px;
  --fd-promo-fs: 17px;
  --fd-b2b-fs: 14px;
  --fd-badge-fs: 10px;
  --fd-badge-minw: 38px;
  --fd-badge-pad: 2px 5px;
  --fd-row-h: 20px;
}

/* Wrappers: product page price column takes the full row; card/side .price gets Journal's flex resets undone */
:is(#fd-pricing, body) #product .product-price-group .fd-price-wrapper {
  flex: 1 1 100%;
  width: 100%;
  max-width: 620px;
}

:is(#fd-pricing, body) #product .price-wrapper .fd-price-group {
  display: block;
  width: 100%;
  white-space: normal;
}

/* Two id-weights here: the store's custom CSS pins prices with rules like
   "#bottom .product-layout.has-extra-button .price { position: absolute; bottom: 14px }"

   `display` is deliberately NOT set: Journal's per-module "Price" toggle works purely through
   CSS (.product-thumb .price -> display:flex when on, display:none when off), so overriding it
   here would force the price back on in modules where it was switched off - the gift module on
   the product page, for one. Leaving it alone keeps that toggle authoritative; flex lays the
   block out the same as block does, which is what the flex-grow reset below is for. */
:is(#fd-pricing, body) :is(#fd-pricing-card, .product-thumb, .side-product) .price.fd-card-price {
  width: 100%;
  margin-top: auto;
  text-align: left;
  /* Some Journal product modules pin .price absolutely beside the cart button; the taller block has to flow */
  position: relative;
  inset: auto;
  transform: none;
  max-width: 100%;
  /* Cards live in columns of very different widths (6-in-a-row carousels, side columns),
     so card sizes follow the width of this box rather than the viewport */
  container-type: inline-size;
  container-name: fd-card;
}

/* Stars and the stock line.

   Journal lays the stars out as their own item in the caption column, and the store's Custom CSS
   still pins them where the old one-line price used to be:

     .desktop .main-products-style.product-grid.product-grid .product-thumb .rating
         { position: absolute; bottom: 86px }
     #product-category .caption .rating, #product-search .caption .rating
         { height: 10px !important; margin-top: 10px !important }
     .mobile [id^="product-"] ... .rating
         { position: relative; display: block; height: 10px; width: auto }

   Against the taller price block those land below the stock line rather than on it, and the three
   disagree with each other, so the stars sat differently on the home page, on category pages and
   in search. Everything below is scoped with :has(> .fd-card-price) so it only touches the cards
   this extension renders; !important is only there to outrank the legacy rules above. */
:is(#fd-pricing, body) :is(#fd-pricing-card, .product-thumb) .caption:has(> .fd-card-price) > .rating {
  order: -9;
  align-self: flex-end;
  align-items: center;
  width: 50%;
  position: static;
  padding: 0 5px 0 0;
  /* right-aligned whether or not the stars are a flex box: the .mobile rule above makes this a
     block, and `display` is deliberately left alone - see below */
  text-align: right;

  /* The only two declarations that have to be !important, because #product-category and
     #product-search in Custom CSS set them that way. `display` is NOT one of them: Journal's
     per-module "Rating Visibility" toggle hides the stars with `display: none !important`
     (the gift module and the related-products modules on the product page have it off), and
     forcing a display here would switch them back on. */
  height: 0 !important;
  margin: 0 !important;
}

/* Above Journal's 900px card breakpoint the stars sit on the stock line. The box is zero-height
   and centres its content, so its top edge is where the stars' middle lands; -6.3px puts that on
   the middle of the stock text, and the matching positive margin-bottom keeps the column's
   height unchanged. Measured against the text itself, not the .stats box - on category pages that
   box is shorter than the text inside it. */
:is(#fd-pricing, body) :is(#fd-pricing-card, .product-thumb) .caption:has(> .stats):has(> .fd-card-price) > .rating {
  margin-top: -6.3px !important;
  margin-bottom: 6.3px !important;
}

/* Below it the stock line is built differently on each page type (on category pages the .stats
   box is 20.5px around 25.5px of content), so no single offset holds. Rather than chase it, the
   stars get their own line under the stock line. */
@media (max-width: 900px) {
  :is(#fd-pricing, body) :is(#fd-pricing-card, .product-thumb) .caption:has(> .fd-card-price) > .rating,
  :is(#fd-pricing, body) :is(#fd-pricing-card, .product-thumb) .caption:has(> .stats):has(> .fd-card-price) > .rating {
    height: auto !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }
}

:is(#fd-pricing, body) :is(#fd-pricing-card, .product-thumb, .side-product) .price.fd-card-price {
  padding-top: 6px;
}

:is(#fd-pricing, body) .fd-card-price > .fd-pricing {
  flex-grow: 0;
  margin: 0;
}

/* Rows */
:is(#fd-pricing, body) .fd-pricing .fd-pricing-title {
  font-size: var(--fd-title-fs);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fd-ink);
}

:is(#fd-pricing, body) .fd-pricing .fd-pricing-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--fd-col-gap);
  width: auto;
  min-height: var(--fd-row-h);
  margin: 0;
}

:is(#fd-pricing, body) .fd-pricing .fd-pricing-label,
:is(#fd-pricing, body) .fd-pricing .fd-pricing-value,
:is(#fd-pricing, body) .fd-pricing .fd-pricing-badge {
  display: inline-block;
  flex-basis: auto;
  margin: 0;
  order: 0;
  align-self: center;
  line-height: 1.1;
  white-space: nowrap;
}

:is(#fd-pricing, body) .fd-pricing .fd-pricing-label {
  flex: 0 0 auto;
  min-width: var(--fd-label-w);
  font-size: var(--fd-label-fs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fd-ink);
}

:is(#fd-pricing, body) .fd-pricing .fd-pricing-value {
  flex: 0 1 auto;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  text-decoration: none;
}

:is(#fd-pricing, body) .fd-pricing .fd-pricing-regular .fd-pricing-label,
:is(#fd-pricing, body) .fd-pricing .fd-pricing-regular .fd-pricing-value {
  color: var(--fd-muted);
}

:is(#fd-pricing, body) .fd-pricing .fd-pricing-regular .fd-pricing-value {
  font-size: var(--fd-regular-fs);
  font-weight: 600;
  text-decoration: line-through;
}

:is(#fd-pricing, body) .fd-pricing .fd-pricing-promo .fd-pricing-value {
  font-size: var(--fd-promo-fs);
  letter-spacing: -.02em;
  color: var(--fd-red);
}

:is(#fd-pricing, body) .fd-pricing .fd-pricing-only .fd-pricing-value {
  color: var(--fd-ink);
}

/* НА ЕДРО row: no border or padding, so it stays inside the card and its label, price
   and badge sit on the same vertical lines as the РЕДОВНА / ПРОМО rows */
:is(#fd-pricing, body) .fd-pricing .fd-pricing-b2b {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

:is(#fd-pricing, body) .fd-pricing .fd-pricing-b2b .fd-pricing-label {
  color: var(--fd-purple);
}

:is(#fd-pricing, body) .fd-pricing .fd-pricing-b2b .fd-pricing-value {
  font-size: var(--fd-b2b-fs);
  color: var(--fd-purple);
}

/* The whole row is the link; the price inside is plain text */
:is(#fd-pricing, body) .fd-pricing a.fd-pricing-b2b {
  color: var(--fd-purple);
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto; /* Journal sets pointer-events: none on .product-price-group */
  transition: opacity .15s ease;
}

:is(#fd-pricing, body) .fd-pricing a.fd-pricing-b2b:hover {
  opacity: .8;
  text-decoration: none;
}

:is(#fd-pricing, body) .fd-pricing a.fd-pricing-b2b:focus-visible {
  outline: 2px solid var(--fd-purple-border);
  outline-offset: 3px;
  border-radius: 4px;
}

:is(#fd-pricing, body) .fd-pricing a.fd-pricing-b2b:hover .fd-pricing-value,
:is(#fd-pricing, body) .fd-pricing a.fd-pricing-b2b:focus-visible .fd-pricing-value {
  color: var(--fd-purple);
  text-decoration: none;
}

/* Badges */
:is(#fd-pricing, body) .fd-pricing .fd-pricing-badge {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: var(--fd-badge-minw);
  padding: var(--fd-badge-pad);
  border-radius: 5px;
  font-size: var(--fd-badge-fs);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

:is(#fd-pricing, body) .fd-pricing .fd-pricing-badge-promo {
  background: var(--fd-red-grad);
}

:is(#fd-pricing, body) .fd-pricing .fd-pricing-badge-b2b {
  background: var(--fd-purple-grad);
}

/* Card width tiers (card and side variants) */
@container fd-card (max-width: 259px) {
  :is(#fd-pricing, body) .fd-pricing {
    --fd-gap: 5px;
    --fd-col-gap: 5px;
    --fd-label-w: 58px;
    --fd-title-fs: 10px;
    --fd-label-fs: 9px;
    --fd-regular-fs: 11px;
    --fd-promo-fs: 17px;
    --fd-b2b-fs: 14px;
    --fd-badge-fs: 10px;
    --fd-badge-minw: 36px;
    --fd-badge-pad: 2px 4px;
    --fd-row-h: 20px;
  }
}

@container fd-card (max-width: 189px) {
  :is(#fd-pricing, body) .fd-pricing {
    --fd-gap: 4px;
    --fd-col-gap: 4px;
    --fd-label-w: 48px;
    --fd-title-fs: 9px;
    --fd-label-fs: 8px;
    --fd-regular-fs: 10px;
    --fd-promo-fs: 15px;
    --fd-b2b-fs: 12px;
    --fd-badge-fs: 9px;
    --fd-badge-minw: 30px;
    --fd-badge-pad: 2px 3px;
    --fd-row-h: 18px;
  }

  :is(#fd-pricing, body) .fd-pricing .fd-pricing-label {
    letter-spacing: .05em;
  }

  :is(#fd-pricing, body) .fd-pricing .fd-pricing-title {
    letter-spacing: .15em;
  }
}

@media (max-width: 480px) {
  :is(#fd-pricing, body) .fd-pricing--page {
    --fd-label-w: 88px;
    --fd-label-fs: 11px;
    --fd-promo-fs: 28px;
    --fd-b2b-fs: 18px;
    --fd-badge-fs: 12px;
    --fd-badge-minw: 48px;
    --fd-badge-pad: 3px 7px;
  }
}

/* One label column per block, sized to the longest translated label, with the prices and the
   badges lining up under each other. Rows keep their own box (the НА ЕДРО row is a link). */
@supports (grid-template-columns: subgrid) {
  :is(#fd-pricing, body) .fd-pricing {
    display: grid;
    grid-template-columns: minmax(var(--fd-label-w), auto) minmax(0, 1fr) auto;
    gap: var(--fd-gap) var(--fd-col-gap);
  }

  :is(#fd-pricing, body) .fd-pricing .fd-pricing-title {
    grid-column: 1 / -1;
  }

  :is(#fd-pricing, body) .fd-pricing .fd-pricing-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
  }

  :is(#fd-pricing, body) .fd-pricing .fd-pricing-label {
    min-width: 0;
  }

  :is(#fd-pricing, body) .fd-pricing .fd-pricing-badge {
    grid-column: 3;
    margin-left: 0;
    justify-self: end;
  }
}