.elementor-8387 .elementor-element.elementor-element-3849851{--display:flex;--min-height:670px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.25;--overlay-mix-blend-mode:multiply;--padding-top:120px;--padding-bottom:120px;--padding-left:0px;--padding-right:0px;}.elementor-8387 .elementor-element.elementor-element-3849851:not(.elementor-motion-effects-element-type-background), .elementor-8387 .elementor-element.elementor-element-3849851 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E0EADF;background-image:url("https://shopgivables.com/wp-content/uploads/2025/12/givables-home-desktop-hero-scaled.webp");background-position:center left;background-repeat:no-repeat;background-size:75% auto;}.elementor-8387 .elementor-element.elementor-element-3849851::before, .elementor-8387 .elementor-element.elementor-element-3849851 > .elementor-background-video-container::before, .elementor-8387 .elementor-element.elementor-element-3849851 > .e-con-inner > .elementor-background-video-container::before, .elementor-8387 .elementor-element.elementor-element-3849851 > .elementor-background-slideshow::before, .elementor-8387 .elementor-element.elementor-element-3849851 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8387 .elementor-element.elementor-element-3849851 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://shopgivables.com/wp-content/uploads/2025/12/unnamed.png");--background-overlay:'';background-position:bottom right;background-repeat:no-repeat;background-size:28% auto;}.elementor-8387 .elementor-element.elementor-element-3849851.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8387 .elementor-element.elementor-element-2b8fc88{--display:flex;--justify-content:center;--overlay-opacity:0;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8387 .elementor-element.elementor-element-2b8fc88::before, .elementor-8387 .elementor-element.elementor-element-2b8fc88 > .elementor-background-video-container::before, .elementor-8387 .elementor-element.elementor-element-2b8fc88 > .e-con-inner > .elementor-background-video-container::before, .elementor-8387 .elementor-element.elementor-element-2b8fc88 > .elementor-background-slideshow::before, .elementor-8387 .elementor-element.elementor-element-2b8fc88 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8387 .elementor-element.elementor-element-2b8fc88 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-8387 .elementor-element.elementor-element-2b8fc88.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8387 .elementor-element.elementor-element-b81a0d9{--display:flex;}.elementor-8387 .elementor-element.elementor-element-eed9923{text-align:center;}.elementor-8387 .elementor-element.elementor-element-d9bda39.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-8387 .elementor-element.elementor-element-d9bda39.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-8387 .elementor-element.elementor-element-2e0ac39 > .elementor-widget-container{margin:0px 0px 3px 0px;}.elementor-8387 .elementor-element.elementor-element-2e0ac39{text-align:center;}.elementor-8387 .elementor-element.elementor-element-42be62c.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-8387 .elementor-element.elementor-element-42be62c.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-8387 .elementor-element.elementor-element-4509944{--display:flex;}.elementor-8387 .elementor-element.elementor-element-0b31530{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}body.elementor-page-8387:not(.elementor-motion-effects-element-type-background), body.elementor-page-8387 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#ffffff;}@media(max-width:1024px){.elementor-8387 .elementor-element.elementor-element-3849851{--padding-top:80px;--padding-bottom:80px;--padding-left:30px;--padding-right:30px;}.elementor-8387 .elementor-element.elementor-element-2b8fc88{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:40px;--padding-right:0px;}.elementor-8387 .elementor-element.elementor-element-d9bda39.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-8387 .elementor-element.elementor-element-42be62c.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-8387 .elementor-element.elementor-element-3849851{--width:500px;--min-height:0px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8387 .elementor-element.elementor-element-3849851:not(.elementor-motion-effects-element-type-background), .elementor-8387 .elementor-element.elementor-element-3849851 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:bottom center;background-size:cover;}.elementor-8387 .elementor-element.elementor-element-3849851::before, .elementor-8387 .elementor-element.elementor-element-3849851 > .elementor-background-video-container::before, .elementor-8387 .elementor-element.elementor-element-3849851 > .e-con-inner > .elementor-background-video-container::before, .elementor-8387 .elementor-element.elementor-element-3849851 > .elementor-background-slideshow::before, .elementor-8387 .elementor-element.elementor-element-3849851 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8387 .elementor-element.elementor-element-3849851 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-size:97px auto;}.elementor-8387 .elementor-element.elementor-element-2b8fc88{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8387 .elementor-element.elementor-element-b81a0d9{--justify-content:flex-end;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8387 .elementor-element.elementor-element-eed9923{text-align:center;}.elementor-8387 .elementor-element.elementor-element-d9bda39.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-8387 .elementor-element.elementor-element-42be62c{width:100%;max-width:100%;}.elementor-8387 .elementor-element.elementor-element-42be62c.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-8387 .elementor-element.elementor-element-0b31530{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-8387 .elementor-element.elementor-element-2b8fc88{--width:99.385%;}}@media(max-width:1024px) and (min-width:768px){.elementor-8387 .elementor-element.elementor-element-2b8fc88{--width:55%;}}/* Start custom CSS for html, class: .elementor-element-6ac36ab *//* SUPER CLEAR — FORCE BIGGER */
.hero-d-btn{
  width: fit-content !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-self: center;
  margin-left: auto;
  margin-right: auto;

  padding: 22px 54px 22px 92px !important;   /* WAY bigger */
  border-radius: 999px;
  transform-origin: center;
}

