:root{--burgundy:#8f132d}
/* Küçük, veri sayısına duyarlı son tema düzeltmeleri. */
.ribbon-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.personalize-card-link{width:31px;height:31px;border:1px solid var(--burgundy);display:grid;place-items:center;color:var(--burgundy)!important}.customer-image-upload{display:flex!important;align-items:center;justify-content:space-between;gap:16px;border:1px dashed #9ba89e;background:#fff;padding:14px 15px!important;cursor:pointer}.customer-image-upload>span{display:flex;flex-direction:column;gap:3px}.customer-image-upload small{font-weight:400;color:var(--muted);line-height:1.4}.customer-image-upload input{width:min(210px,100%);margin:0!important;padding:7px!important;font-size:10px}.cart-customer-image{display:flex;align-items:center;gap:9px;width:max-content;max-width:100%;margin:10px 0 12px;padding:7px 10px;background:#eef1ec;border:1px solid #d7ddd5}.cart-customer-image img{width:45px;height:45px;object-fit:cover}.cart-customer-image span{display:flex;flex-direction:column}.cart-customer-image b{font-size:10px;color:var(--green)}.cart-customer-image small{font-size:8px!important;letter-spacing:0!important}
@media(max-width:600px){.customer-image-upload{align-items:flex-start;flex-direction:column}.customer-image-upload input{width:100%}}

.campaign-art.has-upload {
  overflow: hidden;
}

.campaign-upload,
.promo-upload,
.side-upload {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campaign-upload {
  position: absolute;
  inset: 0;
}

.side-campaign.has-upload {
  color: #fff;
}

.side-campaign.has-upload::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(35, 20, 24, .82), rgba(35, 20, 24, .18));
}

.side-upload {
  position: absolute;
  inset: 0;
}

.side-campaign.has-upload > span,
.side-campaign.has-upload > h2,
.side-campaign.has-upload > b,
.side-campaign.has-upload > i {
  position: relative;
  z-index: 1;
}

.side-campaign.has-upload > span {
  color: #f3c919;
}

.promo-band-art.has-upload {
  overflow: hidden;
}

.promo-band-art.has-upload .promo-upload {
  position: absolute;
  inset: 0;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 9px;
}

.social-icons a {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  transition: .2s ease;
}

.social-icons a:hover {
  color: #282828;
  background: #f3c919;
  border-color: #f3c919;
  transform: translateY(-2px);
}

.social-icons svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-icons svg .fill {
  fill: currentColor;
  stroke: none;
}

.social-icons a > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.utility-bar .utility-actions {
  display: flex;
  align-items: center;
  gap: 17px;
}

.social-icons-top {
  padding-right: 16px;
  border-right: 1px solid #e3e3e3;
}

.social-icons-top a {
  width: 25px;
  height: 25px;
  color: #8f132d;
  border-color: #dedede;
}

.social-icons-top svg {
  width: 13px;
  height: 13px;
}

.drawer-social {
  padding: 22px 20px;
}

.drawer-social > b {
  display: block;
  margin-bottom: 12px;
  color: #777;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.drawer-social .social-icons a {
  color: #8f132d;
  border-color: #dedede;
}

.drawer-social .social-icons a:hover {
  color: #282828;
}

.account-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-link > i {
  width: 36px;
  height: 36px;
  border: 1px solid #e4e4e4;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #8f132d;
  font-size: 21px;
  font-style: normal;
}

.account-link > span {
  display: flex;
  flex-direction: column;
  max-width: 92px;
}

.account-link small {
  color: #888;
  font-size: 9px;
}

.account-link strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utility-account {
  font-weight: 700!important;
  color: #555!important;
  white-space: nowrap;
}

.utility-account.register {
  color: #8f132d!important;
}

.auth-page {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
  align-items: center;
  padding-top: 65px;
  padding-bottom: 90px;
}

.auth-intro {
  padding: 30px 0;
}

.auth-intro h1 {
  margin: 0 0 24px;
  font: 800 clamp(42px, 4.5vw, 64px)/1.02 'Montserrat', sans-serif;
  letter-spacing: -.045em;
}

.auth-intro h1 em {
  color: #8f132d;
  font-style: normal;
}

.auth-intro > p {
  max-width: 520px;
  color: #777;
  font-size: 15px;
  line-height: 1.75;
}

.auth-intro ul {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.auth-intro li {
  margin: 12px 0;
  font-size: 12px;
  font-weight: 700;
}

.auth-intro li::first-letter {
  color: #8f132d;
}

.auth-card,
.account-card {
  background: #f5f5f5;
  border-top: 5px solid #8f132d;
  padding: 38px 42px;
}

.auth-card-head {
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid #ddd;
}

.auth-card-head > span {
  color: #8f132d;
  font: 800 10px 'Montserrat', sans-serif;
  letter-spacing: .16em;
}

.auth-card-head h2 {
  margin: 7px 0 5px;
  font: 800 31px 'Montserrat', sans-serif;
}

.auth-card-head p {
  margin: 0;
  color: #777;
  font-size: 11px;
}

.auth-card-head a {
  color: #8f132d;
  font-weight: 700;
  text-decoration: underline;
}

.auth-card > label,
.account-card > label,
.auth-card .form-grid > label,
.account-card .form-grid > label {
  display: block;
  margin-top: 15px;
  color: #3b3b3b;
  font-size: 11px;
  font-weight: 700;
}

.auth-card input:not([type=checkbox]),
.account-card input {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 7px;
  padding: 0 13px;
  border: 1px solid #d5d5d5;
  outline: none;
  background: #fff;
}

.auth-card input:focus,
.account-card input:focus {
  border-color: #8f132d;
  box-shadow: 0 0 0 3px rgba(143, 19, 45, .08);
}

.auth-card label small,
.account-card label small {
  display: block;
  margin-top: 5px;
  color: #999;
  font-size: 9px;
  font-weight: 400;
}

.auth-check {
  display: flex!important;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500!important;
  line-height: 1.5;
}

.auth-check input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 1px;
}

.auth-button {
  width: 100%;
  margin-top: 24px;
  background: #8f132d;
  color: #fff;
}

.auth-button b {
  color: #f3c919;
}

.form-error {
  margin-bottom: 18px;
  padding: 13px 15px;
  border-left: 4px solid #b53737;
  background: #f8e8e8;
  color: #8c2727;
  font-size: 11px;
}

.login-page {
  min-height: 620px;
}

.account-page {
  padding-top: 55px;
  padding-bottom: 90px;
}

.account-welcome {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 35px;
  padding-bottom: 30px;
  border-bottom: 1px solid #ddd;
}

.account-avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #8f132d;
  color: #fff;
  font: 800 22px 'Montserrat', sans-serif;
}

