/**
 * Claue V2 — Magento default button overrides
 *
 * Magento Blank inherits bright blue (#1979c3) for .action.primary, button.action,
 * #product-addtocart-button, .action.subscribe and several Customer/Newsletter widgets.
 * Claue's design language is a flat dark pill (#222529 background, #fff text, no
 * radius, 1px solid #222529) with a 10% lighten on hover.
 *
 * Loaded LAST in default.xml so it wins specificity / cascade fights with
 * Magento_Theme/blank's _buttons.less.
 */

/* ----- Primary CTA buttons (Add to Cart, Subscribe, Submit, Sign In, Create Account, Search) ----- */
button.action.primary,
.action.primary,
.cart.table-wrapper .actions-toolbar > .action,
.action-primary,
.checkout-cart-index .action.primary.checkout,
#product-addtocart-button,
.action.subscribe,
.action.submit.primary,
.contact-index-index .action.primary,
.action.tocart.primary,
button.action.tocart,
button[type="submit"].action.primary,
.block-search .action.search,
.action.subscribe.primary {
    background: #222529 !important;
    background-color: #222529 !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid #222529 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    padding: 12px 32px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

button.action.primary:hover,
.action.primary:hover,
.action-primary:hover,
#product-addtocart-button:hover,
.action.subscribe:hover,
.action.submit.primary:hover,
.action.tocart.primary:hover,
button.action.tocart:hover,
button[type="submit"].action.primary:hover {
    background: #3a3d42 !important;
    background-color: #3a3d42 !important;
    border-color: #3a3d42 !important;
    color: #fff !important;
}

button.action.primary:focus,
.action.primary:focus,
.action-primary:focus,
#product-addtocart-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(34, 37, 41, 0.25) !important;
}

button.action.primary:disabled,
.action.primary:disabled,
#product-addtocart-button:disabled {
    background: #999 !important;
    background-color: #999 !important;
    border-color: #999 !important;
    color: #fff !important;
    cursor: not-allowed;
}

/* ----- Secondary buttons (Wish List, Compare, Continue Shopping) ----- */
.action.secondary,
.action.towishlist,
.action.tocompare,
button.action.secondary,
.product-info-main .action.towishlist,
.product-info-main .action.tocompare {
    background: transparent !important;
    background-color: transparent !important;
    color: #222529 !important;
    border: 1px solid #222529 !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.action.secondary:hover,
.action.towishlist:hover,
.action.tocompare:hover,
button.action.secondary:hover {
    background: #222529 !important;
    background-color: #222529 !important;
    color: #fff !important;
}

/* ----- Magento Customer login/register sign-in row uses .action.primary too ----- */
.form-create-account .action.primary,
.customer-account-create .action.primary,
.customer-account-login .action.primary {
    background: #222529 !important;
    color: #fff !important;
    border: 1px solid #222529 !important;
    border-radius: 0 !important;
}

/* ----- Anchor styled as button (.action.primary on <a>) ----- */
a.action.primary,
a.action-primary {
    background: #222529 !important;
    color: #fff !important;
    border: 1px solid #222529 !important;
    border-radius: 0 !important;
    text-decoration: none;
}

a.action.primary:hover,
a.action-primary:hover {
    background: #3a3d42 !important;
    border-color: #3a3d42 !important;
    color: #fff !important;
}

/* ============================================================
 * Iter24: Layout fixes for login/register/contact (centered or two-col)
 * ============================================================ */

/* Register page: full-width container, centered card.
 * Magento .login-container default flex would otherwise right-align it. */
.customer-account-create .login-container,
.customer-account-create .form-create-account {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: 32px;
    padding: 40px 20px;
}

.customer-account-create .form-create-account {
    flex: 1 1 480px;
    max-width: 520px;
    width: 100%;
    background: #fff;
    border: 1px solid #e7e7e7;
    padding: 32px;
}

.customer-account-create .form-create-account .legend {
    border: none;
    margin-bottom: 24px;
    padding-bottom: 0;
    text-align: center;
}

/* Contact page: 2-column (form left, info right) */
.contact-index-index .columns .column.main {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 768px) {
    .contact-index-index .columns .column.main {
        grid-template-columns: 1fr;
    }
}

.cl-contact-info {
    background: #f7f6f4;
    padding: 32px;
    border: 1px solid #ece8e1;
}

.cl-contact-info h4 {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 18px;
    color: #1a1c1f;
}

.cl-contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}

.cl-contact-info__icon {
    flex-shrink: 0;
    width: 24px;
    color: #222529;
    font-size: 18px;
}

/* 404 page hero — exact clone of claue.arrowtheme.com no-route page */
.cl-404 {
    text-align: center;
    padding: 80px 20px 120px;
}

.cl-404__number {
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    color: #222222;
    margin: 0 0 5px;
    letter-spacing: 8px;
    font-family: 'Poppins', sans-serif;
}

.cl-404__title {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #222222;
    margin: 0 0 15px;
}

.cl-404__back {
    font-size: 14px;
    color: #696969;
    margin: 0 0 15px;
}

.cl-404__back-link {
    font-size: 14px;
    color: #222222;
    font-weight: 700;
    text-decoration: underline;
    margin-left: 4px;
    transition: color 0.2s ease;
}

.cl-404__back-link:hover {
    color: #000000;
}

@media (max-width: 600px) {
    .cl-404__number {
        font-size: 64px;
    }
}