/* =============================================================================
   SECTIONS.CSS — eurowallet.fr
   The site's own sections, re-implemented on the new boilerplate.
   Tokens live in style.css :root — never hardcode a colour that has one.
   Values are carried over from the legacy front so the design does not move.

   PROVENANCE: taken from eurowallet.eu's 2026-08-03 rebuild rather than written
   from scratch. That is deliberate and is not the usual "never borrow another
   project's sections.css" case: .fr and .eu are the SAME shop and the same
   design for a different market (same company, same theme, same photography,
   same #df4116). Re-deriving these components would only risk the two drifting.
   Differences from .eu live here, not in a fork of the file.
   ============================================================================= */


/* =============================================================================
   BUTTONS — the site's shape on top of the boilerplate .btn-* contract
   (legacy .theme-btn-six: 20px type, 55px line, 5px radius, red fill + ripple)
   ============================================================================= */
.btn-one,
.btn-two {
  font-size: var(--fs-lg);
  padding-inline: 2rem;
  padding-block: 0;
  line-height: 3.4375rem;   /* 55px */
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

/* the legacy ripple, kept because it is part of how the buttons read */
.btn-one::before {
  content: '';
  position: absolute;
  inline-size: 100px;
  block-size: 100px;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  margin: -50px 0 0 -50px;
  transform: scale(0);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.btn-one:hover::before {
  transform: scale(1);
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn-one::before { display: none; }
}


/* =============================================================================
   SECTION TITLE — legacy .title-style-two: light weight, the accent word bold
   ============================================================================= */
.section-title {
  font-weight: 300;
  font-size: clamp(2.375rem, 1.6rem + 2.6vw, 4.25rem);   /* 38 → 68px */
  line-height: 1.05;
  margin-bottom: var(--space-md);
}
.section-title strong,
.section-title .accent {
  color: var(--color-accent);
  font-weight: 800;
  display: inline-block;
}


/* =============================================================================
   HOME — video hero (legacy .video-header + .hero-banner-five heading)
   ============================================================================= */
.hero-video {
  position: relative;
  background-color: #000;
  block-size: 100vh;
  min-block-size: 25rem;
  inline-size: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
}
.hero-video video {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  min-inline-size: 100%;
  min-block-size: 100%;
  max-inline-size: fit-content;
  inline-size: auto;
  block-size: auto;
  z-index: 0;
  transform: translateX(-50%) translateY(-50%);
}
.hero-video .hero-overlay {
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: 0.4;
  z-index: 1;
}
.hero-video .container { position: relative; z-index: 2; }
.hero-video .hero-body { max-inline-size: 40rem; }

.hero-title {
  color: #fff;
  line-height: 1.1;
  font-size: clamp(2.25rem, 1.4rem + 2.9vw, 4.375rem);   /* 36 → 70px */
  font-weight: 300;
  margin-bottom: var(--space-sm);
}
.hero-title strong { font-weight: 800; display: block; }

.hero-lead {
  color: #fff;
  font-size: var(--fs-lg);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* The secondary button sits on the video, not on white: the default .btn-two
   (black type, grey hairline) reads as a hole in the footage. Inverse it. */
.hero-video .btn-two {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
}
.hero-video .btn-two:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

/* devices that cannot play the background video keep a still instead */
@media (pointer: coarse) and (hover: none) {
  .hero-video video { display: none; }
  .hero-video {
    background-image: url('/assets/images/ewbg.jpg');
    background-position: center center;
    background-size: cover;
  }
}


/* =============================================================================
   FEATURE BAND — full-width image band with one text column
   (legacy .hero-banner-five with a background image)
   ============================================================================= */
.feature-band {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 8vw, 9.375rem);   /* → 150px */
  margin-bottom: clamp(3rem, 6vw, 6.25rem);
  background-size: cover;
  background-position: center center;
}
.feature-band .band-body { max-inline-size: 34rem; }
.feature-band p { font-size: var(--fs-lg); line-height: 1.5; }

.trademark-note {
  position: relative;
  padding: 0.625rem 0.625rem 0.625rem 3.75rem;
  background: #e6e6e6;
  border-radius: 5px;
  display: inline-block;
  margin-block-start: var(--space-md);
}
.trademark-note i {
  position: absolute;
  inset-inline-start: 0.625rem;
  inset-block-start: 0.875rem;
  font-size: 2.5rem;
}
.trademark-note h3 { margin-bottom: 2px; font-size: var(--fs-lg); }
.trademark-note p  { margin: 0; font-size: var(--fs-sm); }


/* =============================================================================
   TEXT + MEDIA — two columns, image on the right (legacy .front-text-block-one)
   ============================================================================= */
.text-media {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 7vw, 9.375rem) clamp(3rem, 5vw, 6.25rem);
}
.text-media .row { align-items: center; }
.text-media .text-wrapper { padding-block-start: var(--space-lg); }
.text-media ul {
  padding-inline-start: 1.25rem;
  margin-block-start: var(--space-sm);
}
.text-media ul li { margin-block-end: var(--space-xs); }
.text-media img { border-radius: var(--radius-md); }


/* =============================================================================
   FAQ BAND — light grey band with the accordion (legacy .front-text-block-five)
   ============================================================================= */
.faq-band {
  background: var(--color-bg-alt);
  padding-block: clamp(3.5rem, 8vw, 9.375rem);
}
.faq-band .lead { font-size: var(--fs-lg); margin-bottom: var(--space-md); }

.accordion-one .accordion-item {
  border: none;
  border-radius: 0;
  background: transparent;
}
.accordion-one .accordion-item i {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: 8px;
  border-radius: 50%;
  margin-inline-end: 10px;
}
.accordion-one .accordion-button {
  font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.625rem);
  font-weight: var(--fw-semibold);
  padding: var(--space-md) 0;
  box-shadow: none;
  border-radius: 0;
  color: var(--color-heading);
  background: transparent;
  transition: all 0.3s ease-in-out;
}
.accordion-one .accordion-button:not(.collapsed) { padding-bottom: 15px; }
.accordion-one .accordion-body { padding: 0 1.5625rem 1px 0; }
.accordion-one .accordion-body p { font-size: var(--fs-lg); line-height: 1.8; }
.accordion-one .accordion-button::after {
  content: '+';
  font-size: 1.75rem;
  background-image: none;
  inline-size: auto;
  block-size: auto;
}
.accordion-one .accordion-button:not(.collapsed)::after { content: '-'; }


