/*======================================
 Theme Name:   storefront-wormatia
 Description:  Wormatia Worms Shop
 Author:       Wormatia Worms
 Author URI:   mailto:webmaster@wormatia.de
 Template:     storefront
 Version:      3.0
 Text Domain:  Wormatia
======================================*/

/* ===========================================
   CSS CUSTOM PROPERTIES (Wormatia Brand)
   Colors sourced from liveticker.wormatia.de
   =========================================== */
:root {
  --wormatia-red:          #e2001a;
  --wormatia-red-dark:     #b8001a;
  --wormatia-red-hover:    #c0001a;
  --wormatia-red-light:    #fde8eb;
  /* Liveticker header gradient: dark maroon → near-black */
  --wormatia-header-top:   rgba(88, 14, 21, 0.98);
  --wormatia-header-bot:   rgba(23, 23, 23, 0.98);
  --wormatia-header-grad:  linear-gradient(var(--wormatia-header-top), var(--wormatia-header-bot));
  --wormatia-bg:           #f0f2f5;
  --wormatia-card-bg:      #ffffff;
  --wormatia-text:         #212529;
  --wormatia-heading:      #17212f;
  --wormatia-muted:        #6c757d;
  --wormatia-border:       rgba(0, 0, 0, 0.1);
  --wormatia-shadow-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --wormatia-shadow:       0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --wormatia-radius:       10px;
  --wormatia-radius-sm:    6px;
}

/* ===========================================
   BODY & LAYOUT
   =========================================== */
