/* Featured product (template-parts/home/featured-product.php), converted from the guardrail
   featured-product section's boxed layout and media card (its inline <style>) on top of the
   theme.css .ig-feature, .ig-option and .ig-qty rules. The form inside is
   the store's WooCommerce form, so WCPA fields, the Ecomus quantity and the add-to-cart button
   are restyled here; selectors carry the extra weight needed over the site's Additional CSS. */

.hg-fp {
  --hg-fp-bg: var(--hg-card-media-bg);
  padding-block: var(--hg-fp-pad-top, 36px) var(--hg-fp-pad-bottom, 36px);
  background: var(--hg-fp-bg);
  color: var(--hg-text);
}

/* Boxed layout: stacked below 768px, two equal columns above; column padding steps up. */
.hg-fp__box { box-sizing: border-box; }
.hg-fp__grid {
  display: grid;
  gap: 0;
}
.hg-fp__info {
  min-width: 0;
  padding: 20px 0;
  overflow-wrap: anywhere;
}

/* Media: a white card with an inner radius around a cropped image. */
.hg-fp__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 1;
  background: #f3f3f3;
}
.hg-fp__img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.hg-fp__fallback { min-height: 320px; }
.hg-fp__box--card .hg-fp__media {
  aspect-ratio: auto;
  border: 6px solid #fff;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 2px rgb(0 0 0 / 0.15);
}
.hg-fp__box--card .hg-fp__img,
.hg-fp__box--card .hg-fp__fallback {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--hg-fp-ratio, auto);
  object-fit: cover;
  border-radius: 10px;
}
.hg-fp__box--portrait { --hg-fp-ratio: 4 / 5; }
.hg-fp__box--square { --hg-fp-ratio: 1; }

/* Title and price */
.hg-fp__title {
  margin: 0 0 15px;
  font-size: 22px;
  line-height: 1.1;
}
.hg-fp__title a {
  color: inherit;
  text-decoration: none;
}
/* Ecomus's a:focus { outline: 0 } outranks the base ring, so the block's links set their own.
   The clamped title would clip an outline, so its link takes an underline. */
.hg-fp .hg-fp__title a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}
/* Long product names: three lines at most, so the buy box stays compact; the link keeps the
   whole name for screen readers and the product page. */
.hg-fp__title--long {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.hg-fp__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 30px;
  color: inherit;
  font-family: var(--hg-font-heading);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
}
/* As on the product page: sale price first, then the struck-through price (WooCommerce keeps
   the spoken order in its screen-reader text). The ins loses the highlight browsers and
   Ecomus give it outside .price. */
.hg-fp__price ins {
  order: -1;
  background: none;
  color: inherit;
  text-decoration: none;
}
.hg-fp__price del {
  color: var(--hg-muted);
  font-size: 16px;
  font-weight: 500;
}

/* Form */
.hg-fp .hg-fp__form :is(form.cart, .hg-fp__personalize) {
  margin: 0;
  padding: 0;
}
.hg-fp .hg-fp__form .wcpa_form_outer { margin: 0; }

