/* ==========================================================================
   BUMBAT PRODUCTION AB — Components
   ========================================================================== */

/* ---- Wave divider (signature motif) — static jagged red seam between sections ---- */
.wave-divider{ width: 100%; height: 34px; overflow: hidden; line-height: 0; position: relative; z-index: 3; }
.wave-divider svg{ width: 100%; height: 100%; display: block; }
.wave-divider.on-dark{ background: var(--black); }
.wave-divider.on-light{ background: var(--white); }

/* ---- Equalizer bars — signature animated moment (hero) ---- */
.eq{ display: flex; align-items: center; gap: 4px; height: 46px; }
.eq span{
  width: 4px; background: var(--red); display: block; transform-origin: center;
  animation: eqBar 1.15s ease-in-out infinite;
}

/* ==========================================================================
   HOME HERO
   ========================================================================== */
.hero-home{
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  background: var(--black); color: var(--white);
  overflow: hidden;
  padding-top: 6rem;
}
.hero-bg{
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 78% 15%, rgba(255,22,22,.28), transparent 62%),
    radial-gradient(ellipse 50% 50% at 10% 85%, rgba(255,22,22,.14), transparent 60%),
    linear-gradient(160deg, #140505 0%, #0A0A0A 45%, #060606 100%);
}
.hero-waveform{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between;
  height: 42%; padding-inline: 0; opacity: .55; mix-blend-mode: screen;
}
.hero-waveform span{
  flex: 1; margin-inline: 1px; background: linear-gradient(to top, var(--red), rgba(255,22,22,0));
  animation: eqBar 2.6s ease-in-out infinite;
}
.hero-scrim{ position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.35); }
.hero-inner{ position: relative; z-index: 2; width: 100%; padding-block: 4rem 6rem; }
.hero-title{
  font-size: var(--fs-hero);
  letter-spacing: -0.015em;
}
.hero-title span{ display: block; }
.hero-title .accent{ color: var(--red); }
.hero-sub{
  margin-top: 1.75rem; font-family: var(--f-sub); font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--silver); letter-spacing: .02em;
}
.hero-sub .divider-dot{ margin-inline: .5em; opacity: .5; }
.hero-location{ margin-top: .35rem; display:block; }
.hero-ctas{ margin-top: 2.75rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.scroll-indicator{
  position: absolute; left: 50%; bottom: 2.25rem; transform: translateX(-50%); z-index: 2;
  color: var(--white); opacity: .7; animation: bounce 2.2s ease-in-out infinite;
}

/* ==========================================================================
   SERVICES GRID
   ========================================================================== */
.service-card{
  background: var(--white); border: 1px solid var(--line-on-light);
  padding: 2.25rem 2rem; display: flex; flex-direction: column; height: 100%;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.service-card__icon{
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  color: var(--red); font-size: 1.6rem; margin-bottom: 1.5rem;
  border: 1.5px solid var(--red); transition: all .3s var(--ease);
}
.service-card__title{ font-family: var(--f-sub); font-size: 1.15rem; font-weight: 600; text-transform: uppercase; letter-spacing: .01em; margin-bottom: .75rem; }
.service-card__desc{ font-size: .92rem; line-height: 1.6; opacity: .72; flex-grow: 1; }
.service-card .text-link{ margin-top: 1.5rem; border-color: currentColor; }
.service-card:hover{ background: var(--red); border-color: var(--red); color: var(--white); transform: translateY(-6px); }
.service-card:hover .service-card__icon{ background: var(--white); color: var(--red); border-color: var(--white); }
.service-card:hover .service-card__desc{ opacity: .92; }
.service-card:hover .text-link{ border-color: var(--white); }

/* ==========================================================================
   STATS BAR
   ========================================================================== */
.stats-bar{ background: var(--black); padding-block: clamp(3rem, 6vw, 5rem); }
.stats-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
@media (max-width: 700px){ .stats-grid{ grid-template-columns: repeat(2, 1fr); } }
.stat__number{
  font-family: var(--f-accent); font-size: var(--fs-stat); color: var(--red);
  line-height: 1; letter-spacing: .01em;
}
.stat__label{ margin-top: .6rem; font-family: var(--f-sub); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--silver); }

/* ==========================================================================
   PORTFOLIO GRID
   ========================================================================== */
.portfolio-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px){ .portfolio-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .portfolio-grid{ grid-template-columns: 1fr; } }
.portfolio-item{
  position: relative; aspect-ratio: 4/5; overflow: hidden; cursor: pointer;
  background: linear-gradient(155deg,#1a1a1a,#0a0a0a);
}
.portfolio-item img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) contrast(1.05); transition: transform .6s var(--ease), filter .5s var(--ease); }
.portfolio-item:hover img{ transform: scale(1.08); filter: grayscale(0) contrast(1.05); }
.portfolio-item::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.15) 55%, rgba(255,22,22,.25) 100%);
  mix-blend-mode: multiply; opacity: .85;
}
.portfolio-item__body{ position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; color: var(--white); }
.portfolio-item__cat{ font-family: var(--f-sub); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: .4rem; }
.portfolio-item__title{ font-family: var(--f-display); font-size: 1.4rem; text-transform: uppercase; font-weight: 700; }
.play-btn{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.7); z-index: 2;
  width: 58px; height: 58px; border-radius: 50%; background: rgba(255,22,22,.92);
  display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.1rem;
  opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.portfolio-item:hover .play-btn{ opacity: 1; transform: translate(-50%,-50%) scale(1); }