body {
  background-color: var(--wormatia-bg) !important;
  color: var(--wormatia-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===========================================
   HEADER
   =========================================== */
.site-header {
  background: var(--wormatia-header-grad) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.site-header a,
.site-header .site-title,
.site-header .site-title a,
.site-header .site-description {
  color: #ffffff !important;
}

.site-branding .site-title a:hover,
.site-branding .site-title a:focus {
  color: rgba(255,255,255,.85) !important;
}

/* Upper header col-full is now empty (branding + search moved to nav bar).
   Collapse it to zero so only the nav bar is visible. */
.site-header > .col-full {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* Nav bar: single flex row — Logo | Nav | Search | Cart
   Apply the full gradient here since this is now the only visible header section. */
.storefront-primary-navigation,
.site-header .storefront-primary-navigation {
  background: var(--wormatia-header-grad) !important;
  overflow: visible !important;
}

.storefront-primary-navigation .col-full {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Kill the clearfix pseudo-elements — they become ghost flex items and push cart off-screen */
.storefront-primary-navigation .col-full::before,
.storefront-primary-navigation .col-full::after {
  display: none !important;
}

/* Logo — left-most, sized to content only.
   Overrides Storefront's .storefront-secondary-navigation.woocommerce-active
   .site-header .site-branding { width: 21.7% } (specificity 0,4,0). */
.storefront-primary-navigation .site-branding {
  flex: 0 0 auto !important;
  width: fit-content !important;
  float: none !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  line-height: 0;
}

/* Nav — flex item of .col-full at all sizes */
.storefront-primary-navigation .main-navigation {
  flex: 1 1 auto;
  float: none !important;
  clear: none !important;
  width: auto !important;
}

/* ── Desktop: horizontal nav, hide toggle ── */
@media (min-width: 768px) {
  .storefront-primary-navigation .main-navigation .primary-navigation {
    display: block !important;
  }

  .storefront-primary-navigation .main-navigation .primary-navigation > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .storefront-primary-navigation .main-navigation .primary-navigation > ul > li {
    float: none !important;
    display: flex !important;
    align-items: center;
    white-space: nowrap;
  }

  .storefront-primary-navigation .main-navigation .handheld-navigation,
  .storefront-primary-navigation .menu-toggle {
    display: none !important;
  }
}

/* ── Mobile: show toggle, reveal primary nav when toggled ── */
@media (max-width: 767px) {
  .storefront-primary-navigation .menu-toggle {
    display: block !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.4) !important;
    color: #ffffff !important;
    margin-left: auto;
  }

  .storefront-primary-navigation .main-navigation.toggled .primary-navigation {
    display: block !important;
  }

  .storefront-primary-navigation .main-navigation .primary-navigation > ul {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Search — fixed width, no bottom margin, gap before it */
.storefront-primary-navigation .site-search {
  flex-shrink: 0;
  width: 220px;
  margin-bottom: 0 !important;
  margin-left: 1rem;
}

/* Cart — fixed, no bottom margin; overflow visible so popover isn't clipped */
.storefront-primary-navigation .site-header-cart {
  flex-shrink: 0;
  margin-bottom: 0 !important;
  margin-left: 1rem;
  overflow: visible !important;
  position: relative !important;
}

.main-navigation a,
.main-navigation ul li a {
  color: rgba(255,255,255,.92) !important;
  font-weight: 600;
  transition: color .15s ease, background-color .15s ease;
}

.main-navigation li:hover > a,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a,
.main-navigation li.current-menu-ancestor > a {
  color: #ffffff !important;
  background-color: rgba(0,0,0,.18) !important;
}

.main-navigation ul ul {
  background-color: var(--wormatia-red-dark) !important;
  border-top: 2px solid rgba(255,255,255,.2);
  border-radius: 0 0 var(--wormatia-radius-sm) var(--wormatia-radius-sm);
  box-shadow: var(--wormatia-shadow);
}

.main-navigation ul ul li a {
  color: rgba(255,255,255,.9) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ===========================================
   HEADER CART
   =========================================== */
.site-header .site-header-cart {
  background: transparent !important;
  color: #ffffff !important;
  z-index: 998;
}

/* White text only on the header bar itself, NOT inside the dropdown popup */
.site-header .site-header-cart .cart-contents,
.site-header .site-header-cart .cart-contents .amount {
  color: #ffffff !important;
}

/* Cart dropdown popup — restore dark text on white background */
.site-header .site-header-cart .widget_shopping_cart,
.site-header .site-header-cart .widget_shopping_cart * {
  color: var(--wormatia-text) !important;
}

.site-header .site-header-cart .widget_shopping_cart a:not(.button) {
  color: var(--wormatia-red) !important;
}

.site-header .site-header-cart .widget_shopping_cart a:not(.button):hover {
  color: var(--wormatia-red-dark) !important;
}

.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total,
.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total .amount {
  color: var(--wormatia-text) !important;
}

/* Mini cart buttons — stack vertically, full width, no overflow */
.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  box-shadow: none !important;
  transform: none !important;
  color: #ffffff !important;
  background-color: var(--wormatia-red) !important;
  border-color: var(--wormatia-red) !important;
}

/* "Warenkorb anzeigen" (view cart) — secondary/outline style */
.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout) {
  background-color: transparent !important;
  color: var(--wormatia-red) !important;
  border: 2px solid var(--wormatia-red) !important;
}

.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout):hover {
  background-color: var(--wormatia-red) !important;
  color: #ffffff !important;
}

/* Cart button — red pill */
.site-header-cart .cart-contents {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  position: relative;
  background: var(--wormatia-red) !important;
  border-radius: 30px !important;
  padding: 6px 14px !important;
  transition: background .2s ease, transform .15s ease;
  white-space: nowrap;
  color: #ffffff !important;
}

.site-header-cart .cart-contents:hover {
  background: var(--wormatia-red-dark) !important;
  transform: translateY(-1px);
}

/* Hide second cart icon added by parent theme/WooCommerce via ::after */
.site-header-cart .cart-contents::after {
  display: none !important;
}

/* Cart icon — inline with amount */
.site-header-cart .cart-contents::before {
  font-family: WooCommerce;
  content: "\e01d";
  font-size: 1.1em;
  line-height: 1;
  color: #ffffff !important;
  display: inline-block;
  vertical-align: middle;
}

/* Amount text */
.site-header-cart .cart-contents .amount {
  color: #ffffff !important;
  font-size: 0.9em;
  font-weight: 700;
}

/* Item count badge — hidden */
.site-header-cart .cart-contents .count {
  display: none !important;
}

/* Cart popover — fixed width, right-aligned on hover so it stays in viewport.
   Leave the non-hover left:-999em from Storefront intact (hides it off-screen).
   Override left:0 only on hover with right:0 so it opens from the right edge. */
.site-header-cart {
  position: relative !important;
}

.site-header-cart .widget_shopping_cart {
  width: 300px !important;
}

.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.focus .widget_shopping_cart {
  left: auto !important;
  right: 0 !important;
}

/* Logo size */
.site-header .custom-logo-link img,
.site-header .site-logo-link img,
.site-header .site-logo-anchor img {
  max-height: 60px;
  width: auto;
  display: block;
}

/* Search */
.site-header .site-search {
  align-self: center;
  margin-bottom: 0 !important;
}

/* Strip WooCommerce widget wrapper styling inside the nav bar */
.storefront-primary-navigation .site-search .widget {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.site-header .site-search button[type="submit"] {
  padding: 0;
  width: 38px;
  text-align: center;
  height: 32px;
  line-height: 32px;
  border-radius: 0 var(--wormatia-radius-sm) var(--wormatia-radius-sm) 0;
  background-color: var(--wormatia-red-dark) !important;
  color: #ffffff;
  font-size: 16px;
  border: none;
  flex-shrink: 0;
  transition: background-color .2s ease;
}

.site-header .site-search button[type="submit"]:hover {
  background-color: var(--wormatia-heading) !important;
}

/* Wrap the whole search bar in a white rounded pill */
.site-header .site-search form {
  background: #ffffff;
  border-radius: var(--wormatia-radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.site-header .site-search input[type="text"],
.site-header .site-search input[type="search"] {
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  height: 32px !important;
  padding: 0 8px !important;
  font-size: 0.875rem;
}

/* ===========================================
   PRIMARY COLOR: replace orange (#ff6600) with Wormatia red
   =========================================== */

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
  background-color: var(--wormatia-red) !important;
  color: #ffffff !important;
  border-color: var(--wormatia-red) !important;
  border-radius: var(--wormatia-radius-sm) !important;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background-color .2s ease, transform .1s ease, box-shadow .2s ease;
  box-shadow: 0 2px 4px rgba(226,0,26,.25);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
  background-color: var(--wormatia-red-dark) !important;
  color: #ffffff !important;
  border-color: var(--wormatia-red-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(226,0,26,.3);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Add to cart / primary CTA */
.woocommerce a.button.add_to_cart_button,
.woocommerce a.button.single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce input.button.alt {
  background-color: var(--wormatia-red) !important;
  border-color: var(--wormatia-red) !important;
}

.woocommerce a.button.add_to_cart_button:hover,
.woocommerce a.button.single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background-color: var(--wormatia-red-dark) !important;
  border-color: var(--wormatia-red-dark) !important;
}

/* "Warenkorb anzeigen" link shown after adding to cart in product lists —
   WooCommerce renders this as a.added_to_cart (no .button class), so the
   a:not(.button) red-text rule would cause red-on-red. Override here. */
.woocommerce a.added_to_cart,
.woocommerce-page a.added_to_cart {
  background-color: var(--wormatia-red) !important;
  color: #ffffff !important;
  border-color: var(--wormatia-red) !important;
}

.woocommerce a.added_to_cart:hover,
.woocommerce-page a.added_to_cart:hover {
  background-color: var(--wormatia-red-dark) !important;
  color: #ffffff !important;
  border-color: var(--wormatia-red-dark) !important;
}

/* Links */
a {
  color: var(--wormatia-red);
  transition: color .15s ease;
}

a:hover,
a:focus {
  color: var(--wormatia-red-dark);
}

.woocommerce a:not(.button),
.woocommerce-page a:not(.button) {
  color: var(--wormatia-red);
}

.woocommerce a:not(.button):hover,
.woocommerce-page a:not(.button):hover {
  color: var(--wormatia-red-dark);
}

/* Prices */
.woocommerce .price,
.woocommerce-page .price,
.woocommerce span.price,
.woocommerce ins .amount,
.woocommerce .woocommerce-Price-amount {
  color: var(--wormatia-red) !important;
}

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--wormatia-red);
}

/* ===========================================
   PRODUCT CARDS — modern card style
   =========================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--wormatia-card-bg);
  border-radius: var(--wormatia-radius);
  box-shadow: var(--wormatia-shadow-sm);
  border: 1px solid var(--wormatia-border);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
  padding: 0 0 1rem !important;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  box-shadow: var(--wormatia-shadow);
  transform: translateY(-3px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  color: var(--wormatia-heading) !important;
  font-weight: 700;
  padding: .75rem 1rem .25rem !important;
}

.woocommerce ul.products li.product img {
  border-radius: var(--wormatia-radius) var(--wormatia-radius) 0 0;
  margin-bottom: 0 !important;
}

.woocommerce ul.products li.product .price {
  padding: 0 1rem;
  font-size: 1.1em;
  font-weight: 700;
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
  margin: .5rem 1rem 0;
  width: calc(100% - 2rem);
  text-align: center;
}

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background-color: var(--wormatia-red) !important;
  color: #ffffff !important;
  border-radius: var(--wormatia-radius-sm);
  font-weight: 700;
  top: .75rem !important;
  left: .75rem !important;
  min-height: unset;
  line-height: 1.5;
  padding: .2em .6em;
}

/* Category cards */
ul.products li.product.product-category h2 .count,
ul.products li.product.product-category h3 .count,
ul.products li.product.product-category .woocommerce-loop-category__title .count {
  font-size: 0.7em;
  display: none;
}

/* ===========================================
   SINGLE PRODUCT PAGE
   =========================================== */
.woocommerce div.product {
  background: var(--wormatia-card-bg);
  border-radius: var(--wormatia-radius);
  box-shadow: var(--wormatia-shadow-sm);
  padding: 2rem;
  border: 1px solid var(--wormatia-border);
}

.woocommerce div.product .product_title {
  color: var(--wormatia-heading);
  font-weight: 800;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-top: 3px solid var(--wormatia-red) !important;
  color: var(--wormatia-red) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--wormatia-red) !important;
}

/* ===========================================
   CART & CHECKOUT
   =========================================== */
.woocommerce table.cart,
.woocommerce table.shop_table {
  border-radius: var(--wormatia-radius);
  overflow: hidden;
  box-shadow: var(--wormatia-shadow-sm);
  border: 1px solid var(--wormatia-border) !important;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--wormatia-card-bg);
  border-radius: var(--wormatia-radius);
  box-shadow: var(--wormatia-shadow-sm);
  padding: 1.5rem;
  border: 1px solid var(--wormatia-border);
}

/* Input fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border-radius: var(--wormatia-radius-sm) !important;
  border: 1px solid #ced4da !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--wormatia-red) !important;
  box-shadow: 0 0 0 3px rgba(226,0,26,.15) !important;
  outline: none;
}

/* ===========================================
   WIDGETS & SIDEBAR
   =========================================== */

/* Sidebar / content-area widgets — white card */
.content-area .widget,
.widget-area:not(.footer-widget-area) .widget,
.woocommerce .widget {
  background: var(--wormatia-card-bg);
  border-radius: var(--wormatia-radius);
  box-shadow: var(--wormatia-shadow-sm);
  border: 1px solid var(--wormatia-border);
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.content-area .widget-title,
.content-area .widgettitle,
.widget-area:not(.footer-widget-area) .widget-title,
.widget-area:not(.footer-widget-area) .widgettitle {
  color: var(--wormatia-heading) !important;
  font-weight: 700;
  border-bottom: 2px solid var(--wormatia-red) !important;
  padding-bottom: .5rem;
  margin-bottom: 1rem !important;
}

/* Footer widgets — make every layer transparent so the dark gradient
   from .site-footer shows through unobstructed */
.footer-widgets {
  background: transparent !important;
}

.site-footer .widget,
.site-footer .block,
.site-footer .footer-widgets,
.site-footer .woocommerce .widget {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.site-footer .widget {
  padding: 0 0 1.5rem !important;
}

/* All text in footer widgets — light on dark */
.site-footer .widget,
.site-footer .widget *,
.site-footer .widget a,
.site-footer .widget li,
.site-footer .widget p,
.site-footer .widget span,
.site-footer .widget label {
  color: rgba(255,255,255,.8) !important;
  background: transparent !important;
}

.site-footer .widget a:hover {
  color: #ffffff !important;
}

/* Footer widget titles — explicit white with red underline.
   Use element + class to beat .site-footer h2 { color:#555 }
   and .widget .widget-title { color:#555 } in parent theme. */
.site-footer .footer-widgets .widget-title,
.site-footer .footer-widgets .widgettitle,
.site-footer .footer-widgets h2.widget-title,
.site-footer .footer-widgets h3.widget-title,
.site-footer .footer-widgets h2.widgettitle,
.site-footer .footer-widgets h3.widgettitle {
  color: #ffffff !important;
  background: transparent !important;
  font-weight: 700;
  border-bottom: 2px solid var(--wormatia-red) !important;
  padding-bottom: .5rem;
  margin-bottom: 1rem !important;
}

/* Remove the grey ::before decoration bar — replaced by border-bottom above */
.site-footer .widget .widget-title::before,
.site-footer .widget .widgettitle::before {
  display: none !important;
}

/* Price filter */
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: #e9ecef;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--wormatia-red) !important;
}

/* Active filter chips */
.woocommerce .widget_layered_nav_filters ul li a::before {
  color: var(--wormatia-red);
}

/* ===========================================
   BREADCRUMB
   =========================================== */
.woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
  color: var(--wormatia-muted);
  font-size: .875rem;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--wormatia-red) !important;
}

/* ===========================================
   CHECKOUT ORDER REVIEW TABLE
   =========================================== */
/* WooCommerce Germanized moves this heading and floats it right — reset it */
#order_review_heading {
  float: none !important;
  width: 100% !important;
  text-align: center;
  margin-bottom: 1em;
}

/* Let the label column (left) take all available space;
   shrink the price column (right) to its content only */
table.shop_table.woocommerce-checkout-review-order-table th:last-child,
table.shop_table.woocommerce-checkout-review-order-table td:last-child {
  width: 1%;
  text-align: right;
  padding-left: 1.5em;
}

/* Hide thumbnail in the compact checkout summary — it wastes column space */
table.shop_table.woocommerce-checkout-review-order-table .wc-gzd-cart-item-thumbnail {
  display: none !important;
}

/* Name wrapper: reset flex so text flows naturally without a thumbnail flex item */
table.shop_table.woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper {
  display: block;
}

/* Product name cell: let it wrap normally */
table.shop_table.woocommerce-checkout-review-order-table td.product-name {
  white-space: normal;
  word-break: break-word;
}

/* Keep "× 1" quantity on one line — word-break would otherwise split it */
table.shop_table.woocommerce-checkout-review-order-table .product-quantity {
  white-space: nowrap;
}

/* Price cell in cart_item rows: shrink to content */
table.shop_table.woocommerce-checkout-review-order-table tr.cart_item td.product-total {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-left: 1.5em;
}

/* ===========================================
   NOTICES & MESSAGES
   =========================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--wormatia-radius-sm) !important;
  border-top-color: var(--wormatia-red) !important;
}

.woocommerce-message::before {
  color: var(--wormatia-red) !important;
}

/* Error notices: white text + white links for readability on the red background */
.woocommerce-error {
  color: #fff !important;
}

.woocommerce-error a,
.woocommerce-error strong {
  color: #fff !important;
  text-decoration: underline;
}

.woocommerce-error::before {
  color: #fff !important;
}

/* ===========================================
   FOOTER
   =========================================== */
.site-footer {
  background: linear-gradient(var(--wormatia-header-bot), #0d0d0d) !important;
  color: rgba(255,255,255,.8) !important;
  border-top: 3px solid var(--wormatia-red);
}

.site-footer a {
  color: rgba(255,255,255,.7) !important;
  transition: color .15s ease;
}

.site-footer a:hover {
  color: #ffffff !important;
}

/* ===========================================
   PAGINATION
   =========================================== */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: var(--wormatia-radius-sm) !important;
  margin: 0 2px;
}

.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--wormatia-red) !important;
  color: #ffffff !important;
  border-color: var(--wormatia-red) !important;
}

