/* Theme B — "Municipal / official portal" */
:root{
  --page-bg: radial-gradient(1200px 800px at 10% -10%, rgba(14,99,156,.10), transparent 60%),
             radial-gradient(1000px 700px at 90% 10%, rgba(11,42,58,.10), transparent 55%),
             #f6f8fb;
  --surface: rgba(255,255,255,.98);
  --text: #0a1720;
  --muted: #49555f;
  --accent: #0e639c;
  --accent2:#0b2a3a;
  --gold: #b08d57;
  --hero-overlay: linear-gradient(90deg, rgba(255,255,255,.78), rgba(255,255,255,.25));
}
.topbar{
  background: linear-gradient(90deg, rgba(14,99,156,.08), rgba(11,42,58,.06));
  border-bottom: 1px solid rgba(14,99,156,.18);
}
.brand__logo{ background: rgba(14,99,156,.10); border-color: rgba(14,99,156,.22); }
.hero__wrap{ border-radius: 22px; }
.hero__grid{ grid-template-columns: 1.05fr .95fr; }
.hero__left{ background: #fff; }
.hero__rightCard{ background: rgba(255,255,255,.92); }
.chip{ border-color: rgba(14,99,156,.16); }

@media (max-width: 900px){
  .topbar__inner{
    align-items: center;
  }
  .brand{
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
  }
  .brand__logo{
    flex: 0 0 38px;
  }
  .brand__name{
    min-width: 0;
  }
  .brand__title,
  .brand__sub{
    overflow-wrap: anywhere;
  }
  .header__right{
    display: none;
  }
  .section__head{
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }
  .section__head > div{
    min-width: 0;
  }
  .section__title{
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.16;
  }
  .section__sub{
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .section__head .btn{
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .mobilebar{
    max-width: calc(100vw - 24px);
  }
  .mobilebar .btn{
    min-width: 0;
  }
}

@media (max-width: 760px){
  html,
  body{
    max-width: 100%;
    overflow-x: hidden;
  }
  .container{
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    min-width: 0;
  }
  .topbar__inner{
    gap: 10px;
  }
  .brand{
    min-width: 0;
  }
  .brand__title{
    font-size: 15px;
  }
  .brand__sub{
    font-size: 11px;
  }
  .header__right{
    min-width: 0;
    justify-content: flex-end;
  }
  .header__right .btn{
    display: none;
  }
  .phone__num{
    font-size: 17px;
  }
  .phone__meta{
    display: none;
  }
  .section__title{
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.16;
  }
  .section__head{
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }
  .section__head > div{
    min-width: 0;
  }
  .section__head .btn{
    width: 100%;
    white-space: normal;
    text-align: center;
  }
  .coffins{
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .coffin{
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .coffin__img,
  .coffin__img img{
    max-width: 100%;
    min-width: 0;
  }
  .coffin__actions .btn{
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px){
  .mobilebar{
    left: 8px;
    right: 8px;
    gap: 8px;
    max-width: calc(100vw - 16px);
  }
  .mobilebar .btn{
    padding: 12px 8px;
    border-radius: 14px;
    font-size: 14px;
  }
}

@media (max-width: 420px){
  .phone{
    display: none;
  }
}

/* --- Adjustments for final (mobile + catalog) --- */
/* Hero: stack earlier so the image moves below on tablets */
@media (max-width: 1100px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__right{ min-height: 260px; }
}

/* Catalog: keep coffin photos fully visible inside the square */
.coffin__img{
  padding: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.coffin__img img{
  height: 100% !important;
  width: 100% !important;
  object-fit: contain !important;
  padding: 12px;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.coffin__img{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Price styling */
.coffin__meta{
  margin-top: 6px;
  color: var(--text);
  font-size: 14px;
}
.coffin__meta b{
  color: var(--accent2);
  font-size: 16px;
}


/* Chips: unify icon color (gold) */
.chip svg{ color: var(--gold); }

/* Hero photo focus: show lower part (hearse) */
.hero__photo img{ object-position: center 70%; }