/* Login Shop design layer — base. Part of module loginshopdesign. */
/* ==========================================================================
   LOGIN SHOP — Alysum child theme
   Design system extracted from Figma "Login Shop – Digital Mall Alysum"
   Loaded after Alysum's theme.css (priority 999). Safe to edit.
   ========================================================================== */


/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  --ls-green: #059669;          /* primary / CTA / verified */
  --ls-green-dark: #047857;     /* hover, gradients */
  --ls-green-50: #ecfdf5;       /* soft badges, icon tiles */
  --ls-green-100: #d1fae5;
  --ls-orange: #ea580c;         /* flash deals, promo, "buy now" */
  --ls-orange-light: #f97316;
  --ls-orange-50: #fff7ed;
  --ls-navy: #0f172a;           /* dark bands, headings, footer */
  --ls-navy-2: #1e293b;
  --ls-ink: #0f172a;            /* main text */
  --ls-muted: #64748b;          /* secondary text */
  --ls-line: #e2e8f0;           /* borders */
  --ls-bg: #f8f9ff;             /* page background */
  --ls-surface: #ffffff;        /* cards */
  --ls-surface-2: #f1f5f9;      /* chips, inputs */
  --ls-star: #f59e0b;
  --ls-danger: #dc2626;

  --ls-radius-sm: 6px;
  --ls-radius: 10px;
  --ls-radius-lg: 16px;
  --ls-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --ls-shadow-lg: 0 10px 30px -12px rgba(15, 23, 42, .25);
  --ls-container: 1280px;

  --ls-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ls-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  --ls-grad-hero: radial-gradient(120% 120% at 100% 0%, #0f3d33 0%, #0b1a2c 45%, #0a0f1f 100%);
  --ls-grad-newsletter: linear-gradient(90deg, #047857 0%, #059669 55%, #ea580c 100%);
  --ls-grad-promo: linear-gradient(120deg, #ea580c 0%, #f97316 100%);
}

/* 2. BASE ------------------------------------------------------------------ */
body {
  background: var(--ls-bg) !important;
  color: var(--ls-ink) !important;
  font-family: var(--ls-font) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5,
.elementor-heading-title,
.page-title, .product-title, .block-title {
  font-family: var(--ls-font-display) !important;
  color: var(--ls-ink);
  letter-spacing: -.01em;
  text-transform: none;
}
h1, .h1 { font-weight: 800; }
h2, .h2, h3, .h3 { font-weight: 700; }
a { color: var(--ls-ink); transition: color .15s ease; }
a:hover, a:focus { color: var(--ls-green); }
#header .page-width, #footer .page-width, #main-content .page-width,
body .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--ls-container) !important;
}
::selection { background: var(--ls-green-100); color: var(--ls-ink); }

/* 3. BUTTONS --------------------------------------------------------------- */
body .btn,
body .btn-primary,
body .elementor-button,
body button[type="submit"].btn {
  font-family: var(--ls-font) !important;
  font-weight: 600 !important;
  font-size: 13px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--ls-radius-sm) !important;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
body .btn-primary,
body .btn.add-to-cart,
body .add-to-cart,
body .elementor-button,
body .btn:not(.btn-secondary):not(.btn-tertiary):not(.btn-outline) {
  background-color: var(--ls-green) !important;
  border-color: var(--ls-green) !important;
  color: #fff !important;
}
body .btn-primary:hover,
body .btn.add-to-cart:hover,
body .add-to-cart:hover,
body .elementor-button:hover,
body .btn:not(.btn-secondary):not(.btn-tertiary):not(.btn-outline):hover {
  background-color: var(--ls-green-dark) !important;
  border-color: var(--ls-green-dark) !important;
  color: #fff !important;
}
body .btn:active { transform: translateY(1px); }
body .btn-secondary,
body .btn-outline {
  background: var(--ls-surface) !important;
  border: 1px solid var(--ls-line) !important;
  color: var(--ls-ink) !important;
}
body .btn-secondary:hover,
body .btn-outline:hover { border-color: var(--ls-green) !important; color: var(--ls-green) !important; }
body .btn:focus-visible, body a:focus-visible, body input:focus-visible {
  outline: 2px solid var(--ls-green);
  outline-offset: 2px;
}

/* Utility buttons for CE HTML widgets */
.ls-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--ls-radius-sm);
  font: 600 13px/1 var(--ls-font); text-decoration: none !important; border: 1px solid transparent; cursor: pointer; }
