/* ==========================================================================
   Pescaloccasione — Custom Theme Styles
   Adapted verbatim from the approved HTML prototype.
   Color palette: #608db9 / #242838 / #ffd814 / white
   Fonts: Manrope (heading) + Inter (body)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; width: 100%; scroll-behavior: smooth; }
body { overflow-x: hidden; width: 100%; min-height: 100vh; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; padding-top: var(--header-h); }

:root {
  --color-primary: #608db9;
  --color-primary-dark: #4a76a0;
  --color-primary-light: #eaf1f8;
  --color-secondary: #242838;
  --color-secondary-light: #353a52;
  --color-secondary-deep: #1a1d29;
  --color-accent: #ffd814;
  --color-accent-dark: #f0c800;
  --color-text: #1f2937;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;
  --color-bg: #ffffff;
  --color-bg-alt: #f7f9fc;
  --color-bg-dark: #242838;
  --color-border: #e5e9ee;
  --color-border-strong: #cdd5de;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-warning: #f59e0b;
  --font-heading: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;
  --shadow-xs: 0 1px 3px rgba(36, 40, 56, 0.05);
  --shadow: 0 2px 14px rgba(36, 40, 56, 0.07);
  --shadow-md: 0 6px 24px rgba(36, 40, 56, 0.10);
  --shadow-lg: 0 16px 48px rgba(36, 40, 56, 0.16);
  --transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  --header-h: 113px; /* topbar hidden: header-main (80) + main-nav (52), keeping the prior offset relationship */
}
@media (max-width: 1024px) { :root { --header-h: 118px; } }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-secondary); letter-spacing: -0.022em; line-height: 1.12; font-weight: 800; }
h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); font-weight: 800; line-height: 1.14; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.125rem; font-weight: 700; }
p { color: var(--color-text); }
a { color: inherit; text-decoration: none; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: transparent; font-family: inherit; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 16px; }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: currentColor; display: inline-block; }
.eyebrow.on-dark { color: var(--color-accent); }
.section-head { text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head .eyebrow::before { display: none; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; min-height: 48px; transition: var(--transition); cursor: pointer; white-space: nowrap; border: 2px solid transparent; line-height: 1; position: relative; overflow: hidden; }
.btn-primary { background: var(--color-accent); color: var(--color-secondary); border-color: var(--color-accent); box-shadow: 0 6px 18px rgba(255, 216, 20, 0.32); }
.btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 216, 20, 0.45); }
.btn-secondary { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
.btn-secondary:hover { background: var(--color-secondary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--color-secondary); border-color: var(--color-border-strong); }
.btn-outline:hover { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.btn-outline-light:hover { background: #fff; color: var(--color-secondary); border-color: #fff; }
.btn-block { width: 100%; }
.btn-lg { padding: 17px 36px; font-size: 1rem; min-height: 56px; }
.btn-sm { padding: 10px 18px; font-size: 0.85rem; min-height: 38px; }

input, textarea, select { font-family: var(--font-body); font-size: 1rem; width: 100%; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 13px 16px; background: #fff; color: var(--color-text); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
input:focus, textarea:focus, select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(96, 141, 185, 0.14); }
textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.92rem; color: var(--color-secondary); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.custom-select-wrapper { position: relative; }
.custom-select-wrapper select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 44px; cursor: pointer; }
.custom-select-wrapper::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--color-secondary); pointer-events: none; }

.checkbox-row { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 0; }
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }
.checkbox-row label { cursor: pointer; font-size: 0.9rem; margin: 0; font-weight: 500; }

#preloader { position: fixed; inset: 0; z-index: 99999; background: var(--color-secondary); display: flex; align-items: center; justify-content: center; transition: opacity 0.5s, visibility 0.5s; }
#preloader.gone { opacity: 0; visibility: hidden; }
.preloader-logo { font-family: var(--font-heading); font-weight: 900; font-size: 1.6rem; color: #fff; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; }
.preloader-logo .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent); animation: bounce 0.8s ease-in-out infinite alternate; }
@keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-12px); } }

/* ==============================  HEADER  ============================== */
header#site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; background: var(--color-secondary); box-shadow: 0 1px 0 rgba(255,255,255,0.04); }
.topbar { display: none; background: var(--color-secondary-deep); color: rgba(255,255,255,0.78); font-size: 0.8rem; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; }
.topbar__left, .topbar__right { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; transition: color 0.2s; color: rgba(255,255,255,0.85); }
.topbar a:hover { color: var(--color-accent); }
.topbar i { width: 14px; height: 14px; }
.topbar__left span, .topbar__right span { display: inline-flex; align-items: center; gap: 7px; }

.header-main { padding: 12px 0; background: var(--color-secondary); }
.header-main .container { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.logo { display: flex; align-items: center; font-family: var(--font-heading); font-weight: 900; font-size: 1.4rem; color: #fff; letter-spacing: -0.02em; }
.logo img { height: auto; width: auto; max-width: 240px; max-height: 46px; object-fit: contain; }

.search-bar { position: relative; max-width: 600px; width: 100%; margin: 0 auto; }
.search-bar input { padding: 11px 54px 11px 20px; border: 2px solid transparent; border-radius: 28px; font-size: 0.92rem; background: rgba(255,255,255,0.96); color: var(--color-text); }
.search-bar input::placeholder { color: var(--color-text-muted); }
.search-bar input:focus { background: #fff; border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(255,216,20,0.18); }
.search-bar button { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 38px; height: 38px; background: var(--color-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-secondary); transition: var(--transition); }
.search-bar button:hover { background: var(--color-accent-dark); transform: translateY(-50%) scale(1.06); }
.search-bar button i { width: 18px; height: 18px; stroke-width: 2.2; }

.header-actions { display: flex; align-items: center; gap: 6px; }
.header-actions a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; border-radius: var(--radius-sm); font-size: 0.72rem; color: rgba(255,255,255,0.92); font-weight: 600; position: relative; transition: var(--transition); }
.header-actions a:hover { background: rgba(255,255,255,0.08); color: var(--color-accent); }
.header-actions a i { width: 20px; height: 20px; stroke-width: 1.6; }
.header-actions .badge { position: absolute; top: 4px; right: 4px; background: var(--color-accent); color: var(--color-secondary); font-size: 0.66rem; font-weight: 800; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); }

.main-nav { background: var(--color-secondary-light); border-top: 1px solid rgba(255,255,255,0.06); }
.main-nav .container { display: flex; justify-content: flex-start; align-items: stretch; gap: 6px; position: relative; flex-wrap: nowrap; }
.main-nav ul { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.main-nav li { position: relative; }
.main-nav a { display: flex; align-items: center; gap: 6px; padding: 13px 16px; font-weight: 600; font-size: 0.9rem; color: rgba(255,255,255,0.92); position: relative; letter-spacing: 0.005em; }
.main-nav a:hover { color: var(--color-accent); }
.main-nav li.active > a, .main-nav li.current-menu-item > a, .main-nav li.current_page_item > a { color: var(--color-accent); }
.main-nav li.active > a::after, .main-nav li.current-menu-item > a::after, .main-nav li.current_page_item > a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 3px; background: var(--color-accent); border-radius: 2px; }
.main-nav li.has-mega > a::after, .main-nav li.menu-item-has-children > a::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-left: 4px; opacity: 0.7; position: static; background: transparent; }

.sub-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); width: 720px; max-width: 92vw; background: #fff; box-shadow: var(--shadow-lg); border-radius: var(--radius); padding: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: var(--transition); z-index: 100; }
.menu-item-has-children:hover .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.mega-col h5 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--color-border); }
.mega-col a, .sub-menu a { display: block; padding: 6px 0; font-size: 0.88rem; color: var(--color-text); font-weight: 500; }
.mega-col a:hover, .sub-menu a:hover { color: var(--color-primary); padding-left: 4px; }

.mobile-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: #fff; background: rgba(255,255,255,0.08); cursor: pointer; pointer-events: auto; position: relative; z-index: 5; }
.mobile-toggle:hover { background: rgba(255,255,255,0.14); }
.mobile-toggle i, .mobile-toggle svg { width: 24px; height: 24px; pointer-events: none; }

@media (max-width: 1024px) {
  .topbar { display: none; }
  .main-nav { display: none; }
  .header-main { padding: 10px 0; }
  .header-main .container { grid-template-columns: auto 1fr; grid-template-areas: "logo actions" "search search"; column-gap: 12px; row-gap: 10px; }
  .header-main .logo { grid-area: logo; }
  .header-main .header-actions { grid-area: actions; }
  .header-main .search-bar { grid-area: search; display: block; max-width: 100%; margin: 0; }
  .logo img { max-width: 200px; max-height: 38px; }
  .header-actions { gap: 4px; justify-content: flex-end; }
  .header-actions a.acc-link { display: none; }
  .header-actions a span:not(.badge) { display: none; }
  .header-actions a { padding: 8px 9px; }
  .header-actions a i { width: 22px; height: 22px; }
  .mobile-toggle { display: flex; }
}
@media (max-width: 480px) { .header-main .container { gap: 6px; } .logo img { max-width: 165px; max-height: 34px; } .header-actions a { padding: 7px; } }

#mobile-menu { position: fixed; inset: 0; background: rgba(36, 40, 56, 0.97); z-index: 9999; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s, visibility 0.3s; overflow-y: auto; }
#mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu__close { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 10; }
.mobile-menu__close i { width: 22px; height: 22px; }
.mobile-menu__inner { padding: 80px 24px 40px; max-width: 500px; margin: 0 auto; }
.mobile-menu__search { margin-bottom: 28px; }
.mobile-menu__search input { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }
.mobile-menu__search input::placeholder { color: rgba(255,255,255,0.6); }
.mobile-menu__list li { border-bottom: 1px solid rgba(255,255,255,0.1); }
.mobile-menu__list a { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 1.15rem; font-weight: 600; color: #fff; font-family: var(--font-heading); }
.mobile-menu__list a:hover { color: var(--color-accent); }
.mobile-menu__cta { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }

/* ==============================  HERO  ============================== */
.hero { position: relative; width: 100%; min-height: 600px; background: linear-gradient(115deg, rgba(26,29,41,0.92) 0%, rgba(36,40,56,0.78) 45%, rgba(74,118,160,0.55) 100%), url('../img/pexels-szafran-34238254.jpg') center/cover no-repeat, linear-gradient(120deg, var(--color-secondary), var(--color-primary)); color: #fff; display: flex; align-items: center; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 25%, rgba(255,216,20,0.22) 0%, transparent 45%), radial-gradient(circle at 8% 92%, rgba(96,141,185,0.35) 0%, transparent 55%); pointer-events: none; }
.hero__decor { position: absolute; right: -120px; top: 50%; transform: translateY(-50%); width: 720px; height: 720px; pointer-events: none; opacity: 0.20; }
.hero .container { position: relative; z-index: 2; padding-top: 48px; padding-bottom: 48px; width: 100%; }
.hero__content { max-width: 880px; }
.hero__content .eyebrow { color: var(--color-accent); margin-bottom: 18px; font-size: 0.78rem; }
.hero__content h1 { color: #fff; margin-bottom: 20px; font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.06; letter-spacing: -0.025em; }
.hero__content h1 .underline { position: relative; display: inline-block; color: var(--color-accent); }
.hero__content h1 .underline::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 8px; background: rgba(255,216,20,0.20); z-index: -1; border-radius: 4px; }
.hero__content p { color: rgba(255,255,255,0.92); font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 600px; margin-bottom: 30px; line-height: 1.6; }
.hero__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.hero__stats { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(24px, 4vw, 56px); padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.16); max-width: 780px; }
.hero__stat-num { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--color-accent); line-height: 1; margin-bottom: 6px; letter-spacing: -0.02em; }
.hero__stat-label { font-size: 0.78rem; color: rgba(255,255,255,0.72); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 1024px) { .hero { min-height: 620px; } .hero__content { max-width: 720px; } }
@media (max-width: 640px) { .hero { min-height: 560px; } .hero .container { padding-top: 40px; padding-bottom: 40px; } .hero__content h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); } .hero__btns { margin-bottom: 44px; } .hero__btns .btn { width: 100%; } .hero__stats { grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 28px; } }

