/* AdNeed public portfolio ("Order" theme) — Step 9 restyle.
   This stylesheet is intentionally standalone and never shares tokens with
   /css/adneed.css: a business's public catalog must never visually compete
   with, or be mistaken for, AdNeed's own product/brand surfaces. Typography
   stays deliberately different from AdNeed's own Sora/Manrope for the same
   reason, even though the accent colors below lean warm like the AdNeed
   mark.

   --p-font-heading / --p-font-body default to the original Fraunces/Inter
   pairing (Basic theme) so a business with no portfolioFont saved yet (or
   simply on a page where font-utils.js hasn't run) renders identically to
   before the Portfolio Font feature existed. Standard/Premium businesses
   get these two variables overridden inline by font-utils.js's
   applyFontVariables() (see portfolio.js renderBusiness()) once their
   chosen Google Fonts pair has been requested. */
:root{
  --p-font-heading:'Fraunces', serif;
  --p-font-body:'Inter', sans-serif;
  --p-ink:#1A1A1A;
  --p-ink-muted:#6B6B6B;
  --p-bg:#FBFAF8;
  --p-surface:#FFFFFF;
  --p-border:#EAE7E1;
  --p-navy:#101820;
  --p-cover-start:#F5A623;
  --p-cover-end:#D6401C;
  --p-price:#D6401C;
  --p-cyan:#1CA8DD;
  --p-cyan-dark:#1478A8;
  --p-success:#1F9D55;
  --p-shadow: 0 1px 2px rgba(16,24,32,.05), 0 10px 28px rgba(16,24,32,.08);
  --p-radius-lg:20px;
  --p-radius-md:14px;
  --p-radius-sm:10px;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0; overflow-x:hidden; max-width:100%;}
body{
  background:var(--p-bg); color:var(--p-ink);
  font-family:var(--p-font-body),-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--p-font-heading); margin:0;}
img{max-width:100%; display:block;}
.hidden{display:none !important;}
button{font-family:inherit;}

/* ---------------------------------------------------------- STATE SCREEN */
.state-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; text-align:center; background:var(--p-bg);
}
.state-box{max-width:340px;}
.state-spinner{
  width:34px; height:34px; margin:0 auto 18px; border-radius:50%;
  border:3px solid var(--p-border); border-top-color:var(--p-cover-end);
  animation:p-spin .8s linear infinite;
}
@keyframes p-spin{to{transform:rotate(360deg);}}
.state-box h1{font-size:19px; font-weight:600; margin-bottom:8px;}
.state-box p{color:var(--p-ink-muted); font-size:14px; line-height:1.5; margin:0 0 20px;}
.state-back{color:var(--p-cover-end); font-weight:600; font-size:13px; text-decoration:none;}

/* ------------------------------------------------------- GALLERY GATE
   Private-gallery password screen (public/gallery-shell/). Reuses the
   same --p-* tokens as the rest of this file rather than pulling in
   /css/adneed.css's separate auth-card look — a private gallery link is
   still a business's own public-facing surface, so it should read as
   "this portfolio, password-locked", not as an AdNeed account screen. */
.gate-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--p-bg);
}
.gate-box{
  max-width:360px; width:100%; background:var(--p-surface); border:1px solid var(--p-border);
  border-radius:var(--p-radius-lg); padding:32px 28px; box-shadow:var(--p-shadow); text-align:center;
}
.gate-icon{
  width:42px; height:42px; margin:0 auto 16px; border-radius:50%;
  background:linear-gradient(135deg, var(--p-cover-start), var(--p-cover-end));
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.gate-icon svg{width:20px; height:20px;}
.gate-box h1{font-size:19px; font-weight:600; margin-bottom:6px;}
.gate-sub{color:var(--p-ink-muted); font-size:14px; line-height:1.5; margin:0 0 20px;}
.gate-box #gateAlert .alert{border-radius:12px; padding:11px 14px; font-size:13px; margin-bottom:16px; text-align:left;}
.gate-box #gateAlert .alert-error{background:#FDECEC; color:#C0392B; border:1px solid #F5C6C6;}
.gate-field{margin-bottom:18px; text-align:left;}
.gate-field label{display:block; font-size:12px; font-weight:600; color:var(--p-ink-muted); margin-bottom:6px;}
.gate-field input{
  width:100%; padding:11px 14px; border:1px solid var(--p-border); border-radius:var(--p-radius-sm);
  font-size:15px; font-family:inherit; color:var(--p-ink); background:var(--p-bg);
}
.gate-field input:focus{outline:none; border-color:var(--p-cover-end);}
.gate-submit{
  width:100%; padding:12px; border:none; border-radius:var(--p-radius-sm); background:var(--p-navy);
  color:#fff; font-size:15px; font-weight:600; cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:8px;
}
.gate-submit:hover:not(:disabled){opacity:.92;}
.gate-submit:disabled{opacity:.6; cursor:not-allowed;}
.gate-submit .spinner{
  width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:p-spin .7s linear infinite; display:inline-block;
}

/* ------------------------------------------------------ GALLERY HEADER
   Simple centered name banner shown above the unlocked product grid —
   deliberately lighter than the full p-header (no cover/logo/tagline/
   contact row): a private gallery is a curated subset view, not the
   business's whole portfolio identity. */
.gallery-header{max-width:720px; margin:0 auto; padding:28px 20px 4px; text-align:center;}
.gallery-header h1{font-size:22px; font-weight:600;}

/* ---------------------------------------------------------------- COVER */
.p-cover{
  height:180px; width:100%;
  background:linear-gradient(135deg, var(--p-cover-start), var(--p-cover-end));
  position:relative;
}
.portfolio.no-cover .p-cover{height:140px;}
.p-cover-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.18) 100%);
}

