/* =========================================================
   The 7even Daily - dark luxe, gold & black
   Plain CSS, no preprocessor. Edit freely.
   ========================================================= */

:root {
  /* Core dark palette */
  --color-bg:           #0a0a0a;       /* deepest base */
  --color-bg-2:        #121212;        /* lifted surface */
  --color-bg-3:        #181818;        /* alt section background */
  --color-bg-card:     #161512;        /* card surface with warm undertone */
  --color-bg-card-2:   #1f1d18;        /* card hover */

  --color-ink:          #f4ead2;       /* warm off-white body */
  --color-ink-soft:    #c9bfa2;        /* secondary text */
  --color-ink-mute:    #8a7f64;        /* tertiary/meta text */

  /* Gold scale */
  --gold:               #c9a96e;
  --gold-bright:        #e2c486;
  --gold-deep:          #a4853e;
  --gold-dark:          #6f5a26;
  --gold-soft:          #e8d5a3;

  --border-soft:        rgba(201,169,110,0.16);
  --border-mid:         rgba(201,169,110,0.28);
  --border-strong:      rgba(201,169,110,0.45);

  --radius-sm:          6px;
  --radius:             10px;
  --radius-lg:          16px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-md: 0 14px 30px rgba(0,0,0,0.55);
  --shadow-lg: 0 28px 70px rgba(0,0,0,0.65);

  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

/* Three-region layout:
     - .site-header          (position:fixed at top, z-index 1000)
     - .submenu-bar          (position:fixed below header, z-index 999,
                              holds category-jump buttons on deals pages)
     - <main>                (normal flow, padding-top pushes it below
                              both fixed regions)
     - .site-footer          (inside main, scrolls with content)
   Both fixed bars have fully opaque backgrounds so no content shows
   through them. */
html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
}

main {
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* Push content below the fixed header + fixed submenu.
     Header ~180px + submenu ~120px (wraps on mobile) = ~300px+. */
  padding-top: var(--fixed-offset, 320px);
}

.submenu-bar {
  position: fixed;
  top: var(--header-h, 180px);
  left: 0;
  width: 100%;
  z-index: 999;
  background: #0d0d0d;
}

.site-footer {
  /* no special positioning */
}

img { max-width: 100%; display: block; }

a { color: var(--gold-bright); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--gold); }

::selection { background: var(--gold); color: #000; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
  background: #0a0a0a;
  color: var(--color-ink);
  border-bottom: 1px solid var(--border-soft);
  padding-top: 20px;
  overflow: visible;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* Header always stacks: logo on top centered, then the nav links
   (Deals, Guides, About, EN/ES) centered below. This prevents the
   nav from ever sliding under the centered logo as the viewport
   narrows. The same layout applies on desktop and mobile. */
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 18px 28px 14px;
  gap: 12px;
  min-height: 0;
}

/* Stacked typography logo: THE 7EVEN / DAILY  */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  color: var(--color-ink);
  transition: opacity 0.2s ease;
  position: static;
}

.logo:hover { opacity: 0.85; text-decoration: none; }

.logo-main {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 54px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  display: block;
  line-height: 1;
  margin-bottom: 0;
}

.logo-sub {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 38px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: -4px;
  color: var(--gold-bright);
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}

/* Dark-header variant */
.site-header .logo { color: var(--color-ink); }
.site-header .logo .logo-main { color: #ffffff; }
.site-header .logo .logo-sub { color: var(--gold-bright); }

/* Footer-brand variant */
.site-footer .logo { color: var(--color-ink); }
.site-footer .logo .logo-main { color: #ffffff; }
.site-footer .logo .logo-sub { color: var(--gold-bright); }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
}

.site-nav a {
  color: var(--color-ink-soft);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding: 8px 0;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.site-nav a:hover { color: var(--gold-bright); }

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Language toggle in header */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid var(--border-soft);
}

.lang-toggle a {
  padding: 4px 8px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--color-ink-mute);
  text-transform: uppercase;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;
}

.lang-toggle a::after { display: none; }

.lang-toggle a:hover { color: var(--gold-bright); background: rgba(201,169,110,0.06); }

.lang-toggle a.active,
.lang-toggle a[aria-current="true"] {
  color: var(--gold);
  background: rgba(201,169,110,0.10);
  border: 1px solid var(--border-mid);
  padding: 3px 7px;
}

