/* ═════════════════════════════════════════════════════════════════════
   STOREFRONT RESPONSIVE — canonical breakpoints
   ═════════════════════════════════════════════════════════════════════

   Three layout tiers, exactly. Every NEW responsive rule for the
   universal storefront template (sidebar / header / search / hero /
   cart / footer / layouts) must use one of these — no
   in-between widths.

       Mobile   →  @media (max-width: 767px)
       Tablet   →  @media (min-width: 768px) and (max-width: 1199px)
       Desktop  →  default (no @media wrapper) OR @media (min-width: 1200px)

   Why these numbers:
     • 767 / 768 is the conventional phone-vs-tablet boundary (and
       the lower edge of "md" in Bootstrap 4).
     • 1199 / 1200 is the upper edge of "lg" — small laptops and
       large tablets land in tablet, true desktops land in desktop.
     • One range per device class keeps the layout simple to reason
       about and stops "what should happen at 1083 px?" debates.

   Legacy media queries elsewhere in this file (and in the per-theme
   `style-*.css` files) still use the Bootstrap 4 set
   (575 / 768 / 991 / 1199) and a handful of bespoke widths
   (1024 / 1295 / 1399). Those stay as-is for backward compat —
   touching them risks breaking the original WoodMart-inspired
   chrome. For NEW layout work, stick to the three above so future
   maintainers don't have to chase six different cutoffs to predict
   how the page will lay out at a given width.
   ═════════════════════════════════════════════════════════════════════ */

/* custom css */

.product-detail .price-spin {
    font-size: 15px !important;
    line-height: 1;
}
.modal-container.product-popup .product-description {
    padding: 5px 0 !important;
}

/* custom css */


/* responsive */

@media only screen and (max-width: 1399px){
    div#idcartpopup .item-spin {
        margin: 7px -43px 0px 0 !important;
    }
   .card-body .checkout-items {
    display: flex !important;
   }
   #idcartpopup > div.row {
    margin-bottom: -20px !important;
}
    .collection-title .qty-item{
        margin: 0px 0px 0px 10px;
    }
    .telegram-card .telegram-btn{
        font-size: 10px;
    }
    .whatsapp-card .whatsap-btn{
        font-size: 10px;
    }
}
@media only screen and (max-width: 1199px){
    .card-body {
        padding-bottom: 10px;
    }
	#idcartpopup > div:nth-child(5) > div {
    margin-bottom: 0px !important;
}
    .btn {
        padding: 0.65rem 0.85rem;
        font-size: 0.9rem;
    }
    .product-image img{
        height: 199px;
    }
}
@media only screen and (max-width: 1024px){
	.product-detail .price-spin{
    font-size: 14px !important;
	font-weight: 500 !important;
}

    .btn {
        padding: 0.85rem 0.45rem;
        font-size: 0.6rem;
    }
    .product-image img{
        height: 199px !important;
    }
}
@media (min-width:575px) and (max-width: 991px){
    /* Legacy top-layout fallback — clears the hamburger nav-icon that
       sits absolutely positioned at left:250 in this band. Side layout
       has no hamburger here (its menu lives in the fixed sidebar), so
       this push would just shove the inline search input off-centre
       on tablet. Scope to top only. */
    body.layout-top .search-input{
        margin-left: 80px;
    }
}
@media (max-width: 991px){
    
    .nav-icon {
        left: 250px;
        top: 63px;
    }
    .dropdown-menu.show {
        left: auto !important;
        right: 0 !important;
        transform: translate3d(10px, 30px, 10px) !important;
    }
}
@media only screen and (max-width: 767px){
    .text-store{
        display: inline-block;
    }

}
@media only screen and (max-width: 991px){
    /* Same legacy top-layout fallback as above — these positional
       overrides are tuned for the top header's collapsed-to-tablet
       layout. Side layout has its own dedicated chrome in the sidebar
       and shouldn't inherit any of this. Scope each rule to top. */
    body.layout-top .nav-logo{
        display: none;
    }
    body.layout-top .nav-icon{
        top: 47px;
        left: 270px;
    }
    body.layout-top .search-bar{
        justify-content: end;
    }
    body.layout-top .justify-content-between{
        justify-content: end !important;
    }
    body.layout-top .search-input input{
        margin-right: 60px;
    }
}
@media only screen and (max-width: 480px){
    /* The old `.search-bar { margin-top: 60px }` rule used to push
       the action cluster (search + profile + cart + hamburger) onto
       a second row below the logo because the inline search input
       didn't fit alongside the logo at phone widths. Since the
       mobile fix in f56c74d6 collapses the inline input to an
       icon trigger, the cluster fits inline with the logo on
       phones too — keeping the push-down rule was hiding the
       search trigger BELOW the top header, which is exactly the
       opposite of what the merchant wants. Rule removed. */
    .nav-icon {
        top: 45px;
        left: 250px;
    }
    .dropdown-menu.show{
        transform: translate3d(70px, 30px, 10px) !important;
    }
    .content-body{
        margin-top: 0;
    }
}
@media only screen and (max-width: 320px){

}
@media only screen and (max-width: 240px){

}

