@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Barlow:wght@700;800&family=Figtree:wght@700;800&display=swap');

:root{
--wp--preset--color--base: #FFFFFF;
--wp--preset--color--contrast: #111111;
--wp--preset--color--accent-1: #762CF2;
--wp--preset--color--accent-2: #A858E8;
--wp--preset--color--dark-grey: #1C1C1C;
--wp--preset--font-family--inter: Inter, sans-serif;
--wp--preset--font-family--barlow: Barlow, sans-serif;
--wp--preset--font-family--figtree: Figtree, sans-serif;
--wp--preset--font-size--xx-small: 7px;
--wp--preset--font-size--x-small: 10px;
--wp--preset--font-size--small: 14px;
--wp--preset--font-size--medium: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.179), 16px);
--wp--preset--font-size--medium-large: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.536), 22px);
--wp--preset--font-size--large: clamp(35px, 2.188rem + ((1vw - 3.2px) * 1.786), 55px);
--wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 3.75), 70px);
--wp--preset--font-size--xx-large: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 5.857), 100px);
--wp--preset--spacing--20: 10px;
--wp--preset--spacing--30: 20px;
--wp--preset--spacing--40: 30px;
--wp--preset--spacing--50: clamp(30px, 5vw, 50px);
--wp--preset--spacing--60: clamp(30px, 7vw, 70px);
--wp--preset--spacing--70: clamp(50px, 7vw, 90px);
--wp--preset--spacing--80: clamp(70px, 10vw, 140px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

body{
font-family: var(--wp--preset--font-family--inter);
color: var(--wp--preset--color--contrast);
background: var(--wp--preset--color--base);
font-size: var(--wp--preset--font-size--medium);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}

a{ color:inherit; text-decoration:none }
img{ max-width:100%; height:auto; display:block }

.has-global-padding{
  padding-right: var(--wp--preset--spacing--50);
padding-left: var(--wp--preset--spacing--50);
}

.alignfull{ width:100%; max-width:100% }
.alignwide{ max-width:1200px; margin-left:auto; margin-right:auto }

.is-layout-flex{
display: flex;
  flex-wrap: wrap;
}
.is-layout-flex.is-nowrap{ flex-wrap:nowrap }

.is-layout-constrained{
max-width: 1200px;
 margin-left: auto;
margin-right: auto;
}

/* ═══ HEADER ═══ */

.header{
background: var(--wp--preset--color--contrast);
  position: relative;
z-index: 999;
}

.header .alignwide{
  display:flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
   padding-top: 0;
padding-bottom: 0;
min-height: 60px;
}

.header-logo{
  flex-shrink: 0;
}
.header-logo a{ display:inline-block }
.header-logo img{
width: 160px;
    height: auto;
filter: brightness(0) invert(1);
}

.header-nav{
display: flex;
  align-items: center;
gap: 0;
}

.header-nav a{
font-family: var(--wp--preset--font-family--figtree);
font-size: var(--wp--preset--font-size--small);
  font-weight: 800;
letter-spacing: 1px;
line-height: 60px;
text-transform: uppercase;
color: var(--wp--preset--color--base);
  padding: 0 14px;
transition: color .2s;
white-space: nowrap;
}
.header-nav a:hover{
color: var(--wp--preset--color--accent-1);
}

.cart-toggle{
background: var(--wp--preset--color--accent-1);
border: none;
  color: #fff;
cursor: pointer;
font-family: var(--wp--preset--font-family--figtree);
font-weight: 800;
font-size: 13px;
  padding: 8px 18px;
border-radius: 9999px;
letter-spacing: .5px;
margin-left: 10px;
  position: relative;
white-space: nowrap;
}
.cart-toggle:hover{ background: var(--wp--preset--color--accent-2) }
.cart-count{
background: #fff;
  color: var(--wp--preset--color--accent-1);
font-size: 11px;
width: 20px; height:20px;
border-radius: 50%;
  display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
font-weight: 800;
}

.hamburger-btn{
display: none;
background: none;
border: none;
  color: var(--wp--preset--color--base);
cursor: pointer;
font-family: var(--wp--preset--font-family--figtree);
font-weight: 800;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
  padding: 8px 0;
}
.hamburger-btn span{
display: block;
width: 24px;
height: 2px;
  background: var(--wp--preset--color--base);
margin-bottom: 5px;
}
.hamburger-btn span:last-of-type{ margin-bottom:8px }

/* ═══ HERO COVER ═══ */

.homepage-cover{
position: relative;
min-height: 430px;
  display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
  background: var(--wp--preset--color--contrast);
}

.homepage-cover .cover-bg{
position: absolute;
inset: 0;
  width: 100%;
height: 100%;
object-fit: cover;
object-position: 51% 38%;
z-index: 0;
}

.homepage-cover .cover-overlay{
position: absolute;
inset: 0;
background: #111111;
opacity: 0.55;
 z-index: 1;
}

.homepage-cover .cover-content{
position: relative;
z-index: 2;
  text-align: center;
max-width: 1440px;
padding: 60px var(--wp--preset--spacing--50);
width: 100%;
}

h2.cover-text{
font-family: var(--wp--preset--font-family--barlow);
  font-size: var(--wp--preset--font-size--x-large);
font-weight: 700;
color: var(--wp--preset--color--base);
letter-spacing: -0.1px;
  line-height: 1.125;
text-transform: uppercase;
}

.cover-sub{
color: rgba(255,255,255,.85);
  font-size: var(--wp--preset--font-size--medium-large);
margin-top: 18px;
font-weight: 400;
}

.visually-hidden{
position: absolute !important;
  width: 1px; height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
  border: 0;
font-size: var(--wp--preset--font-size--xx-small);
}

/* ═══ SECTION HEADING PATTERN ═══ */

.sec-header{
display: grid;
grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 20px;
margin-bottom: 50px;
align-items: end;
}
.sec-header .section-col-hed{
grid-column: span 5;
font-family: var(--wp--preset--font-family--barlow);
  font-size: var(--wp--preset--font-size--large);
font-weight: 800;
text-transform: uppercase;
  line-height: 1;
}
.sec-header .col-spacer{ grid-column: span 2 }
.sec-header .section-col-text{
grid-column: span 5;
font-size: var(--wp--preset--font-size--medium-large);
  line-height: 1.3;
}
.sec-header .section-col-text.align-r{ text-align:right }

/* ═══ PRODUCTS GRID ═══ */

.products-section{
padding: var(--wp--preset--spacing--80) 0;
}

.prodGrid{
display: grid;
grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.prodCard{
background: #fafafa;
  border-radius: 12px;
overflow: hidden;
transition: box-shadow .25s;
position: relative;
  display: flex;
flex-direction: column;
}
.prodCard:hover{ box-shadow: 0 8px 30px rgba(0,0,0,.1) }

.prodCard .prod-img-wrap{
aspect-ratio: 1/1;
overflow: hidden;
  background: #f0eff2;
position: relative;
}
.prodCard .prod-img-wrap img{
width: 100%;
height: 100%;
  object-fit: cover;
transition: transform .4s;
}
.prodCard:hover .prod-img-wrap img{ transform:scale(1.04) }

.prodCard .prod-info{
padding: 20px 22px 24px;
  flex: 1;
display: flex;
flex-direction: column;
}
.prodCard .prod-cat{
font-size: 11px;
text-transform: uppercase;
  letter-spacing: 1.2px;
color: var(--wp--preset--color--accent-1);
font-weight: 700;
margin-bottom: 6px;
}
.prodCard .prod-name{
font-family: var(--wp--preset--font-family--figtree);
  font-size: 18px;
font-weight: 700;
margin-bottom: 6px;
line-height: 1.25;
}
.prodCard .prod-desc{
font-size: 13px;
  color: #555;
line-height: 1.55;
margin-bottom: 14px;
flex: 1;
}
.prodCard .prod-bottom{
display: flex;
align-items: center;
  justify-content: space-between;
margin-top: auto;
}
.prodCard .prod-price{
font-family: var(--wp--preset--font-family--barlow);
  font-size: 22px;
font-weight: 800;
}
.prodCard .prod-price .price-idr{ font-size:13px; font-weight:600; color:#888; margin-left:2px }

.btn-add-cart{
background: var(--wp--preset--color--accent-1);
  color: #fff;
border: none;
padding: 10px 20px;
border-radius: 9999px;
  font-size: 13px;
font-weight: 800;
cursor: pointer;
letter-spacing: .3px;
transition: background .2s;
}
.btn-add-cart:hover{ background: var(--wp--preset--color--accent-2) }
.btn-add-cart:disabled{
background: #ccc;
cursor: not-allowed;
  color: #888;
}

.out-of-stock-badge{
position: absolute;
top: 14px; right: 14px;
  background: #e53e3e;
color: #fff;
font-size: 11px;
font-weight: 700;
  padding: 4px 12px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: .5px;
}

/* ═══ ABOUT STORE ═══ */

.about-store-section{
padding: var(--wp--preset--spacing--80) 0;
  background: var(--wp--preset--color--dark-grey);
color: var(--wp--preset--color--base);
}
.about-store-grid{
display: grid;
  grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-store-img{
border-radius: 12px;
  overflow: hidden;
aspect-ratio: 4/3;
}
.about-store-img img{
width: 100%; height:100%;
  object-fit: cover;
}
.about-store-text h3{
font-family: var(--wp--preset--font-family--barlow);
  font-size: var(--wp--preset--font-size--large);
font-weight: 800;
text-transform: uppercase;
line-height: 1.05;
  margin-bottom: 24px;
}
.about-store-text p{
font-size: 15px;
  line-height: 1.7;
color: rgba(255,255,255,.8);
margin-bottom: 14px;
}

/* ═══ ARTICLE CTA ═══ */

.article-cta-section{
padding: var(--wp--preset--spacing--70) 0;
  background: linear-gradient(135deg, var(--wp--preset--color--accent-1) 0%, var(--wp--preset--color--accent-2) 100%);
color: #fff;
text-align: center;
}
.article-cta-section h3{
font-family: var(--wp--preset--font-family--barlow);
  font-size: var(--wp--preset--font-size--large);
font-weight: 800;
text-transform: uppercase;
margin-bottom: 14px;
}
.article-cta-section p{
font-size: 17px;
  max-width: 580px;
margin: 0 auto 28px;
line-height: 1.6;
opacity: .92;
}
.btn-article{
display: inline-block;
background: #fff;
  color: var(--wp--preset--color--accent-1);
padding: 16px 36px;
border-radius: 9999px;
font-weight: 800;
  font-size: 14px;
letter-spacing: .5px;
text-transform: uppercase;
transition: transform .2s, box-shadow .2s;
}
.btn-article:hover{
transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}

/* ═══ HIRING BANNER ═══ */

.hiring-section{
padding: var(--wp--preset--spacing--60) 0;
  background: #f7f5fb;
}
.hiring-inner{
display: flex;
  align-items: center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.hiring-inner h3{
font-family: var(--wp--preset--font-family--barlow);
  font-size: clamp(22px, 3vw, 36px);
font-weight: 800;
text-transform: uppercase;
}
.hiring-inner p{
font-size: 15px;
  color: #555;
max-width: 420px;
line-height: 1.6;
}
.btn-hiring{
display: inline-block;
background: var(--wp--preset--color--contrast);
  color: #fff;
padding: 14px 30px;
border-radius: 9999px;
font-weight: 800;
  font-size: 13px;
letter-spacing: .5px;
text-transform: uppercase;
transition: background .2s;
}
.btn-hiring:hover{ background: var(--wp--preset--color--accent-1) }

/* ═══ TEAM ═══ */

.team-section{
padding: var(--wp--preset--spacing--80) 0;
}
.team-grid{
display: grid;
  grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.team-card{
text-align: center;
}
.team-card .team-photo{
width: 200px; height:200px;
  border-radius: 50%;
overflow: hidden;
margin: 0 auto 20px;
  background: #f0eff2;
}
.team-card .team-photo img{
width: 100%; height:100%;
object-fit: cover;
}
.team-card .team-name{
font-family: var(--wp--preset--font-family--figtree);
  font-size: 20px;
font-weight: 800;
margin-bottom: 4px;
}
.team-card .team-role{
font-size: 13px;
  color: var(--wp--preset--color--accent-1);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
  margin-bottom: 10px;
}
.team-card .team-bio{
font-size: 14px;
color: #555;
  line-height: 1.6;
max-width: 300px;
margin: 0 auto;
}

/* ═══ HOW TO ORDER ═══ */

.howto-section{
padding: var(--wp--preset--spacing--80) 0;
  background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
.howto-steps{
display: grid;
  grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-top: 50px;
}
.step-card{
text-align: center;
  padding: 30px 20px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
}
.step-num{
font-family: var(--wp--preset--font-family--barlow);
  font-size: 52px;
font-weight: 800;
color: var(--wp--preset--color--accent-1);
line-height: 1;
  margin-bottom: 16px;
}
.step-card h4{
font-family: var(--wp--preset--font-family--figtree);
  font-size: 18px;
font-weight: 800;
margin-bottom: 10px;
}
.step-card p{
font-size: 14px;
  color: rgba(255,255,255,.6);
line-height: 1.6;
}

/* ═══ TRUST ═══ */

.trust-section{
padding: var(--wp--preset--spacing--80) 0;
}
.trust-cards{
display: grid;
  grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 50px;
}
.trustCard{
background: #fafafa;
  border-radius: 12px;
padding: 36px 28px;
text-align: center;
  transition: box-shadow .25s;
}
.trustCard:hover{ box-shadow: 0 6px 24px rgba(0,0,0,.08) }
.trustCard .trust-icon{
font-size: 40px;
margin-bottom: 18px;
}
.trustCard h4{
font-family: var(--wp--preset--font-family--figtree);
  font-size: 18px;
font-weight: 800;
margin-bottom: 10px;
}
.trustCard p{
font-size: 14px;
  color: #555;
line-height: 1.6;
}
.trust-img-row{
margin-top: 50px;
  border-radius: 12px;
overflow: hidden;
aspect-ratio: 21/9;
}
.trust-img-row img{
width: 100%; height:100%;
  object-fit: cover;
}

/* ═══ CART DRAWER ═══ */

.cart-drawer{
position: fixed;
top: 0; right: -420px;
  width: 400px;
max-width: 90vw;
height: 100vh;
background: #fff;
  z-index: 10000;
box-shadow: -4px 0 30px rgba(0,0,0,.15);
transition: right .35s ease;
display: flex;
  flex-direction: column;
}
.cart-drawer.open{ right:0 }
.cart-drawer-header{
display: flex;
  justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid #eee;
}
.cart-drawer-header h3{
font-family: var(--wp--preset--font-family--figtree);
  font-size: 20px;
font-weight: 800;
}
.cart-close{
background: none; border:none;
  font-size: 28px;
cursor: pointer;
color: #333;
line-height: 1;
}
.cart-items{
flex: 1;
  overflow-y: auto;
padding: 16px 24px;
}
.cart-item{
display: flex;
gap: 14px;
  padding: 14px 0;
border-bottom: 1px solid #f0f0f0;
align-items: center;
}
.cart-item-img{
width: 60px; height:60px;
  border-radius: 8px;
overflow: hidden;
background: #f0eff2;
flex-shrink: 0;
}
.cart-item-img img{ width:100%; height:100%; object-fit:cover }
.cart-item-info{ flex:1 }
.cart-item-info .ci-name{
font-weight: 700;
  font-size: 14px;
margin-bottom: 2px;
}
.cart-item-info .ci-price{
font-size: 13px;
  color: #888;
}
.cart-item-qty{
display: flex;
  align-items: center;
gap: 8px;
}
.cart-item-qty button{
width: 28px; height:28px;
  border-radius: 50%;
border: 1px solid #ddd;
background: #fff;
  cursor: pointer;
font-size: 16px;
font-weight: 700;
display: flex;
  align-items: center;
justify-content: center;
}
.cart-item-qty span{
font-weight: 700;
  font-size: 14px;
min-width: 20px;
text-align: center;
}
.cart-footer{
padding: 20px 24px;
  border-top: 1px solid #eee;
}
.cart-total{
display: flex;
  justify-content: space-between;
font-family: var(--wp--preset--font-family--barlow);
font-size: 22px;
  font-weight: 800;
margin-bottom: 16px;
}
.btn-checkout{
width: 100%;
background: var(--wp--preset--color--accent-1);
  color: #fff;
border: none;
padding: 16px;
border-radius: 9999px;
  font-size: 15px;
font-weight: 800;
cursor: pointer;
letter-spacing: .5px;
text-transform: uppercase;
  transition: background .2s;
}
.btn-checkout:hover{ background: var(--wp--preset--color--accent-2) }
.cart-empty-msg{
text-align: center;
  padding: 60px 20px;
color: #999;
font-size: 15px;
}
.cart-overlay{
position: fixed;
inset: 0;
  background: rgba(0,0,0,.4);
z-index: 9999;
display: none;
}
.cart-overlay.vis{ display:block }

/* ═══ CHECKOUT MODAL ═══ */

.checkout-modal{
position: fixed;
inset: 0;
  z-index: 11000;
display: none;
align-items: center;
justify-content: center;
  background: rgba(0,0,0,.5);
}
.checkout-modal.active{ display:flex }

.checkout-box{
background: #fff;
  border-radius: 16px;
max-width: 500px;
width: 92%;
padding: 40px 36px;
  max-height: 90vh;
overflow-y: auto;
position: relative;
}
.checkout-box h3{
font-family: var(--wp--preset--font-family--barlow);
  font-size: 28px;
font-weight: 800;
margin-bottom: 24px;
text-transform: uppercase;
}
.checkout-box .form-row{
margin-bottom: 16px;
}
.checkout-box label{
display: block;
  font-size: 13px;
font-weight: 600;
margin-bottom: 5px;
color: #444;
}
.checkout-box input,
.checkout-box textarea{
width: 100%;
  padding: 12px 14px;
border: 1.5px solid #ddd;
border-radius: 8px;
font-family: var(--wp--preset--font-family--inter);
  font-size: 15px;
transition: border-color .2s;
}
.checkout-box input:focus,
.checkout-box textarea:focus{
outline: none;
  border-color: var(--wp--preset--color--accent-1);
}
.checkout-box textarea{ resize:vertical; min-height:70px }
.checkout-box .form-err{
color: #e53e3e;
  font-size: 12px;
margin-top: 4px;
display: none;
}
.checkout-box .form-err.show{ display:block }

.btn-submit-order{
width: 100%;
  background: var(--wp--preset--color--accent-1);
color: #fff;
border: none;
padding: 16px;
  border-radius: 9999px;
font-size: 15px;
font-weight: 800;
cursor: pointer;
  text-transform: uppercase;
letter-spacing: .5px;
margin-top: 10px;
transition: background .2s;
}
.btn-submit-order:hover{ background: var(--wp--preset--color--accent-2) }
.close-modal{
position: absolute;
top: 16px; right: 20px;
  background: none;
border: none;
font-size: 26px;
cursor: pointer;
  color: #666;
}

.thankyou-content{
text-align: center;
  padding: 20px 0;
}
.thankyou-content .check-circle{
width: 80px; height:80px;
  border-radius: 50%;
background: #48bb78;
color: #fff;
  font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
  margin: 0 auto 24px;
}
.thankyou-content h3{
font-family: var(--wp--preset--font-family--barlow);
  font-size: 32px;
font-weight: 800;
margin-bottom: 12px;
text-transform: uppercase;
}
.thankyou-content p{
font-size: 15px;
  color: #555;
line-height: 1.6;
margin-bottom: 8px;
}
.btn-continue{
display: inline-block;
  margin-top: 24px;
background: var(--wp--preset--color--accent-1);
color: #fff;
padding: 14px 32px;
  border-radius: 9999px;
font-weight: 800;
font-size: 14px;
border: none;
  cursor: pointer;
text-transform: uppercase;
letter-spacing: .5px;
}

/* ═══ FOOTER ═══ */

.footer{
background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}

.footer-main{
  padding-top: var(--wp--preset--spacing--60);
padding-bottom: var(--wp--preset--spacing--50);
max-width: 1200px;
margin: 0 auto;
}

.footer-columns{
display: grid;
grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 20px;
}

.footer-legal-column{
grid-column: span 3;
}
.footer-legal-column h4.footer-nav-header{
font-size: 16px;
  margin-bottom: 15px;
font-weight: 700;
font-family: var(--wp--preset--font-family--figtree);
}
.footer-legal-column a{
display: block;
color: var(--wp--preset--color--base);
  margin-bottom: 10px;
font-size: 13px;
line-height: 1.6;
}
.footer-legal-column a:hover{ text-decoration:underline }

.footer-spacer{ grid-column:span 4 }

.footer-column-right{
grid-column: span 5;
text-align: right;
  display: flex;
flex-direction: column;
align-items: flex-end;
}

.footer-logo{
width: 180px;
    height: auto;
filter: brightness(0) invert(1);
}

.footer-button{
display: inline-block;
margin-top: var(--wp--preset--spacing--70);
  border: 2px solid var(--wp--preset--color--base);
border-radius: 0;
padding: 15px 23px;
font-size: 12px;
  text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 800;
color: var(--wp--preset--color--base);
  background: transparent;
transition: background .2s, color .2s;
cursor: pointer;
}
.footer-button:hover{
background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}

.footer-address{
grid-column: 1 / -1;
  font-size: 14px;
margin-top: var(--wp--preset--spacing--40);
line-height: 1.8;
  color: rgba(255,255,255,.75);
}
.footer-address a{ color:rgba(255,255,255,.9) }
.footer-address a:hover{ text-decoration:underline }

.footer-imprint{
grid-column: 1 / -1;
  font-size: 13px;
line-height: 1.7;
color: rgba(255,255,255,.5);
  margin-top: 10px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.1);
}

.footer-copywrite-text{
grid-column: 1 / -1;
  font-size: 13px;
margin-top: 20px;
line-height: 1.7;
  color: rgba(255,255,255,.55);
}

/* ═══ RESPONSIVE ═══ */

@media(max-width: 991px){
.header-nav{ display:none }
.hamburger-btn{ display:block }

.sec-header{ grid-template-columns:1fr }
.sec-header .section-col-hed,
.sec-header .col-spacer,
  .sec-header .section-col-text{ grid-column:span 1 }
.sec-header .col-spacer{ display:none }
.sec-header .section-col-text.align-r{ text-align:left }

.prodGrid{ grid-template-columns: repeat(2,1fr) }
.about-store-grid{ grid-template-columns:1fr }
.team-grid{ grid-template-columns:1fr }
.howto-steps{ grid-template-columns: repeat(2,1fr) }
.trust-cards{ grid-template-columns:1fr }
  
.footer-columns{ grid-template-columns:1fr }
.footer-legal-column,
.footer-spacer,
.footer-column-right,
.footer-copywrite-text,
  .footer-address,
.footer-imprint{
grid-column: span 1;
text-align: left;
align-items: flex-start;
  }
.footer-spacer{ display:none }
.footer-logo{ width:140px }
}

@media(max-width: 767px){
h2.cover-text{
  font-size: clamp(28px, 6vw, 42px);
}
.homepage-cover{ min-height:320px }
  .header-logo img{ width:130px }
.prodGrid{ grid-template-columns:1fr }
.howto-steps{ grid-template-columns:1fr }
}

@media(max-width: 480px){
.homepage-cover{ min-height: 260px }
h2.cover-text{ font-size:26px }
}

.header-nav.mob-open{
display:flex !important;
  flex-direction:column;
position:absolute;
top:60px; left:0; right:0;
background: var(--wp--preset--color--contrast);
  padding: 20px var(--wp--preset--spacing--50);
z-index:998;
}
.header-nav.mob-open a{
line-height: 44px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* ═══ COOKIE CONSENT ═══ */

.cookie-bar{
position: fixed;
bottom: 0; left:0; right:0;
  background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
z-index: 99999;
  padding: 18px var(--wp--preset--spacing--50);
display: none;
}
.cookie-bar.show{ display:block }
.cookie-bar-inner{
max-width: 1200px;
  margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
  gap: 20px;
flex-wrap: wrap;
}
.cookie-bar-text{
font-size: 13px;
  color: rgba(255,255,255,.8);
line-height: 1.6;
flex: 1;
min-width: 280px;
}
.cookie-bar-text a{
color: var(--wp--preset--color--accent-2);
  text-decoration: underline;
}
.cookie-bar-btns{
display: flex;
  gap: 10px;
flex-shrink: 0;
}
.btn-cookie-accept{
background: var(--wp--preset--color--accent-1);
  color: #fff;
border: none;
padding: 10px 24px;
border-radius: 9999px;
  font-size: 13px;
font-weight: 800;
cursor: pointer;
letter-spacing: .3px;
}
.btn-cookie-accept:hover{ background:var(--wp--preset--color--accent-2) }
.btn-cookie-decline{
background: transparent;
  color: rgba(255,255,255,.6);
border: 1px solid rgba(255,255,255,.2);
padding: 10px 20px;
  border-radius: 9999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.btn-cookie-decline:hover{ color:#fff; border-color:rgba(255,255,255,.4) }