/* EHYBI Jewelry concept demo: overrides on top of the jewelry template. */
:root{--accent:#b08a3e;--ink:#121110;--text:#38332b;--muted:#6e675c;--field:#121110;--field-ink:#f6efe1;--field-muted:#cfc4ad;--ground:#f8f5ef;--surface:#efe9dd}

/* Proposal notice: always visible, never in the way. */
.demo-ribbon{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:9999;pointer-events:none;background:rgba(18,17,16,.88);color:#eef2f6;font:500 12px/1.3 var(--font-text,'Manrope',sans-serif);padding:8px 14px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 24px rgba(18,17,16,.25)}
@media(max-width:650px){.demo-ribbon{font-size:10.5px;bottom:10px;white-space:normal;text-align:center;width:max-content;max-width:calc(100% - 24px)}}

/* Brand mark: gold diamond, no clipping. */
html body .header .brand-mark{clip-path:none;overflow:visible}
html body .header .brand-mark img{object-fit:contain}

/* Language toggle */
.lang-toggle{display:inline-grid;place-items:center;min-width:44px;height:36px;padding:0 10px;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;font:500 12px/1 var(--font-text,'Manrope',sans-serif);letter-spacing:.06em;cursor:pointer}
.lang-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Hero headline as live text (replaces the drawn lettering). */
html body #home .hero-editorial-copy h1.eh-hero-title{height:auto;font:400 clamp(52px,6.2vw,104px)/1 var(--font-display,'Bodoni Moda',serif);letter-spacing:-.03em;color:#121110;margin:0 0 .25em;text-wrap:balance}
html body #home .hero-editorial-copy h1.eh-hero-title em{font-style:italic;letter-spacing:-.02em}
@media(max-width:650px){html body #home .hero-editorial-copy h1.eh-hero-title{font-size:clamp(44px,12.5vw,58px);text-align:center}}
html body #home .hero-explore .label{display:inline}

/* Collection: real shop photos fill the card instead of cut-outs on a backdrop. */
html body #selected-pieces .piece-photo{background:#efe9dd !important;overflow:hidden}
html body #selected-pieces .piece-photo::before,html body #selected-pieces .piece-photo::after{display:none !important}
html body #selected-pieces .piece-photo img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-width:none !important;object-fit:cover !important;transform:none !important;filter:none !important}

/* Team photo in the "about" section */
html body .shared-boutique #meet-allan .eh-team{object-fit:cover;border-radius:18px;-webkit-mask-image:none;mask-image:none}

/* Gift-wrapping chapter on the sapphire field */
html body #social-presence .eh-gift-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
html body #social-presence .eh-gift-cards .social-card{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:3/4;transform:none !important;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
html body #social-presence .eh-gift-cards img{display:block;width:100%;height:100%;object-fit:cover}

/* Footer note */
html body .site-legal-footer p:not(.footer-wordmark){max-width:640px;margin-left:auto;margin-right:auto}

/* --- Fixes after the first review --- */
/* Hero headline: the template colours and positions spans for its old lettering; reset them. */
html body #home .hero-editorial-copy h1.eh-hero-title span,
html body #home .hero-editorial-copy h1.eh-hero-title em{display:inline !important;position:static !important;margin:0 !important;padding:0 !important;font-size:inherit !important;line-height:inherit !important;color:#121110 !important;-webkit-text-fill-color:#121110 !important;opacity:1 !important;filter:none !important;text-shadow:none !important;animation:none !important;background:none !important;transform:none !important}
/* Hero button label (the template hides span text inside the button) */
html body #home .hero-explore .label{display:inline !important;font-size:inherit !important;color:inherit !important;-webkit-text-fill-color:currentColor !important;line-height:inherit}

/* Gift photos: the template treats .social-card img as a sprite. */
html body #social-presence .eh-gift-cards .social-card{position:relative}
html body #social-presence .eh-gift-cards .social-card img{position:static !important;width:100% !important;height:100% !important;left:auto !important;top:auto !important;max-width:100% !important}

/* Contact: the WhatsApp label is text, not an icon box. */
html body #contact .contact-copy address a span{display:inline !important;width:auto !important;height:auto !important;flex:1 1 auto !important;font-size:inherit !important;white-space:nowrap}

/* About: team photo and text side by side, no overlap. */
html body .shared-boutique #meet-allan{display:grid !important;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(56px,8vw,120px) clamp(20px,6vw,96px) !important;min-height:0 !important;height:auto !important}
html body .shared-boutique #meet-allan .eh-team{position:relative !important;inset:auto !important;left:auto !important;top:auto !important;right:auto !important;bottom:auto !important;width:100% !important;height:auto !important;max-width:none !important;aspect-ratio:4/3;transform:none !important;opacity:1 !important}
html body .shared-boutique #meet-allan .allan-mobile-copy{position:relative !important;inset:auto !important;left:auto !important;top:auto !important;transform:none !important;margin:0 !important;width:auto !important;max-width:560px}
@media(max-width:650px){
  html body .shared-boutique #meet-allan{grid-template-columns:1fr;gap:28px}
}
html body #contact .contact-copy .eh-second-store{margin:18px 0 0;font-size:15px;color:var(--muted,#6e675c);max-width:36ch}

/* ===== Round 2 ===== */
/* Ehybi wordmark */
html body .header .eh-brand{display:flex;align-items:center;gap:0}
html body .header .eh-logo{display:block;height:48px;width:auto}
@media(max-width:650px){html body .header .eh-logo{height:38px}}
html body .site-legal-footer .footer-wordmark img{display:block;height:clamp(64px,9vw,120px);width:auto;margin:0 auto}

/* Hero: description and button start on the same left edge as the headline */
@media(min-width:651px){
  html body #home .hero-editorial-copy{--hero-details-indent:0px}
  html body #home .hero-editorial-copy .hero-description,
  html body #home .hero-editorial-copy .hero-actions{margin-left:0 !important;width:100% !important}
}
html body #home .hero-explore .label{font-weight:500}

/* "Te atendemos como en familia": smaller framed shop photo, text keeps its room */
@media(min-width:651px){
  html body #fine-jewelry .fine-image{position:absolute !important;left:clamp(24px,4vw,72px) !important;top:50% !important;right:auto !important;bottom:auto !important;width:40% !important;height:auto !important;aspect-ratio:4/3;transform:translateY(-50%);border-radius:20px;overflow:hidden;z-index:0;box-shadow:0 30px 60px -30px rgba(18,17,16,.35)}
  html body #fine-jewelry .fine-image::after{display:none !important}
}
@media(max-width:650px){
  html body #fine-jewelry .fine-image{height:auto !important;aspect-ratio:4/3;max-height:none !important;margin:0 16px;width:calc(100% - 32px) !important;border-radius:18px;overflow:hidden}
  html body #fine-jewelry .fine-image::after{display:none !important}
}

/* Reviews: no pause button */
html body .review-pause{display:none !important}

/* Team: two photos, larger and more open text */
html body .shared-boutique #meet-allan{grid-template-columns:1.15fr .85fr}
html body .eh-team-collage{position:relative;padding-bottom:14%}
html body .eh-team-collage img{display:block;object-fit:cover;border-radius:20px;box-shadow:0 30px 60px -30px rgba(18,17,16,.4)}
html body .eh-team-main{width:86%;aspect-ratio:4/3}
html body .eh-team-side{position:absolute;right:0;bottom:0;width:48%;aspect-ratio:16/10;border:6px solid #f8f5ef}
html body .shared-boutique #meet-allan .allan-mobile-copy h2{font-size:var(--step-head) !important}
html body .shared-boutique #meet-allan .alan-intro{font-size:clamp(22px,1rem + .9vw,30px) !important;line-height:1.35 !important;max-width:22ch !important;margin:22px 0 0 !important}
html body .shared-boutique #meet-allan .alan-description{font-size:clamp(17px,.95rem + .35vw,20px) !important;line-height:1.65 !important;max-width:40ch !important;margin-top:20px !important}
@media(max-width:650px){
  html body .shared-boutique #meet-allan{grid-template-columns:1fr}
  html body .eh-team-main{width:90%}
  html body .eh-team-side{width:52%}
}

/* "Listo para regalar": real Instagram posts as post cards */
html body #social-presence .eh-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;max-width:720px}
html body .eh-post{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;color:#121110;text-decoration:none;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transition:transform .25s ease}
@media(hover:hover){html body .eh-post:hover{transform:translateY(-4px)}}
html body .eh-post:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
html body .eh-post-head{display:flex;align-items:center;gap:8px;padding:9px 10px;font:500 12px/1 var(--font-text,'Manrope',sans-serif)}
html body .eh-post-head img{width:26px;height:26px;border-radius:50%;object-fit:contain;background:#fff;box-shadow:0 0 0 1px #e5e5ea;padding:3px}
html body .eh-post-img{display:block;width:100%;aspect-ratio:9/14;object-fit:cover}
html body .eh-post-foot{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;font:500 11.5px/1 var(--font-text,'Manrope',sans-serif);color:#6e675c}
html body #social-presence .eh-follow{display:inline-flex;margin-top:22px;color:var(--accent);font:500 16px/1.4 var(--font-text,'Manrope',sans-serif);text-decoration:none}
@media(hover:hover){html body #social-presence .eh-follow:hover{text-decoration:underline}}
@media(max-width:650px){
  html body #social-presence .eh-posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:26px}
  html body .eh-post-head{padding:7px;font-size:10px}
  html body .eh-post-head span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body .eh-post-head img{width:20px;height:20px}
  html body .eh-post-foot{font-size:10px;padding:7px}
  html body .eh-post-foot span:first-child{display:none}
}
/* team photos: the width/height attributes must not fix their size */
html body .eh-team-collage{width:100% !important;min-width:0;justify-self:stretch}
html body .eh-team-collage img{height:auto !important;max-width:none}
/* posts: shorter cards, closer to an Instagram post */
html body .eh-post-img{aspect-ratio:4/5 !important;height:auto !important}
html body #social-presence .eh-posts{max-width:640px}
/* Mobile team: stack photos above text; the template grid collapsed the collage to 0 width */
@media(max-width:650px){
  html body .shared-boutique #meet-allan{display:flex !important;flex-direction:column !important;align-items:stretch !important;padding:56px 16px !important;gap:28px}
  html body .eh-team-collage{order:-1;display:block !important;width:100% !important;flex:none;position:relative !important;inset:auto !important;transform:none !important}
  html body .eh-team-collage .eh-team-main{width:88% !important;height:auto !important}
  html body .eh-team-collage .eh-team-side{width:54% !important;height:auto !important}
  html body .shared-boutique #meet-allan .allan-mobile-copy{max-width:none !important;padding:0 8px !important}
  html body .shared-boutique #meet-allan .alan-intro,html body .shared-boutique #meet-allan .alan-description{max-width:none !important;margin-left:0 !important;margin-right:0 !important}
  html body #fine-jewelry .fine-image{-webkit-mask-image:none !important;mask-image:none !important}
  html body #fine-jewelry .fine-image img{width:100% !important;left:0 !important;object-fit:cover;height:100% !important}
}
/* Mobile posts: swipeable row of larger cards, like a social feed */
@media(max-width:650px){
  html body #social-presence .eh-posts{display:grid !important;grid-template-columns:none !important;grid-auto-flow:column;grid-auto-columns:68%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;max-width:none;width:calc(100% + 16px);padding:4px 16px 18px 0;scrollbar-width:none}
  html body #social-presence .eh-posts::-webkit-scrollbar{display:none}
  html body .eh-post{scroll-snap-align:start}
  html body .eh-post-head{padding:10px;font-size:13px}
  html body .eh-post-head img{width:26px;height:26px}
  html body .eh-post-foot{font-size:12px;padding:10px}
  html body .eh-post-foot span:first-child{display:inline}
}

/* ===== Round 3 ===== */
/* Logo: full wordmark (new crop keeps the whole "Jewelry") */
html body .header .eh-logo{height:52px}
@media(max-width:650px){html body .header .eh-logo{height:42px}}
html body .site-legal-footer .footer-wordmark{line-height:0;overflow:visible;height:auto !important;padding:8px 0}
html body .site-legal-footer .footer-wordmark img{height:clamp(80px,10vw,132px)}

/* "Te atendemos como en familia": larger photo that stays in its own column */
@media(min-width:651px){
  html body #fine-jewelry .fine-image{left:4vw !important;width:calc(55% - 4vw - 56px) !important;aspect-ratio:5/4;max-height:calc(100% - 120px);-webkit-mask-image:none !important;mask-image:none !important}
  html body #fine-jewelry .fine-image img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-width:none !important;object-fit:cover !important;transform:none !important}
}

/* Team heading: "Conoce a" on one line, "nuestro equipo." on the next, with air around it */
html body .shared-boutique #meet-allan h2.eh-team-title{font-size:clamp(46px,4.4vw,78px) !important;line-height:1.08 !important;letter-spacing:-.02em;margin:0 0 6px !important}
html body .shared-boutique #meet-allan h2.eh-team-title span,
html body .shared-boutique #meet-allan h2.eh-team-title em{display:block !important;white-space:nowrap}
html body .shared-boutique #meet-allan h2.eh-team-title em{margin-top:.04em}
html body .shared-boutique #meet-allan .alan-intro{margin-top:30px !important;padding-left:18px;border-left:2px solid var(--accent)}
html body .shared-boutique #meet-allan .alan-description{margin-top:24px !important}
@media(max-width:650px){html body .shared-boutique #meet-allan h2.eh-team-title{font-size:clamp(40px,11.5vw,52px) !important}}

/* "Listo para regalar": decorated sapphire stage */
html body #social-presence{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(60% 70% at 78% 40%,rgba(196,162,111,.22),transparent 70%),radial-gradient(50% 60% at 10% 90%,rgba(80,130,190,.25),transparent 70%),linear-gradient(160deg,#1e1b16 0%,#15130f 55%,#0c0b09 100%) !important}
html body #social-presence>*:not(.eh-deco){position:relative;z-index:2}
.eh-deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.eh-deco-frame{position:absolute;inset:clamp(14px,2.2vw,32px);border:1px solid rgba(196,162,111,.55);border-radius:clamp(18px,2vw,28px)}
.eh-deco-frame::before,.eh-deco-frame::after{content:"";position:absolute;inset:8px;border:1px solid rgba(196,162,111,.18);border-radius:inherit}
.eh-deco-frame::after{inset:auto;left:50%;top:-7px;width:14px;height:14px;transform:translateX(-50%) rotate(45deg);background:#c4a26f;border:0;border-radius:2px}
.eh-deco-mark{position:absolute;left:50%;top:50%;width:min(72vw,860px);height:auto;opacity:.08;transform:translate(-50%,-50%)}
html body #social-presence .eh-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;color:#e3c792;font:600 12px/1 var(--font-text,'Manrope',sans-serif);letter-spacing:.18em;text-transform:uppercase}
html body #social-presence .eh-kicker::before{content:"";width:28px;height:1px;background:currentColor}
html body #social-presence .eh-follow{padding:12px 20px;border:1px solid rgba(196,162,111,.6);border-radius:999px;background:rgba(196,162,111,.08);color:#e3c792;transition:background .25s ease}
@media(hover:hover){html body #social-presence .eh-follow:hover{background:rgba(196,162,111,.2);text-decoration:none}}
html body .eh-post{border:1px solid rgba(255,255,255,.7);box-shadow:0 40px 70px -30px rgba(0,0,0,.75),0 0 0 6px rgba(255,255,255,.06)}
html body .eh-post-head span{font-weight:600}
/* Desktop: fanned like photos laid on a table */
@media(min-width:651px){
  html body #social-presence .eh-posts{max-width:700px;gap:22px;padding:28px 0}
  html body .eh-post:nth-child(1){transform:rotate(-5deg) translateY(14px)}
  html body .eh-post:nth-child(2){transform:translateY(-14px) scale(1.04);z-index:2}
  html body .eh-post:nth-child(3){transform:rotate(5deg) translateY(14px)}
  @media(hover:hover){html body .eh-post:hover{transform:rotate(0) translateY(-10px) scale(1.05);z-index:3}}
}
@media(max-width:650px){
  html body #social-presence{padding-top:72px !important;padding-bottom:72px !important}
  html body #social-presence .social-copy{padding:0 12px}
  html body #social-presence .eh-posts{padding-left:12px;scroll-padding-left:12px}
  .eh-deco-mark{width:84vw;top:31%}
  }

/* ===== Round 5: mobile spacing ===== */
@media(max-width:650px){
  /* Hero: centered block with equal side margins, headline fits inside */
  html body #home .hero-editorial-copy{margin:0 !important;width:calc(100vw - 52px) !important;max-width:none !important}
  html body #home .hero-editorial-copy h1.eh-hero-title{font-size:clamp(36px,10.6vw,46px) !important;margin:0 0 26px !important;width:100%}
  html body #home .hero-description{margin:0 auto !important;max-width:32ch}
  html body #home .hero-actions{margin-top:34px !important;justify-content:center}
  /* "Te atendemos como en familia": air under the photo and before the reviews */
  html body #fine-jewelry .fine-copy{padding-top:40px !important}
  html body #fine-jewelry .fine-copy h2{margin-bottom:24px !important}
  html body #fine-jewelry .fine-copy>p{margin-bottom:44px !important}
  /* smaller review cards */
}
/* Gift section: no lighting, flat sapphire gradient */
html body #social-presence{background:linear-gradient(160deg,#1e1b16 0%,#15130f 55%,#0c0b09 100%) !important}
/* Gift section: plain, no frame, no inner ring on the posts */
html body .eh-post{box-shadow:0 40px 70px -30px rgba(0,0,0,.75) !important;border:0 !important}
/* Reviews: sharp text. No zoom, no backdrop blur; smaller cards sized directly on phones */
html body .review-card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:#fff !important;-webkit-font-smoothing:antialiased}
@media(max-width:650px){
  html body #fine-jewelry .review-stage{height:222px !important;transform:none !important}
  html body #fine-jewelry .review-card{width:228px !important;margin-left:-114px !important;height:206px !important;padding:12px 16px !important}
  html body #fine-jewelry .review-card .review-text{font-size:14.5px !important;line-height:1.38 !important;margin-bottom:8px !important}
  html body #fine-jewelry .review-card footer img{width:34px !important;height:34px !important;flex-basis:34px !important}
}
/* Ring photos are portrait: taller cards so the rings are not cut */
html body #selected-pieces .piece-photo{aspect-ratio:4/5 !important;height:auto !important;position:relative}
html body #selected-pieces .piece-photo img{object-position:center 55% !important}

/* ===== Two stores, hours, TikTok ===== */
html body #contact .contact-copy address a.eh-store-link{align-items:flex-start}
html body #contact .contact-copy address a.eh-store-link svg{margin-top:3px}
html body #contact .contact-copy address a span.eh-store{display:block !important;white-space:normal !important;line-height:1.45}
html body #contact .contact-copy address .eh-store b{display:block;font-weight:600}
html body #contact .eh-hours{display:flex;align-items:center;gap:14px;margin:4px 0 0}
html body #contact .eh-hours svg{width:24px;height:24px;flex:0 0 24px}
html body #contact .eh-hours span{white-space:normal !important}
html body #contact .contact-map-wrap{position:relative}
.eh-map-tabs{position:absolute;top:12px;right:12px;z-index:3;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 8px 24px rgba(18,17,16,.18)}
.eh-map-tab{border:0;background:transparent;color:#121110;font:500 13px/1 var(--font-text,'Manrope',sans-serif);padding:9px 14px;border-radius:999px;cursor:pointer;min-height:36px}
.eh-map-tab[aria-pressed="true"]{background:#121110;color:#fff}
.eh-map-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html body #contact .contact-copy .eh-hours{display:flex;align-items:center;gap:14px;margin:18px 0 0;font:inherit;font-size:16px;color:var(--ink,#121110);opacity:1}
@media(min-width:651px){html body #contact .contact-copy .eh-hours{gap:27px}html body #contact .contact-copy .eh-hours svg{width:28px;height:28px;flex-basis:28px}}

/* ===== Ehybi Jewelry ===== */
html body .header .eh-logo{height:46px;width:auto}
@media(max-width:650px){html body .header .eh-logo{height:38px}}
html body .site-legal-footer .footer-wordmark img{height:clamp(90px,11vw,140px) !important;width:auto}
/* the template's mobile team background was a showroom photo from another shop */
html body .meet-allan .allan-mobile-copy{background:none !important}
html body .eh-post-head img{background:#121110;box-shadow:0 0 0 1px #b08a3e;padding:0}
/* pink touches */
html body #home .hero-editorial-copy h1.eh-hero-title em{color:#a8822f !important;-webkit-text-fill-color:#a8822f !important}
html body #social-presence .eh-follow{color:#e2c27a;border-color:rgba(226,194,122,.6);background:rgba(176,138,62,.12)}
@media(hover:hover){html body #social-presence .eh-follow:hover{background:rgba(176,138,62,.25)}}
html body .shared-boutique #meet-allan .alan-intro{border-left-color:#b08a3e}
html body .review-card .review-ornament{color:#b08a3e}
html body .header .eh-logo{height:56px}
@media(max-width:650px){html body .header .eh-logo{height:46px}}
/* Reviews: the text never pushes the photo and name out of the card */
html body .review-card{display:flex !important;flex-direction:column !important;overflow:hidden}
html body .review-card .review-text{flex:1 1 auto;min-height:0;overflow:hidden;display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5}
html body .review-card footer{flex:none !important;margin-top:auto !important}
@media(max-width:650px){html body .review-card .review-text{-webkit-line-clamp:5;line-clamp:5}}
html body .header .eh-logo{height:60px}
@media(max-width:650px){html body .header .eh-logo{height:48px}}
html body .site-legal-footer .footer-wordmark img{height:clamp(84px,10vw,130px) !important}