.elementor-kit-6{--e-global-color-primary:#01B4B4;--e-global-color-secondary:#044545;--e-global-color-text:#454952;--e-global-color-accent:#F47944;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:0px;--e-global-typography-secondary-font-family:"Outfit";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.15em;--e-global-typography-secondary-letter-spacing:0px;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.55em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Outfit";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:0px;color:#454952;font-family:"Outfit", Sans-serif;font-size:16px;line-height:1.6em;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#0C7777;}.elementor-kit-6 a:hover{color:#01B4B4;}.elementor-kit-6 h1{color:#044545;font-family:"Outfit", Sans-serif;font-weight:700;}.elementor-kit-6 h2{color:#044545;font-family:"Outfit", Sans-serif;font-weight:700;}.elementor-kit-6 h3{color:#044545;font-family:"Outfit", Sans-serif;font-weight:700;}.elementor-kit-6 h4{color:#044545;font-family:"Outfit", Sans-serif;font-weight:700;}.elementor-kit-6 h5{color:#044545;font-family:"Outfit", Sans-serif;font-weight:700;}.elementor-kit-6 h6{color:#044545;font-family:"Outfit", Sans-serif;font-weight:700;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --BrandDeep:#044545; --BrandTeal:#01B4B4; --BrandTealDark:#0C7777; --BrandMint:#CAF6F6; --BrandMintSoft:#7ADFDF; --BrandFooterInk:#8FCFCF; --PageGround:#EEF2F2; --SurfaceCard:#FCFFFE; --SurfaceTint:#F3F9F9; --SurfaceImage:#F7FBFB; --SurfaceCatIcon:#F0FAFA; --BorderLine:#E6EFEF; --BorderSoft:#EDF4F4; --BorderField:#D8EBEB; --InkBody:#454952; --InkStrong:#2F3639; --InkMuted:#5A6468; --InkFaint:#8A9599; --InkStrike:#A4ADB1; --AccentYellow:#FBC932; --AccentOrange:#F47944; --BrandFont:Outfit; --RadiusCard:20px; --RadiusPanel:24px; --RadiusSection:28px; --RadiusPill:999px; }
/* Start custom CSS *//* =========================================================================
   apoteka.rs — GLOBAL CSS
   Elementor → hamburger menu → Site Settings → Custom CSS
   Applies to every page, every template. Edit freely.

   Colours/fonts/radii are Elementor VARIABLES — change them in
   Site Settings → Variables, not here. Reference them as var(--Name):

     --BrandDeep #044545   --BrandTeal #01B4B4   --BrandTealDark #0C7777
     --BrandMint #CAF6F6   --BrandMintSoft #7ADFDF
     --SurfaceCard #FCFFFE --SurfaceTint #F3F9F9 --SurfaceImage #F7FBFB
     --BorderLine #E6EFEF  --BorderField #D8EBEB
     --InkBody #454952     --InkStrong #2F3639  --InkMuted #5A6468
     --InkFaint #8A9599    --InkStrike #A4ADB1
     --AccentYellow #FBC932 --AccentOrange #F47944
     --BrandFont Outfit
     --RadiusCard 20px --RadiusPanel 24px --RadiusSection 28px --RadiusPill 999px
   ========================================================================= */

/* 1. Page rhythm ---------------------------------------------------------- */
body { -webkit-font-smoothing: antialiased; }

/* 2. Keyboard focus — never the default blue ring ------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--BrandTeal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 3. Text selection ------------------------------------------------------- */
::selection { background: var(--BrandMint); color: var(--BrandDeep); }

/* 4. WooCommerce — brand the stock buttons and prices --------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--BrandTeal);
  color: #fff;
  border-radius: var(--RadiusPill);
  padding: 12px 26px;
  font-family: var(--BrandFont);
  font-weight: 600;
  transition: background .18s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--BrandTealDark);
  color: #fff;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--BrandDeep);
}
.woocommerce .price,
.woocommerce span.amount { color: var(--BrandDeep); font-weight: 700; }
.woocommerce del span.amount { color: var(--InkStrike); font-weight: 400; }

/* WooCommerce only adds the .woocommerce body class on ITS OWN pages (shop,
   category, product, cart...). Product cards also appear in loops on search
   and other templates, where the rules above never match - so style the
   button and price classes directly as well. */
a.button.add_to_cart_button,
a.button.product_type_simple,
a.button.product_type_variable,
.elementor-widget-woocommerce-product-add-to-cart a.button {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--BrandTeal); color: #fff;
  border: 0; border-radius: var(--RadiusPill);
  padding: 12px 26px;
  font-family: var(--BrandFont); font-size: 14px; font-weight: 600;
  line-height: 1.2; text-decoration: none;
  transition: background .18s ease;
}
a.button.add_to_cart_button:hover,
a.button.product_type_simple:hover,
a.button.product_type_variable:hover,
.elementor-widget-woocommerce-product-add-to-cart a.button:hover {
  background: var(--BrandTealDark); color: #fff;
}
/* the "View cart" link WooCommerce injects after an AJAX add */
a.added_to_cart {
  display: inline-block; margin-top: 8px;
  font-family: var(--BrandFont); font-size: 13px; font-weight: 600;
  color: var(--BrandTealDark); text-decoration: none;
}
a.added_to_cart:hover { color: var(--BrandTeal); }

