/* Same header styling as index.html storefront-r2-db.css R1.9/R1.10 */
/* R1.9 — production-style store header restored.
   No catalogue, category or product-family rules are changed. */

.store-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 0;
}

.store-header .brand {
  display: block;
  flex: 0 0 auto;
}

.store-header .brand img {
  display: block;
  width: 185px;
  height: auto;
}

.store-nav {
  display: flex;
  gap: 18px;
  margin-left: auto;
}

.store-nav a {
  color: var(--store-ink);
  text-decoration: none;
  font-weight: 800;
}

.store-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-switch {
  display: flex;
  gap: 5px;
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid #ccd7b5;
  border-radius: 7px;
  color: var(--store-accent-dark);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 900;
}

.lang-switch a.active {
  border-color: var(--store-accent-dark);
  background: var(--store-accent-dark);
  color: #fff;
}

.cart-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  background: var(--store-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
}

.cart-count {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--store-accent-dark);
}

@media (max-width: 700px) {
  .store-header {
    gap: 10px;
    padding: 14px 0;
  }

  .store-header .brand img {
    width: 145px;
  }

  .store-nav {
    display: none;
  }

  .store-actions {
    gap: 7px;
    margin-left: auto;
  }

  .lang-switch a {
    min-width: 32px;
    min-height: 32px;
    padding: 4px 7px;
  }

  .cart-pill {
    padding: 8px 11px;
  }
}


/* R1.10 — mobile storefront header: keep navigation and cart inside viewport. */
@media (max-width: 700px) {
  .store-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "nav nav";
    gap: 10px 12px;
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .store-header .brand {
    grid-area: brand;
    min-width: 0;
  }

  .store-header .central-brand strong {
    font-size: clamp(1rem, 5vw, 1.15rem);
  }

  .store-header .central-brand span {
    font-size: .66rem;
    letter-spacing: .055em;
    white-space: normal;
  }

  .store-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: auto auto;
    gap: 6px;
    margin-left: 0;
    min-width: 0;
  }

  .lang-switch {
    display: flex;
    gap: 3px;
  }

  .lang-switch a {
    min-width: 30px;
    min-height: 32px;
    padding: 4px 5px;
  }

  .cart-pill {
    min-width: 0;
    padding: 8px 10px;
    white-space: nowrap;
  }

  .store-nav {
    grid-area: nav;
    display: flex;
    width: 100%;
    gap: 6px 14px;
    margin: 2px 0 0;
    padding: 9px 0 2px;
    overflow-x: auto;
    border-top: 1px solid var(--store-line, #e5dfd3);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .store-nav::-webkit-scrollbar { display: none; }

  .store-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .84rem;
  }
}

@media (max-width: 470px) {
  .store-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "actions"
      "nav";
  }

  .store-actions {
    width: 100%;
    grid-template-columns: 1fr auto;
  }

  .lang-switch { justify-self: start; }
  .cart-pill { justify-self: end; }
}

.central-brand{display:flex!important;flex-direction:column;text-decoration:none;line-height:1.05;color:inherit;min-width:0}.central-brand strong{font-size:1.15rem}.central-brand span{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin-top:.3rem}

/* Protect narrow screens from overflowing navigation and wordmark */
.store-header{min-width:0}.store-header .central-brand{min-width:0}.store-header .store-actions{min-width:0}
@media(max-width:470px){.store-header .store-actions{grid-template-columns:1fr auto}.store-header .store-nav{min-width:0}}

/* R3: two intentional variants; shared typography, spacing and mobile rules. */
.store-header .central-brand{display:flex!important;flex-direction:column;line-height:1.05;text-decoration:none;color:inherit}
.store-header .central-brand strong{font-size:1.15rem}
.store-header .central-brand span{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin-top:.3rem}
.cfb-checkout-header .cfb-continue{font-weight:800;text-decoration:none;color:inherit;white-space:nowrap}
.cfb-checkout-header .store-actions{margin-left:auto}
@media(max-width:700px){
 .cfb-checkout-header{grid-template-areas:"brand actions";grid-template-columns:minmax(0,1fr) auto}
 .cfb-checkout-header .store-actions{display:flex;flex-wrap:wrap;justify-content:flex-end}
 .cfb-checkout-header .cfb-continue{font-size:.82rem}
}
@media(max-width:470px){
 .cfb-checkout-header{grid-template-columns:1fr;grid-template-areas:"brand" "actions"}
 .cfb-checkout-header .store-actions{width:100%;display:flex;justify-content:space-between}
}

/* R4 — match index storefront palette on pages without storefront-r2-db.css.
   Scope to header: never change product gallery, checkout or other page UI. */
.store-header {
  --store-ink: #252821;
  --store-line: rgba(55, 65, 42, 0.17);
  --store-accent: #6f8f27;
  --store-accent-dark: #4f691d;
}
.store-header .store-nav a { color: var(--store-ink); }
.store-header .lang-switch a { color: var(--store-accent-dark); }
.store-header .lang-switch a.active {
  background: var(--store-accent-dark);
  border-color: var(--store-accent-dark);
  color: #fff;
}
.store-header .cart-pill {
  background: var(--store-accent);
  color: #fff;
}
.store-header .cart-count {
  background: #fff;
  color: var(--store-accent-dark);
}

/* R5: match index.html mobile wordmark typography exactly.
   Index storefront-r2-db.css R1.10 uses 1.15rem / .66rem below 700px. */
@media (max-width: 700px) {
  .store-header .central-brand strong { font-size: clamp(1rem, 5vw, 1.15rem); }
  .store-header .central-brand span {
    font-size: .66rem;
    letter-spacing: .055em;
    white-space: normal;
  }
}