/* =====================================================================
   AT-HP-2026-CSS-101626  — custom creative tweaks for the 10/16/2026 HP (Cyber Fall)
   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 ===================================== */
/* Links are class="at-link" (design system sets font, size, underline). Here: layout only —
   drop Constant's grey bubble and restore its 0.7em gap (the global .at-link margin:0 reset removes it). */
.g3-hp .g3-mobile-cats__slider a.at-link {
  color: var(--at-black);
  background: transparent;
}
.g3-hp .g3-mobile-cats__slider a.at-link:not(:first-of-type) {
  margin-left: 0.7em;
}

/* ===================================== 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 — VIDEO (10/16 CYBER FALL) ===================================== */
/* Creative's animated hero (4389-HPmain-CyberFall_no-cta) has the headline baked in; CTAs + disclaimer are live HTML.
   Fluid: the video box sets the height (aspect-ratio of the creative), copy is stacked in the same grid cell
   (no position:absolute / transform). Overlay offsets are % of the hero width, so they track the video exactly.
   Measured: desktop 1680×520 (CTA top 337px, 2 × 210×44 at-btn, 39px gap) / mobile 1170×1176 @390 (CTA top 302px). */
.hpMain101626 {
  display: grid;
  color: #fff;
  background: #6b2a5c;
}
.hpMain101626 > .hp-vhero__media,
.hpMain101626 > .hp-vhero__txt {
  grid-area: 1 / 1;
}
.hpMain101626 .hp-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hpMain101626 .hp-vhero__media {
  aspect-ratio: 1170 / 1176;
  overflow: hidden;
}
.hpMain101626 .hp-vhero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hpMain101626 .hp-vhero__media video.hp-vhero__dt {
  display: none;
}
.hpMain101626 .hp-vhero__txt {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 77.4%;
  pointer-events: none;
}
.hpMain101626 .hp-vhero__txt a,
.hpMain101626 .hp-vhero__txt .global-promo-modal-btn {
  pointer-events: auto;
}
.hpMain101626 .g3-ctas {
  display: flex;
  justify-content: center;
  gap: 3.5em;
}
.hpMain101626 .g3-disclaimer {
  display: block;
  margin-top: 2.6em;
  font-size: 1.35em;
  line-height: 1.3;
  color: #fff;
}
@media (min-width: 1024px) {
  .hpMain101626 .hp-vhero__media {
    aspect-ratio: 1680 / 520;
  }
  .hpMain101626 .hp-vhero__media video.hp-vhero__dt {
    display: block;
  }
  .hpMain101626 .hp-vhero__media video.hp-vhero__m {
    display: none;
  }
  .hpMain101626 .hp-vhero__txt {
    padding-top: 20.06%;
  }
  .hpMain101626 .g3-ctas {
    gap: 2.44em;
  }
  .hpMain101626 .g3-disclaimer {
    margin-top: 2.9em;
    font-size: 0.85em;
  }
}

/* ===================================== EDITORIAL DUO (10/16 — DIRECTLY BELOW HP MAIN) ===================================== */
/* Fluid rebuild of the 08/12 kb-3-col duo: no absolute/transform CTA. Each tile = 1-cell grid stack of the
   no-CTA art (headline baked in) + live at-btn CTA + disclaimer. Offsets are % of the tile width.
   Desktop: 2 × 50% tiles, no gap, art 841×780. Mobile: stacked full width, art 780×723. */
.hpDuo101626 {
  display: flex;
  flex-direction: column;
}
.hpDuo101626 .hp-duo__item {
  display: grid;
  color: #fff;
}
.hpDuo101626 .hp-duo__item > .hp-duo__img,
.hpDuo101626 .hp-duo__item > .hp-duo__txt {
  grid-area: 1 / 1;
}
.hpDuo101626 .hp-duo__img img {
  aspect-ratio: 780 / 723;
  object-fit: cover;
}
.hpDuo101626 .hp-duo__txt {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 74.4%;
  pointer-events: none;
}
.hpDuo101626 .hp-duo__txt a,
.hpDuo101626 .hp-duo__txt .global-promo-modal-btn {
  pointer-events: auto;
}
.hpDuo101626 .g3-disclaimer {
  display: block;
  margin-top: 2.8em;
  font-size: 1.13em;
  line-height: 1.3;
  color: #fff;
}
@media (min-width: 1024px) {
  .hpDuo101626 {
    flex-direction: row;
  }
  .hpDuo101626 .hp-duo__item {
    width: 50%;
  }
  .hpDuo101626 .hp-duo__img img {
    aspect-ratio: 841 / 780;
  }
  .hpDuo101626 .hp-duo__txt {
    padding-top: 75.7%;
  }
  .hpDuo101626 .g3-disclaimer {
    margin-top: 2.7em;
    font-size: 0.65em;
  }
}

/* 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;
}