/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/




:root {
  /* Cool neutral (default) */
  --catalog-bg: #f5f7fa;     /* change to #faf7f2 for a warmer vibe like Alibaba */
  --catalog-border: #e5e7eb;

  --card-bg: #ffffff;        /* try #fdfdfd or #fafafa for very soft cards */
  --card-border: #e5e7eb;
}





.woocommerce-ordering .orderby option {
	color: black !important;
}
.product-excerpt { margin-top: .5rem; }
.product-excerpt-link { display:block; text-decoration:none; }
.product-excerpt-link:hover { text-decoration:underline; }

/* ---------- Catalog panel (light canvas behind the grid) ---------- */
/* Applies only on WooCommerce archives (shop/category/tag) */
body.woocommerce.archive ul.products {
  position: relative;
  z-index: 1;
  gap: 16px !important;                 /* tight catalog spacing */
}

body.woocommerce.archive ul.products::before {
  content: "";
  position: absolute;
  inset: -18px -18px;                   /* bleed outside the grid edges */
  background: var(--catalog-bg, #f5f7fa); /* cool neutral (Amazon-esque) */
  border: 1px solid var(--catalog-border, #e5e7eb);
  border-radius: 14px;
  z-index: -1;
}

/* ---------- Product cards (Amazon-style) ---------- */
body.woocommerce.archive ul.products li.product {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  color: #111;                           /* force dark text inside light cards */
}
body.woocommerce.archive ul.products li.product:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  border-color: #d1d5db;
}

/* Image tile */
body.woocommerce.archive ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #f3f4f6;                  /* placeholder tone while loading */
}

/* Title, price, excerpt colors/layout */
body.woocommerce.archive ul.products li.product .woocommerce-loop-product__title {
  margin: 10px 12px 4px;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.35;
  color: #111;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.woocommerce.archive ul.products li.product .price {
  margin: 4px 12px 8px;
  color: #b12704;                        /* Amazon price red */
  font-weight: 700;
  font-size: 1rem;
}

body.woocommerce.archive .product-excerpt {
  margin: 0 12px 10px;
  font-size: .9rem;
  line-height: 1.45;
  color: #374151;                        /* quiet gray text */
}
body.woocommerce.archive .product-excerpt a { color: inherit; text-decoration: none; }
body.woocommerce.archive .product-excerpt a:hover { text-decoration: underline; }

/* Add-to-cart → small, catalogy, Amazon yellow */
body.woocommerce.archive ul.products li.product .button {
  width: calc(100% - 24px);
  margin: 8px 12px 14px;
  border-radius: 8px;
  background: #ffd814;
  color: #111;
  font-weight: 600;
  font-size: .9rem;
  transition: background .12s ease, transform .12s ease;
}
body.woocommerce.archive ul.products li.product .button:hover {
  background: #f7ca00;
  transform: translateY(-1px);
}

/* Sale badge tidy */
body.woocommerce.archive ul.products li.product .onsale {
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
}

/* Optional: tighter small screens */
@media (max-width: 544px) {
  body.woocommerce.archive ul.products { gap: 12px !important; }
}


/* Compact, catalogy controls */
.catalog-var-atc { padding: 8px 12px 12px; }
.catalog-var-select {
  width: 100%;
  margin: 6px 0 8px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: .92rem;
}
.catalog-var-add {
  width: 100%;
  border-radius: 8px;
  background: #ffd814;
  color: #111;
  font-weight: 600;
}
.catalog-var-add:hover { background: #f7ca00; }

/* Catalog variation dropdown ATC */
.catalog-var-add.button {
  width: 100%;
  border-radius: 8px;
  background: #ffd814;
  color: #111;
  font-weight: 600;
}
.catalog-var-add.button:hover { background: #f7ca00; }

/* ---------- Controls row: Add button + caret ---------- */
.cvp-controls{
  display:flex; gap:8px; align-items:center; padding:8px 12px 12px;
}
.cvp-controls .catalog-var-add.button{
  flex:1 1 auto; border-radius:10px; background:#ffd814; color:#111; font-weight:700;
}
.cvp-controls .catalog-var-add.button:hover{ background:#f7ca00; }
.cvp-toggle{
  flex:0 0 44px; height:44px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;
  font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
}

/* ---------- Modal (mobile-first bottom sheet) ---------- */
.cvp-open{ overflow:hidden; }
.cvp-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999; display:block;
}
.cvp-modal[hidden]{ display:none !important; }
.cvp-sheet{
  position:fixed; left:0; right:0; bottom:0; max-height:78vh; background:#fff; border-radius:16px 16px 0 0;
  box-shadow:0 -10px 30px rgba(0,0,0,.25); padding:12px 12px 18px; overflow:auto;
}
.cvp-close{
  position:absolute; right:8px; top:6px; width:36px; height:36px; border:0; background:transparent; font-size:24px;
}
.cvp-title{ font-weight:800; font-size:1rem; margin:4px 0 10px 6px; }

/* Options list */
.cvp-list{ list-style:none; margin:0; padding:0; }
.cvp-option{
  display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #e5e7eb; border-radius:10px; margin-bottom:8px;
}
.cvp-option input{ width:20px; height:20px; }
.cvp-option__label{ flex:1 1 auto; font-weight:600; }
.cvp-option__price{ flex:0 0 auto; font-weight:700; color:#111; }

/* Desktop: center modal and tighten */
@media (min-width: 782px){
  .cvp-sheet{ left:50%; right:auto; transform:translateX(-50%); width:520px; border-radius:16px; }
}

/* Controls row */
.cvp-controls{display:flex;gap:8px;align-items:center;padding:8px 12px 12px}
.cvp-controls .catalog-var-add.button{flex:1 1 auto;border-radius:10px;background:#ffd814;color:#111;font-weight:700}
.cvp-controls .catalog-var-add.button:hover{background:#f7ca00}
.cvp-toggle{flex:0 0 44px;height:44px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}

/* Global modal (bottom sheet on mobile) */
.cvp-open{overflow:hidden}
#cvp-global-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999}
#cvp-global-modal[hidden]{display:none!important}
#cvp-global-modal .cvp-sheet{position:fixed;left:0;right:0;bottom:0;max-height:78vh;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.25);padding:12px 12px 18px;overflow:auto}
#cvp-global-modal .cvp-close{position:absolute;right:8px;top:6px;width:36px;height:36px;border:0;background:transparent;font-size:24px}
#cvp-global-modal .cvp-title{font-weight:800;font-size:1rem;margin:4px 0 10px 6px}

/* Options list */
.cvp-list{list-style:none;margin:0;padding:0}
.cvp-option{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #e5e7eb;border-radius:10px;margin-bottom:8px}
.cvp-option input{width:20px;height:20px}
.cvp-option__label{flex:1 1 auto;font-weight:600}
.cvp-option__price{flex:0 0 auto;font-weight:700;color:#111}

/* Desktop: centered modal box */
@media (min-width:782px){
  #cvp-global-modal .cvp-sheet{left:50%;right:auto;transform:translateX(-50%);width:520px;border-radius:16px}
}