/* ==========================================================================
   Foxco Cart Button + cart overlay - Checkout & Cart by Foxco
   ========================================================================== */

.fcc-co,.fcc-cb{
  --fcc-accent:#3570be;--fcc-accent-dark:#2c5fa3;--fcc-accent-rgb:53,112,190;
  --fcc-bg:#f8f7f4;--fcc-surface:#fff;--fcc-border:#e3e0da;--fcc-muted:#6b6a75;
  --fcc-navy:#1c1b2e;--fcc-text:#1c1b2e
}

/* ---- Header button ------------------------------------------------------ */
.fcc-cb-wrap{display:flex}
a.fcc-cb{
  position:relative;display:inline-flex;align-items:center;gap:10px;box-sizing:border-box;
  padding:10px 20px;border:2px solid var(--fcc-accent);border-radius:999px;background:transparent;
  color:var(--fcc-accent);font-weight:700;font-size:16px;line-height:1;text-decoration:none;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s,box-shadow .18s
}
a.fcc-cb:hover,a.fcc-cb:focus-visible{background:rgba(var(--fcc-accent-rgb),.08);color:var(--fcc-accent);text-decoration:none}
a.fcc-cb:focus-visible{outline:2px solid var(--fcc-accent);outline-offset:3px}
.fcc-cb-total .amount,.fcc-cb-total bdi{color:inherit !important;font-weight:inherit}
.fcc-cb-icon{position:relative;display:inline-flex}
.fcc-cb-icon svg{display:block;width:var(--fcc-cb-icon,24px);height:var(--fcc-cb-icon,24px)}
.fcc-cb-count{
  position:absolute;top:-9px;right:-11px;min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;
  border-radius:99px;background:var(--fcc-accent);color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center;
  box-shadow:0 0 0 2px #fff
}
.fcc-cb-count.is-zero{display:none}
.fcc-cb-text{font-weight:inherit}

/* ---- Overlay shell ------------------------------------------------------ */
html.fcc-co-lock,html.fcc-co-lock body{overflow:hidden !important}
.fcc-co[hidden]{display:none !important}
.fcc-co{position:fixed;inset:0;z-index:2147483000;font-size:15px;color:var(--fcc-text);line-height:1.45}
.fcc-co *,.fcc-co *::before,.fcc-co *::after{box-sizing:border-box}
.fcc-co-backdrop{position:absolute;inset:0;background:rgba(14,14,28,.55);opacity:0;transition:opacity .3s ease;backdrop-filter:blur(2px)}
.fcc-co-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(1120px,94vw);display:flex;flex-direction:column;
  background:var(--fcc-bg);box-shadow:-24px 0 60px rgba(14,14,28,.22);
  transform:translateX(100%);transition:transform .34s cubic-bezier(.2,.8,.2,1)
}
.fcc-co.is-full .fcc-co-panel{width:100vw}
.fcc-co.is-open .fcc-co-backdrop{opacity:1}
.fcc-co.is-open .fcc-co-panel{transform:none}
@media (prefers-reduced-motion:reduce){.fcc-co-panel,.fcc-co-backdrop{transition:none}}

.fcc-co-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px;background:var(--fcc-surface);border-bottom:1px solid var(--fcc-border);flex-shrink:0}
.fcc-co-title{margin:0 !important;padding:0 !important;font-size:24px !important;font-weight:800 !important;line-height:1.2 !important;letter-spacing:-.01em;color:var(--fcc-text) !important;text-transform:none !important}
.fcc-co-n{font-size:15px;font-weight:600;color:var(--fcc-muted)}
button.fcc-co-x,button.fcc-co-rm{
  position:relative;flex-shrink:0;width:42px;height:42px;padding:0 !important;margin:0;border:0 !important;border-radius:50% !important;
  background:var(--fcc-bg) !important;color:var(--fcc-text) !important;cursor:pointer;box-shadow:none !important;min-height:0 !important;
  transition:background .15s,color .15s,transform .15s
}
button.fcc-co-x::before,button.fcc-co-x::after,button.fcc-co-rm::before,button.fcc-co-rm::after{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)
}
button.fcc-co-x::after,button.fcc-co-rm::after{transform:translate(-50%,-50%) rotate(-45deg)}
button.fcc-co-x:hover{background:var(--fcc-border) !important;transform:rotate(90deg)}
button.fcc-co-x:focus-visible,button.fcc-co-rm:focus-visible{outline:2px solid var(--fcc-accent);outline-offset:2px}

