.btn { 
  display:inline-block;
  padding:.9rem 1.2rem;
  border-radius:.75rem;
  font-weight:600;
}

#account-modal .btn {
  transition: box-shadow .2s ease, transform .08s ease, background-color .2s ease, border-color .2s ease;
}



.btn--sm {

  padding:.55rem .9rem;

  font-size:.92rem;

}



.btn-block {

  display:block;

  width:100%;

  text-align:center;

}



.btn.primary {

  background:var(--accent);

  color:#000;

}



.btn.secondary {

  background:#fff;

  color:var(--brand);

  border:2px solid var(--brand);

}



.btn.ghost {

  border:2px solid var(--accent);

  color:var(--ink);

}



/* Labels */

.tag {

  display:inline-block;

  font-size:.8rem;

  letter-spacing:.04em;

  text-transform:uppercase;

  color:#fff;

  background:var(--brand);

  padding:.35rem .6rem;

  border-radius:.35rem;

}



.tag + .section-title {

  margin-top:.35rem;

}



.tag--accent {

  background:var(--accent);

  color:#000;

}



/* Cards */

.cards {

  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

}



.card {

  background:#fff;

  border:1px solid #eee;

  border-radius:1rem;

  padding:1.25rem;

  display:flex;

  flex-direction:column;

  gap:.75rem;

  box-shadow:0 10px 30px rgba(0,0,0,.04);

}



.card h3 {

  margin:.25rem 0 .25rem;

  font-size:1.25rem;

  color:var(--muted);

}



.card p {

  margin:0;

  color:#3b4744;

}



/* CTA */

.cta {

  background:var(--brand);

  color:#fff;

  border-radius:1rem;

  padding:1.5rem;

}



.cta h3 {

  margin:.2rem 0 0;

}



.cta .muted {

  margin:0 0 .25rem;

}



.cta .actions {

  margin-top:.5rem;

}



/* Forms */

.auth-form,

.form-row,

.portal-card form,

.login-card {

  display:grid;

  gap:1rem;

}



.login-card {

  background:#fff;

  padding:clamp(1.5rem,4vw,2.5rem);

  border-radius:1.25rem;

  box-shadow:0 25px 60px rgba(34,49,44,.1);

}



.login-card .field {

  display:grid;

  gap:.4rem;

}



.login-card label,

.portal-card label {

  font-weight:600;

  color:var(--muted);

}



.login-card input {

  font:inherit;

  padding:.8rem 1rem;

  border:1px solid rgba(70,93,87,.25);

  border-radius:.75rem;

  transition:border-color .2s ease, box-shadow .2s ease;

}



.login-card input:focus {

  outline:none;

  border-color:var(--brand);

  box-shadow:0 0 0 3px rgba(107,133,126,.25);

}



.portal-card textarea,

.portal-card input,

.portal-card select {

  font:inherit;

  padding:.85rem 1rem;

  border-radius:.75rem;

  border:1px solid rgba(70,93,87,.3);

  background:#fff;

}



.portal-card textarea:focus,

.portal-card input:focus,

.portal-card select:focus {

  outline:none;

  border-color:var(--brand);

  box-shadow:0 0 0 3px rgba(107,133,126,.22);

}



.auth-toggle {

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  background:rgba(214,225,220,.45);

  padding:.35rem;

  border-radius:1rem;

  gap:.35rem;

}



.auth-toggle button {

  border:none;

  border-radius:.8rem;

  background:transparent;

  font:inherit;

  font-weight:600;

  padding:.65rem .75rem;

  cursor:pointer;

  color:var(--muted);

  transition:background .2s ease,color .2s ease;

}



.auth-toggle button[aria-selected="true"] {

  background:#fff;

  color:#1f2a27;

  box-shadow:0 6px 20px rgba(31,42,39,.12);

}



.field-inline {

  display:flex;

  align-items:flex-start;

  gap:.6rem;

  font-size:.95rem;

  color:#3b4744;

}



.field-inline input[type="checkbox"] {

  margin-top:.2rem;

  width:1.1rem;

  height:1.1rem;

  accent-color:var(--brand);

}



.remember-field {

  margin:.25rem 0 0;

  font-weight:500;

  user-select:none;

}



.password-hint,

.form-note {

  margin:0;

  font-size:.85rem;

  color:#51635e;

}



.password-hint {

  margin-top:-.2rem;

}



.security-list {

  list-style:none;

  padding:0;

  margin:0 0 1rem;

  display:grid;

  gap:.35rem;

  font-size:.95rem;

  color:#2d3a37;

}



.security-list li::before {

  content:'✓';

  color:var(--brand);

  margin-right:.45rem;

  display:inline-block;

}



.form-feedback {

  margin:0;

  font-size:.95rem;

  padding:.6rem .75rem;

  border-radius:.75rem;

  background:rgba(214,225,220,.55);

  color:#25423a;

}



.form-feedback.error {

  background:rgba(255,202,197,.6);

  color:#731f1a;

}



.btn-link {

  background:none;

  border:none;

  color:var(--brand);

  font:inherit;

  cursor:pointer;

  padding:0;

  text-decoration:underline;

}



