.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --sp-cream:#FBF5EE; --sp-blush:#F7DDD4; --sp-butter:#F6E6A4; --sp-coral:#E2614F; --sp-coral-ink:#B8402F; --sp-peri:#4C57A0; --sp-ink:#221C35; --sp-ink-soft:#4A4458; --sp-ink-mute:#6A6476; --sp-forest:#173B36; --sp-forest-deep:#0E2B27; --sp-sage:#E3E9DF; --sp-kraft:#E7D3B5; --sp-kraft-ink:#7A5A33; --sp-display:Gloock; --sp-sans:Figtree; }
/* Start custom CSS *//* Splurg'd Studio + The Industree — paste into Appearance → Customize → Additional CSS.
   Styles every WooCommerce product loop that carries the class "sp-products":
   the boutique homepage [products] shortcode and the Pro Archive Products and
   Related Products widgets. Also the listing-page chips (.sp-chips) and the
   single-product form (.sp-atc, .sp-gallery). "sp-ind" swaps in the Industree accent.
   Keep every grid rule at the same `.sp-products ul.products` specificity, or the
   desktop grid outranks the tablet/phone media queries. */

.sp-products ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-products ul.products::before,
.sp-products ul.products::after { display: none; }

.sp-products ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  font-family: 'Figtree', system-ui, sans-serif;
}

.sp-products ul.products li.product a img,
.sp-products ul.products li.product .pimg img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  background: #F7DDD4;
  margin: 0 0 14px;
  transition: transform .35s ease;
}
.sp-products ul.products li.product:hover a img,
.sp-products ul.products li.product:hover .pimg img { transform: scale(1.02); }

.sp-products ul.products li.product .pcat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #B8402F;
  margin: 0 0 6px;
}

.sp-products ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #221C35;
  margin: 0 0 6px;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-products ul.products li.product .price {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #4A4458;
  margin: 0 0 14px;
}
.sp-products ul.products li.product .price del { opacity: .55; margin-right: 6px; }
.sp-products ul.products li.product .price ins { text-decoration: none; color: #B8402F; }

.sp-products ul.products li.product .button {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border: 1.5px solid #221C35;
  border-radius: 999px;
  background: transparent;
  color: #221C35;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  transition: background .2s, color .2s;
}
.sp-products ul.products li.product .button:hover {
  background: #221C35;
  color: #fff;
}
.sp-products ul.products li.product .onsale {
  top: 12px; left: 12px; right: auto;
  min-height: 0; min-width: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: #F6E6A4;
  color: #221C35;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 1024px) {
  .sp-products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sp-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .sp-products ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }
  .sp-products ul.products li.product .button { padding: 10px 14px; font-size: 13px; }
}

/* ---- The Industree: same cards, forest accent (class "sp-ind" on the widget) ---- */
.sp-ind ul.products li.product .pcat,
.sp-ind ul.products li.product .price ins { color: #173B36; }
.sp-ind ul.products li.product .button:hover { background: #173B36; border-color: #173B36; color: #fff; }
.sp-ind ul.products li.product a img,
.sp-ind ul.products li.product .pimg img { background: #E3E9DF; }

/* ---- Category chips on the listing pages (Icon List with class "sp-chips") ----
   Elementor's own inline-list rules sit at (0,3,0), so the chip rules match it. */
.sp-chips .elementor-icon-list-items .elementor-icon-list-item,
.sp-chips li {
  padding: 8px 16px;
  border: 1px solid rgba(34, 28, 53, .16);
  border-radius: 999px;
  background: #fff;
  transition: border-color .2s, background .2s;
}
.sp-chips .elementor-icon-list-items .elementor-icon-list-item:hover,
.sp-chips li:hover { border-color: #221C35; }
.sp-chips .elementor-icon-list-items.elementor-inline-items { row-gap: 10px; }
.sp-chips li::after { display: none !important; } /* Elementor's inline-list divider */

/* ---- Single product: let the add-to-cart button fill the row beside quantity ---- */
.sp-atc form.cart:not(.variations_form),
.sp-atc .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.sp-atc form.cart .single_add_to_cart_button { flex: 1; min-width: 0; }
.sp-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-gallery .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sp-gallery .flex-control-thumbs li { width: auto !important; margin: 0 !important; }

/* ---- Product gallery without WooCommerce's slider script ----
   On a block theme Woo never enqueues the flexslider gallery, so the gallery stays
   at opacity:0 and every photo stacks full size. Show it as one main photo over a
   4-up thumbnail grid. Scoped to the direct-child wrapper: once a classic theme
   loads the slider, the wrapper moves inside .flex-viewport and these rules lapse. */
.sp-gallery .woocommerce-product-gallery { opacity: 1 !important; }
.sp-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0;
}
/* Woo's own thumbnail rule sets each cell to width:25%, which inside the grid
   shrinks them to a quarter of a quarter */
.sp-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
}
.sp-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child {
  grid-column: 1 / -1;
}
.sp-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+10) {
  display: none;
}
.sp-gallery .woocommerce-product-gallery__image a { display: block; }
.sp-gallery .woocommerce-product-gallery__image img {
  width: 100% !important; max-width: none !important; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; background: #fff; display: block;
}
.sp-gallery .woocommerce-product-gallery__image:first-child img { border-radius: 24px; }/* End custom CSS */