/*
Theme Name:   Xstore child
Theme URI:    https://xstore.8theme.com
Description:  XStore is a multi-purpose theme that offers the ultimate WordPress and WooCommerce synergy, providing a comprehensive, all-in-one solution.
Author:       8theme
Author URI:   https://www.8theme.com
Template:     xstore
Version:      1.0
Text Domain:  xstore-child
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, translation-ready, ecommerce, woocommerce, shop, elementor, business, corporate, blog, news, light, dark
*/
/* =====================================================================
   SFZ Luxury Lifestyle – brand layer (light theme, dark accents, gold for key details)
   Layout, type and button tokens live in sfz-build/sfz-lib.php; this file holds what Elementor cannot set.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
	--sfz-ease: cubic-bezier(.2, .7, .2, 1);
	--sfz-t-fast: .3s;   /* colour, underline */
	--sfz-t: .45s;       /* button fill, border, shadow */
	--sfz-t-slow: .9s;   /* image zoom */
	--sfz-zoom: 1.04;
	--sfz-shadow-sm: 0 12px 24px -18px rgba(13, 13, 13, .35);
	--sfz-focus: #85672A;
}
.sfz-hero, .sfz-photo-banner, .sfz-on-dark { --sfz-focus: #C9A45C; }
.sfz-featured-products { --sfz-focus: #85672A; }

/* ---------- Base rhythm and accessibility ---------- */
.elementor-widget-text-editor p { margin: 0 0 1em; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
body :is(a, button, input[type=submit], input[type=button], summary, [role=button], [tabindex='0']):focus-visible { outline: 1px solid var(--sfz-focus) !important; outline-offset: 4px; }
.sfz-products .etheme-product-grid-image a:focus-visible, .sfz-tile .elementor-widget-image a:focus-visible { outline-offset: -4px; }

/* Line break used only from tablet up */
@media (max-width: 767px) { .sfz-br-wide { display: none; } }

/* Visually hidden but readable by search engines / screen readers (home H1) */
.sfz-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Buttons ---------- */
.elementor-button, .etheme-slide-button {
	transition: background-color var(--sfz-t) var(--sfz-ease), color var(--sfz-t) var(--sfz-ease), border-color var(--sfz-t) var(--sfz-ease), box-shadow var(--sfz-t) var(--sfz-ease) !important;
}
.sfz-btn--primary .elementor-button:hover, .sfz-btn--secondary .elementor-button:hover { box-shadow: var(--sfz-shadow-sm); }

/* ---------- Header ---------- */
/* Menu: thin gold underline grows from the centre; text stays black */
.sfz-nav .etheme-elementor-nav-menu > li > a .elementor-item { position: relative; }
.sfz-nav .etheme-elementor-nav-menu > li > a .elementor-item::after {
	content: ""; position: absolute; left: 50%; right: 50%; bottom: -7px; height: 1px; background: #C9A45C;
	transition: left var(--sfz-t-fast) var(--sfz-ease), right var(--sfz-t-fast) var(--sfz-ease);
}
.sfz-nav .etheme-elementor-nav-menu > li > a:hover .elementor-item::after,
.sfz-nav .etheme-elementor-nav-menu > li > a .elementor-item-active::after { left: 0; right: 0; }
/* Phones: search is icon-only (the link keeps aria-label="Search") so it doesn't crowd the logo */
@media (max-width: 767px) { header .elementor-widget-theme-etheme_ajax_search_popup .etheme-modal-popup-button .button-text { display: none; } }

/* ---------- Home hero ---------- */
/* First screen: header + hero fill one screen; --sfz-header-h is measured on the page (functions.php), these are fallbacks. */
:root { --sfz-header-h: 192px; }
@media (max-width: 1024px) { :root { --sfz-header-h: 124px; } }
.sfz-hero .swiper-slide { height: calc(100vh - var(--sfz-header-h)) !important; min-height: 440px; }
@supports (height: 100svh) { .sfz-hero .swiper-slide { height: calc(100svh - var(--sfz-header-h)) !important; } }
/* Hero copy starts on the same 1240 grid edge as the sections below */
.sfz-hero .swiper-slide-inner.container { max-width: 1320px; }
/* Soft dark gradient on the text side only (slide ids fixed in the builder: sfzs1 text left, sfzs2 text right) */
.sfz-hero .swiper-slide-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.sfz-hero .elementor-repeater-item-sfzs1 .swiper-slide-bg::after { background: linear-gradient(90deg, rgba(13, 13, 13, .70) 0%, rgba(13, 13, 13, .35) 38%, rgba(13, 13, 13, 0) 62%); }
.sfz-hero .elementor-repeater-item-sfzs2 .swiper-slide-bg::after { background: linear-gradient(270deg, rgba(13, 13, 13, .70) 0%, rgba(13, 13, 13, .35) 38%, rgba(13, 13, 13, 0) 62%); }
/* Pagination: fine lines instead of dots */
.sfz-hero .swiper-pagination-bullet {
	width: 22px !important; height: 1px !important; padding: 8px 0; margin: 0 5px !important; border-radius: 0; opacity: .45;
	background: #F7F3EC !important; background-clip: content-box !important; box-sizing: content-box;
	transition: width var(--sfz-t) var(--sfz-ease), opacity var(--sfz-t-fast) ease;
}
.sfz-hero .swiper-pagination-bullet-active { width: 40px !important; opacity: 1; background: #C9A45C !important; background-clip: content-box !important; }
/* Tablets and phones: swipe + line pagination; the arrows would sit on top of the copy */
@media (max-width: 1024px) { .sfz-hero .swiper-button-prev, .sfz-hero .swiper-button-next { display: none !important; } }
@media (max-width: 767px) {
	/* Phones: left-aligned text in the vertical middle; the overlay is darkest behind the text */
	.sfz-hero .swiper-slide-bg::after { background: linear-gradient(180deg, rgba(13, 13, 13, .40) 0%, rgba(13, 13, 13, .72) 50%, rgba(13, 13, 13, .40) 100%) !important; }
	.sfz-hero .elementor-repeater-item-sfzs1 .swiper-slide-bg { background-position: 66% center !important; }
	.sfz-hero .elementor-repeater-item-sfzs2 .swiper-slide-bg { background-position: 38% center !important; }
}

/* ---------- Category tiles and circles ---------- */
.sfz-tile .elementor-widget-image a { display: block; overflow: hidden; }
.sfz-tile .elementor-widget-image img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; transform: scale(var(--sfz-base, 1)); transition: transform var(--sfz-t-slow) var(--sfz-ease); }
.sfz-tile:hover .elementor-widget-image img { transform: scale(calc(var(--sfz-base, 1) * var(--sfz-zoom))); }
/* Jewelry tile was cut from the brand board: crop out the neighbouring panel edge and letters */
.sfz-tile img[src*="sfz-cat-jewelry"] { --sfz-base: 1.2; transform-origin: 55% 50%; }
.sfz-tile .elementor-heading-title a { transition: color var(--sfz-t-fast) ease; }
.sfz-tile:hover .elementor-heading-title a { color: #85672A; }
.sfz-circle img { transition: transform var(--sfz-t) var(--sfz-ease), box-shadow var(--sfz-t) var(--sfz-ease); }
.sfz-circle:hover img { transform: scale(var(--sfz-zoom)); box-shadow: 0 0 0 4px rgba(201, 164, 92, .18); }

/* ---------- Product cards: home carousels, Featured band, shop and category pages, product-page "You may also like" ----------
   Type, colours, spacing, labels and the XStore hover bar (add to cart, wishlist, quick view) are Elementor settings (sfz_card_settings() in sfz-build/sfz-lib.php).
   This block holds what Elementor cannot set: one 1:1 frame, the second-image hover, badges, equal heights, touch. */
.sfz-products { --sfz-frame-bg: #F1ECE4; --sfz-frame-pad: 0px; }

/* Image: every photo fills one 1:1 frame; the warm stone tone comes through the multiply blend (no mat border) */
.sfz-products .etheme-product-grid-image { overflow: hidden; background: var(--sfz-frame-bg); }
.sfz-products .etheme-product-grid-image > a { display: block; }
.sfz-products .etheme-product-grid-image > a > img,
.sfz-products .etheme-product-hover-swap-image img {
	display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; box-sizing: border-box; padding: var(--sfz-frame-pad);
	object-fit: cover; object-position: 50% 50%; mix-blend-mode: multiply; filter: brightness(1.03);
	transition: transform var(--sfz-t-slow) var(--sfz-ease);
}
/* Second image (first gallery photo): opaque mat underneath so the main photo never shows through */
.sfz-products .etheme-product-hover-swap-image { background: var(--sfz-frame-bg); isolation: isolate; transition: opacity var(--sfz-t) var(--sfz-ease), visibility var(--sfz-t); }
/* Zoom only, no second photo: placeholder perfumes/watches (gallery photo = the same picture re-cropped; drop with the dummy products)
   and 892 / 795 (gallery photo shows another product; remove these two lines once the content fix is done) */
.sfz-products .product_tag-sfz-dummy .etheme-product-hover-swap-image,
.sfz-products .post-892.etheme-product-grid-item .etheme-product-hover-swap-image,
.sfz-products .post-795.etheme-product-grid-item .etheme-product-hover-swap-image { display: none; }
/* Keyboard focus on the photo: the photo now covers the link's own outline, so the ring is drawn above it (ivory + gold, visible on dark and light photos) */
.sfz-products .etheme-product-grid-image > a:focus-visible { outline: none !important; }
.sfz-products .etheme-product-grid-image > a:focus-visible::after {
	content: ""; position: absolute; inset: 4px; z-index: 4; pointer-events: none;
	border: 1px solid #F7F3EC; outline: 1px solid var(--sfz-focus);
}

/* Card: image, name, price. Grid and carousel cards are a column with equal heights; names keep two lines so prices share one line per row.
   Shop List view (?view_mode=list adds .type-list) keeps XStore's row layout. */
.sfz-products .swiper-slide { height: auto; }
.sfz-products .swiper-slide > .etheme-product-grid-item { height: 100%; }
.sfz-products .etheme-product-grid-item:not(.type-list) { display: flex; flex-direction: column; }
.sfz-products .etheme-product-grid-item:not(.type-list) > .etheme-product-grid-content { flex: 1 1 auto; display: flex; flex-direction: column; }
.sfz-products .etheme-product-grid-content { padding: 0 4px 6px; }
.sfz-products .etheme-product-grid-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.9em; }
.sfz-products .etheme-product-grid-title a { transition: color var(--sfz-t-fast) ease; }
/* the 2-line clamp clips an outline, so keyboard focus on the name is a gold underline */
.sfz-products .etheme-product-grid-title a:focus-visible { outline: none !important; text-decoration: underline; text-decoration-color: var(--sfz-focus); text-underline-offset: 4px; }
.sfz-products .price del { color: #6B6B6B; }
.sfz-products .price ins { text-decoration: none; }

/* Hover bar (XStore mask): keyboard users reach it too, since XStore only reveals it on mouse hover */
.sfz-products .etheme-product-hover-mask:focus-within footer { opacity: 1; visibility: visible; transform: none; }

/* Mouse: hovering anywhere on the card fades in the second photo and zooms slightly; XStore slides the hover bar in */
@media (hover: hover) and (pointer: fine) {
	.sfz-products .etheme-product-grid-item:hover .etheme-product-hover-swap-image { opacity: 1; visibility: visible; }
	.sfz-products .etheme-product-grid-item:hover .etheme-product-grid-image img { transform: scale(var(--sfz-zoom)); }
}
/* Touch: no second photo, rows are swiped (no arrow discs over the photos) */
@media not all and (hover: hover) and (pointer: fine) {
	.sfz-products .etheme-product-hover-swap-image { display: none; }
	.sfz-products .et-swiper-elementor-nav { display: none !important; }
}

/* Badges: NEW = black with gold letters, SALE = black with ivory letters; square, small, top left, one per card (SALE first).
   NEW is switched on for the shop/category grid only (sfz-build/sfz-cards.php). */
html body { --et_new-label-bg-color: #0D0D0D; --et_new-label-color: #C9A45C; --et_on-sale-bg-color: #0D0D0D; --et_on-sale-color: #F7F3EC; }
.onsale { font-family: Montserrat, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .2em; line-height: 1; padding: 6px 10px; }
.sfz-products .onsale { top: 12px; left: 12px; padding: 5px 7px 5px 9px; letter-spacing: .18em; border-radius: 0; }
.sfz-products .sale-wrapper ~ .sale-wrapper { display: none; }

@media (max-width: 767px) {
	.sfz-products .etheme-product-grid-item { --image-space: 12px; }
	.sfz-products .etheme-product-grid-content { padding: 0 2px 6px; }
	.sfz-products .onsale { top: 8px; left: 8px; padding: 4px 6px 4px 8px; font-size: 9px; letter-spacing: .16em; }
}

/* Empty collection (no products yet): quiet note instead of a warning box */
.sfz-products .woocommerce-info {
	background: transparent; border: 1px solid #E8E1D4; color: #6B6B6B; text-align: center;
	font-family: "Playfair Display", serif; font-style: italic; font-size: 16px; padding: 40px 20px; margin: 0;
}
.sfz-products .woocommerce-info::before { display: none; }
/* Shop/category/search with no match: XStore prints a product search form straight after the note */
.elementor-widget-woocommerce-etheme_archive_products.sfz-products .woocommerce-info { margin: 0 0 24px; }

/* ---------- Featured Collection band: the same card on a white plate (Elementor: Style > Product > Background) ---------- */
.sfz-featured-products .etheme-product-grid-content { padding: 0 14px 16px; }
@media (max-width: 767px) { .sfz-featured-products .etheme-product-grid-content { padding: 0 10px 14px; } }
@media (max-width: 1024px) {
	.sfz-featured-products .swiper-button-prev, .sfz-featured-products .swiper-button-next { display: none !important; }
}

/* Reduced motion: second photo and hover bar appear without transitions (image zoom is already off, see Motion) */
@media (prefers-reduced-motion: reduce) {
	.sfz-products .etheme-product-hover-swap-image, .sfz-products .etheme-product-hover-mask footer { transition: none !important; }
}

/* ---------- Photo bands (Featured, Experience, Gift card) ---------- */
@media (max-width: 767px) {
	/* Phones: darken the whole photo so text stays readable */
	.sfz-photo-banner::before { background-image: none !important; background-color: rgba(13, 13, 13, .62) !important; opacity: 1 !important; }
}
/* Gift card: centred text over the photo, soft shadow keeps it crisp; inner gold hairline repeats the Discover frame */
.sfz-gift-card .elementor-heading-title,
.sfz-gift-card .elementor-widget-text-editor { text-shadow: 0 2px 14px rgba(0, 0, 0, .65); }
.sfz-gift-card::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(201, 164, 92, .4); pointer-events: none; }
@media (max-width: 767px) { .sfz-gift-card::after { inset: 10px; } }

/* ---------- Icons ---------- */
/* Interim gold line-art icons (Why SFZ crown / star) */
.sfz-line-icon { display: block; width: var(--s); height: var(--s); margin: 0 auto 20px; color: #C9A45C; }
.sfz-line-icon svg { display: block; width: 100%; height: 100%; }
@media (max-width: 767px) { .sfz-line-icon { width: var(--sm); height: var(--sm); } }
/* Why SFZ: PNG icons get the same square slot as the line icons, so the four titles share one baseline */
.sfz-pillar .elementor-widget-image img { width: 44px; height: 44px; object-fit: contain; }
@media (max-width: 767px) { .sfz-pillar .elementor-widget-image img { width: 38px; height: 38px; } }
/* Hides the stray "WATCHES" lettering strip at the bottom of the brand-board watch icon */
.sfz-icon-col img[src*="sfz-icon-watch"] { clip-path: inset(0 0 5% 0); }

/* ---------- Footer ---------- */
/* Newsletter: Contact Form 7 "SFZ Newsletter" (ivory band) – submit matches the primary button */
.sfz-newsletter-form .sfz-newsletter-fields,
.sfz-newsletter-form .sfz-newsletter-fields > p { display: flex; align-items: stretch; margin: 0; width: 100%; }
.sfz-newsletter-form .wpcf7-form-control-wrap { flex: 1 1 auto; }
.sfz-newsletter-form input[type="email"] {
	width: 100%; height: 48px; margin: 0; padding: 0 18px; border-radius: 0;
	background: #FFFFFF; border: 1px solid rgba(13, 13, 13, .22); border-right: 0;
	color: #0D0D0D; font-family: Montserrat, sans-serif; font-size: 13px;
	transition: border-color var(--sfz-t-fast) ease, box-shadow var(--sfz-t-fast) ease;
}
.sfz-newsletter-form input[type="email"]:focus { border-color: #85672A; box-shadow: inset 0 0 0 1px #85672A; outline: none; }
.sfz-newsletter-form input[type="email"]::placeholder { color: #8A8A8A; opacity: 1; }
form.wpcf7-form.sfz-newsletter-form input.wpcf7-submit:not(.active),
.sfz-newsletter-form input[type="submit"] {
	height: 48px; min-width: 150px; margin: 0; padding: 0 24px; border-radius: 0; cursor: pointer;
	background: #0D0D0D; border: 1px solid #0D0D0D; color: #F7F3EC;
	font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
	transition: background-color var(--sfz-t) var(--sfz-ease), border-color var(--sfz-t) var(--sfz-ease), color var(--sfz-t) var(--sfz-ease);
}
form.wpcf7-form.sfz-newsletter-form input.wpcf7-submit:not(.active):hover,
.sfz-newsletter-form input[type="submit"]:hover { background: #0D0D0D; border-color: #C9A45C; color: #C9A45C; }
.sfz-newsletter-form .wpcf7-spinner { position: absolute; margin: 14px 0 0 8px; }
.sfz-newsletter-form .wpcf7-response-output { margin: 12px 0 0 !important; color: #0D0D0D; border-color: #C9A45C !important; font-size: 13px; }
.sfz-newsletter-form .wpcf7-not-valid-tip { font-size: 12px; color: #B3261E; }
@media (max-width: 767px) {
	.sfz-newsletter-form .sfz-newsletter-fields,
	.sfz-newsletter-form .sfz-newsletter-fields > p { flex-direction: column; gap: 10px; }
	.sfz-newsletter-form input[type="email"] { border-right: 1px solid rgba(13, 13, 13, .22); text-align: center; }
	.sfz-newsletter-form input[type="submit"] { width: 100%; }
}
/* Link lists (footer columns, top bar, bottom bar): only linked items warm to gold */
.sfz-footer-links .elementor-icon-list-text, .sfz-link-list .elementor-icon-list-text { transition: color var(--sfz-t-fast) ease; }
.sfz-footer-links .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.sfz-link-list .elementor-icon-list-item > a:hover .elementor-icon-list-text { color: #C9A45C; }

/* ---------- Motion ---------- */
/* Entrance: 24px rise instead of Elementor's full-height travel */
@keyframes sfzFadeInUp { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
.e-con.animated.fadeInUp, .elementor-widget.animated.fadeInUp { animation-name: sfzFadeInUp; animation-timing-function: var(--sfz-ease); }
/* Respect visitors who turn animations off */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible { visibility: visible !important; }
	.animated { animation: none !important; }
	.sfz-tile img, .sfz-circle img, .sfz-products img, .elementor-button, .etheme-slide-button { transition: none !important; }
	.sfz-circle img, .sfz-products img { transform: none !important; }
	.sfz-tile .elementor-widget-image img { transform: scale(var(--sfz-base, 1)) !important; }
}

/* ---------- FAQ and policy pages (client copy) ---------- */
.sfz-policy { max-width: 820px; margin: 0 auto 60px; font-family: Montserrat, sans-serif; font-size: 15px; line-height: 1.85; color: #555555; }
.sfz-policy h3 { font-family: "Playfair Display", serif; font-size: 22px; color: #0D0D0D; margin: 34px 0 10px; }
.sfz-policy ul { margin: 0 0 18px 18px; }
.sfz-policy li { margin-bottom: 4px; }
.sfz-policy a { color: #85672A; text-decoration: underline; text-underline-offset: 3px; }
.sfz-policy-kicker { font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: #85672A; margin-bottom: 18px; }
.sfz-policy-lead { font-size: 16px; margin-bottom: 26px; }
.sfz-todo { background: rgba(201, 164, 92, .22); color: #0D0D0D; padding: 0 4px; }
.sfz-faq { border-bottom: 1px solid #E8E1D4; padding: 4px 0; }
.sfz-faq:first-of-type { border-top: 1px solid #E8E1D4; }
.sfz-faq summary {
	cursor: pointer; list-style: none; position: relative; padding: 18px 40px 18px 0;
	font-family: "Playfair Display", serif; font-size: 19px; color: #0D0D0D; transition: color var(--sfz-t-fast) ease;
}
.sfz-faq summary::-webkit-details-marker { display: none; }
.sfz-faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-family: Montserrat, sans-serif; font-size: 22px; color: #C9A45C; transition: transform var(--sfz-t-fast) ease; }
.sfz-faq[open] summary::after { transform: rotate(45deg); }
.sfz-faq summary:hover { color: #85672A; }
.sfz-faq p { margin: 0 0 20px; }
.sfz-page-head { text-align: center; margin: 40px auto 46px; }
.sfz-page-head .sfz-page-title { font-family: "Playfair Display", serif; font-weight: 400; font-size: 44px; line-height: 1.2; color: #0D0D0D; margin: 0; }
.sfz-page-head::after { content: ""; display: block; width: 70px; height: 1px; background: #C9A45C; margin: 20px auto 0; }
@media (max-width: 767px) { .sfz-page-head { margin: 26px auto 30px; } .sfz-page-head .sfz-page-title { font-size: 32px; } }