/* Import modals styles */
    @import 'product/modals.css';
    
    /* Product detail responsive tweaks (local to this template) */
    .product-detail-wrap{ display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap }
    .product-main{ flex:1; min-width:280px; max-width:560px }
    .product-side{ flex:1; min-width:240px; max-width:520px }
    #thumbnails{ display:flex; gap:8px; margin-top:8px; flex-wrap:nowrap; overflow-x:auto }
    #thumbnails img{ flex:0 0 auto; width:80px; height:60px; object-fit:cover; border-radius:6px }
    #complements-section{ box-sizing:border-box; width:100%; max-width:100%; min-width:0; }
    /* Contenedor de complementos: max-width para que las tarjetas no se estiren; mismo tamaño en móvil/tablet/ordenador */
    .complements-container{ display:grid; grid-template-columns:repeat(3, 130px); gap:12px; max-width:414px; width:100%; padding:0; box-sizing:border-box; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    #complements-list.complements-container{ align-items:stretch; }
    .product-card-complementary{ width:130px; min-width:130px; max-width:130px; height:182px; min-height:182px; max-height:182px; position:relative; overflow:hidden; box-sizing:border-box; flex-shrink:0; }
    .variant-selector{ gap:8px; overflow:visible; margin-bottom:15px; }
    /* Fix for selected borders not being cut off */
    .variant-btn{ overflow:visible; margin:2px }
    .variant-btn.selected{ margin:2px; overflow:visible }
    .product-card-complementary.selected{ overflow:visible; margin:0 }
    #complements-list{  }
    #variant-selector{ overflow:visible; padding:4px }
    /* Styles for selected elements to prevent border clipping */
    .product-card-complementary{ border:2px solid transparent; transition:border-color 0.2s ease, box-shadow 0.2s ease; box-sizing:border-box }
    .product-card-complementary.selected{ border:2px solid var(--brand); box-shadow:0 4px 12px rgba(var(--brand-rgb),0.15); margin:0 }
    .delivery-option{ border:1px solid transparent; transition:border 0.2s ease }
    .delivery-option.selected{ border:1px solid var(--brand) }
    /* Tablet: mismo tamaño de tarjeta, contenedor con max-width */
    @media (max-width:992px){
      .complements-container{ grid-template-columns:repeat(3, 130px); gap:12px; max-width:414px; }
      .product-card-complementary{ width:130px; min-width:130px; max-width:130px; height:182px; min-height:182px; max-height:182px; }
    }
    @media (max-width:760px){
      .product-detail-wrap{ flex-direction:column; gap:12px }
      .product-main, .product-side{ max-width:100%; width:100% }
      #thumbnails img{ width:72px; height:54px }
      /* Tablet: 3 columnas, ancho al 100% */
      .complements-container{ grid-template-columns:repeat(3, 130px); gap:12px; max-width:414px; }
      .product-card-complementary{ width:130px; min-width:130px; max-width:130px; height:182px; min-height:182px; max-height:182px; }
      #variant-selector{ padding:4px }
      
      /* Botones de compra en tablet */
      .btn-primary, .btn-ghost {
        padding: 10px 12px;
        font-size: 0.95rem;
      }
      
      .btn-primary i, .btn-ghost i {
        font-size: 16px;
      }
    }
    /* Móvil amplio (481px-600px): 3 columnas para mantener consistencia */
    @media (max-width:600px) and (min-width:481px){
      .complements-container{ grid-template-columns:repeat(3, 130px); max-width:414px; }
      .product-card-complementary{ width:130px; min-width:130px; max-width:130px; height:182px; min-height:182px; max-height:182px; }
    }
    @media (max-width:480px){
      .product-detail-wrap{ gap:10px }
      #main-product-image{ max-height:360px; object-fit:cover }
      /* Móvil: 3 columnas con gap reducido para que quepan bien */
      .complements-container{ grid-template-columns:repeat(3, 100px); gap:12px; max-width:324px; }
      .product-card-complementary{ width:100px; min-width:100px; max-width:100px; height:140px; min-height:140px; max-height:140px; }
      #variant-selector{ padding:4px; overflow:visible }
      .variant-btn{ margin:2px }
      
      /* Botones de compra en móvil - más compactos */
      .btn-primary, .btn-ghost {
        padding: 10px;
        font-size: 0.85rem;
        gap: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        text-align: center;
        white-space: nowrap;
      }
      
      .btn-primary span, .btn-ghost span {
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .btn-primary i, .btn-ghost i {
        font-size: 15px;
        flex-shrink: 0;
      }
    }
    
    /* =====================================================
       Tier Selector Styles
       ===================================================== */
    
    .variant-selector {
      display: flex;
      gap: 8px;
      margin-top: 25px;
      align-items: center;
      overflow: visible;
      padding: 4px;
      justify-content:space-around;
    }
    
    .variant-btn {
      position: relative;
      cursor: pointer;
      border-radius: 12px;
      overflow: visible;
      margin: 2px;
      border: 2px solid transparent;
      transition: all 0.2s ease;
      background: #fff;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 80px;
    }
    
    .variant-btn img {
      width: 96px;
      height: 96px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 6px;
    }
    
    .variant-label {
      font-size: 0.85rem;
      font-weight: 500;
      color: #071325;
      text-align: center;
      text-transform: capitalize;
    }
    
    .variant-btn:hover {
      border-color: rgba(var(--brand-rgb), 0.3);
      box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.1);
    }
    
    .variant-btn.selected,
    .variant-btn.active {
      border-color: var(--brand);
      box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.2);
      background: rgba(var(--brand-rgb), 0.02);
    }
    
    /* Centered circular badge for variant selection (do not recolor entire card) */
    .variant-btn .check {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      opacity: 0;
      transform: scale(0.98);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .variant-btn .check .badge {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.08);
      color: #fff;
      box-shadow: 0 6px 18px rgba(2,6,23,0.06);
      transform: scale(0.9);
      opacity: 0;
      transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
    }

    .variant-btn:hover .check { opacity: 1; transform: scale(1); }
    .variant-btn:hover .check .badge { opacity: 1; transform: scale(1); background: rgba(0,0,0,0.12); }

    .variant-btn.selected .check,
    .variant-btn.active .check { opacity: 0.5; transform: scale(1); }
    .variant-btn.selected .check .badge,
    .variant-btn.active .check .badge { opacity: 1; transform: scale(1); background: var(--brand); box-shadow: 0 8px 22px rgba(var(--brand-rgb),0.18); }

    .variant-btn .check svg { width: 18px; height: 18px; stroke-width:1.6; color: inherit; }
    
    /* =====================================================
       Complement Selector Styles
       ===================================================== */
    
    /* Tarjeta de complemento: 130×182px (tablet/escritorio); móvil 100×140px en @media */
    .product-card-complementary {
      position: relative;
      cursor: pointer;
      border-radius: 8px;
      overflow: visible;
      margin: 0;
      border: 2px solid transparent;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
      background: #fff;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      text-align: center;
      width: 130px;
      height: 182px;
      min-width: 130px;
      min-height: 182px;
      max-width: 130px;
      max-height: 182px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      box-sizing: border-box;
      gap: 0;
      flex-shrink: 0;
    }
    
    /* Zona superior: imagen centrada + precio arriba-derecha (badge) */
    .product-card-complementary .comp-top {
      position: relative;
      flex: 1 1 0;
      min-height: 0;
      overflow: hidden;
      border-radius: 8px 8px 0 0;
      background: #f8f9fa;
    }
    
    .product-card-complementary .comp-img {
      width: 100%;
      height: 100%;
      min-height: 80px;
      object-fit: cover;
      display: block;
      vertical-align: middle;
    }
    
    .product-card-complementary .comp-price {
      position: absolute;
      top: 6px;
      right: 6px;
      z-index: 2;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.95);
      color: var(--brand);
      font-size: 0.8rem;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }
    
    /* Nombre abajo a la izquierda */
    .product-card-complementary .comp-name {
      flex: 0 0 auto;
      font-size: 0.75rem;
      font-weight: 600;
      color: #071325;
      margin: 0;
      padding: 8px 8px 10px;
      line-height: 1.25;
      min-height: 2.5em;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
      text-align: left;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    
    .product-card-complementary:hover {
      border-color: rgba(var(--brand-rgb), 0.3);
      box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.1);
    }
    
    .product-card-complementary.selected {
      border-color: var(--brand);
      box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.2);
      background: rgba(var(--brand-rgb), 0.02);
      margin: 0;
      transform: none;
    }
    
    /* Centered circular badge for complement selection */
    .product-card-complementary .check {
      position: absolute;
      top: 22.5%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.98);
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.18s ease, transform 0.18s ease;
      z-index: 10;
    }

    .product-card-complementary .check .badge {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.08);
      color: #fff;
      box-shadow: 0 6px 18px rgba(2,6,23,0.06);
      transform: scale(0.92);
      opacity: 0;
      transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
    }

    .product-card-complementary:hover .check { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .product-card-complementary:hover .check .badge { opacity: 1; transform: scale(1); background: rgba(0,0,0,0.10); }

    .product-card-complementary.selected .check { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    .product-card-complementary.selected .check .badge { opacity: 1; transform: scale(1); background: var(--brand); box-shadow: 0 8px 28px rgba(var(--brand-rgb),0.18); }
    
    /* Ensure content area has proper spacing */
    .product-card-complementary > *:not(.check) {
      position: relative;
      z-index: 1;
    }

    .product-card-complementary .check svg { width: 20px; height: 20px; stroke-width:1.6; color: inherit; }
    
    /* =====================================================
       Variant Attributes Display
       ===================================================== */
    
    .variant-attributes {
      display: none;
      margin-top: 8px;
      margin-bottom: 16px;
      padding: 8px 12px;
      background: rgba(var(--brand-rgb), 0.05);
      border-radius: 8px;
      border-left: 3px solid var(--brand);
    }
    
    .variant-attributes .attribute {
      display: inline-block;
      font-size: 0.85rem;
      color: var(--brand);
      font-weight: 500;
      margin-right: 12px;
      text-transform: capitalize;
    }
    
    /* =====================================================
       More Complements Button
       ===================================================== */
    
    .complements-more-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid rgba(var(--brand-rgb), 0.12);
      background: transparent;
      color: var(--brand);
      font-weight: 700;
      font-size: 0.95rem;
      min-height: 36px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .complements-more-btn:hover {
      background: rgba(var(--brand-rgb), 0.05);
      border-color: rgba(var(--brand-rgb), 0.3);
    }
    
    .complements-more-btn svg {
      transition: transform 0.2s ease;
    }
    
    .complements-more-btn:hover svg:last-child {
      transform: rotate(90deg);
    }
    
    /* =====================================================
       Responsive Styles for Selectors
       ===================================================== */
    
    @media (max-width: 768px) {
      .variant-btn {
        min-width: 70px;
        padding: 6px;
      }
      
      .variant-btn img {
        width: 80px;
        height: 80px;
      }
      
      .variant-label {
        font-size: 0.8rem;
      }
      
      /* Tablet: 130px */
      .product-card-complementary {
        width: 130px;
        height: 182px;
        min-width: 130px;
        min-height: 182px;
        max-width: 130px;
        max-height: 182px;
      }
      
      .complements-container {
        grid-template-columns: repeat(3, 130px);
        max-width: 414px;
      }
    }
    
    @media (max-width: 480px) {
      .variant-selector {
        gap: 6px;
      }
      
      .variant-btn {
        min-width: 70px;
        padding: 4px;
      }
      
      .variant-btn img {
        width: 70px;
        height: 70px;
      }
      
      .variant-label {
        font-size: 0.75rem;
      }
      
      /* Tarjetas de complemento: mismo tamaño fijo en móvil */
      .product-card-complementary {
        width: 100px;
        height: 140px;
        min-width: 100px;
        min-height: 140px;
        max-width: 100px;
        max-height: 140px;
      }
      
      .complements-container {
        grid-template-columns: repeat(3, 100px);
        max-width: 324px;
      }
    }
    
    /* Complements Modal Styles */
    .complements-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    
    .complements-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
    }
    
    .complements-modal-container {
      position: relative;
      width: 100%;
      max-width: 600px;
      max-height: 80vh;
      margin: 0 auto;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #display-price {
      border-bottom: 2px solid var(--brand);
      margin-bottom: 10px;
    }
    
    .complements-modal-content {
      background: #fff;
      border-radius: 20px;
      width: 100%;
      max-width: 100%;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
      overflow: hidden;
    }
    
    .complements-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 24px 16px;
      border-bottom: 1px solid rgba(2, 6, 23, 0.08);
    }
    
    .complements-modal-title {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 700;
      color: #071325;
    }
    
    .complements-modal-close {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border: none;
      background: transparent;
      border-radius: 10px;
      cursor: pointer;
      color: var(--muted);
      transition: all 0.2s ease;
    }
    
    .complements-modal-close:hover {
      background: rgba(2, 6, 23, 0.05);
      color: #071325;
      transform: scale(1.05);
    }
    
    .complements-modal-body {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 24px;
      min-width: 0;
    }
    
    /* Modal specific styles to ensure normal classes work properly */
    /* Modal complement cards are now handled by modals.css with CSS Grid */
    
    /* Removed redundant styles - using standard product-card-complementary styles */
    
    .complements-modal-footer {
      padding: 20px 24px 24px;
      border-top: 1px solid rgba(2, 6, 23, 0.08);
      background: rgba(2, 6, 23, 0.02);
    }
    
    .complements-confirm-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 24px;
      font-size: 1.1rem;
      font-weight: 700;
      border-radius: 12px;
      border: none;
      background: linear-gradient(135deg, var(--brand), var(--accent-2));
      color: white;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .complements-confirm-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(var(--brand-rgb), 0.3);
    }
    
    /* Mobile optimizations */
    @media (max-width: 768px) {
      .complements-modal-container {
        padding: 12px;
        max-height: 95vh;
      }
      
      .complements-modal-content {
        border-radius: 16px;
        max-height: 90vh;
      }
      
      .complements-modal-header {
        padding: 20px 20px 16px;
      }
      
      .complements-modal-title {
        font-size: 1.3rem;
      }
      
      .complements-modal-body {
        padding: 20px;
      }
      
      .complements-modal-body .complements-container {
        grid-template-columns: repeat(3, 130px);
        max-width: 414px;
      }
      
      .complements-modal-footer {
        padding: 16px 20px 20px;
      }
      
      .complements-confirm-btn {
        padding: 14px 20px;
        font-size: 1rem;
      }
    }
    
    @media (max-width: 480px) {
      .complements-modal-container {
        padding: 8px;
      }
      
      .complements-modal-content {
        border-radius: 12px;
      }
      
      .complements-modal-header {
        padding: 16px 16px 12px;
      }
      
      .complements-modal-title {
        font-size: 1.2rem;
      }
      
      .complements-modal-body {
        padding: 16px;
      }
      
      .complements-modal-body .complements-container {
        grid-template-columns: repeat(3, 100px);
        max-width: 324px;
      }
    }