/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Description: A child theme for Blocksy, tailored for Graftivo Design & Print.
Author: Graftivo
Author URI: https://grafikly.com/
Template: blocksy
Version: 1.7.2
*/

/* ==========================================================================
   Graftivo Design System (Design Tokens)
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-primary: #1b2d5c;       /* Deep Navy (Trust & Solidity) */
  --color-secondary: #1a73e8;     /* Google Blue (CTAs & Action) */
  --color-secondary-rgb: 26, 115, 232;  /* same color as --color-secondary, as RGB components for use in rgba() */
  --color-secondary-hover: #155cb0; /* Darkened shade of --color-secondary, used on hover */
  --color-tertiary: #2f8f83;      /* Teal/Menta (Creativity & Design) */
  --color-tertiary-rgb: 47, 143, 131;   /* same color as --color-tertiary, as RGB components for use in rgba() */
  --color-highlight: #ffd580;     /* Gold (Stars & Highlights) */
  --color-highlight-rgb: 255, 213, 128; /* same color as --color-highlight, as RGB components for use in rgba() */
  
  /* Backgrounds & Text */
  --color-bg-base: #ffffff;       /* Main Pure White */
  --color-bg-alt: #f9fafb;        /* Light Zinc Gray (Alternate sections) */
  --color-text: #1b2d5c;          /* Default strong text (Navy) */
  --color-text-secondary: #3f3f46; /* High contrast Zinc Gray for readability */
  
  /* Borders & Grids */
  --color-border: #e4e4e7;        /* Clean Zinc border */
  --color-border-hover: #c8c8cd;

  /* Designer canvas guides */
  --graftivo-gd-guide-bleed: rgba(34, 113, 177, 0.9);
  --graftivo-gd-guide-trim: rgba(214, 54, 56, 0.85);

  /* Typography */
  --font-family-headings: "Montserrat", sans-serif;
  --font-family-body: "Inter", sans-serif;
  --font-family-mono: "Geist Mono", "JetBrains Mono", monospace;
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Home feature-card blueprint scan */
  --graftivo-feature-scan-width: 2px;

  /* Shared "interactive card" recipe — home category/feature cards, Services
     cards, Portfolio cards, Contact info cards all pull from here so their
     rest/hover depth and accent color stay in one place instead of each
     section re-declaring its own numbers (see changelog 2026-09-08). */
  --graftivo-card-radius: 12px;
  --graftivo-card-shadow-rest: 0 4px 14px rgba(27, 45, 92, 0.08);
  --graftivo-card-shadow-hover: 0 18px 44px rgba(27, 45, 92, 0.14);
}

/* --- Animations: Fade Up Reveal ---
   Deliberately placed this early, before any component CSS: graftivo-core.js/
   graftivo-home.js add .fade-up to several hoverable cards (category,
   feature, portfolio, contact-info), and .fade-up.is-visible's `transform`
   has the same specificity (two classes) as those cards' own `:hover`
   `transform`. CSS breaks that tie by source order, so this utility must
   come before every component's :hover rule — anywhere else, whichever
   happens to be declared later "wins" by accident of file layout, which is
   exactly how the 2026-09-08 hover-lift bug happened (see changelog). */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Graftivo Designer — Artwork path chooser (Phase 3)
   ========================================================================== */

.graftivo-designer-choice-form {
  position: relative;
  z-index: 1;
}

.graftivo-designer-choice-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}

.graftivo-designer-choice-back:hover {
  color: var(--color-secondary);
}

.graftivo-designer-choice-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-tertiary);
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.graftivo-designer-choice-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

.graftivo-designer-choice-fields label > span {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.graftivo-designer-choice-fields {
  display: flex;
  align-items: end;
  gap: 12px;
}

.graftivo-designer-choice-fields select,
.graftivo-designer-choice-fields input {
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.2;
}

.graftivo-designer-choice-grid {
  display: grid;
}

.graftivo-designer-choice-card {
  position: relative;
  appearance: none;
  border-radius: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.graftivo-designer-choice-card:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 3px;
}

.graftivo-designer-choice-icon {
  display: grid;
  place-items: center;
}

.graftivo-designer-choice-icon svg {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.graftivo-designer-choice-card-copy strong {
  display: block;
  font-family: var(--font-family-headings);
}

.graftivo-designer-choice-card-copy small {
  display: block;
  color: currentColor;
}

.graftivo-designer-upload-alternative {
  display: inline-block;
  margin-top: var(--space-lg);
  color: var(--color-secondary);
  font-weight: 700;
}

.graftivo-designer-upload-entry {
  display: grid;
  min-height: 72vh;
  align-items: center;
}

.graftivo-designer-upload-panel {
  position: relative;
  width: min(620px, 100%);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 56px);
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 8%, transparent);
  text-align: center;
}

.graftivo-designer-upload-panel h1 {
  margin: 0 0 var(--space-xl);
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.graftivo-designer-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  font-size: 16px;
}

.graftivo-designer-upload-panel .graftivo-designer-upload-button {
  display: inline-flex;
  min-width: 180px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  background: var(--color-primary);
  color: var(--color-bg-base);
  font-family: var(--font-family-headings);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.graftivo-designer-upload-panel .graftivo-designer-upload-button:hover,
.graftivo-designer-upload-panel .graftivo-designer-upload-button:focus-visible {
  border-color: var(--color-tertiary);
  background: var(--color-tertiary);
  color: var(--color-bg-base);
}

.graftivo-designer-upload-panel .graftivo-designer-upload-button:disabled {
  cursor: wait;
  opacity: .65;
}

.graftivo-designer-upload-status {
  min-height: 24px;
  margin: var(--space-md) 0 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.graftivo-designer-upload-status-error {
  color: var(--color-secondary);
}

/* Artwork approval clickwrap — shared by the editor and PDF route. */
.graftivo-designer-approval {
  inset: 0;
  box-sizing: border-box;
  width: min(680px, calc(100vw - (var(--space-lg) * 2)));
  max-height: calc(100dvh - (var(--space-lg) * 2));
  max-width: none;
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  background: transparent;
  color: var(--color-text);
}

.graftivo-designer-approval::backdrop {
  background: color-mix(in srgb, var(--color-primary) 82%, transparent);
}

.graftivo-designer-approval-card {
  box-sizing: border-box;
  padding: clamp(var(--space-xl), 6vw, var(--space-2xl));
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  box-shadow: 0 24px 72px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.graftivo-designer-approval-mark {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: var(--space-lg);
  place-items: center;
  border: 1px solid var(--color-tertiary);
  border-radius: 50%;
  color: var(--color-tertiary);
  font-size: 22px;
  font-weight: 700;
}

.graftivo-designer-approval-card h2 {
  margin: 0 0 var(--space-xl);
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: clamp(26px, 5vw, 34px);
  letter-spacing: -.035em;
  line-height: 1.1;
}

.graftivo-designer-proof,
.graftivo-designer-proof-file {
  margin: 0 0 var(--space-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.graftivo-designer-proof[hidden],
.graftivo-designer-proof-file[hidden] {
  display: none;
}

.graftivo-designer-proof-head {
  display: flex;
  padding: 12px var(--space-md);
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.graftivo-designer-proof-head strong {
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.graftivo-designer-proof-head span {
  color: var(--color-text-secondary);
  font-size: 11px;
}

.graftivo-designer-proof-grid {
  display: grid;
  padding: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-sm);
}

.graftivo-designer-proof-grid figure {
  min-width: 0;
  margin: 0;
}

.graftivo-designer-proof-grid img {
  display: block;
  width: 100%;
  max-height: 210px;
  object-fit: contain;
  background: var(--color-bg-base);
}

.graftivo-designer-proof-grid figcaption {
  padding-top: 6px;
  color: var(--color-text-secondary);
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
}

.graftivo-designer-proof-file {
  display: grid;
  padding: var(--space-md);
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
}

.graftivo-designer-proof-file > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  background: var(--color-primary);
  color: var(--color-bg-base);
  font-family: var(--font-family-headings);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.graftivo-designer-proof-file div {
  display: grid;
  min-width: 0;
  gap: var(--space-xs);
}

.graftivo-designer-proof-file strong {
  overflow: hidden;
  color: var(--color-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graftivo-designer-proof-file small {
  color: var(--color-text-secondary);
}

.graftivo-designer-approval-check {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-md);
  align-items: start;
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.65;
  cursor: pointer;
}

.graftivo-designer-approval-check input {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--color-tertiary);
  font-size: 16px;
}

.graftivo-designer-approval-check a {
  color: var(--color-secondary);
  font-weight: 700;
}

.graftivo-designer-approval-status {
  margin: var(--space-lg) 0 0;
  color: var(--color-text-secondary);
  font-size: 16px;
}

.graftivo-designer-approval-status.is-error {
  color: var(--color-secondary-hover);
}

.graftivo-designer-approval-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.graftivo-designer-approval-actions button {
  min-height: 48px;
  padding: 10px var(--space-lg);
  border: 1px solid var(--color-primary);
  border-radius: 0;
  font-family: var(--font-family-headings);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.graftivo-designer-approval-cancel {
  background: var(--color-bg-base);
  color: var(--color-primary);
}

.graftivo-designer-approval-submit {
  background: var(--color-primary);
  color: var(--color-bg-base);
}

.graftivo-designer-approval-submit:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.graftivo-designer-approval-actions button:focus-visible,
.graftivo-designer-approval-check input:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .graftivo-designer-approval {
    width: calc(100vw - (var(--space-md) * 2));
  }

  .graftivo-designer-approval-actions {
    flex-direction: column-reverse;
  }

  .graftivo-designer-approval-actions button {
    width: 100%;
  }

  .graftivo-designer-proof-head {
    display: grid;
  }
}

/* ==========================================================================
   Graftivo Designer — full-screen production workspace (v1.7.0)
   ========================================================================== */

html:has(.graftivo-designer-body) {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.graftivo-designer-body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-family-body);
}

.graftivo-designer-body *,
.graftivo-designer-body *::before,
.graftivo-designer-body *::after {
  box-sizing: border-box;
}

#graftivo-designer-app {
  --graftivo-designer-sidebar-width: 362px;
  --graftivo-designer-contextbar-height: 56px;
  display: grid;
  width: 100vw;
  height: 100dvh;
  grid-template-rows: 68px minmax(0, 1fr);
  overflow: hidden;
  background: var(--color-bg-alt);
}

.graftivo-designer-topbar {
  position: relative;
  z-index: 80;
  display: grid;
  min-width: 0;
  grid-template-columns: 308px auto minmax(180px, 1fr) auto auto;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--color-bg-base) 14%, transparent);
  background: var(--color-primary);
  color: var(--color-bg-base);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.graftivo-designer-contextbar {
  position: absolute;
  z-index: 70;
  top: 68px;
  right: 0;
  left: var(--graftivo-designer-sidebar-width);
  display: flex;
  min-height: var(--graftivo-designer-contextbar-height);
  padding: var(--space-sm) var(--space-lg);
  align-items: center;
  gap: var(--space-md);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-base);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.graftivo-designer-contextbar[hidden] { display: none; }
.graftivo-designer-contextbar-label { color: var(--color-primary); font-family: var(--font-family-headings); font-weight: 700; padding-right: var(--space-xs); border-right: 1px solid var(--color-border); }
.graftivo-gd-contextbar-group { display: flex; align-items: center; gap: var(--space-md); }
.graftivo-gd-contextbar-group[hidden] { display: none; }
.graftivo-designer-contextbar label { display: grid; gap: 2px; color: var(--color-text-secondary); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.graftivo-designer-contextbar select,
.graftivo-designer-contextbar input:not([type='checkbox']) {
  width: 100%;
  min-width: 78px;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  font-size: 16px;
}
.graftivo-designer-contextbar .graftivo-gd-physical-lock { display: flex; align-items: center; gap: var(--space-xs); min-width: max-content; }
.graftivo-designer-contextbar .graftivo-gd-physical-lock input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--color-tertiary); }
.graftivo-designer-contextbar button { display: grid; min-width: 42px; min-height: 38px; place-items: center; border: 1px solid var(--color-border); background: var(--color-bg-base); color: var(--color-primary); cursor: pointer; }
.graftivo-designer-contextbar button small { font-size: 9px; }
.graftivo-designer-contextbar button.is-active { border-color: var(--color-tertiary); background: var(--color-bg-alt); }

/* Text creation belongs in the rail; selected-text editing belongs in the contextual bar. */
#graftivo-gd-panel-text-body .graftivo-gd-field,
#graftivo-gd-panel-text-body .graftivo-gd-field-row,
#graftivo-gd-panel-text-body .graftivo-gd-control-group { display: none; }

.graftivo-designer-brand {
  display: flex;
  height: 100%;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-lg);
  border-right: 1px solid color-mix(in srgb, var(--color-bg-base) 14%, transparent);
  color: var(--color-bg-base);
  text-decoration: none;
}

.graftivo-designer-brand-arrow {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-bg-base) 28%, transparent);
  border-radius: 50%;
  font-size: 18px;
  transition: border-color .2s ease, transform .2s ease;
}

.graftivo-designer-brand:hover .graftivo-designer-brand-arrow,
.graftivo-designer-brand:focus-visible .graftivo-designer-brand-arrow {
  border-color: var(--color-highlight);
  transform: translateX(-2px);
}

.graftivo-designer-wordmark {
  display: grid;
  line-height: 1;
}

.graftivo-designer-wordmark strong {
  color: var(--color-bg-base);
  font-family: var(--font-family-headings);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .08em;
}

.graftivo-designer-wordmark small {
  margin-top: 5px;
  color: var(--color-highlight);
  font-family: var(--font-family-headings);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .22em;
}

.graftivo-designer-history {
  display: flex;
  height: 100%;
  align-items: stretch;
  padding: 0 var(--space-sm);
}

.graftivo-designer-history button {
  display: grid;
  min-width: 56px;
  padding: 8px 10px;
  place-content: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--color-bg-base);
  font-family: var(--font-family-body);
  cursor: pointer;
}

.graftivo-designer-history button span {
  font-size: 21px;
  line-height: 1;
}

.graftivo-designer-history button small {
  font-size: 9px;
  letter-spacing: .04em;
}

.graftivo-designer-history button:hover:not(:disabled),
.graftivo-designer-history button:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--color-bg-base) 10%, transparent);
}

.graftivo-designer-history button:disabled {
  cursor: not-allowed;
  opacity: .3;
}

.graftivo-designer-document {
  min-width: 0;
  padding: 0 var(--space-md);
  text-align: center;
}

.graftivo-designer-document .graftivo-gd-title {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--color-bg-base);
  font-family: var(--font-family-headings);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graftivo-designer-document-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: color-mix(in srgb, var(--color-bg-base) 68%, transparent);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.graftivo-designer-document-status::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-highlight);
  content: '';
}

.graftivo-designer-product-option {
  padding-right: var(--space-md);
}

.graftivo-designer-product-option:empty {
  display: none;
}

.graftivo-designer-product-option select {
  width: min(210px, 22vw);
  min-height: 40px;
  padding: 8px 34px 8px 12px;
  border: 1px solid color-mix(in srgb, var(--color-bg-base) 28%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--color-primary) 80%, var(--color-bg-base));
  color: var(--color-bg-base);
  font-size: 16px;
}

.graftivo-gd-primary-btn {
  display: inline-flex;
  min-height: 44px;
  margin-right: 12px;
  padding: 10px 20px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--color-bg-base);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.graftivo-gd-primary-btn:hover,
.graftivo-gd-primary-btn:focus-visible {
  border-color: var(--color-highlight);
  background: var(--color-highlight);
  color: var(--color-primary);
}

.graftivo-gd-primary-btn:disabled {
  cursor: wait;
  opacity: .65;
}

.graftivo-designer-workspace {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 82px 280px minmax(0, 1fr);
  overflow: hidden;
}

.graftivo-designer-tool-rail {
  position: relative;
  z-index: 40;
  display: grid;
  min-height: 0;
  align-content: start;
  border-right: 1px solid var(--color-border);
  background: var(--color-primary);
  overflow-y: auto;
  scrollbar-width: none;
}

.graftivo-designer-tool-rail::-webkit-scrollbar {
  display: none;
}

