/*
 * LetzShopy Store Design CSS — Batch 2 Split
 * File: letzshopy-store-core.css
 *
 * Source:
 * - Derived from tested letzshopy-store-design-batch1-clean.css
 *
 * Load scope:
 * - Every frontend page
 *
 * IMPORTANT:
 * - Keep Customizer > Additional CSS only for :root colour variables.
 * - Shared motif SVG variables live in letzshopy-store-core.css.
 * - This file is intentionally not minified yet.
 */

/*
 * LetzShopy Store Design CSS
 * Safe V1 move from Customizer Additional CSS.
 *
 * Purpose:
 * - Homepage section designs
 * - About page design
 * - Contact page design
 * - Customer feedback / sale / collection showcase designs
 * - Header mini-cart polish
 *
 * Load this file late from functions.php.
 * Keep Customizer > Additional CSS only for :root colour variables.
 *
 * IMPORTANT:
 * - This file intentionally preserves the original CSS order.
 * - Some later blocks override earlier blocks by design.
 * - Do not minify during first migration; test visual layout first.
 */

/* =========================================================
   01. SHARED MOTIF ASSETS
   Owner: :root motif variables

   Purpose:
   - Store repeated SVG mask assets once
   - Reuse the same motif family across homepage and page modules
   - Preserve exact existing motif visuals
========================================================= */

:root {
  --ls-motif-floral-divider: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2040%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%3Cpath%20d%3D%22M4%2020h86M210%2020h86%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2290%22%20cy%3D%2220%22%20r%3D%222%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%22210%22%20cy%3D%2220%22%20r%3D%222%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M150%204c7%205%209%2011%200%2018-9-7-7-13%200-18Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M150%2036c-7-5-9-11%200-18%209%207%207%2013%200%2018Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M134%2020c5-7%2011-9%2018%200-7%209-13%207-18%200Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M166%2020c-5%207-11%209-18%200%207-9%2013-7%2018%200Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M112%2020c9-10%2018-11%2026-3M188%2020c-9-10-18-11-26-3%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M112%2020c9%2010%2018%2011%2026%203M188%2020c-9%2010-18%2011-26%203%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E");
  --ls-motif-floral-divider-full: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2040%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%3Cpath%20d%3D%22M4%2020h86M210%2020h86%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2290%22%20cy%3D%2220%22%20r%3D%222%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%22210%22%20cy%3D%2220%22%20r%3D%222%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%0A%0A%20%20%3Cpath%20d%3D%22M150%204c7%205%209%2011%200%2018-9-7-7-13%200-18Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M150%2036c-7-5-9-11%200-18%209%207%207%2013%200%2018Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M134%2020c5-7%2011-9%2018%200-7%209-13%207-18%200Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M166%2020c-5%207-11%209-18%200%207-9%2013-7%2018%200Z%22%2F%3E%0A%0A%20%20%3Cpath%20d%3D%22M112%2020c9-10%2018-11%2026-3M188%2020c-9-10-18-11-26-3%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M112%2020c9%2010%2018%2011%2026%203M188%2020c-9%2010-18%2011-26%203%22%2F%3E%0A%0A%20%20%3Cpath%20d%3D%22M102%2020c6-5%2012-7%2018-6M198%2020c-6-5-12-7-18-6%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M102%2020c6%205%2012%207%2018%206M198%2020c-6%205-12%207-18%206%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E");
  --ls-motif-lotus-line: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20260%2054%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%3Cpath%20d%3D%22M4%2027h72M184%2027h72%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2276%22%20cy%3D%2227%22%20r%3D%222.2%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%22184%22%20cy%3D%2227%22%20r%3D%222.2%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M130%205c8%207%2010%2016%200%2027-10-11-8-20%200-27Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M113%2012c12%201%2018%208%2017%2020-11%200-17-7-17-20Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M147%2012c-12%201-18%208-17%2020%2011%200%2017-7%2017-20Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M99%2023c13-6%2024-3%2031%209-12%205-22%203-31-9Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M161%2023c-13-6-24-3-31%209%2012%205%2022%203%2031-9Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M116%2033c4%208%209%2013%2014%2016%205-3%2010-8%2014-16%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M107%2034c7%203%2014%203%2023-2M153%2034c-7%203-14%203-23-2%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E");
  --ls-motif-lotus-watermark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%3Cpath%20d%3D%22M150%2028c26%2028%2034%2060%200%20100-34-40-26-72%200-100Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M104%2058c38%204%2058%2028%2046%2070-38-2-58-26-46-70Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M196%2058c-38%204-58%2028-46%2070%2038-2%2058-26%2046-70Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M62%20108c46-10%2078%208%2088%2046-44%2016-76%202-88-46Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M238%20108c-46-10-78%208-88%2046%2044%2016%2076%202%2088-46Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M36%20166c52-6%2090%2010%20114%2052-54%2012-92-4-114-52Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M264%20166c-52-6-90%2010-114%2052%2054%2012%2092-4%20114-52Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M82%20220c24%2024%2046%2038%2068%2048%2022-10%2044-24%2068-48%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* =========================================================
   END: SHARED MOTIF ASSETS
========================================================= */

/* =========================================================
   02. BASIC TEMPLATE 
========================================================= */

.elementor-element.banner-margin {
  margin-bottom: 10px;
}




@media screen and (max-width: 480px) {
  #scroll-top {
    display: none !important;
  }
}

