/* ==========================================================================
   richter2026 — cards.css
   Product cards, sidebar boxes, category cards.
   Targets the existing OpenCart class contract (.box, .box-product,
   .product-grid, .product-list, .category-list, .box-category, etc.)
   so module .tpl files do not need structural changes.
   Milestone: 0.3/0.4 groundwork, shipped early since most pages use it.
   ========================================================================== */

/* ---- Sidebar "box" modules (categories, manufacturers, info, etc.) ----- */

.box,
.box-cat {
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.box {
  overflow: hidden;
}

.box-cat {
  overflow: visible;
}

.box .box-heading,
.box-cat .box-heading {
  background: var(--color-bg-subtle);
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.box .box-content,
.box-cat .box-content {
  background: var(--color-bg);
  border: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-5);
}

.box-category ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.box-category > ul > li {
  padding: var(--space-3) 0;
}

.box-category > ul > li + li {
  border-top: 1px solid var(--color-border);
}

.box-category > ul > li > a {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: 44px;
}

.box-category > ul > li > a.active {
  color: var(--color-accent);
}

.box-category > ul > li > a:hover {
  color: var(--color-primary);
}

.box-category > ul > li ul {
  margin: var(--space-2) 0 0 0;
}

.box-category > ul > li ul > li {
  padding: var(--space-1) 0 0 var(--space-4);
}

.box-category > ul > li ul > li > a {
  text-decoration: none;
  color: var(--color-text-muted);
  display: block;
}

.box-category > ul > li ul > li > a.active {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

/* fs_category.tpl: collapsible box heading arrow. CONFIRMED NOT IN USE
   (see note above) — kept as a zero-cost fallback only, not an active
   styling target. */
.box .box-heading {
  position: relative;
}

.box .box-heading .category-arrow {
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  cursor: pointer;
  border-right: 2px solid var(--color-text-faint);
  border-bottom: 2px solid var(--color-text-faint);
  transform-origin: center;
}

.box .box-heading .category-arrow.down {
  transform: translateY(-65%) rotate(-45deg);
}

.box .box-heading .category-arrow:not(.down) {
  transform: translateY(-65%) rotate(45deg);
}
/* ==========================================================================
   Category menu
   Replaces the old amzmenu jQuery plugin.
   Pure CSS flyout on desktop, collapsible/indented menu on smaller screens.
   ========================================================================== */

.category-nav,
.category-menu-list,
.category-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.category-nav {
	width: 100%;
}

.category-menu-item {
	position: relative;
	margin: 0;
	padding: 0;
}


/* --------------------------------------------------------------------------
   Top-level categories
   -------------------------------------------------------------------------- */

.category-menu-list > .category-menu-item {
	padding: var(--space-2) 0;
	border-top: 1px solid var(--color-border);
}

.category-menu-list > .category-menu-item:first-child {
	border-top: none;
}


/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

.category-menu-link-row {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.category-menu-link {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--space-1) 0;

	color: var(--color-text);
	background: none;
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	line-height: var(--line-height-base);
}

.category-menu-link:hover,
.category-menu-link.active {
	color: var(--color-accent);
	text-decoration: none;
}


/* --------------------------------------------------------------------------
   Expand/collapse button
   -------------------------------------------------------------------------- */

.category-menu-toggle {
	position: relative;
	flex: 0 0 30px;
	width: 30px;
	min-height: 30px;
	margin: 0;
	padding: 0;

	border: 0;
	background: transparent;
	color: var(--color-text-muted);

	cursor: pointer;
}

.category-menu-toggle:hover {
	color: var(--color-accent);
}

.category-menu-toggle span,
.category-menu-toggle span::after {
	position: absolute;
	top: 50%;
	left: 50%;

	display: block;
	width: 9px;
	height: 1px;

	background: currentColor;
	content: "";

	transform: translate(-50%, -50%);
}

.category-menu-toggle span::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.category-menu-item.is-open > .category-menu-link-row .category-menu-toggle span::after {
	display: none;
}


/* --------------------------------------------------------------------------
   Desktop flyout
   -------------------------------------------------------------------------- */

.category-menu-item > .category-submenu {
	display: none;

	position: absolute;
	top: -1px;
	left: calc(100% + 1px);

	z-index: var(--z-dropdown);

	min-width: 220px;
	max-width: 320px;

	margin: 0;
	padding: var(--space-4);

	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}


/*
 * Hover is intentionally retained for desktop.
 * This means the menu still behaves naturally for mouse users.
 */
@media (min-width: 992px) {

	.category-menu-item:hover > .category-submenu,
	.category-menu-item:focus-within > .category-submenu {
		display: block;
	}

}


/* --------------------------------------------------------------------------
   Flyout contents
   -------------------------------------------------------------------------- */

.category-submenu > .category-menu-item {
	padding: var(--space-1) 0;
}

.category-submenu .category-menu-link {
	color: var(--color-text);
	font-weight: var(--font-weight-normal);
	white-space: nowrap;
}

.category-submenu .category-menu-link:hover,
.category-submenu .category-menu-link.active {
	color: var(--color-accent);
}


/* Heading inside the first submenu */
.category-submenu-title {
	margin: 0;
	padding: 0 0 var(--space-2);
}

.category-submenu-title h3 {
	margin: 0;

	color: var(--color-text-faint);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	text-transform: uppercase;
	white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Third-level flyout
   -------------------------------------------------------------------------- */

.category-submenu .category-submenu {
	top: -1px;
	left: calc(100% + 1px);
}


/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.category-menu-link:focus-visible,
.category-menu-toggle:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: 2px;
}


/* ==========================================================================
   Tablet / mobile
   ========================================================================== */

@media (max-width: 991px) {

	/*
	 * Flyouts become normal document-flow submenus.
	 * This prevents them from running outside a narrow sidebar.
	 */

	.category-menu-item > .category-submenu {
		display: none;

		position: static;

		min-width: 0;
		max-width: none;

		margin: var(--space-2) 0 0 var(--space-4);
		padding: 0;

		background: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}

	.category-menu-item.is-open > .category-submenu {
		display: block;
	}

	/*
	 * On touch devices there is no hover-based opening.
	 * The button controls the submenu.
	 */

	.category-menu-item:hover > .category-submenu {
		display: none;
	}

	.category-menu-item.is-open:hover > .category-submenu {
		display: block;
	}

	.category-submenu .category-submenu {
		margin-left: var(--space-4);
	}

	.category-submenu-title {
		padding-top: var(--space-2);
	}

	.category-submenu .category-menu-link {
		white-space: normal;
	}

}

/* ---- Product cards: shared by box-product, box-product-featured,
   product-grid, category-list (grid view) ---------------------------- */

.box-product,
.box-product-featured,
.product-grid,
.category-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8) var(--space-5);
}