/* -------------------------------------------------------------- HEADER */
.p-header{
  max-width:720px; margin:0 auto; padding:0 20px 20px; text-align:center;
  position:relative;
}
.p-logo-badge{
  width:84px; height:84px; border-radius:20px;
  margin:-42px auto 14px; display:flex; align-items:center; justify-content:center;
  font-family:var(--p-font-heading); font-weight:600; font-size:26px; color:var(--p-navy);
  overflow:hidden;
}
/* Initials fallback (no logo uploaded): solid box + border. */
.p-logo-badge:not(.has-logo){ background:var(--p-surface); border:2px solid var(--p-border); }
.p-logo-badge img{width:100%; height:100%;}
/* A logo with real transparency (a round badge, a die-cut icon, plain
   text with no background — detected pixel-by-pixel via
   detectSquareLogoShape() in color-utils.js) gets no box border at all:
   the outline is traced directly onto its own non-transparent pixels
   via stacked drop-shadow filters, so it hugs the actual artwork
   instead of boxing an irregular shape and leaving empty corners. 4px
   padding reserved so that outline always has room to render before
   hitting the overflow:hidden edge. */
.p-logo-badge.has-logo:not(.logo-square){ background:transparent; }
.p-logo-badge.has-logo:not(.logo-square) img{
  object-fit:contain; padding:4px;
  filter:
    drop-shadow(1px 0 0 var(--p-border))
    drop-shadow(-1px 0 0 var(--p-border))
    drop-shadow(0 1px 0 var(--p-border))
    drop-shadow(0 -1px 0 var(--p-border));
}
/* A logo that already fills its own bounding rectangle — any JPEG, or a
   PNG whose corners come back opaque from that same pixel check —
   outline lives on the box itself instead: a pixel-traced outline
   breaks down right at this badge's rounded corners, a real border
   doesn't. */
.p-logo-badge.has-logo.logo-square{ background:transparent; border:2px solid var(--p-border); }
.p-logo-badge.has-logo.logo-square img{ object-fit:cover; }
.p-name{font-size:26px; font-weight:700; letter-spacing:-.3px;}
.p-tagline{font-size:15px; font-weight:600; color:var(--p-ink); margin-top:4px;}
.p-description{font-size:14px; color:var(--p-ink-muted); line-height:1.6; margin-top:18px; padding-top:16px; border-top:1px solid var(--p-border); max-width:480px; margin-left:auto; margin-right:auto;}

/* All four pills must fit on one line without scrolling — sized to fit
   real phone widths (down to ~320px) via the narrow-screen rule below,
   rather than letting the row scroll. overflow-x:auto here previously let
   a touch-drag on the row scroll the WHOLE PAGE sideways on some devices
   instead of just this row, which is why it's gone now — see the
   html/body overflow-x:hidden safety net further up this file too. */
