/* ===== Header-attached Shop Bubble ===== */
.srBubble {
  width: 100%;
  max-width: 1250px;
  background: radial-gradient(120% 120% at 100% 0%, var(--panel-grad-start) 0%, var(--panel-grad-end) 100%);
  color: #fff;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  border: 1px solid #1f2937; /* dark gray border to match header */
  border-top: 0; /* visually attach to the header above */
  margin: 0 auto;
}

.srBubble__inner {
  max-width: none;
  margin: 0;
  padding: 18px;
}

/* Remove global site padding around the shop bubble on product archives */
body.post-type-archive-product .site,
body.tax-product_cat .site,
body.tax-product_tag .site,
body.woocommerce-shop .site {
  padding: 0;
}

/* Keep header divider line visible on shop pages (use header.css default border-bottom) */

/* Removed mobile-specific product card overrides */

/* When searching/filtering on shop, hide category tiles so only products show */
.shop-filtered-q .woocommerce ul.products li.product-category {
  display: none;
}

/* ===== Shop Head & Filters ===== */
.shopHead {
  color: var(--text);
  background: radial-gradient(120% 120% at 100% 0%, var(--panel-grad-start) 0%, var(--panel-grad-end) 100%);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
  margin: 18px;
}

.shopHead__inner {
  max-width: none;
  margin: 0;
  padding: 18px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}

.shopHead__title {
  margin: 0;
  font-size: 28px;
}

.shopHead__desc {
  margin: 6px 0 0;
  opacity: 0.85;
}

.shopFilters {
  display: block;
}

.shopFilters .shopSidebar__sectionTitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 6px;
  letter-spacing: 0.1px;
}

.shopFilters__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.shopFilters__field label {
  display: block;
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 6px;
  font-weight: 800;
}

.shopFilters__field input,
.shopFilters__field select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* Remove number input spinners for price fields */
.shopFilters input[type="number"]::-webkit-outer-spin-button,
.shopFilters input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shopFilters input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.shopFilters__field--range .shopFilters__inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

.shopFilters__actions {
  display: flex;
  gap: 8px;
}

/* ===== Custom Sort Bubble ===== */
.shopSort {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  overflow: hidden; /* let the whole control feel like one bubble */
}
.shopSort__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  width: 100%;
  border: 0;              /* use parent bubble border */
  background: transparent;/* blend into parent */
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  justify-content: flex-start; /* text on the left */
}
.shopSort__label { opacity: 0.8; font-weight: 700; }
.shopSort__current { font-weight: 900; }
.shopSort__menu {
  position: static;        /* participate in layout so the panel expands */
  margin-top: 0;           /* attached to toggle */
  padding: 10px 12px 12px;
  background: transparent; /* same bubble continues */
  border: 0;               /* no inner border */
  box-shadow: none;
}

