/* -----------------------------------------------------------------
 * [comw_product_landing] - a full marketing-style single-product page.
 * Every admin-configurable color is a CSS custom property with its own
 * sensible fallback (set inline per-instance by COMW_Product_Landing::
 * style_vars() only when the admin actually changed it from empty/default -
 * see that method's comment for why a custom property is used instead of a
 * plain inline color/background, same convention as comw-hero-slider.css).
 * ------------------------------------------------------------- */
.comw-lp-wrap{--comw-lp-radius:16px;max-width:1180px;margin:0 auto;padding:0 16px;font-family:inherit;color:var(--comw-lp-text-color,#374151);}
.comw-lp-wrap *{box-sizing:border-box;}
/* Dark Premium color scheme (Settings > Design > Color Scheme, default) -
   swaps the accent to amber; an admin's own Accent Color setting (an inline
   style on .comw-lp-wrap, higher specificity than this class rule) always
   wins over this default regardless of which scheme is active. */
.comw-lp-wrap.comw-lp-scheme-dark{--comw-lp-accent:#f59e0b;}

/* -----------------------------------------------------------------
 * Hero - two layout variants, chosen in Settings (default: overlay):
 *  --overlay: the image fills the whole hero, title/price/Buy Now sit on
 *    top of it (like a banner) behind a dark gradient scrim for legibility.
 *  --split: the original two-column media | info layout, reversible via
 *    .comw-lp-image-right.
 * ------------------------------------------------------------- */
.comw-lp-hero{position:relative;padding:40px 0;}

.comw-lp-hero--split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.comw-lp-hero--split.comw-lp-image-right .comw-lp-media{order:2;}
.comw-lp-hero--split.comw-lp-image-right .comw-lp-info{order:1;}
.comw-lp-hero--split .comw-lp-media{position:relative;min-width:0;}
.comw-lp-hero--split .comw-gallery-main,
.comw-lp-hero--split .comw-lp-single-image{aspect-ratio:1/1;min-height:var(--comw-lp-image-min-height,0);width:var(--comw-lp-image-width,100%);border-radius:var(--comw-lp-radius);overflow:hidden;box-shadow:0 24px 56px -24px rgba(15,23,42,.25);}
.comw-lp-hero--split .comw-gallery-thumbs{max-height:none;}
/* Blur/opacity only ever touch the main hero image itself - never the
   thumbnail strip (still needs to read clearly to be click-through-able)
   and never the sale badge (a sibling <span>, not an <img>, inside
   .comw-lp-media - untouched either way since this only targets img tags). */
/* .comw-gallery-main img already gets width:100%;height:100%;object-fit:cover
   from comw-checkout.css (shared with the checkout gallery); .comw-lp-single-
   image is unique to this page and never had that rule of its own, so a
   single-photo product's image rendered at its natural pixel size instead of
   stretching to fill its (already full-width) wrapper - this is that fix. */
.comw-lp-single-image img{width:100%;height:100%;object-fit:cover;display:block;}
.comw-lp-media .comw-gallery-main img,
.comw-lp-media .comw-lp-single-image img{filter:blur(var(--comw-lp-image-blur,0px));opacity:var(--comw-lp-image-opacity,1);}
.comw-lp-hero--split .comw-gallery-thumb{width:64px;height:64px;border-color:#e5e7eb;}
.comw-lp-hero--split .comw-gallery-thumb.is-active{border-color:var(--comw-lp-accent,#2563eb);}
.comw-lp-hero--split .comw-lp-info{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;}

/* Dark Premium color scheme - the split layout gets a dark gradient "hero
   card" background (the overlay layout is already dark on its own via its
   gradient scrim above it, so it only needs the accent-color swap at the
   top of this file). */
.comw-lp-scheme-dark .comw-lp-hero--split{background:linear-gradient(135deg,var(--comw-lp-hero-bg-1,#0f172a),var(--comw-lp-hero-bg-2,#1e293b));border-radius:var(--comw-lp-radius);padding:48px;}
.comw-lp-scheme-dark .comw-lp-hero--split .comw-lp-title{color:#fff;}
.comw-lp-scheme-dark .comw-lp-hero--split .comw-lp-desc{color:rgba(255,255,255,.75);}
.comw-lp-scheme-dark .comw-lp-hero--split .comw-lp-price{color:#fff;}
.comw-lp-scheme-dark .comw-lp-hero--split .comw-lp-price del{color:rgba(255,255,255,.5);}
.comw-lp-scheme-dark .comw-lp-hero--split .comw-lp-category-badge{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;}
.comw-lp-scheme-dark .comw-lp-hero--split .comw-lp-out-of-stock{background:rgba(255,255,255,.12);color:#fff;}

/* Full-bleed image background - the gallery thumbnail strip is dropped here
   (a small click-through strip floating over the banner would clutter it);
   the main/first image alone fills the whole hero instead. */
.comw-lp-hero--overlay{border-radius:var(--comw-lp-radius);overflow:hidden;min-height:var(--comw-lp-image-min-height,520px);display:flex;align-items:flex-end;}
.comw-lp-hero--overlay .comw-lp-media{position:absolute;inset:0;z-index:0;}
.comw-lp-hero--overlay .comw-gallery{height:100%;}
.comw-lp-hero--overlay .comw-gallery-main,
.comw-lp-hero--overlay .comw-lp-single-image{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;}
.comw-lp-hero--overlay .comw-gallery-thumbs{display:none;}
.comw-lp-hero--overlay:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.42) 55%,rgba(0,0,0,.05) 100%);}
.comw-lp-hero--overlay .comw-lp-info{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:48px;max-width:640px;color:#fff;}
.comw-lp-hero--overlay .comw-lp-title{color:#fff;}
.comw-lp-hero--overlay .comw-lp-desc{color:rgba(255,255,255,.88);}
.comw-lp-hero--overlay .comw-lp-price{color:#fff;}
.comw-lp-hero--overlay .comw-lp-price del{color:rgba(255,255,255,.6);}
.comw-lp-hero--overlay .comw-lp-category-badge{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);color:#fff;}

.comw-lp-sale-badge{position:absolute;z-index:2;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 10px rgba(15,23,42,.25);}
.comw-lp-sale-badge.comw-badge-pos-top-left{top:0;left:0;}
.comw-lp-sale-badge.comw-badge-pos-top-right{top:0;right:0;}
.comw-lp-sale-badge.comw-badge-pos-bottom-left{bottom:0;left:0;}
.comw-lp-sale-badge.comw-badge-pos-bottom-right{bottom:0;right:0;}

/* -----------------------------------------------------------------
 * Info column - shared text styling for both hero variants (the --overlay
 * variant above only overrides colors, for contrast against the photo).
 * ------------------------------------------------------------- */
.comw-lp-categories{display:flex;flex-wrap:wrap;gap:6px;}
.comw-lp-category-badge{display:inline-block;padding:5px 14px;border-radius:20px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border:1px solid #c7d2fe;color:#3730a3;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}

.comw-lp-title{margin:0;font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--comw-lp-heading-color,#0f172a);}

.comw-lp-desc{font-size:15.5px;line-height:1.75;max-width:56ch;color:inherit;}
.comw-lp-desc p{margin:0 0 12px;}
.comw-lp-desc p:last-child{margin-bottom:0;}

.comw-lp-price{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--comw-lp-accent,#2563eb);}
.comw-lp-price del{font-size:19px;font-weight:600;color:#9ca3af;text-decoration:line-through;margin-right:8px;}
.comw-lp-price ins{text-decoration:none;}
.comw-lp-price .comw-price-unit{font-size:14px;font-weight:500;color:#6b7280;}

.comw-lp-out-of-stock{display:inline-block;background:#f3f4f6;color:#6b7280;border-radius:var(--comw-lp-radius);padding:11px 24px;font-size:14px;font-weight:700;}

/* Embedded [comw_product id="X"] - only its Buy Now button + checkout panel
   stay visible; the small thumbnail/gallery/title/price it renders on its
   own are redundant with the larger versions this page already shows above,
   so they're hidden here rather than duplicated. Same technique already
   used for .comw-wc-buy-now in comw-checkout.css. */
.comw-lp-buybox{width:100%;max-width:360px;}
.comw-lp-buybox .comw-product-box{max-width:none;border:none;padding:0;box-shadow:none;background:transparent;}
.comw-lp-buybox .comw-product-thumb,
.comw-lp-buybox .comw-gallery,
.comw-lp-buybox .comw-product-title,
.comw-lp-buybox .comw-product-price,
.comw-lp-buybox .comw-sale-badge{display:none;}
.comw-lp-buybox .comw-product-summary{display:block;}
.comw-lp-buybox .comw-buy-now-btn,
.comw-lp-buybox .comw-out-of-stock,
.comw-lp-buybox .comw-whatsapp-btn{width:100%;justify-content:center;text-align:center;padding:16px 20px;font-size:16px;border-radius:var(--comw-lp-radius);}
.comw-lp-buybox .comw-buy-now-btn{background:linear-gradient(135deg,var(--comw-lp-accent,#2563eb),var(--comw-lp-accent,#1d4ed8));}
.comw-lp-buybox .comw-submit-btn{background:linear-gradient(135deg,var(--comw-lp-accent,#2563eb),var(--comw-lp-accent,#1d4ed8));}

/* -----------------------------------------------------------------
 * Feature strip - checkmark + label chips from the product's existing
 * Specifications data (_comw_product_features).
 * ------------------------------------------------------------- */
.comw-lp-features{display:flex;flex-wrap:wrap;gap:10px;padding:24px 0;margin-top:8px;border-top:1px solid #eef0f3;border-bottom:1px solid #eef0f3;}
.comw-lp-feature-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#f8fafc;border:1px solid #eef0f3;font-size:13px;font-weight:600;color:#374151;}
.comw-lp-feature-icon{flex:0 0 auto;color:var(--comw-lp-accent,#2563eb);}

/* Dark Premium color scheme - a full-width dark divider bar (ANC / Battery /
   Comfort Fit / Bluetooth style) instead of individual light pill chips. */
.comw-lp-scheme-dark .comw-lp-features{background:linear-gradient(135deg,var(--comw-lp-hero-bg-1,#0f172a),var(--comw-lp-hero-bg-2,#1e293b));border:none;border-radius:var(--comw-lp-radius);padding:6px 0;flex-wrap:nowrap;}
.comw-lp-scheme-dark .comw-lp-feature-chip{background:none;border:none;border-radius:0;flex:1 1 0;justify-content:center;padding:16px;color:#fff;position:relative;}
.comw-lp-scheme-dark .comw-lp-feature-chip:not(:first-child):before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(255,255,255,.15);}
.comw-lp-scheme-dark .comw-lp-feature-icon{color:var(--comw-lp-accent,#f59e0b);}

/* -----------------------------------------------------------------
 * Related Products / Newest Arrivals sections
 * ------------------------------------------------------------- */
.comw-lp-section{padding:48px 0;}
.comw-lp-section-alt{background:var(--comw-lp-section-bg,#f9fafb);margin:0 -16px;padding:48px 16px;border-radius:var(--comw-lp-radius);}
.comw-lp-section-title{margin:0 0 24px;font-size:var(--comw-lp-section-title-size,22px);font-weight:var(--comw-lp-section-title-weight,800);letter-spacing:-.01em;color:var(--comw-lp-section-title-color,var(--comw-lp-heading-color,#0f172a));text-align:var(--comw-lp-section-title-align,center);}

.comw-lp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;}

.comw-lp-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;border:1px solid #eef0f3;border-radius:var(--comw-lp-radius);padding:14px;background:#fff;transition:box-shadow .2s,transform .2s,border-color .2s;}
.comw-lp-card:hover{box-shadow:0 12px 28px -14px rgba(15,23,42,.25);transform:translateY(-2px);border-color:#e0e7ff;}
.comw-lp-card-thumb{display:block;aspect-ratio:1/1;border-radius:calc(var(--comw-lp-radius) - 6px);overflow:hidden;background:#f3f4f6;}
.comw-lp-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.comw-lp-card-thumb-placeholder{display:block;width:100%;height:100%;}
.comw-lp-card-title{font-size:13.5px;font-weight:700;color:var(--comw-lp-heading-color,#1f2937);line-height:1.35;}
.comw-lp-card-price{font-size:14px;font-weight:800;color:var(--comw-lp-accent,#2563eb);}

/* Star rating - only ever printed for a real WooCommerce rating (see
   COMW_Product_Landing::get_rating()), never a placeholder. A gray 5-star
   track with an amber copy clipped to the exact percentage full, so
   half-stars (e.g. 4.5) render smoothly instead of only whole-star steps. */
.comw-lp-card-rating{display:flex;align-items:center;gap:6px;}
.comw-lp-stars{position:relative;display:inline-block;font-size:13px;line-height:1;letter-spacing:1px;color:#e5e7eb;}
.comw-lp-stars-fg{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:#f59e0b;}
.comw-lp-rating-num{font-size:12px;font-weight:700;color:#6b7280;}

.comw-lp-card-cta{margin-top:auto;align-self:flex-start;padding:9px 16px;border-radius:999px;border:1.5px solid var(--comw-lp-accent,#2563eb);color:var(--comw-lp-accent,#2563eb);font-size:12.5px;font-weight:700;transition:background .15s,color .15s;}
.comw-lp-card:hover .comw-lp-card-cta{background:var(--comw-lp-accent,#2563eb);color:#fff;}

/* -----------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */
@media (max-width:900px){
	.comw-lp-hero--split{grid-template-columns:1fr;gap:28px;padding:28px 0;}
	.comw-lp-hero--split.comw-lp-image-right .comw-lp-media,
	.comw-lp-hero--split.comw-lp-image-right .comw-lp-info{order:initial;}
	.comw-lp-hero--overlay{min-height:var(--comw-lp-image-min-height,380px);}
	.comw-lp-hero--overlay .comw-lp-info{padding:28px;max-width:none;}
	.comw-lp-scheme-dark .comw-lp-hero--split{padding:28px;}
	.comw-lp-scheme-dark .comw-lp-features{flex-wrap:wrap;}
	.comw-lp-scheme-dark .comw-lp-feature-chip{flex:1 1 40%;}
	.comw-lp-scheme-dark .comw-lp-feature-chip:not(:first-child):before{display:none;}
	.comw-lp-title{font-size:28px;}
	.comw-lp-price{font-size:24px;}
	.comw-lp-buybox{max-width:none;}
	.comw-lp-section,.comw-lp-section-alt{padding:32px 0;}
	.comw-lp-section-alt{margin:0;padding:32px 16px;}
}
@media (max-width:480px){
	.comw-lp-hero--overlay{min-height:var(--comw-lp-image-min-height,320px);}
	.comw-lp-hero--overlay .comw-lp-info{padding:20px;}
	.comw-lp-grid{grid-template-columns:repeat(2,1fr);}
}