/* MINVODY consistency audit — Phase 2
   Shared color roles, radius tiers, controls and approved footer only. */

:root{
  --navy-deep:#081426;
  --navy:#0E2038;
  --navy-raised:#16294C;

  /* Footer typography needs this token even on the homepage, which does not
     load minvody-phase1.css (where --font-display is otherwise defined). */
  --font-display:"Literata",Georgia,serif;

  --blue:#2C78B8;
  --blue-hover:#246AA3;
  --blue-on-dark:#5AA3E6;

  --surface:#FFFFFF;
  --surface-soft:#FCFBF8;
  --ice:#EAF1F7;
  --ice-soft:#F3F7FA;

  --text:#0E2038;
  --text-secondary:#4C5A70;
  --text-muted:#8B94A6;
  --border:rgba(14,32,56,.12);

  --brand-baldovska:#2C78B8;
  --brand-salvator:#177866;
  --brand-drobcek:#D96591;
  --brand-savior:#2498C8;

  --radius-control:14px;
  --radius-card:22px;
  --radius-panel:24px;
  --radius-editorial:30px;
  --radius-editorial-mobile:22px;
  --radius-pill:999px;

  --accent-ink:var(--blue);
}

html[data-brand="baldovska"]{--accent:var(--brand-baldovska)}
html[data-brand="salvator"]{--accent:var(--brand-salvator)}
html[data-brand="drobcek"]{--accent:var(--brand-drobcek)}
html[data-brand="savior"]{--accent:var(--brand-savior)}

/* Approved shared surface roles. These selectors consolidate identical uses
   without recolouring bespoke hero, mineral, glass or brand compositions. */
.products-intro,
.news-intro,
.contact-intro,
.products-grid-section,
.articles-section,
.contact-main{background-color:var(--surface)}

.product-card,
.article-card,
.contact-list,
.locations-panel,
.form{background-color:var(--surface)}

.product-card__media,
.article-card__media{background-color:var(--ice)}

.product-card--bald{--card-accent:var(--brand-baldovska)}
.product-card--salv{--card-accent:var(--brand-salvator)}
.product-card--drob{--card-accent:var(--brand-drobcek)}
.product-card--savi{--card-accent:var(--brand-savior)}

.products-intro h1 i,
.news-intro h1 i,
.contact-intro h1 i,
.product-card__cta,
.article-card__cta{color:var(--blue)}

.form-field input,
.form-field select,
.form-field textarea{border-color:var(--border);background-color:var(--surface);color:var(--text)}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(44,120,184,.12)}

/* Radius tiers. Circular, mineral, bubble and organic/statistic geometry stays
   intentionally outside this system. */
.product-card,
.article-card,
.value-glass,
.news__card,
.benefit,
.product,
.contact__card,
.form{border-radius:var(--radius-card)}

.about__box,
.bottles__panel,
.bottles__trust,
.contact-list,
.locations-panel,
.acc{border-radius:var(--radius-panel)}

.split__media,
.split__media--reverse,
.hero-stack__img,
.map-frame{border-radius:var(--radius-editorial)}

.form-field input,
.form-field select,
.form-field textarea{border-radius:var(--radius-control)}

