/* Responsive Media Queries */
@media (max-width:1440px) {
  .container,.header-container,.hero-container,.colors-section,.feature-container { padding-left:4rem; padding-right:4rem; }
}
@media (max-width:1024px) {
  .container,.header-container,.hero-container,.colors-section,.feature-container { padding-left:2rem; padding-right:2rem; }
  .hero-title { font-size:3rem; }
  .hero-container { column-gap:2rem; }
  .feature-strip { width:calc(100% - 2rem); }
  .feature-container { grid-template-columns:repeat(2,1fr); gap:3rem 2rem; }
  .color-card { width:140px; flex-basis:140px; }
  .card-image-area { height:160px; }
}
@media (max-width:768px) {
  .desktop-nav { display:none; }
  .header-actions .btn { display:none; }
  .header-container { height:76px; padding-left:1rem; padding-right:1rem; }
  .brand-logo { width:132px; max-height:44px; }
  .header-actions { gap:1rem; }
  .cart-icon svg { width:27px; height:27px; }
  .mobile-menu-toggle { display:flex; flex-direction:column; justify-content:space-around; align-items:center; background:transparent; border:0; cursor:pointer; }
  .hamburger { width:24px; height:2px; background:#000; position:relative; transition:all .3s linear; }
  .hamburger::before,.hamburger::after { content:""; position:absolute; width:24px; height:2px; background:#000; transition:all .3s linear; left:0; }
  .hamburger::before { top:-7px; } .hamburger::after { top:7px; }
  .mobile-menu-toggle.active .hamburger { background:transparent; }
  .mobile-menu-toggle.active .hamburger::before { transform:rotate(45deg); top:0; }
  .mobile-menu-toggle.active .hamburger::after { transform:rotate(-45deg); top:0; }
  .mobile-nav-overlay { top:76px; height:calc(100vh - 76px); }

  .hero { padding:1.55rem 0 2.5rem; background:#fff; }
  .hero-container {
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "intro"
      "image"
      "actions"
      "reviews"
      "support";
    gap:0;
    padding-left:1rem;
    padding-right:1rem;
  }
  .hero-intro { grid-area:intro; text-align:center; margin-bottom:1.2rem; }
  .hero-image-area { grid-area:image; }
  .hero-actions { grid-area:actions; }
  .reviews-row { grid-area:reviews; }
  .hero-support { grid-area:support; }
  .eyebrow { font-family:var(--font-family); font-size:.82rem; font-weight:800; letter-spacing:.04em; color:var(--color-primary); margin-bottom:.7rem; text-align:center; }
  .hero-title { font-size:2.55rem; line-height:1.04; letter-spacing:-.8px; margin-bottom:0; text-align:center; }
  .title-line { white-space:nowrap; }
  .hero-image-area { aspect-ratio:4/3; margin-top:.15rem; margin-bottom:1.35rem; width:100%; }
  .hero-image-placeholder { border-radius:14px; }
  .hero-image-placeholder::before,.hero-image-placeholder::after { width:10%; }
  .hero-image { object-position:center center; }
  .slider-btn { width:44px; height:44px; font-size:1.55rem; }
  .slider-btn.prev-btn { left:-8px; }
  .slider-btn.next-btn { right:-8px; }

  .hero-actions { display:grid; grid-template-columns:1.15fr .9fr; gap:.75rem; margin:0 0 1.15rem; }
  .btn-large { width:100%; padding:.95rem .85rem; font-size:.94rem; }
  .hero-primary-cta { border-radius:10px; box-shadow:0 10px 22px rgba(230,48,32,.2); }
  .hero-secondary-cta { border-radius:10px; }
  .reviews-row { justify-content:center; gap:.65rem; margin-bottom:2.1rem; flex-wrap:wrap; }
  .review-text { font-size:.86rem; }
  .stars svg { width:18px; height:18px; }

  .hero-support { text-align:center; margin-top:.2rem; }
  .hero-subtitle { font-size:1rem; margin-bottom:1.6rem; line-height:1.55; }
  .trust-icons { grid-template-columns:1fr 1fr; gap:1.25rem 1rem; margin-bottom:0; }
  .trust-item { justify-content:flex-start; text-align:left; gap:.7rem; }
  .icon-holder { width:42px; height:42px; flex-basis:42px; }
  .trust-item span { font-size:.86rem; }

  .colors-section { padding:2.5rem 1rem 3rem; }
  .section-header { margin-bottom:1.8rem; }
  .section-header h2 { font-size:1.8rem; }
  .section-header p { font-size:1rem; }
  .carousel-nav-btn { display:none; }
  .color-carousel { scroll-snap-type:x mandatory; padding:.75rem 0 1rem; gap:.8rem; }
  .color-card { width:155px; flex:0 0 155px; scroll-snap-align:start; }
  .card-image-area { height:170px; }
  .feature-strip { padding:2.5rem 1rem; margin-top:1rem; width:calc(100% - 1.5rem); }
  .feature-container { grid-template-columns:1fr 1fr; gap:2.25rem 1rem; padding:0; }
  .feature-icon-wrapper { width:52px; height:52px; border-radius:14px; }
  .feature-text h3 { font-size:.9rem; }
  .feature-text p { font-size:.8rem; }
}
@media (max-width:430px) {
  .header-container { padding-left:.85rem; padding-right:.85rem; }
  .brand-logo { width:132px; max-height:44px; }
  .hero-container { padding-left:.9rem; padding-right:.9rem; }
  .hero-title { font-size:2.35rem; }
  .eyebrow { font-size:.78rem; }
  .hero-image-area { aspect-ratio:1.08/1; }
  .hero-actions { grid-template-columns:1.18fr .82fr; gap:.6rem; }
  .btn-large { font-size:.88rem; padding:.9rem .6rem; }
  .hero-subtitle br { display:none; }
  .trust-icons { gap:1.1rem .75rem; }
  .trust-item { gap:.55rem; }
  .trust-item span { font-size:.82rem; }
}
@media (max-width:365px) {
  .brand-logo { width:124px; }
  .hero-title { font-size:2.08rem; }
  .hero-actions { grid-template-columns:1fr; }
  .hero-secondary-cta { min-height:50px; }
  .reviews-row { margin-top:.1rem; }
  .feature-container { grid-template-columns:1fr; }
}

/* HIRU.INK Mobile Polish V3 — mobile only */
@media (max-width: 768px) {
  /* 1) Softer frosted-glass mobile header */
  .site-header {
    background: rgba(255,255,255,.68) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    border-bottom: 1px solid rgba(17,24,39,.06);
    box-shadow: 0 8px 24px rgba(17,24,39,.06);
  }

  /* Keep the approved smaller mobile logo */
  .brand-logo {
    width: 124px !important;
    max-height: 42px !important;
  }

  /* Ensure eyebrow stays centered and red on mobile */
  .eyebrow {
    color: var(--color-primary) !important;
    text-align: center !important;
  }

  /* 2) Premium glass-red CTA */
  .hero-primary-cta {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(230,48,32,.96), rgba(197,37,22,.88)) !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    box-shadow: 0 12px 28px rgba(230,48,32,.30), inset 0 1px 0 rgba(255,255,255,.24) !important;
    -webkit-backdrop-filter: blur(12px) saturate(145%);
    backdrop-filter: blur(12px) saturate(145%);
    border-radius: 14px !important;
    font-weight: 800 !important;
  }
  .hero-primary-cta:active { transform: translateY(1px) scale(.995); }

  /* 3) Mobile colour carousel ~50% more compact */
  .color-carousel {
    gap: .55rem !important;
    padding: .55rem 0 .85rem !important;
  }
  .color-card {
    width: 102px !important;
    flex: 0 0 102px !important;
    border-radius: 9px !important;
  }
  .card-image-area {
    height: 106px !important;
  }
  .card-info {
    padding: .42rem .28rem !important;
  }
  .color-name {
    font-size: .62rem !important;
    line-height: 1.2 !important;
  }
  .color-hex, .color-sku {
    font-size: .57rem !important;
  }
  .color-specs {
    font-size: .56rem !important;
    line-height: 1.22 !important;
    padding-top: .38rem !important;
  }
}

@media (max-width: 430px) {
  .brand-logo { width: 120px !important; max-height: 40px !important; }
  .color-card { width: 96px !important; flex-basis: 96px !important; }
  .card-image-area { height: 100px !important; }
}

/* HIRU.INK Mobile USA Conversion Polish V4 — MOBILE ONLY */
@media (max-width: 768px) {
  /* Stronger iOS-safe glass header: keeps the glass feel but prevents page text from clashing */
  .site-header {
    background: rgba(255,255,255,.92) !important;
    -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
    backdrop-filter: blur(20px) saturate(145%) !important;
    border-bottom: 1px solid rgba(17,24,39,.07) !important;
    box-shadow: 0 6px 20px rgba(17,24,39,.07) !important;
    isolation: isolate;
  }
  .header-container { height: 70px !important; }
  .brand-logo {
    width: 108px !important;
    max-height: 38px !important;
    object-fit: contain !important;
  }

  /* Exact mobile hero hierarchy */
  .hero { padding-top: 1.25rem !important; }
  .hero-intro { margin-bottom: 1rem !important; }
  .eyebrow {
    display: block !important;
    margin-bottom: .7rem !important;
    color: var(--color-primary) !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    letter-spacing: .055em !important;
    text-align: center !important;
  }
  .hero-title {
    text-align: center !important;
    font-size: 2.22rem !important;
    line-height: 1.01 !important;
    letter-spacing: -1px !important;
    margin: 0 !important;
  }
  .hero-title .title-line {
    display: block !important;
    white-space: nowrap !important;
  }
  .hero-title .title-shirt { color: var(--color-primary) !important; }

  .hero-image-area {
    margin-top: .2rem !important;
    margin-bottom: 1rem !important;
    aspect-ratio: 1.18 / 1 !important;
  }
  .hero-image-placeholder {
    border-radius: 16px !important;
    box-shadow: 0 12px 30px rgba(17,24,39,.08) !important;
  }

  /* Conversion-focused CTA: primary is unmistakably red, secondary remains clean */
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1.18fr .82fr !important;
    gap: .62rem !important;
    margin: 0 0 .95rem !important;
  }
  .hero-primary-cta {
    min-height: 52px !important;
    background: linear-gradient(135deg,#F23828 0%,#E63020 55%,#C52516 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.40) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 26px rgba(230,48,32,.28), inset 0 1px 0 rgba(255,255,255,.28) !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
  .hero-secondary-cta {
    min-height: 52px !important;
    background: rgba(255,255,255,.82) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(17,24,39,.10) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 18px rgba(17,24,39,.05) !important;
    white-space: nowrap !important;
  }
  .reviews-row {
    margin-bottom: 1.55rem !important;
    gap: .55rem !important;
  }

  /* Support copy is deliberately after the conversion elements */
  .hero-support { margin-top: 0 !important; }
  .hero-subtitle { margin-bottom: 1.35rem !important; }

  /* Mobile colour picker: compact US-commerce swatches, not desktop spec cards */
  .colors-section { padding: 2.15rem .85rem 2.5rem !important; }
  .section-header { margin-bottom: 1.25rem !important; }
  .section-header h2 { font-size: 1.55rem !important; line-height: 1.1 !important; }
  .section-header p { font-size: .88rem !important; margin-top: .45rem !important; }
  .color-carousel {
    gap: .52rem !important;
    padding: .4rem .1rem .7rem !important;
  }
  .color-card {
    width: 84px !important;
    flex: 0 0 84px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    scroll-snap-align: center !important;
  }
  .card-image-area { height: 82px !important; }
  .card-info { padding: .42rem .24rem .48rem !important; }
  .color-name {
    font-size: .58rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  .color-hex,
  .color-sku,
  .color-specs { display: none !important; }
  .carousel-dots { margin-top: .3rem !important; gap: .35rem !important; }
  .dot { width: 6px !important; height: 6px !important; }
}

@media (max-width: 390px) {
  .brand-logo { width: 102px !important; max-height: 36px !important; }
  .hero-title { font-size: 2.05rem !important; }
  .hero-actions { grid-template-columns: 1.12fr .88fr !important; }
  .btn-large { font-size: .82rem !important; padding-left: .5rem !important; padding-right: .5rem !important; }
  .color-card { width: 80px !important; flex-basis: 80px !important; }
  .card-image-area { height: 78px !important; }
}