/**
 * WooCommerce Additional Styles – L6 Theme v1.3.0
 *
 * Cart drawer, checkout, cart page, product grid overrides,
 * hover image-swap on shop-grid cards.
 */

/* ============================================
   PRODUCT GRID OVERRIDES
   ============================================ */

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none;
}

.woocommerce ul.products {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Row-gap only, +30% (24px -> 31.2px) — column-gap (between cards in
     the same row) stays 24px. This is the actual, effective rule: an
     equivalent-specificity ".woocommerce ul.products" in style.css sets
     "gap: 48px 24px", but that file loads before this one (see the
     'l6-woocommerce' => array('l6-style') dependency in functions.php),
     so it's always overridden here — kept in sync there rather than
     removed, see the comment at that rule. Same story at the two
     responsive breakpoints below and in style.css's own media queries. */
  gap: 31.2px 24px;
}

.woocommerce ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

/* Product card */
li.product.product-card {
  position: relative;
}

.product-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-card__link:hover {
  opacity: 1;
}

.product-card__image-wrapper {
  position: relative;
  overflow: hidden;
  background: #F5F5F5;
  border-radius: 6px;
}

.product-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  /* WooCommerce core ships ".woocommerce ul.products li.product a img
     { margin-bottom: 1em }" at higher specificity than a bare class
     selector can beat — !important is the same pattern already used
     elsewhere in this file to override WC core defaults. Without it,
     that 16px shows as a gap between the image and its (rounded)
     wrapper's background. */
  margin-bottom: 0 !important;
  transition: transform 0.5s ease, opacity 0.35s ease;
}

/* Second image (hover swap): stacked exactly over the base image, fades in on hover.
   margin:0 is required here because the base .product-card__image rule (style.css)
   sets margin-bottom for carousel contexts — without resetting it, the absolutely
   positioned hover image would sit offset from the base image underneath it. */
.product-card__image--hover {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
}

/* v1.3.9: only on devices that genuinely support hover with a precise
   pointer (mouse/trackpad) — touchscreens fake a momentary :hover state on
   tap, which made this image-swap flash right before the tap's own
   navigation to the product page fired. This is the version of the rule
   that actually wins the cascade (this file loads after style.css, whose
   equal-specificity copy is now dead weight — kept in sync there anyway,
   same reasoning as the "gap" comment above). */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card__image,
  li.product:hover .product-card__image {
    transform: scale(1.04);
  }

  .product-card:hover .product-card__image--hover,
  li.product:hover .product-card__image--hover {
    opacity: 1;
  }
}

/* Product badges */
.product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-block;
  padding: 4px 12px;
  background: #000;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.4;
}

.product-card__badge--sale {
  background: #000;
}

/* Product info */
.product-card__info {
  /* Sole source of the image-to-title gap now — see the comment on
     .product-card__image-wrapper (style.css) for why that element no
     longer also contributes a margin-bottom here. Halved twice from an
     original 24px total: 24 -> 12 -> 6. */
  padding: 6px 0 0;
}

.product-card__title {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  /* -20% from 2px. */
  margin-bottom: 1.6px;
}

.product-card__price {
  font-size: 15px;
  font-weight: 300;
  color: rgba(0,0,0,0.7);
}

.product-card__price del {
  opacity: 0.4;
  margin-right: 6px;
}

.product-card__price ins {
  text-decoration: none;
}

.product-card__colors {
  font-size: 13px;
  font-weight: 300;
  color: rgba(0,0,0,0.5);
  margin-top: 4px;
}

/* Sale badge override */
.product-card__image-wrapper .onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* ============================================
   SINGLE PRODUCT OVERRIDES
   ============================================ */

.single-product-layout .product-gallery {
  display: block;
}

.single-product-layout .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  position: relative;
  /* 80px thumbnail column + 8px gap — matches the 8px gap between the
     thumbnails themselves (.flex-control-thumbs gap), so all spacing
     in the gallery is visually consistent. */
  padding-left: 88px;
}

.single-product-layout .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
}