/* Field labels: the product page's option names (product.css). */
.hg-fp .hg-fp__label,
.hg-fp .wcpa_wrap .wcpa_field_label {
  display: block;
  margin: 0 0 5px;
  padding: 0 0 4px;
  color: inherit;
  font-family: var(--hg-font-heading);
  font-size: 14px !important;
  font-weight: 800;
  line-height: 22.4px;
  letter-spacing: normal;
  text-transform: uppercase;
}
.hg-fp .wcpa_wrap .wcpa_required_ast { display: none; }
.hg-fp .wcpa_wrap .wcpa_selected_items span {
  color: inherit !important;
  font-family: var(--hg-font-body);
  font-size: 14px !important;
  font-weight: 400;
  text-transform: none;
}
/* The chosen value stays in the label for screen readers only (Shopify show_selected off). */
.hg-fp .hg-fp__box--hide-selected .wcpa_wrap .wcpa_selected_items {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* WCPA radio groups as option chips, outlined as on the product page (phones) */
.hg-fp .wcpa_wrap .wcpa_field_wrap { margin: 0 0 16px; }
.hg-fp .wcpa_wrap .wcpa_field_wrap:only-child {
  flex: 1 1 100%;
  max-width: 100%;
}
.hg-fp .wcpa_type_radio-group .wcpa_group_field {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-bottom: 9px;
}
.hg-fp .wcpa_type_radio-group .wcpa_radio { margin: 0; }
.hg-fp .wcpa_type_radio-group .wcpa_radio label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 50px;
  min-height: 36px;
  margin: 0;
  padding: 10px 15px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  color: inherit;
  font-family: var(--hg-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 15.4px;
  text-align: center;
  text-transform: none;
  cursor: pointer;
}
.hg-fp .wcpa_type_radio-group .wcpa_radio label input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.hg-fp .wcpa_type_radio-group .wcpa_radio_custom,
.hg-fp .wcpa_type_radio-group .wcpa_check { display: none; }
.hg-fp .wcpa_type_radio-group .wcpa_radio label span {
  margin: 0;
  padding: 0;
}
.hg-fp .wcpa_type_radio-group .wcpa_radio label:has(input:checked) {
  background: #000;
  box-shadow: inset 0 0 0 1px #000;
  color: #fff;
}
.hg-fp .wcpa_type_radio-group .wcpa_radio label:has(input:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.hg-fp .wcpa_type_radio-group .wcpa_radio label:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}
.hg-fp .wcpa_wrap {
  --wcpabuttoncolor: var(--hg-text);
  --wcpabuttontextcolor: #fff;
  --wcpabordercolor: var(--hg-line-strong);
  --wcpabordercolorfocus: var(--hg-text);
  --wcpaborderradius: 6px;
}

/* Quantity (ig-qty pill) */
.hg-fp__qty-block { margin: 0 0 16px; }
.hg-fp .hg-fp__form .quantity {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 120px;
  height: 40px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hg-line-strong);
  border-radius: 30px;
  background: transparent;
  color: inherit;
}
.hg-fp .hg-fp__form .quantity.hidden,
.hg-fp .hg-fp__box--no-qty .quantity,
.hg-fp .hg-fp__box--no-qty .hg-fp__qty-block,
.hg-fp .hg-fp__qty-block:has(.quantity.hidden) { display: none; }
.hg-fp .hg-fp__form .hg-fp__qty-btn {
  flex: 0 0 40px;
  width: 40px;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 2px 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--hg-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
.hg-fp .hg-fp__form .hg-fp__qty-btn:hover {
  background: transparent;
  color: inherit;
}
.hg-fp .hg-fp__form .hg-fp__qty-btn::after { content: none; }
.hg-fp .hg-fp__form .hg-fp__qty-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}
.hg-fp .hg-fp__form .quantity input.qty {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 16px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.hg-fp .hg-fp__form .quantity input.qty::-webkit-outer-spin-button,
.hg-fp .hg-fp__form .quantity input.qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.hg-fp .hg-fp__form .quantity input.qty:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* Add to cart (ig-product__actions, button styled like .hg-btn with the white border) */
.hg-fp__actions {
  display: grid;
  gap: 10px;
  margin: 20px 0 10px;
}
.hg-fp__actions:not(.hg-fp__actions--full) { justify-items: start; }
.hg-fp .hg-fp__actions button:is(.single_add_to_cart_button, .hg-fp__choose).button.alt {
  --em-button-bg-color: var(--hg-accent);
  --em-button-border-color: #fff;
  --em-button-color: #fff;
  --em-button-bg-color-hover: color-mix(in srgb, var(--hg-accent) 85%, #000);
  --em-button-border-color-hover: #fff;
  --em-button-color-hover: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 42px;
  margin: 0;
  padding: 8px 15px;
  border: 1px solid #fff;
  border-radius: 4px;
  background: var(--hg-accent);
  color: #fff;
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}
.hg-fp .hg-fp__actions--full button:is(.single_add_to_cart_button, .hg-fp__choose).button.alt { width: 100%; }
.hg-fp .hg-fp__actions button:is(.single_add_to_cart_button, .hg-fp__choose).button.alt:hover {
  border-color: #fff;
  background: color-mix(in srgb, var(--hg-accent) 85%, #000);
  color: #fff;
}
.hg-fp .hg-fp__actions button:is(.single_add_to_cart_button, .hg-fp__choose).button.alt:focus-visible {
  outline: 2px solid var(--hg-text);
  outline-offset: 2px;
}
.hg-fp .hg-fp__actions button:is(.single_add_to_cart_button, .hg-fp__choose).button.alt .text {
  font-size: inherit;
  font-weight: inherit;
}
.hg-fp .hg-fp__actions button:is(.single_add_to_cart_button, .hg-fp__choose).button.alt span.divide,
.hg-fp .hg-fp__actions button:is(.single_add_to_cart_button, .hg-fp__choose).button.alt span.price { display: none !important; }
.hg-fp .hg-fp__actions button:is(.single_add_to_cart_button, .hg-fp__choose).button.alt.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* The Personalize button's note on the options the quick view asks for. */
.hg-fp__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  opacity: 0.8;
}
.hg-fp__actions:not(.hg-fp__actions--full) .hg-fp__hint { text-align: start; }

/* Photo swap (rail): the next photo fades in over the current one inside the fixed frame, then
   takes its place in the flow. */
.hg-fp__media > .hg-fp__img--incoming {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hg-fp__media > .hg-fp__img--incoming.is-in { opacity: 1; }
/* A photo still downloading (slow connections) dims the one it replaces, which no longer matches
   the title. */
.hg-fp__media > :not(.hg-fp__img--incoming) { transition: opacity 0.2s ease; }
.hg-fp__media.is-loading > :not(.hg-fp__img--incoming) { opacity: 0.45; }

/* Rail: the section heading over the block, the product strip under the hint and the collection
   button closing the column. The strip's padding (cancelled by its margin) keeps the selection and
   focus rings inside the scroller. */
.hg-fp__heading { margin: 0 0 20px; }
.hg-fp__rail {
  --hg-fp-cols: 3.4;
  --hg-fp-gap: 10px;
  position: relative;
  margin: 24px 0 0;
  container-type: inline-size;
}
.hg-fp .hg-fp__track {
  display: flex;
  gap: var(--hg-fp-gap);
  margin: -6px;
  padding: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 6px;
  scrollbar-width: none;
}
.hg-fp__track::-webkit-scrollbar { display: none; }
.hg-fp__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.hg-fp__track.is-dragging * { pointer-events: none; }
.hg-fp .hg-fp__item {
  flex: 0 0 calc((100% - (var(--hg-fp-cols) - 1) * var(--hg-fp-gap)) / var(--hg-fp-cols));
  min-width: 0;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}
/* The thumbnail is a link without JavaScript and an aria-pressed button with it; both look alike. */
.hg-fp .hg-fp__thumb {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 2px rgb(0 0 0 / 0.15);
  color: var(--hg-text);
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}
.hg-fp .hg-fp__thumb::after { content: none; }
.hg-fp .hg-fp__thumb:hover { box-shadow: 0 0 0 2px var(--hg-line-strong); }
.hg-fp .hg-fp__item.is-current .hg-fp__thumb { box-shadow: 0 0 0 2px var(--hg-text); }
.hg-fp .hg-fp__thumb:focus-visible {
  outline: 2px solid var(--hg-accent);
  outline-offset: 3px;
}
.hg-fp__thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  background: var(--hg-card-media-bg);
}
.hg-fp .hg-fp__name {
  display: -webkit-box;
  margin: 8px 0 2px;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.hg-fp .hg-fp__name:hover { text-decoration: underline; }
.hg-fp :is(.hg-fp__name, .hg-fp__shop):focus-visible {
  outline: 2px solid var(--hg-text);
  outline-offset: 2px;
}
.hg-fp .hg-fp__item.is-current .hg-fp__name { font-weight: 700; }
/* Small enough for both prices on one line in a 90px item. */
.hg-fp__item-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 5px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
.hg-fp__item-price ins {
  order: -1;
  background: none;
  color: inherit;
  text-decoration: none;
}
.hg-fp__item-price del {
  color: rgb(26 24 22 / 0.75);
  font-size: 11px;
  font-weight: 400;
}
.hg-fp .hg-fp__arrow {
  --hg-arrow-size: 30px;
  --hg-arrow-bg: #fff;
  --hg-arrow-border: var(--hg-line);
  position: absolute;
  top: calc((100cqw - (var(--hg-fp-cols) - 1) * var(--hg-fp-gap)) / var(--hg-fp-cols) / 2);
  z-index: 2;
  transform: translateY(-50%);
}
.hg-fp .hg-fp__arrow[hidden] { display: none; }
.hg-fp__arrow--prev { inset-inline-start: -12px; }
.hg-fp__arrow--next { inset-inline-end: -12px; }
.hg-fp .hg-fp__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.hg-fp .hg-fp__shop {
  box-sizing: border-box;
  width: 100%;
  margin: 20px 0 0;
}

@media (max-width: 749px) {
  .hg-fp { padding-block: var(--hg-fp-pad-top-m, 36px) var(--hg-fp-pad-bottom-m, 36px); }
}
@media (max-width: 767px) {
  .hg-fp .hg-fp__box { width: 100%; }
}
@media (min-width: 768px) {
  .hg-fp__box {
    --hg-fp-col-pad-y: 0px;
    --hg-fp-col-pad-s: 30px;
    --hg-fp-col-pad-e: 15px;
  }
  .hg-fp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .hg-fp__info {
    padding-block: var(--hg-fp-col-pad-y);
    padding-inline: var(--hg-fp-col-pad-s) var(--hg-fp-col-pad-e);
  }
  .hg-fp__title { font-size: 37.7px; }
  .hg-fp__title--long { font-size: 28px; }
  .hg-fp__price { font-size: 39px; }
  .hg-fp__qty-block { margin-bottom: 30px; }
  .hg-fp .hg-fp__actions button:is(.single_add_to_cart_button, .hg-fp__choose).button.alt {
    min-height: 50px;
    padding: 10px 20px;
  }
}
@media (min-width: 992px) {
  .hg-fp__box {
    --hg-fp-col-pad-y: 15px;
    --hg-fp-col-pad-s: 25px;
    --hg-fp-col-pad-e: 15px;
  }
  .hg-fp .hg-fp__form .quantity {
    width: 135px;
    height: 45px;
  }
  .hg-fp__box--card .hg-fp__media { border-width: 10px; }
}
@media (min-width: 1200px) {
  .hg-fp__box {
    --hg-fp-col-pad-s: 30px;
    --hg-fp-col-pad-e: 20px;
  }
  .hg-fp__title { font-size: 40.6px; }
  .hg-fp__title--long { font-size: 30px; }
}
@media (min-width: 1441px) {
  .hg-fp__box {
    --hg-fp-col-pad-s: 40px;
    --hg-fp-col-pad-e: 30px;
  }
}
/* Rail columns and the button on the photo's bottom edge: the column stretches to the photo
   (or past it when its content runs taller) and the button takes the space left. */
@media (max-width: 767px) {
  .hg-fp .hg-fp__arrow { display: none; }
}
@media (min-width: 768px) {
  .hg-fp__heading { margin-bottom: 30px; }
  .hg-fp__rail { --hg-fp-cols: 3; }
  .hg-fp__box--rail .hg-fp__grid { align-items: stretch; }
  .hg-fp__box--rail .hg-fp__media { align-self: start; }
  .hg-fp__box--rail .hg-fp__info {
    display: flex;
    flex-direction: column;
    padding-block-end: 0;
  }
  .hg-fp__box--rail .hg-fp__rail { margin-bottom: 20px; }
  .hg-fp .hg-fp__box--rail .hg-fp__shop { margin-top: auto; }
}
@media (min-width: 992px) {
  .hg-fp__rail { --hg-fp-cols: 4; }
}
@media (min-width: 1441px) {
  .hg-fp__rail { --hg-fp-cols: 5; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-fp .hg-fp__actions button:is(.single_add_to_cart_button, .hg-fp__choose).button.alt { transition: none; }
  .hg-fp__media > .hg-fp__img--incoming,
  .hg-fp__media > :not(.hg-fp__img--incoming),
  .hg-fp .hg-fp__thumb { transition: none; }
}