/*
Theme Name: Stray kids Merch
Author: 
Description: Your description goes here
Version: 1.0
Template: astra

This is the child theme for Astra theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

/* ==========================================================================
   Stray Kids Merch - WooCommerce Global Styles
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #17120e;
  --ink-2: #221a14;
  --cream: #f6efe4;
  --paper: #fffdf8;
  --red: #e8402a;
  --red-dark: #bf2d1b;
  --gold: #f4b942;
  --line: rgba(23,18,14,.1);
  --line-light: rgba(255,255,255,.12);
  --shadow: 0 18px 50px -18px rgba(23,18,14,.35);
  --display: 'Anton', sans-serif;
  --body: 'Manrope', sans-serif;
}

/* Typography Overrides */
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3:not(.skzhq-title), 
.woocommerce h1, .woocommerce h2, .woocommerce h3:not(.skzhq-title) {
    font-family: var(--display) !important;
    text-transform: uppercase !important;
    letter-spacing: .01em !important;
    color: var(--ink) !important;
}

.woocommerce div.product .product_title {
    font-family: var(--body) !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--ink) !important;
    font-size: 2rem !important;
}

/* Buttons */
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button,
.woocommerce #respond input#submit {
    font-family: var(--body) !important;
    font-weight: 800 !important;
    font-size: .82rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    padding: 1rem 1.8rem !important;
    border-radius: 8px !important;
    transition: transform .25s, box-shadow .25s, background .25s !important;
    background-color: var(--red) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 12px 30px -10px rgba(232,64,42,.6) !important;
}

.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--red-dark) !important;
    transform: translateY(-3px) !important;
}

.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    background-color: var(--ink) !important;
    box-shadow: none !important;
}

.woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover, 
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
    background-color: #000 !important;
}

/* Inputs & Forms */
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.select2-container--default .select2-selection--single {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 0.8rem 1.2rem !important;
    font-family: var(--body) !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    outline: none !important;
    transition: border-color .2s !important;
    background-color: #fff !important;
    height: auto !important;
}

.woocommerce form .form-row input.input-text:focus, 
.woocommerce form .form-row textarea:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ink) !important;
}

.woocommerce form .form-row label {
    font-family: var(--body) !important;
    font-weight: 700 !important;
    font-size: .85rem !important;
    color: var(--ink) !important;
    margin-bottom: 0.4rem !important;
}

/* Cart & Checkout Specifics */
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3 {
    margin-bottom: 1.5rem !important;
}

.woocommerce table.shop_table {
    border-radius: 12px !important;
    border-collapse: separate !important;
    border: 1px solid var(--line) !important;
    overflow: hidden !important;
}

.woocommerce table.shop_table th {
    background-color: var(--cream) !important;
    font-family: var(--body) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    padding: 1.2rem !important;
}

.woocommerce table.shop_table td {
    padding: 1.2rem !important;
    border-top: 1px solid var(--line) !important;
}

/* Single Product */
.woocommerce div.product div.images {
    border-radius: 16px !important;
    overflow: hidden !important;
    background: var(--cream) !important;
}

.woocommerce div.product p.price, 
.woocommerce div.product span.price {
    font-family: var(--body) !important;
    font-weight: 800 !important;
    color: var(--ink) !important;
    font-size: 1.4rem !important;
}

.woocommerce div.product p.price del, 
.woocommerce div.product span.price del {
    color: rgba(23,18,14,.4) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
    border-radius: 8px !important;
    font-family: var(--body) !important;
    font-weight: 700 !important;
    border-top-color: var(--red) !important;
}
.woocommerce-message::before, .woocommerce-info::before {
    color: var(--red) !important;
}

/* ==========================================================================
   Minimalist Shop Page Alignment
   ========================================================================== */
.woocommerce-products-header {
    text-align: left;
    margin-bottom: 2.5rem;
    margin-top: 1rem;
}
.woocommerce-products-header__title.page-title {
    font-size: 3rem !important;
    margin-bottom: 0.5rem;
    color: var(--ink) !important;
}
.woocommerce-result-count {
    display: none !important; /* Minimalist: hide result count */
}
.woocommerce-ordering {
    float: none !important;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2.5rem !important;
}
.woocommerce-ordering select {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: var(--paper) !important;
    font-family: var(--body) !important;
    font-weight: 700 !important;
    font-size: .8rem !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    cursor: pointer;
    padding: 0.6rem 2.5rem 0.6rem 1rem !important;
    outline: none !important;
    color: var(--ink) !important;
}

