/*
 Theme Name: withcasey
 Theme URI: https://woostify.com/
 Description: Woostify WordPress theme example child theme.
 Author: Woostify
 Author URI: https://woostify.com/
 Template: woostify
 Version: 1.0.0
*/


/* Custom Product Title Styling */
.single-product div.product .product_title, .single-product .product_title.entry-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: normal !important;
    font-weight: 300 !important;
    color: oklch(0 0 0) !important;
    font-size: 38px !important;
    line-height: 45px !important;
}


/* Custom Product Description Styling */
.single-product div.product .woocommerce-product-details__short-description,
.single-product div.product .woocommerce-product-details__short-description p,
.single-product div.product .woocommerce-product-details__short-description h2,
.single-product div.product .woocommerce-product-details__short-description h3,
.single-product div.product .woocommerce-Tabs-panel--description,
.single-product div.product .woocommerce-Tabs-panel--description p,
.single-product div.product .woocommerce-Tabs-panel--description li,
.single-product div.product .woocommerce-Tabs-panel--description h2,
.single-product div.product .woocommerce-Tabs-panel--description h3 {
    font-family: 'Jost', ui-sans-serif, system-ui, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: oklch(0.5 0.01 90) !important;
    font-size: 16px !important;
    line-height: 30px !important;
}


/* =============================================
   Shop / Category / Related Products Grid
   Product Name Typography
   ============================================= */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce .related ul.products li.product .woocommerce-loop-product__title,
.woocommerce .upsells ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product h2 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-style: normal !important;
    font-weight: 300 !important;
    color: oklch(0 0 0) !important;
    font-size: 24px !important;
    line-height: 32px !important;
}

/* =============================================
   Shop / Category / Related Products Grid
   Product Price Typography
   ============================================= */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price span,
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce .related ul.products li.product .price,
.woocommerce .related ul.products li.product .price .woocommerce-Price-amount,
.woocommerce .upsells ul.products li.product .price,
.woocommerce .upsells ul.products li.product .price .woocommerce-Price-amount,
.woocommerce-page ul.products li.product .price,
.woocommerce-page ul.products li.product .price .woocommerce-Price-amount {
    font-family: 'Jost', ui-sans-serif, system-ui, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: oklch(0 0 0) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}


/* Desktop */
.image11 {
    transform: translateY(-35px);
}

.image22 {
    transform: translateY(35px);
}

/* Tablet */
@media (max-width: 1024px) {
    .image11 {
        transform: translateY(-25px);
    }

    .image22 {
        transform: translateY(25px);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .image11 {
        transform: translateY(-20px);
    }

    .image22 {
        transform: translateY(20px);
    }
}



.b11 .elementor-heading-title {
    display: inline-block !important;
    width: auto !important;
    border-bottom: 1px solid #E3A91E;
    padding-bottom: 5px;
}




#ss11 {
  height: 120px;
  min-height: 120px;
  background-color: #000 !important;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C220,110 380,0 620,26 C860,52 1010,120 1240,74 C1330,56 1390,36 1440,20 L1440,110 L0,110 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  -webkit-mask-size: 100% 100%;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C220,110 380,0 620,26 C860,52 1010,120 1240,74 C1330,56 1390,36 1440,20 L1440,110 L0,110 Z' fill='black'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center top;
  mask-size: 100% 100%;
}


#white11 img {
  filter: brightness(0) invert(1);
}


/* ═══════════════════════════════════════════════════════
   Global Typography — Cormorant Garamond + Jost
   
   WHY NO !important:
   Elementor sets fonts via inline styles and generated CSS
   (without !important). If WE use !important on p, span, a
   etc., Elementor can NEVER override them — that's why
   your fonts were broken.
   
   Instead we use "html body" prefix for enough specificity
   to override most themes, while Elementor's own selectors
   (which are much more specific) naturally win.
   ═══════════════════════════════════════════════════════ */


/* ── HEADINGS ───────────────────────────────────────── */

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .entry-title,
html body .widget-title,
html body .site-title,
html body .wp-block-heading {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    color: #000000;
    letter-spacing: -0.01em;
}

html body h1,
html body .entry-title {
    font-size: 48px;
    line-height: 60px;
}

html body h2 {
    font-size: 40px;
    line-height: 52px;
}

html body h3 {
    font-size: 32px;
    line-height: 42px;
}

html body h4 {
    font-size: 26px;
    line-height: 36px;
}

html body h5 {
    font-size: 22px;
    line-height: 32px;
}

html body h6 {
    font-size: 18px;
    line-height: 28px;
}


/* ── BODY TEXT ─────────────────────────────────────── */

html body {
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
}

html body p,
html body li,
html body a,
html body span,
html body .entry-content {
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
}