/* Collection page styles (moved from product/index.blade.php, 5 Nov 2026) */
/* category grid: 4 per row on desktop, 3 on small laptops, 2 on tablet and phone */
@media (min-width:1101px){html body .bs-list #datalist{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:18px}}
@media (min-width:992px) and (max-width:1100px){html body .bs-list #datalist{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
html body .bs-list #listGridView.cheatsheet-display #datalist{grid-template-columns:1fr !important}
/* ===== Layout A: clean header + type tabs ===== */
html body .ca-head{padding:22px 0 0;background:#fff}
html body .ca-head .bs-wrap{max-width:none;padding-left:clamp(16px,2.5vw,40px);padding-right:clamp(16px,2.5vw,40px)}
html body .ca-head .bs-crumb{margin:0 0 10px}
html body .ca-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 40px;flex-wrap:wrap}
html body .ca-head h1{margin:0;font:400 clamp(36px,4.6vw,58px)/1.02 'DM Serif Display',Georgia,serif !important;color:#1a1f2b}
html body .ca-row p{margin:0 0 6px;max-width:440px;font:400 15px/1.6 'DM Sans',Poppins,sans-serif;color:#5b6472}
html body .ca-tabs{display:flex;gap:4px;margin-top:20px;border-bottom:1px solid #e6ebdc;overflow-x:auto;scrollbar-width:none}
html body .ca-tabs::-webkit-scrollbar{display:none}
html body .ca-tabs[hidden]{display:none}
html body .ca-tab{flex:none;margin:0 0 -1px;padding:13px 16px;border:0;border-bottom:3px solid transparent;background:none;font:700 14px/1 'DM Sans',Poppins,sans-serif;color:#5b6472;cursor:pointer;white-space:nowrap}
html body .ca-tab:hover{color:#1a1f2b}
html body .ca-tab.on{color:#1a1f2b;border-bottom-color:#8EBF23}
html body .ca-head + .bs-main{padding-top:16px}
html body .ca-tabwrap{padding-top:6px}
html body .ca-tabwrap .ca-tabs{margin-top:0}
html body .bs-side .bs-fg.ca-hide{display:none !important}
/* filter bar look */
@media (min-width:992px){
 html body .bs-side{border-radius:16px !important;padding:10px 12px !important;box-shadow:0 8px 24px rgba(31,60,20,.06)}
 html body .bs-side h2{font-size:17px !important}
 html body .bs-side .bs-fg>b{border-radius:10px !important;border-width:1px !important}
 html body .bs-side .bs-fg.ca-sort{margin-left:auto !important}
 html body .bs-side .bs-fg.ca-sort>b{border-color:transparent !important;background:none !important;color:#5b6472 !important}
 html body .bs-side .bs-fg.ca-sort>b em{font-style:normal;color:#1a1f2b}
 html body .bs-side .bs-clear{display:none !important}
}
/* applied chips + count */
html body .ca-applied{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;min-height:34px}
html body .ca-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html body .ca-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#f4f9ea;border:1px solid #d6e6b0;font:700 13px/1 'DM Sans',Poppins,sans-serif;color:#1a1f2b;cursor:pointer}
html body .ca-chip i{font-style:normal;color:#4f7a0a;font-size:12px}
html body .ca-chip:hover{border-color:#8EBF23}
html body .ca-clr{border:0;background:none;padding:4px;font:700 13px/1 'DM Sans',Poppins,sans-serif;color:#4f7a0a;text-decoration:underline;cursor:pointer}
html body .ca-cnt{margin-left:auto;font:600 13px/1 'DM Sans',Poppins,sans-serif;color:#5b6472}
html body .ca-cnt b{color:#1a1f2b}
/* mobile bar: Filter + Sort */
html body .bs-bar{gap:8px !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important;margin:0 0 12px !important}
html body .bs-bar .cp-count{display:none}
html body .bs-ftog{flex:1;justify-content:center;height:44px !important;border-radius:12px !important;background:#1a1f2b !important;font-size:12px !important}
html body .bs-ftog span{margin-left:2px}
html body .ca-msort{flex:1;position:relative;display:flex;align-items:center;justify-content:center;height:44px;margin:0;border:1.5px solid #dfe5d2;border-radius:12px;background:#fff;font:800 12px/1 'DM Sans',Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#1a1f2b}
html body .ca-msort span::after{content:" ⌄"}
html body .ca-msort select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
@media (min-width:992px){html body .ca-msort{display:none}}

/* ===== Card A ===== */
html body .bs-list .bs-card.cpA{border-radius:20px !important;border:1px solid #e6ebdc !important;box-shadow:none !important;background:#fff !important}
html body .bs-list .bs-card.cpA:hover{border-color:#cfe39a !important;box-shadow:0 14px 30px rgba(31,60,20,.10) !important;transform:translateY(-2px)}
html body .bs-card.cpA .bs-pic{margin:0 !important;border-radius:0 !important;aspect-ratio:4/3 !important;background:#f6f7f3 !important}
html body .bs-card.cpA .bs-pic img{object-fit:cover !important;object-position:center}
html body .bs-card.cpA .bs-off{left:12px !important;top:12px !important;padding:6px 10px !important;border-radius:8px !important;background:#fff !important;color:#2f6b0a !important;font-size:10.5px !important;box-shadow:0 2px 8px rgba(0,0,0,.08) !important}
html body .bs-card.cpA .bs-low{left:12px !important;top:44px !important;bottom:auto !important;border-radius:8px !important;font-size:11px !important;padding:6px 10px 6px 22px !important}
html body .bs-card.cpA .bs-heart{right:12px !important;top:12px !important;width:36px !important;height:36px !important}
html body .bs-card.cpA .bs-bd{padding:12px 14px 14px !important;gap:8px;display:flex;flex-direction:column}
html body .bs-card.cpA .bs-bd>*{margin:0 !important}
html body .bs-card.cpA .bs-rt{display:flex;align-items:center;gap:6px;font:700 12.5px/1 'DM Sans',Poppins,sans-serif !important;color:#1a1f2b}
html body .bs-card.cpA .bs-rt b{font:700 12.5px/1 'DM Sans',Poppins,sans-serif !important;color:#1a1f2b !important}
html body .bs-card.cpA .bs-rt span{font-weight:500;color:#5b6472}
html body .bs-card.cpA .bs-rt .st{color:#e3a400 !important;font-weight:700}
html body .bs-off[hidden]~.bs-low{top:12px !important}
html body .bs-card.cpA .bs-top h3,html body .bs-card.cpA .bs-top h3 a{margin:0 !important;font:700 16px/1.25 'DM Sans',Poppins,sans-serif !important;color:#1a1f2b !important;text-decoration:none !important}
html body .ca-fm{display:flex;flex-direction:column;gap:5px}
html body .ca-fm .t{display:flex;justify-content:space-between;font:600 11.5px/1 'DM Sans',Poppins,sans-serif;color:#5b6472}
html body .ca-fm .t b{color:#1a1f2b}
html body .ca-fm .s{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
html body .ca-fm .s i{height:6px;border-radius:3px;background:#e9ece4}
html body .ca-fm .s i.on{background:linear-gradient(90deg,#50b1e4,#8EBF23)}
html body .ca-tags{display:flex;gap:6px;flex-wrap:wrap}
html body .ca-tags span{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:6px;background:#f3f5ef;font:600 11.5px/1 'DM Sans',Poppins,sans-serif;color:#3a4350}
html body .ca-tags span.ca-feel{background:#f4f9ea;color:#3a4350}
html body .ca-tags span.ca-feel b{color:#1a1f2b;font-weight:700}
html body .ca-tags span i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(26,31,43,.25)}
html body .ca-sz{display:flex;flex-wrap:wrap;gap:5px}
html body .ca-sz button{flex:1 1 calc(25% - 5px);min-width:0;padding:7px 2px;border-radius:8px;border:1px solid #dfe5d2;background:#fff;font:700 12px/1 'DM Sans',Poppins,sans-serif;color:#3a4350;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .ca-sz button:hover{border-color:#1a1f2b}
html body .ca-sz button.on{background:#1a1f2b;border-color:#1a1f2b;color:#fff}
html body .ca-sz button.out{text-decoration:line-through;color:#9aa1ab}
html body .ca-sz button .sh{display:none}
html body .bs-card.cpA .bs-szs.ca-dd{display:flex !important}
html body .bs-card.cpA .bs-szs:not(.ca-dd){display:none !important}
html body .bs-card.cpA .bs-sub{display:none !important}
html body .bs-card.cpA .bs-pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:auto !important;padding-top:2px}
html body .bs-card.cpA .bs-pr b{font:800 19px/1 'DM Sans',Poppins,sans-serif !important;color:#1a1f2b !important}
html body .bs-card.cpA .bs-pr s{font:500 13px/1 'DM Sans',Poppins,sans-serif !important;color:#9aa1ab !important}
html body .bs-card.cpA .bs-pr .ca-off{font:800 12px/1 'DM Sans',Poppins,sans-serif;color:#2f8f2f;white-space:nowrap}
html body .bs-card.cpA:not(.ca-one) .ca-dim{display:none !important}
html body .ca-dim{font:500 11.5px/1.3 'DM Sans',Poppins,sans-serif;color:#5b6472;margin-top:-4px !important}
html body .bs-card.cpA .bs-buy{margin-top:2px !important;padding:11px !important;border-radius:12px !important;font-size:12.5px !important;letter-spacing:.08em !important}
/* help tile */
html body .bs-list #datalist>li.cp-help{list-style:none}
html body .ca-help{height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:20px;background:linear-gradient(160deg,#eaf4fb,#f4f9ea);border:1px solid #d9e8f2}
html body .ca-help .tx{display:flex;flex-direction:column;gap:10px}
html body .ca-help .lk{display:flex;flex-direction:column;gap:10px}
html body .cp-help.wide .ca-help{flex-direction:row;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
html body .cp-help.wide .ca-help .tx{flex:1 1 320px}
html body .cp-help.wide .ca-help .lk{flex-direction:row;flex-wrap:wrap;flex:2 1 520px}
html body .cp-help.wide .ca-help .lk a{flex:1 1 200px}
html body .ca-help small{font:800 11px/1 'DM Sans',Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#1f78b4}
html body .ca-help h3{margin:0;font:400 28px/1.12 'DM Serif Display',Georgia,serif;color:#1a1f2b}
html body .ca-help p{margin:0;font:400 14px/1.6 'DM Sans',Poppins,sans-serif;color:#5b6472}
html body .ca-help a{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:#fff;font:700 13.5px/1.2 'DM Sans',Poppins,sans-serif;color:#1a1f2b !important;text-decoration:none !important;transition:transform .15s,box-shadow .15s}
html body .ca-help a:hover{transform:translateX(3px);box-shadow:0 6px 16px rgba(31,60,20,.10)}
html body .ca-help a i{flex:none;width:30px;height:30px;border-radius:8px;background:#f4f9ea;display:flex;align-items:center;justify-content:center;font-style:normal;color:#4f7a0a}
html body .ca-help a i svg{width:16px;height:16px}
@media (max-width:991px){html body .ca-help{padding:18px}html body .ca-help h3{font-size:24px}}
@media (max-width:600px){html body .cp-help:not(.wide) .ca-help{padding:12px;gap:10px}html body .cp-help:not(.wide) .ca-help h3{font-size:18px}html body .cp-help:not(.wide) .ca-help p{font-size:12px}html body .cp-help:not(.wide) .ca-help a{padding:9px;font-size:12px;gap:7px}html body .cp-help:not(.wide) .ca-help a i{width:24px;height:24px}html body .cp-help.wide .ca-help .lk a{flex-basis:100%}}
/* card A on phones */
@media (max-width:600px){
 html body .ca-head{padding-top:14px}
 html body .ca-head h1{font-size:36px !important}
 html body .ca-row p{font-size:13px;margin:0}
 html body .ca-tabs{margin-top:12px}
 html body .ca-tab{padding:11px 12px;font-size:13px}
 html body .ca-cnt{display:none}
 html body .bs-list .bs-card.cpA{border-radius:14px !important}
 html body .bs-card.cpA .bs-bd{padding:10px 10px 12px !important;gap:7px}
 html body .bs-card.cpA .bs-top h3,html body .bs-card.cpA .bs-top h3 a{font-size:14px !important}
 html body .bs-card.cpA .bs-rt,html body .bs-card.cpA .bs-rt b{font-size:11px !important}
 html body .ca-fm .t{font-size:10.5px}
 html body .ca-tags span{font-size:10px;padding:4px 6px}
 html body .ca-sz{gap:4px}
 html body .ca-sz button{padding:7px 0;font-size:11px}
 html body .ca-sz button .lg{display:none}
 html body .ca-sz button .sh{display:inline}
 html body .bs-card.cpA .bs-pr b{font-size:17px !important}
 html body .bs-card.cpA .bs-pr s{font-size:11px !important}
 html body .bs-card.cpA .bs-pr .ca-off{font-size:10.5px}
 html body .bs-card.cpA .bs-buy{padding:10px !important;font-size:11px !important;border-radius:10px !important}
 html body .bs-card.cpA .bs-off{left:8px !important;top:8px !important;font-size:9px !important;padding:5px 7px !important}
 html body .bs-card.cpA .bs-heart{right:8px !important;top:8px !important;width:28px !important;height:28px !important}
 html body .bs-card.cpA .bs-low{left:8px !important;top:34px !important;font-size:9.5px !important;padding:5px 7px 5px 18px !important}
 html body .ca-applied.empty{display:none}
}