/* =========================================================
   TOP PRIORITY: Disable old automatic 3D / 360 viewer
   This prevents the 3D viewer from appearing before JS hides it.
   ========================================================= */
.product-360-box,
.product-360-title,
.product-360-image,
.product-360-controls,
.product-360-box *,
.product-360-controls *,
div[class*="product-360"],
section[class*="product-360"],
article[class*="product-360"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


.hero {
    background:
        radial-gradient(circle at 15% 20%, rgba(31,158,152,0.25), transparent 26%),
        radial-gradient(circle at 85% 15%, rgba(212,175,55,0.22), transparent 24%),
        linear-gradient(135deg, #071f3f, #0e4f7a);
    color: #ffffff;
    padding: 82px 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 34px;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #ffea9d;
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 16px;
}

.hero h1,
.page-title {
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.1;
}

.hero h1 {
    font-size: clamp(2.2rem, 4vw, 4.3rem);
    margin: 0 0 18px;
}

.hero p {
    font-size: 1.06rem;
    color: rgba(255,255,255,0.9);
    text-align: justify;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 13px 20px;
    border-radius: 999px;
    font-weight: 900;
    border: 0;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold), #ffed9d);
    color: var(--navy);
}

.btn-secondary {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.2);
}

.hero-card,
.card {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow);
}

.hero-card {
    background: rgba(255,255,255,0.10);
    color: #ffffff;
    border-color: rgba(255,255,255,0.16);
}

.section {
    padding: 70px 0;
}

.page-hero {
    padding: 56px 0;
    background: linear-gradient(135deg, #ffffff, #eef6fb);
    border-bottom: 1px solid var(--border);
}

.page-title {
    color: var(--navy);
    font-size: clamp(2rem, 3vw, 3.2rem);
    margin: 0 0 12px;
}

.page-subtitle {
    max-width: 850px;
    color: var(--muted);
    margin: 0;
    text-align: justify;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.card h3 {
    color: var(--navy);
    margin-top: 0;
    font-family: Georgia, "Times New Roman", serif;
}

.card p {
    color: #475569;
    text-align: justify;
}

.card-list {
    padding-left: 20px;
    color: #475569;
}

.card-list li {
    margin-bottom: 7px;
}

.category-icon {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: #edf9f5;
    color: var(--teal);
    font-size: 24px;
    margin-bottom: 14px;
}

.notice {
    background: #fff8df;
    border: 1px solid #f2d375;
    color: #6a4a00;
    padding: 16px 18px;
    border-radius: 18px;
    font-weight: 800;
}

.form-box {
    max-width: 780px;
}

.form-row {
    margin-bottom: 16px;
}

label {
    display: block;
    font-weight: 900;
    color: var(--navy);
    margin-bottom: 6px;
}

input,
select,
textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #cfd9ea;
    border-radius: 14px;
    font: inherit;
    background: #ffffff;
}

textarea {
    min-height: 140px;
    resize: vertical;
}

.store-footer {
    background: var(--navy);
    color: rgba(255,255,255,0.86);
    padding: 34px 0 22px;
    margin-top: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.14);
}

.footer-grid p {
    max-width: 760px;
    color: rgba(255,255,255,0.72);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.footer-links a {
    background: rgba(255,255,255,0.10);
    padding: 9px 13px;
    border-radius: 999px;
    font-weight: 800;
}

.footer-bottom {
    padding-top: 16px;
    color: rgba(255,255,255,0.68);
    font-size: 13px;
}

@media (max-width: 950px) {
    .hero-grid,
    .grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .store-nav {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px 0;
    }

    .store-menu {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .hero {
        padding: 54px 0;
    }

    .section {
        padding: 48px 0;
    }

    .btn {
        width: 100%;
    }
}

.hero {
    background:
        radial-gradient(circle at 15% 20%, rgba(31,158,152,0.25), transparent 26%),
        radial-gradient(circle at 85% 15%, rgba(212,175,55,0.22), transparent 24%),
        linear-gradient(135deg, #071f3f, #0e4f7a);
    color: #ffffff;
    padding: 82px 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 34px;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #ffea9d;
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 16px;
}

.hero h1,
.page-title {
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.1;
}

.hero h1 {
    font-size: clamp(2.2rem, 4vw, 4.3rem);
    margin: 0 0 18px;
}

.hero p {
    font-size: 1.06rem;
    color: rgba(255,255,255,0.9);
    text-align: justify;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 13px 20px;
    border-radius: 999px;
    font-weight: 900;
    border: 0;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold), #ffed9d);
    color: var(--navy);
}

.btn-secondary {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.2);
}

.hero-card,
.card {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow);
}

.hero-card {
    background: rgba(255,255,255,0.10);
    color: #ffffff;
    border-color: rgba(255,255,255,0.16);
}

.section {
    padding: 70px 0;
}

.page-hero {
    padding: 56px 0;
    background: linear-gradient(135deg, #ffffff, #eef6fb);
    border-bottom: 1px solid var(--border);
}

.page-title {
    color: var(--navy);
    font-size: clamp(2rem, 3vw, 3.2rem);
    margin: 0 0 12px;
}

.page-subtitle {
    max-width: 850px;
    color: var(--muted);
    margin: 0;
    text-align: justify;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.card h3 {
    color: var(--navy);
    margin-top: 0;
    font-family: Georgia, "Times New Roman", serif;
}

.card p {
    color: #475569;
    text-align: justify;
}

.card-list {
    padding-left: 20px;
    color: #475569;
}

.card-list li {
    margin-bottom: 7px;
}

.category-icon {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: #edf9f5;
    color: var(--teal);
    font-size: 24px;
    margin-bottom: 14px;
}

.notice {
    background: #fff8df;
    border: 1px solid #f2d375;
    color: #6a4a00;
    padding: 16px 18px;
    border-radius: 18px;
    font-weight: 800;
}

.form-box {
    max-width: 780px;
}

.form-row {
    margin-bottom: 16px;
}

label {
    display: block;
    font-weight: 900;
    color: var(--navy);
    margin-bottom: 6px;
}

input,
select,
textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #cfd9ea;
    border-radius: 14px;
    font: inherit;
    background: #ffffff;
}

textarea {
    min-height: 140px;
    resize: vertical;
}

.store-footer {
    background: var(--navy);
    color: rgba(255,255,255,0.86);
    padding: 34px 0 22px;
    margin-top: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.14);
}