/* When open: hide the header row so only options are shown */
.shopSort[data-open] .shopSort__toggle { display: none; }
.shopSort__opt {
  width: 100%;
  height: 38px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* left align text */
  padding: 6px 6px;            /* match catTree li padding */
  border-radius: 10px;         /* match catTree li rounding */
  border: 0;
  background: transparent;
  color: #fff;                 /* match category link color */
  opacity: 0.92;               /* match category default opacity */
  font-weight: 400;            /* non-bold by default */
  cursor: pointer;
}
.shopSort__opt + .shopSort__opt { margin-top: 8px; }
.shopSort__opt.is-active { background: transparent; text-decoration: none; color: #fff; opacity: 1; font-weight: 900; }
.shopSort__opt:hover { background: rgba(255, 255, 255, 0.06); color: #fff; opacity: 1; }

.sec--categories .catGrid {
  max-width: none;
  margin: 0 0 24px;
  padding: 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.catChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
}

.catChip:hover {
  background: rgba(255, 255, 255, 0.10);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* Removed mobile-specific shop layout overrides */

/* ===== Shop Two-Column Layout ===== */
.shopLayout {
  /*
    --prod-card-h: 370px; card height base (+20px)
    flows below the sidebar's bottom edge.
  */
  display: block;
}

/* clearfix for floated sidebar */
.shopLayout::after {
  content: "";
  display: block;
  clear: both;
}

.shopSidebar {
  background: transparent; /* remove bubble */
  border: 0;               /* remove bubble */
  border-radius: 0;        /* remove bubble */
  padding: 0 10px 0 0;     /* 10px padding between filter menu and divider */
  float: left;
  width: 280px;
  max-width: 280px;
  margin-right: 26px;      /* match previous grid gap */
  height: auto;
  position: relative; /* for divider pseudo-element */
  top: auto;
  /* Let sidebar grow naturally; page scrolls instead of a nested scrollbar */
  max-height: none;
  overflow: visible;
  /* allow divider pseudo-element to extend into the grid gap */
  overflow-x: visible;
}

/* Ensure a taller minimum card height using the variable */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

/* ===== Flexbox debug (temporary) =====
   Visualize nested flex areas and re-enable minimal flex layout so content shows.
   Colors:
   - Card root: red
   - Media block: green
   - Content column: yellow
   - Bottom row: purple
   - Price element: orange
*/
.woocommerce ul.products li.product {
  display: flex;             /* flexbox 1: card root */
  flex-direction: column;
}
.woocommerce ul.products li.product .prodTile__media {
  display: block;            /* not a flex container */
  border-radius: 10px;
  overflow: hidden;
}
.woocommerce ul.products li.product .prodTile__media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}
/* moved .prodTile__content (yellow), .prodTile__bottom (purple), and price (orange) debug/layout to base.css */

.shopMain {
  min-width: 0;
  overflow: visible;
}

/* Removed sidebar stacking on narrow screens to keep layout consistent */

.shopSidebar .shopHead {
  margin: 0 0 12px;
  border-radius: 12px;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.06);
  padding: 12px;
}

.shopSidebar .shopHead__title {
  font-size: 18px;
}

.shopSidebar .shopHead__desc {
  font-size: 13px;
}

/* Category tree (integrated UI with collapsible subcategories) */
.catTreePanel,
.filterPanel {
  margin: 0 0 12px;
}

/* Vertical divider between sidebar and product grid that ends at sidebar height */
/* Dedicated divider element so we can add curved caps */
.shopDivider {
  position: absolute;
  top: 5px; /* extended 10px higher */
  right: -10px; /* nudge divider 10px into the gap */
  width: 1px;
  height: calc(100% - 5px); /* keep bottom aligned with sidebar end */
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 1;
}

/* Curved caps to match subcategory vertical line */
.shopDivider::before,
.shopDivider::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  right: 0; /* attach curves on the left-facing side */
  pointer-events: none;
}
.shopDivider::before { content: none; }

/* Full-width horizontal line from sidebar left edge to the divider's curve */
.shopSidebar::before {
  content: "";
  position: absolute;
  left: 0;
  right: -2px; /* -10px (divider offset) + 8px (curve width) */
  bottom: -9px; /* align with bottom cap baseline */
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 1;
}
.shopDivider::after {
  bottom: -9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom-right-radius: 8px;
}

.catTreePanel summary,
.filterPanel summary {
  list-style: none;
}

.catTreePanel summary::-webkit-details-marker,
.filterPanel summary::-webkit-details-marker {
  display: none;
}

.catTreePanel__summary,
.filterPanel__summary {
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: color 0.25s ease;
}

