/* ==========================================
   DUVANT 12
   CATÁLOGO + PRODUCTO
========================================== */


/* ==========================================
   CATALOG HERO
========================================== */

.catalog-hero {
  padding: 105px 0 75px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(
      circle at 78% 30%,
      rgba(180, 186, 194, 0.055),
      transparent 27%
    ),
    #08090a;
}

.catalog-hero-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.42fr);
  align-items: end;
  gap: 70px;
}

.catalog-hero h1 {
  color: #e2e3e4;
  font-size:
    clamp(3.2rem, 6.5vw, 7rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.94;
}

.catalog-hero h1 em {
  display: block;
  color: #70757b;
  font-style: normal;
  font-weight: 400;
}

.catalog-hero p {
  max-width: 420px;
  padding-bottom: 8px;
  color: #666b71;
  font-size: 0.75rem;
  line-height: 1.8;
}


/* ==========================================
   CATALOG
========================================== */

.catalog-section {
  min-height: 600px;
  padding: 55px 0 120px;
  background: #090a0b;
}

.catalog-toolbar {
  display: grid;
  grid-template-columns:
    minmax(280px, 0.8fr)
    minmax(500px, 1.2fr);
  gap: 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--line);
}

.catalog-search {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 11px;
}

.catalog-search svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #62676d;
  stroke-width: 1.5;
}

.catalog-search input {
  width: 100%;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #d5d7d9;
  font-size: 0.7rem;
}

.catalog-search input::placeholder {
  color: #50555b;
}

.catalog-filter-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.category-filters {
  display: flex;
  align-items: center;
  gap: 4px;
}

.category-filters button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #60656b;
  font-size: 0.61rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    color var(--transition),
    border-color var(--transition),
    background var(--transition);
}

.category-filters button:hover {
  color: #b8bbc0;
}

.category-filters button.active {
  border-color: var(--line-light);
  background: rgba(255, 255, 255, 0.035);
  color: #c3c6ca;
}

.catalog-sort {
  min-height: 36px;
  padding: 0 31px 0 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  outline: 0;
  background: #0d0f11;
  color: #777c82;
  font-size: 0.6rem;
  cursor: pointer;
}

.catalog-sort option {
  background: #101214;
  color: #c5c8cb;
}

.catalog-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 0 30px;
  color: #4f545a;
  font-size: 0.57rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.catalog-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 45px 14px;
}

.catalog-product-card {
  min-width: 0;
}

.catalog-product-image {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(255, 255, 255, 0.065),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #111315,
      #0b0c0e
    );
  transition:
    border-color 250ms ease,
    background 250ms ease;
}

.catalog-product-image:hover {
  border-color:
    rgba(255, 255, 255, 0.18);
}

.catalog-product-image .mini-bottle {
  width: 125px;
  transition:
    transform 450ms ease;
}

.catalog-product-image:hover .mini-bottle {
  transform: translateY(-8px);
}

.catalog-product-image .mini-cap {
  width: 53px;
  height: 41px;
}

.catalog-product-image .mini-body {
  height: 174px;
}

.catalog-product-image .mini-body span {
  width: 75px;
}

.catalog-view-label {
  position: absolute;
  right: 16px;
  bottom: 15px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: #565b61;
  font-size: 0.57rem;
  font-weight: 600;
  transition: color 220ms ease;
}

.catalog-product-image:hover
.catalog-view-label {
  color: #aaaeb3;
}

.catalog-view-label b {
  font-size: 0.8rem;
  font-weight: 400;
}

.catalog-product-info {
  padding-top: 15px;
}

.catalog-product-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.catalog-product-name {
  display: block;
  margin-top: 5px;
  color: #c9cccf;
  font-size: 0.79rem;
  font-weight: 600;
  transition: color 220ms ease;
}

.catalog-product-name:hover {
  color: #fff;
}

.catalog-product-price {
  flex: 0 0 auto;
  color: #b3b7bb;
  font-size: 0.75rem;
  font-weight: 600;
}

.catalog-product-actions {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 7px;
  margin-top: 14px;
}

.catalog-details-button,
.catalog-add-button {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: #72777d;
  font-size: 0.61rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 220ms ease,
    color 220ms ease,
    border-color 220ms ease;
}

.catalog-details-button:hover {
  border-color:
    rgba(255, 255, 255, 0.2);
  color: #c5c8cb;
}

.catalog-add-button {
  font-size: 1.05rem;
  font-weight: 300;
}

.catalog-add-button:hover {
  border-color: #d0d2d4;
  background: #d0d2d4;
  color: #111214;
}

.catalog-empty {
  padding: 100px 20px;
  text-align: center;
}

.catalog-empty > span,
.product-not-found > span {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #64696f;
}

.catalog-empty h2,
.product-not-found h1 {
  color: #bbbfc3;
  font-size: 1.2rem;
  font-weight: 500;
}

.catalog-empty p,
.product-not-found p {
  margin-top: 8px;
  color: #555a60;
  font-size: 0.67rem;
}


/* ==========================================
   PRODUCT PAGE
========================================== */

.product-page {
  padding: 35px 0 120px;
  background: #08090a;
}

.product-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 28px;
  color: #4f545a;
  font-size: 0.57rem;
}

.product-breadcrumb a {
  transition: color 220ms ease;
}

.product-breadcrumb a:hover {
  color: #9ea2a7;
}

.product-breadcrumb strong {
  color: #777c82;
  font-weight: 600;
}

.product-page-grid {
  display: grid;
  grid-template-columns:
    minmax(420px, 1.1fr)
    minmax(380px, 0.8fr);
  gap: clamp(55px, 8vw, 130px);
  align-items: start;
}

.product-main-image {
  position: sticky;
  top: 120px;
  min-height: 710px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(255, 255, 255, 0.075),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #121416,
      #090a0b
    );
}

.product-main-image::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid
    rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.product-image-number {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
  color: #50555b;
  font-size: 0.53rem;
  font-weight: 600;
}

.product-large-glow {
  position: absolute;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  background:
    rgba(210, 216, 222, 0.07);
  filter: blur(55px);
}

.product-large-bottle {
  position: relative;
  z-index: 2;
  width: 245px;
  filter:
    drop-shadow(
      0 45px 38px
      rgba(0, 0, 0, 0.6)
    );
}

.large-bottle-cap {
  width: 93px;
  height: 74px;
  margin: 0 auto;
  border: 1px solid
    rgba(255, 255, 255, 0.2);
  border-radius: 5px 5px 2px 2px;
  background:
    linear-gradient(
      90deg,
      #25282b,
      #777c81 48%,
      #24272a
    );
}

.large-bottle-neck {
  width: 61px;
  height: 30px;
  margin: 0 auto;
  border-right: 1px solid
    rgba(255, 255, 255, 0.12);
  border-left: 1px solid
    rgba(255, 255, 255, 0.12);
  background: #16181a;
}

.large-bottle-body {
  position: relative;
  height: 335px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid
    rgba(255, 255, 255, 0.22);
  border-radius:
    12px 12px 25px 25px;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.14),
      transparent 25%,
      rgba(255, 255, 255, 0.03) 65%
    ),
    linear-gradient(
      to bottom,
      #292d31,
      #111315 70%,
      #090a0b
    );
}

.large-bottle-shine {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 24px;
  width: 1px;
  background:
    linear-gradient(
      transparent,
      rgba(255, 255, 255, 0.28),
      transparent
    );
}

.large-bottle-label {
  width: 145px;
  min-height: 145px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid
    rgba(255, 255, 255, 0.16);
  background:
    rgba(7, 8, 9, 0.7);
  text-align: center;
}

