:root {
   --ink: #0a0a0a;
   --paper: #f4f2ed;
   --white: #fff;
   --line: #dcd9d1;
   --muted: #6e6b65;
   --purple: #6747ff;
   --yellow: #f2c441;
   --max: 1440px
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   background: var(--paper);
   color: var(--ink);
   font-family: Inter, Arial, sans-serif
}

a {
   color: inherit;
   text-decoration: none
}

button,
input {
   font: inherit
}

svg {
   width: 1.15em;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.8
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0)
}

.trustbar {
   height: 32px;
   background: #0a0a0a;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 28px;
   font-size: 10px;
   font-weight: 600
}

.trustbar i {
   width: 2px;
   height: 2px;
   background: var(--yellow);
   border-radius: 50%
}

.site-header {
   height: 78px;
   position: sticky;
   top: 0;
   z-index: 50;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   padding: 0 clamp(24px, 5vw, 80px);
   background: rgba(244, 242, 237, .92);
   backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(10, 10, 10, .1)
}

.brand {
   font-family: "Space Grotesk", sans-serif;
   letter-spacing: .17em;
   font-size: 21px
}

.brand span {
   color: var(--purple);
   margin-left: 6px
}

.main-nav {
   display: flex;
   gap: 34px;
   font-size: 12px;
   font-weight: 600
}

.main-nav a,
.footer nav a {
   transition: opacity .2s
}

.main-nav a:hover,
.footer nav a:hover {
   opacity: .5
}

.header-actions {
   justify-self: end;
   display: flex;
   align-items: center;
   gap: 8px
}

.icon-button {
   position: relative;
   width: 38px;
   height: 38px;
   border: 0;
   background: transparent;
   display: grid;
   place-items: center
}

.bag em {
   position: absolute;
   right: 0;
   top: 1px;
   background: var(--purple);
   color: #fff;
   border-radius: 50%;
   font-style: normal;
   font-size: 9px;
   min-width: 16px;
   height: 16px;
   display: grid;
   place-items: center
}

.menu-button {
   display: none;
   border: 0;
   background: transparent;
   width: 38px;
   height: 38px;
   padding: 10px
}

.menu-button span {
   display: block;
   height: 1px;
   background: #000;
   margin: 6px 0;
   transition: .2s
}


.hero {
    min-height: calc(100vh - 110px);
    max-height: 850px;
    display: grid;
    grid-template-columns: 46% 54%;
    border-bottom: 1px solid var(--line)
}

.hero-copy {
    padding: clamp(70px, 9vw, 135px) 5vw 60px clamp(24px, 6vw, 100px);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.eyebrow {
    font: 900 21px "IBM Plex Mono", monospace;
    letter-spacing: .14em;
    color: var(--purple)
}

.hero h1 {
    font: 600 clamp(48px, 5vw, 82px)/.98 "Space Grotesk", sans-serif;
    letter-spacing: -.055em;
    margin: 25px 0 28px
}

.hero h1 span {
    color: var(--muted)
}

.hero-copy>p {
    font-size: 15px;
    line-height: 1.65;
    color: #4c4a46;
    max-width: 540px
}

.hero-ctas {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 32px 0 52px
}

.button {
   height: 52px;
   padding: 0 24px;
   display: inline-flex;
   align-items: center;
   gap: 18px;
   font-size: 12px;
   font-weight: 600;
   border: 1px solid var(--ink);
   transition: .25s
}

.button:hover,
.quick-buy:hover {
   transform: translateY(-2px)
}

.button-dark {
   background: var(--ink);
   color: #fff
}

.button-light {
   background: #fff;
   color: #000;
   border-color: #fff
}

.text-link {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   font-size: 12px;
   font-weight: 600
}

.hero-copy>code {
    font: 400 11px "IBM Plex Mono", monospace;
    color: #85817a
}

.hero-visual {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #e7e4de, #c8c4bc);
    isolation: isolate
}

.hero-visual:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 49.8%, rgba(0, 0, 0, .08) 50%, transparent 50.2%), linear-gradient(rgba(255, 255, 255, .16), transparent 45%);
    z-index: -1
}

.hero-number {
    position: absolute;
    top: 5%;
    right: -3%;
    font: 700 clamp(150px, 18vw, 290px)/1 "Space Grotesk";
    color: rgba(255, 255, 255, .31);
    letter-spacing: -.12em
}

.hero-product {
    position: absolute;
    background: #d5d1ca;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .16);
    overflow: hidden
}

.hero-product img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero-product-back {
    width: 38%;
    height: 50%;
    right: 7%;
    top: 13%;
    transform: rotate(5deg);
    filter: saturate(.75)
}

.hero-product-front {
    width: 52%;
    height: 68%;
    left: 9%;
    bottom: -3%;
    transform: rotate(-2deg)
}

.drop-note {
   position: absolute;
   right: 5%;
   bottom: 5%;
   font-family: "IBM Plex Mono", monospace;
   text-align: right
}

.drop-note span {
   display: block;
   font-size: 8px;
   letter-spacing: .2em
}

.drop-note b {
   font-size: 16px;
   font-weight: 500
}

.benefits {
   max-width: var(--max);
   margin: auto;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   padding: 30px clamp(24px, 5vw, 80px);
   border-bottom: 1px solid var(--line)
}

.benefits div {
   padding-left: 22px;
   border-left: 1px solid var(--line);
   display: flex;
   flex-direction: column;
   gap: 5px
}

.benefits b {
   font: 600 12px "Space Grotesk"
}

.benefits span {
   font-size: 10px;
   color: var(--muted)
}

.section {
   max-width: var(--max);
   margin: auto;
   padding: clamp(80px, 9vw, 130px) clamp(24px, 5vw, 80px)
}

.section-head {
   display: flex;
   justify-content: space-between;
   align-items: end;
   margin-bottom: 44px
}

.section h2,
.manifesto h2,
.newsletter h2 {
   font: 600 clamp(36px, 4vw, 58px)/1.04 "Space Grotesk";
   letter-spacing: -.045em;
   margin: 14px 0 0
}

.product-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px
}

.product-skeleton {
   height: 500px;
   background: linear-gradient(100deg, #e5e2dc 30%, #eceae5 50%, #e5e2dc 70%);
   background-size: 200% 100%;
   animation: loading 1.4s infinite
}

@keyframes loading {
   to {
      background-position: -200% 0
   }
}

.product-image {
   height: 420px;
   background: #e5e2dc;
   display: block;
   position: relative;
   overflow: hidden
}

.product-image:after {
   content: "";
   position: absolute;
   inset: 0;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
   pointer-events: none
}

.product-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .55s
}

.product-card:hover img {
   transform: scale(1.035)
}

.tag {
   position: absolute;
   z-index: 2;
   left: 14px;
   top: 14px;
   background: #0a0a0a;
   color: #fff;
   font-size: 9px;
   font-weight: 600;
   padding: 8px 10px
}

.quick-buy {
   position: absolute;
   z-index: 2;
   left: 12px;
   right: 12px;
   bottom: 12px;
   height: 44px;
   background: rgba(255, 255, 255, .94);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 15px;
   font-size: 11px;
   font-weight: 600;
   transform: translateY(65px);
   transition: .3s
}

.product-card:hover .quick-buy {
   transform: none
}

.product-info {
   padding: 18px 2px;
   display: flex;
   flex-direction: column;
   align-items: flex-start
}

.product-info>span {
   font: 500 9px "IBM Plex Mono";
   color: var(--purple);
   text-transform: uppercase;
   letter-spacing: .1em
}

.product-info h3 {
   font: 600 14px/1.35 "Space Grotesk";
   margin: 9px 0;
   min-height: 38px
}

.rating {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 8px
}

.stars {
   font-size: 9px;
   letter-spacing: 1px;
   color: #a87500
}

.product-info small,
.rating small {
   font-size: 9px;
   color: var(--muted)
}

.product-info>b {
   font-size: 14px;
   margin-bottom: 3px
}

.universe-section {
   padding-top: 45px
}

.universe-grid {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   grid-template-rows: 280px 280px;
   gap: 16px
}

.universe {
   position: relative;
   padding: 34px;
   color: #fff;
   overflow: hidden;
   display: flex;
   justify-content: space-between
}

.universe-large {
   grid-row: 1/3;
   background: linear-gradient(145deg, #d8d4cd, #b6b1aa);
   color: #111
}

.universe-large:before {
   content: "</>";
   position: absolute;
   right: -4%;
   bottom: -18%;
   font: 600 280px "Space Grotesk";
   color: rgba(255, 255, 255, .27);
   letter-spacing: -.15em
}

.universe-purple {
   background: var(--purple)
}

.universe-purple:before {
   content: "GEEK";
   position: absolute;
   right: -2%;
   bottom: -12%;
   font: 700 118px "Space Grotesk";
   color: rgba(255, 255, 255, .1)
}

.universe-dark {
   background: #111
}

.universe-dark:before {
   content: "○ × △ □";
   position: absolute;
   right: 4%;
   bottom: 10%;
   font: 500 44px "Space Grotesk";
   color: rgba(255, 255, 255, .12);
   letter-spacing: .25em
}

.universe>span {
   font: 400 10px "IBM Plex Mono"
}

.universe>div {
   align-self: flex-end;
   position: relative;
   z-index: 1
}

.universe small {
   font: 500 10px "IBM Plex Mono";
   letter-spacing: .12em
}

.universe h3 {
   font: 600 clamp(25px, 3vw, 48px)/1.02 "Space Grotesk";
   letter-spacing: -.04em;
   max-width: 520px;
   margin: 12px 0
}

.universe:not(.universe-large) h3 {
   font-size: 30px
}

.universe p {
   font-size: 13px
}

.universe b {
   font-size: 11px;
   display: block;
   margin-top: 28px
}

.manifesto {
   background: #0d0d0d;
   color: #fff;
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 600px
}

.manifesto-art {
   position: relative;
   overflow: hidden;
   background: radial-gradient(circle at 40% 40%, #323232, #0a0a0a 60%);
   display: grid;
   place-items: center
}

.manifesto-art span {
   font: 600 clamp(140px, 20vw, 340px)/1 "Space Grotesk";
   color: #171717;
   letter-spacing: -.12em
}

.manifesto-art code {
   position: absolute;
   font: 400 10px "IBM Plex Mono";
   letter-spacing: .25em;
   color: var(--yellow)
}

.manifesto-copy {
   padding: 80px clamp(32px, 7vw, 110px);
   display: flex;
   flex-direction: column;
   justify-content: center
}

.manifesto-copy .eyebrow {
   color: var(--yellow)
}

.manifesto-copy p {
   color: #aaa;
   line-height: 1.8;
   max-width: 570px;
   font-size: 14px;
   margin: 28px 0 36px
}

.manifesto-copy .button {
   align-self: flex-start
}

.proof-section {
   background: #fff;
   max-width: none;
   padding-left: max(24px, calc((100vw - var(--max))/2 + 80px));
   padding-right: max(24px, calc((100vw - var(--max))/2 + 80px))
}

.reviews {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px
}

.reviews blockquote {
   margin: 0;
   border: 1px solid #e7e4de;
   padding: 32px;
   min-height: 240px;
   display: flex;
   flex-direction: column
}

.reviews blockquote p {
   font: 500 17px/1.55 "Space Grotesk";
   margin: 26px 0 auto
}

.reviews footer {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.reviews footer b {
   font-size: 11px
}

.reviews footer span {
   font-size: 9px;
   color: var(--muted)
}

.newsletter {
   background: var(--purple);
   color: #fff;
   padding: 70px max(24px, calc((100vw - var(--max))/2 + 80px));
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 40px
}

.newsletter .eyebrow {
   color: #fff;
   opacity: .7
}

.newsletter h2 {
   font-size: 48px
}

.newsletter p {
   font-size: 12px;
   opacity: .75
}

.newsletter form {
   width: min(500px, 46%);
   display: flex;
   border-bottom: 1px solid rgba(255, 255, 255, .6)
}

.newsletter input {
   flex: 1;
   border: 0;
   background: transparent;
   color: #fff;
   padding: 16px 4px;
   outline: 0
}

.newsletter input::placeholder {
   color: rgba(255, 255, 255, .65)
}

.newsletter button {
   border: 0;
   background: transparent;
   color: #fff;
   font-size: 11px;
   font-weight: 600;
   cursor: pointer
}

.footer {
   padding: 68px max(24px, calc((100vw - var(--max))/2 + 80px)) 28px;
   background: #0a0a0a;
   color: #fff;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px
}

.brand-footer {
   font-size: 19px
}

.footer>p {
   justify-self: end;
   color: #777;
   font-size: 11px
}

.footer nav {
   display: flex;
   gap: 24px;
   font-size: 11px
}

.footer>small {
   justify-self: end;
   color: #555;
   font-size: 9px
}

@media(max-width:1000px) {
   .main-nav {
      gap: 17px
   }

    .main-nav {
        gap: 17px
    }

    .hero {
        grid-template-columns: 1fr 1fr
    }

    .hero-product-front {
        width: 70%;
        left: 2%
    }

   .product-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .product-image {
      height: 480px
   }

   .benefits {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px
   }

   .universe-grid {
      grid-template-columns: 1fr
   }

   .universe-large {
      grid-row: auto
   }

   .manifesto {
      grid-template-columns: .8fr 1.2fr
   }

   .reviews {
      grid-template-columns: 1fr
   }
}

@media(max-width:760px) {
   .trustbar {
      height: 29px;
      justify-content: flex-start;
      overflow: hidden;
      padding: 0 18px;
      white-space: nowrap
   }

   .trustbar span:nth-of-type(n+3),
   .trustbar i:nth-of-type(n+2) {
      display: none
   }

   .site-header {
      height: 66px;
      grid-template-columns: 1fr auto;
      padding: 0 18px
   }

   .brand {
      font-size: 17px
   }

   .main-nav {
      display: none;
      position: absolute;
      top: 66px;
      left: 0;
      right: 0;
      background: var(--paper);
      padding: 25px;
      flex-direction: column;
      border-bottom: 1px solid var(--line)
   }

   .main-nav.is-open {
      display: flex
   }

   .desktop-icon {
      display: none
   }

   .menu-button {
      display: block
   }

   .menu-button.is-open span:first-child {
      transform: translateY(3.5px) rotate(45deg)
   }

   .menu-button.is-open span:last-child {
      transform: translateY(-3.5px) rotate(-45deg)
   }

    .hero {
        display: flex;
        flex-direction: column;
        max-height: none
    }

    .hero-copy {
        padding: 70px 22px 50px
    }

    .hero h1 {
        font-size: 48px
    }

    .hero-copy>p {
        font-size: 14px
    }

    .hero-ctas {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 38px
    }

    .hero-visual {
        height: 520px
    }

    .hero-product-front {
        height: 72%;
        width: 72%
    }

    .hero-product-back {
        width: 48%
    }


   .benefits {
      grid-template-columns: 1fr 1fr;
      padding: 28px 20px
   }

   .benefits div {
      padding-left: 12px
   }

   .section {
      padding: 78px 20px
   }

   .section-head {
      align-items: flex-start;
      gap: 24px
   }

   .section-head>.text-link {
      display: none
   }

   .section h2 {
      font-size: 38px
   }

   .product-grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      margin-right: -20px;
      padding-right: 20px;
      gap: 12px
   }

   .product-card {
      min-width: 82vw;
      scroll-snap-align: start
   }

   .product-image {
      height: 430px
   }

   .quick-buy {
      transform: none
   }

   .universe-grid {
      display: flex;
      flex-direction: column
   }

   .universe {
      min-height: 330px
   }

   .universe-large:before {
      font-size: 180px
   }

   .manifesto {
      grid-template-columns: 1fr
   }

   .manifesto-art {
      min-height: 360px
   }

   .manifesto-copy {
      padding: 70px 22px
   }

   .newsletter {
      align-items: flex-start;
      flex-direction: column;
      padding: 60px 22px
   }

   .newsletter form {
      width: 100%
   }

   .footer {
      grid-template-columns: 1fr;
      padding: 55px 22px 25px
   }

   .footer>p,
   .footer>small {
      justify-self: start
   }

   .footer nav {
      flex-wrap: wrap
   }
}

.session-dot {
   position: absolute;
   right: 3px;
   top: 4px;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #22c55e;
   border: 1px solid var(--paper)
}

.mobile-session {
   display: none
}

@media(max-width:760px) {
   .main-nav {
      padding-bottom: 78px;
      box-shadow: 0 20px 35px rgba(0, 0, 0, .08)
   }

   .mobile-session {
      position: absolute;
      left: 25px;
      right: 25px;
      top: 265px;
      z-index: 2;
      align-items: center;
      justify-content: space-between;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      font-size: 12px;
      font-weight: 600
   }

   .mobile-session.is-open {
      display: flex
   }

   .mobile-session button {
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 11px;
      cursor: pointer
   }
}

@media(prefers-reduced-motion:reduce) {
   * {
      scroll-behavior: auto !important;
      transition: none !important;
      animation: none !important
   }
}


/* ==================================================
   HERO EDITORIAL PREMIUM
   ================================================== */

.hero-premium {
  min-height: 680px;
  height: calc(100vh - 110px);
  max-height: 820px;

  display: grid;
  grid-template-columns:
    minmax(430px, 43%)
    minmax(0, 57%);

  overflow: hidden;
  background: #f4f2ed;
  border-bottom: 1px solid #dcd9d1;
}

.hero-premium .hero-copy {
  position: relative;
  z-index: 2;

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

  padding:
    clamp(70px, 8vw, 130px)
    clamp(40px, 5vw, 90px);

  background:
    radial-gradient(
      circle at 85% 40%,
      rgba(103, 71, 255, 0.06),
      transparent 38%
    ),
    #f4f2ed;
}

.hero-premium .eyebrow {
  color: #6747ff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.hero-premium h1 {
  max-width: 680px;
  margin: 24px 0 28px;

  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.7rem, 5.1vw, 5.7rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.065em;

  color: #090909;
}

.hero-premium h1 span {
  display: block;
  color: #76736d;
}

.hero-premium .hero-copy > p {
  max-width: 520px;
  margin: 0;

  color: #4c4a46;
  font-size: 0.96rem;
  line-height: 1.7;
}

.hero-premium .hero-ctas {
  display: flex;
  align-items: center;
  gap: 12px;

  margin: 34px 0 50px;
}

.hero-premium .button {
  min-width: 158px;
  height: 50px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  padding: 0 22px;
  border-radius: 2px;

  font-size: 0.75rem;
  font-weight: 600;

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}

.hero-premium .button:hover {
  transform: translateY(-2px);
}

.button-purple {
  color: #ffffff;
  background: #6747ff;
  border: 1px solid #6747ff;
}

.button-purple:hover {
  background: #5637ea;
}

.button-outline {
  color: #111111;
  background: transparent;
  border: 1px solid rgba(10, 10, 10, 0.34);
}

.button-outline:hover {
  color: #ffffff;
  background: #111111;
  border-color: #111111;
}

.hero-premium .hero-copy code {
  color: #85817a;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}

/* Imagem editorial */

.hero-editorial-image {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  background: #c9ced1;
}

.hero-editorial-image::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;

  width: 15%;

  background: linear-gradient(
    90deg,
    rgba(244, 242, 237, 0.42),
    transparent
  );

  pointer-events: none;
}

.hero-editorial-image img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center 42%;

  filter:
    saturate(0.92)
    contrast(1.02);

  transition:
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.4s ease;
}

.hero-editorial-image:hover img {
  transform: scale(1.018);
  filter:
    saturate(1)
    contrast(1.03);
}

.hero-image-shade {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.03),
      transparent 45%,
      rgba(0, 0, 0, 0.26)
    );

  pointer-events: none;
}

.hero-image-label {
  position: absolute;
  right: 34px;
  bottom: 30px;
  z-index: 3;

  color: #ffffff;
  text-align: right;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
}

.hero-image-label span {
  display: block;
  margin-bottom: 5px;

  font-family: "IBM Plex Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
}

.hero-image-label strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.14em;
}

/* Tablet */

@media (max-width: 1050px) {
  .hero-premium {
    grid-template-columns: 46% 54%;
  }

  .hero-premium h1 {
    font-size: clamp(3.1rem, 5.4vw, 4.5rem);
  }

  .hero-premium .hero-copy {
    padding-left: 38px;
    padding-right: 38px;
  }

  .hero-editorial-image img {
    object-position: 50% center;
  }
}

/* Mobile */

@media (max-width: 760px) {
  .hero-premium {
    height: auto;
    max-height: none;
    min-height: auto;

    display: flex;
    flex-direction: column;
  }

  .hero-premium .hero-copy {
    order: 1;
    padding: 64px 22px 48px;
  }

  .hero-premium h1 {
    margin: 20px 0 24px;
    font-size: clamp(3rem, 14vw, 4.2rem);
  }

  .hero-premium .hero-ctas {
    margin: 30px 0 38px;
    flex-wrap: wrap;
  }

  .hero-premium .button {
    flex: 1;
    min-width: 140px;
  }

  .hero-editorial-image {
    order: 2;
    width: 100%;
    height: min(116vw, 630px);
  }

  .hero-editorial-image::before {
    display: none;
  }

  .hero-editorial-image img {
    object-position: center center;
  }

  .hero-image-label {
    right: 20px;
    bottom: 20px;
  }
}

/* Hero mais compacto — desktop */
@media (min-width: 761px) {
 .hero-premium {
  width: 100%;
  height: 590px;
  min-height: 590px;
  max-height: 590px;

  display: grid;
  grid-template-columns:
    minmax(430px, 43%)
    minmax(0, 57%);

  overflow: hidden;
  background: #f4f2ed;
  border-bottom: 1px solid #dcd9d1;
}

.hero-premium .hero-copy {
  position: relative;
  z-index: 2;

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

  padding: 64px clamp(40px, 4vw, 76px);

  background:
    radial-gradient(
      circle at 85% 40%,
      rgba(103, 71, 255, 0.06),
      transparent 38%
    ),
    #f4f2ed;
}

.hero-premium .eyebrow {
  font-size: 0.85rem;
}

.hero-premium h1 {
  max-width: 620px;
  margin: 22px 0 25px;

  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.35rem, 4.2vw, 4.75rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.065em;

  color: #090909;
}

.hero-premium .hero-copy > p {
  max-width: 520px;
  margin: 0;

  color: #4c4a46;
  font-size: 0.9rem;
  line-height: 1.7;
}

.hero-premium .hero-ctas {
  margin: 30px 0 38px;
}
}

body > [data-include="/includes/header.html"] {
  display: contents;
}

/* =========================================================
   PRODUCT PAGE — PREMIUM LIGHT
   ========================================================= */
.product-premium-page {
   background: var(--paper);
   color: var(--ink)
}

.product-page {
   max-width: var(--max);
   margin: 0 auto;
   padding: 34px clamp(24px, 5vw, 80px) 110px
}

#productPageContent {
   width: 100%
}

.product-page-breadcrumb {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 0 0 30px;
   color: #827e77;
   font: 500 10px/1.4 "IBM Plex Mono", monospace;
   text-transform: uppercase;
   letter-spacing: .08em
}

.product-page-breadcrumb a {
   transition: color .2s
}

.product-page-breadcrumb a:hover {
   color: var(--purple)
}

.product-page-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.08fr) minmax(390px, .78fr);
   gap: clamp(42px, 6vw, 92px);
   align-items: start
}

.product-gallery-box {
   position: sticky;
   top: 96px;
   min-width: 0
}

.product-main-frame {
   position: relative;
   overflow: hidden;
   border-radius: 12px;
   background: #e4e1db;
   box-shadow: 0 22px 54px rgba(10, 10, 10, .09);
   isolation: isolate
}

.product-main-frame:after {
   content: "";
   position: absolute;
   inset: 0;
   border: 1px solid rgba(10, 10, 10, .06);
   border-radius: inherit;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
   pointer-events: none
}

.product-main-image {
   display: block;
   width: 100%;
   aspect-ratio: 1/1.06;
   object-fit: cover;
   cursor: pointer;
   transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .4s
}

.product-main-frame:hover .product-main-image {
   transform: scale(1.012);
   filter: saturate(1.025)
}

.product-gallery-hint {
   position: absolute;
   z-index: 2;
   right: 16px;
   bottom: 16px;
   padding: 8px 11px;
   border-radius: 999px;
   background: rgba(10, 10, 10, .7);
   backdrop-filter: blur(8px);
   color: #fff;
   font: 500 9px/1 "IBM Plex Mono", monospace;
   letter-spacing: .04em
}

.product-thumbs {
   display: flex;
   gap: 10px;
   overflow-x: auto;
   margin-top: 14px;
   padding: 3px 2px 8px;
   scrollbar-width: thin
}

.product-thumb-button {
   flex: 0 0 82px;
   width: 82px;
   height: 82px;
   padding: 0;
   overflow: hidden;
   border: 1px solid transparent;
   border-radius: 8px;
   background: #e4e1db;
   opacity: .66;
   cursor: pointer;
   transition: opacity .2s, border-color .2s, transform .2s, box-shadow .2s
}

.product-thumb-button:hover {
   opacity: 1;
   transform: translateY(-2px)
}

.product-thumb-button.active {
   opacity: 1;
   border-color: var(--purple);
   box-shadow: 0 0 0 2px rgba(103, 71, 255, .14)
}

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

.product-info-box {
   min-width: 0;
   padding: 6px 0 0
}

.product-breadcrumb {
   margin-bottom: 13px;
   color: var(--purple);
   font: 500 10px/1.3 "IBM Plex Mono", monospace;
   text-transform: uppercase;
   letter-spacing: .14em
}

.product-title {
   max-width: 650px;
   margin: 0;
   font: 600 clamp(34px, 3.25vw, 58px)/1.01 "Space Grotesk", sans-serif;
   letter-spacing: -.052em;
   text-transform: none
}

