/* =====================================================================
   AT-HP-2026-CSS-101326  (clean)  — custom creative tweaks for the 10/13/2026 HP
   Base template CSS lives in AT-HP-2024-CSS-Constantv6.css (unchanged).
   Rules are grouped by HP template; see HP Template Library/_audit for details.
   ===================================================================== */

/* ===================================== PAGE SHELL & BASE ===================================== */
/* new g3 */
.hp-shell a {
  text-decoration: none;
}
/* Editorial imagery
only — never force Dressipi / RFK product tiles (stretches them). */
.hp-shell img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 1023px) {
  .g3-hp p {
    font-size: 22px;
    font-weight: 400;
  }
}
@media (min-width: 1024px) {
  .g3-hp p {
    font-size: 22px;
    font-weight: 400;
  }
}
.col-lg-3 {
  flex: 0 0 8%;
}

/* ===================================== TYPOGRAPHY & FONTS ===================================== */
/* random css */
.small-symbol {
  font-size: 0.6em;
  vertical-align: 0.15em;
}

/* ===================================== CTAS (BUTTONS & UNDERLINE LINKS) ===================================== */
/* 10/13: every CTA uses the AT design system (at-design-system.css, linked after this file):
     solid buttons    → class="at-btn"   (white, #111, 14px · 210×44 @1680 / 11.44px · 28px tall @390)
     underline links  → class="at-link"  (15px @1680 / 11.44px @390, underline)
   Size, weight, colour, min-width and padding all come from the design system — don't re-size them here.
   Its unit lives on :root, so the trio captions can't compound any more (the old clamp() fix is gone).
   This file only handles layout around the CTAs (margins, gaps, alignment). */
.g3-hp a.at-btn,
.g3-hp a.at-link,
.g3-hp span.at-link {
  margin: 0;
}

/* ===================================== MOBILE BUBBLE CATEGORIES ===================================== */
.g3-hp .g3-mobile-cats__slider a {
  text-decoration: underline;
  font-size: 11px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.0067em;
  text-underline-offset: 4px;
  color: #111;
  background: transparent;
}

/* ===================================== CATEGORY QUICKLINK RAIL ===================================== */
.hp-rail {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 45px;
  padding: 25px 6.27% 0;
  justify-content: safe center;
  white-space: nowrap;
}
.hp-rail::-webkit-scrollbar {
  display: none;
}
.g3-hp .hp-rail a {
  color: #111;
}
@media (min-width: 1024px) {
  .hp-rail {
    overflow: visible;
    justify-content: center;
    gap: 8.125em;
    padding: 3em 0 0 0;
  }
}

/* ===================================== HP MAIN HERO (SC-3 / TS-5 / HP-HERO) ===================================== */
/* 10/13 editorial hero — live headline + 2 solid CTAs over a no-copy photo.
   Measured from creative 4388_1T (desktop, 1680 board) / m-1T-OctNA (mobile, 390 board). */
.hpMain101326 .g3-v-center {
  padding: 0 0 12.5em 0;
}
.hpMain101326 .g3-hero__sc-3__txt h1 {
  color: #fff;
  font-size: 8em;
  line-height: 1;
}
.hpMain101326 .g3-hero__sc-3__txt .g3-ctas {
  display: flex;
  justify-content: center;
  gap: 3.45em;
  margin-top: 2.7em;
}
.hpMain101326 .g3-hero__sc-3__txt a.at-btn {
  margin: 0;
}
@media (min-width: 1024px) {
  .hpMain101326 .g3-img-overlay {
    width: 50%;
  }
  .hpMain101326 .g3-v-center {
    justify-content: flex-start;
    padding: 0 0 5.15em 3.6em;
  }
  .hpMain101326 .g3-hero__sc-3__txt {
    text-align: left;
  }
  .hpMain101326 .g3-hero__sc-3__txt h1 {
    font-size: 4.1em;
    letter-spacing: -0.015em;
    padding-bottom: 0;
    white-space: nowrap;
  }
  .hpMain101326 .g3-hero__sc-3__txt .g3-ctas {
    justify-content: flex-start;
    gap: 2.25em;
    margin-top: 1.75em;
  }
}

