/* =============================================
   THEME "MODERN" — bushörnan.se-inspired redesign
   Scoped entirely under body.theme-modern so it only ever affects pages
   that opt in (currently the homepage and the shop listing page) —
   every other page keeps the existing dark "London Studios" look in
   shop.css untouched. .product-card is shared markup (_product_card.blade.php)
   used by both pages, so its styling here is unified across them.
   ============================================= */

body.theme-modern {
  --tm-bg:         #fbfbfc;
  --tm-surface:    #ffffff;
  --tm-ink:        #14171c;
  --tm-ink-muted:  #6b7078;
  --tm-border:     rgba(20, 23, 28, 0.08);
  --tm-border-hover: rgba(20, 23, 28, 0.16);
  --tm-navy:       #0b1524;
  --tm-navy-alt:   #101c30;
  --tm-radius:     12px;
  --tm-radius-lg:  16px;
  --tm-shadow:     0 1px 2px rgba(20,23,28,0.04), 0 8px 24px rgba(20,23,28,0.06);
  --tm-shadow-hover: 0 4px 10px rgba(20,23,28,0.06), 0 16px 40px rgba(20,23,28,0.10);

  /* Re-point shop.css's own variables at light values. shop.css is written
     almost entirely in terms of these (--bg-card, --border, --text, etc.),
     so this alone re-themes the vast majority of every page's shared
     components (generic cards, tables, badges, account layout boxes,
     review cards, etc.) without needing an individual override for each
     one. Only genuinely hardcoded colors (not var()-based) need a specific
     rule below — the header/hero/footer/product-card sections still have
     their own deliberate overrides beyond just "light instead of dark".*/
  --bg-base:      var(--tm-bg);
  --bg-card:      var(--tm-surface);
  --bg-card-alt:  #f3f4f6;
  --border:       var(--tm-border);
  --border-hover: var(--tm-border-hover);
  --text:         rgba(20, 23, 28, 0.78);
  --text-muted:   var(--tm-ink-muted);
  --text-bright:  var(--tm-ink);

  background: var(--tm-bg);
  color: rgba(20, 23, 28, 0.78);
}

/* Card-ish boxes styled with a shadow instead of shop.css's dark-mode
   border-only look, now that --bg-card/--border resolve light */
body.theme-modern .bg-thatdark,
body.theme-modern .stat-card,
body.theme-modern .homepagereviews,
body.theme-modern .featured-mini,
body.theme-modern .product-detail-info,
body.theme-modern .account-sidebar {
  box-shadow: var(--tm-shadow);
}

body.theme-modern h1,
body.theme-modern h2,
body.theme-modern h3,
body.theme-modern h4 {
  color: var(--tm-ink);
}

/* ---------------------------------------------
   HEADER — light, retail-catalog nav instead of
   the dark blurred bar used everywhere else
   --------------------------------------------- */
body.theme-modern .shop-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tm-border);
}
body.theme-modern .shop-header-logo { color: var(--tm-ink) !important; }
body.theme-modern .shop-nav-link { color: var(--tm-ink-muted); }
body.theme-modern .shop-nav-link:hover { color: var(--tm-ink); background: rgba(20,23,28,0.04); }
body.theme-modern .mobile-menu-btn {
  background: rgba(20,23,28,0.04);
  border-color: var(--tm-border);
  color: var(--tm-ink);
}
body.theme-modern .header-avatar { border-color: var(--tm-border-hover); }
body.theme-modern .notiicon i { color: var(--tm-ink-muted) !important; }
body.theme-modern .notiicon:hover i { color: var(--tm-ink) !important; }

/* Currency / language pill switchers in the header */
body.theme-modern .shop-header-actions > div[style*="background:rgba(255,255,255,0.06)"] {
  background: rgba(20,23,28,0.04) !important;
  border-color: var(--tm-border) !important;
}

/* Dropdown menu (avatar) reads dark-on-light here even though it's shared markup */
body.theme-modern .dropdown-menu {
  background: var(--tm-surface);
  border-color: var(--tm-border);
  box-shadow: var(--tm-shadow-hover);
}
body.theme-modern .dropdown-item { color: rgba(20,23,28,0.8); }
body.theme-modern .dropdown-item:hover { background: rgba(20,23,28,0.05); color: var(--tm-ink); }
body.theme-modern .dropdown-item.text-danger { color: #dc2626 !important; }

/* ---------------------------------------------
   HERO — full-bleed dark navy banner with a big
   headline, mirrors bushörnan's dramatic top banner
   --------------------------------------------- */
body.theme-modern .headerimagehome {
  background: var(--tm-navy);
  min-height: 480px;
  padding: 3rem 0;
}
/* The tenant's own header photo (or the bundled default), now actually
   visible instead of a faint 0.07 watermark — matches bushörnan's
   dramatic full-bleed photo banner */
body.theme-modern .headerimagehome::before { opacity: 0.85; }
/* Dark scrim over the photo so white text stays legible anywhere on it,
   heaviest on the left where the text sits */
body.theme-modern .headerimagehome::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Even darkening (not left-weighted) now that the content is centered rather
     than left-aligned — legible no matter where the text sits horizontally */
  background: radial-gradient(ellipse at center, rgba(11,21,36,0.75) 0%, rgba(11,21,36,0.55) 60%, rgba(11,21,36,0.7) 100%);
}
body.theme-modern .homepagemiddle {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
  text-align: center;
}
body.theme-modern .homepagemiddle .d-flex { justify-content: center; }
/* !important: guarantees these stay legible against the dark hero even if
   shop.css's own var(--text-muted)-based .midpg rule ties on specificity */
