@import url('montserrat.css');

/* =========================================================
   PRODUCT DETAIL PAGE: flat, minimal, scoped under .pdx
========================================================= */

.pdx {
    --navy: #003964;
    --navy-2: #144970;
    --ink: #181e34;
    --muted: #52607a;
    --beige: #e8dfcd;
    --beige-2: #d3c7ae;
    --tint: #f0eadc;
    --paper: #fbfdfe;
    --blue: #106aa8;

    /* To match your site's fonts, change these two lines only */
    --display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    font-family: var(--body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
}

.pdx *,
.pdx *::before,
.pdx *::after {
    box-sizing: border-box;
}

/* Your site's stylesheet colours headings, paragraphs and links.
   These lines make the text here follow its own section instead. */
.pdx h1, .pdx h2, .pdx h3, .pdx p, .pdx ul, .pdx table, .pdx dl {
    margin: 0;
    padding: 0;
    color: inherit;
}

:where(.pdx) a { color: inherit; }
.pdx [hidden] { display: none !important; }

.pdx .wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
}


/* ---------- Top band: keeps the site menu readable, holds the breadcrumb ---------- */

.pdx-top {
    padding: 22px 0 96px;
    background: var(--navy);
    color: var(--paper);
}

.pdx-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 0.75rem;
    color: #b9c9da;
}

.pdx-crumbs a {
    color: #fab800;
    text-decoration: none;
}

.pdx-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pdx-crumbs a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.pdx-crumbs [aria-current] { color: #fff; }


/* ---------- Hero: image stage + essentials ---------- */

.pdx .pdx-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    margin-top: -72px;
}

.pdx-media { min-width: 0; }

/* The product photo itself: natural proportions, flat, sitting across the blue band */
.pdx-photo {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 57, 100, 0.12);
    border-radius: 10px;
}

.pdx-photo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 540px;
    object-fit: cover;          /* very tall photos lose a sliver top and bottom instead of showing white bars */
}

.pdx-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.pdx-thumb {
    width: 64px;
    height: 48px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 6px;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.pdx-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdx-thumb:hover { opacity: 1; }
.pdx-thumb.is-active { opacity: 1; outline: 2px solid var(--navy); outline-offset: 2px; }
.pdx-thumb:focus-visible { opacity: 1; outline: 2px solid var(--blue); outline-offset: 2px; }


/* ---------- Essentials ---------- */

.pdx-info {
    min-width: 0;
    padding-top: 96px;
}

.pdx-cat {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--beige-2);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.pdx-cat:hover { color: var(--navy); border-color: var(--navy); }
.pdx-cat:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.pdx-info h1 {
    margin: 12px 0 4px;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--navy);
}

.pdx-sku {
    font-size: 0.75rem;
    color: var(--muted);
}

.pdx-brief {
    max-width: 50ch;
    margin-top: 16px;
    color: var(--muted);
}

.pdx-industries {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.pdx-label {
    margin-right: 2px;
    font-size: 0.75rem;
    color: var(--muted);
}

.pdx-industries ul {
    display: contents;
    list-style: none;
}

.pdx-industries li {
    list-style: none;
    padding: 2px 10px;
    font-size: 0.75rem;
    color: var(--ink);
    border: 1px solid var(--beige-2);
    border-radius: 999px;
}

.pdx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 28px;
}

.pdx-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    border: 1.5px solid var(--navy);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pdx-btn svg { width: 17px; height: 17px; flex: none; }

.pdx-btn-primary { color: #fff; background: var(--navy); }
.pdx-btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); }

.pdx-btn-ghost { color: var(--navy); background: transparent; }
.pdx-btn-ghost:hover { color: #fff; background: var(--navy); }

.pdx-btn:focus-visible,
.pdx-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.pdx-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pdx-link svg { width: 16px; height: 16px; }

.pdx-note {
    margin-top: 14px;
    font-size: 0.75rem;
    color: var(--muted);
}


/* ---------- Details tabs ---------- */

.pdx .pdx-details { padding-top: 56px; }

.pdx-tabs {
    display: flex;
    gap: 28px;
    overflow: visible;
    border-bottom: 1px solid var(--beige-2);
}

.pdx-tab {
    margin: 0 0 -1px;
    padding: 12px 0;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.pdx-tab:hover { color: var(--navy); }
.pdx-tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--navy); }
.pdx-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.pdx .pdx-single-title {
    padding-bottom: 12px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--navy);
    border-bottom: 1px solid var(--beige-2);
}

