/* Egenbyggt 2026 — variant 14, Dimma & havre.
   Shared across every page; loaded after component styles. */
:root {
  --vass:#535C55;
  --dimma:#F5F4EE;
  --vatten:#D8DDD6;
  --havre:#D6BE96;
  --djup:#2E3732;
  --forest:var(--vass);
  --paper:var(--dimma);
  --sawdust:var(--vatten);
  --ember:var(--vass);
  --ink:var(--djup);
  --muted:#626A61;
  --line:#D4D9CF;
  --surface:#EAEEE7;
  --dark-line:#9DA79D;
  --font-body:Avenir,Arial,sans-serif;
  --font-data:Consolas,'Courier New',monospace;
}
body {background:var(--dimma);color:var(--djup);font-family:var(--font-body);font-weight:400;line-height:1.6}
h1,h2,h3,h4,h5,h6 {font-family:var(--font-body);color:var(--vass);font-weight:900}
h1,h2,h3 {line-height:1.05}
.mono,.product-id {font-family:var(--font-data);font-weight:400}
.eyebrow {font-family:var(--font-body);font-weight:500}
.hero h1 {font-size:clamp(48px,6.4vw,96px);line-height:1.05}
.hero-copy h1,.login-intro h1 {color:var(--dimma)}
.hero-intro,.hero-note,.login-intro>p:not(.eyebrow) {color:var(--dimma)}
.product-main .product-summary h1 {font-size:clamp(40px,4.8vw,72px)!important;line-height:1.05}
.category-intro,.category-description,.info-copy,.product-description {line-height:1.6}
.info-copy {max-width:65ch}
.category-intro,.category-description {max-width:65ch}
.product-story>div p {max-width:60ch}
/* Retain the supplied logo's shape and accessible image; recolour via its alpha
   mask rather than changing the brand artwork or approximating its hue. */
@supports (mask-image:url('/assets/egenbyggt-logotyp-frilagd-skog.png')) {
  .brand:has(img.new-logo) {position:relative}
  .brand img.new-logo {opacity:0}
  .brand:has(img.new-logo)::after {content:'';position:absolute;inset:0;pointer-events:none;background:var(--vass);mask:url('/assets/egenbyggt-logotyp-frilagd-skog.png') center/contain no-repeat}
}
body .header .category-nav {background:var(--vass);color:var(--dimma);font-weight:500}
body .header .category-nav a:hover,body .header .category-nav a:focus-visible {background:var(--djup);color:var(--dimma)}
body .header .category-nav a[aria-current] {background:var(--havre);color:var(--djup);font-weight:900}
.mobile-categories {background:var(--vass);color:var(--dimma)}
.bag span {background:var(--havre);color:var(--djup)}
/* Havre is a background/marker, not small text on a light background. */
.button,.button-light,.button-accent {background:var(--havre);color:var(--djup);border-color:var(--havre);border-radius:10px}
.button:hover,.button-light:hover,.button-accent:hover {background:var(--vass);color:var(--dimma);border-color:var(--vass)}
.button-secondary {background:var(--vatten);border-color:var(--line);color:var(--djup)}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {outline:3px solid var(--djup);outline-offset:4px}
.hero-copy a:focus-visible,.category-nav a:focus-visible,.mobile-categories summary:focus-visible {outline-color:var(--havre)}
::selection {background:var(--havre);color:var(--djup)}
.text-link:hover,.breadcrumb a:hover,.info-copy a:hover,.info-sidebar a:hover,.info-sidebar a[aria-current],.site-footer nav a:hover {color:var(--vass)}
.hero {background:var(--vass)}
.hero-image {margin:24px 24px 24px 0;border-radius:30px 30px 5px 30px}
.image-label {border-radius:10px}
.closing {background:var(--vatten)}
.product-photo,.grid-image,.gallery-main,.library-image,.owned-image {background:var(--vatten);border-radius:15px;overflow:hidden}
.login-intro img,.closing>img,.info-copy img,.product-story img {border-radius:15px}
.subcategory-grid a,.shop-panel,.library-card,.owned-product,.info-benefit,.info-demo-form {border-radius:18px}
.subcategory-grid a,.shop-panel,.library-card,.info-benefit,.info-demo-form {background:var(--surface)}
.subcategory-grid a:hover {background:var(--vatten);border-color:var(--vass)}
.subcategory-grid a:hover span {color:var(--djup)}
.payment-status,.test-status,.grid-category,.photo-tag {background:var(--vatten);color:var(--djup)}
.payment-option {border-radius:10px}
.shop-error {background:var(--vatten);border-color:var(--vass);color:var(--djup)}
.group-members,.group-product-options,.group-product-choice {border-color:var(--line)}
.group-product-choice small {color:var(--muted)}
.management-form input:not([type=checkbox]),.management-form textarea,.management-form select,.inline-form input,.inline-form select,.login-panel input {background:var(--dimma);color:var(--djup);border-radius:8px}
dialog {border-radius:18px}
dialog::backdrop {background:rgb(46 55 50 / 50%)}
@media(max-width:760px) {
  .hero-image {margin:0 24px 24px;border-radius:20px 20px 5px 20px}
  .hero h1 {font-size:clamp(48px,11vw,76px)}
  .category-description,.category-intro,.info-copy {font-size:17px}
}

