/* =========================================================
   TANT BERGS BLOMAFFÄR — designsystem
   Palett hämtad ur loggan (mossgrönt + guld), kompletterad
   med krita/kraft-toner och en dammig rost från torkade blommor.
   Signaturelement: en "växtetikett" (kraftpapper + snöre) som
   återanvänds för öppningsbadge, galleri-bildtexter och länkar –
   som om varje sektion vore en märkt planta i en handelsträdgård.
   ========================================================= */

/* v9.2.5: självhostade typsnitt (tidigare Google Fonts). Variabla typsnitt, delmängden "latin" (svenska tecken ingår),
   hämtade från Google Fonts som woff2. En fil per familj täcker alla vikter. Filerna i /fonts/ cachas i ett år
   (se .htaccess) — byt filnamn om en fil någon gång byts ut. Fraunces har även en optisk-storleksaxel (opsz) som
   webbläsaren styr automatiskt (font-optical-sizing: auto), precis som tidigare. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/fraunces-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/work-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500 600;font-display:swap;src:url("../fonts/caveat-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --moss-900:#262b20;
  --moss-700:#3a4033;
  --moss-600:#4b5340;
  --sage:#626961;
  --gold:#d9a83c;
  --gold-light:#f0c968;
  --cream:#f8f3e7;
  --stone:#efe6d2;
  --stone-line:#e0d3b3;
  --rust:#93523a;
  --ink:#262a21;

  --font-display:"Fraunces", ui-serif, Georgia, serif;
  --font-body:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-hand:"Caveat", cursive;

  --wrap:1180px;
  --radius:4px;
  --shadow-soft:0 14px 34px -18px rgba(38,42,32,.35);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;scrollbar-gutter:stable;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
  max-width:100%;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0 0 .5em;letter-spacing:-.01em;color:var(--moss-900);}
p{margin:0 0 1em;}
.container{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}

/* subtle grain so flat colour blocks don't look too digital */
.grain{position:relative;}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------- buttons -------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  padding:.85em 1.5em;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  line-height:1;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold);color:var(--moss-900);}
.btn-gold:hover{background:var(--gold-light);}
.btn-outline{background:transparent;border-color:currentColor;color:inherit;}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-line{background:transparent;border-color:var(--moss-700);color:var(--moss-700);}
.btn-line:hover{background:var(--moss-700);color:var(--cream);}
.btn-sm{padding:.6em 1.1em;font-size:.85rem;}

/* -------------------- signature: tag/etikett -------------------- */
.tag{
  --tag-bg:var(--stone);
  position:relative;
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--tag-bg);
  color:var(--moss-900);
  padding:.5em 1.1em .5em 1.6em;
  font-family:var(--font-hand);
  font-size:1.25rem;
  line-height:1;
  border:1px solid var(--stone-line);
  clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%);
  box-shadow:var(--shadow-soft);
}
.tag::before{
  content:"";position:absolute;left:9px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--cream);
  box-shadow:0 0 0 1px var(--stone-line);
}
.tag--on-dark{--tag-bg:var(--cream);}
.tag--gold{--tag-bg:var(--gold-light);}

/* -------------------- header -------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(248,243,231,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--stone-line);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:12px;padding-bottom:12px;
}
.brand{display:flex;align-items:center;gap:.7em;text-decoration:none;color:var(--moss-900);}
.brand img{height:48px;width:48px;border-radius:50%;}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1.1;}
.brand-name small{display:block;font-family:var(--font-body);font-weight:400;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);}

.main-nav > ul{list-style:none;display:flex;gap:2em;margin:0;padding:0;}
.main-nav a{text-decoration:none;font-weight:600;font-size:.92rem;color:var(--moss-700);position:relative;padding:.2em 0;}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--gold);transition:width .25s ease;}
.main-nav a:hover::after,.main-nav a:focus-visible::after{width:100%;}

@media (min-width:861px){
  .site-header .container{justify-content:flex-start;}
  .main-nav{margin-left:auto;}
  /* v8.9.11: "Webbutik" och "Blomsterverk" är <button>-element med
     vertikal padding (.2em) i en inline-flex-ruta, medan övriga
     menyval är vanliga länkar (vertikal padding på inline-element
     påverkar inte radhöjden). Knapparnas text hamnade därför ett par
     pixlar lägre än de andra menyvalen. En tidigare pixel-justering
     (margin/transform) blev fel vid annan webbläsarzoom (t.ex. 90 %)
     eftersom pixlar avrundas olika. Baslinje-justering i stället:
     varje menypunkts FÖRSTA textrads baslinje läggs på samma linje,
     oberoende av padding, zoomnivå och avrundning. Gäller bara
     desktop-menyn (radlayout) — mobilmenyn är en kolumn. */
  .main-nav > ul{align-items:baseline;}
}

.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--moss-900);margin:5px 0;transition:transform .25s ease, opacity .25s ease;}

@media (max-width:860px){
  .nav-toggle{display:block;}
  .main-nav{
    position:fixed;inset:0 0 auto auto;top:76px;right:0;
    background:var(--cream);border-left:1px solid var(--stone-line);border-bottom:1px solid var(--stone-line);
    width:min(80vw,320px);
    transform:translateX(100%);transition:transform .3s ease;
    padding:24px;height:auto;box-shadow:var(--shadow-soft);
  }
  .main-nav.is-open{transform:translateX(0);}
  .main-nav > ul{flex-direction:column;gap:1.4em;overflow-y:auto;max-height:calc(100vh - 76px - 48px);}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* -------------------- hero -------------------- */
.hero{
  position:relative;color:var(--cream);
  min-height:clamp(480px,72vh,760px);
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:0;}
/* v9.2.4: hero-bilden ligger i <picture> (WebP + JPG-reserv) — picture måste fylla ytan för att img ska kunna göra det. */
.hero-media picture{display:block;width:100%;height:100%;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(38,43,32,.15) 0%, rgba(38,43,32,.35) 45%, rgba(38,43,32,.88) 100%);
}
.hero-content{position:relative;z-index:1;padding-top:40px;padding-bottom:56px;width:100%;}
.hero-content .tag{margin-bottom:1.4em;}
.hero-content h1{
  color:#fff;font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:1.02;
  margin-bottom:.25em;max-width:14ch;
}
.hero-sub{font-size:1.15rem;max-width:46ch;color:var(--stone);margin-bottom:1.6em;}
.ledord{list-style:none;display:flex;flex-wrap:wrap;gap:.6em;padding:0;margin:0 0 2em;}
.ledord li{
  font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  border:1px solid rgba(248,243,231,.45);padding:.5em 1em;border-radius:999px;color:var(--stone);
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1em;}

/* -------------------- beställ blommor CTA (inne i hero) -------------------- */
.hero-order-cta{margin-top:2.6em;padding-top:2em;border-top:1px solid rgba(248,243,231,.25);max-width:46ch;}
.hero-order-cta-title{
  font-family:var(--font-display);font-weight:600;color:#fff;
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  margin-bottom:.35em;
}
.hero-order-cta .hero-sub{margin-bottom:1.4em;}
.hero-order-cta-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:1em;}

/* -------------------- section basics -------------------- */
section{padding:96px 0;}
.section-head{max-width:640px;margin:0 0 2.6em;}
.eyebrow{
  font-family:var(--font-hand);color:var(--rust);font-size:1.3rem;display:inline-block;margin-bottom:.2em;
}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);}
.section-head p{color:var(--moss-600);font-size:1.05rem;}

