/* ═══════════════════════════════════════════════════════════════════
   SFSC CATALOG — v1

   The WooCommerce shop / product-category archive, styled to match the
   homepage storefront system. Everything is scoped under `.sfsc-catalog`
   (which also carries the design tokens) so it can't leak into the header,
   footer, or other WooCommerce templates. Mirrors homepage.v9.css tokens,
   buttons and .pcard product cards; adds the catalog toolbar + filter pills
   + responsive grid.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── @font-face (global; used only under .sfsc-catalog) ─── */
@font-face{font-family:'Anek Telugu';src:url('/wp-content/plugins/sfsc-distributor-system/assets/fonts/Anek_Telugu/static/AnekTelugu-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Anek Telugu';src:url('/wp-content/plugins/sfsc-distributor-system/assets/fonts/Anek_Telugu/static/AnekTelugu-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Anek Telugu';src:url('/wp-content/plugins/sfsc-distributor-system/assets/fonts/Anek_Telugu/static/AnekTelugu-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/wp-content/plugins/sfsc-distributor-system/assets/fonts/Poppins/Poppins-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/wp-content/plugins/sfsc-distributor-system/assets/fonts/Poppins/Poppins-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/wp-content/plugins/sfsc-distributor-system/assets/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}

/* ─── Tokens + base (scoped) ─── */
.sfsc-catalog{
  --white:#ffffff; --soft:#f7f9fc; --surface:#eef3f9; --inset:#fafcff;
  --ink:#0b1a30; --body:#33465f; --muted:#64748b; --faint:#94a3b8;
  --border:#e2e8f0; --border-soft:#eef2f7;
  --accent:#1479c9; --accent-hover:#0f5fa6; --accent-soft:#eff6ff; --accent-ring:#bcdcff;
  --accent-bright:#38bdf8;
  --mint:#dbeafe; --info:#eff6ff; --info-ink:#1e40af;
  --amber-bg:#fef3c7; --amber-fg:#ca8a04;
  --navy:#0f1f3d; --navy-2:#132a52; --navy-deep:#0b1a30; --navy-foot:#0a1628;
  --radius:16px; --radius-sm:10px; --radius-pill:999px;
  --sh-xs:0 1px 2px rgba(11,26,48,.05);
  --sh-card:0 4px 18px rgba(11,26,48,.07);
  --sh-lift:0 12px 30px rgba(11,26,48,.12);
  --maxw:1200px;
  --font-display:'Anek Telugu', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  background:var(--white); color:var(--body);
  font-family:var(--font-body); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.sfsc-catalog *{box-sizing:border-box}
.sfsc-catalog img{max-width:100%;display:block}
.sfsc-catalog a{color:inherit;text-decoration:none}
.sfsc-catalog h1,.sfsc-catalog h2,.sfsc-catalog h3{font-family:var(--font-display);color:var(--ink);margin:0;font-weight:700;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.sfsc-catalog .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.sfsc-catalog .eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sfsc-catalog .sect-title{font-size:clamp(28px,3.4vw,40px)}
.sfsc-catalog .sect-sub{color:var(--muted);font-size:clamp(15px,1.4vw,17px);margin-top:10px;max-width:56ch}

/* ─── Buttons ─── */
.sfsc-catalog .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:15px;border-radius:99px;padding:14px 26px;cursor:pointer;border:1px solid transparent;transition:transform .18s,background .2s,box-shadow .2s;white-space:nowrap}
.sfsc-catalog .btn--dark{background:var(--ink);color:#fff}
.sfsc-catalog .btn--dark:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
.sfsc-catalog .btn--ghost{background:var(--white);color:var(--ink);border-color:var(--border)}
.sfsc-catalog .btn--ghost:hover{border-color:var(--ink)}
.sfsc-catalog .btn--sm{padding:9px 18px;font-size:13px}

/* ═══════════ CATALOG SECTION ═══════════ */
.sfsc-catalog .cat{padding:clamp(28px,4vw,52px) 0 clamp(56px,7vw,96px)}
.sfsc-catalog .cat__head{margin-bottom:clamp(20px,3vw,30px)}
.sfsc-catalog .cat__title{font-size:clamp(32px,4.6vw,52px);margin-top:8px}

/* toolbar — search left, sort right */
.sfsc-catalog .cat__toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.sfsc-catalog .cat__search{position:relative;flex:1 1 320px;min-width:220px;max-width:560px}
.sfsc-catalog .cat__search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.sfsc-catalog .cat__search input{width:100%;height:48px;border:1px solid var(--border);border-radius:99px;background:var(--soft);padding:0 18px 0 44px;font-family:var(--font-body);font-size:14px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.sfsc-catalog .cat__search input::placeholder{color:var(--faint)}
.sfsc-catalog .cat__search input:focus{background:var(--white);border-color:var(--accent-ring);box-shadow:0 0 0 4px var(--accent-soft)}
.sfsc-catalog .cat__sort{position:relative;display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.sfsc-catalog .cat__sort>span{font-size:13px;color:var(--muted);white-space:nowrap}
.sfsc-catalog .cat__sort select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:1px solid var(--border);border-radius:99px;background:var(--white);padding:11px 40px 11px 18px;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;outline:none;transition:border-color .15s}
.sfsc-catalog .cat__sort select:hover{border-color:var(--ink)}
.sfsc-catalog .cat__sort select:focus-visible{border-color:var(--accent-ring);box-shadow:0 0 0 4px var(--accent-soft)}
.sfsc-catalog .cat__sort .chev{position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}

/* category filter pills */
.sfsc-catalog .cat__pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.sfsc-catalog .pill{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--body);background:var(--white);border:1px solid var(--border);border-radius:99px;padding:9px 18px;cursor:pointer;transition:background .18s,color .18s,border-color .18s;white-space:nowrap}
.sfsc-catalog .pill:hover{border-color:var(--accent-ring);color:var(--ink)}
.sfsc-catalog .pill.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.sfsc-catalog .pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.sfsc-catalog .cat__meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--muted);margin:0 0 16px}

/* ─── Product grid + cards (mirrors homepage .pcard) ─── */
.sfsc-catalog .cat__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:520px){.sfsc-catalog .cat__grid{grid-template-columns:repeat(2,1fr);gap:20px}.sfsc-catalog .pcard__img{height:230px}}
@media(min-width:900px){.sfsc-catalog .cat__grid{grid-template-columns:repeat(3,1fr);gap:24px}}

.sfsc-catalog .pcard{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
.sfsc-catalog .pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-card);border-color:var(--accent-ring)}
/* Uniform soft-blue image background — !important overrides the inline per-card
   tint the template outputs, so all cards match regardless of PHP/opcache state. */
.sfsc-catalog .pcard__img{height:160px;display:flex;align-items:center;justify-content:center;position:relative;padding:18px;background:linear-gradient(160deg,#dbeafe,#eff6ff)!important}
/* Desktop: bigger cards so the bottle labels are readable. */
@media(min-width:900px){
  .sfsc-catalog .pcard__img{height:340px;padding:24px}
  .sfsc-catalog .pcard__body{padding:20px}
  .sfsc-catalog .pcard__name{font-size:19px}
  .sfsc-catalog .pcard__price b{font-size:19px}
}
.sfsc-catalog .pcard__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(11,26,48,.14))}
.sfsc-catalog .pcard__tag{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--info-ink);background:rgba(255,255,255,.82);border-radius:99px;padding:4px 10px}
.sfsc-catalog .pcard__body{padding:16px;display:flex;flex-direction:column;flex:1;border-top:1px solid var(--border-soft)}
.sfsc-catalog .pcard__row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sfsc-catalog .pcard__name{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);line-height:1.15}
.sfsc-catalog .pcard__price{font-family:var(--font-mono);font-size:12px;color:var(--muted);text-align:right;line-height:1.2;white-space:nowrap}
.sfsc-catalog .pcard__price b{display:block;font-size:17px;color:var(--ink);font-weight:600}
.sfsc-catalog .pcard__sub{color:var(--muted);font-size:13px;margin:4px 0 14px}
.sfsc-catalog .pcard__btns{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.sfsc-catalog .pcard__btns .btn{width:100%}
.sfsc-catalog .pcard__ph{display:flex;align-items:center;justify-content:center;color:var(--accent-ring)}
.sfsc-catalog .pcard__ph svg{width:auto;height:78%;max-height:150px;opacity:.9}

/* empty state */
.sfsc-catalog .cat__empty{text-align:center;color:var(--muted);font-size:15px;padding:48px 0}
.sfsc-catalog .cat__reset{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--accent);background:none;border:0;cursor:pointer;padding:0 2px;text-decoration:underline;text-underline-offset:3px}
.sfsc-catalog .cat__reset:hover{color:var(--accent-hover)}

