/* CORDEL — side cart + cart/checkout styling */

/* ---- cart icon state ---- */
.nav-utils a.has-items svg{stroke:var(--oxblood)}
.nav-utils a.has-items .cartbadge{background:var(--oxblood);animation:cartpop .4s var(--e2)}
@keyframes cartpop{0%{transform:scale(.5)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ---- add-to-cart button states ---- */
.is-loading{position:relative;color:transparent!important;pointer-events:none}
.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(232,226,214,.4);border-top-color:var(--bone);border-radius:50%;animation:ccspin .6s linear infinite}
@keyframes ccspin{to{transform:rotate(360deg)}}
.is-done::after{content:"✓ added";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;color:var(--bone)}
.is-done{color:transparent!important}

/* ---- scrim ---- */
.cordel-cart-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:998;opacity:0;visibility:hidden;transition:opacity .3s}
.cordel-cart-scrim.on{opacity:1;visibility:visible}

/* ---- side cart ---- */
.cordel-cart{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--bone);z-index:999;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .38s var(--e2);box-shadow:-20px 0 60px rgba(0,0,0,.18)}
.cordel-cart.on{transform:translateX(0)}
.cc-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.cc-title{font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--txt);font-weight:600;display:flex;align-items:center;gap:8px}
.cc-count{background:var(--oxblood);color:var(--bone);font-size:14px;min-width:20px;height:20px;border-radius:99px;display:grid;place-items:center;padding:0 5px}
.cc-close{background:none;border:0;color:var(--txt-2);padding:4px}
.cc-close svg{width:22px;height:22px}
.cc-close:hover{color:var(--oxblood)}

.cc-body{flex:1;overflow-y:auto;padding:6px 24px}
.cc-empty{text-align:center;padding:60px 0;color:var(--txt-2)}
.cc-empty p{margin-bottom:20px;font-family:var(--mono);font-size:14px}
.cc-items{list-style:none}
.cc-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.cc-thumb{width:70px;height:88px;flex-shrink:0;overflow:hidden;background:var(--bone-2)}
.cc-thumb img{width:100%;height:100%;object-fit:cover}
.cc-info{flex:1;min-width:0;display:flex;flex-direction:column}
.cc-name{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.2}
.cc-price{font-size:14px;color:var(--txt-2);margin-top:4px}
.cc-qty{display:flex;align-items:center;gap:8px;margin-top:auto}
.cc-qty button{width:26px;height:26px;border:1px solid var(--line);background:none;color:var(--txt);font-size:14px;line-height:1;display:grid;place-items:center;transition:all .2s}
.cc-qty button:hover{border-color:var(--txt);background:var(--bone-2)}
.cc-q{font-family:var(--mono);font-size:14px;min-width:20px;text-align:center}
.cc-remove{margin-left:auto;width:auto!important;height:auto!important;border:0!important;font-family:var(--mono);font-size:14px;color:var(--faint);text-decoration:underline;padding:0!important}
.cc-remove:hover{color:var(--oxblood)!important;background:none!important}

/* cross-sell */
.cc-cross{padding:18px 0;border-bottom:1px solid var(--line)}
.cc-cross-h{font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.cc-cross-item{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ccx-thumb{width:44px;height:44px;flex-shrink:0;overflow:hidden;background:var(--bone-2)}
.ccx-info{flex:1;min-width:0}
.ccx-name{font-size:14px;font-weight:600}
.ccx-price{font-size:14px;color:var(--txt-2)}
.ccx-add{width:30px;height:30px;border:1px solid var(--txt);background:none;font-size:16px;line-height:1;flex-shrink:0;transition:all .2s}
.ccx-add:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}

/* foot */
.cc-foot{border-top:1px solid var(--line);padding:20px 24px;background:var(--bone)}
.cc-coupon{display:flex;gap:8px;margin-bottom:16px}
.cc-coupon input{flex:1;border:1px solid var(--line);background:var(--bone-2);padding:11px 12px;font-family:var(--mono);font-size:14px}
.cc-coupon input:focus{outline:0;border-color:var(--oxblood)}
.cc-coupon button{border:1px solid var(--txt);background:none;font-family:var(--mono);font-size:14px;font-weight:600;padding:0 18px;transition:all .2s}
.cc-coupon button:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.cc-subtotal{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-2)}
.cc-sub-val{font-size:20px;color:var(--txt);font-weight:600}
.cc-checkout{display:block;background:var(--oxblood);color:var(--bone);text-align:center;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.03em;padding:16px;transition:background .25s}
.cc-checkout:hover{background:var(--ink)}
.cc-viewcart{display:block;text-align:center;font-family:var(--mono);font-size:14px;color:var(--txt-2);margin-top:12px;text-decoration:underline}
.cc-viewcart:hover{color:var(--oxblood)}

