/* ==========================================================================
   sinopep-brand.css — SinoPep's own design layer.

   Loaded AFTER public/css/sinopep.css. That file is REGENERATED by
   site-factory/generate-identity.js, so nothing hand-authored may live in it
   (runbook §2). Everything specific to this brand belongs here.

   The idea: the SinoPep mark is two interlocking blocks sheared 13° to the
   right. Nothing else in the fleet leans, so the shear is the whole identity —
   it appears as a rule under every section heading, as the notch on badges and
   buttons, and as the corner cut on the cards that carry the most weight. Type
   is Chakra Petch (chamfered, technical), which is where the mark's flat
   diagonal cuts come from in the first place.

   Restraint rule: the shear is a PUNCTUATION mark, never a layout. Body copy,
   inputs, tables and anything a customer has to read or click accurately stay
   perfectly upright.
   ========================================================================== */

:root {
    --sp-shear: -13deg;
    --sp-violet: #703b97;
    --sp-violet-soft: #b48ad0;
    --sp-violet-wash: #f2ecf7;
    --sp-ramp: linear-gradient(100deg, var(--primary) 0%, #4b397b 52%, var(--sp-violet) 100%);
    --sp-ramp-soft: linear-gradient(100deg, rgba(44, 55, 100, 0.08), rgba(112, 59, 151, 0.12));

    /* The identity layer does not emit these, but the cloned views reference them
       as var() fallbacks. Undefined token = the TEMPLATE's fallback hex renders,
       which is how the template's mint green survived a full re-theme (runbook §9.3). */
    --primary-lightest: #f3f4f7;
    --primary-600: #2c3764;
    --primary-700: #202748;
}

/* ---------- The seal -------------------------------------------------------
   The template's 中文 seal is vermillion, a colour SinoPep does not own. It is
   inline-styled in the footer, so that one is fixed at source. */
.cn-seal {
    border-color: var(--sp-violet-soft);
    color: var(--sp-violet);
    transform: skewX(var(--sp-shear));
    border-radius: 2px;
}
.footer-brand .cn-seal,
.footer-logo .cn-seal { color: var(--sp-violet-soft); border-color: var(--sp-violet-soft); }

/* ---------- Section headings ----------------------------------------------
   The template centres a short rule under every heading. Replace it with the
   sheared bar from the mark: two strokes, unequal, leaning. */
.section-heading { position: relative; }
/* One element, two strokes: a long ramped bar and a short violet tick, drawn as
   two backgrounds on the same box so they can never drift out of alignment the
   way a ::before/::after pair does. */
.section-heading::after {
    content: '';
    display: block;
    width: 74px;
    height: 6px;
    margin: 0.9rem auto 0;
    background:
        linear-gradient(100deg, var(--primary), var(--sp-violet)) 0 0 / 54px 100% no-repeat,
        linear-gradient(var(--sp-violet), var(--sp-violet)) 62px 0 / 12px 100% no-repeat;
    transform: skewX(var(--sp-shear));
    border-radius: 1px;
}
/* Left-aligned headings keep the motif on the left rather than floating centre. */
.about-section .section-heading,
.contact-section .section-heading { text-align: inherit; }

/* ---------- Buttons --------------------------------------------------------
   Primary actions carry the indigo→violet ramp. The notch is cut from the
   top-right corner only — the same corner the "7" turns in the mark. */
.btn-primary,
.hero-cta-primary,
.deal-card-cta,
button.btn-primary {
    background: var(--sp-ramp);
    border: none;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}
.btn-primary:hover,
.hero-cta-primary:hover { filter: brightness(1.08); }

/* Secondary buttons echo the notch as an outline, no fill. */
.btn-secondary,
.btn-outline,
.hero-cta-secondary {
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

/* ---------- Badges and chips ----------------------------------------------
   Small, high-frequency elements: shear the whole chip and counter-shear the
   text so the label stays readable. */
.trending-badge,
.badge-new,
.badge-popular,
.badge-value,
.hero-badge,
.deal-card-badge {
    transform: skewX(var(--sp-shear));
    border-radius: 2px;
}
.trending-badge > *,
.badge-new > *,
.badge-popular > *,
.badge-value > *,
.hero-badge > *,
.deal-card-badge > * { display: inline-block; transform: skewX(calc(-1 * var(--sp-shear))); }
/* Chips with no element wrapper get the counter-shear via a pseudo-safe rule. */
.hero-badge { padding-inline: 1.05rem; }

/* ---------- Cards ----------------------------------------------------------
   Only the cards that carry real weight get the corner cut: the trending
   products, the trust panels and the lab cards. Everything else stays square so
   the motif keeps meaning something. */
.trending-card,
.trust-card,
.lab-card,
.report-card {
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.trending-card:hover,
.trust-card:hover { transform: translateY(-3px); }

/* A hairline of the ramp along the top of each trending card ties the grid to
   the hero without repainting the card itself. */
.trending-card { position: relative; }
.trending-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--sp-ramp);
    opacity: 0.85;
}

/* ---------- Hero -----------------------------------------------------------
   NOT animated: the hero heading is the LCP element (runbook §5). The only
   addition is a static sheared field behind it, echoing the mark's two blocks. */
.hero-section { position: relative; overflow: hidden; }
.hero-section::after {
    content: '';
    position: absolute;
    top: -12%;
    right: -6%;
    width: 340px;
    height: 130%;
    background: var(--sp-ramp-soft);
    transform: skewX(var(--sp-shear));
    pointer-events: none;
    z-index: 0;
}
.hero-section > * { position: relative; z-index: 1; }
@media (max-width: 900px) { .hero-section::after { display: none; } }

/* The italic run in the hero headline is the template's; SinoPep says it with
   the ramp instead, which reads as brand rather than as emphasis. */
.hero-title > span:not(.cn-seal) {
    font-style: normal;
    background: var(--sp-ramp);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Header ---------------------------------------------------------
   A single sheared rule under the sticky header, in place of the template's
   flat hairline. */
.header {
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 1px 0 rgba(112, 59, 151, 0.16);
}
.logo-img { border-radius: 3px; }
.nav-link.active::after,
.nav-links a.active::after {
    background: var(--sp-ramp);
    transform: skewX(var(--sp-shear));
}

/* ---------- Footer ---------------------------------------------------------
   The footer is always the ink ground. Give it the ramp as a top edge so the
   page closes on the brand. */
.footer { border-top: 3px solid transparent; border-image: var(--sp-ramp) 1; }

/* ---------- Trust bar ------------------------------------------------------ */
.trust-bar,
.about-trust-strip,
.trust-strip { background: var(--sp-ramp); }

/* ---------- Reduced motion -------------------------------------------------
   Nothing here animates on load, but the hover lifts should still stop for
   anyone who asks. */
@media (prefers-reduced-motion: reduce) {
    .trending-card,
    .trust-card { transition: none; }
    .trending-card:hover,
    .trust-card:hover { transform: none; }
}

/* ---------- "From resin to vial" ------------------------------------------
   SinoPep's own section, so it gets its own layout rather than inheriting the
   template's icon-and-chevron row: a numbered ladder where the rule between
   steps carries the shear. On a phone it collapses to a single column and the
   rule moves to the left edge, so the sequence still reads top to bottom. */
.sp-route {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    border-top: 2px solid var(--border-subtle);
}
.sp-route-step {
    position: relative;
    padding: 1.6rem 1.4rem 1.5rem;
    border-right: 1px solid var(--border-subtle);
}
.sp-route-step:last-child { border-right: 0; }
.sp-route-step::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 46px;
    height: 4px;
    background: var(--sp-ramp);
    transform: skewX(var(--sp-shear));
}
.sp-route-num {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--sp-violet);
    margin-bottom: 0.55rem;
}
.sp-route-step h4 {
    font-family: var(--font-display, inherit);
    font-size: 1.02rem;
    margin: 0 0 0.45rem;
    color: var(--gray-900);
}
.sp-route-step p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--gray-600);
}
.sp-route-foot {
    margin: 1.6rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.9rem;
    color: var(--gray-600);
    text-align: center;
}
.sp-route-foot i { color: var(--sp-violet); margin-right: 0.4rem; }
.sp-route-foot a { color: var(--primary); font-weight: 600; }
@media (max-width: 720px) {
    .sp-route { grid-template-columns: 1fr; border-top: 0; }
    .sp-route-step { border-right: 0; border-top: 2px solid var(--border-subtle); padding-inline: 0; }
}