.graftivo-designer-tool-tab {
  display: grid;
  min-width: 0;
  min-height: 78px;
  padding: 10px 5px;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: color-mix(in srgb, var(--color-bg-base) 74%, transparent);
  font-family: var(--font-family-body);
  font-size: 10px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.graftivo-designer-tool-icon {
  font-family: var(--font-family-headings);
  font-size: 23px;
  font-weight: 600;
  line-height: 1;
}

.graftivo-designer-tool-tab:hover,
.graftivo-designer-tool-tab:focus-visible,
.graftivo-designer-tool-tab.is-active {
  border-left-color: var(--color-highlight);
  background: color-mix(in srgb, var(--color-bg-base) 10%, transparent);
  color: var(--color-bg-base);
}

.graftivo-designer-context {
  position: relative;
  z-index: 35;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-base);
  box-shadow: 12px 0 30px color-mix(in srgb, var(--color-primary) 7%, transparent);
}

.graftivo-designer-context-head {
  display: flex;
  min-height: 82px;
  padding: 18px var(--space-lg);
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
}

.graftivo-designer-context-head span {
  color: var(--color-tertiary);
  font-family: var(--font-family-headings);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
}

.graftivo-designer-context-head h2 {
  margin: 4px 0 0;
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 22px;
  letter-spacing: -.025em;
}

.graftivo-designer-context-head button {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg-base);
  color: var(--color-primary);
  font-size: 24px;
  cursor: pointer;
}

.graftivo-designer-context-scroll {
  min-height: 0;
  padding: var(--space-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.graftivo-designer-panel-section[hidden] {
  display: none;
}

.graftivo-gd-panel-intro {
  margin: 0 0 var(--space-lg);
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.graftivo-gd-panel-primary,
.graftivo-gd-tool-btn,
.graftivo-gd-danger-btn {
  display: inline-flex;
  width: 100%;
  min-height: 46px;
  padding: 10px var(--space-md);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  font-family: var(--font-family-headings);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.graftivo-gd-panel-primary {
  background: var(--color-primary);
  color: var(--color-bg-base);
}

.graftivo-gd-tool-btn {
  background: var(--color-bg-base);
  color: var(--color-primary);
}

.graftivo-gd-danger-btn {
  border-color: var(--color-secondary-hover);
  background: var(--color-bg-base);
  color: var(--color-secondary-hover);
}

.graftivo-gd-panel-primary:hover,
.graftivo-gd-panel-primary:focus-visible {
  border-color: var(--color-tertiary);
  background: var(--color-tertiary);
}

.graftivo-gd-field,
.graftivo-gd-field-row {
  display: grid;
  gap: var(--space-sm);
}

.graftivo-gd-field {
  margin-top: var(--space-lg);
}

.graftivo-gd-field-row {
  grid-template-columns: 1fr 1fr;
}

.graftivo-gd-field label {
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.graftivo-gd-field input,
.graftivo-gd-field select {
  width: 100%;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  font-size: 16px;
}

.graftivo-gd-field input[type='color'] {
  padding: 5px;
}

.graftivo-gd-empty-state {
  display: grid;
  min-width: 0;
  padding: var(--space-xl) var(--space-md);
  place-items: center;
  gap: var(--space-sm);
  border: 1px dashed var(--color-border);
  color: var(--color-text-secondary);
  text-align: center;
}

.graftivo-gd-empty-state strong {
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 14px;
}

.graftivo-gd-empty-state span {
  font-size: 12px;
  line-height: 1.5;
}

.graftivo-gd-object-tools {
  display: grid;
  gap: var(--space-lg);
}

.graftivo-gd-object-tools[hidden],
.graftivo-gd-empty-state[hidden],
.graftivo-gd-layer-actions[hidden],
.graftivo-designer-warning[hidden] {
  display: none;
}

.graftivo-gd-object-tools strong {
  font-family: var(--font-family-headings);
  font-size: 15px;
}

.graftivo-gd-layer-actions {
  display: grid;
  margin-bottom: var(--space-md);
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.graftivo-gd-layer-actions .graftivo-gd-tool-btn {
  min-height: 42px;
  padding: 8px;
  font-size: 12px;
}

.graftivo-gd-layer-list {
  display: grid;
  gap: var(--space-sm);
}

.graftivo-gd-layer-item {
  display: grid;
  min-height: 48px;
  padding: 8px 10px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.graftivo-gd-layer-item > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-family: var(--font-family-headings);
}

.graftivo-gd-layer-item strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graftivo-gd-layer-item small {
  color: var(--color-text-secondary);
  font-size: 10px;
}

.graftivo-gd-layer-item.is-selected {
  border-color: var(--color-tertiary);
  box-shadow: inset 3px 0 0 var(--color-tertiary);
}

.graftivo-gd-control-group,
.graftivo-gd-shape-library {
  display: grid;
  margin-top: var(--space-lg);
  gap: var(--space-sm);
}

.graftivo-gd-shape-library {
  margin: 0 0 var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.graftivo-gd-control-label {
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.graftivo-gd-segmented,
.graftivo-gd-object-actions,
.graftivo-gd-shape-grid {
  display: grid;
  gap: var(--space-sm);
}

.graftivo-gd-segmented {
  grid-template-columns: repeat(3, 1fr);
}

.graftivo-gd-object-actions {
  grid-template-columns: 1fr 1fr;
}

.graftivo-gd-shape-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.graftivo-gd-segmented button,
.graftivo-gd-shape-grid button {
  min-height: 42px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-primary);
  cursor: pointer;
}

.graftivo-gd-segmented button:hover,
.graftivo-gd-segmented button:focus-visible,
.graftivo-gd-segmented button.is-active,
.graftivo-gd-shape-grid button:hover,
.graftivo-gd-shape-grid button:focus-visible {
  border-color: var(--color-tertiary);
  background: var(--color-bg-alt);
}

.graftivo-gd-segmented button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.graftivo-gd-shape-grid button {
  display: grid;
  min-width: 0;
  place-items: center;
  gap: var(--space-xs);
  font-size: 10px;
}

.graftivo-gd-shape-grid button span {
  font-size: 24px;
  line-height: 1;
}

.graftivo-gd-layer-row {
  display: grid;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
}

.graftivo-gd-layer-row.is-selected {
  border-color: var(--color-tertiary);
  box-shadow: inset 3px 0 0 var(--color-tertiary);
}

.graftivo-gd-layer-select,
.graftivo-gd-layer-toggle {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.graftivo-gd-layer-select {
  min-width: 0;
  padding: 10px 12px;
  overflow: hidden;
  text-align: left;
}

.graftivo-gd-layer-select strong {
  display: block;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graftivo-gd-layer-toggle {
  min-width: 48px;
  padding: 6px;
  border-left: 1px solid var(--color-border);
  font-size: 10px;
}

.graftivo-gd-layer-select:hover,
.graftivo-gd-layer-select:focus-visible,
.graftivo-gd-layer-toggle:hover,
.graftivo-gd-layer-toggle:focus-visible {
  background: var(--color-bg-alt);
  color: var(--color-secondary);
}

.graftivo-gd-load-more {
  width: 100%;
  margin-top: var(--space-md);
}

.graftivo-gd-load-more[hidden] {
  display: none;
}

.graftivo-gd-panel-grid,
.graftivo-gd-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.graftivo-gd-panel-grid .graftivo-gd-empty-state,
.graftivo-gd-template-grid .graftivo-gd-empty-state {
  grid-column: 1 / -1;
}

.graftivo-gd-graphic-item,
.graftivo-gd-template-card {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-primary);
  cursor: pointer;
}

.graftivo-gd-graphic-item:hover,
.graftivo-gd-graphic-item:focus-visible,
.graftivo-gd-template-card:hover,
.graftivo-gd-template-card:focus-visible {
  border-color: var(--color-tertiary);
}

.graftivo-gd-graphic-item img,
.graftivo-gd-template-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.graftivo-gd-template-card {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  text-align: left;
}

.graftivo-gd-template-card strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graftivo-gd-source-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.graftivo-gd-source-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
  text-align: left;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-primary);
  cursor: pointer;
}

.graftivo-gd-source-card:hover,
.graftivo-gd-source-card:focus-visible {
  border-color: var(--color-tertiary);
}

.graftivo-gd-source-card strong {
  font-size: 14px;
}

.graftivo-gd-source-card span {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.graftivo-gd-source-back {
  margin-bottom: var(--space-sm);
}

.graftivo-gd-icon-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.graftivo-gd-icon-item img {
  padding: var(--space-xs);
}

.graftivo-gd-template-card.is-blank {
  min-height: 124px;
  place-content: center;
  place-items: center;
  border-style: dashed;
  text-align: center;
}

.graftivo-gd-template-card.is-blank span {
  font-size: 30px;
  font-weight: 300;
}

.graftivo-gd-upload-drop {
  display: grid;
  padding: var(--space-xl) var(--space-lg);
  place-items: center;
  gap: var(--space-sm);
  border: 1px dashed var(--color-border);
  text-align: center;
}

.graftivo-gd-upload-drop > span {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-sm);
  place-items: center;
  border: 1px solid var(--color-tertiary);
  border-radius: 50%;
  color: var(--color-tertiary);
  font-size: 24px;
}

.graftivo-gd-upload-drop strong {
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 15px;
}

.graftivo-gd-upload-drop small,
.graftivo-gd-upload-drop p {
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.graftivo-gd-upload-drop .graftivo-gd-panel-primary {
  margin-top: var(--space-md);
}

.graftivo-gd-svg-import,
.graftivo-gd-stock-photos {
  display: grid;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  gap: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.graftivo-gd-svg-import .graftivo-gd-field {
  margin-top: 0;
}

.graftivo-gd-svg-import p,
.graftivo-gd-stock-photos > p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.graftivo-gd-stock-photos h3 {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 16px;
}

.graftivo-gd-stock-search {
  display: grid;
  gap: var(--space-sm);
}

.graftivo-gd-stock-search input {
  width: 100%;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  font-size: 16px;
}

.graftivo-gd-stock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-sm);
}

.graftivo-gd-stock-card {
  min-width: 0;
  margin: 0;
}

.graftivo-gd-stock-image {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-alt);
  cursor: pointer;
}

.graftivo-gd-stock-image:hover,
.graftivo-gd-stock-image:focus-visible {
  border-color: var(--color-tertiary);
}

.graftivo-gd-stock-image:disabled {
  cursor: wait;
  opacity: .6;
}

.graftivo-gd-stock-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.graftivo-gd-stock-card p {
  margin: 6px 0 0;
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.45;
}

.graftivo-gd-stock-card a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.graftivo-gd-stock-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-secondary);
  font-size: 11px;
}

.graftivo-gd-stock-pagination[hidden] {
  display: none;
}

.graftivo-gd-stock-pagination .graftivo-gd-tool-btn {
  min-height: 38px;
  padding: 6px;
  font-size: 11px;
}

.graftivo-designer-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(color-mix(in srgb, var(--color-primary) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 4%, transparent) 1px, transparent 1px),
    var(--color-bg-alt);
  background-size: 24px 24px;
}

.graftivo-designer-canvas-viewport {
  position: absolute;
  inset: 0;
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 40px 56px 74px;
  align-items: center;
  justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
  cursor: grab;
}

.graftivo-designer-canvas-viewport.is-panning,
.graftivo-designer-canvas-viewport.is-panning * {
  cursor: grabbing !important;
  user-select: none;
}

.graftivo-designer-zoom-control {
  position: absolute;
  z-index: 30;
  right: 18px;
  bottom: 76px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg-base) 94%, transparent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.graftivo-designer-zoom-control button {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-family: var(--font-family-body);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.graftivo-designer-zoom-control button:hover,
.graftivo-designer-zoom-control button:focus-visible {
  border-color: var(--color-tertiary);
  background: var(--color-bg-base);
}

.graftivo-designer-zoom-control span {
  min-width: 44px;
  color: var(--color-primary);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}

#graftivo-gd-canvas-holder {
  flex: 0 0 auto;
  line-height: 0;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

/* The worktable is the transparent, grid-backed frame. A photo mockup is a
   separate, non-interactive image inside it; Fabric owns only the editable
   artwork canvas above that image. */
.graftivo-gd-workspace {
  position: relative;
  flex: 0 0 auto;
  line-height: 0;
  background: transparent;
}

.graftivo-gd-mockup-layer {
  position: absolute;
  z-index: 0;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.graftivo-gd-workspace .canvas-container {
  position: absolute !important;
  z-index: 1;
  top: 0;
  left: 0;
}

#graftivo-gd-canvas-holder.graftivo-gd-canvas-holder--mockup {
  box-shadow: none;
}

.graftivo-designer-stage .canvas-container {
  background: var(--color-bg-base);
}

.graftivo-designer-stage .canvas-container.graftivo-gd-canvas-container--mockup {
  background: transparent;
}

/* Bleed/trim guides: plain DOM overlays (not canvas strokes) inside .canvas-container,
   positioned in JS (editor.js addGuides()). A canvas stroke rides the same zoom
   transform as everything else on the canvas, so under fractional zoom its
   antialiasing lands on a different sub-pixel per edge — two sides render crisp,
   two render blurry, with no relation to the configured strokeWidth. A CSS border
   is resolved by the browser's own box model, not the canvas, so it is always
   identical on all 4 sides regardless of zoom. */
.graftivo-gd-guide {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
}

.graftivo-gd-guide-bleed {
  border: 1.5px solid var(--graftivo-gd-guide-bleed);
}

.graftivo-gd-guide-trim {
  border: 2px dashed var(--graftivo-gd-guide-trim);
}

/* Fijo abajo del stage, lejos de la contextbar (que vive arriba) — así el
   canvas nunca necesita moverse cuando la contextbar aparece/desaparece. */
.graftivo-designer-tabs {
  position: absolute;
  z-index: 20;
  bottom: 14px;
  left: 50%;
  display: flex;
  max-width: calc(100% - 32px);
  padding: 3px;
  gap: 2px;
  transform: translateX(-50%);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-base) 78%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 6%, transparent);
  overflow-x: auto;
  opacity: .88;
  transition: opacity .15s ease;
}

.graftivo-designer-tabs:hover,
.graftivo-designer-tabs:focus-within {
  opacity: 1;
}

.graftivo-designer-tabs button {
  min-height: 26px;
  padding: 4px 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-family-headings);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.graftivo-designer-tabs button.is-active {
  background: var(--color-primary);
  color: var(--color-bg-base);
}

.graftivo-designer-warning-stack {
  position: absolute;
  z-index: 25;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.graftivo-designer-warning {
  max-width: 280px;
  padding: 10px 14px;
  border-left: 3px solid var(--color-highlight);
  background: var(--color-bg-base);
  color: var(--color-text-secondary);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 10%, transparent);
  font-size: 12px;
}

.graftivo-designer-embroidery-guidance {
  position: absolute;
  z-index: 24;
  top: 56px;
  right: 18px;
  max-width: 320px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-tertiary);
  background: var(--color-bg-base);
  color: var(--color-text-secondary);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 10%, transparent);
  font-size: 12px;
}

.graftivo-designer-embroidery-guidance p { margin: 0 0 var(--space-sm); }
.graftivo-designer-embroidery-guidance strong { color: var(--color-primary); }
.graftivo-designer-embroidery-color-warning,
.graftivo-designer-embroidery-image-warning { color: var(--color-primary); font-weight: 700; }
.graftivo-designer-embroidery-guidance [hidden] { display: none; }

@media (max-width: 782px) {
  .graftivo-designer-embroidery-guidance {
    position: relative;
    top: auto;
    right: auto;
    max-width: none;
    margin: var(--space-sm) var(--space-md) 0;
  }
}

.graftivo-designer-mobile-tools,
.graftivo-designer-viewport-notice {
  display: none;
}

.graftivo-designer-error {
  align-self: center;
  margin: auto;
  padding: var(--space-2xl);
  color: var(--color-text);
  font-size: 16px;
  text-align: center;
}

