/*
	Theme Name: House of Seven Child
	Template: hello-elementor
	Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
	Description: Child theme for the House of Seven site (Elementor + WooCommerce).
	Author: Elementor Team
	Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
	Version: 1.0.0
	Text Domain: house-of-seven-child
*/


/* ============ Brand tokens ============ */
:root{
  --hos-ink:#171310;
  --hos-ivory:#F7F3EC;
  --hos-brown:#6B4A33;
  --hos-clay:#B07454;
  --hos-olive:#6F7357;
  --hos-gold:#CEAA67;
}

body{
  background:var(--hos-ivory);
  color:var(--hos-ink);
  font-family:'Karla',sans-serif;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  color:var(--hos-ink);
}

/* Eyebrow labels */
.hos-eyebrow{
  font-family:'Karla',sans-serif;
  font-size:.62rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--hos-gold);
}

/* Buttons */
.btn-solid, .button, button[type="submit"]{
  font-family:'Karla',sans-serif;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
}

/* ============ SHOP PAGE grid: standard always-visible Add to cart ============ */
/* Give the shop archive page / products widget the CSS class: hos-shop-grid */
.hos-shop-grid ul.products{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:56px 24px;
}
@media(max-width:1024px){ .hos-shop-grid ul.products{ grid-template-columns:repeat(2,1fr); } }

.hos-shop-grid li.product{
  position:relative;
  float:none;
  width:auto !important;
  margin:0;
  text-align:left;
}
.hos-shop-grid li.product a.woocommerce-loop-product__link{
  display:block;
  overflow:hidden;
  position:relative;
  z-index:1;
}
.hos-shop-grid li.product img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform 1.2s ease;
}
.hos-shop-grid li.product:hover img{ transform:scale(1.05); }

.hos-shop-grid li.product .woocommerce-loop-product__title{
  font-family:'Cormorant Garamond',serif;
  font-size:24px;
  font-weight:500;
  color:var(--hos-ink);
  padding:0;
  margin-top:18px;
}
.hos-shop-grid li.product .price{
  font-family:'Karla',sans-serif;
  font-size:14px;
  letter-spacing:.08em;
  color:var(--hos-ink);
}
.hos-shop-grid li.product .star-rating{ color:var(--hos-gold); }

/* Standard add-to-cart button: outlined, always visible */
.hos-shop-grid li.product .button{
  display:block;
  margin-top:16px;
  padding:14px 0;
  text-align:center;
  background:transparent;
  color:var(--hos-ink);
  border:1px solid rgba(23,19,16,.25);
  border-radius:0;
  font-family:'Karla',sans-serif;
  font-size:.62rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.hos-shop-grid li.product .button:hover{
  background:var(--hos-ink);
  color:var(--hos-ivory);
  border-color:var(--hos-ink);
}
.hos-shop-grid li.product a.added_to_cart{
  display:block;
  margin-top:10px;
  font-family:'Karla',sans-serif;
  font-size:.58rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--hos-ink);
}

