/* ============================================================
   SLYDESIGNS — MAIN STYLESHEET
   ============================================================ */


/* ============================================================
   CSS VARIABLES
   ============================================================ */

:root {
    --content-width: 1300px;
    --side-padding:  12px;
    --font-base: 'audiowide-regular-webfont', Arial, sans-serif;
    --font-fine: Arial, sans-serif;
}


/* ============================================================
   FONTS
   ============================================================ */

@font-face {
    font-family: 'audiowide-regular-webfont';
    src: url('../fonts/audiowide-regular-webfont.woff2') format('woff2'),
         url('../fonts/audiowide-regular-webfont.woff') format('woff'),
         url('../fonts/audiowide-regular-webfont.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'CourierPrime';
    src: url('../fonts/CourierPrime-Regular.woff2') format('woff2');
    font-display: swap;
}


/* ============================================================
   BASE RESET
   ============================================================ */

body {
    font-family: var(--font-base);
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
    background-color: #000;
    color: #fff;
}

input,
button,
select,
textarea {
    font-family: var(--font-base);
}

a {
    text-decoration: none;
    outline: none;
}

a:active {
    background: none;
}

img {
    border: none;
    max-width: 100%;
}

section {
    width: 100%;
}


/* ============================================================
   LAYOUT
   Reusable centered content wrapper. .hero overrides
   max-width to allow full-bleed behavior.
   ============================================================ */

.section-inner {
    position: relative;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--side-padding);
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero .section-inner {
    max-width: none;
}


/* ============================================================
   HEADER
   Fixed 3-column grid: logo | nav | actions.
   ============================================================ */

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    overflow: visible;
}

#header .header-inner {
    height: 72px;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding: 0 var(--side-padding);
}

#header .logo {
    width: 150px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-self: start;
}

#header .header-inner ul#navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;

    list-style: none;
    margin: 0;
    padding: 0;

    overflow: visible;
}

#header .header-inner ul#navigation li {
    position: relative;
}

#header .header-inner ul#navigation li a {
    display: flex;
    align-items: center;

    height: 72px;
    padding: 0 22px;

    color: #fff;
    font-family: var(--font-base);
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;

    transition: background 0.2s ease;
}

#header .header-inner ul#navigation li a:hover {
    background: #620031;
}

#header .header-inner ul#navigation li.selected a {
    background: rgba(128, 128, 128, 0.4);
}

@media (max-width: 1320px) {
    #header .header-inner ul#navigation li a {
        padding: 0 16px;
        font-size: clamp(16px, 1.6vw, 23px);
    }
}

@media (max-width: 1180px) {
    #header .header-inner ul#navigation li a {
        padding: 0 12px;
        font-size: clamp(14px, 1.35vw, 20px);
    }
}


/* ============================================================
   HEADER — PRODUCTS DROPDOWN
   ============================================================ */

   #header .header-inner ul#navigation li.menu ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;

    min-width: 180px;
    margin: 0;
    padding: 6px 0;
    list-style: none;

    background: #620031;
    z-index: 99999;
}

#header .header-inner ul#navigation li.menu ul li {
    list-style: none;
}

#header .header-inner ul#navigation li.menu:hover > ul {
    display: block;
}

#header .header-inner ul#navigation li.menu ul li a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 114px;

    color: #fff;
    font-family: var(--font-base);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;

    background: transparent;
    transition: background 0.2s ease;
}

#header .header-inner ul#navigation li.menu ul li a:hover {
    background: #450022;
}


/* ============================================================
   HEADER — ACTIONS
   Cart button and mobile hamburger (injected by mobile.js).
   ============================================================ */

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    justify-self: end;
    min-width: 0;
}

.search-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 4px 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.search-form input[type="search"] {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    width: 120px;
    outline: none;
}

.search-form input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.search-form button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    margin-left: 8px;
}

.header-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 72px;
    height: 40px;
}

/* PayPal button mounted invisibly; .cart-icon drives the visual */
.header-cart paypal-cart-button {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: auto;
    overflow: hidden;
    z-index: 2;
}

#mobile-navigation {
    display: flex;
    align-items: center;
}

.cart-icon {
    display: inline-flex;
    width: 72px;
    min-width: 72px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #620031;
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    padding: 0 8px;
    position: relative;
    gap: 6px;
    pointer-events: none;
    z-index: 1;
}

.header-cart:hover .cart-icon {
    opacity: 0.82;
}

.cart-icon-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 1;
}

.cart-icon-glyph svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.cart-count {
    position: static;
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
}


/* ============================================================
   HERO
   Full-bleed background image with a dark overlay.
   ============================================================ */

.hero {
    width: 100%;
    min-height: auto;
    position: relative;

    display: flex;
    justify-content: center;

    background: url("../images/bg-home.webp") no-repeat center center;
    background-size: cover;

    text-align: left;
    padding-top: 180px;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
}

.hero h1 {
    font-family: var(--font-base);
    font-size: clamp(5rem, 10vw, 10rem);
    font-weight: normal;
    letter-spacing: 4px;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    overflow-wrap: normal;
    max-width: calc(100vw - 24px);
}

.hero .tagline {
    font-family: var(--font-base);
    font-size: clamp(1.5rem, 2.5vw, 2.6rem);
    font-weight: normal;
    opacity: 0.8;
    margin: 0 0 100px 0;
    width: 100%;
    max-width: 1100px;
}

