/* ==================================================
   GOOGLE FONT
================================================== */

@import url(
  "https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap"
);


/* ==================================================
   ROOT
================================================== */

:root {
  --brand-color:
    #512810;

  --button-color:
    #a86a2d;

  --button-hover:
    #8b5522;

  --background-start:
    #fef5d7;

  --background-end:
    #f0dabc;

  --surface:
    #ffffff;

  --danger:
    #ff1717;

  --success:
    #28c65d;

  --warning:
    #ffca05;

  --disabled:
    #b4b4b9;
}


/* ==================================================
   RESET
================================================== */

* {
  box-sizing:
    border-box;

  margin:
    0;

  padding:
    0;
}


html {
  scroll-behavior:
    smooth;
}


body {
  min-height:
    100vh;

  overflow-x:
    hidden;

  color:
    var(--brand-color);

  background:
    linear-gradient(
      90deg,
      var(--background-start)
      0%,
      var(--background-end)
      100%
    );

  font-family:
    "Poppins",
    sans-serif;
}


img {
  display:
    block;

  max-width:
    100%;
}


a {
  color:
    inherit;

  text-decoration:
    none;
}


button,
input {
  font:
    inherit;
}


button {
  padding:
    0;

  border:
    0;

  background:
    transparent;

  cursor:
    pointer;
}


.container {
  width:
    100%;
}


/* ==================================================
   UTILITAS
================================================== */

.is-hidden {
  display:
    none !important;
}


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

.site-header {
  position:
    sticky;

  top:
    0;

  z-index:
    1000;

  width:
    100%;

  background:
    #ffffff;
}


.site-header
.container.header-inner {
  width:
    100%;

  height:
    127px;

  padding:
    0
    60px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;
}


/* Logo */

.brand-logo {
  display:
    flex;

  align-items:
    center;

  flex-shrink:
    0;
}


.brand-logo img {
  width:
    120px;

  height:
    auto;
}


/* Navigasi */

.site-nav {
  flex:
    1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.nav-list {
  list-style:
    none;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    34px;
}


.nav-list
li:nth-child(1) {
  transform:
    translateX(-125px);
}


.nav-list
li:nth-child(2) {
  transform:
    translateX(-75px);
}


.nav-list
li:nth-child(3) {
  transform:
    translateX(-25px);
}


.nav-list
li:nth-child(4) {
  transform:
    translateX(25px);
}


.nav-list
li:nth-child(5) {
  transform:
    translateX(75px);
}


.nav-list
li:nth-child(6) {
  transform:
    translateX(125px);
}


.nav-list a {
  position:
    relative;

  color:
    var(--brand-color);

  font-size:
    18px;

  font-weight:
    400;

  line-height:
    1.25;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  transition:
    color
    0.25s
    ease;
}


.nav-list a::after {
  content:
    "";

  position:
    absolute;

  right:
    0;

  bottom:
    -9px;

  left:
    0;

  width:
    0;

  height:
    1px;

  margin:
    auto;

  background:
    var(--brand-color);

  transition:
    width
    0.25s
    ease;
}


.nav-list a:hover,
.nav-list a:focus-visible {
  color:
    var(--button-color);
}


.nav-list a:hover::after,
.nav-list a:focus-visible::after {
  width:
    100%;
}


.nav-list
li:nth-child(3)
a {
  width:
    240px;

  display:
    block;

  text-align:
    center;

  white-space:
    normal;
}


.nav-list a.active {
  color:
    var(--brand-color);

  font-weight:
    800;
}


.nav-list a.active::after {
  width:
    100%;
}


/* Icon header */

.header-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    22px;

  flex-shrink:
    0;
}


.header-icons {
  display:
    flex;

  align-items:
    center;

  gap:
    30px;
}


.header-icons a,
.search-btn,
.home-account-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    transparent;

  transition:
    transform
    0.2s
    ease;
}


.header-icons a:hover,
.search-btn:hover,
.home-account-btn:hover {
  transform:
    translateY(-2px);
}


.header-icons img,
.home-account-btn img {
  width:
    38px;

  height:
    38px;

  object-fit:
    contain;
}


/* Badge */

.wishlist-link,
.cart-link {
  position:
    relative;
}


