/* ==========================================================================
   RESPONSIVE / MOBILE BREAKPOINTS - Added 2026-07-25
   Figma has no mobile frames, so we adapt desktop layout for mobile
   Breakpoints: 768px (tablet), 480px (phone)
   ========================================================================== */

/* ===== TABLET: max-width 768px ===== */
@media (max-width: 768px) {
  .im-container {
    padding-left: 12px;
    padding-right: 12px;
  }
  .im-top-bar {
    font-size: 0.65rem;
    padding: 0.35rem 1rem;
  }
  .im-site-header-overlay {
    padding: 1rem 1.25rem !important;
  }
  .im-site-header-overlay nav {
    gap: 1rem !important;
  }
  .im-site-header-overlay nav a,
  .im-site-header-overlay > div > div > div > a {
    font-size: 0.625rem !important;
    letter-spacing: 0.1em !important;
  }
  section[style*="height: 100vh"] {
    min-height: 500px !important;
    height: 70vh !important;
  }
  section[style*="height: 100vh"] h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
  }
  section .im-container > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  section .im-container > div[style*="grid-template-columns: 1.1fr 0.85fr 1.3fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
  section .im-container > div[style*="grid-template-columns: 1fr 1.25fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  section .im-container > div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 3rem"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  section .im-container > div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  section .im-container > div[style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  section .im-container a[style*="aspect-ratio: 1/1"],
  section .im-container a[style*="aspect-ratio: 540/640"] {
    aspect-ratio: 4/5 !important;
  }
  section .im-container > div[style*="grid-template-columns: 1fr 1fr 1fr"][style*="gap: 2rem"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .im-footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  .im-footer-brand {
    font-size: 2.5rem !important;
  }
  .im-footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .im-footer-banner {
    height: 140px !important;
  }
  section[style*="height: 420px"] {
    height: auto !important;
    padding: 2rem 1rem !important;
  }
  section[style*="height: 420px"] > div[style*="position: absolute"][style*="display: flex"] {
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 1.5rem !important;
  }
  section[style*="height: 420px"] h3 {
    font-size: 1.15rem !important;
  }
}

/* ===== PHONE: max-width 480px ===== */
@media (max-width: 480px) {
  .im-container {
    padding-left: 12px;
    padding-right: 12px;
  }
  .im-top-bar {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }
  .im-site-header-overlay {
    padding: 0.75rem 1rem !important;
  }
  .im-site-header-overlay nav {
    gap: 0.6rem !important;
  }
  .im-site-header-overlay nav a,
  .im-site-header-overlay > div > div > div > a {
    font-size: 0.55rem !important;
    letter-spacing: 0.08em !important;
  }
  .im-site-header-overlay img {
    height: 28px !important;
  }
  section[style*="height: 100vh"] {
    min-height: 420px !important;
    height: 65vh !important;
  }
  section[style*="height: 100vh"] h1 {
    font-size: 1.75rem !important;
    letter-spacing: 0.08em !important;
  }
  section[style*="left: 3.5rem"] {
    left: 1.25rem !important;
  }
  section[style*="right: 3.5rem"] {
    right: 1.25rem !important;
  }
  h2 {
    font-size: 1.5rem !important;
  }
  h3 {
    font-size: 1.1rem !important;
  }
  section .im-container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  div[style*="position: absolute"][style*="bottom: 1.5rem"][style*="right: 1.5rem"][style*="width: 220px"] {
    width: calc(100% - 3rem) !important;
    right: 1.5rem !important;
    bottom: 1rem !important;
  }
  .im-tape-photo {
    transform: rotate(0deg) !important;
  }
  section .im-container > div[style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  section .im-container > div[style*="grid-template-columns: 1fr 1fr 1fr"][style*="gap: 2rem"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .im-footer-top {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .im-footer-brand {
    font-size: 2rem !important;
  }
  .im-footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
    font-size: 0.65rem;
  }
  .im-footer-bottom > div {
    flex-direction: column;
    gap: 0.5rem;
  }
  section[style*="margin-bottom: 6rem"] {
    margin-bottom: 3rem !important;
    margin-top: 3rem !important;
  }
  section[style*="padding-top: 5rem"][style*="padding-bottom: 5rem"] {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  section[style*="padding-top: 5.5rem"][style*="padding-bottom: 5.5rem"] {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .im-btn {
    padding: 0.7rem 1.25rem;
    font-size: 0.7rem;
  }
  .im-card-title {
    font-size: 1.1rem !important;
  }
  .im-script-heading {
    font-size: 2.25rem !important;
  }
}

/* Desktop hidden controls */
.im-mobile-menu-trigger,
.im-mobile-basket-link,
.im-mobile-drawer-overlay {
  display: none !important;
}

@media (min-width: 769px) {
  .im-mobile-drawer-overlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ===== MOBILE HEADER / HAMBURGER MENU ===== */
@media (max-width: 768px) {
  .im-site-header-overlay {
    padding: 1rem 1.25rem !important;
  }
  
  /* Hide desktop nav links */
  .im-nav-left,
  .im-nav-right {
    display: none !important;
  }
  
  .im-site-header {
    padding: 1rem 1.25rem !important;
  }
  
  .im-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
  }
  
  .im-mobile-menu-trigger {
    display: inline-flex !important;
    background: none;
    border: none;
    font-family: 'Stack Sans Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--im-header-nav-color, #1C1B18);
    cursor: pointer;
    padding: 0;
    z-index: 2;
  }
  
  .im-logo-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  .im-logo-link img {
    height: 20px !important;
  }
  
  .im-mobile-basket-link {
    display: inline-flex !important;
    font-family: 'Stack Sans Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--im-header-nav-color, #1C1B18);
    text-decoration: none;
    z-index: 2;
  }
  
  /* Mobile Navigation Drawer (Exact Attached 2 Figma Match) */
  .im-mobile-drawer-overlay {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }

  .im-mobile-drawer-overlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .im-mobile-drawer-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .im-mobile-drawer-overlay.is-open .im-mobile-drawer-panel {
    transform: translateX(0);
  }

  .im-mobile-drawer-top-bar {
    background: #FE3E00;
    color: #FFFFFF;
    padding: 0.6rem 1rem;
    font-size: 0.68rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.35;
  }

  .im-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .im-mobile-drawer-close {
    background: none;
    border: none;
    font-family: 'Stack Sans Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #1C1B18;
    cursor: pointer;
    padding: 0;
  }

  .im-mobile-drawer-logo img {
    max-height: 18px;
    width: auto;
    display: block;
  }

  .im-mobile-drawer-basket {
    font-family: 'Stack Sans Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #1C1B18;
    text-decoration: none;
    letter-spacing: 0.02em;
  }

  .im-mobile-drawer-body {
    padding: 1.75rem 1.5rem 2.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
  }

  /* Drawer View Switching (Attached 1 & Attached 2) */
  .im-mobile-drawer-view {
    display: none;
    width: 100%;
    flex-direction: column;
    animation: imDrawerFadeIn 0.25s ease-in-out;
  }

  .im-mobile-drawer-view.is-active {
    display: flex;
  }

  @keyframes imDrawerFadeIn {
    from {
      opacity: 0;
      transform: translateX(12px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Back Button (< SHOP) */
  .im-mobile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    font-family: 'Stack Sans Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #767676;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1.5rem;
  }

  .im-mobile-back-btn:hover {
    color: #1C1B18;
  }

  /* 2-Column Category Grid (Attached 2 Match) */
  .im-mobile-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1.25rem;
    width: 100%;
    padding-bottom: 2rem;
  }

  .im-mobile-cat-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #1C1B18;
  }

  .im-mobile-cat-img-wrap {
    width: 100%;
    aspect-ratio: 4/5;
    background-color: #F5F3EF;
    overflow: hidden;
    margin-bottom: 0.65rem;
  }

  .im-mobile-cat-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .im-mobile-cat-card:hover .im-mobile-cat-img-wrap img {
    transform: scale(1.04);
  }

  .im-mobile-cat-name-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Stack Sans Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1C1B18;
  }

  .im-cat-arrow {
    font-size: 0.9rem;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  .im-mobile-cat-card:hover .im-cat-arrow {
    transform: translateX(3px);
  }

  /* Subcategory Pane List (View 3 - Attached 3 Match) */
  .im-mobile-subcat-container {
    width: 100%;
    padding-top: 0.5rem;
  }

  .im-mobile-subcat-pane {
    display: none;
    flex-direction: column;
  }

  .im-mobile-subcat-pane.is-active {
    display: flex;
  }

  .im-mobile-subcat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
  }

  .im-mobile-subcat-list a {
    display: block;
    font-family: 'Stack Sans Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1C1B18;
    text-decoration: none;
    text-transform: uppercase;
  }

  .im-mobile-subcat-list a:hover {
    color: #FE3E00;
  }

  .im-mobile-search-form {
    position: relative;
    margin-bottom: 2rem;
  }

  .im-mobile-search-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #D8D4CC;
    padding: 0.65rem 2.5rem 0.65rem 0;
    font-family: 'Stack Sans Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    color: #1C1B18;
    background: transparent;
    outline: none;
    border-radius: 0;
    box-sizing: border-box;
  }

  .im-mobile-search-input::placeholder {
    color: #999999;
  }

  .im-mobile-search-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #1C1B18;
    cursor: pointer;
    padding: 0.25rem;
  }

  .im-mobile-menu-section {
    margin-bottom: 2.5rem;
  }

  .im-mobile-menu-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #888888;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }

  .im-mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
  }

  .im-mobile-menu-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Stack Sans Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1C1B18;
    text-decoration: none;
    text-transform: uppercase;
  }

  .im-mobile-drawer-footer {
    margin-top: auto;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .im-mobile-footer-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #888888;
    text-transform: uppercase;
    margin-bottom: 1rem;
  }

  .im-mobile-social-links {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .im-mobile-social-links a {
    font-family: 'Stack Sans Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1C1B18;
    text-decoration: none;
  }

  .im-mobile-country-select {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Stack Sans Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1C1B18;
    letter-spacing: 0.04em;
    cursor: pointer;
  }

  /* Top bar adjustments */
  .im-top-bar {
    font-size: 0.6rem;
    padding: 0.35rem 0.75rem;
  }
  
  .im-top-center {
    font-size: 0.6rem;
  }
  
  .im-top-right {
    font-size: 0.55rem;
  }

  /* Shop Controls & View Switcher on Mobile (Attached 1, 2, 3 Match) */
  .im-desktop-only-btn {
    display: none !important;
  }
  .im-view-icon-desktop {
    display: none !important;
  }
  .im-view-icon-mobile {
    display: inline-block !important;
  }

  /* 2-Column Product Grid on Mobile (Attached 1 & 2) */
  .im-shop-products-container.view-grid-3 .im-grid-row-3,
  .im-shop-products-container.view-grid-3 .im-grid-row-4,
  .im-shop-products-container.view-grid-3 .im-grid-row-2,
  .im-shop-products-container.view-grid-4 .im-grid-row-4,
  .im-shop-products-container.view-grid-4 .im-grid-row-3,
  .im-shop-products-container .im-grid-row-3,
  .im-shop-products-container .im-grid-row-4,
  .im-shop-products-container .im-grid-row-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem 0.85rem !important;
  }

  /* Dynamic Layout Mode on Mobile — all rows full-width (1 column) */
  .im-shop-products-container.view-dynamic .im-dynamic-row-1,
  .im-shop-products-container.view-dynamic .im-dynamic-row-3,
  .im-shop-products-container.view-dynamic .im-dynamic-row-rest {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .im-shop-products-container.view-dynamic .im-dynamic-col-center {
    padding-bottom: 0 !important;
  }

  .im-shop-products-container.view-dynamic .im-card-compact-right,
  .im-shop-products-container.view-dynamic .im-card-hero-left {
    max-width: 100% !important;
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Editorial Split Banner on Mobile */
  .im-editorial-row-split {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 2.5rem !important;
  }

  .im-editorial-split-banner {
    min-height: 320px !important;
    height: auto !important;
  }

  .im-editorial-split-product {
    max-width: 100% !important;
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  .im-site-header-overlay {
    padding: 0.75rem 1rem !important;
  }
}

/* ==========================================================================
   MOBILE PRODUCT DETAIL PAGE (PDP) — Figma Mobile Match
   All rules scoped to max-width: 768px — desktop layout is unaffected.
   ========================================================================== */
@media (max-width: 768px) {

  /* ── Container & Breadcrumb ── */
  .im-pdp-container {
    padding: 0 0 4rem !important;
  }

  .im-pdp-breadcrumbs {
    display: none !important;
  }

  /* ── Grid: single column, gallery on top ── */
  .im-pdp-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* ── Gallery: full-width edge-to-edge swipe carousel ── */
  .im-pdp-gallery-wrap {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
  }

  .im-pdp-thumbs-col {
    display: none !important;
  }

  .im-pdp-image-stack {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .im-pdp-image-stack::-webkit-scrollbar {
    display: none !important;
  }

  .im-pdp-image-stack-item {
    flex: 0 0 100% !important;
    width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    aspect-ratio: 3 / 4 !important;
  }

  .im-pdp-image-stack-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Progress bar: thin line at bottom of gallery */
  .im-pdp-mobile-progress-bar {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
  }

  .im-progress-track {
    width: 100% !important;
    height: 2px !important;
    background-color: #E6E4DF !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: 0.85rem !important;
  }

  .im-progress-fill {
    height: 100% !important;
    background-color: #1C1B18 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: transform 0.15s ease-out, width 0.15s ease-out !important;
  }

  /* ── Sticky info: no sticky on mobile, padding ── */
  .im-pdp-sticky-info {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 1.25rem 1rem 0 !important;
  }

  /* ── Header row: title + wishlist ── */
  .im-pdp-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 0.2rem !important;
    gap: 0.5rem !important;
  }

  .im-pdp-title {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    flex: 1 !important;
  }

  /* ── Price: same row as title on mobile (Figma: name left, price right) ── */
  .im-pdp-price-row {
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important;
    margin-top: 0 !important;
  }

  /* ── Color group ── */
  .im-pdp-color-group {
    margin-bottom: 1rem !important;
  }

  .im-pdp-color-name {
    font-size: 0.8rem !important;
    margin-bottom: 0.4rem !important;
  }

  .im-pdp-swatches-list {
    gap: 6px !important;
  }

  .im-pdp-swatch-box {
    width: 22px !important;
    height: 22px !important;
  }

  /* ── Size group ── */
  .im-pdp-size-group {
    margin-bottom: 0.65rem !important;
  }

  .im-pdp-size-header {
    margin-bottom: 0.4rem !important;
  }

  .im-pdp-size-label {
    font-size: 0.8rem !important;
  }

  .im-pdp-sizes-list {
    gap: 6px !important;
  }

  .im-pdp-size-btn {
    min-width: 50px !important;
    height: 34px !important;
    font-size: 0.75rem !important;
    padding: 0 0.75rem !important;
  }

  /* ── Model note ── */
  .im-pdp-model-note {
    font-size: 0.75rem !important;
    margin-top: 0.6rem !important;
    margin-bottom: 1.25rem !important;
  }

  /* ── CTA buttons: full width, stacked (Add to Cart / Buy Now) ── */
  .im-pdp-cta-section {
    margin-bottom: 1.25rem !important;
  }

  .im-pdp-cta-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .im-btn-add-cart,
  .im-btn-buy-now {
    height: 44px !important;
    font-size: 0.8rem !important;
  }

  /* ── Trust row: horizontal compact ── */
  .im-trust-row {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.75rem 0 1rem !important;
    font-size: 0.65rem !important;
    flex-wrap: wrap !important;
  }

  .im-trust-item {
    font-size: 0.65rem !important;
  }

  /* ── Information Tabs ── */
  .im-pdp-tabs-wrap {
    margin-bottom: 1.75rem !important;
  }

  .im-pdp-tabs-nav {
    gap: 1.25rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0 !important;
  }

  .im-tab-nav-btn {
    font-size: 0.75rem !important;
    padding-bottom: 6px !important;
  }

  .im-pdp-tab-pane {
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
  }

  /* ── Find Your Perfect Fit: 2-column layout matching Figma ── */
  .im-perfect-fit-card {
    display: grid !important;
    grid-template-columns: 1fr 1.25fr !important;
    gap: 0.65rem !important;
    padding: 1.1rem 0.65rem !important;
    margin-top: 1.75rem !important;
    margin-bottom: 2.25rem !important;
    overflow: visible !important;
    background: #F8F8F6 !important;
  }

  .im-fit-card-left {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
  }

  .im-fit-card-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: #111 !important;
    margin: 0 0 0.65rem 0 !important;
  }

  .im-fit-mini-product {
    background: #fff !important;
    border: 1px solid #111 !important;
    padding: 5px 6px !important;
    gap: 6px !important;
    margin-bottom: 0.75rem !important;
    border-radius: 0 !important;
  }

  .im-fit-mini-thumb {
    width: 28px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
  }

  .im-fit-mini-title-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 4px !important;
  }

  .im-fit-mini-name {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: #111 !important;
  }

  .im-fit-mini-price {
    font-size: 0.6rem !important;
    font-weight: 500 !important;
    color: #111 !important;
  }

  .im-fit-mini-color {
    font-size: 0.52rem !important;
    color: #767676 !important;
    margin-top: 1px !important;
  }

  .im-fit-find-now-btn {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-bottom: 1.5px solid #111 !important;
    color: #111 !important;
    width: fit-content !important;
    padding: 0 0 2px 0 !important;
    background: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    cursor: pointer !important;
    display: inline-block !important;
  }

  .im-fit-diagram-wrap {
    min-height: 190px !important;
    overflow: visible !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .im-fit-diagram-wrap::after {
    bottom: -32px !important;
    width: 95px !important;
    height: 12px !important;
    display: block !important;
  }

  .im-fit-diagram-img {
    max-width: 105px !important;
    max-height: 230px !important;
    margin: -24px auto -24px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* 4 Callouts visible on mobile matching Figma */
  .im-fit-callout {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    position: absolute !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }

  .im-fit-callout .title {
    font-size: 0.42rem !important;
    font-weight: 600 !important;
    color: #888 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
  }

  .im-fit-callout .sub {
    font-size: 0.48rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    line-height: 1.1 !important;
    margin-top: 1px !important;
  }

  .im-callout-line {
    width: 10px !important;
    height: 1px !important;
    background-color: #C8C4BD !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }

  .im-fit-callout-bust .im-callout-line::after,
  .im-fit-callout-length .im-callout-line::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    height: 6px !important;
    top: -2.5px !important;
    width: 1px !important;
    background-color: #C8C4BD !important;
  }

  .im-fit-callout-sleeve .im-callout-line::before,
  .im-fit-callout-hem .im-callout-line::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    height: 6px !important;
    top: -2.5px !important;
    width: 1px !important;
    background-color: #C8C4BD !important;
  }

  .im-fit-callout-bust {
    top: 12% !important;
    right: calc(50% + 14px) !important;
  }

  .im-fit-callout-sleeve {
    top: 18% !important;
    left: calc(50% + 24px) !important;
  }

  .im-fit-callout-length {
    top: 56% !important;
    right: calc(50% + 14px) !important;
  }

  .im-fit-callout-hem {
    bottom: 14% !important;
    left: calc(50% + 24px) !important;
  }

  /* ── Match Your [Category]: Horizontal list of cards matching Figma ── */
  .im-match-abayas-section {
    margin-top: 2rem !important;
    margin-bottom: 2.5rem !important;
  }

  .im-match-abayas-heading {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.85rem !important;
  }

  .im-match-abayas-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .im-match-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background: #f8f8f8 !important;
    padding: 0.625rem 0.75rem !important;
    gap: 0.85rem !important;
    position: relative !important;
    border: none !important;
  }

  .im-match-item:hover {
    background: #f3f3f3 !important;
  }

  .im-match-thumb {
    width: 60px !important;
    height: 78px !important;
    aspect-ratio: 3 / 4 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }

  .im-match-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .im-match-details {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 2px 36px 2px 0 !important;
  }

  .im-match-title-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    width: calc(100% + 36px) !important;
    margin-bottom: 0 !important;
  }

  .im-match-title {
    font-size: 0.825rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: #111 !important;
    text-decoration: none !important;
  }

  .im-match-price {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #444 !important;
    white-space: nowrap !important;
  }

  .im-match-qv-btn {
    display: inline-block !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: underline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: #111 !important;
    cursor: pointer !important;
    align-self: flex-start !important;
  }

  .im-match-plus-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 0.75rem !important;
    bottom: 0.625rem !important;
    width: 24px !important;
    height: 24px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    cursor: pointer !important;
    color: #111 !important;
    padding: 0 !important;
  }

  .im-match-plus-btn svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* ── Related Products (YOU MAY ALSO LIKE): Full-width stacked 1-column layout ── */
  .im-pdp-related {
    margin-top: 1.5rem !important;
    padding-top: 2rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-top: 1px solid #eee !important;
  }

  .im-pdp-related-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: 1.5rem !important;
  }

  .im-pdp-related-title {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .im-pdp-related-link {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-decoration: underline !important;
    color: #111 !important;
  }

  .im-pdp-related-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.25rem !important;
  }

  .im-pdp-related-card {
    width: 100% !important;
  }

  .im-pdp-related-card-1 .im-pdp-related-img-wrap,
  .im-pdp-related-card-2 .im-pdp-related-img-wrap,
  .im-pdp-related-card-3 .im-pdp-related-img-wrap {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    background: #f4f4f4 !important;
  }

  .im-pdp-related-card-3 {
    display: block !important;
  }

  .im-pdp-related-info {
    margin-top: 0.75rem !important;
  }

  .im-pdp-related-info-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
  }

  .im-pdp-related-name {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #111 !important;
  }

  .im-pdp-related-price {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #111 !important;
  }

  .im-pdp-related-sub {
    font-size: 0.7rem !important;
    color: #666 !important;
    margin-top: 0.25rem !important;
  }
}

