/* Trusty Read Marketplace — public storefront. Same red & white newspaper
   theme as the blog (assets/css/style.css), class-prefixed str-* (distinct
   from the blog's bare/dt-* classes and the admin panel's mpa-* classes)
   so the two stylesheets never collide, but the color tokens below are
   deliberately kept in lockstep with the blog's --brand/--paper/--card. */
/* Light-only palette — this store never switches to dark, so there is
   deliberately no @media(prefers-color-scheme:dark) or [data-theme="dark"]
   block here (both store-layout.php and store/admin/_layout.php hardcode
   data-theme="light" and ship no theme-toggle UI at all). */
:root{
  --str-bg:#FFFFFF; --str-card:#FFF9F9; --str-border:#F0DFDF;
  --str-text:#1D1B1B; --str-muted:#5C5555; --str-violet:#D32F2F; --str-violet-dark:#B71C1C;
  --str-ok:#1B9E77; --str-danger:#D64545; --str-draft:#c98a12;
  --str-radius:16px;
}

*{box-sizing:border-box}

/* brand_mark()'s shared <img>/fallback markup — same 4-variant responsive
   logo system the blog's assets/css/style.css defines, reproduced here
   store-light-only (no dark-variant re-enable rules needed since store
   never sets data-theme="dark" — the *_dark variants simply stay hidden). */
.brand-mark{
  width:38px; height:38px; border-radius:12px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--str-violet),var(--str-violet-dark));
  color:#fff; display:grid; place-items:center;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.15rem;
}
.brand-logo{ width:auto; height:38px; border-radius:0; background:none; object-fit:contain; }
.brand-logo.logo-mobile.logo-light{ display:inline-block; }
.brand-logo.logo-mobile.logo-dark,.brand-logo.logo-desktop{ display:none; }
@media (min-width:992px){
  .brand-logo.logo-mobile{ display:none!important; }
  .brand-logo.logo-desktop.logo-light{ display:inline-block; }
}
body.str-body{
  margin:0; background:var(--str-bg); color:var(--str-text);
  font-family:'Mukta',system-ui,-apple-system,sans-serif;
  padding-bottom:calc(64px + env(safe-area-inset-bottom,0px) + 8px);
}
.str-body h1,.str-body h2,.str-body h3,.str-body h4,.str-body h5,.str-body h6,.str-brand-name{ font-family:'Baloo 2','Mukta',system-ui,sans-serif; }
.str-accent{ color:var(--str-violet); }
.str-shell{ max-width:1240px; margin:0 auto; padding:0 18px; }

