.recent-searches__link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   Step 5: Membership info section (consolidated)
   Base flow/layout now lives in membership-info.css scoped under .page-main.
   Keep only responsive typography and spacing here.
   ========================= */
/* Responsive overrides (non-destructive) - Step 1: Membership section */

/* Container helpers (optional if you later add wrappers) */
:root {
  --page-max-width: 1920px;
  --page-inline-pad: clamp(16px, 3vw, 32px);
  --block-gap: clamp(24px, 4vw, 48px);
  /* Section-specific overrides */
  --hero-max-width: 600px; /* requested */
  --url-max-width: 846px;
  --eco-max-width: 1280px;
  --membership-max-width: 1856px;
  --footer-max-width: 1856px;
  --recent-max-width: 846px;
  --legal-max-width: 1856px;
  --cards-max-width: 1281px; /* 3 cards (411px) + 2 gaps (24px) */

  /* Hero fine-tune controls */
  --hero-top: 0px;     /* relative vertical nudge */
  --hero-left: 0px;    /* relative horizontal nudge */
  --hero-gap: clamp(8px, 2vw, 17.6px);
  --hero-pad-block: 0px; /* extra vertical padding inside hero */
  /* Header-aware offset (moves hero down in flow) */
  --header-height: 80px;
  --hero-top-gap: 95px; /* space under header */
  --hero-offset-block: calc(var(--header-height) + var(--hero-top-gap)); /* = 175px */
  --hero-bottom-gap: 90px; /* space below hero */
  /* URL + Recent searches spacing */
  --url-bottom-gap: 6px;   /* 6px gap under URL input */
  /* Gap between recent searches and info cards */
  --recent-cards-gap: 158px;
  /* Gap between info-cards and eco-websites */
  --cards-eco-gap: 15%;
  /* Gap between eco-website button and membership-info */
  --eco-membership-gap: 22%;
}

/* =========================
   Step 4: Hero section overrides
   ========================= */

.hero-section {
  position: relative !important; /* allow top/left relative offsets */
  inset: auto !important;
  width: 100% !important;
  max-width: var(--hero-max-width, var(--page-max-width));
  /* Place hero exactly header(80) + gap(95) = 175px from top */
  margin-inline: auto !important;
  margin-block-start: var(--hero-offset-block) !important; /* 175px */
  margin-block-end: var(--hero-bottom-gap) !important; /* exact 90px below hero */
  padding-inline: var(--page-inline-pad) !important;
  padding-block: var(--hero-pad-block, 0px) !important;
  top: var(--hero-top, 0px);   /* fine vertical adjust */
  left: var(--hero-left, 0px); /* fine horizontal adjust */
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--hero-gap);
}

/* Keep original feel: remove absolute from inner blocks and keep widths */
.hero-section-title,
.hero-section-subtitle {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
}

/* Typography: match desktop values from main.css, scale down responsively */
.hero-section-title-text {
  margin: 0;
  color: #17191A;
  font-weight: 600;
  font-size: clamp(28px, 6vw, 56px);
  line-height: clamp(34px, 6.5vw, 64px);
}

.hero-section-subtitle-text {
  margin: 0;
  color: #5a5c63;
  font-weight: 300;
  font-size: clamp(14px, 2.2vw, 22px);
  line-height: clamp(20px, 2.8vw, 28px);
}

/* On large (desktop) explicitly lock to original sizes */
@media (min-width: 1600px) {
  .hero-section-title-text { font-size: 56px; line-height: 64px; }
  .hero-section-subtitle-text { font-size: 22px; line-height: 28px; }
}

/* Tighten hero spacing on tablet/mobile */
@media (max-width: 991.98px) {
  .hero-section { gap: 60px !important; margin-block-end: 60px !important; }
  .hero-section-title { margin: 0 0 6px 0 !important; height: 100px;}
  .hero-section-title-text { line-height: 1.15 !important; }
  .hero-section-subtitle { margin: 0 !important; }
  .hero-section-subtitle-text { line-height: 1.35 !important; }
}

@media (max-width: 767.98px) {
  .hero-section { gap: 30px !important; margin-block-end: -60px !important; }
  .hero-section-title { margin: 0 0 4px 0 !important; }
  .hero-section-title-text { line-height: 1.12 !important; }
  .hero-section-subtitle-text { line-height: 1.32 !important; }
}

/* Optional alignment modifiers (add alongside .hero-section if needed) */
.hero--left { align-items: flex-start !important; text-align: left !important; }
.hero--center { align-items: center !important; text-align: center !important; }
.hero--right { align-items: flex-end !important; text-align: right !important; }

/* =========================
   Step 11: Section-specific max-width mapping
   ========================= */

/* Ensure each section uses its own max-width as requested */
.url-input-container { max-width: var(--url-max-width, var(--page-max-width)) !important; }
.eco-website { max-width: var(--eco-max-width, var(--page-max-width)) !important; }
.membership-info { max-width: var(--membership-max-width, var(--page-max-width)) !important; }
.footer { max-width: var(--footer-max-width, var(--page-max-width)) !important; }
.recent-searches__header,
.recent-searches__list { max-width: var(--recent-max-width, var(--page-max-width)) !important; }
.legal-info { max-width: var(--legal-max-width, var(--page-max-width)) !important; }
.info-cards-container { max-width: var(--cards-max-width, var(--page-max-width)) !important; }

/* Info cards: participate in flow so margins above/below work */
.page-main .info-cards-container {
  position: relative !important; /* was absolute in info-card.css */
  inset: auto !important;        /* reset top/left */
  width: 100% !important;
  max-width: var(--cards-max-width, var(--page-max-width)) !important;
  margin: var(--block-gap, 48px) auto !important; /* vertical spacing + center */
  box-sizing: border-box;
  overflow: hidden; /* keep carousel clipping (desktop/JS) */
}

/* =========================
   Step 12: Clip-path group spacing below hero
   ========================= */
/* Ensure exactly 30px space below the clip-path image */
.clip-path-group {
  /* Neutralize absolute positioning from main.css */
  position: relative !important;
  inset: auto !important;

  /* Center and size responsively */
  display: block; /* allow vertical margins to apply cleanly */
  margin-inline: auto !important; /* center horizontally */
  margin-block-end: 30px !important; /* spacing below */
  /* Default size follows main.css (50x50), but can be overridden via variables */
  width: var(--clip-width, 50px) !important;
  height: var(--clip-height, 50px) !important;
  max-width: var(--clip-max-width, 100%);
}

/* Tighten spacing above clip-path on tablet/mobile */
@media (max-width: 991.98px) {
  .clip-path-group {
    margin-block-start: 8px !important; /* reduce distance from hero */
  }
}

@media (max-width: 767.98px) {
  .clip-path-group {
    margin-block-start: 4px !important; /* even tighter on mobile */
  }
}

/* =========================
   Step 5: URL input overrides
   ========================= */

.url-input-container {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: var(--url-max-width, var(--page-max-width));
  margin-inline: auto !important;
  margin-block-end: var(--url-bottom-gap) !important; /* 6px gap below URL */
  padding-inline: var(--page-inline-pad) !important;
  box-sizing: border-box;
}

/* Footer logo/intro and sections: neutralize absolute and place in grid */
.footer-logo,
.footer-intro,
.footer-section-01,
.footer-section-02,
.footer-section-03,
.footer-section-04 {
  position: relative;
  inset: auto !important;
}

/* Desktop: section columns 4-up; logo/intro full width */
@media (min-width: 992px) {
  /* Two-column layout: left = cols 1-4 (stacked), right = cols 5-12 (4 sections inline) */
  .footer-logo  { grid-column: 1 / span 4; grid-row: 1; }
  .footer-intro { grid-column: 1 / span 4; grid-row: 2; }
  .footer-section-01 { grid-column: 5 / span 2; grid-row: 1 / span 2; }
  .footer-section-02 { grid-column: 7 / span 2; grid-row: 1 / span 2; }
  .footer-section-03 { grid-column: 9 / span 2; grid-row: 1 / span 2; }
  .footer-section-04 { grid-column: 11 / span 2; grid-row: 1 / span 2; }
}