/* Zoom/magnifier trigger icon (WC core, top-right of the main image) —
   hidden on both desktop and mobile; unrelated to whether the lightbox
   itself opens on click, only removes the visual "+"/magnifying-glass
   button WC overlays on the image. */
.single-product-layout .woocommerce-product-gallery__trigger {
  display: none !important;
}

.single-product-layout .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #F5F5F5;
}

/* Thumbnails: vertical strip on the left */
.single-product-layout .woocommerce-product-gallery .flex-control-thumbs {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* WooCommerce core ships ".woocommerce div.product div.images
   .flex-control-thumbs li { width: 25% }" for its own default
   horizontal 4-column thumbnail row — higher specificity than the rule
   below, and since our .flex-control-thumbs is only 80px wide (a
   vertical strip, not a wide row), 25% of that collapsed thumbnails to
   20x20px. !important (same pattern as elsewhere in this file) restores
   the intended 80x80px. */
.single-product-layout .woocommerce-product-gallery .flex-control-thumbs li {
  width: 80px !important;
  height: 80px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Same conflict for the thumbnail image itself: WC core's
   ".woocommerce div.product div.images img { width:100%; height:auto }"
   otherwise wins (its width:100% is harmless here, but height:auto
   beats our height:100%, and both need !important to be reliably safe
   from this same core rule). */
.single-product-layout .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,0.12);
  cursor: pointer;
  transition: border-color 0.2s;
}

.single-product-layout .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product-layout .woocommerce-product-gallery .flex-control-thumbs li img:hover {
  border-color: #000;
}

.single-product-layout .summary {
  width: 100% !important;
  float: none !important;
}

/* Variations */
.woocommerce div.product form.cart .variations {
  margin-bottom: 20px;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  border: none;
  padding: 6px 0;
  vertical-align: middle;
}

.woocommerce div.product form.cart .variations label {
  font-size: 14px;
  font-weight: 400;
  padding-right: 16px;
}

.woocommerce div.product form.cart .variations select {
  min-width: 180px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 0;
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
  appearance: none;
  -webkit-appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 10px;
}

.woocommerce div.product form.cart .variations select:focus {
  border-color: #000;
  outline: none;
}

.woocommerce div.product form.cart .reset_variations {
  font-size: 13px;
  color: rgba(0,0,0,0.5);
  margin-left: 8px;
}

/* Quantity input */
.woocommerce div.product form.cart div.quantity {
  display: inline-flex;
  margin-right: 12px;
}

.woocommerce div.product form.cart div.quantity .qty {
  width: 60px;
  height: 50px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 0;
  text-align: center;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  -moz-appearance: textfield;
}

.woocommerce div.product form.cart div.quantity .qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart div.quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add to cart button */
.woocommerce div.product form.cart .single_add_to_cart_button {
  height: 50px;
  padding: 0 40px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  border-radius: 0;
  text-transform: none;
  transition: all 0.3s;
  cursor: pointer;
  letter-spacing: 0.3px;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: transparent;
  color: #000;
}

/* Buttons row: quantity | icon-only "add to cart" | "anpassen" — always
   one horizontal row, mobile and desktop alike. The icon-only cart
   button is compact enough that all three fit naturally without any
   JS-measured widths.

   form.cart ships WooCommerce's own clearfix pseudo-elements
   (".woocommerce div.product form.cart::before/::after { content:' ';
   display:table }") — harmless for the old float layout, but once
   form.cart is flexed here they become real flex items and push the
   quantity field ~12px to the right of where it should sit (out of
   alignment with the page title above). Neutralizing them first is
   required for the rest of this layout to align correctly. */
.l6-buttons-row form.cart::before,
.l6-buttons-row form.cart::after {
  content: none !important;
  display: none !important;
}