.divider{display:block;width:100%;height:auto;}

/* -------------------- about -------------------- */
.about{background:var(--cream);}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;}
.about-photo{position:relative;}
.about-photo picture{display:block;}
.about-photo img{border-radius:6px;box-shadow:var(--shadow-soft);}
.about-photo .tag{position:absolute;left:-18px;bottom:-18px;}
.about-copy h2{margin-bottom:.6em;}
.about-copy p{color:var(--moss-900);}
.about-list{list-style:none;margin:1.6em 0 0;padding:0;display:grid;gap:.9em;}
.about-list li{display:flex;gap:.7em;align-items:flex-start;font-weight:600;color:var(--moss-700);}
.about-list li::before{content:"";width:8px;height:8px;margin-top:.5em;border-radius:50%;background:var(--gold);flex:none;}

@media (max-width:860px){
  .about-grid{grid-template-columns:1fr;gap:40px;}
  .about-photo{max-width:420px;margin:0 auto;}
}
@media (max-width:480px){
  .about-photo .tag{left:0;}
}

/* -------------------- gallery -------------------- */
.gallery{background:var(--stone);}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.gallery-item{position:relative;border-radius:6px;overflow:hidden;box-shadow:var(--shadow-soft);}
.gallery-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transition:transform .5s ease;}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item:nth-child(1){grid-row:span 2;}
.gallery-item:nth-child(1) img{aspect-ratio:auto;height:100%;}
.gallery-cap{
  position:absolute;left:12px;bottom:12px;
}

@media (max-width:960px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-item:nth-child(1){grid-row:span 1;}
  .gallery-item:nth-child(1) img{aspect-ratio:3/4;}
}
@media (max-width:520px){
  .gallery-grid{grid-template-columns:1fr;}
}

.flower-tile-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.flower-tile{display:flex;flex-direction:column;align-items:stretch;gap:12px;text-decoration:none;color:inherit;}
.flower-tile-img{display:block;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-soft);}
.flower-tile-img img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .5s ease;}
.flower-tile:hover .flower-tile-img img{transform:scale(1.06);}
.flower-tile-btn{width:100%;text-align:center;justify-content:center;color:var(--moss-900);border-color:var(--moss-900);}
.flower-tile:hover .flower-tile-btn{background:var(--moss-900);color:#fff;}
@media (max-width:960px){.flower-tile-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.flower-tile-grid{grid-template-columns:repeat(2,1fr);}}

/* -------------------- flower detail page -------------------- */
.flower-detail{padding:56px 0 96px;}
.flower-detail-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start;margin-top:1.6em;}
.flower-detail-photo img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-soft);object-fit:cover;aspect-ratio:4/5;}
.flower-detail-copy h1{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:.4em;}
.flower-detail-copy p{color:var(--moss-700);font-size:1.05rem;margin-bottom:1em;}
@media (max-width:800px){.flower-detail-grid{grid-template-columns:1fr;}}

/* -------------------- instagram -------------------- */
.instagram{background:var(--moss-700);color:var(--cream);position:relative;overflow:hidden;}
.instagram .section-head p{color:var(--stone);}
.instagram .eyebrow{color:var(--gold-light);}
.instagram .section-head h2{color:#fff;}
.insta-head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;margin-top:.2em;}
.insta-head-row h2{margin:0;}
.insta-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:2.6em;
  align-items:start; /* v9.2.7: rutorna har olika höjd (bildens egen proportion) — de ska inte sträckas till samma */
}
.insta-item{margin:0;min-width:0;}
.insta-card{
  position:relative;display:block;border-radius:6px;overflow:hidden;
}
/* v9.2.7: rutan följer bildens proportion. Reserv (originalets URL, okända mått): kvadrat med beskärning som förut. */
.insta-card--square{aspect-ratio:1/1;}
/* v9.0.9: bildtext under bilden. v9.1.2: antalet rader (resten kapas med …) sätts inline från Inställningar → Instagram → Antal rader. */
.insta-caption{
  margin:.75em 0 0;font-size:.9rem;line-height:1.45;color:var(--stone);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
}
.insta-card img{width:100%;height:auto;transition:transform .4s ease;}
.insta-card--square img{height:100%;object-fit:cover;}
.insta-card:hover img{transform:scale(1.08);}
/* v9.1.4: rörlig reel ligger ovanpå stillbilden och tonas in först när den faktiskt spelar (annars syns stillbilden). */
.insta-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease,transform .4s ease;pointer-events:none;}
.insta-video.is-playing{opacity:1;}
.insta-card:hover .insta-video{transform:scale(1.08);}
/* v9.2.0: spela-knapp när besökaren valt "minska rörelse" (reelen startar då inte av sig själv). */
.insta-play{position:absolute;right:10px;bottom:10px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;}
.insta-play:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.insta-card::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%, rgba(38,43,32,.75));
  opacity:0;transition:opacity .25s ease;
}
.insta-card:hover::after{opacity:1;}
.insta-icon{
  position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;
  background:rgba(38,43,32,.55);display:flex;align-items:center;justify-content:center;
}
.insta-icon svg{width:16px;height:16px;fill:#fff;}
/* v9.1.1: märke uppe till vänster på reels ("Reel") och händelser ("Händelse"). */
.insta-badge{
  position:absolute;left:10px;top:10px;z-index:1;display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:999px;background:rgba(38,43,32,.7);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1;
}
.insta-badge svg{width:11px;height:11px;fill:currentColor;margin-left:-2px;}
.insta-badge-story{background:var(--gold);color:var(--moss-700);}
/* v9.2.7: inlägg med flera bilder — bilderna ligger bredvid varandra i ett spår som glider i sidled (js/main.js).
   Rutan får förstabildens proportion (aspect-ratio sätts inline från bildens mått); övriga bilder fyller den. */
.insta-media{position:relative;}
.insta-card--carousel{background:var(--moss-800,#262b20);}
.insta-track{display:flex;width:100%;height:100%;transition:transform .45s ease;will-change:transform;}
.insta-slide{flex:0 0 100%;min-width:0;height:100%;overflow:hidden;display:block;}
.insta-card--carousel .insta-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.insta-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:34px;height:34px;padding:0;border:0;border-radius:50%;
  background:rgba(38,43,32,.6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transition:opacity .2s ease,background .2s ease;
}
.insta-nav svg{width:18px;height:18px;fill:currentColor;}
.insta-nav-prev{left:8px;}
.insta-nav-next{right:8px;}
.insta-nav:hover{background:rgba(38,43,32,.85);}
.insta-nav:focus-visible,.insta-dot:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.insta-media:hover .insta-nav,.insta-media:focus-within .insta-nav{opacity:1;}
@media (hover:none){ .insta-nav{opacity:.85;} } /* pek-skärmar har ingen hover — pilarna syns alltid */
.insta-dots{position:absolute;left:0;right:0;bottom:10px;z-index:4;display:flex;justify-content:center;gap:6px;pointer-events:none;}
.insta-dot{
  pointer-events:auto;width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;
  box-shadow:0 0 0 1px rgba(38,43,32,.25);transition:background .2s ease,transform .2s ease;
}
.insta-dot.is-active{background:#fff;transform:scale(1.25);}
@media (prefers-reduced-motion:reduce){ .insta-track{transition:none;} }
@media (max-width:860px){ .insta-grid{grid-template-columns:repeat(2,1fr);} }

/* -------------------- visit / map -------------------- */
.visit{background:var(--stone);}
.visit-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;}
.visit-card{
  background:var(--cream);border-radius:8px;padding:36px;box-shadow:var(--shadow-soft);
}
.visit-card h3{font-size:1.4rem;margin-bottom:.7em;}
.visit-row{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--stone-line);align-items:flex-start;}
.visit-row:first-of-type{border-top:none;padding-top:0;}
.visit-row svg{flex:none;width:22px;height:22px;margin-top:3px;color:var(--rust);}
.visit-row>div{flex:1;min-width:0;}
.visit-row strong{display:block;color:var(--moss-900);}
.nav-buttons{display:flex;flex-wrap:wrap;gap:.7em;margin-top:1.6em;}
.map-wrap{position:relative;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-soft);}
.map-wrap iframe{width:100%;height:100%;min-height:420px;border:0;display:block;}
.map-wrap .tag{position:absolute;top:16px;left:16px;}

@media (max-width:960px){
  .visit-grid{grid-template-columns:1fr;}
}

/* -------------------- contact -------------------- */
.contact{background:var(--moss-900);color:var(--cream);}
.contact .eyebrow{color:var(--gold-light);}
.contact .section-head h2{color:#fff;}
.contact .section-head p{color:rgba(255,255,255,.82);}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.contact-card{
  background:var(--moss-700);border-radius:8px;padding:30px;
}
.contact-card h3{color:#fff;font-size:1.15rem;display:flex;align-items:center;gap:.6em;}
.contact-card h3 svg{width:20px;height:20px;color:var(--gold-light);}
.contact-card a{font-weight:600;color:var(--gold-light);text-decoration:none;}
.contact-card a:hover{text-decoration:underline;}
.contact-card p{color:var(--stone);margin-bottom:0;}
.hours-list{list-style:none;margin:0;padding:0 36px 0 0;display:grid;gap:.7em;}
.hours-list li{display:grid;grid-template-columns:1fr auto;column-gap:1.2em;align-items:baseline;color:var(--stone);font-size:.95rem;}
.hours-list li span:last-child{color:#fff;font-weight:600;white-space:nowrap;text-align:right;}

@media (max-width:600px){
  .hours-list{padding-right:0;}
  .hours-list li{column-gap:.8em;}
}

@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }

/* -------------------- footer -------------------- */
.site-footer{background:var(--moss-900);color:var(--stone);border-top:1px solid rgba(248,243,231,.12);padding:48px 0 28px;}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;padding-bottom:28px;border-bottom:1px solid rgba(248,243,231,.12);}
.footer-brand{display:flex;align-items:center;gap:.8em;}
.footer-brand img{height:42px;width:42px;border-radius:50%;}
.footer-brand strong{font-family:var(--font-display);color:#fff;font-size:1.1rem;}
.footer-nav ul{list-style:none;display:flex;gap:1.6em;flex-wrap:wrap;padding:0;margin:0;}
.footer-nav a{text-decoration:none;color:var(--stone);font-size:.92rem;}
.footer-nav a:hover{color:var(--gold-light);}
.footer-social a{color:var(--stone);}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;font-size:.82rem;color:rgba(248,243,231,.6);}

/* -------------------- opening ribbon (fixed, dismissible) -------------------- */
.opening-ribbon{
  background:var(--gold);color:var(--moss-900);text-align:center;
  font-weight:600;font-size:.9rem;padding:.6em 1em;
  display:flex;align-items:center;justify-content:center;gap:.6em;flex-wrap:wrap;position:relative;
}
.opening-ribbon strong{font-weight:700;}
.ribbon-close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--moss-900);opacity:.6;
}
.ribbon-close:hover{opacity:1;}

