/* Only Cards TCG — shared header actions */
.site-header{gap:clamp(10px,1.6vw,24px)}
.site-header .brand{flex-shrink:0;white-space:nowrap}
.oc-header-actions{display:flex;align-items:center;gap:clamp(6px,1.2vw,16px);margin-left:auto}
.oc-header-action{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(217,185,110,.28);border-radius:50%;background:transparent;color:var(--ink,#101010);cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.oc-header-action:hover,.oc-header-action:focus-visible{background:rgba(217,185,110,.15);border-color:var(--accent,#d9b96e);outline:none}
.oc-header-action:active{transform:scale(.96)}
.oc-header-action svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.oc-header-action .oc-count{position:absolute;right:-3px;top:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--accent,#d9b96e);color:#101010;font:700 10px/17px "DM Sans",Arial,sans-serif;text-align:center}
.oc-header-action .oc-count[hidden]{display:none}
.oc-search-panel{display:none;position:sticky;top:78px;z-index:19;padding:14px max(5vw,16px);background:rgba(247,246,242,.98);border-bottom:1px solid var(--line,#e9e7e2);box-shadow:0 12px 24px rgba(0,0,0,.06)}
.oc-search-panel.is-open{display:block}
.oc-search-form{display:flex;max-width:760px;margin:0 auto;gap:8px}
.oc-search-form input{min-width:0;flex:1;border:1px solid #d9d7d1;border-radius:999px;padding:13px 18px;background:#fff;font:inherit}
.oc-search-form button{border:0;border-radius:999px;background:#101010;color:#fff;padding:0 22px;font:600 13px "DM Sans",Arial,sans-serif;cursor:pointer}
.site-footer-brand{display:flex;align-items:center;justify-content:center;margin:0 auto 18px;width:max-content;max-width:100%;color:inherit}
.site-footer-brand .brand{font-size:clamp(22px,3vw,30px);letter-spacing:.08em}
.site-footer-brand .brand-tcg{font-style:normal;font-size:.62em;margin-left:4px;color:var(--accent,#d9b96e)}
@media(max-width:900px){
 .site-header{height:auto;min-height:70px;padding:10px 4vw;flex-wrap:wrap;gap:10px}
 .site-header .brand{margin-right:auto}
 .site-header .language-switcher{order:2;margin-left:0}
 .oc-header-actions{order:3;margin-left:auto}
 .site-header .menu-btn{order:4}
 .site-header nav{display:none;order:5;flex-basis:100%;width:100%;margin:0;padding:12px 0 6px;flex-direction:column;gap:0;border-top:1px solid var(--line,#e9e7e2)}
 .site-header nav.open{display:flex}
 .site-header nav a{padding:12px 4px;border-bottom:1px solid rgba(0,0,0,.06)}
 .oc-header-action{width:38px;height:38px}
 .oc-header-action svg{width:18px;height:18px}
 .oc-search-panel{top:70px}
}
@media(max-width:420px){
 .site-header{padding-inline:12px}
 .oc-header-actions{gap:5px}
 .oc-header-action{width:34px;height:34px}
 .oc-header-action svg{width:17px;height:17px}
 .site-header .brand{font-size:17px}
 .site-header .language-switcher label{display:none}
}
@media(prefers-reduced-motion:reduce){.oc-header-action{transition:none}}


/* Correctif mobile: logo sur la première ligne, contrôles alignés sur la seconde.
   Le hamburger reste dans le flux et ne peut plus recouvrir le panier. */
@media(max-width:520px){
  .site-header{
    display:flex!important;
    height:auto!important;
    min-height:0!important;
    padding:14px 16px 12px!important;
    gap:12px!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    overflow:visible!important;
  }
  .site-header .brand{
    order:1!important;
    flex:0 0 100%!important;
    width:100%!important;
    min-width:0!important;
    padding-right:0!important;
    margin:0!important;
    overflow:visible!important;
    font-size:clamp(18px,5vw,23px)!important;
  }
  .site-header .language-switcher{
    order:2!important;
    position:static!important;
    flex:0 1 auto!important;
    margin:0!important;
    z-index:auto!important;
  }
  .site-header .language-switcher select{
    max-width:112px!important;
  }
  .site-header .icon-btn#searchToggle{display:none!important}
  .site-header .oc-header-actions{
    order:3!important;
    display:flex!important;
    flex:0 0 auto!important;
    margin-left:auto!important;
    gap:7px!important;
  }
  .site-header .oc-header-action{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    flex:0 0 38px!important;
    color:#f7f3e9!important;
    border-color:rgba(217,185,110,.48)!important;
  }
  .site-header .oc-header-action svg{width:19px!important;height:19px!important}
  .site-header .menu-btn{
    order:4!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    z-index:2!important;
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    margin:0!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#f7f3e9!important;
    background:transparent!important;
    border:1px solid rgba(217,185,110,.48)!important;
    border-radius:50%!important;
    font-size:0!important;
  }
  .site-header .menu-btn::before{
    content:""!important;
    display:block!important;
    width:18px!important;
    height:14px!important;
    border:0!important;
    border-radius:0!important;
    background:linear-gradient(currentColor,currentColor) center 1px/18px 2px no-repeat,
               linear-gradient(currentColor,currentColor) center 6px/18px 2px no-repeat,
               linear-gradient(currentColor,currentColor) center 11px/18px 2px no-repeat!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .site-header .menu-btn[aria-expanded="true"]::before{
    background:linear-gradient(var(--oc-gold2,#fbd278),var(--oc-gold2,#fbd278)) center/18px 2px no-repeat!important;
    transform:rotate(45deg)!important;
  }
  .site-header .menu-btn[aria-expanded="true"]::after{
    content:""!important;
    position:absolute!important;
    width:18px!important;
    height:2px!important;
    background:var(--oc-gold2,#fbd278)!important;
    transform:rotate(-45deg)!important;
    border-radius:2px!important;
  }
  .site-header nav{order:5!important;flex-basis:100%!important;width:100%!important}
  .oc-search-panel{top:0!important}
}


/* FINAL HEADER FIX — keep all controls in the normal layout; never overlay cart. */
.site-header{position:sticky;isolation:isolate;display:flex;align-items:center;gap:clamp(10px,1.4vw,22px)}
.site-header .brand{flex:0 0 auto;min-width:0}
.site-header nav{min-width:0}
.site-header .language-switcher{flex:0 0 auto}
.site-header .oc-header-actions{position:static;flex:0 0 auto;display:flex;align-items:center;gap:10px;margin-left:auto}
.site-header .menu-btn{position:static!important;inset:auto!important;transform:none!important;z-index:1;flex:0 0 42px;width:42px;height:42px;min-width:42px;min-height:42px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:0;line-height:0;border:1px solid rgba(217,185,110,.45);border-radius:50%;background:transparent;color:currentColor;cursor:pointer}
.site-header .menu-btn::before{content:"";display:block;width:19px;height:14px;background:linear-gradient(currentColor,currentColor) 0 1px/19px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 6px/19px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 11px/19px 2px no-repeat}
.site-header .menu-btn::after{content:none}
@media(max-width:900px){
 .site-header{height:auto;min-height:0;padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
 .site-header .brand{order:1;flex:1 1 calc(100% - 10px);width:auto;margin:0;white-space:nowrap}
 .site-header .language-switcher{order:2;flex:0 1 auto;margin:0}
 .site-header .language-switcher select{max-width:130px}
 .site-header .oc-header-actions{order:3;flex:0 0 auto;margin-left:auto;gap:7px}
 .site-header .oc-header-action{width:38px;height:38px;min-width:38px;flex:0 0 38px}
 .site-header .menu-btn{order:4;flex:0 0 38px;width:38px;min-width:38px;height:38px;min-height:38px}
 .site-header nav{order:5;display:none;flex:0 0 100%;width:100%;margin:0;padding:10px 0 0;flex-direction:column;gap:0;border-top:1px solid rgba(217,185,110,.22)}
 .site-header nav.open{display:flex}
 .site-header nav a{padding:13px 4px;border-bottom:1px solid rgba(217,185,110,.14)}
 .site-header .icon-btn#searchToggle{display:none}
}
@media(max-width:380px){
 .site-header{padding:12px}
 .site-header .brand{font-size:16px}
 .site-header .language-switcher select{max-width:100px}
 .site-header .oc-header-actions{gap:5px}
 .site-header .oc-header-action{width:34px;height:34px;min-width:34px;flex-basis:34px}
 .site-header .menu-btn{width:34px;min-width:34px;flex-basis:34px;height:34px;min-height:34px}
}


/* Header cleanup v2: prevent desktop/tablet navigation from colliding with action icons. */
@media (max-width: 1180px) {
  .site-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 14px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px clamp(14px, 3vw, 28px) !important;
    overflow: visible !important;
  }
  .site-header > .brand {
    order: 1 !important;
    flex: 1 1 calc(100% - 1px) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .site-header > nav {
    display: none !important;
    order: 5 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
  }
  .site-header > nav.open { display: flex !important; }
  .site-header > .language-switcher {
    order: 2 !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  .site-header > .language-switcher select {
    max-width: 126px !important;
    min-width: 0 !important;
  }
  .site-header > .icon-btn#searchToggle { display: none !important; }
  .site-header > .oc-header-actions {
    order: 3 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: clamp(6px, 1.5vw, 10px) !important;
    margin-left: auto !important;
    min-width: 0 !important;
  }
  .site-header > .menu-btn {
    order: 4 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: 1px solid rgba(217,185,110,.55) !important;
    border-radius: 50% !important;
    color: #f7f3e9 !important;
    background: transparent !important;
    z-index: 2 !important;
  }
  .site-header > .menu-btn::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 14px !important;
    background: linear-gradient(currentColor,currentColor) center 1px/18px 2px no-repeat,
                linear-gradient(currentColor,currentColor) center 6px/18px 2px no-repeat,
                linear-gradient(currentColor,currentColor) center 11px/18px 2px no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .site-header > .menu-btn::after { content: none !important; }
  .site-header .oc-header-action {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    color: #f7f3e9 !important;
  }
}
@media (max-width: 420px) {
  .site-header { padding: 12px !important; gap: 10px !important; }
  .site-header > .brand { font-size: clamp(17px, 5vw, 21px) !important; }
  .site-header > .language-switcher select { max-width: 104px !important; }
  .site-header > .oc-header-actions { gap: 5px !important; }
  .site-header .oc-header-action,
  .site-header > .menu-btn {
    flex-basis: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
  .site-header .oc-header-action svg { width: 17px !important; height: 17px !important; }
}


/* Close control inside the expanded mobile navigation */
.oc-menu-close{display:none}
@media(max-width:1180px){
 .site-header nav.open .oc-menu-close{
  display:flex!important;align-items:center;justify-content:flex-end;gap:10px;
  width:100%;padding:10px 4px 14px;margin:0 0 4px;
  border:0;border-bottom:1px solid rgba(217,185,110,.35);
  background:transparent;color:#f7f3e9;
  font:600 13px/1 "DM Sans",Arial,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;
 }
 .site-header nav.open .oc-menu-close span:first-child{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid rgba(217,185,110,.6);
  border-radius:50%;font:400 30px/1 Arial,sans-serif;color:#fbd278;
 }
}


/* Official OnlyCards logos */
.site-header > .brand .oc-brand-emblem{
  display:inline-block;width:clamp(28px,3.3vw,42px);height:clamp(28px,3.3vw,42px);
  object-fit:contain;vertical-align:middle;margin-right:9px;flex:0 0 auto;
}
.site-header > .brand{display:inline-flex;align-items:center;gap:0}
.site-footer-brand{
  display:flex;align-items:center;justify-content:center;
  width:min(100%,520px);margin:0 auto 24px;padding:8px 12px;
}
.site-footer-brand img{
  display:block;width:100%;max-width:460px;height:auto;max-height:300px;
  object-fit:contain;object-position:center;
}
@media(max-width:600px){
 .site-header > .brand .oc-brand-emblem{width:28px;height:28px;margin-right:6px}
 .site-footer-brand{width:100%;margin-bottom:18px;padding:4px 8px}
 .site-footer-brand img{max-width:340px;max-height:240px}
}


/* Compact language control and larger OC emblem in the available header space */
.site-header > .language-switcher{
  flex:0 0 auto!important;
  width:60px!important;
  min-width:60px!important;
  margin:0!important;
}
.site-header > .language-switcher label{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.site-header > .language-switcher select{
  display:block!important;width:60px!important;min-width:60px!important;max-width:60px!important;
  height:42px!important;padding:0 5px!important;margin:0!important;
  text-align:center!important;text-align-last:center!important;
  font-size:14px!important;font-weight:700!important;letter-spacing:.03em!important;
  color:#f7f3e9!important;background:#111!important;
  border:1px solid rgba(217,185,110,.65)!important;border-radius:12px!important;
  box-sizing:border-box!important;
}
.site-header > .brand{
  position:relative!important;
  min-width:0!important;
}
.site-header > .brand .oc-brand-emblem{
  width:clamp(64px,8vw,100px)!important;
  height:clamp(64px,8vw,100px)!important;
  max-width:100px!important;max-height:100px!important;
  object-fit:contain!important;margin-right:12px!important;
}
@media(max-width:600px){
 .site-header > .language-switcher,
 .site-header > .language-switcher select{
   width:54px!important;min-width:54px!important;max-width:54px!important;
 }
 .site-header > .language-switcher select{height:40px!important;font-size:13px!important;padding:0 3px!important}
 .site-header > .brand .oc-brand-emblem{
   width:clamp(68px,19vw,112px)!important;height:clamp(68px,19vw,112px)!important;
   max-width:112px!important;max-height:112px!important;margin-right:8px!important;
 }
}


/* Mobile: put the OC emblem in the free space between language and search */
.site-header > .oc-header-emblem{display:none}
@media(max-width:900px){
 .site-header > .brand .oc-brand-emblem{display:none!important}
 .site-header > .oc-header-emblem{
   display:block!important;order:3!important;
   flex:1 1 72px!important;width:clamp(72px,25vw,132px)!important;
   max-width:132px!important;height:clamp(58px,21vw,108px)!important;
   min-width:0!important;object-fit:contain!important;object-position:center!important;
   margin:0!important;padding:0!important;
 }
 .site-header .oc-header-actions{order:4!important;margin-left:0!important;gap:clamp(4px,1.2vw,8px)!important}
 .site-header .menu-btn{order:5!important}
 .site-header nav{order:6!important}
}
@media(max-width:520px){
 .site-header > .oc-header-emblem{
   flex:1 1 60px!important;width:clamp(60px,23vw,112px)!important;
   max-width:112px!important;height:clamp(56px,21vw,96px)!important;
 }
 .site-header .language-switcher{order:2!important;flex:0 0 54px!important;width:54px!important;min-width:54px!important}
 .site-header .language-switcher select{width:54px!important;min-width:54px!important;max-width:54px!important}
 .site-header .oc-header-actions{order:4!important;flex:0 0 auto!important;margin-left:0!important;gap:5px!important}
 .site-header .oc-header-action{width:34px!important;height:34px!important;min-width:34px!important;flex:0 0 34px!important}
 .site-header .menu-btn{order:5!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;flex:0 0 34px!important}
}


/* Small brand attribution next to the Swiss boutique notice */
.oc-powered-by{display:inline-flex;align-items:center;gap:3px;margin-left:7px;color:#9a9ba5;font-size:9px;line-height:1;letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
.oc-powered-by>span{font-size:8px;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.oc-powered-by a{color:var(--accent,#d9b96e);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(217,185,110,.35)}
.oc-powered-by a:hover,.oc-powered-by a:focus-visible{color:#f3d98f}
@media(max-width:600px){.oc-powered-by{margin-left:6px;font-size:8px;gap:2px}.oc-powered-by>span{font-size:7px}}

/* Ecosystem footer — clear, accessible link to the parent boutique */
.oc-ecosystem-footer{width:min(100% - 32px,980px);margin:0 auto 22px;padding:22px 18px;border:1px solid rgba(217,185,110,.28);border-radius:12px;text-align:center;color:inherit;background:rgba(217,185,110,.045)}
.oc-ecosystem-footer>strong{display:block;color:var(--accent,#d9b96e);font-size:11px;letter-spacing:.12em;line-height:1.7}
.oc-ecosystem-footer p{margin:8px auto 0;max-width:680px;line-height:1.7;font-size:13px}
.oc-ecosystem-footer .oc-ecosystem-links{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.oc-ecosystem-footer a{color:var(--accent,#d9b96e);text-underline-offset:3px;font-weight:700}
.oc-ecosystem-footer a:hover,.oc-ecosystem-footer a:focus-visible{color:#f3d98f}
@media(max-width:520px){.oc-ecosystem-footer{width:calc(100% - 24px);padding:18px 14px;margin-bottom:18px}.oc-ecosystem-footer p{font-size:12px}}