/**
Theme Name: Sve za stampu (Astra Child)
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra child tema za Svezastampu.com
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sve-za-stampu-astra-child
Template: astra

/* ==========================================================
   Astra Builder + Elementor — Unified Layout (1470px)
   Header / Content / Footer aligned • Laptop edges: clamp(12px,1.5vw,20px)
   ========================================================== */
:root{
  --site-max: 1470px;
  --edge-desktop: clamp(12px, 1.5vw, 20px);
  --edge-mobile: 16px;
}

/* =========================
   HEADER — Astra Header Builder (working version)
   ========================= */
@media (min-width: 993px){
  /* Cap & pad the containers that actually hold the logo/menu */
  .site-header .ast-primary-header-bar .ast-container,
  .site-header .main-header-bar .ast-container,
  .site-header .ast-container,
  .site-header .ast-container-fluid{
    max-width: var(--site-max) !important;
    margin: 0 auto !important;
    padding-left: var(--edge-desktop) !important;
    padding-right: var(--edge-desktop) !important;
    box-sizing: border-box;
  }
  /* Ensure inner builder rows don't undo edges */
  .site-header .ast-builder-grid-row,
  .site-header .ast-builder-grid-row-container-inner{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }
  /* Nav block: no stray margins */
  .ast-desktop .main-header-bar-navigation{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Sticky header keeps the same edges */
@media (min-width: 993px){
  .ast-sticky-active .site-header .ast-container,
  .ast-sticky-active .site-header .ast-container-fluid{
    padding-left: var(--edge-desktop) !important;
    padding-right: var(--edge-desktop) !important;
  }
}
/* Mobile header padding */
@media (max-width: 992px){
  .site-header .ast-primary-header-bar .ast-container,
  .site-header .main-header-bar .ast-container,
  .site-header .ast-container,
  .site-header .ast-container-fluid{
    padding-left: var(--edge-mobile) !important;
    padding-right: var(--edge-mobile) !important;
  }
}

/* =========================
   MAIN CONTENT — Astra container (cap + edges)
   ========================= */
.site-content > .ast-container,
.ast-page-builder-template .site-content > .ast-container,
.ast-plain-container .site-content > .ast-container{
  max-width: var(--site-max) !important;
  margin: 0 auto !important;
  padding-left: var(--edge-desktop) !important;
  padding-right: var(--edge-desktop) !important;
  box-sizing: border-box;
}
@media (max-width: 992px){
  .site-content > .ast-container,
  .ast-page-builder-template .site-content > .ast-container,
  .ast-plain-container .site-content > .ast-container{
    padding-left: var(--edge-mobile) !important;
    padding-right: var(--edge-mobile) !important;
  }
}

/* =========================
   ELEMENTOR — make it follow the parent cap
   (works for all Elementor templates: pages, search, archives, singles)
   ========================= */
/* Root Elementor canvas: no extra side padding/margins */
.elementor[data-elementor-type]{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}
/* Inner wrappers fill the capped parent (no extra padding) */
/* Flexbox Containers */
.elementor > .e-con.e-con-boxed > .e-con-inner,
.elementor > .e-con.e-con-stretched{
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}
/* Legacy Sections */
.elementor-section.elementor-top-section.elementor-section-boxed > .elementor-container,
.elementor-section.elementor-top-section.elementor-section-stretched > .elementor-container{
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}
/* Neutralize Elementor “stretched” offsets so it honors the cap */
.elementor .e-con.e-con-stretched,
.elementor-section.elementor-top-section.elementor-section-stretched{
  width: auto !important;
  left: auto !important;
  right: auto !important;
}

/* =========================
   FOOTER — Astra Footer Builder (final, no double padding)
   ========================= */
/* Keep outer footer wrappers full-bleed; no side padding here */
.site-footer .ast-container,
.site-footer .ast-container-fluid{
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}
/* Desktop: apply cap + side padding on the CONTAINER layer only */
@media (min-width: 993px){
  .site-footer .ast-builder-grid-row-container{
    max-width: var(--site-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--edge-desktop) !important;
    padding-right: var(--edge-desktop) !important;
    box-sizing: border-box;
  }
  /* Zero inner layers so they can't double the padding or re-cap */
  .site-footer .ast-builder-grid-row-container-inner,
  .site-footer .ast-builder-grid-row,
  .site-footer .site-primary-footer-wrap.ast-container,
  .site-footer .site-above-footer-wrap.ast-container,
  .site-footer .site-below-footer-wrap.ast-container,
  .site-footer .ast-container > .ast-row,
  .site-footer .ast-container-fluid > .ast-row{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Mobile/tablet footer: single-source padding on the container only */
@media (max-width: 992px){
  .site-footer .ast-builder-grid-row-container{
    padding-left: var(--edge-mobile) !important;
    padding-right: var(--edge-mobile) !important;
  }
  .site-footer .ast-builder-grid-row-container-inner,
  .site-footer .ast-builder-grid-row{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* Moved from Astra - Additional CSS */
/* ========== ASTRA MENU — Dropdown Left Padding Only ========== */
.ast-desktop .main-header-menu .sub-menu > li > a {
    padding-left: 10px !important; /* was default ~12px */
}

/* Override Search Form Styles */
.ast-search-menu input.search-field,
.ast-search-menu input[type="search"],
.ast-header-search input.search-field,
.ast-header-search input[type="search"] {
  border: 1px solid #000;
  border-radius: 10px;
  box-sizing: border-box;
}

.woocommerce .woocommerce-ordering {
  float: right;
  margin-bottom: 1em;
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label {
	 padding: 2px;
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item {
  line-height: 1.3;
}

.filter-item.color a[data-term-slug="bela"] .color-swatch {
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 50% !important;
}

.yith-wcan-active-filters.custom-style.enhanced h4 {
    display: none !important;
    color: #FFF !important;
}

.active-filter b {
    font-weight: 500;
}

img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
	border-radius: 4px;
}

span.woocommerce-Price-amount.amount, .unit {
	font-size: 1.4em;
}

/*===================================================*/


/* ===========================================
   Social Feed Gallery — small-screen fix
   (3:4 tiles, 1/2/6 show, no footer overlap)
   Target feed: #instagram-gallery-feed-0
   =========================================== */

#instagram-gallery-feed-0{
  position:relative!important; isolation:isolate!important; z-index:2!important;
  margin:0; padding:0;
}

/* Make list a grid; neutralize plugin sizing */
#instagram-gallery-feed-0 .instagram-gallery-list{
  display:grid!important;
  gap:var(--qligg-spacing,20px)!important;
  margin:0!important; position:relative!important; box-sizing:border-box!important;
  overflow:visible!important;
}
#instagram-gallery-feed-0 .instagram-gallery-item,
#instagram-gallery-feed-0 a.instagram-gallery-item{
  /* tiles must participate in layout */
  width:auto!important; max-width:none!important; float:none!important;
  position:static!important; transform:none!important; flex:none!important; display:block!important;
  opacity:1!important; visibility:visible!important; clear:none!important;
}

/* 3:4 tiles with real height even before media loads */
#instagram-gallery-feed-0 .instagram-gallery-item__wrap{ width:100%!important; height:auto!important; }
#instagram-gallery-feed-0 .instagram-gallery-item__media-wrap{
  aspect-ratio:3/4!important; width:100%!important; height:auto!important; overflow:hidden!important;
}
#instagram-gallery-feed-0 img.instagram-gallery-item__media,
#instagram-gallery-feed-0 video.instagram-gallery-item__media{
  width:100%!important; height:100%!important; object-fit:cover!important; display:block!important;
}

/* ===== Counts ===== */

/* ≤600px: 1 column, show only first 1 */
@media (max-width:600px){
  #instagram-gallery-feed-0 .instagram-gallery-list{ grid-template-columns:1fr!important; }
  #instagram-gallery-feed-0 .instagram-gallery-list > .instagram-gallery-item:nth-child(n+2),
  #instagram-gallery-feed-0 .instagram-gallery-list > a.instagram-gallery-item:nth-child(n+2){
    display:none!important;
  }
}

/* 601–1024px: 2 columns, show only first 2 */
@media (min-width:601px) and (max-width:1024px){
  #instagram-gallery-feed-0 .instagram-gallery-list{ grid-template-columns:repeat(2,1fr)!important; }
  #instagram-gallery-feed-0 .instagram-gallery-list > .instagram-gallery-item:nth-child(n+3),
  #instagram-gallery-feed-0 .instagram-gallery-list > a.instagram-gallery-item:nth-child(n+3){
    display:none!important;
  }
}

