/**
 * EcommPaaS Fastest Theme — Magento Blank Theme Overrides
 *
 * Overrides Magento/blank default styles (styles-m.css, styles-l.css)
 * to ensure Fastest theme CSS takes precedence.
 *
 * This file MUST load AFTER styles-m.css and styles-l.css.
 */

/* ===================================================================
   1. Reset Magento blank header defaults
   =================================================================== */

/* Remove blank theme header styling that conflicts with our 3-row header */
.page-header {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.page-header .header.content {
    padding: 0;
}

/* Override blank panel styling */
.header.panel {
    display: none;
}

/* Override blank nav */
.nav-sections {
    display: none;
}

/* Issue #12: Hamburger menu icon — hidden on desktop, show on mobile only */
.nav-toggle {
    display: none;
}

.fst-nav__mobile-toggle {
    display: none;
}

/* ===================================================================
   2. Reset Magento blank footer defaults
   =================================================================== */

.page-footer {
    background: none;
    margin: 0;
    padding: 0;
}

.footer.content {
    border: none;
    margin: 0;
    padding: 0;
}

/* ===================================================================
   3. Override Magento blank page structure
   =================================================================== */

.page-wrapper {
    overflow: hidden;
}

.columns {
    padding: 0;
}

.column.main {
    padding-bottom: 0;
}

/* Issue #21: Breadcrumbs — #f5f5f5 bg, 12px font, separator ">" */
.breadcrumbs {
    background: #f5f5f5;
    padding: 10px 0;
    margin: 0;
    border-bottom: 1px solid var(--fst-border);
}

.breadcrumbs .items {
    max-width: var(--fst-container);
    margin: 0 auto;
    padding: 0 var(--fst-gutter);
    font-size: 12px;
}

.breadcrumbs .item {
    color: var(--fst-text-light);
}

.breadcrumbs .item:not(:last-child)::after {
    content: '>';
    margin: 0 8px;
    color: var(--fst-text-light);
    font-size: 11px;
}

.breadcrumbs a {
    color: var(--fst-text);
}

.breadcrumbs a:hover {
    color: var(--fst-primary);
}

/* ===================================================================
   4. Override Magento blank form styles
   =================================================================== */

/* Issue #22: Form inputs — 40px height, 1px #ddd border, no radius */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
textarea {
    height: 40px;
    border: 1px solid #dddddd;
    border-radius: 0;
    padding: 8px 12px;
    font-size: var(--fst-font-size);
    font-family: var(--fst-font);
    color: var(--fst-text-dark);
    background: var(--fst-bg);
    transition: border-color var(--fst-transition-fast);
}

textarea {
    height: auto;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    border-color: var(--fst-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(247, 84, 84, 0.1);
}

/* ===================================================================
   5. Override Magento blank button styles
   =================================================================== */

/* Issue #23: Primary buttons everywhere — solid #f75454 with !important to override Magento defaults */
.action.primary,
button.action.primary,
.product-info-main .box-tocart .action.tocart,
#product-addtocart-button,
.tocart.action.primary {
    background: #f75454 !important;
    background-color: #f75454 !important;
    border: none !important;
    color: #ffffff !important;
    font-family: var(--fst-font);
    font-weight: 600 !important;
    text-transform: uppercase;
    padding: 12px 30px;
    font-size: 14px;
    letter-spacing: 0.5px;
    border-radius: 0 !important;
    transition: background 0.2s ease;
    opacity: 1 !important;
}

.action.primary:hover,
button.action.primary:hover,
.product-info-main .box-tocart .action.tocart:hover,
#product-addtocart-button:hover {
    background: #e04343 !important;
    background-color: #e04343 !important;
    border: none !important;
    color: #ffffff !important;
}

.action.primary:focus,
button.action.primary:focus {
    background: #e04343 !important;
    box-shadow: none;
    color: #ffffff !important;
}

/* PDP title fix — smaller, not the huge Magento default */
.product-info-main .page-title-wrapper .page-title {
    font-size: 24px !important;
    font-weight: 600;
    color: #222222;
    margin-bottom: 10px;
}

/* PDP Wish List / Compare — style as text links with icons */
.product-info-main .product-addto-links .action.towishlist,
.product-info-main .product-addto-links .action.tocompare {
    border: none !important;
    background: none !important;
    color: #666 !important;
    padding: 5px 15px 5px 0;
    font-size: 13px;
    text-transform: none;
    font-weight: 400;
}

.product-info-main .product-addto-links .action.towishlist:hover,
.product-info-main .product-addto-links .action.tocompare:hover {
    color: #f75454 !important;
    background: none !important;
}

/* ===================================================================
   6. Override Magento blank message styles
   =================================================================== */

.message.success {
    background: #e8f5e9;
    border-color: var(--fst-success);
    color: #2e7d32;
}

.message.error {
    background: #ffebee;
    border-color: var(--fst-danger);
    color: #c62828;
}

.message.warning,
.message.notice {
    background: #fff3e0;
    border-color: var(--fst-warning);
    color: #e65100;
}

/* ===================================================================
   7. Override Magento blank product list styles
   =================================================================== */

.products-grid .product-item {
    margin-bottom: var(--fst-gutter);
}

/* Issue #14: Product cards — border, center align, no padding */
.product-item .product-item-info {
    border: 1px solid #eeeeee;
    transition: all var(--fst-transition);
    text-align: center;
    padding: 0;
}

.product-item .product-item-info:hover {
    box-shadow: var(--fst-shadow-hover);
    border-color: transparent;
}

/* Issue #15: Product image area — padding 15px, overflow hidden */
.product-item .product-item-photo {
    display: block;
    padding: 15px;
    overflow: hidden;
}

.product-item .product-item-details {
    padding: 15px;
    border-top: 1px solid var(--fst-border-light);
}

/* Issue #16: Product name — 14px, #333, margin, weight 400 */
.product-item .product-item-name {
    margin: 10px 0 5px;
}

.product-item .product-item-name a {
    color: #333333;
    font-size: 14px;
    font-weight: 400;
}

.product-item .product-item-name a:hover {
    color: var(--fst-primary);
}

/* Issue #17: Price — 16px, bold, primary color */
.product-item .price-box .price {
    color: #f75454;
    font-size: 16px;
    font-weight: 700;
}

.product-item .old-price .price {
    color: var(--fst-text-light);
    font-size: var(--fst-font-size-sm);
}

.product-item .special-price .price {
    color: #f75454;
}

/* Issue #18: Star ratings — 12px, gold filled, gray empty */
.product-item .rating-summary .rating-result > span::before {
    color: #ffc107;
    font-size: 12px;
}

.product-item .rating-summary .rating-result::before {
    color: #e0e0e0;
    font-size: 12px;
}

/* Issue #19: ADD TO CART — full width, primary bg, hidden until hover */
.product-item .product-item-actions {
    margin: 10px 0 0;
}

.product-item .action.tocart.primary {
    width: 100%;
    background: #f75454;
    color: #ffffff;
    padding: 8px 0;
    font-size: var(--fst-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    opacity: 0;
    transition: opacity var(--fst-transition-fast), background var(--fst-transition-fast);
}

.product-item .product-item-info:hover .action.tocart.primary {
    opacity: 1;
}

.product-item .action.tocart.primary:hover {
    background: var(--fst-primary-dark);
}

/* ===================================================================
   8. Override Magento blank sidebar styles
   =================================================================== */

/* Issue #1: SHOP BY title — bold uppercase with bottom border accent */
.sidebar .block-title {
    font-size: 14px;
    font-weight: 700;
    color: #222222;
    padding: 12px 0;
    border-bottom: 2px solid var(--fst-primary);
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* Issue #2: Filter sections accordion-style titles */
.filter-options-title {
    font-weight: 600;
    color: var(--fst-heading);
    font-size: var(--fst-font-size);
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
    position: relative;
}

/* Arrow indicator on right side */
.filter-options-title::after {
    content: '\f078';
    font-family: 'FontAwesome';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--fst-text-light);
    transition: transform var(--fst-transition-fast);
}

.filter-options-title.active::after {
    transform: translateY(-50%) rotate(180deg);
}

.filter-options-content {
    padding: 10px 0;
}

.filter-options-content .item {
    padding: 5px 0;
}

.filter-options-content .item a {
    color: #666666;
    font-size: 13px;
}

.filter-options-content .item a:hover {
    color: var(--fst-primary);
}

/* Count badge in parentheses */
.filter-options-content .item .count {
    color: #999999;
}

/* Issue #3: Product grid items need proper borders */
.products-grid .product-item {
    margin-bottom: 20px;
}

.products-grid .product-item-info {
    border: 1px solid #eeeeee;
}

/* ===================================================================
   9. Override Magento blank toolbar styles
   =================================================================== */

/* Issue #4: Toolbar sort/view mode styling */
.toolbar-products {
    border-bottom: 1px solid var(--fst-border);
    padding: 10px 0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toolbar-products .modes-mode {
    border: 1px solid var(--fst-border);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fst-bg);
    color: var(--fst-text-light);
    transition: all var(--fst-transition-fast);
}

.toolbar-products .modes-mode.active,
.toolbar-products .modes-mode:hover {
    border-color: var(--fst-primary);
    color: var(--fst-primary);
}

.toolbar-products .toolbar-sorter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-products .toolbar-sorter .sorter-label {
    font-size: var(--fst-font-size-sm);
    color: var(--fst-text);
}

.toolbar-products .toolbar-sorter select {
    height: 34px;
    border: 1px solid var(--fst-border);
    padding: 0 10px;
    font-size: var(--fst-font-size-sm);
}

.toolbar-products .toolbar-amount {
    font-size: var(--fst-font-size-sm);
    color: var(--fst-text-light);
}

.toolbar-products .limiter {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fst-font-size-sm);
}

.toolbar-products .limiter select {
    height: 34px;
    border: 1px solid var(--fst-border);
    padding: 0 8px;
}

/* ===================================================================
   10. Override Magento blank PDP styles
   =================================================================== */

/* Issue #7: Product gallery 50/50 layout */
.catalog-product-view .product.media {
    float: left;
    width: 50%;
    padding-right: 20px;
}

.catalog-product-view .product-info-main {
    float: left;
    width: 50%;
    padding-left: 20px;
}

.catalog-product-view .product.info.detailed {
    clear: both;
    float: none;
    width: 100%;
    margin-top: 40px;
}

/* Issue #5: Product title — 24px, not huge default */
.product-info-main .page-title-wrapper .page-title {
    font-size: 24px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 10px;
}

/* Issue #11: Price — 24px, bold, primary color */
.product-info-main .product-info-price .price {
    font-size: 24px;
    font-weight: 700;
    color: #f75454;
}

.product-info-main .product-info-price .old-price .price {
    font-size: var(--fst-font-size-lg);
    color: var(--fst-text-light);
}

.product-info-main .product.attribute.overview {
    line-height: 1.8;
    color: var(--fst-text);
}

/* Qty control on PDP */
.product-info-main .field.qty {
    margin-bottom: 20px;
}

.product-info-main .input-text.qty {
    width: 50px;
    text-align: center;
    border: 1px solid var(--fst-border);
}

/* Issue #8: ADD TO CART button — solid #f75454, white text */
.product-info-main .action.tocart.primary {
    background: #f75454;
    color: #ffffff;
    font-weight: 600;
    padding: 12px 30px;
    font-size: var(--fst-font-size);
    text-transform: uppercase;
    border: none;
    border-radius: 0;
}

.product-info-main .action.tocart.primary:hover {
    background: var(--fst-primary-dark);
    color: #ffffff;
}

/* Issue #9: Wish List and Compare — icon links, not bordered buttons */
.product-info-main .product-addto-links .action.towishlist,
.product-info-main .product-addto-links .action.tocompare {
    border: none;
    background: none;
    padding: 5px 10px;
    color: var(--fst-text);
    font-size: var(--fst-font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color var(--fst-transition-fast);
}

.product-info-main .product-addto-links .action.towishlist:hover,
.product-info-main .product-addto-links .action.tocompare:hover {
    color: var(--fst-primary);
    background: none;
    border: none;
}

.product-info-main .product-addto-links {
    margin-top: 15px;
    display: flex;
    gap: 15px;
}

/* Issue #10: Product tabs — proper tab styling below product info */
.product.data.items {
    margin-top: 30px;
}

.product.data.items > .item.title {
    display: inline-block;
}

.product.data.items > .item.title > .switch {
    font-size: var(--fst-font-size);
    font-weight: 600;
    color: var(--fst-text);
    border: 1px solid var(--fst-border);
    border-bottom: none;
    padding: 12px 20px;
    text-transform: uppercase;
    background: var(--fst-bg-light);
    display: block;
}

.product.data.items > .item.title.active > .switch,
.product.data.items > .item.title > .switch:hover {
    color: var(--fst-primary);
    background: var(--fst-bg);
    border-bottom-color: var(--fst-bg);
}

.product.data.items > .item.content {
    padding: 25px 0;
    border: none;
    border-top: 1px solid var(--fst-border);
}

/* Issue #6: Breadcrumbs on PDP — show with light gray bg */
.catalog-product-view .breadcrumbs {
    display: block;
    background: #f5f5f5;
    padding: 10px 0;
    margin-bottom: 20px;
}

/* ===================================================================
   11. Override Magento blank cart styles
   =================================================================== */

.cart-summary {
    background: var(--fst-bg-light);
    padding: 20px;
}

.cart-summary .checkout-methods-items .action.primary.checkout {
    width: 100%;
    padding: 14px;
    font-size: var(--fst-font-size);
}

/* ===================================================================
   12. Override Magento blank minicart styles
   =================================================================== */

.minicart-wrapper .action.showcart .counter.qty {
    background: var(--fst-primary);
    color: #ffffff;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}

/* ===================================================================
   13. Override Magento blank rating stars
   =================================================================== */

.rating-summary .rating-result > span::before {
    color: var(--fst-star);
}

/* ===================================================================
   14. Homepage fullwidth — remove default margins
   =================================================================== */

.cms-home .columns {
    padding: 0;
}

.cms-home .column.main {
    padding: 0;
}

.cms-home .page-main {
    max-width: 100%;
    padding: 0;
}

/* ===================================================================
   15. Product Card Hover Effects (Fastest signature interaction)
   =================================================================== */

.product-item .product-item-info {
    position: relative;
    overflow: hidden;
}

/* Action buttons appear on hover (wishlist, compare, quickview) */
.product-item .product-item-info .product-item-actions {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    padding: 10px;
    text-align: center;
    transition: bottom 0.3s ease;
    z-index: 5;
    border-top: 1px solid var(--fst-border-light);
}

.product-item .product-item-info:hover .product-item-actions {
    bottom: 0;
}

/* Wishlist/compare icons on right side */
.product-item .product-item-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.product-item .actions-secondary {
    display: flex;
    gap: 5px;
}

.product-item .actions-secondary .action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fst-bg);
    border: 1px solid var(--fst-border);
    color: var(--fst-text);
    border-radius: 0;
    padding: 0;
    transition: all 0.2s ease;
}

.product-item .actions-secondary .action:hover {
    background: var(--fst-primary);
    border-color: var(--fst-primary);
    color: #ffffff;
}

.product-item .actions-secondary .action span {
    font-size: 0;
}

.product-item .actions-secondary .action::before {
    font-family: 'FontAwesome';
    font-size: 14px;
}

.product-item .actions-secondary .action.towishlist::before {
    content: '\f08a';
}

.product-item .actions-secondary .action.tocompare::before {
    content: '\f079';
}

/* Product image zoom on hover */
.product-item .product-image-photo {
    transition: transform 0.4s ease;
}

.product-item .product-item-info:hover .product-image-photo {
    transform: scale(1.05);
}

/* Product badges (NEW, SALE) */
.product-item .product-label {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
}

.product-item .product-label.new {
    background: var(--fst-new);
}

.product-item .product-label.sale {
    background: var(--fst-sale);
}

/* Color swatches in product grid */
.product-item .swatch-attribute .swatch-option {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    margin: 2px;
    border: 1px solid var(--fst-border);
    cursor: pointer;
}

.product-item .swatch-attribute .swatch-option:hover,
.product-item .swatch-attribute .swatch-option.selected {
    border-color: var(--fst-primary);
    outline: 1px solid var(--fst-primary);
    outline-offset: 1px;
}

/* ===================================================================
   16. Checkout Page Styling (2-step tabbed layout)
   =================================================================== */

.checkout-index-index .page-title-wrapper {
    display: none;
}

.checkout-container {
    max-width: var(--fst-container);
    margin: 0 auto;
    padding: 30px var(--fst-gutter);
}

/* Checkout steps */
.opc-wrapper {
    padding-right: 30px;
}

.opc-wrapper .step-title {
    font-size: var(--fst-h3);
    font-weight: 700;
    color: var(--fst-heading);
    border-bottom: 2px solid var(--fst-primary);
    padding-bottom: 12px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Shipping address form */
.checkout-shipping-address .field .label {
    font-weight: 600;
    color: var(--fst-text-dark);
    margin-bottom: 5px;
}

.checkout-shipping-address .field .input-text {
    border: 1px solid var(--fst-border);
    padding: 10px 12px;
    width: 100%;
}

/* Shipping methods */
.checkout-shipping-method .step-title {
    font-size: var(--fst-h4);
}

.table-checkout-shipping-method {
    width: 100%;
}

.table-checkout-shipping-method tbody td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--fst-border-light);
}

