/*
  Theme Name: Rensi
  Version: 1.0.0
  Template: Divi
  Author: Divi Pixel
  Author URI: https://www.divi-pixel.com
  Description: Theme for Rensi
  Text Domain: rensi
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ===========================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   =========================================== */
:root {
  /* Brand Colors */
  --rensi-purple: #602076;
  --rensi-purple-dark: #5e1f78;
  --rensi-purple-light: #7a3a90;
  --rensi-purple-rgb: 96, 32, 118;
  --rensi-orange: #f39200;
  --rensi-orange-dark: #d97600;
  --rensi-orange-light: #ffab2e;
  --rensi-orange-rgb: 243, 146, 0;

  /* Neutral Colors */
  --rensi-white: #ffffff;
  --rensi-gray-100: #f8f9fa;
  --rensi-gray-200: #f1f3f4;
  --rensi-gray-light: #f6f6f6;
  --rensi-gray-300: #e0e0e0;
  --rensi-gray: #555555;
  --rensi-gray-dark: #333333;
  --rensi-text: #2d2d2d;
  --rensi-text-muted: #555555;

  /* Card Styles */
  --card-bg: var(--rensi-white);
  --card-border: rgba(var(--rensi-purple-rgb), 0.08);
  --card-border-hover: rgba(243, 146, 0, 0.6);
  --card-radius: 20px;
  --card-radius-sm: 16px;
  --card-radius-xs: 8px;
  --card-padding: 1.5rem 1.5rem 1.75rem;
  --card-shadow: 0 12px 28px rgba(0, 0, 0, 0.04);
  --card-shadow-hover: 0 18px 40px rgba(243, 146, 0, 0.1);

  /* Typography */
  --font-primary: "Neris", Helvetica, Arial, Lucida, sans-serif;
  --font-secondary: "IBM Plex Sans Condensed", Helvetica, Arial, Lucida, sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: 5rem;

  /* Buttons */
  --btn-height: 48px;
  --btn-height-sm: 40px;
  --btn-height-lg: 56px;
  --btn-padding: 0.75rem 1.75rem;
  --btn-radius: 999px;
  --btn-font-size: 0.875rem;

  /* Focus States */
  --focus-ring-color: rgba(var(--rensi-purple-rgb), 0.4);
  --focus-ring-offset: 2px;
  --focus-ring-width: 3px;

  /* Transitions */
  --transition-fast: 0.14s ease-out;
  --transition-medium: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-tooltip: 400;
}

/* ===========================================
   GLOBAL BASE STYLES
   =========================================== */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
html {
  overflow-x: hidden;
  max-width: 100vw;
}

#page-container {
  overflow-x: hidden;
  max-width: 100%;
}

body,
#et-main-area,
.et_pb_text,
.et_pb_module {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--rensi-text);
}

p {
  margin-bottom: var(--space-md);
  line-height: var(--line-height-relaxed);
}

h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.entry-title {
  font-family: var(--font-primary);
  line-height: var(--line-height-tight);
  color: var(--rensi-purple);
  margin-bottom: var(--space-md);
}

h1, .et_pb_text h1 { font-size: var(--font-size-4xl); }
h2, .et_pb_text h2 { font-size: var(--font-size-3xl); }
h3, .et_pb_text h3 { font-size: var(--font-size-2xl); }
h4, .et_pb_text h4 { font-size: var(--font-size-xl); }

a {
  color: var(--rensi-purple);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--rensi-orange);
}

.et_pb_section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.et_pb_section.et_pb_section_first {
  padding-top: var(--space-3xl);
}

.et_pb_row {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.et_pb_section,
.et_pb_row,
.et_pb_column {
  max-width: 100%;
}

/* ===========================================
   UNIFIED BUTTON SYSTEM
   =========================================== */
.et_pb_button,
.button,
button[type="submit"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--btn-height);
  padding: var(--btn-padding);
  font-family: var(--font-secondary);
  font-size: var(--btn-font-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: all var(--transition-medium);
  position: relative;
  overflow: hidden;
  background: var(--rensi-purple);
  color: var(--rensi-white) !important;
  box-shadow: 0 4px 14px rgba(var(--rensi-purple-rgb), 0.25);
}

.et_pb_button:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--rensi-orange);
  color: var(--rensi-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--rensi-orange-rgb), 0.35);
}

.et_pb_button:active,
.button:active,
button[type="submit"]:active,
input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(var(--rensi-orange-rgb), 0.25);
}

.btn-secondary,
.et_pb_button.et_pb_bg_layout_light {
  background: transparent;
  color: var(--rensi-purple) !important;
  border: 2px solid var(--rensi-purple);
  box-shadow: none;
}

.btn-secondary:hover,
.et_pb_button.et_pb_bg_layout_light:hover {
  background: var(--rensi-purple);
  color: var(--rensi-white) !important;
}

.btn-sm,
.et_pb_button.et_pb_button_small {
  min-height: var(--btn-height-sm);
  padding: 0.5rem 1.25rem;
  font-size: 0.8rem;
}

.btn-lg,
.et_pb_button.et_pb_button_large {
  min-height: var(--btn-height-lg);
  padding: 1rem 2.5rem;
  font-size: 1rem;
}

.et_pb_button:after,
.et_pb_button:before {
  display: none !important;
}

.et_pb_button .et-pb-icon,
.button .icon {
  font-size: 1.1em;
  transition: transform var(--transition-fast);
}

.et_pb_button:hover .et-pb-icon,
.button:hover .icon {
  transform: translateX(3px);
}

/* ===========================================
   FOCUS & ACCESSIBILITY
   =========================================== */
*:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

*:focus:not(:focus-visible) {
  outline: none;
}

.et_pb_button:focus-visible,
.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--rensi-orange);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 6px rgba(var(--rensi-orange-rgb), 0.2);
}

a:focus-visible {
  outline: 2px solid var(--rensi-purple);
  outline-offset: 2px;
  border-radius: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--rensi-purple) !important;
  box-shadow: 0 0 0 3px rgba(var(--rensi-purple-rgb), 0.15) !important;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rensi-purple);
  color: var(--rensi-white);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--card-radius-xs);
  z-index: var(--z-tooltip);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-md);
}

.text-muted,
.et_pb_post_meta,
.post-meta,
.woocommerce-result-count {
  color: var(--rensi-text-muted);
}

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

/* ===========================================
   VISUAL ENHANCEMENTS
   =========================================== */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.et_pb_section {
  animation: sectionFadeIn 0.5s ease-out forwards;
}

@keyframes sectionFadeIn {
  from { opacity: 0.8; }
  to { opacity: 1; }
}

.et_pb_blog_grid .et_pb_post,
.prodcatBox,
.et_pb_shop .woocommerce ul.products li.product {
  transition: transform var(--transition-medium),
              box-shadow var(--transition-medium),
              border-color var(--transition-medium);
}

.glass-effect {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.et_pb_image img,
.et_pb_gallery_image img,
.woocommerce-product-gallery img {
  border-radius: var(--card-radius-sm);
  transition: transform var(--transition-medium);
}

.et_pb_image:hover img,
.et_pb_gallery_image:hover img {
  transform: scale(1.02);
}

.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--rensi-purple-rgb), 0.15), transparent);
  margin: var(--space-2xl) 0;
}

@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--rensi-gray-200) 0px, var(--rensi-gray-100) 40px, var(--rensi-gray-200) 80px);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--card-radius-xs);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--rensi-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--rensi-gray-300);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--rensi-purple);
}

::selection {
  background: rgba(var(--rensi-purple-rgb), 0.2);
  color: var(--rensi-text);
}

/* ===========================================
   YITH FILTERS
   =========================================== */
.yith-wcan-filters.enhanced {
  width: 100%;
  max-width: none;
  background: var(--rensi-white);
  border-bottom: 3px solid var(--rensi-purple);
  border-radius: 0;
  padding: 0.85rem 1.2rem;
  box-shadow: none;
  display: block;
  font-family: var(--font-secondary);
}

.yith-wcan-filters .filters-container form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  margin: 0;
  font-family: inherit;
}

.yith-wcan-filters .filter-title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rensi-purple);
  white-space: nowrap;
  margin-right: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: inherit;
}

.yith-wcan-filters .yith-wcan-filter {
  margin: 0;
}

.yith-wcan-filters .filter-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.yith-wcan-filters .filter-item label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--rensi-white);
  border: 1px solid rgba(var(--rensi-purple-rgb), 0.25);
  border-radius: 999px;
  padding: 0.38rem 1.1rem 0.38rem 2.6rem;
  cursor: pointer;
  transition: 0.12s ease-out;
  min-height: 40px;
  font-family: inherit;
}

.yith-wcan-filters .filter-item label:hover {
  border-color: var(--rensi-orange);
  background: rgba(var(--rensi-orange-rgb), 0.08);
}

.yith-wcan-filters .filter-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.yith-wcan-filters .filter-item .term-label {
  text-decoration: none;
  color: var(--rensi-text);
  font-size: 0.7rem;
  line-height: 1.3;
  position: relative;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-family: inherit;
}

.yith-wcan-filters .filter-item .term-label::before {
  content: "";
  position: absolute;
  left: -1.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--rensi-purple);
  background: var(--rensi-white);
  transition: 0.12s ease-out;
}

.yith-wcan-filters .filter-item input[type="checkbox"]:checked + .term-label {
  color: var(--rensi-purple);
  font-weight: 600;
}

.yith-wcan-filters .filter-item input[type="checkbox"]:checked + .term-label::before {
  background: var(--rensi-purple);
  border-color: var(--rensi-purple);
  box-shadow: 0 0 0 3px rgba(var(--rensi-purple-rgb), 0.08);
}

.yith-wcan-filters .filter-item input[type="checkbox"]:checked + .term-label::after {
  content: "✓";
  position: absolute;
  left: -1.38rem;
  top: 50%;
  transform: translateY(-52%);
  font-size: 0.55rem;
  color: var(--rensi-white);
  font-weight: 700;
}

/* ===========================================
   TABLES
   =========================================== */
.table.table-striped {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--rensi-white);
  border: 1px solid rgba(var(--rensi-purple-rgb), 0.12);
  border-radius: 14px;
  overflow: hidden;
  font-family: var(--font-secondary);
  font-size: 0.85rem;
}

