/*
 Theme Name:   XStore Child
 Theme URI:    http://8theme.com/
 Description:  XStore Child Theme
 Author:       8theme
 Author URI:   http://8theme.com
 Template:     xstore
 Version:      1.2.0
 Text Domain:  xstore-child
*//* ============================================
   E-MAGAZIN STILOVI — apotekaweb.com
   Figma pixel-perfect v1.0.0
   ============================================ */

/* --- BRANDED "e" in heading --- */
.page-id-208339 h1 .emagazin-brand-e, .single-post.category-e-magazin h1 .emagazin-brand-e {
  position: relative;
  display: inline-block;
  color: #e05a4f !important;
  font-style: italic;
  font-weight: 800;
}
.emagazin-brand-e::before { display: none; }

/* --- LISTING PAGE: Post card styles (scoped to e-magazin page) --- */
.page-id-208339 .elementor-widget-posts .elementor-post {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
}
.page-id-208339 .elementor-widget-posts .elementor-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.page-id-208339 .elementor-widget-posts .elementor-post__thumbnail img {
  transition: transform 0.3s ease;
  border-radius: 12px;
}
.page-id-208339 .elementor-widget-posts .elementor-post:hover .elementor-post__thumbnail img {
  transform: scale(1.03);
}
.page-id-208339 .elementor-widget-posts .elementor-post__title a {
  text-decoration: none;
  color: #222;
  transition: color 0.2s ease;
}
.page-id-208339 .elementor-widget-posts .elementor-post__title a:hover {
  color: #e05a4f !important;
}
.page-id-208339 .elementor-widget-posts .elementor-post__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "PROČITAJTE VIŠE" button */
.page-id-208339 .elementor-widget-posts .elementor-post__read-more {
  display: inline-block;
  border: 2px solid #333;
  background: transparent;
  color: #333;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 14px;
}
.page-id-208339 .elementor-widget-posts .elementor-post__read-more:hover {
  background: #333;
  color: #fff;
}

/* --- SINGLE POST: E-magazin category --- */
.single-post.category-e-magazin .entry-title,
.single-post.category-e-magazin .post-heading h2 {
  color: #00ae93 !important;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}
.single-post.category-e-magazin .content-article h2 {
  color: #333;
  margin-top: 32px;
  margin-bottom: 16px;
  text-transform: none !important;
}
.single-post.category-e-magazin .content-article h3 {
  text-transform: none !important;
}
.single-post.category-e-magazin .content-article p {
  line-height: 1.75;
  color: #444;
}
.single-post.category-e-magazin .wp-post-image {
  border-radius: 12px;
}

/* --- PROIZVOD PREPORUKA kartica --- */
.emagazin-proizvod-preporuka {
  float: right;
  clear: right;
  width: 200px;
  margin: 0 0 16px 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #eee;
  text-align: center;
}
.emagazin-proizvod-preporuka img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin: 0 auto 12px;
  display: block;
}
.emagazin-proizvod-preporuka h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: #333;
  line-height: 1.3;
  text-transform: none !important;
}
.emagazin-proizvod-preporuka .cijena {
  font-size: 16px;
  font-weight: 700;
  color: #e05a4f !important;
  margin-bottom: 10px;
}
.emagazin-proizvod-preporuka .btn-dodaj-u-korpu {
  display: inline-block;
  padding: 8px 16px;
  background: #00ae93;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s ease;
}
.emagazin-proizvod-preporuka .btn-dodaj-u-korpu:hover {
  background: #008a75;
}

/* Clearfix for floated product card */
.single-post.category-e-magazin .content-article::after {
  content: "";
  display: table;
  clear: both;
}

/* --- NAJČITANIJE SIDEBAR (shortcode) --- */
.emagazin-najcitanije-sidebar {
  margin-top: 20px;
}
.najcitanije-heading {
  font-size: 28px !important;
  font-weight: 700;
  color: #222 !important;
  margin-bottom: 20px !important;
  text-transform: none !important;
}
.najcitanije-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0 12px;
  align-items: start;
  text-decoration: none !important;
  margin-bottom: 15px;
  transition: transform 0.2s ease;
}
.najcitanije-item:hover {
  transform: translateX(4px);
}
.najcitanije-img img {
  width: 120px !important;
  height: 100px !important;
  object-fit: cover;
  border-radius: 12px !important;
}
.najcitanije-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.najcitanije-date {
  font-size: 13px;
  color: #666;
}
.najcitanije-title {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.najcitanije-author {
  font-size: 13px;
  color: #888;
}

/* --- PITAJ FARMACEUTA overlay card --- */
.pitaj-farmaceuta-card {
  position: relative;
  display: block;
  text-decoration: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
}
.pitaj-farmaceuta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* --- PITAJ FARMACEUTA FORM page --- */
.pitaj-farmaceuta-form .wpcf7-form {
  max-width: 800px;
  background: #f5f5f5;
  border-radius: 12px;
  padding: 32px 28px;
}
.pitaj-farmaceuta-form .wpcf7-form input[type="text"],
.pitaj-farmaceuta-form .wpcf7-form input[type="email"],
.pitaj-farmaceuta-form .wpcf7-form textarea {
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: border-color 0.2s ease;
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
}
.pitaj-farmaceuta-form .wpcf7-form input:focus,
.pitaj-farmaceuta-form .wpcf7-form textarea:focus {
  border-color: #e05a4f !important;
  outline: none;
}
.pitaj-farmaceuta-form .wpcf7-form input[type="submit"] {
  background: transparent;
  border: 2px solid #333;
  color: #333;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pitaj-farmaceuta-form .wpcf7-form input[type="submit"]:hover {
  background: #333;
  color: #fff;
}

/* --- Q&A PAGE --- */
.qa-item h3 {
  text-transform: none !important;
}


/* --- PITAJ FARMACEUTA card in najcitanije shortcode --- */
.pf-card-shortcode {
  margin-top: 30px;
}
.pf-card-image {  display: none;}
.pf-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
}
.pf-card-label {
  font-size: 13px;
  opacity: 0.9;
  display: block;
  margin-bottom: 4px;
}
.pf-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .emagazin-proizvod-preporuka {
    float: none;
    width: 100%;
    margin: 16px 0;
  }
  .emagazin-proizvod-preporuka img {
    width: 120px;
    height: 130px;
  }
  .najcitanije-item {
    grid-template-columns: 100px 1fr;
  }
  .najcitanije-img img {
    width: 100px !important;
    height: 85px !important;
  }
}

@media (max-width: 640px) {
  .single-post.category-e-magazin .entry-title,
  .single-post.category-e-magazin .post-heading h2 {
    font-size: 24px;
    line-height: 1.3;
  }
  .single-post.category-e-magazin .content-article h2 {
    font-size: 20px;
  }
  .pitaj-farmaceuta-card div:last-child span:last-child {
    font-size: 16px !important;
  }
}

/* ============================================
   FIGMA MATCHING FIXES v1.2.0
   ============================================ */

/* --- FIX: Remove terrible image hover zoom, add subtle Figma-style hover --- */
.elementor-widget-posts .elementor-post__thumbnail img {
  transition: transform 0.4s ease !important;
  transform: scale(1) !important;
}
.elementor-widget-posts .elementor-post:hover .elementor-post__thumbnail img {
  transform: scale(1.03) !important;
}
.elementor-widget-posts .elementor-post__thumbnail {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* --- FIX: Card-level hover lift (Figma) --- */
.page-id-208339 .elementor-widget-posts .elementor-post {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.page-id-208339 .elementor-widget-posts .elementor-post:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* --- FIX: "Read More »" → "PROČITAJTE VIŠE >" outlined button (Figma) --- */
.page-id-208339 .elementor-widget-posts .elementor-post__read-more {
  font-size: 0 !important; /* hide original text */
  display: inline-block !important;
  border: 2px solid #333 !important;
  background: transparent !important;
  color: #333 !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  margin-top: 12px !important;
}
.page-id-208339 .elementor-widget-posts .elementor-post__read-more::after {
  content: "PROČITAJTE VIŠE  >" !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
}
.page-id-208339 .elementor-widget-posts .elementor-post__read-more:hover {
  background: #333 !important;
  color: #fff !important;
}

/* --- FIX: Hide "/// Nema komentara" in meta, show only date --- */
.page-id-208339 .elementor-post__meta-data .elementor-post-avatar,
.page-id-208339 .elementor-post__meta-data span + span::before {
  display: none !important;
}
.page-id-208339 .elementor-post__meta-data {
  font-size: 14px !important;
  color: #888 !important;
}

/* --- FIX: Post title styling (Figma: 22px bold, dark, no transform) --- */
.page-id-208339 .elementor-post__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
  text-transform: none !important;
}
.page-id-208339 .elementor-post__title a {
  color: #222 !important;
  text-decoration: none !important;
}
.page-id-208339 .elementor-post__title a:hover {
  color: #00ae93 !important;
}

/* --- FIX: Excerpt styling --- */
.page-id-208339 .elementor-post__excerpt p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #666 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* --- FIX: SIDEBAR — compact card layout (Figma: thumbnail left, text right) --- */
/* Target only the sidebar column's Posts widget */
.elementor-208339 .elementor-element[data-element_type="column"]:last-child .elementor-widget-posts .elementor-post {
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
.elementor-208339 .elementor-element[data-element_type="column"]:last-child .elementor-widget-posts .elementor-post:hover {
  transform: translateX(4px) !important;
  box-shadow: none !important;
}
/* Hide excerpts and read-more in sidebar */
.elementor-208339 .elementor-element[data-element_type="column"]:last-child .elementor-post__excerpt,
.elementor-208339 .elementor-element[data-element_type="column"]:last-child .elementor-post__read-more {
  display: none !important;
}
/* Smaller titles in sidebar */
.elementor-208339 .elementor-element[data-element_type="column"]:last-child .elementor-post__title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* Sidebar thumbnail border-radius */
.elementor-208339 .elementor-element[data-element_type="column"]:last-child .elementor-post__thumbnail {
  border-radius: 12px !important;
}
.elementor-208339 .elementor-element[data-element_type="column"]:last-child .elementor-post__thumbnail img {
  border-radius: 12px !important;
}

/* --- FIX: Single post image hover — disable XStore's ugly zoom --- */
.single-post.category-e-magazin .wp-picture img,
.single-post.category-e-magazin .blog-post img,
.single-post.category-e-magazin .post-thumbnail img {
  transition: none !important;
  transform: none !important;
}
.single-post.category-e-magazin .blog-hover-zoom img {
  transform: none !important;
  transition: none !important;
}
.single-post.category-e-magazin .wp-picture.blog-hover-zoom:hover img {
  transform: none !important;
}

/* --- FIX: Single post "Slični postovi" (related posts) hover fix --- */
.single-post.category-e-magazin .related-posts .wp-picture img {
  transition: transform 0.4s ease !important;
  border-radius: 12px !important;
}
.single-post.category-e-magazin .related-posts .wp-picture:hover img {
  transform: scale(1.03) !important;
}

/* --- FIX: Pitaj farmaceuta page sidebar — same compact treatment --- */
.page-id-208340 .elementor-element[data-element_type="column"]:last-child .elementor-post__excerpt,
.page-id-208340 .elementor-element[data-element_type="column"]:last-child .elementor-post__read-more {
  display: none !important;
}
.page-id-208340 .elementor-element[data-element_type="column"]:last-child .elementor-post__title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
.page-id-208340 .elementor-post__meta-data .elementor-post-avatar,
.page-id-208340 .elementor-post__meta-data span + span::before {
  display: none !important;
}

/* ============================================
   E-MAGAZIN SINGLE POST SIDEBAR (Step 3)
   ============================================ */

/* Single post sidebar: Figma spec */
.single-post.category-e-magazin .sidebar {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 24px !important;
}

/* Hide category label on featured image */
.single-post.category-e-magazin .post-categories,
.single-post.category-e-magazin .category-label {
    display: none !important;
}

/* Hide ugly default meta, replace with clean format */
.single-post.category-e-magazin .post-heading .meta-post {
    display: none !important;
}

/* Hide sections not in Figma: about author, comments, share, tags */
.single-post.category-e-magazin .about-author-title,
.single-post.category-e-magazin .author-info,
.single-post.category-e-magazin .share-post,
.single-post.category-e-magazin .single-tags,
.single-post.category-e-magazin .posts-navigation,
.single-post.category-e-magazin .related-posts,
.single-post.category-e-magazin #comments,
.single-post.category-e-magazin #respond {
    display: none !important;
}

/* Clean meta format: "Farmaceut · Mar 6, 2026" */
.emagazin-clean-meta {
    font-size: 14px;
    color: #888;
    margin-bottom: 24px;
}


/* Pagination — larger font, top spacing, styled like Figma */
.page-id-208339 .elementor-pagination {
  margin-top: 32px !important;
  padding-top: 16px !important;
  font-size: 18px !important;
  gap: 8px !important;
}
.page-id-208339 .elementor-pagination .page-numbers {
  font-size: 18px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.page-id-208339 .elementor-pagination .page-numbers.current {
  background: #00ae93 !important;
  color: #fff !important;
  border-radius: 50% !important;
}

/* ==========================================================================
   FiboSearch UX Improvements (2026-03-26)
   ========================================================================== */

/* --- Popular Sections Container --- */
.dgwt-wcas-popular-section {
    padding: 0 16px;
    margin-bottom: 12px;
}

.dgwt-wcas-popular-section:first-child {
    padding-top: 16px;
}

/* --- Section Titles --- */
.dgwt-wcas-popular-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #96b416;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #96b416;
}

.dgwt-wcas-popular-section-title svg {
    stroke: #96b416;
    flex-shrink: 0;
}

/* --- Category Pills --- */
.dgwt-wcas-popular-cats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dgwt-wcas-popular-cat-item {
    display: inline-block !important;
    padding: 10px 18px !important;
    background: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 25px !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.2s ease !important;
}

.dgwt-wcas-popular-cat-item:hover,
.dgwt-wcas-popular-cat-item:focus {
    background: #96b416 !important;
    border-color: #96b416 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(150, 180, 22, 0.3);
}

/* --- Trending Products List --- */
.dgwt-wcas-popular-products-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dgwt-wcas-popular-product-item {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 12px 4px !important;
    text-decoration: none !important;
    color: #333 !important;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s ease;
}

.dgwt-wcas-popular-product-item:last-child {
    border-bottom: none;
}

.dgwt-wcas-popular-product-item:hover {
    background: #f9f9f9;
}

.dgwt-wcas-popular-product-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eee;
    flex-shrink: 0;
}

.dgwt-wcas-popular-product-info {
    flex: 1;
    min-width: 0;
}

.dgwt-wcas-popular-product-name {
    font-size: 14px;
    font-weight: 500;
    color: #222;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dgwt-wcas-popular-product-price {
    font-size: 14px;
    font-weight: 700;
    color: #96b416;
    margin-top: 4px;
}

.dgwt-wcas-popular-product-price del {
    color: #999;
    font-weight: 400;
    font-size: 12px;
}

.dgwt-wcas-popular-product-price ins {
    text-decoration: none;
    color: #96b416;
}

/* --- Force suggestions wrapper visible when popular content injected --- */
.dgwt-wcas-overlay-mobile .dgwt-wcas-suggestions-wrapp:has(.dgwt-wcas-popular-section) {
    display: block !important;
}

/* --- Mobile overlay improvements --- */
.dgwt-wcas-overlay-mobile .dgwt-wcas-suggestions-wrapp {
    padding-top: 0;
}

@media (max-width: 992px) {
    .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar input {
        font-size: 16px !important;
    }
}
/* === E-magazin Pagination === */
.elementor-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px !important;
    padding: 20px 0;
}
.elementor-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none !important;
}
.elementor-pagination .page-numbers:hover {
    background-color: #e8f5f2;
    color: #00ae93;
}
.elementor-pagination .page-numbers.current {
    background-color: #00ae93;
    color: #fff !important;
}
.elementor-pagination .page-numbers.prev,
.elementor-pagination .page-numbers.next {
    width: auto;
    padding: 0 12px;
    border-radius: 20px;
    font-size: 14px;
}

/* ============================================
   E-MAGAZIN BUGFIXES — 2026-04-29
   ============================================ */

/* --- FIX: Hide author ("ADMINISTRACIJA") in Najčitanije sidebar --- */
.elementor-element-1c8b6f1 .elementor-post-author {
  display: none !important;
}

/* --- FIX: Consistent thumbnail sizing in sidebar --- */
.elementor-element-1c8b6f1 .elementor-post__thumbnail img {
  width: 100% !important;
  aspect-ratio: 300 / 210;
  object-fit: cover !important;
}

/* --- FIX: Links in e-magazin articles — always visible --- */
.single-post.category-e-magazin .content-article a:not(.btn-dodaj-u-korpu) {
  color: #00ae93 !important;
  text-decoration: underline !important;
}
.single-post.category-e-magazin .content-article a:not(.btn-dodaj-u-korpu):hover {
  color: #008a75 !important;
}

/* --- FIX: Hide author in listing page meta --- */
.page-id-208339 .elementor-post__meta-data .elementor-post-author {
  display: none !important;
}

/* === Homepage H1 for SEO (Trello #20) === */
.apotekaweb-homepage-h1-wrapper {
    text-align: center;
    padding: 30px 15px 10px;
    max-width: 800px;
    margin: 0 auto;
}
.apotekaweb-homepage-h1 {
    font-family: "Dosis", sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.31em;
    color: #222;
    margin: 0 0 8px;
}
.apotekaweb-homepage-subtitle {
    font-family: "Dosis", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.26em;
    color: #222;
    margin: 0;
}
@media (max-width: 767px) {
    .apotekaweb-homepage-h1 { font-size: 24px; }
    .apotekaweb-homepage-subtitle { font-size: 16px; }
    .apotekaweb-homepage-h1-wrapper { padding: 20px 15px 8px; }
}
/* --- SITE-WIDE: Product card redesign on WooCommerce loops (Figma #18) --- */
/* product_view = "standart" so add-to-cart is always visible in .product-details.
   Homepage uses Elementor (.etheme-product-grid-*) and is unaffected.
   !important on layout props to override XStore theme specificity. */

