/* EvoStore skin for stock OpenCart 4 pages (checkout, account, forms, blog...) */
#wrapper > .container { max-width: 1240px; padding: 32px 20px 56px; }
#wrapper > .container h1, #wrapper > .container h2, #wrapper > .container h3 { color: #22292F; font-weight: 700; }
#wrapper > .container .breadcrumb { background: none; padding: 0; margin-bottom: 16px; font-size: 13px; }

/* buttons */
.btn-primary, .btn-primary:focus, .btn-primary:active {
  background-color: #0B72EB; border-color: #0B72EB; color: #fff;
  border-radius: 100px; padding: 12px 24px; font-size: 14px; box-shadow: none;
}
.btn-primary:hover { background-color: #095bbd; border-color: #095bbd; color: #fff; }
.btn-primary:disabled, .btn-primary.disabled { opacity: .5; }
.btn-light { background-color: #DBE1E5; border-color: #DBE1E5; color: #22292F; border-radius: 100px; padding: 12px 24px; font-size: 14px; }
.btn-light:hover { background-color: #cdd5da; border-color: #cdd5da; }
.btn-secondary, .btn-dark, .btn-outline-secondary { border-radius: 100px; }
.btn-danger { border-radius: 100px; }
.delete .btn-danger, .btn-danger.evo-remove { background: none; border: 0; padding: 0; }

/* fields */
.form-control, .form-select {
  border: 1px solid #ACB8C3; border-radius: 12px; padding: 12px 16px; font-size: 14px; color: #22292F; box-shadow: none;
}
.form-control:focus, .form-select:focus { border-color: #0B72EB; box-shadow: 0 0 0 3px rgba(11,114,235,.12); }
.input-group > .form-control, .input-group > .form-select { border-radius: 12px; }
.input-group > .btn { border-radius: 12px; }
.form-check-input:checked { background-color: #0B72EB; border-color: #0B72EB; }
label, .col-form-label, .form-label { font-size: 14px; color: #3e434a; }
fieldset legend, legend { font-size: 18px; font-weight: 700; color: #22292F; border-bottom: 1px solid #e6e6e6; }

/* cards, tables, tabs, alerts */
#wrapper > .container .border.rounded, .card:not(.card-body), .accordion-item { border-color: #e6e6e6 !important; border-radius: 14px !important; }
.accordion-button:not(.collapsed) { background: #f4f5f7; color: #22292F; box-shadow: none; }
.table-bordered > :not(caption) > * > * { border-color: #e6e6e6; }
.nav-tabs { border-bottom-color: #e6e6e6; }
.nav-tabs .nav-link { color: #3e434a; border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: #22292F; border-bottom-color: #0B72EB; background: none; }
.alert { border-radius: 12px; }
.pagination .page-link { border-radius: 8px; margin: 0 2px; color: #22292F; }
.pagination .page-item.active .page-link { background: #0B72EB; border-color: #0B72EB; color: #fff; }

/* Checkout (OC4 partials inside the EvoStore checkout layout) */
#checkout-page .form-container .row.mb-3 > label.col-form-label,
#checkout-page .form-container .row.mb-3 > [class*="col-sm-"] { flex: 0 0 100%; max-width: 100%; width: 100%; }
#checkout-page .form-container fieldset legend { font-size: 18px; font-weight: 700; }
#checkout-page .form-container .input-group .btn { margin-top: 0; }
#checkout-page #checkout-payment .btn, #checkout-page #checkout-payment button { width: 100%; }

/* Account area: the left menu is a direct flex child of .details-container (as the old store), not inside OC4's col-3 aside */
#content-wrapper .details-container > #column-right,
#content-wrapper .my-order-details > #column-right { display: contents !important; }

/* Cart: thestyles.css styles the FIRST table row as a header row (red name + bin icon); our rows are all products */
#content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr:nth-child(1) td:nth-child(2) p { color: inherit; display: block; }
#content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr:nth-child(1) td:nth-child(2) p:after { content: none; }
#content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr:nth-child(1) td { padding: 24px 12px; }

/* Cart (mobile): rows have 4 cells (image, details, qty, price+actions); old responsive.css rules assume 5 */
@media (max-width: 767px) {
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table { overflow: visible; }
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table,
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tbody { display: block; width: 100%; }
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr,
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr:nth-child(1) {
    display: grid; grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-areas: "img details details" ". price qty" ". . actions";
    gap: 8px 12px; align-items: start; padding: 16px; margin-bottom: 12px;
    border: 1px solid #DBE1E5; border-radius: 16px; position: relative;
  }
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr td,
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr:nth-child(1) td {
    width: auto; order: 0; padding: 0; border: none; display: block; min-width: 0; text-align: left; border-radius: 0;
  }
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr td:nth-child(1) { grid-area: img; }
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr td:nth-child(2) { grid-area: details; width: auto; overflow-wrap: anywhere; }
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr td:nth-child(3) { grid-area: qty; width: auto; }
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr td:nth-child(4) { display: contents; }
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr td:nth-child(4) .price { grid-area: price; padding: 0; justify-content: flex-start; text-align: left; }
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr td:nth-child(4) .action { grid-area: actions; position: static; display: flex; justify-content: flex-end; gap: 14px; padding: 0; }
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr td:nth-child(3) .qty-container { display: flex; align-items: center; justify-content: flex-end; text-align: right; }
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr td:nth-child(3) .qty-container input { font-size: 14px; width: 48px; }
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table table tr td:nth-child(3) .price-per-item p { text-align: center; white-space: nowrap; }
  #content-wrapper #cart-page .cart-section .cart-items-container .items-list-table .img-container img { max-height: 84px; }
  #content-wrapper #cart-page .cart-section .summary { width: 100%; margin: 0; }
}