.product-rating-row {
   display: flex;
   align-items: center;
   gap: 11px;
   margin-top: 18px;
   color: #706c65;
   font-size: 11px
}

.product-stars {
   color: #a87500;
   font-size: 10px;
   letter-spacing: 2px
}

.product-meta-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-top: 17px
}

.product-meta-tag {
   padding: 6px 9px;
   border: 1px solid var(--line);
   border-radius: 999px;
   color: #77736c;
   background: rgba(255, 255, 255, .32);
   font: 500 9px/1 "IBM Plex Mono", monospace;
   text-transform: uppercase;
   letter-spacing: .05em
}

.product-price-block {
   display: grid;
   justify-items: start;
   margin-top: 27px;
   padding: 24px 0;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

.product-price {
   font: 600 30px/1 "Space Grotesk", sans-serif;
   letter-spacing: -.035em
}

.product-price-block>span {
   margin-top: 8px;
   color: #5e5a54;
   font-size: 12px
}

.product-price-block>small {
   margin-top: 6px;
   color: #17834e;
   font-size: 10px;
   font-weight: 600
}

.product-options-panel {
   display: grid;
   gap: 20px;
   margin-top: 25px
}

.product-options-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 22px 26px;
   align-items: start
}

.option-group {
   display: grid;
   gap: 11px
}

.option-group.full {
   grid-column: 1/-1
}

.option-label {
   font: 600 12px/1 "Space Grotesk", sans-serif
}

.option-pills,
.size-options,
.color-options {
   display: flex;
   flex-wrap: wrap;
   gap: 9px
}

.option-pill,
.size-chip {
   min-height: 44px;
   padding: 0 15px;
   border: 1px solid #c9c5bd;
   border-radius: 7px;
   background: rgba(255, 255, 255, .36);
   color: var(--ink);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition: transform .2s, border-color .2s, background .2s, color .2s
}

.size-chip {
   min-width: 46px
}

.option-pill:hover,
.size-chip:hover {
   transform: translateY(-1px);
   border-color: #77736c
}

.option-pill.active,
.size-chip.active {
   background: var(--ink);
   border-color: var(--ink);
   color: #fff
}

.option-pill.disabled,
.size-chip.disabled {
   position: relative;
   opacity: .36;
   cursor: not-allowed;
   text-decoration: line-through;
   transform: none
}

.color-swatch {
   position: relative;
   width: 38px;
   height: 38px;
   border: 3px solid var(--paper);
   border-radius: 50%;
   box-shadow: 0 0 0 1px #bbb6ad, inset 0 0 0 1px rgba(0, 0, 0, .15);
   cursor: pointer;
   transition: transform .2s, box-shadow .2s, opacity .2s
}

.color-swatch:hover {
   transform: translateY(-2px)
}

.color-swatch.active {
   box-shadow: 0 0 0 2px var(--purple), inset 0 0 0 1px rgba(0, 0, 0, .15)
}

.color-swatch.disabled {
   opacity: .3;
   cursor: not-allowed;
   transform: none
}

.qty-stepper {
   display: inline-flex;
   align-items: center;
   width: max-content;
   height: 44px;
   border: 1px solid #c9c5bd;
   border-radius: 7px;
   background: rgba(255, 255, 255, .36)
}

.qty-stepper button {
   width: 40px;
   height: 42px;
   border: 0;
   background: transparent;
   color: var(--ink);
   font-size: 18px;
   cursor: pointer
}

.qty-stepper button:disabled {
   opacity: .3;
   cursor: not-allowed
}

.qty-stepper span {
   min-width: 32px;
   text-align: center;
   font: 600 12px/1 "Space Grotesk", sans-serif
}

.size-guide-link {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   width: max-content;
   padding: 0;
   border: 0;
   background: transparent;
   color: var(--ink);
   font-size: 11px;
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 4px;
   cursor: pointer
}

.size-guide-link:hover {
   color: var(--purple)
}

.product-stock {
   margin-top: -3px;
   color: #6d6962;
   font-size: 11px
}

.product-stock.low {
   color: #9a6900;
   font-weight: 600
}

.product-stock.out {
   color: #b42318;
   font-weight: 600
}

.c404-low-stock-badge {
   width: max-content;
   padding: 7px 10px;
   border: 1px solid rgba(154, 105, 0, .25);
   border-radius: 999px;
   background: rgba(242, 196, 65, .13);
   color: #875c00;
   font: 600 9px/1 "IBM Plex Mono", monospace;
   text-transform: uppercase;
   letter-spacing: .06em
}

.c404-stock-note {
   padding: 11px 13px;
   border-left: 2px solid var(--yellow);
   background: rgba(242, 196, 65, .08);
   color: #745000;
   font-size: 11px;
   line-height: 1.45
}

.product-actions-row {
   display: grid;
   gap: 12px;
   margin-top: 2px
}

.product-add-btn {
   width: 100%;
   min-height: 56px;
   padding: 0 20px;
   border: 1px solid var(--purple);
   border-radius: 7px;
   background: var(--purple);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: space-between;
   font: 600 13px/1 "Space Grotesk", sans-serif;
   cursor: pointer;
   box-shadow: 0 14px 30px rgba(103, 71, 255, .16);
   transition: transform .22s, background .22s, box-shadow .22s
}

.product-add-btn:hover {
   transform: translateY(-2px);
   background: #5939ee;
   box-shadow: 0 18px 34px rgba(103, 71, 255, .23)
}

.product-add-btn:disabled {
   opacity: .42;
   cursor: not-allowed;
   transform: none;
   box-shadow: none
}

.product-secondary-link {
   justify-self: center;
   color: #6e6a63;
   font-size: 10px;
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 4px
}

.product-secondary-link:hover {
   color: var(--purple)
}

.c404-product-trust {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0;
   margin-top: 3px;
   padding: 18px 0;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

.c404-product-trust>div {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   padding: 0 11px;
   border-right: 1px solid var(--line)
}

.c404-product-trust>div:first-child {
   padding-left: 0
}

.c404-product-trust>div:last-child {
   padding-right: 0;
   border: 0
}

.c404-product-trust>div>span {
   color: var(--purple);
   font: 500 17px/1 "IBM Plex Mono", monospace
}

.c404-product-trust p {
   display: grid;
   gap: 4px;
   margin: 0
}

.c404-product-trust b {
   font-size: 9px;
   line-height: 1.3
}

.c404-product-trust small {
   color: #77736c;
   font-size: 8px;
   line-height: 1.4
}

.product-feedback {
   margin-top: 17px
}

.product-error,
.product-loading {
   min-height: 55vh;
   display: grid;
   place-items: center;
   align-content: center;
   gap: 14px;
   color: #6e6a63;
   font: 500 12px/1.4 "IBM Plex Mono", monospace
}

.product-loading>span {
   width: 28px;
   height: 28px;
   border: 2px solid var(--line);
   border-top-color: var(--purple);
   border-radius: 50%;
   animation: productSpin .75s linear infinite
}

@keyframes productSpin {
   to {
      transform: rotate(360deg)
   }
}

.product-story {
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   gap: clamp(40px, 7vw, 110px);
   margin-top: 110px;
   padding: 75px clamp(28px, 5vw, 70px);
   background: #101010;
   color: #fff;
   border-radius: 12px
}

.product-story-eyebrow {
   color: var(--yellow);
   font: 500 10px/1 "IBM Plex Mono", monospace;
   letter-spacing: .15em
}

.product-story h2 {
   max-width: 520px;
   margin: 18px 0 0;
   font: 600 clamp(34px, 4vw, 57px)/1.02 "Space Grotesk", sans-serif;
   letter-spacing: -.045em
}

.product-story .product-description {
   color: #aaa;
   font-size: 13px;
   line-height: 1.8;
   white-space: pre-line
}

.product-story-features {
   grid-column: 1/-1;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   margin-top: 18px;
   border-top: 1px solid #2e2e2e;
   padding-top: 25px
}

.product-story-features span {
   display: flex;
   gap: 15px;
   font-size: 11px
}

.product-story-features b {
   color: var(--yellow);
   font: 500 10px/1.3 "IBM Plex Mono", monospace
}

.cart-success-box {
   display: grid;
   gap: 14px;
   padding: 16px;
   border: 1px solid rgba(23, 131, 78, .22);
   border-radius: 8px;
   background: rgba(23, 131, 78, .07)
}

.cart-success-main {
   display: grid;
   gap: 5px
}

.cart-success-main strong {
   color: #147847;
   font-size: 12px
}

.cart-success-main span {
   color: #5e5a54;
   font-size: 11px;
   line-height: 1.4
}

.cart-success-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px
}

.cart-success-btn {
   min-height: 42px;
   display: grid;
   place-items: center;
   border-radius: 6px;
   font-size: 10px;
   font-weight: 600
}

.cart-success-btn-primary {
   background: var(--ink);
   color: #fff
}

.cart-success-btn-secondary {
   border: 1px solid #c9c5bd;
   color: var(--ink)
}

.size-guide-modal {
   position: fixed;
   z-index: 9999;
   inset: 0;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 20px
}

.size-guide-modal.active {
   display: flex
}

.size-guide-overlay {
   position: absolute;
   inset: 0;
   background: rgba(10, 10, 10, .72);
   backdrop-filter: blur(8px)
}

.size-guide-dialog {
   position: relative;
   z-index: 2;
   width: min(760px, 96vw);
   max-height: 92vh;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .16);
   border-radius: 12px;
   background: #fff;
   box-shadow: 0 32px 90px rgba(0, 0, 0, .35)
}

.size-guide-image {
   display: block;
   width: 100%;
   height: auto;
   max-height: 92vh;
   object-fit: contain
}

.size-guide-close {
   position: absolute;
   z-index: 3;
   right: 12px;
   top: 12px;
   width: 40px;
   height: 40px;
   border: 0;
   border-radius: 50%;
   background: rgba(10, 10, 10, .86);
   color: #fff;
   font-size: 18px;
   cursor: pointer
}

.size-guide-close:hover {
   background: var(--purple)
}

body.size-guide-open {
   overflow: hidden
}

@media(max-width:1050px) {
   .product-page-grid {
      grid-template-columns: minmax(0, 1fr) minmax(350px, .82fr);
      gap: 40px
   }

   .c404-product-trust {
      grid-template-columns: 1fr
   }

   .c404-product-trust>div {
      padding: 10px 0;
      border-right: 0;
      border-bottom: 1px solid var(--line)
   }

   .c404-product-trust>div:last-child {
      border-bottom: 0
   }
}

@media(max-width:820px) {
   .product-page {
      padding: 24px 20px 80px
   }

   .product-page-breadcrumb {
      margin-bottom: 20px
   }

   .product-page-grid {
      grid-template-columns: 1fr;
      gap: 34px
   }

   .product-gallery-box {
      position: static
   }

   .product-info-box {
      padding: 0 2px
   }

   .product-title {
      font-size: clamp(34px, 9vw, 48px)
   }

   .product-story {
      grid-template-columns: 1fr;
      margin-top: 75px;
      padding: 55px 24px
   }

   .product-story-features {
      grid-template-columns: 1fr;
      gap: 15px
   }

   .product-story .product-description {
      grid-column: auto
   }
}

@media(max-width:520px) {
   .product-main-frame {
      border-radius: 8px
   }

   .product-gallery-hint {
      display: none
   }

   .product-thumb-button {
      flex-basis: 68px;
      width: 68px;
      height: 68px
   }

   .product-options-grid {
      grid-template-columns: 1fr
   }

   .option-group.full {
      grid-column: auto
   }

   .product-price {
      font-size: 27px
   }

   .cart-success-actions {
      grid-template-columns: 1fr
   }

   .size-guide-modal {
      padding: 10px
   }

   .size-guide-dialog {
      border-radius: 9px
   }
}

/* =========================================================
   CATALOG PAGE — PREMIUM LIGHT
   ========================================================= */
.catalog-premium-page {
   background: var(--paper);
   color: var(--ink)
}

.catalog-intro {
   max-width: var(--max);
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1.15fr .7fr;
   gap: 45px;
   align-items: end;
   padding: clamp(70px, 8vw, 120px) clamp(24px, 5vw, 80px) 65px
}

.catalog-intro h1 {
   margin: 18px 0 0;
   font: 600 clamp(48px, 6.4vw, 92px)/.94 "Space Grotesk", sans-serif;
   letter-spacing: -.06em
}

.catalog-intro>p {
   max-width: 470px;
   margin: 0 0 7px;
   color: #5f5b55;
   font-size: 14px;
   line-height: 1.75
}

.catalog-intro>code {
   grid-column: 1/-1;
   margin-top: 10px;
   color: #817d75;
   font: 400 10px/1.4 "IBM Plex Mono", monospace
}

.catalog-toolbar {
   position: sticky;
   z-index: 35;
   top: 78px;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   background: rgba(244, 242, 237, .94);
   backdrop-filter: blur(15px)
}

.catalog-toolbar-wrap {
   max-width: var(--max);
   margin: auto;
   min-height: 84px;
   padding: 14px clamp(24px, 5vw, 80px);
   display: grid;
   grid-template-columns: minmax(250px, 1fr) 190px 190px auto;
   gap: 12px;
   align-items: center
}

.catalog-search-field {
   position: relative
}

.catalog-search-field input,
.catalog-select-field select {
   width: 100%;
   height: 52px;
   border: 1px solid #cecac2;
   border-radius: 7px;
   background: rgba(255, 255, 255, .42);
   color: var(--ink);
   outline: 0;
   font-size: 12px;
   transition: border-color .2s, background .2s
}

.catalog-search-field input {
   padding: 0 45px 0 16px
}

.catalog-search-field input:focus,
.catalog-select-field select:focus {
   border-color: var(--purple);
   background: #fff
}

.catalog-search-field>span {
   position: absolute;
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 20px;
   pointer-events: none
}

.catalog-select-field {
   position: relative
}

.catalog-select-field label {
   position: absolute;
   z-index: 1;
   left: 13px;
   top: 8px;
   color: #77736c;
   font: 500 8px/1 "IBM Plex Mono", monospace;
   text-transform: uppercase;
   letter-spacing: .08em;
   pointer-events: none
}

.catalog-select-field select {
   appearance: none;
   padding: 19px 34px 3px 13px;
   cursor: pointer;
   background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
   background-position: calc(100% - 16px) 23px, calc(100% - 11px) 23px;
   background-size: 5px 5px, 5px 5px;
   background-repeat: no-repeat
}

.catalog-count {
   justify-self: end;
   color: #77736c;
   font: 500 9px/1 "IBM Plex Mono", monospace;
   text-transform: uppercase;
   letter-spacing: .08em;
   white-space: nowrap
}

.catalog-results {
   max-width: var(--max);
   margin: 0 auto;
   padding: 70px clamp(24px, 5vw, 80px) 110px;
   scroll-margin-top: 175px
}

.catalog-results-head {
   display: flex;
   align-items: end;
   justify-content: space-between;
   margin-bottom: 30px
}

.catalog-results-head h2 {
   margin: 0;
   font: 600 clamp(30px, 3.2vw, 45px)/1 "Space Grotesk", sans-serif;
   letter-spacing: -.04em
}

.catalog-results-head>span {
   color: #77736c;
   font: 400 9px/1 "IBM Plex Mono", monospace
}

.catalog-product-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: clamp(14px, 1.5vw, 22px)
}

.catalog-premium-page .product-card-404 {
   min-width: 0;
   padding: 7px 7px 18px;
   border: 1px solid rgba(10, 10, 10, .055);
   border-radius: 12px;
   background: rgba(255, 255, 255, .28);
   transition: transform .35s, background .35s, border-color .35s, box-shadow .35s
}

.catalog-premium-page .product-card-404:hover {
   transform: translateY(-5px);
   background: rgba(255, 255, 255, .56);
   border-color: rgba(103, 71, 255, .14);
   box-shadow: 0 22px 46px rgba(10, 10, 10, .075)
}

.catalog-product-link {
   display: block
}

.product-card-image-wrap {
   position: relative;
   width: 100%;
   overflow: hidden;
   border-radius: 8px;
   background: #dfdcd6;
   box-shadow: 0 13px 27px rgba(10, 10, 10, .065);
   isolation: isolate
}

.product-card-image-wrap:after {
   content: "";
   position: absolute;
   inset: 0;
   border: 1px solid rgba(255, 255, 255, .15);
   border-radius: inherit;
   box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .04);
   pointer-events: none
}

.product-card-image {
   display: block;
   width: 100%;
   aspect-ratio: 1/1.18;
   object-fit: cover;
   transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .35s
}

.product-card-404:hover .product-card-image {
   transform: scale(1.025);
   filter: saturate(1.025) contrast(1.01)
}

.product-card-badge-img {
   position: absolute;
   z-index: 3;
   left: 10px;
   top: 10px;
   width: min(112px, 44%);
   height: auto;
   filter: drop-shadow(0 7px 14px rgba(0, 0, 0, .25));
   pointer-events: none
}

.card-badge {
   position: absolute;
   z-index: 4;
   left: 11px;
   top: 11px;
   padding: 7px 9px;
   border-radius: 4px;
   background: #111;
   color: #fff;
   font: 600 8px/1 "IBM Plex Mono", monospace;
   text-transform: uppercase;
   letter-spacing: .06em
}

.catalog-card-action {
   position: absolute;
   z-index: 3;
   left: 10px;
   right: 10px;
   bottom: 10px;
   height: 42px;
   padding: 0 13px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-radius: 6px;
   background: rgba(255, 255, 255, .93);
   color: #111;
   font-size: 10px;
   font-weight: 600;
   transform: translateY(58px);
   transition: transform .3s
}

.product-card-404:hover .catalog-card-action {
   transform: none
}

.catalog-premium-page .product-meta {
   padding: 16px 5px 0
}

.catalog-premium-page .product-category {
   display: block;
   color: var(--purple);
   font: 500 8px/1 "IBM Plex Mono", monospace;
   text-transform: uppercase;
   letter-spacing: .1em
}

.catalog-premium-page .product-meta h3 {
   min-height: 40px;
   margin: 9px 0 14px;
   font: 600 13px/1.4 "Space Grotesk", sans-serif;
   letter-spacing: -.015em
}

.catalog-price-row {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 8px
}

.catalog-price-row .price {
   margin: 0;
   font: 600 14px/1 "Space Grotesk", sans-serif
}

.catalog-price-row small {
   color: #77736c;
   font-size: 8px
}