.table.table-striped thead tr.mynewtable-tr {
  background: var(--rensi-purple);
  color: var(--rensi-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table.table-striped thead tr.mynewtable-tr td {
  padding: 0.75rem 0.85rem;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  font-weight: 600;
}

.table.table-striped thead tr.mynewtable-tr td:last-child {
  border-right: none;
}

.table.table-striped tbody tr td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgba(var(--rensi-purple-rgb), 0.05);
  vertical-align: middle;
}

.table.table-striped tbody tr:nth-child(even) {
  background: rgba(var(--rensi-orange-rgb), 0.03);
}

.table.table-striped tbody tr td:first-child {
  background: rgba(var(--rensi-purple-rgb), 0.03);
  font-weight: 600;
  min-width: 160px;
  color: var(--rensi-text);
  border-right: 1px solid rgba(var(--rensi-purple-rgb), 0.06);
}

.table.table-striped tbody tr td[colspan] {
  background: var(--rensi-white);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.table.table-striped tbody tr:hover {
  background: rgba(var(--rensi-orange-rgb), 0.1);
}

.table.table-striped td {
  word-break: break-word;
}

/* ===========================================
   PRODUCT PAGE TABLE NORMALIZATION
   Applies consistent styling to ALL tables on
   single-product pages, including those that lack
   the .table.table-striped classes (e.g. AI-generated
   or pasted content). Does not cascade into nested tables.
   =========================================== */

/* Remove WordPress wp-caption box on product pages */
.single-product .wp-caption {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
  text-align: left !important;
}

.single-product .wp-caption-text {
  font-style: normal !important;
  font-size: inherit !important;
  color: inherit !important;
  margin-top: 0 !important;
  padding: 0 !important;
  background: none !important;
  text-align: left !important;
}

/* Top-level tables only (not nested inside another table) */
body.single-product table:not(table table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--rensi-white);
  border: 1px solid rgba(var(--rensi-purple-rgb), 0.12);
  border-radius: 14px;
  overflow: hidden;
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

body.single-product table:not(table table) thead tr td,
body.single-product table:not(table table) thead tr th {
  background: var(--rensi-purple);
  color: var(--rensi-white) !important;
  padding: 0.75rem 0.85rem;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.single-product table:not(table table) thead tr td:last-child,
body.single-product table:not(table table) thead tr th:last-child {
  border-right: none;
}

body.single-product table:not(table table) tbody tr td,
body.single-product table:not(table table) tbody tr th {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgba(var(--rensi-purple-rgb), 0.05);
  vertical-align: middle;
}

body.single-product table:not(table table) tbody tr:nth-child(even) {
  background: rgba(var(--rensi-orange-rgb), 0.03);
}

body.single-product table:not(table table) tbody tr td:first-child {
  background: rgba(var(--rensi-purple-rgb), 0.03);
  font-weight: 600;
  min-width: 160px;
  color: var(--rensi-text);
  border-right: 1px solid rgba(var(--rensi-purple-rgb), 0.06);
}

body.single-product table:not(table table) tbody tr td[colspan],
body.single-product table:not(table table) tbody tr th[colspan] {
  background: var(--rensi-white);
  font-weight: 500;
  letter-spacing: 0.01em;
  min-width: unset;
  border-right: none;
}

body.single-product table:not(table table) tbody tr:hover {
  background: rgba(var(--rensi-orange-rgb), 0.1);
}

body.single-product table:not(table table) td {
  word-break: break-word;
}

/* Force all inline elements (span, b, strong, etc.) inside table cells
   to inherit font-family so AI-generated or pasted content stays consistent */
body.single-product table td *,
body.single-product table th * {
  font-family: inherit;
}

/* Nested tables: lighter treatment, no double headers */
body.single-product table table {
  border-radius: 8px;
  font-size: 0.8rem;
  margin: 0;
}

/* ===========================================
   CATEGORY HEADING
   =========================================== */
.category-heading {
  position: relative;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-bottom: 0.35em;
  margin-bottom: var(--space-lg);
}

.category-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60%;
  height: 4px;
  background-color: var(--rensi-purple);
  border-radius: 2px;
}

/* ===========================================
   DOWNLOADS TABLE
   =========================================== */
.wc-downloads-wrapper {
  margin-top: var(--space-xl);
}

.wc-downloads-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 0.95rem;
  border: 1px solid rgba(var(--rensi-purple-rgb), 0.12) !important;
  border-radius: 14px !important;
  overflow: hidden;
  font-family: var(--font-secondary);
  background: var(--rensi-white);
}

.wc-downloads-table th {
  text-align: left;
  font-weight: 600;
  padding: 0.75rem 0.85rem;
  background: var(--rensi-purple);
  color: var(--rensi-white) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.wc-downloads-table th:last-child {
  border-right: none;
}

.wc-downloads-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgba(var(--rensi-purple-rgb), 0.05);
  vertical-align: middle;
}

.file-name {
  color: var(--rensi-gray-dark);
}

.download-btn {
  display: inline-block;
  padding: 0.45em 1em;
  background-color: var(--rensi-purple);
  color: var(--rensi-white) !important;
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.download-btn:hover {
  background-color: var(--rensi-orange);
  color: var(--rensi-white) !important;
}

.dl-heading {
  font-family: var(--font-secondary);
  font-size: var(--font-size-4xl);
  color: var(--rensi-purple) !important;
  line-height: 1.2em;
}

/* ===========================================
   ACF ALTERNATING PRODUCT SECTIONS
   =========================================== */
.acf-alt-sections {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  font-family: var(--font-primary);
}

.acf-alt-row {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  padding: 4.5rem 2.5rem;
  margin: 0;
}

.acf-alt-row.reverse {
  flex-direction: row-reverse;
}

.acf-alt-row:nth-child(odd) {
  background-color: var(--rensi-white);
}

.acf-alt-row:nth-child(even) {
  background: rgba(0, 0, 0, 0.035);
}

.acf-alt-row:nth-child(even) .acf-alt-text {
  color: #1f1f1f;
}

.acf-alt-row:last-of-type {
  border-bottom: 1px solid var(--rensi-gray-300);
  margin-bottom: 50px;
}

/* Inner flex container */
.acf-alt-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
}

.acf-alt-row.reverse .acf-alt-inner {
  flex-direction: row-reverse;
}

/* Text block */
.acf-alt-text {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--rensi-text);
}

.acf-alt-text h2,
.acf-alt-text h3,
.acf-alt-text h4 {
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--rensi-purple);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.2rem;
}

.acf-alt-text h2::after,
.acf-alt-text h3::after {
  display: none;
}

.acf-alt-text p {
  margin-bottom: var(--space-md);
}

/* Image block */
.acf-alt-image {
  flex: 1;
  min-width: 0;
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acf-alt-image img {
  height: 420px;
  width: auto;
  max-width: 100%;
  display: block;
  border-radius: var(--card-radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.acf-alt-image img:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger animations */
.acf-alt-row:nth-of-type(1) .acf-alt-image { animation-delay: 0.2s; }
.acf-alt-row:nth-of-type(2) .acf-alt-image { animation-delay: 0.3s; }
.acf-alt-row:nth-of-type(3) .acf-alt-image { animation-delay: 0.4s; }

/* ACF sections - Tablet */
@media (max-width: 900px) {
  .acf-alt-row,
  .acf-alt-row.reverse {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .acf-alt-inner {
    flex-direction: column;
    gap: 2.5rem;
  }

  .acf-alt-row {
    padding: 3rem 1.2rem;
  }

  .acf-alt-image img {
    height: 340px;
    width: auto;
    max-width: 100%;
  }

  .acf-alt-text h2,
  .acf-alt-text h3,
  .acf-alt-text h4 {
    font-size: 1.4rem;
  }
}

/* ACF sections - Mobile */
@media (max-width: 600px) {
  .acf-alt-row {
    padding: var(--space-2xl) var(--space-md);
  }

  .acf-alt-inner {
    flex-direction: column !important;
    gap: var(--space-xl);
  }

  .acf-alt-text {
    order: 1;
    font-size: 0.9rem;
  }

  .acf-alt-image {
    order: 2;
    width: 100%;
  }

  .acf-alt-text h2,
  .acf-alt-text h3,
  .acf-alt-text h4 {
    font-size: 1.4rem;
  }

  .acf-alt-image img {
    height: 280px;
    width: auto;
    max-width: 100%;
  }
}

/* ===========================================
   CONTACT INFO BAR
   =========================================== */
.rensi-contact-bar {
  background-color: var(--rensi-purple);
  width: 100%;
  z-index: 100000;
  position: relative;
}

body:not(.home) .rensi-contact-bar {
  position: relative;
}

.rensi-contact-bar__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.rensi-contact-bar__item {
  display: flex;
  align-items: center;
}

.rensi-contact-bar__label {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-primary);
  font-size: 13px;
  margin-right: 8px;
}

.rensi-contact-bar__value {
  color: var(--rensi-white);
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.rensi-contact-bar__value:hover {
  color: var(--rensi-orange);
}

.rensi-contact-bar__separator {
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

.home .rensi-contact-bar {
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.home.header-scrolled .rensi-contact-bar {
  position: fixed;
  top: 0;
  background-color: var(--rensi-purple);
}

/* ===========================================
   HEADER / NAVIGATION
   =========================================== */
#main-header,
.et-l--header,
#et-top-navigation {
  transition: background-color var(--transition-medium), box-shadow var(--transition-medium);
}

body:not(.home) #main-header,
body:not(.home) .et-l--header {
  background-color: var(--rensi-white) !important;
}

body:not(.home) #main-header,
body:not(.home) .et-l--header {
  position: relative !important;
  top: 0 !important;
}

body:not(.home) #page-container {
  padding-top: 0 !important;
}

.home #page-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.home #main-content,
.home .et_builder_inner_content,
.home #content-area,
.home .container,
.home #left-area {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.home .et_pb_section:first-child,
.home #et-main-area .et_pb_section:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.home .et-l--header,
.home #main-header {
  height: auto !important;
}

.home #main-header,
.home .et-l--header {
  position: absolute !important;
  top: 37px !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.home.header-scrolled #main-header,
.home.header-scrolled .et-l--header {
  position: fixed !important;
  top: 37px !important;
  background-color: var(--rensi-white) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* Hide logo on homepage */
.home #main-header .logo_container,
.home .et-l--header .et_pb_menu__logo-wrap,
.home .et-l--header .et_pb_menu__logo,
.home #main-header #logo,
.home #logo,
.home .logo_container,
.home .et_pb_menu__logo-wrap,
.home .et_pb_menu__logo {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Show logo on homepage for mobile/tablet */
@media (max-width: 980px) {
  .home #main-header .logo_container,
  .home .et-l--header .et_pb_menu__logo-wrap,
  .home .et-l--header .et_pb_menu__logo,
  .home #main-header #logo,
  .home #logo,
  .home .logo_container,
  .home .et_pb_menu__logo-wrap,
  .home .et_pb_menu__logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .home #logo,
  .home #main-header #logo {
    max-height: 35px !important;
    margin-bottom: 0 !important;
  }

  .home #logo img,
  .home #main-header #logo img,
  .home .et-l--header .et_pb_menu__logo img {
    max-height: 35px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Subpage mobile logo sizing */
  body:not(.home) #logo,
  body:not(.home) #main-header #logo,
  body:not(.home) .et-l--header #logo {
    max-height: 35px !important;
    margin-bottom: 0 !important;
  }

  body:not(.home) #logo img,
  body:not(.home) #main-header #logo img,
  body:not(.home) .et-l--header .et_pb_menu__logo img {
    max-height: 35px !important;
    width: auto !important;
    height: auto !important;
  }

  body:not(.home) .logo_container,
  body:not(.home) .et_pb_menu__logo-wrap {
    height: auto !important;
    overflow: visible !important;
  }
}

.home #et-main-area {
  padding-top: 0 !important;
}

/* Logo alignment */
.logo_container {
  display: inline-block !important;
  vertical-align: baseline !important;
}

#logo,
#main-header #logo,
.et-l--header #logo {
  vertical-align: baseline !important;
  margin-bottom: -25px !important;
  max-height: 45px !important;
}

/* Non-homepage: flex header so logo and menu share space without overlap */
body:not(.home) #main-header .container,
body:not(.home) #main-header .container.clearfix.et_menu_container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body:not(.home) .logo_container {
  position: relative !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
  max-width: 180px !important;
  margin-right: 20px !important;
}

body:not(.home) #logo,
body:not(.home) #main-header #logo,
body:not(.home) .et-l--header #logo {
  margin-bottom: 0 !important;
}

/* All pages: flex nav so search icon aligns with menu items */
#et-top-navigation {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  padding-top: 0 !important;
}

body:not(.home) #et-top-navigation {
  padding-left: 0 !important;
}

#logo img,
#main-header #logo img,
.et-l--header .et_pb_menu__logo img {
  vertical-align: baseline !important;
  max-height: 45px !important;
  width: auto !important;
  height: auto !important;
}

/* #et-top-navigation display handled in flex nav block above */

/* ===========================================
   MENU TEXT STYLING
   =========================================== */
#top-menu > li > a,
#main-header .et-menu > li > a,
.et-l--header .et_pb_menu__menu > nav > ul > li > a,
.et_pb_menu .et-menu > li > a {
  font-family: var(--font-primary) !important;
  text-transform: uppercase !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  transition: color var(--transition-medium) !important;
  white-space: nowrap !important;
}

/* Menu colors - white on homepage transparent */
.home #top-menu > li > a,
.home #main-header .et-menu > li > a,
.home .et-l--header .et_pb_menu__menu > nav > ul > li > a {
  color: var(--rensi-white) !important;
}

/* Menu colors - dark when scrolled */
.home.header-scrolled #top-menu > li > a,
.home.header-scrolled #main-header .et-menu > li > a,
.home.header-scrolled .et-l--header .et_pb_menu__menu > nav > ul > li > a {
  color: var(--rensi-text) !important;
}

/* Menu colors - dark on other pages */
body:not(.home) #top-menu > li > a,
body:not(.home) #main-header .et-menu > li > a,
body:not(.home) .et-l--header .et_pb_menu__menu > nav > ul > li > a {
  color: var(--rensi-text) !important;
}

/* Menu hover */
#top-menu > li > a:hover,
#main-header .et-menu > li > a:hover,
.et-l--header .et_pb_menu__menu > nav > ul > li > a:hover {
  color: var(--rensi-orange) !important;
}