.large-bottle-label span {
  max-width: 120px;
  overflow: hidden;
  color: #94999e;
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.large-bottle-label strong {
  margin: 5px 0;
  color: #dedfe1;
  font-size: 2.7rem;
  font-weight: 400;
  letter-spacing: -0.08em;
}

.large-bottle-label small {
  color: #565b61;
  font-size: 0.43rem;
  letter-spacing: 0.15em;
}

.product-page-info {
  padding: 45px 0 20px;
}

.product-detail-category {
  display: inline-flex;
  padding: 6px 8px;
  border: 1px solid var(--line);
  color: #686d73;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.product-detail-brand {
  display: block;
  margin-top: 28px;
  color: #6e7379;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.product-page-info h1 {
  margin-top: 6px;
  color: #e0e1e2;
  font-size:
    clamp(2.8rem, 5vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.98;
}

.product-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 17px;
  color: #5d6268;
  font-size: 0.62rem;
}

.availability {
  color: #8e9890;
}

.product-detail-price {
  display: block;
  margin-top: 30px;
  color: #c9cccf;
  font-size: 1.15rem;
  font-weight: 500;
}

.product-description {
  max-width: 570px;
  margin-top: 26px;
  color: #686d73;
  font-size: 0.74rem;
  line-height: 1.85;
}

.product-notes {
  margin-top: 35px;
  padding: 21px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.product-notes > span {
  display: block;
  margin-bottom: 12px;
  color: #54595f;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.notes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.notes-list span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #858a90;
  font-size: 0.57rem;
}

.purchase-box {
  margin-top: 28px;
}

.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 12px;
}

.quantity-selector > span {
  color: #676c72;
  font-size: 0.61rem;
  font-weight: 600;
}

.quantity-selector > div {
  display: grid;
  grid-template-columns:
    35px 38px 35px;
  align-items: center;
  min-height: 36px;
  border: 1px solid var(--line);
}

.quantity-selector button {
  height: 34px;
  border: 0;
  background: transparent;
  color: #73787e;
  cursor: pointer;
}

.quantity-selector strong {
  color: #9fa3a8;
  font-size: 0.66rem;
  text-align: center;
}

.product-add-to-cart {
  width: 100%;
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 0 18px;
  border: 1px solid #d1d3d5;
  border-radius: 6px;
  background: #d1d3d5;
  color: #101113;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 220ms ease,
    transform 220ms ease;
}

.product-add-to-cart:hover {
  transform: translateY(-2px);
  background: #f0f1f2;
}

.product-add-to-cart strong {
  font-size: 0.7rem;
}

.product-service-list {
  margin-top: 36px;
}

.product-service-list > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 15px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
}

.product-service-list > div > span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #666b71;
  font-size: 0.55rem;
}

.product-service-list strong {
  display: block;
  color: #92969b;
  font-size: 0.64rem;
  font-weight: 600;
}

.product-service-list p {
  margin-top: 4px;
  color: #50555b;
  font-size: 0.57rem;
  line-height: 1.6;
}

.related-section {
  padding: 100px 0 120px;
  border-top: 1px solid var(--line);
  background: #090a0b;
}

.product-not-found {
  padding: 130px 20px;
  text-align: center;
}

.product-not-found .button {
  width: fit-content;
  margin: 28px auto 0;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1050px) {
  .catalog-toolbar {
    grid-template-columns: 1fr;
  }

  .catalog-filter-row {
    justify-content: space-between;
  }

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

  .product-page-grid {
    grid-template-columns:
      minmax(350px, 1fr)
      minmax(330px, 0.9fr);
    gap: 50px;
  }

  .product-main-image {
    min-height: 600px;
  }
}


@media (max-width: 850px) {
  .catalog-hero {
    padding-top: 80px;
  }

  .catalog-hero-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .catalog-hero p {
    padding: 0;
  }

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

  .product-main-image {
    position: relative;
    top: auto;
    min-height: 620px;
  }

  .product-page-info {
    padding-top: 10px;
  }
}


@media (max-width: 600px) {
  .catalog-hero {
    padding: 65px 0 50px;
  }

  .catalog-hero h1 {
    font-size:
      clamp(3rem, 14vw, 4.8rem);
  }

  .catalog-section {
    padding-top: 35px;
  }

  .catalog-filter-row {
    align-items: stretch;
    flex-direction: column;
  }

  .category-filters {
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .category-filters button {
    flex: 0 0 auto;
  }

  .catalog-sort {
    width: 100%;
  }

  .catalog-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 32px 8px;
  }

  .catalog-product-image {
    min-height: 270px;
  }

  .catalog-product-image .mini-bottle {
    width: 80px;
  }

  .catalog-product-image .mini-cap {
    width: 37px;
    height: 29px;
  }

  .catalog-product-image .mini-body {
    height: 115px;
  }

  .catalog-product-image .mini-body span {
    width: 53px;
  }

  .catalog-view-label {
    display: none;
  }

  .catalog-product-top {
    flex-direction: column;
    gap: 8px;
  }

  .catalog-details-button {
    font-size: 0.57rem;
  }

  .product-page {
    padding-top: 20px;
  }

  .product-breadcrumb {
    overflow-x: auto;
    white-space: nowrap;
  }

  .product-main-image {
    min-height: 500px;
  }

  .product-large-bottle {
    width: 175px;
  }

  .large-bottle-cap {
    width: 70px;
    height: 55px;
  }

  .large-bottle-neck {
    width: 48px;
    height: 23px;
  }

  .large-bottle-body {
    height: 250px;
  }

  .large-bottle-label {
    width: 105px;
    min-height: 110px;
  }

  .large-bottle-label strong {
    font-size: 2rem;
  }

  .product-page-info h1 {
    font-size:
      clamp(3rem, 14vw, 4.6rem);
  }

  .related-section {
    padding: 75px 0 90px;
  }
}
/* ==========================================
   DUVANT 12 — CATALOG V2
========================================== */


/* ==========================================
   HERO
========================================== */

.catalog-hero-v2 {
  padding-top: 72px;
  padding-bottom: 55px;
}

.catalog-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 40px;
  color: #555a60;
  font-size: 0.58rem;
  letter-spacing: 0.03em;
}

.catalog-breadcrumb a {
  color: #686d73;
  transition: color var(--transition);
}

.catalog-breadcrumb a:hover {
  color: #c9cbce;
}

.catalog-breadcrumb span:last-child {
  color: #8c9197;
}


/* ==========================================
   CATEGORY SHORTCUTS
========================================== */

.catalog-category-shortcuts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.catalog-category-shortcuts button {
  min-width: 95px;
  height: 39px;
  padding: 0 18px;
  border: 1px solid var(--line);
  background: transparent;
  color: #696e74;
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--transition),
    background var(--transition),
    color var(--transition);
}

.catalog-category-shortcuts button:hover {
  border-color: #51565c;
  color: #c7c9cc;
}

.catalog-category-shortcuts button.active {
  border-color: #a8acb1;
  background: #d6d8da;
  color: #08090a;
}


/* ==========================================
   SECTION
========================================== */

.catalog-section-v2 {
  padding-top: 48px;
}


/* ==========================================
   TOPBAR
========================================== */

.catalog-topbar {
  display: grid;
  grid-template-columns:
    minmax(280px, 1fr)
    auto;
  gap: 14px;
  align-items: stretch;
}

.catalog-search-v2 {
  width: 100%;
}

.catalog-sort-v2 {
  min-width: 215px;
}

.catalog-mobile-filter-button {
  display: none;
}


/* ==========================================
   META
========================================== */

.catalog-meta-v2 {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.catalog-meta-v2 > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.catalog-meta-v2 strong {
  color: #b8bbc0;
  font-size: 0.67rem;
  font-weight: 600;
}

.catalog-meta-v2 span {
  color: #50555b;
  font-size: 0.6rem;
}

.catalog-clear-top {
  border: 0;
  background: transparent;
  color: #686d73;
  font-size: 0.59rem;
  cursor: pointer;
  transition: color var(--transition);
}

.catalog-clear-top:hover {
  color: #d0d2d5;
}


/* ==========================================
   ACTIVE FILTERS
========================================== */

.catalog-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0 0;
}

.catalog-active-filters button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid #2c3034;
  background: #111315;
  color: #8a8f95;
  font-size: 0.57rem;
  cursor: pointer;
  transition:
    border-color var(--transition),
    color var(--transition);
}

.catalog-active-filters button:hover {
  border-color: #585d63;
  color: #d2d4d7;
}

.catalog-active-filters button span {
  color: #565b61;
  font-size: 0.8rem;
}


/* ==========================================
   CATALOG LAYOUT
========================================== */

.catalog-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 38px;
  align-items: start;
  padding-top: 34px;
}

.catalog-products-column {
  min-width: 0;
}


