/* ═══════════════════════════════════════════════════════════════
   Complete Your Routine — "Bakım Rutinini Tamamla". A single,
   per-product cross-sell: one complementary product (ikas Admin's
   product-to-product custom field, bound in Studio via a
   PRODUCT_ATTRIBUTE prop with usePageData) shown as a compact
   image+name+price+add-to-cart card. Unlike BrandBenefits/
   TrustProofSection/ConcernWhyRoutine's "no cards" editorial
   language, this IS a soft, borderless highlight panel (tinted
   background, no border/shadow) — it's a call to action, not quiet
   supporting copy, so it needs to read as a distinct, actionable
   unit while still using only this theme's existing tokens.
   ═══════════════════════════════════════════════════════════════ */

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine {
  padding: var(--space-lg) 0; /* 40px — mobile/tablet */
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_UVo8miag3T .complete-your-routine {
    padding: var(--space-2xl) 0; /* 96px — desktop, matches BrandBenefits' own split */
  }
}

/* display:flex column + gap (not a heading margin-bottom) owns the space
   between the heading and the card below — the more robust mechanism
   TrustProofSection's own heading-to-content gap settled on, immune to
   margin collapsing. */
.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__heading {
  font-family: var(--font-display);
  font-weight: 400;
  /* Site-wide typography pass: "alışveriş bölümü başlığı" hedefi mobil
     20px / masaüstü 26px — was var(--text-h2) (28px floor / 44px cap). */
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-text-primary);
  text-align: center;
  margin: 0;
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__heading {
    font-size: 26px;
    line-height: 1.15;
  }
}

/* ─── Card — compact image-left/content-right row at every width ──
   A fixed-size thumbnail + stacked name/price/CTA reads correctly as
   a small, dense recommendation unit on a narrow phone just as well
   as centered on a wide desktop column — no separate mobile layout
   needed, matching BrandBenefits' page-wide "no new structure per
   breakpoint unless actually required" approach. */
.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: 560px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__card {
    max-width: 640px;
    padding: var(--space-lg);
  }
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__media {
  display: block;
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__media {
    width: 120px;
    height: 120px;
  }
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__media {
    width: 140px;
    height: 140px;
  }
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__image--empty {
  background: linear-gradient(135deg, var(--color-surface), var(--color-border));
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  flex: 1 1 auto;
  /* A flex item's default min-width:auto lets a long product name push
     this column (and the card) wider than intended — same fix already
     used for BrandBenefits' grid columns and TrustProofSection's track. */
  min-width: 0;
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__name {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__name {
    transition: color 200ms ease;
  }
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__name:hover {
  color: var(--color-accent);
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__price {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text-primary);
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__price--original {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* ─── Add-to-cart button — mirrors ProductDetail's .pdp-cta/
   .pdp-cta--primary/.pdp-cta--oos token-for-token (same padding,
   radius, font, colors), since this theme has no shared Button
   sub-component yet; this keeps the two "Sepete Ekle" buttons on a
   PDP (the main one and this cross-sell's) visually identical. */
.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-xs);
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: 500;
  text-align: center;
  text-indent: 0.1em;
  padding: 10px 24px;
  border-radius: 2px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 200ms ease, opacity 200ms ease, transform 120ms ease;
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__cta:hover:not(:disabled) {
  background: var(--color-accent-dark);
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__cta:active:not(:disabled) {
  transform: scale(0.96);
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__cta:disabled {
  cursor: default;
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__cta--oos {
  background: var(--color-border);
  color: var(--color-text-muted);
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__cta--oos:hover:not(:disabled) {
  background: var(--color-border);
}

.cc_zRr7AL87AP_UVo8miag3T .complete-your-routine__error {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-error);
}