/**
 * Sasha Khan — Responsive Styles
 * Mobile-first responsive breakpoints
 */

/* ═══════════════════════════════════════════════════════════
   BREAKPOINT REFERENCE
   ═══════════════════════════════════════════════════════════

   Mobile: 0 - 767px
   Tablet: 768px - 1023px
   Desktop: 1024px - 1439px
   Large Desktop: 1440px+

   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   MOBILE STYLES (Default)
   ═══════════════════════════════════════════════════════════ */

/* On mobile, stack triangles vertically */
@media (max-width: 767px) {
  .hero {
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .hero-triangle {
    position: relative;
    width: 100%;
    height: 25vh;
    min-height: 150px;
    clip-path: none !important;
  }

  .hero-triangle--top {
    order: 1;
  }

  .hero-triangle--left {
    order: 2;
  }

  .hero-triangle--right {
    order: 3;
  }

  .hero-triangle--bottom {
    order: 4;
  }

  /* Adjust content positioning for mobile */
  .hero-triangle__content {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  .hero-triangle__title {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    letter-spacing: var(--letter-spacing-ultra);
  }

  /* Logo positioning for mobile */
  .hero-logo {
    position: fixed;
    top: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
  }

  .hero-logo__image {
    width: 80px;
  }

  /* Hide decorative lines on mobile */
  .hero-decorative-lines,
  .hero-diagonal-svg {
    display: none;
  }

  /* Hide scroll indicator on mobile */
  .hero-scroll-indicator {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   TABLET STYLES
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-triangle__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
  }

  .hero-logo__image {
    width: clamp(100px, 12vw, 150px);
  }

  /* Adjust title positions for tablet */
  .hero-triangle--top .hero-triangle__content {
    top: 18%;
  }

  .hero-triangle--bottom .hero-triangle__content {
    bottom: 18%;
  }

  .hero-triangle--left .hero-triangle__content {
    left: 12%;
  }

  .hero-triangle--right .hero-triangle__content {
    right: 12%;
  }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP STYLES
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .hero-triangle__title {
    font-size: clamp(2rem, 2.5vw, 3rem);
  }

  /* Slightly larger logo on desktop */
  .hero-logo__image {
    width: clamp(150px, 12vw, 200px);
  }
}

/* ═══════════════════════════════════════════════════════════
   LARGE DESKTOP STYLES
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1440px) {
  .hero-triangle__title {
    font-size: 3rem;
    letter-spacing: 0.4em;
  }

  .hero-logo__image {
    width: 200px;
  }

  /* More generous spacing for large screens */
  .hero-triangle--top .hero-triangle__content {
    top: 12%;
  }

  .hero-triangle--bottom .hero-triangle__content {
    bottom: 12%;
  }

  .hero-triangle--left .hero-triangle__content {
    left: 18%;
  }

  .hero-triangle--right .hero-triangle__content {
    right: 18%;
  }
}

/* ═══════════════════════════════════════════════════════════
   ULTRA-WIDE SCREENS
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 2000px) {
  .hero-triangle__title {
    font-size: 3.5rem;
  }

  .hero-logo__image {
    width: 250px;
  }
}

/* ═══════════════════════════════════════════════════════════
   HEIGHT-BASED ADJUSTMENTS
   ═══════════════════════════════════════════════════════════ */

/* Short viewports (laptop screens) */
@media (max-height: 700px) and (min-width: 768px) {
  .hero-triangle__title {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
  }

  .hero-logo__image {
    width: clamp(80px, 10vw, 120px);
  }

  .hero-scroll-indicator {
    bottom: var(--space-md);
  }

  .hero-scroll-indicator__line {
    height: 25px;
  }
}

/* ═══════════════════════════════════════════════════════════
   TOUCH DEVICE HANDLING
   ═══════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
  /* On touch devices, don't dim other sections */
  .hero-triangle.is-dimmed .hero-triangle__overlay {
    opacity: 0;
  }

  .hero-triangle.is-dimmed .hero-triangle__title {
    opacity: 1;
  }

  /* Add tap indicator */
  .hero-triangle--video::after {
    content: '';
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-ivory);
    border-radius: 50%;
    opacity: 0.5;
    z-index: 20;
  }
}

/* ═══════════════════════════════════════════════════════════
   LANDSCAPE MOBILE
   ═══════════════════════════════════════════════════════════ */

