/* Ray's Jewelry concept demo: overrides on top of the Diamond Images template. */
:root{--accent:#c4a26f}

/* 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(11,30,49,.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(11,30,49,.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.rays-hero-title{height:auto;font:400 clamp(52px,6.2vw,104px)/1 var(--font-display,'Bodoni Moda',serif);letter-spacing:-.03em;color:#0a1d30;margin:0 0 .25em;text-wrap:balance}
html body #home .hero-editorial-copy h1.rays-hero-title em{font-style:italic;letter-spacing:-.02em}
@media(max-width:650px){html body #home .hero-editorial-copy h1.rays-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:#e9eef2 !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 .rays-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 .rays-gift-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
html body #social-presence .rays-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 .rays-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.rays-hero-title span,
html body #home .hero-editorial-copy h1.rays-hero-title em{display:inline !important;position:static !important;margin:0 !important;padding:0 !important;font-size:inherit !important;line-height:inherit !important;color:#0a1d30 !important;-webkit-text-fill-color:#0a1d30 !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 .rays-gift-cards .social-card{position:relative}
html body #social-presence .rays-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 .rays-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 .rays-second-store{margin:18px 0 0;font-size:15px;color:var(--muted,#4d6176);max-width:36ch}

/* ===== Round 2 ===== */
/* Ray's own wordmark as the logo */
html body .header .rays-brand{display:flex;align-items:center;gap:0}
html body .header .rays-logo{display:block;height:48px;width:auto}
@media(max-width:650px){html body .header .rays-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(11,30,49,.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 .rays-team-collage{position:relative;padding-bottom:14%}
html body .rays-team-collage img{display:block;object-fit:cover;border-radius:20px;box-shadow:0 30px 60px -30px rgba(11,30,49,.4)}
html body .rays-team-main{width:86%;aspect-ratio:4/3}
html body .rays-team-side{position:absolute;right:0;bottom:0;width:48%;aspect-ratio:16/10;border:6px solid #f5f7f9}
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 .rays-team-main{width:90%}
  html body .rays-team-side{width:52%}
}

/* "Listo para regalar": real Instagram posts as post cards */
html body #social-presence .rays-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;max-width:720px}
html body .rays-post{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;color:#0a1d30;text-decoration:none;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transition:transform .25s ease}
@media(hover:hover){html body .rays-post:hover{transform:translateY(-4px)}}
html body .rays-post:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
html body .rays-post-head{display:flex;align-items:center;gap:8px;padding:9px 10px;font:500 12px/1 var(--font-text,'Manrope',sans-serif)}
html body .rays-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 .rays-post-img{display:block;width:100%;aspect-ratio:9/14;object-fit:cover}
html body .rays-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:#4d6176}
html body #social-presence .rays-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 .rays-follow:hover{text-decoration:underline}}
@media(max-width:650px){
  html body #social-presence .rays-posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:26px}
  html body .rays-post-head{padding:7px;font-size:10px}
  html body .rays-post-head span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body .rays-post-head img{width:20px;height:20px}
  html body .rays-post-foot{font-size:10px;padding:7px}
  html body .rays-post-foot span:first-child{display:none}
}
/* team photos: the width/height attributes must not fix their size */
html body .rays-team-collage{width:100% !important;min-width:0;justify-self:stretch}
html body .rays-team-collage img{height:auto !important;max-width:none}
/* posts: shorter cards, closer to an Instagram post */
html body .rays-post-img{aspect-ratio:4/5 !important;height:auto !important}
html body #social-presence .rays-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 .rays-team-collage{order:-1;display:block !important;width:100% !important;flex:none;position:relative !important;inset:auto !important;transform:none !important}
  html body .rays-team-collage .rays-team-main{width:88% !important;height:auto !important}
  html body .rays-team-collage .rays-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 .rays-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 .rays-posts::-webkit-scrollbar{display:none}
  html body .rays-post{scroll-snap-align:start}
  html body .rays-post-head{padding:10px;font-size:13px}
  html body .rays-post-head img{width:26px;height:26px}
  html body .rays-post-foot{font-size:12px;padding:10px}
  html body .rays-post-foot span:first-child{display:inline}
}