/*
Theme Name: KiraYumi
Description: KiraYumi child theme af Storefront — design "Ren glød" (forslag 1): japansk minimalisme, elfenben/sand/guld, Cormorant Garamond + Inter. Bygget efter docs/design-brief.md.
Author: KiraYumi
Template: storefront
Version: 0.1.4
Text Domain: kirayumi
*/

/* ============ Design-tokens ============ */
:root{
  --ky-elfenben:#FAF7F2;
  --ky-varmhvid:#FDFCFA;
  --ky-sand:#EFE8DC;
  --ky-sten:#E6E2DA;
  --ky-kul:#2B2A27;
  --ky-graa:#6B675F;
  --ky-guld:#B08D57;
  --ky-guld-lys:#D9C39E;
  --ky-groen:#7E9B6E;
  --ky-serif:'Cormorant Garamond',Georgia,serif;
  --ky-sans:'Inter',system-ui,-apple-system,sans-serif;
}

/* ============ Self-hostede fonte (GDPR: ingen eksterne kald) ============ */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-400.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/cormorant-garamond-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cormorant-garamond-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/inter-300.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2')}

/* ============ Basis ============ */
body{background:var(--ky-elfenben);color:var(--ky-kul);font-family:var(--ky-sans);font-weight:300;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--ky-serif);font-weight:500;color:var(--ky-kul)}
a{color:var(--ky-kul)}
a:hover{color:var(--ky-guld)}
p{color:var(--ky-graa)}

/* ============ USP-bjælke (indsættes via functions.php) ============ */
.ky-usp{background:var(--ky-kul);color:var(--ky-elfenben);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:9px 12px}
.ky-usp span{margin:0 14px;opacity:.85;display:inline-block}

/* ============ Header ============ */
.site-header{position:sticky;top:0;z-index:999;background:rgba(250,247,242,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--ky-sten)}
.site-header,.storefront-primary-navigation{background-color:transparent}
.site-branding .site-title,.site-branding .site-title a{font-family:var(--ky-serif);font-size:28px;letter-spacing:.22em;text-transform:uppercase;color:var(--ky-kul);font-weight:500}
.site-branding .site-description{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ky-guld)}
.site-title a .ky-guld-del{color:var(--ky-guld)}
.site-title a:hover .ky-guld-del{color:var(--ky-guld-lys)}
.main-navigation ul li a,.secondary-navigation ul.menu a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ky-kul)}
.main-navigation ul li a:hover{color:var(--ky-guld)}
.main-navigation ul li.current-menu-item > a{border-bottom:1px solid var(--ky-guld)}
.site-header-cart .cart-contents,.site-search{color:var(--ky-graa)}
.site-header-cart .cart-contents .amount{font-size:12.5px;letter-spacing:.08em}
.storefront-handheld-footer-bar{background:var(--ky-kul)}

/* ============ Knapper ============ */
.button,button,input[type="submit"],.added_to_cart,.wc-block-components-button{
  background:var(--ky-kul)!important;color:var(--ky-elfenben)!important;border:0!important;border-radius:0!important;
  font-family:var(--ky-sans);font-size:12px!important;letter-spacing:.2em;text-transform:uppercase;font-weight:400!important;
  padding:14px 32px;transition:background .25s ease}
