* {
  padding: 0px;
  margin: 0px;
}
body {
  display: block;
  font-family: "Montserrat";
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
.content-wrapper {
  max-width: 2700px;
  margin: 0 auto;
}
a {
  color: inherit;
  text-decoration: none;
}
.text-animation > * {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  transition-delay: 0s; /* updated by JS */
}

.text-animation > *.visible {
  opacity: 1;
  transform: translateY(0);
}
/*start of announcement*/
#announcement-placeholder {
  min-height: 40px; /* match your announcement bar height */
  background: #3d4030;
}
#announcement-placeholder.announcement-loaded {
  min-height: auto;
}
.announcement {
  display: grid;
  cursor: pointer;
}

.announcement-text {
  display: grid;
  align-items: center;
  width: 100%;
  z-index: 5;
  grid-row: 1;
  grid-column: 1;
}
.announcement img {
  width: 52px;
  position: absolute;
  top: -10px;
  z-index: 1;
  right: 0px;
  opacity: 0.4;
}
.announcement-text h1 {
  text-align: center;
  font-size: 8pt;
  font-weight: 300;
  color: #ffffff; /* Primary color */
  /*color: #ffabb2 */ /*Christmas color */
  text-transform: uppercase;
  letter-spacing: 1pt;
  padding: 10px;
}
.Christmas .announcement-text h1 {
  color: #f9baba;
  color: #cdfac6;
}

.animated-gradient {
  background: linear-gradient(209deg, rgba(15, 26, 37, 1), rgba(87, 90, 76, 1), rgba(23, 34, 43, 1));
  background: linear-gradient(176deg, rgb(29, 51, 72) 0%, rgb(70, 111, 148));

  background: linear-gradient(
    176deg,
    rgb(146, 126, 77),
    rgb(195, 174, 122) 23.53%,
    rgb(169, 147, 94) 41.6%,
    rgb(182, 158, 94) 59.66%,
    rgb(241, 208, 137) 80.25%,
    rgb(156, 139, 99)
  );

  background-size: 400% 400%;
  animation: gradient 100s infinite;
  height: 40px;
  position: sticky;
  top: 0;
  grid-row: 1;
  grid-column: 1;
}
.Christmas-animated-gradient {
  background: linear-gradient(209deg, rgba(165, 51, 61, 1), rgba(211, 64, 74, 1), rgba(136, 36, 43, 1));
  background: linear-gradient(209deg, #34462b, #608250, #34462b);
  background-size: 400% 400%;
  animation: gradient 100s infinite;
  height: 40px;
  position: sticky;
  top: 0;
  grid-row: 1;
  grid-column: 1;
}

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

/* Initially hide the dropdown content */
.announcement-dropdown {
  transform: translate3d(0, 0, 0);
  background-size: 400% 400%;
  animation: gradient 100s infinite;
  position: absolute;
  top: 40px;
  left: 0;
  width: auto;
  z-index: 10;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  height: 0; /* Collapsed by default */
  overflow: hidden; /* Hide overflow */
  transition: height 0.6s ease; /* Transition on both height and opacity */
  display: grid;
  left: 50%;
  transform: translateX(-50%);
  min-width: 600px;
}
.dropdown-container {
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  display: grid;
  background: linear-gradient(209deg, rgb(190, 190, 190), rgb(219, 219, 219));
  background: linear-gradient(209deg, rgb(188, 197, 203), rgb(219, 219, 219));
}
.announcement-image-header {
  display: flex;
  flex-direction: column;
}
.dropdown-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 600px;
  min-height: 428px;
  gap: 15px;
  grid-row: 1;
  grid-column: 1;
  margin: 36px;
  background-color: rgba(255, 255, 255, 0.959);
}
.dropdown-content img {
  width: 250px;
  margin: auto;
  padding-bottom: 12px;
}
.dropdown-content h1 {
  font-family: "EB Garamond", serif;
  font-size: 17pt;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 3pt;
  text-align: center;
  color: #5a5a5a;
  padding-bottom: 5px;
}
.Christmas .dropdown-content h1 {
  color: #d3404a;
  font-weight: 400;
  letter-spacing: 0pt;
  text-transform: capitalize;
  font-size: 20pt;
  font-style: italic;
}
.dropdown-content h2 {
  font-size: 8pt;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1pt;
  padding-bottom: 12px;
}
.dropdown-content p {
  font-family: "EB Garamond";
  font-style: italic;
  text-align: center;
  font-size: 13pt;
  color: #5a5a5a;
  margin: auto;
  width: 70%;
}
.dropdown-content button {
  font-size: 7pt;
  letter-spacing: 1pt;
  text-transform: uppercase;
  font-weight: 500;
  color: #2f2f2f;
  width: max-content;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: white;
  border: #2f2f2f solid 1px;
  font-family: montserrat;
  margin: auto;
  margin-top: 20px;
}

#particles-js {
  width: 100%;
  height: 100%;

  z-index: 1;
  grid-row: 1;
  grid-column: 1;
}

/* When the dropdown is visible */
.announcement-dropdown.show {
  height: 528px;
  transition: height 0.9s ease; /* Transition on both height and opacity */
}
@media screen and (max-width: 800px) {
  .announcement-dropdown {
    font-size: 8pt;
  }
  .announcement-text h1 {
    font-size: 7pt;
  }
}
/*end of announcement*/
/*start of nav*/
.nav-container {
  position: sticky;
  top: 0;
  z-index: 7;
  width: 100%;
  height: 0px;
  background: rgba(42, 42, 42, 0.343);
}
.main-navigation {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  align-items: center;
  position: relative;
  top: 0;
  z-index: 6;
  transition-duration: 0.5s;
  transition-delay: 0.2s;
  overflow-x: clip;
}
.navbar-color {
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  -webkit-box-shadow: 0px 4px 17px -5px rgba(36, 36, 36, 0.51);
  -moz-box-shadow: 0px 4px 17px -5px rgba(36, 36, 36, 0.51);
  box-shadow: 0px 4px 17px -5px rgba(36, 36, 36, 0.51);
  will-change: backdrop-filter;
}
.home-page .navbar-color {
  background: #2f2f2fdf;
}

/* start logo */
.logo {
  display: flex;
  width: 60px;
  /*background:#323d46;*/
}
.logo img {
  height: 40px;
  position: relative;
  padding: 15px;
}
/* the dark logo is for a light header background if that is ever used*/
.darklogo {
  display: none;
}
.darklogo-active {
  display: block;
}
.lightlogo {
  display: block;
}
.lightlogo-active {
  display: block;
}
/* end logo */
/* start burger*/
.burger {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  justify-content: center;
  height: 70px;
  width: 60px;
  cursor: pointer;
  background: none;
  transition: 0.2s;
}
.burger div {
  width: 2px;
  height: 20px;
  background-color: white;
  margin: 3px;
  border-radius: 10px;
  transition: all 0.3s ease;
}
.toggle {
  z-index: 10;
  background: white;
  transition: 1s;
}
.toggle:hover .line1,
.toggle:hover .line3 {
  background: rgb(0, 0, 0);
}
.toggle .line1 {
  height: 21px;
  transform: rotate(45deg) translateY(-1px);
  transform-origin: bottom;
  background-color: #5e5e5e;
}
.toggle .line2 {
  opacity: 0;
}
.toggle .line3 {
  height: 21px;
  transform: rotate(-45deg) translateY(-1px);
  transform-origin: bottom;
  background-color: #5e5e5e;
}
.line2 {
  height: 30px !important;
}
/* end burger*/
/* start of nav drawer*/
.nav-wrapper {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 9;
  overflow: hidden; /* Default: Prevent interaction outside nav when closed */
  transition: overflow 0.3s ease; /* Smooth transition for overflow changes (optional) */
}
.nav-wrapper-active {
  width: calc(100% - 60px);
  height: 100vh;
}
.nav-links {
  position: absolute;
  right: 0px;
  height: 100vh;
  height: calc(100dvh - 40px);
  top: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  padding: 0px;
  z-index: 10;
  overflow-y: scroll;
  justify-content: space-between;
  transform: translateX(100%);
  transition: transform 0.5s ease-in;
  background-color: rgba(255, 255, 255, 0.8);
}
.nav-links li {
  list-style: none;
}
.nav-links h1 {
  font-family: "trajan-pro-3", serif;
  font-weight: 300;
  letter-spacing: 3pt;
  font-size: 10pt;
  text-transform: uppercase;
  padding-top: 32px;
}
.nav-links a {
  list-style-type: none;
  text-decoration: none;
  color: #282828;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 2pt;
  font-size: 10px;
}
.subnav li {
  padding: 5px 0px;
}
.nav-links a:hover {
  color: rgb(0, 0, 0);
}
.nav-active {
  transform: translateX(0%);
  -webkit-box-shadow: 2px 0px 27px 5px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: 2px 0px 27px 5px rgba(0, 0, 0, 0.18);
  box-shadow: 2px 0px 27px 5px rgba(0, 0, 0, 0.18);
  overflow-x: hidden;
}
.nav-links-adjust {
  height: 100dvh;
}
.nav-links li {
  opacity: 0;
  padding: 5px 0px;
}
.drawer-background {
  -webkit-backdrop-filter: blur(70px);
  backdrop-filter: blur(10px);
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  /*
  -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;*/
}
/* if you don't wan't the scroll bar to show in safari and chrome
.drawer-background::-webkit-scrollbar{
  display: none;
}*/
.menu {
  display: grid;
  width: 100%;
  background-color: white;
  position: sticky;
  top: 0;
  z-index: 10;
}
.menu-header {
  height: 70px;
  display: flex;
  align-items: center;
  color: #2f2f2f;
  opacity: 0; /* Start fully transparent */
  transition: opacity 1s ease-in; /* Slow fade-in with 1s delay */
}
.menu-header-active {
  opacity: 1; /* Fully visible */

  transition: opacity 0.5s ease-in; /* Slow fade-in with 1s delay */
  transition-delay: 0.5s;
}
.menu-header button {
  font-family: "Quattrocento", serif;
}
.menu button {
  color: #5e5e5e;
  letter-spacing: 1pt;
  display: flex;
  font-size: 12pt;
  border: none;
  width: 100%;
  height: 70px;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgb(242, 242, 242);
  transition: 0.6s ease;
}