@media screen and (max-width: 320px) {
  #site-logo #site-logo-inner a img {
    max-width: 150px;
  }
}


/* =========================================================
   03. TEMPLATE HERO - SIMPLE IMAGE BANNER
   ========================================================= */

.ls-template-hero {
  width: 100%;
  background: var(--ls-store-dark);
  overflow: visible;
  margin: 0;
  padding: 0;
}

.ls-template-hero .elementor-container,
.ls-template-hero .elementor-widget-wrap,
.ls-template-hero .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

.ls-template-hero img {
  width: 100%;
  height: auto;
  display: block;
}

.ls-template-hero-desktop {
  display: block;
}

.ls-template-hero-mobile {
  display: none;
}

/* Mobile hero image */
@media (max-width: 767px) {
  .ls-template-hero-desktop {
    display: none !important;
  }

  .ls-template-hero-mobile {
    display: block !important;
  }
}



/* =========================================================
   SCROLL REVEAL & EDITOR SAFETY
   Owner: .ls-scroll-reveal

   Purpose:
   - Reveal marked elements on viewport entry
   - Keep animated content visible inside Elementor editor
   - Respect reduced-motion preference

   State owner:
   - Base: .ls-scroll-reveal
   - Visible: .ls-scroll-reveal.is-visible
========================================================= */


/* =========================================================
   1. SCROLL REVEAL
========================================================= */

.ls-scroll-reveal {
  opacity: 0 !important;
  visibility: visible !important;

  transform: translateY(42px) !important;

  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.ls-scroll-reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* =========================================================
   2. ELEMENTOR EDITOR SAFETY
========================================================= */

body.elementor-editor-active .ls-scroll-reveal,
body.elementor-editor-active .elementor-invisible,
body.elementor-editor-active .animated {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}


/* =========================================================
   3. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ls-scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

}


/* =========================================================
   END: SCROLL REVEAL & EDITOR SAFETY
========================================================= */

/* =========================================================
   HEADER MINI CART / CART DRAWER
   Owner: OceanWP native header mini-cart
   LetzShopy owns visual polish only.
========================================================= */

/* Panel shell */
#site-header .current-shop-items-dropdown{
  background:var(--ls-store-dark-soft)!important;
  border-top:3px solid var(--ls-store-primary)!important;
  border-radius:0 0 18px 18px!important;
  box-shadow:0 22px 55px rgba(var(--ls-store-black-rgb),.28)!important;
}

/* Inner WooCommerce fragment */
#site-header .current-shop-items-dropdown .widget_shopping_cart_content{
  background:transparent!important;
  color:var(--ls-store-white)!important;
  font-family:inherit!important;
}

