/*
 Theme Name:   ShopStore Child
 Theme URI:    https://example.com/
 Description:  Child theme for ShopStore
 Author:       Your Name
 Author URI:   https://example.com/
 Template:     shopstore
 Version:      1.1.1
*/

/* ============================
   Base tokens (easy theming)
============================ */
:root {
  --c-text-dark: #222;
  --c-bg-white: #fff;
  --c-focus: #0073aa;
  --c-focus-strong: #ff9800;
  /* Global price accent color used site wide */
  --c-price: #37BF91;
}

/* ============================
   1) Product meta visibility
============================ */
/* Hide product TAGS (keeps SKU, categories) */
.woocommerce .product .product_meta .tagged_as { display: none; }

/* ============================
   2) Category name in image boxes
============================ */
.imagebox .box-content .cat-name,
.imagebox .box-content .cat-name:after {
  display: none;
  content: none;
  border: 0;
}

/* Hide Woo product category list under product tiles */
.woocommerce ul.products li.product .cat-name,
.woocommerce ul.products li.product .posted_in,
.cat-name, .posted_in {
  display: none !important;
}

/* ============================
   3) Mega menu "hamburger" icon
============================ */
.btn-mega span,
.btn-mega span::before,
.btn-mega span::after { display: none; }

/* ============================
   4) Header / mini-cart prices
   (hide totals and amounts in header areas only)
============================ */
.header-cart .cart-contents .amount,
.header-cart .cart-contents .price,
.header-cart .cart-contents .woocommerce-Price-amount,
.header-cart .cart-contents .woocommerce-Price-currencySymbol,
.header-cart .cart-contents bdi,
.site-header .cart-contents .amount,
.site-header .cart-link .amount,
.topbar .cart-contents .amount,
.topbar-cart .amount,
.site-header-cart .amount,
.header-icons .cart-contents .amount,
.widget_shopping_cart .total,
.widget_shopping_cart .total .amount,
.woocommerce-mini-cart__total,
.woocommerce-mini-cart__total .amount,
.woocommerce-mini-cart .total,
.woocommerce-mini-cart .total .amount,
.header-cart .woocommerce-price-suffix,
.widget_shopping_cart .woocommerce-price-suffix,
.woocommerce-mini-cart .woocommerce-price-suffix,
.box-icon-cart .icon-cart .price {
  display: none;
  visibility: hidden;
}

/* Keep cart icon and count visible and clickable */
.header-cart,
.header-cart .cart-contents,
.header-cart .cart-contents > .count,
.header-cart .count,
.header-cart .icon,
.header-cart .cart-icon,
.site-header .cart-icon,
.site-header .cart-count,
.cart-contents .count,
.header-cart a,
.site-header .cart-contents,
.cart-contents {
  display: inline-block;
  visibility: visible;
}

/* Hide availability in mini cart only */
.widget_shopping_cart .stock,
.widget_shopping_cart .on-backorder,
.widget_shopping_cart .availability,
.woocommerce-mini-cart .stock,
.woocommerce-mini-cart .on-backorder,
.woocommerce-mini-cart .availability { display: none; }

/* ============================
   5) Header and dropdown menu
============================ */
.site-header,
.header,
#masthead,
.header-wrapper {
  overflow: visible;
  position: relative;
  z-index: 100;
}

.main-navigation { position: relative; z-index: 110; }

/* Always render submenus and hide visually */
.main-navigation .sub-menu,
.main-navigation .children,
.site-navigation .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--c-bg-white);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  padding: 10px 0;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

/* Show on hover or keyboard focus */
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu,
.main-navigation li:hover > .children,
.main-navigation li:focus-within > .children,
.site-navigation li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.main-navigation .sub-menu li,
.main-navigation .children li { position: relative; }

.main-navigation .sub-menu .sub-menu,
.main-navigation .children .children {
  top: 0;
  left: 100%;
}

/* ============================
   6) Mega menu
============================ */
#mega-menu { position: relative; z-index: 110; }

#mega-menu > ul.menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--c-bg-white);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  padding: 10px 12px;
  border-radius: 4px;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

#mega-menu:hover > ul.menu,
#mega-menu:focus-within > ul.menu,
#mega-menu.active > ul.menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#mega-menu ul.menu li { display: block; margin: 0; }

#mega-menu ul.menu li a,
#mega-menu ul.menu li .menu-title {
  display: block;
  padding: 10px 14px;
  color: var(--c-text-dark);
  background: var(--c-bg-white);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
  transition: background .2s ease;
}

#mega-menu ul.menu li a:hover { background: #f5f5f5; }

#mega-menu li.shopstore-cat-parent { position: relative; }
#mega-menu li.shopstore-cat-parent > ul.children {
  position: absolute; top: 0; left: 100%;
  min-width: 220px; padding: 6px 10px;
  background: var(--c-bg-white);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  z-index: 125;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
#mega-menu li.shopstore-cat-parent:hover > ul.children,
#mega-menu li.shopstore-cat-parent:focus-within > ul.children {
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* Ensure header image does not cover menus */
.header-image,
.hero-image,
.site-header .header-image { z-index: 1; }

/* ============================
   7) Mobile responsiveness
============================ */
@media (max-width: 900px) {
  #mega-menu > ul.menu,
  #mega-menu li.shopstore-cat-parent > ul.children,
  .main-navigation .sub-menu,
  .main-navigation .children {
    position: static;
    box-shadow: none;
    padding-left: 15px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (max-width: 480px) {
  .header-cart .icon { font-size: 18px; }
  .cart-contents .count { font-size: 12px; }
}

/* ============================
   8) EAEL product popup fixes
============================ */
.eael-product-popup form.cart.variations_form .variations td {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: .5rem;
}

.eael-product-popup form.cart .variations_button,
.eael-product-popup form.cart .single_variation_wrap,
.eael-product-popup form.cart .cart .variations_button {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.eael-product-popup form.cart .quantity,
.eael-product-popup .quantity {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  vertical-align: middle;
}

.eael-product-popup form.cart .quantity input.qty,
.eael-product-popup .quantity input[type="number"],
.eael-product-popup input.qty {
  box-sizing: border-box;
  width: 64px;
  max-width: 64px;
  min-width: 48px;
  padding: 6px 8px;
  font-size: 1rem;
  line-height: 1.1;
  text-align: center;
  height: auto;
}

.eael-product-popup form.cart .quantity .minus,
.eael-product-popup form.cart .quantity .plus,
.eael-product-popup .quantity .minus,
.eael-product-popup .quantity .plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
}

.eael-product-popup form.cart .single_add_to_cart_button,
.eael-product-popup form.cart .button,
.eael-product-popup form.cart .add_to_cart_button {
  display: inline-block;
  vertical-align: middle;
  margin-left: .6rem;
}

.eael-product-popup form.cart .variations td .quantity,
.eael-product-popup form.cart .variations td input.qty {
  width: auto;
  max-width: 64px;
}

@media (max-width: 480px) {
  .eael-product-popup form.cart .quantity input.qty,
  .eael-product-popup input.qty {
    min-width: 56px;
    max-width: 100px;
  }
  .eael-product-popup form.cart .variations_button { gap: .4rem; }
}

/* Hide SKU label site wide */
.product .sku,
.product_meta .sku,
.eael-product-popup .sku,
.woocommerce .product .sku { display: none; }

/* ============================
   9) Accessibility
============================ */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--c-focus-strong);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -999px; top: auto;
  width: 1px; height: 1px; overflow: hidden; z-index: 10000;
}
.skip-link:focus {
  left: 10px; top: 10px; width: auto; height: auto;
  background: var(--c-focus); color: #fff; padding: 8px 12px;
  text-decoration: none; font-weight: 700; border-radius: 4px;
}

/* Smooth scrolling (respect reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================
   10) Footer helpers (scoped)
============================ */
.site-footer .footer-highlight { color: #fff; }
.site-footer .footer-link { color: #fff; text-decoration: none; }
.site-footer .footer-link:hover { text-decoration: underline; }

/* ============================
   11) A11y: Contrast for prices and CTA
   Uses global token for color so it is consistent
============================ */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price .amount bdi,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi {
  color: var(--c-price) !important;
}

/* Ensure "Load more" is high contrast and focusable */
button.eael-load-more-button,
#eael-load-more-btn,
#eael-load-more-btn-60d76f6 {
  background: #1d242a;
  color: #fff;
  border: 0;
  padding: 12px 18px;
  border-radius: 4px;
}
button.eael-load-more-button:focus-visible {
  outline: 3px solid var(--c-focus-strong);
  outline-offset: 2px;
}

/* ============================
   12) A11y: Touch target sizing
============================ */
.sowb-button.ow-button-hover,
a.sowb-button.ow-button-hover,
a.js-dgwt-wcas-enable-mobile-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  line-height: 1.2;
  padding: 10px 14px;
}

/* Provide extra hit slop for icon-only controls */
a.js-dgwt-wcas-enable-mobile-form {
  position: relative;
}
a.js-dgwt-wcas-enable-mobile-form::after {
  content: "";
  position: absolute;
  inset: -6px;
}