.content-product {
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  overflow: hidden;
  background: #fff;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.content-product .images-slider-wrapper {
  flex-shrink: 0;
  height: 220px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.content-product .images-slider-wrapper img {
  max-height: 100%;
  width: auto !important;
  object-fit: contain;
}
.content-product .product-details,
.content-product .product-details.text-center {
  text-align: left !important;
  padding: 10px !important;
  border-top: 1px solid rgba(0,0,0,0.1);
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.content-product .product-details .products-page-cats,
.content-product .product-details .products-page-cats a {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #666 !important;
  text-transform: uppercase;
  text-decoration: none;
}
.content-product .product-details .product-title,
.content-product .product-details .product-title a {
  font-family: Dosis, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #222 !important;
  line-height: 1.4;
}
.content-product .star-rating,
.content-product .product-details .star-rating-wrapper,
.content-product .product-details .quantity-wrapper {
  display: none !important;
}
.content-product .product-details .price {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  margin: 4px 0 8px !important;
}
.content-product .product-details .price del,
.content-product .product-details .price del .amount {
  color: #000 !important;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.content-product .product-details .price ins,
.content-product .product-details .price ins .amount {
  color: #96B416 !important;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.content-product .product-details .price > .amount {
  color: #96B416 !important;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.content-product .product-details .add_to_cart_button,
.content-product .product-details .button.product_type_simple,
.content-product .product-details .added_to_cart {
  background: #96B416 !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 14px;
  width: 100% !important;
  text-align: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px !important;
  margin-top: auto !important;
  border: none !important;
  cursor: pointer;
  line-height: 1.7;
}
.content-product .product-details .add_to_cart_button:hover,
.content-product .product-details .button.product_type_simple:hover {
  background: #87a213 !important;
}

/* --- SHOP: rounded corners on top banner (Figma #18, Boris 16px) --- */
.elementor-element-7c78a8e6 {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Card text clamps (Figma: single category line, max 2-line title) */
.content-product .product-details .products-page-cats {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.content-product .product-details .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cart icon in shop add-to-cart button (parity with homepage cards) */
.content-product .product-details .add_to_cart_button::before,
.content-product .product-details .button.product_type_simple::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M7%2018c-1.1%200-1.99.9-1.99%202S5.9%2022%207%2022s2-.9%202-2-.9-2-2-2zM1%202v2h2l3.6%207.59-1.35%202.45c-.16.28-.25.61-.25.96%200%201.1.9%202%202%202h12v-2H7.42c-.14%200-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75%200%201.41-.41%201.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48%200-.55-.45-1-1-1H5.21l-.94-2H1zm16%2016c-1.1%200-1.99.9-1.99%202s.89%202%201.99%202%202-.9%202-2-.9-2-2-2z%27/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M7%2018c-1.1%200-1.99.9-1.99%202S5.9%2022%207%2022s2-.9%202-2-.9-2-2-2zM1%202v2h2l3.6%207.59-1.35%202.45c-.16.28-.25.61-.25.96%200%201.1.9%202%202%202h12v-2H7.42c-.14%200-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75%200%201.41-.41%201.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48%200-.55-.45-1-1-1H5.21l-.94-2H1zm16%2016c-1.1%200-1.99.9-1.99%202s.89%202%201.99%202%202-.9%202-2-.9-2-2-2z%27/%3E%3C/svg%3E") center / contain no-repeat;
}

/* === Mobile fixevi #18 (Boris 22.05.2026) === */

/* Fix 4: pozadina sajta (svi viewportovi) */
body.apotekaweb,
body {
  background-color: #F4F6F8 !important;
}

@media (max-width: 767px) {

  /* Fix 1: shop grid bez granicnika, 2 kolone + 16px gap.
     Pravi kontejner proizvoda je .ajax-content (XStore ajax paginacija drzi
     .product kartice unutra), pa grid ide na njega; minmax(0,1fr) -> jednake kolone. */
  .products.products-grid .ajax-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  /* .ajax-content ima .clearfix -> ::before/::after postaju grid celije i prave
     prazno polje gore lijevo; ugasiti ih */
  .products.products-grid .ajax-content::before,
  .products.products-grid .ajax-content::after {
    display: none !important;
  }
  .products.products-grid {
    margin: 0 !important;
  }
  /* ugasi XStore bordered-layout granicnike + col-xs-6 sirine/float na karticama */
  .products.products-bordered-layout .product {
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
  }
  .products.products-bordered-layout {
    border: 0 !important;
  }

  /* Fix 2: H1 lijevo, 32px (override ranijeg 24px/center) */
  .apotekaweb-homepage-h1 {
    font-size: 32px !important;
    text-align: left !important;
  }
  .apotekaweb-homepage-h1-wrapper {
    text-align: left !important;
  }

  /* Fix 3: Akcije mjeseca karusel - slajd 300px za peek/swipe.
     functions.php (apotekaweb_akcije_carousel_peek_js) prebacuje ovaj karusel
     na Swiper slidesPerView:'auto' na mobilnom, pa Swiper cita ovu sirinu i
     racuna ispravan snap (cist swipe + peek iduce kartice). */
  .elementor-element-e528c00 .swiper-slide {
    width: 300px !important;
  }
}
/* --- HOMEPAGE: Product card redesign (Figma #18) --- */

/* Card container */
.page-id-14 .etheme-product-grid-item {
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.1);
  overflow: hidden;
  background: #fff;
}

/* Image area */
.page-id-14 .etheme-product-grid-image {
  position: relative;
}

/* Content area — left-align, padding, top border */
.page-id-14 .etheme-product-grid-content {
  text-align: left;
  padding: 8px;
  border-top: 1px solid rgba(0,0,0,0.1);
}

/* Category */
.page-id-14 .etheme-product-grid-categories,
.page-id-14 .etheme-product-grid-categories a {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #666666;
  text-transform: uppercase;
  text-decoration: none;
}

/* Product title */
.page-id-14 .etheme-product-grid-title a {
  font-family: Dosis, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #222222;
  line-height: 1.4;
}

/* Hide star rating wrapper */
.page-id-14 .etheme-product-grid-content .star-rating-wrapper {
  display: none;
}

/* Price row — side by side */
.page-id-14 .etheme-product-grid-content .price {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}
.page-id-14 .etheme-product-grid-content .price del {
  color: #000000;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.page-id-14 .etheme-product-grid-content .price ins {
  color: #96B416;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.page-id-14 .etheme-product-grid-content .price > .amount,
.page-id-14 .etheme-product-grid-content .price > span > .amount {
  color: #96B416;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 16px;
}

/* Add-to-cart button */
.page-id-14 .etheme-product-grid-content .etheme-product-grid-button {
  background: #96B416 !important;
  border-radius: 6px !important;
  color: white !important;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 14px;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  margin-top: 8px;
  border: none;
  cursor: pointer;
  line-height: 1.7;
}
.page-id-14 .etheme-product-grid-content .etheme-product-grid-button:hover {
  background: #87a213 !important;
}
.page-id-14 .etheme-product-grid-content .etheme-product-grid-button .button-text {
  color: white !important;
}

/* Badge: PREPORUČUJEMO */
.page-id-14 .badge-preporucujemo {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: white;
  border-radius: 20px;
  padding: 4px 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  z-index: 3;
}
.page-id-14 .badge-preporucujemo .badge-icon {
  width: 20px;
  height: 20px;
  background: #3BB0C9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.page-id-14 .badge-preporucujemo .badge-text {
  font-size: 9px;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Cart icon SVG in button */
.page-id-14 .etheme-product-grid-content .cart-icon-svg {
  width: 16px;
  height: 16px;
  fill: white;
  flex-shrink: 0;
}


/* --- FIX #2: Equal-height product cards --- */

/* Swiper slides stretch to match tallest card */
.page-id-14 .etheme-product-grid-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Fixed-height image area for consistency */
.page-id-14 .etheme-product-grid-image {
  flex-shrink: 0;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.page-id-14 .etheme-product-grid-image img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* Content area fills remaining space, pushes button to bottom */
.page-id-14 .etheme-product-grid-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Button always at the bottom */
.page-id-14 .etheme-product-grid-content .etheme-product-grid-button {
  margin-top: auto;
}


/* --- FIX #3: Force equal-height cards (specificity override) --- */

/* Swiper wrapper must stretch slides to tallest */
.page-id-14 .elementor-widget-etheme_product_carousel .swiper-wrapper {
  align-items: stretch !important;
}

/* Swiper slides fill height */
.page-id-14 .elementor-widget-etheme_product_carousel .swiper-slide {
  height: auto !important;
}

/* Card fills slide and uses flex column */
.page-id-14 .etheme-product-grid-item.product {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Content area fills remaining space */
.page-id-14 .etheme-product-grid-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Button always at the bottom */
.page-id-14 .etheme-product-grid-content > .etheme-product-grid-button {
  margin-top: auto !important;
}



/* === AKCIJA / [products] shortcode grid — mobilni 2-kolonski grid (Trello #18 follow-up, 2026-06-01) ===
   [products] shortcode (akcijske landing stranice, npr. /hemofarm-thiomucase/) renderuje
   .products.products-grid BEZ .ajax-content wrappera (taj postoji samo na shop/kategorija arhivama
   sa ajax paginacijom). Zato mobilni grid fix iz 2026-05-24 (cilja .ajax-content) NE hvata ove grid-ove
   -> kartice padaju na XStore bootstrap float (col-xs-6, 15px padding, neujednacene visine = "spljosteno").
   Arhive nose klasu .with-ajax; shortcode grid je nema -> :not(.with-ajax) precizno razdvaja. */
@media (max-width: 767px) {
  .products.products-grid:not(.with-ajax) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .products.products-grid:not(.with-ajax) > .product {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    left: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .products.products-grid:not(.with-ajax)::before,
  .products.products-grid:not(.with-ajax)::after {
    content: none !important;
    display: none !important;
  }
}

/* === AKCIJA grid — uniformno sa homepage .akcije-grid (komentar 2026-06-01) ===
   Vanjski lijevi/desni razmak svesti sa 25px na 10px (25px = 15px Elementor container + 10px
   widget-wrap padding). Negativna margina -15px povuče grid na 10px → kolone 177px, gap 16px =
   identično homepage .akcije-grid. Gap je već 16px (isti kao referenca). Mobilni-only. */
@media (max-width: 767px) {
  .products.products-grid:not(.with-ajax) {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
}

/* === Povezani proizvodi (related) carousel — jednaka visina kartica (2026-06-01) ===
   Swiper slajdovi su sadržaj-bazirani → kartica s akcijskom (precrtanom) cijenom je viša od one bez
   (npr. GLORIA bez akcije niža od VICHY/THIOMUCASE) → neporavnate. Stretch slajdove na najvišu u redu +
   content-product 100% visine (dugme već ide margin-top:auto). Scope samo related, ne dira ostale carousele. */
.related-products-wrapper .swiper-wrapper { align-items: stretch !important; }
.related-products-wrapper .swiper-slide { height: auto !important; }
.related-products-wrapper .swiper-slide > .product,
.related-products-wrapper .swiper-slide .content-product { height: 100% !important; }

/* === STICKY HEADER (position:fixed) — 2026-06-01 ===
   XStore native sticky NE radi (fixedHeader.min.js u WP Rocket delay-JS bucketu); position:sticky blokira
   .template-container{overflow:hidden}. Rješenje: position:fixed + padding-top kompenzacija
   (mobilni header <1200px = 111px, desktop ≥1200px = 145px). */
.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
}
.template-container { padding-top: 111px; }
@media (min-width: 1200px) {
  .template-container { padding-top: 145px; }
}
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* === Single product / korpa (2026-06-01): redizajn quantity steppera + sakrij "X ljudi gledaju" ===
   "Ljudi gledaju" = XStore Sales Booster live-viewing → sakriveno.
   Stepper: zeleni +/- dugmići (#96B416), bijele +/- prečke crtane CSS-om (3px, centrirane); wrapper i djeca
   iste visine (stretch) da overflow:hidden ne siječe; label "Količina:" povećan (XStore default 13px presitan). */
.quantity .quantity-wrapper.type-square {
  display: flex !important;
  align-items: stretch !important;
  height: 46px !important;
  border: 1px solid #96B416 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.quantity .quantity-wrapper.type-square::before {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333 !important;
}
.sales-booster-live-viewing { display: none !important; }
.quantity .quantity-wrapper .minus,
.quantity .quantity-wrapper .plus {
  position: relative !important;
  width: 46px !important;
  min-width: 46px !important;
  height: auto !important;
  align-self: stretch !important;
  background: #96B416 !important;
  cursor: pointer !important;
  transition: background .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  padding: 0 !important;
}
.quantity .quantity-wrapper .minus:hover,
.quantity .quantity-wrapper .plus:hover { background: #86a113 !important; }
.quantity .quantity-wrapper .minus svg,
.quantity .quantity-wrapper .plus svg { display: none !important; }
.quantity .quantity-wrapper .minus::before,
.quantity .quantity-wrapper .plus::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 16px !important;
  height: 3px !important;
  background: #fff !important;
  border-radius: 2px !important;
  transform: translate(-50%, -50%) !important;
}
.quantity .quantity-wrapper .plus::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 3px !important;
  height: 16px !important;
  background: #fff !important;
  border-radius: 2px !important;
  transform: translate(-50%, -50%) !important;
}
.quantity .quantity-wrapper input.qty {
  height: auto !important;
  align-self: stretch !important;
  width: 48px !important;
  border: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #222 !important;
  text-align: center !important;
}

/* Single product "Dodaj u korpu" — veći tekst (bio 13px, presitan za veliko dugme).
   NE dira dugmad u karticama (.add_to_cart_button u loopovima) — ovo cilja samo .single_add_to_cart_button. */
.single_add_to_cart_button { font-size: 18px !important; }
.single_add_to_cart_button { text-transform: none !important; }  /* "Dodaj u korpu" sentence case (bilo capitalize -> "Dodaj U Korpu") */
.quantity .quantity-wrapper .minus,
.quantity .quantity-wrapper .plus { border: 0 !important; }  /* ukloni XStore sivi #e1e1e1 border na dugmićima */

/* KORPA: kompaktniji stepper — XStore cart .quantity-wrapper ima max-width:110px, pa 46px dugmići sijeku "+".
   34/30/34 = 98px stane bez sječenja. (Single product ostaje 46px — ima prostora.) */
.woocommerce-cart .quantity .quantity-wrapper .minus,
.woocommerce-cart .quantity .quantity-wrapper .plus { width: 34px !important; min-width: 34px !important; }
.woocommerce-cart .quantity .quantity-wrapper input.qty { width: 30px !important; }

/* STICKY ADD-TO-CART BAR (single product, mobilni): stepper + "Dodaj u korpu" dijele JEDAN red.
   46/36/46 stepper (130px) gura dugme van ekrana (~23px) i pod Tidio chat bubble.
   Suzi stepper na 32/28/32 (92px) -> dugme se pomjeri ulijevo i stane. (2026-06-14, Boris) */
@media (max-width: 1024px) {
  .etheme-sticky-cart .quantity .quantity-wrapper .minus,
  .etheme-sticky-cart .quantity .quantity-wrapper .plus { width: 32px !important; min-width: 32px !important; }
  .etheme-sticky-cart .quantity .quantity-wrapper input.qty { width: 28px !important; }
  /* Dugme nikad ne smije prebiti viewport: dopusti mu da se skupi prije nego predje ivicu. */
  .etheme-sticky-cart form.cart { max-width: 100% !important; }
  .etheme-sticky-cart .single_add_to_cart_button { min-width: 0 !important; }
}

/* "Dodaj u korpu" POPUP (XStore .popup-added-to-cart) stepper.
   VAŽNO: WooCommerce koristi class="quantity" za DVIJE stvari u popup-u:
     - stepper = DIV.quantity (.minus / input / .plus)  -> stiliziraj
     - cijena "× 39.87 KM" = SPAN.quantity              -> NE diraj (inace ruzan okvir oko cijene)
   Zato sve scope-ovano na `div.quantity`. +/- prečke crtane CSS-om (DEBELE 3px, kao na product
   stranici) jer et-icon font ikona je pretanka. (2026-06-14, Boris) */
.popup-added-to-cart div.quantity {
  display: inline-flex !important;
  align-items: stretch !important;
  border: 1px solid #96B416 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  height: 40px !important;
}
.popup-added-to-cart div.quantity .minus,
.popup-added-to-cart div.quantity .plus {
  position: relative !important;
  width: 38px !important;
  min-width: 38px !important;
  background: #96B416 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: 0 !important;
  transition: background .15s !important;
}
.popup-added-to-cart div.quantity .minus:hover,
.popup-added-to-cart div.quantity .plus:hover { background: #86a113 !important; }
/* sakrij tanku font-ikonu, nacrtaj debele bijele prečke */
.popup-added-to-cart div.quantity .minus i,
.popup-added-to-cart div.quantity .plus i { display: none !important; }
.popup-added-to-cart div.quantity .minus::before,
.popup-added-to-cart div.quantity .plus::before {
  content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important;
  width: 14px !important; height: 3px !important; background: #fff !important; border-radius: 2px !important;
  transform: translate(-50%, -50%) !important;
}
.popup-added-to-cart div.quantity .plus::after {
  content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important;
  width: 3px !important; height: 14px !important; background: #fff !important; border-radius: 2px !important;
  transform: translate(-50%, -50%) !important;
}
.popup-added-to-cart div.quantity input.qty {
  align-self: stretch !important;
  width: 46px !important;
  border: 0 !important;
  text-align: center !important;
  font-weight: 600 !important;
  color: #222 !important;
  -moz-appearance: textfield !important;
}

/* === Single product: akcijska cijena bold + status zalihe kao bedž (2026-06-02, Boris) ===
   Cilja SAMO glavni proizvod (direktno dijete .et_product-block); kartice u loopu su .content-product (dublje) → netaknute. */
.et_product-block > .price ins,
.et_product-block > .price ins .amount { font-weight: 700 !important; text-decoration: none !important; }
.et_product-block > .stock {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 5px 14px !important; border-radius: 20px !important;
  font-size: 14px !important; font-weight: 600 !important; width: auto !important;
}
.et_product-block > .stock.in-stock { background: #e7f3d4 !important; color: #5b8a00 !important; }
.et_product-block > .stock.out-of-stock { background: #fde4e1 !important; color: #c0392b !important; }
.et_product-block > .stock.available-on-backorder { background: #fef0cd !important; color: #b07d00 !important; }
/* stepper: input padding 0 (centriraj broj) */
.quantity .quantity-wrapper input.qty { padding: 0 !important; }

/* HEADER KORPA (mini-cart drawer, XStore): close (X) je na `.et-close.full-right { right:100% }`
   = IZVAN panela, u lijevom 64px gapu -> na Androidu djeluje odsječeno/odvojeno s lijeve strane.
   Premjesti X UNUTAR panela (gore desno) da nikad ne klizi van ekrana. (2026-06-14, Boris) */
.et_b_header-cart .et-mini-content .et-close.full-right,
.et_b_header-cart .et-mini-content .et-close {
  right: 8px !important;
  left: auto !important;
  top: 8px !important;
  z-index: 60 !important;          /* #50 dorada 07-03: X iznad head cart/account linkova */
  pointer-events: auto !important;
}
/* #50 dorada 07-03 (Boris kritično): head cart/account/wishlist ikone u draweru su bile
   naslikane preko X-a -> tap na X je vodio na /korpa/ umjesto zatvaranja. Isključi ih iz hit-testa. */
.et_b_header-cart .et-mini-content-head a.cart-type2,
.et_b_header-cart .et-mini-content-head a.account-type2,
.et_b_header-cart .et-mini-content-head a.wishlist-type2 { pointer-events: none !important; }

/* === Sun sličica (#49, 2026-06-18): pun naziv "☀️ Sunčana strana" dodat u glavni meni kao 2. stavka.
   Glavni desktop bar je gust pa se zadnja stavka ("E-magazin", ima crticu) lomi u 2 reda kad je
   prirodna širina menija ~10px preko raspoloživog. Fix: spriječi prelamanje labela u glavnom meniju.
   Ima ~150-240px praznine do desnih ikona na svim desktop širinama (1230-1920), pa par px viška ne smeta.
   Font NETAKNUT (original na svim ekranima). */
.header-main-menu #menu-main-menu > li > a.item-link{
  white-space: nowrap !important;
}

/* Sun sličica (#49): ukloni tačkaste separatore u glavnom meniju (korisnik 2026-06-18). */
.header-main-menu #menu-main-menu > li > .et_b_header-menu-sep{ display: none !important; }

/* =====================================================================
   #50 KORPA I CHECKOUT — apotekaweb redizajn (mobilni), 2026-06-18
   Native-first: popup ugašen preko ajax_added_product_notify_type=mini_cart.
   Ovdje su samo vizuelne izmjene da mini-korpa / korpa / checkout
   odgovaraju Borisovom dizajnu. Sve scope-ovano na mobilni (<=768px).
   ===================================================================== */
/* Chat ikona (Tidio) sakrivena dok je off-canvas korpa otvorena (prekrivala donja dugmad) */
html.et-mini-content-opened #tidio-chat,
html.et-mini-content-opened #tidio-chat-iframe { display: none !important; }

@media (max-width: 768px) {

  /* ---------- A) MINI-KORPA (off-canvas) — Prijedlog 1+2 ---------- */

  /* progress bar "još X KM do besplatne dostave" na vrhu mini-korpe */
  .korpa50-minicart-progress { margin: 0 14px 12px; }
  .korpa50-minicart-progress .etheme_sales_booster_progress_bar_shortcode { margin: 0; }
  /* bar track je <progress> bez visine van .woocommerce-cart konteksta -> stilizuj ovdje */
  .korpa50-minicart-progress .et-cart-progress { display: block !important; }
  .korpa50-minicart-progress .et-cart-in-progress,
  .korpa50-minicart-progress .et-cart-progress-success { width: 100%; display: block; }
  .korpa50-minicart-progress progress.et_cart-progress-bar {
    width: 100% !important; height: 10px !important; min-height: 10px !important; display: block !important; margin-top: 8px;
    -webkit-appearance: none; appearance: none; border: none; border-radius: 6px;
    background: #e9e9e9; overflow: hidden; color: #487B39;
  }
  .korpa50-minicart-progress progress.et_cart-progress-bar::-webkit-progress-bar { background: #e9e9e9; border-radius: 6px; }
  .korpa50-minicart-progress progress.et_cart-progress-bar::-webkit-progress-value { background: #487B39; border-radius: 6px; }
  .korpa50-minicart-progress progress.et_cart-progress-bar::-moz-progress-bar { background: #487B39; }

  /* header mini-korpe — naglašen naziv */
  .et-mini-content-head .et-element-label,
  .et-mini-content-head .et-cart-quantity ~ .et-element-label { font-weight: 700; }

  /* touchable 36px X za zatvaranje — kontejner je 37px, ali glyph je sitan (11px) */
  .et-close.full-right svg, .et-close.full-left svg,
  .et-toggle.et-close svg, .et-mini-content .et-close svg {
    width: 22px !important; height: 22px !important;
  }
  .et-toggle.et-close { width: 40px !important; height: 40px !important; }

  /* brisanje proizvoda — crvena kanta (native remove je skriven 0x0; forsiraj vidljiv) */
  .widget_shopping_cart li.mini_cart_item { position: relative; padding-right: 30px; }
  .widget_shopping_cart li.mini_cart_item a.remove.remove_from_cart_button {
    display: block !important; visibility: visible !important;
    position: absolute !important; top: 50%; right: 2px; transform: translateY(-50%);
    width: 22px !important; height: 22px !important; margin: 0 !important;
    opacity: 1 !important; font-size: 0 !important; line-height: 0 !important;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e04141' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
  }
  .widget_shopping_cart li.mini_cart_item a.remove .et-icon,
  .widget_shopping_cart li.mini_cart_item a.remove img { display: none !important; }

  /* SKU izbačen iz mini-korpe */
  .widget_shopping_cart .product_meta,
  .widget_shopping_cart .sku_wrapper { display: none !important; }

  /* #50 dorada 07-03 (Boris #1a): 14px padding L/D u listi stavki mini-korpe */
  .et_b_header-cart .et-mini-content .woocommerce-mini-cart { padding-left: 14px !important; padding-right: 14px !important; }

  /* UKUPNO boldovano */
  .woocommerce-mini-cart__total .big-coast,
  .woocommerce-mini-cart__total .woocommerce-Price-amount { font-weight: 800 !important; }
  .woocommerce-mini-cart__total .small-h { font-weight: 700 !important; text-transform: uppercase; }

  /* hijerarhija dugmadi: "Dostava i plaćanje" (.btn-checkout) primarno, "Vidi korpu" sekundarno */
  .et-content a.button.wc-forward:not(.btn-checkout),
  .woocommerce-mini-cart__buttons a.button:not(.btn-checkout):not(.checkout) {
    background: #fff !important; color: #96b416 !important;
    border: 2px solid #96b416 !important;
  }
  .et-content a.btn-checkout,
  .woocommerce-mini-cart__buttons a.checkout,
  .et-content a.button.btn-checkout {
    background: #96b416 !important; color: #fff !important; border: 2px solid #96b416 !important;
  }
  .et-content a.btn-checkout:hover { background: #9ebc19 !important; border-color: #9ebc19 !important; }
  /* Figma tekst: "PLAĆANJE I DOSTAVA" (live "Dostava i plaćanje") */
  .et-content a.btn-checkout { font-size: 0 !important; }
  .et-content a.btn-checkout::after { content: "Plaćanje i dostava"; display: inline-block; font-size: 14px; font-weight: 700; text-transform: uppercase; }


  /* ---- Figma (Korpa 2) refinements za mini-korpu ---- */
  /* UKUPNO u boksu s obrubom (Figma: border 1px rgba(0,0,0,.2), radius 8px) */
  .et-content .woocommerce-mini-cart__total {
    border: 1px solid rgba(0,0,0,0.2); border-radius: 8px; padding: 12px 14px;
    display: flex; justify-content: space-between; align-items: center; margin: 8px 14px 12px;
  }
  .et-content .woocommerce-mini-cart__total .small-h { font-size: 17px; font-weight: 400; text-transform: uppercase; }
  /* dugmad: radius 8px (Figma), ne pill 100px */
  .et-content a.button.wc-forward,
  .et-content a.btn-checkout { border-radius: 8px !important; }
  /* progress card po Figmi: header pill + tijelo s barom */
  .korpa50-minicart-progress { border: 1px solid rgba(0,0,0,0.2); border-radius: 8px; padding: 0; overflow: hidden; }
  .korpa50-progress-pill {
    background: #EDEDED; color: #000; text-align: center;
    font-family: Inter, -apple-system, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0; white-space: nowrap;
    text-transform: uppercase; padding: 8px 10px; border-radius: 8px 8px 0 0;
  }
  .korpa50-progress-body { padding: 12px 14px; }
  .korpa50-progress-body .etheme_sales_booster_progress_bar_shortcode { margin: 0; }
  /* qty stepper mini-korpe (Boris #1c 07-03): zeleni [−][N][+] kao popup/korpa, UVIJEK vidljiv.
     XStore drži div.quantity na visibility:hidden dok JS ne odradi -> na realnom telefonu (delay_js)
     bljesne prazno "1 × cijena". Forsiraj visible + zeleni stepper (bijele prečke crtane CSS-om). */
  /* 07-11: nowrap + gap — sa uključenim stepperom wrapper je bio pretijesan (110px) pa je
     "× 28.96 KM" prelamalo u novi red i nestajalo. Figma: stepper pa cijena u istom redu. */
  .et_b_header-cart .et-mini-content .widget_shopping_cart .quantity-wrapper {
    display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
    gap: 10px; width: 100% !important; height: auto !important; visibility: visible !important;
  }
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity {
    visibility: visible !important; display: inline-flex !important; align-items: stretch !important;
    border: 1px solid #96B416 !important; border-radius: 10px !important; overflow: hidden !important; height: 36px !important;
    /* wrapper je nowrap => stepper se ne smije skupiti u tanku crtu */
    flex: 0 0 auto !important; width: auto !important; min-width: 110px !important;
  }
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity .minus,
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity .plus {
    position: relative !important; width: 34px !important; min-width: 34px !important; background: #96B416 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; border: 0 !important; visibility: visible !important;
  }
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity .minus i,
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity .plus i { display: none !important; }
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity .minus::before,
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity .plus::before {
    content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important;
    width: 12px !important; height: 3px !important; background: #fff !important; border-radius: 2px !important; transform: translate(-50%,-50%) !important;
  }
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity .plus::after {
    content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important;
    width: 3px !important; height: 12px !important; background: #fff !important; border-radius: 2px !important; transform: translate(-50%,-50%) !important;
  }
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity input.qty {
    visibility: visible !important; align-self: stretch !important; width: 40px !important; border: 0 !important;
    text-align: center !important; font-weight: 600 !important; color: #222 !important; background: #fff !important; -moz-appearance: textfield !important;
  }
  .et_b_header-cart .et-mini-content .widget_shopping_cart .quantity-wrapper span.quantity {
    visibility: visible !important; white-space: nowrap; flex: 0 0 auto !important; margin: 0 !important;
  }

  /* ---------- B) DETALJNA KORPA — Prijedlog 3 ---------- */

  /* (07-03: .et-cart-checkout-search uklonjen — search red više ne postoji)
     (07-11: logo više ne forsiramo iz parent hidden-xs kolone — dolazi iz
      .korpa50-mobile-header reda, vidi sekciju G) */

  /* qty stepper na stranici korpe — NATIVE red [−][num][+] (Boris 07-03; = prod) */
  .woocommerce-cart .cart_item .quantity-wrapper { display: inline-flex !important; align-items: center; }

  /* per-line total: "Subtotal:" -> "Ukupno:", istaknuto; SKU izbačen */
  .woocommerce-cart .product-sku.dt-hide,
  .woocommerce-cart td.product-sku,
  .woocommerce-cart .cart-item-details .product-sku { display: none !important; }
  /* per-line "Ukupno" po Figmi: Dosis 600, 14.8px, siva #717171 (ne bold-tamno) */
  .woocommerce-cart .product-subtotal.dt-hide { font-size: 0; font-family: 'Dosis', sans-serif; }
  .woocommerce-cart .product-subtotal.dt-hide > span,
  .woocommerce-cart .product-subtotal.dt-hide .amount { font-size: 14.8px; font-weight: 600; color: #717171; }
  .woocommerce-cart .product-subtotal.dt-hide::before {
    content: "Ukupno: "; font-size: 14.8px; font-weight: 600; color: #717171; font-family: 'Dosis', sans-serif;
  }
  /* cijena "× X KM" po Figmi: Dosis 600 14.8px, siva rgba(0,0,0,.7) */
  .woocommerce-cart .cart_item .product-price.dt-hide,
  .woocommerce-cart .cart_item .product-price.dt-hide .amount {
    font-family: 'Dosis', sans-serif !important; font-size: 14.8px !important; font-weight: 600 !important; color: rgba(0,0,0,0.7) !important;
  }

  /* trash kanta DESNO, vertikalno centrirana u redu (Figma Korpa 3) */
  .woocommerce-cart .cart_item td.product-details { position: relative; padding-right: 44px; }
  .woocommerce-cart .cart_item .product-remove {
    position: absolute !important; right: 4px; top: 50%; transform: translateY(-50%);
    margin: 0 !important; width: auto !important;
  }
  /* "Ukloni" -> crvena kanta */
  .woocommerce-cart .product-remove a.remove-item {
    color: #e04141 !important; text-decoration: none !important;
    display: inline-flex; align-items: center; gap: 6px; font-size: 0;
  }
  .woocommerce-cart .product-remove a.remove-item::before {
    content: ""; width: 18px; height: 18px; display: inline-block;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e04141' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
  }

  /* "Isprazni čitavu korpu" -> crveni OUTLINE po Figmi (#E50C0C, 1px, radius 8px, transparent) */
  .woocommerce-cart a.clear-cart {
    background: #fff !important; color: #E50C0C !important;
    border: 1px solid #E50C0C !important; border-radius: 8px !important;
  }
  .woocommerce-cart a.clear-cart .et-icon,
  .woocommerce-cart a.clear-cart i { color: #E50C0C !important; }

  /* fiksiran CTA "Nastavi na plaćanje" — inset dugme (Boris 07-03: ne ribbon nego dugme, blizu Figme) */
  .woocommerce-cart a.checkout-button {
    position: fixed !important; left: 12px; right: 12px; bottom: 12px; z-index: 9990;
    width: auto !important; margin: 0 !important; border-radius: 8px !important;
    background: #96b416 !important; color: #fff !important; border-color: #96b416 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
  }
  .woocommerce-cart a.checkout-button:hover { background: #9ebc19 !important; }
  /* prostor da fiksiran CTA ne prekrije zadnji sadržaj */
  body.woocommerce-cart .content-page,
  body.woocommerce-page.woocommerce-cart #main { padding-bottom: 84px; }


  /* ---------- C) CHECKOUT (Prijedlog 4) + BOJE (Prijedlog 5) ---------- */

  /* narandžasta -> brend zelena za order button */
  .woocommerce #place_order,
  .woocommerce-checkout #place_order,
  form.checkout #place_order {
    background: #96b416 !important; border-color: #96b416 !important; color: #fff !important;
  }
  .woocommerce #place_order:hover { background: #9ebc19 !important; }

  /* svaka preostala narandžasta akcija u korpi/checkoutu -> zelena */
  .woocommerce-cart .button.alt,
  .woocommerce-checkout .button.alt {
    background-color: #96b416 !important; border-color: #96b416 !important;
  }

  /* ---------- E) Totals box po Figmi (Korpa 4): samo "SVE UKUPNO" + "Dostava" ---------- */
  /* Figma ima JEDAN total. Sakrij "SVEUKUPNO" header + "Ukupno" subtotal red; */
  /* "SVE UKUPNO" (grand total) ide na vrh, pa "Dostava" radije. */
  .woocommerce-cart .cart_totals h2 { display: none !important; }
  /* totals boks: tanak sivi obrub + radius 8px (Figma); bio 2px crni na .cart-collaterals */
  .woocommerce-cart .cart-collaterals { border: 1px solid rgba(0,0,0,0.2) !important; border-radius: 8px !important; }
  /* "Nastavi kupovinu" (return-shop) nije u Figma totals boksu */
  .woocommerce-cart .cart_totals a.return-shop { display: none !important; }
  /* prazan "PLAĆANJE" placeholder image widget (xstore-placeholder) - sakrij */
  .woocommerce-cart .sidebar-widget.widget_media_image { display: none !important; }
  .woocommerce-cart .cart_totals tr.cart-subtotal { display: none !important; }
  .woocommerce-cart .cart_totals tr.order-total { order: 0; border-top: none !important; }
  .woocommerce-cart .cart_totals tr.shipping { order: 1; border-top: 1px solid #e5e5e5 !important; }
  /* relabel "UKUPNO" -> "SVE UKUPNO" (Figma) */
  .woocommerce-cart .cart_totals tr.order-total th { font-size: 0 !important; white-space: nowrap; flex: 0 0 auto; }
  .woocommerce-cart .cart_totals tr.order-total th::after {
    content: "SVE UKUPNO"; display: inline-block; white-space: nowrap;
    font-size: 17px; font-weight: 800; color: #000; text-transform: uppercase;
  }
  /* totals tabela kao blok — izbjegni table-grid koji je stezao shipping red na ~109px */
  .woocommerce-cart .cart_totals table.shop_table { display: block; width: 100%; }
  /* tbody flex column da "SVE UKUPNO" može na vrh (order) iznad "Dostava" */
  .woocommerce-cart .cart_totals table.shop_table tbody { display: flex; flex-direction: column; width: 100%; }
  .woocommerce-cart .cart_totals table.shop_table tr {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    width: 100%; padding: 12px 0; margin: 0; border-top: 1px solid #e5e5e5;
  }
  .woocommerce-cart .cart_totals table.shop_table tr:first-child { border-top: none; }
  .woocommerce-cart .cart_totals table.shop_table th {
    display: block; font-weight: 600; color: #222; text-align: left !important; padding: 0;
  }
  .woocommerce-cart .cart_totals table.shop_table td { display: block; text-align: right !important; padding: 0; }
  /* "Dostava" red — STACK: labela gore, metode pune širine ispod (čista kolona) */
  .woocommerce-cart .cart_totals tr.shipping { flex-direction: column; align-items: stretch !important; }
  .woocommerce-cart .cart_totals tr.shipping th { padding-bottom: 8px; }
  .woocommerce-cart .cart_totals tr.shipping td { width: 100% !important; max-width: none !important; align-self: stretch !important; text-align: left !important; }
  .woocommerce-cart .cart_totals .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }
  /* obična metoda (Kurirska, native radio): radio + label u redu */
  .woocommerce-cart .cart_totals .woocommerce-shipping-methods > li:not(.licno-preuzimanje-li) {
    display: flex !important; flex-direction: row; align-items: center; gap: 10px;
    width: 100%; text-align: left !important; margin: 0 0 12px;
  }
  /* 06-14 pickup (Lično preuzimanje): wrapper (krug+label) pa select ispod */
  .woocommerce-cart .cart_totals .woocommerce-shipping-methods > li.licno-preuzimanje-li {
    display: flex !important; flex-direction: column; align-items: flex-start; gap: 8px;
    width: 100%; text-align: left !important; margin: 0 0 12px;
  }
  .woocommerce-cart .cart_totals .licno-preuzimanje-li .licno-preuzimanje-wrapper {
    display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0; width: 100%;
  }
  .woocommerce-cart .cart_totals .woocommerce-shipping-methods > li:last-child { margin-bottom: 0; }
  /* Radio buttons PO FIGMI (Material): native radio (Kurirska) + 06-14 fake krug (Lično) identični */
  .woocommerce-cart .cart_totals .woocommerce-shipping-methods input[type="radio"] {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; min-width: 22px; flex: 0 0 22px;
    border: 2px solid #49454F; border-radius: 50%; background: #fff;
    position: relative; margin: 0; padding: 0; cursor: pointer; box-sizing: border-box;
  }
  .woocommerce-cart .cart_totals .woocommerce-shipping-methods input[type="radio"]:checked { border-color: #96B416; }
  .woocommerce-cart .cart_totals .woocommerce-shipping-methods input[type="radio"]:checked::after {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 11px; height: 11px; border-radius: 50%; background: #96B416;
  }
  .woocommerce-cart .cart_totals .licno-radio-circle {
    width: 22px; height: 22px; min-width: 22px; flex: 0 0 22px;
    border: 2px solid #49454F; border-radius: 50%; background: #fff;
    position: relative; box-sizing: border-box; margin: 0;
  }
  .woocommerce-cart .cart_totals .licno-radio-circle.checked { border-color: #96B416; background: #fff; }
  .woocommerce-cart .cart_totals .licno-radio-circle.checked::after {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 11px; height: 11px; border-radius: 50%; background: #96B416;
  }
  /* label po Figmi: Dosis 16px */
  .woocommerce-cart .cart_totals .woocommerce-shipping-methods li label,
  .woocommerce-cart .cart_totals .licno-preuzimanje-label {
    text-align: left !important; margin: 0; line-height: 1.31; font-size: 16px; color: #000;
  }
  .woocommerce-cart .cart_totals .licno-preuzimanje-li .licno-preuzimanje-select { width: 100%; }
  .woocommerce-cart .cart_totals .woocommerce-shipping-destination,
  .woocommerce-cart .cart_totals .woocommerce-shipping-estimate,
  .woocommerce-cart .cart_totals p.woocommerce-shipping-destination,
  .woocommerce-cart .cart_totals .shipping-calculator-button {
    text-align: left !important; font-size: 12px; color: #777; margin: 6px 0 0;
  }
  /* grand total naglašen, dosljedan */
  .woocommerce-cart .cart_totals tr.order-total th { font-size: 17px; font-weight: 800; }
  .woocommerce-cart .cart_totals tr.order-total td .amount,
  .woocommerce-cart .cart_totals tr.order-total td bdi { font-size: 18px; font-weight: 800; color: #222; }

  /* ---------- F) CHECKOUT order review po Figmi (Korpa 4) — radije + shipping ---------- */
  /* shipping red: stack + lijevo (samo taj red; cart_item redovi netaknuti) */
  .woocommerce-checkout #order_review tr.shipping th { display: block; text-align: left !important; padding-bottom: 8px; }
  .woocommerce-checkout #order_review tr.shipping td { display: block; text-align: left !important; width: 100%; }
  .woocommerce-checkout #order_review .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }
  .woocommerce-checkout #order_review .woocommerce-shipping-methods > li:not(.licno-preuzimanje-li) {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start !important; gap: 10px; width: 100%; text-align: left !important; margin: 0 0 12px;
  }
  .woocommerce-checkout #order_review .woocommerce-shipping-methods > li.licno-preuzimanje-li {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; margin: 0 0 12px;
  }
  .woocommerce-checkout #order_review .licno-preuzimanje-li .licno-preuzimanje-wrapper { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; margin: 0; }
  .woocommerce-checkout #order_review .licno-preuzimanje-li .licno-preuzimanje-select { width: 100%; }
  /* Material radio (native + 06-14 fake) — kao u korpi */
  .woocommerce-checkout #order_review .woocommerce-shipping-methods input[type="radio"] {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px; min-width: 22px; flex: 0 0 22px;
    border: 2px solid #49454F; border-radius: 50%; background: #fff; position: relative; margin: 0; cursor: pointer; box-sizing: border-box;
  }
  .woocommerce-checkout #order_review .woocommerce-shipping-methods input[type="radio"]:checked { border-color: #96B416; }
  .woocommerce-checkout #order_review .woocommerce-shipping-methods input[type="radio"]:checked::after {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 11px; height: 11px; border-radius: 50%; background: #96B416;
  }
  .woocommerce-checkout #order_review .licno-radio-circle {
    width: 22px; height: 22px; min-width: 22px; flex: 0 0 22px; border: 2px solid #49454F; border-radius: 50%; background: #fff; position: relative; box-sizing: border-box; margin: 0;
  }
  .woocommerce-checkout #order_review .licno-radio-circle.checked { border-color: #96B416; background: #fff; }
  .woocommerce-checkout #order_review .licno-radio-circle.checked::after {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 11px; height: 11px; border-radius: 50%; background: #96B416;
  }
  .woocommerce-checkout #order_review .woocommerce-shipping-methods li label,
  .woocommerce-checkout #order_review .licno-preuzimanje-label { text-align: left !important; margin: 0; font-size: 16px; line-height: 1.31; color: #000; }
  /* #50 dorada 07-03 (Boris #3): shipping labela da teče punom širinom (bila stegnuta ~119px -> 3 reda).
     #order_review je JEDNA <table> sa dijeljenim kolonama (stavke u tbody), pa se grid tabele NE dira;
     samo tfoot (totali) -> flex kolona: shipping red dobije punu širinu, subtotal/total ostaju "labela ... iznos". */
  .woocommerce-checkout #order_review table.shop_table tfoot { display: flex !important; flex-direction: column; width: 100%; }
  .woocommerce-checkout #order_review table.shop_table tfoot tr { display: flex !important; justify-content: space-between; align-items: baseline; width: 100%; gap: 12px; }
  .woocommerce-checkout #order_review table.shop_table tfoot tr th { text-align: left; }
  .woocommerce-checkout #order_review table.shop_table tfoot tr.cart-subtotal th,
  .woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th { flex: 1 0 auto; white-space: nowrap; }
  .woocommerce-checkout #order_review table.shop_table tfoot tr.cart-subtotal td,
  .woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td { flex: 0 0 auto; white-space: nowrap; }
  .woocommerce-checkout #order_review table.shop_table tfoot tr.shipping { flex-direction: column; align-items: stretch; }
  .woocommerce-checkout #order_review table.shop_table tfoot tr.shipping td { width: 100% !important; max-width: none !important; text-align: left !important; }
  .woocommerce-checkout #order_review .woocommerce-shipping-methods li label,
  .woocommerce-checkout #order_review .licno-preuzimanje-label { flex: 1 1 auto !important; min-width: 0 !important; white-space: normal !important; }
  /* grand total "SVE UKUPNO" naglašen */
  .woocommerce-checkout #order_review tr.order-total th { font-weight: 800; }
  .woocommerce-checkout #order_review tr.order-total td .amount,
  .woocommerce-checkout #order_review tr.order-total td bdi { font-weight: 800; font-size: 18px; color: #000; }
  /* payment metode: isti Material radio (konzistentno s shipping/Figma) */
  .woocommerce-checkout #payment .wc_payment_methods input[type="radio"] {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px; min-width: 22px;
    border: 2px solid #49454F; border-radius: 50%; background: #fff; position: relative; margin: 0 8px 0 0; cursor: pointer; box-sizing: border-box; vertical-align: middle;
  }
  .woocommerce-checkout #payment .wc_payment_methods input[type="radio"]:checked { border-color: #96B416; }
  .woocommerce-checkout #payment .wc_payment_methods input[type="radio"]:checked::after {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 11px; height: 11px; border-radius: 50%; background: #96B416;
  }


  /* theme #shipping_method li ima justify-content:flex-end !important -> override s id specificnoscu */
  .woocommerce-cart .cart_totals #shipping_method > li:not(.licno-preuzimanje-li),
  .woocommerce-checkout #order_review #shipping_method > li:not(.licno-preuzimanje-li) { justify-content: flex-start !important; }
  /* razmak izmedju shipping opcija (tema #shipping_method li ima mb:3px id-spec) */
  .woocommerce-cart .cart_totals #shipping_method > li,
  .woocommerce-checkout #order_review #shipping_method > li { margin-bottom: 16px !important; }

  /* ---------- D) "KORPA" -> "MOJA KORPA" (fix iteracija 1) ---------- */
  /* mini-korpa off-canvas head (scope na .et-mini-content-head ne dira bottom-nav "Korpa") */
  .et-mini-content-head a.cart-type2 .et-element-label { font-size: 0 !important; }
  .et-mini-content-head a.cart-type2 .et-element-label::after {
    content: "Moja korpa"; display: inline-block !important;
    font-size: 18px; text-transform: uppercase; font-weight: 700; white-space: nowrap;
  }

  /* D2 (07-11): head u JEDAN RED — "🛒 MOJA KORPA" (Figma Korpa 2 + Borisov PDF, slajd 3).
     Tema (cart-type2) daje .et_b-icon punu širinu (293px) pa je labela padala u drugi red:
     ikona GORE, tekst DOLJE. */
  .et_b_header-cart .et-mini-content-head { display: flex !important; justify-content: center !important; }
  .et_b_header-cart .et-mini-content-head a.cart-type2 {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: center !important; gap: 10px !important;
    width: auto !important;
  }
  .et_b_header-cart .et-mini-content-head a.cart-type2 .et_b-icon {
    width: auto !important; flex: 0 0 auto !important; position: static !important;
  }
  .et_b_header-cart .et-mini-content-head a.cart-type2 .et-svg,
  .et_b_header-cart .et-mini-content-head a.cart-type2 .et-svg svg {
    width: 26px !important; height: 26px !important;
  }
  .et_b_header-cart .et-mini-content-head a.cart-type2 .et-element-label {
    display: inline-block !important; width: auto !important; flex: 0 0 auto !important;
    margin: 0 !important; line-height: 1 !important;
  }
  /* brojčani badge na ikonici — Figma/PDF ga u mini-korpi NEMAJU (stavke se ionako vide) */
  .et_b_header-cart .et-mini-content-head .et-cart-quantity { display: none !important; }

  /* D3 (07-11): sivi footer "🚚 Besplatna dostava preko 60KM" na DNU mini-korpe —
     Boris ga ima u PRIJE, a u POSLIJE ga NEMA (Figma Korpa 2 isto nema). Suvišan je:
     ista poruka već stoji u pill-u ("BESPLATNA DOSTAVA IZNAD 60 KM") i u progress kartici.
     Panel završava sa "PLAĆANJE I DOSTAVA".
     Dolazi iz theme moda cart_footer_content_et-desktop -> gasimo SAMO na mobilnom
     (theme mod bi ugasio i desktop). */
  .et_b_header-cart .et-mini-content .woocommerce-mini-cart__footer { display: none !important; }
  /* stranica korpe — step naslov (čuva "1" badge u ::before) */
  .cart-checkout-nav a[data-step="1"] { font-size: 0 !important; }
  .cart-checkout-nav a[data-step="1"]::before { font-size: 19.5px !important; }
  .cart-checkout-nav a[data-step="1"]::after {
    /* BEZ vodećeg razmaka — razmak badge->tekst radi ::before margin-right (sekcija K/L) */
    content: "Moja korpa"; display: inline-block !important;
    font-size: 24.36px; text-transform: uppercase;
  }
}

/* ---------- G) Header korpe/checkouta po Figmi (Korpa 3 / Korpa 4) ----------
   XStore "advanced cart/checkout layout" renderuje samo [logo] + [koraci], pa mobilni
   gubi hamburger / korpu / pretragu. Child override
   templates/woocommerce/cart-checkout/header.php dodaje mobilni red
   .korpa50-mobile-header = [hamburger] [logo] [korpa] + [pretraga puna širina].
   Ovdje ga samo slažemo. Desktop se NE dira (mobilni red je >=769px display:none). */
@media (max-width: 768px) {
  /* zelena traka (Figma). padding-bottom:0 — inače ostane zelena crta ispod bijele
     "MOJA KORPA" trake. */
  .woocommerce-cart .header-main-wrapper, .woocommerce-checkout .header-main-wrapper,
  .woocommerce-cart .header-main, .woocommerce-checkout .header-main { background: #96B416 !important; }
  .woocommerce-cart .header-main, .woocommerce-checkout .header-main { padding-bottom: 0 !important; }

  /* parent logo kolona je native hidden-xs — ostaje skrivena; logo dolazi iz mobilnog reda
     (ranije smo je forsirali vidljivom => dupli logo) */
  .woocommerce-cart .header-main .et_column.hidden-xs,
  .woocommerce-checkout .header-main .et_column.hidden-xs { display: none !important; }

  /* red 1: hamburger | logo | korpa
     NB: XStore .et-wrap-columns ima negativne bočne margine da poništi padding kolona.
     Pošto kolonama gasimo padding, moramo ugasiti i tu marginu — inače sadržaj
     iscuri 15px van ekrana (hamburger/korpa odsječeni). */
  .korpa50-mobile-header { padding: 0 !important; }
  .korpa50-mobile-header .et-wrap-columns {
    flex-wrap: wrap !important; row-gap: 10px;
    margin: 0 !important; width: 100% !important; max-width: 100% !important;
    padding: 10px 15px 12px !important; box-sizing: border-box !important;
  }
  /* XStore-ova grid ispod 480px forsira .et_column na punu širinu -> hamburger/logo/korpa
     bi se poslagali jedno ispod drugog. Držimo ih u jednom redu.
     NB: sva pravila za kolone scope-ovana pod .korpa50-mobile-header da imaju ISTU
     specifičnost — inače generično .et_column pravilo pregazi pojedinačne kolone. */
  /* margin:0 — XStore svakoj .et_column daje margin-top:10px; sa dva reda to je 20px
     bespotrebne visine u headeru. */
  .korpa50-mobile-header .et_column { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .korpa50-mobile-header .korpa50-col-mobile_menu { flex: 0 0 auto !important; width: auto !important; }
  .korpa50-mobile-header .korpa50-col-cart { flex: 0 0 auto !important; width: auto !important; }
  /* Logo: EKSPLICITNA širina. NE koristiti max-width:100% + width:auto —
     u flexu je to začarani krug (širina slike zavisi od roditelja, roditelj od slike)
     pa se kolona skupi na 0 i logo NESTANE. Bilo je 0px i na korpi i na checkoutu.
     Red staje: 15 + 35 + 10 + 140 + 10 + 86 + 15 = 311 < 390. */
  .korpa50-mobile-header .korpa50-col-logo {
    flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
    display: flex !important; justify-content: center !important;
  }
  .korpa50-mobile-header .korpa50-col-logo .et_b_header-logo { justify-content: center !important; }
  .korpa50-mobile-header .korpa50-col-logo .et_b_header-logo img {
    width: 140px !important; height: auto !important;
    max-width: none !important; max-height: none !important; object-fit: contain;
  }
  /* hamburger: bijeli krug-outline kao na ostatku sajta */
  .korpa50-col-mobile_menu .et-toggle { color: #fff !important; }

  /* red 2: pretraga — bijela pilula preko pune širine (Figma) */
  .korpa50-mobile-header .korpa50-col-search { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
  .korpa50-col-search .et_b_header-search,
  .korpa50-col-search .et_b_header-search form,
  .korpa50-col-search .searchform { width: 100% !important; }
  .korpa50-col-search input[type="text"],
  .korpa50-col-search input[type="search"],
  .korpa50-col-search .searchform input.input-text {
    width: 100% !important; background: #fff !important; border: 0 !important;
    border-radius: 100px !important; height: 46px !important; box-shadow: none !important;
  }

  /* "① MOJA KORPA" red: bijela traka preko PUNE širine, sadržaj centriran (Figma).
     Steps red je zadnji .et-row-container u .header-main — skini mu container padding
     i negativnu marginu wrap-columnsa da bijelo ide od ivice do ivice (bez overflowa). */
  .woocommerce-cart .header-main > .et-row-container:last-child,
  .woocommerce-checkout .header-main > .et-row-container:last-child {
    max-width: none !important; padding: 0 !important;
  }
  .woocommerce-cart .header-main > .et-row-container:last-child .et-wrap-columns,
  .woocommerce-checkout .header-main > .et-row-container:last-child .et-wrap-columns {
    margin: 0 !important; width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important;
    /* tema drži min-height 100px (cart_checkout_main_header_height) + align-items:center,
       pa bijela traka "pluta" u sredini i ostane zelena crta iznad/ispod nje */
    min-height: 0 !important; align-items: stretch !important;
  }
  .woocommerce-cart .header-main .et_column.et_col-md-9,
  .woocommerce-checkout .header-main .et_column.et_col-md-9 {
    flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
    background: #fff !important; padding: 12px 15px !important; margin: 0 !important;
  }
  /* .cart-checkout-nav je display:block => justify-content je bio mrtav. */
  .woocommerce-cart .cart-checkout-nav, .woocommerce-checkout .cart-checkout-nav {
    display: flex !important; justify-content: center !important; align-items: center !important;
    text-align: center !important;
  }
  /* Figma nema underline ispod naslova koraka */
  .cart-checkout-nav a, .cart-checkout-nav a:hover,
  .cart-checkout-nav a::after { text-decoration: none !important; border-bottom: 0 !important; }

  /* header NE sticky na korpi/checkoutu (viši header bi prekrivao sadržaj) */
  .woocommerce-cart .site-header.sticky, .woocommerce-checkout .site-header.sticky,
  .woocommerce-cart .header-main-wrapper.sticky, .woocommerce-checkout .header-main-wrapper.sticky { position: static !important; }
  /* XStore fixed-header rezerviše padding-top:111px na .template-container — ukloni (header je sad static) */
  .woocommerce-cart .template-container, .woocommerce-checkout .template-container { padding-top: 0 !important; }
}

/* desktop netaknut: sakrij mobilne dodatke */
@media (min-width: 769px) {
  .korpa50-minicart-progress { display: none !important; }
  .korpa50-mobile-header { display: none !important; }
}
/* ---------- H) Figma parity, dorada 2026-07-11 ---------- */
@media (max-width: 768px) {

  /* H1. Mini-korpa: "X" po Figmi — tamni krug GORE LIJEVO, na overlayu izvan panela.
     Bonus: tako više fizički ne stoji preko header linka /korpa/ (Borisov #1 bug). */
  .et_b_header-cart .et-mini-content .et-close.full-right,
  .et_b_header-cart .et-mini-content .et-close {
    top: 14px !important; right: auto !important; left: -56px !important;
    width: 42px !important; height: 42px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: #1c1c1c !important; border-radius: 50% !important;
    color: #fff !important; opacity: 1 !important;
    z-index: 60 !important; pointer-events: auto !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  }
  .et_b_header-cart .et-mini-content .et-close svg { width: 20px !important; height: 20px !important; }
  .et_b_header-cart .et-mini-content .et-close svg * { stroke: #fff !important; fill: #fff !important; }
  /* panel mora dozvoliti da krug "izađe" van svoje lijeve ivice */
  .et_b_header-cart .et-mini-content { overflow: visible !important; }

  /* H2. Mini-korpa: progress kartica — Figma ima JEDAN okvir (pill + tijelo),
     ne okvir-u-okviru. Ubij unutrašnji border koji tema crta oko bara. */
  .korpa50-progress-body .et-cart-progress,
  .korpa50-progress-body .etheme_sales_booster_progress_bar_shortcode > div {
    border: 0 !important; padding: 0 !important; background: transparent !important;
  }
  /* tekst lijevo, kamion lijevo od teksta (Figma), ne centrirano */
  .korpa50-progress-body,
  .korpa50-progress-body .et-cart-progress,
  .korpa50-progress-body .et-cart-in-progress,
  .korpa50-progress-body .et-cart-progress-success { text-align: left !important; }
  .korpa50-progress-body .et-icon,
  .korpa50-progress-body i[class*="et_icon"] { margin-right: 8px; flex: 0 0 auto; }

  /* H3. Mini-korpa: naziv proizvoda smije u 2 reda (Figma), ne odsijecati na "...".
     Naslov je h4.product-title > a unutar .descr-box (tema mu daje ellipsis/nowrap). */
  .et_b_header-cart .et-mini-content h4.product-title,
  .et_b_header-cart .et-mini-content h4.product-title a,
  .et_b_header-cart .et-mini-content .descr-box a {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    display: block !important; visibility: visible !important;
    line-height: 1.35 !important; height: auto !important; max-height: none !important;
  }

  /* H3a. Jedinstven gutter 16px u mini-korpi (Boris: "školskih 12-16px lijevo i desno").
     Panel je imao padding 30px + lista još 14px = 44px, pa je tekst kolona ostajala 124px
     i naziv se lomio u 5 redova. */
  .et_b_header-cart .et-mini-content { padding-left: 16px !important; padding-right: 16px !important; }
  .et_b_header-cart .et-mini-content .woocommerce-mini-cart { padding-left: 0 !important; padding-right: 0 !important; }
  .korpa50-minicart-progress { margin-left: 0 !important; margin-right: 0 !important; }
  .et-content .woocommerce-mini-cart__total { margin-left: 0 !important; margin-right: 0 !important; }

  /* H3b. Mini-korpa stavka na 390px: [slika] [naziv + stepper + cijena] [kanta].
     Bez ovoga je desna kolona samo 143px, pa "× 45.31 KM" isteče van panela (x=393 > 390)
     i korisnik vidi samo "×". Suzi sliku i stepper, pusti tekst kolonu da uzme ostatak. */
  .et_b_header-cart .et-mini-content li.mini_cart_item {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 12px 34px 12px 0 !important; position: relative;
  }
  .et_b_header-cart .et-mini-content li.mini_cart_item a.product-mini-image {
    flex: 0 0 60px !important; width: 60px !important; margin: 0 !important;
  }
  .et_b_header-cart .et-mini-content li.mini_cart_item .product-item-right {
    flex: 1 1 auto !important; min-width: 0 !important; overflow: visible !important;
  }
  .et_b_header-cart .et-mini-content .widget_shopping_cart .quantity-wrapper { gap: 8px !important; }
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity {
    min-width: 96px !important; height: 32px !important;
  }
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity .minus,
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity .plus {
    width: 30px !important; min-width: 30px !important;
  }
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity input.qty { width: 34px !important; }
  .et_b_header-cart .et-mini-content .widget_shopping_cart .quantity-wrapper span.quantity {
    font-size: 13px !important; white-space: nowrap !important;
  }

  /* H3c. "UKUPNO:" verzalom (Figma) */
  .et-content .woocommerce-mini-cart__total,
  .et-content .woocommerce-mini-cart__total .small-h { text-transform: uppercase !important; }

  /* H4. "VIDI KORPU" — Figma ima TAMAN tekst na bijelom sa zelenim obrubom (ne zeleni tekst) */
  .et-content a.button.wc-forward:not(.btn-checkout),
  .woocommerce-mini-cart__buttons a.button:not(.btn-checkout):not(.checkout) {
    color: #1c1c1c !important;
  }

  /* H5. Progress kartica na KORPI i CHECKOUTU po Figmi: bijela, 1px obrub, radius 8px
     (bila je siva ploha bez obruba) */
  .woocommerce-cart .et-cart-progress,
  .korpa50-checkout-progress {
    background: #fff !important; border: 1px solid rgba(0,0,0,0.2) !important;
    border-radius: 8px !important; padding: 14px !important; margin-bottom: 16px !important;
  }
  .korpa50-checkout-progress .et-cart-progress { border: 0 !important; padding: 0 !important; }

  /* H6. "Isprazni korpu" -> "Isprazni čitavu korpu" (Figma) */
  .woocommerce-cart a.clear-cart { font-size: 0 !important; }
  .woocommerce-cart a.clear-cart::after {
    content: "Isprazni čitavu korpu"; display: inline-block;
    font-size: 14px; font-weight: 600; color: #E50C0C;
  }

  /* H7. Ikonice povjerenja (dostava / kartica / preuzimanje / sigurnost) — Figma ih ima
     iznad footera na checkoutu. Bile su sakrivene jer je widget nekad bio prazan. */
  .woocommerce-cart .sidebar-widget.widget_media_image { display: block !important; }
  .woocommerce-cart .sidebar-widget.widget_media_image .widget-title { display: none !important; }

  /* H8. Checkout "Vaša narudžba" po Figmi (Korpa 4): slika + stepper + kanta + "Ukupno".
     NB struktura je OBRNUTA od korpe: div.quantity > div.quantity-wrapper > [minus, input, plus]. */
  /* stepper: prirodna širina (bio fiksan 110px pa je "+" bio odsječen) */
  .woocommerce-checkout #order_review .cart_item div.quantity,
  .woocommerce-checkout #order_review .cart_item .quantity-wrapper {
    border: 0 !important; width: auto !important; overflow: visible !important;
  }
  /* stepper i cijena u istom redu s razmakom — inače stepper naleti preko "× 28.55 KM" */
  .woocommerce-checkout #order_review .cart_item .product-price-quantity {
    display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 10px;
  }
  .woocommerce-checkout #order_review .cart_item .product-price-quantity > div.quantity {
    flex: 0 0 auto !important; display: inline-flex !important; width: auto !important;
  }
  /* input je bio stisnut na 16px pa je stepper izgledao zgnječeno */
  .woocommerce-checkout #order_review .cart_item .quantity-wrapper input.qty,
  .woocommerce-checkout #order_review .cart_item .quantity-wrapper input[type="number"] {
    width: 34px !important; min-width: 34px !important; text-align: center !important;
  }
  /* Na 390px: slika 80px + stepper 110px + "×" + cijena 61px = 211px u koloni od 175px
     -> "× 45.31 KM" je bio ODSJEČEN (.product-name-info ima overflow:hidden).
     Suzi sliku i stepper i pusti koloni da diše. */
  .woocommerce-checkout #order_review .cart_item td.product-name img {
    width: 56px !important; max-width: 56px !important; height: auto !important;
  }
  .woocommerce-checkout #order_review .cart_item .product-name-info { overflow: visible !important; }
  .woocommerce-checkout #order_review .cart_item .quantity-wrapper .minus,
  .woocommerce-checkout #order_review .cart_item .quantity-wrapper .plus {
    width: 30px !important; min-width: 30px !important;
  }
  .woocommerce-checkout #order_review .cart_item .product-price-quantity { gap: 8px !important; }
  .woocommerce-checkout #order_review .cart_item .product-price-quantity .woocommerce-Price-amount,
  .woocommerce-checkout #order_review .cart_item .product-price-quantity .amount {
    font-size: 13px !important; white-space: nowrap !important;
  }

  /* kanta DESNO, vertikalno centrirana (Figma) — bila je ispod stavke, lijevo */
  .woocommerce-checkout #order_review .cart_item td.product-name { position: relative; padding-right: 42px; }
  .woocommerce-checkout #order_review .cart_item .product-remove {
    position: absolute !important; right: 4px; top: 50%; transform: translateY(-50%);
    margin: 0 !important; width: auto !important;
  }
  /* "Ukloni" -> crvena kanta (isto kao u korpi) */
  .woocommerce-checkout #order_review .product-remove a.remove-item {
    color: #e04141 !important; text-decoration: none !important;
    display: inline-flex; align-items: center; font-size: 0;
  }
  .woocommerce-checkout #order_review .product-remove a.remove-item::before {
    content: ""; width: 18px; height: 18px; display: inline-block;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e04141' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
  }

  /* "Subtotal:" -> "Ukupno:" (Figma). Checkout koristi .product-subtotal (bez .dt-hide). */
  .woocommerce-checkout #order_review .product-subtotal { font-size: 0 !important; }
  .woocommerce-checkout #order_review .product-subtotal > *,
  .woocommerce-checkout #order_review .product-subtotal .amount,
  .woocommerce-checkout #order_review .product-subtotal bdi { font-size: 14.8px !important; font-weight: 600; color: #717171; }
  .woocommerce-checkout #order_review .product-subtotal::before {
    content: "Ukupno: "; font-size: 14.8px; font-weight: 600; color: #717171;
  }

  /* H9. Header NE smije biti fiksiran na korpi/checkoutu — na mobilnom je ~224px visok
     i pojede trećinu ekrana. Tema fiksira .header-main (ne wrapper). */
  .woocommerce-cart .header-main, .woocommerce-checkout .header-main { position: static !important; }
}

/* =====================================================================
   J) PIXEL-PARITY sa Borisovim dizajnom (PDF slajd 3/4/5 + Figma Korpa 2/3/4)
   Uporedba 1:1 na 390px (render PDF-a @200dpi vs staging). 2026-07-11.
   ===================================================================== */
@media (max-width: 768px) {

  /* J1. "X" u mini-korpi = BIJEL krug sa TAMNIM X-om (imali smo obrnuto: crn krug, bijeli X).
         Provjereno na pikselima iz Borisovog PDF-a. */
  .et_b_header-cart .et-mini-content .et-close.full-right,
  .et_b_header-cart .et-mini-content .et-close {
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.28) !important;
  }
  .et_b_header-cart .et-mini-content .et-close svg * {
    stroke: #1c1c1c !important; fill: #1c1c1c !important;
  }

  /* J2. STEPPER = ZELENA PILULA sa BIJELIM PRAVOUGAONIKOM za broj (Boris, sve tri strane).
         PAŽNJA na gniježđenje — obrnuto je!
           mini-korpa:      .quantity-wrapper > div.quantity > [minus, input, plus]
           korpa/checkout:  div.quantity > .quantity-wrapper > [minus, input, plus]
         Zato pilula ide na div.quantity u mini-korpi, a na .quantity-wrapper na korpi/checkoutu.
         (Ranije je pilula bila na pogrešnom nivou: kontejner 28px, dugmad 46px -> odsječena.) */

  /* --- mini-korpa --- */
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity {
    display: inline-flex !important; align-items: stretch !important;
    height: 32px !important; width: auto !important;
    border: 0 !important; background: #96B416 !important;
    border-radius: 999px !important; overflow: hidden !important;
  }

  /* --- korpa + checkout --- */
  .woocommerce-cart .cart_item div.quantity,
  .woocommerce-checkout #order_review .cart_item div.quantity {
    display: inline-flex !important; align-items: center !important;
    background: transparent !important; border: 0 !important;
    border-radius: 0 !important; overflow: visible !important;
    height: auto !important; width: auto !important;
  }
  .woocommerce-cart .cart_item .quantity-wrapper,
  .woocommerce-checkout #order_review .cart_item .quantity-wrapper {
    display: inline-flex !important; align-items: stretch !important;
    height: 34px !important; width: auto !important;
    border: 0 !important; background: #96B416 !important;
    border-radius: 999px !important; overflow: hidden !important;
  }

  /* --- dugmad i input (sve tri strane) --- */
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity .minus,
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity .plus,
  .woocommerce-cart .cart_item .quantity-wrapper .minus,
  .woocommerce-cart .cart_item .quantity-wrapper .plus,
  .woocommerce-checkout #order_review .cart_item .quantity-wrapper .minus,
  .woocommerce-checkout #order_review .cart_item .quantity-wrapper .plus {
    align-self: stretch !important; height: auto !important;
    width: 32px !important; min-width: 32px !important;
    background: #96B416 !important; color: #fff !important;
    border: 0 !important; border-radius: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity input.qty,
  .woocommerce-cart .cart_item .quantity-wrapper input.qty,
  .woocommerce-checkout #order_review .cart_item .quantity-wrapper input.qty {
    align-self: stretch !important; height: auto !important;
    width: 36px !important; min-width: 36px !important;
    background: #fff !important; border: 0 !important; border-radius: 0 !important;
    text-align: center !important; font-weight: 600 !important; color: #222 !important;
    -moz-appearance: textfield !important;
  }

  /* J2b. Stavka mini-korpe: manja slika i naziv (Boris ima kompaktnije redove) */
  .et_b_header-cart .et-mini-content li.mini_cart_item a.product-mini-image {
    flex: 0 0 44px !important; width: 44px !important;
  }
  .et_b_header-cart .et-mini-content li.mini_cart_item h4.product-title,
  .et_b_header-cart .et-mini-content li.mini_cart_item h4.product-title a {
    font-size: 14px !important; line-height: 1.3 !important;
  }

  /* J3. "Isprazni čitavu korpu" — kanta se izgubila jer smo stavili font-size:0 na link,
         a tema ikonu crta SVG-om dimenzionisanim u em. Vrati joj eksplicitnu veličinu. */
  .woocommerce-cart a.clear-cart svg,
  .woocommerce-cart a.clear-cart .et-icon {
    width: 17px !important; height: 17px !important;
    margin-right: 8px; vertical-align: middle; color: #E50C0C !important;
  }
  .woocommerce-cart a.clear-cart svg * { stroke: #E50C0C !important; fill: none !important; }
  .woocommerce-cart a.clear-cart { display: flex !important; align-items: center; justify-content: center; gap: 2px; }

  /* J4. CHECKOUT totali po Figmi: boks sa obrubom, "SVE UKUPNO:" PA "Dostava:",
         bez duplog "Ukupno" reda (subtotal). */
  .woocommerce-checkout #order_review table.shop_table tfoot {
    border: 1px solid rgba(0,0,0,0.2) !important; border-radius: 8px !important;
    padding: 14px !important; margin-top: 14px; background: #fff;
  }
  /* NB: sekcija F ima .woocommerce-checkout #order_review table.shop_table tfoot tr
     { display:flex !important } (1 id + 2 klase + 3 elementa) — mora se nadjačati istim
     oblikom + klasom reda, inače "Ukupno" (subtotal) ostane vidljiv. */
  .woocommerce-checkout #order_review table.shop_table tfoot tr.cart-subtotal { display: none !important; }
  .woocommerce-checkout #order_review table.shop_table tfoot tr.order-total {
    order: 0 !important; border: 0 !important; padding-bottom: 12px !important;
  }
  .woocommerce-checkout #order_review table.shop_table tfoot tr.shipping {
    order: 1 !important; border-top: 1px solid #e5e5e5 !important; padding-top: 12px !important;
  }
  /* native "Imate kupon? Kliknite ovdje..." — Figma ga nema (kupon je dolje uz narudžbu) */
  .woocommerce-checkout .woocommerce-form-coupon-toggle,
  .woocommerce-checkout form.checkout_coupon { display: none !important; }
  /* "Sve ukupno" -> "SVE UKUPNO:" (Figma ima dvotačku i verzal) */
  .woocommerce-checkout #order_review tfoot tr.order-total th { font-size: 0 !important; }
  .woocommerce-checkout #order_review tfoot tr.order-total th::after {
    content: "SVE UKUPNO:"; font-size: 17px; font-weight: 400; color: #000; text-transform: uppercase;
  }
  /* "Dostava" -> "Dostava:" */
  .woocommerce-checkout #order_review tfoot tr.shipping th { font-size: 0 !important; }
  .woocommerce-checkout #order_review tfoot tr.shipping th::after {
    content: "Dostava:"; font-size: 16px; font-weight: 400; color: #000;
  }

  /* J5. Kupon + "Isprazni čitavu korpu" u pregledu narudžbe (functions.php ih ubacuje). */
  .korpa50-actions-row td { padding: 14px 0 0 !important; border: 0 !important; }
  .korpa50-coupon { display: flex; width: 100%; margin: 0 0 10px; }
  .korpa50-coupon input.input-text {
    flex: 1 1 auto; min-width: 0; height: 44px; border: 1px solid #d9d9d9; border-right: 0;
    border-radius: 8px 0 0 8px; padding: 0 14px; background: #fff;
  }
  .korpa50-coupon button.button {
    flex: 0 0 auto; height: 44px; padding: 0 20px; border: 0; border-radius: 0 8px 8px 0;
    background: #96B416 !important; color: #fff !important; font-weight: 700;
  }
  a.korpa50-clear-cart {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 44px; border: 1px solid #E50C0C; border-radius: 8px;
    color: #E50C0C !important; background: #fff; font-weight: 600; text-decoration: none !important;
  }
  a.korpa50-clear-cart::before {
    content: ""; width: 17px; height: 17px; display: inline-block;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E50C0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
  }

  /* J6. Ikonice povjerenja iznad footera na checkoutu (functions.php) */
  .korpa50-trust { text-align: center; padding: 18px 15px 6px; }
  .korpa50-trust img { max-width: 100%; height: auto; display: inline-block; }

  /* J7. Poklon-red na checkoutu se raspadao: dugi naziv i "× 0.00 KM" bježali su skroz
         lijevo (x=43) umjesto pored slike (x=109).
         Uzrok: slika je `float: left`, a .product-name-info je običan blok pa ga tekst
         OBAVIJA — linije duže od slike se prelome ISPOD nje. Obični artikli su bili pošteđeni
         samo zato što im je .product-price-quantity `display:flex` (flex = BFC, ne obavija float).
         Rješenje: .product-name-info -> `display: flow-root` = pravi BFC, staje PORED floata,
         a za razliku od `overflow:hidden` NE reže cijenu. */
  .woocommerce-checkout #order_review .cart_item .product-name-info {
    display: flow-root !important; overflow: visible !important;
  }
  .woocommerce-checkout #order_review .korpa50-gift-item .product-price-quantity {
    display: block !important;
  }
}

