/* ==========================================================================
   COSMOSKIN — shared site chrome (v2)
   Loaded on every storefront page AFTER all other stylesheets.
   Keeps header / footer / toast / product-card chrome identical site-wide.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Global toast
   `showFavoriteToast()` (app.js) and the stock notices (inventory-client.js)
   both render `.favorite-toast`. The styling used to live only in the inline
   <style> of index.html / routine.html, so on every other page the toast was
   an unstyled div and looked like it never fired.
   -------------------------------------------------------------------------- */
.favorite-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 9999;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 999px;
  background: #1a1510;
  color: #fff;
  font-family: var(--sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  opacity: 0;
  transform: translateX(-50%) translateY(16px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.favorite-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.favorite-toast.is-error {
  background: #7d2b1f;
}

/* Lift the toast above the mobile bottom nav so it is never covered. */
@media (max-width: 768px) {
  .favorite-toast {
    bottom: calc(var(--cs-mobile-bottom-nav-height, 74px) + var(--cs-mobile-safe-bottom, env(safe-area-inset-bottom, 0px)) + 16px);
  }
}

/* --------------------------------------------------------------------------
   2. No brand-name bubble over product imagery
   `.badge` is an absolutely positioned pill that used to be printed on top of
   every product photo. The brand is already shown in `.brandline` under the
   image, so the overlay is removed everywhere (including any legacy markup
   that a renderer might still emit).
   -------------------------------------------------------------------------- */
.product-media > .badge,
.product-media-wrap > .badge,
.product-card .product-body > .badge,
.pdp-related-card .product-body > .badge,
.cs-product-card__media > .badge {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. Footer parity
   index.html renders `.footer--home-refined`; the modifier styles lived in
   signature-content.css which only the homepage loads. They are duplicated
   here so every page gets the identical homepage footer.
   -------------------------------------------------------------------------- */
.footer--home-refined {
  margin: 0;
  padding: 68px 28px 30px;
  border-top: 1px solid rgba(255, 255, 255, .04);
  background: #0e0c0a;
}

.footer--home-refined .footer-newsletter {
  width: min(1240px, 100%);
  max-width: 1240px;
  margin: 0 auto 58px;
  padding: 0 0 58px;
  border: 0;
  border-bottom: 1px solid rgba(237, 230, 220, .13);
  border-radius: 0;
  background: transparent;
}

.footer--home-refined .footer-newsletter__title {
  max-width: 680px;
  font-size: clamp(34px, 3.2vw, 46px);
}

.footer--home-refined .footer-newsletter__field,
.footer--home-refined .footer-newsletter__btn {
  border-radius: 14px;
}

.footer--home-refined .footer-grid {
  grid-template-columns: minmax(260px, 1.35fr) repeat(4, minmax(120px, 1fr));
  gap: 38px;
  padding: 0 0 48px;
  border: 0;
  border-radius: 0;
}

.footer--home-refined .footer-copy {
  max-width: 320px;
}

.footer--home-refined .footer-col {
  gap: 11px;
}

.footer--home-refined .footer-col h5 {
  margin-bottom: 8px;
}

.footer--home-refined .footer-trustbar {
  width: min(1240px, 100%);
  max-width: 1240px;
  margin: 0 auto;
  padding: 34px 0 30px;
  border-top: 1px solid rgba(237, 230, 220, .11);
}

.footer--home-refined .footer-bottom {
  width: min(1240px, 100%);
  max-width: 1240px;
  margin-top: 0;
}

@media (max-width: 1100px) {
  .footer--home-refined .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .footer--home-refined {
    padding: 54px 16px 28px;
  }

  .footer--home-refined .footer-newsletter {
    width: 100%;
    margin: 0 auto 44px;
    padding: 0 0 44px;
  }

  .footer--home-refined .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 22px;
  }
}

@media (max-width: 430px) {
  .footer--home-refined .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   4. Restore `position: sticky` on mobile
   `overflow-x: hidden` with `overflow-y: visible` computes to
   `overflow-y: auto`, turning the element into a scroll container and
   breaking every sticky descendant (mobile header, PDP section nav).
   `overflow-x: clip` clips exactly the same way without that side effect.
   -------------------------------------------------------------------------- */
@supports (overflow: clip) {
  @media (max-width: 768px) {
    body .container,
    body .section,
    body main {
      overflow-x: clip !important;
      overflow-y: visible !important;
    }

    /* `body` is excluded while a sheet, drawer or modal holds a scroll lock —
       those states legitimately need `overflow: hidden`. */
    body:not(.cs-mobile-lock):not(.cs-address-modal-open):not(.cs-ap-filter-open):not(.modal-open):not(.cs-commerce-drawer-open) {
      overflow-x: clip !important;
      overflow-y: visible !important;
    }
  }
}

/* --------------------------------------------------------------------------
   4b. Mobile-only chrome never leaks onto desktop
   cosmoskin-mobile-redesign-v1.js marks the body `cs-mobile-v1-active` and
   injects its own header / bottom nav / sheets. It never tears that down when
   the viewport grows, so on desktop a stray unstyled header used to sit above
   the real one. The elements are mobile-only by definition, so gate them.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .cs-mobile-v1-header,
  .cs-mobile-v1-bottom-nav,
  .cs-mobile-v1-backdrop,
  .cs-mobile-v1-sheet,
  .cs-mobile-announcement,
  .cs-mobile-footer,
  .cm-bottom-nav,
  .cm-mobile-sheet-root {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   5. Mobile PDP — section nav docks flush under the header
   Default: the strip sits a touch below the header. Once the reader has
   scrolled past the section nav's own resting place it docks flush so the
   horizontal tab strip no longer looks snagged. Scrolling back up restores
   the original spacing.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pdp-master-nav {
    inset-block-start: calc(var(--cs-pdp-header-offset, 62px) + 10px);
    transition: inset-block-start .18s ease, border-radius .18s ease;
  }

  .pdp-master-nav.is-docked {
    inset-block-start: var(--cs-pdp-header-offset, 62px);
    border-block-start-color: transparent;
  }
}

/* --------------------------------------------------------------------------
   6. Mobile PDP — drop the cramped floating add-to-cart strip
   `.mobile-sticky-pdp` sat squeezed between the content and the bottom nav.
   The in-page purchase card and `.pdp-master-sticky` already cover the job.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #mobileStickyPdp,
  .mobile-sticky-pdp {
    display: none !important;
  }

  /* The page no longer has to reserve room for that strip. */
  body.cs-route-pdp {
    padding-bottom: calc(var(--cs-mobile-bottom-nav-height, 74px) + var(--cs-mobile-safe-bottom, env(safe-area-inset-bottom, 0px)) + 24px) !important;
  }

  /* `.pdp-master-sticky` is the one bar that stays — keep it above the
     bottom nav rather than hidden behind it. */
  .pdp-master-sticky {
    z-index: 6300;
    padding-bottom: calc(10px + var(--cs-mobile-bottom-nav-height, 74px) + var(--cs-mobile-safe-bottom, env(safe-area-inset-bottom, 0px)));
  }
}

/* --------------------------------------------------------------------------
   7. Mobile listing cards — full "Stokta Yok" label
   mobile.css squares the cart button down to 38px for its icon-only
   treatment, which clipped the out-of-stock wording mid-word.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .product-card .price-row .btn,
  .product-card .price-row .btn-primary,
  .cs-product-card .price-row .btn,
  .pdp-related-card .price-row .btn,
  .cs-home-new-card .price-row .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    letter-spacing: .07em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card .price-row,
  .cs-product-card .price-row {
    min-width: 0;
  }

  /* Standalone stock badges must not clip either. */
  .cs-stock-line,
  .cm-card-stock-row,
  .cs-fav-card__badge,
  [data-cm-stock-badge] {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* --------------------------------------------------------------------------
   8. Review composer must clear the mobile bottom chrome
   The review modal sits at z-index 900 while the bottom nav is at 6400, so
   the "Yorumu Gönder" button used to hide underneath it.
   -------------------------------------------------------------------------- */
.pdp5-review-modal {
  z-index: 7200;
}

body.pdp-review-modal-open .cs-mobile-v1-bottom-nav,
body.pdp-review-modal-open .cm-bottom-nav,
body.pdp-review-modal-open .mobile-bottom-nav,
body.pdp-review-modal-open .pdp-master-sticky,
body.pdp-review-modal-open .mobile-sticky-pdp {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

@media (max-width: 768px) {
  .pdp5-review-modal {
    padding: 12px;
    place-items: end center;
  }

  .pdp5-review-modal__box {
    max-height: calc(100dvh - 24px);
    padding: 20px 18px 18px;
    border-radius: 24px;
  }

  .pdp5-review-modal textarea {
    min-height: 92px;
  }

  .pdp5-review-modal label {
    margin-top: 10px;
  }

  .pdp5-upload {
    margin-top: 12px;
    padding: 10px;
  }

  .pdp5-form-status {
    min-height: 0;
    margin: 8px 0;
  }

  .pdp5-review-modal__box > .btn {
    position: sticky;
    bottom: 0;
    min-height: 48px;
    margin-top: 8px;
  }
}

/* --------------------------------------------------------------------------
   9. Mobile Kategoriler — typographic directory, no photography
   Category groups stay visually separated; each entry is a clean row with an
   index, title, description and chevron instead of an editorial image.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .category-directory-card__media {
    display: none !important;
  }

  .category-directory {
    display: grid;
    gap: 28px;
  }

  .category-directory-group {
    padding: 20px 16px 8px;
    border: 1px solid rgba(26, 21, 16, .09);
    border-radius: 22px;
    background: #fffdf9;
  }

  .category-directory-head {
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(26, 21, 16, .08);
  }

  .category-directory-head .kicker {
    margin: 0 0 6px;
    color: #b58a4a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  .category-directory-head p:not(.kicker) {
    margin: 0;
    color: #6c6054;
    font-size: 12px;
    line-height: 1.6;
  }

  .category-directory-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .category-directory-card {
    position: relative;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 0 12px;
    min-height: 0 !important;
    padding: 15px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(26, 21, 16, .07) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none;
  }

  .category-directory-card:last-child {
    border-bottom: 0 !important;
  }

  .category-directory-card::before {
    content: attr(data-category-index);
    grid-row: 1 / span 2;
    color: #b58a4a;
    font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
    font-size: 13px;
    letter-spacing: .04em;
  }

  .category-directory-card__body {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .category-directory-card strong {
    color: #1a1510;
    font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.01em;
  }

  .category-directory-card span:not(.category-directory-card__body):not(.category-directory-card__action) {
    color: #6c6054;
    font-size: 11.5px;
    line-height: 1.55;
  }

  /* The "Keşfet" pill is replaced by a quiet chevron drawn on the row itself. */
  .category-directory-card > .category-directory-card__action,
  .category-directory-card__action {
    display: none !important;
  }

  .category-directory-card::after {
    content: "";
    justify-self: end;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-right: 1.4px solid rgba(26, 21, 16, .38);
    border-bottom: 1.4px solid rgba(26, 21, 16, .38);
    transform: rotate(-45deg);
  }

  .category-directory-card:active {
    background: rgba(26, 21, 16, .03) !important;
  }
}

/* --------------------------------------------------------------------------
   10. Account quick actions
   Two ways out of the dashboard, set hard right so they read as chrome rather
   than as content competing with the account hub below. Words only: the five
   icon pills this replaced said with a glyph what the label already said.
   Mobile drops the row — the fixed bottom nav already carries Sepetim,
   Favoriler and Hesabım.
   -------------------------------------------------------------------------- */
.cs-account-quick-actions {
  width: min(1240px, calc(100% - 48px));
  margin: 20px auto 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* Scoped through the wrapper so the colours beat the account theme's
   `.account-premium-page a { color: inherit }`. */
.cs-account-quick-actions .cs-account-quick-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 26px;
  border: 1px solid rgba(26, 21, 16, .16);
  border-radius: 999px;
  background: transparent;
  color: #1a1510;
  font-family: var(--sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .22s cubic-bezier(.16, 1, .3, 1),
              border-color .22s cubic-bezier(.16, 1, .3, 1),
              color .22s cubic-bezier(.16, 1, .3, 1);
}

.cs-account-quick-actions .cs-account-quick-action:hover {
  border-color: rgba(26, 21, 16, .38);
  background: rgba(248, 240, 231, .6);
}

.cs-account-quick-actions .cs-account-quick-action:focus-visible {
  outline: 2px solid #b58a4a;
  outline-offset: 3px;
}

.cs-account-quick-actions .cs-account-quick-action--primary {
  border-color: #1a1510;
  background: #1a1510;
  color: #fffdf9;
}

.cs-account-quick-actions .cs-account-quick-action--primary:hover {
  background: #2b241c;
  border-color: #2b241c;
  color: #fffdf9;
}

@media (max-width: 768px) {
  .cs-account-quick-actions {
    display: none;
  }
}