/* ============================================================
   LEVEL UP SHOWER SCREENS — Apple-style theme for Flatsome + WooCommerce
   Paste into: Appearance > Customize > Additional CSS
   (or a child theme's style.css)
   Pairs with Flatsome theme settings in the Implementation Guide.
   ============================================================ */

:root{
  --lu-ink:#1d1d1f;
  --lu-sub:#6e6e73;
  --lu-bg2:#f5f5f7;
  --lu-blue:#0E4887;
  --lu-line:#d2d2d7;
  --lu-green:#1d9e75;
}

/* ---------- 1. TYPOGRAPHY (SF Pro / system stack) ---------- */
body,
.nav > li > a,
button, input, select, textarea,
h1,h2,h3,h4,h5,h6{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
body{ color:var(--lu-ink); letter-spacing:-.01em; line-height:1.47; }
h1,h2,h3,h4,h5,h6{ color:var(--lu-ink); font-weight:600; letter-spacing:-.025em; }
h1{ font-size:clamp(34px,5vw,56px); line-height:1.06; }
h2{ font-size:clamp(28px,3.6vw,40px); }
h3{ font-size:21px; }
p{ color:var(--lu-ink); }
.lead, .is-large{ color:var(--lu-sub); }
a{ color:var(--lu-blue); }
a:hover{ color:#1682CA; }

/* ---------- 2. HEADER — frosted, translucent, sticky ---------- */
#header .header-main{ min-height:48px; }
#header.show-on-scroll .header-main,
.header-bg-color,
#header .header-wrapper{
  background-color:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.09);
  box-shadow:none !important;
}
.header-nav a{ font-size:13px !important; font-weight:400 !important; color:var(--lu-ink) !important; opacity:.85; }
.header-nav a:hover{ opacity:1; color:var(--lu-blue) !important; }
.logo a{ font-weight:600; letter-spacing:-.02em; color:var(--lu-ink); }

/* ---------- 3. BUTTONS — pill shaped ---------- */
.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.add_to_cart_button{
  border-radius:980px !important;
  font-weight:400 !important;
  letter-spacing:-.01em;
  text-transform:none !important;
  padding:.5em 1.4em;
}
.button.primary, .woocommerce .button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order{
  background-color:var(--lu-blue) !important;
  border-color:var(--lu-blue) !important;
  color:#fff !important;
}
.button.primary:hover, .woocommerce .button.alt:hover,
.woocommerce #place_order:hover{ background-color:#1682CA !important; }
.button.is-outline{
  color:var(--lu-blue) !important; border-color:var(--lu-blue) !important; background:transparent;
}

/* ---------- 4. PRODUCT LOOP (category / shop) ---------- */
.products .product-small.box{ text-align:center; }
.products .box-image{
  background:var(--lu-bg2);
  border-radius:20px;
  padding:22px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.products .col:hover .box-image{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}
.product-small .name a{ font-weight:600; color:var(--lu-ink); font-size:16px; }
.woocommerce ul.products li.product .price,
.product .price{ color:var(--lu-ink); font-weight:600; font-size:18px; }
.product .price del{ color:var(--lu-sub); font-weight:400; }
/* filter pills */
.nav-pills > li > a, .ux-filter-button{
  border-radius:980px !important; border:1px solid var(--lu-line); font-size:13px; padding:7px 16px;
}
.nav-pills > li.active > a{ background:var(--lu-ink); color:#fff; border-color:var(--lu-ink); }

/* sale / new badges */
.badge-inner, .onsale{
  border-radius:980px !important;
  background:#fbeaea !important; color:#a32d2d !important;
  font-size:12px; font-weight:600; box-shadow:none;
}

/* ---------- 5. SINGLE PRODUCT ---------- */
.product-gallery, .woocommerce div.product .images img{ border-radius:22px; }
.product-info .product_title{ font-size:clamp(30px,4vw,40px); }
.single-product .price{ font-size:28px; }
.woocommerce div.product form.cart .variations select{
  border-radius:12px; border:1px solid var(--lu-line); padding:10px 13px;
}
.product-info .quantity input.qty{ border-radius:12px; border:1px solid var(--lu-line); }
.woocommerce-tabs ul.tabs li a{ font-weight:600; }

/* ---------- 6. CART ---------- */
.woocommerce-cart table.cart{ border:none; }
.woocommerce table.shop_table{ border-radius:18px; border:1px solid var(--lu-line); overflow:hidden; }
.cart_totals, .cart-sidebar .col-inner{
  background:var(--lu-bg2); border-radius:22px; padding:26px;
}
.woocommerce .cart-collaterals .cart_totals h2{ font-size:21px; }
.woocommerce a.remove{ color:var(--lu-blue) !important; }

/* ---------- 7. CHECKOUT ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout #customer_details input,
.select2-container .select2-selection{
  border-radius:12px !important; border:1px solid var(--lu-line) !important;
  background:#fcfdfe; padding:12px 13px; min-height:46px;
}
.woocommerce form .form-row input.input-text:focus{
  border-color:var(--lu-blue) !important; box-shadow:0 0 0 3px rgba(14,72,135,.12);
}
#order_review, .woocommerce-checkout-review-order{
  background:var(--lu-bg2); border-radius:22px; padding:26px;
}
.woocommerce-checkout #payment{ background:transparent; border-radius:14px; }
.woocommerce-checkout #payment ul.payment_methods{
  border:none; padding:0;
}
.woocommerce-checkout #payment ul.payment_methods li{
  border:1px solid var(--lu-line); border-radius:14px; padding:14px 16px; margin-bottom:10px; list-style:none;
}

/* ---------- 8. MY ACCOUNT ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  border:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{
  border-radius:12px; margin-bottom:4px; border:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{ padding:11px 14px; border-radius:12px; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--lu-bg2); font-weight:500; color:var(--lu-ink); }
.woocommerce-MyAccount-content{ background:#fff; }

/* status pills (order list) */
.woocommerce-orders-table__cell-order-status mark{
  border-radius:980px; padding:5px 12px; font-weight:600; background:#e6f1fb; color:#0E4887;
}

/* ---------- 9. SECTIONS / CARDS GENERIC ---------- */
.section-bg.fill, .lu-surface{ background:var(--lu-bg2); }
.lu-card{ background:var(--lu-bg2); border-radius:22px; padding:40px 28px; }
.lu-card.white{ background:#fff; border:1px solid var(--lu-line); }
.lu-dark{ background:#1d1d1f; color:#f5f5f7; border-radius:22px; }
.lu-dark h1,.lu-dark h2,.lu-dark h3{ color:#fff; }

/* ---------- 10. FOOTER ---------- */
.footer-1, #footer{ background:var(--lu-bg2); }
#footer .widget a, #footer p{ color:var(--lu-sub); font-size:13px; }
#footer .widgettitle{ color:var(--lu-ink); font-size:12px; font-weight:600; }
.absolute-footer{ font-size:12px; color:var(--lu-sub); }

/* ---------- 11. TRUST / CHEVRON LINK HELPER ---------- */
.lu-chev::after{ content:" \203A"; }
.lu-eyebrow{ color:var(--lu-blue); font-weight:600; }