/* =========================================================
   WEDLENDER — Homepage / sitewide styles
   Hello Elementor Child Theme
   Every color/spacing lives in the :root block below.
   Change values there first — do not hunt through the file.
   ========================================================= */

:root{
	--wed-black:#111111;
	--wed-near-black:#161314;
	--wed-cream:#f4efe4;
	--wed-cream-2:#f7f3ea;
	--wed-white:#ffffff;
	--wed-mauve:#a5677c;
	--wed-mauve-dark:#7c4a5b;
	--wed-mauve-soft:#c98fa0;
	--wed-gray:#6b6b6b;
	--wed-gray-light:#e7e3da;
	--wed-radius-lg:28px;
	--wed-radius-md:16px;
	--wed-radius-pill:999px;
	--wed-font-heading:'Playfair Display', Georgia, serif;
	--wed-font-body:'Poppins', Arial, sans-serif;
	--wed-ease:cubic-bezier(.25,.8,.25,1);
}

/* -----------------------------------------------------------
   0. Utilities
----------------------------------------------------------- */
.wed-cream-bg{ background:var(--wed-cream) !important; }
.wed-black-bg{ background:var(--wed-black) !important; color:var(--wed-white); }
.wed-mauve-bg{ background:var(--wed-mauve) !important; color:var(--wed-white); }

/* generic scroll-reveal (optional extra on top of native Elementor
   "Entrance Animation" — only needed if you add class wed-reveal
   to a widget's Advanced > CSS Classes field) */
.wed-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--wed-ease), transform .7s var(--wed-ease); }
.wed-reveal.wed-in{ opacity:1; transform:translateY(0); }

/* -----------------------------------------------------------
   1. Announcement / marquee ticker (header, above nav)
----------------------------------------------------------- */
.wed-ticker{
	background:var(--wed-mauve);
	color:var(--wed-white);
	overflow:hidden;
	white-space:nowrap;
	padding:10px 0;
	font-family:var(--wed-font-body);
	font-size:13px;
	letter-spacing:.03em;
}
.wed-ticker__track{
	display:inline-flex;
	align-items:center;
	animation:wed-ticker-scroll 26s linear infinite;
}
.wed-ticker:hover .wed-ticker__track{ animation-play-state:paused; }
.wed-ticker__item{ display:inline-flex; align-items:center; padding:0 22px; }
.wed-ticker__sep{ opacity:.8; display:inline-flex; align-items:center; }
.wed-ticker__sep img{
	height:1em;      /* scales with .wed-ticker's font-size — bump that to resize everywhere at once */
	width:auto;
	vertical-align:middle;
	display:block;
}
@keyframes wed-ticker-scroll{
	0%{ transform:translateX(0); }
	100%{ transform:translateX(-50%); }
}

