:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;
  --accent:#0f172a; /* deep slate */
  --accent-2:#d1a954; /* warm gold accent */
  --container:1200px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji'; color:var(--text); background:var(--bg); }
a{ color:inherit; text-decoration:none; }
.container{ max-width:var(--container); margin:0 auto; padding:0 16px; }

/* Topbar */
.topbar{ background:#452041; color:#ffffff; font-size:16px; }
/* .topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 20px; padding-left: 5px; margin-left: 5px; margin-right: 5px;} */
.topbar .container{
  max-width: none;     /* remove the 1200px cap */
  width: 100%;
  margin: 0;           /* no centering */
  padding: 10px 20px;  /* use padding, not margins, for inner spacing */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.topbar__left{ display:flex; gap:20px; }
.topbar__contact{ color:#ffffff; padding: 2px; }

/* Header */
.header-branding-widget img { 
  max-height: 200px; 
  height: auto; 
  width: auto; 
  display: block; 
}

/* Masthead */
.masthead{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:16px; }
.logo{ font-size:24px; font-weight:700; color:var(--accent); }

.search-form {display: flex; align-items: stretch;}
.search-form input[type="search"],
.search-form button[type="submit"] {
  box-sizing: border-box;          /* include borders in height */
  height: 54px;                    /* pick a height you like */
  font-size: 16px;
  border: 1px solid #ddd;
}

.search-form input[type="search"] {
  padding: 0 12px;
  border-right: 0;                 /* remove double border between them */
  border-radius: 6px 0 0 6px;
  /* -webkit-appearance: none;  */
  width: 450px;       /* helps Safari align heights */
}

.search-form button[type="submit"] {
  padding: 0 16px;                 /* horizontal padding only */
  display: inline-flex;            /* center the label nicely */
  align-items: center;
  justify-content: center;
  border-radius: 0 6px 6px 0;
  line-height: normal;             /* avoid weird tall buttons on some UAs */
  cursor: pointer;
  background-color: #371a34;
  color: #ffffff
}

.mini-cart, .user-profile{
  display: inline-flex;
  align-items: center;   /* centers icon + total as row items */

}



.mini-cart__total{
  display: inline-flex;          /* make it a flex container */
  align-items: center;           /* vertical center inside the pill */
  justify-content: center;       /* horizontal center */
  block-size: 54px;              /* = height */
  min-inline-size: 40px;         /* starts square, can grow with price */
  padding: 0 8px;                /* room for £ and digits */
  border-radius: 0 8px 8px 0;
  background-color: #371a34;
  color: #fff;
  white-space: nowrap;
  box-sizing: border-box;
  font-weight: 600;
  padding-right: 10px;
}

.mini-cart__total .woocommerce-Price-amount,
.mini-cart__total .woocommerce-Price-currencySymbol,
.mini-cart__total span{
  font-size: 22px;
  line-height: 1;   /* avoids extra vertical space */
  padding: 0;       /* optional: remove the 2px padding you had */
}

/* the bordered box that the emoji must not spill out of */
.mini-cart__link, .mini-account__link{
  position: relative;
  box-sizing: border-box;
  inline-size: 50px;          /* set the box size you want */
  block-size: 54px;
  border: 1px solid #ddd;
  border-radius: 8px 0px 0px 8px;         /* or 50% for a circle */
  display: grid;
  place-items: center;
  overflow: hidden;           /* just in case different emoji metrics */
  container-type: size;       /* <-- enables container query units */
}

.mini-account__link{
  border-radius: 8px;
  font-size: 32px;
}

.mini-account{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mini-account__icon{ display:block; line-height:1; }

.mini-account__label{ font-size: 14px; color: var(--text, #111); }
.mini-account__logout,
.mini-account__signin{
  font-size: 12px;
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: #fff;
  background: #371a34;
}

@media (max-width: 600px){
  /* optionally hide the text on small screens */
  .mini-account__label{ display: none; }
}

/* scale to the maximum that fits the container’s smaller dimension */
.mini-cart__icon{
  line-height: 1;
  display: block;
  font-size: 34px;
  /* alternative with a little margin: font-size: 90cq  min; */
  color: #371a34;
}


.mini-cart__icon img, .mini_account__icon img{ margin: 0px 0px 0px 0px;}

/* badge (optional) */
.mini-cart__count{
  position: absolute; top: -6px; right: -8px;
  min-width: 18px; height: 18px; line-height: 18px;
  padding: 0 6px; font-size: 12px; border-radius: 999px;
  background: var(--accent); color: #fff; text-align: center;
}


/* Primary nav */
.primary-nav{ border-top:1px solid #eee; border-bottom:1px solid #eee; }
/* .primary-nav .menu{ display:flex; gap:18px; flex-wrap:wrap; padding:10px 0; list-style:none; margin:0; }
.primary-nav .menu > li{ position:relative; }
.primary-nav .menu > li > a{ display:block; padding:8px 0; font-weight:600; }
.primary-nav .sub-menu{ position:absolute; top:100%; left:0; background:#fff; border:1px solid #eee; border-radius:8px; padding:8px 0; list-style:none; display:none; min-width:200px; box-shadow:0 8px 24px rgba(0,0,0,.06); z-index:20; }
.primary-nav .menu > li:hover > .sub-menu{ display:block; }
.primary-nav .sub-menu li a{ display:block; padding:8px 12px; font-size:14px; white-space:nowrap; } */
.primary-nav .menu{
  display: flex;
  justify-content: center;   /* ⬅ center horizontally */
  align-items: center;       /* ⬅ center vertically */
  align-content: center;     /* ⬅ if it wraps onto 2+ lines */
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 0;
  list-style: none;
  margin: 0;
}
.primary-nav .menu > li > a{
  display: block;
  padding: 8px 0;
  font-weight: 600;
  text-align: center;        /* center link text */
}
.primary-nav .menu > li{ position: relative; }
.primary-nav .sub-menu{ position:absolute; top:100%; left:0; background:#fff; border:1px solid #eee; border-radius:8px; padding:8px 0; list-style:none; display:none; min-width:200px; box-shadow:0 8px 24px rgba(0,0,0,.06); z-index:20; }
.primary-nav .menu > li:hover > .sub-menu{ display:block; }
.primary-nav .sub-menu li a{ display:block; padding:8px 12px; font-size:14px; white-space:nowrap; }


/* Top nav */
.topbar__right .menu{ display:flex; gap:18px; flex-wrap:wrap; padding:10px 0; list-style:none; margin:0; }
.topbar__right .menu > li{ position:relative; }

/* Hero */
.hero{ background:linear-gradient(135deg,#fafafa,#fff); border-bottom:1px solid #f0f0f0; }
.hero__inner{ display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:24px; padding:32px 0; }
.hero__title{ font-size:36px; margin:0 0 8px; }
.hero__subtitle{ color:var(--muted); margin:0 0 16px; }
.hero__image{ width:100%; height:280px; background:#eaeaea; border-radius:16px; }
.btn{ display:inline-block; padding:10px 16px; border-radius:999px; border:1px solid var(--accent); }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--secondary{ background:transparent; color:var(--accent); }

/* Features */
.features{ background:#fff; }
.features__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:16px 0; }
.feature{ display:flex; gap:12px; align-items:center; background:#fafafa; border:1px solid #f0f0f0; padding:12px; border-radius:12px; }
.feature__icon{ font-size:22px; }

/* Content */
.site-main .container{ padding:24px 0; }
.section-title{ font-size:24px; margin:24px 0 16px; }

/* Woo basics */
/*.woocommerce ul.products{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.woocommerce ul.products li.product{ border:1px solid #eee; border-radius:12px; padding:12px; }
.woocommerce ul.products li.product .button{ width:100%; border-radius:10px; }
.woocommerce div.product .product_title{ font-size:28px; }
.product-single__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; }
.product-single__gallery{ position:sticky; top:16px; }*/
/* Flexible product grid: never gets skinny */
/* Make the UL a true grid and remove default list spacing */
.woocommerce ul.products{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  list-style: none;  /* <-- removes bullets */
  padding: 0;        /* <-- fixes the "empty first column" */
  margin: 0;
}

/* Woo adds ::before/::after for float-clearing; they occupy the first grid cell */
.woocommerce ul.products::before,
.woocommerce ul.products::after{
  content: none !important;   /* <-- fixes the "empty first row" */
  display: none !important;
}

/* Neutralize Woo's column/float widths so grid controls layout */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product{
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Keep thumbnails uniform and not warped */
.woocommerce ul.products li.product a img{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

/* Footer */
.site-footer{ background:#0b0f19; color:#cbd5e1; margin-top:48px; }
.footer__grid{ display:grid; grid-template-columns:1fr 1fr 1fr; padding:32px 0; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.08); padding:12px 0 24px; color:#94a3b8; }

/* Responsive */
@media (max-width: 960px){
  .hero__inner{ grid-template-columns:1fr; }
  .features__grid{ grid-template-columns:repeat(2,1fr); }
  .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); }
  .product-single__grid{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
  .features__grid{ grid-template-columns:1fr; }
  .search input[type="search"]{ width:100%; }
}


/* === Hero Banner === */
.hero-banner{
  --hero-h: clamp(280px, 52vh, 560px);
  position: relative;
  min-height: var(--hero-h);
  color: #fff;
  display: grid;
  align-items: center;

  /* Background image + overlay */
  background-image:

    var(--hero-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-banner__inner{ padding: 40px 0; }
.hero-banner__copy{ max-width: 720px; }
.hero-banner__title{ font-size: clamp(28px, 4.2vw, 44px); margin: 0 0 8px;}
.hero-banner__sub{ font-size: clamp(16px, 2.2vw, 20px); color: #e5e7eb; margin: 0 0 16px; }

.hero-banner__cta.btn{
  display: inline-block;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--accent, #0f172a);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}

@media (max-width: 640px){
  .hero-banner__inner{ padding: 28px 0; }
}


/* === Product Category Cards Widget === */
.aac-cat-grid{
  --aac-cols: 3;
  --aac-aspect: 4 / 3;
  --aac-ovl: .35;
  display: grid;
  grid-template-columns: repeat(var(--aac-cols), minmax(0,1fr));
  gap: 16px;
}

.aac-cat-card{
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #f2f2f2;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.aac-cat-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.06); }

.aac-cat-card__media{
  position: relative;
  display: block;
  aspect-ratio: var(--aac-aspect);
}

.aac-cat-card__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.aac-cat-card__placeholder{
  display:block; width:100%; height:100%;
  background: repeating-linear-gradient(45deg,#eee,#eee 10px,#f7f7f7 10px,#f7f7f7 20px);
}

.aac-cat-card__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,var(--aac-ovl)), rgba(0,0,0,0) 60%);
}

.aac-cat-card__title{
  position: absolute; left: 12px; bottom: 12px;
  color: #fff; font-weight: 700;
  font-size: clamp(16px, 1.8vw, 20px);
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
  z-index: 1;
}

/* Responsive tweak */
@media (max-width: 800px){
  .aac-cat-grid{ --aac-cols: 2; }
}
@media (max-width: 520px){
  .aac-cat-grid{ --aac-cols: 1; }
}

/* === Product Carousel (AAC) === */
.aac-pc{ position: relative; }
.aac-pc__viewport{ overflow: hidden; }
.aac-pc__track{
  display: grid;
  grid-template-columns: repeat(var(--page-size, 5), minmax(0, 1fr)); /* ← fixed cols */
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.aac-pc__card.is-hidden{ display: none !important; }

.aac-pc__card{
  display: block;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  min-width: 0; /* avoid overflow in grid */
}

.aac-pc__thumb{ display:block; aspect-ratio: 1 / 1; background:#f7f7f7; }
.aac-pc__thumb img{ width:100%; height:100%; object-fit: cover; display:block; }

.aac-pc__meta{ padding: 10px; }
.aac-pc__title{ display:block; font-weight: 600; color:#111; margin:0 0 6px; }
.aac-pc__price{ color:#0b0f19; font-weight:700; }

.aac-pc__controls{
  display:flex; justify-content:flex-end; gap:8px; margin-top:10px;
}
.aac-pc__prev, .aac-pc__next{
  cursor:pointer;
  border:1px solid #ddd; background:#fff; border-radius:8px; width:36px; height:36px;
  display:grid; place-items:center; font-size:18px; line-height:1;
}
.aac-pc__prev:disabled, .aac-pc__next:disabled{ opacity:.4; cursor:not-allowed; }

/* hide items by page via class */
.aac-pc__card.is-hidden{ display: none !important; }



/* Scope everything to your wrapper */
.wp-block-group.myaccount-wrap .u-columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 720px){
  .wp-block-group.myaccount-wrap .u-columns{
    grid-template-columns: 1fr;
  }
}

/* Card styling for Login (left) + Register (right) */
.wp-block-group.myaccount-wrap .u-column1,
.wp-block-group.myaccount-wrap .u-column2{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
}

/* Headings */
.wp-block-group.myaccount-wrap h2{
  font-size: 20px;
  margin: 0 0 12px;
}

/* Inputs */
.wp-block-group.myaccount-wrap .woocommerce form .input-text,
.wp-block-group.myaccount-wrap .woocommerce form input[type="text"],
.wp-block-group.myaccount-wrap .woocommerce form input[type="email"],
.wp-block-group.myaccount-wrap .woocommerce form input[type="password"]{
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 12px;
  box-sizing: border-box;
}

/* Buttons */
.wp-block-group.myaccount-wrap .woocommerce .button,
.wp-block-group.myaccount-wrap .woocommerce button.button,
.wp-block-group.myaccount-wrap .woocommerce .woocommerce-Button{
  background: var(--accent, #0f172a);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
}
.wp-block-group.myaccount-wrap .woocommerce .button:hover{ opacity: .92; }

/* Spacing */
.wp-block-group.myaccount-wrap .form-row{ margin-bottom: 12px; }
.wp-block-group.myaccount-wrap .woocommerce-LostPassword{ margin-top: 8px; }


/* ===== My Account: layout & base ===== */
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-navigation ul{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.wp-block-group.myaccount-wrap .woocommerce-MyAccount-navigation li{
  margin: 0; /* kill default <li> spacing */
}

.wp-block-group.myaccount-wrap .woocommerce-MyAccount-navigation a{
  display: flex;
  align-items: center;
  gap: 10px;

  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px 14px;

  text-decoration: none;
  color: #111;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-navigation a:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
  border-color: #e6e6e6;
}

/* Active state */
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-navigation .is-active a{
  border-color: var(--accent, #0f172a);
  box-shadow: 0 6px 14px rgba(15,23,42,.08);
}

/* Little icon before each item (emoji for simplicity; swap to SVG if you like) */
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-navigation a::before{
  content: '•';
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  width: 1.2em; text-align: center;
  opacity: .9;
}

/* Per-endpoint icons */
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-navigation-link--dashboard a::before{ content:'🏠'; }
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-navigation-link--orders a::before{ content:'📦'; }
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-navigation-link--downloads a::before{ content:'⬇️'; }
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-navigation-link--edit-address a::before{ content:'🏷️'; }
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-navigation-link--payment-methods a::before{ content:'💳'; }
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-navigation-link--edit-account a::before{ content:'👤'; }
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-navigation-link--customer-logout a::before{ content:'↩️'; }

/* Content panel */
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-content{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
}

/* Headings inside content */
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-content h2,
.wp-block-group.myaccount-wrap .woocommerce-MyAccount-content h3{
  margin-top: 0;
}

/* Orders table styling */
.wp-block-group.myaccount-wrap .woocommerce table.shop_table{
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #eee;
}
.wp-block-group.myaccount-wrap .woocommerce table.shop_table th{
  background: #fafafa;
  font-weight: 600;
}
.wp-block-group.myaccount-wrap .woocommerce table.shop_table td,
.wp-block-group.myaccount-wrap .woocommerce table.shop_table th{
  padding: 12px 14px;
}

/* Buttons within account area */
.wp-block-group.myaccount-wrap .woocommerce a.button,
.wp-block-group.myaccount-wrap .woocommerce .button{
  background: var(--accent, #0f172a);
  color: #fff;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 9px 14px;
}
.wp-block-group.myaccount-wrap .woocommerce a.button:hover{ opacity:.92; }

/* Mobile tightening */
@media (max-width: 640px){
  .wp-block-group.myaccount-wrap .woocommerce-MyAccount-content{ padding:16px; }
}



/* ======= Product Page Tweaks (MMILO) ======= */

/* 1) Variant & Warehouse selectors: taller with padding + tidy borders */
.variations_form .variations select,
select[name="warehouse"], .mmilo-warehouse-field select,
.mmilo-warehouse-select {
  min-height: 46px;
  padding: 8px 12px;
  line-height: 1.2;
  border-radius: 6px;
  border: 1px solid #ddd;
  align-items: left;
}

/* If your theme uses Select2 on these dropdowns */
.variations_form .select2-container .select2-selection--single,
.select2-container--default .select2-selection--single {
  min-height: 46px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
}
.variations_form .select2-container .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px; /* visually centers text within 46px total height */
  padding: 0 6px;
}
.variations_form .select2-container .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px;
}

/* 2) Quantity & Add to Cart same height */
.single-product form.cart .quantity .qty {
  height: 46px;
  padding: 8px 10px;
}
.single-product form.cart .button.single_add_to_cart_button {
  height: 46px;
  line-height: 46px;    /* for non-flex buttons */
  padding: 0 18px;      /* horizontal padding only */
  display: inline-flex; /* keeps text vertically centered */
  align-items: center;
}

/* 3) SKU & Category on separate lines */
.product_meta .sku_wrapper,
.product_meta .posted_in {
  display: block; 
  margin: 4px 0;
}
.product_meta .sku_wrapper .sku,
.product_meta .posted_in a {
  font-weight: 600;
}

/* 4) Top info area right under title (price + dual stock) */
.mmilo-top-info {
  margin: 8px 0 14px;
}

/* 5) Dual stock block (Immediately Available / Available with Lead Time) */
.mmilo-dual-stock {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fafafa;
}
.mmilo-dual-stock .mmilo-stock-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.mmilo-dual-stock .mmilo-stock-label { color: #333; }
.mmilo-dual-stock .mmilo-stock-qty   { font-weight: 600; }

/* Left-align variation labels like "Color" */
.variations_form .variations .label,
.variations_form .variations th.label,
.variations_form .variations td.label {
  text-align: left !important;
}

/* Horizontal, scrollable thumb strip */
.mmilo-thumb-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}
.mmilo-thumb {
  flex: 0 0 auto;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 0;
  background: none;
  cursor: pointer;
}
.mmilo-thumb img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

/* Keep the main image perfectly square in layout (server crop already 1000x1000) */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* If a theme still renders default thumbs, hide them to avoid duplicates */
/* .woocommerce div.product div.images .flex-control-thumbs {
  display: none !important;
} */


/* Woo thumbs: horizontal, scrollable strip */
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}
.woocommerce div.product div.images .flex-control-thumbs li {
  flex: 0 0 auto;
  width: 80px;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 1px solid #e3f3e3;
  border-radius: 8px;
  display: block;
  cursor: pointer;
}

/* Keep main image square in layout (your 1000×1000 crop will fill this box) */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* MMILO archive card */
.products .product.mmilo-card, .products .product.mmilo-card * { box-sizing: border-box; }
.products .product.mmilo-card { height: 100%; }
.products .product.mmilo-card .mmilo-card__inner {
  display:flex; flex-direction:column; height:100%;
  padding:10px; border:1px solid #eee; border-radius:10px; background:#fff;
}

/* Square bordered image */
.mmilo-card__imagewrap{ display:block; }
.mmilo-card__square{ display:block; width:100%; aspect-ratio:1/1; border:1px solid #ddd; border-radius:8px; overflow:hidden; background:#fafafa; }
.mmilo-card__img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Title up, rest down */
.mmilo-card__body{ display:flex; flex-direction:column; flex:1 1 auto; margin-top:10px; }
.mmilo-card__title{ font-size:1rem; line-height:1.35; margin:0 0 4px; text-align:center; }
.mmilo-card__title a{ color:inherit; text-decoration:none; }
.mmilo-card__spacer{ flex:1 1 auto; }

.mmilo-card__meta{ display:grid; gap:6px; margin-top:8px; }
.mmilo-card__price{ text-align:center; }
.mmilo-card__stock{ border:1px solid #eee; background:#fafafa; border-radius:6px; padding:8px 10px; font-size:.9rem; }
.mmilo-stock-row{ display:flex; justify-content:space-between; gap:10px; padding:2px 0; }
.mmilo-card__variations{ text-align:center; font-size:.9rem; color:#666; }


/* Container spacing: no mysterious top/bottom lines or gaps */
.mmilo-acc{ margin: 0 0 12px 0; }
.mmilo-acc:last-child{ margin-bottom: 0; }

/* Accordion header button */
.mmilo-acc__summary{
  width: 100%;
  appearance: none;
  border: 0;
  background: #fff;
  padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.mmilo-acc__title{ font-weight: 600; }

/* Chevron rotation */
.mmilo-acc__chev{ transition: transform .15s ease; opacity: .7; }
.mmilo-acc.is-open .mmilo-acc__chev{ transform: rotate(180deg); opacity: .9; }

/* Panel body (no borders/lines, no extra space) */
.mmilo-acc__panel{
  padding: 8px 4px 0;         /* subtle internal breathing room */
}

/* Inline form layout */
.mmilo-filter-inline{ display: grid; gap: 10px; padding: 0; }

/* Reset default fieldset/legend spacing (removes big margins) */
.mmilo-filter-inline fieldset{ border: 0; margin: 0; padding: 0; }
.mmilo-filter-inline legend{ margin: 0 0 6px; padding: 0; font-weight: 600; }

/* Chips */
.mmilo-filter__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.mmilo-chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #e4e4e7; border-radius:999px; padding:6px 12px; background:#fff;
  cursor:pointer; user-select:none; transition: box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.mmilo-chip input{ appearance:none; width:0; height:0; margin:0; padding:0; border:0; }
.mmilo-chip span{ position:relative; padding-left:20px; }
.mmilo-chip span::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border:2px solid #c5c5d0; border-radius:3px; background:transparent;
}
.mmilo-chip input:checked + span::before{ background:#111; border-color:#111; }
.mmilo-chip input:checked + span{ font-weight:600; }
.mmilo-chip:hover{ border-color:#d4d4d8; box-shadow:0 1px 0 rgba(0,0,0,.04); }
.mmilo-chip.mmilo-chip--toggle span::before{ border-radius:999px; }

/* Selected count pill */
.mmilo-filter__count{
  background:#f3f4f6; border-radius:999px; font-size:.8rem; padding:2px 8px; margin-left:auto; margin-right:8px;
}

/* Reset link (optional) */
.mmilo-filter__actions{ display:flex; justify-content:flex-end; padding: 0; }
.mmilo-filter__reset{ font-size:.95rem; color:#555; }


/* 1) Smaller chips */
.mmilo-filter__chips { gap: 6px; }
.mmilo-chip{
  padding: 4px 10px;          /* was 6px 12px */
  gap: 6px;                   /* was 8px */
  font-size: 0.85rem;         /* was ~1rem */
}
.mmilo-chip span{ padding-left: 16px; } /* was 20px */
.mmilo-chip span::before{
  width: 10px; height: 10px;  /* was 12x12 */
  border-width: 2px;
}

/* Toggle chip uses round bullet—keep it proportional */
.mmilo-chip.mmilo-chip--toggle span::before{ border-radius: 999px; }

/* Smaller selected count pill on the accordion header */
.mmilo-filter__count{
  font-size: 0.75rem;
  padding: 1px 6px;
}

/* Keep the chip + reset on the same row and vertically centered */
.mmilo-chipbar,
.mmilo-filter-reset{
  display: inline-flex;        /* both are inline so they sit on one line */
  align-items: center;         /* center their own contents vertically */
  vertical-align: middle;      /* align these two boxes to each other vertically */
}

/* Tidy the reset link so its text sits centered like the chip text */
.mmilo-filter__reset{
  display: inline-flex;
  align-items: center;
  line-height: 1;              /* avoid tall baseline spacing */
}

/* (optional) small left gap so they don’t touch */
.mmilo-filter-reset{ margin-left: 8px; }

.mmilo-pagination { margin: 16px 0; text-align: center; }
.mmilo-pagination .page-numbers { display: inline-flex; gap: 6px; align-items: center; padding-left: 0; }
.mmilo-pagination .page-numbers li { list-style: none; }
.mmilo-pagination .page-numbers a,
.mmilo-pagination .page-numbers span {
  display: inline-block; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 8px; text-decoration: none;
}
.mmilo-pagination .page-numbers .current { background: #111; color: #fff; border-color: #111; }


/* Lock the product grid to a fixed column count (no stretching on short rows) */
.woocommerce ul.products.mmilo-products-by-category{
  display: grid !important;
  --mmilo-gap: 16px;
  gap: var(--mmilo-gap);
  grid-template-columns: repeat(var(--mmilo-cols, 4), minmax(0, 1fr));
}

/* Map Woo’s columns-* class to our variable */
.woocommerce ul.products.mmilo-products-by-category.columns-2{ --mmilo-cols: 2; }
.woocommerce ul.products.mmilo-products-by-category.columns-3{ --mmilo-cols: 3; }
.woocommerce ul.products.mmilo-products-by-category.columns-4{ --mmilo-cols: 4; }
.woocommerce ul.products.mmilo-products-by-category.columns-5{ --mmilo-cols: 5; }
.woocommerce ul.products.mmilo-products-by-category.columns-6{ --mmilo-cols: 6; }

/* Kill inherited flex/floats so items don't auto-grow */
.woocommerce ul.products.mmilo-products-by-category li.product{
  width: auto !important;
  margin: 0 !important;          /* spacing comes from grid gap */
  float: none !important;
  flex: 0 0 auto !important;
}

/* Optional: responsive fallbacks (tweak to taste) */
@media (max-width: 1024px){
  .woocommerce ul.products.mmilo-products-by-category{ --mmilo-cols: 3; }
}
@media (max-width: 768px){
  .woocommerce ul.products.mmilo-products-by-category{ --mmilo-cols: 2; }
}
@media (max-width: 480px){
  .woocommerce ul.products.mmilo-products-by-category{ --mmilo-cols: 1; }
}


/* Search result grid — fixed columns, no stretching */
.woocommerce ul.products.mmilo-products-by-category{
  display: grid !important;
  --mmilo-gap: 16px;
  gap: var(--mmilo-gap);
  grid-template-columns: repeat(var(--mmilo-cols, 4), minmax(0, 1fr));
}
.woocommerce ul.products.mmilo-products-by-category.columns-4{ --mmilo-cols: 4; }
.woocommerce ul.products.mmilo-products-by-category li.product{
  width:auto!important; margin:0!important; float:none!important; flex:0 0 auto!important;
}


/* === Search results: match category grid & cards === */

/* If your search UL already has `mmilo-products-by-category`, these override nothing.
   If it doesn't, these rules act as a safe fallback so search looks the same. */
body.search .woocommerce ul.products{
  display: grid !important;
  gap: var(--mmilo-gap, 16px);
  grid-template-columns: repeat(var(--mmilo-cols, 4), minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

body.search .woocommerce ul.products.columns-2{ --mmilo-cols: 2; }
body.search .woocommerce ul.products.columns-3{ --mmilo-cols: 3; }
body.search .woocommerce ul.products.columns-4{ --mmilo-cols: 4; }
body.search .woocommerce ul.products.columns-5{ --mmilo-cols: 5; }

body.search .woocommerce ul.products li.product{
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  flex: 0 0 auto !important;
  height: 100%;
}

/* If your search items are already rendered with mmilo cards, this just aligns spacing. */
body.search .woocommerce ul.products li.product.mmilo-card .mmilo-card__inner{
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Ensure the square image frame and title spacing are consistent on search too */
body.search .woocommerce ul.products li.product .mmilo-card__square{
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
}
body.search .woocommerce ul.products li.product .mmilo-card__img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
body.search .woocommerce ul.products li.product .mmilo-card__title{
  font-size: 1rem; line-height: 1.35; margin: 10px 0 4px; text-align: center;
}

/* Optional: tighten the search page heading spacing to match category pages */
body.search .woocommerce-products-header{ margin-bottom: 10px; }

/* Search results: hard-lock to the same grid + card styling */
body.search .woocommerce ul.products.mmilo-products-by-category{
  display: grid !important;
  gap: var(--mmilo-gap, 16px) !important;
  grid-template-columns: repeat(var(--mmilo-cols, 4), minmax(0, 1fr)) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.search .woocommerce ul.products.mmilo-products-by-category.columns-4{ --mmilo-cols: 4; }

body.search .woocommerce ul.products.mmilo-products-by-category li.product{
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  flex: 0 0 auto !important;
  height: 100% !important;
}

/* === Search page sizing + gutter fixes === */

/* 1) Make cards more compact on search */
body.search .mmilo-card .mmilo-card__inner{
  padding: 8px;               /* was ~10–12px */
}
body.search .mmilo-card .mmilo-card__title{
  font-size: 0.95rem;
  line-height: 1.3;
  margin: 8px 0 4px;
}
body.search .mmilo-card .mmilo-card__price,
body.search .mmilo-card .mmilo-card__stock,
body.search .mmilo-card .mmilo-card__meta{
  font-size: 0.9rem;
  line-height: 1.3;
  margin: 2px 0;
}

/* Optional: slightly smaller gap between cards on search */
body.search .woocommerce ul.products.mmilo-products-by-category{
  --mmilo-gap: 12px;
}

/* 2) Add left/right padding and constrain max width on search page only */
body.search .woocommerce{
  max-width: 1200px;          /* tune to your site width */
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;         /* bring back gutters */
  padding-right: 16px;
}
@media (min-width: 1024px){
  body.search .woocommerce{ padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1440px){
  body.search .woocommerce{ max-width: 1280px; }
}

/* 3) (Optional) Make cards smaller on very wide screens by increasing columns */
@media (min-width: 1280px){
  body.search .woocommerce ul.products.mmilo-products-by-category.columns-4{ --mmilo-cols: 5; }
}
@media (min-width: 1536px){
  body.search .woocommerce ul.products.mmilo-products-by-category.columns-4{ --mmilo-cols: 6; }
}

/* Match search heading to the grid container width + gutters */
body.search .woocommerce-products-header{
  max-width: 1200px;        /* keep in sync with the grid container */
  margin: 0 auto 12px;      /* center + a bit of space below */
  padding: 0 16px;          /* same side padding as the grid */
}
@media (min-width: 1024px){
  body.search .woocommerce-products-header{ padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1440px){
  body.search .woocommerce-products-header{ max-width: 1280px; }
}

/* (optional) tighten heading typography to match card sizing */
body.search .woocommerce-products-header__title.page-title{
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0;
}