.l6-buttons-row {
  /* Referenced by form.cart's own gap below and by the desktop
     "anpassen" spacing further down (kept as a variable so the two
     stay in the specified 1:7 ratio if this value ever changes).
     No row-level "gap" here — spacing to "anpassen" is fully controlled
     via its own margin-left below (auto on mobile, a fixed 7x value on
     desktop); a gap here would add on top of that and double-count. */
  --l6-qty-atc-gap: 2px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

/* margin-bottom needs !important: our own ".woocommerce div.product
   form.cart { margin-bottom: 12px }" fallback rule (for non-preset
   products, 2 elements) beats this selector (1 element) on the
   specificity tiebreak despite matching class count. Left unfixed, that
   12px margin inflated the row's own cross-axis height to 62px, which
   made align-items:center visibly push the (unmargined) "anpassen"
   button 6px lower than the quantity field and add-to-cart button. */
.l6-buttons-row form.cart {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--l6-qty-atc-gap);
  margin-bottom: 0 !important;
}

/* !important needed: ".woocommerce div.product form.cart div.quantity"
   (3 elements) beats this selector (2 elements) on the specificity
   tiebreak — left unfixed, its 12px margin-right was silently stacking
   on top of form.cart's own gap above (e.g. gap:2px measured as 14px). */
.l6-buttons-row form.cart div.quantity {
  margin-right: 0 !important;
}

/* Icon-only add-to-cart button: text stays in the DOM (font-size:0
   hides it visually only) so screen readers still announce "In den
   Warenkorb" — the icon is a CSS mask filled with currentColor, so it
   automatically follows the button's own white/black hover swap. */
/* !important needed on font-size/padding: the general
   ".woocommerce div.product form.cart .single_add_to_cart_button" rule
   above has higher specificity (4 classes vs 3 here) and would
   otherwise still show "In den Warenkorb" at 16px alongside the icon. */
.l6-buttons-row form.cart .single_add_to_cart_button {
  flex: none;
  font-size: 0 !important;
  padding: 0 22px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CSS masks are alpha-only silhouettes: everything opaque in the source
   SVG gets painted with ONE flat colour (background-color below),
   regardless of the source's own black/white. The first version of
   this badge had a solid black-filled circle with a white "+" drawn on
   top — both fully opaque, so the mask painted the whole circle solid
   white with no visible "+". Fixed by making the badge a stroke-only
   ring (fill:none) with the "+" as separate strokes, so the gaps
   between them are genuinely transparent and survive masking. */
.l6-buttons-row form.cart .single_add_to_cart_button::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3Ccircle cx='20' cy='4' r='4.2' fill='none' stroke='black' stroke-width='1.3'/%3E%3Cline x1='20' y1='2.2' x2='20' y2='5.8' stroke='black' stroke-width='1.3'/%3E%3Cline x1='18.2' y1='4' x2='21.8' y2='4' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3Ccircle cx='20' cy='4' r='4.2' fill='none' stroke='black' stroke-width='1.3'/%3E%3Cline x1='20' y1='2.2' x2='20' y2='5.8' stroke='black' stroke-width='1.3'/%3E%3Cline x1='18.2' y1='4' x2='21.8' y2='4' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* "anpassen": natural width, pushed to the row's right edge — same
   margin from the viewport edge as the title above (both sit inside
   the same .container padding). height:50px overrides a mobile-only
   ".l6-customize-btn { height:46px }" rule elsewhere in this file (for
   a different context) — this selector is more specific, so it wins
   without needing !important, keeping it the same height as the
   quantity field and add-to-cart button (both 50px) for a clean,
   vertically centered row. */
.l6-buttons-row .l6-customize-btn {
  flex: none;
  width: auto;
  height: 50px;
  margin-left: auto;
}

/* Desktop only: fixed gap to "anpassen" instead of pushing it flush to
   the row's right edge — 7x the quantity→add-to-cart gap (also via the
   --l6-qty-atc-gap variable, so the 1:7 ratio holds if that ever
   changes). Mobile keeps margin-left:auto (right-aligned) — no request
   to change that. */
@media (min-width: 769px) {
  .l6-buttons-row .l6-customize-btn {
    margin-left: calc(var(--l6-qty-atc-gap) * 7);
  }
}

/* When no buttons-row wrapper (non-preset products) */
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* Secondary action (outline/ghost) — "In den Warenkorb" stays the solid
   black primary button, this one is visually lighter next to it. */
.l6-customize-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 40px;
  border: 1px solid #000;
  background: transparent;
  color: #000;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 0;
  text-transform: none;
  text-decoration: none;
  line-height: 1.6;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.l6-customize-btn:hover {
  background: #000;
  color: #fff;
  opacity: 1;
}

/* ============================================
   CART DRAWER
   ============================================ */

.cart-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cart-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 20px rgba(0,0,0,0.08);
}