.catTreePanel__chevron,
.filterPanel__chevron {
  font-size: 12px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.catTreePanel__summary span,
.filterPanel__summary span {
  font-weight: 700;
  transition: color 0.25s ease;
}

.catTreePanel__summary:hover span,
.filterPanel__summary:hover span {
  color: #fff;
}

.catTreePanel[open] .catTreePanel__chevron,
.filterPanel[open] .filterPanel__chevron {
  transform: rotate(180deg);
}

.catTree {
  margin: 0;
  /* Fixed columns for consistent subcategory alignment */
  --cat-toggle-col: 24px;  /* caret button width */
  --cat-gap: 6px;          /* space between columns */
  --cat-label-col: 120px;  /* pull subcategories 30px further left */
  margin-left: -25px;      /* shift whole tree 25px left (main categories) */
}

.catTree ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.catTree li {
  margin: 4px 0;
  padding: 6px 6px;
  border-radius: 10px;
  display: grid;
  grid-template-columns: var(--cat-toggle-col) var(--cat-label-col) 1fr;
  column-gap: var(--cat-gap);
  align-items: center; /* center main category vertically to subcategory block */
  position: relative; /* allow bottom connector line */
}

/* When a category is closed, let the label span a flexible full-width column */
.catTree li:not(.is-open) {
  grid-template-columns: var(--cat-toggle-col) 1fr;
}

/* Box each top-level category row */
.catTree > ul > li {
  padding: 8px; /* slightly tighter so main category has less room */
  padding-right: 0; /* let subcategories extend to panel edge */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  margin: 8px 0;
}

/* Bottom connector from category area to the subcategory vertical line */
.catTree li.has-children.is-open::after {
  content: "";
  position: absolute;
  /* move 5px left and extend 5px further left (right edge unchanged) */
  left: calc(var(--cat-toggle-col) + 10px);
  width: calc(var(--cat-label-col) + (var(--cat-gap) * 2) + 1px - 10px); /* shorten right side by 5px */
  height: 1px;
  top: var(--conn-top, 50%); /* JS sets exact last-line bottom */
  background: rgba(255, 255, 255, 0.12);
}

.catTree li:hover {
  background: transparent;
}

.catTree li > a {
  grid-column: 2;
  color: #fff;
  text-decoration: none;
  opacity: 0.92;
  white-space: normal;
  line-height: 1.25;
  /* Allow manual soft-hyphen breaks (e.g., Arvuti\u00ADkomponendid) */
  hyphens: manual;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
  position: relative;
  left: -2px; /* give ~2px more room to the right to prevent final-letter wrap */
}

/* Active selection styles */
.catTree a.is-active-cat { opacity: 1; color: #fff; font-weight: 700; }
.catTree a.is-active-sub { opacity: 1; color: #fff; font-weight: 650; }

/* Category selection highlight styles removed */

.catTree a:hover {
  opacity: 1;
}

/* Caret toggle */
.catTree__toggle {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.catTree__toggle::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #fff;
  transform: translateX(1px);
  transition: transform 0.12s ease;
}

.catTree li.is-open>.catTree__toggle::before {
  transform: rotate(90deg);
}

/* Removed bolding of open parent category labels */

/* Removed server-selected category label styling */

/* Removed subcategory selected bolding */

/* Removed mobile-specific catTree padding/toggle sizing */

/* Nested lists hidden by default; shown when open. Remove connector borders for cleaner layout. */
.catTree li.has-children>ul {
  display: none;
  grid-column: 3;          /* start all sublists at same column */
  margin: 0;
  padding-left: 0;         /* remove extra gap after divider */
  border-left: 0;          /* we'll draw vertical line via pseudo element */
  position: relative;      /* for horizontal cap lines */
}
.catTree li.has-children>ul::before,
.catTree li.has-children>ul::after {
  content: "";
  position: absolute;
  left: 5px;               /* moved 2px further left */
  width: 0;                /* start collapsed for animation */
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  transition: none; /* no animation for caps */
}
.catTree li.has-children>ul::before { top: 0; }
.catTree li.has-children>ul::after  { bottom: 0; }

/* When ready, expand caps to measured widths */
.catTree li.has-children>ul.is-caps::before { width: var(--cap-w-top, 30px); }
.catTree li.has-children>ul.is-caps::after  { width: var(--cap-w-bottom, 30px); }

/* Animated vertical divider drawn as a child element */
.catTree__vline {
  position: absolute;
  left: -4px; top: 9px; /* move 5px left */
  width: 1px; height: calc(100% - 18px); /* shorten 4px from bottom as well (total 18px) */
  background: rgba(255, 255, 255, 0.12);
  transform: scaleY(0);
  transform-origin: center center;
  transition: none; /* no animation for vertical */
  z-index: 1;
  pointer-events: none;
}
.catTree__vline.is-on { transform: scaleY(1); }

/* Curved end caps (quarter arcs) to the right */
.catTree__vline::before,
.catTree__vline::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px; /* curve size */
  left: 0; /* nudge curves 1px left */
  pointer-events: none;
  opacity: 0; /* hidden until curve phase */
  transition: none; /* no animation for curves */
}
.catTree__vline::before {
  top: -9px; /* keep curve at original top position after extra shortening */
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-top-left-radius: 8px;
}
.catTree__vline::after {
  bottom: -9px; /* keep curve at original bottom position after extra shortening */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom-left-radius: 8px;
}

/* When vertical is done, reveal the curves */
.catTree__vline.is-curved::before,
.catTree__vline.is-curved::after {
  opacity: 1;
}

/* Instant small caps when a category just opened (no transition) */
.catTree li.is-open > ul.caps-instant::before,
.catTree li.is-open > ul.caps-instant::after {
  width: 5px;
  transition: none;
}
.catTree li.has-children>ul > li { padding-left: 6px; display: block; }
.catTree li.has-children>ul > li > a { grid-column: auto; }

/* Match header subcategory hover feel */
.catTree li.has-children > ul a {
  display: inline; /* allow multi-line so getClientRects() returns per-line boxes */
  transition: opacity 220ms ease, transform 220ms ease;
  transform-origin: left center;
  position: relative; /* shift entire wrapped text block, all lines */
  left: 3px; /* moved 2px left from previous */
  /* Do NOT split single words into last 1–3 letters on a new line */
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
.catTree li.has-children > ul a:hover {
  opacity: 1;
  text-decoration: none;
  transform: scale(1.02);
}

.catTree li.has-children.is-open>ul {
  display: block;
}

/* Sidebar filters vertical */
.shopFilters--sidebar .shopFilters__field {
  margin-bottom: 10px;
}

.shopFilters--sidebar .shopFilters__actions {
  margin-top: 8px;
}

/* Attribute filters UI */
.shopAttr {
  margin: 6px 0 8px;
}

.shopAttr>summary.shopAttr__title {
  font-weight: 400;
  opacity: 0.95;
  margin-bottom: 6px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
}

.shopAttr>summary::marker {
  content: "";
}

.shopAttr>summary::-webkit-details-marker {
  display: none;
}

.shopAttr>summary.shopAttr__title::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid rgba(255, 255, 255, 0.8);
  margin-left: 8px;
  opacity: 0.8;
  transition: transform 160ms ease;
}

.shopAttr[open]>summary.shopAttr__title::after {
  transform: rotate(90deg);
}

.shopAttr__checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.shopAttr__check {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;
  justify-content: flex-start;
  font-size: 13px;
  font-weight: 400;
  opacity: 0.95;
  line-height: 1.3;
  padding: 6px 32px 6px 15px;
  position: relative;
}

.shopAttr__check input {
  width: 20px;
  height: 20px;
  margin: 0;
  vertical-align: middle;
  flex: 0 0 auto;
  accent-color: var(--accent);
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.shopAttr__name {
  color: #fff;
  font-weight: 400;
  order: 0;
  flex: 1;
  position: relative;
  z-index: 1;
}

.shopAttr__name::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.shopAttr__check input {
  order: 1;
}

.shopAttr__check:hover .shopAttr__name {
  font-weight: 700;
  color: #fff;
  opacity: 1;
}

.shopAttr__check:hover .shopAttr__name::after {
  content: '✓';
  opacity: 0.5;
}

.shopAttr__check input:checked~.shopAttr__name::after {
  content: '✓';
  opacity: 1;
}

.shopAttr__check::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 19px;
  top: calc(100% - 6px);
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

/* Category Cards in Main */
.catGridCards {
  max-width: none;
  margin: 0 0 24px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.catCard,
.woocommerce ul.products li.product-category {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 360ms ease, background 180ms ease, box-shadow 180ms ease;
}

.catCard {
  position: relative;
}

.catCard::before {
  content: none;
}

.catCard:hover,
.woocommerce ul.products li.product-category:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.30);
}

.catCard__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.22);
  filter: grayscale(0.65) saturate(0.55);
  transition: filter 650ms ease;
}

