/* ============================================================
   ATS Shop — scoped styles for /shop and all product_cat /
   product_tag archives (parents + children). Everything lives
   under body.ats-shop so nothing leaks site-wide. We reskin the
   theme's real Flatsome/WooCommerce markup rather than replacing
   it, so the same rules cascade to every category archive.
   Tokens use WP preset variable names to match ats-landing and
   a future theme.json migration.
   ============================================================ */

body.ats-shop{
  --wp--preset--color--background: oklch(0.971 0.008 80);
  --wp--preset--color--foreground: oklch(0.215 0.018 35);
  --wp--preset--color--card: oklch(0.985 0.006 80);
  --wp--preset--color--primary: oklch(0.39 0.105 18);
  --wp--preset--color--primary-foreground: oklch(0.97 0.008 80);
  --wp--preset--color--secondary: oklch(0.93 0.018 70);
  --wp--preset--color--muted-foreground: oklch(0.5 0.025 40);
  --wp--preset--color--accent: oklch(0.88 0.045 25);
  --wp--preset--color--border: oklch(0.89 0.014 65);
  --wp--preset--font-family--heading: 'Fraunces', Georgia, serif;
  --wp--preset--font-family--base: 'Geist', system-ui, -apple-system, sans-serif;

  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
  -webkit-font-smoothing: antialiased;
}
body.ats-shop #wrapper,
body.ats-shop #main,
body.ats-shop .shop-container{ background: var(--wp--preset--color--background); }

/* ===== Breadcrumb ===== */
body.ats-shop .woocommerce-breadcrumb{
  font-family: var(--wp--preset--font-family--base);
  font-size: .75rem; letter-spacing: .04em;
  color: var(--wp--preset--color--muted-foreground);
}
body.ats-shop .woocommerce-breadcrumb a{ color: var(--wp--preset--color--muted-foreground); }
body.ats-shop .woocommerce-breadcrumb a:hover{ color: var(--wp--preset--color--primary); }

/* ===== Page-title + toolbar row ===== */
body.ats-shop .shop-page-title{ background: transparent; }
body.ats-shop .shop-page-title .page-title-inner{ padding: .75rem 0 1.5rem; align-items: flex-end; }
body.ats-shop .shop-page-title h1,
body.ats-shop .shop-page-title .is-large{
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.05;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  color: var(--wp--preset--color--foreground);
  margin: 0;
}
/* category banner image: keep but warm it and round it */
body.ats-shop .shop-page-title.featured-title .title-bg{
  border-radius: var(--ats-radius-card, 1rem);
  opacity: .92;
}

/* result count + ordering -> mockup toolbar pills */
body.ats-shop .woocommerce-result-count{
  font-family: var(--wp--preset--font-family--base);
  font-size: .85rem; color: var(--wp--preset--color--muted-foreground); margin: 0;
}
body.ats-shop .woocommerce-ordering select,
body.ats-shop .woocommerce-ordering .orderby{
  font-family: var(--wp--preset--font-family--base);
  font-size: .8rem; color: var(--wp--preset--color--foreground);
  background: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px; padding: .5rem 2.25rem .5rem 1rem;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237E7468' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right .85rem center;
}
body.ats-shop .woocommerce-ordering select:hover{ border-color: var(--wp--preset--color--primary); }

/* ===== Grid spacing ===== */
body.ats-shop .shop-container .products.row{ margin-bottom: 3rem; }