/* ==========================================
   SIDEBAR
========================================== */

.catalog-sidebar {
  position: sticky;
  top: 105px;
  border-top: 1px solid var(--line);
}

.catalog-sidebar-heading {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.catalog-sidebar-heading > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.catalog-sidebar-heading span {
  color: #babdc1;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.catalog-sidebar-heading small {
  color: #4c5157;
  font-size: 0.54rem;
}

.catalog-sidebar-heading button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #575c62;
  font-size: 0.55rem;
  cursor: pointer;
  transition: color var(--transition);
}

.catalog-sidebar-heading button:hover {
  color: #d0d2d4;
}


/* ==========================================
   FILTER GROUP
========================================== */

.catalog-filter-group {
  border-bottom: 1px solid var(--line);
}

.catalog-filter-heading {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8d9298;
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
}

.catalog-filter-heading b {
  color: #50555b;
  font-size: 0.8rem;
  font-weight: 400;
}

.catalog-filter-options {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-height: 260px;
  overflow-y: auto;
  padding: 0 0 23px;
}

.catalog-filter-options[hidden] {
  display: none;
}

.catalog-filter-options::-webkit-scrollbar {
  width: 3px;
}

.catalog-filter-options::-webkit-scrollbar-thumb {
  background: #34383d;
}


/* ==========================================
   CHECKBOX / RADIO
========================================== */

.catalog-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666b71;
  font-size: 0.59rem;
  cursor: pointer;
  user-select: none;
}

.catalog-check:hover {
  color: #aeb2b6;
}

.catalog-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.catalog-check-box,
.catalog-radio-box {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1px solid #383d42;
  background: #0d0f10;
  transition:
    border-color var(--transition),
    background var(--transition);
}

.catalog-radio-box {
  border-radius: 50%;
}

.catalog-check input:checked +
.catalog-check-box {
  border-color: #a7abb0;
  background: #bfc2c5;
}

.catalog-check input:checked +
.catalog-check-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 7px;
  border-right: 1px solid #070809;
  border-bottom: 1px solid #070809;
  transform: rotate(45deg);
}

.catalog-check input:checked +
.catalog-radio-box {
  border-color: #a7abb0;
}

.catalog-check input:checked +
.catalog-radio-box::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #bfc2c5;
}


/* ==========================================
   PRODUCTS
========================================== */

.catalog-section-v2 .catalog-grid {
  margin-top: 0;
}

.catalog-real-product-image {
  position: relative;
  z-index: 1;
  width: 88%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(
      0 24px 25px
      rgba(0, 0, 0, 0.43)
    );
  transition: transform 350ms ease;
}

.catalog-product-card:hover
.catalog-real-product-image {
  transform:
    translateY(-5px)
    scale(1.018);
}

.catalog-availability {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.53rem;
}

.catalog-availability i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.catalog-availability.available {
  color: #7e8a80;
}

.catalog-availability.available i {
  background: #7f9382;
  box-shadow:
    0 0 7px
    rgba(126, 157, 132, 0.25);
}

.catalog-availability.unavailable {
  color: #6f6464;
}

.catalog-availability.unavailable i {
  background: #765f5f;
}

.catalog-add-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}


/* ==========================================
   MOBILE FILTER BUTTON
========================================== */

.catalog-mobile-filter-button {
  position: relative;
  align-items: center;
  justify-content: space-between;
  min-width: 105px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: #0b0c0d;
  color: #8d9298;
  font-size: 0.6rem;
  font-weight: 600;
  cursor: pointer;
}

.catalog-mobile-filter-button b {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1c1f22;
  color: #64696f;
  font-size: 0.5rem;
  font-weight: 600;
}

.catalog-mobile-filter-button b.has-filters {
  background: #c6c8ca;
  color: #090a0b;
}


/* ==========================================
   MOBILE FILTER DRAWER
========================================== */

.catalog-filter-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0, 0, 0, 0.66);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition),
    visibility var(--transition);
}

.catalog-filter-overlay.open {
  opacity: 1;
  visibility: visible;
}

.catalog-filter-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9991;
  width: min(430px, 100%);
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-left: 1px solid var(--line-light);
  background: #0a0b0c;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 280ms ease,
    visibility 280ms ease;
}

.catalog-filter-drawer.open {
  transform: translateX(0);
  visibility: visible;
}

.catalog-filter-drawer-header {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
}

.catalog-filter-drawer-header > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.catalog-filter-drawer-header span {
  color: #565b61;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.catalog-filter-drawer-header h2 {
  color: #d0d2d4;
  font-size: 1rem;
  font-weight: 500;
}

.catalog-filter-drawer-content {
  overflow-y: auto;
  padding: 10px 28px 40px;
}

.catalog-mobile-filter-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}

.catalog-mobile-filter-group > span {
  margin-bottom: 3px;
  color: #a5a9ae;
  font-size: 0.62rem;
  font-weight: 600;
}

.catalog-filter-drawer-footer {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 9px;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  background: #0c0d0e;
}

.catalog-filter-clear-mobile {
  border: 1px solid var(--line);
  background: transparent;
  color: #777c82;
  font-size: 0.6rem;
  cursor: pointer;
}

.catalog-filter-drawer-footer
.checkout-button {
  margin: 0;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1000px) {

  .catalog-layout {
    grid-template-columns:
      190px minmax(0, 1fr);
    gap: 26px;
  }

}


@media (max-width: 850px) {

  .catalog-sidebar {
    display: none;
  }

  .catalog-layout {
    grid-template-columns: 1fr;
  }

  .catalog-topbar {
    grid-template-columns:
      minmax(0, 1fr)
      110px
      180px;
  }

  .catalog-mobile-filter-button {
    display: flex;
  }

}


@media (max-width: 700px) {

  .catalog-hero-v2 {
    padding-top: 52px;
    padding-bottom: 42px;
  }

  .catalog-breadcrumb {
    margin-bottom: 30px;
  }

  .catalog-category-shortcuts {
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: -20px;
    padding-right: 20px;
  }

  .catalog-category-shortcuts::-webkit-scrollbar {
    display: none;
  }

  .catalog-category-shortcuts button {
    min-width: 88px;
    flex: 0 0 auto;
  }

  .catalog-topbar {
    grid-template-columns:
      minmax(0, 1fr)
      105px;
  }

  .catalog-sort-v2 {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 47px;
  }

  .catalog-search-v2 {
    min-width: 0;
  }

  .catalog-meta-v2 {
    min-height: 54px;
  }

  .catalog-layout {
    padding-top: 25px;
  }

}


@media (max-width: 480px) {

  .catalog-topbar {
    grid-template-columns:
      minmax(0, 1fr)
      96px;
    gap: 8px;
  }

  .catalog-mobile-filter-button {
    min-width: 0;
    padding: 0 10px;
  }

  .catalog-meta-v2 > div span {
    display: none;
  }

  .catalog-active-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }

  .catalog-active-filters::-webkit-scrollbar {
    display: none;
  }

  .catalog-active-filters button {
    flex: 0 0 auto;
  }

  .catalog-filter-drawer-header {
    padding: 0 22px;
  }

  .catalog-filter-drawer-content {
    padding-left: 22px;
    padding-right: 22px;
  }

}
/* ==========================================
   DUVANT 12 — PRODUCT PAGE V2
========================================== */


/* ==========================================
   PAGE
========================================== */

.product-page-v2 {
  padding-top: 64px;
  padding-bottom: 125px;
}


/* ==========================================
   BREADCRUMB
========================================== */

.product-breadcrumb-v2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 38px;
  color: #555a60;
  font-size: 0.58rem;
}

.product-breadcrumb-v2 a {
  color: #686d73;
  transition: color var(--transition);
}

.product-breadcrumb-v2 a:hover {
  color: #c9cbce;
}

.product-breadcrumb-v2 strong {
  max-width: 320px;
  overflow: hidden;
  color: #8c9197;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ==========================================
   GRID
========================================== */

.product-page-grid-v2 {
  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(390px, 0.92fr);
  gap: clamp(55px, 7vw, 110px);
  align-items: start;
}


/* ==========================================
   GALLERY
========================================== */

.product-gallery-v2 {
  min-width: 0;
}

.product-main-image-v2 {
  position: sticky;
  top: 110px;
  min-height: 680px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 255, 255, 0.065),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #111315,
      #08090a
    );
}

