/*
Theme Name: Kreativt Klotter – Block
Author: Ellen / Kreativt Klotter
Description: A modular WordPress block theme for Kreativt Klotter. Built for visual editing in the WordPress Site Editor.
Version: 2.8.1
Text Domain: kreativt-klotter
*/


:root{--kk-sand:#F5F1E8;--kk-alt:#ECE6DA;--kk-surface:#FAF7F0;--kk-ink:#22201D;--kk-muted:#5E584F;--kk-border:#DDD6C8;--kk-coral:#D94E3C;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--kk-sand);color:var(--kk-ink);font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto}
.wp-site-blocks{padding:0}
.wp-block-group,.wp-block-cover,.wp-block-columns,.wp-block-gallery{margin-block-start:0}
.kk-shell{max-width:1160px;margin:0 auto;padding-left:40px;padding-right:40px}
.kk-section{padding-top:112px;padding-bottom:112px}
.kk-section--tight{padding-top:80px;padding-bottom:80px}
.kk-section--alt{background:var(--kk-alt)}
.kk-eyebrow{font-size:12px!important;font-weight:700!important;letter-spacing:.11em!important;text-transform:uppercase;color:var(--kk-coral)!important;margin:0 0 18px!important}
.kk-eyebrow:before{content:"";display:inline-block;width:20px;height:1.5px;background:currentColor;vertical-align:middle;margin:0 9px 3px 0}
.kk-hero{min-height:calc(100vh - 76px);display:flex;align-items:center}
.kk-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center;width:100%}
.kk-hero h1{font-size:clamp(42px,4.4vw,64px);line-height:1.06;letter-spacing:-.045em;margin:0 0 30px;font-weight:800}
.kk-lead{font-size:19px;line-height:1.65;color:var(--kk-muted);max-width:650px}
.kk-button-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.kk-button .wp-element-button{display:inline-flex!important;align-items:center;justify-content:center;padding:15px 23px!important;border-radius:999px!important;font-size:15px!important;font-weight:700!important;text-decoration:none!important}.kk-button--dark .wp-element-button{background:var(--kk-ink);color:var(--kk-sand)}.kk-button--outline .wp-element-button{border:1px solid var(--kk-border);color:var(--kk-ink);background:transparent}
.kk-art-frame{background:var(--kk-surface);border:1px solid var(--kk-border);border-radius:22px;padding:28px;box-shadow:0 12px 36px rgba(34,32,29,.035)}
.kk-art-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;border:0}
.kk-heading{font-size:clamp(32px,3.6vw,50px);line-height:1.08;letter-spacing:-.035em;font-weight:800;margin:0 0 22px}
.kk-body{font-size:18px;line-height:1.7;color:var(--kk-muted)}
.kk-intro{max-width:760px}
.kk-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.kk-process-card{padding-top:0}
.kk-process-image{background:var(--kk-surface);border:1px solid var(--kk-border);border-radius:16px;padding:16px;margin-bottom:22px}
.kk-process-image img{display:block;width:100%;height:auto!important;aspect-ratio:3/4;object-fit:cover;border-radius:7px;max-width:none}

