/* Shared: announcement, header, footer, buttons */

.fy-announce {
  background: linear-gradient(90deg, var(--blue), #1266d0);
  color: #fff;
  padding: 9px 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
}

.fy-ticker {
  display: flex;
  animation: fy-ticker 22s linear infinite;
  width: max-content;
  gap: 80px;
}

.fy-ticker span {
  white-space: nowrap;
}

.fy-ticker strong {
  color: #a8e6cf;
}

@keyframes fy-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.fy-header {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 200;
  padding: 0 40px;
}

.fy-header-inner {
  /* 1200px column (the 40px gutter lives on .fy-header) so the logo lines up
     with page content site-wide — matches the homepage. */
  max-width: 1200px;
  margin: 0 auto;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.fy-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.fy-logo--image {
  gap: 0;
}

.fy-logo-img,
.fy-logo .custom-logo,
.fy-logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 40px;
  max-width: 200px;
  object-fit: contain;
  object-position: left center;
}

.fy-logo-bolt {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--blue), var(--green));
  clip-path: polygon(55% 0%, 100% 0%, 45% 45%, 85% 45%, 0% 100%, 30% 55%, 0% 55%);
}

.fy-logo-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fy-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.fy-nav > a,
.fy-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s;
}

.fy-nav > a:hover {
  color: var(--text);
}

/* ── Dropdown (submenu) for menu items with children ─────────────── */
.fy-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.fy-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.fy-nav-item:hover > .fy-nav-link,
.fy-nav-item:focus-within > .fy-nav-link {
  color: var(--text);
}

.fy-nav-caret {
  font-size: 10px;
  line-height: 1;
  transition: transform 0.2s;
}

.fy-nav-item:hover .fy-nav-caret,
.fy-nav-item:focus-within .fy-nav-caret {
  transform: rotate(180deg);
}

.fy-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 60;
}

/* Invisible bridge so the dropdown stays open while moving the cursor down. */
.fy-nav-dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.fy-nav-item:hover .fy-nav-dropdown,
.fy-nav-item:focus-within .fy-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fy-nav .fy-nav-dropdown a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.fy-nav .fy-nav-dropdown a:hover {
  background: var(--surface);
  color: var(--blue);
}

.fy-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fy-btn-cta,
.fy-hdr-cta {
  background: linear-gradient(90deg, var(--blue), #1677d2);
  color: #fff;
  padding: 9px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: opacity 0.2s;
  display: inline-block;
}

.fy-btn-cta:hover,
.fy-hdr-cta:hover {
  opacity: 0.88;
}

.fy-account-wrap,
.fy-cart-wrap,
.fy-cart-btn {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  background: #fff;
  color: var(--text);
  flex-shrink: 0;
}

.fy-account-wrap:hover,
.fy-cart-wrap:hover,
.fy-cart-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.fy-account-wrap.is-active {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
}

/* Inert cart icon (shown on the cart page itself). */
.fy-cart-wrap--static {
  cursor: default;
}

.fy-cart-wrap--static:hover {
  border-color: var(--border);
  color: var(--text);
}

/* Logged-in user initials shown inside the account button. */
.fy-account-initials {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}

.fy-cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 17px;
  height: 17px;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}

.fy-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}

.fy-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.25s;
}

.fy-nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.fy-nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.fy-nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.fy-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  top: 68px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  z-index: 199;
  flex-direction: column;
  padding: 32px 24px;
  gap: 4px;
  border-top: 1px solid var(--border);
}

.fy-mobile-nav.open {
  display: flex;
}

.fy-mobile-nav a {
  font-size: 22px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  color: var(--text);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.fy-mobile-nav a.mob-cta {
  margin-top: 16px;
  background: linear-gradient(90deg, var(--blue), #1677d2);
  color: #fff;
  padding: 14px;
  border-radius: 10px;
  text-align: center;
  font-size: 18px;
  border-bottom: none;
}

/* Submenu (e.g. Shop children) shown indented under its parent on mobile. */
.fy-mobile-nav .fy-mnav-sub {
  display: flex;
  flex-direction: column;
  padding-left: 14px;
  border-left: 2px solid var(--border);
  margin: 4px 0 8px;
}

.fy-mobile-nav a.fy-mnav-sublink {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  padding: 9px 0;
}

.fy-mobile-nav a.fy-mnav-sublink:last-child {
  border-bottom: none;
}

.fy-btn-main {
  background: linear-gradient(90deg, var(--blue), #1677d2);
  color: #fff;
  padding: 13px 28px;
  border-radius: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: opacity 0.2s, transform 0.15s;
  display: inline-block;
}

.fy-btn-main:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Breadcrumbs (pages + blog) */
.fy-blog-breadcrumb {
  margin-bottom: 24px;
}

.fy-blog-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--muted);
}

.fy-blog-breadcrumb-item:not(:last-child)::after {
  content: '›';
  margin-left: 6px;
  color: var(--muted);
}

.fy-blog-breadcrumb a {
  color: var(--muted);
  transition: color 0.2s;
}

.fy-blog-breadcrumb a:hover {
  color: var(--blue);
}

.fy-blog-breadcrumb span[aria-current='page'] {
  color: var(--text);
}

.fy-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 52px 40px 28px;
}

