/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.13.8.1785848854
Updated: 2026-08-04 13:07:34

*/

/* TRENDING PRODUCTS */
.td-trending-wrap .section {max-width: 1440px; margin: 0 auto;}
.td-trending-wrap .section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
/* ----- SLIDER WRAPPER / ARROWS (sit on either side of the grid) ----- */
.td-trending-wrap .product-slider {
  display: flex;
  align-items: center;
  gap: 10px;
}
.td-trending-wrap .slider-arrow {
  background-color: #ffffff00;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 10px;
  border: 1px solid #1b3230;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease;
}
.td-trending-wrap .slider-arrow:hover { background: #0e1c1a;}

/* ----- GRID / SLIDER MODES ----- */
.td-trending-wrap .product-grid {gap: 18px; flex: 1; min-width: 0;}
.td-trending-wrap .product-grid.mode-grid {display: grid; grid-template-columns: repeat(6, 1fr);}
.td-trending-wrap .product-grid.mode-slider {
  padding-top: 12px;
  margin-top: -12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (18px * (var(--pg-cols, 6) - 1))) / var(--pg-cols, 6));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
}
.td-trending-wrap .product-grid.mode-slider::-webkit-scrollbar { height: 6px; }
.td-trending-wrap .product-grid.mode-slider::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 6px; }
.td-trending-wrap .product-grid.mode-slider .product-card { scroll-snap-align: start; }
.td-trending-wrap .product-card {
  position: relative;
  background: #0e1c1a;
  border: 1px solid #1b3230;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  align-items: start;
  text-align: center;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.td-trending-wrap .product-card img {
  width: 100%;
  aspect-ratio: 3/3.4;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0px;
  background: #081514;
}
.td-trending-wrap .product-card h3{margin: 0;}
.td-trending-wrap .product-card h3 a {font-size: 13px; line-height: 23px; font-weight: 600; color: #fff;}
.td-trending-wrap .product-card .flavor {font-size: 11px; line-height: 23px; font-weight: 400; color: #5f7876; margin: 0; }
.td-trending-wrap .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.td-trending-wrap .price--now { font-size: 16px; font-weight: 700; color: #0DB3B3;}
.td-trending-wrap .price--old {font-size: 12px; color: #5f7876; text-decoration: line-through;}
.td-trending-wrap .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  line-height: 17px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  z-index: 2;
  color: #fff;
}
.td-trending-wrap .badge--new { background: #0DB3B3;}
.td-trending-wrap .badge--sale { background: #f43f5e;}
.td-trending-wrap .btn-cart {
  width: 100%;
  padding: 10px;
  background: #081514;
  color: #fff;
  border: 1px solid #1b3230;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;  
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .2s ease, border-color .2s ease;
}
.td-trending-wrap .btn-cart:hover {background: #0DB3B3; border-color: #0DB3B3;}



/* ----- RESPONSIVE -----
   Overrides target the grid-template-columns / grid-auto-columns
   properties directly (not the --pg-cols variable) so they always
   win over the inline --pg-cols set by PHP. */
/* @media (max-width: 1300px) {
  .td-trending-wrap .product-grid.mode-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .td-trending-wrap .product-grid.mode-slider { grid-auto-columns: calc((100% - 54px) / 4) !important; }
}
@media (max-width: 1000px) {
  .td-trending-wrap .product-grid.mode-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .td-trending-wrap .product-grid.mode-slider { grid-auto-columns: calc((100% - 36px) / 3) !important; }
}
@media (max-width: 900px) {
  .td-trending-wrap .section { padding: 20px; }
  .td-trending-wrap .product-grid.mode-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .td-trending-wrap .product-grid.mode-slider { grid-auto-columns: calc((100% - 18px) / 2) !important; }
}
@media (max-width: 560px) {
  .td-trending-wrap .product-grid.mode-grid { grid-template-columns: 1fr !important; }
  .td-trending-wrap .product-grid.mode-slider { grid-auto-columns: 85% !important; }
} */

/* SHOP BY CATEGORY */
.sc-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.sc-card{
  background: #0e1c1a;
  border: 1px solid #1b3230;
  border-radius: 14px;
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sc-card:hover, .td-trending-wrap .product-card:hover{transform: translateY(-4px); border-color: #0DB3B3;}
.sc-circle img {width: 100%; height: 100%; object-fit: contain;}
.sc-name {
  font-family: 'Inter', sans-serif;
  font-size: 11x;
  font-weight: 700;
  letter-spacing: 0.3x;
  color: #fff;
  text-transform: uppercase;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 1024px) {
  .sc-grid {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 767px){
  .cloud-newsletter-form p span.wpcf7-form-control-wrap {width: 60% !important;}
	.cloud-newsletter-form input[type="submit"]{width: 40%;}
  .sc-grid {grid-template-columns: repeat(2, 1fr);}
	.mobile-marquee {
        width: 100%;
        overflow: hidden;
    }

    .mobile-marquee .elementor-icon-list-items {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        animation: marquee 15s linear infinite;
    }

    .mobile-marquee .elementor-icon-list-item {
        flex: 0 0 auto;
        white-space: nowrap;
        margin-right: 30px;
    }

    @keyframes marquee {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }
	.cloud-newsletter-form p{display: block;}
}

/* Header css */
.top-bar{background: linear-gradient(90deg, #06434A 0%, #075E67 50%, #04383F 100%);}

/* Home page css  */
.Btn-style a.n2-ow {background: linear-gradient(90deg, #006B73 0%, #00C0C4 100%) !important;}
.image-style .n2-ss-layer-col{background-position: right !important; background-repeat: no-repeat !important; background-size: auto !important;}

/* footer css */
.cloud-newsletter-form p{display: flex; align-items: center; gap: 0px; margin: 0; padding: 0;}
.cloud-newsletter-form p span.wpcf7-form-control-wrap{width: auto;}
.cloud-newsletter-form input[type="email"] {
    width: 250px;
    max-width: 100%;
    height: 42px;
    padding: 13px 18px !important;
    border: 1px solid #1b3230;
    border-radius: 5px 0px 0px 5px;
    background: #06100f;
    color: #fff;
    font-size: 13px;
}
.cloud-newsletter-form input[type="email"]::placeholder {color: #93a8a5;}
.cloud-newsletter-form input[type="email"]:focus {border-color: #fff !important;}
.cloud-newsletter-form input[type="submit"] {
    padding: 13px 26px;
    height: 42px;
    border-radius: 0px 5px 5px 0px;
    background: linear-gradient(90deg, #075e67 0%, #0DB3B3 100%);
    cursor: pointer;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    line-height: 15px;
}
.cloud-newsletter-form input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(34, 211, 238, 0.35);
}

/* About page */
.counter-text-style{background: linear-gradient(90deg, #0CB6B6 0%, #079696 100%); background-clip: text; -webkit-text-fill-color: transparent;}

/* Contact page css */
.hero-bg{background: radial-gradient(circle at 50% 10%, #0cb6b654, transparent 100%), linear-gradient(180deg, #000000 30%, #000000 50%);}
.contact-box-style a {color: #FFFFFF5E;}
.contact-box-style a:hover {color: #fff;}
.contact-box-style span.elementor-icon{background: linear-gradient(90deg, #0CB6B6 0%, #079696 100%);}
/* contact form */
.cloud-contact-form {width: 100%;}
.cloud-form-row {display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px;}
.cloud-form-group {width: 100%;}
.cloud-form-group p , .cloud-submit-wrap p{margin-bottom: 0px;}
.cloud-contact-form label {color: #FFF; font-size: 12px; font-weight: 600; line-height: 22px; letter-spacing: 0.3px;}
.cloud-contact-form input[type="text"],
.cloud-contact-form input[type="email"],
.cloud-contact-form input[type="tel"],
.cloud-contact-form select,
.cloud-contact-form textarea {
    border: 1px solid #FFF;
    border-radius: 8px;
    background: #FFFFFF00;
    color: #ffffff;
    font-size: 13px;
}
.cloud-contact-form input[type="text"],
.cloud-contact-form input[type="email"],
.cloud-contact-form input[type="tel"],
.cloud-contact-form select {height: 45px;}
.cloud-contact-form input::placeholder,
.cloud-contact-form textarea::placeholder {color: #FFF;}
.cloud-contact-form input:focus,
.cloud-contact-form select:focus,
.cloud-contact-form textarea:focus {border-color: #0CB6B6 !important;}
.cloud-contact-form select {cursor: pointer; color: #ffffff !important;}
.cloud-message-group {margin-bottom: 18px;}
.cloud-submit-wrap {width: 100%;}
.cloud-contact-form input[type="submit"] {
   width: 100%;
    padding: 14px 28px;
    border-radius: 25px;
    background: linear-gradient(90deg, #0CB6B6 0%, #079696 100%);
    color: #ffffff;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;    
}
.cloud-contact-form input[type="submit"]:hover {transform: translateY(-2px); box-shadow: 0 12px 30px rgba(34, 211, 238, 0.45);}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output{color: #fff;}

/* CF7 validation */
.cloud-contact-form .wpcf7-not-valid {
    border-color: #e85d5d !important;
}
.cloud-contact-form .wpcf7-not-valid-tip {
    margin-top: 5px;
    color: #ff7777;
    font-size: 11px;
}
/* Success message */
.cloud-contact-form .wpcf7-response-output {
    margin: 15px 0 0 !important;
    padding: 10px 12px !important;
    border-radius: 6px;
    border: 1px solid #20c4df !important;
    color: #9bdde5;
    font-size: 12px;
}




/* shop page */
/* =========================================================
   CLOUD DISTRICT VAPES — SHOP ARCHIVE STYLES
   File: assets/css/shop-archive.css
   Enqueue on is_shop() / is_product_category() / is_product_taxonomy()
   ========================================================= */

:root {
  --bg: #06100f;
  --bg-alt: #0a1917;
  --card-bg: #0e1c1a;
  --card-border: #1b3230;
  --text: #ffffff;
  --text-muted: #93a8a5;
  --text-faint: #5f7876;

  --accent: #22d3ee;
  --accent-2: #06b6d4;
  --accent-dark: #0e7490;
  --gradient: linear-gradient(90deg, #22d3ee 0%, #06b6d4 100%);

  --sale: #f43f5e;
  --success: #22c55e;
  --warning: #fbbf24;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --max-width: 1440px;
}

/* ----- PAGE HEADER (breadcrumb banner) ----- */
.page-header {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(34, 211, 238, 0.12), transparent 55%),
    linear-gradient(180deg, #0a1917 0%, #06100f 100%);
  padding: 56px 24px;
  text-align: center;
}
.page-header__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 12px;
}
.page-header h1 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text);
}
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb i { font-size: 9px; color: var(--text-faint); }
.breadcrumb span { color: var(--accent); }

.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ----- LAYOUT ----- */
.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

/* ----- FILTER SIDEBAR ----- */
.filters {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 24px;
  position: sticky;
  top: 24px;
}
.filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.filters__head h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.filters__clear {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}
.filter-group {
  border-top: 1px solid var(--card-border);
  padding: 18px 0;
}
.filter-group:first-of-type { border-top: none; padding-top: 0; }
.filter-group__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
}
.filter-group__title i { font-size: 10px; color: var(--text-faint); }
.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  cursor: pointer;
}
.filter-option input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.filter-option input[type="checkbox"]:checked {
  background: var(--gradient);
  border-color: var(--accent);
}
.filter-option input[type="checkbox"]:checked::after {
  content: '\2713';
  position: absolute;
  top: -2px;
  left: 2px;
  font-size: 11px;
  color: #06100f;
  font-weight: 900;
}
.filter-option span.count { margin-left: auto; color: var(--text-faint); font-size: 11px; }

.price-range { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.price-range input[type="range"] { width: 100%; accent-color: var(--accent); }
.price-values { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }

.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--card-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .2s ease;
  display: inline-block;
}
.swatch:hover, .swatch.active { border-color: var(--accent); color: var(--accent); background: rgba(34,211,238,0.08); }

.filters__banner {
  margin-top: 22px;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, #0e7490, #22d3ee);
  padding: 22px;
  text-align: center;
}
.filters__banner i { font-size: 22px; margin-bottom: 10px; }
.filters__banner h4 { font-family: var(--font-display); font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.filters__banner p { font-size: 11px; color: rgba(255,255,255,0.85); }

/* ----- ACTIVE FILTER TAGS ----- */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.active-filter-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
}
.active-filter-tag:hover { border-color: var(--sale); color: var(--sale); }
.active-filter-tag i { font-size: 10px; }

/* ----- TOOLBAR ----- */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.shop-toolbar__count { font-size: 13px; color: var(--text-muted); }
.shop-toolbar__count b { color: var(--text); }
.shop-toolbar__right { display: flex; align-items: center; gap: 14px; }
#cdv-sort-form { margin: 0; }
.select-wrap { position: relative; display: flex; align-items: center; }
.select-wrap select {
  appearance: none;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 34px 10px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.select-wrap i { position: absolute; right: 14px; font-size: 10px; color: var(--text-faint); pointer-events: none; }

.view-toggle { display: flex; gap: 6px; }
.view-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
}
.view-toggle-btn.active { border-color: var(--accent); color: var(--accent); }

/* ----- PRODUCT GRID ----- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.product-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 16px;
  position: relative;
  transition: transform .2s ease, border-color .2s ease;
}
.product-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.product-card__media { display: block; }
.product-card img,
.product-card .attachment-medium,
.product-card .attachment-woocommerce_thumbnail {
  width: 100%;
  aspect-ratio: 1/1.05;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  background: #081514;
}
.product-card__title-link { color: var(--text); }
.product-card h3 { font-size: 13px; font-weight: 600; margin-bottom: 3px; line-height: 1.35; }
.product-card .flavor { font-size: 11px; color: var(--text-faint); margin-bottom: 10px; }

.rating-row { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.rating-row i { font-size: 10px; color: var(--warning); }
.rating-row span { font-size: 11px; color: var(--text-faint); margin-left: 4px; }

.badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-radius: 4px;
  color: #06100f;
}
.badge--new { background: var(--accent); }
.badge--sale { background: var(--sale); color: #fff; }

.quick-add {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(6,16,15,0.75);
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 2;
  transition: background .2s ease, border-color .2s ease;
  color: var(--text);
}
.quick-add:hover { background: var(--accent); border-color: var(--accent); color: #06100f; }
.quick-add.loading { opacity: 0.5; pointer-events: none; }
.quick-add.added::after {
  content: '\2713';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--success);
  color: #06100f;
  border-radius: 50%;
}

.stock-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 8px; display: inline-block; }
.stock-tag.in { color: var(--success); }
.stock-tag.low { color: var(--warning); }
.stock-tag.out { color: var(--sale); }

.price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.price ins { text-decoration: none; font-size: 16px; font-weight: 700; color: var(--accent); }
.price del { font-size: 12px; color: var(--text-faint); opacity: 1; }
.price bdi { font-size: 16px; font-weight: 700; color: var(--accent); }
.price .woocommerce-Price-currencySymbol { font-size: inherit; }

.btn-cart {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--card-border);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.btn-cart:hover { background: var(--accent-dark); border-color: var(--accent); }
.btn-cart.loading { opacity: 0.6; pointer-events: none; }
.btn-cart[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ----- LIST VIEW ----- */
.shop-grid--list { grid-template-columns: 1fr; }
.shop-grid--list .product-card {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 20px;
  align-items: center;
}
.shop-grid--list .product-card img { margin-bottom: 0; aspect-ratio: 1/1; }
.shop-grid--list .btn-cart { width: auto; padding: 12px 24px; }

/* ----- EMPTY STATE ----- */
.shop-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.shop-empty .btn-cart { display: inline-flex; width: auto; padding: 12px 28px; margin-top: 16px; }

/* ----- PAGINATION ----- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.pagination .page-numbers {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination .page-numbers.current { background: var(--gradient); color: #fff; border-color: transparent; }
.pagination .page-numbers:hover:not(.current) { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.dots { border: none; background: none; }

/* ----- RESPONSIVE ----- */
@media (max-width: 1200px) {
  .shop-layout { grid-template-columns: 220px 1fr; }
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-grid--list .product-card { grid-template-columns: 90px 1fr; }
  .shop-grid--list .btn-cart { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 560px) {
  .shop-grid { grid-template-columns: 1fr 1fr; }
  .shop-toolbar { flex-direction: column; align-items: flex-start; }
  .page-header h1 { font-size: 26px; }
}