/* =====================================================
FILE: /01-assets/css/93-therapy-supplies.css
PAGE: /therapy-supplies.php
PURPOSE:
Beige service/product-support page styling for the
CarePlanCompass™ therapy supplies hub.

DESIGN RULE:
Beige = practical service/product support
Green = next-step/action callouts
Blue = minimal trust/structure accents only
===================================================== */

/* =====================================================
PAGE BASE
===================================================== */

.therapy-supplies-page {
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 34rem),
linear-gradient(180deg, #f7f1e7 0%, #f3eadc 48%, #efe4d3 100%);
color: #263241;
}

.therapy-supplies-page .section {
padding: 56px 0;
}

.therapy-supplies-page .container {
position: relative;
}


/* =====================================================
PAGE WIDTH CONTROL
Keeps therapy supplies body sections aligned with the
rest of the CarePlanCompass™ website.
===================================================== */

.therapy-supplies-page {
overflow-x: hidden;
}

.therapy-supplies-page .container {
width: min(100% - 40px, 1180px);
max-width: 1180px;
margin-left: auto;
margin-right: auto;
}

.therapy-supplies-page .therapy-supplies-hero__panel,
.therapy-supplies-page .therapy-supplies-disclosure__box,
.therapy-supplies-page .card,
.therapy-supplies-page .therapy-supplies-partners__panel,
.therapy-supplies-page .therapy-supplies-close__card {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}

.therapy-supplies-page .therapy-supplies-hero__copy,
.therapy-supplies-page .therapy-supplies-hero__card,
.therapy-supplies-page .therapy-supplies-step-card,
.therapy-supplies-page .therapy-supplies-category-card {
box-sizing: border-box;
}

@media (max-width: 680px) {
.therapy-supplies-page .container {
width: min(100% - 28px, 1180px);
}
}

/* =====================================================
SHARED PANELS / CARDS
===================================================== */

.therapy-supplies-hero__panel,
.therapy-supplies-hero__copy,
.therapy-supplies-hero__card,
.therapy-supplies-disclosure__box,
.therapy-supplies-partners__panel,
.therapy-supplies-close__card,
.therapy-supplies-page .card {
border: 1px solid rgba(76, 58, 35, 0.14);
border-radius: 26px;
box-shadow: 0 18px 42px rgba(53, 39, 23, 0.08);
}

.therapy-supplies-hero__copy,
.therapy-supplies-hero__card,
.therapy-supplies-disclosure__box,
.therapy-supplies-page .card {
background: rgba(255, 251, 244, 0.92);
}

.therapy-supplies-page .card-pad {
padding: 34px;
}

/* =====================================================
HERO
===================================================== */

.therapy-supplies-hero {
padding-top: 76px;
}

.therapy-supplies-hero__panel {
display: grid;
grid-template-columns: minmax(0, 1.58fr) minmax(280px, 0.82fr);
gap: 24px;
align-items: stretch;
border: 0;
box-shadow: none;
}

.therapy-supplies-hero__copy {
padding: 44px;
}

.therapy-supplies-hero__copy h1 {
max-width: 1200px;
margin: 0 0 18px;
font-size: clamp(2.1rem, 4vw, 4rem);
line-height: 1.05;
letter-spacing: -0.045em;
color: #1f2f3d;
}

.therapy-supplies-hero__lead {
max-width: 820px;
margin: 0 0 18px;
font-size: 1.13rem;
line-height: 1.65;
color: #405266;
}

.therapy-supplies-hero__note {
max-width: 880px;
margin: 0 0 24px;
padding: 16px 18px;
border-left: 5px solid #a77b43;
border-radius: 16px;
background: rgba(167, 123, 67, 0.12);
color: #3f3529;
line-height: 1.6;
}

.therapy-supplies-hero__actions,
.therapy-supplies-partners__actions,
.therapy-supplies-close__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.therapy-supplies-hero__card {
padding: 32px;
display: flex;
flex-direction: column;
justify-content: center;
background:
linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(248, 238, 222, 0.94));
}

.therapy-supplies-hero__card-kicker {
margin: 0 0 10px;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
color: #826237;
}

.therapy-supplies-hero__card strong {
display: block;
margin-bottom: 12px;
font-size: 1.35rem;
line-height: 1.25;
color: #1f2f3d;
}

.therapy-supplies-hero__card p {
margin: 0;
line-height: 1.65;
color: #4a5c6d;
}

/* =====================================================
DISCLOSURE BOX
===================================================== */

.therapy-supplies-disclosure__box {
padding: 34px;
border-left: 7px solid #a77b43;
}

.therapy-supplies-disclosure__box h2 {
max-width: 900px;
margin: 0 0 16px;
color: #1f2f3d;
letter-spacing: -0.025em;
}

.therapy-supplies-disclosure__box p {
max-width: 980px;
margin: 0 0 14px;
line-height: 1.65;
color: #405266;
}

.therapy-supplies-disclosure__box p:last-child {
margin-bottom: 0;
}

/* =====================================================
SECTION HEADINGS
===================================================== */

.therapy-supplies-page .section-eyebrow {
color: #8a6739;
}

.therapy-supplies-page .home-section-head {
max-width: 850px;
margin: 0 auto 28px;
}

.therapy-supplies-page .home-section-head h2 {
margin-bottom: 12px;
color: #1f2f3d;
letter-spacing: -0.025em;
}

