/* ================================
   BULKWEED — Catalog Cards + Picker (clean build)
   ================================ */

:root{
  --catalog-bg:#f5f7fa; --catalog-border:#e5e7eb;
  --card-bg:#ffffff; --card-border:#e5e7eb;
  --price:#b12704; --cta:#ffd814; --cta-hover:#f7ca00;
  --text:#111; --muted:#374151;
}

/* Catalog panel */
body.woocommerce.archive .ast-woocommerce-container,
body.woocommerce.archive .ast-container{ overflow:visible; }
body.woocommerce.archive ul.products{ position:relative; z-index:0; gap:16px !important; }
body.woocommerce.archive ul.products::before{
  content:""; position:absolute; inset:-18px -18px; background:var(--catalog-bg);
  border:1px solid var(--catalog-border); border-radius:14px; z-index:-1; pointer-events:none;
}
@supports not (gap:1rem){ body.woocommerce.archive ul.products{margin:-8px} body.woocommerce.archive ul.products li.product{margin:8px} }

/* Cards */
body.woocommerce.archive ul.products li.product{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:10px;
  overflow:hidden; box-shadow:none; color:var(--text);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.woocommerce.archive ul.products li.product:hover{ transform:translateY(-2px); box-shadow:0 2px 10px rgba(0,0,0,.08); border-color:#d1d5db; }
body.woocommerce.archive ul.products li.product a img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#f3f4f6; }
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:var(--text);
  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:var(--price); font-weight:700; font-size:1rem; }
body.woocommerce.archive .product-excerpt{ margin:0 12px 10px; font-size:.9rem; line-height:1.45; color:var(--muted); }
body.woocommerce.archive .product-excerpt a{ color:inherit; text-decoration:none; }
body.woocommerce.archive .product-excerpt a:hover{ text-decoration:underline; }
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; }

/* Split controls (main CTA + attached caret) */
.cvp-controls{ display:flex; align-items:center; padding:8px 12px 12px; }
.cvp-controls.cvp-split{ gap:0; }
.cvp-controls .catalog-var-add.button{
  flex:1 1 auto; border-radius:10px 0 0 10px; background:var(--cta); color:var(--text); font-weight:700;
}
.cvp-controls .catalog-var-add.button:hover{ background:var(--cta-hover); }
.cvp-toggle{
  flex:0 0 40px; height:44px; background:var(--cta); color:var(--text);
  border:0; border-left:1px solid rgba(0,0,0,.12);
  border-radius:0 10px 10px 0; display:flex; align-items:center; justify-content:center; font-size:16px;
}

/* Hide any legacy selects */
.catalog-var-select{ display:none !important; }

/* Mobile bottom sheet */
.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:80vh; 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; color:var(--text); }

/* Anchored popover (desktop) */
.cvp-popover{
  position:fixed; z-index:10000; width:min(92vw,360px);
  background:#fff; border:1px solid var(--catalog-border); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.15); padding:10px 10px 12px;
}
.cvp-popover[hidden]{ display:none !important; }
.cvp-popover .cvp-title{ font-weight:800; font-size:.95rem; margin:4px 8px 8px; color:var(--text); }