/* ==============================  TRUST STRIP  ============================== */
.trust-strip { background: #fff; padding: 24px 0; border-bottom: 1px solid var(--color-border); }
.trust-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.trust-item { display: flex; align-items: center; gap: 16px; }
.trust-item__icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--color-primary-light), #fff); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 12px rgba(96,141,185,0.16); }
.trust-item__icon i { width: 22px; height: 22px; stroke-width: 2.2; }
.trust-item h4 { font-size: 0.98rem; margin-bottom: 3px; }
.trust-item p { font-size: 0.84rem; color: var(--color-text-muted); }
@media (max-width: 1024px) { .trust-strip__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 480px) { .trust-strip__grid { grid-template-columns: 1fr; gap: 18px; } .trust-item__icon { width: 44px; height: 44px; } }

/* ==============================  SECTIONS GENERIC  ============================== */
.section { padding: clamp(48px, 6vw, 80px) 0; }
.page-banner + section, .page-banner + .section { padding-top: clamp(28px, 4vw, 48px); }
.section-alt { background: var(--color-bg-alt); }
.section-dark { background: var(--color-bg-dark); color: rgba(255,255,255,0.85); position: relative; overflow: hidden; }
.section-dark::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(96,141,185,0.18), transparent 60%); pointer-events: none; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.78); }
.section-head { text-align: center; margin-bottom: 36px; max-width: 760px; margin-left: auto; margin-right: auto; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--color-text-muted); font-size: 1rem; }
.section-head__row { display: flex; align-items: end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 36px; }
.section-head__row .head-text { max-width: 620px; }
.section-head__row .head-text h2 { margin-top: 4px; }

/* ==============================  CATEGORY CARDS  ============================== */
.categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cat-card { position: relative; background: #fff; border-radius: var(--radius); overflow: hidden; transition: var(--transition); display: block; cursor: pointer; aspect-ratio: 4 / 5; }
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cat-card__img { position: absolute; inset: 0; background: var(--color-bg-alt); overflow: hidden; }
.cat-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.cat-card:hover .cat-card__img img { transform: scale(1.08); }
.cat-card__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,40,56,0) 35%, rgba(36,40,56,0.85) 100%); transition: opacity 0.3s; }
.cat-card:hover .cat-card__img::after { background: linear-gradient(180deg, rgba(36,40,56,0.1) 25%, rgba(36,40,56,0.92) 100%); }
.cat-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 4px; color: #fff; z-index: 2; }
.cat-card h3 { font-size: 1.18rem; color: #fff; margin-bottom: 4px; letter-spacing: -0.01em; }
.cat-card__count { font-size: 0.82rem; color: rgba(255,255,255,0.85); margin-bottom: 12px; }
.cat-card__link { font-size: 0.84rem; color: var(--color-accent); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.cat-card__link i { width: 14px; height: 14px; transition: transform 0.2s; }
.cat-card:hover .cat-card__link i { transform: translateX(4px); }
@media (max-width: 1024px) { .categories-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .cat-card__body { padding: 14px; } .cat-card h3 { font-size: 0.96rem; } }

/* ==============================  PRODUCT CARDS  ============================== */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.product-card { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); transition: var(--transition); display: flex; flex-direction: column; position: relative; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.product-card__media { aspect-ratio: 1 / 1; background: var(--color-bg-alt); position: relative; overflow: hidden; cursor: pointer; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.product-card:hover .product-card__media img { transform: scale(1.07); }
.product-card__badge { position: absolute; top: 14px; left: 14px; background: var(--color-accent); color: var(--color-secondary); font-weight: 800; font-size: 0.74rem; padding: 6px 11px; border-radius: var(--radius-xs); letter-spacing: 0.04em; font-family: var(--font-heading); box-shadow: 0 2px 10px rgba(255,216,20,0.35); z-index: 2; }
.product-card__badge.new { background: var(--color-success); color: #fff; box-shadow: 0 2px 10px rgba(22,163,74,0.32); }
.product-card__wishlist { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.96); color: var(--color-secondary); display: flex; align-items: center; justify-content: center; transition: var(--transition); box-shadow: 0 2px 8px rgba(36,40,56,0.10); z-index: 2; cursor: pointer; }
.product-card__wishlist:hover { color: var(--color-danger); transform: scale(1.1); background: #fff; }
.product-card__wishlist i { width: 18px; height: 18px; }
.product-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.product-card__brand { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-primary); font-weight: 700; margin-bottom: 8px; }
.product-card h3 { font-size: 0.98rem; font-weight: 600; line-height: 1.4; margin-bottom: 12px; color: var(--color-secondary); font-family: var(--font-body); letter-spacing: 0; }
.product-card__rating { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; font-size: 0.82rem; color: var(--color-text-muted); }
.product-card__stars { color: var(--color-accent); display: inline-flex; gap: 1px; }
.product-card__stars i { width: 14px; height: 14px; fill: currentColor; }
.product-card__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; margin-top: auto; }
.product-card__price-current { font-family: var(--font-heading); font-weight: 800; font-size: 1.32rem; color: var(--color-secondary); letter-spacing: -0.01em; }
.product-card__price-old { font-size: 0.92rem; color: var(--color-text-light); text-decoration: line-through; }
.product-card__add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--color-secondary); color: #fff; font-weight: 700; font-size: 0.86rem; transition: var(--transition); cursor: pointer; }
.product-card__add:hover { background: var(--color-accent); color: var(--color-secondary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,216,20,0.32); }
.product-card__add i { width: 16px; height: 16px; }
@media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .product-card__body { padding: 12px 14px 14px; } .product-card h3 { font-size: 0.92rem; } .product-card__price-current { font-size: 1.08rem; } }

/* ==============================  TEHNICI (FEEDER/CARP/PREDATORI)  ============================== */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tech-card { background: #fff; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: var(--transition); text-decoration: none; color: inherit; border: 1px solid var(--color-border); position: relative; }
.tech-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.tech-card__img { aspect-ratio: 16 / 11; overflow: hidden; position: relative; background: var(--color-bg-alt); }
.tech-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.tech-card:hover .tech-card__img img { transform: scale(1.08); }
.tech-card__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(36,40,56,0.55) 100%); }
.tech-card__body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; position: relative; }
.tech-card__num { position: absolute; top: -22px; right: 22px; background: var(--color-accent); color: var(--color-secondary); font-family: var(--font-heading); font-weight: 900; font-size: 1rem; padding: 8px 12px; border-radius: var(--radius-sm); letter-spacing: 0.04em; box-shadow: 0 6px 16px rgba(255,216,20,0.4); }
.tech-card h3 { font-size: 1.32rem; margin-bottom: 10px; letter-spacing: -0.015em; }
.tech-card p { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 18px; flex: 1; }
.tech-card__link { font-size: 0.84rem; color: var(--color-primary); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.tech-card__link i { width: 14px; height: 14px; transition: transform 0.2s; }
.tech-card:hover .tech-card__link i { transform: translateX(4px); }
@media (max-width: 900px) { .tech-grid { grid-template-columns: 1fr; } }

/* ==============================  OFFER BANNER  ============================== */
.offer-banner { position: relative; background: linear-gradient(125deg, var(--color-secondary-deep) 0%, var(--color-primary-dark) 100%); color: #fff; border-radius: var(--radius-lg); padding: clamp(48px, 6vw, 80px); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(36,40,56,0.32); }
.offer-banner::after { content: ''; position: absolute; top: 50%; left: -100px; transform: translateY(-50%); width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(96,141,185,0.18), transparent 70%); pointer-events: none; }
.offer-banner__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: center; position: relative; z-index: 2; }
.offer-banner h2 { color: #fff; margin-bottom: 16px; }
.offer-banner h2 strong { color: var(--color-accent); }
.offer-banner p { color: rgba(255,255,255,0.85); margin-bottom: 28px; max-width: 480px; }
.offer-banner::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(255,216,20,0.18), transparent 70%); }
.countdown { display: flex; gap: 14px; margin-bottom: 32px; }
.countdown__unit { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius); padding: 14px 18px; text-align: center; min-width: 78px; backdrop-filter: blur(10px); }
.countdown__num { font-family: var(--font-heading); font-weight: 800; font-size: 2.1rem; color: var(--color-accent); line-height: 1; display: block; margin-bottom: 4px; }
.countdown__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.7); }
.offer-banner__visual { display: flex; align-items: center; justify-content: center; position: relative; }
.offer-banner__big { font-family: var(--font-heading); font-size: clamp(5rem, 12vw, 10rem); font-weight: 900; color: var(--color-accent); line-height: 0.9; letter-spacing: -0.05em; }
.offer-banner__big small { font-size: 0.4em; color: #fff; display: block; margin-bottom: 8px; }
@media (max-width: 900px) { .offer-banner__inner { grid-template-columns: 1fr; gap: 30px; text-align: center; } .offer-banner__inner > div { display: flex; flex-direction: column; align-items: center; } .countdown { justify-content: center; flex-wrap: wrap; } .offer-banner p { margin-left: auto; margin-right: auto; } }

/* ==============================  BRANDS STRIP (Kolpo, Daiwa, etc.)  ============================== */
.brands-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: center; padding: 16px 0; }
.brand-item { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--color-text-light); text-align: center; padding: 22px 12px; border-radius: var(--radius); transition: var(--transition); cursor: pointer; text-transform: uppercase; background: #fff; border: 1px solid var(--color-border); }
.brand-item:hover { color: var(--color-primary); transform: translateY(-3px); border-color: var(--color-primary); box-shadow: var(--shadow); }
@media (max-width: 1024px) { .brands-strip { grid-template-columns: repeat(4, 1fr); gap: 12px; } .brand-item { padding: 18px 10px; font-size: 0.95rem; } }
@media (max-width: 600px) { .brands-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; } .brand-item { padding: 16px 8px; font-size: 0.9rem; } }

