/* ===========================
   Base.css – Ivory & Gold (light)
   =========================== */

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}

/* --- Design tokens --- */
:root{
  /* Färger */
  --bg:#FAF9F7;           /* Ivory bakgrund */
  --surface:#FFFFFF;      /* Kort/yta */
  --text:#2A2A2A;         /* Brödtext */
  --muted:#6E6E6E;        /* Sekundär text */
  --brand:#C6A664;        /* Guld */
  --brand-strong:#B49454; /* Mörkare guld för hover */
  --border:rgba(0,0,0,.06);
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --ring:0 0 0 3px rgba(198,166,100,.30);

  /* Layout */
  --radius:14px;
  --space-1:.5rem; --space-2:.75rem; --space-3:1rem;
  --space-4:1.5rem; --space-6:2rem;
  --maxw:1120px;
}

/* --- Utilities --- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--space-3)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* --- Skelettlayout --- */
.site{display:grid;min-height:100dvh;grid-template-rows:auto 1fr auto}

/* ===========================
   Header (sticky) + Navigation
   =========================== */
.site-header{
  position:sticky; top:0; z-index:20;
  background:#fff;
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.header__row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0}

.brand{display:flex;align-items:center;gap:.6rem}
.brand__logo{height:34px;width:auto}
.brand__name{font-weight:700;color:var(--text)}

.nav{display:flex;align-items:center;gap:var(--space-4);margin-left:auto}
.nav__list{display:flex;gap:var(--space-2)}
.nav__link{
  display:inline-block;
  padding:.55rem .9rem; border-radius:999px; color:var(--text);
}
.nav__link:hover{background:rgba(0,0,0,.04)}
.nav__link--active{background:rgba(198,166,100,.14)}

/* Språkknapp (fungerar både som <a> och <button>) */
.lang-switch{
  --h: 36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--h);
  padding:0 .9rem;
  border-radius:999px;

  background: var(--text);
  color:#fff;
  font-weight:600;

  /* nolla knappens standardstil */
  border:0;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
  font:inherit;
  line-height:1;
  cursor:pointer;

  transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
}
.lang-switch:hover{ filter:brightness(0.96); }
.lang-switch:active{ transform:translateY(0); } /* hindra "intryckt" skugga i Safari */
.lang-switch:focus-visible{ outline:none; box-shadow: var(--ring); }


.nav-toggle{
  display:none; margin-left:auto;
  background:transparent; border:0; font-size:1.5rem; color:var(--text);
}

/* --- Mobilmeny --- */
@media (max-width:880px){
  .nav-toggle{display:inline-grid;place-items:center}
  .nav{
    position:fixed; inset:64px var(--space-3) auto var(--space-3);
    display:grid; gap:var(--space-3);
    padding:var(--space-3); border-radius:var(--radius);
    background:#fff; border:1px solid var(--border);
    transform:translateY(-20px); opacity:0; pointer-events:none; transition:.2s;
  }
  .nav[aria-expanded="true"]{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav__list{display:grid}
  .lang-switch{justify-self:start}
}

/* ===========================
   Buttons
   =========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.1rem; border-radius:calc(var(--radius) - 4px);
  border:1px solid rgba(0,0,0,.10);
  background:#ffffff66; color:var(--text); font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn--primary{
  background:linear-gradient(180deg,var(--brand),var(--brand-strong));
  border-color:transparent; color:#fff;
}
.btn--ghost{background:transparent}

/* ===========================
   Footer
   =========================== */
.site-footer{
  background:#fff;
  border-top:1px solid var(--border);
}
.footer__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); padding:var(--space-3) 0;
}
.footer__copy{color:var(--muted); margin:0}
.footer__links{display:flex; gap:var(--space-3)}
.footer__links a{color:var(--muted)}
.footer__links a:hover{color:var(--text)}

/* ===========================
   Links & text tweaks
   =========================== */
a:focus-visible{outline:none; box-shadow:var(--ring); border-radius:8px}
h1,h2,h3{color:var(--text); line-height:1.2; margin:.2em 0}
p{margin:.6em 0; color:var(--text)}
small,.muted{color:var(--muted)}

/* Ikoner i listan */
html[data-page="kontakt"] .contact-list--icons .material-icons{
  font-size: 1.05rem;
  vertical-align: -2px;
  margin-right: .35rem;
  opacity: .8;
}

/* CTA-rad under kontaktinformationen */
html[data-page="kontakt"] .contact-cta{
  display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem;
}
html[data-page="kontakt"] .contact-cta .btn{
  display:inline-flex; align-items:center; gap:.45rem;
}

/* Champagne-variant som matchar era bord */
html[data-page="kontakt"] :root{
  --champagne: #DEC9A3;        /* bas */
  --champagne-d: #CCB280;      /* mörkare */
  --champagne-b: #F3E7CB;      /* highlight */
  --champagne-border: #B7965E;
  --champagne-text: #1f1405;
}
html[data-page="kontakt"] .btn--champagne{
  background: linear-gradient(180deg, var(--champagne-b), var(--champagne-d));
  color: var(--champagne-text);
  border: 1px solid var(--champagne-border);
  box-shadow: 0 6px 14px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.25);
}
html[data-page="kontakt"] .btn--champagne:hover{ filter: brightness(1.04); }
html[data-page="kontakt"] .btn--champagne:active{
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.16) inset;
}
html[data-page="kontakt"] .btn--champagne:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--champagne) 60%, transparent);
  outline-offset: 2px;
}
/* Ta bort pilarna i Chrome/Safari/Edge/Opera */
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Ta bort pilarna i Firefox (och ge ett neutralt utseende) */
.qty__input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}