.box-product > div,
.box-product-featured > div,
.product-grid > div,
.category-list > div {
  width: auto;
  min-width: 0;
  display: block;
  margin: 0;
  padding: var(--space-5);
  min-height: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.box-product > div:hover,
.box-product-featured > div:hover,
.product-grid > div:hover,
.category-list > div:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

/* Narrower grid when both sidebars are present */
#column-left + #column-right + #content .box-product > div,
#column-left + #column-right + #content .box-product-featured > div,
#column-left + #column-right + #content .product-grid > div {
  width: auto;
}

.box-product .image,
.box-product-featured .image,
.product-grid .image,
.category-list .image {
  display: block;
  margin: 0 0 var(--space-3) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-subtle);
  aspect-ratio: 1 / 1;
}

.box-product .image img,
.box-product-featured .image img,
.product-grid .image img,
.category-list .image img {
  padding: 0;
  border: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--transition-base);
}

.box-product > div:hover .image img,
.box-product-featured > div:hover .image img,
.product-grid > div:hover .image img,
.category-list > div:hover .image img {
  transform: scale(1.04);
}

.box-product .name a,
.box-product-featured .name a,
.product-grid .name a,
.category-list .name a {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
  min-height: calc(var(--font-size-base) * var(--line-height-tight) * 2);
}

.box-product .name a:hover,
.box-product-featured .name a:hover,
.product-grid .name a:hover,
.category-list .name a:hover {
  color: var(--color-primary);
}

.box-product .price,
.box-product-featured .price,
.product-grid .price {
  display: block;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-lg);
}