/* ═══════════════════════════════════════════════════════════════════
   SIDE LAYOUT — mobile collapse to hamburger drawer

   On desktop the side sidebar is permanently visible (260px) and
   eats its share of the viewport. On mobile that's not viable —
   on a 420px preview the sidebar would consume 60% of the screen.
   At ≤ 768px we transform .main-menu off-screen, reset the
   content margin, and surface a fixed hamburger button at the top
   corner that toggles body.nav-open to slide the drawer back in.

   Specificity note: custom.css ships unconditional rules like
   [dir="ltr"] body.layout-side .main-menu { ... } at (0,3,0). The
   mobile rules below match or beat that selector chain so the
   override actually lands inside the cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* Base — hidden on desktop. Mobile @media block toggles display. */
.side-mobile-toggle {
    display: none;
    position: fixed;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 1001;
    width: 44px;
    height: 44px;
    padding: 0;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    color: var(--pc-text-1, #0e1015);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.side-mobile-toggle:hover {
    background: var(--primary-color, #0e1015);
    color: #ffffff;
    border-color: transparent;
}
.side-mobile-toggle svg { display: block; }

.side-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
body.nav-open .side-mobile-backdrop {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 767px) {
    /* Side-layout MOBILE-ONLY collapse. Originally this rule was at 991
       so tablets (769-991) got the top-header fallback too, but the
       merchant wants tablets to keep the side menu — the 280-px sidebar
       still fits comfortably in a 768-1024 viewport. Drop the breakpoint
       back to 767 so only phones swap to the classic header.

       On mobile, side layout now mirrors the top layout's header: the
       .store-header-wrap (rendered with the classic header partial as
       a side-mobile fallback in storefront/index.blade.php) takes over,
       and every piece of side-only chrome is hidden — the floating
       .side-mobile-toggle button, its backdrop, and the .main-menu
       sidebar itself. Result: phones get the standard logo + action
       cluster + drawer hamburger UX instead of the floating icon that
       the merchant flagged as ugly. */

    /* Show the side-mobile classic-header fallback wrap. Selector
       specificity 0,3,0 beats the generic `body.layout-side
       .store-header-wrap { display: none }` rule in custom.css. */
    body.layout-side .store-header-wrap.store-header-wrap--side-mobile-fallback {
        display: block !important;
    }
    /* And un-hide the classic navbar inside the fallback wrap. The
       custom.css blanket `body.layout-side .header-navbar.floating-nav
       { display: none !important }` (line 2834) was authored for the
       desktop side layout where the sidebar replaces the navbar's
       function. At mobile the sidebar collapses to a drawer and the
       navbar IS the chrome, so we re-show it — but only inside the
       --side-mobile-fallback wrap so other side-layout pages that
       still render a non-fallback navbar in the DOM (legacy code
       paths) stay hidden.
       Plus pin it `position: fixed; top: 0` so the logo + nav links +
       profile + cart icons stay glued to the top edge as the merchant
       scrolls — same treatment the top-layout navbar gets at any
       width. z-index 150 keeps it ABOVE the row search (z:139) so the
       row visibly sits beneath the navbar instead of clipping into
       it. */
    body.layout-side .store-header-wrap--side-mobile-fallback .header-navbar.floating-nav {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        z-index: 150 !important;
        /* Match the row search's translucent-white gradient so the two
           strips read as a single piece of chrome instead of an opaque
           band sitting on top of a glass band. */
        background: linear-gradient(180deg,
                    rgba(255, 255, 255, 0.92) 0%,
                    rgba(255, 255, 255, 0.78) 100%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        /* Strip the navbar's 1-px bottom border so there's no visible
           seam between it and the row search underneath. The row search
           keeps its own bottom border for the seam below it. */
        border-bottom: 0 !important;
        box-shadow: none !important;
    }
    /* Un-hide the logo inside the mobile fallback. The blanket
       `.nav-logo { display: none }` at responsive.css line 120 was a
       legacy rule from the original theme's mobile drawer (logo lived
       inside the drawer instead of the navbar). With the classic
       header now serving as the mobile chrome we want the logo back. */
    body.layout-side .store-header-wrap--side-mobile-fallback .nav-logo {
        display: inline-flex !important;
    }
    /* Re-spread the logo + action cluster across the navbar. A legacy
       rule below in this file (`.justify-content-between {
       justify-content: end !important }` inside the same @media)
       collapses every Bootstrap `justify-content-between` flex
       container into a `flex-end` cluster at mobile — that's what was
       jamming the logo right up against the profile/cart/menu icons
       in the side-mobile-fallback header. Push it back to
       `space-between` here so the logo anchors to one edge and the
       action cluster to the other. */
    body.layout-side .store-header-wrap--side-mobile-fallback .navbar-container,
    body.layout-side .store-header-wrap--side-mobile-fallback .navbar-container.justify-content-between {
        justify-content: space-between !important;
    }

    /* Hide every side-only piece of chrome: the floating hamburger,
       its backdrop, the side menu itself, AND the
       .main-menu-backdrop. The .store-menu-drawer (rendered by every
       page) handles the drawer UX from now on, opened by the classic
       header's built-in .classic__menu-btn. */
    body.layout-side .side-mobile-toggle,
    body.layout-side .side-mobile-backdrop,
    body.layout-side .main-menu,
    body.layout-side .main-menu-backdrop {
        display: none !important;
    }

    /* Drop the padding-inline-start that used to clear the floating
       hamburger — the classic header's logo now anchors to the
       leading edge, matching the top-layout header pixel-for-pixel. */
    body.layout-side .header-navbar.floating-nav {
        padding-inline-start: 0 !important;
    }

    /* Content reclaims the viewport — drop the desktop gutter on
       BOTH the generic .layout-side rule AND every per-variant
       override in custom.css (full / icons / drawer / glass /
       editorial), each of which carries higher specificity than the
       generic rule and would otherwise re-apply its desktop margin
       at tablet width. */
    body.layout-side .app-content,
    body.layout-side.side-variant-full .app-content,
    body.layout-side.side-variant-icons .app-content,
    body.layout-side.side-variant-drawer .app-content,
    body.layout-side.side-variant-floating .app-content,
    body.layout-side.side-variant-glass .app-content,
    body.layout-side.side-variant-editorial .app-content,
    [dir="ltr"] body.layout-side .app-content,
    [dir="ltr"] body.layout-side.side-variant-full .app-content,
    [dir="ltr"] body.layout-side.side-variant-icons .app-content,
    [dir="ltr"] body.layout-side.side-variant-drawer .app-content,
    [dir="ltr"] body.layout-side.side-variant-floating .app-content,
    [dir="ltr"] body.layout-side.side-variant-glass .app-content,
    [dir="ltr"] body.layout-side.side-variant-editorial .app-content {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    /* The floating variant also adds padding-top on top of the inline
       margin override — strip it on mobile/tablet so the classic
       header fallback sits flush against the viewport edge. */
    body.layout-side.side-variant-floating .app-content {
        padding-top: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   CARDS — bottom CTA row on narrow grids

   The buttons + mini cards pair a stepper with a wide Add-to-Cart
   pill. At ~200px card width (2 per row on a mobile preview), the
   stepper at 110px / 88px plus the pill's icon + label squeezes
   past the available space. Allow the row to wrap so the pill
   drops below the stepper when there isn't room side-by-side.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .pc-buttons__cta,
    .pc-mini__cta {
        flex-wrap: wrap;
    }
    .pc-buttons__cta .pc-buttons__stepper,
    .pc-mini__cta .pc-mini__stepper {
        flex: 0 0 auto;
    }
    .pc-buttons__addtocart,
    .pc-mini__addtocart {
        flex: 1 1 100%;
        min-width: 0;
    }
    /* Slightly tighter pill at very narrow widths so the icon +
       label fit without truncation. */
    .pc-mini__addtocart {
        font-size: 11px !important;
        padding: 0 10px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   STOREFRONT SPACING SYSTEM — page-side gutters + section rhythm

   Two coordinated systems:

   1) HORIZONTAL PAGE GUTTER on .content-body. Scales smoothly from
      desktop (24 px) down to small mobile (12 px). The Bootstrap row
      inside .content-body has a -15 px gutter that eats some of this
      padding, but enough survives to keep cards from kissing the
      viewport edge. We pad .content-body and NOT .content-wrapper
      because the footer is rendered inside the wrapper but outside
      .content-body — the footer needs to stay full-bleed.

   2) VERTICAL SECTION RHYTHM. With a flush hero, the products row
      sits directly under the hero with zero gap. Add a margin-top
      that scales with viewport so there's a clear visual seam between
      "hero" and "store". Also surface a gap on mobile between the
      stacked products column and the cart column when the cart wraps
      below it.

   Important: `!important` is required to beat custom.css's older
   `!important` rules at lines 989 (desktop) and 1712 (mobile).
   ═══════════════════════════════════════════════════════════════════ */

/* Desktop (xl+, >=1200 px): products + cart cols sit side-by-side
   inside .row.match-height. .content-body owns the page-side gutter
   so both cards share one symmetric outer margin. Bumped to 0 per
   merchant — she wants every section to extend edge-to-edge with no
   page gutter on the body, matching the now-inline hero (which used
   to be flush-rendered above .content-wrapper). Per-section gutters
   still apply where the section markup asks for them. */
body.layout-top .content-body,
body.layout-side .content-body {
    padding-inline-start: 0px !important;
    padding-inline-end: 0px !important;
}

/* Category-page gutter on `.content-body` (NOT `.content-wrapper`, so
   the footer stays full-bleed). Pads the products grid in from the
   sidebar's content edge and the opposite viewport edge so the
   catalogue reads as a framed view instead of a flush slab. Per
   merchant:
     • desktop (≥1200 px) → 20 px each side
     • tablet  (768-1199) → 30 px each side
   Mobile (≤767) — keep the existing 0-gutter; the classic-header
   fallback owns spacing rules at that width. */
@media (min-width: 1200px) {
    body.layout-top.category-page .content-body,
    body.layout-side.category-page .content-body {
        padding-inline-start: 20px !important;
        padding-inline-end:   20px !important;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    body.layout-top.category-page .content-body,
    body.layout-side.category-page .content-body {
        padding-inline-start: 30px !important;
        padding-inline-end:   30px !important;
    }
}

/* Stacked layout (<1200 px): products + cart wrap into a single
   column. Previously we tried .content-body padding-inline + a card
   padding-on-the-wrapping-card combo, but the Bootstrap row inside
   the products card has its own -15-px margins that escape any
   padding put on the card itself, so the products grid still landed
   at the viewport edges while the toolbar above sat indented —
   creating a visible "jump" between the header and the grid below.

   Instead, zero out .content-body's horizontal padding and override
   the OUTER .row.match-height margins from Bootstrap's -15 px to +5 px.
   That combines with the col's own +15-px padding to land the col
   CONTENT area exactly 20 px in from the viewport edge. The inner
   row inside the products card keeps its natural -15-px so its cols
   still align with the card's body edges — single 20-px gutter all
   the way through, header + grid + cart sharing one column. */
@media (max-width: 1199px) {
    body.layout-top .content-body,
    body.layout-side .content-body {
        padding-inline-start: 0 !important;
        padding-inline-end: 0 !important;
    }

    /* OUTER .row.match-height: shift inward 20 px instead of Bootstrap's
       -15-px default. The +5 px here plus the col's +15-px padding lands
       col content at exactly 20 px from the viewport edge. */
    body.layout-top .content-body > .row.match-height,
    body.layout-side .content-body > .row.match-height {
        margin-inline-start: 5px !important;
        margin-inline-end: 5px !important;
    }

    /* Cart side-inline wrapping below the products on this same column:
       drop the small (2-px) horizontal padding on #idcartpopup so the
       cart cards sit on the same 20-px viewport gutter as the products
       grid above them. */
    .cart-side-inline #idcartpopup {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Vertical rhythm — gap between the flush hero and the products row.
   `.row.match-height` is the first row inside .content-body in flush
   mode (the hero already lives outside .content-body in this mode). */
body.hero-flush .content-body > .row.match-height {
    margin-top: 28px;
}
@media (max-width: 1199px) {
    body.hero-flush .content-body > .row.match-height {
        margin-top: 22px;
    }
}
@media (max-width: 767px) {
    body.hero-flush .content-body > .row.match-height {
        margin-top: 18px;
    }
}
@media (max-width: 479px) {
    body.hero-flush .content-body > .row.match-height {
        margin-top: 14px;
    }
}

/* Mobile stacking — when col-xl-4 wraps below col-xl-8, the cart
   column should sit clearly below the products with breathing room
   rather than touching. Bootstrap's default col padding leaves only
   ~30 px which reads as cramped. */
@media (max-width: 1199px) {
    .content-body .row.match-height > .cart-side-inline {
        margin-top: 24px;
    }
}

/* Product grid: airier vertical gap between rows of cards on mobile
   so the layout reads with the same breathing room the desktop grid
   has. Horizontal gap between adjacent cards still comes from
   Bootstrap's col padding (~30 px), which already matches desktop. */
@media (max-width: 991px) {
    .collection-items.product_tableese {
        row-gap: 20px;
    }
    .collection-items.product_tableese > .product_item,
    .collection-items.product_tableese > .product_item_new {
        margin-bottom: 0;
    }
}