/* ============================================================
   MAGAZINE PREVIEW
   ============================================================ */

section.magazine-preview {
    padding: 90px 0 90px;
}

section.magazine-preview .section-inner {
    max-width: none;          /* removes width cap */
    padding: 0 vw;           /* small side gutters */
}

section.magazine-preview .pdf-preview {
    width: min(96vw, 1600px); /* very wide but still controlled */
    margin: rem auto 0;
}

section.magazine-preview .pdf-preview iframe {
    width: 100%;
    height: 70vh;             /* optional: taller viewer */
    min-height: 420px;
    border: 0;
}


/* ============================================================
   SECTION HEADER
   Frosted label bar used above the featured product slider.
   ============================================================ */

.section-header h2 {
    width: 100%;
    padding: 12px 0;

    font-family: var(--font-base);
    font-size: 2.5rem;
    font-weight: normal;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: #b3b3b3;
    text-align: center;

    background: rgba(0, 0, 0, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(10px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   FEATURED PRODUCTS
   ============================================================ */

.featured-products {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--side-padding) 20px;
    text-align: center;
}

.featured-products ul {
    list-style: none;
    padding: 0;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.featured-products li {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}


/* ============================================================
   PRODUCT SLIDER
   Centered carousel; adjacent slides fade and shrink.
   Active slide is full opacity and scale.
   ============================================================ */

.product-slider {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.slider-track {
    display: flex;
    align-items: center;
    gap: 24px;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.product-slide {
    flex: 0 0 340px;
    position: relative;
    opacity: 0.25;
    transform: scale(0.88);
    filter: brightness(0.7);
    transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}

.product-slide.active {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
    z-index: 5;
}

.product-slide a {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 18px;
}

/* "Click here to buy" overlay over the product image (not View All) */
.product-slide:not(.view-all) a::after {
    content: "Click here to buy";
    content: "Click here to buy" / "";
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    background: rgba(0, 0, 0, 0.5);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.product-slide:not(.view-all) a:hover::after,
.product-slide:not(.view-all) a:focus-visible::after {
    opacity: 1;
}

.product-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product name and price — revealed on hover */
.product-info {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 3;
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.product-info h3,
.product-info p {
    margin: 0;
}

.product-slide:hover .product-info,
.product-slide:focus-within .product-info {
    opacity: 1;
    transform: translateY(0);
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
}

.slider-btn.prev { left: 12px; }
.slider-btn.next { right: 12px; }


/* ============================================================
   PRODUCT SLIDER — VIEW ALL SLIDE
   ============================================================ */

.product-slide.view-all {
    opacity: 0.85;
    transform: scale(0.92);
    filter: brightness(0.9);
    position: relative;
    transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}

.product-slide.view-all::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.product-slide.view-all a {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.product-slide.view-all .view-all-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.product-slide.view-all h3 {
    color: #b3b3b3;
    font-size: 1.4rem;
    letter-spacing: 1px;
    margin: 0;
}

.product-slide.view-all span {
    color: #b3b3b3;
    font-size: 1.1rem;
    opacity: 0.9;
}

.product-slide.view-all:hover {
    opacity: 1;
    transform: scale(1.03) translateY(-6px);
    filter: brightness(1);
    z-index: 3;
}


/* ============================================================
   INFO BANNER
   Full-width brand color strip.
   ============================================================ */

.info {
    background: #630031;
    color: #fff;
    font-family: var(--font-base);
    padding: 12px 0;
    text-align: center;
}

.info h1 {
    font-size: 52px;
    font-weight: normal;
    margin: 0 0 8px 0;
}

.info p {
    margin: 0 auto;
    line-height: 1.6;
    max-width: 900px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.info .half-text {
    display: inline-block;
    max-width: 100%;
}

.info h2 {
    margin: 0 0 6px 0;
}


/* ============================================================
   ABOUT
   Brand introduction text block.
   ============================================================ */

.about {
    font-family: var(--font-base);
    padding: 50px 0;
    text-align: center;
}

.about h2 {
    font-family: var(--font-base);
    font-size: clamp(14px, 2vw, 30px);
    font-weight: normal;
    line-height: 1.3;
    color: #a3a3a3;
    letter-spacing: normal;
    text-transform: uppercase;
    margin: 0 0 20px 0;
}

.about p {
    margin: 0 auto 16px auto;
    line-height: 1.6;
    max-width: 900px;
    overflow-wrap: break-word;
}

.about p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   MEDIA SECTION
   Two-column layout: featured video left, blog posts right.
   ============================================================ */

.media-section {
    width: 100%;
    padding: 70px 0;
    text-align: center;
}

.media-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--side-padding);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.media-video {
    width: 57%;
}

.media-blog {
    width: 42%;
}

.media-video h1,
.media-blog h1 {
    font-family: var(--font-base);
    font-size: 42px;
    font-weight: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.media-video iframe {
    display: block;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    border: 0;
    border-radius: 18px;
    outline: none;
    background-color: #000;
}

/* Video facade shares the iframe's rounded corners so they hold before
   and after the video loads. */
.media-video .yt-facade {
    border-radius: 18px;
    overflow: hidden;
}

.media-blog .blog-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.media-blog .blog-item {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
}

.media-blog .blog-item > a:first-child {
    width: 100%;
    display: block;
}

.media-blog .blog-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
}

.media-video h2,
.media-blog h2,
.media-blog .blog-item h3 {
    font-size: clamp(14px, 2vw, 30px);
    word-break: break-word;
    overflow-wrap: break-word;
    font-weight: normal;
    line-height: 1.3;
    color: #a3a3a3;
    margin: 14px 0 6px;
    text-transform: uppercase;
}

.media-blog .blog-item:nth-child(1) h2,
.media-blog .blog-item:nth-child(2) h2,
.media-blog .blog-item:nth-child(1) h3,
.media-blog .blog-item:nth-child(2) h3 {
    font-family: var(--font-base);
    letter-spacing: 2px;
}

/* Column headings use the same frosted label bar as .section-header h2. */
.media-video > h2,
.media-blog > h2 {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 0;
    margin: 0 0 20px;

    font-family: var(--font-base);
    font-size: 2.5rem;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: #b3b3b3;
    text-align: center;

    background: rgba(0, 0, 0, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(10px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.media-blog span {
    display: block;
    font-family: var(--font-base);
    font-size: clamp(11px, 1.2vw, 23px);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 14px;
}

.media-blog a.more {
    display: inline-block;
    font-family: var(--font-base);
    font-size: clamp(11px, 1.2vw, 24px);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    padding: 8px 14px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    transition: all 0.2s ease;
}

.media-blog a.more:hover {
    background: #620031;
    border-color: #620031;
}

.media-blog .excerpt {
    font-family: var(--font-base);
    font-size: clamp(13px, 1.1vw, 18px);
    color: #ddd;
    line-height: 1.5;
    margin: 0;
}

.media-blog .blog-item h2,
.media-blog .blog-item h3,
.media-blog .blog-item span,
.media-blog .blog-item a.more {
    display: block;
}

.media-blog .blog-item a.more {
    margin-top: 10px;
}

.media-blog article {
    margin-bottom: 0;
}

/* Blog teaser: photo-overlay card. Columns stretch to equal height and
   the card fills whatever the heading leaves, so the blog column always
   matches the Featured Video column. */
.media-inner {
    align-items: stretch;
}

.media-blog {
    display: flex;
    flex-direction: column;
}

.media-blog .blog-list {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.media-blog .blog-item {
    position: relative;
    display: block;
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    min-height: 200px;
    padding: 0;
    border: 0;
    overflow: hidden;
}

/* Photo link is stretched over the whole card so the card is clickable. */
.media-blog .blog-item > a:first-child {
    position: absolute;
    inset: 0;
}

.media-blog .blog-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    transition: transform 0.3s ease;
}

.media-blog .blog-item:hover img {
    transform: scale(1.03);
}

/* Overlay fills the card: title and date pinned to the top, excerpt and
   Read More pinned to the bottom, each over its own gradient. */
.media-blog .blog-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    pointer-events: none;
}

.media-blog .blog-head {
    padding: 20px 20px 56px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.85) 70%, rgba(0, 0, 0, 0.9) 100%);
}

.media-blog .blog-foot {
    padding: 56px 20px 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 35%, rgba(0, 0, 0, 0.88) 60%, rgba(0, 0, 0, 0.92) 100%);
}

.media-blog .blog-content h3 {
    margin: 0 0 6px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.media-blog .blog-content span {
    color: #ccc;
    margin-bottom: 10px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.media-blog .blog-content .excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin: 0 0 12px;
    color: #e6e6e6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.media-blog .blog-content a.more {
    display: inline-block;
    margin-top: 0;
    pointer-events: auto;
}

/* Narrow desktop: the card is short, so tighten the overlay to fit. */
@media (min-width: 769px) and (max-width: 1023px) {
    .media-video > h2,
    .media-blog > h2 {
        font-size: 1.75rem;
    }

    .media-blog .blog-head {
        padding: 16px 16px 32px;
    }

    .media-blog .blog-foot {
        padding: 32px 16px 16px;
    }

    .media-blog .blog-content .excerpt {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-bottom: 8px;
    }
}


/* ============================================================
   CAROUSEL
   Used on product detail pages for image/video slides.
   ============================================================ */

.carousel {
    position: relative;
    max-width: 900px;
    margin: 40px auto;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.6s ease;
}

.carousel-item {
    min-width: 100%;
    display: none;
}

.carousel-item.active {
    display: block;
}

.slide-content img {
    width: 100%;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
}

/* PRODUCTS PAGE ENHANCEMENTS (card catalog + magazine callout + bottom search) */
body.product-detail-page .products-magazine-callout {
    margin: 0 0 24px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

body.product-detail-page .products-magazine-callout p {
    margin: 0 0 12px;
}

body.product-detail-page .products-search-help {
    padding: 8px 0 48px;
}

body.product-detail-page .products-search-help-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--side-padding);
    text-align: center;
}

body.product-detail-page .products-search-help-inner h2 {
    margin: 0 0 8px;
    font-family: var(--font-base);
    font-weight: normal;
    color: #fff;
}

body.product-detail-page .products-search-help-inner p {
    margin: 0 0 14px;
    color: #ccc;
}

body.product-detail-page .products-search-form {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

body.product-detail-page .products-search-form input[type="search"] {
    width: min(520px, 90vw);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

body.product-detail-page .products-search-form button {
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    background: #620031;
    color: #fff;
    font-family: var(--font-base);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}


/* ============================================================
   FOOTER
   Social icons bar above a legal strip.
   ============================================================ */

#footer {
    padding: 0;
    margin: 0;
    width: 100%;
}

#footer .footer-social {
    background: #a3a3a3;
    min-height: 84px;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#footer .connect {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 0 0;
    text-align: center;
    overflow: hidden;
}

#footer .connect h1 {
    font-family: var(--font-base);
    font-size: 32px;
    font-weight: normal;
    line-height: 23px;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
}

#footer .connect div {
    display: inline-block;
    padding: 0;
}

#footer .connect a {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 5px;
    background: url("../images/icons.webp") no-repeat;
    text-indent: -99999px;
}

/* Tighten the space above "FOLLOW US ON" to match the visible space below the icons */
#footer .connect {
    padding-top: 8px;
}

#footer .connect h2 {
    font-family: var(--font-base);
    font-size: 32px;
    font-weight: normal;
    line-height: 23px;
    color: #000;
    text-transform: uppercase;
    margin: 0 0 10px;
}

#footer a.instagram { background-position: top 0px left -87px; }
#footer a.youtube   { background-position: top 0px left -347px; }
#footer a.patreon   { background-position: top 0px left -412px; }
#footer a.facebook  { background-position: top 0px left -22px; }
#footer a.tiktok    { background-position: top 0px left -282px; }

#footer a.instagram:hover { background-position: bottom 10px left -87px; }
#footer a.youtube:hover   { background-position: bottom 10px left -347px; }
#footer a.patreon:hover   { background-position: bottom 10px left -412px; }
#footer a.facebook:hover  { background-position: bottom 10px left -22px; }
#footer a.tiktok:hover    { background-position: bottom 10px left -282px; }

#footer .footer-legal {
    background: #fff;
    padding: 18px 0;
    margin: 0;
    text-align: center;
}

#footer .footnote p {
    margin: 0;
    font-family: var(--font-base);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000;
    opacity: 0.85;
}