/* -----------------------------------------------------------
   2. Hero search pill (Shortcode widget wrapping
      [woocommerce_product_search])
----------------------------------------------------------- */
.wed-hero-search form.woocommerce-product-search{
	display:flex;
	align-items:center;
	background:var(--wed-white);
	border-radius:var(--wed-radius-pill);
	padding:6px 10px 6px 26px;
	max-width:560px;
	margin:0 auto;
	box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.wed-hero-search input[type=search]{
	flex:1; border:0; outline:0; background:transparent;
	font-family:var(--wed-font-body); font-size:15px; padding:10px 8px;
}
.wed-hero-search button{
	border:0; background:var(--wed-mauve); color:#fff; width:42px; height:42px;
	border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* -----------------------------------------------------------
   3. Category cards — For the Bride / Bridesmaid / Guest
      Markup (build with 2 stacked Image widgets per Container):
      .wed-card > .wed-card-img-a, .wed-card-img-b (absolute, fade)
----------------------------------------------------------- */
.wed-card{
	position:relative;
	border-radius:var(--wed-radius-lg);
	overflow:hidden;
	aspect-ratio:3/4;
	isolation:isolate;
}
.wed-card img{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	transition:transform 1.2s var(--wed-ease), opacity .6s ease;
}
.wed-card .wed-card-img-a{ position:relative; opacity:1; }
.wed-card .wed-card-img-b{ opacity:0; }
.wed-card:hover .wed-card-img-a{ opacity:0; transform:scale(1.08); }
.wed-card:hover .wed-card-img-b{ opacity:1; transform:scale(1.08); }
.wed-card:active img{ transform:scale(1.14); }
.wed-card__label{
	position:absolute; left:0; right:0; top:44%;
	text-align:center; z-index:2; pointer-events:none;
	font-family:var(--wed-font-heading); font-size:clamp(22px,3vw,30px);
	color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.wed-card__mute{
	position:absolute; right:14px; bottom:14px; z-index:3;
	width:34px; height:34px; border-radius:50%;
	background:rgba(0,0,0,.45); color:#fff;
	display:flex; align-items:center; justify-content:center;
}

/* generic "slow zoom" helper — add class wed-zoom to any
   Elementor Image widget for the same hover/tap effect */
.wed-zoom{ overflow:hidden; border-radius:var(--wed-radius-md); }
.wed-zoom img{ transition:transform 1.1s var(--wed-ease); }
.wed-zoom:hover img,
.wed-zoom:active img{ transform:scale(1.08); }

/* -----------------------------------------------------------
   4. Horizontal swipe rows — Decor / Apparel / Accessories /
      Wedding Essentials (Shortcode widget with WooCommerce
      [products] shortcode, or manual Image Box widgets)
----------------------------------------------------------- */
.wed-scroll-row{ position:relative; }
.wed-scroll-row .woocommerce ul.products,
.wed-scroll-row ul.wed-manual-row{
	display:flex !important;
	flex-wrap:nowrap !important;
	gap:22px;
	overflow-x:auto;
	scroll-snap-type:x proximity;
	padding:6px 6px 22px;
	margin:0 !important;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:thin;
	scrollbar-color:var(--wed-mauve) var(--wed-gray-light);
	list-style:none;
	cursor:grab;
}
.wed-scroll-row.wed-dragging ul{ cursor:grabbing; scroll-snap-type:none; }
.wed-scroll-row .woocommerce ul.products li.product,
.wed-scroll-row ul.wed-manual-row li{
	flex:0 0 auto;
	width:220px;
	scroll-snap-align:start;
}
.wed-scroll-row .woocommerce ul.products li.product img,
.wed-scroll-row ul.wed-manual-row img{
	border-radius:var(--wed-radius-md);
	aspect-ratio:3/4; object-fit:cover;
	transition:transform .7s var(--wed-ease);
}
.wed-scroll-row .woocommerce ul.products li.product a:hover img,
.wed-scroll-row ul.wed-manual-row a:hover img{ transform:scale(1.06); }
.wed-scroll-row .woocommerce ul.products li.product .price ins{ text-decoration:none; }

/* custom thin progress-style scrollbar (webkit) */
.wed-scroll-row .woocommerce ul.products::-webkit-scrollbar,
.wed-scroll-row ul.wed-manual-row::-webkit-scrollbar{ height:4px; }
.wed-scroll-row .woocommerce ul.products::-webkit-scrollbar-thumb,
.wed-scroll-row ul.wed-manual-row::-webkit-scrollbar-thumb{
	background:var(--wed-mauve); border-radius:var(--wed-radius-pill);
}
.wed-scroll-row .woocommerce ul.products::-webkit-scrollbar-track,
.wed-scroll-row ul.wed-manual-row::-webkit-scrollbar-track{
	background:var(--wed-gray-light); border-radius:var(--wed-radius-pill);
}

/* prev/next arrow buttons (two Icon widgets, class wed-scroll-prev/next) */
.wed-scroll-prev,.wed-scroll-next{
	width:40px; height:40px; border-radius:50%;
	background:var(--wed-white); box-shadow:0 4px 14px rgba(0,0,0,.15);
	display:flex; align-items:center; justify-content:center;
	cursor:pointer; transition:transform .2s var(--wed-ease);
}
.wed-scroll-prev:hover,.wed-scroll-next:hover{ transform:scale(1.08); }

/* -----------------------------------------------------------
   5. Shop by Occasion pill nav
----------------------------------------------------------- */
.wed-occasion-nav{
	display:flex; gap:34px; overflow-x:auto; padding:6px 4px 14px;
	-webkit-overflow-scrolling:touch;
}
.wed-occasion-nav a{
	font-family:var(--wed-font-body); font-size:16px; color:var(--wed-black);
	white-space:nowrap; text-decoration:none; position:relative; padding-bottom:6px;
}
.wed-occasion-nav a::after{
	content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
	background:var(--wed-mauve); transition:width .3s var(--wed-ease);
}
.wed-occasion-nav a:hover::after,
.wed-occasion-nav a.is-active::after{ width:100%; }
.wed-occasion-nav a.is-active{ color:var(--wed-mauve); }

/* -----------------------------------------------------------
   6. "How it works" accordion (native Elementor Accordion
      widget) — cosmetic overrides only
----------------------------------------------------------- */
.wed-howitworks .elementor-accordion-item{
	border:0; border-bottom:1px solid rgba(0,0,0,.12); background:transparent;
}
.wed-howitworks .elementor-tab-title{
	font-family:var(--wed-font-body); font-size:20px; padding:18px 0;
}
.wed-howitworks .elementor-tab-title .elementor-accordion-icon{ color:var(--wed-mauve); }
.wed-howitworks .elementor-tab-content{ padding:0 0 18px; color:var(--wed-gray); }

/* -----------------------------------------------------------
   7. Rent it / List it / Buy it rotator
----------------------------------------------------------- */
.wed-rlb{ position:relative; overflow:hidden; border-radius:var(--wed-radius-lg); min-height:520px; }
.wed-rlb-slide{
	position:absolute; inset:0; opacity:0; visibility:hidden;
	transition:opacity .9s var(--wed-ease);
	background-size:cover; background-position:center;
	display:flex; align-items:center;
}
.wed-rlb-slide.is-active{ opacity:1; visibility:visible; position:relative; }
.wed-rlb-slide__panel{
	background:rgba(0,0,0,.0); max-width:520px; margin:0 auto; text-align:center;
	padding:32px; color:#fff;
}
.wed-rlb-slide__panel h2{ font-family:var(--wed-font-heading); font-size:44px; margin:0 0 12px; }
.wed-rlb-slide__panel p{ font-size:17px; margin:0 0 18px; }
.wed-rlb-slide__panel a{ color:var(--wed-mauve-soft); text-decoration:underline; font-weight:600; }
.wed-rlb-dots{
	position:absolute; bottom:26px; left:0; right:0;
	display:flex; justify-content:center; gap:10px; z-index:5;
}
.wed-rlb-dots .wed-rlb-dot{
	width:9px; height:9px; border-radius:50%; border:0; padding:0;
	background:rgba(255,255,255,.55); cursor:pointer; transition:transform .2s, background .2s;
	display:inline-block; overflow:hidden; text-indent:-999px;
}
.wed-rlb-dots .wed-rlb-dot.is-active{ background:#fff; transform:scale(1.3); }

/* -----------------------------------------------------------
   8. Stories / blog cards (placeholder grid — see guide for
      swapping to a dynamic feed later)
----------------------------------------------------------- */
.wed-story-card{ position:relative; border-radius:var(--wed-radius-md); overflow:hidden; }
.wed-story-card img{ transition:transform .8s var(--wed-ease); }
.wed-story-card:hover img{ transform:scale(1.06); }
.wed-story-date{
	position:absolute; left:16px; bottom:16px; background:var(--wed-mauve);
	color:#fff; font-size:12px; padding:6px 12px; border-radius:var(--wed-radius-pill);
}

/* -----------------------------------------------------------
   9. Feature strip icons (native Icon Box) — pop-in handled by
      Elementor's native Entrance Animation, no CSS required.
----------------------------------------------------------- */
.wed-features .elementor-icon-box-icon{ margin-bottom:14px; }

/* -----------------------------------------------------------
   10. Instagram community strip — continuous marquee.
       Duplicate the image row once in the markup (see guide)
       so the loop is seamless.
----------------------------------------------------------- */
.wed-ig-strip{ overflow:hidden; }
.wed-ig-strip__track{
	display:inline-flex; gap:12px;
	animation:wed-ticker-scroll 40s linear infinite;
}
.wed-ig-strip:hover .wed-ig-strip__track{ animation-play-state:paused; }
.wed-ig-strip__track img{
	width:260px; height:260px; object-fit:cover; border-radius:var(--wed-radius-md);
	transition:transform .6s var(--wed-ease);
}
.wed-ig-strip__track a:hover img{ transform:scale(1.05); }

/* -----------------------------------------------------------
   11. Footer newsletter
----------------------------------------------------------- */
.wed-newsletter-form{
	display:flex; max-width:560px; margin:0 auto;
	border-bottom:1px solid rgba(0,0,0,.35);
}
.wed-newsletter-form input[type=email]{
	flex:1; border:0; background:transparent; padding:12px 6px;
	font-family:var(--wed-font-body); font-size:15px; outline:0;
}
.wed-newsletter-form button{
	border:0; background:transparent; font-weight:600; letter-spacing:.05em;
	cursor:pointer; text-transform:uppercase; font-size:12px;
}

/* -----------------------------------------------------------
   12. Global hover-zoom for any product/listing image rendered
       by WooCommerce (shop archive, related products, etc.)
----------------------------------------------------------- */
.woocommerce ul.products li.product a img{ transition:transform .7s var(--wed-ease); }
.woocommerce ul.products li.product a:hover img{ transform:scale(1.05); }

/* -----------------------------------------------------------
   13. Responsive
----------------------------------------------------------- */
@media(max-width:767px){
	.wed-rlb{ min-height:420px; }
	.wed-rlb-slide__panel h2{ font-size:32px; }
	.wed-scroll-row .woocommerce ul.products li.product,
	.wed-scroll-row ul.wed-manual-row li{ width:170px; }
	.wed-ig-strip__track img{ width:180px; height:180px; }
}