/* ==========================================================================
   Global Typography (Force Manrope)
   ========================================================================== */
html, body, button, input, select, textarea {
    font-family: var(--body);
}

/* ==========================================================================
   Sidebar & Widgets - Minimalist
   ========================================================================== */
#secondary, .widget-area, .sidebar-main {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.widget-title {
    font-size: 1.1rem !important;
    font-family: var(--display) !important;
    letter-spacing: .05em !important;
    margin-bottom: 2rem !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
}

/* Best Sellers / Product List Widget */
ul.product_list_widget li {
    border-bottom: 1px solid var(--line) !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
}
ul.product_list_widget li:last-child {
    border-bottom: none !important;
}
ul.product_list_widget li img {
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}
ul.product_list_widget li a {
    font-weight: 700 !important;
    color: var(--ink) !important;
    text-decoration: none !important;
}
ul.product_list_widget li .amount {
    font-weight: 800 !important;
    color: var(--ink) !important;
}

/* Sidebar Search Widget */
.widget_product_search form, .widget_search form {
    display: flex !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.widget_product_search form input[type="search"], .widget_search form input[type="search"] {
    border: 1px solid var(--line) !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important;
    padding: 0.8rem 1rem !important;
    background: #fff !important;
}
.widget_product_search form button, .widget_search form button {
    background-color: var(--red) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 0 1.2rem !important;
    cursor: pointer !important;
}

/* ==========================================================================
   Side Cart / Mini Cart Minimalist
   ========================================================================== */
#astra-mobile-cart-drawer,
.ast-site-header-cart .widget_shopping_cart, 
.woocommerce-mini-cart,
.widget_shopping_cart_content {
    background: var(--paper) !important;
    border: none !important;
}

/* Rebrand Cart Links (Remove Blue) */
.widget_shopping_cart_content a,
#astra-mobile-cart-drawer a,
.woocommerce-mini-cart a {
    color: var(--ink) !important;
    font-family: var(--body) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.widget_shopping_cart_content a:hover,
#astra-mobile-cart-drawer a:hover {
    color: var(--red) !important;
}

/* Rebrand Cart Buttons */
.woocommerce-mini-cart__buttons a.checkout,
.woocommerce-mini-cart__buttons a.button.checkout,
#astra-mobile-cart-drawer a.checkout,
.ast-site-header-cart a.checkout {
    background-color: var(--red) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-family: var(--body) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    padding: 1rem 1.5rem !important;
    text-align: center;
    border: none !important;
}
.woocommerce-mini-cart__buttons a.checkout:hover,
.woocommerce-mini-cart__buttons a.button.checkout:hover,
#astra-mobile-cart-drawer a.checkout:hover {
    background-color: var(--red-dark) !important;
    color: #fff !important;
}

.woocommerce-mini-cart__buttons a.button:not(.checkout),
#astra-mobile-cart-drawer a.button:not(.checkout) {
    background-color: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
}
.woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
    background-color: var(--cream) !important;
}

/* Astra Floating Cart Icon Override */
.ast-floating-cart, 
.ast-cart-menu-wrap .count,
#ast-site-header-cart .ast-site-header-cart-icon {
    background-color: var(--red) !important;
    color: #fff !important;
}
.ast-floating-cart:hover {
    background-color: var(--red-dark) !important;
}
/* ==========================================================================
   Global Theme & Block Color Overrides (Nuke Default Blue)
   ========================================================================== */
:root {
    --ast-global-color-0: #e8402a !important; /* Astra Primary */
    --ast-global-color-1: #bf2d1b !important; /* Astra Hover */
    --ast-global-color-2: #17120e !important; /* Astra Heading */
    --ast-global-color-3: #17120e !important; /* Astra Text */
    --wp--preset--color--primary: #e8402a !important; /* WP Core Blocks */
    --wc-primary: #e8402a !important; /* Woo Blocks Primary */
    --wc-secondary: #17120e !important; /* Woo Blocks Secondary */
    
    /* CartFlows Variables */
    --wcf-primary-color: #e8402a !important;
    --wcf-primary-color-hover: #bf2d1b !important;
    --wcf-text-color: #17120e !important;
    --wcf-heading-color: #17120e !important;
    --wcf-btn-color: #e8402a !important;
    --wcf-btn-text-color: #ffffff !important;
    
    /* Modern Cart Variables */
    --moderncart-primary-color: #e8402a !important;
    --moderncart-heading-color: #17120e !important;
    --moderncart-body-color: #17120e !important;
    --moderncart-link-color: #17120e !important;
    --moderncart-link-hover-color: #e8402a !important;
    --moderncart-button-bg-color: #e8402a !important;
    --moderncart-button-text-color: #ffffff !important;
    --moderncart-floating-icon-bg-color: #e8402a !important;
    --moderncart-floating-icon-color: #ffffff !important;
}