.lang-toggle span {
  color: var(--color-ink-mute);
  font-size: 12px;
  opacity: 0.55;
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  display: none;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateX(-50%);
}

.hero::before { top: 6px; }
.hero::after  { bottom: 6px; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 10px;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 4px;
  padding: 4px 16px;
  border: 1px solid var(--border-mid);
  background: rgba(201,169,110,0.06);
  border-radius: 999px;
}

.hero-eyebrow::before {
  content: "\2022";
  color: var(--gold-bright);
  font-size: 14px;
  line-height: 1;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 45px;
  line-height: 1.08;
  margin: 0 0 4px;
  text-align: left;
  letter-spacing: -0.015em;
  color: #ffffff;
}

/* Hero accent word: animated gold sheen, like polished metal catching light */
.hero h1 em {
  font-style: normal;
  font-weight: 700;
  display: inline-block;
  vertical-align: baseline;
  color: var(--gold-bright);  /* fallback for browsers without background-clip:text */
  background: linear-gradient(
    100deg,
    var(--gold-deep) 0%,
    var(--gold) 20%,
    var(--gold-bright) 40%,
    #fff5d6 50%,
    var(--gold-bright) 60%,
    var(--gold) 80%,
    var(--gold-deep) 100%
  );
  background-size: 250% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-sheen 5.5s ease-in-out infinite;
}

@keyframes gold-sheen {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Respect user preference: hold the bright pose, no animation */
@media (prefers-reduced-motion: reduce) {
  .hero h1 em {
    animation: none;
    background-position: 50% 50%;
  }
}

.hero-sub {
  max-width: 640px;
  margin: 0 0 0;
  color: var(--color-ink-soft);
  font-size: 14px;
  line-height: 1.4;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.05s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 45%, var(--gold-deep));
  color: #1a1300;
  border-color: var(--gold-deep);
  box-shadow:
    0 8px 18px rgba(164,133,62,0.30),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.btn-primary:hover {
  color: #1a1300;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep) 60%, var(--gold-dark));
  box-shadow:
    0 12px 26px rgba(164,133,62,0.40),
    inset 0 1px 0 rgba(255,255,255,0.30);
}

.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}

.btn-ghost:hover {
  background: var(--gold);
  color: #1a1300;
}

.btn-link {
  padding: 0;
  background: none;
  color: var(--gold-bright);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  border-bottom: 1px solid transparent;
}

.btn-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* =========================================================
   Sections (all dark)
   ========================================================= */

.section {
  padding: 24px 0 96px;
  background: var(--color-bg);
  color: var(--color-ink);
  position: relative;
}

/* Minimal gap between hero and deals category buttons */
#deals,
#ofertas {
  padding-top: 4px;
}

.section-alt {
  background: var(--color-bg-3);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.section-lead {
  color: var(--color-ink-soft);
  font-size: 17px;
  margin: 0 0 48px;
  max-width: 640px;
}

/* Decorative gold rule under section titles */
.section-title + .section-lead::before,
.section > .container > .section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 16px 0 20px;
}

/* About-page heading variant: section-title used as page H1 */
main > .section .section-title {
  margin-top: 4px;
}

/* About page body prose */
main > .section h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--gold-bright);
  font-size: 22px;
  margin: 38px 0 10px;
  letter-spacing: 0.01em;
}

main > .section p {
  color: var(--color-ink-soft);
  font-size: 16.5px;
  line-height: 1.7;
}

/* Prose links inside about-style sections.
   :not(.btn) keeps button elements out of this rule so their own
   .btn / .btn-primary styling (dark text on gold) survives. */
main > .section p a:not(.btn) {
  color: var(--gold-bright);
  border-bottom: 1px solid var(--border-mid);
}

main > .section p a:not(.btn):hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* =========================================================
   Deal cards
   ========================================================= */

.deal-grid {
  display: grid;
  /* Fixed-width columns so card size stays consistent regardless of
     viewport width. auto-fill packs as many 225px cards per row as
     fit, and justify-content centers the row when there's spare space. */
  grid-template-columns: repeat(auto-fill, 225px);
  justify-content: center;
  gap: 21px;
}

@media (max-width: 520px) {
  .deal-grid {
    grid-template-columns: 1fr;
  }
}

/* Widen the container ONLY for the deals sections so more cards
   fit per row on large monitors. Other sections keep the 1180px cap. */
#deals > .container,
#ofertas > .container {
  max-width: 1800px;
}