/* Shared primary CTA. Text/arrow links and glass controls remain distinct. */
.btn,
.about__cta,
.bottles__cta,
.news__all{
  min-height:48px;
  padding:13px 22px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn:not(.btn--accent):not(.btn--ghost),
.about__cta,
.news__all{
  border-color:var(--blue);
  background:var(--blue);
  color:#fff;
}

.btn:not(.btn--accent):not(.btn--ghost):hover,
.about__cta:hover,
.news__all:hover{
  background:var(--blue-hover);
  border-color:var(--blue-hover);
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(14,32,56,.18);
}

html[data-brand] .btn,
html[data-brand] .btn--accent{
  border-color:var(--accent);
  background:var(--accent);
}

.bottles__cta{
  border-color:var(--water-color,var(--brand-baldovska));
  background:var(--water-color,var(--brand-baldovska));
}

.btn--sm{min-height:44px;padding:11px 20px;font-size:13px}

.btn:focus-visible,
.about__cta:focus-visible,
.bottles__cta:focus-visible,
.news__all:focus-visible,
.carousel__nav:focus-visible,
.bstage__arrow:focus-visible,
.news__nav button:focus-visible{
  outline:3px solid rgba(44,120,184,.62);
  outline-offset:3px;
}

.carousel__nav,
.bstage__arrow,
.news__nav button{
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
}

/* One shared glass arrow-button design for every horizontal carousel
   (Aktuality preview on the homepage, product carousels on brand pages).
   The bottle showcase stage uses a different interaction pattern and keeps
   its own bespoke arrow treatment. */
.carousel__nav,
.news__nav button{
  border-radius:50%;
  border:1px solid rgba(184,219,247,.55);
  background:linear-gradient(160deg,rgba(237,246,255,.75),rgba(212,233,252,.4));
  color:var(--navy);
  cursor:pointer;
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 12px 28px rgba(14,32,56,.12),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.carousel__nav svg,
.news__nav button svg{width:20px;height:20px}
.carousel__nav:hover,
.news__nav button:hover{
  background:linear-gradient(160deg,rgba(245,250,255,.9),rgba(224,241,253,.58));
  border-color:rgba(158,203,240,.78);
  box-shadow:0 16px 34px rgba(14,32,56,.16),inset 0 1px 0 rgba(255,255,255,.85);
}
.carousel__nav--prev:hover,
.news__nav button:first-child:hover{transform:translateY(-50%) translateX(-3px) scale(1.045)}
.carousel__nav--next:hover,
.news__nav button:last-child:hover{transform:translateY(-50%) translateX(3px) scale(1.045)}
@media(prefers-reduced-motion:reduce){
  .carousel__nav,
  .news__nav button{transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
  .carousel__nav--prev:hover,
  .carousel__nav--next:hover,
  .news__nav button:first-child:hover,
  .news__nav button:last-child:hover{transform:translateY(-50%)}
}

/* Shared mobile carousel pagination dots. Hidden by default (desktop shows
   arrows instead); every genuine horizontal carousel that hides its arrows
   on small screens shows this instead, at the same breakpoint. Dots reflect
   scroll position via JS (aria-hidden — the native swipe gesture is already
   the accessible interaction; dots are a supplementary visual cue only). */
.carousel-dots{display:none;justify-content:center;align-items:center;gap:7px;margin-top:18px;flex-wrap:wrap;padding:0 24px}
.carousel-dots__dot{width:5px;height:5px;border-radius:50%;background:rgba(14,32,56,.16);flex:none;transition:background .3s ease,width .3s ease,border-radius .3s ease}
.carousel-dots__dot.is-active{width:16px;border-radius:3px;background:var(--blue)}
.carousel-dots--on-dark .carousel-dots__dot{background:rgba(255,255,255,.28)}
.carousel-dots--on-dark .carousel-dots__dot.is-active{background:var(--blue-on-dark)}
html[data-brand] .carousel-dots__dot.is-active{background:var(--accent)}
@media(max-width:640px){
  .carousel-dots{display:flex}
}
@media(prefers-reduced-motion:reduce){
  .carousel-dots__dot{transition:none}
}

/* One approved footer implementation on every route. Decorative footer
   bubbles are still page-owned and are deliberately not touched here. */
.ft{
  position:relative;
  overflow:visible;
  padding:76px 0 34px;
  background:var(--navy-deep);
  color:rgba(255,255,255,.62);
}

.ft__intro{
  position:relative;
  z-index:2;
  margin-bottom:52px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.ft__mark{
  position:absolute;
  z-index:3;
  left:50%;
  top:0;
  transform:translate(-50%,-50%);
  width:94px;
  height:94px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  box-shadow:0 16px 38px rgba(2,10,22,.2);
}
.ft__mark img{width:80px;height:80px;display:block;object-fit:contain;border-radius:50%}
.ft__intro h2{margin:0;color:#fff;font-family:var(--font-display);font-size:clamp(27px,2.6vw,36px);font-weight:400;line-height:1.15}
.ft__intro p{max-width:54ch;margin:16px auto 0;color:rgba(255,255,255,.54);font-size:14px;line-height:1.75}
.ft__main{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.38fr .8fr 1fr 1.35fr;
  gap:clamp(28px,4vw,62px);
  align-items:start;
}
.ft h4{margin:0 0 16px;color:#fff;font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ft__contact-list{display:grid;gap:15px}
.ft a.ft__contact-item,.ft__contact-item{display:flex;align-items:center;gap:13px;padding:0;color:rgba(255,255,255,.68);font-size:14px;line-height:1.55}
.ft__contact-icon{width:35px;height:35px;flex:0 0 35px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--blue-on-dark);background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12)}
.ft__contact-icon svg{width:16px;height:16px}
.ft a{display:block;padding:5px 0;color:rgba(255,255,255,.62);font-size:14.5px;text-decoration:none;transition:color .25s ease}
.ft a:hover{color:#fff}
.ft__bottom{
  position:relative;
  z-index:2;
  margin-top:58px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:center;
  text-align:center;
  flex-wrap:wrap;
  gap:12px;
  color:rgba(255,255,255,.45);
  font-size:12.5px;
}
.ft__bottom a{color:inherit}

@media(max-width:1080px){
  .ft__main{grid-template-columns:1fr 1fr;row-gap:46px}
}

@media(max-width:640px){
  .split__media,
  .split__media--reverse,
  .hero-stack__img,
  .map-frame{border-radius:var(--radius-editorial-mobile)}

  .carousel__nav,
  .bstage__arrow,
  .news__nav button{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
  }

  .ft{padding:68px 0 28px}
  .ft__mark{width:80px;height:80px}
  .ft__mark img{width:68px;height:68px}
  .ft__intro{margin-bottom:42px}
  .ft__intro p{max-width:34ch;font-size:13.5px;line-height:1.7}
  .ft__main{grid-template-columns:1fr;row-gap:36px}
  .ft__bottom{margin-top:44px}
}