.cart-drawer.is-open {
  transform: translateX(0);
}

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}

.cart-drawer__title {
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-drawer__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #000;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 500;
}

.cart-drawer__close {
  background: none;
  border: none;
  font-size: 28px;
  color: #000;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.cart-drawer__close:hover {
  opacity: 1;
}

.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.cart-drawer__item {
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: opacity 0.3s;
}

.cart-drawer__item-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background: #F5F5F5;
  overflow: hidden;
}

.cart-drawer__item-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.cart-drawer__item-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  max-width: none;
}

.cart-drawer__item-details {
  flex: 1;
  min-width: 0;
}

.cart-drawer__item-name {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 4px;
}

.cart-drawer__item-name a {
  color: inherit;
  text-decoration: none;
}

.cart-drawer__item-name a:hover {
  opacity: 0.7;
}

.cart-drawer__item-price {
  font-size: 14px;
  font-weight: 300;
  color: #000;
  margin-bottom: 4px;
}

.cart-drawer__item-meta {
  font-size: 12px;
  font-weight: 300;
  color: rgba(0,0,0,0.5);
  margin-bottom: 6px;
}

.cart-drawer__item-meta dt { display: none; }
.cart-drawer__item-meta dd { margin: 0; padding: 0; }
.cart-drawer__item-meta p { margin: 0; }

.cart-drawer__item-qty {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.cart-drawer__item-qty-label {
  font-weight: 300;
  color: rgba(0,0,0,0.6);
}

.cart-drawer__item-remove {
  font-size: 12px;
  font-weight: 300;
  color: rgba(0,0,0,0.4);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}

.cart-drawer__item-remove:hover {
  color: #000;
  opacity: 1;
}

.cart-drawer__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  text-align: center;
  color: rgba(0,0,0,0.4);
  font-size: 15px;
  font-weight: 300;
}

.cart-drawer__footer {
  flex-shrink: 0;
  padding: 20px 24px;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}

.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.cart-drawer__subtotal-label {
  font-size: 15px;
  font-weight: 400;
}

.cart-drawer__subtotal-amount {
  font-size: 16px;
  font-weight: 500;
}

.cart-drawer__tax-note {
  font-size: 12px;
  font-weight: 300;
  color: rgba(0,0,0,0.45);
  margin: 0 0 12px;
}

.cart-drawer__note-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
  color: rgba(0,0,0,0.6);
  text-decoration: underline;
  margin-bottom: 16px;
  cursor: pointer;
}

.cart-drawer__note-link:hover {
  color: #000;
  opacity: 1;
}

.cart-drawer__actions {
  display: flex;
  gap: 10px;
}

.cart-drawer__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 0;
  line-height: 1.4;
}

.cart-drawer__btn--view {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}

.cart-drawer__btn--view:hover {
  background: transparent;
  color: #000;
  opacity: 1;
}

.cart-drawer__btn--checkout {
  background: transparent;
  color: #000;
  border: 1px solid #000;
}

.cart-drawer__btn--checkout:hover {
  background: #000;
  color: #fff;
  opacity: 1;
}

/* ============================================
   CART PAGE
   ============================================ */

.woocommerce-cart table.cart {
  border-collapse: collapse;
  width: 100%;
}

.woocommerce-cart table.cart td {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 20px 12px;
  vertical-align: middle;
}

.woocommerce-cart table.cart th {
  padding: 12px;
  font-weight: 400;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

.woocommerce-cart table.cart img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  background: #f2f0ed;
}