/* ============================================================
   UTILITIES
   ============================================================ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.fine-print {
    font-family: var(--font-fine);
}


/* ============================================================
   SEARCH RESULTS
   ============================================================ */

.search-results {
    padding-top: 120px;
    min-height: 60vh;
}

.search-results h1 {
    font-family: var(--font-base);
    font-size: 3rem;
    margin-bottom: 40px;
    color: #fff;
}

.search-results-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 800px;
    width: 100%;
}

.search-result {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.search-result h3 {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
}

.search-result h3 a {
    color: #fff;
    text-decoration: none;
}

.search-result h3 a:hover {
    color: #620031;
}

.result-type {
    display: inline-block;
    background: #620031;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.search-result p {
    margin: 0;
    line-height: 1.6;
    color: #b3b3b3;
}

.search-result mark {
    background: #620031;
    color: #fff;
    padding: 2px 4px;
    border-radius: 3px;
}


/* ============================================================
   PRODUCTS CATALOG PAGE
   ============================================================ */

body.products-page .products-catalog {
    padding-top: 120px;
    padding-bottom: 48px;
    min-height: 60vh;
    background: #000;
}

body.products-page .products-catalog-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--side-padding);
}

body.products-page .products-catalog-inner > h1 {
    font-family: var(--font-base);
    font-size: 3rem;
    margin: 0 0 32px;
    color: #fff;
}

