:root{
  --rose-50:#FFF6F6; --rose-100:#FBECEC; --rose-200:#F4C4C4; --rose-300:#EEB8B8; --rose-400:#EAB0B0; --rose-500:#E8A9A9; --rose-600:#D68585; --rose-700:#C46F6F; --rose-800:#A95959; --rose-900:#8C3C3C;
  --cocoa-300:#C7A2A2; --cocoa-400:#B08A8A; --cocoa-500:#926868; --cocoa-600:#7A5151; --cocoa-700:#5C3A3A; --cocoa-800:#4A2C2C; --cocoa-900:#3F2727;
  --sand-25:#FCF8F0; --sand-50:#F9F4EC; --sand-100:#F3EADD; --sand-200:#E7DDD2; --sand-300:#D8CCC0;

  --color-bg:#F9F4EC;
  --color-surface:#FFFFFF;
  --color-surface-alt:var(--sand-25);
  --color-border:var(--sand-200);
  --color-border-strong:var(--sand-300);
  --color-text:var(--cocoa-700);
  --color-text-muted:var(--cocoa-600);
  --color-heading:var(--cocoa-800);
  --color-primary:var(--rose-500);
  --color-primary-hover:var(--rose-600);
  --color-primary-ghost:var(--rose-100);
  --color-on-primary:#FFFFFF;
  --color-link:#B14B5E;
  --color-link-hover:var(--rose-900);
  --color-focus-ring:rgba(140,60,60,.45);
  --grad-brand:linear-gradient(45deg, var(--rose-500), var(--rose-600));
  --radius:16px;

  --gap:16px;          /* unified gap for grid and sidebar */
  --control-h:44px;    /* unified control height */
  --control-bg:var(--color-surface);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:radial-gradient(22px 22px at 22px 22px, rgba(232,169,169,.08), transparent 42%), radial-gradient(22px 22px at 0 0, rgba(249,244,236,.45), transparent 44%);
  background-size:46px 46px; background-blend-mode:multiply;

  /* sticky footer layout */
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto} /* pushes footer to the bottom when content is short */

a{color:var(--color-link); text-decoration:none}
a:hover{color:var(--color-link-hover); text-decoration:underline}
img{display:block;max-width:100%;height:auto}
button{font:inherit}
.container{width:min(1300px, 96vw); margin-inline:auto} /* Increased container width */
.fw-700{font-weight:700} .fw-800{font-weight:800}

/* Header with pastel pink background matching logo */
header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(6px);
  background:#fef2f3; /* Very light pastel pink */
  border-bottom:2px solid #f7b3bb; /* Soft pink outline */
}
header .container{width:min(1300px, 98vw)} /* less left/right margin in header */

/* Updated topbar layout: logo left, nav center, cart right */
.topbar{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
}

.logo{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  justify-self: start;
}
.logo .yarn{
  width:28px; 
  height:28px; 
  border-radius:50%; 
  background:radial-gradient(circle at 30% 30%, var(--rose-50), var(--rose-300) 60%, var(--rose-600)); 
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.05); 
  position:relative;
}
.logo .yarn:after{
  content:"";
  position:absolute; 
  inset:8px; 
  border:2px dashed rgba(0,0,0,.08); 
  border-radius:50%;
}

/* Center the main navigation */
.main-nav{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-self: center;
}
.main-nav a{
  display:inline-block; 
  padding:8px 12px; 
  border-radius:999px; 
  background:rgba(255, 255, 255, 0.8); 
  color:var(--color-text); 
  font-weight:600; 
  border:1px solid #f7b3bb;
  transition:all 0.2s ease;
}
.main-nav a:hover{
  background:#f7b3bb;
  color:var(--cocoa-800);
  text-decoration:none;
}

/* Move actions (cart) to the right */
.actions{
  display: flex;
  gap: 10px;
  justify-self: end;
}

/* Updated header button to match */
.actions .btn{
  cursor:pointer; 
  border:1px solid #f7b3bb; 
  background:rgba(255, 255, 255, 0.8); 
  padding:10px 14px; 
  border-radius:999px; 
  font-weight:600; 
  color:var(--color-text);
  transition:all 0.2s ease;
}
.actions .btn:hover{
  background:#f7b3bb;
  color:var(--cocoa-800);
}

.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-focus-ring)}

/* Controls row (categories + search) */
.pill{display:flex; align-items:center; gap:10px; background:var(--control-bg); border:1px solid var(--color-border); border-radius:999px; padding:0 12px; min-height:var(--control-h)}
.search-pill{min-width:260px; flex:1}
.pill input{border:0; outline:0; background:transparent; width:100%; height:calc(var(--control-h) - 2px); line-height:calc(var(--control-h) - 2px)}
.pill:focus-within{box-shadow:0 0 0 3px var(--color-focus-ring)}
.pill svg{stroke:var(--color-text-muted)}