/* ===================================== FLUID PROMO BANNERS — STANDARD ===================================== */
/* Rules: built on Constant's .g3-promo (height:auto). No height / vw heights, no position:absolute,
   no px sizes, no transforms. Everything in em so it scales with .g3-hp; the copy + padding set the height.
   Disclaimer stays in normal flow (Constant puts it under .g3-promo__content, centered = under the offer). */

/* ---------- TOP BANNER 10/13 — "Sale's on Sale": script + sub | offer | 2 CTAs ---------- */
.hpTopBanner101326 .g3-promo__content {
  padding: 2.6em 6% 0 6%;
}
.hpTopBanner101326 .hp-script {
  display: block;
  font-family: "Ethic Serif", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.4em; /* of the left <p> — tuned with real Ethic Serif */
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #e8d68f;
}
.hpTopBanner101326 .g3-promo__txt--left p {
  font-size: 1.95em;
  letter-spacing: 0.14em;
  line-height: 1.5;
  padding-bottom: 0;
}
.hpTopBanner101326 .g3-promo__txt--left .hp-sub {
  display: block;
  margin-top: 1em;
  font-size: 0.85em;
}
.hpTopBanner101326 .g3-promo__txt--center {
  padding: 1.2em 0 1.2em 0;
}
.hpTopBanner101326 h2 {
  font-size: 2.75em;
  line-height: 1.2;
  padding-bottom: 0;
}
.hpTopBanner101326 .g3-promo__txt--right {
  width: auto;
  justify-content: center;
  gap: 3em;
}
.hpTopBanner101326.g3-promo a.at-link {
  margin: 0;
  padding-bottom: 0;
}
.hpTopBanner101326.g3-promo .g3-disclaimer {
  margin-top: 2em;
  padding-bottom: 1.8em;
  font-size: 1.15em;
}
@media (min-width: 1024px) {
  .hpTopBanner101326 .g3-promo__content {
    width: 100%;
    padding: 1.6em 2.7em 0;
  }
  .hpTopBanner101326 .g3-promo__txt--left {
    padding-left: 0;
  }
  .hpTopBanner101326 .g3-promo__txt--left p {
    font-size: 0.8em;
    line-height: 1.35;
    padding-left: 2em;
  }
  .hpTopBanner101326 .hp-script {
    font-size: 2.45em;
  }
  .hpTopBanner101326 .g3-promo__txt--left .hp-sub {
    margin-top: 0;
    font-size: 1em;
  }
  .hpTopBanner101326 .g3-promo__txt--center {
    padding: 0;
  }
  .hpTopBanner101326 h2 {
    font-size: 1.4em;
  }
  .hpTopBanner101326 .g3-promo__txt--right {
    display: flex;
    justify-content: flex-end;
    padding-top: 0;
    gap: 2.2em;
  }
  .hpTopBanner101326.g3-promo .g3-disclaimer {
    margin-top: 0.4em;
    padding-bottom: 1.5em;
    font-size: 0.56em;
  }
}

/* ---------- BOTTOM BANNER 10/13 — left offer + legal | right CTA ---------- */
.hpBotBanner101326 .g3-promo__content {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2em;
  padding: 3.2em 6.4% 3.2em 6.4%;
}
.hpBotBanner101326 .g3-promo__txt--left {
  width: auto;
  text-align: left;
  white-space: normal;
}
.hpBotBanner101326 h2 {
  font-size: 2.6em;
  line-height: 1.2;
  padding-bottom: 0;
}
.hpBotBanner101326 h2 > sup {
  font-size: 0.5em;
  vertical-align: 0.3em;
}
.hpBotBanner101326 .g3-promo__txt--left .g3-disclaimer {
  margin: 0.7em 0 0 0;
  padding: 0;
  font-size: 1.3em;
  text-align: left;
}
.hpBotBanner101326 .g3-promo__txt--right {
  width: auto;
  display: block;
}
.hpBotBanner101326.g3-promo a.at-link {
  margin: 0;
  padding: 0;
}
@media (min-width: 1024px) {
  .hpBotBanner101326 .g3-promo__content {
    width: 100%;
    padding: 1.7em 2.5em 1.5em 3.9em;
  }
  .hpBotBanner101326 .g3-promo__txt--left {
    padding-left: 0;
  }
  .hpBotBanner101326 h2 {
    font-size: 1.4em;
  }
  .hpBotBanner101326 .g3-promo__txt--left .g3-disclaimer {
    margin-top: 0.9em;
    font-size: 0.56em;
  }
  .hpBotBanner101326 .g3-promo__txt--right {
    padding-top: 0;
  }
}