.catCard:hover .catCard__img,
.catCard:focus-within .catCard__img {
  filter: none;
}

.catCard__img--placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
}

.catCard__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  pointer-events: none;
}

.catCard__body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 94%;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 86%, rgba(0, 0, 0, 0.00) 100%);
  z-index: 0;
}

.catCard__name {
  position: relative;
  z-index: 1;
  font-weight: 700;
  text-align: center;
  display: inline-block;
  font-size: 0.95em;
  text-shadow: none;
  transform: translateY(3px);
}

/* Removed responsive catGridCards layout overrides */

/* ===== WooCommerce Product Cards (Blue Theme) ===== */
.woocommerce ul.products {
  max-width: none;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: row;
  /* Tracks flex between min and max width; columns adjust before wrapping */
  grid-auto-columns: minmax(var(--card-w-min, 178px), 1fr);
  grid-template-columns: repeat(auto-fit, minmax(var(--card-w-min, 178px), 1fr));
  gap: 14px;
  overflow: visible; /* allow zoomed cards to overflow their cells */
}

.woocommerce ul.products {
  justify-content: stretch;
  margin-left: 0;
  margin-right: 0;
}

/* Reset Woo columns classes margins/padding when using CSS Grid */
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Default fixed height for product cards (tweakable via CSS variable) */
.woocommerce {
  --prod-card-h: 350px; /* card height base (increased by 10px) */
  /* Card width flexibility (±15% around 215px base) */
  --card-w-base: clamp(150px, 17.6vw, 220px);
  --card-w-min: calc(var(--card-w-base) * 0.85);
  --card-w-max: 220px;
}

/* Removed mobile card height override */

/* Remove legacy floats which break grid styling */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category {
  float: none;
  width: auto; /* follow grid track width */
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
}