/* v1.8 — stock/availability indicator per feedback's requested card
   hierarchy (image → name → price → availability → cart). The
   category template already renders this (a green/red dot before the
   price, wrapped in an unclassed <div style="display:inline">) — it
   was previously an unstyled, low-resolution legacy PNG. Hidden in
   favor of a clean CSS-drawn dot; colour is picked via :has() reading
   which image src the template actually rendered, since the wrapper
   itself carries no class to hook into directly. Unsupported browsers
   (rare — anything without :has()) just show the red/out-of-stock
   colour, a harmless degradation since price/cart still work fully. */
.box-product .price > div:first-child,
.box-product-featured .price > div:first-child,
.product-grid .price > div:first-child {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-2);
  vertical-align: middle;
}

.box-product .price > div:first-child img,
.box-product-featured .price > div:first-child img,
.product-grid .price > div:first-child img {
  display: none;
}

.box-product .price > div:first-child::before,
.box-product-featured .price > div:first-child::before,
.product-grid .price > div:first-child::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c0392b;
}

.box-product .price > div:first-child:has(img[src*="green"])::before,
.box-product-featured .price > div:first-child:has(img[src*="green"])::before,
.product-grid .price > div:first-child:has(img[src*="green"])::before {
  background: #2e9e5b;
}

.box-product .price-old,
.box-product-featured .price-old,
.product-grid .price-old {
  color: var(--color-price-old);
  text-decoration: line-through;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-sm);
  margin-right: var(--space-1);
}

.box-product .price-new,
.box-product-featured .price-new,
.product-grid .price-new {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
}

.box-product .price .price-tax,
.product-grid .price .price-tax,
.price-tax {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-faint);
}

.box-product .rating,
.box-product-featured .rating,
.product-grid .rating {
  display: block;
  margin-bottom: var(--space-2);
}

.box-product .cart,
.box-product-featured .cart,
.product-grid .cart {
  margin-top: var(--space-4);
}

.box-product .cart input.button,
.box-product-featured .cart input.button,
.product-grid .cart input.button {
  width: 100%;
  height: 44px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
}

/* Narrow cards (2-column grid on phones): the default 20px side padding
   leaves too little room for "In den Warenkorb". An <input type="button">
   cannot wrap or center overflowing text (it starts at the left padding and
   gets clipped on the right), so shrink padding/font until the label fits. */
@media (max-width: 599px) {
  .box-product .cart input.button,
  .box-product-featured .cart input.button,
  .product-grid .cart input.button {
    padding: 0 var(--space-1);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
    text-align: center;
    text-overflow: clip;
  }
}

@media (max-width: 359px) {
  .box-product .cart input.button,
  .box-product-featured .cart input.button,
  .product-grid .cart input.button {
    font-size: 11px;
  }
}

.product-grid .description {
  display: none;
}

/* ---- Product list view (horizontal cards) ------------------------------ */

.product-list > div {
  display: flex;
  gap: var(--space-5);
  border: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--color-bg);
}

.product-list > div + div {
  border-top: 1px solid var(--color-border);
}

.product-list .image {
  float: none;
  flex: 0 0 160px;
  margin-right: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-subtle);
}

.product-list .image img {
  padding: 0;
  border: none;
  width: 100%;
}

.product-list .right {
  float: none;
  margin-left: 0;
  flex: 1 1 auto;
}

.product-list .name a {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  font-size: var(--font-size-md);
}

