@charset "UTF-8";
.single-product div.product {
  display: grid;
  grid-template-columns: 58% 42%;
  gap: 0;
  align-items: start;
}
@media (max-width: 1023px) {
  .single-product div.product {
    grid-template-columns: 1fr;
  }
}

.product-gallery {
  position: sticky;
  top: 90px;
  align-self: start;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cfccc9 transparent;
}
.product-gallery::-webkit-scrollbar {
  width: 8px;
}
.product-gallery::-webkit-scrollbar-thumb {
  background: #cfccc9;
  border-radius: 999px;
}
@media (max-width: 1023px) {
  .product-gallery {
    position: relative;
    top: 0; /* neutralise the desktop sticky top: 90px */
    max-height: none;
    overflow: visible;
  }
}
/* "Model nosi" tooltip over the product image. */
.product-gallery__note {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
}
.product-gallery__note-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 41, 39, 0.72);
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.product-gallery__note-bubble {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max-content;
  max-width: 240px;
  padding: 10px 12px;
  background: #2B2927;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.product-gallery__note:hover .product-gallery__note-bubble,
.product-gallery__note-btn:focus + .product-gallery__note-bubble,
.product-gallery__note-btn:focus-visible + .product-gallery__note-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.product-gallery__track {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.product-gallery__img, .product-gallery__slide video {
  display: block;
  width: 100%;
  aspect-ratio: 5/7;
  object-fit: cover;
}
.product-gallery__slide--video {
  background: #000;
}
.product-gallery__dots {
  display: none;
}
@media (max-width: 767px) {
  .product-gallery__viewport {
    overflow: hidden;
  }
  .product-gallery__track {
    flex-direction: row;
  }
  .product-gallery__slide {
    flex: 0 0 100%;
    min-width: 0;
  }
  .product-gallery__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
    margin-bottom: 10px;
  }
  /* Outline dots; .is-active below fills them (higher specificity, so the
     transparent background here never overrides it). */
  .product-gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    padding: 0;
    border: 2px solid #cfccc9;
  }
  .product-gallery__dot.is-active {
    background: #2B2927;
    border-color: #2B2927;
  }
}

.single-product .summary {
  align-self: center;
  justify-self: center;
  max-width: 980px;
  padding: 40px;
}
@media (max-width: 1023px) {
  .single-product .summary {
    padding: 24px 0 0;
  }
}
@media (max-width: 767px) {
  .single-product .summary.entry-summary {
    padding: 20px;
  }
}
.single-product .summary .product-notice {
  width: max-content;
  margin: 0 0 16px;
  padding: 11px 16px;
  border-radius: 4px;
  background: #f2efec;
  color: #2B2927;
  font-size: 14px;
  line-height: 1.45;
}
/* Scheduled drop — countdown that replaces the add-to-cart until release. */
.mokka-drop {
  margin: 8px 0 4px;
  padding: 24px 22px;
  border: 1px solid #e5e2df;
  background: #faf8f6;
  text-align: center;
}
.mokka-drop__label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #636363;
}
.mokka-drop__timer {
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1px;
  color: #2B2927;
  font-variant-numeric: tabular-nums;
}
.mokka-drop__timer:empty::before {
  content: "—:—:—";
}
.mokka-drop__when {
  margin: 12px 0 0;
  font-size: 13px;
  color: #636363;
}
.single-product .summary .product-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.single-product .summary .product-badge {
  display: inline-block;
  padding: 5px 15px;
  background: #2B2927;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}
.single-product .summary .product-badge--sale {
  background: #771011;
}
.single-product .summary .product_title {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  margin-bottom: 12px;
}
.single-product .summary .price {
  display: block;
  font-size: 17px;
  margin-bottom: 16px;
}
.single-product .summary .price del {
  color: #999999;
  margin-right: 8px;
  font-size: 0.85em;
}
.single-product .summary .price ins {
  text-decoration: none;
  color: #771011;
}
.single-product .summary .price .woocommerce-price-suffix {
  font-size: 12px;
  color: #5B5856;
  margin-left: 4px;
}
.single-product .summary .woocommerce-product-details__short-description {
  font-size: 14px;
  color: #5B5856;
  line-height: 1.7;
  margin-bottom: 18px;
}

.product-trust {
  margin-bottom: 18px;
}
.product-trust__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #2B2927;
  margin-bottom: 6px;
}
.product-trust__icon {
  width: 17px;
  height: 17px;
}

.mokka-size-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  text-decoration: underline;
  color: #2B2927;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* A <table> shrinks to its content by default, so the stepper's margin-left:auto
   had nothing to push against — full width makes it land on the column edge. */
.single-product .variations {
  width: 100%;
  margin-bottom: 20px;
}
.single-product .variations tr, .single-product .variations tbody, .single-product .variations td, .single-product .variations th {
  display: block;
}
.single-product .variations th.label {
  display: none;
}
.single-product .variations td.value {
  padding: 0;
}
/* Swatches and the qty stepper share one row at every width (swatches.js moves
   the stepper into this cell); the add-to-cart button goes full width beneath. */
