/*
Theme Name: Klädhallen
Theme URI: https://xn--kldhallen-w2a.se
Description: Klädhallens egna barntema till Storefront — rent och modernt mode-tema för hela familjen.
Author: Tomsjo Consulting AB
Template: storefront
Version: 1.0.0
Text Domain: kladhallen
*/

:root{
  --kh-ink:#14151a;
  --kh-muted:#6b7280;
  --kh-line:#ececec;
  --kh-bg:#ffffff;
  --kh-soft:#f7f7f8;
  --kh-accent:#14151a;
  --kh-accent-hover:#3a3d46;
  --kh-radius:14px;
  --kh-maxw:1280px;
}

/* ---------- Bas / typografi ---------- */
body.storefront,
.storefront-page{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--kh-ink);
  background:var(--kh-bg);
  -webkit-font-smoothing:antialiased;
}
.site h1,.site h2,.site h3,.site h4{
  font-family:"Inter",sans-serif;
  letter-spacing:-.02em;
  color:var(--kh-ink);
  font-weight:700;
}
a{color:var(--kh-ink);}
a:hover{color:var(--kh-muted);}

.col-full{max-width:var(--kh-maxw);}

/* ---------- Header ---------- */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--kh-line);
  padding-top:1.1em;padding-bottom:1.1em;
  box-shadow:none;
}
.site-header .site-branding{margin-bottom:0;}
.site-title{font-weight:800;letter-spacing:-.04em;font-size:1.9rem;}
.site-title a{color:var(--kh-ink)!important;}
.site-header .custom-logo-link img{max-height:46px;width:auto;}
.beta,.site-header-cart{margin-bottom:0;}

