:root {
  --bg: #fffbfc;
  --surface: #ffffff;
  --blush: #fdf0f4;
  --ink: #2a1520;
  --muted: #6e5a64;
  --line: #f1dfe6;
  --accent: #c2255c;        /* rose pink, 5.3:1 on white */
  --accent-dark: #a61e4d;
  --accent-soft: #f7c6d7;
  --radius: 14px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; }  /* #anchors land below the sticky header */
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }  /* one width for every page, header included */

/* Header */
.site-header {
  /* Sticky with a negative top = the 34px top strip scrolls away, logo/search/categories stay pinned. */
  position: sticky; top: -34px; z-index: 50;
  background: rgb(255 255 255 / .82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line); transition: box-shadow .3s, border-color .3s;
}
.site-header.is-stuck { border-bottom-color: transparent; box-shadow: 0 10px 30px -14px rgb(42 21 32 / .22); }
.site-header.is-stuck::after {  /* thin pink accent line once pinned */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-soft), var(--accent), var(--accent-soft), transparent);
}
.site-header a { text-decoration: none; }
.brand { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; text-decoration: none; margin: 0; white-space: nowrap; }
.brand span { color: var(--accent); }
.sep { margin: 0 10px; opacity: .4; }

.topbar { background: var(--blush); font-size: .8rem; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 34px; white-space: nowrap; }
.topbar p { margin: 0; }
.topbar a:hover { color: var(--accent); }

