/* pages/shop.css — the product listing at /shop.
 *
 * Extracted verbatim from the <style> block that was inline in the WordPress
 * export's shop/index.html. Loaded only by pages/shop.htm; every selector is
 * scoped to #pf-shop or the .pf-* drawer classes, so nothing here leaks.
 */

/* keep product photos square like the template cards (theme puts no height on them) */
#pf-shop .mkdf-pl-image img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block }
.widget_products .product_list_widget img { aspect-ratio: 1/1; object-fit: cover }
.widget.woocommerce.widget_price_filter .price_slider_amount .price_label { font-size: 18px !important; line-height: 30px !important }
.tagcloud a.pf-tag-active { color: #C19D56 !important }

/* mobile: filters open in a slide-in drawer */
.pf-filter-toggle { display: none; box-sizing: border-box; padding: 14px 20px; background: transparent; border: none; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #000; cursor: pointer; align-items: center; justify-content: flex-start; gap: 9px; margin-bottom: 14px }
.pf-filter-toggle:hover { color: #C19D56 }
.pf-filter-toggle .pf-filter-ico { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none }
.pf-drawer-overlay { display: none }
.pf-drawer-close { display: none }

@media (max-width: 768px) {
  .widget.woocommerce.widget_price_filter .price_slider_amount .price_label { font-size: 14px !important }
  .mkdf-container-inner > .mkdf-grid-row { display: flex; flex-direction: column }
  .mkdf-page-content-holder.mkdf-grid-col-9 { width: 100% !important; float: none !important; order: 0 }
  .pf-filter-toggle { display: flex; order: -2 }
  .mkdf-sidebar-holder.mkdf-grid-col-3 { position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 340px; margin: 0 !important; padding: 58px 22px 30px; box-sizing: border-box; background: #fff; z-index: 100001; overflow-y: auto; -webkit-overflow-scrolling: touch; float: none !important; transform: translateX(-100%); transition: transform .28s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .25) }
  .mkdf-sidebar-holder.mkdf-grid-col-3.pf-open { transform: translateX(0) }
  .pf-drawer-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 100000; opacity: 0; visibility: hidden; transition: opacity .28s }
  .pf-drawer-overlay.pf-open { opacity: 1; visibility: visible }
  .pf-drawer-close { display: block; position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: none; background: none; font-size: 30px; line-height: 1; color: #000; cursor: pointer; padding: 0 }
  body.pf-drawer-locked { overflow: hidden }
}