.product-main-image-v2::before {
  content: "";
  position: absolute;
  inset: 14px;
  border:
    1px solid
    rgba(255, 255, 255, 0.025);
  pointer-events: none;
}

.product-image-number {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 4;
  color: #50555b;
  font-size: 0.54rem;
  letter-spacing: 0.08em;
}

.product-main-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 4;
  padding: 8px 10px;
  border:
    1px solid
    rgba(255, 255, 255, 0.12);
  background:
    rgba(9, 10, 11, 0.78);
  color: #b7babf;
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  backdrop-filter: blur(12px);
}

.product-real-image-wrapper {
  position: relative;
  z-index: 2;
  width: 84%;
  height: 540px;
  display: grid;
  place-items: center;
}

.product-main-real-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(
      0 40px 38px
      rgba(0, 0, 0, 0.5)
    );
  animation:
    productImageReveal
    500ms ease both;
}

@keyframes productImageReveal {
  from {
    opacity: 0;
    transform:
      translateY(8px)
      scale(0.985);
  }

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

.product-image-signature {
  position: absolute;
  right: 24px;
  bottom: 22px;
  z-index: 4;
  color: #383d42;
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.13em;
}


/* ==========================================
   INFO
========================================== */

.product-page-info-v2 {
  padding-top: 18px;
}

.product-detail-heading {
  display: flex;
  flex-direction: column;
}

.product-detail-category {
  margin-bottom: 16px;
}

.product-detail-brand {
  margin-bottom: 9px;
}

.product-page-info-v2 h1 {
  max-width: 600px;
  color: #e0e2e4;
  font-size:
    clamp(2.5rem, 4vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.product-detail-meta-v2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: #62676d;
  font-size: 0.62rem;
}

.product-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 31px;
}

.product-detail-price {
  margin: 0;
}

.product-detail-availability {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.58rem;
}

.product-detail-availability i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.product-detail-availability.available {
  color: #7f8d82;
}

.product-detail-availability.available i {
  background: #829486;
  box-shadow:
    0 0 8px
    rgba(130, 148, 134, 0.28);
}

.product-detail-availability.unavailable {
  color: #756565;
}

.product-detail-availability.unavailable i {
  background: #765f5f;
}

.product-detail-divider {
  height: 1px;
  margin: 31px 0;
  background: var(--line);
}


/* ==========================================
   DESCRIPTION
========================================== */

.product-description-block > span,
.product-notes-v2 > span {
  display: block;
  margin-bottom: 12px;
  color: #777c82;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-description-block
.product-description {
  margin: 0;
  max-width: 590px;
  color: #777c82;
  font-size: 0.72rem;
  line-height: 1.9;
}


/* ==========================================
   NOTES
========================================== */

.product-notes-v2 {
  margin-top: 30px;
}

.product-notes-v2 .notes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-notes-v2
.notes-list span {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid #292d31;
  background: #0e1011;
  color: #777c82;
  font-size: 0.55rem;
}


/* ==========================================
   PURCHASE
========================================== */

.purchase-box-v2 {
  margin-top: 38px;
  padding-top: 25px;
  border-top: 1px solid var(--line);
}

.purchase-box-v2
.quantity-selector {
  margin-bottom: 15px;
}

.quantity-selector button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.product-add-to-cart:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}


/* ==========================================
   SERVICE
========================================== */

.product-service-list-v2 {
  margin-top: 30px;
}

.product-service-list-v2 > div {
  border-color: var(--line);
}


/* ==========================================
   RELATED
========================================== */

.related-section-v2 {
  border-top: 1px solid var(--line);
}

.related-real-product-image {
  position: relative;
  z-index: 1;
  width: 82%;
  height: 330px;
  display: block;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(
      0 26px 26px
      rgba(0, 0, 0, 0.45)
    );
  transition: transform 350ms ease;
}

.product-card:hover
.related-real-product-image {
  transform:
    translateY(-5px)
    scale(1.018);
}


/* ==========================================
   CART IMAGE
========================================== */

.cart-real-image {
  width: 100%;
  height: 100%;
  display: block;
  padding: 7px;
  object-fit: contain;
  object-position: center;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1050px) {

  .product-page-grid-v2 {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(350px, 0.85fr);
    gap: 45px;
  }

  .product-main-image-v2 {
    min-height: 580px;
  }

  .product-real-image-wrapper {
    height: 455px;
  }

}


@media (max-width: 850px) {

  .product-page-v2 {
    padding-top: 48px;
    padding-bottom: 90px;
  }

  .product-page-grid-v2 {
    grid-template-columns: 1fr;
  }

  .product-main-image-v2 {
    position: relative;
    top: auto;
    min-height: 600px;
  }

  .product-real-image-wrapper {
    height: 470px;
  }

  .product-page-info-v2 {
    padding-top: 0;
  }

}


@media (max-width: 600px) {

  .product-page-v2 {
    padding-top: 38px;
  }

  .product-breadcrumb-v2 {
    margin-bottom: 25px;
  }

  .product-breadcrumb-v2 strong {
    max-width: 150px;
  }

  .product-main-image-v2 {
    min-height: 455px;
  }

  .product-real-image-wrapper {
    width: 90%;
    height: 350px;
  }

  .product-image-number {
    top: 18px;
    left: 18px;
  }

  .product-main-badge {
    top: 16px;
    right: 16px;
  }

  .product-image-signature {
    right: 18px;
    bottom: 16px;
  }

  .product-page-info-v2 h1 {
    font-size:
      clamp(2.5rem, 12vw, 3.6rem);
  }

  .product-price-row {
    align-items: flex-end;
  }

  .related-real-product-image {
    width: 90%;
    height: 210px;
  }

}


@media (max-width: 420px) {

  .product-main-image-v2 {
    min-height: 410px;
  }

  .product-real-image-wrapper {
    height: 305px;
  }

  .product-price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

}
/* ==========================================
   DUVANT 12 — CART + CHECKOUT
========================================== */


/* ==========================================
   SHARED
========================================== */

.checkout-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 42px;
  color: #555a60;
  font-size: 0.58rem;
}

.checkout-breadcrumb a {
  color: #686d73;
  transition: color var(--transition);
}

.checkout-breadcrumb a:hover {
  color: #d0d2d4;
}

.checkout-breadcrumb strong {
  color: #969ba1;
  font-weight: 500;
}

.checkout-loading {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 17px;
  color: #666b71;
}

.checkout-loading-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid #303438;
  border-radius: 50%;
  color: #b2b5b9;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  animation:
    checkoutPulse
    1.4s ease-in-out infinite;
}

.checkout-loading p {
  font-size: 0.62rem;
}

@keyframes checkoutPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.checkout-state {
  min-height: 460px;
  padding: 100px 20px;
  text-align: center;
}

.checkout-state > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #74797f;
}

.checkout-state h2 {
  color: #c7c9cc;
  font-size: 1.25rem;
  font-weight: 500;
}

.checkout-state p {
  max-width: 430px;
  margin: 10px auto 28px;
  color: #5d6268;
  font-size: 0.67rem;
  line-height: 1.75;
}

.checkout-state .button {
  width: fit-content;
  margin: 0 auto;
}


/* ==========================================
   CART PAGE
========================================== */

.cart-page {
  min-height: 700px;
  padding: 64px 0 130px;
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(255, 255, 255, 0.03),
      transparent 25%
    ),
    #08090a;
}

.cart-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 46px;
  border-bottom: 1px solid var(--line);
}

.cart-page-heading h1,
.checkout-page-heading h1 {
  margin-top: 9px;
  color: #e0e2e4;
  font-size:
    clamp(3.2rem, 6vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.95;
}

.cart-page-heading h1 em,
.checkout-page-heading h1 em {
  display: block;
  color: #72777d;
  font-style: normal;
  font-weight: 400;
}

.cart-page-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(310px, 0.58fr);
  gap: clamp(45px, 7vw, 100px);
  align-items: start;
  padding-top: 50px;
}


/* ==========================================
   CART ITEMS
========================================== */

.cart-page-items {
  min-width: 0;
}