/* Layout only. The existing brand colours remain unchanged. */
body :where(input:not([type=checkbox]):not([type=radio]),textarea,select){font-size:16px;max-width:100%;min-width:0}
body :where(button,input,select,textarea){scroll-margin-block:100px 24px}
body :where(main,section,article,form,fieldset,dialog)>*{min-width:0}
body :where(button,.button,summary){touch-action:manipulation}
body :where(dialog){max-height:calc(100dvh - 24px);overscroll-behavior:contain}
body :where([hidden]){display:none!important}
.checkout-review-choice{margin-block:12px 20px;padding-block:16px;border-block:1px solid var(--line);font-size:14px;line-height:1.5}
.checkout-review-choice button{min-height:44px;margin-top:8px;text-align:left}
@media(max-width:899px){
 html{scroll-padding-top:88px}
 body{font-size:16px;line-height:1.6}
 body .section{padding:36px 20px}
 body .shop-page:not(.admin-content){padding:24px 20px 40px;min-height:55dvh}
 body .shop-page h1,body .category-heading h1{font-size:clamp(28px,7.2vw,36px);line-height:1.15;letter-spacing:-.035em;margin:8px 0 16px;overflow-wrap:break-word}
 body .section h2,body .section-heading h2{font-size:clamp(26px,7vw,34px);line-height:1.18;letter-spacing:-.03em;overflow-wrap:break-word}
 body .section-heading{margin-bottom:22px;gap:16px}
 body .hero-copy{padding:28px 20px}
 body .hero h1{font-size:clamp(34px,9.2vw,48px);line-height:1.12;letter-spacing:-.04em;margin:0 0 22px;max-width:14ch}
 body .hero .button{margin:0;min-height:52px;width:auto;max-width:100%;min-width:0;padding:14px 18px}
 body .hero-image{margin:0 20px 20px;aspect-ratio:4/3;max-height:360px}
 body .benefits{padding:14px 20px;gap:10px 20px;flex-wrap:wrap;justify-content:flex-start;font-size:13px}
 body .benefits span:before{margin-right:6px}
 body .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
 body .grid-card-info{padding:12px 0 14px;min-height:0}
 body .grid-card-info h3,body .grid-name{font-size:16px;line-height:1.35;letter-spacing:-.015em;min-height:0;margin-bottom:6px;overflow-wrap:break-word;word-break:normal;hyphens:auto}
 body .grid-card-info p,body .grid-format{font-size:13px;line-height:1.45}
 body .grid-card-info strong{font-size:18px;margin-top:8px}
 body .grid-image{aspect-ratio:1;border-radius:12px}
 body .grid-category{font-size:11px;position:static;display:block;padding:5px 0;background:transparent}
 body .grid-image:has(.grid-category){overflow:visible;margin-bottom:26px}
 body .grid-image:has(.grid-category) img{border-radius:12px}
 body .breadcrumb{font-size:12px;line-height:1.5;gap:7px;padding:14px 20px;flex-wrap:wrap}
 body .category-section{padding-top:12px}
 body .category-heading{margin-bottom:20px}
 body .category-intro,body .category-description,body .info-copy{font-size:16px;line-height:1.65}
 body .subcategory-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
 body .subcategory-grid a{min-height:44px;padding:10px 14px;flex:0 1 auto;font-size:14px;border-radius:10px}
 body .subcategory-grid strong{font-size:14px}
 body .subcategory-grid span{font-size:12px;margin-top:2px}
 body .category-results{padding-top:20px;margin-bottom:20px;gap:6px}
 body .category-results h2{font-size:22px;line-height:1.3}
 body .category-results>p{font-size:14px}
 body .catalog-toolbar{grid-template-columns:1fr 1fr;gap:12px;margin-block:20px}
 body .catalog-toolbar label{font-size:14px;gap:6px}
 body .catalog-toolbar input,body .catalog-toolbar select{font-size:16px;min-height:48px;padding:10px}
 body .product-main{grid-template-columns:minmax(0,1fr);padding:0 20px 32px;gap:24px}
 body .gallery-main{border-radius:12px;aspect-ratio:1}
 body .gallery-bottom{margin-top:8px}
 body .gallery-bottom>p{font-size:12px}
 body .catalog-thumbnails,body .thumbnails{display:flex;flex-wrap:nowrap;gap:8px;max-width:100%;overflow:auto;padding-block:6px;scroll-snap-type:x proximity}
 body .thumbnails button{width:52px;height:52px;min-width:52px;flex:none;scroll-snap-align:start}
 body .product-summary{padding:0;max-width:none}
 body .product-main .product-summary h1{font-size:clamp(28px,7.4vw,36px)!important;line-height:1.16;margin:10px 0 16px;letter-spacing:-.035em;overflow-wrap:break-word}
 body .product-intro{font-size:16px;line-height:1.6;max-width:65ch}
 body .product-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0;padding:16px 0}
 body .product-facts strong{font-size:15px;line-height:1.4}
 body .price-row{gap:16px;margin-bottom:16px;flex-wrap:wrap}
 body .price-row strong{font-size:30px}
 body .product-summary .button{min-height:52px;justify-content:center;width:100%}
 body .product-content-tab{padding-block:16px}
 body .product-content-tab summary{font-size:19px;min-height:48px;align-items:center;padding-block:10px}
 body .product-story{grid-template-columns:1fr;gap:16px}
 body .product-story h2{font-size:28px}
 body .product-story>div p{max-width:65ch;font-size:16px;margin-bottom:18px}
 body .product-tab-body{margin-top:16px;font-size:16px;overflow-wrap:break-word}
 body .steps{grid-template-columns:1fr;gap:24px}
 body .step-number{margin-bottom:12px}
 body .closing>div{padding:32px 20px}
 body .closing h2{font-size:30px;line-height:1.2}
 body .site-footer{padding:32px 20px;gap:28px;display:grid;grid-template-columns:1fr 1fr;align-items:start}
 body .site-footer .footer-brand{grid-column:1/-1}
 body .site-footer h2{font-size:18px;margin-bottom:10px}
 body .site-footer nav a{min-height:44px;display:flex;align-items:center;line-height:1.4;font-size:14px;padding-block:8px}
 body .site-footer .brand img{width:100px}
 body #cart{width:calc(100% - 24px);padding:20px;max-height:calc(100dvh - 24px)}
 body #cart h2{font-size:26px}
 body #cart .cart-item{align-items:flex-start;gap:12px;flex-wrap:wrap}
 body #cart .cart-item img{width:64px;height:64px;flex:none}
 body #cart .cart-item strong{font-size:16px;line-height:1.5}
 body #cart :is(.cart-remove,[data-cart-remove]){min-height:44px;margin-top:0;padding-block:10px}
 body #cart .cart-head button,body #cart .cart-close{width:44px;height:44px;flex:none}
 body .checkout-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 body .checkout-grid .shop-panel{padding:20px}
 body #commerce-checkout :is(input:not([type=checkbox]),select,textarea){font-size:16px;min-height:48px}
 body #commerce-checkout .button{min-height:52px}
 body .login-layout{grid-template-columns:1fr}
 body .login-intro{padding:28px 20px}
 body .login-intro h1{font-size:32px;line-height:1.15}
 body .login-panel{padding:24px 20px}
 body .login-panel :is(input,select){min-height:48px;font-size:16px}
 body #main.account-portal{padding:24px 20px 40px}
 body #main.account-portal .account-tabs{gap:20px}
 body #main.account-portal .account-tabs button{font-size:15px}
 body #main.account-portal .account-session button,body #main.account-portal .text-link{min-height:44px}
 body #main.account-portal .account-extra>summary{min-height:44px;align-items:center}
 body #main.account-portal input,body #main.account-portal select{font-size:16px;min-height:48px}
 body .orders-table{font-size:14px}
}
@media(max-width:359px){body .product-grid{grid-template-columns:1fr}body .grid-card-link{display:grid;grid-template-columns:108px minmax(0,1fr);gap:14px;align-items:center}body .grid-card-info{padding:8px 0;border:0}body .grid-image:has(.grid-category){margin-bottom:26px}body .site-footer{grid-template-columns:1fr}body .site-footer .footer-brand{grid-column:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body .button,body .grid-image img{transition:none}}

@media(max-width:899px){body .product-summary{display:flex;flex-direction:column}body .product-summary>*{order:10}body .product-summary>.eyebrow{order:0}body .product-summary>h1{order:1}body .product-summary>.review-summary{order:2;min-height:44px;display:flex;align-items:center;margin-bottom:10px}body .product-summary>.price-row{order:3;margin-top:8px}body .product-summary>[data-add]{order:4}body .product-summary>.purchase-note{order:5;margin:10px 0 20px}body .product-summary>.product-intro{order:6}body .product-summary>.product-facts{order:7}body .product-summary>.viewer-link{order:8;margin-top:0}body .catalog-description{padding-top:24px}body .catalog-description>h2{font-size:26px;margin-bottom:16px}body .catalog-description p{font-size:16px;line-height:1.65}body .catalog-load-more{min-height:48px;margin:24px auto;width:100%;justify-content:center}body #main.account-portal .orders-table{display:block;min-width:0}body #main.account-portal .orders-table thead{position:absolute;clip-path:inset(100%);width:1px;height:1px;overflow:hidden}body #main.account-portal .orders-table tbody{display:grid;gap:16px}body #main.account-portal .orders-table tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;border:1px solid var(--line);border-radius:12px;padding:16px}body #main.account-portal .orders-table td{display:block;border:0;padding:0;min-width:0;font-size:14px;overflow-wrap:anywhere}body #main.account-portal .orders-table td:before{content:attr(data-label);display:block;font-size:12px;margin-bottom:3px}body #main.account-portal .orders-table td:first-child{grid-column:1/-1}}