.footer-grid p {
    max-width: 760px;
    color: rgba(255,255,255,0.72);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.footer-links a {
    background: rgba(255,255,255,0.10);
    padding: 9px 13px;
    border-radius: 999px;
    font-weight: 800;
}

.footer-bottom {
    padding-top: 16px;
    color: rgba(255,255,255,0.68);
    font-size: 13px;
}

@media (max-width: 950px) {
    .hero-grid,
    .grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .store-nav {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px 0;
    }

    .store-menu {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .hero {
        padding: 54px 0;
    }

    .section {
        padding: 48px 0;
    }

    .btn {
        width: 100%;
    }
}

/* =========================================================
   AquaLinked Store Elegant Contained Layout Patch
   Makes the page less border-to-border and more professional
   ========================================================= */

body {
    background:
        radial-gradient(circle at top left, rgba(31,158,152,0.08), transparent 28%),
        radial-gradient(circle at top right, rgba(212,175,55,0.10), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.hero {
    background: transparent;
    padding: 34px 0 56px;
}

.hero-grid {
    background:
        radial-gradient(circle at 15% 20%, rgba(31,158,152,0.25), transparent 26%),
        radial-gradient(circle at 85% 15%, rgba(212,175,55,0.22), transparent 24%),
        linear-gradient(135deg, #071f3f, #0e4f7a);
    border-radius: 34px;
    padding: 52px;
    box-shadow: 0 26px 60px rgba(7, 31, 63, 0.24);
    border: 1px solid rgba(255,255,255,0.16);
}

.section {
    padding: 38px 0 60px;
}

.section > .store-container {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(219,229,240,0.95);
    border-radius: 30px;
    padding: 34px;
    box-shadow: 0 18px 42px rgba(7, 31, 63, 0.08);
}

.page-hero {
    background: transparent;
    border-bottom: none;
    padding: 34px 0 22px;
}

.page-hero > .store-container {
    background: linear-gradient(135deg, #ffffff, #eef6fb);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 34px;
    box-shadow: 0 18px 42px rgba(7, 31, 63, 0.08);
}

.card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 52px rgba(7, 31, 63, 0.14);
}

.store-footer {
    margin-top: 18px;
}

@media (max-width: 950px) {
    .hero-grid {
        padding: 34px;
        border-radius: 28px;
    }

    .section > .store-container,
    .page-hero > .store-container {
        padding: 26px;
        border-radius: 24px;
    }
}

@media (max-width: 620px) {
    .hero {
        padding: 22px 0 38px;
    }

    .hero-grid {
        padding: 24px;
    }
}


/* =========================================================
   AquaLinked Store Green / Water-Agriculture Color Patch
   Softer than dark navy, better for books + irrigation shop
   ========================================================= */

.hero-grid {
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.28), transparent 26%),
        radial-gradient(circle at 85% 15%, rgba(212,175,55,0.18), transparent 24%),
        linear-gradient(135deg, #0f766e 0%, #128c7e 45%, #1f9e98 100%) !important;
    box-shadow: 0 24px 52px rgba(15, 118, 110, 0.22) !important;
}

.hero-card {
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.28) !important;
}

.store-header {
    background: rgba(6, 78, 73, 0.96) !important;
}

.store-logo {
    background: linear-gradient(135deg, #d4af37, #fff0a6) !important;
    color: #064e49 !important;
}

.btn-primary {
    background: linear-gradient(135deg, #d4af37, #ffed9d) !important;
    color: #064e49 !important;
}

.category-icon {
    background: #e6fffa !important;
    color: #0f766e !important;
}

.page-title {
    color: #064e49 !important;
}

.card h3 {
    color: #064e49 !important;
}

.store-footer {
    background: #064e49 !important;
}


/* =========================================================
   AquaLinked Store Green / Water-Agriculture Color Patch
   Softer than dark navy, better for books + irrigation shop
   ========================================================= */

.hero-grid {
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.28), transparent 26%),
        radial-gradient(circle at 85% 15%, rgba(212,175,55,0.18), transparent 24%),
        linear-gradient(135deg, #0f766e 0%, #128c7e 45%, #1f9e98 100%) !important;
    box-shadow: 0 24px 52px rgba(15, 118, 110, 0.22) !important;
}

.hero-card {
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.28) !important;
}

.store-header {
    background: rgba(6, 78, 73, 0.96) !important;
}

.store-logo {
    background: linear-gradient(135deg, #d4af37, #fff0a6) !important;
    color: #064e49 !important;
}

.btn-primary {
    background: linear-gradient(135deg, #d4af37, #ffed9d) !important;
    color: #064e49 !important;
}

.category-icon {
    background: #e6fffa !important;
    color: #0f766e !important;
}

.page-title {
    color: #064e49 !important;
}

.card h3 {
    color: #064e49 !important;
}

.store-footer {
    background: #064e49 !important;
}


/* =========================================================
   AquaLinked Store Footer Button Elegance Patch
   ========================================================= */

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    border: 1px solid rgba(255,234,157,0.35);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    transition: all 0.18s ease;
}

.footer-links a:hover {
    background: linear-gradient(135deg, #d4af37, #ffed9d);
    color: #064e49;
    border-color: #ffed9d;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(0,0,0,0.18);
}

@media (max-width: 760px) {
    .footer-links {
        justify-content: center;
        width: 100%;
    }

    .footer-links a {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   AquaLinked Store Georgia Font Patch
   Applies elegant Georgia typography across the full website
   ========================================================= */

body,
button,
input,
select,
textarea,
.store-brand,
.store-menu,
.hero,
.hero p,
.hero-card,
.card,
.card p,
.card-list,
.page-title,
.page-subtitle,
.btn,
.footer-links,
.store-footer {
    font-family: Georgia, "Times New Roman", serif !important;
}

.store-brand strong,
.hero h1,
.page-title,
.card h3,
.hero-card h3 {
    font-family: Georgia, "Times New Roman", serif !important;
    letter-spacing: 0.01em;
}

.store-menu a,
.btn,
.footer-links a {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
}

body {
    font-size: 17px;
}

.store-menu a {
    font-size: 15px;
}

.hero p,
.card p,
.page-subtitle,
.footer-grid p {
    font-size: 1.02rem;
    line-height: 1.78;
}

.card h3,
.hero-card h3 {
    font-size: 1.35rem;
}


/* =========================================================
   AquaLinked Store Georgia Font Patch
   Applies elegant Georgia typography across the full website
   ========================================================= */

body,
button,
input,
select,
textarea,
.store-brand,
.store-menu,
.hero,
.hero p,
.hero-card,
.card,
.card p,
.card-list,
.page-title,
.page-subtitle,
.btn,
.footer-links,
.store-footer {
    font-family: Georgia, "Times New Roman", serif !important;
}

.store-brand strong,
.hero h1,
.page-title,
.card h3,
.hero-card h3 {
    font-family: Georgia, "Times New Roman", serif !important;
    letter-spacing: 0.01em;
}

.store-menu a,
.btn,
.footer-links a {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
}

body {
    font-size: 17px;
}

.store-menu a {
    font-size: 15px;
}

.hero p,
.card p,
.page-subtitle,
.footer-grid p {
    font-size: 1.02rem;
    line-height: 1.78;
}

.card h3,
.hero-card h3 {
    font-size: 1.35rem;
}


/* =========================================================
   AquaLinked Store Georgia Font Patch
   Applies elegant Georgia typography across the full website
   ========================================================= */

body,
button,
input,
select,
textarea,
.store-brand,
.store-menu,
.hero,
.hero p,
.hero-card,
.card,
.card p,
.card-list,
.page-title,
.page-subtitle,
.btn,
.footer-links,
.store-footer {
    font-family: Georgia, "Times New Roman", serif !important;
}

.store-brand strong,
.hero h1,
.page-title,
.card h3,
.hero-card h3 {
    font-family: Georgia, "Times New Roman", serif !important;
    letter-spacing: 0.01em;
}

.store-menu a,
.btn,
.footer-links a {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
}

body {
    font-size: 17px;
}

.store-menu a {
    font-size: 15px;
}

.hero p,
.card p,
.page-subtitle,
.footer-grid p {
    font-size: 1.02rem;
    line-height: 1.78;
}

.card h3,
.hero-card h3 {
    font-size: 1.35rem;
}


/* =========================================================
   AquaLinked Store Elegant Header Patch
   Removes heavy logo block and creates refined bookshop style
   ========================================================= */

.store-header {
    background:
        linear-gradient(135deg, rgba(6, 78, 73, 0.98), rgba(15, 118, 110, 0.96)) !important;
    border-bottom: 1px solid rgba(255, 234, 157, 0.22) !important;
    box-shadow: 0 12px 28px rgba(6, 78, 73, 0.18);
}

.store-nav {
    min-height: 82px !important;
}

.elegant-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    padding: 8px 0 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.brand-main {
    color: #ffffff;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.brand-main::after {
    content: "";
    display: block;
    width: 86px;
    height: 2px;
    margin-top: 7px;
    background: linear-gradient(90deg, #d4af37, rgba(255,237,157,0));
    border-radius: 999px;
}

.brand-sub {
    color: #ffed9d;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-top: 4px;
}

.elegant-menu {
    gap: 10px !important;
}

.elegant-menu a {
    font-family: Georgia, "Times New Roman", serif !important;
    border: 1px solid transparent;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    color: rgba(255,255,255,0.92) !important;
    background: rgba(255,255,255,0.04);
    transition: all 0.18s ease;
}

.elegant-menu a:hover,
.elegant-menu a.active {
    background: rgba(255, 237, 157, 0.16) !important;
    color: #ffed9d !important;
    border-color: rgba(255, 237, 157, 0.28);
    transform: translateY(-1px);
}

.store-logo {
    display: none !important;
}

@media (max-width: 950px) {
    .store-nav {
        gap: 14px !important;
    }

    .brand-main {
        font-size: 1.32rem;
    }

    .elegant-menu {
        width: 100%;
    }
}


/* =========================================================
   AquaLinked Store Header White Text / Elegant Visibility Fix
   ========================================================= */

.store-header,
.store-header * {
    color: #ffffff !important;
}

.store-header {
    background:
        linear-gradient(135deg, #064e49 0%, #0f766e 55%, #128c7e 100%) !important;
    border-bottom: 1px solid rgba(255, 237, 157, 0.35) !important;
    box-shadow: 0 14px 32px rgba(6, 78, 73, 0.24) !important;
}

.elegant-brand,
.elegant-brand:visited,
.elegant-brand:hover,
.elegant-brand:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

.brand-main {
    color: #ffffff !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.22);
}

.brand-sub {
    color: #ffed9d !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}

.brand-main::after {
    background: linear-gradient(90deg, #ffed9d, rgba(255,237,157,0)) !important;
}

.elegant-menu a,
.elegant-menu a:visited {
    color: #ffffff !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    text-decoration: none !important;
}

.elegant-menu a:hover,
.elegant-menu a.active {
    color: #064e49 !important;
    background: linear-gradient(135deg, #d4af37, #ffed9d) !important;
    border-color: #ffed9d !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}


/* =========================================================
   AquaLinked Store Final Rounded Elegant Header
   Curved green panel, white/gold text, refined navigation
   ========================================================= */

.store-header {
    background: transparent !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    padding: 14px 0 8px !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.store-nav-shell {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 16px 22px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.18), transparent 28%),
        radial-gradient(circle at 90% 15%, rgba(255,237,157,0.16), transparent 26%),
        linear-gradient(135deg, #064e49 0%, #0f766e 55%, #1f9e98 100%);
    border: 1px solid rgba(255, 237, 157, 0.30);
    box-shadow: 0 18px 42px rgba(6, 78, 73, 0.24);
}

.elegant-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.brand-main {
    color: #ffffff !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: 0.035em !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.24);
}

.brand-main::after {
    content: "";
    display: block;
    width: 118px;
    height: 2px;
    margin-top: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffed9d, rgba(255,237,157,0));
}

.brand-sub {
    color: #ffed9d !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    margin-top: 2px;
}

.elegant-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    flex-wrap: wrap !important;
}

.elegant-menu a,
.elegant-menu a:visited {
    color: #ffffff !important;
    background: rgba(255,255,255,0.09) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    padding: 10px 15px !important;
    border-radius: 999px !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    transition: all 0.18s ease;
}

.elegant-menu a:hover,
.elegant-menu a.active {
    color: #064e49 !important;
    background: linear-gradient(135deg, #d4af37, #ffed9d) !important;
    border-color: #ffed9d !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}

.store-logo,
.store-brand small {
    display: none !important;
}

@media (max-width: 950px) {
    .store-nav-shell {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
        border-radius: 24px;
    }

    .elegant-menu {
        justify-content: flex-start !important;
        width: 100%;
    }

    .brand-main {
        font-size: 1.4rem !important;
    }
}

@media (max-width: 620px) {
    .store-header {
        padding: 10px 0 6px !important;
    }

    .store-nav-shell {
        border-radius: 22px;
    }

    .elegant-menu a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}


/* =========================================================
   AquaLinked Store Elegant Curved Footer
   Matching the rounded green header style
   ========================================================= */

.store-footer {
    background: transparent !important;
    color: #ffffff !important;
    padding: 20px 0 28px !important;
    margin-top: 26px !important;
}

.store-footer .footer-grid {
    background:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.16), transparent 28%),
        radial-gradient(circle at 90% 15%, rgba(255,237,157,0.14), transparent 26%),
        linear-gradient(135deg, #064e49 0%, #0f766e 55%, #1f9e98 100%) !important;
    border: 1px solid rgba(255,237,157,0.30) !important;
    border-bottom: none !important;
    border-radius: 30px 30px 0 0 !important;
    padding: 28px 28px 22px !important;
    box-shadow: 0 18px 42px rgba(6,78,73,0.22) !important;
}

.store-footer .footer-bottom {
    background: linear-gradient(135deg, #053f3b 0%, #0b625b 100%) !important;
    border: 1px solid rgba(255,237,157,0.24) !important;
    border-top: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 0 0 30px 30px !important;
    padding: 16px 28px !important;
    color: rgba(255,255,255,0.84) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    box-shadow: 0 18px 42px rgba(6,78,73,0.14) !important;
}

.store-footer strong {
    display: block;
    color: #ffffff !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 8px !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.22);
}

.store-footer strong::after {
    content: "";
    display: block;
    width: 120px;
    height: 2px;
    margin-top: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffed9d, rgba(255,237,157,0));
}

.store-footer p {
    color: rgba(255,255,255,0.90) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    text-align: justify !important;
    margin-bottom: 0 !important;
}

.footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.footer-links a,
.footer-links a:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 170px !important;
    padding: 11px 16px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.09) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.10);
    transition: all 0.18s ease;
}

.footer-links a:hover {
    color: #064e49 !important;
    background: linear-gradient(135deg, #d4af37, #ffed9d) !important;
    border-color: #ffed9d !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}

@media (max-width: 950px) {
    .store-footer .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        border-radius: 26px 26px 0 0 !important;
        padding: 24px !important;
    }

    .store-footer .footer-bottom {
        border-radius: 0 0 26px 26px !important;
        padding: 16px 24px !important;
    }

    .footer-links {
        justify-content: flex-start !important;
    }
}

@media (max-width: 620px) {
    .footer-links a {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* Clear Send Inquiry button in the top menu */
.store-menu a.menu-inquiry-btn {
    background: linear-gradient(135deg, #0f766e, #16a34a);
    color: #ffffff !important;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.25);
}

.store-menu a.menu-inquiry-btn:hover,
.store-menu a.menu-inquiry-btn.active {
    background: linear-gradient(135deg, #115e59, #15803d);
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Amazon-style product detail page */
.product-detail-card {
    padding: 28px;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    gap: 34px;
    align-items: start;
}

.product-image-box {
    background: #f8fafc;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 22px;
    padding: 18px;
    text-align: center;
}

.product-image-box img {
    max-width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: 16px;
}

.product-no-image {
    padding: 70px 20px;
    color: #64748b;
}

.product-summary-box h2 {
    font-size: 34px;
    margin: 8px 0 16px;
}

.product-type {
    display: inline-block;
    background: #ecfdf5;
    color: #047857;
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: capitalize;
}

.product-price {
    font-size: 26px;
    font-weight: 800;
    color: #14532d;
    margin: 18px 0;
}

.product-summary {
    font-size: 17px;
    line-height: 1.75;
}

.product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.video-box {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 20px;
    background: #000;
}

.video-box iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 850px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
    }

    .product-summary-box h2 {
        font-size: 26px;
    }
}

/* Product image enlargement and hover zoom */
.product-image-box {
    overflow: hidden;
}

.product-image-box img {
    width: 100%;
    max-width: 460px;
    max-height: 680px;
    transition: transform 0.35s ease;
    cursor: zoom-in;
}

.product-image-box:hover img {
    transform: scale(1.28);
}

/* Smaller proportional product video */
.video-box {
    width: min(400px, 100%) !important;
    height: 400px !important;
    padding-bottom: 0 !important;
    margin-top: 12px;
    border-radius: 20px;
    background: #000;
}

.video-box iframe {
    position: static !important;
    width: 100% !important;
    height: 400px !important;
    display: block;
    border: 0;
}

@media (max-width: 520px) {
    .video-box {
        height: 320px !important;
    }

    .video-box iframe {
        height: 320px !important;
    }
}

/* Stronger readable book image display */
.product-detail-grid {
    grid-template-columns: minmax(360px, 620px) 1fr !important;
    gap: 38px !important;
}

.product-image-box {
    padding: 22px !important;
    overflow: hidden;
}

.product-image-link {
    display: block;
    cursor: zoom-in;
}

.product-image-box img {
    width: 100% !important;
    max-width: 620px !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 16px;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.product-image-box:hover img {
    transform: scale(1.45) !important;
    filter: contrast(1.05) sharpness(1);
}

.image-help-text {
    margin-top: 14px;
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
}

/* Correct YouTube proportion: 16:9, not square */
.video-box {
    width: min(520px, 100%) !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    padding-bottom: 0 !important;
    margin-top: 14px;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
}

.video-box iframe {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    display: block;
    border: 0;
}

@media (max-width: 850px) {
    .product-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .product-image-box img {
        max-width: 100% !important;
    }

    .product-image-box:hover img {
        transform: scale(1.18) !important;
    }
}

/* Side zoom beside book image, Amazon-style */
.product-image-box {
    position: relative !important;
    overflow: visible !important;
}

.side-book-zoom {
    display: none;
    position: absolute;
    left: calc(100% + 24px);
    top: 0;
    width: 460px;
    height: 560px;
    border-radius: 22px;
    border: 2px solid rgba(15, 118, 110, 0.35);
    background-repeat: no-repeat;
    background-size: 260%;
    background-color: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    z-index: 5000;
}

.product-image-link img {
    cursor: crosshair !important;
}

/* Keep the side zoom practical on smaller screens */
@media (max-width: 1150px) {
    .side-book-zoom {
        left: 0;
        top: calc(100% + 18px);
        width: min(520px, 96vw);
        height: 420px;
    }
}

@media (max-width: 850px) {
    .side-book-zoom {
        display: none !important;
    }
}

/* Cart page */
.cart-item-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 24px;
    align-items: start;
}

.cart-image-box {
    background: #f8fafc;
    border: 1px solid rgba(15, 118, 110, 0.15);
    border-radius: 18px;
    padding: 12px;
    text-align: center;
}

.cart-image-box img {
    max-width: 100%;
    max-height: 210px;
    object-fit: contain;
    border-radius: 12px;
}

@media (max-width: 700px) {
    .cart-item-grid {
        grid-template-columns: 1fr;
    }

    .cart-image-box img {
        max-height: 260px;
    }
}

/* Public book listing */
.book-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.book-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.book-card-image {
    background: #f8fafc;
    border: 1px solid rgba(15, 118, 110, 0.15);
    border-radius: 20px;
    padding: 14px;
    text-align: center;
}

.book-card-image img {
    max-width: 100%;
    height: 330px;
    object-fit: contain;
    border-radius: 14px;
}

.book-card-body h3 {
    margin-top: 8px;
}

/* Keep the main book image stable; only side zoom should enlarge */
.product-image-box:hover img,
.product-image-link:hover img {
    transform: none !important;
}

/* Make book listing images elegant and not too large */
.book-card-image img {
    height: 230px !important;
    max-height: 230px !important;
    width: 100% !important;
    object-fit: contain !important;
}

/* Keep the public book cards balanced */
.book-card {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.book-grid {
    align-items: stretch;
}

/* Strong bookstore shelf layout fix */
.book-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 300px)) !important;
    gap: 24px !important;
    justify-content: start !important;
    align-items: stretch !important;
}

.book-card {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 !important;
    padding: 18px !important;
}

.book-card-image {
    width: 100% !important;
    height: 260px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.book-card-image img {
    width: auto !important;
    max-width: 100% !important;
    height: 240px !important;
    max-height: 240px !important;
    object-fit: contain !important;
    display: block !important;
}

.book-card-body h3 {
    font-size: 20px !important;
    line-height: 1.3 !important;
}

.book-card-body p {
    font-size: 15px !important;
    line-height: 1.55 !important;
}

/* On mobile, keep it centered */
@media (max-width: 700px) {
    .book-grid {
        justify-content: center !important;
        grid-template-columns: minmax(230px, 320px) !important;
    }

    .book-card {
        max-width: 320px !important;
    }
}

/* Amazon-style book layout */
.product-detail-grid.book-amazon-grid {
    grid-template-columns: minmax(300px, 380px) minmax(420px, 1fr) 310px !important;
    gap: 28px !important;
    align-items: start !important;
}

.book-amazon-grid .product-summary-box > .product-actions {
    display: none !important;
}

.book-amazon-grid .product-image-box img {
    max-width: 360px !important;
}

.product-purchase-box {
    border: 1px solid rgba(15, 118, 110, 0.22);
    border-radius: 22px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.10);
    position: sticky;
    top: 18px;
}

.purchase-format {
    border: 2px solid #0f766e;
    border-radius: 14px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.purchase-main-price {
    font-size: 30px;
    font-weight: 800;
    color: #064e3b;
    margin: 12px 0;
}

.purchase-stock {
    color: #15803d;
    font-weight: 700;
    font-size: 17px;
}

.full-buy-btn {
    width: 100%;
    text-align: center;
    display: block;
    margin-top: 12px;
}

.buy-now-style {
    background: linear-gradient(135deg, #facc15, #f59e0b) !important;
    color: #1f2937 !important;
}

.inquiry-style {
    background: linear-gradient(135deg, #0f766e, #16a34a) !important;
}

.purchase-note {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-top: 14px;
}

@media (max-width: 1200px) {
    .product-detail-grid.book-amazon-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .product-purchase-box {
        position: static;
        grid-column: 1 / -1;
    }
}

@media (max-width: 850px) {
    .product-detail-grid.book-amazon-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Amazon-style book layout */
.product-detail-grid.book-amazon-grid {
    grid-template-columns: minmax(300px, 380px) minmax(420px, 1fr) 310px !important;
    gap: 28px !important;
    align-items: start !important;
}

.book-amazon-grid .product-summary-box > .product-actions {
    display: none !important;
}

.book-amazon-grid .product-image-box img {
    max-width: 360px !important;
}

.product-purchase-box {
    border: 1px solid rgba(15, 118, 110, 0.22);
    border-radius: 22px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.10);
    position: sticky;
    top: 18px;
}

.purchase-format {
    border: 2px solid #0f766e;
    border-radius: 14px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.purchase-main-price {
    font-size: 30px;
    font-weight: 800;
    color: #064e3b;
    margin: 12px 0;
}

.purchase-stock {
    color: #15803d;
    font-weight: 700;
    font-size: 17px;
}

.full-buy-btn {
    width: 100%;
    text-align: center;
    display: block;
    margin-top: 12px;
}

.buy-now-style {
    background: linear-gradient(135deg, #facc15, #f59e0b) !important;
    color: #1f2937 !important;
}

.inquiry-style {
    background: linear-gradient(135deg, #0f766e, #16a34a) !important;
}

.purchase-note {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-top: 14px;
}

@media (max-width: 1200px) {
    .product-detail-grid.book-amazon-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .product-purchase-box {
        position: static;
        grid-column: 1 / -1;
    }
}

@media (max-width: 850px) {
    .product-detail-grid.book-amazon-grid {
        grid-template-columns: 1fr !important;
    }
}

/* True compact bookstore product layout */
.product-detail-card {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 18px 20px !important;
}

.product-detail-grid,
.product-detail-grid.book-amazon-grid {
    display: grid !important;
    grid-template-columns: 330px 580px 300px !important;
    justify-content: center !important;
    gap: 24px !important;
    align-items: start !important;
}

/* Remove the stretched empty feeling */
.product-summary-box {
    max-width: 580px !important;
}

.product-summary-box h2 {
    font-size: 25px !important;
    line-height: 1.28 !important;
    margin: 6px 0 8px !important;
    color: #062f2f !important;
}

.product-summary-box p {
    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* Left book cover column */
.product-image-box {
    width: 330px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
}

.product-image-box img,
.book-amazon-grid .product-image-box img {
    max-width: 300px !important;
    max-height: 430px !important;
    width: auto !important;
    object-fit: contain !important;
}

.image-help-text {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-top: 12px !important;
}

/* Center book information */
.product-type {
    font-size: 12px !important;
    padding: 5px 10px !important;
    margin-bottom: 8px !important;
}

.product-price {
    font-size: 20px !important;
    margin: 10px 0 !important;
}

.product-buy-panel {
    padding: 12px !important;
    margin: 10px 0 !important;
    border-radius: 14px !important;
}

.product-info-table div {
    grid-template-columns: 115px 1fr !important;
    font-size: 13px !important;
    padding: 6px 0 !important;
}

.professional-summary {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    margin-top: 12px !important;
}

.professional-summary h3 {
    font-size: 16px !important;
}

.professional-summary p {
    font-size: 14px !important;
}

/* Right buying box */
.product-purchase-box {
    width: 300px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
}

.purchase-format {
    padding: 9px 10px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    margin-bottom: 10px !important;
}

.purchase-main-price {
    font-size: 20px !important;
    margin: 8px 0 !important;
}

.purchase-stock {
    font-size: 14px !important;
    margin: 8px 0 !important;
}

.product-purchase-box .form-row {
    margin-bottom: 8px !important;
}

.product-purchase-box select {
    padding: 7px 10px !important;
    font-size: 14px !important;
}

.full-buy-btn {
    padding: 8px 12px !important;
    font-size: 14px !important;
    margin-top: 8px !important;
    border-radius: 999px !important;
}

/* Compact lower sections */
.section {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
}

.card h3 {
    font-size: 18px !important;
}

.video-box {
    width: min(420px, 100%) !important;
}

/* Make the top hero less dominant on product pages */
.page-hero {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.page-title {
    font-size: 28px !important;
}

.page-subtitle {
    font-size: 14px !important;
}

/* Responsive */
@media (max-width: 1250px) {
    .product-detail-grid,
    .product-detail-grid.book-amazon-grid {
        grid-template-columns: 310px minmax(420px, 1fr) !important;
        max-width: 920px !important;
    }

    .product-purchase-box {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 920px !important;
        position: static !important;
    }
}

@media (max-width: 850px) {
    .product-detail-grid,
    .product-detail-grid.book-amazon-grid {
        grid-template-columns: 1fr !important;
        max-width: 420px !important;
    }

    .product-image-box {
        width: 100% !important;
    }

    .product-image-box img,
    .book-amazon-grid .product-image-box img {
        max-width: 280px !important;
    }

    .product-summary-box,
    .product-purchase-box {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Compact Amazon-like book information strip */
.book-info-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    gap: 8px;
    border-top: 1px solid rgba(15, 118, 110, 0.18);
    border-bottom: 1px solid rgba(15, 118, 110, 0.18);
    padding: 12px 0;
    margin: 14px 0;
}

.book-info-strip div {
    text-align: center;
    padding: 6px 4px;
}

.book-info-strip span {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}

.book-info-strip strong {
    display: block;
    font-size: 12px;
    color: #064e3b;
    line-height: 1.35;
}

@media (max-width: 850px) {
    .book-info-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Fix book cover overlapping the middle product text */
.product-detail-card,
.product-detail-card *,
.product-detail-grid,
.product-image-box,
.product-summary-box,
.product-purchase-box {
    box-sizing: border-box !important;
}

.product-detail-grid,
.product-detail-grid.book-amazon-grid {
    grid-template-columns: 360px 560px 300px !important;
    gap: 34px !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.product-image-box {
    width: 100% !important;
    max-width: 360px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

.product-image-box img,
.book-amazon-grid .product-image-box img {
    max-width: 320px !important;
    max-height: 430px !important;
    width: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.product-summary-box {
    position: relative !important;
    z-index: 2 !important;
    padding-left: 4px !important;
    min-width: 0 !important;
}

.product-summary-box h2 {
    white-space: normal !important;
    overflow: visible !important;
}

/* Keep side zoom above everything only when active */
.side-book-zoom {
    z-index: 9000 !important;
}

/* Medium screens */
@media (max-width: 1250px) {
    .product-detail-grid,
    .product-detail-grid.book-amazon-grid {
        grid-template-columns: 340px minmax(420px, 1fr) !important;
        gap: 28px !important;
    }

    .product-purchase-box {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 920px !important;
    }
}

/* Mobile */
@media (max-width: 850px) {
    .product-detail-grid,
    .product-detail-grid.book-amazon-grid {
        grid-template-columns: 1fr !important;
        max-width: 420px !important;
    }

    .product-image-box {
        max-width: 100% !important;
    }

    .product-summary-box {
        padding-left: 0 !important;
    }
}

/* Clickable public book cards */
.clickable-book-card {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.clickable-book-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
    border-color: rgba(15, 118, 110, 0.38);
}

.clickable-book-card .btn {
    position: relative;
    z-index: 2;
}

/* Homepage bookstore/material product cards */
.section-heading {
    margin-bottom: 20px;
}

.section-heading h2 {
    font-size: 28px;
    color: #064e3b;
    margin-bottom: 6px;
}

.section-heading p {
    color: #475569;
    font-size: 15px;
    line-height: 1.6;
}

.home-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.home-product-card {
    background: #ffffff;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 18px;
    padding: 14px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
    border-color: rgba(15, 118, 110, 0.42);
}

.home-product-image {
    height: 210px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid rgba(15, 118, 110, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.home-product-image img {
    max-width: 100%;
    max-height: 190px;
    object-fit: contain;
    border-radius: 10px;
}

.home-product-category {
    display: inline-block;
    background: #ecfdf5;
    color: #047857;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin: 12px 0 6px;
}

.home-product-body h3 {
    font-size: 17px;
    line-height: 1.3;
    color: #063b3b;
    margin: 6px 0;
}

.home-product-price {
    font-size: 18px;
    font-weight: 800;
    color: #14532d;
    margin: 6px 0;
}

.home-product-summary {
    font-size: 13px;
    color: #475569;
    line-height: 1.45;
}

.home-product-card .btn {
    padding: 7px 10px;
    font-size: 13px;
    margin-top: 6px;
    position: relative;
    z-index: 2;
}

/* Keep side zoom controlled for books and materials */
.side-book-zoom {
    width: 360px !important;
    height: 430px !important;
    background-size: 220% !important;
    left: calc(100% + 18px) !important;
    top: 0 !important;
    border-radius: 16px !important;
}

/* Do not allow zoom preview to dominate product detail pages */
.product-detail-grid {
    overflow: visible !important;
}

/* For water technology/material images, keep zoom smaller */
.product-detail-grid:not(.book-amazon-grid) .side-book-zoom {
    width: 320px !important;
    height: 330px !important;
    background-size: 190% !important;
}

/* Correct help text spacing under material images */
.image-help-text {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #334155 !important;
}

/* On smaller screens, hide side zoom to avoid covering text */
@media (max-width: 1200px) {
    .side-book-zoom {
        display: none !important;
    }
}

/* Keep side zoom controlled for books and materials */
.side-book-zoom {
    width: 360px !important;
    height: 430px !important;
    background-size: 220% !important;
    left: calc(100% + 18px) !important;
    top: 0 !important;
    border-radius: 16px !important;
}

/* Do not allow zoom preview to dominate product detail pages */
.product-detail-grid {
    overflow: visible !important;
}

/* For water technology/material images, keep zoom smaller */
.product-detail-grid:not(.book-amazon-grid) .side-book-zoom {
    width: 320px !important;
    height: 330px !important;
    background-size: 190% !important;
}

/* Correct help text spacing under material images */
.image-help-text {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #334155 !important;
}

/* On smaller screens, hide side zoom to avoid covering text */
@media (max-width: 1200px) {
    .side-book-zoom {
        display: none !important;
    }
}

/* Professional compact material/product detail layout */
.product-detail-grid:not(.book-amazon-grid) {
    display: grid !important;
    grid-template-columns: 360px 560px 300px !important;
    gap: 34px !important;
    justify-content: center !important;
    align-items: start !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.product-detail-grid:not(.book-amazon-grid) .product-image-box {
    width: 100% !important;
    max-width: 360px !important;
}

.product-detail-grid:not(.book-amazon-grid) .product-image-box img {
    max-width: 320px !important;
    max-height: 430px !important;
    object-fit: contain !important;
}

.product-detail-grid:not(.book-amazon-grid) .product-summary-box h2 {
    font-size: 26px !important;
    line-height: 1.28 !important;
}

.product-detail-grid:not(.book-amazon-grid) .product-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.product-detail-grid:not(.book-amazon-grid) .product-actions .btn {
    padding: 9px 16px !important;
    font-size: 15px !important;
}

/* Responsive material detail */
@media (max-width: 1250px) {
    .product-detail-grid:not(.book-amazon-grid) {
        grid-template-columns: 340px minmax(420px, 1fr) !important;
    }
}

@media (max-width: 850px) {
    .product-detail-grid:not(.book-amazon-grid) {
        grid-template-columns: 1fr !important;
        max-width: 420px !important;
    }
}

/* Make water technology/product detail like the book detail layout */
.product-detail-grid.book-amazon-grid {
    grid-template-columns: 360px 560px 300px !important;
    gap: 34px !important;
    justify-content: center !important;
    align-items: start !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.book-amazon-grid .product-summary-box > .product-actions {
    display: none !important;
}

.product-purchase-box {
    width: 300px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
    border: 1px solid rgba(15, 118, 110, 0.22) !important;
    position: sticky !important;
    top: 18px !important;
}

.product-purchase-box .full-buy-btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-top: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
}

.product-purchase-box select {
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
}

.purchase-main-price {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #064e3b !important;
}

.purchase-stock {
    color: #15803d !important;
    font-weight: 700 !important;
}

@media (max-width: 1250px) {
    .product-detail-grid.book-amazon-grid {
        grid-template-columns: 340px minmax(420px, 1fr) !important;
    }

    .product-purchase-box {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 920px !important;
        position: static !important;
    }
}

@media (max-width: 850px) {
    .product-detail-grid.book-amazon-grid {
        grid-template-columns: 1fr !important;
        max-width: 420px !important;
    }

    .product-purchase-box {
        width: 100% !important;
    }
}

/* Product image thumbnail gallery */
.product-thumbnail-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    justify-content: center;
}

.product-thumb-btn {
    width: 58px;
    height: 58px;
    border: 1px solid rgba(15, 118, 110, 0.25);
    border-radius: 10px;
    background: #ffffff;
    padding: 4px;
    cursor: pointer;
}

.product-thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 7px;
}

.product-thumb-btn.active,
.product-thumb-btn:hover {
    border-color: #0f766e;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.16);
}

/* Final bookstore front/card page */
.book-storefront-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 28px;
    align-items: start;
}

.book-filter-panel {
    background: #ffffff;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 18px;
    padding: 16px;
    position: sticky;
    top: 18px;
}

.book-filter-panel h3 {
    font-size: 18px;
    color: #064e3b;
    margin-bottom: 12px;
}

.book-filter-note {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.45;
    color: #475569;
}

.book-results-heading {
    margin-bottom: 18px;
}

.book-results-heading h2 {
    font-size: 26px;
    color: #064e3b;
    margin-bottom: 4px;
}

.book-results-heading p {
    font-size: 14px;
    color: #64748b;
}

.book-shelf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px;
}

.book-shelf-card {
    background: #ffffff;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 18px;
    padding: 14px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.book-shelf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
    border-color: rgba(15, 118, 110, 0.40);
}

.book-shelf-image {
    height: 240px;
    background: #f8fafc;
    border: 1px solid rgba(15, 118, 110, 0.12);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.book-shelf-image img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 10px;
}

.book-shelf-category {
    display: inline-block;
    background: #ecfdf5;
    color: #047857;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin: 12px 0 6px;
}

.book-shelf-body h3 {
    font-size: 17px;
    line-height: 1.3;
    color: #063b3b;
    margin: 6px 0;
}

.book-shelf-author {
    font-size: 13px;
    color: #475569;
    margin: 4px 0;
}

.book-shelf-price {
    font-size: 18px;
    font-weight: 800;
    color: #14532d;
    margin: 8px 0;
}

.book-shelf-summary {
    font-size: 13px;
    line-height: 1.45;
    color: #475569;
}

.book-shelf-card .btn {
    padding: 7px 10px;
    font-size: 13px;
    margin-top: 6px;
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .book-storefront-layout {
        grid-template-columns: 1fr;
    }

    .book-filter-panel {
        position: static;
    }
}

/* Final water technology material front/card page */
.material-storefront-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: start;
}

.material-filter-panel {
    background: #ffffff;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 18px;
    padding: 16px;
    position: sticky;
    top: 18px;
}

.material-filter-panel h3 {
    font-size: 18px;
    color: #064e3b;
    margin-bottom: 12px;
}

.material-filter-note {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.45;
    color: #475569;
}

.material-results-heading {
    margin-bottom: 18px;
}

.material-results-heading h2 {
    font-size: 26px;
    color: #064e3b;
    margin-bottom: 4px;
}

.material-results-heading p {
    font-size: 14px;
    color: #64748b;
}

.material-shelf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.material-shelf-card {
    background: #ffffff;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 18px;
    padding: 14px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.material-shelf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
    border-color: rgba(15, 118, 110, 0.40);
}

.material-shelf-image {
    height: 220px;
    background: #f8fafc;
    border: 1px solid rgba(15, 118, 110, 0.12);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.material-shelf-image img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 10px;
}

.material-shelf-category {
    display: inline-block;
    background: #ecfdf5;
    color: #047857;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin: 12px 0 6px;
}

.material-shelf-body h3 {
    font-size: 17px;
    line-height: 1.3;
    color: #063b3b;
    margin: 6px 0;
}

.material-shelf-price {
    font-size: 18px;
    font-weight: 800;
    color: #14532d;
    margin: 8px 0;
}

.material-shelf-summary {
    font-size: 13px;
    line-height: 1.45;
    color: #475569;
}

.material-shelf-card .btn {
    padding: 7px 10px;
    font-size: 13px;
    margin-top: 6px;
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .material-storefront-layout {
        grid-template-columns: 1fr;
    }

    .material-filter-panel {
        position: static;
    }
}

/* Make all product/material detail pages use the book-style layout */
.product-detail-grid.book-amazon-grid {
    grid-template-columns: 360px 560px 300px !important;
    gap: 34px !important;
    justify-content: center !important;
    align-items: start !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.book-amazon-grid .product-summary-box > .product-actions {
    display: none !important;
}

.product-purchase-box {
    width: 300px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
    border: 1px solid rgba(15, 118, 110, 0.22) !important;
    position: sticky !important;
    top: 18px !important;
}

.product-purchase-box .full-buy-btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-top: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
}

.product-purchase-box select {
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
}

.purchase-main-price {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #064e3b !important;
}

.purchase-stock {
    color: #15803d !important;
    font-weight: 700 !important;
}

@media (max-width: 1250px) {
    .product-detail-grid.book-amazon-grid {
        grid-template-columns: 340px minmax(420px, 1fr) !important;
    }

    .product-purchase-box {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 920px !important;
        position: static !important;
    }
}

@media (max-width: 850px) {
    .product-detail-grid.book-amazon-grid {
        grid-template-columns: 1fr !important;
        max-width: 420px !important;
    }

    .product-purchase-box {
        width: 100% !important;
    }
}

/* Product gallery thumbnails below main image */
.product-thumbnail-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
}

.product-thumb-btn {
    width: 62px;
    height: 62px;
    border: 1px solid rgba(15, 118, 110, 0.25);
    border-radius: 10px;
    background: #ffffff;
    padding: 4px;
    cursor: pointer;
}

.product-thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 7px;
}

.product-thumb-btn.active,
.product-thumb-btn:hover {
    border-color: #0f766e;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.18);
}

/* Product gallery thumbnails below main image */
.product-thumbnail-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
}

.product-thumb-btn {
    width: 62px;
    height: 62px;
    border: 1px solid rgba(15, 118, 110, 0.25);
    border-radius: 10px;
    background: #ffffff;
    padding: 4px;
    cursor: pointer;
}

.product-thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 7px;
}

.product-thumb-btn.active,
.product-thumb-btn:hover {
    border-color: #0f766e;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.18);
}

/* Admin edit product image management */
.edit-image-preview img {
    max-width: 180px;
    max-height: 180px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    background: #f8fafc;
    padding: 8px;
}

.edit-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}

.edit-gallery-item {
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 12px;
    padding: 8px;
    background: #f8fafc;
    display: block;
    cursor: pointer;
}

.edit-gallery-item img {
    width: 100%;
    height: 90px;
    object-fit: contain;
    display: block;
    margin-bottom: 8px;
}

/* Fix: zoom preview must appear above page text, not behind it */
.product-image-box {
    position: relative !important;
    z-index: 50 !important;
    overflow: visible !important;
}

.product-summary-box {
    position: relative !important;
    z-index: 1 !important;
}

.product-purchase-box {
    position: sticky !important;
    z-index: 2 !important;
}

/* Main image must stay stable; only the side zoom should enlarge */
.product-image-box:hover img,
.product-image-link:hover img,
.product-image-box img:hover {
    transform: none !important;
}

/* Clean readable zoom window */
.side-book-zoom {
    display: none;
    position: absolute !important;
    left: calc(100% + 22px) !important;
    top: 0 !important;
    width: 460px !important;
    height: 560px !important;
    z-index: 99999 !important;
    background-color: #ffffff !important;
    background-repeat: no-repeat !important;
    background-size: 300% !important;
    border: 3px solid rgba(15, 118, 110, 0.45) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.35) !important;
    pointer-events: none !important;
    opacity: 1 !important;
}

/* Keep help text below image, never over image */
.image-help-text {
    position: static !important;
    z-index: 0 !important;
    background: transparent !important;
    margin-top: 12px !important;
    clear: both !important;
}

/* On smaller screens, avoid covering the page */
@media (max-width: 1250px) {
    .side-book-zoom {
        left: 0 !important;
        top: calc(100% + 14px) !important;
        width: min(520px, 95vw) !important;
        height: 430px !important;
    }
}

@media (max-width: 850px) {
    .side-book-zoom {
        display: none !important;
    }
}

/* Water technology material gallery and zoom fix */
.product-image-box {
    position: relative !important;
    z-index: 80 !important;
    overflow: visible !important;
}

.product-summary-box {
    position: relative !important;
    z-index: 1 !important;
}

.product-purchase-box {
    position: sticky !important;
    z-index: 2 !important;
}

/* Main product image must stay stable; only zoom preview enlarges */
.product-image-box:hover img,
.product-image-link:hover img,
.product-image-box img:hover {
    transform: none !important;
}

/* Clean zoom preview above all text */
.side-book-zoom {
    position: absolute !important;
    left: calc(100% + 24px) !important;
    top: 0 !important;
    width: 440px !important;
    height: 500px !important;
    z-index: 99999 !important;
    background-color: #ffffff !important;
    background-repeat: no-repeat !important;
    background-size: 280% !important;
    border: 3px solid rgba(15, 118, 110, 0.45) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.35) !important;
    pointer-events: none !important;
}

/* Four-side material image thumbnails */
.product-thumbnail-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

.product-thumb-btn {
    width: 100% !important;
    height: 74px !important;
    border: 1px solid rgba(15, 118, 110, 0.25) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    padding: 5px !important;
    cursor: pointer !important;
}

.product-thumb-btn img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 8px !important;
}

.product-thumb-btn.active,
.product-thumb-btn:hover {
    border-color: #0f766e !important;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.18) !important;
}

/* On smaller screens, place zoom below or hide it */
@media (max-width: 1250px) {
    .side-book-zoom {
        left: 0 !important;
        top: calc(100% + 14px) !important;
        width: min(520px, 95vw) !important;
        height: 420px !important;
    }
}

@media (max-width: 850px) {
    .side-book-zoom {
        display: none !important;
    }

    .product-thumbnail-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Four-side image upload fields */
.four-side-upload-box {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(15, 118, 110, 0.20);
    border-radius: 14px;
    background: #f8fafc;
}

.four-side-upload-box h4 {
    margin: 0 0 6px 0;
    color: #064e3b;
}

.four-side-upload-box p {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #64748b;
}

.four-side-upload-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.four-side-upload-grid label {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

@media (max-width: 850px) {
    .four-side-upload-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Training / Design Support storefront cards */
.training-storefront-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.training-filter-panel {
    background: #ffffff;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.training-filter-panel h3 {
    margin-top: 0;
    color: #064e3b;
}

.training-filter-panel input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 118, 110, 0.25);
    margin-bottom: 10px;
}

.training-results-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    margin-bottom: 18px;
}

.training-results-heading h2 {
    margin: 0;
    color: #064e3b;
}

.training-results-heading p {
    margin: 0;
    color: #64748b;
}

.training-shelf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
}

.training-shelf-card {
    background: #ffffff;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.training-shelf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.training-card-image {
    height: 210px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.training-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
}

.training-card-placeholder {
    color: #64748b;
    font-weight: 700;
}

.training-card-body {
    padding: 16px;
}

.training-card-category {
    display: inline-block;
    margin: 0 0 8px 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #065f46;
    font-size: 13px;
    font-weight: 700;
}

.training-card-body h3 {
    margin: 0 0 8px 0;
    color: #0f172a;
}

.training-card-price {
    margin: 0 0 8px 0;
    color: #064e3b;
    font-weight: 800;
}

.training-card-summary {
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

.training-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.training-card-actions .btn {
    padding: 7px 12px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .training-storefront-layout {
        grid-template-columns: 1fr;
    }

    .training-results-heading {
        display: block;
    }
}

/* Training / Design Support storefront cards */
.training-storefront-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.training-filter-panel {
    background: #ffffff;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.training-filter-panel h3 {
    margin-top: 0;
    color: #064e3b;
}

.training-filter-panel input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 118, 110, 0.25);
    margin-bottom: 10px;
}

.training-results-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    margin-bottom: 18px;
}

.training-results-heading h2 {
    margin: 0;
    color: #064e3b;
}

.training-results-heading p {
    margin: 0;
    color: #64748b;
}

.training-shelf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
}

.training-shelf-card {
    background: #ffffff;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.training-shelf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.training-card-image {
    height: 210px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.training-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
}

.training-card-placeholder {
    color: #64748b;
    font-weight: 700;
}

.training-card-body {
    padding: 16px;
}

.training-card-category {
    display: inline-block;
    margin: 0 0 8px 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #065f46;
    font-size: 13px;
    font-weight: 700;
}

.training-card-body h3 {
    margin: 0 0 8px 0;
    color: #0f172a;
}

.training-card-price {
    margin: 0 0 8px 0;
    color: #064e3b;
    font-weight: 800;
}

.training-card-summary {
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

.training-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.training-card-actions .btn {
    padding: 7px 12px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .training-storefront-layout {
        grid-template-columns: 1fr;
    }

    .training-results-heading {
        display: block;
    }
}

/* Optional 360 degree product viewer */
.product-360-box {
    margin-top: 16px;
    border: 1px solid rgba(15, 118, 110, 0.25);
    border-radius: 16px;
    background: #ffffff;
    padding: 12px;
    text-align: center;
}

.product-360-title {
    font-weight: 800;
    color: #064e3b;
    margin-bottom: 8px;
}

.product-360-image {
    width: 100%;
    height: 230px;
    object-fit: contain;
    cursor: grab;
    user-select: none;
    background: #f8fafc;
    border-radius: 12px;
}

.product-360-image:active {
    cursor: grabbing;
}

.product-360-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
}

.product-360-controls button {
    border: 0;
    border-radius: 999px;
    padding: 7px 14px;
    background: #e7c84b;
    color: #064e3b;
    font-weight: 800;
    cursor: pointer;
}

.product-360-box p {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 0;
}

/* 360 / side rotation viewer */
.product-360-box {
    margin-top: 16px !important;
    border: 1px solid rgba(15, 118, 110, 0.25) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    padding: 12px !important;
    text-align: center !important;
}

.product-360-title {
    font-weight: 800 !important;
    color: #064e3b !important;
    margin-bottom: 8px !important;
}

.product-360-image {
    width: 100% !important;
    height: 230px !important;
    object-fit: contain !important;
    cursor: grab !important;
    user-select: none !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
}

.product-360-controls {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

.product-360-controls button {
    border: 0 !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    background: #e7c84b !important;
    color: #064e3b !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.product-360-box p {
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 0 !important;
}

/* 360 / side rotation viewer */
.product-360-box {
    margin-top: 16px !important;
    border: 1px solid rgba(15, 118, 110, 0.25) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    padding: 12px !important;
    text-align: center !important;
}

.product-360-title {
    font-weight: 800 !important;
    color: #064e3b !important;
    margin-bottom: 8px !important;
}

.product-360-image {
    width: 100% !important;
    height: 230px !important;
    object-fit: contain !important;
    cursor: grab !important;
    user-select: none !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
}

.product-360-controls {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

.product-360-controls button {
    border: 0 !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    background: #e7c84b !important;
    color: #064e3b !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.product-360-box p {
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 0 !important;
}

/* Larger, cleaner zoom window for books and materials */
.product-image-box {
    position: relative !important;
    overflow: visible !important;
    z-index: 100 !important;
}

.product-summary-box {
    position: relative !important;
    z-index: 1 !important;
}

.side-book-zoom {
    display: none;
    position: absolute !important;
    left: calc(100% + 26px) !important;
    top: 0 !important;
    width: 680px !important;
    height: 620px !important;
    z-index: 999999 !important;
    background-color: #ffffff !important;
    background-repeat: no-repeat !important;
    border: 3px solid rgba(15, 118, 110, 0.50) !important;
    border-radius: 18px !important;
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.38) !important;
    pointer-events: none !important;
    image-rendering: auto !important;
}

/* Stop the original image from stretching during hover */
.product-image-link img,
.product-image-link:hover img,
.product-image-box:hover img {
    transform: none !important;
}

/* Make the 3D/rotation viewer visible and elegant */
.product-360-box {
    margin-top: 16px !important;
    border: 1px solid rgba(15, 118, 110, 0.25) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    padding: 12px !important;
    text-align: center !important;
}

.product-360-title {
    font-weight: 900 !important;
    color: #064e3b !important;
    margin-bottom: 8px !important;
}

.product-360-image {
    width: 100% !important;
    height: 260px !important;
    object-fit: contain !important;
    cursor: grab !important;
    user-select: none !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
}

.product-360-controls {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

.product-360-controls button {
    border: 0 !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    background: #e7c84b !important;
    color: #064e3b !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.product-360-box p {
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 0 !important;
}

@media (max-width: 1300px) {
    .side-book-zoom {
        left: 0 !important;
        top: calc(100% + 16px) !important;
        width: min(700px, 95vw) !important;
        height: 520px !important;
    }
}

@media (max-width: 850px) {
    .side-book-zoom {
        display: none !important;
    }
}

/* Normal large image preview — not magnifying glass */
.side-book-zoom {
    display: none !important;
}

.normal-large-preview {
    display: none;
    position: absolute !important;
    left: calc(100% + 26px) !important;
    top: 0 !important;
    width: 720px !important;
    height: 680px !important;
    z-index: 999999 !important;
    background: #ffffff !important;
    border: 3px solid rgba(15, 118, 110, 0.50) !important;
    border-radius: 18px !important;
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.38) !important;
    padding: 14px !important;
    pointer-events: none !important;
}

.normal-large-preview-title {
    font-weight: 900 !important;
    color: #064e3b !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}

.normal-large-preview img {
    width: 100% !important;
    height: calc(100% - 34px) !important;
    object-fit: contain !important;
    image-rendering: auto !important;
}

/* Click-to-read full image modal */
.large-image-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999999;
    background: rgba(15, 23, 42, 0.88);
    padding: 30px;
    text-align: center;
}

.large-image-modal.open {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.large-image-modal img {
    max-width: 96vw;
    max-height: 86vh;
    object-fit: contain;
    background: #ffffff;
    border-radius: 14px;
    padding: 10px;
}

.large-image-modal p {
    color: #ffffff;
    margin-top: 10px;
}

.large-image-close {
    position: fixed;
    top: 18px;
    right: 24px;
    border: 0;
    border-radius: 999px;
    width: 44px;
    height: 44px;
    font-size: 30px;
    line-height: 38px;
    background: #e7c84b;
    color: #064e3b;
    cursor: pointer;
    font-weight: 900;
}

/* Automatic 3D / 360 viewer */
.auto-rotation-viewer {
    margin-top: 16px !important;
    border: 1px solid rgba(15, 118, 110, 0.25) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    padding: 12px !important;
    text-align: center !important;
}

.auto-rotation-title {
    font-weight: 900 !important;
    color: #064e3b !important;
    margin-bottom: 8px !important;
}

.auto-rotation-image {
    width: 100% !important;
    height: 280px !important;
    object-fit: contain !important;
    cursor: grab !important;
    user-select: none !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
}

.auto-rotation-controls {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

.auto-rotation-controls button {
    border: 0 !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    background: #e7c84b !important;
    color: #064e3b !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.auto-rotation-viewer p {
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 0 !important;
}

/* Keep preview above text */
.product-image-box {
    position: relative !important;
    overflow: visible !important;
    z-index: 200 !important;
}

.product-summary-box {
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 1350px) {
    .normal-large-preview {
        left: 0 !important;
        top: calc(100% + 16px) !important;
        width: min(760px, 95vw) !important;
        height: 620px !important;
    }
}

@media (max-width: 850px) {
    .normal-large-preview {
        display: none !important;
    }
}

/* =========================================================
   Elegant large preview
   ========================================================= */
.side-book-zoom {
    display: none !important;
}

.normal-large-preview {
    display: none;
    position: absolute !important;
    left: calc(100% + 24px) !important;
    top: 0 !important;
    z-index: 999999 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(15, 118, 110, 0.22) !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28) !important;
    background:
        linear-gradient(180deg, rgba(245,250,248,0.98), rgba(236,245,242,0.98)) !important;
    backdrop-filter: blur(3px) !important;
    padding: 10px !important;
}

.normal-large-preview.portrait {
    width: 560px !important;
    height: 860px !important;
}

.normal-large-preview.landscape {
    width: 760px !important;
    height: 620px !important;
}

.normal-large-preview-title {
    font-weight: 800 !important;
    color: #064e3b !important;
    text-align: center !important;
    padding: 6px 0 10px 0 !important;
    font-size: 18px !important;
}

.normal-large-preview-inner {
    width: 100% !important;
    height: calc(100% - 42px) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(180deg, #fdfefe 0%, #f3f8f6 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
}

.normal-large-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    image-rendering: auto !important;
    border-radius: 12px !important;
}

/* =========================================================
   Large modal
   ========================================================= */
.large-image-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999999;
    background: rgba(8, 15, 18, 0.88);
    padding: 24px;
    text-align: center;
}

.large-image-modal.open {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.large-image-modal img {
    max-width: 96vw;
    max-height: 86vh;
    object-fit: contain;
    background: #f8fbfa;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 25px 65px rgba(0,0,0,0.35);
}

.large-image-modal p {
    color: #ffffff;
    margin-top: 12px;
}

.large-image-close {
    position: fixed;
    top: 16px;
    right: 20px;
    border: 0;
    border-radius: 999px;
    width: 46px;
    height: 46px;
    font-size: 30px;
    line-height: 40px;
    background: #e7c84b;
    color: #064e3b;
    cursor: pointer;
    font-weight: 900;
}

/* =========================================================
   3D / 360 viewer
   ========================================================= */
.auto-rotation-viewer {
    margin-top: 16px !important;
    border: 1px solid rgba(15, 118, 110, 0.22) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #fcfefd 0%, #f4faf7 100%) !important;
    padding: 14px !important;
    text-align: center !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
}

.auto-rotation-title {
    font-weight: 900 !important;
    color: #064e3b !important;
    margin-bottom: 10px !important;
    font-size: 18px !important;
}

.auto-rotation-image {
    width: 100% !important;
    height: 300px !important;
    object-fit: contain !important;
    cursor: grab !important;
    user-select: none !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 8px !important;
    box-shadow: inset 0 0 0 1px rgba(15,118,110,0.08) !important;
}

.auto-rotation-controls {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-top: 12px !important;
}

.auto-rotation-controls button {
    border: 0 !important;
    border-radius: 999px !important;
    padding: 9px 18px !important;
    background: #e7c84b !important;
    color: #064e3b !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    font-size: 15px !important;
}

.auto-rotation-viewer p {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 12px 0 0 0 !important;
    line-height: 1.5 !important;
}

/* =========================================================
   Keep preview above text
   ========================================================= */
.product-image-box {
    position: relative !important;
    overflow: visible !important;
    z-index: 200 !important;
}

.product-summary-box {
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 1350px) {
    .normal-large-preview.portrait,
    .normal-large-preview.landscape {
        left: 0 !important;
        top: calc(100% + 16px) !important;
        width: min(640px, 95vw) !important;
        height: 700px !important;
    }
}

@media (max-width: 850px) {
    .normal-large-preview {
        display: none !important;
    }
}

.image-hover-note,
.image-overlay-note,
.product-image-note {
    display: none !important;
}

/* =========================================================
   Stronger readable preview fix
   ========================================================= */

/* remove unnecessary overlay feel */
.normal-large-preview {
    padding: 8px !important;
}

/* portrait books: narrower frame, but image much larger */
.normal-large-preview.portrait {
    width: 500px !important;
    height: 900px !important;
}

/* landscape documents/materials */
.normal-large-preview.landscape {
    width: 820px !important;
    height: 640px !important;
}

.normal-large-preview-title {
    font-weight: 800 !important;
    color: #064e3b !important;
    text-align: center !important;
    padding: 4px 0 8px 0 !important;
    font-size: 18px !important;
}

.normal-large-preview-inner {
    width: 100% !important;
    height: calc(100% - 34px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    background: linear-gradient(180deg, #fbfdfc 0%, #f1f7f4 100%) !important;
    border-radius: 16px !important;
}

/* THIS is the key change */
.normal-large-preview.portrait img {
    width: auto !important;
    height: 98% !important;
    max-width: 98% !important;
    object-fit: contain !important;
    border-radius: 12px !important;
}

/* for landscape items */
.normal-large-preview.landscape img {
    width: 98% !important;
    height: auto !important;
    max-height: 98% !important;
    object-fit: contain !important;
    border-radius: 12px !important;
}

/* make main image area stay above surrounding text */
.product-image-box {
    position: relative !important;
    overflow: visible !important;
    z-index: 300 !important;
}

.product-summary-box,
.product-purchase-box {
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 1350px) {
    .normal-large-preview.portrait {
        width: min(500px, 92vw) !important;
        height: 760px !important;
        left: 0 !important;
        top: calc(100% + 16px) !important;
    }

    .normal-large-preview.landscape {
        width: min(760px, 95vw) !important;
        height: 560px !important;
        left: 0 !important;
        top: calc(100% + 16px) !important;
    }
}

.image-hover-note,
.image-overlay-note,
.product-image-note {
    display: none !important;
}

.image-hover-note,
.image-overlay-note,
.product-image-note {
    display: none !important;
}

/* =========================================================
   Final readable hover preview: large book, little empty space
   ========================================================= */

.normal-large-preview {
    display: none;
    position: absolute !important;
    left: calc(100% + 22px) !important;
    top: 0 !important;
    z-index: 999999 !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: #f7fbf9 !important;
    border: 2px solid rgba(15, 118, 110, 0.45) !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.32) !important;
    overflow: hidden !important;
}

/* For books: tall and narrow, so the cover/back cover fills the space */
.normal-large-preview.portrait {
    width: 470px !important;
    height: 880px !important;
}

/* For pumps/materials: wider frame */
.normal-large-preview.landscape {
    width: 780px !important;
    height: 620px !important;
}

.normal-large-preview-title {
    display: none !important;
}

.normal-large-preview-inner {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Key fix: the book must become large, not remain original size */
.normal-large-preview.portrait img {
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    border-radius: 12px !important;
}

.normal-large-preview.landscape img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 12px !important;
}

/* Keep preview above all text and panels */
.product-image-box {
    position: relative !important;
    overflow: visible !important;
    z-index: 500 !important;
}

.product-summary-box,
.product-purchase-box {
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 1350px) {
    .normal-large-preview.portrait {
        left: 0 !important;
        top: calc(100% + 16px) !important;
        width: min(470px, 94vw) !important;
        height: 760px !important;
    }

    .normal-large-preview.landscape {
        left: 0 !important;
        top: calc(100% + 16px) !important;
        width: min(780px, 94vw) !important;
        height: 560px !important;
    }
}

@media (max-width: 850px) {
    .normal-large-preview {
        display: none !important;
    }
}

/* =========================================================
   Final fix: remove white space above/below in hover preview
   Make book/back cover much larger and readable
   ========================================================= */

.normal-large-preview {
    padding: 6px !important;
    background: #ffffff !important;
}

/* Larger readable frame */
.normal-large-preview.portrait,
.normal-large-preview.landscape {
    width: 720px !important;
    height: 760px !important;
}

/* Remove title space */
.normal-large-preview-title {
    display: none !important;
}

/* Use full frame */
.normal-large-preview-inner {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Key correction:
   Fill height first, not width.
   This removes the empty top and bottom space. */
.normal-large-preview img,
.normal-large-preview.portrait img,
.normal-large-preview.landscape img {
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    border-radius: 10px !important;
}

/* If the image is nearly square or book-cover-like, make it very readable */
.normal-large-preview.portrait img {
    height: 100% !important;
    width: auto !important;
}

/* Keep preview above page text */
.product-image-box {
    position: relative !important;
    overflow: visible !important;
    z-index: 800 !important;
}

.product-summary-box,
.product-purchase-box {
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 1350px) {
    .normal-large-preview.portrait,
    .normal-large-preview.landscape {
        left: 0 !important;
        top: calc(100% + 16px) !important;
        width: min(720px, 94vw) !important;
        height: 720px !important;
    }
}

/* =========================================================
   3D / 360 viewer shadow effect
   Make the object feel placed in space
   ========================================================= */

.auto-rotation-viewer {
    position: relative !important;
    overflow: visible !important;
    perspective: 1200px !important;
}

/* soft ground shadow under the rotating object */
.auto-rotation-viewer::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 205px !important;
    transform: translateX(-50%) !important;
    width: 62% !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.22) 0%,
        rgba(0, 0, 0, 0.12) 45%,
        rgba(0, 0, 0, 0.04) 72%,
        rgba(0, 0, 0, 0.00) 100%
    ) !important;
    filter: blur(7px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* the rotating image itself */
.auto-rotation-image {
    position: relative !important;
    z-index: 2 !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 8px !important;

    /* gives depth */
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.12),
        0 18px 30px rgba(15, 23, 42, 0.14),
        0 30px 50px rgba(15, 23, 42, 0.12),
        inset 0 0 0 1px rgba(15, 118, 110, 0.06) !important;

    /* gives more realistic floating depth */
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.18)) !important;

    transform: translateY(-4px) scale(1.01) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* slightly stronger when hovered */
.auto-rotation-image:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.14),
        0 24px 38px rgba(15, 23, 42, 0.16),
        0 38px 60px rgba(15, 23, 42, 0.14),
        inset 0 0 0 1px rgba(15, 118, 110, 0.08) !important;
}

/* mobile / smaller screen adjustment */
@media (max-width: 850px) {
    .auto-rotation-viewer::after {
        top: 190px !important;
        width: 70% !important;
    }
}

/* =========================================================
   Professional product details fields
   ========================================================= */

.product-extra-admin-box {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(15, 118, 110, 0.20);
    border-radius: 18px;
    background: #f8fafc;
}

.product-extra-admin-box h3 {
    margin: 0 0 6px 0;
    color: #064e3b;
}

.product-extra-admin-box p {
    margin: 0 0 16px 0;
    color: #64748b;
    font-size: 14px;
}

.product-extra-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.product-extra-public-section {
    padding-top: 0;
}

.product-extra-public-card h3 {
    color: #064e3b;
    margin-top: 0;
}

.product-extra-public-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.product-extra-public-item {
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 14px;
    background: #f8fafc;
    padding: 12px;
}

.product-extra-public-item span {
    display: block;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 4px;
}

.product-extra-public-item strong {
    color: #064e3b;
}

.product-extra-text-block {
    margin-top: 18px;
    border-top: 1px solid rgba(15, 118, 110, 0.14);
    padding-top: 16px;
}

.product-extra-text-block h4 {
    margin: 0 0 8px 0;
    color: #064e3b;
}

.product-extra-text-block p {
    margin: 0;
    line-height: 1.65;
    color: #334155;
}

@media (max-width: 800px) {
    .product-extra-admin-grid {
        grid-template-columns: 1fr;
    }
}

/* Professional details public display */
.product-professional-details-section {
    padding-top: 0 !important;
}

.product-professional-details-card h3 {
    color: #064e3b;
    margin-top: 0;
}

.product-professional-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.product-professional-item {
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 14px;
    background: #f8fafc;
    padding: 12px;
}

.product-professional-item span {
    display: block;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 4px;
}

.product-professional-item strong {
    color: #064e3b;
}

.product-professional-text {
    margin-top: 18px;
    border-top: 1px solid rgba(15, 118, 110, 0.14);
    padding-top: 16px;
}

.product-professional-text h4 {
    margin: 0 0 8px 0;
    color: #064e3b;
}

.product-professional-text p {
    margin: 0;
    line-height: 1.65;
    color: #334155;
}

/* Hide older duplicate professional-details trial sections.
   Keep only the final product-professional-details section visible. */
.product-extra-public-section,
.public-extra-details-force-v2,
.product-extra-public-card,
.public-extra-grid-v2,
.public-extra-item-v2,
.public-extra-text-v2 {
    display: none !important;
}

/* =========================================================
   Public cards: hide long summaries
   Keep summaries visible only on product detail pages
   ========================================================= */

.book-shelf-card .book-card-summary,
.book-shelf-card .book-shelf-summary,
.book-shelf-card .book-summary,
.material-shelf-card .material-card-summary,
.material-shelf-card .material-summary,
.training-shelf-card .training-card-summary,
.training-shelf-card .training-summary,
.home-product-card .home-product-summary,
.home-product-card .book-card-summary,
.home-product-card .material-card-summary,
.home-product-card .training-card-summary {
    display: none !important;
}

/* Make cards cleaner after removing summary */
.book-shelf-card,
.material-shelf-card,
.training-shelf-card,
.home-product-card {
    display: flex !important;
    flex-direction: column !important;
}

.book-card-body,
.material-card-body,
.training-card-body,
.home-product-card-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.book-card-actions,
.material-card-actions,
.training-card-actions,
.home-product-actions {
    margin-top: auto !important;
}

/* =========================================================
   Water technology and training detail pages
   Same professional information style as books
   ========================================================= */

.nonbook-full-details-section {
    padding-top: 0 !important;
}

.nonbook-full-card {
    margin-top: 24px !important;
}

.nonbook-full-card h3 {
    color: #064e3b !important;
    margin-top: 0 !important;
}

.nonbook-full-card p {
    line-height: 1.7 !important;
    color: #334155 !important;
}

.nonbook-full-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 14px !important;
}

.nonbook-full-item {
    border: 1px solid rgba(15, 118, 110, 0.16) !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    padding: 12px !important;
}

.nonbook-full-item span {
    display: block !important;
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 4px !important;
}

.nonbook-full-item strong {
    color: #064e3b !important;
}

.nonbook-full-text {
    margin-top: 18px !important;
    border-top: 1px solid rgba(15, 118, 110, 0.14) !important;
    padding-top: 16px !important;
}

.nonbook-full-text h4 {
    margin: 0 0 8px 0 !important;
    color: #064e3b !important;
}

.nonbook-full-text p {
    margin: 0 !important;
    line-height: 1.7 !important;
}

/* =========================================================
   Product thumbnail labels
   ========================================================= */

.product-thumbnail-row {
    align-items: stretch !important;
}

.product-thumb-btn {
    height: auto !important;
    min-height: 92px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
}

.product-thumb-btn img {
    height: 62px !important;
    width: 100% !important;
    object-fit: contain !important;
}

.thumb-label {
    display: block !important;
    width: 100% !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    color: #064e3b !important;
    font-weight: 800 !important;
    text-align: center !important;
    white-space: normal !important;
}

.product-thumb-btn.active .thumb-label,
.product-thumb-btn:hover .thumb-label {
    color: #022c22 !important;
}

/* =========================================================
   Related products below detail page
   ========================================================= */

.related-products-section {
    padding-top: 0 !important;
}

.related-products-heading {
    margin-bottom: 18px !important;
}

.related-products-heading h3 {
    margin: 0 0 6px 0 !important;
    color: #064e3b !important;
    font-size: 26px !important;
}

.related-products-heading p {
    margin: 0 !important;
    color: #64748b !important;
}

.related-products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 20px !important;
}

.related-product-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 118, 110, 0.18) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.related-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14) !important;
}

.related-product-image {
    height: 190px !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.related-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 14px !important;
}

.related-product-placeholder {
    color: #64748b !important;
    font-weight: 800 !important;
}

.related-product-body {
    padding: 15px !important;
}

.related-product-category {
    display: inline-block !important;
    margin: 0 0 8px 0 !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #065f46 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.related-product-body h4 {
    margin: 0 0 8px 0 !important;
    color: #0f172a !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
}

.related-product-price {
    margin: 0 0 12px 0 !important;
    color: #064e3b !important;
    font-weight: 900 !important;
}

.related-product-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.related-product-actions .btn {
    padding: 7px 12px !important;
    font-size: 13px !important;
}

/* =========================================================
   Related products below detail page
   ========================================================= */

.related-products-section {
    padding-top: 0 !important;
}

.related-products-heading {
    margin-bottom: 18px !important;
}

.related-products-heading h3 {
    margin: 0 0 6px 0 !important;
    color: #064e3b !important;
    font-size: 26px !important;
}

.related-products-heading p {
    margin: 0 !important;
    color: #64748b !important;
}

.related-products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 20px !important;
}

.related-product-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 118, 110, 0.18) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.related-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14) !important;
}

