/* BR Product Page Styles - VERSION 3.0 */

/* CRITICAL: Override ANY container styles that might break grid - ALL SCREENS */
section.br-product-page > .container,
.br-product-page > .container,
.br-product-page .container,
body .br-product-page .container,
body section.br-product-page .container {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 2rem !important;
  margin: 0 auto !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  flex: unset !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  box-sizing: border-box !important;
}

/* Ensure main doesn't force flex column on product page children */
.app .main .br-product-page .container,
.app.d-flex.flex-column .main .br-product-page .container {
  display: block !important;
  flex: none !important;
  flex-direction: unset !important;
}

.app .main .br-product-page,
.app.d-flex.flex-column .main .br-product-page,
body .app .main .br-product-page,
.br-product-page {
  padding: 0;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* CRITICAL: overflow: visible so sticky (gallery + info) can stick to viewport; no overflow hidden on section/container */
  overflow: visible !important;
  overflow-x: hidden !important; /* Prevent horizontal scrolling */
  /* CRITICAL: Override parent flex behavior */
  display: block !important;
  flex: none !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  align-self: stretch !important;
}

/* Ensure container doesn't clip or create a sticky containing block */
.br-product-page .container {
  overflow: visible !important;
  overflow-x: hidden !important; /* Prevent horizontal scrolling */
}

/* TEMPORARY: Remove grid/flex to see natural flow */
/* Base: 2-column grid - Apply to ALL screens first, then override for mobile */
/* CRITICAL: Use maximum specificity to override everything including parent flex */
.app .main .br-product-page .container .br-product-wrapper,
.app.d-flex.flex-column .main .br-product-page .container .br-product-wrapper,
section.br-product-page .container .br-product-wrapper,
.br-product-page .container .br-product-wrapper,
body .br-product-page .container .br-product-wrapper,
body section.br-product-page .container .br-product-wrapper,
.br-product-page .container > .br-product-wrapper,
.br-product-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto !important; /* content-sized so Curated Selection below is not pushed off */
  grid-auto-flow: column !important;
  gap: 4rem !important;
  margin-bottom: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  align-items: start !important;
  /* CRITICAL: Override parent flex */
  flex: none !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  direction: ltr !important; /* Force LTR direction to prevent grid column reversal */
}

/* CRITICAL: Override any RTL direction on wrapper in Arabic - keep same layout as English */
html[dir="rtl"] .app .main .br-product-page .container .br-product-wrapper,
html[dir="rtl"] .app.d-flex.flex-column .main .br-product-page .container .br-product-wrapper,
html[dir="rtl"] section.br-product-page .container .br-product-wrapper,
html[dir="rtl"] .br-product-page .container .br-product-wrapper,
html[dir="rtl"] body .br-product-page .container .br-product-wrapper,
html[dir="rtl"] body section.br-product-page .container .br-product-wrapper,
html[dir="rtl"] .br-product-page .container > .br-product-wrapper,
html[lang="ar"] .app .main .br-product-page .container .br-product-wrapper,
html[lang="ar"] .app.d-flex.flex-column .main .br-product-page .container .br-product-wrapper,
html[lang="ar"] section.br-product-page .container .br-product-wrapper,
html[lang="ar"] .br-product-page .container .br-product-wrapper,
html[lang="ar"] body .br-product-page .container .br-product-wrapper,
html[lang="ar"] body section.br-product-page .container .br-product-wrapper,
html[lang="ar"] .br-product-page .container > .br-product-wrapper,
body[dir="rtl"] .br-product-wrapper,
.rtl .br-product-wrapper {
  direction: ltr !important; /* Force LTR to prevent grid column reversal */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; /* Keep same column order */
}

/* Base: Force gallery and info to correct columns; both sticky so they stay fixed while page scrolls through gallery */
section.br-product-page .br-product-gallery,
.br-product-page .br-product-gallery,
.br-product-wrapper > .br-product-gallery,
body .br-product-page .br-product-gallery,
.br-product-page .container .br-product-wrapper > .br-product-gallery,
.br-product-gallery {
  grid-column-start: 1 !important;
  grid-column-end: 2 !important;
  grid-column: 1 / 2 !important; /* Explicit column range: column 1 (left) */
  grid-row: 1 !important;
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  clear: both !important;
  display: block !important;
}

