/* Nailan home sections + shared product card (ported from the prototype) */
:root{--hero-1:#F0E9FA;--blob-1:#E3D6F5;--blob-2:#FFDCCB;--promo-1:#FBE3D6;--promo-2:#DDEBE2;--out-bg:#EAE6F0;--teal:#2F6F5E;--teal-l:#E2F1EA;--skel-a:#ece7f4;--skel-b:#f5f2fa}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:var(--r-pill);border:1.5px solid transparent;font-weight:700;font-size:var(--t-md);transition:.18s;white-space:nowrap}
.btn-pri{background:var(--brand);color:#fff}.btn-pri:hover{background:var(--brand-d)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#000}
.btn-out{background:transparent;border-color:var(--line-2);color:var(--ink)}.btn-out:hover{border-color:var(--ink)}
.btn-soft{background:var(--brand-l);color:var(--brand-d)}.btn-soft:hover{background:var(--brand-l2)}
.btn-wa{background:#E8F7EE;color:#12693A}.btn-wa:hover{background:#d4f0df}
.btn-sm{min-height:36px;padding:0 14px;font-size:var(--t-sm)}.btn-lg{min-height:52px;padding:0 30px;font-size:var(--t-lg)}.btn-block{width:100%}
.btn[disabled],.btn.off{opacity:.45;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line);font-size:var(--t-sm);transition:.15s;white-space:nowrap}
.chip:hover{border-color:var(--brand);color:var(--brand-d)}.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:700}
.tag-sale{background:var(--rose);color:#fff}.tag-ok{background:var(--teal-l);color:var(--teal)}.tag-out{background:var(--out-bg);color:var(--mute)}.tag-new{background:var(--brand-l);color:var(--brand-d)}
.nl-sec{padding:56px 0}.nl-sec-tight{padding:32px 0}.nl-sec.alt{background:var(--sand)}
.nl-sec-h{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}.nl-sec-h h2{font-size:var(--t-2xl)}.nl-sec-h p{margin:4px 0 0;color:var(--mute)}
.more{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--brand-d);font-size:var(--t-sm)}
/* hero */
.nl-hero{background:linear-gradient(180deg,var(--hero-1),var(--ivory));overflow:hidden}
.nl-hero .nl-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;min-height:540px;padding-block:36px}
.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:5px 14px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line);font-size:var(--t-sm);font-weight:600;color:var(--brand-d)}
.nl-hero h1{font-size:clamp(30px,4.2vw,54px);line-height:1.35;margin:18px 0 14px;font-weight:900;letter-spacing:-.5px}.nl-hero h1 em{font-style:normal;color:var(--brand)}
.nl-hero p.lead{font-size:var(--t-lg);color:var(--ink-2);max-width:520px;margin:0 0 26px}
.nl-hero .ctas{display:flex;gap:12px;flex-wrap:wrap}.nl-hero .quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.collage{position:relative;height:480px;max-width:470px;width:100%;justify-self:center}
.collage .c{position:absolute;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:12px;width:230px;transition:transform .3s}
.collage .c img{aspect-ratio:1;object-fit:contain;width:100%}.collage .c b{display:block;font-size:var(--t-sm);line-height:1.6;margin-top:6px;max-height:3.2em;overflow:hidden}.collage .c .pr{font-weight:800;color:var(--brand-d);font-size:var(--t-sm)}
.collage .c1{left:0;top:40px;transform:rotate(-4deg)}.collage .c2{left:240px;top:0;transform:rotate(3deg)}.collage .c3{left:130px;bottom:0;transform:rotate(-1deg);width:240px}
.collage .c:hover{transform:rotate(0) translateY(-4px)}
.blob{position:absolute;inset:30px 40px;background:radial-gradient(circle at 30% 30%,var(--blob-1),transparent 60%),radial-gradient(circle at 75% 70%,var(--blob-2),transparent 55%);border-radius:50%;filter:blur(6px)}
.nl-trust{background:var(--paper);border-block:1px solid var(--line)}.nl-trust .trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-block:20px}
.nl-trust .t{display:flex;gap:12px;align-items:center}.nl-trust .t .ic{width:46px;height:46px;border-radius:14px;background:var(--brand-l);color:var(--brand-d);display:grid;place-items:center}.nl-trust b{display:block;font-size:var(--t-sm)}.nl-trust span{font-size:var(--t-xs);color:var(--mute)}

/* category tiles */
.tiles{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 10px 16px;text-align:center;transition:.2s;display:block}
.tile:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--sh-1)}
.tile .ph{aspect-ratio:1;border-radius:50%;background:var(--sand);display:grid;place-items:center;margin:0 auto 10px;width:100%;max-width:120px;overflow:hidden}.tile .ph img{width:78%;height:78%;object-fit:contain}
.tile b{display:block;font-size:var(--t-md)}.tile span{font-size:var(--t-xs);color:var(--mute)}