.related-product-image {
    height: 190px !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.related-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 14px !important;
}

.related-product-placeholder {
    color: #64748b !important;
    font-weight: 800 !important;
}

.related-product-body {
    padding: 15px !important;
}

.related-product-category {
    display: inline-block !important;
    margin: 0 0 8px 0 !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #065f46 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.related-product-body h4 {
    margin: 0 0 8px 0 !important;
    color: #0f172a !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
}

.related-product-price {
    margin: 0 0 12px 0 !important;
    color: #064e3b !important;
    font-weight: 900 !important;
}

.related-product-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.related-product-actions .btn {
    padding: 7px 12px !important;
    font-size: 13px !important;
}

/* =========================================================
   Stock, delivery and support section
   ========================================================= */

.stock-delivery-section {
    padding-top: 0 !important;
}

.stock-delivery-card h3 {
    color: #064e3b !important;
    margin-top: 0 !important;
}

.stock-delivery-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
    margin: 16px 0 !important;
}

.stock-delivery-item {
    border: 1px solid rgba(15, 118, 110, 0.16) !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    padding: 14px !important;
}

.stock-delivery-item span {
    display: block !important;
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 5px !important;
    font-weight: 700 !important;
}

.stock-delivery-item strong {
    color: #064e3b !important;
    font-size: 16px !important;
}

