/* Product-page refinements that bind live WooCommerce data to the Figma card. */
.brave-product-gallery {
  overflow: hidden;
  isolation: isolate;
}

.brave-product-gallery__slides,
.brave-product-gallery__slide,
.brave-product-gallery__shade {
  position: absolute;
  inset: 0;
}

.brave-product-gallery__slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms ease;
}

.brave-product-gallery__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.brave-product-gallery__slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.brave-product-gallery__slide > img[src*="imgLogo-f6ee23ce.svg"] {
  object-fit: contain;
}

/* No-image products inherit the approved catalog placeholder treatment:
   warm media field, the dedicated 22%-opacity logo, and the gallery shade. */
.brave-product-gallery--placeholder {
  background-color: #381b11;
}

.brave-product-gallery--placeholder .brave-product-gallery__slide > img {
  position: absolute;
  inset: auto;
  left: 15.755627%;
  top: 39.372822%;
  width: 68.674116%;
  height: 10.815401%;
  max-width: none;
  object-fit: fill;
  padding: 0;
  opacity: 1;
}

.brave-product-gallery--mobile.brave-product-gallery--placeholder .brave-product-gallery__slide > img {
  top: 50%;
  height: 9.423209%;
  object-fit: contain;
  transform: translateY(-50%);
}

.brave-product-gallery--desktop,
.brave-product-gallery--desktop .brave-product-gallery__slide > img,
.brave-product-gallery--desktop .brave-product-gallery__shade {
  border-radius: 2.083333vw;
}

.brave-product-gallery--mobile,
.brave-product-gallery--mobile .brave-product-gallery__slide > img,
.brave-product-gallery--mobile .brave-product-gallery__shade {
  border-radius: 5.128205vw;
}

.brave-product-gallery--placeholder .brave-product-gallery__slide > img {
  border-radius: 0;
}

.brave-product-gallery__shade {
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(179.622608deg, rgba(20, 7, 2, 0) 49.396%, #140702 99.673%);
}

.brave-product-gallery__nav,
.brave-product-gallery__pagination {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
}

.brave-product-gallery__nav {
  justify-content: space-between;
  direction: ltr;
}

.brave-product-gallery__arrow,
.brave-product-gallery__dot {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.brave-product-gallery__arrow {
  background: transparent;
}

.brave-product-gallery__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

.brave-product-gallery__arrow--previous img {
  transform: rotate(90deg);
}

.brave-product-gallery__arrow--next img {
  transform: rotate(-90deg);
}

.brave-product-gallery__pagination {
  justify-content: center;
  gap: 1.041667vw;
  direction: rtl;
}

.brave-product-gallery__dot {
  flex: none;
  border-radius: 26.041667vw;
  background: #d9d9d9;
}

.brave-product-gallery__dot.is-active {
  background: #fb4b19;
}

.brave-product-gallery__arrow:focus-visible,
.brave-product-gallery__dot:focus-visible {
  outline: 0.104167vw solid #fb4b19;
  outline-offset: 0.15625vw;
}

@media (prefers-reduced-motion: reduce) {
  .brave-product-gallery__slide {
    transition: none;
  }
}

.brave-product [data-node-id="19247:4586"] {
  width: 100%;
}

.brave-product [data-node-id="19247:4625"] {
  z-index: 4;
}

.brave-product [data-node-id="19247:4584"] .brave-spec-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 6.71875vw minmax(0, 1fr);
  align-items: center;
  column-gap: 0.520833vw;
  min-height: 1.599702vw;
  width: 100%;
  color: #fff;
  font-family: 'Polin', sans-serif;
  font-size: 0.9375vw;
  line-height: 1.3;
  letter-spacing: 0.01875vw;
}

.brave-product [data-node-id="19247:4584"] .brave-spec-row--divided {
  padding-bottom: 0.520833vw;
}

.brave-product [data-node-id="19247:4584"] .brave-spec-row--divided::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 0.052083vw dashed rgba(243, 243, 243, 0.1);
}

.brave-product [data-node-id="19247:4584"] .brave-spec-label,
.brave-product [data-node-id="19247:4584"] .brave-spec-value {
  min-width: 0;
  margin: 0;
}

.brave-product [data-node-id="19247:4584"] .brave-spec-label {
  font-weight: 700;
  white-space: nowrap;
}