.kk-process-card h3{font-size:22px;line-height:1.15;margin:8px 0 8px;letter-spacing:-.025em}
.kk-process-card p{margin:0;color:var(--kk-muted);font-size:16px;line-height:1.6}
.kk-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:46px}
.kk-product-card{background:var(--kk-surface);border:1px solid var(--kk-border);border-radius:16px;overflow:hidden}
.kk-product-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.kk-product-info{padding:18px 18px 20px}
.kk-product-info h3{font-size:18px;line-height:1.2;margin:0 0 7px;letter-spacing:-.02em}
.kk-product-info p{font-size:14px;color:var(--kk-muted);margin:0 0 18px}
.kk-product-price{font-size:16px;font-weight:800}
.kk-section-head{display:flex;justify-content:space-between;gap:30px;align-items:end}
.kk-link{font-weight:700;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.kk-instagram-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:42px;align-items:start}
.kk-instagram-grid figure{margin:0;aspect-ratio:1/1;overflow:hidden;border-radius:10px}
.kk-instagram-grid figure img{display:block;width:100%;height:100%!important;object-fit:cover;border-radius:0;max-width:none}
.kk-story{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
.kk-story-image{margin:0!important;width:100%}
.kk-story-image img{display:block;width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:4/5;object-fit:cover;border-radius:20px}
.kk-story-copy h2{font-size:clamp(32px,3.6vw,50px);line-height:1.08;letter-spacing:-.035em;margin:0 0 30px;font-weight:800}
.kk-story-copy p{font-size:18px;line-height:1.72;color:var(--kk-muted);margin:0 0 22px}
.kk-contact{display:flex;align-items:center;justify-content:space-between;gap:40px;border-top:1px solid var(--kk-border);border-bottom:1px solid var(--kk-border)}
.kk-contact h2{margin:0;font-size:clamp(29px,3.1vw,44px);letter-spacing:-.035em;line-height:1.08}
.kk-footer{border-top:1px solid var(--kk-border);padding:52px 0}
.kk-footer-inner{display:flex;justify-content:space-between;gap:30px;align-items:flex-start}
.kk-wordmark{font-size:20px;font-weight:800;letter-spacing:-.035em;text-decoration:none}
.kk-wordmark:after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--kk-coral);margin-left:6px;vertical-align:middle;margin-bottom:2px}
.kk-footer p{color:var(--kk-muted);margin:10px 0 0;font-size:14px}
.kk-footer-nav{display:flex;gap:24px;flex-wrap:wrap;font-size:14px}
.kk-shop-intro{padding-top:80px;padding-bottom:40px}
.kk-shop-filters{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0 40px}
.kk-filter{border:1px solid var(--kk-border);border-radius:999px;padding:10px 16px;background:transparent;font:inherit;font-size:14px}
.kk-filter .wp-element-button{border:1px solid var(--kk-border);border-radius:999px;padding:10px 16px;background:transparent;font:inherit;font-size:14px}.kk-filter.is-active .wp-element-button{background:var(--kk-ink);color:var(--kk-sand);border-color:var(--kk-ink)}
.kk-quote{font-size:clamp(26px,3.4vw,44px)!important;line-height:1.12!important;letter-spacing:-.035em!important;font-weight:800!important;max-width:760px}
@media (max-width:900px){.kk-shell{padding-left:24px;padding-right:24px}.kk-hero{min-height:auto;padding-top:72px}.kk-hero-grid,.kk-story{grid-template-columns:1fr;gap:42px}.kk-process-grid{grid-template-columns:1fr 1fr}.kk-product-grid{grid-template-columns:1fr 1fr}.kk-instagram-grid{grid-template-columns:repeat(3,1fr)}.kk-contact{display:block}.kk-contact .kk-button-row{margin-top:24px}.kk-footer-inner{display:block}}
@media (max-width:600px){
.kk-section{padding-top:72px;padding-bottom:72px}
.kk-hero h1{font-size:38px}.kk-lead{font-size:17px}.kk-art-frame{padding:16px}
.kk-section-head{display:block}.kk-section-head .kk-link{display:inline-block;margin-top:20px}

/* Klotterfavoriter: two smaller cards per row rather than one huge one */
.kk-product-grid{grid-template-columns:1fr 1fr;gap:14px}
.kk-product-card h3{font-size:15px}
.kk-product-info{padding:12px 12px 14px}
.kk-product-price{font-size:15px}

/* Carousels. No negative margins: items align with the text column and the
   next one peeks in, which is the affordance. */
.kk-carousel{display:flex!important;grid-template-columns:none!important;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;gap:12px;
  /* span the full viewport so cards scroll out to the edge uncut, but keep
     24px of padding so the first card lines up with the text column */
  margin-left:-24px;margin-right:-24px;
  padding:0 24px 4px;
  scroll-padding-left:24px}
.kk-carousel::-webkit-scrollbar{display:none}
.kk-carousel>*{scroll-snap-align:start;flex:0 0 74%}
.kk-carousel>*:last-child{margin-right:24px}
.kk-instagram-grid.kk-carousel>figure{flex:0 0 60%}

/* Arrow controls, injected by JS only when a carousel actually overflows */
.kk-carousel-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.kk-carousel-btn{width:42px;height:42px;border-radius:999px;
  background:var(--kk-surface);border:1px solid var(--kk-border);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  padding:0;transition:opacity .15s ease}
.kk-carousel-btn svg{width:16px;height:16px;stroke:var(--kk-ink);
  stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kk-carousel-btn[disabled]{opacity:.3;cursor:default}
}

.kk-shop-embed{margin-top:46px}
.kk-shop-embed__empty{font-size:18px;line-height:1.7;color:var(--kk-muted);max-width:620px}
.kk-shop-embed__empty a{font-weight:700;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;color:var(--kk-coral)}
.shopify-buy__collection-products{margin:0!important}
.kk-footer-instagram a,.kk-footer-instagram .wp-block-navigation-item__content{color:var(--kk-coral)!important;font-weight:700}

/* Sticky header. Semi-transparent Mjuk Sand with a blur so content reads
   through it without muddying the type. z-index 100 keeps it above the
   hero artwork frame. */
/* Sticky header.
   WordPress wraps every template part in <div class="wp-block-template-part">.
   That wrapper is exactly as tall as the header, so making the header itself
   sticky gives it no distance to stick along — confirmed in the console:
   position was sticky, no bad ancestors, and it still didn't move.
   The wrapper has to be the sticky element instead. :has() targets only the
   wrapper containing our header, so the footer's wrapper is unaffected. */
.wp-block-template-part:has(> .kk-site-header){position:sticky;top:0;z-index:100}
.admin-bar .wp-block-template-part:has(> .kk-site-header){top:32px}
@media screen and (max-width:782px){
  .admin-bar .wp-block-template-part:has(> .kk-site-header){top:46px}}

/* Fallback for browsers without :has() — make every template-part wrapper a
   sticky candidate, harmless because only the header sets top/z-index. */
@supports not selector(:has(*)){
  .wp-block-template-part{position:sticky;top:0;z-index:100}
  .wp-block-template-part:last-of-type{position:static}
}

.kk-site-header{position:static;background-color:rgba(245,241,232,.88);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px)}
@supports not (backdrop-filter:blur(12px)){.kk-site-header{background-color:#F5F1E8}}
html{scroll-behavior:smooth;scroll-padding-top:88px}
.kk-section[id]{scroll-margin-top:88px}

/* Mobile navigation — full screen, no scrolling.
   WordPress nests the list four levels deep:
     .__responsive-container            (the overlay)
       .__responsive-close
         .__responsive-dialog
           .__responsive-container-content
             ul.__container
   Every one of those has to be a full-height flex column, otherwise flex:1 on
   the items has no height to divide and they all collapse onto one line. */
.wp-block-navigation__responsive-container.is-menu-open{
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;bottom:0!important;
  width:100%!important;height:100dvh!important;
  background-color:#F5F1E8!important;opacity:1!important;
  display:flex!important;flex-direction:column!important;
  padding:0!important;overflow:hidden!important;z-index:9999!important}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content{
  display:flex!important;flex-direction:column!important;
  align-items:stretch!important;
  flex:1 1 auto!important;width:100%!important;max-width:none!important;
  min-height:0!important;margin:0!important;padding:0!important}

/* leave room for the close button above the first row */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-close{padding-top:76px!important}

.wp-block-navigation__responsive-container.is-menu-open
  ul.wp-block-navigation__container{
  display:flex!important;flex-direction:column!important;
  align-items:stretch!important;
  flex:1 1 auto!important;width:100%!important;
  min-height:0!important;margin:0!important;padding:0!important;
  gap:0!important;list-style:none!important}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item{
  display:flex!important;flex:1 1 0!important;
  width:100%!important;min-height:0!important;
  border-top:1px solid #DDD6C8}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:last-child{border-bottom:1px solid #DDD6C8}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;height:100%!important;
  font-size:18px!important;font-weight:600!important;letter-spacing:-.01em!important;
  color:#22201D!important;padding:0 24px!important;margin:0!important;
  text-align:center!important;text-decoration:none!important}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:active{background-color:#ECE6DA}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open{
  color:#22201D!important;width:26px;height:26px}
.wp-block-navigation__responsive-container-close{
  position:fixed!important;top:24px!important;right:22px!important;z-index:10000!important}
.admin-bar .wp-block-navigation__responsive-container.is-menu-open{
  top:32px!important;height:calc(100dvh - 32px)!important}
.admin-bar .wp-block-navigation__responsive-container-close{top:56px!important}
@media screen and (max-width:782px){
  .admin-bar .wp-block-navigation__responsive-container.is-menu-open{
    top:46px!important;height:calc(100dvh - 46px)!important}
  .admin-bar .wp-block-navigation__responsive-container-close{top:70px!important}}