/* prices, same reasoning */
.price, span.woocommerce-Price-amount { color: var(--BrandDeep); font-weight: 700; }
del span.woocommerce-Price-amount,
del .woocommerce-Price-amount { color: var(--InkStrike); font-weight: 400; }
del { text-decoration: line-through; }
ins { text-decoration: none; }

/* 5. WooCommerce notices -------------------------------------------------- */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--BrandTeal);
  background: var(--SurfaceTint);
  border-radius: var(--RadiusCard);
}
.woocommerce-error { border-top-color: var(--AccentOrange); border-radius: var(--RadiusCard); }

/* 6. Your overrides below ------------------------------------------------- */
/* Add site-wide tweaks here. Page-only CSS belongs in that page's
   Page Settings → Advanced → Custom CSS instead. */

/* =========================================================================
   7. HEADER SEARCH  (Elementor "Search" widget, .e-search)
   Colours and the pill live on the WIDGET itself (edit it in Elementor:
   Header template → Search → Style). Only layout is handled here.
   ========================================================================= */
.s-hdr-search .e-search,
.s-hdr-search .e-search-form { width: 100%; }
/* the <label> is screen-reader-only - it must not take layout space */
.s-hdr-search .e-search-label { flex: 0 0 auto; width: 0; min-width: 0; margin: 0; overflow: hidden; }
/* this wrapper is what actually holds the input, so this is what grows */
.s-hdr-search .e-search-input-wrapper { flex: 1 1 auto; min-width: 0; display: flex; }
.s-hdr-search .e-search-input { width: 100%; }
.s-hdr-search .e-search-input::-webkit-search-cancel-button { display: none; }
/* live-results dropdown */
.e-search-results { box-shadow: 0 18px 44px -28px rgba(4,69,69,.55); overflow: hidden; }

/* =========================================================================
   8. ARCHIVE SIDEBAR FILTERS
   ========================================================================= */
.woocommerce-widget-layered-nav-list,
.widget_product_categories ul,
.widget_brand_nav ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-widget-layered-nav-list li,
.widget_product_categories li,
.widget_brand_nav li { padding: 5px 0; font-size: 14px; }
.woocommerce-widget-layered-nav-list a,
.widget_product_categories a,
.widget_brand_nav a { color: var(--InkBody); }
.woocommerce-widget-layered-nav-list a:hover,
.widget_product_categories a:hover,
.widget_brand_nav a:hover { color: var(--BrandTeal); }
.woocommerce-widget-layered-nav-list li.chosen a { color: var(--BrandTeal); font-weight: 600; }

