/** Shopify CDN: Minification failed

Line 414:54 Unexpected "*"
Line 471:54 Unexpected "*"

**/
/* redo-override.css
   Small overrides to make featured-product image fit a natural 1:1 square
   approximately 50vh tall, without stretching. Targets the redo-hero classes
   added to `sections/featured-product.liquid`.
*/

.redo-hero .redo-image__container {
  display: flex;
  align-items: center;
  justify-content: center;
  /* make the block roughly 50vh but never exceed container width */
  width: min(48vh, 100%);
  aspect-ratio: 1 / 1;
  height: 48vh;
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background-color: transparent;
}

/* Ensure gallery/media fills the square and crops to fill (cover) */
.redo-hero .redo-image__container .global-media-settings,
.redo-hero .redo-image__container .product-media-container,
.redo-hero .redo-image__container .product__media-item,
.redo-hero .redo-image__container img,
.redo-hero .redo-image__container video,
.redo-hero .redo-image__container model-viewer {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop to fill the square */
  object-position: center;
}

/* On small screens, use full width square (keeps 1:1 but fits container) */
@media screen and (max-width: 749px) {
  .redo-hero .redo-image__container {
    width: 100%;
    height: auto; /* let aspect-ratio set height based on width */
    aspect-ratio: 1 / 1;
  }

  /* small spacing tweak for info column when stacked */
  .redo-hero .redo-info {
    padding-top: 1rem;
  }
}

/* Layout helpers for hero sections (main-product .hero-wrapper and the redo-hero grid)
   Ensures the image sits left as a square around 50vh and the info fills the remaining space.
*/
.hero-wrapper,
.redo-hero {
  display: flex !important;
  /* align to top so the image is not vertically centered with large gaps */
  align-items: flex-start !important;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Image column: keep natural square sizing, don't flex-grow */
.hero-wrapper .image-hero-split,
.redo-hero .redo-image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* Make the square roughly 50vh but cap at a percentage of viewport width for wide layouts */
.hero-wrapper .redo-image__container,
.redo-hero .redo-image__container {
  /* make the square larger: use viewport height but allow wider on wide screens */
  /* slightly reduce max sizing so the image doesn't push content too far from center */
  width: min(55vh, 48vw) !important;
  height: min(55vh, 48vw) !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 720px !important;
  overflow: hidden;
  border-radius: 12px;
}

/* Info column: take remaining space and allow wrapping on narrow screens */
.hero-wrapper .hero-content,
.redo-hero .redo-info,
.hero-wrapper .redo-info {
  /* reduce the info column width a bit so image can be larger */
  flex: 1 1 calc(40% - 2rem);
  min-width: 280px;
}

/* Ensure info column content sits at the top and remove extra spacing */
.redo-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  padding-top: 0 !important;
}

.redo-info .product__info-container,
.product__info-wrapper,
.product__info-container > * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Reduce large top spacing from headings inside the info column */
.redo-info .product__title,
.redo-info .product__text,
.redo-info .price--large {
  margin-top: 0 !important;
}

/* Reduce vertical spacing inside the info column for compact layout */
.redo-info .product__title {
  margin-bottom: 0.25rem !important;
  line-height: 1.05 !important;
}

.redo-info .price--large,
.redo-info .product__text,
.redo-info .product__tax,
.redo-info .volume-pricing-note {
  margin-bottom: 0.25rem !important;
}

