/* base.css — shared across every page: loaded via templates/layout.php on
   every request. Split out of the old single style.css (2026-09-26) so
   page-specific sections (home/product/category/finder/compare/cart) no
   longer ship on pages that don't use them. See pages/*.css for those. */

:root{
  /* 2026-09-20 "Apple-minimal" reversal — replaces the previous #d90228-red +
     gold "bold local marketplace" system entirely. Modeled directly on the
     apple.com/mac, /store, /iphone, /watch, /support, /accessories, /airpods
     screenshots reviewed with the user (confirmed twice via AskUserQuestion,
     reinforced by "follow the clean look" on laptopzone1.com): near-total
     desaturation, one blue accent, huge whitespace, no colored badges. The
     old tokens are gone, not just unused — anything still reading --brand/
     --deal-accent/etc. below now resolves to the new neutral system so no
     component silently reverts to red/gold.

     --ink / --ink-soft / --muted map to Apple's #1d1d1f (near-black text) and
     #6e6e73 (secondary/muted grey) exactly as shown in every screenshot's
     body copy and eyebrow text. --paper is Apple's #f5f5f7 signature
     alternating light-grey section background (used between white sections
     for rhythm, e.g. the "Explore the lineup" band on apple.com/mac). --line
     /--line-strong are Apple's near-invisible #d2d2d7-ish dividers — sections
     are mostly separated by background-color/whitespace, not borders.
     --brand is now the ONE accent color (#0071e3, Apple's real link/button
     blue) — used only for links ("Learn more >") and primary pill buttons,
     never for decorative fills, badges, or backgrounds. --brand-ink is a
     slightly deeper blue for hover/active states (Apple darkens its blue on
     hover, doesn't introduce a second hue). --brand-soft is a very light
     blue tint for focus rings/selection only. --accent2 is kept defined
     (still referenced by a couple of low-priority tertiary spots) but
     pointed at the same blue family so nothing can look "teal" by accident. */
  --ink:#1d1d1f;
  --ink-soft:#424245;
  --paper:#f5f5f7;
  --surface:#ffffff;
  --line:#e8e8ed;
  --line-strong:#d2d2d7;
  --brand:#0071e3;
  --brand-2:#0071e3;
  --brand-ink:#0058b0;
  --brand-soft:#e8f2fe;
  --accent2:#0071e3;
  --muted:#6e6e73;
  --ok:#1d7a3c;
  --ok-bg:#e6f4ea;
  --danger:#c53434;
  --danger-bg:#fbeaea;

  /* Deal/gold tokens kept defined (still referenced by a couple of legacy
     selectors below during the transition) but neutralized to the same
     near-black/grey used for ordinary text — Apple shows "New" or a price
     note as plain colored TEXT, never a gold gradient badge/ribbon. Nothing
     in the redesigned markup below actually paints a gold surface anymore;
     .discount-ribbon itself was removed from product-card-fn.php. */
  --deal-accent:#c5a253;
  --deal-accent-2:#c5a253;
  --deal-ink:#6e6e73;
  --gold-soft:#f5f5f7;
  --warning:#c5a253;
  --warning-bg:#f5f5f7;

  /* Gradients removed as a visual language — Apple uses flat color +
     whitespace, not gradients, for its light UI chrome (dark hero panels are
     photographic, not CSS gradients, and out of scope for this pass). Tokens
     kept defined and pointed at flat colors so any leftover reference still
     renders sanely instead of erroring, but nothing new should use these. */
  --brand-gradient: var(--brand);
  --brand-gradient-soft: var(--paper);
  --gold-gradient: var(--paper);
  --heading-underline-gradient: transparent;

  /* Apple's cards use a bigger, calmer corner radius (~18-20px) and little
     to no drop shadow — shadows below are intentionally much lighter than
     the old --shadow-lg. */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 20px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow: 0 2px 12px rgba(0,0,0,.07);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.10);
  --ease: cubic-bezier(.2,.8,.2,1);

  /* Map the palette onto Bootstrap's own CSS variables, so every Bootstrap
     component (buttons, badges, forms, dropdowns...) picks up the new
     Apple-minimal colors automatically instead of needing per-component
     overrides scattered through this file. */
  --bs-primary: var(--brand);
  --bs-primary-rgb: 0,113,227;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--surface);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-ink);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-font-sans-serif: var(--font-body);

  /* Apple's real headings use the same San Francisco family as body text at
     a much larger/bolder size, not a distinct display face — so Plus Jakarta
     Sans is dropped as a separate heading font. Inter (already loaded) is
     the closest practical free equivalent to SF and is now used for both
     headings and body, differentiated purely by size/weight (see h1-h4
     rule below). --font-heading is kept as an alias to --font-body so any
     remaining reference still resolves correctly. */
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-body);
}

