/**
 * Audioengine Single Product Template — Custom Styles
 * Oxygen-to-Elementor Migration
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */
:root {
  --primary: #1a1a2e;
  --primary-ultra-dark: #0d0d1a;
  --primary-medium: #2a2a4e;
  --secondary: #4a4a6a;
  --secondary-medium: #6a6a8a;
  --secondary-light: #9a9aba;
  --base: #f4f4f4;
  --base-light: #e8e8e8;
  --white: #ffffff;
  --shade: #000000;
  --action: #f5c518;
  --action-rgb: 245, 197, 24;

  --h2: clamp(2rem, 3vw, 3rem);
  --h3: clamp(1.5rem, 2.5vw, 2.25rem);
  --h4: clamp(1.25rem, 2vw, 1.75rem);
  --text-s: clamp(0.813rem, 1vw, 0.938rem);
  --text-m: clamp(1rem, 1.25vw, 1.125rem);
  --text-l: clamp(1.125rem, 1.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 2vw, 2rem);
  --text-xxl: clamp(2rem, 3vw, 3.5rem);

  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-xxl: 5rem;
  --section-space-s: 3rem;
  --section-space-l: 6rem;
  --section-space-xl: 8rem;
  --section-padding-x: clamp(1.5rem, 3vw, 3rem);

  --radius-s: 0.5rem;
  --radius-m: 1rem;
  --box-shadow-m: 0 4px 20px rgba(0,0,0,0.1);
  --transition-base: 0.25s ease;
  --transition-time-xxl: 20s;
}

/* ==========================================================================
   2. PRODUCT HERO
   ========================================================================== */
.prod-hero { background: linear-gradient(180deg, var(--base), var(--white)); min-height: 100vh; position: relative; overflow: hidden; }
.prod-hero__row { display: flex; flex-direction: row; gap: var(--space-s); align-items: flex-start; width: 100%; }
.prod-hero__col { width: 50%; display: flex; flex-shrink: 0; flex-grow: 1; align-items: center; padding-bottom: 30px; }
.prod-hero__imgs { max-width: 68rem; display: flex; align-items: center; position: relative; }
.prod-hero__imgs .woocommerce-product-gallery { border-radius: var(--radius-s); }
.prod-hero__info { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 56rem; }
.prod-hero__title h2 { font-size: var(--h2); font-weight: 700; line-height: 1.2; }
.prod-hero__text { font-size: var(--text-m); line-height: 1.6; }
.prod-hero__conn-type { display: flex; flex-direction: row; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.prod-hero__conn-txt { font-size: var(--text-s); font-weight: 800; }
.prod-hero__conn-icons { display: flex; flex-direction: row; gap: var(--space-xs); align-items: center; }
.prod-hero__conn-icon { font-size: 18px; color: var(--secondary); padding-left: 10px; cursor: default; }
/* Product Dimensions */
.prod-hero__dimensions {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  font-size: var(--text-s);
}
.prod-hero__dimensions-label { font-weight: 700; }
.prod-hero__dimensions-value { color: var(--secondary); }

.prod-hero__price .price { font-size: var(--text-xl); font-weight: 700; }
.prod-hero__price del { font-size: var(--text-xl); opacity: 0.6; }
.prod-hero__badge-overlay { position: absolute; top: 40px; right: 90px; z-index: 10; }
.prod-hero__limited-badge { position: absolute; top: 350px; right: 200px; display: none; }
.prod-hero__outline-txt { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); pointer-events: none; }

/* ==========================================================================
   3. SPEC OVERVIEW BAR
   ========================================================================== */
.spec-overview-sec { background-color: var(--primary); }
.spec-overview { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; }
.spec-overview__block { padding: var(--space-m); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-xs); position: relative; overflow: hidden; flex-grow: 1; border-right: 1px solid var(--secondary); cursor: default; transition: background-color var(--transition-base); height: 17.5rem; width: 20%; }
.spec-overview__block:last-child { border-right: none; }
.spec-overview__block::after { content: ''; width: 16px; height: 16px; background-color: var(--action); position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%) rotate(45deg); transition: bottom 0.25s ease-out; }
.spec-overview__block:hover { background-color: var(--secondary); }
.spec-overview__block:hover::after { bottom: -8px; }
.spec-overview__icon { width: 4rem; height: 4rem; }
.spec-overview__icon img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.spec-overview__txt { color: var(--white); font-size: var(--text-s); }