.stock-info-available {
    background: #ecfdf5 !important;
    border-color: rgba(22, 163, 74, 0.25) !important;
}

.stock-info-request {
    background: #eff6ff !important;
    border-color: rgba(37, 99, 235, 0.25) !important;
}

.stock-info-preorder {
    background: #fffbeb !important;
    border-color: rgba(217, 119, 6, 0.25) !important;
}

.stock-info-out {
    background: #fef2f2 !important;
    border-color: rgba(220, 38, 38, 0.25) !important;
}

.stock-info-out strong {
    color: #991b1b !important;
}

.stock-delivery-help {
    color: #475569 !important;
    line-height: 1.65 !important;
    margin-bottom: 16px !important;
}

/* =========================================================
   Quick stock / delivery / warranty inside purchase box
   ========================================================= */

.purchase-quick-info {
    margin: 12px 0 14px 0 !important;
    display: grid !important;
    gap: 8px !important;
}

.purchase-quick-info div {
    border: 1px solid rgba(15, 118, 110, 0.16) !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    padding: 9px 10px !important;
}

.purchase-quick-info span {
    display: block !important;
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 800 !important;
    margin-bottom: 3px !important;
}

.purchase-quick-info strong {
    display: block !important;
    color: #064e3b !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* Admin invoice/facture button */
.invoice-admin-button-box {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 16px;
    background: #f8fafc;
    text-align: center;
}

.invoice-admin-button-box .btn {
    font-weight: 900;
}

/* Center invoice/facture button inside admin board */
.admin-center-board-card {
    max-width: 520px;
    margin: 18px auto 24px auto;
    padding: 18px;
    text-align: center;
    border: 1px solid rgba(15, 118, 110, 0.20);
    border-radius: 18px;
    background: #f8fafc;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.admin-center-board-card .btn {
    font-weight: 900;
    padding: 11px 22px;
}

/* Subscriber consent checkbox during purchase */
.subscriber-consent-box {
    max-width: 860px;
    margin: 24px auto;
    padding: 16px 18px;
    border: 1px solid rgba(15, 118, 110, 0.20);
    border-radius: 18px;
    background: #f8fafc;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.subscriber-consent-box label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 800;
    color: #064e3b;
    line-height: 1.45;
}

.subscriber-consent-box input {
    margin-top: 4px;
    transform: scale(1.15);
}

.subscriber-consent-box p {
    margin: 8px 0 0 28px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

/* =========================================================
   Beautiful subscriber opt-in box in cart
   ========================================================= */

.subscriber-consent-box.subscriber-consent-pro {
    max-width: 980px !important;
    margin: 28px auto !important;
    padding: 22px 24px !important;
    border: 2px solid rgba(15, 118, 110, 0.28) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 48%, #fff7d6 100%) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12) !important;
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.subscriber-consent-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
    background: #064e3b !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    box-shadow: 0 12px 24px rgba(6, 78, 59, 0.25) !important;
}

.subscriber-consent-badge {
    display: inline-block !important;
    margin-bottom: 8px !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: #e7c84b !important;
    color: #064e3b !important;
    font-weight: 900 !important;
    font-size: 13px !important;
}

.subscriber-consent-label {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
    cursor: pointer !important;
    color: #0f172a !important;
}

.subscriber-consent-label input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    margin-top: 4px !important;
    accent-color: #0f766e !important;
    cursor: pointer !important;
    transform: none !important;
}

.subscriber-consent-label strong {
    display: block !important;
    color: #064e3b !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    margin-bottom: 5px !important;
}

.subscriber-consent-label small {
    display: block !important;
    color: #334155 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.subscriber-consent-content p {
    margin: 12px 0 0 38px !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.subscriber-consent-box:hover {
    border-color: rgba(15, 118, 110, 0.45) !important;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.16) !important;
}

@media (max-width: 700px) {
    .subscriber-consent-box.subscriber-consent-pro {
        grid-template-columns: 1fr !important;
    }

    .subscriber-consent-content p {
        margin-left: 0 !important;
    }
}

/* =========================================================
   Beautiful subscriber opt-in box in cart
   ========================================================= */

.subscriber-consent-box.subscriber-consent-pro {
    max-width: 980px !important;
    margin: 28px auto !important;
    padding: 22px 24px !important;
    border: 2px solid rgba(15, 118, 110, 0.28) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 48%, #fff7d6 100%) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12) !important;
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.subscriber-consent-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
    background: #064e3b !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    box-shadow: 0 12px 24px rgba(6, 78, 59, 0.25) !important;
}

.subscriber-consent-badge {
    display: inline-block !important;
    margin-bottom: 8px !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: #e7c84b !important;
    color: #064e3b !important;
    font-weight: 900 !important;
    font-size: 13px !important;
}

.subscriber-consent-label {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
    cursor: pointer !important;
    color: #0f172a !important;
}

.subscriber-consent-label input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    margin-top: 4px !important;
    accent-color: #0f766e !important;
    cursor: pointer !important;
    transform: none !important;
}

