:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-alt: #edf7f1;
  --primary: #0d7a47;
  --primary-dark: #094d2f;
  --accent: #f9c74f;
  --text: #13202a;
  --muted: #5e6977;
  --line: #dfe9f2;
  --shadow: 0 20px 60px rgba(17, 39, 56, 0.08);
  --danger: #d84848;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(17, 39, 56, 0.035);
  transition: transform 260ms cubic-bezier(.2,.8,.25,1);
}
.site-header.header-hidden { transform: translateY(-100%); }
.nav-wrap {
  position: relative;
  min-height: 78px;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.02rem; }
.brand small { font-size: 0.7rem; color: var(--muted); }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), #2bb777);
  color: white; font-weight: 800; box-shadow: var(--shadow);
}
.brand-mark-logo { background: none; box-shadow: none; overflow: hidden; padding: 0; }
.brand-mark-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-mark-bordered { border: 1px solid rgba(17, 39, 56, 0.16); background: #fff; }
.site-footer .brand-mark-bordered { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); }
.main-nav {
  display: flex; gap: 24px; align-items: center; font-weight: 600; color: var(--muted);
}
.main-nav a { position: relative; }
.main-nav a.active, .main-nav a:hover { color: var(--text); }
.main-nav a.active::after, .main-nav a:hover::after {
  content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; background: var(--primary);
}
.menu-toggle, .mobile-nav-cta { display: none; }
.language-switch { display: inline-flex; flex: 0 0 auto; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.language-switch button { min-width: 36px; min-height: 32px; padding: 0 7px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 0.72rem; font-weight: 800; cursor: pointer; }
.language-switch button[aria-pressed="true"] { background: var(--primary); color: white; }

.button {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: none;
  font-weight: 700; cursor: pointer; padding: 0.9rem 1.5rem; transition: 0.2s ease; text-decoration: none;
}
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--primary); color: white; box-shadow: 0 14px 28px rgba(13,122,71,0.2); }
.button-primary:hover { background: var(--primary-dark); }
.button-secondary { background: white; color: var(--text); border: 1px solid var(--line); }
.button-light { background: white; color: var(--primary-dark); }
.btn-danger { background: var(--danger); color: white; }
.full { width: 100%; }

.hero {
  padding: 72px 0 42px;
  background: linear-gradient(135deg, rgba(13,122,71,0.08), rgba(249,199,79,0.12));
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: center;
}
.eyebrow {
  display: inline-block; background: rgba(13,122,71,0.1); color: var(--primary-dark);
  border-radius: 999px; padding: 0.45rem 0.8rem; letter-spacing: 0.08em; font-size: 0.76rem; text-transform: uppercase; font-weight: 700;
}
.eyebrow.light { background: rgba(255,255,255,0.2); color: white; }
.hero-copy h1, .page-banner h1, .section-heading h2, .split-layout h2, .contact-panel h2 { margin: 16px 0; line-height: 1.15; }
.hero-copy h1 { font-size: clamp(2.5rem, 3vw, 4.3rem); }
.hero-copy p, .split-layout p, .feature-card p, .product-card p, .contact-panel p, .contact-list, .faq-answer p, .site-footer p, .site-footer li { color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.hero-meta {
  list-style: none; padding: 0; margin: 28px 0 0; display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted); font-weight: 600;
}

.hero-card, .product-card, .feature-card, .info-panel, .contact-form, .contact-panel, .panel, .stat-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow);
}
.hero-card { padding: 22px; }
.hero-card { transform-style: preserve-3d; transition: transform 420ms cubic-bezier(.2,.75,.25,1), box-shadow 420ms ease; will-change: transform; }
.card-top, .price-row, .meta-row, .product-toolbar, .cta-wrap, .topbar, .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.badge { display: inline-flex; padding: 0.5rem 0.8rem; border-radius: 999px; background: rgba(13,122,71,0.12); color: var(--primary-dark); font-size: 0.72rem; font-weight: 700; }
.rating { color: #e6a800; font-weight: 700; }
.hero-illustration {
  width: 100%; height: auto; display: block; margin: 18px 0 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(13,122,71,0.12), rgba(255,255,255,0.4));
  border: 1px solid rgba(13,122,71,0.08);
}
.product-card-price-note { display: block; margin-top: 16px; font-size: 0.86rem; font-weight: 700; color: var(--primary-dark); }
.product-card-cta { margin-top: 16px; width: 100%; justify-content: center; }
.product-card.is-scroll-target { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,122,71,0.18), 0 24px 54px rgba(17,39,56,0.12); }
.product-card { scroll-margin-top: 90px; }