.mainbar { display: flex; align-items: center; gap: 32px; height: 76px; }
.search { flex: 1; display: flex; max-width: 560px; margin: 0 auto; }
.search input { flex: 1; min-width: 0; height: 44px; padding: 0 18px; border: 1.5px solid var(--line); border-right: 0; border-radius: 99px 0 0 99px; background: var(--bg); font: inherit; color: var(--ink); }
.search input:focus { outline: none; border-color: var(--accent); background: #fff; }
.search button { width: 52px; border: 0; border-radius: 0 99px 99px 0; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; }
.search button:hover { background: var(--accent-dark); }
.icons { display: flex; gap: 24px; }
.icons a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .75rem; font-weight: 500; }
.icons a:hover { color: var(--accent); }
.cart-icon b { position: absolute; top: -6px; right: -8px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: #fff; font-size: .68rem; }

.catbar { border-top: 1px solid var(--line); }
.catbar .wrap { display: flex; align-items: center; gap: 28px; height: 48px; overflow-x: auto; scrollbar-width: none; font-size: .9rem; font-weight: 500; white-space: nowrap; }
.catbar a:hover, .catbar a.is-active { color: var(--accent); }
.catbar a.is-active { box-shadow: inset 0 -2px var(--accent); padding-block: 13px; }
.cat-all { display: flex; align-items: center; gap: 8px; padding-right: 28px; border-right: 1px solid var(--line); font-weight: 600; }
.catbar em { position: relative; top: -8px; margin-left: 2px; padding: 1px 6px; border-radius: 99px; background: var(--accent); color: #fff; font-size: .62rem; font-style: normal; font-weight: 600; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-block; padding: 12px 24px; font-family: var(--sans); font-size: 1rem; cursor: pointer; border-radius: 99px; border: 1.5px solid var(--accent); background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; transition: background .2s, color .2s; }
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent); color: #fff; }
.btn-light { background: #fff; border-color: #fff; color: var(--accent); }
.btn-light:hover { background: var(--blush); border-color: var(--blush); }
.btn-ghost-light { background: transparent; border-color: rgb(255 255 255 / .6); color: #fff; }
.btn-ghost-light:hover { background: rgb(255 255 255 / .12); border-color: #fff; }

.eyebrow { margin: 0 0 16px; color: var(--accent); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* Hero banner (sliding) */
.banner { padding: 20px 0 4px; }
.banner-frame { position: relative; height: clamp(300px, 32vw, 430px); border-radius: 24px; background: var(--accent); overflow: hidden; touch-action: pan-y; }
.banner-track { display: flex; height: 100%; transition: transform .75s cubic-bezier(.65, 0, .35, 1); }
.banner-slide {
  flex: 0 0 100%; display: flex; align-items: center; padding: 0 clamp(28px, 6vw, 80px); color: #fff;
  background: linear-gradient(90deg, rgb(42 21 32 / .82) 0%, rgb(120 20 60 / .5) 45%, transparent 78%), var(--img) center / cover, var(--accent);
}
.banner-copy { max-width: 470px; opacity: 0; transform: translateY(14px); transition: opacity .6s .3s, transform .6s .3s; }
.banner-slide.is-active .banner-copy { opacity: 1; transform: none; }
.banner-copy .eyebrow { margin-bottom: 12px; color: #f7a8c4; }
.banner-copy h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.7rem, 3.6vw, 3rem); }
.banner-copy p:not(.eyebrow) { margin: 0 0 24px; color: rgb(255 255 255 / .88); font-size: 1.02rem; }
.banner-arrow {
  position: absolute; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .9); color: var(--ink); cursor: pointer; opacity: 0; transition: opacity .25s, background .2s, color .2s;
  box-shadow: 0 8px 20px -8px rgb(42 21 32 / .4);
}
.banner-prev { left: 18px; }
.banner-next { right: 18px; }
.banner-frame:hover .banner-arrow, .banner-arrow:focus-visible { opacity: 1; }
.banner-arrow:hover { background: var(--accent); color: #fff; }
.banner-dots { position: absolute; left: 50%; bottom: 18px; display: flex; gap: 8px; transform: translateX(-50%); }
.banner-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgb(255 255 255 / .5); cursor: pointer; transition: width .3s, background .3s; }
.banner-dots button[aria-current="true"] { width: 28px; background: #fff; }
@media (hover: none) { .banner-arrow { display: none; } }

/* Sections */
.section { padding: 64px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-head h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: 0; }
.section-head a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.empty { padding: 40px; border: 1.5px dashed var(--line); border-radius: var(--radius); text-align: center; color: var(--muted); }

/* Category circles: photo from assets/images/categories/<slug>.jpg, the category's icon until then */
.cat-section .section-head { align-items: center; }
.view-all { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: .92rem; font-weight: 500; text-decoration: none; }
.view-all:hover { color: var(--accent); }
.view-all .icon { transition: transform .2s; }
.view-all:hover .icon { transform: translateX(3px); }
.cat-section { padding: 36px 0 20px; }
.cat-section .section-head { margin-bottom: 18px; }
.slider-track.cat-track { display: flex; gap: 6px; padding: 6px 0 8px; }
.cat-circle { display: grid; justify-items: center; align-content: start; gap: 8px; flex: 0 0 auto; width: 104px; color: var(--ink); text-align: center; text-decoration: none; -webkit-user-drag: none; }
.cat-circle-img { display: grid; place-items: center; width: 88px; height: 88px; overflow: hidden; border-radius: 50%; background: #f4eef1; color: var(--accent); box-shadow: inset 0 0 0 1px rgb(42 21 32 / .04); transition: transform .25s, box-shadow .25s; }
.cat-circle-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cat-circle:hover .cat-circle-img { transform: translateY(-4px); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent-soft), 0 14px 26px -12px rgb(194 37 92 / .45); }
.cat-circle:hover .cat-circle-img img { transform: scale(1.08); }
.cat-circle-name { font-size: .82rem; font-weight: 500; line-height: 1.3; }
.cat-circle:hover .cat-circle-name { color: var(--accent); }

/* Product cards */
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 16px; }
.card { min-width: 0; }
.card-img { position: relative; aspect-ratio: 1; margin-bottom: 12px; border-radius: var(--radius); background: var(--blush); overflow: hidden; }
.card-img > a { display: block; width: 100%; height: 100%; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card-img img { transform: scale(1.05); }
.card-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.card-badges .badge { position: static; }
.wish-btn { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--ink); cursor: pointer; box-shadow: 0 4px 14px -6px rgb(42 21 32 / .35); transition: transform .15s, color .15s; }
.wish-btn:hover { transform: scale(1.1); color: var(--accent); }
.wish-btn[aria-pressed="true"] { color: var(--accent); }
.wish-btn[aria-pressed="true"] .icon { fill: currentColor; }
.wish-btn:disabled { opacity: .6; }
.card-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-info { min-width: 0; }
.card-add button { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--accent-soft); border-radius: 12px; background: var(--blush); color: var(--accent); cursor: pointer; transition: background .2s, color .2s, transform .15s, box-shadow .2s; }
.card-add button:hover { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 18px -8px rgb(194 37 92 / .6); }
.card-add button:active { transform: scale(.94); }
.wish-icon { position: relative; }
.wish-icon b { position: absolute; top: -6px; right: 4px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: #fff; font-size: .68rem; }
.wish-icon b[hidden] { display: none; }
.buy-row-2 { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.wish-btn-lg { position: static; display: inline-flex; gap: 8px; width: auto; height: auto; padding: 12px 20px; border-radius: 99px; box-shadow: none; }
.wish-btn-lg:hover { transform: none; }

/* Promo cards under the categories */
.promos-wrap { padding: 12px 0 8px; }
#new { padding-top: 48px; }
.promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.promo { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 196px; padding: 28px 30px; overflow: hidden; border-radius: 22px; color: var(--ink); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.promo:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -26px rgb(42 21 32 / .45); }
.promo-deal { background: linear-gradient(135deg, #fde2ec, #fbd0e0); }
.promo-fresh { background: linear-gradient(135deg, #fff3e6, #fde6cf); }
.promo-dark { background: linear-gradient(135deg, var(--ink), #4a2436); color: #fff; }
.promo-text { position: relative; z-index: 1; display: grid; gap: 4px; max-width: 56%; }
.promo-eyebrow { justify-self: start; margin-bottom: 4px; padding: 3px 10px; border-radius: 99px; background: rgb(255 255 255 / .75); color: var(--accent); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.promo-dark .promo-eyebrow { background: var(--accent); color: #fff; }
.promo strong { font: 600 1.7rem/1.1 var(--serif); }
.promo small { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.promo-dark small { color: #d9c7cf; }
.promo-code { padding: 1px 7px; border: 1px dashed rgb(255 255 255 / .6); border-radius: 6px; color: #fff; font-family: ui-monospace, monospace; letter-spacing: .04em; }
.promo-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .9rem; font-weight: 600; }
.promo:hover .promo-cta .icon { transform: translateX(3px); }
.promo-cta .icon { transition: transform .2s; }
.promo-img { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 52%; -webkit-mask-image: linear-gradient(to right, transparent, #000 38%); mask-image: linear-gradient(to right, transparent, #000 38%); }
.promo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.promo:hover .promo-img img { transform: scale(1.06); }
.promo-badge { display: grid; place-items: center; flex-shrink: 0; margin-left: auto; width: 110px; height: 110px; border-radius: 32px; background: linear-gradient(135deg, #f06595, var(--accent)); color: #fff; font: 700 3.4rem var(--serif); box-shadow: 0 18px 34px -14px rgb(230 73 128 / .7); transform: rotate(-8deg); }
@media (max-width: 640px) {
  /* phones: the three offers become one swipeable row instead of a tall stack */
  .promos { display: flex; gap: 12px; margin-right: -16px; padding-right: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .promos::-webkit-scrollbar { display: none; }
  .promo { flex: 0 0 86%; min-height: 168px; padding: 22px; scroll-snap-align: start; }
  .promo strong { font-size: 1.4rem; }
  .promo-badge { width: 84px; height: 84px; font-size: 2.4rem; }
}
.card h3 { margin: 0 0 4px; font: 500 1rem/1.4 var(--sans); }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.price { margin: 0; color: var(--accent); font-weight: 600; }
.price s { margin-left: 6px; color: var(--muted); font-weight: 400; font-size: .9em; }
.badge { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 99px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 600; }
.badge-muted { background: var(--ink); }
.badge-popular { left: auto; right: 10px; background: #fff; color: var(--accent); box-shadow: 0 4px 12px -4px rgb(194 37 92 / .45); }

/* Features */
.features { background: var(--surface); border-block: 1px solid var(--line); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.features h3 { font-size: 1.3rem; }
.features h3::before { content: ""; display: block; width: 32px; height: 3px; margin-bottom: 16px; border-radius: 3px; background: var(--accent); }
.features p { margin: 0; color: var(--muted); }

/* Custom order CTA */
.custom-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 48px; border-radius: 24px; background: linear-gradient(135deg, var(--accent), #e64980); color: #fff; }
.custom-cta h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.custom-cta p { max-width: 32em; margin: 0; opacity: .85; }
.custom-cta .actions { flex-shrink: 0; }

/* Footer */
.site-footer { margin-top: 32px; padding-top: 64px; background: var(--ink); color: #c9b5be; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; }
.site-footer a { display: block; margin-bottom: 10px; color: #c9b5be; text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: #fff; }
.site-footer .brand { margin-bottom: 12px; color: #fff; font-size: 1.5rem; }
.site-footer .brand span { color: #f7a8c4; }
.footer-about > p:not(.brand) { max-width: 30em; margin: 0 0 20px; }
.footer-title { margin: 0 0 18px; color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.footer-contact { display: flex !important; align-items: center; gap: 10px; color: #fff !important; font-weight: 500; }
.footer-contact svg { color: #f7a8c4; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.socials a { margin: 0; padding: 6px 14px; border: 1px solid rgb(255 255 255 / .18); border-radius: 99px; font-size: .8rem; }
.socials a:hover { border-color: #f7a8c4; }
.pay-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pay-badges span { padding: 6px 12px; border-radius: 8px; background: #fff; color: var(--ink); font-size: .78rem; font-weight: 600; }
.footer-note { margin: 0 0 14px; font-size: .85rem; }
.subscribe { display: flex; padding: 4px; border: 1px solid rgb(255 255 255 / .18); border-radius: 99px; background: rgb(255 255 255 / .06); }
.subscribe:focus-within { border-color: #f7a8c4; }
.subscribe input { flex: 1; min-width: 0; padding: 0 14px; border: 0; background: transparent; color: #fff; font: inherit; font-size: .85rem; }
.subscribe input::placeholder { color: #a8939c; }
.subscribe input:focus { outline: none; }
.subscribe button { padding: 9px 18px; border: 0; border-radius: 99px; background: var(--accent); color: #fff; font: 600 .82rem var(--sans); cursor: pointer; }
.subscribe button:hover { background: #e64980; }
.subscribe-msg { margin: 10px 0 0; color: #f7a8c4; font-size: .82rem; }
.footer-title-sm { margin-top: 28px; margin-bottom: 12px; }
.footer-bottom { border-top: 1px solid rgb(255 255 255 / .1); font-size: .82rem; }
.footer-bottom .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 20px; }
.footer-bottom p { margin: 0; }
.footer-bottom nav { display: flex; gap: 24px; }
.footer-bottom a { margin: 0; }
.credit a { display: inline; color: #f7a8c4; font-weight: 600; }
.credit a:hover { color: #fff; text-decoration: underline; }

/* Cart drawer */
body:has(.drawer[open]) { overflow: hidden; }
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 100vw); height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--surface); color: var(--ink);
  box-shadow: -24px 0 60px rgb(42 21 32 / .18);
}
.drawer[open] { display: flex; flex-direction: column; animation: drawer-in .35s cubic-bezier(.2, .8, .2, 1); }
.drawer::backdrop { background: rgb(42 21 32 / .45); backdrop-filter: blur(3px); animation: fade-in .3s; }
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes fade-in { from { opacity: 0; } }
.drawer.is-busy .drawer-items, .drawer.is-busy .drawer-foot { opacity: .6; pointer-events: none; }

.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.4rem; }
.drawer-count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px; background: var(--blush); color: var(--accent); font: 600 .8rem var(--sans); }
.drawer-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background .2s; }
.drawer-close:hover { background: var(--blush); }
.drawer-close:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

.drawer-items { flex: 1; overflow-y: auto; margin: 0; padding: 8px 24px; list-style: none; }
.drawer-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.drawer-item:last-child { border-bottom: 0; }
.drawer-thumb { width: 80px; height: 80px; border-radius: 12px; background: var(--blush); overflow: hidden; }
.drawer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.drawer-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drawer-name { font-weight: 600; line-height: 1.35; text-decoration: none; }
.drawer-name:hover { color: var(--accent); }
.drawer-unit { color: var(--muted); font-size: .85rem; }
.qty { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 8px; border: 1px solid var(--line); border-radius: 99px; }
.qty button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.05rem; cursor: pointer; }
.qty button:hover:not(:disabled) { background: var(--blush); color: var(--accent); }
.qty button:disabled { opacity: .3; cursor: not-allowed; }
.qty span { min-width: 24px; text-align: center; font-weight: 600; font-size: .9rem; }
.drawer-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.drawer-side strong { font-size: .95rem; }
.drawer-remove { padding: 0; border: 0; background: none; color: var(--muted); font: .8rem var(--sans); text-decoration: underline; cursor: pointer; }
.drawer-remove:hover { color: var(--accent); }
.drawer-error { padding: 24px 0; color: var(--accent); }

.drawer-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px; text-align: center; color: var(--muted); }
.drawer-empty svg { margin-bottom: 12px; padding: 20px; box-sizing: content-box; border-radius: 50%; background: var(--blush); color: var(--accent); }
.drawer-empty p { margin: 0; }
.drawer-empty-title { color: var(--ink); font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.drawer-empty .btn { margin-top: 20px; }
.drawer.is-empty .drawer-items, .drawer.is-empty .drawer-foot, .drawer:not(.is-empty) .drawer-empty { display: none; }

.drawer-foot { padding: 20px 24px 24px; border-top: 1px solid var(--line); background: var(--bg); }
.drawer-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.drawer-row strong { font-size: 1.25rem; }
.drawer-note { margin: 4px 0 16px; color: var(--muted); font-size: .82rem; }
.btn-block { display: block; width: 100%; text-align: center; }
.drawer-link { display: block; margin-top: 12px; color: var(--muted); font-size: .88rem; font-weight: 500; text-align: center; }
.drawer-link:hover { color: var(--accent); }

/* Category drawer (left) */
.drawer-left { inset: 0 auto 0 0; box-shadow: 24px 0 60px rgb(42 21 32 / .18); }
.drawer-left[open] { animation-name: drawer-in-left; }
@keyframes drawer-in-left { from { transform: translateX(-100%); } }
.cat-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.cat-browse {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), #e64980); color: #fff; text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.cat-browse:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgb(194 37 92 / .6); }
.cat-browse strong { display: block; font-size: 1rem; }
.cat-browse small { opacity: .85; font-size: .8rem; }
.cat-label { margin: 24px 0 8px; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cat-list { margin: 0 -10px; padding: 0; list-style: none; }
.cat-list a { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; text-decoration: none; transition: background .2s; }
.cat-list a:hover { background: var(--blush); }
.cat-thumb {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px;
  background: var(--img) center / cover, var(--tile-bg, var(--accent)); transition: transform .25s;
}
.cat-list li:nth-child(6n+2) .cat-thumb { --tile-bg: #e64980; }
.cat-list li:nth-child(6n+3) .cat-thumb { --tile-bg: #a61e4d; }
.cat-list li:nth-child(6n+4) .cat-thumb { --tile-bg: #f06595; }
.cat-list li:nth-child(6n+5) .cat-thumb { --tile-bg: #d6336c; }
.cat-list li:nth-child(6n+6) .cat-thumb { --tile-bg: #8c1941; }
.cat-list a:hover .cat-thumb { transform: scale(1.06); }
.cat-text { flex: 1; min-width: 0; }
.cat-text strong { display: block; font-weight: 600; }
.cat-text small { color: var(--muted); font-size: .8rem; }
.chev { color: var(--muted); transition: transform .2s, color .2s; }
.cat-list a:hover .chev { color: var(--accent); transform: translateX(3px); }
.cat-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-quick a { padding: 8px 16px; border: 1px solid var(--line); border-radius: 99px; font-size: .85rem; font-weight: 500; text-decoration: none; transition: border-color .2s, color .2s; }
.cat-quick a:hover { border-color: var(--accent); color: var(--accent); }
.cat-quick em { margin-left: 4px; padding: 1px 6px; border-radius: 99px; background: var(--accent); color: #fff; font-size: .62rem; font-style: normal; font-weight: 600; }
.cat-help { padding: 20px 24px 24px; border-top: 1px solid var(--line); background: var(--bg); }
.cat-help p { margin: 0 0 14px; color: var(--muted); font-size: .88rem; }
.cat-help strong { display: block; color: var(--ink); font-size: 1rem; }

/* Shop / category page */
.shop-hero { padding: 36px 0 32px; background: linear-gradient(180deg, var(--blush), var(--bg)); }
.shop-hero h1 { margin: 6px 0 6px; font-size: clamp(2rem, 4.5vw, 2.8rem); }
.shop-hero p { margin: 0; color: var(--muted); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .85rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

.shop { display: grid; grid-template-columns: 290px 1fr; gap: 40px; align-items: start; padding-top: 32px; padding-bottom: 64px; }

/* Filter sidebar: flows with the page (no inner scrollbar) */
.shop-sidebar { padding: 6px 22px 22px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgb(42 21 32 / .25); }
.filters-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
.filters-head h2 { margin: 0; font-size: 1.25rem; }
.filters-head a { color: var(--accent); font-size: .82rem; font-weight: 600; text-decoration: none; }
.filters-head a:hover { text-decoration: underline; }

.fgroup { border-bottom: 1px solid var(--line); }
.fgroup summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font-size: .92rem; font-weight: 600; cursor: pointer; list-style: none; }
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary::after {
  content: ''; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s;
}
.fgroup[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.fgroup[open] { padding-bottom: 18px; }

.fcats { display: grid; gap: 2px; margin: 0 -10px; padding: 0; list-style: none; }
.fcats a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; font-size: .9rem; text-decoration: none; transition: background .2s, color .2s; }
.fcats a:hover { background: var(--blush); }
.fcats i { flex-shrink: 0; width: 18px; height: 18px; border: 1.5px solid #d9c4cd; border-radius: 50%; background: #fff; transition: border .2s; }
.fcats span { flex: 1; min-width: 0; }
.fcats b { color: var(--muted); font-size: .75rem; font-weight: 500; }
.fcats a.is-active { background: var(--blush); color: var(--accent); font-weight: 600; }
.fcats a.is-active i { border: 5px solid var(--accent); }
.fcats a.is-active b { color: var(--accent); }

.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs > i { color: var(--muted); font-style: normal; }
.money { position: relative; flex: 1; min-width: 0; }
.money span { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--muted); font-size: .78rem; pointer-events: none; }
.money input {
  width: 100%; height: 42px; padding: 0 8px 0 38px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg);
  color: var(--ink); font: 500 .88rem var(--sans); -moz-appearance: textfield;
}
.money input::-webkit-inner-spin-button, .money input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.money input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgb(194 37 92 / .12); }
.price-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0; }
.price-quick a { padding: 7px 6px; text-align: center; border-radius: 99px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: .78rem; text-decoration: none; transition: box-shadow .2s, color .2s, background .2s; }
.price-quick a:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.price-quick a.is-active { background: var(--accent); box-shadow: none; color: #fff; }
.btn-apply { padding-block: 10px; font-size: .88rem; }

/* Toggle switch built from a plain checkbox */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: .9rem; cursor: pointer; }
.switch { position: relative; flex-shrink: 0; width: 42px; height: 24px; margin: 0; border-radius: 99px; background: #e6d6dd; appearance: none; cursor: pointer; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(42 21 32 / .25); transition: transform .2s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.filter-help { display: flex; gap: 12px; margin-top: 18px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, var(--blush), #fff); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .2s; }
.filter-help:hover { box-shadow: inset 0 0 0 1px var(--accent-soft), 0 10px 24px -16px rgb(194 37 92 / .5); }
.filter-help > span { font-size: 1.4rem; line-height: 1; }
.filter-help p { margin: 0; color: var(--muted); font-size: .8rem; }
.filter-help strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: .9rem; }
#filter-drawer .filters-head { display: none; }
#filter-drawer .filter-help { display: none; }

.shop-main { min-width: 0; }
.shop-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.shop-count { flex: 1; margin: 0; color: var(--muted); font-size: .9rem; }
.shop-count strong { color: var(--ink); }
.sort label { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--muted); }
.sort select {
  height: 42px; padding: 0 38px 0 14px; border: 1.5px solid var(--line); border-radius: 99px; appearance: none; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%236e5a64' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center no-repeat;
  color: var(--ink); font: 500 .88rem var(--sans);
}
.sort select:focus { outline: none; border-color: var(--accent); }
.btn-filter { display: none; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink); font: 600 .88rem var(--sans); cursor: pointer; }
.btn-filter b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 99px; background: var(--accent); color: #fff; font-size: .7rem; }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 99px; background: var(--blush); color: var(--accent); font-size: .82rem; font-weight: 600; text-decoration: none; transition: background .2s; }
.chip span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; font-size: .9rem; line-height: 1; }
.chip:hover { background: var(--accent-soft); }
.chip-clear { color: var(--muted); font-size: .82rem; }

.shop-empty { padding: 64px 24px; border: 1.5px dashed var(--line); border-radius: 20px; text-align: center; color: var(--muted); }
.shop-empty svg { padding: 18px; box-sizing: content-box; border-radius: 50%; background: var(--blush); color: var(--accent); }
.shop-empty h2 { margin: 16px 0 6px; color: var(--ink); font-size: 1.4rem; }
.shop-empty p { margin: 0 0 20px; }

.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.pager a { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 99px; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager a.is-active { border-color: var(--accent); background: var(--accent); color: #fff; }

/* Product page */
.product-page { padding-top: 24px; padding-bottom: 32px; }
.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; margin-top: 20px; }
.gallery { position: sticky; top: 144px; }
.gallery-main { position: relative; aspect-ratio: 1; border-radius: 24px; background: var(--blush); overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main .badge { top: 16px; left: 16px; font-size: .85rem; padding: 5px 12px; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.thumb { aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 14px; background: var(--blush); overflow: hidden; cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover, .thumb.is-active { opacity: 1; }
.thumb.is-active { border-color: var(--accent); }

.product-cat { display: inline-block; margin-bottom: 8px; color: var(--accent); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.product-info h1 { margin: 0 0 14px; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.product-price strong { color: var(--accent); font-size: 1.9rem; font-weight: 600; }
.product-price s { color: var(--muted); font-size: 1.1rem; }
.save { padding: 3px 10px; border-radius: 99px; background: var(--blush); color: var(--accent); font-size: .8rem; font-weight: 600; }
.stock { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .9rem; font-weight: 500; }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.stock-in { color: #2f8a4f; }
.stock-low { color: #c46a12; }
.stock-out { color: var(--muted); }
.product-short { margin: 18px 0 0; color: var(--muted); }
.product-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -4px 0 12px; color: var(--muted); font-size: .85rem; }
.product-meta strong { color: var(--ink); font-weight: 600; }
.product-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.product-tags a { padding: 3px 10px; border-radius: 99px; background: var(--blush); color: var(--accent); font-size: .8rem; font-weight: 500; text-decoration: none; }
.product-tags a:hover { background: var(--accent); color: #fff; }
.gift-box { display: grid; gap: 10px; margin: 0; padding: 16px; border: 1.5px dashed var(--accent-soft); border-radius: 16px; background: linear-gradient(180deg, #fff, var(--blush)); }
.gift-box legend { padding: 0 6px; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.gift-box legend small { margin-left: 6px; color: #1f7a45; font: 600 .72rem var(--sans); }
.gift-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-size: .92rem; font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s; }
.gift-opt input { width: 18px; height: 18px; accent-color: var(--accent); }
.gift-opt:has(input:checked) { border-color: var(--accent); background: #fff7fa; }
.gift-sub { display: none; gap: 10px; margin: -2px 0 4px 12px; padding-left: 16px; border-left: 2px solid var(--accent-soft); }
.gift-opt:has(input:checked) + .gift-sub { display: grid; }
.gift-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gift-pills > span { width: 70px; color: var(--muted); font-size: .8rem; font-weight: 600; }
.gift-pills label input { position: absolute; opacity: 0; }
.gift-pills label span { display: inline-block; padding: 5px 12px; border: 1.5px solid var(--line); border-radius: 99px; background: #fff; font-size: .82rem; cursor: pointer; }
.gift-pills input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
.gift-pills input:focus-visible + span { box-shadow: 0 0 0 3px rgb(194 37 92 / .25); }
.gift-box .field input { width: 100%; height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: inherit; }
.gift-box .field input:focus { outline: none; border-color: var(--accent); }

.buy-box { display: grid; gap: 14px; margin-top: 24px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.buy-box textarea {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink);
  font: 400 .95rem/1.5 var(--sans); resize: vertical; transition: border-color .2s, box-shadow .2s;
}
.buy-box textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgb(194 37 92 / .12); }
.buy-row { display: flex; gap: 12px; }
.qty-lg { margin: 0; height: 52px; padding: 0 6px; }
.qty-lg button { width: 38px; height: 38px; }
.qty-lg input { width: 44px; border: 0; background: transparent; color: var(--ink); font: 600 1rem var(--sans); text-align: center; -moz-appearance: textfield; }
.qty-lg input::-webkit-inner-spin-button, .qty-lg input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-lg input:focus { outline: none; }
.btn-add { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; }
.wa-order { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; padding: 13px; border-radius: 99px; background: #e9f8ef; color: #1f7a45; font-weight: 600; text-decoration: none; transition: background .2s; }
.wa-order:hover { background: #d5f1e0; }

.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.perks li { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: var(--blush); font-size: .8rem; color: var(--muted); }
.perks b { font-size: 1.2rem; line-height: 1; }
.perks strong { display: block; color: var(--ink); font-size: .88rem; }

.accordion { margin-top: 24px; border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-weight: 600; cursor: pointer; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; color: var(--accent); font-size: 1.4rem; font-weight: 400; line-height: 1; transition: transform .2s; }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion details > div { padding: 0 0 20px; color: var(--muted); font-size: .95rem; }
.accordion a { color: var(--accent); }
.zones { margin: 0; padding: 0; list-style: none; }
.zones li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.zones li:last-child { border-bottom: 0; }
.zones strong { color: var(--ink); }
.related { border-top: 1px solid var(--line); }
.drawer-gift-note { display: flex; gap: 6px; margin-top: 4px; padding: 4px 8px; border-radius: 8px; background: var(--blush); color: var(--ink); font-size: .78rem; overflow-wrap: anywhere; }

/* Product slider (New arrivals) */
.slider-nav { display: flex; align-items: center; gap: 8px; }
.slider-nav a { margin-right: 8px; }
.slider-btn { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.slider-btn:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.slider-viewport { overflow: hidden; touch-action: pan-y; cursor: grab; }
.slider-viewport:active { cursor: grabbing; }
.slider-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px;
  padding-bottom: 4px; will-change: transform; /* moved by JS with translate3d */
}
.slider-track img { -webkit-user-drag: none; user-select: none; }

/* Our products (home) */
.our-products { background: linear-gradient(180deg, var(--bg), var(--blush) 50%, var(--bg)); }
.section-intro { max-width: 560px; margin: 0 auto 36px; text-align: center; }
.section-intro .eyebrow { margin-bottom: 10px; }
.section-intro h2 { margin: 0 0 8px; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.section-intro p:last-child { margin: 0; color: var(--muted); }
.our-products .products { gap: 32px 20px; }
.section-more { margin-top: 44px; text-align: center; }
.section-more .btn { padding: 14px 36px; }

/* Cart, checkout & order success */
.icon { flex-shrink: 0; }
.gift-note .icon, .drawer-gift-note .icon { margin-top: 2px; color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.btn-lg { padding-block: 16px; font-size: 1.05rem; }
.link-btn { padding: 0; border: 0; background: none; color: var(--muted); font: 500 .85rem var(--sans); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--accent); }

.checkout-hero { padding: 36px 0 28px; background: linear-gradient(180deg, var(--blush), var(--bg)); }
.checkout-hero .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.checkout-hero h1 { margin: 0; font-size: clamp(2rem, 4.5vw, 2.8rem); }
.steps { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: .88rem; font-weight: 600; color: var(--muted); }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps li + li::before { content: ''; width: 36px; height: 2px; margin-right: 2px; border-radius: 2px; background: var(--line); }
.steps span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-size: .8rem; }
.steps .is-current { color: var(--ink); }
.steps .is-current span { background: var(--accent); box-shadow: none; color: #fff; }
.steps .is-done { color: var(--accent); }
.steps .is-done span { background: var(--blush); box-shadow: inset 0 0 0 1.5px var(--accent-soft); color: var(--accent); }
.steps .is-done + li::before, .steps .is-current::before { background: var(--accent-soft); }

.checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 32px; align-items: start; padding: 32px 0 72px; }
.checkout-main { display: grid; gap: 20px; min-width: 0; }
.panel { padding: 26px 28px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgb(42 21 32 / .3); }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.panel-head h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.35rem; }
.panel-head > a, .panel-head a { color: var(--accent); font-size: .88rem; font-weight: 600; }
.pill { padding: 2px 10px; border-radius: 99px; background: var(--blush); color: var(--accent); font: 600 .8rem var(--sans); }
.num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 .85rem var(--sans); }

.cart-lines { margin: 0; padding: 0; list-style: none; }
.cart-line { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.cart-line:first-child { border-top: 0; padding-top: 4px; }
.cart-thumb { width: 96px; height: 96px; border-radius: 16px; background: var(--blush); overflow: hidden; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-line-name { font-weight: 600; font-size: 1.02rem; text-decoration: none; }
.cart-line-name:hover { color: var(--accent); }
.cart-line-unit { color: var(--muted); font-size: .85rem; }
.gift-note { display: inline-flex; align-items: flex-start; gap: 7px; align-self: flex-start; margin-top: 4px; padding: 6px 11px; border-radius: 10px; background: var(--blush); font-size: .82rem; overflow-wrap: anywhere; }
.cart-line-actions { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.cart-line-actions .qty { margin: 0; }
.cart-line-total { font-size: 1.05rem; white-space: nowrap; }

.summary { padding: 26px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgb(42 21 32 / .3); }
.summary-sticky { position: sticky; top: 144px; }
.summary h2 { margin: 0 0 18px; font-size: 1.35rem; }
.notice { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; font-size: .88rem; font-weight: 500; }
.notice-error { background: #fdecef; color: #b0213f; }
.notice-ok { background: #e9f8ef; color: #1f7a45; }
.notice a { color: inherit; font-weight: 700; }
.coupon { display: flex; gap: 8px; margin-bottom: 18px; }
.coupon input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1.5px dashed var(--accent-soft); border-radius: 12px; background: var(--bg); color: var(--ink); font: 500 .9rem var(--sans); text-transform: uppercase; }
.coupon input::placeholder { text-transform: none; }
.coupon input:focus { outline: none; border-style: solid; border-color: var(--accent); background: #fff; }
.coupon button { padding: 0 18px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font: 600 .88rem var(--sans); cursor: pointer; }
.coupon button:hover { background: var(--accent); }
.coupon-applied span { display: inline-flex; align-items: center; gap: 8px; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; background: #e9f8ef; color: #1f7a45; font-size: .9rem; }

.totals { margin: 0 0 20px; }
.totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .95rem; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-weight: 600; }
.totals .muted { font-weight: 400; font-size: .85rem; }
.totals .is-discount dd, .totals .is-discount dt { color: #1f7a45; }
.totals .grand { margin-top: 8px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 1.2rem; }
.totals .grand dt { color: var(--ink); font-weight: 600; }
.totals .grand dd { color: var(--accent); font-size: 1.4rem; }
.assure li { display: flex; align-items: center; gap: 10px; }
.assure .icon { color: var(--accent); }
.assure { display: grid; gap: 10px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--muted); font-size: .85rem; }

.cart-empty { max-width: 520px; margin: 48px auto 80px; padding: 56px 32px; border-radius: 24px; background: var(--surface); text-align: center; color: var(--muted); box-shadow: 0 18px 40px -30px rgb(42 21 32 / .3); }
.cart-empty svg { padding: 22px; box-sizing: content-box; border-radius: 50%; background: var(--blush); color: var(--accent); }
.cart-empty h2 { margin: 18px 0 8px; color: var(--ink); }
.cart-empty p { margin: 0 0 24px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-full { grid-column: 1 / -1; }
.field textarea { width: 100%; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 .95rem/1.5 var(--sans); resize: vertical; transition: border-color .2s, box-shadow .2s; }
.field textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgb(194 37 92 / .12); }
.field [aria-invalid="true"] { border-color: #d6405f; background: #fff7f8; }
.field-error { color: #b0213f; font-size: .8rem; font-weight: 500; }

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.choice-list { display: grid; gap: 12px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice-body {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 2px 14px; padding: 16px 18px; border-radius: 16px;
  background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s, background .2s;
}
.choice-body::before { content: ''; grid-row: span 2; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #d9c4cd; transition: box-shadow .2s; }
.choice-body strong { font-size: .95rem; }
.choice-body small { grid-column: 2; color: var(--muted); font-size: .82rem; }
.choice-body em { grid-row: 1; grid-column: 3; color: var(--accent); font-style: normal; font-weight: 600; font-size: .9rem; }
.choice:hover .choice-body { box-shadow: inset 0 0 0 1.5px var(--accent-soft); }
.choice input:checked + .choice-body { background: #fff; box-shadow: inset 0 0 0 2px var(--accent), 0 10px 24px -18px rgb(194 37 92 / .6); }
.choice input:checked + .choice-body::before { box-shadow: inset 0 0 0 6px var(--accent); }
.choice input:focus-visible + .choice-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice.is-disabled { cursor: not-allowed; opacity: .55; }
.choice-body .soon { padding: 3px 10px; border-radius: 99px; background: var(--line); color: var(--muted); font-size: .72rem; }

.mini-lines { display: grid; gap: 14px; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--line); list-style: none; }
.mini-lines li { display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.mini-thumb { position: relative; flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px; background: var(--blush); }
.mini-thumb img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.mini-thumb b { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--ink); color: #fff; font-size: .7rem; }
.mini-name { flex: 1; min-width: 0; font-weight: 500; }
.mini-name small .icon { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.mini-name small { display: flex; gap: 5px; color: var(--muted); font-weight: 400; font-size: .78rem; overflow-wrap: anywhere; }
.fine { margin: 12px 0 0; color: var(--muted); font-size: .78rem; text-align: center; }
.fine a { color: var(--accent); }
.back-link { display: block; margin-top: 14px; color: var(--muted); font-size: .88rem; text-align: center; text-decoration: none; }
.back-link:hover { color: var(--accent); }

.success { display: grid; grid-template-columns: 1fr 400px; gap: 32px; align-items: start; padding-block: 32px 72px; }
.success-card { padding: 44px 40px; border-radius: 24px; background: var(--surface); text-align: center; box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgb(42 21 32 / .3); }
.success-icon { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #e64980); color: #fff; box-shadow: 0 0 0 10px var(--blush); animation: pop .5s cubic-bezier(.2, .8, .2, 1.4); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.success-card h2 { margin: 0 0 6px; font-size: 1.9rem; }
.success-card p { margin: 0 0 6px; }
.order-no { padding: 3px 12px; border-radius: 99px; background: var(--blush); color: var(--accent); letter-spacing: .04em; }
.timeline { display: grid; gap: 0; max-width: 360px; margin: 28px auto; padding: 0; list-style: none; text-align: left; }
.timeline li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.timeline li:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 32px; bottom: 2px; width: 2px; background: var(--line); }
.timeline b { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); font-size: .8rem; }
.timeline .is-done b { background: var(--accent); box-shadow: none; color: #fff; }
.timeline span { color: var(--muted); font-size: .85rem; }
.timeline strong { display: block; color: var(--ink); font-size: .95rem; }
.success-card .actions { justify-content: center; }
.deliver-to { display: grid; gap: 14px; font-size: .9rem; color: var(--muted); }
.deliver-to p { margin: 0; }
.deliver-to span { display: block; margin-bottom: 2px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.deliver-to strong { display: block; color: var(--ink); }

/* Policy pages */
.legal-hero { padding: 40px 0 36px; background: linear-gradient(180deg, var(--blush), var(--bg)); }
.legal-hero h1 { margin: 10px 0 10px; font-size: clamp(2.1rem, 5vw, 3.1rem); }
.legal-intro { max-width: 640px; margin: 0 0 16px; color: var(--muted); font-size: 1.08rem; }
.legal-updated { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: .8rem; font-weight: 500; }
.legal-updated::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.legal { display: grid; grid-template-columns: 260px minmax(0, 780px); gap: 56px; justify-content: center; padding-block: 36px 80px; }
.legal-side { position: sticky; top: 144px; align-self: start; display: grid; gap: 28px; }
.legal-toc, .legal-others { display: grid; gap: 2px; }
.legal-side .filter-title { margin: 0 0 8px 16px; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.legal-others .filter-title { margin-left: 12px; }
.legal-toc a { position: relative; padding: 7px 12px 7px 16px; border-radius: 10px; color: var(--muted); font-size: .88rem; text-decoration: none; transition: color .2s, background .2s; }
.legal-toc a::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: transparent; transition: background .2s; }
.legal-toc a:hover { color: var(--ink); background: var(--blush); }
.legal-toc a.is-active { color: var(--accent); font-weight: 600; }
.legal-toc a.is-active::before { background: var(--accent); }
.legal-others a { display: flex; justify-content: space-between; padding: 7px 12px; border-radius: 10px; font-size: .88rem; text-decoration: none; transition: background .2s, color .2s; }
.legal-others a:hover { background: var(--blush); color: var(--accent); }
.legal-others span { opacity: .5; }

.legal-body { min-width: 0; }
.legal-summary { margin-bottom: 36px; padding: 26px 28px; border-radius: 20px; background: linear-gradient(135deg, var(--blush), #fff); box-shadow: inset 0 0 0 1px var(--line); }
.legal-summary h2 { margin: 0 0 14px; font-size: 1.2rem; }
.legal-summary ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.legal-summary li { display: flex; gap: 12px; }
.legal-summary li::before { content: '✓'; flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; }

.legal-section { padding: 28px 0; border-top: 1px solid var(--line); scroll-margin-top: 150px; }
.legal-section h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font-size: 1.45rem; }
.legal-section h2 span { color: var(--accent-soft); font-size: 1rem; font-family: var(--sans); font-weight: 600; letter-spacing: .06em; }
.legal-section p, .legal-section li { color: #4d3a42; line-height: 1.75; }
.legal-section p { margin: 0 0 12px; }
.legal-section ul, .legal-section ol { display: grid; gap: 8px; margin: 0 0 12px; padding-left: 22px; }
.legal-section li::marker { color: var(--accent); font-weight: 600; }
.legal-section strong { color: var(--ink); }
.legal-section a { color: var(--accent); font-weight: 500; }
.legal-section code { padding: 2px 7px; border-radius: 6px; background: var(--blush); font-size: .85em; }
.legal-table-wrap { margin: 4px 0 14px; overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.legal-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.legal-table th { padding: 12px 16px; background: var(--blush); color: var(--ink); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.legal-table td { padding: 14px 16px; border-top: 1px solid var(--line); color: #4d3a42; vertical-align: top; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 99px; background: #e9f8ef; color: #1f7a45; font-size: .75rem; font-weight: 600; white-space: nowrap; }

.legal-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding: 30px 32px; border-radius: 22px; background: linear-gradient(135deg, var(--accent), #e64980); color: #fff; }
.legal-contact h2 { margin: 0 0 4px; font-size: 1.4rem; }
.legal-contact p { margin: 0; opacity: .88; }

/* About & contact */
.about { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.about h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.about p { color: var(--muted); }
.about .actions { margin-top: 24px; }
.about h2 em { color: var(--accent); font-style: italic; }
.founder-photo { position: relative; margin: 0; }
.founder-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: 200px 200px 24px 24px; box-shadow: 0 30px 60px -30px rgb(194 37 92 / .35); }
.founder-photo figcaption { position: absolute; right: -16px; bottom: 32px; padding: 14px 20px; border-radius: 16px; background: var(--surface); box-shadow: 0 16px 40px -16px rgb(42 21 32 / .3); }
.founder-photo strong { display: block; font-family: var(--serif); font-size: 1.3rem; }
.founder-photo span { color: var(--muted); font-size: .85rem; }
.founder-quote { margin: 24px 0 0; padding-left: 20px; border-left: 3px solid var(--accent); color: var(--ink); font: italic 400 1.3rem/1.4 var(--serif); }
.journey-wrap { background: var(--blush); }
.journey-wrap h2 { margin-top: 0; font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: none; }
.journey li { padding: 28px; border-radius: 20px; background: var(--surface); }
.journey span { color: var(--accent); font: 600 2rem var(--serif); }
.journey h3 { margin: 8px 0 6px; }
.journey p { margin: 0; color: var(--muted); }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contact-card { display: flex; flex-direction: column; gap: 6px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--muted); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.contact-card:hover { transform: translateY(-3px); border-color: var(--accent-soft); box-shadow: 0 20px 40px -24px rgb(194 37 92 / .4); }
.contact-card strong { color: var(--ink); font-family: var(--serif); font-size: 1.35rem; }
.contact-card em { margin-top: auto; padding-top: 10px; color: var(--accent); font-style: normal; font-weight: 600; }
.contact-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 16px; background: var(--blush); color: var(--accent); }
.contact-card-main { background: linear-gradient(135deg, var(--accent), #e64980); border: 0; color: rgb(255 255 255 / .85); }
.contact-card-main strong, .contact-card-main em { color: #fff; }
.contact-card-main .contact-icon { background: rgb(255 255 255 / .18); color: #fff; }
.contact-form-wrap { background: var(--blush); }
.contact-form-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.contact-form-intro h2 { margin-top: 0; font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
.contact-form-intro > p { color: var(--muted); }
.contact-points { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--ink); font-weight: 500; }
.contact-points li::before { content: '\2665'; margin-right: 10px; color: var(--accent); }
.field.subject-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.subject-pills legend { margin-bottom: 6px; padding: 0; }
.subject-pills input { position: absolute; opacity: 0; }
.subject-pills span { display: inline-block; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 99px; background: var(--bg); font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.subject-pills input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
.subject-pills input:focus-visible + span { box-shadow: 0 0 0 4px rgb(194 37 92 / .2); }
.contact-sent { padding: 32px 8px; text-align: center; }
.contact-sent .contact-icon { margin: 0 auto 8px; }
.contact-sent h3 { margin: 0 0 6px; }
.contact-sent p { margin: 0 0 20px; color: var(--muted); }
.contact-social { margin-top: 40px; text-align: center; color: var(--muted); }
.contact-social .socials { justify-content: center; }
.contact-social .socials a { border-color: var(--line); color: var(--ink); text-decoration: none; }
.contact-social .socials a:hover { border-color: var(--accent); color: var(--accent); }

/* Login / sign-up popup */
body:has(.modal[open]) { overflow: hidden; }
.modal {
  width: min(880px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 24px; background: var(--surface); color: var(--ink);
  box-shadow: 0 40px 80px -20px rgb(42 21 32 / .4); overflow: hidden;
}
.modal[open] { animation: modal-in .35s cubic-bezier(.2, .8, .2, 1); }
.modal::backdrop { background: rgb(42 21 32 / .5); backdrop-filter: blur(4px); animation: fade-in .3s; }
@keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(.97); } }

.auth { display: grid; grid-template-columns: 1fr 1.2fr; min-height: 580px; }
.auth-art {
  display: flex; flex-direction: column; justify-content: space-between; padding: 36px; color: #fff;
  background: linear-gradient(170deg, rgb(194 37 92 / .35) 0%, rgb(42 21 32 / .85) 100%), url('/assets/images/hero.jpg') center / cover, var(--accent);
}
.auth-art .brand { color: #fff; }
.auth-art .brand span { color: #f7a8c4; }
.auth-quote { margin: 0 0 20px; font-family: var(--serif); font-size: 1.7rem; font-weight: 500; line-height: 1.25; }
.auth-perks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.auth-perks li { display: flex; align-items: center; gap: 10px; }
.auth-perks li::before { content: '✓'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgb(255 255 255 / .18); font-size: .7rem; font-weight: 700; }

.auth-body { position: relative; padding: 44px 44px 36px; overflow-y: auto; max-height: calc(100dvh - 32px); }
.modal-close { position: absolute; top: 14px; right: 14px; }
.auth-title { margin: 0 0 6px; font-size: 1.9rem; }
.auth-tabs[hidden] { display: none; }
.addr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; border: 0; }
.addr-card { position: relative; display: block; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.addr-card:hover { border-color: var(--accent-soft); }
.addr-card input { position: absolute; opacity: 0; }
.addr-card:has(input:checked) { border-color: var(--accent); background: #fff7fa; box-shadow: 0 0 0 3px rgb(194 37 92 / .12); }
.addr-card:has(input:focus-visible) { box-shadow: 0 0 0 3px rgb(194 37 92 / .35); }
.addr-body { display: grid; gap: 2px; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.addr-body strong { color: var(--ink); font-size: .95rem; }
.addr-tick { position: absolute; top: 12px; right: 12px; display: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; }
.addr-card:has(input:checked) .addr-tick { display: grid; }
.addr-card-new { display: grid; place-items: center; border-style: dashed; text-align: center; }
.addr-card-new strong { color: var(--accent); }
.addr-form { margin: 0; padding: 0; border: 0; }
.addr-form[hidden] { display: none; }
.addr-form select { width: 100%; height: 48px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 .95rem var(--sans); }
.addr-form select:focus { outline: none; border-color: var(--accent); background: #fff; }
.addr-remove { margin-top: 8px; }
.save-addr { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 500; cursor: pointer; }
.save-addr input { width: 18px; height: 18px; accent-color: var(--accent); }
.quick-notes { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 0; }
.quick-notes button { padding: 5px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font: 500 .8rem var(--sans); cursor: pointer; transition: border-color .15s, color .15s; }
.quick-notes button:hover { border-color: var(--accent); color: var(--accent); }
.choice-legend { margin-bottom: 8px; font-size: .85rem; font-weight: 600; }
.upload-error { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; background: #fdecef; color: #b0213f; font-size: .82rem; font-weight: 500; }
.welcome-note { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; font-size: .95rem; }
.verify-icon { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 16px; border-radius: 50%; background: var(--blush); color: var(--accent); }
.auth-forgot { justify-self: end; margin-top: -8px; padding: 0; border: 0; background: none; color: var(--accent); font: 600 .84rem var(--sans); cursor: pointer; }
.auth-forgot:hover { text-decoration: underline; }
.otp-note { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--blush); font-size: .9rem; line-height: 1.5; }
.otp-note .icon { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.otp-note strong { overflow-wrap: anywhere; }
.field .otp-input { height: 60px; font: 600 1.7rem var(--serif); letter-spacing: .5em; text-align: center; padding-left: .5em; }
.auth-error.is-ok { background: #e9f8ef; color: #1f7a45; }
.auth-sub { margin: 0 0 24px; color: var(--muted); font-size: .95rem; }

.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 24px; padding: 4px; border-radius: 99px; background: var(--blush); }
.auth-tabs button { padding: 10px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font: 600 .9rem var(--sans); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.auth-tabs [aria-selected="true"] { background: #fff; color: var(--accent); box-shadow: 0 2px 10px rgb(42 21 32 / .08); }

.auth-form { display: grid; gap: 16px; }
.auth-form[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; }
.field > span:first-child { display: flex; justify-content: space-between; }
.field small { color: var(--muted); font-weight: 400; }
.field input {
  width: 100%; height: 48px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink); font: 400 .95rem var(--sans); transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder { color: #b3a2aa; }
.field input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgb(194 37 92 / .12); }
.pw { position: relative; display: block; }
.pw input { padding-right: 70px; }
.pw-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--accent); font: 600 .8rem var(--sans); cursor: pointer; }
.pw-toggle:hover { background: var(--blush); }
.auth-error { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fdecef; color: #b0213f; font-size: .85rem; font-weight: 500; }
.auth-error[hidden] { display: none; }
.btn:disabled { opacity: .6; cursor: wait; }
.auth-form .btn { margin-top: 4px; padding-block: 14px; }
.auth-switch, .auth-terms { margin: 0; color: var(--muted); font-size: .88rem; text-align: center; }
.auth-terms { font-size: .78rem; }
.auth-terms a { color: var(--accent); }
.auth-switch button { padding: 0; border: 0; background: none; color: var(--accent); font: 600 .88rem var(--sans); cursor: pointer; }
.auth-switch button:hover { text-decoration: underline; }
.auth-page { max-width: 560px; text-align: center; }
.auth-page .actions { justify-content: center; }

/* Responsive */
@media (max-width: 1240px) {
  .shop .products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .shop { grid-template-columns: 260px 1fr; gap: 28px; }
}
@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
  .legal-side { position: static; order: 2; }  /* other policies go below the text on phones */
  .legal-toc { display: none; }
  .checkout-layout, .success { grid-template-columns: 1fr; }
  .summary-sticky { position: static; }
  .slider-track { grid-auto-columns: calc((100% - 16px) / 2); }
  .about, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .journey, .contact-form-grid { grid-template-columns: 1fr; }
  .contact-form-grid { gap: 28px; }
  .founder-photo figcaption { right: 12px; bottom: 16px; }
  .founder-photo img { max-height: 520px; }
  .product { grid-template-columns: 1fr; gap: 28px; margin-top: 14px; }
  .gallery { position: static; }
  .shop { grid-template-columns: 1fr; padding-top: 20px; }
  .shop-sidebar { display: none; }
  .btn-filter { display: inline-flex; }
  .shop-count { display: none; }
  .shop-toolbar { justify-content: space-between; }
  .sort label > span { display: none; }
  .products, .shop .products { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .custom-cta { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 190px; }
  .topbar p { display: none; }
  .topbar .wrap { justify-content: center; }
  .mainbar { flex-wrap: wrap; height: auto; gap: 12px 16px; padding-block: 12px; }
  .brand { font-size: 1.3rem; }
  .icons { margin-left: auto; gap: 18px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
}
@media (max-width: 760px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-art { display: none; }
  .auth-body { padding: 40px 22px 28px; }
}
@media (max-width: 480px) {
  .legal-summary, .legal-contact { padding: 22px 20px; }
  .legal-section h2 { font-size: 1.25rem; }
  .banner { padding-top: 12px; }
  .banner-frame { border-radius: 18px; }
  .banner-slide { align-items: flex-end; padding: 0 22px 52px; background: linear-gradient(0deg, rgb(42 21 32 / .88) 0%, rgb(120 20 60 / .45) 55%, transparent 90%), var(--img) center / cover, var(--accent); }
  .banner-copy p:not(.eyebrow) { display: none; }
  .banner-copy h2 { margin-bottom: 16px; }
  .panel, .summary { padding: 20px 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 72px 1fr; }
  .cart-thumb { width: 72px; height: 72px; }
  .cart-line-total { grid-column: 2; }
  .steps li + li::before { width: 16px; }
  .success-card { padding: 32px 20px; }
  .wrap { padding-inline: 16px; }
  .catbar .wrap { gap: 18px; }
  .cat-all { padding-right: 16px; }
  .slider-track { grid-auto-columns: 72%; }
  .slider-nav .slider-btn { display: none; }
  .perks { grid-template-columns: 1fr; }
  .buy-box { padding: 16px; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .cat-circle { width: 82px; }
  .cat-circle-img { width: 68px; height: 68px; }
  .cat-circle-img .icon { width: 30px; height: 30px; }
  .slider-track.cat-track { gap: 4px; }
  .cat-section { padding: 26px 0 12px; }
  .cat-section .slider-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Admin panel. body is the grid: sidebar + main. */
body.admin { --side: 272px; display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; background: #faf5f7; transition: grid-template-columns .25s; }
body.admin.side-min { --side: 84px; }
.admin-side { position: sticky; top: 0; z-index: 30; display: flex; flex-direction: column; height: 100vh; padding: 20px 16px 16px; border-right: 1px solid var(--line); background: #fff; overflow: hidden auto; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-bottom: 20px; padding-left: 4px; }
.side-logo { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.side-logo .brand { font-size: 1.15rem; }
.side-mark { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #e64980, var(--accent) 55%, var(--accent-dark)); color: #fff; font: 600 1.25rem/1 var(--serif); box-shadow: 0 8px 18px -8px rgb(194 37 92 / .7), inset 0 1px 0 rgb(255 255 255 / .35); }
.side-btn { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.side-btn:hover { background: var(--blush); color: var(--accent); }
.side-label { margin: 18px 0 6px; padding: 0 12px; color: #9a8791; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.side-label:first-child { margin-top: 0; }
.side-nav { display: grid; gap: 2px; }
.side-nav a, .side-shop { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 10px; color: #4d3a44; font-size: .92rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.side-nav a svg, .side-shop svg { flex-shrink: 0; color: #8f7a85; transition: color .15s; }
.side-nav a:hover, .side-shop:hover { background: #fbf3f6; color: var(--ink); }
.side-nav a[aria-current] { background: var(--blush); color: var(--accent); font-weight: 600; }
.side-nav a[aria-current] svg, .side-nav a:hover svg, .side-shop:hover svg { color: var(--accent); }
.side-count { margin-left: auto; min-width: 26px; padding: 1px 8px; border-radius: 99px; background: var(--blush); box-shadow: inset 0 0 0 1px var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 600; text-align: center; }
.side-nav a[aria-current] .side-count { background: #fff; }
.side-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: auto; padding-top: 16px; }
.side-user { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 4px 0; border-top: 1px solid var(--line); }
.side-avatar { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-soft), var(--blush)); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent-soft); color: var(--accent); font: 600 1.1rem var(--serif); }
.side-who { flex: 1; min-width: 0; line-height: 1.3; }
.side-who strong { display: block; font-size: .9rem; }
.side-who small { display: block; overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.side-menu { flex-shrink: 0; margin-left: auto; }
.side-menu summary { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); list-style: none; cursor: pointer; }
.side-menu summary::-webkit-details-marker { display: none; }
.side-menu summary:hover, .side-menu[open] summary { background: var(--blush); color: var(--accent); }
.side-pop { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; display: grid; min-width: 180px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -16px rgb(42 21 32 / .35); }
.side-pop a, .side-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: 500 .88rem var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.side-pop a:hover, .side-pop button:hover { background: var(--blush); color: var(--accent); }
.side-pop svg { width: 17px; height: 17px; }
.admin-topbar, .side-scrim { display: none; }

/* Collapsed: icons only, names appear as a dark tooltip on hover/focus. */
.side-min .side-text, .side-min .side-count, .side-min .side-avatar { display: none; }
.side-min .side-menu { margin: 0; }
.side-min .side-menu summary { width: 42px; height: 42px; border-radius: 12px; }
.side-min .side-pop { left: calc(100% + 10px); right: auto; bottom: 0; }
.side-min .admin-side { padding-inline: 14px; overflow: visible; }
.side-min .side-head { flex-direction: column; gap: 14px; padding: 0; }
.side-min .side-label { height: 1px; margin: 14px 8px; padding: 0; background: var(--line); }
.side-min .side-label:first-child { display: none; }
.side-min .side-nav a, .side-min .side-shop { justify-content: center; padding: 0; }
.side-min .side-user { justify-content: center; padding-inline: 0; }
.side-min [data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; z-index: 40; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 500; white-space: nowrap; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .15s; }
.side-min [data-tip]:hover::after, .side-min [data-tip]:focus-visible::after { opacity: 1; }
.side-min .side-nav a:has(.side-count)::before { content: ''; position: absolute; top: 8px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.side-min .side-collapse svg { transform: scaleX(-1); }

.admin-main { min-width: 0; padding: 32px 40px 64px; }
.admin-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.admin-head h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.admin-head .eyebrow { margin-bottom: 6px; }
body.admin .back-link { display: inline-block; margin: 0 0 12px; text-align: left; }
.admin-note { margin: 4px 0 0; color: var(--muted); font-size: .85rem; font-weight: 400; }
.admin-empty { margin: 0; padding: 32px 0; color: var(--muted); text-align: center; }
.admin-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.admin-stack { display: grid; gap: 24px; min-width: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat { display: grid; gap: 2px; padding: 22px; border-radius: 20px; background: var(--surface); color: var(--muted); font-size: .85rem; text-decoration: none; box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgb(42 21 32 / .3); transition: transform .2s; }
a.stat:hover { transform: translateY(-2px); }
.stat strong { color: var(--ink); font: 600 2rem/1.2 var(--serif); }
.stat em { font-style: normal; font-size: .8rem; }
.stat-main { background: linear-gradient(135deg, var(--accent), #e64980); color: rgb(255 255 255 / .85); }
.stat-main strong { color: #fff; }

.table-wrap { overflow-x: auto; margin: -6px -8px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th { padding: 10px 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.admin-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table td small { display: block; color: var(--muted); font-size: .8rem; }
.admin-table td strong, .admin-table td:nth-child(3) { white-space: nowrap; }
.admin-table a { color: var(--ink); text-decoration: none; }
.admin-table a:hover { color: var(--accent); }
.prod-cell { display: flex; align-items: center; gap: 12px; }
.prod-cell .mini-thumb { width: 44px; height: 44px; }
.prod-cell > span:last-child { display: grid; }
.code { font-family: ui-monospace, monospace; letter-spacing: .04em; }
.row-actions form { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.pill { display: inline-block; white-space: nowrap; }
button.pill { border: 0; cursor: pointer; }
.pill-lg { padding: 6px 16px; font-size: .9rem; }
.pill-pending { background: #fff4e0; color: #9a5b00; }
.pill-processing { background: #e8f0fe; color: #2754b8; }
.pill-shipped { background: #f1e8fd; color: #6b35b8; }
.pill-delivered { background: #e9f8ef; color: #1f7a45; }
.pill-cancelled { background: #fdecef; color: #b0213f; }
.pill-muted { background: #eee9eb; color: var(--muted); }

.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs a { padding: 7px 14px; border-radius: 99px; color: var(--muted); font-size: .88rem; font-weight: 500; text-decoration: none; }
.tabs a:hover { color: var(--ink); background: var(--surface); }
.tabs a[aria-current] { background: var(--ink); color: #fff; }
.tabs b { margin-left: 4px; font-weight: 600; opacity: .7; }
.admin-search input { width: 280px; max-width: 100%; height: 42px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 99px; background: #fff; font: inherit; font-size: .9rem; }
.admin-search input:focus { outline: none; border-color: var(--accent); }

body.admin .field select, body.admin .field input[type="date"] { width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 .95rem var(--sans); }
body.admin .field select:focus { outline: none; border-color: var(--accent); }
body.admin .field input[type="file"] { height: auto; padding: 10px; font-size: .85rem; }
body.admin .field small { display: inline; }
.switch-row small { display: block; color: var(--muted); font-size: .8rem; }
.link-danger { padding: 0; border: 0; background: none; color: #b0213f; font: 600 .85rem var(--sans); cursor: pointer; }
.link-danger:hover { text-decoration: underline; }
.admin-stack > .link-danger { justify-self: center; }
.notice-note { background: var(--blush); color: var(--ink); }
.low-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.low-list li { display: flex; justify-content: space-between; gap: 12px; }
.low-list a { color: var(--ink); text-decoration: none; }
.copy-box { width: 100%; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); font: .85rem/1.5 var(--sans); resize: vertical; }

.order-lines { display: grid; gap: 16px; margin: 0 0 20px; padding: 0; list-style: none; }
.order-lines li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: start; font-size: .92rem; }
.order-lines small { display: block; color: var(--muted); }
.order-lines .drawer-gift-note { margin-top: 6px; }
.deliver-block { margin: 0 0 14px; line-height: 1.6; }
.deliver-block a { color: var(--accent); }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-bottom: 18px; }
.photo-grid:empty { display: none; }
.photo { position: relative; margin: 0; aspect-ratio: 1; }
.photo img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; }
.photo figcaption { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 99px; background: rgb(255 255 255 / .92); font-size: .7rem; font-weight: 600; }
.photo.is-main img { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgb(42 21 32 / .75); color: #fff; font-size: .75rem; cursor: pointer; }
.photo-del:hover { background: #b0213f; }


.prod-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 20px; }
.prod-tab { position: relative; display: grid; gap: 2px; padding: 14px 16px; border: 1.5px solid transparent; border-radius: 16px; background: var(--surface); color: var(--muted); font-size: .82rem; text-decoration: none; box-shadow: 0 1px 0 var(--line); transition: border-color .2s, transform .2s; }
.prod-tab strong { color: var(--ink); font: 600 1.45rem/1.1 var(--serif); }
.prod-tab:hover { transform: translateY(-2px); }
.prod-tab[aria-current] { border-color: var(--accent); background: var(--blush); color: var(--accent); }
.prod-tab::before { content: ''; position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, transparent); }
.prod-tab-live { --dot: #2f9e62; } .prod-tab-hidden { --dot: #b8a9b0; } .prod-tab-popular { --dot: #e0a100; }
.prod-tab-low { --dot: #e8890c; } .prod-tab-soldout { --dot: #d6405f; } .prod-tab-sale { --dot: var(--accent); }
.pill-popular { display: inline-flex; align-items: center; gap: 4px; background: #fff6db; color: #9a6b00; }
.pill-sale { background: var(--accent); color: #fff; }
.prod-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.head-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.perf-grid div { display: grid; padding: 12px 14px; border-radius: 14px; background: var(--blush); }
.perf-grid strong { font: 600 1.2rem var(--serif); }
.perf-grid span { color: var(--muted); font-size: .78rem; }

.inline-form { display: contents; }
.col-check { width: 36px; }
.col-check input, .prod-check input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.prod-table tr.is-selected td { background: #fdf3f7; }
.is-hidden-row .mini-thumb, .is-hidden-row .prod-card-img img { opacity: .5; filter: grayscale(.4); }
.popular-tag { display: inline-flex !important; align-items: center; gap: 3px; margin-top: 2px; color: #b07d00 !important; font-weight: 600; }
.popular-tag svg { fill: currentColor; }
.stock-edit { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; transition: border-color .2s; }
.stock-edit:focus-within { border-color: var(--accent); }
.stock-edit input { width: 58px; height: 34px; padding: 0 8px; border: 0; background: transparent; color: var(--ink); font: 600 .9rem var(--sans); -moz-appearance: textfield; }
.stock-edit input::-webkit-inner-spin-button { opacity: 1; }
.stock-edit input:focus { outline: none; }
.stock-edit button { display: grid; place-items: center; width: 30px; height: 34px; border: 0; border-left: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; }
.stock-edit button:hover { background: var(--accent); color: #fff; }
.stock-edit.is-low { border-color: #f3c98b; background: #fffaf0; }
.stock-edit.is-out { border-color: #f5b5c3; background: #fff5f7; }
.status-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--muted); font: 500 .85rem var(--sans); cursor: pointer; }
.mini-switch { position: relative; width: 34px; height: 20px; border-radius: 99px; background: #e2d3da; transition: background .2s; }
.mini-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(42 21 32 / .3); transition: transform .2s; }
.status-toggle[aria-pressed="true"] { color: #1f7a45; }
.status-toggle[aria-pressed="true"] .mini-switch { background: #2f9e62; }
.status-toggle[aria-pressed="true"] .mini-switch::after { transform: translateX(14px); }
.star-btn[aria-pressed="true"] { border-color: #f3d98b; background: #fff6db; color: #d19a00; }
.star-btn[aria-pressed="true"] svg, .star-fab[aria-pressed="true"] svg { fill: currentColor; }

.bulk-bar { position: sticky; top: 12px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 12px 10px 18px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: 0 20px 40px -18px rgb(42 21 32 / .6); }
.bulk-bar[hidden] { display: none; }
.bulk-bar strong { margin-right: 8px; font-size: .9rem; }
.bulk-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid rgb(255 255 255 / .18); border-radius: 99px; background: rgb(255 255 255 / .08); color: #fff; font: 500 .84rem var(--sans); cursor: pointer; }
.bulk-btn:hover { background: rgb(255 255 255 / .18); }
.bulk-danger:hover { border-color: #ff8fa6; background: #b0213f; }
.bulk-clear { margin-left: auto; border: 0; background: none; color: #d9c7cf; font: 500 .84rem var(--sans); cursor: pointer; }

.prod-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.prod-card { display: flex; flex-direction: column; overflow: hidden; border: 2px solid transparent; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgb(42 21 32 / .3); transition: transform .25s, border-color .2s; }
.prod-card:hover { transform: translateY(-3px); }
.prod-card.is-selected { border-color: var(--accent); }
.prod-card-img { position: relative; aspect-ratio: 1; background: linear-gradient(135deg, var(--blush), #fbe3ec); }
.prod-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prod-check { position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgb(255 255 255 / .92); cursor: pointer; }
.prod-badges { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.star-fab { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); color: #a8959e; cursor: pointer; box-shadow: 0 4px 12px -4px rgb(42 21 32 / .35); transition: transform .15s, color .15s; }
.star-fab:hover { transform: scale(1.1); color: #d19a00; }
.star-fab[aria-pressed="true"] { background: #fff6db; color: #d19a00; }
.prod-card-body { display: grid; gap: 2px; padding: 14px 16px 6px; color: var(--ink); text-decoration: none; }
.prod-card-body small { color: var(--muted); font-size: .75rem; }
.prod-card-body strong { font-weight: 600; line-height: 1.35; }
.prod-card-body:hover strong { color: var(--accent); }
.prod-card-price { color: var(--accent); font-weight: 600; }
.prod-card-price s { color: var(--muted); font-size: .8rem; font-weight: 400; }
.prod-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 8px 12px 12px 16px; color: var(--muted); font-size: .78rem; }
.prod-card-foot .icon-btn { width: 32px; height: 32px; }
.prod-card-foot .icon-btn[aria-pressed="false"] { color: #c7b7be; }
@media (max-width: 1200px) { .prod-tabs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .prod-tabs { grid-template-columns: repeat(2, 1fr); } .admin-search { flex-wrap: wrap; } .admin-search select { flex: 1; } }

/* Admin product form */
.prod-form textarea { width: 100%; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 .95rem/1.5 var(--sans); resize: vertical; }
.prod-form textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgb(194 37 92 / .12); }
.prod-form select:disabled { opacity: .55; }
.prod-form .field small a { color: var(--accent); }
.prod-form input.code { font-family: ui-monospace, monospace; letter-spacing: .03em; }
.tag-preview { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-preview:empty { display: none; }
.tag-preview span { padding: 2px 10px; border-radius: 99px; background: var(--blush); color: var(--accent); font-size: .78rem; font-weight: 500; }
.price-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.input-suffix { position: relative; display: block; }
.input-suffix b { position: absolute; top: 50%; right: 14px; color: var(--muted); font-weight: 500; transform: translateY(-50%); pointer-events: none; }
.input-suffix input { padding-right: 34px; }
.price-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 18px; overflow: hidden; border-radius: 14px; background: var(--line); }
.price-summary div { display: grid; gap: 2px; padding: 12px 14px; background: var(--blush); }
.price-summary span { color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.price-summary strong { font: 600 1.15rem var(--serif); }
.price-summary [data-out="profit"]:not(.is-neg) { color: #1f7a45; }
.price-summary .is-neg { color: #b0213f; }
.gift-admin { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gift-toggle { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.gift-toggle:has(.switch:checked) { border-color: var(--accent-soft); background: #fff7fa; }
.gift-toggle .switch { order: 3; margin-left: auto; }
.gift-toggle > span:last-of-type { display: grid; }
.gift-toggle strong { font-size: .92rem; }
.gift-toggle small { color: var(--muted); font-size: .78rem; }
.gift-ico { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; background: var(--blush); font-size: 1.15rem; }
.gift-admin-sub { display: none; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 4px 8px 16px; border-left: 2px solid var(--accent-soft); }
.gift-toggle:first-child { grid-column: 1 / -1; }
.gift-admin-sub { grid-column: 1 / -1; }
.gift-toggle:has(.switch:checked) + .gift-admin-sub { display: grid; }
.status-pick { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.status-pick legend { margin-bottom: 8px; font-size: .85rem; font-weight: 600; }
.status-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.status-opt input { width: 18px; height: 18px; accent-color: var(--accent); }
.status-opt span { display: grid; }
.status-opt strong { font-size: .92rem; }
.status-opt small { color: var(--muted); font-size: .78rem; }
.status-opt::after { content: ''; width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: var(--dot); }
.status-active { --dot: #2f9e62; } .status-draft { --dot: #b8a9b0; } .status-out { --dot: #d6405f; }
.status-opt:has(input:checked) { border-color: var(--accent); background: #fff7fa; }
[data-stock-field].is-muted { opacity: .45; }
.prod-side { position: sticky; top: 16px; }
@media (max-width: 1300px) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .prod-side { position: static; } }
@media (max-width: 640px) { .price-grid, .gift-admin, .gift-admin-sub { grid-template-columns: 1fr 1fr; } .price-summary { grid-template-columns: 1fr 1fr; } .gift-admin { grid-template-columns: 1fr; } }

.cat-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.cat-summary div { display: grid; padding: 18px 22px; border-radius: 18px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.cat-summary strong { font: 600 1.7rem/1.2 var(--serif); }
.cat-summary span { color: var(--muted); font-size: .85rem; }
.admin-toolbar .admin-note a { color: var(--accent); font-weight: 600; text-decoration: none; }
.view-toggle { display: flex; padding: 4px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.view-toggle a { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; color: var(--muted); font-size: .88rem; font-weight: 500; text-decoration: none; transition: background .2s, color .2s; }
.view-toggle a:hover { color: var(--ink); }
.view-toggle a[aria-current] { background: var(--blush); color: var(--accent); font-weight: 600; }
.admin-search { display: flex; gap: 8px; }
.admin-search select { height: 42px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink); font: inherit; font-size: .9rem; }

.cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.cat-card { overflow: hidden; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgb(42 21 32 / .3); transition: transform .25s, box-shadow .25s; }
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 var(--line), 0 26px 50px -28px rgb(194 37 92 / .45); }
.cat-card-img { position: relative; aspect-ratio: 4 / 3; background: var(--img, none) center / cover, linear-gradient(135deg, var(--blush), #fbe3ec); }
.cat-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(42 21 32 / .45)); opacity: 0; transition: opacity .25s; }
.cat-card:hover .cat-card-img::after, .cat-card:focus-within .cat-card-img::after { opacity: 1; }
.cat-noimg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: #c393a6; font-size: .85rem; font-weight: 500; }
.cat-badge { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 4px 12px; border-radius: 99px; background: rgb(255 255 255 / .92); backdrop-filter: blur(6px); font-size: .75rem; font-weight: 600; }
.cat-card-actions { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: flex; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.cat-card:hover .cat-card-actions, .cat-card:focus-within .cat-card-actions { opacity: 1; transform: none; }
@media (hover: none) { .cat-card-actions { opacity: 1; transform: none; } }
.cat-act { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 99px; background: #fff; color: var(--ink); font: 600 .82rem var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 6px 16px -8px rgb(42 21 32 / .5); }
.cat-act:hover { background: var(--accent); color: #fff; }
.cat-card-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 18px; }
.cat-card-body h2 { margin: 0; font-size: 1.15rem; }
.cat-card-body p { margin: 2px 0 0; color: var(--muted); font-size: .78rem; }
.cat-card-link { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 12px; border-radius: 99px; background: var(--blush); color: var(--accent); font-size: .8rem; font-weight: 600; text-decoration: none; }
.cat-card-link:hover { background: var(--accent); color: #fff; }
.cat-card-add { display: grid; place-content: center; justify-items: center; gap: 6px; min-height: 260px; border: 2px dashed var(--accent-soft); background: transparent; box-shadow: none; color: var(--ink); font: inherit; cursor: pointer; }
.cat-card-add span { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: var(--blush); color: var(--accent); transition: background .2s, color .2s; }
.cat-card-add:hover { border-color: var(--accent); background: #fff; }
.cat-card-add:hover span { background: var(--accent); color: #fff; }
.cat-card-add small { color: var(--muted); }

.cat-summary strong small { color: var(--muted); font: 500 .85rem var(--sans); }
.cat-parent { display: inline-block; margin-bottom: 2px; color: var(--accent); font-size: .72rem; font-weight: 600; }
.cat-card.is-sub .cat-card-img { aspect-ratio: 16 / 9; }
.cat-name-cell { display: grid; }
.cat-name-cell small { color: var(--accent); font-size: .72rem; font-weight: 600; }
.is-sub-row td:first-child { padding-left: 36px; }
.modal-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 99px; background: var(--blush); }
.modal-tabs button { padding: 9px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font: 600 .88rem var(--sans); cursor: pointer; }
.modal-tabs [aria-selected="true"] { background: #fff; color: var(--accent); box-shadow: 0 2px 10px rgb(42 21 32 / .08); }
.modal-pane { display: grid; gap: 16px; }
.modal-pane[hidden] { display: none; }
.cat-modal select, .cat-modal .field > input, .cat-modal .slug-input input { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 .95rem var(--sans); }
.cat-modal textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 .92rem/1.5 var(--sans); resize: vertical; }
.cat-modal :is(input, textarea, select):focus { outline: none; border-color: var(--accent); background: #fff; }
.cat-name-row { grid-template-columns: 90px 1fr; }
.cat-icon-field input { font-size: 1.4rem !important; text-align: center; }
.icon-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; }
.icon-picks button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 1.15rem; cursor: pointer; transition: transform .15s, border-color .15s; }
.icon-picks button:hover { border-color: var(--accent); transform: scale(1.1); }
.slug-input { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.slug-input:focus-within { border-color: var(--accent); background: #fff; }
.slug-input b { padding: 0 2px 0 12px; color: var(--muted); font: 400 .8rem ui-monospace, monospace; white-space: nowrap; }
.cat-modal .slug-input input { border: 0; background: transparent; padding-left: 2px; font-family: ui-monospace, monospace; font-size: .88rem; }
.slug-warn { color: #9a5b00 !important; font-weight: 500 !important; }
.slug-warn[hidden] { display: none !important; }
.status-pick-row { grid-template-columns: 1fr 1fr; }
.status-pick-row legend { grid-column: 1 / -1; }
.field .is-over, .field small .is-over { color: #b0213f; }
small.is-over { color: #b0213f !important; }
.serp { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-family: arial, sans-serif; }
.serp small { color: #4d5156; font-size: .78rem; }
.serp strong { color: #1a0dab; font-size: 1.15rem; font-weight: 400; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp p { display: -webkit-box; margin: 0; color: #4d5156; font-size: .85rem; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.og-field { display: grid; gap: 8px; }
.og-drop { position: relative; display: grid; aspect-ratio: 1200 / 630; overflow: hidden; border: 2px dashed var(--accent-soft); border-radius: 16px; background: var(--blush); cursor: pointer; }
.og-drop:hover, .og-drop:focus-within { border-color: var(--accent); }
.og-img { grid-area: 1 / 1; background: center / cover no-repeat; }
.og-text { grid-area: 1 / 1; display: grid; place-content: center; justify-items: center; gap: 2px; color: var(--accent); text-align: center; }
.og-text small { color: var(--muted); }
.has-og { border-style: solid; border-color: transparent; }
.has-og .og-text { align-self: end; justify-self: end; display: flex; gap: 6px; margin: 10px; padding: 6px 12px; border-radius: 99px; background: rgb(255 255 255 / .92); font-size: .8rem; }
.has-og .og-text svg { width: 16px; height: 16px; }
.has-og .og-text small { display: none; }
.og-remove { display: flex; align-items: center; gap: 8px; color: #b0213f; font-size: .85rem; cursor: pointer; }
.og-remove[hidden] { display: none; }
.cat-icon { margin-right: 6px; }
.cat-emoji { font-size: 2.4rem; }
.cat-card.is-inactive .cat-card-img { filter: grayscale(.7); opacity: .6; }
.cat-card-body .status-toggle { flex-shrink: 0; }
.cat-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 18px 16px; }
.cat-card-foot .cat-card-link { margin-left: auto; }
.seo-meter { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: .75rem; font-weight: 600; }
.seo-meter i { width: 14px; height: 6px; border-radius: 3px; background: #eadde3; }
.seo-meter i.on { background: #2f9e62; }
.seo-meter i:last-of-type { margin-right: 4px; }
.cat-table td small { display: block; }
.cat-feat { margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: var(--blush); color: var(--accent); font-size: .65rem; font-style: normal; font-weight: 600; vertical-align: middle; }
.heading-icon { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: 10px; border-radius: 14px; background: #fff; color: var(--accent); vertical-align: -.2em; box-shadow: 0 6px 16px -8px rgb(194 37 92 / .45); }
.lbl, .h-icon { display: inline-flex; align-items: center; gap: 6px; }
.lbl .icon, .h-icon .icon { color: var(--accent); flex-shrink: 0; }
.gift-box legend { display: inline-flex; align-items: center; gap: 6px; }
.gift-box legend .icon, .gift-opt .icon { color: var(--accent); }
.gift-opt > span { display: inline-flex; align-items: center; gap: 8px; }
.gift-ico .icon { color: var(--accent); }
.badge-popular { display: inline-flex; align-items: center; gap: 4px; }
.badge-popular .icon { fill: currentColor; }
.perks b .icon { color: var(--accent); }
.topbar p .icon { color: var(--accent); vertical-align: -2px; }
.filter-help > span .icon { color: var(--accent); }
.cat-icon { display: inline-grid; place-items: center; margin-right: 6px; color: var(--accent); vertical-align: -3px; }
.cat-noimg .icon { color: #c393a6; }
.icon-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.icon-picks legend { width: 100%; margin-bottom: 8px; padding: 0; font-size: .85rem; font-weight: 600; }
.icon-picks legend small { margin-left: 6px; color: var(--muted); font-weight: 400; }
.icon-picks label { position: relative; cursor: pointer; }
.icon-picks input { position: absolute; opacity: 0; }
.icon-picks label > span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--muted); transition: border-color .15s, color .15s, background .15s; }
.icon-picks .no-icon { font-size: .78rem; font-weight: 500; }
.icon-picks label:hover > span { border-color: var(--accent-soft); color: var(--accent); }
.icon-picks input:checked + span { border-color: var(--accent); background: var(--blush); color: var(--accent); }
.icon-picks input:focus-visible + span { box-shadow: 0 0 0 3px rgb(194 37 92 / .25); }
@media (max-width: 640px) { .status-pick-row { grid-template-columns: 1fr; } }
.cat-thumb-sm { display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 48px; border-radius: 10px; background: var(--img, none) center / cover, var(--blush); color: #c393a6; }
.cat-slug { padding: 2px 8px; border-radius: 6px; background: #f6eef2; color: var(--muted); font-size: .8rem; }
.cat-table td a { color: var(--accent); font-weight: 600; }
.row-actions-list { display: flex; justify-content: flex-end; gap: 6px; }
.row-actions-list form { display: contents; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.icon-btn:hover { border-color: var(--accent-soft); background: var(--blush); color: var(--accent); }
.icon-btn-danger:hover { border-color: #f5c2cd; background: #fdecef; color: #b0213f; }

.cat-modal { width: min(560px, calc(100% - 32px)); }
.cat-modal form { display: grid; gap: 16px; max-height: calc(100dvh - 32px); padding: 24px; overflow-y: auto; }
.cat-modal-head { display: flex; align-items: center; justify-content: space-between; }
.cat-modal-head h2 { margin: 0; font-size: 1.4rem; }
.cat-drop { position: relative; display: grid; aspect-ratio: 16 / 9; overflow: hidden; border: 2px dashed var(--accent-soft); border-radius: 18px; background: var(--blush); cursor: pointer; transition: border-color .2s; }
.cat-drop:hover, .cat-drop:focus-within { border-color: var(--accent); }
.cat-drop-img { grid-area: 1 / 1; background: center / cover no-repeat; }
.cat-drop-text { grid-area: 1 / 1; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--accent); text-align: center; }
.cat-drop-text small { color: var(--muted); }
.has-img .cat-drop { border-style: solid; border-color: transparent; }
.has-img .cat-drop-text { align-self: end; justify-self: end; display: flex; gap: 6px; margin: 10px; padding: 6px 12px; border-radius: 99px; background: rgb(255 255 255 / .92); font-size: .8rem; }
.has-img .cat-drop-text svg { width: 16px; height: 16px; }
.has-img .cat-drop-text small { display: none; }
.cat-modal-note { margin: -8px 0 0; }
.cat-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.cat-modal-foot .link-danger { margin-right: auto; }
@media (max-width: 800px) { .cat-summary { grid-template-columns: repeat(2, 1fr); } .admin-search { width: 100%; } .admin-search input { flex: 1; width: auto; } }

/* Admin: orders — an order book, not a dashboard */
.ob-head { margin-bottom: 22px; }
.ob-head h1 { margin: 0; font-size: 1.9rem; letter-spacing: -.01em; }
.ob-head p { margin: 4px 0 0; color: var(--muted); }
.ob-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 0; border-bottom: 1px solid var(--line); }
.ob-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.ob-tabs a { padding: 10px 0 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: .92rem; text-decoration: none; }
.ob-tabs a span { margin-left: 3px; font-size: .8rem; font-variant-numeric: tabular-nums; opacity: .75; }
.ob-tabs a:hover { color: var(--ink); }
.ob-tabs a[aria-current] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.ob-filter { display: flex; gap: 8px; padding-bottom: 8px; }
.ob-filter input, .ob-filter select { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; font-size: .88rem; }
.ob-filter input { width: 250px; }
.ob-filter input:focus, .ob-filter select:focus { outline: 2px solid var(--ink); outline-offset: -1px; }

.ob-table-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ob-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ob-table thead th { padding: 12px 14px 10px; background: #fdf9f8; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .78rem; font-weight: 500; text-align: left; white-space: nowrap; }
.ob-table td { padding: 12px 14px; border-top: 1px solid #f1e8e5; vertical-align: middle; }
.ob-table th:first-child, .ob-table td:first-child { padding-left: 18px; }
.ob-table .ob-r { text-align: right; font-variant-numeric: tabular-nums; }
.ob-table tbody tr { cursor: pointer; transition: background .15s; }
.ob-table tbody tr:hover { background: #fbf6f4; }
.ob-table tr.is-new td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.ob-table small { display: block; margin-top: 1px; color: var(--muted); font-size: .78rem; }
.ob-no { color: var(--ink); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .86rem; text-decoration: none; }
a.ob-no:hover { text-decoration: underline; }
.ob-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ob-who { max-width: 260px; }
.ob-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-thumbs { display: inline-flex; gap: 3px; vertical-align: middle; }
.ob-thumbs img { width: 30px; height: 30px; border-radius: 4px; object-fit: cover; background: var(--blush); }
.ob-count { margin-left: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ob-count::before { content: '×'; }
.ob-money { font-weight: 600; white-space: nowrap; }
.ob-pay-cell { color: var(--muted); white-space: nowrap; }
.ob-pay-cell.is-paid { color: #3f6b4a; }
.ob-go { text-align: right; white-space: nowrap; }

/* Status: a small square and a word, in quiet earthy tones */
.ob-status { font-family: var(--sans); display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px 3px 8px; border-radius: 5px; background: color-mix(in srgb, currentColor 10%, #fff); font-size: .82rem; font-weight: 500; white-space: nowrap; }
.ob-status::before { content: ''; width: 7px; height: 7px; border-radius: 1px; background: currentColor; }
.ob-st-pending { color: var(--accent); }
.ob-st-processing { color: #8a6d3b; }
.ob-st-shipped { color: #4a5d7a; }
.ob-st-delivered { color: #5b7f63; }
.ob-st-cancelled { color: #8d8487; }

.ob-save { border: 0; border-radius: 6px; background: var(--ink); color: #fff; font: 500 .82rem var(--sans); cursor: pointer; transition: background .15s, transform .1s; }
.ob-save:hover { background: #4a2a38; }
.ob-save:active { transform: translateY(1px); }
.ob-save:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob-foot { margin: 14px 4px 0; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.ob-empty { padding: 48px 4px; color: var(--muted); }

/* One order */
.ob-back { display: inline-block; margin-bottom: 14px; color: var(--muted); font-size: .88rem; text-decoration: none; }
.ob-back:hover { color: var(--ink); }
.ob-detail-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.ob-detail-head h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin: 0; font-size: 1.8rem; }
.ob-detail-head h1 .ob-no { font-size: 1.6rem; letter-spacing: -.02em; }
.ob-detail-head h1 .ob-status { font-family: var(--sans); font-size: .95rem; }
.ob-detail-head p { margin: 6px 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.ob-text-btn { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ob-text-btn:hover { color: var(--accent); }

.ob-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.ob-side h3 { margin: 0; font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--muted); }

.ob-side { display: grid; gap: 14px; }
.ob-side section { padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ob-side h3 { margin-bottom: 10px; }
.ob-side p { margin: 0 0 4px; font-size: .9rem; }
.ob-save { justify-self: start; height: 34px; padding: 0 18px; }
.ob-hint { color: var(--muted); font-size: .8rem !important; }
.ob-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px !important; }
.ob-links a, .ob-side section a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.ob-links a:hover, .ob-side section a:hover { text-decoration-color: currentColor; }

@media (max-width: 1000px) {
  .ob-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .ob-filter, .ob-filter input { width: 100%; }
  .ob-filter input { flex: 1; }
  .ob-table thead { display: none; }
  .ob-table, .ob-table tbody { display: block; }
  .ob-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; border-top: 1px solid #f1e8e5; }
  .ob-table td { padding: 0 !important; border: 0; }
  .ob-table td:nth-child(4), .ob-table td:nth-child(6) { display: none; }
  .ob-table tr.is-new td:first-child { box-shadow: none; }
}
/* Packing slip: print just the order */
@media print {
  body.admin { display: block; background: #fff; }
  .admin-side, .admin-topbar, .side-scrim, .ob-back, .no-print, .notice-ok, .notice-error { display: none !important; }
  .admin-main { padding: 0; }
  .ob-grid { grid-template-columns: 1fr; }
  
}

/* Admin: homepage slider + site content */
.sl-list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.sl-item + .sl-item { border-top: 1px solid var(--line); }
.sl-row { display: grid; grid-template-columns: 22px 120px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 16px; }
.sl-num { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; text-align: center; }
.sl-thumb { width: 120px; height: 46px; border-radius: 6px; object-fit: cover; background: var(--blush); }
.sl-item.is-off .sl-thumb, .sl-item.is-off .sl-text { opacity: .5; }
.sl-text { min-width: 0; }
.sl-text strong { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sl-text small { display: block; overflow: hidden; color: var(--muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.sl-tools { display: flex; gap: 4px; }
.sl-gap { width: 34px; }
.sl-edit { padding: 0 16px 0 54px; }
.sl-edit summary { display: none; }
.sl-edit-btn { height: 34px; margin-right: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: 500 .84rem var(--sans); cursor: pointer; }
.sl-edit-btn:hover, .sl-edit-btn[aria-expanded=true] { border-color: var(--ink); }
.sl-edit summary, .sl-new summary { width: max-content; margin: -4px 0 12px; color: var(--ink); font-size: .86rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
.sl-edit summary::-webkit-details-marker, .sl-new summary::-webkit-details-marker { display: none; }
.sl-edit[open] summary { color: var(--muted); }
.sl-edit form { padding: 4px 0 20px; }
.sl-new form { padding-bottom: 18px; }
.sl-edit .ob-save, .sl-new .ob-save { justify-self: start; }
.sl-new { margin-top: 16px; padding: 14px 18px 0; border: 1px dashed var(--line); border-radius: 10px; }
.sl-new summary { margin: 0 0 14px; color: var(--accent); text-decoration: none; }
.sl-edit input[type="file"], .sl-new input[type="file"] { padding: 10px; height: auto; }
.content-tabs { grid-template-columns: repeat(4, 1fr); }
.content-form textarea { width: 100%; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 .95rem/1.55 var(--sans); resize: vertical; }
.content-form textarea:focus { outline: none; border-color: var(--accent); background: #fff; }
.content-form ::placeholder { color: #b3a2aa; }
.content-image-row { display: flex; align-items: center; gap: 16px; }
.content-thumb { width: 96px; height: 120px; border-radius: 14px; object-fit: cover; background: var(--blush); }
.content-image-row input[type="file"] { height: auto; padding: 10px; }
.content-save { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; margin-top: 20px; }
.content-save .btn { box-shadow: 0 14px 30px -12px rgb(194 37 92 / .6); }
@media (max-width: 700px) { .sl-row { grid-template-columns: 84px minmax(0, 1fr); gap: 8px 12px; } .sl-num { display: none; } .sl-thumb { width: 84px; } .sl-row > form, .sl-tools { grid-column: 2; } .sl-edit { padding-left: 16px; } }
@media (max-width: 1000px) { .content-tabs { grid-template-columns: repeat(2, 1fr); } }

.zone-list { display: grid; gap: 4px; }
.zone-row { display: grid; grid-template-columns: 1fr 160px auto auto; gap: 14px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--line); }
.zone-new { border-bottom: 0; }
.zone-row .link-danger { height: 46px; }

.msg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; }
.msg header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.msg header div { display: flex; align-items: center; gap: 10px; }
.msg time { color: var(--muted); font-size: .82rem; }
.msg p { margin: 12px 0; }
.msg footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .88rem; }
.msg footer a { color: var(--accent); font-weight: 600; text-decoration: none; }
.msg footer form { margin-left: auto; }

.admin-guest { display: block; background: linear-gradient(160deg, var(--blush), #fff 60%); }
.admin-login { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.login-card { width: 100%; max-width: 420px; padding: 36px; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -30px rgb(194 37 92 / .35); }
.login-card .brand { display: block; margin-bottom: 24px; }
.login-card h1 { margin: 0 0 6px; font-size: 1.8rem; }

@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-cols { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  body.admin:not(.admin-guest), body.admin.side-min { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .admin-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / .9); backdrop-filter: blur(12px); }
  .admin-side { position: fixed; inset: 0 auto 0 0; width: min(290px, 86vw); box-shadow: 0 0 60px rgb(42 21 32 / .25); transform: translateX(-105%); transition: transform .25s; }
  .side-open .admin-side { transform: none; }
  .side-scrim { position: fixed; inset: 0; z-index: 25; display: block; background: rgb(42 21 32 / .35); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .side-open .side-scrim { opacity: 1; pointer-events: auto; }
  .side-collapse { display: none; }
  /* The collapsed (icons-only) mode is a desktop thing; on phones the drawer always shows labels. */
  .side-min .side-text, .side-min .side-count { display: revert; }
  .side-min .side-avatar { display: grid; }
  .side-min .side-menu { margin-left: auto; }
  .side-min .side-menu summary { width: 30px; height: 30px; }
  .side-min .side-pop { left: auto; right: 0; bottom: calc(100% + 8px); }
  .side-min .admin-side { padding-inline: 16px; overflow: hidden auto; }
  .side-min .side-head { flex-direction: row; padding-left: 4px; }
  .side-min .side-label { height: auto; margin: 18px 0 6px; padding: 0 12px; background: none; }
  .side-min .side-label:first-child { display: block; margin-top: 0; }
  .side-min .side-nav a, .side-min .side-shop { justify-content: flex-start; padding: 0 12px; }
  .side-min .side-user { justify-content: flex-start; padding-inline: 4px; }
  .side-min [data-tip]::after, .side-min .side-nav a:has(.side-count)::before { display: none; }
  .admin-main { padding: 24px 16px 48px; }
  .zone-row { grid-template-columns: 1fr 1fr; }
}

/* Admin dashboard chart + extras */
.chart-panel .panel-head { margin-bottom: 8px; }
.bars { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; height: 220px; margin-left: 64px; padding-bottom: 24px; }
.bars-grid { position: absolute; inset: 0 0 24px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.bars-grid span { position: relative; border-top: 1px solid var(--line); }
.bars-grid span:last-child { border-top-color: #e3cfd8; }
.bars-grid em { position: absolute; right: calc(100% + 10px); top: -.7em; color: var(--muted); font: 400 .72rem var(--sans); white-space: nowrap; }
.bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; outline: none; cursor: default; }
/* Hit target is the whole column, bigger than the thin fill. */
.bar-fill { display: block; height: var(--h); min-height: 2px; margin: 0 auto; width: min(100%, 26px); border-radius: 4px 4px 0 0; background: var(--accent-soft); transition: background .15s; }
.bar.is-today .bar-fill { background: var(--accent); }
.bar:hover .bar-fill, .bar:focus-visible .bar-fill { background: var(--accent-dark); }
.bar small { position: absolute; top: 100%; left: 50%; margin-top: 6px; color: var(--muted); font-size: .72rem; transform: translateX(-50%); white-space: nowrap; }
.bar-tip { position: absolute; bottom: calc(var(--h) + 10px); left: 50%; z-index: 2; display: none; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #d9c7cf; font-size: .75rem; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 10px 24px -10px rgb(42 21 32 / .5); }
.bar-tip strong { display: block; color: #fff; font-size: .9rem; }
.bar:hover .bar-tip, .bar:focus-visible .bar-tip { display: block; }
.bar:first-child .bar-tip, .bar:nth-child(2) .bar-tip { left: 0; transform: none; }
.bar:last-child .bar-tip, .bar:nth-last-child(2) .bar-tip { left: auto; right: 0; transform: none; }
.best-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.best-list li { display: flex; align-items: center; gap: 12px; }
.best-list .mini-thumb { width: 44px; height: 44px; }
.best-list a { color: var(--ink); font-weight: 500; text-decoration: none; }
.best-list a:hover { color: var(--accent); }
.best-list small { display: block; color: var(--muted); font-size: .8rem; }
.status-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 24px 0; }
.status-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: 0 1px 0 var(--line); transition: transform .2s; }
.status-chip:hover { transform: translateY(-2px); }
.status-chip strong { font: 600 1.3rem var(--serif); }
.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cust-head { display: flex; align-items: center; gap: 16px; }
.cust-head .acct-avatar { width: 56px; height: 56px; font-size: 1.5rem; box-shadow: none; }
@media (max-width: 1100px) { .status-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .bars { gap: 3px; height: 180px; margin-left: 52px; }
  .status-strip, .stat-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stat strong { font-size: 1.5rem; }
}

/* Customer account + order tracking */
.acct-hero { padding: 40px 0 0; background: linear-gradient(180deg, var(--blush), var(--bg)); }
.acct-hello { display: flex; align-items: center; gap: 20px; }
.acct-hello h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.acct-hello .eyebrow { margin-bottom: 4px; }
.acct-hello .muted { margin: 2px 0 0; font-size: .9rem; }
.acct-avatar { display: grid; place-items: center; flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #e64980); color: #fff; font: 600 1.9rem var(--serif); box-shadow: 0 0 0 6px #fff, 0 14px 30px -12px rgb(194 37 92 / .6); }
.acct-tabs { display: flex; gap: 4px; margin-top: 28px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.acct-tabs a { flex-shrink: 0; padding: 12px 18px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; text-decoration: none; transition: color .2s, border-color .2s; }
.acct-tabs a:hover { color: var(--ink); }
.acct-tabs a[aria-current] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.acct-tabs .acct-logout { margin-left: auto; }
.acct-body { display: grid; gap: 24px; padding-block: 32px 72px; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.acct-main, .acct-side { display: grid; gap: 24px; min-width: 0; }
.acct-back { color: var(--muted); font-size: .9rem; text-decoration: none; }
.acct-back:hover { color: var(--accent); }
.acct-filter { margin-bottom: -8px; }

.acct-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.acct-stat { display: grid; gap: 2px; padding: 20px 22px; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgb(42 21 32 / .3); }
.acct-stat > span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 12px; background: var(--blush); color: var(--accent); }
.acct-stat strong { font: 600 1.6rem/1.2 var(--serif); }
.acct-stat small { color: var(--muted); font-size: .85rem; }

.order-cards { display: grid; gap: 10px; }
.order-card { display: grid; grid-template-columns: auto 1fr auto auto 18px; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.order-card:hover { border-color: var(--accent-soft); box-shadow: 0 14px 30px -20px rgb(194 37 92 / .4); transform: translateY(-1px); }
.order-card-main small { display: block; color: var(--muted); font-size: .82rem; }
.order-card-total { font-weight: 600; }
.order-card .chev { color: var(--muted); }
.order-thumbs { display: flex; }
.order-thumbs img, .order-thumb-empty { width: 48px; height: 48px; border: 2px solid #fff; border-radius: 12px; object-fit: cover; }
.order-thumbs img + img { margin-left: -18px; }
.order-thumb-empty { display: grid; place-items: center; background: var(--blush); color: var(--accent); }
.acct-empty { padding: 24px 0; text-align: center; }
.acct-empty .success-icon { width: 72px; height: 72px; animation: none; }
.acct-empty h3 { margin: 0 0 6px; font-size: 1.4rem; }
.acct-empty p { margin: 0 auto 20px; max-width: 34em; }
.acct-empty a:not(.btn) { color: var(--accent); }

.acct-help { padding: 28px; border-radius: 22px; background: linear-gradient(145deg, var(--ink), #4a2436); color: #d9c7cf; }
.acct-help h2 { margin: 0 0 8px; color: #fff; font-size: 1.35rem; }
.acct-help p { margin: 0 0 18px; font-size: .92rem; }
.btn-light { border-color: #fff; background: #fff; color: var(--accent); }
.btn-light:hover { background: var(--blush); }
.acct-help-link { display: block; margin-top: 12px; color: #fff; font-size: .88rem; font-weight: 500; text-decoration: none; }
.acct-help-link:hover { text-decoration: underline; }
.acct-side .deliver-to a, .order-lines a { color: var(--ink); }

.track-panel .panel-head h2 { margin-top: 2px; font-size: 1.6rem; }
.track-panel .eyebrow { margin-bottom: 0; }
.tracker { --progress: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 12px 0 8px; padding: 0; list-style: none; text-align: center; }
/* Track line runs between the first and last dot centres; the pink fill grows with --progress. */
.tracker::before, .tracker::after { content: ''; position: absolute; top: 25px; left: 12.5%; height: 4px; border-radius: 4px; }
.tracker::before { right: 12.5%; background: var(--line); }
.tracker::after { width: calc(75% * var(--progress)); background: linear-gradient(90deg, var(--accent), #e64980); }
.tracker li { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 0 6px; }
.tracker-dot { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--line); color: #bba9b1; }
.tracker .is-done .tracker-dot { background: var(--accent); box-shadow: none; color: #fff; }
.tracker .is-current .tracker-dot { background: linear-gradient(135deg, var(--accent), #e64980); box-shadow: 0 0 0 6px var(--blush); color: #fff; animation: pulse 2s infinite; }
.tracker strong { font-size: .95rem; }
.tracker li:not(.is-done, .is-current) strong { color: var(--muted); font-weight: 500; }
.tracker small { color: var(--muted); font-size: .8rem; line-height: 1.4; }
@keyframes pulse { 50% { box-shadow: 0 0 0 11px rgb(194 37 92 / .08); } }
@media (prefers-reduced-motion: reduce) { .tracker .is-current .tracker-dot { animation: none; } }
.track-cancelled { display: grid; gap: 2px; padding: 16px 18px; border-radius: 14px; background: #fdecef; color: #b0213f; font-size: .92rem; }

.track-hero { padding: 36px 0 56px; background: radial-gradient(ellipse at 80% 0%, var(--accent-soft), transparent 60%), linear-gradient(180deg, var(--blush), var(--bg)); }
.track-hero h1 { margin: 6px 0 6px; font-size: clamp(2.2rem, 5vw, 3.2rem); }
.track-hero > .wrap > p { margin: 0; color: var(--muted); }
.track-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; max-width: 760px; margin-top: 28px; padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -30px rgb(194 37 92 / .35); }
.track-form .btn { height: 48px; }
.track-hero .notice { max-width: 760px; margin-top: 16px; }
.track-hero > .wrap > .track-login { margin-top: 16px; font-size: .9rem; }
.track-login a { color: var(--accent); font-weight: 600; }
.track-result { margin-top: -24px; margin-bottom: 72px; }
.track-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: .92rem; }
.track-meta p { margin: 0; }
.track-meta span { display: block; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.track-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-block: 48px 72px; }
.track-how div { padding: 24px; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.track-how span { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 50%; background: var(--blush); color: var(--accent); font: 600 1rem var(--serif); }
.track-how strong { display: block; margin-bottom: 4px; }
.track-how p { margin: 0; color: var(--muted); font-size: .9rem; }

@media (max-width: 960px) {
  .acct-grid { grid-template-columns: 1fr; }
  .acct-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .acct-avatar { width: 56px; height: 56px; font-size: 1.5rem; }
  .order-card { grid-template-columns: auto 1fr auto; gap: 4px 12px; }
  .order-card .order-thumbs { grid-row: span 2; }
  .order-card .pill { grid-column: 2; justify-self: start; }
  .order-card-total { grid-row: 1; grid-column: 3; }
  .order-card .chev { display: none; }
  .tracker::before, .tracker::after { top: 20px; }
  .tracker-dot { width: 42px; height: 42px; }
  .tracker-dot svg { width: 17px; height: 17px; }
  .tracker strong { font-size: .8rem; }
  .tracker small { display: none; }
  .track-form, .track-meta, .track-how { grid-template-columns: 1fr; }
}

/* Account: "Forgot your current password?" and friends, as quiet text links */
.pw-alt { margin: 4px 0 0; color: var(--muted); font-size: .86rem; text-align: center; }
.pw-alt button { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 500; cursor: pointer; }
.pw-alt button:hover { text-decoration: underline; }

/* Admin: shared bits still used by the slider page */
.cu-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cu-empty { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }

/* Admin: orders (same cards, tiles and pills as Products and the dashboard) */
.order-tabs { grid-template-columns: repeat(6, 1fr); }
.prod-tab-pending { --dot: #e8890c; } .prod-tab-processing { --dot: #2754b8; } .prod-tab-shipped { --dot: #6b35b8; }
.prod-tab-delivered { --dot: #2f9e62; } .prod-tab-cancelled { --dot: #d6405f; }
.or-week { display: grid; justify-items: end; gap: 0; padding: 12px 20px; border-radius: 16px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.or-week span { color: var(--muted); font-size: .78rem; }
.or-week strong { font: 600 1.45rem/1.15 var(--serif); }
.or-week em { font-size: .76rem; font-style: normal; font-weight: 600; }
.or-week .is-up { color: #1f7a45; } .or-week .is-down { color: #b0213f; }
.or-list { padding: 10px 22px; }
.or-table tbody tr { cursor: pointer; transition: background .15s; }
.or-table tbody tr:hover td { background: #fdf6f8; }
.or-table tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.or-table td:first-child { padding-left: 14px; }
.or-table td:first-child strong { font-size: .95rem; }
.or-who { display: flex; align-items: center; gap: 12px; min-width: 190px; }
.or-who strong { display: block; }
.or-who small { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-avatar { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--blush); color: var(--accent); font: 600 1rem var(--serif); }
.or-thumbs { display: flex; margin-bottom: 2px; }
.or-thumbs img { width: 34px; height: 34px; border: 2px solid #fff; border-radius: 10px; object-fit: cover; background: var(--blush); }
.or-thumbs img + img { margin-left: -10px; }
.or-act { text-align: right; }
.or-next { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--accent); color: #fff; font: 600 .82rem var(--sans); white-space: nowrap; cursor: pointer; transition: background .2s, transform .15s; }
.or-next:hover { background: #a01d4b; transform: translateX(2px); }

.or-back { display: inline-block; margin-bottom: 12px; color: var(--muted); font-size: .9rem; text-decoration: none; }
.or-back:hover { color: var(--accent); }
.or-title { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.or-title .pill { font-size: .85rem; }
.or-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.or-head-actions .btn { padding: 11px 22px; font-size: .92rem; }
.or-track { margin-bottom: 24px; padding: 22px 28px 14px; }
.or-items { display: grid; margin: 0; padding: 0; list-style: none; }
.or-items li { display: grid; grid-template-columns: 76px 1fr auto; align-items: start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.or-items li:first-child { padding-top: 2px; }
.or-img { position: relative; width: 76px; height: 76px; border-radius: 16px; background: var(--blush); }
.or-img img { width: 100%; height: 100%; border-radius: 16px; object-fit: cover; }
.or-img b { position: absolute; right: -6px; bottom: -6px; padding: 2px 8px; border-radius: 99px; background: var(--ink); color: #fff; font-size: .76rem; }
.or-items strong { font-size: 1rem; }
.or-items small { display: block; color: var(--muted); font-size: .85rem; }
.or-amount { white-space: nowrap; }
.or-gift { display: grid; gap: 8px; margin-top: 10px; padding: 12px 14px; border: 1.5px dashed var(--accent-soft); border-radius: 14px; background: #fff7fa; }
.or-gift-tags { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 500; }
.or-gift-tags .icon { color: var(--accent); }
.or-card { margin: 0; font-family: var(--serif); font-size: 1.05rem; font-style: italic; }
.or-sum { width: min(300px, 100%); margin: 18px 0 0 auto; }
.or-sum div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; font-size: .92rem; }
.or-sum dt { color: var(--muted); }
.or-sum dd { margin: 0; white-space: nowrap; }
.or-sum .or-total { margin-top: 8px; padding-top: 12px; border-top: 1.5px dashed var(--line); font-size: 1.15rem; font-weight: 700; }
.or-sum .or-total dt { color: var(--ink); }
.or-sum .or-total dd { color: var(--accent); }
.print-brand { display: none; }
.or-side { display: grid; gap: 20px; }
.or-side .panel { padding: 22px 24px; }
.or-side .panel-head { margin-bottom: 14px; }
.or-side .panel-head h2 { font-size: 1.15rem; }
.or-update { display: grid; gap: 16px; }
.or-choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.or-choices legend { width: 100%; margin-bottom: 8px; font-size: .85rem; font-weight: 600; }
.or-choice input { position: absolute; opacity: 0; }
.or-choice span { display: inline-block; padding: 7px 14px; border: 1.5px solid var(--line); border-radius: 99px; background: #fff; font-size: .84rem; font-weight: 500; cursor: pointer; transition: all .15s; }
.or-choice span:hover { border-color: var(--accent-soft); }
.or-choice input:focus-visible + span { box-shadow: 0 0 0 3px rgb(194 37 92 / .25); }
.or-choice input:checked + span { border-color: transparent; background: var(--seg); color: #fff; }
.or-choice-pending { --seg: #d9822b; } .or-choice-processing { --seg: #2754b8; } .or-choice-shipped { --seg: #6b35b8; }
.or-choice-delivered { --seg: #1f7a45; } .or-choice-cancelled { --seg: #b0213f; }
.or-choices:disabled { opacity: .6; }
.or-person { display: flex; gap: 14px; }
.or-ico { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--blush); color: var(--accent); }
.or-person address, .or-person > div { display: grid; gap: 2px; font-size: .92rem; font-style: normal; line-height: 1.5; }
.or-person a { color: var(--accent); font-size: .88rem; text-decoration: none; word-break: break-all; }
.or-note { display: flex; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff6db; color: #6b4d00; font-size: .88rem; }
.or-note .icon { flex-shrink: 0; margin-top: 2px; }
.or-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.or-contact .btn { padding: 9px 12px; font-size: .86rem; text-align: center; }
.or-phone { margin-top: 8px; text-align: center; }
@media (max-width: 1200px) { .order-tabs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .or-week { justify-items: start; width: 100%; }
  .or-list { padding: 4px 14px; }
  .or-table thead { display: none; }
  .or-table, .or-table tbody { display: block; }
  .or-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .or-table tr:last-child { border-bottom: 0; }
  .or-table td { padding: 0 !important; border: 0; }
  .or-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .or-table td:nth-child(3), .or-table td:nth-child(5) { display: none; }
  .or-table td:nth-child(4) { text-align: right; }
  .or-table tr.is-new td:first-child { box-shadow: none; }
  .or-items li { grid-template-columns: 60px 1fr; }
  .or-img, .or-img img { width: 60px; height: 60px; }
  .or-amount { grid-column: 2; }
}
@media print {
  .or-back, .admin-head { display: none !important; }
  .admin-cols { grid-template-columns: 1fr; }
  .or-slip { box-shadow: none; padding: 0; }
  .print-brand { display: inline; color: #555; font-size: .85rem; }
}

/* Admin: customer profile (same cards and tiles as Products / Orders) */
.cust-tabs { grid-template-columns: repeat(5, 1fr); }
.prod-tab-hidden { --dot: #b8a9b0; }
.cp-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; margin-bottom: 20px; background: linear-gradient(120deg, #fff 55%, #fdeef3); }
.cp-avatar { display: grid; place-items: center; flex-shrink: 0; width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #e8749c); color: #fff; font: 600 2.2rem var(--serif); box-shadow: 0 12px 28px -14px rgb(194 37 92 / .7); }
.cp-who { flex: 1; min-width: 220px; }
.cp-who h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 4px; font-size: clamp(1.5rem, 3vw, 2rem); }
.cp-who h1 .pill { font-size: .8rem; }
.cp-who p { margin: 0; }
.cp-contact { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-contact .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: .88rem; }
.cp-note-banner { display: flex; align-items: flex-start; gap: 8px; }
.cp-note-banner .icon { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.cp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.cp-stats .prod-tab { cursor: default; }
.cp-stats .prod-tab:hover { transform: none; }
.cp-main { display: grid; gap: 24px; min-width: 0; }
.cp-guest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.cp-guest a { color: var(--accent); }
.cp-favs { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; background: var(--blush); font-size: .88rem; font-weight: 500; }
.cp-chip .icon { color: var(--accent); }
.cp-chip b { color: var(--accent); font-weight: 600; }
.cp-addrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cp-addr { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: 16px; }
.cp-addr address { flex: 1; display: grid; gap: 1px; font-size: .9rem; font-style: normal; line-height: 1.45; }
.cp-addr small { color: var(--muted); }
.cp-wish { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.cp-wish a { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.cp-wish img, .cp-noimg { width: 100%; aspect-ratio: 1; border-radius: 16px; object-fit: cover; background: var(--blush); transition: transform .2s; }
.cp-wish a:hover img { transform: translateY(-3px); }
.cp-wish strong { font-size: .88rem; line-height: 1.3; }
.cp-wish small { color: var(--muted); font-size: .78rem; }
.cp-form { display: grid; gap: 14px; }
.cp-form .save-addr { font-size: .9rem; }
.cp-text { margin: 0; color: var(--muted); font-size: .88rem; }
.cp-delete { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.cp-delete summary { color: #b0213f; font-size: .88rem; font-weight: 600; cursor: pointer; }
.cp-delete .cp-form { margin-top: 12px; }
.cp-danger { border-color: #b0213f; background: #b0213f; }
.cp-danger:hover { background: #8d1a33; }
.cp-subs { margin-top: 24px; }
.cp-subs .copy-box { width: 100%; }
@media (max-width: 1100px) { .cust-tabs { grid-template-columns: repeat(3, 1fr); } .cp-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .cp-hero { flex-direction: column; align-items: flex-start; }
  .cp-avatar { width: 64px; height: 64px; font-size: 1.7rem; }
  .cu-table td:nth-child(2), .cu-table td:nth-child(6) { display: none; }
  .cu-table td:nth-child(1) { grid-column: 1 / -1; }
  .cp-orders td:nth-child(2) { display: none; }
  .cp-orders td:nth-child(4) { display: block; text-align: right; }
}

/* Admin: emails (who gets order and message notifications) */
.em-stats { grid-template-columns: repeat(3, 1fr); }
.em-mode { font-size: 1.2rem !important; }
.em-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.em-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--line); border-radius: 18px; transition: border-color .2s; }
.em-list li:hover { border-color: var(--accent-soft); }
.em-main { flex: 1; display: grid; gap: 8px; min-width: 200px; }
.em-main strong { font-size: 1rem; word-break: break-all; }
.em-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.em-kinds .or-choice span { padding: 5px 12px; font-size: .8rem; }
.em-actions { display: flex; align-items: center; gap: 8px; }
.em-actions .btn { padding: 8px 16px; font-size: .84rem; }
.em-tips { display: grid; gap: 10px; margin: 0; padding-left: 18px; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.em-tips strong { color: var(--ink); }
@media (max-width: 760px) { .em-stats { grid-template-columns: 1fr; } .em-actions { width: 100%; justify-content: flex-end; } }

/* Thank-you page: PayID payment details */
.payid-box { margin: 18px 0 6px; padding: 20px 22px; border: 2px dashed var(--accent-soft); border-radius: 20px; background: #fff7fa; text-align: left; }
.payid-box h3 { margin: 0 0 12px; font-size: 1.2rem; }
.payid-box dl { display: grid; gap: 8px; margin: 0; }
.payid-box dl div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.payid-box dt { color: var(--muted); font-size: .88rem; }
.payid-box dd { display: flex; align-items: center; gap: 8px; margin: 0; word-break: break-all; }
.payid-box p { margin: 12px 0 0; color: var(--muted); font-size: .88rem; }
.copy-btn { padding: 3px 10px; border: 1.5px solid var(--accent-soft); border-radius: 99px; background: #fff; color: var(--accent); font: 600 .75rem var(--sans); cursor: pointer; }
.copy-btn:hover { border-color: var(--accent); }