/* =========================================================================
   ParvandBoom landing page — stylesheet
   One file, plain CSS, no build step. Organized top to bottom in the same
   order the page is built: fonts, page shell, background layers, the glass
   panel/nav, the scrolling pages, the footer, then responsive adjustments
   at the bottom.
   ========================================================================= */

/* ---- Peyda webfont (7 weights) ---- */
@font-face { font-family:"Peyda"; font-weight:100; font-style:normal; font-display:swap; src:url("assets/fonts/PeydaWeb-Thin.woff2") format("woff2"); }
@font-face { font-family:"Peyda"; font-weight:300; font-style:normal; font-display:swap; src:url("assets/fonts/PeydaWeb-Light.woff2") format("woff2"); }
@font-face { font-family:"Peyda"; font-weight:400; font-style:normal; font-display:swap; src:url("assets/fonts/PeydaWeb-Regular.woff2") format("woff2"); }
@font-face { font-family:"Peyda"; font-weight:500; font-style:normal; font-display:swap; src:url("assets/fonts/PeydaWeb-Medium.woff2") format("woff2"); }
@font-face { font-family:"Peyda"; font-weight:600; font-style:normal; font-display:swap; src:url("assets/fonts/PeydaWeb-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"Peyda"; font-weight:700; font-style:normal; font-display:swap; src:url("assets/fonts/PeydaWeb-Bold.woff2") format("woff2"); }
@font-face { font-family:"Peyda"; font-weight:900; font-style:normal; font-display:swap; src:url("assets/fonts/PeydaWeb-Black.woff2") format("woff2"); }

:root {
  --color-brand:#5d6f3c;
  --color-accent:#d98a3d;
  --color-clay:#be5e3c;
  --ease-out: cubic-bezier(.22,.7,.2,1);
  --ease-snap: cubic-bezier(.76,0,.24,1);
}

* { box-sizing:border-box; }

html, body {
  margin:0;
  height:100%;
  overflow:hidden;
  background:#16100a;
  font-family:"Peyda","Segoe UI",Tahoma,sans-serif;
  color:#f3ebdc;
}

::selection { background:#d98a3d; color:#16100a; }

button { font-family:inherit; }

@keyframes pb-bob {
  0%,100% { transform:translateY(0); opacity:.55; }
  50%     { transform:translateY(7px); opacity:1; }
}
@keyframes pb-drift {
  0%   { transform:translate(0,0) scale(1.08); filter:blur(7px) hue-rotate(0deg); }
  50%  { transform:translate(-3.5%,2.5%) scale(1.18); filter:blur(7px) hue-rotate(-14deg); }
  100% { transform:translate(2.5%,-2%) scale(1.1); filter:blur(7px) hue-rotate(9deg); }
}

/* Only elements that actually carry a link look and behave clickable on the
   live site. Everything else (plain headings, prices, labels) keeps the normal
   arrow cursor, so nothing pretends to be clickable when it isn't. */
.pb-linked { cursor:pointer; }
/* Images can carry a link too (logo, badge, product photos). They keep their
   own class, so the pointer cursor is driven by the attribute instead. */
[data-ed-kind="image"][data-href] { cursor:pointer; }

/* ---- App shell ---- */
#pb-app {
  position:fixed;
  inset:0;
  overflow:hidden;
  background:#16100a;
}

/* ---- Locked video background (mirrored, always looping, behind every page) ---- */
.pb-bg {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#0d0a07;
  filter:hue-rotate(var(--page-hue, 0deg)) saturate(1.06);
  transition:filter 1s var(--ease-out);
}
.pb-bg__gradient {
  position:absolute; inset:0;
  background:linear-gradient(135deg,#2a1c10 0%,#170f09 60%,#100b06 100%);
}
.pb-bg__glow {
  position:absolute; inset:-12%;
  background:
    radial-gradient(38% 50% at 28% 34%, rgba(217,138,61,.62), transparent 62%),
    radial-gradient(42% 56% at 74% 64%, rgba(93,111,60,.55), transparent 62%),
    radial-gradient(46% 55% at 58% 16%, rgba(190,94,60,.48), transparent 60%);
  animation:pb-drift 22s ease-in-out infinite alternate;
}
/* When the video is actually playing it completely covers this fallback layer,
   so removing it is invisible — but it stops a full-screen animated blur that
   was repainting every frame. (Set by script.js once the video plays.) */
#pb-app.pb-video-on .pb-bg__glow { display:none; }
.pb-bg video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scaleX(-1);
}

/* constant contrast scrim so text stays legible over the video */
.pb-scrim {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,8,5,.56) 0%, rgba(11,8,5,.28) 34%, rgba(11,8,5,.32) 64%, rgba(11,8,5,.62) 100%);
}
/* per-page colour wash */
.pb-tint {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:var(--page-tint, rgba(217,138,61,.12));
  transition:background 1s var(--ease-out);
}