/* ==========================================================================
   CART / BASKET SLIDE-OVER DRAWER MOBILE RESPONSIVENESS (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .im-cart-drawer-panel {
    width: 100% !important;
    max-width: 100vw !important;
  }
  .im-cart-drawer-header {
    padding: 1rem 1.25rem !important;
  }
  .im-cart-items-list {
    padding: 1.25rem !important;
    gap: 1.25rem !important;
  }
  .im-cart-trust-row {
    padding: 0.6rem 1.25rem !important;
    font-size: 0.625rem !important;
  }
  .im-cart-recom-section {
    padding: 1.25rem !important;
  }
  .im-cart-drawer-footer {
    padding: 1rem 1.25rem 1.25rem !important;
  }

  /* Cart Page Mobile Responsive */
  .im-cart-page-col-header {
    display: none !important;
  }
  .im-cart-page-wrap {
    padding: 1.25rem 1rem 3.5rem !important;
  }
  .im-cart-page-title {
    font-size: 1.35rem !important;
    margin-bottom: 1.5rem !important;
  }
  .im-cart-page-empty-card {
    padding: 3.5rem 1.25rem !important;
    margin-bottom: 2.5rem !important;
  }
  .im-cart-page-thumb {
    width: 80px !important;
  }
  .im-cart-page-item {
    gap: 1rem !important;
    padding-bottom: 1.25rem !important;
    margin-bottom: 1.25rem !important;
  }
  /* Cart Page Mobile Responsive */
  .im-cart-page-filled {
    gap: 1.5rem !important;
  }
  .im-cart-page-summary {
    padding: 1.5rem 1.25rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 2.5rem !important;
  }
  .im-cart-page-trust-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem 1rem !important;
  }
}

/* ==========================================================================
   CHECKOUT PAGE RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .im-header-checkout {
    padding: 1rem 1.25rem !important;
  }
  .im-header-checkout .im-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .im-header-checkout .im-checkout-header-left {
    flex: 1 !important;
  }
  .im-header-checkout .im-logo-link {
    flex-shrink: 0 !important;
  }
  .im-header-checkout .im-checkout-header-right {
    flex: 1 !important;
  }
  .im-checkout-container {
    padding: 1.25rem 1.25rem !important;
  }
  .im-checkout-breadcrumbs {
    margin-bottom: 1.5rem !important;
  }
  .im-checkout-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .im-checkout-sticky-bag-card {
    position: static !important;
    padding: 1.5rem 1.25rem !important;
  }
  .im-checkout-2col-row {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .im-payment-cards-grid {
    grid-template-columns: 1fr !important;
  }
}