/**
 * Hexfashion 2026 PLP — Shelf Merchandising (vision-aligned)
 *
 * Approved direction:
 *   Product-first · Shelf-first · Quiet commerce · Curated browsing
 *   WITHIN existing Hexfashion identity (commercial fashion, not editorial luxury)
 *
 * Question to keep answering:
 *   "What would Hexfashion look like if the same team designed it in 2026?"
 *
 * Constraints preserved: same anatomy, Builder, merchant model, discoverability.
 *
 * Note: avoid minmax() in grid tracks — older WebKit drops the whole declaration.
 */

/* ------------------------------------------------------------------
   Floor — Hexfashion commercial fashion climate (not museum void)
   Kill padding-top-100 / art-direction clamp so the shelf starts tighter.
   ------------------------------------------------------------------ */
body.hexfashion .shop-area,
body.hexfashion .shop-area.padding-top-100,
body.casual .shop-area,
body.casual .shop-area.padding-top-100,
body.aromatic .shop-area,
body.aromatic .shop-area.padding-top-100,
body.furnito .shop-area,
body.furnito .shop-area.padding-top-100,
body.medicom .shop-area,
body.medicom .shop-area.padding-top-100,
body.electro .shop-area,
body.electro .shop-area.padding-top-100,
body .shop-area.padding-top-100,
body .shop-area {
  padding-top: 1.15rem !important;
  padding-bottom: 2.5rem !important;
}

body.hexfashion .shop-area { background: #f6f3ef !important; }
body.casual .shop-area { background: #f6f4f1 !important; }
body.aromatic .shop-area { background: #f5f2ee !important; }
body.furnito .shop-area { background: #f4f1ea !important; }
body.medicom .shop-area,
body.electro .shop-area { background: #f3f4f6 !important; }

body .shop-area .container-one,
body .shop-area .shop-contents-wrapper {
  background: transparent !important;
}

/* Sidebar + product column: clear horizontal relationship */
body .shop-area .shop-contents-wrapper {
  gap: 1.35rem !important;
}

/* ------------------------------------------------------------------
   Chrome — quieter than merchandise, still clearly usable
   ------------------------------------------------------------------ */
body .shop-area .shop-icon,
body .shop-area .grids-icons,
body .shop-area .showing-results,
body .shop-area .showing-results.color-light {
  color: #6b6570 !important;
  opacity: 1 !important;
  font-size: 0.8125rem !important;
  font-weight: 550 !important;
}

body .shop-area .nice-select,
body .shop-area .select-box .nice-select {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #3f3a42 !important;
  min-height: 2.5rem !important;
  font-size: 0.8125rem !important;
  border-radius: 0.5rem !important;
}

/*
  Filters: one cohesive panel (not a stack of disconnected cards).
  All filter blocks remain; only presentation changes.
*/
body .shop-area .shop-sidebar-content {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-radius: 0.85rem !important;
  padding: 0.35rem 0.25rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

body .shop-area .shop-sidebar-content > .shop-close-main {
  padding: 0.35rem 0.65rem 0 !important;
}

body .shop-area .single-shop-left {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.95rem 1rem 0.9rem !important;
  margin: 0 !important;
  padding-right: 1rem !important; /* override legacy 30px island offset */
}

body .shop-area .single-shop-left.mt-5 {
  margin-top: 0 !important;
}

body .shop-area .shop-sidebar-content .single-shop-left:last-child {
  border-bottom: 0 !important;
}

body .shop-area .shop-left-title .title,
body .shop-area .shop-left-title .title.title-borders {
  color: #3f3a42 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  margin-bottom: 0.65rem !important;
  padding-bottom: 0.5rem !important;
}

body .shop-area .filter-lists .list label,
body .shop-area .filter-lists .list a,
body .shop-area .category-lists .list .item,
body .shop-area .category-lists .list a {
  color: #4a4450 !important;
  font-size: 0.875rem !important;
  font-weight: 550 !important;
}

body .shop-area .single-shop-left-search-input .form--control,
body .shop-area .single-shop-left-search .form--control {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  min-height: 2.6rem !important;
  box-shadow: none !important;
}

body .shop-area .size-lists .list,
body .shop-area .attrs-lists .list {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #4a4450 !important;
}

/* ------------------------------------------------------------------
   Product wall — shelf rhythm over spreadsheet cells
   Hexfashion stays 2-up longer so product stages stay large (product-first).
   ------------------------------------------------------------------ */
body .shop-area .grid-product-list #tab-grid2.active > .row,
body .shop-area #tab-grid2.active > .row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem 1.15rem !important;
  margin-top: 1.1rem !important;
  align-items: stretch !important;
}

/* Sibling themes: denser catalog walls sooner */
body:not(.hexfashion) .shop-area #tab-grid2.active > .row {
  grid-template-columns: 1fr 1fr !important;
}

@media (min-width: 1200px) {
  body:not(.hexfashion) .shop-area #tab-grid2.active > .row {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 1.75rem 1.35rem !important;
  }
}

/* Hexfashion: large fashion stages until wide desktops */
@media (min-width: 1600px) {
  body.hexfashion .shop-area #tab-grid2.active > .row {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 1.85rem 1.4rem !important;
  }
}

@media (min-width: 1800px) {
  body .shop-area #tab-grid2.active > .row {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
  }
}

@media (max-width: 575.98px) {
  body .shop-area #tab-grid2.active > .row {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem 0.65rem !important;
  }
}