.wishlist-count-badge,
.cart-count-badge {
  position:
    absolute;

  top:
    -8px;

  right:
    -9px;

  min-width:
    20px;

  height:
    20px;

  padding:
    0
    5px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    2px
    solid
    #ffffff;

  border-radius:
    100px;

  background:
    #e84c3d;

  color:
    #ffffff;

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1;

  pointer-events:
    none;
}


/* Hamburger */

.menu-toggle {
  width:
    32px;

  height:
    23px;

  display:
    none;

  flex-direction:
    column;

  justify-content:
    space-between;
}


.menu-toggle span {
  display:
    block;

  width:
    100%;

  height:
    3px;

  border-radius:
    100px;

  background:
    var(--brand-color);
}


/* ==================================================
   SEARCH BOX
================================================== */

.search-box {
  position:
    fixed;

  top:
    105px;

  right:
    70px;

  z-index:
    1200;

  width:
    360px;

  height:
    54px;

  padding:
    0
    18px;

  display:
    none;

  align-items:
    center;

  gap:
    12px;

  border:
    2px
    solid
    var(--brand-color);

  border-radius:
    100px;

  background:
    #ffffff;

  box-shadow:
    0
    12px
    30px
    rgba(
      81,
      40,
      16,
      0.12
    );
}


.search-box.active {
  display:
    flex;
}


.search-box input {
  min-width:
    0;

  flex:
    1;

  border:
    0;

  outline:
    0;

  color:
    var(--brand-color);

  background:
    transparent;

  font-size:
    15px;
}


.search-box button {
  color:
    var(--brand-color);

  font-size:
    28px;

  line-height:
    1;
}


/* ==================================================
   DROPDOWN AKUN
================================================== */

.home-account-dropdown {
  position:
    fixed;

  top:
    145px;

  right:
    48px;

  z-index:
    1300;

  width:
    375px;

  padding:
    34px
    25px
    32px;

  display:
    none;

  border-radius:
    24px;

  background:
    #ffffff;

  box-shadow:
    7px
    8px
    0
    rgba(
      255,
      238,
      191,
      0.65
    ),
    0
    12px
    30px
    rgba(
      81,
      40,
      16,
      0.08
    );
}


.home-account-dropdown.active {
  display:
    block;
}


