/* ==========================================================================
   SOLARIS NIGHT TEMPLATE — dusk-to-dawn solar lighting storefront. Deep navy
   night sky, amber glow accent, JetBrains Mono price/spec details, twinkling
   stars + a pointer-follow torch glow. The shared theme toggle (#themeToggleBtn,
   wired in layouts/app.blade.php) drives a literal day/night switch here —
   unlike other templates this one leans into the light/dark split as its
   whole visual identity.
   Loaded only by resources/views/storefront/templates/solaris/layouts/app.blade.php.
   ========================================================================== */

:root{
  --sl-bg:        #080B14;
  --sl-surface:   #0F1424;
  --sl-surface-2: #121830;
  --sl-line:      rgba(255,255,255,.08);
  /* Fixed amber "glow" identity — kept independent of the shared --brand-primary
     admin setting so this template always reads as "solaris", same reasoning
     as Neon's fixed green and Corporate's fixed blue. */
  --sl-accent:    #FFB454;
  --sl-accent-dim: rgba(255,180,84,.15);
  --sl-ink:       #EDF1FA;
  --sl-ink-soft:  #8892A8;
  --sl-radius:    14px;
}

:root[data-theme="light"]{
  --sl-bg:        #DCEBFF;
  --sl-surface:   #ffffff;
  --sl-surface-2: #EAF2FF;
  --sl-line:      rgba(19,32,51,.1);
  --sl-accent:    #D2691E;
  --sl-accent-dim: rgba(210,105,30,.14);
  --sl-ink:       #132033;
  --sl-ink-soft:  #5b6b82;
}

.psr{ --psr-accent: var(--sl-accent); }

body{ background: var(--sl-bg); color: var(--sl-ink); font-family:'Inter', sans-serif; transition: background .5s ease, color .5s ease; overflow-x:hidden; }
h1,h2,h3,h4,h5,h6{ font-family:'Sora', sans-serif; font-weight:700; }
.sl-mono{ font-family:'JetBrains Mono', monospace; }

a{ color: var(--sl-accent); }

/* ---------- ambient stars + torch glow (dark mode only) ---------- */
.sl-stars{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:1; transition:opacity .6s ease; }
:root[data-theme="light"] .sl-stars{ opacity:0; }
@keyframes slTwinkle{ 0%,100%{opacity:.2;} 50%{opacity:1;} }
.sl-torch{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(600px circle at var(--sl-mx,50%) var(--sl-my,20%), rgba(255,180,84,.08), transparent 60%);
  transition:opacity .4s ease;
}
:root[data-theme="light"] .sl-torch{ opacity:0; }
header, main, footer{ position:relative; z-index:2; }

/* ---------- bulb mark (used when no logo image is set) ---------- */
.sl-bulb{ width:18px; height:18px; border-radius:50%; background: var(--sl-accent); box-shadow:0 0 12px 3px var(--sl-accent-dim); animation: slPulse 2.4s ease-in-out infinite; flex:none; }
:root[data-theme="light"] .sl-bulb{ animation:none; box-shadow:none; }
@keyframes slPulse{ 0%,100%{ box-shadow:0 0 10px 2px var(--sl-accent-dim); } 50%{ box-shadow:0 0 18px 5px var(--sl-accent-dim); } }