button:hover {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}
.bag-background {
  background-color: rgb(255, 255, 255);
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
}
.feather {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.snipcart-items-count {
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 70px;
  background: rgb(246, 246, 246);
}
.header .snipcart-items-count {
  position: absolute;
  right: 40px;
  background: none;
  color: white;
  font-family: "Quattrocento", serif;
  font-size: 14pt;
}
.snipcart-total-price {
  padding-left: 20px;
}
.menu-header img {
  height: 12px;
}
.menu-logo {
  position: sticky;
  top: 0px;
  width: 100%;
  overflow: hidden;
}
.menu-logo-img {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 40px 0 45px;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1s ease-in,
    transform 1s ease-in;
}

.menu-logo-img-active {
  opacity: 1;
  transform: translateY(0px); /* Move to original position */
}
.menu-logo-img img {
  width: 40%;
}
.menu-logo .animated-gradient {
  background: linear-gradient(-45deg, #2b734b, #256933, #2b7342);
  background: linear-gradient(-45deg, #617f40, #2b3524, #4f6b45, #617f40);
  background: linear-gradient(-45deg, #ffffff, #e5e5e5, #f3f3f3, #efefef);
  background-size: 400% 400%;
  animation: gradient 10s infinite;
  height: inherit;
  position: absolute;
  inset: 0; /* top:0 right:0 bottom:0 left:0 */
  z-index: 1;
  pointer-events: none; /* important */
}

.menu-links {
  display: grid;
  margin: auto;
  margin-bottom: 100px;
  padding: 0 40px;
}
/* start social footer*/
.nav-social {
  background: rgb(251, 251, 251);
  height: auto;
  padding: 0px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: sticky;
  bottom: 0;
}
.nav-social a {
  font-size: 13pt;
  padding: 20px;
  width: 100%;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
}
.nav-social a:hover {
  color: white;
  background: rgb(0, 0, 0);
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
a.x {
  border-left: solid 1px rgb(232, 232, 232);
}
a.x:hover {
  background: linear-gradient(129deg, rgba(0, 0, 0, 1) 0%, rgba(35, 71, 82, 1) 100%);
  background: linear-gradient(129deg, rgba(0, 0, 0, 1), rgba(0, 68, 89, 1));
}
a.youtube {
  border-left: solid 1px rgb(232, 232, 232);
  font-size: 15pt;
}
a.youtube:hover {
  background: linear-gradient(129deg, #c5221f, #ff0033);
}
@media screen and (max-width: 800px) {
  .main-navigation {
    height: 58px;
  }
  .logo img {
    height: 32px;
  }
  .toggle .line1 {
    height: 22px;
    transform: rotate(45deg) translateY(-1px) translateX(-2px);
  }
  .toggle .line3 {
    height: 22px;
    transform: rotate(-45deg) translateY(-1px) translateX(2px);
  }
  .burger {
    height: 58px;
  }
  .burger div {
    height: 16px;
    width: 1px;
  }
  .line2 {
    height: 23px !important;
  }
  .nav-links {
    width: 100%;
    overflow: hidden;
  }
  .menu-header {
    height: 58px;
  }
  .menu button {
    height: 58px;
  }
  .bag-background {
    height: 58px;
  }
  .snipcart-items-count {
    height: 58px;
  }
}
@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}
/* end of nav */
/* start of snipcart */
html {
  --shadow-buttonPrimary-hover: 0 0 0 3px green;
  --borderColor-input-hover: #2f2f2f;
  --shadow-input-focus: 0px 10px 15px -2px rgba(181, 181, 181, 1);
  --bgColor-buttonSecondary: none;
  --color-buttonSecondary: #2e2e2e;
  --bgColor-buttonDanger: none;
  --shadow-buttonDanger-hover: none;
  --color-buttonDanger: #2f2f2f;
  --borderColor-input-focus: #2f2f2f;
  --color-icon: #2f2f2f;
  --color-inputIcon-hover: #2f2f2f;
  --color-inputIcon-focus: #2f2f2f;
  --color-link: #2f2f2f;
  --color-link-hover: #2f2f2f;
  --color-buttonSecondary-hover: #132c4a;
  --bgColor-buttonSecondary-hover: #e0edfd;
  --color-buttonSecondary-active: #132c4a;
  --bgColor-buttonSecondary-active: #a9cdfa;
  --bgColor-input-checked: #a3e1ff;
  --color-buttonDanger-hover: #e85a4a;
  --bgColor-buttonDanger-hover: #fdefed;
  --color-buttonDanger-focus: #e85a4a;
  --color-buttonDanger-active: #e85a4a;
}
:root {
  --snipcart-input-border-radius: 16px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.snipcart {
  font-family: "montserrat", sans-serif;
}
.snipcart-cart-summary--edit.snipcart-modal__container {
  box-shadow: 0 20px 24px 20px rgba(22, 22, 22, 0.16);
}

/* empty cart */
.snipcart-cart--edit {
  background: #f2f2f2;
}
.snipcart-empty-cart__title {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14pt;
  color: #5a5a5a;
}
.snipcart-empty-cart {
  text-align: center;
  padding: 20px;
  justify-content: center;
  height: 70vh;
}
.empty-cart-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}
.empty-cart-image {
  max-width: 22%;
  height: auto;
  margin: 15px 0;
}
.custom-back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-family: Montserrat;
  font-size: 7pt;
  letter-spacing: 1pt;
  padding: 12px 18px;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
  text-transform: uppercase;
  color: #5a5a5a;
  font-family: "Montserrat";
  font-weight: 400;
  letter-spacing: 1pt;
}
.custom-back-button:hover {
  background-color: white;

  box-shadow: 0 7px 16px -6px rgba(62, 62, 62, 0.46);
}
.custom-back-button svg {
  width: 16px;
  height: 16px;
  stroke-width: 1pt;
}

/* end empty cart */
/* start snipcart edit/drawer cart*/
.snipcart-cart-header {
  background: white;
  width: 100%;
  display: inline;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 500;
  box-shadow: 0 -4px 6px 3px rgba(0, 0, 0, 0.26);
}
.header-container {
  padding: 16px;
  display: flex;
  align-items: center;
}
.snipcart-cart-header__close-button {
  flex: initial;
  width: 40px;
}
.snipcart-cart-header__options {
  flex: initial;
}
.snipcart-cart-header__option {
  color: #868686;
  transition: color 0.9s ease;
}
.snipcart-cart-header__option:hover {
  color: #2f2f2f;
}
.snipcart-cart-header__count svg {
  margin-right: 8px;
}
.cart-text {
  position: relative;
  overflow: hidden;
}

.cart-logo {
  margin: 0 auto;
}
.cart-logo img {
  width: 250px;
}
.snipcart-modal__header-summary {
  display: none;
}
.snipcart-modal__container {
  background: #eaebec;
}
.snipcart-modal {
  background: none;
}

.snipcart-cart--edit .snipcart-cart__footer-col {
  background: none;
}
.snipcart-cart--edit .snipcart-item-list {
  background: none;
  padding: 24px;
  border-radius: 0;
}
.snipcart-cart--edit .snipcart-cart__content {
  background: #f2f2f2;
  border-radius: 0;
  padding: 0;
}
.snipcart-cart-summary-side
  .snipcart-cart__content
  .snipcart-item-list
  .snipcart-item-line
  .snipcart-item-line__container {
  padding: 16px;
}
.snipcart-cart--edit .snipcart-cart__footer-buttons {
  padding: 24px 0px 38px;
}
.snipcart-cart-summary-fees--reverse .snipcart-summary-fees {
  padding: 0px;
}

.snipcart-item-line__variants {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border-radius: 0 0 10px 10px;
}
.snipcart-item-line--cart-edit .snipcart-item-line__variants {
  display: flex;
}
.snipcart-item-line__quantity {
  min-width: initial;
}
.snipcart-item-quantity__quantity {
  border-radius: 8px;
  width: 100%;
  height: 35px;
  overflow: hidden;
  padding: 0px;
  max-width: initial;
  background: none;
}
.snipcart-item-quantity__quantity:hover {
  border: solid 1px #e3e6e8;
}
.snipcart-button-icon.is-danger {
  margin: auto;
  border: solid 1px #e3e6e8;
  width: 25%;
  height: auto;
  color: #2f2f2f;
}
.snipcart-button-icon.is-danger svg {
  width: 16px;
  height: 16px;
  margin: auto;
}
.snipcart-cart-summary-side
  .snipcart-cart__content
  .snipcart-item-list
  .snipcart-item-line:last-child
  .snipcart-item-line__container {
  padding: 0;
}
.snipcart-cart--edit .snipcart-item-line__header {
  margin-bottom: 0px;
  padding: 16px;
  height: initial;
  background: white;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.1);
}

.snipcart-base-button__label {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
}
.base-icon-custom {
  position: absolute;
  right: 0;
}
.snipcart-base-button.is-icon-right .snipcart-base-button__label {
  margin-left: 0px;
  text-transform: capitalize;
}
.snipcart-base-button__icon {
  display: none;
}
/*end snipcart edit/drawer cart*/
/* start detailed cart*/
.snipcart-item-quantity__total-price {
  font-family: "Quattrocento", serif;
  font-size: 12pt;
  position: absolute;
  top: 24px;
  right: 16px;
}
.snipcart-item-line__container {
  padding: 0;
}
.snipcart-item-list {
  width: 100%;
  padding: 32px;
  background: #f2f2f2;
  background: #f7f7f7;
  border-radius: 10px;
  height: max-content;
}
.snipcart-item-line__header {
  border-radius: 0 10px 0 0;
  height: 86px;
  padding: 24px;
  margin-bottom: 0px;
  background: white;
  box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.1);
}
.snipcart-cart__content {
  background: none;
  border-radius: 8px;
  padding-top: 16px;
}
.snipcart-item-line {
  background: none;
  margin-bottom: 24px;
  overflow: hidden;
}
.snipcart-item-line:last-child {
  margin-bottom: 7px;
}
.snipcart-item-line__product {
  padding: 0px;
  border-radius: 10px;
  background-color: #fafafa;
  position: relative;
}
.snipcart-cart__footer {
  padding: 0;
}
.snipcart-cart__footer-col {
  width: 100%;
  background: #f2f2f2;
  border-radius: 10px;
  margin-top: 0;
  overflow: hidden;
}
.detailed-cart-summary {
  background: white;
  padding-bottom: 32px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 -4px 11px 0 rgba(0, 0, 0, 0.26);
}
.snipcart-cart--edit .detailed-cart-summary {
  padding-bottom: 0px;
}
.snipcart-cart__footer-buttons .snipcart-button-link,
.snipcart-cart__footer-buttons .snipcart-button-primary {
  margin-top: 0px;
}
.snipcart-cart__featured-payment-methods-container {
  margin-top: 0px;
}
.snipcart-featured-payment-methods {
  margin-top: 0px;
}
/* end detailed cart*/
/*start snipcart checkout*/

.snipcart-button-icon {
  border-radius: 8px;
}
.snipcart-input {
  border-radius: 8px;
  overflow: hidden;
}
.snipcart-input__input {
  padding-right: 8px;
}
input[type="text"] {
  width: 30px;
  border: none;
  color: #2f2f2f;
  outline: none;
}
.state {
  position: relative;
  height: 52px;
}

.state-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #8f99a3;
  pointer-events: none;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.snipcart-typeahead--invalid .state-label {
  top: 20px;
}

.state-label.hidden {
  opacity: 0;
}
.state:focus-within .state-label {
  opacity: 0;
}
.state > input,
.state > .snipcart-typeahead__input,
.state > select {
  position: relative;
  z-index: 2;
}
.snipcart-form__address-autocomplete {
  position: relative;
  height: 52px;
}
.snipcart-form__address-autocomplete .snipcart-form__label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #8f99a3;
  font-size: 14px;
  pointer-events: none;
  font-family: inherit;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.snipcart-field-error .snipcart-form__address-autocomplete .snipcart-form__label .hidden {
  opacity: 0;
}
.snipcart-form__address-autocomplete {
  height: 52px;
}
.snipcart-form__address-autocomplete--active {
  font-size: 13px;
}
.snipcart-form__address-autocomplete .snipcart-typeahead__suggestion--powered-by-google {
  display: none;
}
.snipcart-typeahead__typeahead__suggestion--highlight {
  color: #2f2f2f;
  font-weight: 500;
}
.snipcart-typeahead__suggestion--secondary {
  font-weight: 400;
}

.snipcart-textbox.snipcart__font--bold.snipcart__font--secondary.snipcart-form__select input {
  font-size: 14px;
}
.snipcart-input:focus-within {
  box-shadow: 0 4px 10px -3px rgba(119, 119, 119, 0.3);
}
.snipcart-field-error {
  color: #ff6a6a;
}
.snipcart-input--invalid {
  border-color: #ff6a6a;
}
.snipcart-form__select {
  border-radius: 8px;
  padding-right: 32px;
  color: #2f2f2f;
  font-weight: 500;
}
.snipcart__box {
  background: none;
  border-radius: 8px;
}
.snipcart-form .snipcart__box--header {
  padding-bottom: 8px;
}
.snipcart-form__cell--large {
  margin-right: 16px;
  width: 70%;
}
.snipcart-form {
  border-radius: 8px;
  background-color: white;
}
.snipcart__box--gray {
  border-radius: 10px;
  background: white;
  padding: 0px;
}

.snipcart-shipping-rates-list-item--highlight {
  border-radius: 8px;
}
.snipcart-shipping-rates-list-item--guaranteed_days {
  display: none;
}

.snipcart__box--title {
  display: flex;
  align-items: center;
}
.snipcart-payment .snipcart__box--title {
  margin-bottom: 0px;
}
.snipcart__box--badge {
  font-family: "Quattrocento", serif;
  color: white;
  background: #6e864b;
  background: #2f2f2f;
  border: none;
  border-radius: 8px;
  height: 30px;
  width: 30px;
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 0;
  margin-right: 8px;
}
.snipcart__box--badge-highlight {
  color: #2f2f2f;
  border: solid 1px;
  border-color: black;
  background-color: #f2f2f2;
}
.snipcart__box--badge-disabled {
  background: #f2f2f2;
  color: #2f2f2f;
}
.snipcart-checkout-step .snipcart__icon {
  width: 15px;
  height: 15px;
}
.snipcart-checkout-step__col .snipcart__icon {
  width: 30px;
  height: 30px;
}
.snipcart-form__select-wrapper .snipcart__icon {
  width: 24px;
  height: 24px;
}
.snipcart__font--subtitle {
  font-weight: 500;
  font-size: 12pt;
}
.snipcart-billing-completed__header,
.snipcart-shipping-completed__header {
  background: #f7f7f8;
  border-radius: 8px 8px 0 0;
  padding: 12px;
  padding-right: 24px;
  margin-bottom: 0;
}

.snipcart-billing-completed__header .snipcart-button-link,
.snipcart-shipping-completed__header .snipcart-button-link {
  border-bottom: none;
  font-weight: 300;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
}
.snipcart-button-link:hover {
  color: black;
}
.snipcart__box--slim {
  padding: 12px;
}

.snipcart-checkout-step__cols {
  padding: 32px;
}
/*.snipcart-checkout__content .snipcart-layout__content {
  width: 100%;
  display: flex;
  justify-content: center;
  background: green;
}*/
.snipcart-checkout__content {
  width: 100%;
}
.snipcart-layout__cols .snipcart-cart-summary {
  border-radius: 10px;
  width: 375px;
  min-width: 375px;
}
.snipcart-layout__col .snipcart-cart-summary {
  overflow: hidden;
}
.snipcart-typeahead__suggestion--active,
.snipcart-typeahead__suggestion--search-query {
  background: #eaebec;
  color: #2f2f2f;
}
.snipcart-typeahead__suggestions {
  top: 90%;
  border-radius: 0 0 8px 8px;
}
.snipcart-checkout-step__icon {
  display: none;
}

.checkout-icons .snipcart__icon {
  width: 24px;
  height: 24px;
}
.snipcart-form__select:focus-within {
  box-shadow: 0 4px 10px -3px rgba(119, 119, 119, 0.3);
}
/* Hide the arrow in snipcart-typeahead */
.snipcart-typeahead[disabled] {
  pointer-events: none;
  cursor: default;
}
.snipcart-typeahead[disabled]::after {
  display: none;
}
.snipcart-typeahead[disabled] select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.snipcart-typeahead[disabled] .snipcart__icon {
  display: none;
}
/*start detailed cart summary*/
.snipcart-cart--edit .snipcart-summary-fees {
  padding: 0px;
}
.snipcart-summary-fees {
  padding: 32px;
}
.snipcart-cart__footer-buttons {
  padding: 0 32px;
}
.snipcart-cart-summary--edit .snipcart-cart__secondary-header {
  position: sticky;
  top: 0px;
  z-index: 100;
  min-height: 56px;
  padding: 0 12px 0 27px;
  box-shadow: 0 -4px 6px 3px rgba(0, 0, 0, 0.26);
}
.snipcart-modal__container .snipcart-cart-summary--edit .snipcart-cart__footer {
  padding: 32px;
  position: sticky;
  bottom: 0;
  box-shadow: 0 4px 6px 3px rgba(0, 0, 0, 0.26);
}
/*end detailed cart summary*/
/*start checkout summary*/
.snipcart-layout__cols {
  justify-content: center;
  gap: 32px;
  padding-top: 16px;
}
.snipcart-cart-summary__content {
  border-radius: 10px;
  box-shadow: 0 -4px 11px 0 rgba(0, 0, 0, 0.26);
  overflow: hidden;
}
.snipcart-featured-payment-methods {
  padding: 0px;
  display: flex;
  flex-direction: column;
  margin-bottom: 0px;
  border-top: none;
}
.payment-options {
  display: flex;
  width: 100%;
  height: 52px;
  overflow: hidden;
  border-bottom: 1px solid #f1f1f1;
}

.secured {
  width: 100%;
  display: none;
  justify-content: center;
  padding: 10px;
  background: linear-gradient(134deg, white, #f2f2f2);
}
.snipcart-featured-payment-methods__list-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 0px;
}
.snipcart-featured-payment-methods--no-background {
  margin-top: 0;
}
.creditcards img {
  width: auto;
  height: 25px;
}
.visa img {
  height: 15px;
}
.stripe {
  width: 100%;
  display: flex;
  justify-content: center;
  color: white;
}

.stripe h3 {
  color: white; /* default text color */
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  gap: 6px;
  transition: color 0.3s ease;
}
.payment-image-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.payment-image-wrap img {
  height: 16px;
}

.image-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.image-wrap img {
  height: 16px;
}

.cart-footer-logo {
  padding: 30px;
}
.cart-footer-logo img {
  width: 140px;
}
.link {
  width: 100%;
  display: flex;
  justify-content: center;
}

.paypal {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* paypal payment logo */

.snipcart-payment-methods-list-item__button {
  justify-content: center;
  border-radius: 8px;
  height: 48px;
  background: linear-gradient(135deg, white, #f7f7f7);
}
.snipcart-payment-methods-list-item__button[title="Checkout with PayPal"] {
  background: #ffc43a;
}

.snipcart-payment-methods-list-item__arrow {
  position: absolute;
  right: 24px;
}
/* Hide the built-in PayPal icon */
.snipcart-payment-methods-list-item__icon[alt="PayPal"] {
  display: none !important;
}

.snipcart-payment-methods-list-item__label::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.25rem;
  /* Replace with your logo */
  background: url("images/PayPal-Monogram-FullColor-RGB.png") no-repeat center center;
  background-size: contain;

  width: 25px; /* set the size you want */
  height: 25px;
}
.snipcart-layout snipcart-modal .snipcart-layout__content {
  width: 100%;
  display: flex;
  justify-content: center;
}

/*end snipcart checkout*/
.snipcart-cart-summary--edit.snipcart-modal__container {
  width: 400px;
  margin-left: auto;
  right: 0;
  z-index: 600;
}
.snipcart-layout__content {
  width: 100%;
}
/* start snipcart media queries */
@media (max-width: 800px) {
  .cart-logo img {
    width: 170px;
  }
  .snipcart-input {
    height: 45px;
  }
  .snipcart-textbox.snipcart__font--bold.snipcart__font--secondary.snipcart-form__select input {
    font-size: 13px;
  }
  .snipcart-form__address-autocomplete .snipcart-form__label {
    font-size: 13px;
  }
  .snipcart-form__select {
    height: 45px;
    padding: 0px;
    padding-left: 16px;
    font-size: 13px !important;
  }
  .snipcart-form__address-autocomplete {
    height: 45px;
    font-size: 13px !important;
  }

  .snipcart-form__address-autocomplete > .snipcart-textbox {
    min-height: 45px;
  }
  input[type="text"] {
    width: 30px;
    border: none;
    outline: none;
    font-size: 13px;
    transform-origin: left;
  }
  .state {
    height: 45px;
  }
  .snipcart-cart-summary--edit.snipcart-modal__container {
    width: 100%;
  }
}
@media (min-width: 200px) {
  .snipcart-item-line__container {
    margin: 0;
  }
  .snipcart-item-line__text {
    display: block;
  }
  .snipcart-item-line__text h3 {
    font-family: "trajan-sans-pro", serif;
    text-transform: uppercase;
    letter-spacing: 1pt;
    font-size: 7pt;
    padding-top: 5px;
  }
  .snipcart-item-quantity__label {
    display: none;
  }
  .snipcart-item-line--cart-edit .snipcart-item-line__title {
    font-weight: 400;
    padding-left: 0px;
  }
  .snipcart-item-line__media {
    grid-column: 1 / span 2;
  }
  .snipcart-item-line__media--small {
    height: auto;
    background: rgb(221, 221, 221);
    padding: 25px;
    overflow: hidden;
    border-radius: 10px 10px 0px 0px;
  }
  .snipcart-item-line__media {
    background: rgb(171, 166, 159);
    background: rgb(221, 221, 221);
  }
  .snipcart-item-line__image {
    width: 100px;
    height: auto;
    margin: auto;
    box-shadow: 7px 8px 16px 0 rgba(46, 46, 46, 0.31);
  }
  .snipcart-item-line--cart-edit .snipcart-item-line__image {
    max-width: 125px;
  }
  .snipcart__font--subtitle-small,
  .snipcart__font--tiny {
    font-family: "Montserrat";
    text-transform: capitalize;
    font-size: 9pt;
    font-weight: 500;
  }
  .snipcart-form__select:hover {
    border-color: black;
  }
  .snipcart-button-primary {
    background-color: #2f2f2f;
    border-radius: 8px;
  }
  .snipcart-button-primary:hover {
    background-color: black;
    color: white;
    box-shadow: 0px 10px 15px -2px rgba(181, 181, 181, 1);
  }
  .snipcart-cart--edit .snipcart-item-line__product {
    background-color: white;
    padding: 0px;
    border-radius: 10px;
    box-shadow: 0 20px 24px -20px rgba(0, 0, 0, 0.1);
  }
}

@media (min-width: 1024px) {
  .snipcart-layout__cols .snipcart-layout__col--large {
    width: 570px;
  }
  /*start detailed cart desktop*/

  .snipcart-cart--edit .snipcart-item-quantity__total-price {
    top: 24px;
    right: 16px;
  }
  .snipcart-item-quantity__total-price {
    top: 32px;
    right: 24px;
  }
  .snipcart-item-line__product {
    border-radius: 0 10px 10px 0;
  }
  .snipcart-item-list {
    min-width: 512px;
    max-width: 570px;
  }
  .snipcart-cart--edit .snipcart-item-list {
    min-width: initial;
    max-width: initial;
  }

  /*end detailed cart desktop */

  .snipcart-cart__content {
    display: flex;
    justify-content: center;
    gap: 32px;
  }
  .snipcart-cart--edit .snipcart-cart__content {
    gap: 0;
  }

  .snipcart-cart--edit .snipcart-cart__content {
    padding: 0;
  }
  .snipcart-modal__container {
    width: 100%;
  }

  .snipcart-layout__col {
    width: auto;
    margin: 0px;
  }

  .snipcart-cart__footer {
    height: max-content;
    width: 375px;
    min-width: 375px;
    padding-top: 0px;
    margin-top: 0px;
  }
  .snipcart-item-line__image {
    width: 60px;
    height: auto;
    margin: auto;
    box-shadow: 7px 8px 16px 0 rgba(46, 46, 46, 0.31);
  }

  .snipcart-cart--edit .snipcart-item-line__media {
    background: rgb(171, 166, 159);
    background: #dddddd;
    padding: 25px;
    border-radius: 10px 10px 0 0px;
    margin-right: 0;
    min-width: initial;
  }
  .snipcart-item-line__media {
    background: rgb(171, 166, 159);
    background: rgb(221, 221, 221);
    padding: 25px;
    border-radius: 10px 0 0 10px;
    margin-right: 0;
    min-width: initial;
  }
}

@media (max-width: 1023px) {
  /* start detailed cart mobile*/

  .snipcart-item-line__header {
    margin-bottom: 0px;
    padding: 16px;
    height: initial;
    background: white;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.1);
  }
  .snipcart-item-quantity__total-price {
    top: 24px;
    right: 16px;
  }
  .snipcart-cart-header {
    margin-bottom: 0;
  }
  .snipcart-cart__content {
    padding: 0;
  }
  .snipcart-item-list {
    margin-bottom: 0;
    border-radius: 0;
    background: none;
    max-width: 400px;
    margin: 0 auto;
  }
  .snipcart-item-line {
    margin-bottom: 32px;
    border-radius: 10px;
  }
  .snipcart-cart__footer-col {
    border-radius: 0;
  }
  /* end detailed cart mobile */
  .snipcart-modal__header-summary {
    display: initial;
    width: 100%;
  }
  .header-summary-total {
    display: flex;
    align-items: center;
  }
  .snipcart-layout--large .snipcart-modal__header-summary-title {
    background: #f7f7f8;
    background: #6e864b;
    background: #2f2f2f;
    padding: 16px;
  }
  .snipcart-modal__header-summary-title {
    color: #f2f2f2;
    font-size: 11pt;
  }
  .snipcart-cart-header__icon {
    color: #f2f2f2;
  }
  .snipcart-form .snipcart__box {
    padding: 16px;
  }
}
/* end max-width 1024px */
/* end snipcart media queries */
.snipcart-cart__secondary-header-title {
  font-size: 0; /* hide original text */
}

.snipcart-cart__secondary-header-title::after {
  content: "Shopping Bag"; /* your replacement text */
  font-size: 10pt; /* restore visible size */
  font-family: "EB Garamond", serif;
  letter-spacing: 2pt;
  text-transform: uppercase;
}

.snipcart-item-line__header h2 {
  font-family: "EB Garamond", serif;
  text-transform: uppercase;
  letter-spacing: 1pt;
  color: #2f2f2f;
  font-size: 12pt;
  font-weight: 300;
}

.snipcart-button-icon.is-secondary {
  border-radius: 0px;
  width: 50px;
  height: 33px;
  margin-left: -1px;
  margin-right: -1px;
}
.snipcart-button-icon.is-secondary svg {
  margin: auto;
}
.snipcart-summary-fees__notice {
  margin: 0 0 32px;
  font-family: "EB Garamond";
  font-style: italic;
  text-align: center;
}
.snipcart-item-line--cart-edit {
  background-color: #f1f1f1;
  background: none;
  border: none;
}
.snipcart-summary-fees__item {
  display: flex;
  justify-content: space-between;
}
.snipcart-cart-summary-side .snipcart-cart__secondary-header {
  padding: 0 12px 0 27px;
}
.snipcart-cart__secondary-header {
  background: White;
  min-height: 70px;
}
.snipcart-cart__secondary-header h1 {
  line-height: initial;
}
.snipcart-cart-summary-side .snipcart-cart__footer {
  box-shadow: 1px 13px 13px 18px rgba(0, 0, 0, 0.13);
  -webkit-box-shadow: 1px 13px 13px 18px rgba(0, 0, 0, 0.13);
  -moz-box-shadow: 1px 13px 13px 18px rgba(0, 0, 0, 0.13);
  z-index: 5;
}
.snipcart-cart--edit .snipcart-button-link {
  font-size: 9pt;
  text-transform: capitalize;
  color: #2f2f2f;
  border: solid 1px #e3e6e8;
  padding: 16px;
  border-radius: 8px;
  width: 100%;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  margin-top: 16px;
}
/* checkout edit cart */
/* start checkout summary*/

.snipcart-layout__col > div[style] {
  width: auto !important;
  position: static !important;
}
.snipcart-cart-summary__content {
  padding: 0;
}
.snipcart-cart-summary__actions {
  padding: 16px;
  background: #f7f7f7;
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.snipcart-cart-summary-items-list {
  padding: 16px;
  max-height: max-content;
  background: white;
}

.snipcart-cart-summary-item {
  grid-template-columns: 55px 30px auto auto;
  align-items: center;
  margin: 0;
  overflow: hidden;
  border-radius: 5px;
  background: white;
  padding: 0 16px 0 0;
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
}
.snipcart-cart-summary-item:not(:last-child) {
  margin-bottom: 16px;
}
.snipcart-cart-summary-item__quantity {
  background: #f2f2f2;
  right: 0px;
  width: auto;
  height: 100%;
  color: #f7f7f7;
  color: #2f2f2f;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  display: flex;
}
.snipcart-cart-summary-item__image {
  background-color: #dddddd;
  padding: 10px;
}
.snipcart-cart-summary-item__image img {
  width: 30px;
  margin: auto;
  box-shadow: 2px 2px 9px #00000029;
}
.summary-item-text {
  padding-left: 16px;
}
.snipcart-cart-summary-item__name {
  font-weight: 400;
  padding-bottom: 2px;
}
.summary-item-description {
  font-size: 9pt;
}
.snipcart-cart-summary-item__price {
  font-weight: 400;
}
.snipcart-cart-summary__separator {
  width: 100%;
  margin: 0;
}
.snipcart-cart-summary .snipcart-discount-box {
  padding: 16px;
  background: #f7f7f7;
  margin-bottom: 0;
}
/* start discount combined message */
.snipcart-flash-message {
  display: block;
}
.snipcart-flash-message--error {
  border-radius: 8px;
  background: #ffd9d9;
}

.snipcart-flash-message--error .snipcart-flash-message__content h2 {
  font-size: 16px;
}
.snipcart-flash-message--error .snipcart-flash-message__content p {
  font-size: 14px;
}
.snipcart-flash-message--info {
  background: linear-gradient(231deg, #f7f7f7, white);
  border-radius: 10px;
  border: 1px solid #ededed;
  box-shadow: 0 4px 12px -3px rgba(119, 119, 119, 0.48);
  max-width: 343px;
}
.snipcart-flash-message__content h2 {
  color: #5a5a5a;
  font-size: 10pt;
  font-weight: 400;
  line-height: 13pt;
}

.snipcart-flash-message__action-container {
  justify-content: space-evenly;
}
.snipcart-flash-message__action-container > :first-child:hover {
  border: solid 1px #b8d282;
  background: #b8d282;
  color: #3e5219;
}
.snipcart-flash-message__action-container > :first-child:active {
  border: 1px solid #4f6720;
}
.snipcart-flash-message__action-container > :last-child:hover {
  border: solid 1px #fcd2cb;
  background: #fcd2cb;
  color: #ad2617;
}
.snipcart-flash-message__action-container > :last-child:active {
  border: solid 1px #e85a4a;
  background: #fcd2cb;
}
.snipcart-flash-message__action {
  font-weight: 400;
  display: flex;
  justify-content: center;
  border: solid 1px rgb(148, 148, 148);
  padding: 10px 7px;
  border-radius: 8px;
  width: 100%;
  font-size: 10pt;
}
/* green succes box */
.snipcart-discount-box__form--success {
  border-radius: 8px;
  height: 48px;
  text-transform: capitalize;
  background: #b8d282;
  border: 1px solid #4f6720;
  color: #3e5219;
}
/* end discount combined message */
/* discount box*/
.snipcart-discount-box__form {
  overflow: hidden;
}
.snipcart-discount-box .snipcart-input {
  height: 48px;
}
.snipcart-discount-box .snipcart-input input::placeholder {
  font-size: 10pt; /* placeholder only */
  color: #888; /* optional styling */
  text-transform: capitalize;
}
.snipcart-cart-summary .snipcart-discount-box__button {
  height: 48px;
  border-radius: 8px;
  font-size: 10pt;
  text-transform: capitalize;
  padding: 12px;
  background: #f7f7f7;
  border: 1px solid #bdbec0;
}

.snipcart-cart__discount-box .snipcart-button-link {
  border-bottom: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 10pt;
  height: 46px;
  right: 1px;
  padding: 16px;
  color: #73797e;
  border-radius: 0 8px 8px 0;
}
.snipcart-cart__discount-box .snipcart-button-link:hover {
  border-bottom: none;
  font-family: "Montserrat", sans-serif;
  font-size: 10pt;
  color: #2f2f2f;
}

.snipcart-discount-box__cancel {
  display: none;
}

.snipcart-cart-summary__content .snipcart-cart-summary__totals {
  padding: 32px;
}
.snipcart-cart-summary__totals .snipcart-summary-fees {
  padding: 0;
}
/* Only target the discount tooltip */
.snipcart-summary-fees__discounts-icon .snipcart-summary-fees__tool-tip {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important; /* flatten under the "Discount" label */
  margin-top: 0;
  width: 170px;
}
.snipcart-tool-tip {
  box-shadow: none;
}
.snipcart-tool-tip--bordered .snipcart-tool-tip__container {
  border: none;
  padding: 0;
  display: flex;
  font-weight: 500;
}
.snipcart-summary-fees__discount-amount-saved {
  padding-left: 10px;
}
.snipcart-shipping-remove {
  display: none;
}
/* checkout summary mobile */
.snipcart-cart-summary--small .snipcart-featured-payment-methods {
  height: auto;
  margin-bottom: 250px;
}
.snipcart-cart-summary--small .snipcart-cart-summary__actions {
  border-radius: 0;
}
.snipcart-cart-summary--small .snipcart-cart-summary__totals {
  padding: 24px;
}
.snipcart-cart-summary--small {
  margin-top: 0px;
}
.snipcart-cart-summary--small .snipcart-cart-summary__content {
  border-radius: 0;
}
/* end checkout summary*/
/* start checkout edit cart */
.snipcart-item-line--cart-edit {
  margin: 0;
}

.snipcart-cart--edit .snipcart-item-list li {
  padding: 24px;
}
.snipcart-cart--edit .snipcart-item-line__container {
  padding: 0;
}
.snipcart-item-line--cart-edit {
  padding: 0;
}
/* end checkout edit cart */
/* end of snipart */
/* start of footer */
footer {
  background: white;
}
.footerinfo {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
}
.footerinfo-left {
  border-right: solid 1px rgb(231, 231, 231);
}
.footerinfo .welcome {
  height: initial;
  min-height: 330px;
  padding: 2em;
}
.footerinfo .welcome img {
  width: 175px;
}
.footerinfo .welcome p {
  padding-top: 12px;
  font-size: 17px;
  font-family: "EB Garamond", serif;
  color: #5a5a5a;
  font-style: italic;
  max-width: 235px;
}
.footerinfo-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  background: #ecf2f2;
  background: #f7f7f7;
}
.directory {
  display: flex;
  justify-content: space-evenly;
  color: #5a5a5a;
  width: 100%;
  margin-bottom: 40px;
}
.directory h2 {
  font-family: "trajan-pro-3", serif;
  font-weight: 400;
  letter-spacing: 3px;
  font-size: 12px;
  text-transform: uppercase;
  padding-bottom: 12px;
}
.directory li {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: 10px;
  list-style: none;
}
.directory li:hover {
  color: #2f2f2f;
  cursor: pointer;
}
.footer-socials {
  background: white;
}
.footer-socials .nav-social a {
  font-size: 14pt;
}
.footer-socials .nav-social a.youtube {
  font-size: 15pt;
}
.social {
  display: flex;
  max-width: 80px;
  gap: 17px;
}
.social a {
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.social a .fa-youtube {
  font-size: 14pt;
}
.footer-socials {
  align-items: flex-end;
  justify-content: space-between;
  position: absolute;
  bottom: 0px;
  width: 100%;
  display: flex;
  align-items: center;
}
.footer-socials a {
  color: #424242;
}
.copyright-america {
  position: relative;
  background-color: #c4eaff; /* #E5F6FF */
  width: 100%;
  display: grid;
  height: 139px;
  overflow: hidden;
}

.clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.cloud-layer {
  position: absolute;
  inset: 0;
}
.clouds-inner {
  position: absolute;
  display: flex;
  width: 200%;
  height: 100%;
}
.clouds-slow {
  width: 100%;
}

.cloud-strip {
  animation: cloud-drift 300s linear infinite;
  will-change: transform;

  width: 100%;
}

@keyframes cloud-drift {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .clouds-inner {
    animation: none;
  }
}

.america-footer-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.america {
  display: flex;
  justify-content: flex-end;
  grid-column: 1;
  grid-row: 1;
  margin-right: 40px;
  z-index: 2;
}
.americatext {
  font-family: "EB Garamond";
  text-transform: uppercase;
  display: grid;
  align-items: center;
  color: #5a5a5a;
}
.americatext h3 {
  text-align: right;
  font-size: 12px;
  letter-spacing: 3px;
  font-weight: 400;
}
.americatext h2 {
  text-align: right;
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 400;
  padding-bottom: 4px;
}

.flag img {
  margin: 25px;
  margin-bottom: 0px;
  width: 50px;
}
.copyright {
  width: 100%;
  height: auto;
  display: grid;
  color: rgb(91, 90, 90);
  grid-column: 1;
  grid-row: 1;
  z-index: 5;
}
.copyright-content {
  display: flex;
  align-items: center;
  width: max-content;
  margin-left: 20px;
}
.copyrightlogo img {
  height: 30px;
  padding: 20px;
}
.copyright-text {
  display: grid;
  align-items: center;
}
.copyright-text img {
  height: 12px;
  padding-bottom: 5px;
}
.copyright p {
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 1pt;
  font-weight: 200;
}
.footer-logo-mobile {
  display: none;
}

@media screen and (max-width: 800px) {
  .footerinfo {
    display: grid;
    grid-template-columns: 1fr;
  }
  .directory {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 40px;
    grid-gap: 20px;
    margin: auto;
  }
  .copyright-america {
    display: flex;
    flex-direction: column;
    height: initial;
  }
  .copyright {
    grid-row: 2;
    background: #08354e;
    background: linear-gradient(114deg, #0c415e, color(srgb 0.0359 0.1624 0.2256));
    color: white;
  }
  .copyright-content {
    margin-left: 0px;
    width: 100%;
  }
  .copyrightlogo {
    width: 150px;
    display: flex;
    background: #052638;
    justify-content: center;
  }

  .footer-logo-desktop {
    display: none;
  }

  .footer-logo-mobile {
    display: block;
  }
  .copyright-text {
    width: 100%;
    margin-left: 20px;
  }
  .copyright-text img {
    height: 8px;
    padding-bottom: 5px;
  }
  .america {
    margin: 0 auto;
    height: 139px;
  }
  .america img {
    margin-right: 0px;
  }
  .clouds {
    justify-content: flex-start;
    position: initial;
  }
}

/* start of homepage */

main {
  display: block;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  font-family: "Montserrat";
}
.rellax {
  will-change: transform;
  backface-visibility: hidden;
}
.parallax {
  will-change: transform;
}
/*start hero main & broadsides*/
.hero-container-main {
  position: sticky;
  top: calc(-100vh + 110px);
  z-index: 5;
  width: 100vw;
  background: #3d4030;
}
.home-page .hero-container-main {
  background: #2f2f2f;
}
.hero-pano {
  width: 100vw;
  height: calc(100vh - 40px);
  overflow: hidden;
  display: grid;
}
.hero-overlay {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  z-index: 9;
  background: linear-gradient(
    180deg,
    rgba(50, 50, 50, 0.9742674332344213) 0%,
    rgba(83, 83, 83, 0.6745641691394659) 100%
  );
  background: linear-gradient(324deg, rgba(50, 50, 50, 0.9742674332344213), rgba(161, 161, 161, 0.67));
}
.hero-text {
  display: grid;
  align-items: center;
  text-align: center;
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
  height: 100%;
}
.home-page .hero-text {
  height: 85%;
}
.faulkner-text {
  align-items: start;
  padding-top: 20vh;
}
.jeffersonsignature img {
  width: 250px;
}
.hero-broadside-text h1 {
  font-family: "big-caslon-fb", serif;
  font-size: 37pt;
  text-transform: uppercase;
  font-weight: 100;
  font-style: normal;
  letter-spacing: 10px;
  padding-left: 10px;
  padding-bottom: 0px;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
}
.hero-broadside-text h2 {
  font-family: "trajan-sans-pro", sans-serif;
  font-size: 8pt;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-bottom: 0px;
}

.hero-brand {
  font-family: "trajan-pro-3", serif;
  font-size: 12pt;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 7pt;
  padding-left: 7pt;
  padding-top: 5px;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}
.hero-collection {
  font-family: trajan-pro-3, serif;
  font-size: 8pt;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 3pt;
  text-transform: uppercase;
  padding-bottom: 5px;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}
.hero-tagline {
  font-family: "adobe-caslon-pro", serif;
  font-style: italic;
  font-size: 18pt;
  font-feature-settings: "swsh";
}
.hero-broadside-text {
  color: white;
}
.faulkner-text .hero-broadside-text {
  color: #d6cd9d;
}
.herologo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}
.herologo img {
  width: 35px;
  padding-top: 5px;
}
.anniversary-crest img {
  width: 165px;
  padding-bottom: 10px;
  filter: drop-shadow(0px 0px 3px #2f2f2f);
}
.herobackdrop {
  width: 100%;
  height: 101%;
  overflow: hidden;
  grid-column: 1;
  grid-row: 1;
  z-index: 0;
  display: flex;
  min-height: 600px;
  position: relative;
}

.herobackdrop img {
  width: 100%;
  height: auto;
  min-height: 100%;

  object-fit: cover;
}
.home-page .herobackdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 87%;
}
.herobackdrop .white-image img {
  opacity: 0.7;
}

.herobackdrop .declaration img {
  object-position: 71% 50%;
}
.herobackdrop .constitution img {
  object-position: 43% 50%;
}
.herobackdrop .sermon img {
  object-position: 50% 50%;
}
.overlay {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
}

.overlayimage {
  position: relative;
  max-height: 100vh;
  width: 100%;
  will-change: transform;
  backface-visibility: hidden;
}

.herobackdrop .overlayimage {
  transform-origin: bottom center;
}

/* Animate the media, not the parallax wrapper */
.herobackdrop .overlayimage img,
.herobackdrop .overlayimage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transform: scale(1.08);
  animation: heroReveal 2s ease forwards;

  backface-visibility: hidden;
  will-change: opacity, transform;
}

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: scale(1.08);
  }

  to {
    opacity: 1;
    transform: scale(1.05);
  }
}
.overlayimage img {
  display: block;
  backface-visibility: hidden;
  will-change: transform;
}

@media screen and (max-width: 800px) {
  .hero-container-main {
    top: calc(-80vh + 98px);
  }

  .hero-pano {
    height: calc(80vh - 40px);
  }

  .herobackdrop {
    height: calc(80vh - 30px);
    min-height: initial;
  }

  .overlayimage {
    min-height: initial;
  }
  .hero-text {
    height: 100%;
  }

  .hero-brand {
    font-size: 10pt;
    letter-spacing: 7px;
    padding-left: 7px;
    padding-top: 0;
  }

  .hero-collection {
    font-size: 7pt;
    letter-spacing: 4pt;
    padding-left: 4pt;
  }
}
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
  .hero-container-main {
    top: calc(-60vh + 98px);
  }
  .hero-pano {
    height: calc(60vh - 40px);
  }
  /*.herobackdrop {
    height: calc(60vh - 30px);
    min-height: initial;
  }*/
  .overlayimage {
    min-height: initial;
  }
  .hero-text {
    height: 100%;
  }
}
/*video start*/
.video-section {
  position: relative;
  width: 100%;
  height: 100vh; /* or any fixed height like 600px */
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.video-content {
  position: relative;
  z-index: 1;
  color: white; /* adjust for contrast */
  text-align: center;
  padding: 4rem 2rem;
}
.video-toggle {
  margin-top: 20px;
  padding: 8px 16px;
  background: none;
  border: none;
  cursor: pointer;
  transition: 0.3s ease;
  position: absolute;
  z-index: 5;
  bottom: 0;
  color: white;
}
svg.lucide.lucide-circle-play {
  stroke-width: 1px;
}
.video-toggle:hover {
  background: white;
}
/*video end*/
/*start swiper main*/
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  width: auto; /* Let Swiper handle width */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the image fills the area */
  display: block; /* Ensure no inline gaps */
  margin: 0; /* Ensure no margin affects centering */
  padding: 0; /* Ensure no padding affects centering */
  max-height: 1070px;
}
.slide {
  width: 100%;
  height: 100%;
}
.swiper-wrapper-container {
  width: 100%;
  height: 800px;
}
.fade-item {
  opacity: 0;
  transition:
    opacity 1s ease,
    transform 1s ease;
}