/* --- price filter: range on one line, full-width button underneath ------- */
/* the .woocommerce prefix is needed to out-specify WooCommerce's own purple */
.woocommerce .widget_price_filter .price_slider_wrapper { padding-top: 4px; }

.woocommerce .widget_price_filter .price_slider_amount {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  margin-top: 16px;
}
.woocommerce .widget_price_filter .price_slider_amount .price_label {
  order: -1;                      /* range sits ABOVE the button */
  width: 100%; margin: 0;
  text-align: left; white-space: nowrap;   /* keep it on one row */
  font-family: var(--BrandFont); font-size: 14px; font-weight: 600;
  color: var(--BrandDeep);
}
.woocommerce .widget_price_filter .price_slider_amount .price_label .from,
.woocommerce .widget_price_filter .price_slider_amount .price_label .to {
  font-weight: 700; color: var(--BrandDeep);
}
.woocommerce .widget_price_filter .price_slider_amount button.button {
  order: 2; width: 100%; float: none; margin: 0;
  background: var(--BrandTeal); color: #fff;
  border-radius: var(--RadiusPill); padding: 11px 22px;
  font-family: var(--BrandFont); font-size: 14px; font-weight: 600;
}
.woocommerce .widget_price_filter .price_slider_amount button.button:hover {
  background: var(--BrandTealDark);
}
.woocommerce .widget_price_filter .price_slider_amount .clear { display: none; }

/* slider track, range and handles in brand colours */
.woocommerce .widget_price_filter .ui-slider {
  height: 4px; border-radius: 999px; background: var(--BorderField);
  border: 0; margin: 8px 8px 0;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
  background: var(--BrandTeal); border-radius: 999px;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  width: 18px; height: 18px; top: -7px; margin-left: -9px;
  background: var(--BrandDeep); border: 3px solid #fff;
  border-radius: 999px; box-shadow: 0 2px 8px -2px rgba(4,69,69,.6);
  cursor: grab;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:active { cursor: grabbing; }
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:focus-visible {
  outline: 2px solid var(--BrandTeal); outline-offset: 2px;
}

/* active filters: chips, hidden entirely when nothing is chosen */
.widget_layered_nav_filters ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; }
.widget_layered_nav_filters ul li { padding: 0; }
.widget_layered_nav_filters ul li a {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 5px;
  max-width: 100%;                          /* never overflow a narrow sidebar */
  background: var(--BrandMint); color: var(--BrandDeep);
  border-radius: 14px; padding: 5px 10px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
}
.widget_layered_nav_filters ul li a::after {
  content: "×"; font-size: 14px; font-weight: 400; line-height: 1;
  opacity: .6; margin-inline-start: 1px;
}
.widget_layered_nav_filters ul li a:hover::after { opacity: 1; }
.widget_layered_nav_filters ul li a:hover { background: var(--BrandMintSoft); }

/* hide the "Izabrani filteri" panel entirely until a filter is actually chosen */
.elementor-element-fActiveBox:not(:has(.widget_layered_nav_filters li)) { display: none; }

/* =========================================================================
   9. SINGLE PRODUCT
   ========================================================================= */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding-left: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--SurfaceTint); border-color: var(--BorderLine); border-radius: 999px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--BrandMint); }
.woocommerce div.product form.cart div.quantity input.qty {
  border: 1px solid var(--BorderField); border-radius: var(--RadiusPill);
  padding: 10px; font-family: var(--BrandFont);
}

/* =========================================================================
   10. MY ACCOUNT  (/moj-nalog/)
   WooCommerce prints this from a shortcode, so it is styled here rather
   than in a template. Covers both states: logged out (login + register)
   and logged in (nav sidebar + content).
   ========================================================================= */

/* page shell - the shortcode output has no width or padding of its own */
body.woocommerce-account .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding-block: 40px 64px; padding-inline: 24px;
}

.woocommerce-account .woocommerce {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px;
}
.woocommerce-account .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce > .u-columns { width: 100%; }

