/*
  PREMLOOM ENVISION — pl-glass-wp FULL STYLESHEET
  Maps demo /new/ design to WordPress + WooCommerce
  Updated: April 2026
  ============================================================ */

/* ── 1. CSS VARIABLES + FONT IMPORT ───────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,500;0,600;1,400;1,500&display=swap');

:root {
  --pl-cream:      #FFFDEE;
  --pl-mint:       #E2FBCE;
  --pl-sage:       #9DC88D;
  --pl-green-mid:  #4D774E;
  --pl-green:      #164A41;
  --pl-amber:      #F1B24A;
  --pl-amber-d:    #D4952A;
  --pl-body:       #3A5C3D;
  --pl-muted:      #7A9E7E;
  --pl-r:          20px;
}

/* ── 2. GLOBAL BASE ────────────────────────────────────────── */
body {
  font-family: 'DM Sans', sans-serif !important;
  background-color: var(--pl-cream) !important;
  color: var(--pl-green) !important;
}
h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.product_title,
.entry-title {
  font-family: 'Playfair Display', serif !important;
  color: var(--pl-green) !important;
}
a { color: var(--pl-green) !important; }
a:hover { color: var(--pl-amber-d) !important; }

/* ── 3. AMBIENT BACKGROUND (fixed behind everything) ──────── */
.ambient-bg {
  position: fixed !important;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  z-index: -10 !important;
}
.ambient-overlay {
  position: fixed !important;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(255, 253, 238, 0.68) !important;
  z-index: -9 !important;
  pointer-events: none !important;
}

/* ── 4. ANNOUNCEMENT BAR ───────────────────────────────────── */
.pl-free-ship {
  background: var(--pl-green) !important;
  color: rgba(255, 253, 238, 0.92) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
  padding: 10px 16px !important;
  position: relative !important;
  z-index: 9999 !important;
}
.pl-free-ship a {
  color: var(--pl-amber) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ── 5. NAVIGATION ─────────────────────────────────────────── */
.nav {
  background: rgba(245, 242, 230, 0.72) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: none !important;
}
.nav-links a {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--pl-green) !important;
  padding: 8px 14px !important;
  border-radius: 30px !important;
  transition: all 0.2s !important;
}
.nav-links a:hover {
  background: rgba(255, 255, 255, 0.55) !important;
  color: var(--pl-green) !important;
}
.logo-txt {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--pl-green) !important;
}
.logo-txt span {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--pl-green) !important;
}

/* ── 6. HERO SECTION ──────────────────────────────────────── */
.hero-sub {
  background: rgba(228, 246, 222, 0.84) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  border: 1px solid rgba(22, 74, 65, 0.18) !important;
  border-radius: 40px !important;
  padding: 16px 32px !important;
  color: var(--pl-green) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* ── 7. SECTION LAYOUT ────────────────────────────────────── */
/* Make all WP/WC page wrappers transparent so ambient bg shows */
.woocommerce,
.woocommerce-page,
.products-page,
.site-content,
.entry-content,
.woocommerce-product-gallery,
#page, #content, #main,
.site-main {
  background: transparent !important;
}

/* Section label line (— EXPLORE —) */
.section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--pl-green) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
.section-label::before,
.section-label::after {
  content: '' !important;
  width: 30px !important;
  height: 1.5px !important;
  background: rgba(22, 74, 65, 0.4) !important;
}

/* ── 8. SHOP PAGE — PRODUCT GRID ─────────────────────────── */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 1100px) {
  ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 480px) {
  ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

/* Product card — maps to demo .shop-card */
li.product {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: var(--pl-r) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(22, 74, 65, 0.07) !important;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s !important;
  padding: 0 !important;
  position: relative !important;
  margin: 0 !important;
  float: none !important;
}
li.product:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(22, 74, 65, 0.14) !important;
}

/* Product image — portrait ratio like demo */
li.product a img,
li.product .woocommerce-loop-product__link img,
li.product .attachment-woocommerce_thumbnail {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1) !important;
}
li.product:hover a img,
li.product:hover .attachment-woocommerce_thumbnail {
  transform: scale(1.05) !important;
}

/* Overlay tint on image hover */
li.product .woocommerce-loop-product__link::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(22, 74, 65, 0.15) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
li.product:hover .woocommerce-loop-product__link::after {
  opacity: 1 !important;
}
li.product .woocommerce-loop-product__link {
  display: block !important;
  position: relative !important;
}

/* Product title — Playfair Display */
li.product .woocommerce-loop-product__title {
  font-family: 'Playfair Display', serif !important;
  font-size: 14px !important;
  color: var(--pl-green) !important;
  line-height: 1.35 !important;
  padding: 10px 12px 4px !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

/* Product price */
li.product .price {
  display: block !important;
  padding: 0 12px 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--pl-amber-d) !important;
  margin: 0 !important;
}
li.product .price del,
li.product .price del .woocommerce-Price-amount {
  color: var(--pl-muted) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  opacity: 1 !important;
}
li.product .price ins,
li.product .price ins .woocommerce-Price-amount {
  text-decoration: none !important;
  color: var(--pl-amber-d) !important;
}