.therapy-supplies-page .home-section-head p {
color: #4a5c6d;
line-height: 1.65;
}

/* =====================================================
BEFORE YOU SHOP STEPS
===================================================== */

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

.therapy-supplies-step-card {
padding: 24px;
border: 1px solid rgba(42, 54, 72, 0.12);
border-radius: 22px;
background: #fffdf8;
box-shadow: 0 14px 30px rgba(53, 39, 23, 0.06);
}

.therapy-supplies-step-card span {
display: inline-flex;
width: 40px;
height: 40px;
margin-bottom: 14px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #efe2cf;
color: #6d4a1f;
font-weight: 800;
}

.therapy-supplies-step-card h3 {
margin: 0 0 10px;
color: #1f2f3d;
line-height: 1.25;
}

.therapy-supplies-step-card p {
margin: 0;
color: #4a5c6d;
line-height: 1.6;
}

/* =====================================================
PRODUCT CATEGORY GRID
===================================================== */

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

.therapy-supplies-category-card {
display: flex;
flex-direction: column;
min-height: 100%;
padding: 24px;
border: 1px solid rgba(42, 54, 72, 0.12);
border-radius: 22px;
background: #fffdf8;
box-shadow: 0 14px 30px rgba(53, 39, 23, 0.06);
}

.therapy-supplies-category-card h3 {
margin: 10px 0 10px;
color: #1f2f3d;
line-height: 1.28;
}

.therapy-supplies-category-card p {
margin: 0 0 18px;
color: #4a5c6d;
line-height: 1.6;
}

.therapy-supplies-category-card .btn {
margin-top: auto;
align-self: flex-start;
}

.therapy-supplies-page .pill-tag {
display: inline-flex;
width: fit-content;
align-items: center;
gap: 6px;
padding: 7px 11px;
border-radius: 999px;
background: #efe2cf;
color: #6d4a1f;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

/* =====================================================
SUPPLIER / PARTNER PANEL
Green action accent without turning the whole page green.
===================================================== */

.therapy-supplies-partners__panel {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
gap: 26px;
align-items: center;
padding: 36px;
background:
linear-gradient(135deg, rgba(219, 235, 216, 0.96), rgba(245, 239, 225, 0.95));
border-color: rgba(68, 107, 71, 0.2);
}

.therapy-supplies-partners__panel h2 {
margin: 0 0 14px;
color: #1f3327;
letter-spacing: -0.025em;
}

.therapy-supplies-partners__panel p {
margin: 0 0 12px;
color: #33483a;
line-height: 1.65;
}

.therapy-supplies-partners__actions {
justify-content: flex-start;
}

/* =====================================================
RESPONSIBLE USE
===================================================== */

.therapy-supplies-responsible-use .note-band {
margin-top: 22px;
padding: 18px 20px;
border-radius: 18px;
border: 1px solid rgba(38, 50, 65, 0.14);
background: rgba(255, 251, 244, 0.9);
}

.therapy-supplies-responsible-use .note-band p {
margin: 0;
color: #405266;
line-height: 1.65;
}

/* =====================================================
GLOBAL CLOSE
Gentle green callout / next-step block.
===================================================== */

.therapy-supplies-close__card {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
gap: 26px;
align-items: center;
padding: 36px;
background:
linear-gradient(135deg, #dcebd8 0%, #eef3e8 46%, #fff7e9 100%);
border-color: rgba(68, 107, 71, 0.22);
}

.therapy-supplies-close__card h2 {
margin: 0 0 12px;
color: #1f3327;
letter-spacing: -0.025em;
}

.therapy-supplies-close__card p {
margin: 0;
color: #33483a;
line-height: 1.65;
}

.therapy-supplies-close__actions {
justify-content: flex-start;
}

/* =====================================================
BUTTON TUNING INSIDE PAGE
===================================================== */

.therapy-supplies-page .btn {
white-space: normal;
}

.therapy-supplies-page .btn-primary {
box-shadow: 0 10px 22px rgba(32, 48, 63, 0.12);
}

.therapy-supplies-page .btn-secondary {
background: rgba(255, 255, 255, 0.72);
}

/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width: 980px) {
.therapy-supplies-hero__panel,
.therapy-supplies-partners__panel,
.therapy-supplies-close__card {
grid-template-columns: 1fr;
}

.therapy-supplies-steps__grid,
.therapy-supplies-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.therapy-supplies-hero {
padding-top: 56px;
}
}

@media (max-width: 680px) {
.therapy-supplies-page .section {
padding: 38px 0;
}

.therapy-supplies-hero {
padding-top: 40px;
}

.therapy-supplies-hero__copy,
.therapy-supplies-hero__card,
.therapy-supplies-disclosure__box,
.therapy-supplies-partners__panel,
.therapy-supplies-close__card,
.therapy-supplies-page .card {
border-radius: 18px;
}

.therapy-supplies-hero__copy,
.therapy-supplies-disclosure__box,
.therapy-supplies-partners__panel,
.therapy-supplies-close__card,
.therapy-supplies-page .card-pad {
padding: 24px;
}

.therapy-supplies-hero__card {
padding: 24px;
}

.therapy-supplies-steps__grid,
.therapy-supplies-category-grid {
grid-template-columns: 1fr;
}

.therapy-supplies-hero__actions .btn,
.therapy-supplies-partners__actions .btn,
.therapy-supplies-close__actions .btn {
width: 100%;
justify-content: center;
}
}