/* Arrow for all positions */
.cvp-popover .cvp-popover-arrow{ position:absolute; width:0; height:0; filter: drop-shadow(0 -1px 0 rgba(0,0,0,.08)); }
.cvp-popover.pos-bottom .cvp-popover-arrow{ top:-8px;  border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #fff; }
.cvp-popover.pos-top    .cvp-popover-arrow{ bottom:-8px; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid #fff;   filter: drop-shadow(0 1px 0 rgba(0,0,0,.08)); }
.cvp-popover.pos-right  .cvp-popover-arrow{ left:-8px;  border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:8px solid #fff;    filter: drop-shadow(-1px 0 0 rgba(0,0,0,.08)); }
.cvp-popover.pos-left   .cvp-popover-arrow{ right:-8px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:8px solid #fff;   filter: drop-shadow(1px 0 0 rgba(0,0,0,.08)); }

/* Options list (readable) */
.cvp-list{ list-style:none; margin:0; padding:0; }
.cvp-option{
  display:flex; align-items:center; gap:12px; padding:12px;
  border:1px solid var(--catalog-border); border-radius:10px; margin-bottom:8px;
}
.cvp-option input{ width:20px; height:20px; accent-color:#111; }
.cvp-option__label{ flex:1 1 auto; font-weight:600; color:var(--text); }
.cvp-option__price{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.cvp-price-sale{ font-weight:800; color:var(--text); }
.cvp-price-reg{ font-weight:600; color:#6b7280; text-decoration:line-through; }

/* Single-product Add to cart (restore) */
.single-product .single_add_to_cart_button,
.single-product .variations_button .single_add_to_cart_button{
  background:var(--cta) !important; color:var(--text) !important; border-radius:10px !important;
  padding:.85rem 1.1rem !important; font-weight:700 !important; border:0 !important;
}
.single-product .single_add_to_cart_button:hover{ background:var(--cta-hover) !important; }

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







/* ===== Modernized card layout & split-button polish (append-only) ===== */

/* 1) Make each product card a vertical stack and pin controls at the bottom */
body.woocommerce.archive ul.products li.product{
  display:flex;            /* vertical layout */
  flex-direction:column;
  border-radius:14px;      /* softer card */
}

/* Title height → ~2 lines */
body.woocommerce.archive ul.products li.product .woocommerce-loop-product__title{
  min-height:2.6em;
}

/* Excerpt: clamp to 3 lines for consistent card heights */
body.woocommerce.archive .product-excerpt{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  min-height:3.9em;
}

/* Price spacing just above controls */
body.woocommerce.archive ul.products li.product .price{
  margin:8px 12px 8px;
}

/* 2) Controls block: dashed divider, pinned to bottom, tighter spacing */
.catalog-var-atc{
  margin:0 12px 14px;
  padding-top:10px;
  border-top:1px dashed var(--catalog-border);
}
body.woocommerce.archive ul.products li.product:hover .catalog-var-atc{
  border-top-color:#d1d5db;
}

/* 3) Split button: make it feel like one control */
.cvp-controls{ padding:0; gap:0; }
.cvp-controls .catalog-var-add.button{
  height:44px;
  border-radius:10px 0 0 10px;
}
.cvp-toggle{
  width:44px; height:44px; font-size:14px;
  transition:transform .15s ease, background .12s ease;
}
/* Rotate caret when active */
.catalog-var-atc.cvp-active .cvp-toggle{ transform:rotate(180deg); }

/* Focus states (keyboard accessible) */
.cvp-toggle:focus,
.cvp-controls .catalog-var-add.button:focus{
  outline:2px solid rgba(17,17,17,.9);
  outline-offset:2px;
}

/* 4) Softer image corners to match card radius */
body.woocommerce.archive ul.products li.product a img{
  border-radius:12px 12px 0 0;
}

/* 5) Micro-motion: slightly stronger hover on the card and clean active press */
body.woocommerce.archive ul.products li.product:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}
.cvp-controls .catalog-var-add.button:active{ transform:none; }

/* Optional: tighten mobile card spacing a touch */
@media (max-width:544px){
  .catalog-var-atc{ margin:0 10px 12px; }
  body.woocommerce.archive ul.products li.product .woocommerce-loop-product__title{ font-size:.98rem; }
}

/* ===== Jerry's layout: Title → Excerpt → Price → Controls ===== */

/* Make the card a vertical stack and explicitly order the blocks */
body.woocommerce.archive ul.products li.product{
  display:flex;
  flex-direction:column;
}

/* Title first */
body.woocommerce.archive ul.products li.product .woocommerce-loop-product__title{
  order:1;
  margin:12px 12px 6px;
}

/* Excerpt second (3-line clamp) */
body.woocommerce.archive .product-excerpt{
  order:2;
  margin:0 12px 8px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}

/* Price third */
body.woocommerce.archive ul.products li.product .price{
  order:3;
  margin:0 12px 10px;
}

/* Controls last, with a subtle divider */
.catalog-var-atc{
  order:4;
  margin:0 12px 14px;
  padding-top:10px;
  border-top:1px dashed var(--catalog-border);
}

/* ===== Split control polish: icon caret instead of big yellow block ===== */
.cvp-controls{ padding:0; gap:8px; }

/* Normal yellow Add button stays full pill */
.cvp-controls .catalog-var-add.button{
  height:44px;
  border-radius:10px;             /* not attached to caret */
}

/* Caret becomes a minimal icon button */
.cvp-toggle{
  width:44px; height:44px;
  border:1px solid var(--catalog-border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1;
  transition:transform .15s ease, background .12s ease, border-color .12s ease;
}
.cvp-toggle:hover{ background:#f9fafb; border-color:#d1d5db; }

/* Rotate when picker is open */
.catalog-var-atc.cvp-active .cvp-toggle{ transform:rotate(180deg); }

/* Keyboard focus rings */
.cvp-toggle:focus, .cvp-controls .catalog-var-add.button:focus{
  outline:2px solid rgba(17,17,17,.9); outline-offset:2px;
}

/* Keep card hover soft */
body.woocommerce.archive ul.products li.product:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}

/* Optional: slightly larger title on small screens */
@media (max-width:544px){
  body.woocommerce.archive ul.products li.product .woocommerce-loop-product__title{ font-size:1rem; }
}


/* === Minimal chevron trigger next to Add to cart (Font Awesome) === */

/* Keep the row horizontal with a small gap */
.cvp-controls{ display:flex; align-items:center; gap:8px; padding:0; }

/* The yellow Add button stays a normal pill */
.cvp-controls .catalog-var-add.button{
  height:44px; border-radius:10px;
}

/* Turn .cvp-toggle into an icon-only trigger (no box, no background) */
.cvp-toggle{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent !important; border:0 !important;
  color:var(--text); cursor:pointer; line-height:1;
  padding:0; margin:0;
  font-size:0;                /* hide any fallback glyph text */
  transition:transform .15s ease, opacity .12s ease;
}

/* Font Awesome chevron (solid) — falls back gracefully if FA 5 is used */
.cvp-toggle::before{
  content:"\f078";                 /* fa-chevron-down */
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free";
  font-weight:900;
  font-size:18px;
  line-height:1;
}

/* Hover/focus states without looking like a button */
.cvp-toggle:hover{ opacity:.85; }
.cvp-toggle:focus{
  outline:2px solid rgba(17,17,17,.9);
  outline-offset:2px; border-radius:8px;
}

/* Rotate chevron while the picker is open */
.catalog-var-atc.cvp-active .cvp-toggle{ transform:rotate(180deg); }

/* ===== UI polish: spacing, divider, hit area, radii, success state ===== */

/* Unify radii (softer, consistent) */
body.woocommerce.archive ul.products li.product{ border-radius:14px; }
body.woocommerce.archive ul.products li.product a img{ border-radius:14px 14px 0 0; }
.cvp-controls .catalog-var-add.button{ border-radius:10px; }

/* Title/Excerpt/Price spacing tweaks */
body.woocommerce.archive ul.products li.product .woocommerce-loop-product__title{
  margin:12px 12px 6px;
}
body.woocommerce.archive .product-excerpt{
  margin:0 12px 8px;
  -webkit-line-clamp:3; /* 3 lines for tighter cards */
}
body.woocommerce.archive ul.products li.product .price{
  margin:0 12px 14px;   /* +4px more before controls */
}

/* Controls divider: subtle solid instead of dashed */
.catalog-var-atc{
  margin:0 12px 14px;
  padding-top:8px;
  border-top:1px solid #eceff3; /* low-contrast solid */
}
body.woocommerce.archive ul.products li.product:hover .catalog-var-atc{
  border-top-color:#e3e7ec;
}

/* Chevron hit-area: 40x40, still visually minimal */
.cvp-controls{ display:flex; align-items:center; gap:8px; padding:0; }
.cvp-toggle{
  width:40px; height:40px;
  background:transparent !important; border:0 !important;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text); cursor:pointer; line-height:1; padding:0; margin:0;
  font-size:0;
  transition:transform .15s ease, opacity .12s ease;
}
.cvp-toggle::before{
  content:"\f078"; /* FA chevron-down */
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free";
  font-weight:900; font-size:18px; line-height:1;
}
.cvp-toggle:hover{ opacity:.85; }
.cvp-toggle:focus{ outline:2px solid rgba(17,17,17,.9); outline-offset:2px; border-radius:8px; }
.catalog-var-atc.cvp-active .cvp-toggle{ transform:rotate(180deg); }

/* Add-to-cart success flash (JS toggles .is-success) */
.cvp-controls .catalog-var-add.button.is-success{
  background:#16a34a !important;   /* green */
  color:#fff !important;
}
.cvp-controls .catalog-var-add.button.is-success:hover{
  background:#15803d !important;
}