/* TODAY ONLY ⇄ NEW MARKDOWNS — CSS-only swap every 2s (4s loop: fade out, then the other fades in — never both at once).
   Both words sit in the same grid cell, so the box is always as wide as the longer one — no layout jump.
   Reduced-motion users just see TODAY ONLY. */
.hp-swap {
  display: inline-grid;
}
.hp-swap > span {
  grid-area: 1 / 1;
  animation: hp-swap-fade 4s infinite;
}
.hp-swap > span:nth-child(2) {
  animation-delay: -2s;
}
@keyframes hp-swap-fade {
  0% {
    opacity: 0;
  }
  3%,
  45% {
    opacity: 1;
  }
  46%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp-swap > span {
    animation: none;
  }
  .hp-swap > span:nth-child(2) {
    visibility: hidden;
  }
}

/* shared promo marks */
.cents {
  font-size: 0.55em;
  vertical-align: 0.65em;
}

/* ===================================== TOP PROMO BANNER (SINGLE G3-PROMO) ===================================== */
.g3-promo__txt--center > h2 > sup {
  font-size: 0.5em;
  vertical-align: 0.3em;
}
@media (min-width: 1024px) {
  .g3-promo__txt--center > h2 > sup {
    font-size: 0.49em;
    vertical-align: 0.2em;
  }
}

