/*
Theme Name: Botiga Child
Theme URI: https://americanlifestylegoods.com/
Description: Custom child theme for American Lifestyle Goods. Inherits Botiga; selectively overrides templates (footer, header, hero, WC templates) and adds site-wide CSS controlled via this file instead of the customizer's Additional CSS textbox.
Author: ALG Tech
Author URI: https://americanlifestylegoods.com/
Template: botiga
Version: 1.0.38
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: botiga-child
*/

/* ═══════════════════════════════════════════
   DESIGN TOKENS — Single source of truth
   Change a value here, it propagates everywhere.
   ═══════════════════════════════════════════ */

:root {
  /* ── COLOR — Primary brand palette ── */
  --c-red:            #ED1C25;
  --c-blue-mid:       #2260D2;
  --c-blue-deep:      #1236A1;   /* Also used for the announcement bar */
  --c-cream:          #FCEBC8;
  --c-ivory:          #FEF8EB;
  /* Primary CTA / accent — white on dark. Every place that references --c-yellow now paints white. */
  --c-yellow:         #FFFFFF;   /* alias kept so existing var(--c-yellow) callsites cascade to white */
  --c-yellow-dark:    #E2E2E2;   /* slight gray for hover/pressed state */
  --c-accent:         #FFFFFF;
  --c-accent-dark:    #E2E2E2;

  /* ── COLOR — Neutrals ── */
  --c-white:          #FFFFFF;
  --c-gray-100:       #C7C7C7;
  --c-gray-300:       #828282;
  --c-gray-500:       #333333;   /* Borders, dividers */
  --c-bg-card:        #222222;
  --c-bg-page:        #1F1F21;   /* Dark page background */
  --c-text-muted:     #888888;

  /* ── TYPOGRAPHY ── */
  --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:     'Oswald', sans-serif;

  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-black:         800;

  --fs-xs:            0.65rem;
  --fs-sm:            0.75rem;
  --fs-base:          0.85rem;
  --fs-md:            0.875rem;
  --fs-lg:            1rem;
  --fs-xl:            1.05rem;

  /* ── RADIUS ── */
  --radius-sm:        2px;
  --radius-md:        4px;
  --radius-lg:        6px;
  --radius-pill:      999px;

  /* ── TRANSITIONS ── */
  --t-fast:           0.15s;
  --t-med:            0.2s;
  --t-slow:           0.3s;

  /* ── NAVBAR ── */
  --navbar-h-padding: 24px;
  --navbar-v-padding: 24px;
  --navbar-bg:        var(--c-bg-page);
  --navbar-border:    1px solid var(--c-gray-500);
  --logo-h:           110px;

  /* ── ANNOUNCEMENT BAR ── */
  --announce-bg:      var(--c-blue-deep);
  --announce-fg:      var(--c-white);
  --announce-h:       40px;
  --announce-fs:      0.85rem;

  /* ── Z-INDEX SCALE ── */
  --z-base:           1;
  --z-nav:            100;
  --z-dropdown:       200;
  --z-modal:          1000;
}

/* ═══════════════════════════════════════════
   FOOTER — ALG DARK THEME
   ═══════════════════════════════════════════ */

.bhfb-footer { padding: 4rem 0 2rem !important; }

.bhfb-footer .widget-title,
.bhfb-footer h2,
.bhfb-footer h3,
.bhfb-footer h4,
.bhfb-footer h5 {
  color: var(--c-white) !important;
  text-transform: lowercase !important;
  font-size: var(--fs-lg) !important;
  letter-spacing: 0 !important;
  font-weight: var(--fw-medium) !important;
  margin: 0 0 1.5rem !important;
  white-space: nowrap;
  display: block;
}

.bhfb-footer .widget-title::first-letter,
.bhfb-footer h2::first-letter,
.bhfb-footer h3::first-letter,
.bhfb-footer h4::first-letter,
.bhfb-footer h5::first-letter {
  text-transform: uppercase;
}

.bhfb-footer .widget_nav_menu ul.menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.bhfb-footer .menu-footer-products-container ul,
.bhfb-footer .menu-products-container ul {
  column-width: 130px;
  column-gap: 2rem;
  -webkit-column-gap: 2rem;
}

.bhfb-footer .menu-policies-container ul,
.bhfb-footer .menu-footer-policies-container ul {
  column-width: 140px;
  column-gap: 1.5rem;
  -webkit-column-gap: 1.5rem;
}