/* ---------- Contrast floor on this shop's own ground ------------------------
   generate-identity derives --secondary-green from the brand hue; on this shop's
   pale surface it lands at 4.47:1, just under AA for the small "In Stock" and
   "Best Value" labels. Darken those two labels only — the token itself is used on
   other grounds where it already passes (runbook §9.4). */
.product-badge.badge-best-value,
.pl-stock-badge,
.pd-badge-best-value,
.trending-badge-value { color: #2f6040; }

/* The about-page trust strip sits on the gray-800 ground, where --gray-400 label
   text lands at 4.28:1. Known dark ground (runbook §9.4) — lift the label only. */
.about-trust-label { color: var(--gray-300); }

/* Header fit on narrow phones. Flex children default to min-width:auto, so a long
   legal name in .logo-text small refuses to shrink and pushes .header-actions —
   the CART BUTTON — off the right edge. Every element is still "present" and the
   page reports no overflow of its own, which is why this survives a casual look.
   The legal name is decorative at 390px; the cart is not. */
@media (max-width: 767px) {
    .header-content { min-width: 0; }
    .logo { min-width: 0; flex: 1 1 auto; overflow: hidden; }
    .logo-text { min-width: 0; }
    .logo-text small { display: none; }
    .header-actions { flex: 0 0 auto; }
}

/* The hero trust row's PeptideMeter link is a bare inline <a> inside a <span>, so it
   inherits no padding and lands at 143x21 on a phone — under the 44px tap floor. */
@media (max-width: 767px) {
    .hero-trust-item a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-block: 0.35rem;
    }
}