/* ============================================================
   Acc-Red (store 377368) — design & mobile refinements
   Source of truth: refine-377368.css. Built file = custom-combined.css
   (the previous css_location pointed at another org's "vastram.css",
   117 bytes, targeting a collection not on this store — not carried over;
   backup in live_backup/vastram_live.css).
   Palette taken from the merchant's own HTML sections:
     navy  #102C57 (headings)   blue #296FC2 (--secondary-main, buttons)
     ink   #282C3F              muted #535766   line #E5E7EB   tint #EEF4FB
   Theme: page-builder ("myntra" variant), serve_new=true, light-DOM HTML
   sections for inline collections; shadow-dom collections are untouched.
   ============================================================ */

/* 1. Tokens ---------------------------------------------------- */
html:root {
  --ar-navy: #102C57;
  --ar-blue: #296FC2;
  --ar-ink: #282C3F;
  --ar-muted: #535766;
  --ar-tint: #EEF4FB;
  --ar-font: "Inter", "Noto Sans", ui-sans-serif, system-ui, sans-serif;
}

/* 2. Native section titles — match the merchant's HTML sections
      (48px/800 navy on desktop, 28px on phones). Before: "Browse
      Categories" 28px/600 #000 centred; "Featured Ramps" 18px/600
      left-aligned. ------------------------------------------------ */
h2.category-header,
.product-collection .collection-header .heading,
.product-collection .collection-header .heading .heading-title {
  font-family: var(--ar-font) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ar-navy) !important;
  text-align: center !important;
  margin: 0 0 20px !important;
}
.product-collection .collection-header {
  position: relative !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}