/* =====================================================================
   K) KOMPAKTNIJI RASPORED — mobilni ekran je mali, staje više sadržaja.
   (Goran, 19:45: "too much spacing between elements, margins etc.")
   Mjereno prije: panel padding 30px, head margin-bottom 30px, progress kartica 111px,
   slika 65px, stavka 104px, footer padding-top 30px.
   Poslije: ~120px manje fiksno + ~30px po stavci => ~1.5 stavka više na ekranu.
   MORA biti na kraju (poslije sekcije J) da nadjača ranije paddinge/margine.
   ===================================================================== */
@media (max-width: 768px) {

  /* --- MINI-KORPA --- */
  .et_b_header-cart .et-mini-content { padding-top: 14px !important; padding-bottom: 14px !important; }

  .et_b_header-cart .et-mini-content-head {
    margin: 0 0 12px !important; padding: 0 !important; min-height: 0 !important;
  }
  .et_b_header-cart .et-mini-content-head a.cart-type2 { padding: 0 !important; min-height: 0 !important; }

  /* progress kartica: 111px -> ~78px */
  .korpa50-minicart-progress { margin-bottom: 10px !important; }
  .korpa50-progress-pill { padding: 5px 10px !important; font-size: 10.5px !important; line-height: 1.35 !important; }
  .korpa50-progress-body { padding: 9px 12px !important; }
  .korpa50-progress-body .et-cart-progress,
  .korpa50-progress-body .et-cart-in-progress,
  .korpa50-progress-body .et-cart-progress-success { font-size: 13px !important; line-height: 1.35 !important; }
  .korpa50-minicart-progress progress.et_cart-progress-bar {
    height: 8px !important; min-height: 8px !important; margin-top: 6px !important;
  }

  /* stavka: 104px -> ~74px */
  .et_b_header-cart .et-mini-content li.mini_cart_item {
    padding: 9px 32px 9px 0 !important; gap: 9px !important;
  }
  .et_b_header-cart .et-mini-content li.mini_cart_item a.product-mini-image {
    flex: 0 0 44px !important; width: 44px !important;
  }
  .et_b_header-cart .et-mini-content li.mini_cart_item a.product-mini-image img {
    width: 44px !important; height: 44px !important; max-width: 44px !important; object-fit: contain;
  }
  .et_b_header-cart .et-mini-content li.mini_cart_item h4.product-title,
  .et_b_header-cart .et-mini-content li.mini_cart_item h4.product-title a {
    font-size: 13px !important; line-height: 1.28 !important; margin: 0 !important; padding-right: 0 !important;
  }
  .et_b_header-cart .et-mini-content li.mini_cart_item .descr-box { margin: 0 !important; }
  .et_b_header-cart .et-mini-content .widget_shopping_cart .quantity-wrapper {
    gap: 8px !important; margin: 5px 0 0 !important;
  }
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity {
    height: 28px !important; min-width: 0 !important;
  }
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity .minus,
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity .plus {
    width: 28px !important; min-width: 28px !important;
  }
  .et_b_header-cart .et-mini-content .widget_shopping_cart div.quantity input.qty {
    width: 32px !important; min-width: 32px !important; font-size: 13px !important;
  }
  /* cijena "× 45.31 KM" — NE scope-ovati na .quantity-wrapper: poklon nema stepper pa
     nema ni wrapper, i njegov "1 × 0.00 KM" je ostajao krupan. */
  .et_b_header-cart .et-mini-content li.mini_cart_item span.quantity {
    font-size: 12.5px !important; line-height: 1.3 !important;
  }
  /* "Discount: Free" badge kod poklona */
  .et_b_header-cart .et-mini-content li.mini_cart_item .descr-box .variation,
  .et_b_header-cart .et-mini-content li.mini_cart_item dl,
  .et_b_header-cart .et-mini-content li.mini_cart_item dt,
  .et_b_header-cart .et-mini-content li.mini_cart_item dd {
    margin: 2px 0 0 !important; font-size: 11.5px !important; line-height: 1.3 !important;
  }

  /* dno panela: 30px padding -> 12px, niži boks i dugmad */
  .et_b_header-cart .et-mini-content .woocommerce-mini-cart__footer-wrapper { padding-top: 12px !important; }
  .et-content .woocommerce-mini-cart__total {
    padding: 8px 12px !important; margin: 6px 0 8px !important;
  }
  .et-content .woocommerce-mini-cart__total .small-h { font-size: 15px !important; }
  .et-content a.button.wc-forward,
  .et-content a.btn-checkout {
    min-height: 0 !important; height: 40px !important; padding: 0 18px !important;
    line-height: 40px !important; margin-bottom: 8px !important;
  }
  .et-content a.btn-checkout::after { font-size: 13.5px !important; }

  /* --- HEADER KORPE/CHECKOUTA — izmjereno iz PDF-a (200 DPI, slajd 4 i 5) ---
     Ekran telefona u maketi = 390 CSS px; skala 1.469 (korpa) i 1.015 (naplata),
     obje daju ISTI rezultat:
         zeleni dio        124 px      bijela traka "① MOJA KORPA"   48 px
         search            47 x 354    logo                          145 px sirok
         badge koraka      29 px       ikonica korpe                 ~40 px
     Tema je davala 244px (kolone +10px margin, min-height 100px, korpa 68px).
     Prvi pokusaj kompakcije otisao je na 132px = 40px PREMALO — smanjeni su logo
     i search, a trebalo je samo pojesti padding i ikonicu korpe. Ovo je ispravka. */
  .korpa50-mobile-header .et-wrap-columns {
    /* 12 (pt) + 44 (logo) + 12 (gap) + 46 (search) + 8 (pb) = 122 ~= 124 */
    padding: 12px 18px 8px !important; row-gap: 12px !important;
    /* theme mod cart_checkout_main_header_height drzi min-height 100px */
    min-height: 0 !important;
  }
  .woocommerce-cart .header-main, .woocommerce-checkout .header-main { padding-top: 0 !important; }

  /* hamburger 35 -> 30 (maketa ~30) */
  .korpa50-mobile-header .korpa50-col-mobile_menu .et-toggle {
    width: 30px !important; height: 30px !important; font-size: 0 !important;
  }
  .korpa50-mobile-header .korpa50-col-mobile_menu .et-toggle svg,
  .korpa50-mobile-header .korpa50-col-mobile_menu .et-toggle .et-svg { width: 30px !important; height: 30px !important; }

  /* logo: maketa 145px sirok (omjer 300:91 => ~44px visok) */
  .korpa50-mobile-header .korpa50-col-logo .et_b_header-logo img {
    width: 145px !important; height: auto !important;
  }

  /* ikonica korpe 68 -> 40px (bijeli krug), SVG 24px, badge 16px */
  .korpa50-mobile-header .korpa50-col-cart .et_b_header-cart { height: 40px !important; }
  .korpa50-mobile-header .korpa50-col-cart .et_b_header-cart > a,
  .korpa50-mobile-header .korpa50-col-cart .et_b_header-cart .et-toggle {
    width: 40px !important; height: 40px !important; min-width: 0 !important;
    padding: 0 !important; margin: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .korpa50-mobile-header .korpa50-col-cart .et-svg,
  .korpa50-mobile-header .korpa50-col-cart .et-svg svg { width: 24px !important; height: 24px !important; }
  .korpa50-mobile-header .korpa50-col-cart .et-cart-quantity {
    width: 16px !important; height: 16px !important; min-width: 16px !important;
    font-size: 10px !important; line-height: 16px !important;
  }
  /* label "Korpa" ispod ikonice — u headeru ga ne treba (Boris nema) */
  .korpa50-mobile-header .korpa50-col-cart .et-element-label { display: none !important; }

  /* search: maketa 47px visok, 354px sirok (= 390 - 2x18 padding) */
  .korpa50-mobile-header .korpa50-col-search .et_b_header-search,
  .korpa50-mobile-header .korpa50-col-search form,
  .korpa50-mobile-header .korpa50-col-search .searchform {
    height: 46px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  }
  .korpa50-mobile-header .korpa50-col-search input[type="text"],
  .korpa50-mobile-header .korpa50-col-search input[type="search"],
  .korpa50-mobile-header .korpa50-col-search .searchform input.input-text {
    height: 46px !important; font-size: 14px !important; padding: 0 16px 0 42px !important;
  }
  .korpa50-mobile-header .korpa50-col-search .searchform button,
  .korpa50-mobile-header .korpa50-col-search .searchform .et-icon { top: 50% !important; }

  /* bijela traka "① MOJA KORPA": 48px = 10 + badge 28 + 10. Font 22px (Dosis je uzak:
     maketa ima cap-height 17.7px i sirinu teksta 125px -> ~22px). */
  .woocommerce-cart .header-main .et_column.et_col-md-9,
  .woocommerce-checkout .header-main .et_column.et_col-md-9 {
    padding: 10px 15px !important;
  }
  .cart-checkout-nav a[data-step]::after { font-size: 22px !important; }
  .cart-checkout-nav a[data-step]::before {
    font-size: 16px !important; width: 28px !important; height: 28px !important; line-height: 28px !important;
    margin-right: 11px !important;
  }
  .cart-checkout-nav a[data-step] { line-height: 1.28 !important; }
  /* korak 1 ("MOJA KORPA") ima font-size:0 jer mu se labela crta ::after-om (sekcija D).
     Ostali koraci (npr. "② DOSTAVA I PLAĆANJE") crtaju SVOJ tekst — bez ovoga ostaju na
     temi (veći font) pa je checkout header bio 13px viši od korpinog. */
  .cart-checkout-nav a[data-step]:not([data-step="1"]) {
    font-size: 22px !important; line-height: 1.28 !important;
  }

  /* --- KORPA + CHECKOUT: kompaktniji redovi stavki --- */
  .woocommerce-cart .cart_item td.product-details,
  .woocommerce-cart .cart_item td { padding-top: 10px !important; padding-bottom: 10px !important; }
  .woocommerce-cart .cart_item .product-thumbnail img,
  .woocommerce-checkout #order_review .cart_item td.product-name img {
    width: 48px !important; max-width: 48px !important; height: auto !important;
  }
  .woocommerce-cart .cart_item .product-title,
  .woocommerce-cart .cart_item .product-title a,
  .woocommerce-checkout #order_review .cart_item .product-name a {
    font-size: 13.5px !important; line-height: 1.28 !important;
  }
  .woocommerce-cart .cart_item .quantity-wrapper,
  .woocommerce-checkout #order_review .cart_item .quantity-wrapper { height: 30px !important; }
  .woocommerce-cart .cart_item .quantity-wrapper .minus,
  .woocommerce-cart .cart_item .quantity-wrapper .plus,
  .woocommerce-checkout #order_review .cart_item .quantity-wrapper .minus,
  .woocommerce-checkout #order_review .cart_item .quantity-wrapper .plus {
    width: 28px !important; min-width: 28px !important;
  }
  .woocommerce-cart .cart_item .quantity-wrapper input.qty,
  .woocommerce-checkout #order_review .cart_item .quantity-wrapper input.qty {
    width: 32px !important; min-width: 32px !important; font-size: 13px !important;
  }
  .woocommerce-cart .product-subtotal.dt-hide::before,
  .woocommerce-cart .product-subtotal.dt-hide > span,
  .woocommerce-cart .product-subtotal.dt-hide .amount,
  .woocommerce-checkout #order_review .product-subtotal::before,
  .woocommerce-checkout #order_review .product-subtotal > *,
  .woocommerce-checkout #order_review .product-subtotal .amount { font-size: 13px !important; }
}