.woocommerce-cart table.cart .product-remove a {
  color: rgba(0,0,0,0.3);
  font-size: 20px;
}

.woocommerce-cart table.cart .product-remove a:hover {
  color: #000;
  background: none;
}

/* Hide single-item price column (keep only subtotal/Gesamtsumme) */
.woocommerce-cart table.cart .product-price {
  display: none;
}
.woocommerce-cart table.cart th:nth-child(4) {
  display: none;
}

.woocommerce-cart .coupon .input-text {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 0;
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
}

.woocommerce-cart .coupon .button,
.woocommerce-cart button[name="update_cart"] {
  border: 1px solid #000;
  background: transparent;
  color: #000;
  border-radius: 0;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
  padding: 10px 24px;
  text-transform: none;
  transition: all 0.3s;
}

.woocommerce-cart .coupon .button:hover,
.woocommerce-cart button[name="update_cart"]:hover {
  background: #000;
  color: #fff;
}

.woocommerce-cart .cart_totals {
  float: none;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
}

.woocommerce-cart .cart_totals h2 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 16px;
}

.woocommerce-cart .cart_totals table {
  border: 1px solid rgba(0,0,0,0.08);
}

.woocommerce-cart .cart_totals table th {
  font-weight: 400;
  font-size: 14px;
}

.woocommerce-cart .cart_totals table td {
  font-weight: 300;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  padding: 14px 24px;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  text-transform: none;
  text-align: center;
  transition: all 0.3s;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  background: transparent;
  color: #000;
}

/* ============================================
   CHECKOUT PAGE
   ============================================ */

.woocommerce-checkout .woocommerce {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
}

.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

.woocommerce-checkout .col2-set {
  padding: 40px 60px 40px 0;
}

/* Bestellung eingegangen: Rechnungs-/Lieferadresse. WooCommerce legt diese
   Spalten standardmässig per float mit fester Breite an — bei schmaleren
   Layouts wird jede Spalte so eng, dass ein langes Wort wie
   "Rechnungsadresse" nicht mehr hineinpasst, nicht umbricht und über die
   Nachbarspalte hinausläuft. Flex mit wrap lässt die Spalten bei wenig
   Platz stattdessen untereinander stehen; word-break sichert zusätzlich
   ab, falls eine Spalte trotzdem mal schmaler wird als der Titeltext. */
.woocommerce-order-received .woocommerce-columns--addresses {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column {
  flex: 1 1 240px;
  float: none;
  width: auto;
}

.woocommerce-order-received .woocommerce-column__title {
  font-size: 20px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Mein Konto → Adressen: same overlap bug, different WooCommerce markup
   (.woocommerce-Addresses/.woocommerce-Address instead of
   .woocommerce-columns--addresses/.woocommerce-column, <h2> instead of
   .woocommerce-column__title) — confirmed live, same fix. */
.woocommerce-account .woocommerce-Addresses {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
  flex: 1 1 240px;
  float: none;
  width: auto;
}

.woocommerce-account .woocommerce-Address-title h2 {
  font-size: 20px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Mein Konto → Bestellungen: the orders table has no responsive handling
   at all and overflows the viewport on mobile — confirmed live. A
   horizontal-scroll wrapper is the minimal, non-disruptive fix (keeps the
   real table instead of reflowing it into a stacked/card view). */
.woocommerce-account .woocommerce-MyAccount-orders {
  display: block;
  overflow-x: auto;
}

.woocommerce-checkout #order_review_heading {
  display: none;
}

.woocommerce-checkout #order_review {
  background: #000;
  color: #fff;
  padding: 40px;
}

/* Checkout form styles */
.woocommerce-checkout .form-row {
  margin-bottom: 16px;
}

.woocommerce-checkout .form-row label {
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 6px;
  display: block;
  color: rgba(0,0,0,0.6);
}

.woocommerce-checkout .form-row .required {
  color: rgba(0,0,0,0.3);
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
  background: #fff;
  transition: border-color 0.2s;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: #000;
  outline: none;
}

.woocommerce-checkout .form-row select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
  padding-right: 36px;
}