.portfolio-filter-grid[hidden]{ display:none; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testi-track{ display: flex; gap: 1.75rem; transition: transform .6s var(--ease); }
.testi-viewport{ overflow: hidden; }
.testi-card{
  flex: 0 0 100%; background: var(--white); border: 1px solid var(--line-on-light);
  padding: 2.5rem 2.25rem; position: relative;
}
@media (min-width: 860px){ .testi-card{ flex-basis: calc(33.333% - 1.17rem); } }
.testi-quote-mark{ font-family: var(--f-accent); font-size: 3.5rem; color: var(--red); line-height: .5; display: block; margin-bottom: .75rem; }
.testi-text{ font-size: .98rem; line-height: 1.7; opacity: .85; min-height: 6.5em; }
.testi-person{ display: flex; align-items: center; gap: .85rem; margin-top: 1.75rem; }
.avatar-circle{
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--black); color: var(--white); font-family: var(--f-sub); font-weight: 600; font-size: .85rem;
}
.testi-name{ font-family: var(--f-sub); font-weight: 600; font-size: .92rem; }
.testi-role{ font-size: .8rem; opacity: .6; }
.carousel-dots{ display: flex; gap: .5rem; justify-content: center; margin-top: 2.25rem; }
.carousel-dots button{ width: 9px; height: 9px; border-radius: 50%; background: var(--line-on-light); transition: background .25s, transform .25s; }
.carousel-dots button.active{ background: var(--red); transform: scale(1.2); }
.section-dark .carousel-dots button{ background: var(--line-on-dark); }

/* ==========================================================================
   PARTNERS MARQUEE
   ========================================================================== */
.marquee{ overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display: flex; width: max-content; gap: clamp(2.5rem,6vw,5rem); animation: marquee 32s linear infinite; }
.marquee-item{
  font-family: var(--f-sub); font-weight: 600; font-size: 1.15rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--black); opacity: .32; filter: grayscale(1); transition: opacity .3s, filter .3s; white-space: nowrap;
}
.marquee-item:hover{ opacity: 1; filter: grayscale(0); color: var(--red); }

/* ==========================================================================
   FINAL CTA BANNER
   ========================================================================== */