/* Header */
.str-header{ position:sticky; top:0; z-index:40; background:var(--str-card); border-bottom:1px solid var(--str-border); }
.str-topbar{ background:var(--str-violet); color:#fff; font-size:.8rem; }
.str-topbar .str-shell{ padding-top:6px; padding-bottom:6px; }
.str-topbar a{ color:#fff; text-decoration:none; opacity:.9; }
.str-topbar a:hover{ opacity:1; }
.str-main-bar{ padding:12px 0; }
.str-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex-shrink:0; }
.str-brand-name{ font-weight:700; font-size:1.15rem; white-space:nowrap; }
.str-search{ display:flex; align-items:center; gap:8px; background:var(--str-bg); border:1px solid var(--str-border); border-radius:99px; padding:8px 16px; max-width:520px; }
.str-search i{ color:var(--str-muted); }
.str-search input{ border:0; background:transparent; outline:0; width:100%; color:var(--str-text); font-size:.92rem; }
.str-icon-btn{ position:relative; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--str-bg); border:1px solid var(--str-border); color:var(--str-text); font-size:1.05rem; text-decoration:none; }
.str-icon-btn:hover{ background:rgba(211,47,47,.1); color:var(--str-text); }
.str-cart-count{ position:absolute; top:-4px; right:-4px; background:var(--str-violet); color:#fff; font-size:.65rem; font-weight:700; min-width:17px; height:17px; border-radius:99px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.str-btn-primary{ background:var(--str-violet); color:#fff; border:0; border-radius:8px; font-weight:600; }
.str-btn-primary:hover{ background:var(--str-violet-dark); color:#fff; }
.str-nav{ border-top:1px solid var(--str-border); overflow-x:auto; }
.str-nav a{ display:inline-flex; align-items:center; gap:6px; padding:10px 14px; color:var(--str-text); text-decoration:none; font-size:.86rem; font-weight:600; white-space:nowrap; }
.str-nav a:hover{ color:var(--str-violet); }

.str-main{ min-height:60vh; padding:24px 0 48px; }
.str-alert{ background:rgba(211,47,47,.08); border:1px solid rgba(211,47,47,.3); border-radius:10px; padding:10px 16px; margin-bottom:18px; font-size:.9rem; }
.str-alert-danger{ background:rgba(224,51,77,.08); border-color:rgba(224,51,77,.35); }

/* Section heads */
.str-sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin:32px 0 16px; }
.str-sec-head h2{ font-size:1.3rem; font-weight:700; margin:0; }
.str-sec-head a{ color:var(--str-violet); text-decoration:none; font-size:.85rem; font-weight:600; }

/* Hero */
.str-hero{ background:linear-gradient(135deg,var(--str-violet),#B71C1C); border-radius:var(--str-radius); padding:40px; color:#fff; margin-bottom:8px; }
.str-hero h1{ font-size:2rem; font-weight:800; margin-bottom:8px; }
.str-hero p{ opacity:.92; max-width:520px; margin-bottom:0; }

/* Category tiles */
.str-cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; }
.str-cat-tile{ background:var(--str-card); border:1px solid var(--str-border); border-radius:14px; padding:20px 12px; text-align:center; text-decoration:none; color:var(--str-text); transition:transform .15s ease, box-shadow .15s ease; }
.str-cat-tile:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.08); color:var(--str-text); }
.str-cat-tile i{ font-size:1.6rem; color:var(--str-violet); margin-bottom:8px; display:block; }
.str-cat-tile .n{ display:block; font-size:.75rem; color:var(--str-muted); margin-top:2px; }