.fy-footer-top {
  display: grid;
  /* Narrower brand column on the left, wider newsletter column on the right. */
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: 48px;
  margin-bottom: 44px;
}

.fy-footer-brand p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 12px;
  max-width: 240px;
}

.fy-fcol h4 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 16px;
}

.fy-fcol a {
  display: block;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 9px;
  transition: color 0.2s;
}

.fy-fcol a:hover {
  color: var(--blue);
}

/* Footer column widget areas: strip list chrome so a Navigation Menu widget
   (<ul class="menu"><li><a>) inherits the .fy-fcol a link styling above. */
.fy-fcol .fy-fcol-widget + .fy-fcol-widget {
  margin-top: 22px;
}

.fy-fcol-widget ul,
.fy-fcol-widget .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fy-fcol-widget li {
  margin: 0;
}

.fy-pay-row {
  margin-top: 18px;
}

.fy-pay-methods {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

/* Newsletter column (4th footer column) */
.fy-newsletter-copy {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 300px;
}

.fy-newsletter-row {
  display: flex;
  gap: 8px;
  max-width: 340px;
}

.fy-newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}

.fy-newsletter-input:focus {
  outline: none;
  border-color: var(--blue);
}

.fy-newsletter-btn {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s;
}

.fy-newsletter-btn:hover {
  opacity: 0.9;
}

/* Match a Fluent Forms newsletter widget in the footer column to the bundled
   signup form: email input + Subscribe button inline. Scoped to the footer
   newsletter column so other Fluent Forms on the site are unaffected. */
.fy-fcol--newsletter .fluentform {
  margin: 0;
}

.fy-fcol--newsletter .fluentform form fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  max-width: 340px;
  margin: 0;
  padding: 0;
  border: 0;
}

.fy-fcol--newsletter .fluentform legend {
  position: absolute;
}

.fy-fcol--newsletter .fluentform .ff-el-group {
  flex: 1 1 170px;
  margin: 0;
}

.fy-fcol--newsletter .fluentform .ff_submit_btn_wrapper {
  flex: 0 0 auto;
}

.fy-fcol--newsletter .fluentform .ff-el-input--content {
  margin: 0;
}

.fy-fcol--newsletter .fluentform .ff-el-form-control {
  width: 100%;
  height: auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  background: #fff;
  color: var(--text);
  box-shadow: none;
}

.fy-fcol--newsletter .fluentform .ff-el-form-control:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: none;
}

.fy-fcol--newsletter .fluentform .ff-btn-submit,
.fy-fcol--newsletter .fluentform .wpf_has_custom_css.ff-btn-submit {
  min-width: 0 !important;
  width: auto;
  margin: 0;
  padding: 10px 16px !important;
  background: var(--blue) !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: opacity 0.2s;
}

.fy-fcol--newsletter .fluentform .ff-btn-submit:hover,
.fy-fcol--newsletter .fluentform .wpf_has_custom_css.ff-btn-submit:hover {
  background: var(--blue) !important;
  border: none !important;
  color: #fff !important;
  opacity: 0.9;
}

.fy-fcol--newsletter .fluentform .ff-message-success,
.fy-fcol--newsletter .fluentform .ff-el-is-error .text-danger,
.fy-fcol--newsletter .fluentform .error {
  font-size: 12px;
  margin-top: 8px;
}

.fy-footer-btm {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fy-copy {
  font-size: 12px;
  color: var(--muted);
}

.fy-footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fy-social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border: 1px solid var(--border);
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}

.fy-social-link:hover {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}

.fy-social-link svg {
  width: 16px;
  height: 16px;
  display: block;
}

.fy-btt {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 42px;
  height: 42px;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(30, 144, 255, 0.3);
}

.fy-btt.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

@media (max-width: 1024px) {
  .fy-footer {
    padding-left: 24px;
    padding-right: 24px;
  }

  .fy-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 768px) {
  .fy-nav,
  .fy-btn-cta,
  .fy-hdr-cta {
    display: none;
  }

  .fy-nav-toggle {
    display: flex;
  }

  .fy-header {
    padding: 0 20px;
  }

  .fy-footer {
    padding: 40px 20px 20px;
  }

  .fy-footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fy-footer-btm {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }

  .fy-footer-social {
    justify-content: center;
  }
}

/* ─ WooCommerce notice boxes ────────────────────────────────────────
   Rendered into .fy-wc-notices by assets/js/notices.js. Lives here rather than
   in front-page.css because the container now appears on ordinary pages too,
   which never load that stylesheet. Only the box is styled here; the page
   gutters stay with the templates that need them. */