/* ===== Category tiles (subcategory boxes on /shop and category pages) ===== */
body.ats-shop .product-category .box{
  border-radius: 1rem; overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
  box-shadow: 0 1px 2px oklch(0.4 0.04 40 / .06);
}
body.ats-shop .product-category .box-image{ padding-top: 125% !important; border-radius: 0; }
body.ats-shop .product-category .box-image img{
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease;
}
body.ats-shop .product-category .box:hover .box-image img{ transform: scale(1.05); }
/* dark gradient + bottom-left label, like the mockup */
body.ats-shop .product-category .box-image::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, oklch(0.28 0.06 25 / .78), oklch(0.28 0.06 25 / .1) 55%, transparent);
}
body.ats-shop .product-category .box-text{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  text-align: left; padding: .9rem 1rem; background: transparent;
}
body.ats-shop .product-category .box-text .header-title{
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 500; font-size: 1.05rem; text-transform: none;
  letter-spacing: -.01em; color: #fff; margin: 0;
}
body.ats-shop .product-category .box-text .count{
  font-family: var(--wp--preset--font-family--base);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255,255,255,.82); margin: .2rem 0 0;
}

/* ===== Product card ===== */
body.ats-shop .product-small.box{ position: relative; }
body.ats-shop .product-small .box-image{
  border-radius: 1rem; overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--card);
  padding-top: 118% !important;
}
body.ats-shop .product-small .box-image img{
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease;
}
body.ats-shop .product-small.box:hover .box-image img.attachment-woocommerce_thumbnail{ transform: scale(1.05); }

/* stack the text block left-aligned like the mockup */
body.ats-shop .product-small .box-text{
  display: block; text-align: left; padding: .85rem 0 0;
}
body.ats-shop .product-small .box-text .category,
body.ats-shop .product-small .box-text .product-cat{
  font-family: var(--wp--preset--font-family--base);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--wp--preset--color--muted-foreground); opacity: 1; margin: 0 0 .25rem;
}
body.ats-shop .product-small .box-text .product-title{ margin: 0; }
body.ats-shop .product-small .box-text .product-title a{
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 500; font-size: 1.02rem; line-height: 1.25;
  color: var(--wp--preset--color--foreground);
}
body.ats-shop .product-small .box-text .product-title a:hover{ color: var(--wp--preset--color--primary); }

body.ats-shop .product-small .star-rating{
  margin: .45rem 0 0; font-size: .8em; color: var(--wp--preset--color--primary);
}
body.ats-shop .product-small .star-rating::before{ color: var(--wp--preset--color--border); }

body.ats-shop .product-small .price-wrapper{ margin: .55rem 0 0; }
body.ats-shop .product-small .price,
body.ats-shop .product-small .price .amount{
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.05rem; color: var(--wp--preset--color--foreground);
}
body.ats-shop .product-small .price del,
body.ats-shop .product-small .price del .amount{
  color: var(--wp--preset--color--muted-foreground); font-size: .85em; opacity: .7;
}
body.ats-shop .product-small .price ins,
body.ats-shop .product-small .price ins .amount{
  text-decoration: none; color: var(--wp--preset--color--primary);
}

/* add-to-cart -> outline pill that fills on hover */
body.ats-shop .product-small .add-to-cart-button{ margin: .8rem 0 0; }
body.ats-shop .product-small .add-to-cart-button .button{
  display: inline-block; width: 100%;
  font-family: var(--wp--preset--font-family--base);
  font-weight: 500; font-size: .82rem; letter-spacing: .01em;
  border-radius: 999px; padding: .65rem 1rem; line-height: 1;
  background: transparent !important;
  color: var(--wp--preset--color--primary) !important;
  border: 1px solid var(--wp--preset--color--primary) !important;
  transition: background .2s ease, color .2s ease;
}
body.ats-shop .product-small:hover .add-to-cart-button .button,
body.ats-shop .product-small .add-to-cart-button .button:hover,
body.ats-shop .product-small .add-to-cart-button .button.added{
  background: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--primary-foreground) !important;
}

