/*
Theme Name: shoptimizer Child
Theme URI: https://surekhaagroproducts.com/
Description: shoptimizer Child theme
Author: Kushal
Author URI: http://example.com
Template: shoptimizer
Version: 1.0.0
*/

/* ===== DESIGN TOKENS ===== */
:root {
  --sa-green: #2F5D3A;
  --sa-green-dark: #1F3F27;
  --sa-terracotta: #C97B4A;
  --sa-terracotta-dark: #B36A3D;
  --sa-cream: #FAF7F2;
  --sa-text: #1C2A22;
  --sa-muted: #5A6A60;
  --sa-border: #E8E2D8;
  --sa-sale: #C8553D;
  --sa-shadow: 0 2px 12px rgba(28, 42, 34, 0.06);
  --sa-shadow-hover: 0 8px 24px rgba(28, 42, 34, 0.12);
}

/* ===== BASE TYPOGRAPHY ===== */
body,
body.page,
body.home,
body.archive,
body.single,
body.woocommerce {
  font-family: 'Inter', sans-serif !important;
  color: var(--sa-text);
  background: var(--sa-cream);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4,
.entry-title,
.product_title,
.section-title,
.section-title h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-loop-product__title,
.product_title.entry-title {
  font-family: 'Fraunces', serif !important;
  color: var(--sa-green) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* ===== GLOBAL BUTTONS (page-level CTAs) ===== */
.button,
button:not(.menu-toggle):not(.dropdown-toggle):not(.sub-menu-toggle):not(.close-drawer):not(.drawer-close):not(.menu-close):not(.mobile-menu-close):not(.close),
input[type="submit"],
.wp-block-button__link,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button {
  background-color: var(--sa-terracotta) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 24px !important;
  padding: 12px 28px !important;
  border: none !important;
  transition: all 0.2s ease;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.button:hover,
.woocommerce a.button:hover,
.single_add_to_cart_button:hover {
  background-color: var(--sa-terracotta-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--sa-shadow-hover);
}

a {
  color: var(--sa-green);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--sa-terracotta);
}

/* ===== ANNOUNCEMENT BAR ===== */
.sa-announcement-bar {
  background: var(--sa-green);
  color: #ffffff;
  padding: 10px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 999;
}
.sa-announcement-bar a { color: #ffffff; text-decoration: underline; }
.sa-announcement-bar .sa-bar-divider { margin: 0 12px; opacity: 0.5; }
@media (max-width: 768px) {
    .sa-announcement-bar {
        font-size: 12px;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: center;
    }
    .sa-announcement-bar .sa-bar-divider { display: none; }
    .sa-announcement-bar .sa-bar-item {
        display: block;
        line-height: 1.4;
    }

    /* Force Shoptimizer mobile menu button visible */
    .site-branding button.menu-toggle {
        display: block !important;
        z-index: 100;
    }

    /* Mobile header: undo global button CTA styling on the hamburger/menu toggle */
    .site-header button.menu-toggle,
    .site-branding button.menu-toggle,
    .main-header button.menu-toggle,
    .mobile-header button.menu-toggle,
    button.menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--sa-text) !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        font-size: 24px !important;
        line-height: 1 !important;
        z-index: 1000 !important;
    }

    .site-header button.menu-toggle:hover,
    .site-header button.menu-toggle:focus,
    .site-branding button.menu-toggle:hover,
    .site-branding button.menu-toggle:focus,
    button.menu-toggle:hover,
    button.menu-toggle:focus {
        background: transparent !important;
        color: var(--sa-green-dark) !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .menu-toggle span,
    .menu-toggle::before,
    .menu-toggle::after,
    .menu-toggle .bar,
    .menu-toggle .icon-bar {
        background-color: var(--sa-text) !important;
        color: var(--sa-text) !important;
    }

    /* Draw a clean centered hamburger when Shoptimizer's default bars inherit odd offsets */
    .site-header button.menu-toggle,
    .site-branding button.menu-toggle,
    .main-header button.menu-toggle,
    .mobile-header button.menu-toggle,
    button.menu-toggle {
        position: relative !important;
        overflow: hidden !important;
        text-indent: -9999px !important;
    }

    .site-header button.menu-toggle::before,
    .site-branding button.menu-toggle::before,
    .main-header button.menu-toggle::before,
    .mobile-header button.menu-toggle::before,
    button.menu-toggle::before {
        content: "" !important;
        position: absolute !important;
        left: 10px !important;
        top: 13px !important;
        width: 24px !important;
        height: 2px !important;
        background: var(--sa-text) !important;
        border-radius: 2px !important;
        box-shadow: 0 8px 0 var(--sa-text), 0 16px 0 var(--sa-text) !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .site-header button.menu-toggle::after,
    .site-branding button.menu-toggle::after,
    .main-header button.menu-toggle::after,
    .mobile-header button.menu-toggle::after,
    button.menu-toggle::after,
    .site-header button.menu-toggle span,
    .site-branding button.menu-toggle span,
    .main-header button.menu-toggle span,
    .mobile-header button.menu-toggle span,
    button.menu-toggle span {
        display: none !important;
    }

    .menu-toggle svg,
    .menu-toggle svg path,
    .menu-toggle .svg-icon,
    .menu-toggle .icon {
        width: 26px !important;
        height: 26px !important;
        fill: var(--sa-text) !important;
        stroke: var(--sa-text) !important;
        color: var(--sa-text) !important;
    }

    /* Mobile header logo: keep it readable and centered */
    .site-header .site-branding,
    .main-header .site-branding,
    .mobile-header .site-branding {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 96px !important;
        padding: 0 8px !important;
    }

    .site-header .site-branding img,
    .site-header .custom-logo,
    .main-header .site-branding img,
    .mobile-header .site-branding img,
    img.custom-logo {
        display: block !important;
        width: 104px !important;
        max-width: 118px !important;
        max-height: 46px !important;
        height: auto !important;
        object-fit: contain !important;
        opacity: 1 !important;
        filter: none !important;
    }

    .site-header,
    .main-header,
    .mobile-header {
        position: relative !important;
        background: #ffffff !important;
        min-height: 56px !important;
        z-index: 10020 !important;
    }

    /* Final mobile header placement: menu left, logo center, cart right */
    .site-header .site-branding,
    .main-header .site-branding,
    .mobile-header .site-branding {
        position: static !important;
        width: 100% !important;
        min-height: 56px !important;
        padding: 0 58px !important;
    }

    .site-header button.menu-toggle,
    .site-branding button.menu-toggle,
    .main-header button.menu-toggle,
    .mobile-header button.menu-toggle,
    button.menu-toggle {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 10050 !important;
        pointer-events: auto !important;
    }

    .site-header .site-header-cart,
    .site-header .cart-contents,
    .main-header .site-header-cart,
    .main-header .cart-contents,
    .mobile-header .site-header-cart,
    .mobile-header .cart-contents {
        position: absolute !important;
        right: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Keep the opened mobile menu from sliding under the hamburger/header */
    .main-navigation.toggled,
    .main-navigation.toggled .primary-navigation,
    .mobile-menu,
    .mobile-navigation,
    .shoptimizer-mobile-menu,
    .site-header .menu,
    .main-header .menu {
        padding-top: 52px !important;
        z-index: 10010 !important;
    }

    .main-navigation.toggled ul.menu,
    .main-navigation.toggled .menu,
    .mobile-menu ul,
    .mobile-navigation ul,
    .shoptimizer-mobile-menu ul {
        margin-top: 0 !important;
        padding-top: 46px !important;
    }

    .main-navigation.toggled ul.menu > li:first-child,
    .main-navigation.toggled .menu > li:first-child,
    .mobile-menu ul > li:first-child,
    .mobile-navigation ul > li:first-child,
    .shoptimizer-mobile-menu ul > li:first-child {
        margin-top: 0 !important;
    }

    .main-navigation.toggled button.menu-toggle,
    .mobile-menu button.menu-toggle,
    .mobile-navigation button.menu-toggle,
    .shoptimizer-mobile-menu button.menu-toggle,
    body.menu-open button.menu-toggle {
        top: 28px !important;
        z-index: 10050 !important;
        pointer-events: auto !important;
    }

    .main-navigation.toggled::before,
    .mobile-menu::before,
    .mobile-navigation::before,
    .shoptimizer-mobile-menu::before {
        pointer-events: none !important;
    }

    /* Reset/hide Shoptimizer's extra drawer close control so no terracotta circle appears */
    .close-drawer,
    button.close-drawer,
    .drawer-close,
    button.drawer-close,
    .menu-close,
    button.menu-close,
    .mobile-menu-close,
    button.mobile-menu-close,
    .shoptimizer-mobile-menu .close,
    .mobile-navigation .close {
        display: none !important;
        background: transparent !important;
        color: var(--sa-text) !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* ===== PRODUCT CARDS — Shoptimizer-specific overrides ===== */

/* Hide the category clutter (real selector: .product__categories) */
.woocommerce ul.products li.product .product__categories,
.woocommerce-card__header .product__categories,
.product__categories {
  display: none !important;
}

/* Hide the pot-color swatch form on cards (Shoptimizer cgkit) */
.woocommerce ul.products li.product .cgkit-swatch-form,
.woocommerce ul.products li.product .cgkit-swatch-title,
.woocommerce ul.products li.product .quick-add-form,
.woocommerce ul.products li.product table.variations,
.woocommerce ul.products li.product .quantity {
  display: none !important;
}

/* Card container */
.woocommerce ul.products li.product {
  background: #ffffff;
  border-radius: 12px;
  padding: 12px !important;
  box-shadow: var(--sa-shadow);
  transition: all 0.3s ease;
  border: 1px solid var(--sa-border);
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--sa-shadow-hover);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product img {
  border-radius: 8px;
  margin-bottom: 12px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--sa-text) !important;
  font-weight: 600 !important;
  margin: 8px 0 6px !important;
  padding: 0 !important;
  font-family: 'Fraunces', serif !important;
}

.woocommerce ul.products li.product .price {
  color: var(--sa-text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  margin-top: 6px !important;
}

.woocommerce ul.products li.product .price del {
  color: var(--sa-muted) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  margin-right: 8px;
}

.woocommerce ul.products li.product .price ins {
  background: none !important;
  color: var(--sa-text) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Sale badge */
.woocommerce ul.products li.product .sale-item,
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background-color: var(--sa-sale) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.2 !important;
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  margin: 0 !important;
}

/* Card star rating */
.woocommerce ul.products li.product .star-rating {
  margin: 6px 0 !important;
  font-size: 12px !important;
}

/* ===== INPUT FIELDS ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  border: 1px solid var(--sa-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: 'Inter', sans-serif !important;
  background: #ffffff !important;
  color: var(--sa-text) !important;
  transition: border-color 0.2s ease;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--sa-green) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(47, 93, 58, 0.1) !important;
}