/* Small additions on top of styles.css to cover the bits the React prototype
   handled via inline styles or React state.
   ---------------------------------------------------------------- */

/* Categories grid cards — fade up on intersection */
.cat-card[data-fade-in]      { opacity:0; transform:translateY(40px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.cat-card[data-fade-in].is-visible { opacity:1; transform:none; }

/* Make product-card__inner act as a clickable surface; styles.css already
   sets `position:absolute; inset:0` on it. */
.product-card__inner { display:block; cursor:pointer; color:inherit; }
.product-card__media { display:block; }

/* Wishlist filled state when toggled by JS */
.product-card__wishlist.is-active svg { fill:var(--accent); stroke:var(--accent); }
.btn[data-wish].is-active { color:var(--accent); border-color:var(--accent); }

/* Mega panel — collapse with max-height on the wrapper, not on the inner */
.mega[data-mega-panel] { max-height:0; overflow:hidden;
  transition: max-height .45s cubic-bezier(.2,.7,.2,1); }
.mega[data-mega-panel].is-open { max-height:560px; }

/* Search form reset (header) — sit inline with grid item */
.header__search { background:transparent; }

/* === Header single-row layout (desktop ≥961px) — bg stays transparent on hero === */
.header,
.header.is-hero,
.header.is-scrolled {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 961px) {
  .header__top {
    display: flex !important;
    align-items: center;
    gap: 24px;
  }
  .header__logo { flex-shrink: 0; }
  .header__nav {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto !important;
    padding: 0 !important;
    border-top: 0 !important;
    gap: clamp(12px, 1.8vw, 28px);
  }
  .header__nav .nav-link { padding: 8px 4px !important; }
  .header__search {
    flex-shrink: 0;
    width: clamp(180px, 22vw, 260px);
    margin-left: 0 !important;
    justify-self: auto !important;
  }
  .header__icons { flex-shrink: 0; }
}

/* Remove mega panel separator lines (header now has its own bg) */
.mega {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: 0 24px 40px -30px rgba(0,0,0,.18) !important;
}
.header.is-mega-open .header__nav { border-top-color: transparent !important; }

/* Phase 10.1: PNG logo sizing — slightly tighter than the launch baseline
   so the header reads quieter. Height drops 104px → 92px, logo image
   88px max → 72px max. Mobile breakpoint stays in clamp range. */
.header__top { height: 92px !important; }
.header__logo { display: inline-flex; align-items: center; }
.header__logo-img {
  display: block;
  height: clamp(44px, 6vw, 72px);
  width: auto;
  object-fit: contain;
}
/* default: show light (krem) logo; on subpages / scrolled state switch to dark */
.header__logo-img--dark { display: none; }
.header:not(.is-hero) .header__logo-img--light { display: none; }
.header:not(.is-hero) .header__logo-img--dark  { display: block; }

.mdrawer__logo-img {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* Visually hidden but accessible */
[hidden] { display:none !important; }

/* Toast — bottom centre */
.sey-toast {
  position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(8px);
  z-index:120; padding:14px 22px; background:var(--ink); color:var(--bg);
  font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; transition:opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.sey-toast.is-show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Drawer body initial padding when empty / filled */
.drawer__body { padding:8px 28px; }

/* Make stages stack cleanly when JS toggles `hidden` on inactive ones */
.collection__stage[hidden] { display:none; }

/* When a stage is visible, make sure it still uses grid layout
   (CSS `display` is overridden by [hidden] above) */
.collection__stage { display:grid; }

/* Spacing between qty buttons / number  */
.cart-item__qty button { padding:0; line-height:1; }

/* Make checkout CTA in drawer match button typography */
.drawer .btn { width:100%; }

/* Hide mega panel completely when not open (so it doesn't catch hover ghost) */
.mega:not(.is-open) { box-shadow:none; border-color:transparent; }
.mega:not(.is-open) .mega__inner { display:none; }
.mega.is-open .mega__inner[hidden] { display:none; }
.mega.is-open .mega__inner:not([hidden]) {
  display:grid; grid-template-columns: 180px 1fr 280px; gap:48px;
  padding:40px var(--gutter) 48px; max-width:1640px; margin:0 auto; align-items:start;
}

/* Header search visible on home only at larger sizes */
@media (max-width: 960px) {
  .header__search { display:none !important; }
  .mega { display:none; }

  /* Product page collapses to a single column below 960px; the gallery's
     sticky position then overlaps the info column and intercepts clicks
     on buttons (size pills, add-to-cart). Force static stacking here. */
  .ppage__gallery { position: static !important; top: auto !important; }

  /* Phase 10.1: mobile header single-row compaction.
     styles.css mobile rules collapse the header__top to a 3-col grid
     (menu | logo | icons). Tighten the chrome so the bar reads at
     ~64px height with smaller logo and icon footprint; secondary
     icons (heart, stores) move to the drawer-only since they ship as
     placeholders here. */
  .header__top {
    height: 64px !important;
    gap: 12px !important;
  }
  .header__logo-img { height: clamp(36px, 8vw, 48px); }
  .header__icons { gap: 2px; }
  .header__icons .icon-btn { width: 34px; height: 34px; }
  .header__icons .icon-btn[aria-label="Listem"],
  .header__icons .icon-btn[aria-label="Mağazalar"] { display: none; }
}

/* ===== Account / auth pages ============================================== */

.auth-page { background:var(--bg); padding: 160px var(--gutter) 100px; min-height: 70vh; }
.auth-page__inner { max-width: 460px; margin: 0 auto; }
.auth-page__head { text-align:center; margin-bottom: 36px; }
.auth-page__eyebrow {
  display:inline-block; font-family:var(--sans); font-size:11px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--muted); margin-bottom: 18px;
}
.auth-page__head h1 {
  font-family:var(--serif); font-size: clamp(28px, 4vw, 40px); font-weight: 400;
  line-height: 1.1; color: var(--ink); margin: 0 0 14px;
}
.auth-page__head p { color:var(--ink-soft); font-family:var(--sans); font-size:14px; margin:0; }

.auth-form { display:flex; flex-direction:column; gap:18px; }
.auth-form--inline { margin-top: 32px; }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-field__label {
  font-family:var(--sans); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.auth-field__label small { text-transform:none; letter-spacing:0; opacity:.8; }
.auth-field input {
  width:100%; padding: 14px 16px; background:transparent;
  border: 1px solid var(--hairline, rgba(20,17,13,.2));
  border-radius: 2px; font-family: var(--sans); font-size: 15px;
  color: var(--ink); transition: border-color .2s ease;
}
.auth-field input:hover  { border-color: var(--ink-soft); }
.auth-field input:focus  { outline:none; border-color: var(--ink); }
.auth-field__hint {
  font-family:var(--sans); font-size:12px; color:var(--muted); margin-top:2px;
}

.auth-form__submit { width:100%; justify-content:center; margin-top: 8px; }
.auth-form__foot {
  display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap;
  margin-top: 18px; font-family:var(--sans); font-size:13px; color:var(--muted);
}
.auth-form__foot a { color: var(--ink); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px; }
.auth-form__foot a:hover { color: var(--accent); }
.auth-form__muted { color: var(--muted) !important; }

.auth-alert {
  font-family:var(--sans); font-size:13px; line-height:1.5;
  padding: 12px 16px; margin-bottom: 24px; border-radius: 2px;
}
.auth-alert--error {
  background: rgba(138, 122, 94, .08); color: var(--ink);
  border: 1px solid rgba(138, 122, 94, .35);
}
.auth-alert--info {
  background: rgba(20, 17, 13, .04); color: var(--ink);
  border: 1px solid var(--hairline, rgba(20,17,13,.18));
}
.auth-alert--success {
  background: rgba(58, 84, 64, .07); color: #2d4636;
  border: 1px solid rgba(58, 84, 64, .35);
}
.auth-alert a { color: var(--ink); border-bottom:1px solid currentColor; }
.auth-alert code {
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 12px; padding: 0 4px; background: rgba(20,17,13,.06); border-radius: 2px;
}

.auth-summary { list-style:none; padding:0; margin: 0 0 24px;
  border-top: 1px solid var(--hairline, rgba(20,17,13,.15)); }
.auth-summary li {
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline, rgba(20,17,13,.15));
}
.auth-summary span { font-family:var(--sans); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); }
.auth-summary strong { font-family:var(--serif); font-weight: 400; font-size: 17px; color: var(--ink); }

.account-actions {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-top: 24px;
}
.account-actions form { margin: 0; }

.auth-page--profile .auth-page__inner { max-width: 520px; }
.auth-page--profile .auth-form__foot { margin-top: 40px; }
.profile-block { margin-bottom: 40px; }
.profile-block:last-of-type { margin-bottom: 0; }
.profile-block__title {
  font-family: var(--sans); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline, rgba(20,17,13,.15));
}
.auth-field input[data-readonly] {
  background: rgba(20,17,13,.03); color: var(--ink-soft); cursor: not-allowed;
}
.auth-field input[data-readonly]:hover { border-color: var(--hairline, rgba(20,17,13,.2)); }

.icon-btn.is-authed { color: var(--accent); }

.mdrawer__util-logout { margin-top: 6px; }
.mdrawer__util-logout button {
  background:transparent; border:none; padding:0; cursor:pointer;
  font: inherit; color: var(--muted); text-align:left;
}
.mdrawer__util-logout button:hover { color: var(--ink); }

/* === Addresses (Phase 2.6) ================================================ */
.auth-page--addresses .auth-page__inner { max-width: 640px; }

.btn--sm { padding: 8px 16px; font-size: 12px; letter-spacing: .14em; }

.addr-empty {
  border: 1px dashed var(--hairline, rgba(20,17,13,.15));
  padding: 32px 24px; text-align:center; border-radius: 2px;
  display:flex; flex-direction:column; align-items:center; gap: 16px;
}
.addr-empty p { margin:0; color: var(--ink-soft); font-family: var(--sans); font-size: 14px; }

.addr-list { list-style:none; padding:0; margin: 0 0 24px; display:flex; flex-direction:column; gap: 14px; }

.addr-card {
  border: 1px solid var(--hairline, rgba(20,17,13,.15));
  border-radius: 2px;
  padding: 20px 22px;
  display:flex; flex-direction:column; gap: 14px;
  background: var(--bg);
}
.addr-card.is-default {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink) inset;
}
.addr-card__head {
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
}
.addr-card__title {
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
}
.addr-card__badge {
  font-family: var(--sans); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bg); background: var(--ink);
  padding: 4px 10px; border-radius: 2px;
}
.addr-card__body { display:flex; flex-direction:column; gap: 4px; }
.addr-card__body p { margin: 0; font-family: var(--serif); font-size: 16px; color: var(--ink); }
.addr-card__name { font-weight: 500; }
.addr-card__line { color: var(--ink-soft); font-size: 15px; }
.addr-card__postal {
  display:inline-block; margin-left: 8px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px; color: var(--muted);
  padding: 1px 6px; background: rgba(20,17,13,.05); border-radius: 2px;
}
.addr-card__phone {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px; color: var(--muted);
}
.addr-card__actions {
  display:flex; flex-wrap:wrap; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--hairline, rgba(20,17,13,.1));
}
.addr-inline-form { margin: 0; display: inline-flex; }
.addr-inline-form__danger { color: var(--muted); }
.addr-inline-form__danger:hover { color: #b3261e; border-color: #b3261e; }

.addr-form__row {
  display:grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 600px) {
  .addr-form__row { grid-template-columns: 1fr; }
}
.addr-form__actions {
  display:flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px;
}
.addr-form__actions .auth-form__submit { width: auto; flex: 1 1 auto; }

.auth-field--checkbox {
  flex-direction: row; align-items: center; gap: 10px;
}
.auth-field--checkbox input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; cursor: pointer;
  accent-color: var(--ink);
}
.auth-field--checkbox span {
  font-family: var(--sans); font-size: 13px; color: var(--ink); letter-spacing: 0;
}