/* Payment methods */
.payment-method-title .label {
    font-weight: 600;
}

.payment-method._active .payment-method-content {
    padding: 15px 0;
}

/* Order summary sidebar */
.opc-block-summary {
    background: var(--fst-bg-light);
    padding: 25px;
}

.opc-block-summary .title {
    font-size: var(--fst-h4);
    font-weight: 700;
    border-bottom: 1px solid var(--fst-border);
    padding-bottom: 12px;
    margin-bottom: 15px;
}

.opc-block-summary .items-in-cart .product-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--fst-border-light);
}

.opc-block-summary .items-in-cart .product-item .product-image-container {
    width: 60px;
}

/* Place order button */
.checkout-payment-method .action.primary.checkout {
    width: 100%;
    padding: 14px;
    font-size: var(--fst-font-size-lg);
    background: var(--fst-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.checkout-payment-method .action.primary.checkout:hover {
    background: var(--fst-primary-dark);
}

/* Progress bar */
.opc-progress-bar-item {
    width: 50%;
}

.opc-progress-bar-item._active > span {
    color: var(--fst-primary);
}

.opc-progress-bar-item._active::before {
    background: var(--fst-primary);
}

.opc-progress-bar-item._complete::before {
    background: var(--fst-success);
}

/* ===================================================================
   17. Cart Page with Items
   =================================================================== */

.cart.table-wrapper .cart.item {
    border-bottom: 1px solid var(--fst-border-light);
}

.cart.table-wrapper .col.item {
    padding: 15px 10px;
}

.cart.table-wrapper .product-item-photo {
    max-width: 80px;
}

.cart.table-wrapper .product-item-name a {
    color: var(--fst-text-dark);
    font-weight: 500;
}

.cart.table-wrapper .product-item-name a:hover {
    color: var(--fst-primary);
}

.cart.table-wrapper .input-text.qty {
    width: 50px;
    text-align: center;
    border: 1px solid var(--fst-border);
    padding: 6px;
}

.cart.table-wrapper .action-delete {
    color: var(--fst-text-light);
}

.cart.table-wrapper .action-delete:hover {
    color: var(--fst-danger);
}

.cart-totals .grand.totals .amount .price {
    font-size: var(--fst-h3);
    font-weight: 700;
    color: var(--fst-primary);
}

/* Coupon code */
.cart-discount .input-text {
    border: 1px solid var(--fst-border);
    padding: 10px 12px;
}

.cart-discount .action.apply.primary {
    background: var(--fst-bg-dark);
}

/* Continue shopping */
.action.continue {
    color: var(--fst-text);
    text-decoration: underline;
}

.action.continue:hover {
    color: var(--fst-primary);
}

/* ===================================================================
   18. Mobile Navigation (Hamburger Menu)
   =================================================================== */

@media (max-width: 768px) {
    /* Show mobile menu toggle */
    .fst-nav__mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: #ffffff;
        font-size: 22px;
        cursor: pointer;
        padding: 10px 15px;
        height: var(--fst-nav-height);
    }

    /* Hide desktop nav items on mobile */
    .fst-nav__menu {
        display: none;
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        background: var(--fst-bg);
        z-index: 999;
        flex-direction: column;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
        transition: left 0.3s ease;
        padding: 0;
        margin: 0;
    }

    .fst-nav__menu.fst-nav--open {
        display: flex;
        left: 0;
    }

    .fst-nav__item {
        height: auto;
        border-bottom: 1px solid var(--fst-border-light);
    }

    .fst-nav__link {
        color: var(--fst-text-dark);
        padding: 12px 20px;
        height: auto;
        font-size: var(--fst-font-size);
        text-transform: none;
        font-weight: 500;
    }

    .fst-nav__link:hover {
        background: var(--fst-bg-light);
        color: var(--fst-primary);
    }

    /* Mobile overlay */
    .fst-nav__overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }

    .fst-nav__overlay.fst-nav--open {
        display: block;
    }

    /* Mobile mega menu — collapse to accordion */
    .fst-megamenu {
        position: static;
        box-shadow: none;
        border-top: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 0;
        display: none;
    }

    .fst-megamenu__list a {
        padding: 8px 20px 8px 40px;
    }

    /* Mobile header adjustments */
    .fst-header-main .fst-container {
        flex-wrap: wrap;
    }

    .fst-header-actions {
        gap: 12px;
    }

    .fst-header-action__label,
    .fst-header-action__sublabel {
        display: none;
    }

    .fst-search {
        order: 3;
        flex-basis: 100%;
        max-width: 100%;
        margin-top: 10px;
    }

    .fst-search__category {
        display: none;
    }

    /* Mobile footer */
    .fst-footer-main .fst-container {
        flex-direction: column;
    }

    .fst-footer-col {
        margin-bottom: 20px;
    }

    .fst-footer-newsletter .fst-container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .fst-footer-newsletter__form {
        max-width: 100%;
    }

    .fst-footer-bottom .fst-container {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    /* Mobile hero */
    .fst-hero__content {
        max-width: 80%;
        padding: 0 20px;
    }

    .fst-hero__title {
        font-size: 22px;
    }

    .fst-hero__subtitle {
        font-size: 12px;
    }

    .fst-hero__desc {
        font-size: 13px;
        display: none;
    }

    .fst-hero__btn {
        padding: 8px 20px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .fst-header-action__icon {
        font-size: 18px;
    }

    .fst-header-actions {
        gap: 8px;
    }

    .fst-logo img {
        max-height: 30px;
    }
}

/* ===================================================================
   19. Search Results Page
   =================================================================== */

.catalogsearch-result-index .page-title-wrapper .page-title {
    font-size: var(--fst-h2);
    font-weight: 600;
    color: var(--fst-heading);
}

.catalogsearch-result-index .search.found {
    margin-bottom: 20px;
    font-size: var(--fst-font-size-sm);
    color: var(--fst-text-light);
}

/* ===================================================================
   20. CMS Pages (About, Contact, FAQ)
   =================================================================== */

.cms-page-view .page-title-wrapper .page-title {
    font-size: var(--fst-h1);
    font-weight: 700;
    color: var(--fst-heading);
    margin-bottom: 20px;
}

.cms-page-view .column.main {
    max-width: var(--fst-container);
    margin: 0 auto;
    padding: 30px var(--fst-gutter);
    line-height: 1.8;
}

/* Contact page */
.contact-index-index .column.main {
    max-width: var(--fst-container);
    margin: 0 auto;
}

.contact-index-index .form.contact .field .label {
    font-weight: 600;
}

.contact-index-index .form.contact .action.submit.primary {
    min-width: 200px;
}

/* ===================================================================
   21. Customer Account Pages
   =================================================================== */

.account .page-title-wrapper .page-title {
    font-size: var(--fst-h2);
    font-weight: 600;
}

.account .sidebar-main .account-nav {
    background: var(--fst-bg-light);
    padding: 0;
}

.account .sidebar-main .account-nav .nav.item a {
    padding: 12px 20px;
    display: block;
    color: var(--fst-text);
    border-bottom: 1px solid var(--fst-border-light);
    font-size: var(--fst-font-size-sm);
}

.account .sidebar-main .account-nav .nav.item.current a,
.account .sidebar-main .account-nav .nav.item a:hover {
    background: var(--fst-primary);
    color: #ffffff;
}

.account .table-wrapper .data.table {
    width: 100%;
}

.account .table-wrapper .data.table thead th {
    background: var(--fst-bg-light);
    padding: 12px 15px;
    font-weight: 600;
    font-size: var(--fst-font-size-sm);
    text-transform: uppercase;
    color: var(--fst-heading);
    border-bottom: 2px solid var(--fst-primary);
}

.account .table-wrapper .data.table tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--fst-border-light);
    font-size: var(--fst-font-size-sm);
}

