/* Skinova custom responsive fixes + WooCommerce password field alignment */

.woocommerce-account form.login .form-row,
.woocommerce-account form.register .form-row{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.woocommerce-account form.login .form-row label,
.woocommerce-account form.register .form-row label{
  display: block !important;
  width: 100% !important;
  float: none !important;
}

.woocommerce-account form.login input.input-text,
.woocommerce-account form.register input.input-text{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  float: none !important;
}

.woocommerce-account .password-input{
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  float: none !important;
}
.woocommerce-account .password-input input.input-text{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 42px !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
}
.woocommerce-account .password-input .show-password-input{
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  padding: 4px !important;
  z-index: 2;
}

@media (max-width: 600px) {
  .woocommerce-account .woocommerce{
    overflow-x: hidden;
  }

  .woocommerce-account .col2-set,
  .woocommerce-account .u-columns{
    display: block !important;
    width: 100% !important;
  }

  .woocommerce-account .col2-set .col-1,
  .woocommerce-account .col2-set .col-2,
  .woocommerce-account .u-column1,
  .woocommerce-account .u-column2{
    width: 100% !important;
    float: none !important;
    margin: 0 0 30px 0 !important;
    box-sizing: border-box !important;
  }

  .woocommerce-account form.login,
  .woocommerce-account form.register,
  .woocommerce-account .woocommerce-form-login,
  .woocommerce-account .woocommerce-form-register{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ===== Product card redesign (homepage - block-based product-collection) ===== */
.product-div-box li.wc-block-product{
  border: none !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(8,74,90,0.08) !important;
  padding: 22px 22px 26px !important;
  text-align: center !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.product-div-box li.wc-block-product:hover{
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(8,74,90,0.14) !important;
}
.product-div-box .product-img{
  margin: -22px -22px 16px -22px !important;
  background: transparent !important;
  width: calc(100% + 44px) !important;
  height: 260px !important;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
.product-section .products-sec-box .product-img img,
.product-section .products-sec-box .product-box:hover .product-img img,
.product-div-box .product-img img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
}
.product-div-box .product-title{
  margin-bottom: 4px !important;
}
.product-div-box .product-title a{
  text-decoration: none !important;
}
.skinova-product-desc{
  color: #6b6b6b !important;
  line-height: 1.5;
  max-width: 90%;
  margin-left: auto !important;
  margin-right: auto !important;
}
.product-div-box .product-price{
  margin-bottom: 18px !important;
  display: block;
}
.skinova-product-actions{
  gap: 16px !important;
  align-items: center !important;
  justify-content: center !important;
}
.skinova-add-to-cart .wp-block-button,
.skinova-add-to-cart{
  margin: 0 !important;
}
.skinova-add-to-cart a,
.skinova-add-to-cart button{
  background: var(--wp--preset--color--primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 34px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.6px !important;
  text-decoration: none !important;
  display: inline-block;
}
.skinova-add-to-cart a:hover,
.skinova-add-to-cart button:hover{
  background: var(--wp--preset--color--secondary) !important;
  color: var(--wp--preset--color--primary) !important;
}

/* ===== Shop archive page (classic legacy template: ul.products li.product) ===== */
.woocommerce ul.products{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 28px !important;
  width: 100% !important;
  margin: 0 !important;
  list-style: none !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after{
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product{
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  box-shadow: 0 10px 30px rgba(8,74,90,0.08) !important;
  border: none !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  padding: 0 0 24px !important;
  text-align: center !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), filter 0.65s ease;
}
.woocommerce ul.products li.product:hover{
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(8,74,90,0.14) !important;
}
.woocommerce ul.products li.product a img{
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  margin: 0 0 16px !important;
  border-radius: 0 !important;
}
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .product_title{
  padding: 0 16px !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px;
}
.woocommerce ul.products li.product .price{
  padding: 0 16px;
  margin-bottom: 14px !important;
  display: block;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button{
  margin: auto 16px 0 !important;
  background: var(--wp--preset--color--primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 30px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.6px !important;
  align-self: center;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button:hover{
  background: var(--wp--preset--color--secondary) !important;
  color: var(--wp--preset--color--primary) !important;
}

/* Scroll-triggered reveal: cards start slightly below their final position,
   faded out and gently blurred, and animate in as they enter the viewport
   while scrolling (JS adds .skinova-in-view via IntersectionObserver, with
   a small staggered delay per card set inline so they cascade in rather
   than all appearing at once). transform/opacity/filter only - never touches
   layout properties, so it can't affect the grid positioning fixes above. */
.woocommerce ul.products li.product{
  opacity: 0;
  transform: translateY(45px);
  filter: blur(4px);
}
.woocommerce ul.products li.product.skinova-in-view{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.woocommerce ul.products li.product.skinova-in-view:hover{
  transform: translateY(-5px);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  }
}

/* Related products (single product page) render this exact same ul.products
   li.product markup. Confirmed via inspector: the img itself correctly gets
   width:100% - but that resolves against its immediate parent, the
   <a class="woocommerce-LoopProduct-link"> anchor, which is naturally
   display:inline and only as wide as its own content. Forcing the anchor
   itself to stretch full width fixes the actual root cause. */
.related.products ul.products li.product a.woocommerce-LoopProduct-link{
  display: block !important;
  width: 100% !important;
}
.related.products ul.products li.product img,
.related.products ul.products li.product a img{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  margin: 0 0 16px !important;
}

/* ===== Cart page ===== */

.wc-block-components-sidebar-layout.wc-block-cart{
  gap: 40px !important;
}
.wc-block-components-sidebar.wc-block-cart__sidebar{
  flex: 0 0 380px !important;
  max-width: 380px !important;
}

.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-heading-block,
span.wc-block-woocommerce-cart-order-summary-heading-block,
.wc-block-components-totals-wrapper .wc-block-cart__totals-title{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
  position: static !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}

.skinova-cart-page table.wc-block-cart-items{
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 26px rgba(8,74,90,0.07) !important;
  overflow: hidden;
}
.skinova-cart-page tr.wc-block-cart-items__header{
  background: #f7fbfb;
}
.skinova-cart-page tr.wc-block-cart-items__header th{
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 13px !important;
  color: var(--wp--preset--color--primary);
}
.skinova-cart-page a.wc-block-components-product-name{
  color: var(--wp--preset--color--primary) !important;
  font-weight: 700 !important;
}
.skinova-cart-page a.wc-block-components-product-name:hover{
  color: var(--wp--preset--color--secondary) !important;
}
.skinova-cart-page .wc-block-components-quantity-selector{
  border-radius: 999px !important;
  border: 1px solid #e2e2e2 !important;
  overflow: hidden;
}
.skinova-cart-page .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{
  color: var(--wp--preset--color--primary);
}
.skinova-cart-page button.wc-block-cart-item__remove-link{
  color: #a94442 !important;
  font-weight: 600;
}
.skinova-cart-page .wp-block-woocommerce-cart-order-summary-block,
.skinova-cart-page .wc-block-cart__totals-title,
.skinova-cart-page .wp-block-woocommerce-cart-totals-block{
  background: #ffffff;
  border-radius: 18px !important;
  box-shadow: 0 8px 26px rgba(8,74,90,0.07) !important;
  border: none !important;
  padding: 6px 4px;
}
.skinova-cart-page span.wc-block-woocommerce-cart-order-summary-heading-block,
.skinova-cart-page .wc-block-cart__totals-title{
  color: var(--wp--preset--color--primary) !important;
}
.skinova-cart-page a.wc-block-components-checkout-return-to-cart-button{
  border: 1px solid var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--primary) !important;
  background: transparent !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px !important;
}
.skinova-cart-page a.wc-block-components-checkout-return-to-cart-button:hover{
  background: var(--wp--preset--color--primary) !important;
  color: #fff !important;
}
.skinova-cart-page a.components-button.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained{
  background: var(--wp--preset--color--primary) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 20px !important;
}
.skinova-cart-page a.components-button.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:hover{
  background: var(--wp--preset--color--secondary) !important;
  color: var(--wp--preset--color--primary) !important;
}

/* Injected shipping row (see skinova-cart-shipping-row.js) - styled to match
   WooCommerce's own .wc-block-components-totals-item rows exactly, including
   the same horizontal padding those rows use so columns line up correctly. */
.skinova-shipping-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 16px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  font-size: 0.9em;
  box-sizing: border-box;
}
.skinova-shipping-label{
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}
.skinova-shipping-value{
  font-weight: 600;
}

/* ===== Single product page ===== */
.skinova-single-product .product{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
@media (max-width: 900px) {
  .skinova-single-product .product{
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.skinova-single-product .woocommerce-product-gallery{
  /* WooCommerce's own woocommerce-layout.css sets div.images/div.summary to
     width:48% + float:left for its classic side-by-side layout. That fights
     our CSS Grid columns above (an explicit width wins over grid's stretch),
     so both columns render at ~48% of their track instead of filling it. */
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(8,74,90,0.08);
}
.skinova-single-product .woocommerce-product-gallery img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.skinova-single-product .summary.entry-summary{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding-top: 4px;
}
.skinova-single-product .summary.entry-summary h1.product_title{
  color: var(--wp--preset--color--primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 32px;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}
.skinova-single-product .summary.entry-summary p.price{
  font-size: 26px !important;
  color: var(--wp--preset--color--primary) !important;
  font-weight: 700;
  margin-bottom: 18px !important;
}
.skinova-single-product .summary.entry-summary .woocommerce-product-details__short-description{
  color: #666;
  line-height: 1.7;
  margin-bottom: 24px;
}
.skinova-single-product .summary.entry-summary .quantity .qty{
  border-radius: 999px !important;
  height: 48px;
  text-align: center;
}
.skinova-single-product .summary.entry-summary button.single_add_to_cart_button{
  background: var(--wp--preset--color--primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 15px 44px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 13px !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.skinova-single-product .summary.entry-summary button.single_add_to_cart_button:hover{
  background: var(--wp--preset--color--secondary) !important;
  color: var(--wp--preset--color--primary) !important;
}
.skinova-single-product .summary.entry-summary .cart{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.skinova-single-product .summary.entry-summary .woocommerce-product-meta{
  font-size: 13px;
  color: #999;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.skinova-single-product .woocommerce-tabs{
  margin-top: 60px;
  clear: both;
}
.skinova-single-product .woocommerce-tabs ul.tabs{
  display: flex;
  gap: 30px;
  border-bottom: 2px solid #f0f0f0;
  padding: 0;
  margin: 0 0 30px;
  list-style: none;
}
.skinova-single-product .woocommerce-tabs ul.tabs li{
  margin: 0;
}
.skinova-single-product .woocommerce-tabs ul.tabs li a{
  display: inline-block;
  padding: 12px 0;
  color: #999;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.skinova-single-product .woocommerce-tabs ul.tabs li.active a{
  color: var(--wp--preset--color--primary);
  border-bottom-color: var(--wp--preset--color--primary);
}
.skinova-single-product .woocommerce-tabs .woocommerce-Tabs-panel{
  color: #555;
  line-height: 1.8;
}

.skinova-single-product .related.products{
  margin-top: 70px;
}
.skinova-single-product .related.products h2{
  color: var(--wp--preset--color--primary);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 30px;
}

/* ===== Homepage hero entrance animation ===== */
/* Text content slides down from above + fades in; the image slides up from
   below + fades in, on page load. Staggered slightly so they don't land
   at exactly the same moment. */
@keyframes skinova-hero-slide-down{
  from{
    opacity: 0;
    transform: translateY(-45px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes skinova-hero-slide-up{
  from{
    opacity: 0;
    transform: translateY(55px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-content-box .hero-text-col{
  animation: skinova-hero-slide-down 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.hero-content-box .hero-img-col{
  animation: skinova-hero-slide-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-content-box .hero-text-col,
  .hero-content-box .hero-img-col{
    animation: none;
  }
}

/* The model image should always bleed flush to the bottom edge of the
   sky-blue hero section, at every screen size, so it reads as an
   intentional bottom-crop rather than a cut-off/incomplete photo.
   hero-content-box's padding-bottom:60px (and the Columns block's own
   default margin-bottom) exist for spacing *between* the two side-by-side
   desktop columns and *above* the section that follows - not as space
   under the image itself, so both are zeroed unconditionally. On wide
   screens the row is also vertically centered (are-vertically-aligned-center),
   which would otherwise center the image and leave gaps above *and* below
   it; align-self: flex-end pins the image column to the bottom of the row
   regardless of viewport width, while the text column stays centered. */
.hero-content-box{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.hero-content-box .hero-img-col{
  align-self: flex-end;
  margin-bottom: 0;
}
.hero-content-box .hero-img-col figure,
.hero-content-box .hero-img-col img{
  display: block;
  margin: 0;
}