.swiper-slide-active .fade-item {
  opacity: 1;
  transform: translateY(0);
}
.hero-active .fade-item {
  opacity: 1;
  transform: translateY(0);
}
.fade-h1 {
  transform: translateY(-10px);
  transition:
    opacity 2s ease 0.8s,
    transform 1s ease 0.4s;
}
.fade-h2 {
  transform: translateY(-10px);
  transition-delay: 0.8s;
}
.fade-logo {
  transform: translateY(10px);
  transition-delay: 0.8s;
}
.fade-tagline {
  transform: translateY(10px);
  transition-delay: 0.8s;
}
.fade-anniversary-crest {
  transform: translateY(-10px);
}
.fade-down {
  transform: translateY(-20px);
  transition:
    opacity 1s ease 0.8s,
    transform 1s ease 0.4s;
}
.fade-up {
  transform: translateY(10px);
  transition:
    opacity 2s ease 0.8s,
    transform 1s ease 0.4s;
  transition-delay: 1.6s;
}
.fade-up-note {
  transform: translateY(10px);
  transition:
    opacity 2s ease 0.8s,
    transform 1s ease 0.4s;
  transition-delay: 2s;
}
/*end swiper main*/

/*end hero main & broadsides*/

/*start product section*/
.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 70px);
  grid-template-rows: auto;
  width: 100vw;
}
.product-gallery {
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  overflow: hidden;
}
/*start product swiper*/
.product .swiper {
  width: 100%;
  height: 100%;
}
.product .swiper-pagination-bullet {
  border: solid 1px black;
  border-radius: 50%; /* Circle */
  transition: all 0.3s ease; /* Smooth transition */
}
.product .swiper-pagination-bullet-active {
  border: solid 1px #333;
  background: #333;
  width: 14px; /* Pill shape */
  border-radius: 2px; /* Pill shape */
}
.product .swiper-button-prev:after,
.product .swiper-button-next:after {
  color: rgb(54, 54, 54);
}
.swiper-button-prev:after,
.swiper-button-next:after {
  display: none;
}
.swiper-button-prev:after img {
  height: 30px;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
}
:root {
  --swiper-navigation-color: #2d2d2d;
}
:root {
  --swiper-pagination-color: rgba(255, 255, 255, 0.682);
}
:root {
  --swiper-pagination-border: solid black 5px;
}
/*end product swiper*/
.product-details {
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, rgb(255, 255, 255) 0%, rgb(244, 244, 244) 100%);
  overflow: hidden;
}

