/* ==========================================================================
   Vielle Beauty — responsive.css
   Tablet + mobile pass over the completed desktop theme. Nothing in
   base.css / header.css / footer.css / home.css / product.css / archive.css
   is edited — this file only ever adds narrower-viewport overrides on top
   of them, loaded last so the cascade wins. Desktop (>1200px) is therefore
   pixel-identical to before this step.

   Breakpoints: 1200px / 992px / 768px / 576px (max-width, desktop-first —
   each block layers on top of the wider ones above it).

   Two real, non-guessed data points came from the uploaded mockups
   themselves: the single-product mockup's own embedded
   `@media (max-width: 900px)` block hides the search bar/primary nav/
   header text labels and collapses the product-page two-column grid,
   4-icon feature grid, and footer grid — applied below at 992px, the
   closest of the four required breakpoints to that 900px cutoff. Every
   other value here (grid column counts, hero height, etc.) is a
   conservative, brand-consistent adaptation — colors, fonts, radii,
   shadows and card styling are never changed, only layout/columns/spacing.
   ========================================================================== */

/* ==========================================================================
   Base (all widths) — #site-nav-toggle is new markup added to header.php
   for this pass; it must stay hidden above 992px so desktop is unchanged,
   since header.css (untouched) never declares its own display for it.
   ========================================================================== */

.site-header__nav-toggle {
  display: none;
}

/* ==========================================================================
   1200px — large tablet / small laptop
   Product grids (home + archive) go from 6 to 4 columns so cards don't
   get too narrow before the bigger tablet layout changes kick in at 992px.
   ========================================================================== */