.controls-row{grid-column:1 / -1; display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0}
.seg{display:flex; gap:6px; border:1px solid var(--color-border); border-radius:999px; padding:4px; background:var(--control-bg); min-height:var(--control-h)}
.seg button{display:flex; align-items:center; height:calc(var(--control-h) - 8px); padding:0 14px; border:0; border-radius:999px; background:transparent; color:var(--color-text)}
.seg button[aria-pressed="true"], .seg button:hover{background:var(--color-primary-ghost)}
.controls-row #resultCount{margin-left:auto}

/* Main content layout - using more available width */
.content{
  display:grid;
  grid-template-columns: 280px 1fr; /* Fixed sidebar, flexible product area */
  gap: 24px; /* Increased gap */
  padding:18px 0 52px;
}

/* Updated sidebar as white rectangle with rounded corners */
.sidebar{
  align-self:start;
  position:sticky;
  top:74px;
  display:flex;
  flex-direction:column;
  gap:14px;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid var(--color-border);
}
.filter-block{display:flex; flex-direction:column; gap:8px}
.filter-label{font-weight:800; color:var(--color-heading)}
.field{display:flex; align-items:center; gap:10px; border:1px solid var(--color-border); border-radius:12px; padding:10px 12px; color:var(--color-text); background:var(--color-surface)}
.field svg{stroke:var(--color-text-muted)}
#priceOut{font-weight:700}
.btn-reset{cursor:pointer; border:1px solid var(--color-border); background:var(--color-surface); padding:10px 12px; border-radius:10px; font-weight:700; color:var(--color-text)}

/* Product area takes remaining space */
.product-area{min-width:0; width: 100%;}
.grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.card-prod{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column}
.media{aspect-ratio:4/3; background:linear-gradient(180deg, var(--color-surface), var(--color-surface-alt)); position:relative}
.media img{width:100%; height:100%; object-fit:cover}
.chip{position:absolute; top:10px; left:10px; padding:6px 10px; background:var(--cocoa-900); color:#fff; font-size:12px; border-radius:999px; opacity:.9}
.meta{padding:12px 14px 14px}
.title{font-weight:700; font-size:15px; margin:0 0 6px; color:var(--color-heading)}
.price{font-weight:800; color:var(--cocoa-900)}
.sub{color:var(--color-text-muted); font-size:13px}
.row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.btn-add{margin-top:10px; background:var(--grad-brand); color:var(--color-on-primary); border:0; padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer}
.btn-add:hover{filter:brightness(1.05)}
.btn-add:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-focus-ring)}

/* Cart drawer */
#cart{position:fixed; inset:0; pointer-events:none; z-index:9999}
#cart.open{pointer-events:auto}
.cart-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .2s}
#cart.open .cart-backdrop{opacity:1; visibility:visible}
.cart-panel{position:fixed; top:0; right:0; width:min(420px, 92vw); height:100dvh; background:var(--color-surface); border-left:1px solid var(--color-border); box-shadow:-12px 0 24px rgba(0,0,0,.08); transform:translateX(100%); transition:transform .25s; display:flex; padding-top:env(safe-area-inset-top)}
#cart.open .cart-panel{transform:translateX(0)}
.cart-body{display:flex; flex-direction:column; width:100%}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--color-border)}
.cart-head h2{margin:0}
.cart-items{flex:1; overflow:auto; padding:10px}
.item{display:grid; grid-template-columns:72px 1fr auto; gap:10px; align-items:center; padding:10px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); margin-bottom:10px}
.qty{display:flex; align-items:center; gap:6px}
.qty button{width:28px; height:28px; border-radius:8px; border:1px solid var(--color-border); background:var(--color-surface); cursor:pointer}
.cart-foot{padding:16px; border-top:1px solid var(--color-border); background:linear-gradient(180deg, var(--color-surface), var(--color-surface-alt))}
.total-row{display:flex; justify-content:space-between; font-weight:800; margin:8px 0 14px; color:var(--color-heading)}
.btn-checkout{width:100%; background:var(--grad-brand); color:var(--color-on-primary); border:0; padding:12px; border-radius:12px; font-weight:800; cursor:pointer}

/* Prefooter (copyright) */
.prefooter{padding:6px 0 10px; background:transparent; border:0}
.legal-copy{text-align:center; margin:0; font-size:.8rem; color:var(--color-text-muted)}

/* Footer - Updated to match header style */
.site-footer{
  background:#fef2f3; /* Same light pastel pink as header */
  border-top:2px solid #f7b3bb; /* Same pink outline as header */
  padding:18px 0 24px
}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; align-items:start}
.section-label{margin:0 0 10px; font-size:1rem; font-weight:800; color:var(--color-heading)}

