/* ============================================================
   PADDY'S JEWELLERS - Main Stylesheet
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --primary:        #077C40;
  --primary-dark:   #055C2F;
  --primary-light:  #2FA968;
  --secondary:      #1A1A1A;
  --footer-bg:      #0D1F14;
  --font-heading:   'Playfair Display', Georgia, serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --text-dark:      #1A1A1A;
  --text-muted:     #666680;
  --bg-light:       #FAF8FB;
  --border:         #E2E8E4;
  --shadow-sm:      0 2px 8px rgba(0,0,0,.07);
  --shadow-md:      0 4px 20px rgba(0,0,0,.1);
  --shadow-lg:      0 8px 40px rgba(0,0,0,.14);
  --radius:         8px;
  --transition:     .25s ease;
}

/* ── Reset + Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font-body); color: var(--text-dark); background: #fff; line-height: 1.65; margin: 0; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }
.fw-600 { font-weight: 600; }

/* ── Top Bar ───────────────────────────────────────────────── */
.top-bar {
  background: var(--secondary);
  color: rgba(255,255,255,.75);
  padding: 6px 0;
  font-size: .78rem;
}
.top-bar a { color: rgba(255,255,255,.75); }
.top-bar a:hover { color: #fff; }

/* ── Navbar ────────────────────────────────────────────────── */
.site-header {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  position: sticky;
  top: 0;
  z-index: 90;
}
.navbar { padding: 12px 0; }
.navbar-brand img { height: 50px; width: auto; }
.nav-link {
  color: var(--text-dark) !important;
  font-weight: 500;
  font-size: .9rem;
  padding: 6px 14px !important;
  transition: color var(--transition);
  position: relative;
}
.nav-link::after {
  content:'';
  position:absolute;
  bottom:0;left:50%;right:50%;
  height:2px;
  background:var(--primary);
  transition:left var(--transition),right var(--transition);
}
.nav-link:hover,
.nav-link.active { color: var(--primary) !important; }
.nav-link:hover::after { left:14px;right:14px; }
.dropdown-menu { border:none; box-shadow:var(--shadow-md); border-radius:var(--radius); padding:8px; }
.dropdown-item { font-size:.88rem; border-radius:5px; padding:7px 14px; }
.dropdown-item:hover { background:var(--bg-light); color:var(--primary); }
.navbar-icons { gap:8px; }
.navbar-icons a {
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--text-dark);font-size:1rem;position:relative;
  transition:background var(--transition),color var(--transition);
}
.navbar-icons a:hover { background:var(--bg-light);color:var(--primary); }
.badge-count {
  position:absolute;top:-4px;right:-4px;
  background:var(--primary);color:#fff;
  width:17px;height:17px;border-radius:50%;
  font-size:.6rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* ── Hero Slider ───────────────────────────────────────────── */
.hero-section,
.carousel-item .hero-section {
  min-height: 70vh;
  background: linear-gradient(135deg, var(--footer-bg) 0%, var(--secondary) 100%);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-overlay {
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(13,31,20,.78),rgba(26,26,26,.55));
  z-index:1;
}
.carousel-item .hero-section { min-height: 70vh; }
.hero-content { position:relative;z-index:2;color:#fff; }
.hero-content h1 {
  font-family:var(--font-heading);
  font-size:clamp(2rem,5vw,3.5rem);
  line-height:1.15;
  color:#fff;
  margin-bottom:16px;
}
.hero-content p { font-size:1.05rem;opacity:.88;max-width:540px;margin:0 auto 24px; }
.hero-slider { position:relative; }
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next {
  width:48px;height:48px;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.15);border-radius:50%;
  backdrop-filter:blur(4px);
}
.hero-slider .carousel-indicators [data-bs-slide-to] {
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.5);border:none;
}
.hero-slider .carousel-indicators .active { background:var(--primary-light); }

/* ── Section Titles ────────────────────────────────────────── */
.section-title {
  font-family:var(--font-heading);
  font-size:clamp(1.5rem,3vw,2.2rem);
  color:var(--text-dark);
  margin-bottom:8px;
}
.section-divider {
  width:60px;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--primary-light));
  border-radius:2px;
  margin:0 auto 16px;
}
.section-divider.left { margin-left:0; }