.bhfb-footer .menu-footer-quick-links-container ul,
.bhfb-footer .menu-quick-links-container ul {
  columns: 1 !important;
  column-gap: 0 !important;
}

.bhfb-footer .widget_nav_menu li,
.bhfb-footer .menu-item {
  list-style: none !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
}

.bhfb-footer .widget_nav_menu a,
.bhfb-footer .botiga-dropdown-link {
  color: var(--c-white) !important;
  text-decoration: none !important;
  font-size: var(--fs-base) !important;
  line-height: 1.7 !important;
  padding: 0 !important;
  font-weight: var(--fw-regular) !important;
  opacity: 0.75;
  transition: opacity var(--t-fast);
  white-space: nowrap;
  display: inline-block;
}

.bhfb-footer .widget_nav_menu a:hover {
  opacity: 1 !important;
}

.bhfb-footer .alg-footer-brand img {
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
  margin: 0 0 1.5rem;
}

.bhfb-footer .alg-footer-brand p {
  color: var(--c-text-muted) !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.bhfb-footer .widget { margin-bottom: 0 !important; }

.bhfb-footer .footer-widgets > * + * {
  padding-left: 1rem;
}

/* ═══════════════════════════════════════════
   GLOBAL — Product title typography
   ═══════════════════════════════════════════ */
a.botiga-wc-loop-product__title {
  color: var(--c-white) !important;
  font-family: var(--font-display);
}

/* ═══════════════════════════════════════════
   NAVBAR — Custom hand-coded header
   ═══════════════════════════════════════════ */

.alg-navbar {
  background: var(--navbar-bg);
  color: var(--c-white);
  border-bottom: var(--navbar-border);
  font-family: var(--font-sans);
  position: relative;
  z-index: var(--z-nav);
}

.alg-navbar__inner {
  max-width: none;
  margin: 0;
  padding: var(--navbar-v-padding) var(--navbar-h-padding);
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}

/* ─── LEFT: navigation ─── */
.alg-navbar__nav {
  display: flex;
  align-items: center;
}

.alg-navbar__menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

.alg-navbar__menu > li {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.alg-navbar__menu > li > a {
  color: var(--c-white);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  padding: 0.5rem 0;
  opacity: 0.85;
  transition: opacity var(--t-fast), color var(--t-fast);
  display: inline-flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
}

.alg-navbar__menu > li > a:hover {
  opacity: 1;
  color: var(--c-white);
}

.alg-navbar__menu > li.current-menu-item > a,
.alg-navbar__menu > li.current-menu-ancestor > a,
.alg-navbar__menu > li.current-menu-parent > a {
  opacity: 1;
}
/* Active-page indicator — uses ::before so it doesn't clash with the
   dropdown chevron's ::after on parent menu items that are also active. */
.alg-navbar__menu > li > a {
  position: relative;
}
.alg-navbar__menu > li.current-menu-item > a::before,
.alg-navbar__menu > li.current-menu-ancestor > a::before,
.alg-navbar__menu > li.current-menu-parent > a::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--c-white);
}

/* Hide Botiga's default dropdown arrows */
.alg-navbar__menu .dropdown-symbol,
.alg-navbar__menu .ws-svg-icon,
.alg-navbar__menu .botiga-dropdown-link > svg,
.alg-navbar__menu .botiga-dropdown-li > a > svg,
.alg-navbar__menu .botiga-dropdown-li .botiga-svg-icon,
.alg-navbar__menu .botiga-dropdown-li .dropdown-icon,
.alg-navbar__menu .botiga-dropdown-li .dashicons {
  display: none !important;
}

/* Single SVG chevron caret */
.alg-navbar__menu > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 0.4rem;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  opacity: 0.8;
  transition: transform var(--t-med), opacity var(--t-fast);
}

.alg-navbar__menu > li.menu-item-has-children:hover > a::after,
.alg-navbar__menu > li.menu-item-has-children > a:hover::after {
  opacity: 1;
  transform: rotate(180deg);
}

/* ─── DROPDOWN ─── */
.alg-navbar__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 220px;
  background: var(--c-bg-page);
  border: 1px solid var(--c-gray-500);
  border-radius: var(--radius-lg);
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  z-index: var(--z-dropdown);
}