/* -------------------- utility -------------------- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* =========================================================
   WEBBUTIK — produkter, kundvagn, kassa
   ========================================================= */

/* v8.7, punkt 16 i granskningen: se docblocket ovanför markupen i
   includes/header.php för varför ikonerna nu ligger i en gemensam
   flex-behållare (.header-icons) med ETT delat gap-värde i stället för
   var sin margin-left på egna, fast breddsatta (42×42px) länkar — det
   är det som faktiskt gör avståndet "Kontakt → kundikon" och
   "kundikon → korgikon" lika stort. Länkarna är nu innehålls-
   storlekssatta (ingen width/height), och ett osynligt ::before
   (position:absolute; inset:-11px) återskapar en lika stor tryckyta
   som den gamla 42×42-boxen (touchvänligt) utan att det breder ut
   layouten/avstånden. */
.header-icons{display:flex;align-items:center;gap:2rem;margin-left:2rem;}

.cart-icon-link{position:relative;font-size:1.3rem;line-height:1;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.cart-icon-link::before{content:"";position:absolute;inset:-11px;}
.cart-count{position:absolute;top:-6px;right:-8px;background:var(--gold);color:var(--moss-900);font-family:var(--font-body);font-size:.68rem;font-weight:700;min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 3px;}
/* v8.7, punkt 16: diskret "streckgubbe" (SVG-konturikon, currentColor)
   i stället för den lila 👤-emojin — se markupen i includes/header.php. */
.account-icon-link{position:relative;text-decoration:none;color:var(--moss-700);display:inline-flex;align-items:center;justify-content:center;}
.account-icon-link:hover{color:var(--moss-900);}
.account-icon-link svg{width:22px;height:22px;display:block;}
.account-icon-link::before{content:"";position:absolute;inset:-11px;}
.account-dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--gold);border:2px solid #fff;}
.main-nav a.nav-shop-link{background:var(--gold);color:var(--moss-900) !important;padding:.55em 1.4em;border-radius:999px;font-weight:700;}
.main-nav a.nav-shop-link:hover{background:var(--gold-light);}
.main-nav a.nav-shop-link::after{display:none;}

/* -------------------- "Blomsterverk" undermeny -------------------- */
.nav-has-submenu{position:relative;}
.nav-submenu-toggle{background:none;border:0;margin:0;padding:.2em 0;font:inherit;font-weight:600;font-size:.92rem;line-height:inherit;color:var(--moss-700);display:inline-flex;align-items:center;gap:.35em;cursor:pointer;vertical-align:baseline;position:relative;}
.nav-submenu-toggle::-moz-focus-inner{border:0;padding:0;}
.nav-submenu-toggle svg{width:.7em;height:.7em;flex:none;transition:transform .2s ease;}
.nav-has-submenu.is-open .nav-submenu-toggle svg{transform:rotate(180deg);}
.nav-submenu{list-style:none;margin:0;padding:0;}
.nav-submenu a::after{display:none;}

