/* ==========================================================================
   Kalles theme — global restyle of OpenCart's default Bootstrap content so any
   not-yet-custom-templated page (account, information, misc) inherits the look.
   Chrome is fully custom, so these selectors only hit storefront page content.
   ========================================================================== */
#content { padding-block: 3rem 5rem; }
#content > .container, #content > .container-fluid { padding-inline: 0; }
main > #product-category.container, main > #cms-blog.container, main > #checkout-cart.container,
main > #checkout-checkout.container, main > #information-information.container, main > #information-contact.container,
main > #common-home.container, main > [id].container {
  max-width: calc(var(--container-max-width) + var(--spacing-x) * 2); padding-inline: var(--spacing-x); margin-inline: auto;
}

/* Headings */
#content h1 { font-family: var(--font-heading-family); font-weight: var(--font-normal); font-size: 2.8rem; margin-bottom: 2rem; }
#content h2 { font-size: 2.2rem; font-weight: var(--font-medium); margin-bottom: 1.5rem; }
#content h3 { font-size: 1.8rem; font-weight: var(--font-medium); margin-bottom: 1.2rem; }

/* Breadcrumb */
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; font-size: 1.25rem; margin-bottom: 2rem; padding: 0; color: rgb(var(--color-foreground2)); }
.breadcrumb-item a:hover { color: rgb(var(--color-accent)); }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; padding-inline-end: .6rem; color: rgb(var(--color-foreground2)); }