/* ≥1025px: 6 columns, show first 6 */
@media (min-width:1025px){
  #instagram-gallery-feed-0 .instagram-gallery-list{ grid-template-columns:repeat(6,1fr)!important; }
  #instagram-gallery-feed-0 .instagram-gallery-list > .instagram-gallery-item:nth-child(n+7),
  #instagram-gallery-feed-0 .instagram-gallery-list > a.instagram-gallery-item:nth-child(n+7){
    display:none!important;
  }
}

/* ===== No-overlap spacers (≤768px) =====
   We reserve exact row height based on the list width and grid, then add a tiny cushion.
   This stops the Astra footer from “rising” over the feed on small screens. */

/* ONE column (≤600px): reserve one 3:4 row + cushion */
@media (max-width:600px){
  #instagram-gallery-feed-0 .instagram-gallery-list::before{
    content:""; display:block; padding-top:calc(100% * 4 / 3); /* one 3:4 tile */
  }
  #instagram-gallery-feed-0 .instagram-gallery-list::after{
    content:""; display:block; padding-top:14px; clear:both;
  }
  #instagram-gallery-feed-0{ margin-bottom:12px!important; }
}

/* TWO columns (601–768px): reserve one 3:4 row + cushion
   row height = ((list width - one gap)/2) * 4/3 */