/* --- logged in: nav sidebar ---------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  flex: 0 0 260px; max-width: 260px;
  background: var(--SurfaceCard);
  border: 1px solid var(--BorderLine);
  border-radius: var(--RadiusCard);
  padding: 14px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 11px 16px; margin-bottom: 2px;
  border-radius: var(--RadiusPill);
  font-family: var(--BrandFont); font-size: 15px; font-weight: 500;
  color: var(--InkBody); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--SurfaceTint); color: var(--BrandTealDark);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--BrandMint); color: var(--BrandDeep); font-weight: 600;
}
/* log out sits apart from the rest */
.woocommerce-account .woocommerce-MyAccount-navigation li--woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--BorderLine);
}

/* --- logged in: content card --------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1 1 320px; min-width: 0;
  background: var(--SurfaceCard);
  border: 1px solid var(--BorderLine);
  border-radius: var(--RadiusCard);
  padding: 28px 30px 32px;
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--BrandTealDark); }
.woocommerce-account .woocommerce-MyAccount-content a:hover { color: var(--BrandTeal); }

/* --- logged out: login + register ---------------------------------------- */
.woocommerce-account .u-columns.col2-set {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%;
}
/* WooCommerce's clearfix pseudo-elements become grid/flex items and steal
   the first cell - kill them on the containers we lay out ourselves */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after { content: none; display: none; }
.woocommerce-account .u-columns.col2-set .u-column1,
.woocommerce-account .u-columns.col2-set .u-column2 {
  width: 100%; float: none; margin: 0;
  background: var(--SurfaceCard);
  border: 1px solid var(--BorderLine);
  border-radius: var(--RadiusCard);
  padding: 28px 30px 32px;
}
.woocommerce-account .u-columns h2 {
  margin: 0 0 18px; font-size: 22px; font-weight: 700; color: var(--BrandDeep);
}
.woocommerce-account form.login,
.woocommerce-account form.register { border: 0; padding: 0; margin: 0; border-radius: 0; }

/* --- forms (shared by account, cart, checkout) --------------------------- */
.woocommerce form .form-row { padding: 0; margin: 0 0 16px; }
.woocommerce form .form-row label {
  display: block; margin-bottom: 6px;
  font-family: var(--BrandFont); font-size: 13px; font-weight: 600;
  color: var(--InkMuted);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"] {
  width: 100%;
  background: var(--SurfaceTint);
  border: 1px solid var(--BorderField);
  border-radius: 14px;
  padding: 12px 16px;
  font-family: var(--BrandFont); font-size: 15px; color: var(--InkBody);
  transition: border-color .15s ease, background .15s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  background: #fff; border-color: var(--BrandTeal); outline: none;
}
.woocommerce form .form-row .required { color: var(--AccentOrange); text-decoration: none; }
.woocommerce-form-login__rememberme { font-size: 14px; color: var(--InkMuted); }
.woocommerce-LostPassword a { font-size: 14px; color: var(--BrandTealDark); }

/* --- tables: orders, downloads ------------------------------------------- */
.woocommerce table.shop_table {
  border: 1px solid var(--BorderLine); border-radius: var(--RadiusCard);
  border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.woocommerce table.shop_table thead th {
  background: var(--SurfaceTint); color: var(--BrandDeep);
  font-family: var(--BrandFont); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 14px 16px; border: 0;
}
.woocommerce table.shop_table td { padding: 14px 16px; border-top: 1px solid var(--BorderLine); }

/* --- empty states -------------------------------------------------------- */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  background: var(--SurfaceTint); border-top: 3px solid var(--BrandTeal);
  border-radius: var(--RadiusCard); padding: 18px 22px;
  font-family: var(--BrandFont); color: var(--InkBody);
}
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before { display: none; }
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button { margin-left: auto; }