.catalog-skeleton {
   height: 470px;
   border-radius: 10px;
   background: linear-gradient(100deg, #e2dfd9 30%, #ece9e3 50%, #e2dfd9 70%);
   background-size: 200% 100%;
   animation: loading 1.4s infinite
}

.catalog-empty-state {
   grid-column: 1/-1;
   min-height: 420px;
   display: grid;
   place-items: center;
   align-content: center;
   text-align: center;
   padding: 40px
}

.catalog-empty-state>span {
   color: var(--purple);
   font: 500 9px/1 "IBM Plex Mono", monospace;
   letter-spacing: .12em
}

.catalog-empty-state h2 {
   max-width: 620px;
   margin: 17px 0 8px;
   font: 600 clamp(30px, 4vw, 52px)/1.04 "Space Grotesk", sans-serif;
   letter-spacing: -.04em
}

.catalog-empty-state p {
   color: #77736c;
   font-size: 12px
}

.catalog-empty-state button {
   margin-top: 18px;
   min-height: 44px;
   padding: 0 18px;
   border: 1px solid var(--ink);
   border-radius: 6px;
   background: var(--ink);
   color: #fff;
   font-size: 11px;
   font-weight: 600;
   cursor: pointer
}

.pagination404 {
   margin-top: 60px
}

.pagination404-wrap {
   display: flex;
   justify-content: center;
   gap: 7px
}

.page-btn {
   width: 42px;
   height: 42px;
   border: 1px solid #ccc7be;
   border-radius: 6px;
   background: transparent;
   color: #55514b;
   font: 600 11px/1 "IBM Plex Mono", monospace;
   cursor: pointer;
   transition: background .2s, color .2s, border-color .2s
}

.page-btn:hover {
   border-color: var(--ink)
}

.page-btn.active {
   border-color: var(--ink);
   background: var(--ink);
   color: #fff
}

@media(max-width:1080px) {
   .catalog-product-grid {
      grid-template-columns: repeat(3, 1fr)
   }

   .catalog-toolbar-wrap {
      grid-template-columns: 1fr 170px 170px
   }

   .catalog-count {
      grid-column: 1/-1;
      justify-self: start
   }
}

@media(max-width:820px) {
   .catalog-intro {
      grid-template-columns: 1fr;
      padding-top: 65px
   }

   .catalog-intro>p {
      max-width: 600px
   }

   .catalog-toolbar {
      top: 68px
   }

   .catalog-toolbar-wrap {
      grid-template-columns: 1fr 1fr
   }

   .catalog-search-field {
      grid-column: 1/-1
   }

   .catalog-count {
      grid-column: 1/-1
   }

   .catalog-product-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .catalog-card-action {
      transform: none
   }

   .catalog-results {
      padding-top: 55px
   }
}

@media(max-width:520px) {
   .catalog-intro {
      padding: 55px 20px 42px
   }

   .catalog-intro h1 {
      font-size: 49px
   }

   .catalog-toolbar {
      position: relative;
      top: auto
   }

   .catalog-toolbar-wrap {
      padding: 15px 20px;
      grid-template-columns: 1fr
   }

   .catalog-search-field,
   .catalog-count {
      grid-column: auto
   }

   .catalog-results {
      padding: 50px 14px 80px
   }

   .catalog-results-head {
      padding: 0 6px
   }

   .catalog-results-head>span {
      display: none
   }

   .catalog-product-grid {
      gap: 9px
   }

   .catalog-premium-page .product-card-404 {
      padding: 5px 5px 14px;
      border-radius: 9px
   }

   .product-card-image-wrap {
      border-radius: 6px
   }

   .product-card-image {
      aspect-ratio: 1/1.22
   }

   .catalog-premium-page .product-meta {
      padding: 13px 3px 0
   }

   .catalog-premium-page .product-meta h3 {
      font-size: 11px;
      min-height: 46px
   }

   .catalog-price-row {
      display: grid;
      gap: 5px
   }

   .product-card-badge-img {
      left: 6px;
      top: 6px;
      width: 55%
   }
}

/* =========================================================
   FOOTER PREMIUM — SHARED
   ========================================================= */
.footer-premium {
   width: 100%;
   margin: 0;
   padding: 72px max(24px, calc((100vw - var(--max))/2 + 80px)) 28px;
   background: #0b0b0b;
   color: #fff;
   border-top: 1px solid rgba(255, 255, 255, .08)
}

.footer-premium a {
   color: inherit;
   text-decoration: none
}

.footer-premium-grid {
   display: grid;
   grid-template-columns: minmax(260px, 1.05fr) minmax(280px, .9fr) minmax(230px, .75fr);
   gap: clamp(38px, 6vw, 90px);
   align-items: start
}

.footer-brand-column {
   display: flex;
   flex-direction: column;
   align-items: flex-start
}

.footer-brand-logo {
   display: inline-flex;
   width: max-content
}

.footer-brand-logo img {
   display: block;
   width: 240px;
   height: 78px;
   object-fit: contain;
   object-position: left center
}

.footer-brand-column>p {
   max-width: 320px;
   margin: 18px 0 0;
   color: rgba(255, 255, 255, .58);
   font-size: 12px;
   line-height: 1.7
}

.footer-payment {
   display: grid;
   justify-items: start;
   gap: 10px;
   margin-top: 28px
}

.footer-payment>span {
   color: rgba(255, 255, 255, .68);
   font-size: 10px;
   font-weight: 600
}

.footer-payment>strong {
   color: #57a9ee;
   font: 600 19px/1 "Space Grotesk", sans-serif
}

.footer-payment-methods {
   display: flex;
   flex-wrap: wrap;
   gap: 7px
}

.footer-payment-methods span {
   min-height: 25px;
   display: inline-flex;
   align-items: center;
   padding: 0 10px;
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: 5px;
   background: rgba(255, 255, 255, .05);
   color: rgba(255, 255, 255, .72);
   font-size: 9px;
   font-weight: 600
}

.footer-title {
   display: block;
   margin-bottom: 22px;
   color: #fff;
   font: 500 10px/1.3 "IBM Plex Mono", monospace;
   letter-spacing: .14em
}

.footer-contact-column ul {
   display: grid;
   gap: 15px;
   margin: 0;
   padding: 0;
   list-style: none
}

.footer-contact-column li {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   color: rgba(255, 255, 255, .62);
   font-size: 12px;
   line-height: 1.5
}

.footer-contact-column li strong {
   color: rgba(255, 255, 255, .9)
}

.footer-contact-column li a {
   color: #8bc8ff
}

.footer-support-links {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 18px;
   margin-top: 28px
}

.footer-support-links a {
   color: rgba(255, 255, 255, .64);
   font-size: 10px;
   text-decoration: underline;
   text-underline-offset: 4px
}

.footer-support-links a:hover {
   color: #fff
}

.footer-social-links {
   display: grid;
   gap: 12px
}

.footer-social-links>a {
   display: flex;
   align-items: center;
   gap: 13px;
   padding: 12px;
   border: 1px solid rgba(255, 255, 255, .09);
   border-radius: 8px;
   background: rgba(255, 255, 255, .025);
   transition: transform .2s, background .2s
}

.footer-social-links>a:hover {
   transform: translateY(-2px);
   background: rgba(255, 255, 255, .055)
}

.social-badge {
   width: 38px;
   height: 38px;
   flex: 0 0 38px;
   display: grid;
   place-items: center;
   border-radius: 9px;
   color: #fff;
   font-size: 22px;
   font-weight: 700
}

.instagram-badge {
   background: radial-gradient(circle at 32% 100%, #ffd600 0 20%, #ff7a00 35%, #ff0169 58%, #d300c5 78%, #7638fa 100%)
}

.facebook-badge {
   background: #1877f2;
   font-family: Arial, sans-serif
}

.footer-social-links>a>span:last-child {
   display: grid;
   gap: 4px
}

.footer-social-links strong {
   font-size: 12px
}

.footer-social-links small {
   color: rgba(255, 255, 255, .52);
   font-size: 9px
}

.footer-premium-bottom {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 24px;
   margin-top: 54px;
   padding-top: 25px;
   border-top: 1px solid rgba(255, 255, 255, .1);
   color: rgba(255, 255, 255, .44);
   font: 400 9px/1.5 "IBM Plex Mono", monospace
}

.footer-legal-links {
   display: flex;
   gap: 18px
}

.footer-legal-links a {
   color: rgba(255, 255, 255, .55)
}

.footer-legal-links a:hover {
   color: #fff
}

.footer-signature {
   justify-self: end;
   color: rgba(255, 255, 255, .34)
}

@media(max-width:980px) {
   .footer-premium-grid {
      grid-template-columns: 1fr 1fr
   }

   .footer-social-column {
      grid-column: 1/-1
   }

   .footer-social-links {
      grid-template-columns: 1fr 1fr
   }

   .footer-premium-bottom {
      grid-template-columns: 1fr auto
   }

   .footer-signature {
      display: none
   }
}

@media(max-width:640px) {
   .footer-premium {
      padding: 55px 22px 24px
   }

   .footer-premium-grid {
      grid-template-columns: 1fr;
      gap: 44px
   }

   .footer-social-column {
      grid-column: auto
   }

   .footer-brand-logo img {
      width: 210px;
      height: 68px
   }

   .footer-social-links {
      grid-template-columns: 1fr
   }

   .footer-premium-bottom {
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 44px
   }

   .footer-legal-links {
      flex-wrap: wrap
   }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-premium-page {
   background: var(--paper);
   color: var(--ink)
}

.about-hero {
   min-height: 660px;
   display: grid;
   grid-template-columns: 1.08fr .92fr;
   border-bottom: 1px solid var(--line)
}

.about-hero-copy {
   padding: clamp(75px, 9vw, 135px) clamp(35px, 6vw, 105px);
   display: flex;
   flex-direction: column;
   justify-content: center
}

.about-hero h1 {
   max-width: 850px;
   margin: 24px 0 28px;
   font: 600 clamp(50px, 6vw, 88px)/.96 "Space Grotesk", sans-serif;
   letter-spacing: -.06em
}

.about-hero h1 span {
   color: #77736c
}

.about-hero-copy>p {
   max-width: 590px;
   color: #55514b;
   font-size: 15px;
   line-height: 1.7
}

.about-actions {
   display: flex;
   align-items: center;
   gap: 27px;
   margin-top: 32px
}

.button-purple {
   border-color: var(--purple);
   background: var(--purple);
   color: #fff
}

.about-text-link {
   font-size: 11px;
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 5px
}

.about-hero-art {
   position: relative;
   overflow: hidden;
   display: grid;
   place-items: center;
   background: #111;
   color: #fff
}

.about-hero-art>span {
   font: 700 clamp(190px, 24vw, 380px)/1 "Space Grotesk", sans-serif;
   letter-spacing: -.12em;
   color: #191919;
   transform: translateX(-3%)
}

.about-hero-art>code {
   position: absolute;
   color: var(--yellow);
   font: 500 10px/1 "IBM Plex Mono", monospace;
   letter-spacing: .2em
}

.about-hero-art>div {
   position: absolute;
   right: 28px;
   bottom: 25px;
   display: flex;
   gap: 14px
}

.about-hero-art b {
   color: #777;
   font: 500 8px/1 "IBM Plex Mono", monospace;
   letter-spacing: .12em
}

.about-origin,
.about-pillars {
   max-width: var(--max);
   margin: auto;
   padding: 110px clamp(24px, 5vw, 80px)
}

.about-section-label {
   display: flex;
   align-items: center;
   gap: 13px;
   color: #77736c;
   font: 500 9px/1 "IBM Plex Mono", monospace;
   letter-spacing: .12em
}

.about-section-label span {
   color: var(--purple)
}

.about-origin-content {
   display: grid;
   grid-template-columns: 1.1fr .8fr;
   gap: clamp(55px, 9vw, 145px);
   margin-top: 40px
}

.about-origin h2 {
   margin: 0;
   font: 600 clamp(43px, 5vw, 72px)/1 "Space Grotesk", sans-serif;
   letter-spacing: -.052em
}

.about-origin-content>div {
   display: grid;
   gap: 17px
}

.about-origin p {
   margin: 0;
   color: #5f5b55;
   font-size: 14px;
   line-height: 1.8
}

.about-manifesto {
   padding: 105px max(24px, calc((100vw - var(--max))/2 + 80px));
   background: var(--purple);
   color: #fff
}

.about-manifesto .eyebrow {
   color: #fff;
   opacity: .66
}

.about-manifesto blockquote {
   max-width: 1160px;
   margin: 30px 0 37px;
   font: 600 clamp(38px, 5vw, 72px)/1.06 "Space Grotesk", sans-serif;
   letter-spacing: -.045em
}

.about-manifesto code {
   font: 400 10px/1 "IBM Plex Mono", monospace;
   opacity: .62
}

.about-pillar-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0;
   margin-top: 40px;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

.about-pillar-grid article {
   min-height: 300px;
   padding: 35px 34px;
   border-right: 1px solid var(--line)
}

.about-pillar-grid article:last-child {
   border: 0
}

.about-pillar-grid article>span {
   color: var(--purple);
   font: 500 9px/1 "IBM Plex Mono", monospace
}

.about-pillar-grid h3 {
   margin: 65px 0 16px;
   font: 600 25px/1.08 "Space Grotesk", sans-serif;
   letter-spacing: -.035em
}

.about-pillar-grid p {
   margin: 0;
   color: #68645d;
   font-size: 12px;
   line-height: 1.65
}

.about-mission {
   display: grid;
   grid-template-columns: 1.05fr .75fr;
   gap: clamp(55px, 9vw, 140px);
   padding: 95px max(24px, calc((100vw - var(--max))/2 + 80px));
   background: #111;
   color: #fff
}

.about-mission h2 {
   max-width: 700px;
   margin: 18px 0 0;
   font: 600 clamp(42px, 5vw, 70px)/1.02 "Space Grotesk", sans-serif;
   letter-spacing: -.05em
}

.about-mission>div:last-child {
   display: flex;
   flex-direction: column;
   justify-content: center
}

.about-mission p {
   margin: 0 0 16px;
   color: #aaa;
   font-size: 13px;
   line-height: 1.75
}

.about-mission a {
   align-self: flex-start;
   margin-top: 16px;
   color: var(--yellow);
   font-size: 11px;
   font-weight: 600
}

/* =========================================================
   EXCHANGES & RETURNS PAGE
   ========================================================= */
.policy-premium-page {
   background: var(--paper);
   color: var(--ink)
}

.policy-page {
   max-width: var(--max);
   margin: auto;
   padding: 0 clamp(24px, 5vw, 80px) 110px
}

.policy-hero {
   padding: clamp(75px, 9vw, 125px) 0 75px;
   border-bottom: 1px solid var(--line)
}

.policy-hero h1 {
   max-width: 950px;
   margin: 23px 0 27px;
   font: 600 clamp(52px, 7vw, 96px)/.93 "Space Grotesk", sans-serif;
   letter-spacing: -.065em
}

.policy-hero h1 span {
   color: #77736c
}

.policy-hero>p {
   max-width: 690px;
   margin: 0;
   color: #5f5b55;
   font-size: 14px;
   line-height: 1.75
}

.policy-summary {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   max-width: 850px;
   margin-top: 45px;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

.policy-summary>div {
   display: grid;
   gap: 5px;
   padding: 19px 25px;
   border-right: 1px solid var(--line)
}

.policy-summary>div:first-child {
   padding-left: 0
}

.policy-summary>div:last-child {
   border: 0
}

.policy-summary b {
   font: 600 16px/1.2 "Space Grotesk", sans-serif
}

.policy-summary span {
   color: #77736c;
   font-size: 9px
}

.policy-process {
   padding: 90px 0
}

.policy-section-heading {
   display: flex;
   align-items: end;
   justify-content: space-between;
   margin-bottom: 40px
}

.policy-section-heading h2 {
   margin: 0;
   font: 600 clamp(38px, 4.5vw, 62px)/1 "Space Grotesk", sans-serif;
   letter-spacing: -.045em
}

.policy-process ol {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin: 0;
   padding: 0;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   list-style: none
}

.policy-process li {
   min-height: 265px;
   padding: 28px 26px;
   border-right: 1px solid var(--line);
   display: flex;
   flex-direction: column;
   justify-content: space-between
}

.policy-process li:last-child {
   border: 0
}

.policy-process li>span {
   color: var(--purple);
   font: 500 9px/1 "IBM Plex Mono", monospace
}

.policy-process h3 {
   margin: 0 0 11px;
   font: 600 19px/1.1 "Space Grotesk", sans-serif
}

.policy-process p {
   margin: 0;
   color: #68645d;
   font-size: 11px;
   line-height: 1.6
}

.policy-content-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 14px
}

.policy-content-grid article {
   min-height: 330px;
   padding: 36px;
   border: 1px solid var(--line);
   border-radius: 9px;
   background: rgba(255, 255, 255, .3)
}

.policy-content-grid article>span {
   color: var(--purple);
   font: 500 9px/1 "IBM Plex Mono", monospace
}

.policy-content-grid h2 {
   margin: 42px 0 16px;
   font: 600 clamp(25px, 2.5vw, 35px)/1.05 "Space Grotesk", sans-serif;
   letter-spacing: -.035em
}

.policy-content-grid p,
.policy-content-grid li {
   color: #605c55;
   font-size: 12px;
   line-height: 1.68
}

.policy-content-grid ul {
   display: grid;
   gap: 8px;
   margin: 18px 0 0;
   padding: 0;
   list-style: none
}

.policy-content-grid li {
   position: relative;
   padding-left: 18px
}

.policy-content-grid li:before {
   content: "—";
   position: absolute;
   left: 0;
   color: var(--purple)
}

.policy-content-grid .policy-warning {
   background: #151515;
   color: #fff;
   border-color: #151515
}

.policy-warning h2 {
   color: #fff
}

.policy-warning p,
.policy-warning li {
   color: #aaa
}

.policy-warning>span {
   color: var(--yellow)
}

.policy-warning li:before {
   color: var(--yellow)
}

.policy-contact-card {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 45px;
   margin-top: 75px;
   padding: 55px 60px;
   border-radius: 10px;
   background: #e8e5de
}

.policy-contact-card h2 {
   margin: 15px 0 10px;
   font: 600 clamp(36px, 4vw, 55px)/1 "Space Grotesk", sans-serif;
   letter-spacing: -.045em
}

.policy-contact-card p {
   margin: 0;
   color: #68645d;
   font-size: 12px
}

.policy-contact-card>div:last-child {
   display: flex;
   align-items: center;
   gap: 20px
}

.policy-contact-card>div:last-child>a:last-child {
   font-size: 10px;
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 4px;
   white-space: nowrap
}

@media(max-width:900px) {
   .about-hero {
      grid-template-columns: 1fr
   }

   .about-hero-art {
      min-height: 480px
   }

   .about-origin-content,
   .about-mission {
      grid-template-columns: 1fr
   }

   .about-pillar-grid {
      grid-template-columns: 1fr
   }

   .about-pillar-grid article {
      min-height: auto;
      border-right: 0;
      border-bottom: 1px solid var(--line)
   }

   .about-pillar-grid h3 {
      margin-top: 35px
   }

   .policy-process ol {
      grid-template-columns: repeat(2, 1fr)
   }

   .policy-process li:nth-child(2) {
      border-right: 0
   }

   .policy-process li:nth-child(-n+2) {
      border-bottom: 1px solid var(--line)
   }

   .policy-contact-card {
      align-items: flex-start;
      flex-direction: column
   }
}

@media(max-width:640px) {
   .about-hero-copy {
      padding: 65px 20px 55px
   }

   .about-hero h1 {
      font-size: 49px
   }

   .about-actions {
      align-items: flex-start;
      flex-direction: column
   }

   .about-hero-art {
      min-height: 360px
   }

   .about-origin,
   .about-pillars {
      padding: 75px 20px
   }

   .about-origin-content {
      gap: 35px
   }

   .about-origin h2 {
      font-size: 42px
   }

   .about-manifesto {
      padding: 70px 20px
   }

   .about-manifesto blockquote {
      font-size: 37px
   }

   .about-pillar-grid article {
      padding: 30px 5px
   }

   .about-mission {
      padding: 70px 20px
   }

   .policy-page {
      padding: 0 20px 80px
   }

   .policy-hero {
      padding: 65px 0 55px
   }

   .policy-hero h1 {
      font-size: 52px
   }

   .policy-summary {
      grid-template-columns: 1fr
   }

   .policy-summary>div {
      padding: 15px 0;
      border-right: 0;
      border-bottom: 1px solid var(--line)
   }

   .policy-summary>div:last-child {
      border-bottom: 0
   }

   .policy-process {
      padding: 65px 0
   }

   .policy-section-heading {
      align-items: flex-start;
      flex-direction: column;
      gap: 15px
   }

   .policy-process ol {
      grid-template-columns: 1fr
   }

   .policy-process li {
      min-height: auto;
      padding: 25px 3px;
      gap: 45px;
      border-right: 0;
      border-bottom: 1px solid var(--line) !important
   }

   .policy-process li:last-child {
      border-bottom: 0 !important
   }

   .policy-content-grid {
      grid-template-columns: 1fr
   }

   .policy-content-grid article {
      min-height: auto;
      padding: 30px 24px
   }

   .policy-content-grid h2 {
      margin-top: 32px
   }

   .policy-contact-card {
      margin-top: 55px;
      padding: 40px 24px
   }

   .policy-contact-card>div:last-child {
      align-items: flex-start;
      flex-direction: column
   }
}

/* =========================================================
   HOME EDITORIAL — HERO + UNIVERSES
   ========================================================= */
html,
body {
   max-width: 100%;
   overflow-x: clip
}

@supports not (overflow:clip) {
   body {
      overflow-x: hidden
   }
}

.hero-editorial-image {
   position: relative;
   display: block;
   min-width: 0;
   overflow: hidden;
   background: #d8d4cd;
   isolation: isolate
}

.hero-editorial-image>img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .5s
}

.hero-editorial-image:hover>img {
   transform: scale(1.015);
   filter: saturate(1.025) contrast(1.01)
}

.hero-image-shade {
   position: absolute;
   z-index: 1;
   inset: 0;
   background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, .48) 100%);
   pointer-events: none
}

.hero-image-label {
   position: absolute;
   z-index: 2;
   left: clamp(22px, 3vw, 46px);
   right: clamp(22px, 3vw, 46px);
   bottom: clamp(22px, 3vw, 40px);
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 24px;
   color: #fff;
   text-shadow: 0 2px 18px rgba(0, 0, 0, .35)
}

.hero-image-label span {
   font: 500 9px/1 "IBM Plex Mono", monospace;
   letter-spacing: .15em
}

.hero-image-label strong {
   font: 600 18px/1 "Space Grotesk", sans-serif;
   letter-spacing: .04em
}

.universe-editorial-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
   grid-template-rows: 280px 280px;
   gap: 16px
}

.universe-card {
   position: relative;
   display: block;
   min-width: 0;
   overflow: hidden;
   color: #fff;
   background: #171717;
   isolation: isolate
}

.universe-dev {
   grid-row: 1/3
}

.universe-card>img {
   position: absolute;
   z-index: 0;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .75s cubic-bezier(.2, .7, .2, 1), filter .45s
}

.universe-card:hover>img {
   transform: scale(1.025);
   filter: saturate(1.025) contrast(1.02)
}

.universe-dev>img {
   object-position: center
}

.universe-geek>img,
.universe-gamer>img {
   object-position: center 34%
}

.universe-overlay {
   position: absolute;
   z-index: 1;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .78) 100%);
   pointer-events: none
}

.universe-number {
   position: absolute;
   z-index: 2;
   top: 25px;
   right: 27px;
   color: rgba(255, 255, 255, .72);
   font: 500 10px/1 "IBM Plex Mono", monospace;
   letter-spacing: .12em
}

.universe-content {
   position: absolute;
   z-index: 2;
   left: clamp(25px, 3vw, 44px);
   right: clamp(25px, 3vw, 44px);
   bottom: clamp(28px, 3vw, 43px)
}

.universe-content small {
   font: 500 9px/1 "IBM Plex Mono", monospace;
   letter-spacing: .14em
}

.universe-content h3 {
   max-width: 560px;
   margin: 13px 0 0;
   font: 600 clamp(28px, 3.1vw, 49px)/1.01 "Space Grotesk", sans-serif;
   letter-spacing: -.045em
}

.universe-geek .universe-content h3,
.universe-gamer .universe-content h3 {
   font-size: clamp(25px, 2.25vw, 34px)
}

.universe-content p {
   margin: 14px 0 0;
   color: rgba(255, 255, 255, .76);
   font-size: 12px
}

.universe-content strong {
   display: flex;
   align-items: center;
   gap: 12px;
   width: max-content;
   margin-top: 25px;
   font-size: 10px;
   font-weight: 600
}

.universe-content strong span {
   transition: transform .25s
}

.universe-card:hover .universe-content strong span {
   transform: translateX(4px)
}

/* =========================================================
   MOBILE — DENSIDADE, RITMO E CONTINUIDADE VISUAL
   ========================================================= */
@media(max-width:760px) {
   .hero {
      min-height: 0
   }

   .hero-copy {
      padding: 45px 20px 34px
   }

   .hero h1 {
      margin: 17px 0 20px;
      font-size: clamp(39px, 11.7vw, 47px);
      line-height: .99
   }

   .hero-copy>p {
      margin: 0;
      font-size: 13px;
      line-height: 1.6
   }

   .hero-ctas {
      flex-direction: row;
      align-items: center;
      gap: 10px;
      margin: 25px 0 29px
   }

   .hero-ctas .button {
      height: 48px;
      padding: 0 17px;
      gap: 13px;
      white-space: nowrap
   }

   .hero-copy>code {
      font-size: 9px;
      line-height: 1.5
   }

   .hero-editorial-image {
      height: min(112vw, 435px);
      min-height: 365px
   }

   .hero-editorial-image>img {
      object-position: 58% center
   }

   .hero-image-label {
      left: 18px;
      right: 18px;
      bottom: 18px
   }

   .hero-image-label strong {
      font-size: 15px
   }

   .benefits {
      gap: 0;
      padding: 22px 18px
   }

   .benefits div {
      min-width: 0;
      padding-left: 15px
   }

   .benefits div:nth-child(odd) {
      padding-left: 0;
      border-left: 0
   }

   .benefits div:nth-child(n+3) {
      margin-top: 17px;
      padding-top: 17px;
      border-top: 1px solid var(--line)
   }

   .benefits b {
      font-size: 11px
   }

   .benefits span {
      font-size: 9px;
      line-height: 1.4
   }

   .section {
      padding: 58px 18px
   }

   .section-head {
      margin-bottom: 29px
   }

   .section h2 {
      font-size: 34px
   }

   .product-grid {
      margin-right: -18px;
      padding: 0 18px 8px 0;
      gap: 12px;
      scrollbar-width: none
   }

   .product-grid::-webkit-scrollbar,
   .reviews::-webkit-scrollbar,
   .universe-editorial-grid::-webkit-scrollbar {
      display: none
   }

   .product-card,
   .product-skeleton {
      min-width: min(78vw, 330px);
      scroll-snap-align: start
   }

   .product-image,
   .product-skeleton {
      height: auto;
      aspect-ratio: 4/5
   }

   .product-info {
      padding-top: 14px
   }

   .universe-section {
      padding-top: 53px
   }

   .universe-editorial-grid {
      display: flex;
      grid-template: none;
      gap: 12px;
      overflow-x: auto;
      margin-right: -18px;
      padding: 0 18px 8px 0;
      scroll-snap-type: x mandatory;
      overscroll-behavior-inline: contain;
      scrollbar-width: none
   }

   .universe-card {
      flex: 0 0 min(84vw, 345px);
      height: 420px;
      scroll-snap-align: start
   }

   .universe-dev {
      grid-row: auto
   }

   .universe-card>img {
      object-position: center
   }

   .universe-number {
      top: 19px;
      right: 19px
   }

   .universe-content {
      left: 20px;
      right: 20px;
      bottom: 24px
   }

   .universe-content h3,
   .universe-geek .universe-content h3,
   .universe-gamer .universe-content h3 {
      font-size: 31px
   }

   .universe-content p {
      font-size: 11px
   }

   .universe-content strong {
      margin-top: 20px
   }

   .manifesto-art {
      min-height: 285px
   }

   .manifesto-copy {
      padding: 53px 20px
   }

   .manifesto-copy p {
      margin: 22px 0 29px;
      font-size: 13px
   }

   .proof-section {
      padding-right: 18px;
      padding-left: 18px
   }

   .reviews {
      display: flex;
      grid-template-columns: none;
      gap: 12px;
      overflow-x: auto;
      margin-right: -18px;
      padding: 0 18px 7px 0;
      scroll-snap-type: x mandatory;
      scrollbar-width: none
   }

   .reviews blockquote {
      flex: 0 0 min(82vw, 340px);
      min-height: 220px;
      padding: 25px;
      scroll-snap-align: start
   }

   .reviews blockquote p {
      margin-top: 21px;
      font-size: 16px
   }

   .newsletter {
      gap: 24px;
      padding: 48px 20px
   }

   .newsletter h2 {
      font-size: 39px
   }
}

@media(max-width:520px) {
   .catalog-intro {
      padding: 40px 18px 32px
   }

   .catalog-intro h1 {
      font-size: 42px
   }

   .catalog-intro>p {
      font-size: 13px;
      line-height: 1.6
   }

   .catalog-toolbar-wrap {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 13px 18px
   }

   .catalog-search-field {
      grid-column: 1/-1
   }

   .catalog-count {
      grid-column: 1/-1
   }

   .catalog-results {
      padding: 42px 18px 72px
   }

   .catalog-results-head {
      padding: 0;
      margin-bottom: 24px
   }

   .catalog-product-grid {
      gap: 12px
   }

   .catalog-premium-page .product-card-404 {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent
   }

   .product-card-image-wrap {
      border-radius: 5px;
      box-shadow: 0 10px 22px rgba(10, 10, 10, .06)
   }

   .catalog-card-action {
      display: none
   }

   .catalog-premium-page .product-meta {
      padding: 12px 1px 0
   }

   .catalog-premium-page .product-meta h3 {
      min-height: 45px;
      margin: 8px 0 11px;
      font-size: 12px;
      line-height: 1.35
   }

   .catalog-price-row {
      gap: 4px
   }

   .catalog-price-row .price {
      font-size: 13px
   }

   .product-card-badge-img {
      left: 6px;
      top: 6px;
      width: 50%
   }

   .pagination404 {
      margin-top: 45px
   }
}

@media(max-width:640px) {
   .footer-premium {
      padding: 47px 20px 22px
   }

   .footer-premium-grid {
      gap: 34px
   }

   .footer-brand-logo img {
      width: 184px;
      height: 60px
   }

   .footer-title {
      margin-bottom: 17px
   }

   .footer-support-links {
      margin-top: 22px
   }

   .footer-premium-bottom {
      margin-top: 35px
   }
}


/* =========================================================
   INSTITUCIONAL V2 — CONTATO, PRIVACIDADE E TROCAS
   Totalmente isolado para não afetar as páginas comerciais.
   ========================================================= */
body.institutional-page {
   background: var(--paper);
   color: var(--ink)
}

body.institutional-page > [data-include="/includes/header.html"] {
   display: contents
}

body.institutional-page .institutional-main {
   width: min(100%, var(--max));
   margin: 0 auto;
   padding: 0 clamp(24px, 5vw, 80px) 110px
}

body.institutional-page .institutional-hero {
   display: grid;
   grid-template-columns: minmax(0, 1.14fr) minmax(340px, .86fr);
   gap: clamp(55px, 8vw, 130px);
   align-items: center;
   min-height: 520px;
   padding: clamp(75px, 8vw, 118px) 0;
   border-bottom: 1px solid var(--line)
}

body.institutional-page .institutional-kicker {
   display: flex;
   align-items: center;
   gap: 12px;
   color: var(--purple);
   font: 500 10px/1 "IBM Plex Mono", monospace;
   letter-spacing: .16em;
   text-transform: uppercase
}

body.institutional-page .institutional-kicker::before {
   content: "";
   width: 28px;
   height: 1px;
   background: currentColor
}

body.institutional-page .institutional-hero h1 {
   max-width: 860px;
   margin: 25px 0 28px;
   font: 600 clamp(52px, 6vw, 88px)/.94 "Space Grotesk", sans-serif;
   letter-spacing: -.065em
}

body.institutional-page .institutional-hero h1 span {
   display: block;
   color: #77736c
}

body.institutional-page .institutional-hero-copy > p {
   max-width: 680px;
   margin: 0;
   color: #5d5953;
   font-size: 14px;
   line-height: 1.75
}

body.institutional-page .institutional-hero-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 14px;
   margin-top: 34px
}

body.institutional-page .institutional-button {
   min-height: 50px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   padding: 0 22px;
   border: 1px solid var(--ink);
   background: transparent;
   color: var(--ink);
   font-size: 11px;
   font-weight: 700;
   cursor: pointer;
   transition: transform .2s, background-color .2s, color .2s
}

body.institutional-page .institutional-button:hover {
   transform: translateY(-2px)
}

body.institutional-page .institutional-button-primary {
   border-color: var(--purple);
   background: var(--purple);
   color: #fff
}

body.institutional-page .institutional-button-dark {
   border-color: #111;
   background: #111;
   color: #fff
}

