/* ============================================
   ShopV Template Mobile CSS v2.0
   Covers all 70+ component variants
   Breakpoints: 768px (tablet), 480px (phone), 360px (small phone)
   ============================================ */

/* ===== Global Reset ===== */
@media (max-width: 768px) {
  .layout-component {
    max-width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Hide horizontal scrollbars */
  body { overflow-x: hidden; }

  /* Force all inline styles with fixed widths to be responsive */
  [style*="width:"] { max-width: 100% !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="display: grid"] { grid-template-columns: 1fr !important; }
  [style*="display:flex"] { flex-wrap: wrap !important; }
}

/* ===== Header Components ===== */
@media (max-width: 768px) {
  .layout-component.hdr-v1,
  .layout-component.hdr-v2 {
    padding: 8px 12px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .layout-component.hdr-v1 nav,
  .layout-component.hdr-v2 nav {
    display: none !important;
  }
  .layout-component.hdr-v1 .nav-links,
  .layout-component.hdr-v2 .nav-links,
  .layout-component.hdr-v1 .nav-menu,
  .layout-component.hdr-v2 .nav-menu {
    display: none !important;
  }
  /* Show hamburger / mobile menu trigger */
  .layout-component.hdr-v1 .mobile-toggle,
  .layout-component.hdr-v2 .mobile-toggle,
  .layout-component.hdr-v1 .hamburger,
  .layout-component.hdr-v2 .hamburger {
    display: flex !important;
  }
  .layout-component.hdr-v3 {
    width: 100% !important;
    min-height: auto !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: none;
  }
  /* Logo smaller */
  .layout-component.hdr-v1 img,
  .layout-component.hdr-v2 img {
    max-height: 32px;
    width: auto;
  }
}

@media (max-width: 480px) {
  .layout-component.hdr-v1,
  .layout-component.hdr-v2 {
    padding: 6px 10px !important;
  }
  .layout-component.hdr-v1 img,
  .layout-component.hdr-v2 img {
    max-height: 28px;
  }
}

/* ===== Hero Components ===== */
@media (max-width: 768px) {
  .layout-component.hero-v1 {
    height: auto !important;
    min-height: 280px !important;
    padding: 40px 16px !important;
  }
  .layout-component.hero-v1 h1,
  .layout-component.hero-v1 h2 {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
  }
  .layout-component.hero-v1 p {
    font-size: 0.9rem !important;
  }
  .layout-component.hero-v2 {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .layout-component.hero-v2 > div:first-child {
    padding: 32px 16px !important;
  }
  .layout-component.hero-v2 > div:last-child {
    min-height: 200px !important;
  }
  .layout-component.hero-v2 h1,
  .layout-component.hero-v2 h2 {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
  }
  .layout-component.hero-v3 {
    padding: 32px 16px !important;
  }
  .layout-component.hero-v3 h1,
  .layout-component.hero-v3 h2 {
    font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
  }
  .layout-component.parallax-v1 {
    background-attachment: scroll !important;
    padding: 40px 16px !important;
    min-height: 300px !important;
  }
}

@media (max-width: 480px) {
  .layout-component.hero-v1 {
    min-height: 220px !important;
    padding: 28px 12px !important;
  }
  .layout-component.hero-v1 h1 {
    font-size: 1.4rem !important;
  }
  .layout-component.hero-v2 > div:first-child {
    padding: 24px 12px !important;
  }
}

/* ===== Banner / Announcement Components ===== */
@media (max-width: 768px) {
  .layout-component.bnr-v1,
  .layout-component.bnr-v2,
  .layout-component.bnr-v3 {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    text-align: center !important;
  }
  .layout-component.marquee-v1 {
    font-size: 0.75rem !important;
    padding: 6px 0 !important;
  }
  .layout-component.pb-v1,
  .layout-component.announcement-bar,
  .layout-component.ship-v1 {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
  }
}

/* ===== Product Grid Components ===== */
@media (max-width: 768px) {
  .layout-component.pg-v1 .product-grid-layout,
  .layout-component.pg-v2 .product-grid-layout {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .layout-component.pg-v1,
  .layout-component.pg-v2,
  .layout-component.pg-v3 {
    padding: 20px 12px !important;
  }
  .layout-component.pg-v3 .product-grid-layout {
    grid-template-columns: repeat(2, 1fr) !important;
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    display: grid !important;
  }
  /* Product card adjustments */
  .layout-component.pg-v1 .product-card,
  .layout-component.pg-v2 .product-card,
  .layout-component.pg-v3 .product-card {
    min-width: 0 !important;
    width: 100% !important;
  }
  .layout-component.pg-v1 img,
  .layout-component.pg-v2 img,
  .layout-component.pg-v3 img {
    width: 100%;
    height: auto;
  }
  .layout-component.pd-v1,
  .layout-component.pd-v2 {
    padding: 20px 12px !important;
  }
  .layout-component.pd-v1 .product-detail-layout,
  .layout-component.pd-v2 .product-detail-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Product carousel */
  .layout-component.pc-v1 .product-carousel-track {
    gap: 12px !important;
  }
  .layout-component.pc-v1 .product-card {
    min-width: 160px !important;
  }
}

@media (max-width: 480px) {
  .layout-component.pg-v1 .product-grid-layout,
  .layout-component.pg-v2 .product-grid-layout,
  .layout-component.pg-v3 .product-grid-layout {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .layout-component.pg-v1,
  .layout-component.pg-v2,
  .layout-component.pg-v3 {
    padding: 16px 10px !important;
  }
}

/* ===== Split Content ===== */
@media (max-width: 768px) {
  .layout-component.split-v1 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 24px 12px !important;
  }
  .layout-component.split-v1 > div {
    min-width: 0 !important;
  }
}

/* ===== Feature Components ===== */
@media (max-width: 768px) {
  .layout-component.feat-v1,
  .layout-component.feat-v2 {
    padding: 24px 12px !important;
  }
  .layout-component.feat-v1 .feature-grid,
  .layout-component.feat-v1 .features-list,
  .layout-component.feat-v2 .feature-grid,
  .layout-component.feat-v2 .features-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .layout-component.feat-v1 .feature-item,
  .layout-component.feat-v2 .feature-item {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .layout-component.feat-v1 img,
  .layout-component.feat-v2 img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
}

/* ===== Footer Components ===== */
@media (max-width: 768px) {
  .layout-component.ftr-v1,
  .layout-component.ftr-v2,
  .layout-component.ftr-v3 {
    padding: 24px 12px !important;
    text-align: center !important;
  }
  .layout-component.ftr-v2 .footer-grid,
  .layout-component.ftr-v2 .footer-columns,
  .layout-component.ftr-v3 .footer-grid,
  .layout-component.ftr-v3 .footer-columns {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    text-align: left !important;
  }
  .layout-component.ftr-v2 .footer-col,
  .layout-component.ftr-v3 .footer-col {
    min-width: 0 !important;
  }
  .layout-component.ftr-v1 .social-links,
  .layout-component.ftr-v2 .social-links,
  .layout-component.ftr-v3 .social-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .layout-component.ftr-v1 .social-links a,
  .layout-component.ftr-v2 .social-links a,
  .layout-component.ftr-v3 .social-links a {
    margin: 0 4px !important;
  }
  .layout-component.ftr-v2 .footer-bottom,
  .layout-component.ftr-v3 .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}

/* ===== Testimonial Components ===== */
@media (max-width: 768px) {
  .layout-component.tst-v1 {
    padding: 24px 12px !important;
  }
  .layout-component.tst-v1 .testimonial-grid,
  .layout-component.tst-v1 .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .layout-component.tst-v1 .testimonial-card {
    padding: 16px !important;
  }
  .layout-component.rev-v1 {
    padding: 20px 12px !important;
  }
  .layout-component.rev-v1 .review-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Newsletter Components ===== */
@media (max-width: 768px) {
  .layout-component.nl-v1 {
    padding: 24px 16px !important;
    text-align: center !important;
  }
  .layout-component.nl-v1 .newsletter-form,
  .layout-component.nl-v1 form {
    flex-direction: column !important;
    gap: 10px !important;
    max-width: 100% !important;
  }
  .layout-component.nl-v1 input[type="email"],
  .layout-component.nl-v1 input {
    width: 100% !important;
    min-height: 44px;
  }
  .layout-component.nl-v1 button,
  .layout-component.nl-v1 .btn {
    width: 100% !important;
    min-height: 44px;
  }
}

/* ===== Carousel / Slideshow Components ===== */
@media (max-width: 768px) {
  .layout-component.car-v1 {
    padding: 16px 8px !important;
  }
  .layout-component.car-v1 .carousel-track,
  .layout-component.car-v1 .carousel-inner {
    gap: 8px !important;
  }
  .layout-component.car-v1 .carousel-item,
  .layout-component.car-v1 .carousel-slide {
    min-width: 280px !important;
  }
  .layout-component.slideshow-v1,
  .layout-component.slideshow-v2,
  .layout-component.slideshow-v3 {
    height: auto !important;
    min-height: 240px !important;
  }
  .layout-component.slideshow-v1 .slide-content,
  .layout-component.slideshow-v2 .slide-content,
  .layout-component.slideshow-v3 .slide-content {
    padding: 24px 16px !important;
  }
  .layout-component.slideshow-v1 h1,
  .layout-component.slideshow-v1 h2,
  .layout-component.slideshow-v2 h1,
  .layout-component.slideshow-v2 h2,
  .layout-component.slideshow-v3 h1,
  .layout-component.slideshow-v3 h2 {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
  }
}

/* ===== CTA Block ===== */
@media (max-width: 768px) {
  .layout-component.cta-v1 {
    padding: 24px 16px !important;
    text-align: center !important;
  }
  .layout-component.cta-v1 .cta-buttons,
  .layout-component.cta-v1 .btn-group {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .layout-component.cta-v1 .btn,
  .layout-component.cta-v1 button {
    width: 100% !important;
    min-height: 44px;
  }
}

/* ===== Countdown Components ===== */
@media (max-width: 768px) {
  .layout-component.cdt-v1 {
    padding: 20px 12px !important;
  }
  .layout-component.cdt-v1 .countdown-timer,
  .layout-component.cdt-v1 .timer {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .layout-component.cdt-v1 .countdown-unit,
  .layout-component.cdt-v1 .timer-unit {
    min-width: 60px !important;
    padding: 8px 4px !important;
  }
  .layout-component.cdt-v1 .countdown-number {
    font-size: 1.5rem !important;
  }
}

/* ===== Stats Components ===== */
@media (max-width: 768px) {
  .layout-component.stats-v1 {
    padding: 20px 12px !important;
  }
  .layout-component.stats-v1 .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .layout-component.stats-v1 .stat-number {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
}

@media (max-width: 480px) {
  .layout-component.stats-v1 .stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Logo Strip / Brand Bar ===== */
@media (max-width: 768px) {
  .layout-component.logo-v1 {
    padding: 16px 12px !important;
  }
  .layout-component.logo-v1 .logo-list,
  .layout-component.logo-v1 .brand-list {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .layout-component.logo-v1 img {
    max-height: 32px !important;
    max-width: 100px !important;
  }
}

/* ===== Instagram Feed ===== */
@media (max-width: 768px) {
  .layout-component.ig-v1 {
    padding: 16px 8px !important;
  }
  .layout-component.ig-v1 .instagram-grid,
  .layout-component.ig-v1 .feed-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
}

@media (max-width: 480px) {
  .layout-component.ig-v1 .instagram-grid,
  .layout-component.ig-v1 .feed-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===== Video Section ===== */
@media (max-width: 768px) {
  .layout-component.vid-v1 {
    padding: 20px 12px !important;
  }
  .layout-component.vid-v1 video,
  .layout-component.vid-v1 iframe,
  .layout-component.vid-v1 .video-container {
    width: 100% !important;
    height: auto !important;
    max-height: 240px !important;
  }
}

/* ===== FAQ Components ===== */
@media (max-width: 768px) {
  .layout-component.faq,
  .layout-component[class*="faq"] {
    padding: 20px 12px !important;
  }
  .layout-component.faq .faq-item,
  .layout-component[class*="faq"] .faq-item {
    padding: 12px !important;
  }
  .layout-component.faq .faq-question,
  .layout-component[class*="faq"] .faq-question {
    font-size: 0.95rem !important;
  }
  .layout-component.faq .faq-answer,
  .layout-component[class*="faq"] .faq-answer {
    font-size: 0.85rem !important;
  }
}

/* ===== Compare Table / Pricing Table ===== */
@media (max-width: 768px) {
  .layout-component.cmp-v1,
  .layout-component.pt-v1 {
    padding: 20px 12px !important;
    overflow-x: auto !important;
  }
  .layout-component.cmp-v1 table,
  .layout-component.pt-v1 table,
  .layout-component.cmp-v1 .comparison-table,
  .layout-component.pt-v1 .pricing-table {
    min-width: 600px !important;
    font-size: 0.85rem !important;
  }
  .layout-component.pt-v1 .pricing-cards,
  .layout-component.pt-v1 .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .layout-component.pt-v1 .pricing-card {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ===== Collection Grid / List ===== */
@media (max-width: 768px) {
  .layout-component.cg-v1 .collection-grid,
  .layout-component.cg-v1 .collections-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .layout-component.cl-v1 .collection-list {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .layout-component.cl-v1 .collection-item {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  .layout-component.cg-v1 .collection-grid,
  .layout-component.cg-v1 .collections-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Mega Menu ===== */
@media (max-width: 768px) {
  .layout-component.mega-v1 {
    display: none !important;
  }
  .layout-component.mega-v1.mobile-open {
    display: block !important;
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 999;
  }
  .layout-component.mega-v1 .mega-menu-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 16px !important;
  }
}

/* ===== Team / About Components ===== */
@media (max-width: 768px) {
  .layout-component.team-v1 {
    padding: 24px 12px !important;
  }
  .layout-component.team-v1 .team-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .layout-component.team-v1 .team-member {
    max-width: 280px;
    margin: 0 auto;
  }
  .layout-component.team-v1 img {
    width: 80px;
    height: 80px;
  }
}

/* ===== Map / Contact Form ===== */
@media (max-width: 768px) {
  .layout-component.map-v1 {
    padding: 16px 12px !important;
  }
  .layout-component.map-v1 iframe,
  .layout-component.map-v1 .map-container {
    width: 100% !important;
    height: 240px !important;
  }
  .layout-component.filter-v1,
  .layout-component.search-v1 {
    padding: 12px !important;
  }
  .layout-component.filter-v1 .filter-bar,
  .layout-component.filter-v1 .filter-options {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .layout-component.search-v1 input {
    width: 100% !important;
    min-height: 44px;
  }
}

/* ===== Blog / News ===== */
@media (max-width: 768px) {
  .layout-component.blog-v1 {
    padding: 20px 12px !important;
  }
  .layout-component.blog-v1 .blog-grid,
  .layout-component.blog-v1 .posts-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .layout-component.blog-v1 .blog-card {
    max-width: 100% !important;
  }
  .layout-component.blog-v1 img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
  }
}

/* ===== Text / Image / Divider ===== */
@media (max-width: 768px) {
  .layout-component.txt-v1 {
    padding: 16px 12px !important;
    font-size: 0.9rem !important;
  }
  .layout-component.txt-v1 h1 { font-size: 1.5rem !important; }
  .layout-component.txt-v1 h2 { font-size: 1.3rem !important; }
  .layout-component.txt-v1 h3 { font-size: 1.1rem !important; }
  .layout-component.img-v1 {
    padding: 12px !important;
  }
  .layout-component.img-v1 img {
    width: 100% !important;
    height: auto !important;
  }
  .layout-component.sc-v1 {
    margin: 8px 0 !important;
  }
}

/* ===== Tabs ===== */
@media (max-width: 768px) {
  .layout-component.tabs-v1 {
    padding: 16px 12px !important;
  }
  .layout-component.tabs-v1 .tab-headers,
  .layout-component.tabs-v1 .tab-nav {
    flex-direction: column !important;
    gap: 4px !important;
    border-bottom: none !important;
  }
  .layout-component.tabs-v1 .tab-header,
  .layout-component.tabs-v1 .tab-btn {
    width: 100% !important;
    text-align: left !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  }
}

/* ===== Loyalty / Reward / Referral ===== */
@media (max-width: 768px) {
  .layout-component.loyalty-v1 {
    padding: 20px 12px !important;
  }
  .layout-component.loyalty-v1 .loyalty-grid,
  .layout-component.loyalty-v1 .rewards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .layout-component.rp-v1 {
    padding: 20px 12px !important;
    text-align: center !important;
  }
  .layout-component.rp-v1 .referral-form {
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* ===== Stock / Shipping Badge ===== */
@media (max-width: 768px) {
  .layout-component.stock-v1 {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
  }
  .layout-component.ship-v1 .shipping-bar,
  .layout-component.ship-v1 .shipping-info {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }
}

/* ===== Trust Badge / Sustainability ===== */
@media (max-width: 768px) {
  .layout-component.bs-v1,
  .layout-component.csg-v1,
  .layout-component.cookie-v1 {
    padding: 12px !important;
    text-align: center !important;
  }
  .layout-component.bs-v1 .badge-grid,
  .layout-component.csg-v1 .sustainability-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .layout-component.bs-v1 .badge-item,
  .layout-component.csg-v1 .badge-item {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .layout-component.bs-v1 img,
  .layout-component.csg-v1 img {
    width: 32px;
    height: 32px;
  }
}

/* ===== Gift Card / Wholesale / Age Verification ===== */
@media (max-width: 768px) {
  .layout-component.gc-v1 {
    padding: 20px 12px !important;
    text-align: center !important;
  }
  .layout-component.gc-v1 .gift-card-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .layout-component.wholesale-v1,
  .layout-component.age-v1 {
    padding: 20px 12px !important;
  }
  .layout-component.wholesale-v1 form {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .layout-component.age-v1 {
    text-align: center !important;
  }
  .layout-component.age-v1 .age-verification-buttons {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ===== Chat / Popup ===== */
@media (max-width: 768px) {
  .layout-component.chat-v1 {
    bottom: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: 320px !important;
  }
  .layout-component.popup-v1 {
    padding: 20px 16px !important;
    max-width: calc(100vw - 24px) !important;
  }
  .layout-component.popup-v1 .popup-content {
    padding: 20px !important;
  }
}

/* ===== Lookbook / Before-After ===== */
@media (max-width: 768px) {
  .layout-component.lb-v1 {
    padding: 16px 8px !important;
  }
  .layout-component.lb-v1 .lookbook-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .layout-component.ba-v1 {
    padding: 16px 12px !important;
  }
  .layout-component.ba-v1 .before-after-container {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .layout-component.ba-v1 img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ===== Influencer / User Gallery ===== */
@media (max-width: 768px) {
  .layout-component.influencer-v1,
  .layout-component[class*="influencer"] {
    padding: 16px 8px !important;
  }
  .layout-component.influencer-v1 .influencer-grid,
  .layout-component[class*="influencer"] .influencer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .layout-component.rv-v1 .video-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .layout-component.influencer-v1 .influencer-grid,
  .layout-component[class*="influencer"] .influencer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Shoppable Video ===== */
@media (max-width: 768px) {
  .layout-component[class*="shoppable"] {
    padding: 16px 8px !important;
  }
  .layout-component[class*="shoppable"] .video-card {
    min-width: 200px !important;
  }
  .layout-component[class*="shoppable"] video {
    max-height: 300px !important;
  }
}

/* ===== Quiz / Personalization ===== */
@media (max-width: 768px) {
  .layout-component[class*="quiz"] {
    padding: 20px 12px !important;
  }
  .layout-component[class*="quiz"] .quiz-options {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ===== Bundle Builder ===== */
@media (max-width: 768px) {
  .layout-component[class*="bundle"] {
    padding: 20px 12px !important;
  }
  .layout-component[class*="bundle"] .bundle-grid,
  .layout-component[class*="bundle"] .bundle-items {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ===== Subscription Box ===== */
@media (max-width: 768px) {
  .layout-component[class*="subscription"] {
    padding: 20px 12px !important;
  }
  .layout-component[class*="subscription"] .subscription-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .layout-component[class*="subscription"] .plan-card {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ===== Store Locator ===== */
@media (max-width: 768px) {
  .layout-component[class*="store-locator"] {
    padding: 16px 12px !important;
  }
  .layout-component[class*="store-locator"] .locator-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .layout-component[class*="store-locator"] .map-container {
    height: 200px !important;
  }
}

/* ===== AR Preview / Virtual Try-On ===== */
@media (max-width: 768px) {
  .layout-component[class*="ar-"],
  .layout-component[class*="virtual"] {
    padding: 16px 12px !important;
    text-align: center !important;
  }
  .layout-component[class*="ar-"] .ar-container,
  .layout-component[class*="virtual"] .try-on-container {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* ===== Press Mentions ===== */
@media (max-width: 768px) {
  .layout-component[class*="press"] {
    padding: 16px 12px !important;
  }
  .layout-component[class*="press"] .press-grid,
  .layout-component[class*="press"] .press-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .layout-component[class*="press"] .press-logo {
    max-width: 120px !important;
  }
}

@media (max-width: 480px) {
  .layout-component[class*="press"] .press-grid,
  .layout-component[class*="press"] .press-list {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Size Finder / Color Swatch ===== */
@media (max-width: 768px) {
  .layout-component[class*="size-finder"],
  .layout-component[class*="color-swatch"] {
    padding: 16px 12px !important;
  }
  .layout-component[class*="size-finder"] .size-grid,
  .layout-component[class*="color-swatch"] .swatch-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
}

/* ===== Carbon Neutral / Ingredients ===== */
@media (max-width: 768px) {
  .layout-component[class*="carbon"],
  .layout-component[class*="ingredients"] {
    padding: 16px 12px !important;
    text-align: center !important;
  }
  .layout-component[class*="carbon"] .carbon-grid,
  .layout-component[class*="ingredients"] .ingredients-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ===== Waitlist ===== */
@media (max-width: 768px) {
  .layout-component[class*="waitlist"] {
    padding: 20px 12px !important;
    text-align: center !important;
  }
  .layout-component[class*="waitlist"] .waitlist-form {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .layout-component[class*="waitlist"] input {
    width: 100% !important;
    min-height: 44px;
  }
  .layout-component[class*="waitlist"] button {
    width: 100% !important;
    min-height: 44px;
  }
}

/* ===== Social Links ===== */
@media (max-width: 768px) {
  .layout-component.soc-v1 {
    padding: 12px !important;
    justify-content: center !important;
  }
  .layout-component.soc-v1 .social-icons {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .layout-component.soc-v1 .social-icon {
    width: 36px;
    height: 36px;
  }
}

/* ===== Product Detail ===== */
@media (max-width: 768px) {
  .layout-component.pd-v1 .product-images,
  .layout-component.pd-v2 .product-images {
    grid-template-columns: repeat(4, 60px) !important;
    gap: 6px !important;
    overflow-x: auto !important;
  }
  .layout-component.pd-v1 .product-image-main,
  .layout-component.pd-v2 .product-image-main {
    height: 300px !important;
  }
  .layout-component.pd-v1 .product-info,
  .layout-component.pd-v2 .product-info {
    padding: 16px 0 !important;
  }
  .layout-component.pd-v1 .product-title,
  .layout-component.pd-v2 .product-title {
    font-size: 1.3rem !important;
  }
  .layout-component.pd-v1 .product-price,
  .layout-component.pd-v2 .product-price {
    font-size: 1.2rem !important;
  }
  .layout-component.pd-v1 .add-to-cart,
  .layout-component.pd-v2 .add-to-cart {
    width: 100% !important;
    min-height: 48px;
    font-size: 1rem !important;
  }
  .layout-component.pd-v1 .quantity-selector,
  .layout-component.pd-v2 .quantity-selector {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* ===== Breadcrumb ===== */
@media (max-width: 768px) {
  .layout-component.bc-v1 {
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
  }
  .layout-component.bc-v1 .breadcrumb {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
}

/* ===== Countdown Urgency ===== */
@media (max-width: 768px) {
  .layout-component[class*="countdown-urgency"] {
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
    flex-wrap: wrap !important;
    text-align: center !important;
  }
}

/* ===== Rating Summary ===== */
@media (max-width: 768px) {
  .layout-component[class*="rating"] {
    padding: 16px 12px !important;
  }
  .layout-component[class*="rating"] .rating-summary {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .layout-component[class*="rating"] .rating-bars {
    width: 100% !important;
  }
}

/* ===== RTL Support for Arabic ===== */
@media (max-width: 768px) {
  [dir="rtl"] .layout-component.hdr-v1,
  [dir="rtl"] .layout-component.hdr-v2 {
    text-align: right !important;
  }
  [dir="rtl"] .layout-component.ftr-v1,
  [dir="rtl"] .layout-component.ftr-v2,
  [dir="rtl"] .layout-component.ftr-v3 {
    text-align: right !important;
  }
  [dir="rtl"] .layout-component.ftr-v2 .footer-columns,
  [dir="rtl"] .layout-component.ftr-v3 .footer-columns {
    text-align: right !important;
  }
}

/* ===== Small Phone (360px) Fine-tuning ===== */
@media (max-width: 360px) {
  .layout-component {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .layout-component.hdr-v1,
  .layout-component.hdr-v2 {
    padding: 4px 8px !important;
  }
  .layout-component.hero-v1 h1,
  .layout-component.hero-v2 h1,
  .layout-component.hero-v3 h1 {
    font-size: 1.2rem !important;
  }
  .layout-component.pg-v1 .product-grid-layout,
  .layout-component.pg-v2 .product-grid-layout {
    gap: 6px !important;
  }
  .layout-component.cta-v1 .btn,
  .layout-component.nl-v1 button {
    font-size: 0.85rem !important;
  }
}

/* ===== Print-friendly ===== */
@media print {
  .layout-component.hdr-v1,
  .layout-component.hdr-v2,
  .layout-component.hdr-v3,
  .layout-component.chat-v1,
  .layout-component.popup-v1,
  .layout-component.cookie-v1 {
    display: none !important;
  }
}