.single-product .variations td.value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.single-product .quantity.mokka-qty-inline {
  margin-left: auto;
}
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  width: 100%;
  flex: none;
}

.single-product .mokka-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2px;
}

.single-product .variations select.mokka-swatch-select {
  display: none;
}

.single-product .mokka-swatch {
  min-width: 42px;
  min-height: 42px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2B2927;
  background: #fff;
  color: #2B2927;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.single-product .mokka-swatch:hover {
  border-color: rgba(43, 41, 39, 0.55);
}
.single-product .mokka-swatch:focus-visible {
  outline: 2px solid #2B2927;
  outline-offset: 2px;
}
.single-product .mokka-swatch.is-active {
  background: #2B2927;
  color: #fff;
  border-color: #2B2927;
}
.single-product .mokka-swatch.is-unavailable {
  opacity: 0.4;
  text-decoration: line-through;
  border-color: #c9c4be;
  /* Not selectable. swatches.js also sets [disabled] so the keyboard can't
     reach it either — pointer-events only stops the mouse. */
  pointer-events: none;
}
.single-product .mokka-swatch.is-unavailable.is-active {
  background: #c9c4be;
  color: #fff;
}

/* WooCommerce "Clear" link. Skriven: veličina se poništava klikom na već
   izabran swatch (assets/js/modules/swatches.js), pa je link duplikat. */
.single-product .reset_variations {
  display: none !important;
}

.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: stretch;
}
.single-product .quantity {
  display: inline-flex;
  align-items: stretch;
  height: 42px;
  margin-top: -2px;
  flex: 0 0 auto;
  width: fit-content;
  border: 1px solid #ddd;
}
.single-product .quantity input.qty {
  width: 30px;
  font-size: 14px;
  text-align: center;
  border: 0;
  -moz-appearance: textfield;
}
.single-product .quantity input.qty::-webkit-outer-spin-button, .single-product .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.single-product .quantity .qty-btn {
  width: 25px;
  font-size: 18px;
  color: #2B2927;
  background: none;
}
.single-product .quantity .qty-btn:hover {
  background: #f3f1ef;
}
/* Inline feedback when the AJAX add fails (out of stock, size not chosen…). */
.mokka-atc-message:empty {
  display: none;
}
.mokka-atc-message {
  flex-basis: 100%;
  margin: 10px 0 0;
  font-size: 13px;
  color: #771011;
}
.single_add_to_cart_button.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.single-product .single_add_to_cart_button {
  flex: 1 1 auto;
  width: auto;
  height: 40px;
  padding: 0 28px;
  background: #2B2927;
  color: #fff;
  border: 1px solid #2B2927;
  letter-spacing: 0.5px;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.single-product .single_add_to_cart_button:hover {
  background: transparent;
  color: #2B2927;
}
/* "Na zalihama" / "Nema na zalihama" red iz WC variation forme — skriven na
   svim rezolucijama; stanje se već vidi kroz swatch (precrtan + nedostupan). */
.single-product .woocommerce-variation-availability {
  display: none;
}

.product-accordion {
  margin-top: 22px;
  border-top: 1px solid #e5e2df;
}
.product-accordion__item {
  border-bottom: 1px solid #e5e2df;
}
.product-accordion__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 2px;
  font-weight: 400 !important;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
}
.product-accordion__title::-webkit-details-marker {
  display: none;
}
.product-accordion__title::after {
  content: "+";
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  color: #5B5856;
}
.product-accordion__item[open] .product-accordion__title::after {
  content: "–";
}
.product-accordion__content {
  padding: 0 2px 18px;
  font-size: 14px;
  color: #2B2927;
  line-height: 1.7;
}
/* Size-guide form inlined in the "Pomoć pri odabiru veličine" panel. */
.product-accordion__content .size-guide-form {
  margin-top: 16px;
}
.product-accordion__content p {
  margin-bottom: 0.7em;
}
.product-accordion__content ul {
  list-style: disc;
  padding-left: 18px;
  margin-bottom: 0.7em;
}
.product-accordion__content a {
  text-decoration: underline;
}

/* Open/close animation for the <details> items — no JS.
   `interpolate-size` is what lets block-size animate to/from `auto`; it is
   scoped to the accordion rather than :root so it can't affect anything else.
   `content-visibility ... allow-discrete` keeps the panel painted while it
   collapses, otherwise it would vanish instantly and only the open direction
   would animate. Browsers without ::details-content just snap open/closed —
   exactly the behaviour before this rule existed. */
.product-accordion {
  interpolate-size: allow-keywords;
}
.product-accordion__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.28s ease, content-visibility 0.28s allow-discrete;
}
.product-accordion__item[open]::details-content {
  block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
  .product-accordion__item::details-content {
    transition: none;
  }
}

/* Override the single-product form.cart flex-row so the combo stacks:
   products grid on top, then total, then the button. */
.single-product form.cart.combo-form {
  display: block;
  margin-bottom: 22px;
}
.combo-form__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* up to 3 per row, 1/3 each */
  gap: 12px;
  margin-bottom: 18px;
}

