/* ==========================================================================
   Evo Aminoz v2: shop / catalog + product card. Tokens and rules: DESIGN.md.
   ========================================================================== */

/* ---------- Page header ---------- */
.shop-head{padding:0 0 8px;border-bottom:0}
.shop-head .breadcrumb{padding:28px 0 22px}
.shop-head .breadcrumb [aria-current]{color:var(--text);font-weight:600}
.shop-head .v2-h{font-size:clamp(34px,4.4vw,52px)}
.shop-head .v2-sub{margin-top:10px}
.shop-wrap .shop-layout{padding:28px 0 88px;gap:32px}

/* ---------- Build Your Bundle banner: split card. Copy left, five-vial image right, flush to the card edges and radius.
   Neutral card (--studio, the image background) + hairline. The image fades into the card on its left (desktop) or bottom (phones). ---------- */
.shop-pack{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;margin:0 0 20px;min-height:240px;overflow:hidden;
  border-radius:var(--r-lg);background:var(--studio);border:1px solid var(--line);color:var(--text);
}
.shop-pack-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:28px 0 28px 32px;position:relative;z-index:1}
.shop-pack-eyebrow{font:700 12px/1.2 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-text,#3d8bff);margin:0 0 6px}
.shop-pack-copy strong{font-size:clamp(24px,2.4vw,32px);line-height:1.05;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.shop-pack-sub{font-size:15px;color:var(--muted);margin-top:6px}
.shop-pack-go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;font-size:15px;color:var(--text);transition:color var(--t)}
.shop-pack-arrow{display:inline-flex}
.shop-pack-arrow svg{width:18px;height:18px}
.shop-pack-art{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 45%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%);mask-image:linear-gradient(to right,transparent 0,#000 12%)}
@media (max-width:700px){
  .shop-pack{grid-template-columns:minmax(0,1fr);min-height:0}
  .shop-pack-art{order:-1;height:auto;aspect-ratio:5/4;
    -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
  .shop-pack-copy{padding:4px 20px 22px}
}

/* ---------- Segmented controls (categories, availability) and custom sort ---------- */
.shop-main{min-width:0}
.shop-tools{display:flex;flex-direction:column;gap:14px;margin:0 0 24px;min-width:0}
.shop-tools > *{min-width:0;max-width:100%}
.shop-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.shop-seg{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:3px;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none}
.shop-seg::-webkit-scrollbar{display:none}
.shop-pill{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;height:36px;padding:0 16px;border-radius:999px;border:0;
  background:transparent;color:var(--ink-2);font:600 14px/1 var(--font);letter-spacing:-.01em;white-space:nowrap;
  transition:background-color var(--t),color var(--t)}
.shop-pill .n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;
  background:rgba(255,255,255,.08);font-size:12px;font-weight:600;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;
  transition:background-color var(--t),color var(--t)}
.shop-pill:hover{background:var(--surface-2);color:#fff}
.shop-pill.is-active{background:#fff;color:#05070b}
.shop-pill.is-active .n{background:rgba(5,7,11,.1);color:#05070b}
.shop-pill:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.shop-sort{display:flex;align-items:center;margin:0}
.shop-sort-box{position:relative;display:inline-flex;align-items:center;height:44px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-strong);
  transition:border-color var(--t)}
.shop-sort-box:hover{border-color:#fff}
.shop-sort-box:focus-within{border-color:var(--blue-line)}
.shop-sort-box label{flex:0 0 auto;padding:0 0 0 18px;font:600 14px/1 var(--font);color:var(--muted)}
/* .woocommerce-page select in evo.css forces a filled box with !important, so the reset needs it too */
.shop-sort-box select{appearance:none;-webkit-appearance:none;height:100%;min-height:0;padding:0 44px 0 8px;border:0!important;border-radius:999px!important;background:transparent!important;
  color:#fff;font:600 14px/1 var(--font);color-scheme:dark;cursor:pointer}
.shop-sort-box select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.shop-sort-chev{position:absolute;right:16px;top:50%;margin-top:-8px;pointer-events:none;color:#fff}
.shop-pager{margin-top:36px;text-align:center}
.shop-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;margin:0 3px;padding:0 12px;
  border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-2);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;
  transition:background-color var(--t),color var(--t),border-color var(--t)}
.shop-pager a.page-numbers:hover{border-color:#fff;color:#fff}
.shop-pager .page-numbers.current{background:#fff;border-color:#fff;color:#05070b}
.shop-main .coa-empty{padding:48px 0;color:var(--muted)}
.shop-main .coa-empty a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- Sidebar surroundings (Best Sellers glow card is untouched) ---------- */
.evo-shop-sidebar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.evo-categories-heading{font:700 12px/1 var(--font);letter-spacing:.2em;text-transform:none;color:var(--muted);margin:20px 4px 12px}
.evo-category-pill{background:var(--surface-2);border-color:var(--line);border-radius:var(--r-sm);
  transition:border-color var(--t),color var(--t)}
.evo-category-pill:hover{border-color:var(--blue-line);transform:none;box-shadow:none}
.evo-category-pill.active{background:var(--surface-2);border-color:var(--blue)}
.evo-category-pill:hover .evo-category-icon{box-shadow:none}
.evo-category-name{font-size:13.5px}

/* ---------- Grid: 3 columns beside the sidebar so cards breathe ---------- */
.shop-main .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.shop-main .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media (max-width:520px){
  .shop-main .product-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .shop-controls{flex-direction:column;align-items:flex-start}
}

/* ---------- Product card ---------- */
.pcard.pc{background:var(--studio);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:none;overflow:hidden;
}
.pcard.pc:hover{background:var(--studio);border-color:var(--line-strong);box-shadow:none;transform:none}
/* Card hover (owner, round 4): border brightens in gray, card stays still, vial lifts 4px, View fills white. */
.pcard.pc:hover .pc-view{background:#e6eaf2;color:#05070b;border-color:#e6eaf2}
.pcard.pc .pcard-media{aspect-ratio:1/1;background:var(--studio);overflow:hidden;border-radius:0}
.pcard.pc .pcard-media img{position:absolute;inset:auto;left:50%;top:50%;width:auto;height:76%;max-width:80%;padding:0;object-fit:contain;
  transform:translate(-50%,-50%);transition:transform var(--t)}
.pcard.pc:hover .pcard-media img{transform:translate(-50%,calc(-50% - 4px))}
.pcard.pc.is-out .pcard-media img{opacity:.55}
/* Badge row sits above the photo in the card's own padding: nothing is ever drawn over the vial or over another badge. */
.pcard.pc .pcard-flags{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:26px;padding:14px 16px 12px}
.pcard.pc .pcard-body{background:transparent;padding:16px 18px 18px;gap:0}
.pcard.pc .pcat{margin:0 0 8px;font:700 12px/1.2 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard.pc .pname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font:800 18px/1.2 var(--font);letter-spacing:-.02em;color:var(--text);min-height:0}
.pcard.pc .pname:hover{color:#fff}
.pcard.pc .pc-str{margin:6px 0 0;font-size:13.5px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.pcard.pc .pprice{display:flex;align-items:baseline;gap:6px;margin-top:12px;flex-wrap:wrap}
.pcard.pc .pfrom{font-size:13px;font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
.pcard.pc .pamt,.pcard.pc .pamt .amount{font:700 18px/1.2 var(--font);color:var(--text);font-variant-numeric:tabular-nums}
.pcard.pc .pamt del,.pcard.pc .pamt del .amount{font-size:14px;font-weight:500;color:var(--faint)}
.pcard.pc .pamt ins{text-decoration:none}
.pcard.pc .pbtns{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px}
.pcard.pc .pc-view{min-height:38px;padding:0 20px;font-size:14px}
.pcard.pc .pc-coa{font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:color var(--t)}
.pcard.pc .pc-coa:hover{color:#fff}
.pcard.pc a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:520px){.pcard.pc .pcard-body{padding:14px 16px 16px}}
/* PDP "similar" rail is 2-up on phones: tighten */
@media (max-width:640px){.similar .pcard.pc .pcard-body{padding:12px 12px 14px}.similar .pcard.pc .pname{font-size:15px}
  .similar .pcard.pc .pbtns{flex-direction:column;align-items:flex-start;gap:8px}.similar .pcard.pc .pcat{letter-spacing:.14em}}

@media (prefers-reduced-motion:reduce){
  .pcard.pc,.pcard.pc .pcard-media img,.shop-pack,.shop-pack-arrow,.shop-pill,.shop-sort-box,.evo-category-pill{transition:none}
  .pcard.pc:hover{transform:none}
  .pcard.pc:hover .pcard-media img{transform:translate(-50%,-50%)}
}
/* Phones: the pill row already lists categories, so the sidebar keeps only the client's Best Sellers card. */
/* Sidebar categories stay visible on phones (owner, round 4): three across from 561px, one per row below. */
@media (max-width:560px){.evo-shop-sidebar .evo-categories-grid{grid-template-columns:1fr}}
/* Phones: the five-vial strip is too narrow to read, so the banner is text + arrow only. */


/* Cards swapped out by assets/js/evo-shop-filter.js: [hidden] must beat the card display rules. */
.product-grid .pcard[hidden]{display:none!important}
/* Card actions (owner, 2026-11-01: "View" and "View COA" were too small to read as buttons on phones).
   Two equal buttons in one row at every width: View = white fill (primary), View COA = outline. Cases (no COA) get one full-width View. */
.pcard.pc .pbtns{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:10px;flex-direction:initial}
.pcard.pc .pbtns > :only-child{grid-column:1 / -1}
.pcard.pc .pc-view,.pcard.pc .pc-coa{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:999px;font:700 14px/1 var(--font);white-space:nowrap;text-decoration:none}
.pcard.pc .pc-view{background:#fff;color:#05070b;border:1px solid #fff}
.pcard.pc .pc-coa{background:transparent;color:var(--text);border:1px solid var(--line-strong);transition:border-color var(--t),color var(--t)}
.pcard.pc .pc-coa:hover{color:#fff;border-color:rgba(255,255,255,.32)}
.pcard.pc .pc-coa--soon{color:var(--muted);border-color:var(--line);font-weight:600;font-size:13px}
.pcard.pc .pc-coa--soon:hover{color:var(--muted);border-color:var(--line)}
/* Button icons (owner, 2026-11-01): document icon (Lucide file-text) before View COA. "View details" has no icon. */
.pcard.pc .pc-view,.pcard.pc .pc-coa,.v2-tile-btns .pc-view,.v2-tile-btns .pc-coa{gap:7px}
.pc-ico{flex:none;width:17px;height:17px}
/* Two equal buttons when they fit (each needs ~124px with its icon), otherwise they stack full width. No unequal pairs. */
.pcard.pc .pbtns,.v2-tile-btns{grid-template-columns:repeat(auto-fit,minmax(124px,1fr))}