/* =========================================================
   SEYON ADVERTISING — tokens
   Cream:      #EFEDE6
   Cherry red: #CD0000
   Ink black:  #120303
   ========================================================= */
:root{
  --cream: #FDCCE6;
  --cream-soft: #FFE8F3;
  --red: #08033D;
  --red-deep: #08033D;
  --red-bright: #FDCCE6;
  --ink: #08033D;
  --ink-soft: #08033D;
  --gold: #E8C77E;
  --active-color:#08033D;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Poppins", "Segoe UI", sans-serif;

  --radius-lg: 22px;
  --radius-md: 14px;
}

*{ box-sizing: border-box; }
html{ min-width:280px; height:100%; scroll-behavior:smooth; overflow-x:hidden; background:#FDCCE6; }
body{ min-height:100%; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  overflow-x:hidden;
  -webkit-tap-highlight-color: transparent;
  width:100%;
}

/* ambient background glow, cream fading to red at the base, like the reference */
.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,
    #FDCCE6 0%,
    #FDCCE6 25%,
    #08033D 62%,
    #08033D 100%
  );
}

button{ font-family: inherit; cursor:pointer; }
button, a{ touch-action:manipulation; }
img, video, svg{ max-width:100%; }
a{ text-decoration:none; color:inherit; }

/* ---------------- topbar ---------------- */
.hero{
  position:relative; z-index:1;
  min-height:100vh; min-height:100svh;
  padding:max(18px, env(safe-area-inset-top)) clamp(14px, 4vw, 32px) max(32px, env(safe-area-inset-bottom));
}

