/* Godisträdet: startsidans träd (ur prototyp/startsida-trad-mobil-b.html, variant B, godkänd 2026-11-03). Ändra inte markupen i includes/trad.php utan att ändra här. */
:root{--stam2:#683f27;--jord:#f1e2d2;--gras:#9fd07a;--k1:#ffe1ec;--k2:#e3f4d5;--k3:#fff0c4}
@media (prefers-color-scheme:dark){:root{--stam2:#4f301f;--jord:#2e221d;--gras:#4f7a3a;--k1:#3a2130;--k2:#1f3020;--k3:#352c1a}}
.intro{text-align:center;max-width:42rem;margin:.75rem auto 0}
.intro .ingress{color:var(--text2);font-size:1.075rem;margin:0 auto 1.25rem;max-width:34rem}
.sok button,.vaxlare button,.skaka,.knopp{font:inherit;font-weight:700;cursor:pointer;color:var(--text)}
.smaker{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;list-style:none;padding:0;margin:.4rem 0 0}
.smak-rubrik{color:var(--text2);font-size:.9rem;margin:1rem 0 0}
.smaker a{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:0 1rem;border:2px solid var(--kant);border-radius:999px;background:var(--yta);text-decoration:none;font-weight:600}
.smaker a::before{content:"";width:.75rem;height:.75rem;border-radius:50%;background:var(--s)}
.smaker a:hover{border-color:var(--s)}
.verktyg{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin:2rem 0 .25rem}
.verktyg[hidden]{display:none}
.vaxlare{display:inline-flex;padding:.2rem;border-radius:999px;background:var(--yta);border:2px solid var(--kant)}
.vaxlare button,.skaka{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:0 1rem;border-radius:999px;border:0;background:none}
.vaxlare svg,.skaka svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vaxlare [aria-pressed=true]{background:var(--text);color:var(--bg)}
.skaka{border:2px dashed var(--annons-kant)}
.lista .skaka{display:none}
/* trädet */
.trad{position:relative;isolation:isolate;padding:1rem 0 0;overflow-x:clip}
.trad::before{content:"";position:absolute;z-index:-2;inset:0 0 8rem;background:radial-gradient(closest-side,var(--k1) 97%,#0000) 50% 0/62% 40% no-repeat,radial-gradient(closest-side,var(--k2) 97%,#0000) 8% 22%/38% 34% no-repeat,radial-gradient(closest-side,var(--k3) 97%,#0000) 92% 26%/38% 34% no-repeat,radial-gradient(closest-side,var(--k2) 97%,#0000) 96% 62%/36% 32% no-repeat,radial-gradient(closest-side,var(--k1) 97%,#0000) 4% 64%/36% 32% no-repeat}
.stam{position:absolute;z-index:-1;left:50%;top:calc(3.4rem + min(100vw - 2rem,70rem)*.0875);bottom:3rem;width:4.5rem;transform:translateX(-50%);background:repeating-linear-gradient(176deg,#0000 0 24px,#0002 24px 27px),linear-gradient(90deg,var(--stam2),var(--stam) 35% 55%,var(--stam2));clip-path:polygon(34% 0,66% 0,80% 100%,20% 100%)}
.grenar,.lov{list-style:none;margin:0;padding:0}
.grenar{display:grid;grid-template-columns:minmax(0,1fr) 6rem minmax(0,1fr);row-gap:1.25rem}
.gren{display:flex;flex-direction:column;align-items:flex-start;min-width:0;position:relative}
.gren.v{grid-column:1}
.gren.h{grid-column:3;align-items:flex-end;margin-top:2.5rem}
.krona,.rot{grid-column:1/-1;align-items:center}
.gren-topp{display:flex;align-items:center;gap:.5rem;position:relative;z-index:1}
.gren-namn{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem 1rem .3rem .35rem;border:2px solid var(--g);border-radius:999px;background:color-mix(in srgb,var(--g) 20%,var(--yta));font-weight:800;font-size:1.15rem;text-decoration:none;transition:transform .2s}
.frukt{width:2rem;height:2rem;flex:none;overflow:visible}
.frukt *{stroke:var(--kontur);stroke-width:1.2}
.arm{display:block;width:calc(100% + 3.6rem);height:auto;margin:-.5rem -3.6rem 0 0;overflow:visible;transform-origin:100% 50%;transition:transform .3s,filter .3s}
.h .arm{margin:-.5rem 0 0 -3.6rem;transform-origin:0 50%}
.krona .arm{width:100%;margin:-.25rem 0 0;transform-origin:50% 100%}
.arm path:first-child{fill:var(--g);stroke:var(--kontur)}
.gren:hover .arm,.gren:focus-within .arm{transform:scale(1.03,1.2);filter:drop-shadow(0 0 .4rem var(--g))}
.gren:hover>.gren-topp .gren-namn,.gren:focus-within .gren-namn{transform:translateY(-3px) rotate(-2deg)}
.lov{display:flex;flex-wrap:wrap;justify-content:space-evenly;width:100%;margin-top:-.4rem}
.lov a{display:flex;flex-direction:column;align-items:center;min-width:5.5rem;max-width:8.5rem;padding:0 .4rem .35rem;text-decoration:none;text-align:center;font-weight:650;font-size:.95rem;line-height:1.2;border-radius:1rem}
.lov a::before{content:"";width:2px;height:1.1rem;background:var(--g)}
.lov .frukt{width:3.4rem;height:3.4rem;margin-bottom:.25rem;transition:transform .25s;animation:mogna .7s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:calc(var(--d)*.12s + var(--i)*.08s)}
.lov a:hover,.lov a.vald{background:color-mix(in srgb,var(--g) 18%,var(--yta))}
.lov a:hover .frukt,.lov a:focus-visible .frukt{transform:scale(1.18) rotate(-8deg)}
.krona .lov{margin-top:-.2rem}
.krona .mitt{margin-left:6rem}
.lov a.vald{box-shadow:0 0 0 3px var(--g)}
.vald .frukt{animation:studs .5s 3}
.skakar .grenar{animation:skaka .6s;transform-origin:50% 100%}
@keyframes mogna{from{transform:scale(.4);filter:grayscale(1) brightness(1.3);opacity:.4}}
@keyframes studs{50%{transform:translateY(-6px) scale(1.15)}}
@keyframes skaka{20%{transform:rotate(1deg)}40%{transform:rotate(-.9deg)}60%{transform:rotate(.5deg)}80%{transform:rotate(-.25deg)}}
.rot{margin-top:2rem;padding:3.25rem 1rem 1.5rem;background:var(--jord);border-top:.5rem solid var(--gras);border-radius:50% 50% 1.25rem 1.25rem/2.5rem 2.5rem 1.25rem 1.25rem}
.rotter{position:absolute;top:-.25rem;left:50%;width:16rem;transform:translateX(-50%);fill:var(--stam)}
.rot .lov a::before{display:none}
.rot-text{margin:.25rem 0 0;color:var(--text2);font-size:.9rem;text-align:center}
.knopp{display:none;flex:none;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:2px solid var(--g);background:var(--yta)}
.knopp .bud{display:none}
.knopp .plus{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;transition:transform .25s}
.oppen .knopp .plus{transform:rotate(45deg)}
@media (min-width:48rem) and (max-width:67.99rem){.krona .lov{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) 5rem repeat(2,minmax(0,1fr));row-gap:.5rem;justify-items:center}.krona .lov li:nth-child(4n+3){grid-column:4}.krona .mitt{margin:0}}
@media (max-width:47.99rem){
 .stam{width:2.25rem;bottom:4rem;clip-path:polygon(30% 0,70% 0,80% 100%,20% 100%)}
 .trad::before{inset:0 0 9rem}
 .grenar{grid-template-columns:minmax(0,1fr);row-gap:0}
 .gren.v,.gren.h{grid-column:1;margin:0;display:grid;grid-template-columns:minmax(0,1fr) 2.25rem minmax(0,1fr);align-items:start}
 .gren.h{margin-top:-1.25rem}
 .oppen+.gren,html:not(.js) .gren.h{margin-top:.75rem}
 .gren-topp{flex-direction:column;align-items:flex-start;gap:0;min-width:0}
 .v .gren-topp{grid-column:1}
 .h .gren-topp{grid-column:3;align-items:flex-end}
 .gren-namn{max-width:100%;min-height:2.75rem;font-size:1rem;line-height:1.15;padding:.25rem .7rem .25rem .3rem;gap:.35rem}
 .gren-namn .frukt{width:1.6rem;height:1.6rem}
 .arm{display:none}
 .lov{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(8.5rem,100%),1fr));gap:.5rem;margin:.35rem 0 .5rem;position:relative}
 .lov a{flex-direction:row;max-width:none;min-width:0;min-height:3rem;gap:.4rem;padding:.3rem .45rem;font-size:.875rem;font-weight:600;text-align:left;background:var(--yta);border:2px solid color-mix(in srgb,var(--g) 50%,var(--kant))}
 .lov a::before{display:none}
 .lov .frukt{width:1.6rem;height:1.6rem;margin:0}
 /* grenen själv är knappen: polkagrisstång med små frukter */
 .js:not(.lista) .knopp{display:flex}
 .knopp{position:relative;align-self:stretch;width:auto;height:2.75rem;margin:0 -1.125rem 0 0;padding:0 .15rem;border:0;border-radius:1rem;background:none;align-items:flex-end;justify-content:space-around}
 .h .knopp{margin:0 0 0 -1.125rem;flex-direction:row-reverse}
 .h .knopp .plus{left:auto;right:0}
 .knopp::before,html:not(.js) .gren-topp::after{content:"";position:absolute;inset:.4rem 0 auto;height:.75rem;border-radius:1rem;background:repeating-linear-gradient(-55deg,#fff9 0 5px,#0000 5px 11px),var(--g);box-shadow:0 0 0 1px var(--kontur);transition:filter .25s}
 html:not(.js) .gren-topp::after{position:static;display:block;align-self:stretch;margin:.25rem -1.125rem 0 0}
 html:not(.js) .h .gren-topp::after{margin:.25rem 0 0 -1.125rem}
 .knopp:hover::before,.oppen .knopp::before{filter:drop-shadow(0 0 .35rem var(--g))}
 .knopp{padding-left:2rem}
 .h .knopp{padding:0 2rem 0 .15rem}
 .knopp .plus{position:absolute;left:0;top:-.1rem;width:1.75rem;height:1.75rem;padding:.2rem;border:2px solid var(--g);border-radius:50%;background:var(--yta);fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
 .knopp .bud{display:block;position:relative;width:1.5rem;height:1.5rem;overflow:visible;transition:transform .25s}
 .oppen .knopp .bud{transform:scale(.7);opacity:.6}
 .knopp .bud *{stroke:var(--kontur);stroke-width:1.5}
 .krona{display:flex;flex-direction:column;align-items:center}
 .krona .gren-topp{display:contents}
 .krona .gren-namn{order:1}
 .krona .arm{display:block;order:2;width:100%;margin:-.15rem 0 0}
 .krona .knopp{order:3;align-self:stretch;margin:-.5rem 0 0;justify-content:space-evenly}
 .krona .knopp::before,.rot .knopp::before,html:not(.js) .krona .gren-topp::after,html:not(.js) .rot .gren-topp::after{display:none}
 .krona .knopp{padding:0 .15rem}
 .krona .knopp .plus,.rot .knopp .plus{position:relative;left:auto;top:auto;order:1;align-self:center;margin:0}
 .krona .bud.mitt,.krona .bud.mitt~.bud{order:2}
 .krona .lov{order:4;width:100%}
 .krona .mitt{margin:0}
 .rot{display:flex;flex-direction:column;align-items:center;margin-top:1.5rem;padding:2.75rem .75rem 1.25rem;border-radius:2.5rem 2.5rem 1rem 1rem/1.5rem 1.5rem 1rem 1rem}
 .rot .gren-topp{align-items:center}
 .rot .knopp{margin:0;align-self:center;gap:.5rem;align-items:center}
 .rot .knopp{padding:0}
 .rot .knopp .plus{order:-1}
 .rot .lov{width:100%}
 .rotter{width:10rem}
 .js:not(.lista) .gren:not(.oppen) .lov{display:none}
}
/* kategorivy: samma länkar, annan form */
.lista .stam,.lista .trad::before,.lista .arm,.lista .rotter,.lista .gren-topp::before,.lista .lov a::before{display:none}
.lista .grenar{grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));gap:1rem;padding:0}
.lista .gren{grid-column:auto;margin:0;align-items:stretch;padding:1rem;background:var(--yta);border:2px solid var(--kant);border-top:.5rem solid var(--g);border-radius:1rem;text-align:left}
.lista .krona{grid-column:1/-1}
.lista .gren-namn{border:0;background:none;padding:0;transform:none!important}
.lista .lov{display:flex;flex-direction:column;margin:.5rem 0 0}
.lista .krona .lov{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(12rem,100%),1fr))}
.lista .lov a,.lista .krona .mitt{flex-direction:row;max-width:none;min-height:2.75rem;gap:.6rem;margin:0;padding:.25rem .5rem;text-align:left;background:none;border:0;font-weight:600}
.lista .lov .frukt{width:1.6rem;height:1.6rem;margin:0;animation:none}
.lista .rot-text{text-align:left}
.lista .gren{display:flex;flex-direction:column}
.lista .gren-topp{display:flex;flex-direction:row;align-items:center}
.lista .krona .arm,.lista .gren-topp::after{display:none}
.lista .rot{margin-top:0}
.text{max-width:42rem;margin:3rem auto 0}
.text h2{font-size:1.5rem;line-height:1.25;margin:0 0 .5rem}
.text p{margin:0 0 1rem}
/* Ägarbeslut 2026-11-04: ett rotblock, rötterna bredvid varandra utan löv */
.rotlista{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .9rem;list-style:none;margin:0;padding:0}
.rotlista .gren-namn{font-size:1.05rem}
.lista .rotlista{flex-direction:column;align-items:flex-start}
@media (max-width:47.99rem){.rotlista{gap:.5rem}.rotlista .gren-namn{font-size:.95rem}}
/* 320 px: långa skyltar (Internationellt) ryms utan att brytas mitt i ord */
@media (max-width:22.5rem){.gren-namn{font-size:.9rem;padding-right:.5rem;letter-spacing:-.01em}.gren-namn .frukt{width:1.35rem;height:1.35rem}}