/* =============================================================================
   PAGE HEADER — the subheader hero used by page-header.tpl
   (legacy .hero-wrap.hero-one / .bg-image)
   ============================================================================= */
.subheader {
  position: relative;
  z-index: 1;
  background-color: #F9F2EC;
  background-size: cover;
  background-position: center center;
  padding-block: clamp(7rem, 12vw, 8.75rem) clamp(3rem, 6vw, 6.25rem);
}
.subheader h1 {
  font-weight: normal;
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 4.5rem);   /* → 72px */
  line-height: 1.16;
  margin-bottom: 0;
}
.subheader .lead { margin-block-start: var(--space-xs); font-size: var(--fs-lg); }

/* with a header image: dark scrim + white type, exactly as before */
.subheader.has-image { color: #fff; }
.subheader.has-image::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #000;
  content: '';
  opacity: 0.36;
}
.subheader.has-image h1,
.subheader.has-image .lead,
.subheader.has-image .lead p,
.subheader.has-image .breadcrumb-item,
.subheader.has-image .breadcrumb-item a,
.subheader.has-image .breadcrumb-item.active { color: #fff; }

/* the intro sits on the header image now, so it needs a measure of its own —
   72rem of image width is not a line length anyone reads */
.subheader .lead { max-inline-size: 48rem; }
.subheader .lead p:last-child { margin-bottom: 0; }


/* =============================================================================
   SHOP LISTING — two products, so the grid centres instead of packing left
   (auto-FIT, not auto-fill: empty tracks have to collapse for the centring to
   bite; the cards then cap at 20rem instead of stretching across the page)
   ============================================================================= */
/* the header offset used to come from .page-title.page-top; the subheader
   carries it now, so the listing only needs breathing room under it */
.shop-list { padding-block-start: clamp(2.5rem, 5vw, 5rem); }
.shop-list .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 20rem));
  justify-content: center;
  gap: var(--space-lg);
}
.shop-list .shop-filters { justify-content: center; }


/* =============================================================================
   PRODUCT PAGE — the description reads in the right column, under the buy box
   ============================================================================= */

/* Thumb strip: the shared style is fixed 72px cells, so this site's 8 shots
   (main + 7 photos) needed 632px in a ~616px column — the last one dropped to
   a row of its own and left a hole at the end of the first. Equal shares on
   one line instead, so the strip spans the gallery column exactly whatever the
   photo count is. */
.product-thumbs { flex-wrap: nowrap; }
.product-thumbs li { flex: 1 1 0; min-width: 0; }
.product-thumbs a { width: auto; height: auto; aspect-ratio: 1; }

/* on a phone the column is narrow enough that equal shares would shrink the
   thumbs past reading size — wrap them onto a fixed five-up grid there */
@media (max-width: 575.98px) {
  .product-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .product-thumbs li { flex: none; }
}

.product-desc {
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-border);
}
/* .rte-content h3 hangs its accent rule 20px into the left margin — fine in a
   full-width article, but here it would poke out of the column */
.product-desc h3 {
  font-size: var(--fs-h4);
  margin-inline-start: 0;
  padding-inline-start: 0.75rem;
}
.product-desc h2 { font-size: var(--fs-h3); }


/* =============================================================================
   ATTACHMENT GALLERIES — the photo case (Galerija)
   The shared grid packs 7 to a row at a 160px minimum, which reads as a
   contact sheet. Fewer, larger cells with real air between them.
   ============================================================================= */
