/*
 Theme Name:   LKS Wala
 Theme URI:    https://lkswala.com
 Description:  Custom storefront theme for LKS Wala, converted from the new standalone lkswala-new-website build. Child of Astra.
 Author:       LKS Wala
 Template:     astra
 Version:      1.0.0
 Text Domain:  lkswala-child
*/

/* --------------------------------------------------------------------
   Header "More" nav toggle — bug fix.
   On WooCommerce-context pages (Product, Cart, Checkout, My Account)
   Astra's WooCommerce integration CSS applies its theme accent
   (--ast-global-color-3, a dark navy) as a background on generic
   <button> elements for :hover/:focus/:active. Loaded last in the
   cascade and scoped tightly to this one control, with !important on
   only the properties that were leaking through, so no other button,
   the dropdown behaviour, and the header layout are unaffected.
   -------------------------------------------------------------------- */
.site-header .nav-more .nav-more-toggle,
.site-header .nav-more .nav-more-toggle:hover,
.site-header .nav-more .nav-more-toggle:focus,
.site-header .nav-more .nav-more-toggle:focus-visible,
.site-header .nav-more .nav-more-toggle:active,
.site-header .nav-more.open .nav-more-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ink, #1F2328) !important;
}
.site-header .nav-more .nav-more-toggle:hover {
  color: var(--orange, #FA8207) !important;
}
.site-header .nav-more.open .nav-more-toggle {
  color: var(--orange, #FA8207) !important;
}
.site-header .nav-more .nav-more-toggle:focus-visible {
  outline: 2px solid var(--orange, #FA8207) !important;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   Header hardening — proactively guards every interactive header
   control (not just "More") against the same Astra/WooCommerce-context
   leakage: generic button/input focus/hover backgrounds, borders and
   box-shadows in whatever accent colour Astra's Customizer has set.
   Scoped strictly to .site-header/.mobile-header/.drawer so nothing
   about WooCommerce's real buttons elsewhere on the page is touched.
   -------------------------------------------------------------------- */
.site-header button:not(.cart-btn),
.site-header input,
.site-header a:not(.cart-btn),
.mobile-header button,
.mobile-header input,
.mobile-header a,
.drawer button,
.drawer a {
  background-color: transparent !important;
  box-shadow: none !important;
}
.site-header .header-search input,
.mobile-header .mobile-search input {
  background-color: #fff !important;
  border-color: var(--line-2, #E3E6EA) !important;
  height: 47px !important;
  padding: 0 44px 0 48px !important;
}
.site-header .login-btn {
  border-color: var(--line-2, #E3E6EA) !important;
  background-color: transparent !important;
}
.site-header .login-btn:hover {
  border-color: var(--orange, #FA8207) !important;
  color: var(--orange, #FA8207) !important;
}
.site-header a:focus-visible,
.mobile-header a:focus-visible,
.site-header button:focus-visible,
.mobile-header button:focus-visible {
  outline: 2px solid var(--orange, #FA8207) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------
   Header Cart button — dedicated, scoped rule. This was broken by the
   hardening block above: its blanket "force every header button
   transparent" reset (correct for "More"/search/login, which are meant
   to be borderless/bordered-only) was also stripping the Cart button's
   own intentional solid-orange fill, leaving white text on a
   transparent background — invisible against the header. `.cart-btn`
   is now explicitly excluded from that reset and gets its own rule
   here instead, matching the standalone spec exactly (45px height,
   10px radius) with every state pinned to orange, never white/blue.
   -------------------------------------------------------------------- */
.site-header .cart-btn {
  background: var(--orange, #FA8207) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  height: 45px !important; padding: 0 16px !important;
}
.site-header .cart-btn:hover,
.site-header .cart-btn:focus,
.site-header .cart-btn:active {
  background: var(--orange-600, #E5720A) !important;
  color: #fff !important;
}
.site-header .cart-btn svg {
  color: #fff !important;
  stroke: currentColor !important;
}
.site-header .cart-btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--orange, #FA8207) !important;
}
.site-header .cart-btn .count {
  background: rgba(255,255,255,.28) !important;
  color: #fff !important;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
/* Mobile cart icon button intentionally left un-styled here: it must
   stay a plain icon-only button (transparent background, ink-coloured
   icon, small absolute-positioned orange count badge from the base
   stylesheet) matching the standalone mobile reference, NOT the
   desktop's filled orange button. Previously this block incorrectly
   also targeted .mobile-header .cart-icon-wrap, which force-painted
   the mobile cart icon as a solid orange rectangle with a white icon
   and an oversized inline count pill instead of the small corner
   badge -- this caused the reported mobile cart-button visual bug. */

/* --------------------------------------------------------------------
   Footer logo — WooCommerce/Astra's generic `img { max-width: 100% }`
   plus a WooCommerce-context rule was letting the logo scale up to its
   full native size (much bigger than the standalone design) instead of
   the intended small footer mark.
   -------------------------------------------------------------------- */
.site-footer .f-logo {
  height: 40px !important;
  width: auto !important;
  max-width: none !important;
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------
   Purchase controls layout — quantity control plus
   [Add to Cart][Buy Now][Wishlist][Share], all sharing one row.
   initPdpActionsLayout() (frontend.js) folds the quantity stepper into
   the same .pdp-actions row as WooCommerce's real Add to Cart button
   (nested one level deeper, still inside the WC form, so its own
   form.find('.single_add_to_cart_button') variation enable/disable
   logic is completely unaffected) and relocates the already-present
   Buy Now/Wishlist/Share buttons into that row without duplicating
   them.

   ROOT CAUSE (quantity sitting visibly higher than Add to
   Cart/Buy Now/Wishlist/Share on desktop): this rule used to give the
   quantity control its own margin-bottom:16px for an older two-row
   layout (quantity alone above the button row). That row no longer
   exists -- initPdpActionsLayout() now always folds quantity into the
   single .pdp-actions row -- but the leftover bottom margin kept
   applying because this is an ID-scoped selector
   (#lks-add-to-cart-native), which outranks the class-only
   `.pdp-actions .quantity` / `.pdp-actions .qty` resets in
   frontend.css's desktop block regardless of !important or source
   order. A flex item's bottom margin is part of its margin box, and
   .pdp-actions centers children with align-items:center against that
   margin box -- so the extra 16px below pulled the visible quantity
   control upward relative to its siblings, which carry no such
   margin. Zeroing the margin here (the actual source of the offset)
   replaces the margin-top nudge frontend.css used to compensate with.
   -------------------------------------------------------------------- */
#lks-add-to-cart-native .quantity {
  display: inline-flex !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
#lks-add-to-cart-native .quantity.lks-qty-row {
  display: inline-flex !important;
}
#lks-add-to-cart-native .qty,
#lks-add-to-cart-native .quantity {
  display: inline-flex !important;
}
#lks-add-to-cart-native .qty button,
#lks-add-to-cart-native [data-qty] {
  background: #fff !important;
  background-color: #fff !important;
  color: var(--ink-2, #3A3F47) !important;
  border: 0 !important;
}
#lks-add-to-cart-native .qty button:hover,
#lks-add-to-cart-native [data-qty]:hover {
  background: var(--bg-soft, #F5F6F8) !important;
  background-color: var(--bg-soft, #F5F6F8) !important;
}

/* Add to Cart — white/outline, per the standalone design (Buy Now, not
   Add to Cart, is the orange primary action). Astra/WooCommerce give
   `.button`/`.single_add_to_cart_button` their own blue-ish default;
   these rules win regardless of which row/wrapper the button ends up
   nested in after the JS relocation above. */
#lks-add-to-cart-native .single_add_to_cart_button,
#lks-add-to-cart-native .single_add_to_cart_button.button,
#lks-add-to-cart-native .single_add_to_cart_button.alt {
  background: #fff !important;
  background-color: #fff !important;
  border: 1px solid var(--line-2, #E3E6EA) !important;
  color: var(--ink, #1F2328) !important;
  border-radius: 10px !important;
  font-weight: 600;
  box-shadow: none !important;
}
#lks-add-to-cart-native .single_add_to_cart_button:hover {
  border-color: var(--ink-2, #3A3F47) !important;
  background: #fff !important;
  color: var(--ink, #1F2328) !important;
}
#lks-add-to-cart-native .single_add_to_cart_button.disabled {
  background: var(--line-2, #E3E6EA) !important;
  border-color: var(--line-2, #E3E6EA) !important;
  color: var(--muted, #8A93A3) !important;
  cursor: not-allowed;
}
/* Shop-loop "Add to cart" (product cards, not the PDP) keeps the
   orange treatment — that button has no separate Buy Now next to it. */
.woocommerce ul.product-grid a.button,
.woocommerce ul.product-grid a.add_to_cart_button {
  background: var(--orange, #FA8207) !important;
  background-color: var(--orange, #FA8207) !important;
  border-color: var(--orange, #FA8207) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600;
}
.woocommerce ul.product-grid a.button:hover,
.woocommerce ul.product-grid a.add_to_cart_button:hover {
  background: var(--orange-600, #E5720A) !important;
  background-color: var(--orange-600, #E5720A) !important;
  border-color: var(--orange-600, #E5720A) !important;
}
/* The native WC availability/stock text duplicates our own custom stock
   line above the form — hide it rather than showing "6 in stock" twice
   in two different visual styles. */
#lks-add-to-cart-native .stock,
#lks-add-to-cart-native p.availability,
#lks-add-to-cart-native .ast-stock-detail {
  display: none !important;
}
/* Re-skin the native variation table as the standalone's chip rows.
   The real <select> stays in the DOM (visually hidden) so WooCommerce's
   own variation-price/stock JS keeps working untouched; frontend.js
   injects the visible chip buttons next to it and keeps both in sync. */
#lks-add-to-cart-native table.variations select {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
#lks-add-to-cart-native table.variations,
#lks-add-to-cart-native table.variations tbody,
#lks-add-to-cart-native table.variations tr {
  display: block; width: 100%;
}
#lks-add-to-cart-native table.variations td,
#lks-add-to-cart-native table.variations th {
  display: block; padding: 0; text-align: left; border: 0;
}
#lks-add-to-cart-native table.variations th.label {
  /* the JS renders its own .variation-label right after the select, so
     WooCommerce's own <th><label> cell would otherwise duplicate it */
  display: none;
}
#lks-add-to-cart-native .woocommerce-variation-add-to-cart,
#lks-add-to-cart-native .single_variation_wrap {
  margin-top: 8px;
}
/* The JS-generated .variation/.option-chip/.variation-hint markup reuses
   the standalone site's own classes (already in frontend.css) verbatim —
   no extra styling needed here. */

/* --------------------------------------------------------------------
   Quantity stepper — WooCommerce's plain number input, re-skinned by
   frontend.js into the standalone's [ − qty + ] control. This just
   hides the browser's native spinner arrows; the stepper buttons
   frontend.js injects reuse the standalone's own .qty CSS already in
   frontend.css.
   -------------------------------------------------------------------- */
#lks-add-to-cart-native input.qty::-webkit-outer-spin-button,
#lks-add-to-cart-native input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
#lks-add-to-cart-native input.qty {
  -moz-appearance: textfield;
}

/* --------------------------------------------------------------------
   Hero slider arrows — same Astra generic-button leakage as the header
   "More" button, just never scoped to the homepage hero before. The
   standalone's own .hero-arrow rule (white bg, dark icon) is already
   correct; this only strips whatever Astra background/border is
   winning over it.
   -------------------------------------------------------------------- */
.hero-arrow,
.hero-arrow:hover,
.hero-arrow:focus,
.hero-arrow:active,
.hero-arrow:focus-visible {
  background-color: #fff !important;
  border: 0 !important;
  color: var(--ink, #1F2328) !important;
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.12)) !important;
}
.hero-arrow:focus-visible {
  outline: 2px solid var(--orange, #FA8207) !important;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   Shop sort dropdown — WooCommerce renders its own ordering <select
   id="woocommerce-catalog-orderby">, not the standalone's #sort, so it
   never picked up the standalone's .shop-toolbar select styling.
   Aliased here rather than duplicating the rule.
   -------------------------------------------------------------------- */
.shop-toolbar select,
.shop-toolbar #woocommerce-catalog-orderby,
.shop-toolbar .orderby {
  height: 40px !important;
  border: 1px solid var(--line-2, #E3E6EA) !important;
  border-radius: 9px !important;
  padding: 0 12px !important;
  background-color: #fff !important;
}
/* Mobile only (matches frontend.css's own ≤1024px scoping): widens the
   right padding to make room for the custom dropdown chevron frontend.css
   draws there after switching this select to appearance:none on mobile
   (root-causing an intermittent mobile-Safari height mismatch against the
   Filter button). Kept out of the base rule above so desktop's dropdown
   -- which has no Filter button to align against and keeps its native
   arrow -- is completely unaffected; !important is still required to win
   over that base rule's own !important padding at this width. */
@media (max-width: 1024px) {
  .shop-toolbar select,
  .shop-toolbar #woocommerce-catalog-orderby,
  .shop-toolbar .orderby {
    padding: 0 28px 0 12px !important;
  }
}

/* --------------------------------------------------------------------
   Price range slider — the standalone relies on the native
   accent-color property, which Astra's own form-input theming
   overrides with its blue accent at higher specificity/later in the
   cascade. Re-asserting it here with !important is simpler and safer
   than reimplementing the thumb/track with vendor-prefixed
   pseudo-elements.
   -------------------------------------------------------------------- */
.filters input[type="range"] {
  accent-color: var(--orange, #FA8207) !important;
}

/* --------------------------------------------------------------------
   Account sidebar active state — the standalone's own CSS only styles
   `.account-nav button.active` (its account screens used JS tab
   buttons); this implementation uses real navigable links instead
   (each sidebar item is a distinct WordPress/WooCommerce URL, not a
   client-side tab), so the same active treatment is extended to
   `.account-nav-link.active` for visual parity.
   -------------------------------------------------------------------- */
.account-nav .account-nav-link.active {
  background: var(--orange-100, #FFF1E2);
  color: var(--orange, #FA8207);
}

/* --------------------------------------------------------------------
   Layout hardening — "container" and WooCommerce single-product layout
   are both extremely common class/element names that Astra's own
   generic + WooCommerce-integration CSS also targets, at a specificity
   that can beat a same-named rule loaded earlier in the cascade. This
   re-asserts the standalone's own intended dimensions (values copied
   directly from frontend.css, not invented) rather than letting Astra's
   sizing silently win on some pages and not others.
   -------------------------------------------------------------------- */
.container {
  max-width: var(--container, 1332px) !important;
  width: 100% !important;
  margin: 0 auto !important;
  /* padding intentionally NOT re-asserted here -- frontend.css's own
     .container rule (0 24px desktop, 0 16px <=768px, 0 12px <=360px)
     is the single source of truth for left/right spacing at every
     breakpoint. An !important here silently beat all three of those
     on mobile, so 390/412/430px were getting the desktop 24px value
     instead of the intended 16px. */
}
.pdp {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: 44px !important;
  padding-top: 18px !important;
  align-items: start !important;
}
@media (max-width: 1024px) {
  .pdp { grid-template-columns: 1fr !important; gap: 28px !important; }
}


/* --------------------------------------------------------------------
   Cart page (woocommerce/cart/cart.php) \u2014 the .cart-layout/.cart-list/
   .cart-item/.summary classes are already in frontend.css; these rules
   only restyle the pieces still using WooCommerce's own native markup
   (quantity input, cart totals table, proceed-to-checkout button) to
   match the standalone design tokens instead of default WooCommerce/
   Astra styling.
   -------------------------------------------------------------------- */
.woocommerce-cart-form .quantity .qty {
  height: 40px; width: 64px; border: 1px solid var(--line-2); border-radius: 9px;
  text-align: center; font-size: 14px;
}
.cart_totals { border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.cart_totals h2 { font-size: 17px; margin-bottom: 14px; }
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals table th, .cart_totals table td { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; text-align: left; }
.cart_totals table tr:last-child th, .cart_totals table tr:last-child td { border-bottom: 0; font-weight: 700; font-size: 16px; }
.wc-proceed-to-checkout { margin-top: 16px; }
.wc-proceed-to-checkout .checkout-button {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 100% !important; height: 50px !important; border-radius: 10px !important;
  background: var(--orange) !important; color: #fff !important; font-weight: 600 !important;
  font-size: 15px !important; text-decoration: none !important; border: 0 !important;
}
.wc-proceed-to-checkout .checkout-button:hover { background: var(--orange-600) !important; }
.woocommerce-cart-form .coupon .input-text { height: 42px; }


/* --------------------------------------------------------------------
   Checkout page \u2014 CSS-only alignment to the standalone design tokens.
   Deliberately does NOT restructure WooCommerce's checkout form markup
   (fields, IDs, #payment box) \u2014 Razorpay's own JS hooks into that
   exact structure, so only typography/spacing/colors are touched here.
   -------------------------------------------------------------------- */
form.woocommerce-checkout .col2-set {
  display: grid !important; grid-template-columns: 1fr 380px !important; gap: 28px !important; align-items: start;
}
@media (max-width: 900px) { form.woocommerce-checkout .col2-set { grid-template-columns: 1fr !important; } }
form.woocommerce-checkout .col-1, form.woocommerce-checkout .col-2 { width: 100% !important; float: none !important; }
form.woocommerce-checkout h3 { font-size: 17px; margin: 0 0 14px; }
form.woocommerce-checkout .form-row label { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
form.woocommerce-checkout .input-text, form.woocommerce-checkout select {
  height: 44px; border: 1px solid var(--line-2) !important; border-radius: 9px !important; padding: 0 12px !important; font-size: 14px;
}
form.woocommerce-checkout textarea { border: 1px solid var(--line-2) !important; border-radius: 9px !important; padding: 10px 12px !important; }
#order_review, .woocommerce-checkout-review-order { border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
#order_review table.shop_table th, #order_review table.shop_table td { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
#place_order {
  width: 100% !important; height: 50px !important; border-radius: 10px !important;
  background: var(--orange) !important; color: #fff !important; font-weight: 600 !important;
  font-size: 15px !important; border: 0 !important;
}
#place_order:hover { background: var(--orange-600) !important; }
.woocommerce-checkout .payment_methods { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }


/* --------------------------------------------------------------------
   Mobile bottom nav \u2014 the base frontend.css only fully styles
   '.bottom-nav a' (Home/Categories/Login), leaving the Cart item (a real
   <button>, needed for its data-open-cart click handler) to fall back to
   Astra's default blue button chrome. Give it the identical flex/color
   treatment so all 4 items look the same, with an explicit reset so
   Astra's button background can't bleed through.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
  .bottom-nav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 11px; color: var(--muted) !important; font-weight: 500; height: 100%; position: relative;
    background: none !important; border: 0 !important; padding: 0; cursor: pointer; font-family: inherit;
  }
  .bottom-nav button.active { color: var(--orange) !important; }
}


/* --------------------------------------------------------------------
   ROOT CAUSE: Astra's parent theme sets a global blue default
   ( button,.ast-button,.button,input[type=submit]{...} using its own
   customizer color, --ast-global-color-0: #046bd2 ) that this child
   theme never overrode. Our own .tabs/.zoom-controls button rules only
   ever set color/border/padding, never 'background' \u2014 so on that one
   property, with equal ('button' vs '.tabs button' style) specificity
   and Astra's inline theme CSS printing after ours, Astra's blue wins.
   Scoped fix: explicitly reset background on these specific buttons
   only \u2014 no change to any other WordPress/WooCommerce button anywhere.
   -------------------------------------------------------------------- */
.tabs button {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
.zoom-controls button {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
.zoom-controls button:hover { background: var(--bg-soft) !important; }
.gallery-controls .icon-btn { background: #fff !important; border: 0 !important; box-shadow: var(--shadow-sm) !important; }

/* WooCommerce's native pagination (woocommerce_pagination()) on Shop/
   Category had no theme styling at all, so it fell back entirely to
   Astra's blue button/link chrome. */
.shop-pagination .page-numbers,
.shop-pagination span.page-numbers,
.shop-pagination a.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px; margin: 0 3px 0 0;
  border: 1px solid var(--line-2) !important; border-radius: 9px !important;
  background: #fff !important; color: var(--ink) !important; font-size: 13.5px; font-weight: 500;
}
.shop-pagination .page-numbers.current {
  background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important;
}
.shop-pagination .page-numbers:hover:not(.current) { border-color: var(--ink-2) !important; }
.shop-pagination .page-numbers.dots { border: 0 !important; background: transparent !important; width: auto; min-width: 0; }

/* Sort dropdown \u2014 push to the top-right of the results area. The
   standalone's own .filter-toggle is display:none on desktop (only
   shown \u2264900px), so on desktop .shop-toolbar has just the one visible
   child (the sort <select>); push it right instead of leaving it at the
   flex-start default, which read as misaligned/overlapping the sidebar. */
@media (min-width: 901px) {
  .shop-toolbar { justify-content: flex-end; }
}


/* --------------------------------------------------------------------
   ROOT CAUSE (search bar): Astra's global rule
   input[type=email],input[type=search],...,select,textarea {
     font-size:16px; line-height:24px; padding:12px 16px; border-radius:4px;
     box-shadow:0px 1px 2px 0px rgba(0,0,0,0.05);
   }
   targets our search box directly via [type=search]. An earlier override
   already fixed width/height/padding/background/border-color, but never
   touched font-size/border-radius/box-shadow/line-height, so Astra still
   won on those specific properties. This adds the missing ones, plus
   -webkit-appearance:none (WebKit adds its own native rounded/cancel-
   button chrome to type=search inputs, independent of Astra).
   -------------------------------------------------------------------- */
.site-header .header-search input,
.mobile-header .mobile-search input {
  font-size: 14px !important;
  line-height: normal !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.site-header .header-search input:focus,
.mobile-header .mobile-search input:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(250,130,7,.12) !important;
  outline: none !important;
}
.site-header .header-search input::-webkit-search-cancel-button,
.site-header .header-search input::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* --------------------------------------------------------------------
   ROOT CAUSE (heart/share icon centering): .icon-square never reset
   padding/line-height, so Astra's default button padding (applied via
   the same global button,.ast-button,.button{...} rule already found
   for the blue-button bugs) pushed the icon off-center inside the
   fixed 46x46 box. Using the exact centering approach requested, plus
   explicit SVG sizing so the icon itself carries no baseline offset.
   -------------------------------------------------------------------- */
.icon-square {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important; line-height: 0 !important; box-sizing: border-box !important;
}
.icon-square svg {
  display: block; width: 18px; height: 18px; margin: 0; flex-shrink: 0;
}


/* --------------------------------------------------------------------
   Same root cause as the earlier blue-button fixes (Astra's global
   button,.ast-button,.button,input[type=submit]{padding:...;border:...;
   box-shadow:...} still wins on any property a more specific rule here
   doesn't explicitly contest) hitting three more spots:
   1) .hero-arrow already had background/color fixed in an earlier pass
      but never reset padding/line-height, so the icon sat off-center
      inside the circle.
   2) .wish-btn (product-card heart button) had no override at all.
   3) .icon-btn was already fixed for the gallery's zoom/expand buttons
      specifically (.gallery-controls .icon-btn); the cart drawer's
      close button uses the same bare .icon-btn class and was never
      covered, so it still showed Astra's blue.
   -------------------------------------------------------------------- */
.hero-arrow {
  padding: 0 !important; line-height: 1 !important; box-sizing: border-box !important;
}
.hero-arrow svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }

.wish-btn {
  background: rgba(255,255,255,.94) !important; border: 0 !important; padding: 0 !important;
  line-height: 1 !important; box-shadow: 0 1px 3px rgba(16,24,40,.1) !important; border-radius: 50% !important;
}
.wish-btn svg { display: block; width: 15px; height: 15px; flex-shrink: 0; }

.cart-drawer-head .icon-btn {
  background: #fff !important; border: 0 !important; padding: 0 !important; line-height: 1 !important;
  box-shadow: none !important; color: var(--ink, #1F2328) !important;
}
.cart-drawer-head .icon-btn svg { color: inherit !important; }
.cart-drawer-head .icon-btn:hover { background: var(--bg-soft, #F5F6F8) !important; }
.cart-drawer-head .icon-btn svg { display: block; width: 18px; height: 18px; flex-shrink: 0; }


/* --------------------------------------------------------------------
   ROOT CAUSE: the standalone's own .category-card .c-name rule never
   sets a color \u2014 it relies on this theme's global 'a { color: inherit }'
   reset to pick up the dark --ink body text color. Astra's parent theme
   also sets a global 'a { color: var(--ast-global-color-0) }' (its
   default blue, #046bd2) at the exact same specificity; since Astra's
   inline theme CSS prints after this stylesheet, it wins the tie and
   the category name renders blue instead of dark. Scoped fix only to
   the Home 'Shop by Category' card title/link, not a global 'a' change.
   -------------------------------------------------------------------- */
a.category-card,
a.category-card:link,
a.category-card:visited,
a.category-card:hover,
a.category-card:focus,
a.category-card:active {
  color: var(--ink, #1F2328) !important;
}
.category-card .c-name {
  color: var(--ink, #1F2328) !important;
}
.category-card .c-link {
  color: var(--ink-2, #3A3F47) !important;
}
.category-card:hover .c-link {
  color: var(--orange, #FA8207) !important;
}


/* ======================================================================
   ROOT-CAUSE FIX: Astra's global 'a { color: var(--ast-global-color-0) }'
   (its default blue, #046bd2) sits at the exact same specificity as this
   theme's own base reset 'a { color: inherit }' (frontend.css), and
   Astra's inline theme CSS prints after this stylesheet, so it kept
   winning cascade ties -- across breadcrumbs, category chips, the Login
   button, product titles, seller-card names, and more, anywhere a link
   never set its OWN explicit color and depended on inheriting the dark
   body text color instead. This stylesheet only ever loads on the
   public storefront (wp_enqueue_scripts), never in wp-admin or other
   plugin screens, so this is already scoped to the new frontend --- it
   is not touching WordPress admin or third-party plugin UI anywhere.
   ====================================================================== */
a {
  color: inherit !important;
}

/* Every link/element that is INTENTIONALLY a color other than inherited
   dark text needs its own !important re-assertion so the blanket rule
   above can't wrongly override it back to dark. Values are the exact
   standalone tokens - nothing invented. */
.section-link,
.section-link:hover,
.section-link:visited { color: var(--orange, #FA8207) !important; }
.seller-link,
.seller-link:hover,
.seller-link:visited { color: var(--orange, #FA8207) !important; }
.p-name,
.p-name:hover,
.p-name:visited { color: var(--ink-2, #3A3F47) !important; }
.shop-panel-meta h3 a,
.shop-panel-meta h3 a:visited { color: var(--ink, #1F2328) !important; }
.shop-panel-meta h3 a:hover { color: var(--orange, #FA8207) !important; }
.site-footer li a,
.site-footer li a:visited { color: #98A0AB !important; }
.site-footer li a:hover { color: var(--orange, #FA8207) !important; }
.chip.active,
.chip.active:visited { color: #fff !important; }
.main-nav a.active,
.main-nav a.active:visited { color: var(--orange, #FA8207) !important; }
.cd-name,
.cd-name:visited { color: var(--ink, #1F2328) !important; }
.cd-name:hover { color: var(--orange, #FA8207) !important; }

/* Links that should stay dark in every state, incl. :visited, and were
   never given their own color at all (relying purely on inheritance
   that Astra was breaking): breadcrumb, category chips, Login button,
   PDP seller card. The blanket 'a { color: inherit !important }' above
   already fixes these by restoring correct inheritance, but pinning
   them explicitly here documents intent and survives any future Astra
   change to its own specificity.
   -------------------------------------------------------------------- */
.breadcrumb a,
.breadcrumb a:visited,
a.category-card,
a.category-card:visited,
a.seller-card,
a.seller-card:visited,
.login-btn,
.login-btn:visited,
.chip:not(.active),
.chip:not(.active):visited {
  color: var(--ink, #1F2328) !important;
}
.breadcrumb a:hover,
.chip:not(.active):hover { color: var(--orange, #FA8207) !important; }


/* Buttons (.btn-primary/.btn-outline/.cart-btn/.hero-cta/.login-btn) are
   sometimes rendered as <a> tags (e.g. 'Start Shopping', 'Browse all
   products', hero CTAs), and their own color rules had no !important --
   re-assert them so the blanket 'a { color: inherit !important }' fix
   above can never turn their white/dark button text back to inherited
   plain link color. */
a.btn-primary, a.btn-primary:visited, a.btn-primary:hover,
a.cart-btn, a.cart-btn:visited, a.cart-btn:hover,
a.hero-cta, a.hero-cta:visited, a.hero-cta:hover {
  color: #fff !important;
}
a.btn-outline, a.btn-outline:visited, a.btn-outline:hover {
  color: var(--ink, #1F2328) !important;
}

.link-danger, .link-danger:visited { color: var(--muted, #737A85) !important; }
.link-danger:hover { color: var(--red, #E23744) !important; }


/* Search suggestions - hover/keyboard-active row state and a subtle
   loading state, using the same tokens/spacing as the rest of the
   suggest panel (already correctly positioned/sized in frontend.css). */
.suggest-item:hover, .suggest-item.is-active { background: var(--bg-soft, #F5F6F8); }
.suggest-loading { padding: 16px; font-size: 14px; color: var(--muted, #737A85); }
.suggest-item.suggest-all .s-name { color: var(--orange, #FA8207); font-weight: 600; }


/* --------------------------------------------------------------------
   Mobile header icon buttons (hamburger + cart) -- root cause fix.
   Astra's global `button{padding:15px 30px;color:#fff;...}` rule was
   going uncontested on these fixed 40x40px icon buttons. Combined with
   the theme's global `box-sizing:border-box`, that unopposed padding
   collapsed the content box to ~0, clipping the SVG icon into
   invisibility -- the same bug class already fixed for the cart-drawer
   close button, never applied here. Astra's global `svg{fill:...}` and
   bare `button{color:#fff}` rules are also neutralised defensively.
   Confirmed against Mobile Reference Image.png: plain icon + small
   orange count badge, no filled button background -- so background is
   intentionally left untouched (handled by the existing transparent
   reset), only sizing/color/icon rendering is reinforced here.
   -------------------------------------------------------------------- */
.mobile-bar-inner .icon-btn {
  padding: 0 !important;
  line-height: 1 !important;
  color: var(--ink, #1F2328) !important;
}
.mobile-bar-inner .icon-btn svg {
  display: block !important;
  width: 24px !important; height: 24px !important;
  flex-shrink: 0;
  color: inherit !important;
  fill: none !important;
  stroke: currentColor !important;
}
.mobile-bar-inner .cart-icon-wrap .count {
  background: var(--orange, #FA8207) !important;
  color: #fff !important;
}


/* --------------------------------------------------------------------
   Mobile side-menu drawer close button -- same root cause as the
   mobile header icons: Astra's global `button{padding:15px 30px;
   color:#fff;}` rule was going uncontested here (the earlier header
   hardening block only zeroed its background, never its padding or
   color), and with the theme's global box-sizing:border-box that
   padding collapsed this fixed-size icon button's content box,
   rendering the X icon invisible. Scoped to .drawer-head only so the
   rest of the drawer (nav links, etc.) is untouched.
   -------------------------------------------------------------------- */
.drawer-head .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 1 !important;
  color: var(--ink, #1F2328) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.drawer-head .icon-btn:hover,
.drawer-head .icon-btn:focus,
.drawer-head .icon-btn:active {
  background: var(--bg-soft, #F5F6F8) !important;
  color: var(--ink, #1F2328) !important;
}
.drawer-head .icon-btn:focus-visible {
  outline: 2px solid var(--orange, #FA8207) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}
.drawer-head .icon-btn svg {
  display: block !important;
  width: 20px !important; height: 20px !important;
  flex-shrink: 0;
  color: inherit !important;
  fill: none !important;
  stroke: currentColor !important;
}


/* --------------------------------------------------------------------
   MOBILE PDP REBUILD -- matches PDP Page .png (mobile source of truth).
   Every new element added to single-product.php for this pass is
   hidden by default (desktop untouched) and only revealed inside the
   existing 768px mobile breakpoint below.
   -------------------------------------------------------------------- */
.pdp-short-desc { display: none; }
.pdp-desc-heading { display: none; }
.pdp-read-more { display: none; }
.mobile-only-text { display: none; }

@media (max-width: 768px) {
  /* 4. Short description under the product name */
  .pdp-short-desc {
    display: block;
    font-size: 13px; line-height: 1.55; color: var(--muted);
    margin: 4px 0 14px;
  }

  /* 5. Price row before rating/stock row (source order unchanged --
     desktop keeps its existing meta-then-price stacking; only mobile
     gets the flex re-order). */
  .pdp-price-meta { display: flex; flex-direction: column; }
  .pdp-price-meta .pdp-price { order: 1; margin: 0 0 10px; }
  .pdp-price-meta .pdp-meta { order: 2; margin: 0 0 14px; }

  /* 2. Hide the desktop image counter badge -- not part of the mobile reference */
  .img-counter { display: none; }

  /* 8. Phone Brand / Phone Model box -- bordered card, label left / value
     right, matching the reference exactly. Scoped to .phone-fixed-info
     only so the Size chip selector (clothing/shoes), which reuses the
     same .variation/.variation-head classes, is completely unaffected. */
  .phone-fixed-info {
    border: 1px solid var(--line-2); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 20px; background: #fff;
  }
  .phone-fixed-info .variation { padding: 0; }
  .phone-fixed-info .variation + .variation { margin-top: 12px; }
  .phone-fixed-info .variation-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0;
  }
  .phone-fixed-info .variation-label { font-size: 13.5px; color: var(--muted); font-weight: 500; }
  .phone-fixed-info .variation-chosen { font-size: 14px; color: var(--ink); font-weight: 700; }

  /* 9. Product Description: plain heading + always-expanded-by-default
     tab panel with a height-clamped "Read more" toggle, instead of the
     desktop tab bar. Product Details / Delivery tabs are not part of
     the mobile reference, so they're hidden here (content is untouched
     in the DOM and still fully shown on desktop). */
  .pdp-desc-heading { display: block; font-size: 16px; font-weight: 700; margin: 22px 0 10px; color: var(--ink); }
  .tabs { display: none; }
  #tab-details, #tab-delivery { display: none !important; }
  #tab-desc { display: block !important; }
  #pdp-desc-inner { font-size: 13.5px; line-height: 1.65; color: var(--muted); max-height: 4.95em; overflow: hidden; }
  #pdp-desc-inner.expanded { max-height: none; }
  .pdp-read-more {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
    font-size: 13.5px; font-weight: 600; color: #2563EB;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .pdp-read-more svg { width: 14px; height: 14px; transition: transform .2s ease; }
  .pdp-read-more.expanded svg { transform: rotate(180deg); }

  /* 10. Purchase action layout -- [qty][Add to Cart][heart] row, then a
     full-width Buy Now row. Pure flex re-order of the existing DOM
     (built by initPdpActionsLayout()); desktop keeps its own one-row
     layout untouched since `order` only takes effect here.
     IMPORTANT: an earlier fix set `#lks-add-to-cart-native .quantity`
     to `margin: 0 0 16px !important`, which outranks a plain
     `.pdp-actions .quantity.qty` rule on BOTH specificity (the ID
     selector wins outright) and !important -- so every property here
     that could collide with an existing #lks-add-to-cart-native rule
     re-uses that same ID-scoped selector with !important to guarantee
     it actually applies instead of silently losing the cascade. */
  #share-btn { display: none !important; }
  .pdp-actions { row-gap: 12px !important; align-items: stretch !important; }
  #lks-add-to-cart-native .quantity,
  #lks-add-to-cart-native .quantity.lks-qty-row,
  .pdp-actions .quantity.qty {
    order: 1 !important; flex: 0 0 auto !important; margin: 0 !important; height: 48px !important;
  }
  #lks-add-to-cart-native .qty button, .pdp-actions .quantity.qty button { width: 36px !important; height: 100% !important; font-size: 17px !important; }
  #lks-add-to-cart-native .qty input, .pdp-actions .quantity.qty input { width: 36px !important; height: 100% !important; font-size: 14px !important; }
  #lks-add-to-cart-native .single_add_to_cart_button {
    order: 2 !important; flex: 1 1 0% !important; min-width: 0 !important;
    height: 48px !important; padding: 0 10px !important; font-size: 13.5px !important; margin: 0 !important;
  }
  .pdp-actions .icon-square[data-wish] { order: 3 !important; flex: 0 0 48px !important; width: 48px !important; height: 48px !important; }
  #buy-now { order: 4 !important; flex: 0 0 100% !important; width: 100% !important; height: 50px !important; margin: 2px 0 0 !important; }

  /* 11. "More Products" mobile relabel of the related-products section
     (desktop keeps "You May Also Like" / "View All Products") */
  .desktop-only-text { display: none; }
  .mobile-only-text { display: inline; }

  /* 12. Duplicate "Sold By" panel + its own related-products grid --
     the compact .seller-card near the top already covers this on
     mobile per the reference; desktop keeps the full panel. */
  .shop-panel { display: none; }

  /* 13. Mobile visual reorder (updated) -- Product Description now
     renders BEFORE Select Size / Phone Brand-Model and the action
     row, with the seller card moved after Buy Now. Source/DOM order
     stays exactly as-is (desktop, SEO, screen readers all unaffected
     -- `order` only takes effect inside a flex formatting context,
     and this block only runs <=768px). Visual order: name -> short
     desc -> price/rating -> tax line -> Product Description ->
     Select Size/Phone Brand-Model -> qty/Add to Cart/wishlist/Buy Now
     -> seller card -> service boxes. #lks-add-to-cart-native and
     .pdp-actions share order 11 so the qty/Add-to-Cart/Buy-Now/
     wishlist group stays one visual block whether or not
     initPdpActionsLayout() has already merged them. */
  .pdp-buy { display: flex; flex-direction: column; }
  .pdp-buy > * { min-width: 0; }
  .pdp-buy > .pdp-brand { order: 1; }
  .pdp-buy > h1 { order: 2; }
  .pdp-buy > .pdp-short-desc { order: 3; }
  .pdp-buy > .pdp-price-meta { order: 4; }
  .pdp-buy > .tax-note { order: 5; }
  .pdp-buy > .pdp-desc-heading { order: 6; }
  .pdp-buy > .tabs { order: 7; }
  .pdp-buy > #tab-desc { order: 8; }
  .pdp-buy > #tab-details,
  .pdp-buy > #tab-delivery { order: 9; }
  .pdp-buy > .phone-fixed-info { order: 10; }
  .pdp-buy > #lks-add-to-cart-native,
  .pdp-buy > .pdp-actions { order: 11; }
  .pdp-buy > .seller-card { order: 12; margin-top: 4px; }
  .pdp-buy > .pdp-usp { order: 13; margin-top: 4px; }

  /* 14. Overflow guard -- .pdp is a CSS grid and .pdp-buy is now a
     flex container; both give their items min-width:auto by default,
     so one unexpectedly wide child (a long unbroken word, an
     un-shrunk media element) can silently widen the whole grid past
     the viewport and skew the container's centering (more space on
     one side than the other). Belt-and-braces alongside #13. */
  #pdp, .pdp-gallery, .pdp-buy { min-width: 0; max-width: 100%; }

  /* 15. More Products -- horizontal swipe slider instead of a fixed
     grid that could wrap or overflow on a narrow screen. Scoped to
     #related (this PDP's related-products block) only -- the shared
     .product-grid class used on Home/Shop stays exactly as-is. */
  #related {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    gap: 12px; padding-bottom: 6px; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #related::-webkit-scrollbar { display: none; }
  #related .product-card { flex: 0 0 152px; width: 152px; scroll-snap-align: start; }

  /* 16. Blank space on variable products (Shirt/T-Shirt/Shoes) between
     the size selector and the Add to Cart/Buy Now controls -- root
     cause confirmed live: Astra's own WooCommerce CSS gives
     .single_variation_wrap .single_variation a 1.2em bottom margin
     unconditionally, even though WooCommerce leaves that div
     completely empty (<div class="woocommerce-variation single_
     variation" role="alert"></div>) until a variation is actually
     selected and its own JS fills it with price/availability HTML.
     Simple products (Cover) never render this element at all, which
     is why the gap is specific to variable products. Collapsing it
     only in its :empty state removes the dead space without touching
     variation-selection logic -- once a size is picked and WooCommerce
     populates it, :empty no longer matches and it displays normally,
     exactly as before. */
  #lks-add-to-cart-native .single_variation_wrap .single_variation:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* 17. Real root cause of the large gap on variable products (Shirt/
     T-Shirt/Shoes), confirmed live in Astra's own generated CSS: our
     theme never overrides `display` on form.cart / form.variations_form
     / .woocommerce-variation-add-to-cart, so Astra's own WooCommerce
     defaults were silently in effect underneath our markup the whole
     time --
       form.cart{display:flex;align-items:center;justify-content:center}
       .woocommerce-variation-add-to-cart{display:inline-flex;
         align-items:center;flex-wrap:nowrap;flex-shrink:0}
     initPdpActionsLayout() (frontend.js) nests our own .pdp-actions row
     (qty/Add to Cart/Buy Now/wishlist, itself flex-wrap:wrap so Buy Now
     drops to its own full-width line) three levels deep inside these
     Astra flex/inline-flex ancestors for a VARIABLE product specifically
     (simple products like Cover only nest one level, inside plain
     form.cart, which is why Cover never showed this). A flex-wrap:wrap
     child forced to shrink-to-content inside a flex-shrink:0/nowrap
     parent does not get the full row width it needs to wrap Buy Now
     onto its own line the way it does everywhere else, and the leftover
     reserved width/height from that mismatch is what rendered as extra
     blank space below Buy Now. Forcing these three Astra-flex ancestors
     back to plain block stacking removes the conflicting layout context
     entirely instead of compensating for it. */
  #lks-add-to-cart-native form.cart,
  #lks-add-to-cart-native form.variations_form,
  #lks-add-to-cart-native .woocommerce-variation-add-to-cart {
    display: block !important;
  }
}