.home-account-user {
  margin-bottom:
    19px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.home-account-user img {
  width:
    52px;

  height:
    52px;

  flex-shrink:
    0;

  object-fit:
    contain;
}


.home-account-user-data {
  min-width:
    0;
}


.home-account-user strong {
  color:
    var(--brand-color);

  font-size:
    23px;

  font-weight:
    800;

  line-height:
    1.2;
}


.home-account-user-data p {
  margin-top:
    2px;

  color:
    var(--brand-color);

  font-size:
    16px;

  line-height:
    1.35;

  overflow-wrap:
    anywhere;
}


.home-account-user:hover
strong {
  color:
    var(--button-color);
}


.home-account-menu {
  width:
    100%;

  min-height:
    56px;

  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  color:
    var(--brand-color);

  font-size:
    23px;

  font-weight:
    500;

  text-align:
    left;

  transition:
    color
    0.25s
    ease;
}


.home-account-menu:hover {
  color:
    var(--button-color);
}


.home-account-menu img {
  width:
    31px;

  height:
    31px;

  flex-shrink:
    0;

  object-fit:
    contain;
}


/* ==================================================
   HALAMAN FASHION
================================================== */

.page-content {
  min-height:
    calc(
      100vh - 127px
    );

  background:
    linear-gradient(
      90deg,
      var(--background-start)
      0%,
      var(--background-end)
      100%
    );
}


.fashion-section {
  width:
    100%;

  padding:
    38px
    32px
    76px;
}


.fashion-title {
  margin:
    0
    0
    44px;

  color:
    var(--brand-color);

  font-size:
    32px;

  font-weight:
    800;

  line-height:
    1.2;

  text-align:
    center;
}




/* ==================================================
   FILTER ALL | MEN | WOMEN
================================================== */

.fashion-section.is-gender-filter-enabled
.fashion-title {
  margin-bottom:
    16px;
}

.fashion-gender-filter {
  width:
    fit-content;

  max-width:
    100%;

  margin:
    0
    auto
    42px;

  padding:
    10px
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    13px;

  border:
    1px
    solid
    rgba(
      81,
      40,
      16,
      0.16
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.56
    );

  box-shadow:
    0
    10px
    24px
    rgba(
      81,
      40,
      16,
      0.07
    );

  backdrop-filter:
    blur(8px);
}


.fashion-gender-filter[hidden] {
  display:
    none;
}


.fashion-gender-filter-button {
  position:
    relative;

  min-height:
    32px;

  padding:
    4px
    5px;

  border:
    0;

  background:
    transparent;

  color:
    rgba(
      81,
      40,
      16,
      0.58
    );

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    700;

  letter-spacing:
    0.12em;

  cursor:
    pointer;

  transition:
    color
    0.22s
    ease;
}


.fashion-gender-filter-button::after {
  content:
    "";

  position:
    absolute;

  right:
    5px;

  bottom:
    1px;

  left:
    5px;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(--brand-color);

  transform:
    scaleX(0);

  transform-origin:
    center;

  transition:
    transform
    0.22s
    ease;
}


.fashion-gender-filter-button:hover,
.fashion-gender-filter-button.is-active {
  color:
    var(--brand-color);
}


.fashion-gender-filter-button.is-active::after {
  transform:
    scaleX(1);
}


.fashion-gender-filter-button:focus-visible {
  outline:
    3px
    solid
    rgba(
      152,
      96,
      45,
      0.26
    );

  outline-offset:
    3px;

  border-radius:
    7px;
}


.fashion-gender-filter-divider {
  color:
    rgba(
      81,
      40,
      16,
      0.28
    );

  font-size:
    13px;

  font-weight:
    500;
}


.fashion-gender-group {
  width:
    100%;

  margin-bottom:
    50px;
}


.fashion-gender-group:last-child {
  margin-bottom:
    0;
}


.fashion-gender-title {
  margin:
    0
    0
    28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    18px;

  color:
    var(--brand-color);

  font-size:
    24px;

  font-weight:
    800;

  letter-spacing:
    0.18em;
}


.fashion-gender-title::before,
.fashion-gender-title::after {
  content:
    "";

  width:
    min(
      116px,
      18vw
    );

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        81,
        40,
        16,
        0.46
      )
    );
}


.fashion-gender-title::after {
  background:
    linear-gradient(
      90deg,
      rgba(
        81,
        40,
        16,
        0.46
      ),
      transparent
    );
}


.fashion-container {
  width:
    100%;

  max-width:
    1180px;

  margin:
    0
    auto;
}


.fashion-category {
  width:
    100%;
}


.fashion-category-title {
  margin:
    0
    0
    16px;

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  color:
    var(--brand-color);

  font-size:
    21px;

  font-weight:
    800;

  line-height:
    1.2;
}


.fashion-category-title::after {
  content:
    "";

  height:
    1px;

  flex:
    1;

  background:
    linear-gradient(
      90deg,
      rgba(
        81,
        40,
        16,
        0.45
      ),
      transparent
    );
}


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

.fashion-grid {
  width:
    100%;

  margin-bottom:
    34px;

  display:
    grid;

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

  align-items:
    stretch;

  gap:
    22px;
}


.fashion-empty-message {
  grid-column:
    1 / -1;

  padding:
    40px
    20px;

  color:
    var(--brand-color);

  font-size:
    16px;

  text-align:
    center;
}


/* ==================================================
   CARD PRODUK
================================================== */

.product-card {
  width:
    100%;

  min-width:
    0;

  height:
    100%;

  padding:
    12px;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px
    solid
    rgba(
      81,
      40,
      16,
      0.06
    );

  border-radius:
    21px;

  background:
    #ffffff;

  box-shadow:
    0
    10px
    25px
    rgba(
      81,
      40,
      16,
      0.08
    );

  text-align:
    center;

  cursor:
    pointer;

  transition:
    transform
    0.3s
    ease,
    box-shadow
    0.3s
    ease;
}


.product-card:hover {
  transform:
    translateY(-6px);

  box-shadow:
    0
    18px
    34px
    rgba(
      81,
      40,
      16,
      0.14
    );
}


.product-card:focus-visible {
  outline:
    3px
    solid
    var(--button-color);

  outline-offset:
    4px;
}


/* Gambar */