.topbar{ display:grid; grid-template-columns:auto auto; align-items:center; justify-content:space-between; gap:14px; }
.home-search{display:flex;align-items:center;width:100%;height:42px;border:1px solid rgba(8,3,61,.18);border-radius:999px;background:rgba(255,255,255,.58);box-shadow:0 7px 20px rgba(8,3,61,.08);overflow:hidden}.home-search input{min-width:0;flex:1;height:100%;padding:0 6px 0 16px;border:0;background:transparent;color:#08033D;font:500 13px var(--font-body);outline:0}.home-search input::placeholder{color:rgba(8,3,61,.55)}.home-search button{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;padding:0;border:0;background:#08033D;color:#FDCCE6}.home-search svg{width:19px;height:19px}
.icon-btn{
  width:44px; height:44px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--red); color:#fff; box-shadow: 0 6px 16px rgba(205,0,0,.35);
  transition: transform .2s ease;
}
.icon-btn:hover{ transform: scale(1.06); }
.icon-btn svg{ width:20px; height:20px; }
.phone-btn{ background: transparent; color: var(--red); border:1.6px solid var(--red); box-shadow:none; }
.category-sidebar{ position:fixed; z-index:1001; inset:0 auto 0 0; width:min(84vw, 330px); padding:24px 20px; background:var(--cream-soft); box-shadow:16px 0 40px rgba(20,4,4,.22); transform:translateX(-105%); transition:transform .3s ease; }
.category-sidebar.is-open{ transform:translateX(0); }
.sidebar-backdrop{ position:fixed; z-index:1000; inset:0; background:rgba(20,4,4,.42); opacity:0; visibility:hidden; transition:.3s ease; }
.sidebar-backdrop.is-open{ opacity:1; visibility:visible; }
.sidebar-head{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #dfd2cb; padding-bottom:14px; }
.sidebar-head h2{ margin:0; font-family:var(--font-display); color:var(--red); font-style:italic; }
.sidebar-head button{ width:40px; height:40px; border:0; background:transparent; color:var(--red); font-size:30px; }
.sidebar-list{ display:grid; gap:8px; margin:18px 0; }
.sidebar-item{ width:100%; padding:13px 14px; border:1px solid #e0d4cd; border-radius:12px; background:#fff; color:var(--ink); text-align:left; font-weight:600; }
.sidebar-empty{ color:#786363; font-size:13px; }
.sidebar-add{ display:flex; justify-content:center; padding:12px; border-radius:999px; background:var(--red); color:#fff; font-weight:700; }
.sidebar-video-add{ margin-top:10px; background:var(--ink); }
.sidebar-action-link{margin-top:10px}.sidebar-user{display:grid;gap:3px;margin:16px 0;padding:14px;border:1px solid rgba(8,3,61,.12);border-radius:12px;background:#fff}.sidebar-user strong{font-size:14px}.sidebar-user span{overflow-wrap:anywhere;color:#6b6679;font-size:11px}

/* ---------------- brand ---------------- */
.brand{ text-align:center; margin: 18px auto 6px; }
.brand-logo{
  display:block; width:clamp(210px, 48vw, 390px); height:auto;
  margin:0 auto; object-fit:contain;
}
.logo{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(48px, 12vw, 76px);
  color: var(--red);
  margin: 0;
  line-height: 1;
  letter-spacing: .5px;
}
.e-heart{ position:relative; }
.e-heart::after{
  content:"♥";
  position:absolute; top:-.05em; right:.02em;
  font-size:.24em; color: var(--red); -webkit-text-stroke: 0;
}
.logo-sub{
  margin: 2px 0 0;
  font-size: 13px;
  letter-spacing: 6px;
  font-weight: 600;
  color: var(--red-deep);
}
.tagline{
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ---------------- fan carousel ---------------- */
.fan-wrap{
  position:relative;
  margin: 34px auto 6px;
  max-width: 720px;
  height: clamp(300px, 52vh, 480px);
  display:flex; align-items:flex-start; justify-content:center;
  overflow:visible;
}
.fan-stage{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  touch-action: pan-y pinch-zoom;
  user-select:none;
  perspective: 1200px;
  transform-style:preserve-3d;
}

.fan-card{
  position:absolute;
  top:50%; left:50%;
  width: 148px;
  aspect-ratio: 9/16;
  margin: -113px 0 0 -74px; /* half of h/w at base scale */
  border-radius: var(--radius-md);
  overflow:hidden;
  border: 3px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 30px rgba(20,4,4,0.28);
  transition: transform .16s cubic-bezier(.22,.9,.3,1), opacity .16s ease, box-shadow .16s ease, border-color .16s ease;
  transform-style:preserve-3d;
  cursor:pointer;
  will-change: transform;
}
.fan-card.is-active{
  border-top:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  border-left:2px solid transparent;
  border-right:2px solid transparent;
  box-shadow:0 18px 34px rgba(20,4,4,.3);
  opacity:1 !important;
  z-index:999 !important;
}
.fan-card.is-opening{ z-index:10000 !important; transition:transform .13s cubic-bezier(.2,.8,.2,1), border-radius .13s ease !important; transform:translate3d(0,0,500px) scale(3.5) !important; border-radius:0; }
.fan-card.is-active::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  border-radius:calc(var(--radius-md) - 1px);
  background:
    linear-gradient(180deg, transparent 0%, var(--card-color, #CD0000) 32%, #fff 50%, var(--card-color, #CD0000) 68%, transparent 100%) left -50%/3px 36% no-repeat,
    linear-gradient(180deg, transparent 0%, var(--card-color, #CD0000) 32%, #fff 50%, var(--card-color, #CD0000) 68%, transparent 100%) right -50%/3px 36% no-repeat;
  animation:cardEdgeSweep 3.6s ease-in-out infinite;
}
@keyframes cardEdgeSweep{
  0%{ background-position:left -60%, right -60%; }
  8%{ background-position:left -60%, right -60%; }
  92%{ background-position:left 160%, right 160%; }
  100%{ background-position:left 160%, right 160%; }
}

.fan-card .card-media{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff;
}
.fan-card .card-media::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);
}
.fan-card .card-num{
  position:absolute; top:9px; left:10px; font-size:11px; font-weight:700; letter-spacing:1px; z-index:2;
  color: rgba(255,255,255,.85);
}
.fan-card .card-play{
  position:absolute; top:8px; right:8px; z-index:2;
  width:24px; height:24px; border-radius:50%;
  background: rgba(0,0,0,.35); border:1.4px solid rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:center;
}
.fan-card .card-play svg{ width:10px; height:10px; fill:#fff; margin-left:1px; }

.fan-card .card-foot{
  position:relative; z-index:2; padding: 0 0 14px; text-align:center;
}
.fan-card .card-icon{
  width:34px; height:34px; margin:0 auto 6px; border-radius:50%;
  background: rgba(255,255,255,.12); border:1.4px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
}
.fan-card .card-icon svg{ width:16px; height:16px; stroke:#fff; }
.fan-card .card-label{
  font-size: 10.5px; font-weight:700; letter-spacing: 1.2px; text-transform:uppercase;
}
.fan-card .card-description{
  display:-webkit-box; max-width:110px; margin:7px auto 0; overflow:hidden;
  color:rgba(255,255,255,.76); font-size:8px; line-height:1.35;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.fan-card .project-media{ background-position:center; background-size:cover; }
.fan-card .card-underline{
  width:26px; height:2px; background: var(--red-bright); margin: 6px auto 0; border-radius:2px;
}
.fan-card .card-num,
.fan-card .card-play,
.fan-card .card-icon,
.fan-card .card-description,
.fan-card .card-underline{ display:none; }
.fan-card .card-foot{ padding:40px 12px 22px; background:linear-gradient(0deg, rgba(0,0,0,.72), transparent); }
.fan-card .card-label{ position:relative; padding-top:12px; color:#fff; font-size:12px; font-weight:800; line-height:1.35; text-shadow:0 2px 8px rgba(0,0,0,.9); }
.fan-card .card-label::before{ content:none; }
.fan-card .card-view{
  display:flex; align-items:center; justify-content:space-between; width:min(190px, 85%);
  margin:20px auto 0; padding-top:14px; border-top:1px solid rgba(255,255,255,.8);
  color:#fff; font-size:11px; font-weight:600; text-transform:none;
}
.fan-card .card-view-arrow{ color:#CD0000; font-size:24px; font-weight:700; line-height:.7; text-shadow:0 0 10px rgba(205,0,0,.45); }
.fan-card.is-active .card-view-arrow{ color:var(--active-color, #CD0000); text-shadow:0 0 10px color-mix(in srgb, var(--active-color, #CD0000) 45%, transparent); }

/* per-category gradient washes stand in for real photography/video stills */
.wash-realestate{ background: linear-gradient(160deg,#0e2233,#050a10 70%); }
.wash-hospital{ background: linear-gradient(160deg,#08222b,#03080a 70%); }
.wash-furniture{ background: linear-gradient(160deg,#241a12,#0a0705 70%); }
.wash-jewellery{ background: linear-gradient(160deg,#3a0303,#150202 75%); }
.wash-food{ background: linear-gradient(160deg,#301604,#0d0503 70%); }
.wash-fashion{ background: linear-gradient(160deg,#2b0407,#0c0202 70%); }
.wash-education{ background: linear-gradient(160deg,#111420,#05060a 70%); }
.wash-automobile{ background: linear-gradient(160deg,#240404,#0a0202 70%); }

/* drag hint row */
.drag-hint{
  position:absolute; left:50%; bottom:-6px; transform: translateX(-50%);
  display:flex; align-items:center; gap:10px;
  color: var(--red-deep);
}
.arrow-btn{
  width:30px; height:30px; border-radius:50%; border:1.4px solid var(--red); background:transparent;
  color: var(--red); display:flex; align-items:center; justify-content:center; opacity:.85;
  transition: background .2s ease, color .2s ease;
}
.arrow-btn:hover{ background: var(--red); color:#fff; }
.arrow-btn svg{ width:14px; height:14px; }
.hand-icon{ display:flex; }
.hand-icon svg{ width:16px; height:16px; stroke: var(--red); }
.drag-text{ font-size:11.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; }

/* ---------------- footer copy ---------------- */
.hero-foot{ text-align:center; margin: 56px auto 0; max-width:520px; }
.divider{ width:64px; height:2px; background: var(--red); margin: 0 auto 18px; border-radius:2px; }
.divider.small{ width:34px; margin: 26px auto 14px; opacity:.6; }
.hero-copy{ font-size:15px; line-height:1.6; color: var(--ink-soft); font-weight:500; }
.active-description{
  min-height:48px; max-width:480px; margin:10px auto 0;
  color:#FDCCE6; font-size:13px; font-weight:500; line-height:1.65; text-shadow:0 2px 8px rgba(8,3,61,.65);
}
.connect-label{ font-size:12px; letter-spacing:4px; font-weight:700; color:#fff; text-transform:uppercase; text-shadow:0 1px 5px rgba(80,0,0,.24); }
.socials{ display:flex; justify-content:center; gap:14px; margin-top:16px; }
.social-btn{
  width:42px; height:42px; border-radius:50%; border:1.6px solid rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; color:#fff; background:transparent;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.social-btn svg{ width:18px; height:18px; }
.social-btn img{ display:block; width:24px; height:24px; object-fit:contain; }
.social-btn:hover{ background:rgba(255,255,255,.22); color:#fff; border-color:#fff; transform:translateY(-3px); }

/* ---------------- user-added content ---------------- */
.projects-section{
  position:relative; z-index:1; width:min(1120px, calc(100% - 40px));
  margin:0 auto; padding:72px 0 90px;
}
.projects-heading{ display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.section-kicker{ margin:0 0 5px; color:var(--red); font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; }
.projects-heading h2{ margin:0; font-family:var(--font-display); font-size:clamp(34px, 6vw, 54px); font-style:italic; }
.add-content-link, .form-submit{
  display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 20px;
  border:0; border-radius:999px; background:var(--red); color:#fff; font-weight:700;
  box-shadow:0 8px 20px rgba(205,0,0,.25);
}
.projects-grid{
  display:flex; gap:24px; overflow-x:auto; padding:18px 4px 32px;
  scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--red) transparent;
}
.projects-grid::-webkit-scrollbar{ height:5px; }
.projects-grid::-webkit-scrollbar-thumb{ border-radius:10px; background:var(--red); }
.project-card{
  position:relative; flex:0 0 clamp(230px, 29vw, 310px); height:470px; overflow:hidden;
  border:4px solid rgba(255,255,255,.7); border-radius:999px; background:var(--ink);
  box-shadow:inset 18px 0 28px rgba(255,255,255,.11), inset -24px 0 30px rgba(0,0,0,.32), 0 20px 38px rgba(42,11,11,.2);
  scroll-snap-align:center;
}
.project-card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(90deg, rgba(255,255,255,.18), transparent 24%, transparent 70%, rgba(0,0,0,.32)), linear-gradient(0deg, rgba(0,0,0,.9), transparent 55%);
}
.project-card img{ display:block; width:100%; height:100%; object-fit:cover; background:#dedbd2; }
.project-card-body{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:34px 28px 58px; text-align:center; color:#fff; }
.project-card h3{ margin:0 0 8px; font-family:var(--font-display); font-size:26px; font-style:italic; }
.project-card p{ margin:0; color:rgba(255,255,255,.78); font-size:12.5px; line-height:1.55; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.projects-empty{ display:none; padding:40px 20px; border:1px dashed rgba(122,0,0,.3); border-radius:var(--radius-lg); text-align:center; color:#745f5f; }
.projects-empty.is-visible{ display:block; }

/* ---------------- add content page ---------------- */
.add-page{
  position:relative; z-index:1;
  min-height:100vh; min-height:100svh;
  padding:max(24px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom));
}
.add-shell{ width:min(680px, 100%); margin:0 auto; }
.back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--red-deep); font-size:13px; font-weight:700; }
.add-brand{ margin:34px 0 24px; }
.add-brand h1{ margin:0 0 8px; font-family:var(--font-display); color:var(--red); font-size:clamp(38px, 8vw, 60px); font-style:italic; }
.add-brand p{ margin:0; color:#654d4d; line-height:1.6; }
.content-form{ padding:clamp(22px, 5vw, 38px); border-radius:var(--radius-lg); background:rgba(247,245,239,.92); box-shadow:0 18px 45px rgba(42,11,11,.14); }
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; margin-bottom:8px; font-size:13px; font-weight:700; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; border:1px solid #d6cbc4; border-radius:12px; background:#fff; color:var(--ink);
  padding:13px 14px; font:inherit; outline:none;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(205,0,0,.1); }
.form-field textarea{ min-height:130px; resize:vertical; }
.color-field{ display:grid; grid-template-columns:56px 1fr; gap:10px; }
.color-field input[type="color"]{ height:49px; padding:4px; cursor:pointer; }
.image-preview{ display:none; width:100%; max-height:320px; margin-top:12px; border-radius:14px; object-fit:cover; }
.image-preview.is-visible{ display:block; }
.form-note{ margin:7px 0 0; font-size:11px; color:#7b6767; }
.form-message{ min-height:22px; margin:14px 0 0; color:var(--red-deep); font-size:13px; font-weight:600; }
.table-shell{ width:min(900px, 100%); }
.table-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px; }
.manage-table-wrap{ overflow-x:auto; border-radius:var(--radius-lg); background:rgba(247,245,239,.94); box-shadow:0 18px 45px rgba(42,11,11,.14); }
.manage-table{ width:100%; border-collapse:collapse; }
.manage-table th, .manage-table td{ padding:16px 18px; border-bottom:1px solid #e4d9d2; text-align:left; }
.manage-table th{ color:var(--red-deep); font-size:12px; letter-spacing:1.2px; text-transform:uppercase; }
.manage-table td:first-child{ width:80px; }
.manage-table td:last-child{ width:190px; }
.row-actions{ display:flex; gap:8px; }
.table-btn{ min-height:38px; padding:8px 14px; border:1px solid var(--red); border-radius:999px; background:transparent; color:var(--red); font-weight:700; }
.table-btn.delete{ background:var(--red); color:#fff; }
.table-empty{ padding:35px 18px !important; text-align:center !important; color:#745f5f; }

/* ---------------- video creator and player ---------------- */
.video-page{ margin:0; background:#080202; color:#fff; overflow:hidden; }
.video-shell{ position:relative; width:100%; height:100vh; height:100dvh; }
.video-back{ position:fixed; z-index:20; top:max(14px, env(safe-area-inset-top)); left:max(14px, env(safe-area-inset-left)); padding:9px 14px; border:1px solid rgba(255,255,255,.45); border-radius:999px; background:rgba(0,0,0,.45); color:#fff; font-weight:700; }
.video-queue{ width:100%; height:100%; overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none; }
.video-queue::-webkit-scrollbar{ display:none; }
.video-slide{ position:relative; width:100%; height:100%; scroll-snap-align:start; background:#000; }
.video-slide video{ width:100%; height:100%; object-fit:cover; }
.product-slide{ background:#08033D; }
.product-image{ width:100%; height:100%; object-fit:cover; }
.product-caption{ right:20px; max-width:620px; }
.product-category{ margin-bottom:8px !important; color:#FDCCE6 !important; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.product-price{ display:flex; align-items:center; gap:12px; margin:8px 0; }
.product-price strong{ color:#FDCCE6; font-size:clamp(22px,5vw,34px); }
.product-price del{ color:rgba(255,255,255,.62); }
.product-stock{ color:#fff !important; font-weight:600; }
.product-description{ max-width:560px; margin-top:8px !important; line-height:1.55; }
.video-shade{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.78)); }
.video-caption{ position:absolute; z-index:2; left:20px; right:90px; bottom:max(28px, env(safe-area-inset-bottom)); }
.video-caption h2{ margin:0 0 5px; font-family:var(--font-display); font-size:clamp(24px,5vw,42px); }
.video-caption p{ margin:0; color:rgba(255,255,255,.75); font-size:13px; }
.video-actions{ position:absolute; z-index:3; right:max(14px, env(safe-area-inset-right)); bottom:max(34px, env(safe-area-inset-bottom)); display:flex; gap:8px; }
.video-actions button{ width:38px; height:38px; padding:0; border:1px solid rgba(255,255,255,.65); border-radius:50%; background:rgba(0,0,0,.38); color:#fff; display:grid; place-items:center; }
.video-actions svg{ width:18px; height:18px; }
.video-play-center{ position:absolute; z-index:5; top:50%; left:50%; width:68px; height:68px; padding:0; border:2px solid #fff; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; display:grid; place-items:center; transform:translate(-50%,-50%); }
.video-play-center svg{ width:27px; height:27px; margin-left:4px; }
.video-play-center[aria-label="Pause video"] svg{ margin-left:0; }
.video-socials{ position:absolute; z-index:5; right:max(14px, env(safe-area-inset-right)); top:50%; display:flex; flex-direction:column; align-items:center; gap:10px; transform:translateY(-50%); }
.video-socials a{ width:40px; height:40px; flex:0 0 40px; border:1px solid rgba(255,255,255,.9); border-radius:50%; background:rgba(0,0,0,.5); color:#fff; display:flex; align-items:center; justify-content:center; }
.video-socials svg{ display:block; width:20px; height:20px; }
.video-socials img{ display:block; width:24px; height:24px; object-fit:contain; }
.video-sound{ position:absolute; z-index:5; right:max(14px, env(safe-area-inset-right)); bottom:max(24px, env(safe-area-inset-bottom)); width:40px; height:40px; padding:0; border:1px solid rgba(255,255,255,.9); border-radius:50%; background:rgba(0,0,0,.5); color:#fff; display:grid; place-items:center; }
.video-sound svg{ width:19px; height:19px; }
.video-control{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility .25s ease, transform .2s ease; }
.video-slide.controls-visible .video-control{ opacity:1; visibility:visible; pointer-events:auto; }
.video-slide.controls-visible .video-play-center{ transform:translate(-50%,-50%) scale(1); }
.video-slide:not(.controls-visible) .video-play-center{ transform:translate(-50%,-50%) scale(.88); }
.video-empty{ height:100%; display:grid; place-items:center; padding:30px; text-align:center; }
.video-empty a{ color:#fff; text-decoration:underline; }
.video-upload-progress{ width:100%; height:8px; accent-color:var(--red); }

/* ---------------- ecommerce product cards ---------------- */
.product-page{ margin:0; min-height:100%; background:linear-gradient(180deg,#FDCCE6 0%,#FDCCE6 25%,#08033D 62%,#08033D 100%); color:#08033D; }
.product-shell{ width:min(1180px,100%); min-height:100vh; margin:0 auto; padding:24px clamp(16px,4vw,40px) 70px; }
.product-header{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; margin-bottom:26px; }
.product-header p{ margin:0 0 2px; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; opacity:.65; }
.product-header h1{ margin:0; font-size:clamp(25px,5vw,42px); line-height:1.1; }
.product-back{ display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(8,3,61,.18); border-radius:50%; background:rgba(255,255,255,.5); font-size:23px; }
.product-count{ font-size:12px; font-weight:600; white-space:nowrap; }
.product-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.product-card{ min-width:0; overflow:hidden; border:1px solid rgba(8,3,61,.12); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 12px 28px rgba(8,3,61,.14); }
.product-card-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#f5eef3; }
.product-card-media img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.product-card:hover .product-card-media img{ transform:scale(1.04); }
.discount-badge{ position:absolute; top:9px; left:9px; padding:4px 9px; border-radius:999px; background:#08033D; color:#FDCCE6; font-size:10px; font-weight:700; text-transform:uppercase; }
.product-card-body{ padding:14px; }
.product-card-body h2{ min-height:42px; margin:0 0 7px; overflow:hidden; font-size:15px; line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.product-card-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; }
.product-card-price strong{ font-size:17px; }
.product-card-price del{ color:#847f99; font-size:12px; }
.product-card-stock{ margin:7px 0 0; color:#28753b; font-size:11px; font-weight:600; }
.product-card-stock.out{ color:#a5223a; }
.product-card-description{ margin:8px 0 0; overflow:hidden; color:#625e76; font-size:11px; line-height:1.45; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.product-grid-empty{ grid-column:1/-1; padding:70px 20px; border-radius:18px; background:rgba(255,255,255,.7); text-align:center; }
.search-header{grid-template-columns:auto minmax(0,600px) auto}.results-search{display:flex;width:100%;height:43px;overflow:hidden;border:1px solid rgba(8,3,61,.2);border-radius:999px;background:rgba(255,255,255,.9)}.results-search input{min-width:0;flex:1;padding:0 16px;border:0;background:transparent;font:500 13px var(--font-body);outline:0}.results-search button{padding:0 20px;border:0;background:#08033D;color:#FDCCE6;font-weight:700}.search-summary{margin:5px 0 22px;text-align:center}.search-summary p{margin:0;color:#625e76;font-size:11px;text-transform:uppercase;letter-spacing:1.5px}.search-summary h1{margin:4px 0;font-size:clamp(25px,5vw,39px)}.search-summary span{font-size:12px}.search-category{display:block;margin-bottom:5px;color:#7b748d;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px}.search-pagination{margin-top:25px;color:#fff}.search-pagination nav>div:first-child{display:none}.search-pagination nav>div:last-child{display:flex;justify-content:center}.search-pagination svg{width:18px}.search-pagination a,.search-pagination span{margin:2px;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.9);color:#08033D}

@media (max-width:800px){ .product-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } }
@media (max-width:600px){
  .product-shell{ padding:16px 10px 44px; }
  .product-header{ gap:9px; margin-bottom:16px; }
  .product-back{ width:38px; height:38px; }
  .product-count{ font-size:9px; }
  .product-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .product-card{ border-radius:13px; }
  .product-card-body{ padding:10px; }
  .product-card-body h2{ min-height:16px; font-size:12px; }
  .product-card-price strong{ font-size:14px; }
  .product-card-price del{ font-size:10px; }
  .product-card-description{ display:none; }
}

/* =========================================================
   REEL / VIDEO FEED VIEW
   ========================================================= */
.reel-view{
  position:fixed; inset:0; z-index:20;
  background: var(--ink);
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.22,.9,.3,1);
  display:flex; flex-direction:column;
  height:100vh; height:100dvh;
}
.reel-view.is-open{ transform: translateY(0); }

.reel-topbar{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(0,0,0,.75), transparent);
}
.reel-back{
  display:flex; align-items:center; gap:4px;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  color:#fff; padding:7px 12px 7px 8px; border-radius: 999px; font-size:13px; font-weight:600;
}
.reel-back svg{ width:16px; height:16px; }
.reel-heading{ display:flex; align-items:center; gap:8px; color:#fff; }
.reel-icon svg{ width:18px; height:18px; stroke: var(--red-bright); }
.reel-title{ font-size:13px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
.reel-count{ color: rgba(255,255,255,.55); font-size:12px; font-weight:600; }

.reel-scroll{
  flex:1; overflow-y:auto; scroll-snap-type: y mandatory;
  scrollbar-width:none;
}
.reel-scroll::-webkit-scrollbar{ display:none; }

.reel-item{
  position:relative;
  height: 100%;
  min-height: 100%;
  scroll-snap-align:start;
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
}
.reel-media{
  position:absolute; inset:0;
  background-size: 220% 220%;
  animation: reelDrift 9s ease-in-out infinite;
}
@keyframes reelDrift{
  0%{ background-position: 20% 20%; }
  50%{ background-position: 80% 60%; }
  100%{ background-position: 20% 20%; }
}
.reel-item::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 100%);
  z-index:1;
}
.reel-playbtn{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; z-index:3;
  background: rgba(0,0,0,.35); border:1.6px solid rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .25s ease;
}
.reel-item.is-paused .reel-playbtn{ opacity:1; }
.reel-playbtn svg{ width:22px; height:22px; fill:#fff; margin-left:3px; }

.reel-info{
  position:relative; z-index:2; width:100%;
  padding:0 max(68px, calc(20px + env(safe-area-inset-right))) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  color:#fff;
}
.reel-info .reel-badge{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--red); padding:5px 11px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  margin-bottom:10px;
}
.reel-info h3{ margin:0 0 6px; font-family: var(--font-display); font-style:italic; font-size:22px; }
.reel-info p{ margin:0; font-size:13.5px; color: rgba(255,255,255,.75); max-width:420px; line-height:1.5; }

.reel-side{
  position:absolute; right:14px; bottom:110px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:20px; color:#fff;
}
.reel-side button{
  background:none; border:none; color:#fff; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; font-weight:600;
}
.reel-side svg{ width:24px; height:24px; }

.reel-progress{
  position:absolute; left:16px; right:16px; top:64px; z-index:4;
  display:flex; gap:5px;
}
.reel-progress .bar{ flex:1; height:3px; border-radius:3px; background: rgba(255,255,255,.28); overflow:hidden; }
.reel-progress .bar span{ display:block; height:100%; width:0; background:#fff; }
.reel-progress .bar.done span{ width:100%; }
.reel-progress .bar.active span{ animation: fillBar 6s linear forwards; }
@keyframes fillBar{ from{ width:0; } to{ width:100%; } }

/* ---------------- responsive ---------------- */
@media (max-width: 600px){
  body.home-page{height:100vh;height:100dvh;overflow:hidden}
  body.home-page .hero{height:100vh;height:100dvh;min-height:0}
  body.home-page .hero-foot{position:relative;z-index:2;transform:translateY(-34px)}
  .hero{ padding-left:14px; padding-right:14px; padding-bottom:28px; overflow:hidden; }
  .icon-btn{ width:42px; height:42px; }
  .topbar{grid-template-columns:42px minmax(0,1fr) auto;gap:7px}.home-search{height:38px}.home-search input{padding-left:12px;font-size:11px}.home-search button{width:38px;height:38px;flex-basis:38px}.top-actions{gap:5px}.top-actions .icon-btn{width:38px;height:38px}.search-header{grid-template-columns:38px minmax(0,1fr) 42px}.results-search{height:38px}.results-search input{padding:0 10px;font-size:11px}.results-search button{padding:0 11px;font-size:10px}
  .brand{ margin-top:4px; }
  .brand-logo{ width:clamp(180px, 62vw, 270px); }
  .logo{ font-size:clamp(44px, 16vw, 64px); }
  .logo-sub{ font-size:11px; letter-spacing:clamp(3px, 1.5vw, 6px); }
  .tagline{ margin-top:5px; font-size:clamp(11px, 3.4vw, 14px); }
  .fan-wrap{ width:100%; max-width:100%; margin-top:14px; height:clamp(360px, 55svh, 490px); overflow:visible; }
  .fan-stage{ height:100%; align-self:flex-start; padding:8px 0; }
  .fan-card{ width:clamp(200px, 62vw, 250px); height:clamp(330px, 50svh, 450px); aspect-ratio:auto; margin:0; translate:-50% -50%; }
  .fan-card:not(.is-active){ opacity:.48 !important; }
  .fan-card.is-active{ z-index:9999 !important; }
  .fan-card .card-foot{ padding:45px 18px 24px; }
  .fan-card .card-icon{ width:30px; height:30px; }
  .fan-card .card-label{ font-size:12px; }
  .fan-card .card-view{ width:88%; margin-top:14px; padding-top:12px; font-size:11px; }
  .drag-hint{ display:none; }
  .drag-text{ font-size:9.5px; letter-spacing:1.1px; }
  .arrow-btn{ width:32px; height:32px; }
  .hero-foot{ margin-top:12px; }
  .hero-copy{ margin:0; font-size:13px; }
  .active-description{ min-height:44px; margin-top:8px; padding:0 8px; font-size:12.5px; }
  .divider{ margin-bottom:14px; }
  .divider.small{ margin-top:20px; }
  .connect-label{ font-size:10px; letter-spacing:3px; }
  .socials{ gap:10px; flex-wrap:wrap; }
  .social-btn{ width:40px; height:40px; }
  .reel-topbar{ gap:8px; }
  .reel-back span{ display:none; }
  .reel-back{ width:38px; height:38px; padding:0; justify-content:center; flex:0 0 auto; }
  .reel-title{ font-size:11px; letter-spacing:1px; }
  .reel-count{ font-size:10px; white-space:nowrap; }
  .reel-progress{ top:58px; left:10px; right:10px; gap:3px; }
  .reel-side{ right:max(10px, env(safe-area-inset-right)); bottom:max(104px, calc(82px + env(safe-area-inset-bottom))); gap:16px; }
  .reel-info h3{ font-size:20px; }
  .reel-info p{ font-size:12.5px; }
  .projects-section{ width:calc(100% - 28px); padding:52px 0 64px; }
  .projects-heading{ align-items:flex-start; flex-direction:column; gap:16px; }
  .add-content-link{ width:100%; }
  .projects-grid{ gap:14px; margin-right:-14px; padding-right:14px; }
  .project-card{ flex-basis:min(78vw, 280px); height:420px; }
  .project-card-body{ padding:30px 23px 52px; }
  .content-form{ padding:20px 16px; }
  .form-submit{ width:100%; }
  .add-page{ padding-left:14px; padding-right:14px; }
  .add-brand{ margin-top:24px; }
}
@media (max-width: 360px){
  .hero{ padding-left:10px; padding-right:10px; }
  .brand-logo{ width:min(60vw, 210px); }
  .fan-wrap{ height:360px; margin-top:10px; }
  .fan-card{ width:min(64vw, 220px); height:330px; }
  .hand-icon{ display:none; }
  .hero-foot{ margin-top:10px; }
  .socials{ margin-top:12px; }
  .reel-heading{ gap:4px; }
  .reel-count{ display:none; }
  .projects-section{ width:calc(100% - 20px); }
  .project-card{ flex-basis:min(82vw, 260px); height:390px; }
}

@media (orientation:landscape) and (max-height:500px){
  .hero{ min-height:620px; }
  .brand{ margin-top:0; }
  .brand-logo{ width:180px; }
  .fan-wrap{ height:315px; }
  .fan-card{ width:180px; height:290px; }
  .reel-info p{ max-width:70vw; }
}
@media (max-height: 700px) and (max-width: 600px){
  .brand{ margin-top:4px; }
  .logo{ font-size:44px; }
  .tagline{ font-size:12px; }
  .fan-wrap{ height:365px; margin-top:8px; }
  .fan-card{ width:min(62vw, 220px); height:340px; }
  .hero-foot{ margin-top:10px; }
}
@media (min-width: 900px){
  .hero{ padding-top: 30px; }
  .fan-card{ width:168px; margin:-127px 0 0 -84px; }
}

@media (hover:none){
  .icon-btn:hover, .social-btn:hover{ transform:none; }
  .arrow-btn:hover{ background:transparent; color:var(--red); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .fan-card, .reel-view{ transition: none; }
  .fan-card.is-active::after{ animation:none; background-position:left center, right center; }
  .reel-media{ animation: none; }
  .reel-progress .bar.active span{ animation: none; width: 40%; }
}

/* storefront actions and cart */
.top-actions{display:flex;align-items:center;gap:9px}.cart-icon{position:relative}.cart-icon span{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#08033D;color:#FDCCE6;font-size:10px;font-weight:700;display:grid;place-items:center}.product-cart-link{padding:9px 14px;border-radius:999px;background:#08033D;color:#FDCCE6;font-size:12px;font-weight:700;white-space:nowrap}.add-cart-form{margin-top:11px}.add-cart-form button{width:100%;padding:9px;border:0;border-radius:999px;background:#08033D;color:#FDCCE6;font-size:12px;font-weight:700}.add-cart-form button:disabled{opacity:.45;cursor:not-allowed}
.cart-page{margin:0;min-height:100vh;background:linear-gradient(180deg,#FDCCE6,#f9e5f0 48%,#08033D 140%);color:#08033D}.cart-shell{width:min(1050px,calc(100% - 28px));margin:0 auto;padding:30px 0 70px}.cart-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.cart-header h1{margin:0}.cart-header a{font-weight:600}.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px;align-items:start}.cart-items,.cart-summary,.checkout-card{border-radius:20px;background:rgba(255,255,255,.95);box-shadow:0 15px 35px rgba(8,3,61,.13)}.cart-item{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px;border-bottom:1px solid #eee4eb}.cart-item:last-child{border:0}.cart-item img{width:100px;height:100px;border-radius:13px;object-fit:cover}.cart-item h2{margin:0 0 5px;font-size:17px}.cart-item-info form{display:inline-block;margin:10px 8px 0 0}.cart-item-info label{font-size:12px;font-weight:600}.cart-item-info input{width:58px;padding:6px;border:1px solid #ccc;border-radius:7px}.cart-item-info button{padding:7px 10px;border:0;border-radius:999px;background:#08033D;color:#fff}.cart-item-info .cart-remove{background:transparent;color:#a5223a}.cart-line-total{white-space:nowrap}.cart-summary{padding:22px}.cart-summary h2{margin-top:0}.cart-summary div{display:flex;justify-content:space-between;padding:15px 0;border-top:1px solid #eee}.place-order{display:flex;justify-content:center;padding:13px 18px;border-radius:999px;background:#08033D;color:#FDCCE6;font-weight:700}.cart-empty{padding:60px 20px;text-align:center}.cart-empty a{color:#08033D;font-weight:700;text-decoration:underline}.cart-alert{padding:12px 16px;border-radius:10px;background:#e4f7e9;color:#1a6730}.checkout-card{width:min(500px,calc(100% - 28px));margin:60px auto;padding:35px;text-align:center}.checkout-card img{width:220px;max-height:100px;object-fit:contain}
.cart-controls{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.cart-item-info .cart-controls form{margin:10px 0 0}.cart-controls .cart-line-total{margin:10px 0 0 auto;font-size:13px}.cart-item-info .cart-remove{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(165,34,58,.2);background:#fff0f3;color:#a5223a}.cart-remove svg{width:18px;height:18px}
@media(max-width:700px){.cart-shell{width:calc(100% - 18px);padding:16px 0 35px}.cart-layout{grid-template-columns:1fr;gap:14px}.cart-items,.cart-summary{border-radius:15px}.cart-item{grid-template-columns:72px minmax(0,1fr) auto;gap:10px;padding:12px 10px;align-items:start}.cart-item img{width:72px;height:84px;border-radius:10px}.cart-item h2{font-size:14px;line-height:1.35;margin-bottom:3px}.cart-item-info>strong{font-size:13px}.cart-item-info input{width:50px;padding:5px}.cart-line-total{grid-column:auto;font-size:13px;align-self:center}.cart-header{align-items:flex-start;flex-direction:column-reverse;margin-bottom:15px}.cart-header h1{font-size:27px}.cart-summary{padding:17px;position:sticky;bottom:8px}.cart-summary h2{font-size:17px}.add-cart-form button{padding:8px 5px;font-size:10px}}
@media(max-width:380px){.cart-item{grid-template-columns:62px minmax(0,1fr)}.cart-item img{width:62px;height:75px}.cart-controls{gap:5px}.cart-controls .cart-line-total{font-size:11px}.cart-summary{bottom:4px}}
.product-cart-link{position:relative;display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;background:#08033D;color:#FDCCE6}.product-cart-link svg{width:21px;height:21px}.product-cart-link span{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border:2px solid #FDCCE6;border-radius:999px;background:#fff;color:#08033D;font-size:9px;font-weight:700}
.hero>.home-search{width:min(520px,calc(100% - 28px));margin:8px auto 0}
@media(max-width:600px){.topbar{grid-template-columns:42px auto}.hero>.home-search{width:min(94%,420px);margin-top:5px}}
.cart-page{background:linear-gradient(180deg,#FDCCE6 0%,#FDCCE6 25%,#08033D 62%,#08033D 100%)}