.product-details-preview .product-details-text {
  padding: 0;
  gap: 32px;
  max-width: 700px;
  margin: auto;
  color: #2f2f2f;
  text-align: center;
}
.product-details-preview .product-details-text div {
  padding: 27px 20px;
}

.product-details-preview .product-details-text h2 {
  font-family: "trajan-sans-pro", sans-serif;
  text-transform: uppercase;
  font-size: 10pt;
  font-weight: 400;
  letter-spacing: 2pt;
  padding-bottom: 12px;
}
.product-details-preview .product-details-text p {
  font-family: "adobe-caslon-pro", serif;
  font-size: 12pt;
}
.product-details-text {
  padding: 120px 15%;
  gap: 32px;
  max-width: 700px;
  margin: auto;
}
.broadside-commentary .product-details {
  background: none;
}
.broadside-commentary .product-details-text {
  padding: 0;
  width: 100%;
  max-width: initial;
}
.broadside-commentary .product-details-text .line-title {
  margin: auto;
}
.broadside-commentary .broadside-details p {
  font-family: trajan-sans-pro, sans-serif;
  font-size: 7pt;
}
.broadside-commentary .broadside-highlights {
  display: flex;
  justify-content: space-around;
}
.broadside-commentary .broadside-highlights ul {
  border-bottom: none;
  columns: 3;
  gap: 20px;
  text-align: center;
}
.broadside-commentary .product-details-text p {
  font-family: trajan-sans-pro, serif;
}
.product-details-text img {
  display: grid;
  width: 170px;
  margin: auto;
  padding-bottom: 10px;
}
.product-title {
  font-family: "big-caslon-fb", serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 5pt;
  padding-left: 5pt;
  color: rgb(45, 45, 45);
  text-align: center;
  padding-bottom: 10px;
  font-size: 20pt;
}
.product-subtitle {
  font-family: "trajan-sans-pro", serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  color: rgb(78, 78, 78);
  font-size: 10pt;
  letter-spacing: 2pt;
  font-weight: 300;
  text-align: center;
  padding-bottom: 12px;
}
.product-details-text .line-title {
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  color: rgb(78, 78, 78);
  font-size: 7pt;
  letter-spacing: 1pt;
  font-weight: 400;
  text-align: center;
  margin: 15px 0px;
}
.product-paragraph {
  font-family: adobe-caslon-pro, serif;
  color: #4e4e4e;
  font-size: 13pt;
  text-align: justify;
  line-height: 24pt;
  padding: 10% 0 10px;
}
.product-paragraph p {
  padding-bottom: 15px;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.product-paragraph:first-child:first-letter {
  color: #2f2f2f;
  float: left;
  font-size: 61px;
  line-height: 84px;
  padding-right: 10px;
  margin-bottom: -20px;
}

.detail-preview {
  display: grid;
  background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(244, 244, 244) 100%);
  overflow: hidden;
  height: calc(100vh - 70px);
  min-height: 750px;
}

@property --myColor1 {
  syntax: "<color>";
  initial-value: rgb(188, 188, 188);
  inherits: false;
}

@property --myColor2 {
  syntax: "<color>";
  initial-value: rgb(255, 255, 255);
  inherits: false;
}
.book-preview .book-main {
  background: linear-gradient(315deg, var(--myColor1), var(--myColor2));
  transition:
    --myColor1 0.5s,
    --myColor2 0.5s;
  position: relative;
}
.book-preview .book-main:hover {
  --myColor1: rgb(58, 73, 43);
  --myColor2: rgb(36, 49, 22);
}
/*start of interactive preview*/
:root {
  --accent: #e6c785;
}

body {
  margin: 0;
}

/* HERO STICKY AREA */
.stage {
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f0f0f0;
}

.image-stage {
  display: flex;
  justify-content: center;
  transition: transform 0.5s ease-out;
}
.image-wrapper {
  position: relative;
  display: inline-block;
}
.image-wrapper img {
  width: auto;
  max-height: 70vh;
  display: block;
  filter: drop-shadow(0 0 23px rgba(0, 0, 0, 0.25));
}

/* HOTSPOTS */
.hotspot {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  transition: all 0.4s ease;
}

.hotspot.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 0 8px rgba(241, 203, 127, 0.15);
}

/* FLOATING TEXT */
.overlay-text-container {
  position: absolute;
  bottom: 36px;
  width: 100%;
  height: 20%;
  max-width: 600px;
}
.overlay-text {
  position: absolute;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s ease;
  text-align: center;
  width: 100%;
}

.overlay-text.active {
  opacity: 1;
  transform: translateY(0);
  background: white;
  box-shadow: 0 0 23px rgba(0, 0, 0, 0.25);
  padding: 40px 0;
  border-top: solid 1px #e6c785;
}

.overlay-text h2 {
  font-family: "trajan-sans-pro", sans-serif;
  text-transform: uppercase;
  font-size: 10pt;
  font-weight: 400;
  letter-spacing: 2pt;
  padding-bottom: 12px;
}

.overlay-text p {
  font-family: "adobe-caslon-pro", serif;
  font-size: 12pt;
  max-width: 600px;
  margin: auto;
  padding: 0 40px;
}

/* SCROLL SPACER */
.spacer {
  height: 50vh;
}
#printImage {
  transition: opacity 0.25s ease;
}

.toggle button {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.toggle .active {
  background: black;
  color: white;
}
/*end of interactive preview*/
/*start of page preview*/
.page-preview-trio {
  display: flex;
}

.page-preview-container {
  display: grid;
  height: 60vh;
  position: relative;
  overflow: hidden;
  min-height: 500px;
  flex: 1;
}
.secondary-hero {
  display: grid;
  height: 60vh;
  position: relative;
  overflow: hidden;
  min-height: 500px;
  flex: 1;
}
.secondary-hero-image {
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  overflow: hidden;
}
.secondary-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 18%;
}
.page-preview-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(164deg, #ffffff00, rgba(69, 66, 59, 0.26));
  transform: translateZ(0); /* isolates layer */
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.perfect-union {
  background: linear-gradient(#ffffff00, rgba(60, 50, 37, 0.54));
}
.page-preview-image {
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  overflow: hidden;
}
.page-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
@media (min-width: 1025px) {
  .page-preview {
    display: flex;
  }
  .page-preview section {
    width: 100%;
  }
  .page-preview-image img {
    transition: transform 0.8s ease; /* smooth zoom */
    transform-origin: center center;
  }
  .page-preview-container:hover .page-preview-image img {
    transform: scale(1.05); /* subtle zoom on hover*/
  }
}

@media (max-width: 1025px) {
  .zoom-container {
    overflow: hidden;
    position: relative;
  }
  .zoom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
    will-change: transform;
  }
}

.drafting-declaration img {
  width: 100%;
  height: 100%;
  object-position: 60% 18%;
}
.constitution-preview img {
  width: 100%;
  height: 100%;
  object-position: 50% 50%;
}
.eagle-crest img {
  width: 100%;
  height: 100%;
  object-position: 50% 16%;
}
.page-preview-text {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  position: relative;
  padding: 10%;
}

.page-preview-low-text {
  justify-content: flex-end;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  align-self: end;
  padding: 10%;
  margin-bottom: 2rem;
}

/*start page preview animations*/
.swiper-animation,
.swiper-animation > * {
  opacity: 0;
  transform: translateY(20px);
}

/* ------------------------------- ANIMATION ------------------------------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------- MOBILE ------------------------------- */
@media (max-width: 1024px) {
  .swiper-slide-active.in-view .swiper-animation,
  .swiper-slide-active.in-view .swiper-animation > * {
    animation: fadeUp 0.8s ease forwards;
  }
}

/* ------------------------------- DESKTOP ------------------------------- */
@media (min-width: 1025px) {
  .swiper-slide.in-view .swiper-animation,
  .swiper-slide.in-view .swiper-animation > * {
    animation: fadeUp 0.9s ease forwards;
  }
}
@media (max-width: 800px) {
  .page-preview-trio {
    flex-direction: column;
  }
}
/*end page preview animations*/
.page-preview-text {
  font-family: "big-caslon-fb", serif;
  letter-spacing: 5pt;
  font-weight: 200;
  text-transform: uppercase;
  font-size: 18pt;
  text-align: center;
  color: #f7f7f7;
}
.page-preview-low-text h2 {
  font-family: "adobe-caslon-pro", serif;
  letter-spacing: 4px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  font-size: 14pt;
  text-shadow: 0 0 7px rgb(0, 0, 0, 0.89);
  line-height: 18pt;
  padding-bottom: 5px;
  color: #f7f7f7;
  padding-left: 4px;
}
.page-preview-low-text h3 {
  font-family: "adobe-caslon-pro", serif;
  font-size: 12pt;
  line-height: 16pt;
  font-style: italic;
  font-weight: 400;
  color: #f7f7f7;
  padding: 3px 10% 12px;
  text-align: center;
  text-shadow: 0 0px 7px rgba(0, 0, 0, 0.89);
}
.secondary-hero-text {
  justify-content: flex-end;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  align-self: end;
  padding: 10%;
  margin-bottom: 2rem;
}
.secondary-hero-text h2 {
  font-family: "adobe-caslon-pro", serif;
  letter-spacing: 4px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  font-size: 14pt;
  text-shadow: 0 0 7px rgb(0, 0, 0, 0.89);
  line-height: 18pt;
  padding-bottom: 5px;
  color: #f7f7f7;
  padding-left: 4px;
}
.secondary-hero-text h3 {
  font-family: "adobe-caslon-pro", serif;
  font-size: 12pt;
  line-height: 16pt;
  font-style: italic;
  font-weight: 400;
  color: #f7f7f7;
  padding: 3px 10% 12px;
  text-align: center;
  text-shadow: 0 0px 7px rgba(0, 0, 0, 0.89);
}
.anniversary {
  max-width: 380px;
  margin-bottom: 0;
  align-self: initial;
}
.anniversary h2 {
  color: #2f2f2f;
  text-shadow: none;
}
.anniversary h3 {
  font-family: "trajan-sans-pro", sans-serif;
  font-style: normal;
  text-transform: uppercase;
  font-size: 9pt;
  letter-spacing: 3px;
  color: #2f2f2f;
  text-shadow: none;
}
.anniversary p {
  font-family: "adobe-caslon-pro", serif;
  font-style: italic;
  text-align: center;
  font-feature-settings: "swsh";
  font-size: 13pt;
}
.white-overlay {
  background: linear-gradient(204deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.43));
  z-index: 2;
  grid-row: 1;
  grid-column: 1;
  /*
  border-image: linear-gradient(to right, rgb(200, 23, 23) 0%, white 80%, rgb(19, 115, 218) 100%) 1;
  border-width: 2px;
  border-style: solid;*/
}
.navy-overlay {
  background: linear-gradient(
    261deg,
    rgba(22, 31, 47, 0) 37.39%,
    rgba(12, 21, 38, 0.6588235294117647) 81.93%,
    rgba(6, 17, 34, 1) 98.32%
  );
  z-index: 2;
  grid-row: 1;
  grid-column: 1;
  /*
  border-image: linear-gradient(to right, rgb(200, 23, 23) 0%, white 80%, rgb(19, 115, 218) 100%) 1;
  border-width: 2px;
  border-style: solid;*/
}
.american-made {
  max-width: 380px;
  margin-bottom: 0;
  align-self: initial;
  color: #f7f7f7;
}
.american-made svg {
  fill: #f7f7f7;
  padding-bottom: 10px;
}
.american-made h2 {
  text-shadow: none;
}
.american-made h3 {
  font-family: "trajan-sans-pro", sans-serif;
  font-style: normal;
  text-transform: uppercase;
  font-size: 9pt;
  letter-spacing: 3px;
  text-shadow: none;
}
.american-made p {
  font-family: "adobe-caslon-pro", serif;
  font-style: italic;
  text-align: center;
  font-feature-settings: "swsh";
  font-size: 13pt;
}
.btn-secondary {
  font-family: "trajan-sans-pro", sans-serif;
  font-weight: 500;
  font-size: 8pt;
  letter-spacing: 2pt;
  color: #f2f2f2;
  border: solid 1px #f2f2f22b;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.059);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 8px 16px;
  width: 45%;
  text-align: center;
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.745);
}
.page-preview-container .painting-info {
  width: 100%;
}
.page-preview-container .tooltip {
  position: relative;
  bottom: 0px;
  right: 0px;
  width: 100%;
}
.page-preview-container .book-icon {
  position: absolute;
  bottom: 0px;
  right: 0;
}
.page-preview-container .tooltip .tooltiptext {
  width: initial;
  bottom: 0px;
  right: 0px;
  border-radius: 0px;
}
.tooltip,
.tooltip *,
.page-preview-container .tooltip,
.page-preview-container .tooltip * {
  -webkit-tap-highlight-color: transparent;
  outline: none !important;
}
/*page preview swiper pagination*/
/* Hide default bullet background */
/* Target only this Swiper's pagination */
.page-pagination .swiper-pagination-bullet {
  width: 24px;
  height: 24px;
  background: none !important; /* hide default circle */
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  border: none;
  font-size: 11pt;
}
.page-pagination .swiper-pagination-bullet-active {
  background: none !important; /* hide default circle */
  border: none !important;
}
/* Outline star by default */
.page-pagination .swiper-pagination-bullet::before {
  content: "☆";
  padding: 20px;
}

/* Filled star when active */
.page-pagination .swiper-pagination-bullet-active::before {
  content: "★";
}

/* Optional hover glow */
.page-pagination .swiper-pagination-bullet:hover::before {
  text-shadow: 0 0 6px rgb(19, 19, 19);
}
@media screen and (max-width: 800px) {
  .page-preview {
    display: grid;
    grid-template-columns: 1fr;
  }
  .page-preview-container {
    height: 70vh;
    overflow: hidden;
  }
  .anniversary {
    margin: 0 auto;
    align-self: end;
  }
  .american-made {
    margin: 0 auto;
    align-self: end;
  }
  .white-overlay {
    background: linear-gradient(190deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.99));
  }
  .navy-overlay {
    background: linear-gradient(
      190deg,
      rgba(22, 31, 47, 0) 37.39%,
      rgba(12, 21, 38, 0.6588235294117647) 81.93%,
      rgba(6, 17, 34, 1) 98.32%
    );
  }
  .navy .eagle {
    height: 40px;
    width: 30px;
  }
  .printing-3 {
    order: 3;
  }

  .page-preview-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
  }
  .page-preview-swiper .swiper-pagination-bullet {
    margin: 8px !important;
    height: 4px;
  }
  .page-preview-swiper .swiper-pagination-bullet-active {
    border: solid 1px #ffffff;
    background: white;

    border-radius: 1px; /* Pill shape */
  }
  .page-preview-container:hover .page-preview-image img {
    transform: scale(1); /* subtle zoom on hover */
  }
  .secondary-hero {
    height: 70vh;
  }
}
/* Smooth transition + ensure pointer events are disabled when hidden */
.page-preview-swiper .swiper-pagination {
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
}

.page-preview-swiper.hide-pagination .swiper-pagination {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

/*end of page preview*/
/*start of horizontal scroll page preview section */
.horizontal-section {
  position: relative;
}

.sticky-wrapper {
  position: relative; /* not sticky */
  height: calc(100vh - 70px);
  overflow: hidden;
  padding: 0 40px;
}

.horizontal-track {
  display: flex;
  height: calc(100vh - 70px);
  gap: 40px;
  will-change: transform;
  padding-left: 40px;
  padding-right: 40px;
}

.panel {
  display: flex;
  height: calc(100vh - 70px);
  flex-shrink: 0;
  padding: 40px 0;
  flex: 1;
}
.panel-item {
  flex: 1;
  background: linear-gradient(219deg, rgb(192, 190, 175), rgb(150, 149, 137));
  background: linear-gradient(300deg, rgb(255, 255, 255) 0%, rgb(244, 244, 244));
  position: relative;
  box-shadow: 0 7px 16px -5px rgba(0, 0, 0, 0.25);
  max-width: 500px;
  height: 82vh;
}
.panel-image {
  height: 30vh;
  width: 100%;
  overflow: hidden;
}
.panel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.76;
}
@media (max-width: 1024px) {
  .sticky-wrapper {
    position: relative; /* remove sticky */
    height: auto;
    overflow: visible;
    padding: 0 20px;
  }

  .horizontal-track {
    display: block; /* stack vertically */
    height: auto !important;
    transform: none !important;
    will-change: auto;
  }

  .panel {
    display: block;
    height: auto;
    margin-bottom: 40px;
  }

  .panel-item {
    max-width: 100%;
    height: auto;
  }

  .panel-image {
    height: 220px; /* or auto if you prefer natural scaling */
  }
}
/*end of horizontal scroll page preview section */
/*start feature-section*/
.preview-slide-container {
  display: flex;
}
.feature-section {
  position: relative;
  flex: 1;
}