.graftivo-designer-body button:focus-visible,
.graftivo-designer-body a:focus-visible,
.graftivo-designer-body input:focus-visible,
.graftivo-designer-body select:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  #graftivo-designer-app {
    --graftivo-designer-sidebar-width: 324px;
  }

  .graftivo-designer-topbar {
    grid-template-columns: 256px auto minmax(140px, 1fr) auto auto;
  }

  .graftivo-designer-workspace {
    grid-template-columns: 74px 250px minmax(0, 1fr);
  }

  .graftivo-designer-brand {
    padding-inline: var(--space-md);
  }
}

@media (max-width: 880px) {
  #graftivo-designer-app {
    --graftivo-designer-sidebar-width: 0px;
  }

  #graftivo-designer-app {
    grid-template-rows: 60px minmax(0, 1fr) 70px;
  }

  .graftivo-designer-topbar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }

  .graftivo-designer-brand {
    width: 54px;
    padding: 0 10px;
    border-right: 0;
  }

  .graftivo-designer-brand-arrow {
    width: 34px;
    height: 34px;
  }

  .graftivo-designer-wordmark {
    display: none;
  }

  .graftivo-designer-history {
    padding: 0;
  }

  .graftivo-designer-history button {
    min-width: 40px;
    padding: 6px;
  }

  .graftivo-designer-history button small,
  .graftivo-designer-document-status {
    display: none;
  }

  .graftivo-designer-document {
    padding: 0 8px;
    text-align: left;
  }

  .graftivo-designer-document .graftivo-gd-title {
    font-size: 12px;
  }

  .graftivo-designer-product-option {
    position: absolute;
    z-index: 30;
    top: 72px;
    right: 12px;
    padding: 0;
  }

  .graftivo-designer-product-option select {
    width: min(180px, 48vw);
    border-color: var(--color-border);
    background: var(--color-bg-base);
    color: var(--color-primary);
  }

  .graftivo-gd-primary-btn {
    width: 48px;
    min-width: 48px;
    margin-right: 6px;
    padding: 8px;
    gap: 0;
    font-size: 0;
  }

  .graftivo-gd-primary-btn span {
    font-size: 19px;
  }

  .graftivo-designer-workspace {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
  }

  .graftivo-designer-tool-rail {
    display: none;
  }

  .graftivo-designer-context {
    position: fixed;
    z-index: 70;
    right: 0;
    bottom: 70px;
    left: 0;
    display: grid;
    width: 100%;
    max-height: min(62dvh, 520px);
    transform: translateY(calc(100% + 80px));
    border-top: 1px solid var(--color-border);
    border-right: 0;
    box-shadow: 0 -22px 56px color-mix(in srgb, var(--color-primary) 18%, transparent);
    transition: transform .28s ease;
  }

  .graftivo-designer-context.is-open {
    transform: translateY(0);
  }

  .graftivo-designer-context-head {
    min-height: 70px;
    padding: 14px var(--space-lg);
  }

  .graftivo-designer-context-head button {
    display: grid;
    place-items: center;
  }

  .graftivo-designer-context-scroll {
    padding: var(--space-lg);
  }

  .graftivo-designer-stage {
    grid-column: 1;
  }

  .graftivo-designer-canvas-viewport {
    padding: 70px 18px 36px;
  }

  /* En móvil no hay espacio abajo (mobile-tools ocupa esa franja): vuelve
     arriba, pero más chico y discreto que antes para no competir con el diseño. */
  .graftivo-designer-tabs {
    top: 10px;
    bottom: auto;
    padding: 2px;
    max-width: calc(100% - 24px);
  }

  .graftivo-designer-tabs button {
    min-height: 24px;
    padding: 3px 9px;
    font-size: 10px;
  }

  .graftivo-designer-warning-stack {
    right: 10px;
    bottom: 10px;
    left: 10px;
    align-items: stretch;
  }

  .graftivo-designer-warning {
    max-width: none;
  }

  .graftivo-designer-mobile-tools {
    position: relative;
    z-index: 75;
    display: grid;
    grid-row: 3;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid color-mix(in srgb, var(--color-bg-base) 14%, transparent);
    background: var(--color-primary);
    overflow-x: auto;
  }

  .graftivo-designer-mobile-tools .graftivo-designer-tool-tab {
    min-height: 70px;
    padding: 7px 2px;
    border-top: 3px solid transparent;
    border-left: 0;
    font-size: 8px;
  }

  .graftivo-designer-mobile-tools .graftivo-designer-tool-tab.is-active,
  .graftivo-designer-mobile-tools .graftivo-designer-tool-tab:hover,
  .graftivo-designer-mobile-tools .graftivo-designer-tool-tab:focus-visible {
    border-top-color: var(--color-highlight);
    border-left-color: transparent;
  }

  .graftivo-designer-mobile-tools .graftivo-designer-tool-icon {
    font-size: 19px;
  }
}

@media (max-width: 420px) {
  .graftivo-designer-history button {
    min-width: 36px;
  }

  .graftivo-designer-document .graftivo-gd-title {
    font-size: 11px;
  }

  .graftivo-gd-panel-grid,
  .graftivo-gd-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-height: 480px) {
  .graftivo-designer-topbar,
  .graftivo-designer-workspace,
  .graftivo-designer-mobile-tools {
    display: none;
  }

  #graftivo-designer-app {
    display: grid;
    grid-template-rows: 1fr;
  }

  .graftivo-designer-viewport-notice {
    display: grid;
    max-width: 420px;
    margin: auto;
    padding: var(--space-xl);
    place-items: center;
    gap: var(--space-md);
    color: var(--color-text-secondary);
    text-align: center;
  }

  .graftivo-designer-viewport-notice strong {
    color: var(--color-primary);
    font-family: var(--font-family-headings);
    font-size: 24px;
  }

  .graftivo-designer-viewport-notice a {
    color: var(--color-secondary);
    font-size: 16px;
    font-weight: 700;
  }
}

@media (prefers-reduced-motion: reduce) {
  .graftivo-designer-context,
  .graftivo-designer-brand-arrow,
  .graftivo-gd-primary-btn {
    transition: none;
  }
}

/* Modal on product pages, centered fallback on direct URLs. */
html.graftivo-designer-dialog-open {
  overflow: hidden;
}

/* Selector ligero para productos variables: una opción WooCommerce antes del flujo de diseño. */
/* Shared by every place this option form renders (plain dimensions-only product,
   variable product with color/dropdown/list swatches, or both combined): the
   options themselves (colors, sizes, dimensions) get their own full-width row,
   Quantity + the action button share a second row. A 3-column single-row layout
   (options | quantity | button) used to squeeze column 1 down to a sliver,
   because the button's status text ("Selection ready. The final price will be
   verified...") drove the "auto" action column far wider than the button itself
   needs, stealing space no matter how the remaining two columns were sized. */
.graftivo-designer-product-options {
  display: grid;
  /* auto, not a fixed px value: the first column holds either a swatch/select
     control (stretches to fill it) or Blocksy's own .quantity control, whose
     width Blocksy itself decides (100-130px depending on theme settings) — a
     hardcoded column width fights that and lets .quantity overflow into the
     action button next to it. */
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 12px;
  margin: 18px 0;
  padding: 18px 18px 36px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.graftivo-designer-product-options > .graftivo-designer-swatch-groups,
.graftivo-designer-product-options > .graftivo-designer-swatch-group,
.graftivo-designer-product-options > .graftivo-designer-dimensions-group,
.graftivo-designer-product-options > .graftivo-designer-extras-group {
  grid-column: 1 / -1;
}

.graftivo-designer-product-options label,
.graftivo-designer-product-options .graftivo-designer-extra-option {
  display: grid;
  gap: 6px;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
}

/* Positive type selector, not input:not(...) exclusions: this styling (100%
   width, 44px min-height, flat background) is only correct for the number
   fields (dimensions) and <select> dropdowns in this form. Checkbox/radio
   inputs (extra-option toggles, color swatches) and the quantity field
   (Blocksy's own woocommerce_quantity_input() markup) have their own sizing
   rules elsewhere; matching them here too, even accidentally, means whichever
   rule has higher specificity wins regardless of source order — exactly what
   broke the extra-option checkboxes previously (a stray :not(.qty) here beat
   .graftivo-designer-extra-option input's 20px size on specificity alone). */
.graftivo-designer-product-options select,
.graftivo-designer-product-options input[type="number"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  font-size: 16px;
}

.graftivo-designer-product-options .graftivo-designer-customize {
  box-sizing: border-box;
  min-height: 44px !important;
  margin: 0;
  white-space: nowrap;
}

.graftivo-designer-decoration-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.graftivo-designer-decoration-choice-label {
  font-weight: 700;
  margin: 0;
}

.graftivo-designer-decoration-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.graftivo-designer-decoration-option {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px !important;
  font-size: 13px !important;
  min-height: 0 !important;
  border: 1px solid var(--color-border) !important;
  background: rgba(var(--color-secondary-rgb), 0.08) !important;
  color: var(--color-secondary) !important;
}

.graftivo-designer-decoration-option[aria-pressed="true"] {
  background: var(--color-secondary-hover) !important;
  border-color: var(--color-secondary-hover) !important;
  color: var(--color-bg-base) !important;
}


.graftivo-designer-swatch-groups {
  display: grid;
  gap: 14px;
}

.graftivo-designer-swatch-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.graftivo-designer-swatch-group legend {
  margin-bottom: 7px;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
}

.graftivo-designer-swatch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.graftivo-designer-option-dropdown {
  width: min(100%, 320px);
  min-height: 44px;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background-color: var(--color-bg-base);
  color: var(--color-text);
  font: 600 16px/1.2 var(--font-family-body);
}

.graftivo-designer-option-dropdown:focus-visible {
  border-color: var(--color-primary);
}

.graftivo-designer-dimensions-group {
  display: grid;
  gap: 8px;
}

.graftivo-designer-dimensions-fields {
  display: flex;
  align-items: end;
  gap: 10px;
}

.graftivo-designer-dimensions-fields > label {
  /* Blocksy's base form styles put margin-bottom on every non-last label (for
     stacked layouts); here the two labels sit side by side, so it only shows up
     on the first one (Width) and throws off the align-items:end baseline. */
  margin: 0;
  flex: 1 1 130px;
}

.graftivo-designer-dimension-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
}

.graftivo-designer-dimension-input input {
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px 8px 12px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 16px;
}

.graftivo-designer-dimension-input small {
  padding: 0 12px 0 7px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.graftivo-designer-dimensions-times {
  padding-bottom: 12px;
  color: var(--color-text-secondary);
  font-weight: 800;
}

.graftivo-designer-dimensions-estimate {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
}

.graftivo-designer-dimensions-estimate strong {
  color: var(--color-primary);
}

.graftivo-designer-dimensions-estimate small {
  flex-basis: 100%;
  color: var(--color-text-secondary);
  font-size: 11px;
}

.graftivo-designer-extras-group {
  display: grid;
  gap: 14px;
}

.graftivo-designer-personalization-set {
  display: grid;
  gap: 8px;
}

.graftivo-designer-personalization-label {
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 800;
}

.graftivo-designer-extras-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.graftivo-designer-product-options .graftivo-designer-extra-option {
  display: flex;
  flex: 0 1 auto;
  min-width: 140px;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  cursor: pointer;
}

.graftivo-designer-product-options .graftivo-designer-extra-option:has(input:checked) {
  border-color: var(--color-secondary);
  box-shadow: inset 3px 0 0 var(--color-secondary);
}

.graftivo-designer-product-options .graftivo-designer-extra-option--included {
  cursor: default;
  border-color: var(--color-secondary);
  background: linear-gradient(135deg, rgba(var(--color-secondary-rgb), 0.14), rgba(var(--color-secondary-rgb), 0.03));
  box-shadow: inset 3px 0 0 var(--color-secondary);
}

.graftivo-designer-product-options .graftivo-designer-extra-option input {
  width: 20px;
  min-height: 20px;
  flex: 0 0 20px;
  accent-color: var(--color-secondary);
}

.graftivo-designer-extra-option > span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.graftivo-designer-extra-option small {
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.graftivo-designer-extras-estimate {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
}

.graftivo-designer-extras-estimate strong { color: var(--color-primary); }
.graftivo-designer-extras-estimate small { flex-basis: 100%; color: var(--color-text-secondary); font-size: 11px; }

.graftivo-designer-swatch {
  appearance: none;
  display: inline-flex;
  min-height: 38px;
  margin: 0;
  padding: 7px 10px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  font: 700 14px/1 var(--font-family-body);
  cursor: pointer;
}

.graftivo-designer-swatch:hover:not(:disabled),
.graftivo-designer-swatch:focus-visible,
.graftivo-designer-swatch.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-bg-base);
}

.graftivo-designer-swatch:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.graftivo-designer-swatch--color {
  position: relative;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--graftivo-swatch-color, var(--color-bg-alt));
}

.graftivo-designer-swatch--color:hover:not(:disabled),
.graftivo-designer-swatch--color:focus-visible,
.graftivo-designer-swatch--color:checked,
.graftivo-designer-swatch--color.is-selected {
  background: var(--graftivo-swatch-color, var(--color-bg-alt));
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-primary);
}

.graftivo-color-picker { position: relative; display: inline-block; }

.graftivo-color-picker-swatch {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
}

.graftivo-color-picker-popover {
  position: fixed;
  z-index: 999999;
  width: 220px;
  max-width: calc(100vw - 16px);
  padding: 12px;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(27, 45, 92, 0.13);
  box-sizing: border-box;
}

.graftivo-color-picker-sv {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 6px;
  margin-bottom: 10px;
  cursor: crosshair;
  touch-action: none;
}