/* Active page - orange on homepage */
.home #top-menu > li.current-menu-item > a,
.home #top-menu > li.current_page_item > a,
.home #top-menu > li.current-menu-ancestor > a,
.home.header-scrolled #top-menu > li.current-menu-item > a,
.home.header-scrolled #top-menu > li.current_page_item > a,
.home.header-scrolled #top-menu > li.current-menu-ancestor > a {
  color: var(--rensi-orange) !important;
}

/* Active page - purple on other pages */
body:not(.home) #top-menu > li.current-menu-item > a,
body:not(.home) #top-menu > li.current_page_item > a,
body:not(.home) #top-menu > li.current-menu-ancestor > a {
  color: var(--rensi-purple) !important;
}

/* ===========================================
   HIDE CART / SEARCH ICON STYLING
   =========================================== */
#main-header .et-cart-info,
.et-l--header .et-cart-info,
.et_pb_menu .et-cart-info,
#main-header .et_pb_menu__cart-button,
.et-l--header .et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__cart-button,
#et-info-cart,
a.et-cart-info {
  display: none !important;
}

#main-header .et_pb_menu__search-button,
.et-l--header .et_pb_menu__search-button {
  display: flex !important;
  align-items: center !important;
}

.home .et_pb_menu__icon.et_pb_menu__search-button,
.home #et_search_icon:before {
  color: var(--rensi-white) !important;
}

.home.header-scrolled .et_pb_menu__icon.et_pb_menu__search-button,
.home.header-scrolled #et_search_icon:before,
body:not(.home) .et_pb_menu__icon.et_pb_menu__search-button,
body:not(.home) #et_search_icon:before {
  color: var(--rensi-text) !important;
}

.et_pb_menu__icon.et_pb_menu__search-button:hover,
#et_search_icon:hover:before {
  color: var(--rensi-orange) !important;
}

/* Search icon — align inline with menu items */
#et-top-navigation #top-menu-nav {
  float: none !important;
}

#et_top_search {
  display: flex !important;
  align-items: center !important;
  margin-left: 12px !important;
  float: none !important;
  flex-shrink: 0 !important;
}

#et_search_icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  cursor: pointer;
  font-size: 18px !important;
  width: 20px !important;
  height: 20px !important;
}

/* Search overlay bar — styled input, Divi handles show/hide animation */
.et_search_outer {
  overflow: hidden !important;
  z-index: 99999 !important;
}

.et_search_outer .container,
.et_search_outer .container.et_search_form_container {
  max-width: 800px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.et_search_outer input.et-search-field {
  color: var(--rensi-text) !important;
  font-size: 1rem !important;
  font-family: var(--font-secondary) !important;
  background: var(--rensi-white) !important;
  border: 1px solid var(--rensi-gray-300) !important;
  border-radius: 25px !important;
  padding: 8px 20px !important;
  height: 38px !important;
  width: 100% !important;
}

.et_search_outer input.et-search-field::placeholder {
  color: var(--rensi-text-muted) !important;
}

.et_search_outer span.et_close_search_field {
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer;
}

/* ===========================================
   WEBSHOP BUTTON (menuButtonPurple)
   =========================================== */
/*
 * VIS-01 AUDIT (pre-flight):
 * .et_pb_button — already compliant via UNIFIED BUTTON SYSTEM (lines 178-270):
 *   border-radius: var(--btn-radius), padding: var(--btn-padding),
 *   font-size: var(--btn-font-size), transition: all var(--transition-medium).
 * .rensi-cta — selector does not exist in codebase (confirmed absent).
 * .rensi-subcat-nav__btn — selector does not exist in codebase (confirmed absent).
 * Only remaining non-compliant button: Webshop pill (menuButtonPurple) — fixed below.
 */
#top-menu > li.menuButtonPurple {
  margin-left: 15px !important;
  align-self: center !important;
}

/* All states: force white text regardless of header scroll context.
   Selectors mirror every high-specificity color rule that could override it. */
#top-menu > li.menuButtonPurple > a,
body:not(.home) #top-menu > li.menuButtonPurple > a,
.home #top-menu > li.menuButtonPurple > a,
.home.header-scrolled #top-menu > li.menuButtonPurple > a {
  color: var(--rensi-white) !important;
  background-color: var(--rensi-purple) !important;
  padding: 8px 20px !important;
  border-radius: var(--btn-radius) !important;
  font-size: var(--btn-font-size) !important;
  transition: all var(--transition-fast) !important;
}

/* Hover: orange background, text stays white */
#top-menu > li.menuButtonPurple > a:hover,
.home #top-menu > li.menuButtonPurple > a:hover,
.home.header-scrolled #top-menu > li.menuButtonPurple > a:hover,
body:not(.home) #top-menu > li.menuButtonPurple > a:hover {
  background-color: var(--rensi-orange) !important;
  color: var(--rensi-white) !important;
}

/* ===========================================
   HEADER LAYOUT
   =========================================== */
#main-header .container,
.et-l--header .et_pb_row {
  padding-left: 3% !important;
  padding-right: 3% !important;
  max-width: 100% !important;
  width: 100% !important;
}

#main-header,
.et-l--header {
  padding: 28px 0 18px 0 !important;
  min-height: 80px !important;
  box-sizing: border-box !important;
}

.et_pb_menu .et_pb_menu__wrap,
.et-l--header .et_pb_menu__wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

#top-menu,
.et_pb_menu__menu > nav > ul {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#top-menu > li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#top-menu > li > a {
  padding-top: 30px !important;
}

#top-menu > li.menu-item-has-children > a::after {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.et_pb_menu .et-menu {
  display: flex !important;
  align-items: center !important;
}

.et_pb_button_module_wrapper {
  max-width: 100%;
}

/* ===========================================
   MEGA MENU
   =========================================== */
#top-menu li.mega-menu {
  position: static !important;
}

#top-menu li.mega-menu > ul.sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  background-color: var(--rensi-white) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15) !important;
  padding: 20px 8% 25px 8% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 20px 50px !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease, visibility 0.15s ease !important;
}

#top-menu li.mega-menu > a:hover ~ ul.sub-menu,
#top-menu li.mega-menu:hover > ul.sub-menu {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#top-menu li.mega-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
}

#top-menu li.mega-menu:hover::after {
  height: 10px;
  pointer-events: auto;
}

#top-menu li.mega-menu > ul.sub-menu > li {
  flex: 1 1 220px !important;
  min-width: 200px !important;
  max-width: 320px !important;
  padding: 10px 15px !important;
  text-align: left !important;
}

#top-menu li.mega-menu > ul.sub-menu > li > a {
  font-family: var(--font-primary) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--rensi-purple) !important;
  padding: 8px 0 !important;
  border-bottom: 2px solid var(--rensi-orange) !important;
  margin-bottom: 10px !important;
  display: block !important;
  text-align: left !important;
}

#top-menu li.mega-menu > ul.sub-menu > li > ul {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
}

#top-menu li.mega-menu ul.sub-menu li li a {
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  color: var(--rensi-text) !important;
  background: transparent !important;
  padding: 8px 0 !important;
  display: block !important;
  text-align: left !important;
}

#top-menu li.mega-menu ul.sub-menu li li a:hover {
  color: var(--rensi-purple) !important;
  padding-left: 8px !important;
}

/* ===========================================
   REGULAR SUBMENUS
   =========================================== */
#top-menu > li:not(.mega-menu) {
  position: relative !important;
}

#top-menu li:not(.mega-menu) > ul.sub-menu,
.et-menu li:not(.mega-menu) > ul.sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  background-color: var(--rensi-white) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
  padding: 10px 0 !important;
  min-width: 220px !important;
  z-index: 9999 !important;
}

#top-menu li ul.sub-menu li a {
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: var(--rensi-text) !important;
  background-color: transparent !important;
  padding: 10px 20px !important;
  text-transform: none !important;
}

#top-menu li ul.sub-menu li a:hover {
  color: var(--rensi-purple) !important;
  background-color: var(--rensi-gray-light) !important;
}

.et-menu li li a {
  padding: 25px 20px;
  width: 243px !important;
}

.nav li ul {
  position: absolute;
  padding: 20px 0;
  z-index: 9999;
  width: 317px !important;
}

/* ===========================================
   HERO BANNER
   =========================================== */
.home .homepage-slide {
  position: relative;
}

.home .homepage-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--rensi-purple-dark);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}

.home .homepage-slide > * {
  position: relative;
  z-index: 2;
}

.home .homepage-slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
  z-index: 1;
  pointer-events: none;
}

.home .homepage-slide .et_pb_slide_video {
  position: relative;
}

.home .homepage-slide .et_pb_slide_video::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--rensi-purple-dark);
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
}

.hero-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-section) var(--space-xl);
  color: var(--rensi-white);
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-logo {
  width: 400px;
  max-width: 100%;
  height: auto;
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 1px;
}

.et_pb_slide.et-pb-active-slide {
  position: relative;
}

.et_pb_slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(55, 25, 65, 0.25) 0%, rgba(55, 25, 65, 0.75) 100%);
}

/* ===========================================
   BLOG GRID
   Divi uses salvattore: .et_pb_salvattore_content > .column.size-1of3
   Each column contains multiple posts stacked vertically (masonry style).
   We use CSS grid on salvattore_content for even column widths.
   =========================================== */
.et_pb_blog_grid .et_pb_salvattore_content {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 1.6rem;
}

.et_pb_blog_grid .et_pb_salvattore_content > .column {
  width: 100% !important;
  float: none !important;
}

.et_pb_blog_grid .et_pb_post {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  margin-bottom: 1.6rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border var(--transition-fast);
  font-family: var(--font-primary);
}

.et_pb_blog_grid .et_pb_post:hover {
  transform: translateY(-3px);
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}

.et_pb_blog_grid .et_pb_image_container img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: var(--card-radius-sm);
  margin-bottom: 0.9rem;
}

.et_pb_blog_grid .et_pb_post h2,
.et_pb_blog_grid .et_pb_post h2 a {
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--rensi-purple);
}

.et_pb_blog_grid .post-meta {
  text-align: center;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 0.6rem;
}

.et_pb_blog_grid .et_pb_post_content p {
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0.6rem 0 1rem;
}

.et_pb_blog_grid .more-link {
  display: block;
  text-align: center;
  background: var(--rensi-purple);
  color: #fff !important;
  border-radius: 999px;
  padding: 0.45rem 1.25rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  font-family: inherit;
  max-width: 150px;
  margin: 0 auto;
}

.et_pb_blog_grid .more-link:hover {
  background: var(--rensi-orange);
  color: var(--rensi-white) !important;
}

/* Blog grid responsive */
@media (max-width: 768px) {
  .et_pb_blog_grid .et_pb_salvattore_content {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .et_pb_blog_grid .et_pb_salvattore_content {
    grid-template-columns: 1fr !important;
  }
}

/* ===========================================
   PRODUCT GRID / WOOCOMMERCE
   =========================================== */
.et_pb_shop .woocommerce ul.products::before,
.et_pb_shop .woocommerce ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products.columns-3::before,
ul.products.columns-3::after {
  content: none !important;
  display: none !important;
}

.et_pb_shop .woocommerce ul.products,
.woocommerce ul.products,
ul.products.columns-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.6rem !important;
  width: 100% !important;
  max-width: 100% !important;
}

.et_pb_shop .woocommerce ul.products li.product,
.woocommerce ul.products li.product,
ul.products.columns-3 li.product {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border var(--transition-fast);
  font-family: var(--font-primary);
  box-sizing: border-box !important;
}

.et_pb_shop .woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
  transform: translateY(-5px);
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}

.et_pb_shop .woocommerce ul.products li.product a img,
.woocommerce ul.products li.product a img {
  width: 100%;
  height: 210px;
  object-fit: contain;
  border-radius: var(--card-radius-sm);
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.9rem;
}

.et_pb_shop .woocommerce ul.products li.product h2,
.et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.25;
  min-height: auto;
  margin-top: 0.8rem;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--rensi-purple);
  font-family: var(--font-secondary);
}

.et_pb_shop .woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price {
  text-align: center;
  margin-bottom: 0.9rem;
  color: var(--rensi-gray-dark);
  font-family: var(--font-secondary);
}