/* ---------- I) SIGURNOST: poklon (gratis) NE SMIJE imati stepper ----------
   MORA biti NA KRAJU bloka: pravilo iz sekcije H
   (.woocommerce-checkout #order_review .cart_item .product-price-quantity > div.quantity
    { display: inline-flex !important })
   ima ISTU specifičnost (1 id + 4 klase + 1 element), pa odlučuje REDOSLIJED U FAJLU.
   Klasu .korpa50-gift-item dodaje functions.php (korpa50_is_gift_cart_item).
   Server guard je u functions.php — ovo je samo vizuelni sloj. */
@media (max-width: 768px) {
  .et_b_header-cart .et-mini-content li.korpa50-gift-item div.quantity,
  .et_b_header-cart .et-mini-content li.korpa50-gift-item .quantity-wrapper,
  .woocommerce-checkout #order_review .korpa50-gift-item .product-price-quantity > div.quantity,
  .woocommerce-checkout #order_review .korpa50-gift-item div.quantity,
  .woocommerce-checkout #order_review .korpa50-gift-item .quantity-wrapper { display: none !important; }
}

/* ---------- L) ISPRAVKE PO PIKSELNOM POREĐENJU SA PDF-om (200 DPI) ----------
   Maketa je normalizovana na 390 CSS px (skala 1.469 korpa / 1.015 naplata /
   1.467 mini-korpa) i mjerena istim kodom kao screenshot staginga.
   MORA biti na KRAJU fajla — gazi sekcije G/H/J/K. */
