/**
 * Theme Name:  Astra Child
 * Theme URI:   https://wpastra.com/
 * Description: Astra child theme for "grnstore" — Modern Eco rebrand (recycle / upcycle store).
 * Author:      grnstore
 * Template:    astra
 * Version:     2.7.2
 * Text Domain: astra-child
 */

/* =========================================================================
   grnstore — "Modern Eco" palette
   -------------------------------------------------------------------------
   Forest  #1E5631   Lime    #8BC34A   Ink     #14281D
   Text    #3A4A40   Paper   #FFFFFF   Tint    #EAF3E5
   Hover-d #173f24 (forest darker)     Lime-d  #79ad3c
   ========================================================================= */

:root {
	--eco-forest:    #1E5631;
	--eco-forest-d:  #173f24;
	--eco-lime:      #8BC34A;
	--eco-lime-d:    #79ad3c;
	--eco-ink:       #14281D;
	--eco-text:      #3A4A40;
	--eco-paper:     #FFFFFF;
	--eco-tint:      #EAF3E5;
}

/* =========================================================================
   1. Astra global palette override
   These variables are printed by Astra on :root and consumed across the
   theme (links, buttons, headings, header, footer, WooCommerce). Remapping
   them rebrands the whole Astra-rendered site in one place.
   ========================================================================= */

:root {
	--ast-global-color-0: var(--eco-forest);   /* Theme / Primary   */
	--ast-global-color-1: var(--eco-lime);     /* Link hover        */
	--ast-global-color-2: var(--eco-ink);      /* Headings          */
	--ast-global-color-3: var(--eco-text);     /* Body text         */
	--ast-global-color-4: var(--eco-paper);    /* Background        */
	--ast-global-color-6: var(--eco-tint);     /* Extra tint        */
}

/* =========================================================================
   2. Elementor global colors (kit 3049)
   Helps Elementor elements that reference the global palette. Sections on
   Home/About/Contact that hard-code their colors are NOT covered here and
   must be adjusted in the Elementor editor (see project notes).
   ========================================================================= */

.elementor-kit-3049 {
	--e-global-color-primary:   var(--eco-forest);
	--e-global-color-secondary: var(--eco-ink);
	--e-global-color-text:      var(--eco-text);
	--e-global-color-accent:    var(--eco-lime);
}

/* Astra-palette MIRROR that Elementor prints at :root (was gold #DCA54A...).
   These are the literal-hex copies of Astra's global palette; remap so any
   Elementor element using an "Astra Global Color" swatch turns eco too. */
:root,
.elementor-kit-3049 {
	--e-global-color-astglobalcolor0: var(--eco-forest);
	--e-global-color-astglobalcolor1: var(--eco-lime);
	--e-global-color-astglobalcolor2: var(--eco-ink);
	--e-global-color-astglobalcolor3: var(--eco-text);
	--e-global-color-astglobalcolor4: var(--eco-paper);
	--e-global-color-astglobalcolor6: var(--eco-tint);
}

/* Elementor buttons — match the rest of the site for full consistency */
.elementor-button,
.elementor-button-link,
.elementor-widget-button .elementor-button {
	background-color: var(--eco-forest);
	color: #fff;
	border-radius: 8px;
	transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.elementor-button:hover,
.elementor-button:focus,
.elementor-button-link:hover {
	background-color: var(--eco-lime);
	color: var(--eco-ink);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(30, 86, 49, .25);
}

/* =========================================================================
   3. Buttons & links
   ========================================================================= */

a {
	color: var(--eco-forest);
	transition: color .2s ease;
}
a:hover,
a:focus {
	color: var(--eco-lime-d);
}

/* Shared button surface — Astra, blocks and WooCommerce */
.ast-button,
.menu-toggle,
button.button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--eco-forest);
	border-color: var(--eco-forest);
	color: #fff;
	border-radius: 8px;
	transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.ast-button:hover,
button.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--eco-lime);
	border-color: var(--eco-lime);
	color: var(--eco-ink);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(30, 86, 49, .25);
}

/* =========================================================================
   4. WooCommerce — Shop grid, product cards, single product
   ========================================================================= */

/* Product cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--eco-paper);
	border: 1px solid var(--eco-tint);
	border-radius: 12px;
	padding: 14px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(20, 40, 29, .12);
	border-color: var(--eco-lime);
}

/* Price */
.woocommerce .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--eco-forest);
	font-weight: 700;
}
.woocommerce del .woocommerce-Price-amount {
	color: #9aa39c;
	font-weight: 400;
}

/* Sale badge */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background-color: var(--eco-lime);
	color: var(--eco-ink);
	border-radius: 999px;
	font-weight: 600;
}

/* Single product: full-width add to cart on mobile-friendly layouts */
.woocommerce div.product form.cart .button.single_add_to_cart_button {
	padding-left: 2em;
	padding-right: 2em;
}

/* Notices use the eco accent */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--eco-forest);
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--eco-forest);
}

/* Cart / mini-cart accent in header */
.ast-site-header-cart .ast-woo-header-cart-info-wrap,
.ast-cart-menu-wrap .count {
	color: var(--eco-forest);
}

/* =========================================================================
   5. Header & footer
   ========================================================================= */