/* Checkout section headings */
.woocommerce-checkout h3 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
}

/* Order review on dark bg */
.woocommerce-checkout #order_review .shop_table {
  border: none;
  color: #fff;
}

.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
  border-color: rgba(255,255,255,0.15);
  padding: 16px 0;
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  vertical-align: middle;
}

.woocommerce-checkout #order_review .shop_table th {
  font-weight: 400;
}

.woocommerce-checkout #order_review .shop_table tfoot .order-total td {
  font-size: 18px;
  font-weight: 500;
}

/* Payment section */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
  color: #fff;
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding: 16px 0;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  color: #fff;
  font-weight: 300;
}

.woocommerce-checkout #payment div.place-order {
  padding: 20px 0 0;
}

.woocommerce-checkout #payment #place_order {
  width: 100%;
  padding: 14px 24px;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  border-radius: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
  transition: all 0.3s;
}

.woocommerce-checkout #payment #place_order:hover {
  background: rgba(255,255,255,0.9);
}

/* Coupon in order review */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin-bottom: 20px;
}

.woocommerce-checkout .checkout_coupon {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 0;
  padding: 20px;
}

/* ============================================
   MY ACCOUNT PAGE
   ============================================ */

.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: 100%;
  margin-bottom: 32px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  flex-wrap: wrap;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 300;
  color: rgba(0,0,0,0.5);
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: #000;
  border-bottom-color: #000;
}

.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
}

/* ============================================
   NOTICES
   ============================================ */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  padding: 16px 20px;
  margin-bottom: 24px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 300;
  border-top: 2px solid #000;
}

.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
  border: 1px solid #000;
  background: transparent;
  color: #000;
  border-radius: 0;
  font-size: 13px;
  font-weight: 300;
  padding: 6px 16px;
  text-transform: none;
}

.woocommerce .woocommerce-message .button:hover,
.woocommerce .woocommerce-info .button:hover {
  background: #000;
  color: #fff;
}

/* ============================================
   SEARCH OVERLAY
   ============================================ */

.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.98);
  z-index: 9997;
  display: flex;
  align-items: flex-start;
  padding-top: 120px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.search-overlay__inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-overlay__form {
  flex: 1;
}

.search-overlay__input {
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  padding: 16px 0;
  font-family: var(--font);
  font-size: 28px;
  font-weight: 300;
  background: transparent;
  outline: none;
}

.search-overlay__close {
  background: none;
  border: none;
  font-size: 32px;
  color: #000;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.search-overlay__close:hover {
  opacity: 1;
}

/* ============================================
   SCROLL TO TOP
   ============================================ */

.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: rgba(0,0,0,0.8);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    /* Row-gap +30% (20px -> 26px), column-gap unchanged — see the base
       (non-media) rule above for why this file's value wins over
       style.css's equivalent-specificity, later-overridden one. */
    gap: 26px 20px;
  }

  .woocommerce-checkout .woocommerce {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout .col2-set {
    padding: 24px 0;
  }

  .woocommerce-checkout #order_review {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    /* Row-gap +30% (16px -> 20.8px), column-gap unchanged — see the base
       (non-media) rule above for why this file's value wins over
       style.css's equivalent-specificity, later-overridden one. */
    gap: 20.8px 16px;
  }

  .cart-drawer {
    width: 100%;
  }

  /* Category filter row (see l6_render_shop_category_filter()): only
     hidden on the product detail page, not the shop page — scoped via
     body.is-product-page since the filter sits before
     .single-product-layout as a sibling, not inside it. */
  body.is-product-page .shop-category-filter {
    display: none;
  }

  /* Single product gallery, mobile: full-bleed image directly under the
     header, no thumbnail strip, no arrows — swipe + the progress bar
     (below) are the only navigation. */
  .single-product-layout .woocommerce-product-gallery {
    padding-left: 0;
  }

  .single-product-layout .woocommerce-product-gallery .flex-control-thumbs {
    display: none;
  }

  .single-product-layout {
    padding-top: 0;
  }

  .single-product-layout .product-gallery {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* WooCommerce core ships ".woocommerce div.product div.images
     { margin-bottom: 2em }" (32px) — the gap this leaves between the
     image and the progress bar right below it. Reduced to ~20% of
     that (6px); !important is needed to beat WC core's specificity,
     same pattern as elsewhere in this file. */
  .single-product-layout .woocommerce-product-gallery {
    margin-bottom: 6px !important;
  }

  .woocommerce-cart table.cart .product-thumbnail {
    display: table-cell;
  }

  .woocommerce-cart table.cart .product-thumbnail img {
    width: 80px;
    height: 80px;
  }

  /* Hide product-price on mobile too */
  .woocommerce-cart table.cart .product-price {
    display: none;
  }

  .woocommerce-cart .cart_totals {
    max-width: 100%;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: column;
    border-bottom: none;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  .l6-customize-btn {
    font-size: 15px;
    padding: 0 20px;
    height: 46px;
  }

  .search-overlay__input {
    font-size: 20px;
  }

  .scroll-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 9px;
  }
}

