/* ==========================================================================
Bake Delights Theme - Modern site refresh
Added 2026-07-20. Loaded AFTER bakedelights-styles.css so it overrides it.
Each section is scoped to its page/component so nothing bleeds elsewhere.
To revert: remove the AppendCssFileParts line in Views/Shared/Head.cshtml
and delete this file.
Sections:
1. Product details page
2. Account + form pages (customer info, addresses, login, register,
password recovery, contact us)
3. Wishlist page
4. Category / product grid + list (also manufacturer, search, tag pages)
5. Cart + checkout pages
6. Order completed + order history + order details
7. Category page - split subcategories (browse) from products (buy)
8. Product image slider arrows (owl-carousel thumbnails)
9. Breadcrumb - card + readable font
10. Category navigation sidebar (card + rounded rows)
11. Topic / content pages (terms, privacy, refund, about, ...)
========================================================================== */
/* Brand palette pulled from the existing theme
sage #ADB8B4 charcoal #555555 ink #2f2e2b
parchment card #fffdf9 hairline #e6e1d6 green #72b226 */
/* ==========================================================================
SECTION 1 - PRODUCT DETAILS PAGE
========================================================================== */
/* --- Page card: lift the product off the busy floral background ---------- */
.product-details-page .product-essential {
background: #fffdf9;
border: 1px solid #e6e1d6;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(90, 80, 60, 0.10);
padding: 26px 28px 20px;
margin-bottom: 40px;
}
.product-details-page .product-essential > .row {
margin-left: -12px;
margin-right: -12px;
}
/* --- Product image: white framed card so white-background photos lift ----- */
.product-details-page .gallery .picture {
background: #ffffff;
border: 1px solid #e9e4d9;
border-radius: 12px;
padding: 24px;
display: flex;
align-items: center;
justify-content: center;
min-height: 340px;
box-shadow: 0 4px 14px rgba(90, 80, 60, 0.06);
overflow: hidden;
}
.product-details-page .gallery .picture img {
width: auto;
max-width: 100%;
max-height: 420px;
height: auto;
transition: transform 0.35s ease;
}
.product-details-page .gallery .picture:hover img {
transform: scale(1.03);
}
/* --- Thumbnails: rounded, clear active state ----------------------------- */
.product-details-page .gallery .picture-thumbs {
margin-top: 14px;
}
.product-details-page .thumb-popup-link,
.product-details-page .gallery .picture-thumbs .thumb-item {
border: 1px solid #e6e1d6;
border-radius: 10px;
padding: 6px;
background: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.product-details-page .thumb-popup-link:hover,
.product-details-page .gallery .picture-thumbs .thumb-item:hover {
border-color: #ADB8B4;
box-shadow: 0 3px 10px rgba(90, 80, 60, 0.10);
}
.product-details-page .gallery .picture-thumbs img {
border-radius: 6px;
}
/* --- Product name: darker, readable heading ------------------------------ */
.product-details-page .product-name.panel-heading h1 {
color: #2f2e2b;
font-size: 28px;
font-weight: 600;
line-height: 1.25;
}
.product-details-page .short-description,
.product-details-page .variant-description {
color: #5a5852;
font-size: 15px;
line-height: 1.6;
}
/* --- Price block: clearer hierarchy -------------------------------------- */
.product-details-page .prices {
padding: 6px 0;
margin-bottom: 20px;
}
.product-details-page .prices .product-price span {
font-size: 30px;
font-weight: 600;
color: #2f2e2b;
}
.product-details-page .old-product-price label {
color: #b0aca2;
font-size: 16px;
}
/* --- Stock badge --------------------------------------------------------- */
.product-details-page .stock .value {
background: #72b226;
font-weight: 500;
letter-spacing: 0.3px;
}
/* --- Add to cart: solid charcoal, keeps the existing cart-icon sprite ----- */
.product-details-page .add-to-cart .product-add-button .add-to-cart-button {
background-color: #555555;
color: #fff;
border: none;
border-radius: 10px;
padding: 13px 22px 13px 44px;
letter-spacing: 0.4px;
box-shadow: 0 4px 12px rgba(85, 85, 85, 0.22);
transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
.product-details-page .add-to-cart .product-add-button .add-to-cart-button:hover {
background-color: #3f3f3d;
box-shadow: 0 6px 16px rgba(85, 85, 85, 0.30);
}
.product-details-page .add-to-cart .product-add-button .add-to-cart-button:active {
transform: translateY(1px);
}
/* Quantity box: leave the theme's built-in [-][1][+] pill alone. An earlier
rounded-input override broke its seamless alignment once this stylesheet
began loading last (overriding the theme), so it has been removed. */
/* --- Secondary buttons (wishlist / compare / email) -----------------------
Add a light white pill, but DO NOT touch the theme's padding or
background-position: these are elements whose icon comes from a
sprite, and changing those values pushed the icon over the text. Keeping
the theme's icon placement and only adding the border/background is safe. */
.product-details-page .overview-buttons .add-to-wishlist-button,
.product-details-page .overview-buttons .add-to-compare-list-button,
.product-details-page .overview-buttons .email-a-friend-button {
border: 1px solid #ded8cb;
border-radius: 10px;
background-color: #fff;
color: #5a5852;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.product-details-page .overview-buttons .add-to-wishlist-button:hover,
.product-details-page .overview-buttons .add-to-compare-list-button:hover,
.product-details-page .overview-buttons .email-a-friend-button:hover {
border-color: #ADB8B4;
background-color: #f7f6f2;
color: #2f2e2b;
}
/* --- Delivery / free-shipping cue ---------------------------------------- */
.product-details-page .free-shipping {
background: #eef4ee;
color: #3b6d11;
border: 1px solid #d6e6cf;
border-radius: 10px;
font-weight: 500;
}
/* --- Tabs: cleaner, sage active accent ----------------------------------- */
.product-details-page .product-details-tabs {
margin-top: 30px;
padding-top: 26px;
border-top: 1px solid #eee7db;
}
.product-details-page .nav-tabs > li > a {
border: 1px solid #e6e1d6;
border-radius: 8px;
background: #faf8f3;
color: #6f6d66;
padding: 14px 28px;
margin-bottom: 8px;
transition: all 0.2s ease;
}
.product-details-page .nav-tabs > li > a:hover,
.product-details-page .nav-tabs > li > a:focus {
background: #ADB8B4;
border-color: #ADB8B4;
color: #fff;
}
.product-details-page .nav-tabs li.active a,
.product-details-page .nav-tabs li.active a:hover,
.product-details-page .nav-tabs > li.active > a:focus {
background: #555555;
border-color: #555555;
color: #fff;
}
.product-details-page .full-description {
color: #5a5852;
line-height: 1.75;
font-size: 15px;
}
/* --- Responsive: ease padding on small screens --------------------------- */
@media (max-width: 767px) {
.product-details-page .product-essential {
padding: 16px 14px;
border-radius: 12px;
}
.product-details-page .gallery .picture {
min-height: 260px;
padding: 16px;
}
.product-details-page .product-name.panel-heading h1 {
font-size: 23px;
}
}
/* ==========================================================================
SECTION 2 - ACCOUNT + FORM PAGES
Scoped to the account/auth/address page wrappers so inputs/buttons on
other pages (e.g. the header search box) are left untouched.
========================================================================== */
/* --- Shared scope shorthand used throughout this section -----------------
.account-page -> customer info, addresses, change password, orders
.registration-page -> Register
.login-page -> Login
.password-recovery-page-> Password recovery
--------------------------------------------------------------------------- */
/* --- Main content card: lift the form off the busy background ------------ */
.account-page.page,
.registration-page.page,
.login-page.page,
.password-recovery-page.page,
.contact-page.page,
.wishlist-page.page,
.shopping-cart-page.page,
.checkout-page.page,
.order-details-page.page {
background: #fffdf9;
border: 1px solid #e6e1d6;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(90, 80, 60, 0.10);
padding: 26px 30px 30px;
margin-bottom: 40px;
display: flow-root; /* contain floated children (table, buttons, share) */
}
/* Section sub-headings inside the customer-info form */
.customer-info-page fieldset h3,
.account-page fieldset h3 {
color: #8a877f;
letter-spacing: 1px;
border-bottom: 1px solid #eee7db;
}
/* --- Account side navigation: turn the well into a clean card ------------ */
.block.block-account-navigation.well {
background: #fffdf9;
border: 1px solid #e6e1d6;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(90, 80, 60, 0.10);
padding: 0;
overflow: hidden;
}
.block.block-account-navigation .title.main-title {
background: #D19CA9; /* match the site header (pink) */
padding: 14px 20px;
}
.block.block-account-navigation .title.main-title strong {
font-size: 16px;
letter-spacing: 0.3px;
}
.block.block-account-navigation .listbox {
padding: 10px;
}
/* Nav items: rounded rows, no sprite bullet, clear hover/active ----------- */
.block.block-account-navigation .listbox ul li a {
padding: 11px 16px;
border-bottom: none;
border-radius: 10px;
background-image: none;
color: #5a5852;
transition: background-color 0.2s ease, color 0.2s ease;
}
.block.block-account-navigation .listbox ul li a:hover {
background-image: none;
background-color: #f2f0ea;
color: #2f2e2b;
}
.block.block-account-navigation .listbox ul li a.active {
background-image: none;
background-color: #555555;
color: #fff;
}
/* --- Inputs: calmer 10px fields with a soft sage focus ring -------------- */
.account-page .form-control,
.registration-page .form-control,
.login-page .form-control,
.password-recovery-page .form-control,
.address-edit-page .form-control,
.customer-info-page .form-control,
.contact-page .form-control,
.checkout-page .form-control,
.shopping-cart-page .form-control {
border: 1px solid #ded8cb;
border-radius: 10px;
height: 44px;
padding: 8px 14px;
box-shadow: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-page textarea.form-control,
.registration-page textarea.form-control,
.login-page textarea.form-control,
.contact-page textarea.form-control {
height: auto;
min-height: 120px;
}
.account-page .form-control:focus,
.registration-page .form-control:focus,
.login-page .form-control:focus,
.password-recovery-page .form-control:focus,
.address-edit-page .form-control:focus,
.customer-info-page .form-control:focus,
.contact-page .form-control:focus,
.checkout-page .form-control:focus,
.shopping-cart-page .form-control:focus {
border-color: #ADB8B4;
box-shadow: 0 0 0 3px rgba(173, 184, 180, 0.25);
}
/* Date-of-birth / country selects match the new field radius */
.registration-page .date-birth-text > select,
.customer-info-page .date-birth-text > select,
.registration-page .date-birth-text .date-picker-wrapper > select,
.customer-info-page .date-birth-text .date-picker-wrapper > select {
border: 1px solid #ded8cb;
border-radius: 10px;
}
/* Labels: consistent weight/colour */
.account-page .form-group .control-label,
.registration-page .form-group .control-label,
.customer-info-page .form-group .control-label {
color: #5a5852;
font-weight: 500;
}
/* --- Primary buttons on form pages: solid charcoal, 10px radius ---------- */
.account-page .btn.btn-primary,
.registration-page .btn.btn-primary,
.login-page .btn.btn-primary,
.password-recovery-page .btn.btn-primary,
.address-edit-page .btn.btn-primary,
.contact-page .btn.btn-primary {
background-color: #555555;
border-radius: 10px;
padding: 12px 28px;
letter-spacing: 0.4px;
box-shadow: 0 4px 12px rgba(85, 85, 85, 0.22);
}
.account-page .btn.btn-primary:hover,
.registration-page .btn.btn-primary:hover,
.login-page .btn.btn-primary:hover,
.password-recovery-page .btn.btn-primary:hover,
.address-edit-page .btn.btn-primary:hover,
.contact-page .btn.btn-primary:hover {
background-color: #3f3f3d;
}
/* --- Responsive: ease padding on small screens -------------------------- */
@media (max-width: 767px) {
.account-page.page,
.registration-page.page,
.login-page.page,
.password-recovery-page.page {
padding: 16px 16px 20px;
border-radius: 12px;
}
}
/* ==========================================================================
SECTION 3 - WISHLIST PAGE
The .wishlist-page.page card is defined in Section 2's card rule.
Note: the cart-item table markup is shared with the order-summary, so
rules here are scoped to .wishlist-page / .wishlist-content only.
========================================================================== */
/* --- Table header: soft parchment strip --------------------------------- */
.wishlist-content .cart-header-row th {
background: #f4f2ec;
color: #6f6d66;
border-bottom: 1px solid #e6e1d6;
letter-spacing: 0.5px;
}
/* --- Rows: gentle hover, roomier cells ---------------------------------- */
.wishlist-content .cart .cart-item-row td {
padding: 14px 10px;
}
.wishlist-content .cart .cart-item-row:hover {
background: #faf8f3;
}
.wishlist-content .cart .cart-item-row td.product a {
color: #2f2e2b;
font-weight: 500;
}
.wishlist-content .cart .cart-item-row td.product a:hover {
color: #555555;
}
/* --- Product thumbnail: white framed card (helps white-bg images) ------- */
.wishlist-content .cart .cart-item-row .product-picture img {
border: 1px solid #e9e4d9;
border-radius: 10px;
background: #fff;
padding: 6px;
max-width: 90px;
}
/* --- Buttons: charcoal, 10px radius, keep the existing icon sprites ------ */
.wishlist-page .buttons .common-buttons .btn.btn-primary,
.wishlist-page .buttons .common-buttons .btn.btn-default {
background-color: #555555;
border-radius: 10px;
padding-top: 12px;
padding-bottom: 12px;
box-shadow: 0 4px 12px rgba(85, 85, 85, 0.22);
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.wishlist-page .buttons .common-buttons .btn.btn-primary:hover,
.wishlist-page .buttons .common-buttons .btn.btn-default:hover {
background-color: #3f3f3d;
box-shadow: 0 6px 16px rgba(85, 85, 85, 0.30);
}
/* --- Empty state -------------------------------------------------------- */
.wishlist-page .no-data {
text-align: center;
color: #8a877f;
font-size: 16px;
padding: 40px 20px;
background: #faf8f3;
border: 1px solid #eee7db;
border-radius: 12px;
}
/* --- Share-your-wishlist strip ------------------------------------------ */
.wishlist-page .share-info {
float: none;
clear: both;
margin-top: 24px;
padding: 14px 18px;
background: #f4f2ec;
border: 1px solid #e6e1d6;
border-radius: 10px;
}
.wishlist-page .share-info .share-label {
color: #5a5852;
}
.wishlist-page .share-info a.share-link {
color: #555555;
}
.wishlist-page .share-info a.share-link:hover {
color: #2f2e2b;
}
/* ==========================================================================
SECTION 4 - CATEGORY / PRODUCT GRID + LIST
Applies to category, manufacturer, search, product-tag and featured grids
(anything using .item-box + _ProductBox). Scoped to .item-box so it does
not touch home-page widgets that reuse other markup.
========================================================================== */
/* --- Product card: frame the thumbnail, lift on hover ------------------- */
.item-box.product-grid .thumbnail {
border: 1px solid #e6e1d6;
border-bottom: 1px solid #e6e1d6;
border-radius: 12px;
background: #fff;
overflow: hidden;
box-shadow: 0 4px 14px rgba(90, 80, 60, 0.07);
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.product-grid .item-box:hover .thumbnail,
.item-box.product-grid:hover .thumbnail {
box-shadow: 0 10px 24px rgba(90, 80, 60, 0.14);
border-color: #d8d2c4;
}
/* --- Picture area: clean white, soft separator under it ----------------- */
.item-box .product-item .picture {
margin-bottom: 0;
padding: 16px;
border-bottom: 1px solid #f0ece3;
}
.item-box.product-grid .thumbnail .caption {
padding: 16px 14px 18px;
}
/* --- Title + price: darker, clearer ------------------------------------- */
.item-box .product-item .product-title a {
color: #2f2e2b;
font-weight: 500;
}
.item-box .product-item .product-title a:hover {
color: #555555;
}
.item-box .prices span {
color: #2f2e2b;
font-size: 18px;
font-weight: 600;
padding-left: 0;
}
.item-box .prices .price.old-price {
color: #b0aca2;
font-size: 14px;
font-weight: 400;
}
/* --- Action buttons: pull them out of the hover overlay into a static bar
under the price. Add-to-cart = full-width charcoal; wishlist/compare =
compact sage icon buttons (their sprite icons are white, so they need a
coloured background to stay visible). --------------------------------- */
.item-box .thumbnail .wishlist-compare-wrapper,
.item-box .thumbnail:hover .caption .wishlist-compare-wrapper {
position: static !important;
height: auto !important;
width: 100%;
opacity: 1 !important;
visibility: visible !important;
background: transparent !important;
display: flex !important;
flex-wrap: nowrap;
align-items: stretch;
gap: 8px;
margin-top: 12px;
box-sizing: border-box;
padding: 2px 14px 16px !important;
transform: none !important;
transition: none !important;
}
/* Add to cart - takes the remaining width, sits LEFT in a single row */
.item-box .wishlist-compare-wrapper .product-box-add-to-cart-button,
.item-box.product-grid .product-box-add-to-cart-button {
position: static !important;
order: 1;
flex: 1 1 auto;
width: auto;
height: 44px !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
text-indent: 0;
border-radius: 9px;
padding: 11px 12px 11px 38px;
font-size: 14px;
color: #fff;
background: #555555 url('../images/product-cart-icon.png') no-repeat 14px center;
transition: background-color 0.2s ease;
}
.item-box .wishlist-compare-wrapper .product-box-add-to-cart-button:hover,
.item-box .wishlist-compare-wrapper .product-box-add-to-cart-button:focus {
background-color: #3f3f3d;
color: #fff;
}
/* Wishlist + compare - fixed-width sage icon buttons to the RIGHT ---------- */
.item-box .wishlist-compare-wrapper .add-to-wishlist-button,
.item-box .wishlist-compare-wrapper .add-to-compare-list-button {
position: static !important;
flex: 0 0 46px;
width: 46px;
height: 44px !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
margin: 0;
border-radius: 9px;
background-color: #ADB8B4;
background-position: center center;
transition: background-color 0.2s ease;
}
.item-box .wishlist-compare-wrapper .add-to-wishlist-button { order: 2; }
.item-box .wishlist-compare-wrapper .add-to-compare-list-button { order: 3; }
.item-box .wishlist-compare-wrapper .add-to-wishlist-button:hover,
.item-box .wishlist-compare-wrapper .add-to-compare-list-button:hover {
background-color: #555555;
}
/* Card can grow to fit the new button bar */
.item-box.product-grid {
min-height: 0;
}
/* --- Rating stars: centre under the price ------------------------------- */
.item-box .product-rating-box {
margin: 0 0 14px;
}
/* --- Subcategory tiles: matching cards, calmer zoom -------------------- */
.sub-category-grid .item-box .sub-category-item,
.vendor-grid .item-box .product-category-item,
.manufacturer-grid .item-box .manufacturer-item {
background: #fff;
border: 1px solid #e6e1d6;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(90, 80, 60, 0.07);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.sub-category-grid .item-box .sub-category-item:hover,
.vendor-grid .item-box .product-category-item:hover,
.manufacturer-grid .item-box .manufacturer-item:hover {
box-shadow: 0 10px 24px rgba(90, 80, 60, 0.14);
}
/* No zoom-into-image on hover (overrides the theme's scale(1.5)) */
.product-category-item .picture img,
.product-category-item .picture:hover img,
.item-box .product-item .picture img,
.item-box .product-item .picture:hover img {
transition: none !important;
transform: none !important;
}
.product-category-item .picture .title {
margin-top: 0;
padding: 14px 10px;
}
.product-category-item .picture .title a {
color: #2f2e2b;
font-size: 15px;
font-weight: 500;
}
.product-category-item .picture:hover .title a {
color: #555555;
}
/* ==========================================================================
SECTION 4b - LIST VIEW (the grid/list toggle -> list mode)
========================================================================== */
.item-box.product-list .thumbnail {
border: 1px solid #e6e1d6;
border-radius: 12px;
background: #fff;
padding: 18px;
box-shadow: 0 4px 14px rgba(90, 80, 60, 0.07);
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.product-grid .item-box.product-list:hover .thumbnail {
box-shadow: 0 10px 24px rgba(90, 80, 60, 0.14);
border-color: #d8d2c4;
}
.product-grid .product-list .thumbnail .caption {
padding: 4px 0 4px 20px;
}
.item-box.product-list .product-item .product-title a {
text-align: left;
}
/* In list mode keep the action buttons compact and left-aligned */
.item-box.product-list .wishlist-compare-wrapper {
max-width: 320px;
}
/* ==========================================================================
SECTION 5 - CART + CHECKOUT
The .shopping-cart-page.page / .checkout-page.page cards are defined in the
Section 2 card rule. Cart-table + footer rules are scoped to
.shopping-cart-page, and step/method rules to .checkout-page, so the order
summary reused on order-details/confirm is left alone.
========================================================================== */
/* -------------------------------------------------------------------------
5a - CART
------------------------------------------------------------------------- */
/* Cart items table: same treatment as the wishlist table */
.shopping-cart-page .cart-header-row th {
background: #f4f2ec;
color: #6f6d66;
border-bottom: 1px solid #e6e1d6;
letter-spacing: 0.5px;
}
.shopping-cart-page .cart .cart-item-row td {
padding: 14px 8px;
}
.shopping-cart-page .cart .cart-item-row:hover {
background: #faf8f3;
}
.shopping-cart-page .cart .cart-item-row td.product a {
color: #2f2e2b;
font-weight: 500;
}
.shopping-cart-page .cart .cart-item-row td.product a:hover {
color: #555555;
}
.shopping-cart-page .cart .cart-item-row .product-picture img {
border: 1px solid #e9e4d9;
border-radius: 10px;
background: #fff;
padding: 6px;
max-width: 90px;
}
/* Footer helper boxes: coupon / gift card / estimate shipping ------------ */
.shopping-cart-page .coupon-box,
.shopping-cart-page .giftcard-box,
.shopping-cart-page .estimate-shipping {
border: 1px solid #e6e1d6;
border-radius: 12px;
box-shadow: none;
background: #fff;
}
.shopping-cart-page .coupon-box .title,
.shopping-cart-page .giftcard-box .title,
.shopping-cart-page .estimate-shipping .title {
background-color: #f4f2ec;
color: #5a5852;
border-bottom: 1px solid #e6e1d6;
border-radius: 12px 12px 0 0;
}
/* Totals panel: clean card ---------------------------------------------- */
.shopping-cart-page .cart-footer .total-info .panel.panel-default {
box-shadow: none;
border: 1px solid #e6e1d6;
border-radius: 12px;
background: #fff;
}
.shopping-cart-page .order-summary-content .cart-total-left,
.shopping-cart-page .order-summary-content .cart-total-right {
color: #3a3a38;
}
/* Main checkout CTA ----------------------------------------------------- */
.shopping-cart-page .checkout-buttons .checkout-button.checkout-new,
.order-summary-content .checkout-buttons .checkout-button.checkout-new {
background-color: #555555;
border-radius: 10px;
padding-top: 14px;
padding-bottom: 14px;
box-shadow: 0 4px 12px rgba(85, 85, 85, 0.22);
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.shopping-cart-page .checkout-buttons .checkout-button.checkout-new:hover,
.order-summary-content .checkout-buttons .checkout-button.checkout-new:hover {
background-color: #3f3f3d;
box-shadow: 0 6px 16px rgba(85, 85, 85, 0.30);
}
/* -------------------------------------------------------------------------
5b - CHECKOUT (one-page / opc)
------------------------------------------------------------------------- */
/* Each step becomes a soft card inside the page ------------------------- */
.checkout-page .opc li.tab-section {
background: #fff;
border: 1px solid #e6e1d6;
border-radius: 12px;
margin-bottom: 14px;
overflow: hidden;
}
/* Step title bar: cleaner pill, sage accent on the active step ---------- */
.checkout-page .opc .step-title {
background: #f4f2ec;
border-radius: 0;
padding: 6px 16px 6px 0;
}
.checkout-page .opc .active .step-title {
background: #eef2f0;
}
.checkout-page .opc .step-title .number {
background-color: #555555;
border-radius: 10px;
margin-right: 16px;
}
.checkout-page .opc .active .step-title .number {
background-color: #ADB8B4;
}
.checkout-page .opc .step-title h2,
.checkout-page .opc .active .step-title h2 {
color: #2f2e2b;
}
/* Shipping / payment method rows: subtle bordered options -------------- */
.checkout-page .checkout-data .shipping-method .method-name,
.checkout-page .checkout-data .payment-method .method-name {
padding: 12px 14px;
border: 1px solid #e6e1d6;
border-radius: 10px;
background: #fff;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.checkout-page .checkout-data .shipping-method .method-name:hover,
.checkout-page .checkout-data .payment-method .method-name:hover {
border-color: #ADB8B4;
background: #faf8f3;
}
/* Continue / confirm buttons: charcoal + rounded, keep the arrow sprites - */
.checkout-page .checkout-data #checkout-steps .btn.btn-primary,
.checkout-page .checkout-data #confirm-order-buttons-container .btn.btn-primary,
.checkout-page #billing-buttons-container .btn.btn-primary {
background-color: #555555;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(85, 85, 85, 0.22);
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.checkout-page .checkout-data #checkout-steps .btn.btn-primary:hover,
.checkout-page .checkout-data #confirm-order-buttons-container .btn.btn-primary:hover,
.checkout-page #billing-buttons-container .btn.btn-primary:hover {
background-color: #3f3f3d;
box-shadow: 0 6px 16px rgba(85, 85, 85, 0.30);
}
/* Totals panel on the confirm step ------------------------------------- */
.checkout-page .cart-footer .total-info .panel.panel-default {
box-shadow: none;
border: 1px solid #e6e1d6;
border-radius: 12px;
background: #fff;
}
/* ==========================================================================
SECTION 6 - ORDER COMPLETED + ORDER HISTORY + ORDER DETAILS
.order-completed-page inherits the checkout card; .order-list-page inherits
the account card + nav; .order-details-page card is in the Section 2 rule.
========================================================================== */
/* -------------------------------------------------------------------------
6a - ORDER COMPLETED ("thank you")
------------------------------------------------------------------------- */
.order-completed-page .section.order-completed {
max-width: 560px;
margin: 10px auto 0;
padding: 30px 24px;
background: #fff;
border: 1px solid #e6e1d6;
border-radius: 12px;
text-align: center;
}
/* Green success check above the confirmation message */
.order-completed-page .section.order-completed .title {
position: relative;
padding-top: 64px;
}
.order-completed-page .section.order-completed .title::before {
content: "\2713";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 52px;
height: 52px;
line-height: 52px;
font-size: 26px;
color: #fff;
background: #72b226;
border-radius: 50%;
}
.order-completed-page .section.order-completed .title strong {
font-size: 18px;
color: #2f2e2b;
}
.order-completed-page .section.order-completed .details {
margin: 16px 0 22px;
}
.order-completed-page .section.order-completed .details li strong {
color: #2f2e2b;
}
.checkout-page .order-completed-continue-button.btn.btn-primary {
background-color: #555555;
border-radius: 10px;
padding: 12px 30px;
box-shadow: 0 4px 12px rgba(85, 85, 85, 0.22);
}
.checkout-page .order-completed-continue-button.btn.btn-primary:hover {
background-color: #3f3f3d;
}
/* -------------------------------------------------------------------------
6b - ORDER HISTORY (order list)
------------------------------------------------------------------------- */
.order-list-page .order-item {
margin-bottom: 24px;
border: 1px solid #e6e1d6;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(90, 80, 60, 0.07);
background: #fff;
overflow: hidden;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.order-list-page .order-item:hover {
box-shadow: 0 12px 26px rgba(90, 80, 60, 0.14);
transform: translateY(-3px);
}
.order-list-page .order-item .title {
background: #f4f2ec;
border-bottom: 1px solid #e6e1d6;
padding: 12px 10px;
margin-bottom: 0;
}
.order-list-page .order-item .title strong {
color: #2f2e2b;
}
.order-list-page .order-item-detail {
padding: 16px 16px 18px;
}
/* Order status shown as a coloured badge */
.order-list-page .order-status {
display: inline-block;
padding: 2px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
background: #f1efe8;
color: #5f5e5a;
}
.order-list-page .order-status.complete {
background: #eaf3de;
color: #3b6d11;
}
.order-list-page .order-status.processing {
background: #e6f1fb;
color: #185fa5;
}
.order-list-page .order-status.pending {
background: #faeeda;
color: #854f0b;
}
.order-list-page .order-status.cancelled {
background: #fcebeb;
color: #a32d2d;
}
/* Buttons: charcoal primary, outline secondary */
.order-list-page .order-item .buttons .btn.btn-primary,
.order-details-page .btn.btn-primary {
background-color: #555555;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(85, 85, 85, 0.22);
}
.order-list-page .order-item .buttons .btn.btn-primary:hover,
.order-details-page .btn.btn-primary:hover {
background-color: #3f3f3d;
}
.order-list-page .order-item .buttons .btn.btn-default,
.order-details-page .btn.btn-default {
border-radius: 10px;
}
/* Empty state */
.order-list-page .no-data {
text-align: center;
color: #8a877f;
font-size: 16px;
padding: 40px 20px;
background: #faf8f3;
border: 1px solid #eee7db;
border-radius: 12px;
}
/* Recurring-orders table header, if present */
.order-list-page .recurring-payments-box .table thead th {
background: #f4f2ec;
color: #6f6d66;
border-bottom: 1px solid #e6e1d6;
}
/* -------------------------------------------------------------------------
6c - ORDER DETAILS
------------------------------------------------------------------------- */
/* Info panels: clean bordered cards instead of grey box-shadows */
.order-details-page .billing-info-wrap .info-content,
.order-details-page .shipping-info-wrap .info-content,
.order-details-page .order-info-wrap .info-content,
.order-details-page .payment-infomation,
.order-details-page .shipping-information,
.order-details-page .total-info .panel.panel-default {
box-shadow: none;
border: 1px solid #e6e1d6;
border-radius: 12px;
background: #fff;
}
.order-details-page .order-number h4 {
color: #2f2e2b;
}
.order-details-page .section .title > strong,
.order-details-page li.title {
color: #2f2e2b;
}
/* Products table: match the cart / wishlist look */
.order-details-page .section.products .cart-header-row th,
.order-details-page .section.products table thead th {
background: #f4f2ec;
color: #6f6d66;
border-bottom: 1px solid #e6e1d6;
}
.order-details-page .section.products table tbody tr:hover {
background: #faf8f3;
}
.order-details-page .section.products .a-left.name a {
color: #2f2e2b;
font-weight: 500;
}
.order-details-page .section.products .a-left.name a:hover {
color: #555555;
}
.order-details-page .section.products td.picture img,
.order-details-page .section.products .product-picture img {
border: 1px solid #e9e4d9;
border-radius: 10px;
background: #fff;
padding: 6px;
max-width: 90px;
}
/* ==========================================================================
SECTION 7 - CATEGORY PAGE (subcategories vs products)
Splits a mixed category page (like /storage) into a clear "Browse
collections" zone and a "Products" zone. Pure CSS - the section headings
are generated, so no template edit is needed. Scoped to .category-page.
========================================================================== */
/* --- Generated section headings ----------------------------------------- */
.category-page .sub-category-grid::before,
.category-page .product-grid.clearfix::before {
display: block;
clear: both;
float: none;
box-sizing: border-box;
background: #fffdf9;
border: 1px solid #e6e1d6;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(90, 80, 60, 0.07);
padding: 14px 20px;
margin: 0 0 20px;
font-size: 19px;
font-weight: 600;
color: #2f2e2b;
line-height: 1.2;
}
.category-page .sub-category-grid::before {
content: "Browse collections";
margin: 0 15px 20px; /* align with the row's padded columns */
}
.category-page .product-grid.clearfix::before {
content: "Products";
}
/* --- Subcategory cards: uniform image + name bar with a browse arrow ----- */
/* Kill the theme's 5px inner radius on .picture - it nests inside the card's
12px radius and lets the card background peek through at the corners (looks
like a faint inner border). Let the card's own rounding do the clipping. */
.sub-category-grid .product-category-item .picture,
.vendor-grid .product-category-item .picture,
.manufacturer-grid .product-category-item .picture {
border-radius: 0;
}
.category-page .sub-category-grid .img-scale {
height: 180px;
overflow: hidden;
border-radius: 0;
background: #fff;
padding: 10px;
box-sizing: border-box;
}
.category-page .sub-category-grid .img-scale a.product-img,
.category-page .sub-category-grid .img-scale a.product-img img {
width: 100%;
height: 100%;
display: block;
}
/* contain so the whole uploaded image fits inside the tile (no cropping) */
.category-page .sub-category-grid .img-scale a.product-img img {
object-fit: contain;
}
.category-page .product-category-item .picture .title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
text-align: left;
padding: 13px 14px;
margin-top: 0;
border-top: 1px solid #f0ece3;
}
.category-page .product-category-item .picture .title a {
color: #2f2e2b;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
}
.category-page .product-category-item .picture:hover .title a {
color: #555555;
}
/* "Go deeper" arrow marking each tile as a sub-category. Uses \f105
(fa-angle-right), which IS in the theme's FontAwesome build - fa-arrow-right
(\f061) was not, which is why the earlier arrow glyph came back empty. */
.category-page .product-category-item .picture .title::after {
content: "\f105"; /* fa-angle-right */
font-family: 'FontAwesome';
font-size: 13px;
color: #555555;
flex: 0 0 26px;
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
background: #f4f2ec;
border-radius: 50%;
transition: background-color 0.2s ease, color 0.2s ease;
}
.category-page .product-category-item:hover .picture .title::after {
background: #D19CA9;
color: #fff;
}
/* --- Sort / display toolbar: parchment card instead of a grey bar -------- */
.product-selectors {
background: #fffdf9;
border: 1px solid #e6e1d6;
border-radius: 10px;
color: #5a5852;
padding: 8px 12px;
margin: 0 0 24px;
}
.product-selectors .product-span label {
color: #5a5852;
}
/* View-mode toggles: style the itself (the theme gives it a white bg).
Higher specificity than the theme's ".viewmode-icon.grid i" rule. */
.product-selectors .viewmode-icon.grid i,
.product-selectors .viewmode-icon.list i {
background: #fff;
border: 1px solid #ded8cb;
border-radius: 8px;
color: #8a877f;
padding: 9px;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.product-selectors .viewmode-icon.grid:hover i,
.product-selectors .viewmode-icon.list:hover i {
color: #555555;
border-color: #ADB8B4;
}
.product-selectors .viewmode-icon.grid.selected i,
.product-selectors .viewmode-icon.list.selected i {
background: #555555;
border-color: #555555;
color: #fff;
}
/* ==========================================================================
SECTION 4 addendum - OUT OF STOCK products (grid + list)
When a product is out of stock the theme omits the add-to-cart button,
leaving a lonely wishlist icon. Fill that slot with an "Out of stock"
label instead. Uses :has() to detect the missing button; browsers without
:has() show nothing (same as before) - safe degradation.
========================================================================== */
.item-box .wishlist-compare-wrapper:not(:has(.product-box-add-to-cart-button))::before {
content: "Out of stock";
order: 1;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
height: 44px;
box-sizing: border-box;
padding: 0 12px;
border-radius: 9px;
background: #f1efe8;
border: 1px solid #e0dacd;
color: #8a877f;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.3px;
}
/* ==========================================================================
SECTION 8 - PRODUCT IMAGE SLIDER ARROWS
The thumbnail slider (owl-carousel) uses sprite-image prev/next arrows that
swap to a second image on hover. Replace them with clean circular buttons
drawn with a FontAwesome chevron + a proper hover / click-press effect.
========================================================================== */
.picture-thumbs .owl-nav .owl-prev,
.picture-thumbs .owl-nav .owl-next {
background: #fff !important;
border: 1px solid #ded8cb;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(90, 80, 60, 0.12);
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
/* Chevron glyph, absolutely centred so the theme's text-indent hack can't move it */
.picture-thumbs .owl-nav .owl-prev::before,
.picture-thumbs .owl-nav .owl-next::before {
font-family: 'FontAwesome';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
line-height: 30px;
text-align: center;
text-indent: 0;
font-size: 15px;
color: #555555;
transition: color 0.2s ease;
}
.picture-thumbs .owl-nav .owl-prev::before { content: "\f104"; } /* fa-angle-left */
.picture-thumbs .owl-nav .owl-next::before { content: "\f105"; } /* fa-angle-right */
.picture-thumbs .owl-nav .owl-prev:hover,
.picture-thumbs .owl-nav .owl-next:hover {
background: #555555 !important;
border-color: #555555;
}
.picture-thumbs .owl-nav .owl-prev:hover::before,
.picture-thumbs .owl-nav .owl-next:hover::before {
color: #fff;
}
.picture-thumbs .owl-nav .owl-prev:active,
.picture-thumbs .owl-nav .owl-next:active {
transform: scale(0.9);
}
/* ==========================================================================
SECTION 9 - BREADCRUMB
Wrap the breadcrumb in a parchment card matching the rest of the system,
and replace the hard-to-read 'Great Vibes' script with a clean font.
Applies to product + category breadcrumbs.
========================================================================== */
/* The breadcrumb sits outside the page .container and spans the full width.
Give its wrapper the same centred container box (Bootstrap 3 widths + 15px
padding) so the card lines up with the sidebar-left / content-right edges. */
.breadcrumb-wrapper {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}
@media (min-width: 768px) { .breadcrumb-wrapper { max-width: 750px; } }
@media (min-width: 992px) { .breadcrumb-wrapper { max-width: 970px; } }
@media (min-width: 1200px) { .breadcrumb-wrapper { max-width: 1170px; } }
.breadcrumb-wrapper .breadcrumb {
text-align: left;
background: #fffdf9;
border: 1px solid #e6e1d6;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(90, 80, 60, 0.07);
padding: 12px 18px;
margin: 0 0 24px;
}
/* Readable font + sensible size for every crumb (link, home, active) */
.breadcrumb-wrapper .breadcrumb li a,
.breadcrumb-wrapper .breadcrumb li:first-child a,
.breadcrumb-wrapper .breadcrumb li .current-item.active,
.breadcrumb-wrapper .breadcrumb li .active {
font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
}
.breadcrumb-wrapper .breadcrumb li a,
.breadcrumb-wrapper .breadcrumb li:first-child a {
color: #6f6d66;
transition: color 0.2s ease;
}
.breadcrumb-wrapper .breadcrumb li a:hover,
.breadcrumb-wrapper .breadcrumb li:first-child a:hover {
color: #555555;
}
/* Current page (last crumb) */
.breadcrumb-wrapper .breadcrumb li .current-item.active,
.breadcrumb-wrapper .breadcrumb li .active {
color: #2f2e2b;
font-weight: 500;
}
/* Shrink the home icon to match the new text size */
.breadcrumb-wrapper .breadcrumb li:first-child a span i {
font-size: 15px;
}
/* Muted "/" separators */
.breadcrumb-wrapper .breadcrumb > li + li::before {
color: #b0aca2;
padding: 0 8px;
}
/* ==========================================================================
SECTION 10 - CATEGORY NAVIGATION SIDEBAR
Card + sage header + rounded hover rows, matching the account nav.
The tree's arrow bullets and per-level indentation are kept (they signal
the hierarchy). Scoped to .block-category-navigation only.
========================================================================== */
.block.block-category-navigation.well {
background: #fffdf9;
border: 1px solid #e6e1d6;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(90, 80, 60, 0.10);
padding: 0;
overflow: hidden;
margin-bottom: 30px;
}
.block.block-category-navigation .title.main-title {
background: #D19CA9; /* match the site header (pink) */
padding: 14px 20px;
}
.block.block-category-navigation .title.main-title strong {
font-size: 16px;
letter-spacing: 0.3px;
}
.block.block-category-navigation .listbox {
padding: 8px 10px;
}
/* Rows: keep the arrow sprite, soften the divider, add a rounded hover ---- */
.block.block-category-navigation .listbox ul li a {
border-bottom: 1px solid #f0ece3;
border-radius: 8px;
color: #5a5852;
transition: background-color 0.2s ease, color 0.2s ease;
}
.block.block-category-navigation .listbox ul li:last-child > a {
border-bottom: none;
}
.block.block-category-navigation .listbox ul li a:hover {
background-color: #f2f0ea;
color: #2f2e2b;
}
/* Current category */
.block.block-category-navigation .listbox ul li a.active,
.block.block-category-navigation .listbox ul li.active.last > a {
color: #2f2e2b;
font-weight: 500;
}
/* --- Section 10 continued: swap the arrow-bullet images for CSS chevrons -- */
/* Remove every sprite bullet (top level + all .sublist levels) */
.block.block-category-navigation .listbox ul li a {
background-image: none !important;
position: relative;
}
/* Crisp chevron in the bullet's place */
.block.block-category-navigation .listbox ul li a::before {
content: "\f105"; /* fa-angle-right */
font-family: 'FontAwesome';
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
line-height: 1;
color: #b0aca2;
transition: color 0.2s ease;
}
/* Match the chevron to each nested level's indent */
.block.block-category-navigation .listbox ul li .sublist li a::before { left: 30px; }
.block.block-category-navigation .listbox ul li .sublist li .sublist li a::before { left: 45px; }
.block.block-category-navigation .listbox ul li .sublist li .sublist li .sublist li a::before { left: 60px; }
.block.block-category-navigation .listbox ul li .sublist li .sublist li .sublist li .sublist li a::before { left: 75px; }
/* Chevron colours: charcoal on hover, sage-green on the active path */
.block.block-category-navigation .listbox ul li a:hover::before {
color: #555555;
}
.block.block-category-navigation .listbox ul li a.active::before,
.block.block-category-navigation .listbox ul li.active > a::before,
.block.block-category-navigation .listbox ul li.active.last > a::before {
color: #5f8a76;
}
/* --- Section 7 continued: category / manufacturer / vendor description ----
Wrap the description text in a parchment card instead of leaving it bare
on the page. (These classes only appear on their respective pages.) */
.category-description,
.manufacturer-description,
.vendor-description {
background: #fffdf9;
border: 1px solid #e6e1d6;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(90, 80, 60, 0.07);
padding: 22px 26px;
margin-bottom: 30px;
color: #5a5852;
line-height: 1.7;
}
/* ==========================================================================
SECTION 11 - TOPIC / CONTENT PAGES
Every standalone topic page (Terms & conditions, Privacy policy, Refund
policy, About us, Shipping info, ...) renders its admin-managed content
straight into ".page.topic-page .page-body". Carding that one element wraps
them all - no need to edit each topic's HTML in the admin. Scoped to the
standalone topic page so embedded topic blocks (home, login, contact,
not-found) are left alone. */
.page.topic-page .page-body {
background: #fffdf9;
border: 1px solid #e6e1d6;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(90, 80, 60, 0.07);
padding: 26px 30px;
margin-bottom: 30px;
color: #5a5852;
line-height: 1.7;
}
.page.topic-page .page-body a {
color: #555555;
}
.page.topic-page .page-body a:hover {
color: #2f2e2b;
}