/* Collections */
.str-col-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.str-col-card{ position:relative; border-radius:var(--str-radius); overflow:hidden; height:150px; display:flex; align-items:flex-end; text-decoration:none; background:linear-gradient(135deg,#1D1B1B,#D32F2F); }
.str-col-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.str-col-card .overlay{ position:relative; z-index:2; padding:16px; background:linear-gradient(0deg,rgba(0,0,0,.65),transparent); width:100%; color:#fff; }
.str-col-card .overlay strong{ font-size:1.05rem; }

/* Product grid + cards */
.str-product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.str-product-card{ background:var(--str-card); border:1px solid var(--str-border); border-radius:var(--str-radius); overflow:hidden; text-decoration:none; color:var(--str-text); display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease; }
.str-product-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.1); color:var(--str-text); }
.str-product-cover{ aspect-ratio:4/3; background:var(--str-bg); position:relative; overflow:hidden; }
.str-product-cover img{ width:100%; height:100%; object-fit:cover; }
.str-product-type{ position:absolute; top:10px; left:10px; font-size:.68rem; font-weight:700; padding:3px 9px; border-radius:99px; background:rgba(255,255,255,.92); color:var(--str-violet); }
.str-product-body{ padding:14px; flex:1; display:flex; flex-direction:column; gap:6px; }
.str-product-cat{ font-size:.72rem; color:var(--str-muted); text-transform:uppercase; letter-spacing:.4px; }
.str-product-name{ font-weight:700; font-size:.95rem; line-height:1.3; margin:0; }
.str-price{ margin-top:auto; display:flex; align-items:baseline; gap:8px; }
.str-price .now{ font-weight:800; font-size:1.05rem; }
.str-price .was{ color:var(--str-muted); text-decoration:line-through; font-size:.82rem; }
.str-badge{ display:inline-block; padding:3px 10px; border-radius:99px; font-size:.7rem; font-weight:700; background:rgba(211,47,47,.12); color:var(--str-violet); }
.str-badge-ok{ background:rgba(31,157,103,.12); color:var(--str-ok); }
.str-badge-danger{ background:rgba(224,51,77,.12); color:var(--str-danger); }
.str-badge-draft{ background:rgba(201,138,18,.12); color:var(--str-draft); }

/* Homepage hero slider (CMS-driven, hand-rolled — no carousel library) */
.str-hero-slider{ position:relative; overflow:hidden; border-radius:var(--str-radius); }
.str-hero-track{ display:flex; transition:transform .4s ease; }
.str-hero-slide{ flex:0 0 100%; min-height:320px; display:flex; align-items:center; padding:40px; background-size:cover; background-position:center; color:#fff; }
.str-hero-slide h1{ color:#fff; }
.str-hero-slide p{ color:rgba(255,255,255,.85); }
.str-hero-nav{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; border:0; background:rgba(0,0,0,.35); color:#fff; display:flex; align-items:center; justify-content:center; z-index:2; }
#strHeroPrev{ left:12px; } #strHeroNext{ right:12px; }
.str-hero-dots{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2; }
.str-hero-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); border:0; padding:0; }
.str-hero-dot.active{ background:#fff; }
.str-col-card--wide{ grid-column:1 / -1; min-height:220px; }

/* Product detail */
.str-pd-gallery{ display:flex; flex-direction:column; gap:10px; }
.str-pd-cover{ border-radius:var(--str-radius); overflow:hidden; aspect-ratio:4/3; background:var(--str-card); border:1px solid var(--str-border); }
.str-pd-cover img{ width:100%; height:100%; object-fit:cover; }
.str-pd-thumbs{ display:flex; gap:8px; flex-wrap:wrap; }
.str-pd-thumbs img{ width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--str-border); cursor:pointer; }
.str-pd-info h1{ font-size:1.5rem; font-weight:800; margin-bottom:6px; }
.str-pd-price{ font-size:1.6rem; font-weight:800; margin:10px 0; }
.str-pd-price .was{ font-size:1rem; color:var(--str-muted); text-decoration:line-through; margin-left:8px; font-weight:600; }
.str-qty-input{ width:64px; text-align:center; border:1px solid var(--str-border); border-radius:8px; padding:8px; background:var(--str-card); color:var(--str-text); }

/* Product variant swatches (Size / Finish) */
.str-swatch-block{ margin:14px 0; }
.str-swatch-label{ display:block; font-size:.78rem; font-weight:700; color:var(--str-muted); margin-bottom:6px; }
.str-swatch-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.str-swatch{ padding:7px 16px; border-radius:99px; border:1px solid var(--str-border); background:var(--str-card); color:var(--str-text); font-size:.85rem; font-weight:600; cursor:pointer; transition:border-color .15s, background .15s, color .15s; }
.str-swatch:hover{ border-color:var(--str-violet); }
.str-swatch.active{ background:var(--str-violet); border-color:var(--str-violet); color:#fff; }

/* Cards / generic */
.str-card{ background:var(--str-card); border:1px solid var(--str-border); border-radius:var(--str-radius); padding:22px; margin-bottom:20px; }
.str-empty{ text-align:center; padding:60px 20px; color:var(--str-muted); }
.str-empty i{ font-size:2.4rem; display:block; margin-bottom:10px; color:var(--str-border); }

/* Tables (cart, orders) */
.str-table{ width:100%; border-collapse:collapse; }
.str-table th{ text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.4px; color:var(--str-muted); padding:8px 10px; border-bottom:1px solid var(--str-border); }
.str-table td{ padding:12px 10px; border-bottom:1px solid var(--str-border); vertical-align:middle; }
.str-table tr:last-child td{ border-bottom:0; }
.str-cart-thumb{ width:56px; height:56px; border-radius:10px; object-fit:cover; background:var(--str-bg); }

/* Tabs (account page) */
.str-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; border-bottom:1px solid var(--str-border); }
.str-tabs a{ padding:10px 16px; text-decoration:none; color:var(--str-muted); font-weight:600; font-size:.88rem; border-bottom:2px solid transparent; }
.str-tabs a.active{ color:var(--str-violet); border-color:var(--str-violet); }

/* Pagination (store_pagination() output) */
.str-pagination-nav{ display:flex; gap:6px; justify-content:center; margin-top:28px; }
.str-pagination-nav a,.str-pg-current,.str-pg-ellipsis{ min-width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; text-decoration:none; color:var(--str-text); font-size:.85rem; }
.str-pagination-nav a{ border:1px solid var(--str-border); }
.str-pagination-nav a:hover{ background:rgba(211,47,47,.08); }
.str-pg-current{ background:var(--str-violet); color:#fff; font-weight:700; }

/* Footer */
.str-footer{ background:#1D1B1B; color:#cfc4c4; padding:40px 0 0; }
.footer-grid{ display:grid; grid-template-columns:2fr repeat(3,1fr); gap:28px; padding-bottom:28px; }
.str-footer h6{ color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
.str-footer a{ display:block; color:#cfc4c4; text-decoration:none; font-size:.86rem; margin-bottom:8px; }
.str-footer a:hover{ color:#fff; }
.str-footer-desc{ font-size:.85rem; opacity:.85; max-width:280px; }
.str-footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:16px 18px; text-align:center; font-size:.8rem; opacity:.75; }

/* Mobile app-like search toggle (mirrors blog's icon-btn language) */
.str-mobile-search-toggle{ display:none; }
.str-mobile-search-panel{ display:none; }

/* Mobile bottom tab bar — same app-like pattern as the blog's .tabbar */
.str-tabbar{ display:none; }

@media (max-width:991px){
  .str-search{ display:none; }
  .str-mobile-search-toggle{ display:flex; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .str-footer{ padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)); }

  .str-mobile-search-panel.show{
    display:block; padding:0 18px 12px;
  }
  .str-mobile-search-panel form{
    display:flex; align-items:center; gap:8px; background:var(--str-bg);
    border:1px solid var(--str-border); border-radius:99px; padding:8px 16px;
  }
  .str-mobile-search-panel input{ border:0; background:transparent; outline:0; width:100%; color:var(--str-text); font-size:.92rem; }
  .str-mobile-search-panel i{ color:var(--str-muted); }

  .str-nav{ display:none; }

  .str-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1030;
    background:var(--str-card); border-top:1px solid var(--str-border);
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -4px 18px rgba(0,0,0,.06);
  }
  .str-tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:9px 4px 8px; text-decoration:none; color:var(--str-muted);
    font-size:.68rem; font-weight:700; position:relative;
  }
  .str-tabbar a i{ font-size:1.2rem; }
  .str-tabbar a.active{ color:var(--str-violet); }
  .str-tabbar .str-tabbar-count{
    position:absolute; top:2px; right:calc(50% - 18px); background:var(--str-violet); color:#fff;
    font-size:.6rem; font-weight:700; min-width:15px; height:15px; border-radius:99px;
    display:flex; align-items:center; justify-content:center; padding:0 3px;
  }
}
@media (max-width:575px){
  .footer-grid{ grid-template-columns:1fr; }
  .str-product-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .str-cat-grid{ grid-template-columns:repeat(3,1fr); }
  .str-hero{ padding:26px 22px; }
  .str-hero h1{ font-size:1.5rem; }
  .str-pd-price{ font-size:1.35rem; }
  .str-table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ============================================================
   Premium browse UI — shop.php / category.php / collection.php
   (product-filter-panel.php, product-sort-panel.php, product-grid.php)
   ============================================================ */

/* Sticky mobile filter/sort bar — hidden on desktop, only sticky bar is */
.str-sticky-mobile-bar{ display:none; }

/* Desktop layout: sidebar filter panel + main grid */
.str-browse-layout{ display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:start; }
.str-filter-desktop{ position:sticky; top:80px; }

/* Toolbar: product count + desktop sort + grid/list toggle */
.str-grid-toolbar{ display:flex; align-items:center; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.str-product-count{ font-size:.85rem; color:var(--str-muted); font-weight:600; }
.str-toolbar-sort{ margin-left:auto; }
.str-toolbar-sort label{ display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--str-muted); }
.str-toolbar-sort select{ border:1px solid var(--str-border); border-radius:8px; padding:6px 10px; background:var(--str-bg); color:var(--str-text); font-size:.85rem; }
.str-view-toggle{ display:flex; gap:2px; border:1px solid var(--str-border); border-radius:8px; overflow:hidden; flex-shrink:0; }
.str-view-toggle button{ width:34px; height:32px; border:0; background:var(--str-bg); color:var(--str-muted); display:flex; align-items:center; justify-content:center; }
.str-view-toggle button.active{ background:var(--str-violet); color:#fff; }

/* Active filter chips */
.str-chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.str-chip{ display:inline-flex; align-items:center; gap:5px; background:var(--str-card); border:1px solid var(--str-border); border-radius:99px; padding:5px 12px; font-size:.78rem; text-decoration:none; color:var(--str-text); }
.str-chip i{ color:var(--str-violet); font-size:.8rem; }
.str-chip-clear{ color:var(--str-violet); border-color:var(--str-violet); font-weight:600; }

/* Discount badge on product cards */
.str-discount-badge{ position:absolute; top:10px; right:10px; background:var(--str-violet); color:#fff; font-size:.68rem; font-weight:800; padding:3px 8px; border-radius:6px; }

/* List view */
.str-product-list{ display:flex; flex-direction:column; gap:12px; }
.str-product-list .str-product-card{ flex-direction:row; align-items:stretch; }
.str-product-list .str-product-cover{ width:130px; flex-shrink:0; aspect-ratio:1; }
.str-product-list .str-product-body{ flex:1; justify-content:center; }
@media (max-width:575px){
  .str-product-list .str-product-cover{ width:100px; }
}

/* Secondary button (Buy Now / Share / sticky filter-sort bar) */
.str-btn-secondary{ background:var(--str-bg); border:1px solid var(--str-violet); color:var(--str-violet); border-radius:8px; font-weight:600; }
.str-btn-secondary:hover{ background:rgba(211,47,47,.08); color:var(--str-violet); }

/* Filter form (shared inline-desktop / bottom-sheet-mobile) */
.str-filter-form{ display:flex; flex-direction:column; gap:16px; }
.str-filter-group{ display:flex; flex-direction:column; gap:6px; }
.str-filter-group label{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--str-muted); display:flex; align-items:center; gap:5px; }
.str-filter-group select{ border:1px solid var(--str-border); border-radius:8px; padding:8px 10px; background:var(--str-bg); color:var(--str-text); font-size:.88rem; }
.str-check-label{ flex-direction:row !important; align-items:center; gap:8px !important; text-transform:none !important; font-weight:600 !important; font-size:.88rem !important; color:var(--str-text) !important; }
.str-filter-clear{ display:inline-flex; align-items:center; gap:5px; color:var(--str-violet); text-decoration:none; font-size:.85rem; font-weight:600; }

/* Sort options (mobile sheet radio list) */
.str-sort-option{ display:flex; align-items:center; gap:10px; padding:12px 4px; border-bottom:1px solid var(--str-border); font-size:.92rem; cursor:pointer; }
.str-sort-option:last-child{ border-bottom:0; }
.str-sort-option input{ accent-color:var(--str-violet); }
.str-sort-option i{ margin-left:auto; }

/* Mobile bottom sheets — default state is the fixed slide-up sheet */
.str-sheet-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1040; }
.str-sheet-overlay.show{ display:block; }
.str-sheet{
  position:fixed; left:0; right:0; bottom:0; background:var(--str-bg);
  border-radius:20px 20px 0 0; z-index:1045; transform:translateY(100%);
  transition:transform .25s ease; max-height:80vh; overflow-y:auto; padding:0 18px 18px;
  box-shadow:0 -8px 30px rgba(0,0,0,.15);
}
.str-sheet.show{ transform:translateY(0); }
.str-sheet-handle{ width:40px; height:4px; background:var(--str-border); border-radius:99px; margin:10px auto 6px; }
.str-sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 0 14px; }
.str-sheet-head h6{ margin:0; font-weight:800; }
.str-sheet-apply{ margin-top:16px; }

@media (min-width:768px){
  /* Filter sheet becomes the static desktop sidebar panel — same DOM node, repositioned */
  .str-filter-desktop .str-sheet-overlay{ display:none !important; }
  .str-filter-desktop .str-sheet{
    position:static; transform:none; background:transparent; border-radius:0;
    box-shadow:none; padding:0; max-height:none; overflow:visible;
  }
  .str-filter-desktop .str-sheet-handle,
  .str-filter-desktop .str-sheet-head,
  .str-filter-desktop .str-sheet-apply{ display:none; }
  /* Sort sheet is mobile-only — desktop uses the compact toolbar dropdown instead */
  #strSortSheet, #strSortOverlay{ display:none !important; }
}

@media (max-width:767px){
  .str-browse-layout{ display:block; }
  /* NOT display:none — the fixed-position sheet inside must keep rendering via the
     viewport on mobile; only its own layout footprint collapses to zero. */
  .str-filter-desktop{ height:0; margin:0; overflow:visible; }
  .str-sticky-mobile-bar{ display:flex; gap:10px; position:sticky; top:0; z-index:20; padding:10px 0; background:var(--str-bg); margin-bottom:4px; }
  .str-toolbar-sort{ display:none; } /* mobile uses the sticky Sort button + sheet instead */
}

/* ============================================================
   Product page (product-view-physical.php / product-view-digital.php /
   product-view-gallery.php / product-view-tail.php)
   ============================================================ */

/* Gallery + zoom */
.str-pd-zoom-wrap{ position:relative; cursor:zoom-in; }
.str-pd-zoom-lens{
  position:absolute; inset:0; pointer-events:none; opacity:0; border-radius:var(--str-radius);
  background-repeat:no-repeat; background-size:200%; transition:opacity .15s ease;
}
.str-pd-zoom-wrap.zoom-active .str-pd-zoom-lens{ opacity:1; }
.str-pd-thumbs img.active{ border-color:var(--str-violet); border-width:2px; }
.str-pd-preview-tag{
  position:absolute; left:10px; bottom:10px; background:rgba(29,27,27,.75); color:#fff;
  font-size:.7rem; font-weight:600; padding:5px 10px; border-radius:99px; display:flex; align-items:center; gap:5px;
}
.str-pd-zoom-overlay{
  display:none; position:fixed; inset:0; z-index:1050; background:rgba(0,0,0,.92);
  align-items:center; justify-content:center;
}
.str-pd-zoom-overlay.show{ display:flex; }
.str-pd-zoom-overlay img{ max-width:92vw; max-height:88vh; object-fit:contain; }
.str-pd-zoom-close{ position:absolute; top:16px; right:16px; background:#fff; }

/* Discount badge inline (next to price, vs. the absolute-positioned card version) */
.str-discount-badge.str-discount-inline{ position:static; display:inline-block; margin-left:8px; vertical-align:middle; }

/* Specs table */
.str-spec-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.str-spec-table th{ text-align:left; width:42%; color:var(--str-muted); font-weight:600; padding:8px 8px 8px 0; border-bottom:1px solid var(--str-border); vertical-align:top; }
.str-spec-table td{ padding:8px 0; border-bottom:1px solid var(--str-border); }
.str-spec-table tr:last-child th, .str-spec-table tr:last-child td{ border-bottom:0; }

/* Trust badges */
.str-trust-row{ display:flex; gap:14px; flex-wrap:wrap; margin:16px 0; }
.str-trust-badge{ display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--str-muted); }
.str-trust-badge i{ color:var(--str-ok); font-size:1rem; }

@media (max-width:575px){
  .str-trust-row{ gap:10px; }
  .str-trust-badge{ font-size:.74rem; }
}