/* ============================
   13) Homepage only tweaks
============================ */
/* Hide duplicate "chain/link" action inside Elementor/EAEL product widgets on home */
body.home .eael-product-grid .icons-wrap a:has(.fa-link),
body.home .eael-product-grid .icons-wrap a:has(.fas.fa-link),
body.home .eael-product-grid .icons-wrap a:has(.far.fa-link) { display: none !important; }
body.home .eael-product-grid .icons-wrap a[aria-label*="link" i],
body.home .eael-product-grid .icons-wrap a[title*="link" i] { display: none !important; }
body.home .elementor-widget .product .icons-wrap a:has(.fa-link),
body.home .elementor-widget .product .icons a:has(.fa-link) { display: none !important; }
/* Fallback for icon only */
body.home .eael-product-grid .icons-wrap a i.fa-link,
body.home .elementor .product .icons i.fa-link { display: none !important; }

/* Smooth fade/slide for the action row (hover popup) */
body.home .eael-product-grid .eael-product-wrap .icons-wrap,
body.home .elementor .product .icons-wrap {
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  will-change: opacity, transform;
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
}
body.home .eael-product-grid .eael-product-wrap:hover .icons-wrap,
body.home .eael-product-grid .eael-product-wrap:focus-within .icons-wrap,
body.home .elementor .product:hover .icons-wrap,
body.home .elementor .product:focus-within .icons-wrap {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* Replace the tick with a pill "Open" button (visual only) */
body.home .eael-product-grid .icons-wrap a i.fa-check,
body.home .eael-product-grid .icons-wrap a i.fas.fa-check,
body.home .eael-product-grid .icons-wrap a i.far.fa-check,
body.home .elementor .product .icons a i.fa-check,
body.home .elementor .product .icons a i.fas.fa-check,
body.home .elementor .product .icons a i.far.fa-check {
  display: none !important;
}

/* Style the same link as a button and inject label */
body.home .eael-product-grid .icons-wrap a:has(i.fa-check),
body.home .eael-product-grid .icons-wrap a:has(i.fas.fa-check),
body.home .eael-product-grid .icons-wrap a:has(i.far.fa-check),
body.home .elementor .product .icons a:has(i.fa-check),
body.home .elementor .product .icons a:has(i.fas.fa-check),
body.home .elementor .product .icons a:has(i.far.fa-check) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  min-height: 40px;
  border-radius: 999px;
  background: #1d242a;
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.1;
  border: 0;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease, background .12s ease;
}

/* Visible text label */
body.home .eael-product-grid .icons-wrap a:has(i.fa-check)::before,
body.home .eael-product-grid .icons-wrap a:has(i.fas.fa-check)::before,
body.home .eael-product-grid .icons-wrap a:has(i.far.fa-check)::before,
body.home .elementor .product .icons a:has(i.fa-check)::before,
body.home .elementor .product .icons a:has(i.fas.fa-check)::before,
body.home .elementor .product .icons a:has(i.far.fa-check)::before {
  content: "Open";
}

/* Hover and focus */
body.home .eael-product-grid .icons-wrap a:has(i.fa-check):hover,
body.home .elementor .product .icons a:has(i.fa-check):hover {
  opacity: .92;
  transform: translateY(-1px);
}
body.home .eael-product-grid .icons-wrap a:has(i.fa-check):focus-visible,
body.home .elementor .product .icons a:has(i.fa-check):focus-visible {
  outline: 3px solid var(--c-focus-strong);
  outline-offset: 2px;
}

/* Tidy spacing after removing chain */
body.home .eael-product-grid .icons-wrap { gap: .5rem; }

/* ============================
   14) Final price overrides
============================ */

/* Single product variable price block container */
.woocommerce div.product .summary .price.shopstore_variable_price {
  display: block;
}

/* Main amount inside the variable price block */
.woocommerce div.product .summary .price.shopstore_variable_price .woocommerce-Price-amount {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.5px;
  /* Color comes from global token via Section 11 */
}

/* Optional: suffix text, for example (GST exclusive - $12.50) */
.woocommerce div.product .summary .price.shopstore_variable_price .woocommerce-price-suffix,
.woocommerce div.product .summary .price.shopstore_variable_price small {
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 500;
}

/* Tidy currency symbol spacing */
.woocommerce div.product .summary .price.shopstore_variable_price .woocommerce-Price-currencySymbol {
  margin-right: 0.1em;
}
/* Hide the entire SKU line (removes "SKU: ..." everywhere on product pages) */
.woocommerce div.product .product_meta .sku_wrapper,
.eael-product-popup .product_meta .sku_wrapper {
  display: none !important;
}