/* Right panel: sticky so it stays in view while page scroll drives gallery (Filippa K style) */
section.br-product-page .br-product-info,
.br-product-page .br-product-info,
.br-product-wrapper > .br-product-info,
body .br-product-page .br-product-info,
.br-product-page .container .br-product-wrapper > .br-product-info,
.br-product-info {
  grid-column-start: 2 !important;
  grid-column-end: 3 !important;
  grid-column: 2 / 3 !important; /* Explicit column range: column 2 (right) */
  grid-row: 1 !important;
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  clear: both !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Image Gallery - Filippa K demo: fixed height, inner scroll */
.br-product-gallery {
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  touch-action: pan-y !important;
  z-index: 1 !important;
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  box-sizing: border-box !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  clear: both !important;
  display: block !important;
}

/* Gallery inner: scrollable column (Filippa K demo style) – explicit height so overflow scroll works */
.br-product-gallery .br-product-images-scroll {
  height: 100vh !important;
  max-height: 100vh !important;
}
.br-product-images-scroll {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  margin: 0;
  padding: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  z-index: 1;
}
.br-product-images-scroll::-webkit-scrollbar {
  display: none;
}

.br-product-image-item {
  width: 100%;
  position: relative;
  height: 100vh;
  min-height: 100vh;
  overflow: visible;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.br-product-image {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  object-fit: cover;
  object-position: center;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

.br-product-video {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  object-fit: cover;
  object-position: center;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

.br-product-video source {
  display: block;
}

/* YouTube Video Container */
.br-product-video-youtube {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden; /* Hide any overflow from scaled iframe */
}

.br-product-video-youtube .br-youtube-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.br-product-video-youtube iframe {
  /* Scale iframe to fill container completely - crop edges to eliminate black bars */
  /* Use larger dimensions and scale to ensure full coverage */
  width: 120%; /* Larger than container */
  height: 120%; /* Larger than container */
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  /* Scale up significantly to ensure full coverage - this will crop edges but eliminate black bars */
  transform: translate(-50%, -50%) scale(1.5);
  transform-origin: center center;
  border: none;
  z-index: 1;
  /* Ensure no black background shows */
  background: transparent;
  /* Prevent any YouTube UI from showing */
  pointer-events: auto;
}

/* Hide YouTube UI elements that might still appear */
.br-product-video-youtube iframe[src*="youtube.com"] {
  /* Additional styles to ensure clean appearance */
  pointer-events: auto;
}

/* Hide YouTube overlay when iframe is playing */
.br-product-video-youtube:has(iframe) .br-youtube-overlay {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide YouTube overlay and poster when iframe is playing */
.br-product-video-youtube:has(iframe) .br-youtube-overlay {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.br-product-video-youtube:has(iframe) .br-youtube-poster {
  display: none !important;
}

/* Ensure container has no background */
.br-product-video-youtube {
  background: transparent !important;
}

/* Hide overlays on regular images (items without videos) */
.br-product-image-item:not(:has(.br-product-video)):not(:has(.br-product-video-youtube)) .br-product-video-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.br-product-video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: auto;
  /* Hide by default - only show on video items */
  display: none;
}

/* Only show overlay on items that contain videos (not regular images) */
.br-product-image-item:has(.br-product-video) .br-product-video-overlay,
.br-product-image-item:has(.br-product-video-youtube) .br-product-video-overlay {
  display: block;
  opacity: 0.9;
}

/* Hide overlay when video is playing */
.br-product-video-overlay.playing {
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}

.br-product-video-overlay:hover:not(.playing) {
  opacity: 1;
}

.br-video-play-icon {
  width: 60px;
  height: 60px;
}

/* Product Info Section - single column; sticky on product page (overridden above for .br-product-page), relative elsewhere */
.br-product-page .br-product-info {
  position: sticky !important;
  top: 0 !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.br-product-info {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 1rem !important;
  overflow: visible !important;
}

/* Inner wrapper: single column only (backup to inline style; prevents any grid/flex-row override) */
.br-product-info-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  align-items: flex-start;
}

/* RTL Support - Align content to right in Arabic */
html[lang="ar"] .br-product-info-inner,
html[lang="ar-SA"] .br-product-info-inner,
.rtl .br-product-info-inner {
  align-items: flex-end !important;
}
.br-product-info-inner > * {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Accordion item is the flex container; toggle is block so text + arrow sit close */
.br-product-info-inner > .br-product-info-accordion .br-info-item {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
}

.br-product-info-inner > .br-product-info-accordion .br-info-toggle {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* Override display for Arabic/RTL to use flex for proper text/arrow ordering */
html[dir="rtl"] .br-product-info-inner > .br-product-info-accordion .br-info-toggle,
html[lang="ar"] .br-product-info-inner > .br-product-info-accordion .br-info-toggle,
html[lang="ar-SA"] .br-product-info-inner > .br-product-info-accordion .br-info-toggle,
.rtl .br-product-info-inner > .br-product-info-accordion .br-info-toggle {
  display: flex !important;
}

/* Override for arrow - must NOT be 100% width */
.br-product-info-inner > .br-product-info-accordion .br-info-arrow,
.br-product-info .br-product-info-accordion .br-info-arrow,
.br-product-info-accordion .br-info-arrow {
  width: 6px !important;
  max-width: 6px !important;
  flex: 0 0 auto !important;
}

/* RTL Support - Make option blocks full width in Arabic */
html[lang="ar"] .br-product-info-inner > .br-product-variants,
html[lang="ar-SA"] .br-product-info-inner > .br-product-variants,
.rtl .br-product-info-inner > .br-product-variants {
  width: 100% !important;
  max-width: 100% !important;
  align-self: flex-end !important;
}
/* Size options: horizontal row, not column */
.br-product-info-inner .br-product-option-values {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}
/* Send + Wishlist: side by side */
.br-product-info-inner .br-actions-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  width: 100% !important;
}
.br-product-info-inner .br-actions-row .br-notify-btn,
.br-product-info-inner .br-actions-row .br-add-to-wishlist-btn {
  width: auto !important;
  max-width: none !important;
}

/* Force all product info content into one column – nothing beside the main block */
.br-product-info .br-product-header,
.br-product-info .br-product-description,
.br-product-info .br-product-form,
.br-product-info .br-product-size-guide-link,
.br-product-info .br-product-disclaimer,
.br-product-info .br-product-actions,
.br-product-info .br-product-out-of-stock,
.br-product-info .br-product-info-accordion {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  float: none !important;
  clear: both !important;
}

/* Force all children of .br-product-info to stay within bounds - HIGHEST PRIORITY */
.br-product-info > *,
.br-product-info > * > *,
.br-product-info .br-product-form,
.br-product-info .br-product-form > *,
.br-product-info .br-product-form > * > *,
.br-product-info .br-product-size-guide-link,
.br-product-info .br-product-size-guide-link *,
.br-product-info .br-product-disclaimer,
.br-product-info .br-product-disclaimer *,
.br-product-info .br-product-actions,
.br-product-info .br-product-actions *,
.br-product-info .br-product-info-accordion,
.br-product-info .br-product-info-accordion * {
  position: relative !important;
  grid-column: unset !important;
  grid-row: unset !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  translate: none !important;
  width: 100% !important;
}

/* Exception: Arrow should NOT be 100% width */
.br-product-info .br-product-info-accordion .br-info-arrow,
.br-product-info-accordion .br-info-arrow,
.br-info-toggle .br-info-arrow {
  width: 6px !important;
  max-width: 6px !important;
}
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  clear: both !important;
  /* Prevent absolute positioning */
  position: relative !important;
  /* CRITICAL: Ensure flex children don't escape */
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* RTL Support - Keep same layout but align text to right */
/* IMPORTANT: Do NOT use direction: rtl on .br-product-info as it changes DOM behavior */
/* Instead, use text-align: right on individual elements for consistent DOM structure */

/* Ensure grid layout stays the same in RTL (image left, info right) - same as English */
html[lang="ar"] .br-product-wrapper,
html[lang="ar-SA"] .br-product-wrapper,
html[dir="rtl"] .br-product-wrapper,
body[dir="rtl"] .br-product-wrapper,
.rtl .br-product-wrapper,
html[lang="ar"] .br-product-page .container .br-product-wrapper,
html[lang="ar-SA"] .br-product-page .container .br-product-wrapper,
html[dir="rtl"] .br-product-page .container .br-product-wrapper,
body[dir="rtl"] .br-product-page .container .br-product-wrapper,
.rtl .br-product-page .container .br-product-wrapper {
  direction: ltr !important; /* Keep grid direction LTR to maintain layout */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; /* Keep same column order as English */
}

html[lang="ar"] .br-product-gallery,
html[lang="ar-SA"] .br-product-gallery,
html[dir="rtl"] .br-product-gallery,
body[dir="rtl"] .br-product-gallery,
.rtl .br-product-gallery,
html[lang="ar"] .br-product-wrapper > .br-product-gallery,
html[lang="ar-SA"] .br-product-wrapper > .br-product-gallery,
html[dir="rtl"] .br-product-wrapper > .br-product-gallery,
body[dir="rtl"] .br-product-wrapper > .br-product-gallery,
.rtl .br-product-wrapper > .br-product-gallery,
html[lang="ar"] section.br-product-page .br-product-gallery,
html[lang="ar-SA"] section.br-product-page .br-product-gallery,
html[dir="rtl"] section.br-product-page .br-product-gallery,
body[dir="rtl"] section.br-product-page .br-product-gallery,
.rtl section.br-product-page .br-product-gallery {
  grid-column-start: 1 !important; /* Explicitly start at column 1 (left) */
  grid-column-end: 2 !important; /* End at column 2 */
  grid-column: 1 / 2 !important; /* Image stays on left - same as English */
}

html[lang="ar"] .br-product-info,
html[lang="ar-SA"] .br-product-info,
html[dir="rtl"] .br-product-info,
body[dir="rtl"] .br-product-info,
.rtl .br-product-info,
html[lang="ar"] .br-product-wrapper > .br-product-info,
html[lang="ar-SA"] .br-product-wrapper > .br-product-info,
html[dir="rtl"] .br-product-wrapper > .br-product-info,
body[dir="rtl"] .br-product-wrapper > .br-product-info,
.rtl .br-product-wrapper > .br-product-info,
html[lang="ar"] section.br-product-page .br-product-info,
html[lang="ar-SA"] section.br-product-page .br-product-info,
html[dir="rtl"] section.br-product-page .br-product-info,
body[dir="rtl"] section.br-product-page .br-product-info,
.rtl section.br-product-page .br-product-info {
  grid-column-start: 2 !important; /* Explicitly start at column 2 (right) */
  grid-column-end: 3 !important; /* End at column 3 */
  grid-column: 2 / 3 !important; /* Info stays on right - same as English */
  /* NO direction: rtl here - only text-align on child elements */
  direction: ltr !important; /* Force LTR to maintain consistent DOM structure */
}

/* Override: Allow RTL for variant options even when parent is LTR */
html[lang="ar"] .br-product-info .br-product-variants,
html[lang="ar-SA"] .br-product-info .br-product-variants,
html[lang="ar"] .br-product-info .br-product-option,
html[lang="ar-SA"] .br-product-info .br-product-option,
.rtl .br-product-info .br-product-variants,
.rtl .br-product-info .br-product-option,
body[lang="ar"] .br-product-info .br-product-variants,
body[lang="ar"] .br-product-info .br-product-option {
  direction: rtl !important;
}

/* Force RTL for all variant elements in Arabic */
html[lang="ar"] .br-product-info .br-product-variants *,
html[lang="ar-SA"] .br-product-info .br-product-variants *,
.rtl .br-product-info .br-product-variants * {
  direction: inherit;
}

/* Universal RTL detection - check for Arabic text direction or lang attribute anywhere */
[dir="rtl"] .br-product-variants,
[dir="rtl"] .br-product-option,
[lang="ar"] .br-product-variants,
[lang="ar"] .br-product-option {
  direction: rtl !important;
}

/* RTL text alignment for all text elements */
.rtl .br-product-header,
.rtl .br-product-name,
.rtl .br-product-description,
.rtl .br-product-collection,
.rtl .br-product-option-label,
.rtl .br-product-disclaimer,
.rtl .br-product-actions,
.rtl .br-product-info-accordion {
  text-align: right;
}

/* Ensure buttons are visible in both LTR and RTL */
.rtl .br-product-actions,
:not(.rtl) .br-product-actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.rtl .br-product-form,
:not(.rtl) .br-product-form {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.br-product-info::-webkit-scrollbar {
  display: none;
}

/* Ensure form and actions are visible */
.br-product-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  position: relative;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0;
  direction: ltr;
  overflow: visible;
  min-width: 0;
  grid-column: unset;
  /* Single column: variants, size guide, disclaimer, actions (out-of-stock / buttons) stack vertically */
  flex-wrap: nowrap !important;
}

.br-product-form > * {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

.br-product-header {
  display: flex;
  flex-direction: column;
  /* gap: 0.5rem; */
  /* Ensure consistent direction in both languages */
  direction: ltr;
  align-items: flex-start;
}

/* RTL Support - Align header content to the right in Arabic */
html[lang="ar"] .br-product-header,
html[lang="ar-SA"] .br-product-header,
html[dir="rtl"] .br-product-header,
body[dir="rtl"] .br-product-header,
html[lang="ar"] .br-product-info .br-product-header,
html[lang="ar-SA"] .br-product-info .br-product-header,
.rtl .br-product-info .br-product-header {
  align-items: flex-end !important;
  direction: ltr !important;
}

.br-product-name {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--espresso-black, #231010);
  /* margin: 0 0 0.5rem 0; */
  text-align: left;
}

/* RTL Support - Align product name to the right in Arabic */
html[lang="ar"] .br-product-name,
html[lang="ar-SA"] .br-product-name,
html[dir="rtl"] .br-product-name,
body[dir="rtl"] .br-product-name,
html[lang="ar"] .br-product-info .br-product-name,
html[lang="ar-SA"] .br-product-info .br-product-name,
.rtl .br-product-info .br-product-name,
html[lang="ar"] .br-product-header .br-product-name,
html[lang="ar-SA"] .br-product-header .br-product-name,
.rtl .br-product-header .br-product-name {
  text-align: right !important;
  width: 100% !important;
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.br-product-price-wrapper {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  /* margin-bottom: 0.5rem; */
  justify-content: flex-start;
}

/* RTL Support - Align price to the right in Arabic */
html[lang="ar"] .br-product-price-wrapper,
html[lang="ar-SA"] .br-product-price-wrapper,
html[dir="rtl"] .br-product-price-wrapper,
body[dir="rtl"] .br-product-price-wrapper,
html[lang="ar"] .br-product-info .br-product-price-wrapper,
html[lang="ar-SA"] .br-product-info .br-product-price-wrapper,
.rtl .br-product-info .br-product-price-wrapper,
html[lang="ar"] .br-product-header .br-product-price-wrapper,
html[lang="ar-SA"] .br-product-header .br-product-price-wrapper,
.rtl .br-product-header .br-product-price-wrapper {
  justify-content: flex-end !important;
  direction: rtl !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.br-product-price {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--espresso-black, #231010);
  text-align: left;
}

/* RTL Support - Align price text to the right in Arabic */
html[lang="ar"] .br-product-price,
html[lang="ar-SA"] .br-product-price,
html[dir="rtl"] .br-product-price,
body[dir="rtl"] .br-product-price,
html[lang="ar"] .br-product-info .br-product-price,
html[lang="ar-SA"] .br-product-info .br-product-price,
.rtl .br-product-info .br-product-price,
html[lang="ar"] .br-product-price-wrapper .br-product-price,
html[lang="ar-SA"] .br-product-price-wrapper .br-product-price,
.rtl .br-product-price-wrapper .br-product-price {
  text-align: right !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.br-product-price-old {
  font-size: 1.25rem;
  color: var(--mink-taupe, #998273);
  text-decoration: line-through;
}

.br-product-collection {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.75rem;
  color: var(--mink-taupe, #998273);
  text-transform:capitalize !important;
  margin: 1.5rem 0 0.5rem 0;
  text-align: left;
}

/* RTL Support - Align collection to the right in Arabic */
html[lang="ar"] .br-product-collection,
html[lang="ar-SA"] .br-product-collection,
html[dir="rtl"] .br-product-collection,
body[dir="rtl"] .br-product-collection,
html[lang="ar"] .br-product-info .br-product-collection,
html[lang="ar-SA"] .br-product-info .br-product-collection,
.rtl .br-product-info .br-product-collection,
html[lang="ar"] .br-product-header .br-product-collection,
html[lang="ar-SA"] .br-product-header .br-product-collection,
.rtl .br-product-header .br-product-collection {
  text-align: right !important;
  width: 100% !important;
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.br-product-description {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--espresso-black, #231010);
  display: block;
  margin: 0 0 3.5rem 0;
}

.br-product-sku {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.875rem;
  color: var(--mink-taupe, #998273);
}

.br-product-sku-label {
  font-weight: 500;
}

/* Variant Selection */
.br-product-variants {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Ensure consistent direction in both languages */
  direction: ltr;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* RTL Support for Arabic */
html[lang="ar"] .br-product-variants,
html[lang="ar-SA"] .br-product-variants,
html[dir="rtl"] .br-product-variants,
body[dir="rtl"] .br-product-variants,
html[lang="ar"] .br-product-info .br-product-variants,
html[lang="ar-SA"] .br-product-info .br-product-variants,
.rtl .br-product-info .br-product-variants {
  direction: rtl !important;
  align-items: flex-end !important;
  align-content: flex-end !important;
  justify-content: flex-end !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* RTL Support - Align entire option blocks to the right */
html[lang="ar"] .br-product-option,
html[lang="ar-SA"] .br-product-option,
html[dir="rtl"] .br-product-option,
body[dir="rtl"] .br-product-option,
html[lang="ar"] .br-product-info .br-product-option,
html[lang="ar-SA"] .br-product-info .br-product-option,
.rtl .br-product-info .br-product-option {
  align-self: flex-end !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.br-product-option {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6.1rem;
  margin-bottom: 1rem;
  /* Ensure consistent direction in both languages */
  direction: ltr;
}

/* RTL Support for Arabic - Reverse option layout */
html[lang="ar"] .br-product-option:not(.br-product-length):not(.br-product-size),
html[lang="ar-SA"] .br-product-option:not(.br-product-length):not(.br-product-size),
html[dir="rtl"] .br-product-option:not(.br-product-length):not(.br-product-size),
body[dir="rtl"] .br-product-option:not(.br-product-length):not(.br-product-size),
html[lang="ar"] .br-product-info .br-product-option:not(.br-product-length):not(.br-product-size),
html[lang="ar-SA"] .br-product-info .br-product-option:not(.br-product-length):not(.br-product-size),
.rtl .br-product-info .br-product-option:not(.br-product-length):not(.br-product-size) {
  flex-direction: row-reverse !important;
  direction: rtl !important;
}

html[lang="ar"] .br-product-option-label,
html[lang="ar-SA"] .br-product-option-label,
html[dir="rtl"] .br-product-option-label,
body[dir="rtl"] .br-product-option-label,
html[lang="ar"] .br-product-info .br-product-option-label,
html[lang="ar-SA"] .br-product-info .br-product-option-label,
.rtl .br-product-info .br-product-option-label {
  text-align: right !important;
}

/* RTL Support - Align Size label with Color label */
html[lang="ar"] .br-product-option.br-product-size .br-product-option-label-row .br-product-option-label,
html[lang="ar-SA"] .br-product-option.br-product-size .br-product-option-label-row .br-product-option-label,
.rtl .br-product-info .br-product-option.br-product-size .br-product-option-label-row .br-product-option-label {
  min-width: 5rem !important;
  width: 5rem !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  text-align: right !important;
}

html[lang="ar"] .br-product-option-values,
html[lang="ar-SA"] .br-product-option-values,
html[dir="rtl"] .br-product-option-values,
body[dir="rtl"] .br-product-option-values,
html[lang="ar"] .br-product-info .br-product-option-values,
html[lang="ar-SA"] .br-product-info .br-product-option-values,
.rtl .br-product-info .br-product-option-values {
  direction: rtl !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Remove duplicate RTL rules that were added earlier */

/* Use grid for Length and Size options to ensure values align perfectly */
/* Align size values with color swatches: both start at 10.75rem from left */
/* Color: label 5rem + gap 5.75rem = 10.75rem (swatches start) */
/* Size: column1 10rem + gap 0.75rem = 10.75rem (values start) */
.br-product-size-outer {
  display: grid !important;
  grid-template-columns: 10rem 1fr;
  gap: 0.25rem 0.25rem;
  align-items: start;
  width: 100%;
  max-width: 100%;
}

/* Label and "What's my size?" – same spacing as .br-product-option-label-row for consistent widget/label space */
.br-product-size-outer .br-product-size-label-cell {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-width: 0;
  width: max-content !important;
  max-width: 100%;
  margin: 0;
  padding: 0;
  justify-content: flex-end; /* Align content to the right edge of the cell in RTL */
}

/* RTL: Ensure label cell content aligns to the right */
html[lang="ar"] .br-product-size-outer .br-product-size-label-cell,
html[lang="ar-SA"] .br-product-size-outer .br-product-size-label-cell,
html[dir="rtl"] .br-product-size-outer .br-product-size-label-cell,
body[dir="rtl"] .br-product-size-outer .br-product-size-label-cell,
.rtl .br-product-size-outer .br-product-size-label-cell {
  justify-content: flex-end !important; /* Align label to right edge */
}

/* Override global 5rem label width; match line-height so label and widget align centered */
.br-product-size-outer .br-product-size-label-cell .br-product-option-label {
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  min-width: auto !important;
  width: auto !important;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

.br-product-size-outer .br-product-size-label-cell .br-product-size-guide-link {
  margin: 0;
  padding: 0;
}

/* Keep "What's my size?" compact and aligned with "Size" label (no sitting lower) */
.br-product-size-outer .br-product-size-label-cell .br-product-size-guide-link,
.br-product-size-outer .br-product-size-label-cell .br-size-guide-btn {
  flex-shrink: 0;
  flex-grow: 0;
  width: fit-content !important;
  max-width: fit-content !important;
  min-width: auto !important;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1.2;
}
.br-product-size-outer .br-product-size-label-cell .br-size-guide-btn {
  min-height: auto;
}

/* Duplication fix: only one size section. Hide every extra size outer and any standalone Size block. */
.br-product-variants-container .br-product-size-outer ~ .br-product-size-outer {
  display: none !important;
}

/* Hide any .br-product-option.br-product-size that is NOT inside .br-product-size-outer (duplicate/fallback) */
.br-product-variants-container .br-product-option.br-product-size {
  display: none !important;
}
/* Show only the one inside size-outer (the letter row S, M, L, etc.) */
.br-product-variants-container .br-product-size-outer .br-product-option.br-product-size {
  display: block !important;
}

/* Explicitly hide Length block when it renders as duplicate "Size" (data-option-name="length") – anywhere in form/variants */
.br-product-variants .br-product-option.br-product-size[data-option-name="length"],
.br-product-form .br-product-option.br-product-size[data-option-name="length"] {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* When JS has rendered, also hide standalone Size as direct child (backup) */
.br-product-variants-container.br-variants-js-rendered > .br-product-option.br-product-size {
  display: none !important;
}

/* Values column: numeric row then letter row, same left edge */
.br-product-size-outer .br-product-size-values-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

/* Numeric row (52, 53, …) */
.br-product-size-outer .br-product-size-numeric-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important; /* Tighter spacing to match English version */
  margin-left: 0 !important;
}

/* Letter row (S, S/M, M, L, XL) – aligned with numeric row */
.br-product-size-outer .br-product-size-alpha-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important; /* Tighter spacing to match English version */
  margin-left: 0 !important;
}

/* Inner option wrapper (letter row) must not use grid – keep same left edge as numeric row */
.br-product-size-outer .br-product-option.br-product-size {
  display: block !important;
  grid-template-columns: unset !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.br-product-size-outer .br-product-option {
  display: block !important;
  grid-template-columns: unset !important;
  margin-bottom: 0 !important;
}

.br-product-size-outer .br-product-option .br-product-option-values,
.br-product-size-outer .br-product-option .br-product-size-alpha-inline {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  grid-column: unset !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* RTL: label cell on right, values on left – align with color swatches */
html[lang="ar"] .br-product-size-outer,
html[lang="ar-SA"] .br-product-size-outer,
html[dir="rtl"] .br-product-size-outer,
body[dir="rtl"] .br-product-size-outer,
.rtl .br-product-size-outer {
  direction: rtl;
  /* Removed grid-template-columns: 1fr 10rem; - was causing excessive spacing */
  gap: 0.25rem 0.75rem; /* Small gap between label and values */
}

html[lang="ar"] .br-product-size-outer .br-product-size-label-cell,
html[lang="ar-SA"] .br-product-size-outer .br-product-size-label-cell,
html[dir="rtl"] .br-product-size-outer .br-product-size-label-cell,
body[dir="rtl"] .br-product-size-outer .br-product-size-label-cell,
.rtl .br-product-size-outer .br-product-size-label-cell {
  direction: rtl;
  align-items: flex-end;
}

.br-product-option.br-product-length,
.br-product-option.br-product-size {
  display: grid !important;
  grid-template-columns: 10rem 1fr;
  gap: 0.25rem 0.75rem !important;
  align-items: start;
  margin-bottom: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex-direction: unset !important;
  /* Ensure both grids start at same horizontal position */
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* RTL Support for Arabic - Swap grid columns so VALUES are on right, LABEL on left */
html[lang="ar"] .br-product-option.br-product-length,
html[lang="ar"] .br-product-option.br-product-size,
html[lang="ar-SA"] .br-product-option.br-product-length,
html[lang="ar-SA"] .br-product-option.br-product-size,
html[dir="rtl"] .br-product-option.br-product-length,
html[dir="rtl"] .br-product-option.br-product-size,
body[dir="rtl"] .br-product-option.br-product-length,
body[dir="rtl"] .br-product-option.br-product-size,
html[lang="ar"] .br-product-info .br-product-option.br-product-length,
html[lang="ar"] .br-product-info .br-product-option.br-product-size,
html[lang="ar-SA"] .br-product-info .br-product-option.br-product-length,
html[lang="ar-SA"] .br-product-info .br-product-option.br-product-size,
.rtl .br-product-info .br-product-option.br-product-length,
.rtl .br-product-info .br-product-option.br-product-size {
  grid-template-columns: 5rem 1fr !important;
  direction: rtl !important;
  justify-items: start !important;
  align-items: start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0.25rem 5.75rem !important;
}

html[lang="ar"] .br-product-option.br-product-length .br-product-option-label-row,
html[lang="ar"] .br-product-option.br-product-size .br-product-option-label-row,
html[lang="ar-SA"] .br-product-option.br-product-length .br-product-option-label-row,
html[lang="ar-SA"] .br-product-option.br-product-size .br-product-option-label-row,
html[dir="rtl"] .br-product-option.br-product-length .br-product-option-label-row,
html[dir="rtl"] .br-product-option.br-product-size .br-product-option-label-row,
body[dir="rtl"] .br-product-option.br-product-length .br-product-option-label-row,
body[dir="rtl"] .br-product-option.br-product-size .br-product-option-label-row,
html[lang="ar"] .br-product-info .br-product-option.br-product-length .br-product-option-label-row,
html[lang="ar"] .br-product-info .br-product-option.br-product-size .br-product-option-label-row,
html[lang="ar-SA"] .br-product-info .br-product-option.br-product-length .br-product-option-label-row,
html[lang="ar-SA"] .br-product-info .br-product-option.br-product-size .br-product-option-label-row,
.rtl .br-product-info .br-product-option.br-product-length .br-product-option-label-row,
.rtl .br-product-info .br-product-option.br-product-size .br-product-option-label-row {
  grid-column: 1 !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  direction: rtl !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[lang="ar"] .br-product-option.br-product-length .br-product-option-values,
html[lang="ar"] .br-product-option.br-product-size .br-product-option-values,
html[lang="ar-SA"] .br-product-option.br-product-length .br-product-option-values,
html[lang="ar-SA"] .br-product-option.br-product-size .br-product-option-values,
html[dir="rtl"] .br-product-option.br-product-length .br-product-option-values,
html[dir="rtl"] .br-product-option.br-product-size .br-product-option-values,
body[dir="rtl"] .br-product-option.br-product-length .br-product-option-values,
body[dir="rtl"] .br-product-option.br-product-size .br-product-option-values,
html[lang="ar"] .br-product-info .br-product-option.br-product-length .br-product-option-values,
html[lang="ar"] .br-product-info .br-product-option.br-product-size .br-product-option-values,
html[lang="ar-SA"] .br-product-info .br-product-option.br-product-length .br-product-option-values,
html[lang="ar-SA"] .br-product-info .br-product-option.br-product-size .br-product-option-values,
.rtl .br-product-info .br-product-option.br-product-length .br-product-option-values,
.rtl .br-product-info .br-product-option.br-product-size .br-product-option-values {
  grid-column: 2 !important;
  direction: rtl !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* Ensure both label rows fill the first column width for perfect alignment */
.br-product-option.br-product-length .br-product-option-label-row,
.br-product-option.br-product-size .br-product-option-label-row {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0 !important;
  margin-right: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem 0.75rem;
  flex-wrap: nowrap;
  box-sizing: border-box;
  /* Ensure flex items don't shrink below content size */
  flex-shrink: 0;
}

/* Ensure transparent Size label takes up space for alignment */
.br-product-option.br-product-size .br-product-option-label-row .br-product-option-label.br-product-option-label-hidden {
  flex: 0 0 auto;
  min-width: 5rem;
  width: auto;
}

.br-product-option.br-product-length .br-product-option-values,
.br-product-option.br-product-size .br-product-option-values {
  grid-column: 2;
  grid-row: 1;
  margin-left: 0 !important;
  padding-left: 0 !important;
  align-self: start;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  direction: ltr;
}

/* Minimize space between Length and Size options */
.br-product-option.br-product-length {
  margin-bottom: -1.1rem;
}

/* Ensure Size option aligns with Length option values */
.br-product-option.br-product-size {
  margin-top: 0;
  margin-bottom: 0;
}

.br-product-option.br-product-colors {
  gap: 0;
}

.br-product-option-label {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.025rem;
  font-weight: 400;
  color: var(--espresso-black, #231010);
  line-height: 1.2;
  flex-shrink: 0;
  margin: 0;
  min-width: 5rem;
  width: 5rem;
}

.br-product-option-label-row .br-product-option-label {
  margin: 0;
  min-width: auto;
  width: auto;
  flex-shrink: 0;
}

/* Ensure Size option label row matches Length option label row structure for alignment */
/* When Size label is transparent (Length already showed it), match the width of Length label row */
/* Size label row is already handled by grid layout above */

.br-color-label {
  text-transform: none !important;
  margin: 0 !important;
  min-width: 5rem;
  width: 5rem;
}

/* Row: Size label + "What's my size?" on same line */
.br-product-option-label-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
  width: fit-content;
  max-width: 100%;
  direction: ltr;
}

/* RTL Support for Arabic - Reverse label row order */
html[lang="ar"] .br-product-option-label-row,
html[lang="ar-SA"] .br-product-option-label-row,
html[dir="rtl"] .br-product-option-label-row,
body[dir="rtl"] .br-product-option-label-row,
html[lang="ar"] .br-product-info .br-product-option-label-row,
html[lang="ar-SA"] .br-product-info .br-product-option-label-row,
.rtl .br-product-info .br-product-option-label-row {
  flex-direction: row-reverse !important;
  direction: rtl !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* RTL Support - Swap widget and label order in Arabic */
/* In RTL with flex-direction: row-reverse, order: 1 = RIGHT, order: 2 = LEFT */
/* We want: Widget on RIGHT (order: 1), Label on LEFT (order: 2) */
html[lang="ar"] .br-product-option-label-row .br-product-option-label,
html[lang="ar-SA"] .br-product-option-label-row .br-product-option-label,
html[dir="rtl"] .br-product-option-label-row .br-product-option-label,
body[dir="rtl"] .br-product-option-label-row .br-product-option-label,
html[lang="ar"] .br-product-info .br-product-option-label-row .br-product-option-label,
html[lang="ar-SA"] .br-product-info .br-product-option-label-row .br-product-option-label,
.rtl .br-product-info .br-product-option-label-row .br-product-option-label {
  order: 2 !important;
}

html[lang="ar"] .br-product-option-label-row .br-size-guide-btn,
html[lang="ar-SA"] .br-product-option-label-row .br-size-guide-btn,
html[dir="rtl"] .br-product-option-label-row .br-size-guide-btn,
body[dir="rtl"] .br-product-option-label-row .br-size-guide-btn,
html[lang="ar"] .br-product-info .br-product-option-label-row .br-size-guide-btn,
html[lang="ar-SA"] .br-product-info .br-product-option-label-row .br-size-guide-btn,
.rtl .br-product-info .br-product-option-label-row .br-size-guide-btn,
html[lang="ar"] .br-product-option-label-row .br-product-size-guide-link,
html[lang="ar-SA"] .br-product-option-label-row .br-product-size-guide-link,
html[dir="rtl"] .br-product-option-label-row .br-product-size-guide-link,
body[dir="rtl"] .br-product-option-label-row .br-product-size-guide-link,
html[lang="ar"] .br-product-info .br-product-option-label-row .br-product-size-guide-link,
html[lang="ar-SA"] .br-product-info .br-product-option-label-row .br-product-size-guide-link,
.rtl .br-product-info .br-product-option-label-row .br-product-size-guide-link {
  order: 1 !important;
}

/* Override all width rules for size guide link when inside label row - HIGHEST PRIORITY */
.br-product-option-label-row .br-product-size-guide-link,
.br-product-info .br-product-option-label-row .br-product-size-guide-link,
.br-product-form .br-product-option-label-row .br-product-size-guide-link,
.br-product-variants .br-product-option-label-row .br-product-size-guide-link {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: fit-content !important;
  max-width: fit-content !important;
  min-width: auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  align-self: auto !important;
  display: inline-block !important;
  flex: none !important;
  float: none !important;
  clear: none !important;
}

.br-product-option-label-row .br-product-size-guide-link .br-size-guide-btn,
.br-product-info .br-product-option-label-row .br-product-size-guide-link .br-size-guide-btn,
.br-product-form .br-product-option-label-row .br-product-size-guide-link .br-size-guide-btn {
  width: fit-content !important;
  max-width: fit-content !important;
  min-width: auto !important;
}

/* Make Size option label transparent (not hidden) when Length already showed "Size" + size guide */
/* This preserves layout structure for alignment while making text invisible */
.br-product-option-label-hidden {
  /* Transparent label to preserve layout space for alignment */
  color: transparent !important;
  opacity: 1 !important;
  pointer-events: none;
  visibility: visible !important;
  /* Ensure it takes the same space as a visible label for proper alignment */
  min-width: 5rem;
  width: 5rem;
}

/* When Size option is the only size block, show its label normally */
.br-product-option.br-product-size .br-product-option-label:not(.br-product-option-label-hidden) {
  color: var(--espresso-black, #231010);
  opacity: 1;
}

/* CRITICAL OVERRIDE: Size guide link in label row must be fit-content - override all width: 100% rules */
.br-product-option-label-row .br-product-size-guide-link,
.br-product-info .br-product-option-label-row .br-product-size-guide-link,
.br-product-form .br-product-option-label-row .br-product-size-guide-link,
.br-product-variants .br-product-option-label-row .br-product-size-guide-link,
.br-product-info .br-product-form .br-product-option-label-row .br-product-size-guide-link {
  width: fit-content !important;
  max-width: fit-content !important;
  min-width: auto !important;
  flex: none !important;
  display: inline-block !important;
}

.br-product-option-label-row .br-size-guide-btn,
.br-product-info .br-product-option-label-row .br-size-guide-btn,
.br-product-form .br-product-option-label-row .br-size-guide-btn,
.br-product-variants .br-product-option-label-row .br-size-guide-btn,
.br-product-info .br-product-form .br-product-option-label-row .br-size-guide-btn {
  width: fit-content !important;
  max-width: fit-content !important;
  min-width: auto !important;
}

/* Size/option values in a row (like second screenshot), not a column */
.br-product-option-values {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  align-items: center !important;
  direction: ltr;
}

/* RTL Support - Reverse values direction for Arabic */
html[lang="ar"] .br-product-option-values,
html[lang="ar-SA"] .br-product-option-values,
html[dir="rtl"] .br-product-option-values,
body[dir="rtl"] .br-product-option-values,
html[lang="ar"] .br-product-info .br-product-option-values,
html[lang="ar-SA"] .br-product-info .br-product-option-values,
.rtl .br-product-info .br-product-option-values {
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Grid layout already set above - this rule is overridden by grid */

.br-product-option-value {
  font-family: 'Aileron', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--stone-beige, #D2C8BC);
  color: var(--espresso-black, #231010);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: none;
}

/* All option values: underline on hover (not border change) */
.br-product-option-value:hover:not(.out-of-stock) {
  background: transparent;
  border-color: var(--stone-beige, #D2C8BC);
  color: var(--espresso-black, #231010);
  text-decoration: underline;
  text-decoration-color: var(--espresso-black, #231010);
  text-underline-offset: 11.5%;
}

/* Selected options: stay underlined */
.br-product-option-value.selected:not(.out-of-stock) {
  background: transparent;
  border-color: var(--stone-beige, #D2C8BC);
  color: var(--espresso-black, #231010);
  text-decoration: underline;
  text-decoration-color: var(--espresso-black, #231010);
  text-underline-offset: 11.5%;
}

/* Out of stock options: taupe color with strikethrough */
.br-product-option-value.out-of-stock {
  color: var(--mink-taupe, #998273);
  text-decoration: line-through;
  text-decoration-color: var(--mink-taupe, #998273);
  cursor: not-allowed;
  opacity: 0.7;
}

.br-product-option-value.out-of-stock:hover {
  text-decoration: line-through;
  text-decoration-color: var(--mink-taupe, #998273);
  background: transparent;
  border-color: var(--stone-beige, #D2C8BC);
}

/* Size/Length variants: plum color, underline on selected/hover, out-of-stock = plum + underline (like disclaimer) */
.br-product-option-value.br-size-value {
  color: var(--PLUM, #2F191E);
  text-decoration: none;
  text-decoration-color: var(--PLUM, #2F191E);
}
.br-product-option-value.br-size-value:hover:not(.out-of-stock) {
  color: var(--PLUM, #2F191E);
  text-decoration: underline;
  text-decoration-color: var(--PLUM, #2F191E);
  text-underline-offset: 0.15em;
}
.br-product-option-value.br-size-value.selected:not(.out-of-stock) {
  color: var(--PLUM, #2F191E);
  text-decoration: underline;
  text-decoration-color: var(--PLUM, #2F191E);
  text-underline-offset: 0.15em;
}
/* Out-of-stock size/length: light gray + strikethrough (per screenshot) */
.br-product-option-value.br-size-value.out-of-stock {
  color: var(--mink-taupe, #998273);
  text-decoration: line-through;
  text-decoration-color: var(--mink-taupe, #998273);
  cursor: not-allowed;
  opacity: 0.85;
}
.br-product-option-value.br-size-value.out-of-stock:hover {
  color: var(--mink-taupe, #998273);
  text-decoration: line-through;
  text-decoration-color: var(--mink-taupe, #998273);
  background: transparent;
  border-color: var(--stone-beige, #D2C8BC);
}

/* Color Option - Label and swatches in one line */
.br-color-option-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5.75rem;
  direction: ltr;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
}

/* RTL Support for Arabic - Reverse color option layout */
html[lang="ar"] .br-color-option-wrapper,
html[lang="ar-SA"] .br-color-option-wrapper,
html[dir="rtl"] .br-color-option-wrapper,
body[dir="rtl"] .br-color-option-wrapper,
html[lang="ar"] .br-product-info .br-color-option-wrapper,
html[lang="ar-SA"] .br-product-info .br-color-option-wrapper,
.rtl .br-product-info .br-color-option-wrapper {
  flex-direction: row-reverse !important;
  direction: rtl !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 5.75rem !important;
}

html[lang="ar"] .br-color-label,
html[lang="ar-SA"] .br-color-label,
html[dir="rtl"] .br-color-label,
body[dir="rtl"] .br-color-label,
html[lang="ar"] .br-product-info .br-color-label,
html[lang="ar-SA"] .br-product-info .br-color-label,
.rtl .br-product-info .br-color-label {
  order: 2 !important;
  text-align: right !important;
  min-width: 5rem !important;
  width: 5rem !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

html[lang="ar"] .br-color-values,
html[lang="ar-SA"] .br-color-values,
html[dir="rtl"] .br-color-values,
body[dir="rtl"] .br-color-values,
html[lang="ar"] .br-product-info .br-color-values,
html[lang="ar-SA"] .br-product-info .br-color-values,
.rtl .br-product-info .br-color-values {
  order: 1 !important;
  direction: rtl !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.br-color-label {
  margin: 0 !important;
  min-width: fit-content;
  white-space: nowrap;
}

/* Color Swatches - Smaller circular swatches */
.br-color-values {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  direction: ltr;
}

.br-color-value {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: none;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* Fill lives on the inner span (JS sets background-color); avoid inherit — broken after clone / iOS button paint */
.br-color-value .br-color-swatch {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  border: none;
  pointer-events: none; /* Allow clicks to pass through to button */
  background-color: transparent;
}

.br-color-value .br-color-name {
  display: none; /* Hide color name - only show swatch */
}

.br-product-option-value.br-color-value.selected {
  border: 1.5px solid var(--espresso-black, #231010) !important;
}

.br-color-value:hover {
  transform: scale(1.1);
}

/* Size Guide Link */
.br-product-size-guide-link {
  margin-top: 0.25rem;
  margin-bottom: 0;
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  /* Ensure it stays in the right column */
  grid-column: unset;
  left: auto;
  right: auto;
}

.br-size-guide-btn {
  font-size: 0.70rem;
  color: var(--light-blue, #CAE8F9);
  text-decoration: none;
  background: var(--mink-taupe, #998273);
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  padding: 0.275rem 0.75rem;
  transition: opacity 0.3s ease, background-color 0.2s ease;
  white-space: nowrap;
  display: inline-block;
  width: fit-content;
  min-width: auto;
  max-width: none;
  line-height: 1.4;
}

/* Font: Aileron for English, The Year of the Camel for Arabic */
html[lang="en"] .br-size-guide-btn,
html[lang="en-US"] .br-size-guide-btn,
html[lang="en-GB"] .br-size-guide-btn {
  font-family: 'Aileron', sans-serif;
}

html[lang="ar"] .br-size-guide-btn,
html[lang="ar-SA"] .br-size-guide-btn {
  font-family: 'The Year of the Camel', sans-serif;
}

.br-size-guide-btn:hover {
  opacity: 0.85;
  background-color: rgba(153, 130, 115, 0.9);
}

/* Size Chart Overlay – same as accordion: transparent root, "lights off" moves with sliding strip */
/* Keep display: flex so close animation (opacity + slide) can run when .active is removed */
.br-size-chart-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
  box-sizing: border-box !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Open: overlay appears almost instantly so the slide does the work */
.br-size-chart-overlay.active {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transition-duration: 0.12s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Blur + panel slide in as one strip – same feel as accordion overlay */
.br-size-chart-container {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  background: linear-gradient(to right, rgba(210, 200, 188, 0.2) 0%, rgba(210, 200, 188, 0.2) 48%, var(--stone-beige, #D2C8BC) 48%);
}

.br-size-chart-overlay.active .br-size-chart-container {
  transform: translate3d(0, 0, 0);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

html[lang="ar"] .br-size-chart-container,
html[lang="ar-SA"] .br-size-chart-container,
html[dir="rtl"] .br-size-chart-container,
body[dir="rtl"] .br-size-chart-container {
  transform: translate3d(100%, 0, 0) !important;
}

html[lang="ar"] .br-size-chart-overlay.active .br-size-chart-container,
html[lang="ar-SA"] .br-size-chart-overlay.active .br-size-chart-container,
html[dir="rtl"] .br-size-chart-overlay.active .br-size-chart-container,
body[dir="rtl"] .br-size-chart-overlay.active .br-size-chart-container {
  transform: translate3d(0, 0, 0) !important;
}

html[lang="ar"] .br-size-chart-overlay,
html[lang="ar-SA"] .br-size-chart-overlay,
html[dir="rtl"] .br-size-chart-overlay,
body[dir="rtl"] .br-size-chart-overlay {
  background: transparent !important;
}

/* Keep overlay background blur same in Arabic */
html[lang="ar"] .br-size-chart-overlay-bg,
html[lang="ar-SA"] .br-size-chart-overlay-bg,
html[dir="rtl"] .br-size-chart-overlay-bg,
body[dir="rtl"] .br-size-chart-overlay-bg {
  background: rgba(210, 200, 188, 0.2) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Keep content grid order same in Arabic - don't flip, panel stays on right */
html[lang="ar"] .br-size-chart-content,
html[lang="ar-SA"] .br-size-chart-content,
html[dir="rtl"] .br-size-chart-content,
body[dir="rtl"] .br-size-chart-content {
  grid-template-columns: 48% 52% !important;
  direction: ltr !important;
}

/* Keep panel on right side in Arabic */
html[lang="ar"] .br-size-chart-info,
html[lang="ar-SA"] .br-size-chart-info,
html[dir="rtl"] .br-size-chart-info,
body[dir="rtl"] .br-size-chart-info {
  grid-column: 2 !important;
  direction: rtl !important;
}

html[lang="ar"] .br-size-chart-overlay-bg,
html[lang="ar-SA"] .br-size-chart-overlay-bg,
html[dir="rtl"] .br-size-chart-overlay-bg,
body[dir="rtl"] .br-size-chart-overlay-bg {
  grid-column: 1 !important;
}

.br-size-chart-content {
  display: grid;
  grid-template-columns: 48% 52%;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Left half: Figma spec - Background blur 8px, Fill #90674D 20% */
.br-size-chart-overlay-bg {
  background: rgba(210, 200, 188, 0.2);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(8px);
  min-height: 0;
}

/* Right panel: size chart data - same beige bg, scrollable */
.br-size-chart-info {
  background: var(--stone-beige, #D2C8BC);
  padding: 2rem 3rem 3rem;
  display: grid;
  grid-template-columns: 1fr 4.5rem;
  gap: 1.25rem 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.br-size-chart-info-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--stone-beige, #D2C8BC);
  padding-bottom: 0.25rem;
  margin-bottom: -0.25rem;
}

/* Accordion Overlay – transparent so only the sliding strip (blur + panel) is visible */
/* Keep display: flex so close animation (opacity + slide) can run when .active is removed */
.br-accordion-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
  box-sizing: border-box !important;
  opacity: 0;
  pointer-events: none;
  /* Slow fade on close so "lights on" feels part of panel leaving */
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Open: overlay appears almost instantly so the slide does the work – "lights off" moves with the panel */
.br-accordion-overlay.active {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transition-duration: 0.12s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Panel slide: blur + panel slide in as one strip – "lights off" is the left part of this sliding block */
.br-accordion-container {
  width: 100%;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden;
  position: relative;
  display: flex;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  /* Blur + panel in one block so dimming moves with the slide; solid edge avoids white strip */
  background: linear-gradient(to right, rgba(210, 200, 188, 0.2) 0%, rgba(210, 200, 188, 0.2) 70%, var(--stone-beige, #D2C8BC) 70%);
}

.br-accordion-overlay.active .br-accordion-container {
  transform: translate3d(0, 0, 0);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Keep accordion overlay opening from right in Arabic - same as English */
html[lang="ar"] .br-accordion-container,
html[lang="ar-SA"] .br-accordion-container,
html[dir="rtl"] .br-accordion-container,
body[dir="rtl"] .br-accordion-container {
  transform: translate3d(100%, 0, 0) !important; /* Slide in from right - same as English */
  background: linear-gradient(to right, rgba(210, 200, 188, 0.2) 0%, rgba(210, 200, 188, 0.2) 70%, var(--stone-beige, #D2C8BC) 70%) !important; /* Same gradient as English */
}

html[lang="ar"] .br-accordion-overlay.active .br-accordion-container,
html[lang="ar-SA"] .br-accordion-overlay.active .br-accordion-container,
html[dir="rtl"] .br-accordion-overlay.active .br-accordion-container,
body[dir="rtl"] .br-accordion-overlay.active .br-accordion-container {
  transform: translate3d(0, 0, 0) !important; /* Slide to center - same as English */
}

/* Overlay layout grid (left bg + right panel) – do not confuse with .br-accordion-item .br-accordion-content */
.br-accordion-container > .br-accordion-content {
  display: grid;
  grid-template-columns: 70% 30%;
  width: 100%;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden;
}

.br-accordion-overlay-bg {
  background: rgba(210, 200, 188, 0.2);
  backdrop-filter: blur(3px);
  /* -webkit-backdrop-filter: blur(8px); */
  min-height: 0;
}

.br-accordion-info {
  background: var(--stone-beige, #D2C8BC);
  padding: 2rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh !important;
  height: 100vh !important;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
}

.br-accordion-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--stone-beige, #D2C8BC);
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--espresso-black, #231010);
}

.br-accordion-title {
  font-family: 'Aileron', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0;
  color: var(--espresso-black, #231010);
}

.br-accordion-close {
  background: transparent;
  border: none;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.875rem;
  color: var(--espresso-black, #231010);
  cursor: pointer;
  padding: 0.5rem 0.25rem 0.5rem 0.5rem;
  text-decoration: underline;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
  min-width: 3rem;
  opacity: 1;
  visibility: visible;
}

.br-accordion-close:hover {
  opacity: 0.7;
}

.br-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  flex: 0 0 auto !important;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 0;
  max-height: none;
  height: auto !important;
  width: 100%;
  background: var(--stone-beige, #D2C8BC);
}

.br-accordion-item {
  border-bottom: 1px solid var(--espresso-black, #231010);
  flex: 0 0 auto !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  height: auto !important;
  width: 100%;
  align-self: flex-start;
}

.br-accordion-item:last-child {
  border-bottom: none;
}

.br-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.25rem 0.5rem 0;
  background: none;
  border: none;
  text-align: left;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.025rem;
  color: var(--espresso-black, #231010);
  cursor: pointer;
  gap: 0;
  flex: 0 0 auto;
  flex-shrink: 0;
}

.br-accordion-toggle:hover {
  opacity: 0.7;
}

/* SVG arrow - direct child of button, like Filippa K */
.br-accordion-toggle .br-accordion-arrow {
  flex: 0 0 auto;
  margin-left: 0.4rem;
  display: block;
  pointer-events: none;
  transition: transform 0.2s;
  order: 2;
}

/* Arrow SVG styling - direct child of button */
.br-accordion-toggle .br-accordion-arrow {
  transition: transform 0.2s;
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  display: block;
  pointer-events: none;
  margin-left: 0.4rem;
}

.br-accordion-item.active .br-accordion-toggle .br-accordion-arrow {
  transform: rotate(90deg);
}

/* Ensure active accordion items don't stretch - only expand to fit content */
.br-accordion-item.active {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Accordion content – smooth open/close, no black glimpse */
.br-accordion-item .br-accordion-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.33, 1, 0.68, 1),
              opacity 0.35s cubic-bezier(0.33, 1, 0.68, 1);
  font-family: 'Aileron', sans-serif;
  font-size: 0.75rem;
  color: var(--espresso-black, #231010);
  line-height: 1.6;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 100%;
  box-sizing: border-box;
  background: var(--stone-beige, #D2C8BC);
}

/* Use "The Year of the Camel" font for accordion content in Arabic */
html[lang="ar"] .br-accordion-item .br-accordion-content,
html[lang="ar-SA"] .br-accordion-item .br-accordion-content,
html[dir="rtl"] .br-accordion-item .br-accordion-content,
body[dir="rtl"] .br-accordion-item .br-accordion-content,
html[lang="ar"] .br-accordion-info .br-accordion-item .br-accordion-content,
html[lang="ar-SA"] .br-accordion-info .br-accordion-item .br-accordion-content,
html[dir="rtl"] .br-accordion-info .br-accordion-item .br-accordion-content,
body[dir="rtl"] .br-accordion-info .br-accordion-item .br-accordion-content {
  font-family: 'The Year of the Camel', sans-serif !important;
}

.br-accordion-item.active .br-accordion-content {
  max-height: 1200px;
  opacity: 1;
  transition: max-height 0.5s cubic-bezier(0.33, 1, 0.68, 1),
              opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  padding: 0.5rem 0 1rem 0;
}

.br-accordion-item .br-accordion-content p {
  margin: 0 0 1rem 0;
}

.br-accordion-item .br-accordion-content p:last-child {
  margin-bottom: 0;
}

/* Ensure all child elements in accordion content use "The Year of the Camel" font in Arabic */
html[lang="ar"] .br-accordion-item .br-accordion-content *,
html[lang="ar-SA"] .br-accordion-item .br-accordion-content *,
html[dir="rtl"] .br-accordion-item .br-accordion-content *,
body[dir="rtl"] .br-accordion-item .br-accordion-content *,
html[lang="ar"] .br-accordion-info .br-accordion-item .br-accordion-content *,
html[lang="ar-SA"] .br-accordion-info .br-accordion-item .br-accordion-content *,
html[dir="rtl"] .br-accordion-info .br-accordion-item .br-accordion-content *,
body[dir="rtl"] .br-accordion-info .br-accordion-item .br-accordion-content * {
  font-family: 'The Year of the Camel', sans-serif !important;
}

/* RTL support for accordion overlay */
html[lang="ar"] .br-accordion-overlay,
html[lang="ar-SA"] .br-accordion-overlay,
html[dir="rtl"] .br-accordion-overlay,
body[dir="rtl"] .br-accordion-overlay {
  background: transparent !important;
}

html[lang="ar"] .br-accordion-overlay-bg,
html[lang="ar-SA"] .br-accordion-overlay-bg,
html[dir="rtl"] .br-accordion-overlay-bg,
body[dir="rtl"] .br-accordion-overlay-bg {
  background: rgba(210, 200, 188, 0.2) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Keep accordion overlay grid layout same as English - blur left, panel right */
html[lang="ar"] .br-accordion-container > .br-accordion-content,
html[lang="ar-SA"] .br-accordion-container > .br-accordion-content,
html[dir="rtl"] .br-accordion-container > .br-accordion-content,
body[dir="rtl"] .br-accordion-container > .br-accordion-content {
  grid-template-columns: 70% 30% !important; /* Same as English - blur 70%, panel 30% */
  direction: ltr !important;
}

html[lang="ar"] .br-accordion-info,
html[lang="ar-SA"] .br-accordion-info,
html[dir="rtl"] .br-accordion-info,
body[dir="rtl"] .br-accordion-info {
  grid-column: 2 !important; /* Panel stays on right - same as English */
  direction: rtl !important; /* RTL for text content inside panel */
}

html[lang="ar"] .br-accordion-overlay-bg,
html[lang="ar-SA"] .br-accordion-overlay-bg,
html[dir="rtl"] .br-accordion-overlay-bg,
body[dir="rtl"] .br-accordion-overlay-bg {
  grid-column: 1 !important; /* Blur background stays on left - same as English */
}

/* Flip arrows horizontally in overlay for Arabic/RTL */
html[lang="ar"] .br-accordion-toggle .br-accordion-arrow,
html[lang="ar-SA"] .br-accordion-toggle .br-accordion-arrow,
html[dir="rtl"] .br-accordion-toggle .br-accordion-arrow,
body[dir="rtl"] .br-accordion-toggle .br-accordion-arrow,
html[lang="ar"] .br-accordion-info .br-accordion-toggle .br-accordion-arrow,
html[lang="ar-SA"] .br-accordion-info .br-accordion-toggle .br-accordion-arrow,
html[dir="rtl"] .br-accordion-info .br-accordion-toggle .br-accordion-arrow,
body[dir="rtl"] .br-accordion-info .br-accordion-toggle .br-accordion-arrow {
  transform: scaleX(-1) !important;
}

/* When active, combine scaleX(-1) with rotate(90deg) */
html[lang="ar"] .br-accordion-item.active .br-accordion-toggle .br-accordion-arrow,
html[lang="ar-SA"] .br-accordion-item.active .br-accordion-toggle .br-accordion-arrow,
html[dir="rtl"] .br-accordion-item.active .br-accordion-toggle .br-accordion-arrow,
body[dir="rtl"] .br-accordion-item.active .br-accordion-toggle .br-accordion-arrow,
html[lang="ar"] .br-accordion-info .br-accordion-item.active .br-accordion-toggle .br-accordion-arrow,
html[lang="ar-SA"] .br-accordion-info .br-accordion-item.active .br-accordion-toggle .br-accordion-arrow,
html[dir="rtl"] .br-accordion-info .br-accordion-item.active .br-accordion-toggle .br-accordion-arrow,
body[dir="rtl"] .br-accordion-info .br-accordion-item.active .br-accordion-toggle .br-accordion-arrow {
  transform: scaleX(-1) rotate(90deg) !important;
}

/* Mobile styles for accordion overlay */
@media (max-width: 768px) {
  .br-accordion-overlay {
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
  }

  .br-accordion-container {
    max-width: 100%;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .br-accordion-container > .br-accordion-content {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }

  html[lang="ar"] .br-accordion-container > .br-accordion-content,
  html[lang="ar-SA"] .br-accordion-container > .br-accordion-content,
  html[dir="rtl"] .br-accordion-container > .br-accordion-content,
  body[dir="rtl"] .br-accordion-container > .br-accordion-content {
    grid-template-columns: 1fr !important;
  }

  .br-accordion-overlay-bg {
    display: none;
  }

  .br-accordion-info {
    width: 100%;
    min-width: 0;
    padding: 1.25rem 1rem 2rem;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  html[lang="ar"] .br-accordion-info,
  html[lang="ar-SA"] .br-accordion-info,
  html[dir="rtl"] .br-accordion-info,
  body[dir="rtl"] .br-accordion-info {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .br-accordion-title {
    font-size: 1.25rem;
  }
}

.br-size-chart-close {
  background: transparent;
  border: none;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.875rem;
  color: var(--espresso-black, #231010);
  cursor: pointer;
  padding: 0.5rem 0.25rem 0.5rem 0.5rem;
  text-decoration: underline;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
  min-width: 3rem;
  opacity: 1;
  visibility: visible;
}

.br-size-chart-close:hover {
  opacity: 0.7;
}

.br-size-chart-title {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: var(--espresso-black, #231010);
  margin: 0;
}

/* Intro block: instructions + disclaimer; column 1 only so text ends at Close button */
.br-size-chart-intro {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.br-size-chart-instructions,
.br-size-chart-disclaimer {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.025rem;
  /* font-size: 0.875rem; */
  color: var(--espresso-black, #231010);
  line-height: 1.6;
  margin: 0;
}

/* Data block: measurements, length, table – full width */
.br-size-chart-data {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 4.5rem;
}

/* Measurements: CM / Inch - active underlined (Figma) */
.br-size-chart-units {
  display: flex;
  align-items: center;
  gap: 0.25rem 0.5rem;
  flex-wrap: wrap;
}

.br-size-chart-units-label {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.025rem;
  color: var(--espresso-black, #231010);
  margin-right: 0.25rem;
}

.br-size-chart-units-sep {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.025rem;
  color: var(--mink-taupe, #998273);
}

/* Measurement unit: active = dark + underline, inactive = mink, no underline */
.br-unit-btn {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.025rem;
  padding: 0.25rem 0;
  background: transparent;
  border: none;
  color: var(--mink-taupe, #998273);
  cursor: pointer;
  transition: color 0.2s ease, text-decoration 0.2s ease;
  text-decoration: none;
}

.br-unit-btn.active {
  color: var(--espresso-black, #231010);
  text-decoration: underline;
}

.br-unit-btn:hover:not(.active) {
  color: var(--espresso-black, #231010);
  opacity: 0.85;
}

/* Length row: label and values on same line, closer to Measurements */
.br-size-chart-length-selector {
  margin-top: 0.375rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.br-size-chart-label {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.025rem;
  color: var(--espresso-black, #231010);
  display: inline;
  margin: 0;
  margin-right: 0.25rem;
}

.br-size-chart-length-options {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Length options: active = dark + underline, inactive = mink, no underline */
.br-size-chart-length-option {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.025rem;
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: none;
  color: var(--mink-taupe, #998273);
  cursor: pointer;
  transition: color 0.2s ease, text-decoration 0.2s ease;
  font-weight: 400;
  text-decoration: none;
}

.br-size-chart-length-option.active {
  color: var(--espresso-black, #231010);
  text-decoration: underline;
}

.br-size-chart-length-option:hover:not(.active) {
  color: var(--espresso-black, #231010);
  opacity: 0.85;
}

.br-size-chart-table-wrapper {
  margin-top: 1.5rem;
  overflow-x: auto;
}

.br-size-chart-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.025rem;
}

/* Subtle text transition when measurements/table update (luxury fade-in) */
.br-size-chart-table tbody {
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.br-size-chart-table tbody.br-size-chart-table-updating {
  opacity: 0;
  transition: none;
}

.br-size-chart-table thead {
  background: transparent;
}

/* Grid lines: mink taupe, thin (style lines like Figma) */
.br-size-chart-table th,
.br-size-chart-table td {
  padding: 1rem;
  text-align: left;
  font-weight: 500;
  color: var(--espresso-black, #231010);
  border: 0.5px solid var(--mink-taupe, #998273);
}

.br-size-chart-table td {
  font-weight: 400;
}

.br-size-chart-table tbody tr:hover {
  background: rgba(35, 16, 16, 0.05);
}

/* Mobile: full-viewport overlay, single column, scrollable length row + table */
@media (max-width: 768px) {
  .br-size-chart-overlay {
    min-height: 100dvh;
  }

  .br-size-chart-container {
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    background: var(--stone-beige, #D2C8BC);
  }

  .br-size-chart-content {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    min-height: 0;
  }

  .br-size-chart-overlay-bg {
    display: none;
  }

  .br-size-chart-info {
    width: 100%;
    min-width: 0;
    padding: 1.25rem 1rem 2rem;
    grid-column: 1;
    -webkit-overflow-scrolling: touch;
  }

  /* RTL desktop uses grid-column: 2 !important — force full-width column on small screens */
  html[lang="ar"] .br-size-chart-info,
  html[lang="ar-SA"] .br-size-chart-info,
  html[dir="rtl"] .br-size-chart-info,
  body[dir="rtl"] .br-size-chart-info {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html[lang="ar"] .br-size-chart-content,
  html[lang="ar-SA"] .br-size-chart-content,
  html[dir="rtl"] .br-size-chart-content,
  body[dir="rtl"] .br-size-chart-content {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
  }

  /* Length row: label above, options in a horizontal scroll strip (no overflow) */
  .br-size-chart-length-selector {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .br-size-chart-length-options {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
    margin: 0 -0.25rem 0 0;
    min-width: 0;
  }

  .br-size-chart-length-options::-webkit-scrollbar {
    height: 4px;
  }

  .br-size-chart-length-option {
    flex-shrink: 0;
  }

  /* Table: compact cells, smooth horizontal scroll */
  .br-size-chart-table-wrapper {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    -webkit-overflow-scrolling: touch;
  }

  .br-size-chart-table {
    font-size: 0.9375rem;
  }

  .br-size-chart-table th,
  .br-size-chart-table td {
    padding: 0.625rem 0.5rem;
  }
}

.br-product-disclaimer {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.75rem;
  color: var(--mink-taupe, #998273);
  line-height: 1.4;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  /* Ensure it stays in the right column */
  grid-column: unset;
  left: auto;
  right: auto;
}

/* Product Actions – single column below options (Add to bag / Out-of-stock form / Wishlist) */
.br-product-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem;
  margin-top: 1rem;
  position: relative;
}

/* Toggle in-stock vs out-of-stock block (Notify me); JS adds .br-stock-hidden to hide */
.br-product-actions-in-stock.br-stock-hidden,
.br-product-actions-out-of-stock.br-stock-hidden {
  display: none !important;
}
/* Initial state from server before JS runs */
.br-product-actions-in-stock[data-initial-visible="false"] { display: none !important; }
.br-product-actions-out-of-stock[data-initial-visible="false"] { display: none !important; }
.br-product-actions-in-stock,
.br-product-actions-out-of-stock {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0;
  margin-bottom: 0;
  z-index: 1;
  grid-column: unset;
  left: auto;
  right: auto;
  direction: ltr;
  flex-wrap: nowrap !important;
}

/* Out-of-stock block: part of the same column, below size/options – not beside them */
.br-product-out-of-stock {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  order: 0 !important;
}

/* Send + Add to wishlist side by side (like second screenshot) */
.br-actions-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.br-actions-row .br-notify-btn {
  margin-top: 0 !important;
  flex: 0 1 1 !important;
  min-width: 0 !important;
  width: 0 !important; /* Force equal width */
}

.br-actions-row .br-add-to-wishlist-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 0 !important; /* Force equal width */
}

.br-add-to-bag-btn {
  display: block;
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.875rem;
  padding: 0 1rem;
  height: 3.25rem;
  min-height: 3.25rem;
  max-height: 3.25rem;
  box-sizing: border-box;
  background-color: var(--PLUM, #2F191E);
  color: var(--stone-beige, #D2C8BC);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  perspective: 150px;
  perspective-origin: center center;
}

.br-add-to-bag-btn:hover:not(:disabled) {
  background: var(--espresso-black, #231010);
}

.br-add-to-bag-btn:disabled {
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}

.br-add-to-bag-btn:disabled .br-btn-error-text,
.br-add-to-bag-btn:disabled.flip .br-btn-error-text {
  pointer-events: none;
}

/* Keep both text faces in the same row (overlapping slot) - never column */
.br-add-to-bag-btn .br-btn-text,
.br-add-to-bag-btn .br-btn-error-text {
  flex-direction: row !important;
}

/* Both faces sit in the same slot (overlapping), not column/row - so flip looks correct */
.br-btn-text,
.br-btn-error-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.75s cubic-bezier(0.76, 0, 0.24, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.br-btn-text span,
.br-btn-error-text span {
  transition: all 0.75s cubic-bezier(0.76, 0, 0.24, 1);
  display: block;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
  transform: translateX(0);
}

/* Front face - "Add to bag" */
.br-btn-text {
  transform: rotateX(0deg);
  opacity: 1;
  z-index: 2;
  display: flex;
}

.br-btn-text span {
  transform: translateY(0) translateX(0);
  opacity: 1;
  text-align: center;
}

/* Back face - "Select a size" - initial hidden state */
.br-btn-error-text {
  transform: rotateX(-90deg);
  transform-origin: center center;
  opacity: 0;
  color: var(--stone-beige, #D2C8BC);
  z-index: 1;
  display: flex;
  visibility: hidden;
}

/* 3D Perspective Flip on Hover - Based on reference implementation */
/* When button is NOT flipped (showing "Add to bag") - hover flips to show error text */
.br-add-to-bag-btn:not(.flip):hover:not(:disabled) .br-btn-text {
  transform: rotateX(90deg);
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.br-add-to-bag-btn:not(.flip):hover:not(:disabled) .br-btn-text span {
  transform: translateY(-100%) translateX(0);
  opacity: 0;
  transition: all 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.br-add-to-bag-btn:not(.flip):hover:not(:disabled) .br-btn-error-text {
  transform: rotateX(0deg);
  transform-origin: center center;
  opacity: 1;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.br-add-to-bag-btn:not(.flip):hover:not(:disabled) .br-btn-error-text span {
  opacity: 1;
  transform: translateY(0) translateX(0);
  text-align: center;
  transition: all 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

/* When button IS flipped (showing "Select a size") - hover flips on X-axis to show "Add to bag" */
.br-add-to-bag-btn.flip:hover:not(:disabled) .br-btn-error-text {
  transform: rotateX(90deg) !important;
  transform-origin: center center !important;
  opacity: 0 !important;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.br-add-to-bag-btn.flip:hover:not(:disabled) .br-btn-error-text span {
  transform: translateY(-100%) translateX(0) !important;
  opacity: 0 !important;
  transition: all 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.br-add-to-bag-btn.flip:hover:not(:disabled) .br-btn-text {
  transform: rotateX(0deg) !important;
  transform-origin: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.75s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.br-add-to-bag-btn.flip:hover:not(:disabled) .br-btn-text span {
  transform: translateY(0) translateX(0) !important;
  opacity: 1 !important;
  transition: all 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Flip animation when size/length is not selected - show "Select a size" */
.br-add-to-bag-btn.flip .br-btn-text {
  transform: rotateX(90deg) !important;
  transform-origin: center center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 1 !important;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.75s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.75s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
  display: flex !important;
  height: 100% !important;
}

.br-add-to-bag-btn.flip .br-btn-text span {
  transform: translateY(-100%) translateX(0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.br-add-to-bag-btn.flip .br-btn-error-text {
  display: flex !important;
  transform: rotateX(0deg) !important;
  transform-origin: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 999 !important;
  color: var(--stone-beige, #D2C8BC) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.75s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.75s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: auto;
}

.br-add-to-bag-btn.flip .br-btn-error-text span {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) translateX(0) !important;
  color: var(--stone-beige, #D2C8BC) !important;
  display: block !important;
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: all 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Ensure error text is visible when button has flip class - override any conflicting rules */
button.br-add-to-bag-btn.flip .br-btn-error-text,
button.br-add-to-bag-btn.flip:disabled .br-btn-error-text,
.br-add-to-bag-btn.flip:disabled .br-btn-error-text,
#br-add-to-bag.flip .br-btn-error-text,
#br-add-to-bag.flip:disabled .br-btn-error-text {
  display: flex !important;
  transform: rotateX(0deg) !important;
  transform-origin: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 999 !important;
  color: var(--stone-beige, #D2C8BC) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

button.br-add-to-bag-btn.flip .br-btn-error-text span,
button.br-add-to-bag-btn.flip:disabled .br-btn-error-text span,
.br-add-to-bag-btn.flip:disabled .br-btn-error-text span,
#br-add-to-bag.flip .br-btn-error-text span,
#br-add-to-bag.flip:disabled .br-btn-error-text span {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) translateX(0) !important;
  color: var(--stone-beige, #D2C8BC) !important;
  display: block !important;
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Smooth transition when flipping back to "Add to bag" */
.br-add-to-bag-btn:not(.flip) .br-btn-text {
  transform: rotateX(0deg) !important;
  transform-origin: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  z-index: 2 !important;
  height: 100% !important;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.75s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.br-add-to-bag-btn:not(.flip) .br-btn-text span {
  transform: translateY(0) translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
  transition: all 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.br-add-to-bag-btn:not(.flip) .br-btn-error-text {
  transform: rotateX(-90deg) !important;
  transform-origin: center center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 1;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.75s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.br-add-to-bag-btn:not(.flip) .br-btn-error-text span {
  opacity: 0 !important;
  transform: translateY(0) translateX(0) !important;
  text-align: center !important;
  transition: all 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Flip animation for "Adding..." state */
.br-add-to-bag-btn.adding .br-btn-text {
  transform: rotateX(90deg) !important;
  transform-origin: center center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.75s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.br-add-to-bag-btn.adding .br-btn-text span {
  transform: translateY(-100%) translateX(0) !important;
  opacity: 0 !important;
  text-align: center !important;
  transition: all 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.br-add-to-bag-btn.adding .br-btn-error-text {
  transform: rotateX(0deg) !important;
  transform-origin: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  z-index: 999 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--stone-beige, #D2C8BC) !important;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.75s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.br-add-to-bag-btn.adding .br-btn-error-text span {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) translateX(0) !important;
  display: block !important;
  color: var(--stone-beige, #D2C8BC) !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: all 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Ensure adding state overrides flip state */
.br-add-to-bag-btn.adding.flip .br-btn-error-text {
  transform: rotateX(0deg) !important;
  transform-origin: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  z-index: 999 !important;
}

.br-add-to-bag-btn.adding.flip .br-btn-error-text span {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) translateX(0) !important;
  text-align: center !important;
}

.br-add-to-wishlist-btn {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--PLUM, #2F191E);
  border: 1px solid var(--PLUM, #2F191E);
  cursor: pointer;
  transition: all 0.3s ease;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.br-add-to-wishlist-btn:hover {
  background: var(--PLUM, #2F191E);
  color: var(--stone-beige, #D2C8BC);
}

/* Out of Stock */
.br-product-out-of-stock {
  padding: 0;
  border: none;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.br-product-out-of-stock .br-add-to-bag-btn {
  margin-bottom: 1rem;
}

.br-out-of-stock-text {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1rem;
  color: var(--espresso-black, #231010);
  margin-bottom: 1rem;
  margin-top: 0;
}

.br-notify-me-form {
  margin-top: 0;
  margin-bottom: 0;
}

.br-notify-me-form h4 {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--espresso-black, #231010);
}

/* Hide form fields when user is signed in */
.br-notify-form-fields-hidden {
  display: none !important;
}

.br-notify-form-fields {
  display: block;
}

/* Hide "This product is out of stock" and "Notify me when product is available" text */
.br-out-of-stock-text-hidden,
.br-notify-me-form-title-hidden {
  display: none !important;
}

.br-notify-input {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.875rem;
  padding: 0.75rem;
  border: 1px solid var(--PLUM, #2F191E);
  border-radius: 0;
  margin-bottom: 0.75rem;
  width: 100%;
  color: var(--espresso-black, #231010);
  background: transparent !important;
  box-sizing: border-box;
}

.br-notify-input:focus {
  outline: none;
  border-color: var(--PLUM, #2F191E);
}

/* Override Bootstrap form-control inside notify form: same border as buttons */
.br-notify-me-form .form-control.br-notify-input,
.br-notify-me-form input.br-notify-input,
.br-notify-me-form .br-notify-input {
  background: transparent !important;
  border-radius: 0 !important;
  border: 1px solid var(--PLUM, #2F191E) !important;
}

.br-notify-phone-row {
  display: flex !important;
  gap: 1rem !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Override width for country code field - it should NOT be 100%; keep border like buttons */
.br-notify-phone-row .br-notify-country,
.br-notify-phone-row .br-notify-input.br-notify-country,
.br-notify-phone-row input.br-notify-country {
  width: 3.5rem !important;
  min-width: 3rem !important;
  max-width: 4rem !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--PLUM, #2F191E) !important;
}

/* Phone number field: same border as buttons, take remaining space */
.br-notify-phone-row .send-notify-phone,
.br-notify-phone-row input.send-notify-phone {
  border: 1px solid var(--PLUM, #2F191E) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  box-sizing: border-box !important;
}

.br-notify-btn {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--PLUM, #2F191E);
  border: 1px solid var(--PLUM, #2F191E);
  cursor: pointer;
  margin-top: 0;
  transition: all 0.3s ease;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.br-notify-btn:hover:not(:disabled) {
  background: var(--PLUM, #2F191E);
  color: var(--stone-beige, #D2C8BC);
}

.br-notify-btn:disabled {
  cursor: not-allowed;
  opacity: 0.9;
}

.br-notify-btn.br-notify-btn-sending {
  opacity: 0.85;
}

.br-notify-btn.br-notify-btn-success {
  background: var(--PLUM, #2F191E);
  color: var(--stone-beige, #D2C8BC);
  border-color: var(--PLUM, #2F191E);
}

/* Product Info Accordion – one container for Size & Fit, Product details, Material & Care, Shipping & Returns */
.br-product-info-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
  position: relative;
  z-index: 1;
  grid-column: unset;
  left: auto;
  right: auto;
  direction: ltr;
  border: none;
  background: transparent;
}

/* Hide accordion when empty (no items) to avoid "weird line" from border-only */
.br-product-info-accordion:not(:has(.br-info-item)) {
  display: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.br-info-item {
  border-bottom: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.br-info-toggle {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1rem;
  width: 100%;
  display: block !important;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--espresso-black, #231010);
  transition: color 0.3s ease;
  padding: 0;
}

html[dir="rtl"] .br-info-toggle,
body[dir="rtl"] .br-info-toggle,
html[lang="ar"] .br-info-toggle,
html[lang="ar-SA"] .br-info-toggle,
.rtl .br-info-toggle,
html[dir="rtl"] .br-product-info-inner > .br-product-info-accordion .br-info-toggle,
html[lang="ar"] .br-product-info-inner > .br-product-info-accordion .br-info-toggle,
html[lang="ar-SA"] .br-product-info-inner > .br-product-info-accordion .br-info-toggle,
.rtl .br-product-info-inner > .br-product-info-accordion .br-info-toggle {
  text-align: right !important;
  direction: ltr !important; /* Keep natural order: text first, arrow second (like English) */
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important; /* Align content to right */
  align-items: center !important;
  white-space: nowrap !important; /* Keep on same line */
}

/* Text first (appears on right in RTL) */
html[dir="rtl"] .br-info-toggle > span:first-child,
body[dir="rtl"] .br-info-toggle > span:first-child,
html[lang="ar"] .br-info-toggle > span:first-child,
html[lang="ar-SA"] .br-info-toggle > span:first-child,
.rtl .br-info-toggle > span:first-child,
html[dir="rtl"] .br-product-info-inner > .br-product-info-accordion .br-info-toggle > span:first-child,
html[lang="ar"] .br-product-info-inner > .br-product-info-accordion .br-info-toggle > span:first-child,
html[lang="ar-SA"] .br-product-info-inner > .br-product-info-accordion .br-info-toggle > span:first-child,
.rtl .br-product-info-inner > .br-product-info-accordion .br-info-toggle > span:first-child {
  margin-right: 0.5rem !important; /* Gap between text and arrow */
  margin-left: 0 !important;
}

/* Arrow second (appears on left in RTL) */
html[dir="rtl"] .br-info-toggle > .br-info-arrow,
body[dir="rtl"] .br-info-toggle > .br-info-arrow,
html[lang="ar"] .br-info-toggle > .br-info-arrow,
html[lang="ar-SA"] .br-info-toggle > .br-info-arrow,
.rtl .br-info-toggle > .br-info-arrow,
html[dir="rtl"] .br-product-info-inner > .br-product-info-accordion .br-info-toggle > .br-info-arrow,
html[lang="ar"] .br-product-info-inner > .br-product-info-accordion .br-info-toggle > .br-info-arrow,
html[lang="ar-SA"] .br-product-info-inner > .br-product-info-accordion .br-info-toggle > .br-info-arrow,
.rtl .br-product-info-inner > .br-product-info-accordion .br-info-toggle > .br-info-arrow {
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: rotate(0deg) !important; /* Keep arrow pointing right */
}

.br-info-toggle:hover {
  color: var(--PLUM, #2F191E);
}

.br-info-arrow {
  transition: transform 0.3s ease;
  width: 6px !important;
  max-width: 6px !important;
  height: 10px !important;
  min-width: 6px !important;
  min-height: 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.br-info-arrow img {
  width: 6px !important;
  height: 10px !important;
  min-width: 6px;
  min-height: 10px;
  display: block !important;
  flex-shrink: 0;
  visibility: visible !important;
  opacity: 1 !important;
  object-fit: contain;
}

.br-info-arrow svg {
  width: 6px !important;
  height: 10px !important;
  min-width: 6px;
  min-height: 10px;
  display: block !important;
  flex-shrink: 0;
  visibility: visible !important;
  opacity: 1 !important;
  fill: #2F191E;
}

.br-info-item.active .br-info-arrow {
  transform: rotate(90deg); /* Point down when expanded in LTR */
}

/* RTL: When active, arrow should point down */
html[dir="rtl"] .br-info-item.active .br-info-toggle > .br-info-arrow,
body[dir="rtl"] .br-info-item.active .br-info-toggle > .br-info-arrow,
html[lang="ar"] .br-info-item.active .br-info-toggle > .br-info-arrow,
html[lang="ar-SA"] .br-info-item.active .br-info-toggle > .br-info-arrow,
.rtl .br-info-item.active .br-info-toggle > .br-info-arrow {
  transform: rotate(90deg) !important; /* Point down when expanded (CSS transform replaces base 180deg) */
}

.br-info-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0;
}

.br-info-item.active .br-info-content {
  max-height: 1000px;
  padding: 0 0 1rem 0;
}

/* Info Overlay */
.br-product-info-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(47, 25, 30, 0.9);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.br-product-info-overlay.active {
  display: flex;
}

.br-product-info-overlay-content {
  background: var(--stone-beige, #D2C8BC);
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
  border-radius: 4px;
}

.br-overlay-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--PLUM, #2F191E);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.br-overlay-header h3 {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--espresso-black, #231010);
}

.br-overlay-body {
  font-family: 'The Year of the Camel', sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--espresso-black, #231010);
}

/* Curated Selection Section - Uses same styles as Core Collection */
.br-product-page .br-curated-selection-section,
.br-curated-selection-section {
  margin-top: 4rem;
  position: relative;
  z-index: 1;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 1px; /* prevent collapse; content gives real height */
  flex-shrink: 0;
  width: 100% !important;
  overflow: visible !important;
}

/* Curated Selection: match New In section exactly – spacing and card structure */
/* Spacing: same as .br-new-in-section – slider margin -0.75rem, cols padding 0 0.75rem */
.br-curated-selection-section .br-new-in-products-wrapper,
.br-product-page .br-curated-selection-section .br-new-in-products-wrapper {
  position: relative;
  width: 100%;
}
/* Desktop: match New In spacing */
.br-curated-selection-section .br-new-in-products-slider,
.br-product-page .br-curated-selection-section .br-new-in-products-slider {
  margin: 0 -0.75rem !important;
}
.br-curated-selection-section .br-new-in-product-col,
.br-product-page .br-curated-selection-section .br-new-in-product-col {
  padding: 0 0.75rem !important;
  box-sizing: border-box;
}

/* Card content: same structure as New In – image wrapper (relative), badge (absolute on image), then info */
/* Desktop image aspect ratio */
.br-curated-selection-section .br-new-in-product-image-wrapper,
.br-product-page .br-curated-selection-section .br-new-in-product-image-wrapper {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 159.633% !important;
  overflow: hidden !important;
  background: var(--white-color, #fff) !important;
}
.br-curated-selection-section .br-new-in-badge,
.br-product-page .br-curated-selection-section .br-new-in-badge {
  display: none !important;
}
.br-curated-selection-section .br-new-in-product-info,
.br-product-page .br-curated-selection-section .br-new-in-product-info {
  padding: 1rem 0 !important;
  min-height: 4rem !important;
}
/* When Slick is used, match New In spacing via slide padding */
.br-curated-selection-section .br-new-in-products-slider.slick-initialized .slick-slide,
.br-product-page .br-curated-selection-section .br-new-in-products-slider.slick-initialized .slick-slide {
  padding: 0 0.75rem !important;
  box-sizing: border-box;
}
.br-curated-selection-section .br-new-in-products-slider.slick-initialized .slick-slide > div,
.br-product-page .br-curated-selection-section .br-new-in-products-slider.slick-initialized .slick-slide > div {
  width: 100% !important;
}

/* Grid when Slick not inited – same column widths, gap 0 so col padding gives spacing (matches New In) */
@media (min-width: 992px) {
  .br-curated-selection-section .br-new-in-products-slider:not(.slick-initialized),
  .br-curated-selection-section .br-new-in-products-slider:has(> .br-new-in-product-col),
  .br-product-page .br-curated-selection-section .br-new-in-products-slider:not(.slick-initialized),
  .br-product-page .br-curated-selection-section .br-new-in-products-slider:has(> .br-new-in-product-col) {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    margin: 0 -0.75rem !important;
  }
  .br-curated-selection-section .br-new-in-products-slider .br-new-in-product-col,
  .br-product-page .br-curated-selection-section .br-new-in-products-slider .br-new-in-product-col {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 0.75rem !important;
  }
  .br-curated-selection-section .br-new-in-products-slider:has(> .br-new-in-product-col) > .slick-list,
  .br-product-page .br-curated-selection-section .br-new-in-products-slider:has(> .br-new-in-product-col) > .slick-list {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .br-curated-selection-section .br-new-in-products-slider:not(.slick-initialized),
  .br-curated-selection-section .br-new-in-products-slider:has(> .br-new-in-product-col),
  .br-product-page .br-curated-selection-section .br-new-in-products-slider:not(.slick-initialized),
  .br-product-page .br-curated-selection-section .br-new-in-products-slider:has(> .br-new-in-product-col) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    margin: 0 -0.75rem !important;
  }
  .br-curated-selection-section .br-new-in-products-slider .br-new-in-product-col,
  .br-product-page .br-curated-selection-section .br-new-in-products-slider .br-new-in-product-col {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 0.75rem !important;
  }
}
@media (max-width: 768px) {
  /* Prevent horizontal scroll on entire product page and info section */
  .br-product-page,
  section.br-product-page,
  .app .main .br-product-page,
  .br-product-page .container,
  body .br-product-page .container {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .br-product-info,
  .br-product-info-inner,
  .br-product-page .br-product-info,
  .br-product-page .br-product-info-inner {
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  /* Curated Selection: no horizontal slide/scroll – fit content, 2-col grid */
  .br-curated-selection-section,
  .br-product-page .br-curated-selection-section {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .br-curated-selection-section .container,
  .br-product-page .br-curated-selection-section .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow-x: hidden !important;
  }
  
  .br-curated-selection-section .br-new-in-products-wrapper,
  .br-product-page .br-curated-selection-section .br-new-in-products-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Grid: 2 columns, no sliding – override any slick width/transform; align like New In (first card in first column) */
  #curated-selection-slider,
  #curated-selection-slider.slick-initialized,
  .br-curated-selection-section .br-new-in-products-slider,
  .br-curated-selection-section .br-new-in-products-slider.slick-initialized,
  .br-product-page .br-curated-selection-section .br-new-in-products-slider,
  .br-product-page .br-curated-selection-section .br-new-in-products-slider.slick-initialized,
  .br-curated-selection-section .br-new-in-products-slider.s-slider,
  .br-product-page .br-curated-selection-section .br-new-in-products-slider.s-slider {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    justify-content: start !important;
    align-content: start !important;
  }
  
  /* Slick: neutralize list/track so they don’t cause horizontal scroll */
  #curated-selection-slider.slick-initialized .slick-list,
  .br-curated-selection-section .br-new-in-products-slider.slick-initialized .slick-list,
  .br-product-page .br-curated-selection-section .br-new-in-products-slider.slick-initialized .slick-list {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  
  #curated-selection-slider.slick-initialized .slick-track,
  .br-curated-selection-section .br-new-in-products-slider.slick-initialized .slick-track,
  .br-product-page .br-curated-selection-section .br-new-in-products-slider.slick-initialized .slick-track {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #curated-selection-slider.slick-initialized .slick-slide,
  .br-curated-selection-section .br-new-in-products-slider.slick-initialized .slick-slide,
  .br-product-page .br-curated-selection-section .br-new-in-products-slider.slick-initialized .slick-slide {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    height: auto !important;
    visibility: visible !important; /* So first slide is not hidden; grid starts from first column like New In */
  }
  
  .br-curated-selection-section .br-new-in-product-col,
  .br-product-page .br-curated-selection-section .br-new-in-product-col,
  #curated-selection-slider > .br-new-in-product-col,
  #curated-selection-slider .slick-slide > .br-new-in-product-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  
  .br-curated-selection-section .br-new-in-product-image-wrapper,
  .br-product-page .br-curated-selection-section .br-new-in-product-image-wrapper {
    padding-bottom: 140% !important;
  }
  
  .br-curated-selection-section .br-new-in-count,
  .br-product-page .br-curated-selection-section .br-new-in-count {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
  }
}

/* Desktop: Ensure 2-column layout is enforced - MAXIMUM SPECIFICITY */
@media (min-width: 992px) {
  section.br-product-page .container .br-product-wrapper,
  .br-product-page .container .br-product-wrapper,
  body .br-product-page .container .br-product-wrapper,
  .br-product-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto !important; /* content-sized so Curated Selection below stays visible */
    gap: 4rem !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
  }

  section.br-product-page .br-product-gallery,
  .br-product-page .br-product-gallery,
  .br-product-wrapper > .br-product-gallery,
  body .br-product-page .br-product-gallery,
  .br-product-gallery {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
  }

  section.br-product-page .br-product-info,
  .br-product-page .br-product-info,
  .br-product-wrapper > .br-product-info,
  body .br-product-page .br-product-info,
  .br-product-info {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    position: sticky !important;
    top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    order: 2 !important;
    min-height: 100vh !important;
    height: auto !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Nuclear option: Force ALL children to stay in column 2 */
  .br-product-info,
  .br-product-info *,
  .br-product-info *::before,
  .br-product-info *::after {
    grid-column: unset !important;
    grid-row: unset !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
    float: none !important;
    clear: both !important;
    order: unset !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Exception: Arrow should NOT be 100% width */
  .br-product-info .br-product-info-accordion .br-info-arrow,
  .br-product-info-accordion .br-info-arrow,
  .br-info-toggle .br-info-arrow {
    width: 6px !important;
    max-width: 6px !important;
  }

  /* Specific element fixes - MAXIMUM SPECIFICITY */
  .br-product-info .br-product-header,
  .br-product-info .br-product-description,
  .br-product-info .br-product-size-guide-link,
  .br-product-info .br-product-disclaimer,
  .br-product-info .br-product-actions,
  .br-product-info .br-product-info-accordion,
  .br-product-info .br-product-form,
  .br-product-form .br-product-variants,
  .br-product-form .br-product-size-guide-link,
  .br-product-form .br-product-disclaimer,
  .br-product-form .br-product-actions,
  .br-product-actions .br-add-to-bag-btn,
  .br-product-actions .br-add-to-wishlist-btn,
  .br-product-actions .br-product-out-of-stock,
  .br-size-guide-btn,
  .br-product-disclaimer {
    grid-column: unset !important;
    grid-row: unset !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    clear: both !important;
    order: unset !important;
    box-sizing: border-box !important;
  }

  /* Override: size guide button in label row should be fit-content */
  .br-product-option-label-row .br-size-guide-btn,
  .br-product-info .br-product-option-label-row .br-size-guide-btn,
  .br-product-form .br-product-option-label-row .br-size-guide-btn {
    width: fit-content !important;
    max-width: fit-content !important;
  }

  /* Prevent any absolute positioning from breaking layout */
  .br-product-info .br-product-header,
  .br-product-info .br-product-description,
  .br-product-info .br-product-form,
  .br-product-info .br-product-size-guide-link,
  .br-product-info .br-product-disclaimer,
  .br-product-info .br-product-actions,
  .br-product-info .br-product-info-accordion {
    position: relative !important;
    z-index: auto !important;
  }

  /* Ensure buttons stay in right column */
  .br-product-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
  }

  /* Ensure form stays in right column */
  .br-product-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* Ensure size guide link stays in right column */
  .br-product-size-guide-link {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0 !important;
  }

  /* Override: size guide link in label row should be fit-content */
  .br-product-option-label-row .br-product-size-guide-link,
  .br-product-info .br-product-option-label-row .br-product-size-guide-link,
  .br-product-form .br-product-option-label-row .br-product-size-guide-link,
  .br-product-size-outer .br-product-size-label-cell .br-product-size-guide-link {
    width: fit-content !important;
    max-width: fit-content !important;
  }

  .br-product-option-label-row .br-size-guide-btn,
  .br-product-info .br-product-option-label-row .br-size-guide-btn,
  .br-product-form .br-product-option-label-row .br-size-guide-btn,
  .br-product-size-outer .br-product-size-label-cell .br-size-guide-btn {
    width: fit-content !important;
    max-width: fit-content !important;
  }

  /* Ensure disclaimer stays in right column */
  .br-product-disclaimer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
}

/* Mobile/tablet: stack images on top, product info below; full screen width */
/* Must match or exceed base selector specificity (.app .main .br-product-page ...) */
@media (max-width: 991.98px) {
  .app .main .br-product-page .container,
  .app.d-flex.flex-column .main .br-product-page .container,
  section.br-product-page > .container,
  .br-product-page > .container,
  .br-product-page .container,
  body .br-product-page .container,
  body section.br-product-page .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .app .main .br-product-page .container .br-product-wrapper,
  .app.d-flex.flex-column .main .br-product-page .container .br-product-wrapper,
  section.br-product-page .container .br-product-wrapper,
  .br-product-page .container .br-product-wrapper,
  body .br-product-page .container .br-product-wrapper,
  body section.br-product-page .container .br-product-wrapper,
  .br-product-page .container > .br-product-wrapper,
  .br-product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    grid-auto-flow: unset !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .app .main .br-product-page .br-product-gallery,
  .app.d-flex.flex-column .main .br-product-page .br-product-gallery,
  section.br-product-page .br-product-gallery,
  .br-product-page .br-product-gallery,
  .br-product-wrapper > .br-product-gallery,
  body .br-product-page .br-product-gallery,
  .br-product-page .container .br-product-wrapper > .br-product-gallery,
  .br-product-gallery {
    grid-column: unset !important;
    grid-row: unset !important;
    position: relative !important;
    top: auto !important;
    /* Fixed height so inner horizontal scroll has overflow */
    height: 70vh !important;
    max-height: 70vh !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    order: 1 !important;
  }

  .app .main .br-product-page .br-product-info,
  .app.d-flex.flex-column .main .br-product-page .br-product-info,
  section.br-product-page .br-product-info,
  .br-product-page .br-product-info,
  .br-product-wrapper > .br-product-info,
  body .br-product-page .br-product-info,
  .br-product-page .container .br-product-wrapper > .br-product-info,
  .br-product-info {
    grid-column: unset !important;
    grid-row: unset !important;
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    order: 2 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* No inner scroll: container fits content, page scrolls as one */
  }
  
  .br-product-info-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  /* Override JS-set 100vh on wrapper so info section is not constrained (no inner scroll) */
  body .br-product-page .container .br-product-wrapper,
  .br-product-page .container .br-product-wrapper,
  .br-product-wrapper {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Info section on mobile/tablet: no inner scroll – container fits content, page scrolls as one */
  body .br-product-page .br-product-info,
  body .br-product-page .container .br-product-wrapper .br-product-info,
  section.br-product-page .br-product-info,
  .br-product-page .br-product-info,
  .br-product-wrapper .br-product-info,
  .br-product-info {
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: visible !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }
  body .br-product-page .br-product-info-inner,
  .br-product-page .br-product-info-inner,
  .br-product-info-inner {
    max-height: none !important;
    overflow-y: visible !important;
    overflow: visible !important;
  }

  /* Info section: prevent overflow, fit all content on mobile */
  .br-product-info .br-product-info-accordion,
  .br-product-info .br-product-disclaimer,
  .br-product-info .br-product-form,
  .br-product-info .br-product-header,
  .br-product-info .br-product-actions,
  .br-product-info .br-product-out-of-stock,
  .br-product-info-inner > * {
    min-width: 0 !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }
  
  .br-product-info .br-info-toggle,
  .br-product-info-accordion .br-info-toggle {
    min-width: 0 !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .br-product-info .br-product-disclaimer,
  .br-product-disclaimer * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* Gallery still scrollable column (same as desktop) */
  .br-product-images-scroll {
    flex-direction: column;
    height: 100%;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 0;
    padding: 0;
  }

  .br-product-image-item {
    min-width: 100%;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
  }

  .br-product-image,
  .br-product-video {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  .br-product-image-item {
    background: transparent;
    overflow: visible;
  }

  .br-product-name {
    font-size: 1.5rem;
  }

  .br-curated-selection-products {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  .br-product-page {
    padding: 0;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .app .main .br-product-page .container,
  .app.d-flex.flex-column .main .br-product-page .container,
  section.br-product-page > .container,
  .br-product-page > .container,
  .br-product-page .container,
  body .br-product-page .container,
  body section.br-product-page .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .br-product-name {
    font-size: 1.5rem;
  }

  .br-product-images-scroll {
    gap: 0.5rem;
  }

  .br-product-info {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .br-product-info-inner {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .br-product-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Curated Selection title: keep readable on small mobile */
  .br-curated-selection-section .br-new-in-count,
  .br-product-page .br-curated-selection-section .br-new-in-count {
    font-size: 1.25rem !important;
  }

  /* Wrapper: override any JS 100vh so page can grow, no inner scroll in info */
  body .br-product-page .container .br-product-wrapper,
  .br-product-wrapper {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Force info section to fit content – no inner scroll (max specificity) */
  body .br-product-page .br-product-info,
  body .br-product-page .container .br-product-wrapper .br-product-info,
  .br-product-page .br-product-info,
  .br-product-wrapper .br-product-info {
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: visible !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }
  body .br-product-page .br-product-info-inner,
  .br-product-page .br-product-info-inner,
  .br-product-info-inner {
    max-height: none !important;
    overflow-y: visible !important;
    overflow: visible !important;
  }
}