/* ── Category Circles ──────────────────────────────────────── */
.category-circle {
  width:90px;height:90px;border-radius:50%;
  background:var(--bg-light);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.category-circle img { width:100%;height:100%;object-fit:cover; }
.category-circle-link:hover .category-circle {
  border-color:var(--primary);
  transform:translateY(-4px);
  box-shadow:0 6px 20px rgba(7,124,64,.2);
}
.category-circle-link:hover p { color:var(--primary); }

/* ── Product Cards ─────────────────────────────────────────── */
.product-card {
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform var(--transition),box-shadow var(--transition);
  position:relative;
}
.product-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
}
.card-img-wrapper {
  aspect-ratio:1;overflow:hidden;background:var(--bg-light);
}
.card-img-wrapper img {
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.product-card:hover .card-img-wrapper img { transform:scale(1.06); }
.card-body { padding:14px; }
.product-name { font-size:.88rem;font-weight:600;color:var(--text-dark);line-height:1.35;margin-bottom:4px;min-height:2.5em; }
.product-price { font-family:var(--font-heading);font-size:1rem;color:var(--primary);font-weight:700; }
.product-old-price { font-size:.8rem;color:var(--text-muted);text-decoration:line-through; }
.card-actions {
  position:absolute;top:10px;right:10px;
  display:flex;flex-direction:column;gap:6px;
  opacity:0;transition:opacity var(--transition);
  z-index:2;
}
.product-card:hover .card-actions { opacity:1; }
.action-btn {
  width:34px;height:34px;border-radius:50%;
  background:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.88rem;color:var(--text-dark);
  box-shadow:var(--shadow-sm);
  transition:background var(--transition),color var(--transition);
}
.action-btn:hover { background:var(--primary);color:#fff; }
.badge-sale,.badge-new {
  position:absolute;top:10px;left:10px;z-index:2;
  font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:3px;
}
.badge-sale { background:var(--primary);color:#fff; }
.badge-new  { background:var(--secondary);color:#fff; }
.star-rating { color:#f59e0b;font-size:.78rem; }

/* ── Service Cards ─────────────────────────────────────────── */
.service-card {
  background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition),box-shadow var(--transition);
  border-top:3px solid transparent;
}
.service-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-top-color:var(--primary);
}
.service-icon {
  width:68px;height:68px;border-radius:50%;
  background:linear-gradient(135deg,var(--bg-light),#fce4ec);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:var(--primary);
  transition:background var(--transition);
}
.service-card:hover .service-icon { background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff; }
.service-title { font-family:var(--font-heading);font-size:1.05rem;color:var(--text-dark);margin-bottom:8px; }

/* ── Trust Badges ──────────────────────────────────────────── */
.trust-badges { background:var(--bg-light);border-top:1px solid var(--border); }
.trust-badge { padding:16px 12px; }
.trust-badge i { font-size:1.8rem;color:var(--primary);display:block;margin-bottom:10px; }
.trust-badge h6 { font-size:.88rem;font-weight:700;margin-bottom:4px;color:var(--text-dark); }
.trust-badge p { font-size:.78rem;color:var(--text-muted);margin:0; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  background:var(--primary);border-color:var(--primary);
  border-radius:5px;font-weight:600;letter-spacing:.3px;
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition);
}
.btn-primary:hover,
.btn-primary:focus {
  background:var(--primary-dark);border-color:var(--primary-dark);
  transform:translateY(-1px);box-shadow:0 4px 14px rgba(7,124,64,.35);
}
.btn-outline-primary {
  color:var(--primary);border-color:var(--primary);border-radius:5px;font-weight:600;
}
.btn-outline-primary:hover { background:var(--primary);border-color:var(--primary);color:#fff; }

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  background:var(--footer-bg);
  color:rgba(255,255,255,.6);
  padding:64px 0 0;
}
.footer-brand { margin-bottom:8px; }
.footer-col h6 {
  color:#fff;font-size:.88rem;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;
  margin-bottom:16px;
}
.footer-col ul { list-style:none;padding:0;margin:0; }
.footer-col ul li { margin-bottom:8px; }
.footer-col ul li a { color:rgba(255,255,255,.55);font-size:.85rem;transition:color var(--transition); }
.footer-col ul li a:hover { color:var(--primary-light); }
.social-icons { display:flex;gap:10px; }
.social-icons a {
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.6);font-size:.88rem;
  transition:background var(--transition),color var(--transition);
}
.social-icons a:hover { background:var(--primary);color:#fff; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  padding:20px 0;
  margin-top:48px;
  font-size:.82rem;
  color:rgba(255,255,255,.4);
}

/* ── Cookie Consent ────────────────────────────────────────── */
.cookie-banner {
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(13,31,20,.97);
  color:rgba(255,255,255,.85);
  padding:14px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  z-index:9990;
  border-top:2px solid var(--primary);
}

/* ── WhatsApp Float ────────────────────────────────────────── */
.whatsapp-float {
  position:fixed;bottom:24px;right:24px;z-index:500;
  width:52px;height:52px;border-radius:50%;
  background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;box-shadow:0 4px 16px rgba(37,211,102,.4);
  transition:transform var(--transition),opacity .4s;
}
.whatsapp-float:hover { color:#fff;transform:scale(1.08); }

/* ── Cart & Checkout ───────────────────────────────────────── */
.cart-table th { font-size:.82rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted); }
.qty-input { width:60px;text-align:center;border:1px solid var(--border);border-radius:5px;padding:5px; }
.cart-summary { background:var(--bg-light);border-radius:var(--radius);padding:24px; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color:var(--primary-light);
  box-shadow:0 0 0 .25rem rgba(7,124,64,.1);
}

/* ── Flash Messages ────────────────────────────────────────── */
.flash-success { background:#e8f5e9;color:#2e7d32;border-left:4px solid #43a047;padding:12px 16px;border-radius:5px;margin-bottom:12px; }
.flash-error   { background:#fce4ec;color:#880e4f;border-left:4px solid var(--primary);padding:12px 16px;border-radius:5px;margin-bottom:12px; }
.flash-info    { background:#e3f2fd;color:#1565c0;border-left:4px solid #1e88e5;padding:12px 16px;border-radius:5px;margin-bottom:12px; }
.flash-warning { background:#fff8e1;color:#f57f17;border-left:4px solid #ffb300;padding:12px 16px;border-radius:5px;margin-bottom:12px; }

/* ── Animations ────────────────────────────────────────────── */
.fade-in-up { animation:fadeInUp .7s ease both; }
.delay-1    { animation-delay:.15s; }
.delay-2    { animation-delay:.3s; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ── User Account ──────────────────────────────────────────── */
.account-nav a {
  display:block;padding:10px 16px;border-radius:5px;
  color:var(--text-dark);font-size:.88rem;font-weight:500;
  transition:background var(--transition),color var(--transition);
}
.account-nav a:hover,
.account-nav a.active { background:var(--primary);color:#fff; }
.order-badge {
  display:inline-block;padding:3px 10px;border-radius:20px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;
}
.order-badge-pending    { background:#fff8e1;color:#f57f17; }
.order-badge-confirmed  { background:#e3f2fd;color:#1565c0; }
.order-badge-processing { background:#f3e5f5;color:#6a1b9a; }
.order-badge-shipped    { background:#e8f5e9;color:#2e7d32; }
.order-badge-delivered  { background:#e8f5e9;color:#1b5e20; }
.order-badge-cancelled  { background:#fce4ec;color:#880e4f; }

/* ── Misc ──────────────────────────────────────────────────── */
.section-badge {
  display:inline-block;background:var(--bg-light);
  color:var(--primary);border:1px solid var(--primary-light);
  border-radius:20px;padding:4px 16px;font-size:.78rem;font-weight:600;
  margin-bottom:12px;
}
hr { border-color:var(--border); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero-section,
  .carousel-item .hero-section { min-height:55vh; }
  .hero-content h1 { font-size:1.8rem; }
  .hero-content p  { font-size:.9rem; }
  .category-circle { width:70px;height:70px; }
  .product-card .card-actions { opacity:1; }
  .site-footer { padding-top:40px; }
  .cookie-banner { flex-direction:column;gap:10px; }
}
@media (max-width:480px) {
  .trust-badge { padding:10px 6px; }
  .trust-badge h6 { font-size:.8rem; }
}

/* ════════════════════════════════════════════════════════════════
   JX - PADDY'S JEWELLERS LUXURY HOMEPAGE
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────── */
.jx-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: #0d1f14 center/cover no-repeat;
  overflow: hidden;
}
.jx-hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 62% 42%, rgba(7,124,64,.18), transparent 55%),
    linear-gradient(180deg, rgba(13,31,20,.55) 0%, rgba(13,31,20,.35) 45%, rgba(13,31,20,.82) 100%);
}
.jx-hero-inner {
  position: relative;
  max-width: 760px;
  text-align: center;
  margin: 0 auto;
  padding: 120px 0;
}
.jx-hero-eyebrow {
  display: inline-block;
  color: var(--primary-light);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 22px;
  opacity: 0;
  animation: jxUp .8s .1s forwards;
}
.jx-hero-eyebrow::before,
.jx-hero-eyebrow::after {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--primary-light);
  vertical-align: middle;
  margin: 0 12px;
  opacity: .6;
}
.jx-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 22px;
  letter-spacing: -.5px;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
  opacity: 0;
  animation: jxUp .9s .25s forwards;
}
.jx-hero-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255,255,255,.8);
  max-width: 540px;
  margin: 0 auto 36px;
  opacity: 0;
  animation: jxUp .9s .4s forwards;
}
.jx-hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: jxUp .9s .55s forwards;
}
.jx-hero-scroll {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 14px;
  z-index: 2;
}
.jx-hero-scroll span {
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 8px;
  margin-left: -2px;
  background: #fff;
  border-radius: 2px;
  animation: jxScroll 1.8s ease-in-out infinite;
}
@keyframes jxScroll { 0%{opacity:0;transform:translateY(0)} 40%{opacity:1} 80%{opacity:0;transform:translateY(14px)} 100%{opacity:0} }
@keyframes jxUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }

/* ── Buttons ────────────────────────────────────────────────── */
.jx-btn {
  display: inline-block;
  padding: 15px 38px;
  border-radius: 3px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform .25s, box-shadow .25s, background .25s, color .25s;
}
.jx-btn-solid {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 6px 22px rgba(7,124,64,.35);
}
.jx-btn-solid:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(7,124,64,.5); }
.jx-btn-line {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.55);
}
.jx-btn-line:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.1); transform: translateY(-3px); }
.jx-btn-dark {
  background: var(--text-dark);
  color: #fff;
}
.jx-btn-dark:hover { color: #fff; background: var(--primary); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(7,124,64,.3); }

/* ── Feature Bar ────────────────────────────────────────────── */
.jx-featurebar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
}
.jx-featurebar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.jx-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}
.jx-feature i {
  font-size: 1.5rem;
  color: var(--primary);
  flex-shrink: 0;
}
.jx-feature strong { display: block; font-size: .88rem; color: var(--text-dark); }
.jx-feature span { font-size: .76rem; color: var(--text-muted); }