.sticky-stage {
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  overflow: hidden;
  background: linear-gradient(to top, white, color(srgb 0.8117 0.8118 0.8119));
}

/* IMAGE */
.feature-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  will-change: transform;
}

.feature-image img {
  max-height: 60vh;
  width: auto;
  display: block;
  box-shadow: 25px 30px 55px 0px rgba(46, 46, 46, 0.31);
  margin: auto;
}

/* TEXT */
.text-wrap {
  position: absolute;
  top: 50%;
  right: 12%;
  width: 30%;
  transform: translateY(-50%) translateX(60px);
  opacity: 0;
  will-change: transform, opacity;
}
.bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  will-change: opacity;
  user-select: none;
  -drag: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

.bg-wrap img {
  position: absolute;
  bottom: -3%;
  right: -10%;
  height: 36vh;
  bottom: -3%;
  right: -500px;
  height: 84vh;
  opacity: 0.07;
  user-select: none;
  -drag: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

/* Ensure proper stacking */
.feature-image {
  z-index: 2;
}

.text-wrap {
  z-index: 3;
}
@media (max-width: 1600px) {
  .preview-slide-container {
    flex-direction: column;
  }
}
/* ✅ MOBILE: disable animation, stack content */
@media (max-width: 800px) {
  .feature-section {
    height: auto;
  }

  .sticky-stage {
    position: relative;
    height: auto;
    display: block;
    top: 0;
  }

  .feature-image,
  .text-wrap {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none !important;
    opacity: 1 !important;
    width: 100%;
  }
  .feature-image img {
    max-height: 50vh;
    box-shadow: 0 20px 31px -11px rgba(46, 46, 46, 0.31);
  }
  .text-wrap {
    margin: 1.5rem auto 4rem;
    width: 85%;
  }
  .text-wrap p {
    font-size: 13pt;
  }
  .bg-wrap {
    opacity: 0.2;
  }
  .bg-wrap img {
    bottom: 18%;
    right: -59%;
    height: 53vh;
  }
  .declaration-preview .bg-wrap img {
    bottom: 10%;
    right: -105%;
    height: 53vh;
  }
}
/*end feature-section*/

.broadside-preview-image {
  display: grid;
  padding: 15% 0;
}
.broadside-preview-print .broadside-preview-image {
  transition: transform 0.25s ease;
}
.broadside-preview-print .broadside-preview-image:hover {
  transform: scale(1.02);
}
.broadside-preview-print img {
  height: 40vh;
  max-height: 600px;
  min-height: 500px;
  margin: 0px auto 45px;
  box-shadow: 25px 30px 55px 0px rgba(46, 46, 46, 0.31);
}
.broadside-preview .broadside-preview-print {
  display: grid;
  background: linear-gradient(315deg, var(--myColor1), var(--myColor2));
  transition:
    --myColor1 0.5s,
    --myColor2 0.5s;

  position: relative;
}
.broadside-preview .broadside-preview-print {
  background: none;
  width: max-content;
  position: relative;
}
.broadside-preview-text {
  background: linear-gradient(25deg, #616261, rgb(61, 61, 61));
  background: linear-gradient(25deg, #e5e5e5, rgb(187, 187, 187));
  color: rgb(232, 232, 232);
  background: none;
  font-family: "adobe-caslon-pro", serif;
  color: #2f2f2f;
  text-align: center;
  margin-bottom: 20px;
}
.broadside-preview-text h2 {
  font-family: "big-caslon-fb", serif;
  font-weight: 100;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 6px;
  padding-left: 6px;
  padding-bottom: 8px;
  font-size: 15pt;
}
.broadside-preview-text h3 {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-size: 9pt;
  letter-spacing: 2pt;
  font-weight: 300;
}
.broadside-preview-text h4 {
  font-family: "trajan-sans-pro", sans-serif;
  font-weight: 400;
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-top: 20px;
}
.broadside-preview-text p {
  padding-top: 20px;
  font-style: italic;
  font-feature-settings: "swsh";
  font-size: 13pt;
}
.broadside-preview-text .preview-price {
  padding: 5px;
  font-family: "Quattrocento", serif;
  font-size: 20px;
  color: #5a5a5a;
  text-align: center;
  background: #091c2b;
}
/*.broadside-preview .broadside-preview-print:hover {
  --myColor1: rgb(92, 92, 92);
  --myColor2: rgb(36, 36, 36);
}*/
.product .broadside-preview-print {
  background: linear-gradient(315deg, #bcbcbc, #ffffff);
  width: 100%;
  height: 100%;
}

.preview-overlay {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  z-index: 4;
  background: rgba(255, 255, 255, 0.75);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9742674332344213), rgba(247, 247, 247, 0.66));
}

.detail-buttons {
  display: flex;
}

.detail-preview-image {
  grid-column: 1;
  grid-row: 1;
  max-height: 60vh;
}

.detail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-commentary {
  display: grid;
}
.commentary-carousel {
  display: grid;
  grid-template-columns: 60% 40%;
  overflow: hidden;
}
.commentary-carousel .commentary-image-block {
  grid-row: 1;
  grid-column: 1 / span 2;
  max-height: max-content;
}
.commentary-carousel .commentary-image-block img {
  position: absolute;
}
.carousel-text {
  display: grid;
  grid-row: 1;
  grid-column: 2;
  margin: 40px;
}
.carousel-text .text-swiper {
  grid-row: 1;
  grid-column: 2;

  background-color: #2f2f2f;
  background-color: #202326;
  background-color: #1f221f;
  background-color: #f4f4f4;
}
.carousel-text .broadside-commentary {
  background: none;
}
.background-commentary {
  display: flex;
  align-items: stretch;
}
.background-commentary-image {
  flex: 100%;
}
.background-commentary-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}
.background-commentary-text {
  flex: 50%;
  padding: 10%;
  background: #2f2f2f;
}
.background-commentary-text,
.background-commentary-text {
  font-family: adobe-caslon-pro, serif;
  color: #a1a1a1;
}
.commentary-image-block {
  display: grid;
  background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(244, 244, 244) 100%);
  overflow: hidden;
}
.commentary-image-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 100%;
}

.print-preview-image {
  display: flex;
  height: 100%;
  margin: auto;
  align-items: center;
}
.broadside-preview-print img {
  height: auto;
  width: auto;
  max-width: 400px;
  margin: auto;
  box-shadow: 25px 30px 55px 0px rgba(46, 46, 46, 0.31);
}
.product-details button,
.broadside-preview-print button {
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Montserrat;
  color: #ffffff;
  font-size: 8pt;
  letter-spacing: 1pt;
  background: none;
  padding: 15px 20px;
  border: solid #ffffff 3px;
  text-decoration: none;
  text-transform: uppercase;
  background: #ffffff00;
  border: solid #ffffff 2px;
  margin: auto;
}
.product-details button {
  display: flex;
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Montserrat;
  background: #898456;
  background: #2f2f2f;
  color: white;
  font-size: 8pt;
  letter-spacing: 1pt;
  padding: 15px 20px;
  border: solid 2pt #333;
  text-decoration: none;
  text-transform: uppercase;
  border: solid #9e925d 2px;
  border: solid #2f2f2f 2px;
  width: 100%;
  justify-content: center;
  transition: box-shadow 0.3s ease;
}
.declaration-buttons button {
  background: #aa9851;
  border: solid #e9ddaa 1px;
}

.hidden {
  display: none !important;
}
.product-details button:hover {
  background: rgb(81, 81, 81);
  background: white;
  color: #fbfbfb;
  text-decoration: none;
  background: linear-gradient(129deg, rgba(11, 28, 50, 1) 0%, rgba(31, 57, 91, 1) 100%);
  background: linear-gradient(129deg, rgba(38, 50, 11, 1) 0%, rgba(72, 91, 31, 1) 100%);
  background: #2f2f2f;
  color: white; /* Text color during active click */
  border-color: #333; /* Change border color when active */
  box-shadow: 0 7px 16px -6px rgba(62, 62, 62, 0.66);
}
.declaration-buttons button:hover {
  background: #aa9851;
  border: solid #eccc4e 1px;
}
.product-details .broadside-discover-container {
  display: flex;
  width: 100%;
  gap: 20px;
}
.detail-buttons {
  display: flex;
  padding-top: 10px;
  width: 100%;
}
.detail-buttons a {
  font-family: trajan-sans-pro, sans-serif;
  color: #ebebeb;
  font-size: 8pt;
  letter-spacing: 1pt;
  background: none;
  padding: 15px 20px;
  text-decoration: none;
  text-transform: uppercase;
  background: #2f2f2f;
  width: 100%;
  margin: auto;
  align-items: center;
  text-align: center;
  transition: all ease 0.3s;
}

.broadside-discover-container .detail-buttons a {
  font-family: trajan-sans-pro, sans-serif;
  color: #2f2f2f;
  font-size: 8pt;
  letter-spacing: 1pt;
  background: none;
  padding: 15px 20px;
  text-decoration: none;
  text-transform: uppercase;
  background: #ebebeb;
  width: 100%;
  margin: auto;
  align-items: center;
  text-align: center;
  transition: all ease 0.3s;
}

.broadside-preview .detail-buttons a {
  /*background: linear-gradient(312deg, color(srgb 1 1 1), color(srgb 0.8872 0.8872 0.8872));
  background: linear-gradient(160deg, color(srgb 0.2881 0.3733 0.4256), color(srgb 0.1669 0.2192 0.2527));
  background: linear-gradient(312deg, color(srgb 0.7179 0.6005 0.2872), color(srgb 0.8667 0.7586 0.52));
  color: #e4e4e4;
  color: #584927;*/
  border-image: linear-gradient(0deg, color(srgb 1 1 1), color(srgb 0.8872 0.8872 0.8872)) 1;

  border-width: 1px;
  border-style: solid;
}
.broadside-preview .detail-buttons a:hover {
  background: #c6c3b7;
  background: linear-gradient(312deg, color(srgb 0.7179 0.6005 0.2872), color(srgb 0.8667 0.7586 0.52));
  color: #584927;
  border-image: linear-gradient(312deg, color(srgb 0.7179 0.6005 0.2872), color(srgb 0.8667 0.7586 0.52)) 1;
  background: #afa17e;
  color: #2e2b24;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.19);
}
.detail-buttons-text {
  background: white;
  color: black;
}
.underline-hover {
  position: relative;
  display: inline-block;
  color: #ff4545;
  text-decoration: none;
}

.underline-hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: currentColor;
  transition:
    width 0.3s ease,
    left 0.3s ease;
}

.underline-hover:hover::after {
  width: 100%;
  left: 0;
}
.broadside-highlights {
  font-family: trajan-sans-pro, sans-serif;
}
.broadside-highlights ul {
  border-top: solid 1px #d7d7d7;
  border-bottom: solid 1px #d7d7d7;
  display: grid;
  grid-template-columns: repeat(2, auto);
  column-gap: 20px;
  row-gap: 15px;
  padding: 30px 0;
  text-transform: uppercase;
  letter-spacing: 1pt;
  list-style-type: none;
  font-size: 7pt;
  justify-content: space-around;
  margin-bottom: 30px;
}
.product-details-preview .broadside-highlights ul {
  columns: 1;
  border-bottom: none;
  padding-bottom: 0px;
  list-style: none;
  gap: 25px;
  padding: 40px 0px;
}
.product-details-preview .broadside-highlights {
  padding-bottom: 0px;
}
.product-details-preview .broadside-highlights li {
  white-space: nowrap;
  font-size: 8pt;
  padding-bottom: 5px;
}
.broadside-highlights li {
  color: #2f2f2f;
}
.broadside-highlights li:hover {
  color: black;
}
.section-container {
  background: linear-gradient(140deg, rgb(231, 231, 231), white 81.51%);
  padding: 10% 0;
}

.section-heading h2 {
  font-family: "big-caslon-fb", serif;
  font-size: 18pt;
  font-weight: 100;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 7px;
  padding-left: 7px;
  color: rgb(45, 45, 45);
  text-align: center;
  padding-bottom: 10px;
}
.section-heading h3 {
  font-family: trajan-sans-pro, serif;
  text-transform: uppercase;
  color: rgb(78, 78, 78);
  font-size: 10pt;
  letter-spacing: 2pt;
  font-weight: 300;
  text-align: center;
  padding-bottom: 12px;
}
.section-heading p {
  font-family: adobe-caslon-pro, serif;
  color: rgb(78, 78, 78);
  font-size: 15pt;
  padding: 2% 0;
  margin: 0 auto;
  text-align: justify;
  max-width: 600px;
  margin: 0px auto;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
.section-drop-cap p:first-child:first-letter {
  color: #303030;
  float: left;
  font-size: 74px;
  line-height: 95px;
  padding-right: 10px;
  margin-bottom: -30px;
}
.section-quote {
  padding: 10%;
}

/*start info modal*/
@media (hover: none) and (pointer: coarse) {
  .tooltip-wrapper:hover .tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}
/* Remove blue focus glow / faint highlight on iPad */

.tooltip {
  position: relative;
  bottom: 0;
  right: 0;
  cursor: pointer;
  font-size: initial;
  width: 100%;
}

/* Tooltip text */
.tooltip .tooltiptext {
  font-family: adobe-caslon-pro, serif;
  font-size: 12pt;
  visibility: hidden;
  width: initial;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  color: #e8e8e8;
  padding: 25px;
  text-align: left;
  pointer-events: none;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 0px;
  right: 0px;
  opacity: 0;
  visibility: hidden;

  transform: translateY(10px);

  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s ease,
    visibility 0.45s;
}
.founding-father .tooltip .tooltiptext {
  padding-right: 100px;
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s ease,
    visibility 0.45s;
}
/* Animated right border */
.founding-father .tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 75px;
  height: 100%;
  background: #988354;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.03, 1, 0.22, 1);
}

