.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 23px;
  min-height:48px;
  border:1px solid transparent;
  border-radius:10px;
  font-size:13px;
  font-weight:750;
  transition:transform .2s,background .2s;
}

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

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

.button--dark:hover {
  background:#41433a;
}

.button--yellow {
  background:var(--yellow);
  color:var(--ink);
}

.button--outline {
  border-color:var(--ink);
  background:transparent;
}

.button--full {
  width:100%;
}

.icon-button {
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  font-size:28px;
  background:transparent;
  border:0;
  border-radius:50%;
  flex-shrink:0;
}

.icon-button:hover {
  background:#ececdf;
}

.icon-button>span {
  position:absolute;
  top:0;
  right:-2px;
  font-size:10px;
  font-weight:bold;
  background:var(--yellow);
  width:17px;
  height:17px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.text-button {
  border:0;
  background:transparent;
  text-decoration:underline;
  padding:10px 0;
  font-size:13px;
  min-height:44px;
}

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

.product-card {
  min-width:0;
  position:relative;
}

.product-card__image {
  display:block;
  background:#f3f1e8;
  border-radius:16px;
  overflow:hidden;
  position:relative;
}

.product-art {
  display:block;
  background-image:url('../images/catalog.webp');
  background-size:600% 400%;
  background-repeat:no-repeat;
  aspect-ratio:1.5;
}

.product-card__image .product-art {
  width:100%;
  aspect-ratio:1.05;
  mix-blend-mode:multiply;
  transition:transform .35s;
}

.product-card__image:hover .product-art {
  transform:scale(1.05);
}

.product-card__badge {
  position:absolute;
  top:13px;
  left:13px;
  font-size:10px;
  background:var(--yellow);
  font-weight:800;
  border-radius:20px;
  padding:5px 10px;
}

.product-card__badge--new {
  background:#d9ecfa;
}

.product-card__wish {
  position:absolute;
  top:10px;
  right:10px;
  background:#fffdf5dd;
  font-size:25px;
  width:35px;
  height:35px;
  z-index:2;
}

.product-card__wish[aria-pressed=true] {
  color:#c82a22;
}

.product-card__category {
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin:16px 0 8px;
}

.product-card h3 {
  font-size:15px;
  line-height:1.4;
  letter-spacing:-.015em;
  margin-bottom:12px;
  min-height:42px;
  padding-right:6px;
}

.product-card__bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.price {
  font-weight:800;
  font-size:17px;
}

.price del {
  color:#77786f;
  font-size:12px;
  font-weight:400;
  margin-left:6px;
}

.product-card__add {
  border:1px solid #d4d4c9;
  border-radius:50%;
  width:38px;
  height:38px;
  background:transparent;
  font-size:24px;
  flex-shrink:0;
}

.product-card__add:hover {
  background:var(--yellow);
  border-color:var(--yellow);
}

.checkbox {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:400;
}

.notice {
  border:1px solid #e9cf65;
  background:#fff8d7;
  border-radius:10px;
  padding:15px;
  font-size:13px;
  line-height:1.6;
}

.empty-state {
  grid-column:1/-1;
  padding:65px 25px;
  text-align:center;
  border-radius:20px;
  background:#f1f1e7;
}

.empty-state>span {
  font-size:60px;
}

.empty-state h2 {
  font-size:28px;
}

.empty-state p {
  color:var(--muted);
  font-size:14px;
}

.cart-drawer {
  position:fixed;
  inset:0 0 0 auto;
  margin:0;
  width:min(460px,100%);
  height:100%;
  max-height:100%;
  border:0;
  padding:25px;
  background:var(--paper);
  color:var(--ink);
  max-width:100%;
  box-shadow:-20px 0 60px #0002;
}

.cart-drawer::backdrop {
  background:#20201866;
  backdrop-filter:blur(3px);
}

body:has(.cart-drawer[open]) {
  overflow:hidden;
}

.drawer__heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:15px;
}

.drawer__heading h2 {
  font-size:25px;
  margin:0;
}

.cart-line {
  display:grid;
  grid-template-columns:90px 1fr;
  gap:18px;
  border-bottom:1px solid var(--line);
  padding:22px 0;
}

.cart-line__image {
  background:#f1efe5;
  align-self:start;
  border-radius:12px;
  overflow:hidden;
}

.cart-line__image .product-art {
  width:100%;
  aspect-ratio:1;
  mix-blend-mode:multiply;
}