/* ---------- Checkout (Phase 3.2) ---------- */
.checkout { padding: 96px 24px 120px; background: var(--bg, #f6f1ea); min-height: 60vh; }
.checkout__inner { max-width: 1080px; margin: 0 auto; }
.checkout__head { margin-bottom: 24px; }
.checkout__eyebrow {
  display:inline-block; font-family: var(--sans); font-size: 11px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
.checkout__head h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 0;
}

.checkout-stepper {
  list-style: none; padding: 0; margin: 28px 0 40px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.checkout-stepper__item {
  display:flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border: 1px solid var(--hairline, rgba(20,17,13,.12));
  border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.4);
}
.checkout-stepper__item.is-done { color: var(--ink); border-color: rgba(20,17,13,.25); }
.checkout-stepper__item.is-current { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.checkout-stepper__num {
  width: 22px; height: 22px; border-radius: 50%;
  display:flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  background: rgba(20,17,13,.08); color: inherit;
}
.checkout-stepper__item.is-current .checkout-stepper__num { background: rgba(255,255,255,.18); }
.checkout-stepper__label {
  font-family: var(--sans); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase;
}

.checkout__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px;
}
@media (max-width: 960px) {
  .checkout__layout { grid-template-columns: 1fr; }
  .checkout { padding: 72px 18px 96px; }
}
.checkout__main { min-width: 0; }
.checkout__aside { min-width: 0; }

.checkout-form { display:flex; flex-direction: column; gap: 18px; }
.checkout-form__intro {
  font-family: var(--sans); font-size: 13px; color: var(--ink-soft); margin: 0;
}
.checkout-form__intro a { color: var(--ink); text-decoration: underline; }
.checkout-form__actions {
  display:flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding-top: 8px;
}

.checkout-radios {
  border: 0; padding: 0; margin: 0;
  display:flex; flex-direction: column; gap: 10px;
}
.checkout-radios legend {
  font-family: var(--sans); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.checkout-radio {
  display:flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; cursor: pointer;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--hairline, rgba(20,17,13,.12));
  border-radius: 4px; transition: border-color .15s, background .15s;
}
.checkout-radio:hover { border-color: rgba(20,17,13,.3); }
.checkout-radio.is-checked,
.checkout-radio:has(input:checked) {
  border-color: var(--ink); background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px var(--ink) inset;
}
.checkout-radio input[type="radio"] {
  margin-top: 4px; accent-color: var(--ink); width: 16px; height: 16px; cursor: pointer;
}
.checkout-radio__body { display:flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.checkout-radio__title {
  font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--ink);
  display:flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.checkout-radio__badge {
  font-family: var(--sans); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bg); background: var(--ink);
  padding: 3px 8px; border-radius: 2px;
}
.checkout-radio__line { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); }
.checkout-radio__line--muted {
  font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--muted);
}