.graftivo-color-picker-sv-thumb {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.graftivo-color-picker-hue {
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 7px;
  margin-bottom: 12px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
  touch-action: none;
}

.graftivo-color-picker-hue-thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.graftivo-color-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.graftivo-color-picker-cell {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
}

.graftivo-color-picker-hex-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.graftivo-color-picker-hex-preview {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.graftivo-color-picker-hex-input {
  flex: 1;
  min-height: 44px;
  font-size: 16px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  box-sizing: border-box;
}

.graftivo-designer-quantity {
  align-self: start;
}

/* Blocksy sizes its own .quantity control from this custom property
   (height: var(--quantity-height, 55px) in its compiled CSS) — setting it
   here, instead of matching it from our side with a hardcoded height on the
   button, uses the theme's own extension point so the control renders at our
   standard 44px control height directly, with nothing to keep in sync by hand. */
.graftivo-designer-quantity .quantity {
  --quantity-height: 44px;
}

/* Spans the full row by default so the action button isn't squeezed into the
   narrow quantity column on products where WooCommerce hides the quantity
   field entirely (min===max purchase quantity — e.g. a variation with only
   1 unit in stock). When quantity *is* rendered immediately before it, it
   falls back to normal grid auto-placement (its usual second column). */
.graftivo-designer-product-options-action {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
  align-self: start;
}

.graftivo-designer-quantity + .graftivo-designer-product-options-action {
  grid-column: auto;
}

.graftivo-designer-product-options-action::before {
  content: "";
  height: 21px;
}

/* Sibling of .graftivo-designer-product-options-action, spanning the full row
   width — nesting it inside the button's own div confined it to just the
   button's column, wrapping the copy across multiple lines on mobile.
   margin-top pulls it up against the button; -15px (found empirically, not
   derived from the 12px row-gap — grid row-gap and a negative margin on the
   item inside it don't cancel out 1:1) reads as tightly attached without
   touching the button in any of the four render paths (simple, dimensions,
   extras, swatch-builder) at both desktop and mobile widths. */
.graftivo-designer-product-options-status {
  grid-column: 1 / -1;
  margin: -15px 0 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}

@media (max-width: 689px) {
  /* Blocksy narrows its own native .quantity control from 130px to 100px at
     this width (confirmed against a plain, non-Designer product page in the
     same breakpoint) via its own scoped responsive CSS — but that CSS
     targets the native single-product form context, not this plugin's own
     wrapper, so ours stayed at the 130px desktop width without this. Matches
     Blocksy's real mobile value instead of guessing one. The outer grid's
     `grid-template-columns: auto 1fr` (desktop rule, applies here unchanged)
     already sizes the column to whatever this resolves to — no separate
     mobile column override needed. */
  .graftivo-designer-quantity .quantity {
    --quantity-width: 100px;
  }

  .graftivo-designer-dimensions-fields {
    flex-wrap: wrap;
  }
}

.graftivo-designer-choice-dialog {
  inset: 0;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.graftivo-designer-choice-dialog::backdrop {
  background: var(--color-bg-alt);
}

.graftivo-designer-choice-shell {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  box-shadow: 0 28px 80px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.graftivo-designer-choice-dialog-inner {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(72px, 10vh, 120px) clamp(24px, 5vw, 72px);
  place-items: center;
  overflow-y: auto;
  background: var(--color-bg-alt);
  overscroll-behavior: contain;
}

.graftivo-designer-choice-dialog-inner .graftivo-designer-choice-form {
  width: min(960px, 100%);
}

.graftivo-designer-choice-close {
  position: fixed;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font: 400 28px/1 var(--font-family-body);
  cursor: pointer;
}

.graftivo-designer-choice-close:hover,
.graftivo-designer-choice-close:focus-visible {
  background: var(--color-primary);
  color: var(--color-bg-base);
}

.graftivo-designer-choice-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--color-border);
}

.graftivo-designer-choice-context-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
}

.graftivo-designer-choice-form > .graftivo-designer-choice-context .graftivo-designer-swatch-groups {
  width: 100%;
  flex-basis: 100%;
  margin-top: var(--space-sm);
}

.graftivo-designer-choice-variation-summary,
.graftivo-designer-choice-option-status {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.graftivo-designer-choice-variation-summary {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.graftivo-designer-choice-option-status {
  align-self: center;
}

.graftivo-designer-choice-product-copy strong {
  display: block;
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 16px;
  line-height: 1.3;
}

.graftivo-designer-choice-context .graftivo-designer-choice-fields select,
.graftivo-designer-choice-context .graftivo-designer-choice-fields input {
  min-height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 16px;
}

/* Especificidad suficiente frente a Blocksy; evita auto-zoom iOS. */
.graftivo-designer-choice-form .graftivo-designer-choice-fields input,
.graftivo-designer-choice-form .graftivo-designer-choice-fields select {
  font-size: 16px;
}

.graftivo-designer-choice-context .graftivo-designer-choice-fields input {
  width: 72px;
}

.graftivo-designer-choice-grid {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.graftivo-designer-choice-form .graftivo-designer-choice-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 24px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 18px;
  min-height: 150px;
  padding: 0 24px 0 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  color: var(--color-primary);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.graftivo-designer-choice-form .graftivo-designer-choice-card:hover,
.graftivo-designer-choice-form .graftivo-designer-choice-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-tertiary);
  background: var(--color-bg-base);
  color: var(--color-primary);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.graftivo-designer-choice-form .graftivo-designer-choice-card:disabled {
  transform: none;
  cursor: not-allowed;
  opacity: .48;
  box-shadow: none;
}

.graftivo-designer-choice-card-editor .graftivo-designer-choice-icon {
  background: color-mix(in srgb, var(--color-highlight) 70%, var(--color-bg-base));
}

.graftivo-designer-choice-card-upload .graftivo-designer-choice-icon {
  background: color-mix(in srgb, var(--color-tertiary) 24%, var(--color-bg-base));
}

.graftivo-designer-choice-icon {
  align-self: stretch;
  width: 86px;
  height: auto;
  min-height: 148px;
  margin: 0;
  border: 0;
}

.graftivo-designer-choice-icon svg {
  width: 38px;
  height: 38px;
}

.graftivo-designer-choice-card-copy {
  align-self: center;
}

.graftivo-designer-choice-card-copy strong {
  margin-bottom: 8px;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.graftivo-designer-choice-card-copy small {
  position: relative;
  padding-left: 12px;
  font-size: 13px;
  line-height: 1.45;
  opacity: .76;
}

.graftivo-designer-choice-card-copy small::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 0;
  width: 5px;
  height: 1px;
  background: currentColor;
}

.graftivo-designer-choice-arrow {
  color: var(--color-tertiary);
  font-size: 24px;
  transition: transform .2s ease;
}

.graftivo-designer-choice-card:hover .graftivo-designer-choice-arrow,
.graftivo-designer-choice-card:focus-visible .graftivo-designer-choice-arrow {
  transform: translateX(4px);
}

.graftivo-designer-choice-page {
  position: relative;
  display: grid;
  min-height: 72vh;
  place-items: center;
  padding: 48px 24px;
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-alt));
}

/* Standalone choose-step (no theme header/footer): one flat white surface,
   full viewport height, instead of a tinted section floating between two
   different page backgrounds. */
body.graftivo-designer-choice-standalone,
body.graftivo-designer-choice-standalone .graftivo-designer-choice-page {
  min-height: 100dvh;
  background: var(--color-bg-base);
}

body.graftivo-designer-choice-standalone .graftivo-designer-choice-shell {
  border: 0;
  box-shadow: none;
}

body.graftivo-designer-choice-standalone .graftivo-designer-choice-page > .graftivo-designer-choice-back {
  position: absolute;
  z-index: 2;
  top: var(--space-lg);
  left: var(--space-lg);
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 8%, transparent);
  transition: box-shadow .2s ease, transform .2s ease;
}

body.graftivo-designer-choice-standalone .graftivo-designer-choice-page > .graftivo-designer-choice-back:hover,
body.graftivo-designer-choice-standalone .graftivo-designer-choice-page > .graftivo-designer-choice-back:focus-visible {
  box-shadow: 0 14px 32px color-mix(in srgb, var(--color-primary) 14%, transparent);
  transform: translateY(-3px);
}

@media (max-width: 760px) {
  body.graftivo-designer-choice-standalone .graftivo-designer-choice-page > .graftivo-designer-choice-back {
    top: var(--space-md);
    left: var(--space-md);
  }
}

.graftivo-designer-choice-page .graftivo-designer-choice-hero {
  width: min(960px, 100%);
  padding: 0;
  overflow: visible;
}

.graftivo-designer-choice-page .graftivo-designer-choice-hero::before {
  display: none;
}

.graftivo-designer-choice-shell .graftivo-designer-choice-back {
  margin-bottom: 18px;
}

@media (max-width: 760px) {
  .graftivo-designer-choice-dialog-inner {
    min-height: 100dvh;
    padding: 68px 16px 24px;
  }

  .graftivo-designer-choice-context .graftivo-designer-choice-fields {
    flex-direction: row;
  }

  .graftivo-designer-choice-context .graftivo-designer-choice-fields label {
    width: auto;
  }

  .graftivo-designer-choice-context .graftivo-designer-choice-fields label:first-child {
    flex: 1;
  }

  .graftivo-designer-choice-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .graftivo-designer-choice-form .graftivo-designer-choice-card {
    grid-template-columns: 68px minmax(0, 1fr) 20px;
    gap: 14px;
    min-height: 116px;
    padding-right: 16px;
  }

  .graftivo-designer-choice-icon {
    width: 68px;
    min-height: 114px;
  }

  .graftivo-designer-choice-card-copy strong {
    font-size: 17px;
  }

  .graftivo-designer-choice-card-copy small {
    font-size: 12px;
  }
}

/* ==========================================================================
   Base Structure & Layouts
   ========================================================================== */

.graftivo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}

/* Base subtle grid background lines (GitHub Style) */
.graftivo-bg-grid {
  background-size: 48px 48px;
  background-image: 
    linear-gradient(to right, rgba(228, 228, 231, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(228, 228, 231, 0.15) 1px, transparent 1px);
  position: relative;
}

/* Thin upper/lower border separating blocks */
.graftivo-bg-grid::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 1px;
  background: var(--color-border);
}

.graftivo-bg-grid::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 1px;
  background: var(--color-border);
}

/* Moving/Spotlight illuminated overlay grid lines (Now containing subtle vertical grid waves) */
.graftivo-grid-glow {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1; /* Colocado en el fondo detrás de las letras */
  overflow: hidden;
  
  /* Strictly mask the container so waves illuminate ONLY the 1.2px grid lines themselves */
  mask-image: 
    linear-gradient(to right, black 1.2px, transparent 1.2px),
    linear-gradient(to bottom, black 1.2px, transparent 1.2px);
  mask-size: 48px 48px;
  mask-repeat: repeat;
  
  -webkit-mask-image: 
    linear-gradient(to right, black 1.2px, transparent 1.2px),
    linear-gradient(to bottom, black 1.2px, transparent 1.2px);
  -webkit-mask-size: 48px 48px;
  -webkit-mask-repeat: repeat;
}

/* --- SUBTLE VERTICAL GRID WAVE ANIMATION --- */
.grid-wave {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Relative to viewport (not a fixed px) so the band keeps the same
     proportion of the hero on any screen: a narrow sweeping band on mobile
     instead of a flash covering the whole width, and still visible (not a
     thin sliver) on ultra-wide monitors. */
  width: clamp(220px, 28vw, 420px);
  pointer-events: none;
  opacity: 0;

  /* Signature glow palette (matches feature-card/popup/chat rings): blue -> teal -> gold */
  background-image:
    radial-gradient(circle at 30% 40%, rgba(var(--color-tertiary-rgb), 0.45) 0%, transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(var(--color-secondary-rgb), 0.45) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(var(--color-highlight-rgb), 0.35) 0%, transparent 50%);

  /* Seamless fade at left and right edges to prevent hard linear cuts */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);

  animation: sweepWaveSlow 28s infinite linear;
}

/* Staggered Waves: one after another with absolute quiet pauses */
.wave-first {
  animation-delay: 0s;
}

.wave-second {
  animation-delay: 14s;
}

@media (prefers-reduced-motion: reduce) {
  .grid-wave {
    animation: none;
    opacity: 0;
  }
}

/* Majestic slow movement: 10 seconds of diagonal horizontal glide + 18 seconds of absolute quiet */
@keyframes sweepWaveSlow {
  0% {
    left: -400px;
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  35.7% {
    left: 100%;
    opacity: 0;
  }
  35.701%, 100% {
    left: 100%;
    opacity: 0;
  }
}

/* ==========================================================================
   SECTION 1: HERO
   ========================================================================== */

.graftivo-hero {
  padding: 120px 0;
  background-color: var(--color-bg-base);
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.graftivo-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}

.graftivo-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 3; /* Traer el texto al frente, por encima de las ondas y cuadrícula */
}

.graftivo-badge {
  background-color: rgba(47, 143, 131, 0.08);
  border: 1px solid rgba(47, 143, 131, 0.2);
  color: var(--color-tertiary);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.graftivo-hero-title {
  font-family: var(--font-family-headings);
  font-size: clamp(32px, 6vw, 54px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-primary);
  letter-spacing: -0.025em;
  margin: 0 0 20px 0;
}

.graftivo-hero-description {
  font-family: var(--font-family-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 36px 0;
  max-width: 540px;
}

.graftivo-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Premium Buttons */
.graftivo-btn-primary {
  background-color: var(--color-secondary);
  color: var(--color-bg-base) !important;
  font-family: var(--font-family-body);
  font-size: 15px;
  font-weight: 500;
  border-radius: 6px;
  padding: 12px 28px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.graftivo-btn-primary:hover {
  background-color: var(--color-secondary-hover);
  box-shadow: 0 0 16px rgba(26, 115, 232, 0.3);
  transform: translateY(-1px);
}

.graftivo-btn-primary--disabled {
  pointer-events: none;
  user-select: none;
}

.graftivo-btn-secondary {
  background-color: var(--color-bg-base);
  color: var(--color-primary) !important;
  font-family: var(--font-family-body);
  font-size: 15px;
  font-weight: 500;
  border-radius: 6px;
  padding: 12px 28px;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.graftivo-btn-secondary:hover {
  border-color: var(--color-border-hover);
  background-color: var(--color-bg-alt);
  transform: translateY(-1px);
}

/* ==========================================================================
   Hero Visual Split Illustration & Floating Shadow
   ========================================================================== */

.graftivo-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
}

.graftivo-split-illustration-container {
  position: relative;
  width: 440px;
  height: 440px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 48px rgba(27, 45, 92, 0.06);
  background: var(--color-bg-base);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: floatIllustration 5s infinite ease-in-out;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.graftivo-split-illustration-container:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 30px 60px rgba(27, 45, 92, 0.1);
  border-color: var(--color-tertiary);
}

.graftivo-split-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes floatIllustration {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ==========================================================================
   Common Section Headers
   ========================================================================== */

.graftivo-section-border {
  border-top: 1px solid var(--color-border);
}

.graftivo-section-header {
  text-align: center;
  margin-bottom: 60px;
  padding-top: 80px;
}

.graftivo-section-tag {
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-tertiary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}

.graftivo-section-title {
  font-family: var(--font-family-headings);
  font-size: 38px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
}

.graftivo-section-subtitle {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* ==========================================================================
   SECTION 2: FEATURES GRID
   ========================================================================== */

.graftivo-features {
  padding-bottom: 100px;
  background-color: var(--color-bg-base);
}

.graftivo-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.graftivo-feature-card {
  position: relative;
  isolation: isolate;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--graftivo-card-radius);
  padding: 32px 24px;
  box-shadow: var(--graftivo-card-shadow-rest);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Two blueprint trails visit the cards in sequence, one card at a time —
   same azul/teal/dorado palette and ~4s rotation speed as the popup and chat
   button's glow rings (see changelog 2026-09-08), just traced as a thin
   comet-tail around the card border instead of a halo, so it doesn't cover
   the card's own content. */
@property --graftivo-feature-scan-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.graftivo-feature-card::before,
.graftivo-feature-card::after {
  --graftivo-feature-scan-origin: 0deg;
  content: "";
  position: absolute;
  inset: calc(var(--graftivo-feature-scan-width) * -1);
  z-index: 2;
  padding: var(--graftivo-feature-scan-width);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    from calc(var(--graftivo-feature-scan-angle) + var(--graftivo-feature-scan-origin)),
    transparent 0deg 266deg,
    rgba(var(--color-secondary-rgb), 0.5) 278deg,
    rgba(var(--color-tertiary-rgb), 0.6) 306deg,
    rgba(var(--color-highlight-rgb), 0.85) 337deg,
    rgba(var(--color-tertiary-rgb), 0.15) 354deg,
    transparent 358deg 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 3px rgba(var(--color-highlight-rgb), 0.25));
  animation: graftivo-feature-border-scan 24s ease-in-out infinite both;
  animation-delay: var(--graftivo-feature-scan-delay, 0s);
}

.graftivo-feature-card::before {
  --graftivo-feature-scan-origin: 180deg;
  animation-name: graftivo-feature-border-scan-reverse;
}

.graftivo-feature-card:nth-child(2) {
  --graftivo-feature-scan-delay: 6s;
}

.graftivo-feature-card:nth-child(3) {
  --graftivo-feature-scan-delay: 12s;
}

.graftivo-feature-card:nth-child(4) {
  --graftivo-feature-scan-delay: 18s;
}

@keyframes graftivo-feature-border-scan {
  0%, 4% {
    --graftivo-feature-scan-angle: 0deg;
    opacity: 0;
  }
  5% {
    --graftivo-feature-scan-angle: 0deg;
    opacity: 1;
  }
  22% {
    --graftivo-feature-scan-angle: 360deg;
    opacity: 1;
  }
  24%, 100% {
    --graftivo-feature-scan-angle: 360deg;
    opacity: 0;
  }
}

@keyframes graftivo-feature-border-scan-reverse {
  0%, 4% {
    --graftivo-feature-scan-angle: 360deg;
    opacity: 0;
  }
  5% {
    --graftivo-feature-scan-angle: 360deg;
    opacity: 1;
  }
  22% {
    --graftivo-feature-scan-angle: 0deg;
    opacity: 1;
  }
  24%, 100% {
    --graftivo-feature-scan-angle: 0deg;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .graftivo-feature-card::before,
  .graftivo-feature-card::after {
    animation: none;
    opacity: 0;
  }
}

.graftivo-feature-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--graftivo-card-shadow-hover);
  transform: translateY(-3px);
}

.graftivo-feature-icon {
  color: var(--color-tertiary);
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
}

.graftivo-feature-title {
  font-family: var(--font-family-headings);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 12px 0;
}

.graftivo-feature-description {
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ==========================================================================
   SECTION 3: CATEGORIES GRID
   ========================================================================== */

.graftivo-categories {
  padding-bottom: 100px;
  background-color: var(--color-bg-alt);
}

.graftivo-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.graftivo-category-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--graftivo-card-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--graftivo-card-shadow-rest);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.graftivo-category-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--graftivo-card-shadow-hover);
  transform: translateY(-3px);
}

.graftivo-category-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  flex-shrink: 0;
}

