/* BigCommerce additions/fixes for the Kalles content area (blog, article, pages, contact, auth, account). */

/* ---------- Blog / article ---------- */
/* BC post bodies are rich HTML; keep embedded media inside the column. */
.t4s-article-body img,
.t4s-article-body iframe,
.t4s-article-body video { max-width: 100%; height: auto; }
.t4s-article-image img { display: block; width: 100%; height: auto; }
.t4s-article-tags-list a { color: var(--secondary-color); }

/* ---------- Pages ---------- */
/* Live page bodies wrap each <table> in (pasted) <div>s, so the table's 35px bottom margin does not collapse with a following
   <hr>'s 15px top margin; BC bodies have bare tables -> restore the same 50px gap. */
.t4s-main-page.t4s-rte table + hr { margin-top: 50px; }

/* ---------- Contact (BC fields wrapped in <p class="form-field">) ---------- */
.t4s-contact-form .form-field { margin-bottom: 20px; }
.t4s-contact-form .form-field label { display: block; margin-bottom: 5px; color: var(--secondary-color); }
.t4s-contact-form .form-field .required { color: var(--t4s-error-color); }
.t4s-contact-form .g-recaptcha { margin-bottom: 20px; }
.t4s-contact-form .t4s-contact-info i { margin-right: 6px; }
.t4s-contact-form .t4s-form-message--success {
    border: 1px solid var(--t4s-success-color);
    background-color: #f8fff8;
    padding: 15px 20px;
    margin: 20px 0 27.5px;
}
.t4s-contact-form .t4s-form-message--success .t4s-form-message__title { font-size: 14px; margin: 0; }

/* ---------- Validation messages (Cornerstone nod: .form-field--error + span.form-inlineMessage) ---------- */
.t4s-customer .form-inlineMessage,
.t4s-contact-form .form-inlineMessage {
    display: block;
    color: var(--t4s-error-color);
    font-size: 13px;
    line-height: 1.3;
    margin-top: 5px;
    text-align: left;
}
.t4s-customer .form-field--error input,
.t4s-customer .form-field--error select,
.t4s-contact-form .form-field--error input,
.t4s-contact-form .form-field--error textarea { border-color: var(--t4s-error-color) !important; }
/* Floating labels stay vertically centred on the input even when an inline error is appended below it. */
.t4s-customer .t4s_field.form-field label { height: 44px; }
.t4s-customer .t4s_field .required { color: var(--t4s-error-color); margin-left: 3px; }
.t4s-customer .form__message .alertBox-icon { display: none; }
.t4s-customer input.t4s_btn_submmit { cursor: pointer; border: 0; height: auto; min-height: 0; line-height: 1.2; display: block; }
.t4s-customer.is--register, .t4s-customer.is--login, .t4s-customer.is--reset-password { width: 100%; }

/* ---------- Cornerstone dynamic form fields (create account, account settings, addresses, returns ...) ---------- */
.bc-customer-form .form-row { display: block; }
.bc-customer-form .form-field { margin-bottom: 20px; text-align: left; position: relative; }
.bc-customer-form .form-label {
    display: block;
    margin-bottom: 6px;
    color: var(--secondary-color);
    font-size: 14px;
    text-align: left;
}
.bc-customer-form .form-label small { color: var(--t4s-error-color); font-size: 12px; margin-left: 4px; }
.bc-customer-form .form-input,
.bc-customer-form .form-select,
.bc-customer-form select,
.bc-customer-form textarea.form-input {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background: #fff;
    line-height: normal;
    height: auto;
    color: var(--secondary-color);
    transition: border-color .1s ease-in-out;
}
.bc-customer-form .form-input:focus,
.bc-customer-form .form-select:focus { border-color: rgba(var(--text-color-rgb), .8); outline: 0; }
.bc-customer-form .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23222' stroke-width='1.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
    padding-right: 34px;
    cursor: pointer;
}
.bc-customer-form .form-checkbox,
.bc-customer-form .form-radio { margin-right: 8px; }
.bc-customer-form .form-fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.bc-customer-form .form-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bc-customer-form .form-actions a { text-decoration: underline; }

