/*
Theme Name:   Garwanj
Theme URI:    https://garwanj.pk
Description:  Garwanj — verified marketplace for authentic organic products from the Swat valley. Child theme of Astra, carrying the Garwanj brand identity (v1.0) across WooCommerce and Dokan.
Author:       AIDIGISTUDIO
Author URI:   https://aidigistudio.com
Template:     astra
Version:      1.2.0
Text Domain:  garwanj
Tags:         ecommerce, marketplace, elementor
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Source of truth: Garwanj Brand Guidelines v1.0
   ========================================================================== */
:root {
  --grw-green:       #2D5016;
  --grw-green-deep:  #1B3009;
  --grw-green-mid:   #3F6B22;
  --grw-brown:       #8B4513;
  --grw-gold:        #D4A017;
  --grw-gold-soft:   #E8C25A;
  --grw-cream:       #F7F2E7;
  --grw-cream-deep:  #EFE7D4;
  --grw-paper:       #FBF8F0;
  --grw-ink:         #241E12;
  --grw-ink-soft:    #5A5040;
  --grw-line:        #DDD2BB;

  --grw-radius:      10px;
  --grw-radius-lg:   14px;
  --grw-radius-xl:   20px;
  --grw-maxw:        1280px;

  --grw-font-display: 'Fraunces', Georgia, serif;
  --grw-font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --grw-font-urdu:    'Noto Nastaliq Urdu', serif;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body {
  font-family: var(--grw-font-body);
  background: var(--grw-cream);
  color: var(--grw-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Paper grain — keeps the brand feeling handmade, never flat-digital.
   Brand guideline section 11: ~3% opacity. */
body.grw-grain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--grw-font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--grw-green-deep);
}

a { color: var(--grw-green); text-decoration: none; }
a:hover { color: var(--grw-brown); }

.grw-urdu, .urdu {
  font-family: var(--grw-font-urdu);
  direction: rtl;
}

/* Accessibility floor: keyboard focus must stay visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--grw-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   3. BUTTONS  (Elementor + WooCommerce + Dokan unified)
   ========================================================================== */
.grw-btn,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.dokan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--grw-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 14px 28px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  background: var(--grw-green);
  color: var(--grw-cream);
  box-shadow: 0 8px 22px -8px rgba(45, 80, 22, .6);
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}

.grw-btn:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.dokan-btn:hover {
  background: var(--grw-green-deep);
  color: var(--grw-cream);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(45, 80, 22, .7);
}

.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--grw-green);
  color: var(--grw-cream);
}

.grw-btn--ghost {
  background: transparent;
  color: var(--grw-green);
  border: 1.5px solid var(--grw-green);
  box-shadow: none;
}
.grw-btn--ghost:hover {
  background: var(--grw-green);
  color: var(--grw-cream);
}

.grw-btn--gold {
  background: var(--grw-gold);
  color: var(--grw-green-deep);
  box-shadow: none;
}
.grw-btn--gold:hover {
  background: var(--grw-gold-soft);
  color: var(--grw-green-deep);
}

/* ==========================================================================
   4. WOOCOMMERCE — PRODUCT GRID
   Styled via classes rather than template overrides, so Woo updates
   never break the theme.
   ========================================================================== */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

.woocommerce ul.products li.product {
  width: 100%;
  margin: 0;
  padding: 0;
  float: none;
  background: var(--grw-paper);
  border: 1px solid var(--grw-line);
  border-radius: var(--grw-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s, box-shadow .3s;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px -24px rgba(36, 30, 18, .36);
}

.woocommerce ul.products li.product a img {
  margin: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--grw-font-display);
  font-size: 17.5px;
  font-weight: 600;
  color: var(--grw-ink);
  line-height: 1.25;
  padding: 14px 16px 4px;
  margin: 0;
}

.woocommerce ul.products li.product .price {
  font-family: var(--grw-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--grw-green);
  padding: 0 16px 14px;
  margin-top: auto;
  display: block;
}
.woocommerce ul.products li.product .price del { opacity: .5; font-size: 15px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button {
  margin: 0 16px 18px;
  font-size: 14px;
  padding: 11px 20px;
}

.woocommerce span.onsale {
  background: var(--grw-gold);
  color: var(--grw-green-deep);
  font-family: var(--grw-font-body);
  font-weight: 700;
  font-size: 11px;
  border-radius: 30px;
  padding: 5px 12px;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
  top: 12px;
  right: 12px;
  left: auto;
}

@media (max-width: 900px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* ==========================================================================
   5. WOOCOMMERCE — SINGLE PRODUCT
   ========================================================================== */
.woocommerce div.product .product_title {
  font-family: var(--grw-font-display);
  font-size: 36px;
  color: var(--grw-green-deep);
  line-height: 1.1;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--grw-font-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--grw-green);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--grw-line);
  display: flex;
  gap: 8px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--grw-font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--grw-ink-soft);
  padding: 14px 24px;
  display: block;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--grw-green);
  border-bottom-color: var(--grw-green);
}