/* ── Sections ───────────────────────────────────────────────── */
.jx-section { padding: 96px 0; background: #fff; }
.jx-section-dark {
  background: linear-gradient(160deg, #14241a 0%, #0d1f14 100%);
  position: relative;
}
.jx-head { text-align: center; margin-bottom: 56px; }
.jx-eyebrow {
  display: block;
  color: var(--primary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.jx-eyebrow-light { color: var(--primary-light); }
.jx-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.2;
}
.jx-title-light { color: #fff; }
.jx-title-left { text-align: left; }
.jx-flourish {
  display: block;
  text-align: center;
  margin: 16px auto 14px;
  position: relative;
  color: var(--primary);
  font-size: .85rem;
}
.jx-flourish::before,
.jx-flourish::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary));
}
.jx-flourish::before { right: calc(50% + 18px); background: linear-gradient(90deg, transparent, var(--primary)); }
.jx-flourish::after  { left: calc(50% + 18px); background: linear-gradient(90deg, var(--primary), transparent); }
.jx-flourish-light { color: var(--primary-light); }
.jx-flourish-light::before { background: linear-gradient(90deg, transparent, var(--primary-light)); }
.jx-flourish-light::after  { background: linear-gradient(90deg, var(--primary-light), transparent); }
.jx-flourish-left { text-align: left; margin-left: 0; }
.jx-flourish-left::before { display: none; }
.jx-flourish-left::after { left: 30px; }
.jx-sub { color: var(--text-muted); font-size: .96rem; max-width: 480px; margin: 0 auto; }
.jx-sub-light { color: rgba(255,255,255,.6); }

/* ── Product Cards ──────────────────────────────────────────── */
.jx-prod {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  transition: transform .35s ease, box-shadow .35s ease;
}
.jx-prod:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,.14); }
.jx-prod-media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-light);
}
.jx-prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.jx-prod:hover .jx-prod-media img { transform: scale(1.08); }
.jx-tag {
  position: absolute; top: 12px;
  z-index: 2;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}