.product-list .description {
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

.product-list .price {
  float: right;
  height: auto;
  text-align: right;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.product-list .wishlist a,
.product-list .compare a {
  background: none;
  padding-left: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ---- Category sub-grid (category-info "refine" thumbnails) ------------- */

.category-info {
  background: none;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  overflow: visible;
}

.category-info .image {
  float: left;
  margin-right: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

/* ---- Responsive grid columns -------------------------------------------- */

@media (max-width: 1279px) {
  .box-product,
  .box-product-featured,
  .product-grid,
  .category-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .box-product,
  .box-product-featured,
  .product-grid,
  .category-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-list > div {
    flex-direction: column;
  }

  .product-list .image {
    flex: 0 0 auto;
  }

  .product-list .price {
    float: none;
    text-align: left;
  }
}

@media (max-width: 599px) {
  .box-product,
  .box-product-featured,
  .product-grid,
  .category-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .box-product > div,
  .box-product-featured > div,
  .product-grid > div,
  .category-list > div {
    padding: var(--space-3);
  }
}

/* ---- v0.9 Polish: product card refinements ----------------------------- */

/* Price display: ensure old+new price sit on same line cleanly with a
   small gap, matching the live site's presentation */
.box-product .price span,
.box-product-featured .price span,
.product-grid .price span {
  display: inline;
}

/* Prevent very long product names from overflowing card boundaries —
   clamp to 3 lines with ellipsis on grid view */
.box-product .name a,
.box-product-featured .name a,
.product-grid .name a {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ---- Manufacturer logo strip in sidebar --------------------------------
   The manufacturer/brand logo module renders as a bare <ul> of <li><a><img>
   with no wrapper class (template not included in theme.zip). We target
   it by its context — a <ul> directly inside #column-left that contains
   only <img> elements in its <li> children. The :has() selector is used
   as a progressive enhancement; browsers that don't support it simply
   show the logos in a vertical list, which is functional if not ideal. */

#column-left ul:has(li > a > img) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-6) 0;
  padding: 0;
}

#column-left ul:has(li > a > img) li {
  flex: 0 0 auto;
}

#column-left ul:has(li > a > img) img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  background: var(--color-bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#column-left ul:has(li > a > img) a:hover img {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* ---- Wiki / Wissenswertes module (.box-wiki) ----------------------------
   The wiki module uses .box > .box-wiki > ul structure.
   Already wrapped by .box styles; just need the inner list treatment. */

.box-wiki ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.box-wiki ul li {
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}

.box-wiki ul li:last-child {
  border-bottom: none;
}

.box-wiki ul li a {
  display: block;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-decoration: none;
  padding: var(--space-1) 0;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.box-wiki ul li a:hover,
.box-wiki ul li a.active {
  color: var(--color-accent);
}

.box-wiki ul ul {
  margin-left: var(--space-4);
}


/* ---- Product cards v2 (grid view + modules) -----------------------------
   Same markup everywhere (.image .name .price .rating .cart .wishlist
   .compare). Focus: picture, name, price. Each card is a small grid:

       image
       name              (takes the spare height, so rows line up)
       stars             |  heart  compare      <- small round icon buttons
       price + tax line  (full width: "1.249,00 EUR" never has to wrap)
       cart button

   Wishlist and compare sit in the rating row, never on the picture, so they
   cannot cover the product photo or its corner badges, and never squeeze the
   price, whatever the card width. The cart button is the only full-width
   element. */

.box-product > div,
.box-product-featured > div,
.product-grid > div {
  --card-pad: var(--space-5);
  --card-icon: 34px;
  --card-glyph: 18px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto 1fr auto auto auto;
  column-gap: 6px;
  padding: var(--card-pad);
}

.box-product .image,
.box-product-featured .image,
.product-grid .image {
  grid-column: 1 / span 3;
  grid-row: 1;
  margin-bottom: var(--space-3);
}

.box-product .name,
.box-product-featured .name,
.product-grid .name {
  grid-column: 1 / span 3;
  grid-row: 2;
  margin-bottom: var(--space-2);
}

.box-product .rating,
.box-product-featured .rating,
.product-grid .rating {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  margin: 0 0 var(--space-1);
  line-height: 0;
}

.box-product .rating img,
.box-product-featured .rating img,
.product-grid .rating img {
  display: block;
  height: 14px;
  width: auto;
}

.box-product .price,
.box-product-featured .price,
.product-grid .price {
  grid-column: 1 / span 3;
  grid-row: 4;
  align-self: start;
  margin: 0;
  line-height: 1.2;
}

/* The <br> before the tax line and the 19px strut of .price created the
   big gap: make the tax line its own small block instead. */
.box-product .price br,
.box-product-featured .price br,
.product-grid .price br {
  display: none;
}

.box-product .price .price-tax,
.box-product-featured .price .price-tax,
.product-grid .price .price-tax {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  line-height: 1.3;
}

.box-product .price .price-tax a,
.box-product-featured .price .price-tax a,
.product-grid .price .price-tax a {
  font-size: inherit;
}

.box-product .cart,
.box-product-featured .cart,
.product-grid .cart {
  grid-column: 1 / span 3;
  grid-row: 5;
  margin-top: var(--space-3);
}

/* An old and a special price may wrap between the two, never inside one
   ("69,90" on one line and the euro sign alone on the next). */
.box-product-featured > div .price-old,
.box-product-featured > div .price-new,
.box-product > div .price-old,
.box-product > div .price-new,
.product-grid > div .price-old,
.product-grid > div .price-new {
  white-space: nowrap;
}

/* Wishlist / compare: icon buttons in the rating row, right-aligned. The link
   text stays in the DOM (hidden by font-size: 0) for screen readers. */
.box-product-featured > div .wishlist,
.box-product > div .wishlist,
.box-product-featured > div .compare,
.box-product > div .compare,
.product-grid > div .wishlist,
.product-grid > div .compare {
  grid-row: 3;
  align-self: center;
  justify-self: end;
  width: var(--card-icon);
  height: var(--card-icon);
  margin: 0;
}

.box-product-featured > div .wishlist,
.box-product > div .wishlist,
.product-grid > div .wishlist {
  grid-column: 2;
}

.box-product-featured > div .compare,
.box-product > div .compare,
.product-grid > div .compare {
  grid-column: 3;
}

.box-product-featured > div .wishlist a,
.box-product > div .wishlist a,
.box-product-featured > div .compare a,
.box-product > div .compare a,
.product-grid > div .wishlist a,
.product-grid > div .compare a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--card-icon);
  height: var(--card-icon);
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.box-product-featured > div .wishlist a::before,
.box-product > div .wishlist a::before,
.box-product-featured > div .compare a::before,
.box-product > div .compare a::before,
.product-grid > div .wishlist a::before,
.product-grid > div .compare a::before {
  content: "";
  width: var(--card-glyph);
  height: var(--card-glyph);
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.box-product-featured > div .wishlist a,
.box-product > div .wishlist a,
.product-grid > div .wishlist a {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}

.box-product-featured > div .compare a,
.box-product > div .compare a,
.product-grid > div .compare a {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7l4 4'/%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='m16 21 4-4-4-4'/%3E%3Cpath d='M20 17H4'/%3E%3C/svg%3E");
}

.box-product-featured > div .wishlist a:hover,
.box-product > div .wishlist a:hover,
.product-grid > div .wishlist a:hover {
  color: #c0392b;
  border-color: #c0392b;
  background: #fff;
  text-decoration: none;
}

.box-product-featured > div .compare a:hover,
.box-product > div .compare a:hover,
.product-grid > div .compare a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: #fff;
  text-decoration: none;
}

/* Phones: tighter card so the picture, name and price dominate */
@media (max-width: 599px) {
  .box-product > div,
  .box-product-featured > div,
  .product-grid > div {
    --card-pad: 10px;
    --card-icon: 30px;
    --card-glyph: 16px;
  }

  .box-product,
  .box-product-featured,
  .product-grid {
    gap: 10px;
  }

  .box-product .image,
  .box-product-featured .image,
  .product-grid .image {
    margin-bottom: var(--space-2);
  }

  .box-product > div,
  .box-product-featured > div,
  .product-grid > div {
    column-gap: 4px;
  }

  .box-product .name a,
  .box-product-featured .name a,
  .product-grid .name a {
    font-size: var(--font-size-sm);
    line-height: 1.3;
    min-height: 0;
    -webkit-line-clamp: 2;
  }

  .box-product .name,
  .box-product-featured .name,
  .product-grid .name {
    margin-bottom: var(--space-1);
  }

  .box-product .price,
  .box-product-featured .price,
  .product-grid .price {
    font-size: var(--font-size-md);
  }

  .box-product .price .price-tax,
  .box-product-featured .price .price-tax,
  .product-grid .price .price-tax {
    font-size: 11px;
    line-height: 1.25;
  }

  .box-product .rating img,
  .box-product-featured .rating img,
  .product-grid .rating img {
    height: 12px;
  }

  .box-product .cart,
  .box-product-featured .cart,
  .product-grid .cart {
    margin-top: var(--space-2);
  }

  .box-product .cart input.button,
  .box-product-featured .cart input.button,
  .product-grid .cart input.button {
    height: 38px;
  }
}

/* Wishlist heart: filled once the product is on the wish list
   (.is-active is set by catalog-actions.js from WISHLIST_IDS / after adding) */
.box-product-featured > div .wishlist a.is-active,
.box-product > div .wishlist a.is-active,
.product-grid > div .wishlist a.is-active {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  color: #c0392b;
  border-color: #c0392b;
  background: #fff;
}