.fy-wc-notices .woocommerce-error,
.fy-wc-notices .woocommerce-message,
.fy-wc-notices .woocommerce-info{
  margin:0;padding:14px 18px;border:1px solid;border-radius:12px;
  font-size:14px;line-height:1.55;list-style:none;
}
/* Both kinds use the same two-column grid: the icon in column 1, all content in
   column 2. Grid rather than flex because an error is a <ul> whose items must
   stack, and because a bare text node in a wrapping flex row drops below the
   icon instead of sitting beside it once the text is long enough to wrap. */
.fy-wc-notices .woocommerce-error,
.fy-wc-notices .woocommerce-message,
.fy-wc-notices .woocommerce-info{
  display:grid;grid-template-columns:20px minmax(0,1fr);
  column-gap:12px;row-gap:10px;align-items:start;
}
.fy-wc-notices .woocommerce-message,
.fy-wc-notices .woocommerce-info{border-color:#bfdbfe;background:var(--blue-soft);color:var(--text)}
.fy-wc-notices .woocommerce-error{row-gap:6px;border-color:#fecaca;background:#fef2f2;color:#991b1b}
.fy-wc-notices .woocommerce-error li{margin:0;padding:0;list-style:none;grid-column:2}
/* Keep the button in the content column, sized to itself. */
.fy-wc-notices .woocommerce-message .button,
.fy-wc-notices .woocommerce-info .button{grid-column:2;justify-self:start}
.fy-wc-notices .woocommerce-error+.woocommerce-message,
.fy-wc-notices .woocommerce-message+.woocommerce-error,
.fy-wc-notices .woocommerce-error+.woocommerce-error,
.fy-wc-notices .woocommerce-message+.woocommerce-message{margin-top:12px}
/* WooCommerce absolutely-positions an icon-font glyph at left:1.5em and pads the
   box to clear it. The padding above removes that clearance, so the glyph lands
   on top of the text — hide it and supply our own leading icon instead, the same
   way .fy-woo-main does. ::after with order:-1 because ::before is WooCommerce's. */
.fy-wc-notices .woocommerce-message::before,
.fy-wc-notices .woocommerce-info::before,
.fy-wc-notices .woocommerce-error::before{content:none !important}
/* Pinned explicitly: ::after comes last in the DOM, so auto-placement would put
   it after the content. The 2px nudge optically centres it on the first line. */
.fy-wc-notices .woocommerce-message::after,
.fy-wc-notices .woocommerce-info::after,
.fy-wc-notices .woocommerce-error::after{
  content:'';grid-column:1;grid-row:1;margin-top:2px;width:20px;height:20px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.fy-wc-notices .woocommerce-message::after,
.fy-wc-notices .woocommerce-info::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231E90FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.fy-wc-notices .woocommerce-error::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23991B1B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.01'/%3E%3C/svg%3E");
}
/* WooCommerce drops a "View cart"-style button into some notices. */
.fy-wc-notices .button{
  padding:9px 18px;border:none;border-radius:9px;
  background:var(--blue);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;
  transition:opacity .2s;
}
.fy-wc-notices .button:hover{opacity:.9;color:#fff}
@media(max-width:768px){
  .fy-wc-notices .woocommerce-message .button,
  .fy-wc-notices .woocommerce-info .button{justify-self:stretch;text-align:center}
}

/* On an ordinary page the container gets no gutter rules (those live in
   front-page.css, which such pages don't load), so it needs its own gap before
   the page title. Home and shop are untouched — they already pad themselves. */
.fy-page .fy-wc-notices:has(.woocommerce-error,.woocommerce-message,.woocommerce-info){margin-bottom:22px}

/* ─ Announcement bar: motion and readability ─────────────────────────
   The bar scrolls continuously, so a message can slide out of view mid-sentence
   and there is no way to catch up with it. Pause on hover and on keyboard focus
   so it can be read, and stop it entirely for anyone who has asked for reduced
   motion — a continuously moving band is a vestibular trigger and WCAG 2.2.2
   requires a way to stop it. */
.fy-announce:hover .fy-ticker,
.fy-announce:focus-within .fy-ticker {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .fy-ticker {
    animation: none;
    width: auto;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
  }

  /* The duplicate set only exists to make the scroll loop seamless. */
  .fy-ticker .fy-ticker-dup {
    display: none;
  }
}

/* ─ reCAPTCHA badge ──────────────────────────────────────────────────
   Hidden with visibility rather than display:none — that is the method
   Google documents, and it keeps the widget functional. The badge is
   position:fixed bottom-right, where it collided with the WhatsApp button,
   the back-to-top control and, on checkout, the primary action.

   NOTE: Google's terms require visible attribution wherever the badge is
   hidden — "This site is protected by reCAPTCHA and the Google Privacy Policy
   and Terms of Service apply", with both links. That text is NOT yet on the
   site; without it Google may disable the site key, which would break the
   forms. See fyool_recaptcha_attribution() when that is added. */
.grecaptcha-badge {
  visibility: hidden;
}