/* Pages still rendered by default/ templates (Bootstrap 3) under the svet header and footer.
   Rules leave this file as their pages move into the svet theme. */
.s-legacy .s-main { padding-top: var(--s-5); }
.s-legacy .s-main > .container { width: auto; max-width: var(--wrap); padding-inline: var(--gutter); }
.s-legacy .s-main h1 { font-size: var(--fs-h2); }
.s-legacy .s-main h2 { font-size: var(--fs-h3); }
.s-legacy .breadcrumb { background: none; padding: 0; margin-bottom: var(--s-5); font-size: var(--fs-s); }
.s-legacy .btn { border-radius: var(--r-pill); }
.s-legacy .btn-primary { background: var(--ink); border-color: var(--ink); }
.s-legacy .btn-primary:hover, .s-legacy .btn-primary:focus { background: #3A3027; border-color: #3A3027; }
.s-legacy .product-thumb { border-color: var(--line); border-radius: var(--r-m); overflow: hidden; }
.s-legacy .product-thumb .image { background: #fff; }
/* Bootstrap underlines every a:hover; the svet shell has its own hover feedback */
.s-legacy :is(.s-header, .s-sheet, .s-footer) a:hover, .s-legacy :is(.s-header, .s-sheet, .s-footer) a:focus { text-decoration: none; }

/* ---- Content pages (account, information, contact, checkout) ---- */
.s-legacy #content { padding-bottom: var(--section); }
.s-legacy #content a:not(.btn, .accordion-toggle) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
@media (hover: hover) { .s-legacy #content a:not(.btn, .accordion-toggle):hover { color: var(--amber-ink); text-decoration-color: currentColor; } }
.s-legacy legend { margin-bottom: var(--s-3); padding: 0; border: 0; color: var(--ink); font: 400 var(--fs-h3)/1.2 var(--font-display); }
.s-legacy hr { border-color: var(--line); }

/* forms: 48px fields, 16px text (iOS zooms into smaller), amber-ink focus */
.s-legacy .form-control {
  height: 48px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-s); background: #fff;
  box-shadow: none; color: var(--ink); font: 400 var(--fs-m) var(--font-ui); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.s-legacy textarea.form-control { height: auto; min-height: 120px; padding: var(--s-3); }
.s-legacy .form-control:focus { border-color: var(--amber-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 25%, transparent); outline: 2px solid transparent; } /* high contrast drops shadows, keeps outlines */
@media (hover: hover) { .s-legacy .form-control:hover { border-color: rgb(34 28 21 / .3); } }
.s-legacy .control-label { color: var(--ink-2); font-size: var(--fs-s); font-weight: 500; }
.s-legacy .form-group.required .control-label::before { content: "* "; color: var(--error); } /* default/stylesheet.css, which drew the star, is not loaded */
.s-legacy .has-error .form-control { border-color: var(--error); }
.s-legacy :is(.text-danger, .has-error .help-block, .has-error .control-label) { color: var(--error); }
.s-legacy :is(.radio, .checkbox) label { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding-left: 0; }
.s-legacy input:is([type="radio"], [type="checkbox"]) { position: static; flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.s-legacy :is(.radio-inline, .checkbox-inline) { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding-left: 0; }
.s-legacy .form-group > a { display: inline-block; margin-top: var(--s-2); }
.s-legacy .input-group .form-control:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.s-legacy .input-group-btn:last-child > .btn { height: 48px; border-radius: 0 var(--r-s) var(--r-s) 0; }

/* buttons */
.s-legacy .btn { min-height: 44px; padding: 10px 22px; font: 500 var(--fs-s)/1.4 var(--font-ui); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.s-legacy .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.s-legacy .btn-default { border-color: var(--line); background: transparent; color: var(--ink); }
.s-legacy .btn-danger { border-color: var(--line); background: transparent; color: var(--error); }
@media (hover: hover) { .s-legacy :is(.btn-default, .btn-danger):hover { border-color: var(--ink); background: transparent; } }
/* "I agree to the terms" + checkbox + button share one line in .buttons: keep the text flowing */
.s-legacy .buttons input[type="checkbox"] { display: inline-block; margin: 0 var(--s-2); vertical-align: middle; }
@media (max-width: 767px) {
  .s-legacy .buttons :is(.pull-left, .pull-right) { float: none !important; margin-bottom: var(--s-2); text-align: left; }
  .s-legacy .buttons .btn { display: block; width: 100%; margin-top: var(--s-3); }
}

/* panels: account pages */
.s-legacy .panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); box-shadow: none; }
.s-legacy .panel-group .panel + .panel { margin-top: var(--s-3); }
.s-legacy .panel-default > .panel-heading { padding: 0; border: 0; background: var(--paper-2); color: var(--ink); }
.s-legacy .panel-title { display: flex; align-items: center; min-height: 56px; padding: 0 var(--s-4); font: 500 var(--fs-m)/1.3 var(--font-ui); }
.s-legacy .panel-body { padding: var(--s-5) var(--s-4); }
.s-legacy .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: var(--line); }
.s-legacy .well { padding: var(--s-5); border: 0; border-radius: var(--r-m); background: var(--paper-2); box-shadow: none; }

/* tables: order confirmation, order history */
.s-legacy .table :is(td, th) { padding: var(--s-3); border-color: var(--line); vertical-align: middle; }
.s-legacy .table-bordered { border-color: var(--line); }
.s-legacy .table thead :is(td, th) { background: var(--paper-2); font-size: var(--fs-s); font-weight: 500; }
.s-legacy .table-responsive { border: 0; }
.s-legacy .table-hover > tbody > tr:hover { background: var(--paper-2); }
.s-legacy .img-thumbnail { border-color: var(--line); border-radius: var(--r-s); background: var(--paper-2); }

/* alerts */
/* one block of text (OpenCart's messages carry links); Bootstrap's close button sits in the corner, not past it */
.s-legacy .alert { padding: var(--s-3) var(--s-4); border: 1px solid; border-radius: var(--r-s); color: var(--ink); }
.s-legacy .alert-success { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--paper)); }
.s-legacy :is(.alert-info, .alert-warning) { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--paper-2); }
.s-legacy .alert-danger { border-color: color-mix(in srgb, var(--error) 35%, transparent); background: color-mix(in srgb, var(--error) 7%, var(--paper)); }
.s-legacy .alert .close { position: static; float: right; margin-left: var(--s-3); opacity: .5; }

/* account menu (column right), pagination */
.s-legacy .list-group { overflow: hidden; border-radius: var(--r-s); }
.s-legacy .list-group-item { border-color: var(--line); background: transparent; color: var(--ink); }
.s-legacy .list-group-item:is(:first-child, :last-child) { border-radius: 0; }
@media (hover: hover) { .s-legacy a.list-group-item:hover { background: var(--paper-2); color: var(--ink); } }
.s-legacy .list-group-item.active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.s-legacy .pagination > li > :is(a, span) { border-color: var(--line); background: transparent; color: var(--ink); }
.s-legacy .pagination > .active > :is(a, span) { border-color: var(--ink); background: var(--ink); color: var(--paper); }