/* ------------------------------------------------------------------
   Lux Peptides — component layer
   Written against Elementor + WooCommerce markup, driven entirely by
   the custom properties in tokens.css.

   Design language being reproduced:
     - Syne everywhere; uppercase headings (0.5px tracking, 1.1 line-height)
       and uppercase buttons (2px tracking)
     - 14px radius on surfaces, 10px on buttons
     - Buttons fill from the bottom on hover (0.3s ease-in-out)
     - Warm off-white page (#fbfaf6), near-black ink (#151515)

   Specificity policy: every rule here is a single class or element
   selector at :where() strength where possible, so Elementor's own
   per-widget controls always win. If a client changes a button colour
   in the Elementor panel, it must take effect — this file sets the
   defaults, never the ceiling.
   ------------------------------------------------------------------ */

/* --- Base ------------------------------------------------------- */

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--font-base-size);
  font-weight: var(--font-base-weight);
  font-style: var(--font-base-style);
  line-height: var(--font-base-line-height);
  letter-spacing: var(--font-base-letter-spacing);
  -webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-headings-text);
  font-family: var(--font-headline);
  font-weight: var(--font-headline-weight);
  line-height: var(--font-headline-line-height);
  letter-spacing: var(--font-headline-letter-spacing);
  text-transform: var(--font-headline-transform);
}

:where(a) {
  color: var(--color-links);
  transition: color var(--duration-default) ease;
}

:where(a:hover) {
  color: var(--color-links-active);
}

:where(hr) {
  border: 0;
  border-top: 1px solid var(--color-hr);
}

/* Content width — matches the Shopify layout-width setting. Elementor's
   own container width should be set to the same value in Site Settings;
   this is the fallback for anything rendered outside a container. */
.e-con,
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--site-max-width);
}

/* --- Buttons ----------------------------------------------------- */

/* Applies to Elementor buttons, WooCommerce buttons, and native form
   submits so a single token change restyles all three. */
.lx-btn,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  --btn-fill: var(--color-button-primary-background-hover);
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  background-color: var(--color-button-primary-background);
  color: var(--color-button-primary-text);
  border: 1px solid transparent;
  border-radius: var(--border-radius-button);
  padding: 1.1em 2.2em;
  font-family: var(--font-button);
  font-size: var(--font-button-size);
  font-weight: var(--font-button-weight);
  letter-spacing: var(--font-button-letter-spacing);
  text-transform: var(--font-button-transform);
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  clip-path: inset(0 round var(--border-radius-button));
  transition: color var(--duration-medium) ease-in-out;
}

/* The fill sits behind the label and slides up on hover. Using a
   pseudo-element rather than a background transition keeps the label
   colour crisp mid-animation. */
.lx-btn::after,
.elementor-button::after,
.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce input.button::after,
.woocommerce #respond input#submit::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--btn-fill);
  border-radius: var(--border-radius-button);
  transform: translateY(101%);
  transition: transform var(--duration-medium) ease-in-out;
}

@media (hover: hover) {
  .lx-btn:hover::after,
  .elementor-button:hover::after,
  .woocommerce a.button:hover::after,
  .woocommerce button.button:hover::after,
  .woocommerce input.button:hover::after,
  .woocommerce #respond input#submit:hover::after {
    transform: translateY(0);
  }

  .lx-btn:hover,
  .elementor-button:hover,
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .woocommerce input.button:hover,
  .woocommerce #respond input#submit:hover {
    color: var(--color-button-primary-text-hover);
  }
}

/* input[type=submit] can't host a pseudo-element. Fall back to a plain
   background transition so the hover still reads as the same gesture. */
input.lx-btn,
.woocommerce input.button {
  clip-path: none;
  transition: background-color var(--duration-medium) ease-in-out,
              color var(--duration-medium) ease-in-out;
}

input.lx-btn::after,
.woocommerce input.button::after {
  content: none;
}

input.lx-btn:hover,
.woocommerce input.button:hover {
  background-color: var(--btn-fill);
  color: var(--color-button-primary-text-hover);
}

/* Secondary / outline */
.lx-btn--secondary,
.elementor-button.lx-btn--secondary {
  --btn-fill: var(--color-button-secondary-background-hover);
  background-color: var(--color-button-secondary-background);
  border-color: var(--color-button-secondary-border);
  color: var(--color-button-secondary-text);
}

@media (hover: hover) {
  .lx-btn--secondary:hover,
  .elementor-button.lx-btn--secondary:hover {
    color: var(--color-button-secondary-text-hover);
  }
}

/* Keyboard focus must stay visible — the clip-path above would otherwise
   crop a default outline. */
.lx-btn:focus-visible,
.elementor-button:focus-visible,
.woocommerce .button:focus-visible {
  outline: 2px solid var(--color-links-active);
  outline-offset: 3px;
  clip-path: none;
}

/* --- Forms ------------------------------------------------------- */

.lx-field,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.elementor-field-group .elementor-field {
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: 1px solid var(--color-input-border);
  border-radius: var(--border-radius);
  min-height: var(--input-height);
  padding: 0 14px;
  font-family: var(--font-base);
  font-size: var(--font-base-size);
  transition: border-color var(--duration-default) ease;
}

