/* Home page strips: three card looks, one per strip (compact / wide / showcase). */
.cs-row{--cs-navy:var(--theme-primary,#0b1f4b);--cs-lime:var(--lime,#d4ff00);display:grid;grid-auto-flow:column;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px 2px 10px;margin:0 -2px}
.cs-row::-webkit-scrollbar{display:none}
.cs-empty{color:#6b7a99;font-size:14px;margin:0}
.cs-card{position:relative;min-width:0;scroll-snap-align:start;color:var(--cs-navy);text-align:start}
.cs-card h3{margin:0;min-height:0;height:auto;max-height:none;font-size:13px;font-weight:600;line-height:1.5}
.cs-card h3 a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:3em;color:inherit;text-decoration:none;overflow-wrap:anywhere}
.cs-img{position:relative;display:block}
.cs-img>a:first-child{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.cs-img img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cs-chip{position:absolute;top:10px;inset-inline-start:10px;max-width:calc(100% - 20px);font-size:11.5px;font-weight:700;line-height:1.7;border-radius:8px;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-off{background:#e5484d;color:#fff}
.cs-new{background:var(--cs-navy);color:var(--cs-lime)}
.cs-price{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.cs-price strong{font-size:16px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-price del{font-size:12px;color:#9aa5ba;white-space:nowrap}
.cs-card form{margin:0}
.cs-card button{font-family:inherit;cursor:pointer;border:0}
.cs-card button:disabled{background:#e9edf3!important;color:#9aa5ba!important;cursor:not-allowed}
.cs-card :is(a,button):focus-visible{outline:2px solid #617800;outline-offset:2px}
.cs-out .cs-img img{opacity:.55}

/* 1 — compact with a round (+) */
.cs-row-compact{grid-auto-columns:calc((100% - 30px)/2.7);padding-bottom:6px}
.cs-card-compact .cs-img{aspect-ratio:1/1;border-radius:20px;background:#fff;border:1px solid #edf0f5}
.cs-card-compact .cs-img>a:first-child{padding:16%}
.cs-card-compact .cs-plus{position:absolute;bottom:-14px;inset-inline-end:10px}
.cs-card-compact .cs-plus button{width:40px;height:40px;min-width:0;padding:0;border-radius:50%;background:var(--cs-lime);color:var(--cs-navy);display:grid;place-items:center;box-shadow:0 0 0 4px var(--cs-page,#fff)}
.cs-card-compact .cs-info{padding:18px 2px 0}
.cs-card-compact .cs-price{margin-top:2px}

/* 2 — wide, details beside the picture */
.cs-row-wide{grid-auto-columns:min(86%,340px)}
.cs-card-wide{display:flex;gap:12px;background:#fff;border:1px solid #edf0f5;border-radius:22px;padding:12px}
.cs-card-wide .cs-img{flex:none;width:112px;height:132px;border-radius:16px;background:#f4f6fb}
.cs-card-wide .cs-img>a:first-child{padding:10px}
.cs-card-wide .cs-chip{top:6px;inset-inline-start:6px}
.cs-card-wide .cs-info{flex:1;min-width:0;display:flex;flex-direction:column}
.cs-brand{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#6b7a99;line-height:1.6}
.cs-brand>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-rate{flex:none;color:var(--cs-navy);font-weight:600}.cs-rate i{font-style:normal;color:#f5b400}
.cs-card-wide h3{font-size:14px}
.cs-dots{display:flex;gap:5px;margin-top:5px}
.cs-dots i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.cs-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.cs-card-wide .cs-price strong{font-size:17px}
.cs-card-wide .cs-add button{display:flex;align-items:center;gap:6px;min-width:0;min-height:38px;padding:0 14px;border-radius:13px;background:var(--cs-navy);color:var(--cs-lime);font-size:13px;font-weight:700}
.cs-card-wide .cs-add svg{width:16px;height:16px}

/* 3 — showcase, the picture leads */
.cs-row-showcase{grid-auto-columns:min(62%,250px)}
.cs-card-showcase{display:flex;flex-direction:column;background:#fff;border:1px solid #edf0f5;border-radius:26px;overflow:hidden}
.cs-card-showcase .cs-img{aspect-ratio:1/.96;background:linear-gradient(180deg,#f7f8fb,#eceff5)}
.cs-card-showcase .cs-img>a:first-child{padding:11% 14% 15%}
.cs-heart{position:absolute;top:10px;inset-inline-end:10px}
.cs-heart button{width:34px;height:34px;min-width:0;padding:0;border-radius:50%;background:#fff;color:var(--cs-navy);display:grid;place-items:center;box-shadow:0 2px 8px rgba(11,31,75,.1)}
.cs-heart svg{width:18px;height:18px}
.cs-inst{position:absolute;bottom:10px;inset-inline-start:12px;background:rgba(11,31,75,.88);color:#fff;font-size:11.5px;font-weight:600;line-height:1.9;border-radius:20px;padding:0 12px;text-decoration:none;white-space:nowrap}
.cs-inst b{color:var(--cs-lime);font-weight:700}
.cs-card-showcase .cs-info{display:flex;flex-direction:column;flex:1;padding:12px 14px 14px}
.cs-card-showcase h3{font-size:15px;font-weight:700;line-height:1.45}
.cs-card-showcase h3 a{min-height:2.9em}
.cs-card-showcase .cs-price strong{font-size:18px}
.cs-card-showcase .cs-add button{width:46px;height:46px;min-width:0;padding:0;border-radius:16px;background:var(--cs-lime);color:var(--cs-navy);display:grid;place-items:center}

@media (min-width:700px){
 .cs-row{gap:16px}
 .cs-row-compact{grid-auto-columns:calc((100% - 64px)/5)}
 .cs-row-wide{grid-auto-columns:calc((100% - 16px)/2)}
 .cs-row-showcase{grid-auto-columns:calc((100% - 32px)/3)}
}
@media (min-width:1100px){
 .cs-row-compact{grid-auto-columns:calc((100% - 96px)/7)}
 .cs-row-wide{grid-auto-columns:calc((100% - 32px)/3)}
 .cs-row-showcase{grid-auto-columns:calc((100% - 48px)/4)}
 .cs-card h3{font-size:14px}.cs-card-showcase h3{font-size:16px}
 .cs-card-wide .cs-img{width:132px;height:150px}
}
.cs-card-compact .cs-foot{padding-top:0}

/* Banner cards: image cards side by side — as many across as there are (up to 6) on a computer, 2 on a phone. */
.bc-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-block:18px}
.bc-row.bc-n1{grid-template-columns:1fr}
.bc-card{display:block;border-radius:16px;overflow:hidden;background:#f4f6fb}
.bc-card img{display:block;width:100%;height:100%;object-fit:cover}
.bc-row.bc-odd:not(.bc-n1) .bc-card:last-child{grid-column:span 2}
a.bc-card{transition:transform .2s,box-shadow .2s}
a.bc-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,31,75,.1)}
a.bc-card:focus-visible{outline:3px solid #617800;outline-offset:3px}
@media (min-width:760px){
 .bc-row{gap:16px;margin-block:26px}
 .bc-row.bc-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bc-row.bc-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
 .bc-row.bc-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
 .bc-row.bc-n5{grid-template-columns:repeat(5,minmax(0,1fr))}
 .bc-row.bc-n6{grid-template-columns:repeat(6,minmax(0,1fr))}
 .bc-row.bc-odd:not(.bc-n1) .bc-card:last-child{grid-column:auto}
 .bc-card{border-radius:20px}
}

/* Arrows for every strip (shown by the script only when there is more to slide; never on touch-only phones). */
.cs-wrap{position:relative}
.cs-arrow{display:none}
@media (hover:hover) and (min-width:700px){
 .cs-arrow:not([hidden]){position:absolute;top:42%;transform:translateY(-50%);display:grid;place-items:center;width:46px;height:46px;min-width:0;padding:0;border:0;border-radius:50%;background:#fff;color:var(--theme-primary,#0b1f4b);box-shadow:0 6px 18px rgba(11,31,75,.18);cursor:pointer;z-index:3}
 .cs-prev{inset-inline-start:-10px}.cs-next{inset-inline-end:-10px}
 .cs-arrow:hover{background:var(--lime,#d5f802)}
 .cs-arrow:focus-visible{outline:3px solid #617800;outline-offset:2px}
}

/* 4 — detail: tag, spec chips, saving, and three round actions (cart, favourite, compare) */
.cs-row-detail{grid-auto-columns:calc((100% - 24px)/2.15);align-items:stretch}
.cs-card-detail{display:flex;flex-direction:column;background:#fff;border:1px solid #e6eaf0;border-radius:16px;box-shadow:0 3px 10px rgba(11,31,75,.06);overflow:hidden}
.cs-card-detail .cs-img{aspect-ratio:1/.92}
.cs-card-detail .cs-img>a:first-child{padding:12% 14% 6%}
.cs-card-detail .cs-tag{inset-inline-start:8px;top:8px;background:var(--theme-tint,#f1f8cf);color:#4e5d16;font-size:10.500px;border-radius:6px;padding:0 7px}
.cs-score{position:absolute;bottom:4px;inset-inline-end:8px;display:flex;align-items:center;gap:3px;background:#fff8e1;color:#8a5a00;font-size:11.500px;font-weight:700;border-radius:7px;padding:0 6px;line-height:1.7}
.cs-score i{font-style:normal;color:#f5b400}
.cs-card-detail .cs-info{padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px;flex:1}
.cs-card-detail h3{font-size:13px;font-weight:700;line-height:1.5}
.cs-specs{display:flex;flex-wrap:wrap;gap:4px;max-height:50px;overflow:hidden}
.cs-specs span{border:1px solid #dfe4ec;border-radius:5px;padding:0 6px;font-size:11px;line-height:1.75;color:#3a4763;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cs-card-detail .cs-price{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.cs-card-detail .cs-price strong{font-size:16px}
.cs-card-detail .cs-price.cs-sale strong{color:#d93a3a}
.cs-card-detail .cs-price del{font-size:12px;color:#d93a3a;opacity:.75}
.cs-save{align-self:flex-start;background:#e9f8ef;color:#17804a;font-size:11.500px;border-radius:7px;padding:1px 9px;line-height:1.8}
.cs-save b{font-weight:700}
.cs-acts{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:auto;padding:8px 10px 10px;border-top:1px solid #eef1f5}
.cs-acts form{display:flex}
.cs-acts button,.cs-acts a{width:38px;height:38px;min-width:0;padding:0;border-radius:50%;background:#fff;border:1px solid #e3e8ef;color:var(--theme-primary,#0b1f4b);display:grid;place-items:center;box-shadow:0 2px 6px rgba(11,31,75,.07);cursor:pointer;text-decoration:none}
.cs-acts svg{width:19px;height:19px}
.cs-acts form:first-child button{background:var(--lime,#d5f802);border-color:transparent}
.cs-acts button:hover,.cs-acts a:hover{border-color:var(--theme-primary,#0b1f4b)}
@media (min-width:700px){.cs-row-detail{grid-auto-columns:calc((100% - 48px)/4)}}
@media (min-width:1100px){.cs-row-detail{grid-auto-columns:calc((100% - 64px)/5)}.cs-card-detail h3{font-size:14px}.cs-card-detail .cs-price strong{font-size:18px}}

/* Phone: categories in two rows that slide sideways together. */
@media (max-width:760px){
 .home-category-static{display:grid!important;grid-template-columns:none!important;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:82px;gap:12px 8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 2px 6px;justify-content:start;align-items:start}
 .home-category-static::-webkit-scrollbar{display:none}
 .home-category-static{grid-auto-columns:calc((100% - 28px)/4.4)!important}
 .home-category-static .category-tile{width:100%!important;min-width:0!important;max-width:none!important;min-height:0!important;height:auto!important;margin:0!important;padding:8px 3px 6px!important;gap:5px!important;font-size:11.5px!important;line-height:1.3!important;border-radius:16px!important}
 .home-category-static .category-tile img{width:54px!important;height:54px!important}
 /* Phone: three or more image cards slide in one row, with a slice of the next one showing. */
 .bc-row.bc-n3,.bc-row.bc-n4,.bc-row.bc-n5,.bc-row.bc-n6{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
 .bc-row.bc-n3::-webkit-scrollbar,.bc-row.bc-n4::-webkit-scrollbar,.bc-row.bc-n5::-webkit-scrollbar,.bc-row.bc-n6::-webkit-scrollbar{display:none}
 .bc-row.bc-n3 .bc-card,.bc-row.bc-n4 .bc-card,.bc-row.bc-n5 .bc-card,.bc-row.bc-n6 .bc-card{flex:0 0 calc((100% - 20px)/2.3);scroll-snap-align:start}
 .bc-row.bc-odd:not(.bc-n1) .bc-card:last-child{grid-column:auto}
}