.et_pb_shop .woocommerce ul.products li.product a.button,
.et_pb_shop .woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  background: var(--rensi-purple);
  color: var(--rensi-white) !important;
  border-radius: 999px;
  padding: 0.45rem 1.25rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  font-family: var(--font-secondary);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.et_pb_shop .woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background: var(--rensi-orange);
  color: var(--rensi-white) !important;
}

/* ===========================================
   BROCHURE GRID
   =========================================== */
.rensi-brochure-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xl) 0;
}

.rensi-brochure-intro {
  font-family: var(--font-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--rensi-text);
  margin-bottom: var(--space-2xl);
  max-width: 800px;
}

.rensi-brochure-grid {
  display: grid;
  gap: 1.6rem;
}

.rensi-brochure-grid.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.rensi-brochure-grid.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.rensi-brochure-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border var(--transition-fast);
  text-decoration: none;
  color: inherit;
}

.rensi-brochure-card:hover {
  transform: translateY(-5px);
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
  text-decoration: none;
  color: inherit;
}

.rensi-brochure-card__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--card-radius-sm);
  margin-bottom: 0.9rem;
  background: var(--rensi-gray-100);
}

.rensi-brochure-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-medium);
}

.rensi-brochure-card:hover .rensi-brochure-card__image img {
  transform: scale(1.03);
}

.rensi-brochure-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rensi-gray-300);
}

.rensi-brochure-card__title {
  text-align: center;
  font-size: 1.05rem;
  line-height: var(--line-height-tight);
  margin: 0.4rem 0 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--rensi-purple);
  font-family: var(--font-secondary);
}

.rensi-brochure-empty {
  font-family: var(--font-secondary);
  color: var(--rensi-text-muted);
  font-style: italic;
}

@media (max-width: 980px) {
  .rensi-brochure-grid.columns-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .rensi-brochure-grid.columns-3,
  .rensi-brochure-grid.columns-2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .rensi-brochure-card {
    padding: 1rem;
  }

  .rensi-brochure-card__image {
    aspect-ratio: 4 / 3;
  }
}

/* ===========================================
   CATEGORY BOXES
   =========================================== */
.prodcatBox {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border var(--transition-fast);
}

.prodcatBox:hover {
  transform: translateY(-5px);
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}

.prodcatBox h4 {
  position: relative;
  display: inline-block;
  color: inherit;
  transition: color 0.3s ease;
}

.prodcatBox h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background-color: var(--rensi-purple-dark);
  transition: width 0.3s ease;
}

.prodcatBox:hover h4 {
  color: var(--rensi-purple-dark);
}

.prodcatBox:hover h4::after {
  width: 100%;
}

/* ===========================================
   VIDEO LIBRARY
   =========================================== */
.product-video-library {
  position: relative;
  width: 100%;
  background: var(--rensi-white, #fff);
  padding: 2rem 0;
  clear: both;
}

.product-video-library * {
  box-sizing: border-box;
}

.et_pb_text .product-video-library {
  width: 100%;
  max-width: 100%;
}

.pvl-strip {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: center;
}

.pvl-track {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 1.5rem;
  position: relative;
  justify-content: center;
}

.pvl-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  aspect-ratio: 16 / 9;
  background: var(--rensi-gray-100, #f5f5f5);
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.pvl-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.pvl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pvl-thumb.active {
  border-color: var(--rensi-orange, #f39200);
  box-shadow: 0 4px 12px rgba(243, 146, 0, 0.2);
}

.pvl-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 36px;
  color: var(--rensi-white);
  background: rgba(var(--rensi-purple-rgb), 0.4);
  pointer-events: none;
  transition: background var(--transition-medium);
}

.pvl-thumb:hover .pvl-play {
  background: rgba(var(--rensi-purple-rgb), 0.55);
}

.pvl-highlight {
  position: absolute;
  bottom: 0;
  height: 3px;
  background: var(--rensi-orange, #f39200);
  left: 0;
  width: 0;
  transform: translateX(0);
  transition: transform 0.3s ease, width 0.3s ease;
}

.pvl-player {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: min(56.25%, 506px);
  height: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.pvl-player .fluid-width-video-wrapper {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

.pvl-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
}

/* ===========================================
   DIVI TABS
   =========================================== */
.et_pb_tabs {
  background: var(--rensi-white);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 2em;
  border: none;
}

ul.et_pb_tabs_controls {
  background-color: transparent;
}

.et_pb_tabs_controls li {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 20px;
  margin-right: 4px;
  font-weight: 600;
  color: var(--rensi-purple);
  transition: all 0.3s ease;
}

.et_pb_tabs_controls li.et_pb_tab_active {
  color: var(--rensi-purple);
  background: transparent;
  border-bottom: 2px solid var(--rensi-purple);
}

.et_pb_tabs_controls li:hover {
  background: transparent;
  color: var(--rensi-purple);
  border-bottom: 2px solid var(--rensi-purple);
}

.et_pb_all_tabs {
  padding: 20px;
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--rensi-gray-dark);
}

.et_pb_all_tabs a {
  color: var(--rensi-gray);
  text-decoration: underline;
}

.et_pb_all_tabs a:hover {
  color: var(--rensi-purple-light);
}

/* ===========================================
   PYYDÄ TARJOUS FORM
   =========================================== */
.pyydä-tarjous-section,
.et_pb_section.quote-form-section,
#pyydä-tarjous {
  background-color: var(--rensi-gray-light) !important;
  padding: 80px 0 !important;
  position: relative;
}

.pyydä-tarjous-section .et_pb_text h2,
.pyydä-tarjous-section .et_pb_module_header,
.et_pb_section.quote-form-section .et_pb_text h2 {
  color: var(--rensi-purple-dark) !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 15px !important;
  letter-spacing: -0.02em !important;
}

.pyydä-tarjous-section .et_pb_text p,
.et_pb_section.quote-form-section .et_pb_text p {
  color: var(--rensi-text-muted) !important;
  text-align: center !important;
  font-size: 1.1rem !important;
  max-width: 600px !important;
  margin: 0 auto 40px auto !important;
}

.pyydä-tarjous-section .et_pb_contact_form_container,
.et_pb_section.quote-form-section .et_pb_contact_form_container {
  max-width: 900px;
  margin: 0 auto;
}

.pyydä-tarjous-section .et_pb_contact_main_title,
.et_pb_section.quote-form-section .et_pb_contact_main_title {
  color: var(--rensi-purple-dark) !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 40px !important;
}

.pyydä-tarjous-section .et_pb_contact form,
.pyydä-tarjous-section .et_pb_contact_form,
.et_pb_section.quote-form-section .et_pb_contact form {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}

.pyydä-tarjous-section .et_pb_contact_form p,
.pyydä-tarjous-section .et_pb_contact p,
.et_pb_section.quote-form-section .et_pb_contact p {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
}

.pyydä-tarjous-section .et_pb_contact_form p.et_pb_contact_field_half,
.et_pb_section.quote-form-section .et_pb_contact p.et_pb_contact_field_half {
  width: 100% !important;
  float: none !important;
}

.pyydä-tarjous-section .et_pb_contact_form p.et_pb_contact_field_last,
.pyydä-tarjous-section .et_pb_contact p:has(textarea),
.et_pb_section.quote-form-section .et_pb_contact p:has(textarea) {
  grid-column: 1 / -1 !important;
}

.pyydä-tarjous-section .et_pb_contact_form label,
.pyydä-tarjous-section .et_pb_contact label,
.et_pb_section.quote-form-section .et_pb_contact label {
  color: var(--rensi-purple-dark) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: block !important;
  padding-bottom: 8px !important;
}

.pyydä-tarjous-section .et_pb_contact input.input,
.pyydä-tarjous-section .et_pb_contact select,
.pyydä-tarjous-section .et_pb_contact textarea,
.et_pb_section.quote-form-section .et_pb_contact input.input,
.et_pb_section.quote-form-section .et_pb_contact select,
.et_pb_section.quote-form-section .et_pb_contact textarea,
#pyydä-tarjous .et_pb_contact input.input,
#pyydä-tarjous .et_pb_contact select,
#pyydä-tarjous .et_pb_contact textarea {
  width: 100% !important;
  padding: 16px 20px !important;
  font-size: 1rem !important;
  color: var(--rensi-gray-dark) !important;
  background-color: var(--rensi-white) !important;
  border: 1px solid var(--rensi-gray-300) !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
  outline: none !important;
  box-shadow: none !important;
}

.pyydä-tarjous-section .et_pb_contact input::placeholder,
.pyydä-tarjous-section .et_pb_contact textarea::placeholder {
  color: var(--rensi-gray) !important;
  opacity: 1 !important;
}

.pyydä-tarjous-section .et_pb_contact input.input:hover,
.pyydä-tarjous-section .et_pb_contact select:hover,
.pyydä-tarjous-section .et_pb_contact textarea:hover {
  border-color: var(--rensi-purple-dark) !important;
}

.pyydä-tarjous-section .et_pb_contact input.input:focus,
.pyydä-tarjous-section .et_pb_contact select:focus,
.pyydä-tarjous-section .et_pb_contact textarea:focus,
#pyydä-tarjous .et_pb_contact input.input:focus,
#pyydä-tarjous .et_pb_contact select:focus,
#pyydä-tarjous .et_pb_contact textarea:focus {
  border-color: var(--rensi-purple-dark) !important;
  box-shadow: 0 0 0 4px rgba(var(--rensi-purple-rgb), 0.12) !important;
}

.pyydä-tarjous-section .et_pb_contact select,
.et_pb_section.quote-form-section .et_pb_contact select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235e1f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 18px !important;
  padding-right: 50px !important;
  cursor: pointer !important;
  background-color: var(--rensi-white) !important;
}

.pyydä-tarjous-section .et_pb_contact textarea,
.et_pb_section.quote-form-section .et_pb_contact textarea {
  min-height: 130px !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}

.pyydä-tarjous-section .et_pb_contact_form .et_pb_contact_submit,
.pyydä-tarjous-section .et_contact_bottom_container,
.et_pb_section.quote-form-section .et_pb_contact .et_pb_contact_submit {
  grid-column: 1 / -1 !important;
}

.pyydä-tarjous-section .et_pb_contact_submit,
.pyydä-tarjous-section .et_pb_button,
.et_pb_section.quote-form-section .et_pb_contact_submit,
#pyydä-tarjous .et_pb_button {
  background: var(--rensi-orange) !important;
  color: var(--rensi-white) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  padding: 18px 50px !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  cursor: pointer !important;
  transition: all var(--transition-medium) !important;
  margin-top: 15px !important;
  box-shadow: 0 4px 15px rgba(var(--rensi-orange-rgb), 0.3) !important;
  width: 100% !important;
  display: block !important;
}

.pyydä-tarjous-section .et_pb_button:not(.et_pb_button_loading):after,
.et_pb_section.quote-form-section .et_pb_button:not(.et_pb_button_loading):after {
  display: none !important;
}

.pyydä-tarjous-section .et_pb_contact_submit:hover,
.pyydä-tarjous-section .et_pb_button:hover,
#pyydä-tarjous .et_pb_button:hover {
  background: var(--rensi-orange-light) !important;
  color: var(--rensi-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 25px rgba(var(--rensi-orange-rgb), 0.4) !important;
}

.pyydä-tarjous-section .et_pb_contact_submit:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px rgba(240, 134, 0, 0.3) !important;
}

/* Footer contact form: orange button to contrast with purple section background */
.et_pb_section_0_tb_footer .et_pb_contact_submit,
.et_pb_contact_form_0_tb_footer .et_pb_contact_submit {
  background: var(--rensi-orange) !important;
  color: var(--rensi-white) !important;
  border-radius: var(--btn-radius) !important;
  padding: 10px 24px !important;
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
  transition: background var(--transition-fast) !important;
}
.et_pb_section_0_tb_footer .et_pb_contact_submit:hover,
.et_pb_contact_form_0_tb_footer .et_pb_contact_submit:hover {
  background: var(--rensi-orange-light) !important;
  color: var(--rensi-white) !important;
}

.pyydä-tarjous-section .et_pb_contact_captcha_question {
  color: var(--rensi-purple-dark) !important;
  font-size: 0.9rem !important;
  padding: 10px 0 !important;
}