/* ==========================================================================
   4. PRODUCT MODULE INTRO
   ========================================================================== */
.prod-mod-intro-sec { background-color: var(--primary-ultra-dark); }
.prod-mod-intro { display: flex; flex-direction: row; width: 100%; align-items: center; }
.prod-mod-intro__l-col { width: 50%; display: flex; align-items: center; justify-content: center; }
.prod-mod-info__group { padding: var(--space-xl) 0; display: flex; flex-direction: row; gap: var(--space-xxl); }
.prod-mod-intro__title-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.prod-mod-intro__title h3 { color: var(--white); }
.prod-mod-intro__list { list-style: none; padding-left: 0; margin: 0; }
.prod-mod-intro__r-col { width: 50%; }
.prod-mod-intro__img-wrap { width: 100%; position: relative; overflow: hidden; }
.prod-mod-intro__img-wrap::after { content: ''; display: block; padding-bottom: 75%; }
.prod-mod-intro__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* Shop info list (used by Best Use / Ideal For repeater) */
.shop-info__list {
  list-style-type: none;
  padding-left: 0;
  display: block;
  width: 100%;
  margin: 0;
}

/* Arrow list items */
.arrow-list, .prod-mod-intro__list-item, .shop-info__list-item {
  position: relative; padding-left: var(--space-xs); margin-bottom: var(--space-xs); list-style: none; font-size: var(--text-s);
}
.arrow-list::before, .prod-mod-intro__list-item::before, .shop-info__list-item::before {
  content: '\203A'; position: absolute; left: 0; color: var(--action); font-weight: bold;
}
.prod-mod-intro__list-item { color: var(--white); }
.shop-info__list-item { color: var(--white); }

/* Prod mod intro image — absolute fill with aspect ratio */
.prod-mod-intro__img-wrap { width: 100%; position: relative; overflow: hidden; }
.prod-mod-intro__img-wrap::after { content: ''; display: block; padding-bottom: 75%; }
.prod-mod-intro__img-wrap .prod-mod-intro__img,
.prod-mod-intro__img-wrap img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}

/* Elementor widget override — remove default spacing inside the shortcode container */
.prod-mod-intro-sec .elementor-widget-html { width: 100%; }
.prod-mod-intro-sec > .elementor-container { max-width: 100%; padding: 0; }

/* ==========================================================================
   5. PRODUCT MODULES
   ========================================================================== */
.prod-mod-sec { display: flex; flex-direction: column; gap: var(--section-space-l); }
.prod-mod { display: flex; flex-direction: row; align-items: center; gap: var(--space-l); }
.prod-mod--centered { flex-direction: column; text-align: center; }
.prod-mod__r-col, .prod-mod__l-col { width: 50%; }
.prod-mod--centered .prod-mod__r-col, .prod-mod--centered .prod-mod__l-col { width: 100%; max-width: 800px; }
.prod-mod__img-wrap { overflow: hidden; border-radius: var(--radius-s); }
.prod-mod__img { width: 100%; height: auto; display: block; }
.prod-mod__info { display: flex; flex-direction: column; gap: var(--space-s); }
.prod-mod__info-title { font-size: var(--h3); font-weight: 700; }
.prod-mod__txt { font-size: var(--text-m); line-height: 1.6; }

/* ==========================================================================
   6. TECH SPECS & PRODUCT TOUR
   ========================================================================== */