.product__info-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Tighter spacing for form and quantity controls */
.redo-info .product-form__input,
.redo-info .quantity__label,
.redo-info .quantity__rules,
.redo-info .product-form__quantity {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

/* Make sure Add to cart (buttons) are visible near the top of the info column */
.redo-info .product-form__submit,
.redo-info .button--primary,
.redo-info .button-primary {
  margin-top: 0.5rem !important;
}

/* Ensure media inside the container doesn't stretch */
.hero-wrapper .redo-image__container img,
.redo-hero .redo-image__container img,
.hero-wrapper .redo-image__container video,
.redo-hero .redo-image__container video,
.hero-wrapper .redo-image__container model-viewer,
.redo-hero .redo-image__container model-viewer {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Make the product-media-gallery fill the square container by overriding
   the padding-top ratio technique and ensuring slider elements stretch. */
.redo-image__container .slider-component,
.redo-image__container .slider-mobile-gutter,
.redo-image__container .product__media-list,
.redo-image__container .slider__slide,
.redo-image__container .product__media-item {
  height: 100% !important;
  /* Allow horizontal pointer handling inside the media list while preserving
     native vertical page scrolling. Improves swipe reliability on mobile. */
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.redo-image__container .product-media-container {
  /* allow the theme's aspect-ratio / padding-top technique to size media
     and avoid forcing absolute fills which break lazy/deferred loading */
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  /* preserve the theme's aspect-ratio variable */
  --aspect-ratio: var(--preview-ratio, 1) !important;
}

.redo-image__container .product-media-container .media {
  /* use the theme's padding-top to maintain ratio and keep position relative */
  padding-top: var(--ratio-percent) !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
}

.redo-image__container .product__modal-opener,
.redo-image__container .product__media {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
}

/* Ensure the media is rendered above any overlays and is visible */
.redo-image__container .product__media,
.redo-image__container .product__media img,
.redo-image__container .product__media .media,
.redo-image__container .media {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: auto !important;
}

.redo-image__container .slider__slide,
.redo-image__container .product__media-item,
.redo-image__container .slider-component,
.redo-image__container .product__media-list {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: auto !important;
  height: auto !important;
}

/* DEBUG HELPERS - remove when done
   These make the image container visible and ensure media sits on top.
*/

/* remove debug outlines; container should be visually clean now */
.redo-image__container::after {
  content: '';
  pointer-events: none;
}

.redo-image__container .product__media img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  /* position the image to fill the aspect-ratio box and center vertically */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* explicit featured image class to handle our direct image output */
.redo-image__container .redo-hero__img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* SECTION OVERRIDES FOR REDO HERO/INFO (applies to sections using redo-hero / redo-info) */
/* These rules are intentionally scoped to the redo helper classes used in `sections/featured-product.liquid` */
.redo-hero,
.redo-info {
  /* small default bottom spacing to keep next section close */
  padding-bottom: 1.8rem !important;
}

@media screen and (min-width: 540px) {
  .redo-hero,
  .redo-info { padding-bottom: 1.6rem !important; }
}

@media screen and (min-width: 980px) {
  .redo-hero,
  .redo-info { padding-bottom: 1.2rem !important; }
  .redo-hero .featured-product,
  .redo-hero .product,
  .redo-info .featured-product,
  .redo-info .product { margin-bottom: 0 !important; padding-bottom: 0 !important; }
}

/* Tweak vertical rhythm inside the info column */
@media screen and (min-width: 980px) {
  .redo-info .product__info-container h1,
  .redo-info .product__info-container h2 { margin-bottom: 6px !important; }
  .redo-info .product__info-container .price--large { margin-bottom: 10px !important; }
}
@media screen and (max-width: 539px) {
  .redo-info .product__info-container h1,
  .redo-info .product__info-container h2 { margin-bottom: 10px !important; }
  .redo-info .product__info-container .price--large { margin-bottom: 12px !important; }
}

/* Force sensible icon and quantity sizes in the featured product info container */
.redo-info .product__info-container .svg-wrapper svg,
.redo-info .product__info-container .icon,
.redo-info .product__info-container .icon-plus,
.redo-info .product__info-container .icon.icon-plus {
  width: 1.6rem !important;
  height: 1.6rem !important;
  max-width: 2.2rem !important;
  max-height: 2.2rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.redo-info .product__info-container .quantity__button,
.redo-info .product__info-container .quick-add__submit .icon-plus {
  width: auto !important;
  height: 3.2rem !important;
  min-width: 3.2rem !important;
  padding: 0 !important;
  border-radius: 0.4rem !important;
}

.redo-info .product__info-container .quantity__button .svg-wrapper svg {
  width: 1.4rem !important;
  height: 1.4rem !important;
}

.redo-info .product__info-container h1,
.redo-info .product__info-container h2,
.redo-info .product__info-container p,
.redo-info .product__info-container .price--large,
.redo-info .product__info-container .product-form__input {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.redo-info .product__info-container .caption,
.redo-info .product__info-container .subtitle {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

.redo-info .product__info-container .quantity__input,
.redo-info .product__info-container .quantity__button {
  max-height: 52px;
  box-sizing: border-box;
}

/* Remove gap below the featured product section so the next section (cart/testimonial) sits up tight */
.section-featured-product + .section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Also ensure the featured product section itself doesn't add extra bottom spacing */
.section-featured-product {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Stronger pull-up: apply negative bottom margin to cancel the theme's section spacing
   and a general sibling rule to ensure following sections sit up tight. */
.section-featured-product {
  /* cancel mobile section spacing */
  margin-bottom: calc(var(--spacing-sections-mobile, 2rem) * -1) !important;
}

@media screen and (min-width: 750px) {
  .section-featured-product {
    /* cancel desktop section spacing */
    margin-bottom: calc(var(--spacing-sections-desktop, 4rem) * -1) !important;
  }
}

.section-featured-product ~ .section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure the featured product section doesn't stretch to a huge fixed height.
   The diagnostic shows the section and inner wrappers have large computed heights.
   Force auto heights and prevent flex/grid children from stretching. */
.section-featured-product,
.section-featured-product .page-width,
.section-featured-product .featured-product,
.section-featured-product .product__info-wrapper,
.section-featured-product .redo-image__container {
  height: auto !important;
  min-height: 0 !important;
}

.section-featured-product .featured-product,
.section-featured-product .page-width {
  align-items: flex-start !important;
}

/* Remove height cap so the image container can stretch to match the info column on desktop */
.section-featured-product .redo-image__container {
  /* remove viewport caps applied elsewhere */
  max-height: none !important;
  /* allow the container to fill the wrapper column height we force elsewhere */
  height: 100% !important;
  overflow: visible !important;
}

.section-featured-product .redo-image__container img,
.section-featured-product .redo-image__container .redo-hero__img,
.section-featured-product .redo-image__container video {
  /* remove cap on the actual media elements so they can fill the container */
  max-height: none !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Pill-shaped CTA styles for Add to cart and PayPal in featured product */
.section-featured-product .product-form__submit,
.section-featured-product .shopify-payment-button__button,
.section-featured-product .ai-product-hero-btn-paypal-*,
.section-featured-product .ai-product-hero-btn-*,
.section-featured-product .paypal-button,
.section-featured-product .button--paypal {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important; /* full-width to match PayPal */
  height: 64px !important; /* consistent height */
  padding: 0 2rem !important; /* consistent horizontal padding */
  border-radius: 40px !important; /* pill shape */
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: none !important;
  border: 2px solid #ffffff !important; /* white outline for all CTAs */
}

/* Ensure Add to cart and its immediate wrapper match PayPal width when PayPal exists
   Target both the button and possible wrapper elements used by themes/quick-adds */
.section-featured-product .product-form__submit,
.section-featured-product .product-form__submit > span,
.section-featured-product .product-form__submit .button,
.section-featured-product .product-form__controls,
.section-featured-product .product-form__controls .product-form__submit {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* If Add to cart is inside a flex column next to PayPal, ensure it doesn't shrink */
.section-featured-product .product-form__controls,
.section-featured-product .product-form__submit {
  flex: 0 0 100% !important;
}

/* If the Add to cart is rendered as an input[type=submit] or button.btn, normalize it */
.section-featured-product input[type="submit"],
.section-featured-product button[type="submit"],
.section-featured-product .button--primary,
.section-featured-product .button--submit {
  width: 100% !important;
  height: 64px !important;
  padding: 0 2rem !important;
  border-radius: 40px !important;
  box-sizing: border-box !important;
}

/* Primary add-to-cart: outlined white pill (transparent fill) */
.section-featured-product .product-form__submit {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important; /* ensure button has explicit white outline */
}

/* PayPal button: brand yellow pill */
.section-featured-product .shopify-payment-button__button,
.section-featured-product .ai-product-hero-btn-paypal-*,
.section-featured-product .button--paypal {
  background: #f9c53a !important; /* warm PayPal-ish yellow */
  color: #072d66 !important; /* PayPal blue-ish text */
  border: none !important;
}

/* Make sure any PayPal iframe wrapper is full-width and respects rounded corners */
.section-featured-product [data-paypal-button] > iframe,
.section-featured-product [data-paypal-button] {
  width: 100% !important;
  height: 64px !important;
  border-radius: 40px !important;
  overflow: hidden !important;
}

/* Shrink any oversized wrappers and ensure only the real button keeps the pill border
   Some theme markup wraps the submit in additional containers which may have been
   sized incorrectly (producing the large square). Reset wrapper sizing and apply
   the pill outline only to actual interactive controls. */
.section-featured-product .product-form__controls,
.section-featured-product .product-form__actions,
.section-featured-product .product-form__buttons,
.section-featured-product .product-form__controls-inner,
.section-featured-product .product-form__submit-wrapper {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
}

/* Make sure any non-button children don't render as large blocks */
.section-featured-product .product-form__controls > *,
.section-featured-product .product-form__actions > *,
.section-featured-product .product-form__buttons > * {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Constrain the Add to cart control itself to the PayPal size */
.section-featured-product .product-form__submit,
.section-featured-product button.product-form__submit,
.section-featured-product input[type="submit"],
.section-featured-product .button--primary,
.section-featured-product .button--submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 0 2rem !important;
  border-radius: 40px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Ensure only the button shows the white outline; remove borders from other elements */
.section-featured-product .product-form__submit { border: 2px solid #ffffff !important; }
.section-featured-product .product-form__submit * { border: none !important; }


/* Remove vertical gap between Add to cart and PayPal buttons
   Many theme variants place these in adjacent wrappers; reset margins/gaps so
   they sit flush with each other (no extra space). */
.section-featured-product .product-form__controls,
.section-featured-product .product-form__actions,
.section-featured-product .product-form__buttons,
.section-featured-product .product-form__controls-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  row-gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.section-featured-product .product-form__controls > *,
.section-featured-product .product-form__actions > *,
.section-featured-product .product-form__buttons > * {
  margin: 0 !important;
  padding: 0 !important;
}

.section-featured-product .product-form__submit,
.section-featured-product input[type="submit"],
.section-featured-product button[type="submit"],
.section-featured-product .button--primary,
.section-featured-product .shopify-payment-button__button,
.section-featured-product .button--paypal,
.section-featured-product .paypal-button,
.section-featured-product [data-paypal-button] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Small visual gap between the Add to cart and PayPal CTAs
   Most themes render these stacked with gap:0 above; add a tiny
   spacing so the buttons don't visually touch. Adjust value if
   you want larger/smaller separation. */
.section-featured-product .product-form__submit,
.section-featured-product input[type="submit"],
.section-featured-product button[type="submit"],
.section-featured-product .button--primary {
  margin-bottom: 0.6rem !important; /* spacing below Add to cart */
}

.section-featured-product .shopify-payment-button__button,
.section-featured-product .button--paypal,
.section-featured-product .paypal-button,
.section-featured-product [data-paypal-button] {
  margin-top: 0.6rem !important; /* spacing above PayPal button */
}

/* If PayPal is rendered inside its own wrapper, remove spacing there too */
.section-featured-product .shopify-payment-button,
.section-featured-product .shopify-payment-button__container {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove flex-based vertical stretching inside the featured section */
.section-featured-product,
.section-featured-product .featured-product,
.section-featured-product .page-width,
.section-featured-product .product__info-wrapper {
  display: block !important;
  align-items: initial !important;
}

.section-featured-product .featured-product > .grid__item,
.section-featured-product .page-width > .featured-product,
.section-featured-product .product__info-wrapper {
  flex: 0 0 auto !important;
}

/* Remove large top/bottom padding for featured product so image appears on-screen */
.redo-reset-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Reduce default margins around the hero so the image sits near top-left */
.redo-hero,
.hero-wrapper {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Slight negative offset to pull the image area up into view (tweak if needed) */
.redo-image__container {
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent slider and media containers from forcing a large min-height */
.redo-image__container .slider-component,
.redo-image__container .slider-mobile-gutter,
.redo-image__container .product__media-list,
.redo-image__container .slider__slide,
.redo-image__container .product__media-item,
.redo-image__container .product-media-container {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
}

/* Neutralize the theme's viewport-based 'constrain-height' behavior inside our container */
.redo-image__container .product-media-container.constrain-height {
  --viewport-offset: 0px !important;
  --constrained-min-height: 0px !important;
  --constrained-height: 0px !important;
  max-height: none !important;
  height: auto !important;
}

/* Ensure product media modal doesn't contribute to section height when hidden.
   The theme uses visibility:hidden; that still leaves it in layout for some browsers
   when nested — force display:none when not open and display:block when [open]. */
/* product-media-modal display overrides removed (reverted) */

/* Ensure the section and grid do not add extra vertical spacing */
.featured-product,
.featured-product .product,
.featured-product .grid,
.product__media-wrapper,
.product__info-wrapper {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* On small screens stack the columns and make the square full-width */
@media screen and (max-width: 992px) {
  .hero-wrapper,
  .redo-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-wrapper .redo-image__container,
  .redo-hero .redo-image__container {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .hero-wrapper .hero-content,
  .redo-hero .redo-info {
    padding-top: 1rem;
  }
}

/* Very small screens: force strict stacked layout under 500px
   Place media (image) above the info column and disable large transforms
   so the image sits full-width above product text. Uses section-scoped
   selectors to avoid affecting other components. */
@media screen and (max-width: 500px) {
  .section-featured-product .featured-product {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 1rem !important;
    align-items: start !important;
  }

  /* Ensure the image wrapper (redo-image / product__media-wrapper) sits first */
  .section-featured-product .product__media-wrapper,
  .section-featured-product .redo-image {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    order: -1 !important; /* ensure image appears above info in source-order flows */
    align-self: start !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  /* Info column should follow the image */
  .section-featured-product .product__info-wrapper,
  .section-featured-product .redo-info {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    order: 0 !important;
    margin-top: 0.6rem !important;
    width: 100% !important;
  }

  /* Turn off large image transforms and ensure media fits the container */
  .section-featured-product .redo-image__container img,
  .section-featured-product .redo-image__container .redo-hero__img,
  .section-featured-product .redo-image__container video {
    transform: none !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Also force any grid system item widths to be full width so legacy
     `.grid__item` width rules don't keep two columns. */
  .section-featured-product .featured-product > .grid__item,
  .section-featured-product .featured-product .grid__item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
  }
}

/* Desktop: show product info on the left and image on the right */
@media screen and (min-width: 993px) {
  .section-featured-product .featured-product {
    display: flex !important;
    flex-direction: row !important;
    /* stretch columns to equal height so media wrapper can fill the section */
    align-items: stretch !important;
    gap: 2.5rem !important;
  }
  /* Place image on the left, info on the right */
  .section-featured-product .product__media-wrapper,
  .section-featured-product .redo-image__container {
    order: 1 !important;
    flex: 1 1 62% !important; /* left column: image */
  }

  /* Center the image container inside the left column so it doesn't hug the left edge */
  .section-featured-product .product__media-wrapper,
  .section-featured-product .redo-image,
  .hero-wrapper .redo-image {
    display: flex !important;
    align-items: center !important; /* center image vertically inside the wrapper */
    justify-content: center !important; /* center horizontally */
    /* ensure the wrapper itself stretches to the parent's full height */
    align-self: stretch !important;
    height: 100% !important;
  }

  /* Make the media container fill the wrapper height when possible while keeping aspect-ratio constraints */
  .section-featured-product .redo-image__container {
    height: 100% !important;
    max-height: none !important;
    display: block !important;
  }

  .section-featured-product .product__info-wrapper {
    order: 2 !important;
    flex: 0 0 36% !important; /* right column: text */
    max-width: 44rem !important;
  }
  
  /* swapped ordering reverted */
}

/* cart-like layout reverted */

/* PayPal rounding removed - fallback to theme/default button styles */

/* ---------------------------------------------------------------------------
   Force square corners for Add to cart (featured product)

   Keep PayPal and other CTA pill shapes intact; explicitly target the
   Add to cart/button submit selectors used in the featured-product scope
   and remove the radius. Use !important to override earlier pill rules.
--------------------------------------------------------------------------- */
.section-featured-product .product-form__submit,
.section-featured-product button.product-form__submit,
.section-featured-product input[type="submit"],
.section-featured-product .button--primary,
.section-featured-product .button--submit {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

/* Make review / Judge.me preview elements clearly clickable */
.rating-wrapper,
.rating-wrapper .rating-star,
.rating-count,
.jdgm-preview-badge,
.jdgm-widget.jdgm-preview-badge {
  cursor: pointer;
}

/* Visible focus styles for keyboard users */
.rating-wrapper:focus,
.rating-count:focus,
.jdgm-preview-badge:focus,
.jdgm-widget.jdgm-preview-badge:focus {
  outline: 3px solid #2563eb; /* accessible blue focus ring */
  outline-offset: 2px;
}

/* Slight hover affordance to make purpose clearer */
.rating-wrapper:hover .rating-star,
.rating-count:hover,
.jdgm-preview-badge:hover {
  opacity: 0.95;
}