/* primär meny */
.storefront-primary-navigation{background:#fff;border:none;box-shadow:none;}
.main-navigation ul li a{
  font-weight:600;font-size:.95rem;color:var(--kh-ink);
  padding-top:1em;padding-bottom:1em;text-transform:none;
}
.main-navigation ul li a:hover{color:var(--kh-muted);}
.main-navigation ul.menu>li.menu-item-has-children>a:after,
.main-navigation ul.nav-menu>li.menu-item-has-children>a:after{opacity:.5;}
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children{
  border-radius:var(--kh-radius);
  box-shadow:0 18px 48px rgba(0,0,0,.12);
  border:1px solid var(--kh-line);
  padding:.4em 0;
}
.site-search .widget_product_search input[type=search],
.site-header .widget_product_search input[type=search]{
  border-radius:999px;background:var(--kh-soft);border:1px solid var(--kh-line);
}

/* ---------- Knappar ---------- */
button,.button,input[type=submit],
.added_to_cart,
.woocommerce a.button,.woocommerce button.button,
.woocommerce .button,.woocommerce-page a.button{
  background:var(--kh-accent);color:#fff;border-radius:999px;
  font-weight:600;letter-spacing:.01em;border:none;
  padding:.85em 1.6em;transition:background .15s ease, transform .15s ease;
}
button:hover,.button:hover,input[type=submit]:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce .button:hover{background:var(--kh-accent-hover);color:#fff;transform:translateY(-1px);}
.button.kh-ghost,a.kh-ghost{background:#fff;color:var(--kh-ink)!important;border:1.5px solid var(--kh-ink);}
.button.kh-ghost:hover,a.kh-ghost:hover{background:var(--kh-ink);color:#fff!important;}

/* ---------- Produktrutnät ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:#fff;border:1px solid var(--kh-line);border-radius:var(--kh-radius);
  padding:14px;transition:box-shadow .18s ease, transform .18s ease;
  text-align:left;
}
.woocommerce ul.products li.product:hover{
  box-shadow:0 14px 36px rgba(0,0,0,.10);transform:translateY(-3px);
}
.woocommerce ul.products li.product a img{
  border-radius:10px;margin-bottom:.8em;background:var(--kh-soft);
  aspect-ratio:3/4;object-fit:cover;width:100%;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:.98rem;font-weight:600;padding:.2em 0;line-height:1.35;color:var(--kh-ink);
}
.woocommerce ul.products li.product .price{color:var(--kh-ink);font-weight:700;}
.woocommerce ul.products li.product .price del{color:var(--kh-muted);font-weight:400;}
.woocommerce ul.products li.product .button{margin-top:.4em;}
.woocommerce span.onsale{
  background:var(--kh-ink);border-radius:999px;min-height:auto;min-width:auto;
  padding:.35em .7em;font-weight:600;line-height:1;top:18px;left:18px;right:auto;
}
/* "Köp hos…" external-knappar diskret */
.woocommerce ul.products li.product .added_to_cart{display:none;}

/* ---------- Produktsida ---------- */
.single-product div.product .product_title{font-size:2rem;}
.single-product div.product p.price{font-size:1.6rem;font-weight:800;color:var(--kh-ink);}
.single-product .images img{border-radius:var(--kh-radius);background:var(--kh-soft);}
.single-product .summary .single_add_to_cart_button{padding:1em 2.4em;font-size:1.05rem;}

/* ---------- Hero / startsida ---------- */
.kh-hero{
  position:relative;border-radius:22px;overflow:hidden;margin:0 0 56px;
  background:linear-gradient(120deg,#f3f1ee 0%,#eceaf2 100%);
  min-height:440px;display:flex;align-items:center;
}
.kh-hero__inner{padding:64px 56px;max-width:620px;}
.kh-hero h1{font-size:3rem;line-height:1.04;margin:0 0 .35em;letter-spacing:-.04em;}
.kh-hero p{font-size:1.2rem;color:var(--kh-muted);margin:0 0 1.6em;}
.kh-hero .kh-cta-row{display:flex;gap:14px;flex-wrap:wrap;}
@media(max-width:768px){
  .kh-hero{min-height:auto;}
  .kh-hero__inner{padding:40px 26px;}
  .kh-hero h1{font-size:2.1rem;}
}

/* sektionsrubriker */
.kh-section{margin:0 0 56px;}
.kh-section__head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 22px;}
.kh-section__head h2{font-size:1.6rem;margin:0;}
.kh-section__head a{font-weight:600;color:var(--kh-muted);font-size:.95rem;}
.kh-section__head a:hover{color:var(--kh-ink);}

/* kategori-kort */
.kh-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.kh-cat{
  position:relative;border-radius:18px;overflow:hidden;min-height:260px;
  display:flex;align-items:flex-end;color:#fff;text-decoration:none;
  background:#ddd;
}
.kh-cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%);}
.kh-cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.kh-cat span{position:relative;z-index:2;padding:24px;font-size:1.45rem;font-weight:700;letter-spacing:-.02em;}
.kh-cat:hover img{transform:scale(1.04);transition:transform .4s ease;}
@media(max-width:768px){.kh-cats{grid-template-columns:1fr;}}

/* trygghetsrad */
.kh-usps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 56px;}
.kh-usp{background:var(--kh-soft);border-radius:var(--kh-radius);padding:22px;text-align:center;}
.kh-usp strong{display:block;font-size:1rem;margin-bottom:.2em;}
.kh-usp span{color:var(--kh-muted);font-size:.88rem;}
@media(max-width:768px){.kh-usps{grid-template-columns:1fr 1fr;}}

/* ---------- Footer ---------- */
.site-footer{background:var(--kh-ink);color:#cfd0d4;margin-top:0;}
.site-footer a{color:#fff;}
.site-footer a:hover{color:#cfd0d4;}
.site-footer .site-info{background:#0e0f13;color:#b8bcc6;}
.kh-credit{opacity:.85;}
.kh-credit a{text-decoration:underline;}

/* dölj WC-brus som inte passar en affiliate-sajt */
.woocommerce-store-notice,p.demo_store{border-radius:0;}

/* ---------- Startsida: produktrader 3 kolumner, lagom bilder ---------- */
.kh-front-grid.products.columns-3 li.product{
  width:31.5%!important; margin-right:2.75%!important; margin-bottom:2.75%!important; float:left;
}
.kh-front-grid.products.columns-3 li.product:nth-child(3n){ margin-right:0!important; }
.kh-front-grid.products.columns-3 li.product:nth-child(3n+1){ clear:both; }
.kh-front-grid.products li.product img,
.kh-front-grid.products li.product .kh-extimg{
  aspect-ratio:3/4; object-fit:cover; width:100%; max-height:420px;
}
@media(max-width:768px){
  .kh-front-grid.products.columns-3 li.product{ width:48%!important; margin-right:4%!important; }
  .kh-front-grid.products.columns-3 li.product:nth-child(3n){ margin-right:4%!important; }
  .kh-front-grid.products.columns-3 li.product:nth-child(2n){ margin-right:0!important; }
}

/* ---------- Produktsida: beskrivning höger om bild + artikelinfo ---------- */
.single-product div.product .kh-pdp-desc{ margin:1.6em 0 1em; }
.single-product div.product .kh-pdp-desc h2{ font-size:1.15rem; margin:0 0 .5em; }
.single-product div.product .kh-pdp-desc p{ color:#3a3d46; line-height:1.6; margin:0 0 .8em; }
.single-product div.product .kh-pdp-meta{
  margin-top:1.4em; padding-top:1.1em; border-top:1px solid var(--kh-line);
  display:flex; flex-direction:column; gap:.35em; font-size:.9rem; color:var(--kh-muted);
}
.kh-pdp-meta__row strong{ color:var(--kh-ink); font-weight:600; }
/* dölj kvarvarande varukorgs-/kassarester */
.site-header-cart, .cart-contents, .woocommerce-cart, .added_to_cart, button.single_add_to_cart_button.alt + .added_to_cart{ display:none!important; }

/* ---------- Footer (egen 4-kolumnersfooter) ---------- */
.kh-footer{ padding:56px 0 28px; }
.kh-footer__cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.kh-footer h3{ color:#fff; font-size:1.4rem; margin:0 0 .5em; letter-spacing:-.03em; }
.kh-footer h4{ color:#fff; font-size:1rem; margin:0 0 1em; }
.kh-footer p{ color:#c9ccd4; font-size:.9rem; line-height:1.6; margin:0 0 .8em; }
.kh-footer__tagline{ color:#cfd0d4; font-weight:600; }
.kh-footer ul{ list-style:none; margin:0; padding:0; }
.kh-footer ul li{ margin:0 0 .55em; }
.kh-footer ul li a{ color:#dfe1e6; font-size:.9rem; text-decoration:none; }
.kh-footer ul li a:hover{ color:#fff; text-decoration:underline; }
.kh-footer__company{ color:#b8bcc6; font-size:.82rem; line-height:1.7; margin-top:1em; }
.kh-footer__company strong{ color:#cfd0d4; }
.kh-footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem; color:#b8bcc6;
}
.kh-footer__credit a{ color:#fff; text-decoration:underline; }
@media(max-width:768px){ .kh-footer__cols{ grid-template-columns:1fr 1fr; gap:28px; } }
@media(max-width:480px){ .kh-footer__cols{ grid-template-columns:1fr; } }

/* ---------- Cookie-banner ---------- */
.kh-cookie{ position:fixed; left:0; right:0; bottom:0; z-index:9999; background:#14151a; color:#eceef2; box-shadow:0 -8px 30px rgba(0,0,0,.3); }
.kh-cookie__inner{ max-width:1280px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.kh-cookie__txt{ flex:1; min-width:260px; margin:0; font-size:.88rem; line-height:1.5; color:#cfd0d4; }
.kh-cookie__txt a{ color:#fff; text-decoration:underline; }
.kh-cookie__btns{ display:flex; gap:10px; }
.kh-cookie__btn{ background:#fff; color:#14151a; border:none; border-radius:999px; padding:.7em 1.4em; font-weight:600; font-size:.85rem; cursor:pointer; }
.kh-cookie__btn--ghost{ background:transparent; color:#cfd0d4; border:1.5px solid rgba(255,255,255,.35); }
.kh-cookie__btn:hover{ opacity:.9; }
