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

/* ---- Sidebar + main-column layout ---- */
.dc-shop-grid .dc-shop-layout{ display:flex; align-items:flex-start; gap:40px; padding:40px 0 0; }
.dc-shop-grid .shop-sidebar{ flex:0 0 260px; width:260px; }
.dc-shop-grid .shop-main-col{ flex:1; min-width:0; }

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

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

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

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

.dc-shop-grid .shop-filter-group__list{ display:flex; flex-direction:column; gap:12px; }
/* When a section has more than 6 items, the list is height-capped to show
   6 at a time — the rest scroll. The scrollbar itself stays invisible
   until the visitor actually hovers/focuses the list, so it doesn't sit
   there as a permanent line down the sidebar. */
.dc-shop-grid .shop-filter-group__list.has-scroll{
  overflow-y:auto; padding-right:6px; scrollbar-width:thin; scrollbar-color:transparent transparent;
}
.dc-shop-grid .shop-filter-group__list.has-scroll:hover,
.dc-shop-grid .shop-filter-group__list.has-scroll:focus-within{ scrollbar-color:#cccccc transparent; }
.dc-shop-grid .shop-filter-group__list.has-scroll::-webkit-scrollbar{ width:4px; }
.dc-shop-grid .shop-filter-group__list.has-scroll::-webkit-scrollbar-track{ background:transparent; }
.dc-shop-grid .shop-filter-group__list.has-scroll::-webkit-scrollbar-thumb{ background:transparent; border-radius:4px; }
.dc-shop-grid .shop-filter-group__list.has-scroll:hover::-webkit-scrollbar-thumb,
.dc-shop-grid .shop-filter-group__list.has-scroll:focus-within::-webkit-scrollbar-thumb{ background:#cccccc; }
.dc-shop-grid .shop-checkbox{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; color:#0F0F0F; }
.dc-shop-grid .shop-checkbox input{ position:absolute; opacity:0; width:0; height:0; }
.dc-shop-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;
}
.dc-shop-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;
}
.dc-shop-grid .shop-checkbox input:checked ~ .shop-checkbox__box{ background:#C99E43; border-color:#C99E43; }
.dc-shop-grid .shop-checkbox input:checked ~ .shop-checkbox__box::after{ opacity:1; }
.dc-shop-grid .shop-checkbox__label{ line-height:1.3; }

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

.dc-shop-grid .product-card{ border:1px solid #CCCCCC; margin:-1px 0 0 -1px; overflow:hidden; }
.dc-shop-grid .product-media{ position:relative; aspect-ratio:1/1; background:#FBF4E8; overflow:hidden; }
.dc-shop-grid .product-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Hover photo-swap: front photo crossfades to the product's own second
   gallery photo (see dc_shop_render_card()) — .pm-hover is only rendered
   by PHP when a gallery image actually exists, so a single-photo product
   just has no hover swap. */
.dc-shop-grid .product-media-slide{ position:absolute; inset:0; }
.dc-shop-grid .product-media-slide .pm-primary,
.dc-shop-grid .product-media-slide .pm-hover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: opacity .35s ease; }
.dc-shop-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){
  .dc-shop-grid .product-card:hover .product-media-slide .pm-hover{ opacity:1; }
  .dc-shop-grid .product-card:hover .product-media-slide .pm-primary{ opacity:0; }
}
.dc-shop-grid .media-header{ position:absolute; top:15px; left:20px; right:20px; z-index:2; display:flex; align-items:center; justify-content:space-between; }
.dc-shop-grid .media-header-left{ display:flex; align-items:center; gap:5px; }
.dc-shop-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; }
.dc-shop-grid .badge-sage{ background:#E7E6D0; }
.dc-shop-grid .badge-mauve{ background:#E3CFCF; }
.dc-shop-grid .badge-peach{ background:#FFE2A4; }
.dc-shop-grid .badge-gold{ background:#F4E3C1; }
.dc-shop-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; }
.dc-shop-grid .heart-btn svg{ width:15px; height:15px; }
.dc-shop-grid .heart-btn:hover, .dc-shop-grid .heart-btn.is-active{ color:#C9504A; }
.dc-shop-grid .heart-btn.is-active svg{ fill:#C9504A; }

/* YITH WooCommerce Wishlist integration — when YITH is active,
   dc_shop_render_wishlist_button() prints YITH's own real button markup
   nested inside our ".heart-btn" circle. YITH's own markup carries its
   own chrome + a visible "Add to wishlist" text label; these rules make
   it fill the circle and show icon-only instead. !important is needed
   because YITH's own button ships a "yith-wcwl-theme-button-style" class
   specifically so themes can restyle it — without !important it can
   lose a specificity fight against the active theme's generic button
   styles. */
.dc-shop-grid .heart-btn .yith-add-to-wishlist-button-block,
.dc-shop-grid .heart-btn .yith-wcwl-add-to-wishlist-button-anchor-wrapper{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
}
.dc-shop-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;
}
.dc-shop-grid .heart-btn .yith-wcwl-add-to-wishlist-button__label{ display:none !important; }
.dc-shop-grid .heart-btn .yith-wcwl-icon-svg__wrapper{ display:flex; }
.dc-shop-grid .heart-btn .yith-wcwl-icon{ width:15px; height:15px; }
.dc-shop-grid .heart-btn .yith-wcwl-add-to-wishlist-button--added{ color:#C99E43; }
.dc-shop-grid .rating{ font-size:11px; font-weight:400; color:#0F0F0F; flex-shrink:0; display:flex; align-items:center; gap:4px; letter-spacing:.05em; }
.dc-shop-grid .rating svg{ color:#C99E43; width:11px; height:11px; }
.dc-shop-grid .product-info{ padding:20px; }
.dc-shop-grid .product-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.dc-shop-grid .product-titleblock h3{ font-size:14px; font-weight:500; font-family:inherit; margin:0; }
.dc-shop-grid .price{ font-weight:500; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#757575; white-space:nowrap; }
.dc-shop-grid .price .amount{ font-family:inherit; font-size:inherit; }
.dc-shop-grid .product-sub{ font-size:11px; letter-spacing:.06em; color:#757575; margin:4px 0 0; text-transform:uppercase; }
.dc-shop-grid .swatches{ display:flex; flex-wrap:wrap; gap:4px; margin-top:14px; }
.dc-shop-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;
}
.dc-shop-grid .swatch.active{ border-color:#000; }

/* Promo tile — "gift with purchase" card. The card's own photo is now a
   full-bleed background image (Style → Promo Tile → Card Background —
   a real Elementor Background control, defaulting to the site's seasonal
   promo photo), not a separate framed photo — the earlier arch-shaped
   frame has been removed per the client's request. Two gold botanical
   flourishes sit in opposite corners on top of the photo, and the
   heading/text are pinned to the bottom of the card (grid items stretch
   to the row's height by default, so margin-top:auto on .promo-copy
   pushes it down naturally — no fixed heights needed). */
.dc-shop-grid .product-card.promo-card{
  position:relative; background:#16271B; background-size:cover; background-position:center center;
  border:1px solid #CCCCCC; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:28px 24px 32px; color:#FFFEFB;
}
.dc-shop-grid .promo-decor{ position:absolute; width:35%; max-width:130px; aspect-ratio:1/1; color:#C99E43; opacity:.55; pointer-events:none; }
.dc-shop-grid .promo-decor svg{ width:100%; height:100%; display:block; }
.dc-shop-grid .promo-decor--top{ top:-8px; right:-14px; transform:scaleX(-1); }
.dc-shop-grid .promo-decor--bottom{ bottom:-14px; left:-14px; }

.dc-shop-grid .promo-copy{ position:relative; z-index:1; margin-top:auto; }
.dc-shop-grid .promo-card h4{ font-family:'Playfair Display',Georgia,serif; font-size:26px; font-weight:600; margin:0 0 10px; color:#FFFEFB; }
.dc-shop-grid .promo-card p{ font-family:'Bricolage Grotesque','Inter',sans-serif; font-size:18px; font-weight:300; font-variation-settings:"opsz" 14, "wdth" 100; line-height:1.55; color:#FFFEFB; margin:0 0 4px; }
.dc-shop-grid .promo-card p:last-child{ margin-bottom:0; }
.dc-shop-grid .promo-highlight{ color:#C99E43; }

/* ---- Pagination ---- */
.dc-shop-grid .pagination{ display:flex; justify-content:center; align-items:center; gap:4px; padding-top:60px; }
.dc-shop-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; }
.dc-shop-grid .page-item.active{ background:#1A1B18; color:#fff; }
.dc-shop-grid .page-item:hover:not(.active){ color:#B08A38; }
.dc-shop-grid .page-next{ font-size:15px; }
.dc-shop-grid .page-item[disabled]{ opacity:.35; cursor:default; pointer-events:none; }

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