.woocommerce .quantity .qty {
  border: 1.5px solid var(--grw-line);
  border-radius: 9px;
  background: var(--grw-paper);
  font-family: var(--grw-font-body);
  font-weight: 600;
  padding: 12px 8px;
  color: var(--grw-ink);
}

/* ==========================================================================
   6. THE VERIFIED BADGE
   Brand guidelines section 12. Only rendered for verified vendors —
   the badge is the single thing the brand is built on.
   ========================================================================== */
.grw-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--grw-green);
  color: var(--grw-cream);
  font-family: var(--grw-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 5px 11px;
  border-radius: 30px;
  line-height: 1.4;
}
.grw-verified svg { flex-shrink: 0; }

.grw-verified--gold {
  background: var(--grw-gold);
  color: var(--grw-green-deep);
}
.grw-verified--outline {
  background: transparent;
  border: 1.5px solid var(--grw-green);
  color: var(--grw-green);
}
.grw-verified--lg {
  font-size: 13px;
  padding: 8px 16px;
}

/* Position it over the product thumbnail in the loop. */
.woocommerce ul.products li.product { position: relative; }
.woocommerce ul.products li.product .grw-verified {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
}

/* ==========================================================================
   7. FORMS  (checkout, vendor onboarding, account)
   ========================================================================== */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.dokan-form-control {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--grw-line);
  border-radius: 9px;
  font-family: var(--grw-font-body);
  font-size: 15px;
  background: var(--grw-paper);
  color: var(--grw-ink);
  line-height: 1.4;
  transition: border-color .2s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.dokan-form-control:focus {
  outline: none;
  border-color: var(--grw-green);
}

.woocommerce form .form-row label {
  font-family: var(--grw-font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--grw-ink);
  margin-bottom: 7px;
}
.woocommerce form .form-row .required {
  color: var(--grw-brown);
  text-decoration: none;
}

/* ==========================================================================
   8. CHECKOUT — payment methods
   Cash on Delivery leads: it is how most of Pakistan actually pays.
   ========================================================================== */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  border: none;
  padding: 0;
  margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
  border: 2px solid var(--grw-line);
  border-radius: 12px;
  padding: 17px 20px;
  margin-bottom: 13px;
  list-style: none;
  background: var(--grw-paper);
  transition: border-color .2s, background .2s;
}
.woocommerce-checkout #payment ul.payment_methods li:hover {
  border-color: var(--grw-green-mid);
}
.woocommerce-checkout #payment ul.payment_methods li label {
  font-family: var(--grw-font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--grw-ink);
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--grw-cream-deep);
  color: var(--grw-ink-soft);
  font-size: 13.5px;
  border-radius: 9px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-checkout #payment ul.payment_methods li.payment_method_cod {
  border-color: var(--grw-green);
  background: var(--grw-cream-deep);
  position: relative;
}
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cod::after {
  content: "Most popular";
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--grw-gold);
  color: var(--grw-green-deep);
  font-family: var(--grw-font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 20px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
  background: var(--grw-paper);
  border: 1px solid var(--grw-line);
  border-radius: var(--grw-radius-lg);
  border-collapse: separate;
  overflow: hidden;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total .amount {
  font-family: var(--grw-font-display);
  font-size: 24px;
  color: var(--grw-green);
}

/* ==========================================================================
   9. CART — grouped by vendor
   A Garwanj order can span several Swat vendors, so the cart says so.
   ========================================================================== */
.woocommerce table.shop_table {
  background: var(--grw-paper);
  border: 1px solid var(--grw-line);
  border-radius: var(--grw-radius-lg);
  border-collapse: separate;
  overflow: hidden;
}
.woocommerce table.shop_table th {
  font-family: var(--grw-font-body);
  font-weight: 600;
  color: var(--grw-green-deep);
  background: var(--grw-cream-deep);
}
.woocommerce table.shop_table td { border-top-color: var(--grw-line); }

.grw-vendor-group__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 22px;
  background: var(--grw-cream-deep);
  border-bottom: 1px solid var(--grw-line);
  font-family: var(--grw-font-body);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--grw-green-deep);
}
.grw-vendor-group__loc {
  margin-left: auto;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--grw-ink-soft);
}

.woocommerce .cart_totals h2 {
  font-family: var(--grw-font-display);
  font-size: 21px;
  color: var(--grw-green-deep);
}

/* ==========================================================================
   10. NOTICES
   Errors say what happened and how to fix it. No apologising, no mood.
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--grw-font-body);
  border-radius: var(--grw-radius);
  border-top: none;
  border-left: 4px solid var(--grw-green);
  background: var(--grw-cream-deep);
  color: var(--grw-ink);
  padding: 16px 20px 16px 24px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-error { border-left-color: #A8442F; }
.woocommerce-message { border-left-color: var(--grw-green); }
.woocommerce-info { border-left-color: var(--grw-gold); }

/* ==========================================================================
   11. DOKAN — vendor storefront & dashboard
   ========================================================================== */
