# Create the merged CSS file by appending the new "showcase" block
base_css = r""":root{
  --product-card-width: 300px;
  --product-image-height: 225px;
  --glass-bg: rgba(0,0,0,0.6);
  --glass-border: rgba(255,255,255,0.2);
  --text: #fff;
  --accent: #000;
}

/* Reset basics */
*{box-sizing:border-box}
body{margin:0;font-family:Arial, Helvetica, sans-serif;background:#f5f5f5;color:#333}

/* Header (black glass) */
#site-header{
  position:sticky; top:0; z-index:1000;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--glass-border);
}
#site-header .nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
}
#site-header .brand a{color:#fff; text-decoration:none; font-weight:bold; letter-spacing:.5px}
.primary-nav .menu{list-style:none; margin:0; padding:0; display:flex; gap:18px}
.primary-nav .menu a{color:#fff; text-decoration:none; position:relative; padding-bottom:2px}
.primary-nav .menu a::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:#fff;transform:scaleX(0);transition:transform .25s}
.primary-nav .menu a:hover::before{transform:scaleX(1)}

/* Fixed account + cart icons */
.header-icons{display:flex; align-items:center; gap:14px}
.account-link,.cart-link{position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:8px; background:rgba(255,255,255,0.1); color:#fff; text-decoration:none}
.icon-user::before{content:"\1F464"} /* simple user emoji */
.icon-cart::before{content:"\1F6D2"} /* cart emoji */
.cart-count{position:absolute; top:-6px; right:-6px; background:#fff; color:#000; border-radius:10px; padding:0 6px; font-size:12px}

/* Mini-cart dropdown */

.mini-cart-dropdown{position:absolute; right:0;  width:320px; max-height:60vh; overflow:auto;
  background:var(--glass-bg); color:var(--text); border:1px solid var(--glass-border);
  border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .25s, transform .25s;
}
.cart-link-wrap.open .mini-cart-dropdown{opacity:1; transform:translateY(0); pointer-events:auto}
.mini-cart-inner{padding:10px}
.mini-cart-item{display:flex; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.1)}
.mini-cart-item:last-child{border-bottom:none}
.mini-cart-item .meta .name{color:#fff; text-decoration:none}
.woocommerce-mini-cart__buttons .button{background:#000;color:#fff;border:none;padding:8px 12px;border-radius:8px;text-decoration:none}

/* Hero compact */
.hero-compact{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:40vh; background:linear-gradient(180deg, #111, #333);
  color:#fff; position:relative;
}
/* removed .hero-inner overlay */
.hero-search form{display:flex; gap:8px; justify-content:center; margin-top:12px}
.hero-search input[type=search]{padding:10px 12px; border-radius:8px; border:1px solid #555; background:rgba(255,255,255,.08); color:#fff; width:min(520px, 80vw)}
.hero-search button, .cta-button{background:#000; color:#fff; border:none; padding:10px 16px; border-radius:8px; cursor:pointer}
.hero-search button:hover, .cta-button:hover{filter:brightness(1.1)}

/* Sticky tag filter bar */
.sticky-filter{position:sticky; top:58px; z-index:900; background:rgba(0,0,0,.55); backdrop-filter: blur(8px); border-bottom:1px solid var(--glass-border)}
.tag-filter-inner{display:flex; align-items:center; gap:10px; padding:10px 16px; color:#fff}
.tag-scroll{display:flex; gap:10px; overflow:auto}
.filter-link{color:#fff; text-decoration:none; padding:8px 12px; background:rgba(255,255,255,.1); border-radius:20px; white-space:nowrap}
.filter-link:hover{background:rgba(255,255,255,.2)}

/* Product grid */
ul.products{list-style:none; margin:24px auto; padding:0; display:flex; flex-wrap:wrap; gap:24px; justify-content:center}
.product-card{flex:0 0 var(--product-card-width); background:var(--glass-bg); color:#fff; border:1px solid var(--glass-border); border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,.4); transition:transform .25s, box-shadow .25s; overflow:hidden}
.product-card:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.45)}
.product-card .product-thumb{position:relative}
.product-card img{width:100%; height:var(--product-image-height); object-fit:cover; display:block}
.product-card .onsale{position:absolute; top:10px; left:10px; background:rgba(255,255,255,.15); color:#fff; border:1px solid var(--glass-border); padding:6px 10px; border-radius:999px; font-size:12px; backdrop-filter: blur(6px)}
.product-card .product-title{margin:12px 12px 0; font-size:18px}
.product-card .price-wrap{margin:6px 12px 12px}
.product-card .add-cart-wrap{padding:0 12px 14px}
.product-card .button{width:100%; background:#000; color:#fff; border:none; padding:10px 12px; border-radius:8px; text-decoration:none; display:inline-block; text-align:center}
.product-card .button:hover{filter:brightness(1.1)}

/* Footer */
#site-footer{padding:20px; text-align:center; background:#000; color:#fff}

/* Modals / Popups */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:2000}
.return-popup,.contact-popup{background:var(--glass-bg); color:#fff; border:1px solid var(--glass-border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.6); padding:20px; width:min(520px, 90vw); position:relative}
.close-btn{position:absolute; top:10px; right:10px; font-size:24px; cursor:pointer; transition:transform .3s, color .3s}
.close-btn:hover{transform:rotate(360deg); color:red}
.contact-popup input,.contact-popup textarea{width:100%; background:rgba(255,255,255,.15); border:1px solid var(--glass-border); color:#fff; border-radius:8px; padding:10px; margin-bottom:12px}

/* Checkout + Cart + Account black-glass */
.woocommerce-cart table,
.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-account .woocommerce,
.woocommerce-account .addresses .col-1,
.woocommerce-account .addresses .col-2{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:12px;
  padding:16px;
  color:#fff;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td{color:#fff; border-color:rgba(255,255,255,.15)}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{background:#000; color:#fff; border:none; border-radius:8px; padding:10px 14px}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{filter:brightness(1.1)}
.woocommerce-error, .woocommerce-info, .woocommerce-message{background:rgba(255,255,255,.1); color:#fff; border-top-color:#fff}

/* Mobile tweaks */
@media (max-width: 768px){
  .primary-nav .menu{display:none}
  .sticky-filter{top:50px}
  .hero-compact{min-height:36vh}
}

/* Global link color to white */
a{color:#fff}
a:hover{opacity:.9}

/* Sticky filter bar padding + active state + integrated search */
.tag-filter-inner{gap:16px; padding:14px 20px}
.tag-filter .sticky-search{display:flex; gap:8px; align-items:center}
.tag-filter .sticky-search .search-field{padding:8px 10px; border-radius:8px; border:1px solid #555; background:rgba(255,255,255,.08); color:#fff; min-width:240px}
.tag-filter .sticky-search button{background:#000; color:#fff; border:none; padding:8px 12px; border-radius:8px; cursor:pointer}
.filter-link.active{background:rgba(255,255,255,.3);}

/* Product card extra padding */
.product-card .product-title{margin:16px 16px 4px}
.product-card .price-wrap{margin:6px 16px 16px}
.product-card .add-cart-wrap{padding:0 16px 16px}

/* Account page "profile" feel */
.woocommerce-account .woocommerce{
  display:grid; grid-template-columns: 260px 1fr; gap:20px;
}
.woocommerce-MyAccount-navigation{
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:12px; padding:16px; color:#fff;
}
.woocommerce-MyAccount-navigation ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.woocommerce-MyAccount-navigation a{text-decoration:none; display:block; padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.08)}
.woocommerce-MyAccount-navigation a:hover{background:rgba(255,255,255,.16)}
.woocommerce-MyAccount-content{
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:12px; padding:20px; color:#fff;
}
/* Simple profile header */
.woocommerce-MyAccount-content h2:first-child, .woocommerce-MyAccount-content h3:first-child{
  padding-left:64px; position:relative;
}
.woocommerce-MyAccount-content h2:first-child::before, .woocommerce-MyAccount-content h3:first-child::before{
  content:"\1F464"; position:absolute; left:0; top:-6px; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12);
}

/* Contact link styling in header */
.contact-link{color:#fff; text-decoration:none; padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.1)}
.contact-link:hover{background:rgba(255,255,255,.2)}

/* Hero: if header image exists, we use it; otherwise gradient already defined */
.hero-compact{background-size:cover; background-position:center}

/* Ensure no search form displays inside hero */
.hero .woocommerce-product-search{display:none !important;}

/* ensure no leftover hero-inner displays */
.hero-inner{display:none !important;}

/* Mini cart usability fixes */
.cart-link-wrap{ position:relative; padding-bottom:8px; }
.mini-cart-dropdown{ top: calc(100% + 6px); }
.cart-link-wrap:hover .mini-cart-dropdown{ opacity:1; transform:translateY(0); pointer-events:auto }

/* === Overlay Card (mini-cart inspired) === */
.overlay-card{ display:flex; flex-direction:column; height:100%; border-radius:14px; overflow:hidden; background:#111; border:1px solid var(--glass-border); box-shadow:0 6px 16px rgba(0,0,0,.35); }
.overlay-card .product-thumb{ position:relative; flex:0 0 auto; }
.overlay-card .product-thumb img{ width:100%; height:var(--product-image-height); object-fit:cover; display:block; }
.overlay-card .onsale{ position:absolute; top:10px; left:10px; background:rgba(0,0,0,.55); border:1px solid var(--glass-border); color:#fff; border-radius:999px; padding:6px 10px; }

/* Hover overlay (mini-cart style) */
.overlay-card .card-hover-overlay{position:absolute; left:0; right:0; bottom:0; height:45%;display:flex; align-items:center; justify-content:center;padding:16px; background:rgba(0,0,0,.55); backdrop-filter: blur(8px);opacity:0; transform: translateY(16px); transition: opacity .28s ease, transform .32s ease-out;pointer-events:none; border-radius:0;}
.overlay-card:hover .card-hover-overlay{ opacity:1; transform: translateY(0); }
.overlay-card .overlay-inner{ width:100%; max-width:90%; color:#fff; }
.overlay-card .overlay-title{ margin:0 0 6px; font-size:18px; color:#fff; }
.overlay-card .overlay-excerpt{ margin:0 0 10px; color:#eaeaea; opacity:.92; }
.overlay-card .button-ghost{ background:transparent; border:1px solid var(--glass-border); color:#fff; border-radius:10px; padding:10px 12px; }
.overlay-card .button-ghost:hover{ background:rgba(255,255,255,.1); }

/* Bottom action bar */
.overlay-card .card-action-bar{
  display:flex; align-items:center; gap:10px;
  background:rgba(0,0,0,.85); border-top:1px solid var(--glass-border);
  padding:12px; border-radius:0 0 14px 14px; margin-top:auto;
}
.overlay-card .action-left{ flex:1 1 auto; }
.overlay-card .action-left .button{ width:100%; text-align:center; background:#000; color:#fff; border:none; border-radius:12px; padding:10px 12px; }
.overlay-card .action-right.price-pill{ flex:0 0 auto; padding:10px 12px; border-radius:12px; background:#000; color:#fff; font-weight:800; min-width:120px; text-align:center; }
.overlay-card .action-right.price-pill .amount, 
.overlay-card .action-right.price-pill bdi{ color:#fff !important; }
.overlay-card .action-divider{ width:8px; height:28px; border-radius:999px; background:rgba(255,255,255,.12); }

/* Alignment consistency */
.products li.product.overlay-card{ height:100%; }
ul.products{ align-items:stretch; }

/* === Alignment & sizing fixes === */
:root{
  --product-image-height: 360px; /* adjust if needed */
}
ul.products{ align-items:stretch; }
ul.products li.product{ height:100%; }

.overlay-card{ display:flex; flex-direction:column; height:100%; }
.overlay-card .product-thumb{ flex:0 0 auto; }
.overlay-card .product-thumb img{ width:100%; height:var(--product-image-height); object-fit:cover; display:block; }

/* Bottom action bar gets a fixed min-height to equalize rows */
.overlay-card .card-action-bar{ min-height: 58px; }

/* Slim divider line */
.overlay-card .action-divider{
  width:1px; height:28px; background:rgba(255,255,255,.25); border-radius:0; 
}

/* Hover overlay: only cover about half of the image, centered vertically */
.overlay-card .card-hover-overlay{position:absolute; left:0; right:0; bottom:0; height:45%;display:flex; align-items:center; justify-content:center;padding:16px; background:rgba(0,0,0,.55); backdrop-filter: blur(8px);opacity:0; transform: translateY(16px); transition: opacity .28s ease, transform .32s ease-out;pointer-events:none; border-radius:0;}
.overlay-card:hover .card-hover-overlay{ opacity:1; transform: translateY(0); }

/* Centered popup look (reuse overlay class styles) */
#quickviewOverlay.overlay{ display:none; }
.quickview-popup{
  background: rgba(0,0,0,0.6); color:#fff; border:1px solid rgba(255,255,255,0.18); border-radius:12px;
  width:min(900px, 94vw); padding:20px; position:relative; box-shadow:0 10px 30px rgba(0,0,0,.6);
  margin: auto;
}
.quickview-content{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start; }
.quickview-gallery img{ width:100%; height:auto; border-radius:8px; display:block; }
.quickview-summary h2{ margin:0 0 6px; }
.quickview-summary .price{ font-size:22px; font-weight:700; color:#fff; margin-bottom:10px; }
.quickview-summary .button{ background:#000; color:#fff; border:none; border-radius:10px; padding:10px 12px; }

@media (max-width: 820px){
  .quickview-content{ grid-template-columns: 1fr; }
  :root{ --product-image-height: 300px; }
}

/* --- Quick View force fix --- */
.overlay-card .card-hover-overlay{ pointer-events:auto !important; z-index:2 !important; }
.overlay-card .product-thumb img{ position:relative; z-index:1; }
.overlay-card .quickview-btn{ cursor:pointer; }


/* === Single Product (Glass) === */
.obs-single-product .obs-sp-container{max-width:1200px;margin:40px auto;padding:0 16px}
.obs-sp-card{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:14px; 
  box-shadow:0 12px 36px rgba(0,0,0,.35); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:20px;
}
@media (max-width:960px){
  .obs-sp-card{grid-template-columns:1fr}
}
.obs-sp-gallery .woocommerce-product-gallery{border-radius:10px; overflow:hidden}
.obs-sp-summary .obs-sp-summary-inner{background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:18px}
.obs-sp-summary .price{font-size:1.4rem}
.obs-sp-summary .single_add_to_cart_button{background:#000;color:#fff;border:none;border-radius:10px;padding:10px 16px}
.obs-sp-related{margin-top:28px}


/* === Single Product Enhancements v10 === */

/* Stronger text contrast inside the glass summary */
.obs-sp-summary .obs-sp-summary-inner{
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  color:#fff;
}
.obs-sp-summary .obs-sp-summary-inner p,
.obs-sp-summary .obs-sp-summary-inner li{ color:#f2f2f2; line-height:1.6 }
.obs-sp-summary .obs-sp-summary-inner a{ color:#e6e6e6; text-decoration:underline }

/* Typography hierarchy for pop */
.obs-single-product .product_title{ font-size:2rem; letter-spacing:.3px; margin-bottom:.35rem }
.obs-single-product .price{ font-size:1.6rem; font-weight:700; margin: .35rem 0 1rem }
.obs-single-product .woocommerce-product-details__short-description{ font-size:1.05rem }

/* Sticky summary on desktop for a premium feel */
@media (min-width: 980px){
  .obs-sp-summary{ position: sticky; top: 92px; height: fit-content }
}

/* Match global button styling + add subtle lift */
.obs-sp-summary .single_add_to_cart_button{
  background:#000; color:#fff; border:none; border-radius:10px; padding:12px 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transform: translateY(0); transition: transform .15s ease, box-shadow .15s ease, opacity .2s;
}
.obs-sp-summary .single_add_to_cart_button:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.45) }
.obs-sp-summary .single_add_to_cart_button:active{ transform: translateY(0) scale(.98) }

/* Glass card glow accent */
.obs-sp-card{
  position:relative;
  overflow:hidden;
}
.obs-sp-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(1200px 300px at -10% -10%, rgba(255,255,255,.06), transparent 50%),
              linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  mix-blend-mode: screen;
}

/* Gallery polish + gentle zoom on hover */
.obs-sp-gallery .woocommerce-product-gallery__image img{ transition: transform .35s ease }
.obs-sp-gallery:hover .woocommerce-product-gallery__image img{ transform: scale(1.02) }

/* Tweak tabs/related spacing & readability */
.woocommerce div.product .woocommerce-tabs{ 
  background: rgba(0,0,0,0.45);
  border:1px solid var(--glass-border);
  border-radius:12px;
  padding: 16px;
}
.woocommerce div.product .woocommerce-tabs .panel{ color:#f1f1f1 }
.obs-sp-related .related ul.products li.product .woocommerce-loop-product__title{ color:#fff }

/* Reviews stars visibility on dark glass */
.woocommerce .star-rating span:before,
.woocommerce .star-rating:before{ color:#ffd166 }


/* === Single Product Hero / Variants / Motion v11 === */

/* Hero-style image presentation */
.obs-sp-gallery{
  position:relative;
  border-radius:14px;
  overflow:hidden;
}
.obs-sp-gallery .woocommerce-product-gallery__image img{
  width:100%; height:auto; object-fit:cover;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

/* Variant pills styling */
.obs-sp-summary .variations select{display:none}
.obs-sp-summary table.variations td.label{display:none}
.obs-sp-summary table.variations td.value{
  display:flex; flex-wrap:wrap; gap:10px;
}
.obs-sp-summary table.variations td.value select{display:none}
.obs-sp-summary .variation-pills button{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:20px;
  padding:6px 14px;
  color:#fff;
  cursor:pointer;
  transition:all .2s ease;
}
.obs-sp-summary .variation-pills button:hover{background:rgba(255,255,255,0.18)}
.obs-sp-summary .variation-pills button.active{background:#000; border-color:#000;}

/* Entrance animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)}}
.obs-sp-summary .product_title,
.obs-sp-summary .price,
.obs-sp-summary .woocommerce-product-details__short-description,
.obs-sp-summary .single_add_to_cart_button{
  animation: fadeUp .5s ease forwards;
  opacity:0;
}
.obs-sp-summary .product_title{animation-delay:.1s}
.obs-sp-summary .price{animation-delay:.25s}
.obs-sp-summary .woocommerce-product-details__short-description{animation-delay:.4s}
.obs-sp-summary .single_add_to_cart_button{animation-delay:.55s}

/* Ensure tabs also stand out with animation */
.woocommerce div.product .woocommerce-tabs{
  animation: fadeUp .6s ease forwards;
  opacity:0; animation-delay:.7s
}


/* === Edge-to-Edge Hero === */
.obs-sp-hero{position:relative; width:100%; min-height:42vh; background-size:cover; background-position:center;}
.obs-sp-hero__overlay{position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,0) 100%),
  radial-gradient(800px 200px at 10% 10%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none}
.obs-sp-hero__inner{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:24px}
.obs-sp-hero .product_title{color:#fff; text-shadow:0 10px 30px rgba(0,0,0,.6); font-size:2.4rem; margin:0}

/* Add breathing room after hero */
.obs-single-product .obs-sp-container{margin-top:18px}

/* === Variant Pills === */
.obs-variation-group{margin:10px 0 14px}
.obs-variation-label{display:block; font-size:.9rem; color:#eaeaea; margin-bottom:6px}
.obs-variation-pills{display:flex; flex-wrap:wrap; gap:8px}
.obs-variation-pill{
  padding:8px 12px; border:1px solid var(--glass-border); border-radius:999px; cursor:pointer;
  background: rgba(255,255,255,.06); color:#fff; font-size:.95rem;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.obs-variation-pill:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.35) }
.obs-variation-pill.active{ background:#000; border-color:#000 }
.obs-variation-pill.disabled{ opacity:.45; cursor:not-allowed }
.variations_form .variations select{ position:absolute !important; left:-9999px } /* keep accessible fallback in DOM */

/* === Motion Accents === */
@keyframes obsFadeUp{ from{opacity:0; transform: translateY(10px)} to{opacity:1; transform: translateY(0)} }
.obs-anim-title{ animation: obsFadeUp .35s ease both }
.obs-sp-summary .price{ animation: obsFadeUp .35s ease .05s both }
.obs-sp-summary .single_add_to_cart_button{ animation: obsFadeUp .35s ease .1s both }
.obs-sp-summary .woocommerce-product-details__short-description{ animation: obsFadeUp .35s ease .15s both }

/* Readability: white price on single product */
.obs-single-product .price{ color:#fff !important }

/* === Minimal Product Gallery + Lightbox === */
.obs-sp-gallery{ position: relative }
.obs-sp-gallery .woocommerce-product-gallery{ background:none; box-shadow:none }
.obs-sp-gallery .woocommerce-product-gallery__image img{ cursor: zoom-in }



/* Lightbox inner */
.obs-lightbox{ max-width:min(980px, 92vw); margin: 6vh auto; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:14px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5) }
.obs-lightbox__top{ position:relative; }
.obs-lightbox__imgwrap{ display:flex; align-items:center; justify-content:center; min-height:50vh; background:rgba(0,0,0,.25) }
.obs-lightbox__imgwrap img{ max-width:100%; max-height:74vh; width:auto; height:auto; display:block }
.obs-lightbox__controls{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none }
.obs-lightbox__btn{ pointer-events:auto; background:rgba(0,0,0,.5); border:1px solid var(--glass-border); width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; margin:0 10px; cursor:pointer; transition: transform .12s, background .12s }
.obs-lightbox__btn:hover{ transform: scale(1.05); background:rgba(0,0,0,.65) }
.obs-lightbox__close{ position:absolute; top:10px; right:10px }

.obs-lightbox__bar{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; font-size:.95rem; color:#eaeaea; }
.obs-lightbox__thumbs{ display:flex; gap:8px; padding:10px 12px; overflow:auto }
.obs-lightbox__thumb{ width:54px; height:54px; border-radius:8px; overflow:hidden; border:1px solid var(--glass-border); cursor:pointer; opacity:.8; transition: opacity .12s, transform .12s }
.obs-lightbox__thumb:hover{ opacity:1; transform: translateY(-1px) }
.obs-lightbox__thumb.active{ outline:2px solid #fff; outline-offset:2px }
.obs-lightbox__thumb img{ width:100%; height:100%; object-fit:cover }

/* === Shop Archive Hero === */
.obs-archive-hero{
  position:relative; width:100%; min-height:36vh; background-size:cover; background-position:center;
  border-bottom:1px solid var(--glass-border);
}
.obs-archive-hero--fallback{ background:linear-gradient(180deg,#111,#333) }
.obs-archive-hero__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 50%, rgba(0,0,0,0) 100%); pointer-events:none }
.obs-archive-hero__inner{ position:relative; display:flex; align-items:flex-end; justify-content:center; min-height:36vh; padding:24px }
.obs-archive-title{ color:#fff; font-size:2.2rem; text-shadow:0 10px 30px rgba(0,0,0,.6); margin:0 }

/* === Single Product: Overlap hero into card === */
@media (min-width: 768px){
  .obs-single-product .obs-sp-container{ margin-top: -80px; position: relative; z-index: 2 }
  .obs-single-product .obs-sp-card{ box-shadow: 0 22px 60px rgba(0,0,0,.55) }
  .obs-sp-hero{ height: clamp(260px, 42vh, 520px); }
}
@media (min-width: 1200px){
  .obs-single-product .obs-sp-container{ margin-top: -110px; }
}


/* === Move title into description card: hide hero title and style summary title === */
.obs-hero-title{ display:none !important; }

.single-product div.product .summary .product_title{
  text-align:center;
  margin-top: 0;
  margin-bottom: 12px;
}

/* Keep overlap effect; ensure card stacks above hero image, not needed for title anymore */
@media (min-width:768px){
  .obs-single-product .obs-sp-container{ margin-top: -80px; position: relative; z-index: 2; }
}



/* === Alt approach (disabled by default): show hero title above card === */
/* To enable, remove display:none from .obs-hero-title above and uncomment below.
@media (min-width:768px){
  .obs-sp-hero{ position: relative; }
  .obs-sp-hero__inner{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:24px; z-index: 5 !important; }
  .obs-sp-hero .product_title{ position:relative; z-index: 10 !important; margin-bottom: clamp(80px, 14vh, 200px); text-align:center; }
}
*/



/* === Natural Flow Tweaks for Single Product Summary Card (r4) === */
.single-product div.product .summary .product_title{
  text-align:left;           /* cards read more naturally left-aligned */
  line-height:1.1;
  letter-spacing:0.1px;
  margin: 0 0 10px 0;        /* tighten spacing under title */
}

/* subtle divider under the title for hierarchy */
.single-product div.product .summary .product_title::after{
  content:"";
  display:block;
  height:1px;
  background: rgba(255,255,255,0.08);
  margin-top:10px;
}

/* reviews link smaller & muted; give breathing room from title */
.single-product .summary .woocommerce-review-link{
  display:inline-block;
  font-size:0.9rem;
  opacity:0.75;
  margin: 6px 0 14px 0;
  text-decoration: underline;
}

/* price bigger weight; place a touch of margin above */
.single-product .summary .price{
  font-weight:700;
  font-size:1.35rem;
  margin-top: 4px;
}

/* align the summary content vertically with the image on larger screens */
@media (min-width: 992px){
  .single-product div.product .summary{
    padding-top: 8px;           /* nudge title down a bit */
  }
  .obs-single-product .obs-sp-container{ 
    margin-top: -70px;          /* slightly less overlap for calmer spacing */
  }
  .obs-single-product .obs-sp-card{
    padding-top: 26px;          /* more breathing room inside the card header area */
  }
}

/* harmonize column gap so the two columns feel balanced */
@media (min-width: 992px){
  .single-product div.product .entry-summary,
  .single-product div.product .woocommerce-product-gallery{
    scroll-margin-top: 80px; /* safe anchor behavior */
  }
  .single-product div.product .product{ gap: clamp(24px, 3vw, 40px); }
}

/* Optional: soften hero overlay a bit for better cohesion */
.obs-sp-hero__overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.32) 40%, rgba(0,0,0,0) 100%),
    radial-gradient(800px 200px at 10% 10%, rgba(255,255,255,.05), transparent 60%);
}



/* r6 removed */
@media (min-width: 992px){
  /* Show hero title (in-hero) big and centered */
  .obs-hero-title{ display:block !important; }
  .obs-sp-hero__inner{ align-items:flex-end; justify-content:center; z-index:6; }
  .obs-sp-hero .product_title{
    margin-bottom: clamp(80px, 14vh, 200px);
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    line-height: 1.05;
    text-align: center;
    transition: font-size .3s ease, transform .3s ease, opacity .2s ease;
  }
  /* Hide the card's title initially so we don't see double */
  .obs-sp-summary .product_title{
    opacity: 0; height: 0; overflow: hidden; margin: 0;
    transition: opacity .25s ease, height .25s ease, margin .25s ease;
  }
  /* Make the summary column sticky for a premium feel */
  .obs-sp-card{ position: relative; }
  .obs-sp-card .obs-sp-summary{ position: sticky; top: 14px; }
}

/* When hero collapses out of view, swap titles: hide hero, show card */
@media (min-width: 992px){
  .obs-single-product.obs-hero-collapsed .obs-hero-title{ opacity: 0; pointer-events: none; }
  .obs-single-product.obs-hero-collapsed .obs-sp-summary .product_title{
    opacity: 1; height: auto; overflow: visible;
    margin: 0 0 12px 0;
    text-align: left;
    font-size: clamp(1.4rem, 1.7vw, 1.9rem);
  }
}



/* === r9: Hero title centered with on-load fade-in; no card title === */
.obs-sp-hero__inner{ align-items:flex-end; justify-content:center; z-index:6; }
.obs-sp-hero .product_title{
  margin-bottom: clamp(80px, 14vh, 200px);
  text-align: center;
}
/* Smooth fade-up on first paint */
.obs-hero-title{
  opacity: 0;
  transform: translateY(10px);
  animation: obs-hero-fadein 1.25s cubic-bezier(.2,.8,.2,1) .45s forwards;
}
@keyframes obs-hero-fadein{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: none; }
}

/* Belt-and-suspenders: ensure summary title is gone (in case a plugin forces it) */
.single-product .obs-sp-summary .product_title{ display:none !important; }



/* === r10: Single Product → Related products image margins tightened === */
.single-product .related ul.products{ 
  --product-image-height: 320px;  /* taller images; less letterbox feel */
  gap: 18px;
}
.single-product .related .overlay-card{ padding: 0; }
.single-product .related .overlay-card .product-thumb{ margin: 0; }
.single-product .related .overlay-card .product-thumb img{ 
  height: var(--product-image-height); 
  object-fit: cover; 
  display:block;
}
.single-product .related .overlay-card .card-action-bar{ padding-top: 8px; }



/* === r11: Related products – tighten image area & remove big middle gap === */
.single-product .obs-sp-related .overlay-card{ height:auto; }
.single-product .obs-sp-related .overlay-card .card-hover-overlay{ display:none !important; } /* no hover layer needed */
.single-product .obs-sp-related .overlay-card .card-action-bar{ margin-top: 0 !important; } /* sit right under the image */
.single-product .obs-sp-related ul.products{ --product-image-height: 340px; gap: 16px; }
.single-product .obs-sp-related .overlay-card .product-thumb{ margin:0; padding:0; }
.single-product .obs-sp-related .overlay-card .product-thumb img{ display:block; height: var(--product-image-height); object-fit: cover; }



/* === r12: Related products — compact layout, keep same image size === */
.single-product .related ul.products{ 
  align-items: flex-start !important;   /* don't stretch equal heights */
  gap: 16px;
  --product-image-height: 340px;
}
.single-product .related ul.products li.product{ height: auto !important; }
.single-product .related .overlay-card{ 
  display: block !important;
  height: auto !important; 
  padding: 0 !important;
}
.single-product .related .overlay-card .product-thumb{ margin: 0 !important; }
.single-product .related .overlay-card .card-hover-overlay{ display:none !important; }
.single-product .related .overlay-card .card-action-bar{ 
  margin-top: 0 !important; 
  padding-top: 10px;
}
.single-product .related .overlay-card .product-thumb img{ 
  display:block; 
  height: var(--product-image-height); 
  object-fit: cover; 
}



/* === r13: Related products — compact everything (smaller images & tighter bars) === */
.single-product .obs-sp-related{ 
  margin-top: clamp(24px, 6vw, 48px) !important;
}

.single-product .obs-sp-related ul.products{ 
  --product-image-height: 240px;
  gap: 12px;
  align-items: flex-start !important;
}

@media (max-width: 1200px){
  .single-product .obs-sp-related ul.products{ --product-image-height: 220px; }
}
@media (max-width: 992px){
  .single-product .obs-sp-related ul.products{ --product-image-height: 200px; }
}
@media (max-width: 768px){
  .single-product .obs-sp-related ul.products{ --product-image-height: 180px; }
}

.single-product .obs-sp-related ul.products li.product{ height: auto !important; }

/* Image block */
.single-product .obs-sp-related .overlay-card{ padding: 0 !important; height:auto !important; }
.single-product .obs-sp-related .overlay-card .product-thumb{ margin: 0 !important; }
.single-product .obs-sp-related .overlay-card .product-thumb img{ 
  height: var(--product-image-height) !important;
  width: 100%;
  object-fit: cover;
  display:block;
}

/* Action bar, compact */
.single-product .obs-sp-related .overlay-card .card-action-bar{
  height: 48px !important;
  padding: 8px 12px !important;
  margin-top: 0 !important;
}
.single-product .obs-sp-related .overlay-card .card-action-bar .button{
  min-height: 36px;
  padding: 8px 12px;
  font-size: .95rem;
  line-height: 1;
}
.single-product .obs-sp-related .overlay-card .price{
  font-size: .95rem;
}
"""