.alg-navbar__menu > li:hover > .sub-menu,
.alg-navbar__menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.alg-navbar__menu .sub-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.alg-navbar__menu .sub-menu a {
  color: var(--c-white);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  display: block;
  padding: 0.5rem 1.5rem;
  opacity: 0.85;
  border: 1px solid transparent;
  margin: 2px 0.75rem;
  border-radius: var(--radius-sm);
  transition: opacity var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}

.alg-navbar__menu .sub-menu a:hover,
.alg-navbar__menu .sub-menu a:focus {
  opacity: 1;
  color: var(--c-white);
  border-color: var(--c-white);
}

.alg-navbar__menu .sub-menu .current-menu-item > a {
  opacity: 1;
  color: var(--c-white);
  border-color: var(--c-white);
}

/* ─── CENTER: brand ─── */
.alg-navbar__brand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.alg-navbar__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  color: var(--c-white);
}

.alg-navbar__brand-link img + .alg-navbar__brand-text,
.alg-navbar__brand-link img + .alg-navbar__brand-icon,
.alg-navbar__brand-link .custom-logo ~ .alg-navbar__brand-text,
.alg-navbar__brand-link .custom-logo ~ .alg-navbar__brand-icon {
  display: none !important;
}

/* Force logo size — beats Botiga's `.custom-logo-link img { max-width: 180px }`.
   The Wordpress custom logo function renders a nested <a class="custom-logo-link">
   INSIDE our <a class="alg-navbar__brand-link">. Nested anchors are invalid HTML,
   so the browser auto-closes the outer anchor. The IMG therefore is NOT a
   descendant of .alg-navbar__brand-link in the parsed DOM — we target via the
   .alg-navbar__brand wrapper (which still contains everything) instead. */
header.alg-navbar .alg-navbar__brand img,
header.alg-navbar .alg-navbar__brand .custom-logo,
header.alg-navbar .alg-navbar__brand a.custom-logo-link img,
header.alg-navbar .alg-navbar__brand a.custom-logo-link .custom-logo,
header.alg-navbar img.custom-logo {
  width: 380px !important;
  max-width: 380px !important;
  min-width: 380px !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
}

/* Make sure the .custom-logo-link anchor itself doesn't shrink the img */
header.alg-navbar .alg-navbar__brand a.custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.alg-navbar .alg-navbar__brand-link .custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

.alg-navbar__brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 1.25rem;
  opacity: 0.95;
}

.alg-navbar__brand-text {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── RIGHT: actions ─── */
.alg-navbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.alg-navbar .alg-navbar__icon-btn,
.alg-navbar__actions a.alg-navbar__icon-btn,
.alg-navbar__actions button.alg-navbar__icon-btn,
.alg-navbar__icon-btn {
  background: transparent !important;
  border: 0;
  color: #ffffff !important;
  padding: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 1 !important;
  transition: opacity var(--t-fast), color var(--t-fast);
  text-decoration: none !important;
  border-radius: var(--radius-md);
  box-shadow: none !important;
}

.alg-navbar__icon-btn svg {
  display: block;
  color: #ffffff;
  stroke: currentColor;
}

.alg-navbar__icon-btn:hover,
.alg-navbar__icon-btn:focus {
  color: var(--c-yellow) !important;
  opacity: 1 !important;
}

.alg-navbar__icon-btn:hover svg {
  color: var(--c-yellow);
}

.alg-navbar__cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--c-red);
  color: var(--c-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ─── Sign In / Sign Up buttons ─── */
.alg-navbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: var(--fw-regular);
  line-height: 16px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
  margin-left: 0.25rem;
  white-space: nowrap;
  font-family: var(--font-sans);
}

.alg-navbar__btn--ghost {
  background: transparent;
  color: var(--c-white);
  border-color: var(--c-white);
}
.alg-navbar__btn--ghost:hover,
.alg-navbar__btn--ghost:focus {
  background: var(--c-white);
  color: #1F1F21;          /* dark text so it stays readable on white bg */
  border-color: var(--c-white);
}

.alg-navbar__btn--solid {
  background: var(--c-white);
  color: #1F1F21;
  border-color: var(--c-white);
}
.alg-navbar__btn--solid:hover,
.alg-navbar__btn--solid:focus {
  background: var(--c-yellow-dark);   /* token = light gray now */
  border-color: var(--c-yellow-dark);
  color: #1F1F21;
}