/* Add to cart button */
li.product .button,
li.product a.button,
li.product .add_to_cart_button,
li.product .product_type_simple {
  display: block !important;
  width: calc(100% - 24px) !important;
  margin: 0 12px 12px !important;
  background: var(--pl-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background 0.25s !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
li.product .button:hover,
li.product a.button:hover,
li.product .add_to_cart_button:hover {
  background: var(--pl-amber) !important;
  color: #fff !important;
  transform: none !important;
}

/* Sale badge */
li.product .onsale {
  background: var(--pl-amber) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  top: 10px !important;
  left: 10px !important;
  min-width: unset !important;
  min-height: unset !important;
}

/* ── 9. SHOP PAGE HEADER + SORT BAR ──────────────────────── */
.products-page h1.page-title,
h1.page-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  color: var(--pl-green) !important;
  font-weight: 500 !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}
.woocommerce-result-count {
  font-size: 13px !important;
  color: var(--pl-muted) !important;
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
}
.woocommerce-ordering select {
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(22,74,65,0.15) !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: var(--pl-green) !important;
  outline: none !important;
}
.pl-sort-bar {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 12px !important;
}

/* ── 10. SINGLE PRODUCT PAGE ─────────────────────────────── */
.single-product div.product {
  background: transparent !important;
  padding: 0 !important;
}

/* Gallery */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .wp-post-image {
  border-radius: 24px !important;
  object-fit: cover !important;
  width: 100% !important;
  box-shadow: 0 8px 30px rgba(22, 74, 65, 0.08) !important;
}
.woocommerce-product-gallery__thumb-list {
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.woocommerce-product-gallery__thumb-list li img {
  border-radius: 12px !important;
  border: 2px solid transparent !important;
  transition: border-color 0.2s !important;
}
.woocommerce-product-gallery__thumb-list .flex-active img {
  border-color: var(--pl-amber) !important;
}

/* Product title h1 */
h1.product_title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(26px, 4vw, 42px) !important;
  color: var(--pl-green) !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  margin-bottom: 12px !important;
}

/* Star rating */
.star-rating,
.woocommerce-product-rating .star-rating {
  color: var(--pl-amber) !important;
}
.woocommerce-product-rating a {
  font-size: 13px !important;
  color: var(--pl-muted) !important;
}

/* Price */
.single-product .price,
p.price {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--pl-amber-d) !important;
}
.single-product .price del,
p.price del {
  font-size: 16px !important;
  color: var(--pl-muted) !important;
  font-weight: 400 !important;
}

/* Short description */
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
  font-size: 15px !important;
  color: var(--pl-body) !important;
  line-height: 1.75 !important;
}

/* Quantity */
.quantity input.qty {
  border: 1px solid rgba(22,74,65,0.2) !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,0.6) !important;
  color: var(--pl-green) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 10px 14px !important;
}

/* Add to cart button — main CTA */
.single_add_to_cart_button,
button.single_add_to_cart_button {
  background: var(--pl-green) !important;
  color: #fff !important;
  border: 2px solid var(--pl-green) !important;
  border-radius: 40px !important;
  padding: 14px 32px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  text-transform: uppercase !important;
}
.single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover {
  background: transparent !important;
  color: var(--pl-green) !important;
}

/* Tabs */
.woocommerce-tabs .tabs li a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--pl-muted) !important;
}
.woocommerce-tabs .tabs li.active a {
  color: var(--pl-green) !important;
  border-bottom: 2px solid var(--pl-amber) !important;
}
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li {
  font-size: 14px !important;
  color: var(--pl-body) !important;
  line-height: 1.75 !important;
}

/* Related products heading */
.related.products > h2,
.upsells.products > h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 28px !important;
  color: var(--pl-green) !important;
  font-weight: 500 !important;
  margin-bottom: 24px !important;
}

/* ── 11. TESTIMONIALS ────────────────────────────────────── */
.testimonial-card {
  background: rgba(255, 253, 238, 0.97) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1px solid rgba(22, 74, 65, 0.12) !important;
  border-radius: 24px !important;
}
.tc-text { color: var(--pl-green) !important; font-size: 14px !important; line-height: 1.7 !important; }
.tc-name { color: var(--pl-green) !important; font-weight: 700 !important; }
.tc-avatar { background: var(--pl-green) !important; color: var(--pl-cream) !important; }
.tc-stars { color: var(--pl-amber) !important; }

