/* Product cards on wider screens and rotated phones. Portrait phones retain
   the established image-beside-details list. Columns follow the results area,
   so a filter sidebar cannot squeeze five cards into a narrow space. */
@media (min-width:700px), (min-width:540px) and (orientation:landscape) {
  body #content-container .shop-results-column {container:shop-results / inline-size;min-width:0;}
  body #productGrid {
    --shop-grid-columns:2;display:grid!important;grid-template-columns:repeat(var(--shop-grid-columns),minmax(0,1fr));
    gap:24px 18px!important;width:100%!important;max-width:100%!important;
    margin:0!important;align-items:stretch;--bs-gutter-x:0;
  }
  body #productGrid > .col-12 {
    width:auto!important;max-width:none!important;min-width:0;flex:none!important;
    margin:0!important;padding:0!important;border:0!important;
  }
  body #productGrid > .col-12:has(.product-card) {display:flex;}
  body #productGrid > .col-12:has(>hr) {display:none!important;}
  body #productGrid > .col-12:not(:has(.product-card)),
  body #productGrid > [data-storefront-skeleton] {grid-column:1/-1;}
  body #productGrid .product-card {
    display:flex!important;flex-direction:column!important;width:100%!important;
    height:auto!important;align-self:stretch;flex:1;padding:0!important;margin:0!important;
    border:1px solid #e4e9f0!important;border-radius:12px!important;
    background:#fff;box-shadow:none!important;overflow:hidden!important;
  }
  body #productGrid .product-flex {
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    width:100%!important;min-width:0;flex:1;height:auto!important;gap:0!important;
  }
  body #productGrid .product-flex > .media-container {
    position:relative!important;flex:0 0 auto!important;width:100%!important;
    max-width:100%!important;min-width:0!important;height:auto!important;
    min-height:0!important;align-self:stretch!important;border-radius:0!important;
    overflow:visible!important;padding:0!important;
  }
  body #productGrid .product-flex > .media-container > a {
    position:relative!important;inset:auto!important;display:block!important;
    width:100%!important;height:clamp(200px,22vw,250px)!important;
    margin:0!important;padding:8px!important;box-sizing:border-box;
    overflow:hidden!important;
  }
  body #productGrid .media-container > a > img.product-image {
    position:static!important;inset:auto!important;transform:none!important;
    display:block!important;width:100%!important;height:100%!important;
    min-height:0!important;max-height:none!important;margin:0!important;
    object-fit:contain!important;object-position:center!important;border-radius:8px!important;
  }
  body #productGrid .media-container > video {width:100%!important;height:230px!important;object-fit:contain;}
  body #productGrid .media-container::after,
  body #productGrid .media-container > a::after,
  body #productGrid .shop-media-actions::before,
  body #productGrid .separator-line,
  body #productGrid .product-flex > div:not(.media-container):not(.card-body) {display:none!important;}
  body #productGrid .shop-media-actions {position:absolute!important;inset:0!important;z-index:3;pointer-events:none;}
  body #productGrid .media-container .shop-media-actions :is(.favorite-btn,.shop-card-share) {
    display:flex!important;position:absolute!important;top:10px!important;bottom:auto!important;
    align-items:center;justify-content:center;width:34px!important;min-width:34px!important;
    height:34px!important;min-height:34px!important;padding:0!important;margin:0!important;
    border:1px solid #dce3ec!important;border-radius:50%!important;background:#fff!important;
    color:#263e59;box-shadow:0 2px 6px #172b4310!important;pointer-events:auto;
  }
  body #productGrid .media-container .shop-media-actions .favorite-btn {left:auto!important;right:10px!important;animation:none!important;}
  body #productGrid .media-container .favorite-btn i {color:#263e59!important;}
  body #productGrid .media-container .favorite-btn i.bi-heart-fill {color:#d93661!important;}
  body #productGrid .media-container .shop-card-share {left:10px!important;right:auto!important;}
  body #productGrid .media-container .shop-card-share > span {display:none;}
  body #productGrid .product-flex > .card-body {
    display:flex!important;flex:1 1 auto!important;flex-direction:column!important;
    position:static!important;width:100%!important;min-width:0!important;
    padding:14px!important;gap:0!important;box-sizing:border-box;min-height:0;
  }
  body #productGrid .card-body > div:first-child {display:flex;flex-direction:column;min-width:0;}
  body #productGrid .card-body .product-price {order:-1;margin:0 0 10px!important;min-height:28px!important;}
  body #productGrid .product-price .price {display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:0!important;}
  body #productGrid .product-price .regular-price {font-size:20px!important;font-weight:700!important;color:#172b43!important;}
  body #productGrid .product-price .sale-price {order:-1;font-size:20px!important;color:#000!important;font-weight:700!important;}
  body #productGrid .product-price .price:has(.sale-price) .regular-price {font-size:13px!important;font-weight:400!important;color:#6b7787!important;}
  body #productGrid .card-title {
    font-size:15px!important;font-weight:400!important;line-height:1.45!important;
    display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3!important;
    height:auto!important;min-height:0;max-height:4.35em!important;
    overflow:hidden!important;margin:0 0 8px!important;overflow-wrap:anywhere;
  }
  body #productGrid .product-rating {display:flex;flex-wrap:wrap;gap:3px;font-size:12px!important;margin:0 0 8px!important;}
  body #productGrid .shop-card-options {margin:0 0 10px!important;}
  body #productGrid .shop-option-group {min-width:0;max-width:100%;}
  body #productGrid .shop-option-values {max-width:100%;min-width:0;flex-wrap:wrap!important;}
  body #productGrid .product-flex > .card-body > .mt-auto {margin-top:auto!important;padding-top:14px!important;}
  body #productGrid .shop-initial-card .card-body > .product-controls {margin-top:auto!important;}
  body #productGrid .card-body .product-controls {
    display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px!important;
    width:100%!important;max-width:100%!important;margin:0!important;align-items:stretch;
  }
  body #productGrid .product-controls:not(:has(.shop-quantity-stepper)) {grid-template-columns:minmax(0,1fr);}
  body #productGrid .product-controls > .mb-2 {margin:0!important;min-width:0;width:100%!important;}
  body #productGrid .product-controls .shop-quantity-stepper {min-height:40px;height:auto!important;}
  body #productGrid .product-controls :is(.quantity-input,.btn) {width:100%!important;max-width:100%!important;min-width:0!important;}
  body #productGrid .product-controls .btn {
    min-height:40px!important;height:auto!important;padding:8px 6px!important;margin:0!important;
    font-size:12px!important;line-height:1.4!important;border-radius:999px!important;
    white-space:normal!important;box-shadow:none!important;
  }
  body #productGrid .product-controls .quantity-input {font-size:14px!important;}
  body #productGrid .sf-skeleton-shop {grid-template-columns:repeat(var(--shop-grid-columns),minmax(0,1fr));}
  body #productGrid .sf-skeleton-shop .sf-skeleton-item {display:block;}
}
/* A single, full-width purchase action on every card. */
body #productGrid .product-controls .add-to-cart-btn {border-radius:999px!important;}
@media (orientation:landscape), (min-width:1200px) {
  @container shop-results (min-width:660px) {body #productGrid {--shop-grid-columns:3;}}
  @container shop-results (min-width:900px) {body #productGrid {--shop-grid-columns:4;}}
  @container shop-results (min-width:1180px) {body #productGrid {--shop-grid-columns:5;}}
}
@media (orientation:portrait) and (min-width:700px) and (max-width:1199.98px) {
  @container shop-results (min-width:860px) {body #productGrid {--shop-grid-columns:3;}}
}
@media (min-width:540px) and (max-height:600px) and (orientation:landscape) {
  body #productGrid .product-flex > .media-container > a {height:180px!important;}
}
body #productGrid .card-body > div:first-child {display:flex;flex-direction:column;min-width:0;}
body #productGrid .card-body .product-name-link {order:-3;}
body #productGrid .card-body .product-price {order:-2;margin:0 0 6px!important;}
body #productGrid .product-price .sale-price {color:#000!important;font-weight:700!important;}
body #productGrid .shop-shipping-slot {order:-1;}
body #productGrid .shop-card-shipping {
  margin:0 0 10px;font-size:12px;line-height:1.55;color:#263e59;overflow-wrap:anywhere;
}
body #productGrid .shop-card-shipping strong {font-weight:650;color:#172b43;}
body #productGrid .card-body .card-title {
  font-weight:500!important;
  display:-webkit-box!important;-webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;line-clamp:3;line-height:1.45!important;
  height:auto!important;max-height:4.35em!important;overflow:hidden!important;
  margin:0 0 10px!important;overflow-wrap:anywhere;
}
body #productGrid .shop-card-options {margin:0!important;gap:10px;}
body #productGrid .shop-options-summary {
  display:block;font-size:12px;line-height:1.5;color:#075fc7;
  text-decoration:none;overflow-wrap:anywhere;
}
body #productGrid .shop-options-summary:hover {text-decoration:underline;}
body #productGrid .shop-options-summary:focus-visible {outline:2px solid #075fc7;outline-offset:3px;border-radius:3px;}
body #productGrid .shop-option-group {display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;}
body #productGrid .shop-option-values {display:flex;flex-wrap:wrap!important;align-items:center;gap:8px;max-width:100%;}
body #productGrid .shop-colour-swatch {flex-shrink:0;}
body #productGrid .card-body .product-rating {
  display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:4px!important;
  white-space:nowrap!important;min-width:0;font-size:12px!important;
}
body #productGrid .product-rating > span {flex:0 0 auto;white-space:nowrap;}
body #productGrid .product-rating .star-rating {font-size:24px;line-height:1;letter-spacing:-1px;color:#ef9900;}
body #productGrid .product-rating .shop-review-count {font-size:11px;}
/* Only taller neighbours add alignment space; there is no reserved blank area. */
body #productGrid .product-flex > .card-body > .mt-auto {margin-top:auto!important;padding-top:12px!important;}
body #productGrid .card-body > div:first-child:not(:has(.shop-card-options)) .shop-card-shipping {margin-bottom:0;}
body #productGrid .card-body .product-controls {
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;max-width:100%!important;margin:0!important;
}
body #productGrid .product-controls .btn {
  display:flex;align-items:center;justify-content:center;
  width:100%!important;min-width:0!important;max-width:100%!important;
  height:auto!important;min-height:52px!important;padding:14px!important;
  font-size:14px!important;line-height:1.4!important;margin:0!important;border-radius:999px!important;
}
/* A definite portrait-tablet media height avoids auto/percentage sizing
   conflicts between the older tablet row styles and these grid cards. */
