/* eTrade storefront CSS: Storefront shop page */
body.shop .hero{display:none}
.shopwrap{display:grid;grid-template-columns:260px 1fr;gap:24px;margin-top:-56px;position:relative;align-items:start}
.shopwrap>*{min-width:0}
.sfilter{padding:22px;position:sticky;top:88px}
.sfilter h3{font-size:13px;margin:20px 0 10px}
.sfilter h3:first-child{margin-top:0}
.sfilter input[type=search]{width:100%;border:1.5px solid var(--bd);border-radius:8px;padding:10px 12px;font:inherit;font-size:13px;background:var(--grey)}
.sfilter input[type=search]:focus{outline:0;border-color:var(--blue);background:#fff}
.scat{display:flex;justify-content:space-between;align-items:center;width:100%;padding:9px 12px;border-radius:8px;font-size:13px;text-align:left}
.scat:hover{background:var(--grey)}
.scat.on{background:#EAF0FE;color:var(--blue);font-weight:600}
.scat em{font:500 11px "DM Sans";font-style:normal;color:var(--muted)}
.sfilter input[type=range]{width:100%;accent-color:var(--blue)}
.sfilter .btn{width:100%;justify-content:center;margin-top:18px;background:var(--grey);box-shadow:none;font-size:12px}
.sfilter .btn:hover{background:var(--blue);color:#fff}
.stool{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:14px 18px;font-size:13px}
.stl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fch{display:inline-flex;gap:4px;align-items:center;background:#EAF0FE;color:var(--blue);font-size:11px;font-weight:600;padding:3px 4px 3px 10px;border-radius:20px}
.fch button{width:18px;height:18px;border-radius:50%;font-size:13px;line-height:1}
.fch button:hover{background:var(--blue);color:#fff}
.str{display:flex;gap:8px;align-items:center}
.vt{display:flex;border:1.5px solid var(--bd);border-radius:8px;overflow:hidden}
.vt button{width:34px;height:34px;display:grid;place-items:center;color:var(--muted)}
.vt button.on{background:var(--dark);color:#fff}
.vt svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
#sft{display:none;padding:9px 14px;font-size:12px;background:var(--grey);border-radius:8px;font-weight:600}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.sgrid>*{min-width:0}
.scard.new{animation:pop .5s cubic-bezier(.2,.7,.2,1) both}
.sgrid.list{grid-template-columns:1fr}
.sgrid.list .pc{display:grid;grid-template-columns:200px 1fr}
.sgrid.list .pc .img{height:100%;min-height:170px}
.sgrid.list .pc .info{display:flex;flex-direction:column;justify-content:center;padding:18px 24px}
.sgrid.list .sadd{width:auto;align-self:flex-start;padding:10px 26px}
.smorew{text-align:center;margin-top:28px;font-size:12px;color:var(--muted)}
.smorew .btn{margin-top:10px;font-size:13px;padding:11px 28px}
#sempty{display:none;margin-top:16px;padding:56px 20px;text-align:center}
#sempty h2{font-size:20px}
#sempty p{color:var(--muted);margin:6px 0 18px}
@media (max-width:1024px){
.shopwrap{grid-template-columns:1fr;margin-top:-48px}
.sfilter{display:none;position:static}
.sfilter.open{display:block;animation:pop .4s both}
#sft{display:inline-flex}
}
@media (max-width:768px){
.sgrid{grid-template-columns:repeat(2,1fr)}
.stool{padding:12px 14px}
.str{width:100%}
.str .wsel{flex:1}
.sgrid.list .pc{grid-template-columns:150px 1fr}
.sgrid.list .pc .info{padding:14px 16px}
}
@media (max-width:480px){
.sgrid{gap:10px}
.sgrid.list .pc{grid-template-columns:112px 1fr}
.sgrid.list .pc .img{min-height:130px}
.sgrid.list .pc .img>svg{width:78px}
.sgrid.list .sadd{padding:8px 14px}
.sfilter{padding:18px}
}
.shopwrap{margin-top:0}
@media (max-width:768px){
.shopwrap{margin-top:0}
}
/* SHOP FILTER: modern card on desktop, bottom sheet on phones/tablets */
#shopPage #sfilter{padding:0!important;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}
#shopPage .sf-body{padding:22px 22px 10px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
#shopPage #sfilter h3{margin:24px 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7A8296}
#shopPage .sf-body>h3:first-child{margin-top:0}
#shopPage #sq{width:100%;box-sizing:border-box;height:46px;padding:0 14px 0 44px;border:1px solid #E6E9F2;border-radius:14px;background-color:#F6F8FC;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8296' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:15px center;background-size:18px;font:inherit;font-size:14.5px;color:#1F2430;outline:0;transition:border-color .2s,box-shadow .2s,background-color .2s}
#shopPage #sq:focus{background-color:#fff;border-color:#2F6FED;box-shadow:0 0 0 4px rgba(47,111,237,.14)}
#shopPage #scats,#shopPage #sbrands,#shopPage #savail,#shopPage #spromo,#shopPage #scoll{display:flex;flex-direction:column;gap:2px}
#shopPage #sfilter .scat{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid transparent;border-radius:12px;background:transparent;font:inherit;font-size:14.5px;color:#1F2430;text-align:left;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
#shopPage #sfilter .scat:hover{background:#F3F5FA}
#shopPage #sfilter .scat.on{background:#EAF0FF;color:#2F6FED;font-weight:600}
#shopPage #sfilter .scat em{font-style:normal;font-size:12px;font-weight:600;color:#8A93A6;background:#F1F3F8;padding:2px 9px;border-radius:99px;min-width:12px;text-align:center}
#shopPage #sfilter .scat.on em{background:#fff;color:#2F6FED}
#shopPage #sfilter .scat:focus-visible,#shopPage #sfilter #sfclose:focus-visible{outline:3px solid rgba(47,111,237,.35);outline-offset:2px}
#shopPage .sf-foot{display:flex;gap:10px;padding:14px 22px 20px;border-top:1px solid #EEF0F6;background:#fff}
#shopPage .sf-foot .btn{flex:1;height:46px;border-radius:14px;font-weight:600;cursor:pointer}
#shopPage #sfapply,#shopPage .sf-head,#shopPage #sft{display:none}
#sfbadge[hidden]{display:none}
#sfbadge{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#2F6FED;color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
@media (min-width:901px){
#shopPage .shopwrap{display:grid!important;grid-template-columns:290px minmax(0,1fr);gap:24px;align-items:start}
#shopPage #sfilter{position:static;align-self:start;max-height:none!important;overflow:visible!important}
#shopPage .sf-body{max-height:none;overflow:visible;padding:20px 20px 6px}
#shopPage #sfilter h3{margin:20px 0 8px}
#shopPage #sfilter .scat{padding:9px 12px}
#shopPage #sbrands,#shopPage #savail,#shopPage #spromo,#shopPage #scoll{flex-direction:row;flex-wrap:wrap;gap:8px}
#shopPage #sbrands .scat,#shopPage #savail .scat,#shopPage #spromo .scat,#shopPage #scoll .scat{width:auto;padding:7px 12px;border:1px solid #E5E8F0;border-radius:999px;background:#fff;font-size:14px}
#shopPage #sbrands .scat.on,#shopPage #savail .scat.on,#shopPage #spromo .scat.on,#shopPage #scoll .scat.on{border-color:#2F6FED;background:#EAF0FF}
#shopPage .sf-foot{padding:12px 20px 18px}
}
@media (max-width:900px){
#shopPage .shopwrap{display:block!important}
#shopPage #sft{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border:1px solid #E1E5EF;border-radius:12px;background:#fff;color:#1F2430;font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(20,24,40,.05)}
#shopPage #sft[aria-expanded="true"]{border-color:#2F6FED;color:#2F6FED}
#shopPage #sfilter{position:fixed!important;left:0;right:0;bottom:0;top:auto!important;width:auto!important;margin:0!important;z-index:2001;max-height:88vh;max-height:88dvh;border-radius:24px 24px 0 0!important;border:0!important;box-shadow:0 -24px 60px rgba(15,18,30,.28)!important;transform:translateY(105%);visibility:hidden;transition:transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s linear .38s}
#shopPage #sfilter.open{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s}
#shopPage .sf-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:22px 20px 12px;font-size:18px}
#shopPage .sf-head::before{content:"";position:absolute;top:8px;left:50%;width:42px;height:4px;margin-left:-21px;border-radius:9px;background:#D9DEEA}
#shopPage #sfclose{width:36px;height:36px;border:0;border-radius:50%;background:#F1F3F8;color:#1F2430;font-size:22px;line-height:1;cursor:pointer}
#shopPage .sf-body{padding:6px 20px 16px;flex:1 1 auto}
#shopPage #sq{font-size:16px}
#shopPage #scats,#shopPage #sbrands,#shopPage #savail,#shopPage #spromo,#shopPage #scoll{flex-direction:row;flex-wrap:wrap;gap:8px}
#shopPage #sfilter .scat{width:auto;padding:9px 14px;border:1px solid #E5E8F0;border-radius:999px;background:#fff;font-size:14px}
#shopPage #sfilter .scat.on{border-color:#2F6FED;background:#EAF0FF}
#shopPage #sfilter .scat em{padding:1px 8px}
#shopPage .sf-foot{padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px))}
#shopPage #sfapply{display:block}
#shopPage #sclear{flex:0 0 auto;padding:0 20px}
}
@media (max-width:600px){
#shopPage .stool{display:flex;flex-direction:column;align-items:stretch;gap:12px}
#shopPage .str{display:flex;align-items:center;gap:8px;width:100%}
#shopPage #ssort{flex:1;min-width:0}
}
@media (prefers-reduced-motion:reduce){
#shopPage #sfilter{transition:none!important}
}
/* built-in icons use dark colours: flip them on the dark background */
/* ---- Shop filter: By Collection (inside Promotion) ---- */
#shopPage #scoll[hidden]{display:none}
#shopPage #sfilter #scoll{margin-top:8px;padding:10px;background:#F6F8FC;border:1px solid #EEF0F6;border-radius:14px;animation:pop .25s both}
#shopPage #sfilter .pcol .chv{flex:none;margin-left:-2px;transition:transform .2s}
#shopPage #sfilter .pcol[aria-expanded="true"] .chv{transform:rotate(180deg)}
/* ---- Shop filter: Price (min/max inputs, dual slider, quick ranges) ---- */
#shopPage #sfilter .pf{display:flex;flex-direction:column;gap:14px}
#shopPage #sfilter .pf-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}
#shopPage #sfilter .pf-d{display:block;width:8px;height:2px;border-radius:2px;background:#C5CBD8}
#shopPage #sfilter .pf-f{display:flex;flex-direction:column;gap:1px;min-width:0;padding:8px 12px 7px;border:1.5px solid #E5E8F0;border-radius:12px;background:#fff;cursor:text;transition:border-color .2s,box-shadow .2s}
#shopPage #sfilter .pf-f:hover{border-color:#CBD3E3}
#shopPage #sfilter .pf-f:focus-within{border-color:#2F6FED;box-shadow:0 0 0 3px rgba(47,111,237,.15)}
#shopPage #sfilter .pf-f small{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8A93A6}
#shopPage #sfilter .pf-v{display:flex;align-items:center;gap:3px;min-width:0}
#shopPage #sfilter .pf-c{font-size:15px;font-weight:600;color:#8A93A6}
#shopPage #sfilter .pf-v input{flex:1;min-width:0;width:100%;padding:0;margin:0;border:0;outline:0;background:transparent;font:600 15px/1.3 inherit;font-family:inherit;color:#1F2430;-moz-appearance:textfield;appearance:textfield}
#shopPage #sfilter .pf-v input::-webkit-outer-spin-button,#shopPage #sfilter .pf-v input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#shopPage #sfilter .pf-sl{position:relative;height:28px;margin:0 11px}
#shopPage #sfilter .pf-tr{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:99px;background:#E9EDF5}
#shopPage #sfilter .pf-fill{position:absolute;top:0;bottom:0;left:0;right:0;border-radius:99px;background:linear-gradient(90deg,#2F6FED,#5B8DEF)}
#shopPage #sfilter .pf-sl input[type=range]{position:absolute;left:-11px;top:0;width:calc(100% + 22px);height:28px;margin:0;padding:0;background:none;outline:0;pointer-events:none;-webkit-appearance:none;appearance:none}
#shopPage #sfilter .pf-sl input[type=range]::-webkit-slider-runnable-track{height:28px;background:transparent}
#shopPage #sfilter .pf-sl input[type=range]::-moz-range-track{height:28px;background:transparent}
#shopPage #sfilter .pf-sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;margin-top:3px;border-radius:50%;background:#fff;border:3px solid #2F6FED;box-shadow:0 3px 10px rgba(47,111,237,.3);cursor:grab;transition:box-shadow .2s,transform .15s}
#shopPage #sfilter .pf-sl input[type=range]::-moz-range-thumb{pointer-events:auto;box-sizing:border-box;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #2F6FED;box-shadow:0 3px 10px rgba(47,111,237,.3);cursor:grab}
#shopPage #sfilter .pf-sl input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.08)}
#shopPage #sfilter .pf-sl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(47,111,237,.3)}
#shopPage #sfilter .pf-sl input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(47,111,237,.3)}
#shopPage #sfilter .pf-sc{display:flex;justify-content:space-between;margin:-6px 2px 0;font-size:12px;font-weight:600;color:#8A93A6}
#shopPage #sfilter .pf-pre{display:flex;flex-wrap:wrap;gap:8px}
#shopPage #sfilter .pf-pre button{padding:7px 12px;border:1px solid #E5E8F0;border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:#4B5468;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
#shopPage #sfilter .pf-pre button:hover{border-color:#2F6FED;color:#2F6FED}
#shopPage #sfilter .pf-pre button.on{border-color:#2F6FED;background:#EAF0FF;color:#2F6FED}
#shopPage #sfilter .pf-pre button:focus-visible{outline:3px solid rgba(47,111,237,.35);outline-offset:2px}
@media (max-width:900px){
#shopPage #sfilter .pf-v input,#shopPage #sfilter .pf-c{font-size:16px}
#shopPage #sfilter .pf-pre button{font-size:14px}
}
#sgrid>.scard .n{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0;line-height:1.4}
#sgrid>.scard>.info{min-width:0;overflow:hidden}
#sgrid:not(.list){align-items:stretch}
#sgrid:not(.list)>.scard{display:flex;flex-direction:column;height:100%}
#sgrid:not(.list)>.scard>.img{flex:0 0 auto}
#sgrid:not(.list)>.scard>.info{flex:1 1 auto;display:flex;flex-direction:column}
#sgrid:not(.list)>.scard .sadd{margin-top:auto}