/* BIG text */
.hero-d-text{
  font-size: 26px !important;
  font-weight: 900;
  white-space: nowrap;
}

/* BIG cat */
.hero-d-cat{
  width: 130px !important;
  bottom: -14px !important;
  left: -40px !important;
  position: absolute;
  pointer-events: none;
}

/* keep block aligned */
.hero-d-content{
  text-align: right;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3849851 */.hero-mobile{
  min-height: auto !important;
  aspect-ratio: 10 / 15 !important;   /* square */
  max-height: 922px;                /* safety */
  overflow: hidden;                 /* crops extra background */
  padding: 14px !important;
  display: flex !important;
  align-items: center;
}

.hero-inner{
  width: 100%;
}
.hero-graphic svg{
  max-height: 250px !important;
}
.cute-btn-wrap{
  margin-top: 12px !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b81a0d9 *//* =========================================================
   GIVABLES — MASTER STYLESHEET (CLEAN REWRITE)
   ✅ Soft cream background
   ✅ Kawaii cards (26px radius, blush border)
   ✅ Headings highlight (safe scoped)
   ✅ Product grid (Elementor + WooCommerce)
   ✅ Regular price = #dc9814
   ✅ Sale price (ins) = pastel red, regular untouched elsewhere
   ✅ CheckoutWC cleanup
========================================================= */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --g-cream: #fffdf9;
  --g-ink:   #2f2624;

  --g-card:  #ffffff;
  --g-border: rgba(255, 210, 225, 0.70); /* blush */
  --g-shadow: 0 8px 20px rgba(0,0,0,.04);

  --g-radius: 26px;
  --g-radius-in: 18px;

  --g-price: #dc9814; /* your natural price */
  --g-sale:  #ff7f7f; /* pastel red (sale only) */
}

/* =========================================================
   1) GLOBAL BASE
========================================================= */
html, body{
  background: var(--g-cream) !important;
  color: var(--g-ink) !important;
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================================================
   2) SECTION TITLES (SAFE SCOPED)
========================================================= */
.elementor-widget-heading .elementor-heading-title{
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 800 !important;
  color: var(--g-ink) !important;
  font-size: 32px !important;
  text-align: center;
  position: relative;
  z-index: 1;
  display: inline-block;
  line-height: 1.1;
}

.elementor-widget-heading .elementor-heading-title::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4px;
  width: 110%;
  max-width: 520px;
  height: 12px;
  background: rgba(255, 140, 163, 0.18) !important;
  border-radius: 999px;
  z-index: -1;
}

/* =========================================================
   3) PRODUCT GRID (Woo + Elementor)
========================================================= */

/* Cards */
.woocommerce ul.products li.product,
ul.products li.product{
  background: var(--g-card) !important;
  border: 2px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
  padding: 12px !important;
  box-shadow: var(--g-shadow) !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover{
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 25px rgba(255, 140, 163, 0.12) !important;
}

/* Image */
.woocommerce ul.products li.product img,
ul.products li.product img{
  border-radius: var(--g-radius-in) !important;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title{
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin: 10px 0 6px !important;
  color: var(--g-ink) !important;
}

/* PRICE: default/regular */
.woocommerce ul.products li.product .price,
ul.products li.product .price{
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: var(--g-price) !important; /* ✅ natural price */
}

/* Sale: keep crossed-out regular subtle */
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount,
ul.products li.product .price del,
ul.products li.product .price del .amount{
  opacity: .55 !important;
}

/* Sale price only */
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .amount,
ul.products li.product .price ins,
ul.products li.product .price ins .amount{
  color: var(--g-sale) !important;      /* ✅ pastel red */
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Hide sale badges / labels */
.woocommerce ul.products li.product .onsale,
ul.products li.product .onsale,
ul.products li.product .sale-item,
ul.products li.product .product-label{
  display: none !important;
}

/* Mobile 2-column optimization */
@media (max-width: 767px){
  ul.products{ gap: 12px !important; }
  .woocommerce ul.products li.product,
  ul.products li.product{
    padding: 8px !important;
    border-radius: 22px !important;
  }
}

/* =========================================================
   4) CHECKOUTWC (CFW) — CLEAN + READABLE
========================================================= */
body.checkout-wc #cfw .cfw-panel,
body.checkout-wc #cfw #cfw-cart-summary,
body.checkout-wc #cfw #payment{
  background: #ffffff !important;
  border: 2px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.05) !important;
  padding: 25px !important;
}

/* Label stack */
body.checkout-wc #cfw .cfw-input-wrap{
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 20px !important;
}

