.mhk-atc{width:100%}
.mhk-atc__grid{display:flex;align-items:flex-start!important;justify-content:space-between;gap:24px}
.mhk-atc__left{display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-width:0;margin-top:10px}
.mhk-atc__row{display:flex;align-items:center;gap:3px;order:1}
.mhk-atc__variations{order:2;width:100%;box-sizing:border-box}
.mhk-atc__button{padding:14px 22px 14px 44px;cursor:pointer;border:0;border-radius:8px;font-weight:700;width:145px;height:44px;display:flex;align-items:center;justify-content:center;position:relative}
.mhk-atc__button::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:0;pointer-events:none;display:block}
.mhk-atc__button::after{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none;opacity:1;background:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5H5L7.4 14.2C7.5 14.7 8 15 8.5 15H17.4C17.9 15 18.4 14.7 18.5 14.2L20 8H6' stroke='%230F2E68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9.5' cy='19' r='1.5' stroke='%230F2E68' stroke-width='1.8'/%3E%3Ccircle cx='17.5' cy='19' r='1.5' stroke='%230F2E68' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / 16px 16px}
.mhk-atc__button.is-loading::after,.mhk-atc__button.is-added::after{opacity:0}
.mhk-atc__button.is-loading::before{opacity:1;background:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='2.1' stroke='%230F2E68' stroke-width='1.4'/%3E%3Cpath d='M8 1.3V3M8 13V14.7M1.3 8H3M13 8H14.7M3.1 3.1L4.3 4.3M11.7 11.7L12.9 12.9M12.9 3.1L11.7 4.3M4.3 11.7L3.1 12.9' stroke='%230F2E68' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 16px 16px;transform-origin:50% 50%;will-change:transform;backface-visibility:hidden;animation:mhkAtcGearSpin 1s linear infinite}
.mhk-atc__button.is-added::before{opacity:1;background:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 8.4L6.55 11.7L12.75 5.5' stroke='%230F2E68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px}
@keyframes mhkAtcGearSpin{from{transform:translateY(-50%) rotate(0deg)}to{transform:translateY(-50%) rotate(360deg)}}
.mhk-atc__button.is-disabled,
.mhk-atc__button:disabled{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}
.mhk-atc__qty{display:flex;align-items:center;gap:0}
.mhk-atc__qty-btn{width:47px;height:44px;border:0;font-size:24px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.mhk-atc__qty-minus{border-radius:5px 0 0 5px}
.mhk-atc__qty-plus{border-radius:0 5px 5px 0}
.mhk-atc__qty-num{display:inline-flex;align-items:center;justify-content:center;width:47px;height:44px;border-radius:0;font-weight:700;padding:0;border-left:3px solid white;border-right:3px solid white}
.mhk-atc__price{font-size:44px;font-weight:800;text-align:right;display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto;margin:0!important;padding:0;align-self:flex-start!important}

/* Regular price (when no sale) */
.mhk-atc__price > .woocommerce-Price-amount.amount{font-size:44px;font-weight:800}
.mhk-atc__price .price{display:flex;flex-direction:column;align-items:flex-end;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1}
.mhk-atc__price .price .woocommerce-Price-amount.amount{font-size:44px;font-weight:800}
.mhk-atc__price .price .woocommerce-Price-amount.amount bdi{color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}

/* Sale + old price layout and reset unwanted styles */
.mhk-atc__price ins,
.mhk-atc__price del{display:block;margin:0;padding:0;border:0;outline:0;background:transparent;text-decoration:none;line-height:1;height:30px}
.mhk-atc__price ins .woocommerce-Price-amount.amount{font-size:44px;font-weight:800;line-height:1}
.mhk-atc__price del .woocommerce-Price-amount.amount{font-size:32px;font-weight:400;text-decoration:line-through;margin-top:0;line-height:1}
/* Bring del closer to ins */
.mhk-atc__price ins+del{margin-top:-2px}
.mhk-atc__price .woocommerce-Price-amount.amount,
.mhk-atc__price .woocommerce-Price-amount.amount *{border:0;outline:0;background:transparent}
/* Make <bdi> inherit parent amount styles */
.mhk-atc__price .woocommerce-Price-amount.amount bdi{color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}

/* Hide SR text printed by Woo around price */
.mhk-atc__price .screen-reader-text{position:absolute;left:-9999px;height:1px;width:1px;overflow:hidden}

/* Hide native add-to-cart controls inside Woo templates; we drive them via custom UI */
.mhk-atc__variations .cart{display:none}
.mhk-atc__variations .woocommerce-variation-add-to-cart{display:none}
.mhk-atc__variations .single_add_to_cart_button{display:none}
.mhk-atc__variations .quantity{display:none}

/* Hide mobile elements on desktop */
.mhk-atc__variations-mobile{display:none}
.mhk-atc__mobile-bottom{display:none}

/* Make variations dropdown match button row width on desktop */
.mhk-atc__variations .variations{width:100%;display:block;box-sizing:border-box}
.mhk-atc__variations .variations select{width:100% !important;display:block;box-sizing:border-box;min-width:0}
/* Override any fixed widths from theme/plugins */
.mhk-atc__variations .variations td,
.mhk-atc__variations .variations th,
.mhk-atc__variations .variations .label{width:100% !important;max-width:none!important;box-sizing:border-box}
.mhk-atc__variations .variations td.value{display:block !important;width:300px !important;max-width:none!important;box-sizing:border-box}
.mhk-atc__variations .select2-container{width:100% !important}
.mhk-atc__variations .select2-container .select2-selection{width:100% !important}

/* Ensure variations are visible */
.mhk-atc__variations .variations_form{display:block !important}
.mhk-atc__variations .variations{display:block !important}
.mhk-atc__variations .variations td{display:block !important}
.mhk-atc__variations .variations td.label{display:block !important}
.mhk-atc__variations .variations td.value{display:block !important}

/* Mobile variations styles - same as desktop */
.mhk-atc__variations-mobile .variations{width:100%;display:block;box-sizing:border-box}
.mhk-atc__variations-mobile .variations select{width:100% !important;display:block;box-sizing:border-box;min-width:0}
.mhk-atc__variations-mobile .variations td,
.mhk-atc__variations-mobile .variations th,
.mhk-atc__variations-mobile .variations .label{width:100% !important;max-width:none!important;box-sizing:border-box}
.mhk-atc__variations-mobile .variations td.value{display:block !important;width:300px !important;max-width:none!important;box-sizing:border-box}
.mhk-atc__variations-mobile .select2-container{width:100% !important}
.mhk-atc__variations-mobile .select2-container .select2-selection{width:100% !important}
.mhk-atc__variations-mobile .variations_form{display:block !important}
.mhk-atc__variations-mobile .variations{display:block !important}
.mhk-atc__variations-mobile .variations td{display:block !important}
.mhk-atc__variations-mobile .variations td.label{display:block !important}
.mhk-atc__variations-mobile .variations td.value{display:block !important}

/* Apply desktop variation styles to mobile variations */
.mhk-atc__variations-mobile .variations select,
.mhk-atc__variations-mobile .variations .label,
.mhk-atc__variations-mobile .variations td,
.mhk-atc__variations-mobile .variations th {
  /* Inherit all styles from desktop variations */
  color: inherit;
  background-color: inherit;
  border: inherit;
  border-radius: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: inherit;
  margin: inherit;
}

/* Mobile variations specific styles */
.mhk-atc__variations-mobile .variations select {
  width: 100% !important;
  border-bottom: 1px solid #B69E59;
  /* Smaller vertical whitespace under the dropdown */
  padding-bottom: 8px;
}

.mhk-atc__variations-mobile .variations td.value {
  width: 100% !important;
}

/* Hide labels in mobile */
.mhk-atc__variations-mobile .variations td.label,
.mhk-atc__variations-mobile .variations .label {
  display: none !important;
}

/* Hide unwanted WooCommerce elements in mobile variations */
.mhk-atc__variations-mobile .cart{display:none}
.mhk-atc__variations-mobile .woocommerce-variation-add-to-cart{display:none}
.mhk-atc__variations-mobile .single_add_to_cart_button{display:none}
.mhk-atc__variations-mobile .quantity{display:none}

@media (max-width: 767px){
  /* Reduce the vertical gap between the variations area and the bottom row */
  .mhk-atc__grid{flex-direction:column;gap:8px;align-items:stretch!important}
  .mhk-atc__desktop-layout{display:none}
  /* Let the variations block grow with selected variation content (prevents overlap + empty space) */
  .mhk-atc__variations-mobile{display:block;order:0;width:100% !important;margin-bottom:6px;height:auto;min-height:0}
  .mhk-atc__variations-mobile .variations{position:relative;width:100% !important}
  .mhk-atc__variations-mobile .variations tbody{width:100% !important;display:block}
  .mhk-atc__variations-mobile .variations td,
  .mhk-atc__variations-mobile .variations th{width:100% !important;position:static;display:block !important;margin-bottom:6px}
  .mhk-atc__variations-mobile .variations tr{display:block !important;margin-bottom:6px;width:100% !important}
  .mhk-atc__variations-mobile .variations select,
  .mhk-atc__variations-mobile .variations .select2-container{width:100% !important;max-width:100% !important}
  .mhk-atc__variations-mobile .variations .select2-container .select2-selection{width:100% !important}

  /* Theme/Woo default adds large bottom margin on mobile forms */
  .mhk-atc__variations-mobile .woocommerce div.product form.cart,
  .mhk-atc__variations-mobile form.cart,
  .mhk-atc__variations-mobile form.variations_form.cart{
    margin-bottom:0 !important;
  }

  /* Ensure Woo's variation output takes space and pushes the bottom block down */
  .mhk-atc__variations-mobile .woocommerce-variation,
  .mhk-atc__variations-mobile .woocommerce-variation-description,
  .mhk-atc__variations-mobile .woocommerce-variation-price,
  .mhk-atc__variations-mobile .woocommerce-variation-availability{
    display:block;
    width:100%;
    clear:both;
  }
  .mhk-atc__mobile-bottom{display:flex;order:1;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:16px;width:100%}
  .mhk-atc__mobile-bottom .mhk-atc__left{flex:1;order:1}
  .mhk-atc__mobile-bottom .mhk-atc__row{flex-direction:column;align-items:flex-start;gap:10px}
  .mhk-atc__mobile-bottom .mhk-atc__qty{order:2}
  .mhk-atc__mobile-bottom .mhk-atc__button{order:1}
  .mhk-atc__mobile-bottom .mhk-atc__price{order:2;flex:0 0 auto;margin:0}
}

/* Desktop layout - show by default */
@media (min-width: 768px) {
  .mhk-atc__desktop-layout{
    display:flex;
    width:100%
  }
}

/* Takista teate automaatne peitmine - jäta nähtavale */
.mhk-atc__notices-wrapper .woocommerce-message {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
}

/* Takista ka fadeOut ja hide animatsioonid */
.mhk-atc__notices-wrapper .woocommerce-message.fadeOut,
.mhk-atc__notices-wrapper .woocommerce-message[style*="display: none"],
.mhk-atc__notices-wrapper .woocommerce-message[style*="opacity: 0"] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Restore item link värv valge */
.mhk-atc__notices-wrapper .woocommerce-message a.restore-item,
.mhk-atc__notices-wrapper .woocommerce-message .restore-item,
.mhk-atc__notices-wrapper .woocommerce-message a[href*="restore-item"] {
  color: white !important;
}

.mhk-atc__notices-wrapper .woocommerce-message a.restore-item:hover,
.mhk-atc__notices-wrapper .woocommerce-message .restore-item:hover,
.mhk-atc__notices-wrapper .woocommerce-message a[href*="restore-item"]:hover {
  color: white !important;
  opacity: 0.9;
}