.final-cta{ text-align: center; position: relative; overflow: hidden; }
.final-cta-bg{ position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(255,22,22,.25), transparent 65%); }
.final-cta .container{ position: relative; z-index: 1; }
.final-cta h2{ font-size: var(--fs-h1); max-width: 18ch; margin-inline: auto; }
.final-cta .btn{ margin-top: 2.25rem; }
.badge{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-sub); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--line-on-dark); padding: .55rem 1.1rem; margin-top: 1.75rem;
  color: var(--silver);
}
.section-light .badge{ border-color: var(--line-on-light); color: var(--text-on-light-dim); }
.badge .fa-star{ color: var(--red); }

/* ==========================================================================
   FLOATING ELEMENTS
   ========================================================================== */
.whatsapp-float{
  position: fixed; right: clamp(1rem,3vw,1.75rem); bottom: clamp(1rem,3vw,1.75rem); z-index: 90;
  display: flex; align-items: center; gap: .65rem;
  background: #22C55E; color: #fff; padding: .85rem 1.2rem;
  font-family: var(--f-sub); font-weight: 600; font-size: .82rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  transition: transform .25s var(--ease);
}
.whatsapp-float:hover{ transform: translateY(-3px); }
.whatsapp-float span{ display: none; }
@media (min-width: 640px){ .whatsapp-float span{ display: inline; } }

.modal-overlay{
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.72);
  display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal-overlay.open{ display: flex; }
.modal-box{
  background: var(--black); color: var(--white); max-width: 480px; width: 100%;
  padding: 2.75rem 2.25rem; position: relative; animation: popIn .35s var(--ease);
  border-top: 3px solid var(--red);
}
.modal-close{ position: absolute; top: 1rem; right: 1rem; color: var(--white); font-size: 1.1rem; width: 36px; height: 36px; display: flex; align-items:center; justify-content:center; }
.modal-close:hover{ color: var(--red); }
.modal-box h3{ font-size: 1.7rem; margin-bottom: .75rem; }
.modal-box p{ font-size: .92rem; color: var(--silver); margin-bottom: 1.5rem; }
.modal-form{ display: flex; gap: 0; border: 1.5px solid var(--line-on-dark); }
.modal-form input{ flex: 1; background: transparent; border: 0; padding: .9rem 1rem; color: var(--white); font-size: .9rem; }
.modal-form button{ background: var(--red); color: var(--white); padding: 0 1.2rem; font-family: var(--f-sub); font-weight: 600; font-size: .8rem; text-transform: uppercase; }
.lightbox-video{ aspect-ratio: 16/9; width: 100%; background: #000; display: flex; align-items: center; justify-content: center; text-align:center; padding: 2rem; color: var(--silver); font-size: .85rem; border: 1px solid var(--line-on-dark); }

.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--black); color: var(--white); border-top: 1px solid var(--line-on-dark);
  padding: 1.25rem var(--gutter); display: none;
  align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.cookie-banner.show{ display: flex; }
.cookie-banner p{ font-size: .82rem; color: var(--silver); max-width: 60ch; }
.cookie-banner p a{ color: var(--white); text-decoration: underline; }
.cookie-actions{ display: flex; gap: .75rem; flex-wrap: wrap; }

/* ==========================================================================
   FAQ (native details/summary)
   ========================================================================== */
.faq-item{ border-bottom: 1px solid var(--line-on-light); }
.section-dark .faq-item, .section-gray .faq-item{ border-bottom-color: var(--line-on-dark); }
.faq-item summary{
  cursor: pointer; list-style: none; padding-block: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--f-sub); font-weight: 600; font-size: 1rem;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary .fa-plus{ color: var(--red); transition: transform .3s var(--ease); flex-shrink:0; }
.faq-item[open] summary .fa-plus{ transform: rotate(45deg); }
.faq-item .faq-answer{ padding-bottom: 1.5rem; font-size: .92rem; opacity: .75; max-width: 65ch; line-height: 1.65; }