.fcc-co-status{flex-shrink:0;max-height:0;overflow:hidden;transition:max-height .25s ease}
.fcc-co-status.is-on{max-height:120px}
.fcc-co-msg{margin:0 !important;padding:10px 28px;font-size:14px;font-weight:600}
.fcc-co-msg.is-ok{background:#ecfdf3;color:#166534}
.fcc-co-msg.is-error{background:#fef2f2;color:#991b1b}

.fcc-co-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transition:opacity .15s}
.fcc-co-body.is-busy{opacity:.6;pointer-events:none}
.fcc-co-skel{display:grid;gap:14px;padding:28px}
.fcc-co-skel i{display:block;height:96px;border-radius:16px;background:linear-gradient(90deg,#efede8 0,#f7f6f2 50%,#efede8 100%);background-size:200% 100%;animation:fcc-co-sh 1.2s infinite linear}
@keyframes fcc-co-sh{to{background-position:-200% 0}}

/* ---- Layout ------------------------------------------------------------- */
.fcc-co-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:28px;align-items:start;padding:28px}
.fcc-co.is-full .fcc-co-grid{max-width:1320px;margin:0 auto}

/* ---- Items -------------------------------------------------------------- */
.fcc-co-list{list-style:none !important;margin:0 !important;padding:0 !important;display:flex;flex-direction:column;gap:12px}
.fcc-co-item{
  display:grid;grid-template-columns:96px minmax(0,1fr) auto auto 42px;grid-template-areas:"thumb info qty sub rm";
  align-items:center;gap:18px;margin:0 !important;padding:16px 18px;background:var(--fcc-surface);
  border:1px solid var(--fcc-border);border-radius:16px;list-style:none !important;
  box-shadow:0 1px 2px rgba(26,26,46,.04),0 4px 14px rgba(26,26,46,.04);transition:opacity .25s,transform .25s
}
.fcc-co-item.is-leaving{opacity:.25;transform:translateX(12px)}
.fcc-co-thumb{grid-area:thumb}
.fcc-co-thumb img{display:block;width:96px !important;height:96px !important;object-fit:contain;border-radius:12px;background:var(--fcc-bg);margin:0 !important}
.fcc-co-info{grid-area:info;min-width:0}
.fcc-co-name{margin:0 0 4px !important;font-size:16px;font-weight:700;line-height:1.35}
.fcc-co-name a{color:var(--fcc-text) !important;text-decoration:none !important}
.fcc-co-name a:hover{color:var(--fcc-accent) !important}
.fcc-co-meta{font-size:13px;color:var(--fcc-muted)}
.fcc-co-meta dl{margin:0 !important}.fcc-co-meta dt,.fcc-co-meta dd{display:inline;margin:0 !important;font-weight:400}.fcc-co-meta dd p{display:inline;margin:0 !important}
.fcc-co-each{margin:2px 0 0 !important;font-size:13px;color:var(--fcc-muted)}
.fcc-co-qty{grid-area:qty;display:inline-flex;align-items:stretch;height:44px;border:1px solid var(--fcc-border);border-radius:12px;background:var(--fcc-surface);overflow:hidden}
.fcc-co-qty:focus-within{border-color:var(--fcc-accent);box-shadow:0 0 0 3px rgba(var(--fcc-accent-rgb),.13)}
.fcc-co-qty.is-single{align-items:center;padding:0 14px;font-size:13px;color:var(--fcc-muted)}
button.fcc-co-step{
  display:flex;align-items:center;justify-content:center;width:40px;padding:0 !important;margin:0;border:0 !important;border-radius:0 !important;
  background:transparent !important;color:var(--fcc-text) !important;cursor:pointer;box-shadow:none !important;min-height:0 !important
}
button.fcc-co-step:hover{background:var(--fcc-bg) !important}
button.fcc-co-step:disabled{opacity:.3;cursor:default;background:transparent !important}
input.fcc-co-q{
  width:44px !important;min-width:0;height:auto !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;
  background:transparent !important;box-shadow:none !important;text-align:center;font-size:16px !important;font-weight:700;color:var(--fcc-text) !important;
  -moz-appearance:textfield;appearance:textfield
}
input.fcc-co-q::-webkit-outer-spin-button,input.fcc-co-q::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.fcc-co-q:focus{outline:none}
.fcc-co-sub{grid-area:sub;min-width:84px;text-align:right;font-size:18px;font-weight:800;white-space:nowrap}
.fcc-co-sub .amount{color:var(--fcc-text)}
button.fcc-co-rm{grid-area:rm;width:38px;height:38px;color:var(--fcc-muted) !important}
button.fcc-co-rm::before,button.fcc-co-rm::after{width:14px}
button.fcc-co-rm:hover{background:#fdecec !important;color:#dc2626 !important;transform:scale(1.06)}

.fcc-co-link{
  display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:6px 0 !important;border:0 !important;background:none !important;box-shadow:none !important;
  color:var(--fcc-accent) !important;font-size:14px !important;font-weight:700;text-decoration:none !important;cursor:pointer;min-height:0 !important
}
.fcc-co-link:hover{text-decoration:underline !important}
.fcc-co-full{display:flex;justify-content:center;margin:14px 0 0}

/* ---- Summary column ----------------------------------------------------- */
.fcc-co-sum{display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--fcc-surface);border:1px solid var(--fcc-border);border-radius:18px;box-shadow:0 1px 2px rgba(26,26,46,.04),0 8px 24px rgba(26,26,46,.06)}
.fcc-co-box{padding:0 0 14px;border-bottom:1px solid var(--fcc-border)}
.fcc-co-lbl{margin:0 0 10px !important;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fcc-muted)}
.fcc-co-cform{display:flex;gap:8px;margin:0}
.fcc-co-cform input{
  flex:1 1 auto;min-width:0;height:46px !important;margin:0 !important;padding:0 14px !important;border:1px solid var(--fcc-border) !important;border-radius:12px !important;
  background:var(--fcc-surface) !important;font-size:15px !important;color:var(--fcc-text) !important;box-shadow:none !important
}
.fcc-co-cform input:focus{border-color:var(--fcc-accent) !important;box-shadow:0 0 0 3px rgba(var(--fcc-accent-rgb),.13) !important;outline:none}
button.fcc-co-apply{
  flex:0 0 auto;height:46px;padding:0 18px !important;margin:0;border:0 !important;border-radius:12px !important;min-height:0 !important;
  background:var(--fcc-navy) !important;color:#fff !important;font-size:14px !important;font-weight:700 !important;cursor:pointer;box-shadow:none !important
}
button.fcc-co-apply:hover{background:#000 !important}
.fcc-co-chips{list-style:none !important;margin:10px 0 0 !important;padding:0 !important;display:flex;flex-wrap:wrap;gap:8px}
.fcc-co-chip{display:inline-flex;align-items:center;gap:6px;margin:0 !important;padding:5px 6px 5px 10px;border-radius:99px;background:rgba(var(--fcc-accent-rgb),.1);color:var(--fcc-accent);font-size:12px;font-weight:700;letter-spacing:.04em}
.fcc-co-chip button{position:relative;width:20px;height:20px;padding:0 !important;margin:0;border:0 !important;border-radius:50% !important;background:rgba(var(--fcc-accent-rgb),.16) !important;color:var(--fcc-accent) !important;cursor:pointer;min-height:0 !important;box-shadow:none !important}
.fcc-co-chip button::before,.fcc-co-chip button::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.fcc-co-chip button::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* Shipping rates: base card look for the Classic style (the price-forward
   styles come from the shipping-card stylesheet, keyed off #shipping_method) */
.fcc-co #shipping_method{list-style:none !important;margin:0 !important;padding:0 !important;display:flex !important;flex-direction:column !important;gap:8px !important}
.fcc-co #shipping_method li{
  position:relative;display:flex !important;align-items:center;gap:10px;margin:0 !important;padding:12px 14px !important;
  border:1.5px solid var(--fcc-border);border-radius:12px;background:var(--fcc-surface);cursor:pointer;list-style:none !important
}
.fcc-co #shipping_method li:has(input:checked){border-color:var(--fcc-accent);background:rgba(var(--fcc-accent-rgb),.05)}
.fcc-co #shipping_method input[type=radio]{accent-color:var(--fcc-accent);width:17px;height:17px;margin:0 !important;flex-shrink:0}
.fcc-co #shipping_method label{flex:1;margin:0 !important;cursor:pointer;font-size:14px;font-weight:600}
.fcc-co-note{margin:10px 0 0 !important;font-size:13px;color:var(--fcc-muted)}
.fcc-co-note a{color:var(--fcc-accent) !important;font-weight:700}

.fcc-co-tot{margin:0 !important;display:flex;flex-direction:column;gap:8px}
.fcc-co-tot > div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.fcc-co-tot dt{margin:0;font-weight:600;color:var(--fcc-muted)}
.fcc-co-tot dd{margin:0;font-weight:700;text-align:right}
.fcc-co-tot .is-disc dd{color:#15803d}

/* The navy slab, stacked for the narrow column */
.fcc-co .fcc-slab.fcc-slab--co{grid-template-columns:1fr !important;gap:16px;margin:0;padding:20px}
.fcc-co .fcc-slab--co .fcc-slab-total{flex-direction:row;align-items:baseline;justify-content:space-between;padding:0}
.fcc-co .fcc-slab--co:not(.no-prog) .fcc-slab-total{padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.fcc-co .fcc-slab--co .fcc-slab-amt{font-size:34px}
/* Desktop: the slab (total + Checkout) sticks to the bottom of the panel while the column scrolls */
@media (min-width:768px){.fcc-co .fcc-slab.fcc-slab--co{position:sticky;bottom:16px;z-index:2;box-shadow:0 -6px 24px rgba(14,14,28,.14)}}

a.fcc-co-btn{
  display:flex !important;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;padding:0 24px !important;box-sizing:border-box;
  border:0 !important;border-radius:12px !important;background:var(--fcc-accent) !important;color:#fff !important;
  font-size:16px !important;font-weight:700 !important;letter-spacing:.02em;text-decoration:none !important;box-shadow:none !important;
  transition:background .18s,transform .18s
}
a.fcc-co-btn:hover,a.fcc-co-btn:focus-visible{background:var(--fcc-accent-dark) !important;color:#fff !important;transform:translateY(-1px)}
a.fcc-co-btn:focus-visible{outline:2px solid #fff;outline-offset:-5px}
a.fcc-co-btn svg{transition:transform .18s}
a.fcc-co-btn:hover svg{transform:translateX(3px)}

/* Phone footer (hidden on desktop, where the summary column is in view) */
.fcc-co-foot{display:none}

/* Empty cart */
.fcc-co-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:60vh;padding:40px 24px;text-align:center}
.fcc-co-empty-ic{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;background:var(--fcc-surface);color:var(--fcc-muted);border:1px solid var(--fcc-border)}
.fcc-co-empty-t{margin:0 !important;font-size:18px;font-weight:700}
.fcc-co-empty .fcc-co-btn{width:auto;min-width:220px}

/* ---- Tablet: summary under the items ------------------------------------ */
@media (max-width:980px){
  .fcc-co-grid{grid-template-columns:1fr}
}

/* ---- Phone: full screen, cards, sticky total bar ------------------------ */
@media (max-width:767px){
  .fcc-co-panel,.fcc-co.is-full .fcc-co-panel{width:100vw}
  .fcc-co-head{padding:14px 16px}
  .fcc-co-title{font-size:20px !important}
  .fcc-co-msg{padding:10px 16px}
  .fcc-co-grid{gap:16px;padding:16px 14px 0}
  .fcc-co-item{
    grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"thumb info rm" "thumb qty sub";
    align-items:start;gap:10px 14px;padding:14px
  }
  .fcc-co-thumb img{width:76px !important;height:76px !important}
  .fcc-co-name{font-size:15px}
  .fcc-co-qty{justify-self:start;height:42px}
  .fcc-co-sub{align-self:center;min-width:0;font-size:17px}
  button.fcc-co-rm{width:36px;height:36px;margin-top:-4px}
  .fcc-co-sum{padding:16px;border-radius:16px}
  .fcc-co .fcc-slab--co .fcc-slab-total,.fcc-co .fcc-slab--co .fcc-slab-btn{display:none !important}
  .fcc-co .fcc-slab.fcc-slab--co.no-prog{display:none}
  .fcc-co-full{margin-bottom:6px}
  .fcc-co-foot{
    position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:14px;margin:16px -14px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--fcc-navy);color:#fff;box-shadow:0 -10px 30px rgba(14,14,28,.18)
  }
  .fcc-co-foot-t{display:flex;flex-direction:column;line-height:1.1}
  .fcc-co-foot-t small{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .fcc-co-foot-t span,.fcc-co-foot-t .amount,.fcc-co-foot-t strong{font-size:24px;font-weight:800;color:#fff !important}
  .fcc-co-foot-t small.includes_tax,.fcc-co-foot-t span small{display:none}
  .fcc-co-foot .fcc-co-btn{flex:1;min-height:54px}
}