.product-collection .collection-header .shop-all-link {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--ar-blue) !important;
  font-family: var(--ar-font) !important;
  font-weight: 600 !important;
}
@media (min-width: 769px) {
  h2.category-header,
  .product-collection .collection-header .heading,
  .product-collection .collection-header .heading .heading-title {
    font-size: 48px !important;
    margin-bottom: 28px !important;
  }
}
@media (max-width: 768px) {
  /* "See All" sits under the centred title on phones */
  .product-collection .collection-header {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .product-collection .collection-header .shop-all-link {
    position: static !important;
    transform: none !important;
  }
}

/* 3. One section rhythm for the two native home sections
      (48px desktop / 32px phones, top = bottom). ------------------ */
.LargeCategoriesCardV1-component .page-container.section-spacing,
.ProductGridCollection-component .page-container.my-6 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media (min-width: 769px) {
  .LargeCategoriesCardV1-component .page-container.section-spacing,
  .ProductGridCollection-component .page-container.my-6 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* 4. Category tiles and product cards: labels in the site font,
      readable weight, ink colour. --------------------------------- */
h3.cat-card-title {
  font-family: var(--ar-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ar-ink) !important;
}
h4.product-card-brand {
  font-family: var(--ar-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ar-muted) !important;
}
.product-card-sale-price {
  font-family: var(--ar-font) !important;
  font-weight: 700 !important;
  color: var(--ar-navy) !important;
}

/* 5. Discount pill on the PDP — was the theme's pink/red (#ff3f6c)
      against a blue palette. Cards already use blue text. ---------- */
.product-discount-main,
.product-discount-main * {
  background: var(--ar-blue) !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.product-discount-main {
  padding: 2px 10px !important;
  font-family: var(--ar-font) !important;
  font-weight: 700 !important;
}

/* 6. Hero carousel arrows — pure-black theme default → navy. -------- */
.banner-nav-btn,
.banner-nav-btn svg {
  color: var(--ar-navy) !important;
}
.banner-nav-btn svg [fill="#000"],
.banner-nav-btn svg [fill="black"],
.banner-nav-btn svg [fill="#000000"] {
  fill: var(--ar-navy) !important;
}
.banner-nav-btn svg [stroke="#000"],
.banner-nav-btn svg [stroke="black"],
.banner-nav-btn svg [stroke="#000000"] {
  stroke: var(--ar-navy) !important;
}

/* 7. PDP header block — the theme puts the brand in the H1 (24px/700)
      and the product name in a 20px/400 H2, so the brand looks like
      the title. Visual fix only; the H1/H2 order is a Shoopy ticket. */
h1.product-brand-main {
  font-family: var(--ar-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ar-muted) !important;
  margin-bottom: 4px !important;
}
h2.product-subtitle-main {
  font-family: var(--ar-font) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--ar-navy) !important;
}
@media (min-width: 769px) {
  h2.product-subtitle-main { font-size: 28px !important; }
}
.product-price-main,
.product-price-main span {
  font-family: var(--ar-font) !important;
  font-weight: 800 !important;
  color: var(--ar-navy) !important;
}
.product-mrp-main .mrp-value { color: var(--ar-muted) !important; }

/* 8. Lead popup ("Not sure which ramp…") — fixed, 333×441 on a 375px
      phone. Shrink on phones; one accent system (blue pill CTA
      instead of the orange 14px-radius button). The "show once,
      remember dismissal" logic lives in the collection's script. ---- */
.ramp-lead-btn {
  background: var(--ar-blue) !important;
  border-radius: 999px !important;
  font-family: var(--ar-font) !important;
  font-weight: 700 !important;
}
@media (max-width: 768px) {
  .ramp-lead-popup {
    left: 12px !important;
    right: 12px !important;
    bottom: 80px !important;          /* clear the bottom navigation (68px) */
    width: auto !important;
    max-width: none !important;
    padding: 16px 16px 14px !important;
  }
  .ramp-lead-popup .ramp-lead-title {
    font-size: 17px !important;
    padding-right: 28px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }
  .ramp-lead-popup .ramp-lead-text { display: none !important; }
  .ramp-lead-popup .ramp-lead-field { margin-bottom: 8px !important; }
  .ramp-lead-popup .ramp-lead-field input { padding: 9px 12px 9px 38px !important; font-size: 14px !important; }
  .ramp-lead-btn { padding: 11px 16px !important; font-size: 14px !important; }
  .ramp-lead-popup .ramp-lead-message:empty { display: none !important; }
}

/* 9. Notice bar on phones wrapped to 3 lines (59px). Single-line
      marquee instead; desktop unchanged. ----------------------------- */
@media (max-width: 768px) {
  .mobile-header-v2 .notice {
    overflow: hidden !important;
    white-space: nowrap !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .mobile-header-v2 .notice .notice-message {
    display: inline-block !important;
    white-space: nowrap !important;
    padding-left: 100% !important;
    font-size: 13px !important;
    line-height: 32px !important;
    animation: ar-notice-marquee 22s linear infinite;
  }
  .mobile-header-v2 .notice .notice-message:hover { animation-play-state: paused; }
}
@keyframes ar-notice-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* 10. Footer "Experience app on mobile → Google Play" — the theme
       renders it with href="#" because no play_store_link is set, and
       Acc-Red has no app. Hidden; "Keep in touch" (socials) stays. --- */
.footer-v2-app-download { display: none !important; }

/* 11. Card image crop stop-gap (keyed on file names; revisit when the
       merchant supplies square 1:1 primaries). Portrait 640×1138 photo
       of the modular ramp: the ramp sits in the lower-middle of the frame. --------- */
.product-card-image[src*="WhatsAppImage2024-11-28at125421"] {
  object-position: 50% 58% !important;
}

/* 12. Category row: the theme's swiper sizes 4 tiles for a "peek" layout
       (about 4.3 per view), so with exactly 4 categories the row ends
       ~110px short of the right edge on wide screens (left gap 34px,
       right gap 144px at 2000px). Centre the wrapper only when there are
       exactly 4 slides and no scrolling (desktop). ----------------------- */
@media (min-width: 769px) {
  .LargeCategoriesCardV1-component .swiper-wrapper:has(> .swiper-slide:nth-child(4):last-child) {
    justify-content: center !important;
  }
}

/* 13. Featured Ramps row: same swiper "peek" sizing (~5.3 per view), so
       4 cards ended 400px short of the right edge at 2000px (gaps 40/440).
       Centre the wrapper while there are at most 5 slides (they always fit
       on desktop); a 6th slide restores the theme's scroll. --------------- */
@media (min-width: 769px) {
  .ProductGridCollection-component .product-swiper .swiper-wrapper:not(:has(> .swiper-slide:nth-child(6))) {
    justify-content: center !important;
  }
}

/* 14. "Listen to what our customers say" (merchant's inline HTML section):
       three 242px video cards left-aligned in a 1320px track, title and
       "Swipe to explore" left/right. On desktop centre the header and the
       card row; `safe center` falls back to start-aligned when the track
       really overflows, so scrolling still works. Phones unchanged. ------- */
@media (min-width: 992px) {
  .accred-video-reviews__header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
  }
  .accred-video-reviews__swipe { display: none !important; }
  .accred-video-reviews__track {
    justify-content: safe center !important;
  }
}