/* V2031 accessory capsules: publication-quality supplied imagery, scoped to
   the Accessories edit and the dedicated Noir travel edit. */
.pp-accessory-capsule,
.pp-accessory-capsule * {
  box-sizing: border-box;
}

.pp-accessory-capsule {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: clamp(52px, 5.8vw, 84px) clamp(20px, 5vw, 76px);
  background: transparent !important;
  background-color: transparent !important;
  color: #071d35;
}

.pp-accessory-capsule--noir {
  color: #f8f3e9;
}

.pp-accessory-capsule__intro,
.pp-accessory-capsule__grid {
  width: min(100%, 1420px);
  margin-inline: auto;
}

.pp-accessory-capsule__intro {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  column-gap: clamp(38px, 6vw, 100px);
  align-items: end;
  margin-bottom: clamp(32px, 3.8vw, 52px);
}

.pp-accessory-capsule__eyebrow {
  grid-column: 1;
  display: block;
  margin: 0 0 14px;
  color: #d2a54b;
  font: 700 10px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: 0.28em;
}

.pp-accessory-capsule--noir .pp-accessory-capsule__eyebrow {
  color: #d8ae61;
}

.pp-accessory-capsule__intro h2 {
  grid-column: 1;
  margin: 0;
  max-width: 720px;
  color: #0a3b70;
  font: 400 clamp(38px, 4.5vw, 64px)/0.98 Georgia, "Times New Roman", serif;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.pp-accessory-capsule__intro p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  margin: 0 0 5px;
  max-width: 610px;
  color: #0a3b70;
  font: 400 clamp(15px, 1.3vw, 19px)/1.65 Arial, Helvetica, sans-serif;
  letter-spacing: 0.01em;
}

.pp-accessory-capsule--noir .pp-accessory-capsule__intro p {
  color: rgba(248, 243, 233, 0.72);
}

.pp-accessory-capsule--noir .pp-accessory-capsule__intro h2,
.pp-accessory-capsule--noir .pp-accessory-capsule__copy h3 {
  color: #f8f3e9;
}

.pp-accessory-capsule__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(34px, 4vw, 56px) clamp(18px, 2.2vw, 30px);
  align-items: start;
}

.pp-accessory-capsule__card {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit;
}

.pp-accessory-capsule__card--seven { grid-column: span 7; }
.pp-accessory-capsule__card--five { grid-column: span 5; }
.pp-accessory-capsule__card--four { grid-column: span 4; }

.pp-accessory-capsule__media,
.pp-accessory-capsule__gallery {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pp-accessory-capsule__media img,
.pp-accessory-capsule__gallery img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
  transition: transform 650ms cubic-bezier(0.2, 0.72, 0.3, 1);
}

/* One SKU, two supplied views: a compact, swipeable product gallery. */
.pp-accessory-capsule__gallery {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-color: #bd8a37 transparent;
  scrollbar-width: thin;
}

.pp-accessory-capsule__gallery img {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.pp-accessory-capsule__gallery::-webkit-scrollbar {
  height: 4px;
}

.pp-accessory-capsule__gallery::-webkit-scrollbar-track {
  background: transparent;
}

.pp-accessory-capsule__gallery::-webkit-scrollbar-thumb {
  background: #bd8a37;
}

.pp-accessory-capsule__card:hover .pp-accessory-capsule__media img {
  transform: scale(1.018);
}

.pp-accessory-capsule__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(17px, 1.8vw, 25px) 1px 0;
  background: transparent !important;
  color: inherit;
}