*{ scrollbar-color: var(--line-strong) transparent; }
body{
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
/* Apple headings: same family as body text, distinguished purely by size/
   weight/tight tracking and generous whitespace — no underline decoration,
   no distinct display face (see apple.com/mac's huge left-aligned "Mac"
   page title sitting alone with nothing but whitespace around it). */
h1,h2,h3,h4{ font-family:var(--font-heading); font-weight:700; letter-spacing:-.015em; text-wrap:balance; color:var(--ink); }
a{ text-decoration:none; transition:color .15s var(--ease); color:var(--brand); }
a:hover{ color:var(--brand-ink); }
.price{ font-variant-numeric:tabular-nums; }
::selection{ background:var(--brand-soft); color:var(--brand-ink); }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

.form-select, .form-control{ border-color:var(--line-strong); }
.form-select:focus, .form-control:focus{ border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.card{ border-color:var(--line); }
.badge{ font-weight:600; letter-spacing:.01em; }

/* Apple-minimal section headers ("Shop by Category", "Today's Best Deals",
   etc.): large, confident weight, but no underline bar/gradient — hierarchy
   comes from size + the whitespace around the block, matching the plain
   bold page/section titles seen throughout the apple.com reference
   screenshots (e.g. "Explore the lineup", "Shop iPhone"). */
.block-head h2, section > .container > h2{
  font-size:clamp(26px,3.2vw,40px); font-weight:700; letter-spacing:-.02em; margin-bottom:0;
}


/* ---- Header ---- */
header.site{ background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
header.site.sticky-top{ z-index:1040; box-shadow:0 1px 0 rgba(23,19,22,.02); }

/* Contact bar: phone + WhatsApp, sits above the logo/search/actions row.
   Shown on both desktop and mobile; app.js collapses it on mobile scroll
   (see .header-scrolled rules below) to save vertical space. Apple-minimal:
   plain flat --paper background (a subtle neutral utility strip), not a
   colored tint — matches Apple's own plain-grey secondary header rows. */
.header-contact-bar{
  display:flex; align-items:center; gap:20px; padding:8px 0;
  background:var(--paper);
  border-bottom:1px solid var(--line); font-size:12.5px; font-weight:500; color:var(--ink-soft);
  overflow:hidden; max-height:40px; opacity:1;
  transition:max-height .2s var(--ease), opacity .15s var(--ease), padding .2s var(--ease), border-color .2s var(--ease);
}
.header-contact-bar a{ display:flex; align-items:center; gap:7px; color:var(--ink-soft); transition:color .15s var(--ease), transform .12s var(--ease); }
.header-contact-bar a:hover{ color:var(--brand); transform:translateY(-1px); }
/* Small circular icon badge instead of a bare stroked glyph floating in
   the text — gives the phone/WhatsApp links more of a "button" feel. */
.hcb-icon{
  display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:99px;
  background:var(--surface); color:var(--ink-soft); flex-shrink:0; transition:background .15s var(--ease), color .15s var(--ease);
}
.header-contact-bar a:hover .hcb-icon{ background:var(--surface); color:var(--brand); }
.hcb-icon-wa{ color:#1a9c4c; }

/* Social links (YouTube/Instagram) — pushed to the far right of the same
   contact bar via margin-left:auto on the wrapping flex item, so the
   phone/WhatsApp links stay left-aligned as before and this is purely an
   addition, not a reflow of existing content. Icon-only (aria-label
   carries the name) since the bar has no room for label text once this
   is added on narrow widths. */
.hcb-social{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.hcb-social a{ display:flex; }
.hcb-icon-yt{ color:#FF0000; }
/* Instagram's mark is normally a gradient fill; approximated here with a
   solid brand pink close to its middle stop, since .hcb-icon's circular
   badge is already tinted and a full gradient would fight it visually. */
.hcb-icon-ig{ color:#d6249f; }

.logo{
  font-family:var(--font-heading); font-weight:800; font-size:22px; color:var(--brand-ink);
  white-space:nowrap; letter-spacing:-.01em; display:inline-block; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; vertical-align:middle;
}
.logo span{ color:var(--ink); }
/* Logo stays a fixed size at all times — no shrink on scroll or at
   mobile widths (previously did both; user asked to keep it constant).
   .logo's own overflow/ellipsis above is still the safety net if
   "SuperTechSys" at 22px doesn't fit a very narrow column. */
.logo-image{ display:block; height:64px; width:auto; max-width:280px; object-fit:contain; vertical-align:middle; }
.search-box{ position:relative; max-width:440px; }
.search-box input{ padding-left:38px; border-radius:99px; background:var(--paper); border-color:transparent; height:42px; transition:border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease); }
.search-box input:focus{ background:var(--surface); border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.search-box svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--muted); pointer-events:none; }
#search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); max-height:340px; overflow-y:auto; z-index:1050;
  padding:6px;
}
#search-results a{ display:flex; gap:10px; align-items:center; padding:9px 10px; font-size:13.5px; border-radius:var(--radius-sm); color:var(--ink); transition:background .12s; }
#search-results a:last-child{ border-bottom:none; }
#search-results a:hover{ background:var(--brand-soft); }
#search-results .ph{ width:32px; height:32px; border-radius:6px; background:var(--paper); flex-shrink:0; object-fit:cover; }

.compare-pill{
  display:flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--line-strong); border-radius:99px;
  background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:500; transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
.compare-pill:hover{ border-color:var(--brand); color:var(--brand-ink); box-shadow:var(--shadow-xs); }
.compare-pill .n{ background:var(--brand); color:#fff; border-radius:99px; min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; padding:0 4px; }
.wa-pill{ display:flex; align-items:center; gap:7px; background:#25D366; color:#fff; padding:9px 16px; border-radius:99px; font-weight:600; font-size:13.5px; box-shadow:0 4px 14px -4px rgba(37,211,102,.55); transition:transform .12s var(--ease), box-shadow .15s var(--ease); }
.wa-pill:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px -4px rgba(37,211,102,.6); }

/* Desktop (>=992px, matching .navbar-expand-lg): scrolling down hides the
   contact bar + logo/search/actions row, leaving only nav.main pinned at
   the top of the header — scrolling up brings it straight back.
   Direction-based, driven by .header-hide-top on header.site (app.js,
   "Header (desktop): hide top row on scroll down, reveal on scroll up").
   Distinct from the threshold-based .header-scrolled class mobile uses
   above.
   header.site switches from position:sticky (Bootstrap's .sticky-top, on
   the element in layout.php — still what mobile uses) to position:fixed
   here, specifically so this can't turn into a scroll-feedback loop: a
   sticky element is still part of normal document flow, so collapsing
   part of it changes the document's height at the exact scroll position,
   which the browser reports back as its own scroll delta, which flips the
   direction detection, which un-collapses it again — forever (hit this
   with a max-height collapse approach in testing: confirmed via
   MutationObserver that the class was toggling every animation frame). A
   fixed header is never part of document flow to begin with, so nothing
   it does internally can ever feed back into window.scrollY. body gets
   padding-top to reserve the space fixed positioning removes (kept in
   sync with --header-h, the same custom property the category/finder
   sidebars use for their own top offset — see "Category page filter
   sidebar" below); .header-hide-group (contact bar + logo/search/actions
   row) collapses with max-height/opacity same as before, and since it's
   the *fixed* header collapsing now, not an in-flow one, nav.main simply
   rises to sit right under it — no absolute positioning or height math
   needed on nav.main itself. */
@media (min-width:992px){
  header.site{ position:fixed; top:0; left:0; right:0; }
  /* True horizontal centering for the search bar: the logo (col-auto) and
     actions (col-auto) columns are different (and, with the larger 64px
     logo + WhatsApp/Compare/Cart pills, both fairly wide) — letting
     .search-box just fill the leftover Bootstrap .col space centers it
     relative to the gap between them, not relative to the header as a
     whole, and visibly favors whichever side is narrower.
     First attempt used position:absolute + left:50% to center it on the
     full row, but that overlaps the logo/actions at 992-1350px widths
     since it doesn't know how wide the side content actually is (verified
     broken via screenshot at 992px/1280px before switching to this).
     Fix: make .header-inner .row a 3-column grid with the two outer
     columns forced to equal width (1fr each) regardless of their content
     width — logo left-aligned in col 1, actions right-aligned in col 3,
     search box in the auto-sized middle column. Equal side columns is what
     actually makes the middle column's center line land on the row's
     center line; this can never overlap since the grid tracks reserve real
     space instead of the search box floating independently over them. */
  .header-inner .row{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    flex-wrap:nowrap;
  }
  /* 1fr can still shrink a grid track below its content's natural width
     (min-width:auto default) — without min-width:max-content here, the
     WhatsApp/Compare/Cart pills got squeezed and "WhatsApp Us" wrapped to
     two lines at 992-1280px once the middle column started claiming more
     space (verified via screenshot). Same guard on the logo column for
     symmetry, though the logo has its own max-width cap already. */
  .header-inner .row > .col-auto:first-child{ justify-self:start; min-width:max-content; }
  .header-inner .row > .col-auto:last-child{ justify-self:end; min-width:max-content; }
  .header-inner .row > .col{ width:100%; max-width:none; flex:none; }
  .wa-pill{ white-space:nowrap; }
  /* Only reserve the fixed-header offset on pages that actually have
     header.site (the public front-end) — admin pages (templates/admin/
     layout.php) share this stylesheet but have no fixed header, so without
     :has() scoping here every admin page got a ~122px blank gap above its
     own (non-fixed) .admin-bar for no reason. */
  body:has(header.site){ padding-top:var(--header-h); }
  .header-hide-group{
    max-height:200px;
    transition:max-height .25s var(--ease), opacity .18s var(--ease);
  }
  /* overflow:hidden only while actually collapsing/collapsed — the
     expanded state must stay visible-overflow, since #search-results
     (the live-search dropdown) is an absolutely-positioned descendant
     that extends below .header-hide-group's own box; clipping it there
     hid the dropdown behind the header. */
  header.site.header-hide-top .header-hide-group{
    max-height:0; opacity:0; overflow:hidden;
  }
}

nav.main{ background:var(--ink); }
nav.main .nav-link{ color:#e7e9ec; font-size:13.5px; font-weight:500; padding:13px 16px !important; transition:background .15s, color .15s; }
nav.main .nav-link:hover, nav.main .nav-link:focus{ background:rgba(255,255,255,.08); color:#fff; }
nav.main .dropdown-menu{ border:1px solid var(--line); border-radius:0 var(--radius) var(--radius) var(--radius); box-shadow:var(--shadow-lg); padding:6px; margin-top:0; }
nav.main .dropdown-item{ border-radius:var(--radius-sm); padding:9px 12px; font-size:13.5px; }
nav.main .dropdown-item:hover, nav.main .dropdown-item:focus{ background:var(--brand-soft); color:var(--brand-ink); }

/* The hamburger toggle now lives in .header-actions (light background —
   moved there from the old dark nav.main bar), so it's styled as a
   circular brand-tinted button instead of Bootstrap's bare bordered
   square + background-image icon. It uses 3 real <span> bars (see
   .navbar-toggler-bar) instead of Bootstrap's .navbar-toggler-icon so
   they can morph into an X on open with a pure-CSS transform, keyed off
   the button's own aria-expanded state — no extra JS beyond what
   data-bs-toggle="collapse" already sets. */
.navbar-toggler{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0; border:none; border-radius:99px;
  background:var(--brand-soft); box-shadow:none;
  transition:background .18s var(--ease), transform .12s var(--ease);
}
.navbar-toggler:hover{ background:var(--brand-soft); transform:translateY(-1px); }
.navbar-toggler:active{ transform:translateY(0); }
.navbar-toggler:focus{ box-shadow:0 0 0 3px var(--brand-soft); }
.navbar-toggler[aria-expanded="true"]{ background:var(--brand); }

.navbar-toggler-bars{ position:relative; width:18px; height:13px; display:inline-block; flex-shrink:0; }
.navbar-toggler-bar{
  position:absolute; left:0; width:18px; height:2px; border-radius:99px;
  background:var(--brand-ink); transition:transform .22s var(--ease), opacity .15s var(--ease), background .18s var(--ease), top .22s var(--ease);
}
.navbar-toggler-bar:nth-child(1){ top:0; }
.navbar-toggler-bar:nth-child(2){ top:5.5px; }
.navbar-toggler-bar:nth-child(3){ top:11px; }
/* Open state: middle bar fades out, top/bottom rotate into an X. Bumping
   top to 5.5px first (matching the middle bar's resting position) keeps
   the rotation pivoting around the button's visual center instead of
   sweeping in from the corner. */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar{ background:#fff; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(1){ top:5.5px; transform:rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(2){ opacity:0; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(3){ top:5.5px; transform:rotate(-45deg); }


/* ---- Trust bar (directly under hero) ---- */
.trust-bar{ background:var(--ink); padding:16px 0; }
.trust-bar-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.trust-bar-item{ display:flex; align-items:center; gap:9px; color:#f5f5f7; font-size:13px; font-weight:600; white-space:nowrap; }
.trust-bar-icon{ display:flex; color:#9a9a9e; flex-shrink:0; }
.trust-bar-icon svg{ width:18px; height:18px; }
@media (max-width:900px){ .trust-bar-row{ justify-content:flex-start; } }


/* ---- How It Works (homepage) ---- */
.how-it-works{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-sub{ color:var(--ink-soft); max-width:52ch; font-size:15px; margin:6px 0 0; }
.how-step{ position:relative; text-align:center; padding:0 12px; }
.how-step-connector{
  position:absolute; top:32px; left:calc(50% + 46px); right:calc(-50% + 46px); height:2px;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px);
}
.how-step-icon{
  position:relative; width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center;
}
.how-step-icon svg{ width:28px; height:28px; }
.how-step-n{
  position:absolute; bottom:-4px; right:-4px; width:22px; height:22px; border-radius:99px; background:var(--brand);
  color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px var(--surface);
}
.how-step h4{ font-size:16px; margin-bottom:6px; }
.how-step p{ font-size:13.5px; color:var(--ink-soft); max-width:32ch; margin:0 auto; }

/* Buttons — Apple's pill shape: fully rounded, flat solid blue primary, thin
   dark/plain outline for secondary. No gradients, no colored shadows; the
   only shadow is a very subtle hover darken. WhatsApp CTAs keep WhatsApp's
   own green per the explicit exception in the brief (real user convention,
   not part of the site's own color system). */
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:500; border-radius:99px; padding:11px 22px; font-size:14.5px; transition:transform .12s var(--ease), background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.btn:active{ transform:translateY(1px); }
.btn-sm{ padding:7px 16px; font-size:13px; }
.btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:none; }
.btn-primary:hover, .btn-primary:focus{ background:var(--brand-ink); border-color:var(--brand-ink); color:#fff; }
.btn-outline-primary{ color:var(--ink); border:1px solid var(--line-strong); background:transparent; }
.btn-outline-primary:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn-wa{ background:#25D366; color:#fff; border-color:#25D366; border-radius:99px; box-shadow:none; }
.btn-wa:hover{ background:#1eb955; border-color:#1eb955; color:#fff; }
.btn-add-cart{ padding:7px 15px; font-size:12px; }


/* ---- Section scaffolding ---- */
.block-head a{ font-size:14px; color:var(--brand); font-weight:400; transition:color .15s; }
.block-head a:hover{ color:var(--brand-ink); }


/* ---- Category tiles / brand tiles / testimonials / store info: shared card look ----
   Apple-minimal: flat light-grey card, no border, no shadow, no per-tile
   accent color — a subtle background darken on hover is the only feedback,
   matching the plain promo-panel cards on apple.com/mac ("Explore the lineup"). */
.cat-tile, .brand-tile, .testimonial-card, .store-info-card{
  background:var(--paper); border:1px solid transparent; border-radius:var(--radius); box-shadow:none; height:100%;
  transition:transform .18s var(--ease), background .18s var(--ease);
}
.cat-tile:hover, .brand-tile:hover{ transform:translateY(-2px); background:var(--line); }
.cat-tile span, .brand-tile span{ font-size:12.5px; color:var(--muted); }
.cat-tile h3{ transition:color .15s; font-weight:600; }
.brand-tile .mark{ font-family:var(--font-heading); font-size:18px; font-weight:600; color:var(--ink); background:none; padding:0; }
.brand-tile-badge{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin:0 auto 8px; border-radius:99px;
  background:var(--surface); color:var(--ink);
  font-family:var(--font-heading); font-weight:600; font-size:14px; transition:background .18s, color .18s;
}
.brand-tile:hover .brand-tile-badge{ background:var(--surface); color:var(--brand); }
/* Real attached logo (categories.image_url) in place of the initial-letter badge —
   fixed box + object-fit:contain so a tall/wide/non-square source logo never
   stretches or breaks the tile's card layout, same treatment as product images. */
.brand-tile-logo{ display:block; width:100%; height:34px; margin:0 auto 8px; object-fit:contain; }


/* ---- Product card ---- */
/* ---- Product card (tp-product-item-2 family) ----
   Matches the real supertechsys.com category page's product card exactly —
   same class names, same layout, not a generic redesign. */
.tp-product-item-2{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
  display:flex; flex-direction:column; height:100%; position:relative;
}
.tp-product-item-2:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }

/* "Save Rs. X" — kept as a real-data-only note (no fabricated urgency), but
   given a small filled tag treatment instead of plain text so the genuine
   savings actually catch the eye on a scan of the grid, matching the bolder
   price treatment below. Still just one savings cue, never doubled up with
   a separate percent ribbon. */
.you-save{
  display:inline-flex; align-items:center; color:var(--brand); font-size:11.5px; font-weight:700;
  margin:0; background:var(--brand-soft); padding:3px 8px; box-shadow:none; border-radius:99px;
  letter-spacing:.01em;
}

.tp-product-thumb-2{ background:var(--paper); border-bottom:1px solid var(--line); overflow:hidden; flex-shrink:0; }
.tp-product-thumb-2 a{ display:flex; align-items:center; justify-content:center; }
.tp-product-thumb-2 img{
  width:100%; height:200px; object-fit:contain; object-position:center; display:block;
  transition:transform .35s var(--ease); padding:10px; background:var(--paper);
}
.tp-product-item-2:hover .tp-product-thumb-2 img{ transform:scale(1.04); }
.tp-product-thumb-2 svg{ height:200px; width:auto; padding:10px; color:var(--line-strong); }

.tp-product-content-2{ padding:12px 12px 14px; display:flex; flex-direction:column; flex:1; }

.tp-product-title-2{ font-size:13.5px; font-weight:600; line-height:1.4; margin:0 0 6px; color:var(--ink); }
.tp-product-title-2 a{
  color:var(--ink); text-decoration:none; transition:color .2s;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tp-product-title-2 a:hover{ color:var(--brand); }

.tp-product-price-wrapper-2{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
/* Bolder price treatment: the current/sale price is now the clear visual
   anchor of the card (larger, heavier, brand blue) so a discount actually
   reads at a glance — old price stays a plain muted strikethrough right
   next to it for contrast. Still restrained: one accent color, no gradients
   or shadows, consistent with the rest of the Apple-minimal system. */
.tp-product-price-2.new-price{ font-size:19px; font-weight:800; color:var(--brand); letter-spacing:-.01em; }
.tp-product-price-2.old-price{ font-size:12.5px; font-weight:400; color:var(--muted); text-decoration:line-through; }
/* Regular (non-sale) card pricing — price_html()'s .now/.was fallback, used
   whenever a product has no active discount. Matches the sale-price pair
   above (same size/weight/color) so every card's price reads with the same
   visual weight regardless of whether that specific product is on sale. */
.tp-product-price-wrapper-2 .now.price{ font-size:19px; font-weight:800; color:var(--brand); letter-spacing:-.01em; }
.tp-product-price-wrapper-2 .was.price{ font-size:12.5px; font-weight:400; color:var(--muted); text-decoration:line-through; }
.call-for-price{ color:var(--brand) !important; font-size:14px !important; font-weight:500; }
.pd-price .call-for-price{ font-size:22px !important; }
/* Plain-text "Save Rs. X" note, shown right after the price in the same row
   (moved out of the old absolute corner-flag position — see .you-save
   above). */
.tp-product-price-wrapper-2 .you-save{ order:3; flex-basis:100%; margin-top:1px; }

/* Spec attribute rows (CPU/Cache/Screen/RAM/GPU with icons) — quieted from a
   bordered/left-accented "chip" look to plain thin-divider rows, matching
   Apple's plain tech-spec lists (label in muted grey, value in body color,
   a hairline divider, no colored border/background). */
.product-attributes-list{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; }
.product-attributes-list li{
  display:flex; align-items:center; gap:9px; padding:6px 0;
  border-bottom:1px solid var(--line); border-radius:0; overflow:hidden;
}
.product-attributes-list li:last-child{ border-bottom:none; }
.attr-icon{ flex-shrink:0; width:16px; height:16px; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.attr-icon svg{ width:14px; height:14px; display:block; }
.attr-label{ font-size:10px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; flex-shrink:0; min-width:42px; }
.attr-value{ font-size:12.5px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }

/* ---- Product card action row (2026-09-20) ----
   Add to Cart + Compare sit side by side in one row, mirroring Apple's
   paired primary/secondary button layout (e.g. "Buy" + a smaller secondary
   action next to it) rather than two full-width buttons stacked on separate
   lines. Add to Cart is the filled primary pill and takes the remaining
   space (flex:1); Compare is a fixed-width icon+label secondary pill beside
   it. Wherever product_card() renders — homepage carousels, category/brand/
   finder-results grids, recently-viewed rail — gets this row automatically
   since it's the one shared component. */
.tp-product-actions-2{ display:flex; align-items:stretch; gap:8px; margin-top:auto; padding-top:2px; }
.tp-product-content-2 .btn-add-cart{
  flex:1; min-width:0; border-radius:99px; justify-content:center;
  padding:8px 12px; font-size:12.5px; font-weight:500; white-space:nowrap;
}

/* Compare pill button (matches sts-local-compare plugin's real button) —
   restyled as a compact secondary pill that sits next to Add to Cart rather
   than a full-width row above the spec list. */
.sts-compare-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px; font-size:12px; font-weight:500; color:var(--ink-soft);
  background:transparent; border:1px solid var(--line-strong); border-radius:99px; padding:8px 12px;
  cursor:pointer; transition:all .2s; flex-shrink:0;
}
.sts-compare-btn:hover{ color:var(--brand); border-color:var(--brand); background:var(--brand-soft); }
.sts-compare-btn.active{ color:#fff; background:var(--brand); border-color:var(--brand); }
.sts-compare-btn svg{ flex-shrink:0; }
/* Compare's text label hides below a certain card width (icon-only,
   aria via visible text still present for larger cards) so the pair never
   wraps or overflows a narrow 3-up card at small breakpoints. */
@media (max-width:400px){
  .sts-compare-btn-label{ display:none; }
  .sts-compare-btn{ padding:8px 10px; }
}


/* form-grid/admin-bar/admin-table/pill-status moved to pages/admin.css — they
   never render on the public site. .wrap stays here: templates/404.php uses
   it directly on the public site too, not just inside admin-bar. */
.wrap{ max-width:1180px; margin:0 auto; padding:0 22px; }


/* ---- Footer ---- */
footer.site{ background:var(--ink); color:#c7cad0; margin-top:48px; padding:44px 0 26px; font-size:13px; }
footer.site h5{ color:#fff; font-family:var(--font-heading); font-size:15px; margin-bottom:12px; }
footer.site a{ color:#c7cad0; display:block; padding:4px 0; transition:color .15s; }
footer.site a:hover{ color:var(--brand-2); }
.footer-address{ max-width:26ch; color:#9aa0a8; line-height:1.6; }
.foot-bottom{ text-align:center; padding-top:22px; margin-top:26px; border-top:1px solid rgba(255,255,255,.1); color:#83888f; font-size:12px; }

.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--radius); }
.listing-toolbar .count{ font-weight:600; color:var(--ink-soft); font-size:13.5px; }
.listing-toolbar .form-select{ border-radius:var(--radius-sm); }


/* ---- Pagination (Bootstrap .pagination handles structure; brand the active/current state) ---- */
.pagination .page-link{ color:var(--ink); border-radius:var(--radius-sm); margin:0 2px; border-color:var(--line); transition:border-color .15s, color .15s, background .15s; }
.pagination .page-item.active .page-link{ background:var(--brand); border-color:var(--brand); box-shadow:var(--shadow-xs); }
.pagination .page-link:hover{ color:var(--brand-ink); border-color:var(--brand); }


/* ---- Subcategory chips (category page) ---- */
.subcat-row a{ font-size:12.5px; }
.subcat-row a:hover{ border-color:var(--brand); color:var(--brand-ink); }


/* ---- Store hours / location ----
   Used by home.php (via partials/store-info.php) AND contact.php directly —
   kept here in base rather than pages/home.css since contact.php needs it
   too and contact has no page-specific bundle of its own. */
.store-info-card{ position:relative; padding-top:24px !important; }
.store-info-icon{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; margin-bottom:12px;
  background:var(--surface); color:var(--ink);
}
.store-info-icon svg{ width:20px; height:20px; }
.store-hours-row{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid var(--line-strong); }
.store-hours-row:last-child{ border-bottom:none; }
.store-hours-row.is-today{ font-weight:600; color:var(--brand); }
.store-info-card address{ font-style:normal; font-size:13.5px; color:var(--ink-soft); line-height:1.6; }

/* ---- Contact page map embed (contact.php has no page-specific bundle) ---- */
.contact-map-embed{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line);
}


/* ---- Mobile drawer menu (<992px) ----
   Right-side slide-in panel + dark overlay, mirroring the real
   supertechsys.com site's own offcanvas mechanic (confirmed from its
   theme CSS: fixed, right:0, width 380px / 100% under 380px viewport,
   translateX slide, 0.3s cubic-bezier(.785,.135,.15,.86) ease, dark
   overlay backdrop at opacity .7). Opened/closed by app.js toggling
   .mobile-drawer-open on both elements — not Bootstrap's collapse
   plugin, which animates height, not a horizontal slide. */
.mobile-drawer-overlay{
  position:fixed; inset:0; background:var(--ink); opacity:0; visibility:hidden;
  z-index:1055; transition:opacity .3s ease, visibility .3s ease;
}
.mobile-drawer-overlay.mobile-drawer-open{ opacity:.65; visibility:visible; }

.mobile-drawer{
  position:fixed; top:0; right:0; width:380px; max-width:100%; height:100%;
  background:var(--surface); z-index:1060; overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(calc(100% + 40px));
  transition:transform .3s cubic-bezier(.785,.135,.15,.86);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
}
.mobile-drawer.mobile-drawer-open{ transform:translateX(0); }

.mobile-drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 18px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.mobile-drawer-close{
  display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:none; border-radius:99px; background:var(--paper); color:var(--ink-soft);
  transition:background .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
}
.mobile-drawer-close:hover{ background:var(--brand-soft); color:var(--brand-ink); }
.mobile-drawer-close:active{ transform:scale(.92); }

.mobile-drawer-body{ padding:16px 14px 32px; flex:1; }

/* Quick-links (Compare/Cart/WhatsApp) — mirrors the desktop
   .header-actions pills, which are d-none below the lg breakpoint (see
   layout.php). Light-panel styling now (previously dark, from when this
   lived inside nav.main's dark collapse dropdown). */
.mobile-quick-links{
  display:flex; flex-direction:column; gap:3px; padding-bottom:14px;
  border-bottom:1px solid var(--line); margin-bottom:14px;
}
.mobile-quick-links a{
  display:flex; align-items:center; gap:11px; padding:10px 10px; border-radius:var(--radius-sm);
  color:var(--ink); font-size:14.5px; font-weight:600; transition:background .15s, transform .12s var(--ease);
}
.mobile-quick-links a:hover, .mobile-quick-links a:focus{ background:var(--paper); }
.mobile-quick-links a:active{ transform:scale(.98); }
/* Icon badge so each quick-link reads as a small button, not a bare icon+text row. */
.mql-icon{
  display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px;
  background:var(--paper); color:var(--brand-ink); flex-shrink:0; transition:background .15s;
}
.mobile-quick-links a:hover .mql-icon{ background:var(--brand-soft); }
.mobile-quick-links .n{ background:var(--brand); color:#fff; border-radius:99px; min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; padding:0 4px; margin-left:auto; }
.mobile-quick-links .mobile-quick-wa{ background:#25D366; color:#fff; font-weight:700; box-shadow:0 4px 14px -4px rgba(37,211,102,.5); }
.mobile-quick-links .mobile-quick-wa .mql-icon{ background:rgba(255,255,255,.2); color:#fff; }
.mobile-quick-links .mobile-quick-wa:hover{ background:#22c25e; }
.mobile-quick-links .mobile-quick-wa:hover .mql-icon{ background:rgba(255,255,255,.28); }

/* Section label above the category list — gives the drawer two clearly
   separated zones (actions vs. browse) instead of one long list. */
.mobile-nav-label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); padding:0 10px 8px;
}

/* Category list — plain links, subcategories expand inline as an
   accordion (see .mobile-drawer-subtoggle) rather than a floating
   Bootstrap dropdown, which doesn't suit a fixed-width side panel. */
.mobile-drawer-nav{ display:flex; flex-direction:column; list-style:none; margin:0; padding:0; }
.mobile-drawer-nav > li{ border-bottom:1px solid var(--line); }
.mobile-drawer-nav > li:last-child{ border-bottom:none; }
/* Covers both a plain <li><a> item AND a has-sub item's <a> nested one
   level deeper inside .mobile-drawer-nav-row — same link styling either way. */
.mobile-drawer-nav > li > a,
.mobile-drawer-nav-row > a{
  display:block; padding:13px 10px; color:var(--ink); font-size:14.5px; font-weight:600;
  border-radius:var(--radius-sm); transition:background .15s, color .15s;
}
.mobile-drawer-nav > li > a:hover,
.mobile-drawer-nav-row > a:hover{ background:var(--paper); color:var(--brand-ink); }
.mobile-drawer-nav-row{ display:flex; align-items:stretch; }
.mobile-drawer-nav-row > a{ flex:1; }
.mobile-drawer-sub{ list-style:none; }
.mobile-drawer-subtoggle{
  display:flex; align-items:center; justify-content:center; width:44px; flex-shrink:0;
  border:none; background:none; color:var(--muted); transition:transform .2s var(--ease), color .15s;
}
.mobile-drawer-subtoggle:hover{ color:var(--brand-ink); }
.mobile-drawer-subtoggle[aria-expanded="true"]{ transform:rotate(180deg); color:var(--brand-ink); }
.mobile-drawer-sub{
  max-height:0; overflow:hidden; padding-left:10px;
  transition:max-height .25s var(--ease);
}
.has-sub.is-open .mobile-drawer-sub{ max-height:600px; }
.mobile-drawer-sub li{ border-left:2px solid var(--line); margin-left:4px; }
.mobile-drawer-sub a{
  display:block; padding:10px 10px 10px 16px; font-size:13.5px; color:var(--ink-soft);
  transition:background .15s, color .15s;
}
.mobile-drawer-sub a:hover{ background:var(--paper); color:var(--brand-ink); }

/* Locks background scroll while the drawer is open (app.js toggles this
   on <body>) so the page behind the overlay doesn't scroll with it. */
body.mobile-drawer-locked{ overflow:hidden; }

@media (max-width:767.98px){
  /* Mobile header row is a 3-column grid: col-3 logo / col-6 search /
     col-3 hamburger (see layout.php — Compare/Cart/WhatsApp pills are
     d-none here, their mobile equivalent is .mobile-quick-links above,
     inside the dropdown the hamburger opens). col-3 is only ~80-95px
     wide on a phone — logo stays full size (user asked to keep it fixed,
     not shrink on mobile), so .logo's own overflow/ellipsis (base rule
     above) truncates "SuperTechSys" to "SuperTe…" rather than shrinking
     the font or breaking the layout. */
  /* .logo-image is sized much larger for desktop (base rule above, 64px
     tall) than the ~80-95px-wide mobile logo column can fit without
     blowing out the row height — scaled back down here so mobile keeps
     its own fixed, already-tuned size instead of inheriting desktop's. */
  .logo-image{ height:34px; max-width:150px; }
  .search-box{ max-width:100%; }
  /* Slightly elevated/filled look instead of the flat grey desktop input
     — a subtle shadow + a touch more background contrast so it reads as
     a distinct tappable surface at the smaller mobile size. */
  .search-box input{
    padding-left:34px; font-size:13px; background:var(--surface);
    border-color:var(--line); box-shadow:0 1px 3px rgba(1,15,28,.06);
  }
  .search-box input:focus{ box-shadow:0 0 0 4px var(--brand-soft); }
  .search-box svg{ left:11px; width:13px; height:13px; }

  /* Contact bar is tight at phone widths once the social icons are added
     (390px: phone number was wrapping to 2 lines, social icons crowded
     against the edge). Tighter gap + drop the "WhatsApp:" label (icon +
     number is enough, and social links are already icon-only) frees
     enough room to keep everything on one line. */
  .header-contact-bar{ gap:12px; }
  .hcb-label{ display:none; }
  .hcb-social{ gap:6px; }

  /* On mobile, once the user scrolls down past the top of the page,
     app.js adds .header-scrolled to header.site. The logo/search/menu
     grid row always stays visible (it's the core header now, logo size
     fixed — see above), but the contact bar collapses away entirely, so
     the sticky header still takes up less vertical space while scrolling. */
  header.site.header-scrolled .header-contact-bar{
    max-height:0; opacity:0; padding-top:0; padding-bottom:0; border-color:transparent;
  }
  header.site.header-scrolled .header-inner{ padding-top:8px; padding-bottom:8px; }
  /* Toggler shrinks slightly too once scrolled, matching the more compact header. */
  header.site.header-scrolled .navbar-toggler{ width:36px; height:36px; }
  header.site.header-scrolled .navbar-toggler-bars{ width:15px; height:11px; }
  header.site.header-scrolled .navbar-toggler-bar{ width:15px; }
  header.site.header-scrolled .navbar-toggler-bar:nth-child(2){ top:4.5px; }
  header.site.header-scrolled .navbar-toggler-bar:nth-child(3){ top:9px; }
  header.site.header-scrolled .navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(1),
  header.site.header-scrolled .navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(3){ top:4.5px; }
}


.stars{ color:#e0a83a; letter-spacing:2px; font-size:15px; }


/* Chip/badge primitives — used by the Finder page's own filter form AND
   reused by the category/brand filter sidebar (category-filters.php) and
   finder-results.php's active-filter pills, so they live here in the
   shared base rather than pages/finder.css. */
.finder-section-badge{ background:var(--brand); color:#fff; font-size:11.5px; font-weight:700; border-radius:99px; padding:2px 9px; flex-shrink:0; }
.finder-field-count{ font-size:12px; font-weight:700; color:var(--brand-ink); }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:var(--paper); border-radius:99px; padding:7px 8px 7px 14px; font-size:13px; cursor:pointer; user-select:none; transition:border-color .15s, background .15s, color .15s, transform .1s; }
.chip:hover{ border-color:var(--brand); transform:translateY(-1px); }
.chip input{ display:none; }
.chip.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.chip .chip-text{ max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip .chip-count{ font-size:11px; color:var(--muted); background:var(--surface); border-radius:99px; padding:1px 6px; min-width:18px; text-align:center; flex-shrink:0; }
.chip.active .chip-count{ background:rgba(255,255,255,.25); color:#fff; }
.active-filter-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--brand-soft); color:var(--brand-ink); border-radius:99px; padding:5px 6px 5px 12px; font-size:12px; font-weight:600; }
.active-filter-chip button{ background:none; border:none; color:var(--brand-ink); font-size:15px; line-height:1; cursor:pointer; padding:0 2px; opacity:.7; }
.active-filter-chip button:hover{ opacity:1; }
.trust-chip{ font-size:12px; background:var(--paper); color:var(--ink-soft); font-weight:500; padding:7px 13px; border:1px solid var(--line); }