.prod-specs-sec { display: flex; flex-direction: column; gap: var(--space-l); }
.prod-specs { display: flex; flex-direction: row; width: 100%; align-items: center; }
.prod-specs__l-col { width: 60%; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.prod-specs__img { position: relative; z-index: 5; width: 100%; }
.prod-specs__img img { width: 100%; height: auto; }
.prod-specs__circle { width: clamp(28rem, calc(28rem + ((1vw - 0.32rem) * 60)), 63.8rem); height: clamp(28rem, calc(28rem + ((1vw - 0.32rem) * 60)), 63.8rem); border-radius: 50%; background-color: var(--base); border: 1px solid var(--base-light); position: absolute; }
.prod-spaces__prod-name { font-size: var(--text-s); font-weight: 700; position: absolute; z-index: 10; }
.prod-spaces__prod-name--1 { top: -20px; left: 0; }
.prod-specs__prod-name--2 { top: 0; right: 0; }

/* Pin markers */
.pin { position: absolute; width: 12px; height: 12px; background-color: var(--action); border-radius: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease; opacity: 0.5; z-index: 10; pointer-events: none; }
.pin--active { opacity: 1; width: 18px; height: 18px; box-shadow: 0 0 0 4px rgba(var(--action-rgb), 0.3); }

.prod-specs__r-col { display: flex; flex-direction: column; align-items: center; flex-grow: 1; }
.prod-specs__list { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-s); border-radius: var(--radius-s); background-color: var(--white); z-index: 20; box-shadow: var(--box-shadow-m); }
.pro-specs__list-item { font-size: var(--text-s); cursor: pointer; transition: color 0.15s ease; }
.pro-specs__list-item:hover { color: var(--action); }
.pro-specs__list-item-txt--active { color: var(--action); font-weight: 700; }

/* Tech Specs Details */
.prod-specs__details { width: 100%; display: flex; flex-direction: column; position: relative; padding: var(--space-xl) 0; border-top: 1px solid var(--base); border-bottom: 1px solid var(--base); }
.prod-specs__title { position: absolute; top: 0; transform: translateY(-50%); background-color: var(--white); padding: 0.5em 0.5em 0.5em 0; font-size: var(--h3); font-weight: 700; }
.prod-specs__detail-items { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; }
.prod-specs__detail-item { font-size: var(--text-s); display: flex; flex-direction: column; flex-grow: 1; width: 25%; padding: 0 var(--space-m); position: relative; }
.prod-specs__detail-item::after { content: ''; border-right: 1px solid var(--base); height: 100%; position: absolute; right: 0; top: 0; }
.prod-specs__detail-item:last-child::after { display: none; }
.prod-specs__detail-title { font-weight: 700; margin-bottom: 0.5em; }

/* Support Links */
.prod-support { display: flex; flex-direction: row; width: 100%; padding-bottom: 45px; justify-content: space-around; }
.prod-support__mod { display: flex; flex-direction: column; gap: var(--space-xs); align-items: center; margin: var(--space-m); text-decoration: none; transition: transform var(--transition-base); }
.prod-support__mod:hover { transform: translateY(-3px); }
.prod-support__icon-wrap { width: 3.2em; height: 3.2em; display: flex; align-items: center; justify-content: center; }
.prod-support__txt { font-size: var(--text-s); color: var(--primary); text-align: center; }

/* ==========================================================================
   7. IN THE BOX
   ========================================================================== */
.witb { width: 100%; display: flex; flex-direction: column; gap: var(--space-m); }
.witb__list { list-style: none; column-count: 2; column-gap: var(--space-l); padding: 0; width: 100%; }
.witb__list-item { display: flex; flex-direction: row; gap: 0.5em; align-items: center; padding: 0.5em 1em 0.5em 0; border-bottom: 1px solid var(--base); break-inside: avoid; }
.witb__list-count { font-size: var(--text-s); padding: 0.5em 1em; border-radius: var(--radius-s); border: 1px solid var(--base); white-space: nowrap; flex-shrink: 0; }
.witb__list-txt { font-size: var(--text-s); text-align: left; }
.witb__imgs { display: flex; flex-direction: row; width: 100%; gap: var(--space-l); }
.witb__img { width: 100%; }

/* ==========================================================================
   8. Q&A ACCORDION
   ========================================================================== */