/* Mobile landscape menu - hidden by default */
.mobile-landscape-menu,
.ml-video-overlay {
  display: none;
}

@media (max-height: 500px) and (orientation: landscape) {
  /* ═══════════════════════════════════════════════════════════
     FIX: Empty Space on Right
     Reinforce overflow-x: clip for mobile landscape
     ═══════════════════════════════════════════════════════════ */

  html {
    overscroll-behavior-x: none !important;
  }

  body {
    overflow-x: clip !important;
    overscroll-behavior-x: none !important;
  }

  /* ═══════════════════════════════════════════════════════════
     HERO SECTION - Full Viewport Video Sequence
     Videos play one at a time: Freedom → Glamour → Elite → repeat
     ═══════════════════════════════════════════════════════════ */

  .hero {
    position: relative !important;
    height: 100vh !important;
    min-height: 100vh !important;
    width: 100% !important;
    display: block !important;
    flex-direction: unset !important;
    overflow: hidden !important;
  }

  /* Hide non-essential elements */
  .hero-diagonal-svg,
  .hero-scroll-indicator,
  .hero-links,
  .hero-triangle__title,
  .hero-triangle__content,
  .collections-menu,
  .hero-decorative-lines {
    display: none !important;
  }

  /* Hide tablet menus */
  .menu-button,
  .tablet-nav,
  .tablet-portrait-menu,
  .tp-row1-overlay,
  .tp-row3-overlay {
    display: none !important;
  }

  /* Show mobile landscape elements */
  .mobile-landscape-menu,
  .ml-video-overlay {
    display: flex !important;
  }

  /* ═══════════════════════════════════════════════════════════
     VIDEO TRIANGLES - Full viewport, one at a time
     ═══════════════════════════════════════════════════════════ */

  /* Hide collections image (bottom triangle) completely */
  .hero-triangle--bottom {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  /* All video triangles: absolute, full viewport, hidden by default */
  .hero-triangle--top,
  .hero-triangle--left,
  .hero-triangle--right {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    clip-path: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 1 !important;
    order: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Specific override for Elite (left triangle) */
  .hero-triangle--left {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Active video - visible (instant switch, no transition) */
  .hero-triangle.ml-active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    transition: none !important;
  }

  /* Video fills container */
  .hero-triangle__video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  /* ═══════════════════════════════════════════════════════════
     50% OPACITY OVERLAY - Over all videos
     ═══════════════════════════════════════════════════════════ */

  .ml-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    pointer-events: none;
  }

  /* ═══════════════════════════════════════════════════════════
     LOGO - Upper Left
     ═══════════════════════════════════════════════════════════ */

  .hero-logo {
    position: fixed !important;
    top: var(--space-sm) !important;
    left: var(--space-sm) !important;
    right: auto !important;
    transform: none !important;
    z-index: 100;
  }

  .hero-logo__image {
    width: 60px !important;
  }

  /* ═══════════════════════════════════════════════════════════
     HOME BUTTON - Upper Right
     ═══════════════════════════════════════════════════════════ */

  .home-button {
    position: fixed !important;
    top: var(--space-sm) !important;
    right: var(--space-sm) !important;
    left: auto !important;
    z-index: 100;
  }

  /* ═══════════════════════════════════════════════════════════
     MOBILE LANDSCAPE MENU - Centered Stripe
     ═══════════════════════════════════════════════════════════ */

  .mobile-landscape-menu {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    pointer-events: none;
  }

  .mobile-landscape-menu__list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0 var(--space-lg);
    pointer-events: auto;
    width: 100%;
    background: rgba(10, 10, 10, 0.6);
  }

  .mobile-landscape-menu__item {
    position: relative;
    text-align: center;
  }

  .mobile-landscape-menu__label {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-havana);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    transition: color 0.3s var(--ease-luxury);
    text-decoration: none;
    background: transparent;
    border: none;
  }

  .mobile-landscape-menu__label:hover {
    color: var(--color-ivory);
  }

  /* Dropdown submenu */
  .mobile-landscape-menu__submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    margin: 0;
    padding: var(--space-xs) 0;
    background: rgba(10, 10, 10, 0.6);
    min-width: 100px;
    display: none;
    z-index: 30;
  }

  .mobile-landscape-menu__item--has-submenu.is-open .mobile-landscape-menu__submenu {
    display: block;
  }

  .mobile-landscape-menu__link {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-havana);
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm);
    text-align: center;
    transition: color 0.3s var(--ease-luxury);
  }

  .mobile-landscape-menu__link:hover {
    color: var(--color-ivory);
  }

  /* Dropdown arrow indicator */
  .mobile-landscape-menu__item--has-submenu .mobile-landscape-menu__label::after {
    content: ' ▾';
    font-size: 8px;
  }

  .mobile-landscape-menu__item--has-submenu.is-open .mobile-landscape-menu__label::after {
    content: ' ▴';
  }

  /* ═══════════════════════════════════════════════════════════
     CITIES SECTION - All 5 cards fit horizontally
     ═══════════════════════════════════════════════════════════ */

  .cities {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    width: 100% !important;
    z-index: 1 !important;
  }

  .cities__container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: var(--space-xs) !important;
    padding: 0 var(--space-sm) !important;
  }

  .cities__card {
    flex: 1 1 0 !important;
    max-width: 18% !important;
    min-width: 0 !important;
  }

  .cities__card-image {
    width: 100% !important;
    height: auto !important;
  }

  /* ═══════════════════════════════════════════════════════════
     GRAFFITI SECTION - Scroll-controlled video
     Full width below city cards
     ═══════════════════════════════════════════════════════════ */

  .graffiti-divider {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    width: 100% !important;
    height: 40vh !important;
    min-height: 180px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: var(--color-noir) !important;
    box-sizing: border-box !important;
  }

  .graffiti-divider__video {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  /* ═══════════════════════════════════════════════════════════
     BAGS INTRO (KEYHOLE) - Ensure video visible in mobile landscape
     ═══════════════════════════════════════════════════════════ */

  .bags-intro {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    overflow: clip !important;
  }

  .bags-intro__video-container {
    display: block !important;
    visibility: visible !important;
  }

  .bags-intro__video--desktop {
    display: block !important;
    visibility: visible !important;
    /* Note: opacity controlled by JavaScript for fade animation */
  }

  /* ═══════════════════════════════════════════════════════════
     GLASSES - Ensure video visible in mobile landscape
     Scroll-controlled video section
     ═══════════════════════════════════════════════════════════ */

  .glasses {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    height: 200vh !important;
    width: 100% !important;
  }

  .glasses__video-container {
    display: block !important;
    visibility: visible !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
  }

  .glasses__video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .glasses__video--desktop {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Hide tablet portrait video in mobile landscape */
  .glasses__video--tablet-portrait {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════════════════
     CATWALK SECTION - Horizontal scroll to clothing
     overflow: clip prevents empty space without breaking sticky
     ═══════════════════════════════════════════════════════════ */

  .catwalk {
    overflow: clip !important;
  }

  /* ═══════════════════════════════════════════════════════════
     LUX PRODUCT NAMES - Lower position (LUNE, ULYSSE, XELINE)
     ═══════════════════════════════════════════════════════════ */

  .products-container--lux .product-card__name {
    transform: translateY(9vh) !important;
  }

  /* ═══════════════════════════════════════════════════════════
     PRODUCT MODALS - Reduced image size for mobile landscape
     Images scaled down to fit viewport, text remains scrollable
     ═══════════════════════════════════════════════════════════ */

  .product-modal__content {
    flex-direction: row !important;
    height: 100vh !important;
  }

  .product-modal__image {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    height: 100vh !important;
  }

  .product-modal__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .product-modal__details {
    flex: 1 !important;
    max-width: 60% !important;
    height: 100vh !important;
    overflow-y: auto !important;
    padding: var(--space-md) !important;
  }

  .product-modal__title {
    font-size: var(--font-size-2xl) !important;
  }

  .product-modal__section p {
    font-size: var(--font-size-sm) !important;
  }

  /* Close button - move to upper left, black color */
  .product-modal__close {
    right: auto !important;
    left: var(--space-md) !important;
    color: #000000 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   TABLET LANDSCAPE
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 991px) and (max-width: 1200px) {
  /* ═══════════════════════════════════════════════════════════
     TABLET LANDSCAPE - DOCUMENTED FIXES ONLY
     Based on: ISSUE_0006_Image breaking hero section on tablet
     ═══════════════════════════════════════════════════════════ */

  /* 0. Force GPU compositing on all triangles - ensures clip-path works consistently */
  .hero-triangle {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  /* 0b. Bottom image: adjust position and remove overflow-causing transform */
  .hero-triangle--bottom .hero-triangle__image {
    transform: translateY(30%) translateZ(0) !important;
    -webkit-transform: translateY(30%) translateZ(0) !important;
  }

  /* 1. Disable ALL transitions on triangle elements */
  .hero-triangle,
  .hero-triangle *,
  .hero-triangle__title,
  .hero-triangle__overlay,
  .hero-triangle__video,
  .hero-triangle__image {
    transition: none !important;
  }

  /* 2. Hide overlay completely */
  .hero-triangle__overlay {
    display: none !important;
  }

  /* 3. Force stable state on ALL triangles regardless of classes - ALL same z-index */
  .hero-triangle,
  .hero-triangle.is-dimmed,
  .hero-triangle.is-active {
    opacity: 1 !important;
    filter: none !important;
    z-index: 2 !important;
  }

  /* Force same z-index even during sequence - prevents overlap */
  body.tablet-sequence-active .hero-triangle,
  body.tablet-sequence-active .hero-triangle.is-active,
  body.tablet-sequence-active .hero-triangle.is-dimmed {
    z-index: 2 !important;
  }

  /* Reset titles */
  .hero-triangle__title,
  .hero-triangle.is-dimmed .hero-triangle__title,
  .hero-triangle.is-active .hero-triangle__title {
    opacity: 1 !important;
  }

  /* 4. Explicit overrides for :hover, :active, :focus on bottom triangle */
  .hero-triangle--bottom,
  .hero-triangle--bottom:hover,
  .hero-triangle--bottom:active,
  .hero-triangle--bottom:focus {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 2 !important;
  }

  /* 5. Completely hide collections menu with zero dimensions */
  .collections-menu,
  .collections-menu *,
  .hero-triangle--bottom:hover .collections-menu,
  .hero-triangle--bottom.is-active .collections-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* ═══════════════════════════════════════════════════════════
     TABLET SEQUENCE ANIMATION
     When body has .tablet-sequence-active, allow dimming effects
     ═══════════════════════════════════════════════════════════ */

  /* Show overlay on dimmed triangles during sequence */
  body.tablet-sequence-active .hero-triangle.is-dimmed .hero-triangle__overlay {
    display: block !important;
    opacity: 0.7 !important;
    background: rgba(10, 10, 10, 0.7) !important;
  }

  /* Dim title on non-active triangles during sequence */
  body.tablet-sequence-active .hero-triangle.is-dimmed .hero-triangle__title {
    opacity: 0.3 !important;
  }

  /* Active triangle - NO z-index change, keep all triangles on same plane */
  /* z-index removed to prevent overlap - clip-path handles visibility */

  /* Keep active triangle fully visible */
  body.tablet-sequence-active .hero-triangle.is-active .hero-triangle__overlay {
    display: none !important;
    opacity: 0 !important;
  }

  body.tablet-sequence-active .hero-triangle.is-active .hero-triangle__title {
    opacity: 1 !important;
  }

  /* ═══════════════════════════════════════════════════════════
     VIDEO POSITIONING - Alignment adjustments for tablet
     ═══════════════════════════════════════════════════════════ */

  /* FREEDOM (top) triangle video - shift up 2% */
  .hero-triangle--top .hero-triangle__video,
  .hero-triangle--top .hero-triangle__image {
    transform: translateY(-2%) !important;
  }

  /* ELITE (left) triangle video - enlarge to fill corner gaps */
  .hero-triangle--left .hero-triangle__video,
  .hero-triangle--left .hero-triangle__image {
    max-width: none !important;
    width: 130% !important;
    height: 130% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -45%) translateX(-39%) !important;
  }

  /* ═══════════════════════════════════════════════════════════
     TABLET MENU BUTTON & NAV
     ═══════════════════════════════════════════════════════════ */

  /* Force both buttons to match exactly in tablet landscape */
  .home-button,
  .menu-button {
    box-sizing: border-box;
    height: 32px;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Menu button - positioned left of HOME */
  .menu-button {
    position: fixed;
    top: var(--space-lg);
    right: calc(var(--space-lg) + 85px);
    z-index: 9999;
    /* Reset button defaults */
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    margin: 0;
    text-decoration: none;
    color: var(--color-havana);
    background: rgba(10, 10, 10, 0.7);
    border: 1px solid rgba(196, 167, 125, 0.3);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.3s var(--ease-luxury),
                color 0.3s var(--ease-luxury),
                border-color 0.3s var(--ease-luxury);
  }

  .menu-button:hover,
  .menu-button.is-active {
    background: rgba(196, 167, 125, 0.9);
    color: var(--color-noir);
    border-color: var(--color-havana);
  }

  /* Tablet navigation menu - centered overlay */
  .tablet-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.85);
    /* Center content */
    justify-content: center;
    align-items: center;
  }

  .tablet-nav.is-open {
    display: flex;
  }

  .tablet-nav__list {
    list-style: none;
    margin: 0;
    padding: var(--space-lg);
    /* Horizontal layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  .tablet-nav__item {
    border-bottom: none;
    text-align: center;
    position: relative;
  }

  .tablet-nav__item:last-child {
    border-bottom: none;
  }

  .tablet-nav__label {
    display: block;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-havana);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: color 0.3s var(--ease-luxury);
  }

  .tablet-nav__label--link {
    text-decoration: none;
  }

  .tablet-nav__label:hover {
    color: var(--color-ivory);
  }

  .tablet-nav__submenu {
    list-style: none;
    margin: 0;
    padding: var(--space-sm) 0 0 0;
    display: none;
    text-align: center;
    /* Position absolute to prevent layout shift */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%;
  }

  .tablet-nav__item--has-submenu.is-expanded .tablet-nav__submenu {
    display: block;
  }

  .tablet-nav__link {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-light);
    color: var(--color-platinum);
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm);
    transition: color 0.3s var(--ease-luxury);
  }

  .tablet-nav__link:hover {
    color: var(--color-ivory);
  }

  /* ═══════════════════════════════════════════════════════════
     LUX/ODE CARDS - Shift left to center within spacing
     ═══════════════════════════════════════════════════════════ */

  /* Clip overflow so cards don't bleed into previous section */
  .bags-intro {
    overflow: clip !important;
  }

  .luxury-cards-container {
    left: var(--space-xs) !important;
    transform: translateX(-80px);
  }

  /* O letter card (back face of first card) - shift visually right */
  .luxury-card[data-index="0"] .luxury-card__face--back {
    transform: rotateY(180deg) translateX(23px) !important;
  }

  /* E letter card (back face of third card) - shift visually left 5px */
  .luxury-card[data-index="2"] .luxury-card__face--back {
    transform: rotateY(180deg) translateX(-5px) !important;
  }

  /* X letter card (front face of third card) - shift visually right 10px */
  .luxury-card[data-index="2"] .luxury-card__face--front {
    transform: translateX(10px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   TABLET PORTRAIT ELEMENTS - Hidden by default
   ═══════════════════════════════════════════════════════════ */

.tablet-portrait-menu,
.tp-row1-overlay,
.tp-row3-overlay {
  display: none;
}

/* Tablet portrait glasses video - hidden by default */
.glasses__video--tablet-portrait {
  display: none;
}

/* Tablet portrait keyhole video - hidden by default */
.bags-intro__video--tablet-portrait {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   TABLET PORTRAIT (768px - 990px width, height > 500px)
   Height check prevents overlap with mobile landscape
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 990px) and (min-height: 501px) {
  /* Show tablet portrait elements */
  .tablet-portrait-menu,
  .tp-row1-overlay,
  .tp-row3-overlay {
    display: flex;
  }

  .tp-row1-overlay,
  .tp-row3-overlay {
    display: block;
  }
  /* ═══════════════════════════════════════════════════════════
     HERO SECTION - 3 Horizontal Rows Layout
     Row 1 (top): Video area - 33.33vh
     Row 2 (middle): Collections image + menu - 33.33vh
     Row 3 (bottom): Video area - 33.33vh
     ═══════════════════════════════════════════════════════════ */

  .hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: block;
    overflow: hidden;
  }

  /* Hide non-essential elements */
  .hero-diagonal-svg,
  .hero-scroll-indicator,
  .hero-links,
  .hero-triangle__title,
  .hero-triangle__content,
  .collections-menu {
    display: none !important;
  }

  /* Hide tablet landscape menu elements */
  .menu-button,
  .tablet-nav {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════════════════
     VIDEO TRIANGLES - Repositioned as full-width rows
     ═══════════════════════════════════════════════════════════ */

  /* All video triangles: absolute, full width, hidden by default */
  .hero-triangle--top,
  .hero-triangle--left,
  .hero-triangle--right {
    position: absolute !important;
    width: 100% !important;
    height: 33.33vh !important;
    clip-path: none !important;
    left: 0 !important;
    opacity: 0;
    visibility: hidden;
    z-index: 5;
    transition: opacity 0.5s ease;
  }

  /* Video fills container */
  .hero-triangle--top .hero-triangle__video,
  .hero-triangle--left .hero-triangle__video,
  .hero-triangle--right .hero-triangle__video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  /* Active video in Row 1 (top) */
  .hero-triangle.tp-row1-active {
    top: 0 !important;
    opacity: 1;
    visibility: visible;
  }

  /* Active video in Row 3 (bottom) */
  .hero-triangle.tp-row3-active {
    top: 66.67vh !important;
    opacity: 1;
    visibility: visible;
  }

  /* Disable all transforms on triangles */
  .hero-triangle,
  .hero-triangle * {
    transform: none !important;
  }

  /* Freedom video - show upper portion */
  .hero-triangle--top.tp-row1-active .hero-triangle__video,
  .hero-triangle--top.tp-row3-active .hero-triangle__video {
    object-position: center top !important;
  }

  /* ═══════════════════════════════════════════════════════════
     ROW 2 - Collections Image (Middle Row)
     ═══════════════════════════════════════════════════════════ */

  .hero-triangle--bottom {
    position: absolute !important;
    top: 33.33vh !important;
    left: 0 !important;
    width: 100% !important;
    height: 33.33vh !important;
    clip-path: none !important;
    z-index: 5;
  }

  .hero-triangle--bottom .hero-triangle__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  /* Permanent 33% opacity overlay on middle row (behind menu) */
  .hero-triangle--bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.33);
    z-index: 1;
    pointer-events: none;
  }

  /* ═══════════════════════════════════════════════════════════
     ROW DIMMING OVERLAYS
     ═══════════════════════════════════════════════════════════ */

  /* Row 1 overlay (when Row 3 is playing) */
  .tp-row1-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 33.33vh;
    background: rgba(0, 0, 0, 0.66);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .tp-row1-overlay.is-dimmed {
    opacity: 1;
  }

  /* Row 3 overlay (when Row 1 is playing) */
  .tp-row3-overlay {
    position: absolute;
    top: 66.67vh;
    left: 0;
    width: 100%;
    height: 33.33vh;
    background: rgba(0, 0, 0, 0.66);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .tp-row3-overlay.is-dimmed {
    opacity: 1;
  }

  /* ═══════════════════════════════════════════════════════════
     LOGO - Upper Left
     ═══════════════════════════════════════════════════════════ */

  .hero-logo {
    position: fixed !important;
    top: var(--space-md) !important;
    left: var(--space-md) !important;
    right: auto !important;
    transform: none !important;
    z-index: 100;
  }

  .hero-logo__image {
    width: 80px !important;
  }

  /* ═══════════════════════════════════════════════════════════
     HOME BUTTON - Upper Right
     ═══════════════════════════════════════════════════════════ */

  .home-button {
    position: fixed !important;
    top: var(--space-md) !important;
    right: var(--space-md) !important;
    left: auto !important;
    z-index: 100;
  }

  /* ═══════════════════════════════════════════════════════════
     TABLET PORTRAIT MENU - Horizontal in Middle Row
     ═══════════════════════════════════════════════════════════ */

  .tablet-portrait-menu {
    position: absolute;
    top: 33.33vh;
    left: 0;
    width: 100%;
    height: 33.33vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    pointer-events: none;
  }

  .tablet-portrait-menu__list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0 var(--space-lg);
    pointer-events: auto;
    width: 100%;
    background: rgba(10, 10, 10, 0.6);
  }

  .tablet-portrait-menu__item {
    position: relative;
    text-align: center;
  }

  .tablet-portrait-menu__label {
    display: block;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-havana);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: color 0.3s var(--ease-luxury);
    text-decoration: none;
    background: transparent;
    border: none;
  }

  .tablet-portrait-menu__label:hover {
    color: var(--color-ivory);
  }

  /* Dropdown submenu */
  .tablet-portrait-menu__submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    margin: 0;
    padding: var(--space-xs) 0;
    background: rgba(10, 10, 10, 0.6);
    min-width: 120px;
    display: none;
    z-index: 30;
  }

  .tablet-portrait-menu__item--has-submenu.is-open .tablet-portrait-menu__submenu {
    display: block;
  }

  .tablet-portrait-menu__link {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-havana);
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm);
    text-align: center;
    transition: color 0.3s var(--ease-luxury);
  }

  .tablet-portrait-menu__link:hover {
    color: var(--color-ivory);
  }

  /* Dropdown arrow indicator */
  .tablet-portrait-menu__item--has-submenu .tablet-portrait-menu__label::after {
    content: ' ▾';
    font-size: 8px;
  }

  .tablet-portrait-menu__item--has-submenu.is-open .tablet-portrait-menu__label::after {
    content: ' ▴';
  }

  /* ═══════════════════════════════════════════════════════════
     CITIES SECTION - All 5 cards fit horizontally
     ═══════════════════════════════════════════════════════════ */

  .cities__container {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: var(--space-xs) !important;
    padding: 0 var(--space-sm) !important;
  }

  .cities__card {
    flex: 1 1 0 !important;
    max-width: 18% !important;
    min-width: 0 !important;
  }

  /* ═══════════════════════════════════════════════════════════
     LUX/ODE CARDS - Shift left for tablet portrait
     ═══════════════════════════════════════════════════════════ */

  .luxury-cards-container {
    left: var(--space-xs) !important;
    transform: translateX(-160px);
  }

  /* L card (front face of first card) - extra shift to -190px total */
  .luxury-card[data-index="0"] .luxury-card__face--front {
    transform: translateX(-30px) !important;
  }

  /* U card (front face of second card) - extra shift to -190px total */
  .luxury-card[data-index="1"] .luxury-card__face--front {
    transform: translateX(-30px) !important;
  }

  /* O card (back face of first card) - total -155px */
  .luxury-card[data-index="0"] .luxury-card__face--back {
    transform: rotateY(180deg) translateX(5px) !important;
  }

  /* D card (back face of second card) - total -165px */
  .luxury-card[data-index="1"] .luxury-card__face--back {
    transform: rotateY(180deg) translateX(-5px) !important;
  }

  /* E card (back face of third card) - total -171px */
  .luxury-card[data-index="2"] .luxury-card__face--back {
    transform: rotateY(180deg) translateX(-11px) !important;
  }

  /* ═══════════════════════════════════════════════════════════
     PRODUCT CARDS - Ensure names visible for tablet portrait
     ═══════════════════════════════════════════════════════════ */

  /* Product info container - keep original positioning */
  .product-card__info {
    max-width: 25vw !important;
  }

  /* Product name image - ensure visible and lower position */
  .product-card__name {
    max-width: 120px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  /* Raise LUX product names without affecting buttons */
  .products-container--lux .product-card__name {
    transform: translateY(-3vh) !important;
  }

  /* Remove overflow hidden on product cards so names aren't clipped */
  .product-card {
    overflow: visible !important;
  }

  /* ═══════════════════════════════════════════════════════════
     CLOTHING SECTION - Three Models (FREEDOM, GLAMOUR, ELITE)
     ═══════════════════════════════════════════════════════════ */

  /* Freedom model - shift right */
  .clothing-panel[data-collection="freedom"] .clothing-panel__image {
    object-position: 80% top !important;
  }

  /* ═══════════════════════════════════════════════════════════
     GLASSES SECTION - Tablet Portrait Video
     ═══════════════════════════════════════════════════════════ */

  /* Hide desktop video, show tablet portrait video */
  .glasses__video--desktop {
    display: none !important;
  }

  .glasses__video--tablet-portrait {
    display: block !important;
    object-position: 55% center !important;
  }

  /* Make entire glasses video tappable */
  .glasses__overlay-link {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
    cursor: pointer;
  }

  .glasses__overlay-text {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════════════════
     KEYHOLE VIDEO - Tablet Portrait
     ═══════════════════════════════════════════════════════════ */

  /* Hide desktop video, show tablet portrait video */
  .bags-intro__video--desktop {
    display: none !important;
  }

  .bags-intro__video--tablet-portrait {
    display: block !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   HIGH DPI / RETINA DISPLAYS
   ═══════════════════════════════════════════════════════════ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper text shadows on retina */
  .hero-triangle__title {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  }

  /* Thinner decorative lines */
  .hero-diagonal-svg line {
    stroke-width: 0.5;
  }
}