@media (min-width:601px) and (max-width:768px){
  #instagram-gallery-feed-0 .instagram-gallery-list::before{
    content:""; display:block;
    padding-top:calc(((100% - var(--qligg-spacing,20px)) / 2) * 4 / 3);
  }
  #instagram-gallery-feed-0 .instagram-gallery-list::after{
    content:""; display:block; padding-top:12px; clear:both;
  }
  #instagram-gallery-feed-0{ margin-bottom:12px!important; }
}

/* Footer must always sit below content */
.site-footer{ position:relative!important; z-index:1!important; clear:both!important; }
.ast-footer-reveal .site-footer,
.ast-footer-overlay .site-footer{ position:static!important; transform:none!important; }

/* ===== IG footer-overlap hard stop (append-only) ===== */
/* Target your feed ID if different */
#instagram-gallery-feed-0{
  position: relative !important;
  display: block !important;
  isolation: isolate !important;
  z-index: 2 !important;
}

/* Make the list clear floats/abs positioning without changing its layout */
@media (max-width: 768px){
  #instagram-gallery-feed-0 .instagram-gallery-list{
    display: flow-root !important;   /* creates its own BFC, contains floats */
    overflow: visible !important;    /* allow our height to show fully */
  }
}

/* ≤ 600px — one tile visible (3:4). Reserve enough height on the WRAPPER. */
/* Uses viewport width so it does NOT depend on plugin inline sizing. */
@media (max-width: 600px){
  #instagram-gallery-feed-0{
    /* one 3:4 tile + a tiny cushion */
    min-height: calc(100vw * 4 / 3 + 16px) !important;
    margin-bottom: 12px !important; /* small gap above footer */
  }
}

/* 601–768px — two tiles in one row (each ~50% width). Reserve row height. */
@media (min-width: 601px) and (max-width: 768px){
  /* assume ~16px gap between the two tiles; tweak if your gap differs */
  #instagram-gallery-feed-0{
    min-height: calc(((100vw - 16px) / 2) * 4 / 3 + 14px) !important;
    margin-bottom: 12px !important;
  }
}

/* Footer remains underneath */
.site-footer{
  position: relative !important;
  z-index: 1 !important;
  clear: both !important;
}

