/* Lakri Lab — minimal black/white/gray */
/* Yellowtail: bold, connected brush-script — free Google Font stand-in for
   "Sweet Cucumber Mocktail" (a paid Misti's Fonts face not available on a
   CDN). Used for the features strip below. */
@import url('https://fonts.googleapis.com/css2?family=Yellowtail&display=swap');
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #111;
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Felix Titling isn't a Google Font either — same local-system-font caveat
   as Copperplate Gothic Light above; falls back to Arial Black on devices
   that don't have it. (It only ships in one weight — there's no separate
   "Bold" cut — so the family name alone covers it.) */
h1, h2 { font-family: 'Felix Titling', 'Arial Black', Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: 14px; }
/* Horizontal-only padding via longhand (not the `padding` shorthand) is
   deliberate: several page-specific classes (.featured-product, .page-head,
   .cart-layout, .shop-layout, .contact-layout, .about-hero,
   .top-reviews-section) are combined on the SAME element as .container to
   add vertical rhythm. Since they tie in specificity, whichever used the
   `padding` shorthand last in the file used to win outright and silently
   zero out the other's sides. Longhand-only here means .container can never
   clobber (or be clobbered by) another class's vertical padding. */
.container { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Announcement bar — continuously scrolling marquee, replaces the old
   phone/email/Track/Login topbar. Two identical .announcement-set halves
   inside .announcement-track (rendered in js/announcement.js) so the
   translateX(-50%) loop always lands exactly on the seam, regardless of
   how many messages are configured — same technique as the homepage
   reviews marquee. */
.announcement-bar {
  background: #000; color: #fff; font-size: 13px;
  overflow: hidden; white-space: nowrap;
  padding: 8px 0;
}
.announcement-track { display: flex; width: max-content; animation: announcement-marquee 24s linear infinite; }
.announcement-bar:hover .announcement-track { animation-play-state: paused; }
.announcement-set { display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.announcement-item { font-weight: 500; color: #f5f0e6; }
.announcement-dot { opacity: .45; font-size: 10px; }
@keyframes announcement-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Header */
.header {
  border-bottom: 1px solid #eee;
  background: #fff;
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 18px 24px;
  max-width: 1280px; margin: 0 auto; gap: 24px;
}
.nav { display: flex; gap: 28px; }
.nav a { font-size: 14px; font-weight: 500; color: #333; }
.nav a:hover, .nav a.active { color: #000; }
.logo { display: inline-flex; align-items: center; justify-content: center; }
.brand-logo { height: 44px; width: auto; object-fit: contain; display: block; }
/* brightness(0) invert(1) forces the (black-on-transparent) logo to pure
   white so it reads on dark backgrounds like the admin sidebar. */
.brand-logo--invert { filter: brightness(0) invert(1); }
.header-actions { display: flex; gap: 12px; justify-content: flex-end; align-items: center; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: #f4f4f4; display: grid; place-items: center;
  position: relative;
  transition: background .2s;
}
.icon-btn:hover { background: #e8e8e8; }
.icon-btn svg { width: 18px; height: 18px; }
.cart-badge {
  position: absolute; top: -4px; right: -4px;
  background: #000; color: #fff; font-size: 10px; font-weight: 600;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: grid; place-items: center; padding: 0 5px;
}
.mobile-toggle { display: none; }

/* Hero */
.hero {
  position: relative; height: 560px; overflow: hidden;
  background: #f0e9d8;
}
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero-overlay {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: 0 64px;
  background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
}
.hero-content { max-width: 520px; }
.hero h1 { font-size: 56px; font-weight: 700; line-height: 1.05; margin: 0 0 20px; letter-spacing: -1px; }
.hero p { font-size: 17px; color: #333; margin: 0 0 32px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px; border-radius: 999px; font-weight: 600; font-size: 14px;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .2s ease, box-shadow .3s ease;
  border: 1px solid transparent; cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: #000; color: #fff; }
.btn-primary:hover { background: #222; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.btn-white {
  background: rgba(255,255,255,.25);
  backdrop-filter: blur(14px) saturate(160%);
  color: #111;
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.btn-white:hover {
  background: #fff;
  color: #000;
  border-color: #000;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.btn-block { width: 100%; }
.btn-lg { padding: 16px 36px; font-size: 15px; }

@keyframes lakri-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-content > * { animation: lakri-fade-up .7s ease-out both; }
.hero-content > *:nth-child(1) { animation-delay: .05s; }
.hero-content > *:nth-child(2) { animation-delay: .2s; }
.hero-content > *:nth-child(3) { animation-delay: .35s; }

/* Sections */
section { padding: 56px 0; }
section + section { padding-top: 8px; }
.hero + section { padding-top: 64px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.section-head h2 { font-size: 28px; font-weight: 700; margin: 0; letter-spacing: -.5px; }
.view-more { font-size: 14px; color: #333; font-weight: 500; }
.view-more:hover { color: #000; }

/* Product grid */
.grid { display: grid; gap: 24px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff; border-radius: 12px; overflow: hidden;
  border: 1px solid #eee;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -12px rgba(0,0,0,.15); }
.card-img { aspect-ratio: 1; background: #f7f7f7; overflow: hidden; position: relative; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.discount-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: #e94b3c; color: #fff; font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 999px;
}
.card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { font-size: 15px; font-weight: 600; margin: 0; color: #111; }
/* Small visual-only indicator that a product has color options — the full
   "Pick Your Color" selector with names/labels lives on product.html; these
   dots are just a hint on the card, not interactive here. */
.card-colors { display: flex; gap: 5px; margin-top: 1px; }
.card-color-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
.card-meta { display: flex; gap: 12px; font-size: 12px; color: #666; }
.card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.card-meta-icon { width: 13px; height: 13px; flex-shrink: 0; }
.card-price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.price-now { font-size: 17px; font-weight: 700; }
.price-old { font-size: 13px; color: #e94b3c; text-decoration: line-through; }
.card-actions { padding: 0 16px 16px; }

/* Latest deals — horizontal card layout */
.deal-card {
  display: grid; grid-template-columns: 1fr 1fr;
  background: #f7f7f7; border-radius: 12px; overflow: hidden;
  min-height: 260px;
}
.deal-card .card-img { border-radius: 0; }
.deal-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.deal-body h3 { font-size: 20px; margin: 0; font-weight: 700; }
.deals-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.deals-dots span { width: 8px; height: 8px; border-radius: 50%; background: #ddd; cursor: pointer; }
.deals-dots span.active { background: #000; width: 24px; border-radius: 4px; }

/* Featured Product showcase (homepage, between New Arrivals and Reviews) */
/* Longhand top/bottom only — see .container's comment above for why this
   can't use the `padding` shorthand (it would zero out .container's
   horizontal padding on the same element). Top explicitly matches the
   collapsed section+section rhythm (8px) instead of the generic 64px —
   .reviews-section does the same for the same reason: without it, this gap
   was ~2x every other section transition on the page. */
.featured-product { padding-top: 8px; padding-bottom: 64px; }
.featured-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* .featured-product-title is an <h2> so it automatically inherits the
   site's brand heading font (see the global h1,h2 rule) — nothing to
   redeclare here, and it stays in sync if that font ever changes. */
.featured-product-title { font-size: 40px; line-height: 1.15; margin: 0 0 16px; letter-spacing: .3px; }
.featured-product-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.featured-product-price .price-now { font-size: 26px; }
.featured-product-price .price-old { font-size: 15px; }
.featured-product-desc { color: #666; font-size: 15px; line-height: 1.7; margin: 0 0 28px; max-width: 380px; }

.featured-product-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 44px; }
.featured-product-wishlist {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid #ddd; background: #fff;
  display: grid; place-items: center; color: #111; flex-shrink: 0;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}
.featured-product-wishlist svg { width: 20px; height: 20px; }
.featured-product-wishlist:hover { border-color: #000; transform: scale(1.06); }
.featured-product-wishlist.active { background: #000; border-color: #000; color: #fff; }
.featured-product-wishlist.active svg { fill: currentColor; }

.featured-product-accordion { border-top: 1px solid #eee; }
.fp-accordion-item { border-bottom: 1px solid #eee; }
.fp-accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 2px; background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 700; letter-spacing: .3px; color: #111; text-align: left;
}
.fp-accordion-icon { width: 16px; height: 16px; flex-shrink: 0; color: #666; transition: transform .3s ease, color .3s ease; }
.fp-accordion-trigger.open .fp-accordion-icon { transform: rotate(180deg); color: #111; }
.fp-accordion-panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.fp-accordion-panel-inner { padding: 0 2px 18px; font-size: 14px; line-height: 1.8; color: #555; }
.fp-accordion-panel-inner ul { margin: 0; padding-left: 18px; }
.fp-accordion-panel-inner li { margin-bottom: 6px; }

.featured-product-media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 480px; }
.featured-product-img {
  position: relative; z-index: 1; max-width: 340px; max-height: 520px; width: 100%; object-fit: contain;
  border-radius: 20px;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.15));
  opacity: 0; transform: scale(.92) translateY(16px);
  transition: opacity .7s ease, transform .5s ease;
}
.featured-product-img.in-view { opacity: 1; transform: scale(1) translateY(0); }
.featured-product-img.in-view:hover { transform: scale(1.03); }

.featured-product-badge {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 14px; padding: 10px 14px;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.2);
  font-size: 12.5px; font-weight: 600; color: #111; white-space: nowrap;
}
.featured-product-badge--purchase { top: 8%; left: 0%; }
.featured-product-badge--liked { bottom: 10%; right: 0%; }
.featured-product-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: #000; color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.featured-product-avatar--heart { background: #f4d4d4; color: #b91c1c; font-size: 13px; }

/* Customer reviews marquee */
.reviews-section { padding: 8px 0 56px; }
.reviews-head { text-align: center; margin-bottom: 32px; }
.reviews-head h2 { font-size: 28px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.5px; }
.reviews-rating { display: inline-flex; align-items: baseline; gap: 4px; }
.reviews-rating .num { font-size: 22px; font-weight: 700; }
.reviews-rating .of5 { font-size: 14px; color: #999; }
.reviews-rating .stars { color: #fbbf24; font-size: 16px; letter-spacing: 2px; margin-left: 6px; }

.reviews-track-wrap {
  overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.review-track {
  display: flex; width: max-content;
  animation: reviews-marquee 38s linear infinite;
}
/* Two identical halves (not one flat 16-card row) so translateX(-50%) always
   lands exactly on the seam between them — no fractional-gap drift/jump. */
.review-set { display: flex; gap: 20px; padding-right: 20px; }
.reviews-track-wrap:hover .review-track { animation-play-state: paused; }
.review-track.paused { animation-play-state: paused; }
.review-track.has-active .review-card:not(.active) {
  opacity: .4; filter: saturate(.6); transform: scale(.97);
}
@keyframes reviews-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.review-card {
  flex: 0 0 300px; background: #fff; border: 1px solid #eee; border-radius: 14px;
  padding: 24px; cursor: pointer; position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .25s ease, filter .25s ease;
}
.review-card:hover { border-color: #ccc; }
.review-card.active {
  transform: scale(1.06); border-color: #000;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.3); opacity: 1 !important; filter: none !important; z-index: 2;
}
.review-stars { color: #fbbf24; font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; }
.review-text {
  font-size: 14px; color: #444; line-height: 1.7; margin: 0 0 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.review-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 14px; border-top: 1px solid #f2f2f2;
}
.review-name { font-size: 14px; font-weight: 600; }
.review-product-tag {
  font-size: 11px; font-weight: 600; color: #7a6142; background: #f0e9d8;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}

/* Review submission form */
.review-form-wrap { display: flex; justify-content: center; margin-top: 40px; }
.review-form-card {
  width: 100%; max-width: 560px; background: #fff; border: 1px solid #eee; border-radius: 16px;
  padding: 32px; box-shadow: 0 20px 50px -24px rgba(0,0,0,.12);
  animation: lakri-fade-up .7s ease-out both;
}
.review-form-card h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.review-form-sub { margin: 0 0 22px; font-size: 13px; color: #666; }

.star-rating { display: flex; gap: 6px; }
.star-btn {
  font-size: 28px; line-height: 1; color: #ddd; background: none; border: none;
  cursor: pointer; padding: 0; transition: transform .15s ease, color .15s ease;
}
.star-btn:hover { transform: scale(1.15); }
.star-btn.filled { color: #fbbf24; }
.star-btn.pop { animation: star-pop .4s ease; }
.rating-error { display: none; color: #e94b3c; font-size: 12px; margin-top: 8px; }
@keyframes star-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4) rotate(-8deg); }
  100% { transform: scale(1); }
}

.review-success { display: none; text-align: center; padding: 12px 0; animation: lakri-fade-up .5s ease-out both; }
.review-success-check {
  width: 56px; height: 56px; border-radius: 50%; background: #000; color: #fff;
  display: grid; place-items: center; margin: 0 auto 14px; font-size: 26px;
  animation: star-pop .5s ease-out;
}
.review-success h4 { margin: 0 0 6px; font-size: 17px; }
.review-success p { margin: 0; font-size: 13px; color: #666; }

/* Features strip — continuously scrolling marquee, same seamless technique
   as the homepage reviews marquee and the header announcement bar: two
   identical .features-set halves inside .features-track so a
   translateX(-50%) loop always lands exactly on the seam. Bordered white
   card per item (icon badge + bold label), not the site's dark theme —
   deliberately distinct from the black announcement bar/footer so this
   reads as its own trust-signal row rather than another dark band. */
.features {
  background: #fff; padding: 28px 0;
  border-top: 1px solid #eee; border-bottom: 1px solid #eee;
  overflow: hidden; white-space: nowrap;
}
.features-track { display: flex; width: max-content; animation: features-marquee 30s linear infinite; }
.features:hover .features-track { animation-play-state: paused; }
.features-set { display: flex; align-items: center; gap: 20px; padding-right: 20px; }
.features-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; border: 1px solid #eee; border-radius: 14px;
  background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.features-item:hover { border-color: #ddd; box-shadow: 0 8px 20px -12px rgba(0,0,0,.15); }
.features-icon-badge {
  width: 40px; height: 40px; border-radius: 10px; background: #f4f4f4;
  display: grid; place-items: center; flex-shrink: 0;
}
.features-icon { width: 20px; height: 20px; flex-shrink: 0; color: #333; }
.features-item span {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-weight: 700; font-size: 15px;
  color: #111; letter-spacing: normal; text-transform: none;
}
@keyframes features-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Footer */
.footer {
  background: #000; color: #fff; padding: 64px 0 24px;
  margin-top: 64px;
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.footer.in-view { opacity: 1; transform: translateY(0); }
.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .9fr 1fr 1.3fr; gap: 32px; margin-bottom: 40px; }
/* Renders as if its 3 children (Popular Categories/Company/Useful Links)
   were direct .footer-grid items on desktop/tablet, so it doesn't disturb
   the existing 5-track/2-col grid math there — only the mobile breakpoint
   below turns it into its own 3-column row. */
.footer-links-row { display: contents; }
.footer h4 { font-size: 16px; font-weight: 600; margin: 0 0 20px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #bbb; }
.footer ul a:hover { color: #fff; }
.footer-brand p { color: #bbb; font-size: 14px; margin: 12px 0 0; }
.footer-brand .social { margin-top: 20px; }

/* Default logo (logo-full.png) and any admin-uploaded override share this
   sizing/treatment — see main.js for the show/hide toggle between them.
   brightness(0) invert(1) recolors whatever's drawn in the image to pure
   white, regardless of its original color — but only where the source file
   is actually transparent (PNG/SVG); on a solid-background file this
   whitens the whole rectangle instead. */
.footer-logo-img {
  width: auto; height: 72px; max-width: 220px; object-fit: contain;
  border-radius: 0; background: none;
  filter: brightness(0) invert(1);
}

.footer-map-col h4 { margin-bottom: 14px; }
.footer-map {
  position: relative; border-radius: 12px; overflow: hidden; height: 168px;
  background: #111; transition: transform .3s ease, filter .3s ease;
}
.footer-map:hover { transform: scale(1.02); filter: brightness(1.15); }
.footer-map iframe {
  width: 100%; height: 100%; border: 0; pointer-events: none; display: block;
  filter: invert(92%) hue-rotate(180deg) contrast(85%) brightness(.92) saturate(1.1);
}
.footer-map-overlay { position: absolute; inset: 0; }

.footer-bottom {
  border-top: 1px solid #222; padding-top: 20px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: #999;
  /* extra right-side clearance so the fixed .wa-float button (56px wide,
     24px from the viewport's right edge) never sits over the credit line
     once the page is scrolled all the way to the bottom */
  padding-right: 88px;
}
.footer-legal-line, .footer-credit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-legal-line a { color: #999; }
.footer-legal-line a:hover { color: #fff; }
.footer-legal-sep { opacity: .4; }
.footer-credit-link { color: #b8935a; font-weight: 600; }
.footer-credit-link:hover { color: #cba876; }
.footer-credit a:not(.footer-credit-link) { color: #999; }
.footer-credit a:not(.footer-credit-link):hover { color: #fff; }
.social { display: flex; gap: 12px; }
.social a {
  width: 36px; height: 36px; border-radius: 50%; background: #1a1a1a; display: grid; place-items: center;
  transition: transform .25s ease, background-color .25s ease;
}
.social a:hover { background: #333; transform: scale(1.14) rotate(-8deg); }
.social svg { width: 16px; height: 16px; fill: #fff; }

/* WhatsApp float */
.wa-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.4);
  transition: transform .2s;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* Shop layout */
/* Longhand padding-top/bottom — combined with .container, see its comment. */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding-top: 32px; padding-bottom: 64px; }
.filters { position: sticky; top: 100px; align-self: start; }
.filter-group { margin-bottom: 24px; }
.filter-group h5 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px; color: #666; }
.filter-group select, .filter-group input {
  width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; background: #fff;
}

/* Product detail */
/* align-items: start — without it, Grid's default "stretch" forces the
   right (info) column's box to match the left (image+thumbnails) column's
   height, leaving a large dead gap below its content since block content
   doesn't fill a stretched container on its own. */
.pd-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 40px 0; align-items: start; }
.pd-main-img { aspect-ratio: 1; background: #fff; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.pd-main-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pd-thumbs > div { aspect-ratio: 1; background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #eee; cursor: pointer; }
.pd-thumbs > div.active { border-color: #000; }
.pd-title { font-size: 32px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.5px; }
.pd-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.pd-out-of-stock { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #f4d4d4; color: #7a0a0a; font-size: 12.5px; font-weight: 700; margin: 0 0 16px; }
.pd-price .price-now { font-size: 28px; }
.pd-price .price-old { font-size: 16px; }
.pd-desc { color: #555; margin-bottom: 24px; }

/* Color variant selector — visual choice only (price/stock don't change
   per color), shown only when the product has at least one color defined. */
.pd-colors { margin-bottom: 24px; }
.pd-colors-label { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.pd-colors-list { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-color-swatch {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px; border: 1.5px solid #e2e2e2; border-radius: 999px;
  background: #fff; cursor: pointer; text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.pd-color-swatch:hover { border-color: #bbb; }
.pd-color-swatch.active { border-color: #000; box-shadow: 0 0 0 1px #000; }
.pd-color-dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; }
.pd-color-text { display: flex; flex-direction: column; line-height: 1.3; }
.pd-color-name { font-size: 13.5px; font-weight: 600; color: #111; }
.pd-color-caption { font-size: 11.5px; color: #999; }

.qty { display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.qty button { width: 40px; height: 44px; background: #f7f7f7; font-size: 18px; }
.qty button:hover { background: #eee; }
.qty input { width: 56px; text-align: center; border: none; height: 44px; font-size: 15px; font-weight: 600; }
.pd-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.pd-badge {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px; border: 1px solid #e5e5e5; border-radius: 12px;
  text-align: center; transition: border-color .2s ease;
}
.pd-badge:hover { border-color: #ccc; }
.pd-badge svg { width: 22px; height: 22px; color: #333; }
.pd-badge span { font-size: 12.5px; font-weight: 500; color: #333; }
/* Fills the space the badges row used to leave bare below it (the right
   column stretches to match the taller image column via grid's default
   align-items:stretch) with something the badges themselves don't say —
   a concrete delivery timeframe, reusing the same "8-12 working days"
   estimate already used in the WhatsApp confirmation message (js/admin.js). */
.pd-notes { display: flex; flex-direction: column; gap: 10px; }
.pd-delivery-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #777; margin: 0; }
.pd-note-icon { width: 16px; height: 16px; color: #999; flex-shrink: 0; }

/* Product detail accordion (Description/Specifications/Reviews) — same
   grid-template-rows 0fr->1fr height-animation technique as the FAQ page's
   accordion (.faq-answer-wrap), so padding lives on the innermost element
   rather than the animated grid item (padding on the grid item itself
   doesn't animate to 0 cleanly and causes a jump/clip at the end). */
.pd-accordion { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.pd-accordion-item { border: 1px solid #e5e5e5; border-radius: 12px; overflow: hidden; transition: border-color .2s ease; }
.pd-accordion-item.open { border-color: #ccc; }
.pd-accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; background: none; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; letter-spacing: .2px; color: #111; text-align: left;
}
.pd-accordion-icon { font-size: 20px; font-weight: 400; color: #666; line-height: 1; flex-shrink: 0; transition: transform .3s ease, color .3s ease; }
.pd-accordion-item.open .pd-accordion-icon { transform: rotate(45deg); color: #111; }
.pd-accordion-panel-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.pd-accordion-item.open .pd-accordion-panel-wrap { grid-template-rows: 1fr; }
.pd-accordion-panel { overflow: hidden; }
.pd-accordion-panel-inner { padding: 0 20px 20px; color: #444; font-size: 14px; line-height: 1.8; }
.pd-accordion-panel-inner ul { margin: 0; padding-left: 18px; }

/* Cart */
/* Longhand padding-top/bottom — combined with .container, see its comment. */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; padding-top: 32px; padding-bottom: 64px; }
.cart-item { display: grid; grid-template-columns: 100px 1fr auto auto auto; gap: 16px; align-items: center; padding: 16px; border: 1px solid #eee; border-radius: 10px; margin-bottom: 12px; }
.cart-item img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; background: #f7f7f7; }
.cart-item h4 { margin: 0 0 4px; font-size: 15px; }
.cart-item-color { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #666; margin-bottom: 4px; }
.cart-item-color-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
.cart-item .price { font-weight: 600; }
.remove-btn { color: #e94b3c; font-size: 20px; padding: 8px; }
.summary { padding: 24px; border: 1px solid #eee; border-radius: 12px; position: sticky; top: 100px; align-self: start; }
.summary h3 { margin: 0 0 20px; font-size: 18px; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.summary-total { display: flex; justify-content: space-between; padding: 16px 0; border-top: 1px solid #eee; margin-top: 8px; font-size: 18px; font-weight: 700; }

/* Checkout */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #333; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px;
  transition: border-color .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #000; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.radio-list { display: flex; flex-direction: column; gap: 10px; }
.radio-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; }
.radio-item.active { border-color: #000; background: #fafafa; }
.radio-item input { margin: 0; }
.pay-detail { margin-top: 10px; padding: 14px; background: #fafafa; border-radius: 8px; font-size: 13px; }
.order-success { text-align: center; padding: 48px 24px; }
.order-success .check { width: 72px; height: 72px; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; margin: 0 auto 20px; font-size: 32px; }
.order-id { display: inline-block; padding: 8px 16px; background: #f4f4f4; border-radius: 8px; font-family: monospace; font-weight: 600; margin: 12px 0; }

/* About / values */
/* Longhand padding-top/bottom — combined with .container, see its comment. */
.about-hero { padding-top: 64px; padding-bottom: 32px; text-align: center; }
.about-hero h1 { font-size: 42px; margin: 0 0 16px; letter-spacing: -1px; }
.about-body { max-width: 780px; margin: 0 auto; font-size: 16px; color: #444; line-height: 1.8; }
/* Values marquee — identical technique to the homepage reviews marquee
   (js/reviews.js): two identical .values-set halves rendered into the
   track (js/about-values.js) so translateX(-50%) always lands exactly on
   the seam, a mask-image fade at the track's edges, hover-to-pause in CSS,
   and click-to-pause/highlight handled in JS via .paused/.has-active. */
.values-track-wrap {
  overflow: hidden; width: 100%; margin: 48px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.values-track { display: flex; width: max-content; animation: values-marquee 22s linear infinite; }
.values-set { display: flex; gap: 24px; padding-right: 24px; }
.values-track-wrap:hover .values-track { animation-play-state: paused; }
.values-track.paused { animation-play-state: paused; }
.values-track.has-active .value-card:not(.active) {
  opacity: .4; filter: saturate(.6); transform: scale(.97);
}
@keyframes values-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.value-card {
  flex: 0 0 260px; padding: 32px 24px; background: #fff; border: 1px solid #eee; border-radius: 12px; text-align: center;
  cursor: pointer; position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .25s ease, filter .25s ease;
}
.value-card:hover { border-color: #ccc; }
.value-card.active {
  transform: scale(1.06); border-color: #000;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.3); opacity: 1 !important; filter: none !important; z-index: 2;
}
.value-card .icon { width: 48px; height: 48px; background: #000; color: #fff; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; }
.value-card h3 { margin: 0 0 8px; font-size: 18px; }
.value-card p { margin: 0; font-size: 14px; color: #666; }

/* Animated top-reviews section (about.html) — same stacked-photo swap +
   word-by-word reveal that used to power "Meet Our Team". */
/* Longhand padding-top/bottom — combined with .container, see its comment. */
.top-reviews-section { padding-top: 16px; padding-bottom: 64px; }
.top-reviews-head { text-align: center; margin-bottom: 40px; }
.top-reviews-head h2 { font-size: 28px; font-weight: 700; margin: 0; letter-spacing: -.5px; }

.top-reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.top-reviews-media { position: relative; aspect-ratio: 1; max-width: 420px; }
.top-reviews-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 20px; background: #f7f7f7;
  transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s ease;
  transform-origin: 50% 100%;
}

.top-reviews-content { display: flex; flex-direction: column; }
.top-reviews-text { min-height: 168px; }
.top-reviews-name { font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; }
.top-reviews-stars { color: #fbbf24; font-size: 15px; letter-spacing: 2px; }
.top-reviews-product { font-size: 13px; color: #999; margin: 0 0 20px; text-transform: uppercase; letter-spacing: .5px; }
.top-reviews-quote { font-size: 16px; line-height: 1.7; color: #333; margin: 0; }
.top-reviews-name, .top-reviews-product { animation: top-reviews-rise .35s ease both; }
.top-reviews-product { animation-delay: .06s; }
.top-reviews-quote .word {
  display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(6px);
  animation: word-reveal .5s ease forwards;
}
@keyframes top-reviews-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes word-reveal {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.top-reviews-controls { display: flex; gap: 12px; margin-top: 32px; }
.top-reviews-btn {
  width: 44px; height: 44px; border-radius: 50%; background: #000; color: #fff;
  display: grid; place-items: center; transition: transform .25s ease, background-color .25s ease;
}
.top-reviews-btn:hover { background: #222; transform: rotate(-14deg) scale(1.06); }
.top-reviews-btn:active { transform: rotate(-14deg) scale(.94); }
.top-reviews-btn svg { width: 18px; height: 18px; }

/* Contact */
/* Longhand padding-top/bottom — combined with .container, see its comment. */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-top: 32px; padding-bottom: 64px; }
/* Same live Google Maps embed as the footer (data-setting-map/-maplink,
   both driven by the shared footerMapAddress setting — see settings.js), but
   without the footer's dark-theme color-invert filter, since this card sits
   on the page's normal light background rather than the black footer. */
.contact-map { position: relative; border-radius: 8px; overflow: hidden; height: 280px; margin-top: 16px; background: #eaeaea; transition: transform .3s ease, filter .3s ease; }
.contact-map:hover { transform: scale(1.01); filter: brightness(1.04); }
.contact-map iframe { width: 100%; height: 100%; border: 0; pointer-events: none; display: block; }
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0; }
.info-card { padding: 24px; border: 1px solid #eee; border-radius: 12px; text-align: center; }
.info-card .icon { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; background: #f4f4f4; display: grid; place-items: center; }
.info-card h4 { margin: 0 0 6px; font-size: 14px; }
.info-card p { margin: 0; font-size: 13px; color: #666; }

/* Track order */
.tracker { max-width: 640px; margin: 32px auto; padding: 32px; border: 1px solid #eee; border-radius: 12px; }
.stepper { display: flex; justify-content: space-between; margin: 32px 0 8px; position: relative; }
.stepper::before {
  content: ''; position: absolute; top: 16px; left: 12%; right: 12%; height: 2px; background: #eee; z-index: 0;
}
.step { text-align: center; position: relative; z-index: 1; flex: 1; }
.step .dot { width: 32px; height: 32px; border-radius: 50%; background: #eee; color: #999; display: grid; place-items: center; margin: 0 auto 8px; font-size: 13px; font-weight: 600; }
.step.done .dot, .step.active .dot { background: #000; color: #fff; }
.step .label { font-size: 12px; color: #666; }
.step.done .label, .step.active .label { color: #000; font-weight: 500; }

/* Legal pages */
.legal { max-width: 820px; margin: 0 auto; padding: 48px 24px; }
.legal h1 { font-size: 32px; margin: 0 0 24px; }
.legal h2 { font-size: 20px; margin: 32px 0 12px; }
.legal p, .legal li { color: #444; line-height: 1.75; }
.legal ul { padding-left: 20px; }

/* FAQs */
.faqs { max-width: 820px; margin: 0 auto; padding: 8px 24px 64px; }
.faq-group { margin-bottom: 40px; }
.faq-group-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #999; margin: 0 0 16px; }
.faq-item { border-bottom: 1px solid #eee; }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 4px; text-align: left; font-size: 15.5px; font-weight: 600; color: #111;
}
.faq-question .chevron { flex-shrink: 0; width: 18px; height: 18px; transition: transform .3s ease; color: #999; }
.faq-item.open .faq-question .chevron { transform: rotate(180deg); color: #111; }
.faq-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq-item.open .faq-answer-wrap { grid-template-rows: 1fr; }
.faq-answer { overflow: hidden; }
.faq-answer p { margin: 0 4px 18px; color: #555; line-height: 1.75; font-size: 14.5px; }

/* Page header simple */
/* Longhand — combined with .container on the same element, see its comment. */
.page-head { padding-top: 40px; padding-bottom: 8px; }
.page-head h1 { font-size: 32px; margin: 0; letter-spacing: -.5px; }
.page-head p { color: #666; margin: 8px 0 0; }

/* Admin */
.admin-body {
  background: #f4f5f7;
  --admin-accent: #b8935a;
  --admin-accent-soft: #f6f0e4;
  --admin-accent-ring: rgba(184, 147, 90, .22);
  --admin-radius: 14px;
}
/* minmax(0, 1fr), not a bare 1fr — a bare 1fr track still has an implicit
   min-width:auto, so wide content (e.g. a data table with many columns)
   forces the whole track — and the page — to grow past the viewport
   instead of scrolling internally within .admin-main. */
.admin-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.admin-sidebar { background: #000; color: #fff; padding: 22px 0 24px; }
.admin-sidebar-head { padding-bottom: 16px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-sidebar .logo { justify-content: flex-start; align-items: center; padding: 0 24px; }
.admin-sidebar .brand-logo { height: 34px; }
.admin-badge { padding: 0 24px; margin: 6px 0 0; font-size: 10.5px; color: #8a8578; text-transform: uppercase; letter-spacing: 1.8px; }
.admin-sidebar nav { display: flex; flex-direction: column; gap: 1px; }
/* padding-left is 3px less than the logo's so the border-left doesn't shift nav text out of alignment with the logo above it */
.admin-sidebar nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 24px 11px 21px; font-size: 14px; color: #a19c8f; border-left: 3px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.admin-sidebar nav a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .75; transition: opacity .18s ease; }
.admin-sidebar nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.admin-sidebar nav a:hover svg { opacity: 1; }
.admin-sidebar nav a.active { background: rgba(184, 147, 90, .16); color: #fff; border-color: var(--admin-accent); }
.admin-sidebar nav a.active svg { opacity: 1; color: var(--admin-accent); }
.admin-main { padding: 32px; }
.admin-main h1 { margin: 0 0 24px; font-size: 25px; font-weight: 800; letter-spacing: -.3px; }
/* auto-fit/minmax rather than a fixed 5 columns — the Dashboard now has 7
   stat cards (was 5), so a fixed count either cramps longer values (e.g. a
   negative profit figure) or leaves the last row oddly narrow; this lets
   each card claim real room and reflow naturally regardless of count. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
/* Fixed-count variants (lakrilab-console-313/expenses.html, lakrilab-console-313/reports.html) — still
   collapse to 2 columns on mobile via the media query below, same as the
   default .stats does. */
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card {
  background: #fff; padding: 20px; border-radius: var(--admin-radius); border: 1px solid #eee;
  box-shadow: 0 2px 10px -6px rgba(20,15,5,.07); transition: box-shadow .2s ease, transform .2s ease;
}
.stat-card:hover { box-shadow: 0 12px 26px -10px rgba(20,15,5,.14); transform: translateY(-2px); }
.stat-card .label { font-size: 11.5px; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.stat-card .value { font-size: 27px; font-weight: 800; margin-top: 6px; letter-spacing: -.3px; }
.stat-card .sub { font-size: 11px; color: #999; margin-top: 4px; }
/* Lets a table with more columns than fit the viewport scroll horizontally
   within its own box instead of forcing .admin-main (and the whole page)
   wider than the viewport — the table keeps its own rounded-corner card
   look since that now lives on the wrapper. */
.table-scroll { overflow-x: auto; border-radius: var(--admin-radius); box-shadow: 0 2px 10px -6px rgba(20,15,5,.06); }
.table-scroll .data-table { box-shadow: none; }
.data-table {
  width: 100%; background: #fff; border-radius: var(--admin-radius); border: 1px solid #eee;
  overflow: hidden; border-collapse: collapse; box-shadow: 0 2px 10px -6px rgba(20,15,5,.06);
}
.data-table th, .data-table td { padding: 13px 16px; text-align: left; font-size: 13px; border-bottom: 1px solid #f1f1f1; }
.data-table th { background: #fafafa; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 10.5px; color: #888; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: #fbfaf8; }
.data-table tbody tr:hover { background: var(--admin-accent-soft); }
.data-table td img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.pill { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .2px; }
.pill.active, .pill.delivered, .pill.approved, .pill.paid { background: #d4f4dd; color: #0a7a2f; }
.pill.pending { background: #fff3cd; color: #7a5a00; }
.pill.confirmed { background: #d1e7ff; color: #0a4a8a; }
.pill.shipped { background: #e0dbff; color: #4b3ea6; }
.pill.inactive, .pill.rejected, .pill.unpaid, .pill.cancelled, .pill.low-stock { background: #f4d4d4; color: #7a0a0a; }
.btn-sm { padding: 7px 14px; font-size: 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.btn-sm svg { width: 12px; height: 12px; }
/* Slightly bigger icon than the default .btn-sm 12px — used where the icon
   needs to stay legible on its own (e.g. the WhatsApp glyph), not just as a
   small decorative accent next to a text label. */
.btn.btn-icon svg { width: 18px; height: 18px; }
.btn-outline { background: #fff; border: 1px solid #000; color: #000; }
.btn-danger { background: #e94b3c; color: #fff; }
.btn-danger:hover { background: #d43828; }
.tabs-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tabs-row button { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #eee; font-size: 13px; transition: border-color .15s ease; }
.tabs-row button:hover { border-color: var(--admin-accent); }
.tabs-row button.active { background: #000; color: #fff; border-color: #000; }
.admin-search {
  padding: 10px 16px; border: 1px solid #ddd; border-radius: 999px; font-size: 13px;
  min-width: 240px; background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat 14px center;
  background-size: 15px; padding-left: 38px;
}
.admin-search:focus { outline: none; border-color: var(--admin-accent); box-shadow: 0 0 0 3px var(--admin-accent-ring); }
.admin-body .form-group input:focus, .admin-body .form-group select:focus, .admin-body .form-group textarea:focus {
  border-color: var(--admin-accent); box-shadow: 0 0 0 3px var(--admin-accent-ring);
}
.form-hint { display: block; margin-top: 5px; font-size: 11.5px; color: #999; line-height: 1.5; }

/* Product color-variant editor rows (lakrilab-console-313/products.html) */
.color-row { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 8px; background: #fafafa; }
.color-row input[type="color"] { width: 38px; height: 34px; padding: 2px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; background: #fff; flex-shrink: 0; }
.color-row .color-hex-input { width: 90px; flex-shrink: 0; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12.5px; }
.color-row .color-name-input { flex: 1 1 140px; min-width: 100px; }
.color-row .color-label-input { flex: 1 1 140px; min-width: 100px; }
.color-row .remove-color-btn { flex-shrink: 0; }
.color-row input { padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; }

/* Settings / Site Content cards */
.settings-card {
  background: #fff; border: 1px solid #eee; border-radius: var(--admin-radius);
  padding: 26px 28px 24px; margin-bottom: 22px; max-width: 760px;
  box-shadow: 0 2px 10px -6px rgba(20,15,5,.06); transition: box-shadow .2s ease, transform .2s ease;
}
.settings-card:hover { box-shadow: 0 12px 28px -12px rgba(20,15,5,.13); transform: translateY(-1px); }
/* flex-wrap so the non-shrinking, nowrap .preview-link drops to its own
   line on narrow admin screens instead of forcing the row (and the whole
   page) wider than the viewport. */
.settings-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.settings-card-title { display: flex; align-items: center; gap: 12px; }
.settings-card-title .icon {
  width: 36px; height: 36px; border-radius: 10px; background: var(--admin-accent-soft);
  color: var(--admin-accent); display: grid; place-items: center; flex-shrink: 0;
}
.settings-card-title .icon svg { width: 17px; height: 17px; }
.settings-card h3 { margin: 0; font-size: 16px; font-weight: 800; }
.settings-card-hint { margin: 6px 0 20px; font-size: 12.5px; color: #8a8a8a; line-height: 1.6; }
.preview-link {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
  padding: 8px 15px; border-radius: 999px; background: #f4f4f4; color: #333;
  font-size: 12.5px; font-weight: 700; transition: background-color .18s ease, color .18s ease;
}
.preview-link:hover { background: #000; color: #fff; }
.preview-link svg { width: 13px; height: 13px; }
.settings-divider { height: 1px; background: #eee; margin: 22px 0; border: none; }
.settings-subhead { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 12px; }
.settings-subhead h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: #444; }

/* Simple P&L bar visualization (lakrilab-console-313/reports.html) — plain divs scaled to
   the largest of the four values, no chart library needed. */
.pl-chart { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 32px; padding: 24px; background: #fff; border: 1px solid #eee; border-radius: var(--admin-radius); box-shadow: 0 2px 10px -6px rgba(20,15,5,.06); }
.pl-bar-row { display: grid; grid-template-columns: 130px 1fr 150px; align-items: center; gap: 14px; font-size: 13px; }
.pl-bar-label { font-weight: 600; color: #444; }
.pl-bar-track { height: 14px; background: #f4f4f4; border-radius: 999px; overflow: hidden; }
.pl-bar { height: 100%; border-radius: 999px; transition: width .5s ease; min-width: 2px; }
.pl-bar-revenue { background: #0a7a2f; }
.pl-bar-cost { background: var(--admin-accent); }
.pl-bar-expenses { background: #e94b3c; }
.pl-bar-profit { background: #111; }
.pl-bar-value { font-weight: 700; text-align: right; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: #fff; border-radius: 12px; max-width: 640px; width: 100%;
  max-height: 90vh; overflow-y: auto; padding: 24px;
}
.modal h3 { margin: 0 0 20px; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }

/* Auth */
.auth-shell { min-height: 100vh; background: #f5f5f5; display: grid; place-items: center; padding: 24px; }
.auth-card { background: #fff; padding: 40px; border-radius: 12px; width: 100%; max-width: 400px; box-shadow: 0 12px 32px -12px rgba(0,0,0,.1); }
.auth-card h1 { margin: 0 0 24px; font-size: 24px; text-align: center; }

/* Responsive */
@media (max-width: 900px) {
  .announcement-bar { font-size: 11.5px; }
  .announcement-set { gap: 18px; padding-right: 18px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .shop-layout { grid-template-columns: 1fr; }
  .pd-layout, .cart-layout, .contact-layout { grid-template-columns: 1fr; }
  /* Full-bleed product photo on mobile — breaks out of .container's side
     padding (18px each side below) so the image spans the actual screen
     edge to edge instead of sitting inset like a thumbnail, and switches to
     a taller 4:5 ratio (vs. desktop's 1:1) so it reads as a real hero photo
     rather than a small square. No border-radius here since a corner isn't
     visible once the image touches the viewport edge. */
  .pd-main-img {
    aspect-ratio: 4 / 5;
    width: calc(100% + 36px);
    margin-left: -18px; margin-right: -18px;
    border-radius: 0; margin-bottom: 16px;
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-map-col { grid-column: 1 / -1; }
  .footer-map { height: 180px; }
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 14px; padding-right: 0; }
  .footer-legal-line, .footer-credit { justify-content: center; }
  .hero { height: 480px; }
  .hero img { object-position: 70% center; }
  .hero h1 { font-size: 34px; letter-spacing: 1px; }
  .hero p { font-size: 15px; margin-bottom: 24px; }
  .hero-overlay {
    padding: 0 24px;
    /* Radial, centered on the text block itself (not a top-anchored fade)
       now that the content sits in the middle of the hero, so it stays
       legible over the photo regardless of what's behind it vertically. */
    background: radial-gradient(ellipse 95% 65% at center, rgba(255,255,255,.88) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,0) 85%);
    align-items: center;
    justify-content: center;
  }
  .hero-content { text-align: center; max-width: none; }
  .features-item span { font-size: 13.5px; }
  .features-item { padding: 11px 16px; gap: 10px; }
  .features-icon-badge { width: 32px; height: 32px; border-radius: 8px; }
  .features-icon { width: 16px; height: 16px; }
  .features-set { gap: 14px; padding-right: 14px; }
  .stats, .stats-3, .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  /* Was `display:flex` with no flex-direction — a row by default — which
     merged the logo/"Admin Panel" head AND the nav links into one cramped
     horizontal strip together. The head got squeezed to fit its share of
     that row, wrapping "ADMIN PANEL" onto two lines and pushing nav items
     (Dashboard/Products/Orders/...) off the edge of the screen with no
     visible way to reach the rest. Column instead: the head is its own
     full-width row (room for the badge to sit on one line), and the nav
     becomes its own horizontally-scrollable strip below it. */
  .admin-sidebar { display: flex; flex-direction: column; padding: 0; }
  .admin-sidebar-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; margin-bottom: 0;
  }
  .admin-sidebar .logo { padding: 0; }
  .admin-badge { padding: 0; margin: 0; }
  .admin-sidebar nav {
    flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 4px 12px 10px; gap: 4px;
  }
  .admin-sidebar nav a {
    flex-shrink: 0; white-space: nowrap; padding: 9px 14px;
    border-left: none; border-radius: 8px;
  }
  .admin-main { padding: 20px 16px; }
  .admin-main h1 { font-size: 21px; margin-bottom: 18px; }
  /* .info-cards (Phone/Email/Hours on contact.html, Call/Email/Based-in on
     about.html — shared class) has short one-line content, so it stays a
     real 3-column grid at reduced size rather than stacking. */
  .info-cards { grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; }
  .info-card { padding: 14px 8px; }
  .info-card .icon { width: 34px; height: 34px; font-size: 15px; margin-bottom: 8px; }
  .info-card h4 { font-size: 11.5px; margin-bottom: 4px; }
  .info-card p { font-size: 10.5px; line-height: 1.35; word-break: break-word; }

  /* Same auto-scrolling marquee as desktop (no separate mobile layout
     needed — that's the point), just a smaller card + faster loop, same
     tuning .review-card/.review-track get on mobile just above. */
  .value-card { flex-basis: 220px; padding: 20px 16px; }
  .values-set { gap: 14px; padding-right: 14px; }
  .values-track { animation-duration: 16s; }
  .top-reviews-grid { grid-template-columns: 1fr; gap: 28px; }
  .top-reviews-media { max-width: 280px; margin: 0 auto; }
  .top-reviews-content { text-align: center; align-items: center; }
  .top-reviews-name { justify-content: center; }
  .top-reviews-controls { justify-content: center; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; padding: 16px; border-bottom: 1px solid #eee; }
  .nav.open { display: flex; }
  .mobile-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: #f4f4f4; }
  .form-row { grid-template-columns: 1fr; }
  .deal-card { grid-template-columns: 1fr; }
  .featured-product-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Exposes title/price/desc/actions/accordion as direct grid items (same
     as .featured-product-media already is) so the title alone can be
     pulled above the image via `order` — desktop is untouched since this
     only applies in this mobile block. */
  .featured-product-info { display: contents; }
  /* Backdrop panel replaces the removed circle — gives the image a soft
     resting surface + its own depth (shadow) instead of floating directly
     on the page's plain white background, which read as too bare on mobile. */
  .featured-product-media {
    order: -1; min-height: 360px;
    background: linear-gradient(165deg, #faf8f3, #f2ece1);
    border-radius: 24px; padding: 36px 20px;
    box-shadow: 0 20px 44px -26px rgba(0,0,0,.22);
  }
  .featured-product-img { max-width: 260px; max-height: 390px; }
  .featured-product-title { order: -2; font-size: 30px; margin-bottom: 20px; }
  .featured-product-price { margin-bottom: 20px; }
  .featured-product-desc { max-width: none; margin-bottom: 32px; }
  .featured-product-actions { margin-bottom: 36px; }
  /* A slightly heavier top border + top margin than the desktop divider,
     so the accordion reads as its own section instead of just more
     stacked text under the buttons. */
  .featured-product-accordion { margin-top: 8px; border-top-width: 2px; border-top-color: #eee; }
  .fp-accordion-trigger { padding: 20px 8px; border-radius: 8px; transition: background-color .2s ease; }
  .fp-accordion-trigger:hover, .fp-accordion-trigger.open { background: #f7f4ee; }
  .fp-accordion-panel-inner { padding: 0 8px 20px; }
  .featured-product-badge {
    padding: 8px 12px; gap: 8px; font-size: 11px; border-radius: 12px;
  }
  .featured-product-avatar { width: 22px; height: 22px; font-size: 10px; }
  .featured-product-avatar--heart { font-size: 11px; }
  .featured-product-badge--purchase { top: 10px; left: 4px; }
  .featured-product-badge--liked { bottom: 10px; right: 4px; }
  .container { padding-left: 18px; padding-right: 18px; }
  section { padding: 40px 0; }
  .hero + section { padding-top: 44px; }
  .section-head h2 { font-size: 22px; }
  .grid { gap: 16px; }
  .brand-logo { height: 36px; }
  .header-inner { padding: 12px 18px; gap: 12px; }
  .review-card { flex-basis: 230px; padding: 18px; }
  .review-set { gap: 14px; padding-right: 14px; }
  .review-track { animation-duration: 26s; }
  .reviews-head h2 { font-size: 22px; }
  .review-form-card { padding: 22px; border-radius: 12px; }
  .star-btn { font-size: 24px; }
  .review-card.active { transform: scale(1.04); }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  /* Popular Categories/Company/Useful Links stay side-by-side as their own
     3-column row instead of collapsing to full-width stacking like the
     other footer blocks — matches the desktop grouping, just compact. */
  .footer-links-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .footer-links-row h4 { font-size: 12.5px; margin: 0 0 10px; }
  .footer-links-row ul { gap: 7px; font-size: 11.5px; line-height: 1.35; }
  /* Below 640px the backdrop panel itself is narrower, so the badges are
     nudged further in and shrunk a touch more to keep clear of the panel's
     rounded corners instead of being hidden outright. */
  .featured-product-media { padding: 28px 16px; }
  .featured-product-badge { padding: 7px 10px; font-size: 10.5px; gap: 7px; }
  .featured-product-avatar { width: 20px; height: 20px; font-size: 9.5px; }
  .featured-product-badge--purchase { top: 8px; left: 8px; }
  .featured-product-badge--liked { bottom: 8px; right: 8px; }
}

/* Toasts */
.toast-container {
  position: fixed; bottom: 24px; left: 24px; z-index: 300;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  background: #111; color: #fff; padding: 14px 18px; border-radius: 8px;
  font-size: 13px; font-weight: 500; box-shadow: 0 12px 32px -12px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
  max-width: 340px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: #0a7a2f; }
.toast-error { background: #b91c1c; }

/* WhatsApp icon button (admin orders table) */
.wa-btn {
  width: 32px; height: 32px; border-radius: 50%; background: #25d366;
  display: inline-grid; place-items: center; position: relative;
}
.wa-btn:hover { background: #1fb959; }
.wa-btn svg { width: 16px; height: 16px; fill: #fff; }
.wa-btn[title]:hover::after {
  content: attr(title); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
  background: #111; color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 4px;
  white-space: nowrap; pointer-events: none;
}

/* Invoice modal action row — 3 equal-width compact buttons (WhatsApp,
   Print, Mark Paid/Unpaid); Close sits separately below via .modal-actions
   (already right-aligned/secondary by default). */
.invoice-actions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.invoice-actions-row .btn { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .invoice-actions-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .invoice-actions-row { grid-template-columns: 1fr; }
}

/* Shared "printable document" styling — the Confirmation Slip
   (lakrilab-console-313/orders.html) and the Invoice detail (lakrilab-console-313/invoices.html) both
   use these same .doc-* classes and the same .doc-print-area wrapper, so
   a change here (spacing, the print-safety fix below, etc.) updates both
   documents at once instead of drifting out of sync. */
.doc-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 2px solid #111; margin-bottom: 28px; }
/* flex:1 1 auto + min-width:0 lets this side shrink first (and the title
   below truncate with an ellipsis) rather than ever wrapping into the
   fixed-width meta column on the right. */
.doc-brand { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.doc-logo { height: 54px; width: auto; object-fit: contain; flex-shrink: 0; }
/* Felix Titling matches the site's own h1/h2 brand typography (the logo
   itself is a raster image with no live font to borrow directly). */
.doc-title { font-family: 'Felix Titling', 'Arial Black', Arial, sans-serif; font-size: 20px; font-weight: 700; margin: 0; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; text-align: right; font-size: 12px; color: #666; flex-shrink: 0; }
.doc-meta .doc-number { font-size: 14px; font-weight: 800; color: #111; letter-spacing: .2px; white-space: nowrap; }

.doc-info-card { background: #faf8f4; border-radius: 14px; padding: 22px 26px; margin-bottom: 26px; }
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 13px; }
.doc-parties h4 { margin: 0 0 10px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: #b8935a; }
.doc-parties p { margin: 0; line-height: 1.9; color: #333; }
.doc-parties .pill { font-size: 11.5px; padding: 4px 12px; }
.doc-tracking-value { display: inline-block; background: #f6f0e4; color: #7a5c2e; font-weight: 800; font-size: 13.5px; padding: 3px 11px; border-radius: 6px; letter-spacing: .3px; }

.doc-print-area .data-table { margin-bottom: 4px; }
.doc-print-area .data-table th, .doc-print-area .data-table td { padding: 14px 18px; }

.doc-totals-box { background: #faf8f4; border: 1px solid #eee; border-radius: 14px; padding: 18px 24px; margin: 26px 0 8px; max-width: 300px; margin-left: auto; }
.doc-totals-row { display: flex; justify-content: space-between; font-size: 13.5px; color: #555; padding: 3px 0; }
.doc-totals-grand { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 12px; border-top: 1.5px solid #111; font-size: 21px; font-weight: 800; color: #111; }

/* Bottom row: thank-you/contact note on the left, print-only signature
   block on the right — a standard invoice layout, keeps the two from
   stacking on top of each other. */
.doc-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 28px; padding-top: 18px; border-top: 1px dashed #ddd; }
.doc-footer { text-align: left; font-size: 12.5px; color: #777; line-height: 1.8; margin: 0; }

/* Print-only signature block — invisible on screen (this rule), flipped to
   visible only inside @media print below. Never referenced by
   buildEmailPreview() (Confirmation Slip) or the invoice's WhatsApp/email
   content, so it can't leak into either. Shared by both documents. */
.doc-signature { display: none; text-align: right; flex-shrink: 0; }
.doc-signature-line { width: 190px; margin: 0 0 10px auto; border-top: 1px solid #999; }
.doc-signature-name { font-family: 'Yellowtail', cursive; font-size: 26px; color: #111; }
.doc-signature-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-top: 4px; }

.email-preview-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-bottom: 8px; }
.email-preview { background: #f9f9f7; border: 1px solid #eee; border-radius: 10px; padding: 16px; font-size: 12.5px; color: #333; line-height: 1.7; white-space: pre-wrap; font-family: 'SFMono-Regular', Consolas, monospace; }

@media print {
  body * { visibility: hidden; }
  .doc-print-area, .doc-print-area * { visibility: visible; }
  .doc-print-area {
    position: absolute; top: 0; left: 0; width: 100%; margin: 0; padding: 16px;
  }
  .no-print { display: none !important; }
  .doc-signature { display: block; }
  /* logo-full.png is a wide wordmark (icon+text combined), not a compact
     square icon — side-by-side with the title, it doesn't leave enough
     room for the title to fit on one line at true A5 content width
     (~437px after page margin + print padding). Stacking logo above title
     (a standard letterhead pattern) fixes this without shrinking the logo
     or truncating the title — verified to fit with room to spare at
     469px test width. Applies to both documents; the on-screen preview
     for both is unaffected. */
  .doc-brand { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@page { size: A5; margin: 12mm; }