.cart-page-items-header {
  min-height: 58px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.cart-page-items-header > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cart-page-items-header span {
  color: #9da1a6;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.cart-page-items-header small {
  color: #4f545a;
  font-size: 0.56rem;
}

.cart-page-items-header button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #64696f;
  font-size: 0.57rem;
  cursor: pointer;
  transition: color var(--transition);
}

.cart-page-items-header button:hover {
  color: #c2c5c8;
}

.cart-page-product {
  display: grid;
  grid-template-columns:
    150px
    minmax(0, 1fr)
    auto;
  gap: 25px;
  min-height: 190px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}

.cart-page-product.unavailable {
  opacity: 0.58;
}

.cart-page-product-image {
  min-height: 140px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 255, 255, 0.055),
      transparent 35%
    ),
    #0d0f10;
}

.cart-page-product-image > img {
  width: 88%;
  height: 135px;
  object-fit: contain;
  object-position: center;
}

.cart-page-fallback {
  transform: scale(0.55);
}

.cart-page-product-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 7px 0;
}

.cart-page-product-brand {
  color: #62676d;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cart-page-product-name {
  margin-top: 7px;
  color: #cbced1;
  font-size: 0.92rem;
  font-weight: 600;
  transition: color var(--transition);
}

.cart-page-product-name:hover {
  color: #fff;
}

.cart-page-product-meta {
  margin-top: 6px;
  color: #555a60;
  font-size: 0.58rem;
}

.cart-page-unavailable {
  margin-top: 10px;
  padding: 5px 7px;
  border: 1px solid #4b3535;
  color: #8c6868;
  font-size: 0.51rem;
  font-weight: 600;
}

.cart-page-product-actions {
  display: flex;
  align-items: center;
  gap: 19px;
  margin-top: auto;
  padding-top: 19px;
}

.cart-page-quantity {
  display: grid;
  grid-template-columns:
    34px 38px 34px;
  min-height: 35px;
  border: 1px solid var(--line);
}

.cart-page-quantity button {
  border: 0;
  background: transparent;
  color: #777c82;
  cursor: pointer;
}

.cart-page-quantity button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cart-page-quantity span {
  display: grid;
  place-items: center;
  color: #a7abb0;
  font-size: 0.62rem;
}

.cart-page-remove {
  padding: 0;
  border: 0;
  background: transparent;
  color: #5a5f65;
  font-size: 0.55rem;
  cursor: pointer;
  transition: color var(--transition);
}

.cart-page-remove:hover {
  color: #b77e7e;
}

.cart-page-product-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  padding-top: 7px;
  white-space: nowrap;
}

.cart-page-product-price strong {
  color: #c8cbce;
  font-size: 0.75rem;
}

.cart-page-product-price small {
  color: #50555b;
  font-size: 0.5rem;
}


/* ==========================================
   CART SUMMARY
========================================== */

.cart-summary {
  position: sticky;
  top: 115px;
  padding: 28px;
  border: 1px solid var(--line);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.018),
      transparent
    ),
    #0c0e0f;
}

.cart-summary-heading {
  padding-bottom: 25px;
  border-bottom: 1px solid var(--line);
}

.cart-summary-heading span {
  color: #585d63;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.cart-summary-heading h2 {
  margin-top: 5px;
  color: #cfd1d3;
  font-size: 1.1rem;
  font-weight: 500;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}

.cart-summary-row span {
  color: #676c72;
  font-size: 0.59rem;
}

.cart-summary-row strong {
  color: #aeb1b5;
  font-size: 0.6rem;
  font-weight: 600;
}

.cart-summary-row.muted strong {
  color: #555a60;
  font-weight: 500;
}

.cart-summary-divider {
  height: 17px;
}

.cart-summary-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.cart-summary-total span {
  color: #858a90;
  font-size: 0.63rem;
  font-weight: 600;
}

.cart-summary-total strong {
  color: #e1e3e5;
  font-size: 1.18rem;
  font-weight: 500;
}

.cart-summary-note {
  margin-top: 15px;
  color: #50555b;
  font-size: 0.53rem;
  line-height: 1.7;
}

.cart-page-checkout-button {
  width: 100%;
  margin-top: 25px;
}

.cart-page-checkout-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cart-summary-benefits {
  margin-top: 27px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.cart-summary-benefits > div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 11px;
  padding-top: 17px;
}

.cart-summary-benefits > div > span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #62676d;
  font-size: 0.5rem;
}

.cart-summary-benefits p {
  color: #51565c;
  font-size: 0.53rem;
  line-height: 1.6;
}

.cart-summary-benefits strong {
  display: block;
  margin-bottom: 3px;
  color: #858a90;
  font-size: 0.56rem;
  font-weight: 600;
}


/* ==========================================
   CHECKOUT HEADER
========================================== */

.checkout-header-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6d7278;
  font-size: 0.57rem;
  font-weight: 600;
}

.checkout-header-status span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7e9381;
  box-shadow:
    0 0 8px
    rgba(126, 147, 129, 0.35);
}

.checkout-back-cart {
  color: #666b71;
  font-size: 0.58rem;
  transition: color var(--transition);
}

.checkout-back-cart:hover {
  color: #c7c9cc;
}


/* ==========================================
   CHECKOUT PAGE
========================================== */

.checkout-page {
  min-height: 800px;
  padding: 64px 0 140px;
  background:
    radial-gradient(
      circle at 72% 12%,
      rgba(255, 255, 255, 0.025),
      transparent 24%
    ),
    #08090a;
}

.checkout-page-heading {
  padding-bottom: 43px;
  border-bottom: 1px solid var(--line);
}

.checkout-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(330px, 0.48fr);
  gap: clamp(50px, 7vw, 100px);
  align-items: start;
  padding-top: 48px;
}


/* ==========================================
   CHECKOUT FORM
========================================== */

.checkout-form {
  min-width: 0;
}

.checkout-form-section {
  padding: 0 0 46px;
  margin-bottom: 42px;
  border-bottom: 1px solid var(--line);
}

.checkout-form-heading {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 17px;
  margin-bottom: 29px;
}

.checkout-form-heading > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #303438;
  border-radius: 50%;
  color: #777c82;
  font-size: 0.53rem;
  font-weight: 600;
}

.checkout-form-heading h2 {
  color: #c7c9cc;
  font-size: 0.9rem;
  font-weight: 600;
}

.checkout-form-heading p {
  max-width: 500px;
  margin-top: 5px;
  color: #555a60;
  font-size: 0.58rem;
  line-height: 1.6;
}

.checkout-fields {
  display: grid;
  gap: 20px;
}

.checkout-fields.two-columns {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.checkout-fields.nested {
  margin-top: 0;
}

.checkout-field {
  min-width: 0;
}

.checkout-field label {
  display: block;
  margin-bottom: 8px;
  color: #74797f;
  font-size: 0.57rem;
  font-weight: 600;
}

.checkout-field input,
.checkout-field select,
.checkout-field textarea {
  width: 100%;
  min-height: 49px;
  padding: 0 14px;
  border: 1px solid #25292d;
  border-radius: 0;
  outline: 0;
  background: #0c0e0f;
  color: #c6c9cc;
  font-family: inherit;
  font-size: 0.64rem;
  transition:
    border-color var(--transition),
    background var(--transition);
}

.checkout-field textarea {
  min-height: 110px;
  padding-top: 13px;
  padding-bottom: 13px;
  resize: vertical;
  line-height: 1.6;
}

.checkout-field select {
  cursor: pointer;
}

.checkout-field select option {
  background: #101214;
  color: #c7c9cc;
}

.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus {
  border-color: #74797f;
  background: #0f1112;
}

.checkout-field.invalid input,
.checkout-field.invalid select,
.checkout-field.invalid textarea {
  border-color: #805858;
}

.checkout-field-error {
  min-height: 15px;
  display: block;
  margin-top: 6px;
  color: #a46f6f;
  font-size: 0.51rem;
}

.checkout-terms {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #6a6f75;
  font-size: 0.58rem;
  line-height: 1.6;
  cursor: pointer;
}

.checkout-terms input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.checkout-terms-box {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
  border: 1px solid #3b4045;
  background: #0d0f10;
}

.checkout-terms input:checked +
.checkout-terms-box {
  border-color: #a8acb1;
  background: #c6c9cc;
}

.checkout-terms input:checked +
.checkout-terms-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 7px;
  border-right: 1px solid #08090a;
  border-bottom: 1px solid #08090a;
  transform: rotate(45deg);
}