.product-image-box {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    1 / 1;

  overflow:
    hidden;

  border-radius:
    17px;

  background:
    #ededed;
}


.product-image {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  opacity:
    1;

  transition:
    opacity
    0.22s
    ease,
    transform
    0.45s
    ease,
    filter
    0.22s
    ease;
}


.product-card:hover
.product-image {
  transform:
    scale(1.025);
}


.product-image.is-changing {
  opacity:
    0;

  filter:
    blur(3px);

  transform:
    scale(0.985)
    !important;
}


/* Status */

.product-status {
  position:
    absolute;

  top:
    10px;

  left:
    10px;

  z-index:
    2;

  min-height:
    25px;

  padding:
    5px
    9px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    100px;

  color:
    #ffffff;

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1;

  white-space:
    nowrap;
}


.product-status.ready-stock {
  background:
    var(--success);
}


.product-status.preorder {
  background:
    var(--warning);
}


.product-status.sold-out {
  background:
    var(--danger);
}


/* Nama dan harga */

.product-name {
  /*
    Tinggi judul disamakan agar harga, pilihan warna,
    dan tombol semua kartu tetap lurus meskipun judul
    terdiri dari 2 atau 3 baris.
  */
  height:
    66px;

  min-height:
    66px;

  margin:
    12px
    5px
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--brand-color);

  font-size:
    15px;

  font-weight:
    700;

  line-height:
    1.4;

  text-align:
    center;
}


.product-price {
  min-height:
    24px;

  margin-top:
    4px;

  color:
    var(--brand-color);

  font-size:
    15px;

  font-weight:
    500;

  line-height:
    1.4;
}


/* ==================================================
   SWATCH WARNA

   Desktop / laptop:
   5 kolom × 2 baris.

   Tablet / HP:
   10 warna satu baris dan bisa digeser.
================================================== */

.product-colors {
  width:
    100%;

  margin:
    12px
    0
    0;

  padding:
    4px;

  display:
    grid;

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

  grid-template-rows:
    repeat(
      2,
      34px
    );

  gap:
    8px;

  overflow:
    visible;
}


/*
  Parent tombol tidak memiliki
  background gradient, border putih,
  background-clip, atau transform.

  Dua warna dibuat menggunakan
  ::before dan ::after.
*/

.color-option {
  position:
    relative;

  isolation:
    isolate;

  width:
    100%;

  height:
    34px;

  min-width:
    0;

  min-height:
    34px;

  padding:
    0;

  overflow:
    hidden;

  appearance:
    none;

  -webkit-appearance:
    none;

  border:
    0;

  border-radius:
    6px;

  outline:
    0;

  background:
    transparent;

  box-shadow:
    0
    0
    0
    1px
    rgba(
      81,
      40,
      16,
      0.1
    );

  transform:
    none;

  transition:
    box-shadow
    0.2s
    ease;
}


/* Warna kiri */

.color-option::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    0;

  z-index:
    1;

  width:
    calc(
      50% + 0.5px
    );

  background:
    var(
      --swatch-left,
      #dddddd
    );

  pointer-events:
    none;
}


/* Warna kanan */

.color-option::after {
  content:
    "";

  position:
    absolute;

  top:
    0;

  right:
    0;

  bottom:
    0;

  z-index:
    1;

  width:
    calc(
      50% + 0.5px
    );

  background:
    var(
      --swatch-right,
      #ffffff
    );

  pointer-events:
    none;
}


/* Tidak ada scale dan translate */

.color-option:hover {
  transform:
    none;

  box-shadow:
    0
    0
    0
    2px
    rgba(
      81,
      40,
      16,
      0.33
    );
}


/* Ring warna terpilih */

.color-option.is-selected {
  z-index:
    3;

  transform:
    none;

  box-shadow:
    0
    0
    0
    2px
    #ffffff,
    0
    0
    0
    4px
    var(--brand-color);
}


.color-option:focus-visible {
  z-index:
    4;

  box-shadow:
    0
    0
    0
    2px
    #ffffff,
    0
    0
    0
    4px
    var(--button-color);
}


/* ==================================================
   TOMBOL PRODUK
================================================== */

