/*
Theme Name: Kaparda
Theme URI: https://kaparda.fr
Author: Kaparda
Description: Thème sur mesure minimaliste pour kaparda.fr — grille produit façon Yeezy, mode Boutique / Off (liste d'attente), transition de zoom entre grille et fiche produit.
Version: 1.0
Text Domain: kaparda
Requires PHP: 7.4
*/

:root{
  --bg:#ffffff;
  --fg:#0a0a0a;
  --dim:#9a9a9a;
  --active:#2e3a59;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--fg);font-family:'IBM Plex Mono',monospace;font-size:12px;}
a{color:inherit;}
button{background:none;border:none;font-family:inherit;cursor:pointer;color:inherit;font-size:12px;}
svg{display:block;}
img{max-width:100%;display:block;}

/* enable native cross-document view transitions (Chromium) — everything else just degrades to a normal page load */
@view-transition{
  navigation: auto;
}

header.kp-header{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px 28px;
  position:fixed;top:0;left:0;right:0;z-index:30;
  background:var(--bg);
}
body{padding-top:70px;}
header.kp-header .plus{justify-self:start;}
header.kp-header .toggle{justify-self:center;display:flex;gap:18px;letter-spacing:0.04em;}
header.kp-header .toggle a.active{color:var(--active);}
header.kp-header .toggle a:not(.active){color:var(--dim);text-decoration:none;}
header.kp-header .cart{justify-self:end;color:inherit;position:relative;}
header.kp-header .cart svg{width:22px;height:22px;}

/* catégories affichées en sidebar (plus en dropdown) */
#catSidebar{
  position:fixed;top:0;left:0;width:190px;height:100vh;
  background:var(--bg);border-right:1px solid #eee;z-index:15;
  padding:90px 24px 24px;display:flex;flex-direction:column;gap:16px;
  overflow-y:auto;transform:translateX(-100%);transition:transform .3s ease;
}
#catSidebar.open{transform:translateX(0);}
#catSidebar a{letter-spacing:0.04em;color:var(--dim);text-decoration:none;}
#catSidebar a.active{color:var(--fg);}
body.sidebar-open #grid{margin-left:190px;}
#grid{transition:margin-left .3s ease;}

#grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:32px 56px 100px;}
.tile{display:flex;flex-direction:column;align-items:center;padding:38px 22px;text-decoration:none;color:inherit;}
.tile.kp-oos{opacity:0.5;}
.tile .swatch{
  width:100%;aspect-ratio:1/1;background:#f4f4f4;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  color:#c9c9c9;font-size:11px;letter-spacing:0.04em;
}
.tile .swatch img{width:100%;height:100%;object-fit:cover;}
.tile .code{margin-top:18px;letter-spacing:0.04em;}
#empty{display:none;text-align:center;padding:60px 20px;color:var(--dim);}

footer.kp-footer{
  display:flex;justify-content:center;flex-wrap:wrap;gap:20px;
  padding:24px 20px 40px;border-top:1px solid #eee;
}
footer.kp-footer a{color:var(--dim);letter-spacing:0.04em;text-decoration:none;}

/* single product */
.kp-product{min-height:80vh;position:relative;padding-bottom:100px;}
.kp-product .topline{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;}
.kp-product .topline a{color:var(--fg);}
.kp-product .topline button{color:var(--fg);position:relative;}
.kp-product .topline button svg{width:22px;height:22px;}