/* ===== Social Feed Gallery — fix for ≤768px (no spacer, no overlap) ===== */
/* Target your actual feed ID if different */
@media (max-width: 768px){
  /* kill any pseudo-element spacers that add top padding */
  #instagram-gallery-feed-0 .instagram-gallery-list::before,
  #instagram-gallery-feed-0 .instagram-gallery-list::after{
    content: none !important;
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* make the list establish its own block formatting context (contains floats) */
  #instagram-gallery-feed-0 .instagram-gallery-list{
    display: flow-root !important;
    overflow: visible !important;
    clear: both !important;
  }

  /* ensure tiles participate in normal layout (no floats/absolute) */
  #instagram-gallery-feed-0 .instagram-gallery-item,
  #instagram-gallery-feed-0 a.instagram-gallery-item{
    float: none !important;
    position: static !important;
    transform: none !important;
    display: block !important;
    clear: none !important;
  }

  /* keep 3:4 tiles (height is real, so the wrapper won’t collapse) */
  #instagram-gallery-feed-0 .instagram-gallery-item__media-wrap{
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }
  #instagram-gallery-feed-0 img.instagram-gallery-item__media,
  #instagram-gallery-feed-0 video.instagram-gallery-item__media{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* a small, consistent gap above the footer */
  #instagram-gallery-feed-0{
    margin-bottom: 12px !important;
  }

  /* footer stays underneath */
  .site-footer{
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
  }
}

/* 601–768px: limit IG feed to 1 visible post */
@media (min-width:601px) and (max-width:768px){
  #instagram-gallery-feed-0 .instagram-gallery-list > .instagram-gallery-item:nth-child(n+2),
  #instagram-gallery-feed-0 .instagram-gallery-list > a.instagram-gallery-item:nth-child(n+2){
    display: none !important;
  }
  /* optional: make the single tile span full width if grid is 2-cols there */
  #instagram-gallery-feed-0 .instagram-gallery-list{
    grid-template-columns: 1fr !important;
  }
}

/* ===== 601–767px: 1 post, no footer overlap ===== */
@media (min-width:601px) and (max-width:767px){
  /* show only the first item */
  #instagram-gallery-feed-0 .instagram-gallery-list > .instagram-gallery-item:nth-child(n+2),
  #instagram-gallery-feed-0 .instagram-gallery-list > a.instagram-gallery-item:nth-child(n+2){
    display: none !important;
  }

  /* make the list a single-column grid so our spacer math is exact */
  #instagram-gallery-feed-0 .instagram-gallery-list{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--qligg-spacing, 20px) !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* spacer AFTER the tile so it doesn't push the first post down */
  #instagram-gallery-feed-0 .instagram-gallery-list::after{
    content: "";
    display: block;
    grid-column: 1 / -1;
    /* one 3:4 tile + a small cushion for safety */
    padding-top: calc(100% * 4 / 3 + 12px);
    clear: both;
  }

  /* keep a small gap above the footer */
  #instagram-gallery-feed-0{ margin-bottom: 12px !important; }

  /* ensure tiles have real height; harmless if plugin already enforces 3:4 */
  #instagram-gallery-feed-0 .instagram-gallery-item__media-wrap{
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }
  #instagram-gallery-feed-0 img.instagram-gallery-item__media,
  #instagram-gallery-feed-0 video.instagram-gallery-item__media{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* ==== 601–767px: 1 post, no footer overlap (no pseudo spacers) ==== */
@media (min-width:601px) and (max-width:767px){
  /* show only the first item */
  #instagram-gallery-feed-0 .instagram-gallery-list > .instagram-gallery-item:nth-child(n+2),
  #instagram-gallery-feed-0 .instagram-gallery-list > a.instagram-gallery-item:nth-child(n+2){
    display: none !important;
  }

  /* make it a single-column grid so height math is predictable */
  #instagram-gallery-feed-0 .instagram-gallery-list{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--qligg-spacing, 20px) !important;
    overflow: visible !important;
  }

  /* ensure the wrapper itself has real height = one 3:4 tile + cushion */
  #instagram-gallery-feed-0{
    /* if your section has big side padding, this slightly over-reserves (safe) */
    min-height: calc(100vw * 4 / 3 + 14px) !important;
    margin-bottom: 12px !important;
    position: relative !important;
    display: block !important;
    isolation: isolate !important;
    z-index: 2 !important;
  }

  /* keep tiles in normal flow & enforce 3:4 (harmless if plugin already does it) */
  #instagram-gallery-feed-0 .instagram-gallery-item,
  #instagram-gallery-feed-0 a.instagram-gallery-item{
    float: none !important;
    position: static !important;
    transform: none !important;
    display: block !important;
  }
  #instagram-gallery-feed-0 .instagram-gallery-item__media-wrap{
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }
  #instagram-gallery-feed-0 img.instagram-gallery-item__media,
  #instagram-gallery-feed-0 video.instagram-gallery-item__media{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* footer should always sit beneath */
  .site-footer{
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
  }
}