.qa { width: 100%; display: flex; flex-direction: column; gap: var(--space-m); }
.qa-accordion { width: 100%; }
.qa-accordion__group { width: 100%; display: flex; flex-direction: column; }
.qa-accordion__row { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: var(--space-s); background-color: var(--white); border: none; border-bottom: 1px solid var(--base); cursor: pointer; transition: background-color var(--transition-base); text-align: left; font-family: inherit; }
.qa-accordion__row:hover { background-color: var(--base); }
.qa-accordion__question { font-size: var(--text-s); text-align: left; flex-grow: 1; padding-right: var(--space-s); }
.qa-accordion__icon { font-size: 18px; color: #333; transition: transform 0.3s ease; flex-shrink: 0; }
.qa-accordion__row--active .qa-accordion__icon { transform: rotate(180deg); }
.qa-accordion__content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; width: 100%; }
.qa-accordion__content--visible { max-height: 3000px; padding: var(--space-s); }
.qa-accordion__answer { font-size: var(--text-s); line-height: 1.6; }

/* ==========================================================================
   9. VIDEO PLAYLIST
   ========================================================================== */
.oxel-vidlist { width: 100%; overflow: hidden; border-radius: var(--radius-m); }
.oxel-vidlist__columns { display: flex; flex-direction: row; width: 100%; align-items: flex-start; position: relative; }
.oxel-vidlist__column--left { width: 60%; display: flex; flex-direction: column; justify-content: center; }
.oxel-vidlist__column--left iframe { width: 100%; aspect-ratio: 16/9; display: block; border: none; }
.oxel-vidlist__column--right { width: 40%; display: flex; flex-direction: column; position: absolute; right: 0; top: 0; left: 60%; height: 100%; background-color: var(--base); overflow-y: auto; }
.oxel-vidlist__list-item { width: 100%; display: flex; padding: var(--space-m) var(--space-s); align-items: center; flex-direction: row; transition: background-color 0.3s ease-in-out; background-color: var(--base); color: var(--primary); text-decoration: none; cursor: pointer; }
.oxel-vidlist__list-item:hover { background-color: var(--base-light); }
.oxel-vidlist__list-item--active { background-color: var(--primary); color: var(--white); }
.oxel-vidlist__list-item--active .oxel-vidlist__list-item-title { color: var(--white); }
.oxel-vidlist__list-item-left { display: flex; align-items: center; justify-content: center; margin-right: 16px; }
.oxel-vidlist__icon { font-size: 32px; color: var(--secondary-light); }
.oxel-vidlist__list-item:not(.oxel-vidlist__list-item--active) .oxel-vidlist__icon--active { display: none; }
.oxel-vidlist__list-item--active .oxel-vidlist__icon--inactive { display: none; }
.oxel-vidlist__list-item--active .oxel-vidlist__icon--active { display: initial; color: var(--action); }
.oxel-vidlist__list-item-title { font-size: var(--text-s); font-weight: 600; width: 70%; }

/* ==========================================================================
   10. PRODUCT COMPARISON TABLE
   ========================================================================== */
.prod-compare { display: flex; flex-direction: row; width: 100%; border: 1px solid var(--base); align-items: stretch; overflow: hidden; }
.prod-compare__sidebar { width: 22rem; min-width: 22rem; border-right: 1px solid var(--base); box-shadow: 20px 0 20px -8px rgba(0,0,0,0.15); position: relative; z-index: 10; flex-shrink: 0; }
.prod-compare__cell-img { height: 20rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.prod-compare__cell { padding: var(--space-s); width: 100%; font-size: var(--text-s); display: flex; justify-content: center; align-items: center; border-bottom: 1px solid var(--base); overflow: hidden; }
.prod-compare__title { width: 100%; padding: var(--space-s); font-size: var(--text-s); font-weight: 600; border-bottom: 1px solid var(--base); }
.prod-compare__txt { white-space: nowrap; }
.prod-compare__prod-wrap { display: flex; flex-grow: 1; flex-direction: row; overflow-x: auto; }
.prod-compare__col { display: flex; flex-direction: column; flex-grow: 1; min-width: 22rem; flex-shrink: 0; border-right: 1px solid var(--base); position: relative; }
.prod-compare__col:last-child { border-right: none; }
.prod-compare__col--active::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid var(--action); z-index: 20; pointer-events: none; }
.prod-compare__img { max-width: 14rem; width: 100%; height: auto; margin: 0 auto; }
.prod-compare__prod-name { font-weight: 600; text-align: center; margin-top: var(--space-xs); }
.prod-compare__list ul { list-style: none; padding: 0; margin: 0; }