.checkout-empty {
  padding: 32px 20px; text-align: center;
  border: 1px dashed var(--hairline, rgba(20,17,13,.18)); border-radius: 4px;
  display:flex; flex-direction: column; gap: 16px; align-items: center;
}
.checkout-empty p { font-family: var(--serif); font-size: 18px; color: var(--ink-soft); margin: 0; }

.checkout-review { display:flex; flex-direction: column; gap: 24px; }
.checkout-review__block {
  padding: 20px; background: rgba(255,255,255,.55);
  border: 1px solid var(--hairline, rgba(20,17,13,.1)); border-radius: 4px;
}
.checkout-review__block h2 {
  font-family: var(--sans); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--muted); margin: 0; font-weight: 500;
}
.checkout-review__head {
  display:flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.checkout-review__head a {
  font-family: var(--sans); font-size: 12px; color: var(--ink); text-decoration: underline;
}
.checkout-review__block p {
  margin: 4px 0; font-family: var(--serif); font-size: 15px; color: var(--ink);
}
.checkout-review__muted {
  color: var(--muted) !important; font-family: var(--mono, ui-monospace, monospace) !important;
  font-size: 13px !important;
}

.checkout-summary {
  position: sticky; top: 100px;
  padding: 22px; background: rgba(255,255,255,.7);
  border: 1px solid var(--hairline, rgba(20,17,13,.12)); border-radius: 4px;
}
.checkout-summary--inline { position: static; padding: 14px 0 0; background: transparent; border: 0; }
.checkout-summary__title {
  font-family: var(--sans); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 16px; font-weight: 500;
}
.checkout-summary__items { list-style: none; padding: 0; margin: 0 0 16px; display:flex; flex-direction: column; gap: 12px; }
.checkout-summary__items li {
  display:flex; gap: 12px; justify-content: space-between; align-items: flex-start;
  padding-bottom: 12px; border-bottom: 1px solid var(--hairline, rgba(20,17,13,.08));
}
.checkout-summary__items li:last-child { border-bottom: 0; padding-bottom: 0; }
.checkout-summary__name {
  font-family: var(--serif); font-size: 14px; color: var(--ink);
  display:flex; flex-direction: column; gap: 2px; min-width: 0;
}
.checkout-summary__qty { color: var(--muted); font-size: 12px; }
.checkout-summary__price {
  font-family: var(--mono, ui-monospace, monospace); font-size: 13px; color: var(--ink);
  white-space: nowrap;
}
.checkout-summary__totals {
  display:flex; flex-direction: column; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--hairline, rgba(20,17,13,.12));
}
.checkout-summary__totals > div {
  display:flex; justify-content: space-between; align-items: center;
  font-family: var(--sans); font-size: 13px; color: var(--ink-soft);
}
.checkout-summary__totals > div > span:last-child {
  font-family: var(--mono, ui-monospace, monospace); color: var(--ink);
}
.checkout-summary__grand {
  padding-top: 10px; margin-top: 4px;
  border-top: 1px solid var(--hairline, rgba(20,17,13,.12));
}
.checkout-summary__grand > span:first-child {
  font-family: var(--serif) !important; font-size: 16px !important; color: var(--ink) !important;
}
.checkout-summary__grand > span:last-child {
  font-family: var(--serif) !important; font-size: 18px !important;
}
.checkout-summary__discount > span:last-child {
  color: var(--ink);
}

.checkout-promo__applied {
  display:flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-family: var(--sans); font-size: 14px; color: var(--ink-soft);
  margin: 0 0 12px;
}
.checkout-promo__applied strong {
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: .04em; color: var(--ink);
  padding: 2px 8px; background: rgba(20,17,13,.06); border-radius: 4px;
}
.checkout-promo__form {
  display:flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
}
.checkout-promo__form .auth-field { flex: 1 1 220px; }
.checkout-promo__form .btn { flex: 0 0 auto; }
@media (max-width: 480px) {
  .checkout-promo__form { gap: 10px; }
  .checkout-promo__form .btn { width: 100%; }
}

.checkout-confirm__lead {
  font-family: var(--serif); font-size: 20px; color: var(--ink); margin: 0 0 8px;
}
.checkout-confirm__items { list-style: none; padding: 0; margin: 0 0 16px; display:flex; flex-direction: column; gap: 10px; }
.checkout-confirm__items li {
  display:flex; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--hairline, rgba(20,17,13,.08));
}
.checkout-confirm__items li:last-child { border-bottom: 0; padding-bottom: 0; }
.checkout-confirm__name { font-family: var(--serif); font-size: 14px; color: var(--ink); }
.checkout-confirm__qty { color: var(--muted); font-size: 12px; margin-left: 6px; }
.checkout-confirm__price {
  font-family: var(--mono, ui-monospace, monospace); font-size: 13px; color: var(--ink); white-space: nowrap;
}