showcase_block = r"""/* =========================================================
   SINGLE PRODUCT (SHOWCASE) — WITH HERO OVERLAP + CUSTOM GALLERY
========================================================= */
.obs-single-product .obs-sp-container{
  max-width:1200px;
  margin: -100px auto 40px; /* overlap hero */
  padding: 0 16px;
  position: relative;
  z-index: 2; /* above hero */
}
@media (min-width:1200px){ .obs-single-product .obs-sp-container{ margin-top: -130px } }
@media (max-width:768px){  .obs-single-product .obs-sp-container{ margin-top: -60px } }

/* Glass Card */
.obs-sp-card{
  display:grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: minmax(508px, 580px) 3fr;
  align-items:start;
  background:rgba(0,0,0,0.55);
  border:1px solid var(--glass-border);
  border-radius:20px;
  box-shadow:0 22px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding: clamp(16px, 2vw, 28px);
  position:relative; overflow:hidden;
}
@media (max-width:960px){ .obs-sp-card{ grid-template-columns:1fr } }

/* Decorative glass glow */
.obs-sp-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1200px 300px at -10% -10%, rgba(255,255,255,.06), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  mix-blend-mode: screen;
}

/* Product hero with soft blend into card */
.obs-sp-hero{
  position:relative; width:100%;
  min-height: clamp(280px, 40vh, 520px);
  background-size:cover; background-position:center;
  box-shadow: inset 0 -40px 60px rgba(0,0,0,0.6);
}
.obs-sp-hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,0) 100%),
    radial-gradient(800px 200px at 10% 10%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
}
.obs-sp-hero__inner{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:24px; z-index:6 }
.obs-sp-hero .product_title{
  margin-bottom: clamp(80px, 14vh, 200px);
  text-align: center; color:#fff; text-shadow:0 10px 30px rgba(0,0,0,.6);
  font-size: clamp(2.2rem, 3.4vw, 3rem); line-height:1.05;
}

/* Subtle title fade-in */
.obs-hero-title{ opacity:0; transform: translateY(10px); animation: obs-hero-fadein 1.25s cubic-bezier(.2,.8,.2,1) .45s forwards }
@keyframes obs-hero-fadein{ from{ opacity:0; transform: translateY(10px) } to{ opacity:1; transform:none } }

/* Custom gallery (no Woo lightbox) */
.obs-sp-gallery{ display:grid; gap:12px }
.obs-media-main{
  border-radius:16px; overflow:hidden;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.obs-media-main img{
  display:block; width:100%;
  aspect-ratio: 1 / 1;  /* square for tight fold */
  object-fit:cover;
  opacity: 0; transform: scale(.97);
  animation: obsFadeInScale .5s ease forwards;
}
@keyframes obsFadeInScale { to { opacity: 1; transform: scale(1) } }


@keyframes thumbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.obs-media-thumb.is-active img,
.obs-media-thumb:hover img{ transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.25) }

/* Summary column */
.obs-sp-summary{ position:relative }
@media (min-width: 1000px){ .obs-sp-summary-inner{ position: sticky; top: 84px } }
.obs-sp-summary .obs-sp-summary-inner{
  background: rgba(0,0,0,0.35);
  color:#fff; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.single-product .obs-sp-summary .product_title{ display:none !important } /* use hero title */
.obs-single-product .price{ color:#fff !important; font-size:1.6rem; font-weight:700; margin:.35rem 0 1rem }
.obs-single-product .woocommerce-product-details__short-description{ font-size:1.05rem; margin:10px 0 16px; opacity:.9 }

/* Quantity — highly readable */
.single-product .quantity .qty{
  color:#fff !important; font-weight:600; font-size:1rem;
  background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px; padding: 6px 10px; text-align:center; width: 60px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Cart row + CTA */
.single-product form.cart{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; margin-top:12px }
@media (max-width: 600px){ .single-product form.cart{ grid-template-columns:1fr } }

.single-product button.single_add_to_cart_button{
  border-radius:12px !important; border:1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(135deg, #ff7b00, #ff4e00) !important;
  color:#fff !important; padding:12px 18px !important;
  box-shadow: 0 8px 20px rgba(255, 100, 0, 0.35);
  transform: translateY(0); transition: transform .2s ease, box-shadow .2s ease;
}
.single-product button.single_add_to_cart_button:hover{
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(255, 100, 0, 0.55);
}

/* Staggered summary reveal */
.obs-sp-summary .obs-sp-summary-inner > *{ opacity:0; transform: translateY(10px); animation: obsSummaryUp .5s ease forwards }
.obs-sp-summary .obs-sp-summary-inner > *:nth-child(1){ animation-delay:.1s }
.obs-sp-summary .obs-sp-summary-inner > *:nth-child(2){ animation-delay:.2s }
.obs-sp-summary .obs-sp-summary-inner > *:nth-child(3){ animation-delay:.3s }
.obs-sp-summary .obs-sp-summary-inner > *:nth-child(4){ animation-delay:.4s }
@keyframes obsSummaryUp { to{ opacity:1; transform:none } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce)