/* ==========================================================================
   KATHÉRA brend sloj nad Woodmartom
   Učitava se POSLE woodmart stilova. Nikad !important osim gde je Woodmart
   inline-uje kroz theme settings (obeleženo komentarom).
   ========================================================================== */

/* --- 1. Tipografija --------------------------------------------------------- */

body,
.woodmart-woocommerce-layered-nav,
.widget {
  font-family: var(--kth-font-body);
  color: var(--kth-ink);
  background: var(--kth-bg);
}

h1, .entry-title,
h2, h3, h4, h5, h6,
.title,
.wd-entities-title {
  font-family: var(--kth-font-heading);
  font-weight: 400;
  letter-spacing: 0;
}

/* hero i statement naslovi: Lora, lagano */
.kth-display,
.elementor-widget-heading .kth-display .elementor-heading-title {
  font-family: var(--kth-font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.kth-eyebrow {
  font-family: var(--kth-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--kth-tracking-widest);
  text-transform: uppercase;
  color: var(--kth-ink-subtle);
}

/* --- 2. Dugmad — pilule, sentence case ------------------------------------- */

.btn, .button,
button, input[type="submit"],
.single_add_to_cart_button,
.wd-buy-now-btn,
.checkout-button {
  font-family: var(--kth-font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;                 /* Woodmart podrazumevano stavlja caps */
  border-radius: var(--kth-radius-control);
  transition: background var(--kth-duration-base) var(--kth-ease),
              color var(--kth-duration-base) var(--kth-ease);
}

.btn-color-primary,
.single_add_to_cart_button,
.checkout-button {
  background: var(--kth-color-forest);
  color: var(--kth-color-offwhite);
  border: none;
}

.btn-color-primary:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  background: var(--kth-color-forest-80);
  color: var(--kth-color-offwhite);
}

.btn-style-bordered,
.btn-color-default {
  background: transparent;
  color: var(--kth-ink);
  border: 1px solid var(--kth-border-strong);
}

/* --- 3. Površine — 10px, senka jedva da postoji ---------------------------- */

.wd-product,
.card,
.wd-single-product .images,
.woocommerce-checkout-review-order,
.cart-totals-inner {
  border-radius: var(--kth-radius-surface);
  box-shadow: none;
  border: 1px solid var(--kth-border);
}

.wd-product:hover { box-shadow: var(--kth-shadow-sm); }

/* --- 4. Meni: jedna linija, bez duplih ------------------------------------- */

.wd-nav > li > a { position: relative; }
.wd-nav > li > a::after,
.wd-nav > li > a::before { display: none; }      /* Woodmart underline off */

.wd-nav > li > a > span::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--kth-duration-base) var(--kth-ease);
}

.wd-nav > li:hover > a > span::after,
.wd-nav > li.current-menu-item > a > span::after { transform: scaleX(1); }

/* --- 5. Transparentan heder nad herojem ------------------------------------ */

.kth-hero-header .whb-main-header,
.kth-hero-header .whb-row {
  background: transparent !important;    /* Woodmart inline-uje boju reda */
  border: none !important;
  backdrop-filter: none !important;
}

.kth-hero-header .whb-general-header { padding-top: 30px; }

.kth-hero-header .wd-nav > li > a,
.kth-hero-header .wd-tools-element > a,
.kth-hero-header .wd-logo svg,
.kth-hero-header .wd-logo path { color: var(--kth-color-offwhite); fill: currentColor; }

/* --- 6. Sticky kompaktni heder --------------------------------------------- */

.whb-sticked .whb-main-header {
  background: rgba(250, 250, 250, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kth-border);
  box-shadow: var(--kth-shadow-sm);
}

.whb-sticked .wd-logo img,
.whb-sticked .wd-logo svg { max-height: 24px; }

/* --- 7. Sticky kupovna traka (PDP) ---------------------------------------- */

.kth-buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 380;                          /* ispod Woodmart side carta (390) */
  display: flex;
  align-items: center;
  gap: var(--kth-space-8);
  padding: var(--kth-space-4) var(--kth-space-8);
  background: rgba(250, 250, 250, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--kth-border);
  box-shadow: 0 -8px 28px rgba(36, 39, 42, 0.10);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.42s var(--kth-ease), opacity 0.32s var(--kth-ease);
}

.kth-buybar.is-on { transform: none; opacity: 1; pointer-events: auto; }

.kth-buybar__thumb {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: var(--kth-radius-md);
  object-fit: cover;
}

.kth-buybar__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kth-buybar__title { font-weight: 600; white-space: nowrap; }
.kth-buybar__note { font-size: 12px; color: var(--kth-ink-subtle); white-space: nowrap; }
.kth-buybar__flag {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--kth-color-forest);
  color: var(--kth-color-offwhite);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.kth-buybar__cta { margin-left: auto; display: flex; align-items: center; gap: var(--kth-space-6); }