/* --- mobile --------------------------------------------------------------- */
@media (max-width: 767px) {
  body.woocommerce-account .site-main { padding-block: 24px 48px; padding-inline: 16px; }
  .woocommerce-account .woocommerce { gap: 16px; }
  .woocommerce-account .woocommerce-MyAccount-navigation { flex: 1 1 100%; max-width: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a { padding: 9px 14px; font-size: 14px; }
  .woocommerce-account .woocommerce-MyAccount-navigation li--woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0; padding-top: 0; border-top: 0;
  }
  .woocommerce-account .woocommerce-MyAccount-content { padding: 20px 18px 24px; }
  .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; }
  .woocommerce-account .u-columns.col2-set .u-column1,
  .woocommerce-account .u-columns.col2-set .u-column2 { padding: 20px 18px 24px; }
}

/* =========================================================================
   11. SIDE CART  (Elementor Menu Cart, "side-cart" type)
   Product rows are a 3-column grid: image | name + price | remove.
   ========================================================================= */
.elementor-menu-cart__main {
  padding: 56px 22px 24px;                 /* room for the close button */
  background: var(--SurfaceCard);
}
.elementor-menu-cart__close-button {
  top: 16px; right: 18px;
  width: 32px; height: 32px;
  border-radius: var(--RadiusPill);
  background: var(--SurfaceTint);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: background .15s ease;
}
.elementor-menu-cart__close-button:hover { background: var(--BrandMint); }

/* --- product rows --------------------------------------------------------- */
.elementor-menu-cart__products { padding: 0; }
.elementor-menu-cart__product {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 28px;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  margin: 0;
  border-bottom: 1px solid var(--BorderLine);
}
.elementor-menu-cart__product-image {
  width: 64px; height: 64px;
  border: 1px solid var(--BorderLine);
  border-radius: 14px;
  background: var(--SurfaceImage);
  overflow: hidden;
}
.elementor-menu-cart__product-image img { width: 100%; height: 100%; object-fit: contain; display: block; }

.elementor-menu-cart__product-name {
  font-family: var(--BrandFont); font-size: 14px; font-weight: 500;
  line-height: 1.35; color: var(--InkStrong);
  margin: 0; padding: 0; text-align: left;
}
.elementor-menu-cart__product-name a { color: var(--InkStrong); text-decoration: none; }
.elementor-menu-cart__product-name a:hover { color: var(--BrandTealDark); }

.elementor-menu-cart__product-price {
  grid-column: 2;                          /* sits under the name, not beside it */
  margin-top: 4px; padding: 0; text-align: left;
  font-family: var(--BrandFont); font-size: 13px; color: var(--InkMuted);
}
.elementor-menu-cart__product-price .woocommerce-Price-amount {
  color: var(--BrandDeep); font-weight: 700;
}

/* Elementor draws the x with ::before/::after on the wrapper and overlays an
   invisible <a> as the click target - so only reserve the column here and set
   the colour/size on the widget itself (Header template -> Menu Cart -> Style) */
.elementor-menu-cart__product-remove { grid-column: 3; grid-row: 1; }

/* --- subtotal ------------------------------------------------------------- */
.elementor-menu-cart__subtotal {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 0;
  border-top: 0;
  font-family: var(--BrandFont); font-size: 15px; font-weight: 600;
  color: var(--BrandDeep); text-align: left;
}
.elementor-menu-cart__subtotal .woocommerce-Price-amount {
  font-size: 20px; font-weight: 700; color: var(--BrandDeep);
}

