/* =============================================================================
   product-mobile.css — UR Perfumes
   All responsive overrides for single-product pages.
   Loaded separately from product.css to keep desktop and mobile styles clean.
   Breakpoints: 1200 · 1023 · 767 · 480
============================================================================= */

/* ── ≤ 1200px ──────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .product-hero-inner { gap: 4.8rem; }
  .product-gallery { flex: 0 0 52%; }
}

/* ── ≤ 1023px (tablet landscape) ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .product-page-banner { padding-block: calc(var(--header-h) + var(--announce-h) + 1.6rem) 2rem; }
  .product-hero { padding-block: 4rem 8rem; }
  .product-hero-inner { gap: 4rem; }
  .product-gallery { flex: 0 0 50%; }
  .product-gallery-thumbs { width: 6.4rem; }
  .product-thumb { width: 6.4rem; height: 8rem; }
  .product-notes-grid { grid-template-columns: 1fr; }
  .product-note-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .product-note-col:last-child { border-bottom: none; }
  .product-story-inner { gap: 5.6rem; }
  .product-details-inner { grid-template-columns: 1fr; gap: 4rem; }
  .product-related-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── ≤ 767px (mobile) ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Sticky CTA */
  .product-sticky-cta { display: block; }

  /* Banner */
  .product-page-banner { padding-block: calc(var(--header-h) + var(--announce-h) + 1.2rem) 1.6rem; }
  .product-banner-breadcrumb { font-size: 1.05rem; gap: 0.4rem 0.8rem; }

  /* Hero */
  .product-hero { padding-block: 2.4rem 4rem; }
  .product-hero-inner { flex-direction: column; gap: 0; }

  /* Gallery — full width, portrait image */
  .product-gallery { flex: none; width: 100%; flex-direction: column; align-items: stretch; margin-bottom: 2.4rem; }
  .product-gallery-main { aspect-ratio: 3 / 4; }
  .product-gallery-thumbs {
    order: 0;
    flex-direction: row;
    width: auto;
    overflow-y: hidden;
    overflow-x: auto;
    gap: 0.6rem;
    padding-top: 0.8rem;
  }
  .product-thumb { width: 5.6rem; height: 7rem; flex-shrink: 0; }

  /* Info panel */
  .product-info { position: static; width: 100%; }
  .product-title { font-size: clamp(2.4rem, 7.5vw, 3.6rem); margin-bottom: 1.2rem; }
  .product-short-desc { font-size: 1.6rem; }
  .product-story-content { font-size: 1.6rem; }

  /* ── Action row — always 2 rows on mobile ──────────────────────────────────
     Row 1: [− qty +]  [♡]  [share]
     Row 2: [ADD TO CART ~50%]  [BUY NOW ~50%]
     !important on ATC flex prevents the high-specificity desktop rule
     (body.single-product … flex:2) from overriding us here.           */
  .product-form-wrap { flex-wrap: wrap; gap: 0.6rem; }

  /* Qty — left side, taller */
  .product-form-wrap .quantity {
    flex: 0 0 auto !important;
    order: 1;
    height: 5.4rem;
  }

  /* Wishlist — pushed to the right via margin-left:auto */
  .product-form-wrap .product-wishlist-btn {
    flex: 0 0 auto !important;
    order: 2;
    margin-left: auto;
    width: 5.4rem;
    height: 5.4rem;
  }

  /* Share — sits right of wishlist */
  .product-form-wrap .product-share-btn {
    flex: 0 0 auto !important;
    order: 3;
    width: 5.4rem;
    height: 5.4rem;
  }
  .product-form-wrap .single_add_to_cart_button {
    flex: 1 1 calc(50% - 0.3rem) !important;
    flex-shrink: 0 !important;
    order: 4;
  }
  .product-form-wrap .urp-buy-now-btn {
    flex: 1 1 calc(50% - 0.3rem) !important;
    flex-shrink: 0 !important;
    order: 5;
  }

  /* Sections */
  .product-story-section,
  .product-notes-section { padding-block: 5.6rem; }
  .product-story-inner { grid-template-columns: 1fr; gap: 3.2rem; }
  .product-story-img-wrap { width: 100%; max-height: none; align-self: auto; aspect-ratio: 3 / 4; }

  .product-notes-grid { margin-top: 3.2rem; }
  .product-note-col { padding: 2.8rem 2rem; }
  .product-note-num { font-size: 6rem; }

  .product-related-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
  .product-related-section { padding-block: 5.6rem; }

  /* Specs strip — 2-col */
  .product-details-inner { gap: 3.2rem; }
  .product-spec-item { flex: 1 1 50%; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 2rem 1.4rem; }
  .product-spec-item:nth-child(even) { border-right: none; }
  .product-spec-item:nth-last-child(-n+2) { border-bottom: none; }
  .product-spec-label { font-size: 0.72rem; }
  .product-spec-value { font-size: 1.5rem; }

  /* Trust bar — all three on one line, never wrap */
  .product-trust-bar {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    padding-top: 2rem;
  }
  .product-trust-item {
    flex: 0 1 auto;
    font-size: 0.82rem;
    gap: 0.4rem;
    white-space: nowrap;
  }
  .product-trust-item svg { width: 12px; height: 12px; }
}

/* ── ≤ 480px (small phones) ─────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .product-page-banner { padding-block: calc(var(--header-h) + var(--announce-h) + 0.8rem) 1.2rem; }

  /* Gallery */
  .product-thumb { width: 5rem; height: 6.4rem; }

  /* Typography */
  .product-title { font-size: 2.4rem; }
  .product-price-row .price { font-size: 2.4rem; }

  /* Specs — keep 2-col even on small phones */
  .product-spec-item { padding: 1.8rem 1.2rem; }

  /* Notes */
  .product-note-col { padding: 2.4rem 1.6rem; }
  .product-note-num { font-size: 5rem; }

  /* Meta chips */
  .product-meta-chips-row { grid-template-columns: 7rem 1fr; }
}