/* Active state */
.tooltip .tooltiptext.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Animate border upward */
.tooltip .tooltiptext.active::after {
  transform: scaleY(1);
  transition: transform 0.45s cubic-bezier(3, 1, 0.3, 1);
}
.artist-name {
  font-family: adobe-caslon-pro, serif;
  font-style: italic;
  font-feature-settings: "swsh";
  letter-spacing: 0pt;
  font-size: 11pt;
  text-transform: capitalize;
  font-weight: 400;
}
.hero-pano .tooltip .tooltiptext {
  bottom: 15px;
  right: 15px;
  width: 400px;
  border-radius: 8px;
}
.tooltip .jeffersontooltiptext {
  background-color: #262626a8;
}
.tooltiptext-title {
  font-family: adobe-caslon-pro, serif;
  font-size: 10pt;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1pt;
}
.artist {
  text-transform: capitalize;
  letter-spacing: 0pt;
  font-size: 12pt;
}
.tooltiptext-subtitle {
  font-family: trajan-sans-pro;
  font-size: 7pt;
  text-transform: uppercase;
  letter-spacing: 1pt;
  font-weight: 400;
}
.tooltiptext-paragraph {
  padding: 10px 0px;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
.tooltiptext-info {
  font-family: trajan-sans-pro;
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 1pt;
  font-weight: 400;
}

.tooltip .tooltiptext {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.tooltip .tooltiptext.active {
  opacity: 1;
  visibility: visible;

  transform: translateY(0) scale(1);
  filter: blur(0);
}
.painting-info {
  position: absolute;
  z-index: 3;
  bottom: 0;
  right: 0;
  width: 100%;
}
.book-icon {
  position: absolute;
  display: flex;
  width: 35px;
  height: 40px;
  margin: auto;
  fill: #ffffff;
  padding: 23px;
  opacity: 0.8;
  z-index: 2;
  right: 13px;
  bottom: 0px;
}

.founding-father-icon {
  position: absolute;
  display: flex;
  width: 25px;
  height: 40px;
  margin: auto;
  fill: #e6c785;
  background: #998454;
  padding: 25px;
  opacity: 1;
  z-index: 2;
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 800px) {
  .book-icon {
    width: 35px;
    padding: 18px;
  }
  .tooltip .tooltiptext {
    font-size: 10pt;
    bottom: 0;
    right: 0;
    border-radius: 0;
  }
  .hero-pano .tooltip .tooltiptext {
    width: calc(100vw - 50px);
    font-size: 10pt;
    bottom: 0;
    right: 0;
    border-radius: 0;
  }
}
/*end info modal*/
.broadside-details p {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 7pt;
  letter-spacing: 1pt;
  color: #303030;
  margin: 0;
  padding-top: 8px;
}
.product-details-p {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 7pt;
  letter-spacing: 1pt;
  color: #303030;
  margin: 0;
  padding-top: 8px;
}
[id] {
  scroll-margin-top: 70px;
}
/*start tabs section */
.tab-buttons {
  display: flex;
  margin-bottom: 1em;
  position: sticky;
  top: 70px;
  z-index: 4;
}

.tab-buttons button {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  background: #f5f5f5;
  transition: background 0.3s;
  width: 100%;
  font-family: trajan-sans-pro;
  letter-spacing: 1pt;
  text-transform: uppercase;
}

.tab-buttons button.active {
  background: #313a3a;
  color: white;
}

.tab-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s ease;
  position: absolute;
}

.tab-content.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

/* Optional: Prevent layout shift during transition */
.tab-wrapper {
  position: relative;
  min-height: 100vh; /* adjust based on your expected content size */
}

/*end tabs section*/
.commentary-sidekick {
  display: flex;
}
.commentary-sidekick-text {
  flex: 1;
}
.commentary-sidekick-image {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex: 0.7;
}
.our-unanimity .wide-image {
  flex: 1.5;
}

.commentary-sidekick-image.wide-image {
  overflow: hidden;
}

.commentary-sidekick-image.wide-image img {
  width: var(--pan-width, 120%);
  max-width: none;
  display: block;
  will-change: transform;
}

@media (max-width: 899px) {
  .commentary-sidekick-image.wide-image[data-mobile-effect="zoom"] img {
    width: 100%;
  }

  .commentary-sidekick-image.wide-image[data-mobile-effect="pan"] img {
    width: var(--mobile-pan-width, 140%);
    max-width: none;
  }
}
.commentary-sidekick-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.our-unanimity .commentary-sidekick-image img {
  object-position: 0%;
}
.broadside-commentary {
  background: white;
  padding: 80px 10%;
}

.commentary-image {
  display: grid;
}
.commentary-image img {
  display: grid;
  width: 170px;
  padding: 15px;
  margin: auto;
}

.papers img {
  width: 295px;
}
.hall img {
  width: 300px;
  margin: auto;
  padding: 0px;
}
.flags img {
  width: 250px;
}

.broadside-commentary h2 {
  font-family: "big-caslon-fb", serif;
  font-size: 18pt;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 5pt;
  color: rgb(45, 45, 45);
  text-align: center;
  padding-bottom: 10px;
}
.broadside-commentary h3 {
  font-family: trajan-sans-pro, serif;
  text-transform: uppercase;
  color: rgb(78, 78, 78);
  font-size: 10pt;
  letter-spacing: 2pt;
  font-weight: 300;
  text-align: center;
  padding-bottom: 12px;
}
.broadside-commentary p {
  font-family: adobe-caslon-pro, serif;
  color: rgb(78, 78, 78);
  font-size: 16pt;
  padding: 20px 5px 0px;
  margin: 0 auto;
  text-align: justify;
  max-width: 50vw;
  max-width: 800px;
  margin: 0px auto;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.commentary-first-paragraph p:first-child:first-letter {
  color: #303030;
  float: left;
  font-size: 74px;
  line-height: 95px;
  padding-right: 10px;
  margin-bottom: -30px;
}
.commentary-detail-image {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  flex: 0.7;
}
.commentary-detail-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote {
  font-family: adobe-caslon-pro, serif;
  font-size: 17pt;
  line-height: 25pt;
  padding-bottom: 15px;
  text-align: center;
  font-style: italic;
  font-feature-settings: "swsh";
}
.commentary-quote {
  flex: 100%;
  padding: 25%;
}
.text-of-liberty .commentary-quote {
  background: #a39e7e;
  color: #595745;
  background: #13222b;
  color: #90aabe;
  background: #aa915b;
  color: #fff3d9;
  background: #1c1f23;
  color: #9ba8b5;
}
.sacred-honor .commentary-quote {
  background: #2c3033;
  background: #192d32;
  color: #afcbd2;
  background: #262b20;
  color: #9ea17c;
}
.our-unanimity .commentary-quote {
  background: #2c3033;
  background: #023243;
  color: #c8d8e6;
  background: #cdc7c3;
  color: #53493c;
  background: linear-gradient(color(srgb 0.0846 0.262 0.3248), color(srgb 0.0866 0.2385 0.2971));
  background: linear-gradient(color(srgb 0.059 0.2652 0.3385), color(srgb 0.0521 0.1774 0.2256));
  color: #738995;
  padding: 20%;
}
.our-liberty .wide-image {
  flex: 0.8;
}
.our-liberty .commentary-sidekick-image img {
  object-position: top;
}
.commentary-wide-image {
  height: 40vh;
}
.commentary-wide-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: flex;
  object-position: 50% 25%;
}

.our-liberty .commentary-quote {
  background: linear-gradient(183deg, #383c33, #373c2a);
  color: #aeb398;
  padding: 20%;
}
.sacred-honor .broadside-commentary img {
  width: 210px;
}
.our-lives .commentary-quote {
  background: #737959;
  background: #3d4030;
  color: #9fa676;
  color: #73775c;
  color: #adad7f;
}
.republic .commentary-quote {
  background: #f4f4f4;
  color: #2f2f2f;
  background: #491f1d;
  color: #cb6357;
  padding: 17%;
}
.thomson .commentary-quote {
  background: #998454;
  color: #f6dda9;
}
.jackson .commentary-quote {
  background: #998454;
  color: #f6dda9;
}
.thomson .broadside-commentary img {
  width: 155px;
}
.quote {
  max-width: 600px;
  margin: 0 auto;
}

.quote-details {
  font-family: trajan-sans-pro, serif;
  text-align: center;
  text-align: center;
}
.quote-author {
  font-family: trajan-sans-pro, serif;
  font-size: 11pt;
  letter-spacing: 1pt;
  text-align: center;
  text-transform: uppercase;
}
.quote-author-title {
  font-size: 8pt;
  letter-spacing: 1pt;
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 4px;
}
.quote-source {
  font-size: 12pt;
  font-family: adobe-caslon-pro, serif;
  font-style: italic;
  font-feature-settings: "swsh";
  font-weight: 400;
  padding-top: 3px;
}
.quote-date {
  font-size: 7pt;
  letter-spacing: 1pt;
  font-weight: 500;
  text-transform: uppercase;
}

.main-image {
  width: 100%;
  height: 50vh;
  overflow: hidden;
}
.main-image img {
  width: 100vw;
  height: auto;
}
/*braodside info trio*/
.broadside-info-trio {
  display: flex;
  gap: 3rem;
  margin: 3rem;
  justify-content: center;
}
.trio-item {
  flex: 1;
  background: linear-gradient(219deg, rgb(192, 190, 175), rgb(150, 149, 137));
  background: linear-gradient(300deg, rgb(255, 255, 255) 0%, rgb(244, 244, 244));
  position: relative;
  box-shadow: 0 7px 16px -5px rgba(0, 0, 0, 0.25);
  max-width: 500px;
}
.trio-text {
  flex: 1;
  background: linear-gradient(219deg, rgb(192, 190, 175), rgb(150, 149, 137));
  background: linear-gradient(300deg, rgb(255, 255, 255) 0%, rgb(244, 244, 244));
  padding: 10%;
  position: relative;
}
.trio-item .trio-text {
  padding: 12%;
}
.trio-text h2 {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10pt;
  letter-spacing: 1pt;
  color: #303030;
  margin: 0;
  padding-bottom: 8px;
  text-align: center;
}
.trio-text h3 {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 7pt;
  letter-spacing: 1pt;
  color: #303030;
  margin: 0;
  text-align: center;
  padding-bottom: 12px;
}
.trio-text p {
  font-family: adobe-caslon-pro, serif;
  color: rgb(78, 78, 78);
  font-size: 12pt;
  padding-top: 12px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 22pt;
}

.trio-text .tooltip .tooltiptext {
  background-color: #2f2f2f;
  width: auto;
}
.trio-text .tooltip .tooltiptext p {
  color: #f2f2f2;
}
.original-titles p {
  padding: 22px 0 10px;
}
.trio-text-quote p {
  font-family: adobe-caslon-pro, serif;
  text-align: center;
  hyphens: initial;
  -webkit-hyphens: initial;
  -ms-hyphens: initial;
}
.trio-source {
  font-family: trajan-sans-pro, serif;
  text-align: center;
}

.trio-source h2 {
  font-family: trajan-sans-pro, serif;
  font-size: 7pt;
  letter-spacing: 1pt;
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 4px;
}
.trio-source h3 {
  font-family: trajan-sans-pro, serif;
  font-size: 6pt;
  letter-spacing: 1pt;
  font-size: 7pt;
  letter-spacing: 1pt;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
}
.trio-source h4 {
  font-family: trajan-sans-pro, serif;
  font-size: 6pt;
  letter-spacing: 1pt;
  font-size: 6pt;
  letter-spacing: 1pt;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
}
.trio-image {
  width: 100%;
  height: 100px;
  overflow: hidden;
}
.trio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.76;
}
@media screen and (max-width: 1024px) {
  .broadside-info-trio {
    flex-direction: column;
    margin: 0;
    gap: 0;
  }
  .trio-item {
    max-width: initial;
  }
}
@media screen and (max-width: 800px) {
  .broadside-details {
    padding: 0 5%;
  }
  .broadside-details svg {
    scale: 80%;
  }
  .broadside-details p {
    font-size: 6pt;
    letter-spacing: 0.5pt;
  }
  .broadside-commentary p {
    font-size: 13pt;
  }

  .commentary-first-paragraph p:first-child:first-letter {
    font-size: 58px;
    line-height: 78px;
  }
  .commentary-sidekick {
    flex-direction: column;
  }
  .commentary-sidekick-image {
    height: 60vh;
    flex: initial;
  }
  .our-unanimity .wide-image {
    flex: initial;
  }
  .madison .commentary-sidekick-image img {
    object-position: 50% 0%;
  }
  .commentary-quote {
    padding: 60px 45px;
    padding: 14%;
  }
  .commentary-quote .quote p {
    font-size: 14pt;
    line-height: initial;
  }

  .broadside-preview .broadside-preview-print {
    background: linear-gradient(to top, rgb(233, 233, 233), rgb(255, 255, 255));
    width: 100%;
    position: relative;
  }
  .our-liberty .wide-image {
    flex: initial;
    order: 2;
  }
}
/*start gsap scroll zoom*/
.gsap-scroll-zoom {
  overflow: hidden;
  position: relative;
}

.gsap-scroll-zoom img {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.15); /* starting zoom */
  will-change: transform;
}
/*end gsap scroll zoom*/
/*start horizontal track*/
.horizontal-section {
  position: relative;
  background: linear-gradient(white, rgb(225, 225, 225));
}

.horizontal-track {
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  will-change: transform;
}
.horizontal-track {
  display: flex;
}

@media (max-width: 1024px) {
  .horizontal-track {
    flex-direction: column;
  }
}
.panel .trio-image {
  height: 40vh;
}
.panel .trio-item {
  box-shadow: 0 50px 38px -32px rgba(0, 0, 0, 0.25);
}
/*end horizontal track*/
/*start scrolly section*/
.scrolly {
  position: relative;
}

.scrolly-sticky {
  position: sticky;
  top: 100px;
  height: 81vh;
  overflow: hidden;
  width: 90vw;
  margin: auto;
  box-shadow: 0px 47px 32px -26px rgba(0, 0, 0, 0.2);
}

/* Images */
.image-layer {
  position: absolute;
  inset: 0;
}

.image-layer img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.image-layer img.active {
  opacity: 1;
}

/* Text box */

.text {
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.text.active {
  opacity: 1;
  position: relative;
}

/* Scroll height controls pacing */
.scrolly-steps .step {
  height: 100vh;
}
/*end scrolly section*/
.title-section h2 {
  padding-top: 30px;
}
.broadside-commentary-secondary {
  display: flex;
  font-family: "EB Garamond";
  color: #bebebe;
  color: #7d7d7d;
  padding: 0 10% 10%;
  gap: 5%;
}
.broadside-commentary-secondary div {
  flex: 1;
}

.broadside-commentary-secondary h2 {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 11pt;
  letter-spacing: 2pt;
  padding-bottom: 10px;
}
.broadside-commentary-secondary p {
  padding-bottom: 20px;
}
.ptest {
  font-family: "Montserrat";
  font-size: 11pt;
  color: rgb(75, 75, 75);
  padding-bottom: 20px;
  text-align: left;
}

.timeline-container {
  position: relative;
  padding: 60px 0;
  background-color: rgb(57, 70, 87);
  background-color: rgb(55, 59, 43);
  background: linear-gradient(60deg, rgb(255, 255, 255), rgb(244, 244, 244));
}
.timeline-line {
  position: absolute;
  top: 143px;
  left: 0;
  width: 100%;
  border: none;
  border-top: 1px solid #383838; /* Use your preferred color */

  z-index: 0;
}

.timeline {
  overflow-x: scroll; /* Enables horizontal scrolling */
  overflow-y: hidden; /* Prevents vertical scroll */
  -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  padding-top: 20px;
  position: relative;
  z-index: 1;
}

.timeline::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar in Chrome, Safari, Opera */
}

.timeline-content {
  display: flex;
  margin-left: 10%;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 3rem;
  padding-bottom: 40px;
}
.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  min-width: 300px;
}
.our-liberty .timeline-item {
  min-width: 350px;
}
.timeline-item:last-child {
  padding-right: 10%;
}
.timeline-header {
  margin-bottom: 10px;
}
.timeline-header h2 {
  font-family: adobe-caslon-pro, serif;
  font-size: 12pt;
  letter-spacing: 2pt;
  text-transform: uppercase;
  color: #2d2d2d;
  font-weight: 100;
}
.timeline-header h3 {
  font-family: "trajan-sans-pro", sans-serif;
  font-size: 8pt;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1pt;
  padding-bottom: 33px;
  color: #2d2d2d;
}
.timeline-header h4 {
  padding-bottom: 33px;
}
.timeline-toggle {
  display: none;
}
.timeline-content p {
  font-family: "adobe-caslon-pro", serif;
  color: #585858;
  padding-bottom: 17px;
}
.timeline-content h4 {
  font-family: "trajan-sans-pro", sans-serif;
  text-transform: uppercase;
  font-size: 8pt;
  letter-spacing: 1px;
  font-weight: 500;
  color: #585858;
  padding-bottom: 20px;
}
.timeline-marker {
  position: absolute;
  top: 58px;
  left: 0;
  z-index: 1;
}

.circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color(srgb 1 1 1);
  border: solid 1px #2d2d2d;
  position: relative;
}
.star-clip {
  width: 20px;
  height: 20px;
  background: #4b4b4b;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@media (max-width: 768px) {
  .timeline-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .timeline-item {
    margin-right: 30px;
  }
  .timeline-item p,
  .timeline-item h4 {
    display: none;
  }

  .timeline-item.active p,
  .timeline-item.active h4 {
    display: block;
  }

  .timeline-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .timeline-header h2 {
    padding-bottom: 0px;
    font-size: 11pt;
    letter-spacing: 2px;
  }
  .timeline-header h3 {
    padding-bottom: 0px;
  }
  .timeline-content h4 {
    font-size: 8pt;
  }
  .timeline-toggle {
    display: block;
    transition: transform 0.3s ease;
    width: 20px;
    height: 20px;
  }
  .timeline-body {
    margin: 15px 0;
  }

  /* when item is expanded */
  .timeline-item.active .timeline-toggle {
    transform: rotate(180deg);
  }
  .timeline-container {
    position: relative;
    padding: 40px 0 0;
  }

  /* turn the horizontal rule into a vertical line */
  .timeline-line {
    position: absolute;
    left: 20px; /* adjust to align with your markers */
    top: 0;
    width: 1px; /* thickness */
    height: 100%;
    border: none;
    background: #2f2f2f; /* your line color */
  }
  .timeline-marker {
    top: 6px;
    left: -30px;
  }
  .timeline-content {
    margin-left: 45px;
  }
  .timeline-item:last-child {
    padding-right: initial;
  }
  .our-liberty .timeline-item {
    min-width: initial;
  }
}
@media screen and (max-width: 1024px) {
  .product {
    display: grid;
    grid-template-columns: 1fr;
  }
  .product-gallery {
    max-width: 100%;
    position: relative;
    top: 0;
  }
}

@media screen and (max-width: 800px) {
  .herologo img {
    padding-top: 10px;
  }
  .jeffersonsignature img {
    width: 170px;
  }
  .faulkner-text {
    padding-top: 15vh;
  }
  .anniversary-crest img {
    width: 100px;
  }
  .hero-broadside-text h1 {
    font-size: 18pt;
    letter-spacing: 8px;
    padding-left: 8px;
    padding-bottom: 0px;
    padding-top: 0px;
  }

  .hero-broadside-text h3 {
    font-size: 6pt;
    font-weight: 400;
    padding-top: 0px;
  }
  .hero-tagline {
    font-size: 12pt;
  }
  .product-details-text {
    grid-column: 1;
    grid-row: 1;
    padding: 15% 10%;
    margin: auto;
    gap: 32px;
    display: flex;
    flex-direction: column;
  }

  .broadside-preview {
    flex-direction: column;
    align-items: center;
  }

  .hero-commentary {
    grid-template-columns: inherit;
  }
  .commentary-image-block img {
    object-fit: cover;
  }

  .product {
    display: grid;
    grid-template-columns: 1fr;
  }
  .product-gallery {
    max-width: 100%;
    height: 65vh;
    min-height: 400px;
  }
  .broadside-preview {
    padding-bottom: 0px;
  }
  .broadside-preview-image {
    padding: 15% 0 7%;
  }
  .broadside-preview-print img {
    height: 50vh;
    min-height: 300px;
    box-shadow: 25px 30px 55px 0px rgba(46, 46, 46, 0.31);
  }
  .broadside-commentary {
    padding: 10% 14% 15%;
  }

  .papers img {
    width: 225px;
  }
  .hall img {
    width: 225px;
  }
  .broadside-commentary h2 {
    font-size: 15pt;
    letter-spacing: 3pt;
  }
  .quote {
    max-width: initial;
  }
  .broadside-commentary-secondary {
    flex-direction: column;
  }
}

/*start greetings page*/
.greetings .navbar-color {
  background: #02324398;
}
.inquire .navbar-color {
  background: #303623e0;
}
.greetings .hero-pano .overlay {
  background: linear-gradient(147deg, rgba(0, 0, 0, 0) 31.93%, rgba(0, 0, 0, 0.6) 83.61%);
  z-index: 2;
}

.duo {
  flex: 1.2;
  font-family: "adobe-caslon-pro", serif;
}

.answers-info {
  font-family: "adobe-caslon-pro", serif;
  color: #2f2f2f;
}

.duo-intro p {
  font-family: "adobe-caslon-pro", serif;
  font-style: italic;
  text-align: center;
  padding-bottom: 3rem;
  font-size: 13pt;
  padding: 1rem 0;
}

.duo h2 {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3pt;
  font-size: 13pt;
}
.duo h3 {
  font-family: "trajan-sans-pro", serif;
  text-transform: uppercase;
  letter-spacing: 1pt;
  font-size: 9pt;
  font-weight: 500;
}

.duo-text h2 {
  padding-bottom: 12px;
}
.duo-text h3 {
  padding-bottom: 12px;
}
.duo-text p {
  padding-bottom: 15px;
}

.small-caps {
  padding-top: 2rem;
  text-transform: lowercase;
  letter-spacing: 0px;
  font-size: 13pt;
  font-feature-settings: "smcp";
  padding-bottom: 0px;
}
.small-caps p {
  padding-bottom: 0px;
  line-height: 17pt;
}