.hero-illustration, .card-details { transform: translateZ(12px); }
.hero-video { width: 100%; height: auto; display: block; border-radius: 18px; background: #0f172a; object-fit: cover; aspect-ratio: 16/10; }
/* Hero video sound control. The button is also the play control, because most
   phones refuse to autoplay a video that has sound, so a visitor needs one tap
   to start it. The icon is picked from data-video-state, which the script in
   index.php keeps in sync with the real playback state. */
.hero-video-wrap { position: relative; }
.video-sound-toggle {
  position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center; border: 1px solid rgba(15,23,42,0.18); border-radius: 50%;
  background: rgba(15,23,42,0.68); color: #ffffff; font: inherit; cursor: pointer;
  box-shadow: 0 10px 24px rgba(15,23,42,0.2); z-index: 2;
  transition: background 180ms ease, transform 180ms ease;
}
.video-sound-toggle:hover { background: rgba(15,23,42,0.84); }
.video-sound-toggle:active { transform: scale(0.94); }
.video-sound-toggle:focus-visible { outline: 3px solid rgba(13,122,71,0.45); outline-offset: 2px; }
.video-sound-icon { display: none; width: 21px; height: 21px; fill: currentColor; }
.video-sound-toggle[data-video-state="playing"] .video-sound-icon-on,
.video-sound-toggle[data-video-state="muted"] .video-sound-icon-off,
.video-sound-toggle[data-video-state="paused"] .video-sound-icon-play { display: block; }
.video-sound-toggle[data-video-state="muted"] { background: rgba(13,122,71,0.86); }
/* Reviews section. Mobile tuning lives in the 560px block; this is the desktop
   three-across layout, which had no styling at all when the section was added. */
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
.review-card {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px;
  border: 1px solid var(--line); border-radius: 18px; background: white;
  box-shadow: 0 18px 44px rgba(17,39,56,0.05);
}
.review-photo { width: 62px; height: 62px; flex: 0 0 62px; border-radius: 50%; object-fit: cover; background: var(--line); border: 1px solid var(--line); }
.review-body { min-width: 0; flex: 1 1 auto; }
.review-quote { margin: 0 0 12px; color: var(--text); font-size: 0.95rem; line-height: 1.65; }
.review-author { display: flex; flex-direction: column; gap: 3px; }
.review-author strong { font-size: 0.95rem; }
.review-author span { font-size: 0.78rem; color: var(--muted); }
/* Reviews editor on admin/reviews.php. */
.review-editor { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; }
.review-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.review-editor-head h4 { margin: 0; font-size: 0.95rem; }
.review-editor .button { font-size: 0.78rem; padding: 0.5rem 0.7rem; }
/* .button sets display: inline-flex, which beats the browser's [hidden] rule,
   so the Remove button needs its own guard to disappear on the last row. */
.review-remove[hidden] { display: none; }
.review-form-actions .button:disabled { cursor: not-allowed; opacity: 0.55; }
.review-photo-field {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px;
  padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: #ffffff;
}
.review-photo-preview {
  width: 56px; height: 56px; flex: 0 0 56px; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: 50%; background: #eef2f6;
}
.review-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-photo-empty { font-size: 0.62rem; color: var(--muted); text-align: center; line-height: 1.2; }
.review-photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.review-photo-pick { display: inline-block; margin: 0; cursor: pointer; }
.review-photo-clear { margin: 0; font-weight: 500; font-size: 0.8rem; display: flex; align-items: center; gap: 6px; }
.review-photo-status { flex: 1 1 100%; margin: 0; }
.review-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.reviews-count-note { margin: 0; }
.home-lineup-more { display: none; }

.admin-notice { padding: 12px 14px; border-radius: 10px; background: #e8f6ee; border: 1px solid #b9e0ca; color: #0a5734; font-size: 0.9rem; margin-bottom: 16px; }
.admin-notice-error { background: #fdecec; border-color: #f3c2c2; color: #8f2626; }
.image-upload-form, .image-hero-form { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.image-upload-form label, .image-hero-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 600; }
.image-upload-form input[type="text"], .image-upload-form select, .image-hero-form select { width: 100%; }
.image-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 6px; }
.image-library-item { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.image-library-item > strong { font-size: 0.94rem; word-break: break-word; }
.image-library-item > small { font-size: 0.76rem; color: var(--muted); word-break: break-all; }
.image-library-used { color: var(--primary-dark); font-weight: 600; }
.checkbox-label {
  display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer;
}
.checkbox-label input { width: auto; min-height: 0; margin: 0; accent-color: var(--primary); }
.logo-preview {
  display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 16px;
  border: 1px solid rgba(17, 39, 56, 0.12); border-radius: 10px; background: #f7fafc;
}
.logo-preview .brand-mark { flex: 0 0 auto; width: 52px; height: 52px; }
.logo-preview strong { display: block; }
.logo-preview small { display: block; margin-top: 2px; }
.image-library-unused { font-style: italic; }
.image-library-thumb { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.image-library-thumb img { width: 100%; height: 150px; object-fit: contain; }
.image-library-assign { display: flex; flex-direction: column; gap: 8px; }
.image-library-assign select { width: 100%; }
.image-library-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.image-library-actions form { display: block; }
.image-library-actions .button { width: 100%; font-size: 0.78rem; padding: 0.55rem 0.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.showroom-image {
  width: 100%; height: auto; display: block; border-radius: 18px; margin-bottom: 18px; border: 1px solid var(--line);
}
.photo-panel { overflow: hidden; }
.card-details h3 { margin: 0 0 8px; }
.card-details p { margin: 0; color: var(--muted); }
.price-row { margin-top: 18px; }
.price-row strong { font-size: 1.15rem; }
.price-row span { color: var(--primary-dark); font-size: 0.8rem; font-weight: 700; }

.stats-bar { padding: 0 0 32px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.stats-grid > div {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; text-align: center; box-shadow: var(--shadow);
}
.stats-grid strong { display: block; font-size: 1.45rem; margin-bottom: 4px; }
.stats-grid span { color: var(--muted); }

.section { padding: 78px 0; }
.alt-bg { background: rgba(13,122,71,0.04); }
.section-heading { margin-bottom: 30px; }
.section-heading h2 { font-size: clamp(2rem, 2vw, 2.8rem); }
.product-grid, .feature-grid { display: grid; gap: 22px; }
.three-col { grid-template-columns: repeat(3, minmax(0,1fr)); }
.four-col { grid-template-columns: repeat(4, minmax(0,1fr)); }
.product-card, .feature-card { padding: 22px; }
.product-card, .feature-card { transition: transform 300ms cubic-bezier(.2,.75,.25,1), box-shadow 300ms ease, border-color 300ms ease; }
.product-card { transform-style: preserve-3d; }
.home-product-grid { min-width: 0; }
.product-image {
  width: 100%; aspect-ratio: 1.35; object-fit: contain; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: 12px; background: #f8fafc;
  transform: translateZ(8px); transition: transform 300ms ease;
}
.product-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; margin-top: 16px; }
.product-actions .button { min-height: 44px; width: 100%; padding: 0.65rem 0.9rem; border-radius: 7px; font-size: 0.82rem; }
.whatsapp-link { border-color: #b6e4d5; color: #08734d; }
.button-compare { background: #13202a; color: white; }
.button-compare:hover { background: #253b4a; }
.button-compare:disabled { cursor: not-allowed; opacity: 0.5; }
.product-badge {
  display: inline-flex; margin-bottom: 16px; background: rgba(249,199,79,0.18); color: #8f6702; border-radius: 999px; padding: 0.38rem 0.7rem; font-size: 0.72rem; font-weight: 700;
}
.product-card h3, .feature-card h3 { margin-top: 0; margin-bottom: 12px; }
.product-features { padding-left: 18px; margin: 14px 0; color: var(--muted); font-size: 0.86rem; }
.product-features li { margin-bottom: 5px; }
.meta-row {
  justify-content: flex-start; flex-wrap: wrap; margin: 18px 0 12px; font-size: 0.74rem;
}
.meta-row span {
  display: inline-flex; align-items: center; padding: 0.35rem 0.65rem; border-radius: 999px; background: rgba(13,122,71,0.08); color: var(--primary-dark); font-weight: 700;
}
.split-layout, .two-col, .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: start; }
.check-list { list-style: none; padding: 0; margin: 20px 0 24px; }
.check-list li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--text); font-weight: 600; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--primary); }
.info-panel { padding: 22px; }
.mini-stat { padding: 18px 16px; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 14px; }
.mini-stat strong { display: block; font-size: 1.25rem; }

.faq-list { display: grid; gap: 14px; }
.faq-item { background: white; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.faq-question {
  width: 100%; text-align: left; padding: 18px 20px; background: transparent; border: none; font-weight: 700; color: var(--text); cursor: pointer;
}
.faq-answer { display: none; padding: 0 20px 18px; }
.faq-item.active .faq-answer { display: block; }

.cta-band { background: linear-gradient(135deg, #0d7a47, #0b5132); padding: 54px 0; }
.cta-wrap { color: white; }
.page-banner { padding: 72px 0 40px; background: linear-gradient(135deg, rgba(13,122,71,0.08), rgba(249,199,79,0.08)); }
.narrow { max-width: 760px; }
.product-toolbar { margin-bottom: 28px; flex-wrap: wrap; }
#productSearch, .product-toolbar input, .admin-form input, .admin-form select, .admin-form textarea {
  flex: 1 1 260px; height: 52px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: white; color: var(--text);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 0.72rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: white; color: var(--text); font-weight: 700; cursor: pointer;
}
.chip.active { background: var(--primary); color: white; border-color: var(--primary); }

.contact-grid { align-items: stretch; }
.contact-panel, .contact-form { padding: 26px; }
.contact-list { list-style: none; padding: 0; margin: 18px 0 0; }
.contact-list li { margin-bottom: 10px; }
/* Contact location map. This box used to be a static dashed placeholder, which
   clipped the Google Maps iframe that now sits inside it. It is sized by the
   iframe instead, and overflow is hidden so the map meets the rounded corners. */
.map-box {
  margin-top: 24px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #e7edf3; line-height: 0;
}
.map-box iframe { display: block; width: 100%; height: 260px; border: 0; }
.map-caption { margin: 10px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.form-row { margin-bottom: 18px; }
label { display: block; font-weight: 600; color: var(--text); }
input, select, textarea {
  width: 100%; margin-top: 8px; background: white; border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 0.95rem; color: var(--text);
}
textarea { resize: vertical; }
.map-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; font-size: 0.85rem; line-height: 1.5; }
.two-col-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-status { margin-top: 16px; min-height: 24px; color: var(--primary-dark); font-weight: 700; }

.site-footer { background: #0d1c2a; color: #eef7ff; padding-top: 32px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; padding-bottom: 20px; }
.footer-brand { color: white; }
.site-footer .footer-brand strong,
.site-footer .footer-brand small {
  display: inline;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 700;
  color: #ffffff;
}
.site-footer h3 { margin-bottom: 14px; color: white; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; color: #dfeaf4; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12); padding: 18px 0 30px; color: #dfeaf4;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.footer-bottom p { margin: 0; }
.agency-credit { color: #dfeaf4; font-size: 0.9rem; transition: color 180ms ease; }
.agency-credit strong { color: white; }
.agency-credit:hover { color: #8ee5b5; }

/* P5 social icons (footer). Rendered by socialLinksTag() directly under the
 * company name. The row only exists when the owner has at least one active
 * link, so an empty footer is untouched. These rules are deliberately outside
 * any media query: the owner asked for the icons on desktop as well as phone,
 * so this is a content addition and not a change to the approved desktop
 * layout. Nothing that existed before is re-styled or re-flowed. */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.footer-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.footer-social-link svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.footer-social-link:hover { background: #8ee5b5; color: #0d1c2a; transform: translateY(-2px); }
.footer-social-link:focus-visible { outline: 2px solid #8ee5b5; outline-offset: 2px; }
/* Admin list thumbnail reuses the offer row shell, so only size the glyph. */
.offer-admin-thumb.social-admin-icon svg { width: 26px; height: 26px; fill: #0d1c2a; display: block; }
/* The social list overrides that to 22px and keeps the uploaded picture contained. */
.offer-admin-thumb.social-admin-icon .social-zoom-trigger svg { width: 22px; height: 22px; }
.whatsapp-float {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 70;
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%;
  perspective: 320px; -webkit-tap-highlight-color: transparent;
  opacity: 1; visibility: visible;
  transition: opacity 200ms ease, visibility 200ms ease;
}
.whatsapp-float.is-footer-hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px) scale(0.88);
}
.whatsapp-float-icon {
  width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, #6ff08c, #25d366 46%, #0f8a48 100%);
  box-shadow: 0 3px 0 #0b6b39, inset 0 2px 6px rgba(255,255,255,0.6), inset 0 -7px 12px rgba(0,0,0,0.26);
  transform: rotateX(14deg) rotateY(-10deg) translateZ(0);
  transition: transform 220ms cubic-bezier(.2,.8,.25,1), box-shadow 220ms ease;
}
.whatsapp-float svg {
  width: 30px; height: 30px; fill: #ffffff; transform: translateZ(16px);
}
.whatsapp-float:hover .whatsapp-float-icon,
.whatsapp-float:focus-visible .whatsapp-float-icon {
  transform: rotateX(6deg) rotateY(-4deg) translateY(-4px) scale(1.05);
  box-shadow: 0 3px 0 #0b6b39, inset 0 2px 6px rgba(255,255,255,0.6), inset 0 -7px 12px rgba(0,0,0,0.26);
}
.whatsapp-float:active .whatsapp-float-icon { transform: rotateX(20deg) rotateY(-14deg) translateY(2px) scale(0.96); }
.compare-tray[hidden] { display: none !important; }
body.compare-active .whatsapp-float {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px) scale(0.88);
}
.compare-tray {
  position: fixed; left: 50%; bottom: 22px; z-index: 80; width: min(760px, calc(100% - 48px));
  display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.65); border-radius: 10px; background: rgba(19,32,42,0.96); color: white;
  box-shadow: 0 18px 50px rgba(17,39,56,0.25); backdrop-filter: blur(16px);
  animation: compare-tray-in 240ms cubic-bezier(.2,.8,.25,1) both;
}
.compare-tray p { margin: 0; font-size: 0.86rem; }
.compare-tray > div { display: flex; align-items: center; gap: 8px; }
.compare-tray .button { min-height: 42px; padding: 0.6rem 0.9rem; border-radius: 7px; }
.compare-tray .button:disabled { background: #52616c; }
.compare-clear { min-height: 42px; padding: 0 10px; border: 0; background: transparent; color: white; font-weight: 800; cursor: pointer; }
.compare-dialog {
  width: min(960px, calc(100vw - 32px)); max-width: none; max-height: min(84dvh, 780px); margin: auto; padding: 24px;
  overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text);
  box-shadow: 0 28px 90px rgba(7,22,32,0.34);
}
.compare-dialog::backdrop { background: rgba(7,22,32,0.58); backdrop-filter: blur(5px); }
.compare-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.compare-dialog-heading h2 { margin: 10px 0 16px; font-size: 1.65rem; line-height: 1.15; }
.compare-dialog-heading .eyebrow { margin: 0; }
.compare-close { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--text); font-size: 1.4rem; cursor: pointer; }
.compare-message { margin: 0 0 12px; color: var(--muted); }
.compare-table-wrap { max-height: 60dvh; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 8px; }
.compare-table-wrap table { width: max-content; min-width: 100%; border-collapse: collapse; }
.compare-table-wrap th, .compare-table-wrap td { min-width: 160px; max-width: 260px; padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.compare-table-wrap thead th { position: sticky; top: 0; z-index: 1; background: #f8fafc; }
.compare-table-wrap tbody th { position: sticky; left: 0; background: white; }
.compare-table-wrap tbody tr:nth-child(even) td { background: #f8fbfa; }
@keyframes compare-tray-in { from { opacity: 0; transform: translate(-50%, 12px) scale(0.98); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.motion-ready .reveal-on-scroll { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 620ms ease, transform 620ms cubic-bezier(.2,.7,.25,1); }
.motion-ready .reveal-on-scroll.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.motion-ready .product-card:nth-child(3n + 2) { transition-delay: 70ms; }
.motion-ready .product-card:nth-child(3n) { transition-delay: 130ms; }
body.menu-open { overflow: hidden; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(14, 165, 233, 0.65); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .product-card:hover, .feature-card:hover { transform: translateY(-5px); box-shadow: 0 24px 54px rgba(17, 39, 56, 0.13); border-color: rgba(13,122,71,0.22); }
  .product-card:hover .product-image { transform: translateZ(18px) scale(1.015); }
  .button:hover { transform: translateY(-2px); }
}

.admin-body {
  display: flex; min-height: 100vh; background: #f4f7fa;
}
.sidebar {
  width: 260px; flex: 0 0 260px; background: #0f1d2a; color: #ecf5ff;
  padding: 24px 18px; display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto;
}
.admin-brand { padding-bottom: 20px; }
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sidebar-toggle {
  display: none; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.08); color: #dfeaf5; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px; padding: 9px 12px; font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.sidebar-toggle-bars, .sidebar-toggle-bars::before, .sidebar-toggle-bars::after {
  display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px;
}
.sidebar-toggle-bars { position: relative; }
.sidebar-toggle-bars::before, .sidebar-toggle-bars::after { content: ''; position: absolute; left: 0; }
.sidebar-toggle-bars::before { top: -5px; }
.sidebar-toggle-bars::after { top: 5px; }
.sidebar-nav {
  display: flex; flex-direction: column; gap: 4px; margin-top: 18px; flex: 1;
}
.sidebar-group {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #7d93a8; padding: 14px 14px 6px;
}
.sidebar-group:first-child { padding-top: 0; }
.sidebar-nav a {
  padding: 12px 14px; border-radius: 12px; color: #dfeaf5; font-weight: 600; transition: 0.2s ease;
}
.sidebar-nav a.active { background: rgba(255,255,255,0.14); color: #ffffff; }
.sidebar-nav a:hover { background: rgba(255,255,255,0.08); }
.sidebar-foot {
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 14px; margin-top: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.sidebar-foot-link {
  color: #c3d3e2; font-weight: 600; padding: 10px 14px; border-radius: 12px; transition: 0.2s ease;
}
.sidebar-foot-link:hover { background: rgba(255,255,255,0.08); color: #ffffff; }
.sidebar-logout { color: #ff9c9c; }
.sidebar-logout:hover { background: rgba(255,90,90,0.14); color: #ffd4d4; }
.admin-main { flex: 1; padding: 26px; min-width: 0; }
.topbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}
.topbar h1 { margin-bottom: 0; }
.product-image-field { display: grid; gap: 8px; align-content: start; }
.product-image-label { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.product-image-box {
  position: relative; width: 152px; height: 118px; padding: 6px; display: grid; place-items: center;
  background: #f8fafc; border: 2px dashed var(--line); border-radius: 10px; cursor: pointer; overflow: hidden;
}
.product-image-box:hover { border-color: var(--primary); }
.product-image-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-image-empty { color: var(--muted); font-size: 0.75rem; text-align: center; }
.product-image-edit {
  position: absolute; left: 0; right: 0; bottom: 0; background: rgba(15, 26, 36, 0.72); color: #fff;
  font-size: 0.68rem; font-weight: 700; text-align: center; padding: 3px 0;
}
.product-image-status { margin: 0; font-size: 0.74rem; color: var(--muted); }
.image-modal {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px;
  background: rgba(15, 26, 36, 0.72);
}
.image-modal[hidden] { display: none; }
.image-modal-card {
  position: relative; width: min(720px, 100%); max-height: 90vh; overflow: auto; padding: 20px;
  background: white; border-radius: 14px; display: grid; gap: 14px;
}
.image-modal-close {
  position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: #eef2f6; color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.image-modal-close:hover { background: #dde5ec; }
.image-modal-preview {
  display: grid; place-items: center; min-height: 220px; padding: 14px; background: #f8fafc;
  border: 1px solid var(--line); border-radius: 10px;
}
.image-modal-preview img { max-width: 100%; max-height: 56vh; object-fit: contain; }
.image-modal-hint { margin: 0; font-size: 0.8rem; color: var(--muted); }
.image-modal-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.image-modal-actions .button { flex: 1 1 200px; }
.image-modal-actions .button:disabled { opacity: 0.5; cursor: not-allowed; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.media-tile { border: 1px solid var(--line); border-radius: 12px; background: white; }
.media-tile-open {
  display: grid; gap: 6px; width: 100%; padding: 18px; border: 0; border-radius: 12px; background: white;
  text-align: left; cursor: pointer; color: var(--text); font: inherit;
}
.media-tile-open:hover { background: #f4f7fa; }
.media-tile-open:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.media-tile-open strong { font-size: 1.05rem; }
.media-tile-open small { color: var(--muted); font-size: 0.8rem; }
.media-tile-cue {
  justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px;
  background: rgba(15, 163, 94, 0.1); color: var(--primary); font-size: 0.72rem; font-weight: 700;
}

.topbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.product-search { position: relative; display: flex; align-items: center; gap: 10px; }
.product-search input {
  width: 320px; max-width: 100%; padding: 13px 16px; font-size: 1rem; color: var(--ink);
  background: white; border: 1px solid var(--line); border-radius: 12px;
}
.product-search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.product-search-count { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.product-search-empty { color: #a33; }
.search-hit { background: #ffe27a; color: inherit; border-radius: 3px; padding: 0 1px; }
.product-search-hint {
  display: block; margin-left: 14px; font-size: 0.78rem; color: var(--muted); font-weight: 600;
}
.product-search-hint[hidden] { display: none; }
.user-pill {
  background: white; border: 1px solid var(--line); border-radius: 999px; padding: 0.7rem 1rem; font-weight: 700;
}
.admin-stats { grid-template-columns: repeat(4, minmax(0,1fr)); }
.stat-card { padding: 20px; }
.stat-card span { display: block; color: var(--muted); margin-bottom: 8px; }
.stat-card strong { font-size: 2rem; }
.admin-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.panel { padding: 20px; }
.full-width { width: 100%; margin-top: 24px; }
.panel-header { margin-bottom: 12px; }
table {
  width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden;
}
th, td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top;
}
th { background: #f8fafc; color: var(--text); }
.admin-form { display: grid; gap: 18px; }
.two-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.table-scroll { width: 100%; overflow-x: auto; }
.admin-products-table { min-width: 820px; }
.product-admin-thumb { width: 112px; aspect-ratio: 1.35; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.admin-feature-list { max-width: 300px; padding-left: 18px; margin: 0; color: var(--muted); font-size: 0.8rem; }
.admin-feature-list li { margin-bottom: 4px; }
.product-admin-controls { min-width: 210px; display: grid; gap: 8px; }
.product-admin-controls label:not(.checkbox-inline) { font-size: 0.8rem; }
.product-admin-controls input[type="text"] { height: 40px; padding: 0 10px; border-radius: 8px; }
.product-admin-controls .button { width: 100%; padding: 0.6rem 0.9rem; }
.product-editor-list { display: grid; gap: 10px; }
.product-editor { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; }
.product-editor > summary {
  min-height: 86px; display: grid; grid-template-columns: 112px minmax(0,1fr) auto; align-items: center; gap: 16px;
  padding: 12px 16px; cursor: pointer; list-style: none;
}
.product-editor > summary::-webkit-details-marker { display: none; }
.product-editor > summary::after { content: "+"; grid-column: 3; grid-row: 1; color: var(--primary); font-size: 1.4rem; font-weight: 700; }
.product-editor[open] > summary::after { content: "−"; }
.product-editor-link {
  display: grid; grid-template-columns: 112px minmax(0,1fr) auto; align-items: center; gap: 16px;
  min-height: 86px; padding: 12px 16px; text-decoration: none; color: inherit;
}
.product-editor-link:hover { background: #f8fafc; }
.product-editor-chevron { color: var(--primary); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.product-editor-summary .product-search-hint { margin-left: 0; margin-top: 2px; }
.product-editor-summary { display: grid; gap: 3px; min-width: 0; }
.product-editor-summary strong { overflow-wrap: anywhere; }
.product-editor-summary small, .product-editor-public-price { color: var(--muted); font-size: 0.82rem; }
.product-editor-public-price { grid-column: 2; grid-row: 2; }
.product-admin-no-image { display: grid; place-items: center; color: var(--muted); font-size: 0.72rem; }
.product-edit-form { display: grid; gap: 16px; padding: 18px; border-top: 1px solid var(--line); }
.product-edit-form textarea { width: 100%; min-height: 44px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
.product-edit-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.product-edit-footer .button { min-width: 190px; }
.product-spec-details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.product-spec-details > summary { color: var(--primary-dark); font-size: 0.86rem; font-weight: 800; cursor: pointer; }
.product-spec-list { display: grid; gap: 0; margin: 10px 0 2px; }
.product-spec-list > div { display: grid; grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1.25fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.78rem; }
.product-spec-list dt { color: var(--muted); font-weight: 700; }
.product-spec-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.checkbox-inline { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.checkbox-stack { display: grid; gap: 12px; }
.checkbox-inline input { width: 18px; height: 18px; margin-top: 0; }
.alert { padding: 12px 16px; border-radius: 12px; font-weight: 600; margin-bottom: 18px; }
.alert-danger { background: rgba(216,72,72,0.1); color: #a13030; }
.muted { color: var(--muted); }
.empty-state { padding: 42px; text-align: center; }

.admin-shell {
  min-height: 100vh; width: 100%; display: grid; place-items: center; background: linear-gradient(135deg, rgba(13,122,71,0.08), rgba(249,199,79,0.08));
}
.login-card {
  width: min(480px, calc(100% - 32px)); padding: 30px; background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow);
}
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.login-card h1 { margin: 0 0 8px; }
.login-card form { display: grid; gap: 14px; margin-top: 18px; }

/* Google Sheets connection panel — admin only, no public page uses these classes */
.sheet-panel { display: grid; gap: 14px; }
.sheet-panel-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.sheet-panel-head h2 { margin: 2px 0 0; font-size: 1.3rem; }
.sheet-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.sheet-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sheet-status-on { background: rgba(13,122,71,0.1); color: var(--primary); }
.sheet-status-off { background: rgba(90,103,112,0.12); color: #5a6770; }
.sheet-intro { margin: 0; font-size: 0.88rem; line-height: 1.65; color: var(--muted); max-width: 70ch; }
.sheet-form { display: grid; gap: 12px; }
.sheet-url-label { display: grid; gap: 6px; font-size: 0.8rem; font-weight: 600; }
.sheet-url-label input {
  min-height: 46px; padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 0.85rem; background: white; color: var(--text);
}
.sheet-url-label input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sheet-notice { padding: 0.85rem 1rem; border-radius: 12px; font-size: 0.85rem; font-weight: 600; }
.sheet-notice-ok { background: rgba(13,122,71,0.1); color: var(--primary-dark); border: 1px solid rgba(13,122,71,0.22); }
.sheet-notice-bad { background: rgba(201,68,58,0.09); color: #a3352c; border: 1px solid rgba(201,68,58,0.24); }
.sheet-guide { border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem 1rem; background: #fbfcfd; }
.sheet-guide summary { cursor: pointer; font-weight: 700; font-size: 0.87rem; }
.sheet-guide ol { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: 0.85rem; line-height: 1.6; }
.sheet-guide a { color: var(--primary); }
.sheet-guide code {
  background: rgba(13,122,71,0.09); color: var(--primary-dark); padding: 1px 5px;
  border-radius: 4px; font-size: 0.82em; word-break: break-all;
}
.sheet-code {
  margin: 0; padding: 0.9rem; background: #13202a; color: #e6edf3; border-radius: 10px;
  overflow-x: auto; font-size: 0.78rem; line-height: 1.55;
}
.sheet-code + ol { margin-top: 12px; }
.sheet-guide-note { margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); line-height: 1.6; }

@media (max-width: 900px) {
  .hero-grid, .split-layout, .two-col, .contact-grid, .three-col, .four-col, .admin-panels, .two-fields, .footer-grid, .stats-grid { grid-template-columns: 1fr; }
  .cta-wrap, .product-toolbar, .topbar { flex-direction: column; align-items: flex-start; }
  .product-toolbar input { flex: 0 0 52px; width: 100%; height: 52px; border-radius: 12px; }
  .admin-body { flex-direction: column; }
  /* Admin sidebar becomes a compact sticky top bar; the links live inside a
     collapsible menu so they stop pushing the page content below the fold. */
  .sidebar {
    width: 100%; flex: 0 0 auto; position: sticky; top: 0; z-index: 60;
    height: auto; max-height: 100vh; padding: 12px 14px;
    background: #0f1d2a; color: #ecf5ff;
  }
  .sidebar-head { padding-bottom: 0; }
  .sidebar-head .admin-brand { padding-bottom: 0; display: flex; align-items: center; gap: 10px; }
  .sidebar-head .admin-brand strong { font-size: 0.95rem; }
  .sidebar-head .admin-brand small { display: block; font-size: 0.65rem; color: #7d93a8; text-transform: uppercase; letter-spacing: 0.06em; }
  .sidebar-toggle { display: inline-flex; }
  .sidebar-nav { display: none; margin-top: 12px; }
  .sidebar-open .sidebar-nav { display: flex; }
  .sidebar-foot { display: none; }
  .sidebar-open .sidebar-foot { display: flex; }
  .sidebar-group { padding: 12px 14px 4px; }
  .admin-main { padding: 16px 12px; }
  .topbar { padding-bottom: 12px; margin-bottom: 16px; }
  .topbar h1 { font-size: 1.25rem; }
  .admin-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat-card { padding: 16px; }
  .stat-card strong { font-size: 1.5rem; }
  .admin-panels { gap: 14px; margin-top: 16px; }
  .panel { padding: 16px; }
  .full-width { margin-top: 16px; }
  .panel-header { margin-bottom: 10px; }
  .product-editor > summary { grid-template-columns: 76px minmax(0,1fr) 18px; gap: 10px; padding: 10px; }
  .product-editor-link { grid-template-columns: 76px minmax(0,1fr) 18px; gap: 10px; padding: 10px; }
  .product-editor .product-admin-thumb { width: 76px; }
  .product-editor-public-price { font-size: 0.72rem; }
  .product-edit-form { padding: 14px 10px; }
  .product-edit-footer { align-items: stretch; flex-direction: column; }
  .product-edit-footer .button { width: 100%; }
  .product-spec-list > div { grid-template-columns: minmax(94px, 0.72fr) minmax(0, 1.28fr); gap: 8px; font-size: 0.76rem; }
  th, td { padding: 10px 12px; font-size: 0.85rem; }
  .sidebar-nav a { padding: 10px 12px; font-size: 0.85rem; }
  .sidebar-group { font-size: 0.62rem; padding: 10px 12px 4px; }
  .sidebar-foot-link { font-size: 0.85rem; padding: 8px 12px; }
  .stat-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
  .panel { box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
  .admin-form input, .admin-form select, .admin-form textarea { height: 44px; font-size: 0.85rem; }
  .admin-form textarea { min-height: 80px; }
  .button { padding: 0.7rem 1rem; font-size: 0.82rem; }
}

/* ------------------------------------------------------------------ offers --
 * Popup markup is hidden by default and only revealed inside the phone media
 * query further down. This base rule MUST stay above that media query: a media
 * query adds no specificity, so a later `display: none` here would beat the
 * `display: block` inside it and the popup would never appear at all. Without
 * it the markup would also sit unstyled in the desktop document flow and shift
 * the homepage. Nothing that already existed on a public page is affected.
 */
.offer-popup-wrap { display: none; }

@media (max-width: 560px) {
  .container { width: calc(100% - 28px); }
  body { font-size: 15px; }
  .admin-body { padding-bottom: 0; }
  .nav-wrap { min-height: 68px; flex-direction: row; align-items: center; gap: 10px; }
  .brand { gap: 9px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand strong { font-size: 0.94rem; }
  .brand small { font-size: 0.66rem; }
  .nav-cta { display: none; }
  .language-switch { margin-left: auto; }
  .language-switch button { min-width: 31px; min-height: 34px; padding: 0 5px; }
  .menu-toggle {
    width: 46px; height: 46px; display: grid; place-content: center; gap: 6px;
    flex: 0 0 46px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer;
  }
  .menu-toggle span { width: 19px; height: 2px; display: block; border-radius: 2px; background: var(--text); transition: transform 180ms ease; }
  body.menu-open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
  body.menu-open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-header .main-nav {
    position: absolute; top: calc(100% + 7px); left: 0; right: 0; z-index: 45;
    display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 14px;
    background: rgba(255,255,255,0.98); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 18px 42px rgba(17,39,56,0.16); opacity: 0; visibility: hidden;
    transform: translateY(-8px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }
  body.menu-open .site-header .main-nav { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-header .main-nav a { min-height: 46px; display: flex; align-items: center; border-bottom: 1px solid rgba(223,233,242,0.8); }
  .site-header .main-nav a::after { display: none; }
  .site-header .main-nav .mobile-nav-cta {
    display: flex; min-height: 48px; justify-content: center; margin: 8px 0 3px; border: 0;
    border-radius: 7px; background: var(--primary); color: white; font-weight: 800;
  }
  .hero { padding: 30px 0 28px; background: #faf9f6; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .eyebrow { font-size: 0.66rem; }
  .hero-copy .eyebrow {
    font-size: 0.63rem; padding: 0.34rem 0.6rem; letter-spacing: 0.14em; border-radius: 6px;
    background: rgba(13,122,71,0.08); color: var(--primary-dark);
  }
  .hero-copy h1 { margin: 12px 0 10px; font-size: clamp(2.6rem, 12.4vw, 3.3rem); line-height: 1.04; letter-spacing: -0.025em; font-weight: 800; }
  .hero-copy p { margin: 0; font-size: 0.95rem; line-height: 1.5; max-width: 34ch; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .hero-actions .button { min-height: 50px; width: 100%; padding: 0.75rem 0.5rem; font-size: 0.9rem; border-radius: 12px; letter-spacing: 0.01em; }
  .hero-meta { display: none; }
  .hero-meta li { display: flex; align-items: center; gap: 6px; }
  .hero-meta li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); opacity: 0.55; }
  .hero-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .hero-illustration { margin: 0 0 10px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
  .hero-video { margin: 0 0 10px; border-radius: 14px; aspect-ratio: 16/10; }
  .hero-video-wrap { position: relative; }
  /* 44px is the comfortable minimum tap target on a phone. */
  .video-sound-toggle { right: 10px; bottom: 18px; width: 44px; height: 44px; }
  .video-sound-icon { width: 22px; height: 22px; }
  .hero-card .card-details { transform: none; }
  .hero-card .card-details h3 { font-size: 1.02rem; margin: 0 0 4px; }
  .hero-card .price-row { justify-content: flex-start; gap: 8px; }
  .hero-card .price-row strong { font-size: 0.86rem; font-weight: 700; color: var(--primary-dark); }
  .section-heading > p { margin: 8px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
  .reviews-section { padding-top: 26px; }
  .review-grid {
    display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px;
  }
  .review-card {
    display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 16px;
    border: 1px solid var(--line); background: white; box-shadow: 0 10px 28px rgba(17,39,56,0.03);
  }
  .review-photo {
    width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%; object-fit: cover;
    background: var(--line); border: 1px solid var(--line);
  }
  .review-body { min-width: 0; flex: 1 1 auto; }
  .review-quote { margin: 0 0 10px; color: var(--text); font-size: 0.94rem; line-height: 1.6; }
  .review-author { display: flex; flex-direction: column; gap: 3px; }
  .review-author strong { font-size: 0.92rem; }
  .review-author span { font-size: 0.75rem; color: var(--muted); }
  .map-box { margin-top: 18px; border-radius: 14px; }
  .map-box iframe { height: 220px; }
  .hero-copy .eyebrow { animation: hero-rise 520ms cubic-bezier(.2,.75,.25,1) both; }
  .hero-copy h1 { animation: hero-rise 520ms cubic-bezier(.2,.75,.25,1) 60ms both; }
  .hero-copy p { animation: hero-rise 520ms cubic-bezier(.2,.75,.25,1) 120ms both; }
  .hero-actions { animation: hero-rise 520ms cubic-bezier(.2,.75,.25,1) 180ms both; }
  @keyframes hero-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  .stats-bar { padding-bottom: 18px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .stats-grid > div { padding: 13px 9px; border-radius: 10px; }
  .stats-grid strong { font-size: 1.08rem; }
  .stats-grid span { font-size: 0.77rem; }
  .section { padding: 48px 0; }
  .section-heading { margin-bottom: 20px; }
  .section-heading h2, .split-layout h2, .contact-panel h2 { font-size: 1.75rem; }
  .product-grid.four-col { grid-template-columns: minmax(0,1fr); }
  .home-product-grid {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr);
    overflow-x: visible; gap: 12px;
  }
  .home-product-grid .product-card { scroll-snap-align: none; padding: 15px; }
  .home-product-grid .product-card:nth-child(n+5) { display: none; }
  .home-product-grid .product-image { aspect-ratio: 16/10; margin-bottom: 10px; }
  .home-product-grid .product-card p { display: none; }
  .home-product-grid .product-features li:nth-child(n+4) { display: none; }
  .home-lineup-more { display: block; margin-top: 16px; }
  .home-lineup-more .button { display: flex; width: 100%; min-height: 50px; border-radius: 12px; font-size: 0.92rem; }
  .home-lineup-more-btn {
    gap: 10px;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
    border: 1px solid rgba(13,122,71,0.26);
    color: var(--primary-dark);
    box-shadow: 0 10px 24px rgba(13,122,71,0.09);
    position: relative;
    overflow: hidden;
  }
  .home-lineup-more-btn::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  }
  .home-lineup-more-btn > span:first-child { font-weight: 700; letter-spacing: -0.01em; }
  .home-lineup-more-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(13,122,71,0.1);
    border: 1px solid rgba(13,122,71,0.16);
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .home-lineup-more-btn:active { transform: translateY(1px); box-shadow: 0 6px 14px rgba(13,122,71,0.08); }
  .product-image { aspect-ratio: 1.2; margin-bottom: 12px; }
  .product-toolbar { align-items: stretch; gap: 12px; }
  .product-toolbar input { flex: 0 0 48px; width: 100%; height: 48px; min-height: 48px; border-radius: 12px; font-size: 16px; }
  .filter-chips { width: 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; overscroll-behavior-x: contain; }
  .chip { min-height: 44px; flex: 0 0 auto; padding: 0.6rem 0.9rem; white-space: nowrap; }
  .product-card, .feature-card { padding: 18px; border-radius: 14px; }
  .product-actions { grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
  .product-actions .button { padding: 0.62rem 0.65rem; font-size: 0.74rem; }
  .product-features { font-size: 0.84rem; }
  .feature-grid.four-col { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .feature-grid .feature-card { padding: 15px; }
  .feature-card h3 { font-size: 0.96rem; }
  .feature-card p { font-size: 0.82rem; }
  .two-col-form { grid-template-columns: 1fr; gap: 0; }
  /* About page: stronger story layout on mobile only. */
  .about-story .two-col { gap: 16px; }
  .about-story-copy h2 { font-size: 1.55rem; margin: 0 0 10px; }
  .about-story-copy p {
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0 0 12px;
    color: var(--muted);
  }
  .about-story-copy p:first-of-type {
    background: #ffffff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary);
    border-radius: 12px;
    padding: 14px 15px;
    color: var(--ink);
  }
  .about-story-panel { padding: 14px; }
  .about-story-panel .showroom-image { border-radius: 12px; margin-bottom: 14px; }
  .about-story-panel .mini-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
  }
  .about-story-panel .mini-stat:first-of-type { border-top: 0; }
  .about-story-panel .mini-stat strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary-dark);
    background: rgba(13, 122, 71, 0.09);
    border-radius: 999px;
    padding: 6px 11px;
    white-space: nowrap;
  }
  .about-story-panel .mini-stat span { font-size: 0.86rem; line-height: 1.4; }
  .contact-panel, .contact-form { padding: 18px; border-radius: 14px; }
  input, select, textarea { font-size: 16px; }
  .cta-band { padding: 38px 0; }
  .cta-wrap { gap: 12px; align-items: stretch; }
  .footer-grid { gap: 20px; }
  /* P5: 44px is the comfortable minimum tap target on a phone. */
  .footer-social { margin-top: 12px; }
  .footer-social-link { width: 44px; height: 44px; }
  .footer-social-link svg { width: 22px; height: 22px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 15px 0 18px; font-size: 0.78rem; }
  .agency-credit { font-size: 0.8rem; }
  .whatsapp-float { width: 54px; height: 54px; right: 14px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
  .compare-tray { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; align-items: center; flex-direction: row; gap: 10px; padding: 10px 12px; transform: none; z-index: 80; }
  .compare-tray > div { justify-content: flex-end; flex-shrink: 0; margin-left: auto; }
  .compare-tray .button { flex: 1; }
  .compare-tray .button-compare { padding-left: 0.6rem; padding-right: 0.6rem; }
  @keyframes compare-tray-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
  .compare-dialog { padding: 16px; }
  .compare-dialog-heading h2 { font-size: 1.35rem; }
  .compare-table-wrap { max-height: 62dvh; }
  .compare-table-wrap th, .compare-table-wrap td { min-width: 136px; padding: 9px; font-size: 0.8rem; }
  .image-library { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .image-library-thumb img { height: 170px; }
  .image-library-actions .button { min-height: 44px; font-size: 0.84rem; }
  .image-library-assign .button { min-height: 44px; }
  .image-upload-form .button, .image-hero-form .button { min-height: 50px; }
  .hero-image-form { display: flex; flex-direction: column; gap: 12px; }
  .hero-image-preview { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
  .hero-image-preview img { width: 100%; max-height: 220px; object-fit: contain; }
  .admin-main { padding: 16px 12px; }
  .sidebar { padding: 15px 12px; }
  .admin-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-editor > summary { grid-template-columns: 76px minmax(0,1fr) 18px; gap: 10px; padding: 10px; }
  .product-editor-link { grid-template-columns: 76px minmax(0,1fr) 18px; gap: 10px; padding: 10px; }
  .product-editor .product-admin-thumb { width: 76px; }
  .product-editor-public-price { font-size: 0.72rem; }
  .product-edit-form { padding: 14px 10px; }
  .product-edit-footer { align-items: stretch; flex-direction: column; }
  .product-edit-footer .button { width: 100%; }
  .product-spec-list > div { grid-template-columns: minmax(94px, 0.72fr) minmax(0, 1.28fr); gap: 8px; font-size: 0.76rem; }

  /* Offer popup — phones only, revealed here and nowhere else */
  body.offer-open { overflow: hidden; }
  .offer-popup-wrap { display: block; position: fixed; inset: 0; z-index: 120; }
  .offer-popup {
    position: fixed; inset: 0; display: grid; place-items: center; padding: 18px;
    background: rgba(19, 32, 42, 0.62); overflow-y: auto;
  }
  .offer-popup[hidden] { display: none; }
  .offer-popup-card {
    position: relative; width: min(420px, 100%); background: white; border-radius: 20px;
    padding: 22px 18px 20px; box-shadow: 0 24px 60px rgba(19,32,42,0.28);
    display: grid; gap: 12px; text-align: center;
    animation: offer-pop 240ms ease-out both;
  }
  .offer-popup-close {
    position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--line); background: white; color: var(--text);
    font-size: 0.85rem; line-height: 1; cursor: pointer;
  }
  .offer-popup-image { width: 100%; max-height: 190px; object-fit: cover; border-radius: 14px; }
  .offer-popup-badge {
    justify-self: center; padding: 5px 13px; border-radius: 999px; font-size: 0.74rem; font-weight: 800;
    background: rgba(13,122,71,0.1); color: var(--primary-dark);
  }
  .offer-popup-title { margin: 0; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }
  .offer-popup-message { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
  .offer-countdown {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px;
    padding: 12px 8px; border-radius: 14px; background: #f6f7f8;
  }
  .offer-countdown span { display: grid; gap: 2px; font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .offer-countdown strong { font-size: 1.15rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
  .offer-popup-cta { width: 100%; min-height: 50px; font-size: 0.95rem; border-radius: 12px; }
}

@keyframes offer-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ offers --
 * The admin half of the offers work. The public popup's base rule lives above
 * the phone media query on purpose; see the note there.
 */

/* Admin: the Offers panel and its list */
.offer-panel { scroll-margin-top: 20px; }
.offer-panel h4 { margin: 0 0 4px; font-size: 1rem; }
.offer-form { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.offer-form label { display: grid; gap: 6px; font-size: 0.8rem; font-weight: 600; }
.offer-form input[type="text"],
.offer-form input[type="number"],
.offer-form input[type="datetime-local"],
.offer-form select,
.offer-form textarea {
  min-height: 44px; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 0.85rem; background: white; color: var(--text); width: 100%;
}
.offer-form textarea { min-height: 84px; resize: vertical; }
.offer-form input:focus, .offer-form select:focus, .offer-form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.offer-form-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer-toggle { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 9px !important; }
.offer-toggle input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--primary); }
.required-note { font-weight: 500; color: var(--muted); font-size: 0.74rem; }
.offer-admin-list { display: grid; gap: 10px; margin-top: 14px; }
.offer-admin-row {
  display: grid; gap: 12px; align-items: center; padding: 12px;
  grid-template-columns: 68px minmax(0, 1fr) auto; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfd;
}
.offer-admin-thumb { width: 68px; height: 52px; border-radius: 9px; overflow: hidden; background: #eef1f3; display: grid; place-items: center; }
.offer-admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.offer-admin-no-image { font-size: 0.62rem; color: var(--muted); text-align: center; padding: 0 4px; }
.offer-admin-info { display: grid; gap: 3px; min-width: 0; }
.offer-admin-info strong { font-size: 0.9rem; overflow-wrap: anywhere; }
.offer-admin-info small { color: var(--muted); font-size: 0.74rem; }
.offer-admin-badge {
  justify-self: start; padding: 2px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 700;
  background: rgba(13,122,71,0.1); color: var(--primary-dark);
}
.offer-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.offer-admin-actions .button { min-height: 40px; padding: 0.5rem 0.8rem; font-size: 0.78rem; }

/* Social links admin. The icon is deliberately small in the list and only opens
   large on tap, so a row with a long address stays readable. */
.social-icon-field {
  display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line);
  border-radius: 12px; background: #f8fafc;
}
.social-icon-head { display: flex; align-items: center; gap: 12px; }
.social-icon-head > div { display: grid; gap: 2px; min-width: 0; }
.social-icon-head strong { font-size: 0.9rem; }
.social-icon-head small { color: var(--muted); font-size: 0.76rem; }
.social-icon-preview {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 6px; flex: 0 0 46px;
  border: 1px solid var(--line); border-radius: 12px; background: white; overflow: hidden;
}
.social-icon-preview svg { width: 100%; height: 100%; fill: #0d1c2a; display: block; }
.social-icon-preview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.social-icon-clear { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 9px !important; }

.social-count {
  display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  background: rgba(13, 122, 71, 0.1); color: var(--primary-dark);
  font-size: 0.7rem; font-weight: 700; vertical-align: middle;
}
.social-link-url { overflow-wrap: anywhere; }

/* The list thumbnail is a button so it is reachable by keyboard and has a real
   tap target, but it looks like the plain thumbnail it replaces. */
.offer-admin-thumb.social-admin-icon { padding: 0; }
.social-zoom-trigger {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 0;
  border: 0; background: transparent; cursor: zoom-in; color: inherit;
}
.social-zoom-trigger:hover { background: #e3e9ef; }
.social-zoom-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.social-zoom-trigger svg { width: 22px; height: 22px; fill: #0d1c2a; display: block; }
.social-zoom-trigger img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.social-zoom-card { width: min(340px, 100%); justify-items: center; }
.social-zoom-large {
  display: grid; place-items: center; width: 180px; height: 180px; padding: 18px;
  border: 1px solid var(--line); border-radius: 14px; background: #f8fafc;
}
/* The modal lives inside .offer-admin-thumb.social-admin-icon, whose 26px rule
   has two classes and would otherwise outrank a single-class selector here. */
.social-zoom-card .social-zoom-large svg { width: 100%; height: 100%; fill: #0d1c2a; display: block; }
.social-zoom-card .social-zoom-large img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* An uploaded icon sits inside the existing 40px footer circle, so it is padded
   and contained rather than cropped like the product thumbnails. */
.footer-social-link img { width: 22px; height: 22px; object-fit: contain; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .motion-ready .reveal-on-scroll { opacity: 1; transform: none; }
}

/* Logout confirmation. Markup lives in the shared admin sidebar, so it is on
   every admin page and only needs one set of rules. */
.button-danger { background: #c0392b; color: white; }
.button-danger:hover { background: #a5342a; }

.logout-confirm {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px;
  background: rgba(9, 20, 30, 0.55);
}
.logout-confirm[hidden] { display: none; }
.logout-confirm-card {
  width: min(420px, 100%); background: white; border: 1px solid var(--line);
  border-radius: 18px; padding: 22px; box-shadow: 0 30px 70px rgba(9, 20, 30, 0.3);
}
.logout-confirm-card h3 { margin: 0 0 6px; font-size: 1.1rem; }
.logout-confirm-card p { margin: 0 0 18px; font-size: 0.9rem; }
.logout-confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.logout-confirm-actions .button { flex: 1 1 150px; text-align: center; }

/* Show/hide eye on password fields. assets/js/password-toggle.js wraps each
   password input in .pw-wrap and adds the button, so the same two rules cover
   the login page and the Security page. */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 46px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  background: transparent; border: 0; border-radius: 10px; color: #6b7a8c;
  cursor: pointer; transition: 0.15s ease;
}
.pw-eye:hover { background: #e8eef4; color: #0d1c2a; }
.pw-eye:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pw-eye .pw-eye-slash { display: none; }
.pw-eye.is-on { color: var(--primary); }
.pw-eye.is-on .pw-eye-open { display: none; }
.pw-eye.is-on .pw-eye-slash { display: block; }

/* Security page. */
.security-form { display: grid; gap: 14px; max-width: 520px; }
.security-form input { width: 100%; }
.security-block {
  display: grid; gap: 12px; margin-top: 4px; padding: 16px;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 14px;
}
.security-block-title { margin: 0; font-weight: 700; }
.security-block > .muted { margin: -8px 0 0; font-size: 0.85rem; }
.security-current {
  padding: 14px 16px; background: #fffbeb; border: 1px solid #f4d58d; border-radius: 14px;
}
.security-hint { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--muted); }
.security-facts { display: grid; gap: 10px; margin: 0 0 14px; }
.security-facts > div { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.security-facts dt { font-weight: 700; min-width: 130px; color: var(--muted); }
.security-facts dd { margin: 0; }