/* Styles for product modal modern additions (badge, header alignment) */
/* Badge: align visually with other header buttons (40x40) and show stroke-only icon matching share button */
.pm-edit-badge{ display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:0; background:var(--sage-green,#8A9A5B); color:#fff; font-weight:700; font-size:13px; padding:0 10px; height:40px; border-radius:999px; box-shadow:0 6px 18px rgba(138,154,91,0.12); vertical-align:middle }
/* Match share button icon size (w-5 h-5 -> 20px) and stroke properties */
.pm-edit-badge svg{ width:20px; height:20px; flex:0 0 20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect: non-scaling-stroke; }
.pm-edit-badge .pm-edit-text{ line-height:1 }
.pm-edit-badge .pm-edit-mobile-text{ display:none; line-height:1 }
@media(max-width:460px){
  .pm-edit-badge{ font-size:12px; padding:0 8px; height:40px }
  /* On mobile show icon-only: hide both full and mobile texts */
  .pm-edit-badge .pm-edit-text{ display:none !important }
  .pm-edit-badge .pm-edit-mobile-text{ display:none !important }
  /* keep icon slightly larger for tap target but consistent stroke */
  .pm-edit-badge svg{ width:22px; height:22px; flex:0 0 22px; stroke-width:2 }
}
/* Modern product detail modal styling enhancements */

/*
  FIX: Ensure the product modal has a stable max-height on mobile devices
  to prevent it from retaining incorrect dimensions after exiting image zoom/fullscreen.
  Using 'dvh' (dynamic viewport height) is best for mobile.
*/
#product-detail-modal {
  --product-modal-header-height: 72px;
}

#product-detail-modal .modal-content {
  /* Respect bottom bar + safe area so content is not covered */
  max-height: calc(100dvh - var(--bottom-bar-height, 80px) - env(safe-area-inset-bottom, 0px) - 12px);
}

#product-modal-body {
  scroll-padding-top: calc(var(--product-modal-header-height, 72px) + 16px);
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}

.pm-top-flex {
  scroll-margin-top: calc(var(--product-modal-header-height, 72px) + 16px);
}

.nutrition-table {
  width: min(100%, 360px);
  margin-inline: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.nutrition-table tr {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) auto minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: 0.5rem;
  row-gap: 0.25rem;
  align-items: center;
}

.nutrition-table td {
  padding: 0.35rem 0.3rem;
  vertical-align: middle;
}

.nutrition-table td.label {
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
}

.nutrition-table td.value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  justify-self: end;
}

.nutrition-table td.separator {
  text-align: center;
  opacity: 0.6;
  padding-inline: 0.25rem;
}

@media (max-width: 520px) {
  .nutrition-table {
    width: min(100%, 320px);
  }
  .nutrition-table tr {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) auto minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: 0.35rem;
  }
  .nutrition-table td {
    padding: 0.3rem 0.25rem;
  }
}

.product-modal-header {
  backdrop-filter: saturate(1.8) blur(12px);
  background: linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0.75));
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.product-modal-header h3 {
  letter-spacing: .2px;
}
.product-modal-image-wrapper {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 24px -6px rgba(0,0,0,.12);
}
.product-modal-image-wrapper img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
/* Убрана анимация hover для предотвращения подергивания */

.badge-floating {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  color: var(--terracotta);
  padding: .25rem .55rem;
  font-size: .65rem;
  font-weight: 600;
  border-radius: .65rem;
  display: flex;
  align-items: center;
  gap: .25rem;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.15);
}

.mode-select-btn { font-weight: 600; }
.mode-select-btn.active { position: relative; }
.mode-select-btn.active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,var(--terracotta),#ff9b62);
}