/* Product links */
#site-header .current-shop-items-dropdown .woocommerce-mini-cart-item a{
  color:var(--ls-store-white)!important;
  font-weight:800!important;
}

/* Quantity */
#site-header .current-shop-items-dropdown .quantity{
  color:var(--ls-store-text-warm-on-dark)!important;
  font-weight:700!important;
}

/* Product price */
#site-header .current-shop-items-dropdown .quantity .amount{
  color:var(--ls-store-price-on-dark)!important;
  font-weight:900!important;
}

/* Product image */
#site-header .current-shop-items-dropdown img{
  background:var(--ls-store-bg-soft)!important;
  border:1px solid rgba(var(--ls-store-white-rgb),.12)!important;
  border-radius:12px!important;
}

/* Remove item */
#site-header .current-shop-items-dropdown a.remove{
  background:transparent!important;
  color:var(--ls-store-white)!important;
  border:1px solid rgba(var(--ls-store-white-rgb),.55)!important;
  border-radius:999px!important;
}

#site-header .current-shop-items-dropdown a.remove:hover{
  background:var(--ls-store-primary)!important;
  color:var(--ls-store-white)!important;
  border-color:var(--ls-store-primary)!important;
}

/* Subtotal */
#site-header .current-shop-items-dropdown .woocommerce-mini-cart__total{
  color:var(--ls-store-white)!important;
  border-top:1px solid rgba(var(--ls-store-card-soft-rgb),.22)!important;
  border-bottom:1px solid rgba(var(--ls-store-card-soft-rgb),.22)!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__total .amount{
  color:var(--ls-store-price-on-dark)!important;
  font-weight:900!important;
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__total .tax_label{display:inline-block!important;margin-left:4px!important;vertical-align:middle!important;color:var(--ls-store-text-warm-on-dark)!important;font-size:11px!important;font-weight:600!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap!important}

/* Buttons */
#site-header .current-shop-items-dropdown .woocommerce-mini-cart__buttons{
  display:flex!important;
  gap:12px!important;
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__buttons a.button{
  padding:14px 18px!important;
  background:transparent!important;
  color:var(--ls-store-white)!important;
  border:1px solid rgba(var(--ls-store-card-soft-rgb),.75)!important;
  border-radius:0!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}

/* Checkout */
#site-header .current-shop-items-dropdown .woocommerce-mini-cart__buttons a.checkout{
  background:var(--ls-store-primary)!important;
  color:var(--ls-store-white)!important;
  border-color:var(--ls-store-primary)!important;
  box-shadow:0 12px 28px rgba(var(--ls-store-primary-rgb),.26)!important;
}

#site-header .current-shop-items-dropdown .woocommerce-mini-cart__buttons a.checkout:hover{
  background:var(--ls-store-primary-hover)!important;
  border-color:var(--ls-store-primary-hover)!important;
}

/* View Cart */
#site-header .current-shop-items-dropdown .woocommerce-mini-cart__buttons a.button:not(.checkout):hover{
  background:rgba(var(--ls-store-card-soft-rgb),.08)!important;
  color:var(--ls-store-white)!important;
  border-color:var(--ls-store-primary)!important;
}

/* Empty cart */
#site-header .current-shop-items-dropdown .woocommerce-mini-cart__empty-message{
  color:var(--ls-store-bg-soft)!important;
  font-weight:700!important;
}

/* =========================================================
   GLOBAL SYSTEM FONT FALLBACK
========================================================= */

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Georgia, "Times New Roman", serif;
}

/* =========================================================
   END: GLOBAL SYSTEM FONT FALLBACK
========================================================= */

/* =========================================================
   FONT AWESOME DISPLAY SAFETY
   Owner: OceanWP Font Awesome 6 solid font
========================================================= */

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/wp-content/themes/oceanwp/assets/fonts/fontawesome/webfonts/fa-solid-900.woff2")
    format("woff2");
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/wp-content/themes/oceanwp/assets/fonts/fontawesome/webfonts/fa-solid-900.woff2")
    format("woff2");
}

/* =========================================================
   END FILE: LETZSHOPY STORE CORE
========================================================= */