/* === Produktsida (scopad) === */
:is(html,body)[data-page="produkter"] .page-header{
  padding: var(--space-6) 0 var(--space-4);
  text-align: center;
}
:is(html,body)[data-page="produkter"] .page-header h1{ margin: 0 0 .4rem; }
:is(html,body)[data-page="produkter"] .page-header p{
  color: var(--muted);
  max-width: 60ch;
  margin: 0 auto;
}

/* Layout/grids */
:is(html,body)[data-page="produkter"] .grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--space-3);
}
:is(html,body)[data-page="produkter"] .col-main{ grid-column: span 8; }
:is(html,body)[data-page="produkter"] .col-aside{
  grid-column: span 4; position: sticky; top: 90px; height: fit-content;
}
@media (max-width:980px){
  :is(html,body)[data-page="produkter"] .col-main,
  :is(html,body)[data-page="produkter"] .col-aside{ grid-column:1 / -1; position: static; }
}

:is(html,body)[data-page="produkter"] .products{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--space-3); align-items:stretch;
}
@media (max-width:880px){
  :is(html,body)[data-page="produkter"] .products{ grid-template-columns:1fr; }
}

/* Korten */
:is(html,body)[data-page="produkter"] .product{
  padding: var(--space-4); display:grid; gap:var(--space-3); overflow:hidden;
}
:is(html,body)[data-page="produkter"] .product__head{
  display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .75rem;
}
:is(html,body)[data-page="produkter"] .product__title{
  flex:1 1 auto; min-width:0; font-size:1.25rem; margin:0;
}
:is(html,body)[data-page="produkter"] .product__badge{
  flex:0 0 auto; padding:.25rem .6rem; border-radius:999px;
  background: rgba(198,166,100,.14); color: var(--brand-strong);
  font-weight:700; font-size:.8rem;
}
/* Pris på egen rad under titeln */
:is(html,body)[data-page="produkter"] .product__price{
  order:2; flex:1 0 100%; margin:.25rem 0 0;
  white-space:nowrap; font-weight:800; letter-spacing:.2px; margin-left:0; text-align:left;
}

:is(html,body)[data-page="produkter"] .product__desc{ color:var(--muted); margin:0; }
:is(html,body)[data-page="produkter"] .product ul{ display:grid; gap:.35rem; }
:is(html,body)[data-page="produkter"] .product li::marker{ color:var(--brand); }
:is(html,body)[data-page="produkter"] .is-exclusive{
  border:1px solid color-mix(in srgb, var(--brand) 44%, transparent);
  box-shadow:0 14px 30px rgba(198,166,100,.15);
}

/* Paketväljare */
:is(html,body)[data-page="produkter"] .pkg-select{ display:flex; align-items:center; gap:.6rem; }
:is(html,body)[data-page="produkter"] .pkg-check{
  width:22px; height:22px; cursor:pointer; appearance:none;
  border:2px solid var(--border-strong, rgba(0,0,0,.2));
  border-radius:6px; display:inline-grid; place-items:center; background:#fff;
  transition: box-shadow .15s, border-color .15s, background .15s;
}
:is(html,body)[data-page="produkter"] .pkg-check::after{
  content:""; width:12px; height:12px; border-radius:3px; background:transparent;
  transform:scale(.6); transition: transform .15s, background .15s;
}
:is(html,body)[data-page="produkter"] .pkg-check:checked{
  border-color: var(--brand, #c6a664); box-shadow:0 0 0 3px rgba(198,166,100,.18);
}
:is(html,body)[data-page="produkter"] .pkg-check:checked::after{ background: var(--brand, #c6a664); transform:scale(1); }

/* Gäster */
:is(html,body)[data-page="produkter"] .qty{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem;
  margin-top:auto; /* tryck ned knappen så korten linjerar */
}
:is(html,body)[data-page="produkter"] .qty.is-disabled{ opacity:.5; pointer-events:none; }
:is(html,body)[data-page="produkter"] .qty__btn{
  width:40px; height:40px; border-radius:10px; background:#fff;
  border:1px solid rgba(0,0,0,.12); font-weight:800; line-height:1; cursor:pointer;
}
:is(html,body)[data-page="produkter"] .qty__input{
  width:100%; min-width:70px; padding:.6rem .7rem; border-radius:10px;
  border:1px solid rgba(0,0,0,.15); background:#fff; text-align:center; font-weight:700;
}
:is(html,body)[data-page="produkter"] .qty__input:focus-visible{ outline:none; box-shadow: var(--ring); }
:is(html,body)[data-page="produkter"] .qty__input::-webkit-outer-spin-button,
:is(html,body)[data-page="produkter"] .qty__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
:is(html,body)[data-page="produkter"] .qty__input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }

/* CTA storlek */
:is(html,body)[data-page="produkter"] .product .btn{
  width:100%; min-height:56px; display:inline-flex; align-items:center; justify-content:center;
}

/* Sammanställning */
:is(html,body)[data-page="produkter"] .summary{
  padding:var(--space-4); display:grid; gap:var(--space-3);
}
:is(html,body)[data-page="produkter"] .summary h2{ margin:0; }
:is(html,body)[data-page="produkter"] .summary__row{ display:flex; justify-content:space-between; gap:.8rem; }
:is(html,body)[data-page="produkter"] .summary__items{ display:grid; gap:.5rem; }
:is(html,body)[data-page="produkter"] .summary__item{ display:flex; justify-content:space-between; gap:.8rem; color:var(--muted); }
:is(html,body)[data-page="produkter"] .summary__total{ font-weight:800; font-size:1.1rem; }
:is(html,body)[data-page="produkter"] .divider{ height:1px; background:var(--border); margin:.25rem 0; }