.checkout-terms-error {
  margin-left: 27px;
}

.checkout-submit-button {
  width: 100%;
  min-height: 57px;
  margin-top: 24px;
}

.checkout-submit-button:disabled {
  opacity: 0.45;
  cursor: wait;
}

.checkout-submit-disclaimer {
  margin-top: 11px;
  color: #4d5258;
  font-size: 0.51rem;
  text-align: center;
}


/* ==========================================
   CHECKOUT SUMMARY
========================================== */

.checkout-order-summary {
  position: sticky;
  top: 112px;
  padding: 28px;
  border: 1px solid var(--line);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.018),
      transparent
    ),
    #0c0e0f;
}

.checkout-summary-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 21px;
  border-bottom: 1px solid var(--line);
}

.checkout-summary-heading span {
  color: #999da2;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.checkout-summary-heading a {
  color: #60656b;
  font-size: 0.55rem;
  transition: color var(--transition);
}

.checkout-summary-heading a:hover {
  color: #c5c8cb;
}

.checkout-summary-products {
  max-height: 430px;
  overflow-y: auto;
}

.checkout-summary-products::-webkit-scrollbar {
  width: 3px;
}

.checkout-summary-products::-webkit-scrollbar-thumb {
  background: #303438;
}

.checkout-summary-product {
  display: grid;
  grid-template-columns:
    62px
    minmax(0, 1fr)
    auto;
  gap: 13px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.checkout-summary-image {
  position: relative;
  width: 62px;
  height: 69px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: #101214;
}

.checkout-summary-image img {
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
}

.checkout-summary-image > span {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c2c5c8;
  color: #0a0b0c;
  font-size: 0.48rem;
  font-weight: 700;
}

.checkout-summary-fallback {
  color: #777c82;
  font-size: 0.58rem;
  font-weight: 600;
}

.checkout-summary-product-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.checkout-summary-product-info small {
  color: #555a60;
  font-size: 0.48rem;
  font-weight: 700;
  text-transform: uppercase;
}

.checkout-summary-product-info strong {
  margin-top: 4px;
  overflow: hidden;
  color: #aeb1b5;
  font-size: 0.61rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-summary-product-info span {
  margin-top: 4px;
  color: #50555b;
  font-size: 0.5rem;
}

.checkout-summary-product-price {
  color: #aaaeb2;
  font-size: 0.58rem;
  font-weight: 600;
  white-space: nowrap;
}

.checkout-summary-totals {
  padding-top: 11px;
}

.checkout-summary-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
}

.checkout-summary-totals span {
  color: #60656b;
  font-size: 0.56rem;
}

.checkout-summary-totals strong {
  color: #999da2;
  font-size: 0.57rem;
  font-weight: 600;
}

.checkout-summary-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.checkout-summary-total span {
  color: #8c9197;
  font-size: 0.61rem;
  font-weight: 600;
}

.checkout-summary-total strong {
  color: #e0e2e4;
  font-size: 1.1rem;
  font-weight: 500;
}

.checkout-summary-caption {
  margin-top: 14px;
  color: #4d5258;
  font-size: 0.5rem;
  line-height: 1.65;
}


/* ==========================================
   CHECKOUT READY MODAL
========================================== */

.checkout-ready-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    rgba(0, 0, 0, 0.78);
  opacity: 0;
  backdrop-filter: blur(10px);
  transition: opacity 220ms ease;
}

.checkout-ready-overlay.open {
  opacity: 1;
}

.checkout-ready-card {
  width: min(520px, 100%);
  padding: 45px;
  border: 1px solid #303438;
  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(255, 255, 255, 0.04),
      transparent 35%
    ),
    #0d0f10;
  box-shadow:
    0 40px 100px
    rgba(0, 0, 0, 0.5);
}

.checkout-ready-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  border: 1px solid #3a3e43;
  border-radius: 50%;
  color: #c3c6ca;
  font-size: 0.65rem;
  font-weight: 600;
}

.checkout-ready-card h2 {
  margin-top: 9px;
  color: #d8dadd;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.checkout-ready-card p {
  margin-top: 15px;
  color: #676c72;
  font-size: 0.65rem;
  line-height: 1.8;
}

.checkout-ready-actions {
  display: flex;
  gap: 9px;
  margin-top: 30px;
}

.checkout-ready-actions .button {
  flex: 1;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1000px) {

  .cart-page-grid {
    grid-template-columns:
      minmax(0, 1fr)
      300px;
    gap: 35px;
  }

  .checkout-grid {
    grid-template-columns:
      minmax(0, 1fr)
      310px;
    gap: 35px;
  }

}


@media (max-width: 850px) {

  .cart-page-grid,
  .checkout-grid {
    grid-template-columns:
      1fr;
  }

  .cart-summary,
  .checkout-order-summary {
    position: relative;
    top: auto;
  }

  .checkout-order-summary {
    grid-row: 1;
  }

  .checkout-form {
    grid-row: 2;
  }

}


@media (max-width: 700px) {

  .cart-page,
  .checkout-page {
    padding-top: 43px;
    padding-bottom: 95px;
  }

  .cart-page-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .cart-page-product {
    grid-template-columns:
      105px
      minmax(0, 1fr);
    gap: 17px;
  }

  .cart-page-product-image {
    min-height: 120px;
  }

  .cart-page-product-image > img {
    height: 115px;
  }

  .cart-page-product-price {
    grid-column: 2;
    grid-row: 2;
    align-items: flex-start;
    padding: 0;
    margin-top: -18px;
  }

  .checkout-fields.two-columns {
    grid-template-columns: 1fr;
  }

  .checkout-header-status {
    display: none;
  }

}


@media (max-width: 520px) {

  .cart-page-heading h1,
  .checkout-page-heading h1 {
    font-size:
      clamp(3rem, 15vw, 4.4rem);
  }

  .cart-page-grid,
  .checkout-grid {
    padding-top: 35px;
  }

  .cart-page-product {
    grid-template-columns:
      84px
      minmax(0, 1fr);
  }

  .cart-page-product-image {
    min-height: 100px;
  }

  .cart-page-product-image > img {
    height: 95px;
  }

  .cart-page-product-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }

  .cart-summary,
  .checkout-order-summary {
    padding: 22px;
  }

  .checkout-form-heading {
    grid-template-columns:
      30px
      1fr;
  }

  .checkout-form-heading > span {
    width: 28px;
    height: 28px;
  }

  .checkout-ready-card {
    padding: 31px 25px;
  }

  .checkout-ready-actions {
    flex-direction: column;
  }

  .checkout-back-cart {
    font-size: 0;
  }

  .checkout-back-cart::after {
    content: "← Carrito";
    font-size: 0.58rem;
  }

}
/* =========================================================
   DUVANT 12 — CHECKOUT PREMIUM OVERRIDE
   Mantiene la identidad negro / plata
========================================================= */

:root {
  --checkout-bg: #090909;
  --checkout-panel: #111111;
  --checkout-panel-soft: #161616;
  --checkout-border: rgba(255, 255, 255, 0.1);
  --checkout-border-strong: rgba(255, 255, 255, 0.18);
  --checkout-text: #f3f3f3;
  --checkout-muted: #989898;
  --checkout-silver: #c9c9c9;
  --checkout-silver-bright: #eeeeee;
  --checkout-danger: #ff7b7b;
}


/* =========================================================
   BODY / PAGE
========================================================= */

body {
  background:
    radial-gradient(
      circle at top center,
      rgba(255, 255, 255, 0.035),
      transparent 34rem
    ),
    #080808;
}


.checkout-page {
  min-height: calc(100vh - 84px);
  padding:
    clamp(48px, 6vw, 88px)
    24px
    90px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.012),
      rgba(255, 255, 255, 0)
    );
}


.checkout-page-inner {
  width: min(100%, 1380px);
  margin-inline: auto;
}


/* =========================================================
   HEADER
========================================================= */