.pdx-panel {
    padding: 24px 0 4px;
    max-width: 72ch;
}

.pdx-panel p + p { margin-top: 1em; }

.pdx-specs {
    width: 100%;
    max-width: 640px;
    border-collapse: collapse;
}

.pdx-specs th,
.pdx-specs td {
    padding: 11px 16px 11px 0;
    text-align: left;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--beige);
    background: none;
}

.pdx-specs th {
    width: 38%;
    font-weight: 500;
    color: var(--muted);
}

.pdx-faq-item { border-bottom: 1px solid var(--beige); }

.pdx-faq-item summary {
    position: relative;
    padding: 14px 28px 14px 0;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}

.pdx-faq-item summary::-webkit-details-marker { display: none; }

.pdx-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    line-height: 1;
    color: var(--muted);
}

.pdx-faq-item[open] summary::after { content: '\2212'; }
.pdx-faq-item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pdx-faq-item p { padding: 0 28px 16px 0; color: var(--muted); }


/* ---------- Quote request ---------- */

.pdx-quote {
    margin-top: 56px;
    padding: 48px 0;
    background: var(--tint);
    scroll-margin-top: 80px;
}

.pdx-quote-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 48px;
    align-items: start;
}

.pdx-quote h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.25;
    color: var(--navy);
}

.pdx-quote-intro p { margin-top: 10px; color: var(--muted); max-width: 40ch; }
.pdx-quote-intro .pdx-or { font-size: 0.8125rem; }
.pdx-quote-intro .pdx-or a { color: var(--navy); font-weight: 600; }

.pdx-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.pdx-form .full { grid-column: 1 / -1; }

.pdx-form label {
    display: block;
    margin: 0 0 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink);
}

.pdx-form input[type="text"],
.pdx-form input[type="email"],
.pdx-form textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.875rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--beige-2);
    border-radius: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pdx-form textarea { min-height: 96px; resize: vertical; }

.pdx-form input:focus,
.pdx-form textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(16, 106, 168, 0.2);
}

.pdx-form .pdx-btn { justify-self: start; }

.pdx-alert {
    margin-bottom: 14px;
    padding: 10px 12px;
    font-size: 0.8125rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--beige-2);
    border-radius: 6px;
}

.pdx-alert-success { color: #1d5c3f; background: #e8f4ed; border-color: #b9dcc9; }
.pdx-alert-error,
.pdx-alert-danger { color: #7d2a21; background: #fbeeec; border-color: #e8b9b3; }


/* ---------- Related products ---------- */

.pdx-related { padding: 56px 0 72px; }

.pdx-related h2 {
    margin-bottom: 18px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--navy);
}

.pdx-rel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 20px;
}

.pdx-rel-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.pdx-rel-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eaf4fb;
    border-radius: 10px;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.15s ease;
}

.pdx-rel-thumb img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdx-rel-card:hover .pdx-rel-thumb { outline-color: var(--navy); }
.pdx-rel-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }

.pdx-rel-name {
    margin-top: 10px;
    font-weight: 600;
    color: var(--navy);
}

.pdx-rel-brief {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ---------- Responsive ---------- */

@media (max-width: 900px) {

    .pdx .pdx-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        margin-top: -60px;
    }

    .pdx-media { max-width: 440px; }
    .pdx-info { padding-top: 0; }

    .pdx-quote-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 560px) {

    .pdx .wrap { padding: 0 16px; }
    .pdx-top { padding-bottom: 80px; }
    .pdx .pdx-details { padding-top: 44px; }
    .pdx-tabs { gap: 22px; overflow-x: auto; overflow-y: hidden; }
    .pdx-tab { margin-bottom: 0; }
    .pdx-form { grid-template-columns: minmax(0, 1fr); }
    .pdx-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .pdx-quote { padding: 36px 0; }
}

@media (prefers-reduced-motion: reduce) {

    .pdx *,
    .pdx *::before,
    .pdx *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}