body .shop-area #tab-grid2.active > .row > [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

body .shop-area #tab-grid2.active > .row > .pagination {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-top: 1.75rem !important;
}

/* ------------------------------------------------------------------
   Product unit — Hexfashion commercial frame (shoppable, not luxury void)
   ------------------------------------------------------------------ */
body .shop-area .global-card,
body .shop-area .global-card.no-shadow,
body .shop-area .global-card.radius-0,
body .shop-area .single-product-item {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important; /* do not stretch empty void under caption */
  background: #fff !important;
  border: 1px solid rgba(40, 30, 24, 0.08) !important;
  border-radius: 0.65rem !important;
  box-shadow: 0 1px 2px rgba(40, 30, 24, 0.04) !important;
  overflow: hidden !important;
  transition: border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease !important;
  /* Kill global card inset / content-min that shrink the photo */
  --sf-card-inset: 0 !important;
  --sf-card-content-min: 0px !important;
  --sf-card-image-ratio: 1 / 1 !important;
}

body .shop-area .global-card:hover,
body .shop-area .global-card.no-shadow:hover {
  border-color: rgba(40, 30, 24, 0.14) !important;
  box-shadow: 0 10px 24px rgba(40, 30, 24, 0.08) !important;
  transform: translateY(-2px) !important;
}