.checkout-header {
  position: relative;
  z-index: 10;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.08);

  background:
    rgba(8, 8, 8, 0.95);

  backdrop-filter:
    blur(18px);
}


.checkout-header-inner {
  width: min(100%, 1380px);

  min-height: 82px;

  margin-inline: auto;

  padding-inline:
    24px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}


.checkout-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;

  color: #ffffff;
  text-decoration: none;

  letter-spacing: 0.08em;
}


.checkout-brand span {
  font-size: 18px;
  font-weight: 600;
}


.checkout-brand strong {
  color: #bfbfbf;

  font-size: 18px;
  font-weight: 500;
}


.checkout-back-link {
  color: #b5b5b5;

  font-size: 13px;
  font-weight: 500;

  text-decoration: none;

  transition:
    color 180ms ease,
    transform 180ms ease;
}


.checkout-back-link:hover {
  color: #ffffff;
  transform:
    translateX(-3px);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.checkout-layout {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(340px, 0.75fr);

  gap:
    clamp(28px, 3vw, 48px);

  align-items: start;
}


/* =========================================================
   LEFT PANEL
========================================================= */

.checkout-form-panel {
  min-width: 0;

  padding:
    clamp(30px, 4vw, 54px);

  border:
    1px solid var(--checkout-border);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.012)
    );

  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   BREADCRUMB
========================================================= */

.checkout-breadcrumb {
  margin-bottom: 32px;

  display: flex;
  align-items: center;

  gap: 10px;

  font-size: 12px;
  color: #767676;
}


.checkout-breadcrumb a {
  color: #8e8e8e;

  text-decoration: none;
}


.checkout-breadcrumb a:hover {
  color: #ffffff;
}


.checkout-breadcrumb strong {
  color: #d2d2d2;

  font-weight: 500;
}


/* =========================================================
   HEADING
========================================================= */

.checkout-heading {
  max-width: 720px;

  margin-bottom:
    42px;
}


.checkout-eyebrow {
  display: inline-block;

  margin-bottom:
    14px;

  color:
    #9c9c9c;

  font-size:
    11px;

  font-weight:
    600;

  letter-spacing:
    0.2em;

  text-transform:
    uppercase;
}


.checkout-heading h1 {
  margin: 0;

  color:
    #ffffff;

  font-size:
    clamp(34px, 4vw, 56px);

  line-height:
    1.02;

  letter-spacing:
    -0.04em;

  font-weight:
    600;
}


.checkout-heading p {
  max-width:
    620px;

  margin:
    16px 0 0;

  color:
    #929292;

  font-size:
    14px;

  line-height:
    1.7;
}


/* =========================================================
   FORM SECTIONS
========================================================= */

.checkout-form {
  display: flex;
  flex-direction: column;

  gap: 30px;
}


.checkout-form-section {
  padding:
    28px;

  border:
    1px solid var(--checkout-border);

  border-radius:
    16px;

  background:
    rgba(255, 255, 255, 0.018);
}


.checkout-section-heading {
  margin-bottom:
    26px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    16px;
}


.checkout-section-heading > span {
  width:
    34px;

  min-width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--checkout-border-strong);

  border-radius:
    50%;

  color:
    #cfcfcf;

  font-size:
    11px;

  font-weight:
    600;

  background:
    rgba(255, 255, 255, 0.03);
}


.checkout-section-heading h2 {
  margin:
    0 0 7px;

  color:
    #f2f2f2;

  font-size:
    18px;

  font-weight:
    600;

  letter-spacing:
    -0.02em;
}


.checkout-section-heading p {
  margin:
    0;

  color:
    #858585;

  font-size:
    12px;

  line-height:
    1.55;
}


/* =========================================================
   FIELDS
========================================================= */

.checkout-fields-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    20px;
}


.checkout-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  min-width:
    0;
}


.checkout-field-full {
  grid-column:
    1 / -1;
}


.checkout-field label {
  color:
    #c3c3c3;

  font-size:
    12px;

  font-weight:
    500;
}


.checkout-field label span {
  color:
    #6d6d6d;

  font-weight:
    400;
}


.checkout-field input,
.checkout-field select,
.checkout-field textarea {
  width:
    100%;

  min-height:
    50px;

  padding:
    0 15px;

  border:
    1px solid rgba(255, 255, 255, 0.11);

  border-radius:
    10px;

  outline:
    none;

  background:
    #0c0c0c;

  color:
    #eeeeee;

  font:
    inherit;

  font-size:
    13px;

  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}


.checkout-field textarea {
  min-height:
    120px;

  padding:
    14px 15px;

  resize:
    vertical;
}


.checkout-field select {
  appearance:
    none;

  cursor:
    pointer;
}


.checkout-field input::placeholder,
.checkout-field textarea::placeholder {
  color:
    #555555;
}


.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus {
  border-color:
    rgba(255, 255, 255, 0.35);

  background:
    #101010;

  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.035);
}


.checkout-field.invalid input,
.checkout-field.invalid select,
.checkout-field.invalid textarea {
  border-color:
    rgba(255, 123, 123, 0.72);
}


.checkout-field small {
  min-height:
    16px;

  color:
    var(--checkout-danger);

  font-size:
    11px;
}


/* =========================================================
   TERMS
========================================================= */

.checkout-terms {
  padding:
    18px 20px;

  border:
    1px solid var(--checkout-border);

  border-radius:
    13px;

  background:
    rgba(255, 255, 255, 0.016);
}


.checkout-terms label {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  cursor:
    pointer;

  color:
    #a9a9a9;

  font-size:
    12px;

  line-height:
    1.5;
}


.checkout-terms input {
  width:
    17px;

  height:
    17px;

  min-height:
    auto;

  margin-top:
    1px;

  accent-color:
    #d0d0d0;
}


/* =========================================================
   SUBMIT
========================================================= */

.checkout-submit-button {
  min-height:
    58px;

  padding:
    0 22px;

  border:
    1px solid #e7e7e7;

  border-radius:
    12px;

  background:
    linear-gradient(
      180deg,
      #f4f4f4,
      #cfcfcf
    );

  color:
    #090909;

  font-size:
    13px;

  font-weight:
    700;

  letter-spacing:
    0.02em;

  cursor:
    pointer;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}


.checkout-submit-button:hover:not(:disabled) {
  transform:
    translateY(-2px);

  box-shadow:
    0 14px 30px rgba(255, 255, 255, 0.08);

  filter:
    brightness(1.04);
}


.checkout-submit-button:disabled {
  cursor:
    not-allowed;

  opacity:
    0.55;
}


/* =========================================================
   SECURITY NOTE
========================================================= */

.checkout-security-note {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  color:
    #767676;

  font-size:
    11px;

  line-height:
    1.55;
}


.checkout-security-note > span {
  color:
    #bfbfbf;
}


.checkout-security-note p {
  margin:
    0;
}


/* =========================================================
   RIGHT SUMMARY
========================================================= */

.checkout-summary {
  position:
    sticky;

  top:
    28px;
}


.checkout-summary-card {
  padding:
    30px;

  border:
    1px solid var(--checkout-border);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.014)
    );

  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34);

  overflow:
    hidden;
}


.checkout-summary-heading {
  margin-bottom:
    26px;

  padding-bottom:
    22px;

  border-bottom:
    1px solid var(--checkout-border);

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;
}


.checkout-summary-heading span {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #747474;

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.checkout-summary-heading h2 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    21px;

  font-weight:
    600;
}


.checkout-summary-heading > strong {
  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--checkout-border-strong);

  border-radius:
    50%;

  color:
    #dddddd;

  font-size:
    12px;

  background:
    rgba(255, 255, 255, 0.03);
}


/* =========================================================
   SUMMARY PRODUCT
========================================================= */

.checkout-summary-products {
  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;
}


.checkout-summary-product {
  display:
    grid;

  grid-template-columns:
    72px 1fr auto;

  gap:
    15px;

  align-items:
    center;
}


.checkout-summary-image {
  position:
    relative;

  width:
    72px;

  aspect-ratio:
    1 / 1;

  border:
    1px solid var(--checkout-border);

  border-radius:
    12px;

  background:
    #0b0b0b;

  overflow:
    hidden;
}


.checkout-summary-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  padding:
    8px;
}