@media (max-width: 1200px) {

  .product-grid,
  ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   992px — tablet
   ========================================================================== */

@media (max-width: 992px) {

  /* Shared container padding: every section below uses the same
     max-width:1300px container with 28px desktop side padding; this swaps
     just the horizontal value to the tablet token already defined in
     base.css (--pad-x-tablet), per the container rule (no other layout
     property touched). */
  .site-header__row,
  .category-strip,
  .promo-grid,
  .product-grid-section,
  .site-footer__grid,
  .woocommerce-breadcrumb,
  .single-product div.product,
  .woocommerce-products-header,
  .woocommerce-result-count,
  .woocommerce-ordering,
  ul.products,
  nav.woocommerce-pagination {
    padding-left: var(--pad-x-tablet);
    padding-right: var(--pad-x-tablet);
  }

  .site-header__row2 {
    padding-left: var(--pad-x-tablet);
    padding-right: var(--pad-x-tablet);
    flex-wrap: wrap;
    row-gap: 10px;
  }

  /* ul.products needs its own !important here: archive.css's base rule
     now sets desktop padding with !important (required to beat
     WooCommerce's own .woocommerce ul.products{padding:0}, which is
     more specific than a plain ul.products selector), so a
     non-!important padding-left/right at this breakpoint can no longer
     override it. Everything else about the rule is unchanged. */
  ul.products {
    padding-left: var(--pad-x-tablet) !important;
    padding-right: var(--pad-x-tablet) !important;
  }

  .site-footer__bottom {
    padding-left: var(--pad-x-tablet);
    padding-right: var(--pad-x-tablet);
  }

  /* .site-header__search (mockup's .v-search): hidden at this breakpoint in
     the source mockup's own @media(max-width:900px) block — cloned as-is,
     no replacement search UI invented. */
  .site-header__search {
    display: none;
  }

  /* .main-navigation (mockup's .v-nav): also hidden by the mockup at this
     breakpoint, but a real site needs a way to reach the menu, so it
     becomes a toggleable dropdown instead of disappearing outright — see
     #site-nav-toggle / #site-navigation.is-open below. This is the one
     place this pass adds an interaction (not a new section: same menu,
     same links, just made reachable on a touch layout). */
  .main-navigation {
    display: none;
    width: 100%;
    order: 3;
  }

  .main-navigation.is-open {
    display: block;
  }

  .main-navigation .primary-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-navigation .primary-menu > li > a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
  }

  /* #site-nav-toggle: new element (see header.php), hidden entirely above
     this breakpoint, shown here as a plain 3-bar button matching the
     existing categories button's height/colors. */
  .site-header__nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .site-header__nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-accent);
  }

  /* .site-header__phone (mockup's .v-hidem): hidden at this breakpoint in
     the source mockup. */
  .site-header__phone {
    display: none;
  }

  /* Account/Wishlist/Cart text labels (mockup's .v-hidem spans) — icons and
     count badges stay visible, only the text next to them hides. */
  .site-header__action-label {
    display: none;
  }

  .site-header__actions {
    gap: 18px;
  }

  /* Hero: same image/content/CTA, shorter panel and tighter offsets so it
     doesn't dominate a shorter tablet viewport. */
  .hero__inner {
    height: 360px;
  }

  .hero__content {
    padding: 36px 0 0 32px;
    max-width: 60%;
  }

  /* Promo cards: 4 across is tight once the container padding above
     shrinks; 2x2 keeps each card's fixed 128px height comfortable. */
  .promo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Product grids (home + archive): one more step down from the 4-column
     1200px rule. */
  .product-grid,
  ul.products {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer (mockup's .v-foot): 4 columns to 2, exactly as the source
     mockup's own breakpoint specifies. */
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Single product two-column layout (mockup's .v-two): stacks to one
     column, exactly as the source mockup's own breakpoint specifies. */
  .single-product div.product {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Feature-boxes 4-icon grid (mockup's .v-4): 4 to 2 columns, exactly as
     the source mockup's own breakpoint specifies. */
  .single-product__features {
    grid-template-columns: repeat(2, 1fr);
  }

  .single-product__feature:nth-child(2) {
    border-right: 0;
  }
}

/* ==========================================================================
   768px — small tablet / large phone
   ========================================================================== */

@media (max-width: 768px) {

  /* Category strip: horizontal-scroll card rail already works with a
     finger swipe, so the mouse-oriented next-arrow is just extra clutter
     on a touch screen. */
  .category-strip__next {
    display: none;
  }

  .hero__inner {
    height: 320px;
  }

  .hero__content {
    max-width: 100%;
    padding: 30px 24px 0;
  }

  .hero__tagline {
    font-size: 16px;
  }

  .hero__logo {
    height: 60px;
  }
}

/* ==========================================================================
   576px — mobile
   ========================================================================== */

@media (max-width: 576px) {

  .site-header__row,
  .site-header__row2,
  .category-strip,
  .promo-grid,
  .product-grid-section,
  .site-footer__grid,
  .site-footer__bottom,
  .woocommerce-breadcrumb,
  .single-product div.product,
  .woocommerce-products-header,
  .woocommerce-result-count,
  .woocommerce-ordering,
  ul.products,
  nav.woocommerce-pagination {
    padding-left: var(--pad-x-mobile);
    padding-right: var(--pad-x-mobile);
  }

  /* Row 1: logo + actions only at this width (search already hidden at
     992px) — let it wrap instead of squeezing, so nothing overflows. */
  /* Same !important reason as the 992px block above. */
  ul.products {
    padding-left: var(--pad-x-mobile) !important;
    padding-right: var(--pad-x-mobile) !important;
  }

  .site-header__row {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .site-header__actions {
    gap: 14px;
  }

  .hero__inner {
    height: 280px;
  }

  .hero__content {
    padding: 22px 18px 0;
  }

  .hero__eyebrow {
    font-size: 20px;
  }

  .hero__logo {
    height: 48px;
    margin-bottom: 10px;
  }

  .hero__tagline {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .hero__cta {
    padding: 10px 20px;
    font-size: 13px;
  }

  /* Promo cards: 2x2 to a single column so each card keeps its full
     128px-tall layout readable instead of cramming two per row. */
  .promo-grid {
    grid-template-columns: 1fr;
  }

  /* Product grids (home + archive): 2 columns kept (not 1) — the card
     design (square image, compact type) stays clean and readable at this
     width; a single column would leave each card oversized/empty. */
  .product-grid,
  ul.products {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-grid-section__head {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Footer: 2 columns to 1, stacked and centered like the about column
     already is, so nothing feels lopsided at this width. */
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .site-footer__tagline {
    max-width: none;
  }

  /* Bottom bar: copyright + payment badges no longer fit one row without
     crowding, so stack them. */
  .site-footer__bottom {
    flex-wrap: wrap;
  }

  .site-footer__payments {
    margin-left: 0;
  }

  /* Result count / ordering dropdown (archive pages): floats no longer fit
     side by side without crowding the result count text. */
  .woocommerce-result-count,
  .woocommerce-ordering {
    float: none;
    display: block;
    width: 100%;
  }

  /* Single product: price row can now include the strikethrough price and
     the "X% OFF" chip on the same line as the container narrows — let it
     wrap instead of overflowing. */
  .single-product div.product .price {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* Add to Cart + Buy Now: full width and stacked, per the "keep buttons
     full-width on small screens when useful" responsive rule. */
  .single-product div.product form.cart {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .single-product div.product .single_add_to_cart_button,
  .single-product div.product .single-product__buy-now {
    width: 100%;
    margin-left: 0;
  }

  .single-product__features {
    grid-template-columns: repeat(2, 1fr);
  }
}