.duo-intro {
  padding-bottom: 3rem;
}

.duo-desktop-heading {
  text-align: center;
}
.duo-desktop-heading h2 {
  font-family: "garamond-premier-pro-display", serif;
  font-size: 20pt;
  letter-spacing: 7px;
}
.inquire .duo-desktop-heading h2 {
  padding-bottom: 7px;
}
@media screen and (min-width: 1024px) {
  .duo-hero-container .hero-broadside-text {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .duo-desktop-heading {
    display: none;
  }
}
/*end greetings page*/
/*start answers page*/

.questions .page-preview-low-text h2 {
  font-size: 18pt;
  text-shadow: 0 0 16px rgb(0, 0, 0, 0.8);
}
.questions .page-preview-low-text h3 {
  font-size: 16pt;
  text-shadow: 0 0 15px rgb(0, 0, 0, 0.89);
  padding-bottom: 20px;
}
.gold .btn-secondary {
  position: relative;
  font-size: 10pt;
  padding: 2px;
  max-width: 200px;
  border-bottom: none;
  display: inline-block;
  background: linear-gradient(
    135deg,
    color(srgb 0.8683 0.8132 0.7086),
    color(srgb 0.614 0.5353 0.375),
    color(srgb 0.8683 0.8132 0.7086)
  );
  box-shadow: 0 9px 23px color(srgb 0.51 0.4784 0.3876 / 0.4);
}
.gold .btn-text {
  background: #c8c5b8;
  background: #dbd9d1;
  padding: 12px;
  color: #4f3c20;
  transition: all 0.4s ease-in-out;
}
.gold .btn-text:hover {
  background: white;
  color: #2f2f2f;
}

.hero-duo {
  position: sticky;
  display: flex;
  z-index: 5;
  clip-path: inset(0 0 0 0);
}
.hero-duo-clip {
  clip-path: inset(0 0 0 0);
}

.hero-duo .hero-pano {
  flex: 1;
  order: 2;
  position: sticky;
  top: 0px;
  height: 100vh;
}
.hero-duo .hero-broadside-text h1 {
  font-size: 24pt;
}
.hero-duo .hero-broadside-text p {
  font-size: 13pt;
  text-shadow: 0 0 23px rgba(0, 0, 0, 0.67);
  font-feature-settings: "swsh";
}
.duo-scroll {
  flex: 1;
  order: 1;
  position: relative;
}
.greetings .duo-scroll {
  background: linear-gradient(#272a1f, #181b0f);
  background: linear-gradient(#153e4a, #134251);
  background: linear-gradient(#517884, #134251);
  font-family: "adobe-caslon-pro", serif;
  color: #8a936f;
  color: #f4ffff;
}
.duo-scroll-clip {
  overflow: hidden;
  height: 100vh;
}
.duo-scroll-content {
  position: relative;
  margin: 7rem auto;
  max-width: 400px;
  padding: 0 2rem;
}

@media screen and (max-width: 1024px) {
  .hero-duo .hero-pano {
    position: relative;
  }
  .questions .page-preview-low-text {
    padding-bottom: 20%;
  }
  .questions .btn-secondary {
    width: 80%;
    max-width: initial;
  }
  .hero-duo {
    flex-direction: column;
  }
  .hero-duo .hero-pano {
    order: 1;
    height: calc(80vh - 40px);
  }
  .duo-scroll-content {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.duo-hero-container .hero-text {
  z-index: 3;
}
.duo-hero-container .hero-broadside-text {
  position: absolute;
  transform: translateX(50%);
  right: 50%;
  bottom: 4rem;
  width: 70%;
  max-width: 400px;
}
.hero--pano .herobackdrop img {
  height: 100%;
  object-position: 50% 50%;
}

.duo-hero-container .hero-broadside-text h1 {
  font-family: "garamond-premier-pro-display", serif;
}
.duo-hero-container .hero-broadside-text p {
  padding-top: 1rem;
  font-family: "adobe-caslon-pro", serif;
  font-style: italic;
}

.inquire .hero-broadside-text h1 {
  padding-bottom: 5px;
}
.inquire-overlay {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(161, 151, 134, 0.35));
  z-index: 2;
}

.inquire .contact #message {
  height: 100px;
}

@media screen and (max-width: 800px) {
  .questions .page-preview-low-text {
    padding-bottom: 20%;
  }
  .questions .btn-secondary {
    width: 80%;
    max-width: initial;
  }
}
/*start contact form*/
.contact {
  background: #d3d1c7;
}
.contact .form-container {
  background: #f3f2f0;
  contain: layout paint;
}
.contact form {
  box-sizing: border-box;
  max-width: 600px; /* constrain width for readability */
  padding: 4rem; /* internal padding */
  margin: auto;

  color: #2f2f2f;

  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact form input,
.contact form textarea {
  width: calc(100% - 1.5rem); /* full width minus padding */
  padding: 0.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
}
.contact form input::placeholder,
.contact form textarea::placeholder {
  font-family: "trajan-sans-pro", serif;
  text-transform: uppercase;
  letter-spacing: 1pt;
  font-size: 8pt;
}
.contact form input:focus,
.contact form textarea:focus {
  border-color: #94815c;
  outline: none;
}
.contact form input,
.contact form textarea {
  caret-color: #94815c;
}
.contact input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: none;
}
.contact form button {
  background-color: #94815c;
  background-color: #596239;
  background-color: #6e7849;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: "trajan-sans-pro", serif;
  text-transform: uppercase;
  letter-spacing: 1pt;
}
.contact .checkbox {
  font-family: "adobe-caslon-pro", serif;
  padding: 12px;
  padding-left: 47px;
  border-radius: 8px 8px 0 0;
  background: white;
  padding-top: 17px;
}
.contact .checkbox input {
  width: 40px;
  margin-left: 20px;
  cursor: pointer;
}
.checkbox {
  position: relative;
  align-items: center;
  gap: 10px;
  padding-left: 28px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Hide native checkbox */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Custom box */
.checkbox::before {
  content: "";
  position: absolute;
  left: 0;
  top: 31%;
  width: 16px;
  height: 16px;
  border: 1px solid #2f2f2f;
  border-radius: 100%;
  background: transparent;
  transition: all 0.2s ease;
  margin-left: 17px;
}

/* Fill when checked */
.checkbox:has(input:checked)::before {
  background: #6e7849;
  border-color: #3f4529;
}

/* Optional hover */
.checkbox:hover::before {
  background: #c9d4a2;
}

.form-success {
  font-family: "EB Garamond", serif;
  text-align: center;
}
.answers-info {
  flex: 1;
  font-family: "EB Garamond", serif;
}

.answer-note {
  text-align: center;
  padding: 4rem 36px 1rem;
}

.answer-note p {
  font-size: 13pt;
  font-style: italic;
  max-width: 350px;
  margin: auto;
}
.answers {
  font-family: "adobe-caslon-pro", serif;
  color: #2f2f2f;
  max-width: 600px;
  margin: auto;
  flex: 1;
}
.answers h3 {
  font-family: "trajan-sans-pro", serif;
  text-transform: uppercase;
  letter-spacing: 1pt;
  font-size: 9pt;
  font-weight: 500;
  margin-bottom: 1rem;
  padding-bottom: 5px;
  border-bottom: solid 1px #94815c;
}
.answers h4 {
  font-weight: 400;
  font-style: italic;
  padding-bottom: 3px;
}
.answers p {
  font-size: 13pt;
  padding-bottom: 1rem;
}
.letterbox-sign-up {
  display: flex;

  color: #f2f2f2;
  border-radius: 0 0 8px 8px;
}

.contact .letterbox {
  display: grid;
  background: #f7f7f7;
  background: #e6e5e0;
  border-radius: 8px;
  margin-top: 36px;
  box-shadow: 0 8px 26px -18px rgba(0, 0, 0, 0.3);
}
.letterbox-text {
  padding: 23px;
  font-family: "EB Garamond", serif;
  font-style: italic;
  color: #45443e;
  background: #798356;
  background: #4b4f3d;
  background: #d3d1c7;
  border-radius: 0 0 0 8px;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 13pt;
  padding-bottom: 45px;
}
.contact .letterbox img {
  width: 125px;
  padding: 36px;
}

@media screen and (max-width: 800px) {
  .contact {
    flex-direction: column;
  }
  .contact form {
    position: static;
    width: 100%;
    height: auto;
    padding: 2rem;
  }
  .contact .form-container {
    height: initial;
  }
  .answers {
    padding-bottom: 5rem;
  }
  .answers-info {
    padding: 20px;
  }
  .letterbox-text {
    border-radius: 0;
    padding-bottom: 23px;
  }
  .contact .letterbox img {
    width: 50vw;
  }
  .letterbox-sign-up {
    flex-direction: column;
    width: 100%;
  }
}
/*end contact form*/
/*end answers page*/

.svgtest {
  height: 70vh;
}
.hero .svgtest svg {
  width: auto;
}
@media screen and (max-width: 800px) {
  .svgtest {
    overflow: hidden;
  }
  .hero .svgtest svg {
    width: 390%;
    margin-left: -117%;
  }
}

.book-preview {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@property --myColor1 {
  syntax: "<color>";
  initial-value: #bcbcbc;
  inherits: false;
}

@property --myColor2 {
  syntax: "<color>";
  initial-value: #ffffff;
  inherits: false;
}
.book-preview .book-main {
  background: linear-gradient(315deg, var(--myColor1), var(--myColor2));
  transition:
    --myColor1 0.5s,
    --myColor2 0.5s;
  position: relative;
}
.book-preview .book-main:hover {
  --myColor1: rgb(58, 73, 43);
  --myColor2: rgb(36, 49, 22);
}

.book-preview .book-main img {
  height: 38vh;
  margin: 20% auto;
}
.book-preview a {
  text-decoration: none;
  color: inherit;
}
.book-preview-text {
  display: flex;
  align-items: center;
  background: #e8c26a;
}
.preview-price {
  padding: 15px;
  font-family: "Quattrocento", serif;
  font-size: 20px;
  color: #5a5a5a;
  height: 100%;
}
.book-preview-title {
  padding: 12px;
  background: #e5e5e5;
  width: 100%;
  color: #5a5a5a;
}
.book-preview-title h1 {
  font-family: "EB Garamond";
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 400;
}
.book-preview-text h2 {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 300;
  text-transform: uppercase;
  margin-top: 6px;
}
.book-preview .journey {
  background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(195, 195, 195) 100%);
}
.book-preview .journey:hover {
  background: linear-gradient(135deg, rgba(40, 58, 72, 1) 0%, rgb(22, 37, 48) 100%);
}
.book-preview .constitution {
  background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(195, 195, 195) 100%);
}
.new {
  background: #e8c26a;
  border: solid 2px #b99747;
  position: absolute;
  right: 0;
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #997a32;
  font-weight: 500;
  text-transform: uppercase;
}
.sale {
  background: #b94334;
  border: solid 2px #9f392c;
  position: absolute;
  right: 0;
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #5f231b;
  font-weight: 500;
  text-transform: uppercase;
}
@media screen and (max-width: 800px) {
  .book-preview {
    grid-template-columns: 1fr;
  }
}

/* start of book page */

.pano {
  grid-column: 1;
  grid-row: 1;
}
.pano img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  grid-column: 1;
  grid-row: 1;
}
.booklogo {
  width: 20%;
  max-width: 400px;
  min-width: 260px;
  padding-bottom: 50px;
  margin: auto;
  grid-column: 1;
  grid-row: 1;
}
.book-main {
  display: grid;
  background: linear-gradient(209deg, rgb(46, 63, 28) 0%, rgb(20, 26, 14) 100%);
  overflow: hidden;
}
.book-main img {
  height: 53vh;
  align-items: center;
  -webkit-box-shadow: 25px 30px 55px 0px rgba(0, 0, 0, 0.51);
  -moz-box-shadow: 25px 30px 55px 0px rgba(0, 0, 0, 0.51);
  box-shadow: 25px 30px 55px 0px rgba(0, 0, 0, 0.51);
  margin: 16% auto;
}

@media screen and (max-width: 800px) {
  .bookpage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 70vh auto;
    overflow: hidden;
  }
}
.journeybackground {
  padding: 0px;
  margin: 0px;
  background-image: linear-gradient(to bottom right, #283947, #0e161f);
  height: 100vh;
}
.journey {
  background: #091c2b;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  color: #38646e;
  font-family: EBGaramond;
}

.booklogo {
  width: 15%;
  padding-bottom: 50px;
  margin: auto;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  padding: 0px;
}
@media screen and (max-width: 800px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

.right {
  background: linear-gradient(209deg, rgba(40, 58, 72, 1) 0%, rgba(17, 26, 36, 1) 100%);
}
.item-text {
  display: grid;
  align-items: center;
}
.item-info {
  margin: 12%;
}
.item-name h1 {
  font-family: "EB Garamond", serif;
  font-size: 14pt;
  font-weight: 400;
  color: #5b5b5b;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.item-name h2 {
  font-size: 10pt;
  font-family: "Montserrat";
  color: #757575;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1pt;
  margin-bottom: 10px;
}

.item-name h3 {
  font-size: 7pt;
  font-family: "Montserrat";
  color: #757575;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1pt;
  margin-bottom: 10px;
}
.price {
  display: flex;
  align-items: center;
  gap: 4px;
}
.price-amount {
  font-family: "Quattrocento", serif;
  font-weight: 100;
  color: rgb(72, 72, 72);
  font-size: 17pt;
  margin: 10px 0;
  letter-spacing: 1pt;
}
.product-details .price {
  justify-content: center;
  text-align: center;
}
.product-details .price h1 {
  color: #2f2f2f;
}
.shipping {
  font-family: inherit;
  font-weight: 300;
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 1pt;
}
.broadside-buy-button-container {
  max-width: 515px;
  margin: auto;
}
/*start of line header*/
.line-header {
  margin: auto;
}

.line-title {
  overflow: hidden;
  text-align: center;
  position: relative;
}

.line-header .line-title::before,
.line-header .line-title::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 1px;
  width: 50%;
  background-color: #d1d1d1;
  position: relative;
}

.line-header .line-title::before {
  margin-left: -50%;
  right: 1em;
}

.line-header .line-title::after {
  margin-right: -50%;
  left: 1em;
}
/* Add gradient background only for animated heading */
.line-header .line-title.animate-lines::before,
.line-header .line-title.animate-lines::after {
  background-image: linear-gradient(to right, #d1d1d1 50%, #2f2f2f 50%);
  background-size: 200% 100%;
  background-position: left center;
  background-color: unset; /* Remove solid background */
  transition: background-position 0.8s ease;
}

.line-header .line-title.animate-lines::after {
  background-image: linear-gradient(to left, #d1d1d1 50%, #2f2f2f 50%);
  background-position: right center;
}

.line-header .line-title.animate-lines:hover::before {
  background-position: right center;
}

.line-header .line-title.animate-lines:hover::after {
  background-position: left center;
}
.line-header .line-title.animate-lines:hover {
  color: #2f2f2f;
}
/*end line header*/
.button-price {
  background: green;
}
.item-info button {
  border-radius: 8px;
  font-family: "Montserrat";
  text-transform: uppercase;
  font-size: 8pt;
  letter-spacing: 1pt;
  padding: 10px;
  display: flex;
  align-items: center;
  font-weight: 400;
  color: white;
}
.item-info p {
  color: #757575;
  font-size: 15px;
  line-height: 25px;
  font-weight: 200;
  letter-spacing: 0.3pt;
  margin: 20px 0;
}

.center p {
  font-family: EB Garamond;
  color: white;
  padding: 50px;
  padding-top: 0px;
  line-height: 15pt;
  font-size: 12pt;
  text-align: justify;
}
/*start of journey page edits*/
.journey {
  background: linear-gradient(209deg, rgba(15, 26, 37, 1) 0%, rgba(27, 40, 50, 1) 100%);
}
.journey h1,
.journey h2,
.journey h3,
.journey p {
  color: #bce8ff;
}

.journey button {
  background: #c7b460;
  border: solid #ffe294 3px;
  border: solid #b1913a 3px;
  margin: 10px 0px;
}
button .fa-brands {
  font-size: 20px;
  padding-right: 10px;
}

.journey button:hover .fa-brands {
  color: white;
}
.journey button:hover {
  cursor: pointer;
  background: #52ae49;
  background: #ff9900;
  border: solid #1e532a 3px;
  border: solid #ff9900 3px;
  color: white;
}

@media screen and (max-width: 800px) {
  .line-header {
    margin: auto;
  }
  .item-info button {
    width: 100%;
    justify-content: center;
  }
}
/*end of journey page edits*/

/*start of policies page*/
.policies {
  font-family: "EB Garamond", serif;
  color: #2f2f2f;
  color: #3c3c3c;
  background: linear-gradient(to top, #fafafa, white);
}
.policy-nav {
  background: #e9e9e9;
  margin-bottom: 5rem;
  color: #2f2f2f;
}
.policy-nav ul {
  display: flex;
  gap: 1rem;
  padding: 0;
  list-style: none;
  justify-content: space-between;
  max-width: 550px;
  margin: auto;
  padding: 20px;
  font-family: "trajan-sans-pro", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1pt;
  font-size: 8pt;
}

.underline-hover {
  position: relative;
  color: #000; /* link color */
  text-decoration: none;
}

.underline-hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  height: 1px; /* thickness of underline */
  width: 0;
  background-color: #000; /* underline color */
  transition: width 0.3s ease;
}

.underline-hover:hover::after {
  width: 100%;
}
.policy-section {
  margin-top: 3rem;
  max-width: 550px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem;
  line-height: 1.65;
}
.policy-header {
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px #2f2f2f;
  margin-bottom: 20px;
}

.policy-section h2 {
  text-transform: uppercase;
  font-size: 14pt;
  letter-spacing: 2pt;
  font-weight: 500;
}
.policy-section h3 {
  text-transform: uppercase;
  font-size: 11pt;
  letter-spacing: 1pt;
  font-weight: 500;
}
.policy-section p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
.policy-section ul {
  list-style: none;
}

.policy-section h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.policy-section h4 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-family: 11pt;
  font-weight: 400;
  font-style: italic;
}

/* Paragraphs */
.policy-section p {
  margin-top: 0;
  margin-bottom: 0.7rem;
}
.policy-header p {
  margin-bottom: 0px;
}
/* Lists */
.policy-section ul,
.policy-section ol {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.policy-section ul {
  margin-top: 0px;
}

/*end of policies page*/
/*start of robinhood page edits*/
.robinhood {
  background: linear-gradient(209deg, rgb(46, 63, 28) 0%, rgb(20, 26, 14) 100%);
  background: linear-gradient(209deg, rgb(46, 63, 28), rgb(31, 46, 16));
}
.robinhood h1,
.robinhood h2,
.robinhood h3,
.robinhood p {
  color: #8ba661;
  color: #c6e788;
}

.robinhood button {
  background: #e65c27;
  border: solid #9b331b 3px;
}
.robinhood button:hover {
  cursor: pointer;
  background: #52ae49;
  border: solid #1e532a 3px;
  color: white;
}
/*end of robinhood page edits*/
.left {
  background: linear-gradient(209deg, rgba(15, 26, 37, 1) 0%, rgba(27, 40, 50, 1) 100%);
  overflow: hidden;
}
.left img {
  width: 100%;
  object-fit: contain;
  height: 65vh;
  padding-left: 30px;
}

/*this is the start of the welcome page*/
.welcome {
  display: grid;
  height: 85vh;
  align-content: center;
  min-height: 400px;
}
.letterbox {
  display: grid;
  margin: auto;
}
.letterbox img {
  width: 250px;
  margin: auto;
}
.welcome h1 {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 14pt;
  padding-top: 30px;
  font-weight: 400;
  color: #5a5a5a;
  text-align: center;
}
.welcome p {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 14pt;
  color: #b9b7b7;
  text-align: center;
}
#mlb2-38053777.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
#mlb2-38053777 .ml-form-successContent p {
  padding-top: 0px;
  font-size: 17px !important;
  font-family: "EB Garamond", serif !important;
  color: #5a5a5a;
  font-style: italic;
  max-width: 372px !important;
  text-align: center !important;
  margin: auto !important;
  padding-bottom: 15px !important;
}
#mlb2-38053777 .ml-form-successContent p:last-child {
  font-size: 13pt !important;
  font-style: normal !important;
}

#mlb2-38053777.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
#mlb2-38053777.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
  padding-top: 0px !important;
}
#mlb2-38053777.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent,
#mlb2-38053777.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
  margin: 0 !important;
}
#mlb2-38053777.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p {
  max-width: 250px !important;
  padding-bottom: 20px !important;
}