.pyydä-tarjous-section .et_pb_contact_captcha {
  background-color: var(--rensi-white) !important;
  border: 1px solid var(--rensi-gray-300) !important;
  border-radius: 8px !important;
  color: var(--rensi-gray-dark) !important;
  padding: 16px 20px !important;
}

.pyydä-tarjous-section .et_pb_contact_error_text {
  color: #dc3545 !important;
  font-size: 0.85rem !important;
  margin-top: 8px !important;
}

.pyydä-tarjous-section .et-pb-contact-message {
  padding: 20px !important;
  border-radius: 8px !important;
  margin-bottom: 25px !important;
  text-align: center !important;
}

.pyydä-tarjous-section .et-pb-contact-message.success {
  background-color: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #166534 !important;
}

.pyydä-tarjous-section .et-pb-contact-message.error {
  background-color: rgba(220, 53, 69, 0.1) !important;
  border: 1px solid rgba(220, 53, 69, 0.3) !important;
  color: #991b1b !important;
}

.pyydä-tarjous-section .et_pb_contact_field_checkbox {
  grid-column: 1 / -1 !important;
}

.pyydä-tarjous-section .et_pb_contact_field_checkbox .et_pb_contact_field_options_list {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.pyydä-tarjous-section .et_pb_contact_field_checkbox input[type="checkbox"] {
  width: 22px !important;
  height: 22px !important;
  accent-color: #f08600 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.pyydä-tarjous-section .et_pb_contact_field_checkbox label {
  color: var(--rensi-text-muted) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.6 !important;
}

.pyydä-tarjous-section .et_pb_contact_field label span.required_mark {
  color: #f08600 !important;
}

@keyframes divi-form-spin {
  to { transform: rotate(360deg); }
}

.pyydä-tarjous-section .et_pb_contact_submit.et_pb_button_loading {
  position: relative !important;
  color: transparent !important;
}

.pyydä-tarjous-section .et_pb_contact_submit.et_pb_button_loading::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 24px !important;
  height: 24px !important;
  margin: -12px 0 0 -12px !important;
  border: 3px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: divi-form-spin 0.8s linear infinite !important;
}

#pyydä-tarjous .et_pb_contact label {
  color: var(--rensi-purple-dark) !important;
}

/* ===========================================
   RENSI CATEGORY MENU
   =========================================== */
.rensi-cat-menu .et_pb_menu__menu > nav > ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.rensi-cat-menu .et_pb_menu__menu > nav > ul > li {
  display: block !important;
  padding: 0 !important;
}

.rensi-cat-menu .et_pb_menu__menu nav ul li a {
  display: block !important;
  background-color: var(--rensi-white) !important;
  border: 1px solid var(--rensi-gray-300) !important;
  color: var(--rensi-gray-dark) !important;
  border-radius: 8px !important;
  padding: 14px 20px !important;
  font-weight: 500 !important;
  transition: all 0.25s ease !important;
}

.rensi-cat-menu .et_pb_menu__menu nav ul li a:hover {
  border-color: var(--rensi-purple-dark) !important;
  color: var(--rensi-purple-dark) !important;
  box-shadow: 0 0 0 4px rgba(var(--rensi-purple-rgb), 0.12) !important;
}

.rensi-cat-menu .et_pb_menu__menu nav ul li.current-menu-item > a,
.rensi-cat-menu .et_pb_menu__menu nav ul li.current_page_item > a {
  background: var(--rensi-purple-dark) !important;
  border-color: var(--rensi-purple-dark) !important;
  color: var(--rensi-white) !important;
}

.rensi-cat-menu .et_pb_menu__menu nav ul li.current-menu-item > a:hover,
.rensi-cat-menu .et_pb_menu__menu nav ul li.current_page_item > a:hover {
  background: var(--rensi-purple-light) !important;
  color: var(--rensi-white) !important;
  box-shadow: 0 4px 12px rgba(var(--rensi-purple-rgb), 0.25) !important;
}

.rensi-cat-menu .et_pb_menu__icon {
  display: none !important;
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */
.u-card-style {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  padding: var(--card-padding) !important;
  box-shadow: var(--card-shadow) !important;
}

.u-btn-pill {
  background: var(--rensi-purple) !important;
  color: var(--rensi-white) !important;
  border-radius: 999px !important;
  padding: 0.45rem 1.25rem !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border: none !important;
}

.u-btn-pill:hover {
  background: var(--rensi-orange) !important;
  color: var(--rensi-white) !important;
}

.u-heading-purple {
  color: var(--rensi-purple) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
}

/* ===========================================
   RESPONSIVE - TABLET
   =========================================== */
@media (min-width: 768px) and (max-width: 980px) {
  .et_pb_section {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
  }
}

@media (max-width: 980px) {
  /* Touch targets - mobile menu links */
  .et_mobile_menu li a,
  #mobile_menu li a {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
  }

  /* Touch targets - buttons */
  .et_pb_button,
  .button,
  a.button {
    min-height: 44px;
  }

  .et-pb-arrow-prev,
  .et-pb-arrow-next,
  .slick-prev,
  .slick-next {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
  }

  .et_pb_section {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }

  .et_pb_row {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  body,
  .et_pb_text {
    font-size: 17px;
  }

  h1, .et_pb_text h1 { font-size: 2rem; }
  h2, .et_pb_text h2 { font-size: 1.75rem; }
  h3, .et_pb_text h3 { font-size: 1.5rem; }

  /* Product grid - 2 columns */
  .et_pb_shop .woocommerce ul.products,
  .woocommerce ul.products,
  ul.products.columns-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Desktop menu hidden */
  #top-menu,
  .et-menu,
  #et-top-navigation nav > ul {
    display: none !important;
  }

  /* Show hamburger */
  .mobile_menu_bar,
  .et_pb_menu__icon.et_pb_menu__icon--menu {
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100001 !important;
    position: relative !important;
  }

  .mobile_menu_bar:before,
  .et_pb_menu__icon:before {
    color: var(--rensi-text) !important;
    font-size: 32px !important;
  }

  /* Menu gap responsive */
  #top-menu { gap: 12px !important; }
}

/* ===========================================
   RESPONSIVE - MOBILE
   =========================================== */
@media (max-width: 768px) {
  :root {
    --card-padding: 1rem;
    --card-radius: 16px;
    --card-radius-sm: 12px;
  }

  /* Product grid - 2 columns on mobile */
  .et_pb_shop .woocommerce ul.products,
  .woocommerce ul.products,
  ul.products.columns-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Override Divi's float-based product layout (width: 45.25% + margin: 9.5%) */
  .woocommerce-page ul.products li.product,
  .woocommerce-page ul.products li.product:nth-child(n),
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product:nth-child(n) {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
  }

  .et_pb_blog_grid .et_pb_salvattore_content {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
  }

  .et_pb_shop .woocommerce ul.products li.product a img,
  .woocommerce ul.products li.product a img,
  .et_pb_blog_grid .et_pb_image_container img {
    min-height: 120px;
    max-height: 200px;
    height: auto;
    object-fit: cover;
  }

  .et_pb_shop .woocommerce ul.products li.product h2,
  .et_pb_blog_grid .et_pb_post h2 {
    font-size: 0.9rem;
  }

  /* Tables responsive */
  .table.table-striped {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table.table-striped td,
  .table.table-striped th {
    white-space: normal;
    word-break: break-word;
    min-width: 80px;
  }

  /* Filters */
  .yith-wcan-filters .filters-container form {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Tabs */
  .et_pb_tabs_controls li {
    padding: 10px 12px;
    font-size: 14px;
  }

  .et_pb_all_tabs {
    padding: 15px;
    font-size: 14px;
  }

  /* Form responsive */
  .pyydä-tarjous-section .et_pb_contact form,
  .et_pb_section.quote-form-section .et_pb_contact form {
    grid-template-columns: 1fr !important;
  }

  .pyydä-tarjous-section,
  .et_pb_section.quote-form-section {
    padding: 50px 20px !important;
  }

  .hero-logo {
    width: 150px;
    max-width: 60%;
    margin: 0 auto 10px auto;
    display: block !important;
    visibility: visible !important;
  }

  .hero-subtitle {
    font-size: 0.9rem;
    text-align: center;
    display: block !important;
    visibility: visible !important;
  }

  /* Video library */
  .pvl-thumb {
    width: 140px;
  }

  .pvl-player {
    max-width: 100%;
  }

}

/* ===========================================
   MOBILE - VIDEO BANNER & HEADER
   =========================================== */
@media (max-width: 980px) {
  /* Video section height */
  body.home .et_pb_section:first-of-type,
  body.home .et_pb_fullwidth_section:first-of-type,
  body.home .homepage-slide,
  body.home .et_pb_slider,
  body.home .et_pb_slides,
  body.home .et_pb_slide,
  body.home .et_pb_fullwidth_slider,
  body.home #et-main-area > .et_pb_section:first-child {
    height: 50vh !important;
    max-height: 50vh !important;
    min-height: 280px !important;
    overflow: hidden !important;
  }

  body.home .et_pb_slide video,
  body.home .et_pb_slider video,
  body.home .homepage-slide video,
  body.home video,
  body.home .mejs-container,
  body.home .et_pb_video_wrap {
    height: 50vh !important;
    max-height: 50vh !important;
    object-fit: cover !important;
    overflow: hidden !important;
  }

  /* Constrain slider container on mobile - homepage hero only */
  body.home .et_pb_fullwidth_section .et_pb_container,
  body.home .et_pb_section_first .et_pb_container {
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Override Divi inline height so container matches 50vh hero */
  body.home .et_pb_fullwidth_section .et_pb_container.clearfix,
  body.home .et_pb_section_first .et_pb_container.clearfix,
  body.home .et_pb_slider .et_pb_container.clearfix {
    height: 50vh !important;
    min-height: 280px !important;
    max-height: 50vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.home .et_pb_slider_container_inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.home .et_pb_slide_description {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    /* Pad bottom so flex centering sits in the VISIBLE hero area (below fixed header) */
    padding: 0 20px 60px !important;
    text-align: center !important;
  }

  body.home .et_pb_slide_content {
    text-align: center !important;
  }

  body.home .hero-logo {
    width: 160px !important;
    max-width: 50% !important;
    margin: 0 auto 12px auto !important;
  }

  body.home .hero-subtitle {
    font-size: 0.875rem !important;
    color: var(--rensi-white) !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
  }

  body.home .homepage-slide,
  body.home .et_pb_section:first-of-type,
  body.home .et_pb_slider,
  body.home .et_pb_slide {
    position: relative !important;
  }

  /* Mobile header — dark on all pages including home */
  body.home #main-header,
  body.home .et-l--header {
    background: #160820 !important;
    position: fixed !important;
    top: 32px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    padding: 8px 15px !important;
  }

  /* When Divi adds .header-scrolled on scroll it has higher specificity
     (.home.header-scrolled vs body.home) and would set top:37px + white bg.
     Override both here — adding body raises specificity to (1,2,1) vs (1,2,0). */
  body.home.header-scrolled #main-header,
  body.home.header-scrolled .et-l--header {
    top: 32px !important;
    background: #160820 !important;
  }

  body.home .mobile_menu_bar,
  body.home .et_pb_menu__icon,
  body.home .et_pb_menu__icon--menu {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 100002 !important;
    align-items: center !important;
  }

  body.home .mobile_menu_bar:before,
  body.home .et_pb_menu__icon:before {
    color: var(--rensi-gray-dark) !important;
    font-size: 28px !important;
    display: block !important;
    visibility: visible !important;
  }

  /* Contact bar */
  .rensi-contact-bar,
  .home .rensi-contact-bar,
  body.home .rensi-contact-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100010 !important;
    height: 32px !important;
    min-height: 32px !important;
    background-color: var(--rensi-purple) !important;
    display: flex !important;
    align-items: center !important;
  }

  .rensi-contact-bar__inner {
    padding: 4px 10px;
    flex-wrap: nowrap;
    overflow: visible;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
  }

  .rensi-contact-bar__item {
    margin: 0 4px;
    flex-shrink: 0;
  }

  .rensi-contact-bar__value {
    font-size: 11px;
    white-space: nowrap;
    color: var(--rensi-white) !important;
    font-weight: 600;
  }

  .rensi-contact-bar__separator {
    font-size: 11px;
    margin: 0 2px;
    color: rgba(255, 255, 255, 0.5) !important;
  }

  /* Show 3 contact items on mobile (Myynti, Huolto, Keskus), hide Aukioloajat */
  .rensi-contact-bar__item:nth-child(n+7) {
    display: none;
  }

  .rensi-contact-bar__separator:nth-child(n+6) {
    display: none;
  }

  .home #page-container {
    padding-top: 64px !important;
  }

  /* Non-home header - sticky, stacked directly below the fixed contact bar */
  body:not(.home) #main-header,
  body:not(.home) .et-l--header {
    position: fixed !important;
    top: 32px !important;      /* below 32px single-row bar (≤480px) */
    left: 0 !important;
    right: 0 !important;
    z-index: 100008 !important;
    margin-top: 0 !important;
    padding: 8px 15px !important;
    min-height: auto !important;
    background: #160820 !important;
  }

  /* Push page content below both fixed bars: 32px contact + ~60px header */
  body:not(.home) #page-container {
    padding-top: 92px !important;
  }

  /* Hide Divi's fullwidth search overlay (separate from #et_top_search) */
  #main-header .et_search_outer {
    display: none !important;
  }

  /* Mobile header layout - flex alignment */
  #main-header .container,
  #main-header .container.clearfix.et_menu_container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  #main-header .logo_container {
    position: relative !important;
    flex-shrink: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  #main-header .logo_container img,
  #main-header #logo img {
    vertical-align: middle !important;
    display: block !important;
  }

  /* Dark header on all pages — invert logo to white on both home and non-home */
  #main-header .logo_container img,
  #main-header #logo img {
    filter: brightness(0) invert(1) !important;
  }

  #et-top-navigation {
    float: none !important;
    padding-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  /* Search icon - give it proper width */
  #et_top_search {
    display: flex !important;
    align-items: center !important;
  }

  #et_search_icon {
    width: 32px !important;
    min-width: 32px !important;
    font-size: 22px !important;
  }

  /* Subpage first-section - reduce padding on mobile */
  body:not(.home) .et_pb_section:first-child,
  body:not(.home) .et_pb_section_first {
    padding-top: 100px !important;
    padding-bottom: 20px !important;
  }

  /* Subpage hero images - constrain height on mobile */
  body:not(.home) .et_pb_section:first-child .et_pb_image img,
  body:not(.home) .et_pb_section_first .et_pb_image img {
    max-height: 300px !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Force white header on mobile home */
  .home #main-header,
  .home .et-l--header,
  .home #main-header.et-fixed-header,
  .home .et-l--header.et-fixed-header {
    background-color: var(--rensi-white) !important;
    background: var(--rensi-white) !important;
  }

  /* Footer columns stack on mobile/tablet */
  .et_pb_section_0_tb_footer .et_pb_row,
  .et_pb_row.et_pb_equal_columns[class*="_tb_footer"] {
    flex-wrap: wrap !important;
    flex-direction: column !important;
  }

  .et_pb_section_0_tb_footer .et_pb_column,
  .et_pb_row[class*="_tb_footer"] > .et_pb_column,
  #footer-widgets .footer-widget {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    float: none !important;
    margin-bottom: var(--space-xl) !important;
  }

  .et_pb_section_0_tb_footer .et_pb_column:last-child,
  .et_pb_row[class*="_tb_footer"] > .et_pb_column:last-child,
  #footer-widgets .footer-widget:last-child {
    margin-bottom: 0 !important;
  }

  /* Footer contact form full width */
  .et_pb_contact_form_container {
    max-width: 100% !important;
  }

  .et_pb_contact form {
    max-width: 100% !important;
  }

  /* Form fields stack on mobile */
  .et_pb_contact p.et_pb_contact_field_half {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }

  .et_pb_contact form .et_pb_contact_field {
    margin-bottom: 12px !important;
  }
}

