/* Mimi John — mobile-first, no framework */
:root{
  --ink:#1c2333;--muted:#5d6577;--line:#e6e2da;--bg:#fbfaf7;--card:#fff;
  --navy:#1f2a44;--gold:#b08d57;--sale:#b3261e;--ok:#2f6b3a;
  --r:14px;--shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(28,35,51,.06);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 var(--font);color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
h1,h2,h3{font-family:var(--serif);line-height:1.2;margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(1.6rem,4.5vw,2.4rem)}
h2{font-size:clamp(1.25rem,3vw,1.6rem)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.section{padding:28px 0}
.wrap.section{padding:28px 16px}
.narrow{max-width:640px}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* top bar + header */
.topbar{background:var(--navy);color:#fff;font-size:.85rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:space-between;padding:6px 16px}
.topbar a{color:#fff;text-decoration:none}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.header-row{display:flex;align-items:center;gap:12px;padding:8px 16px;flex-wrap:wrap}
.search{display:flex;flex:1 1 220px;min-width:0}
.search input{flex:1;min-width:0;font:inherit;padding:10px 12px;border:1px solid var(--line);border-right:0;border-radius:10px 0 0 10px;background:var(--bg)}
.search button{font:inherit;padding:10px 14px;border:0;border-radius:0 10px 10px 0;background:var(--navy);color:#fff;cursor:pointer}
.search-big{max-width:560px;margin:8px 0 20px}
.catnav{border-top:1px solid var(--line)}
.catnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 8px}
.catnav .wrap::-webkit-scrollbar{display:none}
.catnav a{flex:none;padding:10px 12px;text-decoration:none;color:var(--ink);font-size:.95rem;border-bottom:2px solid transparent;white-space:nowrap}
.catnav a:hover,.catnav a[aria-current]{border-color:var(--gold);color:var(--navy)}

/* buttons */
.btn{display:inline-block;padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:600;text-align:center;border:2px solid var(--navy)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#2c3b60}
.btn-ghost{color:var(--navy);background:transparent}
.btn-block{display:block;width:100%;font-size:1.05rem;padding:14px 20px}

/* hero */
.hero{background:linear-gradient(135deg,#1f2a44 0%,#2e3d63 60%,#3d4f7a 100%);color:#fff}
.hero-inner{padding:48px 16px 52px}
.hero h1{font-size:clamp(2rem,7vw,3.4rem);max-width:16ch}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:#e7d5b4;margin:0 0 10px}
.lead{font-size:1.2rem;margin:0 0 20px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.hero .btn-primary{background:var(--gold);border-color:var(--gold);color:#1c2333}
.hero .btn-ghost{color:#fff;border-color:#fff}
.hero .contact{margin:0;color:#dfe4ef}
.hero .contact a{color:#fff;font-weight:700}

.trust{display:grid;grid-template-columns:1fr;gap:10px;padding-top:20px}
.trust div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column}
.trust span{color:var(--muted);font-size:.92rem}

/* categories */
.cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cats a{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.cats img{aspect-ratio:1;object-fit:contain;background:#fff;width:100%}
.cats span{display:block;padding:10px 12px;font-weight:600}
.cats small{color:var(--muted);font-weight:400}

/* product grid */
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card a{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s}
.card a:hover{transform:translateY(-2px)}
.card-img{position:relative;background:#fff}
.card-img img,.noimg{aspect-ratio:1;object-fit:contain;width:100%}
.noimg{background:#f1eee8}
.badge{position:absolute;top:8px;left:8px;background:var(--sale);color:#fff;font-size:.75rem;font-weight:700;padding:3px 8px;border-radius:999px}
.card h3{font-family:var(--font);font-size:.95rem;font-weight:600;margin:10px 12px 6px;flex:1}
.card .price{margin:0 12px 12px}
.price{font-size:.95rem}
.price del{color:var(--muted);font-size:.85em}
.price ins,.price .now{text-decoration:none;font-weight:700;color:var(--sale)}
.price .now{color:var(--ink)}
.from{color:var(--muted);font-size:.85em}

.crumbs{font-size:.88rem;color:var(--muted);margin-bottom:12px}
.crumbs a{color:var(--muted)}
.list-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}
.list-head small{font-family:var(--font);font-size:.9rem;color:var(--muted);font-weight:400}
.sort{display:flex;flex-wrap:wrap;gap:6px}
.sort a{font-size:.85rem;padding:6px 10px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);background:#fff}
.sort a[aria-current]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* product detail */
.pdp{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.gallery,.buybox{min-width:0}
.main-img{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.main-img img{width:100%;aspect-ratio:1;object-fit:contain}
.thumbs{list-style:none;margin:10px 0 0;padding:0;display:flex;gap:8px;overflow-x:auto}
.thumbs a{display:block;width:64px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.thumbs img{aspect-ratio:1;object-fit:contain}
.pricebox{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:4px 0 4px}
.pricebox del{color:var(--muted);font-size:1.15rem}
.pricebox ins{text-decoration:none;color:var(--sale);font-size:2rem;font-weight:800}
.save{background:#fbeceb;color:var(--sale);font-weight:700;font-size:.85rem;padding:3px 10px;border-radius:999px}
.ship{color:var(--ok);font-weight:600;margin:0 0 14px}
.sizes{border:0;padding:0;margin:0 0 16px}
.sizes legend{font-weight:600;margin-bottom:8px;padding:0}
.pills{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr));gap:8px}
.pill{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;text-decoration:none;color:var(--ink);font-size:.88rem;line-height:1.3}
.pill-price{font-weight:700}
.pill:hover{border-color:var(--gold)}
.pill[aria-pressed="true"]{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy) inset;background:#f5f6fa}
.callout{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:12px 14px;margin-top:16px}
.callout p{margin:4px 0 0}
.table-wrap{overflow-x:auto}
.prices{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r);font-size:.95rem}
.prices th,.prices td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.prices thead th{background:#f5f3ee;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.prices del{color:var(--muted)}
.prose{max-width:75ch}
.prose img{display:inline-block;margin:8px 0}
.prose center,.prose div{display:block}

/* footer */
.site-footer{background:#151c2e;color:#cfd5e2;margin-top:40px;padding:32px 0 16px;font-size:.95rem}
.site-footer h2{color:#fff;font-size:1.05rem;font-family:var(--font)}
.site-footer a{color:#fff}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:4px 0}
.footer-grid{display:grid;gap:24px}
.site-footer .muted{color:#9aa3b8}
.legal{border-top:1px solid #2a3350;margin-top:20px;padding-top:12px;font-size:.8rem;color:#9aa3b8}

@media (min-width:640px){
  .grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .cats{grid-template-columns:repeat(4,1fr)}
  .trust{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
  .wordmark{font-size:2rem}
}
@media (min-width:960px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .cats{grid-template-columns:repeat(7,1fr)}
  .pdp{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:start}
  .buybox{position:sticky;top:130px}
  .hero-inner{padding:72px 16px 76px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* photo hero (append to public/assets/css/site.css) */
.hero--photo{position:relative;overflow:hidden;background:#3a3631;text-align:center;isolation:isolate}
.hero--photo .hero-media,.hero--photo .hero-media img{position:absolute;inset:0;width:100%;height:100%}
.hero--photo .hero-media img{object-fit:cover;object-position:50% 65%;z-index:-2}
.hero--photo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,22,34,.62) 0%,rgba(18,22,34,.42) 50%,rgba(18,22,34,.58) 100%)}
.hero--photo .hero-inner{min-height:clamp(380px,36vw,500px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 18px}
.hero--photo h1{max-width:18ch;margin:0 auto 12px;line-height:1.1;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero--photo .lead{max-width:40ch;margin:0 auto 22px;font-size:clamp(1.02rem,2.6vw,1.22rem);text-shadow:0 1px 10px rgba(0,0,0,.4)}
.hero--photo .lead a{color:#fff;font-weight:700;white-space:nowrap}
.hero--photo .cta-row{justify-content:center;margin:0}
.hero--photo .btn-ghost{background:rgba(255,255,255,.12);backdrop-filter:blur(2px)}
.hero--photo .btn-ghost:hover{background:rgba(255,255,255,.22)}
@media (max-width:599px){.hero--photo .cta-row .btn{flex:1 1 100%}}

/* v2: text wordmark (replaces the old "Online Market Place" image logo) */
.wordmark{font-family:var(--serif);font-weight:700;font-size:1.7rem;letter-spacing:-.01em;line-height:1;color:var(--navy);text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--gold)}
.wordmark-foot{color:#fff;font-size:1.5rem;margin-bottom:.4em}
.wordmark-foot span{color:#d9b97f}

/* header tools: account + cart */
.tools{display:flex;gap:4px;margin-left:auto}
.tool{position:relative;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--navy);font-weight:600;font-size:.92rem}
.tool:hover{background:#f3f1ec}
.tool svg{flex:none}
.cart-count{position:absolute;top:0;left:22px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--gold);color:#1c2333;font-size:.75rem;font-weight:800;line-height:20px;text-align:center}
@media (max-width:639px){
  .header-row{gap:8px}
  .header-row .search{order:3;flex-basis:100%}
  .tool span:not(.cart-count){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* buy form */
.buyform{margin:0 0 8px}
.qtyrow{display:flex;gap:10px;align-items:stretch;margin-bottom:10px}
.qtyrow label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.qty{width:76px;font:inherit;font-size:1.05rem;text-align:center;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:0 6px}
.btn-cart{flex:1;font-size:1.05rem;padding:14px 20px;cursor:pointer;font-family:inherit}
.buyform .btn-ghost{cursor:pointer;font-family:inherit;font-size:1rem;background:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.pill-oos{opacity:.55;border-style:dashed}
.pill-oos .pill-price{font-weight:600;color:var(--muted)}
.prices tr.oos{color:var(--muted)}

/* stars (CSP-safe: width via classes r0–r10 in half-star steps) */
.stars{position:relative;display:inline-block;vertical-align:-2px;width:5.4em;height:1em;font-size:1rem;line-height:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d9d4c7' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7L12 17.5 5.8 21.2l1.6-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E") 0 0/1.08em 1em repeat-x}
.stars-fill{position:absolute;inset:0 auto 0 0;width:0;overflow:hidden;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b08d57' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7L12 17.5 5.8 21.2l1.6-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E") 0 0/1.08em 1em repeat-x}
.stars.r0 .stars-fill{width:0%}
.stars.r1 .stars-fill{width:10%}
.stars.r2 .stars-fill{width:20%}
.stars.r3 .stars-fill{width:30%}
.stars.r4 .stars-fill{width:40%}
.stars.r5 .stars-fill{width:50%}
.stars.r6 .stars-fill{width:60%}
.stars.r7 .stars-fill{width:70%}
.stars.r8 .stars-fill{width:80%}
.stars.r9 .stars-fill{width:90%}
.stars.r10 .stars-fill{width:100%}
.rating-count{color:var(--muted);font-size:.85rem}
.card-rating{margin:0 12px 6px}
.pdp-rating{margin:0 0 6px}
.pdp-rating a{text-decoration:none}

/* reviews */
.reviews{border-top:1px solid var(--line)}
.rev-summary{margin:0 0 12px}
.rev-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px;max-width:820px}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.rev-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.verified{background:#e8f2ea;color:var(--ok);font-size:.78rem;font-weight:700;padding:2px 8px;border-radius:999px}
.rev-stars{margin:6px 0 0}
.rev-text{margin-top:8px;overflow-wrap:anywhere}
.notice{padding:10px 14px;border-radius:10px;max-width:820px}
.notice-ok{background:#e8f2ea;color:#1f4d29}
.notice-err{background:#fbeceb;color:#7d1a14}
.write-review{max-width:820px}
.write-review summary{list-style:none;display:inline-block;cursor:pointer}
.write-review summary::-webkit-details-marker{display:none}
.review-form{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:8px}
.review-form label{font-weight:600}
.review-form input[type=text],.review-form input[type=email],.review-form textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.review-form .two{display:grid;gap:8px}
@media (min-width:640px){.review-form .two{grid-template-columns:1fr 1fr}}
.review-form .btn{justify-self:start;cursor:pointer;font-family:inherit;font-size:1rem}
.rate{border:0;padding:0;margin:0}
.rate legend{font-weight:600;padding:0;margin-bottom:4px}
.rate-stars{display:inline-flex;flex-direction:row-reverse;gap:2px}
.rate-stars input{position:absolute;opacity:0;width:1px;height:1px}
.rate-stars label{width:34px;height:34px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d9d4c7' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7L12 17.5 5.8 21.2l1.6-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E") center/30px no-repeat}
.rate-stars input:checked~label,.rate-stars label:hover,.rate-stars label:hover~label{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b08d57' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7L12 17.5 5.8 21.2l1.6-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E")}
.rate-stars input:focus-visible+label{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
picture{display:contents}
.staging-bar{background:#b91c1c;color:#fff;text-align:center;font:600 14px/1.4 system-ui,sans-serif;padding:6px}