/* --- footer buttons ------------------------------------------------------- */
.elementor-menu-cart__footer-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding-top: 16px; border-top: 1px solid var(--BorderLine);
}
.elementor-menu-cart__footer-buttons .elementor-button {
  width: 100%; margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 10px;
  border-radius: var(--RadiusPill);
  font-family: var(--BrandFont); font-size: 14px; font-weight: 600;
  white-space: nowrap;                      /* stop "Pregled korpe" wrapping */
  transition: background .18s ease;
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
  background: var(--BrandMint); color: var(--BrandDeep);
  font-weight: 400;                         /* secondary action - regular weight */
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
  background: var(--BrandMintSoft); color: var(--BrandDeep);
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout {
  background: var(--BrandTeal); color: #fff;
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
  background: var(--BrandTealDark); color: #fff;
}

/* --- empty state ---------------------------------------------------------- */
.elementor-menu-cart__empty-message {
  padding: 32px 0; text-align: center;
  font-family: var(--BrandFont); font-size: 15px; color: var(--InkMuted);
}

@media (max-width: 400px) {
  .elementor-menu-cart__main { padding: 52px 16px 20px; }
  .elementor-menu-cart__product { grid-template-columns: 56px minmax(0, 1fr) 26px; gap: 10px; }
  .elementor-menu-cart__product-image { width: 56px; height: 56px; }
  .elementor-menu-cart__footer-buttons { grid-template-columns: 1fr; }
}


/* ==========================================================================
   12. CHECKOUT / CART BLOCKS - primary CTA
   The new WooCommerce Checkout block renders in React, so its button cannot
   be styled in Elementor - it is styled here. Woo's own rule is
   `.wc-block-components-button:not(.is-link).contained` (3 classes), so each
   .elementor-kit-6 below carries a 4th class to make sure it wins the cascade.
   ========================================================================== */

.wc-block-checkout .wc-block-components-button:not(.is-link).wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-components-button:not(.is-link).wc-block-cart__submit-button,
.woocommerce #place_order,
#place_order {
  background-color: var(--BrandTeal);
  color: #fff;
  border: 0;
  border-radius: var(--RadiusPill);
  font-family: var(--BrandFont);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: 16px 32px;
  min-height: 52px;
  box-shadow: none;
  transition: background-color .18s ease, box-shadow .18s ease, transform .08s ease;
}

.wc-block-checkout .wc-block-components-button:not(.is-link).wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-cart .wc-block-components-button:not(.is-link).wc-block-cart__submit-button:hover,
.woocommerce #place_order:hover,
#place_order:hover {
  background-color: var(--BrandTealDark);
  color: #fff;
  box-shadow: 0 6px 18px rgba(4, 69, 69, .18);
}

.wc-block-checkout .wc-block-components-button:not(.is-link).wc-block-components-checkout-place-order-button:active,
.wp-block-woocommerce-cart .wc-block-components-button:not(.is-link).wc-block-cart__submit-button:active,
#place_order:active {
  background-color: var(--BrandDeep);
  box-shadow: none;
  transform: translateY(1px);
}

.wc-block-checkout .wc-block-components-button:not(.is-link).wc-block-components-checkout-place-order-button:focus-visible,
.wp-block-woocommerce-cart .wc-block-components-button:not(.is-link).wc-block-cart__submit-button:focus-visible,
#place_order:focus-visible {
  outline: 2px solid var(--BrandDeep);
  outline-offset: 3px;
}

/* while the order is being submitted */
.wc-block-checkout .wc-block-components-button:not(.is-link).wc-block-components-checkout-place-order-button:disabled,
.wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button[aria-disabled="true"] {
  background-color: var(--BrandMintSoft);
  color: var(--BrandDeep);
  box-shadow: none;
}

/* the label + price sit inside spans - keep them on the button colour */
.wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.wc-block-cart__submit-button .wc-block-components-button__text {
  color: inherit;
}


/* --- archive sidebar: hide the internal "Nekategorisano" bucket -----------
   1.881 imported products still sit in the default category. It is a storage
   bucket, not something a customer would ever filter by, so it is hidden from
   the category filter. Once the catalogue is categorised, delete this rule
   (and turn the product counts back on in the Kategorije widget).           */
.product-categories li.cat-item-15,
.widget_product_categories li.cat-item-15 { display: none; }


/* --- mobile header: cart shows icon + count only --------------------------
   The subtotal text ("1.250 RSD") is 30-50px of a 360px header row and pushes
   the logo into the burger. Below 768px the toggle is the icon plus the item
   bubble; the full subtotal is still in the side cart panel.                */