/* ==============================  BLOG CARDS  ============================== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); transition: var(--transition); display: flex; flex-direction: column; cursor: pointer; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.blog-card__media { aspect-ratio: 16 / 10; overflow: hidden; position: relative; background: var(--color-bg-alt); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__cat { position: absolute; top: 14px; left: 14px; background: rgba(36,40,56,0.92); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 5px 12px; border-radius: 20px; letter-spacing: 0.04em; text-transform: uppercase; }
.blog-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.blog-card__meta { display: flex; gap: 14px; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 10px; }
.blog-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.blog-card__meta i { width: 13px; height: 13px; }
.blog-card h3 { font-size: 1.15rem; margin-bottom: 10px; line-height: 1.35; }
.blog-card p { color: var(--color-text-muted); font-size: 0.92rem; margin-bottom: 16px; flex: 1; }
.blog-card__more { font-weight: 700; font-size: 0.86rem; color: var(--color-primary); display: inline-flex; align-items: center; gap: 6px; margin-top: auto; }
.blog-card__more i { width: 14px; height: 14px; transition: transform 0.2s; }
.blog-card:hover .blog-card__more i { transform: translateX(4px); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

/* ==============================  NEWSLETTER  ============================== */
.newsletter { background: linear-gradient(115deg, rgba(26,29,41,0.94) 0%, rgba(74,118,160,0.82) 100%), url('../img/pexels-szafran-34238254.jpg') center/cover no-repeat; color: #fff; border-radius: var(--radius-lg); padding: clamp(48px, 7vw, 80px); text-align: center; position: relative; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(36,40,56,0.30); }
.newsletter::before { content: ''; position: absolute; top: -100px; right: -100px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255,216,20,0.20), transparent 65%); pointer-events: none; }
.newsletter > * { position: relative; z-index: 2; }
.newsletter h2 { color: #fff; margin-bottom: 14px; max-width: 720px; margin-left: auto; margin-right: auto; }
.newsletter p { color: rgba(255,255,255,0.88); margin-bottom: 28px; max-width: 600px; margin-left: auto; margin-right: auto; }
.newsletter-form { display: flex; gap: 10px; max-width: 540px; margin: 0 auto; }
.newsletter-form input { flex: 1; background: rgba(255,255,255,0.95); border: 2px solid transparent; padding: 14px 20px; border-radius: 30px; font-size: 0.96rem; }
.newsletter-form input:focus { background: #fff; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(255,216,20,0.3); }
.newsletter-form button { background: var(--color-accent); color: var(--color-secondary); font-weight: 800; padding: 14px 28px; border-radius: 30px; font-size: 0.94rem; letter-spacing: 0.01em; transition: var(--transition); }
.newsletter-form button:hover { background: #fff; transform: scale(1.04); }
.newsletter__note { margin-top: 14px; font-size: 0.8rem; color: rgba(255,255,255,0.7); }
@media (max-width: 600px) { .newsletter-form { flex-direction: column; } .newsletter-form button { width: 100%; } }

/* ==============================  PAGE BANNER (inner pages)  ============================== */
.page-banner { position: relative; background: linear-gradient(125deg, var(--color-secondary) 0%, var(--color-primary) 100%); color: #fff; padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3.5vw, 44px); overflow: hidden; }
.page-banner::before { content: ''; position: absolute; top: -150px; right: -150px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(255,216,20,0.12), transparent 70%); }
.page-banner::after { content: ''; position: absolute; bottom: -100px; left: -100px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(96,141,185,0.4), transparent 70%); }
.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { color: #fff; max-width: 800px; margin-bottom: 8px; font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.18; }
.page-banner p { color: rgba(255,255,255,0.85); max-width: 580px; font-size: 0.94rem; }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-bottom: 14px; }
.breadcrumb a { color: rgba(255,255,255,0.85); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb span.sep { color: rgba(255,255,255,0.4); }
.breadcrumb span.current { color: var(--color-accent); }

/* ==============================  SHOP / CATEGORY  ============================== */
.shop-layout { display: grid; grid-template-columns: 280px 1fr; gap: 36px; }
.shop-sidebar { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0; height: fit-content; position: sticky; top: calc(var(--header-h) + 20px); }
.filter-block { padding: 22px 22px; border-bottom: 1px solid var(--color-border); }
.filter-block:last-child { border-bottom: none; }
.filter-block h4 { font-size: 0.86rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-secondary); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.price-range { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.price-range input { padding: 8px 10px; font-size: 0.86rem; }
.price-range span { color: var(--color-text-muted); }

.shop-main { min-width: 0; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.shop-toolbar__count { font-size: 0.92rem; color: var(--color-text-muted); }
.shop-toolbar__count strong { color: var(--color-secondary); }
.shop-toolbar__actions { display: flex; gap: 12px; align-items: center; }
.shop-toolbar select { padding: 9px 36px 9px 14px; font-size: 0.88rem; min-width: 180px; }
.shop-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.pagination a { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font-weight: 700; font-size: 0.9rem; color: var(--color-secondary); background: #fff; }
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination a.active { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
@media (max-width: 1024px) { .shop-layout { grid-template-columns: 1fr; } .shop-sidebar { position: static; } .shop-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .shop-products { grid-template-columns: 1fr 1fr; gap: 14px; } }
/* "Produse din aceeași categorie" (related block, no sidebar) — 4 per row */
.related-products .shop-products { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .related-products .shop-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .related-products .shop-products { grid-template-columns: repeat(2, 1fr); } }

/* ==============================  PRODUCT DETAIL  ============================== */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 36px 0; }
.product-gallery__main { aspect-ratio: 1; background: #fff; border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; position: relative; }
.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 14px; cursor: zoom-in; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.96); color: var(--color-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(36,40,56,0.18); transition: var(--transition); z-index: 3; border: none; }
.gallery-arrow:hover { background: var(--color-accent); transform: translateY(-50%) scale(1.08); }
.gallery-arrow.gallery-prev { left: 14px; }
.gallery-arrow.gallery-next { right: 14px; }
.gallery-arrow i, .gallery-arrow svg { width: 20px; height: 20px; stroke-width: 2.4; pointer-events: none; }
.thumb img { pointer-events: none; }
.no-image { width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; background: linear-gradient(135deg, var(--color-bg-alt), #e0e7f0); color: var(--color-text-light); padding: 16px; }
.no-image i { width: 36px; height: 36px; opacity: 0.45; stroke-width: 1.4; }
.no-image span { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; opacity: 0.6; text-align: center; }
.cat-card .no-image { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: rgba(255,255,255,0.7); }
.cat-card .no-image i { opacity: 0.55; }
.cat-card .no-image span { opacity: 0.75; }
.team-avatar { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.6rem); color: #fff; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); }
.product-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.thumb { aspect-ratio: 1; background: var(--color-bg-alt); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: var(--transition); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.active, .thumb:hover { border-color: var(--color-primary); }
.thumb img { object-fit: contain; padding: 4px; }
/* cover is already shown as the main image — don't repeat it in the thumbnail strip
   (kept in DOM so gallery arrows + lightbox still cycle through every image) */
.product-gallery__thumbs .thumb--cover { display: none; }

/* Product image lightbox (click-to-zoom) */
.pesc-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(15,18,28,0.92); animation: pescLbIn 0.18s ease; }
@keyframes pescLbIn { from { opacity: 0; } to { opacity: 1; } }
.pesc-lightbox__img { max-width: 92vw; max-height: 92vh; object-fit: contain; background: #fff; border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,0.55); }
.pesc-lightbox__close { position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.pesc-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.pesc-lightbox__prev { left: 20px; }
.pesc-lightbox__next { right: 20px; }
.pesc-lightbox__close:hover, .pesc-lightbox__nav:hover { background: rgba(255,255,255,0.3); }
@media (max-width: 640px) { .pesc-lightbox__nav { width: 44px; height: 44px; font-size: 24px; } .pesc-lightbox__prev { left: 8px; } .pesc-lightbox__next { right: 8px; } }
.product-info__brand { font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); font-weight: 700; margin-bottom: 8px; }
.product-info h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 16px; line-height: 1.2; }
.product-info__rating { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 0.92rem; color: var(--color-text-muted); }
.product-info__rating .stars { color: var(--color-accent); display: inline-flex; }
.product-info__rating .stars i { width: 18px; height: 18px; fill: currentColor; }
.product-variants { margin-bottom: 22px; }
.product-variants__label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: 10px; }
.product-variants__row { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-pill { padding: 9px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; font-weight: 600; font-size: 0.9rem; color: var(--color-secondary); cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 6px; }
.variant-pill:hover { border-color: var(--color-primary); }
.variant-pill.active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }
.variant-pill.disabled { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.variant-pill__sub { font-size: 0.74rem; color: var(--color-text-muted); font-weight: 500; }
.variant-pill.active .variant-pill__sub { color: var(--color-primary); }

.variants-table { margin-top: 24px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.variants-table__head { background: var(--color-bg-alt); padding: 12px 18px; font-size: 0.84rem; font-weight: 700; color: var(--color-secondary); display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 12px; align-items: center; }
.variants-table__row { padding: 14px 18px; display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 12px; align-items: center; border-top: 1px solid var(--color-border); font-size: 0.92rem; }
.variants-table__row:hover { background: var(--color-bg-alt); }
.variants-table__name { font-weight: 600; color: var(--color-secondary); }
.variants-table__name .ref { font-size: 0.74rem; color: var(--color-text-muted); display: block; font-weight: 500; margin-top: 2px; }
.variants-table__price { font-family: var(--font-heading); font-weight: 800; color: var(--color-secondary); }
.variants-table__stock { font-size: 0.84rem; color: var(--color-text-muted); }
.variants-table__stock.in { color: var(--color-success); font-weight: 600; }
.variants-table__stock.low { color: var(--color-warning); font-weight: 600; }
.variants-table__add { padding: 8px 14px; background: var(--color-secondary); color: #fff; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 700; transition: var(--transition); cursor: pointer; border: none; white-space: nowrap; }
.variants-table__add:hover { background: var(--color-accent); color: var(--color-secondary); }
@media (max-width: 640px) {
  .variants-table__head, .variants-table__row { grid-template-columns: 1fr 1fr; }
  .variants-table__head > :nth-child(3), .variants-table__head > :nth-child(4) { display: none; }
  .variants-table__stock, .variants-table__add { grid-column: 1 / -1; }
}

.product-info__price { background: var(--color-bg-alt); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 26px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.product-info__price-current { font-family: var(--font-heading); font-weight: 800; font-size: 2.4rem; color: var(--color-secondary); line-height: 1; }
.product-info__price-old { font-size: 1.1rem; text-decoration: line-through; color: var(--color-text-light); }
.product-info__discount { background: var(--color-accent); color: var(--color-secondary); font-weight: 800; font-size: 0.86rem; padding: 4px 10px; border-radius: var(--radius-xs); margin-left: auto; font-family: var(--font-heading); }
.product-info__short { color: var(--color-text-muted); margin-bottom: 26px; line-height: 1.7; }
.product-info__attrs { margin-bottom: 26px; }
.attr-row { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.attr-row:last-child { border-bottom: none; }
.attr-row strong { min-width: 130px; color: var(--color-secondary); font-weight: 700; }
.attr-row span { color: var(--color-text-muted); }
.attr-row .stock-yes { color: var(--color-success); font-weight: 700; }
.qty-add-row { display: flex; gap: 12px; margin-bottom: 22px; align-items: stretch; }
.qty-selector { display: flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; }
.qty-selector button { width: 36px; height: 40px; font-size: 1.15rem; font-weight: 700; color: var(--color-secondary); transition: background 0.2s; }
.qty-selector button:hover { background: var(--color-bg-alt); }
.qty-selector input { width: 40px; text-align: center; border: none; padding: 0; font-weight: 700; font-size: 1rem; background: transparent; -moz-appearance: textfield; }
.qty-selector input::-webkit-outer-spin-button, .qty-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-selector input:focus { box-shadow: none; }
.qty-add-row .btn { flex: 1; }
.product-info__actions { display: flex; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; font-size: 0.9rem; color: var(--color-text-muted); }
.product-info__actions a, .product-info__actions .pesc-fav-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; transition: color 0.2s; background: none; border: none; padding: 0; font: inherit; color: var(--color-text-muted); }
.product-info__actions a:hover, .product-info__actions .pesc-fav-btn:hover { color: var(--color-primary); }
.product-info__actions i { width: 16px; height: 16px; }
.product-info__actions .pesc-fav-btn.is-active { color: #e11d48; }
.product-info__actions .pesc-fav-btn.is-active i { fill: #e11d48; }
.product-info__features { background: var(--color-primary-light); border: 1px solid rgba(96,141,185,0.2); border-radius: var(--radius); padding: 16px 20px; }
.product-info__features div { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.88rem; color: var(--color-secondary); }
.product-info__features i { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }
@media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; gap: 40px; padding: 30px 0; } }

.product-tabs { padding: 36px 0; border-top: 1px solid var(--color-border); }
.tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--color-border); margin-bottom: 30px; overflow-x: auto; }
.tab-nav button { padding: 14px 24px; font-weight: 700; font-size: 0.94rem; color: var(--color-text-muted); position: relative; transition: color 0.2s; white-space: nowrap; }
.tab-nav button:hover { color: var(--color-primary); }
.tab-nav button.active { color: var(--color-secondary); }
.tab-nav button.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px; background: var(--color-accent); }
.tab-pane { display: none; max-width: 900px; }
.tab-pane.active { display: block; animation: fadeIn 0.3s; }
.tab-pane h3 { margin: 24px 0 12px; font-size: 1.18rem; }
.tab-pane p { color: var(--color-text-muted); line-height: 1.75; margin-bottom: 14px; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--color-border); }
.spec-table td { padding: 12px 16px; font-size: 0.92rem; }
.spec-table td:first-child { font-weight: 700; color: var(--color-secondary); width: 35%; background: var(--color-bg-alt); }
.spec-table td:last-child { color: var(--color-text-muted); }
.review-item { padding: 22px 0; border-bottom: 1px solid var(--color-border); }
.review-item:last-child { border-bottom: none; }
.review-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.review-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-heading); }
.review-name { font-weight: 700; }
.review-date { font-size: 0.82rem; color: var(--color-text-muted); }
.review-stars { color: var(--color-accent); display: inline-flex; gap: 2px; }
.review-stars i { width: 14px; height: 14px; fill: currentColor; }

/* ==============================  CART  ============================== */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; padding: 36px 0 64px; align-items: start; }
.cart-table { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }

/* shared column template for head + rows */
.cart-table__head, .cart-row { display: grid; grid-template-columns: 64px minmax(110px, 1fr) 88px 120px 92px 40px; gap: 14px; align-items: center; min-width: 0; }
.cart-table__head { padding: 14px 18px; background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.cart-table__head-price, .cart-table__head-qty, .cart-table__head-total { text-align: center; }

.cart-row { padding: 20px 18px; border-bottom: 1px solid var(--color-border); }
.cart-row:last-of-type { border-bottom: none; }
.cart-row__img { width: 64px; height: 64px; border-radius: var(--radius-sm); background: var(--color-bg-alt); overflow: hidden; border: 1px solid var(--color-border); }
.cart-row__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__img a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.cart-row__noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cart-row__noimg i { width: 22px; height: 22px; color: var(--color-text-muted); opacity: 0.45; }
.cart-row__info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cart-row__name { font-weight: 700; font-size: 1rem; line-height: 1.35; color: var(--color-secondary); text-decoration: none; }
.cart-row__name:hover { color: var(--color-primary); }
.cart-row__brand { font-size: 0.8rem; color: var(--color-text-muted); }
.cart-row__ref { font-size: 0.78rem; color: var(--color-text-muted); }
.cart-row__attrs { font-size: 0.8rem; color: var(--color-text-muted); }
.cart-row__price { font-weight: 700; color: var(--color-secondary); text-align: center; white-space: nowrap; }
.cart-row__price-label, .cart-row__total-label { display: none; }
.cart-row__qty { display: flex; justify-content: center; }
.cart-row__total { font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; text-align: center; white-space: nowrap; color: var(--color-secondary); }
.cart-row__remove { display: flex; justify-content: center; }
.cart-row__remove a { width: 38px; height: 38px; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-danger); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.cart-row__remove a:hover { background: var(--color-danger); color: #fff; }
.cart-row__remove i { width: 16px; height: 16px; }

.cart-coupon { margin: 20px 24px 24px; background: var(--color-bg-alt); border: 1px dashed var(--color-border-strong); border-radius: var(--radius); padding: 18px 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cart-coupon input { flex: 1; min-width: 200px; }
.cart-summary { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; height: fit-content; position: sticky; top: calc(var(--header-h) + 20px); }
.cart-summary h3 { margin-bottom: 18px; font-size: 1.2rem; }
.cart-summary__row { display: flex; justify-content: space-between; padding: 11px 0; font-size: 0.95rem; }
.cart-summary__row.total { border-top: 2px solid var(--color-border); margin-top: 10px; padding-top: 16px; font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--color-secondary); }
.cart-summary__row .free { color: var(--color-success); font-weight: 700; }

@media (max-width: 992px) { .cart-layout { grid-template-columns: 1fr; } .cart-summary { position: static; } }
@media (max-width: 600px) {
  .cart-table__head { display: none; }
  .cart-row { grid-template-columns: 72px 1fr; grid-template-areas: "img info" "img price" "qty total" "remove remove"; gap: 8px 14px; padding: 18px; }
  .cart-row__img { grid-area: img; align-self: start; }
  .cart-row__info { grid-area: info; }
  .cart-row__price { grid-area: price; text-align: left; }
  .cart-row__qty { grid-area: qty; justify-content: flex-start; margin-top: 8px; }
  .cart-row__total { grid-area: total; text-align: right; align-self: center; margin-top: 8px; }
  .cart-row__remove { grid-area: remove; justify-content: flex-start; margin-top: 6px; }
  .cart-row__price-label, .cart-row__total-label { display: inline; font-size: 0.74rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 6px; }
}

/* ==============================  CHECKOUT  ============================== */
.checkout-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; padding: 36px 0 64px; }
.checkout-section { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 18px; }
.checkout-section h3 { font-size: 1.18rem; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.checkout-section h3 .step-num { width: 30px; height: 30px; background: var(--color-primary); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.92rem; font-weight: 800; font-family: var(--font-heading); }
.shipping-options, .payment-options { display: grid; gap: 12px; }
.option-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); }
.option-card:hover { border-color: var(--color-primary); }
.option-card input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-primary); }
.option-card.checked { border-color: var(--color-primary); background: var(--color-primary-light); }
.option-card__title { font-weight: 700; margin-bottom: 2px; }
.option-card__sub { font-size: 0.84rem; color: var(--color-text-muted); }
.option-card__price { font-weight: 800; color: var(--color-secondary); margin-left: auto; font-family: var(--font-heading); }
.checkout-summary { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; height: fit-content; position: sticky; top: calc(var(--header-h) + 20px); }
.checkout-summary h3 { font-size: 1.18rem; margin-bottom: 18px; }
.summary-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.summary-item__img { width: 60px; height: 60px; border-radius: var(--radius-sm); background: var(--color-bg-alt); border: 1px solid var(--color-border); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.summary-item__img img { width: 100%; height: 100%; object-fit: cover; }
.summary-item__noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.summary-item__noimg i { width: 20px; height: 20px; color: var(--color-text-muted); opacity: 0.45; }
.summary-item__name { font-size: 0.86rem; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.summary-item__qty { font-size: 0.78rem; color: var(--color-text-muted); }
.summary-item__price { font-weight: 700; font-size: 0.92rem; margin-left: auto; }
.summary-totals { padding-top: 14px; }
.summary-totals .cart-summary__row.total { font-size: 1.2rem; }
.checkout-summary .btn[data-link-action="confirm-checkout-order"], .checkout-summary .btn-lg.btn-block { margin-top: 18px; }
.checkout-summary__secure { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.4; }
.checkout-summary__secure svg, .checkout-summary__secure i { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-success); }

/* cart summary action buttons + trust list */
.cart-summary .btn-block { margin-top: 12px; }
.cart-summary .btn-block:first-of-type, .cart-summary .cart-summary__row.total + .btn-block { margin-top: 18px; }
.cart-summary .btn-lg.btn-block { padding: 15px 20px; }
.cart-summary__trust { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 12px; }
.cart-summary__trust li { display: flex; align-items: center; gap: 11px; font-size: 0.88rem; color: var(--color-text-muted); }
.cart-summary__trust li svg, .cart-summary__trust li i { width: 19px; height: 19px; flex-shrink: 0; color: var(--color-primary); }
@media (max-width: 1024px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-summary { position: static; } }

/* ==============================  ACCOUNT  ============================== */
.account-wrap { max-width: 1300px; margin: 0 auto; padding: 36px 0 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.account-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 36px; }
.account-card h2 { margin-bottom: 8px; font-size: 1.5rem; }
.account-card p { color: var(--color-text-muted); margin-bottom: 24px; }
.account-card__benefits { padding-left: 0; margin-bottom: 0; }
.account-card__benefits li { padding: 8px 0; display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; }
.account-card__benefits i { color: var(--color-success); flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; }
.account-card__forgot { text-align: right; font-size: 0.82rem; margin-bottom: 14px; color: var(--color-primary); font-weight: 600; }
.account-card__social { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.account-card__social-row { display: flex; gap: 10px; margin-top: 12px; }
.social-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.86rem; background: #fff; transition: var(--transition); }
.social-btn:hover { border-color: var(--color-primary); transform: translateY(-1px); }
@media (max-width: 800px) { .account-wrap { grid-template-columns: 1fr; } }

/* ==============================  CONTACT  ============================== */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; padding: 36px 0; }
.contact-form-wrap { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 36px; }
.contact-info { display: flex; flex-direction: column; gap: 22px; }
.contact-info-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px; display: flex; gap: 16px; }
.contact-info-card__icon { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-card__icon i { width: 22px; height: 22px; }
.contact-info-card h4 { font-size: 0.94rem; margin-bottom: 6px; }
.contact-info-card p { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.5; }
.contact-map { margin-top: 0; height: 360px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); }
.contact-map iframe { width: 100%; height: 100%; border: 0; }
.social-links { display: flex; gap: 10px; margin-top: 14px; }
.social-link { width: 42px; height: 42px; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-secondary); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.social-link:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }
.social-link i { width: 18px; height: 18px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ==============================  ABOUT  ============================== */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-intro__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; background: var(--color-bg-alt); position: relative; }
.about-intro__img img { width: 100%; height: 100%; object-fit: cover; }
.about-intro__img::before { content: ''; position: absolute; bottom: -30px; left: -30px; width: 180px; height: 180px; border-radius: 50%; background: var(--color-accent); z-index: -1; }
@media (max-width: 900px) { .about-intro { grid-template-columns: 1fr; gap: 30px; } }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card { background: #fff; border-radius: var(--radius); padding: 32px 28px; border-left: 4px solid var(--color-accent); }
.value-card__num { font-family: var(--font-heading); font-weight: 900; font-size: 3rem; color: var(--color-primary); line-height: 1; margin-bottom: 14px; letter-spacing: -0.04em; }
.value-card h3 { margin-bottom: 10px; font-size: 1.15rem; }
.value-card p { color: var(--color-text-muted); font-size: 0.94rem; line-height: 1.65; }
@media (max-width: 800px) { .values-grid { grid-template-columns: 1fr; } }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat-num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.4rem, 4.5vw, 3.4rem); color: var(--color-accent); line-height: 1; margin-bottom: 6px; letter-spacing: -0.03em; }
.stat-label { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); font-weight: 600; }
@media (max-width: 700px) { .stats-row { grid-template-columns: 1fr 1fr; gap: 24px; } }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; text-align: center; transition: var(--transition); }
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.team-card__img { aspect-ratio: 1; overflow: hidden; background: var(--color-bg-alt); }
.team-card__img img { width: 100%; height: 100%; object-fit: cover; }
.team-card__body { padding: 22px; }
.team-card h4 { margin-bottom: 4px; }
.team-card__role { font-size: 0.84rem; color: var(--color-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .team-card__body { padding: 14px; } }

.cta-banner { background: linear-gradient(125deg, var(--color-secondary) 0%, var(--color-primary-dark) 100%); color: #fff; border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 60px); text-align: center; position: relative; overflow: hidden; }
.cta-banner h2 { color: #fff; margin-bottom: 14px; max-width: 720px; margin-left: auto; margin-right: auto; }
.cta-banner p { color: rgba(255,255,255,0.85); max-width: 580px; margin: 0 auto 28px; }

/* ==============================  LEGAL PAGES  ============================== */
.legal-content { padding: 40px 0 60px; max-width: 1190px; margin: 0 auto; }
.legal-content h2 { margin: 32px 0 14px; font-size: 1.5rem; }
.legal-content h3 { margin: 22px 0 10px; font-size: 1.15rem; color: var(--color-primary); }
.legal-content p { color: var(--color-text-muted); line-height: 1.8; margin-bottom: 14px; }
.legal-content ul { margin: 12px 0 18px 22px; }
.legal-content ul li { padding: 4px 0; color: var(--color-text-muted); list-style: disc; }
.legal-content strong { color: var(--color-secondary); }

/* ==============================  FOOTER  ============================== */
footer { background: var(--color-secondary-deep); color: rgba(255,255,255,0.78); padding: 80px 0 0; position: relative; }
footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-primary) 100%); }
/* form footers (login/register/account) must NOT inherit the dark site-footer styling */
.form-footer { background: transparent; color: inherit; padding: 0; position: static; margin-top: 18px; display: flex; justify-content: flex-start; }
.form-footer::before { content: none; display: none; }
.form-footer .btn { min-width: 160px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 50px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-col h5 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 20px; font-weight: 700; }
.footer-col ul li { padding: 6px 0; }
.footer-col ul a { font-size: 0.92rem; color: rgba(255,255,255,0.75); transition: color 0.2s, padding-left 0.2s; display: inline-flex; align-items: center; gap: 6px; }
.footer-col ul a:hover { color: var(--color-accent); padding-left: 4px; }
.footer-brand .footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-brand .footer-logo img { height: auto; width: auto; max-width: 240px; max-height: 46px; opacity: 0.95; }
.footer-brand p { font-size: 0.9rem; color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 18px; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 0.9rem; color: rgba(255,255,255,0.78); }
.footer-contact-list li i { width: 16px; height: 16px; color: var(--color-accent); margin-top: 4px; flex-shrink: 0; }
.footer-payments { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.payment-pill { padding: 6px 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-xs); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; color: rgba(255,255,255,0.8); }
.footer-bottom { padding: 22px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 0.84rem; color: rgba(255,255,255,0.6); }
.footer-bottom a { color: rgba(255,255,255,0.85); }
.footer-bottom a:hover { color: var(--color-accent); }
.anpc-banners { display: flex; gap: 10px; align-items: center; }
.anpc-banners img { height: 40px; width: auto; opacity: 0.95; transition: opacity 0.2s; }
.anpc-banners a:hover img { opacity: 1; }
.trater-credit { color: #89D6FB !important; font-weight: 700; }
.trater-credit:hover { color: #89D6FB !important; opacity: 0.85; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; } .footer-bottom { flex-direction: column; text-align: center; } }

/* ==============================  COOKIE BANNER  ============================== */
/* ===== Cookie consent banner ===== */
#cookie-banner { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 170%); width: calc(100% - 32px); max-width: 1080px; background: #fff; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 16px; padding: 18px 22px; box-shadow: 0 16px 48px rgba(36,40,56,0.22); z-index: 1100; opacity: 0; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s; }
#cookie-banner.show { transform: translate(-50%, 0); opacity: 1; }
.cookie-banner__inner { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cookie-banner__text { flex: 1; min-width: 240px; }
.cookie-banner__text strong { display: block; font-size: 0.98rem; margin-bottom: 4px; color: var(--color-secondary); }
.cookie-banner__text p { font-size: 0.86rem; color: var(--color-text-muted); line-height: 1.5; margin: 0; }
.cookie-banner__text a { color: var(--color-primary); font-weight: 600; }
.cookie-banner__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cookie-banner__actions .btn { padding: 10px 20px; min-height: 42px; font-size: 0.85rem; }
@media (max-width: 760px) { .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 14px; } .cookie-banner__actions .btn { flex: 1; } }
@media (max-width: 600px) { #cookie-banner { left: 8px; right: 8px; width: auto; transform: translateY(170%); } #cookie-banner.show { transform: translateY(0); } }

/* ===== Cookie preferences modal ===== */
#cookie-modal { position: fixed; inset: 0; z-index: 1200; display: none; }
#cookie-modal.open { display: block; }
.cookie-modal__overlay { position: absolute; inset: 0; background: rgba(20,22,33,0.55); }
.cookie-modal__box { position: relative; max-width: 540px; width: calc(100% - 32px); margin: 7vh auto 0; max-height: 86vh; overflow-y: auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.32); }
.cookie-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--color-border); }
.cookie-modal__head h3 { margin: 0; font-size: 1.2rem; }
.cookie-modal__close { background: none; border: none; cursor: pointer; color: var(--color-text-muted); display: inline-flex; padding: 4px; }
.cookie-modal__close:hover { color: var(--color-text); }
.cookie-modal__body { padding: 16px 24px; }
.cookie-modal__body > p { font-size: 0.88rem; color: var(--color-text-muted); margin: 0 0 16px; line-height: 1.5; }
.cookie-modal__body > p a { color: var(--color-primary); font-weight: 600; }
.cookie-cat { padding: 14px 0; border-top: 1px solid var(--color-border); }
.cookie-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-cat__title { font-weight: 700; font-size: 0.95rem; }
.cookie-cat__always { font-size: 0.76rem; font-weight: 700; color: var(--color-primary); background: var(--color-primary-light, #eef3f8); padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.cookie-cat__desc { font-size: 0.83rem; color: var(--color-text-muted); margin: 7px 0 0; line-height: 1.45; }
.cookie-modal__foot { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--color-border); }
.cookie-modal__foot .btn { flex: 1; min-width: 130px; padding: 11px 14px; font-size: 0.84rem; }
body.cookie-lock { overflow: hidden; }
.cookie-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.cookie-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cookie-switch__slider { position: absolute; inset: 0; background: #cbd2dc; border-radius: 26px; transition: background 0.2s; }
.cookie-switch__slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.cookie-switch input:checked + .cookie-switch__slider { background: var(--color-primary); }
.cookie-switch input:checked + .cookie-switch__slider::before { transform: translateX(20px); }
.cookie-settings-link { background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.cookie-settings-link:hover { color: var(--color-accent); }

/* ==============================  BACK TO TOP  ============================== */
#back-to-top { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s, transform 0.3s, background 0.2s; z-index: 997; }
#back-to-top.show { opacity: 1; visibility: visible; pointer-events: auto; }
#back-to-top:hover { background: var(--color-secondary); transform: translateY(-3px); }
#back-to-top i { width: 22px; height: 22px; }

/* ==============================  WHATSAPP FLOAT  ============================== */
#whatsapp-float { position: fixed; bottom: 24px; left: 24px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37,211,102,0.4); z-index: 997; transition: transform 0.2s; }
#whatsapp-float:hover { transform: scale(1.08); color: #fff; }
#whatsapp-float i { width: 30px; height: 30px; }
@media (max-width: 600px) { #whatsapp-float { bottom: 88px; left: 16px; width: 50px; height: 50px; } #whatsapp-float i { width: 26px; height: 26px; } }

/* ==============================  REVEAL ANIMATION  ============================== */
.reveal { transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
html.has-anim .reveal:not(.in) { opacity: 0; transform: translateY(24px); }
.reveal.in { opacity: 1; transform: translateY(0); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ==============================  ELEMENTOR EDITOR — FORCE REVEAL  ============================== */
body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal:not(.in) { opacity: 1 !important; transform: none !important; }

/* ============================== HEADER NAV CATEGORIES ============================== */
.primary-nav { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; align-items: stretch; }
.primary-nav__item { position: relative; }
.primary-nav__item > a { display: inline-flex; align-items: center; gap: 6px; padding: 14px 16px; color: rgba(255,255,255,0.92); text-decoration: none; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em; transition: color 0.18s, background 0.18s; }
.primary-nav__item > a:hover { color: var(--color-primary); background: rgba(255,255,255,0.05); }
.primary-nav__item.has-mega:hover > a::after { transform: rotate(180deg); opacity: 1; }
.primary-nav__item.has-mega > a::after { transition: transform 0.2s, opacity 0.2s; }
/* full-width mega menu: the panel spans the whole header (anchored to the fixed
   header), so every dropdown opens edge-to-edge and can never overflow/flip. */
.main-nav .primary-nav__item { position: static; }
.mega-menu { position: absolute; top: 100%; left: 0; right: 0; width: auto; background: #fff; box-shadow: 0 22px 44px rgba(24,33,51,0.16); border-top: 3px solid var(--color-primary); padding: 26px 0 30px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; z-index: 998; max-height: calc(100vh - var(--header-h) - 16px); overflow-y: auto; }
.mega-menu > .container { display: block; width: 100%; }
.primary-nav__item.has-mega:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* header: bold section title + "view all" cta */
.mega-menu__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.mega-menu__title { font-family: var(--font-heading); font-weight: 800; font-size: 0.86rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-secondary); }
/* a.mega-menu__all so it beats the theme's ".main-nav a { color:#fff }" rule (was invisible on white) */
.mega-menu a.mega-menu__all { display: inline-flex; align-items: center; gap: 5px; padding: 0; font-size: 0.8rem; font-weight: 700; color: var(--color-primary); background: none; text-decoration: none; white-space: nowrap; transition: gap 0.18s, color 0.18s; }
.mega-menu a.mega-menu__all:hover { color: var(--color-primary-dark); background: none; gap: 9px; }
.mega-menu__all i { width: 16px; height: 16px; }
/* grouped: even columns that fill the full width, labelled in bold */
.mega-menu__groups { display: grid; grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr)); gap: 26px 40px; }
.mega-menu__group { min-width: 0; }
.mega-menu__group-title { display: block; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 11px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
/* reset the theme's global ".main-nav ul { display:flex }" so menu items stack one-per-line */
.main-nav .mega-menu ul { display: block; }
.mega-menu__group ul, .mega-menu__flat { list-style: none; margin: 0; padding: 0; }
.mega-menu__group li, .mega-menu__flat li { display: block; }
/* small categories without curated groups: items stacked into a few balanced columns */
.mega-menu__flat { column-count: var(--mega-cols, 2); column-gap: 40px; }
.mega-menu__flat li { break-inside: avoid; }
.mega-menu__group a, .mega-menu__flat a { display: block; padding: 7px 6px 7px 0; color: var(--color-text-muted); font-size: 0.875rem; font-weight: 500; line-height: 1.3; text-decoration: none; transition: color 0.15s, padding 0.15s; }
.mega-menu__group a:hover, .mega-menu__flat a:hover { color: var(--color-primary); padding-left: 7px; }

/* ==============================  CATEGORII flyout menu (single button, marelepescar-style)  ============================== */
.cat-menu { position: relative; display: flex; align-items: stretch; }
.cat-menu__trigger { display: inline-flex; align-items: center; gap: 9px; padding: 0 22px; height: 100%; min-height: 48px; background: var(--color-primary); color: #fff; border: none; font-family: inherit; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; cursor: pointer; transition: background 0.18s; }
.cat-menu__trigger:hover, .cat-menu.open .cat-menu__trigger { background: var(--color-primary-dark, #b8420f); }
.cat-menu__trigger i { width: 19px; height: 19px; }
.cat-menu__trigger .cat-menu__caret { width: 15px; height: 15px; opacity: 0.85; transition: transform 0.2s; }
.cat-menu:hover .cat-menu__trigger .cat-menu__caret, .cat-menu.open .cat-menu__caret { transform: rotate(180deg); }

.cat-menu__flyout { position: absolute; top: 100%; left: 0; display: flex; width: min(1080px, calc(100vw - 32px)); background: #fff; box-shadow: 0 24px 48px rgba(24,33,51,0.20); border-top: 3px solid var(--color-primary); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; z-index: 999; max-height: calc(100vh - var(--header-h) - 12px); border-radius: 0 0 10px 10px; overflow: hidden; }
.cat-menu:hover .cat-menu__flyout, .cat-menu.open .cat-menu__flyout { opacity: 1; visibility: visible; transform: translateY(0); }

.main-nav .cat-menu__macros { display: block; flex-wrap: nowrap; list-style: none; margin: 0; padding: 10px 0; width: 268px; flex-shrink: 0; background: var(--color-bg-alt, #f5f6f8); border-right: 1px solid var(--color-border, #e5e7eb); overflow-y: auto; }
.cat-menu__macros li { position: relative; }
.main-nav .cat-macro > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 20px; color: var(--color-secondary, #242838); font-weight: 600; font-size: 0.9rem; line-height: 1.25; }
.main-nav .cat-macro.is-active > a, .main-nav .cat-macro:hover > a { background: #fff; color: var(--color-primary); box-shadow: inset 3px 0 0 var(--color-primary); }
.main-nav .cat-macro > a i { width: 15px; height: 15px; opacity: 0.5; flex-shrink: 0; }

.cat-menu__panels { position: relative; flex: 1; min-width: 0; padding: 24px 30px; overflow-y: auto; }
.cat-panel { display: none; }
.cat-panel.is-active { display: block; animation: catPanelIn 0.16s ease; }
@keyframes catPanelIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.cat-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.cat-panel__title { font-family: var(--font-heading); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-secondary); }
.main-nav .cat-panel a.cat-panel__all { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: var(--color-primary); font-weight: 700; font-size: 0.8rem; white-space: nowrap; background: none; }
.main-nav .cat-panel a.cat-panel__all:hover { color: var(--color-primary-dark, #b8420f); gap: 8px; }
.cat-panel__all i { width: 15px; height: 15px; }
.main-nav .cat-panel__flat { display: block; list-style: none; margin: 0; padding: 0; column-count: 3; column-gap: 34px; }
.cat-panel__flat li { break-inside: avoid; }
.main-nav .cat-panel__groups { display: grid; grid-template-columns: repeat(var(--cat-cols, 3), minmax(0, 1fr)); gap: 20px 34px; }
.main-nav .cat-panel__groups ul { display: block; list-style: none; margin: 0; padding: 0; }
.cat-panel__group-title { display: block; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 8px; }
.main-nav .cat-panel__flat a, .main-nav .cat-panel__group a { display: block; padding: 7px 0; color: var(--color-text-muted, #566072); font-size: 0.9rem; font-weight: 500; line-height: 1.3; }
.main-nav .cat-panel__flat a:hover, .main-nav .cat-panel__group a:hover { color: var(--color-primary); padding-left: 6px; }
.cat-panel__empty { color: var(--color-text-muted); font-size: 0.92rem; margin: 6px 0 0; }

/* quick links to the right of the Categorii button */
.main-nav .nav-quick { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; list-style: none; margin: 0 0 0 8px; padding: 0; }
.main-nav .nav-quick a { display: flex; align-items: center; padding: 13px 15px; color: rgba(255,255,255,0.9); font-weight: 600; font-size: 0.88rem; }
.main-nav .nav-quick a:hover { color: var(--color-accent); }

@media (max-width: 1024px) {
  .main-nav { display: none; }
}

/* mobile menu submenu */
.mobile-menu__list .has-sub > a { position: relative; }
.mobile-menu__list .has-sub .caret { transition: transform 0.2s; margin-left: auto; }
.mobile-menu__list .has-sub.open > a .caret { transform: rotate(180deg); }
.mobile-menu__list .mobile-submenu { list-style: none; padding: 4px 0 8px 16px; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
.mobile-menu__list .has-sub.open .mobile-submenu { max-height: 800px; }
.mobile-menu__list .mobile-submenu a { padding: 8px 12px; font-size: 0.92rem; color: rgba(255,255,255,0.78); border: none; }
.mobile-menu__list .mobile-submenu a:hover { color: var(--color-primary); }

/* ============================== PAGE BANNER COMPACT ============================== */
.page-banner { padding: clamp(18px, 2.6vw, 32px) 0 clamp(16px, 2.4vw, 28px); }
.page-banner h1 { margin-bottom: 4px; font-size: clamp(1.45rem, 2.8vw, 2rem); }
.section--shop { padding: clamp(20px, 2.5vw, 32px) 0 clamp(40px, 5vw, 60px); }
.page-banner + .section--shop { padding-top: clamp(16px, 2vw, 28px); }
.page-banner .breadcrumb { margin-bottom: 8px; font-size: 0.82rem; }

/* ============================== SIDEBAR TOGGLE MOBILE ============================== */
.sidebar-toggle { display: none; }
@media (max-width: 1024px) {
  .sidebar-toggle { display: inline-flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text); font-weight: 600; font-size: 0.92rem; cursor: pointer; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: all 0.18s; }
  .sidebar-toggle:hover { border-color: var(--color-primary); }
  .sidebar-toggle .caret { margin-left: auto; transition: transform 0.2s; }
  .shop-sidebar.open ~ * .sidebar-toggle .caret, .sidebar-toggle.open .caret { transform: rotate(180deg); }
  .shop-sidebar { max-height: 0; overflow: hidden; padding: 0; border: none; transition: max-height 0.32s ease, margin 0.2s; margin: 0; }
  .shop-sidebar.open { max-height: 2400px; margin-bottom: 18px; }
  .shop-sidebar__inner { padding: 4px 0; }
}

/* ============================== WISHLIST / FAVORITES ============================== */
.product-card__wishlist { background: rgba(255,255,255,0.92); border: 1px solid var(--color-border); border-radius: 50%; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.18s; padding: 0; }
.product-card__wishlist i { width: 18px; height: 18px; color: var(--color-text-muted); transition: color 0.18s, fill 0.18s; }
.product-card__wishlist:hover { background: #fff; transform: scale(1.06); }
.product-card__wishlist:hover i { color: #e11d48; }
.product-card__wishlist.is-active { background: #fff; border-color: #fecdd3; }
.product-card__wishlist.is-active i { color: #e11d48; fill: #e11d48; }

.acc-link.fav-link { position: relative; }
.acc-link.fav-link .badge { background: #e11d48; color:#fff; font-size: 0.7rem; min-width:18px; height:18px; border-radius: 9px; padding:0 5px; display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 2px; right: 2px; font-weight: 700; }

.pesc-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(15,23,42,0.94); color: #fff; padding: 12px 22px; border-radius: 28px; font-size: 0.92rem; font-weight: 500; box-shadow: 0 12px 30px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.22s, transform 0.22s; z-index: 9999; pointer-events: none; }
.pesc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* wishlist page hero */
.wishlist-hero { background: linear-gradient(125deg, var(--color-secondary) 0%, var(--color-primary) 100%); color: #fff; padding: clamp(28px, 4vw, 48px) 0; text-align: center; }
.wishlist-hero h1 { color: #fff; margin-bottom: 6px; }
.wishlist-hero p { color: rgba(255,255,255,0.85); margin: 0; }

@media (max-width: 600px) { .acc-link.fav-link span:not(.badge) { display: none; } }

/* ============================== LIVE SEARCH AUTOCOMPLETE ============================== */
.pesc-search-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.16); z-index: 999; overflow: hidden; display: none; max-height: 70vh; overflow-y: auto; }
.pesc-search-dropdown.open { display: block; animation: fadeIn 0.16s ease; }
.pesc-search-loading, .pesc-search-empty { padding: 18px 20px; color: var(--color-text-muted); font-size: 0.9rem; text-align: center; }
.pesc-search-item { display: flex; align-items: center; gap: 14px; padding: 11px 16px; text-decoration: none; border-bottom: 1px solid var(--color-border); transition: background 0.14s; }
.pesc-search-item:hover, .pesc-search-item:focus { background: var(--color-bg-alt); }
.pesc-search-item__img { width: 50px; height: 50px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--color-bg-alt); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; }
.pesc-search-item__img img { width: 100%; height: 100%; object-fit: cover; }
.pesc-search-noimg i { width: 20px; height: 20px; color: var(--color-text-muted); opacity: 0.5; }
.pesc-search-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pesc-search-item__name { font-weight: 600; font-size: 0.92rem; color: var(--color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pesc-search-item__cat { font-size: 0.76rem; color: var(--color-text-muted); }
.pesc-search-item__price { font-weight: 800; font-size: 0.92rem; color: var(--color-primary); white-space: nowrap; flex-shrink: 0; }
.pesc-search-all { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; font-weight: 700; font-size: 0.86rem; color: var(--color-secondary); text-decoration: none; background: var(--color-bg-alt); transition: background 0.14s, color 0.14s; }
.pesc-search-all:hover { background: var(--color-primary); color: #fff; }
.pesc-search-all i { width: 15px; height: 15px; }
/* dropdown text stays dark even though header is dark */
.search-bar .pesc-search-dropdown { color: var(--color-text); }

/* ============================== NATIVE PRESTASHOP CHECKOUT ============================== */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; padding: 36px 0 64px; align-items: start; }
@media (max-width: 992px) { .checkout-layout { grid-template-columns: 1fr; } }
.checkout-aside { position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 992px) { .checkout-aside { position: static; } }

#checkout-process { display: flex; flex-direction: column; gap: 16px; }
.checkout-step { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.checkout-step .step-title { display: flex; align-items: center; gap: 12px; padding: 18px 22px; margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--color-text-muted); }
.checkout-step.-current .step-title { color: var(--color-secondary); }
.checkout-step.-reachable:not(.-current) .step-title { cursor: pointer; }
.checkout-step.-reachable:not(.-current) .step-title:hover { color: var(--color-secondary); }
.step-number { width: 27px; height: 27px; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }
.checkout-step.-current .step-number { background: var(--color-primary); color: #fff; }
.checkout-step.-complete .step-number { display: none; }
.step-check { display: none; width: 27px; height: 27px; border-radius: 50%; background: var(--color-success); color: #fff; align-items: center; justify-content: center; flex-shrink: 0; }
.step-check i { width: 16px; height: 16px; }
.checkout-step.-complete .step-check { display: inline-flex; }
.step-label { flex: 1; }
.step-edit { display: none; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--color-primary); }
.checkout-step.-complete.-reachable:not(.-current) .step-edit { display: inline-flex; }
.checkout-step .content { display: none; padding: 4px 22px 24px; }
.checkout-step.-current .content { display: block; }

/* bootstrap / utility shims used by classic templates */
.checkout .row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.checkout [class*="col-xs"], .checkout [class*="col-sm"], .checkout [class*="col-md"], .checkout [class*="col-lg"] { padding: 0 8px; width: 100%; box-sizing: border-box; }
@media (min-width: 768px) { .checkout .col-md-6 { width: 50%; } .checkout .col-md-4 { width: 33.333%; } }
.checkout .clearfix::after { content: ''; display: table; clear: both; }
.checkout .float-xs-right { float: right; }
.checkout .float-xs-left { float: left; }
.checkout .material-icons { display: none; }
.checkout .text-muted { color: var(--color-text-muted); font-size: 0.88rem; }
.checkout .ps-hidden-by-js, .checkout .ps-hidden, .checkout .js-hidden { display: none !important; }
.checkout .my-2 { margin: 10px 0; } .checkout .mt-2 { margin-top: 10px; }

/* forms inside checkout */
.checkout .form-fields { display: flex; flex-direction: column; }
.checkout .form-group { margin-bottom: 14px; }
.checkout .form-group label, .checkout .form-control-label { font-weight: 600; font-size: 0.86rem; display: block; margin-bottom: 6px; color: var(--color-secondary); }
.checkout input[type="text"], .checkout input[type="email"], .checkout input[type="tel"], .checkout input[type="password"], .checkout input[type="number"], .checkout select, .checkout textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.95rem; background: #fff; color: var(--color-text); transition: border-color 0.15s; }
.checkout input:focus, .checkout select:focus, .checkout textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(96,141,185,0.12); }
.checkout .form-control-submit, .checkout .continue, .checkout [data-link-action] { margin-top: 8px; }
.checkout .form-control-comment { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 4px; }

/* login / register tabs (personal information step) */
.checkout .nav, .checkout .nav-inline { display: flex; align-items: stretch; gap: 4px; list-style: none; padding: 0; margin: 0 0 20px; border-bottom: 1px solid var(--color-border); }
.checkout .nav-item { margin: 0; display: flex; align-items: stretch; }
.checkout .nav-link, .checkout .nav-item > a { display: flex; align-items: center; padding: 11px 18px; font-weight: 600; font-size: 0.92rem; line-height: 1.2; color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; white-space: nowrap; }
.checkout .nav-link.active, .checkout .nav-item > a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.checkout .nav-separator { display: none !important; }
.checkout .nav-item:not(:has(> a)) { display: none; }
.checkout .tab-pane { display: none; }
.checkout .tab-pane.active { display: block; }
.checkout .form-footer { margin-top: 16px; display: flex; justify-content: flex-end; }
.checkout .field-password-policy { width: 100%; }

/* address selector */
.address-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 16px; }
.address-item { border: 1px solid var(--color-border); border-radius: 10px; padding: 16px 18px; transition: border-color 0.15s, box-shadow 0.15s; }
.address-item.selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(96,141,185,0.15); }
.address-item .address { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5; }
.address-item header, .address-alias { font-weight: 700; color: var(--color-secondary); margin-bottom: 6px; }
.address-item footer { margin-top: 12px; display: flex; gap: 14px; font-size: 0.84rem; }
.edit-address, .delete-address, .add-address a, .cancel-address { color: var(--color-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.add-address { margin: 8px 0 4px; }

/* delivery / carriers */
.delivery-options, .delivery-options-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.delivery-option { display: flex; align-items: center; gap: 14px; border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 18px; cursor: pointer; transition: border-color 0.15s, background 0.15s; margin: 0; }
.delivery-option:hover { border-color: var(--color-primary); }
/* radio column on the left */
.delivery-option > .col-sm-1, .delivery-option > [class*="col-"]:first-child { flex: 0 0 auto; width: auto; padding: 0; }
.delivery-option .custom-radio { float: none; margin: 0; }
/* label fills the rest, lays out as a single clean row: name (grows) | delay | price */
.delivery-option .delivery-option-2 { flex: 1; min-width: 0; margin: 0; padding: 0; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.delivery-option .delivery-option-2 > .row { display: flex; align-items: center; gap: 14px; margin: 0; width: 100%; flex-wrap: nowrap; }
.delivery-option .delivery-option-2 > .row > [class*="col-"] { width: auto !important; max-width: none; padding: 0; flex: 0 0 auto; }
.delivery-option .delivery-option-2 > .row > [class*="col-"]:first-child { flex: 1 1 auto; min-width: 0; }
.delivery-option .carrier, .delivery-option .carrier.row { display: flex; align-items: center; gap: 10px; margin: 0; }
.delivery-option .carrier [class*="col-"] { width: auto !important; padding: 0; }
.delivery-option .carrier-logo img { max-height: 34px; width: auto; }
.delivery-option .carrier-name, .carrier-name { font-weight: 700; font-size: 1rem; color: var(--color-secondary); }
.delivery-option .carrier-delay { font-size: 0.85rem; color: var(--color-text-muted); }
.delivery-option .carrier-price, .carrier-price { margin-left: auto; font-weight: 800; font-size: 1rem; color: var(--color-primary); white-space: nowrap; }
@media (max-width: 600px) {
  .delivery-option .delivery-option-2 > .row { flex-wrap: wrap; }
  .delivery-option .delivery-option-2 > .row > [class*="col-"] { flex: 1 1 100%; }
  .delivery-option .carrier-price { margin-left: 0; }
}

/* payment options */
.payment-options { display: flex; flex-direction: column; gap: 10px; }
.payment-options .payment-option { display: flex; align-items: center; gap: 12px; border: 1px solid var(--color-border); border-radius: 10px; padding: 15px 18px; cursor: pointer; transition: border-color 0.15s, background 0.15s; margin: 0; }
.payment-options .payment-option:hover { border-color: var(--color-primary); }
.payment-options .payment-option label { margin: 0; font-weight: 600; cursor: pointer; flex: 1; display: flex; align-items: center; gap: 10px; }
.payment-options .payment-option label img { max-height: 28px; width: auto; }
.js-additional-information, .additional-information { font-size: 0.88rem; color: var(--color-text-muted); padding: 4px 0 8px 32px; line-height: 1.5; }
#payment-confirmation, .payment-confirmation { margin-top: 18px; }
#payment-confirmation .btn, .payment-confirmation .btn { width: 100%; }

/* custom radio + checkbox */
.custom-radio { position: relative; display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; }
.custom-radio input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.custom-radio span { display: block; width: 18px; height: 18px; border: 2px solid var(--color-border); border-radius: 50%; transition: border-color 0.15s; }
.custom-radio input:checked + span { border-color: var(--color-primary); background: radial-gradient(var(--color-primary) 0 42%, #fff 47% 100%); }
.custom-checkbox { display: inline-flex; align-items: flex-start; gap: 8px; }
.custom-checkbox input { margin-top: 3px; }
.custom-checkbox label, .custom-checkbox span { font-size: 0.88rem; font-weight: 500; line-height: 1.45; }

/* terms */
#conditions-to-approve { margin: 18px 0; }
#conditions-to-approve label { font-size: 0.88rem; font-weight: 500; }

/* alerts */
.checkout .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; font-size: 0.9rem; line-height: 1.45; }
.checkout .alert-danger { background: #fef2f2; border-left: 3px solid var(--color-danger); color: #b91c1c; }
.checkout .alert-success { background: #ecfdf5; border-left: 3px solid var(--color-success); color: #065f46; }
.checkout .alert ul { margin: 0; padding-left: 18px; }

/* ============================== PHONE FIELD (+40 prefix) ============================== */
.phone-field { display: flex; align-items: stretch; width: 100%; }
.phone-field__prefix { display: flex; align-items: center; padding: 0 13px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-right: none; border-radius: 8px 0 0 8px; font-weight: 700; font-size: 0.95rem; color: var(--color-secondary); white-space: nowrap; user-select: none; }
.phone-field input { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; flex: 1; min-width: 0; }

/* ============================== CHECKOUT FORM SIMPLIFICATION ============================== */
/* hide field helper comments ("Sunt permise numai litere...") for a clean look */
.checkout .form-control-comment { display: none; }
/* tidy checkbox rows (GDPR / terms / newsletter) — inline, left-aligned */
.checkout .form-group .checkbox-field,
.checkout .custom-checkbox { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.checkout .custom-checkbox input[type="checkbox"],
.checkout .form-group input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--color-primary); }
.checkout .custom-checkbox label, .checkout .checkbox-field label { margin: 0; font-weight: 500; font-size: 0.88rem; line-height: 1.45; color: var(--color-text); }
.checkout .custom-checkbox label em, .checkout .custom-checkbox label i { font-style: normal; color: var(--color-text-muted); }
/* the optional "create account" heading spacing */
.checkout .field-password-policy { margin-top: 6px; }
/* make labels lighter, inputs consistent */
.checkout .form-group { margin-bottom: 16px; }

/* ============================== CUSTOM CHECKBOX (forms, GDPR, terms) ============================== */
.custom-checkbox { display: block; margin: 12px 0; }
.custom-checkbox label { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 500; font-size: 0.9rem; line-height: 1.45; color: var(--color-text); cursor: pointer; }
.custom-checkbox input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--color-primary); cursor: pointer; }
.custom-checkbox .cb-text { flex: 1; }
.custom-checkbox .cb-text a { color: var(--color-primary); font-weight: 600; text-decoration: underline; }
.custom-checkbox .material-icons { display: none; }

/* ============================== CHECKOUT — UNLOCKED STEPS ON ONE PAGE ============================== */
/* Show every unlocked-but-not-yet-completed step at once (address + delivery + payment together).
   Completed steps collapse to their title bar (no duplicate form). */
.checkout-step.-reachable:not(.-complete) .content { display: block; }
.checkout-step .step-title { padding: 14px 20px; font-size: 0.98rem; cursor: default; }
.checkout-step.-reachable:not(.-current) .step-title { cursor: pointer; }
.checkout-step .step-edit { margin-left: auto; }

/* ============================== SIDE CART (drawer) ============================== */
body.pesc-sidecart-lock { overflow: hidden; }
.pesc-sidecart-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 1100; }
.pesc-sidecart-overlay.open { opacity: 1; visibility: visible; }
.pesc-sidecart { position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw; background: #fff; box-shadow: -12px 0 40px rgba(0,0,0,0.18); transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.22,1,0.36,1); z-index: 1101; display: flex; flex-direction: column; }
.pesc-sidecart.open { transform: translateX(0); }
.pesc-sidecart__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--color-border); }
.pesc-sidecart__head h3 { margin: 0; font-size: 1.15rem; }
.pesc-sidecart__count { color: var(--color-text-muted); font-weight: 600; font-size: 0.95rem; }
.pesc-sidecart__close { background: var(--color-bg-alt); border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text); transition: background 0.18s; }
.pesc-sidecart__close:hover { background: var(--color-border); }
.pesc-sidecart__close i { width: 18px; height: 18px; }
.pesc-sidecart__body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.pesc-sidecart__item { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.pesc-sidecart__img { width: 62px; height: 62px; flex-shrink: 0; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; }
.pesc-sidecart__img img { width: 100%; height: 100%; object-fit: cover; }
.pesc-sidecart__noimg i { width: 20px; height: 20px; color: var(--color-text-muted); opacity: 0.5; }
.pesc-sidecart__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pesc-sidecart__name { font-weight: 600; font-size: 0.9rem; color: var(--color-secondary); text-decoration: none; line-height: 1.3; }
.pesc-sidecart__name:hover { color: var(--color-primary); }
.pesc-sidecart__attrs { font-size: 0.78rem; color: var(--color-text-muted); }
.pesc-sidecart__qp { font-size: 0.82rem; color: var(--color-text-muted); }
.pesc-sidecart__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; flex-shrink: 0; }
.pesc-sidecart__total { font-weight: 800; font-size: 0.92rem; color: var(--color-secondary); white-space: nowrap; }
.pesc-sidecart__rm { width: 30px; height: 30px; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-danger); display: flex; align-items: center; justify-content: center; transition: background 0.18s, color 0.18s; }
.pesc-sidecart__rm:hover { background: var(--color-danger); color: #fff; }
.pesc-sidecart__rm i { width: 15px; height: 15px; }
.pesc-sidecart__foot { padding: 18px 22px; border-top: 1px solid var(--color-border); background: var(--color-bg-alt); }
.pesc-sidecart__lines { margin-bottom: 10px; }
.pesc-sidecart__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9rem; color: var(--color-text); padding: 3px 0; }
.pesc-sidecart__row span:last-child { font-weight: 600; white-space: nowrap; }
.pesc-sidecart__row--discount span:last-child { color: #16a34a; }
.pesc-sidecart__totals { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; padding-top: 10px; border-top: 1px dashed var(--color-border); font-family: var(--font-heading); }
.pesc-sidecart__totals strong { font-size: 1.3rem; color: var(--color-secondary); }
.pesc-sidecart__tax { font-size: 0.76rem; color: var(--color-text-muted); margin-bottom: 14px; }
.pesc-sidecart__foot .btn-block { margin-bottom: 8px; }
.pesc-sidecart__empty { text-align: center; padding: 60px 20px; color: var(--color-text-muted); }
.pesc-sidecart__empty i { width: 46px; height: 46px; opacity: 0.4; }
.pesc-sidecart__empty p { margin: 14px 0 18px; }

/* ============================== B2B persoana fizica / juridica ============================== */
.pesc-b2b__options { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 6px; }
.pesc-b2b__opt { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; font-size: 0.92rem; cursor: pointer; }
.pesc-b2b__opt input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-primary); margin: 0; }

/* ============================== FACETED SEARCH FILTERS (sidebar) ============================== */
#search_filters_wrapper, #search_filters { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
#search_filters .facet { padding: 16px 20px; border-bottom: 1px solid var(--color-border); margin: 0; }
#search_filters .facet:last-child { border-bottom: none; }
#search_filters .facet-title, #search_filters .h6 { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); margin: 0 0 12px; display: block; }
#search_filters .facet ul { list-style: none; margin: 0; padding: 0; }
#search_filters .facet-label { display: block; padding: 5px 0; font-size: 0.9rem; line-height: 1.3; }
#search_filters .facet-label a { color: var(--color-text); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: color 0.15s; }
#search_filters .facet-label a:hover, #search_filters .facet-label a.active { color: var(--color-primary); }
#search_filters .facet-label .magnitude { color: var(--color-text-muted); font-size: 0.82rem; margin-left: 2px; }
#search_filters .custom-checkbox input, #search_filters input[type="checkbox"], #search_filters input[type="radio"] { accent-color: var(--color-primary); width: 16px; height: 16px; margin-right: 4px; }
/* price/weight slider */
#search_filters .faceted-slider { padding-top: 6px; }
#search_filters .ui-slider { height: 6px; background: var(--color-bg-alt); border: none; border-radius: 4px; margin: 14px 4px; }
#search_filters .ui-slider .ui-slider-range { background: var(--color-primary); border-radius: 4px; }
#search_filters .ui-slider .ui-slider-handle { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--color-primary); top: -6px; cursor: grab; }
#search_filters .clear-all-wrapper { padding: 12px 20px; }
#search_filters .js-search-filters-clear-all { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; font-weight: 600; color: var(--color-secondary); cursor: pointer; width: 100%; }
.active-filters { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.active-filters .filter-block__title, .active-filters .h6 { font-size: 0.85rem; font-weight: 700; margin: 0 8px 0 0; }
.active-filters ul { display: inline-flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.active-filters .filter-block a, .active-filters li a { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 4px 12px; font-size: 0.84rem; color: var(--color-text); text-decoration: none; }

/* ============================== NATIVE PRESTASHOP / BOOTSTRAP COMPAT LAYER ============================== */
/* Responsive visibility utilities used by native PS module templates (facets, checkout, account).
   Theme has no Bootstrap, so without these the desktop+mobile variants both show (duplicates). */
@media (max-width: 575.98px)  { .hidden-xs-down { display: none !important; } }
@media (min-width: 576px)     { .hidden-sm-up   { display: none !important; } }
@media (max-width: 767.98px)  { .hidden-sm-down { display: none !important; } }
@media (min-width: 768px)     { .hidden-md-up   { display: none !important; } }
@media (max-width: 991.98px)  { .hidden-md-down { display: none !important; } }
@media (min-width: 992px)     { .hidden-lg-up   { display: none !important; } }
@media (max-width: 1199.98px) { .hidden-lg-down { display: none !important; } }
@media (min-width: 1200px)    { .hidden-xl-up   { display: none !important; } }
.hidden-xs-up { display: none !important; }
.hide { display: none !important; }
/* Cand nu exista filtre active, PS marcheaza sectiunea cu .hide -> ascunde si cutia wrapper goala */
.active-filters:has(#js-active-search-filters.hide) { display: none !important; }
/* Theme uses Lucide icons; hide leftover Material Icons glyphs from native output (the black-stripe glyphs) */
.material-icons { display: none !important; }
/* Native custom checkbox/radio: show the real input (theme has no PS icon font for the fake check) */
.facet .custom-checkbox input[type="checkbox"], .facet .custom-radio input[type="radio"],
.faceted-slider input { position: static; opacity: 1; width: 17px; height: 17px; margin: 0 6px 0 0; accent-color: var(--color-primary); cursor: pointer; }
.facet .custom-checkbox > span:not(.cb-text), .facet .custom-radio > span:empty { display: none; }
.collapse-icons, .facet .navbar-toggler { display: none; }

/* ============================== NATIVE PS FORMS — GLOBAL (registration, identity, address) ============================== */
.form-control { width: 100%; padding: 11px 14px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.95rem; background: #fff; color: var(--color-text); transition: border-color 0.15s, box-shadow 0.15s; }
.form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(96,141,185,0.12); }
textarea.form-control { min-height: 90px; }
.form-group.row { display: block; margin-bottom: 16px; }
.form-group.row > [class*="col-"] { width: 100%; max-width: 100%; padding: 0; flex: none; }
.form-group.row .form-control-label, .form-control-label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; color: var(--color-secondary); padding: 0; }
.form-control-comment { display: none; }
.js-input-column { width: 100%; }
.input-group { display: flex; align-items: stretch; }
.input-group .form-control { flex: 1; }
.input-group .input-group-append, .input-group .input-group-btn, .input-group-prepend { align-items: center; }
/* native radio rows (gender etc. where shown) */
.radio-inline { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-weight: 500; }
.radio-inline .custom-radio input[type="radio"] { position: static; opacity: 1; width: 16px; height: 16px; accent-color: var(--color-primary); }
.radio-inline .custom-radio > span:empty { display: none; }
/* native form footer buttons */
.form-footer .btn, .page-customer-account .form-footer .btn { min-width: 180px; }

/* ============================== FACET FILTERS — CLEAN INLINE LAYOUT (override) ============================== */
#search_filters .facet { padding: 16px 20px; border-bottom: 1px solid var(--color-border); margin: 0; }
#search_filters > .facet:last-of-type { border-bottom: none; }
#search_filters > p:first-child { padding: 16px 20px 8px; margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-text-muted); }
#search_filters .facet-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-secondary); margin: 0 0 10px; }
#search_filters .facet ul { margin: 0; padding: 0; list-style: none; }
#search_filters .facet li { margin: 0; padding: 0; }
/* the row: checkbox + label inline */
#search_filters .facet-label { display: flex; align-items: center; gap: 9px; padding: 6px 0; margin: 0; cursor: pointer; }
#search_filters .facet-label .custom-checkbox { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; margin: 0; flex-shrink: 0; }
#search_filters .facet-label .custom-checkbox input[type="checkbox"] { position: static; opacity: 1; width: 17px; height: 17px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
#search_filters .facet-label .custom-checkbox > span { display: none; }
#search_filters .facet-label a, #search_filters .facet-label .search-link { color: var(--color-text); text-decoration: none; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 5px; line-height: 1.3; }
#search_filters .facet-label a:hover, #search_filters .facet-label .search-link:hover { color: var(--color-primary); }
#search_filters .facet-label .magnitude { color: var(--color-text-muted); font-size: 0.84rem; }

/* ==============================  BRANDS / MANUFACTURERS LIST  ============================== */
.brands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.brand-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 18px; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; text-decoration: none; color: var(--color-text); transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s; }
.brand-card:hover { border-color: var(--color-primary); box-shadow: 0 10px 26px -12px rgba(36,40,56,0.22); transform: translateY(-3px); }
.brand-card__logo { width: 96px; height: 64px; display: flex; align-items: center; justify-content: center; }
.brand-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-card__initial { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem; text-transform: uppercase; }
.brand-card__name { font-weight: 700; font-size: 1rem; }
.brand-card__count { font-size: 0.85rem; color: var(--color-text-muted); }
@media (max-width: 480px) { .brands-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .brand-card { padding: 18px 10px; } }

/* ==============================  SITEMAP (HTML)  ============================== */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 36px; }
.sitemap-col__title { font-size: 1.05rem; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--color-border); color: var(--color-text); }
.sitemap-list { list-style: none; margin: 0; padding: 0; }
.sitemap-list li { margin: 0 0 7px; }
.sitemap-list a { color: var(--color-text); text-decoration: none; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 6px; transition: color 0.15s; }
.sitemap-list a:hover { color: var(--color-primary); }
.sitemap-list a::before { content: '›'; color: var(--color-text-light); font-weight: 700; }
.sitemap-list--nested { padding-left: 16px; margin-top: 6px; }
.sitemap-list--nested a { font-size: 0.88rem; color: var(--color-text-muted); }
@media (max-width: 480px) { .sitemap-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ==============================  ACTIVE FILTER CHIPS  ============================== */
/* Keep ONE active-filters block (the one in the main column); hide the sidebar duplicate */
.shop-sidebar .active_filters { display: none; }
.shop-main .active-filters { margin-bottom: 18px; }
#js-active-search-filters .active-filter-title { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 0 0 10px; }
#js-active-search-filters ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
#js-active-search-filters .filter-block { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--color-border); border-radius: 20px; padding: 5px 6px 5px 14px; font-size: 0.88rem; color: var(--color-text); }
#js-active-search-filters .js-search-link { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(36,40,56,0.07); color: var(--color-text); text-decoration: none; transition: background 0.15s, color 0.15s; }
#js-active-search-filters .js-search-link:hover { background: var(--color-primary); color: #fff; }
/* make the hidden material-icons close glyph a visible × */
#js-active-search-filters .material-icons.close { display: inline-block !important; width: 14px; height: 14px; position: relative; font-size: 0; }
#js-active-search-filters .material-icons.close::before { content: '\00d7'; font-family: var(--font-base, system-ui), sans-serif; font-size: 17px; line-height: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); }

/* ==============================  PRODUCT-PAGE BOTTOM BLOCKS (viewed / same category)  ============================== */
/* Native modules (ps_viewedproduct, ps_categoryproducts, ps_crossselling) render edge-to-edge
   with a default 48px h2. Align them to the theme container + tame the title + grid the products. */
.featured-products { max-width: 1320px; margin: 0 auto; padding: clamp(28px, 4vw, 52px) clamp(20px, 5vw, 64px); }
.featured-products > h2, .featured-products > .h2, .featured-products .products-section-title, .featured-products > p.h6 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.2; margin: 0 0 22px; white-space: normal; }
.featured-products .products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 1024px) { .featured-products .products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .featured-products .products { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 480px) { .featured-products { padding: 28px 16px; } }
/* Hide a bottom block entirely when it has no products (e.g. no viewed-products history yet) */
.featured-products:not(:has(.products > *)) { display: none; }

/* ==============================  ADDRESS CARD FOOTER (checkout / account)  ============================== */
/* The card uses a bare <footer>, which was inheriting the dark site-footer styling (black box). Reset it. */
.address-footer, .address-item footer { background: transparent; color: inherit; padding: 12px 0 0; position: static; margin-top: 12px; border-top: 1px solid var(--color-border); display: flex; gap: 18px; }
.address-footer::before, .address-item footer::before { content: none; display: none; }
.address-item .address-footer a.edit-address, .checkout .address-item .address-footer a.edit-address { color: var(--color-primary); font-weight: 600; font-size: 0.84rem; }
.address-item .address-footer a.delete-address, .checkout .address-item .address-footer a.delete-address { color: #dc2626; font-weight: 600; font-size: 0.84rem; }
.address-item .address-footer a:hover { text-decoration: underline; }

/* ==============================  ALERTS / NOTIFICATIONS + FORM ERRORS (native output)  ============================== */
.alert { padding: 12px 15px; border-radius: 10px; border: 1px solid transparent; font-size: 0.9rem; line-height: 1.45; display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px; }
.alert::before { font-size: 1.05em; line-height: 1.3; flex-shrink: 0; font-weight: 700; }
.alert-danger, .alert.alert-danger { background: #fef2f2; border-color: #f4b4b4; color: #b91c1c; }
.alert-danger::before, .alert.alert-danger::before { content: '\26A0'; }
.alert-success, .alert.alert-success { background: #f0fdf4; border-color: #9ae6b4; color: #15803d; }
.alert-success::before, .alert.alert-success::before { content: '\2713'; }
.alert-warning, .alert.alert-warning { background: #fffbeb; border-color: #fcd96a; color: #b45309; }
.alert-warning::before, .alert.alert-warning::before { content: '\26A0'; }
.alert-info, .alert.alert-info { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.alert-info::before, .alert.alert-info::before { content: '\2139'; }
.alert ul { margin: 0; padding: 0; list-style: none; }
.alert a { color: inherit; font-weight: 700; text-decoration: underline; }

/* help-block wrapper around form/login errors */
.help-block { margin: 0 0 12px; }
.help-block > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* a plain (non-.alert) field error message */
.help-block li:not(.alert), .field-error, .form-error-message { color: #b91c1c; font-size: 0.85rem; line-height: 1.4; }

/* field-level invalid state: red border on input + red helper text */
.has-error > input, .has-error > select, .has-error > textarea, .has-error .form-control,
.form-group.has-danger .form-control, input.is-invalid, .form-control.is-invalid { border-color: #e07070 !important; background-color: #fef6f6; }
.has-error .form-control-label, .has-danger .form-control-label { color: #b91c1c; }
/* proactive password rule hint (own class so the global .form-control-comment{display:none} doesn't hide it) */
.password-hint { display: block; font-size: 0.82rem; color: var(--color-text-muted); margin-top: 6px; line-height: 1.45; }
/* "Minim 8 caractere..." e relevant DOAR la inregistrare; pe formularul de login il ascundem */
#login-form .password-hint { display: none; }

/* "Ai uitat parola?" — aliniat dreapta, mai mic, culoare care sare in ochi */
.forgot-password { text-align: right; margin: -2px 0 14px; }
.forgot-password a { display: inline-block; font-size: 0.82rem; font-weight: 700; color: var(--color-primary); text-decoration: none; transition: color 0.15s; }
.forgot-password a:hover { color: var(--color-secondary); text-decoration: underline; }

/* ================= Sectiuni SEO (homepage + categorie) ================= */
.seo-home { background: var(--color-bg-alt); }
.seo-home__card { display: grid; grid-template-columns: 1.1fr 0.9fr; background: #fff; border: 1px solid var(--color-border); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 40px rgba(36,40,56,0.07); }
.seo-home__text { padding: 42px 46px; }
.seo-home__eyebrow { display: inline-block; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.74rem; color: var(--color-secondary); background: var(--color-accent); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.seo-home__text h2 { font-size: 1.95rem; line-height: 1.15; margin: 0 0 14px; color: var(--color-secondary); font-family: var(--font-heading); }
.seo-home__text h3 { font-size: 1.12rem; margin: 26px 0 8px; color: var(--color-secondary); font-family: var(--font-heading); }
.seo-home__text p { color: var(--color-text-muted); margin: 0; }
.seo-home__media { position: relative; min-height: 340px; }
.seo-home__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .seo-home__card { grid-template-columns: 1fr; }
  .seo-home__media { min-height: 220px; order: -1; }
  .seo-home__text { padding: 28px 22px; }
  .seo-home__text h2 { font-size: 1.5rem; }
}
.seo-types__head { text-align: center; max-width: 720px; margin: 0 auto 30px; }
.seo-types__head h2 { font-size: 1.8rem; color: var(--color-secondary); margin: 0 0 8px; font-family: var(--font-heading); }
.seo-types__head p { color: var(--color-text-muted); margin: 0; }
.seo-types__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.seo-types__item { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 26px 24px; }
.seo-types__item h3 { font-size: 1.18rem; color: var(--color-secondary); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 3px solid var(--color-accent); display: inline-block; font-family: var(--font-heading); }
.seo-types__item p { color: var(--color-text-muted); margin: 0; font-size: 0.95rem; }
@media (max-width: 900px) { .seo-types__grid { grid-template-columns: 1fr; } }
.cat-seo { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--color-border); }
.cat-seo h2 { font-size: 1.35rem; color: var(--color-secondary); margin: 0 0 10px; font-family: var(--font-heading); }
.cat-seo p, .cat-seo__desc { color: var(--color-text-muted); font-size: 0.96rem; line-height: 1.7; }
.cat-seo__links { margin-top: 18px; }
.cat-seo__links .row { font-size: 0.94rem; line-height: 2; }
.cat-seo__links .row > strong { color: var(--color-secondary); margin-right: 6px; }
.cat-seo__links a { color: var(--color-primary-dark); text-decoration: none; }
.cat-seo__links a:hover { text-decoration: underline; color: var(--color-secondary); }
.cat-seo__links .sep { color: var(--color-border-strong); margin: 0 7px; }