@media (max-width: 980px) and (orientation: landscape) {
  body.home .et_pb_section:first-of-type,
  body.home .et_pb_fullwidth_section:first-of-type,
  body.home .homepage-slide,
  body.home .et_pb_slider,
  body.home .et_pb_slides,
  body.home .et_pb_slide,
  body.home .et_pb_fullwidth_slider {
    height: 70vh !important;
    max-height: 70vh !important;
    min-height: 250px !important;
  }

  body.home .et_pb_slide video,
  body.home .et_pb_slider video,
  body.home .homepage-slide video,
  body.home video,
  body.home .mejs-container,
  body.home .et_pb_video_wrap {
    height: 70vh !important;
    max-height: 70vh !important;
  }
}

/* Contact bar: two-row layout at tablet/narrow-desktop mobile range */
@media (min-width: 481px) and (max-width: 980px) {
  .rensi-contact-bar,
  .home .rensi-contact-bar,
  body.home .rensi-contact-bar {
    height: auto !important;
    min-height: 32px !important;
    padding: 4px 0 !important;
  }

  .rensi-contact-bar__inner {
    flex-wrap: wrap !important;
    row-gap: 2px;
    justify-content: center;
    white-space: normal;
    overflow: visible;
  }

  .rensi-contact-bar__separator {
    display: none !important;
  }

  .rensi-contact-bar__item {
    padding: 0 10px;
    margin: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
  }

  .rensi-contact-bar__item:last-child {
    border-right: none;
  }

  .home #page-container {
    padding-top: 80px !important;
  }

  /* Wider mobile: contact bar is 60px (vs 32px on ≤480px), so the covered area
     is 120px total — increase the hero centering compensation accordingly */
  body.home .et_pb_slide_description {
    padding-bottom: 100px !important;
  }

  /* Home header must sit below the 60px contact bar at this range */
  body.home #main-header,
  body.home .et-l--header,
  body.home.header-scrolled #main-header,
  body.home.header-scrolled .et-l--header {
    top: 60px !important;
  }

  /* Non-home: 2-row bar is 60px at this width range */
  body:not(.home) #main-header,
  body:not(.home) .et-l--header {
    top: 60px !important;
  }

  /* Push content below 60px bar + 60px header */
  body:not(.home) #page-container {
    padding-top: 120px !important;
  }
}

@media (max-width: 480px) {
  .rensi-contact-bar__inner {
    padding: 4px 8px;
    justify-content: center;
  }

  /* Hide separators from position 4 onward — keeps the separator between items 1 and 2 visible */
  .rensi-contact-bar__separator:nth-child(n+4) {
    display: none !important;
  }

  /* On small screens, show only 2 items (Myynti, Huolto) */
  .rensi-contact-bar__item:nth-child(n+5) {
    display: none;
  }

  /* Show label — with only 2 items there's room for "Myynti 040..." context */
  .rensi-contact-bar__label {
    font-size: 10px;
    margin-right: 3px;
    opacity: 0.85;
  }

  .rensi-contact-bar__item {
    margin: 0 5px;
  }

  .rensi-contact-bar__value {
    font-size: 11px;
  }

  /* Product grid - 1 column on small screens */
  .et_pb_shop .woocommerce ul.products,
  .woocommerce ul.products,
  ul.products.columns-3 {
    grid-template-columns: 1fr !important;
  }

  .et_pb_blog_grid .et_pb_salvattore_content {
    grid-template-columns: 1fr !important;
  }
}

/* ===========================================
   MOBILE MENU
   =========================================== */
@media (max-width: 980px) {
  /* Show top-level + first level, hide deeper */
  .et_mobile_menu .sub-menu .sub-menu,
  .et_mobile_menu ul ul ul,
  .et_mobile_menu li > ul > li > ul,
  #mobile_menu .sub-menu .sub-menu,
  #mobile_menu ul ul ul {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  /* Hide arrows for hidden children */
  .et_mobile_menu .sub-menu li.menu-item-has-children > a:after,
  #mobile_menu .sub-menu li.menu-item-has-children > a:after {
    display: none !important;
  }

  /* Mobile menu container */
  .et_mobile_menu,
  #mobile_menu {
    background-color: var(--rensi-white) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 100px) !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 0 !important;
  }

  .et_mobile_menu li,
  #mobile_menu li {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Top level links */
  .et_mobile_menu > li > a,
  #mobile_menu > li > a {
    font-family: var(--font-primary) !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: var(--rensi-text) !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--rensi-gray-200) !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* First level submenu visible */
  .et_mobile_menu > li > ul,
  #mobile_menu > li > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--rensi-gray-100) !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
  }

  /* First level submenu items */
  .et_mobile_menu > li > ul > li > a,
  #mobile_menu > li > ul > li > a {
    font-family: var(--font-primary) !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    color: var(--rensi-text) !important;
    padding: 10px 20px 10px 30px !important;
    border-bottom: 1px solid var(--rensi-gray-200) !important;
    display: block !important;
    width: 100% !important;
  }

  /* Hover/active */
  .et_mobile_menu li a:hover,
  #mobile_menu li a:hover {
    color: var(--rensi-purple) !important;
    background-color: var(--rensi-gray-200) !important;
  }

  .et_mobile_menu li.current-menu-item > a,
  #mobile_menu li.current-menu-item > a {
    color: var(--rensi-purple) !important;
  }

  /* Mobile webshop button */
  .et_mobile_menu li.menuButtonPurple > a,
  #mobile_menu li.menuButtonPurple > a {
    background-color: var(--rensi-purple) !important;
    color: var(--rensi-white) !important;
    margin: 10px 20px !important;
    border-radius: 25px !important;
    text-align: center !important;
    border-bottom: none !important;
  }

  .et_pb_menu__wrap,
  #et-top-navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* Align search icon and hamburger vertically */
  #et_mobile_nav_menu {
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
  }

  .mobile_menu_bar,
  #et_search_icon,
  #et_top_search {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .mobile_menu_bar:before,
  #et_search_icon:before {
    vertical-align: middle !important;
    line-height: 1 !important;
  }
}

/* ===========================================
   PRODUCT CATEGORY HERO - MOBILE
   =========================================== */
@media (max-width: 980px) {
  /* Stack columns in product category / archive hero */
  .et_pb_section_0_tb_body .et_pb_row {
    flex-wrap: wrap !important;
    flex-direction: column !important;
  }

  .et_pb_section_0_tb_body .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    float: none !important;
  }

  .et_pb_section_0_tb_body .et_pb_image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .et_pb_section_0_tb_body .et_pb_text_inner {
    padding: 20px 15px !important;
  }
}

/* ===========================================
   RESPONSIVE DESKTOP MENU
   =========================================== */
@media (max-width: 1700px) {
  #top-menu { gap: 26px !important; }
}

@media (max-width: 1500px) {
  #top-menu { gap: 20px !important; }
  #top-menu > li > a { font-size: 0.95rem !important; }
}

@media (max-width: 1300px) {
  #top-menu { gap: 16px !important; }
  #top-menu > li > a {
    font-size: 0.9rem !important;
    letter-spacing: 0.05em !important;
  }

  body:not(.home) #logo,
  body:not(.home) #main-header #logo,
  body:not(.home) .et-l--header #logo {
    max-height: 35px !important;
  }
}

@media (max-width: 1100px) {
  #top-menu { gap: 12px !important; }
  #top-menu > li > a {
    font-size: 0.85rem !important;
    letter-spacing: 0.03em !important;
  }

  body:not(.home) #logo,
  body:not(.home) #main-header #logo,
  body:not(.home) .et-l--header #logo {
    max-height: 30px !important;
  }

  body:not(.home) .logo_container {
    margin-right: 12px !important;
  }
}

/* ===========================================
   PRODUCT DESCRIPTION CLEANUP
   =========================================== */

/* Force all description images to block, left-aligned, capped size */
.woocommerce-Tabs-panel img,
.et_pb_tab img,
.woocommerce-product-details__short-description img {
  display: block !important;
  max-width: 400px;
  width: 100%;
  height: auto !important;
  margin: 1.5rem 0 !important;
  float: none !important;
  border-radius: 12px;
}

/* Override WordPress alignment classes inside descriptions */
.woocommerce-Tabs-panel .alignnone,
.woocommerce-Tabs-panel .alignleft,
.woocommerce-Tabs-panel .alignright,
.woocommerce-Tabs-panel .aligncenter,
.et_pb_tab .alignnone,
.et_pb_tab .alignleft,
.et_pb_tab .alignright,
.et_pb_tab .aligncenter {
  float: none !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  display: block !important;
}