.ls-btn--green { background: var(--ls-green); color: #fff !important; }
.ls-btn--green:hover { background: var(--ls-green-dark); }
.ls-btn--orange { background: var(--ls-orange); color: #fff !important; }
.ls-btn--orange:hover { background: #c2410c; }
.ls-btn--ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff !important; }
.ls-btn--light { background: #fff; color: var(--ls-ink) !important; border-color: var(--ls-line); }
.ls-btn--navy { background: var(--ls-navy); color: #fff !important; }
.ls-btn--block { width: 100%; justify-content: center; }

/* 4. FORMS ----------------------------------------------------------------- */
body .form-control,
body input[type="text"], body input[type="email"], body input[type="password"],
body input[type="tel"], body input[type="search"], body input[type="number"],
body select, body textarea {
  border: 1px solid var(--ls-line) !important;
  border-radius: var(--ls-radius-sm) !important;
  background-color: #fff !important;
  color: var(--ls-ink) !important;
  font-family: var(--ls-font) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
body .form-control:focus, body input:focus, body select:focus, body textarea:focus {
  border-color: var(--ls-green) !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .15) !important;
}
body .custom-checkbox input[type="checkbox"] + span,
body .custom-radio { border-color: #cbd5e1; border-radius: 4px; }
body .custom-radio { border-radius: 50%; }
body .custom-checkbox input[type="checkbox"]:checked + span,
body .custom-radio input[type="radio"]:checked + span { background: var(--ls-green); border-color: var(--ls-green); }
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--ls-green); }

/* 5. BADGES / CHIPS -------------------------------------------------------- */
.ls-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
  font: 700 10px/1.2 var(--ls-font); letter-spacing: .04em; text-transform: uppercase; }
.ls-badge--green { background: var(--ls-green-50); color: var(--ls-green-dark); }
.ls-badge--orange { background: var(--ls-orange-50); color: var(--ls-orange); }
.ls-badge--hot { background: var(--ls-orange); color: #fff; }
.ls-badge--navy { background: var(--ls-navy); color: #fff; }
.ls-badge--dark-glass { background: rgba(255,255,255,.08); color: #d1fae5; border: 1px solid rgba(255,255,255,.12); }
.ls-chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: #fff;
  border: 1px solid var(--ls-line); font: 600 12px/1 var(--ls-font); color: var(--ls-ink) !important; text-decoration: none !important; }
.ls-chip.is-active, .ls-chip:hover { background: var(--ls-green-dark); border-color: var(--ls-green-dark); color: #fff !important; }
.ls-verified::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }

/* Product flags (PrestaShop core + Alysum) */
.product-flags .product-flag,
.product-flag {
  border-radius: var(--ls-radius-sm) !important;
  font: 700 10px/1 var(--ls-font) !important;
  letter-spacing: .03em;
  text-transform: uppercase !important;
  padding: 5px 8px !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.product-flag.discount, .product-flag.discount-percentage, .product-flag.discount-amount, .product-flag.on-sale {
  background: var(--ls-orange) !important; color: #fff !important;
}
.product-flag.new { background: var(--ls-navy) !important; color: #fff !important; }
.product-flag.online-only, .product-flag.pack { background: var(--ls-green) !important; color: #fff !important; }
.product-flag.out_of_stock { background: var(--ls-surface-2) !important; color: var(--ls-muted) !important; }

/* 6. TOP BAR / HEADER ------------------------------------------------------ */
.ls-topbar { background: var(--ls-navy); color: #cbd5e1; font-size: 12px; }
.ls-topbar a { color: #e2e8f0; }
.ls-topbar a:hover { color: #fff; }
.ls-topbar strong, .ls-topbar .ls-accent { color: #34d399; }

#header { background: #fff; box-shadow: 0 1px 0 var(--ls-line); }
#header .ls-header-main { border-bottom: 1px solid var(--ls-line); }
#header .ls-nav-bar { background: #fff; }
/* Alysum search widget */
#header .pk-search, #header [class*="pksearch"] form, #header .search-widget form {
  border: 1px solid var(--ls-line) !important; border-radius: var(--ls-radius-sm) !important; overflow: hidden; background: #fff;
}
#header .search-widget button[type="submit"],
#header [class*="pksearch"] button[type="submit"] {
  background: var(--ls-orange) !important; color: #fff !important; border: 0 !important;
  font-weight: 600; padding-inline: 16px;
}
/* Cart / wishlist counters */
#header .cart-products-count, #header .pk-counter, #header [class*="counter"] {
  background: var(--ls-orange) !important; color: #fff !important; border-radius: 999px !important;
  font: 700 10px/16px var(--ls-font) !important; min-width: 16px; height: 16px; padding: 0 4px !important;
}
/* "Toutes les boutiques / rayons" vertical menu trigger */
#header .ls-mall-trigger,
#header .elementor-widget-pkcategories .pk-cat-title,
#header .elementor-widget-pkcategories > .elementor-widget-container > div > :first-child {
  background: var(--ls-green) !important; color: #fff !important; border-radius: var(--ls-radius-sm) var(--ls-radius-sm) 0 0;
  font: 700 12px/1.2 var(--ls-font) !important; text-transform: uppercase; letter-spacing: .02em;
}
/* Main menu */
#header .elementor-widget-pknav a,
#header .pk-nav-link {
  font: 600 13px/1.25 var(--ls-font) !important; color: var(--ls-ink) !important; text-transform: none !important;
}
#header .elementor-widget-pknav a:hover,
#header .elementor-widget-pknav .current > a,
#header .elementor-widget-pknav .active > a { color: var(--ls-green) !important; }
#header .ls-menu-seller > a,
#header .elementor-widget-pknav a[href*="ets_marketplace"][href*="registration"] {
  background: var(--ls-orange-50); color: var(--ls-orange) !important; border-radius: var(--ls-radius-sm); padding: 6px 10px !important;
}
#header .ls-dash-btn { background: var(--ls-navy); color: #fff !important; border-radius: var(--ls-radius-sm); padding: 9px 14px; font-weight: 600; }
.ls-status-strip { background: var(--ls-navy); color: #cbd5e1; font-size: 12px; border-radius: var(--ls-radius); padding: 10px 14px; }

/* Breadcrumb */
.breadcrumb, nav.breadcrumb { background: transparent !important; padding: 12px 0 !important; font-size: 12px; color: var(--ls-muted); }
.breadcrumb a { color: var(--ls-muted) !important; }
.breadcrumb li:last-child, .breadcrumb li:last-child a, .breadcrumb li:last-child span { color: var(--ls-green) !important; font-weight: 600; }

/* 7. SECTION TITLES -------------------------------------------------------- */
.ls-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--ls-green); font: 700 11px/1 var(--ls-font);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.ls-section-title { font: 800 26px/1.2 var(--ls-font-display); color: var(--ls-ink); margin: 0; }
.ls-section-sub { color: var(--ls-muted); font-size: 13px; margin: 4px 0 0; }
.ls-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ls-section { padding: 40px 0; }
.ls-section--white { background: #fff; }
.elementor-widget-pktitle .pk-title, .elementor-widget-pktitle h2, .elementor-widget-pktitle h3 {
  font-family: var(--ls-font-display) !important; font-weight: 800 !important; text-transform: none !important; color: var(--ls-ink) !important;
}

/* 8. CARDS ----------------------------------------------------------------- */
.ls-card { background: var(--ls-surface); border: 1px solid var(--ls-line); border-radius: var(--ls-radius-lg);
  box-shadow: var(--ls-shadow); padding: 18px; }
.ls-grid { display: grid; gap: 16px; }
.ls-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ls-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ls-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.ls-grid--6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.ls-grid--10 { grid-template-columns: repeat(10, minmax(0,1fr)); }
@media (max-width: 991px) {
  .ls-grid--4, .ls-grid--6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ls-grid--3 { grid-template-columns: 1fr; }
  .ls-grid--10 { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (max-width: 575px) {
  .ls-grid--2, .ls-grid--4 { grid-template-columns: 1fr; }
  .ls-grid--6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ls-grid--10 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.ls-icon-tile { width: 40px; height: 40px; border-radius: var(--ls-radius); background: var(--ls-green-50); color: var(--ls-green);
  display: inline-grid; place-items: center; flex: none; }
.ls-icon-tile svg { width: 20px; height: 20px; }

/* 9. PRODUCT MINIATURE (listing, home, carousels) ------------------------- */
.product-miniature,
.product-miniature .thumbnail-container {
  background: var(--ls-surface) !important;
  border-radius: var(--ls-radius-lg) !important;
}
.product-miniature {
  border: 1px solid var(--ls-line) !important;
  box-shadow: var(--ls-shadow);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.product-miniature:hover { box-shadow: var(--ls-shadow-lg); border-color: #cbd5e1 !important; transform: translateY(-2px); }
.product-miniature .thumbnail-container,
.product-miniature .product-thumbnail { background: #f8fafc !important; }
.product-miniature .product-thumbnail img { mix-blend-mode: multiply; }
.product-miniature .product-title,
.product-miniature .product-title a,
.product-miniature h2, .product-miniature h3 {
  font: 700 13px/1.35 var(--ls-font) !important; color: var(--ls-ink) !important; text-transform: none !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-miniature .product-title a:hover { color: var(--ls-green) !important; }
.product-miniature .product-description,
.product-miniature .product-description-short { color: var(--ls-muted); font-size: 12px; }
.product-miniature .product-price-and-shipping,
.product-miniature .price-countdown { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.product-price, .product-miniature .price, .current-price, .current-price-value, .product-miniature .product-price {
  font: 800 18px/1.1 var(--ls-font-display) !important; color: var(--ls-ink) !important;
}
.regular-price, .product-miniature .regular-price {
  font: 500 12px/1 var(--ls-font) !important; color: #94a3b8 !important; text-decoration: line-through;
}
.product-miniature .add-to-cart,
.product-miniature .pk-add-to-cart,
.product-miniature [class*="add-to-cart"] {
  width: 100%; border-radius: var(--ls-radius-sm) !important; font-weight: 600 !important; font-size: 12px !important;
}
.product-miniature .star_content .star, .star_content .star_on, .comments_note .star_on,
.product-list-reviews .star-on, .grade-stars .star-on { color: var(--ls-star) !important; }
.product-miniature .product-list-reviews, .product-miniature .comments-nb { color: var(--ls-muted); font-size: 11px; }
/* Seller line injected by ETS Marketplace in miniatures */
.product-miniature [class*="ets_mp"], .product-miniature .ets_mp_shop_name, .product-miniature .shop_name {
  font: 600 11px/1.3 var(--ls-font) !important; color: var(--ls-muted) !important;
}
.product-miniature [class*="ets_mp"] a { color: var(--ls-green) !important; }
/* Wishlist / quickview round buttons */
.product-miniature .pk-favorites, .product-miniature .pk-compare, .product-miniature .quick-view,
.product-miniature [class*="favorites"] > a, .product-miniature [class*="compare"] > a {
  background: #fff !important; border: 1px solid var(--ls-line) !important; border-radius: 999px !important;
  color: var(--ls-ink) !important; box-shadow: var(--ls-shadow);
}

/* 15. FOOTER --------------------------------------------------------------- */
.ls-newsletter { background: var(--ls-grad-newsletter); color: #fff; padding: 20px 0; }
.ls-newsletter h3 { color: #fff; font: 700 16px/1.2 var(--ls-font-display); margin: 0; }
.ls-newsletter p { color: #d1fae5; font-size: 12px; margin: 2px 0 0; }
.ls-newsletter .ls-nl-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ls-newsletter .ls-nl-icon { width: 38px; height: 38px; border-radius: var(--ls-radius); background: rgba(255,255,255,.15); display: grid; place-items: center; }
.ls-newsletter form, .ls-newsletter .block_newsletter form, .elementor-widget-pknewsletter form { display: flex; gap: 8px; min-width: 320px; }
.ls-newsletter input[type="email"], .elementor-widget-pknewsletter input[type="email"] { border: 0 !important; height: 40px; min-width: 240px; }
.ls-newsletter button, .ls-newsletter input[type="submit"], .elementor-widget-pknewsletter button, .elementor-widget-pknewsletter input[type="submit"] {
  background: var(--ls-navy) !important; border-color: var(--ls-navy) !important; color: #fff !important; height: 40px; padding: 0 18px;
  border-radius: var(--ls-radius-sm) !important; font-weight: 600 !important;
}

#footer, .ls-footer { background: var(--ls-navy) !important; color: #94a3b8; }
#footer .elementor-section { background-color: transparent; }
#footer h3, #footer h4, #footer h5, #footer .h3, #footer .h4, #footer .elementor-heading-title,
.ls-footer h4 {
  color: #34d399 !important; font: 700 12px/1.2 var(--ls-font) !important; text-transform: uppercase !important; letter-spacing: .05em;
}
#footer a, .ls-footer a { color: #cbd5e1 !important; font-size: 12px; }
#footer a:hover, .ls-footer a:hover { color: #fff !important; }
#footer p, .ls-footer p { color: #94a3b8; font-size: 12px; }
.ls-footer ul { list-style: none; padding: 0; margin: 0; }
.ls-footer li { margin: 0 0 6px; }
.ls-footer-bottom { background: #0b1224; border-top: 1px solid rgba(255,255,255,.06); padding: 12px 0; font-size: 11px; color: #94a3b8; }
.ls-footer-bottom .ls-accent { color: #34d399; font-weight: 700; }
.ls-footer-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* 16. MISC ----------------------------------------------------------------- */
.ls-container { max-width: var(--ls-container); margin: 0 auto; padding: 0 16px; }
.ls-flex { display: flex; gap: 12px; align-items: center; }
.ls-between { justify-content: space-between; }
.ls-wrap { flex-wrap: wrap; }
.ls-muted { color: var(--ls-muted) !important; }
.ls-green { color: var(--ls-green) !important; }
.ls-orange { color: var(--ls-orange) !important; }
.ls-stars { color: var(--ls-star); letter-spacing: 1px; }
.alert-success, .notification-success { background: var(--ls-green-50) !important; color: var(--ls-green-dark) !important; border-color: var(--ls-green-100) !important; border-radius: var(--ls-radius) !important; }
/* Toast ("Article ajouté avec succès") */
#blockcart-modal .modal-content, .pk-notification, .pk-toast {
  border-radius: var(--ls-radius-lg) !important; border: 1px solid var(--ls-line) !important;
}
.pk-toast, .pk-notification { background: var(--ls-navy) !important; color: #fff !important; }
/* Custom scrollbar (Alysum option) */
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }

/* 17. CE template helpers -------------------------------------------------- */
.ls-store-thumbs > span { display: block; aspect-ratio: 1; border-radius: var(--ls-radius-sm); background: #f1f5f9; overflow: hidden; }
.ls-store-thumbs > span img { width: 100%; height: 100%; object-fit: cover; }
/* Product slots: visible in the Creative Elements editor only */
.ls-slot { display: none; }
body.elementor-editor-active .ls-slot { display: block; border: 2px dashed var(--ls-orange); border-radius: var(--ls-radius); padding: 18px;
  color: var(--ls-orange); font: 600 13px/1.4 var(--ls-font); background: var(--ls-orange-50); }
[class^="ls-"], [class*=" ls-"], [class^="ls-"] *, [class*=" ls-"] * { box-sizing: border-box; }
.ls-btn, .ls-badge, .ls-chip { white-space: nowrap; }
.ls-topbar a, .ls-footer a, .ls-footer-bottom a, .ls-btn, .ls-chip, .ls-brand, .ls-rayon, .ls-subcat { text-decoration: none !important; }