/* ---- Morphing glass: hero right-half panel collapses up into the header bar ---- */
.pb-glass-hero {
  position:fixed; z-index:46; pointer-events:none;
  top:0; right:0; width:50%; height:100%;
  background:linear-gradient(135deg, rgba(250,246,238,.12), rgba(58,71,39,.08));
  -webkit-backdrop-filter:blur(16px) saturate(1.15) brightness(1.05);
  backdrop-filter:blur(16px) saturate(1.15) brightness(1.05);
  border-left:1px solid rgba(255,255,255,.16);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20889%201000'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask%20id='k'%3E%3Crect%20width='889'%20height='1000'%20fill='white'/%3E%3Ctext%20x='444'%20y='248'%20font-family='Arial%20Black,Impact,sans-serif'%20font-weight='900'%20font-size='150'%20text-anchor='middle'%20fill='black'%20textLength='600'%20lengthAdjust='spacing'%3EPARVAND%3C/text%3E%3Ctext%20x='444'%20y='383'%20font-family='Arial%20Black,Impact,sans-serif'%20font-weight='900'%20font-size='150'%20text-anchor='middle'%20fill='black'%20textLength='600'%20lengthAdjust='spacing'%3EBOOM%3C/text%3E%3C/mask%3E%3C/defs%3E%3Crect%20width='889'%20height='1000'%20fill='white'%20mask='url(%23k)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20889%201000'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask%20id='k'%3E%3Crect%20width='889'%20height='1000'%20fill='white'/%3E%3Ctext%20x='444'%20y='248'%20font-family='Arial%20Black,Impact,sans-serif'%20font-weight='900'%20font-size='150'%20text-anchor='middle'%20fill='black'%20textLength='600'%20lengthAdjust='spacing'%3EPARVAND%3C/text%3E%3Ctext%20x='444'%20y='383'%20font-family='Arial%20Black,Impact,sans-serif'%20font-weight='900'%20font-size='150'%20text-anchor='middle'%20fill='black'%20textLength='600'%20lengthAdjust='spacing'%3EBOOM%3C/text%3E%3C/mask%3E%3C/defs%3E%3Crect%20width='889'%20height='1000'%20fill='white'%20mask='url(%23k)'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity:0;
  /* visibility flips to hidden only AFTER the fade finishes (delay = .95s), so
     off the hero page this heavy backdrop-filter panel is skipped entirely by
     the compositor — invisible either way, but far cheaper. */
  visibility:hidden;
  transform:translateY(-46%);
  transition:opacity .8s var(--ease-snap), transform .95s var(--ease-snap), visibility 0s linear .95s;
}
#pb-app.is-hero .pb-glass-hero {
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .8s var(--ease-snap), transform .95s var(--ease-snap), visibility 0s;
}

.pb-glass-header {
  position:fixed; z-index:46; pointer-events:none;
  top:0; right:0; width:50%; height:84px;
  background:linear-gradient(180deg, rgba(250,246,238,.11), rgba(58,71,39,.06));
  -webkit-backdrop-filter:blur(15px) saturate(1.15);
  backdrop-filter:blur(15px) saturate(1.15);
  border-left:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.13);
  border-radius:0 0 0 20px;
  box-shadow:0 14px 40px rgba(0,0,0,.18);
  opacity:1; visibility:visible;
  transition:opacity .7s var(--ease-snap), visibility 0s;
}
/* On the hero page the header bar is invisible — flip it to hidden after the
   fade so its backdrop-filter isn't composited there. */
#pb-app.is-hero .pb-glass-header {
  opacity:0; visibility:hidden;
  transition:opacity .7s var(--ease-snap), visibility 0s linear .7s;
}

/* hero intro paragraph, bottom-right of the glass panel.
   left is pinned to the glass panel's left edge (50% + a little breathing
   room) as a percentage, not a fixed px, so the text column can never spill
   past the panel and collide with the Persian headline on the left half —
   at any viewport width. */
.pb-hero-copy {
  position:fixed; z-index:47;
  left:52%; right:52px; bottom:92px;
  display:flex; flex-direction:column; align-items:flex-start; /* RTL: right edge */
  text-align:right;
  /* Interactive ONLY on the hero page. Off the hero it's invisible (opacity 0)
     but still occupies the bottom-right area, so left interactive it would
     steal clicks from the product cards underneath and pop up edit chips on
     every page. pointer-events:none off-hero fixes both. */
  pointer-events:none;
  opacity:0; transform:translateY(30px);
  transition:opacity .8s var(--ease-snap), transform .9s var(--ease-snap);
}
#pb-app.is-hero .pb-hero-copy { opacity:1; transform:translateY(0); pointer-events:auto; }
.pb-hero-copy p {
  margin:0; font-size:17px; line-height:1.85; color:#f3ebdc;
  text-shadow:0 1px 16px rgba(0,0,0,.55);
}
/* Shop call-to-action button (glass). Desktop: above the intro. */
.pb-hero-shop {
  order:-1; margin-bottom:16px;
  display:inline-block; font-weight:700; font-size:14px; letter-spacing:.5px;
  color:#faf6ee; padding:11px 26px; border-radius:999px;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(255,255,255,.32);
  text-shadow:0 1px 10px rgba(0,0,0,.4);
  transition:background .2s, border-color .2s, transform .2s;
}
.pb-hero-shop.pb-linked:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.55); transform:translateY(-1px); }

/* scroll hint, anchored just inside the glass panel's left edge */
.pb-scroll-hint {
  position:fixed; z-index:47; left:53%; bottom:34px;
  transform:translateX(-50%);
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:#faf6ee; text-shadow:0 1px 12px rgba(0,0,0,.5);
  opacity:0; pointer-events:none;
  transition:opacity .8s var(--ease-snap);
}
#pb-app.is-hero .pb-scroll-hint { opacity:1; pointer-events:auto; }
.pb-scroll-hint .pb-scroll-hint__label { font-size:11px; font-weight:600; letter-spacing:2px; opacity:.85; }
.pb-scroll-hint .pb-scroll-hint__arrow { display:block; animation:pb-bob 1.8s ease-in-out infinite; }

/* ---- Top navigation ----
   Flat flex row. On desktop: logo (right in RTL) · divider · menu links ·
   then the contact pill pushed to the far left with an auto margin. */
