/*
 * Pelt Ram theme tokens.
 * Palette lifted from raw/assets/css/style_4_200720261617.css (peltram custom overlay).
 * Base site is dark; neon-green (#17ff00 / #00ff0a) drives links + primary CTA.
 */

:root {
    /* Backgrounds (dark stack) */
    --color-bg:              #000000;
    --color-bg-surface:      #131313;   /* cards, panels */
    --color-bg-surface-alt:  #181818;   /* p-detail-inner */
    --color-bg-elev:         #1a1a1a;   /* hovered rows / submenu */
    --color-bg-mute:         #222222;
    --color-bg-line:         #333333;

    /* Foreground text */
    --color-fg:              #ffffff;
    --color-fg-muted:        #aaaaaa;
    --color-fg-subtle:       #666666;
    --color-fg-inverse:      #000000;

    /* Brand accents */
    --color-accent:          #17ff00;   /* primary link / underline */
    --color-accent-strong:   #00ff0a;   /* CTA border + text */
    --color-accent-alt:      #60ff00;
    --color-accent-hover:    #f0b820;   /* amber gold, links hover */
    --color-accent-hover-alt:#ffc200;

    /* Semantic aliases */
    --color-primary:         var(--color-accent-strong);
    --color-primary-hover:   var(--color-accent-hover);
    --color-link:            var(--color-accent);
    --color-link-hover:      var(--color-accent-hover);

    --color-price:           var(--color-accent-strong);
    --color-badge-stock:     var(--color-accent-strong);
    --color-badge-sale:      #d63500;

    --color-border:          rgba(255, 255, 255, .12);
    --color-border-strong:   rgba(255, 255, 255, .22);
    --color-divider:         rgba(255, 255, 255, .2);

    /* Typography */
    --template-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    --template-headings-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.65;

    /* Layout */
    --container-max: 1200px;
    --container-pad: 20px;

    /* Breakpoints (mirror Shoptet: 480 / 768 / 992 / 1200 / 1440) */
    --bp-xs: 480px;
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1440px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Elevation */
    --shadow-card:  0 4px 14px rgba(0, 0, 0, .5);
    --shadow-hover: 0 6px 22px rgba(23, 255, 0, .18);

    /* Motion */
    --transition-base: .3s ease;
    --transition-fast: .2s ease-out;
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    color: var(--color-fg);
    background: var(--color-bg);
}

body {
    margin: 0;
    font-family: var(--template-font);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-fg);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--template-headings-font);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 .5em;
    color: var(--color-fg);
}

p { margin: 5px 0; line-height: var(--line-height-base); }

p a {
    color: var(--color-link);
    text-decoration: underline dotted var(--color-link);
    text-underline-offset: .2em;
    transition: color var(--transition-base), text-decoration-color var(--transition-base);
}
p a:hover {
    color: var(--color-link-hover);
    text-decoration: underline solid var(--color-link-hover);
}

a { color: var(--color-fg); text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--color-link); }

img { max-width: 100%; height: auto; display: block; }

button { font-family: inherit; cursor: pointer; }

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}