.product-cart-button {
  width:
    100%;

  height:
    44px;

  margin-top:
    14px;

  flex-shrink:
    0;

  border-radius:
    7px;

  background:
    #944814;

  color:
    #ffffff;

  font-size:
    15px;

  font-weight:
    700;

  line-height:
    1;

  transition:
    background
    0.2s
    ease,
    transform
    0.2s
    ease;
}


.product-cart-button:hover {
  background:
    var(--button-hover);

  transform:
    translateY(-2px);
}


.product-cart-button.sold-out-button,
.product-cart-button:disabled {
  background:
    var(--disabled);

  color:
    #ffffff;

  cursor:
    not-allowed;

  transform:
    none;
}


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

@media (
  max-width:
  1350px
) {
  .site-header
  .container.header-inner {
    position:
      relative;

    height:
      95px;

    padding:
      0
      48px;
  }


  .brand-logo img {
    width:
      90px;
  }


  .site-nav {
    display:
      none;
  }


  .site-nav.is-open {
    position:
      absolute;

    top:
      95px;

    right:
      48px;

    z-index:
      1100;

    width:
      min(
        430px,
        calc(
          100vw - 96px
        )
      );

    padding:
      24px;

    display:
      flex;

    border-radius:
      20px;

    background:
      #ffffff;

    box-shadow:
      0
      15px
      35px
      rgba(
        81,
        40,
        16,
        0.18
      );
  }


  .site-nav.is-open
  .nav-list {
    width:
      100%;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    justify-content:
      center;

    gap:
      4px;
  }


  .site-nav.is-open
  .nav-list li {
    transform:
      none;
  }


  .site-nav.is-open
  .nav-list a,
  .site-nav.is-open
  .nav-list li:nth-child(3)
  a {
    width:
      100%;

    padding:
      12px
      10px;

    display:
      block;

    border-radius:
      12px;

    background:
      transparent;

    color:
      var(--brand-color);

    font-size:
      15px;

    font-weight:
      400;

    text-align:
      center;

    white-space:
      normal;
  }


  .site-nav.is-open
  .nav-list a::after {
    bottom:
      3px;
  }


  .site-nav.is-open
  .nav-list a.active {
    font-weight:
      800;
  }


  .menu-toggle {
    display:
      flex;
  }


  .page-content {
    min-height:
      calc(
        100vh - 95px
      );
  }


  .search-box {
    top:
      105px;
  }


  .home-account-dropdown {
    top:
      112px;
  }
}


/* ==================================================
   TABLET
================================================== */

@media (
  max-width:
  1050px
) {
  .fashion-container {
    max-width:
      760px;
  }


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

    gap:
      24px;
  }
}


/*
  Mulai 900px:
  seluruh 10 swatch menjadi satu baris
  dan dapat digeser kiri-kanan.
*/

@media (
  max-width:
  900px
) {
  .fashion-section {
    padding:
      30px
      24px
      56px;
  }


  .fashion-title {
    margin-bottom:
      36px;

    font-size:
      30px;
  }


  .product-colors {
    display:
      flex;

    flex-direction:
      row;

    flex-wrap:
      nowrap;

    justify-content:
      flex-start;

    gap:
      8px;

    margin-top:
      10px;

    padding:
      5px
      4px
      8px;

    overflow-x:
      auto;

    overflow-y:
      hidden;

    overscroll-behavior-inline:
      contain;

    scroll-behavior:
      smooth;

    scrollbar-width:
      thin;

    scrollbar-color:
      rgba(
        168,
        106,
        45,
        0.4
      )
      transparent;
  }


  .product-colors::-webkit-scrollbar {
    height:
      4px;
  }


  .product-colors::-webkit-scrollbar-track {
    background:
      transparent;
  }


  .product-colors::-webkit-scrollbar-thumb {
    border-radius:
      100px;

    background:
      rgba(
        168,
        106,
        45,
        0.4
      );
  }


  .color-option {
    width:
      34px;

    height:
      34px;

    min-width:
      34px;

    min-height:
      34px;

    flex:
      0 0 34px;
  }
}


/* ==================================================
   MOBILE
================================================== */