/* ==========================================================================
   FILTER TABS
   ========================================================================== */
.filter-tabs{ display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.filter-btn{
  font-family: var(--f-sub); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .6rem 1.15rem; border: 1.5px solid var(--line-on-dark); color: var(--silver);
  transition: all .25s var(--ease);
}
.section-light .filter-btn{ border-color: var(--line-on-light); color: var(--text-on-light-dim); }
.filter-btn:hover{ border-color: var(--red); color: var(--red); }
.filter-btn.active{ background: var(--red); border-color: var(--red); color: var(--white); }

/* ==========================================================================
   PROCESS TIMELINE (music page)
   ========================================================================== */
.process-timeline{ display: grid; grid-template-columns: repeat(5,1fr); gap: 1.5rem; counter-reset: step; }
@media (max-width: 900px){ .process-timeline{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .process-timeline{ grid-template-columns: 1fr; } }
.process-step{ position: relative; padding-top: 2.5rem; border-top: 2px solid var(--line-on-dark); }
.process-step__num{ font-family: var(--f-accent); font-size: 2.2rem; color: var(--red); line-height: 1; }
.process-step__title{ font-family: var(--f-sub); font-weight: 600; font-size: .95rem; text-transform: uppercase; margin-top: .6rem; }
.process-step__desc{ font-size: .85rem; opacity: .65; margin-top: .5rem; }

/* ==========================================================================
   ROSTER / TEAM
   ========================================================================== */
.roster-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
@media (max-width: 900px){ .roster-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px){ .roster-grid{ grid-template-columns: repeat(2,1fr); } }
.roster-card{ text-align: center; }
.roster-avatar{
  aspect-ratio: 1; width: 100%; background: linear-gradient(155deg,#1c1c1c,#0a0a0a);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
  font-family: var(--f-display); font-size: 2.5rem; color: var(--red); position: relative; overflow:hidden;
  border: 1px solid var(--line-on-dark);
}
.roster-name{ font-family: var(--f-sub); font-weight: 600; font-size: .88rem; }
.roster-role{ font-size: .76rem; opacity: .55; margin-top: .2rem; }

.team-card{ position: relative; }
.team-avatar{
  aspect-ratio: 4/5; width: 100%; background: linear-gradient(155deg,#161616,#0a0a0a);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; overflow: hidden;
  border-top: 3px solid var(--red);
}
.team-avatar .avatar-circle{ width: 84px; height: 84px; font-size: 1.5rem; background: var(--red); }
.team-name{ font-family: var(--f-sub); font-weight: 600; font-size: 1rem; }
.team-role{ font-size: .8rem; color: var(--red); margin-top: .15rem; }
.team-bio{ font-size: .84rem; opacity: .65; margin-top: .65rem; line-height: 1.6; }

/* ==========================================================================
   AUDIO PLAYER (music page)
   ========================================================================== */
.audio-player{ border: 1px solid var(--line-on-dark); }
.track-row{ display: flex; align-items: center; gap: 1.1rem; padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--line-on-dark); }
.track-row:last-child{ border-bottom: 0; }
.track-play{
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--red); color: var(--red);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .25s var(--ease);
}
.track-row.playing .track-play, .track-play:hover{ background: var(--red); color: var(--white); }
.track-info{ flex-grow: 1; min-width: 0; }
.track-title{ font-family: var(--f-sub); font-weight: 600; font-size: .9rem; }
.track-meta{ font-size: .76rem; opacity: .55; margin-top: .1rem; }
.track-bar{ flex-grow: 1; height: 3px; background: var(--line-on-dark); position: relative; display:none; }
@media(min-width:640px){ .track-bar{ display:block; } }
.track-bar-fill{ position: absolute; left:0; top:0; bottom:0; width: 0%; background: var(--red); transition: width .3s linear; }
.track-row.playing .track-bar-fill{ animation: trackProgress 26s linear forwards; }
@keyframes trackProgress{ from{ width:0%; } to{ width:100%; } }
.track-time{ font-family: var(--f-accent); font-size: .95rem; color: var(--silver); flex-shrink:0; }

/* ==========================================================================
   EQUIPMENT LIST (video page)
   ========================================================================== */
.equip-col h4{ font-family: var(--f-sub); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; }
.equip-col ul li{ padding-block: .55rem; border-bottom: 1px solid var(--line-on-dark); font-size: .88rem; opacity: .8; }
.equip-col ul li:last-child{ border-bottom: 0; }

/* BTS gallery */
.bts-gallery{ display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
@media (max-width: 800px){ .bts-gallery{ grid-template-columns: repeat(2,1fr); } }
.bts-gallery img{ width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .4s; }
.bts-gallery img:hover{ filter: grayscale(0); }
.bts-gallery > *:nth-child(2){ margin-top: 2rem; }
.bts-gallery > *:nth-child(4){ margin-top: -1rem; }
@media (max-width: 800px){ .bts-gallery > *{ margin-top:0 !important; } }

/* ==========================================================================
   COURSE CARDS (formations)
   ========================================================================== */
.course-card{ background: var(--white); border: 1px solid var(--line-on-light); display: flex; flex-direction: column; }
.course-card__media{ aspect-ratio: 16/10; position: relative; overflow: hidden; background: linear-gradient(155deg,#1a1a1a,#0a0a0a); }
.course-card__media img{ width:100%; height:100%; object-fit:cover; filter: grayscale(.5); }
.level-badge{
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-family: var(--f-sub); font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: .4rem .8rem; background: var(--red); color: var(--white);
}
.level-badge--all{ background: var(--white); color: var(--black); }
.course-card__body{ padding: 1.85rem; display: flex; flex-direction: column; flex-grow: 1; }
.course-card__title{ font-family: var(--f-display); font-size: 1.6rem; text-transform: uppercase; }
.course-card__desc{ font-size: .88rem; opacity: .7; margin-top: .6rem; line-height: 1.6; flex-grow: 1; }
.course-meta{ display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line-on-light); font-size: .78rem; }
.course-meta span{ display: flex; align-items: center; gap: .4rem; opacity: .7; }
.course-meta i{ color: var(--red); }
.course-price{ font-family: var(--f-accent); font-size: 1.9rem; margin-top: 1.1rem; }
.course-price small{ font-family: var(--f-body); font-size: .7rem; opacity: .55; text-transform: uppercase; letter-spacing: .04em; }
.course-card .btn{ margin-top: 1.25rem; }

.urgency-badge{
  display: inline-flex; align-items: center; gap: .55rem; background: rgba(255,22,22,.1); border: 1px solid var(--red);
  color: var(--red); font-family: var(--f-sub); font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: .55rem 1rem;
}
.urgency-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulseDot 1.4s ease-in-out infinite; }

.sessions-list{ border-top: 1px solid var(--line-on-light); }
.session-row{
  display: grid; grid-template-columns: 100px 1fr auto auto; align-items: center; gap: 1.25rem;
  padding-block: 1.35rem; border-bottom: 1px solid var(--line-on-light);
}
@media (max-width: 700px){ .session-row{ grid-template-columns: 1fr; gap: .4rem; text-align:left; } }
.session-date{ font-family: var(--f-accent); font-size: 1.55rem; color: var(--red); line-height: 1; }
.session-date small{ display: block; font-family: var(--f-body); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; opacity: .55; margin-top: .2rem; }
.session-course{ font-family: var(--f-sub); font-weight: 600; font-size: .95rem; }
.session-time{ font-size: .8rem; opacity: .6; margin-top: .15rem; }
.session-spots{ font-size: .76rem; font-family: var(--f-sub); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.session-spots.low{ color: var(--red); }

/* ==========================================================================
   SHOP / BOUTIQUE
   ========================================================================== */
.shop-layout{ display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 900px){ .shop-layout{ grid-template-columns: 1fr; } }
.filters-sidebar{ position: sticky; top: 7rem; }
.filter-group{ padding-block: 1.25rem; border-bottom: 1px solid var(--line-on-light); }
.filter-group h4{ font-family: var(--f-sub); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .9rem; }
.filter-check{ display: flex; align-items: center; gap: .6rem; font-size: .86rem; padding-block: .35rem; cursor: pointer; }
.filter-check input{ accent-color: var(--red); width: 15px; height: 15px; }

.product-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; }
@media (max-width: 900px){ .product-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .product-grid{ grid-template-columns: 1fr; } }
.product-card{ position: relative; }
.product-media{ aspect-ratio: 1; position: relative; overflow: hidden; background: linear-gradient(155deg,#f2f2f2,#e4e4e4); margin-bottom: 1rem; }
.product-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.product-card:hover .product-media img{ transform: scale(1.06); }
.stock-badge{
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  font-family: var(--f-sub); font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .35rem .65rem; background: var(--white); color: var(--black);
}
.stock-badge--low{ background: var(--red); color: var(--white); }
.stock-badge--out{ background: var(--black); color: var(--white); opacity: .7; }
.product-size{ font-size: .74rem; opacity: .55; text-transform: uppercase; letter-spacing: .04em; }
.product-name{ font-family: var(--f-sub); font-weight: 600; font-size: 1rem; margin-top: .3rem; }
.product-price{ font-family: var(--f-accent); font-size: 1.4rem; color: var(--red); margin-top: .4rem; }
.product-add{
  margin-top: .85rem; width: 100%; border: 1.5px solid var(--black); padding: .7rem; text-align: center;
  font-family: var(--f-sub); font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  transition: all .25s var(--ease);
}
.product-add:hover{ background: var(--black); color: var(--white); }
.product-add:disabled{ opacity: .35; cursor: not-allowed; }

.cart-fab{
  position: fixed; right: clamp(1rem,3vw,1.75rem); bottom: calc(clamp(1rem,3vw,1.75rem) + 68px); z-index: 90;
  width: 54px; height: 54px; background: var(--black); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.cart-count{
  position: absolute; top: -7px; right: -7px; background: var(--red); color: var(--white);
  font-size: .68rem; font-family: var(--f-sub); font-weight: 700; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cart-drawer{
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px,100%); z-index: 210;
  background: var(--white); color: var(--black); box-shadow: -12px 0 40px rgba(0,0,0,.25);
  transform: translateX(100%); transition: transform .4s var(--ease);
  display: flex; flex-direction: column;
}
.cart-drawer.open{ transform: translateX(0); }
.cart-drawer__head{ display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--line-on-light); }
.cart-drawer__head h3{ font-size: 1.1rem; }
.cart-drawer__items{ flex-grow: 1; overflow-y: auto; padding: 1rem 1.75rem; }
.cart-item{ display: flex; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--line-on-light); align-items:center; }
.cart-item img{ width: 60px; height: 60px; object-fit: cover; flex-shrink: 0; }
.cart-item-info{ flex-grow: 1; min-width:0; }
.cart-item-name{ font-family: var(--f-sub); font-weight: 600; font-size: .85rem; }
.cart-item-price{ font-size: .8rem; opacity: .6; margin-top: .2rem; }
.cart-item-remove{ color: var(--red); font-size: .78rem; text-decoration: underline; margin-top: .3rem; }
.cart-empty{ text-align: center; padding: 3rem 1rem; opacity: .55; font-size: .9rem; }
.cart-drawer__foot{ padding: 1.5rem 1.75rem; border-top: 1px solid var(--line-on-light); }
.cart-subtotal{ display: flex; justify-content: space-between; font-family: var(--f-sub); font-weight: 600; margin-bottom: 1.1rem; }
.payment-badges{ display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.payment-badge{ border: 1px solid var(--line-on-light); padding: .4rem .75rem; font-size: .72rem; font-family: var(--f-sub); font-weight: 600; letter-spacing: .03em; }

.trust-badges{ display: flex; flex-wrap: wrap; gap: 2rem; }
.trust-badge{ display: flex; align-items: center; gap: .75rem; font-size: .85rem; opacity: .8; }
.trust-badge i{ color: var(--red); font-size: 1.3rem; }
.shipping-table{ width: 100%; border-collapse: collapse; }
.shipping-table td{ padding: .9rem 0; border-bottom: 1px solid var(--line-on-light); font-size: .9rem; }
.shipping-table td:last-child{ text-align: right; font-family: var(--f-sub); font-weight: 600; }

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.story-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
@media (max-width: 860px){ .story-grid{ grid-template-columns: 1fr; } }
.story-media{ aspect-ratio: 4/5; overflow: hidden; background: linear-gradient(155deg,#1a1a1a,#050505); }
.story-media img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.05); }
.pull-quote{
  font-family: var(--f-display); font-size: clamp(1.7rem,3.6vw,2.6rem); color: var(--red);
  text-transform: uppercase; line-height: 1.15; max-width: 22ch; margin-inline: auto; text-align: center;
}
.pull-quote::before{ content: '"'; }
.pull-quote::after{ content: '"'; }

.values-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
@media (max-width: 860px){ .values-grid{ grid-template-columns: repeat(2,1fr); } }
.value-card{ padding: 2rem 0; border-top: 2px solid var(--red); }
.value-card__num{ font-family: var(--f-accent); font-size: 1.5rem; opacity: .3; }
.value-card__title{ font-family: var(--f-sub); font-weight: 600; font-size: 1rem; text-transform: uppercase; margin-top: .5rem; }
.value-card__desc{ font-size: .85rem; opacity: .65; margin-top: .5rem; line-height: 1.6; }

.timeline{ position: relative; padding-left: 2.25rem; border-left: 2px solid var(--line-on-dark); }
.timeline-item{ position: relative; padding-bottom: 2.75rem; }
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-item::before{
  content: ''; position: absolute; left: -2.4rem; top: .25rem; width: 12px; height: 12px; border-radius: 50%;
  background: var(--red); border: 3px solid var(--black);
}
.timeline-year{ font-family: var(--f-accent); font-size: 1.5rem; color: var(--red); }
.timeline-title{ font-family: var(--f-sub); font-weight: 600; margin-top: .3rem; }
.timeline-desc{ font-size: .85rem; opacity: .65; margin-top: .35rem; max-width: 50ch; }

.credibility-block{ display: flex; flex-wrap: wrap; gap: .85rem; }
.credibility-item{
  border: 1px solid var(--line-on-light); padding: .8rem 1.15rem; font-size: .82rem;
  display: flex; align-items: center; gap: .6rem;
}
.credibility-item i{ color: var(--red); }

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-layout{ display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4rem); }
@media (max-width: 900px){ .contact-layout{ grid-template-columns: 1fr; } }
.contact-info-block{ margin-bottom: 2rem; }
.contact-info-block h4{ font-family: var(--f-sub); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: .75rem; }
.contact-info-block p, .contact-info-block a{ font-size: .95rem; line-height: 1.6; }
.map-embed{ width: 100%; aspect-ratio: 16/10; border: 0; filter: grayscale(.3) invert(.92) contrast(.92); }
.contact-whatsapp{
  display: flex; align-items: center; gap: 1rem; background: #22C55E; color: #fff; padding: 1.1rem 1.35rem; margin-top: 1.5rem;
}
.contact-whatsapp i{ font-size: 1.4rem; }
.contact-whatsapp strong{ display: block; font-family: var(--f-sub); font-size: .92rem; }
.social-bar{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.social-pill{
  display: flex; align-items: center; gap: .55rem; border: 1px solid var(--line-on-dark); padding: .55rem 1rem; font-size: .8rem;
}
.social-pill i{ color: var(--red); }
.response-badge{ display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-sub); font-weight: 600; font-size: .85rem; color: var(--red); }

/* ==========================================================================
   BLOG / ACTUALITES
   ========================================================================== */
.featured-article{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; background: var(--white); border: 1px solid var(--line-on-light); }
@media (max-width: 860px){ .featured-article{ grid-template-columns: 1fr; } }
.featured-media{ aspect-ratio: 16/11; overflow: hidden; }
.featured-media img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3); }
.featured-body{ padding: clamp(1.5rem,3vw,3rem) clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,3rem) 0; }
@media (max-width: 860px){ .featured-body{ padding: 0 1.5rem 2rem; } }
.blog-cat{ font-family: var(--f-sub); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.featured-body h3{ font-size: clamp(1.5rem,3vw,2.1rem); margin-top: .6rem; text-transform: none; letter-spacing: 0; font-family: var(--f-display); text-transform: uppercase; }
.blog-excerpt{ font-size: .92rem; opacity: .7; margin-top: .85rem; line-height: 1.65; }
.blog-meta{ font-size: .76rem; opacity: .5; margin-top: 1rem; display: flex; gap: 1rem; }

.blog-layout{ display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: start; }
@media (max-width: 900px){ .blog-layout{ grid-template-columns: 1fr; } }
.blog-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 1.75rem; }
@media (max-width: 640px){ .blog-grid{ grid-template-columns: 1fr; } }
.blog-card{ background: var(--white); }
.blog-card-media{ aspect-ratio: 16/10; overflow: hidden; margin-bottom: 1.1rem; }
.blog-card-media img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4); transition: filter .3s, transform .5s; }
.blog-card:hover .blog-card-media img{ filter: grayscale(0); transform: scale(1.04); }
.blog-card h3{ font-size: 1.2rem; margin-top: .55rem; letter-spacing: 0; }
.blog-card .blog-excerpt{ font-size: .85rem; }
.blog-sidebar-block{ margin-bottom: 2.5rem; }
.blog-sidebar-block h4{ font-family: var(--f-sub); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 1.1rem; }
.popular-post{ display: flex; gap: .9rem; padding-block: .9rem; border-bottom: 1px solid var(--line-on-light); align-items: center; }
.popular-post img{ width: 56px; height: 56px; object-fit: cover; flex-shrink: 0; }
.popular-post-title{ font-size: .83rem; font-weight: 600; line-height: 1.35; }
.insta-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: .4rem; }
.insta-grid img{ aspect-ratio: 1; object-fit: cover; filter: grayscale(.3); }

.newsletter-bar{
  background: var(--black); color: var(--white); padding: 1.5rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.newsletter-bar form{ display: flex; gap: 0; border: 1.5px solid var(--line-on-dark); min-width: 280px; flex-grow:1; max-width: 420px; }
.newsletter-bar input{ flex-grow: 1; background: transparent; border: 0; padding: .85rem 1rem; color: var(--white); font-size: .88rem; }
.newsletter-bar button{ background: var(--red); color: var(--white); padding: 0 1.3rem; font-family: var(--f-sub); font-weight: 600; font-size: .8rem; text-transform: uppercase; white-space:nowrap; }

/* ==========================================================================
   MISC — buttons row, back-to-list, share icons
   ========================================================================== */
.icon-circle{
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-on-dark);
  display: flex; align-items: center; justify-content: center; color: var(--white); flex-shrink:0;
}
hr.rule{ border: 0; border-top: 1px solid var(--line-on-light); margin-block: 2.5rem; }
.section-dark hr.rule, .section-gray hr.rule{ border-top-color: var(--line-on-dark); }