.brave-product [data-node-id="19247:4584"] .brave-spec-value {
  font-weight: 400;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 767px) {
  .brave-product {
    --brave-product-mobile-panel-inset: 5.128205vw;
    --brave-product-mobile-panel-width: 89.743590vw;
  }

  .brave-product .brave-product-gallery--mobile,
  .brave-product [data-node-id="19247:5978"] {
    box-sizing: border-box;
    width: var(--brave-product-mobile-panel-width);
  }

  .brave-product .brave-product-gallery--mobile {
    left: var(--brave-product-mobile-panel-inset);
    transform: none;
  }

  /* The Figma export fixes the mobile hero and CTA to the seven-row example.
     Runtime products can have fewer rows, so keep the measured starting edge
     while letting the specs, actions, and hero bottom follow content height. */
  .brave-product [data-node-id="19247:5960"] {
    height: auto;
    min-height: 0;
    padding-bottom: 12.820513vw;
  }

  .brave-product [data-node-id="19247:5978"] {
    position: relative;
    top: auto;
    left: auto;
    margin-top: 172.307692vw;
    margin-left: var(--brave-product-mobile-panel-inset);
    transform: none;
  }

  .brave-product [data-node-id="19247:6022"] {
    position: relative;
    top: auto;
    left: auto;
    z-index: 4;
    margin-top: 12.820513vw;
    margin-left: var(--brave-product-mobile-panel-inset);
    width: var(--brave-product-mobile-panel-width);
  }

  .brave-product [data-node-id="19247:6040"] {
    z-index: 4;
  }

  .brave-product [data-node-id="19247:5978"] {
    background-color: #381b11;
  }

  .brave-product [data-node-id="19247:5980"] {
    width: 100%;
  }

  .brave-product [data-node-id="19247:5978"] .brave-spec-row {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 33.076923vw minmax(0, 1fr);
    align-items: center;
    column-gap: 2.564103vw;
    min-height: 7.875vw;
    width: 100%;
    color: #fff;
    font-family: 'Polin', sans-serif;
    font-size: 4.615385vw;
    line-height: 1.3;
    letter-spacing: 0.092308vw;
  }

  .brave-product [data-node-id="19247:5978"] .brave-spec-row--divided {
    padding-bottom: 2.564103vw;
    border-bottom: 0.25641vw dashed rgba(243, 243, 243, 0.1);
  }

  .brave-product [data-node-id="19247:5978"] .brave-spec-label,
  .brave-product [data-node-id="19247:5978"] .brave-spec-value {
    min-width: 0;
    margin: 0;
  }

  .brave-product [data-node-id="19247:5978"] .brave-spec-label {
    font-weight: 700;
    white-space: nowrap;
  }

  .brave-product [data-node-id="19247:5978"] .brave-spec-value {
    font-weight: 400;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .brave-product [data-node-id="19365:328"] {
    z-index: 8;
  }

  .brave-product [data-node-id="19365:328"].is-custom-select-open {
    z-index: 12;
  }

  .brave-product-form-select__native {
    pointer-events: none;
    opacity: 0;
  }

  .brave-product-form-select__trigger {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0 2.564103vw 0 12.820513vw;
    border: 0;
    color: #fff;
    font: inherit;
    text-align: right;
    direction: rtl;
    cursor: pointer;
    background: transparent;
  }

  .brave-product-form-select__value {
    width: 100%;
    font-family: 'Polin', sans-serif;
    font-size: 4.615385vw;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.138462vw;
  }

  .brave-product-form-select__menu {
    position: absolute;
    top: calc(100% + 1.538462vw);
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    display: grid;
    gap: 1.025641vw;
    width: 100%;
    margin: 0;
    padding: 1.538462vw;
    border: 0.256410vw solid rgba(255, 255, 255, 0.78);
    border-radius: 4.102564vw;
    background: #381b11;
    box-shadow: 0 4.102564vw 10.256410vw rgba(20, 7, 2, 0.48);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.025641vw);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  }

  .is-custom-select-open > .brave-product-form-select__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .brave-product-form-select__option {
    box-sizing: border-box;
    width: 100%;
    min-height: 10.256410vw;
    margin: 0;
    padding: 2.051282vw 3.076923vw;
    border: 0;
    border-radius: 2.564103vw;
    color: #fff;
    font-family: 'Polin', sans-serif;
    font-size: 4.102564vw;
    font-weight: 400;
    line-height: 1.3;
    text-align: right;
    direction: rtl;
    cursor: pointer;
    background: transparent;
    transition: color 120ms ease;
  }

  .brave-product-form-select__option:hover,
  .brave-product-form-select__option:focus-visible,
  .brave-product-form-select__option.is-selected {
    color: #fff;
    outline: 0;
    background: #fb4b19;
  }

  .brave-product-form-select__trigger:focus-visible {
    border-radius: 2.564103vw;
    outline: 0.512821vw solid #fb4b19;
    outline-offset: -0.512821vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brave-product-form-select__menu,
  .brave-product-form-select__option {
    transition: none;
  }
}