/*
Theme Name: Hello Elementor Child - SHED CITY USA
Theme URI: https://shedcityusa.com
Description: Child theme for Hello Elementor with SHED CITY USA customizations
Author: SHED CITY USA
Template: hello-elementor
Version: 2.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor-child
*/

/* Import Cinzel font for logo */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');

/* ============================================
   GLOBAL STYLES - Match Hydrogen Theme
   ============================================ */

/* Container/Content Width */
.site-content,
.page-content,
.entry-content,
.woocommerce-page,
body.woocommerce {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px;
}


/* Elementor pages — override default 1140px container to match 1440px site width */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1440px !important;
}

/* Hello Elementor parent theme caps header/footer/site-main at 1200px — override to 1440px */
@media (min-width: 1200px) {
    .page-header .entry-title,
    .site-footer .footer-inner,
    .site-footer:not(.dynamic-footer),
    .site-header .header-inner,
    .site-header:not(.dynamic-header),
    body:not([class*=elementor-page-]) .site-main {
        max-width: 1440px;
    }
}

/* Full width for shop/archive pages */
.woocommerce.archive .site-content,
.woocommerce.tax-product_cat .site-content,
.woocommerce.tax-product_tag .site-content {
    max-width: 1440px;
}

/* Hide sidebar on archive pages for full width */
.woocommerce.archive #secondary,
.woocommerce.tax-product_cat #secondary,
.woocommerce.tax-product_tag #secondary {
    display: none;
}

/* Make main content full width when sidebar is hidden */
.woocommerce.archive #primary,
.woocommerce.tax-product_cat #primary,
.woocommerce.tax-product_tag #primary {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/* Typography */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    padding: 32px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
}

/* Links */
a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #0056b3;
}

/* ============================================
   WOOCOMMERCE PRODUCT PAGE STYLES
   ============================================ */

/* Product title */
.product_title.entry-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

/* Product price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 1.25rem;
    font-weight: 600;
}
.woocommerce-variation-description p {
    font-weight: 700;
}
/* Product meta */
.product_meta {
    font-size: 0.9rem;
    color: #666;
    border-top: 1px solid #eee;
    padding-top: 1rem;
    margin-top: 1rem;
}

/* Tabs */
.woocommerce-tabs {
    margin-top: 3rem;
}

.woocommerce-tabs ul.tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ddd;
    display: flex;
    gap: 2rem;
}

.woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
}

.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 1rem 0;
    font-weight: 600;
    color: #666;
    border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
    color: #007bff;
    border-bottom-color: #007bff;
}

/* Product images */
.woocommerce-product-gallery {
    margin-bottom: 2rem;
}

/* Product gallery thumbnails - 78x78px, centered */
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.woocommerce-product-gallery .flex-control-thumbs li {
    width: 78px !important;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
    width: 78px !important;
    height: 78px !important;
    object-fit: cover !important;
}

/* Related products */
.related.products {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid #eee;
}

.related.products h2 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
}

/* Related products grid - 4 columns */
.related.products ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 1024px) {
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Reviews */
#reviews {
    margin-top: 2rem;
}

#reviews h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Star ratings */
.star-rating {
    color: #ffc107;
}

/* Buttons — all WooCommerce buttons site-wide */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce button[type="submit"],
.woocommerce input[type="submit"] {
    background-color: #bf3e3e !important;
    color: #fff !important;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce button[type="submit"]:hover,
.woocommerce input[type="submit"]:hover {
    background-color: #767676 !important;
    color: #fff !important;
}

/* Add to cart button */
.single_add_to_cart_button {
    font-size: 1rem;
    padding: 1rem 2rem;
}

/* ============================================
   ARCHIVE/SHOP PAGE STYLES
   ============================================ */

/* Archive page title */
.woocommerce-products-header .woocommerce-products-header__title,
.page-title,
h1.woocommerce-products-header__title,
.page-header h1 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ddd;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Cinzel', serif;
    color: #333;
}

/* Archive header wrapper */
.woocommerce-products-header {
    margin-bottom: 2rem;
}

/* Archive description */
.woocommerce-products-header .term-description {
    margin-bottom: 2rem;
    color: #666;
}

/* Result count and ordering */
.woocommerce-result-count,
.woocommerce-ordering {
    margin-bottom: 1.5rem;
}

.woocommerce-ordering select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* ============================================
   SHOP / ARCHIVE PRODUCT GRID
   Scoped to WooCommerce archive pages only —
   Elementor widgets handle their own columns.
   ============================================ */

body.archive.woocommerce ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products,
body.post-type-archive-product ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 2rem 0 !important;
}

body.archive.woocommerce ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product {
    width: 100% !important;
    float: none !important;
}

/* WooCommerce adds a clearfix ::before with content:" " display:table which
   creates a phantom first grid cell. Kill it on archive grid pages. */
body.archive.woocommerce ul.products::before,
body.archive.woocommerce ul.products::after,
body.tax-product_cat ul.products::before,
body.tax-product_cat ul.products::after,
body.tax-product_tag ul.products::before,
body.tax-product_tag ul.products::after,
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after {
    display: none !important;
    content: none !important;
}

