/* ============================================================================
   GIFTS4YOU — brand stilovi (1:1 sa gifts4you.rs)
   Tokeni izmereni na živom Sylius sajtu 13.08.2026.
   ========================================================================== */

:root {
  /* ---- boje ---- */
  --g4y-orange:        #F37422;   /* brand, cene, linkovi akcije */
  --g4y-orange-dark:   #d9600f;   /* hover */
  --g4y-ink:           #231F20;   /* naslovi */
  --g4y-body:          #212529;   /* tekst */
  --g4y-muted:         #B9BBBF;   /* napomene, placeholderi, ivice inputa */
  --g4y-surface:       #F8F9FA;   /* kartica proizvoda, filter bar */
  --g4y-line:          #E9ECEF;   /* razdelnici */

  /* ---- tipografija ---- */
  --g4y-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- geometrija ---- */
  --g4y-container: 1320px;
  --g4y-radius-card: 8px;
  --g4y-radius-pill: 22px;
  --g4y-radius-input: 20px;
  --g4y-radius-cta: 15px;
}

/* ---------------------------------------------------------------- osnovno */
body,
.entry-content,
button, input, select, textarea {
  font-family: var(--g4y-font);
  color: var(--g4y-body);
}
body { font-size: 16px; line-height: 1.6; background: #fff; }

h1, h2, h3, h4, h5, h6,
.entry-title, .woocommerce-loop-product__title {
  font-family: var(--g4y-font);
  color: var(--g4y-ink);
}

/* širina sadržaja kao na starom sajtu */
.ct-container, .ct-container-full,
.wp-block-group.alignwide,
.woocommerce-page .ct-container { max-width: var(--g4y-container); }

a { color: var(--g4y-body); }
a:hover { color: var(--g4y-orange); }

/* ------------------------------------------------------------------ dugmad */
/* primarno = puna narandžasta pilula, 700 */
.wp-element-button,
.wp-block-button__link,
button.single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.ct-button {
  background: var(--g4y-orange) !important;
  border: 1px solid var(--g4y-orange) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border-radius: var(--g4y-radius-pill) !important;
  padding: 10px 26px !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background .18s ease, border-color .18s ease;
  box-shadow: none !important;
}
.wp-element-button:hover,
button.single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--g4y-orange-dark) !important;
  border-color: var(--g4y-orange-dark) !important;
  color: #fff !important;
}

/* sekundarno = outline pilula (kao „Registracija") */
.g4y-btn-outline,
.woocommerce a.button.wc-backward {
  background: transparent !important;
  border: 1px solid #131313 !important;
  color: #131313 !important;
  font-weight: 400 !important;
  border-radius: var(--g4y-radius-pill) !important;
  padding: 8px 24px !important;
}
.g4y-btn-outline:hover { border-color: var(--g4y-orange) !important; color: var(--g4y-orange) !important; }

/* hero CTA varijanta (beli sa narandžastim tekstom, radius 15) */
.g4y-cta-hero {
  background: #fff !important; color: var(--g4y-orange) !important;
  border: 2px solid #fff !important; border-radius: var(--g4y-radius-cta) !important;
  padding: 16px 32px !important; font-weight: 600 !important;
}

/* -------------------------------------------------------- polja i selecti */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .variations select,
.woocommerce-page select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="password"],
select, textarea {
  border: 1px solid var(--g4y-muted) !important;
  border-radius: var(--g4y-radius-input) !important;
  background: #fff !important;
  color: var(--g4y-body) !important;
  font-size: 16px !important;
  min-height: 46px;
  padding: 10px 25px !important;
  box-shadow: none !important;
}
textarea { border-radius: 12px !important; min-height: 120px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--g4y-orange) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(243, 116, 34, .15) !important;
}
::placeholder { color: var(--g4y-muted); opacity: 1; }

/* ------------------------------------------------------- kartica proizvoda */
/* stari sajt: svetla podloga #F8F9FA, radius 8px, bez senke i ivice,
   naslov bold, cena narandžasta sa prefiksom „Cena: " */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.ct-woo-card-actions ~ *,