.account-welcome > div:nth-child(2) {
  flex: 1;
}

.account-welcome .eyebrow {
  margin-bottom: 6px;
  color: #8f132d;
}

.account-welcome h1 {
  margin: 0;
  font: 800 34px 'Montserrat', sans-serif;
}

.account-welcome p {
  margin: 7px 0 0;
  color: #777;
  font-size: 12px;
}

.account-welcome > a {
  color: #8f132d;
  font: 800 10px 'Montserrat', sans-serif;
}

.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.account-card {
  border-top-width: 3px;
}

.account-card-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 18px;
  border-bottom: 1px solid #ddd;
}

.account-card-head > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #8f132d;
  color: #fff;
  font-weight: 700;
}

.account-card-head h2 {
  margin: 0;
  font: 800 18px 'Montserrat', sans-serif;
}

.account-card-head p {
  margin: 4px 0 0;
  color: #777;
  font-size: 9px;
}

.account-note {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 22px 25px;
  background: #f3c919;
}

.account-note > span {
  font-size: 28px;
}

.account-note > div {
  flex: 1;
}

.account-note b {
  font: 800 14px 'Montserrat', sans-serif;
}

.account-note p {
  margin: 4px 0 0;
  font-size: 10px;
}

.account-note > a {
  font: 800 10px 'Montserrat', sans-serif;
}

@media (min-width: 1181px) {
  .header-main {
    grid-template-columns: 390px minmax(300px, 1fr) auto;
    gap: 22px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }

  .brand img {
    width: 150px;
    flex: 0 0 150px;
  }

  .brand-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #202020;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: .018em;
    text-align: center;
    white-space: nowrap;
  }

  .brand-copy b,
  .brand-copy strong {
    font: inherit;
  }

  .brand-copy strong {
    margin-top: 3px;
    font-size: 18px;
  }
}

@media (max-width: 1180px) {
  .brand-copy {
    display: none;
  }

  .account-link > span {
    display: none;
  }
}

@media (max-width: 900px) {
  .auth-page {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .auth-intro {
    padding-bottom: 0;
  }

  .account-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .ribbon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-page {
    padding-top: 35px;
    padding-bottom: 55px;
  }

  .auth-intro h1 {
    font-size: 39px;
  }

  .auth-card,
  .account-card {
    padding: 28px 20px;
  }

  .auth-card .form-grid,
  .account-card .form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .account-welcome {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .account-welcome > a {
    width: 100%;
  }

  .account-note {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .account-note > a {
    width: 100%;
  }
}