/* ----------------------------------------------------------------------------
   Nail drill buy box. Light surface wearing the landing's grammar: shop face
   700 with negative tracking, uppercase micro terms, hairline rows, no cards,
   no shadows, pills as the only radius. Tokens bridged to --eg-*.

   Loaded by sections/main-product.liquid only when template.suffix is
   'nail-drill'. Every rule below nests inside one armour selector that copies
   the legacy Elegelli PDP skin's prefix (theme.css 20139+) and adds the
   .product--nail-drill 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. */
#nail-drill-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--nail-drill {
  /* Bridged to shop --eg-* (campaign glow accent kept). */
  --ndb-ink: var(--eg-ink, #0d0d0d);
  --ndb-soft: var(--eg-muted, rgb(13 13 13 / 0.56));
  --ndb-faint: rgb(13 13 13 / 0.38);
  --ndb-hairline: var(--eg-line, rgb(13 13 13 / 0.12));
  --ndb-hairline-soft: var(--eg-hairline, rgb(13 13 13 / 0.06));
  --ndb-glow: #cbdff5;
  --ndb-font: var(--font-heading-family, var(--font-body-family, system-ui, sans-serif));
  --ndb-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(--ndb-ink);
  font-family: var(--ndb-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(> #nail-drill-buy) {
    margin: 0;
  }

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

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

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

  & > .rte:has(> .nd-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%;
  }

  & .product__title h1,
  & .product__title h1 .word {
    color: var(--ndb-ink);
    font-family: var(--ndb-font);
    font-size: clamp(34px, 2.9vw, 48px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    text-align: start;
    text-wrap: balance;
  }

  & .product__title .product__price {
    place-self: start;
    margin: 0;
    color: var(--ndb-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(--ndb-faint);
  }

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

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

  & > .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(--ndb-soft);
    font-variant-numeric: tabular-nums;
  }

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

  & .product__rating .rating {
    color: var(--ndb-ink);
    font-size: 13px;
  }

  & .product__rating .rating-text,
  & .product__rating .rating-count {
    color: var(--ndb-soft);
    font-size: 13px;
  }

  & .product__rating .rating-count {
    border-inline-start-color: var(--ndb-hairline);
  }

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

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

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

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

  /* ------------------------------------------------------------------ */
  /* Key spec strip: the DJI row                                         */
  /* ------------------------------------------------------------------ */

  & > .rte:has(> .nd-buy-specs) {
    margin-block-start: 20px;
  }

  & .nd-buy-specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--ndb-hairline);
    border-block-end: 1px solid var(--ndb-hairline-soft);
  }

  & .nd-buy-specs__cell {
    display: grid;
    gap: 6px;
    align-content: start;
    margin: 0;
    padding-block: 16px;
    padding-inline: 0;
  }

  & .nd-buy-specs__cell + .nd-buy-specs__cell {
    padding-inline-start: 16px;
    border-inline-start: 1px solid var(--ndb-hairline-soft);
  }

  & .nd-buy-specs__value {
    color: var(--ndb-ink);
    font-size: clamp(19px, 1.55vw, 24px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  & .nd-buy-specs__term {
    color: var(--ndb-faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.35;
    text-transform: uppercase;
  }

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

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

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

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

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

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

  /* ------------------------------------------------------------------ */
  /* Quantity and add to cart: the landing pill, inverted for light ink  */
  /* ------------------------------------------------------------------ */

  & .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(--ndb-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(--ndb-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(--ndb-ink);
    color: #ffffff;
    box-shadow: none;
    font-family: var(--ndb-font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: transform 0.32s var(--ndb-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(--ndb-hairline-soft);
    border-radius: 0;
  }

  & details.product__accordion:first-of-type {
    border-block-start-color: var(--ndb-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(--ndb-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(--ndb-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 :is(ul, ol) {
    margin: 0;
    padding-inline-start: 18px;
  }

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

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

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

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

  & > .flex.justify-between.items-center .link {
    color: var(--ndb-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(--ndb-glow);
    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(30px, 8.5vw, 36px);
      line-height: 1.02;
      text-align: start;
    }

    & .nd-buy-specs {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    & .nd-buy-specs__cell {
      padding-block: 14px;
    }

    & .nd-buy-specs__cell + .nd-buy-specs__cell {
      padding-inline-start: 0;
      border-inline-start: 0;
    }

    & .nd-buy-specs__cell:nth-child(even) {
      padding-inline-start: 16px;
      border-inline-start: 1px solid var(--ndb-hairline-soft);
    }

    & .nd-buy-specs__cell:nth-child(n + 3) {
      border-block-start: 1px solid var(--ndb-hairline-soft);
    }

    & .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;
    }
  }
}