@media (max-width: 767px) {
  .elementor-element-5a6780f .elementor-menu-cart__toggle_button .elementor-button-text { display: none; }
  .elementor-element-5a6780f .elementor-menu-cart__toggle_button .elementor-button-icon { margin: 0; }
}


/* =========================================================================
   9. PRODUCT CARD "DODAJ U KORPU" ON MOBILE
   Loop template 117 (Apoteka Product Card) - used on /prodavnica/, the
   homepage product carousel and product search results.

   At 2 columns the card interior is only 84px wide on a 360px phone. The
   26px side padding from section 4 left ~32px for the label, and Elementor
   Pro's .e-loop-item * { word-break: break-word } split "Dodaj u korpu"
   over up to 4 lines - with the 999px radius the button rendered as a teal
   circle (91px tall at 360px, 192px at 320px).

   Fix: below 768px the CTA extends 6px past the card body's padding on
   each side (flush with the image edge, see section 10), drops to 13px / 8px side padding and only breaks at a space.
   Elementor caps widgets with `.elementor.elementor .e-con > .elementor-widget
   { max-width: 100% }`, so the width override needs that specificity.
   Measured: one line (38px) from 320px up.
   ========================================================================= */
@media (max-width: 767px) {
  .elementor.elementor .e-con > .elementor-widget.elementor-element-bmcardcart {
    width: calc(100% + 12px);
    max-width: none;
    margin-left: -6px;
    margin-right: -6px;
  }
  .elementor-element-bmcardcart .e-loop-add-to-cart-form-container,
  .elementor-element-bmcardcart form.cart { width: 100%; }
  .elementor-element-bmcardcart a.button {
    display: flex;
    width: 100%;
    padding: 11px 8px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    word-break: normal;
    overflow-wrap: normal;
  }
}


/* --- shop archive grid: no equal-height rows on mobile --------------------
   The arcGrid Loop Grid on template 114 has "Equal Height" on, which is
   grid-auto-rows: 1fr - every card on the page is as tall as the tallest
   one (503px at 360px), leaving ~150px of empty white under short cards.
   On mobile each row sizes to its own tallest card instead. Desktop and
   tablet keep the equal-height look. Specificity must beat
   .elementor-114 .elementor-element.elementor-element-arcGrid .elementor-loop-container
   which loads later (post-114.css).                                         */
@media (max-width: 767px) {
  .elementor-114 .elementor-element.elementor-element-arcGrid .elementor-loop-container.elementor-grid {
    grid-auto-rows: auto;
  }
}


/* =========================================================================
   10. PRODUCT CARD TEXT ON MOBILE - side padding and word breaking
   Same 2-up cards as section 9. Card padding (10px) plus body padding
   (16px) left only 84px for text on a 360px phone, and Elementor Pro's
   .e-loop-item * { word-break: break-word } then split prices and titles
   mid-word ("1.819 RS / D", "Stress&Moo / d" - the price is one unbreakable
   "1.819&nbsp;RSD" unit). Below 768px the body's side padding drops to 6px:
   text sits 16px from the card border, the image and the CTA 10px. Titles
   and prices now break only between words (the rule must also hit the
   descendant spans, because .e-loop-item * sets word-break on each of them).
   ========================================================================= */
.elementor-117 .elementor-element-bmcardtitle .elementor-heading-title,
.elementor-117 .elementor-element-bmcardtitle .elementor-heading-title *,
.elementor-117 .elementor-element-bmcardprice .price,
.elementor-117 .elementor-element-bmcardprice .price * {
  word-break: normal;
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .elementor-117.elementor-117 .elementor-element.elementor-element-bmcardbody {
    --padding-left: 6px;
    --padding-right: 6px;
  }
}