/* ─── Mobile hamburger ─── */
.alg-navbar__hamburger {
  display: none;
  background: transparent;
  border: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  gap: 5px;
  padding: 0;
  cursor: pointer;
}
.alg-navbar__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-white);
  border-radius: 1px;
  transition: transform var(--t-med), opacity var(--t-med);
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .alg-navbar__inner {
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    padding: 0.75rem 1rem;
  }
  .alg-navbar__nav { display: none; }
  .alg-navbar__hamburger { display: inline-flex; order: -1; }
  .alg-navbar__brand { justify-content: flex-start; }
  .alg-navbar__brand-text { font-size: 0.9rem; }
  .alg-navbar__btn { display: none; }
}

@media (max-width: 600px) {
  .alg-navbar__brand-text { display: none; }
  .alg-navbar__actions { gap: 0.25rem; }
}

body.alg-mobile-menu-open .alg-navbar__nav {
  display: block;
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--c-bg-page);
  padding: 2rem;
  overflow-y: auto;
  z-index: 150;
}
body.alg-mobile-menu-open .alg-navbar__menu {
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}
body.alg-mobile-menu-open .alg-navbar__menu .sub-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  background: transparent;
  padding-left: 1rem;
}
body.alg-mobile-menu-open {
  overflow: hidden;
}

/* Hide Botiga's original header builder output */
.bhfb-header { display: none !important; }

/* ═══════════════════════════════════════════
   ANNOUNCEMENT BAR — site-wide, above navbar
   Rendered by mu-plugin alg-announcement-bar.php
   ═══════════════════════════════════════════ */
.alg-announce {
  background: var(--announce-bg);
  color: var(--announce-fg);
  font-family: var(--font-sans);
  font-size: var(--announce-fs);
  line-height: 1.4;
  padding: 10px var(--navbar-h-padding);
  text-align: center;
  position: relative;
  z-index: 1; /* must sit below the navbar so the navbar's dropdown submenu can layer above it */
}

.alg-announce__inner {
  max-width: 1440px;
  margin: 0 auto;
}

.alg-announce__text {
  margin: 0;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--announce-fg);
}

@media (max-width: 768px) {
  .alg-announce {
    font-size: 0.75rem;
    padding: 8px 16px;
  }
}

/* ═══════════════════════════════════════════
   HERO — homepage [alg_hero] shortcode
   Rendered by mu-plugin alg-hero.php
   Full-bleed (breaks out of any boxed page container)
   ═══════════════════════════════════════════ */
.alg-hero {
  position: relative;
  min-height: 70vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--c-white);
  font-family: var(--font-sans);
  overflow: hidden;

  /* Full-bleed: break out of any boxed parent container.
     Makes hero span 100% of viewport width regardless of wrapper. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 100vw !important;
}

.alg-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.alg-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  padding: 4rem 2rem;
  text-align: center;
}

/* Headline — forced white with !important to beat Botiga's content-area H1 color */
.alg-hero h1.alg-hero__headline,
.alg-hero .alg-hero__headline {
  font-family: var(--font-display) !important;
  font-size: clamp(1.4rem, 3vw, 2.75rem) !important;
  font-weight: var(--fw-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
  margin: 0 0 1.5rem !important;
  color: var(--c-white) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  overflow: visible;
}

/* On very narrow screens, allow it to wrap (otherwise it'd overflow) */
@media (max-width: 480px) {
  .alg-hero h1.alg-hero__headline,
  .alg-hero .alg-hero__headline {
    white-space: normal;
    font-size: 1.4rem !important;
  }
}

.alg-hero p.alg-hero__subhead,
.alg-hero .alg-hero__subhead {
  font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
  font-weight: var(--fw-regular) !important;
  margin: 0 0 2rem !important;
  opacity: 0.95 !important;
  color: var(--c-white) !important;
}

/* CTA button — red, sized to match the smaller headline */
.alg-hero a.alg-hero__cta,
.alg-hero .alg-hero__cta {
  display: inline-block !important;
  background: var(--c-red) !important;
  color: var(--c-white) !important;
  text-decoration: none !important;
  padding: 11px 28px !important;
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-bold) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-sm) !important;
  border: 2px solid var(--c-red) !important;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.alg-hero a.alg-hero__cta:hover,
.alg-hero a.alg-hero__cta:focus {
  background: #B81720 !important;       /* darker red on hover */
  border-color: #B81720 !important;
  color: var(--c-white) !important;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .alg-hero { min-height: 55vh; }
  .alg-hero__inner { padding: 2.5rem 1.5rem; }
  .alg-hero a.alg-hero__cta { padding: 10px 22px !important; font-size: 0.75rem !important; }
}