@media (min-width:992px) and (hover:hover) and (pointer:fine) {
  body #productGrid .product-controls .btn {min-height:38px!important;padding:7px 14px!important;}
}
@media (min-width:700px) and (max-width:1199.98px) and (orientation:portrait) {
  body #productGrid .product-flex > .media-container {height:clamp(210px,28vw,280px)!important;}
  body #productGrid .product-flex > .media-container > a {height:100%!important;flex:0 0 auto!important;}
  body #productGrid .media-container > a > img.product-image {
    position:absolute!important;inset:8px!important;
    width:calc(100% - 16px)!important;height:calc(100% - 16px)!important;
    max-height:none!important;object-fit:contain!important;
  }
}
@media (max-width:699.98px) and (orientation:portrait), (max-width:539.98px) {
  body #productGrid .product-flex {min-height:clamp(188px,50vw,216px)!important;gap:12px!important;}
  body #productGrid .product-flex > .card-body {min-width:0!important;min-height:0;flex:1!important;padding-inline:0!important;}
  body #productGrid .card-body .card-title {min-height:0;font-size:14px!important;margin-bottom:8px!important;}
  body #productGrid .shop-card-options {gap:8px;}
  body #productGrid .card-body .product-rating {gap:3px!important;font-size:11px!important;}
  body #productGrid .product-rating .shop-rating-score {display:none;}
  body #productGrid .product-rating .star-rating {font-size:clamp(19.5px,5.7vw,24px);}
  body #productGrid .product-rating .shop-review-count {font-size:clamp(9px,2.65vw,11px);}
  body #productGrid .product-flex > .card-body > .mt-auto {margin-top:auto!important;padding-top:12px!important;}
  body #productGrid .product-controls .btn {
    min-height:38px!important;padding:8px 10px!important;font-size:12px!important;
  }
  body #productGrid .shop-card-shipping {font-size:11px;margin-bottom:10px;}
  body #productGrid .product-flex > .media-container > a {
    position:absolute!important;inset:0 0 50px!important;
    width:100%!important;height:calc(100% - 50px)!important;margin:0!important;
  }
  body #productGrid .media-container > a > img.product-image {
    width:100%!important;height:100%!important;max-height:100%!important;object-fit:contain!important;
  }
  body #productGrid .media-container .shop-card-share {
    top:auto!important;bottom:0!important;height:38px!important;min-height:38px!important;border-radius:999px!important;
  }
}