body.institutional-page .institutional-button[disabled] {
   opacity: .55;
   cursor: wait;
   transform: none
}

body.institutional-page .institutional-hero-panel {
   position: relative;
   overflow: hidden;
   min-height: 320px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 36px;
   border-radius: 8px;
   background: #111;
   color: #fff
}

body.institutional-page .institutional-hero-panel::after {
   content: "404";
   position: absolute;
   right: -20px;
   bottom: -35px;
   color: #191919;
   font: 700 180px/.8 "Space Grotesk", sans-serif;
   letter-spacing: -.12em;
   pointer-events: none
}

body.institutional-page .institutional-hero-panel > * {
   position: relative;
   z-index: 1
}

body.institutional-page .institutional-panel-label {
   color: var(--yellow);
   font: 500 9px/1 "IBM Plex Mono", monospace;
   letter-spacing: .16em
}

body.institutional-page .institutional-hero-panel strong {
   max-width: 390px;
   font: 600 clamp(27px, 2.5vw, 39px)/1.03 "Space Grotesk", sans-serif;
   letter-spacing: -.04em
}

body.institutional-page .institutional-hero-panel p {
   max-width: 390px;
   margin: 15px 0 0;
   color: #aaa;
   font-size: 11px;
   line-height: 1.65
}

body.institutional-page .institutional-section {
   padding: 90px 0;
   border-bottom: 1px solid var(--line)
}

body.institutional-page .institutional-section-head {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 35px;
   margin-bottom: 42px
}

body.institutional-page .institutional-section-head h2 {
   max-width: 820px;
   margin: 18px 0 0;
   font: 600 clamp(38px, 4.5vw, 62px)/1 "Space Grotesk", sans-serif;
   letter-spacing: -.05em
}

body.institutional-page .institutional-section-head > p {
   max-width: 460px;
   margin: 0;
   color: #68645d;
   font-size: 12px;
   line-height: 1.7
}

/* Contato */
body.contact-premium-page .contact-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr);
   gap: 16px
}

body.contact-premium-page .contact-form-card,
body.contact-premium-page .contact-aside-card {
   padding: clamp(28px, 4vw, 52px);
   border: 1px solid var(--line);
   border-radius: 8px;
   background: rgba(255, 255, 255, .3)
}

body.contact-premium-page .contact-form {
   display: grid;
   gap: 22px
}

body.contact-premium-page .contact-form-row {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px
}

body.contact-premium-page .contact-field {
   display: grid;
   gap: 9px
}

body.contact-premium-page .contact-field label {
   color: #56524c;
   font: 600 10px/1 "IBM Plex Mono", monospace;
   letter-spacing: .04em
}

body.contact-premium-page .contact-field input,
body.contact-premium-page .contact-field select,
body.contact-premium-page .contact-field textarea {
   width: 100%;
   min-height: 50px;
   padding: 14px 15px;
   border: 1px solid #cfcbc3;
   border-radius: 3px;
   outline: 0;
   background: #fff;
   color: var(--ink);
   font: 400 13px/1.4 Inter, sans-serif;
   transition: border-color .2s, box-shadow .2s
}

body.contact-premium-page .contact-field textarea {
   min-height: 160px;
   resize: vertical
}

body.contact-premium-page .contact-field input:focus,
body.contact-premium-page .contact-field select:focus,
body.contact-premium-page .contact-field textarea:focus {
   border-color: var(--purple);
   box-shadow: 0 0 0 3px rgba(103, 71, 255, .11)
}

body.contact-premium-page .contact-form-footer {
   display: flex;
   align-items: center;
   gap: 18px;
   margin-top: 4px
}

body.contact-premium-page .contact-form-status {
   margin: 0;
   color: #5f5b55;
   font-size: 11px;
   line-height: 1.5
}