@media (min-width:861px){
  /* v8.6 — osynlig "brygga" som täcker glappet mellan menyknappen och den
     nedfällda undermenyn (samma höjd som .nav-submenus margin-top nedan).
     UTAN den här bryggan lämnar muspekaren helt ELEMENT-trädet så fort den
     rör sig NER från "Webbutik"/"Blomsterverk" och in i det tomma
     mellanrummet ovanför undermenyn — CSS-reglerna nedan
     (.nav-has-submenu:hover .nav-submenu) kräver att muspekaren HELA TIDEN
     är kvar över .nav-has-submenu (eller ett barn till den) för att
     undermenyn ska förbli synlig, men det tomma mellanrummet hör inte till
     NÅGOT element alls — så menyn stängdes direkt så fort man drog musen
     nedåt genom glappet, innan den ens hann nå undermenyns länkar.
     Bryggan är en osynlig, positionerad :: after-yta som TÄCKER exakt det
     glappet — eftersom den genereras av .nav-has-submenu själv räknas den
     som en del av samma element, så :hover bryts aldrig när muspekaren
     passerar över den. */
  .nav-has-submenu::after{
    content:"";
    position:absolute;
    left:-1em;
    top:100%;
    width:220px;
    height:10px;
  }
  .nav-submenu{
    position:absolute;top:100%;left:-1em;margin-top:10px;
    background:#fff;border-radius:10px;box-shadow:var(--shadow-soft);
    min-width:190px;padding:.5em 0;overflow:hidden;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .15s ease,transform .15s ease,visibility .15s;
    z-index:60;
  }
  .nav-has-submenu:hover .nav-submenu,
  .nav-has-submenu.is-open .nav-submenu{opacity:1;visibility:visible;transform:translateY(0);}
  .nav-submenu li a{display:block;padding:.55em 1.2em;color:var(--moss-900);font-weight:600;font-size:.9rem;white-space:nowrap;}
  .nav-submenu li a:hover{background:var(--cream);}
}

@media (max-width:860px){
  .nav-submenu{
    max-height:0;overflow:hidden;padding-left:1em;margin-top:0;
    border-left:2px solid var(--stone-line);
    transition:max-height .25s ease;
  }
  .nav-has-submenu.is-open .nav-submenu{max-height:320px;margin-top:.9em;}
  .nav-submenu li{margin-top:.75em;}
  .nav-submenu li:first-child{margin-top:0;}
  .nav-submenu li a{color:var(--moss-700);font-weight:600;font-size:.85rem;}
  .nav-submenu li a::before{content:"– ";color:var(--sage);}
}

.shop-page{padding:56px 0 96px;}
.shop-header{max-width:680px;margin:0 0 2.4em;}
.shop-header .eyebrow{display:block;color:var(--gold);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;margin-bottom:.5em;}
.shop-header h1{font-size:clamp(1.9rem,3.6vw,2.8rem);}
.shop-header p{color:var(--moss-600);font-size:1.05rem;}

.breadcrumb-link{display:inline-flex;align-items:center;gap:.4em;color:var(--moss-700);text-decoration:none;font-weight:600;font-size:.92rem;margin-bottom:1.6em;}
.breadcrumb-link:hover{color:var(--gold);}

.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.category-heading{font-size:1.4rem;margin:2em 0 1em;color:var(--moss-900);}
.category-heading:first-of-type{margin-top:0;}
@media (max-width:960px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.product-grid{grid-template-columns:1fr;}}

.product-card{background:#fff;border:1px solid var(--stone-line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-soft);}
.product-card-media{aspect-ratio:4/3;background:var(--stone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E") center/cover;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.product-card-media img{width:100%;height:100%;object-fit:cover;}
.product-card-media .placeholder{font-size:2.4rem;opacity:.4;}
.product-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:.6em;flex:1;}
.product-card-body h3{font-size:1.25rem;margin:0;}
.product-card-body .desc{color:var(--moss-600);font-size:.92rem;margin:0;flex:1;}
.product-card-price{font-family:var(--font-display);font-weight:600;color:var(--rust);font-size:1.15rem;}
.product-card-actions{display:flex;gap:.6em;margin-top:.4em;flex-wrap:wrap;}
.product-card-actions form{margin:0;}

.product-detail{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;}
@media (max-width:860px){.product-detail{grid-template-columns:1fr;}}
.product-detail-media{border-radius:var(--radius);overflow:hidden;background:var(--stone);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;}
.product-detail-media img{width:100%;height:100%;object-fit:cover;}
.product-detail-body h1{font-size:clamp(1.8rem,3vw,2.4rem);}
.product-detail-price{font-family:var(--font-display);font-size:1.5rem;color:var(--rust);font-weight:600;margin:.2em 0 1em;}
.product-detail-desc{color:var(--moss-700);font-size:1.02rem;white-space:pre-line;}
.qty-field{display:inline-flex;align-items:center;border:1.5px solid var(--stone-line);border-radius:999px;overflow:hidden;margin-right:.6em;}
.qty-field input{width:52px;border:0;text-align:center;padding:.6em 0;font-family:var(--font-body);font-size:.95rem;background:transparent;}
.qty-field button{border:0;background:transparent;width:36px;height:38px;font-size:1.1rem;cursor:pointer;color:var(--moss-700);}
.qty-field button:hover{background:var(--stone);}

.flash{padding:14px 18px;border-radius:var(--radius);margin-bottom:1.6em;font-weight:600;font-size:.95rem;}
.flash-success{background:#e5efdd;color:var(--moss-900);border:1px solid #bcd5a4;}
.flash-error{background:#f7e3dc;color:var(--rust);border:1px solid #e3b6a5;}
.flash-info{background:var(--stone);color:var(--moss-900);border:1px solid var(--stone-line);font-weight:500;line-height:1.5;}
.flash-info a{color:inherit;font-weight:700;}
/* v8.5 — Kundprofil */
.profile-tabs{display:flex;gap:1.6em;border-bottom:1px solid var(--stone-line);margin-bottom:1.8em;flex-wrap:wrap;}
.profile-tabs a{padding:.6em 0;text-decoration:none;color:inherit;opacity:.6;border-bottom:2px solid transparent;}
.profile-tabs a.active{opacity:1;border-bottom-color:var(--gold);font-weight:600;}
.profile-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--stone-line);border-radius:var(--radius);overflow:hidden;}
.profile-table th,.profile-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--stone-line);font-size:.92rem;}
.profile-table th{background:#faf8f4;font-weight:600;}
.profile-table tr:last-child td{border-bottom:none;}
.profile-table-kv th{width:160px;white-space:nowrap;}
/* v9.3.9: orderlistan — ordernr, datum och belopp bryts aldrig; hela raden är klickbar (js/main.js). */
.profile-table td.nw{white-space:nowrap;}
.profile-table tr.row-link{cursor:pointer;}
.profile-table tr.row-link:hover td{background:#faf8f4;}
/* v9.2.2 — Kundprofil på mobil: Mina ordrar (lista + enskild order) staplas som kort i stället för en
   för bred tabell (samma mönster som .cart-table ovan). Tabellen får aldrig göra sidan bredare än skärmen. */
@media (max-width:640px){
  .profile-table-kv, .profile-table-kv tbody, .profile-table-kv tr, .profile-table-kv th, .profile-table-kv td{display:block;width:100%;}
  .profile-table-kv th{width:100%;border-bottom:none;padding:10px 14px 0;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sage);background:transparent;white-space:normal;}
  .profile-table-kv td{padding:2px 14px 10px;overflow-wrap:anywhere;}
  .profile-table-stack{border:0;background:transparent;border-radius:0;overflow:visible;}
  .profile-table-stack thead{display:none;}
  .profile-table-stack, .profile-table-stack tbody, .profile-table-stack tfoot, .profile-table-stack tr, .profile-table-stack td{display:block;width:100%;}
  .profile-table-stack tbody tr{background:#fff;border:1px solid var(--stone-line);border-radius:var(--radius);padding:.6em 14px;margin-bottom:.8em;}
  .profile-table-stack td{border-bottom:none;padding:.3em 0;font-size:.95rem;overflow-wrap:anywhere;}
  .profile-table-stack tr:last-child td{border-bottom:none;}
  .profile-table-stack td[data-label]:not([data-label=""]){display:flex;justify-content:space-between;align-items:baseline;gap:1em;}
  .profile-table-stack td[data-label]:not([data-label=""])::before{content:attr(data-label);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sage);flex:0 0 auto;}
  .profile-table-stack td.pt-main{font-weight:600;font-size:1.02rem;}
  .profile-table-stack td.pt-empty{display:none;}
  .profile-table-stack td.pt-action{padding-top:.5em;}
  .profile-table-stack td.pt-action .btn{padding-left:0;}
  .profile-table-stack tfoot tr.pt-total{display:flex;justify-content:space-between;align-items:baseline;gap:1em;background:#faf8f4;border:1px solid var(--stone-line);border-radius:var(--radius);padding:.7em 14px;}
  .profile-table-stack tfoot td{display:block;width:auto;padding:0;}
  .profile-table-stack tfoot td.pt-total-label{text-align:left !important;}
}

/* -------------------- kundvagn -------------------- */
.cart-table{width:100%;border-collapse:collapse;margin-bottom:2em;}
.cart-table th{text-align:left;font-family:var(--font-body);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sage);border-bottom:1px solid var(--stone-line);padding:0 0 .8em;}
.cart-table td{padding:1.1em 0;border-bottom:1px solid var(--stone-line);vertical-align:middle;}
.cart-table .item-name{font-weight:600;color:var(--moss-900);}
.cart-table .item-remove{color:var(--rust);font-size:.85rem;text-decoration:none;font-weight:600;}
.cart-table .item-remove:hover{text-decoration:underline;}
.cart-qty-form{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;}

@media (max-width:640px){
  .cart-table thead{display:none;}
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{display:block;width:100%;}
  .cart-table tr{padding:1.1em 0;border-bottom:1px solid var(--stone-line);}
  .cart-table td{border-bottom:none;padding:.3em 0;}
  .cart-table td[data-label]:not([data-label=""])::before{
    content:attr(data-label);display:block;font-size:.72rem;text-transform:uppercase;
    letter-spacing:.05em;color:var(--sage);margin-bottom:.3em;
  }
  .cart-table .item-name{font-size:1.05rem;margin-bottom:.2em;}
}
.cart-summary{display:flex;justify-content:flex-end;gap:2.4em;align-items:baseline;margin-bottom:2em;}
.cart-summary .label{color:var(--moss-600);}
.cart-summary .total{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--moss-900);}
.cart-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1em;}
.cart-empty{text-align:center;padding:4em 0;color:var(--moss-600);}

