/*
 * Polaris Products — the product page and product cards.
 *
 * DELIBERATELY UNSCOPED, like page-elements.css: a product page renders in the host
 * theme's content flow, so it inherits the site's typography, and metronic.css (scoped
 * to #polaris-ui) cannot reach it. Only what these two surfaces need lives here.
 */

.pls-prod__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 400;
    margin-bottom: 18px;
}

/* Every crumb reads the same: link, labels and part code share the trail's size, weight
   and muted colour, so nothing in it looks emphasised. The muting is per item rather than
   on the trail, or it would dim the accent separators along with the text. */
.pls-prod__crumbs a,
.pls-prod__crumbs span {
    font-size: inherit;
    font-weight: 400;
    color: inherit;
    opacity: .75;
}

/* The separators are the one accented thing, following Theme Options via the property the
   element sets from the theme's own accent value. */
.pls-prod__crumbs-sep {
    color: var(--pls-crumb-sep, currentColor);
    opacity: 1;
}

/* Image left, everything else right, and one column the moment it stops fitting. */
.pls-prod__top {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

@media (max-width: 860px) {
    .pls-prod__top {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* The imported images are square on a white canvas, so the frame is square too and
   nothing ever letterboxes. */
.pls-prod__media {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: var(--pls-media-radius, 12px);
    overflow: hidden;
    border: var(--pls-media-border, 0) solid var(--pls-media-border-colour, rgba(0, 0, 0, .12));
}

.pls-prod__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pls-prod__title {
    margin: 4px 0 6px;
    line-height: 1.15;
}

.pls-prod__sku {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: .875rem;
    margin: 0 0 14px;
}

.pls-prod__sku span {
    opacity: .7;
}

.pls-prod__lede {
    font-weight: 500;
    margin: 0 0 12px;
}

.pls-prod__features {
    margin: 14px 0 0;
    padding-inline-start: 1.1em;
}

.pls-prod__features li {
    margin-bottom: 4px;
}

.pls-prod__specs {
    width: 100%;
    margin-top: 18px;
    border-collapse: collapse;
    font-size: .875rem;
}

.pls-prod__specs th,
.pls-prod__specs td {
    text-align: start;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.pls-prod__specs th {
    width: 40%;
    font-weight: 600;
    opacity: .8;
}

.pls-prod__approvals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.pls-prod__h2 {
    font-size: 1.125rem;
    margin: 34px 0 14px;
}

.pls-prod__tabnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

/* One row per file: icon, title, revision, format. The whole row is the target. */
.pls-prod__file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 10px;
    margin-bottom: 8px;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.pls-prod__file:hover {
    background: rgba(0, 0, 0, .03);
    border-color: rgba(0, 0, 0, .2);
}

.pls-prod__file-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
}

.pls-prod__file-rev,
.pls-prod__file-meta {
    flex: 0 0 auto;
    font-size: .75rem;
    opacity: .65;
}

/* Cards: related products, and the listing element. */
.pls-prod__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.pls-prod__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}

.pls-prod__card:hover {
    border-color: rgba(0, 0, 0, .25);
    transform: translateY(-2px);
}

.pls-prod__card-media {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.pls-prod__card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pls-prod__card-name {
    font-weight: 600;
    line-height: 1.25;
}

.pls-prod__card-sku {
    font-size: .75rem;
    opacity: .7;
}

/* Admin-only note where the downloads would be. Deliberately plain: it is a diagnostic,
   not part of the design, and no visitor ever sees it. */
.pls-prod__note {
    font-size: .8125rem;
    padding: 10px 12px;
    border: 1px dashed rgba(0, 0, 0, .25);
    border-radius: 8px;
    opacity: .8;
}

/*
 * A set of download buttons.
 *
 * The buttons themselves are the THEME's (Uncode shortcodes, so they follow its palette
 * and options); only their placement is ours. Uncode's `.btn-container.btn-inline` is
 * `display:inline-block` with `margin-top:0 !important` and 9px of side padding instead
 * of a gutter — so a set that wraps onto a second line has no vertical gap at all and the
 * bordered boxes collide, while uneven label lengths leave ragged horizontal spacing.
 * A flex row with a real gap fixes both without touching how a button looks.
 */
.pls-prod__files {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 12px;
}

/* The side padding is Uncode's stand-in for a gutter; the gap above replaces it, and
   the !important margin has to be answered in kind. */
.pls-prod__files > .btn-container.btn-inline {
    padding-left: 0;
    padding-right: 0;
    margin: 0 !important;
}

/* Two columns, via CSS multi-column rather than grid: the list flows down the first
 * column and back up the second, so it stays balanced whether a product has four
 * features or fourteen. `break-inside` stops a wrapped feature splitting across the gap. */
.pls-prod__features--2col {
    columns: 2;
    column-gap: var(--pls-col-gap, 32px);
}

.pls-prod__features--2col li {
    break-inside: avoid;
}

@media (max-width: 700px) {
    .pls-prod__features--2col {
        columns: 1;
    }
}

/* The bullet takes the theme's accent colour, passed in as --pls-bullet from Theme
   Options. ::marker only accepts colour and font properties, which is all this needs. */
.pls-prod__features li::marker {
    color: var(--pls-bullet, currentColor);
}