/* Clean up wp-caption wrappers */
.woocommerce-Tabs-panel .wp-caption,
.et_pb_tab .wp-caption {
  max-width: 100% !important;
  width: auto !important;
}

/* Remove empty paragraph spacing */
.woocommerce-Tabs-panel p:empty,
.et_pb_tab p:empty {
  display: none;
}

/* Normalize heading styling in descriptions */
.woocommerce-Tabs-panel h1,
.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3,
.et_pb_tab h1,
.et_pb_tab h2,
.et_pb_tab h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--rensi-purple);
  margin: 1.5rem 0 0.75rem;
}

/* Tables in descriptions - responsive */
.woocommerce-Tabs-panel table,
.et_pb_tab table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

.woocommerce-Tabs-panel td,
.woocommerce-Tabs-panel th,
.et_pb_tab td,
.et_pb_tab th {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rensi-gray-300);
}

/* Responsive: full-width images on mobile */
@media (max-width: 768px) {
  .woocommerce-Tabs-panel img,
  .et_pb_tab img {
    max-width: 100%;
  }
}

/* =============================================
   A) SIDEBAR NAVIGATION STYLING
   ============================================= */

/* Sticky sidebar */
.child-page-nav {
  position: sticky;
  top: 120px;
}

/* Sidebar heading */
.child-page-nav h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--rensi-gray-dark);
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--rensi-purple-light);
}
.child-page-nav h4 a {
  color: var(--rensi-gray-dark) !important;
  text-decoration: none !important;
}
.child-page-nav h4 a:hover {
  color: var(--rensi-purple-light) !important;
}

/* Remove bullets, clean list */
.child-page-nav ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.child-page-nav ul li {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Sidebar links with left-border accent */
.child-page-nav ul li a {
  display: block;
  padding: 10px 15px;
  color: var(--rensi-gray) !important;
  text-decoration: none !important;
  font-size: var(--font-size-sm);
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}
.child-page-nav ul li a:hover {
  color: var(--rensi-purple-light) !important;
  background: rgba(var(--rensi-purple-rgb), 0.04);
  border-left-color: var(--rensi-purple-light);
}

/* Active/current page highlight */
.child-page-nav ul li.current_page_item a,
.child-page-nav ul li a[aria-current="page"] {
  color: var(--rensi-purple-light) !important;
  font-weight: 700;
  background: rgba(var(--rensi-purple-rgb), 0.08);
  border-left-color: var(--rensi-purple-light);
}


/* =============================================
   B) DOWNLOAD LINK ICONS (PDF, ZIP, EXE, MP4)
   ============================================= */

/* PDF icon (red document) */
.et_pb_post_content a[href$=".pdf"]::before,
.et_pb_post_content a[href$=".PDF"]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='M9 15h6'/%3E%3Cpath d='M12 12v6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ZIP/EXE icon (blue download arrow) */
.et_pb_post_content a[href$=".zip"]::before,
.et_pb_post_content a[href$=".ZIP"]::before,
.et_pb_post_content a[href$=".exe"]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d6efd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* MP4/Video icon (green play) */
.et_pb_post_content a[href$=".mp4"]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23198754' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ===========================================
   SINGLE PRODUCT PAGE CONSISTENCY
   =========================================== */

/* Product title — match brand purple instead of near-black */
.single-product .et_pb_heading_1_tb_body h1,
.single-product .et_pb_heading h1 {
  color: var(--rensi-purple) !important;
  font-family: var(--font-primary) !important;
  font-size: var(--font-size-4xl) !important;
}

/* Pre-title label ("Tehokkaat Ratkaisut...") — keep consistent orange/purple */
.single-product .et_pb_heading_0_tb_body .et_pb_module_heading {
  font-size: var(--font-size-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-weight: 600 !important;
  font-family: var(--font-secondary) !important;
}

/* OEM/Brand pill (e.g. "G-WEIKE") */
.rensi-oem-pill {
  display: inline-block;
  background: rgba(0, 0, 0, 0.08);
  color: var(--rensi-text-muted);
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--font-secondary);
  letter-spacing: 0.03em;
}

/* Center OEM pill on category archive pages */
.tax-product_cat .et_pb_code_inner  {
  text-align: center !important;
}

.rensi-subcategory-header {
  text-align: left;
}

/* Short description under product title */
.single-product .et_pb_wc_description .woocommerce-product-details__short-description,
.single-product .et_pb_wc_description p,
.single-product .et_pb_text_inner p {
  font-family: var(--font-secondary) !important;
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-relaxed) !important;
  color: var(--rensi-text-muted) !important;
}

/* ===========================================
   DIVI TABS ON PRODUCT PAGES
   =========================================== */

/* Tab navigation bar */
.single-product .et_pb_tabs .et_pb_tabs_controls {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid var(--rensi-gray-300) !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Individual tab items */
.single-product .et_pb_tabs .et_pb_tabs_controls li {
  margin: 0 !important;
  padding: 0 !important;
}

.single-product .et_pb_tabs .et_pb_tabs_controls li a {
  display: block;
  padding: 0.85rem 1.5rem !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-family: var(--font-secondary) !important;
  transition: color var(--transition-fast), background var(--transition-fast);
  text-decoration: none !important;
}


/* Tab panel content */
.single-product .et_pb_all_tabs .et_pb_tab {
  font-family: var(--font-secondary) !important;
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-relaxed) !important;
  color: var(--rensi-text) !important;
  padding: var(--space-xl) var(--space-lg) !important;
}

/* ===========================================
   TIETOPANKKI PAGE — MATCH SITE STYLE
   =========================================== */

/* Tietopankki hero area — align width */
.page-id-441 .et_pb_section_0 .et_pb_row {
  max-width: 1200px;
  margin: 0 auto;
}

/* Tietopankki headings */
.page-id-441 .et_pb_text h2,
.page-id-441 .et_pb_text h3 {
  color: var(--rensi-purple);
  font-family: var(--font-primary);
}

/* ===========================================
   OTA YHTEYTTÄ PAGE — MATCH SITE STYLE
   =========================================== */

/* Add top padding to compensate for missing hero */
.page-id-24048 .et_pb_section:first-child {
  padding-top: calc(var(--space-4xl) + 2rem) !important;
}

/* Style the form heading */
.page-id-24048 .et_pb_contact_form_container .et_pb_contact_main_title {
  color: var(--rensi-purple) !important;
  font-family: var(--font-primary) !important;
}

/* Blog/news article card heading — ensure font consistency */
.et_pb_blog_grid .et_pb_post h2 a {
  font-family: var(--font-secondary);
}

/* ===========================================
   CONSISTENT SECTION SPACING
   =========================================== */

/* Ensure ACF sections on product pages have same spacing as elsewhere */
.single-product .acf-alt-sections {
  margin-top: var(--space-2xl);
}

/* Ensure product description section doesn't feel cramped */
.single-product .et_pb_wc_description {
  margin-bottom: var(--space-lg);
}

/* ===========================================
   VISUAL UPGRADES
   =========================================== */