/* product card */
.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}.rail>*{scroll-snap-align:start}
.pc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:.2s}
.pc:hover{box-shadow:var(--sh-2);border-color:transparent;transform:translateY(-2px)}
.pc .im{display:block;aspect-ratio:1;background:#fff;padding:14px;position:relative}.pc .im img{width:100%;height:100%;object-fit:contain}
.pc .tags{position:absolute;top:10px;inset-inline-start:10px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.pc .fav{position:absolute;top:8px;inset-inline-end:8px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2)}.pc .fav.on{color:var(--rose);background:var(--rose-l)}.pc .fav.on svg{fill:currentColor}
.pc .bd{padding:4px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.pc .br{font-size:var(--t-xs);color:var(--brand-d);font-weight:700}
.pc h3{font-size:var(--t-sm);font-weight:600;line-height:1.7;min-height:3.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc .pr{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}.pc .pr b{font-size:var(--t-lg);font-weight:800}.pc .pr s{color:var(--mute);font-size:var(--t-xs)}.pc .pr small{font-size:var(--t-xs);color:var(--mute)}
.pc .row{display:flex;gap:8px;align-items:center;margin-top:8px}.pc .row .btn{flex:1}
.pc.out .im img{filter:grayscale(1);opacity:.55}.pc.out .pr b{color:var(--mute)}

/* promo + brands + needs */
.promos{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.promo{border-radius:var(--r-lg);padding:28px 32px;display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:center;min-height:270px;overflow:hidden;color:var(--ink)}
.promo .tx{display:flex;flex-direction:column;gap:10px;align-items:flex-start}.promo h3{font-size:var(--t-2xl)}.promo p{margin:0;color:var(--ink-2)}
.promo img{width:100%;height:230px;object-fit:contain;mix-blend-mode:multiply}
.brands{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.brand{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 10px;text-align:center;transition:.15s;display:block}.brand:hover{border-color:var(--brand)}
.brand b{display:block;font-size:var(--t-md)}.brand i{font-style:normal;display:block;direction:ltr;color:var(--brand-d);font-weight:800;letter-spacing:.5px;font-size:var(--t-sm);margin-top:2px}.brand span{font-size:var(--t-xs);color:var(--mute)}
.tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:20px}
.needs{display:flex;flex-wrap:wrap;gap:10px}.needs .chip{padding:10px 18px;font-size:var(--t-md);background:var(--paper)}

/* blog */
.posts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.post{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:block}.post:hover{box-shadow:var(--sh-1)}
.post img{aspect-ratio:16/10;object-fit:cover;width:100%}.post div{padding:14px}.post small{color:var(--brand-d);font-weight:700;font-size:var(--t-xs)}.post h3{font-size:var(--t-md);margin-top:4px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* footer */
/* wrappers + Elementor resets for the home page */
.nl-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.nl-hero,.nl-trust,.nl-sec{display:block;width:100%}
.nl-sec,.nl-hero,.nl-trust{font-family:var(--f);color:var(--ink);line-height:1.8}
:where(.nl-sec,.nl-hero,.nl-trust) a{color:inherit;text-decoration:none}
.nl-sec h2,.nl-sec h3,.nl-hero h1{font-family:var(--f);color:var(--ink);line-height:1.4;margin:0}
.nl-sec img,.nl-hero img{max-width:100%;display:block}
.btn:hover{text-decoration:none}.btn-pri,.btn-pri:hover,.btn-dark,.btn-dark:hover{color:#fff}
.nl-sec .pc a.btn-soft{color:var(--brand-d)}
.pc .im img{height:100%}.pc.out .pr b{color:var(--mute)}
.pc .row .btn.added{background:var(--sage-l);color:var(--sage)}.pc .row a.added_to_cart{display:none}
.nl-hero{background:linear-gradient(180deg,var(--hero-1),var(--ivory))}
.seo{font-size:var(--t-sm);color:var(--ink-2);max-width:900px}.seo h2{font-size:var(--t-xl);margin-bottom:8px}
.nl-sec .fresh [hidden]{display:none!important}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(4,1fr)}.brands{grid-template-columns:repeat(4,1fr)}.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
 :root{--gut:16px}
 .nl-hero .nl-wrap{grid-template-columns:1fr;min-height:0;gap:10px;padding-block:28px}.collage{display:none}
 .nl-trust .trust-in{grid-template-columns:1fr 1fr}.nl-sec{padding:36px 0}.sec-h h2{font-size:var(--t-xl)}
 .tiles{grid-template-columns:repeat(3,1fr);gap:10px}.g4,.g3,.g5{grid-template-columns:repeat(2,1fr);gap:10px}.rail{grid-auto-columns:62%}
 .promos{grid-template-columns:1fr}.promo{min-height:0;padding:20px;grid-template-columns:1.2fr 1fr}.promo h3{font-size:var(--t-lg)}.promo p{font-size:13px}.promo img{height:150px}.brands{grid-template-columns:repeat(3,1fr)}.posts{grid-template-columns:1fr 1fr;gap:10px}
}

.pc h3{max-height:3.4em;font-size:var(--t-sm);font-weight:600}.pc h3 a{display:inline}
.collage .c b,.collage .c .pr{font-family:var(--f)}

/* ---- global (home + every page that shows product cards) ---- */
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}.sec-h h2{margin:0}.sec-h p{margin:4px 0 0;color:var(--mute)}.sec-h .more{white-space:nowrap}
.pc{position:relative}
.wish{position:absolute;top:10px;inset-inline-end:10px;width:36px;height:36px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:var(--sh-1);display:grid;place-items:center;cursor:pointer;z-index:2;color:var(--ink-2)}
.wish:hover,.wish:focus-visible{background:#fff;color:var(--rose)}
.wish svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}.wish.on{color:var(--rose)}.wish.on svg{fill:var(--rose);stroke:var(--rose)}
button.chip{font:inherit;font-size:var(--t-sm);color:var(--ink);background:var(--paper);border:1px solid var(--line);cursor:pointer}
button.chip:hover{background:var(--brand-l);color:var(--brand-d);border-color:var(--brand)}
button.chip.on,button.chip.on:hover{background:var(--ink);color:#fff;border-color:var(--ink)}