/* === Orders (account/orders.php) ============================================ */
.orders-empty {
  text-align: center; padding: 40px 16px;
  border: 1px dashed var(--hairline, rgba(20,17,13,.16));
  border-radius: 6px; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.orders-empty p { margin: 0; font-family: var(--serif); font-size: 16px; }

.orders-list {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.order-card {
  display: grid; gap: 8px;
  grid-template-columns: 1fr auto;
  grid-template-areas: "head actions" "body actions";
  padding: 16px 18px;
  border: 1px solid var(--hairline, rgba(20,17,13,.14));
  border-radius: 6px; background: #fff;
}
.order-card__head { grid-area: head; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.order-card__body { grid-area: body; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.order-card__actions { grid-area: actions; align-self: center; }
.order-card__id { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.order-card__date { margin: 0; font-size: 13px; color: var(--muted); }
.order-card__total {
  margin: 0; font-family: var(--serif); font-size: 16px; color: var(--ink);
}

.order-card__badge {
  display: inline-block; padding: 2px 10px; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; border: 1px solid currentColor; color: var(--muted);
  background: transparent;
}
.order-card__badge--pending   { color: #8a6d1a; border-color: #d8b664; background: #fbf4dc; }
.order-card__badge--paid      { color: #2a5f3a; border-color: #7bbf90; background: #e5f5ea; }
.order-card__badge--shipped   { color: #1f4f7a; border-color: #6da4cc; background: #e2eff8; }
.order-card__badge--delivered { color: #1c4d2c; border-color: #4f9a6a; background: #d8eedd; }
.order-card__badge--cancelled { color: #7a2a2a; border-color: #c47a7a; background: #f5e2e2; }
.order-card__badge--refunded  { color: #5a4a2a; border-color: #c0a86d; background: #f0e6cf; }

@media (max-width: 600px) {
  .order-card {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "body" "actions";
  }
  .order-card__actions { align-self: stretch; }
  .order-card__actions .btn { width: 100%; }
}

/* Detail view */
.order-detail {
  display: grid; gap: 28px;
  grid-template-columns: minmax(220px, 280px) 1fr;
  margin-bottom: 24px;
}
@media (max-width: 768px) { .order-detail { grid-template-columns: 1fr; } }

.order-detail__meta {
  padding: 18px 20px;
  border: 1px solid var(--hairline, rgba(20,17,13,.14));
  border-radius: 6px;
  background: #fff;
}
.order-detail__dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.order-detail__dl dt { color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.order-detail__dl dd { margin: 0; font-size: 14px; color: var(--ink); }
.order-detail__tracking { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; }

.order-detail__main { display: flex; flex-direction: column; gap: 24px; }
.order-detail__block h2 {
  margin: 0 0 12px; font-family: var(--serif); font-size: 18px; color: var(--ink);
  font-weight: 500;
}
.order-detail__address {
  font-style: normal; font-size: 14px; line-height: 1.6; color: var(--ink);
}
.order-detail__address-title { font-family: var(--serif); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.order-detail__muted { color: var(--muted); font-size: 14px; margin: 0; }

.order-detail__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.order-line {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: 14px; align-items: center;
  padding-bottom: 14px; border-bottom: 1px solid var(--hairline, rgba(20,17,13,.08));
}
.order-line:last-child { border-bottom: 0; padding-bottom: 0; }
.order-line__photo {
  width: 64px; height: 64px; object-fit: cover; border-radius: 4px;
  background: #f5f1ea;
}
.order-line__body { min-width: 0; }
.order-line__name { margin: 0 0 4px; font-family: var(--serif); font-size: 15px; color: var(--ink); }
.order-line__sub { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.order-line__qty { margin: 0; font-size: 12px; color: var(--muted); }
.order-line__price { margin: 0; font-family: var(--serif); font-size: 15px; color: var(--ink); white-space: nowrap; }

.order-detail__totals dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.order-detail__totals dl > div { display: flex; justify-content: space-between; gap: 12px; }
.order-detail__totals dt { color: var(--muted); font-size: 13px; }
.order-detail__totals dd { margin: 0; font-size: 14px; color: var(--ink); text-align: right; }
.order-detail__shipping-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.order-detail__grand {
  padding-top: 10px; margin-top: 4px;
  border-top: 1px solid var(--hairline, rgba(20,17,13,.12));
}
.order-detail__grand dt, .order-detail__grand dd {
  font-family: var(--serif) !important; font-size: 17px !important; color: var(--ink) !important;
}

@media (max-width: 480px) {
  .order-line { grid-template-columns: 56px 1fr; }
  .order-line__photo { width: 56px; height: 56px; }
  .order-line__price { grid-column: 1 / -1; text-align: right; }
}


/* === Checkout payment step (PayTR iframe, Phase 4) === */
.checkout-payment { display: flex; flex-direction: column; gap: 20px; }
.checkout-payment__lead { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.checkout-payment__lead strong { color: var(--ink); }
.checkout-payment__frame {
  border: 1px solid var(--hairline, rgba(20,17,13,.12));
  border-radius: 6px;
  background: #faf7f2;
  overflow: hidden;
  min-height: 640px;
}
.checkout-payment__frame iframe { display: block; width: 100%; min-height: 640px; border: 0; }
.checkout-payment__hint { margin: 0; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  .checkout-payment__frame { min-height: 720px; }
  .checkout-payment__frame iframe { min-height: 720px; }
}

/* Confirm sayfa status varyantları (paid yeşil, pending ambar, cancelled kırmızı) */
.checkout-confirm[data-confirm-status="paid"] .checkout-confirm__lead,
.checkout-confirm[data-confirm-status="shipped"] .checkout-confirm__lead,
.checkout-confirm[data-confirm-status="delivered"] .checkout-confirm__lead {
  color: #1f1b17;
}
.checkout-confirm[data-confirm-status="pending"] .checkout-confirm__lead { color: #7a5a1e; }
.checkout-confirm[data-confirm-status="cancelled"] .checkout-confirm__lead { color: #8a2a2a; }



/* === Phase 5.2: stock badges & disabled CTA === */
.ppage__stock { margin: 4px 0 8px; font-size: 13px; letter-spacing: 0.02em; }
.ppage__stock--low { color: #8a5a1e; font-weight: 600; }
.ppage__stock--out { color: #8a2a2a; font-weight: 600; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55; pointer-events: none; cursor: not-allowed;
}



/* === Phase 5.3: Size-guide modal === */
.ppage__lbl-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ppage__size-guide-link {
  appearance:none; background:none; border:0; padding:0; cursor:pointer;
  font: inherit; color: var(--muted, #6c655a); text-decoration: underline;
  text-underline-offset: 3px; font-size: 13px;
}
.ppage__size-guide-link:hover { color: var(--ink, #1f1b17); }

.size-guide { position: fixed; inset: 0; z-index: 9000; display:none; }
.size-guide[aria-hidden="false"], .size-guide:not([hidden]) { display:flex; align-items:center; justify-content:center; }
.size-guide__scrim {
  position:absolute; inset:0; background: rgba(20,17,13,.45);
  backdrop-filter: blur(2px); cursor: pointer;
}
.size-guide__panel {
  position: relative; background: #faf7f2; max-width: 720px; width: calc(100% - 32px);
  max-height: calc(100vh - 48px); overflow-y: auto;
  border-radius: 6px; box-shadow: 0 24px 48px rgba(20,17,13,.18);
  padding: 0;
}
.size-guide__head {
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 22px; border-bottom: 1px solid rgba(20,17,13,.08);
  position: sticky; top:0; background:#faf7f2; z-index: 1;
}
.size-guide__head h2 { margin:0; font-family: var(--serif, Georgia); font-size: 20px; color: var(--ink); }
.size-guide__close {
  appearance:none; background:none; border:0; padding:6px; cursor:pointer;
  color: var(--ink); border-radius: 999px;
}
.size-guide__close:hover { background: rgba(20,17,13,.06); }
.size-guide__body { padding: 18px 22px 26px; }
.size-guide__lede { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.size-guide__section { margin: 22px 0; }
.size-guide__section:first-of-type { margin-top: 6px; }
.size-guide__section h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 16px; color: var(--ink); }
.size-guide__hint { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.size-guide__table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.size-guide__table th, .size-guide__table td {
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid rgba(20,17,13,.08);
}
.size-guide__table th { font-weight: 600; color: var(--ink); background: rgba(20,17,13,.03); }
.size-guide__table td { color: var(--ink); }
.size-guide__foot { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.size-guide__foot a { color: var(--ink); text-decoration: underline; }

@media (max-width: 600px) {
  .size-guide__panel { width: calc(100% - 16px); max-height: calc(100vh - 16px); }
  .size-guide__head { padding: 14px 16px; }
  .size-guide__body { padding: 14px 16px 22px; }
  .size-guide__table th, .size-guide__table td { padding: 8px 10px; }
}



/* === Phase 5.4: Reviews === */
.reviews { margin: 60px 0 0; padding: 32px 0; border-top: 1px solid rgba(20,17,13,.08); }
.reviews__head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.reviews__head h3 { margin:0; font-family:var(--serif); font-size:22px; color:var(--ink); }
.reviews__summary { display:inline-flex; align-items:center; gap:10px; font-size:14px; }
.reviews__score { font-weight:600; color:var(--ink); font-size:16px; }
.reviews__count { color:var(--muted); }
.reviews__stars, .reviews__item-stars { display:inline-flex; gap:1px; }
.reviews__star { color: rgba(20,17,13,.18); font-size: 14px; }
.reviews__star.is-filled { color:#b08c3a; }
.reviews__empty { color:var(--muted); font-size:14px; margin:0; }

.reviews__list { list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:18px; }
.reviews__item { padding:16px 0; border-bottom: 1px solid rgba(20,17,13,.06); }
.reviews__item:last-child { border-bottom: 0; }
.reviews__item-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.reviews__author { font-family:var(--serif); font-size:15px; color:var(--ink); }
.reviews__date { color:var(--muted); font-size:12px; margin-left:auto; }
.reviews__body { margin:0; font-size:14px; color:var(--ink); line-height:1.6; }

.reviews__form { padding:22px 0 0; border-top: 1px solid rgba(20,17,13,.08); display:flex; flex-direction:column; gap:14px; }
.reviews__form h4 { margin:0; font-family:var(--serif); font-size:18px; color:var(--ink); }
.reviews__rating-input { border:0; padding:0; margin:0; display:flex; flex-direction:row-reverse; gap:6px; justify-content:flex-end; }
.reviews__rating-input legend { font-size:13px; color:var(--muted); float:left; margin-right:12px; }
.reviews__rating-pill { display:inline-flex; }
.reviews__rating-pill input { position:absolute; opacity:0; pointer-events:none; }
.reviews__rating-pill span {
  display:inline-flex; align-items:center; gap:2px;
  padding:6px 10px; border:1px solid rgba(20,17,13,.18); border-radius: 999px;
  font-size:13px; cursor:pointer; color:var(--ink); background:#faf7f2;
}
.reviews__rating-pill input:checked + span,
.reviews__rating-pill:hover span { background:#f1ebde; border-color: rgba(20,17,13,.28); }
.reviews__field { display:flex; flex-direction:column; gap:6px; font-size:14px; }
.reviews__field span { color:var(--muted); font-size:13px; }
.reviews__field textarea {
  resize:vertical; min-height:96px; padding:10px 12px;
  border:1px solid rgba(20,17,13,.16); border-radius:4px; background:#faf7f2;
  font: inherit; color:var(--ink);
}
.reviews__field textarea:focus { outline:none; border-color: rgba(20,17,13,.36); }
.reviews__form-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.reviews__hint { color:var(--muted); font-size:12px; margin:0; }
.reviews__alert { font-size:13px; margin:0; padding:8px 10px; border-radius:4px; }
.reviews__alert[data-tone="ok"] { background: rgba(76, 138, 76, .12); color:#3a6f3a; }
.reviews__alert[data-tone="err"] { background: rgba(168, 60, 60, .12); color:#8a2a2a; }
.reviews__login-cta { margin:18px 0 0; padding:14px 16px; background: rgba(20,17,13,.04); border-radius:4px; font-size:14px; color:var(--ink); }
.reviews__login-cta a { color:var(--ink); text-decoration:underline; }

@media (max-width: 600px) {
  .reviews__head { flex-direction:column; align-items:flex-start; }
  .reviews__rating-input { flex-wrap:wrap; }
}



/* === Phase 5.7: Recently-viewed rail === */
.recently-viewed { padding: 60px 6vw; }
.recently-viewed__head { text-align: center; margin-bottom: 28px; }
.recently-viewed__head .eyebrow { display:inline-block; margin-bottom:8px; color:var(--muted); letter-spacing:.18em; font-size:11px; text-transform:uppercase; }
.recently-viewed__head h2 { margin:0 0 6px; font-family:var(--serif); font-size:32px; color:var(--ink); }
.recently-viewed__head em { font-style:italic; color:var(--ink); }
.recently-viewed__head p { margin:0; color:var(--muted); font-size:14px; }
.recently-viewed__grid { max-width: 1200px; margin: 0 auto; }
@media (max-width: 600px) {
  .recently-viewed { padding: 40px 4vw; }
  .recently-viewed__head h2 { font-size: 26px; }
}



/* === Phase 7: Admin chrome === */
.admin-shell { background: #f4efe6; color: var(--ink); min-height: 100vh; margin: 0; }
.admin-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 20px; background: #1f1b17; color: #faf7f2;
}
.admin-bar__brand strong { font-family: var(--serif); font-size: 18px; letter-spacing: .03em; }
.admin-bar__brand span { margin-left:10px; opacity:.6; font-size:12px; text-transform:uppercase; letter-spacing:.18em; }
.admin-bar__user { display:flex; align-items:center; gap:14px; }
.admin-bar__email { font-size:13px; opacity:.75; }
.admin-bar__logout { margin:0; }
.admin-bar__logout button { color: #faf7f2; border-color: rgba(250,247,242,.4); }
.admin-bar__logout button:hover { background: rgba(250,247,242,.1); }

.admin-layout { display:grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 50px); }
.admin-nav { background:#faf7f2; padding: 18px 0; border-right: 1px solid rgba(20,17,13,.08); }
.admin-nav ul { list-style:none; padding:0; margin:0; }
.admin-nav li { display:block; }
.admin-nav__link {
  display:block; padding: 10px 22px;
  color: var(--ink); text-decoration:none; font-size:14px;
  border-left: 3px solid transparent;
}
.admin-nav__link:hover { background: rgba(20,17,13,.04); }
.admin-nav__link.is-active { border-left-color: #1f1b17; background: rgba(20,17,13,.06); font-weight: 600; }

.admin-main { padding: 28px 28px 60px; max-width: 1280px; }
.admin-page-head { margin-bottom: 22px; }
.admin-page-head h1 { margin:0 0 4px; font-family: var(--serif); font-size: 28px; color: var(--ink); }
.admin-page-head__sub { margin:0; color: var(--muted); font-size:13px; }

.admin-stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.admin-stats--narrow { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 28px; }
.admin-stat {
  background:#faf7f2; padding: 14px 16px; border: 1px solid rgba(20,17,13,.06); border-radius:4px;
}
.admin-stat__label, .admin-stat span { display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; margin-bottom:4px; }
.admin-stat__value, .admin-stat strong { display:block; font-family:var(--serif); font-size: 22px; color:var(--ink); }
.admin-stat--small strong { font-size: 18px; }

.admin-card { background:#faf7f2; border:1px solid rgba(20,17,13,.06); border-radius:4px; padding:18px 22px; margin-bottom:18px; }
.admin-card__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.admin-card__head h2 { margin:0; font-family:var(--serif); font-size:18px; color:var(--ink); }
.admin-card__empty { color:var(--muted); font-size:14px; margin:0; }
.admin-link { color: var(--ink); text-decoration: underline; font-size:13px; }

/* Phase 10.5 admin alert tile — danger variant for PayTR amount-mismatch */
.admin-alert {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 20px; border-radius:4px;
  background:#fff5f1; border:1px solid #d24a2a;
  margin-bottom:18px;
}
.admin-alert--danger { background:#fff5f1; border-color:#d24a2a; }
.admin-alert__body { flex:1; min-width:220px; }
.admin-alert h2 { margin:0 0 4px; font-family:var(--serif); font-size:18px; color:#7a1f0e; }
.admin-alert p  { margin:0; font-size:13px; color:#5a1a0a; line-height:1.5; }
.admin-alert .admin-link { color:#7a1f0e; }

.admin-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -22px; padding: 0 22px; }
.admin-card .admin-table-wrap { margin: 0 -22px -18px; padding: 0 22px 18px; }
.admin-table { width:100%; border-collapse: collapse; font-size:14px; }
.admin-table th, .admin-table td { padding: 10px 12px; text-align:left; border-bottom: 1px solid rgba(20,17,13,.06); vertical-align: middle; white-space: nowrap; }
.admin-table td.admin-table__wrap, .admin-table th.admin-table__wrap { white-space: normal; }
.admin-table thead th { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
.admin-table tbody tr:hover { background: rgba(20,17,13,.03); }
.admin-table small { color: var(--muted); font-size: 11px; }
.admin-table input[type="text"], .admin-table input[type="number"], .admin-table select {
  padding: 6px 8px; border: 1px solid rgba(20,17,13,.16); background:#fff; border-radius: 3px; font: inherit;
}

.admin-badge { display:inline-block; padding: 3px 8px; font-size: 11px; letter-spacing:.04em; border-radius:999px; background: rgba(20,17,13,.06); color: var(--ink); }
.admin-badge--pending  { background:#f3e2c2; color:#7a5a1e; }
.admin-badge--paid     { background:#cfe6cf; color:#3a6f3a; }
.admin-badge--shipped  { background:#cad9ec; color:#1f4f86; }
.admin-badge--delivered{ background:#c2ddc2; color:#2f6f2f; }
.admin-badge--cancelled{ background:#ecd0d0; color:#8a2a2a; }
.admin-badge--refunded { background:#e6d6f0; color:#624a86; }
.admin-badge--approved { background:#cfe6cf; color:#3a6f3a; }
.admin-badge--rejected { background:#ecd0d0; color:#8a2a2a; }

.admin-form { display:grid; gap:14px; max-width: 720px; }
.admin-form__row { display:grid; gap:12px; }
.admin-form__row--2 { grid-template-columns: 1fr 1fr; }
.admin-form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
.admin-field { display:flex; flex-direction:column; gap:4px; font-size:14px; }
.admin-field span { color:var(--muted); font-size:12px; }
.admin-field input, .admin-field textarea, .admin-field select {
  padding: 9px 10px; border: 1px solid rgba(20,17,13,.16); background:#fff; border-radius: 4px; font: inherit; color: var(--ink);
}
.admin-field input:focus, .admin-field textarea:focus, .admin-field select:focus {
  outline: none; border-color: rgba(20,17,13,.4);
}
.admin-form__actions { display:flex; gap:12px; align-items:center; }
.admin-form__hint { color:var(--muted); font-size:12px; }

.admin-login { display:flex; align-items:center; justify-content:center; padding: 60px 16px; min-height: 100vh; }
.admin-login__panel { background:#faf7f2; padding: 32px 36px; max-width: 420px; width: 100%; border:1px solid rgba(20,17,13,.08); border-radius:6px; }
.admin-login__head h1 { margin:6px 0; font-family:var(--serif); font-size:24px; color:var(--ink); }
.admin-login__head p { color:var(--muted); font-size:13px; margin:0 0 18px; }
.admin-login__form { display:flex; flex-direction:column; gap:14px; }

.admin-pagination { display:flex; justify-content:center; gap:12px; margin-top:18px; font-size:13px; }
.admin-pagination a { color: var(--ink); text-decoration: underline; }
.admin-pagination .is-current { color: var(--muted); cursor: default; }

@media (max-width: 800px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-nav { border-right: 0; border-bottom: 1px solid rgba(20,17,13,.08); padding: 8px 12px; }
  .admin-nav ul { display:flex; flex-wrap:wrap; gap:6px; }
  .admin-nav__link { padding: 6px 10px; border-left: 0; border-bottom: 2px solid transparent; }
  .admin-nav__link.is-active { border-bottom-color: #1f1b17; background: transparent; }
  .admin-main { padding: 18px 14px 60px; }
  .admin-form__row--2, .admin-form__row--3 { grid-template-columns: 1fr; }
  .admin-table-wrap { margin: 0 -14px; padding: 0 14px; }
  .admin-card .admin-table-wrap { margin: 0 -22px -18px; padding: 0 22px 18px; }
  .admin-card { padding: 16px 18px; }
  .admin-page-head h1 { font-size: 22px; }
  .admin-subnav { gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .admin-subnav__link { flex-shrink: 0; }
  .admin-form__actions { flex-wrap: wrap; }
  .admin-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

@media (max-width: 480px) {
  .admin-bar { padding: 8px 14px; min-height: 50px; }
  .admin-bar__email { display: none; }
  .admin-bar__brand strong { font-size: 16px; }
  .admin-bar__brand span { display: none; }
  .admin-main { padding: 14px 12px 60px; }
  .admin-page-head h1 { font-size: 20px; }
  .admin-card { padding: 14px 14px; }
  .admin-card .admin-table-wrap { margin: 0 -14px -14px; padding: 0 14px 14px; }
  .admin-table th, .admin-table td { padding: 8px 10px; }
}



/* === Phase 8.1: cookie banner === */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  z-index: 8800;
  background: #1f1b17; color: #faf7f2;
  border-radius: 6px; padding: 16px 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  max-width: 640px; margin: 0 auto;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { display: flex; flex-direction: column; gap: 10px; }
.cookie-banner__title { font-family: var(--serif); font-size: 16px; letter-spacing: .02em; }
.cookie-banner__body { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(250,247,242,.85); }
.cookie-banner__body a { color: #faf7f2; text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner .btn--ghost { color: #faf7f2; border-color: rgba(250,247,242,.4); }
.cookie-banner .btn--ghost:hover { background: rgba(250,247,242,.1); }

@media (max-width: 600px) {
  .cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 14px 16px; }
}

/* === Phase 8.2-8.5: Legal pages === */
.legal-page { max-width: 760px; margin: 0 auto; padding: calc(var(--header-h, 92px) + 40px) 24px 80px; }
.legal-page h1 { font-family: var(--serif); font-size: 32px; color: var(--ink); margin: 0 0 8px; }
.legal-page .eyebrow { display:inline-block; margin-bottom: 12px; color: var(--muted); letter-spacing: .18em; font-size: 11px; text-transform: uppercase; }
.legal-page h2 { font-family: var(--serif); font-size: 22px; color: var(--ink); margin: 36px 0 8px; }
.legal-page p { color: var(--ink); font-size: 15px; line-height: 1.7; margin: 8px 0; }
.legal-page ul, .legal-page ol { color: var(--ink); font-size: 15px; line-height: 1.75; padding-left: 22px; }
.legal-page small { color: var(--muted); font-size: 12px; }
.legal-page__updated { color: var(--muted); font-size: 12px; margin-bottom: 32px; }
.legal-page a { color: var(--ink); text-decoration: underline; }


/* === Phase 10.2: Micro-interactions =======================================
   CSP-safe (CSS-only). Keeps the visual language quiet but adds a little
   spring + carry-through where the eye lingers: header icons, wishlist
   heart, size pills, drawer scrim. prefers-reduced-motion always wins. */

/* Icon-btn: replace flat opacity hover with a subtle lift + accent hint.
   Avoid accent color shift on the hero (light) header where it'd fight
   the ivory chrome. */
.icon-btn {
  transition:
    opacity .2s ease,
    transform .25s cubic-bezier(.2,.7,.2,1),
    color .2s ease;
}
.icon-btn:hover { opacity: 1; transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(.94); transition-duration: .08s; }
.header:not(.is-hero) .icon-btn:hover { color: var(--accent); }

/* Wishlist heart: pulse the moment .is-active flips on (toggle.js). */
@keyframes sey-heart-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22); }
  70%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
.product-card__wishlist.is-active svg,
.btn[data-wish].is-active svg {
  animation: sey-heart-pulse .45s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: center;
}

/* Size pill: gentle spring on selection, micro-press on tap. */
.size-pill {
  transition:
    background-color .25s cubic-bezier(.2,.7,.2,1),
    color .25s cubic-bezier(.2,.7,.2,1),
    border-color .25s cubic-bezier(.2,.7,.2,1),
    transform .35s cubic-bezier(.34, 1.56, .64, 1) !important;
}
.size-pill:not(.is-active):hover { border-color: var(--ink); }
.size-pill.is-active { transform: translateY(-1px); }
.size-pill:active { transform: scale(.96); transition-duration: .08s; }

/* Drawer scrim: align easing curve with the panel slide so the two read
   as one motion instead of two staggered fades. */
.mdrawer__scrim { transition: opacity .35s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .icon-btn,
  .size-pill { transition: none !important; }
  .icon-btn:hover,
  .icon-btn:active,
  .size-pill.is-active,
  .size-pill:active { transform: none; }
  .product-card__wishlist.is-active svg,
  .btn[data-wish].is-active svg { animation: none; }
}

/* ===========================================================
   Phase 6.2 — Search autocomplete panel
   =========================================================== */
.header__search,
.mdrawer__search { position: relative; }

.search-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--paper, #faf6ec);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(20, 17, 13, .18);
  z-index: 60;
}
.search-panel[hidden] { display: none; }
.search-panel__item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 17, 13, .06);
  transition: background-color .15s ease;
}
.search-panel__item:last-child { border-bottom: 0; }
.search-panel__item:hover,
.search-panel__item:focus-visible {
  background: rgba(20, 17, 13, .04);
  outline: none;
}
.search-panel__thumb {
  width: 44px;
  height: 44px;
  background: rgba(20, 17, 13, .06);
  display: block;
  overflow: hidden;
  border-radius: 2px;
}
.search-panel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.search-panel__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.search-panel__name {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-panel__sub {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-panel__price {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.search-panel__empty {
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 960px) {
  .mdrawer__search .search-panel { max-height: 50vh; }
}

/* ===========================================================
   Phase 6.3 — Shop facet panel
   =========================================================== */
.shop__panel {
  margin: 0 auto 24px;
  max-width: 920px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
}
.shop__panel-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  list-style: none;
  user-select: none;
}
.shop__panel-summary::-webkit-details-marker { display: none; }
.shop__panel-summary::after {
  content: '＋';
  font-size: 16px;
  line-height: 1;
  margin-left: auto;
  color: var(--muted);
}
.shop__panel[open] .shop__panel-summary::after { content: '−'; color: var(--ink); }
.shop__panel-count {
  font-size: 11px;
  color: var(--accent);
  padding: 2px 8px;
  border: 1px solid var(--accent-2);
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}
.shop__panel-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 18px 20px 22px;
  border-top: 1px solid var(--hairline);
}
@media (max-width: 720px) {
  .shop__panel-form { grid-template-columns: 1fr; gap: 16px; }
}
.facet { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.facet__label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.facet__slider {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.facet__slider input[type="range"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  margin: 0;
}
.facet__slider input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--hairline);
}
.facet__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  margin-top: -7px;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink);
}
.facet__slider input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--hairline);
}
.facet__slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink);
}
.facet__readout {
  display: flex;
  gap: 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.facet__readout-sep { color: var(--muted); }
.facet input[type="text"],
.facet select {
  height: 36px;
  padding: 0 12px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}
.facet input[type="text"]:focus,
.facet select:focus {
  outline: none;
  border-color: var(--ink);
}
.facet__actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(20, 17, 13, .06);
  margin-top: 6px;
}

/* ===========================================================
   Phase 6.4 — Active filter chips
   =========================================================== */
.shop__chips {
  list-style: none;
  margin: 0 auto 20px;
  padding: 0;
  max-width: 920px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shop__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-soft);
}
.shop__chip-label { white-space: nowrap; }
.shop__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(20, 17, 13, .08);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  transition: background-color .15s ease, color .15s ease;
}
.shop__chip-remove:hover,
.shop__chip-remove:focus-visible {
  background: var(--ink);
  color: var(--bg);
  outline: none;
}

/* ===========================================================
   Phase 6.5 — Empty state with suggested products
   =========================================================== */
.shop__empty {
  text-align: center;
  padding: 60px 16px 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.shop__empty-copy {
  max-width: 540px;
  margin: 0 auto 36px;
}
.shop__empty-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 30px);
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
}
.shop__empty-lede {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}
.shop__empty-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shop__empty-rail {
  margin-top: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}
.shop__empty-rail-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}

/* ===========================================================
   Phase 10.3 design-review polish — append-only design tokens
   =========================================================== */

/* account/wishlist.php container — .account was referenced but undefined,
   causing the page to render with default browser layout (header overlap). */
.account {
  background: var(--bg);
  padding: 160px var(--gutter) 100px;
  min-height: 70vh;
}
.account__head {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 720px;
}
.account__head .eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.account__head h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
.account__intro {
  margin: 14px auto 0;
  max-width: 520px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.account__back {
  text-align: center;
  margin-top: 48px;
}
.account__back a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 960px) {
  .account { padding: 100px var(--gutter) 60px; }
}

/* Destructive variants — replace hard-coded #8a2a2a inline styles scattered
   across account-delete, admin/products, admin/categories, admin/orders, etc. */
.btn--danger {
  background: #8a2a2a;
  border-color: #8a2a2a;
  color: var(--bg);
}
.btn--danger:hover {
  background: #6e2020;
  border-color: #6e2020;
}
.link--danger {
  color: #8a2a2a;
  text-decoration: underline;
}

/* Admin row-action buttons — destructive/approve actions previously used
   inline style="background:none;border:0;color:#8a2a2a" patterns. */
.admin-action {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  letter-spacing: inherit;
}
.admin-action--archive,
.admin-action--reject { color: #8a2a2a; }
.admin-action--approve { color: #3a6f3a; }
.admin-action:hover { text-decoration: underline; }

/* Compact admin search/filter input — replaces inline padding/border styles
   in products/customers/audit/orders search forms. */
.admin-input {
  padding: 6px 10px;
  border: 1px solid rgba(20,17,13,.16);
  background: #fff;
  border-radius: 3px;
  font: inherit;
  min-width: 140px;
}

/* Inline label/field pair — admin/products.php is_active checkbox row was
   referencing this class but it was never defined. */
.admin-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* product.php related rail heading was rendering at default browser serif
   with no margin or hierarchy — gave it brand-aligned typography. */
.ppage__related h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 28px);
  text-align: center;
  margin: 0 0 28px;
  color: var(--ink);
  letter-spacing: -.005em;
}

/* Reviews login-cta block was bleeding into the section divider above it. */
.reviews__login-cta { margin-top: 12px; }

/* Admin table long JSON meta cells — prevent very tall row heights from
   wrapping multi-line JSON snippets. */
.admin-table small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
  display: inline-block;
  vertical-align: bottom;
}

/* Cookie banner title — 16px serif on dark background was undersized
   relative to surrounding 13px sans body text. */
.cookie-banner__title { font-size: 17px; }

/* Admin product table — Slug column forces horizontal overflow at 768px.
   Hide it below 900px; the data is still visible in the edit view. */
@media (max-width: 900px) {
  .admin-col-slug { display: none; }
}

/* ===== Phase 12 — CMS editors (admin/content/*) ===== */
.admin-subnav { display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid rgba(20,17,13,.08); margin: 4px 0 22px; }
.admin-subnav__link {
  padding: 9px 16px; font-size: 13px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  text-decoration: none; transition: color .15s ease, border-color .15s ease;
}
.admin-subnav__link:hover { color: var(--ink); }
.admin-subnav__link.is-active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }

.admin-content-form { max-width: 820px; }
.admin-content-form .admin-card { padding: 22px 26px; }
.admin-content-field { margin-bottom: 18px; }
.admin-content-field:last-child { margin-bottom: 4px; }
.admin-content-field .admin-form__hint { margin-top: 2px; }
.admin-content-field__preview { display:flex; align-items:center; gap:8px; color: var(--muted); margin-top: 6px; font-size: 12px; }
.admin-content-field__preview code { background: rgba(20,17,13,.05); padding: 2px 6px; border-radius: 3px; font-size: 11px; color: var(--ink); }
.admin-content-field__thumb { max-height: 48px; max-width: 160px; object-fit: contain; background:#fff; border:1px solid var(--hairline); padding: 2px; border-radius: 2px; }
.admin-content-field__file { margin-top: 6px; font-size: 12px; }


/* === Phase 11.1 + 11.2: mobile audit + product detail fixes ===============
   1. Desktop product gallery overflow: styles.css sets .ppage__gallery
      sticky at top:140px, but the 4:5 aspect-ratio photo grows taller than
      the viewport on 1440/1920 screens (1044/1442px vs 900h), so sticky
      never engages — the gallery just keeps scrolling past. Clamp the hero
      photo height to the available viewport so the sticky lock actually
      pins the gallery while the right-hand info column scrolls.
   2. Mobile thumb strip: add scroll-snap-x for a tactile, paginated feel.
   3. Cookie banner mobile: tighter padding + smaller body font so the
      first-visit content area isn't dominated by a quarter-screen banner.
============================================================================ */

@media (min-width: 1024px) {
  /* aspect-ratio: 4/5 from styles.css stays in force; clamp height so the
     browser shrinks width proportionally to fit the viewport. */
  .ppage__photo {
    max-height: calc(100vh - 220px);
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }
  .ppage__gallery {
    align-self: start;
  }
}

.ppage__thumbs {
  scroll-snap-type: x mandatory;
}
.ppage__thumb {
  scroll-snap-align: start;
}

@media (max-width: 600px) {
  .cookie-banner { padding: 12px 14px; }
  .cookie-banner__inner { gap: 8px; }
  .cookie-banner__title { font-size: 14px; }
  .cookie-banner__body { font-size: 12px; line-height: 1.5; }
  .cookie-banner__actions .btn { padding: 8px 12px; font-size: 11px; }
}
.admin-content-form__actions { position: sticky; bottom: 0; background: var(--bg); padding: 14px 0; border-top: 1px solid rgba(20,17,13,.06); margin-top: 8px; z-index: 2; }


/* === Phase 11.3: cart drawer + checkout polish =============================
   1. Drawer empty-state typography moves off inline styles into class hooks
      so the markup stays CSP-clean.
   2. Checkout summary aside is sticky-pinned on desktop only — below the
      one-column breakpoint, the sticky lock fights the natural scroll order
      (summary tries to pin while review block scrolls past it). Force flow.
   3. Checkout primary actions ("Devam et", "Siparişi onayla", confirm CTAs)
      stretch to full width on small screens so the tap target reads as the
      page's call to action rather than a fragment.
   4. Stepper labels collapse to a tighter typographic scale below 480px so
      three pills hold a single row even when "Adres / Kargo / Onay" gain a
      future fourth ("Ödeme") in live PayTR mode.
============================================================================ */

.drawer__empty-title {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 8px;
}
.drawer__empty-title em { font-style: italic; }
.drawer__empty-body {
  font-size: 13px;
  margin: 0;
}

@media (max-width: 960px) {
  .checkout-summary {
    position: static;
    top: auto;
  }
}

@media (max-width: 600px) {
  .checkout-form__actions { gap: 10px; }
  .checkout-form__actions .btn,
  .checkout-confirm .checkout-form__actions .btn,
  .checkout-payment .checkout-form__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .checkout-stepper { gap: 6px; }
  .checkout-stepper__item { padding: 5px 10px 5px 5px; }
  .checkout-stepper__num { width: 20px; height: 20px; font-size: 10px; }
  .checkout-stepper__label { font-size: 10px; letter-spacing: .14em; }
}


/* === Phase 11.4: search + filter + autocomplete polish =====================
   1. Filter chip remove button below mobile breakpoint is a 20×20 hit area
      — too small for thumb taps and below the WCAG 2.1 SC 2.5.5 24×24
      minimum. Bump it on small screens while keeping desktop's denser look.
   2. Autocomplete dropdown rows use 10px vertical padding — fine for mouse,
      cramped for touch. Widen vertical padding below the mdrawer breakpoint
      so suggestions read as taps rather than incidental links.
   3. Price range sliders use 16px thumbs by default; on touch screens this
      makes the dual-handle range nearly impossible to grab without an
      undershoot. Scale them up below 600px.
   4. Active chip strip + facet panel sit edge-to-edge on mobile when the
      parent container has 0 lateral padding (shop.php). Add a small inline
      gutter so the row never glues to the viewport edge.
============================================================================ */

/* === Phase 11.10: a11y polish =============================================
   1. Skip-to-main link — visually hidden until keyboard focus reveals it as
      the first focusable element so keyboard users can bypass the header
      nav and jump straight to #main (WCAG 2.4.1 Bypass Blocks).
   2. Toast + drawer dialog ARIA roles live in markup; this only styles the
      skip link.
============================================================================ */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 200;
  transform: translateY(-150%);
  transition: transform .18s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--bg);
  outline-offset: -4px;
}


@media (max-width: 600px) {
  .shop__chip-remove {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  .shop__chip {
    padding: 6px 6px 6px 12px;
    font-size: 13px;
  }
  .shop__chips,
  .shop__panel {
    padding-left: 4px;
    padding-right: 4px;
  }
  .search-panel__item {
    padding: 14px 14px;
    gap: 14px;
  }
  .facet__slider input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -10px;
  }
  .facet__slider input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
  }
}