/* Buttons */
.btn { font-size: 1.3rem; border-radius: var(--radius-button); padding: 1rem 2rem; font-weight: var(--font-medium); }
.btn-primary { background: rgb(var(--color-base-text)); border-color: rgb(var(--color-base-text)); color: rgb(var(--color-base-background)); text-transform: uppercase; letter-spacing: .03em; }
.btn-primary:hover { background: rgb(var(--color-accent)); border-color: rgb(var(--color-accent)); color: #fff; }
.btn-light, .btn-secondary, .btn-default { background: transparent; border: 1px solid rgb(var(--color-line-border)); color: rgb(var(--color-base-text)); }
.btn-light:hover { border-color: rgb(var(--color-base-text)); background: transparent; }
.btn-danger { background: rgb(var(--color-pr-sale-price)); border-color: rgb(var(--color-pr-sale-price)); }

/* Forms */
.form-control, .form-select { border: 1px solid rgb(var(--color-line-border)); border-radius: var(--radius-input); padding: 1rem 1.4rem; font-size: 1.4rem; color: rgb(var(--color-base-text)); background: rgb(var(--color-base-background)); }
.form-control:focus, .form-select:focus { border-color: rgb(var(--color-base-text)); box-shadow: none; outline: none; }
.form-label, .col-form-label { font-size: 1.3rem; font-weight: var(--font-medium); }
.input-group-text { border: 1px solid rgb(var(--color-line-border)); background: rgb(var(--color-background2)); font-size: 1.3rem; }

/* Cards / panels */
.card { border: 1px solid rgb(var(--color-line-border)); border-radius: var(--radius); }
.card-header { background: rgb(var(--color-background2)); font-weight: var(--font-semibold); font-size: 1.5rem; border-bottom: 1px solid rgb(var(--color-line-border)); }

/* Tables */
#content .table { font-size: 1.35rem; }
#content .table > :not(caption) > * > * { padding: 1.1rem 1.2rem; }
#content .table thead th { background: rgb(var(--color-background2)); font-weight: var(--font-semibold); border-bottom: 2px solid rgb(var(--color-line-border)); }

/* List group (account menu etc.) */
.list-group-item { border-color: rgb(var(--color-line-border)); font-size: 1.35rem; padding: 1rem 1.4rem; }
.list-group-item.active { background: rgb(var(--color-base-text)); border-color: rgb(var(--color-base-text)); }
.list-group-item-action:hover { background: rgb(var(--color-background2)); }

/* Alerts */
.alert { border-radius: var(--radius-2xs); font-size: 1.35rem; border: 1px solid transparent; }

/* Pagination (bootstrap) */
.pagination { gap: .5rem; }
.page-link { border: 1px solid rgb(var(--color-line-border)); color: rgb(var(--color-base-text)); border-radius: var(--radius-2xs); min-width: 3.6rem; text-align: center; }
.page-item.active .page-link { background: rgb(var(--color-base-text)); border-color: rgb(var(--color-base-text)); }

/* Nav tabs (account etc.) */
.nav-tabs { border-bottom: 1px solid rgb(var(--color-line-border)); }
.nav-tabs .nav-link { font-size: 1.4rem; color: rgb(var(--color-foreground2)); border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: rgb(var(--color-base-text)); border-bottom-color: rgb(var(--color-base-text)); background: none; }

/* Generic page wrapper for custom simple pages */
.kalles-page { padding-block: 4rem 6rem; }
.kalles-page__title { font-family: var(--font-heading-family); font-weight: var(--font-normal); font-size: 3rem; text-align: center; margin-bottom: 2.5rem; }
.kalles-page__content { font-size: 1.45rem; line-height: 1.9; color: rgb(var(--color-base-text)); }
.kalles-page__content h2, .kalles-page__content h3 { margin-top: 2rem; }

/* 404 */
.kalles-404 { text-align: center; padding: 8rem 2rem; }
.kalles-404__code { font-family: var(--font-heading-family); font-size: 10rem; line-height: 1; font-weight: var(--font-bold); color: rgb(var(--color-line-border)); }
.kalles-404 h1 { font-size: 2.4rem; margin: 1rem 0; }
.kalles-404 p { color: rgb(var(--color-foreground2)); font-size: 1.5rem; margin-bottom: 2.5rem; }

/* ============================ ORDER SUCCESS / THANK YOU ============================ */
.kalles-success { padding: 2rem 0 5rem; }
.kalles-success__crumbs { font-size: 1.3rem; margin-bottom: 2rem; }
.kalles-success__card {
  max-width: 720px; margin: 0 auto; text-align: center;
  background: rgb(var(--color-base-background));
  border: 1px solid rgb(var(--color-line-border));
  border-radius: var(--radius-product-card, 14px);
  padding: 4.5rem 3rem; box-shadow: 0 12px 40px rgba(0,0,0,.06);
}
.kalles-success__check { display: flex; justify-content: center; margin-bottom: 1.8rem; }
.kalles-success__check svg circle { stroke: #22c55e; stroke-width: 2; }
.kalles-success__check svg path { stroke: #22c55e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48; animation: kalles-check .5s .2s ease forwards; }
@keyframes kalles-check { to { stroke-dashoffset: 0; } }
.kalles-success__title { font-family: var(--font-heading-family); font-size: 3rem; margin: 0 0 .6rem; }
.kalles-success__lead { font-size: 1.6rem; color: rgb(var(--color-foreground2)); margin: 0 0 2.2rem; }
.kalles-success__order {
  display: inline-flex; flex-direction: column; gap: .3rem; align-items: center;
  background: rgb(var(--color-background2, 246 246 246)); border-radius: 12px;
  padding: 1.2rem 2.4rem; margin-bottom: 1.8rem;
}
.kalles-success__order-label { font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--color-foreground2)); }
.kalles-success__order-no { font-family: var(--font-heading-family); font-size: 2.4rem; font-weight: var(--font-bold); color: rgb(var(--tel-blue, 43 108 176)); }
.kalles-success__hint { font-size: 1.4rem; color: rgb(var(--color-foreground2)); margin: 0 0 2rem; }
.kalles-success__hint i { color: rgb(var(--tel-blue, 43 108 176)); margin-right: .4rem; }
.kalles-success__message { font-size: 1.45rem; line-height: 1.7; color: rgb(var(--color-base-text)); text-align: left;
  border-top: 1px solid rgb(var(--color-line-border)); padding-top: 2rem; margin-bottom: 2.5rem; }
.kalles-success__message p { margin: 0 0 1rem; }
.kalles-success__message a { color: rgb(var(--tel-blue, 43 108 176)); text-decoration: underline; }
.kalles-success__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.kalles-success__actions .kalles-btn { min-width: 200px; }
.kalles-btn--outline { background: transparent; border: 1px solid rgb(var(--color-line-border)); color: rgb(var(--color-base-text)); }
.kalles-btn--outline:hover { border-color: rgb(var(--tel-blue, 43 108 176)); color: rgb(var(--tel-blue, 43 108 176)); }
@media (max-width: 600px) {
  .kalles-success__card { padding: 3rem 1.5rem; }
  .kalles-success__title { font-size: 2.3rem; }
  .kalles-success__actions .kalles-btn { width: 100%; }
}