.pb-nav {
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center;
  padding:26px 46px; pointer-events:none;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
  gap:26px;
}
.pb-nav > * { pointer-events:auto; }
.pb-nav__logo { display:flex; align-items:center; gap:12px; }
.pb-nav__logo img { height:40px; width:auto; display:block; filter:brightness(1.75) saturate(1.35); }
.pb-nav__logo span { font-weight:900; font-size:18px; letter-spacing:.5px; color:#fff; white-space:nowrap; }
.pb-nav__divider { width:1px; height:22px; background:rgba(255,255,255,.28); flex-shrink:0; }
.pb-nav__link {
  font-weight:600; font-size:14px; color:#fff; letter-spacing:.2px;
  padding:4px 0; opacity:.92; white-space:nowrap; user-select:none;
}
.pb-nav__link.pb-linked:hover { opacity:1; }
.pb-nav__contact {
  display:inline-block; margin-inline-start:auto; /* push to the far (left) end */
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
  backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid rgba(255,255,255,.30);
  border-radius:999px; font-weight:600; font-size:13px;
  color:#fff; letter-spacing:1px; padding:9px 20px; white-space:nowrap;
  user-select:none;
  transition:background .2s, border-color .2s;
}
.pb-nav__contact.pb-linked:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5); }

/* ---- Right-edge dot pager + page counter ---- */
.pb-dots {
  position:fixed; right:30px; top:50%; transform:translateY(-50%); z-index:55;
  display:flex; flex-direction:column; gap:13px; align-items:center;
  mix-blend-mode:difference;
}
.pb-dots button {
  width:9px; height:9px; border-radius:999px; border:1.5px solid #fff;
  background:transparent; cursor:pointer; padding:0;
  transition:all .4s cubic-bezier(.4,0,.2,1);
}
.pb-dots button.is-active { background:#fff; transform:scale(1.35); }

.pb-page-label {
  position:fixed; right:24px; bottom:32px; z-index:55;
  font-size:12px; font-weight:700; letter-spacing:2px; color:#fff;
  mix-blend-mode:difference; font-variant-numeric:tabular-nums;
}

/* ---- The scrolling stack ---- */
.pb-stack {
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;
  will-change:transform;
  transition:transform .95s var(--ease-snap);
}
.pb-section { position:relative; width:100%; height:100vh; overflow:hidden; }

/* ===== Hero page ===== */
.pb-hero-section::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(60deg, rgba(11,8,5,.74) 0%, rgba(11,8,5,.30) 44%, transparent 64%);
}
.pb-hero-word { position:absolute; left:46px; bottom:54px; z-index:5; max-width:60%; }
.pb-hero-word .pb-hero-word__overline {
  font-size:13px; font-weight:600; letter-spacing:3px; color:#e8dcc4; opacity:.8; margin-bottom:14px;
}
.pb-hero-word h1 {
  margin:0; font-weight:900; font-size:clamp(70px,11vw,165px); line-height:.9;
  color:#faf6ee; letter-spacing:-2px; text-shadow:0 6px 50px rgba(0,0,0,.45);
}

/* ===== Product pages ===== */
.pb-product::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(72% 82% at 50% 40%, rgba(11,8,5,.42), transparent 72%);
}
.pb-watermark {
  position:absolute; left:-1.2vw; bottom:-4vh; z-index:1;
  font-weight:900; font-size:30vw; line-height:.8; color:#fff; letter-spacing:-1vw;
  pointer-events:none; opacity:0; transform:translateX(70px);
  transition:opacity 1.3s var(--ease-out), transform 1.4s var(--ease-out);
}
.pb-product.is-active .pb-watermark { opacity:.05; transform:translateX(0); }

.pb-product__inner {
  position:relative; z-index:3; height:100%; max-width:1240px; margin:0 auto;
  padding:118px 56px 64px; display:flex; flex-direction:column; justify-content:center;
  overflow-y:auto;
}
/* Keep the panels scrollable on short windows, but never show a scrollbar
   (a stray left-edge bar was appearing on desktop). */
.pb-product__inner, .pb-footer__inner { scrollbar-width:none; -ms-overflow-style:none; }
.pb-product__inner::-webkit-scrollbar, .pb-footer__inner::-webkit-scrollbar { width:0; height:0; }

.pb-product__head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  opacity:0; transform:translateY(46px);
  transition:opacity .9s var(--ease-out) .1s, transform 1s var(--ease-out) .1s;
}
.pb-product.is-active .pb-product__head { opacity:1; transform:translateY(0); }
/* category title + its small "open in shop" button, side by side */
.pb-product__title-row { display:flex; align-items:center; gap:14px; }
.pb-product__head h2 {
  margin:0; font-weight:900; font-size:clamp(40px,6vw,82px); line-height:.95;
  color:#faf6ee; letter-spacing:-1px;
}
/* The little shop button. It only appears on the live site when a link is set;
   in Editorial mode it always shows (faint when still empty) so you can point
   it at that category's page in your shop. */
