/**
 * Dholki — Shop page.
 * The hero, filter sidebar, product grid, cards and pagination all reuse
 * the exact same .dholki-cat-* components as the category archive
 * (dholki-category.css, loaded alongside this on the shop page too), so
 * this file only adds the handful of things unique to Shop: icon-based
 * hero badges (vs image badges on category pages), the sidebar's
 * "Sort By" select needing full width, and the grid/list view toggle.
 */

/* Astra's default content wrapper adds its own max-width/padding around the
   page, which fights our full-bleed .dholki-category-root layout — this
   file only loads on the Shop page (is_shop()), so it's safe to kill that
   wrapper's box model outright here. Same fix as dholki-search.css. */
.ast-container{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  max-width:100% !important;
}
/* .ast-container is display:flex — without this, the content div (no
   explicit width of its own) sizes to its widest inner element instead of
   filling the flex track, leaving a blank strip on the right. */
.ast-container > .dholki-shop-root{
  flex:1 1 100% !important;
  width:100% !important;
  max-width:100% !important;
}
.dholki-category-root{
  width:100% !important;
  max-width:100% !important;
}

.dholki-cat-badge__img i{
  color: var(--dholki-orange);
  font-size:15px;
}

.dholki-cat-filter-group select.dholki-cat-sort-select{
  width:100%;
}

.dholki-shop-header-controls{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.dholki-cat-view-toggle{
  display:flex;
  gap:6px;
  flex-shrink:0;
}
.dholki-cat-view-btn{
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--dholki-border);
  border-radius:8px;
  background:#fff;
  color: var(--dholki-text-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.dholki-cat-view-btn.dholki-is-active{
  background: var(--dholki-orange);
  border-color: var(--dholki-orange);
  color:#fff;
}
.dholki-cat-view-btn:hover:not(.dholki-is-active){ border-color: var(--dholki-orange); color: var(--dholki-orange); }

/* List view — 2 horizontal cards per row on desktop, 1 per row on mobile. */
.dholki-cat-grid.dholki-view-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}
.dholki-cat-grid.dholki-view-list .dholki-cat-card{
  flex-direction:row;
}
.dholki-cat-grid.dholki-view-list .dholki-cat-card__media{
  width:160px;
  flex-shrink:0;
  aspect-ratio:1/1;
}
.dholki-cat-grid.dholki-view-list .dholki-cat-card__body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:16px 18px;
}
.dholki-cat-grid.dholki-view-list .dholki-cat-card__body h4{ font-size:15px; }
.dholki-cat-grid.dholki-view-list .dholki-cat-card__body a.add_to_cart_button,
.dholki-cat-grid.dholki-view-list .dholki-cat-card__body a.button{
  width:auto;
  align-self:flex-start;
  padding:10px 22px !important;
}

/* Sidebar filters (desktop, sticky) — clear the sticky header (was sitting
   under it at top:20px). Scoped to desktop only: on mobile the sidebar
   switches to a fixed full-height off-canvas panel (top:0) in
   dholki-category.css, and this top:80px must not fight that. */
@media (min-width:901px){
  .dholki-cat-filters{
    top:80px !important;
  }
}

@media (max-width:900px){
  /* Grid view already shows 2/row from dholki-category.css. List view also
     drops to 1/row on mobile, but keeps the exact same horizontal card
     style used on desktop (image left, info right) — just one per row
     instead of two, not stacked. */
  .dholki-cat-grid.dholki-view-list{ grid-template-columns:1fr; }

  /* Mobile off-canvas filter panel's close (X) button — flush into the
     panel's top-right corner instead of sitting indented by the panel's
     own padding. */
  .dholki-cat-filters-close{
    position:absolute;
    top:0;
    right:0;
    margin:0;
  }
}

/* dholki-category.css drops the grid to 1 column at <=520px (narrow phones)
   — Shop always wants 2/row in grid view regardless of width. List view
   stays untouched (already correct at this width). */
@media (max-width:520px){
  .dholki-cat-grid:not(.dholki-view-list){
    grid-template-columns:repeat(2, 1fr) !important;
  }
}