/*
 * Rivaaj Mahal (MISAL) - WooCommerce Compatibility Styles
 *
 * The theme's own checkout widget (the modal on the landing page) is the
 * primary way customers order, and is styled entirely in style.css.
 *
 * This file only touches WooCommerce's *default* pages — shop, single
 * product, cart, checkout, my-account — which WooCommerce renders using its
 * own templates and CSS classes whenever a site owner uses them alongside
 * (or instead of) the landing page checkout widget. It layers brand colours,
 * fonts and spacing on top of WooCommerce's own stylesheet without removing
 * or overriding its structural classes, so any plugin that hooks into those
 * default WooCommerce pages keeps working normally.
 */

.woocommerce-page-wrapper {
    padding: 40px 0 60px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #222;
}

.woocommerce-page-wrapper h1.entry-title,
.woocommerce-page-wrapper h1.page-title {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    margin-bottom: 24px;
}

/* Buttons */
.woocommerce-page-wrapper .button,
.woocommerce-page-wrapper button.button,
.woocommerce-page-wrapper input.button,
.woocommerce-page-wrapper #respond input#submit {
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 22px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    transition: background 0.2s ease;
}

.woocommerce-page-wrapper .button:hover,
.woocommerce-page-wrapper button.button:hover,
.woocommerce-page-wrapper input.button:hover {
    background: #c59b27;
    color: #fff;
}

.woocommerce-page-wrapper .button.alt {
    background: #c59b27;
}

.woocommerce-page-wrapper .button.alt:hover {
    background: #111;
}

/* Price colour to match the landing page accent */
.woocommerce-page-wrapper .price,
.woocommerce-page-wrapper .woocommerce-Price-amount {
    color: #111;
    font-weight: 700;
}

/* Forms (checkout / my account) */
.woocommerce-page-wrapper input.input-text,
.woocommerce-page-wrapper select,
.woocommerce-page-wrapper textarea {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
}

.woocommerce-page-wrapper input.input-text:focus,
.woocommerce-page-wrapper select:focus,
.woocommerce-page-wrapper textarea:focus {
    border-color: #c59b27;
    outline: none;
}

/* Notices */
.woocommerce-page-wrapper .woocommerce-message,
.woocommerce-page-wrapper .woocommerce-info {
    border-top-color: #c59b27;
}

.woocommerce-page-wrapper .woocommerce-message::before,
.woocommerce-page-wrapper .woocommerce-info::before {
    color: #c59b27;
}

.woocommerce-page-wrapper .woocommerce-error {
    border-top-color: #d9381e;
}

/* Cart / checkout tables */
.woocommerce-page-wrapper table.shop_table th {
    font-weight: 800;
    color: #111;
}

.woocommerce-page-wrapper .order-total .woocommerce-Price-amount {
    font-size: 18px;
}

@media (max-width: 600px) {
    .woocommerce-page-wrapper {
        padding: 24px 0 40px;
    }
}

/* ==========================================================
 * Additional mobile fixes for default WooCommerce pages
 * (shop, single product, cart, checkout, my-account)
 * ========================================================== */
@media (max-width: 768px) {
    /* Cart/checkout tables scroll horizontally instead of squashing
       columns or breaking the page width on small screens. */
    .woocommerce-page-wrapper table.shop_table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Prevent iOS Safari zoom-in on tap for WooCommerce form fields. */
    .woocommerce-page-wrapper input.input-text,
    .woocommerce-page-wrapper select,
    .woocommerce-page-wrapper textarea {
        font-size: 16px;
    }
}