@media(max-width:480px){
	.cordel-cart{width:100vw}
}

/* ---- floating cart button (FAB) ---- */
.cordel-fab{position:fixed;right:22px;bottom:22px;z-index:900;width:60px;height:60px;border-radius:50%;background:var(--oxblood);color:var(--bone);border:0;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.28);transition:transform .25s var(--e2),background .2s;opacity:0;transform:scale(.6)}
.cordel-fab.on{display:flex;opacity:1;transform:scale(1);animation:fabin .4s var(--e2)}
@keyframes fabin{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.cordel-fab:hover{background:var(--ink);transform:scale(1.06)}
.cordel-fab svg{width:24px;height:24px}
.cordel-fab .fab-count{position:absolute;top:-2px;right:-2px;background:var(--brass);color:var(--ink);font-family:var(--mono);font-size:14px;font-weight:600;min-width:22px;height:22px;border-radius:99px;display:grid;place-items:center;padding:0 5px;border:2px solid var(--bone)}
@media(max-width:760px){.cordel-fab{right:16px;bottom:16px;width:54px;height:54px}}

/* ============================================================
   LIVE SEARCH OVERLAY
   ============================================================ */
.cordel-search{position:fixed;inset:0;z-index:1000;opacity:0;visibility:hidden;transition:opacity .28s}
.cordel-search.on{opacity:1;visibility:visible}
.cs-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.cs-panel{position:relative;max-width:680px;margin:8vh auto 0;background:var(--bone);box-shadow:0 30px 80px rgba(0,0,0,.3);transform:translateY(-16px);transition:transform .3s var(--e2);max-height:82vh;display:flex;flex-direction:column}
.cordel-search.on .cs-panel{transform:translateY(0)}
.cs-bar{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line)}
.cs-ico{width:22px;height:22px;stroke:var(--tan);flex-shrink:0}
.cs-input{flex:1;border:0;background:none;font-family:var(--disp);font-size:22px;font-weight:600;color:var(--txt);letter-spacing:-.01em}
.cs-input:focus{outline:0}
.cs-input::placeholder{color:var(--faint);font-weight:500}
.cs-close{background:none;border:0;color:var(--txt-2);padding:4px;flex-shrink:0}
.cs-close svg{width:22px;height:22px}
.cs-close:hover{color:var(--oxblood)}
.cs-results{overflow-y:auto;padding:8px 0}
.cs-hint,.cs-loading{padding:40px 24px;text-align:center;color:var(--faint);font-size:14px}
.cs-spin{display:inline-block;width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--oxblood);border-radius:50%;animation:csspin .6s linear infinite}
@keyframes csspin{to{transform:rotate(360deg)}}
.cs-list{display:flex;flex-direction:column}
.cs-item{display:flex;align-items:center;gap:16px;padding:14px 24px;transition:background .18s}
.cs-item:hover{background:var(--bone-2)}
.cs-thumb{width:56px;height:56px;flex-shrink:0;overflow:hidden;background:var(--bone-2)}
.cs-thumb img{width:100%;height:100%;object-fit:cover}
.cs-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-cat{font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--faint)}
.cs-name{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--txt)}
.cs-price{font-size:14px;color:var(--txt-2)}
.cs-price del{color:var(--faint);margin-right:6px}
.cs-price ins{text-decoration:none;color:var(--oxblood)}
.cs-all{display:block;padding:16px 24px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--txt);transition:color .2s}
.cs-all:hover{color:var(--oxblood)}
.cs-empty{padding:44px 24px;text-align:center;color:var(--txt-2)}
.cs-empty p{margin-bottom:6px}
.cs-empty .mono,.cs-empty p.mono{font-size:14px;color:var(--faint)}
@media(max-width:560px){
	.cs-panel{margin:0;max-height:100vh;height:100%}
	.cs-input{font-size:19px}
}

/* remove native search input clear/cancel button (kills the double cross) */
.cs-input::-webkit-search-cancel-button,
.cs-input::-webkit-search-decoration,
.cs-input::-webkit-search-results-button,
.cs-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none;display:none}
.cs-input{appearance:none;-webkit-appearance:none}