/* ============================================================
   ZARPLACE — MAIN CSS
   ============================================================ */

/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container--wide { max-width: 1440px; margin: 0 auto; padding: 0 2rem; }
.section { padding: 5rem 0; }
.section--sm { padding: 3rem 0; }
.section--lg { padding: 8rem 0; }

/* Grid */
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
@media(max-width:1024px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

/* Typography */
.heading-display { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,5rem); font-weight:700; line-height:1.1; }
.heading-xl      { font-family:var(--font-display); font-size:clamp(2rem,4vw,3.5rem); font-weight:700; line-height:1.15; }
.heading-lg      { font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.5rem); font-weight:700; }
.heading-md      { font-family:var(--font-display); font-size:clamp(1.25rem,2.5vw,2rem); font-weight:600; }
.text-accent     { font-family:var(--font-accent); }
.text-gold       { color:var(--color-gold); }
.text-primary    { color:var(--color-primary); }
.text-muted      { color:var(--color-text-muted); }

/* Section Headers */
.section-header { text-align:center; margin-bottom:3rem; }
.section-header__eyebrow { font-family:var(--font-accent); color:var(--color-gold); font-size:0.875rem; letter-spacing:0.2em; text-transform:uppercase; margin-bottom:0.75rem; display:block; }
.section-header__title   { font-family:var(--font-display); font-size:clamp(1.75rem,3.5vw,2.75rem); color:var(--color-text); margin-bottom:1rem; }
.section-header__subtitle{ color:var(--color-text-muted); max-width:36rem; margin:0 auto; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.875rem 2rem; border-radius:0.25rem; font-family:var(--font-body); font-size:0.875rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer; transition:all var(--transition-base); border:2px solid transparent; white-space:nowrap; text-decoration:none; }
.btn-primary { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.btn-primary:hover { background:var(--color-primary-light); border-color:var(--color-primary-light); transform:translateY(-2px); box-shadow:var(--shadow-primary); }
.btn-outline { background:transparent; color:var(--color-primary); border-color:var(--color-primary); }
.btn-outline:hover { background:var(--color-primary); color:#fff; transform:translateY(-2px); }
.btn-gold { background:var(--color-gold); color:#1A1A1A; border-color:var(--color-gold); }
.btn-gold:hover { background:var(--color-gold-light); border-color:var(--color-gold-light); transform:translateY(-2px); box-shadow:var(--shadow-gold); }
.btn-white { background:#fff; color:var(--color-primary); border-color:#fff; }
.btn-white:hover { background:transparent; color:#fff; }
.btn-whatsapp { background:#25D366; color:#fff; border-color:#25D366; }
.btn-whatsapp:hover { background:#1da851; border-color:#1da851; transform:translateY(-2px); }
.btn--full { width:100%; }
.btn--lg { padding:1.125rem 2.5rem; font-size:1rem; }
.btn--sm { padding:0.625rem 1.25rem; font-size:0.8125rem; }
.btn--icon { padding:0.875rem; border-radius:50%; }

/* Badges */
.badge { display:inline-flex; align-items:center; padding:0.25rem 0.75rem; border-radius:999px; font-size:0.75rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; }
.badge-sale { background:var(--color-primary); color:#fff; }
.badge-new  { background:var(--color-gold); color:#1A1A1A; }
.badge-gold { background:var(--color-gold); color:#1A1A1A; font-family:var(--font-accent); font-style:italic; }

/* Announcement Bar */
.announcement-bar { background:var(--color-primary); color:#fff; text-align:center; padding:0.625rem 1rem; font-size:0.8125rem; font-weight:500; letter-spacing:0.03em; position:relative; z-index:var(--z-sticky); }
.announcement-bar a { color:var(--color-gold-light); text-decoration:underline; }

/* Progress Bar */
#zarplace-progress-bar { position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,var(--color-primary),var(--color-gold)); width:0%; z-index:var(--z-toast); transition:width 0.1s linear; }

/* Breadcrumb */
.zarplace-breadcrumb { padding:1rem 0; font-size:0.875rem; color:var(--color-text-muted); }
.zarplace-breadcrumb a { color:var(--color-text-muted); }
.zarplace-breadcrumb a:hover { color:var(--color-primary); }
.zarplace-breadcrumb span + span::before { content:' / '; margin:0 0.5rem; }

/* Skeleton Loading */
.skeleton { background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:skeleton-shimmer 1.5s infinite; border-radius:0.25rem; }
@keyframes skeleton-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-card { height:420px; }
.skeleton-text  { height:1rem; margin-bottom:0.5rem; }
.skeleton-text--sm { width:60%; }

/* Toast Notifications */
#zarplace-toasts { position:fixed; top:1.5rem; right:1.5rem; z-index:var(--z-toast); display:flex; flex-direction:column; gap:0.75rem; pointer-events:none; }
.zarplace-toast { background:#1A1A1A; color:#fff; padding:0.875rem 1.25rem; border-radius:0.5rem; font-size:0.875rem; font-weight:500; display:flex; align-items:center; gap:0.75rem; box-shadow:var(--shadow-xl); pointer-events:all; min-width:280px; border-left:4px solid var(--color-gold); transform:translateX(120%); transition:transform var(--transition-spring); }
.zarplace-toast.is-visible { transform:translateX(0); }
.zarplace-toast--success { border-left-color:var(--color-success); }
.zarplace-toast--error   { border-left-color:var(--color-error); }
.zarplace-toast__icon    { font-size:1.125rem; flex-shrink:0; }
.zarplace-toast__close   { margin-left:auto; cursor:pointer; opacity:0.6; flex-shrink:0; }
.zarplace-toast__close:hover { opacity:1; }

/* WooCommerce notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error { border-radius:0.5rem; padding:1rem 1.5rem; margin:1rem 0; font-size:0.9375rem; }
.woocommerce-message { background:#d1fae5; border-left:4px solid var(--color-success); color:#065f46; }
.woocommerce-info    { background:#dbeafe; border-left:4px solid #3b82f6; color:#1e40af; }
.woocommerce-error   { background:#fee2e2; border-left:4px solid var(--color-error); color:#991b1b; }
.woocommerce-message a.button,.woocommerce-info a.button { display:inline-flex; align-items:center; padding:0.5rem 1rem; background:var(--color-primary); color:#fff; border-radius:0.25rem; font-size:0.875rem; font-weight:600; text-decoration:none; }

/* Marquee */
.marquee-wrapper { overflow:hidden; background:var(--color-primary); padding:0.875rem 0; }
.marquee-track   { display:flex; white-space:nowrap; animation:marquee-scroll 30s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
.marquee-item    { padding:0 2rem; color:var(--color-gold); font-size:0.875rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; flex-shrink:0; }

/* Brand Strip */
.brand-strip { background:var(--color-bg-dark); padding:2rem 0; overflow:hidden; }
.brand-strip__track { display:flex; align-items:center; gap:4rem; animation:marquee-scroll 20s linear infinite; }
.brand-strip__item  { flex-shrink:0; font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--color-text-muted); opacity:0.6; transition:opacity var(--transition-base); white-space:nowrap; }
.brand-strip__item:hover { opacity:1; color:var(--color-primary); }

/* Trust Badges */
.trust-badges { background:var(--color-bg-dark); }
.trust-badges__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
@media(max-width:768px){ .trust-badges__grid{ grid-template-columns:repeat(2,1fr); gap:1.5rem; } }
.trust-badge { text-align:center; padding:2rem 1.5rem; }
.trust-badge__icon { font-size:2.5rem; margin-bottom:1rem; display:block; }
.trust-badge__title{ font-family:var(--font-display); font-size:1rem; font-weight:700; margin-bottom:0.375rem; color:var(--color-text); }
.trust-badge__text { font-size:0.8125rem; color:var(--color-text-muted); }

/* Stars */
.star-rating { color:var(--color-gold); font-size:0.875rem; letter-spacing:0.05em; }
.star-rating--sm { font-size:0.75rem; }

/* Tabs */
.zarplace-tabs { border-bottom:1px solid #e5e7eb; margin-bottom:2rem; display:flex; gap:0; }
.zarplace-tab  { padding:1rem 1.5rem; font-size:0.9375rem; font-weight:500; color:var(--color-text-muted); cursor:pointer; border-bottom:2px solid transparent; transition:all var(--transition-fast); background:none; border-top:none; border-left:none; border-right:none; }
.zarplace-tab:hover { color:var(--color-primary); }
.zarplace-tab.is-active { color:var(--color-primary); border-bottom-color:var(--color-primary); font-weight:600; }
.zarplace-tab-content { display:none; }
.zarplace-tab-content.is-active { display:block; }

/* Quantity Selector */
.qty-selector { display:flex; align-items:center; border:1px solid #e5e7eb; border-radius:0.25rem; overflow:hidden; width:fit-content; }
.qty-selector__btn { width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--color-bg-dark); color:var(--color-text); font-size:1.25rem; cursor:pointer; transition:background var(--transition-fast); border:none; }
.qty-selector__btn:hover { background:var(--color-bg-darker); }
.qty-selector__input { width:60px; height:44px; text-align:center; border:none; border-left:1px solid #e5e7eb; border-right:1px solid #e5e7eb; font-size:1rem; font-weight:600; background:#fff; -moz-appearance:textfield; }
.qty-selector__input::-webkit-inner-spin-button,.qty-selector__input::-webkit-outer-spin-button { -webkit-appearance:none; }

/* Instagram Grid */
.instagram-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; }
@media(max-width:640px){ .instagram-grid{ grid-template-columns:repeat(2,1fr); } }
.instagram-item { position:relative; aspect-ratio:1; overflow:hidden; }
.instagram-item img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-slow); }
.instagram-item:hover img { transform:scale(1.08); }
.instagram-item__overlay { position:absolute; inset:0; background:rgba(107,31,42,0.7); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; opacity:0; transition:opacity var(--transition-base); padding:1rem; text-align:center; }
.instagram-item:hover .instagram-item__overlay { opacity:1; }
.instagram-item__name  { color:#fff; font-family:var(--font-display); font-size:0.9rem; font-weight:700; }
.instagram-item__price { color:var(--color-gold-light); font-family:var(--font-accent); font-size:1rem; }

/* Cookie Banner */
#zarplace-cookie { position:fixed; bottom:0; left:0; right:0; background:rgba(26,26,26,0.96); color:#fff; padding:1rem 1.5rem; z-index:var(--z-modal); display:flex; align-items:center; justify-content:space-between; gap:1rem; backdrop-filter:blur(8px); transform:translateY(100%); transition:transform var(--transition-spring); }
#zarplace-cookie.is-visible { transform:translateY(0); }
.cookie-text { font-size:0.875rem; max-width:600px; }
.cookie-text a { color:var(--color-gold-light); text-decoration:underline; }
.cookie-actions { display:flex; gap:0.75rem; flex-shrink:0; }

/* WhatsApp Float */
#whatsapp-float { position:fixed; bottom:2rem; right:2rem; z-index:var(--z-modal); }
.whatsapp-float__btn { width:60px; height:60px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,0.4); transition:transform var(--transition-spring); cursor:pointer; text-decoration:none; }
.whatsapp-float__btn:hover { transform:scale(1.1); }
.whatsapp-float__pulse { position:absolute; inset:-4px; border-radius:50%; background:#25D366; opacity:0.3; animation:pulse-ring 2s ease-out infinite; }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:0.3} 100%{transform:scale(1.6);opacity:0} }

/* Social Proof Popup */
#social-proof-popup { position:fixed; bottom:1.5rem; left:1.5rem; z-index:var(--z-modal); background:#fff; border-radius:0.75rem; box-shadow:var(--shadow-xl); padding:1rem 1.25rem; display:flex; align-items:center; gap:1rem; max-width:300px; transform:translateX(-120%); transition:transform var(--transition-spring); }
#social-proof-popup.is-visible { transform:translateX(0); }
.social-proof__avatar { width:44px; height:44px; border-radius:50%; background:var(--color-blush); display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.social-proof__text   { font-size:0.8125rem; color:var(--color-text); line-height:1.4; }
.social-proof__text strong { display:block; font-weight:700; margin-bottom:0.125rem; }
.social-proof__time   { font-size:0.75rem; color:var(--color-text-muted); margin-top:0.25rem; display:block; }

/* Back to Top */
#back-to-top { position:fixed; bottom:5.5rem; right:2rem; z-index:var(--z-modal); width:44px; height:44px; background:var(--color-primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:all var(--transition-base); font-size:1.25rem; border:none; }
#back-to-top.is-visible { opacity:1; pointer-events:all; }
#back-to-top:hover { background:var(--color-primary-light); transform:translateY(-3px); }

/* Overlay */
.zarplace-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:var(--z-overlay); opacity:0; pointer-events:none; transition:opacity var(--transition-base); backdrop-filter:blur(4px); }
.zarplace-overlay.is-active { opacity:1; pointer-events:all; }

/* Page Loader */
#zarplace-loader { position:fixed; inset:0; background:var(--color-bg); z-index:var(--z-loader); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; }
#zarplace-loader svg { width:180px; height:auto; }
.loader-bar { width:200px; height:3px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.loader-bar__fill { height:100%; background:linear-gradient(90deg,var(--color-primary),var(--color-gold)); animation:loader-fill 1.2s ease-out forwards; }
@keyframes loader-fill { from{width:0} to{width:100%} }

/* Exit Intent Popup */
#exit-popup { position:fixed; inset:0; z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; padding:1rem; pointer-events:none; opacity:0; transition:opacity var(--transition-base); }
#exit-popup.is-active { opacity:1; pointer-events:all; }
.exit-popup__card { background:#fff; border-radius:1.5rem; padding:3rem; max-width:480px; width:100%; text-align:center; box-shadow:var(--shadow-xl); position:relative; transform:scale(0.9); transition:transform var(--transition-spring); }
#exit-popup.is-active .exit-popup__card { transform:scale(1); }
.exit-popup__close { position:absolute; top:1rem; right:1rem; width:32px; height:32px; border-radius:50%; background:var(--color-bg-dark); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.exit-popup__discount { font-family:var(--font-accent); font-size:4rem; color:var(--color-primary); line-height:1; margin:1rem 0; font-weight:600; }
.exit-popup__form { display:flex; gap:0.5rem; margin-top:1.5rem; }
.exit-popup__form input { flex:1; padding:0.875rem 1rem; border:1px solid #e5e7eb; border-radius:0.25rem; font-family:var(--font-body); font-size:0.9rem; }
.exit-popup__form input:focus { outline:none; border-color:var(--color-primary); }

/* Delivery estimate */
.delivery-estimate { display:flex; align-items:center; gap:0.75rem; padding:0.875rem 1rem; background:var(--color-bg-dark); border-radius:0.5rem; font-size:0.875rem; color:var(--color-text-muted); }
.delivery-estimate svg { color:var(--color-success); flex-shrink:0; }

/* Urgency */
.urgency-block { display:flex; flex-direction:column; gap:0.5rem; margin:1rem 0; }
.urgency-item { display:flex; align-items:center; gap:0.5rem; font-size:0.875rem; color:var(--color-text-muted); }
.urgency-item .dot { width:8px; height:8px; border-radius:50%; background:var(--color-success); animation:blink 1.5s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Price Display */
.price-wrap { display:flex; align-items:baseline; gap:0.75rem; flex-wrap:wrap; }
.price-current { font-family:var(--font-accent); font-size:2rem; color:var(--color-primary); font-weight:600; }
.price-original { font-family:var(--font-accent); font-size:1.25rem; color:var(--color-text-muted); text-decoration:line-through; }
.price-savings  { background:var(--color-blush); color:var(--color-primary); font-size:0.8125rem; font-weight:700; padding:0.25rem 0.625rem; border-radius:999px; }

/* Share */
.product-share { display:flex; align-items:center; gap:0.75rem; margin-top:1.5rem; }
.share-label { font-size:0.875rem; color:var(--color-text-muted); font-weight:500; }
.share-btn { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; transition:all var(--transition-fast); text-decoration:none; }
.share-btn--fb  { background:#1877f2; color:#fff; }
.share-btn--wa  { background:#25D366; color:#fff; }
.share-btn--copy{ background:var(--color-bg-dark); color:var(--color-text); }
.share-btn:hover { transform:scale(1.15); }

/* Recently Viewed */
.recently-viewed { background:var(--color-bg-dark); padding:3rem 0; }

/* Input styles */
.zarplace-input { width:100%; padding:0.875rem 1rem; border:1px solid #e5e7eb; border-radius:0.375rem; font-family:var(--font-body); font-size:1rem; color:var(--color-text); background:#fff; transition:border-color var(--transition-fast),box-shadow var(--transition-fast); }
.zarplace-input:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(107,31,42,0.1); }
.zarplace-input::placeholder { color:var(--color-text-light); }
.zarplace-label { display:block; font-size:0.875rem; font-weight:600; margin-bottom:0.375rem; color:var(--color-text); }
.form-group { margin-bottom:1.25rem; }

/* No products */
.no-products { text-align:center; padding:5rem 1rem; }
.no-products__icon { font-size:4rem; margin-bottom:1rem; }
.no-products h2 { font-family:var(--font-display); font-size:1.5rem; margin-bottom:0.5rem; }
.no-products p  { color:var(--color-text-muted); margin-bottom:1.5rem; }

@keyframes marquee-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }