@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');

:root {
  --black: #000000;
  --white: #ffffff;
  --cream: #f4f0e8;
  --gold: #b8860b;
  --bronze: #8a5a18;
  --soft-line: rgba(255, 255, 255, 0.22);
  --light-screen: #e8e8e8;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: var(--black);
  overflow-x: hidden;
}

body {
  color: var(--white);
  font-family: "Libre Baskerville", Georgia, serif;
}

/* ======================================================
   TOP LOGO
====================================================== */

.top-logo-link {
  position: absolute;
  top: 18px;
  left: 40px;
  z-index: 50;
  display: inline-block;
}

.top-logo {
  width: 82px;
  height: auto;
  display: block;
}

/* ======================================================
   MENU
====================================================== */

.menu-button {
  position: absolute;
  top: 28px;
  right: 42px;
  width: 42px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 120;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

.menu-button span {
  display: block;
  width: 100%;
  height: 4px;
  background: var(--gold);
  border-radius: 999px;
  transition: all 0.3s ease;
}

.menu-button.open span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.menu-button.open span:nth-child(2) {
  opacity: 0;
}

.menu-button.open span:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px);
}

.menu-panel {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100vh;
  background: #111111;
  z-index: 110;
  padding: 100px 30px 30px;
  transition: right 0.3s ease;
  box-shadow: -6px 0 30px rgba(0, 0, 0, 0.45);
}

.menu-panel.open {
  right: 0;
}

.menu-panel a {
  display: block;
  color: var(--cream);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid #2a2a2a;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.menu-panel a:hover {
  color: var(--gold);
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  z-index: 100;
}

.menu-overlay.show {
  display: block;
}

/* ======================================================
   HOME LAYOUT
====================================================== */

.home-layout {
  width: min(1280px, 92vw);
  margin: 110px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(260px, 360px);
  gap: 70px;
  align-items: start;
}

/* ======================================================
   PDF SCREEN
====================================================== */

.pdf-slider-section {
  width: 100%;
}

.pdf-hero-slider {
  width: 100%;
  height: 430px;
  position: relative;
  overflow: hidden;
  background: var(--light-screen);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* No iframe viewer is shown here, so the grey edge disappears. */
.pdf-slide-visual {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--light-screen);
  position: relative;
}

.pdf-preview-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top center;
  will-change: transform;
}

/* PDF slowly moves down for 20 seconds. */
.pdf-pan-image {
  animation: pdfSlowPan 20000ms linear forwards;
}

@keyframes pdfSlowPan {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(calc(-1 * var(--pan-distance, 0px)));
  }
}

.pdf-empty-state,
.pdf-loading-state,
.pdf-clean-card {
  width: 100%;
  height: 100%;
  background: var(--light-screen);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3a3a3a;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pdf-clean-card {
  color: var(--gold);
  font-size: 28px;
  font-weight: 700;
}

.pdf-click-overlay {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 5;
}

.pdf-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.pdf-progress-bar {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--gold);
  animation: pdfProgress 20000ms linear;
}

@keyframes pdfProgress {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

/* ======================================================
   NVIDIA STYLE TABS
====================================================== */

.pdf-slider-tabs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 28px;
}

.pdf-slider-tabs.is-empty {
  display: none;
}

.pdf-slider-tab {
  background: transparent;
  border: none;
  border-top: 4px solid var(--soft-line);
  color: var(--cream);
  text-align: left;
  padding-top: 14px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}

.pdf-slider-tab.active {
  border-top-color: var(--gold);
}

.tab-category {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.88);
}

.tab-title {
  display: block;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

/* ======================================================
   RIGHT BOOK AREA
====================================================== */

.book-access-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 44px;
  padding-top: 20px;
}

.book-3d-link {
  text-decoration: none;
  display: inline-block;
}

.book-3d {
  position: relative;
  width: 215px;
  transform: perspective(1200px) rotateY(-24deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition: transform 0.35s ease;
}

.book-3d:hover {
  transform: perspective(1200px) rotateY(-15deg) rotateX(0deg) translateY(-6px);
}

.book-pages {
  position: absolute;
  top: 10px;
  right: -18px;
  width: 22px;
  height: calc(100% - 20px);
  background: linear-gradient(
    to right,
    #f3f3f3 0%,
    #ffffff 25%,
    #e4e4e4 55%,
    #fafafa 100%
  );
  border-radius: 0 3px 3px 0;
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.08);
}

.book-3d-cover {
  position: relative;
  width: 100%;
  display: block;
  border-radius: 2px;
  box-shadow: 28px 26px 24px rgba(0, 0, 0, 0.38);
  z-index: 2;
}

.book-shadow {
  position: absolute;
  left: 26px;
  right: -10px;
  bottom: -22px;
  height: 26px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0) 72%
  );
  filter: blur(8px);
  z-index: 1;
}

/* ======================================================
   IXXAMEN LINE
====================================================== */

.ixxamen-marquee {
  margin-top: 22px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--gold);
  font-size: 22px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
}

.ixxamen-marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: marqueeRight 26s linear infinite;
}

.ixxamen-marquee-track span {
  display: inline-block;
  padding-right: 34px;
}

@keyframes marqueeRight {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0%);
  }
}

/* ======================================================
   SIGNUP CARD
====================================================== */

.signup-card {
  width: min(760px, 86vw);
  margin: 78px auto 52px;
  background: #ffffff;
  border-radius: 22px;
  padding: 44px 38px 48px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.signup-card h2 {
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 28px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 28px;
  line-height: 1.15;

  background: linear-gradient(
    135deg,
    #8a5a18 0%,
    #b8860b 20%,
    #d4af37 40%,
    #f0cf69 55%,
    #9d6721 75%,
    #b8860b 100%
  );

  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  animation: diagonalGoldShift 6s ease-in-out infinite;
}

@keyframes diagonalGoldShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.signup-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.signup-form input {
  width: 280px;
  height: 52px;
  border: none;
  background: #f5efdf;
  padding: 0 18px;
  font-size: 14px;
  font-family: "Libre Baskerville", Georgia, serif;
  outline: none;
  color: #222222;
}

.signup-form button {
  height: 52px;
  padding: 0 26px;
  border: none;
  background: var(--gold);
  color: #ffffff;
  cursor: pointer;
  font-size: 16px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 700;
}

.signup-form button:hover {
  background: #a97908;
}

.signup-message {
  margin-top: 16px;
  font-size: 14px;
  color: var(--gold);
  display: none;
}

.signup-message.show {
  display: block;
}

/* ======================================================
   FOOTER
====================================================== */

.footer-info {
  margin: 34px 0 32px 46px;
  color: var(--white);
  font-size: 20px;
  line-height: 1.9;
}

.footer-info a {
  color: var(--white);
  text-decoration: none;
}

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

/* ======================================================
   PDF PAGE
====================================================== */

.pdf-page {
  min-height: 100vh;
  padding: 120px 40px 60px;
  background: var(--black);
}

.pdf-page-title {
  text-align: center;
  font-size: 36px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 50px;
}

.pdf-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 28px;
}

.pdf-grid-card {
  display: block;
  text-decoration: none;
  background: #111111;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  padding: 16px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.pdf-grid-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}

.pdf-grid-thumbnail {
  height: 250px;
  background: #1c1c1c;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 14px;
}

.pdf-grid-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.pdf-grid-thumbnail span {
  color: var(--gold);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pdf-grid-card p {
  color: var(--cream);
  font-size: 15px;
  line-height: 1.5;
}

.pdf-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255,255,255,0.6);
  padding: 60px 0;
}

/* ======================================================
   TABLET
====================================================== */

@media (max-width: 1024px) {
  .home-layout {
    width: min(92vw, 760px);
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .book-access-area {
    justify-content: center;
  }

  .pdf-hero-slider {
    height: 410px;
  }
}

/* ======================================================
   MOBILE
====================================================== */

@media (max-width: 768px) {
  .top-logo-link {
    top: 16px;
    left: 20px;
  }

  .top-logo {
    width: 66px;
  }

  .menu-button {
    top: 18px;
    right: 22px;
    width: 36px;
    height: 28px;
    gap: 6px;
  }

  .menu-button span {
    height: 3px;
  }

  .menu-panel {
    width: 260px;
    right: -280px;
    padding: 90px 24px 24px;
  }

  .home-layout {
    width: min(92vw, 520px);
    margin-top: 95px;
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .pdf-hero-slider {
    height: 310px;
  }

  .pdf-slider-tabs {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tab-title {
    font-size: 16px;
  }

  .book-3d {
    width: 170px;
  }

  .ixxamen-marquee {
    font-size: 16px;
  }

  .signup-card {
    width: min(92vw, 500px);
    padding: 30px 20px 36px;
    border-radius: 18px;
  }

  .signup-card h2 {
    font-size: 21px;
  }

  .signup-form {
    flex-direction: column;
    gap: 10px;
  }

  .signup-form input,
  .signup-form button {
    width: 100%;
    max-width: 320px;
  }

  .footer-info {
    margin: 24px 0 28px 24px;
    font-size: 16px;
  }

  .pdf-page {
    padding: 95px 22px 40px;
  }

  .pdf-page-title {
    font-size: 24px;
  }

  .pdf-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
  }

  .pdf-grid-thumbnail {
    height: 210px;
  }
}
/* ======================================================
   MOBILE FIX: SHORTER GOLD PDF TAB LINE
====================================================== */

@media (max-width: 768px) {
  .pdf-slider-tabs {
    width: 100%;
    margin-top: 22px;
    grid-template-columns: 1fr;
  }

  .pdf-slider-tab {
    width: 180px;
    max-width: 60vw;
    justify-self: start;
  }
}

/* ======================================================
   MOBILE FIX: PDF TABS GO SIDEWAYS, NOT DOWN
====================================================== */

@media (max-width: 768px) {
  .pdf-slider-tabs {
    display: flex;
    flex-direction: row;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    margin-top: 22px;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
  }

  .pdf-slider-tab {
    flex: 0 0 210px;
    width: 210px;
    max-width: 210px;
    justify-self: auto;
    scroll-snap-align: start;
  }

  .pdf-slider-tabs {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pdf-slider-tabs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

}
/* ======================================================
   FINAL MOBILE FIX: PDF SCREEN MUST FIT INSIDE PHONE WIDTH
====================================================== */

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .home-layout {
    width: 100%;
    max-width: 100%;
    margin: 95px 0 0;
    padding-left: 16px;
    padding-right: 16px;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .pdf-slider-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .pdf-hero-slider {
    width: 100%;
    max-width: 100%;
    height: 310px;
    overflow: hidden;
  }

  .pdf-slide-visual {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .pdf-preview-image {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: top center;
    display: block;
  }

  .pdf-slider-tabs {
    display: flex;
    flex-direction: row;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    margin-top: 22px;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
  }

  .pdf-slider-tab {
    flex: 0 0 210px;
    width: 210px;
    max-width: 210px;
    scroll-snap-align: start;
  }
}

/* ======================================================
   FINAL FIX v1003: PDF TABS STAY IN ONE HORIZONTAL ROW
   They scroll sideways and never wrap downward.
====================================================== */

@media (max-width: 1024px) {
  .pdf-slider-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .pdf-slider-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    gap: 18px !important;
    margin-top: 22px !important;
    padding-bottom: 14px !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;

    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .pdf-slider-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .pdf-slider-tab {
    flex: 0 0 260px !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;

    display: block !important;
    white-space: normal !important;

    scroll-snap-align: start !important;
  }

  .tab-category,
  .tab-title {
    white-space: normal !important;
  }
}

@media (max-width: 480px) {
  .pdf-slider-tab {
    flex-basis: 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }
}

/* ======================================================
   FINAL FIX v7000:
   PDF TABS ALWAYS STAY IN ONE HORIZONTAL ROW
   WORKS ON LAPTOP + MOBILE
====================================================== */

.pdf-slider-section {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.pdf-slider-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  width: 100% !important;
  max-width: 100% !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  grid-template-columns: none !important;

  gap: 28px !important;
  margin-top: 28px !important;
  padding-bottom: 14px !important;

  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;

  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.pdf-slider-tabs::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.pdf-slider-tab {
  flex: 0 0 260px !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;

  display: block !important;
  scroll-snap-align: start !important;
  white-space: normal !important;
}

.tab-category,
.tab-title {
  white-space: normal !important;
}

@media (max-width: 768px) {
  .pdf-slider-tab {
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }
}

/* ======================================================
   SOUP + TEA BOOKS ON HOMEPAGE
====================================================== */

.book-access-area .book-3d {
  width: 185px;
}

@media (max-width: 1024px) {
  .book-access-area {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 42px;
    justify-content: center;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .book-access-area {
    gap: 30px;
  }

  .book-access-area .book-3d {
    width: 150px;
  }
}




/* ======================================================
   LARGE BOOK CAROUSEL v25000
   One large scrollable book selector.
====================================================== */

@media (min-width: 1025px) {
  .home-layout {
    width: min(1500px, 92vw) !important;
    grid-template-columns: minmax(0, 820px) minmax(360px, 520px) !important;
    gap: 80px !important;
    align-items: center !important;
  }
}

.book-access-area {
  width: 100% !important;
  min-height: min(70vh, 620px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-top: 0 !important;
  gap: 0 !important;
}

.book-carousel {
  position: relative;
  width: min(100%, 560px);
  display: grid;
  place-items: center;
}

.book-carousel-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: none;
}

.book-carousel-viewport::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.book-carousel-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

.book-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  scroll-snap-align: center;
  display: flex !important;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  padding: 22px 34px 54px;
}

.book-carousel .book-3d {
  --book-size: clamp(330px, 30vw, 500px);
  width: var(--book-size) !important;
  height: var(--book-size) !important;
  position: relative;
  transform: perspective(1500px) rotateY(-18deg) rotateX(2deg) !important;
  transform-style: preserve-3d;
  transition: transform 0.45s ease, filter 0.45s ease;
}

.book-carousel .book-3d:hover {
  transform: perspective(1500px) rotateY(-12deg) rotateX(0deg) translateY(-8px) !important;
}

.book-carousel .book-3d-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.book-carousel .book-pages {
  top: 12px !important;
  right: -26px !important;
  width: 30px !important;
  height: calc(100% - 24px) !important;
}

.book-carousel .book-shadow {
  left: 34px !important;
  right: -14px !important;
  bottom: -28px !important;
  height: 34px !important;
}

.book-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 78px;
  border: none;
  background: transparent;
  color: var(--gold);
  font-size: 76px;
  line-height: 1;
  cursor: pointer;
  z-index: 20;
  display: grid;
  place-items: center;
  opacity: 0.92;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.book-carousel-arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
}

.book-carousel-arrow-left {
  left: -54px;
}

.book-carousel-arrow-right {
  right: -54px;
}

.book-carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 22;
}

.book-carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: transparent;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
}

.book-carousel-dot.active {
  background: var(--gold);
  opacity: 1;
}

@media (max-width: 1024px) {
  .book-access-area {
    min-height: min(78vh, 620px) !important;
  }

  .book-carousel {
    width: min(92vw, 620px);
  }

  .book-carousel-slide {
    padding: 22px 54px 56px;
  }

  .book-carousel .book-3d {
    --book-size: clamp(340px, 68vw, 540px);
  }

  .book-carousel-arrow-left {
    left: 0;
  }

  .book-carousel-arrow-right {
    right: 0;
  }
}

@media (max-width: 768px) {
  .book-access-area {
    min-height: min(74vh, 560px) !important;
  }

  .book-carousel {
    width: 100%;
  }

  .book-carousel-slide {
    padding: 18px 42px 48px;
  }

  .book-carousel .book-3d {
    --book-size: min(78vw, 420px);
    transform: perspective(1300px) rotateY(-16deg) rotateX(1deg) !important;
  }

  .book-carousel .book-pages {
    right: -18px !important;
    width: 22px !important;
  }

  .book-carousel-arrow {
    width: 38px;
    height: 62px;
    font-size: 58px;
  }

  .book-carousel-arrow-left {
    left: 2px;
  }

  .book-carousel-arrow-right {
    right: 2px;
  }
}


/* ======================================================
   MOBILE BOOK SIZE FIX v26000
   Only changes phone/tablet size. Laptop size stays unchanged.
====================================================== */

@media (max-width: 768px) {
  .book-access-area {
    min-height: min(62vh, 470px) !important;
  }

  .book-carousel-slide {
    padding: 16px 46px 44px !important;
  }

  .book-carousel .book-3d {
    --book-size: min(60vw, 330px) !important;
  }

  .book-carousel .book-pages {
    right: -15px !important;
    width: 18px !important;
    top: 9px !important;
    height: calc(100% - 18px) !important;
  }

  .book-carousel-arrow {
    font-size: 52px !important;
    width: 34px !important;
    height: 58px !important;
  }

  .book-carousel-arrow-left {
    left: 4px !important;
  }

  .book-carousel-arrow-right {
    right: 4px !important;
  }
}

@media (max-width: 430px) {
  .book-carousel .book-3d {
    --book-size: min(68vw, 300px) !important;
  }

  .book-carousel-slide {
    padding-left: 38px !important;
    padding-right: 38px !important;
  }
}


/* ======================================================
   REMOVE BOOK CAROUSEL ARROWS v27000
   Books are still scrollable/touchable, but no arrows show.
====================================================== */

.book-carousel-arrow,
.book-carousel-arrow-left,
.book-carousel-arrow-right {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.book-carousel-slide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 768px) {
  .book-carousel-slide {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ======================================================
   REMOVE SOUP BOOK v34000
   Only one book remains, so carousel dots are hidden.
====================================================== */

.book-carousel-dots {
  display: none !important;
}

.book-carousel-track {
  justify-content: center !important;
}


/* ======================================================
   SMOOTH BRONZE / GOLD / BROWN LOGIN GRADIENT v42000
   Optimized to avoid lag:
   - no heavy blur filters
   - slow GPU-friendly transform animations
   - only these colors:
     Gold   #FFD700
     Bronze #CD7F32
     Brown  #835633
====================================================== */

body.login-required { overflow: hidden; }

body.login-required > *:not(.login-gate):not(script) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.login-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 22%, rgba(205, 127, 50, 0.98) 0%, rgba(131, 86, 51, 0.92) 19%, transparent 43%),
    radial-gradient(circle at 84% 18%, rgba(255, 215, 0, 0.88) 0%, rgba(205, 127, 50, 0.72) 22%, transparent 47%),
    radial-gradient(circle at 70% 80%, rgba(131, 86, 51, 0.96) 0%, rgba(205, 127, 50, 0.64) 26%, transparent 52%),
    linear-gradient(130deg, #835633 0%, #CD7F32 45%, #FFD700 100%);
}

.login-gate::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -2;
  background:
    radial-gradient(ellipse at 12% 28%, rgba(131, 86, 51, 0.98) 0%, rgba(131, 86, 51, 0.82) 16%, transparent 39%),
    radial-gradient(ellipse at 28% 78%, rgba(255, 215, 0, 0.86) 0%, rgba(205, 127, 50, 0.68) 18%, transparent 42%),
    radial-gradient(ellipse at 66% 42%, rgba(205, 127, 50, 0.92) 0%, rgba(131, 86, 51, 0.72) 20%, transparent 46%),
    radial-gradient(ellipse at 88% 68%, rgba(255, 215, 0, 0.82) 0%, rgba(205, 127, 50, 0.64) 21%, transparent 47%),
    radial-gradient(ellipse at 48% 14%, rgba(131, 86, 51, 0.90) 0%, rgba(205, 127, 50, 0.60) 24%, transparent 50%);
  opacity: 0.96;
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.08);
  animation: ixxamenSmoothDriftOne 34s cubic-bezier(.45,.05,.2,1) infinite alternate;
}

.login-gate::after {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  background: conic-gradient(
    from 120deg at 52% 52%,
    rgba(131, 86, 51, 0.92) 0deg,
    rgba(205, 127, 50, 0.84) 54deg,
    rgba(255, 215, 0, 0.72) 106deg,
    rgba(131, 86, 51, 0.88) 162deg,
    rgba(205, 127, 50, 0.78) 224deg,
    rgba(255, 215, 0, 0.62) 286deg,
    rgba(131, 86, 51, 0.92) 360deg
  );
  opacity: 0.44;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0) scale(1.12);
  animation: ixxamenSmoothDriftTwo 46s cubic-bezier(.4,0,.2,1) infinite alternate;
}

.login-gate .login-gate-button::before {
  content: "";
  position: absolute;
  inset: -190px;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.34), transparent 28%),
    radial-gradient(circle at 42% 55%, rgba(205, 127, 50, 0.26), transparent 42%),
    radial-gradient(circle at 58% 45%, rgba(131, 86, 51, 0.24), transparent 56%);
  opacity: 0.8;
  will-change: transform, opacity;
  animation: ixxamenButtonAura 9s ease-in-out infinite alternate;
}

@keyframes ixxamenSmoothDriftOne {
  0% { transform: translate3d(-6%, -5%, 0) scale(1.10) rotate(0deg); }
  18% { transform: translate3d(5%, -8%, 0) scale(1.15) rotate(3deg); }
  39% { transform: translate3d(9%, 4%, 0) scale(1.12) rotate(-4deg); }
  62% { transform: translate3d(-4%, 8%, 0) scale(1.17) rotate(2deg); }
  81% { transform: translate3d(-8%, -1%, 0) scale(1.13) rotate(-2deg); }
  100% { transform: translate3d(4%, -4%, 0) scale(1.16) rotate(4deg); }
}

@keyframes ixxamenSmoothDriftTwo {
  0% { transform: translate3d(7%, -6%, 0) scale(1.13) rotate(0deg); opacity: 0.34; }
  27% { transform: translate3d(-8%, 5%, 0) scale(1.20) rotate(38deg); opacity: 0.52; }
  51% { transform: translate3d(5%, 9%, 0) scale(1.15) rotate(91deg); opacity: 0.42; }
  74% { transform: translate3d(-6%, -7%, 0) scale(1.21) rotate(145deg); opacity: 0.50; }
  100% { transform: translate3d(8%, 4%, 0) scale(1.17) rotate(203deg); opacity: 0.40; }
}

@keyframes ixxamenButtonAura {
  0% { transform: scale(0.90) translate3d(-4%, 3%, 0); opacity: 0.48; }
  100% { transform: scale(1.08) translate3d(4%, -3%, 0); opacity: 0.84; }
}

.login-gate[hidden] { display: none !important; }

.login-gate-button {
  position: relative;
  display: grid;
  place-items: center;
  background: #ffffff;
  border-radius: 999px;
  padding: 2px;
  box-shadow:
    0 22px 70px rgba(131, 86, 51, 0.34),
    0 12px 38px rgba(205, 127, 50, 0.24),
    0 8px 24px rgba(255, 215, 0, 0.20);
}
.login-gate-button iframe { border-radius: 999px !important; }

.auth-message {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  max-width: 330px;
  background: rgba(131, 86, 51, 0.90);
  border: 1px solid #FFD700;
  color: #FFD700;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  text-align: center;
}
.auth-message.show { opacity: 1; }

.menu-logout-button {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #2a2a2a;
  color: var(--cream);
  text-align: left;
  padding: 18px 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-logout-button:hover { color: var(--gold); }
.menu-logout-button[hidden] { display: none !important; }

.pdf-grid-link { display: block; text-decoration: none; }
.favorite-button {
  width: 100%; margin-top: 14px; border: 1px solid var(--gold); background: transparent;
  color: var(--gold); border-radius: 999px; padding: 10px 12px; cursor: pointer;
  font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 700;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.favorite-button:hover { background: rgba(184, 134, 11, 0.18); transform: translateY(-1px); }
.favorite-button.active { background: var(--gold); color: var(--black); }
.favorites-section {
  max-width: 1100px; margin: 0 auto 34px; border: 1px solid rgba(184, 134, 11, 0.48);
  border-radius: 12px; padding: 22px; background: rgba(17, 17, 17, 0.88);
}
.favorites-section h2 { color: var(--gold); font-size: 20px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
.favorites-list { display: flex; flex-wrap: wrap; gap: 10px; }
.favorite-link {
  color: var(--cream); text-decoration: none; border: 1px solid #2e2e2e; border-radius: 999px;
  padding: 9px 13px; background: #111111; font-size: 14px; transition: border-color 0.25s ease, color 0.25s ease;
}
.favorite-link span { color: var(--gold); margin-right: 6px; }
.favorite-link:hover { border-color: var(--gold); color: var(--gold); }
.favorites-empty { color: rgba(244, 240, 232, 0.7); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .login-gate::before,
  .login-gate::after,
  .login-gate .login-gate-button::before { animation: none !important; }
}


/* ======================================================
   HEADER GOOGLE SIGN-IN + REMOVE LOGIN GATE v43041
   The website now opens directly on the main page.
====================================================== */

.login-gate {
  display: none !important;
}

body.login-required {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.login-required > *:not(script) {
  visibility: visible !important;
  pointer-events: auto !important;
}

.top-auth-actions {
  position: absolute;
  top: 28px;
  right: 42px;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 38px;
}

.top-auth-actions .menu-button {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto;
}

.top-google-signin {
  min-width: 178px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-google-signin[hidden] {
  display: none !important;
}

.top-google-signin iframe {
  border-radius: 999px !important;
}


/* ======================================================
   CUSTOM GOLD GRADIENT GOOGLE SIGN-IN v43041
   The official Google button remains underneath for sign-in.
   This layer only changes the visible background/design.
====================================================== */

.top-google-signin.google-gradient-signin {
  position: relative;
  width: 178px;
  height: 40px;
  min-width: 178px;
  min-height: 40px;
  border-radius: 999px;
  overflow: hidden;
}

.top-google-signin.google-gradient-signin iframe {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0.001 !important;
  border-radius: 999px !important;
}

.custom-google-signin {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(
    135deg,
    #8a5a18 0%,
    #b8860b 20%,
    #d4af37 40%,
    #f0cf69 55%,
    #9d6721 75%,
    #b8860b 100%
  );
  background-size: 300% 300%;
  animation: diagonalGoldShift 6s ease-in-out infinite;
  border: 1px solid rgba(255, 235, 166, 0.95);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.custom-google-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
}

.custom-google-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.custom-google-text {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .top-auth-actions {
    top: 18px;
    right: 22px;
    gap: 28px;
  }

  .top-google-signin {
    min-width: 154px;
    transform: scale(0.86);
    transform-origin: right center;
  }
}

@media (max-width: 480px) {
  .top-auth-actions {
    right: 16px;
    gap: 22px;
  }

  .top-google-signin {
    min-width: 146px;
    transform: scale(0.78);
  }
}

/* Hide PDF name titles only inside collection pages.
   Homepage PDF menu titles stay visible because they do not use .pdf-page. */
.pdf-page .pdf-grid-link > p {
  display: none;
}

.pdf-page .pdf-grid-link .pdf-grid-thumbnail {
  margin-bottom: 0;
}


/* ======================================================
   PROFESSIONAL BOOK CHOOSER SCROLL v43041
   Fixes the first-page book selector so books are not cut off.
   The user can scroll, swipe, use arrows, or dots to choose a book.
====================================================== */

@media (min-width: 1025px) {
  .home-layout {
    width: min(1460px, 92vw) !important;
    grid-template-columns: minmax(0, 820px) minmax(360px, 620px) !important;
    gap: clamp(42px, 5vw, 80px) !important;
    align-items: center !important;
  }
}

.book-access-area {
  min-height: auto !important;
  overflow: visible !important;
}

.book-carousel {
  width: min(100%, 640px) !important;
  max-width: 100% !important;
  position: relative !important;
  padding: 0 42px 42px !important;
  display: block !important;
}

.book-carousel-viewport {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: 24px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  outline: none !important;
}

.book-carousel-viewport::-webkit-scrollbar {
  display: none !important;
}

.book-carousel-track {
  width: max-content !important;
  min-width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: clamp(20px, 3vw, 34px) !important;
  padding: 18px 4px 36px !important;
}

.book-carousel-slide {
  flex: 0 0 clamp(190px, 16vw, 246px) !important;
  width: clamp(190px, 16vw, 246px) !important;
  min-width: clamp(190px, 16vw, 246px) !important;
  max-width: clamp(190px, 16vw, 246px) !important;
  padding: 0 !important;
  scroll-snap-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 16px !important;
  text-align: center !important;
  text-decoration: none !important;
}

.book-carousel .book-3d {
  --book-size: clamp(180px, 15vw, 235px) !important;
  width: var(--book-size) !important;
  height: var(--book-size) !important;
  transform: perspective(1300px) rotateY(-14deg) rotateX(1.5deg) !important;
}

.book-carousel .book-3d:hover {
  transform: perspective(1300px) rotateY(-8deg) rotateX(0deg) translateY(-6px) !important;
}

.book-carousel .book-3d-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 4px !important;
}

.book-carousel .book-pages {
  top: 9px !important;
  right: -18px !important;
  width: 22px !important;
  height: calc(100% - 18px) !important;
}

.book-carousel .book-shadow {
  left: 24px !important;
  right: -8px !important;
  bottom: -22px !important;
  height: 26px !important;
}

.book-carousel-title {
  color: var(--cream) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  opacity: 0.92 !important;
  max-width: 100% !important;
}

.book-carousel-arrow,
.book-carousel-arrow-left,
.book-carousel-arrow-right {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.book-carousel-arrow {
  position: absolute !important;
  top: 42% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 54px !important;
  border: 1px solid rgba(184, 134, 11, 0.55) !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.62) !important;
  color: var(--gold) !important;
  font-size: 34px !important;
  line-height: 1 !important;
  place-items: center !important;
  z-index: 25 !important;
  cursor: pointer !important;
}

.book-carousel-arrow:hover {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1.05) !important;
  background: rgba(17, 17, 17, 0.95) !important;
}

.book-carousel-arrow-left {
  left: 0 !important;
}

.book-carousel-arrow-right {
  right: 0 !important;
}

.book-carousel-dots {
  display: flex !important;
  visibility: visible !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 8px !important;
  transform: translateX(-50%) !important;
  gap: 10px !important;
  z-index: 22 !important;
}

.book-carousel-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  border: 1px solid var(--gold) !important;
  background: transparent !important;
  cursor: pointer !important;
  padding: 0 !important;
  opacity: 0.8 !important;
}

.book-carousel-dot.active {
  background: var(--gold) !important;
  opacity: 1 !important;
}

@media (max-width: 1024px) {
  .book-access-area {
    min-height: auto !important;
  }

  .book-carousel {
    width: min(94vw, 650px) !important;
    padding: 0 40px 42px !important;
  }

  .book-carousel-slide {
    flex-basis: clamp(185px, 36vw, 238px) !important;
    width: clamp(185px, 36vw, 238px) !important;
    min-width: clamp(185px, 36vw, 238px) !important;
    max-width: clamp(185px, 36vw, 238px) !important;
  }

  .book-carousel .book-3d {
    --book-size: clamp(175px, 34vw, 230px) !important;
  }
}

@media (max-width: 560px) {
  .book-carousel {
    width: 100% !important;
    padding: 0 34px 40px !important;
  }

  .book-carousel-track {
    gap: 24px !important;
  }

  .book-carousel-slide {
    flex-basis: min(68vw, 250px) !important;
    width: min(68vw, 250px) !important;
    min-width: min(68vw, 250px) !important;
    max-width: min(68vw, 250px) !important;
  }

  .book-carousel .book-3d {
    --book-size: min(62vw, 225px) !important;
  }

  .book-carousel-title {
    font-size: 13px !important;
  }

  .book-carousel-arrow {
    top: 40% !important;
    width: 30px !important;
    height: 48px !important;
    font-size: 28px !important;
  }
}


/* ======================================================
   HOME BOOK CHOOSER SCROLL - SAME SIZE v43041
   Keeps the large book size. Only makes the homepage book
   chooser scroll one full-size book at a time.
====================================================== */

.book-access-area {
  width: 100% !important;
  min-height: min(70vh, 620px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-top: 0 !important;
  gap: 0 !important;
}

.book-carousel {
  position: relative !important;
  width: min(100%, 620px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}

.book-carousel-viewport {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  outline: none !important;
}

.book-carousel-viewport::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.book-carousel-track {
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
}

.book-carousel-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
  padding: 24px 44px 62px !important;
}

.book-carousel .book-3d {
  --book-size: clamp(330px, 30vw, 500px) !important;
  width: var(--book-size) !important;
  height: var(--book-size) !important;
  position: relative !important;
  transform: perspective(1500px) rotateY(-18deg) rotateX(2deg) !important;
  transform-style: preserve-3d !important;
  transition: transform 0.45s ease, filter 0.45s ease !important;
}

.book-carousel .book-3d:hover {
  transform: perspective(1500px) rotateY(-12deg) rotateX(0deg) translateY(-8px) !important;
}

.book-carousel .book-3d-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 2px !important;
}

.book-carousel .book-pages {
  top: 12px !important;
  right: -26px !important;
  width: 30px !important;
  height: calc(100% - 24px) !important;
}

.book-carousel .book-shadow {
  left: 34px !important;
  right: -14px !important;
  bottom: -28px !important;
  height: 34px !important;
}

.book-carousel-dots {
  display: flex !important;
  visibility: visible !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
  gap: 10px !important;
  z-index: 22 !important;
}

.book-carousel-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  border: 1px solid var(--gold) !important;
  background: transparent !important;
  cursor: pointer !important;
  padding: 0 !important;
  opacity: 0.8 !important;
}

.book-carousel-dot.active {
  background: var(--gold) !important;
  opacity: 1 !important;
}

.book-carousel-arrow,
.book-carousel-arrow-left,
.book-carousel-arrow-right {
  display: none !important;
}

@media (max-width: 1024px) {
  .book-carousel {
    width: min(94vw, 620px) !important;
  }

  .book-carousel-slide {
    padding: 22px 46px 58px !important;
  }

  .book-carousel .book-3d {
    --book-size: clamp(340px, 68vw, 540px) !important;
  }
}

@media (max-width: 768px) {
  .book-access-area {
    min-height: min(74vh, 560px) !important;
  }

  .book-carousel-slide {
    padding: 18px 42px 52px !important;
  }

  .book-carousel .book-3d {
    --book-size: min(78vw, 420px) !important;
    transform: perspective(1300px) rotateY(-16deg) rotateX(1deg) !important;
  }

  .book-carousel .book-pages {
    right: -18px !important;
    width: 22px !important;
  }
}

@media (max-width: 430px) {
  .book-carousel .book-3d {
    --book-size: min(68vw, 300px) !important;
  }

  .book-carousel-slide {
    padding-left: 38px !important;
    padding-right: 38px !important;
  }
}


/* ======================================================
   SAME-SURFACE BOOK SCROLL TOUCH FIX v43041
   No size/layout change: only makes the existing book area scroll smoothly.
====================================================== */
.book-carousel-viewport {
  touch-action: pan-x !important;
  cursor: grab;
}

.book-carousel-viewport.is-book-dragging {
  cursor: grabbing;
}


/* ======================================================
   HOME BOOK SCROLL SURFACE FIX v43041
   Keeps the same book size. The scroll/touch area now stays
   inside the book chooser instead of taking extra page space.
====================================================== */
.book-access-area {
  min-height: min(70vh, 620px) !important;
  padding: 0 !important;
}

.book-carousel {
  --home-book-size: clamp(330px, 30vw, 500px);
  --home-book-frame: calc(var(--home-book-size) + 74px);
  width: min(100%, var(--home-book-frame)) !important;
  max-width: var(--home-book-frame) !important;
  padding: 0 !important;
  overflow: visible !important;
}

.book-carousel-viewport {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x !important;
  cursor: grab !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.book-carousel-viewport.is-book-dragging {
  cursor: grabbing !important;
  scroll-snap-type: none !important;
}

.book-carousel-viewport::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.book-carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.book-carousel-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 20px 34px 58px !important;
}

.book-carousel .book-3d {
  --book-size: var(--home-book-size) !important;
  width: var(--book-size) !important;
  height: var(--book-size) !important;
}

.book-carousel-dots {
  bottom: 12px !important;
}

.book-carousel-arrow,
.book-carousel-arrow-left,
.book-carousel-arrow-right {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 1024px) {
  .book-carousel {
    --home-book-size: clamp(340px, 68vw, 540px);
    --home-book-frame: min(94vw, calc(var(--home-book-size) + 70px));
    width: var(--home-book-frame) !important;
    max-width: var(--home-book-frame) !important;
  }

  .book-carousel-slide {
    padding: 18px 32px 56px !important;
  }
}

@media (max-width: 768px) {
  .book-access-area {
    min-height: min(74vh, 560px) !important;
  }

  .book-carousel {
    --home-book-size: min(78vw, 420px);
    --home-book-frame: min(94vw, calc(var(--home-book-size) + 60px));
  }

  .book-carousel-slide {
    padding: 16px 28px 52px !important;
  }
}

@media (max-width: 430px) {
  .book-carousel {
    --home-book-size: min(68vw, 300px);
    --home-book-frame: min(94vw, calc(var(--home-book-size) + 50px));
  }

  .book-carousel-slide {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ======================================================
   SINGLE HOME BOOK: NO BOOK SCROLL/DOT ONLY v43041
   Only removes the book selector dot and book-image scrolling.
   PDF slider/screen styles are not changed.
====================================================== */
.single-book-carousel .book-carousel-dots {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.single-book-carousel .book-carousel-viewport {
  overflow-x: visible !important;
  overflow-y: visible !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: auto !important;
  touch-action: auto !important;
  cursor: pointer !important;
}

.single-book-carousel .book-carousel-viewport.is-book-dragging {
  cursor: pointer !important;
  scroll-snap-type: none !important;
}


/* CUSTOM GOOGLE MOBILE SIZE v43041 */
@media (max-width: 768px) {
  .top-google-signin.google-gradient-signin {
    width: 178px;
    min-width: 178px;
    height: 40px;
    min-height: 40px;
  }
}

@media (max-width: 480px) {
  .top-google-signin.google-gradient-signin {
    width: 178px;
    min-width: 178px;
    height: 40px;
    min-height: 40px;
  }
}

/* CUSTOM GOOGLE BUTTON FIT v43041 */
.top-google-signin.google-gradient-signin,
.top-google-signin {
  box-sizing: border-box;
}

.custom-google-signin {
  box-sizing: border-box;
  padding: 0 12px 0 10px;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
}

.custom-google-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.custom-google-icon svg {
  width: 14px;
  height: 14px;
}

.custom-google-text {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 27px);
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .custom-google-signin {
    padding: 0 10px 0 8px;
    gap: 6px;
    font-size: 13px;
  }

  .custom-google-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .custom-google-icon svg {
    width: 13px;
    height: 13px;
  }

  .custom-google-text {
    max-width: calc(100% - 24px);
  }
}


/* CUSTOM GOOGLE BUTTON PROFESSIONAL INNER FIT v43041
   Keeps the same outer button size, but gives the logo/text proper breathing room. */
.top-google-signin.google-gradient-signin {
  width: 178px !important;
  min-width: 178px !important;
  max-width: 178px !important;
  height: 40px !important;
  min-height: 40px !important;
}

.custom-google-signin {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.custom-google-icon {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  flex: 0 0 19px !important;
}

.custom-google-icon svg {
  width: 13.5px !important;
  height: 13.5px !important;
}

.custom-google-text {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

@media (max-width: 480px) {
  .custom-google-signin {
    padding: 0 14px !important;
    gap: 6px !important;
    font-size: 12px !important;
  }

  .custom-google-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex-basis: 18px !important;
  }

  .custom-google-icon svg {
    width: 13px !important;
    height: 13px !important;
  }

  .custom-google-text {
    max-width: 112px !important;
  }
}


/* ======================================================
   GOOGLE BUTTON FINAL ALL-DEVICE FIT v43041
   Keeps the button readable while keeping balanced padding
   so the logo and text never touch the edges.
====================================================== */
.top-auth-actions {
  gap: 44px !important;
}

.top-google-signin.google-gradient-signin {
  width: 214px !important;
  min-width: 214px !important;
  max-width: 214px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transform: none !important;
}

.top-google-signin.google-gradient-signin iframe {
  width: 100% !important;
  height: 100% !important;
}

.custom-google-signin {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.custom-google-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  flex: 0 0 22px !important;
}

.custom-google-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.custom-google-text {
  display: block !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  .top-auth-actions {
    gap: 34px !important;
  }

  .top-google-signin.google-gradient-signin {
    width: 198px !important;
    min-width: 198px !important;
    max-width: 198px !important;
    height: 40px !important;
    min-height: 40px !important;
    transform: none !important;
  }

  .custom-google-signin {
    padding: 0 16px !important;
    gap: 8px !important;
    font-size: 13px !important;
  }

  .custom-google-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex-basis: 20px !important;
  }

  .custom-google-icon svg {
    width: 14.5px !important;
    height: 14.5px !important;
  }
}

@media (max-width: 480px) {
  .top-auth-actions {
    right: 16px !important;
    gap: 22px !important;
  }

  .top-google-signin.google-gradient-signin {
    width: 188px !important;
    min-width: 188px !important;
    max-width: 188px !important;
    height: 38px !important;
    min-height: 38px !important;
    transform: none !important;
  }

  .custom-google-signin {
    padding: 0 14px !important;
    gap: 7px !important;
    font-size: 12px !important;
  }

  .custom-google-icon {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    flex-basis: 19px !important;
  }

  .custom-google-icon svg {
    width: 13.5px !important;
    height: 13.5px !important;
  }
}

@media (max-width: 380px) {
  .top-auth-actions {
    gap: 16px !important;
  }

  .top-google-signin.google-gradient-signin {
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .custom-google-signin {
    padding: 0 12px !important;
    gap: 6px !important;
    font-size: 11.4px !important;
  }

  .custom-google-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex-basis: 18px !important;
  }

  .custom-google-icon svg {
    width: 13px !important;
    height: 13px !important;
  }
}


/* ======================================================
   GOOGLE LOGIN CLICK FIX v43041
   The gradient button is now the clickable login control.
   No invisible Google iframe is used, so clicks work reliably.
====================================================== */
.top-google-signin.google-gradient-signin {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.top-google-signin.google-gradient-signin iframe {
  display: none !important;
}

.custom-google-signin {
  pointer-events: none !important;
}

.top-google-signin.google-gradient-signin:focus-visible {
  outline: 2px solid rgba(255, 235, 166, 0.95) !important;
  outline-offset: 4px !important;
}

/* ======================================================
   TEA AUDIO SECTION ON HOME PAGE
   Positioned between the screen/book area and the IXXAMEN marquee.
====================================================== */

.audio-tea-section {
  width: min(920px, 86vw);
  margin: 54px auto 46px;
}

.audio-list-shell {
  max-height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 28px;
  scrollbar-width: thin;
  scrollbar-color: #7f4cff rgba(255, 255, 255, 0.2);
}

.audio-list-shell::-webkit-scrollbar {
  width: 8px;
}

.audio-list-shell::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.audio-list-shell::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #bfa7ff, #7f4cff);
  border-radius: 999px;
}

.audio-tea-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 10px 0 12px;
  border-bottom: 4px solid rgba(255, 255, 255, 0.45);
}

.audio-tea-cover {
  width: 96px;
  height: 96px;
  background: #e8e8e8;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: Arial, sans-serif;
  font-size: 13px;
  pointer-events: none;
  user-select: none;
}

.audio-tea-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.audio-tea-title {
  color: var(--white);
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.15;
  font-weight: 500;
}

.audio-tea-title:hover {
  color: var(--gold);
}

.audio-list-loading {
  min-height: 1px;
}

/* ======================================================
   SPOTIFY-STYLE AUDIO PLAYER PAGE
====================================================== */

.audio-player-body {
  min-height: 100vh;
}

.spotify-audio-layout {
  width: min(1180px, 92vw);
  min-height: calc(100vh - 150px);
  margin: 112px auto 40px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 34px;
  align-items: stretch;
}

.audio-picker-panel {
  background: #151515;
  border: 1px solid rgba(184, 134, 11, 0.42);
  border-radius: 24px;
  padding: 18px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(255, 255, 255, 0.12);
}

.audio-picker-panel::-webkit-scrollbar {
  width: 7px;
}

.audio-picker-panel::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 999px;
}

.audio-picker-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 16px;
}

.audio-picker-hide,
.audio-picker-show {
  border: 1px solid rgba(184, 134, 11, 0.72);
  background: transparent;
  color: var(--cream);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-weight: 700;
}

.audio-picker-list {
  display: grid;
  gap: 12px;
}

.audio-picker-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--cream);
  border-radius: 16px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 15px;
}

.audio-picker-item.active,
.audio-picker-item:hover {
  border-color: var(--gold);
  background: rgba(184, 134, 11, 0.14);
}

.audio-picker-thumb {
  width: 56px;
  height: 56px;
  background: #e8e8e8;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 10px;
}

.audio-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.audio-player-stage {
  position: relative;
  background: linear-gradient(180deg, rgba(82, 20, 96, 0.92), #050505 68%);
  border-radius: 28px;
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 640px;
  overflow: hidden;
}

.audio-picker-show {
  position: absolute;
  top: 20px;
  left: 20px;
  display: none;
  background: rgba(0, 0, 0, 0.28);
}

.audio-player-cover-frame {
  width: min(560px, 72vw);
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  overflow: hidden;
  background: #e8e8e8;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}

.audio-player-cover-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.audio-player-title {
  margin-top: 28px;
  color: var(--white);
  font-family: Arial, sans-serif;
  font-size: clamp(28px, 4vw, 54px);
  text-align: center;
  line-height: 1.05;
}

.audio-progress-row {
  width: min(720px, 92%);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  color: var(--cream);
  font-family: Arial, sans-serif;
  font-size: 14px;
}

#audioProgressRange {
  width: 100%;
  accent-color: var(--gold);
}

.audio-control-row {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.audio-control-row button {
  border: none;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
}

.audio-control-row .audio-play-button {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  font-size: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.audio-player-empty {
  color: var(--cream);
  font-family: Arial, sans-serif;
}

.spotify-audio-layout.audio-picker-hidden {
  grid-template-columns: 1fr;
}

.spotify-audio-layout.audio-picker-hidden .audio-picker-panel {
  display: none;
}

.spotify-audio-layout.audio-picker-hidden .audio-picker-show {
  display: inline-flex;
}

.audio-footer {
  width: min(1180px, 92vw);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .audio-tea-section {
    width: min(620px, 90vw);
    margin-top: 42px;
  }

  .audio-list-shell {
    max-height: 440px;
    padding-right: 16px;
  }

  .audio-tea-row {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 16px;
    border-bottom-width: 3px;
  }

  .audio-tea-cover {
    width: 78px;
    height: 78px;
  }

  .spotify-audio-layout {
    grid-template-columns: 1fr;
    margin-top: 102px;
  }

  .audio-picker-panel {
    max-height: 260px;
  }

  .audio-player-stage {
    min-height: auto;
    padding: 28px 18px 30px;
  }

  .audio-player-cover-frame {
    width: min(520px, 86vw);
  }
}

@media (max-width: 520px) {
  .audio-tea-section {
    width: calc(100vw - 46px);
  }

  .audio-list-shell {
    max-height: 390px;
  }

  .audio-tea-row {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 14px;
  }

  .audio-tea-cover {
    width: 68px;
    height: 68px;
  }

  .audio-tea-title {
    font-size: 19px;
  }

  .audio-progress-row {
    width: 100%;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .audio-control-row {
    gap: 18px;
  }

  .audio-control-row .audio-play-button {
    width: 58px;
    height: 58px;
  }
}


/* ======================================================
   AUDIO SECTION SIZE + BRONZE PLAYER FIX v43041
   Keeps the homepage audio list aligned with the left PDF screen
   instead of taking the full page width. Also replaces the purple
   audio-player background with Ixxamen bronze/gold.
====================================================== */

@media (min-width: 1025px) {
  .audio-tea-section {
    width: 820px !important;
    max-width: 820px !important;
    margin-top: 54px !important;
    margin-right: 0 !important;
    margin-bottom: 46px !important;
    margin-left: max(4vw, calc((100vw - 1500px) / 2)) !important;
  }
}

@media (max-width: 1024px) {
  .audio-tea-section {
    width: min(92vw, 820px) !important;
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.audio-list-shell {
  scrollbar-color: var(--gold) rgba(255, 255, 255, 0.16) !important;
}

.audio-list-shell::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffd56a 0%, #c79318 48%, #835633 100%) !important;
}

.audio-player-stage {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 213, 106, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(141, 91, 42, 0.96) 0%, rgba(73, 43, 24, 0.94) 44%, #050505 78%) !important;
}


/* ======================================================
   AUDIO HOME ROW SIZE FIX v43041
   Keeps the homepage audio row the same visual width as the
   left PDF screen area, with smaller title text and the same
   grey divider color used under the PDF showcase tabs.
====================================================== */

@media (min-width: 1025px) {
  .audio-tea-section {
    width: min(800px, 48vw) !important;
    max-width: min(800px, 48vw) !important;
    margin-top: 54px !important;
    margin-right: auto !important;
    margin-bottom: 46px !important;
    margin-left: calc((100vw - min(1460px, 92vw)) / 2) !important;
  }

  .audio-list-shell {
    max-height: 410px !important;
    padding-right: 0 !important;
  }

  .audio-tea-row {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 18px !important;
    border-bottom: 4px solid var(--soft-line) !important;
  }

  .audio-tea-cover {
    width: 86px !important;
    height: 86px !important;
  }

  .audio-tea-title {
    font-size: clamp(16px, 1.25vw, 22px) !important;
    line-height: 1.18 !important;
    font-weight: 500 !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 1024px) {
  .audio-tea-section {
    width: min(92vw, 760px) !important;
    max-width: 92vw !important;
  }

  .audio-list-shell {
    padding-right: 0 !important;
  }

  .audio-tea-row {
    border-bottom-color: var(--soft-line) !important;
  }

  .audio-tea-title {
    font-size: clamp(16px, 3.6vw, 21px) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
  }
}


/* ======================================================
   AUDIO HOME ROW WIDTH + SMALL COVER FIX v43041
   Makes the homepage audio row match the left PDF screen width
   and keeps the cover/title compact for better UX.
====================================================== */

.audio-tea-section {
  width: min(760px, 92vw) !important;
  max-width: min(760px, 92vw) !important;
}

.audio-list-shell {
  width: 100% !important;
  max-width: 760px !important;
  padding-right: 0 !important;
}

.audio-tea-row {
  width: 100% !important;
  max-width: 760px !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 8px 0 10px !important;
  border-bottom: 4px solid var(--soft-line) !important;
}

.audio-tea-cover {
  width: 70px !important;
  height: 70px !important;
}

.audio-tea-title {
  font-size: clamp(15px, 1.05vw, 19px) !important;
  line-height: 1.18 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

@media (min-width: 1025px) {
  .audio-tea-section {
    width: min(760px, 44vw) !important;
    max-width: min(760px, 44vw) !important;
    margin-left: calc((100vw - min(1460px, 92vw)) / 2) !important;
    margin-right: auto !important;
  }
}

@media (max-width: 900px) {
  .audio-tea-section {
    width: calc(100vw - 46px) !important;
    max-width: calc(100vw - 46px) !important;
  }

  .audio-tea-row {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 13px !important;
    border-bottom-width: 3px !important;
  }

  .audio-tea-cover {
    width: 58px !important;
    height: 58px !important;
  }

  .audio-tea-title {
    font-size: clamp(14px, 4vw, 18px) !important;
  }
}


/* ======================================================
   AUDIO PLAYER BRONZE BACKGROUND + CENTERED PLAY BUTTON v43041
   Forces the Spotify-style audio page to use the IXXAMEN
   bronze/gold gradient on every device and keeps the
   play/pause symbol visually centered inside the white circle.
====================================================== */

.audio-player-stage {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 229, 150, 0.26), transparent 38%),
    linear-gradient(135deg, #835633 0%, #a97908 34%, #d8b84f 62%, #6b4326 100%) !important;
}

@media (max-width: 900px) {
  .audio-player-stage {
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 229, 150, 0.24), transparent 40%),
      linear-gradient(135deg, #835633 0%, #a97908 38%, #d8b84f 66%, #6b4326 100%) !important;
  }
}

.audio-control-row .audio-play-button {
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: 0 !important;
  overflow: hidden !important;
}

.audio-control-row .audio-play-button::before {
  content: "▶";
  display: block;
  font-size: 30px;
  line-height: 1;
  transform: translateX(2px);
}

.audio-control-row .audio-play-button.is-playing::before {
  content: "❚❚";
  font-size: 24px;
  letter-spacing: -2px;
  transform: translateX(0);
}

@media (max-width: 520px) {
  .audio-control-row .audio-play-button::before {
    font-size: 27px;
    transform: translateX(2px);
  }

  .audio-control-row .audio-play-button.is-playing::before {
    font-size: 22px;
    transform: translateX(0);
  }
}


/* ======================================================
   AUDIO HOME ROW LAPTOP TITLE + SHORTER LINE FIX v43041
   Slightly increases the audio title only on laptop/desktop
   and makes the divider line a little shorter.
====================================================== */

.audio-tea-section {
  width: min(720px, 90vw) !important;
  max-width: min(720px, 90vw) !important;
}

.audio-list-shell {
  width: 100% !important;
  max-width: 720px !important;
}

.audio-tea-row {
  width: 100% !important;
  max-width: 720px !important;
}

@media (min-width: 1025px) {
  .audio-tea-section {
    width: min(720px, 40vw) !important;
    max-width: min(720px, 40vw) !important;
  }

  .audio-tea-title {
    font-size: clamp(20px, 1.35vw, 24px) !important;
    line-height: 1.16 !important;
  }
}

@media (max-width: 900px) {
  .audio-tea-section {
    width: calc(100vw - 46px) !important;
    max-width: calc(100vw - 46px) !important;
  }
}


/* ======================================================
   AUDIO PLAY BUTTON CENTER FIX v43041
   Uses CSS shapes instead of font glyphs so the play/pause
   symbol stays visually centered inside the white circle on
   laptop, tablet, and phone.
====================================================== */

.audio-control-row .audio-play-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.audio-control-row .audio-play-button::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 15px solid transparent !important;
  border-bottom: 15px solid transparent !important;
  border-left: 24px solid #000 !important;
  transform: translate(-40%, -50%) !important;
  margin: 0 !important;
}

.audio-control-row .audio-play-button.is-playing::before {
  content: "" !important;
  width: 22px !important;
  height: 28px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 7px solid #000 !important;
  border-right: 7px solid #000 !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
}

@media (max-width: 520px) {
  .audio-control-row .audio-play-button::before {
    border-top-width: 13px !important;
    border-bottom-width: 13px !important;
    border-left-width: 21px !important;
    transform: translate(-40%, -50%) !important;
  }

  .audio-control-row .audio-play-button.is-playing::before {
    width: 20px !important;
    height: 25px !important;
    border-left-width: 6px !important;
    border-right-width: 6px !important;
    transform: translate(-50%, -50%) !important;
  }
}


/* ======================================================
   GOOGLE SIGN-IN REAL CLICK FIX v43041
   Uses the real Google Identity Services iframe for login,
   with the IXXAMEN bronze/gold button as the visible layer.
   This avoids OAuth redirect_uri_mismatch on every page.
====================================================== */
.top-google-signin.google-gradient-signin {
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.top-google-signin.google-gradient-signin iframe {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  opacity: 0.001 !important;
  z-index: 10 !important;
  border-radius: 999px !important;
  pointer-events: auto !important;
}

.top-google-signin.google-gradient-signin .custom-google-signin {
  z-index: 9 !important;
  pointer-events: none !important;
}



/* ======================================================
   GOOGLE SIGN-IN TRUE CLICK FIX v43041
   The visible bronze/gold design stays the same, but the real
   Google Identity Services button is placed over it invisibly.
   This makes the button clickable on phones/tablets/laptops where
   One Tap prompts may not open from a custom div.
====================================================== */
.top-google-signin.google-gradient-signin {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.top-google-signin.google-gradient-signin > div:not(.custom-google-signin) {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0.01 !important;
  pointer-events: auto !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.top-google-signin.google-gradient-signin iframe {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 21 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border-radius: 999px !important;
}

.top-google-signin.google-gradient-signin .custom-google-signin {
  z-index: 10 !important;
  pointer-events: none !important;
}

.top-google-signin.google-gradient-signin[hidden] {
  display: none !important;
}

/* ======================================================
   GOOGLE SIGN-IN IPHONE / ALL-DEVICE RELIABILITY FIX v43041
   Use the official Google Identity Services button as the real
   visible click target. Hidden/transparent Google iframes can fail
   on some iPhones, so this disables the decorative overlay for login.
====================================================== */
.top-google-signin.google-official-signin {
  width: 204px !important;
  min-width: 204px !important;
  max-width: 204px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  z-index: 10020 !important;
}

.top-google-signin.google-official-signin .custom-google-signin {
  display: none !important;
}

.top-google-signin.google-official-signin > div:not(.custom-google-signin) {
  position: static !important;
  inset: auto !important;
  width: 204px !important;
  height: 40px !important;
  min-width: 204px !important;
  min-height: 40px !important;
  max-width: 204px !important;
  max-height: 40px !important;
  opacity: 1 !important;
  z-index: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
  border-radius: 999px !important;
}

.top-google-signin.google-official-signin iframe {
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: 204px !important;
  height: 40px !important;
  min-width: 204px !important;
  min-height: 40px !important;
  max-width: 204px !important;
  max-height: 40px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  border-radius: 999px !important;
  transform: none !important;
}

@media (max-width: 520px) {
  .top-auth-actions {
    gap: 18px !important;
  }

  .top-google-signin.google-official-signin,
  .top-google-signin.google-official-signin > div:not(.custom-google-signin),
  .top-google-signin.google-official-signin iframe {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }
}

@media (max-width: 390px) {
  .top-auth-actions {
    gap: 14px !important;
  }

  .top-google-signin.google-official-signin,
  .top-google-signin.google-official-signin > div:not(.custom-google-signin),
  .top-google-signin.google-official-signin iframe {
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
  }
}

/* ======================================================
   GOOGLE SIGN-IN CUSTOM REDIRECT BUTTON v43041
   Restores the bronze/gold IXXAMEN design, but uses a real
   full-page Google redirect on click instead of hidden iframes.
====================================================== */
.top-google-signin.google-gradient-signin {
  width: 214px !important;
  min-width: 214px !important;
  max-width: 214px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  z-index: 10020 !important;
}

.top-google-signin.google-gradient-signin iframe,
.top-google-signin.google-gradient-signin > div:not(.custom-google-signin) {
  display: none !important;
  pointer-events: none !important;
}

.top-google-signin.google-gradient-signin .custom-google-signin {
  all: unset;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  background: linear-gradient(
    135deg,
    #8a5a18 0%,
    #b8860b 20%,
    #d4af37 40%,
    #f0cf69 55%,
    #9d6721 75%,
    #b8860b 100%
  ) !important;
  background-size: 300% 300% !important;
  animation: diagonalGoldShift 6s ease-in-out infinite !important;
  border: 1px solid rgba(255, 235, 166, 0.95) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

.top-google-signin.google-gradient-signin .custom-google-signin:focus-visible {
  outline: 2px solid rgba(255, 235, 166, 0.95) !important;
  outline-offset: 4px !important;
}

.top-google-signin.google-gradient-signin .custom-google-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  flex: 0 0 22px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.top-google-signin.google-gradient-signin .custom-google-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

.top-google-signin.google-gradient-signin .custom-google-text {
  display: block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .top-auth-actions {
    gap: 18px !important;
  }

  .top-google-signin.google-gradient-signin {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  .top-google-signin.google-gradient-signin .custom-google-signin {
    padding: 0 14px !important;
    gap: 8px !important;
    font-size: 12.5px !important;
  }

  .top-google-signin.google-gradient-signin .custom-google-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex-basis: 20px !important;
  }

  .top-google-signin.google-gradient-signin .custom-google-icon svg {
    width: 14.5px !important;
    height: 14.5px !important;
  }
}

@media (max-width: 390px) {
  .top-auth-actions {
    gap: 14px !important;
  }

  .top-google-signin.google-gradient-signin {
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }

  .top-google-signin.google-gradient-signin .custom-google-signin {
    padding: 0 12px !important;
    gap: 6px !important;
    font-size: 11.4px !important;
  }

  .top-google-signin.google-gradient-signin .custom-google-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex-basis: 18px !important;
  }

  .top-google-signin.google-gradient-signin .custom-google-icon svg {
    width: 13px !important;
    height: 13px !important;
  }
}


/* ======================================================
   VIDEO HOME SHOWCASE + VIDEOS PAGE v43041
====================================================== */
.video-showcase-section {
  width: 100%;
}

.video-hero-showcase {
  width: 100%;
  height: 430px;
  position: relative;
  overflow: hidden;
  background: #000;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.video-showcase-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.video-showcase-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #000;
}

.video-showcase-empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: #111;
  color: var(--gold);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.video-showcase-tabs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 28px;
}

.video-showcase-tab {
  background: transparent;
  border: none;
  border-top: 4px solid var(--soft-line);
  color: var(--cream);
  text-align: left;
  padding-top: 14px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  min-width: 0;
}

.video-showcase-tab.active {
  border-top-color: var(--gold);
}

.videos-body {
  min-height: 100vh;
  background: #000;
}

.videos-page {
  min-height: 100vh;
  width: 100%;
  padding-top: 0;
  position: relative;
  background: #000;
}

.video-reels-feed {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  background: #000;
}

.video-reels-feed::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.video-reel {
  min-height: 100vh;
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 18px 42px;
}

.video-reel-shell {
  position: relative;
  width: min(480px, 92vw);
  height: min(820px, calc(100vh - 140px));
  min-height: 560px;
  border-radius: 28px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.video-reel-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.video-center-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 44px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 6px;
  z-index: 6;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.video-center-play.is-playing {
  opacity: 0;
  pointer-events: none;
}

.video-mute-button,
.video-more-button {
  position: absolute;
  top: 22px;
  z-index: 8;
  border: none;
  background: rgba(0, 0, 0, 0.16);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-mute-button {
  left: 22px;
}

.video-more-button {
  right: 22px;
  font-size: 26px;
  letter-spacing: 3px;
}

.video-reel-title {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 58px;
  z-index: 6;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px;
  font-weight: 800;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.85);
}

.video-progress-range {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  width: 100%;
  height: 5px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.38);
  cursor: pointer;
}

.video-progress-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
}

.video-progress-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #fff;
}

.video-picker-panel {
  position: fixed;
  top: 96px;
  right: 26px;
  width: 286px;
  max-height: calc(100vh - 132px);
  z-index: 70;
  background: rgba(15, 15, 15, 0.84);
  border: 1px solid rgba(184, 134, 11, 0.55);
  border-radius: 20px;
  padding: 16px;
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.video-picker-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.video-picker-hide,
.video-picker-show {
  border: 1px solid rgba(184, 134, 11, 0.75);
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}

.video-picker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 210px);
  overflow-y: auto;
  padding-right: 2px;
}

.video-picker-item {
  width: 100%;
  border: 1px solid rgba(184, 134, 11, 0.55);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  border-radius: 16px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.video-picker-item.active,
.video-picker-item:hover {
  border-color: var(--gold);
  background: rgba(184, 134, 11, 0.18);
}

.video-picker-thumb {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  overflow: hidden;
  background: #222;
  flex: 0 0 58px;
}

.video-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-picker-show {
  position: fixed;
  right: 28px;
  top: 104px;
  z-index: 69;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.video-picker-hidden .video-picker-panel {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(18px);
}

.video-picker-hidden .video-picker-show {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.video-loading-state {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 22px;
  text-transform: uppercase;
}

.videos-footer {
  display: none;
}

@media (max-width: 980px) {
  .video-hero-showcase {
    height: 360px;
  }

  .video-showcase-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-picker-panel {
    top: auto;
    right: 16px;
    bottom: 18px;
    width: min(340px, calc(100vw - 32px));
    max-height: 38vh;
  }

  .video-picker-show {
    top: auto;
    right: 18px;
    bottom: 20px;
  }
}

@media (max-width: 560px) {
  .video-hero-showcase {
    height: 265px;
  }

  .video-showcase-tabs {
    gap: 18px;
    margin-top: 22px;
  }

  .video-reel {
    padding: 86px 0 0;
    align-items: stretch;
  }

  .video-reel-shell {
    width: 100vw;
    height: calc(100vh - 86px);
    min-height: 0;
    border-radius: 0;
  }

  .video-reel-title {
    bottom: 42px;
    font-size: 22px;
  }
}

/* ======================================================
   VIDEO REFINEMENT v43045
   - muted autoplay video showcase on homepage
   - landscape 16:9 video page
   - left video picker
====================================================== */
.video-showcase-media {
  object-fit: cover;
}

.video-showcase-tab .tab-category {
  font-size: 14px;
  line-height: 1.25;
  margin-bottom: 10px;
  white-space: normal !important;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
}

.video-showcase-tab .tab-title {
  font-size: 14px;
  line-height: 1.25;
  white-space: normal !important;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
}

.videos-page {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.video-reels-feed {
  width: 100%;
}

.video-reel {
  min-height: 100vh;
  height: 100vh;
  padding: 96px 24px 54px 370px;
  align-items: center;
  justify-content: center;
}

.video-reel-shell {
  width: min(1050px, calc(100vw - 430px));
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: 26px;
}

.video-reel-media {
  object-fit: contain;
  background: #000;
}

.video-reel-title {
  display: none !important;
}

.video-picker-panel {
  left: 26px;
  right: auto;
  top: 96px;
  width: 286px;
}

.video-picker-show {
  left: 28px;
  right: auto;
  top: 104px;
}

.video-picker-hidden .video-picker-panel {
  transform: translateX(-18px);
}

.video-progress-range {
  height: 6px;
}

@media (max-width: 980px) {
  .video-reel {
    padding: 92px 18px 170px;
    justify-content: center;
  }

  .video-reel-shell {
    width: min(94vw, 900px);
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
    border-radius: 22px;
  }

  .video-picker-panel {
    left: 16px;
    right: auto;
    bottom: 18px;
    top: auto;
    width: min(340px, calc(100vw - 32px));
    max-height: 38vh;
  }

  .video-picker-show {
    left: 18px;
    right: auto;
    bottom: 20px;
    top: auto;
  }
}

@media (max-width: 560px) {
  .video-showcase-tab .tab-category,
  .video-showcase-tab .tab-title {
    font-size: 12px;
  }

  .video-reel {
    padding: 82px 10px 150px;
    align-items: center;
  }

  .video-reel-shell {
    width: 100%;
    max-width: 100vw;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
  }

  .video-center-play {
    width: 68px;
    height: 68px;
    font-size: 34px;
  }

  .video-mute-button,
  .video-more-button {
    top: 12px;
    width: 38px;
    height: 38px;
    font-size: 19px;
  }

  .video-mute-button {
    left: 12px;
  }

  .video-more-button {
    right: 12px;
  }
}


/* ======================================================
   VIDEO PAGE AUDIO-STYLE DESIGN + NO THREE DOTS v43045
   Matches the IXXAMEN audio page layout while keeping the
   video itself landscape 16:9 and fully visible.
====================================================== */

.videos-body {
  min-height: 100vh !important;
  background: #000 !important;
}

.videos-page {
  width: min(1180px, 92vw) !important;
  min-height: calc(100vh - 150px) !important;
  margin: 112px auto 40px !important;
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) !important;
  gap: 34px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  position: relative !important;
  padding: 0 !important;
  background: transparent !important;
}

.video-picker-panel {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-height: calc(100vh - 180px) !important;
  background: #151515 !important;
  border: 1px solid rgba(184, 134, 11, 0.42) !important;
  border-radius: 24px !important;
  padding: 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  backdrop-filter: none !important;
  transform: none !important;
  transition: none !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--gold) rgba(255, 255, 255, 0.12) !important;
}

.video-picker-panel::-webkit-scrollbar {
  width: 7px !important;
}

.video-picker-panel::-webkit-scrollbar-thumb {
  background: var(--gold) !important;
  border-radius: 999px !important;
}

.video-picker-topline {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
}

.video-picker-hide,
.video-picker-show {
  border: 1px solid rgba(184, 134, 11, 0.72) !important;
  background: transparent !important;
  color: var(--cream) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  font-family: Arial, sans-serif !important;
  font-weight: 700 !important;
}

.video-picker-list {
  display: grid !important;
  gap: 12px !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.video-picker-item {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--cream) !important;
  border-radius: 16px !important;
  padding: 10px !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.video-picker-item span:last-child {
  display: block !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.video-picker-item.active,
.video-picker-item:hover {
  border-color: var(--gold) !important;
  background: rgba(184, 134, 11, 0.14) !important;
}

.video-picker-thumb {
  width: 72px !important;
  height: 44px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: #222 !important;
  flex: 0 0 auto !important;
}

.video-picker-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.video-reels-feed {
  position: relative !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 229, 150, 0.26), transparent 38%),
    linear-gradient(135deg, #835633 0%, #a97908 34%, #d8b84f 62%, #6b4326 100%) !important;
  border-radius: 28px !important;
  padding: 36px !important;
  height: calc(100vh - 150px) !important;
  min-height: 640px !important;
  max-height: 860px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-snap-type: y mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
}

.video-reel {
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  scroll-snap-align: start !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.video-reel-shell {
  position: relative !important;
  width: min(900px, 100%) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: #000 !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45) !important;
  cursor: pointer !important;
}

.video-reel-media {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
  border-radius: 0 !important;
}

.video-more-button {
  display: none !important;
}

.video-mute-button {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  z-index: 8 !important;
  border: none !important;
  background: rgba(0, 0, 0, 0.22) !important;
  color: #fff !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.video-center-play {
  width: 82px !important;
  height: 82px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.42) !important;
  color: #fff !important;
  font-size: 42px !important;
}

.video-progress-range {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 5px !important;
  margin: 0 !important;
  z-index: 7 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: rgba(255, 255, 255, 0.38) !important;
  cursor: pointer !important;
}

.video-picker-show {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  right: auto !important;
  bottom: auto !important;
  display: none !important;
  background: rgba(0, 0, 0, 0.28) !important;
  z-index: 10 !important;
}

.videos-page.video-picker-hidden {
  grid-template-columns: 1fr !important;
}

.videos-page.video-picker-hidden .video-picker-panel {
  display: none !important;
}

.videos-page.video-picker-hidden .video-picker-show {
  display: inline-flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.video-reel-title {
  display: none !important;
}

.videos-footer {
  display: none !important;
}

@media (max-width: 900px) {
  .videos-page {
    grid-template-columns: 1fr !important;
    margin-top: 102px !important;
    gap: 24px !important;
    min-height: auto !important;
  }

  .video-picker-panel {
    max-height: 260px !important;
  }

  .video-reels-feed {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 28px 18px 30px !important;
    border-radius: 28px !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
  }

  .video-reel {
    height: auto !important;
    min-height: auto !important;
    margin-bottom: 24px !important;
  }

  .video-reel:last-child {
    margin-bottom: 0 !important;
  }

  .video-reel-shell {
    width: 100% !important;
    max-width: 900px !important;
    aspect-ratio: 16 / 9 !important;
  }

  .video-picker-show {
    top: 20px !important;
    left: 20px !important;
    bottom: auto !important;
  }
}

@media (max-width: 520px) {
  .videos-page {
    width: calc(100vw - 32px) !important;
    margin-top: 96px !important;
    gap: 20px !important;
  }

  .video-picker-panel {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .video-picker-item {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    font-size: 14px !important;
  }

  .video-picker-thumb {
    width: 64px !important;
    height: 40px !important;
  }

  .video-reels-feed {
    padding: 18px 12px 22px !important;
    border-radius: 24px !important;
  }

  .video-center-play {
    width: 64px !important;
    height: 64px !important;
    font-size: 34px !important;
  }

  .video-mute-button {
    top: 10px !important;
    left: 10px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 19px !important;
  }
}


/* ======================================================
   VIDEO PAGE PROGRESS MATCHES AUDIO PLAYER v43045
   Moves the video progress controls out of the video image
   and styles the line/times/buttons like the audio page.
====================================================== */

.video-reel-card {
  width: min(920px, 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.video-reel-shell {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  background: #000 !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45) !important;
}

.video-reel-media {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0 !important;
  background: #000 !important;
}

.video-progress-row {
  width: min(720px, 92%) !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 52px !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 28px !important;
  color: var(--cream) !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
}

.video-current-time,
.video-duration-time {
  color: var(--cream) !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.video-current-time {
  text-align: left !important;
}

.video-duration-time {
  text-align: right !important;
}

.video-progress-range {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  accent-color: var(--gold) !important;
  background: transparent !important;
  cursor: pointer !important;
}

.video-progress-range::-webkit-slider-thumb,
.video-progress-range::-moz-range-thumb {
  background: var(--gold) !important;
}

.video-control-row {
  margin-top: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 26px !important;
}

.video-control-row button {
  border: none !important;
  background: transparent !important;
  color: var(--cream) !important;
  cursor: pointer !important;
  font-family: Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.video-control-row .video-mute-button {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cream) !important;
  font-size: 22px !important;
  z-index: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.video-control-row .video-center-play {
  position: static !important;
  transform: none !important;
  width: 66px !important;
  height: 66px !important;
  min-width: 66px !important;
  min-height: 66px !important;
  border-radius: 50% !important;
  background: var(--white) !important;
  color: var(--black) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  padding: 0 !important;
  z-index: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.video-control-row .video-center-play.is-playing {
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 900px) {
  .video-reel-card {
    width: 100% !important;
  }

  .video-progress-row {
    width: 100% !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    margin-top: 22px !important;
  }

  .video-control-row {
    gap: 18px !important;
  }

  .video-control-row .video-center-play {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
  }
}

@media (max-width: 520px) {
  .video-progress-row,
  .video-current-time,
  .video-duration-time {
    font-size: 12px !important;
  }
}


/* ======================================================
   VIDEO PAGE OVERLAY PLAY/MUTE RESTORE v43045
   Keeps the audio-style progress line from v43045, but
   restores the video play/mute controls to the cleaner
   TikTok-style overlay used before.
====================================================== */

.video-reel-shell .video-mute-button {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 8 !important;
  border: none !important;
  background: rgba(0, 0, 0, 0.22) !important;
  color: #fff !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.video-reel-shell .video-center-play {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  min-height: 82px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(0, 0, 0, 0.42) !important;
  color: #fff !important;
  font-size: 42px !important;
  line-height: 1 !important;
  padding: 0 0 0 6px !important;
  z-index: 9 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.video-reel-shell .video-center-play.is-playing {
  opacity: 0 !important;
  pointer-events: none !important;
}

.video-control-row {
  display: none !important;
}

@media (max-width: 520px) {
  .video-reel-shell .video-center-play {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    font-size: 34px !important;
  }

  .video-reel-shell .video-mute-button {
    top: 10px !important;
    left: 10px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 19px !important;
  }
}


/* ======================================================
   VIDEO MUTE VISIBILITY REFINEMENT v43047
   The mute button is visible only while the video is paused.
   Neutral SVG icon keeps the same professional look on all devices.
====================================================== */

.video-reel-shell .video-mute-button {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.38) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.video-reel-shell .video-mute-button.is-visible {
  display: flex !important;
}

.video-reel-shell .video-mute-button .video-sound-svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  color: #fff !important;
}

@media (max-width: 520px) {
  .video-reel-shell .video-mute-button .video-sound-svg {
    width: 21px !important;
    height: 21px !important;
  }
}


/* ======================================================
   VIDEO SHOWCASE TITLE FULL TEXT FIX v43047
   Show full homepage video labels without ellipsis.
====================================================== */
.video-showcase-tab .tab-category,
.video-showcase-tab .tab-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal;
}

.video-showcase-tab {
  min-height: 74px;
}

@media (max-width: 560px) {
  .video-showcase-tab {
    min-height: 68px;
  }
}


/* ======================================================
   VIDEO SHOWCASE CATEGORY SINGLE-LINE FIX v43049
   Keep the category label on one row on the homepage.
====================================================== */
.video-showcase-tab .tab-category {
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em;
}

@media (max-width: 560px) {
  .video-showcase-tab .tab-category {
    font-size: 10.5px !important;
  }
}


/* ======================================================
   VIDEO SHOWCASE LINE WIDTH FIX v43052
   Make the gold line above the homepage video text match
   the natural width of the longest text line.
====================================================== */
.video-showcase-tab {
  width: max-content !important;
  max-width: 100% !important;
  justify-self: start !important;
}

.video-showcase-tab .tab-category,
.video-showcase-tab .tab-title {
  display: block !important;
}

@media (max-width: 560px) {
  .video-showcase-tab {
    width: max-content !important;
    max-width: 100% !important;
  }
}


/* ======================================================
   HOMEPAGE VIDEO EXACT TEXT-LINE WIDTH + CLICK FIX v43052
   - The homepage video tabs open the selected video page.
   - The gold/grey line matches the real text width.
   - No progress line is shown on the homepage video screen.
====================================================== */
.video-showcase-link {
  position: relative !important;
}


.video-showcase-tab {
  border-top: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  justify-self: start !important;
  padding-top: 0 !important;
  min-height: auto !important;
}

.video-tab-text-wrap {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: max-content !important;
  max-width: 100% !important;
  position: relative !important;
  padding-top: 14px !important;
}

.video-tab-text-wrap::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: var(--soft-line) !important;
}

.video-showcase-tab.active .video-tab-text-wrap::before {
  background: var(--gold) !important;
}

.video-showcase-tab .tab-category,
.video-showcase-tab .tab-title {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 560px) {
  .video-tab-text-wrap {
    padding-top: 12px !important;
  }

  .video-tab-text-wrap::before {
    height: 3px !important;
  }
}


/* ======================================================
   HOMEPAGE VIDEO TEXT-LINE EXACT WIDTH FIX v43053
   Uses a measured CSS variable so desktop and phone match.
====================================================== */
.video-tab-text-wrap {
  width: fit-content !important;
  max-width: 100% !important;
}

.video-tab-text-wrap::before {
  width: var(--video-tab-line-width, 100%) !important;
  max-width: 100% !important;
}


/* ======================================================
   HOMEPAGE VIDEO LINE TRUE LONGEST-TEXT WIDTH v43055
   Fixes desktop/laptop: the line uses the natural width of
   the longest text line, not a measured JS value.
====================================================== */
.video-showcase-tab {
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
}

.video-tab-text-wrap {
  display: inline-block !important;
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
}

.video-tab-text-wrap::before {
  width: 100% !important;
  max-width: none !important;
}

.video-showcase-tab .tab-category,
.video-showcase-tab .tab-title {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 560px) {
  .video-showcase-tab,
  .video-tab-text-wrap {
    max-width: calc(100vw - 44px) !important;
  }
}


/* ======================================================
   MATCH AUDIO + VIDEO PICKER TITLES v43055
   Same clean title style on both the Audio and Videos pages.
====================================================== */
.audio-picker-topline,
.video-picker-topline {
  align-items: center !important;
}

.audio-picker-topline > span,
.video-picker-topline > span {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(23px, 1.55vw, 28px) !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  text-shadow: 0 1px 10px rgba(184, 134, 11, 0.12) !important;
}

@media (max-width: 700px) {
  .audio-picker-topline > span,
  .video-picker-topline > span {
    font-size: 22px !important;
    letter-spacing: 0.065em !important;
  }
}


/* ======================================================
   AUDIO PICKER ITEM MATCH VIDEO PICKER STYLE v43058
   Makes the audio track text/card match the Videos picker.
====================================================== */
.audio-picker-item {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--cream) !important;
  border-radius: 16px !important;
  padding: 10px !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.audio-picker-item > span:last-child {
  display: block !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.audio-picker-item.active,
.audio-picker-item:hover {
  border-color: var(--gold) !important;
  background: rgba(184, 134, 11, 0.14) !important;
}

.audio-picker-thumb {
  width: 72px !important;
  height: 44px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: #222 !important;
  flex: 0 0 auto !important;
  color: var(--cream) !important;
}

.audio-picker-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

@media (max-width: 560px) {
  .audio-picker-item {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    font-size: 14px !important;
  }

  .audio-picker-thumb {
    width: 64px !important;
    height: 40px !important;
  }
}


/* ======================================================
   AUDIO COVER IMAGE RESTORE v43058
   Keep audio text/card style, but restore the older square
   audio cover image instead of the wide video thumbnail style.
====================================================== */
.audio-picker-item {
  grid-template-columns: 56px minmax(0, 1fr) !important;
}

.audio-picker-thumb {
  width: 56px !important;
  height: 56px !important;
  border-radius: 0 !important;
  background: #e8e8e8 !important;
  color: #111111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  font-size: 10px !important;
}

.audio-picker-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

@media (max-width: 560px) {
  .audio-picker-item {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }

  .audio-picker-thumb {
    width: 56px !important;
    height: 56px !important;
  }
}


/* ======================================================
   MOBILE VIDEO PICKER FLOW FIX v43058
   On phone/tablet, the Videos picker and Videos button stay
   above the video card instead of overlaying the video.
====================================================== */
@media (max-width: 900px) {
  .videos-page {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "picker"
      "feed" !important;
    align-items: start !important;
    justify-content: stretch !important;
    gap: 20px !important;
  }

  .video-picker-panel {
    grid-area: picker !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-height: 260px !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }

  .video-reels-feed {
    grid-area: feed !important;
    position: relative !important;
    z-index: 0 !important;
  }

  .video-picker-show {
    grid-area: picker !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1 !important;
  }

  .videos-page.video-picker-hidden {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "picker"
      "feed" !important;
    gap: 18px !important;
  }

  .videos-page.video-picker-hidden .video-picker-panel {
    display: none !important;
  }

  .videos-page.video-picker-hidden .video-picker-show {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    align-self: start !important;
    justify-self: start !important;
  }
}


/* ======================================================
   HOMEPAGE PODCAST CIRCLE v43060
   Replaces the old homepage audio list with a clickable
   podcast circle and animated bronze/gold waveform.
====================================================== */
.podcast-circle-section {
  width: min(640px, 86vw);
  margin: 54px auto 46px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.podcast-circle-link {
  position: relative;
  display: block;
  width: min(540px, 86vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  transition: transform 220ms ease, filter 220ms ease;
}

.podcast-circle-link:hover,
.podcast-circle-link:focus-visible {
  transform: translateY(-2px) scale(1.01);
  filter: drop-shadow(0 18px 34px rgba(190, 142, 43, 0.18));
  outline: none;
}

.podcast-circle-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 50%;
}

.podcast-waveform {
  position: absolute;
  left: 50%;
  top: 69.2%;
  width: 36%;
  height: 10.5%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.35vw, 5px);
  pointer-events: none;
  opacity: 0.96;
}

.podcast-waveform::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(150, 95, 18, 0.45), rgba(217, 161, 34, 0.65), rgba(150, 95, 18, 0.45), transparent);
  opacity: 0.62;
}

.podcast-waveform span {
  width: clamp(2px, 0.32vw, 4px);
  height: 22%;
  border-radius: 999px;
  background: linear-gradient(180deg, #e8c55d 0%, #c58c12 45%, #7d4d12 100%);
  box-shadow: 0 0 8px rgba(207, 150, 25, 0.22);
  animation: podcastWave 1.45s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.055s);
  transform-origin: center;
}

.podcast-waveform span:nth-child(3n) { animation-duration: 1.25s; }
.podcast-waveform span:nth-child(4n) { animation-duration: 1.68s; }
.podcast-waveform span:nth-child(5n) { animation-duration: 1.12s; }

@keyframes podcastWave {
  0%, 100% { height: 18%; opacity: 0.54; }
  28% { height: 76%; opacity: 0.95; }
  52% { height: 42%; opacity: 0.78; }
  74% { height: 94%; opacity: 1; }
}

@media (max-width: 760px) {
  .podcast-circle-section {
    width: 92vw;
    margin: 42px auto 38px;
  }

  .podcast-circle-link {
    width: min(560px, 92vw);
  }

  .podcast-waveform {
    width: 38%;
    top: 69.5%;
    height: 11%;
    gap: 2px;
  }

  .podcast-waveform span {
    width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .podcast-waveform span {
    animation: none;
    height: 48%;
  }
}

/* ======================================================
   HOMEPAGE LAYOUT REBALANCE + SECOND PAGE SPLIT v43061
   - centers the homepage video showcase on page 1
   - moves the podcast circle to page 2 left side
   - moves the tea book/logo to page 2 right side
   - enlarges the homepage video area on laptops
   - keeps the transparent circle image clean
====================================================== */
.home-layout.home-layout-centered {
  width: min(1560px, 94vw) !important;
  margin: 118px auto 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  align-items: start !important;
  gap: 0 !important;
}

.home-layout.home-layout-centered .video-showcase-section {
  width: min(1180px, 100%) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

.home-layout.home-layout-centered .video-hero-showcase {
  width: 100% !important;
  height: clamp(440px, 46vw, 690px) !important;
  border-radius: 30px !important;
}

.home-layout.home-layout-centered .video-showcase-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: clamp(20px, 2.4vw, 34px) !important;
  margin-top: 26px !important;
}

.home-layout.home-layout-centered .video-showcase-tab {
  justify-self: center !important;
}

.home-second-panel {
  width: min(1560px, 94vw);
  margin: 72px auto 48px;
  display: grid;
  grid-template-columns: minmax(280px, 540px) minmax(280px, 540px);
  justify-content: space-between;
  align-items: start;
  gap: clamp(36px, 7vw, 180px);
}

.second-panel-podcast {
  width: 100% !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}

.second-panel-podcast .podcast-circle-link {
  width: min(520px, 100%) !important;
}

.second-panel-podcast .podcast-circle-image {
  object-fit: contain !important;
}

.second-panel-book {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
}

.second-panel-book .book-carousel {
  width: min(420px, 100%) !important;
  margin-left: auto !important;
  padding: 0 0 34px !important;
}

.second-panel-book .book-carousel-track {
  justify-content: flex-end !important;
  width: 100% !important;
  min-width: 100% !important;
  padding: 12px 0 26px !important;
}

.second-panel-book .book-carousel-slide {
  width: 100% !important;
  justify-content: flex-end !important;
}

.second-panel-book .book-carousel .book-3d {
  margin-left: auto !important;
}

@media (min-width: 1180px) {
  .home-layout.home-layout-centered .video-showcase-section {
    width: min(1280px, 100%) !important;
  }

  .home-layout.home-layout-centered .video-showcase-tabs {
    margin-top: 30px !important;
  }

  .second-panel-book .book-carousel {
    width: min(460px, 100%) !important;
  }
}

@media (max-width: 900px) {
  .home-layout.home-layout-centered {
    width: min(96vw, 1560px) !important;
    margin-top: 104px !important;
  }

  .home-layout.home-layout-centered .video-showcase-section {
    width: 100% !important;
  }

  .home-layout.home-layout-centered .video-hero-showcase {
    height: clamp(240px, 56vw, 430px) !important;
    border-radius: 22px !important;
  }

  .home-layout.home-layout-centered .video-showcase-tabs {
    justify-content: flex-start !important;
  }

  .home-second-panel {
    width: 92vw;
    grid-template-columns: 1fr;
    justify-content: center;
    gap: 42px;
    margin: 52px auto 36px;
  }

  .second-panel-podcast,
  .second-panel-book {
    justify-content: center !important;
  }

  .second-panel-book .book-carousel,
  .second-panel-podcast .podcast-circle-link {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ======================================================
   HOMEPAGE HERO ENLARGEMENT + PROPORTIONAL TABS v43062
   Make the first page feel like a strong entry section on
   desktop/laptop, while scaling the video labels with it.
====================================================== */
.home-layout.home-layout-centered {
  width: min(1720px, 97vw) !important;
  margin: 104px auto 0 !important;
}

.home-layout.home-layout-centered .video-showcase-section {
  width: min(1420px, 100%) !important;
}

.home-layout.home-layout-centered .video-hero-showcase {
  height: clamp(520px, 53vw, 800px) !important;
  border-radius: 32px !important;
}

.home-layout.home-layout-centered .video-showcase-tabs {
  width: 100% !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: clamp(28px, 3vw, 46px) !important;
  margin-top: 34px !important;
  padding-inline: 4px !important;
}

.home-layout.home-layout-centered .video-showcase-tab {
  min-width: 0 !important;
}

.home-layout.home-layout-centered .video-tab-text-wrap {
  padding-top: 18px !important;
}

.home-layout.home-layout-centered .video-tab-text-wrap::before {
  height: 5px !important;
}

.home-layout.home-layout-centered .video-showcase-tab .tab-category {
  font-size: clamp(18px, 1.25vw, 21px) !important;
  line-height: 1.18 !important;
  margin-bottom: 14px !important;
}

.home-layout.home-layout-centered .video-showcase-tab .tab-title {
  font-size: clamp(22px, 1.95vw, 32px) !important;
  line-height: 1.15 !important;
}

@media (min-width: 1200px) {
  .home-layout.home-layout-centered .video-showcase-section {
    width: min(1480px, 100%) !important;
  }

  .home-layout.home-layout-centered .video-hero-showcase {
    height: clamp(560px, 52vw, 840px) !important;
  }
}

@media (max-width: 900px) {
  .home-layout.home-layout-centered {
    width: min(96vw, 1720px) !important;
    margin-top: 104px !important;
  }

  .home-layout.home-layout-centered .video-showcase-tabs {
    margin-top: 24px !important;
    gap: 18px !important;
    padding-inline: 0 !important;
  }

  .home-layout.home-layout-centered .video-showcase-tab .tab-category {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }

  .home-layout.home-layout-centered .video-showcase-tab .tab-title {
    font-size: 14px !important;
  }

  .home-layout.home-layout-centered .video-tab-text-wrap {
    padding-top: 14px !important;
  }

  .home-layout.home-layout-centered .video-tab-text-wrap::before {
    height: 4px !important;
  }
}


/* ======================================================
   HOMEPAGE HERO TIGHTER VIDEO-TO-TITLE SPACING v43063
====================================================== */
.home-layout.home-layout-centered .video-showcase-tabs {
  margin-top: 18px !important;
}

.home-layout.home-layout-centered .video-tab-text-wrap {
  padding-top: 12px !important;
}

@media (max-width: 900px) {
  .home-layout.home-layout-centered .video-showcase-tabs {
    margin-top: 14px !important;
  }

  .home-layout.home-layout-centered .video-tab-text-wrap {
    padding-top: 10px !important;
  }
}


/* ======================================================
   HOMEPAGE LAPTOP REBALANCE + SECOND PANEL ALIGNMENT v43064
   - smaller, more balanced hero on laptop/desktop
   - show the whole video without corner cropping
   - keep video tabs visible on first screen
   - bring logo.tea inward on the second panel
====================================================== */
@media (min-width: 1024px) {
  .home-layout.home-layout-centered {
    width: min(1360px, 92vw) !important;
    margin: 92px auto 0 !important;
  }

  .home-layout.home-layout-centered .video-showcase-section {
    width: min(1180px, 100%) !important;
  }

  .home-layout.home-layout-centered .video-hero-showcase {
    height: clamp(360px, 34vw, 470px) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  .home-layout.home-layout-centered .video-showcase-media {
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
  }

  .home-layout.home-layout-centered .video-showcase-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 18px 24px !important;
    margin-top: 14px !important;
    padding-inline: 0 !important;
  }

  .home-layout.home-layout-centered .video-showcase-tab {
    flex: 0 1 340px !important;
    max-width: 360px !important;
    width: min(100%, 340px) !important;
  }

  .home-layout.home-layout-centered .video-tab-text-wrap {
    padding-top: 10px !important;
  }

  .home-layout.home-layout-centered .video-tab-text-wrap::before {
    height: 4px !important;
  }

  .home-layout.home-layout-centered .video-showcase-tab .tab-category {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  .home-layout.home-layout-centered .video-showcase-tab .tab-title {
    font-size: 16px !important;
    line-height: 1.22 !important;
  }

  .home-second-panel {
    width: min(1260px, 90vw) !important;
    margin: 56px auto 42px !important;
    grid-template-columns: minmax(300px, 520px) minmax(250px, 390px) !important;
    justify-content: center !important;
    align-items: start !important;
    gap: clamp(28px, 4vw, 72px) !important;
  }

  .second-panel-podcast {
    justify-content: flex-start !important;
  }

  .second-panel-podcast .podcast-circle-link {
    width: min(500px, 100%) !important;
  }

  .second-panel-book {
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .second-panel-book .book-carousel {
    width: min(340px, 100%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 20px !important;
  }

  .second-panel-book .book-carousel-track,
  .second-panel-book .book-carousel-slide {
    justify-content: flex-start !important;
  }

  .second-panel-book .book-carousel .book-3d {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ======================================================
   HOMEPAGE HERO DESKTOP IMPROVEMENT v43065
   - bigger and visually stronger laptop hero
   - video fills the hero better
   - tab box starts directly under the left screen edge
   - corners flattened so the full frame feels visible
====================================================== */
@media (min-width: 1024px) {
  .home-layout.home-layout-centered {
    width: min(1440px, 94vw) !important;
    margin: 82px auto 0 !important;
  }

  .home-layout.home-layout-centered .video-showcase-section {
    width: min(1280px, 100%) !important;
    margin: 0 auto !important;
  }

  .home-layout.home-layout-centered .video-hero-showcase {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: min(69vh, 720px) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  .home-layout.home-layout-centered .video-showcase-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .home-layout.home-layout-centered .video-showcase-media {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #000 !important;
  }

  .home-layout.home-layout-centered .video-showcase-tabs {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 16px 22px !important;
    margin-top: 10px !important;
    padding-inline: 0 !important;
  }

  .home-layout.home-layout-centered .video-showcase-tab {
    flex: 0 1 430px !important;
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    min-width: 0 !important;
  }

  .home-layout.home-layout-centered .video-tab-text-wrap {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    padding-top: 10px !important;
  }

  .home-layout.home-layout-centered .video-tab-text-wrap::before {
    height: 4px !important;
  }

  .home-layout.home-layout-centered .video-showcase-tab .tab-category {
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  .home-layout.home-layout-centered .video-showcase-tab .tab-title {
    font-size: 17px !important;
    line-height: 1.2 !important;
  }
}


/* ======================================================
   HOMEPAGE HERO DESKTOP FULL-VIEW + LOWER POSITION v43066
   - show more of the full video on laptop
   - move hero lower so it clears the top-left mini logo
====================================================== */
@media (min-width: 1024px) {
  .home-layout.home-layout-centered {
    margin: 118px auto 0 !important;
  }

  .home-layout.home-layout-centered .video-showcase-section {
    width: min(1280px, 100%) !important;
    margin: 0 auto !important;
  }

  .home-layout.home-layout-centered .video-hero-showcase {
    aspect-ratio: 16 / 9 !important;
    max-height: min(72vh, 760px) !important;
    border-radius: 0 !important;
    background: #000 !important;
  }

  .home-layout.home-layout-centered .video-showcase-media {
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
  }

  .home-layout.home-layout-centered .video-showcase-tabs {
    margin-top: 12px !important;
    justify-content: flex-start !important;
  }

  .home-layout.home-layout-centered .video-showcase-tab {
    margin-left: 0 !important;
  }
}


/* ======================================================
   HOMEPAGE HERO TAB LEFT-EDGE ALIGNMENT v43067
   - keep the title box directly under the left edge of the screen
   - stronger desktop alignment override so laptop view matches too
====================================================== */
@media (min-width: 1024px) {
  .home-layout.home-layout-centered .video-showcase-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .home-layout.home-layout-centered .video-hero-showcase,
  .home-layout.home-layout-centered .video-showcase-link {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .home-layout.home-layout-centered .video-showcase-tabs {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .home-layout.home-layout-centered .video-showcase-tab {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: min(100%, 460px) !important;
    margin: 0 !important;
    padding-left: 0 !important;
    align-self: flex-start !important;
  }

  .home-layout.home-layout-centered .video-tab-text-wrap {
    margin-left: 0 !important;
  }
}


/* ======================================================
   HOMEPAGE HERO TITLE BOX LOCKED TO VISIBLE VIDEO LEFT EDGE v43068
   - measures the actual visible video frame on desktop/laptop
   - aligns the title box under that left edge, not under black side bars
====================================================== */
@media (min-width: 1024px) {
  .home-layout.home-layout-centered .video-showcase-section {
    --home-video-content-offset-left: 0px;
    --home-video-content-width: 100%;
  }

  .home-layout.home-layout-centered .video-showcase-tabs {
    padding-left: var(--home-video-content-offset-left, 0px) !important;
    box-sizing: border-box !important;
  }

  .home-layout.home-layout-centered .video-showcase-tab {
    max-width: min(100%, 460px) !important;
  }
}


/* ======================================================
   HOME HERO CORNERS - LIGHT ROUNDED LOOK ON ALL DEVICES v43069
   Keeps the full video visible while softening the frame slightly.
====================================================== */
.video-hero-showcase {
  border-radius: 14px !important;
}

.video-showcase-link,
.video-showcase-media {
  border-radius: 14px !important;
}

.home-layout.home-layout-centered .video-hero-showcase {
  border-radius: 14px !important;
}

@media (max-width: 767px) {
  .video-hero-showcase,
  .video-showcase-link,
  .video-showcase-media,
  .home-layout.home-layout-centered .video-hero-showcase {
    border-radius: 12px !important;
  }
}


/* ======================================================
   FINAL ALL-DEVICE HOME VIDEO CORNER OVERRIDE v43070
   Stronger selectors + clip-path so laptop/desktop cannot stay square.
====================================================== */
#homeVideoShowcase,
.home-layout.home-layout-centered #homeVideoShowcase,
.home-layout.home-layout-centered .video-hero-showcase,
.video-showcase-section .video-hero-showcase {
  border-radius: 14px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 14px) !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  transform: translateZ(0) !important;
}

#homeVideoLink,
.home-layout.home-layout-centered #homeVideoLink,
.home-layout.home-layout-centered .video-showcase-link,
.video-showcase-section .video-showcase-link {
  border-radius: 14px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 14px) !important;
  display: block !important;
}

#homeVideoPreview,
.home-layout.home-layout-centered #homeVideoPreview,
.home-layout.home-layout-centered .video-showcase-media,
.video-showcase-section .video-showcase-media {
  border-radius: 14px !important;
  clip-path: inset(0 round 14px) !important;
}

@media (max-width: 767px) {
  #homeVideoShowcase,
  .home-layout.home-layout-centered #homeVideoShowcase,
  .home-layout.home-layout-centered .video-hero-showcase,
  .video-showcase-section .video-hero-showcase,
  #homeVideoLink,
  .home-layout.home-layout-centered #homeVideoLink,
  .home-layout.home-layout-centered .video-showcase-link,
  .video-showcase-section .video-showcase-link,
  #homeVideoPreview,
  .home-layout.home-layout-centered #homeVideoPreview,
  .home-layout.home-layout-centered .video-showcase-media,
  .video-showcase-section .video-showcase-media {
    border-radius: 12px !important;
    clip-path: inset(0 round 12px) !important;
  }
}


/* ======================================================
   SECOND PANEL PODCAST BALANCE TWEAK v43072
   - make logo.circle slightly smaller on desktop/laptop
   - nudge it a little left for more symmetrical spacing
   - keep logo.tea position unchanged
====================================================== */
@media (min-width: 1024px) {
  .home-second-panel {
    width: min(1240px, 88vw) !important;
  }

  .second-panel-podcast {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  .second-panel-podcast .podcast-circle-link {
    width: min(470px, 100%) !important;
    margin-left: -10px !important;
    margin-right: 0 !important;
  }

  .second-panel-podcast .podcast-circle-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}



/* ======================================================
   FORCED HOMEPAGE VISUAL FIX v43076
   This file is linked with a NEW CSS filename so GitHub/Cloudflare/browser
   cannot keep using the old cached style.css.
====================================================== */

/* Tiny rounded corners on the actual homepage video screen */
#homeVideoShowcase,
.home-layout.home-layout-centered #homeVideoShowcase,
.video-showcase-section #homeVideoShowcase.video-hero-showcase,
.home-layout.home-layout-centered .video-hero-showcase {
  border-radius: 12px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 12px) !important;
  -webkit-clip-path: inset(0 round 12px) !important;
  background: #000 !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
}

#homeVideoLink,
.home-layout.home-layout-centered #homeVideoLink,
.video-showcase-section #homeVideoLink.video-showcase-link,
.home-layout.home-layout-centered .video-showcase-link {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 12px) !important;
  -webkit-clip-path: inset(0 round 12px) !important;
}

#homeVideoPreview,
.home-layout.home-layout-centered #homeVideoPreview,
.video-showcase-section #homeVideoPreview.video-showcase-media,
.home-layout.home-layout-centered .video-showcase-media {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 12px) !important;
  -webkit-clip-path: inset(0 round 12px) !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #000 !important;
}

/* Move ONLY the podcast circle image more left on laptop/desktop */
@media (min-width: 1024px) {
  .home-second-panel .second-panel-podcast {
    transform: translateX(-32px) !important;
  }

  .home-second-panel .second-panel-podcast .podcast-circle-link {
    width: min(455px, 100%) !important;
    margin-left: -22px !important;
    margin-right: 0 !important;
  }
}

/* Make ONLY the podcast circle image smaller on phone */
@media (max-width: 760px) {
  #homeVideoShowcase,
  .home-layout.home-layout-centered #homeVideoShowcase,
  .video-showcase-section #homeVideoShowcase.video-hero-showcase,
  .home-layout.home-layout-centered .video-hero-showcase,
  #homeVideoLink,
  .home-layout.home-layout-centered #homeVideoLink,
  .video-showcase-section #homeVideoLink.video-showcase-link,
  .home-layout.home-layout-centered .video-showcase-link,
  #homeVideoPreview,
  .home-layout.home-layout-centered #homeVideoPreview,
  .video-showcase-section #homeVideoPreview.video-showcase-media,
  .home-layout.home-layout-centered .video-showcase-media {
    border-radius: 9px !important;
    clip-path: inset(0 round 9px) !important;
    -webkit-clip-path: inset(0 round 9px) !important;
  }

  .home-second-panel .second-panel-podcast {
    transform: none !important;
  }

  .home-second-panel .second-panel-podcast .podcast-circle-link,
  .second-panel-podcast .podcast-circle-link,
  .podcast-circle-link {
    width: min(430px, 78vw) !important;
    max-width: 78vw !important;
  }
}

/* ======================================================
   HOME VIDEO FULL-FRAME FIX v43077
   Goal: keep the same screen width, but show the FULL 16:9 video
   so the top and bottom are visible. Also moves the hero slightly down.
====================================================== */
@media (min-width: 1024px) {
  .home-layout.home-layout-centered {
    margin-top: 132px !important;
  }

  #homeVideoShowcase,
  .home-layout.home-layout-centered #homeVideoShowcase,
  .video-showcase-section #homeVideoShowcase.video-hero-showcase,
  .home-layout.home-layout-centered .video-hero-showcase {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    clip-path: inset(0 round 12px) !important;
    -webkit-clip-path: inset(0 round 12px) !important;
    background: #000 !important;
  }

  #homeVideoLink,
  .home-layout.home-layout-centered #homeVideoLink,
  .video-showcase-section #homeVideoLink.video-showcase-link,
  .home-layout.home-layout-centered .video-showcase-link {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    clip-path: inset(0 round 12px) !important;
    -webkit-clip-path: inset(0 round 12px) !important;
  }

  #homeVideoPreview,
  .home-layout.home-layout-centered #homeVideoPreview,
  .video-showcase-section #homeVideoPreview.video-showcase-media,
  .home-layout.home-layout-centered .video-showcase-media {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    clip-path: inset(0 round 12px) !important;
    -webkit-clip-path: inset(0 round 12px) !important;
    background: #000 !important;
  }

  .home-layout.home-layout-centered .video-showcase-tabs {
    margin-top: 12px !important;
  }
}


/* ======================================================
   MOBILE SECOND-PAGE ORDER SWAP v43079
   Only on phone/smaller devices:
   show the book/logo.tea section first and podcast/logo.circle second.
   Desktop/laptop order is unchanged.
====================================================== */
@media (max-width: 900px) {
  .home-second-panel {
    display: grid !important;
  }

  .home-second-panel .second-panel-book {
    order: 1 !important;
  }

  .home-second-panel .second-panel-podcast {
    order: 2 !important;
  }
}


/* ======================================================
   MOBILE SECOND-PAGE GAP FIX v43080
   Only on phone/smaller devices:
   remove the large empty vertical space between logo.tea and logo.circle.
   Desktop/laptop layout is unchanged.
====================================================== */
@media (max-width: 900px) {
  .home-second-panel {
    gap: 18px !important;
    row-gap: 18px !important;
    margin-top: 34px !important;
    align-items: center !important;
  }

  .home-second-panel .second-panel-book.book-access-area,
  .home-second-panel .second-panel-podcast.podcast-circle-section {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .home-second-panel .second-panel-book .book-carousel {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .home-second-panel .second-panel-book .book-carousel-track,
  .home-second-panel .second-panel-book .book-carousel-slide {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .home-second-panel .second-panel-podcast {
    margin-top: 6px !important;
  }
}


/* ======================================================
   MOBILE GAP + DESKTOP CIRCLE LEFT TWEAK v43081
   - phone/smaller devices: add a little more space between book and circle
   - laptop/desktop: move logo.circle a few millimeters more left
====================================================== */
@media (max-width: 900px) {
  .home-second-panel {
    gap: 30px !important;
    row-gap: 30px !important;
  }

  .home-second-panel .second-panel-podcast {
    margin-top: 10px !important;
  }
}

@media (min-width: 1024px) {
  .home-second-panel .second-panel-podcast {
    transform: translateX(-44px) !important;
  }

  .home-second-panel .second-panel-podcast .podcast-circle-link {
    margin-left: -30px !important;
  }
}


/* ======================================================
   MOBILE SMALL-DEVICE SPACING TWEAK v43082
   - adds a bit more breathing room above the images
   - adds more space between the two images
   - adds more space below the images before the marquee
====================================================== */
@media (max-width: 900px) {
  .home-second-panel {
    margin: 64px auto 58px !important;
    gap: 56px !important;
  }

  .second-panel-book {
    margin-top: 8px !important;
  }

  .second-panel-podcast {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
}