/*
Theme Name: Livhusarshop Rekyl Pro
Theme URI: https://livhusarshop.se
Author: ChatGPT
Description: Rekyl-inspirerad butik i Livhusarshops färger. Ticker högst upp (klickbar), parallax-bakgrund, proffsig dropdown-meny, kategori-knappar i guld, 9 utvalda produkter (bild+rubrik+pris) som roterar var 15:e minut, samt Event-undersida med Kommande/Genomförda.
Version: 1.6.0
License: GPL-2.0+
Text Domain: lhs-rekyl-pro
*/

:root{
  --lhs-bg: #0e1a2b;
  --lhs-deep:#0b1522;
  --lhs-gold: #c9a227;
  --lhs-text: #f3f4f6;
  --lhs-dark: #111111;
  --lhs-muted:#e5e7eb;
  --lhs-linkblue:#103a6f; /* rubrik + pris */
  --lhs-hero: linear-gradient(180deg, rgba(3,7,18,.65), rgba(3,7,18,.65));
  --lhs-page-bg: radial-gradient(90% 60% at 50% 20%, #0c1a2d 0%, #07101b 60%, #040a12 100%);
}

/* === Bas === */
html{ box-sizing:border-box; }
*,*:before,*:after{ box-sizing:inherit; }
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  margin:0; color:#111;
  background: var(--lhs-page-bg), var(--lhs-page-img, none);
  background-attachment: fixed, fixed;
  background-size: cover, cover;
  background-position: center;
}
.lhs-container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* === Ticker högst upp (klickbar) === */
.lhs-ann{ background: rgba(10,19,33,var(--lhs-header-a)); color:var(--lhs-text); }
.lhs-ticker{ display:flex; overflow:hidden; white-space:nowrap; }
.lhs-ticker a, .lhs-ticker span{ display:inline-block; padding:10px 24px; color:var(--lhs-text); text-decoration:none; }
.lhs-ticker a:hover{ color: var(--lhs-gold); text-decoration: underline; }
.lhs-ticker .roll{ display:inline-block; animation: lhs-marquee 22s linear infinite; }
@keyframes lhs-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* === Header === */
.lhs-header{ background: rgba(14,26,43,var(--lhs-header-a)); color: var(--lhs-text); position: sticky; top:0; z-index:1000; }
.lhs-header a{ color: var(--lhs-text); text-decoration:none; }
.lhs-header a:hover{ color: var(--lhs-gold); }
.lhs-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.lhs-brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.4px; }
.lhs-brand img{ display:block; height:36px; width:auto; }
.lhs-tools{ display:flex; gap:14px; align-items:center; }
.lhs-badge{ display:inline-block; min-width:20px; height:20px; border-radius:10px; padding:0 6px; line-height:20px; text-align:center; font-size:12px; background: var(--lhs-gold); color:#201a00; }

/* Proffsig huvudmeny med dropdown */
.lhs-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:18px; align-items:center; }
.lhs-nav li{ position:relative; }
.lhs-nav > ul > li > a{ padding:6px 8px; border-radius:6px; display:inline-block; }
.lhs-nav > ul > li > a:hover{ color: var(--lhs-gold); }
.lhs-nav li ul{
  list-style:none; margin:0; padding:8px; display:none;
  position:absolute; left:0; top:calc(100% + 8px);
  background:#0b1522; color:var(--lhs-text);
  border:1px solid rgba(255,255,255,.08); border-radius:10px; min-width:220px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.lhs-nav li:hover > ul{ display:block; }
.lhs-nav li ul li a{ display:block; padding:8px 10px; border-radius:6px; }
.lhs-nav li ul li a:hover{ background:rgba(255,255,255,.06); color:var(--lhs-gold); }

/* === Hero === */
.lhs-hero{ position: relative; color: var(--lhs-text); background: linear-gradient(180deg, rgba(3,7,18,var(--lhs-hero-a)), rgba(3,7,18,var(--lhs-hero-a))); padding: 56px 0 36px; }
.lhs-hero h1{ margin:0 0 10px; font-size: clamp(26px, 3.2vw, 44px); }
.lhs-hero p{ margin:0; opacity:.92 }
.lhs-hero .cta{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-block; padding:.7rem 1.1rem; border-radius:12px; font-weight:700; text-decoration:none; }
.btn-gold{ background:var(--lhs-gold); color:#201a00; }
.btn-ghost{ border:1px solid var(--lhs-gold); color:var(--lhs-gold); }

/* Säljpunkter */
.lhs-sell{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:14px; margin-top:20px; }
.lhs-sell .card{ background: rgba(3,7,18,.55); color:var(--lhs-text); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:12px 14px; }

/* === Paneler === */
section.panel{ margin: 28px 0; }
.panel .inner{
  background: rgba(11,21,34,var(--lhs-panel-a)); color: var(--lhs-text);
  border:1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
section h2{ margin:0 0 12px; color: var(--lhs-text); font-size: clamp(20px, 2.5vw, 30px); }

/* === Kategori-knappar i guld === */
.lhs-cat-buttons{ display:flex; flex-wrap:wrap; gap:.6rem; }
.lhs-cat-btn{ display:inline-block; padding:.6rem .9rem; border:1px solid var(--lhs-gold); color: var(--lhs-gold); border-radius:999px; background:transparent; text-decoration:none; font-weight:600; }
.lhs-cat-btn:hover{ background: var(--lhs-gold); color:#201a00; }

/* === Produktgrid === */
.lhs-grid-wrap{ width:65%; margin:0 auto; }
@media(max-width: 980px){ .lhs-grid-wrap{ width:90%; } }
@media(max-width: 640px){ .lhs-grid-wrap{ width:100%; } }

.lhs-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px){ .lhs-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .lhs-grid{ grid-template-columns: 1fr;} }

.lhs-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--lhs-muted); border-radius:12px; overflow:hidden; }
.lhs-card a{ color: inherit; text-decoration:none; }
.lhs-imgwrap{ position:relative; width:100%; }
.lhs-imgwrap::before{ content:""; display:block; padding-top:100%; } /* 1:1 */
.lhs-imgwrap > *{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lhs-card-body{ padding:12px; display:flex; flex-direction:column; gap:6px; }
.lhs-title{
  font-weight:800; line-height:1.3; color: var(--lhs-linkblue);
  display:block !important;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box; overflow:hidden;
  min-height: calc(1.3em * 2);
}
.lhs-price{ margin-top:auto; font-weight:800; color: var(--lhs-linkblue); }

/* === Event-listor === */
.lhs-events{ display:grid; gap:12px; }
.lhs-event{ background:#fff; border:1px solid var(--lhs-muted); border-radius:12px; padding:12px 14px; }
.lhs-event h3{ margin:0 0 4px; font-size:1.1rem; color:#0f172a; }
.lhs-event .meta{ color:#334155; }
.lhs-stack{ display:grid; gap:20px; }

/* === Footer === */
.lhs-footer{ background:#0a1321; color: var(--lhs-text); padding:24px 0; margin-top:32px; }
.lhs-footer a{ color: var(--lhs-text); }
.lhs-footer a:hover{ color: var(--lhs-gold); }


/* === v1.5.3 hotfixes === */
/* 1) Tvinga rubriken på produktkort att synas tydligt över priset */
.lhs-card .lhs-title,
.lhs-card .lhs-title:link,
.lhs-card .lhs-title:visited{
  color: var(--lhs-linkblue) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Fångar ev. WooCommerce-stilar som vinner på specifitet */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  color: var(--lhs-linkblue) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* 2) Dropdown: eliminera "gap" mellan toppnivå och undermeny */
.lhs-nav li ul{
  top: 100% !important;           /* låg exakt kant i kant */
  margin-top: 0 !important;
  padding-top: 8px;               /* visuell luft utan hover-gap */
  z-index: 1002;                  /* säkerställ överlägg */
}
.lhs-nav li:hover > ul,
.lhs-nav li:focus-within > ul{
  display: block;
}