/* Beauty Canada webshop — "Rouge & Slate" design system */
:root{
  --rouge:#9E2B2B; --rouge-deep:#7C2020; --coral:#C97B6A;
  --slate:#2D3138; --slate-panel:#23262B;
  --bone:#FBFAF7; --bone-alt:#F1ECE2; --canvas:#E8E2D6;
  --taupe:#D8CDBC; --line:#ECE6DB; --body:#574E45; --cap:#9a9384;
  --on-rouge:#F7F3EC; --on-rouge-tint:#F0D7Cf; --success:#3E7C5A;
  --maxw:1360px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;color:var(--slate);background:var(--canvas);line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--rouge);color:var(--on-rouge)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cfc6b6;border-radius:6px}
.serif{font-family:'Playfair Display',serif}
.script{font-family:'Alex Brush',cursive}
.cormorant{font-family:'Cormorant Garamond',serif}
.wrap{max-width:var(--maxw);margin:0 auto;background:var(--bone);box-shadow:0 0 80px rgba(45,49,56,.08);min-height:100vh}
.pad{padding:0 40px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--rouge);color:var(--on-rouge);
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:15px 28px;border:none;cursor:pointer;border-radius:2px;transition:background .15s}
.btn:hover{background:var(--rouge-deep)}
.btn.ghost{background:transparent;color:var(--slate);border:1px solid var(--slate)}
.btn.ghost:hover{background:var(--slate);color:var(--on-rouge)}
.btn.light{background:var(--on-rouge);color:var(--rouge)}
.btn.sm{padding:11px 20px;font-size:12px}
.eyebrow{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--rouge);font-weight:600}

/* ===== utility bar ===== */
.ubar{background:var(--slate);color:var(--canvas);display:flex;align-items:center;justify-content:space-between;
  padding:9px 40px;font-size:12px;letter-spacing:.08em}
.ubar .dot{width:6px;height:6px;border-radius:50%;background:var(--coral);display:inline-block;margin-right:8px}
.ubar a{opacity:.78;cursor:pointer}.ubar a:hover{opacity:1}
.ubar .acct{opacity:1;color:var(--on-rouge);font-weight:500;display:inline-flex;gap:7px;align-items:center}

/* ===== header ===== */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;border-bottom:1px solid var(--line);gap:30px;position:sticky;top:0;background:var(--bone);z-index:40}
.logo{display:flex;flex-direction:column;align-items:center;line-height:1;cursor:pointer}
.logo .name{font-family:'Alex Brush',cursive;font-size:42px;color:var(--slate)}
.logo .sub{display:flex;align-items:center;gap:9px;margin-top:-3px;font-family:'Cormorant Garamond',serif;font-size:10px;letter-spacing:.42em;text-transform:uppercase}
.logo .sub span{width:1px;height:9px;background:currentColor}
.nav{display:flex;gap:28px;font-size:14px;letter-spacing:.04em;font-weight:500;flex:1;justify-content:center}
.nav a{cursor:pointer;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a.on{border-color:var(--rouge)}
.nav a.sale{color:var(--rouge);font-weight:600}
.hdr-tools{display:flex;align-items:center;gap:16px}
.search{display:flex;align-items:center;gap:8px;background:var(--bone-alt);border:1px solid var(--line);border-radius:2px;padding:8px 12px;width:200px;color:var(--cap);font-size:13px}
.search input{border:none;background:transparent;outline:none;font-family:inherit;font-size:13px;color:var(--slate);width:100%}
.icon{cursor:pointer;color:var(--slate)}
.cart-ic{position:relative;cursor:pointer}
.cart-ic .badge{position:absolute;top:-7px;right:-8px;background:var(--rouge);color:#fff;font-size:10px;font-weight:600;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--bone);border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(45,49,56,.1);padding:26px 40px;display:none;z-index:39}
.mega.open{display:block}
.mega-grid{max-width:var(--maxw);margin:0 auto;display:flex;gap:50px;flex-wrap:wrap}
.mega a{display:block;font-size:14px;color:var(--body);padding:6px 0;cursor:pointer}
.mega a:hover{color:var(--rouge)}
.mega .mh{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--rouge);font-weight:600;margin-bottom:8px}

/* ===== promo banner ===== */
.promo{background:var(--slate);color:var(--on-rouge);display:flex;align-items:center;justify-content:space-between;padding:13px 40px;font-size:13px;letter-spacing:.04em;flex-wrap:wrap;gap:10px}
.promo .marks{display:flex;gap:30px;flex-wrap:wrap}
.promo .quick{cursor:pointer;color:var(--coral);font-weight:600;letter-spacing:.1em;text-transform:uppercase}

/* ===== home layout ===== */
.home-grid{display:grid;grid-template-columns:240px 1fr;gap:0}
.rail{border-right:1px solid var(--line);padding:24px 0}
.rail h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--rouge);font-weight:600;padding:0 24px 12px}
.rail a{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;font-size:14px;cursor:pointer;border-left:3px solid transparent}
.rail a:hover{border-color:var(--rouge);background:var(--bone-alt)}
.rail a span{color:#b8b0a1;font-size:12px}
.home-main{padding:24px 30px}
.mini-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:30px}
.mini-hero .a{background:linear-gradient(135deg,var(--rouge),var(--rouge-deep));color:var(--on-rouge);padding:36px 38px;display:flex;flex-direction:column;justify-content:center;border-radius:3px}
.mini-hero .b{background:linear-gradient(135deg,#D8C2B8,var(--coral));border-radius:3px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;color:var(--slate)}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sec-head h2{font-family:'Playfair Display',serif;font-size:26px;font-weight:600}
.sec-head .more{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge);font-weight:600;cursor:pointer}
.brands-strip{margin-top:34px;border-top:1px solid var(--line);padding-top:26px}
.brands-strip .lbl{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cap);font-weight:600;margin-bottom:18px}
.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.brand-cell{height:62px;border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:16px;font-weight:600;color:var(--body);text-align:center;padding:6px;cursor:pointer}
.brand-cell:hover{border-color:var(--rouge);color:var(--rouge)}