/*
  Premium product tile (shop only) — image presentation.
  Integrated media stage · small breath · contain (no crop).
*/
body .shop-area .global-card-thumb {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  background: #fff !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

/* 1:1 stage — same surface as card (no beige inset panel) */
body .shop-area .global-card-thumb > a {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  z-index: 1 !important;
}

body.furnito .shop-area .global-card-thumb > a {
  aspect-ratio: 4 / 3 !important;
}

/*
  Fill the media area with a light inset (~0.4rem), not a double-padded frame.
  All four insets + auto size fill the stage; object-fit: contain preserves the product.
*/
body .shop-area .global-card-thumb img,
body .shop-area .global-card-thumb > a img {
  position: absolute !important;
  inset: 0.4rem !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transform-origin: center center !important;
  transition: filter 280ms ease !important;
}

/* No hover zoom */
body .shop-area .global-card:hover .global-card-thumb img,
body .shop-area .global-card:hover .global-card-thumb > a img {
  transform: none !important;
}

body .shop-area .hover-overlay::before {
  display: none !important;
}

body .shop-area .global-card-thumb-badge {
  position: absolute !important;
  top: 0.9rem !important;
  inset-inline-end: 0.9rem !important;
  inset-inline-start: auto !important;
  z-index: 5 !important;
}

body .shop-area .global-card-thumb-badge-box {
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 0.22rem 0.5rem !important;
  border-radius: 0.3rem !important;
}

/* Actions — same size; refined chrome so the strip feels part of the tile */
body .shop-area .global-card-thumb-icons {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 3.1rem !important;
  min-height: 3.1rem !important;
  margin: 0 !important;
  padding: 0 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background: #fff !important;
  border: 0 !important;
  border-top: 1px solid rgba(40, 30, 24, 0.06) !important;
  box-shadow: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  flex: 0 0 auto !important;
  z-index: 4 !important;
}

body .shop-area .global-card-thumb-icons .icon-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body .shop-area .global-card-thumb-icons .icon-list .icon {
  height: 2.55rem !important;
  width: 2.55rem !important;
  min-width: 2.55rem !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  border-radius: 0.45rem !important;
  background: #fff !important;
  color: #17131a !important;
  border: 1px solid rgba(40, 30, 24, 0.13) !important;
  box-shadow: 0 1px 2px rgba(40, 30, 24, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body .shop-area .global-card-thumb-icons .icon-list .icon i {
  font-size: inherit !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  -webkit-text-stroke: 0.2px currentColor;
}

body .shop-area .global-card-thumb-icons .icon-list .icon:hover,
body .shop-area .global-card-thumb-icons .icon-list .icon:focus-visible {
  background: var(--sf-action, var(--main-color-one)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(40, 30, 24, 0.14) !important;
  transform: none !important;
}

body .shop-area .global-card-thumb-icons .icon-list .icon:focus-visible {
  box-shadow: var(--sf-focus-ring), 0 3px 10px rgba(40, 30, 24, 0.14) !important;
}

/* Caption — pull up under actions; name clear, price strongest */
body .shop-area .global-card-contents {
  background: #fff !important;
  border: 0 !important;
  border-top: 0 !important;
  padding: 0.45rem 0.9rem 0.8rem !important;
  min-height: 0 !important;
  height: auto !important;
  text-align: start !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
}

body .shop-area .global-card-contents-flex {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.12rem !important;
  text-align: start !important;
}

body .shop-area .global-card-contents-title,
body .shop-area .global-card-contents-title a {
  font-size: 1rem !important;
  font-weight: 650 !important;
  color: #221e26 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
  -webkit-line-clamp: 2 !important;
  text-align: start !important;
  margin: 0 !important;
}

body .shop-area .global-card .rating-wrap,
body .shop-area .global-card .rating-wrap.mt-2,
body .shop-area .global-card .ratings,
body .shop-area .global-card .total-ratings {
  font-size: 0.6875rem !important;
  color: #8b8790 !important;
  opacity: 1 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

body .shop-area .global-card .rating-wrap.mt-2:empty,
body .shop-area .global-card .rating-wrap:not(:has(*)) {
  display: none !important;
}

body .shop-area .global-card .price-update-through,
body .shop-area .price-update-through.mt-3 {
  margin: 0.18rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0.35rem !important;
  justify-content: flex-start !important;
}

body .shop-area .global-card .flash-prices,
body .shop-area .flash-prices {
  font-size: 1.1875rem !important;
  font-weight: 700 !important;
  color: #121014 !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap !important;
  unicode-bidi: isolate !important;
}

body .shop-area .global-card .flash-old-prices {
  font-size: 0.8125rem !important;
  color: #8b8790 !important;
  text-decoration: line-through !important;
  white-space: nowrap !important;
  unicode-bidi: isolate !important;
}

@media (prefers-reduced-motion: reduce) {
  body .shop-area .global-card:hover {
    transform: none !important;
  }
  body .shop-area .global-card:hover .global-card-thumb img,
  body .shop-area .global-card:hover .global-card-thumb > a img {
    transform: none !important;
  }
}

/* ------------------------------------------------------------------
   Priority 1 polish — tablet scroll, price slider, toolbar alignment
   ------------------------------------------------------------------ */

/* 3) Normal page scroll — kill nested shop-grid scroll cages */
body .shop-area .shop-contents-wrapper .shop-grid-contents,
body .shop-area .shop-grid-contents {
  max-height: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Sticky sidebar preserved; offset below typical storefront header */
@media (min-width: 992px) {
  body .shop-area .shop-contents-wrapper .shop-sidebar-content {
    position: sticky !important;
    top: 1rem !important;
    align-self: flex-start !important;
  }
}

/* 4) Price slider — single clean circular handles (no ghost/stray dots) */
body .shop-area .price-range-slider {
  padding: 0.35rem 0.15rem 0.15rem !important;
}

body .shop-area .price-range-slider .ui-range-slider.noUi-target {
  height: 4px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: rgba(15, 23, 42, 0.12) !important;
}

body .shop-area .price-range-slider .ui-range-slider.noUi-target .noUi-base .noUi-connect {
  background: var(--main-color-one) !important;
  height: 4px !important;
}

body .shop-area .price-range-slider .ui-range-slider.noUi-target .noUi-handle,
body .shop-area .price-range-slider .ui-range-slider.noUi-target .noUi-handle.noUi-handle-lower,
body .shop-area .price-range-slider .ui-range-slider.noUi-target .noUi-handle.noUi-handle-upper {
  width: 14px !important;
  height: 14px !important;
  top: -5px !important;
  right: -7px !important;
  left: auto !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: var(--main-color-one) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22) !important;
  outline: none !important;
  cursor: pointer !important;
}

/* Kill default noUi square + inner ::before that reads as a stray orange circle */
body .shop-area .price-range-slider .ui-range-slider.noUi-target .noUi-handle::before,
body .shop-area .price-range-slider .ui-range-slider.noUi-target .noUi-handle::after,
body .shop-area .price-range-slider .ui-range-slider.noUi-target .noUi-handle.noUi-handle-upper::before {
  display: none !important;
  content: none !important;
}

body .shop-area .price-range-slider .ui-range-slider-footer {
  margin-top: 0.75rem !important;
}

body .shop-area .price-range-slider .ui-range-slider-footer .ui-range-values {
  font-size: 0.8125rem !important;
  color: #4a4450 !important;
}

/* 5) Toolbar — align results / sort / view with the product column */
body .shop-area .shop-grid-contents > .row.align-items-center {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.65rem 1rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0.75rem !important;
  width: 100% !important;
}

/* When selected-filters are hidden, don't leave an empty bootstrap column */
body .shop-area .shop-grid-contents > .row.align-items-center > [class*="col-"]:has(.click-hide-filter[style*="display: none"]),
body .shop-area .shop-grid-contents > .row.align-items-center > [class*="col-"]:has(.selectder-filter-contents[style*="display: none"]) {
  display: none !important;
}

body .shop-area .shop-grid-contents > .row.align-items-center > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body .shop-area .shop-grid-contents > .row.align-items-center > [class*="col-"]:has(.shop-right) {
  flex: 1 1 100% !important;
  width: 100% !important;
}

body .shop-area .shop-right {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.65rem 0.85rem !important;
  width: 100% !important;
  margin-top: 0 !important;
}

body .shop-area .shop-right .showing-results,
body .shop-area .shop-right .showing-results.color-light {
  margin: 0 !important;
  margin-inline-end: 0.25rem !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

body .shop-area .shop-right .single-shops {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  margin: 0 !important;
}

/* Keep count at the start; push sort + view to the opposite edge as one group */
body .shop-area .shop-right .showing-results + .single-shops {
  margin-inline-start: auto !important;
}

body .shop-area .shop-nice-select .nice-select,
body .shop-area .shop-nice-select .nice-select.open {
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  line-height: 2.4rem !important;
  margin: 0 !important;
}

body .shop-area .shop-flex-icon.tabs {
  gap: 0.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .shop-area .shop-flex-icon .shop-icons .icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
}

/* ------------------------------------------------------------------
   Aromatic Phase 2 — PLP refinements (theme-scoped only)
   ------------------------------------------------------------------ */
body.aromatic .shop-area {
  padding-top: 1.75rem !important;
  padding-bottom: 3rem !important;
}

body.aromatic .shop-area .shop-contents-wrapper {
  gap: 1.6rem !important;
}

body.aromatic .shop-area .shop-sidebar-content {
  border-radius: 1rem !important;
  border-color: rgba(26, 26, 26, 0.07) !important;
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.04) !important;
}

body.aromatic .shop-area .shop-right {
  padding-bottom: 0.35rem !important;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
  margin-bottom: 0.35rem !important;
}

body.aromatic .shop-area .shop-icons {
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 0.55rem !important;
  background: #fff !important;
}

body.aromatic .shop-area .shop-icons.active {
  background: #f7f4f0 !important;
  border-color: rgba(var(--main-color-one-rgb, 212, 97, 63), 0.35) !important;
  color: var(--main-color-one) !important;
}

@media (min-width: 1200px) {
  body.aromatic .shop-area #tab-grid2.active > .row {
    gap: 1.9rem 1.5rem !important;
  }
}

/* ------------------------------------------------------------------
   Aromatic Phase 2 cleanup — rating filter presentation (logic unchanged)
   ------------------------------------------------------------------ */
body.aromatic .shop-area .filter-lists {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.aromatic .shop-area .filter-lists .list {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  padding-inline-start: 34px !important;
  margin: 0 !important;
  border-radius: 0.55rem !important;
  cursor: pointer;
}

body.aromatic .shop-area .filter-lists .list::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 10px !important;
  inset-inline-end: auto !important;
  left: auto !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 16px !important;
  width: 16px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(26, 26, 26, 0.22) !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

body.aromatic .shop-area .filter-lists .list.active::before {
  border-color: var(--main-color-one) !important;
  background: var(--main-color-one) !important;
  box-shadow: inset 0 0 0 3px #fff !important;
}

body.aromatic .shop-area .filter-lists .list .rating-stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  line-height: 1 !important;
}

body.aromatic .shop-area .filter-lists .list .rating-stars a {
  display: inline-flex !important;
  color: #f0b429 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Aromatic — product image stage (centered, consistent, no stretch)
   ------------------------------------------------------------------ */
body.aromatic {
  --sf-card-image-ratio: 1 / 1;
  --sf-card-inset: 1.15rem;
}

body.aromatic .shop-area .global-card-thumb {
  display: flex !important;
  flex-direction: column !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #f3efe9 !important;
}

body.aromatic .shop-area .global-card-thumb > a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

body.aromatic .shop-area .global-card-thumb > a img,
body.aromatic .shop-area .global-card-thumb img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  display: block !important;
}

body.aromatic .shop-area .global-card-thumb-icons {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 3.1rem !important;
  min-height: 3.1rem !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
}