/* ==========================================================================
   Similius Product Information & Regulatory Notice — Urenus look & feel
   Target:  https://us.similius.com/product-information-regulatory-notice/
            (page ID 38564, block editor)
   Model:   https://urenus.com/en-us/pages/product-information-regulatory-notice
   Markup:  similius-regulatory-page.html  (Custom HTML block)

   Loaded by the Similius Styles plugin on page 38564 only.

   Ported from the Urenus page's own inline <style> — it ships as a
   self-contained custom HTML block scoped to #urenus-product-info. Scope
   renamed to #sim-product-info; this markup is written fresh.

   CHANGES vs the Urenus original, all deliberate:
     1. font-family: inherit, not the ui-sans-serif stack — keeps DM Sans.
     2. Page gutter + margin reset instead of relying on the Shopify wrapper,
        so the hero and footer bands inset 38px like the contact, returns and
        shipping pages rather than running to the viewport edge.
   ========================================================================== */


/* --- 0. Page gutter ----------------------------------------------------- */
/* Blocksy's constrained layout puts an !important auto margin on
   .entry-content's children — the same trap as the about page — so the
   margin needs !important. 38px matches the other ported pages. */

body.page-id-38564 #sim-product-info {
  width: auto;
  max-width: none;
  margin-inline: 0 !important;
  padding-inline: min(2.6vw, 38px);
}


/* --- 1. Tokens + base --------------------------------------------------- */

#sim-product-info {
  --ink: #1a1b2e;
  --muted: #5a5c7d;
  --surface-1: #ffffff;
  --surface-2: #f4f5f7;
  --brand: #2b2c48;
  --brand-2: #4a4c75;
  --brand-light: #e9eaf2;
  --radius: 12px;

  /* Urenus's measure for this page. The contact and returns pages use 1520px
     if you would rather they all agree. */
  --maxw: 1100px;

  --shadow-sm: 0 1px 2px rgba(43, 44, 72, 0.05);
  --shadow: 0 10px 30px rgba(43, 44, 72, 0.08);

  color: var(--ink);
  background: var(--surface-1);
  font-family: inherit;   /* DM Sans, already the site font */
  line-height: 1.7;
}

#sim-product-info,
#sim-product-info * { box-sizing: border-box; }

#sim-product-info .container {
  width: min(100% - 2rem, var(--maxw));
  margin-inline: auto;
}


/* --- 2. Hero ------------------------------------------------------------ */

#sim-product-info .hero {
  position: relative;
  isolation: isolate;
  padding: 4rem 0 3rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--brand-light);
}

#sim-product-info .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 10% 20%, var(--brand-light), transparent 60%);
}

#sim-product-info .eyebrow {
  display: block;
  margin-bottom: .75rem;
  color: var(--brand-2);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

#sim-product-info h1 {
  margin: 0;
  max-width: 850px;
  color: var(--brand);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

#sim-product-info .intro {
  max-width: 900px;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 1.05rem;
}


/* --- 3. Two-column body ------------------------------------------------- */

#sim-product-info .content-section { padding: 5rem 0; }

#sim-product-info .content-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 4rem;
  align-items: start;
}

#sim-product-info .side-panel {
  position: sticky;
  top: 2rem;
  padding: 2rem;
  border-radius: var(--radius);
  background: var(--brand);
  box-shadow: var(--shadow);
}

#sim-product-info .side-panel .eyebrow { color: rgba(255, 255, 255, .72); }

#sim-product-info .side-panel h2 {
  margin: 0;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.25;
}


/* --- 4. Notice cards ---------------------------------------------------- */

#sim-product-info .info-card {
  position: relative;
  margin-bottom: 1.5rem;
  padding: 2rem;
  border: 1px solid var(--brand-light);
  border-radius: var(--radius);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

#sim-product-info .info-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

/* The short navy accent bar on the left edge of each card. */
#sim-product-info .info-card::before {
  content: "";
  position: absolute;
  top: 2rem;
  left: -1px;
  width: 4px;
  height: 38px;
  border-radius: 0 4px 4px 0;
  background: var(--brand);
}

#sim-product-info .info-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

/* The closing notice: tinted, and deliberately without the accent bar. */
#sim-product-info .notice {
  margin-top: 2.5rem;
  padding: 2rem;
  border: 1px solid var(--brand-light);
  border-radius: var(--radius);
  background: var(--surface-2);
}

#sim-product-info .notice p { margin: 0; color: var(--muted); }


/* --- 5. Footer band ----------------------------------------------------- */

#sim-product-info .footer-band {
  padding: 3rem 0;
  background: var(--surface-2);
  border-top: 1px solid var(--brand-light);
}

#sim-product-info .footer-line {
  width: 60px;
  height: 4px;
  margin-bottom: 1.25rem;
  border-radius: 4px;
  background: var(--brand);
}

#sim-product-info .footer-band p {
  margin: 0;
  color: var(--muted);
}


/* --- 6. Responsive ------------------------------------------------------ */

@media (max-width: 900px) {
  #sim-product-info .content-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  #sim-product-info .side-panel { position: static; }
}

@media (max-width: 600px) {
  #sim-product-info .hero { padding: 3rem 0 2.5rem; }
  #sim-product-info .content-section { padding: 3rem 0; }

  #sim-product-info .info-card,
  #sim-product-info .side-panel,
  #sim-product-info .notice { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  #sim-product-info .info-card { transition: none; }
  #sim-product-info .info-card:hover { transform: none; }
}