.deal-card {
  background: var(--color-bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  position: relative;
  /* Flex column so the body can stretch to fill the card's grid-stretched
     height, which lets the share buttons anchor to the bottom and line up
     across cards in the same row. */
  display: flex;
  flex-direction: column;
}

.deal-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.deal-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--border-strong);
  background: var(--color-bg-card-2);
}

.deal-card:hover::before { opacity: 1; }

.deal-image {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #2a2620;
  position: relative;
  border-bottom: 1px solid var(--border-soft);
}

.deal-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.45));
}

.deal-body {
  padding: 18px 20px 21px;
  /* Flex column with share-buttons pinned to the bottom (see
     .deal-share-buttons below). Grows to fill the card's height so
     buttons line up across cards regardless of title length. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.deal-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 9px;
}

.deal-body h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 9px;
  color: #ffffff;
  /* Clamp every title to exactly 3 lines so the price / save / button
     blocks line up across cards in a row. Long titles get an ellipsis,
     short titles still reserve the same vertical space via min-height. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: calc(1.25em * 3);
}

.deal-body p {
  color: var(--color-ink-soft);
  margin: 0 0 15px;
  font-size: 12px;
}

.deal-price {
  display: inline-block;
  color: var(--gold-bright);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  margin: 0 0 11px;
  padding: 3px 9px;
  background: rgba(201,169,110,0.10);
  border: 1px solid var(--border-mid);
  border-radius: 999px;
}

/* =========================================================
   Featured Deal of the Day card (hero-style)
   ========================================================= */

.deal-featured {
  margin-top: 24px;
}

.deal-featured-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: linear-gradient(135deg, var(--color-bg-card) 0%, var(--color-bg-card-2) 100%);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.deal-featured-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-bright), var(--gold), transparent);
}

.deal-featured-image {
  display: block;
  position: relative;
  background: #0f0d0a;
  min-height: 360px;
  border-right: 1px solid var(--border-soft);
  overflow: hidden;
}

.deal-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 40px;
  background:
    radial-gradient(circle at 50% 50%, rgba(201,169,110,0.12), transparent 70%),
    #0f0d0a;
  transition: transform 0.35s ease;
}

.deal-featured-card:hover .deal-featured-image img {
  transform: scale(1.03);
}

.deal-featured-body {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.deal-featured-body .deal-tag {
  font-size: 12px;
  letter-spacing: 0.24em;
  margin-bottom: 14px;
}

.deal-featured-body h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.18;
  margin: 0 0 16px;
  color: #ffffff;
  letter-spacing: -0.005em;
}

.deal-featured-desc {
  color: var(--color-ink-soft);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 22px;
}

.deal-featured-price {
  display: inline-block;
  align-self: flex-start;
  color: var(--gold-bright);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  margin: 0 0 24px;
  padding: 6px 16px;
  background: rgba(201,169,110,0.12);
  border: 1px solid var(--border-mid);
  border-radius: 999px;
}

.deal-featured-body .btn {
  align-self: flex-start;
}

@media (max-width: 820px) {
  .deal-featured-card { grid-template-columns: 1fr; }
  .deal-featured-image {
    min-height: 280px;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
  .deal-featured-image img { padding: 28px; }
  .deal-featured-body { padding: 28px 24px; }
}

/* =========================================================
   Categories
   ========================================================= */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.category-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
  border-radius: var(--radius);
  background: var(--color-bg-card);
  border: 1px solid var(--border-soft);
  color: var(--color-ink);
  font-weight: 600;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.category-card span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-card small {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-ink-mute);
  font-style: italic;
  letter-spacing: 0.01em;
}

.category-card:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
  background: var(--color-bg-card-2);
  transform: translateY(-2px);
}

.category-card:hover small { color: var(--color-ink-soft); }

/* =========================================================
   Newsletter
   ========================================================= */

.section-newsletter {
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(201,169,110,0.15), transparent 60%),
    linear-gradient(180deg, #0a0a0a, #141414);
  color: var(--color-ink);
  text-align: center;
  border: none;
}

.section-newsletter h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.section-newsletter > .container > h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 16px auto 20px;
}

.section-newsletter p { color: var(--color-ink-soft); margin: 0 0 32px; }

.newsletter-form { max-width: 640px; margin: 0 auto; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
}