.form-row.two {

  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

}



/* Catalog carousel */

.catalog-carousel {

  position:relative;

  background:linear-gradient(140deg, rgba(227,233,236,.95), rgba(205,215,221,.95));

  border-radius:1.75rem;

  padding:clamp(1.5rem,4vw,3rem);

  overflow:hidden;

  box-shadow:0 25px 70px rgba(43,58,54,.12);

}



.catalog-carousel__viewport {

  display:flex;

  transition:transform .55s cubic-bezier(.4,.12,.2,1);

}



.catalog-slide {

  min-width:100%;

  display:grid;

  gap:1.75rem;

  color:#2f3c39;

}



.catalog-slide__header h3 {

  margin:0;

  font-size:clamp(1.4rem,3vw,2rem);

  color:#24312e;

}



.catalog-slide__header .muted {

  margin:.25rem 0 0;

}



.catalog-slide__body {

  display:grid;

  gap:1.5rem;

  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

}



.catalog-slide__body h4 {

  margin:0 0 .5rem;

  font-size:1.05rem;

  color:#1f2a27;

}



.catalog-slide__body ul {

  margin:0;

  padding-left:1.1rem;

  display:grid;

  gap:.45rem;

  color:#3c4a46;

}



.catalog-carousel__control {

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:2.6rem;

  height:2.6rem;

  border-radius:50%;

  border:none;

  background:rgba(255,255,255,.85);

  color:#2f3c39;

  font-size:1.35rem;

  display:grid;

  place-items:center;

  cursor:pointer;

  transition:background .25s ease, box-shadow .25s ease;

  box-shadow:0 10px 30px rgba(31,42,39,.18);

}



.catalog-carousel__control:hover,

.catalog-carousel__control:focus-visible {

  background:#fff;

  outline:none;

}



.catalog-carousel__control.prev {

  left:clamp(.75rem,2vw,1.25rem);

}



.catalog-carousel__control.next {

  right:clamp(.75rem,2vw,1.25rem);

}



.catalog-carousel__dots {

  position:absolute;

  bottom:1.25rem;

  left:50%;

  transform:translateX(-50%);

  display:flex;

  gap:.6rem;

}



.catalog-carousel__dot {

  width:.55rem;

  height:.55rem;

  border-radius:50%;

  background:rgba(255,255,255,.5);

  border:none;

  padding:0;

  cursor:pointer;

  transition:transform .25s ease, background .25s ease;

}



.catalog-carousel__dot[aria-current="true"] {

  transform:scale(1.4);

  background:#fff;

}



.catalog-footer {

  text-align:center;

  display:grid;

  gap:1.1rem;

  background:#fff;

  border-radius:1.5rem;

  padding:clamp(1.25rem,3vw,2rem);

  box-shadow:0 15px 45px rgba(43,58,54,.1);

}



@media (max-width: 720px) {

  .catalog-carousel {

    padding:2.25rem 1.25rem 3.25rem;

  }



  .catalog-carousel__control {

    top:auto;

    bottom:1rem;

    transform:none;

  }



  .catalog-carousel__control.prev {

    left:1.25rem;

  }



  .catalog-carousel__control.next {

    right:1.25rem;

  }



  .catalog-carousel__dots {

    bottom:.75rem;

  }

}



/* Elevated / enterprise-style buttons */
.btn--elevated {
  box-shadow: 0 8px 22px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  border: 2px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02)) #fff;
}

.btn.primary.btn--elevated {
  box-shadow: 0 10px 28px rgba(220,171,139,.35), 0 2px 10px rgba(220,171,139,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.06)) var(--accent);
  border-color: rgba(0,0,0,.05);
}

.btn--elevated:hover,
.btn--elevated:focus-visible { 
  transform: translateY(-1px);
}

.btn--elevated:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.16), 0 1px 4px rgba(0,0,0,.08);
}



/* Modal animations */
@keyframes em-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes em-zoom-in { from { transform: translateY(4px) scale(.98); opacity:.96 } to { transform: translateY(0) scale(1); opacity:1 } }
.modal-backdrop { animation: em-fade-in .18s ease-out both; }
.modal-card { animation: em-zoom-in .22s ease-out both; }

/* Redesign notice (modal) */
.rd-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.rd-modal {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: #fff;
  color: var(--ink);
  border-radius: 1rem;
  width: min(92vw, 420px);
  padding: 1rem 1.25rem;
  box-shadow: 0 18px 46px rgba(0,0,0,.18);
  text-align: center;
  border: 1px solid #eee;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  animation: rd-pop .28s ease-out forwards;
  pointer-events: auto;
}
.rd-illustration { font-size: 2.25rem; margin-bottom: .25rem; }
.rd-desc { margin: .25rem 0 1rem; color: var(--muted); }
.rd-close { margin-top: .25rem; }
.rd-sr-exit { display: none; }

@media (max-width: 640px) {
  .rd-modal { left: 50%; right: auto; transform: translate(-50%, 8px) scale(.98); width: min(92vw, 440px); }
}

@keyframes rd-pop {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}