/* Vitrin — P1 "built-in app" package (announcement bar, trust badges, cart drawer, badges, wishlist, quick view,
   sticky add-to-cart, zoom, swatches, info tabs, quantity breaks, bundle offer, newsletter, order progress).
   Values follow the P1Storefront design; colours use the theme tokens from site.css. */
:root { --p1-soft: var(--surface); }

/* Announcement bar */
.announce-nav { background: none; border: 0; color: inherit; font-size: 18px; line-height: 1; min-width: 32px; min-height: 28px; cursor: pointer; border-radius: 0; opacity: .85; }

/* Product card: badges in one wrapping row top-left (sold out, discount, then the rest), heart top-right, quick view at the
   bottom of the image. Every card badge is a filled box so it stays readable over any photograph. */
.product-card .card-badges { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px; }
.product-card .card-badges .badge { position: static; font-size: 12px; padding: 3px 8px; border-radius: 0; }
.product-card .card-badges .badge-out, .product-card .card-badges .badge-soft { background: var(--paper); color: var(--ink); }
.product-card .card-badges .badge-sale { background: var(--accent); color: #fff; }
.product-card .card-badges .badge-out { order: -2; }
.product-card .card-badges .badge-sale { order: -1; }
/* Filled badges elsewhere (product page, quick view) get the same inner spacing as on the card. */
.badge-dark, .badge-low, .badge-ok, .badge[style*="background"] { padding: 3px 8px; }
.qv-btn { position: absolute; left: 10px; right: 10px; bottom: 10px; min-height: 38px; font-size: 15px; background: rgba(255,255,255,.95); opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
@media (hover: none) { .qv-btn { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qv-btn { transition: none; } }

/* Drawer + modal shells */
.drawer-backdrop, .modal-backdrop { position: absolute; inset: 0; background: rgba(30,27,24,.45); }
/* Sections keep their height and the panel scrolls (otherwise suggestions collapse to nothing). */
.drawer-head h2 { font-size: 20px; font-weight: 500; }
.ship-bar { height: 8px; border-radius: 0; background: var(--line); overflow: hidden; }
.ship-bar span { display: block; height: 8px; border-radius: 0; background: var(--brand); transition: width .3s ease; }
.drawer-line .thumb { width: 64px; height: 64px; border-radius: 0; flex-shrink: 0; }
/* The line total never breaks inside the amount; under pressure it moves to its own right-aligned line. */
.mini-qty { display: inline-flex; align-items: center; border: 1px solid var(--field); border-radius: 0; margin: 0; }
.mini-qty button { width: 36px; height: 36px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink); border-radius: 0; }
.sg-thumb { width: 44px; height: 44px; border-radius: 0; flex-shrink: 0; }
/* Display currency other than TL: charged in TL + approximate amount (Shared/_ChargeCurrencyNote). */
@media (prefers-reduced-motion: reduce) { .drawer-panel, .ship-bar span { transition: none; } }

.modal-panel { position: relative; background: var(--bg); border-radius: 0; width: min(880px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; outline: none; box-shadow: 0 20px 48px rgba(0,0,0,.2); }

/* Quick view */
.qv-name { font-size: 28px; font-weight: 500; padding-right: 36px; }

.content-tab > summary:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; border-radius: 0; }

.bundle-offer { border: 1px solid var(--line); border-radius: 0; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.bundle-thumb { width: 56px; height: 56px; border-radius: 0; }
.bundle-badge { border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

.sticky-thumb { width: 48px; height: 48px; border-radius: 0; flex-shrink: 0; }

/* Newsletter pop-up (the footer form is styled in site.css) */
.nl-panel { width: min(420px, 100%); padding: 0; overflow: hidden; }
.nl-body h2 { font-size: 22px; font-weight: 500; padding-right: 40px; }
.nl-body .input { min-height: 44px; }
.nl-body .btn { min-height: 44px; }

/* Order progress (Alındı → Hazırlanıyor → Kargoda / Hazır → Teslim) */
.steps::before, .steps::after { content: ""; position: absolute; top: 19px; left: 10%; height: 3px; border-radius: 0; }
.steps::before { right: 10%; background: var(--line); }
.steps::after { width: calc(80% * var(--progress, 0)); background: var(--brand); }

/* Premium package: promotion countdown, delivery estimate, back-to-top, scroll reveal, countdown banner section */
.countdown { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 0; background: var(--err-bg); color: var(--err); font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; margin: 0; }
/* Small screens: the button (and the sticky add-to-cart bar) would sit on the last footer lines (ETBİS, newsletter consent)
   at the end of the page; the footer ends with that much empty space instead. */
.reveal { opacity: 0; transform: translateY(30px); }
.pb-countdown { background: var(--ink); color: #fff; border-radius: 0; padding: 40px 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
@media (max-width: 720px) { .pb-countdown { padding: 28px 24px; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.revealed { opacity: 1; transform: none; transition: none; }
}

/* Compare: toggle on product cards / product page and the floating tray (premium.js shows them while the browser list is usable) */
.cmp-tray { position: fixed; left: 20px; bottom: var(--to-top-base, 20px); z-index: 42; display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 16px; box-shadow: 0 8px 24px rgba(30,27,24,.16); }
.cmp-tray .btn { min-height: 44px; padding: 0 18px; }
@media (max-width: 720px) { .cmp-tray { left: 16px; } }

/* ===== Zarif: cart drawer (SepetCekmece board), sticky add-to-cart, modal ===== */
.drawer-backdrop, .modal-backdrop { background: rgba(28,24,18,.35); }
.drawer-panel { width: min(480px, 100%); box-shadow: none; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.drawer-head { padding: 22px 32px; }
.drawer-head h2 { font-size: 14px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; }
.drawer-close:hover, .modal-close:hover { background: none; opacity: .6; }
.drawer-alert { margin: 12px 32px 0; }
.drawer-ship { padding: 14px 32px 16px; background: none; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); gap: 8px; }
.drawer-ship b { color: var(--ink); }
.ship-bar, .ship-bar span { height: 2px; }
.ship-bar span { background: var(--ink); }
.drawer-lines { padding: 8px 32px; gap: 0; }
.drawer-line { gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.drawer-line .thumb { width: 96px; height: 120px; }
.drawer-line .info { gap: 4px; }
.drawer-line .name { font-size: 13px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.line-row { margin-top: auto; padding-top: 8px; }
.line-row > b { font-weight: 400; font-size: 14px; }
.mini-qty { border-color: var(--field); }
.mini-qty button { width: 44px; height: 44px; font-size: 16px; }
.mini-qty span { min-width: 28px; font-weight: 400; font-size: 14px; }
.drawer-remove { font: 400 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; padding: 0; min-height: 44px; }
.drawer-suggest { padding: 18px 32px; }
.drawer-suggest .label-caps { font-size: 11px; letter-spacing: .22em; }
.sg-thumb { width: 52px; height: 64px; }
.drawer-foot { padding: 22px 32px 28px; gap: 14px; }
.drawer-foot .r:first-child { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.drawer-foot .r:first-child b { font-weight: 400; }
.drawer-view { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.drawer-empty { padding: 72px 32px; gap: 14px; }
.drawer-empty svg { stroke-width: 1; }
@media (max-width: 560px) { .drawer-head, .drawer-ship, .drawer-lines, .drawer-suggest, .drawer-foot { padding-left: 20px; padding-right: 20px; } .drawer-line .thumb { width: 80px; height: 100px; } }
.modal-panel { box-shadow: none; }
.modal-close { background: none; }
/* Phones: the sticky bar is one full-width "Sepete ekle · price" button (MobilUrun board). */
.sticky-atc { box-shadow: none; }
.sticky-name { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; }
.sticky-price { font-size: 15px; font-weight: 400; letter-spacing: .06em; }
@media (max-width: 560px) {
  .sticky-atc-row { padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); gap: 0; position: relative; }
  .sticky-price { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); z-index: 1; color: var(--bg); pointer-events: none; font-size: 12px; letter-spacing: .14em; margin-top: -1px; }
  .sticky-atc-row .btn { justify-content: flex-start; padding-left: 22px; min-height: 52px; }
  .sticky-atc-row .btn:hover { background: var(--ink); color: var(--bg); }
}
.trust-icon { background: none; color: var(--ink); }
.trust-strip { margin-top: 0; }