/* ----------------------------------------------------------------------------
   Builder gel buy box. Light surface wearing the landing's grammar: Helvetica
   700 with negative tracking, uppercase micro terms, hairline rows, no cards,
   no shadows, pills as the only radius. The sibling of nail-drill-buy.css
   with the warm porcelain accent instead of the glow blue.

   Loaded by sections/main-product.liquid only when template.suffix is
   'gel-builder'. Every rule below nests inside one armour selector that
   copies the legacy Elegelli PDP skin's prefix (theme.css 20139+) and adds
   the .product--gel-builder hook, so each override outweighs its legacy
   counterpart by two classes, in every media query, regardless of order.

   Doctrine: when a legacy rule carries extra tail classes, copy the tail
   verbatim here. Known fat tails: .product__rating.flex.items-center.gap-2,
   .product__title.grid.gap-3, .product__title h1 .word.
   ---------------------------------------------------------------------------- */

/* The landing's closing CTA scrolls here; clear the sticky header. */
#gel-builder-buy {
  scroll-margin-block-start: calc(var(--header-height, 0px) + 24px);
}

.template-product #MainContent :is(.shopify-section[id$="__main-product"], #shopify-section-main-product) .product__info.product--gel-builder {
  /* Ink, mirrored from gel-builder.css and its porcelain tokens */
  --gbb-ink: #0d0d0d;
  --gbb-soft: rgb(0 0 0 / 0.56);
  --gbb-faint: rgb(0 0 0 / 0.38);
  --gbb-hairline: rgb(0 0 0 / 0.12);
  --gbb-hairline-soft: rgb(0 0 0 / 0.06);
  --gbb-warm-ink: #7a4526;
  --gbb-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --gbb-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The card becomes a plain column; hairlines do the grouping. */
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--gbb-ink);
  font-family: var(--gbb-font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;

  & > * + * {
    margin-block-start: 24px;
  }

  /* The anchor block renders as an empty .rte; keep it out of the rhythm. */
  & > .rte:has(> #gel-builder-buy) {
    margin: 0;
  }

  & > .rte:has(> #gel-builder-buy) + * {
    margin-block-start: 0;
  }

  /* ------------------------------------------------------------------ */
  /* Eyebrow                                                             */
  /* ------------------------------------------------------------------ */

  & .gb-buy-eyebrow {
    margin: 0;
    color: var(--gbb-faint);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  & > .rte:has(> .gb-buy-eyebrow) + * {
    margin-block-start: 10px;
  }

  /* ------------------------------------------------------------------ */
  /* Title and price                                                     */
  /* ------------------------------------------------------------------ */

  & .product__title.with-price,
  & .product__title.grid.gap-3 {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 12px;
    width: 100%;
  }

  /* Calmer than the nail drill's 48px cap: the shade names run long
     (Prisme Holographique, Galet de la Riviera) and need the room. */
  & .product__title h1,
  & .product__title h1 .word {
    color: var(--gbb-ink);
    font-family: var(--gbb-font);
    font-size: clamp(31px, 2.7vw, 42px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    text-align: start;
    text-wrap: balance;
  }

  & .product__title .product__price {
    place-self: start;
    margin: 0;
    color: var(--gbb-ink);
    font-size: clamp(19px, 1.35vw, 23px);
    font-weight: 500;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
  }

  /* product-price renders a flex div that goes lg:flex-col xl:items-end;
     keep it a single baseline row at every width. */
  & .product__price .price {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }

  & .product__price :is(.price__sale, .unit-price) {
    color: var(--gbb-faint);
  }

  & .product__price .price__sale {
    font-size: 0.72em;
  }

  & > .installment {
    margin-block-start: 8px;
    color: var(--gbb-faint);
    font-size: 12px;
  }

  & > .installment:not(:has(shopify-payment-terms)) {
    display: none;
  }

  /* ------------------------------------------------------------------ */
  /* Standalone price row: rating above, lede below                      */
  /* ------------------------------------------------------------------ */

  & > .product__rating + .product__price {
    margin-block-start: 12px;
  }

  & > .product__price {
    gap: 4px;
  }

  & > .product__price .price {
    color: var(--gbb-ink);
    font-size: clamp(21px, 1.6vw, 26px);
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  & > .product__price .installment {
    margin: 0;
    color: var(--gbb-faint);
    font-size: 12px;
  }

  & > .product__price .installment:not(:has(shopify-payment-terms)) {
    display: none;
  }

  /* ------------------------------------------------------------------ */
  /* Rating: quiet inline row, never the mobile grey pill                */
  /* ------------------------------------------------------------------ */

  & .product__rating.flex.items-center.gap-2,
  & .product__rating {
    position: static;
    order: 0;
    width: fit-content;
    min-height: 0;
    margin: 0;
    padding: 0;
    gap: 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--gbb-soft);
    font-variant-numeric: tabular-nums;
  }

  /* Placed after the reset above so the padding survives its shorthand. */
  & .product__rating.flex.items-center.gap-2 {
    padding-top: 16px;
  }

  & > .product__title + .product__rating,
  & > .installment + .product__rating {
    margin-block-start: 12px;
  }

  & .product__rating .rating {
    color: #a5643c;
    font-size: 13px;
  }

  /* The theme paints the star glyph through a gradient text clip; repaint
     it in the porcelain warm so it stops shouting orange. */
  & .product__rating .rating-star::before {
    background: #a5643c;
    -webkit-background-clip: text;
    background-clip: text;
  }

  & .product__rating .rating-text {
    color: var(--gbb-ink);
    font-size: 13px;
    font-weight: 600;
  }

  & .product__rating .rating-count {
    color: var(--gbb-soft);
    font-size: 13px;
    border-inline-start-color: var(--gbb-hairline);
  }

  /* ------------------------------------------------------------------ */
  /* Lede                                                                */
  /* ------------------------------------------------------------------ */

  & > .rte:has(> .gb-buy-lede) {
    margin-block-start: 18px;
  }

  & .gb-buy-lede {
    max-width: 44ch;
  }

  & .gb-buy-lede p {
    margin: 0;
    color: var(--gbb-soft);
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.6;
    letter-spacing: -0.005em;
    text-wrap: pretty;
  }

  /* ------------------------------------------------------------------ */
  /* Benefits: plain words below the buy button, never a data table      */
  /* ------------------------------------------------------------------ */

  & > .rte:has(> .gb-buy-benefits) {
    margin-block-start: 22px;
  }

  & .gb-buy-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 20px;
    margin: 0;
    padding: 16px 0;
    list-style: none;
    border-block-start: 1px solid var(--gbb-hairline);
    border-block-end: 1px solid var(--gbb-hairline);
  }

  & .gb-buy-benefits li {
    position: relative;
    margin: 0;
    padding-inline-start: 15px;
    color: rgb(0 0 0 / 0.68);
    font-size: 13.5px;
    line-height: 1.4;
    letter-spacing: -0.005em;
  }

  & .gb-buy-benefits li::before {
    position: absolute;
    content: '';
    left: 0;
    top: 0.52em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #a5643c;
  }

  & > .rte:has(> .gb-buy-benefits) + details.product__accordion {
    margin-block-start: 26px;
  }

  /* ------------------------------------------------------------------ */
  /* Variant picker: micro terms, hard-edged image swatches              */
  /* ------------------------------------------------------------------ */

  & .variant-picker {
    gap: 14px;
  }

  & .variant-picker .form__label {
    color: var(--gbb-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  & .variant-picker .form__label .font-medium {
    color: var(--gbb-ink);
  }

  & .swatches--variant .color-swatch {
    --swatch-radius: 0px;
  }

  & .swatches .label-swatch {
    --swatch-radius: 999px;
  }

  /* ------------------------------------------------------------------ */
  /* Quantity and add to cart: the landing pill                          */
  /* ------------------------------------------------------------------ */

  & .product-form-wrapper {
    margin-block-start: 24px;
  }

  & .product-form {
    gap: 20px;
  }

  & .product-form__buttons {
    gap: 12px;
  }

  & .buy-buttons {
    gap: 10px;
  }

  & .quantity {
    min-height: 58px;
    background: transparent;
    border: 1px solid rgb(0 0 0 / 0.16);
    border-radius: 999px;
  }

  & .quantity .quantity__button {
    color: var(--gbb-ink);
  }

  & .quantity .quantity__button:first-of-type {
    padding-inline-start: 20px;
  }

  & .quantity .quantity__button:last-of-type {
    padding-inline-end: 20px;
  }

  & .quantity .quantity__input {
    color: var(--gbb-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  & :is(.product-form__submit, .product-form__alert) {
    min-height: 58px;
    padding-inline: 32px;
    border: 0;
    border-radius: 999px;
    background: var(--gbb-ink);
    color: #ffffff;
    box-shadow: none;
    font-family: var(--gbb-font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: transform 0.32s var(--gbb-ease), background-color 0.32s ease;
  }

  & :is(.product-form__submit, .product-form__alert)::after {
    border: 0;
    box-shadow: none;
  }

  & :is(.product-form__submit, .product-form__alert) .btn-fill {
    display: none;
  }

  & :is(.product-form__submit, .product-form__alert) .btn-text {
    gap: 0;
    color: inherit;
    font-weight: inherit;
  }

  & :is(.product-form__submit, .product-form__alert):hover {
    background: #1f1f1f;
    transform: translateY(-2px);
  }

  & .product-form__submit .price {
    font-variant-numeric: tabular-nums;
  }

  & .product-form__submit[disabled] {
    min-height: 58px;
    height: auto;
    background: rgb(0 0 0 / 0.06);
    color: rgb(0 0 0 / 0.44);
    transform: none;
  }

  /* ------------------------------------------------------------------ */
  /* Accordions: spec-table rows, no fills                               */
  /* ------------------------------------------------------------------ */

  & details.product__accordion {
    margin-block-start: 0;
    background: transparent;
    border-block-end: 0;
    border-block-start: 1px solid var(--gbb-hairline-soft);
    border-radius: 0;
  }

  & details.product__accordion:first-of-type {
    border-block-start-color: var(--gbb-hairline);
  }

  & details.product__accordion + details.product__accordion {
    margin-block-start: 0;
  }

  & > .product-form-wrapper + details.product__accordion {
    margin-block-start: 36px;
  }

  & .product__accordion .details__summary {
    min-height: 60px;
    padding: 0;
    color: var(--gbb-ink);
  }

  & .product__accordion .details__summary span {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  & .product__accordion .details__summary > .icon {
    width: 12px;
    height: 12px;
    color: var(--gbb-faint);
  }

  & .product__accordion .details__content {
    max-width: 100%;
    margin: 0;
    padding: 0 0 22px;
    color: rgb(0 0 0 / 0.62);
    font-size: 14px;
    line-height: 1.65;
  }

  & .product__accordion .details__content p {
    margin: 0;
  }

  & .product__accordion .details__content p + p {
    margin-block-start: 10px;
  }

  & .product__accordion .details__content :is(ul, ol) {
    margin: 0;
    padding-inline-start: 18px;
  }

  & .product__accordion .details__content p + :is(ul, ol),
  & .product__accordion .details__content :is(ul, ol) + p {
    margin-block-start: 10px;
  }

  & .product__accordion .details__content li + li {
    margin-block-start: 6px;
  }

  & .product__accordion .details__content li::marker {
    color: var(--gbb-faint);
  }

  /* ------------------------------------------------------------------ */
  /* Share and help row                                                  */
  /* ------------------------------------------------------------------ */

  & > .flex.justify-between.items-center {
    margin-block-start: 0;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--gbb-hairline-soft);
    color: var(--gbb-soft);
    font-size: 13px;
  }

  & > .flex.justify-between.items-center .link {
    color: var(--gbb-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }

  & > .flex.justify-between.items-center .link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  & .social-sharing__link {
    opacity: 0.55;
    transition: opacity 0.2s ease;
  }

  & .social-sharing__link:hover {
    opacity: 1;
  }

  /* ------------------------------------------------------------------ */
  /* Focus, straight from the landing                                    */
  /* ------------------------------------------------------------------ */

  & :is(a, button, summary, input):focus-visible {
    outline: 2px solid var(--gbb-warm-ink);
    outline-offset: 3px;
  }

  /* ------------------------------------------------------------------ */
  /* Mobile                                                              */
  /* ------------------------------------------------------------------ */

  @media screen and (max-width: 767px) {
    & {
      margin-block-start: 16px;
    }

    & > * + * {
      margin-block-start: 20px;
    }

    & .product__title h1,
    & .product__title h1 .word {
      font-size: clamp(27px, 7.6vw, 33px);
      line-height: 1.06;
      text-align: start;
    }

    & .gb-buy-benefits {
      gap: 10px 14px;
      padding: 14px 0;
    }

    & .gb-buy-benefits li {
      font-size: 13px;
    }

    & .quantity,
    & :is(.product-form__submit, .product-form__alert),
    & .product-form__submit[disabled] {
      min-height: 54px;
    }

    & > .product-form-wrapper + details.product__accordion {
      margin-block-start: 28px;
    }
  }
}