/* =========================================================================
   11. CART PAGE - block is not "wide"
   The WooCommerce Cart block carries the alignwide class, and Hello
   Elementor's theme.css gives .alignwide { margin-inline: -80px } at every
   width. The page column only has 24px of side padding below ~1360px, so
   the cart (coupon, totals, "Nastavite sa placanjem") started 56px off the
   left edge of the screen on phones, tablets and small laptops. The
   Checkout block already renders with no negative margin, so the cart now
   matches it at every width.
   ========================================================================= */
.wp-block-woocommerce-cart.alignwide {
  margin-inline: 0;
}


/* --- WooCommerce block buttons rendered as links are not underlined ------
   Hello Elementor theme.css: .page-content a { text-decoration: underline }
   also hits block buttons that are <a> elements - the cart's "Nastavite sa
   placanjem" and the empty-cart "back to shop" button.                      */
.page-content a.wc-block-components-button,
.page-content a.wp-element-button,
.page-content a.wc-block-components-button:hover,
.page-content a.wp-element-button:hover {
  text-decoration: none;
}


/* =========================================================================
   12. MOBILE OFF-CANVAS MENU - same look as the desktop menu
   Header template 28: desktop nav `de3c773` (orange hover on top items,
   dropdown = white card with #D8EBEB border / 12px radius / shadow, items
   with mint hover pills). The drawer nav `navmenu1` only had teal text on
   hover and flat sub-lists. This mirrors the desktop styling; the widget's
   own custom CSS uses !important, so these rules need it too plus one more
   .elementor-kit-6 step for specificity. Hover, focus, the open parent (smartmenus
   `.highlighted`) and the current page share the same state.
   ========================================================================= */
/* top level: orange, like the desktop bar */
.elementor-28 .elementor-element.elementor-element-navmenu1 .elementor-nav-menu--main > ul > li > a.elementor-item:hover,
.elementor-28 .elementor-element.elementor-element-navmenu1 .elementor-nav-menu--main > ul > li > a.elementor-item:focus,
.elementor-28 .elementor-element.elementor-element-navmenu1 .elementor-nav-menu--main > ul > li > a.elementor-item.highlighted,
.elementor-28 .elementor-element.elementor-element-navmenu1 .elementor-nav-menu--main > ul > li > a.elementor-item.elementor-item-active {
  color: var(--AccentOrange);
  fill: var(--AccentOrange);
}
/* first sub-level: the desktop dropdown card */
.elementor-28 .elementor-element.elementor-element-navmenu1 .elementor-nav-menu--main > ul > li > ul.sub-menu {
  background: #FFFFFF !important;
  border: 1px solid var(--BorderField) !important;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(4, 69, 69, .14) !important;
  padding: 6px !important;
  margin: 4px 0 10px !important;
}
/* items inside the card: pill on hover / open / current, like desktop */
.elementor-28 .elementor-element.elementor-element-navmenu1 .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item {
  color: var(--BrandTealDark);
  fill: var(--BrandTealDark);
  border-radius: 8px;
  padding: 10px 12px !important;
  transition: background-color .15s ease, color .15s ease;
}
.elementor-28 .elementor-element.elementor-element-navmenu1 .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:hover,
.elementor-28 .elementor-element.elementor-element-navmenu1 .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:focus,
.elementor-28 .elementor-element.elementor-element-navmenu1 .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item.highlighted,
.elementor-28 .elementor-element.elementor-element-navmenu1 .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item.elementor-item-active {
  background-color: var(--BrandMint);
  color: var(--BrandDeep);
  fill: var(--BrandDeep);
}
/* deeper levels stay inside the same card, just indented */
.elementor-28 .elementor-element.elementor-element-navmenu1 .elementor-nav-menu--main ul.sub-menu ul.sub-menu {
  padding: 0 0 2px 10px !important;
  margin: 0 !important;
}
.elementor-28 .elementor-element.elementor-element-navmenu1 .elementor-nav-menu--main ul.sub-menu ul.sub-menu a.elementor-sub-item {
  padding: 8px 12px !important;
}/* End custom CSS */