.cart-line h3 {
  font-size:15px;
  line-height:1.35;
  margin-bottom:7px;
  letter-spacing:0;
}

.cart-line p {
  font-size:12px;
  color:var(--muted);
  margin-bottom:9px;
}

.cart-line__controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:12px;
}

.quantity {
  display:inline-flex;
  align-items:center;
  border:1px solid #c7c8bc;
  border-radius:9px;
  overflow:hidden;
  background:white;
  flex-shrink:0;
}

.quantity button {
  width:35px;
  height:42px;
  border:0;
  background:transparent;
  font-size:20px;
}

.quantity input {
  width:43px;
  min-height:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:0;
  text-align:center;
  appearance:textfield;
  -moz-appearance:textfield;
}

.quantity input::-webkit-inner-spin-button {
  appearance:none;
}

.summary {
  padding:28px;
  background:#f1f1e6;
  border-radius:18px;
}

.summary h2 {
  font-size:23px;
  margin:0 0 25px;
}

.summary__row {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:14px;
  margin:14px 0;
}

.summary__row--total {
  font-size:20px;
  font-weight:800;
  padding:20px 0 5px;
  border-top:1px solid #d8d9ca;
  margin-top:22px;
}

.summary small {
  display:block;
  color:var(--muted);
  margin:12px 0;
}

.summary .button {
  margin-top:14px;
}

.shipping-note {
  font-size:12px;
  background:#e2edda;
  padding:12px;
  border-radius:9px;
  margin:20px 0;
}

.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,25px);
  max-width:calc(100% - 30px);
  background:var(--ink);
  color:white;
  padding:14px 25px;
  border-radius:12px;
  box-shadow:var(--shadow);
  font-size:14px;
  opacity:0;
  pointer-events:none;
  z-index:100;
  transition:opacity .2s,transform .2s;
}

.toast.is-visible {
  opacity:1;
  transform:translate(-50%,0);
}

.form-status {
  font-size:14px;
  font-weight:650;
}

.form-status:not(:empty) {
  margin-top:15px;
}

.stock-note {
  font-size:12px;
  color:#36662c;
}

.wishlist-action {
  width:100%;
  margin-bottom:20px;
}

.summary__items {
  font-size:13px;
}

.summary__items p {
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.summary__items span:first-child {
  max-width:75%;
}

.nav a[aria-current=page] {
  text-decoration:underline;
  text-underline-offset:6px;
}

.art-1 {
  background-position:0% 0.0%;
}

.art-2 {
  background-position:20% 0.0%;
}

.art-3 {
  background-position:40% 0.0%;
}

.art-4 {
  background-position:60% 0.0%;
}

.art-5 {
  background-position:80% 0.0%;
}

.art-6 {
  background-position:100% 0.0%;
}

.art-7 {
  background-position:0% 33.333333333333336%;
}

.art-8 {
  background-position:20% 33.333333333333336%;
}

.art-9 {
  background-position:40% 33.333333333333336%;
}

.art-10 {
  background-position:60% 33.333333333333336%;
}

.art-11 {
  background-position:80% 33.333333333333336%;
}

.art-12 {
  background-position:100% 33.333333333333336%;
}

.art-13 {
  background-position:0% 66.66666666666667%;
}

.art-14 {
  background-position:20% 66.66666666666667%;
}

.art-15 {
  background-position:40% 66.66666666666667%;
}

.art-16 {
  background-position:60% 66.66666666666667%;
}

.art-17 {
  background-position:80% 66.66666666666667%;
}

.art-18 {
  background-position:100% 66.66666666666667%;
}

.art-19 {
  background-position:0% 100.0%;
}

.art-20 {
  background-position:20% 100.0%;
}

.art-21 {
  background-position:40% 100.0%;
}

.art-22 {
  background-position:60% 100.0%;
}

.art-23 {
  background-position:80% 100.0%;
}

.art-24 {
  background-position:100% 100.0%;
}

.tracking__title {
  font-size:26px;
  margin:25px 0;
}

.product-card__wish,.product-card__add {
  min-width:44px;
  min-height:44px;
}

.header__search button {
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-art {
  aspect-ratio:1;
}

.product-card__image .product-art {
  aspect-ratio:1;
}

.category-card .product-art {
  aspect-ratio:1.2;
}

.hero__product .product-art {
  aspect-ratio:1.1;
}

.deal__art {
  aspect-ratio:1.25;
}