.button:hover,button:hover,input[type="submit"]:hover,.added_to_cart:hover{background:var(--ky-guld)!important;color:#fff!important}
.button.alt,.checkout-button{background:var(--ky-guld)!important}
.button.alt:hover,.checkout-button:hover{background:var(--ky-kul)!important}

/* ============ Produktkort (shop-lister) ============ */
ul.products li.product{text-align:center;background:transparent}
ul.products li.product .woocommerce-loop-product__link img{background:linear-gradient(160deg,var(--ky-sand),var(--ky-varmhvid) 60%,var(--ky-guld-lys));transition:box-shadow .3s ease}
ul.products li.product:hover img{box-shadow:0 14px 34px rgba(43,42,39,.10)}
ul.products li.product .woocommerce-loop-product__title{font-family:var(--ky-serif);font-size:19px;font-weight:500;color:var(--ky-kul);padding-top:12px}
ul.products li.product .price{font-family:var(--ky-sans);font-size:14px;letter-spacing:.06em;color:var(--ky-kul);font-weight:400}
ul.products li.product .price del{color:var(--ky-graa);opacity:.7}
ul.products li.product .star-rating,.star-rating span::before{color:var(--ky-guld)}
ul.products li.product .button{margin-top:10px;padding:12px 26px;opacity:0;transform:translateY(4px)}
ul.products li.product:hover .button{opacity:1;transform:none}
@media(max-width:768px){ul.products li.product .button{opacity:1;transform:none}}
.onsale{background:var(--ky-guld)!important;border-radius:0!important;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px!important;min-height:0!important;line-height:1.4!important}

/* ============ Produktside ============ */
.single-product div.product .product_title{font-size:36px;line-height:1.12}
.single-product div.product .woocommerce-product-rating{margin-bottom:8px}
.single-product div.product p.price{font-family:var(--ky-sans);font-size:21px;color:var(--ky-kul)}
.single-product div.product .woocommerce-product-details__short-description{border-top:1px solid var(--ky-sten);margin-top:16px;padding-top:16px}
.single-product div.product .quantity .qty{border:1px solid var(--ky-kul);border-radius:0;background:transparent}
.single-product div.product .stock.in-stock{color:var(--ky-groen);font-size:13px}
.woocommerce-tabs ul.tabs li a{font-family:var(--ky-sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.woocommerce-tabs ul.tabs li.active a{border-bottom:2px solid var(--ky-guld)}

/* ============ Kurv, kasse & beskeder ============ */
.woocommerce-message,.woocommerce-info{border-top-color:var(--ky-guld);background:var(--ky-varmhvid);color:var(--ky-kul)}
.woocommerce-message a.button{margin-left:8px}
table.shop_table{border:1px solid var(--ky-sten);border-radius:0}
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select{
  border:1px solid var(--ky-sten);border-radius:0;background:var(--ky-varmhvid);padding:12px 14px}
input:focus,textarea:focus{border-color:var(--ky-guld);outline:none}

/* ============ Forside-sektioner (front-page.php) ============ */
/* Forsiden: fjern topluft og lad hero/kategori/nyhedsbrev gaa i fuld skaermbredde */
.home .site-content{padding-top:0}
.home .content-area,.home .site-main{margin-bottom:0}
.ky-hero,.ky-kat,.ky-nyhedsbrev{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ky-hero{text-align:center;padding:110px 24px 90px;background:linear-gradient(180deg,var(--ky-varmhvid),var(--ky-elfenben))}
.ky-over{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--ky-guld);margin-bottom:26px}
.ky-hero h1{font-size:clamp(34px,5vw,58px);line-height:1.15;max-width:760px;margin:0 auto 22px}
.ky-hero p{max-width:520px;margin:0 auto 38px;font-size:16px}
.ky-linje{width:56px;height:1px;background:var(--ky-guld);margin:0 auto 30px}
.ky-cta{display:inline-block;background:var(--ky-kul);color:var(--ky-elfenben)!important;text-decoration:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:17px 52px;transition:background .25s}
.ky-cta:hover{background:var(--ky-guld);color:#fff!important}
.ky-section{padding:84px 24px}
.ky-wrap{max-width:1200px;margin:0 auto}
.ky-s-head{text-align:center;margin-bottom:52px}
.ky-s-head .ky-over{margin-bottom:12px}
.ky-s-head h2{font-size:34px}
.ky-kat{background:var(--ky-varmhvid);border-top:1px solid var(--ky-sten);border-bottom:1px solid var(--ky-sten)}
.ky-kat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.ky-flise{background:var(--ky-elfenben);border:1px solid var(--ky-sten);text-align:center;padding:34px 8px;text-decoration:none;color:var(--ky-kul);transition:.25s;display:block}
.ky-flise:hover{border-color:var(--ky-guld);background:var(--ky-sand);color:var(--ky-kul)}
.ky-flise .ky-tegn{font-family:var(--ky-serif);font-size:19px;display:block;margin-bottom:4px}
.ky-flise small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ky-graa)}
.ky-brand{max-width:680px;margin:0 auto;text-align:center}
.ky-brand p{margin-bottom:18px;font-size:15.5px;line-height:1.8}
.ky-tom{max-width:560px;margin:0 auto;text-align:center;border:1px solid var(--ky-sten);background:var(--ky-varmhvid);padding:44px 30px}
.ky-tom p{margin:0;font-size:14.5px}
.ky-nyhedsbrev{background:var(--ky-kul);color:var(--ky-elfenben)}
.ky-nyhedsbrev .ky-over{color:var(--ky-guld-lys)}
.ky-nyhedsbrev h2{color:var(--ky-elfenben)}
.ky-nyhedsbrev p{color:var(--ky-sten)}
.ky-nb-form{display:flex;gap:10px;max-width:440px;margin:26px auto 0}
.ky-nb-form input[type="email"]{flex:1;border:1px solid rgba(250,247,242,.35);background:transparent;color:var(--ky-elfenben);padding:14px 16px}
.ky-nb-form input[type="email"]::placeholder{color:rgba(250,247,242,.55)}
.ky-nb-form .ky-cta{background:var(--ky-guld);border:0;cursor:pointer}
.ky-nb-form .ky-cta:hover{background:var(--ky-guld-lys);color:var(--ky-kul)!important}
/* MailerLite-formularen (shortcode) i nyhedsbrevs-sektionen */
.ky-nb-ml{max-width:440px;margin:26px auto 0}
.ky-nb-ml h3,.ky-nb-ml h4,.ky-nb-ml label{display:none}
.ky-nb-ml p{color:var(--ky-sten);font-size:13px}
.ky-nb-ml input[type="email"],.ky-nb-ml input[type="text"]{width:100%;border:1px solid rgba(250,247,242,.35);background:transparent;color:var(--ky-elfenben);padding:14px 16px;border-radius:0}
.ky-nb-ml input[type="email"]::placeholder{color:rgba(250,247,242,.55)}
.ky-nb-ml button,.ky-nb-ml input[type="submit"]{width:100%;margin-top:10px;background:var(--ky-guld)!important;color:#fff!important;border:0!important;border-radius:0!important;font-size:12px!important;letter-spacing:.22em;text-transform:uppercase;padding:15px 32px;cursor:pointer;transition:background .25s}
.ky-nb-ml button:hover,.ky-nb-ml input[type="submit"]:hover{background:var(--ky-guld-lys)!important;color:var(--ky-kul)!important}
.ky-nb-ml .ml-error,.ky-nb-ml .error{color:#E8B4AC;font-size:12.5px}
.ky-nb-ml .ml-success,.ky-nb-ml .success{color:var(--ky-guld-lys);font-size:14px}

/* ============ Footer ============ */
.site-footer{background:var(--ky-kul);color:var(--ky-sten)}
.site-footer a{color:var(--ky-elfenben)}
.site-footer a:hover{color:var(--ky-guld-lys)}
.site-info{text-align:center;font-size:12px;letter-spacing:.12em}

/* ============ Responsivt ============ */
@media(max-width:900px){
  .ky-kat-grid{grid-template-columns:repeat(3,1fr)}
  .ky-section{padding:56px 18px}
  .ky-hero{padding:70px 20px 60px}
  .ky-nb-form{flex-direction:column}
}
