.sw-product-grid, .sw-product-grid *{ box-sizing:border-box; }
.sw-product-grid{ font-family:'Bricolage Grotesque','Inter',sans-serif; }
.sw-product-grid a{ color:inherit; text-decoration:none; }
.sw-product-grid button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
.sw-product-grid .container{ max-width:1280px; margin:0 auto; padding:0 40px; }

/* ---- Sidebar + main-column layout (same pattern as the Shop page's grid) ---- */
.sw-product-grid .sw-shop-layout{ display:flex; align-items:flex-start; gap:40px; padding:40px 0 60px; }
.sw-product-grid .shop-sidebar{ flex:0 0 260px; width:260px; }
.sw-product-grid .shop-main-col{ flex:1; min-width:0; }

.sw-product-grid .shop-sidebar-heading{ color:#C99E43; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin:0 0 20px; }

/* ---- Browse Categories / Navigation Groups: plain navigation, NOT a filter ----
 * Every row is a real <a> to that category's own page — no input, no
 * change event, no Reset. A small right-pointing arrow stands in for
 * where a checkbox would be, so it reads as "go to" rather than "select".
 * The category matching the page you're currently on is shown in the
 * accent color with its arrow filled in. */
.sw-product-grid .sw-browse-categories{ padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #E9E0D2; }
.sw-product-grid .sw-browse-categories__heading{ margin:0 0 14px; font-size:14px; font-weight:500; color:#0F0F0F; }
.sw-product-grid .sw-browse-categories__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.sw-product-grid .sw-browse-item{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:#0F0F0F; transition: color .15s ease; }
.sw-product-grid .sw-browse-item:hover{ color:#C99E43; }
.sw-product-grid .sw-browse-item__icon{ flex-shrink:0; width:17px; height:17px; display:flex; align-items:center; justify-content:center; color:#CCCCCC; transition: color .15s ease; }
.sw-product-grid .sw-browse-item__icon svg{ width:9px; height:9px; }
.sw-product-grid .sw-browse-item:hover .sw-browse-item__icon,
.sw-product-grid .sw-browse-item.is-active .sw-browse-item__icon{ color:#C99E43; }
.sw-product-grid .sw-browse-item.is-active .sw-browse-item__label{ color:#C99E43; font-weight:500; }

/* ---- Sidebar filter sections (collapsible accordion) ---- */
.sw-product-grid .shop-filter-group{ padding:20px 0; border-bottom:1px solid #E9E0D2; }
.sw-product-grid .shop-filter-group:first-of-type{ padding-top:0; }

.sw-product-grid .shop-filter-group__toggle{
  all:unset; display:flex; align-items:center; justify-content:space-between;
  width:100%; cursor:pointer; box-sizing:border-box;
}
.sw-product-grid .shop-filter-group__toggle h4{ margin:0; font-size:14px; font-weight:500; color:#0F0F0F; }
.sw-product-grid .shop-filter-group__chevron{ color:#757575; flex-shrink:0; transform:rotate(180deg); transition: transform .2s ease; }
.sw-product-grid .shop-filter-group.is-collapsed .shop-filter-group__chevron{ transform:rotate(0deg); }
.sw-product-grid .shop-filter-group.is-collapsed .shop-filter-group__body{ display:none; }

.sw-product-grid .shop-filter-group__body{ margin-top:14px; }
.sw-product-grid .shop-filter-group__subhead{ margin:0 0 14px; }
.sw-product-grid .shop-filter-reset{ font-size:12px; color:#757575; text-decoration:underline; text-underline-offset:2px; transition: color .15s ease; }
.sw-product-grid .shop-filter-reset:hover{ color:#C99E43; }

.sw-product-grid .shop-filter-group__list{ display:flex; flex-direction:column; gap:12px; }
/* Height-capped at 6 visible rows for a section with more — the rest
   scroll, with the scrollbar itself invisible until actually hovered. */
.sw-product-grid .shop-filter-group__list.has-scroll{
  overflow-y:auto; padding-right:6px; scrollbar-width:thin; scrollbar-color:transparent transparent;
}
.sw-product-grid .shop-filter-group__list.has-scroll:hover,
.sw-product-grid .shop-filter-group__list.has-scroll:focus-within{ scrollbar-color:#cccccc transparent; }
.sw-product-grid .shop-filter-group__list.has-scroll::-webkit-scrollbar{ width:4px; }
.sw-product-grid .shop-filter-group__list.has-scroll::-webkit-scrollbar-track{ background:transparent; }
.sw-product-grid .shop-filter-group__list.has-scroll::-webkit-scrollbar-thumb{ background:transparent; border-radius:4px; }
.sw-product-grid .shop-filter-group__list.has-scroll:hover::-webkit-scrollbar-thumb,
.sw-product-grid .shop-filter-group__list.has-scroll:focus-within::-webkit-scrollbar-thumb{ background:#cccccc; }
.sw-product-grid .shop-checkbox{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; color:#0F0F0F; }
.sw-product-grid .shop-checkbox input{ position:absolute; opacity:0; width:0; height:0; }
.sw-product-grid .shop-checkbox__box{
  flex-shrink:0; width:17px; height:17px; border:1.4px solid #CCCCCC; border-radius:3px;
  position:relative; transition: background-color .15s ease, border-color .15s ease;
}
.sw-product-grid .shop-checkbox__box::after{
  content:''; position:absolute; left:5px; top:1.5px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
  opacity:0; transition: opacity .1s ease;
}
.sw-product-grid .shop-checkbox input:checked ~ .shop-checkbox__box{ background:#C99E43; border-color:#C99E43; }
.sw-product-grid .shop-checkbox input:checked ~ .shop-checkbox__box::after{ opacity:1; }
.sw-product-grid .shop-checkbox__label{ line-height:1.3; }

/* ---- Product grid ---- */
.sw-product-grid .results-count{ font-size:13px; color:#757575; margin:0 0 18px; }
.sw-product-grid .shop-products{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; transition: opacity .15s ease; }
.sw-product-grid .shop-products.is-loading{ opacity:.45; pointer-events:none; }
.sw-product-grid .no-results{ grid-column:1 / -1; text-align:center; padding:60px 20px; color:#757575; font-size:15px; border:1px solid #CCCCCC; }

.sw-product-grid .product-card{ background:#fff; border:1px solid #CCCCCC; margin:-1px 0 0 -1px; overflow:hidden; }
.sw-product-grid .product-media{ position:relative; aspect-ratio:1/1; background:#FBF4E8; overflow:hidden; }
.sw-product-grid .product-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Hover swaps to the product's own WooCommerce gallery image ----
 * Same effect as a normal WooCommerce shop loop: the primary photo fades
 * out and the product's next gallery image fades in on hover. Only
 * rendered by PHP when a gallery image actually exists (product-card-
 * render.php), so a single-photo product just has no hover swap. */
.sw-product-grid .product-media-slide{ position:absolute; inset:0; }
.sw-product-grid .product-media-slide .pm-primary,
.sw-product-grid .product-media-slide .pm-hover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: opacity .35s ease; }
.sw-product-grid .product-media-slide .pm-hover{ opacity:0; }
/* Only swap on a real mouse hover — on a touchscreen there's no true hover
   state (tap simulates :hover with no mouse-leave to clear it), so gating
   on the device's actual pointer/hover capability keeps the photo from
   getting "stuck" showing the hover image after a tap. */
@media (hover:hover) and (pointer:fine){
  .sw-product-grid .product-card:hover .product-media-slide .pm-hover{ opacity:1; }
  .sw-product-grid .product-card:hover .product-media-slide .pm-primary{ opacity:0; }
}
.sw-product-grid .media-header{ position:absolute; top:15px; left:20px; right:20px; z-index:2; display:flex; align-items:center; justify-content:space-between; }
.sw-product-grid .media-header-left{ display:flex; align-items:center; gap:5px; }
.sw-product-grid .badge{ font-size:9px; font-weight:300; letter-spacing:.12em; text-transform:uppercase; padding:8px 12px; color:#0F0F0F; line-height:1; white-space:nowrap; }
.sw-product-grid .badge-sage{ background:#E7E6D0; }
.sw-product-grid .badge-mauve{ background:#E3CFCF; }
.sw-product-grid .badge-peach{ background:#FFE2A4; }
.sw-product-grid .badge-gold{ background:#F4E3C1; }
.sw-product-grid .heart-btn{ width:36px; height:36px; padding:0; border-radius:50%; background:#FFFEFB; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#0F0F0F; transition:all .2s ease; overflow:hidden; }
.sw-product-grid .heart-btn svg{ width:15px; height:15px; }
.sw-product-grid .heart-btn:hover, .sw-product-grid .heart-btn.is-active{ color:#C9504A; }
.sw-product-grid .heart-btn.is-active svg{ fill:#C9504A; }

/* YITH WooCommerce Wishlist integration — see product-grid.js for why the
   JS re-init call is needed; these rules make its real button fill the
   circle and show icon-only instead of its own default chrome + label. */
.sw-product-grid .heart-btn .yith-add-to-wishlist-button-block,
.sw-product-grid .heart-btn .yith-wcwl-add-to-wishlist-button-anchor-wrapper{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
}
.sw-product-grid .heart-btn .yith-wcwl-add-to-wishlist-button{
  all:unset; display:flex !important; align-items:center; justify-content:center;
  width:100% !important; height:100% !important; padding:0 !important; margin:0 !important;
  border:none !important; background:none !important; box-shadow:none !important;
  color:inherit; cursor:pointer;
}
.sw-product-grid .heart-btn .yith-wcwl-add-to-wishlist-button__label{ display:none !important; }
.sw-product-grid .heart-btn .yith-wcwl-icon-svg__wrapper{ display:flex; }
.sw-product-grid .heart-btn .yith-wcwl-icon{ width:15px; height:15px; }
.sw-product-grid .heart-btn .yith-wcwl-add-to-wishlist-button--added{ color:#C99E43; }
.sw-product-grid .rating{ font-size:11px; font-weight:400; color:#0F0F0F; flex-shrink:0; display:flex; align-items:center; gap:4px; letter-spacing:.05em; }
.sw-product-grid .rating svg{ color:#C99E43; width:11px; height:11px; }
.sw-product-grid .product-info{ padding:20px; }
.sw-product-grid .product-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sw-product-grid .product-titleblock h3{ font-size:14px; font-weight:500; font-family:inherit; margin:0; }
.sw-product-grid .price{ font-weight:500; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#757575; white-space:nowrap; }
.sw-product-grid .price .amount{ font-family:inherit; font-size:inherit; }
.sw-product-grid .product-sub{ font-size:11px; letter-spacing:.06em; color:#757575; margin:4px 0 0; text-transform:uppercase; }
.sw-product-grid .swatches{ display:flex; flex-wrap:wrap; gap:4px; margin-top:14px; }
.sw-product-grid .swatch{
  display:block; width:19px; height:19px; border-radius:50%; background-color:#f8f5f2;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border:1.6px solid transparent; cursor:pointer; position:relative;
}
.sw-product-grid .swatch.active{ border-color:#000; }

.sw-product-grid .product-card.promo-card{ background:#A9AD84; background-size:cover; background-position:center center; border:1px solid #CCCCCC; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:28px 24px; color:#FFFEFB; }
/* The card's own photo is now a full-bleed background image (Style →
   Promo Tile → Card Background), not a separate framed photo — the
   earlier photo frame has been removed per the client's request. Heading
   + text stay pinned to the BOTTOM of the card — margin-top:auto on this
   wrapper pushes it down to fill whatever space the grid row's height
   leaves, same convention as the Shop page's Promo Tile. */
.sw-product-grid .promo-copy{ margin-top:auto; }
.sw-product-grid .promo-card h4{ font-family:'Playfair Display',Georgia,serif; font-size:18px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 14px; color:#FFFEFB; }
.sw-product-grid .promo-card p{ font-size:13px; line-height:1.6; color:#FFFEFB; margin:0 0 12px; }
.sw-product-grid .promo-card p:last-child{ margin-bottom:0; opacity:.9; }

/* ---- Pagination ---- */
.sw-product-grid .pagination{ display:flex; justify-content:center; align-items:center; gap:4px; padding-top:60px; }
.sw-product-grid .page-item{ min-width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#0F0F0F; padding:0 8px; transition: all .15s ease; }
.sw-product-grid .page-item.active{ background:#1A1B18; color:#fff; }
.sw-product-grid .page-item:hover:not(.active){ color:#B08A38; }
.sw-product-grid .page-next{ font-size:15px; }
.sw-product-grid .page-item[disabled]{ opacity:.35; cursor:default; pointer-events:none; }

@media (max-width:980px){
  .sw-product-grid .container{ padding:0 24px; }
  .sw-product-grid .sw-shop-layout{ flex-direction:column; }
  .sw-product-grid .shop-sidebar{ width:100%; flex-basis:auto; }
  .sw-product-grid .shop-products{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .sw-product-grid .shop-products{ grid-template-columns:1fr; justify-items:center; }
  .sw-product-grid .shop-products .product-card{ max-width:420px; width:100%; }
  .sw-product-grid .pagination{ padding-top:40px; flex-wrap:wrap; }
}