from search.php) */
#main h1 + p,
#center h1 + p {
color: #444;
margin: 0 0 24px;
}
/* search.php wraps each show_product() in
, leaving empty
tags. Hide them. */
#main p:empty,
#center p:empty {
display: none;
}
/* Search result row - card baseline (inherits from .product-listing block above) */
#product_entry {
font-family: var(--font-display);
color: #1a1a1a;
margin-bottom: 14px;
line-height: 1.6;
}
#product_entry:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
border-color: var(--primary);
}
#product_entry a {
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
#product_entry a:hover {
text-decoration: underline;
}
#product_description {
font-size: 14px;
color: #555;
margin-top: 8px;
}
#product_description p { margin: 4px 0; }
/* Bottom row of each result: price + action button */
#product_order {
margin-top: 12px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
#product_order form {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
}
/* Inline price text (non-score items) */
#product_order:not(:has(form)),
#product_order > :first-child:not(form) {
font-weight: 700;
color: #1a1a1a;
font-size: 16px;
}
/* Action buttons inside result rows - small "Details" pill (with info icon)
and "Add to cart" pill for non-score items */
#product_order input[type="submit"] {
background: var(--primary);
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 14px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
transition: filter 0.15s ease;
}
#product_order input[type="submit"]:hover,
#product_order input[type="submit"]:focus-visible {
filter: brightness(0.85);
background: var(--primary);
color: #fff;
border-color: transparent;
}
/* "Details" button gets the info icon on the left */
.product-details-btn,
#product_order input.product-details-btn[type="submit"] {
background-image: url('/images/icon-info-white.png');
background-repeat: no-repeat;
background-position: 10px center;
background-size: 13px;
padding-left: 30px;
}
.product-details-btn:hover,
.product-details-btn:focus-visible,
#product_order input.product-details-btn[type="submit"]:hover {
background-image: url('/images/icon-info-white.png');
background-repeat: no-repeat;
background-position: 10px center;
background-size: 13px;
}
/* Pagination - "Showing items / Page / Previous 1 2 3 Next / Limit N per page"
The whole block is rendered inside ONE unclosed
from
show_navigation_options(), with / in result
descriptions. The also contains a for the per-page limit. */
#main > p:has(> a[href*="sr="]),
#main > p:has(> select[name="limit"]) {
line-height: 3;
margin: 32px 0;
padding: 0;
background: transparent;
border: none;
color: #555;
font-size: 14px;
}
#main > p > a[href*="sr="] {
display: inline-block;
min-width: 32px;
padding: 6px 10px;
margin: 0 2px;
color: var(--primary);
background: #fff;
border: 1px solid #cecdcc;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
font-size: 14px;
line-height: 1.4;
text-align: center;
transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease;
}
#main > p > a[href*="sr="]:hover,
#main > p > a[href*="sr="]:focus-visible {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
/* Current page is rendered by show_cur_page() as $page (direct
child of the pagination ); style it as the active page chip. */
#main > p:has(> a[href*="sr="]) > b,
#main > p:has(> select[name="limit"]) > b {
display: inline-block;
min-width: 32px;
padding: 6px 10px;
margin: 0 2px;
background: var(--primary);
color: #fff;
border: 1px solid var(--primary);
border-radius: 6px;
font-weight: 600;
font-size: 14px;
line-height: 1.4;
text-align: center;
}
/* Per-page limit dropdown inside the pagination
. */
#main > p > select[name="limit"] {
display: inline-block;
padding: 6px 28px 6px 10px;
margin: 0 6px;
font-family: var(--font-display);
font-size: 14px;
color: #1a1a1a;
background: #fff;
border: 1px solid #cecdcc;
border-radius: 6px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,") */
form[name="cart_options"] input[type="text"][name^="quantity_"] {
width: 56px;
padding: 8px 10px;
font-family: var(--font-display);
font-size: 14px;
text-align: center;
color: #1a1a1a;
background: #fff;
border: 1px solid #cecdcc;
border-radius: 6px;
}
form[name="cart_options"] input[type="text"][name^="quantity_"]:focus-visible {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
/* =================================================================
11. FOOTER - Action buttons over sheet-music + dark green band
================================================================= */
/* Reset outer container - sections now manage their own padding/background */
#footer.site-footer {
display: block;
padding: 0;
border-top: none;
background-color: transparent;
text-align: left;
}
/* Top section: sheet-music background with action buttons */
.footer-actions {
background-image: url('/images/bg-sheet-music.jpg');
background-size: cover;
background-position: center bottom -30px;
background-repeat: no-repeat;
padding: 56px 0;
}
/* TE-184: match the header's content box (max-width + 40px side padding) so the
footer's left/right edges line up with the header. Buttons wrap centered,
which stays symmetric for 5 OR 6 (3 per row, last row centered). */
.footer-actions-list {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 40px;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.footer-actions-list li {
list-style: none;
margin: 0;
padding: 0;
flex: 0 1 300px;
max-width: 300px;
}
.footer-actions-list a {
display: block;
background: var(--primary);
color: #fff;
text-align: center;
padding: 16px 20px;
border-radius: 10px;
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
text-decoration: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
transition: background 0.15s ease, transform 0.15s ease;
}
.footer-actions-list a:hover,
.footer-actions-list a:focus-visible {
filter: brightness(0.85);
transform: translateY(-1px);
color: #fff;
}
/* Bottom section: dark green band -- a single row [logo · copyright · controls]
(TE-184), sized to roughly the header height and aligned to the header's
content box. Everything vertically centred. */
.footer-band {
background: var(--primary);
color: #fff;
padding: 0;
}
.footer-band-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 18px 40px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 32px;
}
.footer-band-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
color: inherit;
}
.footer-band-logo-img {
display: block;
height: auto;
width: auto;
max-width: 180px;
max-height: 56px;
object-fit: contain;
}
.footer-band-logo-text {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
color: #fff;
letter-spacing: 1px;
}
/* Country/currency controls — one shared 2-col grid so both rows align */
.footer-band-controls {
display: grid;
grid-template-columns: auto auto;
column-gap: 12px;
row-gap: 12px;
align-items: center;
margin: 0;
color: #fff;
font-family: var(--font-display);
font-size: 14px;
}
.footer-band-control {
display: contents;
}
.footer-band-control-label {
color: #fff;
font-weight: 500;
white-space: nowrap;
}
.footer-band-controls select {
background: #fff;
color: #1a1a1a;
border: none;
border-radius: 6px;
padding: 8px 36px 8px 12px;
font-family: var(--font-display);
font-size: 14px;
min-width: 160px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,; we override the inline HTML4 attributes with !important. The
yimg.com "Join Now!" image is replaced via CSS by hiding it and turning
the