@media (max-width: 480px) {
  .alg-hero { min-height: 45vh; }
}

/* ═══════════════════════════════════════════
   TRUST SECTION — [alg_trust] 3-card value props
   Rendered by mu-plugin alg-trust.php
   ═══════════════════════════════════════════ */
.alg-trust {
  background: var(--c-bg-page);
  padding: 5rem 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
}

.alg-trust__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}

.alg-trust__card {
  background: var(--c-gray-500);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.alg-trust h3.alg-trust__title,
.alg-trust .alg-trust__title {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  margin: 0 0 8px !important;
  color: var(--c-white) !important;
}

.alg-trust p.alg-trust__body,
.alg-trust .alg-trust__body {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: var(--fw-regular) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  color: var(--c-gray-100) !important;
}

@media (max-width: 1024px) {
  .alg-trust__inner {
    padding: 0 32px;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .alg-trust {
    padding: 3rem 0;
  }
  .alg-trust__inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 20px;
  }
  .alg-trust h3.alg-trust__title { font-size: 20px !important; }
  .alg-trust p.alg-trust__body { font-size: 15px !important; }
}

/* ═══════════════════════════════════════════
   BESTSELLERS SECTION — [alg_bestsellers] custom product grid
   Rendered by mu-plugin alg-bestsellers.php
   ═══════════════════════════════════════════ */
.alg-bestsellers {
  background: var(--c-bg-page);
  padding: 4rem 0 5rem;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
}

.alg-bestsellers__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
}

.alg-bestsellers h2.alg-bestsellers__heading,
.alg-bestsellers .alg-bestsellers__heading {
  font-family: var(--font-display) !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  font-weight: var(--fw-bold) !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--c-white) !important;
  margin: 0 0 2rem !important;
  padding: 0 !important;
}

.alg-bestsellers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* ── Card ─────────────────────────────────── */
.alg-bestsellers__card {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.alg-bestsellers__media-link {
  display: block;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
}

.alg-bestsellers__media {
  position: relative;
  background: #F5F5F5;
  border-radius: 12px;
  aspect-ratio: 1 / 1.1;
  overflow: hidden;
  display: block;
  padding: 0;
}

.alg-bestsellers__media .alg-bestsellers__img,
.alg-bestsellers__media img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
}

/* ── Corner badge (Best Seller / Recommended / Home Grown) ── */
.alg-bestsellers__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-block;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--c-white);
  border-radius: 4px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.alg-bestsellers__badge.is-best-seller { background: var(--c-blue-mid); }