body.theme-modern .midtitle { color: #ffffff !important; }
body.theme-modern .midpg { color: rgba(255,255,255,0.85) !important; }

body.theme-modern .headerimagehome .btn-outline-secondary {
  border-color: rgba(255,255,255,0.35);
  color: #fff !important;
}
body.theme-modern .headerimagehome .btn-outline-secondary:hover { background: rgba(255,255,255,0.1); }
body.theme-modern .headerimagehome .btn-theme { border-radius: 8px; }

/* ---------------------------------------------
   SECTION HEADINGS — small uppercase kicker over
   a bold title, catalog style
   --------------------------------------------- */
body.theme-modern .section-title { color: var(--tm-ink); }
body.theme-modern .section-sub {
  color: var(--tm-ink-muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
body.theme-modern .section-divider-line { background: var(--tm-border); }

/* ---------------------------------------------
   STAT CARDS
   --------------------------------------------- */
body.theme-modern .stat-card {
  background: var(--tm-surface);
  border-color: var(--tm-border);
  box-shadow: var(--tm-shadow);
}
body.theme-modern .stat-card:hover {
  border-color: var(--tm-border-hover);
  box-shadow: var(--tm-shadow-hover);
}
body.theme-modern .stat-num { color: var(--tm-ink); }
body.theme-modern .stat-label { color: var(--tm-ink-muted); }

/* ---------------------------------------------
   PRODUCT CARDS — flat catalog style (bushörnan's
   shop grid): no card box, no shadow, image bleeds
   to the edge, plain text, a full-width outlined
   button below instead of a small pill next to price
   --------------------------------------------- */
body.theme-modern .product-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
body.theme-modern .product-card:hover {
  border: none;
  box-shadow: none;
  transform: none;
}
body.theme-modern .product-card-img-wrap { background: #eef0f2; border-radius: 4px; }
body.theme-modern .product-card-body { padding: 0.85rem 0 0; gap: 0.4rem; }
body.theme-modern .product-card-name { color: var(--tm-ink); font-weight: 700; }
body.theme-modern .product-card-name:hover { color: var(--tm-ink); text-decoration: underline; }
body.theme-modern .product-card-view-text { color: var(--tm-ink-muted); }
body.theme-modern .product-card-stars { display: none; }

/* Price above the button, plain ink color instead of the accent color */
body.theme-modern .product-card-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
}
body.theme-modern .product-card-price { color: var(--tm-ink); font-weight: 600; font-size: 1rem; }
body.theme-modern .product-card-price-orig { color: var(--tm-ink-muted); }

/* Full-width outlined button, no fill, no icon — matches the reference exactly */
body.theme-modern .product-card-btn {
  background: transparent;
  border: 1px solid var(--tm-ink);
  color: var(--tm-ink) !important;
  border-radius: 4px;
  width: 100%;
  justify-content: center;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
}
body.theme-modern .product-card-btn:hover {
  background: var(--tm-ink);
  color: #fff !important;
  transform: none;
  opacity: 1;
}
body.theme-modern .product-card-btn i { display: none; }

body.theme-modern .product-card-sale-badge {
  background: var(--tm-ink);
  border-radius: 4px;
}
body.theme-modern .product-card-category-badge { border-radius: 4px; }
body.theme-modern .product-card-category {
  border: 1px dashed var(--tm-border-hover) !important;
  background: var(--tm-surface) !important;
}
body.theme-modern .product-card-category:hover {
  border-color: var(--theme-color) !important;
  box-shadow: var(--tm-shadow-hover) !important;
}

/* Hardcoded (non-variable) dark backgrounds elsewhere in shop.css */
body.theme-modern .bg-dark { background: var(--tm-surface) !important; }
body.theme-modern .bg-input-dark,
body.theme-modern .darkinputcolor,
body.theme-modern .inputstylelol,
body.theme-modern .searchbox,
body.theme-modern .product-desc code {
  background: #fff !important;
  color: var(--tm-ink) !important;
  border-color: var(--tm-border-hover);
}
body.theme-modern .darkinputcolor option { background: #fff; }

/* ---------------------------------------------
   TRUSTED BY / USING COMPANIES
   --------------------------------------------- */
body.theme-modern .usingcompanylogo { filter: grayscale(1) opacity(0.55); }
body.theme-modern .usingcompanylogo:hover { filter: grayscale(0) opacity(1); }

/* ---------------------------------------------
   BUTTONS — same variable-driven theme color,
   just squared up slightly for a retail feel
   --------------------------------------------- */
body.theme-modern .btn-theme,
body.theme-modern .btn-outline-theme {
  border-radius: 8px;
}
body.theme-modern .btn-outline-theme {
  color: var(--theme-color) !important;
}

/* ---------------------------------------------
   SHOP LISTING PAGE — sidebar (search/featured/sort/tags),
   sale banner, and the count row above the product grid
   --------------------------------------------- */
body.theme-modern .shop-sidebar {
  background: var(--tm-surface);
  border-color: var(--tm-border);
  box-shadow: var(--tm-shadow);
}
body.theme-modern .shop-sidebar-title { color: var(--tm-ink-muted); }
body.theme-modern .searchbox {
  background: #fff;
  border-color: var(--tm-border-hover);
  color: var(--tm-ink);
}
body.theme-modern .searchbox::placeholder { color: var(--tm-ink-muted); }
body.theme-modern .sidebar-tag-btn {
  background: rgba(20,23,28,0.03);
  color: rgba(20,23,28,0.75);
}
body.theme-modern .sidebar-tag-btn:hover { background: rgba(20,23,28,0.06); color: var(--tm-ink); border-color: var(--tm-border); }
body.theme-modern .sidebar-tag-btn.active { background: var(--theme-color); border-color: var(--theme-color); color: #fff; }
body.theme-modern .featured-mini { border-bottom-color: var(--tm-border); }
body.theme-modern .featured-mini-name { color: var(--tm-ink); }
body.theme-modern .featured-mini-price { color: var(--theme-color); }

body.theme-modern .shop-grid-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--tm-border);
  color: var(--tm-ink-muted);
  font-size: 0.85rem;
}
body.theme-modern .shop-grid-count { color: var(--tm-ink); font-weight: 600; }

/* Sale banner: readable on white instead of the dark-tuned inline colors */
body.theme-modern [style*="background:linear-gradient(135deg,rgba(239,68,68"],
body.theme-modern [style*="background:rgba(239,68,68,0.08)"] {
  background: #fef2f2 !important;
  border-color: rgba(239,68,68,0.25) !important;
}
body.theme-modern [style*="color:#e8eaf6"] { color: var(--tm-ink) !important; }
body.theme-modern [style*="color:#6b6e87"] { color: var(--tm-ink-muted) !important; }

/* ---------------------------------------------
   FOOTER — dark navy, matches the header/hero
   contrast rhythm instead of the mid-tone card bg
   --------------------------------------------- */
body.theme-modern .footerimage {
  background: var(--tm-navy) !important;
  border-top: none;
}
body.theme-modern .footerimage h3,
body.theme-modern .footerimage small,
body.theme-modern .footerimage p:not(.footerdescone) {
  color: #fff;
}
body.theme-modern .footerdescone { color: rgba(255,255,255,0.55); }
body.theme-modern .footerheaderone { color: rgba(255,255,255,0.4); }
body.theme-modern .footeritemone a { color: rgba(255,255,255,0.65); }
body.theme-modern .footeritemone a:hover { color: #fff; }
body.theme-modern .socialicon { color: rgba(255,255,255,0.6); }
body.theme-modern .socialicon:hover { color: #fff; }
body.theme-modern .footerimage [style*="Powered by"],
body.theme-modern .footerimage p[style*="font-size:smaller"] { color: rgba(255,255,255,0.4); }
body.theme-modern .footerimage a { color: rgba(255,255,255,0.7); }
body.theme-modern .footerimage a:hover { color: #fff; }

/* ---------------------------------------------
   OFFCANVAS / MODALS — mobile nav, notifications,
   account settings: all shared markup that would
   otherwise render dark-on-dark over a light page
   --------------------------------------------- */
body.theme-modern .offcanvas { background: var(--tm-surface) !important; border-color: var(--tm-border) !important; }
body.theme-modern .offcanvas-header { border-bottom-color: var(--tm-border); }
body.theme-modern .offcanvas-title { color: var(--tm-ink); }
body.theme-modern .offcanvas .shop-nav-link { color: rgba(20,23,28,0.75); }
body.theme-modern .offcanvas .shop-nav-link:hover { color: var(--tm-ink); background: rgba(20,23,28,0.05); }
body.theme-modern .offcanvas hr { border-color: var(--tm-border); }
body.theme-modern .closebutton { color: var(--tm-ink-muted); }
body.theme-modern .closebutton:hover { color: var(--tm-ink); }

body.theme-modern .modal-content {
  background: var(--tm-surface);
  border-color: var(--tm-border-hover);
  color: rgba(20,23,28,0.8);
}
body.theme-modern .modal-header { border-bottom-color: var(--tm-border); }
body.theme-modern .modal-header h5,
body.theme-modern .modal-title { color: var(--tm-ink); }
body.theme-modern .modal-footer { border-top-color: var(--tm-border); }
body.theme-modern .form-label { color: rgba(20,23,28,0.7); }
body.theme-modern .form-control,
body.theme-modern .form-select {
  background: #fff;
  border-color: var(--tm-border-hover);
  color: var(--tm-ink);
}
body.theme-modern .form-control:focus,
body.theme-modern .form-select:focus {
  background: #fff;
  color: var(--tm-ink);
}

@media (max-width: 575px) {
  body.theme-modern .headerimagehome { min-height: 440px; }
}