/* ===== product card ===== */
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{cursor:pointer;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--bone);display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 10px 26px rgba(45,49,56,.12);transform:translateY(-2px)}
.card .media{height:172px;position:relative;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden}
/* photos are low-res 200x150 — never upscale; show crisp at (or below) native size */
.card .media img{width:auto;height:auto;max-width:150px;max-height:140px;object-fit:contain}
.card .media .ph{width:36px;height:84px;background:rgba(45,49,56,.13);border-radius:6px 6px 3px 3px}
.tag{position:absolute;top:8px;left:8px;background:var(--rouge);color:var(--on-rouge);font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:4px 7px}
.card .body{padding:11px 12px 13px;flex:1;display:flex;flex-direction:column}
.card .brand{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cap);font-weight:600}
.card .title{font-size:13px;font-weight:500;margin:4px 0 8px;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{font-family:'Playfair Display',serif;font-size:18px;font-weight:600;color:var(--slate);margin-top:auto}
.price.locked{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.05em;color:var(--rouge);font-weight:600;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}

/* ===== collection ===== */
.crumb{font-size:13px;color:var(--cap);letter-spacing:.04em;margin-bottom:16px}
.crumb b{color:var(--slate);font-weight:500}
.col-head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px;gap:20px;flex-wrap:wrap}
.col-head h1{font-family:'Playfair Display',serif;font-size:40px;font-weight:700}
.col-head .desc{font-size:14px;color:var(--body);margin-top:6px}
.col-tools{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--body)}
.col-tools select{border:1px solid var(--line);border-radius:2px;padding:9px 12px;font-family:inherit;font-size:13px;background:#fff;cursor:pointer;color:var(--slate)}
.col-body{display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:start}
.filters .fgroup{border-bottom:1px solid var(--line);padding:16px 0}
.filters .fh{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:12px}
.filters label{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--body);margin-bottom:9px;cursor:pointer}
.filters input[type=checkbox]{accent-color:var(--rouge);width:15px;height:15px}
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap}
.pager .pg{min-width:38px;height:38px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;padding:0 8px}
.pager .pg.on{background:var(--slate);color:var(--on-rouge);border-color:var(--slate)}
.empty{padding:60px 0;text-align:center;color:var(--body)}