body.contact-premium-page .contact-form-status.is-success { color: #167544; }
body.contact-premium-page .contact-form-status.is-error { color: #b42318; }

body.contact-premium-page .contact-aside-card {
   background: #e9e6df
}

body.contact-premium-page .contact-channel {
   padding: 25px 0;
   border-bottom: 1px solid #cfcbc3
}

body.contact-premium-page .contact-channel:first-of-type { padding-top: 8px; }
body.contact-premium-page .contact-channel:last-of-type { border-bottom: 0; }
body.contact-premium-page .contact-channel span {
   display: block;
   margin-bottom: 9px;
   color: var(--purple);
   font: 500 9px/1 "IBM Plex Mono", monospace;
   letter-spacing: .1em
}
body.contact-premium-page .contact-channel a,
body.contact-premium-page .contact-channel strong {
   font: 600 clamp(19px, 2vw, 26px)/1.15 "Space Grotesk", sans-serif;
   letter-spacing: -.03em;
   overflow-wrap: anywhere
}
body.contact-premium-page .contact-channel p {
   margin: 10px 0 0;
   color: #68645d;
   font-size: 11px;
   line-height: 1.6
}

body.contact-premium-page .contact-faq {
   margin-top: 55px
}

body.contact-premium-page .contact-faq details {
   border-top: 1px solid var(--line)
}

body.contact-premium-page .contact-faq details:last-child {
   border-bottom: 1px solid var(--line)
}

body.contact-premium-page .contact-faq summary {
   padding: 20px 2px;
   font: 600 14px/1.35 "Space Grotesk", sans-serif;
   cursor: pointer
}

body.contact-premium-page .contact-faq details p {
   max-width: 720px;
   margin: -5px 0 20px;
   color: #68645d;
   font-size: 12px;
   line-height: 1.65
}

/* Privacidade */
body.privacy-premium-page .privacy-layout {
   display: grid;
   grid-template-columns: 250px minmax(0, 1fr);
   gap: clamp(45px, 8vw, 120px);
   padding-top: 85px
}

body.privacy-premium-page .privacy-nav {
   position: sticky;
   top: 98px;
   align-self: start;
   display: grid;
   gap: 0;
   padding: 22px 0;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

body.privacy-premium-page .privacy-nav span {
   margin-bottom: 15px;
   color: var(--purple);
   font: 500 9px/1 "IBM Plex Mono", monospace;
   letter-spacing: .12em
}

body.privacy-premium-page .privacy-nav a {
   padding: 9px 0;
   color: #625e57;
   font-size: 11px;
   transition: color .2s, transform .2s
}

body.privacy-premium-page .privacy-nav a:hover {
   color: var(--purple);
   transform: translateX(3px)
}

body.privacy-premium-page .privacy-content {
   min-width: 0
}

body.privacy-premium-page .privacy-intro,
body.privacy-premium-page .privacy-block {
   padding: 0 0 60px;
   margin-bottom: 60px;
   border-bottom: 1px solid var(--line);
   scroll-margin-top: 115px
}

body.privacy-premium-page .privacy-block:last-child {
   margin-bottom: 0
}

body.privacy-premium-page .privacy-index {
   display: block;
   margin-bottom: 20px;
   color: var(--purple);
   font: 500 10px/1 "IBM Plex Mono", monospace
}

body.privacy-premium-page .privacy-content h2 {
   max-width: 850px;
   margin: 0 0 24px;
   font: 600 clamp(28px, 3.5vw, 46px)/1.04 "Space Grotesk", sans-serif;
   letter-spacing: -.045em
}

body.privacy-premium-page .privacy-content p,
body.privacy-premium-page .privacy-content li {
   max-width: 820px;
   color: #5f5b55;
   font-size: 13px;
   line-height: 1.78
}

body.privacy-premium-page .privacy-content ul {
   display: grid;
   gap: 9px;
   padding: 0;
   list-style: none
}

body.privacy-premium-page .privacy-content li {
   position: relative;
   padding-left: 20px
}

body.privacy-premium-page .privacy-content li::before {
   content: "—";
   position: absolute;
   left: 0;
   color: var(--purple)
}

body.privacy-premium-page .privacy-contact {
   padding: 32px;
   border-radius: 7px;
   background: #111;
   color: #fff
}

body.privacy-premium-page .privacy-contact h2 { color: #fff; }
body.privacy-premium-page .privacy-contact p { color: #aaa; }
body.privacy-premium-page .privacy-contact a { color: var(--yellow); }

/* Trocas e devoluções */
body.returns-premium-page .returns-summary {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   margin-top: 38px;
   border-top: 1px solid #d0ccc4;
   border-bottom: 1px solid #d0ccc4
}

body.returns-premium-page .returns-summary > div {
   display: grid;
   gap: 5px;
   padding: 18px 22px;
   border-right: 1px solid #d0ccc4
}

body.returns-premium-page .returns-summary > div:first-child { padding-left: 0; }
body.returns-premium-page .returns-summary > div:last-child { border-right: 0; }
body.returns-premium-page .returns-summary b {
   font: 600 16px/1.2 "Space Grotesk", sans-serif
}
body.returns-premium-page .returns-summary span {
   color: #77736c;
   font-size: 9px
}

body.returns-premium-page .returns-process {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin: 0;
   padding: 0;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   list-style: none
}

body.returns-premium-page .returns-process li {
   min-height: 250px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 28px 26px;
   border-right: 1px solid var(--line)
}

body.returns-premium-page .returns-process li:last-child { border-right: 0; }
body.returns-premium-page .returns-process li > span {
   color: var(--purple);
   font: 500 9px/1 "IBM Plex Mono", monospace
}
body.returns-premium-page .returns-process h3 {
   margin: 0 0 11px;
   font: 600 19px/1.1 "Space Grotesk", sans-serif
}
body.returns-premium-page .returns-process p {
   margin: 0;
   color: #68645d;
   font-size: 11px;
   line-height: 1.6
}

body.returns-premium-page .returns-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px
}

body.returns-premium-page .returns-card {
   min-height: 310px;
   padding: 36px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: rgba(255, 255, 255, .3)
}

body.returns-premium-page .returns-card > span {
   color: var(--purple);
   font: 500 9px/1 "IBM Plex Mono", monospace
}

body.returns-premium-page .returns-card h2 {
   margin: 42px 0 16px;
   font: 600 clamp(25px, 2.5vw, 35px)/1.05 "Space Grotesk", sans-serif;
   letter-spacing: -.035em
}

body.returns-premium-page .returns-card p,
body.returns-premium-page .returns-card li {
   color: #605c55;
   font-size: 12px;
   line-height: 1.68
}

body.returns-premium-page .returns-card ul {
   display: grid;
   gap: 8px;
   margin: 18px 0 0;
   padding: 0;
   list-style: none
}

body.returns-premium-page .returns-card li {
   position: relative;
   padding-left: 18px
}

body.returns-premium-page .returns-card li::before {
   content: "—";
   position: absolute;
   left: 0;
   color: var(--purple)
}

body.returns-premium-page .returns-card-dark {
   border-color: #151515;
   background: #151515;
   color: #fff
}

body.returns-premium-page .returns-card-dark > span,
body.returns-premium-page .returns-card-dark li::before { color: var(--yellow); }
body.returns-premium-page .returns-card-dark h2 { color: #fff; }
body.returns-premium-page .returns-card-dark p,
body.returns-premium-page .returns-card-dark li { color: #aaa; }

body.returns-premium-page .returns-cta {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 45px;
   margin-top: 70px;
   padding: 52px 55px;
   border-radius: 9px;
   background: #e8e5de
}

body.returns-premium-page .returns-cta h2 {
   margin: 15px 0 10px;
   font: 600 clamp(35px, 4vw, 54px)/1 "Space Grotesk", sans-serif;
   letter-spacing: -.045em
}

body.returns-premium-page .returns-cta p {
   margin: 0;
   color: #68645d;
   font-size: 12px
}

body.returns-premium-page .returns-cta-actions {
   display: flex;
   align-items: center;
   gap: 18px
}

body.returns-premium-page .returns-cta-actions > a:last-child {
   font-size: 10px;
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 4px;
   white-space: nowrap
}

@media(max-width: 900px) {
   body.institutional-page .institutional-hero {
      grid-template-columns: 1fr;
      gap: 45px;
      padding: 70px 0
   }
   body.institutional-page .institutional-hero-panel { min-height: 270px; }
   body.contact-premium-page .contact-layout { grid-template-columns: 1fr; }
   body.privacy-premium-page .privacy-layout {
      grid-template-columns: 1fr;
      gap: 45px
   }
   body.privacy-premium-page .privacy-nav {
      position: static;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px 18px
   }
   body.privacy-premium-page .privacy-nav span { grid-column: 1/-1; }
   body.returns-premium-page .returns-process { grid-template-columns: repeat(2, 1fr); }
   body.returns-premium-page .returns-process li:nth-child(2) { border-right: 0; }
   body.returns-premium-page .returns-process li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
   body.returns-premium-page .returns-cta {
      align-items: flex-start;
      flex-direction: column
   }
}

@media(max-width: 640px) {
   body.institutional-page .institutional-main { padding: 0 20px 75px; }
   body.institutional-page .institutional-hero {
      min-height: 0;
      padding: 58px 0
   }
   body.institutional-page .institutional-hero h1 {
      margin: 20px 0 24px;
      font-size: clamp(44px, 13.5vw, 58px)
   }
   body.institutional-page .institutional-hero-panel {
      min-height: 240px;
      padding: 28px 24px
   }
   body.institutional-page .institutional-section { padding: 65px 0; }
   body.institutional-page .institutional-section-head {
      align-items: flex-start;
      flex-direction: column;
      margin-bottom: 32px
   }
   body.contact-premium-page .contact-form-card,
   body.contact-premium-page .contact-aside-card { padding: 27px 20px; }
   body.contact-premium-page .contact-form-row { grid-template-columns: 1fr; }
   body.contact-premium-page .contact-form-footer {
      align-items: flex-start;
      flex-direction: column
   }
   body.privacy-premium-page .privacy-layout { padding-top: 60px; }
   body.privacy-premium-page .privacy-nav {
      grid-template-columns: repeat(2, 1fr)
   }
   body.privacy-premium-page .privacy-intro,
   body.privacy-premium-page .privacy-block {
      padding-bottom: 45px;
      margin-bottom: 45px
   }
   body.returns-premium-page .returns-summary { grid-template-columns: 1fr; }
   body.returns-premium-page .returns-summary > div {
      padding: 14px 0;
      border-right: 0;
      border-bottom: 1px solid #d0ccc4
   }
   body.returns-premium-page .returns-summary > div:last-child { border-bottom: 0; }
   body.returns-premium-page .returns-process { grid-template-columns: 1fr; }
   body.returns-premium-page .returns-process li {
      min-height: auto;
      gap: 42px;
      padding: 25px 3px;
      border-right: 0;
      border-bottom: 1px solid var(--line) !important
   }
   body.returns-premium-page .returns-process li:last-child { border-bottom: 0 !important; }
   body.returns-premium-page .returns-grid { grid-template-columns: 1fr; }
   body.returns-premium-page .returns-card {
      min-height: auto;
      padding: 30px 24px
   }
   body.returns-premium-page .returns-card h2 { margin-top: 32px; }
   body.returns-premium-page .returns-cta {
      margin-top: 50px;
      padding: 38px 24px
   }
   body.returns-premium-page .returns-cta-actions {
      align-items: flex-start;
      flex-direction: column
   }
}

/* A altura compacta do hero é apenas desktop. */
@media(max-width: 760px) {
   .hero.hero-premium {
      height: auto;
      min-height: 0;
      max-height: none
   }
}



/* =========================================================
   CARRINHO PREMIUM
   Escopo isolado para preservar as demais páginas.
   ========================================================= */
body.cart-premium-page {
   background: var(--paper);
   color: var(--ink)
}

body.cart-premium-page > [data-include="/includes/header.html"] {
   display: contents
}

body.cart-premium-page .cart-main {
   width: min(100%, var(--max));
   margin: 0 auto;
   padding: 0 clamp(24px, 5vw, 80px) 110px
}

body.cart-premium-page .cart-premium-hero {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: end;
   gap: 32px;
   padding: 42px 0 34px;
   border-bottom: 1px solid var(--line)
}

body.cart-premium-page .cart-kicker {
   color: var(--purple);
   font: 500 10px/1 "IBM Plex Mono", monospace;
   letter-spacing: .16em
}

body.cart-premium-page .cart-premium-hero h1 {
   max-width: 760px;
   margin: 14px 0 0;
   font: 600 clamp(38px, 3.8vw, 58px)/.96 "Space Grotesk", sans-serif;
   letter-spacing: -.06em
}

body.cart-premium-page .cart-premium-hero h1 span {
   display: block;
   color: #77736c
}

body.cart-premium-page .cart-progress {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   gap: 10px;
   padding-bottom: 3px;
   color: #8b877f;
   font: 500 13px/1 "IBM Plex Mono", monospace;
   letter-spacing: .08em
}

body.cart-premium-page .cart-progress span {
   display: flex;
   align-items: center;
   gap: 8px;
   white-space: nowrap
}

body.cart-premium-page .cart-progress span::before {
   content: "";
   width: 7px;
   height: 7px;
   border: 1px solid currentColor;
   border-radius: 50%
}

body.cart-premium-page .cart-progress .is-active {
   color: var(--purple)
}

body.cart-premium-page .cart-progress .is-active::before {
   border-color: var(--purple);
   background: var(--purple);
   box-shadow: 0 0 0 4px rgba(103, 71, 255, .12)
}

body.cart-premium-page .cart-progress i {
   width: 20px;
   height: 1px;
   background: var(--line)
}

body.cart-premium-page .cart404-section {
   padding-top: 32px
}

body.cart-premium-page .cart404-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.45fr) minmax(360px, .65fr);
   gap: 24px;
   align-items: start
}

body.cart-premium-page .cart404-items {
   min-width: 0;
   padding: 28px 30px;
   border: 1px solid var(--line);
   border-radius: 9px;
   background: rgba(255, 255, 255, .3)
}

body.cart-premium-page .cart404-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding-bottom: 25px;
   border-bottom: 1px solid var(--line)
}

body.cart-premium-page .cart404-header h2 {
   margin: 0;
   font: 600 clamp(25px, 2.4vw, 35px)/1 "Space Grotesk", sans-serif;
   letter-spacing: -.04em
}

body.cart-premium-page .btn {
   min-height: 42px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 0 16px;
   border: 1px solid currentColor;
   border-radius: 2px;
   background: transparent;
   color: inherit;
   font: 700 10px/1 Inter, sans-serif;
   cursor: pointer;
   transition: transform .2s, background-color .2s, color .2s, border-color .2s
}

body.cart-premium-page .btn:hover { transform: translateY(-1px); }
body.cart-premium-page .btn-primary,
body.cart-premium-page .btn-primary2 {
   border-color: var(--purple);
   background: var(--purple);
   color: #fff
}

body.cart-premium-page .btn-ghost {
   border-color: #bbb7af;
   color: var(--ink)
}

body.cart-premium-page .btn-full { width: 100%; }

body.cart-premium-page .cart404-table-wrap {
   width: 100%;
   min-width: 0
}

body.cart-premium-page .cart404-table {
   width: 100%;
   border-collapse: collapse;
   table-layout: auto
}

body.cart-premium-page .cart404-table th {
   padding: 19px 12px 14px;
   color: #85817a;
   font: 500 8px/1 "IBM Plex Mono", monospace;
   letter-spacing: .11em;
   text-align: left;
   text-transform: uppercase
}

body.cart-premium-page .cart404-table th:first-child,
body.cart-premium-page .cart404-table td:first-child { padding-left: 0; }
body.cart-premium-page .cart404-table th:last-child,
body.cart-premium-page .cart404-table td:last-child { padding-right: 0; }

body.cart-premium-page .cart404-table td {
   padding: 22px 12px;
   border-top: 1px solid var(--line);
   color: #25231f;
   font-size: 12px;
   vertical-align: middle
}

body.cart-premium-page .cart404-table tbody tr:first-child td {
   border-top: 0
}

body.cart-premium-page .cart404-table td:first-child {
   min-width: 270px
}

body.cart-premium-page .cart-product {
   display: grid;
   grid-template-columns: 72px minmax(0, 1fr);
   align-items: center;
   gap: 15px
}

body.cart-premium-page .cart-product-image,
body.cart-premium-page .cart-product-placeholder {
   width: 72px;
   height: 86px;
   border-radius: 5px;
   background: #e2dfd8
}

body.cart-premium-page .cart-product-image { object-fit: cover; }

body.cart-premium-page .cart-product-placeholder {
   display: grid;
   place-items: center;
   color: #8b877f;
   font: 600 17px/1 "Space Grotesk", sans-serif;
   letter-spacing: -.05em
}

body.cart-premium-page .cart-product-meta {
   min-width: 0
}

body.cart-premium-page .cart-product-meta strong {
   display: block;
   color: var(--ink);
   font: 600 14px/1.35 "Space Grotesk", sans-serif;
   overflow-wrap: anywhere
}

body.cart-premium-page .cart-product-meta small {
   display: block;
   margin-top: 5px;
   color: #77736c;
   font-size: 10px;
   line-height: 1.45;
   overflow-wrap: anywhere
}

body.cart-premium-page .qty-control {
   display: inline-grid;
   grid-template-columns: 34px 45px 34px;
   align-items: center;
   border: 1px solid #c9c5bd;
   border-radius: 3px;
   overflow: hidden
}

body.cart-premium-page .qty-btn {
   width: 34px;
   height: 36px;
   display: grid;
   place-items: center;
   padding: 0;
   border: 0;
   background: transparent;
   color: var(--ink);
   font-size: 16px;
   cursor: pointer
}

body.cart-premium-page .qty-btn:hover { background: #e9e6df; }

body.cart-premium-page .qty-input {
   width: 45px;
   height: 36px;
   padding: 0;
   border: 0;
   border-right: 1px solid #c9c5bd;
   border-left: 1px solid #c9c5bd;
   outline: 0;
   background: #fff;
   color: var(--ink);
   text-align: center;
   font-size: 12px
}

body.cart-premium-page .cart404-remove-btn {
   min-width: auto;
   min-height: 36px;
   padding: 0 10px;
   border-color: transparent;
   color: #77736c;
   text-decoration: underline;
   text-underline-offset: 4px
}

body.cart-premium-page .empty-cart404 {
   padding: 34px 0 5px
}

body.cart-premium-page .empty-cart404-box {
   padding: 60px 25px;
   border: 1px dashed #c8c4bc;
   border-radius: 7px;
   text-align: center
}

body.cart-premium-page .empty-icon {
   display: block;
   margin-bottom: 20px;
   color: var(--purple);
   font: 600 48px/1 "Space Grotesk", sans-serif;
   letter-spacing: -.08em
}

body.cart-premium-page .empty-cart404-box h3 {
   margin: 0 0 10px;
   font: 600 27px/1 "Space Grotesk", sans-serif
}

body.cart-premium-page .empty-cart404-box p {
   margin: 0 0 24px;
   color: #68645d;
   font-size: 12px
}

body.cart-premium-page .cart404-summary {
   position: sticky;
   top: 92px;
   min-width: 0
}

body.cart-premium-page .summary404-box {
   overflow: hidden;
   padding: 30px;
   border-radius: 9px;
   background: #111;
   color: #fff
}

body.cart-premium-page .summary404-box > .cart-kicker {
   color: var(--yellow)
}

body.cart-premium-page .summary404-box > h2 {
   margin: 13px 0 22px;
   font: 600 clamp(25px, 2.2vw, 31px)/1.05 "Space Grotesk", sans-serif;
   letter-spacing: -.04em
}

body.cart-premium-page .summary404-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 15px;
   padding: 13px 0;
   border-bottom: 1px solid #2b2b2b;
   color: #aaa;
   font-size: 11px
}

body.cart-premium-page .summary404-row > span:last-child {
   color: #fff;
   font-weight: 600
}

body.cart-premium-page .summary404-row.total {
   padding: 20px 0 5px;
   border-bottom: 0;
   color: #fff;
   font: 600 17px/1 "Space Grotesk", sans-serif
}

body.cart-premium-page .summary404-row.total > span:last-child {
   font-size: 24px
}

body.cart-premium-page .summary404-saving {
   margin: 14px 0 2px;
   padding: 10px 12px;
   border: 1px solid rgba(79, 209, 139, .25);
   border-radius: 4px;
   background: rgba(79, 209, 139, .08);
   color: #86efac;
   font-size: 11px;
   font-weight: 700;
   line-height: 1.45
}

body.cart-premium-page .coupon-suggestion-box {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 13px;
   margin: 15px 0 3px;
   padding: 12px;
   border: 1px solid rgba(103, 71, 255, .4);
   border-radius: 4px;
   background: rgba(103, 71, 255, .14);
   color: #dcd5ff;
   font-size: 10px;
   line-height: 1.45
}

body.cart-premium-page .checkout-extra {
   margin-top: 26px;
   padding-top: 24px;
   border-top: 1px solid #2b2b2b
}

body.cart-premium-page .checkout-grid,
body.cart-premium-page .checkout-field {
   display: grid;
   gap: 9px
}

body.cart-premium-page .checkout-field + .checkout-field {
   margin-top: 19px
}

body.cart-premium-page .checkout-extra label {
   color: #d4d4d4;
   font: 500 9px/1 "IBM Plex Mono", monospace;
   letter-spacing: .08em
}

body.cart-premium-page .coupon-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 8px
}

body.cart-premium-page .checkout-extra input {
   width: 100%;
   min-width: 0;
   min-height: 46px;
   padding: 0 13px;
   border: 1px solid #3a3a3a;
   border-radius: 3px;
   outline: 0;
   background: #1a1a1a;
   color: #fff;
   font-size: 12px
}

body.cart-premium-page .checkout-extra input:focus {
   border-color: var(--purple);
   box-shadow: 0 0 0 3px rgba(103, 71, 255, .16)
}

body.cart-premium-page .checkout-extra .btn-ghost {
   border-color: #555;
   color: #fff
}

body.cart-premium-page .feedback-message {
   min-height: 0;
   margin: 9px 0;
   font-size: 10px;
   line-height: 1.5
}

body.cart-premium-page .feedback-message.error { color: #ff9b9b; }
body.cart-premium-page .feedback-message.success { color: #86efac; }

body.cart-premium-page .coupon-applied-box {
   display: none;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-top: 10px;
   padding: 10px 12px;
   border: 1px solid rgba(134, 239, 172, .25);
   border-radius: 4px;
   background: rgba(134, 239, 172, .07);
   font-size: 10px
}

body.cart-premium-page .coupon-applied-box.active { display: flex; }
body.cart-premium-page .coupon-applied-box strong { color: #86efac; }

body.cart-premium-page .shipping-options-cart {
   display: grid;
   gap: 8px;
   margin: 12px 0 17px
}

body.cart-premium-page .shipping-option-cart {
   padding: 12px 13px;
   border: 1px solid #3a3a3a;
   border-radius: 4px;
   background: #171717;
   color: #d5d5d5;
   font-size: 10px;
   line-height: 1.5;
   cursor: pointer;
   transition: border-color .2s, background-color .2s
}

body.cart-premium-page .shipping-option-cart:hover,
body.cart-premium-page .shipping-option-cart.selected {
   border-color: var(--purple);
   background: rgba(103, 71, 255, .13)
}

body.cart-premium-page #calcShippingBtn {
   margin-top: 9px
}

body.cart-premium-page #checkoutBtn {
   min-height: 54px;
   margin-top: 8px;
   border: 0;
   background: var(--purple);
   color: #fff;
   font-size: 11px;
   letter-spacing: .04em
}

body.cart-premium-page #checkoutBtn:disabled {
   opacity: .5;
   cursor: not-allowed;
   transform: none
}

body.cart-premium-page .product-trust-box {
   display: grid;
   gap: 10px;
   margin-top: 24px;
   padding-top: 22px;
   border-top: 1px solid #2b2b2b;
   color: #aaa;
   font-size: 10px
}

body.cart-premium-page .trust-item {
   display: flex;
   align-items: center;
   gap: 9px
}

body.cart-premium-page .trust-item svg {
   flex: 0 0 auto;
   width: 16px;
   height: 16px;
   stroke: var(--yellow)
}

@media(max-width: 980px) {
   body.cart-premium-page .cart-premium-hero {
      align-items: flex-start;
      grid-template-columns: 1fr
   }
   body.cart-premium-page .cart404-layout { grid-template-columns: 1fr; }
   body.cart-premium-page .cart404-summary { position: static; }
}

@media(max-width: 700px) {
   body.cart-premium-page .cart-main { padding: 0 18px 75px; }
   body.cart-premium-page .cart-premium-hero {
      gap: 24px;
      padding: 38px 0 30px
   }
   body.cart-premium-page .cart-premium-hero h1 {
      font-size: clamp(38px, 11vw, 48px)
   }
   body.cart-premium-page .cart-progress {
      width: 100%;
      justify-content: space-between;
      gap: 7px
   }
   body.cart-premium-page .cart-progress i { width: 12px; }
   body.cart-premium-page .cart-progress span { font-size: 13px; }
   body.cart-premium-page .cart404-section { padding-top: 30px; }
   body.cart-premium-page .cart404-items { padding: 22px 18px; }
   body.cart-premium-page .cart404-header {
      align-items: flex-start;
      flex-direction: column
   }
   body.cart-premium-page .cart404-header .btn { width: 100%; }
   body.cart-premium-page .cart404-table thead { display: none; }
   body.cart-premium-page .cart404-table,
   body.cart-premium-page .cart404-table tbody,
   body.cart-premium-page .cart404-table tr,
   body.cart-premium-page .cart404-table td {
      display: block;
      width: 100%
   }
   body.cart-premium-page .cart404-table tr {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 17px 12px;
      padding: 25px 0;
      border-bottom: 1px solid var(--line)
   }
   body.cart-premium-page .cart404-table tr:last-child { border-bottom: 0; }
   body.cart-premium-page .cart404-table td {
      min-width: 0 !important;
      padding: 0;
      border: 0 !important;
      text-align: left !important
   }
   body.cart-premium-page .cart404-table td:first-child,
   body.cart-premium-page .cart404-table td:last-child { grid-column: 1/-1; }
   body.cart-premium-page .cart404-table td:nth-child(n+2)::before {
      display: block;
      margin-bottom: 8px;
      color: #85817a;
      font: 500 8px/1 "IBM Plex Mono", monospace;
      letter-spacing: .1em
   }
   body.cart-premium-page .cart404-table td:nth-child(2)::before { content: "PREÇO"; }
   body.cart-premium-page .cart404-table td:nth-child(3)::before { content: "QUANTIDADE"; }
   body.cart-premium-page .cart404-table td:nth-child(4)::before { content: "SUBTOTAL"; }
   body.cart-premium-page .cart404-table td:nth-child(5)::before { content: "AÇÃO"; }
   body.cart-premium-page .cart-product-image,
   body.cart-premium-page .cart-product-placeholder {
      width: 74px;
      height: 88px
   }
   body.cart-premium-page .cart404-remove-btn {
      justify-content: flex-start;
      padding-left: 0
   }
   body.cart-premium-page .summary404-box { padding: 28px 22px; }
   body.cart-premium-page .coupon-row { grid-template-columns: 1fr; }
   body.cart-premium-page .coupon-row .btn { width: 100%; }
   body.cart-premium-page .coupon-suggestion-box,
   body.cart-premium-page .coupon-applied-box.active {
      align-items: flex-start;
      flex-direction: column
   }
}

/* =========================================================
   CHECKOUT PREMIUM
   ========================================================= */

body.checkout-premium-page {
  background: var(--paper, #f4f2ed);
  color: var(--ink, #0c0c0c);
}

body.checkout-premium-page > [data-include="/includes/header.html"] {
  display: contents;
}

body.checkout-premium-page .checkout-v2 {
  width: min(100%, var(--max, 1540px));
  margin: 0 auto;
  padding: 42px clamp(24px, 5vw, 80px) 110px;
}

body.checkout-premium-page .checkout-v2-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line, #d9d6cf);
}

body.checkout-premium-page .checkout-kicker {
  color: var(--purple, #6747ff);
  font: 500 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .16em;
}

body.checkout-premium-page .checkout-v2-head h1 {
  max-width: 760px;
  margin: 14px 0 0;
  font: 600 clamp(38px, 3.8vw, 58px)/.96 "Space Grotesk", sans-serif;
  letter-spacing: -.06em;
}

body.checkout-premium-page .checkout-v2-head h1 span {
  display: block;
  color: #77736c;
}

body.checkout-premium-page .checkout-v2-head p {
  margin: 18px 0 0;
  color: #68645d;
  font-size: 13px;
}

body.checkout-premium-page .checkout-trust {
  display: flex;
  gap: 18px;
  padding-bottom: 4px;
  color: #6e6a63;
  font: 500 12px/1 "IBM Plex Mono", monospace;
  letter-spacing: .06em;
}

body.checkout-premium-page .checkout-trust span {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

body.checkout-premium-page .checkout-trust span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple, #6747ff);
}

body.checkout-premium-page .checkout-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, .65fr);
  gap: 24px;
  align-items: start;
  padding-top: 32px;
}

body.checkout-premium-page .checkout-panel {
  min-width: 0;
  padding: 28px 30px 32px;
  border: 1px solid var(--line, #d9d6cf);
  border-radius: 9px;
  background: rgba(255, 255, 255, .3);
}

body.checkout-premium-page .checkout-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line, #d9d6cf);
}

body.checkout-premium-page .checkout-step-indicator {
  position: relative;
  padding: 0 10px 17px;
  color: #8b877f;
  font: 500 9px/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  text-align: center;
}

body.checkout-premium-page .checkout-step-indicator::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
}

body.checkout-premium-page .checkout-step-indicator.is-active {
  color: var(--purple, #6747ff);
}

body.checkout-premium-page .checkout-step-indicator.is-active::after {
  background: var(--purple, #6747ff);
}

body.checkout-premium-page .checkout-step-indicator.is-done {
  color: #27734a;
}

body.checkout-premium-page .checkout-step {
  display: none;
  animation: checkoutFade .22s ease-out;
}

body.checkout-premium-page .checkout-step.is-active {
  display: block;
}

@keyframes checkoutFade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

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

body.checkout-premium-page .checkout-step h2 {
  margin: 0 0 9px;
  font: 600 clamp(25px, 2.4vw, 35px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.04em;
}

body.checkout-premium-page .checkout-step-description {
  max-width: 720px;
  margin: 0 0 26px;
  color: #68645d;
  font-size: 12px;
  line-height: 1.6;
}

body.checkout-premium-page .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

body.checkout-premium-page .form-group {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
}

body.checkout-premium-page .form-group.full {
  grid-column: 1 / -1;
}

body.checkout-premium-page .form-group label {
  color: #312f2a;
  font: 600 10px/1 Inter, sans-serif;
}

body.checkout-premium-page .form-group small {
  color: #817d75;
  font-size: 9px;
  line-height: 1.45;
}

body.checkout-premium-page .form-group input,
body.checkout-premium-page .form-group select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #c9c5bd;
  border-radius: 3px;
  outline: 0;
  background: #fff;
  color: var(--ink, #0c0c0c);
  font: 400 12px/1 Inter, sans-serif;
}

body.checkout-premium-page .form-group input:focus,
body.checkout-premium-page .form-group select:focus {
  border-color: var(--purple, #6747ff);
  box-shadow: 0 0 0 3px rgba(103, 71, 255, .12);
}

body.checkout-premium-page .form-group input[readonly] {
  background: #ece9e2;
  color: #77736c;
}

body.checkout-premium-page .checkout-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

body.checkout-premium-page .checkout-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font: 700 10px/1 Inter, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s, background-color .2s, color .2s;
}

body.checkout-premium-page .checkout-btn:hover {
  transform: translateY(-1px);
}

body.checkout-premium-page .checkout-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

body.checkout-premium-page .checkout-btn-primary {
  border-color: var(--purple, #6747ff);
  background: var(--purple, #6747ff);
  color: #fff;
}

body.checkout-premium-page .checkout-btn-secondary {
  border-color: #bbb7af;
  color: var(--ink, #0c0c0c);
}

body.checkout-premium-page .shipping-options {
  display: grid;
  gap: 9px;
}

body.checkout-premium-page .shipping-option {
  display: block;
  padding: 16px;
  border: 1px solid #c9c5bd;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}

body.checkout-premium-page .shipping-option input {
  position: absolute;
  opacity: 0;
}

body.checkout-premium-page .shipping-option:hover,
body.checkout-premium-page .shipping-option.is-selected {
  border-color: var(--purple, #6747ff);
  background: rgba(103, 71, 255, .055);
}

body.checkout-premium-page .shipping-option-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body.checkout-premium-page .shipping-option-name,
body.checkout-premium-page .shipping-option-price {
  font-size: 12px;
  font-weight: 700;
}

body.checkout-premium-page .shipping-option-price {
  color: var(--purple, #6747ff);
  white-space: nowrap;
}

body.checkout-premium-page .shipping-option-meta {
  margin-top: 6px;
  color: #77736c;
  font-size: 10px;
}

body.checkout-premium-page .checkout-alert {
  display: none;
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1px solid var(--line, #d9d6cf);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.5;
}

body.checkout-premium-page .checkout-alert.is-visible {
  display: block;
}

body.checkout-premium-page .checkout-alert.success {
  border-color: #8fcca9;
  background: #edf8f1;
  color: #23613e;
}

body.checkout-premium-page .checkout-alert.warning {
  border-color: #e1bd73;
  background: #fff8e8;
  color: #78580f;
}

body.checkout-premium-page .checkout-alert.danger {
  border-color: #e3a0a0;
  background: #fff0f0;
  color: #8a2d2d;
}

body.checkout-premium-page .saved-address-card,
body.checkout-premium-page .payment-box {
  padding: 20px;
  border: 1px solid #c9c5bd;
  border-radius: 6px;
  background: #fff;
}

body.checkout-premium-page .saved-address-title,
body.checkout-premium-page .payment-box h3 {
  margin: 0 0 10px;
  color: var(--ink, #0c0c0c);
  font: 600 18px/1.2 "Space Grotesk", sans-serif;
}

body.checkout-premium-page .saved-address-text {
  color: #57534d;
  font-size: 12px;
  line-height: 1.65;
}

body.checkout-premium-page .saved-address-text strong {
  color: var(--ink, #0c0c0c);
}

body.checkout-premium-page .saved-address-note {
  margin: 12px 0 0;
  color: #77736c;
}

body.checkout-premium-page .saved-address-warning {
  margin: 12px 0 0;
  color: #946b0a;
}

body.checkout-premium-page .saved-address-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

body.checkout-premium-page .payment-box p,
body.checkout-premium-page .checkout-payment-note {
  color: #68645d;
  font-size: 11px;
  line-height: 1.55;
}

body.checkout-premium-page .checkout-summary-v2 {
  position: sticky;
  top: 92px;
  min-width: 0;
  overflow: hidden;
  padding: 30px;
  border-radius: 9px;
  background: #111;
  color: #fff;
}

body.checkout-premium-page .summary-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

body.checkout-premium-page .summary-title-row h2 {
  margin: 0;
  font: 600 30px/1 "Space Grotesk", sans-serif;
  letter-spacing: -.04em;
}

body.checkout-premium-page .summary-badge {
  color: var(--yellow, #f4c542);
  font: 500 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
}

body.checkout-premium-page .summary-items {
  display: grid;
  gap: 9px;
  margin-bottom: 17px;
}

body.checkout-premium-page .summary-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid #2b2b2b;
}

body.checkout-premium-page .summary-item-img {
  width: 54px;
  height: 64px;
  border-radius: 4px;
  background: #262626;
  object-fit: cover;
}

body.checkout-premium-page .summary-item-placeholder {
  display: grid;
  place-items: center;
  color: #888;
  font: 600 14px/1 "Space Grotesk", sans-serif;
}

body.checkout-premium-page .summary-item-name {
  color: #fff;
  font: 600 11px/1.35 "Space Grotesk", sans-serif;
}

body.checkout-premium-page .summary-item-meta {
  margin-top: 4px;
  color: #999;
  font-size: 9px;
}

body.checkout-premium-page .summary-item-price {
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

body.checkout-premium-page .summary-row-v2 {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid #2b2b2b;
  color: #aaa;
  font-size: 11px;
}

body.checkout-premium-page .summary-row-v2 strong {
  color: #fff;
}

body.checkout-premium-page .summary-row-v2.total {
  padding: 20px 0 5px;
  border-bottom: 0;
  color: #fff;
  font: 600 17px/1 "Space Grotesk", sans-serif;
}

body.checkout-premium-page .summary-row-v2.total strong {
  font-size: 24px;
}

body.checkout-premium-page .summary-proof {
  display: grid;
  gap: 9px;
  margin-top: 23px;
  padding-top: 20px;
  border-top: 1px solid #2b2b2b;
  color: #aaa;
  font-size: 10px;
  line-height: 1.45;
}

body.checkout-premium-page .summary-proof strong {
  color: #fff;
}

body.checkout-premium-page .empty-cart-box {
  margin-top: 32px;
  padding: 60px 25px;
  border: 1px dashed #c8c4bc;
  border-radius: 7px;
  text-align: center;
}

body.checkout-premium-page .mini-loading {
  width: 15px;
  height: 15px;
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: checkoutSpin .7s linear infinite;
}

@keyframes checkoutSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 980px) {
  body.checkout-premium-page .checkout-v2-head,
  body.checkout-premium-page .checkout-v2-grid {
    grid-template-columns: 1fr;
  }

  body.checkout-premium-page .checkout-summary-v2 {
    position: static;
  }
}

@media (max-width: 700px) {
  body.checkout-premium-page .checkout-step h2,
  body.checkout-premium-page .checkout-step-description {
    margin-left: 0;
    text-align: left;
  }

  body.checkout-premium-page .checkout-step-description {
    margin-top: 8px;
    margin-bottom: 23px;
  }
}

  body.checkout-premium-page .checkout-v2-head h1 {
    font-size: clamp(38px, 11vw, 48px);
  }

  body.checkout-premium-page .checkout-trust {
    flex-wrap: wrap;
  }

  body.checkout-premium-page .checkout-v2-grid {
    padding-top: 24px;
  }

  body.checkout-premium-page .checkout-panel {
    padding: 22px 18px;
  }

  body.checkout-premium-page .checkout-step-indicator {
    padding: 0 4px 14px;
    font-size: 10px;
  }

  body.checkout-premium-page .form-grid {
    grid-template-columns: 1fr;
  }

  body.checkout-premium-page .form-group.full {
    grid-column: auto;
  }

  body.checkout-premium-page .checkout-actions,
  body.checkout-premium-page .saved-address-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.checkout-premium-page .checkout-btn {
    width: 100%;
  }

  body.checkout-premium-page .checkout-summary-v2 {
    padding: 28px 22px;
  }

  body.checkout-premium-page .summary-item {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  body.checkout-premium-page .summary-item-price {
    grid-column: 2;
  }


/* =========================================================
   CHECKOUT PREMIUM V2
   Cole DEPOIS do bloco anterior do checkout.
   ========================================================= */

body.checkout-premium-page .checkout-v2 {
  width: min(100%, 1420px);
  padding-top: 30px;
}

body.checkout-premium-page .checkout-v2-head {
  align-items: center;
  padding: 0 0 28px;
}

body.checkout-premium-page .checkout-head-copy {
  position: relative;
  padding-left: 18px;
}

body.checkout-premium-page .checkout-head-copy::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--purple, #6747ff);
}

body.checkout-premium-page .checkout-v2-head h1 {
  max-width: 690px;
  margin-top: 10px;
  font-size: clamp(36px, 3.35vw, 52px);
  line-height: .94;
}

body.checkout-premium-page .checkout-v2-head p {
  margin-top: 13px;
}

body.checkout-premium-page .checkout-v2-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, .62fr);
  gap: 20px;
  padding-top: 26px;
}

body.checkout-premium-page .checkout-panel {
  padding: 30px;
  border-color: #d7d3ca;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.28)),
    var(--paper, #f4f2ed);
  box-shadow: 0 18px 55px rgba(21, 18, 13, .055);
}

body.checkout-premium-page .checkout-steps {
  position: relative;
  gap: 0;
  margin: 0 0 38px;
  border: 0;
}

body.checkout-premium-page .checkout-steps::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 16%;
  left: 16%;
  height: 1px;
  background: #d4d0c8;
}

body.checkout-premium-page .checkout-step-indicator {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  color: #8b877f;
  text-align: left;
}

body.checkout-premium-page .checkout-step-indicator::after {
  display: none;
}

body.checkout-premium-page .checkout-step-number {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #c9c5bd;
  border-radius: 50%;
  background: #f7f5f0;
  color: #77736c;
  font: 500 9px/1 "IBM Plex Mono", monospace;
  transition: .2s ease;
}

body.checkout-premium-page .checkout-step-label {
  display: grid;
  gap: 3px;
  min-width: 84px;
  padding: 3px 7px;
  background: #f6f4ef;
}

body.checkout-premium-page .checkout-step-label b {
  color: #45423d;
  font: 600 11px/1 "Space Grotesk", sans-serif;
}

body.checkout-premium-page .checkout-step-label small {
  color: #969189;
  font: 500 7px/1 "IBM Plex Mono", monospace;
  letter-spacing: .05em;
}

body.checkout-premium-page .checkout-step-indicator.is-done .checkout-step-number {
  border-color: #151515;
  background: #151515;
  color: #fff;
}

body.checkout-premium-page .checkout-step-indicator.is-done .checkout-step-number::before {
  content: "✓";
}

body.checkout-premium-page .checkout-step-indicator.is-done .checkout-step-number {
  font-size: 0;
}

body.checkout-premium-page .checkout-step-indicator.is-done .checkout-step-number::before {
  font-size: 11px;
}

body.checkout-premium-page .checkout-step-indicator.is-active .checkout-step-number {
  border-color: var(--purple, #6747ff);
  background: var(--purple, #6747ff);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(103,71,255,.11);
}

body.checkout-premium-page .checkout-step-indicator.is-active .checkout-step-label b {
  color: var(--purple, #6747ff);
}

body.checkout-premium-page .checkout-section-head {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 9px;
}

body.checkout-premium-page .checkout-section-head > span {
  color: var(--purple, #6747ff);
  font: 500 11px/1 "IBM Plex Mono", monospace;
}

body.checkout-premium-page .checkout-section-head small {
  display: block;
  margin-bottom: 6px;
  color: #8b877f;
  font: 500 8px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}

body.checkout-premium-page .checkout-section-head h2 {
  margin: 0;
}

body.checkout-premium-page .checkout-step-description {
  margin: 0 0 28px 30px;
}

body.checkout-premium-page .checkout-alert:empty {
  display: none !important;
}

body.checkout-premium-page .payment-box {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-color: #d0ccc3;
  border-radius: 9px;
  background:
    radial-gradient(circle at 100% 0, rgba(103,71,255,.09), transparent 34%),
    #fff;
}

body.checkout-premium-page .payment-box::after {
  content: "404";
  position: absolute;
  right: -8px;
  bottom: -28px;
  color: rgba(12,12,12,.028);
  font: 700 118px/1 "Space Grotesk", sans-serif;
  letter-spacing: -.09em;
  pointer-events: none;
}

body.checkout-premium-page .payment-brand-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
}

body.checkout-premium-page .payment-brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #009ee3;
  color: #fff;
  font: 700 12px/1 "Space Grotesk", sans-serif;
}

body.checkout-premium-page .payment-brand-row small {
  display: block;
  margin-bottom: 4px;
  color: #8b877f;
  font: 500 7px/1 "IBM Plex Mono", monospace;
  letter-spacing: .1em;
}

body.checkout-premium-page .payment-brand-row h3 {
  margin: 0;
  font-size: 21px;
}

body.checkout-premium-page .payment-secure-label {
  color: #27734a;
  font: 600 7px/1 "IBM Plex Mono", monospace;
  letter-spacing: .09em;
}

body.checkout-premium-page .payment-methods {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 21px 0 16px;
}

body.checkout-premium-page .payment-methods span {
  padding: 7px 9px;
  border: 1px solid #d6d2ca;
  border-radius: 3px;
  background: #faf9f6;
  color: #55514a;
  font: 600 8px/1 "IBM Plex Mono", monospace;
  letter-spacing: .05em;
}

body.checkout-premium-page .payment-box > p {
  position: relative;
  z-index: 1;
  margin: 0;
}

body.checkout-premium-page .checkout-payment-note {
  margin: 15px 0 0;
  color: #817d75;
}

body.checkout-premium-page .checkout-final-actions {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr);
  margin-top: 22px;
}

body.checkout-premium-page .checkout-finish-button {
  min-height: 56px;
  justify-content: space-between;
  padding: 0 22px;
  font-size: 11px;
  box-shadow: 0 14px 30px rgba(103,71,255,.18);
}

body.checkout-premium-page .checkout-summary-v2 {
  border: 1px solid #242424;
  box-shadow: 0 24px 60px rgba(13,13,13,.14);
}

body.checkout-premium-page .summary-title-row {
  align-items: flex-end;
}

body.checkout-premium-page .summary-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--yellow, #f4c542);
  font: 500 8px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}

body.checkout-premium-page .summary-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.checkout-premium-page .summary-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #57d489;
  box-shadow: 0 0 0 4px rgba(87,212,137,.1);
}

body.checkout-premium-page .summary-item-img {
  border: 1px solid #383838;
}

body.checkout-premium-page .summary-proof span {
  position: relative;
  padding-left: 16px;
}

body.checkout-premium-page .summary-proof span::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #57d489;
  font-weight: 700;
}

body.checkout-premium-page .checkout-mobile-bar {
  display: none;
}

@media (max-width: 700px) {
  body.checkout-premium-page {
    padding-bottom: 84px;
  }

  body.checkout-premium-page .checkout-v2 {
    padding-top: 27px;
  }

  body.checkout-premium-page .checkout-v2-head {
    gap: 15px;
    padding-bottom: 22px;
  }

  body.checkout-premium-page .checkout-head-copy {
    padding-left: 14px;
  }

  body.checkout-premium-page .checkout-v2-head h1 {
    margin-top: 8px;
    font-size: clamp(34px, 10vw, 43px);
    line-height: .94;
  }

  body.checkout-premium-page .checkout-v2-head p {
    max-width: 530px;
    margin-top: 11px;
    font-size: 11px;
    line-height: 1.5;
    text-align: justify;
  }

  body.checkout-premium-page .checkout-trust {
    gap: 13px;
    padding-left: 12px;
    font-size: 10px;
  }

  body.checkout-premium-page .checkout-v2-grid {
    padding-top: 18px;
  }

  body.checkout-premium-page .checkout-panel {
    padding: 22px 17px 24px;
    border-radius: 10px;
  }

  body.checkout-premium-page .checkout-steps {
    margin-bottom: 30px;
  }

  body.checkout-premium-page .checkout-steps::before {
    top: 15px;
    right: 13%;
    left: 13%;
  }

  body.checkout-premium-page .checkout-step-indicator {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  body.checkout-premium-page .checkout-step-number {
    width: 30px;
    height: 30px;
  }

  body.checkout-premium-page .checkout-step-label {
    min-width: 0;
    padding: 0 4px;
    background: transparent;
  }

  body.checkout-premium-page .checkout-step-label b {
    font-size: 9px;
  }

  body.checkout-premium-page .checkout-step-label small {
    display: none;
  }

  body.checkout-premium-page .checkout-section-head {
    align-items: flex-start;
    gap: 10px;
  }

  body.checkout-premium-page .checkout-section-head h2 {
    font-size: 27px;
    line-height: 1.05;
  }

  body.checkout-premium-page .checkout-step-description {
    margin: 0 0 23px 24px;
    font-size: 11px;
  }

  body.checkout-premium-page .payment-brand-row {
    grid-template-columns: 40px minmax(0,1fr);
  }

  body.checkout-premium-page .payment-brand-mark {
    width: 40px;
    height: 40px;
  }

  body.checkout-premium-page .payment-secure-label {
    grid-column: 2;
  }

  body.checkout-premium-page .checkout-final-actions {
    grid-template-columns: 1fr;
  }

  body.checkout-premium-page .checkout-final-actions .checkout-finish-button {
    display: none;
  }

  body.checkout-premium-page .checkout-summary-v2 {
    margin-top: 0;
  }

  body.checkout-premium-page[data-checkout-step="3"] .checkout-mobile-bar {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 16px;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
    border-top: 1px solid #292929;
    background: rgba(15,15,15,.97);
    box-shadow: 0 -10px 35px rgba(0,0,0,.2);
    color: #fff;
    backdrop-filter: blur(14px);
  }

  body.checkout-premium-page .checkout-mobile-bar div {
    display: grid;
    gap: 3px;
  }

  body.checkout-premium-page .checkout-mobile-bar small {
    color: #999;
    font: 500 7px/1 "IBM Plex Mono", monospace;
    letter-spacing: .1em;
  }

  body.checkout-premium-page .checkout-mobile-bar strong {
    white-space: nowrap;
    font: 600 17px/1 "Space Grotesk", sans-serif;
  }

  body.checkout-premium-page .checkout-mobile-bar button {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 17px;
    border: 0;
    border-radius: 3px;
    background: var(--purple, #6747ff);
    color: #fff;
    font: 700 10px/1 Inter, sans-serif;
  }
}




@media (max-width: 980px) {
  html,
  body.checkout-premium-page {
    max-width: 100%;
    overflow-x: clip;
  }

  body.checkout-premium-page .checkout-v2-head,
  body.checkout-premium-page .checkout-v2-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.checkout-premium-page .checkout-v2-grid,
  body.checkout-premium-page .checkout-panel,
  body.checkout-premium-page .checkout-summary-v2 {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.checkout-premium-page .checkout-summary-v2 {
    position: static;
    top: auto;
  }

  body.checkout-premium-page .checkout-trust {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  body.checkout-premium-page .checkout-step h2,
  body.checkout-premium-page .checkout-step-description {
    margin-left: 0;
    text-align: left;
  }
  

  body.checkout-premium-page .checkout-v2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  body.checkout-premium-page .checkout-panel {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  body.checkout-premium-page .checkout-summary-v2 {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 24px 18px;
    border-radius: 10px;
  }

  body.checkout-premium-page .summary-title-row,
  body.checkout-premium-page .summary-row-v2,
  body.checkout-premium-page .summary-item {
    min-width: 0;
  }
}

/* ==========================================================
   ÁREA DO CLIENTE — CLUBE404
   Base: styles_new.css
   ========================================================== */

.account-area {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 72% 12%,
      rgba(105, 71, 255, 0.08),
      transparent 29rem
    ),
    #f5f3ee;
  color: #0b0b0b;
}

.account-main {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  padding: 72px 0 112px;
}

.account-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding: 0 0 48px;
  border-bottom: 1px solid #d8d5cf;
}

.account-hero-copy {
  max-width: 780px;
}


.account-eyebrow {
  display: block;
  margin-bottom: 18px;
  color: #6547ff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
}


.account-hero h1 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.4rem, 3vw, 6.6rem);
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 0.88;
}

.account-hero h1 span {
  color: #84817b;
}

.account-hero-copy > p {
  max-width: 610px;
  margin: 30px 0 0;
  color: #595650;
  font-size: 1rem;
  line-height: 1.7;
}

.account-hero-status {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 230px;
  padding: 18px 21px;
  border: 1px solid #d8d5cf;
  background: rgba(255, 255, 255, 0.45);
}

.account-status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #20bc65;
  box-shadow: 0 0 0 5px rgba(32, 188, 101, 0.12);
}

.account-hero-status div {
  display: grid;
  gap: 4px;
}

.account-hero-status small {
  color: #77736d;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

.account-hero-status strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
}

.account-shell {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 56px;
  padding-top: 48px;
}

.account-sidebar {
  align-self: start;
  position: sticky;
  top: 120px;
  overflow: hidden;
  background: #101010;
  color: #fff;
}

.account-sidebar-head {
  display: grid;
  gap: 7px;
  padding: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.account-sidebar-head span {
  color: #f1ca38;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

.account-sidebar-head strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.45rem;
}

.account-navigation {
  display: grid;
}

.account-navigation a {
  display: grid;
  grid-template-columns: 29px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 78px;
  padding: 17px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition:
    color 180ms ease,
    background 180ms ease,
    padding 180ms ease;
}

.account-navigation a > span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.63rem;
}

.account-navigation a > div {
  display: grid;
  gap: 3px;
}

.account-navigation a strong {
  color: inherit;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.93rem;
}

.account-navigation a small {
  color: rgba(255, 255, 255, 0.37);
  font-size: 0.68rem;
}

.account-navigation a:hover,
.account-navigation a.active {
  padding-left: 34px;
  background: #6947ff;
  color: #fff;
}

.account-navigation a.active small {
  color: rgba(255, 255, 255, 0.7);
}

.account-support-link {
  display: grid;
  gap: 7px;
  padding: 25px 28px;
  color: #fff;
  text-decoration: none;
}

.account-support-link span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
}

.account-support-link strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.82rem;
}

.account-content {
  min-width: 0;
}

.account-content-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}

.account-content-heading .account-eyebrow {
  margin-bottom: 10px;
}

.account-content-heading h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 3vw, 3.25rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

.account-collection-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 5px;
  border-bottom: 1px solid #0b0b0b;
  color: #0b0b0b;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.account-collection-link span {
  transition: transform 180ms ease;
}

.account-collection-link:hover span {
  transform: translateX(4px);
}

.account-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #d8d5cf;
  border-left: 1px solid #d8d5cf;
}

.account-action-card {
  position: relative;
  min-height: 340px;
  padding: 30px;
  border-right: 1px solid #d8d5cf;
  border-bottom: 1px solid #d8d5cf;
  background: rgba(255, 255, 255, 0.42);
  color: #0b0b0b;
  text-decoration: none;
  transition:
    background 200ms ease,
    color 200ms ease,
    transform 200ms ease;
}

.account-action-card:first-child {
  grid-row: span 2;
  min-height: 100%;
}

.account-card-number {
  position: absolute;
  top: 30px;
  right: 30px;
  color: #77736d;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.64rem;
}

.account-card-icon {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  margin-bottom: 82px;
  border: 1px solid #bcb8b1;
}

.account-card-icon svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.account-card-copy small {
  display: block;
  margin-bottom: 12px;
  color: #6547ff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.61rem;
  font-weight: 500;
  letter-spacing: 0.13em;
}

.account-card-copy h3 {
  margin: 0 0 13px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.55rem, 2vw, 2.15rem);
  letter-spacing: -0.04em;
}

.account-card-copy p {
  max-width: 420px;
  margin: 0;
  color: #65615b;
  font-size: 0.82rem;
  line-height: 1.65;
}

.account-card-arrow {
  position: absolute;
  right: 30px;
  bottom: 27px;
  font-size: 1.3rem;
  transition: transform 180ms ease;
}

.account-action-card:hover {
  z-index: 1;
  background: #fff;
  transform: translateY(-4px);
}

.account-action-card:hover .account-card-arrow {
  transform: translateX(5px);
}

.account-action-card-dark {
  background: #101010;
  color: #fff;
}

.account-action-card-dark .account-card-number,
.account-action-card-dark .account-card-copy p {
  color: rgba(255, 255, 255, 0.5);
}

.account-action-card-dark .account-card-icon {
  border-color: rgba(255, 255, 255, 0.25);
}

.account-action-card-dark .account-card-copy small {
  color: #f1ca38;
}

.account-action-card-dark:hover {
  background: #6947ff;
  color: #fff;
}

.account-action-card-dark:hover .account-card-copy small,
.account-action-card-dark:hover .account-card-copy p,
.account-action-card-dark:hover .account-card-number {
  color: #fff;
}

.account-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 34px;
  border-top: 1px solid #d8d5cf;
  border-bottom: 1px solid #d8d5cf;
}

.account-trust-strip > div {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 13px;
  padding: 23px 22px;
}

.account-trust-strip > div + div {
  border-left: 1px solid #d8d5cf;
}

.account-trust-strip span {
  color: #6547ff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.61rem;
}

.account-trust-strip p {
  display: grid;
  gap: 4px;
  margin: 0;
  color: #77736d;
  font-size: 0.68rem;
  line-height: 1.5;
}

.account-trust-strip strong {
  color: #0b0b0b;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.78rem;
}

/* Tablet */

@media (max-width: 980px) {
  .account-main {
    width: min(100% - 32px, 760px);
    padding-top: 48px;
  }

  .account-hero {
    align-items: flex-start;
  }

  .account-shell {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .account-sidebar {
    position: static;
  }

  .account-navigation {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: auto;
  }

  .account-navigation a {
    grid-template-columns: 1fr;
    align-content: center;
    min-width: 150px;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
  }

  .account-navigation a:hover,
  .account-navigation a.active {
    padding-left: 28px;
  }

  .account-support-link {
    display: none;
  }
}

/* Mobile */

@media (max-width: 680px) {
  .account-main {
    width: calc(100% - 28px);
    padding: 36px 0 72px;
  }

  .account-hero {
    display: grid;
    gap: 28px;
    padding-bottom: 32px;
  }

  .account-hero h1 {
    font-size: clamp(3.25rem, 8vw, 4.7rem);
  }

  .account-hero-copy > p {
    margin-top: 23px;
    font-size: 0.88rem;
  }

  .account-hero-status {
    width: 100%;
    min-width: 0;
  }

  .account-shell {
    padding-top: 28px;
  }

  .account-sidebar-head {
    padding: 21px;
  }

  .account-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-navigation a {
    min-width: 0;
    min-height: 72px;
    padding: 15px 18px;
  }

  .account-navigation a:nth-child(2n + 1) {
    border-right: 1px solid rgba(255, 255, 255, 0.09);
  }

  .account-navigation a:hover,
  .account-navigation a.active {
    padding-left: 18px;
  }

  .account-navigation a small {
    display: none;
  }

  .account-content-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-action-grid {
    grid-template-columns: 1fr;
  }

  .account-action-card,
  .account-action-card:first-child {
    grid-row: auto;
    min-height: 300px;
    padding: 24px;
  }

  .account-card-icon {
    margin-bottom: 58px;
  }

  .account-card-number {
    top: 25px;
    right: 24px;
  }

  .account-card-arrow {
    right: 24px;
    bottom: 23px;
  }

  .account-trust-strip {
    grid-template-columns: 1fr;
  }

  .account-trust-strip > div + div {
    border-top: 1px solid #d8d5cf;
    border-left: 0;
  }
}

/* ==========================================================
   COMPLEMENTO — ÁREA DO CLIENTE
   Orders, order-detail, profile e security
   ========================================================== */

.account-hero-compact {
  align-items: flex-end;
}

.account-hero-compact h1 {
  font-size: clamp(3rem, 5vw, 5.25rem);
  line-height: 0.94;
}

.account-hero-compact h1 span {
  display: inline;
}

.account-hero-action,
.account-back-link {
  color: #0b0b0b;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.account-hero-action {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid #0b0b0b;
}

.account-back-link {
  display: inline-flex;
  margin-bottom: 32px;
}

.account-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  background: #6947ff;
  color: #fff;
  font: 700 0.76rem "Inter", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.account-primary-button:hover {
  background: #0b0b0b;
  transform: translateY(-2px);
}

/* Lista de pedidos */

.orders-list {
  display: grid;
  gap: 16px;
}

.orders-list:empty::before {
  content: "Carregando pedidos...";
  display: block;
  padding: 34px;
  border: 1px solid #d8d5cf;
  color: #77736d;
  font: 500 0.7rem "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
}

.orders-list:not(:empty)::before {
  display: none;
}

.order-card,
.orders-list > article,
.orders-list > a {
  display: block;
  padding: 26px;
  border: 1px solid #d8d5cf;
  background: rgba(255, 255, 255, 0.5);
  color: #0b0b0b;
  text-decoration: none;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.order-card:hover,
.orders-list > article:hover,
.orders-list > a:hover {
  background: #fff;
  transform: translateY(-3px);
}

.order-card-header,
.order-card-top,
.order-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #dedbd5;
}

.order-card h2,
.order-card h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
}

.order-meta {
  color: #77736d;
  font: 400 0.68rem "IBM Plex Mono", monospace;
}

/* Pedidos vazios */

.orders-empty {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  min-height: 400px;
  overflow: hidden;
  border: 1px solid #d8d5cf;
  background: #101010;
  color: #fff;
}

.orders-empty-code {
  display: grid;
  place-items: center;
  color: #262626;
  font: 600 clamp(7rem, 12vw, 12rem) "Space Grotesk", sans-serif;
  letter-spacing: -0.1em;
}

.orders-empty > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 48px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.orders-empty h2 {
  margin: 0 0 14px;
  font: 600 clamp(2rem, 3vw, 3rem) "Space Grotesk", sans-serif;
  letter-spacing: -0.05em;
}

.orders-empty p {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.6);
}

/* Detalhes do pedido */

.order-detail-page {
  width: min(1280px, calc(100% - 48px));
}

.order-detail-hero {
  align-items: center;
}

.order-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #c9c5be;
  background: #fff;
  font: 500 0.68rem "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
  align-items: start;
  gap: 24px;
  padding-top: 40px;
}

