@media screen and (max-width:767px){.homepage-featured-products,.homepage-featured-products .grid__item{padding-right:7px;padding-left:7px}}.homepage-featured-products{margin-bottom:-30px}.homepage-featured-products .no-bottom-margin{margin-bottom:0}.btn--view-all{margin:50px 0 0 0}
/* ===========================
   Button Bros – Shimmer Hover
   Works with common Shopify/Dawn cards
   =========================== */

/* Tweakables */
:root{
  --bb-shimmer-angle: 18deg;
  --bb-shimmer-duration: .9s;
  --bb-shimmer-sheen: linear-gradient(
    var(--bb-shimmer-angle),
    rgba(255,255,255,0) 10%,
    rgba(255,255,255,.55) 32%,
    rgba(255,255,255,0) 52%
  );
  --bb-lift-scale: 1.02;
  --bb-lift-translate: -4px;         /* subtle float up */
  --bb-lift-shadow: 0 14px 32px rgba(2,6,23,.18);
}

/* 1) Auto-apply to common Shopify card wrappers (Dawn & similar) */
:is(.product-grid, .collection-list, .featured-collection, .grid, .collection, .index-section)
 :is(.card, .product-card, .collection-card, .card--product, .card--media, .card__inner){
  position: relative;
  overflow: hidden;                   /* keeps shimmer inside rounded corners */
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* 2) Optional utility: add class="bb-shimmer" to any tile/link to force effect */
.bb-shimmer{ position:relative; overflow:hidden; transition: transform .28s ease, box-shadow .28s ease, filter .28s ease; }

/* 3) The shimmer strip (no images needed) */
:is(.product-grid, .collection-list, .featured-collection, .grid)
 :is(.card, .product-card, .collection-card, .card--product, .card--media, .card__inner)::before,
.bb-shimmer::before{
  content:"";
  position:absolute;
  top:-25%; bottom:-25%;
  left:-140%; right:auto;
  width:65%;
  background: var(--bb-shimmer-sheen);
  transform: translateX(0) rotate(var(--bb-shimmer-angle));
  opacity:0;
  pointer-events:none;
}

/* 4) Lift + shimmer on hover (desktop only) */
@media (hover:hover) and (pointer:fine){
  :is(.product-grid, .collection-list, .featured-collection, .grid)
   :is(.card, .product-card, .collection-card, .card--product, .card--media, .card__inner):hover,
  .bb-shimmer:hover{
    transform: translateY(var(--bb-lift-translate)) scale(var(--bb-lift-scale));
    box-shadow: var(--bb-lift-shadow);
  }

  :is(.product-grid, .collection-list, .featured-collection, .grid)
   :is(.card, .product-card, .collection-card, .card--product, .card--media, .card__inner):hover::before,
  .bb-shimmer:hover::before{
    opacity:1;
    animation: bb-shimmer-sweep var(--bb-shimmer-duration) ease-out forwards;
  }
}

/* 5) Smooth, single sweep per hover */
@keyframes bb-shimmer-sweep{
  0%   { transform: translateX(0) rotate(var(--bb-shimmer-angle)); }
  100% { transform: translateX(260%) rotate(var(--bb-shimmer-angle)); }
}

/* 6) Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  :is(.product-grid, .collection-list, .featured-collection, .grid)
   :is(.card, .product-card, .collection-card, .card--product, .card--media, .card__inner),
  .bb-shimmer{
    transition: box-shadow .2s ease;  /* still allow lift shadow */
  }
  :is(.product-grid, .collection-list, .featured-collection, .grid)
   :is(.card, .product-card, .collection-card, .card--product, .card--media, .card__inner)::before,
  .bb-shimmer::before{ display:none; } /* no sweeping stripe */
}

/* 7) Optional: brighten image slightly on hover without washing out text */
@media (hover:hover) and (pointer:fine){
  :is(.product-grid, .collection-list, .featured-collection, .grid)
   :is(.card, .product-card, .collection-card, .card--product, .card--media, .card__inner):hover img{
    filter: saturate(1.03) contrast(1.03);
  }
}