/* ============================================
   HOMEPAGE: "Unsere Regale" product section
   ============================================ */

.front-page .woocommerce ul.products,
.entry-content--front-page .woocommerce ul.products {
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 100%;
}

.front-page .woocommerce ul.products li.product,
.entry-content--front-page .woocommerce ul.products li.product {
  width: auto;
}

.front-page .woocommerce,
.entry-content--front-page .woocommerce {
  max-width: 100%;
  padding: 0;
}

/* Full-width product section on front page */
.front-page .wp-block-woocommerce-product-new,
.front-page .wp-block-woocommerce-handpicked-products,
.front-page .wp-block-woocommerce-product-best-sellers,
.front-page .wc-block-grid,
.entry-content--front-page .wp-block-woocommerce-product-new,
.entry-content--front-page .wp-block-woocommerce-handpicked-products,
.entry-content--front-page .wc-block-grid {
  max-width: 100%;
  padding-left: 40px;
  padding-right: 40px;
}

/* Shortcode-based products on front page */
.front-page .woocommerce.columns-3,
.front-page .woocommerce.columns-4,
.entry-content--front-page .woocommerce.columns-3,
.entry-content--front-page .woocommerce.columns-4 {
  max-width: 100%;
}

/* ============================================
   CART/CHECKOUT: L6 config thumbnails
   ============================================ */

/* Hide the l6_thumb metadata text (URL) everywhere */
.cart-drawer__item-meta dt:empty + dd,
.cart-drawer__item-meta .l6-thumb-hidden,
.woocommerce-checkout .shop_table .l6-thumb-hidden {
  display: none !important;
}

/* L6 config thumbnail in cart items */
.l6-cart-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f2f0ed;
  display: block;
  cursor: pointer;
}

/* Checkout order review: product images */
.woocommerce-checkout #order_review .shop_table .product-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

.woocommerce-checkout #order_review .l6-checkout-thumb {
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: #f2f0ed;
  flex-shrink: 0;
  border-radius: 4px;
}

/* Hide raw l6_thumb URL text in item data */
.wc-block-components-product-details li:has(.wc-block-components-product-details__name) {
  display: none;
}

/* ============================================
   CART DRAWER: L6 thumbnail styling
   ============================================ */

.cart-drawer__item-image .l6-cart-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f2f0ed;
}

/* ============================================
   BEARBEITEN LINK: Bold in all cart contexts
   ============================================ */

.l6-cart-edit-btn {
  font-weight: 600 !important;
  color: #000 !important;
  text-decoration: none !important;
}

.l6-cart-edit-btn:hover {
  text-decoration: underline !important;
}

/* ============================================
   CHECKOUT ORDER REVIEW: Thumbnails
   ============================================ */

/* Product name cell: flex row with thumbnail + text */
.woocommerce-checkout #order_review .shop_table td.product-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