/* Tablet: sections 2-up per row */
@media (min-width: 768px) and (max-width: 991.98px) {
  .footer-logo  { grid-column: 1 / -1; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-section-01 { grid-column: 1 / span 6; }
  .footer-section-02 { grid-column: 7 / span 6; }
  .footer-section-03 { grid-column: 1 / span 6; }
  .footer-section-04 { grid-column: 7 / span 6; }
}

/* Mobile: logo/intro full width, sections 01~04 on one row */
@media (max-width: 767.98px) {
  .page-main .footer { 
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;            
    min-height: unset !important;       
    overflow: visible !important;       
    z-index: 2;                         
    clear: both;                        
    display: grid !important;           
    grid-auto-rows: minmax(min-content, auto); 
    align-content: start;               
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; 
    padding-inline: 16px !important; 
    padding-block: 16px !important;   
    column-gap: 12px !important;     
    row-gap: 12px !important;        
  }
  /* logo and intro stay full width on their own rows */
  .footer-logo, .footer-intro { grid-column: 1 / -1; }
  /* sections align horizontally in the next row */
  .footer-section-01 { grid-column: 1; }
  .footer-section-02 { grid-column: 2; }
  .footer-section-03 { grid-column: 3; }
  .footer-section-04 { grid-column: 4; }
  /* prevent long content from forcing overflow and neutralize absolute rules from footer.css */
  .footer-section-01,
  .footer-section-02,
  .footer-section-03,
  .footer-section-04 { 
    position: relative !important; 
    inset: auto !important; 
    width: auto !important; 
    height: auto !important; 
    min-width: 0; 
    display: flex;                 /* stack heading + links vertically */
    flex-direction: column;
    gap: 8px;                      /* space between items */
    padding: 8px 0;                /* breathing room */
    min-height: 112px;             /* avoid collapsing to 0 due to absolute children */
  }

  /* Neutralize absolute positioning of inner elements so sections expand by content */
  .footer-section-heading,
  .footer-section-link-01,
  .footer-section-link-02,
  .footer-section-link-03,
  .footer-section-link-text { 
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
  }

  /* Make link rows flow-friendly */
  .footer-section-link-01,
  .footer-section-link-02,
  .footer-section-link-03 {
    display: block;
  }

  /* Ensure SNS tiles are fully visible and not offset on mobile */
  .footer-sns-instagram,
  .footer-sns-youtube,
  .footer-sns-contact {
    position: relative !important;
    top: auto !important;              /* undo desktop offset (120px) on mobile */
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 0 !important; /* add spacing above tiles */
    z-index: 1;
  }
}

.url-input-form {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.url-input { flex: 1 1 auto; min-width: 0; }
.measure-btn { flex: 0 0 auto; }

/* Tablet: add side gutters and slightly larger padding */
@media (max-width: 991.98px) {
  .url-input-container {
    /* keep within design max, but leave 32px gutters each side (64px total) */
    max-width: min(var(--url-max-width, 846px), calc(100% - 64px)) !important;
    padding-inline: clamp(16px, 3.5vw, 24px) !important;
    height: 72px !important;
    border-radius: 40px !important; /* maintain pill look */
  }
}

@media (max-width: 767.98px) {
  .url-input-form { flex-direction: column; gap: 8px; }
  .measure-btn { width: 100%; }
}

/* Mobile: slightly smaller input, keep gutters tighter */
@media (max-width: 767.98px) {
  .url-input-container {
    max-width: calc(100% - 32px) !important; /* 16px gutters */
    height: 64px !important;
    padding-inline: 16px !important;
    border-radius: 36px !important;
  }
  .url-input-form-group { height: 64px; }
  .url-input-container .url-input { font-size: 16px; padding-left: 40px; }
  .measure-btn { width: 44px; height: 44px; }
  .url-input-icon { width: 18px; height: 18px; }
}

/* =========================
   Step 6: Eco website overrides
   ========================= */

.eco-website {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: var(--page-max-width);
  margin: var(--block-gap) auto !important;
  padding-inline: var(--page-inline-pad) !important;
  box-sizing: border-box;
}

.eco-website-title { 
  font-size: clamp(32px, 2.6vw, 32px); 
  font-weight: 600; 
  margin-bottom: 20px; 
}

.eco-website-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .eco-website-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .eco-website-list { grid-template-columns: 1fr; }
}

/* Cards inside eco-website list */
.eco-website-01,
.eco-website-02,
.eco-website-03,
.eco-website-04,
.eco-website-05,
.eco-website-06,
.eco-website-07 {
  width: 100% !important;
  height: auto !important;
  position: static !important;
  border-radius: 16px;
  overflow: hidden;
}

/* .eco-website-description { position: static !important; } */
/* .eco-website-arrow-container { position: static !important; } */
/* .eco-website-arrow { position: static !important; } */

/* =========================
   Step 7: Recent searches overrides
   ========================= */

.recent-searches-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;           /* keep on one line */
  gap: 12px;
  width: 100%;
  max-width: var(--recent-max-width, var(--page-max-width));
  margin-inline: auto;
  padding-inline: 0;           /* remove side padding 32 */
  box-sizing: border-box;
  margin-block-end: var(--recent-cards-gap) !important; /* 158px gap to info cards */
}