/* ── 12. TRUST BAR ───────────────────────────────────────── */
.trust {
  background: rgba(22, 74, 65, 0.06) !important;
  backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(22,74,65,0.08) !important;
  border-bottom: 1px solid rgba(22,74,65,0.08) !important;
}
.ti { color: var(--pl-green) !important; font-weight: 600 !important; }
.tic {
  background: rgba(255,255,255,0.9) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* ── 13. CART / CHECKOUT PAGES ───────────────────────────── */
.woocommerce-cart table.cart,
.woocommerce-checkout #order_review,
.woocommerce-checkout form.checkout {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 24px !important;
  padding: 32px !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 40px rgba(22, 74, 65, 0.08) !important;
}
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals {
  background: rgba(255,253,238,0.9) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  border: 1px solid rgba(22,74,65,0.08) !important;
}
.wc-proceed-to-checkout .checkout-button,
.woocommerce #payment #place_order {
  background: var(--pl-green) !important;
  border-radius: 40px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  padding: 14px 32px !important;
  border: 2px solid var(--pl-green) !important;
}
.wc-proceed-to-checkout .checkout-button:hover {
  background: var(--pl-amber) !important;
  border-color: var(--pl-amber) !important;
}

/* Form inputs */
.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="password"],
.woocommerce form textarea,
.woocommerce form select {
  border: 1px solid rgba(22, 74, 65, 0.2) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--pl-green) !important;
  padding: 12px 16px !important;
}
.woocommerce form .input-text:focus,
.woocommerce form input:focus {
  border-color: var(--pl-amber) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(241, 178, 74, 0.12) !important;
}

/* ── 14. FOOTER ──────────────────────────────────────────── */
footer.footer,
.site-footer,
footer {
  background: var(--pl-green) !important;
  color: rgba(255, 253, 238, 0.88) !important;
  padding: 60px 5% 32px !important;
}
footer a,
.site-footer a {
  color: rgba(255, 253, 238, 0.7) !important;
  transition: color 0.2s !important;
}
footer a:hover,
.site-footer a:hover {
  color: var(--pl-amber) !important;
}
footer h3, footer h4,
.site-footer h3, .site-footer h4 {
  font-family: 'Playfair Display', serif !important;
  color: #fff !important;
}
.footer-bottom,
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,253,238,0.12) !important;
  padding-top: 20px !important;
  margin-top: 40px !important;
  font-size: 12px !important;
  color: rgba(255,253,238,0.5) !important;
}

/* ── 15. WOOCOMMERCE NOTICES ─────────────────────────────── */
.woocommerce-message,
.woocommerce-info {
  background: rgba(226, 251, 206, 0.8) !important;
  border-top: 3px solid var(--pl-green) !important;
  color: var(--pl-green) !important;
  border-radius: 12px !important;
  font-family: 'DM Sans', sans-serif !important;
}
.woocommerce-error {
  background: rgba(255, 220, 220, 0.8) !important;
  border-top: 3px solid #e53e3e !important;
  border-radius: 12px !important;
}

/* ── 16. PAGINATION ──────────────────────────────────────── */
.woocommerce-pagination ul,
nav.woocommerce-pagination ul {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  list-style: none !important;
  flex-wrap: wrap !important;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(22, 74, 65, 0.15) !important;
  background: rgba(255,255,255,0.5) !important;
  color: var(--pl-green) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
}
.woocommerce-pagination ul li span.current {
  background: var(--pl-green) !important;
  color: #fff !important;
  border-color: var(--pl-green) !important;
  font-weight: 700 !important;
}
.woocommerce-pagination ul li a:hover {
  background: rgba(22, 74, 65, 0.1) !important;
  border-color: rgba(22, 74, 65, 0.3) !important;
}

/* ── 17. WP ADMIN BAR OFFSET ──────────────────────────────── */
.admin-bar .nav { top: calc(32px + 30px) !important; }

/* ── 18. CATEGORY PILLS / SUBCATEGORY BAR ─────────────────── */
.subcategory-pills .pill,
.cat-pill,
.pl-sort-bar button {
  padding: 8px 20px !important;
  border-radius: 30px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(22,74,65,0.15) !important;
  color: var(--pl-green) !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
  font-family: 'DM Sans', sans-serif !important;
}
.subcategory-pills .pill:hover,
.subcategory-pills .pill.active,
.pl-sort-bar button.active {
  background: var(--pl-green) !important;
  color: #fff !important;
  border-color: transparent !important;
}


/* ===== Blog readability: glass-white panel behind article content ===== */
body.single-post main.single-post,
body.single main.single-post{
  background:rgba(255,255,255,0.86)!important;
  backdrop-filter:blur(25px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(25px) saturate(180%)!important;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,0.5)!important;
  box-shadow:0 10px 40px rgba(0,0,0,0.08)!important;
  padding:44px 48px!important;
  margin:36px auto 48px!important;
}
@media(max-width:600px){body.single-post main.single-post,body.single main.single-post{padding:24px 20px!important;margin:20px 12px 32px!important;border-radius:16px!important;}}