.dokan-store-info,
.dokan-single-store .profile-frame {
  background: var(--grw-paper);
  border: 1px solid var(--grw-line);
  border-radius: var(--grw-radius-xl);
}
.dokan-single-store .profile-info-box .profile-info-summery-wrapper {
  background: linear-gradient(135deg, var(--grw-green), var(--grw-green-deep));
}
.dokan-single-store .profile-info-box .profile-info-summery .profile-info .store-name {
  font-family: var(--grw-font-display);
  color: var(--grw-cream);
}

.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active,
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover {
  background: var(--grw-green);
}
.dokan-dashboard .dokan-dashboard-content article.dokan-widget-area h2 {
  font-family: var(--grw-font-display);
  color: var(--grw-green-deep);
}

/* ==========================================================================
   12. HEADER / FOOTER helpers
   ========================================================================== */
.grw-announce {
  background: var(--grw-green-deep);
  color: var(--grw-cream);
  font-family: var(--grw-font-body);
  font-size: 13px;
  letter-spacing: .04em;
  text-align: center;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.grw-announce .grw-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--grw-gold);
  flex-shrink: 0;
}

.grw-logo { display: flex; flex-direction: column; line-height: 1; }
.grw-logo__en {
  font-family: var(--grw-font-display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: .02em;
  color: var(--grw-green);
}
.grw-logo__ur {
  font-family: var(--grw-font-urdu);
  font-size: 14px;
  color: var(--grw-gold);
  margin-top: 3px;
}

.grw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--grw-font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grw-brown);
}
.grw-eyebrow .grw-ln {
  width: 30px;
  height: 1px;
  background: var(--grw-brown);
  opacity: .5;
}

/* ==========================================================================
   13. UTILITIES
   ========================================================================== */
.grw-panel {
  background: var(--grw-paper);
  border: 1px solid var(--grw-line);
  border-radius: var(--grw-radius-lg);
  padding: 28px;
}
.grw-section--green {
  background: var(--grw-green-deep);
  color: var(--grw-cream);
}
.grw-section--green h1,
.grw-section--green h2,
.grw-section--green h3 { color: var(--grw-cream); }
.grw-section--cream { background: var(--grw-cream-deep); }

.grw-price {
  font-family: var(--grw-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--grw-green);
}


/* ==========================================================================
   14. ASTRA PARENT OVERRIDES
   Astra ships opinionated WooCommerce styling of its own. These rules meet
   its specificity so the Garwanj brand wins, without using !important
   everywhere (which would make the theme painful to customise later).
   ========================================================================== */

/* Astra sets its own body/heading families from the Customizer. */
.ast-container body,
body.ast-woocommerce-cart-menu {
  font-family: var(--grw-font-body);
}

.site-title,
.site-title a,
.ast-site-title-wrap .site-title a {
  font-family: var(--grw-font-display);
  color: var(--grw-green);
}

/* Astra product grid — it wraps products in its own column classes. */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
  padding: 0;
}

.woocommerce ul.products li.product .ast-woo-product-category {
  font-family: var(--grw-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--grw-brown);
  letter-spacing: .03em;
  padding: 12px 16px 0;
  margin: 0;
}

/* Astra's own add-to-cart button styling. */
.woocommerce ul.products li.product .ast-on-card-button,
.ast-site-header-cart a.cart-container,
.woocommerce-js a.button,
.woocommerce-js button.button {
  font-family: var(--grw-font-body);
  border-radius: 50px;
}

/* Astra header cart icon. */
.ast-site-header-cart .cart-container *,
.ast-cart-menu-wrap .count {
  color: var(--grw-green);
}
.ast-site-header-cart.ast-menu-cart-outline .ast-cart-menu-wrap .count {
  border-color: var(--grw-gold);
  background: var(--grw-gold);
  color: var(--grw-green-deep);
}

/* Astra buttons defined via Customizer variables. */
.ast-button,
.button,
input[type="submit"],
.wp-block-button__link {
  font-family: var(--grw-font-body);
  border-radius: 50px;
  background: var(--grw-green);
  color: var(--grw-cream);
}
.ast-button:hover,
.wp-block-button__link:hover {
  background: var(--grw-green-deep);
  color: var(--grw-cream);
}

/* Astra page/entry titles. */
.entry-title,
.entry-title a,
.ast-archive-title {
  font-family: var(--grw-font-display);
  color: var(--grw-green-deep);
}

/* Astra footer. */
.site-footer,
.ast-small-footer {
  background: var(--grw-ink);
  color: rgba(247, 242, 231, .7);
}
.site-footer a,
.ast-small-footer a { color: rgba(247, 242, 231, .8); }
.site-footer a:hover { color: var(--grw-gold); }

/* Astra's content background defaults to white — the brand never uses it. */
.ast-separate-container,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-plain-container.ast-single-post .entry-content {
  background: var(--grw-cream);
}
.ast-separate-container .ast-article-single {
  border-radius: var(--grw-radius-lg);
}