/* ===================================== TRIO EDITORIAL TILES ===================================== */
.g3-hp .hp-trio--feature {
  margin-top: 35.5px;
}
.g3-hp .hp-trio--editorial {
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .g3-hp .hp-trio--feature {
    margin-top: 5.5em;
  }
  .g3-hp .hp-trio--editorial {
    margin-top: 7.0625em;
  }
}
.g3-hp .hp-trio {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.g3-hp .hp-trio::-webkit-scrollbar {
  display: none;
}
.g3-hp .hp-trio__item {
  display: block;
  min-width: 0;
}
.g3-hp .hp-trio__item > img {
  object-fit: cover;
}
.g3-hp .hp-trio__item .hp-tile__cta {
  display: block;
}
@media (min-width: 1024px) {
  .g3-hp .hp-trio {
    overflow: visible;
    gap: 0;
    justify-content: space-between;
  }
  .g3-hp .hp-trio__item {
    flex: 0 0 auto;
  }
}
.g3-hp .hp-trio--feature {
  align-items: flex-end;
}
@media (max-width: 1023px) {
  .g3-hp .hp-trio--feature {
    gap: 5%;
    padding: 0px 6%;
  }
  .g3-hp .hp-trio--feature .hp-trio__item {
    flex: 0 0 64.64%;
  }
  .g3-hp .hp-trio--feature .hp-trio__item > img {
    aspect-ratio: 393 / 571;
  }
  .g3-hp .hp-trio--feature .hp-tile__cta {
    margin-top: 9px;
  }
}
@media (min-width: 1024px) {
  .g3-hp .hp-trio--feature {
    padding: 0 7.202% 0 7.44%;
  }
  .g3-hp .hp-trio--feature .hp-trio__item--narrow-a,
  .g3-hp .hp-trio--feature .hp-trio__item--narrow-b {
    width: 27.266%;
  }
  .g3-hp .hp-trio--feature .hp-trio__item--narrow-a > img,
  .g3-hp .hp-trio--feature .hp-trio__item--narrow-b > img {
    aspect-ratio: 391 / 571;
  }
  .g3-hp .hp-trio--feature .hp-tile__cta {
    margin-top: 0.875em;
  }
}
@media (max-width: 1023px) {
  .g3-hp .hp-trio--editorial {
    gap: 7.05%;
    padding: 0 8.4%;
  }
  .g3-hp .hp-trio--editorial .hp-trio__item {
    flex: 0 0 62.66%;
  }
  .g3-hp .hp-trio--editorial .hp-trio__item > img {
    aspect-ratio: 391 / 571;
  }
  .g3-hp .hp-trio--editorial .hp-tile__cta {
    margin-top: 16px;
  }
}
@media (min-width: 1024px) {
  .g3-hp .hp-trio--editorial {
    padding: 0 6.369% 0 7.44%;
  }
  .g3-hp .hp-trio--editorial .hp-trio__item {
    width: 27.003%;
  }
  .g3-hp .hp-trio--editorial .hp-trio__item > img {
    aspect-ratio: 391 / 571;
  }
  .g3-hp .hp-trio--editorial .hp-trio__item:nth-child(3) {
    width: 27.417%;
  }
  .g3-hp .hp-trio--editorial .hp-trio__item:nth-child(3) > img {
    aspect-ratio: 397 / 571;
  }
  .g3-hp .hp-trio--editorial .hp-tile__cta {
    margin-top: 0.6875em;
  }
}

/* ===================================== EDITORIAL BANDS (ART BAND, DUO, WEEKEND, WORK) ===================================== */
.g3-hp .hp-artband {
  display: block;
  position: relative;
}
.hp-artband--wtw {
  margin-top: 66px;
}
@media (min-width: 1024px) {
  .hp-artband--wtw {
    margin-top: 6.875em;
  }
}
.g3-hp .hp-artband--wtw img {
  aspect-ratio: 750 / 818;
}
@media (min-width: 1024px) {
  .g3-hp .hp-artband--wtw img {
    aspect-ratio: 1680 / 513;
  }
}

/* ===================================== VIDEO SPOT (THIS IS ANN) ===================================== */
.g3-hp .hp-spot {
  margin-top: 34px;
}
@media (min-width: 1024px) {
  .g3-hp .hp-spot {
    margin-top: 7.3125em;
  }
}
.hp-spot__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 106.97%;
}
.hp-spot__lockup {
  color: #fff;
  font-family: "Ethic Serif", serif;
  font-weight: 300;
  line-height: 52.5px;
  font-size: 60.5px;
  letter-spacing: 0;
  margin: 0 0 49px 0;
}
.hp-spot__lockup-a {
  display: block;
}
.hp-spot__lockup-b {
  display: none;
}
.hp-spot__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 750 / 926;
}
.hp-spot__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-spot__media video.g3-video--desktop {
  display: none;
}
.hp-spot__media video.g3-video--mobile {
  display: block;
}
@media (min-width: 1024px) {
  .hp-spot__overlay {
    padding-top: 16.35%;
  }
  .hp-spot__lockup {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 0.8354em;
  }
  .hp-spot__lockup-a {
    display: inline;
  }
  .hp-spot__lockup-b {
    display: inline;
  }
  .hp-spot__media {
    aspect-ratio: 1680 / 618;
  }
  .hp-spot__media video.g3-video--desktop {
    display: block;
  }
  .hp-spot__media video.g3-video--mobile {
    display: none;
  }
}