/* Updated legal links to match header navigation style */
.legal-links{display:flex; gap:12px 16px; flex-wrap:wrap}
.legal-links a{
  display:inline-block; 
  padding:6px 12px; 
  border-radius:999px; 
  background:rgba(255, 255, 255, 0.8); 
  color:var(--color-text); 
  font-weight:600; 
  border:1px solid #f7b3bb;
  transition:all 0.2s ease;
}
.legal-links a:hover{
  background:#f7b3bb;
  color:var(--cocoa-800);
  text-decoration:none;
}

/* Updated social buttons to match header button style */
.social{display:flex; gap:10px; flex-wrap:wrap}
.social .btn{
  padding:8px 12px;
  cursor:pointer; 
  border:1px solid #f7b3bb; 
  background:rgba(255, 255, 255, 0.8); 
  border-radius:999px; 
  font-weight:600; 
  color:var(--color-text);
  transition:all 0.2s ease;
  text-decoration: none;
}
.social .btn:hover{
  background:#f7b3bb;
  color:var(--cocoa-800);
  text-decoration: none;
}

/* Responsive adjustments */
@media (max-width:1200px){
  header .container{width:min(1200px, 98vw)}
  .grid{
    grid-template-columns: repeat(3, 1fr); /* 3 columns on medium screens */
  }
}

@media (max-width:900px){
  .main-nav{display:none}
  .content{
    grid-template-columns: 1fr; /* Stack sidebar and products on mobile */
    gap: 16px;
  }
  .sidebar{
    position: static;
    order: 2;
  }
  .product-area{
    order: 1;
  }
  .topbar{
    grid-template-columns: auto 1fr; /* Logo and cart only on mobile */
  }
  .main-nav{
    display: none;
  }
}

@media (max-width:768px){
  .grid{
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
  }
}

@media (max-width:600px){
  .controls-row{gap:10px}
  .search-pill{min-width:200px}
  .grid{
    grid-template-columns: 1fr; /* 1 column on mobile */
    gap: 16px;
  }
}

/* Logo dans la topbar */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Adaptez la hauteur visuelle du logo sans déformer l'image */
.logo img {
  height: 44px;      /* hauteur d'affichage souhaitée dans la barre */
  width: auto;       /* conserve le ratio 1450x356 */
  max-width: 100%;   /* évite tout débordement sur petits écrans */
  object-fit: contain;
}

@media (max-width: 640px) {
  .logo img { height: 32px; }
}

/* ===================== */
/* Checkout page styles  */
/* ===================== */

.card{border:1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); padding:16px; box-shadow: 0 2px 12px rgba(0,0,0,.06)}
.checkout-grid{display:grid; grid-template-columns: 1.7fr 1fr; gap:24px}
@media (max-width: 900px){ .checkout-grid{grid-template-columns:1fr;} }

/* Buttons commonly used in checkout */
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--color-border); background:var(--color-surface); border-radius:999px; padding:10px 14px; cursor:pointer}
.btn-primary{background: var(--grad-brand); color: var(--color-on-primary); border-color: transparent}
.btn-primary:hover{filter:brightness(1.05)}
.btn-danger{background:#c62828; color:#fff; border-color:#c62828}

/* Simple text helpers */
.muted{opacity:.7}
.sub{color:var(--color-text-muted)}

/* Form fields layout */
.field{display:grid; gap:6px; margin-bottom:12px}
input[type=text],input[type=email],input[type=tel],input[type=number],textarea,select{
  border:1px solid var(--color-border); border-radius:12px; padding:10px; font:inherit; background:var(--color-surface)
}

/* Summary list */
.items{display:grid; gap:12px; margin:12px 0}
.item{display:grid; grid-template-columns:60px 1fr auto; gap:12px; align-items:center}
.thumb{width:60px;height:60px;border-radius:12px;object-fit:cover;background:var(--color-surface-alt);border:1px solid var(--color-border)}
.totals{display:grid; gap:8px}
.total-row{display:flex; justify-content:space-between}

/* Misc */
.alert{padding:12px;border-radius:12px;background:var(--color-surface-alt);border:1px solid var(--color-border)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Mini yarn buddy beside the logo */
/* Mini yarn buddy beside the logo */
.mini-yarn{
  width:44px;
  height:44px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  /* prevent accidental drags/selections */
  user-select:none;
}
.mini-yarn svg{ width:100%; height:100%; overflow:visible }
.mini-yarn .texHost,
.mini-yarn .texHost canvas{ width:100%; height:100%; display:block }

@media (max-width:640px){
  .mini-yarn{ width:32px; height:32px; }
}