.woocommerce-checkout .l6-checkout-thumb {
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
  border-radius: 4px;
}

.woocommerce-checkout .l6-checkout-thumb-wrap img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

.woocommerce-checkout .l6-checkout-product-name {
  flex: 1;
  min-width: 0;
}

/* Order review: better text wrapping */
.woocommerce-checkout #order_review .shop_table td {
  word-break: normal;
  overflow-wrap: break-word;
}

/* ============================================
   CART PAGE: Quantity input (editable)
   ============================================ */

.woocommerce-cart table.cart .product-quantity .qty {
  width: 60px;
  height: 40px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 0;
  text-align: center;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
  -moz-appearance: textfield;
}

.woocommerce-cart table.cart .product-quantity .qty::-webkit-inner-spin-button,
.woocommerce-cart table.cart .product-quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================
   WOOCOMMERCE "COMING SOON" PAGE (v1.3.11, color fix v1.3.12)
   ============================================
   WooCommerce's own visual editor for this page (WooCommerce > Einstellungen
   > Sichtbarkeit der Website > "Demnächst verfügbar" > "Editor"-Link) only
   appears for block themes with full-site editing — confirmed against
   WooCommerce's own documentation, which explicitly limits that link to
   block themes and doesn't cover classic themes like this one. The link
   never appears here, so the page can't be edited visually; these are
   plain CSS overrides on WooCommerce's own stable block classes instead.

   The heading/subheading were resolving to a near-white color meant for a
   dark cover-photo background that was never actually configured, showing
   almost invisibly against the page's white background.

   v1.3.12: the color rule above alone (0,1,0 specificity) was still losing
   to this theme's own style.css rule for cover-block headings —
   ".wp-block-cover .wp-block-cover__inner-container h1" etc. (0,2,1),
   written for the site's OTHER covers that DO have a photo background
   and need white text. Confirmed live via getComputedStyle() /
   document.styleSheets — that rule, not this one, was the one actually
   applying. !important on this narrower, coming-soon-specific selector is
   the intentional fix, rather than inflating this selector's own ancestor
   chain to out-specificity a rule that lives in a different, unrelated
   file and could change shape independently. */
.woocommerce-coming-soon-banner,
.woocommerce-coming-soon-banner-container .wp-block-paragraph {
  color: #000000 !important;
}

/* Plain-text site title next to the logo — redundant with the logo image,
   which already shows the wordmark. */
.woocommerce-coming-soon-header-logo-title .wp-block-site-title {
  display: none;
}

/* Social links row. */
.woocommerce-coming-soon-powered-by-woo {
  display: none;
}

/* ============================================
   ORDER CONFIRMATION — HEADING SIZE PICKER FIX
   ============================================ */

/* v1.3.25: the "Bestellstatus" block's own Schriftgrösse control (in the
   Site Editor sidebar) sets a has-{size}-font-size utility class on the
   block's OWN wrapper, relying on the heading inheriting that font-size
   from its parent — confirmed live: clicking a size there DOES add the
   class, but the heading's own displayed size never changes. Root cause:
   theme.json sets styles.elements.h1 { fontSize: 3.75rem } as a rule
   that directly targets every plain <h1>, and a rule that directly
   matches an element always wins over that element inheriting a value
   from its parent, regardless of the parent rule's own specificity — so
   this global h1 default was silently overriding the picker every time.
   Fix: make the heading explicitly inherit from its sized wrapper,
   for each of the 5 size classes the picker can set (see theme.json's
   settings.typography.fontSizes for the slugs) — a compound
   class+descendant selector like this beats theme.json's bare "h1". */
.wc-block-order-confirmation-status.has-small-font-size h1,
.wc-block-order-confirmation-status.has-medium-font-size h1,
.wc-block-order-confirmation-status.has-large-font-size h1,
.wc-block-order-confirmation-status.has-x-large-font-size h1,
.wc-block-order-confirmation-status.has-xx-large-font-size h1 {
  font-size: inherit;
}