@media (max-width: 768px) {

  /* L1. Ikonica korpe u headeru: maketa ima krug ~49px (mjereno), imao sam 40. */
  .korpa50-mobile-header .korpa50-col-cart .et_b_header-cart { height: 48px !important; }
  .korpa50-mobile-header .korpa50-col-cart .et_b_header-cart > a,
  .korpa50-mobile-header .korpa50-col-cart .et_b_header-cart .et-toggle {
    width: 48px !important; height: 48px !important;
  }
  .korpa50-mobile-header .korpa50-col-cart .et-svg,
  .korpa50-mobile-header .korpa50-col-cart .et-svg svg { width: 28px !important; height: 28px !important; }
  .korpa50-mobile-header .korpa50-col-cart .et-cart-quantity {
    width: 20px !important; height: 20px !important; min-width: 20px !important;
    font-size: 11px !important; line-height: 20px !important;
  }

  /* L2. "① MOJA KORPA": razmak badge->tekst bio 33px, maketa ima 11px.
     Krivac = tema daje ::after margin: 0 20px (uz to je i content imao vodeći razmak). */
  .cart-checkout-nav a[data-step]::after {
    margin-left: 0 !important; margin-right: 0 !important;
  }

  /* L3. Search u headeru: maketa = SIVA lupa + tamniji, veći placeholder.
     Pretraga je FiboSearch (dgwt-wcas-*), a lupa je POPUNJENA putanja (fill: #111),
     ne stroke — zato je ranije ostajala crna koliko god sam mijenjao `color`. */
  .korpa50-mobile-header .korpa50-col-search input[type="text"],
  .korpa50-mobile-header .korpa50-col-search input[type="search"],
  .korpa50-mobile-header .korpa50-col-search .searchform input.input-text {
    font-size: 16px !important; color: #4a4a4a !important;
  }
  .korpa50-mobile-header .korpa50-col-search input::placeholder { color: #6f6f6f !important; opacity: 1 !important; }
  .korpa50-mobile-header .korpa50-col-search .dgwt-wcas-ico-magnifier,
  .korpa50-mobile-header .korpa50-col-search .dgwt-wcas-ico-magnifier path,
  .korpa50-mobile-header .korpa50-col-search .dgwt-wcas-search-submit svg,
  .korpa50-mobile-header .korpa50-col-search .dgwt-wcas-search-submit svg path {
    fill: #9a9a9a !important;
  }
  .korpa50-mobile-header .korpa50-col-search .dgwt-wcas-search-submit {
    background: transparent !important; box-shadow: none !important;
  }

  /* L3b. Search traka: maketa je x 18..372 (353px), moja je bila x 22..367 (346px).
     Omotač FiboSearcha jede po 4px sa svake strane -> vratimo ih negativnom marginom. */
  .korpa50-mobile-header .korpa50-col-search {
    margin-left: -4px !important; margin-right: -4px !important;
  }

  /* L4. "Discount: [Free]" plavi čip na POKLON stavci — nema ga u maketi.
     Dolazi iz plugina "Discount Rules for WooCommerce" (awdr), kao lažni atribut
     proizvoda: <dt class="variation-Discount">Discount:</dt><dd>…Free…</dd>.
     Gasimo SAMO na poklonu — na sniženim proizvodima je legitiman podatak. */
  .korpa50-gift-item dt.variation-Discount,
  .korpa50-gift-item dd.variation-Discount,
  .korpa50-gift-item .awdr_free_product_text { display: none !important; }

  /* L5. "Ukupno: 26.82" — u maketi je iznos BOLD i taman, labela ostaje siva. */
  .woocommerce-cart .cart_item .product-subtotal .amount,
  .woocommerce-cart .cart_item .product-subtotal bdi,
  .woocommerce-checkout #order_review .cart_item .product-subtotal .amount,
  .woocommerce-checkout #order_review .cart_item .product-subtotal bdi {
    font-weight: 700 !important; color: #1a1a1a !important;
  }

  /* L6. Fiksno dugme na korpi ("NASTAVI NA PLAĆANJE"): maketa ima VERZAL, krupnije/deblje.
     NB: stvarna klasa je .checkout-button (a ne .btn-checkout). */
  .woocommerce-cart a.checkout-button,
  .woocommerce-cart .checkout-button.button.alt {
    text-transform: uppercase !important; font-size: 16px !important;
    font-weight: 700 !important; letter-spacing: .3px !important;
    padding-top: 15px !important; padding-bottom: 15px !important;
  }

  /* L7. Dugme "Naručite" na checkoutu — maketa: verzal, krupnije (boja je već #96B416). */
  .woocommerce-checkout #place_order,
  .woocommerce-checkout button[name="woocommerce_checkout_place_order"] {
    text-transform: uppercase !important; font-size: 16px !important;
    font-weight: 700 !important; letter-spacing: .3px !important;
    padding-top: 15px !important; padding-bottom: 15px !important;
  }

  /* L7b. Poklon na CHECKOUTU je pokazivao "× 0.00 KM" — bez količine.
     Uzrok: količinu ispisuje sam stepper, a njega na poklonu (namjerno) gasimo
     (sekcija I, sigurnost). Vraćamo "1" kao ::before, dakle BEZ <input> polja —
     korisnik nema šta ni da mijenja. Server guard u functions.php ostaje. */
  .woocommerce-checkout #order_review .korpa50-gift-item .product-price-quantity::before {
    content: "1"; display: inline-block; margin-right: 4px;
    font-size: 13px; color: #1a1a1a; font-weight: 600;
  }

  /* L8. Ikonica kamiona u traci "još X KM do besplatne dostave":
     ikona je FONT (.et-delivery) i stajala je na 13px — maketa ima ~26px. */
  .et-cart-in-progress .et_b-icon,
  .et-cart-progress-success .et_b-icon,
  .korpa50-minicart-progress .et-cart-in-progress .et_b-icon {
    font-size: 26px !important; line-height: 1 !important; margin-right: 10px !important;
  }

  /* L9. Zatamnjenje iza mini-korpe: bilo rgba(24,24,24,.3), maketa ima ~rgba(0,0,0,.55).
     NIJE poseban <div> (zato ga dugo nisam našao) — XStore ga crta kao
     ::before PSEUDO-ELEMENT na .et_b_header-cart (position:fixed, 100vw).
     Mijenjamo SAMO boju; vidljivost i dalje kontroliše tema. */
  .et_b_header-cart::before { background: rgba(0, 0, 0, .55) !important; }
}

/* ===================== /KORPA REDIZAJN #50 ===================== */