.subscriber-consent-label strong {
    display: block !important;
    color: #064e3b !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    margin-bottom: 5px !important;
}

.subscriber-consent-label small {
    display: block !important;
    color: #334155 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.subscriber-consent-content p {
    margin: 12px 0 0 38px !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.subscriber-consent-box:hover {
    border-color: rgba(15, 118, 110, 0.45) !important;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.16) !important;
}

@media (max-width: 700px) {
    .subscriber-consent-box.subscriber-consent-pro {
        grid-template-columns: 1fr !important;
    }

    .subscriber-consent-content p {
        margin-left: 0 !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Hide old duplicated 3D / 360 viewer
   Added because manual 3D book images are now preferred.
   ========================================================= */

.product-360,
.product-3d,
.product-viewer-3d,
.product-viewers,
.product-viewer,
.three-d-view,
.viewer-3d,
.view-3d,
.book-3d-view,
.book-3d,
#product-360,
#product-3d,
#product-viewer-3d,
#three-d-view,
#viewer-3d,
#book-3d-view {
    display: none !important;
}

/* Hide headings/buttons that belong only to the old 3D viewer if they use common labels */
[data-viewer="3d"],
[data-viewer="360"],
[data-section="3d"],
[data-section="360"] {
    display: none !important;
}

/* =========================================================
   AquaLinked Bookstore - Remove duplicated old 3D / 360 viewers
   Keep manual uploaded 3D product images only.
   ========================================================= */

.product-360,
.product-3d,
.product-viewer-3d,
.product-viewers,
.product-viewer,
.three-d-view,
.viewer-3d,
.view-3d,
.book-3d-view,
.book-3d,
.product-rotation,
.rotation-view,
.product-rotation-view,
.product-360-view,
.book-360-view,
.book-rotation-view,
#product-360,
#product-3d,
#product-viewer-3d,
#three-d-view,
#viewer-3d,
#book-3d-view,
#product-rotation,
#rotation-view,
#product-360-view,
#book-360-view {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Hide common old viewer panels by data attributes */
[data-viewer="3d"],
[data-viewer="360"],
[data-section="3d"],
[data-section="360"],
[data-role="3d-viewer"],
[data-role="360-viewer"] {
    display: none !important;
}

/* Hide old viewer buttons if they are separate */
button[onclick*="360"],
button[onclick*="3D"],
button[onclick*="3d"],
a[href*="360"],
a[href*="3d-view"] {
    display: none !important;
}

/* =========================================================
   AquaLinked Bookstore - Sample page Georgia + justified text
   ========================================================= */

.sample-reader,
.sample-page,
.sample-content,
.sample-introduction,
.sample-intro,
.document-introduction,
.document-description,
.book-sample,
.reader-content,
.reader-introduction,
.documents-page,
.documents-page p,
.view-document-page,
.view-document-page p {
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.sample-reader p,
.sample-page p,
.sample-content p,
.sample-introduction,
.sample-intro,
.document-introduction,
.document-description,
.book-sample p,
.reader-content p,
.reader-introduction,
.documents-page p,
.view-document-page p {
    text-align: justify !important;
    text-justify: inter-word;
    line-height: 1.75 !important;
}

/* Also force the old duplicated 3D/360 containers invisible when class names exist */
.product-360,
.product-3d,
.product-viewers,
.product-viewer,
.book-3d,
.book-360-view,
.product-rotation,
.rotation-view,
.product-360-view,
.product-rotation-view,
[data-viewer="3d"],
[data-viewer="360"],
[data-section="3d"],
[data-section="360"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* =========================================================
   AquaLinked Bookstore - Final removal of old automatic 3D/360 viewers
   Manual uploaded 3D book images should be used instead.
   ========================================================= */

.product-360,
.product-3d,
.product-viewer-3d,
.product-viewers,
.product-viewer,
.product-rotation,
.product-rotation-view,
.product-360-view,
.book-360-view,
.book-3d-view,
.rotation-view,
.three-d-view,
.viewer-3d,
.view-3d,
.old-3d-view,
.old-360-view,
[data-viewer="3d"],
[data-viewer="360"],
[data-section="3d"],
[data-section="360"],
[data-role="3d-viewer"],
[data-role="360-viewer"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* =========================================================
   AquaLinked Bookstore - Product description readable layout
   Fix disproportionate full-width lower product text
   ========================================================= */

.product-description,
.product-detail-description,
.product-description-section,
.product-long-description,
.book-description,
.description-section,
.product-content,
.product-extra-description {
    max-width: 980px !important;
    margin: 34px auto !important;
    padding: 24px 28px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.product-description h2,
.product-detail-description h2,
.product-description-section h2,
.product-long-description h2,
.book-description h2,
.description-section h2,
.product-content h2,
.product-extra-description h2 {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin: 0 0 16px !important;
    color: #063f36 !important;
}

.product-description p,
.product-detail-description p,
.product-description-section p,
.product-long-description p,
.book-description p,
.description-section p,
.product-content p,
.product-extra-description p {
    max-width: 900px !important;
    margin: 0 0 16px !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    color: #1f2937 !important;
}

/* If the lower description is printed directly without a special class */
main > h2,
main > h3 {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

main > p {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
    text-align: justify !important;
}

/* Product video should also align with the same readable width */
.product-video,
.video-section,
.product-video-section {
    max-width: 980px !important;
    margin: 28px auto !important;
    padding: 20px 24px !important;
}

/* Mobile */
@media (max-width: 760px) {
    .product-description,
    .product-detail-description,
    .product-description-section,
    .product-long-description,
    .book-description,
    .description-section,
    .product-content,
    .product-extra-description {
        max-width: calc(100% - 24px) !important;
        padding: 18px !important;
        margin: 24px auto !important;
    }

    .product-description p,
    .product-detail-description p,
    .product-description-section p,
    .product-long-description p,
    .book-description p,
    .description-section p,
    .product-content p,
    .product-extra-description p,
    main > p {
        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.75 !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Smaller elegant lower text card
   Keeps the book/product card visually dominant
   ========================================================= */

.product-description,
.product-detail-description,
.product-description-section,
.product-long-description,
.book-description,
.description-section,
.product-content,
.product-extra-description {
    max-width: 760px !important;
    margin: 34px auto 26px auto !important;
    padding: 22px 26px !important;
    background: #ffffff !important;
    border: 1px solid #d8e8e3 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.product-description h2,
.product-detail-description h2,
.product-description-section h2,
.product-long-description h2,
.book-description h2,
.description-section h2,
.product-content h2,
.product-extra-description h2 {
    font-size: 20px !important;
    margin-bottom: 14px !important;
    color: #063f36 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.product-description p,
.product-detail-description p,
.product-description-section p,
.product-long-description p,
.book-description p,
.description-section p,
.product-content p,
.product-extra-description p {
    max-width: 700px !important;
    margin: 0 0 14px !important;
    font-size: 15.5px !important;
    line-height: 1.8 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    color: #1f2937 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* If product description is printed directly as main > p */
main > p {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 15.5px !important;
    line-height: 1.8 !important;
    text-align: justify !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

main > h2,
main > h3 {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* Product video should align under the smaller text width */
.product-video,
.video-section,
.product-video-section {
    max-width: 760px !important;
    margin: 26px auto !important;
    padding: 18px 22px !important;
}

/* Mobile */
@media (max-width: 760px) {
    .product-description,
    .product-detail-description,
    .product-description-section,
    .product-long-description,
    .book-description,
    .description-section,
    .product-content,
    .product-extra-description {
        max-width: calc(100% - 24px) !important;
        padding: 18px !important;
    }

    .product-description p,
    .product-detail-description p,
    .product-description-section p,
    .product-long-description p,
    .book-description p,
    .description-section p,
    .product-content p,
    .product-extra-description p,
    main > p {
        max-width: 100% !important;
        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.75 !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Forced smaller product description card
   ========================================================= */

.al-product-description-card-fixed {
    max-width: 760px !important;
    width: calc(100% - 40px) !important;
    margin: 34px auto 28px auto !important;
    padding: 24px 28px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07) !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.al-product-description-card-fixed h2,
.al-product-description-card-fixed h3,
.al-product-description-card-fixed h4 {
    margin: 0 0 16px 0 !important;
    color: #063f36 !important;
    font-size: 21px !important;
    line-height: 1.3 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.al-product-description-card-fixed p,
.al-product-description-card-fixed div,
.al-product-description-card-fixed li {
    max-width: 700px !important;
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    color: #1f2937 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

@media (max-width: 760px) {
    .al-product-description-card-fixed {
        width: calc(100% - 24px) !important;
        padding: 18px !important;
    }

    .al-product-description-card-fixed p,
    .al-product-description-card-fixed div,
    .al-product-description-card-fixed li {
        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.75 !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Product Information and Technical Details card
   Same elegant lower-card style as Product Description
   ========================================================= */

.al-product-info-tech-card-fixed {
    max-width: 760px !important;
    width: calc(100% - 40px) !important;
    margin: 28px auto 28px auto !important;
    padding: 24px 28px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07) !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.al-product-info-tech-card-fixed h2,
.al-product-info-tech-card-fixed h3,
.al-product-info-tech-card-fixed h4 {
    margin: 0 0 16px 0 !important;
    color: #063f36 !important;
    font-size: 21px !important;
    line-height: 1.3 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.al-product-info-tech-card-fixed p,
.al-product-info-tech-card-fixed div,
.al-product-info-tech-card-fixed li,
.al-product-info-tech-card-fixed table,
.al-product-info-tech-card-fixed td,
.al-product-info-tech-card-fixed th {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    color: #1f2937 !important;
}

.al-product-info-tech-card-fixed p,
.al-product-info-tech-card-fixed div,
.al-product-info-tech-card-fixed li {
    max-width: 700px !important;
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
}

.al-product-info-tech-card-fixed table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 12px !important;
    font-size: 15px !important;
}

.al-product-info-tech-card-fixed th,
.al-product-info-tech-card-fixed td {
    padding: 10px 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
    vertical-align: top !important;
    text-align: left !important;
}

.al-product-info-tech-card-fixed th {
    color: #064e3b !important;
    font-weight: 700 !important;
    width: 34% !important;
}

@media (max-width: 760px) {
    .al-product-info-tech-card-fixed {
        width: calc(100% - 24px) !important;
        padding: 18px !important;
    }

    .al-product-info-tech-card-fixed p,
    .al-product-info-tech-card-fixed div,
    .al-product-info-tech-card-fixed li {
        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.75 !important;
    }

    .al-product-info-tech-card-fixed th,
    .al-product-info-tech-card-fixed td {
        display: block !important;
        width: 100% !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Forced Technical Details centered card
   ========================================================= */

.al-tech-details-card-forced {
    max-width: 760px !important;
    width: calc(100% - 40px) !important;
    margin: 30px auto 34px auto !important;
    padding: 24px 28px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07) !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.al-tech-details-card-forced h1,
.al-tech-details-card-forced h2,
.al-tech-details-card-forced h3,
.al-tech-details-card-forced h4,
.al-tech-details-card-forced strong,
.al-tech-details-card-forced b {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    color: #063f36 !important;
    line-height: 1.35 !important;
}

.al-tech-details-card-forced h1,
.al-tech-details-card-forced h2,
.al-tech-details-card-forced h3,
.al-tech-details-card-forced h4 {
    margin: 18px 0 12px 0 !important;
    font-size: 21px !important;
}

.al-tech-details-card-forced h1:first-child,
.al-tech-details-card-forced h2:first-child,
.al-tech-details-card-forced h3:first-child,
.al-tech-details-card-forced h4:first-child {
    margin-top: 0 !important;
}

.al-tech-details-card-forced p,
.al-tech-details-card-forced div,
.al-tech-details-card-forced li {
    max-width: 700px !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    color: #1f2937 !important;
}

.al-tech-details-card-forced p {
    margin: 0 0 14px 0 !important;
}

@media (max-width: 760px) {
    .al-tech-details-card-forced {
        width: calc(100% - 24px) !important;
        padding: 18px !important;
    }

    .al-tech-details-card-forced p,
    .al-tech-details-card-forced div,
    .al-tech-details-card-forced li {
        max-width: 100% !important;
        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.75 !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Elegant Related Books / Store Items
   ========================================================= */

.al-related-products,
.related-products,
.related-books,
.related-items,
.product-related-products,
.related-section {
    max-width: 1180px !important;
    width: calc(100% - 44px) !important;
    margin: 36px auto 46px auto !important;
    padding: 26px 28px 32px !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border: 1px solid #dbece7 !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07) !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.al-related-products h2,
.related-products h2,
.related-books h2,
.related-items h2,
.product-related-products h2,
.related-section h2 {
    margin: 0 0 8px 0 !important;
    color: #064e3b !important;
    font-size: 26px !important;
    line-height: 1.25 !important;
    letter-spacing: .2px !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.al-related-products > p,
.related-products > p,
.related-books > p,
.related-items > p,
.product-related-products > p,
.related-section > p {
    margin: 0 0 22px 0 !important;
    max-width: 780px !important;
    color: #475569 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* Related grid */
.related-products-grid,
.related-grid,
.related-items-grid,
.product-related-grid,
.related-section .products-grid,
.related-section .product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
}

/* Related cards */
.related-products .product-card,
.related-books .product-card,
.related-items .product-card,
.product-related-products .product-card,
.related-section .product-card,
.related-products article,
.related-books article,
.related-items article,
.product-related-products article,
.related-section article {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 430px !important;
    padding: 0 0 18px 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #d9e8e3 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.related-products .product-card:hover,
.related-books .product-card:hover,
.related-items .product-card:hover,
.product-related-products .product-card:hover,
.related-section .product-card:hover,
.related-products article:hover,
.related-books article:hover,
.related-items article:hover,
.product-related-products article:hover,
.related-section article:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10) !important;
    border-color: #9fd4c3 !important;
}

/* Image area */
.related-products .product-card img,
.related-books .product-card img,
.related-items .product-card img,
.product-related-products .product-card img,
.related-section .product-card img,
.related-products article img,
.related-books article img,
.related-items article img,
.product-related-products article img,
.related-section article img {
    width: 100% !important;
    height: 190px !important;
    object-fit: contain !important;
    background: #f8fafc !important;
    padding: 10px !important;
    border-bottom: 1px solid #edf2f1 !important;
}

/* Text inside related cards */
.related-products .product-card h3,
.related-books .product-card h3,
.related-items .product-card h3,
.product-related-products .product-card h3,
.related-section .product-card h3,
.related-products article h3,
.related-books article h3,
.related-items article h3,
.product-related-products article h3,
.related-section article h3 {
    margin: 14px 16px 8px !important;
    color: #062f2a !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.related-products .product-card p,
.related-books .product-card p,
.related-items .product-card p,
.product-related-products .product-card p,
.related-section .product-card p,
.related-products article p,
.related-books article p,
.related-items article p,
.product-related-products article p,
.related-section article p {
    margin: 0 16px 10px !important;
    color: #334155 !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* Category pill */
.related-products .badge,
.related-books .badge,
.related-items .badge,
.product-related-products .badge,
.related-section .badge,
.related-products .category,
.related-books .category,
.related-items .category,
.product-related-products .category,
.related-section .category {
    display: inline-block !important;
    align-self: flex-start !important;
    margin: 14px 16px 4px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Price */
.related-products .price,
.related-books .price,
.related-items .price,
.product-related-products .price,
.related-section .price {
    margin: 4px 16px 12px !important;
    color: #064e3b !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

/* Rating box */
.related-products .rating-box,
.related-books .rating-box,
.related-items .rating-box,
.product-related-products .rating-box,
.related-section .rating-box,
.related-products .reviews-box,
.related-books .reviews-box,
.related-items .reviews-box,
.product-related-products .reviews-box,
.related-section .reviews-box {
    margin: 10px 16px 14px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: #fffaf0 !important;
    border: 1px solid #fde6bd !important;
}

/* Buttons */
.related-products .btn,
.related-books .btn,
.related-items .btn,
.product-related-products .btn,
.related-section .btn,
.related-products a,
.related-books a,
.related-items a,
.product-related-products a,
.related-section a {
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* Make View Details elegant, not huge circle */
.related-products a[href*="product.php"],
.related-books a[href*="product.php"],
.related-items a[href*="product.php"],
.product-related-products a[href*="product.php"],
.related-section a[href*="product.php"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 120px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: auto 16px 10px !important;
    padding: 9px 16px !important;
    border-radius: 999px !important;
    background: #f4d85f !important;
    color: #064e3b !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Add to cart small pill */
.related-products a[href*="cart"],
.related-books a[href*="cart"],
.related-items a[href*="cart"],
.product-related-products a[href*="cart"],
.related-section a[href*="cart"],
.related-products button,
.related-books button,
.related-items button,
.product-related-products button,
.related-section button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    margin: 6px 16px 0 !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    border: none !important;
    background: #efd65d !important;
    color: #064e3b !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

/* Mobile */
@media (max-width: 760px) {
    .al-related-products,
    .related-products,
    .related-books,
    .related-items,
    .product-related-products,
    .related-section {
        width: calc(100% - 22px) !important;
        padding: 20px 14px 24px !important;
        border-radius: 18px !important;
    }

    .related-products-grid,
    .related-grid,
    .related-items-grid,
    .product-related-grid,
    .related-section .products-grid,
    .related-section .product-grid {
        grid-template-columns: 1fr !important;
    }

    .related-products .product-card,
    .related-books .product-card,
    .related-items .product-card,
    .product-related-products .product-card,
    .related-section .product-card,
    .related-products article,
    .related-books article,
    .related-items article,
    .product-related-products article,
    .related-section article {
        min-height: auto !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Premium Related Items Cards
   More elegant, closer to main product page style
   ========================================================= */

.related-section,
.related-products,
.product-related-products,
.related-books,
.related-items {
    max-width: 1080px !important;
    width: calc(100% - 60px) !important;
    margin: 42px auto 54px auto !important;
    padding: 30px 34px 36px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.related-section h2,
.related-products h2,
.product-related-products h2,
.related-books h2,
.related-items h2 {
    max-width: 900px !important;
    margin: 0 auto 8px auto !important;
    color: #063f36 !important;
    font-size: 25px !important;
    line-height: 1.25 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.related-section > p,
.related-products > p,
.product-related-products > p,
.related-books > p,
.related-items > p {
    max-width: 900px !important;
    margin: 0 auto 24px auto !important;
    color: #475569 !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
}

/* grid: calmer, not too wide */
.related-products-grid,
.related-grid,
.related-items-grid,
.product-related-grid,
.related-section .products-grid,
.related-section .product-grid {
    max-width: 980px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
}

/* card */
.related-section .product-card,
.related-products .product-card,
.product-related-products .product-card,
.related-books .product-card,
.related-items .product-card,
.related-section article,
.related-products article,
.product-related-products article,
.related-books article,
.related-items article {
    display: flex !important;
    flex-direction: column !important;
    min-height: 390px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #dbe8e4 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
}

/* remove exaggerated movement */
.related-section .product-card:hover,
.related-products .product-card:hover,
.product-related-products .product-card:hover,
.related-books .product-card:hover,
.related-items .product-card:hover,
.related-section article:hover,
.related-products article:hover,
.product-related-products article:hover,
.related-books article:hover,
.related-items article:hover {
    transform: none !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09) !important;
    border-color: #9fd4c3 !important;
}

/* image: elegant book/product display */
.related-section .product-card img,
.related-products .product-card img,
.product-related-products .product-card img,
.related-books .product-card img,
.related-items .product-card img,
.related-section article img,
.related-products article img,
.product-related-products article img,
.related-books article img,
.related-items article img {
    width: 100% !important;
    height: 170px !important;
    object-fit: contain !important;
    padding: 14px !important;
    background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
    border-bottom: 1px solid #eef4f2 !important;
}

/* inner spacing */
.related-section .product-card > *,
.related-products .product-card > *,
.product-related-products .product-card > *,
.related-books .product-card > *,
.related-items .product-card > *,
.related-section article > *,
.related-products article > *,
.product-related-products article > *,
.related-books article > *,
.related-items article > * {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

/* category pill */
.related-section .badge,
.related-products .badge,
.product-related-products .badge,
.related-books .badge,
.related-items .badge,
.related-section .category,
.related-products .category,
.product-related-products .category,
.related-books .category,
.related-items .category {
    width: fit-content !important;
    margin-top: 14px !important;
    margin-bottom: 8px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
}

/* title */
.related-section h3,
.related-products h3,
.product-related-products h3,
.related-books h3,
.related-items h3 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    color: #062f2a !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    min-height: 46px !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* price */
.related-section .price,
.related-products .price,
.product-related-products .price,
.related-books .price,
.related-items .price {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    color: #064e3b !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

/* reviews: reduce the large orange block */
.related-section .rating-box,
.related-products .rating-box,
.product-related-products .rating-box,
.related-books .rating-box,
.related-items .rating-box,
.related-section .reviews-box,
.related-products .reviews-box,
.product-related-products .reviews-box,
.related-books .reviews-box,
.related-items .reviews-box {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: #fffdf5 !important;
    border: 1px solid #f4dfb4 !important;
    font-size: 13px !important;
}

/* all card links should not become huge circles */
.related-section a,
.related-products a,
.product-related-products a,
.related-books a,
.related-items a {
    border-radius: 999px !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* View Details button */
.related-section a[href*="product.php"],
.related-products a[href*="product.php"],
.product-related-products a[href*="product.php"],
.related-books a[href*="product.php"],
.related-items a[href*="product.php"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 118px !important;
    margin-top: auto !important;
    margin-bottom: 8px !important;
    padding: 9px 15px !important;
    background: #f3d65c !important;
    color: #064e3b !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Add to cart button */
.related-section a[href*="cart"],
.related-products a[href*="cart"],
.product-related-products a[href*="cart"],
.related-books a[href*="cart"],
.related-items a[href*="cart"],
.related-section button,
.related-products button,
.product-related-products button,
.related-books button,
.related-items button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    margin-top: 4px !important;
    margin-bottom: 16px !important;
    padding: 8px 15px !important;
    background: #f3d65c !important;
    color: #064e3b !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

/* keep small text neat */
.related-section p,
.related-products p,
.product-related-products p,
.related-books p,
.related-items p {
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* mobile */
@media (max-width: 760px) {
    .related-section,
    .related-products,
    .product-related-products,
    .related-books,
    .related-items {
        width: calc(100% - 24px) !important;
        padding: 22px 16px 26px !important;
    }

    .related-products-grid,
    .related-grid,
    .related-items-grid,
    .product-related-grid,
    .related-section .products-grid,
    .related-section .product-grid {
        grid-template-columns: 1fr !important;
    }

    .related-section .product-card,
    .related-products .product-card,
    .product-related-products .product-card,
    .related-books .product-card,
    .related-items .product-card,
    .related-section article,
    .related-products article,
    .product-related-products article,
    .related-books article,
    .related-items article {
        min-height: auto !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Elegant horizontal scroll related items
   Allows many related books/products without destroying layout
   ========================================================= */

.related-section,
.related-products,
.product-related-products,
.related-books,
.related-items {
    max-width: 1080px !important;
    width: calc(100% - 60px) !important;
    margin: 42px auto 54px auto !important;
    padding: 30px 34px 34px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    overflow: hidden !important;
}

/* Header text */
.related-section h2,
.related-products h2,
.product-related-products h2,
.related-books h2,
.related-items h2 {
    margin: 0 0 8px 0 !important;
    color: #063f36 !important;
    font-size: 25px !important;
    line-height: 1.25 !important;
}

.related-section > p,
.related-products > p,
.product-related-products > p,
.related-books > p,
.related-items > p {
    margin: 0 0 22px 0 !important;
    color: #475569 !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
}

/* Horizontal scroll row */
.related-products-grid,
.related-grid,
.related-items-grid,
.product-related-grid,
.related-section .products-grid,
.related-section .product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    padding: 6px 4px 18px 4px !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Beautiful scrollbar */
.related-products-grid::-webkit-scrollbar,
.related-grid::-webkit-scrollbar,
.related-items-grid::-webkit-scrollbar,
.product-related-grid::-webkit-scrollbar,
.related-section .products-grid::-webkit-scrollbar,
.related-section .product-grid::-webkit-scrollbar {
    height: 10px !important;
}

.related-products-grid::-webkit-scrollbar-track,
.related-grid::-webkit-scrollbar-track,
.related-items-grid::-webkit-scrollbar-track,
.product-related-grid::-webkit-scrollbar-track,
.related-section .products-grid::-webkit-scrollbar-track,
.related-section .product-grid::-webkit-scrollbar-track {
    background: #eef6f3 !important;
    border-radius: 999px !important;
}

.related-products-grid::-webkit-scrollbar-thumb,
.related-grid::-webkit-scrollbar-thumb,
.related-items-grid::-webkit-scrollbar-thumb,
.product-related-grid::-webkit-scrollbar-thumb,
.related-section .products-grid::-webkit-scrollbar-thumb,
.related-section .product-grid::-webkit-scrollbar-thumb {
    background: #0f766e !important;
    border-radius: 999px !important;
}

/* Cards become fixed elegant scroll cards */
.related-section .product-card,
.related-products .product-card,
.product-related-products .product-card,
.related-books .product-card,
.related-items .product-card,
.related-section article,
.related-products article,
.product-related-products article,
.related-books article,
.related-items article {
    flex: 0 0 250px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    min-height: 390px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #dbe8e4 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
    padding: 0 !important;
}

/* Card hover */
.related-section .product-card:hover,
.related-products .product-card:hover,
.product-related-products .product-card:hover,
.related-books .product-card:hover,
.related-items .product-card:hover,
.related-section article:hover,
.related-products article:hover,
.product-related-products article:hover,
.related-books article:hover,
.related-items article:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10) !important;
    border-color: #9fd4c3 !important;
}

/* Image area */
.related-section .product-card img,
.related-products .product-card img,
.product-related-products .product-card img,
.related-books .product-card img,
.related-items .product-card img,
.related-section article img,
.related-products article img,
.product-related-products article img,
.related-books article img,
.related-items article img {
    width: 100% !important;
    height: 165px !important;
    object-fit: contain !important;
    padding: 14px !important;
    background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
    border-bottom: 1px solid #eef4f2 !important;
}

/* Inner spacing */
.related-section .product-card > *,
.related-products .product-card > *,
.product-related-products .product-card > *,
.related-books .product-card > *,
.related-items .product-card > *,
.related-section article > *,
.related-products article > *,
.product-related-products article > *,
.related-books article > *,
.related-items article > * {
    margin-left: 15px !important;
    margin-right: 15px !important;
}

/* Title */
.related-section h3,
.related-products h3,
.product-related-products h3,
.related-books h3,
.related-items h3 {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    color: #062f2a !important;
    font-size: 16.5px !important;
    line-height: 1.35 !important;
    min-height: 44px !important;
}

/* Price */
.related-section .price,
.related-products .price,
.product-related-products .price,
.related-books .price,
.related-items .price {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    color: #064e3b !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

/* Category pill */
.related-section .badge,
.related-products .badge,
.product-related-products .badge,
.related-books .badge,
.related-items .badge,
.related-section .category,
.related-products .category,
.product-related-products .category,
.related-books .category,
.related-items .category {
    width: fit-content !important;
    margin-top: 12px !important;
    margin-bottom: 6px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
}

/* Review box smaller */
.related-section .rating-box,
.related-products .rating-box,
.product-related-products .rating-box,
.related-books .rating-box,
.related-items .rating-box,
.related-section .reviews-box,
.related-products .reviews-box,
.product-related-products .reviews-box,
.related-books .reviews-box,
.related-items .reviews-box {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: #fffdf5 !important;
    border: 1px solid #f4dfb4 !important;
    font-size: 13px !important;
}

/* Buttons */
.related-section a[href*="product.php"],
.related-products a[href*="product.php"],
.product-related-products a[href*="product.php"],
.related-books a[href*="product.php"],
.related-items a[href*="product.php"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-width: 112px !important;
    margin-top: auto !important;
    margin-bottom: 8px !important;
    padding: 8px 14px !important;
    background: #f3d65c !important;
    color: #064e3b !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.related-section a[href*="cart"],
.related-products a[href*="cart"],
.product-related-products a[href*="cart"],
.related-books a[href*="cart"],
.related-items a[href*="cart"],
.related-section button,
.related-products button,
.product-related-products button,
.related-books button,
.related-items button {
    width: fit-content !important;
    margin-top: 4px !important;
    margin-bottom: 16px !important;
    padding: 8px 14px !important;
    background: #f3d65c !important;
    color: #064e3b !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

/* Small note showing scroll is possible */
.related-section::after,
.related-products::after,
.product-related-products::after,
.related-books::after,
.related-items::after {
    content: "Scroll sideways to explore more items →";
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 13px;
    font-style: italic;
}

/* Mobile */
@media (max-width: 760px) {
    .related-section,
    .related-products,
    .product-related-products,
    .related-books,
    .related-items {
        width: calc(100% - 24px) !important;
        padding: 22px 16px 28px !important;
    }

    .related-section .product-card,
    .related-products .product-card,
    .product-related-products .product-card,
    .related-books .product-card,
    .related-items .product-card,
    .related-section article,
    .related-products article,
    .product-related-products article,
    .related-books article,
    .related-items article {
        flex: 0 0 230px !important;
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Cancel horizontal scroll related items
   Restore elegant premium grid cards
   ========================================================= */

.related-products-grid,
.related-grid,
.related-items-grid,
.product-related-grid,
.related-section .products-grid,
.related-section .product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 22px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 980px !important;
}

/* Remove scroll note */
.related-section::after,
.related-products::after,
.product-related-products::after,
.related-books::after,
.related-items::after {
    content: none !important;
    display: none !important;
}

/* Restore elegant fixed but not scroll-card behavior */
.related-section .product-card,
.related-products .product-card,
.product-related-products .product-card,
.related-books .product-card,
.related-items .product-card,
.related-section article,
.related-products article,
.product-related-products article,
.related-books article,
.related-items article {
    flex: initial !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 390px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #dbe8e4 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
    padding: 0 !important;
}

/* Related section elegant container */
.related-section,
.related-products,
.product-related-products,
.related-books,
.related-items {
    max-width: 1080px !important;
    width: calc(100% - 60px) !important;
    margin: 42px auto 54px auto !important;
    padding: 30px 34px 36px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
    overflow: visible !important;
}

/* Keep images elegant */
.related-section .product-card img,
.related-products .product-card img,
.product-related-products .product-card img,
.related-books .product-card img,
.related-items .product-card img,
.related-section article img,
.related-products article img,
.product-related-products article img,
.related-books article img,
.related-items article img {
    width: 100% !important;
    height: 170px !important;
    object-fit: contain !important;
    padding: 14px !important;
    background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
    border-bottom: 1px solid #eef4f2 !important;
}

/* Smaller elegant View Details button */
.related-section a[href*="product.php"],
.related-products a[href*="product.php"],
.product-related-products a[href*="product.php"],
.related-books a[href*="product.php"],
.related-items a[href*="product.php"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-width: 112px !important;
    margin-top: auto !important;
    margin-bottom: 8px !important;
    padding: 8px 14px !important;
    background: #f3d65c !important;
    color: #064e3b !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

/* Mobile */
@media (max-width: 760px) {
    .related-products-grid,
    .related-grid,
    .related-items-grid,
    .product-related-grid,
    .related-section .products-grid,
    .related-section .product-grid {
        grid-template-columns: 1fr !important;
    }

    .related-section,
    .related-products,
    .product-related-products,
    .related-books,
    .related-items {
        width: calc(100% - 24px) !important;
        padding: 22px 16px 26px !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Amazon-like horizontal related row
   Keep elegant cards, but place many cards in one row with scroll
   ========================================================= */

/* Related section container stays elegant */
.related-section,
.related-products,
.product-related-products,
.related-books,
.related-items {
    overflow: hidden !important;
}

/* Only change the layout container */
.related-products-grid,
.related-grid,
.related-items-grid,
.product-related-grid,
.related-section .products-grid,
.related-section .product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 22px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 4px 18px 4px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    scroll-behavior: smooth !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

/* Elegant scrollbar below */
.related-products-grid::-webkit-scrollbar,
.related-grid::-webkit-scrollbar,
.related-items-grid::-webkit-scrollbar,
.product-related-grid::-webkit-scrollbar,
.related-section .products-grid::-webkit-scrollbar,
.related-section .product-grid::-webkit-scrollbar {
    height: 11px !important;
}

.related-products-grid::-webkit-scrollbar-track,
.related-grid::-webkit-scrollbar-track,
.related-items-grid::-webkit-scrollbar-track,
.product-related-grid::-webkit-scrollbar-track,
.related-section .products-grid::-webkit-scrollbar-track,
.related-section .product-grid::-webkit-scrollbar-track {
    background: #eaf4f1 !important;
    border-radius: 999px !important;
}

.related-products-grid::-webkit-scrollbar-thumb,
.related-grid::-webkit-scrollbar-thumb,
.related-items-grid::-webkit-scrollbar-thumb,
.product-related-grid::-webkit-scrollbar-thumb,
.related-section .products-grid::-webkit-scrollbar-thumb,
.related-section .product-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #0f766e, #0b5f58) !important;
    border-radius: 999px !important;
}

/* Keep current beautiful card look, but make each one fixed-width */
.related-section .product-card,
.related-products .product-card,
.product-related-products .product-card,
.related-books .product-card,
.related-items .product-card,
.related-section article,
.related-products article,
.product-related-products article,
.related-books article,
.related-items article {
    flex: 0 0 255px !important;
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
    min-height: 390px !important;
}

/* Keep the buttons aligned nicely inside the scroll cards */
.related-section .product-card a[href*="product.php"],
.related-products .product-card a[href*="product.php"],
.product-related-products .product-card a[href*="product.php"],
.related-books .product-card a[href*="product.php"],
.related-items .product-card a[href*="product.php"],
.related-section article a[href*="product.php"],
.related-products article a[href*="product.php"],
.product-related-products article a[href*="product.php"],
.related-books article a[href*="product.php"],
.related-items article a[href*="product.php"] {
    margin-top: auto !important;
}

/* Optional small note */
.related-section::after,
.related-products::after,
.product-related-products::after,
.related-books::after,
.related-items::after {
    content: "Scroll to explore more items →";
    display: block;
    margin-top: 10px;
    color: #64748b;
    font-size: 13px;
    font-style: italic;
}

/* Mobile */
@media (max-width: 760px) {
    .related-section .product-card,
    .related-products .product-card,
    .product-related-products .product-card,
    .related-books .product-card,
    .related-items .product-card,
    .related-section article,
    .related-products article,
    .product-related-products article,
    .related-books article,
    .related-items article {
        flex: 0 0 230px !important;
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - FINAL elegant Amazon-like related row
   Keeps the premium card style but allows horizontal scroll
   ========================================================= */

.al-related-scroll-final {
    max-width: 1080px !important;
    width: calc(100% - 60px) !important;
    margin: 42px auto 54px auto !important;
    padding: 30px 34px 34px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    overflow: hidden !important;
}

.al-related-scroll-final h2,
.al-related-scroll-final h3 {
    margin: 0 0 8px 0 !important;
    color: #063f36 !important;
    font-size: 25px !important;
    line-height: 1.25 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.al-related-scroll-final > p {
    margin: 0 0 22px 0 !important;
    color: #475569 !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* The scroll row */
.al-related-scroll-row-final {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 4px 20px 4px !important;
    margin: 0 !important;
    scroll-behavior: smooth !important;
    align-items: stretch !important;
}

/* Beautiful scrollbar */
.al-related-scroll-row-final::-webkit-scrollbar {
    height: 10px !important;
}

.al-related-scroll-row-final::-webkit-scrollbar-track {
    background: #eaf4f1 !important;
    border-radius: 999px !important;
}

.al-related-scroll-row-final::-webkit-scrollbar-thumb {
    background: #0f766e !important;
    border-radius: 999px !important;
}

/* Premium small card */
.al-related-card-final {
    flex: 0 0 250px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    min-height: 390px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #dbe8e4 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

.al-related-card-final:hover {
    transform: none !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10) !important;
    border-color: #9fd4c3 !important;
}

/* Image area */
.al-related-card-final img {
    width: 100% !important;
    height: 165px !important;
    object-fit: contain !important;
    padding: 14px !important;
    background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
    border-bottom: 1px solid #eef4f2 !important;
    margin: 0 !important;
}

/* Inner spacing */
.al-related-card-final > *:not(img) {
    margin-left: 15px !important;
    margin-right: 15px !important;
}

/* Category pill */
.al-related-card-final .badge,
.al-related-card-final .category {
    width: fit-content !important;
    margin-top: 12px !important;
    margin-bottom: 6px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
}

/* Title */
.al-related-card-final h3 {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    color: #062f2a !important;
    font-size: 16.5px !important;
    line-height: 1.35 !important;
    min-height: 44px !important;
}

/* Price */
.al-related-card-final .price {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    color: #064e3b !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

/* Review box: elegant and small */
.al-related-card-final .rating-box,
.al-related-card-final .reviews-box {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: #fffdf5 !important;
    border: 1px solid #f4dfb4 !important;
    font-size: 13px !important;
}

/* Force View Details to be a small pill, not a large circle */
.al-related-card-final a[href*="product.php"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-width: 112px !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: auto !important;
    margin-bottom: 8px !important;
    padding: 8px 14px !important;
    background: #f3d65c !important;
    color: #064e3b !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Add to cart pill */
.al-related-card-final a[href*="cart"],
.al-related-card-final button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 16px !important;
    padding: 8px 14px !important;
    background: #f3d65c !important;
    color: #064e3b !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

/* Scroll note */
.al-related-scroll-final::after {
    content: "Scroll sideways to explore more items →";
    display: block;
    margin-top: 10px;
    color: #64748b;
    font-size: 13px;
    font-style: italic;
}

/* Mobile */
@media (max-width: 760px) {
    .al-related-scroll-final {
        width: calc(100% - 24px) !important;
        padding: 22px 16px 28px !important;
    }

    .al-related-card-final {
        flex: 0 0 230px !important;
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Stabilized elegant related cards
   Prevent later scripts from returning them to old ugly style
   ========================================================= */

.al-related-stable-section {
    max-width: 1080px !important;
    width: calc(100% - 60px) !important;
    margin: 42px auto 54px auto !important;
    padding: 30px 34px 34px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    overflow: hidden !important;
}

.al-related-stable-section h2,
.al-related-stable-section h3 {
    margin: 0 0 8px 0 !important;
    color: #063f36 !important;
    font-size: 25px !important;
    line-height: 1.25 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.al-related-stable-section > p {
    margin: 0 0 22px 0 !important;
    color: #475569 !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
}

/* Amazon-like row, but with the elegant cards */
.al-related-stable-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 4px 20px 4px !important;
    margin: 0 !important;
    scroll-behavior: smooth !important;
    align-items: stretch !important;
}

.al-related-stable-row::-webkit-scrollbar {
    height: 10px !important;
}

.al-related-stable-row::-webkit-scrollbar-track {
    background: #eaf4f1 !important;
    border-radius: 999px !important;
}

.al-related-stable-row::-webkit-scrollbar-thumb {
    background: #0f766e !important;
    border-radius: 999px !important;
}

/* Elegant stable card */
.al-related-stable-card {
    flex: 0 0 250px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    min-height: 390px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #dbe8e4 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

.al-related-stable-card:hover {
    transform: none !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10) !important;
    border-color: #9fd4c3 !important;
}

.al-related-stable-card img {
    width: 100% !important;
    height: 165px !important;
    object-fit: contain !important;
    padding: 14px !important;
    background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
    border-bottom: 1px solid #eef4f2 !important;
    margin: 0 !important;
}

.al-related-stable-card > *:not(img) {
    margin-left: 15px !important;
    margin-right: 15px !important;
}

.al-related-stable-card .badge,
.al-related-stable-card .category {
    width: fit-content !important;
    margin-top: 12px !important;
    margin-bottom: 6px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
}

.al-related-stable-card h3 {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    color: #062f2a !important;
    font-size: 16.5px !important;
    line-height: 1.35 !important;
    min-height: 44px !important;
}

.al-related-stable-card .price {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    color: #064e3b !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

.al-related-stable-card .rating-box,
.al-related-stable-card .reviews-box {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: #fffdf5 !important;
    border: 1px solid #f4dfb4 !important;
    font-size: 13px !important;
}

/* Kill the ugly giant yellow circle */
.al-related-stable-card .al-related-detail-btn,
.al-related-stable-card a[href*="product.php"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-width: 112px !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 999px !important;
    margin-top: auto !important;
    margin-bottom: 8px !important;
    padding: 8px 14px !important;
    background: #f3d65c !important;
    color: #064e3b !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.al-related-stable-card .al-related-cart-btn,
.al-related-stable-card a[href*="cart"],
.al-related-stable-card button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 16px !important;
    padding: 8px 14px !important;
    background: #f3d65c !important;
    color: #064e3b !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.al-related-stable-section::after {
    content: "Scroll sideways to explore more items →";
    display: block;
    margin-top: 10px;
    color: #64748b;
    font-size: 13px;
    font-style: italic;
}

@media (max-width: 760px) {
    .al-related-stable-section {
        width: calc(100% - 24px) !important;
        padding: 22px 16px 28px !important;
    }

    .al-related-stable-card {
        flex: 0 0 230px !important;
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Related cards fixed elegant width
   Prevent 4 cards from stretching across the whole page
   ========================================================= */

/* Related section remains elegant */
.al-related-stable-section,
.al-related-scroll-final,
.related-section,
.related-products,
.product-related-products,
.related-books,
.related-items {
    max-width: 1080px !important;
    width: calc(100% - 60px) !important;
    margin: 42px auto 54px auto !important;
    padding: 30px 34px 34px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
    overflow: hidden !important;
}

/* The row must not distribute cards from edge to edge */
.al-related-stable-row,
.al-related-scroll-row-final,
.related-products-grid,
.related-grid,
.related-items-grid,
.product-related-grid,
.related-section .products-grid,
.related-section .product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 4px 20px 4px !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    scroll-behavior: smooth !important;
}

/* Fixed elegant card size — this is the key */
.al-related-stable-card,
.al-related-card-final,
.related-section .product-card,
.related-products .product-card,
.product-related-products .product-card,
.related-books .product-card,
.related-items .product-card,
.related-section article,
.related-products article,
.product-related-products article,
.related-books article,
.related-items article {
    flex: 0 0 250px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    min-height: 390px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #dbe8e4 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Image remains proportional */
.al-related-stable-card img,
.al-related-card-final img,
.related-section .product-card img,
.related-products .product-card img,
.product-related-products .product-card img,
.related-books .product-card img,
.related-items .product-card img,
.related-section article img,
.related-products article img,
.product-related-products article img,
.related-books article img,
.related-items article img {
    width: 100% !important;
    height: 165px !important;
    object-fit: contain !important;
    padding: 14px !important;
    background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
    border-bottom: 1px solid #eef4f2 !important;
    margin: 0 !important;
}

/* Stop old giant yellow circle button */
.al-related-stable-card a[href*="product.php"],
.al-related-card-final a[href*="product.php"],
.related-section a[href*="product.php"],
.related-products a[href*="product.php"],
.product-related-products a[href*="product.php"],
.related-books a[href*="product.php"],
.related-items a[href*="product.php"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-width: 112px !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 999px !important;
    margin-top: auto !important;
    margin-bottom: 8px !important;
    padding: 8px 14px !important;
    background: #f3d65c !important;
    color: #064e3b !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Add to cart remains small */
.al-related-stable-card a[href*="cart"],
.al-related-card-final a[href*="cart"],
.related-section a[href*="cart"],
.related-products a[href*="cart"],
.product-related-products a[href*="cart"],
.related-books a[href*="cart"],
.related-items a[href*="cart"],
.al-related-stable-card button,
.al-related-card-final button,
.related-section button,
.related-products button,
.product-related-products button,
.related-books button,
.related-items button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 16px !important;
    padding: 8px 14px !important;
    background: #f3d65c !important;
    color: #064e3b !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

/* Nice scrollbar */
.al-related-stable-row::-webkit-scrollbar,
.al-related-scroll-row-final::-webkit-scrollbar,
.related-products-grid::-webkit-scrollbar,
.related-grid::-webkit-scrollbar,
.related-items-grid::-webkit-scrollbar,
.product-related-grid::-webkit-scrollbar,
.related-section .products-grid::-webkit-scrollbar,
.related-section .product-grid::-webkit-scrollbar {
    height: 10px !important;
}

.al-related-stable-row::-webkit-scrollbar-track,
.al-related-scroll-row-final::-webkit-scrollbar-track,
.related-products-grid::-webkit-scrollbar-track,
.related-grid::-webkit-scrollbar-track,
.related-items-grid::-webkit-scrollbar-track,
.product-related-grid::-webkit-scrollbar-track,
.related-section .products-grid::-webkit-scrollbar-track,
.related-section .product-grid::-webkit-scrollbar-track {
    background: #eaf4f1 !important;
    border-radius: 999px !important;
}

.al-related-stable-row::-webkit-scrollbar-thumb,
.al-related-scroll-row-final::-webkit-scrollbar-thumb,
.related-products-grid::-webkit-scrollbar-thumb,
.related-grid::-webkit-scrollbar-thumb,
.related-items-grid::-webkit-scrollbar-thumb,
.product-related-grid::-webkit-scrollbar-thumb,
.related-section .products-grid::-webkit-scrollbar-thumb,
.related-section .product-grid::-webkit-scrollbar-thumb {
    background: #0f766e !important;
    border-radius: 999px !important;
}

/* Mobile */
@media (max-width: 760px) {
    .al-related-stable-section,
    .al-related-scroll-final,
    .related-section,
    .related-products,
    .product-related-products,
    .related-books,
    .related-items {
        width: calc(100% - 24px) !important;
        padding: 22px 16px 28px !important;
    }

    .al-related-stable-card,
    .al-related-card-final,
    .related-section .product-card,
    .related-products .product-card,
    .product-related-products .product-card,
    .related-books .product-card,
    .related-items .product-card,
    .related-section article,
    .related-products article,
    .product-related-products article,
    .related-books article,
    .related-items article {
        flex: 0 0 230px !important;
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Elegant Documents / Sample Introduction
   Georgia font, justified text, readable centered card
   ========================================================= */

.al-documents-intro-elegant,
.document-description,
.document-introduction,
.sample-introduction,
.sample-intro,
.documents-intro,
.sample-description,
.documents-page .intro,
.documents-page .description,
.documents-page .content-intro {
    max-width: 760px !important;
    width: calc(100% - 40px) !important;
    margin: 28px auto 30px auto !important;
    padding: 22px 26px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07) !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.al-documents-intro-elegant h1,
.al-documents-intro-elegant h2,
.al-documents-intro-elegant h3,
.al-documents-intro-elegant h4,
.document-description h1,
.document-description h2,
.document-description h3,
.document-introduction h1,
.document-introduction h2,
.document-introduction h3,
.sample-introduction h1,
.sample-introduction h2,
.sample-introduction h3,
.sample-intro h1,
.sample-intro h2,
.sample-intro h3 {
    margin: 0 0 14px 0 !important;
    color: #063f36 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.al-documents-intro-elegant p,
.al-documents-intro-elegant div,
.al-documents-intro-elegant li,
.document-description p,
.document-introduction p,
.sample-introduction p,
.sample-intro p,
.documents-intro p,
.sample-description p,
.documents-page .intro p,
.documents-page .description p,
.documents-page .content-intro p {
    max-width: 700px !important;
    margin: 0 0 14px 0 !important;
    color: #1f2937 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
}

/* Document/sample cards should also use elegant serif text */
.documents-page,
.documents-page p,
.documents-page li,
.document-card,
.document-card p,
.document-card div,
.sample-card,
.sample-card p {
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* Keep buttons readable and centered */
.documents-page .btn,
.documents-page button,
.document-card .btn,
.sample-card .btn {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    text-align: center !important;
}

/* Mobile */
@media (max-width: 760px) {
    .al-documents-intro-elegant,
    .document-description,
    .document-introduction,
    .sample-introduction,
    .sample-intro,
    .documents-intro,
    .sample-description,
    .documents-page .intro,
    .documents-page .description,
    .documents-page .content-intro {
        width: calc(100% - 24px) !important;
        padding: 18px !important;
        margin: 22px auto !important;
    }

    .al-documents-intro-elegant p,
    .al-documents-intro-elegant div,
    .al-documents-intro-elegant li,
    .document-description p,
    .document-introduction p,
    .sample-introduction p,
    .sample-intro p,
    .documents-intro p,
    .sample-description p {
        max-width: 100% !important;
        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.75 !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Elegant Documents / Sample Introduction
   Georgia font, justified text, readable centered card
   ========================================================= */

.al-documents-intro-elegant,
.document-description,
.document-introduction,
.sample-introduction,
.sample-intro,
.documents-intro,
.sample-description,
.documents-page .intro,
.documents-page .description,
.documents-page .content-intro {
    max-width: 760px !important;
    width: calc(100% - 40px) !important;
    margin: 28px auto 30px auto !important;
    padding: 22px 26px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07) !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.al-documents-intro-elegant h1,
.al-documents-intro-elegant h2,
.al-documents-intro-elegant h3,
.al-documents-intro-elegant h4,
.document-description h1,
.document-description h2,
.document-description h3,
.document-introduction h1,
.document-introduction h2,
.document-introduction h3,
.sample-introduction h1,
.sample-introduction h2,
.sample-introduction h3,
.sample-intro h1,
.sample-intro h2,
.sample-intro h3 {
    margin: 0 0 14px 0 !important;
    color: #063f36 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.al-documents-intro-elegant p,
.al-documents-intro-elegant div,
.al-documents-intro-elegant li,
.document-description p,
.document-introduction p,
.sample-introduction p,
.sample-intro p,
.documents-intro p,
.sample-description p,
.documents-page .intro p,
.documents-page .description p,
.documents-page .content-intro p {
    max-width: 700px !important;
    margin: 0 0 14px 0 !important;
    color: #1f2937 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
}

/* Document/sample cards should also use elegant serif text */
.documents-page,
.documents-page p,
.documents-page li,
.document-card,
.document-card p,
.document-card div,
.sample-card,
.sample-card p {
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* Keep buttons readable and centered */
.documents-page .btn,
.documents-page button,
.document-card .btn,
.sample-card .btn {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    text-align: center !important;
}

/* Mobile */
@media (max-width: 760px) {
    .al-documents-intro-elegant,
    .document-description,
    .document-introduction,
    .sample-introduction,
    .sample-intro,
    .documents-intro,
    .sample-description,
    .documents-page .intro,
    .documents-page .description,
    .documents-page .content-intro {
        width: calc(100% - 24px) !important;
        padding: 18px !important;
        margin: 22px auto !important;
    }

    .al-documents-intro-elegant p,
    .al-documents-intro-elegant div,
    .al-documents-intro-elegant li,
    .document-description p,
    .document-introduction p,
    .sample-introduction p,
    .sample-intro p,
    .documents-intro p,
    .sample-description p {
        max-width: 100% !important;
        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.75 !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Force documents.php intro elegant and justified
   ========================================================= */

.al-documents-force-intro-card {
    max-width: 760px !important;
    width: calc(100% - 40px) !important;
    margin: 30px auto 32px auto !important;
    padding: 24px 28px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07) !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

.al-documents-force-intro-card h1,
.al-documents-force-intro-card h2,
.al-documents-force-intro-card h3 {
    margin: 0 0 14px 0 !important;
    color: #063f36 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.al-documents-force-intro-card p,
.al-documents-force-intro-card div,
.al-documents-force-intro-card li {
    max-width: 700px !important;
    margin: 0 0 14px 0 !important;
    color: #1f2937 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
}

/* Extra direct force for documents.php text */
body:has(.al-documents-force-intro-card) .al-documents-force-intro-card * {
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

@media (max-width: 760px) {
    .al-documents-force-intro-card {
        width: calc(100% - 24px) !important;
        padding: 18px !important;
    }

    .al-documents-force-intro-card p,
    .al-documents-force-intro-card div,
    .al-documents-force-intro-card li {
        max-width: 100% !important;
        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.75 !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Force Book Sample text justified
   documents.php sample card text
   ========================================================= */

body,
.documents-page,
.document-card,
.sample-card,
.book-sample-card,
.book-sample,
.document-item,
.sample-item {
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* The visible sample title */
.document-card h1,
.document-card h2,
.document-card h3,
.sample-card h1,
.sample-card h2,
.sample-card h3,
.book-sample-card h1,
.book-sample-card h2,
.book-sample-card h3,
.document-item h1,
.document-item h2,
.document-item h3,
.sample-item h1,
.sample-item h2,
.sample-item h3 {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    color: #063f36 !important;
    line-height: 1.3 !important;
}

/* Force all sample description paragraphs to justify */
.document-card p,
.sample-card p,
.book-sample-card p,
.book-sample p,
.document-item p,
.sample-item p,
.documents-page article p,
.documents-page section p,
.documents-page .card p,
.documents-page .document p,
.documents-page .sample p {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    line-height: 1.85 !important;
    font-size: 15.5px !important;
    color: #1f2937 !important;
}

/* If the text is inside divs instead of p tags */
.document-card div,
.sample-card div,
.book-sample-card div,
.book-sample div,
.document-item div,
.sample-item div,
.documents-page article div,
.documents-page section div,
.documents-page .card div {
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* Only long div text should justify */
.documents-page article div:not(:has(a)):not(:has(button)),
.documents-page section div:not(:has(a)):not(:has(button)),
.documents-page .card div:not(:has(a)):not(:has(button)) {
    text-align: justify !important;
    text-justify: inter-word !important;
    line-height: 1.85 !important;
}

/* Make the sample card itself elegant and readable */
.documents-page article,
.documents-page .document-card,
.documents-page .sample-card,
.documents-page .book-sample-card,
.documents-page .document-item,
.documents-page .sample-item {
    max-width: 760px !important;
    margin: 28px auto !important;
    padding: 24px 28px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07) !important;
}

/* Desktop only: justify. Mobile can remain left for readability */
@media (max-width: 760px) {
    .document-card p,
    .sample-card p,
    .book-sample-card p,
    .book-sample p,
    .document-item p,
    .sample-item p,
    .documents-page article p,
    .documents-page section p,
    .documents-page .card p,
    .documents-page .document p,
    .documents-page .sample p {
        text-align: left !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Force Book Sample text justified
   documents.php sample card text
   ========================================================= */

body,
.documents-page,
.document-card,
.sample-card,
.book-sample-card,
.book-sample,
.document-item,
.sample-item {
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* The visible sample title */
.document-card h1,
.document-card h2,
.document-card h3,
.sample-card h1,
.sample-card h2,
.sample-card h3,
.book-sample-card h1,
.book-sample-card h2,
.book-sample-card h3,
.document-item h1,
.document-item h2,
.document-item h3,
.sample-item h1,
.sample-item h2,
.sample-item h3 {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    color: #063f36 !important;
    line-height: 1.3 !important;
}

/* Force all sample description paragraphs to justify */
.document-card p,
.sample-card p,
.book-sample-card p,
.book-sample p,
.document-item p,
.sample-item p,
.documents-page article p,
.documents-page section p,
.documents-page .card p,
.documents-page .document p,
.documents-page .sample p {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    line-height: 1.85 !important;
    font-size: 15.5px !important;
    color: #1f2937 !important;
}

/* If the text is inside divs instead of p tags */
.document-card div,
.sample-card div,
.book-sample-card div,
.book-sample div,
.document-item div,
.sample-item div,
.documents-page article div,
.documents-page section div,
.documents-page .card div {
    font-family: Georgia, "Times New Roman", Times, serif !important;
}

/* Only long div text should justify */
.documents-page article div:not(:has(a)):not(:has(button)),
.documents-page section div:not(:has(a)):not(:has(button)),
.documents-page .card div:not(:has(a)):not(:has(button)) {
    text-align: justify !important;
    text-justify: inter-word !important;
    line-height: 1.85 !important;
}

/* Make the sample card itself elegant and readable */
.documents-page article,
.documents-page .document-card,
.documents-page .sample-card,
.documents-page .book-sample-card,
.documents-page .document-item,
.documents-page .sample-item {
    max-width: 760px !important;
    margin: 28px auto !important;
    padding: 24px 28px !important;
    background: #ffffff !important;
    border: 1px solid #d7e7e2 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07) !important;
}

/* Desktop only: justify. Mobile can remain left for readability */
@media (max-width: 760px) {
    .document-card p,
    .sample-card p,
    .book-sample-card p,
    .book-sample p,
    .document-item p,
    .sample-item p,
    .documents-page article p,
    .documents-page section p,
    .documents-page .card p,
    .documents-page .document p,
    .documents-page .sample p {
        text-align: left !important;
    }
}

/* =========================================================
   AquaLinked Bookstore - Keep sample/read buttons near book image
   Prevent sample button from dropping into related cards
   ========================================================= */

.product-page a[href*="sample"],
.product-detail a[href*="sample"],
.book-detail a[href*="sample"],
.product-page a[href*="view-document"],
.product-detail a[href*="view-document"],
.book-detail a[href*="view-document"],
.product-page a[href*="documents.php"],
.product-detail a[href*="documents.php"],
.book-detail a[href*="documents.php"] {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 260px !important;
    margin: 12px auto 14px auto !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    background: #f3d65c !important;
    color: #064e3b !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    z-index: 5 !important;
}

/* Keep sample/download buttons out of related-card styling */
.related-section a[href*="sample"],
.related-products a[href*="sample"],
.product-related-products a[href*="sample"],
.related-books a[href*="sample"],
.related-items a[href*="sample"],
.related-section a[href*="view-document"],
.related-products a[href*="view-document"],
.product-related-products a[href*="view-document"],
.related-books a[href*="view-document"],
.related-items a[href*="view-document"] {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
}

/* Make sure product image/action area does not collapse */
.product-main,
.product-detail-main,
.product-hero,
.product-gallery,
.product-media,
.book-cover-area,
.product-image-area {
    overflow: visible !important;
}

/* =========================================================
   AquaLinked Bookstore - Elegant Books Listing Cards
   Fix cards stretching corner-to-corner on Books/Product lists
   ========================================================= */

/* Main books/products listing container */
.products-grid,
.product-grid,
.books-grid,
.book-grid,
.store-products,
.product-list,
.books-list {
    max-width: 1220px !important;
    margin: 22px auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
    gap: 18px !important;
}

/* Product/book cards on listing pages */
.products-grid .card,
.product-grid .card,
.books-grid .card,
.book-grid .card,
.store-products .card,
.product-list .card,
.books-list .card,
.product-card,
.book-card,
.store-card {
    max-width: 590px !important;
    width: 100% !important;
    margin: 0 auto 18px auto !important;
    padding: 16px 16px 18px 16px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Image area must be elegant, not stretched corner-to-corner */
.products-grid .card img,
.product-grid .card img,
.books-grid .card img,
.book-grid .card img,
.store-products .card img,
.product-list .card img,
.books-list .card img,
.product-card img,
.book-card img,
.store-card img {
    display: block !important;
    width: auto !important;
    max-width: 72% !important;
    max-height: 190px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* If there is a grey image holder, keep it neat */
.product-image,
.book-image,
.product-thumb,
.book-thumb,
.card-image,
.image-box,
.cover-box {
    height: 175px !important;
    min-height: 175px !important;
    max-height: 190px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    margin: 0 0 14px 0 !important;
    border-radius: 18px !important;
    background: #f3f6f8 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Titles and text inside listing cards */
.product-card h2,
.product-card h3,
.book-card h2,
.book-card h3,
.store-card h2,
.store-card h3,
.products-grid .card h2,
.products-grid .card h3,
.books-grid .card h2,
.books-grid .card h3 {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    color: #064e3b !important;
    line-height: 1.15 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

/* Description should not become too long or push the card down */
.product-card p,
.book-card p,
.store-card p,
.products-grid .card p,
.books-grid .card p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #1f2937 !important;
    text-align: left !important;
    max-height: 110px !important;
    overflow: hidden !important;
}

/* View Product button clean and professional */
.product-card a,
.book-card a,
.store-card a,
.products-grid .card a,
.books-grid .card a {
    box-sizing: border-box !important;
}

/* Mobile safety */
@media (max-width: 768px) {
    .products-grid,
    .product-grid,
    .books-grid,
    .book-grid,
    .store-products,
    .product-list,
    .books-list {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .products-grid .card,
    .product-grid .card,
    .books-grid .card,
    .book-grid .card,
    .store-products .card,
    .product-list .card,
    .books-list .card,
    .product-card,
    .book-card,
    .store-card {
        max-width: 100% !important;
    }

    .product-image,
    .book-image,
    .product-thumb,
    .book-thumb,
    .card-image,
    .image-box,
    .cover-box {
        height: 160px !important;
        min-height: 160px !important;
    }
}