/* ===== product page ===== */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.gallery{display:flex;gap:16px}
.thumbs{display:flex;flex-direction:column;gap:12px}
.thumb{width:68px;height:68px;border:1px solid var(--line);border-radius:3px;cursor:pointer;background:#fff;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.thumb.on{border-color:var(--rouge)}
.main-img{flex:1;aspect-ratio:1/1;background:#fff;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
/* low-res source — cap at native size so the PDP image stays sharp */
.main-img img{width:auto;height:auto;max-width:200px;max-height:190px;object-fit:contain}
.pdp h1{font-family:'Playfair Display',serif;font-size:34px;font-weight:700;line-height:1.12;margin-bottom:12px}
.rating{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--cap);margin-bottom:22px;flex-wrap:wrap}
.rating .stars{color:var(--coral)}
.gate{background:var(--bone-alt);border:1px solid var(--line);border-radius:3px;padding:20px 22px;margin-bottom:24px}
.gate .lock-h{display:flex;align-items:center;gap:10px;font-family:'Playfair Display',serif;font-size:22px;font-weight:600;margin-bottom:8px}
.gate .big{font-family:'Playfair Display',serif;font-size:36px;font-weight:700}
.gate .big small{font-size:15px;color:var(--cap);font-weight:400}
.gate .stock{font-size:13px;color:var(--success);font-weight:600}
.opt-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.opt{border:1px solid var(--line);border-radius:2px;padding:10px 18px;font-size:14px;color:var(--body);cursor:pointer}
.opt.on{border:1.5px solid var(--slate);color:var(--slate)}
.qtyrow{display:flex;gap:14px;margin-bottom:26px}
.qty{display:flex;align-items:center;border:1px solid #d8cfc0;border-radius:2px}
.qty span.b{padding:13px 17px;cursor:pointer;font-size:18px;color:var(--body);user-select:none}
.qty span.n{padding:0 10px;font-size:15px;font-weight:600;min-width:36px;text-align:center}
.acc .item{border-bottom:1px solid var(--line);padding:16px 0;cursor:pointer}
.acc .q{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:500}
.acc .a{font-size:14px;color:var(--body);line-height:1.6;max-height:0;overflow:hidden;transition:max-height .25s;padding-top:0}
.acc .item.open .a{max-height:260px;padding-top:12px}
.lbl{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:12px}

/* ===== cart ===== */
.cart-grid{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.cart-h{display:flex;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cap);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:14px}
.cart-row{display:flex;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.cart-row .pinfo{flex:1;display:flex;align-items:center;gap:16px}
.cart-row .pimg{width:72px;height:72px;background:#fff;border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cart-row .pimg img{width:100%;height:100%;object-fit:contain;padding:4px}
.summary{background:var(--bone-alt);border:1px solid var(--line);border-radius:3px;padding:26px;position:sticky;top:90px}
.summary h3{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;margin-bottom:20px}
.summary .ln{display:flex;justify-content:space-between;font-size:14px;color:var(--body);margin-bottom:12px}
.summary .tot{border-top:1px solid var(--line);margin:14px 0;padding-top:14px;display:flex;justify-content:space-between;font-size:17px;font-weight:600}
.note{background:#fff;border:1px solid var(--line);border-radius:3px;padding:14px 16px;font-size:13px;color:var(--body);line-height:1.5;margin-bottom:16px}
.remove{font-size:12px;color:var(--rouge);margin-top:6px;cursor:pointer}

/* ===== account ===== */
.acct-grid{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.acct-side{background:var(--slate);color:var(--on-rouge);padding:64px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.acct-side .blob{position:absolute;right:-160px;top:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 40% 40%,var(--rouge),var(--slate) 72%);opacity:.7}
.acct-side .z{position:relative;z-index:2;max-width:420px}
.acct-side .pt{font-family:'Playfair Display',serif;font-size:23px;font-weight:600;margin-bottom:6px}
.acct-side .pd{font-size:15px;color:#C9C0B2;line-height:1.55}
.acct-form{padding:64px;display:flex;flex-direction:column;justify-content:center;background:var(--bone)}
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:30px}
.tabs .tab{padding-bottom:14px;font-size:16px;font-weight:500;color:var(--cap);cursor:pointer}
.tabs .tab.on{font-weight:600;color:var(--slate);border-bottom:2px solid var(--rouge)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--body);margin-bottom:7px}
.field input{width:100%;border:1px solid #d8cfc0;border-radius:2px;padding:13px 14px;font-size:15px;font-family:inherit;outline:none;background:#fff}
.field input:focus{border-color:var(--rouge)}
.hint{margin-top:22px;background:var(--bone-alt);border:1px solid var(--line);border-radius:3px;padding:13px 15px;font-size:13px;color:var(--body);line-height:1.5}

/* ===== trade band / value props ===== */
.trade-band{background:var(--rouge);color:var(--on-rouge);padding:50px 64px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.trade-band h2{font-family:'Playfair Display',serif;font-size:34px;font-weight:600;margin-bottom:10px}
.trade-band p{font-size:16px;color:var(--on-rouge-tint);max-width:560px;line-height:1.5}
.vprops{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.vprops .v{padding:36px 40px;border-right:1px solid var(--line)}
.vprops .v:last-child{border-right:none}
.vprops .v h3{font-family:'Playfair Display',serif;font-size:20px;font-weight:600;margin-bottom:8px}
.vprops .v p{font-size:14px;color:var(--body);line-height:1.55}

/* ===== footer ===== */
.ftr{background:var(--slate);color:var(--taupe);padding:56px 40px 26px}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(216,205,188,.18)}
.ftr .script{font-size:40px;color:var(--on-rouge);line-height:1}
.ftr p{font-size:14px;line-height:1.6;margin-top:12px;max-width:280px}
.ftr .fh{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);margin-bottom:14px;font-weight:600}
.ftr .fcol a{display:block;font-size:14px;margin-bottom:10px;cursor:pointer}
.ftr .fcol a:hover{color:var(--on-rouge)}
.news{display:flex;border:1px solid rgba(216,205,188,.3)}
.news input{flex:1;background:transparent;border:none;outline:none;color:var(--on-rouge);padding:11px 13px;font-size:13px;font-family:inherit}
.news .j{background:var(--rouge);color:var(--on-rouge);display:flex;align-items:center;padding:0 18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.ftr-base{display:flex;justify-content:space-between;padding-top:20px;font-size:12px;color:#8A8378;flex-wrap:wrap;gap:10px}
.ftr-base .lks{display:flex;gap:22px;flex-wrap:wrap}

/* ===== toast / modal ===== */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--slate);color:var(--on-rouge);
  padding:14px 22px;border-radius:3px;font-size:14px;box-shadow:0 14px 30px rgba(45,49,56,.3);opacity:0;pointer-events:none;transition:.25s;z-index:90}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:fixed;inset:0;background:rgba(35,38,43,.6);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.open{display:flex}
.modal .box{background:var(--bone);border-radius:4px;max-width:460px;width:100%;padding:38px;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.modal h3{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;margin-bottom:12px}
.modal p{font-size:14px;color:var(--body);line-height:1.6;margin-bottom:20px}

/* ===== responsive ===== */
@media(max-width:1000px){
  .home-grid{grid-template-columns:1fr}.rail{display:none}
  .col-body{grid-template-columns:1fr}.filters{display:none}
  .pdp{grid-template-columns:1fr;gap:30px}
  .cart-grid{grid-template-columns:1fr}.acct-grid{grid-template-columns:1fr}.acct-side{display:none}
  .vprops{grid-template-columns:1fr}.vprops .v{border-right:none;border-bottom:1px solid var(--line)}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:repeat(3,1fr)}
  .nav,.search{display:none}
  .mini-hero{grid-template-columns:1fr}
}
@media(max-width:640px){
  .pad,.hdr,.ubar,.promo{padding-left:18px;padding-right:18px}
  .home-main{padding:18px}
  .g4,.g3{grid-template-columns:repeat(2,1fr)}
  .brand-grid{grid-template-columns:repeat(3,1fr)}
  .col-head h1{font-size:30px}.pdp h1{font-size:26px}
  .ftr-grid{grid-template-columns:1fr}
  .trade-band{padding:36px 24px}
}