/* Sylvana sitewide header tweaks.
   Loaded on every page (see sy_site_styles_hashed in sy-auto-discount.php). */

/* ---- Header links: uppercase, never underlined ---- */
.bde-header-builder-1339-100 .bde-text-link,
.bde-header-builder-1339-100 .bde-text-link:link,
.bde-header-builder-1339-100 .bde-text-link:visited,
.bde-header-builder-1339-100 .bde-text-link:hover,
.bde-header-builder-1339-100 .bde-text-link:focus,
.bde-header-builder-1339-100 .bde-text-link:active,
.bde-header-builder-1339-100 .bde-text-link > *,
.bde-header-builder-1339-100 .breakdance-menu-link,
.bde-header-builder-1339-100 .breakdance-menu-link:hover,
.bde-header-builder-1339-100 .breakdance-menu-link:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 0 !important;
}

/* the menu's built-in underline effect draws via a pseudo element */
.bde-header-builder-1339-100 .breakdance-menu-link::before,
.bde-header-builder-1339-100 .breakdance-menu-link::after,
.bde-header-builder-1339-100 .breakdance-menu-item::before,
.bde-header-builder-1339-100 .breakdance-menu-item::after {
  display: none !important;
  content: none !important;
}

/* uppercase, and keep the set evenly weighted */
.bde-header-builder-1339-100 .bde-text-link,
.bde-header-builder-1339-100 .breakdance-menu-link {
  text-transform: uppercase !important;
  letter-spacing: 0.03em;
  font-weight: 600 !important;
}

/* ---- Product gallery: match the 4:3 ratio used by the homepage cards ---- */
/* Cards are 337x252 (1.336) with object-fit:contain. Product pages had no fixed
   ratio, so a near-square source (e.g. Nose in the Bog, 524x490) rendered square. */
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image a {
  display: block;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  background: #FFFFFF;
}
body.single-product .woocommerce-product-gallery__image img,
body.single-product .woocommerce-product-gallery__image a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* never crop the artwork */
  object-position: center !important;
  aspect-ratio: auto !important;
}
/* gallery thumbnails, same ratio */
body.single-product .flex-control-thumbs li img,
body.single-product .woocommerce-product-gallery__wrapper .flex-control-nav img {
  aspect-ratio: 4 / 3;
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
}

/* ---- Trust bar: bordered pills with an icon each ---- */
.sy-trust {
  gap: 12px 16px !important;
}
.sy-trust .sy-trust-item {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  padding: 10px 18px;
  border: 1px solid #DDE0F8;
  border-radius: 999px;
  background: #FFFFFF;
  color: #374151 !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease;
}
.sy-trust .sy-trust-item:hover {
  border-color: #2F2FC9;
  background: #F7F8FE;
}
/* icon drawn as a mask so one rule controls the colour */
.sy-trust .sy-trust-item::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background-color: #2F2FC9;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
}
/* 1. Fine-art quality A1 prints - award rosette */
.sy-trust .sy-trust-item:nth-of-type(1)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><path d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><path d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/></svg>");
}
/* 2. Original works available - picture frame */
.sy-trust .sy-trust-item:nth-of-type(2)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/></svg>");
}
/* 3. Wholesale enquiries welcome - handshake / briefcase */
.sy-trust .sy-trust-item:nth-of-type(3)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='14' x='2' y='7' rx='2'/><path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='14' x='2' y='7' rx='2'/><path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/></svg>");
}
/* 4. UK delivery - delivery van */
.sy-trust .sy-trust-item:nth-of-type(4)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 17h4V5H2v12h3'/><path d='M20 17h2v-3.34a4 4 0 0 0-1.17-2.83L19 9h-5v8h1'/><circle cx='7.5' cy='17.5' r='2.5'/><circle cx='17.5' cy='17.5' r='2.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 17h4V5H2v12h3'/><path d='M20 17h2v-3.34a4 4 0 0 0-1.17-2.83L19 9h-5v8h1'/><circle cx='7.5' cy='17.5' r='2.5'/><circle cx='17.5' cy='17.5' r='2.5'/></svg>");
}
@media (max-width: 767px) {
  .sy-trust { gap: 10px !important; }
  .sy-trust .sy-trust-item {
    font-size: 14px; padding: 9px 14px; gap: 7px;
    white-space: normal;
  }
  .sy-trust .sy-trust-item::before { flex-basis: 16px; width: 16px; height: 16px; }
}

/* ---- Contact strip: hover only. Colours live in the Breakdance selector
   store (sy-contactbar-band / -link / -sep), which loads after this file. ---- */
.sy-contactbar a:hover,
.sy-contactbar .sy-contactbar-link:hover {
  color: #14163F !important;
  text-decoration: underline !important;
}

/* ---- Special Offers button, now living in the white contact strip ---- */
/* Trim it so the strip stays slim, and push it to the right of the rail. */
.sy-contactbar .sy-nav-cta {
  padding: 6px 16px !important;
  font-size: 13px !important;
  box-shadow: none !important;      /* the glow was for the white header */
}
.sy-contactbar .sy-nav-cta:hover {
  background-color: #14163F !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.sy-contactbar .sy-nav-cta .sy-nav-cta-tag {
  font-size: 10px !important;
  padding: 2px 7px !important;
}
/* keep the strip slim now that it holds a button */
.sy-contactbar {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  justify-content: flex-end !important;   /* phone, email, then the button, all right */
  gap: 10px 20px !important;
}
@media (max-width: 767px) {
  /* Contact details centre on their row; the button gets its own row, right-aligned. */
  .sy-contactbar {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    justify-content: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* the button claims a full row, then aligns itself to the right end of it */
  .sy-contactbar .sy-nav-cta {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: flex-end !important;
  }
  /* phone and email share the row above */
  .sy-contactbar .sy-contactbar-link {
    flex: 0 0 auto;
  }
}

/* ---- Cart counter: always visible ---- */
/* Breakdance sets background-color: var(--bde-palette-color-1), but that variable
   is undefined on this site, so it fell back to transparent: white text on a white
   header, i.e. invisible until a hover state painted something behind it. */
.bde-mini-cart-1339-117 .bde-mini-cart-toggle__counter,
.bde-header-builder-1339-100 .bde-mini-cart-toggle__counter {
  background-color: #2F2FC9 !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border: 2px solid #FFFFFF;   /* lift it off the cart glyph */
  box-sizing: content-box;
  top: -6px !important;
  right: -8px !important;
}
/* keep it visible on hover and focus too */
.bde-mini-cart-1339-117 .bde-mini-cart-toggle:hover .bde-mini-cart-toggle__counter,
.bde-mini-cart-1339-117 .bde-mini-cart-toggle:focus .bde-mini-cart-toggle__counter {
  background-color: #14163F !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* the toggle needs room so the badge is not clipped */
.bde-mini-cart-1339-117 .bde-mini-cart-toggle {
  overflow: visible !important;
  position: relative !important;
}
/* an empty cart should show no badge at all, not a "0" */
.bde-mini-cart-1339-117 .bde-mini-cart-toggle__counter[data-count="0"],
.bde-mini-cart-1339-117 .bde-mini-cart-toggle__counter[data-count=""] {
  display: none !important;
}