.p-contact-row{
  display:flex; flex-wrap:nowrap; gap:6px; justify-content:center; margin-top:16px; max-width:100%;
}
.p-contact-pill{
  display:inline-flex; align-items:center; gap:5px; padding:8px 12px; flex-shrink:0;
  border-radius:999px; border:1.5px solid var(--p-border); background:var(--p-surface);
  color:var(--p-ink); font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:transform .12s ease, border-color .12s ease;
}
.p-contact-pill:hover{transform:translateY(-1px); border-color:var(--p-ink-muted);}
.p-contact-pill.whatsapp{background:#25D366; border-color:#25D366; color:#fff;}
.p-contact-pill svg, .p-contact-pill img{width:15px; height:15px; flex-shrink:0;}

/* Narrow phones (~360px and under, e.g. older/smaller Android devices):
   trims header padding and pill sizing further so the same four pills
   still fit on one row instead of needing to shrink below legible size
   or wrap. */
@media (max-width:380px){
  .p-header{padding-left:12px; padding-right:12px;}
  .p-contact-row{gap:4px;}
  .p-contact-pill{padding:7px 9px; font-size:11px; gap:4px;}
  .p-contact-pill svg, .p-contact-pill img{width:13px; height:13px;}
}

/* ------------------------------------------------------------- SOCIAL LINKS
   Medium solid brand-colour circles for the owner's Instagram/Facebook/
   YouTube links (Profile page → Social Links), shown as their own row in
   the page footer, above the "Powered by AdNeed" badge. A business with
   none configured renders no children here — the :empty rule below
   collapses the row so it takes no vertical space instead of leaving a gap. */
.p-social-row{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  max-width:720px; margin:28px auto 8px; padding:0 20px;
}
.p-social-row:empty{ display:none; margin:0; }
.p-social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:none; color:#fff;
  transition:transform .12s ease, filter .12s ease;
}
.p-social-link:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.p-social-link svg{ width:20px; height:20px; flex-shrink:0; }
/* Solid brand-colour fill at rest — this is the deliberate "link-in-bio"
   treatment (Linktree/Instagram-bio style): bigger, filled, high-contrast
   icons meant to be noticed and tapped, rather than the understated tinted
   outline other in-page icon rows (like the contact pills) use. */