/* Remove WooCommerce clearfix pseudo-elements which become grid items */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
  content: none;
  display: none;
}

/* Product card visuals are defined in the Shop Main block near the end of this file. */

/* Unify anchor block + background across product and subcategory cards */
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product-category a { background: transparent; text-decoration: none; margin: 0; padding: 0; }

.woocommerce ul.products li.product-category a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  filter: grayscale(1) saturate(0.25);
  transition: filter 650ms ease;
  display: block;
}

.woocommerce ul.products li.product-category:hover a img,
.woocommerce ul.products li.product-category a:focus-visible img {
  filter: none;
}

/* Ensure product images show fully inside the square with white letterboxing */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.wp-post-image,
.woocommerce ul.products li.product img {
  object-fit: contain;
}

/* Ensure square product thumbnails across category archives */
.woocommerce ul.products li.product a.woocommerce-LoopProduct__link img,
.woocommerce ul.products li.product .woocommerce-LoopProduct__link img,
.woocommerce ul.products li.product img.wp-post-image,
.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  /* Block WooCommerce's default H2/title styling, then re-apply what we want */
  all: unset;
  display: block;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: 1.25;
  font-weight: 700;
}

/* Removed custom price and button styling inside product cards */

/* Remove button hover effects inside product cards */

/* ===== Product Tile Redesign (price + add-to-cart + short description) ===== */
/* Removed custom product media area styling */

/* ===== Product Tile: Stock Badge ===== */
/* Removed stock badge customizations */

/* Removed custom content wrapper layout */

/* Removed custom title link styling */

/* Removed custom title formatting and clamping */

/* Removed custom excerpt styling */

/* Removed custom attribute list styling */

.woocommerce ul.products li.product .prodTile__excerpt p {
  margin: 0;
}

/* Removed custom stock chip styling */

/* Removed custom delivery text styling */

/* Removed custom meta row styling */

/* Removed custom bottom bar styling */

/* Shortened separator line above bottom row */
/* Removed bottom separator */

/* Removed custom add-to-cart/price row styling */

/* Disable buy text hover styling for product cards */

/* Removed custom price/sale formatting */

/* Removed viewport-specific price layout adjustments */

/* Removed CTA button styling */

/* Subcategory titles styled like category cards */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  padding: 12px;
  margin: 0;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
}

.woocommerce ul.products li.product-category .count {
  display: inline-block;
  margin-left: 6px;
  opacity: 0.8;
  font-weight: 700;
  background: none;
  border: none;
  box-shadow: none;
}

/* Result count / ordering */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  max-width: none;
  margin: 0;
  padding: 0 18px;
  color: var(--muted);
}

.woocommerce .woocommerce-ordering select {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination {
  max-width: none;
  margin: 0 0 24px;
  padding: 0 18px;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li .page-numbers.current {
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.35);
}

.woocommerce nav.woocommerce-pagination ul li .page-numbers:hover {
  background: rgba(255, 255, 255, 0.10);
  transform: translateY(-1px);
}

/* Notices (styled, but currently suppressed in base.css) */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  max-width: none;
  margin: 0 0 12px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}

.woocommerce .woocommerce-error {
  max-width: none;
  margin: 0 0 12px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255, 0, 0, 0.12);
  border: 1px solid rgba(255, 0, 0, 0.28);
  color: #fff;
}

/* Removed responsive column overrides for Woo grid */

/* Fallback selectors if `.woocommerce` wrapper is absent */
ul.products {
  max-width: none;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: minmax(var(--card-w-min, 178px), 1fr);
  grid-template-columns: repeat(auto-fit, minmax(var(--card-w-min, 178px), 1fr));
  gap: 14px;
  justify-content: stretch;
}

ul.products li.product {
  float: none;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}

ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Removed responsive overrides for fallback grid */

/* ===== Shop Main Defaults (no special alignment overrides) ===== */

/* Hide caret/toggle arrows in filter menu category tree */
.catTree__toggle { display: none; }

/* Keep card height flexible (handled by the Shop Main rules below) */

/* Text-wrap layout: product cards flow beside the sidebar, then use full width below */
.shopMain ul.products {
  --shop-card-gap: clamp(8px, 1.2vw, 14px);
  max-width: none;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--shop-card-gap);
}

.shopMain ul.products li.product,
.shopMain ul.products li.product-category {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  width: 100%;
  max-width: 100%;
  aspect-ratio: 2 / 3.3; /* slightly taller to add ~30px at current widths */
  height: auto;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
}