.newsletter-form input[type=text],
.newsletter-form input[type=email] {
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.newsletter-form input::placeholder { color: rgba(244,234,210,0.42); }

.newsletter-form input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.06);
}

.form-note { color: rgba(244,234,210,0.42); font-size: 12.5px; margin-top: 18px; letter-spacing: 0.04em; }

.hp-field { position: absolute; left: -9999px; }

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  background: linear-gradient(180deg, var(--color-bg), #050505);
  color: var(--color-ink-soft);
  padding: 64px 0 32px;
  font-size: 14px;
  border-top: 1px solid var(--border-soft);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: start;
  gap: 56px;
}

.footer-brand .logo {
  margin-bottom: 18px;
}

.footer-brand .footer-tagline {
  color: var(--color-ink-mute);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 320px;
}

.footer-col h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li { margin-bottom: 10px; }

.footer-col a {
  color: var(--color-ink-soft);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0;
  transition: color 0.2s ease;
}

.footer-col a:hover { color: var(--gold-bright); }

.footer-col a[target="_blank"]::after {
  content: " \2197";
  font-size: 11px;
  color: var(--color-ink-mute);
  margin-left: 2px;
  display: inline-block;
}

.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--color-ink-mute);
  letter-spacing: 0.03em;
}

.footer-bottom p { margin: 0; }

.footer-bottom .affiliate-disclosure {
  width: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-ink-mute);
  opacity: 0.85;
}

/* Social icons row */
.social-list {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(201,169,110,0.08);
  color: var(--gold);
  margin: 0;
  border: 1px solid var(--border-soft);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.social-list a:hover {
  background: var(--gold);
  color: #1a1300;
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .site-nav { gap: 18px; }
  .site-nav a { font-size: 12.5px; }
  .hero { padding: 12px 0 10px; }
  .hero::before { top: 4px; }
  .hero::after { bottom: 4px; }
  .section { padding: 40px 0 72px; }
  #deals, #ofertas { padding-top: 4px; }
  .field-row { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* Tighter header spacing on phones; the layout is already column-
   stacked at every viewport size from the base rules above, so all
   we tweak here is padding and the sticky submenu offsets so the
   submenu sits just below the stacked header. */
@media (max-width: 700px) {
  .header-inner {
    padding: 12px 18px 10px;
    gap: 8px;
  }
}

@media (max-width: 540px) {
  .logo-main { font-size: 34px; letter-spacing: 0.10em; }
  .logo-sub { font-size: 22px; letter-spacing: 0.15em; margin-top: -2px; }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 11.5px; letter-spacing: 0.06em; }
  .container { padding: 0 20px; }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* =========================================================
   Auto-rotating deals (Live Deals page)
   Categories rotate weekly, products rotate daily, all
   filled in by script.js from /.netlify/functions/deals.
   ========================================================= */

.deals-rotating {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Keep 56px between category blocks but near-zero after submenu */
.deal-category {
  margin-top: 56px;
}

.deals-submenu + .deal-category,
.deals-rotating > .deal-category:first-child {
  margin-top: 2px;
}

/* Category heading row: title with share buttons sitting right next
   to it so they're easy to find. The border-bottom is on this wrapper
   so it still spans the full row width. */
.deal-category-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}

.deal-category-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  color: #ffffff;
  margin: 0;
  padding: 0;
  border-bottom: none;
  flex: 0 0 auto;
  min-width: 0;
}

.deal-category-share-buttons {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.deal-category-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.deal-category-share-btn:hover {
  background: var(--gold);
  color: #1a1300;
  transform: scale(1.08);
}

.deal-category-share-btn:active {
  transform: scale(0.95);
}

.deal-category-share-btn svg,
.deal-category-share-btn svg * {
  pointer-events: none;
}

/* Discount badge pinned to the top-left corner of the card image. */
.deal-save-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1300;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(164,133,62,0.45);
}

/* Strikethrough "was" price shown next to the current price. */
.deal-was {
  color: var(--color-ink-mute);
  font-weight: 500;
  font-size: 10px;
  text-decoration: line-through;
  margin-left: 5px;
  letter-spacing: 0.01em;
}

/* Dollar savings shown below the price line. */
.deal-savings-amount {
  color: #4caf50;
  font-weight: 700;
  font-size: 11px;
  margin: 3px 0 11px;
  letter-spacing: 0.01em;
}

/* =========================================================
   Deals submenu (Live Deals page)
   Row of buttons that jumps to each category section.
   Categories rotate weekly; the submenu is rebuilt on every
   page load from the same API response, so it stays in sync
   with whatever 4 categories are showing this week.
   ========================================================= */

.deals-submenu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 20px;
  margin: 0;
  background: #0d0d0d;
  border-bottom: 1px solid var(--border-mid);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 40;
}

.deals-submenu-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  white-space: nowrap;
  padding-right: 8px;
  border-right: 1px solid var(--border-soft);
  margin-right: 4px;
}