.order-main,
.order-sidebar {
  display: grid;
  gap: 24px;
}

.order-sidebar {
  position: sticky;
  top: 120px;
}

.order-box {
  padding: 30px;
  border: 1px solid #d8d5cf;
  background: rgba(255, 255, 255, 0.55);
}

.order-box-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid #dedbd5;
}

.order-box-heading > span {
  color: #6947ff;
  font: 500 0.62rem "IBM Plex Mono", monospace;
}

.order-box h2 {
  margin: 0;
  font: 600 1.55rem "Space Grotesk", sans-serif;
  letter-spacing: -0.04em;
}

.order-summary-box {
  background: #101010;
  color: #fff;
}

.order-summary-box h2 {
  margin: 0 0 26px;
  font: 600 2rem "Space Grotesk", sans-serif;
}

.order-summary {
  display: grid;
}

.order-summary p {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.76rem;
}

.order-summary p span {
  color: #fff;
  font-weight: 700;
}

.order-summary .order-total {
  align-items: flex-end;
  padding-top: 22px;
  color: #fff;
  font: 600 1.05rem "Space Grotesk", sans-serif;
}

.order-summary .order-total span {
  font-size: 1.65rem;
}

.order-information {
  color: #5f5b55;
  font-size: 0.8rem;
  line-height: 1.75;
}

.order-item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #dedbd5;
}

.order-item:last-child {
  border-bottom: 0;
}

.order-item img {
  width: 80px;
  aspect-ratio: 1;
  object-fit: cover;
  background: #eceae5;
}

.order-timeline {
  min-height: 80px;
}

/* Formulários */

.account-form-panel {
  padding: 38px;
  border: 1px solid #d8d5cf;
  background: rgba(255, 255, 255, 0.52);
}

.account-form-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid #d8d5cf;
}

.account-form-heading .account-eyebrow {
  margin-bottom: 9px;
}

.account-form-heading h2 {
  margin: 0;
  font: 600 clamp(1.8rem, 3vw, 2.7rem) "Space Grotesk", sans-serif;
  letter-spacing: -0.05em;
}

.account-form-heading > p {
  max-width: 330px;
  margin: 0;
  color: #6b6760;
  font-size: 0.75rem;
  line-height: 1.6;
}

.account-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.account-form .form-row + .form-row {
  margin-top: 18px;
}

.account-form .form-field {
  display: grid;
  gap: 9px;
}

.account-form label {
  color: #393631;
  font-size: 0.7rem;
  font-weight: 700;
}

.account-form input:not([type="checkbox"]) {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid #cbc7c0;
  border-radius: 0;
  outline: none;
  background: rgba(255, 255, 255, 0.7);
  color: #0b0b0b;
  font: 400 0.82rem "Inter", sans-serif;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.account-form input:not([type="checkbox"]):focus {
  border-color: #6947ff;
  box-shadow: 0 0 0 3px rgba(105, 71, 255, 0.1);
}

.account-form input:disabled {
  background: #ece9e3;
  color: #77736d;
  cursor: not-allowed;
}

.account-form .form-field-number,
.account-form .form-field-state {
  max-width: 150px;
}

.account-form .form-field-cep {
  max-width: 220px;
}

.account-form .form-row-address {
  grid-template-columns: minmax(0, 1fr) 150px;
}

.address-block {
  margin-top: 42px;
  padding-top: 38px;
  border-top: 1px solid #d8d5cf;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 22px;
}

.form-check input {
  width: 17px;
  height: 17px;
  accent-color: #6947ff;
}

.saved-address-preview {
  display: none;
  margin-top: 20px;
  padding: 18px;
  border-left: 3px solid #6947ff;
  background: #eeebff;
  color: #504b59;
  font-size: 0.78rem;
  line-height: 1.65;
}

.saved-address-preview.active {
  display: block;
}

.saved-address-preview strong {
  display: block;
  margin-bottom: 6px;
  color: #0b0b0b;
}

.form-message {
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid currentColor;
  font-size: 0.78rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #d8d5cf;
}

/* Segurança */

.security-content {
  max-width: 850px;
}

.security-form-panel > .form-field {
  margin-bottom: 18px;
}

.account-security-seal {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 220px;
  padding: 18px 20px;
  border: 1px solid #d8d5cf;
  background: rgba(255, 255, 255, 0.5);
}

.account-security-seal > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #20bc65;
  box-shadow: 0 0 0 5px rgba(32, 188, 101, 0.12);
}

.account-security-seal div {
  display: grid;
  gap: 3px;
}

.account-security-seal small {
  color: #77736d;
  font: 400 0.6rem "IBM Plex Mono", monospace;
  letter-spacing: 0.12em;
}

.password-guidance {
  margin-top: 24px;
  padding: 22px;
  background: #101010;
  color: #fff;
}

.password-guidance > span {
  color: #f1ca38;
  font: 500 0.61rem "IBM Plex Mono", monospace;
  letter-spacing: 0.13em;
}

.password-guidance ul {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.74rem;
}

/* Tablet */

@media (max-width: 980px) {
  .order-layout {
    grid-template-columns: 1fr;
  }

  .order-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-summary-box {
    grid-column: 1 / -1;
  }
}

/* Mobile */

@media (max-width: 680px) {
  .account-hero-compact h1 {
    font-size: clamp(2.65rem, 13vw, 4rem);
  }

  .account-hero-action {
    align-self: flex-start;
  }

  .orders-empty {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .orders-empty-code {
    height: 170px;
    font-size: 8rem;
  }

  .orders-empty > div {
    padding: 30px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 0;
  }

  .order-detail-page {
    width: calc(100% - 28px);
  }

  .order-detail-hero {
    align-items: flex-start;
  }

  .order-layout {
    padding-top: 28px;
  }

  .order-sidebar {
    grid-template-columns: 1fr;
  }

  .order-box {
    padding: 23px;
  }

  .order-item {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .order-item img {
    width: 64px;
  }

  .account-form-panel {
    padding: 23px;
  }

  .account-form-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .account-form .form-row,
  .account-form .form-row-address {
    grid-template-columns: 1fr;
  }

  .account-form .form-field-number,
  .account-form .form-field-state,
  .account-form .form-field-cep {
    max-width: none;
  }

  .form-actions .account-primary-button {
    width: 100%;
  }

  .account-security-seal {
    width: 100%;
  }
}

/* ==========================================================
   CORREÇÃO — LISTA DE PEDIDOS
   Manter no final do styles_new.css
   ========================================================== */

.account-area #ordersList {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Caso o JS crie um container intermediário */

.account-area #ordersList .orders-grid,
.account-area #ordersList .order-list,
.account-area #ordersList [class*="orders-grid"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Card gerado pelo orders.js */

.account-area #ordersList > *,
.account-area #ordersList .order-card {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns:
    minmax(210px, 1.4fr)
    minmax(110px, 0.65fr)
    minmax(100px, 0.55fr)
    auto !important;
  align-items: center !important;
  gap: 24px !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 118px;

  margin: 0 !important;
  padding: 24px 26px !important;

  border: 1px solid #d8d5cf !important;
  background: rgba(255, 255, 255, 0.58) !important;
  color: #0b0b0b !important;

  text-decoration: none !important;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.account-area #ordersList > *:hover,
.account-area #ordersList .order-card:hover {
  z-index: 1;
  border-color: #aaa69f !important;
  background: #fff !important;
  transform: translateY(-2px);
}

/* Impede textos e valores de estourarem o card */

.account-area #ordersList > * > *,
.account-area #ordersList .order-card > * {
  min-width: 0 !important;
  max-width: 100%;
}

.account-area #ordersList h2,
.account-area #ordersList h3,
.account-area #ordersList h4 {
  margin: 0 0 6px !important;
  color: #0b0b0b !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  overflow-wrap: anywhere;
}

.account-area #ordersList p {
  margin: 0 !important;
  color: #6e6a64 !important;
  font-size: 0.72rem !important;
  line-height: 1.5 !important;
}

/* Número do pedido */

.account-area #ordersList [class*="number"],
.account-area #ordersList [class*="code"] {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 0.73rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
}

/* Data e informações secundárias */

.account-area #ordersList time,
.account-area #ordersList [class*="date"],
.account-area #ordersList [class*="meta"] {
  color: #77736d !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 0.65rem !important;
  line-height: 1.5;
}

/* Status */

.account-area #ordersList [class*="status"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: fit-content !important;
  min-width: 92px;
  min-height: 30px;

  padding: 0 12px !important;
  border: 1px solid #d8d5cf !important;
  background: #f0ede7 !important;
  color: #57534d !important;

  font-family: "IBM Plex Mono", monospace !important;
  font-size: 0.58rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Status específicos, caso o JS gere essas classes */

.account-area #ordersList .status-pending,
.account-area #ordersList .status-pendente {
  border-color: #e2c56d !important;
  background: #fff7d8 !important;
  color: #735e00 !important;
}

.account-area #ordersList .status-paid,
.account-area #ordersList .status-pago,
.account-area #ordersList .status-approved {
  border-color: #8fd3ae !important;
  background: #e9f8ef !important;
  color: #167344 !important;
}

.account-area #ordersList .status-cancelled,
.account-area #ordersList .status-cancelado {
  border-color: #e4aaaa !important;
  background: #fff0f0 !important;
  color: #a02e2e !important;
}

/* Valores */

.account-area #ordersList [class*="price"],
.account-area #ordersList [class*="total"],
.account-area #ordersList [class*="value"] {
  color: #0b0b0b !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

/* Link Ver pedido */

.account-area #ordersList a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: fit-content !important;
  min-width: 112px;
  min-height: 40px;

  padding: 0 16px !important;
  border: 1px solid #0b0b0b !important;
  background: transparent !important;
  color: #0b0b0b !important;

  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;

  transition:
    background 180ms ease,
    color 180ms ease;
}

.account-area #ordersList a:hover {
  background: #0b0b0b !important;
  color: #fff !important;
}

/* Tablet */

@media (max-width: 1050px) {
  .account-area #ordersList > *,
  .account-area #ordersList .order-card {
    grid-template-columns:
      minmax(180px, 1fr)
      minmax(90px, 0.5fr)
      auto !important;
  }

  .account-area #ordersList a {
    grid-column: 1 / -1;
  }
}

/* Mobile */

@media (max-width: 680px) {
  .account-area #ordersList {
    gap: 12px !important;
  }

  .account-area #ordersList > *,
  .account-area #ordersList .order-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 16px !important;
    min-height: 0;
    padding: 20px !important;
  }

  .account-area #ordersList > * > :first-child,
  .account-area #ordersList .order-card > :first-child {
    grid-column: 1 / -1;
  }

  .account-area #ordersList a {
    grid-column: 1 / -1;
    width: 100% !important;
  }

  .account-area #ordersList [class*="status"] {
    min-width: 0;
  }
}
/* ==========================================================
   BOTÃO PREMIUM — VER PEDIDO
   ========================================================== */

.account-area #ordersList a {
  position: relative;

  display: inline-flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 28px;

  width: fit-content !important;
  min-width: 158px;
  min-height: 46px;

  padding: 0 18px 0 20px !important;
  border: 1px solid #101010 !important;
  background: #101010 !important;
  color: #fff !important;

  font-family: "Inter", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em;
  text-decoration: none !important;

  box-shadow: none;
  cursor: pointer;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

/* Seta adicionada pelo CSS */

.account-area #ordersList a::after {
  content: "→";
  color: #f1ca38;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  font-weight: 400;
  transition: transform 180ms ease;
}

.account-area #ordersList a:hover {
  border-color: #6947ff !important;
  background: #6947ff !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.account-area #ordersList a:hover::after {
  color: #fff;
  transform: translateX(4px);
}

.account-area #ordersList a:active {
  transform: translateY(0);
}

.account-area #ordersList a:focus-visible {
  outline: 3px solid rgba(105, 71, 255, 0.25);
  outline-offset: 3px;
}

/* Desktop: botão alinhado à direita */

@media (min-width: 681px) {
  .account-area #ordersList a {
    justify-self: end;
  }
}

/* Mobile: ação larga e confortável para toque */

@media (max-width: 680px) {
  .account-area #ordersList a {
    grid-column: 1 / -1;

    width: 100% !important;
    min-height: 48px;
    margin-top: 2px;

    padding-right: 20px !important;
    padding-left: 20px !important;
  }
}


/* ==========================================================
   RASTREAMENTO PREMIUM DO PEDIDO
   ========================================================== */

