/*
Theme Name: Woodmart Child
Theme URI: https://example.com/
Description: Child theme for Woodmart theme
Author: Your Name
Author URI: https://example.com/
Template: woodmart
Version: 1.0.0
*/

/* ===========================
   TYPOGRAPHY TOKENS
   =========================== */

:root {
    --font-family-base: system-ui, "Segoe UI", Roboto, Arial, sans-serif;

    --lh-body: 1.6;
    --lh-title: 1.28;
    --lh-subtitle: 1.35;

    --fs-body: clamp(1rem, 0.9rem + 0.2vw, 1.125rem);
    --fs-small: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
    --fs-xsmall: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);

    --fs-h1: clamp(1.75rem, 1.2rem + 1.5vw, 2.25rem);
    --fs-h2: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
    --fs-h3: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
    --fs-h4: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
    --fs-h5: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
    --fs-h6: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi: 600;
    --fw-bold: 700;

    --ls-tight: -0.01em;
    --ls-normal: 0;
}


/* ===========================
   BASE TYPOGRAPHY
   =========================== */

html {
    font-size: 16px;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-base);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-tight);
    margin: 0 0 0.6em 0;
}

h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
}

h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semi);
}

h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semi);
}

h5 {
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
}

h6 {
    font-size: var(--fs-h6);
    font-weight: var(--fw-medium);
}


/* ===========================
   PRODUCT LISTING
   =========================== */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--fs-h5);
    font-weight: var(--fw-semi);
    line-height: var(--lh-subtitle);
    margin-top: 0.5rem;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount {
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    font-size: var(--fs-small);
    font-weight: var(--fw-semi);
    line-height: 1.2;
}


/* ===========================
   PRODUCT DETAIL
   =========================== */

.woocommerce div.product .product_title,
.single-product .summary .product_title {
    font-size: var(--fs-h2);
    line-height: var(--lh-title);
    font-weight: var(--fw-bold);
    margin-bottom: 0.5rem;
}

.single-product .summary .price,
.single-product .summary .price .amount {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    margin: 0.25rem 0 0.75rem;
}

.woocommerce-product-details__short-description p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    margin-bottom: 0.75rem;
}

.woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.woocommerce table.shop_attributes th {
    font-size: var(--fs-small);
    font-weight: var(--fw-semi);
}

.woocommerce table.shop_attributes td,
.woocommerce-product-attributes-item__value {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
}

.single-product .summary .product_meta,
.product_meta span,
.product_meta a {
    font-size: var(--fs-small);
    line-height: 1.5;
}

.woocommerce span.onsale,
.wd-label {
    font-size: var(--fs-xsmall);
    font-weight: var(--fw-bold);
}


/* ===========================
   CART & CHECKOUT
   =========================== */

.woocommerce-cart table.shop_table th,
.woocommerce-checkout-review-order-table th {
    font-size: var(--fs-small);
    font-weight: var(--fw-semi);
}

.woocommerce-cart table.shop_table td,
.woocommerce-checkout-review-order-table td,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.woocommerce .order-total .amount {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
}


/* ===========================
   NAVIGATION & BUTTONS
   =========================== */

.main-nav a,
.wd-nav a,
.menu-item a {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
}

button,
.button,
.wd-btn {
    font-size: var(--fs-small);
    font-weight: var(--fw-semi);
    line-height: 1.2;
}

:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}


/* ===========================
   MOBILE MEGA MENU
   =========================== */

@media (max-width: 768px) {
    .mega-menu {
        display: block !important;
    }
}


/* ===========================
   HOME PAGE CATEGORY GRID
   =========================== */

.wd-col.category-grid-item .wd-cat-wrap {
    height: 260px;
    padding: 0;
}

.wd-cat-thumb.category-image-wrapp {
    border-radius: 8px 8px 0 0;
}

.tax-product_cat a.wd-cat-image.category-image {
    height: 350px !important;
}

img.attachment-full.size-full {
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1124px) {
    .wd-col.category-grid-item .wd-cat-wrap {
        height: 260px;
    }
}

@media (max-width: 440px) {
    .wd-col.category-grid-item .wd-cat-wrap {
        height: 240px;
        padding-bottom: 10px;
    }

    a.wd-cat-image.category-image {
        height: 130px;
    }
}


/* ===========================
   SHOP PAGE TITLE
   =========================== */

.wd-page-title.page-title:after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background: hsl(0deg 0% 3.92% / 60%);
}

h1.entry-title.title {
    z-index: 1;
}


/* ===========================
   SUBCATEGORY DISPLAY
   =========================== */

#subcategory .wd-cat-inner.wrapp-category:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: hsl(0deg 0% 0% / 50%);
}

#subcategory .wd-cat-inner.wrapp-category {
    border-radius: 8px;
}

#subcategory .wd-cat-content.hover-mask {
    z-index: 1;
}

#subcategory .wd-cat-content.hover-mask h3,
#subcategory .wd-cat-content.hover-mask a {
    color: white;
}

.tax-product_cat .category-grid-item .wd-cat-thumb {
    aspect-ratio: 4 / 5 !important;
    position: relative !important;
    padding-top: 140% !important;
    height: 0 !important;
}

.tax-product_cat .category-grid-item .wd-cat-thumb > a {
    position: absolute !important;
    inset: 0 !important;
}

.tax-product_cat .category-grid-item .wd-cat-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


/* ===========================
   FOOTER
   =========================== */

/* Only three footer widget columns are used. */

footer .footer-column-4,
footer .footer-column-5 {
    display: none !important;
}


/* ===========================
   PRODUCT CATEGORY SEARCH
   =========================== */

.tax-product_cat .wd-search-form,
.tax-product_cat input.wd-search-inited {
    display: none !important;
}


/* ===========================
   VERTICAL CATEGORY NAVIGATION
   =========================== */

.wd-nav-img {
    display: none !important;
}

.wd-nav-vertical a,
.wd-product-categories a {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0 !important;
}

.wd-nav-vertical li,
.wd-product-categories li {
    text-align: left !important;
}
/* Footer logo only */
.wd-footer #block-16,
.wd-footer #block-16 figure {
    width: 100% !important;
    max-width: none !important;
}

.wd-footer #block-16 img {
    display: block !important;
    width: 350px !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}