body.products-page .products-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.products-page .products-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
    flex-wrap: wrap;
    padding: 40px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

body.products-page .products-row:first-child {
    padding-top: 0;
}

body.products-page .products-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

body.products-page .products-row > a {
    flex: 0 0 auto;
}

body.products-page .products-thumb {
    width: 350px;
    max-width: 100%;
    height: auto;
    display: block;
}

body.products-page .products-row-body {
    flex: 1 1 280px;
    min-width: 0;
}

body.products-page .products-row-body h1 {
    font-family: var(--font-base);
    font-size: 1.75rem;
    margin: 0 0 12px;
    color: #fff;
    font-weight: normal;
}

body.products-page .products-row-body p {
    margin: 0 0 12px;
    line-height: 1.6;
    color: #ccc;
}

body.products-page .products-row-body a.more {
    display: inline-block;
    margin-top: 4px;
    color: #fff;
    background: #620031;
    padding: 8px 16px;
    border-radius: 6px;
    font-family: var(--font-base);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.products-page .products-row-body a.more:hover {
    opacity: 0.9;
}


/* ============================================================
   BLOG INDEX PAGE
   ============================================================ */

body.blog-page .blog-index {
    padding-top: 120px;
    padding-bottom: 48px;
    min-height: 60vh;
    background: #000;
}

body.blog-page .blog-index-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--side-padding);
}

body.blog-page .blog-index-inner > h1 {
    font-family: var(--font-base);
    font-size: 3rem;
    margin: 0 0 32px;
    color: #fff;
}

body.blog-page .blog-posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.blog-page .blog-post-row {
    padding: 40px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

body.blog-page .blog-post-row:first-child {
    padding-top: 0;
}

body.blog-page .blog-post-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

body.blog-page .blog-post-row h1 {
    font-family: var(--font-base);
    font-size: 1.75rem;
    margin: 0 0 8px;
    color: #fff;
    font-weight: normal;
}

body.blog-page .blog-post-row span {
    display: block;
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

body.blog-page .blog-post-row p {
    margin: 0;
    line-height: 1.6;
    color: #ccc;
}


/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */

   body.product-detail-page .product-detail {
    padding-top: 120px;
    padding-bottom: 48px;
    min-height: 60vh;
    background: #000;
}

body.product-detail-page .product-detail-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--side-padding);
}