.graftivo-category-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.graftivo-category-card:hover .graftivo-category-photo {
  transform: scale(1.025);
}

.graftivo-category-badge-sale {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-highlight);
  color: var(--color-primary);
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.graftivo-category-info {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Stretches the card wrapper uniformly */
}

.graftivo-category-name {
  font-family: var(--font-family-headings);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 8px 0;
}

.graftivo-category-desc {
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 24px 0;
}

.graftivo-category-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto; /* Force push the footer to the bottom of the card */
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.graftivo-category-link {
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-tertiary);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
}

.graftivo-category-link:hover {
  color: var(--color-secondary);
  transform: translateX(3px); /* Elegant slide-right effect on hover */
}

/* ==========================================================================
   SECTION 4: WORKFLOW
   ========================================================================== */

.graftivo-process {
  padding-bottom: 100px;
  background-color: var(--color-primary);
}

/* --- OVERRIDES FOR DARK BACKGROUND (NAVY) --- */
.graftivo-process .graftivo-section-title {
  color: var(--color-bg-base);
}
.graftivo-process .graftivo-section-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

.graftivo-process-steps {
  display: none; /* Hide old block if any remains */
}

/* --- VISUAL ANIMATION PANELS --- */
.visual-panel-box {
  width: 100%;
  height: 280px;
  background: var(--color-bg-base);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 40px rgba(27, 45, 92, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* 1. Specs Panel Animation */
.specs-panel {
  flex-direction: column;
  gap: 12px;
}

.spec-toggle-item {
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  padding: 10px 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 220px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  animation: specFloat 4s infinite ease-in-out;
}

.spec-toggle-item:nth-child(2) { animation-delay: 1s; }
.spec-toggle-item:nth-child(3) { animation-delay: 2s; }

@keyframes specFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.dot-teal { width: 8px; height: 8px; border-radius: 50%; background: var(--color-tertiary); }
.dot-gold { width: 8px; height: 8px; border-radius: 50%; background: var(--color-highlight); }
.dot-blue { width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary); }

/* 2. Audit Panel Animation (Laser Scanner) */
.vector-card-preview {
  width: 200px;
  height: 140px;
  border: 1px dashed var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-bg-base);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(47,143,131,0.04);
}

.safe-margin-line {
  position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 10px;
  border: 1px solid rgba(26,115,232,0.2);
  border-radius: 4px;
}

.bleed-line-outer {
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 1px solid rgba(255,69,58,0.2);
  border-radius: 5px;
}

.audit-laser-scanner {
  position: absolute;
  left: 0; width: 100%; height: 2px;
  background: var(--color-secondary);
  box-shadow: 0 0 8px var(--color-secondary);
  animation: laserScan 2.5s infinite ease-in-out;
}

@keyframes laserScan {
  0%, 100% { top: 0%; }
  50% { top: 100%; }
}

/* 3. Mockup Panel Animation (Approval stamp) */
.mockup-proof-card {
  width: 180px;
  height: 120px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-base);
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.01);
  display: flex;
  align-items: center;
  justify-content: center;
}

.approval-stamp {
  font-family: var(--font-family-mono);
  font-size: 14px;
  font-weight: 800;
  color: #34c759;
  border: 2px solid #34c759;
  padding: 6px 12px;
  border-radius: 4px;
  transform: rotate(-12deg);
  letter-spacing: 0.05em;
  animation: stampApprove 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate;
}

@keyframes stampApprove {
  0% { transform: rotate(-12deg) scale(0.9); opacity: 0.8; }
  100% { transform: rotate(-12deg) scale(1.05); opacity: 1; }
}

/* 4. Print Panel Animation (Rotating rollers) */
.cmyk-roller-container {
  display: flex;
  gap: 16px;
}

.roller {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--color-bg-base);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  animation: spinRoller 3s linear infinite;
}

.roller-c { background: #00aeef; }
.roller-m { background: #ec008c; }
.roller-y { background: #fff200; }
.roller-k { background: #231f20; }

@keyframes spinRoller {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 5. Quality & Packaging Panel Animation */
.qc-pack-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.qc-box-card {
  width: 140px;
  height: 100px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-base);
  position: relative;
  box-shadow: 0 10px 25px rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: boxFloat 3s infinite ease-in-out;
}

.qc-seal {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #34c759, var(--color-tertiary));
  border-radius: 50%;
  color: var(--color-bg-base);
  font-family: var(--font-family-mono);
  font-size: 8px;
  font-weight: 800;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(52,199,89,0.3);
  border: 2px solid var(--color-bg-base);
  transform: rotate(15deg);
  animation: sealPulse 2s infinite ease-in-out;
}

.qc-ribbon {
  width: 100%;
  height: 16px;
  background: var(--color-secondary);
  position: absolute;
  top: 42px;
  left: 0;
  opacity: 0.15;
}

@keyframes boxFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes sealPulse {
  0%, 100% { transform: rotate(15deg) scale(1); }
  50% { transform: rotate(15deg) scale(1.08); }
}

/* --- PREMIUM ANIMATED SHIPPING BOX (STAGE 04) --- */
.ship-animate-container {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shipCycle 6s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

/* Base box styles */
.ship-box-wrapper-new {
  position: relative;
  width: 110px;
  height: 110px;
}

/* Isometric shapes styling */
.ship-box-svg-new {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Flaps and lids animations */
.ship-flap-left {
  transform-origin: 50px 65px;
  animation: flapLeftClose 6s infinite ease-in-out;
}

.ship-flap-right {
  transform-origin: 150px 65px;
  animation: flapRightClose 6s infinite ease-in-out;
}

.ship-contents {
  animation: contentsFade 6s infinite ease-in-out;
}

.ship-tape {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: tapeSeal 6s infinite ease-in-out;
}

/* Speed lines */
.ship-speed-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-tertiary), transparent);
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  animation: speedLinesRun 6s infinite linear;
}

.ship-speed-line.l1 { top: 30%; left: -80px; width: 60px; animation-delay: 0.1s; }
.ship-speed-line.l2 { top: 50%; left: -100px; width: 80px; animation-delay: 0s; }
.ship-speed-line.l3 { top: 70%; left: -70px; width: 50px; animation-delay: 0.2s; }

/* --- KEYFRAMES FOR THE SHIPPING PROCESS --- */

/* Left flap closes */
@keyframes flapLeftClose {
  0%, 15% {
    /* Open state - stands up */
    transform: rotate(0deg) skewY(0deg) scaleY(1);
    opacity: 1;
  }
  25%, 70% {
    /* Closed flat state */
    transform: translateY(25px) rotate(-26.5deg) scaleY(0);
    opacity: 0;
  }
  85%, 100% {
    /* Returns to open */
    transform: rotate(0deg) skewY(0deg) scaleY(1);
    opacity: 1;
  }
}

/* Right flap closes */
@keyframes flapRightClose {
  0%, 15% {
    /* Open state */
    transform: rotate(0deg) skewY(0deg) scaleY(1);
    opacity: 1;
  }
  25%, 70% {
    /* Closed flat state */
    transform: translateY(25px) rotate(26.5deg) scaleY(0);
    opacity: 0;
  }
  85%, 100% {
    transform: rotate(0deg) skewY(0deg) scaleY(1);
    opacity: 1;
  }
}

/* Closed Lids fade in when flaps fold */
.ship-lid-left {
  opacity: 0;
  animation: lidLeftShow 6s infinite ease-in-out;
}
.ship-lid-right {
  opacity: 0;
  animation: lidRightShow 6s infinite ease-in-out;
}

@keyframes lidLeftShow {
  0%, 18% { opacity: 0; }
  25%, 70% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

@keyframes lidRightShow {
  0%, 18% { opacity: 0; }
  25%, 70% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

/* Contents disappear when closed */
@keyframes contentsFade {
  0%, 15% { opacity: 1; }
  22%, 72% { opacity: 0; }
  82%, 100% { opacity: 1; }
}

/* Tape seal animation */
@keyframes tapeSeal {
  0%, 28% {
    stroke-dashoffset: 60;
  }
  38%, 70% {
    stroke-dashoffset: 0;
  }
  78%, 100% {
    stroke-dashoffset: 60;
  }
}

/* The entire box's physical movement: open, close, seal, rumble, dash, instant return pop-in */
@keyframes shipCycle {
  0% {
    /* Start floating gently at center */
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  15% {
    transform: translate3d(0, -6px, 0) scale(1);
  }
  30% {
    /* Box closed and sealed, float down */
    transform: translate3d(0, 0, 0) scale(1);
  }
  42% {
    /* Rumble/vibrate before shipping */
    transform: translate3d(2px, 0, 0) scale(1.02);
  }
  44% { transform: translate3d(-2px, -1px, 0) scale(1.02); }
  46% { transform: translate3d(2px, 1px, 0) scale(1.02); }
  48% { transform: translate3d(-1px, -2px, 0) scale(1.02); opacity: 1; }
  50% {
    /* DASH FAST TO THE RIGHT! */
    transform: translate3d(280px, 0, 0) scaleX(1.3) scaleY(0.8);
    opacity: 0;
  }
  51%, 80% {
    /* Hold out of view at center (preparing to pop back in) */
    transform: translate3d(0, 0, 0) scale(0.5);
    opacity: 0;
  }
  85% {
    /* Instantly appear back at center as a tiny dot, completely invisible */
    transform: translate3d(0, 0, 0) scale(0.6);
    opacity: 0;
  }
  90% {
    /* Fade and pop in with a slight scale overshoot */
    transform: translate3d(0, 0, 0) scale(1.06);
    opacity: 1;
  }
  94% {
    /* Settle pop-in bounce */
    transform: translate3d(0, -4px, 0) scale(0.98);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

/* Speed lines rushing during the dash */
@keyframes speedLinesRun {
  0%, 42% {
    opacity: 0;
    transform: translateX(0);
  }
  46% {
    opacity: 0.8;
  }
  52% {
    opacity: 0;
    transform: translateX(180px);
  }
  53%, 100% {
    opacity: 0;
  }
}

/* ==========================================================================
   SECTION 5: TESTIMONIALS
   ========================================================================== */

.graftivo-homepage {
  /* overflow: hidden (ambos ejes), NO solo overflow-x: si el eje Y se deja en
     "visible" mientras X está en "hidden", el navegador fuerza Y a "auto" por spec
     (no puede quedar un eje visible si el otro no lo es) — esto convierte a <main>
     en su propio contenedor de scroll vertical anidado, causando doble scrollbar. */
  overflow: hidden;
  width: 100%;
}

.graftivo-testimonials {
  padding-bottom: 100px;
  background-color: var(--color-bg-alt);
}

/* --- TESTIMONIALS SLIDER --- */
.graftivo-testimonials-carousel-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
  margin-top: 40px;
  padding: 12px 0; /* Prevents hover translate-y elevation from getting clipped */
  margin-bottom: -12px;
}

.graftivo-testimonials-track {
  display: flex;
  gap: 24px;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.graftivo-testimonial-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(27, 45, 92, 0.02);
  flex: 0 0 calc(25% - 18px); /* 4 cards visible on desktop */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.graftivo-testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-tertiary);
  box-shadow: 0 10px 30px rgba(47, 143, 131, 0.05);
}

.graftivo-testimonial-stars {
  color: var(--color-highlight);
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.graftivo-testimonial-text {
  font-family: var(--font-family-body);
  font-size: 16px;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-primary);
  margin: 0 0 24px 0;
}

.graftivo-testimonial-user {
  display: flex;
  align-items: center;
}

.graftivo-user-info {
  display: flex;
  flex-direction: column;
}

.graftivo-user-name {
  font-family: var(--font-family-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
}

.graftivo-user-company {
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-tertiary);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* ==========================================================================
   SECTION 6: FAQs ACCORDIONS
   ========================================================================== */

.graftivo-faq {
  padding-bottom: 100px;
  background-color: var(--color-bg-base);
}

.graftivo-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.graftivo-faq-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-base);
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.graftivo-faq-item:hover {
  border-color: var(--color-border-hover);
}

.graftivo-faq-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-family-headings);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
}

.graftivo-faq-trigger:hover {
  background-color: var(--color-bg-alt);
}

.faq-icon {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-tertiary);
  transition: transform 0.2s ease;
}

.graftivo-faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 20px;
}

.graftivo-faq-content p {
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  padding-bottom: 16px;
  margin: 0;
}

.faq-active {
  border-color: var(--color-border-hover);
}

.faq-active .graftivo-faq-trigger {
  background-color: var(--color-bg-alt);
}

/* ==========================================================================
   SECTION 7: CTA BANNER
   ========================================================================== */

.graftivo-cta {
  background-color: #0B132B; /* Midnight Navy for a premium contrast step before the footer */
  margin: 0;                 /* No margin: sits flush against the previous section, no background gap */
  padding: 100px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  width: 100%;               /* Stretch 100% full width */
  max-width: none;           /* Remove max width restriction */
  border-radius: 0;          /* Flat edge-to-edge for cinematic transition */
}

.graftivo-cta-grid-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  z-index: 1;
  mask-image: radial-gradient(circle at center, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 90%);
}

.graftivo-cta-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.graftivo-cta-title {
  font-family: var(--font-family-headings);
  font-size: 42px;
  font-weight: 800;
  color: var(--color-bg-base);
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
  line-height: 1.15;
}

.graftivo-cta-desc {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 36px 0;
}

.graftivo-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-sec {
  background-color: transparent !important;
  color: var(--color-bg-base) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.cta-sec:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--color-bg-base) !important;
}

/* ==========================================================================
   Adaptabilidad Móvil (Responsiveness)
   ========================================================================== */

@media (max-width: 960px) {
  .graftivo-hero {
    padding: 80px 0;
  }
  
  .graftivo-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  
  .graftivo-hero-content {
    align-items: center;
  }
  
  .graftivo-hero-description {
    margin-left: auto;
    margin-right: auto;
  }
  
  .graftivo-hero-actions {
    justify-content: center;
  }
  
  .graftivo-split-illustration-container {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .graftivo-section-title {
    font-size: 30px;
  }

  .graftivo-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .graftivo-categories-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .graftivo-category-card {
    flex-direction: column;
  }

  .graftivo-category-image {
    width: 100%;
  }

  .graftivo-process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .graftivo-testimonial-card {
    flex: 0 0 calc(50% - 12px);
  }

  .graftivo-cta-title {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
  .graftivo-process-steps {
    grid-template-columns: 1fr;
  }
}

/* --- WORKFLOW SLIDER RESPONSIVENESS OVERRIDES --- */
@media (max-width: 960px) {
  .graftivo-timeline-step {
    padding: 16px;
  }
  .graftivo-timeline-step .step-name {
    font-size: 13px;
  }
  .graftivo-slide-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .graftivo-slide {
    padding: 40px 24px;
  }
  .visual-panel-box {
    height: 220px;
  }
}

@media (max-width: 600px) {
  .about-numbers-row {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .about-number-divider {
    width: 48px;
    height: 1px;
  }

  .graftivo-timeline-nav {
    grid-template-columns: repeat(2, 1fr); /* 2x2 grid for compact mobile tabs */
  }
  .graftivo-timeline-step {
    padding: 12px 8px;
    text-align: center;
    align-items: center;
  }
  .graftivo-timeline-step .step-name {
    font-size: 11px;
    margin-top: 3px;
  }
  .graftivo-timeline-step .progress-bar-bg {
    margin-top: 8px;
  }
  .graftivo-slide-content .slide-title {
    font-size: 22px;
  }
  .graftivo-slide-content .slide-text {
    font-size: 14px;
  }
  
  /* Micro-escalado para que los paneles animados quepan perfectamente en móviles */
  .production-combined-panel {
    gap: 12px !important;
    padding: 10px !important;
  }
  .production-combined-panel .vector-card-preview {
    transform: scale(0.65) !important;
    margin-bottom: -25px !important;
  }
  .production-combined-panel .cmyk-roller-container {
    transform: scale(0.65) !important;
  }
  
  .qc-box-card {
    transform: scale(0.8) !important;
  }
  
  .ship-animate-container {
    transform: scale(0.8) !important;
  }
  
  .graftivo-testimonial-card {
    flex: 0 0 100% !important; /* 1 card visible on mobile */
  }
}


/* --- MINIMALIST ZIG-ZAG TIMELINE --- */
.graftivo-vertical-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 60px;
}

/* Removed global container line to fix overshoot */

.timeline-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 120px;
  position: relative;
  z-index: 1;
}

/* Timeline connecting lines (perfect center-to-center chaining) */
.timeline-row::before {
  content: '';
  position: absolute;
  top: 50%;
  bottom: -60px; /* Extends exactly through the gap */
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-50%);
  z-index: -1;
}
.timeline-row.last-row::before {
  display: none;
}