/* small screens: tighter cards */
@media(max-width:519px){
  .sfsc-catalog .cat__toolbar{gap:12px}
  /* "Sort by" → one clean full-width pill: muted label + borderless select + chevron */
  .sfsc-catalog .cat__sort{width:100%;height:48px;gap:8px;padding:0 16px;border:1px solid var(--border);border-radius:99px;background:var(--white);justify-content:flex-start}
  .sfsc-catalog .cat__sort>span{font-size:13px;color:var(--muted);flex:0 0 auto}
  .sfsc-catalog .cat__sort select{flex:1;height:100%;border:0;background:transparent;padding:0 22px 0 0;font-size:14px;font-weight:600;color:var(--ink)}
  .sfsc-catalog .cat__sort select:focus-visible{box-shadow:none}
  .sfsc-catalog .cat__sort .chev{right:16px}
  .sfsc-catalog .pcard__img{padding:12px}
  .sfsc-catalog .pcard__body{padding:12px}
  .sfsc-catalog .pcard__name{font-size:15px}
  .sfsc-catalog .pcard__price b{font-size:15px}
  .sfsc-catalog .pcard__sub{font-size:12px;margin-bottom:10px}
}

@media(prefers-reduced-motion:reduce){.sfsc-catalog *{transition:none!important;animation:none!important}}