/* On desktop the submenu wraps freely so all 14 buttons are visible at
   once and stays sticky below the header. Phones get the single-row
   horizontal-scroll treatment further down so a tall multi-row sticky
   block doesn't eat the whole screen. */
.deals-submenu-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 auto;
}

.deals-submenu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(201, 169, 110, 0.08);
  border: 1px solid var(--border-mid);
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.deals-submenu-btn:hover,
.deals-submenu-btn:focus-visible {
  background: var(--gold);
  color: #1a1300;
  border-color: var(--gold);
  transform: translateY(-1px);
  text-decoration: none;
  outline: none;
}

.deals-submenu-btn:active {
  transform: translateY(0);
}

/* Subtle pipe divider between permanent and rotating category buttons */
.deals-submenu-divider {
  display: inline-flex;
  align-self: stretch;
  width: 1px;
  background: var(--border-mid);
  opacity: 0.5;
  margin: 2px 2px;
  flex-shrink: 0;
}

/* =========================================================
   Share buttons on deal cards
   ========================================================= */

.deal-share-buttons {
  /* Pinned to the bottom of the card body via margin-top: auto. Combined
     with the body's flex-column and the card's flex-column, this anchors
     the share buttons to the bottom edge of the stretched card, so they
     line up across cards in the same row even when title / price / save
     blocks differ in height. padding-top reserves a minimum gap when
     content above already fills the card. */
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  justify-content: flex-end;
  pointer-events: auto;
}

.deal-share-btn,
.share-deal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(10, 10, 10, 0.85);
  color: var(--gold);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0;
  line-height: 1;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 11;
}

.deal-share-btn:hover,
.share-deal-btn:hover {
  background: var(--gold);
  color: #1a1300;
  border-color: var(--gold);
  transform: scale(1.1);
}

.deal-share-btn:active,
.share-deal-btn:active {
  transform: scale(0.95);
}

.deal-share-btn svg,
.deal-share-btn svg *,
.share-deal-btn svg,
.share-deal-btn svg * {
  pointer-events: none;
}

/* =========================================================
   Toast notification
   ========================================================= */

.t7d-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a1300;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 12px 28px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.t7d-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================
   Card highlight when scrolled to via hash link
   ========================================================= */

.deal-card-highlight {
  animation: deal-highlight-pulse 2s ease;
}

@keyframes deal-highlight-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.6); }
  40%  { box-shadow: 0 0 0 8px rgba(201, 169, 110, 0.3); }
  100% { box-shadow: var(--shadow-sm); }
}

/* The deal-body needs relative positioning so the share buttons
   can be absolutely positioned inside it. */
.deal-card {
  position: relative;
}

.deal-card .deal-body {
  position: relative;
}

/* Scroll-margin accounts for the fixed header + submenu bar. */
.deal-category {
  scroll-margin-top: var(--fixed-offset, 320px);
}

@media (max-width: 860px) {
  .deals-submenu {
    padding: 12px 14px;
    gap: 10px;
  }
  .deals-submenu-label {
    font-size: 10px;
    letter-spacing: 0.18em;
    padding-right: 6px;
    margin-right: 2px;
  }
  .deals-submenu-btn {
    padding: 8px 14px;
    font-size: 12px;
  }
}

@media (max-width: 540px) {
  .deals-submenu {
    padding: 10px 12px;
    gap: 8px;
  }
  /* On tight screens, let the label drop above the button row
     so the buttons get the full width. Switch to horizontal
     scroll for 13 category buttons. */
  .deals-submenu-label {
    flex: 0 0 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    padding: 0 0 8px;
    margin: 0 0 4px;
  }
  .deals-submenu-row {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 6px;
    padding-bottom: 0;
  }
  .deals-submenu-btn {
    padding: 5px 10px;
    font-size: 11px;
    letter-spacing: 0.01em;
    flex-shrink: 0;
  }
}

/* Visually hidden - accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}