/* Segmented control redesign */
.segmented-mode-selector {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  background: linear-gradient(135deg,#f5f5f5,#ececec);
  border:1px solid #e1e1e1;
  border-radius: 14px;
  padding:4px;
  height:56px;
  overflow:hidden;
  font-size:.8rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06), 0 2px 6px -3px rgba(0,0,0,.12);
}
.segmented-mode-selector .mode-slider {
  position:absolute; top:4px; left:4px; width:calc(50% - 4px); height:calc(100% - 8px);
  border-radius:10px;
  background:linear-gradient(145deg,#fff,#f8f8f8);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.12);
  transition: transform .35s cubic-bezier(.22,.68,.37,1), background .4s;
  will-change: transform;
}
.segmented-mode-selector .mode-select-btn {
  position:relative;
  background: none;
  border:none;
  border-radius:10px;
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
  gap:.45rem;
  color:#5a5a5a;
  transition: color .25s, letter-spacing .25s;
  -webkit-tap-highlight-color: transparent;
}
.segmented-mode-selector .mode-select-btn.active { color:#1f1f1f; letter-spacing:.15px; font-weight:700; text-shadow: 0 0 1px rgba(0,0,0,.08); }
.segmented-mode-selector .mode-select-btn:not(.active) { opacity:.75; }
/* Убрана анимация hover для предотвращения подергивания */
.segmented-mode-selector .mode-slider { z-index:0; }
.segmented-mode-selector .mode-select-btn { z-index:1; }
.segmented-mode-selector .mode-select-btn span { letter-spacing:.15px; }
.segmented-mode-selector .mode-select-btn:focus-visible { outline:2px solid var(--terracotta); outline-offset:2px; }


.weight-preset-btn.nearest { position: relative; }
.weight-preset-btn.nearest::after {
  content: '≈';
  position: absolute;
  top: -6px; right: -6px;
  background: var(--emerald-600, #059669);
  color: #fff;
  width: 18px; height: 18px;
  font-size: .6rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.25);
}

.product-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: .5rem .75rem;
  justify-items: center;
}
.product-meta-item {
  font-size: .65rem;
  line-height: 1rem;
  color: #555;
  width: min(100%, 360px);
}
.product-meta-item.flex {
  justify-content: center;
}
.product-meta-item span { display:block; font-size: .6rem; text-transform: uppercase; letter-spacing: .5px; color: #888; margin-bottom: 2px; }

#approx-piece-price-line, #approx-conversion-line { font-variant-numeric: tabular-nums; }

/* Approx info card */
.approx-info-card {
  background: linear-gradient(135deg,#f8faf9,#f2f7f4);
  border:1px solid #e2efe7;
  border-radius:.75rem;
  padding:.55rem .65rem .45rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  font-size:.68rem;
  line-height:1.1;
  color:#2f4c3b;
  position:relative;
  box-shadow:0 1px 3px -1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
}
.approx-info-card:before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(120deg,rgba(255,153,89,.08),rgba(255,255,255,0)); opacity:.6; }
.approx-info-card .approx-row { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; }
.approx-info-card .ai-icon { width:18px; height:18px; display:flex; align-items:center; justify-content:center; color:#3d6e53; background:#e3f3eb; border-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,.08) inset; }
.approx-info-card .ai-icon--price { font-size:.65rem; font-weight:700; letter-spacing:.5px; }
.approx-info-card .ai-icon--weight svg { width:14px; height:14px; }
.approx-info-card .ai-label { font-weight:600; letter-spacing:.25px; }
.approx-info-card .ai-value { font-weight:600; color:#14532d; }
.approx-info-card .ai-sep { opacity:.5; }
.approx-info-card .ai-sub { color:#4d6b59; font-weight:500; }
.approx-info-card .ai-info { position:relative; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; cursor:pointer; color:#395e49; background:#dcefe6; border-radius:6px; outline:none; }
.approx-info-card .ai-info:focus-visible { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--terracotta); }
.approx-info-card .ai-info:hover .ai-tooltip, .approx-info-card .ai-info:focus .ai-tooltip { 
  /* Убрана анимация hover для предотвращения подергивания */
  opacity:1; 
  pointer-events:auto; 
}
.approx-info-card .ai-tooltip { position:absolute; left:50%; bottom:110%; transform:translate(-50%,0) scale(.96); background:#1c1f1d; color:#f1f5f3; padding:.55rem .6rem .5rem; border-radius:.65rem; font-size:.6rem; width:200px; line-height:1.2; box-shadow:0 4px 16px -4px rgba(0,0,0,.35); opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; z-index:20; }
.approx-info-card .ai-tooltip:after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:10px; height:8px; background:inherit; clip-path:polygon(50% 100%,0 0,100% 0); }
.approx-info-card.hidden { display:none; }

.product-recommendations { background: linear-gradient(180deg,#fff,#fafafa); border: 1px solid #eee; border-radius: 1rem; padding: 1.25rem 1rem 1rem; }
.product-recommendations h5 { margin-top:0; }
.product-recommendations .related-product-card { background: #fff; border:1px solid #f1f1f1; border-radius:.75rem; padding:.35rem; transition: box-shadow .25s, transform .25s; }
/* Убрана анимация hover для предотвращения подергивания */

.bottom-action-modern { box-shadow: 0 -4px 18px -6px rgba(0,0,0,.12); }

/* Quantity buttons refinement */
.btn-quantity { width: 40px; height: 40px; font-size: 1.1rem; font-weight: 600; }
#modal-quantity-display { width: 60px !important; }

/* Add to cart button gradient */
#modal-add-to-cart-button {
  background: linear-gradient(90deg,var(--terracotta),#ff8a42);
  border: none;
  box-shadow: 0 4px 16px -4px rgba(255,120,50,.4);
  /* Убрана анимация hover для предотвращения подергивания */
}

/* Scrollbar subtle inside modal body */
#product-modal-body::-webkit-scrollbar { width: 6px; }
#product-modal-body::-webkit-scrollbar-track { background: transparent; }
#product-modal-body::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; }
/* Убрана анимация hover для предотвращения подергивания */

/* Pills */
.pill {
  background: linear-gradient(135deg,#f6f6f6,#ececec);
  color:#444;
  font-size:.6rem;
  font-weight:600;
  padding:4px 8px;
  border-radius:999px;
  line-height:1;
  letter-spacing:.25px;
  border:1px solid #e2e2e2;
}
.pill.secondary { background: #f3faf5; color:#2f6647; border-color:#d4ebdd; }
.pill[data-kind=country] { background: linear-gradient(135deg,#f0f7ff,#e4eef9); color:#234c66; border-color:#c7dcea; }
.pill[data-kind=country] .pill-flag { font-size:.75rem; line-height:1; }
.pill[data-kind=tag] { font-weight:500; letter-spacing:.2px; }
  .pill-kind-country { display:inline-flex; align-items:center; gap:4px; }

  /* Promo tags overlay on image */
  .image-promo-tags {
    position:absolute;
    right:.55rem;
    bottom:.55rem;
    display:flex;
    flex-direction:column-reverse; /* чтобы первый (Новинка) был внизу */
    gap:.4rem;
    align-items:flex-end;
    pointer-events:none;
  }
  .image-promo-tags .ipt {
    pointer-events:auto;
    background:rgba(30,30,30,.72);
    color:#fff;
    font-size:.55rem;
    font-weight:600;
    padding:4px 7px 3px;
    border-radius:.55rem;
    letter-spacing:.4px;
    line-height:1;
    backdrop-filter:blur(4px) saturate(1.4);
    box-shadow:0 2px 6px -2px rgba(0,0,0,.35);
    display:inline-flex;
    align-items:center;
    gap:4px;
    text-transform:uppercase;
  }
  .image-promo-tags .ipt-new { background:linear-gradient(135deg,#2563eb,#3b82f6); }
  .image-promo-tags .ipt-sale { background:linear-gradient(135deg,#dc2626,#f87171); }
  .image-promo-tags .ipt-hit { background:linear-gradient(135deg,#d97706,#f59e0b); }
  .image-promo-tags .ipt:not(.ipt-sale):not(.ipt-hit):not(.ipt-new) { background:linear-gradient(135deg,#374151,#4b5563); }
  .image-promo-tags .ipt-sale { position:relative; }
  .image-promo-tags .ipt-sale:after { content:'%'; font-size:.5rem; font-weight:700; opacity:.9; }
  /* Stair layout offsets */
  /* Flush right alignment (removed stair offsets) */
  .image-promo-tags .ipt { transform:none; }
.pill-kind-country, .pill-kind-variety { display:inline-flex; align-items:center; gap:4px; }

/* Section cards */
.pm-section-card {
  background:#fff;
  border:1px solid #ececec;
  border-radius:1rem;
  padding: .9rem 1rem 1rem;
  margin-bottom:1rem;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.06);
  position:relative;
}
.pm-section-card:before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,0),rgba(255,153,89,0.05)); opacity:.6; }
.pm-section-title { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:#666; margin:0 0 .5rem; }
.pm-purchase-card { backdrop-filter: blur(4px); }

/* Animations */
@keyframes pmFadeInUp { from {opacity:0; transform:translateY(8px);} to {opacity:1; transform:translateY(0);} }
.pm-content { animation: pmFadeInUp .35s ease; }

/* Responsive top flex layout */
.pm-top-flex { flex-wrap:wrap; }
@media (max-width: 560px) {
  .pm-top-flex { flex-wrap:nowrap; align-items:flex-start; }
  .pm-top-flex .pm-img-col { width:auto; max-width:none; flex:0 0 42%; }
  .pm-top-flex .pm-img-col .product-modal-image-wrapper { aspect-ratio:1/1; height:auto; }
  .pm-top-flex .pm-img-col img { height:100% !important; aspect-ratio:1/1; object-fit:cover; }
  .pm-top-flex .pm-info-col { gap:.5rem; }
  .pm-top-flex .pm-info-col .modal-product-name { font-size:1rem; }
  .pm-top-flex .pm-info-col .product-variety-inline { font-size:.7rem !important; }
  .pm-top-flex .pm-info-col .product-country-inline { font-size:.65rem !important; }
  .pm-top-flex .segmented-mode-selector { height:48px; font-size:.7rem; }
  .pm-top-flex #weight-presets-wrapper { margin-bottom:.5rem; }
  .pm-top-flex .approx-info-card { font-size:.6rem; padding:.45rem .5rem .4rem; }
  .pm-top-flex .img-bottom-row { flex-direction:column; align-items:flex-start; gap:.4rem; }
  .pm-top-flex .img-bottom-row #product-modal-inline-arrows { width:100%; justify-content:flex-end; }

  /* Hide base unit label on small screens to avoid layout overflow */
  .modal-price-block #modal-base-unit { display: none !important; }
}

/* Ensure meta grid collapses to single column on small screens to avoid table/content compression */
@media (max-width: 560px) {
  .product-meta-grid {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .product-meta-item {
    text-align: left;
    width: 100%;
  }
  .product-meta-item .nutrition-table { width: 100%; }

/* Ensure nutrition values don't wrap (protect against parent CSS overrides) */
.nutrition-table td.value {
  white-space: nowrap;
}
}

.img-bottom-row { min-height:40px; }
.img-bottom-row #product-modal-inline-arrows button { width:36px; height:36px; }

@media (max-width:560px) {
  /* Mobile: stack price then arrows centered under image width */
  .pm-img-col .img-bottom-row { flex-direction:column; align-items:center; justify-content:center; gap:4px; }
  .pm-img-col .img-bottom-row .modal-price-block { order:1; }
  .pm-img-col .img-bottom-row #product-modal-inline-arrows { order:2; width:100%; justify-content:center; }
}


/* Unify price & unit font size */
.modal-price-block .modal-product-price,
.modal-price-block #modal-base-unit {
  font-size:1.25rem !important; /* match text-xl */
  line-height:1.25rem !important;
}

/* Variety line: let label color come from utility classes (e.g. text-gray-600).
  Apply accent color only to the value span without using !important so it
  doesn't override utility classes applied to the label. */
.product-variety-inline { }
.product-variety-inline span { color: var(--sage-green); }

/* quantity-panel host overrides (light integration) */
quantity-panel { width:100%; }
quantity-panel .panel { border-top-left-radius:8px; border-top-right-radius:8px; }

/* Image zoom overlay */
#product-image-zoom-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:1rem;
}
#product-image-zoom-overlay.open { display:flex; animation:fadeIn .18s ease; }
#product-image-zoom-overlay .zoom-img-wrapper { position:relative; max-width:92vw; max-height:92vh; }
#product-image-zoom-overlay .zoom-img-wrapper img { width:100%; height:100%; object-fit:contain; border-radius:14px; box-shadow:0 4px 28px -4px rgba(0,0,0,.6); }
#product-image-zoom-overlay .zoom-img-wrapper .image-promo-tags { position:absolute; bottom:8px; right:8px; display:flex; flex-direction:column-reverse; gap:4px; }
body.no-scroll-modal-img { overflow:hidden; }
#product-image-zoom-overlay button.zoom-close-btn {
  position:absolute; top:10px; right:10px; background:rgba(255,255,255,0.15); backdrop-filter:blur(4px);
  color:#fff; border:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
/* Убрана анимация hover для предотвращения подергивания */
@media (min-width: 561px) {
  /* На десктопе можно также позволить зум по клику, оставляем общие стили */
}