.recent-searches__header,
.recent-searches__list {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: var(--page-max-width);
  margin-inline: auto !important;
  padding-inline: var(--page-inline-pad) !important;
  box-sizing: border-box;
}

/* In row context, remove padding and let widths be auto */
.recent-searches-row .recent-searches__header,
.recent-searches-row .recent-searches__list {
  width: auto !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

.recent-searches__header {
  flex: 0 0 117px; /* fixed width */
  width: 117px !important;
  height: 24px !important;
}

.recent-searches__header {
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important; /* avoid extra row height */
  height: 24px;
  font-size: 16px !important;
  line-height: 24px !important;
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: #70737c;
  text-align: left;
  white-space: nowrap;          /* prevent header text wrapping */
}

.recent-searches__list {
  flex: 1 1 auto;           /* take remaining width */
  min-width: 0;             /* allow shrinking for ellipsis */
  overflow-x: auto;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  font-size: 16px;
  color: #37383c;
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  scrollbar-width: none; /* Firefox */
  white-space: nowrap;     /* single line */
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .recent-searches__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .recent-searches__list { grid-template-columns: 1fr; }
}

.recent-searches__item { position: static !important; }

/* =========================
   Step 8: Background container overrides
   Behind content, preserves original absolute positions (hero/top area)
   ========================= */

/* Recent searches: align with URL input container width and spacing */
@media (max-width: 991.98px) {
  .recent-searches-row {
    max-width: min(var(--url-max-width, 846px), calc(100% - 64px)) !important; /* same gutters as URL input */
    margin-inline: auto !important;
    margin-block-start: 10px !important;  /* sit close under URL input */
    margin-block-end: 48px !important;    /* reduce large default gap */
    padding-inline: 0 !important;
  }
  .recent-searches__list { max-width: 100% !important; }
}

@media (max-width: 767.98px) {
  .recent-searches-row {
    max-width: calc(100% - 32px) !important; /* 16px side gutters (match URL input mobile) */
    margin-block-start: 8px !important;
    margin-block-end: 32px !important;
  }
}

.background-container {
  position: absolute !important;   /* scrolls with page, stays at top */
  top: 0 !important;
  left: 50% !important;            /* center to design canvas */
  transform: translateX(-50%);
  width: min(var(--page-max-width), 100%) !important;
  z-index: -1;                     /* behind all normal content */
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;               /* allow shapes to render as designed */
  pointer-events: none;            /* decorative only */
}

.background-element {
  position: absolute !important;   /* use original top/left from background.css */
}

/* Ensure the merged top background stays centered horizontally */
.top_bg {
  left: 50% !important;
  transform: translateX(-50%);
}

/* Mobile/tablet: make background larger and more visible */
@media (max-width: 991.98px) {
  .background-container {
    height: 1400px !important; /* ensure enough canvas below header */
    width: 130% !important;     /* remove desktop max-width min() constraint */
  }
  /* Enlarge background image while keeping it centered */
  .top_bg {
    width: 150vw !important;
    height: auto !important;
    top: -8vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 767.98px) {
  .background-container {
    height: 120vh !important;   /* fill more of the initial viewport */
    left: 50% !important;       /* keep centered on mobile */
    transform: translateX(-50%) !important; /* center anchoring */
    width: 170% !important;     /* full-bleed canvas */
  }
  .top_bg {
    width: 220vw !important;    /* stronger scale for center focus */
    height: auto !important;     /* keep aspect ratio */
    top: -12vw !important;       /* slight downward nudge */
    left: 50% !important;        /* ensure centered */
    transform: translateX(-50%) !important;
  }
}

/* =========================
   Step 9: Legal info overrides
   ========================= */

.legal-info {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: var(--page-max-width, 1856px);
  margin: 26px auto 0 !important; /* 26px below footer */
  padding-inline: var(--page-inline-pad) !important;
  box-sizing: border-box;
  z-index: 1; /* ensure visible above backgrounds */
  height: auto !important;
  overflow-x: clip; /* prevent subpixel horizontal scroll */

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap; /* single row */
}

.legal-info-links {
  position: static !important; /* neutralize absolute left/width from main.css */
  display: flex;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: nowrap; /* keep on one line */
}
.legal-info-link-01,
.legal-info-link-02,
.legal-info-link-03 { position: static !important; }
.legal-info-link-text-01,
.legal-info-link-text-02 { position: static !important; }
/* ensure copyright participates in flow */
.legal-info-copyright { position: static !important; }

/* =========================
   Step 10: Eco website title/button tweaks
   ========================= */

.eco-website-button-text { font-size: clamp(14px, 2.2vw, 16px); }

@media (max-width: 767.98px) {
  .eco-website-button { width: 100%; }
}

/* Generic utilities */
.u-container {
  width: min(var(--page-max-width), 100%);
  margin-inline: auto;
  padding-inline: var(--page-inline-pad);
}

/* Exact 54px gap under membership-info (flow spacing) */
.page-main .membership-info { margin-bottom: 54px; }

/* Typography scales */
.page-main .membership-info-heading-1 { font-size: clamp(18px, 2.2vw, 24px); line-height: 1.33; font-weight: 600; }
.page-main .membership-info-heading-2 { font-size: clamp(24px, 4vw, 40px); line-height: 1.2; font-weight: 600; color: #fff; }
.page-main .membership-info-heading-3-text { font-size: clamp(14px, 2vw, 18px); line-height: 1.5; margin: 0; }



/* Button typography scaling */
.page-main .membership-info-button-text {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.2;
}

/* 2) Background container: avoid fixed large height if used as backdrop */
/* If you keep this element, ensure it doesn't force horizontal scroll */
@media (min-width: 992px) {
  .background-container {
    width: 100% !important;
    overflow: hidden !important;
  }
}

/* Optional: images should scale down in narrow screens */
.background-element {
  /* max-width: 100% !important; */
  height: auto !important;
}


/* =========================
   Step 2: Footer overrides
   ========================= */

/* Footer container becomes a responsive grid */
.footer {
  position: relative;
  inset: auto !important;
  width: 100% !important;
  max-width: var(--page-max-width);
  margin: var(--block-gap) auto !important;
  padding: clamp(28px, 4vw, 0px) !important;
  height: auto !important;
  min-height: 400px;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(min-content, auto);
  align-content: start;
  gap: clamp(12px, 2vw, 24px) !important;
  box-sizing: border-box;
}

/* Footer SNS tiles: place into grid with even distribution */
.footer-sns-instagram,
.footer-sns-youtube,
.footer-sns-contact {
  position: relative; 
  top: 120px;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important; /* fill assigned grid column */
  max-width: 100% !important;
  min-height: 80px; /* keep base tile height */
  display: grid; /* layout inner elements responsively */
  grid-template-columns: 1fr auto; /* text column + icon */
  grid-auto-rows: auto;
  align-items: center;
  padding: 16px; /* match design padding */
  box-sizing: border-box;
}

/* Neutralize absolute positioning of inner elements and place in grid */
.footer-sns-text,
.footer-sns-mail,
.footer-sns-icon {
  position: static !important;
  inset: auto !important;
}
.footer-sns-text { grid-column: 1; grid-row: 1; line-height: 32px; font-weight: 600; }
.footer-sns-mail { grid-column: 1; grid-row: 2; font-size: 14px; line-height: 20px; color: #878a93; }
.footer-sns-icon { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center; width: 24px; height: 24px; }

/* Desktop: 3-up evenly across 12-column grid */
@media (min-width: 992px) {
  .footer-sns-instagram { grid-column: 1 / span 4; }
  .footer-sns-youtube   { grid-column: 5 / span 4; }
  .footer-sns-contact   { grid-column: 9 / span 4; }
}

/* Tablet: 2-up first row, third full-width second row */
@media (min-width: 768px) and (max-width: 991.98px) {
  .footer-sns-instagram { grid-column: 1 / span 6; }
  .footer-sns-youtube   { grid-column: 7 / span 6; }
  .footer-sns-contact   { grid-column: 1 / -1; }
}

/* Mobile: stack full width */
@media (max-width: 767.98px) {
  .footer-sns-instagram,
  .footer-sns-youtube,
  .footer-sns-contact { grid-column: 1 / -1; }
}

.footer-sns-instagram,
.footer-sns-youtube,
.footer-sns-contact {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  outline: none;
}
.footer-sns-instagram:hover,
.footer-sns-youtube:hover,
.footer-sns-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.footer-sns-instagram:focus-visible,
.footer-sns-youtube:focus-visible,
.footer-sns-contact:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35);
}
.footer-sns-instagram.clicked,
.footer-sns-youtube.clicked,
.footer-sns-contact.clicked {
  transform: scale(0.98);
}

/* Info cards navigation arrows */
.info-card-button-previous,
.info-card-button-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: clamp(48px, 2.5vw, 48px) !important;
  height: auto !important;
  z-index: 2;
  cursor: pointer;
  pointer-events: auto !important; /* must be clickable */
}

/* .info-card-button-previous { left: clamp(8px, 1.5vw, 16px) !important; } */
/* .info-card-button-next { right: clamp(8px, 1.5vw, 16px) !important; } */

@media (max-width: 767.98px) {
  .info-card-button-previous,
  .info-card-button-next {
    width: clamp(40px, 6vw, 45px) !important;
  }
}

/* =========================
   Step 3: Info cards overrides (scoped, minimal)
   Keeps JS slider compatible (gap = 24px)
   ========================= */

.page-main .info-cards-track {
  position: static;
  display: flex;
  gap: 24px; /* must match JS 'gap' */
  will-change: transform;
  transition: transform 0.3s ease;
}

/* Tablet gutters for info cards container */
@media (max-width: 991.98px) {
  .page-main .info-cards-container {
    max-width: min(var(--cards-max-width, var(--page-max-width)), calc(100% - 64px)) !important;
    margin-inline: auto !important;
    margin-block-start: 100px !important; /* add visible space above on tablet */
  }
}

/* Mobile: 1 card per view with native swipe + scroll snap */
@media (max-width: 767.98px) {
 
  .page-main .info-cards-container {
    max-width: calc(100% - 32px) !important; /* 16px side gutters */
    margin-inline: auto !important;
    margin-block-start: 100px !important; /* add visible space above on mobile */
    overflow: hidden; /* keep outer clean, inner scrolls */
  }
  .page-main .info-cards-track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    gap: 16px; /* slightly tighter on mobile */
    /* Hide scrollbar while preserving scroll */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
  }
  .page-main .info-cards-track::-webkit-scrollbar { /* Chrome/Safari */
    display: none;
  }
  .page-main .info-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
}