.lx-field::placeholder,
.woocommerce form .form-row input.input-text::placeholder,
.elementor-field-group .elementor-field::placeholder {
  color: var(--color-input-placeholder);
}

.lx-field:focus,
.woocommerce form .form-row input.input-text:focus,
.elementor-field-group .elementor-field:focus {
  border-color: var(--color-input-border-active);
  outline: none;
}

/* --- Product card ------------------------------------------------ */

.woocommerce ul.products li.product,
.lx-card {
/*   background: var(--color-background); */
  border-radius: var(--border-radius);
  overflow: hidden;
}

.woocommerce ul.products li.product a img,
.lx-card__media img {
  border-radius: var(--border-radius);
  transition: transform var(--onhover-picture-duration) var(--ease-out-slow);
}

@media (hover: hover) {
  .woocommerce ul.products li.product:hover a img,
  .lx-card:hover .lx-card__media img {
    transform: scale(var(--onhover-picture-scale));
  }
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.lx-card__title {
  color: var(--color-headings-text);
  font-family: var(--font-headline);
  font-size: var(--font-headline-size);
  font-weight: var(--font-headline-weight);
  letter-spacing: var(--font-headline-letter-spacing);
  line-height: var(--font-headline-line-height);
  text-transform: var(--font-headline-transform);
}

/* --- Price ------------------------------------------------------- */

.woocommerce .price,
.lx-price {
  color: var(--color-price);
  font-family: var(--font-price);
  font-weight: var(--font-price-weight);
}

.woocommerce .price del,
.lx-price--was {
  color: var(--color-body-text-light);
  opacity: 1;
}

.woocommerce .price ins,
.lx-price--sale {
  color: var(--color-sale-price);
  text-decoration: none;
}

/* --- Badges ------------------------------------------------------ */

.woocommerce span.onsale,
.lx-badge--sale {
  background-color: var(--color-sale-badge-background);
  color: #fff;
  border-radius: var(--border-radius-button);
  padding: 0.5em 1em;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  font-family: var(--font-button);
  font-size: var(--font-button-size);
  font-weight: var(--font-button-weight);
  letter-spacing: var(--font-button-letter-spacing);
  text-transform: var(--font-button-transform);
}

.lx-badge--sold-out {
  background-color: var(--color-sold-out-background);
  color: var(--color-sold-out-text);
}

.lx-badge--new {
  /* custom-badge-1 in the Shopify config */
  background-color: #e3f2e6;
  color: #151515;
}

/* --- Star rating ------------------------------------------------- */

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
  color: var(--color-star-rating);
}

/* --- Header / footer -------------------------------------------- */

.site-header,
.lx-header {
  background-color: var(--color-header-background);
  color: var(--color-header-text);
  border-bottom: 1px solid var(--color-header-border);
}

.lx-nav a {
  color: var(--color-header-text);
  font-family: var(--font-navigation);
  font-size: var(--font-navigation-size);
  font-weight: var(--font-navigation-weight);
  letter-spacing: var(--font-navigation-letter-spacing);
  text-transform: var(--font-navigation-transform);
  text-decoration: none;
}

.site-footer,
.lx-footer {
  background-color: var(--color-footer-background);
  color: var(--color-footer-text);
}

.lx-footer a {
  color: var(--color-footer-text);
}

/* --- Cart count dot ---------------------------------------------- */

.lx-cart-count {
  background-color: var(--color-action-background);
  color: var(--color-action-text);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  min-width: 1.8em;
  min-height: 1.8em;
  font-size: 11px;
  line-height: 1;
}

/* --- Motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* pagination */
.lx-pagination{
    margin:0px 0px 30px 0px;
    text-align:center;
}

.lx-pagination .page-numbers{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    margin:0 6px;
    text-decoration:none;
    color:#111;
  	font-weight: 600;
}

.lx-pagination .current{
    border-bottom:1px solid #111;
}

/* sorting */
.lx-sorting{
	display: flex;
	justify-content: end;
	align-items: center;
	position: absolute;
	top: 0px;
	right: 0;
	z-index: 1;
	
}
.lx-sorting form{
	width: 180px;
}
.lx-sorting select{
	border: 0px;
}
.lx-sorting select:hover{
	background-color: white;
}

@media (max-width: 899px){
	.lx-sorting{
		position: relative;
		top: 0px;
	}
}
/* category tab */
.lx-category-tabs{
	display: flex;
    gap: 8px;
	margin-bottom: 20px;
}
.lx-category{
	  font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
	border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 100px;
	background: #ffffff;
    color: #111111 !important;
	letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03);
    cursor: pointer;
}
.lx-category:hover, .lx-category.active{
	background: #717171;
    border-color: #717171;
    color: #ffffff !important;
}

@media (max-width: 767px) {

    .lx-category-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .lx-category-tabs::-webkit-scrollbar {
        display: none;
    }

    .lx-category-tabs .lx-category {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}