.pb-product__shop {
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#faf6ee; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
  transition:background .2s, border-color .2s, transform .2s;
}
.pb-product__shop svg { display:block; }
.pb-product__shop.pb-linked:hover { background:var(--accent); border-color:var(--accent); color:#16100a; transform:translateY(-1px); }
/* live site: hide it until the owner attaches a link */
.pb-product__shop:not(.pb-linked) { display:none; }
body.pb-editorial .pb-product__shop { display:inline-flex; }
body.pb-editorial .pb-product__shop:not(.pb-linked) { opacity:.5; border-style:dashed; }
.pb-product__meta { display:flex; align-items:center; gap:16px; }
.pb-product__overline { font-size:12px; font-weight:700; letter-spacing:3px; text-align:left; color:var(--accent); }
.pb-product__num {
  font-weight:900; font-size:clamp(54px,7vw,96px); line-height:1;
  color:rgba(255,255,255,.12); font-variant-numeric:tabular-nums;
}

.pb-product__story {
  margin:22px 0 0; max-width:560px; font-size:16px; line-height:1.85; color:#e8dcc4;
  opacity:0; transform:translateY(34px);
  transition:opacity 1s var(--ease-out) .18s, transform 1s var(--ease-out) .18s;
}
.pb-product.is-active .pb-product__story { opacity:1; transform:translateY(0); }

/* One row on desktop, always: the column count is the number of cards (set by
   PHP as --cols), and minmax(0,1fr) lets the cards shrink to share the row
   instead of wrapping. The mobile rule below overrides this to a 2-up grid. */
.pb-cards { display:grid; grid-template-columns:repeat(var(--cols,4), minmax(0,1fr)); gap:20px; margin-top:40px; }
.pb-card {
  align-self:start; /* each card hugs its own content, so a card with the price
                       and "+" removed becomes genuinely shorter */
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(13px) saturate(1.12);
  backdrop-filter:blur(13px) saturate(1.12);
  border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:13px;
  display:flex; flex-direction:column; gap:13px;
  box-shadow:0 12px 34px rgba(0,0,0,.20);
  opacity:0; transform:translateY(38px);
  transition:opacity .85s var(--ease-out), transform .9s var(--ease-out);
}
.pb-card:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.26); }
/* Reveal EVERY card when its page is active (not just the first four) so an
   added 5th/6th card fades in like the rest. The first four keep a staggered
   delay; any beyond that share the last step. */
.pb-product.is-active .pb-card { opacity:1; transform:translateY(0); transition-delay:.49s; }
.pb-product.is-active .pb-card:nth-child(1) { transition-delay:.22s; }
.pb-product.is-active .pb-card:nth-child(2) { transition-delay:.31s; }
.pb-product.is-active .pb-card:nth-child(3) { transition-delay:.40s; }
.pb-product.is-active .pb-card:nth-child(4) { transition-delay:.49s; }

.pb-card__photo {
  width:100%; aspect-ratio:1/1; max-height:34vh; border-radius:13px;
  overflow:hidden; background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.14);
}
.pb-card__photo img { width:100%; height:100%; object-fit:cover; display:block; }
.pb-card__placeholder {
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; color:rgba(243,235,220,.55); text-align:center; padding:10px;
}
.pb-card__placeholder svg { opacity:.6; }
.pb-card__placeholder span { font-size:11px; line-height:1.5; }
.pb-card__placeholder code {
  display:block; margin-top:2px; font-size:10px; color:rgba(243,235,220,.4); direction:ltr; unicode-bidi:embed;
}

.pb-card__body { display:flex; flex-direction:column; gap:3px; }
.pb-card__name { font-weight:700; font-size:17px; color:#f3ebdc; }
.pb-card__weight { font-size:13px; color:#b9a37e; }
/* Custom text lines added in Editorial mode (font & colour are per-line) */
.pb-card__text { position:relative; font-size:15px; line-height:1.7; color:#e8dcc4; margin-top:4px; }
.pb-card__footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:4px; }
.pb-card__price { font-weight:800; font-size:16px; color:var(--accent); }
.pb-card__add {
  flex-shrink:0;
  width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#faf6ee; font-size:19px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
/* When the price and/or "+" is removed in Editorial mode, hide it on the live
   site; if both go, the whole footer collapses so the card shrinks. */
.pb-card__price.is-hidden, .pb-card__add.is-hidden, .pb-card__footer.is-hidden { display:none; }
.pb-card__add:hover { background:#d98a3d; border-color:#d98a3d; color:#16100a; }

/* ===== Footer page ===== */
.pb-footer { background:linear-gradient(180deg, rgba(11,8,5,.52) 0%, rgba(11,8,5,.74) 100%); }
.pb-footer__watermark {
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:1;
  font-weight:900; font-size:26vw; color:rgba(255,255,255,.035); white-space:nowrap; pointer-events:none;
}
/* Everything on the footer page is centered. */
.pb-footer__inner {
  position:relative; z-index:3; height:100%; max-width:1180px; margin:0 auto;
  padding:130px 56px 56px; display:flex; flex-direction:column; align-items:center;
  text-align:center;
  opacity:0; transform:translateY(46px);
  transition:opacity .9s var(--ease-out), transform 1s var(--ease-out);
  overflow-y:auto;
}
.pb-footer.is-active .pb-footer__inner { opacity:1; transform:translateY(0); }

.pb-footer__brand { display:flex; align-items:center; justify-content:center; gap:18px; }
.pb-footer__brand img { height:78px; width:auto; display:block; filter:brightness(1.75) saturate(1.35); }
.pb-footer__brand-fa { font-weight:900; font-size:40px; color:#faf6ee; letter-spacing:-.5px; line-height:1; }
.pb-footer__brand-en { font-size:13px; color:#b9a37e; margin-top:6px; letter-spacing:2px; }

.pb-footer__divider { height:1px; width:100%; background:rgba(255,255,255,.1); margin:42px 0; }
.pb-footer__grid {
  display:grid; grid-template-columns:repeat(3, auto); justify-content:center;
  gap:64px; align-items:start; width:100%;
}
.pb-footer__grid > div { display:flex; flex-direction:column; align-items:center; }
.pb-footer__col-title { font-size:12px; font-weight:700; letter-spacing:2px; color:#d98a3d; margin-bottom:16px; }
.pb-footer__address { display:flex; align-items:center; justify-content:center; gap:11px; color:#e8dcc4; font-size:16px; line-height:1.8; max-width:330px; }
.pb-footer__address svg { flex-shrink:0; }
/* Each contact row = decorative icon + an editable text that carries the link */
.pb-footer__contact-row { display:flex; align-items:center; justify-content:center; gap:11px; margin-bottom:18px; }
.pb-footer__contact-row:last-child { margin-bottom:0; }
.pb-footer__contact-row svg { flex-shrink:0; }
.pb-footer__phone { color:#e8dcc4; font-size:17px; font-weight:700; }
.pb-footer__instagram { color:#e8dcc4; font-size:15px; }
.pb-footer__phone.pb-linked:hover, .pb-footer__instagram.pb-linked:hover { color:#faf6ee; }
.pb-footer__badge { display:flex; flex-direction:column; align-items:center; gap:8px; }
.pb-footer__badge-box {
  width:92px; height:112px; border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
}
.pb-footer__badge-box img { width:100%; height:100%; object-fit:cover; display:block; }
.pb-footer__badge-box span { font-size:9px; color:rgba(243,235,220,.5); text-align:center; padding:6px; line-height:1.4; }

.pb-footer__bottom {
  margin-top:auto; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding-top:36px; border-top:1px solid rgba(255,255,255,.08);
  flex-wrap:wrap; gap:6px 22px;
}
.pb-footer__bottom span { font-size:13px; color:#8f7a5a; }

/* =========================================================================
   Responsive adjustments
   ========================================================================= */

/* Tablet: tighten paddings, let the footer grid breathe */
@media (max-width:1024px) {
  .pb-product__inner { padding:110px 40px 56px; }
  .pb-footer__inner { padding:110px 40px 40px; }
  .pb-footer__grid { grid-template-columns:1fr 1fr; }
  .pb-footer__badge { grid-column:1 / -1; flex-direction:row; justify-content:flex-start; gap:16px; }
}

/* ===== Phones & small tablets ===== */
@media (max-width:760px) {
  /* --- Header becomes one real glass bar on EVERY page (hero included) ---
     The desktop-only masked panel and morphing header are dropped; the nav bar
     itself carries the glass so the menu always sits on a frosted background. */
  .pb-glass-hero, .pb-glass-header { display:none !important; }

  .pb-nav {
    flex-wrap:nowrap; justify-content:space-between; align-items:center;
    gap:6px; padding:9px 12px; text-shadow:none;
    background:linear-gradient(180deg, rgba(250,246,238,.13), rgba(58,71,39,.08));
    -webkit-backdrop-filter:blur(16px) saturate(1.15);
    backdrop-filter:blur(16px) saturate(1.15);
    border-bottom:1px solid rgba(255,255,255,.15);
    box-shadow:0 10px 30px rgba(0,0,0,.20);
  }
  /* Logo only (brand text + divider hidden) sits in the same single row as the
     buttons. */
  .pb-nav__logo { order:0; flex:0 0 auto; }
  .pb-nav__logo img { height:26px; }
  .pb-nav__logo span { display:none; }
  .pb-nav__divider { display:none; }
  /* All five buttons: plain text, no box/border, so logo + all buttons fit on
     one line. */
  .pb-nav__link, .pb-nav__contact {
    order:1; margin-inline-start:0; opacity:1; letter-spacing:0;
    font-size:12px; font-weight:600; color:#fff; white-space:nowrap;
    padding:2px 0; border:none; border-radius:0; background:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .pb-nav__link.pb-linked:active, .pb-nav__contact.pb-linked:active { opacity:.7; }

  /* Shared bottom baseline: the page number, the hero wordmark, the product
     watermark and the footer copyright all sit on this line so they read as one
     row, lifted clear of the phone's bottom system bar. */
  #pb-app { --mb: calc(48px + env(safe-area-inset-bottom, 0px)); }

  /* Hero intro sits in the TOP THIRD, right-aligned, with the shop button below. */
  .pb-hero-copy {
    right:20px; left:20px; top:calc(var(--nav-h,80px) + 5vh); bottom:auto;
    transform:none; text-align:right; align-items:flex-start;
  }
  #pb-app.is-hero .pb-hero-copy { transform:none; }
  .pb-hero-shop { order:0; margin:14px 0 0; } /* mobile: below the intro text */

  /* Scroll hint: just the arrow (no label), bottom-right, below the page number. */
  .pb-scroll-hint {
    left:auto; right:10px; transform:none;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .pb-scroll-hint .pb-scroll-hint__label { display:none; }

  /* Hero wordmark near the page-number row — a little bigger and lifted a bit. */
  .pb-hero-word { left:22px; bottom:calc(var(--mb) + 16px); max-width:86%; }
  .pb-hero-word h1 { font-size:clamp(48px,15.5vw,112px); }
  .pb-hero-word__overline { font-size:11px; letter-spacing:2px; margin-bottom:8px; }

  .pb-dots { right:12px; gap:9px; }
  .pb-dots button { width:7px; height:7px; }
  .pb-page-label { right:12px; bottom:var(--mb); font-size:11px; }
  /* Giant product watermark (DATES/HONEY/…) bottom-aligned to the same row. */
  .pb-watermark { left:0; bottom:var(--mb); font-size:24vw; letter-spacing:-.5vw; }

  /* Content clears the (variable-height) glass nav — --nav-h is measured in JS —
     and its bottom clears the phone's system bar via the safe-area inset. */
  .pb-product__inner { padding:calc(var(--nav-h,88px) + 20px) 22px calc(28px + env(safe-area-inset-bottom, 0px)); justify-content:flex-start; }
  .pb-product__head { align-items:flex-start; }
  .pb-product__num { font-size:clamp(40px,14vw,64px); }
  /* Two products per page — the two on the right (first two in this RTL grid). */
  .pb-cards { grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
  .pb-cards .pb-card:nth-child(n+3) { display:none; }
  .pb-card { padding:11px; border-radius:16px; gap:11px; }
  .pb-card__photo { max-height:40vh; }
  .pb-product__story { margin-top:18px; }

  /* Footer bottom row sits 20px above the shared baseline (just above the page
     number). Copyright + domain are centered and may wrap to two short lines. */
  .pb-footer__inner { padding:calc(var(--nav-h,88px) + 20px) 22px calc(var(--mb) + 20px); }
  .pb-footer__brand img { height:56px; }
  .pb-footer__brand-fa { font-size:30px; }
  .pb-footer__grid { grid-template-columns:1fr; gap:30px; justify-content:center; }
  .pb-footer__badge { flex-direction:column; align-items:center; }
  .pb-footer__bottom { flex-wrap:wrap; justify-content:center; gap:2px 12px; padding-top:24px; padding-inline:12px; }
  .pb-footer__bottom span { font-size:11px; }
}

/* Small phone */
@media (max-width:480px) {
  .pb-nav__logo img { height:24px; }
  /* tighten so the logo + all five plain-text buttons stay on one line */
  .pb-nav__link, .pb-nav__contact { font-size:11px; padding:2px 0; }
  .pb-nav { gap:9px; padding:8px 10px; }

  .pb-hero-word h1 { letter-spacing:-1px; font-size:clamp(44px,16.5vw,100px); }
  .pb-hero-copy p { font-size:15px; }
  .pb-scroll-hint .pb-scroll-hint__label { display:none; }

  .pb-product__head h2 { letter-spacing:0; }
  /* keep the two-column, two-product layout from the 760px rule */
  .pb-cards { gap:12px; }
  .pb-card__name { font-size:15px; }
  .pb-card__price { font-size:15px; }

  .pb-footer__brand { flex-wrap:wrap; }
}

/* Short viewports (landscape phones, small laptops): scale back vertical
   paddings so content doesn't get clipped by the 100vh section height. */
@media (max-height:620px) {
  /* Not enough vertical room to center everything and have it all fit —
     align to the top instead so the heading is never clipped, and let the
     page's own scrollbar (not just the snap-scroll) take over if a page is
     still taller than the viewport. */
  .pb-product__inner { padding-top:88px; padding-bottom:24px; justify-content:flex-start; }
  .pb-footer__inner { padding-top:88px; justify-content:flex-start; }
}

/* =========================================================================
   Editorial mode (hidden)
   None of this is visible to normal visitors. The affordances only appear
   under body.pb-editorial, and the modal/bar/popup elements only exist in the
   DOM once editorial.js creates them.
   ========================================================================= */

/* ---- Password modal ---- */
.pb-ed-overlay {
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,6,4,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.pb-ed-modal {
  width:min(92vw, 340px);
  background:#1c140c; color:#f3ebdc;
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  padding:24px 22px; text-align:right;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  font-family:"Peyda","Segoe UI",Tahoma,sans-serif;
}
.pb-ed-modal__title { margin:0 0 6px; font-size:20px; font-weight:900; color:#faf6ee; }
.pb-ed-modal__hint { margin:0 0 16px; font-size:13px; line-height:1.7; color:#b9a37e; }
.pb-ed-modal__actions { display:flex; gap:10px; margin-top:16px; }

/* ---- Shared inputs / buttons ---- */
.pb-ed-input {
  width:100%; box-sizing:border-box;
  background:rgba(255,255,255,.06); color:#faf6ee;
  border:1px solid rgba(255,255,255,.2); border-radius:10px;
  padding:11px 13px; font-size:16px; font-family:inherit; outline:none;
}
.pb-ed-input:focus { border-color:#d98a3d; background:rgba(255,255,255,.09); }
.pb-ed-error { margin-top:10px; font-size:13px; color:#e88a6a; }

.pb-ed-btn {
  flex:1; cursor:pointer; font-family:inherit; font-weight:700; font-size:14px;
  padding:10px 14px; border-radius:10px;
  background:rgba(255,255,255,.08); color:#f3ebdc; border:1px solid rgba(255,255,255,.18);
  transition:background .15s, border-color .15s, opacity .15s;
}
.pb-ed-btn:hover { background:rgba(255,255,255,.15); }
.pb-ed-btn--primary { background:#d98a3d; border-color:#d98a3d; color:#16100a; }
.pb-ed-btn--primary:hover { background:#e3a84e; border-color:#e3a84e; }
.pb-ed-btn:disabled { opacity:.55; cursor:default; }
.pb-ed-btn.is-dirty { box-shadow:0 0 0 3px rgba(217,138,61,.35); }

/* ---- Floating Save / Exit bar ---- */
.pb-ed-bar {
  position:fixed; z-index:100000; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  padding:10px 12px 10px 16px;
  background:rgba(28,20,12,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  box-shadow:0 16px 44px rgba(0,0,0,.5);
  font-family:"Peyda","Segoe UI",Tahoma,sans-serif;
}
.pb-ed-bar .pb-ed-btn { flex:0 0 auto; }
.pb-ed-bar__label {
  font-size:12px; font-weight:800; letter-spacing:1px; color:#e3a84e;
  padding-inline:6px; white-space:nowrap;
}
.pb-ed-bar__note { font-size:13px; font-weight:700; color:#9aa873; padding-inline:4px; white-space:nowrap; }

/* ---- Link-URL popup ---- */
.pb-ed-popup {
  position:fixed; z-index:100000; width:min(92vw, 320px);
  background:#1c140c; color:#f3ebdc;
  border:1px solid rgba(255,255,255,.16); border-radius:12px;
  padding:14px; box-shadow:0 18px 50px rgba(0,0,0,.5);
  font-family:"Peyda","Segoe UI",Tahoma,sans-serif; text-align:right;
}
.pb-ed-popup__label { display:block; font-size:12px; font-weight:700; color:#b9a37e; margin-bottom:8px; }
.pb-ed-popup__actions { display:flex; gap:8px; margin-top:12px; }

/* ---- In-page editing affordances (only under body.pb-editorial) ---- */
body.pb-editorial [data-ed] {
  cursor:pointer;
  transition:outline-color .12s, background-color .12s;
  outline:1.5px dashed transparent; outline-offset:3px;
  border-radius:3px;
}
body.pb-editorial [data-ed]:hover {
  outline-color:rgba(217,138,61,.85);
  background-color:rgba(217,138,61,.10);
}
body.pb-editorial [data-ed-kind="image"]:hover { outline-color:rgba(154,168,115,.95); }

/* The giant faint watermark sits BEHIND the content panel (z-index:1 vs 3), so
   it normally can't be hovered/clicked to edit. In Editorial mode we let clicks
   fall THROUGH the panel's empty areas to reach it: the panel stops catching
   events, but each of its real blocks (title, story, cards, the editorial bar)
   keeps catching them — so cards stay fully editable while the watermark
   becomes reachable in the gaps around them. */
body.pb-editorial .pb-product__inner { pointer-events:none; }
body.pb-editorial .pb-product__inner > * { pointer-events:auto; }
body.pb-editorial .pb-watermark { pointer-events:auto; }

/* the element currently being typed into */
body.pb-editorial .pb-ed-editing {
  outline:2px solid #d98a3d !important; outline-offset:3px;
  background-color:rgba(0,0,0,.32);
  cursor:text;
}

/* a slot mid-upload */
body.pb-editorial .pb-ed-busy { opacity:.5; pointer-events:none; }

/* While editing, the hero intro/shop and the scroll hint accept clicks so their
   text can be selected — but ONLY on the hero page, otherwise (invisible off
   the hero) they'd steal clicks and show edit chips over the product cards. */
body.pb-editorial #pb-app.is-hero .pb-hero-copy,
body.pb-editorial #pb-app.is-hero .pb-scroll-hint { pointer-events:auto; }

/* Floating "🔗" chip: follows the hovered text element so any text/button can
   get a link. Hidden until positioned + made visible by editorial.js. */
.pb-ed-linkchip {
  position:fixed; z-index:100001; top:0; left:0;
  width:26px; height:26px; border-radius:50%;
  background:#d98a3d; color:#16100a; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.5); cursor:pointer;
  opacity:0; transform:scale(.6); pointer-events:none;
  transition:opacity .12s, transform .12s;
}
.pb-ed-linkchip.is-visible { opacity:1; transform:scale(1); pointer-events:auto; }
.pb-ed-linkchip:hover { background:#e3a84e; }

/* Floating "🎨" chip: opens the font/colour editor for the hovered text. */
.pb-ed-stylechip {
  position:fixed; z-index:100001; top:0; left:0;
  width:26px; height:26px; border-radius:50%;
  background:#5d6f3c; color:#fff; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.5); cursor:pointer;
  opacity:0; transform:scale(.6); pointer-events:none;
  transition:opacity .12s, transform .12s;
}
.pb-ed-stylechip.is-visible { opacity:1; transform:scale(1); pointer-events:auto; }
.pb-ed-stylechip:hover { background:#788a52; }

/* Style popup controls */
.pb-ed-stylepop .pb-ed-popup__label { display:block; margin:10px 0 6px; }
.pb-ed-stylepop .pb-ed-popup__label:first-child { margin-top:0; }
.pb-ed-stylepop input[type=range] { width:100%; accent-color:#d98a3d; }
.pb-ed-stylepop input[type=color] {
  width:100%; height:34px; padding:0; border:1px solid rgba(255,255,255,.2);
  border-radius:8px; background:rgba(255,255,255,.06); cursor:pointer;
}
.pb-ed-stylepop select {
  width:100%; box-sizing:border-box; padding:9px 10px; border-radius:8px;
  background:#1c140c; color:#faf6ee; border:1px solid rgba(255,255,255,.2);
  font-family:inherit; font-size:14px;
}
.pb-ed-stylepop .pb-ed-fsval { color:#e3a84e; }

/* Watermark popup: two side-by-side groups (desktop / mobile), each with a size
   and an opacity slider. */
.pb-ed-wmpop { width:340px; max-width:calc(100vw - 24px); }
.pb-ed-wmpop__head {
  font-size:13px; font-weight:800; color:#f3ebdc; margin-bottom:12px;
  padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.12);
}
.pb-ed-wmpop__hint { display:block; font-size:11px; font-weight:600; color:#b9a37e; margin-top:4px; }
.pb-ed-wmpop .pb-ed-wmgrp { margin-bottom:14px; }
.pb-ed-wmpop .pb-ed-wmgrp > b {
  display:block; font-size:12px; font-weight:800; color:#e3a84e;
  margin-bottom:6px; letter-spacing:.02em;
}
.pb-ed-wmpop .pb-ed-popup__label .v { color:#e3a84e; }

/* Floating "×" chip: appears at the corner of the price / "+" button to remove
   it. Same follow-the-hover behaviour as the link chip, but red. */
.pb-ed-delchip {
  position:fixed; z-index:100001; top:0; left:0;
  width:24px; height:24px; border-radius:50%;
  background:#c0392b; color:#fff; font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.5); cursor:pointer;
  opacity:0; transform:scale(.6); pointer-events:none;
  transition:opacity .12s, transform .12s;
}
.pb-ed-delchip.is-visible { opacity:1; transform:scale(1); pointer-events:auto; }
.pb-ed-delchip:hover { background:#e04b3a; }

/* ---- Structural editing (Editorial only) ---- */
/* Ghost "add product" card at the end of each grid */
.pb-ed-addcard {
  /* Full-width row of its own so it never squeezes the real cards out of their
     single row (which now has a fixed column count = number of products). */
  grid-column:1 / -1; align-self:stretch; min-height:66px;
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:10px;
  cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; color:#e3a84e;
  background:rgba(217,138,61,.06);
  border:1.5px dashed rgba(217,138,61,.55); border-radius:18px; padding:20px 12px;
  transition:background .15s, border-color .15s;
}
.pb-ed-addcard span { font-size:26px; line-height:1; font-weight:400; }
.pb-ed-addcard:hover { background:rgba(217,138,61,.14); border-color:#e3a84e; }

/* Red "×" pinned to each card: removes that product */
body.pb-editorial .pb-card { position:relative; }
.pb-ed-cardx {
  position:absolute; top:-9px; left:-9px; z-index:6;
  width:24px; height:24px; border-radius:50%; border:none; cursor:pointer;
  background:#c0392b; color:#fff; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.pb-ed-cardx:hover { background:#e04b3a; }

/* Momentary transition/animation freeze while Editorial swaps in fresh markup,
   so the current page doesn't re-fade after an add/remove. */
#pb-stack.pb-ed-noanim, #pb-stack.pb-ed-noanim * { transition:none !important; animation:none !important; }

/* Menu button controls: "×" on each menu item, "+" to add one. */
body.pb-editorial .pb-nav { flex-wrap:wrap; }
body.pb-editorial .pb-nav__link { position:relative; }
.pb-ed-navx {
  position:absolute; top:-9px; left:-8px; z-index:6;
  width:18px; height:18px; border-radius:50%; border:none; cursor:pointer;
  background:#c0392b; color:#fff; font-size:12px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.pb-ed-navx:hover { background:#e04b3a; }
.pb-ed-addnav {
  cursor:pointer; font-family:inherit; font-weight:700; font-size:15px; line-height:1;
  width:24px; height:24px; border-radius:50%;
  color:#e3a84e; background:rgba(217,138,61,.12);
  border:1.5px dashed rgba(217,138,61,.6);
  display:inline-flex; align-items:center; justify-content:center;
}
.pb-ed-addnav:hover { background:rgba(217,138,61,.22); }

/* Page-level bar under the cards: add a new page / delete this page */
.pb-ed-secbar { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.pb-ed-secbar button {
  cursor:pointer; font-family:inherit; font-size:12px; font-weight:700;
  color:#e3a84e; background:rgba(217,138,61,.08);
  border:1.5px dashed rgba(217,138,61,.55); border-radius:999px; padding:7px 16px;
  transition:background .15s;
}
.pb-ed-secbar button:hover { background:rgba(217,138,61,.18); }
.pb-ed-secbar .pb-ed-secbar__del { color:#e88a6a; border-color:rgba(192,57,43,.6); background:rgba(192,57,43,.08); }
.pb-ed-secbar .pb-ed-secbar__del:hover { background:rgba(192,57,43,.2); }
.pb-ed-secbar .pb-ed-secbar__move { color:#cdd9b0; border-color:rgba(154,168,115,.6); background:rgba(154,168,115,.10); border-style:solid; }
.pb-ed-secbar .pb-ed-secbar__move:hover { background:rgba(154,168,115,.22); }

/* "+ افزودن نوشته" button inside a card, and the "×" on each custom text line */
.pb-ed-addtext {
  align-self:flex-start; margin-top:8px; cursor:pointer; font-family:inherit;
  font-size:11px; font-weight:700; color:#9aa873;
  background:rgba(154,168,115,.10); border:1px dashed rgba(154,168,115,.55);
  border-radius:999px; padding:4px 12px; transition:background .15s;
}
.pb-ed-addtext:hover { background:rgba(154,168,115,.2); }
.pb-ed-textx {
  position:absolute; top:-8px; left:-8px; z-index:6;
  width:20px; height:20px; border-radius:50%; border:none; cursor:pointer;
  background:#c0392b; color:#fff; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.pb-ed-textx:hover { background:#e04b3a; }

/* Per-card "restore" chips (Editorial only). When you remove the price or "+",
   the card genuinely shrinks — exactly as visitors will see it — and a small
   chip appears here so you can bring the item back. */
.pb-ed-restore { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.pb-ed-restore button {
  cursor:pointer; font-family:inherit; font-size:11px; font-weight:600;
  color:#f3ebdc; background:rgba(255,255,255,.06);
  border:1px dashed rgba(217,138,61,.6); border-radius:999px; padding:4px 10px;
}
.pb-ed-restore button:hover { background:rgba(217,138,61,.18); border-style:solid; }

/* hint line in the link popup */
.pb-ed-popup__hint { margin-top:8px; font-size:11px; color:#8f7a5a; line-height:1.6; }

/* a text element that currently carries a link shows a subtle underline while
   editing, so it's clear at a glance which items are linked */
body.pb-editorial .pb-linked {
  text-decoration:underline; text-decoration-color:rgba(217,138,61,.6);
  text-underline-offset:4px;
}

/* =========================================================================
   Reduced motion — for visitors whose OS/browser requests less animation.
   Doesn't affect anyone else; navigation still works, just without the
   decorative continuous animations (which are the heaviest to paint).
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .pb-bg__glow { animation:none; }
  .pb-scroll-hint__arrow { animation:none; }
}