/* ===================================================================
   22. 404 Page
   =================================================================== */

.cms-noroute-index .column.main {
    text-align: center;
    padding: 60px 20px;
}

.cms-noroute-index .page-title {
    font-size: 48px;
    color: var(--fst-primary);
}

/* ===================================================================
   23. Wishlist Page
   =================================================================== */

.wishlist-index-index .products-grid .product-item {
    margin-bottom: 20px;
}

.wishlist-index-index .product-item .btn-remove {
    color: var(--fst-text-light);
}

.wishlist-index-index .product-item .btn-remove:hover {
    color: var(--fst-danger);
}

/* ===================================================================
   24. Compare Page
   =================================================================== */

.catalog-product-compare-index .table-wrapper .cell.product.info {
    padding: 15px;
}

.catalog-product-compare-index .cell.label {
    background: var(--fst-bg-light);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--fst-font-size-sm);
}

/* ===================================================================
   25. Pagination
   =================================================================== */

.pages .items {
    display: flex;
    gap: 5px;
}

.pages .item {
    width: 36px;
    height: 36px;
}

.pages .item a,
.pages .item strong {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--fst-border);
    color: var(--fst-text);
    font-size: var(--fst-font-size-sm);
    transition: all 0.2s ease;
}

.pages .item a:hover {
    border-color: var(--fst-primary);
    color: var(--fst-primary);
}

