/*
Theme Name: KoopKnaller Champagne Noir
Theme URI: https://koopknaller.nl
Description: Luxe Champagne Noir child theme voor WooCommerce (Storefront).
Author: KoopKnaller
Version: 1.0.1
Template: storefront
Text Domain: koopknaller-champagne-noir
*/

:root{
  --champagne:#f4efe6;
  --champagne2:#efe6d8;
  --ivory:#fbfaf8;

  --ink:#0b0d12;
  --ink2:#111522;
  --ink3:#171c2b;

  --text:#0f1115;
  --textOnDark:#f6f2ea;
  --muted:#6b7280;
  --mutedOnDark:rgba(246,242,234,.75);

  --line:rgba(15,17,21,.12);
  --lineOnDark:rgba(255,255,255,.12);

  --gold:#b9934a;
  --gold2:#e6d3a7;
  --gold3:#f3e6c7;

  --shadow:0 28px 80px rgba(10,12,16,.24);
  --shadow2:0 16px 38px rgba(10,12,16,.18);
  --shadow3:0 10px 18px rgba(10,12,16,.12);

  --r:22px;
  --r2:16px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

body{
  background:
    radial-gradient(900px 600px at 12% 10%, rgba(185,147,74,.18), transparent 55%),
    radial-gradient(800px 520px at 95% 18%, rgba(11,13,18,.18), transparent 55%),
    radial-gradient(700px 520px at 55% 110%, rgba(230,211,167,.26), transparent 60%),
    linear-gradient(180deg, var(--ivory), var(--champagne) 40%, var(--champagne2));
  color: var(--text);
  letter-spacing: .01em;
}

.site-main .col-full,
.site-content .col-full,
.col-full { max-width: 1180px !important; }

@keyframes kk_shimmer{
  0%{ transform: translateX(-120%) rotate(10deg); opacity:0; }
  20%{ opacity:.65; }
  100%{ transform: translateX(120%) rotate(10deg); opacity:0; }
}
@keyframes kk_sparkle{
  0%,100%{ opacity:.12; transform: translateY(0) scale(1); }
  50%{ opacity:.32; transform: translateY(-6px) scale(1.04); }
}
.kk-glitter{ position:relative; overflow:hidden; }
.kk-glitter:before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 30%, rgba(243,230,199,.20) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 40%, rgba(185,147,74,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 65%, rgba(230,211,167,.20) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 70%, rgba(243,230,199,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 18%, rgba(230,211,167,.14) 0 1px, transparent 2px);
  background-size: 160px 160px;
  animation: kk_sparkle 6s var(--ease) infinite;
  pointer-events:none;
  mix-blend-mode: soft-light;
}

.kk-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(11,13,18,.78);
  border-bottom:1px solid var(--lineOnDark);
  backdrop-filter: blur(14px);
}
.kk-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
.kk-brand{
  display:flex; gap:12px; align-items:center;
  color: var(--textOnDark);
  text-decoration:none;
}
.kk-brand strong{
  font-weight:900;
  letter-spacing:-.03em;
  font-size:18px;
  line-height:1.05;
}
.kk-brand small{
  display:block;
  font-weight:650;
  color: var(--mutedOnDark);
  margin-top:2px;
  font-size:12px;
}
.kk-mark{
  width:44px; height:44px; border-radius:18px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.25), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, #07080c, #1a1f2f);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
  border: 1px solid rgba(185,147,74,.22);
}
.kk-mark:after{
  content:"";
  position:absolute; inset:-60%;
  background: radial-gradient(circle at 55% 35%, rgba(185,147,74,.95), transparent 45%);
  transform: rotate(18deg);
  opacity:.65;
}

.kk-nav .menu{
  display:flex; gap:8px; flex-wrap:wrap;
  list-style:none; margin:0; padding:0;
}
.kk-nav .menu a{
  display:inline-flex;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  color: var(--mutedOnDark);
  font-weight:850;
  transition:.18s var(--ease);
  text-decoration:none;
}
.kk-nav .menu a:hover{
  color: var(--textOnDark);
  border-color: rgba(185,147,74,.28);
  background: rgba(185,147,74,.10);
}

.kk-search{
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(185,147,74,.22);
  background: rgba(17,21,34,.55);
  border-radius: 999px;
  padding:10px 12px;
  box-shadow: 0 16px 38px rgba(0,0,0,.22);
  color: var(--textOnDark);
  min-width: 280px;
}
.kk-search input[type="search"]{
  border:0; outline:0; background:transparent; width:100%;
  font-weight:650; color: var(--textOnDark);
}
.kk-search ::placeholder{ color: rgba(246,242,234,.55); }

