/* ==========================================================================
   product-sticky-accordion.css
   SimplexTheme — Product Details: Sticky 2-Column + Minimal Accordion
   Bootstrap 3 environment (col-sm-*, col-md-*)
   ========================================================================== */

/* ==========================================================================
   0. ROOT OVERFLOW FIX — Required for position:sticky to work
   ─────────────────────────────────────────────────────────────────────────
   simplex.styles.css sets: :root { overflow-x: hidden }
   By CSS spec, this forces overflow-y from 'visible' to 'auto' (computed),
   making :root a scroll container — which breaks position:sticky.
   Fix: override with 'overflow-x: clip' which clips without creating a
   scroll container. Body gets overflow-x:hidden as fallback.
   overflow:clip is supported in Chrome 90+, Firefox 81+, Safari 16+.
   ========================================================================== */

:root {
  overflow-x: clip; /* Does not create scroll container — sticky safe */
}

body {
  overflow-x: hidden; /* Horizontal scroll prevention fallback */
}

/* ==========================================================================
   1. STICKY 2-COLUMN LAYOUT
   ─────────────────────────────────────────────────────────────────────────
   Problem: Bootstrap 3 uses float + clearfix which breaks position:sticky.
   Solution:
     • Override .row with display:flex (default align-items: stretch)
     • CRITICAL: Do NOT set align-items:flex-start — stretch allows the
       gallery column to grow as tall as the overview column, which is
       required for sticky to have scrolling room to work within
     • Float is neutralised on direct column children
   ========================================================================== */

/* ── Flex row override — desktop only (col-md-* breakpoint = 992px) ── */
@media (min-width: 992px) {
  .product-2col-layout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* align-items: stretch (DEFAULT) — do NOT override to flex-start */
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
  }

  /* Neutralise Bootstrap 3 float on columns */
  .product-2col-layout > .product-gallery-col,
  .product-2col-layout > .product-overview-col {
    float: none !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 1px;
  }

  /* ── Gallery column ── */
  .product-gallery-col {
    /* Lock width: prevent flex algorithm from changing column size */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66666667%;
    flex: 0 0 41.66666667%;
    max-width: 41.66666667%;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* ── Overview column ── */
  .product-overview-col {
    /* Lock width: prevent flex algorithm from changing column size */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333333%;
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
    padding-left: 30px;
    padding-right: 15px;
  }

  /* ── CSS Sticky: gallery sticks within .product-essential scope ──
       Release happens naturally when .product-essential ends.
       Adjust top value if you have a fixed header (e.g., top: 80px). */
  .gallery.gallery-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    /* will-change: transform removed — can cause compositing artifacts
           that slightly misalign the gallery's rendered position. */
  }
}

