/* ============================================================
   Beauty Skin — Instagram креативы 1080×1350
   Built on the Beauty Skin Valencia design system
   ============================================================ */

@import url("colors_and_type.css");

/* Each creative is exactly 1080×1350 (4:5 portrait Instagram feed).
   Inside an artboard the canvas pan/zoom takes care of fitting. */

.creative {
  position: relative;
  width: 1080px;
  height: 1350px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow: hidden;
  /* Meta safe areas — visualised as guides only when .show-guides is set */
}

/* Inner content lives inside an 80px top/bottom safe area */
.creative__safe {
  position: absolute;
  inset: 80px 80px;
  display: flex;
  flex-direction: column;
}

/* ---------- Brand mark (small, consistent corner placement) ---------- */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.brand-mark__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* Eyebrow used inside creatives — slightly larger than DS default */
.cr-eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.cr-eyebrow::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--accent);
}
.cr-eyebrow--no-rule::before {
  display: none;
}

/* Display headlines */
.cr-display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-wrap: balance;
}
.cr-display--xl  { font-size: 88px; }
.cr-display--lg  { font-size: 72px; }
.cr-display--md  { font-size: 60px; }
.cr-display--sm  { font-size: 44px; }

.cr-italic { font-style: italic; }

/* Body */
.cr-lead {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: 400;
}
.cr-meta {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.cr-fine {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* Price block — quietly typographic, no badge / no frame */
.price {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}
.price__now { font-size: 56px; }
.price__was {
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  letter-spacing: 0.02em;
  font-weight: 400;
}
.price__unit {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 8px;
  display: block;
}

/* CTA — typographic, with the branded → */
.cta {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.cta__arrow { font-family: var(--font-body); }

/* Hairline rule */
.cr-rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ============================================================
   Photographic placeholders — composed warm tonal blocks.
   These are stand-ins; real campaign photo goes here.
   ============================================================ */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--bg-skin);
}
.photo__label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(43,35,32,0.55);
}

/* Various photo "moods" using gradients & shapes for the mockup */
.photo--portrait {
  background:
    radial-gradient(120% 80% at 70% 20%, #F4E4D2 0%, #E2C9B0 45%, #C9AB91 100%);
}
.photo--portrait::after {
  /* abstract face silhouette suggestion */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 48% at 58% 52%, rgba(95,60,40,0.22) 0%, rgba(95,60,40,0) 70%),
    radial-gradient(60% 70% at 90% 10%, rgba(255,250,240,0.55) 0%, rgba(255,250,240,0) 60%);
  mix-blend-mode: multiply;
}

.photo--macro {
  background:
    radial-gradient(80% 80% at 30% 30%, #EFE0CD 0%, #D6BCA1 60%, #B89478 100%);
}
.photo--macro::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.9) 0 9px, transparent 11px),
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.55) 0 9px, transparent 11px),
    radial-gradient(circle at 75% 30%, rgba(255,255,255,0.85) 0 9px, transparent 11px),
    radial-gradient(circle at 25% 55%, rgba(255,255,255,0.6) 0 9px, transparent 11px),
    radial-gradient(circle at 50% 55%, rgba(255,255,255,0.95) 0 9px, transparent 11px),
    radial-gradient(circle at 75% 55%, rgba(255,255,255,0.6) 0 9px, transparent 11px),
    radial-gradient(circle at 25% 80%, rgba(255,255,255,0.7) 0 9px, transparent 11px),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.5) 0 9px, transparent 11px),
    radial-gradient(circle at 75% 80%, rgba(255,255,255,0.85) 0 9px, transparent 11px);
  background-size: 60px 60px;
  background-position: -8px -8px;
  filter: blur(0.4px);
  opacity: 0.7;
}

.photo--linen {
  background:
    radial-gradient(140% 80% at 80% 30%, #F8EFE2 0%, #E8D6BE 60%, #D6BFA1 100%);
}
.photo--linen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 40%, rgba(255,250,240,0.6) 55%, transparent 70%),
    radial-gradient(60% 100% at 0% 100%, rgba(120,80,55,0.18) 0%, transparent 70%);
  mix-blend-mode: multiply;
}

.photo--morning {
  background:
    linear-gradient(160deg, #F2E5D2 0%, #E8D2B6 55%, #D5B89A 100%);
}
.photo--morning::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(20% 15% at 35% 55%, rgba(60,40,28,0.55) 0%, rgba(60,40,28,0) 70%),
    radial-gradient(70% 60% at 100% 0%, rgba(255,245,225,0.7) 0%, rgba(255,245,225,0) 60%);
  mix-blend-mode: multiply;
}

.photo--clinical {
  background:
    linear-gradient(140deg, #F5EFE6 0%, #EADFCF 100%);
}

.photo--cheek {
  background:
    radial-gradient(80% 80% at 40% 50%, #F2DFC8 0%, #E0BFA0 50%, #B6906F 100%);
}
.photo--cheek::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 50% at 70% 30%, rgba(255,250,240,0.6) 0%, rgba(255,250,240,0) 60%),
    radial-gradient(60% 50% at 20% 90%, rgba(70,40,25,0.35) 0%, rgba(70,40,25,0) 70%);
  mix-blend-mode: multiply;
}

.photo--dress {
  background:
    linear-gradient(180deg, #EFE3D2 0%, #DCC5AB 100%);
}

/* simple noise via tiny radial dots, very subtle */
.grain::before {
  content:"";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(43,35,32,0.06) 1px, transparent 1.2px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ============================================================
   Logo block — used in lower brand zone
   ============================================================ */
.logo-zone {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.logo-zone__name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.logo-zone__addr {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}