.timeline-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 50%;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-50%);
  z-index: -1;
}
.timeline-row:first-child::after {
  display: none;
}

.timeline-content, .timeline-empty {
  flex: 0 0 calc(50% - 60px);
  width: calc(50% - 60px);
}

.timeline-content {
  display: flex;
  flex-direction: column;
}

/* Zig-Zag logic */
/* Odd rows (1, 3): text on left, align right */
.timeline-row:nth-child(odd) {
  flex-direction: row;
}
.timeline-row:nth-child(odd) .timeline-content {
  text-align: right;
  align-items: flex-end;
}

/* Even rows (2, 4): text on right, align left */
.timeline-row:nth-child(even) {
  flex-direction: row-reverse;
}
.timeline-row:nth-child(even) .timeline-content {
  text-align: left;
  align-items: flex-start;
}

/* Big Center Icon Node */
.timeline-node {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: var(--color-tertiary);
  border: 4px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bg-base);
  box-shadow: 0 4px 12px rgba(47, 143, 131, 0.2);
  z-index: 2;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.timeline-node svg {
  width: 24px;
  height: 24px;
}

/* Typography Overrides */
.timeline-content .slide-badge-num {
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-tertiary); /* Green */
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.timeline-content .slide-title {
  font-family: var(--font-family-headings);
  font-size: 26px;
  font-weight: 800;
  color: var(--color-bg-base);
  margin: 0 0 12px 0;
  letter-spacing: -0.015em;
}

.timeline-content .slide-text {
  font-family: var(--font-family-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 320px;
}

/* Mobile overrides */
@media (max-width: 960px) {
  /* Las líneas de conexión reales son .timeline-row::before/::after (no
     .graftivo-vertical-timeline::before, que no dibuja nada — ver comentario
     "Removed global container line" más arriba). En mobile el círculo se mueve
     a la izquierda (24px = mitad de sus 48px de ancho), así que la línea debe
     seguirlo ahí en vez de quedarse en el 50% del row entero (caía en medio del texto). */
  .timeline-row::before,
  .timeline-row::after {
    left: 24px;
  }

  .timeline-row {
    flex-direction: row !important;
    justify-content: flex-start;
    gap: 30px;
  }
  
  .timeline-empty {
    display: none;
  }
  
  .timeline-content {
    order: 1;
    flex: 1;
    width: auto;
    text-align: left !important;
    align-items: flex-start !important;
    padding-top: 10px;
  }
  
  .timeline-content .slide-text {
    max-width: 100%;
  }

  .timeline-node {
    order: -1;
    flex-shrink: 0;
    position: relative;
    left: 0;
    transform: none;
    width: 48px;
    height: 48px;
    margin-left: 0;
    box-sizing: border-box;
  }
  
  .timeline-node svg {
    width: 20px;
    height: 20px;
  }
}


/* --- RAY & NODE ANIMATION --- */
.timeline-ray {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 40px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--color-bg-base) 24%,
        var(--color-bg-base) 76%,
        transparent 100%
    );
    box-shadow: 0 0 10px var(--color-bg-base);
    z-index: 1;
    pointer-events: none;
    border-radius: 999px;
}

.timeline-ray::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 8px;
    height: 18px;
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom,
        transparent,
        color-mix(in srgb, var(--color-bg-base) 18%, transparent),
        transparent
    );
    filter: blur(3px);
    border-radius: 999px;
    pointer-events: none;
}

.timeline-node {
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Spinner that wraps around the border */
.timeline-node::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(transparent 70%, var(--color-bg-base) 100%);
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 0;
}

.timeline-node.node-active::before {
    opacity: 1;
    animation: spinCharge 1s linear infinite;
}

@keyframes spinCharge {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mask for the center so only the border spins */
.timeline-node::after {
    content: '';
    position: absolute;
    inset: 2px; /* Leaves a 2px gap for the spinner */
    background: var(--color-tertiary);
    border-radius: 50%;
    z-index: 1;
}

.timeline-node svg {
    position: relative;
    z-index: 2;
    transition: all 0.3s;
}

.timeline-node.node-active svg {
    stroke: var(--color-bg-base);
    filter: drop-shadow(0 0 5px var(--color-bg-base));
    animation: iconPulse 1s infinite alternate;
}

@keyframes iconPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

@media (max-width: 960px) {
  .timeline-ray {
      left: 24px;
  }
}

/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */

.graftivo-services-page {
    background-color: var(--color-bg-alt); /* Light zinc background for contrast against white bento cards */
}

/* --- Hero Services --- */
.graftivo-hero-services {
    padding: 100px 0 60px;
    background-color: var(--color-bg-base);
    background-image: 
        url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='0' cy='0' r='1.5' fill='rgba(0,0,0,0.35)'/%3E%3C/svg%3E"),
        radial-gradient(circle at 50% 50%, rgba(47, 143, 131, 0.35) 0%, transparent 75%);
    background-size: 40px 40px, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: 0 0, center center;
    text-align: center;
    position: relative;
    /* Grid is fixed now as requested */
}

.graftivo-hero-services::after {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    pointer-events: none;
    z-index: 1; /* Above the canvas overlay, below the text */
    background: linear-gradient(to bottom, var(--color-bg-base) 0%, transparent 25%, transparent 75%, var(--color-bg-base) 100%);
}

@keyframes drawShape {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeShapeOut {
    to {
        opacity: 0;
    }
}

.services-hero-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2; /* Ensures the text is always above the drawing canvas overlay */
}

/* --- Product Marquee Carousel --- */
.graftivo-product-marquee-section {
    background-color: var(--color-bg-base);
    padding: 40px 0 80px;
    overflow: hidden;
}

.graftivo-marquee-eyebrow {
    display: block;
    font-family: var(--font-family-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-tertiary);
    margin: 0 0 24px;
    position: relative;
    z-index: 2;
}

.graftivo-marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Gradient fade on edges */
.graftivo-marquee-container::before,
.graftivo-marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}
.graftivo-marquee-container::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg-base), transparent);
}
.graftivo-marquee-container::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg-base), transparent);
}

.graftivo-marquee-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: scrollMarquee 40s linear infinite;
}

.graftivo-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes scrollMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Scrolls exactly half to loop seamlessly */
}

.marquee-product-card {
    width: 260px;
    background: var(--color-bg-base);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.marquee-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    border-color: var(--color-tertiary);
}

.marquee-product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid var(--color-border);
}

.marquee-product-info {
    padding: 16px;
    text-align: center;
}

.marquee-product-info .marquee-title {
    font-family: var(--font-family-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
}

/* WooCommerce specific overrides for Infinite Marquee */
.woo-marquee-track .woocommerce {
    display: flex;
    margin: 0 !important;
}
.woo-marquee-track ul.products {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 24px;
    margin: 0 !important;
    padding: 0 !important;
}
.woo-marquee-track ul.products::before,
.woo-marquee-track ul.products::after {
    display: none !important;
}
.woo-marquee-track ul.products li.product {
    width: 260px !important;
    flex: 0 0 260px !important;
    margin: 0 !important;
    background: var(--color-bg-base);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding-bottom: 16px;
    text-align: center;
}
.woo-marquee-track ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    border-color: var(--color-tertiary);
}
.woo-marquee-track ul.products li.product img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}
.woo-marquee-track ul.products li.product h2.woocommerce-loop-product__title,
.woo-marquee-track ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-family-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    padding: 0 16px !important;
    margin: 0 0 8px 0 !important;
}
.woo-marquee-track ul.products li.product .price {
    font-size: 13px !important;
    color: var(--color-secondary) !important;
    margin-bottom: 12px !important;
    display: block;
}
.woo-marquee-track ul.products li.product .button {
    font-size: 12px !important;
    padding: 6px 16px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* --- Free Shipping Announcement Bar --- */
.graftivo-announcement-bar {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-tertiary), var(--color-secondary), var(--color-primary));
    background-size: 300% 100%;
    animation: graftivoAnnouncementShift 8s ease-in-out infinite;
    text-align: center;
    position: relative;
    z-index: 100;
}

.graftivo-announcement-text {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-family-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.graftivo-announcement-highlight {
    color: var(--color-highlight);
}

@keyframes graftivoAnnouncementShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .graftivo-announcement-bar {
        animation: none;
    }
}

@media (max-width: 600px) {
    .graftivo-announcement-text {
        font-size: 14px;
    }
}

/* --- Full-Width Dedicated Service Sections --- */
.graftivo-full-service {
    padding: 120px 0;
    position: relative;
    /* Removed overflow: hidden; because it breaks position: sticky on the children! */
}

.service-theme-light {
    background-color: var(--color-bg-base); /* White/Light */
    color: var(--color-text);
}

.service-theme-alt {
    background-color: var(--color-bg-alt); /* Light gray/zinc */
    color: var(--color-text);
}

.service-theme-dark {
    background-color: var(--color-primary); /* Navy/Dark */
    color: var(--color-bg-base);
}

/* Subtle glow for the dark section.
   NOTA: renombrada desde .graftivo-grid-glow para no colisionar con la clase
   homónima del hero (que usa mask-image para iluminar solo las líneas de la rejilla). */
.graftivo-dark-grid-glow {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    z-index: 1;
}

.graftivo-dark-grid-glow::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(47, 143, 131, 0.1) 0%, transparent 50%);
}

.full-service-header {
    max-width: 800px;
    margin-bottom: 24px;
    /* No position: relative — lets __index below anchor to the wider
       .graftivo-container instead of this centered box, so "02" sits
       at the section's corner instead of the text block's edge. */
}

.full-service-header__index {
    position: absolute;
    top: 10px;         /* Top-left corner of the section */
    left: 0;
    z-index: -1;
    font-family: var(--font-family-headings);
    font-weight: 200;
    font-size: clamp(56px, 7vw, 80px);
    line-height: 1;
    color: var(--color-bg-base);
    opacity: 0.08;
    pointer-events: none;
    white-space: nowrap;
}

.service-tag {
    display: inline-block;
    font-family: var(--font-family-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-tertiary);
    margin-bottom: 16px;
    text-transform: uppercase;
}

.service-headline {
    font-family: var(--font-family-headings);
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    line-height: 1.1;
}

.service-theme-dark .service-headline {
    color: var(--color-bg-base);
}

.service-lead {
    font-family: var(--font-family-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.service-theme-dark .service-lead {
    color: rgba(255, 255, 255, 0.7);
}

/* Sub-Product Grids */
.service-subgrid {
    display: grid;
    gap: 40px;
}

.grid-3-cols {
    grid-template-columns: repeat(3, 1fr);
}

.grid-2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.grid-1-col-centered {
    grid-template-columns: 1fr;
    max-width: 800px;
}

/* --- Sub Product Items --- */
.sub-product-title {
    font-family: var(--font-family-headings);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.sub-product-desc {
    font-family: var(--font-family-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* --- Services Footer --- */
.graftivo-services-footer {
    padding: 80px 0;
    background-color: var(--color-bg-base);
}

.services-footer-box {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 60px;
    text-align: center;
}

.services-footer-title {
    font-family: var(--font-family-headings);
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.services-footer-text {
    font-family: var(--font-family-body);
    color: var(--color-text-secondary);
    margin-bottom: 32px;
}

/* --- Animations: Typewriter --- */
.typewriter-text {
    min-height: 52px; /* Prevent layout shift while typing */
}

.typewriter-text:not(.typing-done)::after {
    content: "";
    display: inline-block;
    height: 0.85em;
    margin-left: 0.08em;
    border-left: clamp(2px, 0.055em, 3px) solid var(--color-tertiary);
    vertical-align: -0.08em;
    animation: blinkCursor 0.75s step-end infinite;
}

@keyframes blinkCursor {
    from, to { border-color: transparent }
    50% { border-color: var(--color-tertiary); }
}

/* --- Scroll-Driven Card Stack --- */
.graftivo-stack-wrapper {
    height: 325vh; /* The distance the user scrolls vertically while pinned.
       Scales with the card count in #adhesives-track so each card keeps the
       same pinned dwell time: 100vh (pinned viewport) + 150vh * (cards-1)/2,
       tuned for 3 cards, extended to 4 when Custom Lettering was added as a
       4th card (see changelog 2026-09-08). */
    position: relative;
    background-color: var(--color-primary); /* Navy/Dark */
    color: var(--color-bg-base);
}

.graftivo-stack-sticky {
    position: sticky;
    top: 0;
    height: 100vh; /* Locks to screen size */
    overflow: hidden; /* Crucial: hides the horizontal overflow */
    display: flex;
    flex-direction: column;
}

/* Blocksy's sticky header would otherwise cover the title while the card
   stack effect is active (graftivo-service.js toggles this class). */
[data-sticky] {
    transition: opacity 0.6s ease;
}
[data-sticky].graftivo-stack-hide-header {
    opacity: 0;
    pointer-events: none;
}

.graftivo-stack-area {
    position: relative;
    flex: 1;           /* Takes whatever space is left under the header,
                           and centers the stack inside just that — so the
                           gap between the lead text and the cards is never
                           left to chance regardless of copy length. */
    min-height: 0;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

/* Static caption below the stack — never moves or transforms with the
   cards, just crossfades its text to match whichever card is at front.
   Generous gap above (in .graftivo-stack-area) gives it room to breathe
   instead of reading as a glued-on label. */
.graftivo-stack-caption {
    font-family: var(--font-family-headings);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-bg-base);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    margin: 0;
}

/* Scroll-driven card stack — same model as the reference component:
   a fixed aspect-ratio stage, each card filling it exactly (absolute,
   inset 0), offset only via top%/scale/brightness per depth. */
.graftivo-stack-stage {
    position: relative;
    width: min(90vw, clamp(370px, 69.333vh, 786px));
    height: auto;
    aspect-ratio: 16 / 9;
}

.graftivo-stack-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    /* Opaco (no rgba transparente) — con fotos reales dentro, un fondo semitransparente
       dejaba traslucir la card de atrás a través de los bordes/zonas alpha del recorte
       de cada foto. Blanco porque las 3 fotos son composiciones de estudio con fondo
       claro — se funde con la imagen en vez de generar un borde navy visible.
       El fade de salida (opacity, en JS) no se ve afectado: opacity actúa sobre el
       elemento completo, sin importar si su fondo interno es sólido o transparente. */
    background-color: var(--color-bg-base);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    will-change: transform, opacity;
    /* Sin transition: transform y opacity los escribe graftivo-service.js en cada
       evento de scroll (rAF-batched), atados 1:1 al progreso — cualquier transición
       aquí competiría contra un valor en constante cambio y se sentiría pegado/trabado
       al revertir la dirección del scroll (ver changelog 2026-07-06). */
    transition: none;
}

/* Oscurece las cards en espera sin usar `filter: brightness()` — ese filter obligaba
   al navegador a re-rasterizar la foto completa en cada tick de scroll (caro con
   imágenes de 1600x900 + canal alpha). Este overlay solo anima `opacity`, una
   propiedad de compositor (GPU), igual de barata que transform. graftivo-service.js
   escribe --stack-dim (0 = sin oscurecer, hasta 0.7 = más al fondo del stack). */
.graftivo-stack-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--stack-dim, 0);
    pointer-events: none;
}

.graftivo-stack-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Sticky Split Layout --- */
.sticky-layout {
    display: flex;
    gap: 80px;
    align-items: flex-start; /* Important for sticky to work */
}

.sticky-layout.align-center {
    align-items: center;
}

.sticky-sidebar {
    flex: 0 0 40%;
    position: sticky;
    top: 120px; /* Distance from top of viewport when stuck */
}

.scroll-content {
    flex: 0 0 50%;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Space between sub-products */
}

/* --- Editorial Service Card Pattern (Apparel / Vinyl Graphics / Marketing Material) --- */
.graftivo-index-number {
    position: absolute;
    top: -70px;        /* Floats above the tag/headline instead of behind them */
    left: 0;           /* Aligned with the text column's own left edge */
    z-index: -1;
    font-family: var(--font-family-headings);
    font-weight: 200;
    font-size: clamp(56px, 7vw, 80px);
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.06;
    pointer-events: none;
    white-space: nowrap;
}

.graftivo-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.graftivo-service-grid--single {
    grid-template-columns: 1fr;
    max-width: 560px;
}

.graftivo-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: var(--graftivo-card-radius);
    padding: 32px;
    background: var(--color-bg-base);
    overflow: hidden;
    box-shadow: var(--graftivo-card-shadow-rest);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.graftivo-service-card:hover {
    border-color: var(--color-secondary);
    box-shadow: var(--graftivo-card-shadow-hover);
    transform: translateY(-3px);
}

.graftivo-service-card--coming-soon {
    padding-top: 56px;
}

.graftivo-service-card--coming-soon > *:not(.graftivo-coming-soon-banner) {
    opacity: 0.45;
    filter: grayscale(70%);
}

.graftivo-service-card--coming-soon:hover {
    border-color: var(--color-border);
    box-shadow: var(--graftivo-card-shadow-rest);
    transform: none;
}

.graftivo-coming-soon-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: var(--color-highlight);
    color: var(--color-primary);
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 0;
}

.graftivo-service-card-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--color-tertiary);
}