body.product-detail-page .product-detail-inner > h1 {
    font-family: var(--font-base);
    font-size: 3rem;
    margin: 0 0 28px;
    color: #fff;
    font-weight: normal;
}

body.product-detail-page .product-detail-intro {
    padding-bottom: 28px;
    margin-bottom: 8px;
}

body.product-detail-page .product-detail-intro h1 {
    font-family: var(--font-base);
    font-size: 1.75rem;
    margin: 0 0 12px;
    color: #fff;
    font-weight: normal;
}

body.product-detail-page .product-detail-intro p {
    margin: 0;
    line-height: 1.6;
    color: #ccc;
}

/* ------------------------------------------------------------
   Magazine callout (used on products landing variant)
   ------------------------------------------------------------ */
body.product-detail-page .products-magazine-callout {
    margin: 0 0 24px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
}

body.product-detail-page .products-magazine-callout p {
    margin: 0 0 12px;
    line-height: 1.6;
    color: #ccc;
}

/* ------------------------------------------------------------
   Product cards
   ------------------------------------------------------------ */
body.product-detail-page .product-variants-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

body.product-detail-page .product-variant {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

body.product-detail-page .product-variant iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
}

body.product-detail-page .product-variant h1 {
    font-family: var(--font-base);
    font-size: 1.75rem;
    margin: 0 0 12px;
    color: #fff;
    font-weight: normal;
}

body.product-detail-page .product-variant p {
    margin: 0 0 12px;
    line-height: 1.6;
    color: #ccc;
}

body.product-detail-page .product-variant p.fine-print {
    margin-top: 8px;
}

body.product-detail-page .product-variant .variant-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 30%);
    gap: 28px;
    align-items: start;
    margin-top: 16px;
}

body.product-detail-page .product-variant .variant-media {
    margin-bottom: 16px;
    min-width: 0;
}

/* Keep for legacy pages still using carousel markup */
body.product-detail-page .product-variant .variant-media .carousel {
    margin: 0;
}

body.product-detail-page .product-variant .variant-buy {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    text-align: center;
}

/* Shared CTA button style for this page (cards + magazine callout) */
body.product-detail-page a.more {
    display: inline-block;
    margin: 0;
    color: #fff;
    background: #620031;
    padding: 8px 16px;
    border-radius: 6px;
    font-family: var(--font-base);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.product-detail-page a.more:hover {
    opacity: 0.9;
}

/* ------------------------------------------------------------
   USA badge (detail pages)
   ------------------------------------------------------------ */
body.product-detail-page .made-in-usa {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: center;
    padding: 0;
    background: none;
    border: none;
    color: #fff;
    font-family: var(--font-base);
    font-size: 1.12rem;
    line-height: 1.25;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

body.product-detail-page .made-in-usa .usa-flag {
    width: 40px;
    height: 24px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}


/* ============================================================
   PRODUCT DETAIL PAGE — CAROUSEL
   ============================================================ */

body.product-detail-page .carousel {
    margin: 28px auto 8px;
    touch-action: pan-y;
}

body.product-detail-page .carousel .slide-content:has(iframe) {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-height: min(70vh, 520px);
    margin: 0 auto;
    background: #111;
}

body.product-detail-page .carousel .slide-content iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

body.product-detail-page .carousel .slide-content:not(:has(iframe)) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: #111;
}

body.product-detail-page .carousel .slide-content:not(:has(iframe)) img {
    width: 100%;
    max-height: min(70vh, 520px);
    object-fit: contain;
}

body.product-detail-page .carousel-button {
    z-index: 3;
    cursor: pointer;
    border-radius: 4px;
}

body.product-detail-page .carousel-button.carousel-prev {
    left: 8px;
}

body.product-detail-page .carousel-button.carousel-next {
    right: 8px;
}

body.product-detail-page .carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

body.product-detail-page .carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

body.product-detail-page .carousel-dots .dot:hover {
    background: rgba(255, 255, 255, 0.55);
}

body.product-detail-page .carousel-dots .dot.active {
    background: #620031;
    transform: scale(1.15);
}


/* ============================================================
   PRODUCT DETAIL PAGE — IMAGE ZOOM OVERLAY
   ============================================================ */

body.product-detail-page #image-zoom-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 48px 16px 16px;
    box-sizing: border-box;
}

body.product-detail-page #image-zoom-overlay #zoom-image {
    max-width: min(96vw, 1200px);
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

body.product-detail-page #image-zoom-overlay #zoom-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.product-detail-page #image-zoom-overlay #zoom-close:hover {
    background: #620031;
}



/* ============================================================
   MAGAZINE PAGE
   ============================================================ */

.pdf-mobile-link {
    display: none;
}

.product-variant {
    scroll-margin-top: 90px;
}

/* ============================================================
   BLOG PAGE POSTS
   ============================================================ */

body.product-detail-page .product-variant h2 {
    font-family: var(--font-base);
    font-size: 1.75rem;
    margin: 0 0 12px;
    color: #fff;
    font-weight: normal;
}

body.product-detail-page .product-variant span {
    display: block;
    font-family: var(--font-base);
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: #888;
    margin: 0 0 16px;
}