@media (max-width: 1024px) {
    body.archive.woocommerce ul.products,
    body.tax-product_cat ul.products,
    body.tax-product_tag ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    body.archive.woocommerce ul.products,
    body.tax-product_cat ul.products,
    body.tax-product_tag ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   PAGINATION
   ============================================ */

.woocommerce-pagination {
    margin-top: 3rem;
    text-align: center;
}

.woocommerce-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 0.5rem;
}

.woocommerce-pagination ul li {
    margin: 0;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: block;
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
}

.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .site-content,
    .page-content,
    .entry-content {
        padding: 0 15px !important;
    }

    .product_title.entry-title {
        font-size: 1.5rem !important;
    }

    .woocommerce-products-header .woocommerce-products-header__title,
    .page-title {
        font-size: 1.75rem !important;
    }
}

/* ============================================
   REMOVE ODD-ROW TABLE BACKGROUND
   (overrides Hello Elementor reset.css)
   ============================================ */

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
    background-color: transparent !important;
}

table tbody tr:hover > td,
table tbody tr:hover > th {
    background-color: transparent !important;
}

/* ============================================
   VARIATIONS TABLE — SIZE LABEL ABOVE SWATCHES
   ============================================ */

/* Stack label above value, left-align, strip table chrome */
.variations,
.variations tbody,
.variations tr {
    display: block !important;
    border: none !important;
    background: transparent !important;
    width: 100%;
}

.variations tr {
    margin-bottom: 0.5rem;
}

.variations th.label,
.variations td.value {
    display: block !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: left !important;
    width: 100% !important;
}

.variations th.label {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    color: #333;
}

.variations th.label label {
    display: inline;
    cursor: default;
    font-weight: inherit;
    font-size: inherit;
}

/* Reset link that shows after label ("Clear") */
.reset_variations {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.8rem;
}

/* ============================================
   CHECKOUT — Order summary column
   ============================================ */

#customer_details .col-2 {
    background: #BF3E3E;
    padding: 10px 14px;
}

#customer_details .col-2,
#customer_details .col-2 h3,
#customer_details .col-2 p,
#customer_details .col-2 label,
#customer_details .col-2 th,
#customer_details .col-2 td,
#customer_details .col-2 a {
    color: #fff !important;
}

/* ============================================
   HIDE COUPON SECTION — cart & checkout
   ============================================ */

.woocommerce-form-coupon-toggle,
.coupon {
    display: none !important;
}

/* ============================================
   HIDE YITH ELEMENTS ON NON-PRODUCT PAGES
   (e.g. /shed-inventory/ product table)
   epo-custom.css only loads on is_product() so
   these rules must live here to load site-wide.
   ============================================ */

/* YITH price summary table — replaced by floating cart */
#wapo-total-price-table {
    display: none !important;
}

/* Hide ALL YITH add-on forms inside Barn2 product table rows */
.wc-product-table .yith-wapo-form-style-theme,
.wc-product-table #yith-wapo-container,
.wc-product-table [id^="yith-wapo-"] {
    display: none !important;
}

/* ============================================
   HIDE QUANTITY INPUT IN PRODUCT TABLE
   Direct targeting — bypasses Barn2's class-based
   approach which breaks with our custom variable.php.
   ============================================ */

.wc-product-table .quantity,
.wc-product-table input.qty,
.wc-product-table input[type="number"].qty {
    display: none !important;
}

/* ============================================
   NUMBER INPUT — keep native spin buttons visible
   on desktop (opacity:1). Mobile uses custom JS
   +/− buttons (epo-custom.js) instead since
   Android Chrome doesn't render pseudo-elements.
   ============================================ */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    opacity: 1;
    height: 36px;
}

/* ============================================
   WC QUANTITY STEPPER BUTTONS
   Product page add-to-cart qty + cart page rows.
   Excluded automatically from .wc-product-table
   since that wrapper is display:none !important.
   ============================================ */

/* Flex row so −, input, + sit inline — product page and cart page only */
/* inline-flex on product page so it shrinks to content width and the
   Add to Cart button can sit beside it in the same row */
.single-product div.quantity {
    display: inline-flex !important;
    align-items: center;
}

.woocommerce-cart div.quantity {
    display: flex !important;
    align-items: center;
    float: none !important;
}

/* Cart page — push stepper to the right */
.woocommerce-cart div.quantity {
    justify-content: flex-end;
}

/* Product page — quantity + Add to Cart button on one line.
   Previously held together by float:left on div.quantity;
   now that float is removed we use flex on the wrapper. */
/* .woocommerce-variation-add-to-cart stays display:block (YITH enforces this).
   The button is made inline-block via wp_add_inline_style in functions.php so it
   sits beside the inline-flex div.quantity without fighting YITH's layout. */

/* Input: borderless sides, fixed width, no native spinners */
div.quantity input.qty {
    width: 56px !important;
    height: 36px !important;
    text-align: center;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
    box-sizing: border-box;
}

div.quantity input.qty::-webkit-outer-spin-button,
div.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Stepper buttons */
.qty-stepper-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    color: #333;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    touch-action: manipulation;
    box-sizing: border-box;
    flex-shrink: 0;
    margin: 0 !important;
}

.qty-stepper-minus { border-radius: 3px 0 0 3px; }
.qty-stepper-plus  { border-radius: 0 3px 3px 0; }
.qty-stepper-btn:hover  { background: #e0e0e0; }
.qty-stepper-btn:active { background: #c8c8c8; }