/* --- 1. STATS CIRCLES: solid purple fill instead of thin orange outline --- */
.rensi-stat-circle {
  background: linear-gradient(145deg, var(--rensi-purple), #3d0f58) !important;
  border: none !important;
  box-shadow: 0 8px 28px rgba(91, 32, 104, 0.32), 0 2px 6px rgba(0, 0, 0, 0.10) !important;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium) !important;
}
.rensi-stat-circle:hover {
  background: linear-gradient(145deg, #7a2d96, var(--rensi-purple)) !important;
  border: none !important;
  transform: translateY(-5px) scale(1.04) !important;
  box-shadow: 0 16px 40px rgba(91, 32, 104, 0.42), 0 4px 12px rgba(0, 0, 0, 0.14) !important;
}
.rensi-stat-circle {
  width: 220px !important;
  height: 220px !important;
}
.rensi-stat-number {
  color: var(--rensi-white) !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
}
.rensi-stat-label {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* --- 2. PRODUCT PAGE TABS: full-width underline bar, active = solid purple --- */
.single-product .et_pb_tabs .et_pb_tabs_controls {
  display: flex !important;
  width: 100% !important;
  background: #ffffff !important;
  border-bottom: 3px solid rgba(91, 32, 104, 0.15) !important;
  padding: 0 !important;
  gap: 0 !important;
}
/* All tabs get a faint underline sitting on the bar */
.single-product .et_pb_tabs .et_pb_tabs_controls li {
  border-bottom: 3px solid transparent !important;
  margin-bottom: -3px !important;
  background: transparent !important;
  border-radius: 0 !important;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.single-product .et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active {
  border-bottom: 3px solid var(--rensi-purple, #5b2068) !important;
  background: transparent !important;
}
body.single-product .et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active a,
body.single-product .et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active a:visited {
  color: var(--rensi-purple, #5b2068) !important;
  font-weight: 700 !important;
}
.single-product .et_pb_tabs .et_pb_tabs_controls li:not(.et_pb_tab_active) a {
  color: var(--rensi-text-muted, #999999) !important;
  font-weight: 500 !important;
}
.single-product .et_pb_tabs .et_pb_tabs_controls li:not(.et_pb_tab_active):hover {
  border-bottom-color: rgba(91, 32, 104, 0.4) !important;
  background: transparent !important;
}
.single-product .et_pb_tabs .et_pb_tabs_controls li:not(.et_pb_tab_active):hover a {
  color: var(--rensi-purple, #5b2068) !important;
}

/* --- 3. WOOCOMMERCE PRODUCT CARDS: hover lift + "Katso tuote" reveal --- */
/* Reserve space at the bottom of the card so the overlay slides into it,
   not over the title/OEM pill */
.woocommerce ul.products li.product {
  position: relative;
  overflow: hidden;
  padding-bottom: 44px;
}
.woocommerce ul.products li.product::after {
  content: 'Katso tuote \2192';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--rensi-purple), #4a1860);
  color: var(--rensi-white);
  text-align: center;
  padding: 11px 16px;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform var(--transition-medium);
  pointer-events: none;
}
.woocommerce ul.products li.product:hover::after {
  transform: translateY(0);
}
/* Image stays inside its own div, no extra overflow needed */
.woocommerce ul.products li.product .rensi-product-image {
  overflow: visible;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(91, 32, 104, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(var(--rensi-purple-rgb), 0.25) !important;
}
.woocommerce ul.products li.product img {
  transition: transform var(--transition-medium);
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.04);
}

/* --- 4. PRODCATBOX (frontpage category grid): lift + image zoom + orange accent --- */
.prodcatBox {
  overflow: hidden;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium) !important;
}
.prodcatBox:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 36px rgba(91, 32, 104, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(91, 32, 104, 0.3) !important;
}
.prodcatBox img {
  transition: transform var(--transition-medium);
  display: block;
  width: 100%;
}
.prodcatBox:hover img {
  transform: scale(1.06);
}
.prodcatBox a {
  transition: color var(--transition-fast) !important;
}
.prodcatBox:hover a {
  color: var(--rensi-orange, #f39200) !important;
}
.prodcatBox h4 {
  transition: color var(--transition-fast) !important;
}
.prodcatBox:hover h4 {
  color: var(--rensi-purple, #5b2068) !important;
}

/* ===========================================
   PERFORMANCE OPTIMIZATIONS
   =========================================== */

/* Fix: shimmer animation uses transform instead of background-position
   (background-position triggers layout/paint; transform is compositor-only) */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--rensi-gray-200);
  animation: none; /* disable the old paint-based shimmer */
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  animation: shimmer-slide 1.5s infinite;
}
@keyframes shimmer-slide {
  100% { transform: translateX(100%); }
}

/* Fix: replace transition:all on buttons with specific properties to reduce paint cost */
.et_pb_button,
.button,
button[type="submit"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
  transition: background-color var(--transition-medium),
              color var(--transition-medium),
              transform var(--transition-medium),
              box-shadow var(--transition-medium) !important;
}

/* Promote animated product cards and ACF images to their own compositor layer */
.woocommerce ul.products li.product,
.et_pb_blog_grid .et_pb_post,
.acf-alt-image {
  will-change: transform;
}

/* Reserve space for contact bar on mobile to prevent CLS when it loads */
@media (max-width: 980px) {
  html {
    scroll-padding-top: 32px;
  }
}

/* Fix: acf-alt-image opacity:0 start causes CLS for above-fold images.
   Only animate when explicitly entering viewport (class added by IntersectionObserver).
   Below-fold images get the animation via the existing CSS; above-fold skip it. */
.acf-alt-image.in-viewport {
  animation: fadeInUp 0.8s ease-out forwards;
}
.acf-alt-image {
  opacity: 1; /* default visible — avoids CLS for above-fold */
  animation: none;
}
/* Re-apply stagger only for below-fold rows */
.acf-alt-row:nth-of-type(n+2) .acf-alt-image {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}
.acf-alt-row:nth-of-type(2) .acf-alt-image { animation-delay: 0.1s; }
.acf-alt-row:nth-of-type(3) .acf-alt-image { animation-delay: 0.2s; }
.acf-alt-row:nth-of-type(4) .acf-alt-image { animation-delay: 0.3s; }

/* --- 5. PRODUCT GALLERY: transparent background --- */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image {
  background: transparent !important;
  background-color: transparent !important;
}
.single-product .woocommerce-product-gallery {
  min-height: 220px;
  border-radius: var(--card-radius);
  overflow: hidden;
}
.single-product .woocommerce-product-gallery img[naturalwidth="0"],
.single-product .woocommerce-product-gallery a:not([href*="uploads"]) {
  display: none !important;
}

/* --- 6. CATEGORY PAGE HERO: subtle bottom gradient edge for better blending --- */
.category-banner-section,
.rensi-category-hero {
  position: relative;
}
.category-banner-section::after,
.rensi-category-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

/* --- 7. SECTION HEADINGS: subtle left accent bar for visual anchoring --- */
.rensi-section-title,
.et_pb_heading_0 .et_pb_module_heading {
  position: relative;
  display: inline-block;
}

/* --- 8. PRODCAT image wrapper: clip overflow so image zoom stays inside card --- */
.prodcatBox .prodcat-image-wrap,
.prodcatBox figure,
.prodcatBox .wp-post-image {
  overflow: hidden;
  border-radius: var(--card-radius-sm, 8px);
}

/* ===========================================
   RESPONSIVE: SINGLE PRODUCT PAGE
   =========================================== */
@media (max-width: 980px) {
  .single-product .et_pb_tabs .et_pb_tabs_controls li a {
    padding: 0.7rem 1rem !important;
    font-size: 0.75rem !important;
  }
}

@media (max-width: 600px) {
  .single-product .et_pb_tabs .et_pb_tabs_controls {
    flex-direction: column;
  }

  .single-product .et_pb_tabs .et_pb_tabs_controls li a {
    text-align: center;
  }

  .single-product .et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active {
    border-radius: var(--card-radius-xs);
  }
}

/* ===========================================
   TUOTTEET PAGE - hide empty Divi section
   =========================================== */
.page-id-81 .et_pb_section_2 {
  display: none !important;
}

/* ===========================================
   SKELETON LOADER
   =========================================== */
@keyframes rensi-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.rensi-skel {
  position: relative;
  overflow: hidden;
}

.rensi-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #f0eef5 0%,
    #f0eef5 25%,
    #e2dded 50%,
    #f0eef5 75%,
    #f0eef5 100%
  );
  background-size: 600px 100%;
  animation: rensi-shimmer 1.5s ease-in-out infinite;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.rensi-skel--done::after {
  opacity: 0;
  animation: none;
  pointer-events: none;
}

/* ===========================================
   FOOTER: white text on all template variants
   =========================================== */
footer.et-l--footer p,
footer.et-l--footer h1,
footer.et-l--footer h2,
footer.et-l--footer h3,
footer.et-l--footer h4,
footer.et-l--footer li,
footer.et-l--footer span,
footer.et-l--footer div,
footer.et-l--footer a,
.et_pb_section_0_tb_footer p,
.et_pb_section_0_tb_footer li,
.et_pb_section_0_tb_footer span:not(.et_pb_social_network_link) {
  color: var(--rensi-white, #ffffff) !important;
}
/* Footer link hover — orange accent */
footer.et-l--footer a:hover,
.et_pb_section_0_tb_footer a:hover {
  color: var(--rensi-orange, #f39200) !important;
  transition: color var(--transition-fast, 0.14s ease-out) !important;
}
/* Keep social icon buttons their own colour */
footer.et-l--footer .et_pb_social_media_follow_network a,
footer.et-l--footer .icon.et_pb_with_border {
  color: var(--rensi-purple, #5b2068) !important;
}

/* ===========================================
   MENU CHEVRONS: match link colour
   =========================================== */
/* Home — at top of page (white header) */
.home:not(.header-scrolled) #top-menu > li.menu-item-has-children > a::after,
.home:not(.header-scrolled) #top-menu > li.menu-item-has-children > a::before {
  color: var(--rensi-white, #ffffff) !important;
}
/* Home — after scroll (dark text on white bg) */
.home.header-scrolled #top-menu > li.menu-item-has-children > a::after,
.home.header-scrolled #top-menu > li.menu-item-has-children > a::before,
.home.header-scrolled #top-menu > li.menu-item-has-children > a .et-menu-nav-icons {
  color: var(--rensi-text, #444444) !important;
}
/* All other pages (always dark header) */
body:not(.home) #top-menu > li.menu-item-has-children > a::after,
body:not(.home) #top-menu > li.menu-item-has-children > a::before,
body:not(.home) #top-menu > li.menu-item-has-children > a .et-menu-nav-icons {
  color: var(--rensi-text, #444444) !important;
}

/* ===========================================
   HOMEPAGE VIDEO HERO: prevent growth beyond viewport
   Divi sets height via JS on the slider; when that JS
   fires late (WP Rocket delay) the video's natural
   resolution drives the container height — can be 1080px+.
   This hard cap stops it regardless of JS timing.
   =========================================== */
@media (min-width: 981px) {
  body.home .et_pb_section:first-child,
  body.home .et_pb_fullwidth_section:first-child,
  body.home .et_pb_slider,
  body.home .et_pb_slides,
  body.home .homepage-slide {
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  body.home video,
  body.home .et_pb_slide video,
  body.home .et_pb_slider video,
  body.home .et_pb_video_wrap,
  body.home .mejs-container {
    max-height: 100vh !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}

/* ============================================================
   MOBILE FIXES  ≤980px
   ============================================================ */
@media (max-width: 980px) {

  /* ---- Hide Divi's built-in search icon --------------------- */
  #et_top_search,
  #et_search_icon { display: none !important; }

  /* ---- Hide our header buttons while mega menu is open ------ */
  body.rensi-mnav-open #rensi-header-btns { display: none !important; }

  /* ====================================================
     PRODUCT TABLES — JS adds .rensi-tbl--spec (2-col)
     or .rensi-tbl--compare + wrapper (3+ col).
     CSS here targets those classes only.
     ==================================================== */

  /* ---- Spec table: 2-column stacked-card layout ---- */
  .rensi-tbl--spec {
    display: block !important;
    overflow-x: visible !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }

  .rensi-tbl--spec thead,
  .rensi-tbl--spec tbody,
  .rensi-tbl--spec tfoot {
    display: block !important;
    width: 100% !important;
  }

  /* Hide redundant generic header rows ("Ominaisuus | Arvo") */
  .rensi-tbl--spec .rensi-tbl__header-row {
    display: none !important;
  }

  /* Each data row = a card */
  .rensi-tbl--spec tr {
    display: block !important;
    margin-bottom: 7px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 6px rgba(91,32,104,0.09) !important;
    border: 1px solid rgba(91,32,104,0.10) !important;
    background: #fff !important;
  }

  /* All cells: full-width block */
  .rensi-tbl--spec td,
  .rensi-tbl--spec th {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    border: none !important;
    min-width: unset !important;
    position: static !important;
    z-index: auto !important;
  }

  /* TOP — label strip (first cell, not a colspan) */
  .rensi-tbl--spec td:first-child:not([colspan]),
  .rensi-tbl--spec th:first-child:not([colspan]) {
    background: var(--rensi-purple, #5b2068) !important;
    color: #fff !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    padding: 6px 12px !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  /* BOTTOM — value (every non-first, non-colspan cell) */
  .rensi-tbl--spec td:not(:first-child):not([colspan]),
  .rensi-tbl--spec th:not(:first-child):not([colspan]) {
    background: #fff !important;
    color: var(--rensi-text, #1a0a22) !important;
    font-size: 0.93rem !important;
    font-weight: 400 !important;
    padding: 10px 12px !important;
  }

  /* Section-header rows (row contains a colspan cell) */
  .rensi-tbl--spec tr:has(td[colspan]),
  .rensi-tbl--spec tr:has(th[colspan]) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 14px !important;
    margin-bottom: 4px !important;
  }

  .rensi-tbl--spec td[colspan],
  .rensi-tbl--spec th[colspan] {
    background: #160820 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 0.7rem !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    min-width: unset !important;
  }

  /* Kill alternating tints and hover (not relevant for cards) */
  .rensi-tbl--spec tr:nth-child(even),
  .rensi-tbl--spec tr:nth-child(even) td,
  .rensi-tbl--spec tr:nth-child(even) td:first-child,
  .rensi-tbl--spec tr:hover,
  .rensi-tbl--spec tr:hover td {
    background: unset !important;
  }

  /* ---- Comparison table: horizontal scroll wrap ---- */

  /* The outer <div> wrapper added by JS */
  .rensi-tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 14px !important;
    border: 1px solid rgba(91,32,104,0.12) !important;
    box-shadow: 0 1px 6px rgba(91,32,104,0.08) !important;
    margin-bottom: 1rem !important;
    background: #fff !important;
  }

  /* The table itself: force real table rendering and no overflow clipping.
     border-collapse:collapse breaks position:sticky in all browsers —
     alternating rows paint over the sticky cell. Use separate + spacing:0. */
  .rensi-tbl--compare {
    display: table !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: max-content !important;
    min-width: 100% !important;
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Normal table-cell rendering restored */
  .rensi-tbl--compare thead,
  .rensi-tbl--compare tbody,
  .rensi-tbl--compare tfoot {
    display: table-header-group !important;
  }
  .rensi-tbl--compare tbody { display: table-row-group !important; }

  .rensi-tbl--compare tr {
    display: table-row !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
  }

  .rensi-tbl--compare td,
  .rensi-tbl--compare th {
    display: table-cell !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 9px 14px !important;
    font-size: 0.85rem !important;
    /* Explicit borders needed because border-collapse:separate removes shared borders */
    border-bottom: 1px solid rgba(91,32,104,0.07) !important;
    border-right: 1px solid rgba(91,32,104,0.07) !important;
    min-width: unset !important;
    position: static !important;
  }

  .rensi-tbl--compare td:last-child,
  .rensi-tbl--compare th:last-child {
    border-right: none !important;
  }

  /* First row = model-name header */
  .rensi-tbl--compare tr:first-child td,
  .rensi-tbl--compare tr:first-child th {
    background: var(--rensi-purple, #5b2068) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    border-bottom: none !important;
    padding: 10px 14px !important;
  }

  /* Sticky first column — spec label stays visible while scrolling.
     Background MUST be solid — any transparency lets scrolling cells show through. */
  .rensi-tbl--compare td:first-child,
  .rensi-tbl--compare th:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    background: #f5f3f8 !important;   /* solid — no see-through on scroll */
    color: var(--rensi-text, #1a0a22) !important;
    font-weight: 600 !important;
    border-right: 2px solid rgba(91,32,104,0.15) !important;
    min-width: 100px !important;
    max-width: 150px !important;
    white-space: normal !important;
  }

  /* Corner cell */
  .rensi-tbl--compare tr:first-child td:first-child,
  .rensi-tbl--compare tr:first-child th:first-child {
    background: var(--rensi-purple, #5b2068) !important;
    color: #fff !important;
    z-index: 3 !important;
    white-space: normal !important;
  }

  /* Alternating rows */
  .rensi-tbl--compare tr:nth-child(even) td { background: #f9f7fb !important; }
  .rensi-tbl--compare tr:nth-child(even) td:first-child { background: #ede8f2 !important; }

  /* colspan cells (shared-value rows spanning all model columns) */
  .rensi-tbl--compare td[colspan],
  .rensi-tbl--compare th[colspan] {
    background: rgba(91,32,104,0.05) !important;
    color: var(--rensi-text, #1a0a22) !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    white-space: normal !important;
    min-width: unset !important;
  }

  .et_pb_tab_content { position: relative; }
}