body.product-detail-page .product-variant h3 {
    font-family: var(--font-base);
    font-weight: normal;
    font-size: 1.25rem;
    color: #fff;
    letter-spacing: 1px;
    margin: 24px 0 10px;
}

.product-variant > div {
    display: flow-root;
}

.post-figure {
    float: right;
    width: 36%;
    max-width: 360px;
    margin: 0 0 16px 24px;
}

.post-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.post-video {
    max-width: 800px;
    margin: 20px 0;
}

.post-figure-left {
    float: left;
    margin: 0 24px 16px 0;
}

.post-video iframe,
.post-video .yt-facade {
    border-radius: 18px;
}

/* Click-to-play facade, same pattern as the featured video on test.html. */
.post-video .yt-facade {
    position: relative;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.post-video .yt-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-video .yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    line-height: 1;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 72px;
    height: 72px;
    cursor: pointer;
}

.post-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0;
    clear: both;
}

.post-gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
}

.product-variant a.more {
    display: inline-block;
    font-family: var(--font-base);
    font-size: clamp(11px, 1.2vw, 24px);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    padding: 8px 14px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    transition: all 0.2s ease;
}

.product-variant a.more:hover {
    background: #620031;
    border-color: #620031;
}

.post-buy {
    margin-top: 20px;
}

body.product-detail-page .product-variant p a:not(.more) {
    color: #fff;
    text-decoration: underline;
}

/* Two-photo gallery variant (landscape crops) */
.post-gallery-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-gallery-2 img {
    aspect-ratio: 4 / 3;
}

/* Tall gallery variant (portrait 3:4 crops). Two-class selector beats .post-gallery-2 img. */
.post-gallery.post-gallery-tall img {
    aspect-ratio: 3 / 4;
}

/* Four-photo gallery variant */
.post-gallery-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Vertical video (YouTube Shorts): 9:16 instead of 16:9.
   Selectors out-rank .post-video .yt-facade and the
   body.product-detail-page .product-variant iframe rule. */
.post-video.post-video-vertical {
    max-width: 360px;
}

.post-video.post-video-vertical .yt-facade,
.post-video.post-video-vertical .yt-facade img,
body.product-detail-page .post-video.post-video-vertical iframe {
    aspect-ratio: 9 / 16;
    border-radius: 18px;
}

/* ============================================================
   BLOG POST PAGES (blog/*.html)
   The post title is the h1; section headings are h2s styled like
   the old h3s. The extra class out-ranks the post-title h2 rule
   here and in mobile.css, so no mobile override is needed.
   ============================================================ */

body.product-detail-page .product-variant.blog-post h2 {
    font-family: var(--font-base);
    font-weight: normal;
    font-size: 1.25rem;
    color: #fff;
    letter-spacing: 1px;
    margin: 24px 0 10px;
}

/* Post navigation: All posts, newer and older links */
.post-nav {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.post-nav a.more {
    margin-top: 0;
}

.post-nav a:not(.more) {
    font-family: var(--font-base);
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: #ccc;
    text-decoration: underline;
}

.post-nav a:not(.more):hover {
    color: #fff;
}

/* ============================================================
   ABOUT PAGE (about.html)
   Uses the blog post layout. Product names are h3s, linked to
   their product pages and sized below the post h2s.
   ============================================================ */

body.product-detail-page .product-variant.blog-post.about-post h3 {
    font-family: var(--font-base);
    font-weight: normal;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: 1px;
    margin: 20px 0 8px;
}

.about-post a.about-heading-link {
    display: block;
    color: #fff;
}

.about-post a.about-heading-link:hover h3 {
    text-decoration: underline;
}

/* Small source photo (owner headshot): show it at its own size, never stretched */
.about-post .post-figure.about-figure-small {
    max-width: 200px;
}

/* Bulleted list in the content box, matching the paragraph text */
.about-post ul.about-list {
    list-style: disc;
    margin: 0 0 1em;
    padding-left: 1.5em;
    color: #ccc;
    font-size: inherit;
    line-height: 1.6;
}

/* Single full-width photo: keep its own shape instead of the square crop */
.post-gallery.post-gallery-single {
    grid-template-columns: 1fr;
}

.post-gallery.post-gallery-single img {
    aspect-ratio: auto;
}

/* ============================================================
   BLOG LIST PAGE (blog/index.html)
   Teaser cards, two per row; same dark rounded card as the
   home page blog teaser.
   ============================================================ */

.blog-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
}

.blog-card-image {
    display: block;
    overflow: hidden;
    border-radius: 14px;
}

.blog-card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.03);
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.blog-card h2 {
    font-family: var(--font-base);
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.3;
    letter-spacing: 1px;
    margin: 0 0 6px;
}

.blog-card h2 a {
    color: #fff;
}

.blog-card h2 a:hover {
    color: #ccc;
}

.blog-card span {
    display: block;
    font-family: var(--font-base);
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: #888;
    margin: 0 0 12px;
}

.blog-card p {
    margin: 0 0 16px;
    line-height: 1.6;
    color: #ccc;
}

/* Pin Read More to the bottom so buttons line up across a row */
body.product-detail-page .blog-card a.more {
    margin-top: auto;
}

/* ============================================================
   STICKY FOOTER
   On short pages the main content grows to fill the screen, so the
   footer sits at the bottom instead of floating mid-screen.
   ============================================================ */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > #page {
    flex: 1 0 auto;
}