/* Prevent any accidental horizontal overflow in the main page area */
.page-main { 
  overflow: hidden !important; 
}

/* =========================
   Step 4: Eco websites section
   Follow base sizes (411x300) with 3x2 grid and 24px gaps
   ========================= */

.eco-website {
  box-sizing: border-box;
}

.eco-website-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.eco-website-item { display: contents; }

.eco-website-card {
  position: relative;
  display: block;
  overflow: visible;
  text-decoration: none;
  border-radius: 24px;
  background: #d9d9d9;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  padding: 18px 20px; /* base inner padding for overlay content */
  min-height: 88px;
  color: inherit;
}

.eco-website-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.12); }

.eco-website-arrow {
  position: absolute;
  display: inline-flex;
  z-index: 2;
}
.eco-website-arrow-icon { display: block; width: 20px; height: 20px; }

.eco-website-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 18px 20px; /* match card padding */
  box-sizing: border-box;
}

@media (min-width: 1600px) {
  .eco-website-list { gap: 22px; }
}

@media (max-width: 991.98px) {
  .eco-website-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .eco-website-list { grid-template-columns: 1fr; }
}

.eco-website-list {
  display: grid !important;
  grid-template-columns: repeat(3, 411px);
  grid-auto-rows: 300px; /* base height */
  column-gap: 24px; /* matches base design spacing */
  row-gap: 24px;
  justify-content: start; /* exact fit inside 1281px container */
}