.welcomelogo {
  display: grid;
}
.welcomelogo a {
  display: flex;
}
.welcomelogo img {
  width: 150px;
  margin: auto;
}
/* broadside edge option css*/
.edge-options {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 15px;
}

.edge-option {
  padding: 10px 15px;
  border: 1px solid #b4b4b4;
  cursor: pointer;
  border-radius: 8px;
  text-align: center;
  text-transform: uppercase;
  font-size: 8pt;
  letter-spacing: 1pt;
  color: #333;
  width: 50%;
  transition: border-color 0.3s ease;
}

.edge-option.selected {
  background-color: #333;
  color: white;
  border-color: #333;
}
.declaration-buttons .edge-option.selected {
  color: white;
  background-color: #807444;
  background-color: #595936;
  border: solid #e9ddaa 1px;
}

.edge-option:hover {
  background-color: white;
  color: black;
  border: solid 1px black;
}
.declaration-buttons .edge-option:hover {
  background-color: white;
  color: black;
  border: solid 1px #807444;
}
.edge-option:active {
  background-color: #333; /* Darker shade while being clicked */
  color: white; /* Text color during active click */
  border-color: #333; /* Change border color when active */
}
.edge-option.selected:hover {
  background-color: #333;
  color: white;
  border-color: #333;
}

/*quantity input*/
.quantity-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  border-radius: 30px;
  padding: 10px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  width: fit-content;
  margin: 0 auto;
}

.product-details .quantity-btn {
  background: none;
  border: none;
  font-size: 24px;
  font-weight: bold;
  color: #999;
  cursor: pointer;
  outline: none;
}

.product-details .quantity-btn:active {
  color: #333;
}

/*start scroll swap section*/

.scroll-swap-content {
  display: flex;
  align-items: flex-start;
}

.scroll-swap-image {
  flex: 1;
  position: sticky;
  top: 70px;
  height: calc(100dvh - 70px);
  overflow: hidden;
}

.swap-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 1;
}

.swap-image.visible {
  opacity: 1;
  z-index: 2;
}

.scroll-swap-text-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.scroll-swap-text {
  height: calc(100vh - 70px);
  display: flex;
  align-items: center;
}
.scroll-swap-text .broadside-commentary {
  width: 60%;
  margin: auto;
}
/*end scroll swap section*/
/*start snap-fullscreen*/
.snap-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.snap-slide {
  position: relative;
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* IMAGE (replaces background) */
.slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 900ms ease,
    transform 1400ms ease;
  z-index: 0;
}

/* dark overlay */
.snap-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 1;
}

.slide-content {
  position: relative;
  z-index: 2;
  width: min(760px, 86vw);
  text-align: center;
  padding: 2rem;

  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 750ms ease,
    transform 750ms ease;
}

.slide-content h2 {
  margin: 0 0 1rem;
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  font-weight: 400;
  line-height: 1;
}

.slide-content p {
  margin: 0 auto;
  max-width: 560px;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.6;
}

/* ACTIVE STATE */
.snap-slide.is-active .slide-bg {
  opacity: 1;
  transform: scale(1);
}

.snap-slide.is-active .slide-content {
  opacity: 1;
  transform: translateY(0);
}

/* DOT NAV */
.snap-dots {
  position: fixed;
  top: 50%;
  left: 28px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 20;
}

.snap-dots button {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
  transition:
    background 250ms ease,
    transform 250ms ease,
    height 250ms ease;
}

.snap-dots button.active {
  height: 28px;
  background: white;
  transform: scale(1.08);
}

.snap-dots button:hover {
  background: white;
}

@media (max-width: 700px) {
  .snap-dots {
    left: 14px;
  }
}
/*end snap-fullscreen*/
/* SECTION */
.snap-section {
  position: relative;
  background: linear-gradient(to top, white, color(srgb 0.8117 0.8118 0.8119));
}

/* STICKY VIEWPORT */
.image-snap-container {
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  overflow: hidden;
  z-index: 2;
}

/* SCROLL DISTANCE */
.snap-track {
  position: relative;
  z-index: 1;
}

.snap-step {
  height: calc(100vh - 70px);
}

/* IMAGES */
.image-stack {
  position: absolute;
  inset: 0;
  width: 60vw;
}

.image-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 0.8s ease,
    transform 1.2s ease;
}

.image-stack img.active {
  opacity: 1;
  transform: scale(1);
}

/* TEXT OVERLAY */
.text-overlay {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 5;
}

.text-box {
  background: #f7f7f7;
  padding: 2px;
  backdrop-filter: blur(35px);
  width: 40vw;
  height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-item {
  display: none;
}

.text-item.active {
  display: block;
  animation: fadeUp 0.6s ease;
  text-align: center;
  padding: 10%;
  max-width: 350px;
}

.text-item h2 {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10pt;
  letter-spacing: 1pt;
  color: #303030;
  margin: 0;
  padding-bottom: 8px;
  text-align: center;
}

.text-item h3 {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 7pt;
  letter-spacing: 1pt;
  color: #303030;
  margin: 0;
  text-align: center;
  padding-bottom: 12px;
}

.text-item p {
  font-family: adobe-caslon-pro, serif;
  color: rgb(78, 78, 78);
  font-size: 12pt;
  padding-top: 12px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 22pt;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .image-snap-container {
    top: 58px;
    height: calc(100dvh - 58px);
  }

  .snap-step {
    height: calc(100dvh - 58px);
  }

  .image-stack {
    width: 100vw;
  }

  .text-overlay {
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
  }

  .text-box {
    width: 100vw;
    height: auto;
    min-height: 34vh;
  }
}

/*end snap image/text section*/

/*start scroll story*/
.story-scroll {
  position: relative;

  min-height: calc((100vh - 70px) + 1px);
  background: #fff;
}

.story-sticky {
  position: sticky;
  top: 70px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: calc(100vh - 70px);
  background: #fff;
  overflow: hidden;
}

.image-panel,
.copy-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.image-panel {
  background: white;
}

.story-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 720ms ease,
    transform 1400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.story-image.is-active {
  opacity: 1;
  transform: scale(1);
}

.copy-panel {
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 72px);
  background: linear-gradient(262deg, white, #f7f7f7);
  box-shadow: 0 0 37px 20px rgba(0, 0, 0, 0.22);
}

.copy-stage {
  position: relative;
  width: min(100%, 289px);
  display: grid;
  place-items: center;
}

.copy-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition:
    opacity 420ms ease,
    transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.copy-card.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.copy-card svg {
  padding-bottom: 5px;
}
.copy-card h2,
.copy-card h3,
.copy-card p {
  margin: 0;
  max-width: 24rem;
}

.copy-card h2 {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11pt;
  letter-spacing: 1pt;
  color: #303030;
  margin: 0;
  padding-bottom: 3px;
  text-align: center;
}

.copy-card h3 {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 7pt;
  letter-spacing: 1pt;
  color: #303030;
  margin: 0;
  text-align: center;
  padding-bottom: 12px;
}

.copy-card p {
  font-family: adobe-caslon-pro, serif;
  color: rgb(78, 78, 78);
  font-size: 12pt;
  padding-top: 12px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 22pt;
}

.story-dots {
  position: absolute;
  right: 5%;
  bottom: 5%;
  display: grid;
  gap: 14px;
  z-index: 3;
}

.story-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid #b5b5b5;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition:
    background 220ms ease,
    transform 220ms ease;
}

.story-dot.is-active {
  background: #b5b5b5;
}
.story-mobile-panels {
  display: none;
}

@media (max-width: 760px) {
  .story-scroll {
    min-height: 0;
    height: auto;
    background: #fff;
  }

  .story-sticky {
    display: none;
  }

  .story-mobile-panels {
    display: grid;
  }

  .story-mobile-panel {
    display: grid;
    grid-template-rows: 38svh auto;
    background: #fff;
  }

  .story-mobile-image {
    width: 100%;
    height: 38svh;
    object-fit: cover;
    display: block;
  }

  .story-mobile-panel .copy-card {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    min-height: auto;
    padding: 36px 24px 48px;
    background: linear-gradient(262deg, white, #f7f7f7);
  }

  .story-dots {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-image,
  .copy-card,
  .story-dot {
    transition: none;
  }
}
/*end scroll story*/
/*start of printing history*/
.printing-container {
  gap: 32px;
  max-width: 700px;
  margin: auto;
  color: #2f2f2f;
  text-align: center;
}
.museum {
  padding: 17px 0 20px;
}
.museum-image {
  width: 175px;
  height: 62px;
}
.museum h2 {
  text-align: center;
  font-family: trajan-sans-pro;
  font-weight: 300;
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 7px;
}
.museum p {
  font-family: "adobe-caslon-pro", serif;
  color: #4e4e4e;
  text-align: center;
  max-width: 380px;
  margin: auto;
  font-style: italic;
}
.printing-highlight {
  text-align: center;
}
.highlights-panels {
  display: flex;
  justify-content: space-evenly;
  max-width: 1500px;
}
.printing-highlight svg {
  padding-bottom: 5px;
  height: 30px;
}
.printing-highlight h2 {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 8pt;
  letter-spacing: 2px;
  padding-left: 2px;
  color: #303030;
  margin: 0;
  text-align: center;
}
.printing-highlight h3 {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 7pt;
  letter-spacing: 1pt;
  color: #303030;
  margin: 0;
  text-align: center;
  padding-bottom: 12px;
}

.printing-highlight p {
  font-family: adobe-caslon-pro, serif;
  color: rgb(78, 78, 78);
  font-size: 12pt;
  padding-top: 12px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 22pt;
}

/*end of printing history*/

.broadside-details {
  display: flex;
  justify-content: space-between;
  padding: 20px 0 40px;
  max-width: 500px;
  margin: auto;
}

.broadside-highlights svg {
  height: 40px;
  padding-bottom: 5px;
}
.broadside-highlights h3 {
  font-family: "trajan-sans-pro", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 9pt;
  padding-bottom: 5px;
}
.broadside-highlights p {
  font-style: italic;
}
.product-details-preview .broadside-details {
  margin-bottom: 0px;
  padding: 30px 10%;
  max-width: 700px;
  margin: auto;
}
.broadside-details div {
  display: flex;
  flex-direction: column;
}
:root {
  --icon-color: #2f2f2f;
}
.detail-cards {
  display: flex;
  justify-content: center;
  margin: 2rem;
  gap: 2rem;
}
.paper {
  width: 50px;
  height: 33px;
  fill: var(--icon-color);
  display: flex;
  margin: auto;
}
.museum-icon {
  width: 100px;
  height: 33px;
  fill: var(--icon-color);
  display: flex;
  margin: auto;
}
.cotton {
  display: flex;
  width: 25px;
  height: 31px;
  fill: var(--icon-color);
  margin: auto;
  rotate: -45deg;
}
.archival {
  display: flex;
  width: 35px;
  height: 22px;
  margin: auto;
  fill: var(--icon-color);
}
.eagle {
  display: flex;
  width: 27px;
  height: 30px;
  margin: auto;
  fill: var(--icon-color);
}
.printing-history .navbar-color {
  background: #1a1a1ae8;
}
.printing-history .herobackdrop {
  background: white;
}
.printing-history .herobackdrop .overlayimage {
  opacity: 0.7;
}
.printing-history .hero-broadside-text h1 {
  text-shadow: none;
}

@media screen and (max-width: 800px) {
  .printing-history .hero-container-main {
    background: linear-gradient(black, white);
  }
  .printing-history .hero-broadside-text {
    padding: 0 10%;
  }
  .section-container {
    padding: 20% 0;
  }
  .section-heading {
    padding: 0;
  }
  .section-heading h2 {
    font-size: 14pt;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 5pt;
    color: rgb(45, 45, 45);
    text-align: center;
    padding-bottom: 0px;
  }
  .section-heading h3 {
    font-size: 8pt;
    font-weight: 400;
    padding-bottom: 0;
  }
  .section-quote {
    padding: 20px 15%;
  }
  .section-heading p {
    font-size: 13pt;
    max-width: 100%;
    padding: 20px 15%;
  }
  .section-drop-cap:first-child:first-letter {
    font-size: 58px;
    line-height: 78px;
  }
  .museum p {
    padding: 0 10%;
  }
  .printing-highlight h2 {
    font-size: 6pt;
    letter-spacing: 1px;
  }
  .kicker {
    display: none;
  }
}
/*start info scroll*/

.info-scroll {
  --nav-height: 70px;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

.info-scroll img {
  display: block;
  width: 100%;
}

.info-scroll {
  --card-count: 4;
  position: relative;
  height: calc((100vh - var(--nav-height)) * var(--card-count));
}
.info-scroll *,
.info-scroll *::before,
.info-scroll *::after {
  box-sizing: border-box;
}
.info-pin {
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  overflow: hidden;
}

.info-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(450px, 40vw);
  height: 100%;
  pointer-events: none;
}

.image-panel {
  position: relative;
  margin: 0;
  opacity: 0;
  background: #111;
  overflow: hidden;
  will-change: opacity;
}

.image-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transform-origin: center;
  will-change: transform;
}

.copy-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(28px, 5vw, 78px);
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.copy-panel h2 {
  font-family: "adobe-caslon-pro", serif;
  font-size: 14pt;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 5px;
  padding-left: 5px;
  color: rgb(45, 45, 45);
  text-align: center;
  padding-bottom: 0px;
}

.copy-panel h3 {
  font-family: trajan-sans-pro, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 9pt;
  letter-spacing: 1pt;
  color: #303030;
  margin: 0;
  text-align: center;
  padding-bottom: 12px;
}

.copy-panel p {
  max-width: 300px;
  color: #2f2f2f;
  font-family: adobe-caslon-pro, serif;
  color: rgb(78, 78, 78);
  font-size: 12pt;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 22pt;
  padding-bottom: 12px;
}
.copy-panel p:last-child {
  padding-bottom: 0;
}
.learn-more {
  width: 100%;
}
.learn-more p {
  font-family: "trajan-sans-pro", sans-serif;
  text-align: center;
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 2px;
  max-width: initial;
}
.learn-more-links {
  display: flex;
  justify-content: space-evenly;
}
.learn-more-links a {
  font-family: "trajan-sans-pro", sans-serif;
  text-align: center;
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #2f2f2f;
  border-bottom: 1px solid lightgray;
  padding-bottom: 4px;
}
.animated-link {
  position: relative;
  text-decoration: none;
  color: #111;
}

.animated-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;

  width: 100%;
  height: 1px;
  background: #2f2f2f;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.animated-link:hover::after {
  transform: scaleX(1);
}

.kicker {
  position: absolute;
  z-index: 4;
  bottom: 18px;
  left: 40px;

  margin: 0 0 14px;
}
.kicker p {
  color: #2f2f2f;
  font-size: 8pt;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: "trajan-sans-pro", sans-serif;
}
.progress-dots {
  position: absolute;
  right: clamp(18px, 3vw, 42px);
  bottom: clamp(18px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 4;
}

.dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid #2f2f2f;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition:
    background 180ms ease,
    transform 180ms ease,
    width 180ms ease;
}

.dot.is-active {
  width: 9px;
  background: #2f2f2f;
}

@media (max-width: 760px) {
  .info-scroll {
    height: auto;
  }

  .info-pin {
    position: static;
    display: grid;
    height: auto;
    overflow: visible;
  }

  .info-card {
    position: static;
    display: block;
    height: auto;
    overflow: hidden;
    background: var(--paper);
    pointer-events: auto;
  }

  .image-panel,
  .copy-panel {
    opacity: 1;
    transform: none;
  }
  .image-panel {
    background: white;
  }
  .image-panel img {
    height: 40vh;
    object-fit: cover;
    transform: none;
    opacity: 0.9;
  }

  .copy-panel {
    padding: 20% 13%;
    pointer-events: auto;
  }
  .copy-panel h2 {
    font-size: 12pt;
    letter-spacing: 4px;
    padding-left: 4px;
  }
  .copy-panel h3 {
    font-size: 8pt;
  }
  .progress-dots {
    display: none;
  }
  .kicker {
    bottom: 12px;
    left: 12px;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/*end info scroll*/
/*contact auto fill background change safari and chrome*/
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: white !important;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  box-shadow: 0 0 0px 1000px white inset !important;
  border-radius: 8px;
}

.edge-options {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.edge-option {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
}

.edge-option.selected {
  background-color: #333;
  color: white;
  border-color: #333;
}
.contact input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}