.account-area .order-status {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 11px;

  width: fit-content;
  min-width: 190px;
  min-height: 46px;

  padding: 0 18px;

  border: 1px solid #d8d5cf;
  background: #fff;
  color: #393631;

  font-family: "IBM Plex Mono", monospace;
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Indicador do status */

.account-area .order-status::before {
  content: "";

  width: 9px;
  height: 9px;
  flex: 0 0 auto;

  border-radius: 50%;
  background: #d29c19;

  box-shadow: 0 0 0 5px rgba(210, 156, 25, 0.12);
}

/* Aguardando pagamento */

.account-area .order-status[data-status="awaiting"] {
  border-color: #e0c56f;
  background: #fff8dc;
  color: #695300;
}

.account-area .order-status[data-status="awaiting"]::before {
  background: #d5a000;
  box-shadow: 0 0 0 5px rgba(213, 160, 0, 0.13);
}

/* Pagamento aprovado */

.account-area .order-status[data-status="paid"] {
  border-color: #8ccfa9;
  background: #edf9f2;
  color: #12683d;
}

.account-area .order-status[data-status="paid"]::before {
  background: #20bc65;
  box-shadow: 0 0 0 5px rgba(32, 188, 101, 0.13);
}

/* Preparação */

.account-area .order-status[data-status="preparing"] {
  border-color: #ad9aff;
  background: #f0edff;
  color: #5034c9;
}

.account-area .order-status[data-status="preparing"]::before {
  background: #6947ff;
  box-shadow: 0 0 0 5px rgba(105, 71, 255, 0.13);
}

/* Enviado */

.account-area .order-status[data-status="shipped"] {
  border-color: #8ebee3;
  background: #edf7ff;
  color: #176090;
}

.account-area .order-status[data-status="shipped"]::before {
  background: #268bd2;
  box-shadow: 0 0 0 5px rgba(38, 139, 210, 0.13);
}

/* Entregue */

.account-area .order-status[data-status="delivered"] {
  border-color: #80cfa3;
  background: #eaf9f0;
  color: #12683d;
}

.account-area .order-status[data-status="delivered"]::before {
  background: #20bc65;
  box-shadow: 0 0 0 5px rgba(32, 188, 101, 0.13);
}

/* Cancelado */

.account-area .order-status[data-status="cancelled"] {
  border-color: #e2aaaa;
  background: #fff0f0;
  color: #9b2e2e;
}

.account-area .order-status[data-status="cancelled"]::before {
  background: #d84b4b;
  box-shadow: 0 0 0 5px rgba(216, 75, 75, 0.13);
}

/* Container do rastreamento */

.account-area #orderTimeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  width: 100%;
  margin-top: 8px;
  padding: 12px 0 4px;
}

/* Etapa */

.account-area .order-track-step {
  position: relative;
  display: grid;
  gap: 17px;
  min-width: 0;
}

/* Linha que conecta as etapas */

.account-area .order-track-step::after {
  content: "";

  position: absolute;
  z-index: 0;
  top: 8px;
  left: 18px;

  width: calc(100% - 18px);
  height: 1px;

  background: #d7d3cc;
}

/* Última etapa não precisa de linha */

.account-area .order-track-step:last-child::after {
  display: none;
}

/* Marcador */

.account-area .order-track-marker {
  position: relative;
  z-index: 1;

  display: grid;
  place-items: center;

  width: 17px;
  height: 17px;

  border: 1px solid #c9c5be;
  border-radius: 50%;

  background: #f5f3ee;
}

/* Texto */

.account-area .order-track-content {
  display: grid;
  gap: 6px;
  max-width: 130px;
  padding-right: 14px;
}

.account-area .order-track-content small {
  color: #98938b;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
}

.account-area .order-track-content strong {
  color: #88837c;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Etapa concluída */

.account-area .order-track-step.is-complete::after {
  background: #20bc65;
}

.account-area .order-track-step.is-complete .order-track-marker {
  border-color: #20bc65;
  background: #20bc65;
}

.account-area .order-track-step.is-complete .order-track-marker::after {
  content: "✓";
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
}

.account-area .order-track-step.is-complete small {
  color: #16884c;
}

.account-area .order-track-step.is-complete strong {
  color: #0b0b0b;
}

/* Etapa atual */

.account-area .order-track-step.is-current .order-track-marker {
  border: 5px solid #6947ff;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(105, 71, 255, 0.13);
}

.account-area .order-track-step.is-current small {
  color: #6947ff;
}

.account-area .order-track-step.is-current strong {
  color: #0b0b0b;
  font-weight: 700;
}

/* Etapas futuras */

.account-area .order-track-step.is-future {
  opacity: 0.66;
}

/* Pedido cancelado */

.account-area .order-track-step.is-cancelled {
  opacity: 0.45;
}

.account-area .order-track-step.is-cancelled:first-child {
  opacity: 1;
}

.account-area .order-track-step.is-cancelled:first-child .order-track-marker {
  border-color: #d84b4b;
  background: #d84b4b;
}

.account-area
  .order-track-step.is-cancelled:first-child
  .order-track-marker::after {
  content: "×";
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

/* Mobile: rastreamento vertical */

@media (max-width: 680px) {
  .account-area .order-detail-hero {
    gap: 26px;
  }

  .account-area .order-status {
    width: 100%;
    min-width: 0;
    min-height: 50px;
  }

  .account-area #orderTimeline {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .account-area .order-track-step {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 15px;
    min-height: 68px;
  }

  .account-area .order-track-step::after {
    top: 17px;
    left: 8px;

    width: 1px;
    height: calc(100% - 1px);
  }

  .account-area .order-track-step:last-child {
    min-height: 30px;
  }

  .account-area .order-track-marker {
    margin-top: 2px;
  }

  .account-area .order-track-content {
    gap: 3px;
    max-width: none;
    padding: 0 0 20px;
  }

  .account-area .order-track-content small {
    font-size: 0.53rem;
  }

  .account-area .order-track-content strong {
    font-size: 0.85rem;
  }
}

/* ==========================================================
   PEDIDOS — CARD TRANSACTIONAL PREMIUM
   Manter no final absoluto do styles_new.css
   ========================================================== */

.account-area #ordersList {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}

/* Estrutura principal */

.account-area #ordersList > .premium-order-card {
  --order-accent: #6947ff;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: grid !important;
  grid-template-areas:
    "identity status total action";
  grid-template-columns:
    minmax(240px, 1.3fr)
    minmax(140px, 0.7fr)
    minmax(120px, 0.5fr)
    170px !important;
  align-items: center !important;
  gap: 26px !important;

  width: 100% !important;
  min-height: 116px;

  margin: 0 !important;
  padding: 0 22px 0 30px !important;

  border: 1px solid #d5d1ca !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #0b0b0b !important;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 35px rgba(20, 18, 14, 0.025);

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

/* Linha de identidade lateral */

.account-area #ordersList > .premium-order-card::before {
  content: "";

  position: absolute;
  inset: 0 auto 0 0;

  width: 4px;
  background: var(--order-accent);
}

/* Número editorial do card */

.account-area #ordersList > .premium-order-card::after {
  content: var(--order-index);

  position: absolute;
  z-index: -1;
  right: 190px;
  bottom: -20px;

  color: rgba(11, 11, 11, 0.025);

  font-family: "Space Grotesk", sans-serif;
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.08em;

  pointer-events: none;
}

.account-area #ordersList > .premium-order-card:hover {
  border-color: #aaa69f !important;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 16px 45px rgba(20, 18, 14, 0.07);

  transform: translateY(-3px);
}

/* Informações do pedido */

.account-area
  #ordersList
  > .premium-order-card
  > :first-child {
  grid-area: identity;

  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;

  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
}

.account-area #ordersList > .premium-order-card h2,
.account-area #ordersList > .premium-order-card h3,
.account-area #ordersList > .premium-order-card h4 {
  margin: 0 !important;

  color: #0b0b0b !important;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.035em !important;
}

.account-area #ordersList > .premium-order-card time,
.account-area #ordersList > .premium-order-card [class*="date"] {
  color: #77736d !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 0.62rem !important;
}

/* Status — remove a aparência de input */

.account-area
  #ordersList
  > .premium-order-card
  [data-order-status] {
  grid-area: status;

  position: relative;

  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 10px;

  width: fit-content !important;
  min-width: 0 !important;
  min-height: 34px;

  margin: 0 !important;
  padding: 0 13px !important;

  border: 0 !important;
  border-radius: 999px;

  background: #efede8 !important;
  color: #5e5952 !important;

  font-family: "IBM Plex Mono", monospace !important;
  font-size: 0.58rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  white-space: nowrap;
}

.account-area
  #ordersList
  > .premium-order-card
  [data-order-status]::before {
  content: "";

  width: 7px;
  height: 7px;
  flex: 0 0 auto;

  border-radius: 50%;
  background: currentColor;

  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
}

/* Pendente */

.account-area
  #ordersList
  > .premium-order-card
  [data-order-status="pending"] {
  background: #fff4ca !important;
  color: #8a6800 !important;
}

/* Pago */

.account-area
  #ordersList
  > .premium-order-card
  [data-order-status="paid"] {
  background: #e6f7ed !important;
  color: #147946 !important;
}

/* Preparação */

.account-area
  #ordersList
  > .premium-order-card
  [data-order-status="preparing"] {
  background: #eee9ff !important;
  color: #593bd0 !important;
}

/* Enviado */

.account-area
  #ordersList
  > .premium-order-card
  [data-order-status="shipped"] {
  background: #e6f4ff !important;
  color: #176c9f !important;
}

/* Entregue */

.account-area
  #ordersList
  > .premium-order-card
  [data-order-status="delivered"] {
  background: #e4f7ec !important;
  color: #137943 !important;
}

/* Cancelado */

.account-area
  #ordersList
  > .premium-order-card
  [data-order-status="cancelled"] {
  background: #ffebeb !important;
  color: #a13636 !important;
}

/* Total */

.account-area
  #ordersList
  > .premium-order-card
  > [class*="total"],
.account-area
  #ordersList
  > .premium-order-card
  > [class*="price"],
.account-area
  #ordersList
  > .premium-order-card
  > [class*="value"] {
  grid-area: total;

  position: relative;

  display: grid;
  gap: 5px;

  color: #0b0b0b !important;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: right;
  white-space: nowrap;
}

.account-area
  #ordersList
  > .premium-order-card
  > [class*="total"]::before,
.account-area
  #ordersList
  > .premium-order-card
  > [class*="price"]::before,
.account-area
  #ordersList
  > .premium-order-card
  > [class*="value"]::before {
  content: "TOTAL";

  color: #918c84;

  font-family: "IBM Plex Mono", monospace;
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

/* Botão integrado */

.account-area
  #ordersList
  > .premium-order-card
  > a {
  grid-area: action;

  display: inline-flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 20px;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px;

  margin: 0 !important;
  padding: 0 18px !important;

  border: 1px solid #101010 !important;
  border-radius: 0;

  background: #101010 !important;
  color: #fff !important;

  font-family: "Inter", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.account-area
  #ordersList
  > .premium-order-card
  > a::after {
  content: "→";

  color: #f1ca38;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;

  transition: transform 180ms ease;
}

.account-area
  #ordersList
  > .premium-order-card
  > a:hover {
  border-color: #6947ff !important;
  background: #6947ff !important;
  color: #fff !important;
}

.account-area
  #ordersList
  > .premium-order-card
  > a:hover::after {
  color: #fff;
  transform: translateX(4px);
}

/* Tablet */

@media (max-width: 1050px) {
  .account-area #ordersList > .premium-order-card {
    grid-template-areas:
      "identity identity"
      "status total"
      "action action";

    grid-template-columns: minmax(0, 1fr) auto !important;

    gap: 19px !important;
    padding: 25px !important;
  }

  .account-area #ordersList > .premium-order-card::after {
    right: 22px;
  }

  .account-area
    #ordersList
    > .premium-order-card
    > a {
    max-width: 300px;
  }
}

/* Mobile */

@media (max-width: 680px) {
  .account-area #ordersList {
    gap: 14px !important;
  }

  .account-area #ordersList > .premium-order-card {
    grid-template-areas:
      "identity identity"
      "status total"
      "action action";

    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 20px 14px !important;

    min-height: 0;

    padding: 25px 20px 20px 24px !important;

    box-shadow:
      0 1px 0 rgba(255, 255, 255, 1) inset,
      0 12px 30px rgba(20, 18, 14, 0.04);
  }

  .account-area #ordersList > .premium-order-card::before {
    width: 3px;
  }

  .account-area #ordersList > .premium-order-card::after {
    right: 14px;
    bottom: 46px;
    font-size: 5rem;
  }

  .account-area
    #ordersList
    > .premium-order-card
    > :first-child {
    padding-bottom: 18px !important;
    border-bottom: 1px solid #dedbd5 !important;
  }

  .account-area #ordersList > .premium-order-card h2,
  .account-area #ordersList > .premium-order-card h3,
  .account-area #ordersList > .premium-order-card h4 {
    font-size: 1.05rem !important;
  }

  .account-area
    #ordersList
    > .premium-order-card
    > [class*="total"],
  .account-area
    #ordersList
    > .premium-order-card
    > [class*="price"],
  .account-area
    #ordersList
    > .premium-order-card
    > [class*="value"] {
    font-size: 1.1rem !important;
  }

  .account-area
    #ordersList
    > .premium-order-card
    > a {
    width: 100% !important;
    max-width: none;
    min-height: 52px;
  }
}

.account-area
  #ordersList
  .premium-order-card
  [data-order-status],
.account-area
  #ordersList
  .premium-order-card
  [data-order-status] > * {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.account-area .order-track-content small {
  display: none !important;
}

.account-area .order-track-content {
  gap: 0;
}

/* ==========================================================
   ITENS DO PEDIDO — CORREÇÃO PREMIUM
   ========================================================== */

.account-area #orderItems {
  display: grid;
}

/* Item sem imagem */

.account-area #orderItems .order-item:not(:has(img)) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;

  min-height: 96px;
  padding: 22px 0 !important;

  border-bottom: 1px solid #dedbd5;
}

/* Item com imagem, caso seja adicionada futuramente */

.account-area #orderItems .order-item:has(img) {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;

  min-height: 110px;
  padding: 18px 0 !important;

  border-bottom: 1px solid #dedbd5;
}

.account-area #orderItems .order-item:last-child {
  border-bottom: 0;
}

/* Evita que o nome seja esmagado */

.account-area #orderItems .order-item > * {
  min-width: 0;
}

.account-area #orderItems .order-item h3,
.account-area #orderItems .order-item h4,
.account-area #orderItems .order-item strong {
  display: block;

  margin: 0 0 8px !important;

  color: #0b0b0b !important;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;

  overflow-wrap: normal;
  word-break: normal;
}

/* Informações de cor, tamanho e quantidade */

.account-area #orderItems .order-item p,
.account-area #orderItems .order-item small,
.account-area #orderItems .order-item [class*="variant"],
.account-area #orderItems .order-item [class*="quantity"] {
  margin: 0 !important;

  color: #6d6962 !important;

  font-family: "IBM Plex Mono", monospace !important;
  font-size: 0.65rem !important;
  line-height: 1.65 !important;
  letter-spacing: 0.02em;
}

/* Preço: considera normalmente o último elemento */

.account-area #orderItems .order-item > :last-child {
  color: #0b0b0b !important;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  text-align: right;
  white-space: nowrap;
}

/* Caso o JS use classes específicas para o preço */

.account-area #orderItems .order-item [class*="price"],
.account-area #orderItems .order-item [class*="total"],
.account-area #orderItems .order-item [class*="value"] {
  color: #0b0b0b !important;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;

  text-align: right;
  white-space: nowrap;
}

/* Imagem futura */

.account-area #orderItems .order-item img {
  display: block;

  width: 76px;
  height: 88px;

  object-fit: cover;

  border: 1px solid #dedbd5;
  background: #eceae5;
}

/* Mobile */

@media (max-width: 680px) {
  .account-area #orderItems .order-item:not(:has(img)) {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 16px !important;
    min-height: 90px;
    padding: 20px 0 !important;
  }

  .account-area #orderItems .order-item:has(img) {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .account-area #orderItems .order-item:has(img) > :last-child {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .account-area #orderItems .order-item img {
    width: 66px;
    height: 78px;
  }

  .account-area #orderItems .order-item h3,
  .account-area #orderItems .order-item h4,
  .account-area #orderItems .order-item strong {
    font-size: 0.95rem !important;
  }
}

/* ==========================================================
   ÍCONES E AÇÕES — PAINEL DA CONTA
   ========================================================== */

.account-area .account-card-icon {
  position: relative;

  display: grid;
  place-items: center;

  width: 58px;
  height: 58px;
  margin-bottom: 52px;

  overflow: hidden;

  border: 0;
  border-radius: 17px;

  background: #eeeaff;
  color: #6947ff;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 25px rgba(105, 71, 255, 0.12);

  transition:
    color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

/* Camada de profundidade */

.account-area .account-card-icon::before {
  content: "";

  position: absolute;
  inset: 7px;

  border: 1px solid rgba(105, 71, 255, 0.14);
  border-radius: 11px;

  pointer-events: none;
}

.account-area .account-card-icon svg {
  position: relative;
  z-index: 1;

  width: 25px;
  height: 25px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    stroke-width 200ms ease,
    transform 200ms ease;
}

/* Pedidos */

.account-area
  .account-action-card:nth-child(1)
  .account-card-icon {
  background: #eeeaff;
  color: #6947ff;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 25px rgba(105, 71, 255, 0.13);
}

/* Dados pessoais */

.account-area
  .account-action-card:nth-child(2)
  .account-card-icon {
  background: #e9f5ff;
  color: #247bb3;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 25px rgba(36, 123, 179, 0.1);
}

.account-area
  .account-action-card:nth-child(2)
  .account-card-icon::before {
  border-color: rgba(36, 123, 179, 0.14);
}

/* Segurança */

.account-area
  .account-action-card:nth-child(3)
  .account-card-icon {
  background: rgba(241, 202, 56, 0.12);
  color: #f1ca38;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 10px 28px rgba(241, 202, 56, 0.08);
}

.account-area
  .account-action-card:nth-child(3)
  .account-card-icon::before {
  border-color: rgba(241, 202, 56, 0.17);
}

/* Interação do card com o ícone */

.account-area .account-action-card:hover .account-card-icon {
  color: #fff;
  background: #6947ff;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 14px 32px rgba(105, 71, 255, 0.25);

  transform: translateY(-4px) rotate(-2deg);
}

.account-area
  .account-action-card:hover
  .account-card-icon::before {
  border-color: rgba(255, 255, 255, 0.2);
}

.account-area
  .account-action-card:hover
  .account-card-icon
  svg {
  stroke-width: 1.8;
  transform: scale(1.07);
}

/* Card escuro de segurança */

.account-area
  .account-action-card-dark:hover
  .account-card-icon {
  background: #f1ca38;
  color: #101010;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 14px 32px rgba(241, 202, 56, 0.2);
}

/* Seta vira um controle visual */

.account-area .account-card-arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;

  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border: 1px solid #cbc7c0;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.5);
  color: #0b0b0b;

  font-family: "IBM Plex Mono", monospace;
  font-size: 0.95rem;

  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.account-area
  .account-action-card-dark
  .account-card-arrow {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.account-area
  .account-action-card:hover
  .account-card-arrow {
  border-color: #101010;
  background: #101010;
  color: #f1ca38;

  transform: translateX(4px);
}

.account-area
  .account-action-card-dark:hover
  .account-card-arrow {
  border-color: #fff;
  background: #fff;
  color: #6947ff;
}

/* Feedback de teclado */

.account-area .account-action-card:focus-visible {
  outline: 3px solid rgba(105, 71, 255, 0.25);
  outline-offset: 4px;
}

.account-area
  .account-action-card:focus-visible
  .account-card-icon {
  color: #fff;
  background: #6947ff;
}

/* Mobile: menos vazio vertical */

@media (max-width: 680px) {
  .account-area .account-card-icon {
    width: 54px;
    height: 54px;

    margin-bottom: 42px;

    border-radius: 15px;
  }

  .account-area .account-card-icon::before {
    inset: 6px;
    border-radius: 10px;
  }

  .account-area .account-card-icon svg {
    width: 23px;
    height: 23px;
  }

  .account-area .account-card-arrow {
    right: 20px;
    bottom: 20px;

    width: 40px;
    height: 40px;
  }
}

/* Respeita usuários que desativam animações */

@media (prefers-reduced-motion: reduce) {
  .account-area .account-card-icon,
  .account-area .account-card-icon svg,
  .account-area .account-card-arrow {
    transition: none;
  }

  .account-area
    .account-action-card:hover
    .account-card-icon {
    transform: none;
  }
}

/* ==========================================================
   FAIXA DE CONFIANÇA — ÁREA DO CLIENTE
   ========================================================== */

.account-area .account-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin-top: 38px;

  overflow: hidden;

  border: 0;
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(105, 71, 255, 0.16),
      transparent 260px
    ),
    #101010;

  color: #fff;

  box-shadow:
    0 18px 45px rgba(10, 10, 10, 0.09),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.account-area .account-trust-strip > div {
  position: relative;

  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 17px;

  min-height: 128px;
  padding: 26px;

  transition:
    background 180ms ease,
    transform 180ms ease;
}

.account-area .account-trust-strip > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.11);
}

/* Caixa do ícone */

.account-area .account-trust-strip > div > span {
  position: relative;

  display: grid;
  place-items: center;

  width: 52px;
  height: 52px;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 15px;

  background: rgba(255, 255, 255, 0.055);
  color: #f1ca38;

  font-size: 0;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 26px rgba(0, 0, 0, 0.16);

  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.account-area .account-trust-strip > div > span::before {
  content: "";

  width: 23px;
  height: 23px;

  background: currentColor;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* Dados protegidos — escudo */

.account-area
  .account-trust-strip
  > div:nth-child(1)
  > span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 2.7 7.7 7 10 4.3-2.3 7-5.5 7-10V6l-7-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 2.7 7.7 7 10 4.3-2.3 7-5.5 7-10V6l-7-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* Suporte humano — conversa */

.account-area
  .account-trust-strip
  > div:nth-child(2)
  > span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a4 4 0 0 1-4 4H9l-5 2 1.5-4A7 7 0 1 1 20 15Z'/%3E%3Cpath d='M9 11h6M9 14h4'/%3E%3C/svg%3E");

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a4 4 0 0 1-4 4H9l-5 2 1.5-4A7 7 0 1 1 20 15Z'/%3E%3Cpath d='M9 11h6M9 14h4'/%3E%3C/svg%3E");
}

/* Compra segura — pagamento */

.account-area
  .account-trust-strip
  > div:nth-child(3)
  > span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 9h18M8 15h3'/%3E%3C/svg%3E");

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 9h18M8 15h3'/%3E%3C/svg%3E");
}

/* Textos */

.account-area .account-trust-strip p {
  display: grid;
  gap: 7px;

  margin: 0;

  color: rgba(255, 255, 255, 0.53);

  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  line-height: 1.55;
}

.account-area .account-trust-strip strong {
  color: #fff;

  font-family: "Space Grotesk", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Detalhe inferior */

.account-area .account-trust-strip > div::after {
  content: "";

  position: absolute;
  right: 26px;
  bottom: 0;
  left: 26px;

  height: 2px;

  background: #6947ff;

  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;

  transition:
    opacity 180ms ease,
    transform 220ms ease;
}

/* Interação */

.account-area .account-trust-strip > div:hover {
  background: rgba(255, 255, 255, 0.045);
}

.account-area
  .account-trust-strip
  > div:hover
  > span {
  border-color: #6947ff;
  background: #6947ff;
  color: #fff;

  transform: translateY(-3px);
}

.account-area .account-trust-strip > div:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Tablet */

@media (max-width: 980px) {
  .account-area .account-trust-strip {
    grid-template-columns: 1fr;
  }

  .account-area .account-trust-strip > div {
    min-height: 112px;
  }

  .account-area .account-trust-strip > div + div {
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    border-left: 0;
  }
}

/* Mobile */

@media (max-width: 680px) {
  .account-area .account-trust-strip {
    margin-top: 24px;
  }

  .account-area .account-trust-strip > div {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 15px;

    min-height: 100px;
    padding: 21px 20px;
  }

  .account-area .account-trust-strip > div > span {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }

  .account-area
    .account-trust-strip
    > div
    > span::before {
    width: 21px;
    height: 21px;
  }

  .account-area .account-trust-strip > div::after {
    right: 20px;
    left: 20px;
  }
}

/* ==========================================================
   HOME — FAIXA PREMIUM DE DIFERENCIAIS
   ========================================================== */

.home .benefits-premium,
main > .benefits-premium {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;

  overflow: hidden;

  border: 0;
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(105, 71, 255, 0.18),
      transparent 300px
    ),
    #101010;

  color: #fff;

  box-shadow:
    0 18px 45px rgba(10, 10, 10, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.home .benefits-premium > div,
main > .benefits-premium > div {
  position: relative;

  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;

  min-height: 122px;
  padding: 25px 23px;

  transition:
    background 180ms ease,
    transform 180ms ease;
}

.home .benefits-premium > div + div,
main > .benefits-premium > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.11);
}

/* Caixa do ícone */

.home .benefits-premium > div::before,
main > .benefits-premium > div::before {
  content: "";

  grid-row: 1 / 3;

  width: 50px;
  height: 50px;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 15px;

  background-color: rgba(255, 255, 255, 0.055);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 23px;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 26px rgba(0, 0, 0, 0.16);

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

/* 01 — Algodão premium */

.home .benefits-premium > div:nth-child(1)::before,
main > .benefits-premium > div:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1ca38' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-8'/%3E%3Cpath d='M12 13C6 13 4 9 4 5c4 0 8 2 8 8Z'/%3E%3Cpath d='M12 13c6 0 8-4 8-8-4 0-8 2-8 8Z'/%3E%3C/svg%3E");
}