.pp-accessory-capsule__number {
  display: block;
  margin: 0 0 9px;
  color: #d2a54b;
  font: 700 9px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.pp-accessory-capsule--noir .pp-accessory-capsule__number {
  color: #d5aa5c;
}

.pp-accessory-capsule__copy h3 {
  margin: 0 0 9px;
  color: #0a3b70;
  font: 400 clamp(24px, 2.2vw, 36px)/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.pp-accessory-capsule__copy p {
  width: min(100%, 620px);
  max-width: 100%;
  margin: 0 0 20px;
  color: #0a3b70;
  font: 400 14px/1.58 Arial, Helvetica, sans-serif;
  letter-spacing: 0.005em;
  overflow-wrap: anywhere;
  word-break: normal;
}

.pp-accessory-capsule--noir .pp-accessory-capsule__copy p {
  color: rgba(248, 243, 233, 0.67);
}

.pp-accessory-capsule__purchase {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}

.pp-accessory-capsule__price {
  flex: 0 0 auto;
  color: #d2a54b;
  font: 400 18px/1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.035em;
}

.pp-accessory-capsule__button {
  min-height: 42px;
  margin: 0;
  padding: 12px 20px;
  border: 0 !important;
  border-radius: 0 !important;
  background: #d2a54b !important;
  box-shadow: none !important;
  color: #061b34 !important;
  cursor: pointer;
  font: 700 9px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.pp-accessory-capsule--noir .pp-accessory-capsule__button {
  background: #d2a54b !important;
  color: #06182c !important;
}

.pp-accessory-capsule__button:hover,
.pp-accessory-capsule__button:focus-visible {
  background: #0a3b70 !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.pp-accessory-capsule--noir-edit,
.pp-accessory-capsule--pride-edit {
  border-top: 1px solid rgba(10, 59, 112, .12);
}

.pp-accessory-capsule--noir .pp-accessory-capsule__button:hover,
.pp-accessory-capsule--noir .pp-accessory-capsule__button:focus-visible {
  background: #f0ce82 !important;
  color: #06182c !important;
}

.pp-accessory-capsule__button:focus-visible,
.pp-accessory-capsule__gallery:focus-visible {
  outline: 2px solid #d2a54b;
  outline-offset: 4px;
}

@media (max-width: 1080px) {
  .pp-accessory-capsule__card--seven,
  .pp-accessory-capsule__card--five,
  .pp-accessory-capsule__card--four {
    grid-column: span 6;
  }
}

@media (max-width: 760px) {
  .pp-accessory-capsule {
    padding: 54px 18px 64px;
  }

  .pp-accessory-capsule__intro {
    display: block;
    margin-bottom: 34px;
  }

  .pp-accessory-capsule__intro h2 {
    font-size: clamp(35px, 11vw, 50px);
  }

  .pp-accessory-capsule__intro p {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.55;
  }

  .pp-accessory-capsule__grid {
    gap: 42px;
  }

  .pp-accessory-capsule__card--seven,
  .pp-accessory-capsule__card--five,
  .pp-accessory-capsule__card--four {
    grid-column: 1 / -1;
  }

  .pp-accessory-capsule__copy h3 {
    font-size: 29px;
  }

  .pp-accessory-capsule__copy,
  .pp-accessory-capsule__copy p,
  .pp-accessory-capsule__purchase {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

html.pp-mobile-mode .pp-accessory-capsule {
  padding: 54px 18px 64px;
}

html.pp-mobile-mode .pp-accessory-capsule__intro {
  display: block;
  margin-bottom: 34px;
}

html.pp-mobile-mode .pp-accessory-capsule__intro p {
  margin-top: 18px;
}

html.pp-mobile-mode .pp-accessory-capsule__grid {
  gap: 42px;
}

html.pp-mobile-mode .pp-accessory-capsule__card--seven,
html.pp-mobile-mode .pp-accessory-capsule__card--five,
html.pp-mobile-mode .pp-accessory-capsule__card--four {
  grid-column: 1 / -1;
}

@media (max-width: 420px) {
  .pp-accessory-capsule__purchase {
    align-items: stretch;
    flex-direction: column;
  }

  .pp-accessory-capsule__button {
    width: 100%;
  }
}

/* A single minmax track prevents legacy product-grid minimums from widening
   capsule copy beyond the physical phone canvas. */
@media (max-width: 760px) {
  html.pp-mobile-mode .pp-accessory-capsule,
  html.pp-mobile-mode .pp-accessory-capsule__intro,
  html.pp-mobile-mode .pp-accessory-capsule__grid,
  html.pp-mobile-mode .pp-accessory-capsule__card,
  html.pp-mobile-mode .pp-accessory-capsule__media,
  html.pp-mobile-mode .pp-accessory-capsule__gallery,
  html.pp-mobile-mode .pp-accessory-capsule__copy,
  html.pp-mobile-mode .pp-accessory-capsule__copy p,
  html.pp-mobile-mode .pp-accessory-capsule__purchase {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html.pp-mobile-mode .pp-accessory-capsule__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.pp-mobile-mode .pp-accessory-capsule__card--seven,
  html.pp-mobile-mode .pp-accessory-capsule__card--five,
  html.pp-mobile-mode .pp-accessory-capsule__card--four {
    grid-column: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-accessory-capsule__media img,
  .pp-accessory-capsule__gallery img,
  .pp-accessory-capsule__button {
    transition: none;
  }
}