/* Make anchor wrappers block-level so grid cells are consistent */
.eco-website-list > a { display: block; }

/* Button: keep base design but place it 53px below the list, centered */
.eco-website-button {
  position: static !important;
  inset: auto !important;
  width: fit-content;
  max-width: 100%;
  margin: 53px auto var(--eco-membership-gap); /* 53px from list + 290px to membership */
  padding: 16px 49px; /* from main.css */
  border-radius: 999px; /* pill shape from main.css */
  background-color: rgba(219, 220, 223, 0.6); /* from main.css */
  display: flex; /* block-level flex to enable margin auto centering */
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Neutralize absolute positioning from main.css and keep base sizes */
.eco-website-01,
.eco-website-02,
.eco-website-03,
.eco-website-04,
.eco-website-05,
.eco-website-06 {
  position: relative !important; /* in-flow within grid */
  width: 100% !important;         /* fill the grid column (411px) */
  height: 100% !important;        /* 300px row height */
  box-sizing: border-box;
  border-radius: 24px;             /* keep style */
}

/* Arrow pill remains positioned inside each card */
.eco-website-01 .eco-website-arrow-container,
.eco-website-02 .eco-website-arrow-container,
.eco-website-03 .eco-website-arrow-container,
.eco-website-04 .eco-website-arrow-container,
.eco-website-05 .eco-website-arrow-container,
.eco-website-06 .eco-website-arrow-container {
  position: absolute;
  top: 20px;
  right: 23px; /* equivalent to left: 328px in 411px card */
}

/* Responsive fallbacks: 2 columns tablet, 1 column mobile */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .eco-website-list { grid-template-columns: repeat(2, minmax(300px, 1fr)); gap: 24px; }
  .eco-website-list > a { width: 100%; }
  .eco-website-01, .eco-website-02, .eco-website-03, .eco-website-04, .eco-website-05, .eco-website-06 {
    width: 100% !important; height: 300px !important;
  }
}