.pages .item.current strong {
    background: var(--fst-primary);
    border-color: var(--fst-primary);
    color: #ffffff;
}

.pages .action.next,
.pages .action.previous {
    border: 1px solid var(--fst-border);
}

.pages .action.next:hover,
.pages .action.previous:hover {
    border-color: var(--fst-primary);
    color: var(--fst-primary);
}

/* ===================================================================
   26. Loading / Spinner Override
   =================================================================== */

.loading-mask {
    background: rgba(255, 255, 255, 0.7);
}

.loader > img {
    width: 40px;
}

/* ===================================================================
   27. Swatches on PDP
   =================================================================== */

.swatch-attribute .swatch-option.text {
    min-width: 36px;
    height: 36px;
    padding: 5px 10px;
    border: 1px solid var(--fst-border);
    font-size: var(--fst-font-size-sm);
    text-align: center;
    line-height: 24px;
}

.swatch-attribute .swatch-option.text:hover,
.swatch-attribute .swatch-option.text.selected {
    border-color: var(--fst-primary);
    outline: 1px solid var(--fst-primary);
}

.swatch-attribute .swatch-option.color {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    border: 1px solid var(--fst-border);
}

.swatch-attribute .swatch-option.color:hover,
.swatch-attribute .swatch-option.color.selected {
    outline: 2px solid var(--fst-primary);
    outline-offset: 2px;
}