/* ---------- header (single row, left logo) ---------- */
.sl-header{ background: var(--sl-surface); border-bottom:1px solid var(--sl-line); padding:14px 0; transition: padding .25s ease, background .5s ease, border-color .5s ease; }
.sl-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--sl-ink); font-weight:800; font-size:20px; font-family:'Sora',sans-serif; transition: font-size .25s ease; }
.sl-brand img{ height:38px; width:38px; max-height:64px; max-width:400px; object-fit:contain; border-radius:6px; background:#fff; padding:3px; flex:none; transition: height .25s ease, width .25s ease, max-height .25s ease; }

.sl-header.sl-is-scrolled{ padding: 8px 0; }
.sl-header.sl-is-scrolled .sl-brand img{ height: 30px !important; max-height: 30px !important; }
.sl-header.sl-is-scrolled .sl-brand{ font-size: 16px; }

/* Phone header: logo on top, company name stacked underneath it (instead of
   side-by-side) so a custom Logo Width (admin-controlled, up to 400px) or a
   long company name can't overflow a phone-width header. */
@media (max-width:575.98px){
  .sl-header .container{ gap:8px; }
  .sl-header .sl-brand{ flex-direction:column; align-items:flex-start; gap:2px; min-width:0; flex:1 1 auto; }
  .sl-header .sl-brand img{ max-width:72px !important; width:auto !important; height:32px !important; max-height:32px !important; }
  .sl-header .sl-brand-name{ font-size:12px; line-height:1.15; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
.sl-search{ flex-grow:1; max-width:480px; }
.sl-search .form-control{ background: var(--sl-surface-2); border:1px solid var(--sl-line); color: var(--sl-ink); border-radius: var(--sl-radius) 0 0 var(--sl-radius); }
.sl-search .form-control::placeholder{ color: var(--sl-ink-soft); }
.sl-search .form-control:focus{ box-shadow:none; border-color: var(--sl-accent); }
.sl-search-btn{ background: var(--sl-accent); border:none; color:#1a1200; border-radius:0 var(--sl-radius) var(--sl-radius) 0; padding:0 16px; font-weight:700; }
.sl-icon-btn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--sl-line); background: var(--sl-surface-2); color: var(--sl-ink);
  position:relative; text-decoration:none;
}
.sl-icon-btn:hover{ border-color: var(--sl-accent); color: var(--sl-accent); }
.sl-cart-count{ position:absolute; top:-5px; right:-5px; background: var(--sl-accent); color:#1a1200; font-size:10px; font-weight:800; border-radius:50%; width:17px; height:17px; display:flex; align-items:center; justify-content:center; }
.sl-account-toggle{ width:auto; min-width:40px; padding:0 12px; gap:6px; font-size:13px; font-weight:700; white-space:nowrap; }

/* ---------- day/night pill (drives #themeToggleBtn) ---------- */
.sl-daynight{ display:flex; align-items:center; gap:8px; background: var(--sl-surface-2); border:1px solid var(--sl-line); border-radius:100px; padding:5px; cursor:pointer; }
.sl-dn-label{ font-size:11px; font-family:'JetBrains Mono',monospace; color: var(--sl-ink-soft); padding:0 2px; }
.sl-dn-dawn{ display:none; }
:root[data-theme="light"] .sl-dn-dusk{ display:none; }
:root[data-theme="light"] .sl-dn-dawn{ display:inline; }
.sl-dn-track{ position:relative; width:38px; height:20px; border-radius:100px; background:#1c2440; transition:background .4s; display:inline-block; }
:root[data-theme="light"] .sl-dn-track{ background:#BFE0FF; }
.sl-dn-knob{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background: var(--sl-accent); box-shadow:0 0 8px 2px var(--sl-accent-dim); transition:left .35s cubic-bezier(.6,.2,.2,1); }
:root[data-theme="light"] .sl-dn-knob{ left:20px; box-shadow:none; }

.sl-nav-row{ background: var(--sl-nav-bg-color, var(--sl-bg)); border-bottom:1px solid var(--sl-line); transition: background .5s ease, border-color .5s ease; }
.sl-nav{ display:flex; align-items:center; justify-content: var(--sl-nav-align, flex-start); gap:28px; }
.sl-nav a{ color: var(--sl-nav-text-color, var(--sl-ink-soft)); text-decoration:none; font-size: var(--sl-nav-font-size, 13px); font-family: var(--sl-nav-font-family, inherit); font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding: var(--sl-nav-padding-y, 11px) 0; display:inline-block; border-bottom:2px solid transparent; }
.sl-nav a:hover, .sl-nav a.active{ color: var(--sl-accent); border-color: var(--sl-accent); }
.sl-sticky-wrap{ background: var(--sl-surface); transition: background .5s ease; }
.sl-nav-dropdown{ position:relative; }
.sl-nav-dropdown .dropdown-toggle{ cursor:pointer; }
.sl-nav-dropdown .dropdown-toggle::after{ margin-left:6px; vertical-align:2px; }
.sl-nav-dropdown .dropdown-menu{ background: var(--sl-surface-2); border:1px solid var(--sl-line); border-radius: var(--sl-radius); padding:8px; margin-top:0; }
.sl-nav-dropdown .dropdown-item{ border-radius:6px; padding:8px 12px; font-size:13.5px; color: var(--sl-ink); }
.sl-nav-dropdown .dropdown-item:hover, .sl-nav-dropdown .dropdown-item:focus{ background: var(--sl-accent-dim); color: var(--sl-accent); }

/* ---------- hero ---------- */
/* Carousel background is admin-controlled (Settings > "Use a custom
   hero/carousel background color", --sl-hero-fallback-bg) — solid black by
   default — on every slide, regardless of the light/dark theme toggle. Only
   visible on a slide with no uploaded banner image (an uploaded image always
   covers the box edge-to-edge, by design — see hero_image_fit above). */
.sl-hero,
.sl-hero-2,
.sl-hero-3,
:root[data-theme="light"] .sl-hero,
:root[data-theme="light"] .sl-hero-2,
:root[data-theme="light"] .sl-hero-3{
  background: var(--sl-hero-fallback-bg, #000);
}
.sl-hero{
  position:relative; overflow:hidden;
  min-height:440px; display:flex; align-items:center; background-size:cover; background-position:center;
}
.sl-hero-has-image{ background-size: var(--sl-hero-bg-size, cover) !important; background-position:center !important; background-repeat:no-repeat !important; }
.sl-hero-has-image::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(4,6,12,.82) 0%, rgba(4,6,12,.5) 45%, rgba(4,6,12,.15) 100%); }
/* No hero text on this slide (admin turned it off because the uploaded image
   already carries its own text/branding) — drop the darkening overlay too so
   the image shows at its true brightness instead of looking washed out for
   no reason. */
.sl-hero-no-text.sl-hero-has-image::after{ display:none; }
.sl-hero-inner{ padding:60px 0; max-width:620px; position:relative; z-index:1; }
/* Hero text stays on the light/amber palette in both themes since the hero
   background is now fixed black, not theme-dependent like --sl-ink is. */
.sl-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.05em; color:#FFB454; background:rgba(255,180,84,.15); padding:6px 12px; border-radius:100px; margin-bottom:18px; }
.sl-eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:#FFB454; animation: slBlink 1.8s ease-in-out infinite; }
@keyframes slBlink{ 50%{ opacity:.25; } }
.sl-hero h1{ font-size:clamp(28px,4.4vw,50px); line-height:1.1; margin:0 0 16px; color:#EDF1FA; }
.sl-hero .sl-lit{ color:#FFB454; text-shadow:0 0 30px rgba(255,180,84,.15); }
.sl-hero p{ color:#8892A8; max-width:48ch; margin-bottom:26px; }
.sl-hero-btn{ display:inline-block; background: var(--sl-accent); color:#1a1200; padding:13px 30px; border-radius:100px; font-weight:800; letter-spacing:.02em; text-decoration:none; font-size:14px; box-shadow:0 8px 24px var(--sl-accent-dim); }
.sl-hero-btn:hover{ background:#fff; color:#1a1200; }
/* On phones, always show the whole banner image uncropped — regardless of
   the admin's "cover"/"contain" Hero Image Fit setting for desktop — since
   there's no room to safely crop a wide banner down to a 360px-tall box
   without cutting off its subject. */
@media (max-width:767.98px){
  .sl-hero{ min-height:360px; }
  .sl-hero-inner{ padding:44px 0; }
  .sl-hero-has-image{ background-size:contain !important; background-position:center !important; }
}
@media (max-width:575.98px){
  /* The prev/next arrow tap zones sit at the very screen edges (44px wide,
     see below) — without extra side padding here, mobile heading/body text
     runs right up against them instead of clearing them with room to spare. */
  .sl-hero .container{ padding-left:50px; padding-right:50px; }
}

/* ---------- hero carousel controls ---------- */
.sl-hero-carousel{ overflow:hidden; }
.sl-hero-carousel .carousel-control-prev,
.sl-hero-carousel .carousel-control-next{ width:64px; opacity:1; }
/* Arrow icon color AND button background are both admin-controlled
   (Settings > Hero Carousel Arrow Color / Arrow Background Color —
   --sl-arrow-color / --sl-arrow-bg) instead of switching with the light/dark
   theme toggle, since the hero itself no longer switches with it either. */
.sl-carousel-arrow{
  width:44px; height:44px; border-radius:50%; background: var(--sl-arrow-bg, rgba(255,255,255,.08));
  display:inline-flex; align-items:center; justify-content:center; color: var(--sl-arrow-color, #fff); font-size:1.1rem;
  border:1px solid rgba(255,255,255,.25); transition:filter .15s ease;
}
.sl-carousel-arrow:hover{ filter:brightness(1.35); }
.sl-carousel-dots{ position:absolute; bottom:16px; margin:0; gap:8px; }
.sl-carousel-dots [data-bs-target]{
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.3); opacity:1;
  border:none; margin:0 4px; text-indent:-9999px;
}
.sl-carousel-dots [data-bs-target].active{ background: var(--sl-accent); }
@media (max-width:575.98px){
  .sl-hero-carousel .carousel-control-prev,
  .sl-hero-carousel .carousel-control-next{ width:44px; }
  .sl-carousel-arrow{ width:32px; height:32px; font-size:.85rem; }
}

/* ---------- dusk-to-dawn sensor strip ---------- */
.sl-sensor-strip-wrap{ padding:36px 0 0; }
.sl-sensor-strip{ display:flex; background: var(--sl-surface); border:1px solid var(--sl-line); border-radius:20px; overflow:hidden; }
.sl-sensor-step{ flex:1; padding:22px 18px; position:relative; text-align:center; }
.sl-sensor-step:not(:last-child)::after{ content:''; position:absolute; right:0; top:20%; bottom:20%; width:1px; background: var(--sl-line); }
.sl-sensor-ico{ width:38px; height:38px; margin:0 auto 10px; border-radius:50%; background: var(--sl-surface-2); display:flex; align-items:center; justify-content:center; color: var(--sl-accent); font-size:17px; }
.sl-sensor-step .t{ font-size:12.5px; font-weight:600; color: var(--sl-ink); }
.sl-sensor-step .s{ font-size:11px; color: var(--sl-ink-soft); margin-top:2px; }
@media (max-width:767.98px){ .sl-sensor-strip{ flex-wrap:wrap; } .sl-sensor-step{ flex:1 1 50%; } .sl-sensor-step:nth-child(2)::after{ display:none; } }

/* ---------- section heading ---------- */
.sl-heading{ margin-bottom:34px; }
.sl-heading h2{ font-size:clamp(22px,2.8vw,30px); color: var(--sl-ink); }
.sl-heading.center{ text-align:center; }

/* ---------- category tiles ---------- */
.sl-cat-tile{
  display:block; text-decoration:none; text-align:center; border:1px solid var(--sl-line); border-radius: var(--sl-radius);
  padding: var(--sl-cat-card-padding, 20px) 12px; background: var(--sl-surface); transition: all .18s ease; height:100%;
}
.sl-cat-tile:hover{ border-color: var(--sl-accent); box-shadow:0 0 0 1px var(--sl-accent); transform: translateY(-2px); }
.sl-cat-tile .shot{ width: var(--sl-cat-icon-size, 60px); height: var(--sl-cat-icon-size, 60px); margin:0 auto 12px; border-radius:50%; background: var(--sl-surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sl-cat-tile .shot img{ width:100%; height:100%; object-fit:cover; }
.sl-cat-tile .shot i{ font-size:24px; color: var(--sl-accent); }
.sl-cat-tile h6{ margin:0; font-weight:700; font-size:13px; color: var(--sl-ink); }

/* ---------- product grid & card ---------- */
.sl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:1199.98px){ .sl-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:899.98px){ .sl-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:479.98px){ .sl-grid{ grid-template-columns:1fr; } }

.sl-card{ background: var(--sl-surface); border:1px solid var(--sl-line); border-radius: var(--sl-radius); overflow:hidden; transition: all .2s ease; display:flex; flex-direction:column; height:100%; }
.sl-card:hover{ border-color: var(--sl-accent); box-shadow:0 0 0 1px var(--sl-accent), 0 16px 34px rgba(255,180,84,.1); transform: translateY(-3px); }
.sl-card .shot{ position:relative; aspect-ratio:1/1; background: var(--sl-surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sl-card .shot img{ width:100%; height:100%; object-fit:cover; }
.sl-card .discount-tag{ position:absolute; top:10px; left:10px; z-index:2; background: var(--sl-accent); color:#1a1200; font-size:11px; font-weight:800; padding:4px 9px; border-radius:100px; }
.sl-card .status-dot{ position:absolute; top:10px; right:10px; z-index:2; display:flex; align-items:center; gap:5px; background:rgba(8,11,20,.6); backdrop-filter:blur(4px); padding:4px 8px 4px 5px; border-radius:100px; }
.sl-card .status-dot .d{ width:6px; height:6px; border-radius:50%; background: var(--sl-accent); box-shadow:0 0 6px 2px var(--sl-accent-dim); }
.sl-card .status-dot span:last-child{ font-family:'JetBrains Mono',monospace; font-size:9px; color:#fff; letter-spacing:.03em; }
.sl-card .body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.sl-card h5{ font-size:14px; font-weight:700; color: var(--sl-ink); margin:0; line-height:1.35; }
.sl-card .price{ font-family:'JetBrains Mono', monospace; color: var(--sl-accent); font-weight:700; font-size:16px; }
.sl-card .price .old{ color: var(--sl-ink-soft); text-decoration:line-through; font-weight:400; font-size:12px; margin-left:6px; }
.sl-card .sl-add-btn{
  margin-top:auto; background: transparent; color: var(--sl-accent); border:1px solid var(--sl-accent); border-radius:100px;
  padding:8px 0; font-weight:700; font-size:12px; letter-spacing:.03em; text-transform:uppercase; text-decoration:none; text-align:center; display:block; width:100%; cursor:pointer;
}
.sl-card .sl-add-btn:hover{ background: var(--sl-accent); color:#1a1200; }
.sl-card .sl-add-btn.out{ border-color: var(--sl-line); color: var(--sl-ink-soft); pointer-events:none; }

/* ---------- filter sidebar ---------- */
.sl-filter{ background: var(--sl-surface); border:1px solid var(--sl-line); border-radius: var(--sl-radius); padding:22px; }
.sl-filter-title{ font-weight:700; color: var(--sl-ink); margin-bottom:16px; font-size:16px; }
.sl-filter-label{ font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--sl-ink-soft); display:block; margin-bottom:10px; }
.sl-btn-accent{ background: var(--sl-accent); color:#1a1200; border:none; padding:10px 0; border-radius:100px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; font-size:12px; text-decoration:none; display:block; text-align:center; width:100%; cursor:pointer; }
.sl-btn-accent:hover{ background:#fff; color:#1a1200; }
.sl-breadcrumb{ font-size:13px; color: var(--sl-ink-soft); }
.sl-breadcrumb a{ color: var(--sl-ink-soft); text-decoration:none; }
.sl-breadcrumb a:hover{ color: var(--sl-accent); }
.sl-breadcrumb b{ color: var(--sl-ink); }

/* ---------- product detail ---------- */
.sl-main-shot{ aspect-ratio:1/1; background: var(--sl-surface); border:1px solid var(--sl-line); border-radius: var(--sl-radius); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sl-main-shot img{ max-width:85%; max-height:85%; object-fit:contain; cursor:zoom-in; }
.sl-pdp-thumb{ width:64px; height:64px; border-radius:6px; border:1px solid var(--sl-line); object-fit:contain; padding:6px; background: var(--sl-surface); cursor:pointer; transition:border-color .15s ease; }
.sl-pdp-thumb:hover{ border-color: var(--sl-accent); }
.sl-pdp-thumb.active{ border-color: var(--sl-accent); border-width:2px; box-shadow:0 0 0 1px var(--sl-accent); }
.sl-variant-pill{ border:1px solid var(--sl-line); background: var(--sl-surface); color: var(--sl-ink); border-radius:100px; padding:.45rem 1rem; font-weight:600; font-size:.85rem; }
.sl-variant-pill:hover{ border-color: var(--sl-accent); color: var(--sl-accent); }
.sl-variant-pill.active{ background: var(--sl-accent); border-color: var(--sl-accent); color:#1a1200; }

/* ---------- cart / summary ---------- */
.sl-cart-row{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--sl-line); align-items:center; }
.sl-cart-row img{ width:80px; height:80px; object-fit:cover; border-radius:10px; background: var(--sl-surface-2); }
.sl-summary{ background: var(--sl-surface); border:1px solid var(--sl-line); border-radius: var(--sl-radius); padding:24px; }
.sl-summary h5{ font-weight:700; color: var(--sl-ink); margin-bottom:16px; }

/* ---------- brand row ---------- */
.sl-brand-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.sl-brand-chip{ background: var(--sl-surface); border:1px solid var(--sl-line); border-radius:12px; padding:14px 22px; display:flex; align-items:center; justify-content:center; min-width:120px; }
.sl-brand-chip img{ max-height:32px; width:auto; object-fit:contain; }
.sl-brand-chip span{ font-weight:700; font-size:13px; color: var(--sl-ink-soft); }

/* ---------- testimonials ---------- */
.sl-testi-track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; }
.sl-testi-card{ flex:0 0 320px; scroll-snap-align:start; background: var(--sl-bg); border:1px solid var(--sl-line); border-radius: var(--sl-radius); padding:22px; }
.sl-stars{ display:flex; gap:2px; margin-bottom:12px; color: var(--sl-accent); font-size:12px; }
.sl-testi-quote{ font-size:13.5px; line-height:1.65; margin:0 0 16px; color: var(--sl-ink); }
.sl-testi-who{ display:flex; align-items:center; gap:10px; }
.sl-avatar{ width:34px; height:34px; border-radius:50%; background: var(--sl-accent-dim); color: var(--sl-accent); display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:700; font-size:12px; object-fit:cover; }
.sl-testi-who .name{ font-weight:600; font-size:13px; color: var(--sl-ink); }
.sl-testi-who .role{ font-size:11px; color: var(--sl-ink-soft); }

/* ---------- footer ---------- */
.sl-footer{ background: var(--sl-surface); border-top:1px solid var(--sl-line); color: var(--sl-ink-soft); padding:56px 0 0; margin-top:60px; transition: background .5s ease, border-color .5s ease; }
.sl-footer .sl-brand{ color: var(--sl-ink); }
.sl-footer h3{ color: var(--sl-ink); font-size:14px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:18px; }
.sl-footer ul{ list-style:none; margin:0; padding:0; }
.sl-footer li{ margin-bottom:10px; font-size:13.5px; }
.sl-footer a{ color: var(--sl-ink-soft); text-decoration:none; }
.sl-footer a:hover{ color: var(--sl-accent); }
.sl-footer-bottom{ border-top:1px solid var(--sl-line); margin-top:34px; padding:18px 0; text-align:center; font-size:12.5px; color: var(--sl-ink-soft); }

/* ---------- blog ---------- */
.sl-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:899.98px){ .sl-blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:599.98px){ .sl-blog-grid{ grid-template-columns:1fr; } }
.sl-blog-card{ background: var(--sl-surface); border:1px solid var(--sl-line); border-radius: var(--sl-radius); overflow:hidden; transition: all .2s ease; display:flex; flex-direction:column; height:100%; }
.sl-blog-card:hover{ border-color: var(--sl-accent); box-shadow:0 16px 34px rgba(255,180,84,.1); transform: translateY(-3px); }
.sl-blog-card-shot{ display:block; aspect-ratio:16/10; background: var(--sl-surface-2); overflow:hidden; }
.sl-blog-card-shot img{ width:100%; height:100%; object-fit:cover; }
.sl-blog-card-shot i{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:32px; color: var(--sl-ink-soft); }
.sl-blog-card-body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.sl-blog-card-body h3{ font-size:17px; font-weight:700; color: var(--sl-ink); margin:0; line-height:1.35; font-family:'Sora',sans-serif; }
.sl-blog-meta{ display:flex; flex-wrap:wrap; gap:14px; font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--sl-ink-soft); }
.sl-blog-meta span{ display:inline-flex; align-items:center; gap:5px; }
.sl-blog-excerpt{ color: var(--sl-ink-soft); font-size:13.5px; line-height:1.65; margin:0; flex:1; }
.sl-blog-readmore{ align-self:flex-start; border:1px solid var(--sl-accent); color: var(--sl-accent); border-radius:100px; padding:8px 20px; font-weight:700; font-size:12px; letter-spacing:.02em; text-decoration:none; transition: all .15s ease; }
.sl-blog-readmore:hover{ background: var(--sl-accent); color:#1a1200; }

.sl-blog-post h1{ font-size:clamp(24px,3.4vw,36px); color: var(--sl-ink); margin-bottom:14px; }
.sl-blog-post-hero{ aspect-ratio:16/8; border-radius: var(--sl-radius); overflow:hidden; background: var(--sl-surface-2); margin-bottom:24px; }
.sl-blog-post-hero img{ width:100%; height:100%; object-fit:cover; }
.sl-blog-body{ color: var(--sl-ink); font-size:15.5px; line-height:1.85; }

/* ---------- shared storefront components (mobile offcanvas/bottom-nav) —
   force the same fixed amber accent so they don't pick up a leftover admin
   primary_color from a different template ---------- */
.btn-brand{ background: var(--sl-accent) !important; color:#1a1200 !important; box-shadow:none !important; }
.btn-brand:hover{ background:#fff !important; color:#1a1200 !important; }
.text-brand{ color: var(--sl-accent) !important; }
.sf-bottom-nav a.active{ color: var(--sl-accent) !important; }

/* Dark (night) is the default look here, but — unlike Neon — Solaris's whole
   identity is the dusk/dawn switch, so the shared theme toggle is wired to a
   visible day palette above rather than mostly no-op'd. */