.button, button, input[type="submit"], .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  position:relative;
  border: 1px solid rgba(185,147,74,.28) !important;
  background: linear-gradient(135deg, rgba(185,147,74,.12), rgba(230,211,167,.10)) !important;
  color: var(--ink) !important;
  font-weight: 950 !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  cursor:pointer;
  box-shadow: var(--shadow3);
  transition: .18s var(--ease);
  overflow:hidden;
}
.button:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
}
.button:before, button:before, input[type="submit"]:before, .wp-block-button__link:before,
.woocommerce a.button:before, .woocommerce button.button:before, .woocommerce input.button:before{
  content:"";
  position:absolute;
  inset:-60% -60%;
  background: linear-gradient(90deg, transparent, rgba(243,230,199,.60), rgba(185,147,74,.55), transparent);
  transform: translateX(-120%) rotate(10deg);
  animation: kk_shimmer 4.6s var(--ease) infinite;
  pointer-events:none;
  opacity:0;
}
.button:hover:before, button:hover:before, input[type="submit"]:hover:before, .wp-block-button__link:hover:before,
.woocommerce a.button:hover:before, .woocommerce button.button:hover:before, .woocommerce input.button:hover:before{
  opacity:.85;
}

.kk-btn-dark,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt{
  border: 1px solid rgba(185,147,74,.28) !important;
  background: linear-gradient(135deg, #07080c, #1a2030) !important;
  color: var(--textOnDark) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.30);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover{
  filter: brightness(1.03);
}

.kk-card, .woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review,
.woocommerce-checkout #customer_details, .woocommerce .woocommerce-message, .woocommerce .woocommerce-info{
  background: rgba(255,255,255,.88);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
}

.woocommerce ul.products li.product{
  background: rgba(255,255,255,.90);
  border:1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow3);
  padding: 14px !important;
  overflow:hidden;
  transition:.18s var(--ease);
}
.woocommerce ul.products li.product:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
}
.woocommerce ul.products li.product img{
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-weight: 950;
  letter-spacing:-.02em;
  margin-top: 12px;
}
.woocommerce ul.products li.product .price{
  font-weight: 950;
  color: var(--ink);
}
.woocommerce ul.products li.product .price del{ color: var(--muted); opacity:.75; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }

.single-product div.product{
  background: rgba(255,255,255,.90);
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  padding: 18px;
}
.single-product div.product .product_title{
  font-weight: 950;
  letter-spacing:-.03em;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color: var(--muted);
  font-weight:650;
}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select{
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  padding:12px 12px;
  box-shadow: var(--shadow3);
  outline:none;
}

.kk-footer{
  margin-top: 40px;
  padding: 28px 0 44px;
  border-top: 1px solid rgba(11,13,18,.12);
  color: var(--muted);
}

.kk-drawer-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.46);
  opacity:0; pointer-events:none;
  transition:.18s var(--ease);
  z-index:9998;
}
.kk-drawer{
  position:fixed; top:0; right:0; height:100%;
  width:min(420px, 92vw);
  background:
    radial-gradient(600px 420px at 20% 10%, rgba(185,147,74,.18), transparent 55%),
    linear-gradient(180deg, rgba(11,13,18,.96), rgba(17,21,34,.94));
  border-left:1px solid rgba(185,147,74,.16);
  box-shadow: -28px 0 80px rgba(0,0,0,.42);
  transform: translateX(102%);
  transition:.24s var(--ease);
  z-index:9999;
  color: var(--textOnDark);
  display:flex; flex-direction:column;
}
.kk-drawer.is-open{ transform: translateX(0); }
.kk-drawer-overlay.is-open{ opacity:1; pointer-events:auto; }
.kk-drawer-head{
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.kk-drawer-head strong{
  font-family: Fraunces, ui-serif, Georgia, serif;
  letter-spacing:-.02em;
  font-size:20px;
  font-weight:700;
}
.kk-drawer-body{ padding:14px 16px; overflow:auto; }
.kk-drawer-foot{
  margin-top:auto;
  padding:14px 16px 16px;
  border-top:1px solid rgba(255,255,255,.10);
}
.kk-drawer-total{ display:flex; justify-content:space-between; font-weight:950; margin-bottom:10px; }
.kk-drawer .woocommerce-mini-cart__empty-message{ color: rgba(246,242,234,.72); font-weight:650; }

@media (max-width: 980px){
  .kk-nav{ display:none; }
  .kk-search{ display:none; }
}