/* ============================================================
   PRODUCT PAGES — CLICK-TO-PLAY VIDEO IN CAROUSELS
   The first carousel slide shows a YouTube thumbnail with a play
   button; loadYouTube() swaps in the real player on click. The
   thumbnail ignores clicks so main.js's photo zoom doesn't open
   when someone presses play.
   ============================================================ */

body.product-detail-page .carousel .slide-content:has(.yt-facade) {
    display: block;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-height: min(70vh, 520px);
    min-height: 0;
    margin: 0 auto;
    background: #111;
}

body.product-detail-page .carousel .yt-facade {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
}

body.product-detail-page .carousel .slide-content .yt-facade img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    pointer-events: none;
}

body.product-detail-page .carousel .yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    line-height: 1;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 72px;
    height: 72px;
    cursor: pointer;
}

/* Magazine callout placed after the product list */
body.product-detail-page .product-variants-list + .products-magazine-callout {
    margin-top: 24px;
}

/* "*with globally sourced materials" note under the USA badge */
body.product-detail-page .made-in-usa-note {
    text-align: center;
}

/* ============================================================
   PRODUCT PAGES — ROUNDED PHOTOS AND VIDEOS
   Same 18px corners as the photos on the home, about and blog
   pages. Photos size to their own shape (no letterbox box) so
   the corners land on the photo itself.
   ============================================================ */

body.product-detail-page .carousel .slide-content:not(:has(iframe)):not(:has(.yt-facade)) {
    background: transparent;
}

body.product-detail-page .carousel .slide-content:not(:has(iframe)):not(:has(.yt-facade)) img {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: initial;
    border-radius: 18px;
}

body.product-detail-page .carousel .slide-content:has(.yt-facade),
body.product-detail-page .carousel .slide-content:has(iframe) {
    border-radius: 18px;
    overflow: hidden;
}

body.product-detail-page .products-thumb {
    border-radius: 18px;
}

/* Phones center the product text; keep bullet lists as a left-aligned
   block in the middle so the bullets sit next to their text. */
@media (max-width: 768px) {
    body.product-detail-page .product-variant ul:not(.product-variants-list) {
        display: table;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
}

/* Tutorial pages (p/): videos centered in the column. */
.post-video.post-video-center {
    margin: 20px auto;
}

/* Magazine page: the cover is shown first and the PDF viewer loads only when it is
   clicked (phones open the PDF in a new tab instead). Rounded corners like other photos. */
.magazine-viewer {
    margin: 20px 0;
    text-align: center;
}
.magazine-cover {
    position: relative;
    display: inline-block;
    max-width: 420px;
    width: 100%;
}
.magazine-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    border: 1px solid #444;
}
.magazine-page .magazine-cover .magazine-cover-label {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    padding: 10px 24px;
    background: #620031;
    color: #fff;
    border-radius: 8px;
    font-family: var(--font-base);
    text-transform: uppercase;
    white-space: nowrap;
}
.magazine-page .magazine-cover:hover .magazine-cover-label,
.magazine-page .magazine-cover:focus-visible .magazine-cover-label {
    background: #8a0045;
}
.magazine-viewer.is-open iframe {
    display: block;
    width: 100%;
    height: 80vh;
    min-height: 480px;
    border: 0;
    border-radius: 18px;
    background: #fff;
}
.magazine-archive a {
    color: #fff;
    text-decoration: underline;
}
.magazine-page .post-buy {
    text-align: center;
}
@media (max-width: 768px) {
    .magazine-archive {
        display: table;
        margin: 0 auto;
        text-align: left;
    }
}

/* Demo pages (d/): slider centered on the page with the Buy Now button centered below it. */
body.product-detail-page .product-variant .variant-layout.demo-layout {
    display: block;
    max-width: 800px;
    margin: 16px auto 0;
}
body.product-detail-page .product-variant .demo-layout .variant-buy {
    margin-top: 8px;
}

/* ============================================================
   ABOUT PAGE — IMAGE AND TEXT ROWS (moved here from about.html)
   ============================================================ */