/* ==========================================================================
   11. PROFESSIONAL REVIEWS
   ========================================================================== */
.pro-reviews-sec { background-color: var(--base); position: relative; overflow: hidden; }
.pro-review-sec__outline { position: absolute; left: 0; top: 0; transform: translateY(-75%); max-width: 131rem; opacity: 0.08; pointer-events: none; z-index: 1; }
.c-reviews__card { background-color: var(--white); border-radius: var(--radius-s); padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-s); height: 100%; box-shadow: var(--box-shadow-m); }
.c-reviews__card-title { font-size: var(--h4); font-weight: 700; }
.c-reviews__card-text { font-size: var(--text-s); line-height: 1.6; flex-grow: 1; }
.c-reviews__card-more { font-size: var(--text-s); color: var(--action); text-decoration: none; cursor: pointer; }
.c-reviews__card-more::after { content: '\203A'; margin-left: 0.4rem; }
.c-reviews__logo { max-height: 40px; width: auto; margin-top: auto; }
.c-reviews__controller { position: relative; display: flex; justify-content: center; gap: var(--space-m); padding-top: var(--space-m); z-index: 5; }
.c-reviews__btn-container { display: flex; gap: var(--space-s); }
.c-reviews__controller .swiper-button-prev, .c-reviews__controller .swiper-button-next { position: static; width: 40px; height: 40px; margin: 0; }
.c-reviews__controller .swiper-button-prev::after, .c-reviews__controller .swiper-button-next::after { font-size: 18px; color: var(--primary); }

/* ==========================================================================
   12. FEARLESS SHOPPING
   ========================================================================== */
.shop-info { background-color: var(--primary-ultra-dark); display: flex; flex-direction: row; align-items: center; gap: var(--space-xxl); position: relative; width: 100%; }
.shop-info__left-col { width: 50%; }
.shop-info__left-col img { width: 100%; height: auto; display: block; }
.shop-info__right-col { width: 50%; position: relative; }
.shop-info__group { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-xl) 0; }
.shop-info__title h3 { color: var(--white); font-size: var(--text-xxl); font-weight: 700; line-height: 1.1; }
.shop-info__badge { position: absolute; right: 0; top: 4rem; width: clamp(100px, calc(6.25rem + ((1vw - 3.2px) * 12)), 220px); }

/* ==========================================================================
   13. LISTEN YOUR WAY
   ========================================================================== */
@keyframes rotate-360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.lyw-record-wrap { width: 100%; max-width: 24.8rem; overflow: hidden; position: relative; margin: 0 auto; }
.lyw-record-wrap::before { content: ''; display: block; padding-bottom: 50%; }
.lyw-record { animation: rotate-360 var(--transition-time-xxl) linear infinite; position: absolute; bottom: -100%; width: 100%; }

/* ==========================================================================
   14. GIFT LISTS
   ========================================================================== */
.list-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-l); width: 100%; }
.list-type__mod { background-color: var(--primary-medium); width: 100%; height: 100%; padding: var(--space-s); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-s); gap: var(--space-xs); transition: background-color var(--transition-base); text-decoration: none; }
.list-type__mod:hover { background-color: var(--primary); color: var(--white); }
.list-type__icon-wrap { width: 6rem; height: 6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--secondary-medium); }
.list-type__icon { width: 4rem; }
.list-type__txt { font-size: var(--text-s); color: var(--white); text-align: center; }

/* ==========================================================================
   15. HALF-N-HALF (About + Audition)
   ========================================================================== */
.half-n-half { display: flex; flex-direction: row; width: 100%; background-color: var(--base); overflow: hidden; border-radius: var(--radius-s); align-items: stretch; }
.half-n-half__col-left { width: 50%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-l); min-height: 400px; }
.half-n-half__img-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
.half-n-half__img-tint { background-color: var(--shade); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 20; opacity: 0.4; }
.half-n-half__img, .half-n-half__img img { width: 100%; min-height: 100%; object-fit: cover; object-position: center; }
.half-n-half__img-message { position: relative; z-index: 25; max-width: 340px; }
.half-n-half__col-right { width: 50%; padding: var(--space-xl); display: flex; align-items: center; justify-content: center; }
.half-n-half__message { display: flex; flex-direction: column; gap: var(--space-s); }
.half-n-half__heading h3 { font-weight: 700; }

