/*!
Theme Name: upCom
Theme URI: ---
Author: UpturnLab
Author URI: ---
Description: ---
Version: 1.0.0
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: upcom
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

*/

:root {
  /* COLOR */
  --color-primary: #b2061f;
  --color-black: #242424;
  --color-white: #ffffff;
  --color-gray: #eeeeee;

  /* TEXT */
  --color-text: var(--color-black);
  --text-primary: "Montserrat", sans-serif;
  --text-accent: "Cormorant", serif;

  /* SPACE */
  --space-xs: 2px; /* микро-отступы внутри строк / внутри одного элемента */
  --space-sm: 8px; /* плотные элементы управления / внутри одного элемента */
  --space-md: 24px; /* внутренности компонентов / внутри одного компонента (карточка товара, header) */
  --space-lg: 32px; /* расстояние между компонентами / между компонентами */
  --space-xl: 160px; /* архитектура страницы, секции / между секциями  */

  /* BORDER RADIUS */
  --border-sm: 0px;
  --border-md: 0px;

  /* HEADINGS*/
  /* font size */
  --fs-h1: clamp(28px, 3.2vw, 44px);
  --fs-h2: clamp(22px, 2.4vw, 34px);
  --fs-h3: clamp(18px, 1.8vw, 26px);

  --fs-sm: 12px;

  /* margin bottom */
  --mb-h2: 32px;

  /* line height */
  --line-height-base: 1.5;
  --line-height-heading: 0.9;

  /* font weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* CONTAINER */
  --container-max: 1128px;
  --container-padding: clamp(16px, 3vw, 24px);

  /* ANIMATIONS */
  --t-fast: 180ms ease;
  --t-mid: 280ms ease;
}

* {
  transition: color 0.5s ease;
}

body {
  font-family: var(--text-primary);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

main {
  flex: 1;
  width: 100%;
}

h1 {
  font-family: var(--text-accent);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-h1);
}

h2 {
  font-family: var(--text-accent);
  font-weight: var(--font-weight-medium);
  font-size: var(--fs-h2);
  margin-bottom: var(--mb-h2);
}

h3 {
  font-family: var(--text-accent);
  font-weight: var(--font-weight-medium);
  font-size: var(--fs-h3);
}

input {
  background: var(--color-gray);
  border-bottom: 1px solid var(--color-primary);
  border-radius: var(--border-sm);
  color: var(--color-black);
  padding: var(--space-xs);
}

input:focus {
  outline: none;
  border-bottom: 2px solid var(--color-primary);
}

section {
  margin-bottom: var(--space-xl);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  width: 100%;
}

.btn-primary {
  border-radius: var(--border-sm);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  text-align: center;
  font-weight: var(--font-weight-medium);
  padding: var(--space-sm) var(--space-md);
  transition: all 0.5s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-white);
}

.btn-secondary {
  border-radius: var(--border-sm);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
  text-align: center;
  font-weight: var(--font-weight-medium);
  background: var(--color-primary);
  padding: var(--space-sm) var(--space-md);
}

div#customer_details {
  margin-bottom: 44px !important;
}

.woocommerce-info {
  border-top-color: var(--color-primary) !important;
}

.woocommerce-info::before {
  color: var(--color-primary) !important;
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
  background-color: rgba(178, 6, 31, 0.1);
}

#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
  background-color: #fff;
}

#add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before{
  display: none;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt {
  background-color: var(--color-primary);
}

div#order_review {
  margin-bottom: 100px;
}