body.checkout-wc #cfw .cfw-input-wrap label{
  position: static !important;
  transform: none !important;

  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin: 0 0 8px 0 !important;
  display: block !important;
  color: var(--g-ink) !important;
}

/* Inputs */
body.checkout-wc #cfw input[type="text"],
body.checkout-wc #cfw input[type="email"],
body.checkout-wc #cfw input[type="tel"],
body.checkout-wc #cfw select{
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;

  background: #ffffff !important;
  border: 2px solid #f2f2f2 !important;
  border-radius: 16px !important;
  padding: 15px 18px !important;
  height: auto !important;
  color: var(--g-ink) !important;
}

body.checkout-wc #cfw input:focus,
body.checkout-wc #cfw select:focus{
  border-color: rgba(255, 124, 110, 0.50) !important;
  outline: none !important;
}

/* Primary button */
body.checkout-wc #cfw #place_order,
body.checkout-wc #cfw .cfw-primary-btn{
  font-family: "Fredoka", system-ui, sans-serif !important;
  background: #ff7c6e !important;
  color: #ffffff !important;

  border-radius: 999px !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  padding: 20px 32px !important;

  box-shadow: 0 8px 20px rgba(255, 124, 110, 0.30) !important;
  border: none !important;
  width: 100% !important;

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}

body.checkout-wc #cfw #place_order:hover,
body.checkout-wc #cfw .cfw-primary-btn:hover{
  background: #ff685a !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 10px 24px rgba(255, 124, 110, 0.34) !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0b31530 *//* 1. THE ENTIRE BOX - FLOATING CARD STYLE */
.elementor-8387 .elementor-element.elementor-element-0b31530 {
    background: #ffffff !important;
    border-top: 10px solid #ffd2e1 !important; /* Thick Pink Top Border */
    border-radius: 0 0 40px 40px !important;
    padding: 60px 40px 40px 40px !important;
    box-shadow: 0 20px 0px rgba(255, 210, 225, 0.5) !important; /* 3D Shadow */
    position: relative;
    transition: all 0.3s ease-in-out !important;
    z-index: 1;
}

.elementor-8387 .elementor-element.elementor-element-0b31530:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 25px 0px rgba(255, 210, 225, 0.6) !important;
}

/* 2. THE HEADING - HIGH ENERGY */
.elementor-8387 .elementor-element.elementor-element-0b31530 h2, 
.elementor-8387 .elementor-element.elementor-element-0b31530 .elementor-heading-title {
    color: #4a3a3a !important; /* Brand Dark Brown */
    font-weight: 900 !important;
    font-size: clamp(24px, 5vw, 36px) !important;
    line-height: 1.1 !important;
    margin-bottom: 30px !important;
    transform: rotate(-1deg); /* Slight "Wild" tilt */
}

/* 3. WPFORMS INPUTS - ROUNDED & SQUISHY */
.elementor-8387 .elementor-element.elementor-element-0b31530 .wpforms-field input {
    background: #fdf5f7 !important;
    border: 3px solid #ffd2e1 !important;
    border-radius: 20px !important;
    padding: 15px 25px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
}

.elementor-8387 .elementor-element.elementor-element-0b31530 .wpforms-field input:focus {
    background: #ffffff !important;
    border-color: #9dd7d0 !important; /* Brand Mint */
    box-shadow: 0 0 15px rgba(157, 215, 208, 0.3) !important;
}

/* 4. THE SUBMIT BUTTON - THE "BIG BUTTON" POP */
.elementor-8387 .elementor-element.elementor-element-0b31530 .wpforms-submit {
    width: 100% !important;
    background-color: #9dd7d0 !important; /* Brand Mint */
    color: #ffffff !important;
    border-radius: 999px !important; /* Pill shape */
    padding: 20px 40px !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 10px 0px #7abcb4 !important; /* Thick 3D Bottom */
    transition: all 0.1s ease !important;
    margin-top: 10px !important;
}

.elementor-8387 .elementor-element.elementor-element-0b31530 .wpforms-submit:hover {
    background-color: #ff8ca3 !important; /* Switches to Pink */
    box-shadow: 0 10px 0px #e07a8f !important;
    transform: translateY(-2px) !important;
}

.elementor-8387 .elementor-element.elementor-element-0b31530 .wpforms-submit:active {
    transform: translateY(6px) !important;
    box-shadow: 0 4px 0px #e07a8f !important; /* Button "Press" effect */
}

/* 5. DECORATIVE SPARKLE */
.elementor-8387 .elementor-element.elementor-element-0b31530::after {
    content: "✨";
    position: absolute;
    top: -25px;
    right: 10px;
    font-size: 40px;
    filter: drop-shadow(0 5px 0px rgba(0,0,0,0.05));
}/* End custom CSS */