/* Shop page — always-visible outlined Add to cart (widget class hos-shop-grid) */
.hos-shop-grid .product .add_to_cart_button {
  background: transparent; color: #171310 !important;
  border: 1px solid #171310; border-radius: 0;
  font-family: 'Karla', sans-serif; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 12px 20px; display: inline-block; margin-top: 8px;
}
.hos-shop-grid .product .add_to_cart_button:hover { background: #171310; color: #F4EFE6 !important; }

/* Best seller badge */
.onsale.hos-best-seller {
  background: #CEAA67; color: #171310;
  font-family: 'Karla', sans-serif; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 0;
}

/* =========================================================
   HOUSE OF SEVEN — LOOP GRID QUICK ADD (ELEMENTOR COMPATIBLE)
   ========================================================= */

/* 1. Parent Image Wrapper Container & Elementor Item Bounds */
.hos-product-image-wrap,
.elementor-loop-item-wrapper,
.elementor-loop-item {
    position: relative !important;
    overflow: hidden !important;
}

.hos-product-image-wrap {
    width: 100% !important;
}

.hos-product-image-wrap img {
    display: block;
    width: 100%;
}


.hos-product-image-wrap img {
    display: block;
    width: 100%;
}

/* 2. Quick Add Elementor Widget Structure Wrap */
.hos-product-image-wrap .hos-quick-add,
.hos-product-image-wrap .hos-quick-add .elementor-widget-container,
.hos-product-image-wrap .hos-quick-add .woocommerce,
.hos-product-image-wrap .hos-quick-add .add_to_cart_button,
.hos-product-image-wrap .hos-quick-add .elementor-button {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 48px !important;    /* Shaved down from 86px for a premium aesthetic */
    min-height: 48px !important;
}

/* 3. Base Position & Transition Settings */
.hos-product-image-wrap .hos-quick-add {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;

    /* Hidden state: Pushed below the image framework */
    transform: translateY(100%) !important;
    opacity: 0 !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease !important;
    pointer-events: none;
}

/* 4. Glide Up and Fade In on Hover */
.hos-product-image-wrap:hover .hos-quick-add {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 5. Quick Add Button Typography & Styling Colors */
.hos-product-image-wrap .hos-quick-add .add_to_cart_button,
.hos-product-image-wrap .hos-quick-add .elementor-button {
    background: #171310 !important;
    color: #F7F3EC !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: .24em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

/* 6. Active Button Hover State */
.hos-product-image-wrap .hos-quick-add .add_to_cart_button:hover,
.hos-product-image-wrap .hos-quick-add .elementor-button:hover {
    background: #2A2521 !important;
    color: #F7F3EC !important;
}

/* 7. Native WooCommerce Loading State Override */
.hos-product-image-wrap .hos-quick-add .add_to_cart_button.loading {
    opacity: .7 !important;
}

/* 8. Completely Suppress the Standard "View Cart" Link */
.hos-product-image-wrap .hos-quick-add .added_to_cart {
    display: none !important;
}

/* 9. Seamless Touch Support for Mobile Layouts */
@media (hover: none) {
    .hos-product-image-wrap .hos-quick-add {
        display: none !important;
    }
}

.xoo-wsc-markup {
    --hos-cart-width:400px;
    --hos-cart-gutter: 24px;
    --hos-cart-image-width: 88px;
    --hos-cart-image-height: 112px;
    --hos-cart-bg: var(--hos-ivory, #f8f4ec);
    --hos-cart-ink: var(--hos-ink, #171310);
    --hos-cart-muted: var(--hos-muted, #7a7168);
    --hos-cart-border: var(--hos-border, #e2dbce);
    --hos-cart-serif: "Cormorant Garamond", Georgia, serif;
    --hos-cart-sans: "Karla", Arial, sans-serif;
}

/* Header */
.xoo-wsc-markup .xoo-wsc-header {
    display: flex;
    flex: 0 0 58px;
    align-items: center;
    min-height: 58px;
    padding: 0 var(--hos-cart-gutter) !important;
    color: var(--hos-cart-ink) !important;
    background: var(--hos-cart-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--hos-cart-border) !important;
    box-shadow: none !important;
}

.xoo-wsc-markup .xoo-wsch-top {
    width: 100%;
    min-height: 58px;
    margin: 0;
}

.xoo-wsc-markup .xoo-wsch-text {
    margin: 0 !important;
    color: var(--hos-cart-muted);
    font-family: var(--hos-cart-sans) !important;
    font-size: 12px !important;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

/* Replace the plugin's heavy close glyph with a thin custom X. */
.xoo-wsc-markup .xoo-wsch-new .xoo-wsch-close,
.xoo-wsc-markup .xoo-wsch-close {
    position: relative !important;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    color: var(--hos-cart-ink) !important;
    font-size: 0 !important;
}

.xoo-wsc-markup .xoo-wsch-close::before,
.xoo-wsc-markup .xoo-wsch-close::after {
    content: "" !important;
    position: absolute;
    top: 9px;
    left: 1px;
    width: 19px;
    height: 1.5px;
    background: currentColor;
    transform-origin: center;
}

.xoo-wsc-markup .xoo-wsch-close::before {
    transform: rotate(45deg);
}

.xoo-wsc-markup .xoo-wsch-close::after {
    transform: rotate(-45deg);
}

/* Body and product list */
.xoo-wsc-markup .xoo-wsc-body {
    min-height: 0;
    padding: 0 !important;
    background: var(--hos-cart-bg) !important;
    scrollbar-color: var(--hos-cart-border) transparent;
    scrollbar-width: thin;
}

.xoo-wsc-markup .xoo-wsc-products.xoo-wsc-pattern-row {
    margin: 0 !important;
    padding: 0 var(--hos-cart-gutter) !important;
}

.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-product {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: calc(var(--hos-cart-image-height) + 64px);
    margin: 0 !important;
    padding: 24px 0 40px !important;
    color: var(--hos-cart-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--hos-cart-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Portrait product image */
.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-img-col {
    flex: 0 0 var(--hos-cart-image-width);
    align-self: flex-start;
    width: var(--hos-cart-image-width) !important;
    max-width: var(--hos-cart-image-width);
}

.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-img-col > a {
    display: block;
    width: 100%;
    height: var(--hos-cart-image-height);
}

.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-img-col img {
    display: block;
    width: 100% !important;
    height: var(--hos-cart-image-height) !important;
    max-width: none !important;
    margin: 0;
    object-fit: cover;
    border-radius: 0 !important;
}

/* Product information and line total */
.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-sum-col {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    padding: 0 0 0 16px !important;
}

.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-sm-info {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 12px;
    align-items: start;
    width: 100%;
    min-width: 0;
    height: var(--hos-cart-image-height);
}

.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-sm-left {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start !important;
    min-width: 0;
    row-gap: 0;
}

.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-sm-right {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    min-width: max-content;
    height: var(--hos-cart-image-height);
    padding-top: 72px;
    row-gap: 0;
}

.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-pname,
.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-pname a {
    display: block;
    margin: 3px 0 0;
    color: var(--hos-cart-ink) !important;
    font-family: var(--hos-cart-serif) !important;
    font-size: 18px !important;
    font-weight: 200 !important;
    line-height: 1.1;
    letter-spacing: 0;
}


/* Quantity selector */
.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-qty-box {
    display: flex;
    width: 86px !important;
    max-width: 96px !important;
    height: 38px;
    margin: 12px 0 0 !important;
    overflow: hidden;
    background: transparent !important;
    border: 1px solid var(--hos-cart-border) !important;
    border-radius: 0 !important;
}

.xoo-wsc-markup .xoo-wsc-pattern-row span.xoo-wsc-chng {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    min-width: 32px;
    height: 36px;
    padding: 0;
    color: var(--hos-cart-muted) !important;
    background: transparent !important;
    font-family: var(--hos-cart-sans) !important;
    font-size: 16px;
    font-weight: 300;
    line-height: 36px;
}

.xoo-wsc-markup .xoo-wsc-pattern-row input[type="number"].xoo-wsc-qty {
    flex: 1 1 auto;
    width: 30px !important;
    height: 36px !important;
    min-height: 36px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--hos-cart-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--hos-cart-sans) !important;
    font-size: 13px !important;
    font-weight: 300;
    line-height: 36px !important;
    text-align: center;
}

.xoo-wsc-markup .xoo-wsc-pattern-row input[type="number"].xoo-wsc-qty:focus-visible,
.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-chng:focus-visible {
    outline: 1px solid var(--hos-cart-ink);
    outline-offset: -2px;
}

/* Line total aligned with the quantity control */
.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-smr-ptotal,
.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-smr-ptotal .amount {
    margin: 0 !important;
    color: var(--hos-cart-ink) !important;
    font-family: "Karla", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 300;
    line-height: 20px;
    white-space: nowrap;
}

/* Requires XootiX Delete type = Text and Delete position = Default. */
.xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-sm-right .xoo-wsc-del-txt {
    position: absolute !important;
    top: calc(var(--hos-cart-image-height) + 0px);
    left: 0;
    margin: 0 !important;
    padding: 0;
    color: var(--hos-cart-muted) !important;
    font-family: var(--hos-cart-sans) !important;
    font-size: 9px !important;
    font-weight: 400;
    line-height: 0px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/* Footer */
.xoo-wsc-markup .xoo-wsc-footer {
    flex: 0 0 auto;
    padding: 26px var(--hos-cart-gutter) 0 !important;
    color: var(--hos-cart-ink) !important;
    background: var(--hos-cart-bg) !important;
    border-top: 1px solid var(--hos-cart-border);
    box-shadow: none !important;
    font-family: var(--hos-cart-sans) !important;
}

.xoo-wsc-markup .xoo-wsc-ft-totals {
    width: 100%;
    padding: 0 !important;
}

/* Match the reference: show the subtotal row only. */
.xoo-wsc-markup .xoo-wsc-ft-amt:not(.xoo-wsc-ft-amt-subtotal) {
    display: none !important;
}

.xoo-wsc-markup .xoo-wsc-ft-amt-subtotal {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400;
}

.xoo-wsc-markup .xoo-wsc-ft-amt-subtotal .xoo-wsc-ft-amt-label {
    padding: 0;
    color: var(--hos-cart-muted);
    font-size: 10px !important;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.xoo-wsc-markup .xoo-wsc-ft-amt-subtotal .xoo-wsc-ft-amt-label::after {
    content: none !important;
}

.xoo-wsc-markup .xoo-wsc-ft-amt-subtotal .xoo-wsc-ft-amt-value,
.xoo-wsc-markup .xoo-wsc-ft-amt-subtotal .amount {
    color: var(--hos-cart-ink) !important;
    font-size: 15px !important;
    font-weight: 300;
    line-height: 20px;
	font-family: "Karla", Arial, sans-serif !important;
}

.xoo-wsc-markup .xoo-wsc-footer-txt {
    display: block;
    margin: 10px 0 0 !important;
    color: var(--hos-cart-muted);
    font-family: var(--hos-cart-sans) !important;
    font-size: 13px !important;
    font-weight: 300;
    line-height: 18px;
    text-align: left;
}

.xoo-wsc-markup .xoo-wsc-ft-buttons-cont {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: calc(100% + var(--hos-cart-gutter) + var(--hos-cart-gutter));
    margin: 24px calc(0px - var(--hos-cart-gutter)) 0;
}

.xoo-wsc-markup .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn {
    min-height: 40px;
    padding: 0 24px !important;
    color: var(--hos-cart-bg) !important;
    background: var(--hos-cart-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--hos-cart-sans) !important;
    font-size: 10px !important;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.xoo-wsc-markup .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn:hover,
.xoo-wsc-markup .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn:focus-visible {
    color: var(--hos-cart-bg) !important;
    background: #2a2420 !important;
}

/* Keep the checkout button label clean even if "show total in button" is on. */
.xoo-wsc-markup .xoo-wsc-ft-btn-checkout .amount,
.xoo-wsc-markup .xoo-wsc-ft-btn-checkout .amount::before {
    display: none !important;
    content: none !important;
}

/* Dimmed page overlay */
.xoo-wsc-markup .xoo-wsc-opac {
    background: #171310;
}

.xoo-wsc-cart-active .xoo-wsc-markup .xoo-wsc-opac {
    opacity: 0.35;
}

/* Small phones */
@media (max-width: 380px) {
    .xoo-wsc-markup {
        --hos-cart-gutter: 20px;
        --hos-cart-image-width: 80px;
        --hos-cart-image-height: 102px;
    }

    .xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-sum-col {
        padding-left: 14px !important;
    }

    .xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-sm-info {
        column-gap: 8px;
    }

    .xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-sm-right {
        padding-top: 67px;
    }

    .xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-pname,
    .xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-pname a {
        font-size: 18px !important;
    }

    .xoo-wsc-markup .xoo-wsc-pattern-row .xoo-wsc-qty-box {
        width: 90px !important;
        max-width: 90px !important;
    }

    .xoo-wsc-markup .xoo-wsc-pattern-row span.xoo-wsc-chng {
        flex-basis: 30px;
        width: 30px !important;
        min-width: 30px;
    }

    .xoo-wsc-markup .xoo-wsc-footer-txt {
        font-size: 12px !important;
    }
}

@supports not (height: 100dvh) {
    .xoo-wsc-markup .xoo-wsc-container {
        height: 100vh;
        max-height: 100vh !important;
    }
}