.hero {
    margin-top: var(--space-lg);
    margin-bottom: min(var(--space-xl), 120px);
  }

  .hero__card {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-md);
    background: var(--color-gray);
    min-height: 420px;
    display: flex;
    /* grid-template-columns: 1.15fr 0.85fr; */
    gap: 0;
  }

  .hero__content {
    padding: clamp(18px, 3vw, 40px); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-md);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(6px);
    flex: 1;
  }

  .hero__lead {
    max-width: 55ch;
    opacity: 0.92;
  }

  .hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(36, 36, 36, 0.18);
    background: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    white-space: nowrap;
  }

  .badge strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
  }

  .hero__media {
    position: relative;
    background: #dcdcdc;
    flex: 1;
  }

  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to left,
      rgba(0, 0, 0, 0.25),
      rgba(0, 0, 0, 0.06),
      rgba(0, 0, 0, 0)
    );
    pointer-events: none;
  }

  .photo {
    position: relative;
    width: 100%;
    height: 100%;
    background: #dcdcdc;
    overflow: hidden;
  }

  .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .photo img[src=""] {
    opacity: 0;
  }

  .photo::before {
    content: "";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--text-accent);
    font-size: 18px;
    letter-spacing: 0.5px;
    color: rgba(36, 36, 36, 0.65);
    background: radial-gradient(
      circle at 30% 30%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.2)
    );
  }

  .grid {
    display: flex;
    flex-direction: row-reverse;
    gap: var(--space-lg);
    align-items: start;
  }

  .card {
    background: var(--color-gray);
    padding: var(--space-md);
    border-radius: var(--border-sm);
    flex: 1;
  }

  .card--white {
    background: var(--color-white);
    border: 1px solid rgba(36, 36, 36, 0.1);
    flex: 1;
  }

  .kicker {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 10px;
  }

  .title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }

  .divider {
    height: 1px;
    background: rgba(36, 36, 36, 0.12);
    margin: var(--space-md) 0;
  }

  .quote {
    font-family: var(--text-accent);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.2;
  }

  .values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .value {
    background: var(--color-gray);
    padding: var(--space-md);
    border-radius: var(--border-sm);
    transition:
      box-shadow 0.25s ease,
      transform 0.25s ease,
      background 0.25s ease;
    cursor: default;
    min-height: 180px;
  }

  .value:hover {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }

  .value__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(36, 36, 36, 0.12);
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    background: rgba(255, 255, 255, 0.65);
  }

  .value__title {
    margin-bottom: 8px;
    font-weight: var(--font-weight-bold);
    font-family: var(--text-primary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .value__text {
    font-size: 13px;
    opacity: 0.85;
  }

  .gallery {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-lg);
  }

  .gallery__stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .photo--tall {
    min-height: 520px;
  }


  .cta {
    background: var(--color-gray);
    padding: clamp(18px, 3vw, 40px);
    border-radius: var(--border-sm);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-lg);
    align-items: center;
  }

  .cta__text p {
    opacity: 0.9;
  }

  .btn-primary {
    border-radius: var(--border-sm);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    text-align: center;
    font-weight: var(--font-weight-medium);
    padding: var(--space-sm) var(--space-md);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 10px;
    width: fit-content;
  }

  .btn-primary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
  }

  @media (max-width: 1024px) {
    .values {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 768px) {
    .hero__card {
      /* grid-template-columns: 1fr; */
      min-height: 0;
      flex-direction: column;
    }
    

    .grid {
      /* grid-template-columns: 1fr; */
      flex-direction: column;
    }

    .gallery {
      grid-template-columns: 1fr;
    }

    .photo--tall {
      min-height: 320px;
    }

    .cta {
      grid-template-columns: 1fr;
    }

    .section {
      margin-bottom: 100px;
    }
  }

  @media (max-width: 540px) {
    .values {
      grid-template-columns: 1fr;
    }

    .hero__content {
      padding: 18px;
    }
  }

/* FIX: make overrides work on sale page too (no .woocommerce wrapper there) */
ul.products li.product-item .product-item__info{
  height:auto;
  align-items:flex-start;
  text-align:left;
  padding:12px 0 10px;
  gap:8px;
}

ul.products li.product-item .product-item__header{
  font-family: var(--text-primary) !important;
  font-size:14px;
  line-height:1.3;
  font-weight:500;
  flex: 0 0 auto; /* важно: чтобы не выдавливал остальное */
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden;
}

ul.products li.product-item .product-item__category{
  margin:0;
  font-size:12px;
  opacity:.6;
  font-family: var(--text-primary);
}

ul.products li.product-item .product-item__stars > p{ display:none; } /* убрать слово Rating */

ul.products li.product-item .product-item__actions{
  top:10px;
  right:10px;
  bottom:auto;
}

ul.products li.product-item .product-item__badge{
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  line-height:1;
  font-family: var(--text-primary);
  font-weight:600;
}

ul.products li.product-item a.product-btn{
  /*margin: 0 12px 12px;
  width: calc(100% - 24px);*/
  border-radius:999px;
  /*padding:12px 16px;*/
  font-size: 12px;
}

/* === v2 polish: price hierarchy + card feel (safe) === */

/*ul.products li.product-item{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}*/

/*ul.products li.product-item .product-item__info{
  padding:12px 12px 10px;
}*/

/* price hierarchy */
ul.products li.product-item .product-item__price{
  margin-top:2px;
}

ul.products li.product-item .product-item__price_aktual{
  font-size:16px;
  font-weight:800;
}

ul.products li.product-item .product-item__price_old{
  font-size:12px;
  opacity:.5;
}

/* rating line make calmer */
ul.products li.product-item .product-item__more{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  opacity:.7;
}

/* if there is a "|" separator somewhere, hide it */
ul.products li.product-item .product-item__more .sep{
  display:none;
}


/* ensure overlay positions correctly */
ul.products li.product-item .product-item-top{ position:relative; }

/* bottom overlay: rating + reviews */
ul.products li.product-item .product-item-top .product-item__more--overlay{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:3;

  display:flex;
  align-items:center;
  gap:10px;

  padding:6px 10px;
  border-radius:999px;

  background: rgba(255,255,255,.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  color: rgba(0,0,0,.82);
  font-size:12px;
  line-height:1;
}

ul.products li.product-item .product-item-top .product-item__more--overlay span{
  display:flex;
  align-items:center;
  gap:6px;
}

ul.products li.product-item .product-item-top .product-item__more--overlay svg{
  width:14px;
  height:14px;
  fill: currentColor;
}

/* meta: Brand • Category in one line */
ul.products li.product-item .product-item__category{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* title: one line + ... */
ul.products li.product-item .product-item__header{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
}



/* === Product card meta overlay + single-line titles (safe; shimmer intact) === */

/* 1) meta line Brand • Category: не переносим */
ul.products li.product-item .product-item__category{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 2) title: одна строка + ... */
ul.products li.product-item .product-item__header{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100%;
  display:block !important;
}

/* 3) rating/reviews overlay in bottom of image */
ul.products li.product-item .product-item-top .product-item__more--overlay{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:3;

  display:flex;
  align-items:center;
  gap:10px;

  padding:6px 10px;
  border-radius:999px;

  background: rgba(255,255,255,.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  color: rgba(0,0,0,.82);
  font-size:12px;
  line-height:1;
}

ul.products li.product-item .product-item-top .product-item__more--overlay span{
  display:flex;
  align-items:center;
  gap:6px;
}

ul.products li.product-item .product-item-top .product-item__more--overlay svg{
  width:14px;
  height:14px;
  fill: currentColor;
}

/* 4) shimmer sizing fix for overlay (чтобы скелетон выглядел аккуратно) */
.js .product-item.is-card-loading .product-item-top .product-item__more--overlay{
  width: 55%;
  height: 18px;
  padding:0;
}

/* optional: на очень узком экране прячем count отзывов */
@media (max-width: 420px){
  ul.products li.product-item .product-item-top .product-item__more--overlay .product-item__reviews{
    display:none;
  }
}

.product-item__more--overlay{
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}


/* clickable brand/category look */
ul.products li.product-item .product-item__category a{
  color: inherit;
  text-decoration: none;
}

ul.products li.product-item .product-item__category a:hover{
  text-decoration: underline;
}



/* fade in instead of blink */
.product-item__category{
  opacity: 0.8;
  transition: opacity .15s ease;
  font-size: 12px;
}
.js .product-item.is-card-loading .product-item__category{
  opacity: 0;
}









/* === Disable card hover highlight completely === */
ul.products li.product-item{
  transition: none !important;
}
ul.products li.product-item:hover{
  box-shadow: none !important;
  transform: none !important;
}

/* если где-то есть hover на ссылке/топе — тоже прибьём */
ul.products li.product-item a:hover,
ul.products li.product-item a:focus{
  box-shadow: none !important;
  outline: none !important;
}

/* === Quick view button (replaces rating overlay on hover) === */
ul.products li.product-item .product-item-top{
  position: relative; /* на всякий, чтобы absolute внутри работал стабильно */
}

ul.products li.product-item .product-item__quickview{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 4;

  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);

  font-size: 13px;
  font-weight: 600;
  color: rgba(0,0,0,.85);

  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;

  transition: opacity .15s ease, transform .15s ease;
}

/* во время скелетона не показываем quickview */
.js .product-item.is-card-loading .product-item__quickview{
  opacity: 0 !important;
  transform: translateY(4px) !important;
}

/* только на устройствах с hover: показываем кнопку, скрываем рейтинг */
@media (hover: hover) and (pointer: fine){
  ul.products li.product-item:hover .product-item__quickview{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  ul.products li.product-item:hover .product-item__more--overlay{
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
  }
}






/* stable loading dots without changing DOM */
a.product-btn.is-up-adding{
  position:relative;
  pointer-events:none;
  color: transparent !important; /* прячем текст, но размеры те же */
}

a.product-btn.is-up-adding::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:48px;
  height:10px;
  display:block;
  background:
    radial-gradient(circle, currentColor 60%, transparent 61%) 0 50%/10px 10px no-repeat,
    radial-gradient(circle, currentColor 60%, transparent 61%) 50% 50%/10px 10px no-repeat,
    radial-gradient(circle, currentColor 60%, transparent 61%) 100% 50%/10px 10px no-repeat;
  color: rgba(255,255,255,.9);
  animation: upDots 0.9s infinite;
}

@keyframes upDots{
  0%,100%{ transform: translateY(0); opacity:.6; }
  50%{ transform: translateY(-2px); opacity:1; }
}




/* Woo injects this link after add-to-cart — it causes layout jump */
ul.products a.added_to_cart.wc-forward{
  display:none !important;
}

/* Kill any default Woo loading spinner on product loop buttons */
ul.products a.product-btn.loading::after{
  display:none !important;
  content:none !important;
}


ul.products a.product-btn{
  min-height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
}