/* -------------------- kassa / checkout -------------------- */
.checkout-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start;}
@media (max-width:900px){.checkout-grid{grid-template-columns:1fr;}}
/* v8.5 — kassans "Befintlig kund / Ny kund"-val samt "kontot finns redan"-panelen. */
.checkout-choice-card{background:#fff;border:1px solid var(--stone-line);border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow-soft);}
.checkout-choice-buttons{display:flex;gap:1em;flex-wrap:wrap;margin-top:1.4em;}
.checkout-choice-buttons form{margin:0;}
.btn-link{background:none;border:none;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;}
.btn-link:hover{opacity:.75;}
.form-field{margin-bottom:1.3em;}
.form-field label{display:block;font-weight:600;margin-bottom:.4em;font-size:.92rem;color:var(--moss-900);}
.form-field input[type=text],.form-field input[type=email],.form-field input[type=tel],.form-field input[type=date],
.form-field input[type=password],.form-field input[type=number],
.form-field select,.form-field textarea{
  width:100%;padding:.85em 1em;border:1.5px solid var(--stone-line);border-radius:var(--radius);
  font-family:var(--font-body);font-size:.98rem;background:#fff;color:var(--ink);
}
/* Kosmetisk fix: <select> ärvde sidans line-height:1.55 (se html/body-
   regeln högst upp i filen), vilket i Chrome flyttar textens baslinje
   längre ner i rutan än vad den stängda select-rutans egen höjd
   (beräknad av webbläsaren utifrån typsnittets normala radhöjd + vår
   padding, inte den ärvda line-height) faktiskt har plats för — bokstäver
   med en nedstigande del (g, y, p ...) klipptes då av mot rutans
   underkant/ram, t.ex. "Fredag" i veckodagsväljaren på shop/leverans.php.
   En egen, tightare line-height räcker för att baslinjen ska hamna högre
   upp i rutan igen. Påverkar bara <select> (textarea ska fortfarande ha
   sidans vanliga, mer luftiga radhöjd för flera rader text). */
.form-field select{line-height:1.3;}
.form-field textarea{resize:vertical;min-height:90px;}
.form-field.checkbox{display:flex;align-items:flex-start;gap:.7em;}
.form-field.checkbox input{margin-top:.3em;}
.form-field.checkbox label{margin:0;font-weight:500;}
/* v9.3.0: kryssruta med länkar (köpvillkor) — texten och ev. felmeddelande ligger i en egen kolumn; fel = rosa ruta som övriga fält. */
.form-field.checkbox .terms-text{flex:1;min-width:0;}
.form-field.checkbox.has-error{background:#fbe1db;border:1px solid var(--rust);border-radius:var(--radius);padding:.7em .9em;}
.form-field.checkbox a{text-decoration:underline;}
/* v9.3.0: köpvillkorssidan (villkor.php) */
.legal-page{padding:2.5em 0 4em;}
.legal-page .container{max-width:820px;}
.legal-page h1{margin:.6em 0 1em;}
.legal-content h2{margin:2em 0 .6em;font-size:1.5rem;}
.legal-content h3{margin:1.6em 0 .5em;font-size:1.1rem;}
.legal-content p,.legal-content li{line-height:1.65;}
.legal-content ul,.legal-content ol{margin:.6em 0 1em 1.3em;padding:0;}
.legal-content li{margin:.35em 0;}
.legal-content a{text-decoration:underline;}
.form-hint{color:var(--sage);font-size:.85rem;margin-top:.35em;}
.form-error{color:var(--rust);font-size:.85rem;margin-top:.35em;font-weight:600;animation:form-error-blink .5s ease-in-out 0s 4;}
@keyframes form-error-blink{0%,100%{opacity:1;}50%{opacity:.2;}}

/* Fält som saknar/har fel information markeras med rosa bakgrund istället
   för en textrad under fältet — den röda informationsrutan högst upp i
   formuläret ("Rätta de markerade felen...") förklarar vad som gäller. */
.form-field.has-error input[type=text],.form-field.has-error input[type=email],.form-field.has-error input[type=tel],.form-field.has-error input[type=date],
.form-field.has-error input[type=password],
.form-field.has-error select,.form-field.has-error textarea{
  background:#fbe1db;border-color:var(--rust);
}
.radio-box-group.has-error .radio-box{background:#fbe1db;border-color:var(--rust);}

.recipient-preview{background:#faf6ee;border:1px solid var(--stone-line);border-radius:var(--radius);padding:1em 1.2em;margin-bottom:1.2em;line-height:1.6;}

.order-summary-card{background:#fff;border:1px solid var(--stone-line);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow-soft);position:sticky;top:20px;}
.order-summary-card h3{font-size:1.1rem;margin-bottom:1em;}
.order-summary-card ul{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:.7em;}
.order-summary-card ul[hidden]{display:none;}
.order-summary-card li{display:flex;justify-content:space-between;font-size:.92rem;gap:1em;}
.order-summary-card li span:first-child{min-width:0;}
.order-summary-card li span:last-child{white-space:nowrap;flex-shrink:0;}
.order-summary-card .total-row{border-top:1px solid var(--stone-line);padding-top:1em;margin-top:.4em;display:flex;justify-content:space-between;font-weight:700;font-family:var(--font-display);font-size:1.2rem;}

.payment-notice{background:var(--stone);border:1px solid var(--stone-line);border-radius:var(--radius);padding:16px 18px;font-size:.88rem;color:var(--moss-700);margin-top:1.4em;}
.payment-notice strong{color:var(--moss-900);}

.form-field-row{display:grid;grid-template-columns:minmax(90px,.65fr) 1.6fr;gap:16px;}
@media (max-width:480px){.form-field-row{grid-template-columns:1fr;}}

/* Utkörning: felmeddelandet om att postnumret inte går att köra ut till
   placeras direkt under Postnummer — som en egen rad under båda
   kolumnerna på desktop, men fysiskt mellan Postnummer och Ort när
   fälten staplas på mobilen. */
.form-field-row-zone{grid-template-areas:"zip city" "msg msg";}
.form-field-row-zone .fld-zip{grid-area:zip;}
.form-field-row-zone .fld-city{grid-area:city;}
.form-field-row-zone .fld-zonemsg{grid-area:msg;margin:0 0 1.3em;}
@media (max-width:480px){
  .form-field-row-zone{grid-template-areas:"zip" "msg" "city";}
}

.radio-box-group{display:grid;gap:10px;margin-bottom:1.3em;}
/* Bokningsbara dagar (Inställningar → Öppettider): auto-fit istället för ett
   fast antal kolumner, så att alla 7 dagar alltid syns och radbryter av sig
   själva istället för att klippas av på smala/liggande mobilskärmar. */
.weekday-grid{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;}
.weekday-grid .radio-box{justify-content:center;padding:10px 8px;}
.radio-box{display:flex;align-items:flex-start;gap:.7em;border:1px solid var(--stone-line);border-radius:var(--radius);padding:14px 16px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s;}
.radio-box:hover{border-color:var(--gold);}
.radio-box input{margin-top:.25em;}
.radio-box span{font-size:.95rem;color:var(--moss-900);}
.radio-box span small{display:block;color:var(--moss-600);font-weight:400;font-size:.82rem;margin-top:.2em;}
.radio-box:has(input:checked){border-color:var(--gold);background:#fdf8ec;}

.radio-box-with-info{position:relative;padding-right:46px;}
.info-icon-btn{
  position:absolute;top:50%;right:14px;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;border:1.5px solid var(--sage);
  background:#fff;color:var(--sage);font-family:var(--font-display);font-style:italic;
  font-size:.8rem;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;flex-shrink:0;
}
.info-icon-btn:hover,.info-icon-btn[aria-expanded=true]{border-color:var(--gold);color:var(--gold);}
.info-popover{
  position:relative;margin:-4px 0 1.3em;background:#fff;border:1px solid var(--stone-line);
  border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:14px 16px;font-size:.88rem;
}
.info-popover strong{display:block;margin-bottom:.6em;color:var(--moss-900);}
.info-popover ul{list-style:none;margin:0;padding:0;display:grid;gap:.4em;}
.info-popover li{display:flex;justify-content:space-between;gap:1em;color:var(--moss-700);}

.fulfillment-section{border-top:1px dashed var(--stone-line);padding-top:1.2em;margin-bottom:1.2em;}

.pay-box{background:#fff;border:1px solid var(--stone-line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-soft);max-width:520px;}
.pay-amount{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--moss-900);margin-bottom:.2em;}
.pay-status{padding:14px 18px;border-radius:var(--radius);margin:1.2em 0;font-weight:600;}
.pay-status.pending{background:var(--stone);color:var(--moss-700);}
.pay-status.paid{background:#e5efdd;color:var(--moss-900);}
.pay-status.failed{background:#f7e3dc;color:var(--rust);}

/* =========================================================
   ADMINISTRATION (/tb2026/)
   ========================================================= */
.admin-body{background:var(--cream);min-height:100vh;}
.admin-shell{display:flex;min-height:100vh;}
.admin-sidebar{width:230px;flex:0 0 230px;background:var(--moss-900);color:var(--stone);padding:26px 20px;}
.admin-sidebar .brand{display:flex;align-items:center;justify-content:center;gap:.5em;color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.15rem;text-align:center;line-height:1.2;margin-bottom:1.8em;text-decoration:none;}
.admin-sidebar nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.3em;}
.admin-sidebar a{display:block;padding:.7em .8em;border-radius:6px;color:var(--stone);text-decoration:none;font-size:.92rem;font-weight:500;}
.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(255,255,255,.08);color:#fff;}
.admin-sidebar .logout{margin-top:2em;border-top:1px solid rgba(255,255,255,.12);padding-top:1em;display:grid;gap:.6em;}
.logout-form{margin:0;}
.admin-sidebar .logout-btn{display:block;width:100%;padding:.7em .8em;border-radius:6px;color:var(--stone);background:none;border:0;font:inherit;font-size:.92rem;font-weight:500;text-align:left;cursor:pointer;}
.admin-sidebar .logout-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
.sound-toggle{display:flex;align-items:center;gap:.5em;font-size:.85rem;color:var(--stone);cursor:pointer;}
.admin-main{flex:1;padding:36px 44px;max-width:1200px;}
.new-order-banner{background:var(--gold-light);color:var(--moss-900);padding:12px 20px;border-radius:var(--radius);font-weight:700;margin-bottom:1.4em;cursor:pointer;text-align:center;}

.delivery-list{display:grid;gap:1em;max-width:520px;}
.delivery-list[hidden]{display:none;}
.delivery-card{background:#fff;border:1px solid var(--stone-line);border-radius:var(--radius);padding:18px 20px;}
.delivery-card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.6em;font-size:.95rem;color:var(--moss-700);}
.delivery-card p{margin:.4em 0;font-size:.92rem;}
.delivery-actions{display:grid;gap:.5em;margin-top:1em;}
.delivery-actions[hidden]{display:none;}
.delivery-subform{margin-top:1em;padding-top:1em;border-top:1px dashed var(--stone-line);}
.reason-checkbox{display:flex;align-items:center;gap:.5em;font-weight:400;font-size:.92rem;margin:.4em 0;}
.reason-checkbox input{width:auto;}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.8em;flex-wrap:wrap;gap:1em;}
.admin-topbar h1{margin:0;font-size:1.6rem;}
.admin-card{background:#fff;border:1px solid var(--stone-line);border-radius:var(--radius);padding:24px 26px;margin-bottom:1.6em;overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* v8.5 — rubrik + knapp bredvid varandra inuti ett .admin-card (t.ex. kund-visa.php). */
.admin-card-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8em;}

/* Inställningar: varje ruta går att fälla ihop/ut genom att klicka på
   rubriken, så att den långa listan med inställningar blir hanterbar. */
.admin-card.collapsible > h3{
  cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;gap:1em;
}
.admin-card.collapsible > h3::after{content:'▾';font-size:.8em;color:var(--sage);flex:none;}
.admin-card.collapsible.is-collapsed > h3{margin-bottom:0;}
.admin-card.collapsible.is-collapsed > h3::after{content:'▸';}
.admin-card.collapsible.is-collapsed > :not(h3){display:none;}
/* v9.0.6: formulärrad i hopfällbar ruta — display:flex läggs i klass (inte inline style) så att is-collapsed-regeln ovan kan dölja den. */
.inline-form-row{display:flex;gap:.6em;flex-wrap:wrap;align-items:flex-end;}

.settings-save-bar{
  background:#fff;border:1px solid var(--stone-line);border-radius:var(--radius);
  padding:18px 22px;margin-top:0;margin-bottom:2em;
}
.stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:2em;}
@media (max-width:960px){.stat-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{background:#fff;border:1px solid var(--stone-line);border-radius:var(--radius);padding:20px;text-align:center;text-decoration:none;color:inherit;display:block;transition:border-color .15s;}
a.stat-card:hover{border-color:var(--moss-700);}
.stat-card .num{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--moss-900);}
.stat-card .lbl{color:var(--sage);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;}
/* Hämtade/Levererade: diagonalt delad ruta enligt exempelbild — en linje
   från nedre vänstra till övre högra hörnet delar rutan i två trianglar. */
.stat-card-diagonal{position:relative;padding:0;min-height:132px;overflow:hidden;}
.stat-card-diagonal::before{
  content:"";position:absolute;top:50%;left:50%;width:150%;height:1px;
  background:var(--stone-line);transform:translate(-50%,-50%) rotate(-45deg);
}
.stat-card-diagonal .diag-half{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:16px 18px;text-decoration:none;color:inherit;gap:.15em;
}
.stat-card-diagonal .diag-half.top{clip-path:polygon(0 0,100% 0,0 100%);align-items:flex-start;justify-content:flex-start;text-align:left;}
.stat-card-diagonal .diag-half.bottom{clip-path:polygon(100% 0,100% 100%,0 100%);align-items:flex-end;justify-content:flex-end;text-align:right;}
.stat-card-diagonal .diag-half:hover .num{color:var(--moss-700);}

.admin-table{width:max-content;min-width:100%;border-collapse:collapse;background:#fff;}
.admin-table th{text-align:left;background:var(--stone);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--moss-700);padding:.9em 1em;}
.admin-table td{padding:.9em 1em;border-bottom:1px solid var(--stone-line);font-size:.92rem;vertical-align:middle;}
.admin-table.admin-table-wrap{width:100%;}
.admin-table-wrap td{white-space:normal;overflow-wrap:anywhere;}
.admin-table tr:hover td{background:#fbf8f1;}
.admin-table tr.row-link{cursor:pointer;}
.admin-table a{color:var(--moss-700);font-weight:600;text-decoration:none;}
.admin-table a:hover{color:var(--gold);}

.badge{display:inline-block;padding:.3em .8em;border-radius:999px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
.badge-cart{background:#e8e4d8;color:var(--sage);}
.badge-awaiting_payment{background:#fbe9c4;color:#8a641a;}
.badge-paid{background:#dcefd3;color:var(--moss-900);}
.badge-payment_failed{background:#f7dcd3;color:var(--rust);}
.badge-completed{background:var(--moss-700);color:#fff;}
.badge-ready{background:var(--gold-light);color:var(--moss-900);}
.badge-picked_up{background:var(--moss-700);color:#fff;}
.badge-delivered{background:var(--moss-700);color:#fff;}
.badge-delivery_failed{background:#f7dcd3;color:var(--rust);}
.badge-cancelled{background:#eee;color:#888;}
.badge-yes{background:#dcefd3;color:var(--moss-900);}
.badge-no{background:#eee;color:#888;}
.badge-method{background:var(--stone);color:var(--moss-700);}
.badge-refunded{background:#f7dcd3;color:var(--rust);}
.order-flag-due{color:var(--rust);font-weight:600;font-size:.78rem;margin-top:.3em;}
.order-flag-refund{color:var(--moss-700);font-weight:600;font-size:.78rem;margin-top:.3em;}

.order-badges{display:flex;gap:.5em;flex-wrap:wrap;margin-bottom:1.8em;}

.kund-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6em;margin:.8em 0 1.6em;}
@media (max-width:760px){.kund-grid{grid-template-columns:1fr;gap:1em;}}

.switch-row{display:flex;align-items:center;gap:.9em;cursor:pointer;width:fit-content;}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex:none;}
.switch input{position:absolute;opacity:0;width:1px;height:1px;}
.switch .slider{position:absolute;inset:0;background:#ccc;border-radius:999px;transition:background .15s;}
.switch .slider::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.switch input:checked + .slider{background:var(--moss-700);}
.switch input:checked + .slider::before{transform:translateX(20px);}
.switch input:disabled + .slider{opacity:.45;cursor:not-allowed;}
.switch-row.is-disabled{cursor:not-allowed;}
/* v9.2.0: switch med tre lägen (Reels: Av / Stillbild / Rörlig). Tre osynliga radioknappar ligger som tredjedelar
   över reglaget (tangentbord och skärmläsare fungerar som en vanlig radiogrupp); knoppen flyttas efter valet. */
.tri-row{cursor:default;}
.tri{position:relative;display:inline-block;width:66px;height:26px;flex:none;}
.tri input{position:absolute;top:0;height:100%;width:33.34%;margin:0;opacity:0;cursor:pointer;z-index:2;}
.tri input:nth-of-type(1){left:0;}
.tri input:nth-of-type(2){left:33.33%;}
.tri input:nth-of-type(3){left:66.66%;}
.tri-track{position:absolute;inset:0;background:#ccc;border-radius:999px;transition:background .15s;}
.tri-track::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.tri input:nth-of-type(2):checked ~ .tri-track{background:var(--moss-600,#6b8f6b);}
.tri input:nth-of-type(2):checked ~ .tri-track::before{transform:translateX(20px);}
.tri input:nth-of-type(3):checked ~ .tri-track{background:var(--moss-700);}
.tri input:nth-of-type(3):checked ~ .tri-track::before{transform:translateX(40px);}
.tri input:focus-visible ~ .tri-track{outline:2px solid var(--gold);outline-offset:2px;}
/* v8.9.9 — Adminsidan → Inställningar → Öppettider (en rad per veckodag) */
.oh-row{display:grid;grid-template-columns:110px 150px 1fr;align-items:center;gap:.6em 1.2em;padding:.85em 0;border-bottom:1px solid var(--stone-line);}
.oh-day{font-weight:700;color:var(--moss-900);}
.oh-times{display:flex;align-items:center;gap:.4em;flex-wrap:wrap;}
.oh-times[hidden]{display:none;}
.oh-times-label{color:var(--sage);font-size:.88rem;margin-left:.4em;}
.oh-times-label:first-child{margin-left:0;}
.oh-times select{width:auto;padding:.5em .6em;border:1.5px solid var(--stone-line);border-radius:var(--radius);font-family:var(--font-body);font-size:.98rem;background:#fff;color:var(--ink);line-height:1.3;}
@media (max-width:640px){.oh-row{grid-template-columns:1fr auto;}.oh-times{grid-column:1 / -1;}}

.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--moss-900);}
.login-box{background:#fff;border-radius:var(--radius);padding:40px 36px;width:100%;max-width:380px;box-shadow:var(--shadow-soft);}
.login-box h1{font-size:1.4rem;text-align:center;}
.login-box .brand-mark{display:block;text-align:center;margin-bottom:1em;font-family:var(--font-hand);font-size:1.6rem;color:var(--gold);}

.product-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;}
.product-form-grid[hidden]{display:none;}
@media (max-width:760px){.product-form-grid{grid-template-columns:1fr;}}
/* v9.0.6: Dagsrapportens tabeller — gemensamt kolumnraster (Typ | Order | Metod | Netto | Moms | Brutto | Visa), högerställda belopp. */
.report-scroll{overflow-x:auto;}
.report-table{table-layout:fixed;width:100%;min-width:960px;}
.report-table col.c-typ{width:115px;}
.report-table col.c-order{width:135px;}
.report-table col.c-num{width:180px;} /* v9.0.10: ca dubbelt avstånd mellan Netto/Moms/Brutto */
.report-table th.num,.report-table td.num{text-align:right;white-space:nowrap;}
.report-table .report-caption{display:block;font-weight:400;}
.report-table .report-method{display:flex;justify-content:space-between;gap:1em;}
.user-table{width:100%;min-width:0;}
.user-table .user-col-email{word-break:break-all;}
.user-table .user-col-mfa{text-align:center;}
.user-table tbody tr:hover td{background:#fbf8f1;}
.user-table .user-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:.6em;flex-wrap:wrap;}
.user-table .user-last-login{color:var(--sage);font-size:.9rem;white-space:nowrap;}
.inline-input{width:100%;padding:.4em .6em;border:1px solid var(--stone-line);border-radius:6px;font:inherit;}
.inline-input-num{max-width:90px;}

/* v8.9.15 — Adminsidan → Kategorier: sorterbara listor (drag-och-släpp) */
.sort-list{list-style:none;margin:0;padding:0;}
.sort-row{display:flex;align-items:center;gap:.9em;padding:.45em .8em .45em .3em;border:1px solid var(--stone-line);border-radius:8px;background:#fff;margin-bottom:.5em;}
.sort-row.is-dragging{background:#fbf3dc;border-color:var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.14);}
.sort-list.is-sorting{user-select:none;-webkit-user-select:none;}
.sort-list-static .sort-row{padding-left:.8em;}
/* Handtaget: tre streck, stor träffyta, stoppar sidscroll medan man drar med finger. */
.drag-handle{flex:none;box-sizing:content-box;width:20px;height:14px;padding:12px 10px;cursor:grab;touch-action:none;
  background-image:repeating-linear-gradient(to bottom,#a39b84 0,#a39b84 2px,transparent 2px,transparent 6px);
  background-clip:content-box;background-origin:content-box;background-repeat:no-repeat;}
.drag-handle:hover{background-image:repeating-linear-gradient(to bottom,var(--moss-700) 0,var(--moss-700) 2px,transparent 2px,transparent 6px);}
.sort-row.is-dragging .drag-handle{cursor:grabbing;}
.sort-thumb{flex:none;width:44px;height:44px;object-fit:cover;border-radius:6px;}
.sort-thumb-empty{display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:var(--stone);}
.sort-name{flex:1 1 auto;min-width:0;font-weight:600;}
.sort-name a{color:var(--moss-700);text-decoration:none;}
.sort-meta{flex:none;color:var(--sage);font-size:.85rem;white-space:nowrap;}
.move-btns{display:inline-flex;gap:.3em;flex:none;margin:0;}
.move-btns .btn[disabled]{opacity:.35;cursor:default;}
.cat-row-form{display:flex;flex:1 1 auto;align-items:center;gap:.6em;flex-wrap:wrap;margin:0;}
.cat-row-form .inline-input{flex:1 1 180px;width:auto;}
.cat-row-form select.inline-input{flex:0 0 auto;}
.sort-mode-tag{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--sage);margin-left:.6em;}
.sort-status{font-size:.85rem;font-weight:600;color:var(--moss-600);margin-left:.8em;}
.sort-status.is-error{color:var(--rust);}
@media (max-width:640px){.sort-row{flex-wrap:wrap;}.sort-meta{white-space:normal;}}
.current-image{max-width:220px;border-radius:var(--radius);margin-bottom:1em;border:1px solid var(--stone-line);}

.filter-bar{display:flex;gap:.6em;flex-wrap:wrap;margin-bottom:1.4em;}
.filter-bar a{padding:.5em 1.1em;border-radius:999px;border:1.5px solid var(--stone-line);text-decoration:none;color:var(--moss-700);font-size:.86rem;font-weight:600;}
.filter-bar a.active,.filter-bar a:hover{background:var(--moss-700);border-color:var(--moss-700);color:#fff;}

/* v8.9.22 — bläddringsraden under listor (Ordrar/Kunder/Produkter/
   Prenumerationer m.fl., se pagination_bar() i includes/functions.php). */
.pagination-bar{display:flex;align-items:center;justify-content:flex-end;gap:1em;flex-wrap:wrap;margin-top:1em;padding-top:1em;border-top:1px solid var(--stone-line);}
.pagination-count{color:var(--sage);font-size:.86rem;white-space:nowrap;}
.pagination-disabled{opacity:.4;cursor:default;pointer-events:none;}

@media (max-width:820px){
  .admin-shell{flex-direction:column;}
  .admin-sidebar{width:auto;flex:none;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;}
  .admin-sidebar nav ul{display:flex;flex-wrap:wrap;}
  .admin-main{padding:24px 20px;}
}

/* Admin på mobilen: en enkel topbar med butiksnamn + hamburgermeny istället
   för den bredvidliggande sidomenyn, som blev trång och rörig på smala
   skärmar. Menyn fälls ut som en lista under topbaren när man trycker. */
.admin-mobile-topbar{display:none;}
@media (max-width:820px){
  .admin-mobile-topbar{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--moss-900);color:#fff;padding:14px 20px;
  }
  .admin-mobile-topbar .brand-mobile{
    color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  }
  .admin-nav-toggle{background:none;border:none;padding:6px;display:flex;flex-direction:column;gap:4px;cursor:pointer;flex:none;}
  .admin-nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;}
  .admin-sidebar{display:none;}
  .admin-sidebar.is-open{display:flex;flex-direction:column;align-items:stretch;}
  .admin-sidebar.is-open nav ul{flex-direction:column;}
  .admin-sidebar .brand{display:none;}
}

/* v9.1.4: val med tre lägen (admin, t.ex. Reels: Av / Stillbild / Rörlig). Radioknappar utan JS. */

/* v9.3.5: förhandsgranskning av mailtexter (Adminsidan → Mail). */
.mail-preview-subject{background:var(--cream);border:1px solid var(--stone-line);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;padding:.6em .9em;font-size:.9rem;color:var(--moss-900);}
.mail-preview-frame{display:block;width:100%;min-height:200px;border:1px solid var(--stone-line);border-radius:0 0 var(--radius) var(--radius);background:#fff;}