/* ===================================== PRODUCT RECS (RFK / DRESSIPI) ===================================== */
.g3-hp .hp-recs .tile-image {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  aspect-ratio: auto !important;
}
.g3-hp section.g3-rfk.hp-recs {
  background: #fff !important;
  padding: 27px 0 40px 0 !important;
  margin: 0 !important;
}
.g3-hp section.g3-rfk.hp-recs .g3-rfk__content {
  background: #fff !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 5.5% !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.g3-hp section.g3-rfk.hp-recs h3.hp-recs__title {
  display: block !important;
  width: auto !important;
  text-align: left !important;
  font-family: "Ethic Serif", "baskerville-urw", serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 22px !important;
  letter-spacing: -0.01em !important;
  line-height: 0.98 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  color: #000 !important;
}
.g3-hp section.g3-rfk.hp-recs h3.hp-recs__title em {
  font-family: "Ethic Serif", "baskerville-urw", serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
}
.g3-hp section.g3-rfk.hp-recs .g3-rfk__embed {
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.g3-hp .hp-recs .reflektion-tiles.refhomepage1 {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.g3-hp .hp-recs .hp-product-grid,
.g3-hp .hp-recs .wrapper-content,
.g3-hp .hp-recs .html-slot-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.g3-hp .hp-recs .reflektion-recommendations,
.g3-hp .hp-recs .dressipi.reflektion-recommendations {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.g3-hp .hp-recs .slick-list {
  margin: 0 !important;
  padding: 0 !important;
}
.g3-hp .hp-recs .slick-slide {
  max-height: none !important;
  height: auto !important;
}
.g3-hp .hp-recs .product-tile .image-container {
  height: auto !important;
}
.g3-hp .hp-recs .slider-heading-section {
  display: none !important;
}
@media (min-width: 1024px) {
  .g3-hp section.g3-rfk.hp-recs {
    padding: 6.2em 0 3.5em 0 !important;
  }
  .g3-hp section.g3-rfk.hp-recs .g3-rfk__content {
    width: 91.4% !important;
    padding: 0 !important;
  }
  .g3-hp section.g3-rfk.hp-recs h3.hp-recs__title {
    font-size: 2.36em !important;
    margin: 0 0 0.35em 0 !important;
    letter-spacing: -0.026em !important;
  }
}

/* ===================================== CURALATE / SOCIAL ===================================== */
/* Hide the Social Curulate on bottom of page */
.homepage-curalate {
  display: none;
}

/* ===================================== STYLEREWARDS / LOYALTY BANNER ===================================== */
#loyalty-banner-signincta,
#loyalty-banner-shop {
  display: none;
}
#loyalty-banner-joinnowcta,
#loyalty-banner-signincta,
#loyalty-banner-shop {
  color: #000;
  font-weight: 400;
  font-size: 2.5em;
}
.hpStyleBanner092826 {
  height: 48.3vw !important;
}
.hpStyleBanner092826 .g3-promo__content {
  padding: 4em 0 0.3em 0;
}
.hpStyleBanner092826 .g3-promo__txt--left p {
  font-size: 2.5em;
}
.hpStyleBanner092826 .g3-promo__txt--center {
  padding: 1.5em 0 1.9em 0;
}
.hpStyleBanner092826 .g3-promo__txt--center h2 {
  font-size: 3.1em;
  line-height: 1.1;
  padding-bottom: 0;
}
.hpStyleBanner092826 .g3-promo__txt .g3-coupon-area {
  font-size: 1.7em;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-top: 1%;
}
.hpStyleBanner092826 .g3-disclaimer {
  margin-top: 2.3em;
}
@media (min-width: 1024px) {
  #loyalty-banner-joinnowcta,
  #loyalty-banner-signincta,
  #loyalty-banner-shop {
    font-weight: 400;
    font-size: 1em;
  }
  .hpStyleBanner092826 {
    height: 8.8em !important;
  }
  .hpStyleBanner092826 .g3-promo__content {
    padding: 2em 0 0.3em 0;
  }
  .hpStyleBanner092826 .g3-promo__txt--left {
    padding-left: 2em;
    padding-top: 0.5em;
  }
  .hpStyleBanner092826 .g3-promo__txt--left p {
    font-size: 1.3em;
  }
  .hpStyleBanner092826 .g3-promo__txt--center {
    padding: 0 0 0.5em 0;
  }
  .hpStyleBanner092826 .g3-promo__txt--center h2 {
    font-size: 1.6em;
    letter-spacing: 0.02em;
  }
  .hpStyleBanner092826 .g3-promo__txt .g3-coupon-area {
    font-size: 0.85em;
  }
  .hpStyleBanner092826 .g3-disclaimer {
    margin-top: 0.1%;
    font-size: 0.6em;
  }
  #loyalty-banner-joinnowcta,
  #loyalty-banner-signincta {
    padding-top: 0.5em;
  }
}

/* ===================================== SITE SHELL OVERRIDES (PLP/SEARCH) ===================================== */
.breadcrumbs-results-count-wrapper,
.grid-header,
.tnt-filter-block,
.refinements.category-refinements {
  display: none !important;
}