.about-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px 32px;
    margin: 8px 0 36px;
    clear: both;
}
.about-row.reverse {
    flex-direction: row-reverse;
}
.about-row-media {
    flex: 0 1 400px;
    min-width: 0;
}
.about-row-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}
.about-row-text {
    flex: 1 1 340px;
    min-width: 0;
}
.about-row-text > :first-child {
    margin-top: 0;
}
.about-row-text > :last-child {
    margin-bottom: 0;
}
.about-pair {
    display: grid;
    grid-template-columns: minmax(0, 1.333fr) minmax(0, 0.588fr);
    gap: 12px;
}
@media (max-width: 600px) {
    .about-row-text ul.about-list {
        display: table;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
}

/* ============================================================
   PAYPAL BUTTONS — keep PayPal's own text styling
   The blog-date rule ".product-variant span" (block, gray, 16px
   bottom margin) was also hitting the text inside PayPal's Add to
   Cart buttons, pushing it off-center and dimming it. Undo that here.
   ============================================================ */

body.product-detail-page .product-variant paypal-add-to-cart-button span,
body.product-detail-page .product-variant paypal-cart-button span {
    display: inline;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
}

/* Contact page: email is only built after the visitor clicks. */
.email-reveal {
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    background: #620031;
    color: #fff;
    font-family: var(--font-base);
    font-size: inherit;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.email-reveal:hover {
    background: #8a0045;
}

/* ============================================================
   OCT 24 SLIDER UPDATES
   ============================================================ */

/* Home slider: round the View All Products slide like the photos */
.product-slide.view-all::before {
    border-radius: 18px;
}

/* Home slider: each arrow fills the whole side next to the centered
   slide, so clicking a faded neighbor moves to it. The visible
   circle is drawn behind the arrow. */
.slider-btn {
    top: 0;
    bottom: 0;
    height: auto;
    width: max(60px, calc((100% - 340px) / 2));
    transform: none;
    border-radius: 0;
    background: transparent;
    font-size: 18px;
    isolation: isolate;
    display: flex;
    align-items: center;
}

.slider-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    transition: background 0.2s ease;
}

.slider-btn.prev { left: 0; justify-content: flex-start; padding-left: 26px; }
.slider-btn.next { right: 0; justify-content: flex-end; padding-right: 26px; }
.slider-btn.prev::before { left: 12px; }
.slider-btn.next::before { right: 12px; }

.slider-btn:hover::before,
.slider-btn:focus-visible::before {
    background: #620031;
}

/* Product carousels: every slide sits in the same 4:3 frame, so the
   carousel no longer changes height between photos. Photos shrink to
   fit inside the frame and keep their rounded corners; videos fill
   the width. */
body.product-detail-page .carousel .carousel-inner {
    position: relative;
    aspect-ratio: 4 / 3;
    max-height: min(75vh, 640px);
}

body.product-detail-page .carousel .carousel-item.active {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
}

body.product-detail-page .carousel .carousel-item .slide-content:not(:has(iframe)):not(:has(.yt-facade)) {
    width: 100%;
    height: 100%;
    min-height: 0;
}

body.product-detail-page .carousel .carousel-item .slide-content:not(:has(iframe)):not(:has(.yt-facade)) img {
    max-width: 100%;
    max-height: 100%;
}

/* main.js tags each photo by shape so it fills the frame */
body.product-detail-page .carousel .carousel-item .slide-content:not(:has(iframe)):not(:has(.yt-facade)) img.fit-wide {
    width: 100%;
    height: auto;
    object-fit: contain;
}

body.product-detail-page .carousel .carousel-item .slide-content:not(:has(iframe)):not(:has(.yt-facade)) img.fit-tall {
    width: auto;
    height: 100%;
    object-fit: contain;
}

body.product-detail-page .carousel .carousel-item .slide-content:has(.yt-facade),
body.product-detail-page .carousel .carousel-item .slide-content:has(iframe) {
    max-height: 100%;
}

/* Product carousels: main.js moves the arrows into the slide frame.
   Each arrow covers a tall strip down the side of the frame. The
   bottom is left clear for the YouTube player controls. */
body.product-detail-page .carousel .carousel-button {
    top: 0;
    bottom: 56px;
    width: 15%;
    min-width: 56px;
    padding: 0;
    transform: none;
    border-radius: 0;
    background: transparent;
    font-size: 18px;
    isolation: isolate;
    display: flex;
    align-items: center;
}

body.product-detail-page .carousel .carousel-button::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    transition: background 0.2s ease;
}

body.product-detail-page .carousel .carousel-button.carousel-prev { left: 0; justify-content: flex-start; padding-left: 21px; }
body.product-detail-page .carousel .carousel-button.carousel-next { right: 0; justify-content: flex-end; padding-right: 21px; }
body.product-detail-page .carousel .carousel-button.carousel-prev::before { left: 8px; }
body.product-detail-page .carousel .carousel-button.carousel-next::before { right: 8px; }

body.product-detail-page .carousel .carousel-button:hover::before,
body.product-detail-page .carousel .carousel-button:focus-visible::before {
    background: #620031;
}

/* Photo zoom: fill most of the screen on computers too */
body.product-detail-page #image-zoom-overlay #zoom-image {
    width: min(94vw, 1400px);
    height: 85vh;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

/* Clicking anywhere on the enlarged photo closes it */
body.product-detail-page #image-zoom-overlay,
body.product-detail-page #image-zoom-overlay #zoom-image {
    cursor: zoom-out;
}

/* ============================================================
   PRODUCT PAGES — FREQUENTLY ASKED QUESTIONS
   Each question opens and closes on click (details/summary).
   ============================================================ */

body.product-detail-page .product-faq {
    max-width: 900px;
    margin: 32px auto 24px;
}

body.product-detail-page .product-faq h2 {
    text-align: center;
    margin: 0 0 16px;
}

body.product-detail-page .product-faq .faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 12px 4px;
}

body.product-detail-page .product-faq summary {
    cursor: pointer;
    font-size: 1.05rem;
    color: #fff;
    list-style: none;
    position: relative;
    padding-right: 28px;
}

body.product-detail-page .product-faq summary::-webkit-details-marker {
    display: none;
}

body.product-detail-page .product-faq summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 0;
    color: #b3b3b3;
    font-size: 1.3rem;
    line-height: 1;
}

body.product-detail-page .product-faq details[open] summary::after {
    content: "\2212";
}

body.product-detail-page .product-faq .faq-item p {
    margin: 10px 0 0;
    color: #b3b3b3;
}

body.product-detail-page .product-faq .faq-item a {
    color: #fff;
    text-decoration: underline;
}