.graftivo-service-card-icon img,
.graftivo-service-card-icon svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.graftivo-service-card .sub-product-title {
    margin-bottom: 8px;
}

.graftivo-service-card .sub-product-desc {
    margin-bottom: 0;
}

.graftivo-service-card .graftivo-btn-primary {
    margin-top: 24px;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 960px) {
    .graftivo-full-service {
        padding: 80px 0;
    }

    .service-headline {
        font-size: 36px;
    }

    .service-subgrid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .sticky-layout {
        flex-direction: column;
        gap: 40px;
    }
    
    .sticky-sidebar {
        flex: none;
        position: static;
        width: 100%;
    }

    .graftivo-index-number {
        top: -40px;
        left: 0;
        font-size: clamp(48px, 18vw, 64px);
    }

    .full-service-header__index {
        top: 16px;
        left: 0;
    }

    .scroll-content {
        flex: none;
        width: 100%;
        margin-left: 0;
        gap: 40px;
    }

    .graftivo-service-grid {
        grid-template-columns: 1fr;
    }

    .services-footer-box {
        padding: 40px 24px;
    }

    /* Reservar altura del typewriter en móvil (el título ocupa ~3 líneas
       mientras se escribe; sin esto el contenido salta) */
    .typewriter-text {
        min-height: 132px;
    }
}

/* ==========================================================================
   PÁGINA DE CONTACTO (page-contact.php)
   ========================================================================== */

.graftivo-contact-page {
    background-color: var(--color-bg-base);
}

/* --- Hero compacto --- */
.graftivo-contact-hero {
    padding: 100px 0 70px;
    background-color: var(--color-bg-base);
    text-align: center;
}

.contact-hero-content {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.contact-hero-content .graftivo-hero-description {
    margin-bottom: 0;
}

/* --- Layout info + formulario --- */
.graftivo-contact-body {
    padding: 80px 0 100px;
    background-color: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
}

.contact-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 32px;
    align-items: start;
}

/* --- Cards de información --- */
.contact-info-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: var(--graftivo-card-radius);
    padding: 24px;
    box-shadow: var(--graftivo-card-shadow-rest);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.contact-info-card:hover {
    border-color: var(--color-secondary);
    box-shadow: var(--graftivo-card-shadow-hover);
    transform: translateY(-3px);
}

.contact-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(47, 143, 131, 0.08);
    border: 1px solid rgba(47, 143, 131, 0.2);
    color: var(--color-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info-icon svg {
    width: 20px;
    height: 20px;
}

.contact-info-title {
    font-family: var(--font-family-headings);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 4px 0;
}

.contact-info-text {
    font-family: var(--font-family-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0 0 8px 0;
}

.contact-info-link {
    font-family: var(--font-family-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

a.contact-info-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Nota de tiempo de respuesta */
.contact-response-note {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-tertiary);
    padding: 14px 20px;
    background: rgba(47, 143, 131, 0.06);
    border: 1px dashed rgba(47, 143, 131, 0.3);
    border-radius: 10px;
}

.contact-note-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-tertiary);
    flex-shrink: 0;
    animation: contactNotePulse 2.2s ease-in-out infinite;
}

@keyframes contactNotePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}

/* --- Card del formulario --- */
.contact-form-card {
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 16px rgba(27, 45, 92, 0.04);
}

.contact-form-title {
    font-family: var(--font-family-headings);
    font-size: 26px;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.02em;
    margin: 0 0 8px 0;
}

.contact-form-sub {
    font-family: var(--font-family-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0 0 28px 0;
}

/* Overrides de Forminator para tema claro (el de coming-soon/popup es oscuro) */
.contact-form-card .forminator-ui.forminator-custom-form[data-design=default] .forminator-input,
.contact-form-card .forminator-ui.forminator-custom-form[data-design=default] .forminator-textarea {
    background: var(--color-bg-alt) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-primary) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 16px !important; /* Mínimo 16px: evita auto-zoom de iOS al enfocar */
}

.contact-form-card .forminator-ui.forminator-custom-form[data-design=default] .forminator-input:focus,
.contact-form-card .forminator-ui.forminator-custom-form[data-design=default] .forminator-textarea:focus {
    border-color: var(--color-secondary) !important;
    background: var(--color-bg-base) !important;
}

.contact-form-card .forminator-label {
    color: var(--color-primary) !important;
    font-weight: 600 !important;
}

.contact-form-card .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit {
    background: var(--color-secondary) !important;
    color: var(--color-bg-base) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    width: 100% !important;
    margin-top: 10px !important;
    transition: background 0.2s, transform 0.2s !important;
}

