/* WRAPING – unified menu and cards 1.0.0.
   Source styling: Wrapping Home Benefits v1.5 and NatureFood Theme v1.6.3.
   No global form/button changes, no absolute repositioning, no product image sizing changes. */

/* Earlier “Jednotná hlavička” plugin added a 30px pseudo-banner on
   inner pages only. The homepage does not have it. Remove the extra space
   so all pages start the SAME as the homepage. */
html body:not(.home):not(.front-page)::before {
  content: none !important;
  display: none !important;
  height: 0 !important;
  border: 0 !important;
}

/* Main nav always behaves like the desktop homepage: centered, stable spacing,
   five primary destinations (extra labels removed in JS/PHP). */
@media (min-width: 901px) {
  html body header.masthead .mainnav .nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap;
    gap: clamp(22px, 2.5vw, 44px) !important;
    min-width: 0;
    height: 100%;
  }
  html body header.masthead .mainnav .nav-inner > a,
  html body header.masthead .mainnav .nav-inner > button {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .145em;
    text-transform: uppercase;
  }
}
/* No modifications to upper currency selector, logo, search, account, bag or menu toggle. */

/* Shared card vocabulary. Keep current layouts and responsive dimensions. */
:root {
  --wrp-ui-gold: #d6ad6d;
  --wrp-ui-goldbright: #f0d39a;
  --wrp-ui-card-border: rgba(214,173,109,.26);
  --wrp-ui-card-bg: linear-gradient(135deg, rgba(42,32,22,.93), rgba(22,18,14,.98) 58%, rgba(37,29,21,.94));
  --wrp-ui-card-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.18);
}

/* CONTACT: black-gold homepage-style large information/form panels. */
html body .nf-contact-bleed .nf-contact-panel {
  border: 1px solid var(--wrp-ui-card-border) !important;
  border-radius: 0 !important;
  background: var(--wrp-ui-card-bg) !important;
  box-shadow: var(--wrp-ui-card-shadow) !important;
  color: #f4e7d4;
}
html body .nf-contact-bleed .nf-contact-panel h2 { color: #f9ebdb; }
html body .nf-contact-bleed .nf-contact-panel h2 span { color: var(--wrp-ui-gold); }
html body .nf-contact-bleed .nf-contact-panel .nf-contact-intro,
html body .nf-contact-bleed .nf-contact-panel .nf-contact-detail p { color: #d1c1ad; }
html body .nf-contact-bleed .nf-contact-panel .nf-contact-detail h3 { color: #f9ecda; }
html body .nf-contact-bleed .nf-contact-panel .nf-contact-detail > .nf-icon {
  color: var(--wrp-ui-gold);
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  border: 1px solid rgba(224,188,132,.46);
  background: radial-gradient(circle at 35% 35%,rgba(255,223,169,.15),rgba(214,173,109,.08) 36%,rgba(18,15,12,.95) 100%);
  box-shadow: 0 0 0 4px rgba(214,173,109,.08), 0 0 24px rgba(214,173,109,.13);
}
/* Form inputs match the dark-warm cards, without modifying validation/functionality. */
html body .nf-contact-bleed .nf-contact-field :is(input,select,textarea) {
  background: #1b1714 !important;
  border-color: rgba(214,173,109,.29) !important;
  border-radius: 2px !important;
  color: #f7f0e6 !important;
}
html body .nf-contact-bleed .nf-contact-field :is(input,select,textarea):focus {
  border-color: var(--wrp-ui-goldbright) !important;
  box-shadow: 0 0 0 2px rgba(214,173,109,.16) !important;
}
html body .nf-contact-bleed .nf-contact-submit { border-radius: 2px !important; }

/* CONTACT small benefit cards: use the SAME dimensions, background, border,
   golden icon circles and mobile grid logic as four benefits on homepage. */
html body .nf-contact-bleed .nf-contact-benefits {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px !important;
  max-width: 1300px;
  margin-top: 26px;
  padding: 14px;
  border: 1px solid rgba(214,173,109,.20);
  background: linear-gradient(180deg,#120f0c,#15110d);
}
html body .nf-contact-bleed .nf-contact-benefit {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 106px;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(214,173,109,.22) !important;
  border-radius: 0;
  background: var(--wrp-ui-card-bg);
  box-shadow: var(--wrp-ui-card-shadow);
}
html body .nf-contact-bleed .nf-contact-benefit:last-child { border-right: 1px solid rgba(214,173,109,.22) !important; }
html body .nf-contact-bleed .nf-contact-benefit > .nf-icon {
  box-sizing: border-box;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  padding: 14px;
  border: 1px solid rgba(224,188,132,.46);
  border-radius: 50%;
  color: var(--wrp-ui-gold);
  background: radial-gradient(circle at 35% 35%,rgba(255,223,169,.15),rgba(214,173,109,.08) 36%,rgba(18,15,12,.95));
  box-shadow: 0 0 0 4px rgba(214,173,109,.08),0 0 26px rgba(214,173,109,.16);
}
html body .nf-contact-bleed .nf-contact-benefit strong { color:#fbefdf; font-weight:600; font-size:14px; line-height:1.25; }
html body .nf-contact-bleed .nf-contact-benefit span { color:#c6b4a3; font-size:12px; line-height:1.4; }

/* Non-home informational cards across theme pages: same elegant gold borders
   and warm-dark layers. Product images/cards keep their established layout. */
html body:not(.home) :is(.directory-panel, .editorial-card) {
  border: 1px solid var(--wrp-ui-card-border) !important;
  border-radius: 0 !important;
  background: var(--wrp-ui-card-bg) !important;
  box-shadow: var(--wrp-ui-card-shadow) !important;
}
html body:not(.home) :is(.collection-card, .nf-home-product-card, .woocommerce ul.products li.product, .wc-block-grid__product) {
  border-color: var(--wrp-ui-card-border) !important;
  border-radius: 0 !important;
}
html body:not(.home) :is(.collection-card, .nf-home-product-card):hover { border-color: var(--wrp-ui-gold) !important; }

@media (max-width: 980px) {
  html body .nf-contact-bleed .nf-contact-benefits { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  html body .nf-contact-bleed .nf-contact-benefits { padding: 8px; gap: 8px !important; }
  html body .nf-contact-bleed .nf-contact-benefit { padding: 12px 10px; gap: 10px; min-height: 92px; }
  html body .nf-contact-bleed .nf-contact-benefit > .nf-icon { flex-basis: 42px; width: 42px; height: 42px; padding: 9px; }
  html body .nf-contact-bleed .nf-contact-benefit strong { font-size: 11px; }
  html body .nf-contact-bleed .nf-contact-benefit span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .nf-contact-bleed .nf-contact-benefit { transition: none !important; }
}