/* ===================================================================
   28. Review Form
   =================================================================== */

.review-add .review-form .action.submit.primary {
    background: var(--fst-primary);
    padding: 12px 30px;
}

.review-add .review-form .action.submit.primary:hover {
    background: var(--fst-primary-dark);
}

.review-list .review-item {
    border-bottom: 1px solid var(--fst-border-light);
    padding: 20px 0;
}

.review-list .review-title {
    font-weight: 600;
    color: var(--fst-heading);
    margin-bottom: 5px;
}

/* ===================================================================
   29. Related / Upsell / Cross-sell Products
   =================================================================== */

.block.related .block-title,
.block.upsell .block-title,
.block.crosssell .block-title {
    font-size: var(--fst-h3);
    font-weight: 700;
    color: var(--fst-heading);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.block.related .block-title strong::after,
.block.upsell .block-title strong::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--fst-primary);
    margin-top: 8px;
}

/* ===================================================================
   30. Issue #20: All page containers — max-width 1200px, centered
   =================================================================== */

.page-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.cms-home .page-main {
    max-width: 100%;
    padding: 0;
}

/* ===================================================================
   31. Print Styles
   =================================================================== */

@media print {
    .fst-topbar,
    .fst-promo-bar,
    .fst-nav,
    .fst-footer-newsletter,
    .fst-back-to-top,
    .fst-newsletter-popup {
        display: none !important;
    }
}