:root{--header:#4d6c6b;--page:#f7f6f0;--grey:#d9d9d9;--teal:#1d605e;--teal-d:#14463f;--ink:#1a2b29;--gold:#e8a817;--radius:16px;--pad:76px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{font-family:'Inter',sans-serif;background:var(--page);color:var(--ink);line-height:1.4;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid #2bd34f;outline-offset:2px}
.container{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--pad)}

/* Header */
.header{position:sticky;top:0;z-index:50;background:var(--header)}
.topbar{height:56px;border-bottom:2px solid #e9efee}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;height:100%;position:relative}
.topbar__contact,.topbar__icons{display:flex;align-items:center;gap:14px}
.logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.logo img{height:38px;width:auto}
.icon-btn{position:relative;display:grid;place-items:center;margin-left:6px}
.badge{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#2bd34f;color:#073b1b;font-size:11px;font-weight:700;display:grid;place-items:center}
.nav{height:56px;color:#fff}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.nav__links{display:flex;gap:52px;font-size:18px;font-weight:500}
.nav__links a{padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.nav__links a:hover{border-color:#fff}
.nav__toggle{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:6px}
.nav__toggle span{display:block;height:2px;background:#fff;border-radius:2px}
.search{display:flex;align-items:center;gap:8px;width:224px;height:30px;padding:0 12px;background:#f1f3f2;border-radius:8px}
.search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:11px;color:#333;outline:0}
.search input::placeholder{color:#777}

/* Hero */
.hero{background:url(../images/hero.jpg) center/cover no-repeat;min-height:486px;display:flex;align-items:center}
.hero__eyebrow{font-size:34px;font-weight:500;color:#3a5f58;letter-spacing:.2px;margin-bottom:-4px}
.hero__title{font-size:64px;font-weight:600;line-height:.95;color:var(--teal-d);letter-spacing:-.5px;margin-bottom:26px}
.hero__text{max-width:460px;font-size:18px;line-height:1.55;color:#1a1a1a;margin-bottom:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--teal);color:#fff;font-weight:500;border-radius:6px;transition:background .2s,transform .1s}
.btn:hover{background:var(--teal-d)}.btn:active{transform:scale(.97)}
.btn--lg{height:60px;padding:0 40px;font-size:20px}
.btn--sm{height:37px;padding:0 26px;font-size:18px}

/* Sections */
.section{padding-top:50px}
.section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.section h2,.why h2,.footer__pay h2{font-size:36px;font-weight:500;color:var(--teal);letter-spacing:-.3px}
.view-all{font-size:20px;font-weight:600;color:var(--teal)}
.view-all:hover{text-decoration:underline}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cat-card{background:var(--grey);border-radius:var(--radius);overflow:hidden;display:block}
.cat-card img{width:100%;aspect-ratio:413/424;object-fit:cover;transition:transform .4s}
.cat-card:hover img{transform:scale(1.03)}
.cat-card{overflow:hidden}
.cat-card__body{position:relative;background:var(--grey);padding:26px 33px 24px}
.cat-card h3{font-size:20px;font-weight:500;color:var(--teal-d);margin-bottom:8px}
.cat-card span{font-size:20px;font-weight:500;color:#5b807c}
.cat-card:hover span{color:var(--teal)}
#trending{padding-top:62px}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.prod{background:#fff;border:1px solid #dcdcdc;border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s}
.prod:hover{box-shadow:0 8px 24px rgba(0,0,0,.08)}
.prod__img{position:relative;background:var(--grey)}
.prod__img img{width:100%;aspect-ratio:304/262;object-fit:cover}
.wish{position:absolute;top:10px;right:12px;font-size:24px;line-height:1;color:var(--teal);opacity:0;transition:opacity .2s}
.prod:hover .wish,.wish[aria-pressed=true],.wish:focus-visible{opacity:1}
.wish[aria-pressed=true]{color:#d83a3a}
.prod__body{padding:20px 33px 30px}
.prod__row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.prod h3{font-size:20px;font-weight:500;color:var(--teal-d)}
.rating{text-align:right;flex-shrink:0;margin-right:-30px;line-height:1.1}
.stars{--r:5;display:inline-block;font-size:13px;letter-spacing:1px;background:linear-gradient(90deg,var(--gold) calc(var(--r)/5*100%),#ddd 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.rating small{display:block;font-size:11px;color:#333;margin-right:30px}
.price{font-size:20px;font-weight:600;color:#2a7a6f;margin:10px 0 18px}
.no-results{margin-top:20px;font-size:18px;color:var(--teal)}
.why{background:var(--grey);border-radius:var(--radius);padding:34px 33px 33px}
.why__list{display:flex;justify-content:space-between;gap:20px;margin-top:22px;flex-wrap:wrap}
.why__list li{display:flex;align-items:center;gap:14px}
.why__list img{width:72px;height:72px;border-radius:50%}
.why__list strong{display:block;font-size:20px;font-weight:600;color:var(--ink)}
.why__list span{font-size:14px;color:var(--teal)}

/* Footer */
.footer{background:var(--grey);margin-top:80px;padding:50px 0 0}
.footer__top{display:grid;grid-template-columns:1.9fr 1.25fr 1fr .6fr;gap:20px;padding-bottom:50px}
.footer__logo img{width:346px;max-width:100%;margin-left:-14px}
.footer h4{font-size:20px;font-weight:600;color:var(--teal);margin:10px 0 14px}
.footer__col li{margin-bottom:8px}
.footer__col a{font-size:14px;color:#222;display:inline-flex;align-items:center;gap:12px}
.footer__col a:hover{color:var(--teal);text-decoration:underline}
.footer__pay{display:flex;align-items:center;gap:22px;padding-top:30px;padding-bottom:52px;flex-wrap:wrap}
.footer__pay h2{margin-right:34px}
.footer__pay img{height:38px;width:auto}
.copyright{padding:22px 0 30px;font-size:14px;color:#222}

/* Cart drawer + toast */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(400px,100%);background:#fff;z-index:100;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s}
.drawer.open{transform:none}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e3e3e3}
.drawer__head h3{font-size:22px;color:var(--teal)}
.drawer__head button{font-size:32px;line-height:1}
.drawer__items{flex:1;overflow:auto;padding:12px 24px}
.drawer__items .empty{padding:40px 0;text-align:center;color:#666}
.ci{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #eee}
.ci img{width:64px;height:64px;object-fit:cover;border-radius:8px;background:var(--grey)}
.ci h4{font-size:15px;font-weight:500}.ci p{font-size:14px;color:#2a7a6f;font-weight:600}
.qty{display:flex;align-items:center;gap:8px;margin-top:6px}
.qty button{width:24px;height:24px;border-radius:6px;background:var(--grey);font-weight:700}
.ci .rm{font-size:22px;color:#888}
.drawer__foot{padding:20px 24px;border-top:1px solid #e3e3e3}
.drawer__total{display:flex;justify-content:space-between;font-size:18px;margin-bottom:14px}
.drawer__foot .btn{width:100%;font-size:17px}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,30px);background:var(--teal-d);color:#fff;padding:12px 22px;border-radius:8px;font-size:15px;opacity:0;pointer-events:none;transition:.3s;z-index:120}
.toast.show{opacity:1;transform:translate(-50%,0)}
[hidden]{display:none!important}

/* Responsive */
@media(max-width:1100px){:root{--pad:32px}.prod-grid{grid-template-columns:repeat(2,1fr)}.nav__links{gap:28px;font-size:16px}.hero__title{font-size:52px}.footer__top{grid-template-columns:1fr 1fr}.footer__logo{grid-column:1/-1}}
@media(max-width:760px){:root{--pad:18px}
.nav__toggle{display:flex}.nav{height:auto;min-height:56px}.nav__inner{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
.nav__links{display:none;order:3;flex-direction:column;gap:0;width:100%}.nav__links.open{display:flex}.nav__links a{display:block;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.search{flex:1;margin-left:12px;width:auto;height:34px}.search input{font-size:13px}
.topbar__contact{gap:8px}.logo img{height:28px}.icon-btn svg{width:24px;height:24px}
.hero{min-height:420px;background-position:70% center}.hero__eyebrow{font-size:22px}.hero__title{font-size:38px}.hero__text{font-size:16px}.btn--lg{height:52px;font-size:18px;padding:0 28px}
.section h2,.why h2,.footer__pay h2{font-size:26px}.view-all{font-size:16px}
.cat-grid{grid-template-columns:1fr}.prod-grid{grid-template-columns:1fr 1fr;gap:12px}
.prod__body{padding:14px}.prod h3{font-size:16px}.prod__row{flex-direction:column}.rating{margin:0;text-align:left}.rating small{margin:0;display:inline;margin-left:4px}.price{font-size:17px}.btn--sm{font-size:15px;padding:0 16px}
.wish{opacity:1}.why__list{flex-direction:column}.footer__top{grid-template-columns:1fr}.footer{margin-top:50px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== Listing pages (Mobile Accessories) ===== */
.announce{background:var(--page);color:#e02f2f;text-align:center;font-size:14px;padding:6px 12px;height:31px;line-height:19px}
.nav__links a[aria-current=page]{border-color:#fff}
.catalog{--u:min(1.365px,max(1px,.0948vw));padding-top:calc(34*var(--u))}
.catalog .section__head{margin-bottom:calc(22*var(--u))}
.catalog h1{font-size:calc(28*var(--u));font-weight:500;color:var(--teal);letter-spacing:-.2px}
.catalog .view-all{font-size:calc(15*var(--u));align-self:flex-end}
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);column-gap:calc(12.25*var(--u));row-gap:calc(60*var(--u))}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid #dcdcdc;border-radius:calc(12*var(--u));overflow:hidden;transition:box-shadow .2s}
.pcard:hover{box-shadow:0 6px 20px rgba(0,0,0,.1)}
.pcard__img{position:relative;background:var(--grey)}
.pcard__img img{width:100%;aspect-ratio:178/192;object-fit:cover}
.pcard__off{position:absolute;top:calc(8*var(--u));left:calc(14*var(--u));font-size:calc(13*var(--u));color:#e02f2f;font-weight:400}
.pcard .wish{top:calc(8*var(--u));right:calc(8*var(--u));font-size:calc(18*var(--u))}
.pcard:hover .wish,.pcard .wish[aria-pressed=true],.pcard .wish:focus-visible{opacity:1}
.pcard__body{display:flex;flex-direction:column;flex:1;padding:calc(10*var(--u)) calc(6*var(--u)) calc(9*var(--u)) calc(6*var(--u));min-height:calc(94*var(--u))}
.pcard h3{font-size:calc(8.2*var(--u));font-weight:400;line-height:1.5;color:#222;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:0}
.pcard .price{font-size:calc(14*var(--u));font-weight:600;color:#2a7a6f;margin:calc(6*var(--u)) 0 0}
.pcard__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:calc(6*var(--u))}
.pcard .btn{height:calc(20*var(--u));min-width:calc(62*var(--u));padding:0 calc(4*var(--u));font-size:calc(8*var(--u));border-radius:calc(4*var(--u));font-weight:500}
.pcard .rating{margin:0;display:flex;align-items:center;gap:2px;white-space:nowrap}
.pcard .stars{font-size:calc(9*var(--u));letter-spacing:0}
.pcard .rating small{display:inline;margin:0;font-size:calc(7.5*var(--u))}
.pager{display:flex;justify-content:flex-end;align-items:center;gap:calc(8*var(--u));margin-top:calc(50*var(--u));font-size:calc(10*var(--u));color:#333}
.pager button{width:calc(20*var(--u));height:calc(20*var(--u));min-width:20px;min-height:20px;border-radius:4px;background:var(--grey);font-size:calc(11*var(--u));display:grid;place-items:center}
.pager button:hover:not(:disabled){background:#bfc9c7}
.pager button.active{background:var(--teal);color:#fff}
.pager button:disabled{opacity:.5;cursor:default}
.catalog + .section{padding-top:calc(48*var(--u,1px))}
@media(max-width:1100px){.pgrid{grid-template-columns:repeat(3,1fr);gap:16px}.pcard h3{font-size:12px}.pcard .price{font-size:17px}.pcard .btn{font-size:12px;height:28px;padding:0 12px}.pcard .stars{font-size:11px}.pcard .rating small{font-size:10px}.catalog h1{font-size:30px}.catalog .view-all{font-size:16px}.pager button{font-size:13px}}
@media(max-width:760px){.pgrid{grid-template-columns:1fr 1fr;gap:12px}.pcard__body{padding:10px}.pcard__foot{flex-direction:column;align-items:flex-start;gap:8px}.pcard .btn{width:100%}.catalog h1{font-size:24px}}

/* ===== Product detail ===== */
.catalog .catalog__title{font-size:calc(28*var(--u));font-weight:500;color:var(--teal);letter-spacing:-.2px}
.pd{display:grid;grid-template-columns:657fr 560fr;gap:84px;padding-top:36px;margin-bottom:34px;align-items:start}
.pd__box{background:var(--grey);border-radius:22px;overflow:hidden;padding-bottom:66px}
.pd__main{height:388px;display:flex;align-items:center;justify-content:center;background:var(--grey)}
.pd__main img{width:100%;height:100%;object-fit:contain}
.pd__thumbs{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 20px}
.pd__arrow{display:grid;place-items:center;width:40px;height:60px;flex-shrink:0;transition:opacity .2s}
.pd__arrow:hover{opacity:.6}.pd__arrow[hidden]{display:none}
.pd__strip{display:flex;gap:14px;overflow:hidden}
.pd__strip button{width:99px;height:99px;flex-shrink:0;border:1.5px solid #4a4a4a;border-radius:13px;overflow:hidden;background:#fff;padding:0}
.pd__strip button.active{border:3px solid var(--teal)}
.pd__strip img{width:100%;height:100%;object-fit:cover}
.pd__info h1{font-size:22px;font-weight:500;line-height:43px;color:var(--teal-d);margin:2px 0 12px}
.pd__note{font-size:15px;line-height:25px;color:#222;margin-left:2px}
.pd__price{font-size:36px;font-weight:600;color:#2e8b83;margin:16px 0 0;line-height:1.2;letter-spacing:-.3px}
.pd__old{font-size:17px;margin-top:2px;margin-left:2px}
.pd__old s{color:#777;margin-right:12px}
.pd__label{font-size:15px;margin:26px 0 12px 2px;color:#222}
.pd__colors{display:flex;gap:14px}
.sw{width:52px;height:52px;border-radius:11px;border:1.5px solid transparent;transition:box-shadow .15s}
.sw--dark{background:#14393a}.sw--white{background:#fff;border-color:#777}.sw--teal{background:var(--teal)}
.sw.active{box-shadow:0 0 0 2px var(--page),0 0 0 4px #14393a}
.pd__qty{display:flex;width:221px;height:52px;border:1.5px solid #555;border-radius:11px;overflow:hidden}
.pd__qty button{width:46px;font-size:18px;background:transparent}
.pd__qty button:hover{background:#cfd6d4}
.pd__qty input{flex:1;min-width:0;text-align:center;border:0;border-left:1.5px solid #555;border-right:1.5px solid #555;background:var(--grey);font:inherit;font-size:17px;color:#222;-moz-appearance:textfield}
.pd__qty input::-webkit-outer-spin-button,.pd__qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pd__actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.pd__buy,.pd__add{height:52px;border-radius:11px;color:#fff;font-size:20px;font-weight:500;transition:filter .2s,transform .1s}
.pd__buy{width:165px;background:var(--teal)}
.pd__add{width:179px;background:#2e8b83}
.pd__buy:hover,.pd__add:hover{filter:brightness(.92)}.pd__buy:active,.pd__add:active{transform:scale(.97)}
.pd__wish{width:52px;height:52px;border-radius:11px;background:var(--grey);border:1.5px solid #888;display:grid;place-items:center}
.pd__wish[aria-pressed=true]{background:#d83a3a;border-color:#d83a3a}
.pcard__img img,.pcard h3,.pcard .price,.prod__img img,.prod h3{cursor:pointer}
@media(max-width:900px){.pd{grid-template-columns:1fr;gap:28px}.pd__main{height:300px}.pd__strip button{width:64px;height:64px}.pd__thumbs{padding:0 8px;gap:4px}.pd__arrow{width:28px}.pd__info h1{font-size:18px;line-height:30px}.pd__price{font-size:30px}.pd__buy,.pd__add{flex:1;width:auto}}

/* ===== Auth / Contact / About pages ===== */
body.alt{background:#fff}
.alt .footer{margin-top:0}
main.auth{font-family:'Manrope','Inter',sans-serif;padding:100px var(--pad) 80px;text-align:center;min-height:600px}
.auth__title{font-size:61px;font-weight:700;line-height:70px;color:var(--teal);letter-spacing:-.5px}
.auth__sub{font-size:17px;font-weight:600;color:#222;margin:2px 0 62px}
.auth__form{width:672px;max-width:100%;margin:100px auto 0;text-align:left}
.auth--reset .auth__title{margin-bottom:0}.auth--reset .auth__form{margin-top:0}
.field{margin-bottom:24px}
.field input,.field textarea{width:100%;height:70px;padding:0 33px;border:1px solid #8a8a8a;border-radius:15px;background:#fff;font:inherit;font-size:21px;font-weight:600;color:#222;outline:0;transition:border-color .2s,box-shadow .2s}
.field textarea{height:186px;padding:30px 33px;resize:vertical;font-weight:500}
.field input::placeholder,.field textarea::placeholder{color:#555;opacity:1}
.auth__form--fill .field input{background:var(--page)}
.field input:focus,.field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(29,96,94,.18)}
.field.invalid input,.field.invalid textarea{border-color:#d83a3a}
.err{min-height:0;margin:6px 4px 0;font-size:14px;font-weight:600;color:#d83a3a}
.err:empty{display:none}
.auth__small{font-size:17px;font-weight:500;color:#222}
.auth__small:hover{color:var(--teal);text-decoration:underline}
.auth__forgot{display:inline-block;margin:-14px 0 0 6px}
.form-msg{margin:18px 0 0;font-size:16px;font-weight:600;text-align:center}
.form-msg:empty{display:none}
.form-msg.ok{color:#1d7a4c}.form-msg.bad{color:#d83a3a}
.auth__btn{display:block;width:166px;height:52px;margin:36px auto 0;border-radius:13px;background:var(--teal);color:#fff;font-size:21px;font-weight:600;transition:background .2s,transform .1s}
.auth__btn:hover{background:var(--teal-d)}.auth__btn:active{transform:scale(.97)}
.auth__btn:disabled{opacity:.6;cursor:wait}
.auth__alt{display:block;text-align:center;margin-top:16px}
.auth--create .auth__btn{margin-top:30px}
.auth--reset .auth__btn{margin-top:28px}
.contact__line{width:min(1067px,100%);margin:55px auto 0;border:0;border-top:1px solid #d6d6d6}
.contact__form{width:min(1071px,100%);margin:157px auto 0;text-align:left}
.contact__row{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.auth--contact .field{margin-bottom:28px}
.auth--contact .field input,.auth--contact .field textarea{font-weight:500;font-size:21px}
main.auth.auth--contact{padding-bottom:70px}
.contact__btn{margin-top:10px}
main.auth.auth--about{padding:0;min-height:0;text-align:left}
.about{text-align:left;padding-top:96px}
.about h2{font-size:18.5px;font-weight:500;color:#111;line-height:31px}
.about p{font-size:18.5px;font-weight:400;line-height:31px;color:#111;margin-bottom:21px}
.about__title{text-align:center;margin:36px 0 0}
.team{display:grid;grid-template-columns:1fr 1fr;gap:33px;margin-top:62px}
.member{background:#fff;border-radius:15px;box-shadow:0 4px 12px rgba(0,0,0,.2);padding:28px 50px 38px;text-align:left}
.member img{width:100%;aspect-ratio:282/209;object-fit:cover;border-radius:15px;box-shadow:0 4px 8px rgba(0,0,0,.35)}
.member h3{font-size:18.5px;font-weight:500;margin:20px 0 0;color:#111;line-height:27px}
.member p{margin:0;font-size:18.5px;line-height:27px;font-weight:400}
.auth--about .section{padding-top:60px}
.auth--about .why{margin-bottom:80px}
/* account menu */
.acct-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:180px;background:#fff;color:#222;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);padding:14px 16px;text-align:left;z-index:70}
.acct-menu p{font-size:15px;font-weight:600;margin-bottom:10px;word-break:break-word}
.acct-menu button{width:100%;height:36px;border-radius:8px;background:var(--teal);color:#fff;font-size:14px;font-weight:500}
@media(max-width:900px){.auth__title{font-size:44px;line-height:52px}.auth__form{margin-top:60px}.contact__form{margin-top:60px}.contact__line{margin-top:30px}.team{grid-template-columns:1fr}.member{padding:20px 22px 28px}.about{padding-top:60px}.auth__sub{margin-bottom:40px}}
@media(max-width:760px){main.auth{padding-top:60px}.auth__title{font-size:34px;line-height:42px}.field input,.field textarea{height:58px;font-size:17px;padding:0 20px;border-radius:12px}.field textarea{height:150px;padding:20px}.contact__row{grid-template-columns:1fr;gap:0}.about p,.about h2,.member h3,.member p{font-size:16px;line-height:25px}}

.topbar__icons{position:relative}

/* search suggestions */
.search{position:relative}
.suggest{position:absolute;top:calc(100% + 8px);right:0;width:min(400px,92vw);background:#fff;color:#222;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:6px;z-index:80;max-height:70vh;overflow:auto;list-style:none}
.suggest a{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:8px;font-size:14px}
.suggest a:hover,.suggest a.on{background:#eef2f1}
.suggest img{width:44px;height:44px;object-fit:cover;border-radius:6px;background:var(--grey)}
.suggest span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.suggest b{font-size:13px;color:#2a7a6f;white-space:nowrap}
.suggest .all a{display:block;text-align:center;color:var(--teal);font-weight:600;border-top:1px solid #eee;border-radius:0 0 8px 8px;margin-top:4px}
.suggest .none{padding:14px;font-size:14px;color:#555;text-align:center}
.ci__v{display:block;font-size:12px;color:#777;margin:-2px 0 2px}
@media(max-width:760px){.suggest{position:fixed;left:12px;right:12px;top:auto;width:auto;margin-top:8px}}

/* ===== Document pages (Terms, FAQs, Policies) ===== */
main.auth.doc{padding:0;min-height:0;text-align:left;font-family:'Manrope','Inter',sans-serif}
.doc .section{padding-top:0}.doc .why{margin-bottom:80px}
.doc__in{padding-top:108px;padding-bottom:88px;color:#111}
.doc__h{font-size:18.5px;font-weight:700;line-height:1.5;color:#111;letter-spacing:0}
.doc__p,.doc__in p{font-size:17.5px;line-height:29px;font-weight:400}
.doc__list{list-style:decimal inside;padding-left:6px}
.doc__list li{font-size:17.5px;line-height:29px}
.doc a{text-decoration:underline;text-underline-offset:2px}.doc a:hover{color:var(--teal)}
.doc__faq h2{font-size:17.5px;font-weight:600;line-height:27px;margin-top:0}
.doc__faq p{line-height:27px}
.doc__pol{padding-top:114px}
.doc__pol h2{font-size:18px;font-weight:700;line-height:27px;color:#1d4f4a;margin-top:16px}
.doc__pol h2:first-child{margin-top:0}
.doc__pol p{line-height:27px}
.doc__pol ul{list-style:disc;padding-left:34px}.doc__pol li{font-size:17.5px;line-height:27px}
.doc__pol .pol__contact{margin-top:38px}
/* ===== Result pages ===== */
.result{text-align:center;padding-top:104px;padding-bottom:104px}
.result__icon{width:111px;height:111px;border-radius:50%;margin:0 auto;display:grid;place-items:center}
.result__icon--ok{background:var(--teal)}.result__icon--bad{background:#ff1f1f}
.result__title{font-size:39px;font-weight:700;color:var(--teal);margin-top:30px;line-height:1.2}
.result__text{font-size:17.5px;font-weight:500;line-height:27px;color:#222;margin-top:18px}
.result__pill{display:block;width:393px;max-width:100%;height:52px;line-height:52px;margin:30px auto 26px;border-radius:13px;background:var(--teal);color:#fff;font-size:22px;font-weight:600}
.result__mail{margin-top:0}.result__mail strong{font-weight:700}
.result__link{display:inline-block;margin-top:26px;font-size:16px;font-weight:600;color:var(--teal);text-decoration:underline}
.result__btn{display:block;width:393px;max-width:100%;height:52px;line-height:50px;margin:16px auto 0;border-radius:13px;background:var(--teal);color:#fff;font-size:20px;font-weight:500;border:1px solid var(--teal);transition:filter .2s}
.result__btn:first-of-type{margin-top:30px}
.result__btn:hover{filter:brightness(.92)}
.result__btn--alt{background:var(--page);color:#14463f;font-size:18px;font-weight:600}
.doc--result .doc__in{padding:0}
/* ===== Checkout ===== */
.co{padding-top:46px;padding-bottom:50px}
.co__grid{display:grid;grid-template-columns:766fr 485fr;gap:37px;align-items:start}
.co__title{font-size:37px;font-weight:700;color:var(--teal);line-height:1.15;letter-spacing:-.3px}
.co__sub{font-size:17px;font-weight:500;color:#9a9a9a;margin:0 0 12px}
.pay-opts{display:flex;flex-direction:column;gap:15px}
.pay-opt{display:flex;align-items:center;gap:14px;width:100%;height:61px;padding:0 26px;border:1px solid #bdbdbd;border-radius:15px;background:#fff;text-align:left;font-size:18px;font-weight:500;color:#222;transition:border-color .2s,box-shadow .2s}
.pay-opt:hover{border-color:#777}
.pay-opt .dot{width:11px;height:11px;border-radius:50%;background:#aaa;flex-shrink:0}
.pay-opt[aria-checked=true]{border-color:#444}
.pay-opt[aria-checked=true] .dot{background:#1c1cd4}
.pay-logos{margin-left:auto;display:flex;gap:10px;align-items:center}.pay-logos img{height:26px;width:auto}
.co__form{margin-top:26px}
.co__h2{font-size:35px;font-weight:700;color:var(--teal);line-height:1.2;margin:22px 0 22px;letter-spacing:-.3px}
.co__label{display:block;font-size:18px;font-weight:500;color:#222;margin:0 0 10px}
.co .field{margin-bottom:18px}
.co .field input{height:59px;padding:0 28px;font-size:18px;font-weight:500;border:1px solid #cfcfcf;border-radius:15px;background:#fff;color:#222}
.co .field input::placeholder{color:#aaa}
.co .field input:focus{border-color:var(--teal)}
.co__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.co__row--card{margin-top:14px}
.co__label--ship{margin:6px 0 10px}
.ship{display:flex;justify-content:space-between;align-items:center;height:57px;padding:0 24px;border:1px solid var(--teal);border-radius:15px;font-size:17px;font-weight:500;color:#14463f}
.co__btn{display:block;width:100%;height:50px;margin-top:22px;border-radius:13px;background:var(--teal);color:#fff;font-size:20px;font-weight:500;transition:background .2s}
.co__btn:hover{background:var(--teal-d)}.co__btn:disabled{opacity:.65;cursor:wait}
.co__right{padding-top:16px}
.sum__item{display:flex;gap:18px;align-items:flex-start;margin-bottom:16px}
.sum__img{position:relative;width:96px;height:85px;flex-shrink:0;border-radius:11px;background:var(--grey)}
.sum__img img{width:100%;height:100%;object-fit:contain;border-radius:11px}
.sum__badge{position:absolute;top:-9px;right:-9px;min-width:23px;height:23px;padding:0 5px;border-radius:12px;background:var(--teal);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.sum__info h3{font-size:21px;font-weight:600;color:#14463f;line-height:1.3;margin-top:4px}
.sum__v{font-size:20px;font-weight:500;color:#777;margin-top:14px}
.sum__rows{margin-left:114px}
.sum__rows div{display:flex;justify-content:space-between;font-size:18px;color:#666;line-height:31px}
.sum__rows dd{margin:0}
.sum__total{margin-top:10px;color:#222!important;font-weight:700}
.co__empty{font-size:20px;padding:60px 0;text-align:center;color:#444}
.co__empty a{color:var(--teal);font-weight:600;text-decoration:underline}
.doc--co .why{margin-top:0}
/* ===== Order tracking ===== */
body.track-page{min-height:100vh;display:flex;flex-direction:column;background:#f7f6f0;font-family:'Manrope','Inter',sans-serif}
.track__bar{height:96px;background:var(--header);display:flex;justify-content:center;align-items:center;flex-shrink:0}
.track__bar img{width:360px;max-width:70vw;height:auto}
.track{flex:1;position:relative;background:url(../images/hero.jpg) center/cover no-repeat;display:flex;justify-content:center;align-items:flex-start;min-height:502px;padding-bottom:70px}
.track__card{width:428px;max-width:92vw;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:22px;padding:28px 26px 30px;box-shadow:0 6px 24px rgba(0,0,0,.12);margin-top:0}
.track__label{display:block;font-size:20px;font-weight:700;color:#14463f;margin-bottom:10px}
.track__in{width:100%;height:52px;border:0;border-radius:11px;background:rgba(255,255,255,.88);box-shadow:0 2px 6px rgba(0,0,0,.15);padding:0 20px;font:inherit;font-size:18px;font-weight:500;color:#222;outline:0}
.track__in::placeholder{color:#555}
.track__in:focus{box-shadow:0 0 0 3px rgba(29,96,94,.35)}
.track__radios{display:flex;gap:16px;margin:18px 0 12px}
.track__radios label{display:flex;align-items:center;gap:7px;font-size:19px;font-weight:600;color:#14463f;cursor:pointer}
.track__radios input{accent-color:#14463f;width:14px;height:14px}
.track__note{font-size:14px;font-weight:500;color:#333;margin-top:12px;line-height:1.4}
.track__btn{display:block;width:100%;height:50px;margin-top:18px;border-radius:11px;background:var(--teal);color:#fff;font-size:18px;font-weight:600;transition:background .2s}
.track__btn:hover{background:var(--teal-d)}
.track .err{margin:6px 2px 0}
.track__res{margin-top:20px;padding-top:18px;border-top:1px solid rgba(0,0,0,.15);font-size:16px;color:#222;line-height:1.5}
.track__res h3{font-size:20px;color:#14463f}.track__res ul{margin:8px 0 8px 18px;list-style:disc}
.track__status{display:inline-block;margin:6px 0;padding:3px 12px;border-radius:14px;background:var(--teal);color:#fff;font-size:14px;font-weight:600}
.track__total{font-weight:700}.track__none{color:#b3261e;font-weight:600}
.track__copy{position:absolute;left:var(--pad);bottom:22px;font-size:15px;font-weight:500;color:#333}
.search-info{margin:-6px 0 22px;font-size:16px;color:#555}
.no-results a{color:var(--teal);font-weight:600;text-decoration:underline}
@media(max-width:900px){.co__grid{grid-template-columns:1fr}.co__right{order:-1;padding-top:0}.co__title{font-size:30px}.co__h2{font-size:28px}.sum__rows{margin-left:0}.result__title{font-size:30px}}
@media(max-width:760px){.doc__in{padding-top:56px}.doc__in p,.doc__list li,.doc__pol li{font-size:15.5px;line-height:25px}.pay-opt{padding:0 16px;font-size:15px}.pay-logos img{height:20px}.co__row{grid-template-columns:1fr}.co__row--card{grid-template-columns:1fr 1fr}.track__copy{position:static;padding:0 var(--pad) 16px}.track{flex-direction:column;align-items:center;gap:30px}}

/* =====================================================================
   Django backend additions (flash messages, account menu, pager links,
   payment notice, orders, reviews)
   ===================================================================== */
.flash-wrap{padding-top:14px}
.flash{position:relative;margin:0 0 8px;padding:12px 44px 12px 18px;border-radius:10px;font-size:15px;font-weight:600;background:#e7f3ef;color:#14463f;border:1px solid #b9dccf}
.flash--error{background:#fdeaea;color:#a12b2b;border-color:#f0bcbc}
.flash--warning{background:#fff4dc;color:#7a5600;border-color:#f1d79a}
.flash--info{background:#e9f0fb;color:#264a85;border-color:#bccdea}
.flash__x{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:22px;line-height:1;color:inherit;opacity:.7;background:none;border:0;cursor:pointer}
.flash__x:hover{opacity:1}

.acct{position:relative;display:flex;align-items:center}
.acct-menu[hidden]{display:none}
.acct-menu a{display:block;padding:8px 0;font-size:14px;color:#222;border-bottom:1px solid #eee}
.acct-menu a:hover{color:var(--teal)}
.acct-menu form{margin-top:10px}

.pager a,.pager .pager__dis{width:calc(20*var(--u));height:calc(20*var(--u));min-width:20px;min-height:20px;border-radius:4px;background:var(--grey);font-size:calc(11*var(--u));display:grid;place-items:center}
.pager a:hover{background:#bfc9c7}
.pager a.active{background:var(--teal);color:#fff}
.pager .pager__dis{opacity:.5}
@media(max-width:1100px){.pager a,.pager .pager__dis{font-size:13px}}

.pay-notice{margin:18px 0;padding:16px 18px;border:1px solid #f1d79a;background:#fff4dc;color:#6b4b00;border-radius:12px;font-size:16px;line-height:1.5}
.pay-notice strong{display:block;margin-bottom:4px;font-size:17px}
.pay-notice[hidden]{display:none}

.pd__rate{margin:8px 0 0;font-size:15px}
.pd__rate a{color:var(--teal);text-decoration:underline}
.pd__out{margin-top:24px;padding:14px 18px;background:#fdeaea;color:#a12b2b;border-radius:10px;font-weight:600}
.pd__colors .sw{border-color:rgba(0,0,0,.25)}
.pd__wish[aria-pressed="true"] svg{fill:#fff}
.pd-block{margin-top:50px}
.pd-block h2{font-size:26px;font-weight:600;color:var(--teal);margin-bottom:12px}
.pd-block p{font-size:16px;line-height:1.6;max-width:820px}
.pd-block__sum{margin-bottom:18px}
.pd-block__login{margin-bottom:18px}
.pd-block__login a{color:var(--teal);text-decoration:underline}

.review-form{max-width:640px;margin:0 0 28px;padding:18px;background:#fff;border:1px solid #dfe5e3;border-radius:12px}
.review-form h3{font-size:18px;margin-bottom:12px}
.review-form__row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-form select,.review-form textarea{font:inherit;font-size:15px;padding:10px 12px;border:1px solid #9aa5a3;border-radius:8px;background:#fff}
.review-form textarea{width:100%;margin-bottom:12px;resize:vertical}
.review-form .btn{height:42px;padding:0 22px}
.review-list{max-width:820px}
.review-list li{padding:16px 0;border-bottom:1px solid #e1e6e4}
.review-list__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.review-list__head small{color:#777}
.review-list p{font-size:15px;line-height:1.55}
.review-list__none{color:#666;font-size:15px}

.orders{padding:40px 0 70px;max-width:900px}
.orders .auth__title{margin-bottom:24px}
.order-card{display:grid;grid-template-columns:1.2fr 2fr auto;gap:18px;align-items:center;padding:16px 20px;margin-bottom:12px;background:#fff;border:1px solid #dfe5e3;border-radius:12px;text-decoration:none!important}
.order-card:hover{border-color:var(--teal)}
.order-card small{display:block;color:#777;margin-top:3px}
.order-card__items{font-size:14px;color:#444}
.order-card__right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.status{display:inline-block;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700;background:#e7f3ef;color:#14463f}
.status--placed{background:#e9f0fb;color:#264a85}
.status--confirmed{background:#e6f4ea;color:#1d6b3b}
.status--shipped{background:#fff4dc;color:#7a5600}
.status--delivered{background:#d9f2e3;color:#0f5a2e}
.status--cancelled{background:#fdeaea;color:#a12b2b}
.order-meta{margin-bottom:18px;color:#444}
.order-lines{max-width:640px;margin-bottom:26px;border-top:1px solid #dfe5e3}
.order-lines li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #dfe5e3}
.order-lines__total{font-size:18px}
.order-h2{font-size:20px;margin:6px 0 8px}
@media(max-width:700px){.order-card{grid-template-columns:1fr}.order-card__right{align-items:flex-start}}


/* =====================================================================
   MOBILE FIX v2  (style.css ke bilkul aakhir mein, ek hi baar paste karein)
   ===================================================================== */

/* Desktop par extra menu links chhupe rehte hain */
.nav__extra{display:none}

@media(max-width:760px){
  /* ----- menu (side bar): saare pages ----- */
  .nav__links .nav__extra{display:block}
  .nav__links{font-size:15px}
  .nav__links a{padding:11px 0}

  /* ----- header ----- */
  .topbar{height:50px}
  .topbar__contact{gap:10px}
  .topbar__contact svg{width:19px;height:19px}
  .topbar__icons{gap:8px}
  .icon-btn{margin-left:0;min-width:30px;min-height:30px}
  .icon-btn svg{width:21px;height:21px}
  .badge{top:-3px;right:-5px;min-width:15px;height:15px;font-size:9px;padding:0 4px}
  .logo img{height:21px}
  .nav__toggle{width:30px;height:30px}
  .search{height:36px}
  .search input{font-size:16px}

  /* ----- hero / headings ----- */
  .hero{min-height:300px}
  .hero__eyebrow{font-size:15px}
  .hero__title{font-size:27px;margin-bottom:14px}
  .hero__text{font-size:13.5px;margin-bottom:16px}
  .btn--lg{height:42px;font-size:14px;padding:0 22px}
  .section{padding-top:26px}
  .section__head{margin-bottom:14px}
  .section h2,.why h2,.footer__pay h2{font-size:19px}
  .view-all{font-size:13px}
  .cat-card__body{padding:14px 16px}
  .cat-card h3,.cat-card span{font-size:14px}

  /* ----- product cards ----- */
  .pgrid{gap:10px;row-gap:12px}
  .pcard__body{padding:9px 9px 11px;min-height:0}
  .pcard h3{font-size:12px;line-height:1.35;-webkit-line-clamp:2;min-height:32px}
  .pcard .price{font-size:13.5px;margin-top:5px}
  .pcard__off{font-size:10px;top:6px;left:7px;background:#fff;padding:1px 5px;border-radius:5px}
  .pcard .wish{top:6px;right:6px;width:28px;height:28px;font-size:17px;display:grid;place-items:center;background:rgba(255,255,255,.92);border-radius:50%}
  .pcard .btn{height:32px;font-size:12px;min-width:0}
  .pcard .stars{font-size:11px}
  .pcard .rating small{font-size:10px}
  .prod__body{padding:11px}
  .prod h3{font-size:13px}
  .prod .btn--sm{height:32px;font-size:12px;width:100%}
  .catalog h1{font-size:19px}
  .catalog .view-all{font-size:13px}
  .search-info{font-size:13px}
  .pager{justify-content:center;gap:6px;margin-top:24px}
  .pager a,.pager .pager__dis{width:32px;height:32px;font-size:13px}

  /* ----- product page ----- */
  .pd{padding-top:16px;gap:18px}
  .pd__main{height:230px}
  .pd__strip button{width:52px;height:52px}
  .pd__info h1{font-size:16px;line-height:1.35}
  .pd__note{font-size:12px;line-height:19px}
  .pd__price{font-size:22px}
  .pd__old{font-size:13px}
  .pd__label{font-size:13px;margin:14px 0 8px 2px}
  .sw{width:36px;height:36px;border-radius:8px}
  .pd__qty{width:100%;max-width:200px;height:40px}
  .pd__qty input{font-size:15px}
  .pd__buy,.pd__add{height:42px;font-size:14px}
  .pd__wish{width:42px;height:42px}
  .pd__wish svg{width:24px;height:24px}
  .pd-block h2{font-size:18px}
  .pd-block p{font-size:13px}

  /* ----- login / register / contact / about / docs ----- */
  main.auth{padding:30px var(--pad) 44px;min-height:0}
  .auth__title{font-size:24px;line-height:32px}
  .auth__sub{font-size:13px;margin:4px 0 20px}
  .auth__form{margin-top:24px}
  .auth--reset .auth__form{margin-top:0}
  .field{margin-bottom:12px}
  .field input,.field textarea{height:48px;font-size:16px;padding:0 14px;border-radius:11px}
  .field textarea{height:120px;padding:12px 14px}
  .auth__btn{width:100%;height:44px;font-size:15px;margin-top:18px}
  .auth__small{font-size:13px}
  .err{font-size:12px}
  .contact__form{margin-top:24px}
  .contact__line{margin-top:16px}
  .contact__btn{font-size:15px}
  .about{padding-top:30px}
  .about h2,.about p{font-size:13.5px;line-height:22px}
  .member h3,.member p{font-size:13px;line-height:21px}
  .doc__in{padding-top:30px;padding-bottom:40px}
  .doc__in p,.doc__list li,.doc__pol li{font-size:13.5px;line-height:22px}
  .doc__h,.doc__faq h2,.doc__pol h2{font-size:14.5px}

  /* ----- checkout / orders / tracking ----- */
  .co__title{font-size:20px}
  .co__sub{font-size:13px}
  .co__h2{font-size:18px;margin:14px 0}
  .co__label{font-size:14px}
  .pay-opt{height:50px;font-size:13px;gap:8px;padding:0 12px}
  .pay-logos img{height:18px}
  .co .field input{height:46px;font-size:16px;padding:0 14px}
  .ship{height:44px;font-size:14px}
  .co__btn{height:44px;font-size:15px}
  .sum__img{width:58px;height:52px}
  .sum__info h3{font-size:13.5px}
  .sum__v{font-size:13px;margin-top:4px}
  .sum__rows div{font-size:14px;line-height:26px}
  .result__title{font-size:21px}
  .result__text{font-size:13.5px;line-height:21px}
  .result__pill{height:42px;line-height:42px;font-size:16px}
  .track__label{font-size:15px}
  .track__in{height:44px;font-size:16px}
  .track__radios label{font-size:14px}
  .track__btn{height:42px;font-size:14px}
  .order-card__items{font-size:13px}

  /* ----- "Why shop with us" ----- */
  .why{padding:18px 16px}
  .why__list{gap:12px;margin-top:12px}
  .why__list img{width:44px;height:44px}
  .why__list strong{font-size:14px}
  .why__list span{font-size:12px}

  /* ----- FOOTER: columns ki jagah rows ----- */
  .footer{padding-top:24px;margin-top:40px}
  .footer__top{display:flex;flex-direction:column;gap:14px;padding-bottom:18px}
  .footer__logo{display:block;text-align:center}
  .footer__logo img{margin:0 auto;width:170px}
  .footer__col{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .footer__col h4{width:100%;margin:2px 0 0;font-size:13px;letter-spacing:.4px}
  .footer__col ul{display:flex;flex-wrap:wrap;gap:6px;width:100%}
  .footer__col li{margin:0}
  .footer__col a{padding:7px 12px;background:#fff;border-radius:999px;font-size:11.5px;line-height:1.2;gap:6px}
  .footer__col a:hover{background:var(--teal);color:#fff;text-decoration:none}
  .footer__col a svg{width:14px;height:14px}
  .footer__pay{justify-content:center;gap:10px;padding-top:6px;padding-bottom:20px}
  .footer__pay h2{width:100%;text-align:center;margin:0 0 2px}
  .footer__pay img{height:24px}
  .copyright{font-size:12px;padding:12px 0 18px;text-align:center}

  /* ----- cart drawer / messages ----- */
  .drawer__head h3{font-size:17px}
  .ci img{width:52px;height:52px}
  .ci{grid-template-columns:52px 1fr auto}
  .ci h4{font-size:13px}
  .ci p{font-size:13px}
  .drawer__foot .btn{height:42px;font-size:14px}
  .flash{font-size:13px}
  .toast{font-size:13px;width:max-content;max-width:90vw;text-align:center}
}

@media(max-width:400px){
  :root{--pad:14px}
  .logo img{height:19px}
  .topbar__contact svg{width:17px;height:17px}
  .icon-btn svg{width:19px;height:19px}
  .hero__title{font-size:25px}
  .pcard h3{font-size:11.5px}
  .auth__title{font-size:22px}
}