/* ROMEX - custom overrides (loaded after the theme CSS) */

/* --- rules that were inline <style> blocks in the static HTML --- */
footer p, footer li, footer li a, footer a { color: #8d90b8 !important; }
footer a:hover { color: #fff !important; }
@media (max-width: 575px) {
  .header-button .btn { font-size: 12px !important; padding: 8px 12px !important; white-space: nowrap; }
  .header-icon { margin-left: 5px; }
  .navbar-brand img { max-width: 150px; }
}
/* home slider: height follows the picture's own ratio, so nothing is cropped */
.hero-swiper { height: auto; width: 100%; }
.hero-swiper .swiper-wrapper, .hero-swiper .swiper-slide { height: 100%; }
.hero-swiper .swiper-slide .cover-background { background-size: cover; background-position: center; }

/* page content starts below the fixed top bar + navigation (the <main> wrapper breaks the theme's sibling selector) */
main > .top-space-margin:first-child { margin-top: 136px; }
@media (max-width: 991px) { main > .top-space-margin:first-child { margin-top: 116px; } }
@media (max-width: 767px) { main > .top-space-margin:first-child { margin-top: 76px; } }

/* --- semantic headings: same look as the original design ---
   The big page title is now the <h1>; the small label above it is a <div>. */
.h6 { font-size: 1.75rem; line-height: 1.95rem; }
.page-title-extra-small .pt-label { font-size: 17px; line-height: 20px; }
.page-title-extra-small h1 { font-size: 3.8rem; line-height: 3.8rem; }
@media (max-width: 767px) {
  .page-title-extra-small h1 { font-size: 36px; line-height: 44px; }
}
/* headings that use a size class but a different tag for SEO structure */
h1.h3 { font-size: 2.813rem; line-height: 3.125rem; }
h2.h3 { font-size: 2.813rem; line-height: 3.125rem; }
.h4 { font-size: 2.375rem; line-height: 2.7rem; }
.cta-title { font-size: 4.375rem; line-height: 4.375rem; }
@media (max-width: 1199px) { .cta-title { font-size: 3.2rem; line-height: 3.4rem; } }
@media (max-width: 767px)  { .cta-title { font-size: 2.2rem; line-height: 2.6rem; } }


/* --- brand social icons (TikTok etc. had no colour in the theme) --- */
.social-icon-style-04 ul li a.tiktok span { background-color: #111; }
.social-icon-style-04 ul li a.snapchat span { background-color: #f7c600; }

/* --- accessibility helpers --- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: #fff; color: #000; padding: 10px 16px; }
.skip-link:focus { left: 10px; top: 10px; }

/* --- rich text coming from the backoffice editor --- */
.cms-text p { margin-bottom: 40px; }
@media (max-width: 575px) { .cms-text p { margin-bottom: 30px; } }
.cms-text ul, .cms-text ol { margin: 0 0 30px 20px; padding-left: 10px; }
.cms-text ul { list-style: disc; }
.cms-text ol { list-style: decimal; }

/* --- contact form --- */
.contact-form .form-control { border: 1px solid #dfdfdf; background: #fff; padding: 14px 18px; border-radius: 4px; font-size: 16px; }
.contact-form .form-control:focus { border-color: #1c2172; box-shadow: none; }
.contact-form label { font-size: 15px; font-weight: 600; color: #232323; margin-bottom: 6px; }
.contact-form .hp-field { position: absolute; left: -9999px; height: 0; width: 0; overflow: hidden; }
.form-alert { padding: 14px 18px; border-radius: 4px; margin-bottom: 20px; font-size: 16px; }
.form-alert.ok { background: #e8f6ec; color: #17612e; }
.form-alert.err { background: #fdecec; color: #8a1f1f; }

/* --- 404 --- */
.error-404 .big-404 { font-size: 160px; line-height: 1; font-weight: 700; color: #1c2172; letter-spacing: -6px; }
@media (max-width: 575px) { .error-404 .big-404 { font-size: 100px; } }

.empty-state { padding: 60px 0; text-align: center; color: #777; }

/* brand sidebar: show the current brand as selected */
.shop-sidebar .shop-filter li a[aria-current="page"] { color: var(--dark-gray); font-weight: 600; }
.shop-sidebar .shop-filter li a[aria-current="page"] .product-cb { border-color: var(--dark-gray); }
.shop-sidebar .shop-filter li a[aria-current="page"] .product-cb:after { opacity: 1; }

/* products without an image: grey box */
.product-placeholder { aspect-ratio: 1 / 1; width: 100%; background: #f1f1f1; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #c3c3c3; font-size: 56px; }

/* product lightbox: image on a grey box */
.product-lightbox .mfp-img { background: #f1f1f1; padding: 24px; box-sizing: border-box; border-radius: 6px; }
.product-lightbox .mfp-figure:after { background: #f1f1f1; box-shadow: none; }
.product-lightbox .mfp-title { color: #fff; text-align: center; padding-right: 0; }
.shop-image a.product-zoom { display: block; cursor: zoom-in; }

/* --- Why Romex: expanding photo panels (hover / tap to open) --- */
.why-panels { display: flex; gap: 10px; height: 600px; }
.why-panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 6px; background: #1c2172; cursor: pointer; outline: none; transition: flex-grow .6s cubic-bezier(.25,.8,.25,1); }
.why-panel.is-active { flex-grow: 7; cursor: default; }
.why-panel:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1c2172; }
.why-panel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1s ease; }
.why-panel.is-active .why-panel-img { transform: scale(1); }
.why-panel::before, .why-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; transition: opacity .6s ease; pointer-events: none; }
.why-panel::before { background: rgba(28, 33, 114, .72); }
.why-panel::after { background: linear-gradient(180deg, rgba(20, 22, 60, 0) 35%, rgba(20, 22, 60, .9) 100%); opacity: 0; }
.why-panel:not(.is-active):hover::before { opacity: .85; }
.why-panel.is-active::before { opacity: 0; }
.why-panel.is-active::after { opacity: 1; }
.why-panel-num { position: absolute; right: 18px; bottom: 6px; z-index: 2; font-size: 90px; font-weight: 700; line-height: 1; letter-spacing: -3px; white-space: nowrap; color: rgba(255,255,255,.95); transition: opacity .4s ease, color .4s ease; }
.why-panel:not(.is-active) .why-panel-num { left: 0; right: 0; text-align: center; font-size: clamp(20px, 2.2vw, 32px); letter-spacing: 0; bottom: 24px; }
.why-panel.is-active .why-panel-num { color: rgba(255,255,255,.25); }
.why-panel-label { position: absolute; left: 50%; top: 30px; z-index: 2; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); white-space: nowrap; max-height: calc(100% - 110px); overflow: hidden; text-overflow: ellipsis; color: #fff; font-size: 20px; font-weight: 600; transition: opacity .3s ease; }
.why-panel.is-active .why-panel-label { opacity: 0; }
.why-panel-content { position: absolute; left: 0; bottom: 0; z-index: 2; width: 480px; padding: 0 40px 40px; color: #fff; opacity: 0; transform: translateY(20px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.why-panel.is-active .why-panel-content { opacity: 1; transform: none; transition-delay: .35s; pointer-events: auto; }
.why-panel-title { color: #fff; font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -1px; margin-bottom: 12px; padding-right: 90px; }
.why-panel-content p { color: rgba(255,255,255,.88); font-size: 17px; line-height: 28px; margin: 0; }
@media (max-width: 1199px) {
  .why-panels { height: 520px; gap: 8px; }
  .why-panel-content { width: 380px; padding: 0 28px 30px; }
  .why-panel-title { font-size: 26px; line-height: 32px; padding-right: 60px; }
  .why-panel-num { font-size: 70px; }
  .why-panel-label { font-size: 17px; }
}
/* tablets and phones: panels stack and open downward */
@media (max-width: 991px) {
  .why-panels { flex-direction: column; height: auto; gap: 8px; }
  .why-panel { flex: none; height: 76px; transition: height .5s cubic-bezier(.25,.8,.25,1); }
  .why-panel.is-active { height: 420px; }
  .why-panel-label { writing-mode: horizontal-tb; transform: translateY(-50%); top: 50%; left: 70px; right: 20px; max-height: none; font-size: 17px; }
  .why-panel:not(.is-active) .why-panel-num { left: 22px; right: auto; text-align: left; transform: translateY(-50%); top: 50%; bottom: auto; font-size: 26px; }
  .why-panel-num { font-size: 64px; right: 14px; }
  .why-panel-content { width: 100%; padding: 0 22px 24px; }
  .why-panel-title { font-size: 24px; line-height: 30px; padding-right: 50px; }
  .why-panel-content p { font-size: 16px; line-height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .why-panel, .why-panel-img, .why-panel-content, .why-panel::before, .why-panel::after { transition: none; }
}

/* brand page product grid (plain CSS grid: no waiting for every image, lazy loading works with 100+ products) */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; margin: 0 0 40px; padding: 0; }
@media (min-width: 992px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; } }
@media (min-width: 1400px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.product-grid .product-item[hidden] { display: none; }
.product-grid .shop-image { background: #f6f6f6; overflow: hidden; border-radius: 4px; }
.product-grid .shop-image img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.product-grid .shop-image a:hover img { transform: scale(1.05); }
.product-filter { position: relative; max-width: 460px; }
.product-filter .form-control { border: 1px solid #dfdfdf; padding: 12px 18px; border-radius: 30px; font-size: 16px; }
.product-filter .product-count { display: block; margin-top: 8px; padding-left: 18px; font-size: 14px; color: #777; }

/* product images: thin light-grey frame (home + brand pages) */
.shop-image { border: 0.5px solid #dfdfdf; }

/* home product grid (Isotope masonry): reserve two title lines so every card has the same height and rows stay aligned */
.shop-modern .shop-footer a { display: block; line-height: 1.5; min-height: 5em; }