.checkout-summary-image > span {
  position:
    absolute;

  top:
    5px;

  right:
    5px;

  min-width:
    22px;

  height:
    22px;

  padding:
    0 6px;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    #d4d4d4;

  color:
    #090909;

  font-size:
    10px;

  font-weight:
    700;
}


.checkout-summary-fallback {
  width:
    100%;

  height:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #c9c9c9;

  font-size:
    14px;

  font-weight:
    700;

  letter-spacing:
    0.08em;
}


.checkout-summary-product-info {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.checkout-summary-product-info small {
  color:
    #6f6f6f;

  font-size:
    10px;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.checkout-summary-product-info strong {
  color:
    #e7e7e7;

  font-size:
    13px;

  font-weight:
    600;
}


.checkout-summary-product-info span {
  color:
    #828282;

  font-size:
    11px;
}


.checkout-summary-product-price {
  color:
    #eeeeee;

  font-size:
    12px;

  font-weight:
    600;

  white-space:
    nowrap;
}


/* =========================================================
   TOTALS
========================================================= */

.checkout-summary-totals {
  margin-top:
    26px;

  padding-top:
    22px;

  border-top:
    1px solid var(--checkout-border);

  display:
    flex;

  flex-direction:
    column;

  gap:
    15px;
}


.checkout-summary-totals > div {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    #8d8d8d;

  font-size:
    12px;
}


.checkout-summary-totals strong {
  color:
    #d8d8d8;

  font-size:
    12px;

  font-weight:
    500;
}


.checkout-summary-total {
  margin-top:
    4px;

  padding-top:
    20px;

  border-top:
    1px solid var(--checkout-border-strong);
}


.checkout-summary-total span {
  color:
    #ffffff;

  font-size:
    14px;

  font-weight:
    600;
}


.checkout-summary-total strong {
  color:
    #ffffff;

  font-size:
    22px;

  font-weight:
    600;

  letter-spacing:
    -0.03em;
}


/* =========================================================
   SUMMARY MESSAGE
========================================================= */

.checkout-summary-message {
  margin-top:
    24px;

  padding:
    18px;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius:
    12px;

  background:
    rgba(255, 255, 255, 0.025);
}


.checkout-summary-message span {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #c5c5c5;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.16em;
}


.checkout-summary-message p {
  margin:
    0;

  color:
    #787878;

  font-size:
    11px;

  line-height:
    1.6;
}


/* =========================================================
   PAGE STATES
========================================================= */

.store-page-state {
  width:
    min(100%, 720px);

  margin:
    60px auto;

  padding:
    48px 30px;

  border:
    1px solid var(--checkout-border);

  border-radius:
    18px;

  text-align:
    center;

  background:
    rgba(255, 255, 255, 0.02);
}


.store-state-mark {
  width:
    54px;

  height:
    54px;

  margin:
    0 auto 20px;

  border:
    1px solid var(--checkout-border-strong);

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #d4d4d4;

  font-size:
    13px;

  font-weight:
    700;
}


/* =========================================================
   SUCCESS MODAL
========================================================= */

.checkout-ready-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  padding:
    24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    rgba(0, 0, 0, 0.82);

  backdrop-filter:
    blur(10px);

  opacity:
    0;

  transition:
    opacity 220ms ease;
}


.checkout-ready-overlay.open {
  opacity:
    1;
}


.checkout-ready-card {
  width:
    min(100%, 470px);

  padding:
    38px;

  border:
    1px solid var(--checkout-border-strong);

  border-radius:
    20px;

  background:
    #101010;

  text-align:
    center;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55);
}


.checkout-ready-mark {
  width:
    54px;

  height:
    54px;

  margin:
    0 auto 18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--checkout-border-strong);

  border-radius:
    50%;

  color:
    #d4d4d4;

  font-weight:
    700;
}


.checkout-ready-eyebrow {
  display:
    block;

  margin-bottom:
    10px;

  color:
    #777777;

  font-size:
    10px;

  letter-spacing:
    0.18em;
}


.checkout-ready-card h2 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    28px;
}


.checkout-ready-card p {
  margin:
    14px 0 24px;

  color:
    #929292;

  font-size:
    13px;

  line-height:
    1.6;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
  .checkout-layout {
    grid-template-columns:
      1fr;

    gap:
      28px;
  }

  .checkout-summary {
    position:
      static;
  }

  .checkout-summary-card {
    max-width:
      none;
  }
}


@media (max-width: 720px) {
  .checkout-page {
    padding:
      32px 16px 60px;
  }

  .checkout-header-inner {
    min-height:
      72px;

    padding-inline:
      16px;
  }

  .checkout-form-panel {
    padding:
      24px 18px;

    border-radius:
      16px;
  }

  .checkout-heading {
    margin-bottom:
      30px;
  }

  .checkout-heading h1 {
    font-size:
      36px;
  }

  .checkout-form-section {
    padding:
      22px 16px;
  }

  .checkout-fields-grid {
    grid-template-columns:
      1fr;
  }

  .checkout-field-full {
    grid-column:
      auto;
  }

  .checkout-summary-card {
    padding:
      22px 18px;

    border-radius:
      16px;
  }

  .checkout-summary-product {
    grid-template-columns:
      62px 1fr;

    gap:
      13px;
  }

  .checkout-summary-image {
    width:
      62px;
  }

  .checkout-summary-product-price {
    grid-column:
      2;

    justify-self:
      start;
  }
}


@media (max-width: 480px) {
  .checkout-header-inner {
    gap:
      12px;
  }

  .checkout-back-link {
    font-size:
      11px;
  }

  .checkout-brand span,
  .checkout-brand strong {
    font-size:
      15px;
  }

  .checkout-page {
    padding-inline:
      12px;
  }

  .checkout-form-panel,
  .checkout-summary-card {
    border-radius:
      14px;
  }
}
/* =========================================================
   FIX — MODAL CHECKOUT OCULTO
========================================================= */

.checkout-ready-overlay[hidden] {
  display: none !important;
}

.checkout-ready-overlay:not([hidden]) {
  display: flex;
}

/* =========================================================
   FIX — CHECKBOX CONFIRMACIÓN CHECKOUT
========================================================= */

.checkout-terms {
  position: relative;
}

.checkout-terms label {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  gap: 12px;

  width: 100%;

  cursor: pointer;

  user-select: none;
}

.checkout-terms label input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;

  position: static !important;

  display: block !important;

  width: 18px !important;
  min-width: 18px !important;

  height: 18px !important;
  min-height: 18px !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 1 !important;

  pointer-events: auto !important;

  cursor: pointer !important;

  accent-color: #d0d0d0;

  box-shadow: none !important;

  flex: 0 0 18px;
}

.checkout-terms label span {
  color: #b5b5b5;

  font-size: 12px;
  line-height: 1.5;

  cursor: pointer;

  pointer-events: auto;
}

.checkout-terms label:hover span {
  color: #e4e4e4;
}

.checkout-terms.invalid {
  border-color: rgba(255, 123, 123, 0.55);
}
/* =========================================================
   DUVANT 12 — BOTÓN MODAL PEDIDO REALIZADO
   ========================================================= */

.checkout-ready-card .btn-primary,
.checkout-ready-card button {
  min-height: 50px;
  padding: 0 28px;

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

  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 45%,
      rgba(255, 255, 255, 0.08) 100%
    ),
    #111;

  color: #f4f4f4;

  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.32);

  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.checkout-ready-card .btn-primary:hover,
.checkout-ready-card button:hover {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.07) 50%,
      rgba(255, 255, 255, 0.12) 100%
    ),
    #171717;

  border-color: rgba(255, 255, 255, 0.48);
  color: #fff;

  transform: translateY(-2px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 30px rgba(0, 0, 0, 0.42);
}

.checkout-ready-card .btn-primary:active,
.checkout-ready-card button:active {
  transform: translateY(0);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 5px 16px rgba(0, 0, 0, 0.3);
}

.checkout-ready-card .btn-primary:focus-visible,
.checkout-ready-card button:focus-visible {
  outline: 2px solid rgba(220, 220, 220, 0.85);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .checkout-ready-card .btn-primary,
  .checkout-ready-card button {
    width: 100%;
    min-height: 52px;
  }
}