/* PV mobile spacing — 2026-09-25.
   On a phone every page gets ONE 15px side gutter (--pv-m-gutter), applied at
   the outermost layer; every layer inside it adds nothing, unless it draws a
   box (.pv-surface), which pads 10px inside. Section padding above 15px is
   capped at 15px (.pv-vcap), except where a background image carries the
   height (.pv-bgimg).
   Sections whose content already ran edge to edge (.pv-bleed: the hero
   carousel, the marquee, full-width banners, the header) are left exactly as
   they were - Uvesh, 25 Sep. All three classes come from pv-mobile-spacing.php.
   Desktop is untouched. */

@media (max-width: 767px) {
  :root { --pv-gutter: 15px; --pv-m-gutter: 15px; }

  /* ---- 1. theme wrappers. XStore's .container (15px) and .row (-15px) cancel
     out; the .content column then adds 15px of its own. Around Elementor
     content that column adds nothing (Elementor carries the gutter); around a
     plain block-editor page it carries the gutter itself. */
  .container.content-page .content:has(.elementor) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .container.content-page .content:not(:has(.elementor)) {
    padding-left: var(--pv-m-gutter) !important;
    padding-right: var(--pv-m-gutter) !important;
  }

  /* ---- 1b. WooCommerce wrappers the design tokens padded with the old 16px
     gutter: inside Elementor the gutter already exists, so no second one. */
  body.woocommerce-checkout .elementor .elementor-widget-container,
  body .woocommerce .col2-set,
  body.woocommerce-page .col2-set {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* My Account: login and register sat side by side at 121px each, leaving
     41px for the fields */
  body.woocommerce-account .u-columns.col2-set { display: block !important; }
  body.woocommerce-account .u-columns.col2-set > .u-column1,
  body.woocommerce-account .u-columns.col2-set > .u-column2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 10px !important;
    padding: 16px 10px !important;
  }

  /* ---- 2. classic sections: the outermost column carries the gutter ---- */
  body .elementor .elementor-top-section:not(.pv-bleed),
  body .elementor .elementor-top-section:not(.pv-bleed) > .elementor-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body .elementor .elementor-top-section:not(.pv-bleed) > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding-left: var(--pv-m-gutter) !important;
    padding-right: var(--pv-m-gutter) !important;
  }
  body .elementor .elementor-top-section:not(.pv-bleed) .elementor-inner-section,
  body .elementor .elementor-top-section:not(.pv-bleed) .elementor-inner-section > .elementor-container,
  body .elementor .elementor-top-section:not(.pv-bleed) .elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* a box inside the gutter pads itself */
  body .elementor .elementor-top-section:not(.pv-bleed) .elementor-inner-section.pv-surface,
  body .elementor .elementor-top-section:not(.pv-bleed) .elementor-inner-section > .elementor-container > .elementor-column.pv-surface > .elementor-widget-wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ---- 3. flexbox containers: same rule ---- */
  body .elementor > .e-con:not(.pv-bleed) {
    --padding-left: var(--pv-m-gutter) !important;
    --padding-right: var(--pv-m-gutter) !important;
    padding-left: var(--pv-m-gutter) !important;
    padding-right: var(--pv-m-gutter) !important;
  }
  body .elementor > .e-con:not(.pv-bleed) > .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* a boxed container's inner width is narrower than a phone, so it centred its
     content 15-18px in from the gutter */
  body .elementor > .e-con:not(.pv-bleed).e-con-boxed > .e-con-inner,
  body .elementor > .e-con:not(.pv-bleed) .e-con-boxed > .e-con-inner,
  body .elementor .elementor-top-section:not(.pv-bleed) .e-con-boxed > .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body .elementor:not(.elementor-location-header) > .e-con:not(.pv-bleed) .e-con:not(.pv-surface) {
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body .elementor:not(.elementor-location-header) > .e-con:not(.pv-bleed) .e-con.pv-surface {
    --padding-left: 10px !important;
    --padding-right: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ---- 4. vertical: nothing above 15px between sections ---- */
  body .elementor .elementor-top-section.pv-vcap:not(.pv-bgimg):not(.pv-bleed),
  body .elementor .elementor-top-section:not(.pv-bleed) .elementor-section.pv-vcap:not(.pv-bgimg),
  body .elementor > .e-con.pv-vcap:not(.pv-bgimg):not(.pv-bleed),
  body .elementor > .e-con:not(.pv-bleed) .e-con.pv-vcap:not(.pv-bgimg) {
    --padding-top: 15px !important;
    --padding-bottom: 15px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  body .elementor .elementor-top-section:not(.pv-bleed) .elementor-column.pv-vcap:not(.pv-bgimg) > .elementor-widget-wrap {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  body .elementor .elementor-top-section:not(.pv-bleed) .elementor-element,
  body .elementor > .e-con:not(.pv-bleed) .elementor-element {
    --widgets-spacing: 10px 10px;
    --widgets-spacing-row: 10px;
    --kit-widget-spacing: 10px;
  }


  /* checkout: the order summary was a box inside a box (40px + 32px padding),
     leaving 229px for the order table on a phone */
  body.woocommerce-checkout .etheme-elementor-checkout-page-order-details-inner.design-styled-part { padding: 10px !important; }
  body.woocommerce-checkout .cart-order-details .order-review { padding: 12px 10px !important; }
  body.woocommerce-checkout .cart-order-details #order_review { padding-left: 0 !important; padding-right: 0 !important; }
  body.woocommerce-checkout #payment { padding-left: 10px !important; padding-right: 10px !important; }
  /* stacked columns kept align-items:flex-start, so the form shrank to 300px */
  body.woocommerce-checkout .etheme-elementor-cart-checkout-page-wrapper { align-items: stretch !important; }
  body.woocommerce-checkout .etheme-elementor-cart-checkout-page-column { width: 100% !important; }

  /* ---- 5. product cards: title 15px, price range on one line ---- */
  .etheme-product-grid-item .etheme-product-grid-title,
  .etheme-product-grid-item .etheme-product-grid-title a {
    font-size: 15px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }
  .etheme-product-grid-item .etheme-product-grid-title { margin-bottom: 6px !important; }
  /* sale range + struck range fit one line on a 360-414px phone; a rare
     overlong range clips the struck part rather than wrapping */
  .etheme-product-grid-item .price {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    letter-spacing: -0.2px !important;
    line-height: 1.4 !important;
  }
  .etheme-product-grid-item .price ins,
  .etheme-product-grid-item .price ins * { font-size: clamp(11.5px, 3.35vw, 13.5px) !important; }
  .etheme-product-grid-item .price del,
  .etheme-product-grid-item .price del * { font-size: clamp(9.5px, 2.8vw, 11.5px) !important; }
  .etheme-product-grid-item .price ins { padding-left: 0 !important; margin-right: 4px; }

  /* ---- 6. Best Sellers / Trending / New Arrivals badges (PBFW): half size.
     The plugin writes inline styles plus an inline !important sheet, so these
     have to be !important too. */
  body .pbfw_square_data div {
    height: 22px !important;
    min-height: 0 !important;
    padding: 2px 7px !important;
    top: 6px !important;
    left: 6px !important;
    border-radius: 4px !important;
  }
  body .pbfw_square_data span {
    font-size: 10px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
    white-space: nowrap;
  }
  /* stacking step = 22px badge + 4px gap (pv-badges.css uses 46px on desktop) */
  body .pbfw_square_data ~ .pbfw_square_data > div { transform: translateY(26px) !important; }
  body .pbfw_square_data ~ .pbfw_square_data ~ .pbfw_square_data > div { transform: translateY(52px) !important; }
  body .pbfw_square_data ~ .pbfw_square_data ~ .pbfw_square_data ~ .pbfw_square_data > div { transform: translateY(78px) !important; }

  /* ---- 7. product carousels: arrows centred on the photo, not the whole card.
     pv-mobile-1.js measures the photo and sets --pv-arrow-y. */
  .elementor-widget-etheme_product_carousel .et-swiper-elementor-nav {
    top: var(--pv-arrow-y, 40%) !important;
    bottom: auto !important;
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
  }
  .elementor-widget-etheme_product_carousel .et-swiper-elementor-nav::after,
  .elementor-widget-etheme_product_carousel .et-swiper-elementor-nav svg,
  .elementor-widget-etheme_product_carousel .et-swiper-elementor-nav i {
    font-size: 13px !important;
    width: 13px;
    height: 13px;
  }
  .elementor-widget-etheme_product_carousel .swiper-custom-left { left: 4px !important; right: auto !important; }
  .elementor-widget-etheme_product_carousel .swiper-custom-right { right: 4px !important; left: auto !important; }

  /* ---- 8. "Explore Our Best Seller / New Arrivals" + View All: one row ---- */
  body .elementor .elementor-element-b61dd4a > .elementor-container,
  body .elementor .elementor-element-272f53e > .elementor-container {
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 10px;
  }
  body .elementor .elementor-element-a7c6839,
  body .elementor .elementor-element-416fff4 {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0;
  }
  body .elementor .elementor-element-61900d6,
  body .elementor .elementor-element-1f44f64 {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  body .elementor .elementor-element-a7c6839 > .elementor-widget-wrap,
  body .elementor .elementor-element-416fff4 > .elementor-widget-wrap,
  body .elementor .elementor-element-61900d6 > .elementor-widget-wrap,
  body .elementor .elementor-element-1f44f64 > .elementor-widget-wrap {
    padding: 0 !important;
  }
  body .elementor .elementor-element-88da0b4 .elementor-heading-title,
  body .elementor .elementor-element-b61dd4a .elementor-heading-title,
  body .elementor .elementor-element-272f53e .elementor-heading-title {
    font-size: 18px !important;
    line-height: 1.15 !important;
  }
  body .elementor .elementor-element-b61dd4a .elementor-heading-title span,
  body .elementor .elementor-element-272f53e .elementor-heading-title span {
    font-size: 30px !important;
    line-height: 1.1 !important;
  }
  body .elementor .elementor-element-016d592 .elementor-button,
  body .elementor .elementor-element-ae194bd .elementor-button {
    padding: 9px 14px !important;
    min-height: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    border-radius: 6px !important;
  }
  body .elementor .elementor-element-016d592,
  body .elementor .elementor-element-ae194bd { margin-bottom: 4px !important; }
}

/* ---- shop + category archive (template 1192), phones ---- */
@media (max-width: 767px) {
  /* breadcrumb under the banner: less air */
  body .elementor .elementor-element.elementor-element-7c629389 { --row-gap: 0px !important; --gap: 0px !important; row-gap: 0 !important; }
  body .elementor .elementor-element.elementor-element-04e5fa5 { margin: 0 !important; padding: 0 15px !important; }
  body .elementor .elementor-element.elementor-element-04e5fa5 .page-heading { padding: 10px 0 !important; margin: 0 !important; }
  body .elementor .elementor-element.elementor-element-04e5fa5 .woocommerce-breadcrumb { margin: 0 !important; font-size: 14px; }

  /* category description: one tight block */
  body .elementor .elementor-element.elementor-element-pvcatd01 {
    --padding-top: 4px !important; --padding-bottom: 4px !important;
    padding-top: 4px !important; padding-bottom: 4px !important;
  }
  body .elementor .elementor-element.elementor-element-pvcatd01 > .e-con-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
  body .elementor .elementor-element.elementor-element-pvcatd02 .term-description,
  body .elementor .elementor-element.elementor-element-pvcatd02 .term-description p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--pv-ink-muted);
  }

  /* the column holding the filter panel is 0px tall on a phone (the panel
     opens as a bottom sheet) but kept 30px padding + 30px margin above the grid */
  body .elementor .elementor-element.elementor-element-bc098b9 { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
  body .elementor .elementor-top-section .elementor-inner-section > .elementor-container > .elementor-column.elementor-element-bc098b9 > .elementor-widget-wrap { padding: 0 !important; min-height: 0 !important; }
  body .elementor .elementor-element.elementor-element-ea4b3f0 > .elementor-container { row-gap: 0 !important; }
  body .elementor .elementor-element.elementor-element-6553f42 > .elementor-widget-wrap { padding-top: 0 !important; }

  /* Filters left, Sort right, one row */
  body .elementor .elementor-element.elementor-element-5487d62d {
    --padding-top: 10px !important; --padding-bottom: 10px !important;
    padding-top: 10px !important; padding-bottom: 10px !important;
  }
  body .elementor .elementor-element.elementor-element-5487d62d > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body .elementor .elementor-element.elementor-element-632742bc,
  body .elementor .elementor-element.elementor-element-733793f8 {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body .elementor .elementor-element.elementor-element-632742bc a.etheme-text-button {
    width: 100% !important;
    height: 42px !important;
    padding: 0 12px !important;
    justify-content: center !important;
    border: 1px solid var(--pv-border) !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    letter-spacing: .06em !important;
    color: var(--pv-ink) !important;
  }
  body .elementor .elementor-element.elementor-element-733793f8 .woocommerce-ordering,
  body .elementor .elementor-element.elementor-element-733793f8 select.orderby {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  body .elementor .elementor-element.elementor-element-733793f8 select.orderby {
    height: 42px !important;
    padding: 0 30px 0 12px !important;
    border: 1px solid var(--pv-border) !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: var(--pv-ink) !important;
    background-color: var(--pv-surface);
  }
}