@media (max-width: 767px) {
  .kth-buybar { gap: var(--kth-space-4); padding: var(--kth-space-4) var(--kth-space-5); }
  .kth-buybar__thumb, .kth-buybar__flag { display: none; }
  .kth-buybar__cta { flex: 1; }
  .kth-buybar__cta .button { width: 100%; }
}

/* --- 8. Kartice plana (jednokratno / pretplata / 3 meseca) ----------------- */

.kth-plans { display: flex; flex-direction: column; gap: var(--kth-space-4); }

.kth-plan {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: var(--kth-space-5);
  align-items: start;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: var(--kth-space-6);
  border: 1px solid var(--kth-border);
  border-radius: var(--kth-radius-surface);
  background: transparent;
  transition: background var(--kth-duration-base) var(--kth-ease),
              border-color var(--kth-duration-base) var(--kth-ease),
              box-shadow var(--kth-duration-base) var(--kth-ease);
}

.kth-plan.is-featured { background: var(--kth-color-sand-20); padding-top: var(--kth-space-8); }

.kth-plan.is-selected {
  background: var(--kth-bg-sand);
  border: 2px solid var(--kth-color-forest);
  box-shadow: var(--kth-shadow-sm);
}
.kth-plan.is-featured.is-selected { box-shadow: var(--kth-shadow-md); }

.kth-plan__dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--kth-border-strong);
  margin-top: 2px;
}
.kth-plan.is-selected .kth-plan__dot {
  border-color: var(--kth-color-forest);
  box-shadow: inset 0 0 0 4px var(--kth-bg), inset 0 0 0 20px var(--kth-color-forest);
}

.kth-plan__flag {
  position: absolute;
  top: -11px; left: var(--kth-space-6);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--kth-color-anthracite);
  color: var(--kth-color-offwhite);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.kth-plan.is-selected .kth-plan__flag { background: var(--kth-color-forest); }

.kth-plan__save {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--kth-color-forest);
  color: var(--kth-color-offwhite);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em;
}

.kth-plan__price {
  font-family: var(--kth-font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
}
.kth-plan.is-featured .kth-plan__price { font-size: 38px; }

.kth-plan__perks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.kth-plan__perk {
  padding: 3px 9px;
  border: 1px solid var(--kth-border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--kth-ink-muted);
}

/* --- 9. Galerija proizvoda: nikad previsoka -------------------------------- */

.wd-single-product .images .woocommerce-product-gallery__image img {
  aspect-ratio: 1 / 1.25;
  object-fit: cover;
}
.wd-single-product .summary { align-self: start; }

/* --- 10. Ritual Grid: tekstura, ne sadržaj --------------------------------- */

.kth-ritual { position: relative; isolation: isolate; }
.kth-ritual::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background-image: url('../img/tekstura-reljef.png');
  background-size: 320px;
  opacity: 0.26;                          /* brand guideline: pod 0.28 */
  pointer-events: none;
}
.kth-ritual > * { position: relative; z-index: 1; }

/* --- 11. Tonovi ------------------------------------------------------------ */

[data-kth-tone="forest"] {
  --kth-bg: var(--kth-color-forest);
  --kth-ink: var(--kth-color-offwhite);
  --kth-ink-muted: rgba(250, 250, 250, 0.78);
  --kth-ink-subtle: rgba(250, 250, 250, 0.58);
  --kth-border: rgba(250, 250, 250, 0.20);
  background: var(--kth-color-forest);
  color: var(--kth-color-offwhite);
}

[data-kth-tone="anthracite"] {
  --kth-bg: var(--kth-color-anthracite);
  --kth-ink: var(--kth-color-offwhite);
  --kth-ink-muted: rgba(250, 250, 250, 0.78);
  --kth-ink-subtle: rgba(250, 250, 250, 0.58);
  --kth-border: rgba(250, 250, 250, 0.20);
  background: var(--kth-color-anthracite);
  color: var(--kth-color-offwhite);
}

[data-kth-tone="sand"] { background: var(--kth-color-sand-20); }

/* --- 12. Reveal animacije — bezbedne za konverziju ------------------------- */

.kth-reveal { opacity: 0; transform: translateY(18px); }
.kth-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--kth-ease), transform 0.7s var(--kth-ease);
}

@media (prefers-reduced-motion: reduce) {
  .kth-reveal, .kth-reveal.is-in { opacity: 1; transform: none; transition: none; }
  .kth-buybar { transition: none; }
}

/* --- 13. Checkout: dve kolone, simetričan žleb ----------------------------- */

@media (min-width: 992px) {
  .woocommerce-checkout .wd-checkout-steps { display: none; }
  form.checkout { display: grid; grid-template-columns: 1fr 0.8fr; gap: 0; align-items: start; }
  form.checkout #customer_details { padding: 48px 64px 80px 0; }
  form.checkout .wd-checkout-order-review,
  form.checkout #order_review_heading,
  form.checkout #order_review {
    grid-column: 2;
    background: var(--kth-color-sand-20);
    padding-inline: 64px;
  }
  form.checkout #order_review_heading { padding-top: 48px; }
  form.checkout #order_review { padding-bottom: 80px; position: sticky; top: 40px; }
}