/* ==========================================================================
   WooCommerce Mini Cart Block (Sidebar Cart)
   ========================================================================== */
.wc-block-mini-cart__drawer {
    background-color: var(--paper) !important;
}
.wc-block-mini-cart__drawer .wc-block-components-button {
    background-color: var(--red) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-family: var(--body) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}
.wc-block-mini-cart__drawer .wc-block-components-button:hover {
    background-color: var(--red-dark) !important;
}
.wc-block-components-title, .wc-block-mini-cart__title {
    font-family: var(--display) !important;
    color: var(--ink) !important;
    text-transform: uppercase !important;
}
.wc-block-mini-cart__drawer a {
    font-family: var(--body) !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.wc-block-components-quantity-selector button {
    background: transparent !important;
    color: var(--ink) !important;
}

/* ==========================================================================
   WooCommerce Classic Checkout
   ========================================================================== */
.woocommerce-checkout h1.entry-title {
    display: none !important; /* Hide Checkout Title */
}
.woocommerce-checkout form.checkout h3 {
    font-family: var(--display) !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    color: var(--ink) !important;
    margin-top: 2rem !important;
    margin-bottom: 1.5rem !important;
    font-size: 2rem !important;
}
.woocommerce-checkout form.checkout .woocommerce-input-wrapper input,
.woocommerce-checkout form.checkout .woocommerce-input-wrapper textarea {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 0.8rem 1rem !important;
    font-family: var(--body) !important;
    background: #fff !important;
    width: 100% !important;
}
.woocommerce-checkout #payment {
    background: var(--cream) !important;
    border-radius: 12px !important;
    padding: 2.5rem !important;
    margin-top: 2rem !important;
}
.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--line) !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1.5rem !important;
}
.woocommerce-checkout #payment div.payment_box {
    background: var(--paper) !important;
    border-radius: 8px !important;
    color: var(--ink) !important;
}
.woocommerce-checkout #payment button.button#place_order {
    background-color: var(--red) !important;
    color: #fff !important;
    font-family: var(--body) !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    padding: 1.2rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    width: 100% !important;
    font-size: 1.1rem !important;
    transition: background 0.3s !important;
    border: none !important;
}
.woocommerce-checkout #payment button.button#place_order:hover {
    background-color: var(--red-dark) !important;
}

/* ==========================================================================
   CartFlows Plugin (Checkout Funnel) Overrides
   ========================================================================== */
.wcf-btn-checkout, .wcf-submit-button, .wcf-checkout-button, #wcf-checkout-button {
    background-color: var(--red) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-family: var(--body) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    border: none !important;
}
.wcf-btn-checkout:hover, .wcf-submit-button:hover, .wcf-checkout-button:hover, #wcf-checkout-button:hover {
    background-color: var(--red-dark) !important;
}
.wcf-qty-selection-btn {
    background-color: var(--red) !important;
    color: #fff !important;
}
.cartflows-container .wcf-product-image .wcf-product-quantity {
    background-color: var(--ink) !important;
    color: #fff !important;
}
.wcf-step-labels {
    font-family: var(--display) !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
}

/* ==========================================================================
   Breadcrumbs & Pagination
   ========================================================================== */
.woocommerce-breadcrumb, .ast-breadcrumbs {
    display: none !important;
}

.woocommerce nav.woocommerce-pagination ul {
    border: none !important;
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 3rem 0 0 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a, 
.woocommerce nav.woocommerce-pagination ul li span {
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px !important;
    font-family: var(--body) !important;
    font-weight: 700 !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    background: transparent !important;
    font-size: 1rem !important;
    text-decoration: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--cream) !important;
    border-color: var(--ink) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--red) !important;
    color: #fff !important;
    border-color: var(--red) !important;
}

@media (max-width: 544px) {
    .ast-separate-container #secondary {
        padding: 20px !important;
    }
}