/* Cornerstone buttons inside customer pages -> Kalles dark buttons */
.t4s-customer .button,
.t4s-customer-account .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 25px;
    border: 1px solid var(--t4s-dark-color);
    background-color: var(--t4s-light-color);
    color: var(--t4s-dark-color);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    transition: color .25s, background-color .25s;
}
.t4s-customer .button--primary,
.t4s-customer-account .button--primary { background-color: var(--t4s-dark-color); color: var(--t4s-light-color); }
.t4s-customer .button:hover { background-color: #000; border-color: #000; color: #fff; }
.t4s-customer .button--small { min-height: 32px; padding: 0 15px; font-size: 12px; }

/* ---------- Account layout ---------- */
.t4s-customer-account { margin-top: 0; }
.t4s-account-nav a { color: var(--secondary-color); }
.t4s-account-content .page-heading,
.t4s-account-content .account-heading { font-size: 18px; text-transform: none; margin: 0 0 20px; }
.t4s-account-content .account--fixed,
.t4s-account-content .account { max-width: none; }
.t4s-account-content .account-list { list-style: none; padding: 0; margin: 0 0 30px; text-align: left; }
.t4s-account-content .account-listItem { border-bottom: 1px solid var(--border-color); padding: 20px 0; }
.t4s-account-content .account-listItem:first-child { border-top: 1px solid var(--border-color); }
.t4s-account-content .account-product { display: flex; gap: 20px; align-items: flex-start; }
.t4s-account-content .account-product-figure { flex: 0 0 90px; max-width: 90px; }
.t4s-account-content .account-product-figure img { width: 100%; height: auto; }
.t4s-account-content .account-product-body { flex: 1 1 auto; min-width: 0; }
.t4s-account-content .account-product-title { font-size: 15px; margin: 0 0 5px; }
.t4s-account-content .account-product-title a { color: var(--secondary-color); }
.t4s-account-content .account-product-details { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 10px; font-size: 13px; }
.t4s-account-content .account-product-detail-heading { font-size: 12px; text-transform: uppercase; margin: 0 0 3px; color: var(--secondary-color); }
.t4s-account-content .account-orderStatus { display: flex; justify-content: space-between; gap: 10px; }
.t4s-account-content .account-orderStatus-label {
    display: inline-block; font-size: 12px; text-transform: uppercase; background: #f5f5f5; padding: 3px 8px; margin: 0 0 8px; color: var(--secondary-color);
}
.t4s-account-content .definitionList { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0 0 20px; }
.t4s-account-content .definitionList-key { font-weight: 500; color: var(--secondary-color); }
.t4s-account-content .definitionList-value { margin: 0; }
.t4s-account-content .table,
.t4s-account-content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.t4s-account-content table th,
.t4s-account-content table td { border: 1px solid var(--border-color); padding: 10px 12px; text-align: left; }
.t4s-account-content table th { color: var(--secondary-color); font-weight: 500; }
.t4s-account-content .address { list-style: none; }
.t4s-account-content ul.addressList { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.t4s-account-content .panel { border: 1px solid var(--border-color); padding: 20px; margin-bottom: 20px; }
.t4s-account-content .panel-header { margin-bottom: 10px; }
.t4s-account-content .panel-title { font-size: 15px; margin: 0; }
.t4s-account-content .is-srOnly,
.t4s-customer .is-srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.t4s-account-content .productGrid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 30px; }

/* BC alert boxes inside content pages */
.t4s-account-content .alertBox,
.t4s-customer .alertBox {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--border-color);
    background: #fafafa;
    padding: 12px 16px;
    margin-bottom: 20px;
    text-align: left;
    color: var(--secondary-color);
}
.t4s-account-content .alertBox p { margin: 0; }
.t4s-account-content .alertBox--error { border-color: var(--t4s-error-color); background: #fff8f8; color: #651818; }
.t4s-account-content .alertBox--success { border-color: var(--t4s-success-color); background: #f8fff8; }
.t4s-account-content .alertBox .icon svg { width: 20px; height: 20px; fill: currentColor; }
.t4s-account-content .pagination-list { display: flex; list-style: none; padding: 0; gap: 15px; justify-content: center; }

@media (max-width: 767px) {
    .t4s-account-sidebar { margin-bottom: 30px; }
    .t4s-account-content .account-product-figure { flex-basis: 70px; max-width: 70px; }
}