.contact-form-card .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit:hover {
    background: var(--color-secondary-hover) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   PÁGINA ABOUT (page-about.php)
   ========================================================================== */

.graftivo-about-page {
    background-color: var(--color-bg-base);
}

/* --- 1. Hero: glow radial + typewriter (sin cuadrícula) --- */
.graftivo-about-hero {
    padding: 120px 0 100px;
    background-color: var(--color-bg-base);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.graftivo-about-hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(26, 115, 232, 0.10) 0%, rgba(47, 143, 131, 0.07) 45%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.about-hero-content {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.about-statement {
    font-family: var(--font-family-headings);
    font-size: clamp(36px, 5.5vw, 64px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--color-primary);
    margin: 0 0 24px 0;
}

.about-hero-sub {
    margin-bottom: 0 !important;
}

/* --- 2. What We Do: editorial asimétrico --- */
.graftivo-about-craft {
    padding: 120px 0 100px;
    background-color: var(--color-bg-alt);
}

.about-craft-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 80px;
}

.about-craft-title {
    font-family: var(--font-family-headings);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary);
    line-height: 1.25;
    margin: 12px 0 0;
}

.about-craft-copy {
    font-family: var(--font-family-body);
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1.7;
}

.about-craft-copy p {
    margin: 0 0 var(--space-md);
}

.about-craft-copy p:last-child {
    margin-bottom: 0;
}

.about-craft-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 40px 0 0;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-family-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.about-craft-list li {
    padding: 0 var(--space-lg);
    border-left: 1px solid var(--color-border);
}

.about-craft-list li:first-child {
    padding-left: 0;
    border-left: none;
}

/* --- 3. Our Story: párrafo editorial corto --- */
.graftivo-about-story {
    padding: 120px 0 100px;
    background-color: var(--color-bg-base);
    text-align: center;
}

.about-story-content {
    max-width: 700px;
    margin: 0 auto;
}

.about-story-quote {
    font-family: var(--font-family-headings);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 16px 0 24px;
}

.about-story-text {
    font-family: var(--font-family-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

/* --- 4. By the Numbers: renglón minimalista --- */
.graftivo-about-numbers {
    padding: 120px 0 100px;
    background-color: var(--color-bg-alt);
}

.about-numbers-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
}

.about-number {
    text-align: center;
}

.about-number-divider {
    width: 1px;
    height: 48px;
    background: var(--color-border);
}

.about-number-value {
    font-family: var(--font-family-headings);
    font-size: 48px;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.03em;
    line-height: 1;
}

.about-number-suffix {
    font-family: var(--font-family-headings);
    font-size: 28px;
    font-weight: 800;
    margin-left: 4px;
    color: var(--color-tertiary);
}

.about-number-label {
    display: block;
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
    margin-top: 8px;
}

/* ==========================================================================
   Responsive: Contacto y About
   ========================================================================== */

@media (max-width: 960px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .contact-form-card {
        padding: 28px 20px;
    }

    .about-craft-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .about-craft-list {
        flex-direction: column;
        align-items: center;
    }

    .about-craft-list li {
        padding: var(--space-xs) 0;
        border-left: none;
    }

    .about-numbers-row {
        gap: var(--space-lg);
    }

    .about-number-value {
        font-size: 36px;
    }

    .graftivo-about-hero {
        padding: 90px 0 60px;
    }

    .graftivo-contact-hero {
        padding: 70px 0 50px;
    }
}

/* ==========================================================================
   GRAFTIVO CUSTOM POPUP MODAL
   ========================================================================== */
.graftivo-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Sombra suave */
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.graftivo-popup-overlay.popup-active {
    opacity: 1; pointer-events: all; visibility: visible;
}

/* Wrapper exterior que permite elementos sobresalientes */
.graftivo-popup-wrapper {
    position: relative;
    max-width: 500px; width: 90%;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.graftivo-popup-overlay.popup-active .graftivo-popup-wrapper {
    transform: translateY(0) scale(1);
}

.graftivo-popup-container {
    background: transparent;
    border: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 0 50px rgba(47, 143, 131, 0.1);
    border-radius: 20px;
    padding: 40px;
    position: relative;
    text-align: center;
    overflow: hidden; /* Corta la luz sobrante, pero no el badge porque está en el wrapper */
    width: 100%; box-sizing: border-box;
}

/* Animación de Rotación de Luz — gira 2 vueltas en un sentido, luego 2 en el
   opuesto, y así sucesivamente (en vez de girar siempre para el mismo lado).
   El "salto" 720deg->0deg en el punto medio en realidad invierte el sentido
   del giro, porque la animación interpola el valor numérico del ángulo. */
@keyframes spinPopupGlow {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    50%  { transform: translate(-50%, -50%) rotate(720deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/* La Luz que gira (Conic Gradient) */
.graftivo-popup-container::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 200%; height: 200%;
    background: conic-gradient(transparent, transparent, transparent, var(--color-secondary), var(--color-tertiary), var(--color-highlight), transparent);
    animation: spinPopupGlow 16s linear infinite;
    z-index: 0;
}

/* El fondo AZUL MARINO (Dark Mode) que tapa el centro */
.graftivo-popup-container::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: var(--color-primary); /* Azul Marino Oficial del Blueprint */
    border-radius: 18px;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .graftivo-popup-container::before {
        animation: none;
        transform: translate(-50%, -50%);
    }
}

/* Asegurar que el contenido del formulario flote por encima de la luz */
.graftivo-popup-close, .popup-content {
    position: relative;
    z-index: 2;
}

.graftivo-popup-close {
    position: absolute; top: 15px; right: 20px;
    background: transparent; border: none;
    color: rgba(255,255,255,0.6); /* Gris claro */
    font-size: 28px; cursor: pointer; transition: 0.3s;
}
.graftivo-popup-close:hover { color: var(--color-bg-base); transform: scale(1.1); }

/* Badge movido al wrapper */
.graftivo-popup-wrapper .discount-badge {
    position: absolute; top: -15px; right: 30px;
    background: #EAB308; color: #000; font-family: "Montserrat", sans-serif;
    font-size: 13px; font-weight: 800; padding: 6px 14px; border-radius: 20px;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3); z-index: 10;
}

.popup-content h3 { font-family: "Montserrat", sans-serif; font-size: 24px; color: var(--color-bg-base); margin-top: 0; margin-bottom: 12px; }
.popup-content .newsletter-desc { font-size: 15px; color: rgba(255,255,255,0.7); margin-bottom: 24px; line-height: 1.5; }

/* Force Forminator Custom Styles for Dark Mode */
.graftivo-popup-container .forminator-ui.forminator-custom-form[data-design=default] .forminator-input { background: rgba(0,0,0,0.3) !important; border: 1px solid rgba(255,255,255,0.15) !important; color: white !important; border-radius: 8px !important; padding: 14px 16px !important; }
.graftivo-popup-container .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit { background: var(--color-tertiary) !important; color: white !important; border-radius: 8px !important; font-weight: 600 !important; width: 100% !important; margin-top: 10px !important; transition: 0.3s; }
.graftivo-popup-container .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit:hover { background: var(--color-secondary) !important; transform: translateY(-2px); }
.graftivo-popup-container .forminator-ui { text-align: left !important; }

/* ==========================================================================
   Legal Pages (Terms, Privacy, Cookie Policy, Refund Policy)
   ========================================================================== */

.graftivo-legal-hero {
  background: var(--color-primary);
  padding: var(--space-3xl) 0;
  text-align: center;
}

.graftivo-legal-title {
  font-family: var(--font-family-headings);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-bg-base);
  margin: 0;
}

.graftivo-legal-updated {
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  text-align: center;
  margin: var(--space-lg) 0 0;
}

.graftivo-legal-body {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.graftivo-legal-content {
  font-family: var(--font-family-body);
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 1.7;
}

.graftivo-legal-content h2 {
  font-family: var(--font-family-headings);
  color: var(--color-primary);
  font-size: 26px;
  font-weight: 700;
  margin: var(--space-2xl) 0 var(--space-md);
}

.graftivo-legal-content h3 {
  font-family: var(--font-family-headings);
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
  margin: var(--space-xl) 0 var(--space-sm);
}

.graftivo-legal-content p {
  margin: 0 0 var(--space-md);
}

.graftivo-legal-content ul,
.graftivo-legal-content ol {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

.graftivo-legal-content li {
  margin-bottom: var(--space-xs);
}

.graftivo-legal-content a {
  color: var(--color-secondary);
  text-decoration: underline;
}

.graftivo-legal-content strong {
  color: var(--color-text);
}
.graftivo-popup-container .forminator-label { color: rgba(255,255,255,0.9) !important; margin-bottom: 8px; display: block; font-weight: 500 !important; }

/* ==========================================================================
   PÁGINA PORTFOLIO (page-portfolio.php)
   ========================================================================== */

.graftivo-portfolio-page {
  background-color: var(--color-bg-base);
}

/* --- 1. Hero --- */
.graftivo-portfolio-hero {
  padding: 120px 0 100px;
  background-color: var(--color-bg-base);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.graftivo-portfolio-hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(26, 115, 232, 0.10) 0%, rgba(47, 143, 131, 0.07) 45%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.graftivo-portfolio-hero-content {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.graftivo-portfolio-statement {
  font-family: var(--font-family-headings);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 20px 0;
}

/* --- 2. Category sections --- */
.graftivo-portfolio-category-section {
  padding: 80px 0;
}

.graftivo-portfolio-category-header {
  margin-bottom: 40px;
}

.graftivo-portfolio-category-title {
  font-family: var(--font-family-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-tertiary);
  margin: 0;
}

.graftivo-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* --- 3. Project card --- */
.graftivo-portfolio-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--graftivo-card-radius);
  overflow: hidden;
  cursor: pointer;
  /* Stronger rest shadow than the shared recipe on purpose — these are photo
     tiles in a dense grid and need more definition at rest than a plain
     content card. Hover accent still matches the shared blue. */
  box-shadow: 0 12px 32px rgba(27, 45, 92, 0.13);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.graftivo-portfolio-card:hover,
.graftivo-portfolio-card:focus-visible {
  border-color: var(--color-secondary);
  box-shadow: 0 20px 48px rgba(27, 45, 92, 0.18);
  transform: translateY(-3px);
}

.graftivo-portfolio-card:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.graftivo-portfolio-card-visual {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.graftivo-portfolio-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.graftivo-portfolio-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(26, 115, 232, 0.08) 0%, rgba(47, 143, 131, 0.10) 100%);
}

.graftivo-portfolio-placeholder-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.85);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

.graftivo-portfolio-card-info {
  padding: 18px 20px;
}

.graftivo-portfolio-card-title {
  font-family: var(--font-family-headings);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 6px 0;
}

.graftivo-portfolio-card-category {
  font-family: var(--font-family-body);
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* --- 4. Lightbox --- */
.graftivo-portfolio-lightbox {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 640px;
  width: 90vw;
  background: var(--color-bg-base);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.graftivo-portfolio-lightbox::backdrop {
  background: rgba(11, 19, 43, 0.6);
  backdrop-filter: blur(4px);
}

.graftivo-portfolio-lightbox[open] {
  animation: graftivoLightboxIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.graftivo-portfolio-lightbox.no-anim[open] {
  animation: none;
}

@keyframes graftivoLightboxIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.graftivo-portfolio-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-primary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.graftivo-portfolio-lightbox-close:hover {
  background: var(--color-bg-base);
}

.graftivo-portfolio-lightbox-visual {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: var(--color-bg-alt);
}

.graftivo-portfolio-lightbox-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.graftivo-portfolio-lightbox-info {
  padding: 24px 28px 28px;
}

.graftivo-portfolio-lightbox-category {
  display: block;
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-tertiary);
  margin-bottom: 8px;
}

.graftivo-portfolio-lightbox-title {
  font-family: var(--font-family-headings);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 10px 0;
}

.graftivo-portfolio-lightbox-desc {
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

/* --- 5. Responsive --- */
@media (max-width: 960px) {
  .graftivo-portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .graftivo-portfolio-hero {
    padding: 90px 0 70px;
  }

  .graftivo-portfolio-grid {
    grid-template-columns: 1fr;
  }

  .graftivo-portfolio-lightbox {
    width: 94vw;
  }
}

/* ==========================================================================
   PÁGINA SUBMIT TESTIMONIAL (page-submit-testimonial.php)
   ========================================================================== */

.graftivo-testimonial-submit-hero {
    padding: 100px 0 60px;
    background-color: var(--color-bg-base);
    text-align: center;
}

.testimonial-submit-hero-content {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonial-submit-hero-content .graftivo-hero-description {
    margin-bottom: 0;
}

.graftivo-testimonial-submit-body {
    padding: 20px 0 100px;
    background-color: var(--color-bg-base);
}

.testimonial-submit-form-card {
    max-width: 600px;
    margin: 0 auto;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 16px rgba(27, 45, 92, 0.04);
}

@media (max-width: 600px) {
    .graftivo-testimonial-submit-hero {
        padding: 80px 0 50px;
    }

    .testimonial-submit-form-card {
        padding: 28px 20px;
    }
}

/* ==========================================================================
   PÁGINA SCREEN PRINTING QUOTE (page-screen-printing-quote.php)
   ========================================================================== */

.graftivo-quote-form-wrapper {
    max-width: 720px;
    margin: 0 auto;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 16px rgba(27, 45, 92, 0.04);
}

.graftivo-quote-form-wrapper input,
.graftivo-quote-form-wrapper textarea,
.graftivo-quote-form-wrapper select {
    font-size: 16px;
}

@media (max-width: 600px) {
    .graftivo-quote-form-wrapper {
        padding: 28px 20px;
    }
}

/* ==========================================================================
   MOBILE STICKY PRODUCT CART
   ========================================================================== */

.graftivo-sticky-cart {
    display: none;
}

@media (max-width: 960px) {
    .graftivo-sticky-cart {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 90;
        display: block;
        visibility: hidden;
        padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));
        border-top: 1px solid color-mix(in srgb, var(--color-bg-base) 18%, transparent);
        background: var(--color-primary);
        color: var(--color-bg-base);
        box-shadow: 0 -8px 24px color-mix(in srgb, var(--color-primary) 24%, transparent);
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    .graftivo-sticky-cart.graftivo-sticky-cart--visible {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .graftivo-sticky-cart__inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-sm);
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
    }

    .graftivo-sticky-cart__quantity {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 4px;
        border: 1px solid color-mix(in srgb, var(--color-bg-base) 28%, transparent);
        border-radius: 6px;
        background: color-mix(in srgb, var(--color-bg-base) 10%, transparent);
    }

    /* Selectors are scoped under .graftivo-sticky-cart (not just the bare
       class) so their specificity beats Blocksy core's
       input:is([type="number"], ...) rule, which otherwise wins the cascade
       and silently forces width/color/background back to its own theme
       form-field defaults on this input. */
    .graftivo-sticky-cart .graftivo-sticky-cart__quantity-button,
    .graftivo-sticky-cart .graftivo-sticky-cart__quantity-input {
        min-height: 36px;
        border: 0;
        font-size: 16px;
        line-height: 1.2;
    }

    .graftivo-sticky-cart .graftivo-sticky-cart__quantity-button {
        width: 36px;
        padding: 0;
        border-radius: 4px;
        background: transparent;
        color: var(--color-bg-base);
        font-family: var(--font-family-body);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }

    .graftivo-sticky-cart .graftivo-sticky-cart__quantity-button:hover,
    .graftivo-sticky-cart .graftivo-sticky-cart__quantity-button:focus-visible {
        background: color-mix(in srgb, var(--color-bg-base) 16%, transparent);
    }

    .graftivo-sticky-cart .graftivo-sticky-cart__quantity-input {
        width: 40px;
        padding: 0 2px;
        border-radius: 4px;
        background: var(--color-bg-base);
        color: var(--color-text);
        text-align: center;
        -moz-appearance: textfield;
    }

    .graftivo-sticky-cart .graftivo-sticky-cart__quantity-input::-webkit-outer-spin-button,
    .graftivo-sticky-cart .graftivo-sticky-cart__quantity-input::-webkit-inner-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }

    .graftivo-sticky-cart__details {
        min-width: 0;
    }

    .graftivo-sticky-cart__price {
        overflow: hidden;
        color: var(--color-bg-base);
        font-family: var(--font-family-headings);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .graftivo-sticky-cart__price del {
        margin-right: var(--space-xs);
        color: color-mix(in srgb, var(--color-bg-base) 64%, transparent);
    }

    .graftivo-sticky-cart__status {
        overflow: hidden;
        margin-top: 3px;
        color: color-mix(in srgb, var(--color-bg-base) 72%, transparent);
        font-family: var(--font-family-body);
        font-size: 11px;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .graftivo-sticky-cart__status[hidden] {
        display: none;
    }

    .graftivo-sticky-cart__submit {
        min-width: 118px;
        min-height: 44px;
        padding: 0 var(--space-md);
        border: 1px solid var(--color-secondary);
        border-radius: 4px;
        background: var(--color-secondary);
        color: var(--color-bg-base);
        font-family: var(--font-family-headings);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.1;
        cursor: pointer;
    }

    .graftivo-sticky-cart__submit:hover,
    .graftivo-sticky-cart__submit:focus-visible {
        border-color: var(--color-secondary-hover);
        background: var(--color-secondary-hover);
    }

    .graftivo-sticky-cart__submit:disabled {
        border-color: color-mix(in srgb, var(--color-bg-base) 26%, transparent);
        background: color-mix(in srgb, var(--color-bg-base) 18%, transparent);
        color: color-mix(in srgb, var(--color-bg-base) 62%, transparent);
        cursor: not-allowed;
    }
}

@media (max-width: 480px) {
    .graftivo-sticky-cart {
        padding-right: var(--space-sm);
        padding-left: var(--space-sm);
    }

    .graftivo-sticky-cart__inner {
        gap: var(--space-xs);
    }

    .graftivo-sticky-cart__submit {
        min-width: 104px;
        padding-right: var(--space-sm);
        padding-left: var(--space-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .graftivo-sticky-cart {
        transform: none;
        transition: none;
    }
}

:root {
    --graftivo-sticky-cart-offset: 0px;
}

/* ==========================================================================
   GRAFTIVO AI CHAT WIDGET
   Markup is echoed by graftivo_ai_chat_widget() (functions.php, hooked to
   wp_footer) — that function only outputs HTML now, no inline <style>.
   Migrated here 2026-09-08 so all its CSS follows the project's "CSS lives
   in style.css" rule; verified byte-for-byte against the removed inline
   block (colors, sizes, breakpoints) with no changes except the glow ring
   below, already migrated earlier the same day.
   ========================================================================== */
#graftivo-chat-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 58px;
    height: 58px;
    border-radius: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* First shadow is a crisp white ring, not a blur — keeps the button
       readable as its own shape when it sits over a navy/dark section,
       where its own navy face + shadow would otherwise blend into the
       background and leave only the glow ring and icon visible. */
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 8px 32px rgba(27,45,92,0.35), 0 2px 8px rgba(27,45,92,0.2);
    z-index: 99999;
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.18s ease;
    opacity: 1;
    pointer-events: all;
    overflow: hidden;
}

/* Rotating glow ring — shares the exact palette/speed/keyframe as
   .graftivo-popup-container's ring instead of its own hardcoded colors.
   ::after covers the button's face, leaving only a 2px ring of the
   spinning gradient visible around the edge. */
#graftivo-chat-btn::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 200%; height: 200%;
    background: conic-gradient(transparent, transparent, transparent, var(--color-secondary), var(--color-tertiary), var(--color-highlight), transparent);
    animation: spinPopupGlow 16s linear infinite;
    z-index: 0;
}
#graftivo-chat-btn::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: var(--color-primary);
    border-radius: 8px;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    #graftivo-chat-btn::before {
        animation: none;
        transform: translate(-50%, -50%);
    }
}

#graftivo-chat-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 12px 40px rgba(27,45,92,0.45), 0 4px 12px rgba(27,45,92,0.25);
}
#graftivo-chat-btn.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.88);
}
.gc-btn-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; }
.gc-btn-icon svg { width: 28px; height: 28px; }

#graftivo-chat-window {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 360px;
    height: 520px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(220,215,205,0.7);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    z-index: 99998;
    box-shadow: 0 32px 80px rgba(0,0,0,0.09), 0 8px 24px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.04);
    overflow: hidden;
    transform: scale(0.94) translateY(14px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease;
    /* Inter for clean readability (Resend style) */
    font-family: 'Inter', system-ui, sans-serif;
}
#graftivo-chat-window.open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: all;
}

.gc-header {
    background: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(220,215,205,0.5);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.gc-avatar {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #1b2d5c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.gc-avatar svg { width: 22px; height: 22px; }
.gc-header-info h4 {
    margin: 0;
    color: #1a1a1a;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.gc-header-info p {
    margin: 3px 0 0;
    color: #8a8a8a;
    font-size: 11px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.01em;
}
.gc-status-dot {
    width: 6px; height: 6px;
    background: #4cba6a;
    border-radius: 50%;
    flex-shrink: 0;
}
.gc-close {
    margin-left: auto;
    background: none;
    border: none;
    color: #bbb;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gc-close:hover { color: #555; background: #f0ece6; }

.gc-messages {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}
.gc-messages::-webkit-scrollbar { width: 3px; }
.gc-messages::-webkit-scrollbar-thumb { background: #e0dbd2; border-radius: 2px; }

.gc-msg {
    max-width: 84%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
    animation: msgIn 0.22s ease;
    letter-spacing: 0.01em;
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.gc-msg.bot {
    background: #f5f2ed;
    color: #2a2a2a;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    border: 1px solid #ede8e0;
}
.gc-msg.user {
    background: #1b2d5c;
    color: #fff;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
    font-weight: 500;
}

.gc-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: #f5f2ed;
    border: 1px solid #ede8e0;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    animation: msgIn 0.22s ease;
}
.gc-typing span {
    width: 5px; height: 5px;
    background: #1b2d5c;
    border-radius: 50%;
    animation: bounce 1.3s infinite;
    opacity: 0.5;
}
.gc-typing span:nth-child(2) { animation-delay: 0.18s; }
.gc-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes bounce {
    0%,60%,100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-5px); opacity: 1; }
}

.gc-input-area {
    border-top: 1px solid rgba(220,215,205,0.5);
    padding: 12px 14px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    background: rgba(255,255,255,0.7);
}
.gc-input {
    flex: 1;
    background: #f5f2ed;
    border: 1px solid #e5e0d6;
    border-radius: 12px;
    color: #1a1a1a;
    font-size: 16px; /* Minimum 16px: iOS auto-zooms inputs with a smaller font on focus */
    font-family: 'Montserrat', system-ui, sans-serif;
    padding: 10px 14px;
    outline: none;
    resize: none;
    transition: border-color 0.18s, background 0.18s;
    max-height: 80px;
    min-height: 40px;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0.01em;
}
.gc-input:focus { border-color: #1b2d5c; background: #fff; }
.gc-input::placeholder { color: #b0a898; }

.gc-send {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: #1b2d5c;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(27,45,92,0.25);
}
.gc-send:hover { background: #243d7a; box-shadow: 0 4px 14px rgba(27,45,92,0.35); }
.gc-send:active { transform: scale(0.94); }
.gc-send svg { width: 15px; height: 15px; fill: #fff; }
.gc-send:disabled { background: #e8e4dd; box-shadow: none; cursor: not-allowed; }
.gc-send:disabled svg { fill: #c0bab0; }

/* Chat window/button/tooltip layout on small screens — distinct from the
   sticky-cart-offset media queries below, which only nudge #graftivo-chat-btn
   up when the mobile sticky Add to Cart bar is open. */
@media (max-width: 480px) {
    #graftivo-chat-window { right:0; bottom:0; width:100%; height:100%; border-radius:0; }
    #graftivo-chat-btn { bottom:20px; right:20px; }
    .gc-tooltip { display: none !important; } /* Hidden on mobile so it doesn't get in the way */
}

/* Proactive typewriter bubble */
.gc-tooltip {
    position: fixed; bottom: 38px; right: 100px;
    background: #FFFFFF; color: #1B2D5C; padding: 12px 18px;
    border-radius: 12px; border-bottom-right-radius: 2px;
    font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    opacity: 0; pointer-events: none; transform: translateX(20px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 99998; display: flex; align-items: center; gap: 12px;
}
.gc-tooltip.show { opacity: 1; pointer-events: all; transform: translateX(0); }
.gc-tooltip::after {
    content: ''; position: absolute; right: -6px; bottom: 8px;
    border-width: 6px 0 6px 6px; border-style: solid; border-color: transparent transparent transparent #FFFFFF;
}
.gc-tooltip-close { cursor: pointer; color: #999; font-size: 18px; line-height: 1; padding: 0 2px; }
.gc-tooltip-close:hover { color: #333; }

/* Raises the floating chat button above the sticky cart bar so the two never overlap.
   graftivo-sticky-cart.js toggles body.graftivo-sticky-cart-open and keeps
   --graftivo-sticky-cart-offset in sync with the bar's real rendered height. */
@media (max-width: 960px) {
    body.graftivo-sticky-cart-open #graftivo-chat-btn {
        bottom: calc(28px + var(--graftivo-sticky-cart-offset));
        transition: bottom .22s ease, transform .22s ease, box-shadow .22s ease, opacity .18s ease;
    }
}

@media (max-width: 480px) {
    body.graftivo-sticky-cart-open #graftivo-chat-btn {
        bottom: calc(20px + var(--graftivo-sticky-cart-offset));
        transition: bottom .22s ease, transform .22s ease, box-shadow .22s ease, opacity .18s ease;
    }
}