ul.products li.product {
  background: var(--g4y-surface);
  border-radius: var(--g4y-radius-card);
  border: 0;
  box-shadow: none;
  overflow: hidden;
  padding-bottom: 16px;
  text-align: left;
}
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
  border-radius: 0;
  margin-bottom: 14px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--g4y-ink);
  padding: 0 18px;
  margin: 0 0 6px;
  line-height: 1.35;
}
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
  color: var(--g4y-orange) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  padding: 0 18px;
  display: block;
}
/* prefiks „Cena: " kao na starom sajtu */
.woocommerce ul.products li.product .price::before { content: "Cena: "; }
.woocommerce ul.products li.product .price del { opacity: .5; font-size: .8em; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
/* stari sajt nema dugme u listi — klik ide na proizvod */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart { display: none !important; }

/* 4 u redu, gap 24px */
.woocommerce ul.products.columns-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.woocommerce ul.products.columns-4 li.product { width: auto !important; margin: 0 !important; float: none !important; }
@media (max-width: 1024px) { .woocommerce ul.products.columns-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* --------------------------------------------------------- arhiva / naslov */
.woocommerce-products-header,
.page-header .entry-header { text-align: center; }
.woocommerce-products-header__title,
.ct-hero-section h1,
h1.page-title {
  font-size: 48px !important;
  font-weight: 400 !important;
  color: var(--g4y-ink);
  margin: 24px 0 32px;
}
/* filter/sort bar: svetla traka */
.woocommerce .woocommerce-notices-wrapper + .g4y-toolbar,
.g4y-toolbar { background: var(--g4y-surface); border-radius: var(--g4y-radius-card); padding: 18px 24px; margin-bottom: 32px; }
.woocommerce-result-count { color: var(--g4y-body); font-size: 15px; }
.woocommerce .woocommerce-ordering select { min-height: 40px; padding: 6px 18px !important; }

/* breadcrumb: 14px, siva strelica */
.woocommerce-breadcrumb, .ct-breadcrumbs {
  font-size: 14px !important;
  color: var(--g4y-body) !important;
  margin-bottom: 18px;
}
.woocommerce-breadcrumb a { color: var(--g4y-body); }
.woocommerce-breadcrumb a:hover { color: var(--g4y-orange); }

/* ----------------------------------------------------- pojedinačni proizvod */
.woocommerce div.product .product_title {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--g4y-ink);
  margin-bottom: 10px;
}
/* napomena o roku isporuke (dodaje child tema) */
.g4y-delivery-note {
  color: var(--g4y-muted);
  font-weight: 500;
  font-size: 16px;
  margin: 0 0 14px;
}
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 18px; }
.woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--g4y-orange); }
.woocommerce div.product .woocommerce-review-link { color: var(--g4y-orange); font-size: 14px; }

