/**
* Celebriti Fashion — site-specific overrides.
*
* Everything in this file is OUR customization on top of the "Ethics" template's
* vendor stylesheets (bootstrap.min.css, style.css). Those two files stay pristine/
* unmodified so template updates or diffs against the original are clean; every
* deviation from the template lives here instead, loaded last so it wins the cascade.
*
* Sections below are ordered by when they were introduced. Keep it that way —
* one rule (or tightly related group) per change, with a comment saying why.
*/
/* ==========================================================================
Utilities
========================================================================== */
/**
* Full-bleed section: use on the direct child of a section wrapper (alongside
* Bootstrap's `.container`) to make that section's content span the full
* viewport width instead of being capped at the boxed `.container` max-width.
* Reserved for hero banners, product/category grids, and promo image blocks —
* NOT for text-heavy or form content, which should stay in `.container` alone
* for readability. See CLAUDE.md "Edge-to-edge layout" for the full rule.
*
* Usage:
...
*
* The nested `.row` reset is required, not optional: Bootstrap's `.row` ships
* a `margin-left/right: -12px` specifically to cancel `.container`'s own
* 12px padding. Zeroing the container's padding without also zeroing the
* row's margin leaves that -12px with nothing to cancel, so the row (and
* everything in it) hangs 12px past the viewport edge on both sides —
* introducing a horizontal scrollbar site-wide. This is why edge-to-edge
* sections started scrolling horizontally; fix lives here so every current
* and future `.full-bleed` section gets it for free.
*/
.full-bleed {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
.full-bleed > .row {
margin-left: 0;
margin-right: 0;
}
/* ==========================================================================
Header logo (header1 variant — every non-home page)
========================================================================== */
/**
* header.header1 has no width constraint on its logo in the vendor CSS —
* it silently relied on the old template logo's small native SVG size. Our
* replacement logo file has no such implicit size, so it rendered at full
* native resolution and overlapped the page. Matches header.header4 (home
* page)'s own explicit 114px rule.
*/
header.header1 .header-logo a img {
width: 114px;
}
/**
* The sticky header (header.header1.sticky, toggled by main.js on scroll)
* inherits header.header1's own padding, which the vendor CSS only ever
* shrinks once (to `20px 2%` under 1199px) and never again — so a phone
* gets the exact same padding as a small tablet. Combined with the 114px
* logo above (also flat, no mobile reduction), the sticky bar came out to
* ~154px tall on a 390px-wide phone, eating close to a fifth of the
* viewport. Shrink both the padding and the logo further at the two
* smaller breakpoints already used elsewhere on the site (767px, 576px).
*/
@media (max-width: 1199px) {
header.header1 {
padding: 12px 4%;
}
header.header1 .header-logo a img {
width: 84px;
}
}
@media (max-width: 767px) {
header.header1 {
padding: 10px 4%;
}
header.header1 .header-logo a img {
width: 68px;
}
}
@media (max-width: 576px) {
header.header1 {
padding: 8px 4%;
}
header.header1 .header-logo a img {
width: 56px;
}
}
/* ==========================================================================
Product card quick-view overlay — click-through fix
========================================================================== */
/**
* The `.overlay` div (Add to Cart button, shown on hover) is absolutely
* positioned on top of the product image's own link, at 100% width/height.
* It has no pointer-events rule, so once visible on hover it intercepted
* clicks across the whole image — including empty space with no button —
* blocking the underlying link to the product page. Only the small icon
* buttons inside it (cart-area, wishlist/quick-view) should stay clickable.
*/
.product-card .product-card-img .overlay {
pointer-events: none;
}
.product-card .product-card-img .overlay .cart-area,
.product-card .product-card-img .overlay .view-and-favorite-area {
pointer-events: auto;
}
/* ==========================================================================
Discount section (home page) — readable text over photo banners
========================================================================== */
/**
* Three of the four discount-section cards used dark text (var(--title-color)
* / #2E2E2E) meant for a light background, but sit on top of photos — making
* them unreadable. Match the one card that already used white correctly.
*/
.home2-discount-section .discount-section-right-section.style-2 .right-section-content a {
color: var(--white-color);
background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 98%);
}
.home2-discount-section .discount-section-right-section .right-section-content span {
color: var(--white-color);
}
.home2-discount-section .discount-section-right-section .right-section-content h4 {
color: var(--white-color);
}
.home2-discount-section .discount-section-right-section .right-section-content .shop-now-btn {
border-color: var(--white-color);
color: var(--white-color);
}
.home2-discount-section .discount-section-right-section .discount-section-bottom-content h4 {
color: var(--white-color);
}
/* ==========================================================================
Breadcrumb hero (every inner page) — shorter, with text nudged up
========================================================================== */
/**
* Client wanted the breadcrumb hero shorter (~40% cut from the bottom) while
* keeping the same top padding. Zeroing padding-bottom is the practical limit
* via padding alone (see conversation history for the exact math) — gets to
* ~35.6% without also touching padding-top.
*/
.breadcrumb-section {
padding-bottom: 0;
}
@media (max-width: 991px) {
.breadcrumb-section {
padding-bottom: 0;
}
}
@media (max-width: 576px) {
.breadcrumb-section {
padding-bottom: 0;
}
}
/**
* With padding-bottom removed, the heading/breadcrumb text sat flush against
* the bottom edge of the hero image. Shift it up via transform (visual only,
* doesn't affect the section's box height, so the hero stays the same size).
*/
.breadcrumb-section .banner-content {
transform: translateY(-28px);
}
@media (max-width: 991px) {
.breadcrumb-section .banner-content {
transform: translateY(-18px);
}
}
@media (max-width: 576px) {
.breadcrumb-section .banner-content {
transform: translateY(-14px);
}
}
/* ==========================================================================
Home page header (header4.home2-header) — shorter, logo + wordmark inline
========================================================================== */
/**
* Vendor rule was `padding: 20px 0`, making the header taller than needed.
* Client wants it shorter — drop the vertical padding entirely.
*/
header.header4.home2-header {
padding: 0;
}
/**
* The logo link contains both the crest image and a separate "Celebriti
* Fashion" wordmark (an
, which is block-level by default) — it wrapped
* onto its own line below the image. Force them into a single row on laptop
* screens and up; make the
lose its default block margins so it aligns
* cleanly next to the image instead of adding vertical whitespace.
*/
@media (min-width: 992px) {
header.header4.home2-header .header-logo a {
display: flex;
align-items: center;
gap: 10px;
}
header.header4.home2-header .header-logo a span h4 {
margin: 0;
white-space: nowrap;
}
}
/* ==========================================================================
About page video thumbnail — image wasn't responsive
========================================================================== */
/**
* The vendor CSS never gave `.video-section-image img` a `width: 100%` rule,
* so it always rendered at its literal native pixel size instead of filling
* its (now full-bleed) container — left a visible gap on the right whenever
* the source image's native width didn't exactly equal the container's
* rendered width. Surfaced when the hero-dimension photo was swapped in,
* but it's a pre-existing gap in the vendor rule, not specific to that image.
*/
.video-section-image img {
width: 100%;
}
/* ==========================================================================
Cart page — "remove" is now a real