.page-attachments .content-gallery {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-lg);
}
@media (max-width: 575.98px) {
  .page-attachments .content-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

/* LOGO WALL (page-logos.tpl → Reference) — logos are marks, not pictures:
   small, evenly sized, and set in a narrow column so the wall reads as one
   block instead of running the full width of the page. */
.logo-wall .content-gallery {
  max-inline-size: 50rem;   /* 800px */
  margin-inline: auto;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--space-md);
}
@media (max-width: 575.98px) {
  .logo-wall .content-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
  }
}


/* =============================================================================
   PAGE BODY — the site reads in a narrow measure
   ============================================================================= */
.page-default-wrap { padding-block-start: clamp(2rem, 5vw, 7.5rem); }
.page-default-wrap .page-body,
.page-header-wrap .page-body {
  max-inline-size: 46rem;
  margin-inline: auto;
}
.page-header-wrap { padding-block-start: clamp(2.5rem, 5vw, 5rem); }

/* editor content — the site's own heading/link treatment */
.rte-content h2 { font-size: 2rem; }
.rte-content h3 {
  font-size: 1.5rem;
  border-inline-start: 2px solid var(--color-accent);
  padding-inline-start: 1.25rem;
  margin-inline-start: -1.25rem;
}
.rte-content p a { color: var(--color-accent); }
.rte-content p a:hover { color: var(--color-heading); }


/* =============================================================================
   HEADER — logo sizing and the language switcher's own look
   ============================================================================= */
/* The header bar rode its own 1440px band with clamp() padding, which put the
   logo and the cart further out than anything else on the page and left them
   hugging the viewport edge on wide screens. Track Bootstrap's .container
   instead: same widths, same 12px gutter, so the logo lines up with the hero
   copy and the page body and the bar is inset by the container's own margin. */
.main-menu .inner-content {
  max-width: 100%;
  padding-inline: 12px;
}
@media (min-width: 576px)  { .main-menu .inner-content { max-width: 540px; } }
@media (min-width: 768px)  { .main-menu .inner-content { max-width: 720px; } }
@media (min-width: 992px)  { .main-menu .inner-content { max-width: 960px; } }
@media (min-width: 1200px) { .main-menu .inner-content { max-width: 1140px; } }
@media (min-width: 1400px) { .main-menu .inner-content { max-width: 1320px; } }

.main-menu .logo img { inline-size: 50px; block-size: auto; transition: all 0.4s ease-out; }
.main-menu.fixed .logo img { inline-size: 40px; }

.main-menu .navbar-nav .nav-link {
  text-transform: uppercase;
  font-size: var(--fs-lg);
  font-weight: 800;
  padding-block: 0.625rem;
}

/* 18px/800 uppercase needs more air than the 12px default margin gives it —
   but only where there is room to give. The five items plus the widget cluster
   just barely fit the row at the 992px breakpoint, and .navbar-nav is
   nowrap/nowrap, so a menu that outgrows its zone overflows rather than wraps.
   Below 1200px the spacing therefore stays exactly as it was. */
@media (min-width: 1200px) {
  .main-menu .navbar-nav .nav-link { margin-inline: clamp(0.875rem, 1.4vw, 1.375rem); }
  .main-menu .navbar { padding-inline: var(--space-md); }   /* air around the menu too */
}

.main-menu .mobile-content .address-block { margin-block-start: 2.5rem; }
.main-menu .mobile-content .address-block a { color: inherit; }


/* =============================================================================
   FOOTER — the site's own minimal footer (big phone + e-mail, legal row)
   ============================================================================= */
.site-footer {
  padding-block: clamp(3rem, 6vw, 6.25rem) var(--space-lg);
}
.site-footer .footer-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
  text-align: center;
}
.site-footer .footer-contacts .label {
  display: block;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--color-accent);
}
.site-footer .footer-contacts a {
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);   /* → 40px */
  font-weight: 200;
  color: var(--color-heading);
  text-decoration: none;
}
.site-footer .footer-contacts a:hover { color: var(--color-accent); }

.site-footer .footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border-block-start: 1px solid var(--color-border);
  padding-block-start: var(--space-md);
}
.site-footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer .footer-nav a { color: var(--color-text); text-decoration: none; }
.site-footer .footer-nav a:hover { color: var(--color-accent); }
.site-footer .copyright { margin: 0; font-size: var(--fs-sm); }


/* =============================================================================
   CHECKOUT — Turnstile slot
   The widget runs in `interaction-only` mode, so on a normal order Cloudflare
   injects nothing and this slot must take up no room at all. When a challenge
   IS required the injected iframe gives the slot height and the margin below
   applies, so it never sits flush against the submit button.
   ============================================================================= */
.verify-slot { margin: 0; }
.verify-slot:has(iframe) { margin-block: var(--space-md); }
.shop-turnstile:empty { display: none; }


/* =============================================================================
   CONTACT
   ============================================================================= */
#map { block-size: 600px; }


/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 991.98px) {
  .main-menu .navbar-nav .nav-link {
    margin: 0;
    padding: 10px 0;
    font-size: var(--fs-base);
    color: var(--color-heading);
  }
  .text-media .text-wrapper { padding-block-start: 0; }
  .site-footer .footer-legal { justify-content: center; text-align: center; }
}

@media (max-width: 767.98px) {
  #map { block-size: 320px; }
}