/* razdelnici oko cene kao na starom sajtu */
.woocommerce div.product .summary > .price {
  border-top: 1px solid var(--g4y-line);
  border-bottom: 1px solid var(--g4y-line);
  padding: 22px 0;
  margin: 0 0 26px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .woocommerce-variation-price .price {
  color: var(--g4y-ink) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
}
.woocommerce div.product p.price del { color: var(--g4y-muted) !important; font-size: .6em !important; font-weight: 400 !important; }
.woocommerce div.product p.price ins { text-decoration: none; }

/* atributi / varijacije */
.woocommerce div.product form.cart .variations { border: 0; margin-bottom: 18px; }
.woocommerce div.product form.cart .variations tr { display: block; margin-bottom: 16px; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { display: block; padding: 0; text-align: left; }
.woocommerce div.product form.cart .variations label {
  font-weight: 400 !important;
  font-size: 16px;
  color: var(--g4y-body);
  margin-bottom: 6px;
  display: block;
}
.woocommerce div.product form.cart .variations select { width: 100%; }
.woocommerce div.product form.cart .reset_variations { color: var(--g4y-orange); font-size: 13px; }
.woocommerce div.product form.cart div.quantity input { border-radius: var(--g4y-radius-pill) !important; text-align: center; }
.woocommerce div.product form.cart .single_add_to_cart_button { padding: 14px 34px !important; font-size: 17px !important; }

/* obavezno polje: crvena zvezdica kao na starom sajtu */
.woocommerce .required, .wapf-field-label .required { color: #e02b2b; }

/* galerija */
.woocommerce div.product div.images img { border-radius: var(--g4y-radius-card); }

/* tabovi ispod proizvoda */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: var(--g4y-radius-pill) var(--g4y-radius-pill) 0 0;
  background: var(--g4y-surface);
  border-color: var(--g4y-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff; border-bottom-color: #fff; }

/* ------------------------------------------------------------ personalizacija */
/* WAPF / dodatna polja: isti izgled kao Sylius label1-5 */
.wapf-field-container { margin-bottom: 16px; }
.wapf-field-label label { font-weight: 400 !important; font-size: 16px; color: var(--g4y-body); }
.wapf-field-container input[type=text], .wapf-field-container textarea, .wapf-field-container select {
  border-radius: var(--g4y-radius-input) !important;
  border: 1px solid var(--g4y-muted) !important;
}

/* ------------------------------------------------------------------- korpa */
.woocommerce-cart table.cart, .woocommerce-checkout .woocommerce-checkout-review-order-table {
  border-radius: var(--g4y-radius-card); overflow: hidden;
}
.woocommerce-cart table.cart thead, .woocommerce-checkout table thead { background: var(--g4y-surface); }
.woocommerce .cart-collaterals .cart_totals > h2, .woocommerce-checkout h3 { font-size: 20px; font-weight: 600; }
.woocommerce-info, .woocommerce-message { border-top-color: var(--g4y-orange); border-radius: var(--g4y-radius-card); }
.woocommerce-info::before, .woocommerce-message::before { color: var(--g4y-orange); }
.woocommerce-error { border-top-color: #e02b2b; border-radius: var(--g4y-radius-card); }

/* -------------------------------------------------------- header dopune */
/* pretraga u header-u: narandžasto dugme desno, pilula levo (kao stari sajt) */
.g4y-header-search { display: flex; align-items: stretch; max-width: 420px; width: 100%; }
.g4y-header-search input[type=search] {
  border-radius: var(--g4y-radius-input) 0 0 var(--g4y-radius-input) !important;
  border-right: 0 !important; min-height: 46px;
}
.g4y-header-search button {
  background: var(--g4y-orange); border: 0; color: #fff;
  border-radius: 0 var(--g4y-radius-input) var(--g4y-radius-input) 0;
  padding: 0 22px; cursor: pointer;
}
.g4y-header-search button:hover { background: var(--g4y-orange-dark); }

/* korpa u header-u: ikonica + ukupno */
.g4y-cart-link { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--g4y-body); }
.g4y-cart-link:hover { color: var(--g4y-orange); }

/* ---------------------------------------------------------------- footer */
.ct-footer { background: #fff; border-top: 1px solid var(--g4y-line); }

/* ------------------------------------------------------------ sitni detalji */
.ct-back-to-top { background: var(--g4y-orange) !important; }
::selection { background: rgba(243,116,34,.2); }
.woocommerce span.onsale {
  background: var(--g4y-orange); color: #fff; border-radius: var(--g4y-radius-pill);
  min-height: auto; min-width: auto; padding: 4px 14px; font-weight: 600; line-height: 1.4;
}


/* ============================ dopune posle QA na stagingu =================== */

/* Blocksy prikazuje naziv kategorije u kartici — stari sajt ne */
.woocommerce ul.products li.product .woocommerce-loop-product__categories,
.woocommerce ul.products li.product .ct-woo-card-extra,
.woocommerce ul.products li.product .posted_in,
.ct-woo-card-extra { display: none !important; }

/* arhivski „hero": stari sajt ima kompaktan centriran naslov na beloj podlozi */
.ct-hero-section,
.ct-hero-section[data-type="type-1"],
.woocommerce-products-header {
  background: #fff !important;
  padding: 8px 0 0 !important;
  min-height: 0 !important;
}
.ct-hero-section .ct-container { padding-top: 0 !important; padding-bottom: 0 !important; }
.ct-hero-section h1, .woocommerce-products-header__title {
  font-size: 48px !important; font-weight: 400 !important; margin: 10px 0 26px !important;
}
/* breadcrumb iznad naslova, levo poravnat i sitan */
.ct-hero-section .ct-breadcrumbs { text-align: left !important; font-size: 14px !important; margin-bottom: 6px; }

/* traka sa brojem rezultata i sortiranjem = svetla traka kao na starom sajtu */
.woocommerce .woocommerce-notices-wrapper + .woocommerce-result-count,
.woocommerce-result-count { margin: 0; }
.woocommerce nav.woocommerce-pagination { margin-top: 36px; }
.woocommerce .products ~ nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 50%; min-width: 40px; line-height: 40px; padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--g4y-orange); color: #fff; }

/* naslov kartice: 2 reda maksimalno da mreza ostane poravnata */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 46px;
}


/* ===== finalne korekcije posle QA (Blocksy prave klase) ===================== */
.hero-section { background: #fff !important; }
.hero-section .entry-header,
.entry-header.ct-container-narrow {
  padding: 14px 0 0 !important; max-width: var(--g4y-container) !important; text-align: center;
}
h1.page-title { font-size: 48px !important; font-weight: 400 !important; margin: 6px 0 22px !important; color: var(--g4y-ink); }
.hero-section .ct-breadcrumbs { text-align: left !important; font-size: 14px !important; }
/* breadcrumb: stari sajt NE koristi velika slova */
.ct-breadcrumbs, .woocommerce-breadcrumb { text-transform: none !important; letter-spacing: 0 !important; }
.woocommerce-result-count { font-size: 15px !important; text-transform: none !important; letter-spacing: 0 !important; }
.woocommerce .woocommerce-ordering select { border-radius: var(--g4y-radius-input) !important; }

/* ===== naslovna strana + logo (blok 6) ==================================== */
/* logo je slika sa imenom brenda -> naslov sajta se ne duplira */
.site-title, .ct-title, .site-description { display: none !important; }

/* naslovna: bez naslova strane i bez sive hero trake */
body.home .hero-section,
body.home .entry-header,
body.home h1.page-title { display: none !important; }

/* hero baner: puna sirina, bez zatamnjenja, dugme dole levo kao na starom sajtu */
body.home .wp-block-cover:first-of-type { border-radius: 0 !important; padding: 0 !important; }
body.home .wp-block-cover:first-of-type .wp-block-cover__background { display: none !important; }
body.home .wp-block-cover:first-of-type .wp-block-cover__inner-container {
  align-self: flex-end; width: 100%; max-width: var(--g4y-container); margin: 0 auto;
  padding: 0 0 48px;
}
body.home .wp-block-cover:first-of-type .wp-block-buttons { justify-content: flex-start !important; }
body.home .wp-block-cover:first-of-type .wp-block-button__link {
  background: #fff !important; color: var(--g4y-orange) !important;
  font-size: 20px; font-weight: 600; padding: 14px 34px; border-radius: 28px !important;
}

/* mreza kategorija na naslovnoj = kartice kao na starom sajtu */
.wp-block-product-categories ul, ul.product-categories { list-style: none; margin: 0; padding: 0; }
.woocommerce ul.products li.product-category img { border-radius: 16px; background: #F6F6F6; }
.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  font-size: 17px !important; font-weight: 600 !important; text-align: left; padding-left: 8px;
}
.woocommerce ul.products li.product-category .count { display: none !important; }

/* FAQ akordeon */
.wp-block-details { border-bottom: 1px solid var(--g4y-line); }
.wp-block-details summary { cursor: pointer; font-size: 18px; font-weight: 600; padding: 16px 0; list-style: none; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; float: right; color: var(--g4y-orange); font-size: 24px; line-height: 1; }
.wp-block-details[open] summary::after { content: "–"; }

/* ===== NASLOVNA 1:1 (blok 7) ============================================== */
.g4y-sec-title { text-align:center; font-size:36px; font-weight:700; margin:64px 0 8px; color:var(--g4y-ink); }
.g4y-sec-sub { text-align:center; color:#6c757d; margin:0 0 28px; }
.g4y-btn { display:inline-block; background:var(--g4y-orange); color:#fff !important; font-weight:600;
  padding:14px 46px; border-radius:var(--g4y-radius-cta); text-decoration:none; }
.g4y-btn:hover { background:var(--g4y-orange-dark); }

/* hero: puna sirina ekrana, dugme dole levo u kontejneru */
.g4y-hero { position:relative; width:100vw; margin-left:calc(50% - 50vw); line-height:0; }
.g4y-hero img { width:100%; height:auto; display:block; }
.g4y-hero__inner { position:absolute; left:0; right:0; bottom:6%; max-width:var(--g4y-container);
  margin:0 auto; padding:0 24px; line-height:normal; }
.g4y-hero__btn { display:inline-block; background:#fff; color:var(--g4y-orange); font-size:20px; font-weight:600;
  padding:14px 36px; border-radius:28px; text-decoration:none; box-shadow:0 2px 10px rgba(0,0,0,.08); }
@media (max-width:781px){ .g4y-hero__inner{ bottom:4%; } .g4y-hero__btn{ font-size:16px; padding:10px 22px; } }

/* mozaik ponude: 2 kolone, levo 1 sirok + 2 mala, desno veliki panel */
.g4y-offer { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:24px 0 0; }
.g4y-offer__left { display:grid; grid-template-rows:1fr 1fr; gap:24px; }
.g4y-offer__pair { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.g4y-tile { position:relative; display:flex; align-items:center; overflow:hidden;
  background:#F6F6F6; border-radius:var(--g4y-radius-card); min-height:288px; padding:28px; }
.g4y-tile__txt h3 { font-size:24px; font-weight:700; margin:0 0 10px; }
.g4y-tile__txt p { font-size:15px; color:#495057; margin:0; }
.g4y-tile--wide .g4y-tile__txt { max-width:52%; }
.g4y-tile--wide img { position:absolute; right:0; bottom:0; height:100%; width:auto; object-fit:contain; }
.g4y-tile img { position:absolute; right:-10px; bottom:0; max-height:78%; width:auto; }
.g4y-tile--orange { background:var(--g4y-orange); color:#fff; }
.g4y-tile--orange h3, .g4y-tile--orange p { color:#fff; }
.g4y-tile--orange .g4y-tile__txt { max-width:100%; }
.g4y-special { position:relative; height:100%; min-height:600px; overflow:hidden;
  background:#EDEDED; border-radius:var(--g4y-radius-card); padding:44px; display:flex; align-items:flex-start; }
.g4y-special__txt { position:relative; z-index:2; max-width:58%; }
.g4y-special__txt h3 { font-size:44px; line-height:1.1; font-weight:700; margin:0 0 14px; }
.g4y-special__txt p { font-size:16px; color:#495057; margin:0 0 24px; }
.g4y-special img { position:absolute; right:-40px; top:8%; width:72%; height:auto; z-index:1; }
@media (max-width:900px){
  .g4y-offer, .g4y-offer__pair { grid-template-columns:1fr; }
  .g4y-special { min-height:auto; } .g4y-special__txt { max-width:100%; }
  .g4y-special img { position:static; width:100%; margin-top:18px; }
  .g4y-tile img { position:static; max-height:none; width:60%; margin-left:auto; }
  .g4y-tile { flex-direction:column; align-items:flex-start; }
  .g4y-tile--wide .g4y-tile__txt { max-width:100%; }
}

/* popularne kategorije */
.g4y-pop { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:20px 0 0; }
.g4y-pop__card { display:block; background:#FAFAFA; border-radius:16px; padding:18px; text-align:center;
  text-decoration:none; color:var(--g4y-ink); transition:box-shadow .2s; }
.g4y-pop__card:hover { box-shadow:0 6px 20px rgba(0,0,0,.07); }
.g4y-pop__img { display:block; }
.g4y-pop__img img { width:100%; height:auto; border-radius:12px; }
.g4y-pop__name { display:block; font-size:19px; font-weight:700; margin:14px 0 6px; }
.g4y-pop__cta { display:block; font-size:14px; color:var(--g4y-orange); font-weight:600; }
@media (max-width:900px){ .g4y-pop{ grid-template-columns:repeat(2,1fr); } }

/* zasto mi */
.g4y-why { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:20px 0 0; }
.g4y-why__card { background:var(--g4y-surface); border-radius:var(--g4y-radius-card); padding:28px 24px; text-align:center; }
.g4y-why__ico { display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center;
  border-radius:50%; background:#fff; color:var(--g4y-orange); margin-bottom:14px; }
.g4y-why__ico svg { width:28px; height:28px; }
.g4y-why__t { display:block; font-size:17px; font-weight:600; }
@media (max-width:900px){ .g4y-why{ grid-template-columns:repeat(2,1fr); } }

/* CTA */
.g4y-cta { background:var(--g4y-surface); border-radius:var(--g4y-radius-card); text-align:center;
  padding:52px 24px; margin:64px 0 0; }
.g4y-cta h2 { font-size:32px; font-weight:700; margin:0 0 10px; }
.g4y-cta p { margin:0 0 24px; color:#495057; }

/* koraci */
.g4y-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin:20px 0 0; }
.g4y-step__n { display:inline-flex; width:48px; height:48px; align-items:center; justify-content:center;
  border-radius:50%; background:var(--g4y-orange); color:#fff; font-size:22px; font-weight:700; margin-bottom:14px; }
.g4y-step h3 { font-size:20px; font-weight:700; margin:0 0 8px; }
.g4y-step p { color:#495057; margin:0; }
@media (max-width:900px){ .g4y-steps{ grid-template-columns:1fr; } }

/* ocena */
.g4y-rating { text-align:center; margin:56px 0 0; }
.g4y-rating strong { display:block; font-size:24px; }
.g4y-rating span { color:#6c757d; }

/* FAQ */
.g4y-faq { max-width:900px; margin:16px auto 0; }
.g4y-faq__item { border-bottom:1px solid var(--g4y-line); }
.g4y-faq__item summary { cursor:pointer; font-size:18px; font-weight:600; padding:18px 0; list-style:none; }
.g4y-faq__item summary::-webkit-details-marker { display:none; }
.g4y-faq__item summary::after { content:"+"; float:right; color:var(--g4y-orange); font-size:26px; line-height:1; }
.g4y-faq__item[open] summary::after { content:"\2013"; }
.g4y-faq__item p { margin:0 0 18px; color:#495057; }

/* mreza kategorija na naslovnoj: 4 u redu, kartica kao na starom sajtu */
.home ul.products li.product-category { background:transparent; }
.home ul.products li.product-category img { background:#F6F6F6; border-radius:16px; }

/* WP constrained layout ogranicava max-width — hero mora da ga probije */
.entry-content > .g4y-hero,
.g4y-hero { max-width: none !important; width: 100vw !important; margin-left: calc(50% - 50vw) !important; }

/* fino podesavanje mozaika posle QA */
.g4y-tile--wide img { right:8px; height:88%; }
.g4y-tile img { right:-6px; bottom:0; max-height:70%; }
.g4y-special { align-items:flex-start; }
.g4y-special img { right:-60px; top:auto; bottom:0; width:78%; }

/* mala plocica „Pokloni za decu": slika levo, tekst desno (kao na starom sajtu) */
.g4y-offer__pair .g4y-tile img { left:-14px; right:auto; bottom:0; max-height:66%; }
.g4y-offer__pair .g4y-tile .g4y-tile__txt { margin-left:36%; }
.g4y-offer__pair .g4y-tile--orange .g4y-tile__txt { margin-left:0; }

/* ===== HEADER 1:1 (blok 8) ================================================ */
/* Blocksy header se ne koristi — renderujemo sopstveni (functions.php) */
header.ct-header { display: none !important; }

.g4y-header { background: #fff; border-bottom: 1px solid var(--g4y-line); position: relative; z-index: 100; }
.g4y-header__inner {
  max-width: var(--g4y-container); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 24px;
}
.g4y-hlogo { flex: 0 0 auto; line-height: 0; }
.g4y-hlogo img { height: 42px; width: auto; display: block; }

/* pretraga */
.g4y-hsearch { flex: 1 1 auto; max-width: 430px; display: flex; position: relative; }
.g4y-hsearch input[type=search] {
  width: 100%; height: 48px; padding: 0 56px 0 22px; font-size: 16px;
  border: 1px solid var(--g4y-line); border-radius: 26px; background: #fff; color: var(--g4y-body);
}
.g4y-hsearch input[type=search]:focus { outline: none; border-color: var(--g4y-orange); }
.g4y-hsearch button {
  position: absolute; right: 4px; top: 4px; width: 46px; height: 40px; border: 0; cursor: pointer;
  border-radius: 22px; background: var(--g4y-orange); color: #fff; display: flex;
  align-items: center; justify-content: center;
}
.g4y-hsearch button:hover { background: var(--g4y-orange-dark); }

/* meni */
.g4y-hnav { flex: 0 1 auto; }
.g4y-hmenu { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.g4y-hmenu a { color: var(--g4y-ink); text-decoration: none; font-size: 16px; white-space: nowrap; }
.g4y-hmenu > li { position: static; }
.g4y-hmenu > li > a:hover { color: var(--g4y-orange); }
.g4y-hmenu > li.menu-item-has-children > a::after {
  content: ""; display: inline-block; margin-left: 8px; vertical-align: 2px;
  border: 5px solid transparent; border-top-color: currentColor; border-bottom: 0;
}
/* mega meni */
.g4y-hmenu > li > ul {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border: 1px solid var(--g4y-line); border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08); padding: 28px 32px; margin: 0; list-style: none;
  grid-template-columns: repeat(5, 1fr); gap: 8px 28px;
}
.g4y-hmenu > li:hover > ul { display: grid; }
.g4y-hmenu > li > ul > li > a { display: block; font-weight: 700; margin-bottom: 8px; }
.g4y-hmenu > li > ul > li > ul { list-style: none; margin: 0; padding: 0; }
.g4y-hmenu > li > ul > li > ul a { display: block; padding: 5px 0; font-size: 15px; color: #495057; }
.g4y-hmenu > li > ul > li > ul a:hover { color: var(--g4y-orange); }

/* dugmad naloga */
.g4y-hactions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.g4y-btn-ghost, .g4y-btn-solid {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 11px 22px; border-radius: 26px; font-size: 15px; font-weight: 600; text-decoration: none;
}
.g4y-btn-ghost { border: 1px solid var(--g4y-line); color: var(--g4y-ink); background: #fff; }
.g4y-btn-ghost:hover { border-color: var(--g4y-orange); color: var(--g4y-orange); }
.g4y-btn-solid { background: var(--g4y-orange); color: #fff !important; }
.g4y-btn-solid:hover { background: var(--g4y-orange-dark); }

/* korpa */
.g4y-hcart { display: inline-flex; align-items: center; gap: 8px; color: var(--g4y-ink);
  text-decoration: none; font-size: 15px; flex: 0 0 auto; }
.g4y-hcart:hover { color: var(--g4y-orange); }
.g4y-hcart__total .amount { font-weight: 600; }

/* hamburger (mobilni) */
.g4y-hburger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.g4y-hburger span { display: block; width: 24px; height: 2px; background: var(--g4y-ink); margin: 5px 0; }

@media (max-width: 1200px) {
  .g4y-header__inner { gap: 16px; }
  .g4y-hsearch { max-width: 300px; }
  .g4y-btn-ghost span, .g4y-btn-solid span { display: none; }
  .g4y-btn-ghost, .g4y-btn-solid { padding: 11px 14px; }
}
@media (max-width: 1100px) {
  .g4y-header__inner { flex-wrap: wrap; }
  .g4y-hburger { display: block; order: 2; margin-left: auto; }
  .g4y-hsearch { order: 4; max-width: none; flex: 1 0 100%; }
  .g4y-hnav { order: 5; flex: 1 0 100%; display: none; }
  .g4y-hnav.is-open { display: block; }
  .g4y-hmenu { flex-direction: column; align-items: stretch; gap: 0; }
  .g4y-hmenu > li { border-top: 1px solid var(--g4y-line); }
  .g4y-hmenu > li > a { display: block; padding: 14px 0; font-weight: 600; }
  .g4y-hmenu > li > ul { position: static; display: none; grid-template-columns: 1fr;
    box-shadow: none; border: 0; padding: 0 0 14px; }
  .g4y-hmenu > li.is-open > ul { display: grid; }
  .g4y-hmenu > li:hover > ul { display: none; }
  .g4y-hmenu > li.is-open:hover > ul { display: grid; }
}

/* mega meni u sirini kontejnera, kao na starom sajtu */
.g4y-hmenu > li > ul {
  left: 50%; right: auto; transform: translateX(-50%);
  width: min(var(--g4y-container), 100%);
}
@media (max-width: 1100px) {
  .g4y-hmenu > li > ul { left: 0; transform: none; width: 100%; }
}

/* ===== mega meni: bez „rupe" izmedju stavke i podmenija ==================== */
/* stavka pokriva punu visinu header-a, pa mis ne izlazi iz hover zone */
/* NE koristiti negativne margine — Blocksy override-uje margin-bottom samo na
   stavkama sa podmenijem, pa se tekst pomeri gore. Hover zonu širi ::after most. */
.g4y-hmenu > li { padding: 0; margin: 0; }
/* most preko ivice header-a (1px razmaka je dovoljan da se podmeni zatvori) */
.g4y-hmenu > li.menu-item-has-children::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px; display: none;
}
.g4y-hmenu > li.menu-item-has-children:hover::after,
.g4y-hmenu > li.is-hover::after { display: block; }
/* podmeni ostaje otvoren i dok je mis na njemu (JS klasa .is-hover, 400ms odlaganje) */
.g4y-hmenu > li.is-hover > ul { display: grid; }
.g4y-hmenu > li > ul { margin-top: 0; }

@media (max-width: 1100px) {
  .g4y-hmenu > li { padding: 0; margin: 0; }
  .g4y-hmenu > li.is-hover > ul { display: none; }
  .g4y-hmenu > li.is-open > ul { display: grid; }
}

/* ===== poravnanje stavki menija (strelica je dizala liniju teksta) ========= */
.g4y-hmenu > li > a { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.g4y-hmenu > li.menu-item-has-children > a::after { margin-left: 0; vertical-align: 0; position: relative; top: 1px; }

/* ===== hover na karticama kao na starom sajtu ============================== */
/* kartica postaje narandžasta, tekst beo, slika se blago uveća */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category {
  background: #fff; border-radius: var(--g4y-radius-card); padding: 8px 8px 18px;
  transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out;
}
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product-category:hover {
  background: var(--g4y-orange); box-shadow: 0 6px 18px rgba(243,116,34,.25);
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title a,
.woocommerce ul.products li.product:hover .price,
.woocommerce ul.products li.product:hover .price *,
.woocommerce ul.products li.product:hover .entry-meta,
.woocommerce ul.products li.product:hover .entry-meta a,
.woocommerce ul.products li.product-category:hover h2,
.woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title {
  color: #fff !important;
}
/* okvir slike: zaobljen, seče zoom */
.woocommerce ul.products li.product figure,
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product-category a > img,
.woocommerce ul.products li.product-category img {
  border-radius: 12px; overflow: hidden;
}
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product-category img {
  transition: transform .4s ease; will-change: transform;
}
.woocommerce ul.products li.product:hover img,
.woocommerce ul.products li.product-category:hover img { transform: scale(1.06); }

/* popularne kategorije na naslovnoj — isti efekat */
.g4y-pop__card { transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out; }
.g4y-pop__img { display: block; border-radius: 12px; overflow: hidden; }
.g4y-pop__img img { transition: transform .4s ease; }
.g4y-pop__card:hover { background: var(--g4y-orange); }
.g4y-pop__card:hover .g4y-pop__name, .g4y-pop__card:hover .g4y-pop__cta { color: #fff; }
.g4y-pop__card:hover img { transform: scale(1.06); }

/* stavke menija u istoj liniji (Blocksy nulira margin-bottom na .menu-item-has-children) */
.g4y-hmenu > li, .g4y-hmenu > li.menu-item-has-children { margin: 0 !important; padding: 0 !important; }
.g4y-hmenu { align-items: center; }

/* podmeni kreće tačno od donje ivice stavke (bez rupe), a gornji padding
   vraća sadržaj na istu visinu kao pre — pa hover nikad ne pukne */
.g4y-hmenu > li > ul { top: calc(100% - 25px); padding-top: 53px; }
.g4y-hmenu > li.menu-item-has-children::after { display: none !important; }
@media (max-width: 1100px) {
  .g4y-hmenu > li > ul { top: auto; padding-top: 0; }
}

/* ===== FUTER 1:1 (blok 9) ================================================= */
footer.ct-footer { display: none !important; }

/* „Treba vam pomoć?" panel */
.g4y-help {
  max-width: var(--g4y-container); margin: 64px auto 48px; display: grid;
  grid-template-columns: 1fr 480px; align-items: stretch;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.05);
}
.g4y-help__txt { padding: 44px 48px; }
.g4y-help__txt h2 { color: var(--g4y-orange); font-size: 30px; font-weight: 600; margin: 0 0 14px; }
.g4y-help__txt p { color: #495057; margin: 0; max-width: 560px; }
.g4y-help__cta {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--g4y-orange); color: #fff !important; font-size: 22px; text-decoration: none;
  padding: 44px 32px 44px 64px;
}
.g4y-help__cta::before {
  content: ""; position: absolute; left: -60px; top: 0; bottom: 0; width: 120px;
  background: var(--g4y-orange); border-radius: 50%;
}
.g4y-help__cta span { position: relative; }
.g4y-help__cta:hover { background: var(--g4y-orange-dark); }
.g4y-help__cta:hover::before { background: var(--g4y-orange-dark); }

/* kolone */
.g4y-footer { max-width: var(--g4y-container); margin: 0 auto; padding: 0 24px 40px; }
.g4y-footer__cols { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1fr; gap: 32px; }
.g4y-fcol h3 {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #6c757d;
  font-weight: 600; margin: 0 0 18px;
}
.g4y-fcol ul { list-style: none; margin: 0; padding: 0; }
.g4y-fcol li { margin-bottom: 10px; }
.g4y-fcol a { color: var(--g4y-ink); text-decoration: none; }
.g4y-fcol a:hover { color: var(--g4y-orange); }
.g4y-fcol p { margin: 0 0 12px; color: var(--g4y-body); }
.g4y-flabel { color: var(--g4y-orange) !important; font-weight: 600; margin-bottom: 4px !important; }
.g4y-fcol--desno { text-align: right; }
.g4y-fmail { color: var(--g4y-orange) !important; }
.g4y-fsoc a { display: inline-block; margin-left: 16px; }

/* logotipi kartica i banke */
.g4y-fpay {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px;
  padding: 28px 0 8px; margin-top: 32px; border-top: 1px solid var(--g4y-line);
}
.g4y-fpay img { height: 30px; width: auto; display: block; }
.g4y-fpay a { display: block; }
.g4y-fcopy { text-align: center; color: #6c757d; font-size: 14px; padding: 12px 0 0; }

@media (max-width: 900px) {
  .g4y-help { grid-template-columns: 1fr; }
  .g4y-help__cta { padding: 26px; }
  .g4y-help__cta::before { display: none; }
  .g4y-footer__cols { grid-template-columns: 1fr 1fr; }
  .g4y-fcol--desno { text-align: left; }
  .g4y-fsoc a { margin: 0 16px 0 0; }
  .g4y-fpay img { height: 24px; }
}

/* ===== pojavljivanje reda kartica pri skrolu ============================== */
.g4y-rev { opacity: 0; transform: translateY(40px) scale(.97); }
/* VAŽNO: pravilo mora biti specifičnije od `.woocommerce ul.products li.product`
   (hover tranzicija), inače ono pobedi i pojavljivanje bude trenutno. */
.woocommerce ul.products li.product.g4y-rev.g4y-rev-in,
.woocommerce ul.products li.product-category.g4y-rev.g4y-rev-in,
.g4y-rev.g4y-rev-in {
  opacity: 1; transform: none;
  transition: opacity .9s ease,
              transform .9s cubic-bezier(.16,.84,.28,1),
              background-color .2s ease-in-out,
              box-shadow .2s ease-in-out;
}
/* hover zoom slike mora da nadjača transform kartice */
.woocommerce ul.products li.product.g4y-rev-in:hover img,
.woocommerce ul.products li.product-category.g4y-rev-in:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .g4y-rev, .g4y-rev.g4y-rev-in { opacity: 1; transform: none; transition: none; }
}

/* ===== mobilni futer (≤600px): 2 kolone koje mogu da se skupe, bez horizontalnog skrola ===== */
@media (max-width: 600px) {
    .g4y-footer__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 16px; }
    .g4y-fcol { min-width: 0; }
    .g4y-fcol a, .g4y-fcol li, .g4y-fcol p, .g4y-fcol h3 { overflow-wrap: anywhere; }
    .g4y-footer { padding: 0 16px 32px; }
    .g4y-fpay img { height: 20px; }
}