/* Tablet: tighter column gap (768px–991px: col-sm-* only, columns stack via col-md) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .product-overview-col {
    padding-left: 20px;
  }
}

/* Mobile: stack columns, remove sticky */
@media (max-width: 991.98px) {
  .product-2col-layout {
    display: block;
  }

  /* Gallery: full-width, no padding (images edge-to-edge) */
  .product-gallery-col {
    float: none !important;
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* Overview: full-width with side padding for readability */
  .product-overview-col {
    float: none !important;
    width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 24px;
    padding-top: 24px;
  }

  /* No sticky on mobile/tablet */
  .gallery.gallery-sticky {
    position: static;
  }
}

/* ==========================================================================
   2. INTERSECTION OBSERVER STICKY FALLBACK
   CSS classes toggled by JS when CSS sticky is not natively supported
   or when structural constraints prevent it from working.
   ========================================================================== */

/* Fallback: gallery is fixed to viewport (JS adds this class) */
.gallery-sticky-js-active {
  position: fixed !important;
  top: 20px !important;
  z-index: 10;
}

/* Fallback: sticky parent has scrolled past — pin to bottom of container */
.gallery-sticky-js-released {
  position: absolute !important;
  bottom: 0 !important;
  top: auto !important;
}

/* ==========================================================================
   3. ACCORDION — Tilt Beauty-inspired Minimal Design
   ───────────────────────────────────────────────────────────────────────────
   • Clean horizontal dividers, no panel borders or backgrounds
   • Bold uppercase title
   • Circle-bordered Lucide SVG icon (+/−) on the right
   • Icon state controlled via .panel-open class (toggled by JS)
   ========================================================================== */

/* ── Accordion wrapper ── */
.product-detail-tabs {
  margin-top: 40px;
  border-top: 1px solid #ddd;
}

/* ── panel-group reset ── */
.product-detail-tabs .product-accordion {
  margin-bottom: 0;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* ── Individual panel: bottom divider only ── */
.product-detail-tabs .product-accordion-panel {
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background: transparent;
  margin: 0;
}

.product-detail-tabs .product-accordion-panel.panel-open {
  border-bottom: none;
}

/* ── Panel heading ── */
.product-detail-tabs .product-accordion-panel .panel-heading {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

/* ── Panel title (Bootstrap 3 h4 reset) ── */
.product-detail-tabs .panel-title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ── Toggle button ── */
.product-detail-tabs .product-accordion-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px 0;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.product-detail-tabs .product-accordion-toggle:hover,
.product-detail-tabs .product-accordion-toggle:focus {
  opacity: 0.55;
  text-decoration: none;
  outline: none;
  color: #1a1a1a;
}

/* ── Title text ── */
.product-detail-tabs .acc-title-text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/* ── Circle icon wrapper ── */
.acc-icon-wrap {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid #1a1a1a;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: 16px;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.product-detail-tabs .product-accordion-toggle:hover .acc-icon-wrap,
.product-detail-tabs .product-accordion-toggle:focus .acc-icon-wrap {
  opacity: 0.55;
}

/* ── Lucide SVG icons ── */
.acc-svg {
  display: block;
  width: 14px;
  height: 14px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* Default: show plus, hide minus */
.acc-svg-minus {
  display: none;
}

/* When panel is open (.panel-open added by JS): swap icons */
.panel-open .acc-svg-plus {
  display: none;
}

.panel-open .acc-svg-minus {
  display: block;
}

/* Expanded: hide title text, keep only collapse icon
   Toggle shrinks to a thin icon-only strip; still clickable to re-collapse */
.panel-open .acc-title-text {
  display: none;
}

.panel-open .product-accordion-toggle {
  padding: 6px 0;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

/* ── Panel body ── */
.product-detail-tabs .panel-body {
  padding: 0 0 28px 0;
  background: transparent;
  border-top: none;
  border-bottom: none;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

/* Remove Bootstrap 3 default panel-body border-top */
.product-detail-tabs .panel > .panel-collapse > .panel-body {
  border-top: none;
}

/* Full description: make user-uploaded images responsive
   Rich-text editor embeds fixed-px widths — max-width:100% overrides them */
.product-detail-tabs .panel-body.full-description img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Full description ── */
.product-detail-tabs .panel-body.full-description > *:first-child {
  margin-top: 0;
}

.product-detail-tabs .panel-body.full-description > *:last-child {
  margin-bottom: 0;
}

/* ── Specs table ── */
.product-detail-tabs .panel-body .product-specs-box {
  margin: 0;
  padding: 0;
}

.product-detail-tabs .panel-body .product-specs-box .title {
  display: none;
}

.product-detail-tabs .panel-body .product-specs-box .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.product-detail-tabs .panel-body .product-specs-box .data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}

.product-detail-tabs .panel-body .product-specs-box .data-table .spec-name {
  font-weight: 600;
  color: #555;
  width: 30%;
  white-space: nowrap;
}

.product-detail-tabs .panel-body .product-specs-box .data-table .spec-value {
  color: #1a1a1a;
}

.product-detail-tabs
  .panel-body
  .product-specs-box
  .data-table
  tr:last-child
  td {
  border-bottom: none;
}

.product-detail-tabs
  .panel-body
  .product-specs-box
  .data-table
  .spec-header
  td {
  background: #f5f5f5;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #666;
  padding: 6px 12px;
}

/* ── Tags ── */
.product-detail-tabs .panel-body .product-tags-box {
  margin: 0;
}

.product-detail-tabs .panel-body .product-tags-box .title {
  display: none;
}

/* ==========================================================================
   4. PRODUCT REVIEWS SECTION
   ========================================================================== */

.product-reviews-section {
  margin-top: 0;
  /* no border-top — last accordion panel's border-bottom serves as separator */
}

/* Remove panel-body default padding so titles span full width */
.product-reviews-section .panel-body {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

/* Write a Review / Existing Reviews headings — match accordion divider style */
.product-reviews-section .title {
  padding: 14px 0;
  background: transparent;
  border-top: none;
  border-bottom: none;
  margin: 0 0 20px 0;
}

.product-reviews-section .title strong {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1a1a1a;
}

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 991.98px) {
  .product-detail-tabs {
    margin-top: 32px;
  }

  .product-detail-tabs .product-accordion-toggle {
    padding: 12px 0;
  }

  .product-detail-tabs .panel-body {
    padding: 0 0 24px 0;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  .product-detail-tabs {
    margin-top: 24px;
  }

  .product-detail-tabs .product-accordion-toggle {
    padding: 10px 0;
    font-size: 12px;
  }

  .product-detail-tabs .panel-body {
    padding: 0 0 20px 0;
    font-size: 13px;
  }

  .acc-icon-wrap {
    width: 22px;
    height: 22px;
  }

  .acc-svg {
    width: 12px;
    height: 12px;
  }

  /* Specs: stack on small screens */
  .product-detail-tabs .panel-body .product-specs-box .data-table .spec-name {
    width: 40%;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .product-detail-tabs .panel-body .product-specs-box .data-table,
  .product-detail-tabs .panel-body .product-specs-box .data-table tbody,
  .product-detail-tabs .panel-body .product-specs-box .data-table tr,
  .product-detail-tabs .panel-body .product-specs-box .data-table td {
    display: block;
    width: 100%;
  }

  .product-detail-tabs .panel-body .product-specs-box .data-table .spec-name {
    padding-bottom: 2px;
    border-bottom: none;
    color: #888;
    font-size: 11px;
  }

  .product-detail-tabs .panel-body .product-specs-box .data-table .spec-value {
    padding-top: 2px;
    padding-left: 12px;
  }
}

/* Reset product-details-minimal.css mobile overrides for selected-color-display */
@media (max-width: 768px) {
  .selected-color-display {
    background-color: transparent;
    border-left: none;
    padding: 0;
    margin-bottom: 10px;
  }
  .selected-color-name {
    font-size: 13px;
    font-weight: 400;
    display: inline;
  }
}

/* Hide swatch tooltips on touch/mobile (no reliable hover) */
@media (max-width: 768px) {
  .attributes .image-squares li .tooltip-container {
    display: none !important;
  }
}

/* Mobile: left-align product name and review overview
   (override simplex.styles.responsive.css center-align rules) */
@media (max-width: 991.98px) {
  .product-details-page .product-name,
  .product-details-page .product-name h1 {
    text-align: left !important;
  }

  .product-details-page .product-reviews-overview .product-review-links,
  .product-details-page .product-reviews-overview .product-review-box,
  .product-details-page .product-reviews-overview .product-no-reviews {
    text-align: left !important;
    float: none;
  }

  .product-details-page .product-reviews-overview .rating {
    margin: 0 !important;
    text-align: left !important;
  }
}

/* ==========================================================================
   6. PRINT
   ========================================================================== */

@media print {
  .product-detail-tabs .panel-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
  }

  .acc-icon-wrap {
    display: none;
  }

  .product-detail-tabs .product-accordion-panel {
    border: none;
    border-bottom: 1px solid #ccc;
  }
}

/* ==========================================================================
   7. IMAGE-SQUARES HOVER TOOLTIP — tiltbeauty style
   ─────────────────────────────────────────────────────────────────────────
   Card appears below each li: image (110×110) on top, name below.
   flex-direction: column-reverse swaps header/body visual order.
   pointer-events: none = instant hide on cursor leave.
   ========================================================================== */

.attributes .image-squares > li {
  position: relative;
}

.attributes .image-squares li .tooltip-container {
  /* hidden by default; shown as flex on hover */
  display: none;
  position: absolute;
  top: auto;
  bottom: calc(100% + 6px);
  /* top: calc(100% - 30px); */
  left: 50%;
  transform: translateX(-50%);
  /* above the sticky header menu (.header-menu .navbar uses z-index:99999) — at 200 the
     menu bled through the swatch hover tooltip when the swatch row sits near the header. */
  z-index: 100000;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  padding: 10px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  min-width: 0;
  /* flex layout: body (image) rendered above header (name) */
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.attributes .image-squares li:hover .tooltip-container {
  display: flex;
}

/* Image: square, fixed 110px */
.attributes .image-squares li .tooltip-container .tooltip-body {
  display: block;
}

.attributes .image-squares li .tooltip-container .tooltip-body img {
  display: block;
  width: auto;
  height: auto;
  max-width: 160px;
  max-height: 240px;
  border-radius: 2px;
}

/* Name: small uppercase with tracking */
.attributes .image-squares li .tooltip-container .tooltip-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #1a1a1a;
  white-space: nowrap;
  text-align: center;
}

/* Hide unavailable text */
.attributes .image-squares li .tooltip-container .not-available-text {
  display: none;
}

/* ==========================================================================
   8. SELECTED COLOR DISPLAY — minimal modern
   ─────────────────────────────────────────────────────────────────────────
   Clean inline: uppercase muted label + normal-weight value.
   No background, no border — typography hierarchy only.
   ========================================================================== */

.selected-color-display {
  /* Reset product-details-minimal.css overrides */
  background-color: transparent;
  border-left: none;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
  /* Minimal inline layout */
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 10px;
  line-height: 1.2;
}

.selected-color-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #999;
  flex-shrink: 0;
}

.selected-color-name {
  /* Reset product-details-minimal.css overrides */
  font-size: 13px;
  font-weight: 400;
  color: #1a1a1a;
  display: inline;
}

/* ==========================================================================
   9. OVERVIEW BUTTONS — Wishlist · Compare · Email
   ─────────────────────────────────────────────────────────────────────────
   Minimal icon+text ghost links separated by pipe dividers.
   Thin top border separates from primary add-to-cart section.
   ========================================================================== */

/* Container — reset product-details-minimal.css defaults */
.product-details-page .overview-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 20px 0 8px;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
  align-items: center;
}

/* Inner wrapper divs — stretch to fill row height */
.product-details-page .overview-buttons > div {
  display: flex;
  align-items: stretch;
}

/* Pipe dividers: target known button wrappers directly
   (avoids widget zone empty divs breaking :first-child logic) */
.product-details-page .overview-buttons .compare-products,
.product-details-page .overview-buttons .email-a-friend {
  border-left: 1px solid #e0e0e0;
}

/* Button — ghost text-link style */
.product-details-page .overview-buttons .button-2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #aaa;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
  white-space: nowrap;
  line-height: 1;
}

/* Wishlist button: flush left (no leading gap) */
.product-details-page .overview-buttons .add-to-wishlist .button-2 {
  padding-left: 0;
}

/* Hover: darken text */
.product-details-page .overview-buttons .button-2:hover {
  color: #1a1a1a;
  background: transparent;
}

/* Icon base via ::before pseudo-element */
.product-details-page .overview-buttons .button-2::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  opacity: 0.45;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.product-details-page .overview-buttons .button-2:hover::before {
  opacity: 1;
}

/* Wishlist — heart (Lucide) */
.product-details-page .add-to-wishlist-button::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}

/* Compare — git-compare (Lucide) */
.product-details-page .add-to-compare-list-button::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M13 6h3a2 2 0 0 1 2 2v7'/%3E%3Cpath d='M11 18H8a2 2 0 0 1-2-2V9'/%3E%3C/svg%3E");
}

/* Email a friend — mail (Lucide) */
.product-details-page .email-a-friend-button::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

/* Mobile (≤576px): stack vertically with horizontal dividers */
@media (max-width: 576px) {
  .product-details-page .overview-buttons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0;
  }

  .product-details-page .overview-buttons > div {
    width: 100%;
  }

  .product-details-page .overview-buttons .compare-products,
  .product-details-page .overview-buttons .email-a-friend {
    border-left: none;
    border-top: 1px solid #e5e5e5;
  }

  .product-details-page .overview-buttons .button-2 {
    width: 100%;
    padding: 10px 0;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}