.combo-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e5e2df;
}
.combo-item__media {
  width: 100%;
}
.combo-item__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.combo-item__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.combo-item__name {
  font-weight: 500;
  font-size: 14px;
}
.combo-item__price {
  font-size: 13px;
}
.combo-item__price del {
  display: block;
  color: #999999;
  white-space: nowrap;
}
.combo-item__price ins {
  display: block;
  text-decoration: none;
  color: #771011;
  white-space: nowrap;
}
.combo-item__price small {
  display: block;
  color: #771011;
}
.combo-item__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.combo-size {
  cursor: pointer;
}
.combo-size input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.combo-size span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #2B2927;
  font-size: 13px;
}
.combo-size input:checked + span {
  background: #2B2927;
  color: #fff;
}
.combo-size.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.combo-size.is-disabled span {
  text-decoration: line-through;
}
.combo-form__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  margin-bottom: 8px;
  border-top: 1px solid #e5e2df;
}
.combo-form__total-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6f6a66;
}
.combo-form__total-value {
  font-size: 18px;
  font-weight: 600;
}
.combo-form__total-value {
  text-align: right;
}
.combo-form__total-value del {
  display: block;
  color: #999999;
  font-weight: 400;
  font-size: 14px;
  white-space: nowrap;
}
.combo-form__total-value ins {
  display: block;
  text-decoration: none;
  color: #771011;
  white-space: nowrap;
}
.combo-form__actions {
  margin: 0;
}
.combo-form__actions .single_add_to_cart_button {
  width: 100%;
}
@media (max-width: 600px) {
  .combo-form__items {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .combo-item {
    padding: 8px;
  }
  .combo-item__name {
    font-size: 12px;
  }
  .combo-size span {
    min-width: 30px;
    height: 30px;
    padding: 0 5px;
    font-size: 12px;
  }
}

/* Full-bleed on desktop only. On mobile the parent is already full width, and
   the 100vw/50vw math resolves against the (wider) layout viewport there, which
   pushed the section past the screen edge and created horizontal scroll. */
.related-products {
  width: 100%;
  padding: 80px 0 8px;
}
@media (min-width: 1024px) {
  .related-products {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}
.related-products .section-heading {
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* "Možda će Vam se dopasti" — identical shell to the related grid, plus tabs. */
.product-suggest .section-heading {
  margin-bottom: 14px;
}
.product-suggest__tabs {
  max-width: 1480px;
  margin: 0 auto 22px;
  padding-inline: 20px;
  display: flex;
  justify-content: center;
  gap: 26px;
}
.product-suggest__tab {
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: #5B5856;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.product-suggest__tab:hover {
  color: #2B2927;
}
.product-suggest__tab.is-active {
  color: #2B2927;
  border-bottom-color: #2B2927;
}
/* ul.products sets display:grid, which outranks the UA sheet's [hidden]
   rule — without this the inactive panel would stay on screen. */
.product-suggest ul.products[hidden] {
  display: none;
}
.related-products ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
@media (max-width: 767px) {
  /* Swipeable carousel on mobile (scroll-snap, no JS). */
  .related-products ul.products {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 4px;
    scrollbar-width: none;
  }
  .related-products ul.products::-webkit-scrollbar {
    display: none;
  }
  /* "Možda će Vam se dopasti" reads as a list, not a swipe rail: undo the
     carousel the shared .related-products shell applies here and lay the
     products out two per row. Scoped to .product-suggest so the cart
     cross-sells keep swiping. 2px gap matches the category archive grid. */
  .product-suggest ul.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    overflow-x: visible;
    padding: 0;
  }
  .product-suggest ul.products li.product {
    flex: none;
    width: auto;
  }
  .related-products ul.products li.product {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
}
.related-products ul.products li.product {
  margin: 0;
}

/* Mobile purchase area: the swatches + stepper row is shared with desktop now
   (see the base rules above); only the button height differs here. */
@media (max-width: 767px) {
  .single-product .mokka-swatch {
    min-width: 40px;
    min-height: 40px;
  }
  .single-product .quantity {
    height: 40px;
  }
  .single-product .quantity .qty-btn {
    width: 22px;
  }
  .single-product .single_add_to_cart_button {
    height: 38px;
  }
  .single-product form.cart:not(.variations_form) {
    flex-wrap: nowrap;
  }

  /* Short description moves below the add-to-cart row (18px under it).
     Flex order, not a PHP hook re-priority: server-side mobile detection
     would serve the wrong markup as soon as page caching is on.
     Everything else keeps order 0, so it stays in source order. */
  .single-product .summary.entry-summary {
    display: flex;
    flex-direction: column;
  }
  .single-product .summary .woocommerce-product-details__short-description {
    order: 1;
    margin: 18px 0 0;
  }
  .single-product .summary .product-accordion {
    order: 2;
  }
}

/* Mobile + tablet */
@media (max-width: 1023px) {
  /* Full-bleed is desktop-only (see the min-width:1024px block above); margin
     and border are gone from the base rule now, so only the spacing differs. */
  .related-products {
    padding-top: 40px;
  }
}