/* ===========================================
   CONTENT AREA — always full width, no sidebar
   =========================================== */
.content-area {
  width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===========================================
   CONTENT AREA (non-shop, non-homepage pages)
   =========================================== */
.page:not(.home):not(.page-template-tpl-page-homepage) .content-area .entry-content,
.single .content-area .entry-content,
.blog .content-area .entry-content {
  background: var(--wormatia-card-bg);
  border-radius: var(--wormatia-radius);
  box-shadow: var(--wormatia-shadow-sm);
  padding: 2rem;
  border: 1px solid var(--wormatia-border);
}

/* ===========================================
   HERO / FEATURE BANNER — readable text over images
   =========================================== */

/* Homepage latest articles */
.wormatia-latest-products {
  padding: 3rem 0 1rem;
}

.wormatia-section-heading {
  max-width: 42rem;
  margin-bottom: 1.75rem;
}

.wormatia-section-kicker {
  color: var(--wormatia-red);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.wormatia-section-heading .section-title {
  color: var(--wormatia-heading);
  margin-bottom: 0.5rem;
}

.wormatia-section-intro {
  color: var(--wormatia-muted);
  font-size: 1rem;
  margin: 0;
}

.wormatia-latest-products-grid .products {
  margin-bottom: 0;
}

.wormatia-section-empty {
  background: var(--wormatia-card-bg);
  border: 1px dashed var(--wormatia-border);
  border-radius: var(--wormatia-radius);
  color: var(--wormatia-muted);
  padding: 1.5rem;
}

.wormatia-section-empty p {
  margin: 0;
}

/* Homepage hero */
.home.page .content-area .entry-content {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.wormatia-homepage-hero {
  --wormatia-hero-overlay: linear-gradient(135deg, rgba(23, 33, 47, 0.82), rgba(23, 23, 23, 0.55));
  background-image: var(--wormatia-hero-overlay), var(--wormatia-hero-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 18px;
  margin: 0 auto 2.5rem;
  max-width: 1120px;
  min-height: 420px;
  overflow: hidden;
  position: relative;
}

.wormatia-homepage-hero__inner {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: flex-end;
  min-height: 420px;
  max-width: 38rem;
  padding: 3rem;
}

.wormatia-homepage-hero__kicker {
  color: rgba(255,255,255,.8);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin: 0;
  text-transform: uppercase;
}

.wormatia-homepage-hero__title {
  color: #ffffff;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 0;
  white-space: nowrap;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.wormatia-homepage-hero__text {
  color: rgba(255,255,255,.92);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.wormatia-homepage-hero__actions {
  padding-top: 0.5rem;
}

.wormatia-homepage-hero__button.button {
  box-shadow: 0 8px 24px rgba(226,0,26,.3);
  padding: 0.85rem 1.4rem;
}

/* Feature banner (used in homepage builder / slider) */
.feature-banner {
  position: relative;
}

.feature-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(23, 33, 47, 0.45);
  z-index: 0;
  pointer-events: none;
}

.feature-banner .banner-desc {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.feature-banner .banner-desc * {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* ===========================================
   RESPONSIVE TWEAKS
   =========================================== */
@media (max-width: 768px) {
  .wormatia-latest-products {
    padding-top: 2rem;
  }

  .wormatia-homepage-hero {
    border-radius: 14px;
    min-height: 320px;
  }

  .wormatia-homepage-hero__inner {
    min-height: 320px;
    padding: 2rem 1.5rem;
  }

  .woocommerce ul.products li.product:hover {
    transform: none;
    box-shadow: var(--wormatia-shadow-sm);
  }

  .woocommerce div.product {
    padding: 1rem;
  }

  /* Mobile nav drop-down background */
  .storefront-primary-navigation .main-navigation.toggled .primary-navigation {
    background: var(--wormatia-header-bot) !important;
  }

  .storefront-primary-navigation .main-navigation.toggled .primary-navigation a {
    color: rgba(255,255,255,.9) !important;
  }
}

/*
 * Fix: Storefront/WooCommerce icons.css references "Font Awesome 5 Free" throughout,
 * but only FA6 (loaded as "Font Awesome 6 Free") is available on the page.
 * Override font-family directly on all affected pseudo-elements.
 * FA6 uses the same Unicode codepoints as FA5 for solid/regular glyphs.
 */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
p.no-comments::before,
a.remove::before,
.woocommerce-breadcrumb a:first-of-type::before,
.woocommerce-breadcrumb .breadcrumb-separator::after,
.woocommerce-pagination .next::after,
.woocommerce-pagination .prev::after,
.wc-forward::after,
.woocommerce-Button--next::after,
.woocommerce-Button--previous::before,
.widget_search form:not(.wp-block-search)::before,
.widget_product_search form:not(.wp-block-search)::before,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before,
.woocommerce-MyAccount-navigation ul li a::before,
#payment .payment_methods > .woocommerce-PaymentMethod > label::before,
#payment .payment_methods > .wc_payment_method > label::before,
.storefront-handheld-footer-bar ul li > a::before,
.show-password-input::after {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

/* Links inside WooCommerce info/message boxes are white for legibility on the blue/green background */
.woocommerce-info a,
.woocommerce-message a {
  color: #fff !important;
  text-decoration: underline;
}