/* 02 — Estampas autorais */

.home .benefits-premium > div:nth-child(2)::before,
main > .benefits-premium > div:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1ca38' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14 5 5 5'/%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4Z'/%3E%3Cpath d='m12 8 4 4'/%3E%3C/svg%3E");
}

/* 03 — Produção nacional */

.home .benefits-premium > div:nth-child(3)::before,
main > .benefits-premium > div:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1ca38' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V5l7-2 7 2v16'/%3E%3Cpath d='M3 21h18M9 8h2M14 8h2M9 12h2M14 12h2M10 21v-5h4v5'/%3E%3C/svg%3E");
}

/* 04 — Compra segura */

.home .benefits-premium > div:nth-child(4)::before,
main > .benefits-premium > div:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1ca38' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 2.7 7.7 7 10 4.3-2.3 7-5.5 7-10V6l-7-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* Textos */

.home .benefits-premium b,
main > .benefits-premium b {
  align-self: end;

  color: #fff;

  font-family: "Space Grotesk", sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.home .benefits-premium span,
main > .benefits-premium span {
  align-self: start;

  margin-top: 6px;

  color: rgba(255, 255, 255, 0.52);

  font-family: "Inter", sans-serif;
  font-size: 0.67rem;
  line-height: 1.45;
}

/* Linha de interação */

.home .benefits-premium > div::after,
main > .benefits-premium > div::after {
  content: "";

  position: absolute;
  right: 23px;
  bottom: 0;
  left: 23px;

  height: 2px;

  background: #6947ff;

  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;

  transition:
    opacity 180ms ease,
    transform 220ms ease;
}

.home .benefits-premium > div:hover,
main > .benefits-premium > div:hover {
  background: rgba(255, 255, 255, 0.045);
}

.home .benefits-premium > div:hover::before,
main > .benefits-premium > div:hover::before {
  border-color: #6947ff;
  background-color: #6947ff;

  transform: translateY(-3px);
}

.home .benefits-premium > div:hover::after,
main > .benefits-premium > div:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Tablet */

@media (max-width: 980px) {
  .home .benefits-premium,
  main > .benefits-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home .benefits-premium > div:nth-child(3),
  .home .benefits-premium > div:nth-child(4),
  main > .benefits-premium > div:nth-child(3),
  main > .benefits-premium > div:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, 0.11);
  }

  .home .benefits-premium > div:nth-child(3),
  main > .benefits-premium > div:nth-child(3) {
    border-left: 0;
  }
}

/* Mobile */

@media (max-width: 680px) {
  .home .benefits-premium,
  main > .benefits-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    width: calc(100% - 28px);
    margin-top: 14px;
  }

  .home .benefits-premium > div,
  main > .benefits-premium > div {
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;

    min-height: 126px;
    padding: 19px 15px;
  }

  .home .benefits-premium > div::before,
  main > .benefits-premium > div::before {
    width: 42px;
    height: 42px;

    border-radius: 12px;
    background-size: 20px;
  }

  .home .benefits-premium b,
  main > .benefits-premium b {
    font-size: 0.75rem;
  }

  .home .benefits-premium span,
  main > .benefits-premium span {
    font-size: 0.6rem;
  }

  .home .benefits-premium > div::after,
  main > .benefits-premium > div::after {
    right: 15px;
    left: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .benefits-premium > div,
  .home .benefits-premium > div::before,
  main > .benefits-premium > div,
  main > .benefits-premium > div::before {
    transition: none;
  }
}

/* ==========================================================
   HOME — ENQUADRAMENTO DO HERO COM A FAIXA PREMIUM
   ========================================================== */

@media (min-width: 981px) {
  .hero.hero-premium {
    display: grid;
    grid-template-columns: minmax(500px, 0.95fr) minmax(0, 1.3fr);

    width: min(1440px, calc(100% - 48px));
    height: clamp(520px, 31vw, 570px);
    min-height: 0;

    margin: 0 auto;

    overflow: hidden;

    border-right: 1px solid #dedbd5;
    border-left: 1px solid #dedbd5;
  }

  /* Texto um pouco mais compacto */

  .hero.hero-premium .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: clamp(42px, 4vw, 68px);
  }

  .hero.hero-premium .hero-copy h1 {
    font-size: clamp(3.8rem, 2.5vw, 5.2rem);
    line-height: 0.94;
  }

  .hero.hero-premium .hero-copy > p {
    max-width: 520px;
    margin-top: 25px;
  }

  .hero.hero-premium .hero-ctas {
    margin-top: 29px;
  }

  .hero.hero-premium .hero-copy code {
    margin-top: 34px;
  }

  /* Imagem acompanha exatamente a altura do hero */

  .hero.hero-premium .hero-editorial-image {
    width: 100%;
    height: 100%;
    min-height: 0;

    overflow: hidden;
  }

  .hero.hero-premium .hero-editorial-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Mantém rostos e estampas dentro do enquadramento.
     * Pode testar 48%, 50% ou 52% conforme a imagem.
     */
    object-position: 50% 40%;
  }

  /* Faixa com a mesma largura e sem parecer flutuante */

  main > .benefits-premium {
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;

    box-shadow:
      0 18px 45px rgba(10, 10, 10, 0.09),
      0 1px 0 rgba(255, 255, 255, 0.06) inset;
  }
}

/* ==========================================================
   HOME — NAVEGAÇÃO PREMIUM DO CARROSSEL
   ========================================================== */

.home-product-carousel {
  position: relative;
  min-width: 0;
  
}

/* Setas */

.home-carousel-arrow {
  position: absolute;
  z-index: 20;
  top: 37%;

  display: none;
  place-items: center;

  width: 50px;
  height: 50px;

  padding: 0;

  border: 1px solid rgba(15, 15, 15, 0.1);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.94);
  color: #101010;

  box-shadow:
    0 12px 30px rgba(10, 10, 10, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;

  transform: translateY(-50%);

  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.home-product-carousel.is-scrollable .home-carousel-arrow {
  display: grid;
}

.home-carousel-arrow svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-carousel-arrow-prev {
  left: -25px;
}

.home-carousel-arrow-next {
  right: -25px;
}

.home-carousel-arrow:hover {
  border-color: #6947ff;
  background: #6947ff;
  color: #fff;

  box-shadow:
    0 15px 34px rgba(105, 71, 255, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;

  transform: translateY(-50%) scale(1.06);
}

.home-carousel-arrow:active {
  transform: translateY(-50%) scale(0.96);
}

.home-carousel-arrow:disabled {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.86);
}

.home-carousel-arrow:focus-visible {
  outline: 3px solid rgba(105, 71, 255, 0.25);
  outline-offset: 4px;
}

/* Indicador inferior */

.home-carousel-progress {
  position: relative;

  display: none;

  width: min(240px, 45%);
  height: 2px;

  margin: 24px auto 0;

  overflow: hidden;

  background: #d3d0ca;
}

.home-carousel-progress.is-visible {
  display: block;
}

.home-carousel-progress span {
  position: absolute;
  inset: 0 auto 0 0;

  min-width: 18%;
  height: 100%;

  background: #101010;

  transform-origin: left center;

  transition:
    width 180ms ease,
    transform 100ms linear;
}

/* Tablet e mobile */

@media (max-width: 980px) {
  .home-product-carousel .product-grid {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;

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

  .home-product-carousel .product-grid::-webkit-scrollbar {
    display: none;
  }

  .home-product-carousel .product-grid > * {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  .home-carousel-arrow {
    top: 36%;

    width: 46px;
    height: 46px;
  }

  .home-carousel-arrow-prev {
    left: -6px;
  }

  .home-carousel-arrow-next {
    right: -6px;
  }
}

/* Mobile */

@media (max-width: 680px) {
  .home-carousel-arrow {
    top: 35%;

    width: 46px;
    height: 46px;

    box-shadow:
      0 10px 26px rgba(10, 10, 10, 0.18),
      0 1px 0 rgba(255, 255, 255, 0.95) inset;
  }

  .home-carousel-arrow-prev {
    left: -10px;
  }

  .home-carousel-arrow-next {
    right: -10px;
  }

  .home-carousel-arrow svg {
    width: 18px;
    height: 18px;
  }

  .home-carousel-progress {
    width: 122px;
    margin-top: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-carousel-arrow,
  .home-carousel-progress span {
    transition: none;
  }

  .home-product-carousel .product-grid {
    scroll-behavior: auto;
  }
}

/* =========================================================
   LOGIN / CADASTRO — TEMPLATE PREMIUM CLUBE404
   Cole este bloco no FINAL de /css/styles_new.css
   ========================================================= */

.login-premium-page {
  --login-ink: #171717;
  --login-muted: #6d6b66;
  --login-line: #d9d5cd;
  --login-paper: #f4f2ed;
  --login-card: #fbfaf7;
  --login-accent: #ff4d00;
  margin: 0;
  color: var(--login-ink);
  background: var(--login-paper);
  font-family: "Inter", sans-serif;
}

.login404-main {
  min-height: 760px;
  padding: 46px 24px 72px;
  background:
    linear-gradient(rgba(23, 23, 23, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 23, 23, 0.035) 1px, transparent 1px),
    var(--login-paper);
  background-size: 48px 48px;
}

.login404-shell {
  width: min(1280px, 100%);
  min-height: 690px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(470px, 0.97fr);
  overflow: hidden;
  border: 1px solid var(--login-line);
  border-radius: 30px;
  background: var(--login-card);
  box-shadow: 0 30px 80px rgba(27, 25, 21, 0.08);
}

.login404-story {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 34px 42px 32px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 83% 18%, rgba(255, 77, 0, 0.2), transparent 28%),
    linear-gradient(145deg, #171717 0%, #22211f 58%, #111 100%);
}

.login404-story::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  right: -220px;
  bottom: -170px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(255, 255, 255, 0.025),
    0 0 0 140px rgba(255, 255, 255, 0.018);
  pointer-events: none;
}

.login404-breadcrumb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.login404-breadcrumb a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.2s ease;
}

.login404-breadcrumb a:hover {
  color: #fff;
}

.login404-story-content {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  margin: auto 0;
  padding: 62px 0 44px;
}

.login404-eyebrow,
.login404-form-title > span,
.login404-card-index {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.login404-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ff7a40;
}

.login404-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.login404-story h1 {
  max-width: 600px;
  margin: 24px 0 22px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(48px, 5.3vw, 76px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.login404-story h1 em {
  color: #ff6a2a;
  font-style: normal;
}

.login404-story-content > p {
  max-width: 510px;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.7;
}

.login404-benefits {
  display: grid;
  gap: 0;
  margin-top: 42px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.login404-benefits > div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.login404-benefits > div > span {
  color: #ff6a2a;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}

.login404-benefits p,
.login404-security p {
  display: grid;
  gap: 4px;
  margin: 0;
}

.login404-benefits strong {
  font-size: 14px;
  font-weight: 600;
}

.login404-benefits small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  line-height: 1.45;
}

.login404-signature {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.28);
}

.login404-signature code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}

.login404-signature span {
  font-family: "Space Grotesk", sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.06em;
}

.login404-access {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 42px clamp(28px, 4vw, 64px);
  background: var(--login-card);
}

.login404-card {
  width: min(500px, 100%);
  margin: 0 auto;
}

.login404-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--login-line);
}

.login404-card-index {
  color: var(--login-accent);
}

.login404-card-head p {
  margin: 0;
  color: var(--login-muted);
  font-size: 12px;
}

.login404-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 36px;
  padding: 4px;
  border: 1px solid var(--login-line);
  border-radius: 999px;
  background: #efede8;
}

.login404-tab {
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  color: var(--login-muted);
  background: transparent;
  font: 600 14px/1 "Inter", sans-serif;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.login404-tab:hover {
  color: var(--login-ink);
}

.login404-tab.active {
  color: #fff;
  background: var(--login-ink);
  box-shadow: 0 6px 18px rgba(23, 23, 23, 0.16);
}

.login404-tab:focus-visible,
.login404-submit:focus-visible,
.login404-field input:focus-visible,
.login404-check input:focus-visible {
  outline: 3px solid rgba(255, 77, 0, 0.22);
  outline-offset: 2px;
}

.login404-form-panel {
  display: none;
  animation: login404Reveal 0.24s ease both;
}

.login404-form-panel.active {
  display: block;
}

.login404-form-panel[hidden] {
  display: none !important;
}

@keyframes login404Reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login404-form-title {
  margin-bottom: 28px;
}

.login404-form-title > span {
  color: var(--login-accent);
}

.login404-form-title h2 {
  margin: 10px 0 8px;
  color: var(--login-ink);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.login404-form-title p {
  margin: 0;
  color: var(--login-muted);
  font-size: 14px;
  line-height: 1.55;
}

.login404-form-panel form {
  display: grid;
  gap: 18px;
}

.login404-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.login404-field {
  display: grid;
  gap: 8px;
}

.login404-field label {
  color: #343330;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.login404-field input {
  width: 100%;
  height: 54px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid var(--login-line);
  border-radius: 12px;
  color: var(--login-ink);
  background: #fff;
  font: 500 14px/1 "Inter", sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.login404-field input::placeholder {
  color: #aaa69f;
  font-weight: 400;
}

.login404-field input:hover {
  border-color: #b8b3a9;
}

.login404-field input:focus {
  border-color: var(--login-ink);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(23, 23, 23, 0.055);
}

.login404-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: fit-content;
  color: var(--login-muted);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}

.login404-check input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--login-accent);
}

.login404-check a {
  color: var(--login-ink);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.login404-form-panel .feedback-message {
  min-height: 18px;
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.login404-form-panel .feedback-message:empty {
  display: none;
}

.login404-form-panel .feedback-message.error {
  color: #b42318;
}

.login404-form-panel .feedback-message.success {
  color: #157f3d;
}

.login404-submit {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px 0 20px;
  border: 1px solid var(--login-ink);
  border-radius: 12px;
  color: #fff;
  background: var(--login-ink);
  font: 600 14px/1 "Inter", sans-serif;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.login404-submit b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: var(--login-ink);
  background: #fff;
  font-size: 16px;
  transition: transform 0.2s ease;
}

.login404-submit:hover {
  background: #292826;
  box-shadow: 0 12px 24px rgba(23, 23, 23, 0.16);
  transform: translateY(-1px);
}

.login404-submit:hover b {
  transform: translateX(2px);
}

.login404-submit:active {
  transform: translateY(0);
}

.login404-security {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--login-line);
}

.login404-security > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--login-line);
  border-radius: 50%;
  color: var(--login-accent);
  font-size: 14px;
}

.login404-security strong {
  color: #343330;
  font-size: 11px;
  font-weight: 600;
}

.login404-security small {
  color: #8b8881;
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 1020px) {
  .login404-shell {
    grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr);
  }

  .login404-story {
    padding: 30px;
  }

  .login404-story h1 {
    font-size: clamp(44px, 6vw, 62px);
  }

  .login404-benefits small {
    display: none;
  }
}

@media (max-width: 820px) {
  .login404-main {
    min-height: 0;
    padding: 20px 16px 48px;
  }

  .login404-shell {
    min-height: 0;
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .login404-story {
    min-height: auto;
    padding: 26px 24px;
  }

  .login404-story-content {
    width: 100%;
    padding: 52px 0 10px;
  }

  .login404-story h1 {
    max-width: 520px;
    margin: 18px 0 16px;
    font-size: clamp(40px, 11vw, 58px);
  }

  .login404-story-content > p {
    max-width: 560px;
  }

  .login404-benefits {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 28px;
    border: 0;
  }

  .login404-benefits > div {
    grid-template-columns: 1fr;
    gap: 8px;
    align-content: start;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
  }

  .login404-benefits small,
  .login404-signature {
    display: none;
  }

  .login404-access {
    padding: 34px 24px 38px;
  }
}

@media (max-width: 560px) {
  .login404-main {
    padding: 12px 10px 36px;
  }

  .login404-shell {
    border-radius: 18px;
  }

  .login404-story {
    padding: 22px 18px;
  }

  .login404-breadcrumb {
    font-size: 10px;
  }

  .login404-story-content {
    padding-top: 38px;
  }

  .login404-story h1 {
    font-size: clamp(38px, 13vw, 50px);
  }

  .login404-story-content > p {
    font-size: 14px;
  }

  .login404-benefits {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 22px;
  }

  .login404-benefits > div {
    grid-template-columns: 34px 1fr;
    align-items: center;
    padding: 11px 12px;
  }

  .login404-access {
    padding: 28px 18px 32px;
  }

  .login404-card-head {
    align-items: flex-start;
  }

  .login404-card-head p {
    max-width: 150px;
    text-align: right;
  }

  .login404-tabs {
    margin-bottom: 28px;
  }

  .login404-field-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .login404-form-title h2 {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login404-form-panel,
  .login404-tab,
  .login404-submit,
  .login404-submit b,
  .login404-field input {
    animation: none;
    scroll-behavior: auto;
    transition: none;
  }
}


/* =========================================================
   CHECKOUT RESULT — SUCESSO / PENDENTE / FALHA
   Componente compartilhado pelas páginas de retorno do pagamento
   ========================================================= */

body.payment-result-page {
  --result-accent: #ff4d00;
  --result-soft: #fff0e9;
  --result-border: #f0b69d;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: clamp(18px, 4vw, 56px) !important;
  color: #171717 !important;
  background:
    linear-gradient(rgba(23, 23, 23, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 23, 23, 0.035) 1px, transparent 1px),
    #f3f1ec !important;
  background-size: 52px 52px !important;
  font-family: "Inter", Arial, sans-serif !important;
}

body.payment-result-success {
  --result-accent: #157f4a;
  --result-soft: #e9f7ef;
  --result-border: #b8dec8;
}

body.payment-result-pending {
  --result-accent: #a96700;
  --result-soft: #fff5dc;
  --result-border: #ead093;
}

body.payment-result-failure {
  --result-accent: #b42318;
  --result-soft: #fff0ee;
  --result-border: #efc0bb;
}

.payment-result-page *,
.payment-result-page *::before,
.payment-result-page *::after {
  box-sizing: border-box;
}

.payment-result-page .card {
  position: relative !important;
  width: min(100%, 820px) !important;
  max-width: 820px !important;
  overflow: hidden !important;
  padding: clamp(28px, 5vw, 58px) !important;
  border: 1px solid #d8d4cc !important;
  border-radius: 26px !important;
  color: #171717 !important;
  text-align: left !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 28px 80px rgba(29, 27, 22, 0.11) !important;
}

.payment-result-page .card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 7px !important;
  background: linear-gradient(90deg, #ff4d00 0 34%, var(--result-accent) 34% 100%) !important;
  pointer-events: none !important;
}

.payment-result-page .card::after {
  content: "404";
  position: absolute;
  right: -20px;
  bottom: -58px;
  color: rgba(23, 23, 23, 0.025);
  font: 700 clamp(150px, 28vw, 250px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.09em;
  pointer-events: none;
}

.payment-result-page .content {
  position: relative !important;
  z-index: 2 !important;
}

.payment-result-page .logo,
.payment-result-page .logo-text {
  width: auto !important;
  margin: 0 0 30px !important;
  text-align: left !important;
}

.payment-result-page .logo img,
.payment-result-page img.logo,
.payment-result-page .logo-text img {
  width: 156px !important;
  max-width: 156px !important;
  height: auto !important;
  display: block !important;
  filter: none !important;
}

.payment-result-page .badge {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 0 18px !important;
  padding: 0 12px !important;
  border: 1px solid var(--result-border) !important;
  border-radius: 999px !important;
  color: var(--result-accent) !important;
  background: var(--result-soft) !important;
  font: 600 10px/1 "IBM Plex Mono", monospace !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.payment-result-page h1 {
  max-width: 680px;
  margin: 0 0 16px !important;
  color: #171717 !important;
  font: 600 clamp(40px, 7vw, 66px)/0.98 "Space Grotesk", sans-serif !important;
  letter-spacing: -0.055em !important;
}

.payment-result-page h1 span {
  color: var(--result-accent) !important;
  text-shadow: none !important;
}

.payment-result-page .subtitle {
  max-width: 650px !important;
  margin: 0 0 26px !important;
  color: #6f6b64 !important;
  font-size: clamp(15px, 2vw, 18px) !important;
  line-height: 1.65 !important;
}

.payment-result-page .box,
.payment-result-page .status-box {
  margin: 24px 0 0 !important;
  padding: 20px !important;
  border: 1px solid #dedbd5 !important;
  border-left: 4px solid var(--result-accent) !important;
  border-radius: 14px !important;
  color: #3f3c37 !important;
  text-align: left !important;
  background: #f8f7f4 !important;
}

.payment-result-page .box-title,
.payment-result-page .status-title {
  margin: 0 0 9px !important;
  color: #171717 !important;
  font: 600 17px/1.3 "Space Grotesk", sans-serif !important;
}

.payment-result-page .box p,
.payment-result-page .status-message {
  margin: 0 0 8px !important;
  color: #6f6b64 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.payment-result-page .box p:last-of-type {
  margin-bottom: 0 !important;
}

.payment-result-page #orderInfo,
.payment-result-page .order-info {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid #dedbd5 !important;
  color: #3f3c37 !important;
  font: 500 12px/1.75 "IBM Plex Mono", monospace !important;
  word-break: break-word !important;
}

.payment-result-page .loader {
  width: 40px !important;
  height: 40px !important;
  margin: 22px 0 !important;
  border: 3px solid #dedbd5 !important;
  border-top-color: var(--result-accent) !important;
  border-radius: 50% !important;
  animation: result-spin 0.8s linear infinite !important;
}

@keyframes result-spin {
  to { transform: rotate(360deg); }
}

.payment-result-page .actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

.payment-result-page .btn {
  min-height: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 18px !important;
  border: 1px solid #171717 !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: #171717 !important;
  box-shadow: none !important;
  font: 600 13px/1 "Inter", sans-serif !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

.payment-result-page .btn:hover {
  border-color: #ff4d00 !important;
  background: #ff4d00 !important;
  transform: translateY(-2px);
}

.payment-result-page .btn-secondary {
  color: #171717 !important;
  border-color: #cfcac1 !important;
  background: #fff !important;
}

.payment-result-page .btn-secondary:hover {
  color: #fff !important;
  border-color: #171717 !important;
  background: #171717 !important;
}

.payment-result-page .btn-whatsapp {
  grid-column: 1 / -1;
  color: #157f4a !important;
  border-color: #b8dec8 !important;
  background: #e9f7ef !important;
}

.payment-result-page .btn-whatsapp:hover {
  color: #fff !important;
  border-color: #157f4a !important;
  background: #157f4a !important;
}

.payment-result-page .footer {
  margin-top: 24px !important;
  color: #918c84 !important;
  font: 500 10px/1.6 "IBM Plex Mono", monospace !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  body.payment-result-page {
    align-items: flex-start !important;
    padding: 12px !important;
  }

  .payment-result-page .card {
    padding: 30px 20px !important;
    border-radius: 18px !important;
  }

  .payment-result-page .logo,
  .payment-result-page .logo-text {
    margin-bottom: 24px !important;
  }

  .payment-result-page .logo img,
  .payment-result-page img.logo,
  .payment-result-page .logo-text img {
    width: 136px !important;
    max-width: 136px !important;
  }

  .payment-result-page h1 {
    font-size: clamp(38px, 12vw, 52px) !important;
  }

  .payment-result-page .actions {
    grid-template-columns: 1fr !important;
  }

  .payment-result-page .btn-whatsapp {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .payment-result-page .loader {
    animation-duration: 1.8s !important;
  }

  .payment-result-page .btn {
    transition: none !important;
  }
}

/* =========================================================
   HOME / MAIS VENDIDAS — CARD CENTRALIZADO NO MOBILE
   Mantém imagem, informações e preço no mesmo eixo visual.
   O próximo produto aparece apenas como pista de navegação.
   ========================================================= */

@media (max-width: 680px) {
  .home-product-carousel {
    --home-mobile-card: min(390px, calc(100vw - 56px));
    --home-mobile-gutter: max(22px, calc((100vw - var(--home-mobile-card)) / 2));
    width: auto;
    margin-inline: -18px;
  }

  .home-product-carousel .product-grid {
    width: 100%;
    margin: 0 !important;
    padding: 0 var(--home-mobile-gutter) 10px !important;
    gap: 16px !important;
    scroll-padding-inline: var(--home-mobile-gutter);
    scroll-snap-type: x mandatory !important;
  }

  .home-product-carousel .product-grid > .product-card,
  .home-product-carousel .product-grid > .product-skeleton,
  .home-product-carousel .product-grid > * {
    width: var(--home-mobile-card) !important;
    min-width: var(--home-mobile-card) !important;
    max-width: var(--home-mobile-card) !important;
    flex: 0 0 var(--home-mobile-card) !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always;
  }

  .home-product-carousel .product-image,
  .home-product-carousel .product-skeleton {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
  }

  .home-product-carousel .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .home-product-carousel .product-info {
    width: 100% !important;
    min-width: 0;
    padding: 16px 4px 0 !important;
  }

  .home-product-carousel .product-info h3 {
    width: 100%;
    min-height: 0 !important;
    margin: 9px 0 16px !important;
    overflow-wrap: anywhere;
  }

  .home-product-carousel .home-carousel-arrow {
    top: clamp(185px, 53vw, 235px) !important;
  }

  .home-product-carousel .home-carousel-arrow-prev {
    left: 10px !important;
  }

  .home-product-carousel .home-carousel-arrow-next {
    right: 10px !important;
  }

  .home-product-carousel .home-carousel-progress {
    margin-top: 22px;
  }
}

/* =========================================================
   CHECKPOINT FINAL — PROTEÇÃO CONTRA OVERFLOW HORIZONTAL
   Mantém drawers e carrosséis contidos no viewport sem
   bloquear o scroll horizontal interno dos componentes.
   ========================================================= */

html {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
}

.nav-drawer {
  max-width: 100vw;
}