in ".block_newsletter_alert-wrapper" (same class for both outcomes) and, for errors only, adds a dismiss button as its sibling — so the overlay positioning below lives on the wrapper, not the
itself, letting the message and button stack vertically inside
it. Hides everything else (title, conditions, form) via :has(). */
.block_newsletter {
position: relative;
padding: 40px;
min-height: unset;
}
.block_newsletter #block-newsletter-label {
font-family: var(--cndy-font-titles);
}
.block_newsletter #block-newsletter-label {
line-height: 1;
margin: 0px 0px 10px 0px;
max-width: unset;
}
/* theme.css has ".block_newsletter p { max-width: 400px; }" lets it win without !important. */
.block_newsletter p {
max-width: unset;
margin: 0px 0px 20px 0px;
}
/* theme.css has ".block_newsletter form { position: relative }" — that makes
the form (not .block_newsletter) the nearest positioned ancestor, so our
absolutely positioned alert was covering only the form's own box (sized to
its content, sitting wherever flex placed it) instead of the whole panel.
Nothing else in the form relies on it being positioned (checked: no
position:absolute children), so it's safe to cancel it here. */
.block_newsletter form {
position: static;
}
.block_newsletter form .input-wrapper {
position: relative;
}
/* theme.css has ".block_newsletter form input[type=text] { border: 0 !important;
background: #F3F3F3 !important; ... }" (1 class + 1 attr = same specificity
as ours), so matching the selector exactly lets source order (this file
loads after theme.css) decide, no need to out-specify it. Brings this
field in line with the border + focus-highlight treatment the generic
`input` rule (FORMS section above) gives every other form on the site. */
.block_newsletter form input[type=text] {
background: var(--cndy-solid-white) !important;
border: 2px solid var(--cndy-dark-gray) !important;
border-radius: 5px;
}
.block_newsletter form input[type=text]:focus {
border-color: var(--cndy-almost-black) !important;
}
.block_newsletter form button[type=submit] i {
color: var(--cndy-almost-black);
}
.block_newsletter form button[type=submit] {
top: 50%;
bottom: auto;
transform: translateY(-50%);
}
/* theme.css has ".block_newsletter p { max-width: 445px; margin: 0 0 36px; }"
(1 class + 1 element = higher specificity than a lone class), which was
capping this to a small pill instead of covering the panel. Scoping our
selector as ".block_newsletter .block_newsletter_alert" (2 classes) beats
it on normal specificity rules, no !important needed. */
.block_newsletter .block_newsletter_alert-wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: var(--cndy-light-gray);
}
.block_newsletter .block_newsletter_alert {
max-width: none;
margin: 0 0 1rem 0;
font-size: 1.0625rem;
}
/* theme.css doesn't just style ".alert-success"/".alert-danger" generically
(1 class) — it also has "#footer .block_newsletter form .alert-danger"
(theme.css:13822, an ID + 2 classes + 1 element), which beat this rule's
first version (3 plain classes, no ID) regardless of class count, since
an ID always outweighs any number of classes. Prefixing "#footer" here
too (the newsletter block only ever renders inside #footer on pages
where it isn't hidden outright — checkout hides it via
"body#checkout .block_newsletter-wrapper" below) matches that ID and
then wins on class count (4 vs 2), no !important needed. Kept as its own
rule (not folded into the one above) so the two outcomes stay easy to
restyle differently later if that's ever wanted. */
#footer .block_newsletter .block_newsletter_alert.alert-success,
#footer .block_newsletter .block_newsletter_alert.alert-danger {
background-color: transparent;
border-color: transparent;
color: inherit;
}
.block_newsletter .block_newsletter_alert-wrapper .block_newsletter_alert:last-child {
margin-bottom: 0;
}
.block_newsletter:has(.block_newsletter_alert) > h2,
.block_newsletter:has(.block_newsletter_alert) > p,
.block_newsletter:has(.block_newsletter_alert) form > *:not(.block_newsletter_alert-wrapper) {
visibility: hidden;
}
/* Dismiss button, injected by assets/js/newsletter.js below the message —
errors only, so the customer can dismiss and retry with a different
email. Uses the site's shared "fancy-btn fancy-secondary-btn" classes
(same as e.g. the header Search button) for its look, so no dedicated
styling is needed here. */
/* Checkout: the newsletter block rides along in the same displayFooterWrapper
hook output as the rest of the footer (About Us, Customer Care...), so it
can't be excluded from checkout/_partials/footer.tpl at the template
level without also losing that content — hide just this block here. */
body#checkout .block_newsletter-wrapper {
display: none;
}
/*****END: NEWSLETTER BLOCK*****/
/*****CATEGORY*****/
.block-category {
padding: 0px;
display: inline;
}
.block-category h1 {
text-align: center;
font-family: var(--cndy-font-titles);
line-height: 1;
margin: 0px 25px;
font-size: 50px;
}
#fancy-category-description {
margin: 10px 25px 0px 25px;
}
#category-top {
margin: 25px 25px 40px 25px;
}
#js-product-list-top {
display: block;
}
#js-product-list-top .products-sort-order {
display: unset;
}
.products-selection .sort-by {
padding-right: 15px;
}
.products-sort-order .dropdown-menu {
background: var(--cndy-solid-white);
border: 5px solid var(--cndy-light-gray);
border-radius: 5px;
transition: opacity .3s ease-in-out, margin .3s ease;
margin-top: 5px;
width: 13rem;
min-width: fit-content;
}
.products-sort-order .select-list {
display: block;
margin: 5px 10px;
padding: 5px 10px;
font-size: 18px;
text-transform: uppercase;
}
.products-sort-order .select-list:hover {
background-color: var(--cndy-light-gray);
border: none;
border-radius: 5px;
color: var(--cndy-dark-gray);
}
.leftColPopup .products-selection {
padding: 0px;
}
#js-product-list {
padding: 0px 15px;
}
#products .product-miniature {
padding: 0px 25px 25px 25px;
}
.product-miniature .thumbnail-container-image {
border: none;
}
.product-flags .product-flag {
margin: 0px 0px 5px 0px;
line-height: 15px;
padding: 5px;
font-size: 12px;
min-width: 60px;
}
.product-flag.discount-percentage {
display: none;
}
#products .product-title,
.product-miniature .product-title {
margin: 0px 0px 15px 0px;
text-align: center;
line-height: 1;
min-height: 3rem;
}
#products .product-title a,
.product-miniature .product-title a {
font-size: 25px;
color: var(--cndy-candy-pink);
}
.product-price-wrap {
justify-content: center;
align-items: center;
}
.price {
font-size: 25px;
}
.price-colored {
color: var(--cndy-pastel-green);
}
#products .regular-price {
color: var(--cndy-dark-gray);
text-decoration: none;
}
.pagination {
margin: 0px;
}
.pagination .page-list {
justify-content: center;
}
.pagination .page-list li {
margin: 0px 10px;
padding: 0px
}
.pagination .page-list a {
line-height: 40px;
width: 100%;
min-width: 40px;
color: var(--cndy-almost-black);
padding: 0px 10px;
}
.pagination .page-list a:hover {
color: var(--cndy-solid-white);
}
.pagination .page-list a:hover {
color: inherit;
}
.pagination .page-list .current a {
background: transparent;
}
.current, .current:hover {
background: var(--cndy-dark-gray);
border-color: var(--cndy-dark-gray);
}
/*****END: CATEGORY*****/
/*****PRODUCT GRID BLOCK*****/
/* Product titles: decorative Lobster script instead of the theme's default Cabin */
.product-miniature .product-title a {
font-family: var(--cndy-font-titles);
}
a.thumbnail.product-thumbnail {
transform: scale(1.0);
transition: transform 0.5s ease-in-out;
}
a.thumbnail.product-thumbnail:hover {
transform: scale(1.05);
transition: transform 0.5s ease-in-out;
}
/* Category grid: "Buy now" replaces the old quick-view magnifying glass and
opens the same popup — via assets/js/buy-now.js, which emits PrestaShop's
own "clickQuickView" event directly (the theme's built-in click handler
for data-link-action="quickview" turned out to be tied to the old icon's
.quick-view class specifically). Always visible — no hover fade/fly-in,
unlike the icon it replaces. */
.product-miniature .btn-buy-now {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 12px;
padding: 10px 16px;
border: 2px solid var(--cndy-almost-black);
border-radius: 4px;
background: transparent;
color: var(--cndy-almost-black);
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
transition: all 100ms linear;
}
.product-miniature .btn-buy-now:hover {
border-color: var(--cndy-pastel-green);
background-color: var(--cndy-pastel-green);
color: var(--cndy-solid-white);
}
/*****END: PRODUCT GRID BLOCK*****/
/*****PRODUCT PAGE*****/
.product-flags {
padding: 10px 0 0 10px;
}
.product-page-stars {
margin: 0px;
}
#product #content {
margin: 0px;
}
.product-mainblock {
margin: 0px 25px;
}
.productblock-image,
.productblock-image {
padding: 0px;
}
.an_productpage-slider-main {
border: 2px solid var(--cndy-light-gray);
border-radius: 5px;
}
.an_productpage-slider-main .slick-arrow,
.an_productpage-slider-main .slick-dots {
display: none !important;
}
.an_productpage-slider-nav {
margin: 10px 0px 0px 0px;
}
/* theme.css has ".an_productpage-slider-nav .slick-track { margin-left: 0; }",
cancelling Slick's own default centering (base ".slick-track" rule sets
"margin-left: auto; margin-right: auto;"). Restoring both margins here
centers the thumbnail row under the main image whenever it's narrower
than the gallery (up to 4 photos, per how many fit today without needing
to scroll) instead of always sitting flush left. */
.an_productpage-slider-nav .slick-track {
margin-left: auto;
margin-right: auto;
}
.an_productpage-slider.an_productpage-slider-nav img {
border: 2px solid var(--cndy-light-gray);
border-radius: 5px;
}
.nav-slide-selected:before {
border-color: var(--cndy-candy-pink) !important;
border: 2px solid var(--cndy-light-gray);
border-radius: 5px;
}
.modal-body h1, .page-product h1 {
margin: 0px;
line-height: 1;
font-family: var(--cndy-font-titles);
}
h1[itemprop="name"] {
font-family: var(--cndy-font-titles);
font-size: 50px;
color: var(--cndy-candy-pink);
margin-bottom: 20px;
}
.productblock-content {
padding: 0px 0px 0px 40px;
}
.product-prices .current-price-discounted .price {
color: var(--cndy-pastel-green);
}
.product-discount,
.product-discount .regular-price {
color: var(--cndy-dark-gray);
font-size: 16px;
text-decoration: none;
}
.an_productextratabs-accordion .card-body {
line-height: 1.1;
}
/* .product-add-to-cart (the shared parent of .product-quantity and
.quantity_availability, where Add to Cart lives) is "display: flex;
align-items: center;" in theme.css, which should already vertically
center the two against each other regardless of height. If something
else is overriding that align-items, force it here directly instead of
hunting further through theme.css's several overlapping/older rulesets
for this same widget. */
/* .product-quantity gets "style="height: 55px;"" set inline by JS (not in
any .tpl) — taller than its own 45px content, so the content sits inside
a bigger box than .quantity_availability has, throwing off the alignment
even with align-self: center correct on both. Inline styles only lose to
!important, no amount of selector specificity gets around one. */
.product-quantity,
.quantity_availability {
align-self: center;
margin: 0;
}
.product-quantity {
height: auto;
}
/* theme.css has ".product-add-to-cart .qty { height: 55px; ... }" — same
fixed height, one level further in (.qty wraps .input-group). Same
selector, just the property that needs changing, loaded after so it wins
on source order — no !important needed here, unlike .product-quantity
above (that one's fighting an inline style, this one's plain CSS). */
.product-add-to-cart .qty {
height: auto;
}
.product-quantity .input-group {
display: flex;
align-items: center;
gap: 8px;
width: auto;
}
/* theme.css has ".product-quantity #quantity_wanted { background: #ececec;
border: 0; height: 40px; padding: 0 8px 0px 17px; border-radius: 0px; }"
(1 class + 1 id) — more specific than the generic `input` rule (FORMS
section, a lone type selector), so it was winning on every property that
rule sets, not just the ones we cared about (hence the grey background
nobody asked for). Our selector adds .input-group on top of the same
#quantity_wanted, so it already out-specifies theirs — but every property
has to be spelled out here to actually contest it; leaving one out (like
background, last time) just lets theirs through uncontested. box-sizing
is explicit too, since their padding would otherwise add on top of the
45px height instead of being included in it, throwing off the alignment
with the buttons and Add to Cart beside it. */
.product-quantity .input-group #quantity_wanted {
box-sizing: border-box;
background-color: var(--cndy-solid-white);
border: 2px solid var(--cndy-dark-gray);
border-radius: 5px;
height: var(--cndy-control-minheight);
padding: 0;
flex: none;
width: 60px;
text-align: center;
transition: border-color 0.25s ease-in-out;
}
/* Our own border declaration above is unconditional (not scoped to :focus),
so at this specificity it also blocks the generic `input:focus` rule
(FORMS section) the same way it blocked the plain `input` background —
same fix: restate it here instead of relying on the weaker generic rule. */
.product-quantity .input-group #quantity_wanted:focus {
border-color: var(--cndy-almost-black);
}
/* theme.css has ".bootstrap-touchspin .btn-touchspin { background-color: #fff; height: 1.36rem; }"
and ".bootstrap-touchspin .btn-touchspin:hover { background-color: #f1f1f1; }"
(2 classes = higher specificity than .fancy-secondary-btn's 1 class), which
was winning on background-color (at rest and hover) and forcing a ~22px
height — only border-color (untouched by those rules) was changing, and
the buttons stayed shorter than Add to Cart. Scoped !important here rather
than on .fancy-btn/.fancy-secondary-btn generally, since those need to
stay untouched everywhere else they're used. */
.product-quantity .btn-touchspin {
border-radius: 5px !important;
background-color: var(--cndy-solid-white) !important;
color: var(--cndy-almost-black) !important;
height: var(--cndy-control-minheight) !important;
}
.product-quantity .btn-touchspin:hover {
background-color: var(--cndy-candy-pink) !important;
color: var(--cndy-solid-white) !important;
}
/* Add to Cart normally gets its height from the shared .fancy-btn
min-height (45px, BUTTONS section) — decoupled here so it tracks
--cndy-control-minheight instead, staying in sync with the
quantity selector beside it without changing height on every other
fancy-btn button sitewide (Account, cart, Discover, Subscribe...).
Restoring the "add-to-cart" class (needed for an_stickyaddtocart's JS
hook, see product-add-to-cart.tpl) also pulled in theme.css's own
".product-actions .add-to-cart { height: 55px; ... }" and
".product-actions .add-to-cart:not(.buynow-button) { min-height: 55px; ... }"
— the second one is 3 classes, more specific than a plain 2-class
selector here, so it was winning regardless of load order; and neither
was contested on "height" specifically since our old rule only declared
min-height. Selector below is 4 classes (beats theirs outright, no
!important needed) and declares both properties explicitly. */
.quantity_availability .add .fancy-addtocart-btn.add-to-cart {
height: var(--cndy-control-minheight);
min-height: var(--cndy-control-minheight);
margin-left: 100px;
}
.product-add-to-cart .qty {
width: fit-content;
}
.product-add-to-cart .qty .input-group .input-group-btn,
.product-add-to-cart .qty .input-group .input-group-btn>.btn {
width: 45px;
}
/*****CART/STICKY QUANTITY STEPPER: match the product-page style*****/
/* Colors/border/hover for these buttons come from the shared .fancy-btn /
.fancy-secondary-btn classes (added at runtime by
assets/js/quantity-buttons.js) — same as the product page's own
".product-quantity .btn-touchspin" — so a future fancy-btn restyle
doesn't need to be re-applied here too. Only what's genuinely specific
to each widget's own layout stays below: sizing (fancy-btn's own
padding/min-height is meant for text buttons like "Add to cart", too
wide for a bare icon square) and fighting the couple of vendor
properties fancy-btn's class-only specificity can't out-rank on its
own (noted per rule). */
/* Checked the real rendered DOM/computed styles instead of guessing from
theme.css alone (that file also has an unrelated, seemingly-unused
".input-group-btn-vertical" ruleset for a stacked-arrows layout — not
what's actually live here). The button that's actually live already
carries TouchSpin's plain "btn-touchspin" class (matched by
quantity-buttons.js, same as the product page), horizontal like the
product page's own — just squeezed into a fixed-width, overflow:hidden,
heavily !important'd wrapper ("#cart .input-group.bootstrap-touchspin",
"#cart .product-line-grid-right .input-group .input-group-btn>.btn",
theme.css:12161-12206). These selectors match those chains 1-for-1 (id +
same classes) so they win on source order for anything NOT !important;
properties theme.css itself flagged !important need it here too. */
#cart .input-group.bootstrap-touchspin {
border-radius: 0;
overflow: visible;
width: auto;
gap: 20px;
margin-right: 10px;
}
#cart .product-line-grid-right .input-group .input-group-btn > .btn {
border: 2px solid var(--cndy-almost-black) !important;
border-radius: 5px;
background-color: var(--cndy-solid-white);
color: var(--cndy-almost-black);
width: var(--cndy-control-minheight) !important;
/* theme.css's own ".bootstrap-touchspin .btn-touchspin { height: 1.36rem }"
(~22px) was still winning on height specifically — this rule never
contested it, only width — so the button rendered a squashed rectangle
(45px wide, ~22px tall) instead of matching the square quantity input
beside it. */
height: var(--cndy-control-minheight) !important;
/* Confirmed live: even with the 45px width declared above, the parent
".input-group" is a flex row with several elements crammed into a
narrow cart line (buttons, quantity, price, remove icon) — with
flex-shrink at its default of 1, the row was compressing this button
down to 36px actual rendered width to fit, while height (the flex
container's cross-axis, unaffected by shrink) stayed correctly at
45px. That's the real "narrow rectangle" — width was the one actually
wrong, not height. flex-shrink: 0 stops it from ever being compressed
below its declared width. */
flex-shrink: 0;
display: flex !important;
align-items: center;
justify-content: center;
}
/* The base rule above wins against theme.css via !important + higher
specificity — which also means it wins against .fancy-secondary-btn:hover
(a plain 2-class selector) for the SAME reason, blocking the hover color
change. Same selector chain + :hover beats both. */
#cart .product-line-grid-right .input-group .input-group-btn > .btn:hover {
background-color: var(--cndy-candy-pink) !important;
border-color: var(--cndy-candy-pink) !important;
color: var(--cndy-solid-white);
}
#cart .product-line-grid-right .input-group.bootstrap-touchspin .form-control {
background: var(--cndy-solid-white);
border: 2px solid var(--cndy-dark-gray) !important;
border-radius: 5px;
width: var(--cndy-control-minheight) !important;
height: var(--cndy-control-minheight) !important;
/* Same flex-shrink compression as the +/- buttons just above (same flex
row, same default flex-shrink: 1) — this input was getting squeezed
narrower than its declared width too. */
flex-shrink: 0;
}
#cart .product-line-grid-right .input-group.bootstrap-touchspin .form-control:focus {
border-color: var(--cndy-almost-black) !important;
}
.fancy-product-price {
display: flex;
padding: 0px;
}
.fancy-product-price div {
line-height: 35px;
margin: 0px 5px 0px 0px;
}
.fancy-product-price div.regular-price {
position: relative;
bottom: -4px;
}
.fancy-product-price .product-price-qty {
color: var(--cndy-candy-pink);
font-weight: 700;
padding: 0px 0px 0px 10px;
position: relative;
bottom: -4px;
}
.fancy-total {
padding: 0px 0px 0px 15px;
}
.regular-price {
color: var(--cndy-dark-gray);
font-size: 16px;
}
/* Sticky add-to-cart bar: its +/- buttons aren't TouchSpin at all — plain
divs inserted by an_stickyaddtocart's own front.js
(".quantity-button.quantity-up"/".quantity-down", already flanking the
input left/right in the DOM). front.css restyles them with "border: 0
!important" and an unscoped "width: 35px" — the !important border has
to be matched with our own (same var() fancy-btn itself uses, so it
still tracks a fancy-btn restyle); width just needs equal-or-later
specificity, which this already has (same 2-class selector, loaded
after front.css). */
.an_stickyAddToCart.an_stickyAddToCart .an_stickyAddToCart-qty-container {
border-radius: 0;
overflow: visible;
gap: 8px;
}
/* Same selector as front.css's own (doubled ".an_stickyAddToCart" class is
its own specificity trick, matched here) — loaded after it, so this wins
on source order alone, no !important needed. */
.an_stickyAddToCart.an_stickyAddToCart .an_stickyAddToCart-qty {
background: var(--cndy-solid-white);
border: 2px solid var(--cndy-dark-gray);
border-radius: 5px;
min-width: var(--cndy-control-minheight);
text-align: center;
}
.an_stickyAddToCart.an_stickyAddToCart .an_stickyAddToCart-qty:focus {
border-color: var(--cndy-almost-black);
}
/* front.css's ".an_stickyAddToCart .quantity-button" sets "border: 0
!important" — a real border can't win against that without matching
!important ourselves, so this fakes one with box-shadow instead (a
property front.css never touches here, so no specificity fight at all).
Colors still reference the same fancy-btn variables, so a future
fancy-btn restyle (border color, hover color) still carries over. */
.an_stickyAddToCart .quantity-button {
width: var(--cndy-control-minheight);
box-shadow: inset 0 0 0 2px var(--cndy-almost-black);
}
.an_stickyAddToCart .quantity-button:hover {
box-shadow: inset 0 0 0 2px var(--cndy-candy-pink);
}
.an_stickyAddToCart .js-an_stickyAddToCart-add-to-cart .fa-cart-plus {
margin-right: 5px;
}
/*****END: CART/STICKY QUANTITY STEPPER*****/
/* Cart page, mobile: cart-detailed-product-line.tpl now renders a SECOND
trash icon (".cndy-remove-from-cart-mobile") right inside the quantity
column, hidden on desktop via "hidden-md-up" — the original
(".remove-item-wrap", theme.css pins it "position:absolute; top:-2px;
right:0" below 767px, disconnected from the stepper) is hidden on
mobile instead via "hidden-sm-down". Just needs the shared row to
actually lay the two out side by side. */
@media (max-width: 767px) {
.cndy-qty-row-mobile {
display: flex;
align-items: center;
gap: 8px;
}
.cndy-remove-from-cart-mobile {
width: var(--cndy-control-minheight);
flex: none;
}
}
.product-quantities-label,
.product-brand-label,
.product-sku-label {
font-size: 18px;
margin: 0px;
}
.product-quantities-number,
.product-brand-link,
.product-sku-sku {
font-weight: 900;
}
.product-brand-link {
text-decoration: underline;
}
.product-brand-link:hover {
color: var(--cndy-candy-pink);
text-decoration: underline;
}
.an-bi-item-head {
margin-top: -3px;
margin-bottom: 0px;
line-height: 1rem;
}
.an-bi-item {
padding: 0px 0px 20px 0px;
}
.an-bi-image {
flex: 40px 0 0;
width: 40px;
margin-right: 15px;
text-align: center;
}
.an-bi-image img {
max-height: 40px;
}
.an-bi-title {
font-weight: 900;
}
#accordion {
margin: 40px 25px 0px 25px;
}
/*****END: PRODUCT PAGE*****/
/*****FEATURED PRODUCTS*****/
#product .featured-products h2, .product-accessories .h1 {
text-align: center;
font-family: var(--cndy-font-titles);
line-height: 1;
margin: 0px 25px 20px 25px;
font-size: 50px;
text-transform: none;
}
#product .featured-products .products {
margin: 0px 20px;
}
@media (min-width: 992px) {
.product-accessories .owl-carousel .owl-stage-outer {
padding: 0px;
margin: 0px;
}
}
#product .product-accessories .products {
padding: 0px 25px;
}
/*****END: FEATURED PRODUCTS*****/
/*****CART*****/
@media (max-width: 767px) {
.cart-item .product-line-grid .product-line-actions .col-xs-2, .cart-item .product-line-grid .product-line-actions .col-xs-12 {
position: static;
padding: 0px;
}
}
#cart #wrapper {
padding-top: 42px;
}
.cart-grid {
padding: 0px 10px;
}
.cart-grid .card-block h1 {
margin: 10px 0px 20px 0px;
line-height: 1;
font-family: var(--cndy-font-titles);
}
.cart-grid-body .cart-overview {
border: 2px solid var(--cndy-light-gray);
border-radius: 5px;
}
#cart .cart-item {
border: none;
padding: 20px;
}
.product-image.media-middle img {
border: 2px solid var(--cndy-light-gray);
border-radius: 5px;
}
.cart-line-product-actions i {
background: transparent;
color: unset;
border: none;
width: var(--cndy-control-minheight);
padding: 10px 0px;
height: 40px;
}
.cart-line-product-actions i:hover {
background: transparent;
}
.product-line-grid-right .cart-line-product-actions .remove-from-cart, .product-line-grid-right .product-price .remove-from-cart {
color: unset;
display: inline-block;
margin: 0px;
padding: 0px;
}
.cart-grid-right {
padding: 0px 15px;
margin-top: 60px;
}
.cart-detailed-totals .card-block.cart-summary-totals {
margin: 0px;
padding: 0px;
border: none;
}
.cart-summary-title {
color: var(--cndy-almost-black);
text-align: center;
}
.cart-summary-value {
font-size: 40px;
color: var(--cndy-candy-pink);
font-weight: 900;
text-align: center;
padding: 0px;
}
.cart-summary-blurb {
padding: 0px 20px;
font-size: 16px;
line-height: 1.1rem;
}
.cart-detailed-actions {
padding: 10px 20px 20px 20px;
border: 0;
}
.fancy-checkout-btn {
font-size: 24px;
height: 90px;
}
.fancy-checkout-btn:before,
.fancy-checkout-btn:after {
font-family: "Font Awesome 7 Free";
font-weight: 900;
content: "\f105\f105\f105";
display: inline-block;
font-size: 18px;
margin: 0px 10px;
padding: 0px;
letter-spacing: 5px;
}
.fancy-checkout-btn i {
width: fit-content;
margin: 0px 5px;
font-size: 18px;
}
.cart-grid-body .no-items {
text-align: center;
width: 100%;
}
/*****END: CART*****/
/*****CMS PAGE*****/
#cms #wrapper {
padding-top: 42px;
}
.page-cms #content-wrapper {
padding: 0px 40px;
}
#cms .page-header {
margin: 0px;
}
#cms .page-header h1 {
text-align: center;
font-family: var(--cndy-font-titles);
line-height: 1;
font-size: 50px;
margin: 0px 0px 40px 0px;
}
.page-content.page-cms h2 {
text-align: left;
font-family: var(--cndy-font-titles);
line-height: 1;
font-size: 30px;
margin: 40px 0px 0px 0px;
}
#cms h3 {
text-align: left;
font-family: var(--cndy-font-body);
line-height: 1;
font-size: 20px;
font-weight: 900;
margin: 25px 0px 0px 0px;
}
#cms #content p {
text-align: justify;
margin: 10px 0px 0px 0px;
}
/*****END: CMS PAGE*****/
/*****SEARCH PAGE*****/
#search #main h2 {
text-align: center;
font-family: var(--cndy-font-titles);
line-height: 1;
font-size: 50px;
margin: 0px !important;
}
/*****END: SEARCH PAGE*****/
/*****BLOG*****/
#module-anblog-list #wrapper,
#module-anblog-blog #wrapper,
#module-anblog-category #wrapper {
padding-top: 42px;
}
#module-anblog-list #content-wrapper h1,
#module-anblog-blog .blog-title,
.blog-content-wrapper h1 {
text-align: center;
font-family: var(--cndy-font-titles);
line-height: 1;
font-size: 50px;
margin: 0px;
}
.blog-item-type-1 .title {
text-align: center;
font-family: var(--cndy-font-titles);
line-height: 1;
font-size: 30px;
margin: 40px 0px 0px 0px;
}
.blog-item .blog-meta span,
.blog-detail .blog-meta span {
color: var(--cndy-almost-black);
font-size: 18px;
line-height: 1;
margin: 10px 0px 0px 0px;
}
.blog-item .blog-meta {
margin: 0px 0px 10px 0px;
padding: 0px;
font-size: unset;
}
.blog-content-wrapper {
margin: 0;
}
.blog-detail .blog-meta {
margin: 0px 0px 10px 0px;
padding: 0px;
font-size: unset;
display: block;
text-align: center;
}
.blog-detail .blog-description {
font-weight: unset;
line-height: 1;
font-size: 18px;
padding: 40px 40px 0px 40px;
}
.blog-detail .blog-description p {
margin: 0px 0px 15px 0px;
text-align: justify;
}
.blog-detail .blog-image {
margin: 20px 0px 0px 0px;
}
.blog-image img {
border-radius: 5px;
}
/*****END: BLOG*****/
/*****FOOTER******/
.footer-container {
background: var(--cndy-almost-black);
padding: 0px;
}
/* theme.css has "#checkout.checkout-minimize .footer-container { background: #fff; ... }"
(id + 2 classes) — made sense back when the minimized checkout footer
only showed the copyright bar; now that displayFooter's About Us content
renders there too (checkout/_partials/footer.tpl), it needs the same dark
background as everywhere else. Same selector to win on it. */
#checkout.checkout-minimize .footer-container {
background: var(--cndy-almost-black);
}
.footer-container .container {
padding: 0px;
}
.footer-container .container .row {
margin: 0px;
}
.footer-left {
display: none;
}
.footer-container .anbanners-wrapper {
align-items: start;
display: inline;
}
.footer-container .an_banner.an_banner-type1 .an_banner-content {
padding: 0px;
}
.footer-container .an_banner.an_banner-type1 {
display: inline-block;
vertical-align: top;
justify-content: normal;
padding: 0px;
}
.footer-container .an_banner.an_banner-type1 .an_banner-text {
display: inline-block;
}
.footer-container .an_banner.an_banner-type1 div.an_banner-text {
padding: 40px;
}
.footer-container .an_banner.an_banner-type1 .an_banner-text .an_banner-title {
margin-top: 0px;
margin-bottom: 15px;
font-family: var(--cndy-font-titles);
}
#footer .anbanners-wrapper p.an_banner-title {
color: var(--cndy-candy-pink);
font-size: 27px;
}
.an_banner.an_banner-type1 .an_banner-text p:not(.an_banner-title) {
line-height: 1.5;
}
.fancy-footer-block {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
}
.fancy-footer-rte {
display: flex;
}
.fancy-footer-icon {
padding-right: 10px;
color: var(--cndy-candy-pink);
position: relative;
top: 3px;
}
.fancy-footer-newline {
clear: left;
margin-top: 10px;
}
.fancy-footer-social {
font-size: 30px;
margin-top: 20px;
margin-right: 15px;
left: -2px;
}
img.fancy-payment-method {
width: 60px !important;
margin-right: 10px;
margin-bottom: 10px;
}
.copyright-container {
background: var(--cndy-dark-gray);
margin: 0px;
}
/*****END: FOOTER******/
/*****SOCKET******/
.copyright-container .container, .copyright-container .container .row {
padding: 0px;
}
.an_copyright {
margin: 15px 25px;
padding: 0px;
display: flex;
justify-content: space-between;
align-items: center;
}
.fancy-socket-logo {
display: inline-block;
float: left;
}
.fancy-socket-blurb {
display: inline-block;
float: right;
}
#footer .copyright-container p {
text-align: right;
font-size: 11px;
line-height: 1.5;
}
/* an_stickyaddtocart's front.js adds an inline padding-bottom to #footer
(equal to the sticky bar's height) whenever the sticky add-to-cart bar
is visible, so the fixed bar doesn't cover the footer/socket — but it
leaves an ugly blank white gap between the socket and the bar instead.
!important is needed here since it's overriding an inline style set
directly by JS, not a stylesheet rule. */
#footer {
padding-bottom: 0 !important;
}
/*****END: SOCKET******/
/*****LOGIN PAGE*****/
/* Login page: two-column account gate (existing customer login left,
create-account CTA right). Wider content area; columns stretch to equal
height so both "Already customer?" / "New customer" titles land on the
same line, and the divider between them runs the full height. */
.page-authentication #content {
max-width: 1100px;
}
/* Drop the generic "Log in to your account" H1: each column now has its own
"Already customer?" / "New customer" heading at the same level instead. */
.page-authentication .page-header {
display: none;
}
.account-gate {
display: flex;
flex-wrap: wrap;
align-items: stretch;
padding: 40px 0;
}
.account-gate-login h3,
.account-gate-register h3 {
text-align: center;
}
.account-gate-register {
display: flex;
flex-direction: column;
text-align: center;
}
/* .register-cta (the order-items layout (#order-items and
its .order-line/.qty rules, previously here) with a card matching the
checkout sidebar's cart-summary shape, plus two read-only address cards
alongside it — see order-confirmation-table.tpl for the reasoning and the
markup these rules style. */
#order-summary-column {
padding-right: 20px;
}
/* The two columns are plain floated Bootstrap cols by default — nothing
makes one match the other's height, so the shorter one (the order
summary, especially with 1 product) just stops well above the taller
one (two stacked address cards), leaving bare page background below it.
"row" as a flex container with align-items:stretch makes both columns
full-height; #order-summary-column then needs to be a flex column itself
so its one child (.order-summary-card) can flex-grow into that full
height instead of the column stretching while the card inside it stays
its own short natural size. #order-addresses-column doesn't need this —
its own two stacked cards already add up to its natural height, which is
the tall side setting the row's height in the first place. */
.order-confirmation-middle-section .card-block > .row {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
#order-summary-column {
display: flex;
flex-direction: column;
}
.order-summary-card,
.order-address-card {
background-color: var(--cndy-light-gray);
border-radius: 5px;
padding: 24px;
}
.order-summary-card {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.order-address-card + .order-address-card {
margin-top: 20px;
}
.order-summary-card-title {
text-align: center;
font-family: var(--cndy-font-titles);
font-size: 28px;
margin: 0 0 20px 0;
}
.order-summary-products {
display: flex;
flex-direction: column;
gap: 14px;
padding-bottom: 14px;
border-bottom: 2px solid var(--cndy-dark-gray);
}
.order-summary-product-line {
display: flex;
align-items: center;
gap: 14px;
}
.order-summary-product-image img {
width: 56px;
height: 56px;
object-fit: cover;
border: 2px solid var(--cndy-dark-gray);
border-radius: 5px;
}
.order-summary-product-details {
flex-grow: 1;
}
.order-summary-product-qty {
font-size: 0.85rem;
font-weight: 700;
color: var(--cndy-candy-pink);
}
.order-summary-product-price {
font-weight: 700;
}
.order-summary-subtotals {
padding: 14px 0;
border-bottom: 2px solid var(--cndy-dark-gray);
}
.order-summary-line {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
/* Sits AFTER .order-summary-subtotals as its own sibling block specifically
so that div's own border-bottom lands between Tax and this line, not
below it — the divider needs to separate this row from the rest, not
trail all four together. */
.order-summary-total-line {
padding-top: 14px;
}
/* Same row shape as Subtotal/Shipping/Tax, just bolder to read as the
actual final figure. Replaced the old big standalone
.order-summary-total/-label/-value block that used to sit below this
list (see order-confirmation-table.tpl's comment on why). */
.order-summary-line-total {
font-weight: 700;
font-size: 1.1rem;
color: var(--cndy-candy-pink);
}
.order-address-card-title,
.order-confirmation-account-card h4 {
text-align: left;
font-family: var(--cndy-font-titles);
font-size: 28px;
margin: 0 0 12px 0;
}
.order-address-card-body {
line-height: 1.6;
}
.order-address-card-method {
margin: 14px 0 0 0;
padding-top: 14px;
border-top: 2px solid var(--cndy-dark-gray);
}
/* Same light-gray card treatment as .order-summary-card/.order-address-card
above, applied to the "Create an Account" block that was plain unstyled
content sitting below them. Now lives inside the same
.order-confirmation-middle-section > .card-block > .row > .col-md-12
structure as the row above it (order-confirmation.tpl) instead of trying
to replicate that positioning with its own margin — confirmed live the
two didn't actually line up (15px off), and that's simpler than finding
the exact number to match. */
.order-confirmation-account-card {
background-color: var(--cndy-light-gray);
border-radius: 5px;
padding: 24px;
margin-top: 30px;
}
/* .cndy-search-page-form's own "margin: 40px auto" centers it as a
standalone block — right for the search results page (its only content),
wrong here: it would float centered under this card's own left-aligned
heading/bullet list instead of lining up with them. Keeps that rule's
max-width (a full-width input+button row here would look just as
stretched), drops only the auto-centering. */
.order-confirmation-account-card .cndy-search-page-form {
margin: 20px 0 0 0;
}
@media (max-width: 991px) {
#order-summary-column {
padding-right: 15px;
}
#order-addresses-column {
margin-top: 24px;
}
}
/*****END: ORDER CONFIRMATION PAGE*****/
/*****PAYMENT ERROR PAGE (stripe_official override)*****/
.payment-error-box {
background-color: var(--cndy-light-gray);
border-left: 4px solid var(--cndy-pastel-red);
border-radius: 5px;
padding: 24px 24px 20px;
margin-bottom: 20px;
}
.payment-error-box p {
margin: 0 0 10px;
}
.payment-error-box p:last-child {
margin-bottom: 0;
}
.payment-error-fine {
font-size: 13px;
opacity: .75;
}
/* margin:auto on the button itself wasn't enough to center it live —
.fancy-btn's flex/width interaction with the rest of the cascade wasn't
cooperating. Centering via a flex wrapper instead sidesteps that: it
doesn't depend on the button's own width/margin resolving any particular
way, just on the wrapper distributing its child along the main axis. */
.payment-error-actions {
display: flex;
justify-content: center;
}
.payment-error-cta {
max-width: 400px;
width: 100%;
}
/*****END: PAYMENT ERROR PAGE*****/
/****HOME SLIDER *****/
.an_homeslider.owl-carousel.owl-drag .owl-item .an_homeslider-item img:not(.owl-lazy),
.an_homeslider.owl-carousel.owl-drag .owl-item .an_homeslider-item img.anhs-img-loaded {
position: absolute;
top: 25px;
left: 25px;
width: calc(100% - 50px);
height: calc(100% - 50px);
object-fit: cover;
border-radius: 5px;
transform-style: flat;
-moz-transform-style: flat;
}
.an_homeslider-block {
margin-bottom: 15px;
}
/****END : HOME SLIDER *****/
/*****PRICE SPLIT (currency / whole / cents)*****/
/* Structure created by assets/js/price-split.js — splits an already-
rendered, already-localized price string like "$16.95" into these three
spans wherever it appears on the site. .cndy-price-symbol/-whole are
plain style hooks (no rule needed yet); .cndy-price-cents is styled as a
superscript by default.
"vertical-align: super" (the obvious first choice) was inconsistent
across contexts — it shifts by a fraction of the font's own metrics, so
the same rule looked fine on a big product price but sat too high/low
next to the header cart badge's smaller text. Fixed "top" + resetting
line-height on all three parts avoids that, at the cost of needing a
number tuned by eye rather than a keyword. */
.cndy-price-symbol,
.cndy-price-whole,
.cndy-price-cents {
line-height: 1;
}
.cndy-price-cents {
font-size: 0.65em;
position: relative;
top: 0.185em;
vertical-align: super;
left: -0.05em;
}
/*****END: PRICE SPLIT*****/