/**
Theme Name: Astra - Eclipsar
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-eclipsar
Template: astra
*/

/* Instagram trust-badge – vivid tint, extra spacing */
.ig-trust-badge{
	/* theme-controlled palette  */
	--accent:  var(--ast-global-color-0);          /* primary brand colour      */
	--bg:      color-mix(in srgb, var(--accent) 12%, #fff 88%);
	          /* ↳ fallback for older browsers: see @supports below  */
	--border:  color-mix(in srgb, var(--accent) 30%, transparent);

	color: var(--accent);
	background: var(--bg);
	border: 2px solid var(--border);
	border-radius: 150px;

	/* stronger elevation */
	box-shadow: 0 4px 12px rgba(0,0,0,.10);

	/* layout */
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: .45em;
	row-gap: .25em;

	/* fluid size + extra breathing room */
	font-size: clamp(.8rem, 1vw + .4rem, 1rem);
	padding: clamp(.35em, 0.9vw, .6em) clamp(1em, 2vw, 1.4em);
	line-height: 1.25;
	text-align: center;

	/* NEW: space around the badge */
	margin: clamp(.6rem, 1.2vw, 1rem) 0;
}

/* emphasise follower count */
.ig-trust-badge strong       { color: #000; }
.ig-trust-badge .ig-user     { opacity: .8; display: inline-flex; align-items: center; }
.ig-trust-badge .ig-user,
.ig-trust-badge .ig-user:visited { color: inherit; text-decoration: none; }

/* icons */
.ig-trust-badge .ig-logo,
.ig-trust-badge .meta-verified{
	width: 1.15em; height: 1.15em; flex: 0 0 1.15em;
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
.ig-trust-badge .ig-logo       { background-image: url('https://eclips.ar/wp-content/uploads/instagram.svg'); }
.ig-trust-badge .meta-verified { margin-left: .3em; background-image: url('https://eclips.ar/wp-content/uploads/ig-verified.svg'); }

/* stack “@eclipsardeco ✔” on its own line below 420 px */
@media (max-width:420px){
	.ig-trust-badge .ig-user{
		flex: 1 0 100%;
		justify-content: center;
	}
}

/* graceful fallback for browsers that lack color-mix() */
@supports not (background: color-mix(in srgb, #000, #fff)){
	.ig-trust-badge{
		background: rgba(49, 67, 129, .08);   /* 12 % tint of default blue */
		border-color: rgba(49, 67, 129, .30);
	}
}


/* ===============================================================
   A.  Desktop (≥ 600 px): restore Astra’s default swatch table
   =============================================================== */

/* You previously forced every <tr> in the .variations table into a flex row
   – that makes the swatches jump out of place. Remove that override. */
@media (min-width:600px){
    .woocommerce div.product form.cart .variations tr{
        display: table-row !important;   /* back to standard table row */
        flex-wrap: unset;
        margin-bottom: 0;
    }
    .woocommerce div.product form.cart .variations td,
    .woocommerce div.product form.cart .variations th{
        width: auto !important;          /* let the browser size them   */
    }
}

/* ===============================================================
   Qty ▸ Add‑to‑cart ▸ Comprar – tidy alignment (all breakpoints)
   =============================================================== */

/* --- Flex wrapper for the action row (simple + variable products) --- */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.grouped_form){
    display:flex;
    flex-wrap:wrap;          /* lets items wrap to the next line      */
    gap:1rem;                /* both horizontal & vertical spacing     */
    align-items:stretch;
}

/* --- Qty selector – keep natural width ------------------------------ */
.single-product .woocommerce-variation-add-to-cart .quantity,
.single-product form.cart:not(.grouped_form)       .quantity{
    flex:0 0 auto;          /* never stretches                        */
    margin:0;               /* clear theme margin                     */
}

/* --- Add‑to‑cart (native) ------------------------------------------- */
.single-product .single_add_to_cart_button{
    flex:1 1 250px;         /* fills remaining row space, min 250 px  */
    width:auto !important;  /* overrides Astra’s 50 % width rule      */
}

/* --- Buy‑now (our new button) --------------------------------------- */
.single-product .eclipsar-buy-now{
    flex:1 1 100%;          /* forces a new line, full width          */
    margin:0;               /* clears theme margin                    */
}

/* --- Equal look & feel for BOTH buttons ----------------------------- */
.single-product .single_add_to_cart_button,
.single-product .eclipsar-buy-now{
    padding:11px 25px;      /* matches Astra’s sticky bar buttons     */
    font-weight:600;
}

/* --- Mobile (≤ 480 px): nudge Qty selector to the edge ------------- */
@media (max-width:480px){
    .single-product .woocommerce-variation-add-to-cart .quantity,
    .single-product form.cart:not(.grouped_form)       .quantity{
        margin-right:auto;  /* keeps it flush left on narrow screens  */
    }
}



/* ===================================================================
   MOBILE (≤ 600 px) – show smaller title, hide breadcrumb
   =================================================================== */
@media {

	/* 1 ▸ re‑enable the header wrapper that contains the H1 */
	.woocommerce-products-header,
	.ast-archive-description{
		display:block !important;     /* was “none” – turn it back on */
		margin-bottom:1.2rem;          /* subtle spacing below title   */
	}

	/* 2 ▸ shrink the title text */
	.woocommerce-products-header h1,
	.ast-archive-description h1,
	.woocommerce-products-header .page-title{
		font-size:2rem;              /* was ~2.2 rem in Astra */
		line-height:1.3;
		margin:0;                      /* tighten vertical space */
		display:none !important;
	}

	/* 3 ▸ hide the breadcrumb trail only */
	.woocommerce-breadcrumb,         /* WooCommerce */
	.ast-breadcrumbs{                /* Astra’s own wrapper */
		display:none !important;
	}

	/* keep the result‑count & sorter hidden from your earlier rule */
	.woocommerce-result-count,
	.woocommerce-ordering{
		display:none !important;
	}
}


/* Hide Astra’s sale badge everywhere */
.ast-onsale-card,
.ast-on-card-button.ast-onsale-card,
.woocommerce span.onsale{
	display:none !important;
}


/*───────────────────────────────────────────────────────────────
  ECLIPSAR · Promo badges  v3
  • both pills show            • single‑product only
  • mobile: unchanged          • desktop: smaller pill, bigger text
───────────────────────────────────────────────────────────────*/

/* 0 ▸ site‑wide toggle */
body:not(.single-product){ --badge-disp:none; }
body.single-product     { --badge-disp:flex; }

.single-product .woocommerce-product-gallery{
    position:relative;

    /* universal knobs – change once, both badges follow */
    --badge-bg: var(--ast-global-color-0, #314381); /* pill backgr.  */
    --badge-fg: #fff;                               /* text          */
    --badge-rim:rgba(255,255,255,.25);              /* inner stroke  */

    /* Default (mobile) size & offsets */
    --badge-w: clamp(160px, 40vw, 320px);
    --badge-fs:clamp(.85rem, .5vw + .8rem, 1.25rem);
    --badge-pad:.9em;
    --badge-x:clamp(1rem, 6%, 32px);
    --badge-y:clamp(1rem, 4%, 24px);
}

/* === Desktop tweak  ≥ 768 px ====================================== */
@media (min-width:768px){
    .single-product .woocommerce-product-gallery{
        --badge-w: clamp(180px, 28vw, 260px);   /* pill narrower   */
        --badge-fs:clamp(1rem, .25vw + 1.05rem, 1.6rem); /* text bigger */
    }
}

/* === shared pill =================================================== */
.single-product .woocommerce-product-gallery::before,
.single-product .woocommerce-product-gallery::after{
    display:var(--badge-disp);
    position:absolute;
    left:var(--badge-x); top:var(--badge-y);

    width:var(--badge-w);
    aspect-ratio:4/1;
    padding-inline:var(--badge-pad);

    border-radius:999px;
    background:var(--badge-bg);
    color:var(--badge-fg);
    box-shadow:inset 0 0 0 2px var(--badge-rim);

    font:700 var(--badge-fs)/1.15 inherit;
    letter-spacing:.02em;
    text-align:center;
    white-space:normal;          /* allows wrap if needed */
    align-items:center;justify-content:center;
    z-index:30;
}

/* top pill – edit the text if you prefer “SALE” */
.single-product .woocommerce-product-gallery::before{
    content:"40 % OFF";          /* ← change to "SALE" if desired */
}

/* bottom pill */
.single-product .woocommerce-product-gallery::after{
    content:"6 CUOTAS SIN INTERÉS";
    transform:translateY(calc(100% + 10px));
}

/* ========== OPTIONAL COLOUR PALETTE QUICK‑SWAPS =====================

   Uncomment ONE group to test. Keep only one active at a time.

   — Recipe B (teal Furniture Store accent) —
   .single-product .woocommerce-product-gallery{
       --badge-bg:var(--ast-global-color-1);
       --badge-fg:#fff;
       --badge-rim:rgba(255,255,255,.2);
   }

   — Recipe C (warm amber / dark text) —
   .single-product .woocommerce-product-gallery{
       --badge-bg:#F0B429;
       --badge-fg:#1B2330;
       --badge-rim:rgba(27,35,48,.25);
   }

   — Recipe D (white pill / navy text) —
   .single-product .woocommerce-product-gallery{
       --badge-bg:#ffffff;
       --badge-fg:var(--ast-global-color-0);
       --badge-rim:rgba(0,0,0,.15);
   }

   — Recipe F (two‑tone gradient) —
   .single-product .woocommerce-product-gallery{
       --badge-bg:conic-gradient(from 135deg,#6A837D,#415C71);
       --badge-fg:#fff;
       --badge-rim:rgba(255,255,255,.3);
   }
*/

/*───────────────────────────────────────────────────────────────
  Badge fine‑tuning  ·  furniture‑store mood
  ───────────────────────────────────────────────────────────────*/

/* 1 ▸ Typography – choose ONE of the suggested font pairs
   (uncomment the one you prefer and be sure the font is enqueued
    in Customizer ▸ Global ▸ Typography or via a child‑theme enqueue)  */

/* A. Inter SemiBold 600  (matches Furniture Store headings)  */
/*
.single-product .woocommerce-product-gallery{
    --badge-font:"Inter", sans-serif;
    --badge-font-weight:600;
}
*/

/* B. Poppins Bold 700  (slightly rounder, playful)  */

.single-product .woocommerce-product-gallery{
    --badge-font:"Poppins", sans-serif;
    --badge-font-weight:700;
}


/* C. Montserrat ExtraBold 800  (punchy, wide)  */
/*
.single-product .woocommerce-product-gallery{
    --badge-font:"Montserrat", sans-serif;
    --badge-font-weight:800;
}
*/

/*  (Leave both lines commented if you’re happy with inherit) */


/* 2 ▸ Subtle inner stroke: 0.5 px instead of 2 px                  */
.single-product .woocommerce-product-gallery::before,
.single-product .woocommerce-product-gallery::after{
    box-shadow:inset 0 0 0 0.5px var(--badge-rim);   /* radius = 0.5 px */
}

/* 3 ▸ Desktop font grows to *nearly* fill the pill width
      – pill width unchanged                                        */
@media (min-width:768px){
    .single-product .woocommerce-product-gallery{
        --badge-fs: clamp(1.2rem, 2vw + .6rem, 2.1rem); /* bigger text */
    }
}

/* 4 ▸ Apply chosen font + weight if you enabled §1 above           */
.single-product .woocommerce-product-gallery::before,
.single-product .woocommerce-product-gallery::after{
    font-family: var(--badge-font, inherit);
    font-weight: var(--badge-font-weight, 700);
}

.single-product .woocommerce-product-gallery{
    --badge-bg:var(--ast-global-color-1);
    --badge-fg:#fff;
    --badge-rim:rgba(255,255,255,.2);
}






/* ----------------------------------------------------------- */