/* ==========================================================================
   16. PRODUCT CARD (Reusable Component — matches Oxygen reusable #1305062)
   ========================================================================== */

/* Card container */
.product-card {
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  padding: var(--space-l) var(--space-m) var(--space-m);
  border-radius: var(--radius-s);
  border: 1px solid var(--base);
  overflow: hidden;
  height: 100%;
  max-width: 43.8rem;
  transition: box-shadow 0.25s ease;
}
.product-card:hover {
  box-shadow: var(--box-shadow-m);
}

/* Card image area */
.product-card__img {
  margin-bottom: var(--space-m);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card__img a {
  display: block;
  width: 100%;
  text-align: center;
}
.product-card__img img,
.product-card__image {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 280px;
  transition: transform 0.3s ease;
}
.product-card:hover .product-card__img img {
  transform: scale(1.03);
}

/* Card title */
.product-card__title-link {
  color: var(--primary);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  display: block;
}
.product-card__title-link:hover {
  color: var(--action);
}
.product-card__title {
  font-size: var(--text-m);
  text-align: left;
  margin: 0;
  line-height: 1.3;
}

/* Card meta row (price + swatches) */
.product-card__meta {
  width: 100%;
  margin-top: var(--space-s);
  margin-bottom: var(--space-s);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* Price */
.product-card__price {
  font-weight: 400;
}
.product-card__price .woocommerce-Price-amount {
  font-weight: 600;
  color: var(--shade);
}
.product-card__price del .woocommerce-Price-amount {
  font-weight: 600;
  color: var(--secondary-medium);
}
.product-card__price ins {
  text-decoration: none;
}

/* Color/Finish Swatches */
.product-card__swatches {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  margin-left: auto;
}
.product-card__swatch {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid var(--base);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
  background-size: cover;
  background-position: center;
}
.product-card__swatch:hover,
.product-card__swatch--active {
  border-color: var(--action);
  transform: scale(1.15);
}

/* Sale / New Badge */
.product-card__sale-badge {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: var(--action);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white);
  position: absolute;
  top: var(--space-m);
  left: var(--space-m);
  font-size: 1.2rem;
  font-weight: 100;
  padding-left: 4px;
  z-index: 5;
}
.product-card__sale-badge--new {
  background-color: var(--action);
}
.product-card__sale-badge--sale {
  background-color: #e74c3c;
}
/* If both badges, offset the second */
.product-card__sale-badge--new + .product-card__sale-badge--sale {
  left: calc(var(--space-m) + 5.5rem);
}

/* Special Offer indicator */
.product-card__offer {
  display: none; /* shown via JS when offer exists */
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}
.product-card__offer-indicator {
  width: 1.2rem;
  height: 1.2rem;
  background-color: var(--action);
  border-radius: 50%;
  position: relative;
}
.product-card__offer-indicator--pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--action);
  animation: pulse-ring 1.5s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}
.product-card__offer-text {
  font-size: var(--text-s);
  font-weight: 600;
}
.product-card__offer-details {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: var(--space-m);
  background-color: var(--primary-ultra-dark);
  z-index: 20;
  transition: transform 0.25s ease;
  transform: translateY(0);
}
.product-card__offer-details--hidden {
  transform: translateY(100%);
  pointer-events: none;
}
.product-card__offer-title {
  font-size: var(--text-m);
  color: var(--white);
  font-weight: 700;
}
.product-card__offer-desc {
  font-size: var(--text-s);
  color: var(--white);
  margin-top: 0.25rem;
}
.product-card__offer-details-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

/* Compare button */
.product-card__compare {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 14px !important;
  font-weight: bold !important;
  color: var(--secondary);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--space-xs);
  transition: color 0.2s ease;
}
.product-card__compare:hover {
  color: var(--action);
}
.product-card__compare svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* Refurbished stock status */
.product-card__stock-status {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-s);
  color: var(--action);
  font-weight: 600;
  margin-top: var(--space-xs);
}

/* ==========================================================================
   16b. PRODUCT GRID (Also Bought wrapper)
   ========================================================================== */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); width: 100%; }
.product-grid__col { display: flex; }

/* ==========================================================================
   17. BUTTONS
   ========================================================================== */
.btn--action { display: inline-block; padding: 0.75em 1.5em; background-color: var(--action); color: var(--primary); font-weight: 700; border: 2px solid var(--action); border-radius: 4px; text-decoration: none; cursor: pointer; transition: all var(--transition-base); font-size: var(--text-s); }
.btn--action:hover { background-color: #e6b400; border-color: #e6b400; }
.btn--outline { background-color: transparent; color: var(--action); border: 2px solid var(--action); }
.btn--outline:hover { background-color: var(--action); color: var(--primary); }

/* Shipping estimator */
.shipping-estimator input[type="text"] { padding: 5px 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 3px; }
.shipping-estimator input[type="text"]:focus { outline: none; border: 2px solid #d10000; }
.shipping-estimator button { padding: 5px 20px; font-size: 15px; cursor: pointer; border: 1px solid #ccc; border-radius: 3px; background: var(--white); }

/* WooCommerce Add to Cart overrides */
.prod-hero .single_add_to_cart_button { background-color: var(--action) !important; color: var(--primary) !important; font-weight: 700; border: none; padding: 12px 30px; border-radius: 4px; font-size: 16px; }
.prod-hero .single_add_to_cart_button:hover { background-color: #e6b400 !important; }

/* Elementor overrides */
.elementor-widget-html { width: 100%; }

/* ==========================================================================
   18. RESPONSIVE — TABLET
   ========================================================================== */
@media (max-width: 1024px) {
  .prod-hero__row { flex-direction: column; }
  .prod-hero__col { width: 100%; }
  .prod-mod-intro { flex-direction: column-reverse; }
  .prod-mod-intro__l-col, .prod-mod-intro__r-col { width: 100%; }
  .prod-mod-intro__l-col { padding: var(--space-l) var(--section-padding-x); }
  .prod-specs { flex-direction: column; }
  .prod-specs__l-col { width: 100%; max-width: 100%; }
  .prod-specs__r-col { width: 100%; max-width: 32rem; }
  .prod-specs__list { flex-direction: row; overflow-x: auto; }
  .prod-specs__detail-item { width: 50%; margin-bottom: var(--space-s); }
  .oxel-vidlist__columns { flex-direction: column; }
  .oxel-vidlist__column--left, .oxel-vidlist__column--right { width: 100%; position: static; }
  .oxel-vidlist__column--right { max-height: 200px; }
  .shop-info { flex-direction: column-reverse; }
  .shop-info__left-col, .shop-info__right-col { width: 100%; }
  .list-types { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   19. RESPONSIVE — MOBILE
   ========================================================================== */
@media (max-width: 768px) {
  .prod-hero__outline-txt { display: none; }
  .spec-overview { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .spec-overview__block { min-width: 17.5rem; width: auto; flex-shrink: 0; }
  .prod-mod-info__group { flex-direction: column; gap: var(--space-l); }
  .prod-mod { flex-direction: column; }
  .prod-mod__r-col, .prod-mod__l-col { width: 100%; }
  .prod-specs__detail-items { flex-direction: column; }
  .prod-specs__detail-item { width: 100%; padding: 0; }
  .prod-specs__detail-item::after { display: none; }
  .prod-support { flex-direction: column; }
  .prod-support__mod { flex-direction: row; width: 100%; margin: var(--space-xs) 0; }
  .witb__list { column-count: 1; }
  .witb__imgs { flex-direction: column; }
  .half-n-half { flex-direction: column; }
  .half-n-half__col-left, .half-n-half__col-right { width: 100%; }
  .list-types { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .prod-hero__badge-overlay { width: 25%; top: 10px; right: 10px; }
  .list-types { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
}