.kp-cart-count{
  margin-left:6px;font-size:11px;color:var(--fg);
}
.kp-cart-count.kp-hidden{display:none;}
header.kp-header .cart, .kp-product .topline button{display:flex;align-items:center;}
.kp-product .stage{display:flex;align-items:center;justify-content:center;height:56vh;position:relative;max-width:520px;margin:0 auto;}
.kp-product .stage .swatch-lg{
  width:260px;aspect-ratio:1/1;background:#f4f4f4;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;color:#c9c9c9;font-size:12px;letter-spacing:0.04em;
}
.kp-product .stage .swatch-lg img{width:100%;height:100%;object-fit:cover;}
.kp-product .arrow{position:absolute;top:50%;transform:translateY(-50%);text-decoration:none;color:var(--fg);background:none;border:none;cursor:pointer;padding:6px;}
.kp-product .arrow.prev{left:0;}
.kp-product .arrow.next{right:0;}
.kp-dots{display:flex;gap:6px;justify-content:center;margin-top:14px;}
.kp-dots span{width:5px;height:5px;border-radius:50%;background:#d8d8d8;cursor:pointer;}
.kp-dots span.active{background:var(--fg);}
.kp-product .info{text-align:center;margin-top:38px;display:flex;flex-direction:column;gap:32px;align-items:center;}
.kp-product .info .code{font-size:17px;font-weight:500;letter-spacing:0.02em;}

.kp-buy-row{display:flex;align-items:center;justify-content:center;gap:16px;}
.kp-buy-row .price{color:var(--fg);font-size:18px;font-weight:500;}
.kp-buy-row button.kp-add{color:var(--fg);}
.kp-buy-row button.kp-add svg{width:22px;height:22px;}
.kp-buy-row button.kp-add:disabled{color:#ddd;cursor:not-allowed;}

.kp-sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:#000;color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;
}
.kp-sticky-buy .kp-sticky-price{font-size:14px;letter-spacing:0.02em;}
.kp-sticky-buy button{background:none;border:none;color:#fff;font-family:inherit;font-size:12px;letter-spacing:0.08em;cursor:pointer;}
.kp-sticky-buy button:disabled{color:#666;cursor:not-allowed;}

/* tiroir panier — plein ecran */
#cartDrawer{
  position:fixed;top:0;right:-100%;width:100%;max-width:100%;height:100vh;
  background:var(--bg);z-index:60;
  transition:right .35s ease;padding:24px;overflow-y:auto;
  display:flex;flex-direction:column;
}
#cartDrawer.open{right:0;}
.cartDrawer-head{display:flex;justify-content:space-between;align-items:center;letter-spacing:0.08em;margin-bottom:16px;padding-top:6px;}
.cartDrawer-account{font-size:11px;color:var(--dim);letter-spacing:0.04em;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #f2f2f2;}
.cartDrawer-account a{color:var(--fg);text-decoration:none;}
.cartDrawer-account span{margin:0 6px;}
#cartBackdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.25);z-index:55;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
#cartBackdrop.open{opacity:1;pointer-events:auto;}
#cartDrawerBody{font-size:12px;max-width:640px;margin:0 auto;width:100%;}

/* ligne produit du panier : image | nom + prix, puis taille, puis quantite +/- en dessous */
#cartDrawerBody ul.woocommerce-mini-cart{list-style:none;display:flex;flex-direction:column;gap:26px;}
#cartDrawerBody ul.woocommerce-mini-cart li{
  display:grid;grid-template-columns:76px 1fr;gap:18px;
  border-bottom:1px solid #f2f2f2;padding-bottom:22px;position:relative;
}
#cartDrawerBody ul.woocommerce-mini-cart img{width:76px;height:90px;object-fit:cover;grid-row:1 / span 3;}
#cartDrawerBody .kp-line-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
#cartDrawerBody .kp-line-top a{text-decoration:none;color:var(--fg);font-size:13px;}
#cartDrawerBody .kp-line-price{white-space:nowrap;color:var(--fg);}
#cartDrawerBody .kp-line-size{color:var(--dim);font-size:11px;margin-top:6px;letter-spacing:0.04em;}
#cartDrawerBody .kp-qty{display:flex;align-items:center;gap:14px;margin-top:12px;}
#cartDrawerBody .kp-qty button{border:1px solid #ddd;width:24px;height:24px;line-height:1;color:var(--fg);}
#cartDrawerBody .kp-qty button:disabled{opacity:.3;cursor:not-allowed;}
#cartDrawerBody .kp-qty .kp-qty-val{min-width:14px;text-align:center;}
#cartDrawerBody .remove{position:absolute;top:0;right:0;color:var(--dim);text-decoration:none;font-size:14px;}

#cartDrawerBody .total{margin-top:28px;font-weight:500;font-size:14px;}
#cartDrawerBody .buttons{display:flex;flex-direction:column;gap:10px;margin-top:20px;max-width:340px;margin-left:auto;margin-right:auto;}
#cartDrawerBody a.button{
  display:block;text-align:center;padding:12px;border:1px solid var(--fg);
  color:var(--fg);text-decoration:none;letter-spacing:0.04em;
}
#cartDrawerBody a.checkout{background:var(--fg);color:#fff;}

.kp-attr{width:100%;max-width:300px;display:flex;flex-direction:column;gap:6px;align-items:center;}
.kp-attr .label{font-size:10px;letter-spacing:0.08em;color:var(--fg);}
.kp-sizes{display:flex;gap:18px;overflow-x:auto;max-width:280px;padding:2px 0;}
.kp-sizes button{color:var(--dim);padding:2px 0;white-space:nowrap;}
.kp-sizes button.active{color:var(--fg);border-bottom:1px solid var(--fg);}
.kp-sizes button:disabled{color:#e2e2e2;cursor:not-allowed;}
.kp-sizes button.kp-oos-value{color:#ccc;text-decoration:line-through;cursor:not-allowed;}

.kp-info{width:100%;max-width:300px;padding-top:6px;}
.kp-info summary{cursor:pointer;list-style:none;appearance:none;-webkit-appearance:none;display:flex;justify-content:center;gap:6px;color:var(--fg);letter-spacing:0.04em;}
.kp-info summary::-webkit-details-marker{display:none;}
.kp-info summary::marker{content:"";}
.kp-info[open] summary{color:var(--fg);}
.kp-info .body{margin-top:12px;color:var(--dim);line-height:1.6;font-size:11px;text-align:left;}

.kp-product{transition:transform .25s ease, opacity .25s ease;}
.kp-product.kp-leaving-down{transform:translateY(36px);opacity:0;}
.kp-product.kp-leaving-up{transform:translateY(-36px);opacity:0;}

/* off mode — waitlist / site en construction */
#offMode{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;}
#offMode .mark{letter-spacing:0.12em;font-weight:500;font-size:14px;margin-bottom:28px;}
#offMode .kicker{color:var(--dim);letter-spacing:0.05em;margin-bottom:10px;}
#offMode h1{font-size:18px;letter-spacing:0.02em;font-weight:500;max-width:360px;line-height:1.6;}
#offMode form{display:flex;border-bottom:1px solid var(--fg);margin-top:36px;width:100%;max-width:300px;padding-bottom:8px;}
#offMode input{flex:1;border:none;background:none;font-family:inherit;font-size:12px;outline:none;color:var(--fg);}
#offMode input::placeholder{color:var(--dim);}
#offMode .confirm,#offMode .error{margin-top:16px;color:var(--dim);display:none;}
#offMode footer{margin-top:60px;}

.kp-admin-banner{
  background:#111;color:#fff;text-align:center;font-size:11px;letter-spacing:0.04em;
  padding:8px;position:sticky;top:0;z-index:999;
}
.kp-admin-banner a{color:#8fd0ff;text-decoration:underline;}

@media (max-width:900px){
  #grid{grid-template-columns:repeat(3,1fr);padding:20px 24px 70px;}
  .tile{padding:28px 16px;}
  body.sidebar-open #grid{margin-left:0;} /* sur mobile la sidebar recouvre, elle ne pousse pas */
  #catSidebar{width:78%;max-width:260px;box-shadow:2px 0 24px rgba(0,0,0,0.08);}
}
@media (max-width:520px){
  #grid{grid-template-columns:repeat(2,1fr);padding:24px 20px 70px;row-gap:12px;}
  .tile{padding:32px 14px;}
  .kp-product .stage{height:38vh;}
  .kp-product .stage .swatch-lg{width:190px;}
  .kp-product .arrow{display:none;} /* remplacées par le swipe sur mobile */
  .kp-product .info{margin-top:22px;gap:14px;}
  #catSidebar{padding:90px 20px 20px;}
}

.kp-back-cart{display:block;background:none;border:none;color:var(--dim);font-family:inherit;font-size:11px;letter-spacing:0.04em;cursor:pointer;margin-bottom:16px;padding:0;}
.kp-checkout-fallback{display:block;text-align:center;margin-top:16px;font-size:10px;color:var(--dim);}
#cartDrawerBody form.woocommerce-checkout{display:block;}
#cartDrawerBody .col2-set,#cartDrawerBody .col-1,#cartDrawerBody .col-2{width:100%;float:none;}
#cartDrawerBody input,#cartDrawerBody select,#cartDrawerBody textarea{width:100%;font-family:inherit;font-size:12px;padding:8px;border:1px solid #ddd;margin-bottom:8px;box-sizing:border-box;}
#cartDrawerBody label{font-size:11px;color:var(--dim);display:block;margin-bottom:2px;}
#cartDrawerBody #place_order,#cartDrawerBody button[type="submit"]{width:100%;background:#000;color:#fff;border:none;padding:14px;letter-spacing:0.05em;cursor:pointer;font-family:inherit;}

/* ===== Pages WooCommerce natives (panier, commande, mon compte) — pas de template dédié,
   donc on neutralise le violet et l'absence d'espacement par defaut de WooCommerce ici ===== */
.woocommerce, .woocommerce-cart .entry-content, .woocommerce-checkout .entry-content, .woocommerce-account .entry-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 28px 100px;
  font-family: 'IBM Plex Mono', monospace;
}
.woocommerce table.shop_table { border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px 10px; border-bottom: 1px solid #eee; font-size: 12px; }
.woocommerce a.remove { color: var(--dim) !important; background: none !important; }

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #place_order, .woocommerce a.checkout-button, .woocommerce .wc-forward {
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #place_order:hover, .woocommerce a.checkout-button:hover {
  background: #222 !important;
  color: #fff !important;
}
.woocommerce a, .woocommerce a:visited { color: var(--fg); }
.woocommerce ::placeholder { color: var(--dim); }