.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.ast-builder-menu .menu-item:hover > .menu-link,
.ast-builder-menu .current-menu-item > .menu-link {
	color: var(--eco-forest);
}

/* Footer */
.site-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap {
	background-color: var(--eco-ink);
	color: #d7e2d8;
}
.site-footer a,
.ast-footer-copyright a {
	color: #cfe0c6;
}
.site-footer a:hover,
.ast-footer-copyright a:hover {
	color: var(--eco-lime);
}
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget-title {
	color: #fff;
}

/* =========================================================================
   6. Modern Cart plugin — align its accent vars to the eco palette
   (plugin defaults to emerald #10B981 / olive #6a9739). Loaded after the
   plugin's :root block, so these win.
   ========================================================================= */
:root {
	--moderncart-highlight-color: var(--eco-forest);
	--moderncart-highlight-color-light: #1E563112;
	--moderncart-primary-color: var(--eco-forest);
	--moderncart-primary-color-light: #1E563112;
	--moderncart-heading-color: var(--eco-ink);
	--moderncart-heading-color-light: #14281D12;
	--moderncart-floating-count-bg-color: var(--eco-forest);
	--moderncart-floating-count-bg-color-light: #1E563112;
	--moderncart-floating-icon-bg-color: var(--eco-forest);
	--moderncart-floating-icon-bg-color-light: #1E563112;
}

/* =========================================================================
   10. Header cart total — responsive (IDR amounts are long, e.g.
   "Rp 1.560.000"). Keep the amount on one line so it never wraps and
   pushes the logo/menu; below tablet, drop the text and keep just the
   basket icon + count badge (Astra's usual compact mobile pattern).
     .ast-woo-header-cart-total = the "Rp …" text
     .ast-icon-shopping-basket  = the basket glyph (count via data-cart-total)
   ========================================================================= */
.ast-site-header-cart .ast-woo-header-cart-info-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ast-site-header-cart .ast-woo-header-cart-total {
	white-space: nowrap;          /* never break "Rp 1.560.000" mid-number */
	font-variant-numeric: tabular-nums;
}
.ast-site-header-cart .cart-container {
	flex-wrap: nowrap;
}

/* Tablet & phone: hide the price text, show only the basket + count */
@media (max-width: 921px) {
	.ast-site-header-cart .ast-woo-header-cart-total {
		display: none !important;
	}
}


/* =========================================================================
   11. My Account — login & register forms (modern card layout)
   -------------------------------------------------------------------------
   Default WooCommerce markup: #customer_login.col2-set holds two floated
   columns (.col-1 Login / .col-2 Register). Re-lay them as two equal eco
   cards, restyle inputs/labels/buttons, and stack on mobile.
   Also clear the transparent header (this page has no hero, so the title
   would otherwise sit under the absolute header — same fix as §7).
   ========================================================================= */

/* Page title centred */
.woocommerce-account .entry-header .entry-title {
	text-align: center;
	color: var(--eco-ink);
}

/* Two-column wrapper → flex cards */
.woocommerce-account #customer_login.u-columns {
	display: flex !important;
	flex-wrap: wrap;
	gap: 28px;
	max-width: 900px;
	margin: 8px auto 0;
	align-items: stretch;
}
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
	flex: 1 1 320px !important;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	background: var(--eco-paper);
	border: 1px solid #e1ebdd;
	border-radius: 16px;
	padding: clamp(24px, 3vw, 36px);
	box-shadow: 0 12px 32px rgba(30, 86, 49, .07);
}

/* Headings */
.woocommerce-account #customer_login h2 {
	margin: 0 0 22px;
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--eco-ink);
	letter-spacing: -0.01em;
}

/* Labels */
.woocommerce-account .woocommerce-form .form-row > label:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	margin-bottom: 7px;
	font-weight: 600;
	font-size: .92rem;
	color: var(--eco-ink);
}

/* Text / email / password inputs */
.woocommerce-account .woocommerce-form .input-text {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #cfdbc9;
	border-radius: 10px;
	background: #fff;
	color: var(--eco-text);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-account .woocommerce-form .input-text:focus {
	border-color: var(--eco-forest);
	box-shadow: 0 0 0 3px rgba(30, 86, 49, .13);
	outline: none;
}

/* Remember-me checkbox row */
.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .92rem;
	color: var(--eco-text);
}

/* Submit buttons → full-width pill */
.woocommerce-account #customer_login .woocommerce-form button.button {
	width: 100%;
	margin-top: 6px;
	padding: 13px 22px;
	border: none;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	background: var(--eco-forest);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease, transform .05s ease;
}
.woocommerce-account #customer_login .woocommerce-form button.button:hover {
	background: var(--eco-forest-d);
}
.woocommerce-account #customer_login .woocommerce-form button.button:active {
	transform: translateY(1px);
}

/* Lost-password & privacy text */
.woocommerce-account .woocommerce-LostPassword a {
	color: var(--eco-forest);
	font-size: .9rem;
	text-decoration: underline;
}
.woocommerce-account .woocommerce-privacy-policy-text p {
	margin: 4px 0 14px;
	font-size: .84rem;
	line-height: 1.6;
	color: var(--eco-text);
}

/* Stack on mobile */
@media (max-width: 768px) {
	.woocommerce-account #customer_login.u-columns {
		flex-direction: column;
		gap: 18px;
	}
}