.p-social-link.instagram{ background:#E1306C; }
.p-social-link.facebook{ background:#1877F2; }
.p-social-link.youtube{ background:#FF0000; }
.p-social-link.twitter{ background:#000000; }
.p-social-link.linkedin{ background:#0A66C2; }
.p-social-link.pinterest{ background:#E60023; }
.p-social-link.tiktok{ background:#FE2C55; }

@media (max-width:380px){
  .p-social-link{ width:38px; height:38px; }
  .p-social-link svg{ width:17px; height:17px; }
}

/* --------------------------------------------------- STICKY IDENTITY BAR
   Fixed at the very top, slid up out of view by default and only slid
   down once the main header scrolls past (portfolio.js toggles the
   .scrolled class on .portfolio via IntersectionObserver). --p-sticky-h
   is the single source of truth for its height — the search bar's own
   sticky offset (below) reads the same variable so the two never overlap
   regardless of future height tweaks here. */
:root{ --p-sticky-h:52px; }
.p-sticky-header{
  position:fixed; top:0; left:0; right:0; z-index:30; height:var(--p-sticky-h);
  background:var(--p-surface); border-bottom:1px solid var(--p-border);
  box-shadow:0 2px 10px rgba(16,24,32,.06);
  transform:translateY(-100%); transition:transform .18s ease;
}
.portfolio.scrolled .p-sticky-header{ transform:translateY(0); }
.p-sticky-inner{
  max-width:720px; height:100%; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; gap:10px;
}
.p-sticky-logo{
  width:30px; height:30px; border-radius:8px; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--p-font-heading); font-weight:600; font-size:13px; color:var(--p-navy);
}
/* Initials fallback (no logo uploaded): solid box + border. */
.p-sticky-logo:not(.has-logo){ background:var(--p-bg); border:1px solid var(--p-border); }
.p-sticky-logo img{width:100%; height:100%;}
/* Same detectSquareLogoShape() split as .p-logo-badge above, scaled
   down for this 30px badge — 2px is enough room here for the traced
   outline to clear the overflow:hidden edge without shrinking an
   already-small logo too much. */
.p-sticky-logo.has-logo:not(.logo-square){ background:transparent; }
.p-sticky-logo.has-logo:not(.logo-square) img{
  object-fit:contain; padding:2px;
  filter:
    drop-shadow(1px 0 0 var(--p-border))
    drop-shadow(-1px 0 0 var(--p-border))
    drop-shadow(0 1px 0 var(--p-border))
    drop-shadow(0 -1px 0 var(--p-border));
}
.p-sticky-logo.has-logo.logo-square{ background:transparent; border:1px solid var(--p-border); }
.p-sticky-logo.has-logo.logo-square img{ object-fit:cover; }
.p-sticky-name{
  flex:1; min-width:0; font-size:15px; font-weight:700; letter-spacing:-.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Standard/Premium multi-page catalog nav, compact version for the sticky
   bar — stays entirely invisible (no gap, no border) while empty (a
   business with only its one default catalog), per the comment in
   index.html. Scrolls horizontally rather than wraps, so the identity
   bar's height never changes regardless of how many catalogs exist. */
.p-sticky-pages{ flex-shrink:0; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.p-sticky-pages::-webkit-scrollbar{ display:none; }
.p-sticky-pages:empty{ display:none; }
.p-sticky-pages .p-catalog-pill{ padding:5px 10px; font-size:11.5px; }

/* -------------------------------------------------------- CATALOG NAV
   The always-visible version, shown in the main header under the contact
   pills. Same underlying data/links as .p-sticky-pages above (see
   renderCatalogNav() in portfolio.js) — this is just the larger, non-
   condensed presentation for when the page hasn't scrolled yet. Hidden
   entirely for a business with only its one default catalog. */
.p-catalog-nav{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:10px; max-width:100%;
}
.p-catalog-pill{
  display:inline-flex; align-items:center; padding:7px 14px; flex-shrink:0;
  border-radius:999px; border:1.5px solid var(--p-border); background:var(--p-surface);
  color:var(--p-ink-muted); font-size:12.5px; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:transform .12s ease, border-color .12s ease, color .12s ease, background .12s ease;
}
.p-catalog-pill:hover{transform:translateY(-1px); border-color:var(--p-ink-muted);}
.p-catalog-pill.active{background:var(--p-navy); border-color:var(--p-navy); color:#fff;}

/* -------------------------------------------------------------- CONTROLS */
.p-controls{
  max-width:720px; margin:0 auto; padding:0 20px 16px;
  position:sticky; top:0; z-index:5; background:var(--p-bg);
  transition:top .18s ease;
}
.portfolio.scrolled .p-controls{ top:var(--p-sticky-h); }
.p-search-wrap{position:relative;}
.p-search-icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--p-ink-muted); pointer-events:none;
}
.p-search{
  width:100%; padding:13px 14px 13px 42px; border-radius:14px;
  border:1.5px solid var(--p-border); background:var(--p-surface);
  font-family:var(--p-font-body); font-size:14px; color:var(--p-ink);
}
.p-search:focus{outline:none; border-color:var(--p-cyan);}
.p-chips{display:flex; gap:8px; overflow-x:auto; margin-top:12px; padding-bottom:2px; -webkit-overflow-scrolling:touch;}
.p-chips::-webkit-scrollbar{display:none;}
.p-chip{
  flex-shrink:0; padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600;
  border:1.5px solid var(--p-border); background:var(--p-surface); color:var(--p-ink-muted);
  cursor:pointer; white-space:nowrap; transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.p-chip.active{background:var(--p-navy); border-color:var(--p-navy); color:#fff;}

/* ------------------------------------------------------------------ GRID */
.p-main{max-width:720px; margin:0 auto; padding:4px 20px 100px;}
.p-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
@media(min-width:520px){ .p-grid{grid-template-columns:1fr 1fr 1fr;} }

.p-card{
  background:var(--p-surface); border:1px solid var(--p-border); border-radius:var(--p-radius-md);
  overflow:hidden; cursor:pointer; box-shadow:var(--p-shadow); transition:transform .12s ease;
}
.p-card:hover{transform:translateY(-2px);}
.p-card-thumb{
  position:relative; aspect-ratio:1/1; background:var(--p-bg);
  display:flex; align-items:center; justify-content:center;
  color:var(--p-ink-muted); font-size:11px; overflow:hidden;
}
.p-card-thumb img{width:100%; height:100%; object-fit:cover;}
.p-card-quickadd{
  position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%;
  background:rgba(16,24,32,.72); color:#fff; border:none; font-size:18px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(2px);
}
.p-card-body{padding:12px;}
.p-card-cat{
  display:block; font-size:10px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--p-ink-muted); font-weight:700; margin-bottom:4px;
}
.p-card-name{
  font-family:var(--p-font-body); font-size:13.5px; font-weight:600; line-height:1.35;
  margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.p-card-price{font-family:var(--p-font-heading); font-weight:600; font-size:15px; color:var(--p-price); margin-bottom:10px;}
.p-card-order{
  width:100%; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 10px; border-radius:10px; border:none; cursor:pointer;
  background:var(--p-cyan); color:#fff; font-size:13px; font-weight:700;
  transition:background .15s ease;
}
.p-card-order svg{width:15px; height:15px;}
.p-card-order:hover{background:var(--p-cyan-dark);}
.p-card-order.added{background:var(--p-success);}

.p-empty{
  text-align:center; padding:70px 20px; color:var(--p-ink-muted); grid-column:1/-1;
}
.p-empty svg{width:44px; height:44px; margin:0 auto 14px; opacity:.5;}
.p-empty p{font-size:14px; margin:0;}

/* ---------------------------------------------------------------- BADGE */
.p-badge{
  display:flex; align-items:center; justify-content:center; gap:5px;
  max-width:720px; margin:0 auto 32px; padding:0 20px;
  font-size:12px; color:var(--p-ink-muted); text-decoration:none;
}
.p-badge strong{color:var(--p-ink); font-family:var(--p-font-heading);}

/* ---------------------------------------------------------------- MODAL */
.p-modal-overlay{
  position:fixed; inset:0; background:rgba(16,24,32,.55); z-index:50;
  display:flex; align-items:flex-end; justify-content:center;
}
@media(min-width:640px){ .p-modal-overlay{align-items:center; padding:24px;} }
.p-modal{
  background:var(--p-surface); width:100%; max-width:480px; max-height:92vh;
  border-radius:22px 22px 0 0; overflow-y:auto; position:relative;
}
@media(min-width:640px){ .p-modal{border-radius:var(--p-radius-lg); max-height:88vh;} }
.p-modal-close{
  position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px;
  border-radius:50%; background:rgba(16,24,32,.6); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.p-modal-close svg{width:18px; height:18px;}
.p-modal-imagewrap{
  position:relative; background:var(--p-bg); display:flex; align-items:center; justify-content:center;
  min-height:220px; max-height:52vh; overflow:hidden;
}
.p-modal-imagewrap img{width:100%; height:100%; max-height:52vh; object-fit:contain;}
.p-modal-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.9); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(16,24,32,.15);
}
.p-modal-nav svg{width:18px; height:18px; color:var(--p-ink);}
.p-modal-prev{left:10px;}
.p-modal-next{right:10px;}
.p-modal-thumbs{display:flex; gap:8px; padding:12px 16px 0; overflow-x:auto;}
.p-modal-thumbs img{
  width:52px; height:52px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:2px solid transparent; opacity:.6;
}
.p-modal-thumbs img.active{border-color:var(--p-cyan); opacity:1;}
.p-modal-body{padding:18px 20px 24px;}
.p-modal-category{
  display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--p-ink-muted); font-weight:700; margin-bottom:6px;
}
.p-modal-name{font-size:19px; font-weight:600; line-height:1.3;}
.p-modal-price{font-family:var(--p-font-heading); font-weight:600; font-size:18px; color:var(--p-price); margin:8px 0;}
.p-modal-description{font-size:13.5px; color:var(--p-ink-muted); line-height:1.6; margin:0 0 12px;}
.p-modal-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;}
.p-modal-tags span{
  font-size:11px; padding:4px 10px; border-radius:999px; background:var(--p-bg);
  border:1px solid var(--p-border); color:var(--p-ink-muted);
}
.p-modal-qtyrow{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.p-modal-qtylabel{font-size:13px; font-weight:600; color:var(--p-ink-muted);}
.p-qty-stepper{
  display:flex; align-items:center; gap:0; border:1.5px solid var(--p-border); border-radius:10px; overflow:hidden;
}
.p-qty-stepper button{
  width:36px; height:36px; border:none; background:var(--p-bg); font-size:17px; cursor:pointer; color:var(--p-ink);
}
.p-qty-stepper span{width:36px; text-align:center; font-weight:600; font-size:14px;}
.p-modal-addbtn{
  width:100%; padding:14px; border-radius:12px; border:none; cursor:pointer;
  background:var(--p-cyan); color:#fff; font-weight:700; font-size:14.5px; margin-bottom:10px;
  transition:background .15s ease;
}
.p-modal-addbtn.added{background:var(--p-success);}
.p-modal-addbtn:hover{background:var(--p-cyan-dark);}
.p-modal-whatsapp{
  display:block; text-align:center; font-size:13px; color:var(--p-ink-muted); text-decoration:underline;
}

/* ------------------------------------------------------- GALLERY MODE
   Applied to .portfolio when the active catalog's mode is "gallery" (see
   portfolio.js's loadPortfolio()). A "mixed" catalog hides these same
   elements per-product instead (via .p-card-gallery / the modal's own
   hidden-class toggles), so it never needs this page-wide class. Cart
   items added earlier from a different (shop/mixed) catalog aren't lost
   — they're just not reachable from this particular gallery page. */
.catalog-gallery .cart-fab, .catalog-gallery .cart-overlay{ display:none !important; }

/* --------------------------------------------------------------- CART FAB */
.cart-fab{
  position:fixed; bottom:22px; right:22px; z-index:40; width:58px; height:58px; border-radius:50%;
  background:var(--p-navy); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(16,24,32,.3);
}
.cart-fab svg{width:24px; height:24px;}
.cart-fab-badge{
  position:absolute; top:-4px; right:-4px; background:var(--p-price); color:#fff;
  font-size:11px; font-weight:700; min-width:20px; height:20px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:0 5px; border:2px solid var(--p-bg);
}

/* ------------------------------------------------------------- CART DRAWER */
.cart-overlay{
  position:fixed; inset:0; background:rgba(16,24,32,.55); z-index:50;
  display:flex; align-items:flex-end; justify-content:center;
}
@media(min-width:640px){ .cart-overlay{align-items:center; padding:24px;} }
.cart-drawer{
  background:var(--p-surface); width:100%; max-width:440px; max-height:88vh;
  border-radius:22px 22px 0 0; display:flex; flex-direction:column; overflow:hidden;
}
@media(min-width:640px){ .cart-drawer{border-radius:var(--p-radius-lg);} }
.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--p-border); flex-shrink:0;
}
.cart-drawer-head h2{font-size:17px; font-weight:600;}
.cart-close{
  width:32px; height:32px; border-radius:50%; border:none; background:var(--p-bg); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.cart-close svg{width:16px; height:16px;}
.cart-items{overflow-y:auto; padding:8px 20px; flex:1;}
.cart-empty{padding:40px 20px; text-align:center; color:var(--p-ink-muted); font-size:13.5px;}
.cart-item{
  display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--p-border);
}
.cart-item:last-child{border-bottom:none;}
.cart-item-thumb{
  width:52px; height:52px; border-radius:10px; background:var(--p-bg); overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--p-ink-muted); text-align:center;
}
.cart-item-thumb img{width:100%; height:100%; object-fit:cover;}
.cart-item-info{min-width:0;}
.cart-item-name{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cart-item-price{font-size:12px; color:var(--p-price); font-weight:600; margin-top:2px;}
.cart-item-stepper{
  display:flex; align-items:center; border:1.5px solid var(--p-border); border-radius:8px; overflow:hidden; grid-row:1; grid-column:3;
}
.cart-item-stepper button{width:26px; height:26px; border:none; background:var(--p-bg); font-size:14px; cursor:pointer;}
.cart-item-stepper span{width:22px; text-align:center; font-size:12px; font-weight:600;}
.cart-item-remove{
  grid-column:3; grid-row:2; justify-self:end; border:none; background:none; color:var(--p-ink-muted);
  font-size:11px; text-decoration:underline; cursor:pointer; padding:2px 0 0;
}
.cart-drawer-footer{padding:14px 20px 20px; border-top:1px solid var(--p-border); flex-shrink:0;}
.cart-subtotal{
  display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:15px; margin-bottom:12px;
}
.cart-subtotal small{display:block; font-weight:400; font-size:11px; color:var(--p-ink-muted); text-align:right; margin-top:2px;}
.cart-whatsapp-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:14px; border-radius:12px; background:#25D366; color:#fff; font-weight:700; font-size:14.5px;
  text-decoration:none; margin-bottom:8px;
}
.cart-whatsapp-btn svg, .cart-whatsapp-btn img{width:18px; height:18px;}
.cart-no-whatsapp{font-size:12.5px; color:var(--p-ink-muted); text-align:center; margin:0 0 8px;}
.cart-clear{
  display:block; width:100%; text-align:center; border:none; background:none;
  color:var(--p-ink-muted); font-size:12.5px; text-decoration:underline; cursor:pointer; padding:4px 0;
}