/*
 Theme Name:   One Stop Checkout Shop
 Theme URI:    https://onestopcheckout.shop
 Description:  Storefront child theme for One Stop Checkout Shop, a women's apparel basics store.
 Author:       Rank Lounge Ltd
 Template:     storefront
 Version:      1.0.0
 Text Domain:  onestopcheckout
*/

/* ===== Brand palette ===== */
:root {
    --osc-ink: #1f1b18;
    --osc-cream: #f7f3ee;
    --osc-blush: #e7c9c1;
    --osc-clay: #b5673a;
    --osc-sage: #7c8567;
    --osc-line: #e4ddd3;
}

body {
    color: var(--osc-ink);
    background-color: #ffffff;
    font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-title, .storefront-primary-navigation {
    font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.02em;
}

/* Header */
#masthead {
    background: #ffffff;
    border-bottom: 1px solid var(--osc-line);
}
.site-title a {
    color: var(--osc-ink) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.site-description {
    color: var(--osc-clay);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
}

.main-navigation ul li a {
    color: var(--osc-ink);
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
}

/* Buttons */
.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce input.button, .woocommerce-page a.button, .woocommerce-page button.button {
    background-color: var(--osc-ink);
    color: #fff;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    padding: 0.9em 1.6em;
    border: none;
    transition: background-color 0.2s ease;
}
.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce input.button:hover {
    background-color: var(--osc-clay);
    color: #fff;
}
.woocommerce a.added_to_cart {
    color: var(--osc-clay);
}

/* USP strip */
.osc-usp-strip {
    background: var(--osc-cream);
    border-top: 1px solid var(--osc-line);
    border-bottom: 1px solid var(--osc-line);
    padding: 1.4rem 1rem;
}
.osc-usp-strip .osc-usp-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1rem;
    text-align: center;
}
.osc-usp-strip .osc-usp-item {
    flex: 1 1 200px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--osc-ink);
}
.osc-usp-strip .osc-usp-item strong {
    display: block;
    font-size: 0.95rem;
    color: var(--osc-clay);
    margin-bottom: 0.2rem;
}
@media (max-width: 600px) {
    .osc-usp-strip {
        padding: 1rem 0.75rem;
    }
    .osc-usp-strip .osc-usp-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.9rem 0.5rem;
    }
    .osc-usp-strip .osc-usp-item {
        flex: none;
        font-size: 0.68rem;
    }
    .osc-usp-strip .osc-usp-item strong {
        font-size: 0.78rem;
    }
}

/* Hero */
.osc-hero {
    position: relative;
    background-color: var(--osc-blush);
    background-size: cover;
    background-position: center;
    min-height: 440px;
    display: flex;
    align-items: center;
    color: var(--osc-ink);
}
.osc-hero .osc-hero-inner {
    max-width: 640px;
    margin: 0 4rem;
    background: rgba(255,255,255,0.82);
    padding: 2.4rem 2.2rem;
}
.osc-hero h1 {
    font-size: 2.4rem;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
}
.osc-hero p {
    font-size: 1.05rem;
    margin-bottom: 1.4rem;
}
@media (max-width: 768px) {
    .osc-hero .osc-hero-inner {
        margin: 0 1.2rem;
        padding: 1.6rem;
    }
    .osc-hero h1 {
        font-size: 1.6rem;
    }
}

/* Category grid */
.osc-category-grid {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
@media (max-width: 599px) {
    .osc-category-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        padding: 0 1rem;
        margin: 1.5rem auto;
    }
    .osc-category-card {
        padding: 0;
        border: none;
    }
    .osc-category-card img {
        height: 130px !important;
    }
    .osc-category-card .osc-cat-label {
        font-size: 0.68rem;
        padding: 0.5rem 0.25rem;
    }
}
@media (min-width: 700px) {
    .osc-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.osc-category-card {
    position: relative;
    text-align: center;
    text-decoration: none;
    display: block;
    background: var(--osc-cream);
    padding: 2rem 1rem;
    border: 1px solid var(--osc-line);
    color: var(--osc-ink) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.osc-category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.osc-category-card .osc-cat-label {
    display: block;
    margin-top: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
}

.osc-section-title {
    text-align: center;
    max-width: 1200px;
    margin: 3rem auto 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.3rem;
}
@media (max-width: 599px) {
    .osc-section-title {
        margin: 2rem auto 0.75rem;
        font-size: 1.05rem;
    }
}

/* Sale badge / price */
.woocommerce span.onsale {
    background-color: var(--osc-clay);
    color: #fff;
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Compact 2-column product grids on mobile so browsing doesn't take a full
   screen per item (WooCommerce/Storefront default to 1 column under 768px). */
@media (max-width: 599px) {
    ul.products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem 0.75rem !important;
    }
    ul.products li.product {
        width: 100% !important;
        margin: 0 0 1rem !important;
        float: none !important;
        text-align: center;
    }
    /* Storefront's own float/RTL-era rules for .first/.last otherwise leak
       through and push auto-placed grid items into the wrong column (the
       first product renders in column 2, leaving column 1 looking empty) -
       assign columns explicitly so placement can't be hijacked. */
    ul.products li.product:nth-child(odd) {
        grid-column: 1;
    }
    ul.products li.product:nth-child(even) {
        grid-column: 2;
    }
    ul.products li.product img {
        height: 180px !important;
        object-fit: cover;
    }
    ul.products li.product h2,
    ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.85rem !important;
        padding: 0 0.25rem;
    }
    ul.products li.product .price {
        font-size: 0.85rem;
    }
    ul.products li.product .button {
        font-size: 0.68rem !important;
        padding: 0.7em 0.5em !important;
        white-space: nowrap;
    }
    ul.products li.product .onsale {
        font-size: 0.6rem;
        padding: 0.2em 0.6em;
    }
}

/* Footer */
#colophon {
    background: var(--osc-ink);
    color: #efe9e3;
}
#colophon a {
    color: #efe9e3;
}
.site-info {
    background: #17130f;
    color: #b8b0a6;
}