/* ===== Badges (our New/Bestseller + Flatsome's Sale), top-left over image ===== */
body.ats-shop .product-small .ats-badge,
body.ats-shop .product-small .badge-container .badge .badge-inner,
body.ats-shop .product-small .badge-container .out-of-stock-label{
  font-family: var(--wp--preset--font-family--base);
  font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: .28rem .7rem; border-radius: 999px; line-height: 1;
}
body.ats-shop .product-small .ats-badge{
  position: absolute; left: .65rem; top: .65rem; z-index: 3;
  background: color-mix(in oklab, var(--wp--preset--color--card) 92%, transparent);
  color: var(--wp--preset--color--primary);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px oklch(0.4 0.04 40 / .12);
}
/* Flatsome's own Sale badge -> solid wine pill */
body.ats-shop .product-small .badge-container .badge-inner{
  background: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--primary-foreground) !important;
  border: 0 !important;
}

/* ===== Sidebar ===== */
body.ats-shop #shop-sidebar .widget{
  padding-bottom: 1.75rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
body.ats-shop #shop-sidebar .widget:last-child{ border-bottom: 0; }
body.ats-shop #shop-sidebar .widget-title,
body.ats-shop #shop-sidebar .widget-title span{
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 500; font-size: 1.05rem; text-transform: none; letter-spacing: -.01em;
  color: var(--wp--preset--color--foreground);
}
body.ats-shop #shop-sidebar ul{ list-style: none; margin: 0; padding: 0; }
body.ats-shop #shop-sidebar li{ margin: .45rem 0; border: 0; }
body.ats-shop #shop-sidebar li a{
  font-family: var(--wp--preset--font-family--base);
  font-size: .875rem; color: var(--wp--preset--color--muted-foreground);
}
body.ats-shop #shop-sidebar li a:hover,
body.ats-shop #shop-sidebar li .current-cat > a,
body.ats-shop #shop-sidebar li.chosen > a{ color: var(--wp--preset--color--primary); }
body.ats-shop #shop-sidebar .count{
  color: color-mix(in oklab, var(--wp--preset--color--muted-foreground) 70%, transparent);
  font-size: .78rem;
}
/* search + price inputs */
body.ats-shop #shop-sidebar input[type="text"],
body.ats-shop #shop-sidebar input[type="search"],
body.ats-shop #shop-sidebar input[type="number"],
body.ats-shop #shop-sidebar .price_slider_amount input{
  border: 1px solid var(--wp--preset--color--border);
  border-radius: .5rem; background: var(--wp--preset--color--card);
  font-family: var(--wp--preset--font-family--base); font-size: .8rem;
  padding: .45rem .6rem;
}
/* price filter slider in brand colours */
body.ats-shop #shop-sidebar .price_slider .ui-slider-range,
body.ats-shop #shop-sidebar .price_slider .ui-slider-handle{
  background: var(--wp--preset--color--primary);
}
body.ats-shop #shop-sidebar .price_slider{ background: var(--wp--preset--color--border); }
/* sidebar buttons (Filter / Apply) -> pill */
body.ats-shop #shop-sidebar .button,
body.ats-shop #shop-sidebar button[type="submit"]{
  border-radius: 999px; font-family: var(--wp--preset--font-family--base);
  font-weight: 500; font-size: .8rem;
  background: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--primary-foreground) !important; border: 0 !important;
}

/* ===== Pagination ===== */
body.ats-shop .woocommerce-pagination ul,
body.ats-shop nav.pagination .nav-links{ display: flex; justify-content: center; gap: .5rem; border: 0; }
body.ats-shop .woocommerce-pagination .page-numbers,
body.ats-shop nav.pagination .page-numbers{
  min-width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--wp--preset--color--border) !important;
  font-family: var(--wp--preset--font-family--base); font-size: .85rem;
  color: var(--wp--preset--color--foreground); background: transparent;
}
body.ats-shop .woocommerce-pagination .page-numbers.current,
body.ats-shop nav.pagination .page-numbers.current{
  background: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--primary-foreground) !important;
  border-color: var(--wp--preset--color--primary) !important;
}
body.ats-shop .woocommerce-pagination a.page-numbers:hover{
  border-color: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--primary) !important;
}