.alg-bestsellers__badge.is-recommended { background: #F58634; }
.alg-bestsellers__badge.is-home-grown  { background: #3FA34D; }

/* ── State pills bottom-left of image + pre-order note ── */
.alg-bestsellers__media-foot {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.alg-bestsellers__pill {
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  background: rgba(45, 45, 45, 0.95);
  color: var(--c-white);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  border-radius: 6px;
  max-width: 65%;
}


.alg-bestsellers__pill.is-soldout {
  background: #222;
  font-size: 12px;
  padding: 6px 12px;
}

.alg-bestsellers__preorder-note {
  font-family: var(--font-sans);
  font-size: 13px;
  color: #555;
  background: rgba(255,255,255,0.92);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.alg-bestsellers__preorder-note strong {
  color: var(--c-red);
  font-weight: var(--fw-bold);
}

/* ── Body ─────────────────────────────────── */
.alg-bestsellers__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
  flex: 1 1 auto;
  min-height: 0;
}

.alg-bestsellers h3.alg-bestsellers__title,
.alg-bestsellers .alg-bestsellers__title {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: var(--fw-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  color: var(--c-white) !important;
  display: block;
}

.alg-bestsellers__title a {
  color: inherit !important;
  text-decoration: none !important;
  display: inline;
}

.alg-bestsellers__title a:hover {
  color: var(--c-yellow) !important;
}

.alg-bestsellers__verified {
  position: relative;
  display: inline-block;
  vertical-align: -2px;
  margin-left: 4px;
  line-height: 0;
  white-space: nowrap;
  cursor: pointer;
}

.alg-bestsellers__verified svg {
  display: inline-block;
  vertical-align: middle;
}

/* Tooltip on the verified checkmark — "Sample ordered, tested & approved" */
.alg-bestsellers__verified::before {
  content: 'Sample ordered, tested & approved';
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 8px 12px;
  background: rgba(45, 45, 45, 0.97);
  color: var(--c-white);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 6px;
  white-space: normal;
  width: max-content;
  max-width: 180px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
  z-index: 20;
}

.alg-bestsellers__verified::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(45, 45, 45, 0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
  z-index: 20;
}

.alg-bestsellers__verified:hover::before,
.alg-bestsellers__verified:focus::before,
.alg-bestsellers__verified:hover::after,
.alg-bestsellers__verified:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.alg-bestsellers p.alg-bestsellers__desc,
.alg-bestsellers .alg-bestsellers__desc {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: var(--fw-regular) !important;
  line-height: 1.45 !important;
  color: var(--c-gray-100) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(13px * 1.45 * 2);
}

/* ── Footer (price + action) — always at bottom ── */
.alg-bestsellers__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

.alg-bestsellers__price {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--c-white);
  line-height: 1.2;
}

.alg-bestsellers__price .woocommerce-Price-amount,
.alg-bestsellers__price .amount,
.alg-bestsellers__price bdi {
  color: var(--c-white) !important;
  text-decoration: none !important;
}

.alg-bestsellers__price del {
  opacity: 0.5;
  margin-right: 6px;
  font-size: 12px;
}

.alg-bestsellers__price ins {
  background: transparent;
  text-decoration: none;
}

/* ── Action button (outlined → yellow on hover, with arrow tooltip) ── */
.alg-bestsellers__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: transparent;
  color: var(--c-white);
  border: 1.5px solid var(--c-white);
  cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease;
  text-decoration: none !important;
  flex: 0 0 auto;
}

.alg-bestsellers__action:hover {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: #222;
  transform: translateY(-1px);
}

.alg-bestsellers__action.is-soldout {
  border-color: #555;
  color: #555;
  cursor: not-allowed;
  pointer-events: none;
}

.alg-bestsellers__action svg {
  display: block;
}

/* Icon swap — show cart by default, bag when product is in cart */
.alg-bestsellers__action-icon { display: inline-flex; align-items: center; justify-content: center; }
.alg-bestsellers__action .icon-bag  { display: none; }
.alg-bestsellers__action.is-incart .icon-cart { display: none; }
.alg-bestsellers__action.is-incart .icon-bag  { display: inline-flex; }

/* "In cart" state — filled yellow so the user can see at a glance */
.alg-bestsellers__action.is-incart {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: #222;
}
.alg-bestsellers__action.is-incart:hover {
  background: var(--c-yellow-dark);
  border-color: var(--c-yellow-dark);
  color: #222;
}

/* Loading state during AJAX request */
.alg-bestsellers__action.is-loading { opacity: 0.6; pointer-events: none; }
.alg-bestsellers__action.is-loading svg { animation: alg-spin 0.6s linear infinite; transform-origin: center; }
@keyframes alg-spin { to { transform: rotate(360deg); } }

/* Hide WC's auto-injected "View cart" anchor that appears next to ajax buttons */
.alg-bestsellers__foot .added_to_cart { display: none !important; }

/* Tooltip on action button — rectangle with downward arrow */
.alg-bestsellers__action::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 8px 12px;
  background: rgba(45, 45, 45, 0.97);
  color: var(--c-white);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
  z-index: 10;
}

.alg-bestsellers__action::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(45, 45, 45, 0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
  z-index: 10;
}

.alg-bestsellers__action:hover::before,
.alg-bestsellers__action:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 1200px) {
  .alg-bestsellers__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .alg-bestsellers__inner { padding: 0 32px; }
  .alg-bestsellers__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
  .alg-bestsellers { padding: 3rem 0 4rem; }
  .alg-bestsellers__inner { padding: 0 20px; }
  .alg-bestsellers__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .alg-bestsellers h2.alg-bestsellers__heading { font-size: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .alg-bestsellers h3.alg-bestsellers__title { font-size: 16px !important; }
  .alg-bestsellers__media { padding: 16px; }
}

@media (max-width: 480px) {
  .alg-bestsellers__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   PARTNER CTA — [alg_partner_cta]
   Full-bleed deep-blue band with email capture
   ═══════════════════════════════════════════ */
.alg-cta {
  background: var(--c-blue-deep);
  color: var(--c-white);
  padding: 5rem 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
  text-align: center;
}

.alg-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.alg-cta h2.alg-cta__heading,
.alg-cta .alg-cta__heading {
  font-family: var(--font-display) !important;
  font-size: clamp(1.5rem, 3vw, 2.4rem) !important;
  font-weight: var(--fw-bold) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  color: var(--c-white) !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .alg-cta h2.alg-cta__heading,
  .alg-cta .alg-cta__heading { white-space: normal; }
}

.alg-cta p.alg-cta__subhead,
.alg-cta .alg-cta__subhead {
  font-family: var(--font-sans) !important;
  font-size: clamp(0.9rem, 1.2vw, 1rem) !important;
  font-weight: var(--fw-regular) !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 0 auto 2rem !important;
  max-width: 640px !important;
}

.alg-cta__form {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
}

.alg-cta__form input.alg-cta__input,
.alg-cta__input {
  width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 6px !important;
  color: var(--c-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.95rem !important;
  font-weight: var(--fw-regular) !important;
  padding: 14px 52px 14px 18px !important;
  outline: none !important;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

body .alg-cta .alg-cta__form input.alg-cta__input::placeholder,
.alg-cta__input::placeholder {
  color: #FFFFFF !important;
  opacity: 1 !important;
  font-weight: var(--fw-regular);
}
body .alg-cta .alg-cta__form input.alg-cta__input::-webkit-input-placeholder,
.alg-cta__input::-webkit-input-placeholder { color: #FFFFFF !important; opacity: 1 !important; }
body .alg-cta .alg-cta__form input.alg-cta__input::-moz-placeholder,
.alg-cta__input::-moz-placeholder { color: #FFFFFF !important; opacity: 1 !important; }
body .alg-cta .alg-cta__form input.alg-cta__input:-ms-input-placeholder,
.alg-cta__input:-ms-input-placeholder { color: #FFFFFF !important; opacity: 1 !important; }

/* Kill browser autofill yellow/white background */
.alg-cta__input:-webkit-autofill,
.alg-cta__input:-webkit-autofill:hover,
.alg-cta__input:-webkit-autofill:focus,
.alg-cta__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--c-blue-deep) inset !important;
  -webkit-text-fill-color: var(--c-white) !important;
  caret-color: var(--c-white);
  transition: background-color 9999s ease-out 0s;
}

.alg-cta__input:hover,
.alg-cta__input:focus {
  border-color: var(--c-white) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.alg-cta__form button.alg-cta__submit,
.alg-cta__submit {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  border: none !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}

.alg-cta__submit svg {
  display: block;
  color: #FFFFFF;
  stroke: #FFFFFF;
}

.alg-cta__submit:hover {
  background: var(--c-yellow) !important;
  color: #222 !important;
}

.alg-cta__submit:hover svg {
  color: #222;
  stroke: #222;
}

.alg-cta__msg {
  margin: 14px 0 0 !important;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  min-height: 1.2em;
  color: rgba(255, 255, 255, 0.85);
}

.alg-cta__msg.is-success { color: #B6F0C0; }
.alg-cta__msg.is-error   { color: #FFC7C7; }
.alg-cta__msg.is-pending { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 768px) {
  .alg-cta { padding: 3.5rem 0; }
  .alg-cta__inner { padding: 0 20px; }
}

/* Hide the submit button visually — form still submits via Enter key */
.alg-cta__submit-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════
   SITE FOOTER — botiga-child/footer.php
   ═══════════════════════════════════════════ */
.alg-footer {
  background: var(--c-bg-page);
  color: var(--c-white);
  padding: 4rem 0 3rem;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
}

.alg-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1.7fr 1.9fr;
  gap: 40px;
  align-items: start;
}

/* ── Brand column ─────────────────────────── */
.alg-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.alg-footer__brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  max-width: 280px;
}

.alg-footer__brand .custom-logo-link,
.alg-footer__brand .custom-logo-link img {
  display: block !important;
  max-width: 280px !important;
  width: auto !important;
  height: auto !important;
  max-height: 48px;
}

.alg-footer__brand-text {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  color: var(--c-white);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.alg-footer__brand-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--c-white);
  border-radius: 50%;
  color: var(--c-white);
}

.alg-footer__copyright {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* ── Link groups (Products / Policies) ─────── */
.alg-footer__group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.alg-footer h4.alg-footer__heading,
.alg-footer .alg-footer__heading {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.alg-footer__cols {
  display: grid;
  gap: 32px;
}

.alg-footer__cols--quick { grid-template-columns: 1fr; }
.alg-footer__cols--products { grid-template-columns: repeat(2, 1fr); }
.alg-footer__cols--policies { grid-template-columns: 1fr; }

.alg-footer__col {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alg-footer__col li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.alg-footer__col li::before,
.alg-footer__col li::marker { content: none !important; }

.alg-footer__col a {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: var(--fw-regular) !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  transition: color var(--t-fast) ease;
  white-space: nowrap;
}

.alg-footer__col a:hover,
.alg-footer__col a:focus {
  color: var(--c-yellow) !important;
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 1280px) {
  .alg-footer__inner { gap: 36px; }
  .alg-footer__cols { gap: 24px; }
}

@media (max-width: 1024px) {
  .alg-footer__inner {
    grid-template-columns: 1fr 1fr;
    padding: 0 32px;
    gap: 40px;
  }
  .alg-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .alg-footer { padding: 3rem 0 2rem; }
  .alg-footer__inner {
    grid-template-columns: 1fr;
    padding: 0 20px;
    gap: 32px;
  }
  .alg-footer__cols--products { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .alg-footer__cols--policies { grid-template-columns: 1fr; gap: 12px; }
}

/* ═══════════════════════════════════════════
   Hide WC's "X added to your cart" banner on every page except the
   actual cart/checkout (where messages are part of the flow).
   ═══════════════════════════════════════════ */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-notices-wrapper,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-message,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-info,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-error,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .botiga-toast-message,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .single-product-notice {
  display: none !important;
}

/* ═══════════════════════════════════════════
   GUEST PRODUCT CARD — Contact Us CTA instead of price + cart
   ═══════════════════════════════════════════ */
.alg-bestsellers__foot--guest {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
}

.alg-bestsellers__contact,
a.alg-bestsellers__contact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  padding: 10px 18px !important;
  font-family: var(--font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #1F1F21 !important;
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-white) !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease;
}
.alg-bestsellers__contact:hover {
  background: transparent !important;
  color: var(--c-white) !important;
  border-color: var(--c-white) !important;
  transform: translateY(-1px);
}

/* Guest mode hides any add-to-cart trace + the price block.  */
.alg-bestsellers__card.is-guest .alg-bestsellers__action,
.alg-bestsellers__card.is-guest .alg-bestsellers__price { display: none !important; }

/* ═══════════════════════════════════════════
   SEARCH OVERLAY — opened by navbar search icon
   ═══════════════════════════════════════════ */
.alg-search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;        /* must beat the navbar submenu dropdown */
  background: var(--c-bg-page);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--t-med) ease, opacity var(--t-fast) ease;
  visibility: hidden;
  pointer-events: none;
}
.alg-search.is-open { pointer-events: auto; }

/* When the search overlay is open, hide any navbar submenu that would otherwise paint over it. */
body.alg-search-open .alg-navbar__menu .sub-menu,
body.alg-search-open .alg-navbar__menu li > ul {
  display: none !important;
}

.alg-search.is-open {
  max-height: 220px;
  opacity: 1;
  visibility: visible;
}

.alg-search__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 22px 24px;
}

.alg-search__form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 4px 4px 4px 16px;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}

.alg-search__form:focus-within {
  border-color: var(--c-white);
  background: rgba(255,255,255,0.06);
}

.alg-search__icon {
  color: rgba(255,255,255,0.65);
  flex: 0 0 auto;
}

.alg-search__input,
.alg-search__form input.alg-search__input {
  flex: 1 1 auto !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--c-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  padding: 12px 0 !important;
  min-height: 44px !important;
  width: 100% !important;
}

.alg-search__input::placeholder {
  color: rgba(255,255,255,0.45) !important;
}

.alg-search__submit,
.alg-search__form button.alg-search__submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 22px !important;
  font-family: var(--font-sans) !important;
  font-size: 0.8rem !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #1F1F21 !important;
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-white) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  flex: 0 0 auto;
}
.alg-search__submit:hover { background: var(--c-yellow-dark) !important; border-color: var(--c-yellow-dark) !important; }

.alg-search__close,
.alg-search__form button.alg-search__close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,0.7) !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  padding: 0 !important;
  flex: 0 0 auto;
}
.alg-search__close:hover { color: var(--c-white) !important; background: rgba(255,255,255,0.06) !important; }