@media (max-width: 767.98px) {
  .eco-website-list { grid-template-columns: 1fr; gap: 16px; }
  .eco-website-01, .eco-website-02, .eco-website-03, .eco-website-04, .eco-website-05, .eco-website-06 {
    width: 100% !important; height: 260px !important; /* slight shrink for small screens */
  }
}

/* Arrow buttons group: below the track in flow */
.page-main .info-card-buttons {
  position: static; /* participate in normal flow, appears under .info-cards-track */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 35px; /* spacing from track */
  pointer-events: none; /* wrapper ignores clicks; children enable */
}

.page-main .info-card-buttons .info-card-button-previous,
.page-main .info-card-buttons .info-card-button-next {
  position: static !important; /* stay within flow row */
  pointer-events: auto;      /* buttons clickable */
  width: 48px;
  height: 48px;
  background-color: #e4e4e4;
  border-radius: 24px;
}

.info-card-buttons .info-card-button-previous { opacity: 0.55; }

/* Default desktop: 3 cards visible */
.info-cards-track .info-card {
  flex: 0 0 calc((100% - 2 * 24px) / 3);
  max-width: calc((100% - 2 * 24px) / 3);
}

/* Tablet 768–991.98px: 2 cards visible */
@media (min-width: 768px) and (max-width: 991.98px) {
  .page-main .info-cards-track .info-card {
    flex: 0 0 calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }
}

/* Mobile ≤ 767.98px: 1 card visible */
@media (max-width: 767.98px) {
  .page-main .info-cards-track .info-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Mobile: center buttons and use 44px tap targets */
@media (max-width: 767.98px) {
  .page-main .info-card-buttons {  margin-top: 30px; }
  .page-main .info-card-buttons .info-card-button-previous,
  .page-main .info-card-buttons .info-card-button-next { width: 44px; height: 44px; }
}

/* On large desktop, follow exact base sizes from design specs */
@media (min-width: 1600px) {
  .page-main .info-cards-container {
    height: auto;
  }
  .page-main .info-cards-track {
    gap: 22px;
  }
  .page-main .info-cards-track .info-card {
    flex: 0 0 411px;
    max-width: 411px;
    height: 500px;
  }
}