.jx-tag-sale { left: 12px; background: var(--primary); color: #fff; }
.jx-tag-new  { right: 12px; background: var(--secondary); color: #fff; }
.jx-prod-hover {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(0deg, rgba(13,31,20,.6), transparent);
  transform: translateY(100%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.jx-prod:hover .jx-prod-hover { transform: translateY(0); opacity: 1; }
.jx-prod-hover button,
.jx-prod-hover a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dark);
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
  transition: background .2s, color .2s;
}
.jx-prod-hover button:hover,
.jx-prod-hover a:hover { background: var(--primary); color: #fff; }
.jx-prod-info { padding: 16px 16px 18px; }
.jx-prod-cat {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary);
}
.jx-prod-name {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 6px 0 10px;
  min-height: 2.5em;
}
.jx-prod-name a { color: var(--text-dark); text-decoration: none; }
.jx-prod-name a:hover { color: var(--primary); }
.jx-prod-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.jx-prod-price .now { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--primary); }
.jx-prod-price .was { font-size: .82rem; color: #aaa; text-decoration: line-through; }
.jx-prod-add {
  width: 100%;
  padding: 11px;
  background: var(--text-dark);
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s;
}
.jx-prod-add:hover { background: var(--primary); }

/* ── Story Split ────────────────────────────────────────────── */
.jx-story { padding: 96px 0; background: var(--bg-light); }
.jx-story-frame {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 12px 50px rgba(0,0,0,.1);
  text-align: center;
}
.jx-story-frame::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid var(--primary-light);
  border-radius: 4px;
  opacity: .35;
  pointer-events: none;
}
.jx-story-frame img { max-width: 100%; height: auto; position: relative; }
.jx-story-text {
  color: var(--text-muted);
  line-height: 1.95;
  font-size: .98rem;
  margin: 22px 0 28px;
}

/* ── Services ───────────────────────────────────────────────── */
.jx-service {
  text-align: center;
  padding: 36px 24px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  height: 100%;
  transition: transform .3s, border-color .3s, background .3s;
}
.jx-service:hover { transform: translateY(-8px); border-color: var(--primary); background: rgba(7,124,64,.06); }
.jx-service-ring {
  width: 76px; height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: var(--primary-light);
  border: 1px solid rgba(47,169,104,.4);
  position: relative;
  transition: background .3s, color .3s;
}
.jx-service:hover .jx-service-ring { background: var(--primary); color: #fff; border-color: var(--primary); }
.jx-service h5 { font-family: var(--font-heading); color: #fff; font-size: 1.1rem; margin-bottom: 10px; }
.jx-service p { color: rgba(255,255,255,.55); font-size: .85rem; line-height: 1.7; margin: 0; }

/* ── Promo ──────────────────────────────────────────────────── */
.jx-promo {
  position: relative;
  padding: 80px 0;
  background: linear-gradient(135deg, var(--primary-dark), var(--secondary));
  overflow: hidden;
}
.jx-promo-veil {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(255,255,255,.1), transparent 60%);
}
.jx-promo-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.jx-promo-inner h2 {
  font-family: var(--font-heading);
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 8px;
}
.jx-promo-inner p { color: rgba(255,255,255,.8); margin: 0; }

/* ── Reveal Animations ──────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-item { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--d, 0s); }
.reveal-item.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991px) {
  .jx-featurebar-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 767px) {
  .jx-hero { min-height: 78vh; }
  .jx-hero-inner { padding: 80px 0; }
  .jx-section, .jx-story, .jx-promo { padding: 60px 0; }
  .jx-head { margin-bottom: 36px; }
  .jx-promo-inner { flex-direction: column; text-align: center; }
  .jx-title-left, .jx-flourish-left { text-align: center; }
  .jx-flourish-left::after { left: calc(50% + 18px); }
  .jx-flourish-left::before { display: block; }
}
@media (max-width: 575px) {
  .jx-featurebar-grid { grid-template-columns: 1fr; }
  .jx-hero-title { font-size: 2rem; }
  .jx-btn { padding: 13px 26px; font-size: .76rem; }
  .jx-hero-cta { flex-direction: column; align-items: stretch; }
}