@media (
  max-width:
  600px
) {
  .fashion-section.is-gender-filter-enabled
  .fashion-title {
    margin-bottom:
      13px;
  }

  .fashion-gender-filter {
    margin-bottom:
      32px;

    padding:
      8px
      13px;

    gap:
      8px;
  }

  .fashion-gender-filter-button {
    font-size:
      12px;

    letter-spacing:
      0.08em;
  }

  .fashion-gender-group {
    margin-bottom:
      40px;
  }

  .fashion-gender-title {
    margin-bottom:
      23px;

    gap:
      12px;

    font-size:
      20px;
  }

  .site-header
  .container.header-inner {
    height:
      82px;

    padding:
      0
      18px;

    gap:
      14px;
  }


  .brand-logo img {
    width:
      70px;
  }


  .header-icons {
    gap:
      14px;
  }


  .header-icons img,
  .home-account-btn img {
    width:
      28px;

    height:
      28px;
  }


  .menu-toggle {
    width:
      28px;

    height:
      21px;
  }


  .site-nav.is-open {
    top:
      82px;

    right:
      12px;

    left:
      12px;

    width:
      auto;

    padding:
      18px;
  }


  .search-box {
    top:
      92px;

    right:
      12px;

    left:
      12px;

    width:
      auto;
  }


  .home-account-dropdown {
    top:
      92px;

    right:
      12px;

    left:
      12px;

    width:
      auto;

    padding:
      26px
      20px;
  }


  .home-account-user strong {
    font-size:
      19px;
  }


  .home-account-user-data p {
    font-size:
      13px;
  }


  .home-account-menu {
    min-height:
      50px;

    gap:
      15px;

    font-size:
      18px;
  }


  .fashion-section {
    padding:
      28px
      12px
      55px;
  }


  .fashion-title {
    margin-bottom:
      34px;

    font-size:
      27px;
  }


  .fashion-category-title {
    margin-bottom:
      13px;

    font-size:
      18px;
  }


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

    gap:
      16px
      10px;

    margin-bottom:
      30px;
  }


  .product-card {
    padding:
      8px;

    border-radius:
      17px;
  }


  .product-image-box {
    border-radius:
      14px;
  }


  .product-status {
    top:
      7px;

    left:
      7px;

    min-height:
      20px;

    padding:
      4px
      6px;

    font-size:
      7px;
  }


  .product-name {
    /* Ruang empat baris untuk kartu dua kolom pada HP. */
    height:
      60px;

    min-height:
      60px;

    margin:
      9px
      2px
      0;

    font-size:
      11px;

    line-height:
      1.35;
  }


  .product-price {
    min-height:
      20px;

    margin-top:
      3px;

    font-size:
      11px;
  }


  .product-colors {
    gap:
      7px;
  }


  .color-option {
    width:
      30px;

    height:
      30px;

    min-width:
      30px;

    min-height:
      30px;

    flex-basis:
      30px;

    border-radius:
      6px;
  }


  .color-option.is-selected {
    box-shadow:
      0
      0
      0
      1px
      #ffffff,
      0
      0
      0
      3px
      var(--brand-color);
  }


  .product-cart-button {
    height:
      38px;

    margin-top:
      10px;

    border-radius:
      6px;

    font-size:
      10px;
  }
}


/* ==================================================
   HP SANGAT KECIL
================================================== */

@media (
  max-width:
  380px
) {
  .site-header
  .container.header-inner {
    padding:
      0
      12px;
  }


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


  .header-icons {
    gap:
      10px;
  }


  .fashion-grid {
    gap:
      14px
      8px;
  }


  .product-card {
    padding:
      7px;
  }


  .product-name {
    font-size:
      10px;
  }


  .product-cart-button {
    font-size:
      9px;
  }
}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (
  prefers-reduced-motion:
  reduce
) {
  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }
}
/* ===== REVISI 15: FOTO DAN KATEGORI FASHION ===== */
.fashion-category-heading {
  margin-bottom: 26px;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.fashion-category-heading:not(:has(.fashion-category-cover)) {
  display: block;
}

.fashion-category-cover {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  background: linear-gradient(135deg, #fef5d7, #f0dabc);
  box-shadow: 0 12px 28px rgba(81, 40, 16, 0.12);
}

.fashion-category-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.fashion-category-copy {
  min-width: 0;
}

.fashion-category-gender {
  display: inline-block;
  margin-bottom: 8px;
  color: #98602d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

@media (max-width: 760px) {
  .fashion-category-heading {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .fashion-category-cover {
    max-width: 420px;
  }
}