/* ===========================================================================
BITS brand palette
---------------------------------------------------------------------------
Ported from BITS-PRODUCT/client/src/index.css so the storefront and the
admin dashboard read as one product. The theme shipped green (#629D23);
the house colour is the orange from the Black I mark.
Loaded from layout.tsx with a : it already contains one (Shop
Now), and nesting anchors is invalid HTML -- browsers silently close the
outer one, so the markup that renders is not the markup written. Instead the
real link inside grows an invisible layer covering the card, the standard
"stretched link" pattern.
This is why the "Weekend Discount" pill became a : it was a second
, and a link sitting on top of a stretched link swallows those clicks.
It pointed at /shop, the same destination as Shop Now, so nothing was lost.
The card is the containing block because it is position: relative and
nothing between it and the anchor is positioned. */
.single-feature-card .shop-now-goshop-btn::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: 6px;
}
/* --- Product details gallery ----------------------------------------------
The main image keeps its natural size, as the theme intended -- it was
briefly capped at 380px and that cap has been removed. The only rules left
on it are max-width:100% and height:auto, so an image wider than its column
scales down instead of overflowing the layout.
Worth knowing: because nothing constrains it, page layout follows whatever
dimensions get uploaded. If product photography is not a consistent size,
this section is where to fix it.
The thumbnail strip IS still sized (--pdp-thumb). Six unconstrained
thumbnails at full resolution would each be as large as the main image. */
:root {
/* One fixed box for the main image on every product page.
min() so it also fits the viewport on a short screen: 60vh keeps the whole
image, the price and the buttons visible without scrolling, which a tall
portrait photo at its natural height does not. */
--pdp-image: min(520px, 60vh);
/* Width as well as height, so the card is the same rectangle on every
product -- a portrait photo and a square one now sit in an identical box
instead of the box shrinking to fit a narrow image.
100% is the second term so the card still fits its column on a laptop and
on mobile, where a flat 440px would overflow. */
--pdp-image-width: min(460px, 100%);
--pdp-thumb: 72px;
}
/* .details-product-area is a flex row, but neither child had a flex rule --
both defaulted to flex: 0 1 auto, meaning "size to your content". So
narrowing the image did not widen the text beside it; it just left a gap.
The image column is now fixed and the content column takes everything else.
Its gap is set further down, with the rest of the spacing decisions. */
/* The image column, sized by the box above rather than by whatever was
uploaded. Without this the page changed shape per product -- a 479x639
portrait made a tall column, a square SVG a short one. */
.rts-product-details-section2 .product-thumb-area {
flex: 0 0 auto;
/* Matches the card, so the thumbnail strip underneath wraps within the same
width instead of running wider than the image it belongs to. */
width: var(--pdp-image-width);
max-width: 100%;
}
/* min-width: 0 matters. A flex item's default minimum is its content size, so
a long product name or an unbroken word would push this column wider than
its share and squeeze the image instead of wrapping. */
.rts-product-details-section2 .contents {
flex: 1 1 auto;
min-width: 0;
}
/* Fixed height AND width, identical on every product.
object-fit: COVER, so the picture reaches the frame's rounded edges on all
four sides. It was `contain`, which scales the image until it fits entirely
-- a 479x639 portrait in a 560x520 box scaled to its height and left about
85px of white down each side, inside the border. That band read as a gap
between the photo and the text beside it.
The trade: cover fills the frame by cropping whatever overflows, centred. A
photo much taller or wider than the frame loses its edges. */
.rts-product-details-section2 .product-thumb-area .product-thumb {
width: var(--pdp-image-width);
height: var(--pdp-image);
padding: 0;
background: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.rts-product-details-section2 .product-thumb-area .product-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
/* Matches the frame, so the corners are not square underneath its radius. */
border-radius: 6px;
}
.rts-product-details-section2 .product-thumb-area .product-thumb-filter-group .thumb-filter img {
width: var(--pdp-thumb);
height: var(--pdp-thumb);
object-fit: cover;
border-radius: 4px;
}
/* Six thumbnails at 72px plus gaps overflow the narrowed column, so the strip
wraps instead of pushing the layout wider. */
.rts-product-details-section2 .product-thumb-area .product-thumb-filter-group {
flex-wrap: wrap;
gap: 10px;
}
/* The theme spaces thumbnails with margin-right; with gap doing that job the
margin would double the spacing on every one. */
.rts-product-details-section2 .product-thumb-area .product-thumb-filter-group .thumb-filter {
margin-right: 0;
}
/* Wishlist heart, over the top-right of the main product image.
Replaces the "Add To Wishlist" row that sat beside "Share On social". */
.rts-product-details-section2 .product-thumb.pdp-thumb-wrap {
position: relative;
}
.pdp-wishlist {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
border-radius: 50%;
background: var(--color-surface);
color: var(--color-body);
cursor: pointer;
padding: 0;
transition: 0.25s;
box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
}
.pdp-wishlist:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Filled and branded once the item is in the wishlist, so the control shows
state rather than just being a button that was pressed. */
.pdp-wishlist.is-active {
color: var(--color-primary);
border-color: var(--color-primary);
background: var(--color-primary-soft);
}
.pdp-wishlist i {
font-size: 17px;
line-height: 1;
}
/* Add to Cart: equal padding either side.
The real cause of the imbalance was the duplicated .arrow-icon in the markup
(opacity 0, order:-2) putting an invisible icon to the left of the label.
That is removed, so the theme's symmetric 25px now actually reads as
symmetric; this restates it so a theme change cannot silently undo it. */
.product-bottom-action .rts-btn.with-icon {
padding-inline-start: 25px;
padding-inline-end: 25px;
justify-content: center;
}
/* --- Contact page banner --------------------------------------------------
Placeholder in place of the theme's contact/01.jpg. Overridden here rather
than edited in style.css, so the original path survives for when real
photography arrives. */
.rts-contact-main-wrapper-banner {
background-image: url(/assets/images/contact/placeholder-banner.svg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* --- Contact page FAQ accordion -------------------------------------------
Sits where the decorative image used to, beside the contact form. */
.contact-faq-item {
border-bottom: 1px solid var(--color-border);
}
.contact-faq-item:last-child {
border-bottom: 0;
}
/* width:100% here is deliberate -- the row should span the column so the
+/- sits hard right, which is the opposite of the icon-strip button
further down this file. */
.contact-faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 0;
border: 0;
background: transparent;
text-align: left;
font-size: 15px;
font-weight: 600;
color: var(--color-heading-1);
cursor: pointer;
transition: 0.2s;
}
.contact-faq-q:hover {
color: var(--color-primary);
}
.contact-faq-item.is-open .contact-faq-q {
color: var(--color-primary);
}
.contact-faq-q i {
flex: 0 0 auto;
font-size: 13px;
}
.contact-faq-a {
padding: 0 0 16px;
font-size: 14px;
line-height: 1.7;
color: var(--color-body);
}
.contact-faq-a a {
color: var(--color-primary);
text-decoration: underline;
}
/* --- Cart in the card hover strip -----------------------------------------
The strip's other actions are s. The cart one is a so it can
be tabbed to and disabled, which means undoing the browser's button defaults
and the theme's global `button { width: 100% }` -- without the width reset
it claims the whole strip and pushes Quick View onto its own line. */
.action-share-option button.single-action {
width: auto;
flex: 0 0 auto;
padding: 0;
border: 0;
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
/* The theme centres its spans by line-height; a button needs to be told. */
display: inline-flex;
align-items: center;
justify-content: center;
}
.action-share-option button.single-action:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* --- Footer ---------------------------------------------------------------
The rebuilt footer has five columns where the theme laid out four plus a
newsletter block, so the widths need restating. */
.footer-main-content-wrapper {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: space-between;
}
.footer-main-content-wrapper .single-footer-wized {
flex: 1 1 180px;
min-width: 0;
}
/* The contact column carries an address and an email, so it needs more room
than a list of short links. */
.footer-main-content-wrapper .single-footer-wized:first-child {
flex: 1 1 280px;
}
.footer-main-content-wrapper .footer-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-main-content-wrapper .footer-nav li {
margin-bottom: 10px;
}
.footer-main-content-wrapper .footer-nav a:hover {
color: var(--color-primary);
}
/* Email addresses are long and unbreakable; without this the contact column
pushes the whole row wider on a narrow screen. */
.footer-main-content-wrapper .opening-hour a {
word-break: break-word;
}
.rts-copyright-area {
border-top: 1px solid var(--color-border);
padding: 20px 0;
}
/* space-between was for the two lines that used to sit here -- copyright on
the left, GSTIN on the right. With a single credit line left, that pushed it
to the left edge; centred is what one line wants. */
.copyright-area-inner-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
gap: 10px;
font-size: 14px;
}
/* --- Stock + quantity on one row ------------------------------------------
The stepper moved out of .cart-counter-action and up beside the stock text.
It previously shared that row with the cart icon and Buy Now, so three
controls competed for one line; the buttons now have it to themselves.
The stepper keeps its own width and the stock text takes the rest, so a
long "120 in stock" and a short "Out of stock" both leave the stepper in
the same place across a row of cards. */
.single-shopping-card-one .stock-qty-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.single-shopping-card-one .stock-qty-row .availability {
flex: 1 1 auto;
min-width: 0;
margin: 0;
}
/* Overrides the width the theme fixes on .quantity-edit inside
.cart-counter-action; here it sizes to its own content instead. */
.single-shopping-card-one .stock-qty-row .quantity-edit {
flex: 0 0 auto;
width: auto;
max-width: 92px;
margin: 0;
}
/* --- Feature / service strip icons ----------------------------------------
"Wide Assortment", "Easy Return Policy", "Best Prices & Offers",
"Support 24/7" -- and the same strip on the product page (ShortService).
These are INLINE SVGs in the JSX with fill="#629D23" written into each path,
not CSS. That is why they stayed green through the whole palette change:
converting style.css never touched them. All 44 paths now use
fill="currentColor", so they inherit whatever colour is set here and follow
the palette from now on.
Applied to the wrapper rather than the svg so a future icon using stroke
instead of fill picks it up too. */
.single-feature-area .icon,
.single-short-service-area-start .icon-area {
color: var(--color-primary);
}
/* ---------------------------------------------------------------------------
Product page: cart, Buy Now and Share on ONE row below 1200px.
All three were already on one row in the markup; what broke it was the words
"Share On social" beside the icon. Together with a padded cart button and
Buy Now holding its label's width, the three came to more than a phone is
wide, and the row wrapped -- one control per line, three deep.
The label goes and the icon stays. A share glyph is understood on its own,
and it is the third of three controls here, not something anyone has to
read to find. The button padding comes down with it; both of those need
!important only because the page writes its own padding inline, and an
inline style cannot be reached any other way.
--------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
.product-bottom-action {
gap: 8px !important;
}
.product-bottom-action .share-option-shop-details .single-share-option span {
display: none;
}
.product-bottom-action .share-option-shop-details .single-share-option {
gap: 0;
}
/* Matches the 35px share icon beside it, so the three controls read as one
set rather than two sizes. */
.product-bottom-action .rts-btn {
padding: 12px 16px !important;
font-size: 14px;
}
.product-bottom-action .share-option-shop-details .single-share-option .icon {
height: 44px;
width: 44px;
}
}
/* THE BAND IS NOT SHOWN BELOW 1200px ON THE PAGES THAT OPT OUT.
The wrapper is added by the product, cart and wishlist pages; every other
page keeps the band at every width, and all three keep it above 1200px where
the four cards cost a single line rather than four.
Those three have in common that they are the end of a task -- reading about
one product, or checking what you are about to pay for. Four general
reassurances stacked one per row underneath is a screen of scrolling between
the thing being decided and the footer. */
@media only screen and (max-width: 1199px) {
.service-strip-lg-only {
display: none;
}
}
/* The band's icons are no longer those inline SVGs: ShortService reads the
admin's Site Features now, and an entry there carries either a Font Awesome
class or an uploaded image. Both have to fill the same 70px white disc the
SVGs did, or the four cards sit at four different heights. */
.single-short-service-area-start .icon-area .short-service-icon {
font-size: 30px;
line-height: 1;
}
.single-short-service-area-start .icon-area .short-service-icon-img {
width: 40px;
height: 40px;
/* contain, not cover: these are logos and glyphs, and cropping one to fill a
circle would cut the mark rather than frame it. */
object-fit: contain;
}
/* --- Cart & wishlist: choosing what to buy --------------------------------
Both pages previously offered one action for the whole table -- checkout, or
Buy Now -- with no way to leave anything behind. These are the per-row and
select-all controls that fixed that. */
.cart-select-all {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
cursor: pointer;
font-weight: 600;
}
.cart-select-count {
display: block;
font-size: 11px;
font-weight: 400;
font-style: normal;
color: var(--color-body);
opacity: 0.75;
}
/* accent-color paints the browser's own checkbox in the house colour, which
keeps the native control -- and its keyboard behaviour and platform styling --
rather than rebuilding one out of divs. */
.cart-select-all input[type="checkbox"],
.cart-row-select {
flex: 0 0 auto;
width: 18px;
height: 18px;
accent-color: var(--color-primary);
cursor: pointer;
}
/* The row's checkbox sits before the remove X, which is already first in the
flex row; both need to stay put while the thumbnail and title take the space. */
.cart-row-select {
margin-right: 12px;
}
/* An unticked row is still there and still editable -- it is simply not part of
this order. Dimmed rather than hidden, so nothing appears to have vanished. */
.single-cart-area-list.is-unselected {
opacity: 0.45;
}
/* The controls stay at full strength: a row you cannot see well enough to
re-tick, or whose remove button looks disabled, is a trap. */
.single-cart-area-list.is-unselected .cart-row-select,
.single-cart-area-list.is-unselected .close {
opacity: 1;
}
/* --- Anchor targets -------------------------------------------------------
The header is sticky, so a jump to #popular-picks would otherwise scroll the
section's top edge to y=0 -- directly underneath the header, hiding the
heading. scroll-margin-top reserves that height so the section lands below
it. Set on the element, not html{scroll-padding}, so it applies wherever the
section is used. */
#popular-picks {
scroll-margin-top: 120px;
}
/* --- All Products: horizontal category strip ------------------------------
Categories run across the top instead of down a sidebar, so the grid keeps
the full container width.
The strip wraps onto as many lines as it needs -- no sideways scrolling, so
every category is visible at once with nothing hidden off-screen. */
.shop-category-strip {
display: flex;
align-items: center;
/* Wrapping IS the intended behaviour here, not a fallback. The pills are
sized generously, so eleven of them take two lines at container width --
which is what the reference does. Centring means the shorter last line
sits under the middle of the one above rather than trailing off to the
left with a ragged gap. */
flex-wrap: wrap;
justify-content: center;
gap: 14px;
padding: 6px 0 22px;
margin-bottom: 10px;
}
.shop-category-strip.is-sub {
border-top: 1px solid var(--color-border);
padding-top: 20px;
}
/* Each pill is exactly as wide as its label plus padding -- flex: 0 0 auto
means "do not grow, do not shrink, size to content", so "Jeans" stays narrow
and "Leggings & Jeggings" gets only the room it needs. white-space: nowrap
stops a two-word label breaking inside its own pill.
border-radius: 999px is the capsule: any value past half the height rounds
the ends fully, so it stays a capsule whatever the text size. */
.shop-category-pill {
flex: 0 0 auto;
/* REQUIRED. The theme sets `button, select, textarea { width: 100% }`
globally (style.css). flex-basis:auto then resolves to that 100%, so every
pill claimed a full row and the strip became a vertical stack -- flex-wrap
was doing exactly what it was told. Resetting width is what makes
"size to content" mean size to content. */
width: auto;
padding: 13px 28px;
border: 2px solid var(--color-primary);
border-radius: 999px;
background: transparent;
color: var(--color-primary);
font-size: 14px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: 0.2s;
}
.shop-category-pill:hover {
background: var(--color-primary-soft);
}
.shop-category-pill.is-active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
/* The Back pill is a control, not a category, so it is muted -- otherwise it
competes with the categories for attention at the head of every row. */
.shop-category-pill.is-back {
border-color: var(--color-border);
color: var(--color-body);
}
.shop-category-pill.is-back:hover {
border-color: var(--color-body);
background: transparent;
}
/* Breadcrumb above the strip. Once the strip replaces itself on drill-down,
this is the only thing showing where you are. */
.shop-category-trail {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
font-size: 13px;
color: var(--color-body);
}
.shop-category-trail i {
font-size: 10px;
opacity: 0.6;
}
.shop-category-crumb {
width: auto;
background: none;
border: 0;
padding: 0 2px;
cursor: pointer;
color: var(--color-body);
font-size: 13px;
font-weight: 500;
}
.shop-category-crumb:hover {
color: var(--color-primary);
text-decoration: underline;
}
/* Sub-category pills, kept for any strip that still renders a second row:
same capsule shape, scaled down, lighter border. */
.shop-category-pill.is-sub {
padding: 9px 20px;
font-size: 12px;
letter-spacing: 0.05em;
border-width: 1px;
border-color: var(--color-primary-fill);
background: var(--color-primary-soft);
}
.shop-category-pill.is-sub.is-active {
background: var(--color-primary);
color: #fff;
}
/* --- Recommended Picks sidebar --------------------------------------------
Sticky, and at least four card-rows tall.
THE GOTCHA: Bootstrap's .row is display:flex, so its columns stretch to the
height of the tallest one by default. A stretched element has no room to
move within its container, and position:sticky silently does nothing.
align-self:flex-start is what shrinks the column back to its content height
and lets sticky engage -- without it the rules below have no visible effect.
One knob controls the height: --recommended-row, roughly the height of one
product card including its gutter. Four of those is the minimum box height.
Adjust that single value rather than the calc(). */
:root {
--recommended-row: 420px;
}
@media (min-width: 992px) {
.recommended-sidebar-col {
align-self: flex-start;
position: sticky;
/* Clears the sticky site header so the box does not slide under it. */
top: 100px;
}
/* The height goes on .single-filter-box, NOT its .sidebar-filter-main
wrapper. The wrapper has no styling of its own -- no border, no
background -- so making it tall just added invisible space below a box
that stayed the same size. The bordered box is the thing you see.
min() caps it at the viewport. Four card-rows is taller than most
screens, and a sticky element taller than the viewport can never be fully
seen: it pins at the top and its lower half sits permanently below the
fold, so those categories become unreachable while the grid scrolls past.
Four rows OR one screenful, whichever is smaller. */
.recommended-sidebar .single-filter-box {
min-height: min(calc(var(--recommended-row) * 4), calc(100vh - 140px));
display: flex;
flex-direction: column;
}
/* The category list stretches to fill whatever height the box ends up with,
spreading the entries down it rather than bunching them at the top above
a large empty area. */
.recommended-sidebar .filterbox-body {
flex: 1;
display: flex;
min-height: 0;
}
.recommended-sidebar .category-wrapper {
flex: 1;
display: flex;
flex-direction: column;
/* flex-start, NOT space-between. Spreading the rows down the box looked
even with ten placeholder categories, but the slack is divided between
whatever rows exist -- so three real ones put a large gap between "All
Products" and the first category. Rows stay their own height and the
leftover space simply sits at the bottom.
No overflow-y here. min-height is a floor, not a cap, so the box grows
when enough sub-categories are expanded -- nothing is clipped. */
justify-content: flex-start;
}
}
/* --- Sidebar accordion ----------------------------------------------------
Styled after the Meesho filter rail: no box around the whole thing, just
rows separated by hairlines, roomy vertical padding, a chevron on the right.
The theme's own sidebar look (a rounded 1px border wrapping everything,
30px of internal padding, a heading bar) is overridden below. */
.recommended-sidebar .single-filter-box {
border: 0;
border-radius: 0;
margin-bottom: 0;
}
.recommended-sidebar .filterbox-body {
padding: 0;
}
.recommended-sidebar .category-wrapper {
padding: 0;
}
/* One accordion entry: the row plus whatever it expands to. */
.rec-cat {
border-bottom: 1px solid #ececec;
}
.rec-cat:last-child {
border-bottom: 0;
}
.rec-cat-row {
display: flex;
align-items: center;
gap: 10px;
/* 18px top and bottom made a ten-category rail taller than the product grid
beside it, and most of that height was empty. Enough to keep the rows from
reading as a nav list, no more. */
padding: 11px 2px;
}
/* An open group is the one being read, so it gets the room instead: the parent
sits closer to its children, and the children clear the next category. */
.rec-cat.is-open > .rec-cat-row {
padding-bottom: 6px;
}
/* The label takes the free space so the count and chevron sit hard right. */
.rec-cat-name {
flex: 1;
background: none;
border: 0;
padding: 0;
text-align: left;
cursor: pointer;
font-size: 16px;
font-weight: 500;
line-height: 1.3;
color: var(--color-heading-1);
transition: color 0.2s;
/* One line per category. "Leggings & Jeggings" and "Children's Wear" would
otherwise wrap and make their rows twice the height of the others, which
breaks the even rhythm down the rail. 16px rather than 17px so the longest
label still clears the count and chevron in the narrow column. */
white-space: nowrap;
}
.rec-cat-name:hover {
color: var(--color-primary);
}
.rec-cat-name.is-active {
color: var(--color-primary);
font-weight: 700;
}
/* Fixed width, right aligned. Without it a two-digit count is wider than a
one-digit one and every chevron after it sits at a slightly different x --
the whole column of arrows looks crooked. */
.rec-cat-count {
font-size: 13px;
color: var(--color-body);
flex-shrink: 0;
min-width: 24px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Fixed width for the same reason, so rows without a chevron (All Products)
still line up with rows that have one. */
.rec-cat-toggle {
background: none;
border: 0;
padding: 0;
cursor: pointer;
color: var(--color-body);
font-size: 13px;
line-height: 1;
flex-shrink: 0;
width: 16px;
text-align: center;
}
.rec-cat-toggle:hover {
color: var(--color-primary);
}
/* Expanded children: indented, tighter, and quieter than their parent so the
hierarchy is readable without another divider line per child. */
.rec-cat-children {
padding: 2px 2px 18px 14px;
}
.rec-cat-child-row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
}
.rec-cat-child-row .rec-cat-name {
font-size: 15px;
font-weight: 400;
color: var(--color-body);
}
.rec-cat-child-row .rec-cat-name:hover,
.rec-cat-child-row .rec-cat-name.is-active {
color: var(--color-primary);
}
.rec-cat-child-row .rec-cat-name.is-active {
font-weight: 600;
}
/* ===========================================================================
THE SAME RAIL AS ONE BAR -- components/shop/CategoryDrilldown.tsx
Rendered instead of the rail above below 1200px, where the column of every
category stacked on top of the products rather than beside them. Closed, it
is one row naming the current category; open, it lists one level at a time.
No media query in here. The component swaps itself on matchMedia, so this
markup only ever exists on the widths it is for -- and these class names
appear nowhere else.
=========================================================================== */
/* NOT THE FULL WIDTH OF THE COLUMN. The bar is a control, and a control that
runs the whole width of the screen reads as a section heading instead -- the
rail it replaces was full-width because it WAS the column.
A cap rather than a percentage: the bar stays the same size whatever the
screen, so it does not creep toward heading-width on a tablet. The panel is
inside it and takes the same width.
190px is about as narrow as this goes while the rows still work -- the name
ellipses rather than wraps, so a long category is readable only as far as the
bar is wide, and the count and chevron still need their columns on the right.
The bar names the selection, so cutting it much shorter would stop it doing
that. */
.rec-drill {
max-width: 190px;
margin-bottom: 4px;
}
/* The bar. Deliberately the size of a form control rather than a heading: it
is the thing you tap, and it has to read as one. */
.rec-drill-bar {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
color: var(--color-heading-1);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
text-align: left;
cursor: pointer;
}
.rec-drill.is-open .rec-drill-bar {
border-color: var(--color-primary);
/* Square where the panel meets it, so the two read as one control. */
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.rec-drill-bar i {
flex-shrink: 0;
font-size: 13px;
color: var(--color-primary);
}
/* A long category name ellipsis rather than wrapping -- the bar's height is
what makes it read as a control, and a two-line one does not. */
.rec-drill-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rec-drill-panel {
border: 1px solid var(--color-primary);
border-top: 0;
border-radius: 0 0 10px 10px;
background: var(--color-surface);
/* A deep catalogue must not push the products off the screen: the panel
scrolls on its own once it is taller than about half a phone screen. */
max-height: 52vh;
overflow-y: auto;
}
.rec-drill-row {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: none;
border: 0;
border-top: 1px solid var(--color-border);
color: var(--color-heading-1);
font-size: 14.5px;
font-weight: 500;
line-height: 1.3;
text-align: left;
cursor: pointer;
}
/* The name takes the free space, so counts and chevrons line up down the right
edge however long the labels are. */
.rec-drill-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rec-drill-count {
flex-shrink: 0;
min-width: 24px;
text-align: right;
font-size: 12.5px;
font-weight: 400;
color: var(--color-body);
font-variant-numeric: tabular-nums;
}
.rec-drill-into {
flex-shrink: 0;
width: 14px;
text-align: center;
font-size: 12px;
color: var(--color-body);
}
.rec-drill-row.is-active {
color: var(--color-primary);
font-weight: 700;
background: var(--color-primary-soft);
}
/* Up one level. Tinted and set apart from the rows below it, because it moves
through the tree rather than choosing anything in it. */
.rec-drill-back {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
background: var(--color-primary-soft);
border: 0;
color: var(--color-primary);
font-size: 13px;
font-weight: 600;
text-align: left;
cursor: pointer;
}
.rec-drill-back i {
font-size: 11px;
}
.rec-drill-empty {
margin: 0;
padding: 14px;
border-top: 1px solid var(--color-border);
font-size: 13px;
color: var(--color-body);
}
/* Deliberately NOT max-height + overflow-y on the column. That was the first
attempt, but the box is four rows tall while the category list only fills
the top of it -- so it produced a scrollbar over empty space, which reads
as a bug. The categories all sit at the top and stay visible while pinned;
the extra height below them is just the box.
Revisit if the list ever grows past the viewport. */
/* Below 992px the sidebar sits above the grid in normal flow. Sticky there
would pin a full-width block over the products as you scroll. */
@media (max-width: 991px) {
.recommended-sidebar {
min-height: 0;
}
}
/* Shop Now in white, to match the title over the darkened image.
The plus icons are covered too -- the theme colours them separately, so
leaving them would give a white label with dark chevrons beside it. */
.single-feature-card .shop-now-goshop-btn,
.single-feature-card .shop-now-goshop-btn .text,
.single-feature-card .shop-now-goshop-btn i {
color: #ffffff;
}
/* Text stays selectable and the hover state still reads as a link. */
.single-feature-card:hover .shop-now-goshop-btn .text {
text-decoration: underline;
}
.single-feature-card .title {
color: #ffffff;
}
/* Gold, not a lighter version of the tile's own colour. These four cards are
painted in wine, berry, plum and rose now, so an accent drawn from the same
family disappears into whichever one it lands on; the warm half of the
palette is what reads on all four. */
.single-feature-card .title span {
color: var(--blush);
}
/* ---------------------------------------------------------------------------
Deepam Boutique logo sizing.
The theme's logo was a wide wordmark SVG with no height cap -- it was sized
by its own aspect ratio. The Deepam mark is a 447x447 square, so unconstrained
it renders as a large block and pushes the header rows apart. Height is
capped and width left auto so the square is never squashed.
--------------------------------------------------------------------------- */
.logo-search-category-wrapper .logo-area .logo {
height: 62px;
width: auto;
max-width: none;
}
@media (max-width: 991px) {
.logo-search-category-wrapper .logo-area .logo {
height: 50px;
}
}
@media (max-width: 575px) {
.logo-search-category-wrapper .logo-area .logo {
height: 44px;
}
}
/* Login and register cards: the theme's 57px cap assumed a wordmark. A square
mark at that width is tiny, so it gets a little more room. */
.registration-wrapper-1 .logo-area img {
max-width: 90px;
}
/* Invoice header and its "Powerby" footer stamp. */
.invoice-main-wrapper-1 .logo-top-area .logo img {
max-width: 110px;
height: auto;
}
.invoice-area-bottom .powerby img {
max-width: 70px;
height: auto;
}
/* ---------------------------------------------------------------------------
Popular Picks carousel, aligned with the Shop by Category tiles below it.
Two sections of cards sitting one above the other looked unrelated: the
carousel's slides took their height from their own content, so a two-line
product name made one card taller than its neighbour and the row of prices
stopped lining up. The category tiles have a fixed height and never do that.
Swiper sets an explicit height on each slide only when told not to; with
height:auto plus a flex row the slides stretch to the tallest in view, and
the card inside fills its slide.
--------------------------------------------------------------------------- */
.mySwiper-category-1 .swiper-wrapper {
align-items: stretch;
}
.mySwiper-category-1 .swiper-slide {
height: auto;
display: flex;
}
.mySwiper-category-1 .single-shopping-card-one {
width: 100%;
display: flex;
flex-direction: column;
}
/* The image box is what makes cards agree at a glance -- a portrait saree and a
square swatch would otherwise set two different card heights.
cover, not contain: contain fits the whole picture inside the box and leaves
blank strips down either side of anything that is not the box's shape, which
is what the empty space in these cards was. cover fills the width and trims
the overflowing edge instead. */
.mySwiper-category-1 .single-shopping-card-one .thumbnail-preview img {
width: 100%;
height: 220px;
object-fit: cover;
}
@media only screen and (max-width: 1199px) {
.mySwiper-category-1 .single-shopping-card-one .thumbnail-preview img {
height: 180px;
}
}
/* Body grows to fill the stretched card, so the price and Add to Cart sit on
the same line across every card in the row. */
.mySwiper-category-1 .single-shopping-card-one .body-content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.mySwiper-category-1 .single-shopping-card-one .body-content .cart-counter-action {
margin-top: auto;
}
/* ---------------------------------------------------------------------------
Categories dropdown.
Top-level categories only, as plain links -- the nested-submenu rules that
used to live here (per-level indent, a chevron repositioned to follow it) had
nothing left to style once the dropdown stopped rendering children. The
nesting is browsed in the shop sidebar instead.
What remains is the row itself: a long category name wraps rather than
sliding under anything, since the theme lays these out as a flex line.
--------------------------------------------------------------------------- */
#category-active-four .category-sub-menu li a span {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
/* ---------------------------------------------------------------------------
Contact page banner.
The theme's /assets/images/contact/01.jpg is a photograph of a woman in a
supermarket -- the grocery template's stock image, and nothing to do with a
saree boutique. Replaced with a branded band in the logo's maroon and gold.
The heading sits on top of this, so the artwork stays dark and low-contrast
deliberately: a busy image behind "Ask Us Question" would compete with it.
--------------------------------------------------------------------------- */
.rts-contact-main-wrapper-banner {
background-image: url(/assets/images/contact/deepam-contact-banner.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* The title and body text were dark, written for the light photograph. */
.rts-contact-main-wrapper-banner .contact-banner-content .title,
.rts-contact-main-wrapper-banner .contact-banner-content .disc {
color: #ffffff;
}
.rts-contact-main-wrapper-banner .contact-banner-content .disc {
opacity: 0.85;
}
/* ---------------------------------------------------------------------------
Autofilled fields.
Once the browser fills a field -- from a saved address, email or card -- it
paints its own background over whatever CSS asked for: a grey-blue in Chrome
and Edge, and there was no rule anywhere overriding it. So a form went from
white boxes to grey ones the moment autofill touched it.
Background-color is ignored on an autofilled input; an inset box-shadow the
height of the field is the one property that still paints, which is why this
looks indirect. The absurd transition delay stops the browser fading its own
colour back in a moment later.
--------------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #fbf1f0 inset;
box-shadow: 0 0 0 1000px #fbf1f0 inset;
/* The text itself is drawn by the browser too, so colour alone would not
take -- it needs the -webkit-text-fill-color property. */
-webkit-text-fill-color: var(--color-heading-1);
caret-color: var(--color-heading-1);
transition: background-color 100000s ease-in-out 0s;
border-color: #ecd3cb;
}
/* Firefox uses its own selector and does respect background-color. */
input:autofill,
textarea:autofill,
select:autofill {
background-color: #fbf1f0;
border-color: #ecd3cb;
}
/* ---------------------------------------------------------------------------
Product page: space around the image.
The white card behind the whole section carries `padding: 60px` on every
side, which is where most of the empty space to the left of the image came
from -- 60px of it before the picture even starts, and another 60px past the
text on the right. Halved horizontally; the vertical padding is left alone
because that spacing reads as intentional between sections.
--------------------------------------------------------------------------- */
.shopdetails-style-1-wrapper {
/* Less on the left than the right: the image starts at the left edge, and
the space in front of it was the most obvious. The right side keeps its
breathing room because text ends there. */
padding: 60px 30px 60px 16px;
}
@media only screen and (max-width: 991px) {
.shopdetails-style-1-wrapper {
padding: 30px 16px;
}
}
@media only screen and (max-width: 767px) {
.shopdetails-style-1-wrapper {
padding: 20px 12px;
}
}
/* Nothing between the card's edge and the picture. The image is sized to fill
this box exactly (object-fit: contain), so side padding here would shrink it
and reintroduce the gap the width was widened to remove. */
.rts-product-details-section2 .product-thumb-area .product-thumb {
padding-left: 0;
padding-right: 0;
}
/* The image column sits flush against the card edge rather than inheriting the
theme's 30px right margin on top of the flex gap below. */
.rts-product-details-section2 .product-thumb-area,
.rts-product-details-section .product-thumb-filter-group.left {
margin-left: 0;
margin-right: 0;
}
/* Gap between the image and the details beside it. 30px -> 14px -> 6px -> 0:
now that the photo fills its frame edge to edge, the frame's own border is
the separation, and any gap on top of it reads as a stray column of space.
The text block carries its own internal padding, so nothing touches. */
.rts-product-details-section2 .details-product-area {
gap: 0;
}
/* Nothing of its own in front of the text: the gap above is the only spacing
between the image and this column, so a stray padding or margin here would
add to it invisibly. */
.rts-product-details-section2 .contents {
padding-left: 0;
margin-left: 0;
}
/* The left column's own gutter, on top of the card padding above.
`.row.g-5` gives every column 24px of horizontal padding, so the image sat
16px + 24px = 40px in from the card edge. Trimming the left gutter on the
image column alone brings the picture closer without pulling the details
column or the row's right edge with it. */
.shopdetails-style-1-wrapper > .row > [class*="col-"]:first-child {
padding-left: 6px;
}
@media only screen and (max-width: 991px) {
.shopdetails-style-1-wrapper > .row > [class*="col-"]:first-child {
padding-left: 10px;
}
}
/* ---------------------------------------------------------------------------
Focus rings, in the brand orange rather than Bootstrap's blue.
bootstrap.min.css ships `--bs-primary: #0d6efd` and paints every focused
button, input and select with `box-shadow: 0 0 0 .25rem rgba(13,110,253,.25)`.
On this site that reads as a stray blue outline on an otherwise orange page,
most visibly after clicking a button.
The ring is KEPT, not removed: it is the only thing telling a keyboard user
where they are. Only its colour changes.
--------------------------------------------------------------------------- */
.btn:focus,
.btn.focus,
.btn:focus-visible,
.rts-btn:focus,
.rts-btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus {
border-color: var(--color-primary);
outline: 0;
box-shadow: 0 0 0 0.2rem rgb(103 17 58 / 25%);
}
/* Everything else that takes focus -- links, custom buttons, the star rating,
the sidebar rows -- gets the same colour from the browser's own outline.
:focus-visible, so a mouse click does not leave a ring behind; only keyboard
navigation shows it. */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Native checkboxes and radios are painted by the browser, and Chrome's default
accent is the same blue. accent-color is the one property that reaches them
without rebuilding the control. */
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--color-primary);
}
/* Bootstrap's own checked state, for the places using .form-check-input. */
.form-check-input:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
/* ---------------------------------------------------------------------------
Buttons: the blue that was not ours.
bootstrap.min.css is loaded before the theme, and its `.btn-primary` sets
`border-color: #0d6efd` -- Bootstrap's own blue. The theme restyles the
background of `.rts-btn.btn-primary` but never touches the border, so the
blue stayed, most visibly on the cart and Buy Now buttons.
Focus is the same story: Bootstrap rings a focused button with a blue glow
(rgba(49,132,253,.5)). Keeping a visible focus ring matters for anyone using
a keyboard, so it is recoloured rather than removed.
--------------------------------------------------------------------------- */
.btn-primary,
.rts-btn.btn-primary {
border-color: var(--color-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.rts-btn.btn-primary:hover,
.rts-btn.btn-primary:focus,
.rts-btn.btn-primary:active {
border-color: var(--color-primary);
box-shadow: 0 0 0 0.2rem rgb(103 17 58 / 25%);
}
/* Disabled buttons -- an out-of-stock Buy Now -- keep the border in step with
the faded background rather than showing a full-strength orange outline. */
.btn-primary:disabled,
.rts-btn.btn-primary:disabled {
border-color: var(--color-primary);
box-shadow: none;
}
/* ---------------------------------------------------------------------------
Product page tabs: Product Details / Additional Information / Customer Reviews.
The image column's left gutter was trimmed to 6px to bring the picture close
to the card edge, and this block sits in that same column -- so the tab
labels and everything under them ended up flush against it too. The image is
a framed box and reads fine hard against the edge; running text does not.
--------------------------------------------------------------------------- */
/* The image + details row gets the SAME indent, so the picture's left edge
lines up with the tab labels underneath it. They are siblings in one column;
indenting only the lower half left the image sticking out to its left. */
.product-details-popup-wrapper.in-shopdetails,
.product-discription-tab-shop {
padding-left: 24px;
padding-right: 24px;
}
@media only screen and (max-width: 767px) {
.product-details-popup-wrapper.in-shopdetails,
.product-discription-tab-shop {
padding-left: 12px;
padding-right: 12px;
}
}
/* THE GAP ABOVE THE TABS.
Two rules stacked to make it: the block is written with the theme's `mt--50`
utility -- `margin-top: 50px !important` -- and the tab strip itself adds
`padding-bottom: 20px !important` under the labels. Fifty pixels of nothing
between the Buy Now row and the first tab, on a page where everything above
it is tightly set.
.product-discription-tab-shop.mt--50 is (0,2,0) against the utility's
(0,1,0), and !important on both sides means the more specific one wins --
which is the only way to reach a `!important` utility class without editing
the markup that uses it. */
.product-discription-tab-shop.mt--50 {
margin-top: 24px !important;
}
.product-discription-tab-shop ul.nav-tabs {
padding-bottom: 14px !important;
}
/* MEASURED, NOT GUESSED. The gap between the Buy Now row and the first tab was
76px on a 390px screen, and only 16px of it belonged to the tabs:
30px .product-bottom-action margin-bottom (theme, for a wrapped row)
30px .details-product-area margin-bottom (theme, image + text block)
16px .product-discription-tab-shop margin-top
Reducing the tab block's own margin alone could therefore never fix it -- it
was the smallest of the three. The two theme margins are what go. */
@media only screen and (max-width: 1199px) {
.product-discription-tab-shop.mt--50 {
margin-top: 16px !important;
}
.product-discription-tab-shop ul.nav-tabs {
padding-bottom: 10px !important;
}
.rts-product-details-section .details-product-area .product-bottom-action {
margin-bottom: 8px;
}
/* Zero, not smaller: the row above already carries the 8px, and this margin
sits between the same two things. */
.rts-product-details-section .details-product-area {
margin-bottom: 0;
}
}
/* THE TABS TOUCH ON A PHONE because the theme sets `gap: 0` on this list below
576px -- its own answer to three labels not fitting one line. Bordered
buttons with no space between them read as one control split by a hairline,
which is exactly what you do not want of a tab strip.
The gap comes back and the row is allowed to wrap instead, with the labels
set smaller so two still fit a line before the third drops. ul.nav-tabs is
(0,3,0) against the theme's (0,2,0), which is what lets it through. */
@media only screen and (max-width: 575px) {
.product-discription-tab-shop ul.nav-tabs {
gap: 8px;
flex-wrap: wrap;
}
.product-discription-tab-shop ul.nav-tabs button {
padding: 10px 13px;
font-size: 13px;
}
}
/* ---------------------------------------------------------------------------
Hero banner height.
The theme never gave this slide a height -- it was as tall as its content
plus 120px of padding top and bottom. That worked while a heading and a
button sat inside it; with the text removed the content is empty and the
slide collapsed to the padding alone, roughly half its old height.
An explicit height puts it back and, unlike the old arrangement, keeps it
the same whether a slide has text in it or not.
--------------------------------------------------------------------------- */
/* TRIMMED FROM THE BOTTOM, NOT FROM BOTH ENDS.
The artwork is background-size: cover, so a shorter box crops it vertically --
and with the default centred position the crop comes off the top and the
bottom equally, which walks the subject up out of frame as the band gets
shorter. Anchored to the top, the height that was removed is removed from the
bottom, which is the empty half of these banners. */
.rts-banner-area-one .banner-bg-image {
min-height: 420px;
background-position: center top;
}
@media only screen and (max-width: 1199px) {
.rts-banner-area-one .banner-bg-image {
min-height: 348px;
}
}
@media only screen and (max-width: 991px) {
.rts-banner-area-one .banner-bg-image {
min-height: 292px;
}
}
/* The step down is steeper here than between the widths above it: the artwork
is cropped to fill (background-size: cover), so on a narrow screen a tall
band shows a narrow vertical slice of a wide photograph rather than more of
it. 280px is about where the crop still reads as the picture. */
@media only screen and (max-width: 575px) {
.rts-banner-area-one .banner-bg-image {
min-height: 222px;
}
}
/* ---------------------------------------------------------------------------
Shop by Category tiles, without artwork.
The theme gives each card a background photograph (category/01-04.jpg --
groceries, from the original template). Those are switched off; the cards are
flat brand colour instead, so the four read as navigation rather than as four
competing promotions.
The title is already white (set further up, for the old dark photos), so the
ground has to stay dark enough for it. Each card gets a slightly different
shade so the row is not one solid block.
--------------------------------------------------------------------------- */
/* Four of the seven house colours, so the row reads as a set rather than as
four near-misses of the same maroon -- these were hand-mixed shades before
the palette existed. Ordered dark to light left to right. */
.single-feature-card,
.single-feature-card.one,
.single-feature-card.two,
.single-feature-card.three,
.single-feature-card.four {
background-image: none;
background-color: var(--wine);
}
.single-feature-card.two {
background-color: var(--berry);
}
.single-feature-card.three {
background-color: var(--plum);
}
.single-feature-card.four {
background-color: var(--rose);
}
/* Back to the theme's own height -- 400px, and 300px below 1200px -- so the
cards keep the proportions the row was designed around. The content sits at
the bottom, which is where the photograph used to leave room for it.
Padding trimmed from the theme's 40px: it was equal on both sides already,
but 40px pushed a short heading a long way in from the edge on a card only
a quarter of the row wide. 24px all round, so left and right still match. */
.single-feature-card {
display: flex;
align-items: flex-end;
padding: 24px;
}
/* ===========================================================================
SHOP BY CATEGORY ON A PHONE OR TABLET -- a scrolling strip, like the
product rows above it.
The four tiles are a Bootstrap row: col-12 on a phone, so they stacked into
four 300px-tall blocks, roughly three screens of scrolling to see a set of
four shortcuts. Two sections of the same page, both rows of cards, behaved
differently -- one swiped sideways, this one did not.
NO SWIPER HERE. The product rows need one for their arrows, autoplay and
loop; this is four static tiles, and `overflow-x: auto` is the browser's own
version of the same gesture -- it takes touch, trackpad and shift-wheel
without a library, and it cannot fall out of step with the markup the way a
carousel re-initialising on a resize can.
=========================================================================== */
@media only screen and (max-width: 1199px) {
.single-feature-card {
padding: 18px;
/* Down from the theme's 300px. These are shortcuts, not artwork: at 300px
barely two fitted a phone screen. */
height: 210px;
}
.single-feature-card .title {
font-size: 16px;
margin-bottom: 12px;
}
/* The row itself. flex-wrap: nowrap is the whole trick -- Bootstrap's own
`flex-wrap: wrap` is what stacked them. */
.category-feature-area .row.g-4 {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
/* Momentum on iOS, and a resting point per tile rather than mid-card. */
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
/* The scrollbar is not the affordance here -- the part-visible next tile
is -- and a permanent grey bar under the row reads as a mistake. */
scrollbar-width: none;
-ms-overflow-style: none;
/* Room for the tile shadows, which a clipped scroll container would cut. */
padding-bottom: 4px;
}
.category-feature-area .row.g-4::-webkit-scrollbar {
display: none;
}
/* Bootstrap's col-* widths are percentages of the row, which mean nothing
once the row scrolls -- every tile has to be given a fixed share of the
VIEWPORT instead. 76vw leaves the next one showing, which is what says the
row continues. */
.category-feature-area .row.g-4 > [class*="col-"] {
flex: 0 0 auto;
width: 76vw;
max-width: 320px;
scroll-snap-align: start;
}
}
@media only screen and (min-width: 576px) and (max-width: 1199px) {
.category-feature-area .row.g-4 > [class*="col-"] {
width: 46vw;
max-width: 340px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.category-feature-area .row.g-4 > [class*="col-"] {
width: 32vw;
}
}
/* The content block fills the card's width, so the heading and the Shop Now
link start at the same left edge and neither is indented past the other. */
.single-feature-card .content-area {
width: 100%;
padding-left: 0;
padding-right: 0;
margin-left: 0;
}
/* Popular Picks / Related Products cards: less frame around the picture.
The theme pads the whole card by 15px, which sat as a margin down both sides
of the image on top of the letterboxing above. */
.mySwiper-category-1 .single-shopping-card-one {
padding: 10px;
}
.mySwiper-category-1 .single-shopping-card-one .thumbnail-preview {
display: block;
width: 100%;
}
/* ---------------------------------------------------------------------------
Wishlist / cart table: the Products column.
The theme centres the "Products" heading over a 64%-wide column while the row
beneath it starts at the left edge -- so the label floated in the middle of
the row with the picture and name nowhere near it. Left-aligned, and the
heading is inset by the width of the row's remove (x) control so it sits over
the thumbnail rather than over that button.
--------------------------------------------------------------------------- */
.single-cart-area-list.head .product-main {
text-align: left;
padding-left: 46px;
}
/* The picture, the name and the x on one line, vertically centred against each
other rather than each sitting at its own height. */
.single-cart-area-list.main .product-main-cart {
display: flex;
align-items: center;
gap: 14px;
}
.single-cart-area-list.main .product-main-cart .thumbnail {
flex: 0 0 auto;
}
/* min-width: 0 lets a long product name wrap instead of pushing the price and
quantity columns out of their share of the row. */
.single-cart-area-list.main .product-main-cart .information {
min-width: 0;
}
.single-cart-area-list.main .product-main-cart .information .title {
margin-bottom: 0;
overflow-wrap: anywhere;
}
@media only screen and (max-width: 767px) {
.single-cart-area-list.head .product-main {
padding-left: 0;
}
}
/* ===========================================================================
CART AND WISHLIST ROWS ON A PHONE -- one product, one row.
The theme's answer to a narrow screen is `flex-direction: column` on both the
row and the product cell, so every field landed on a line of its own:
checkbox, picture, name, price, stepper, subtotal -- six lines and 351px of
height per product, with the remove control floated off the top corner as a
red disc. Four items came to most of three screens.
A grid instead, two lines deep and fixed:
[x] [img] name .................... (x)
[x] [img] price stepper subtotal
.product-main-cart carries `display: contents` so its four children join the
same grid as the price, quantity and subtotal cells -- otherwise they are
trapped in a flex box of their own and cannot line up with the columns
beside it. That is the whole reason this can be one grid rather than a row
of nested boxes.
=========================================================================== */
@media only screen and (max-width: 767px) {
/* The header keeps the select-all -- it is the only place it exists -- and
loses the three column labels, which named columns that no longer sit
under them. */
.single-cart-area-list.head {
padding: 12px 12px;
}
.single-cart-area-list.head .price,
.single-cart-area-list.head .quantity,
.single-cart-area-list.head .subtotal {
display: none;
}
.single-cart-area-list.head .product-main {
flex-basis: auto;
}
.single-cart-area-list.main {
display: grid;
grid-template-columns: auto 56px minmax(0, 1fr) auto auto;
grid-template-areas:
"check thumb info info close"
"check thumb price qty total";
align-items: center;
column-gap: 8px;
row-gap: 8px;
padding: 12px;
}
.single-cart-area-list.main .product-main-cart {
display: contents;
}
.single-cart-area-list.main .cart-row-select {
grid-area: check;
}
.single-cart-area-list.main .product-main-cart .thumbnail {
grid-area: thumb;
max-width: 56px;
}
.single-cart-area-list.main .product-main-cart .information {
grid-area: info;
min-width: 0;
}
.single-cart-area-list.main .product-main-cart .information .title {
font-size: 13.5px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Back into the flow. The theme pulls this out to `position: absolute` at
-13px/-14px below 576px, which is what put a red disc over the corner of
the picture; in a grid there is a cell for it. */
.single-cart-area-list.main .product-main-cart .close {
grid-area: close;
position: static;
justify-self: end;
}
.single-cart-area-list.main .product-main-cart .close i {
height: 24px;
width: 24px;
font-size: 11px;
}
.single-cart-area-list.main .price {
grid-area: price;
flex-basis: auto;
}
.single-cart-area-list.main .quantity {
grid-area: qty;
flex-basis: auto;
}
.single-cart-area-list.main .subtotal {
grid-area: total;
flex-basis: auto;
justify-self: end;
}
.single-cart-area-list.main .price p,
.single-cart-area-list.main .subtotal p {
font-size: 13px;
margin: 0;
white-space: nowrap;
}
.single-cart-area-list.main .subtotal p {
font-weight: 700;
}
/* 92px of stepper is a quarter of a 360px screen. */
.single-cart-area-list.main .quantity-edit {
width: 74px;
padding: 1px 6px;
}
/* --- Coupon and Clear All on one row ------------------------------------
The theme stacks all three below 992px -- field, button, Clear All, each on
its own line. The field is the only part that needs width, so it takes what
is left and the two buttons keep their labels. The validation message drops
to a line of its own rather than squeezing the row it belongs to. */
.bottom-cupon-code-cart-area {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 14px 12px;
}
.bottom-cupon-code-cart-area form {
flex: 1 1 auto;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-width: 0;
}
.bottom-cupon-code-cart-area form input {
flex: 1 1 120px;
width: auto;
min-width: 0;
height: 42px;
}
.bottom-cupon-code-cart-area form .rts-btn,
.bottom-cupon-code-cart-area > .rts-btn {
flex: 0 0 auto;
width: auto;
padding: 11px 14px;
font-size: 13px;
white-space: nowrap;
/* Clear All carries mr--50 -- 50px of margin against a screen edge. */
margin-right: 0 !important;
}
.bottom-cupon-code-cart-area form p {
flex: 1 1 100%;
margin: 0 !important;
font-size: 12.5px;
}
}
/* ---------------------------------------------------------------------------
"Shop on App" strip on the product page.
Measured against the band Meesho runs above its product details:
- white ground, 2px coloured rule, ~10px radius, ~64px tall
- gift illustration hard left of a centred content cluster
- copy at ~22px with the discount at ~34px/800 beside it
- solid button in a CONTRASTING brand colour, right of the copy
- a notched ribbon closing the right edge
Everything here is that geometry in this shop's colours: orange for the rule,
icon and figure; the logo's maroon for the button, where the original uses
magenta against its green.
--------------------------------------------------------------------------- */
/* THE SPACE ABOVE THE STRIP IS NOT THE STRIP'S.
Above it is the product section's own `rts-section-gap` padding; below it is
this margin. Two different properties on two different elements, which is why
they drifted apart -- 60px above against 26px below, so the strip sat low in
a band of empty page and then crowded the gallery under it.
Both are set to the same figure here so the strip is centred in its own
space. They have to be written twice; there is no single box whose padding
this is.
Two classes on the section rule (0,2,0) against the theme utility's (0,1,0),
so it wins without needing !important. */
.app-promo-strip {
margin-bottom: 26px;
}
.rts-chop-details-area.rts-section-gap {
padding-top: 26px;
}
/* On phone and tablet the pair tightens to 16px -- still equal, just less of
it. 60px under the header is the most expensive space on a handset. */
@media only screen and (max-width: 1199px) {
.rts-chop-details-area.rts-section-gap {
padding-top: 16px;
}
.app-promo-strip {
margin-bottom: 16px;
}
}
.app-promo-inner {
position: relative;
display: flex;
align-items: center;
/* Centred as one group. Spreading these three apart is what made the first
attempt read as a toolbar rather than a single message. */
justify-content: center;
gap: 20px;
min-height: 64px;
padding: 8px 26px;
background: #ffffff;
border: 2px solid var(--color-primary);
border-radius: 10px;
overflow: hidden;
}
/* The notched ribbon at the right edge. */
.app-promo-inner::after {
content: "";
position: absolute;
top: -2px;
right: -2px;
width: 34px;
height: calc(100% + 4px);
background: var(--color-primary);
clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%, 0 50%);
}
.app-promo-gift {
flex: 0 0 auto;
width: 52px;
height: 46px;
}
.app-promo-text {
flex: 0 1 auto;
margin: 0;
font-size: 22px;
font-weight: 500;
color: var(--color-heading-1);
white-space: nowrap;
}
/* The figure is the whole point of the band; in the original it towers over
the words on either side of it. */
.app-promo-text strong {
font-size: 34px;
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.5px;
/* "40% off" from the coupon renders as "40% OFF" here, matching the
reference, without the API storing shouty copy. */
text-transform: uppercase;
}
.app-promo-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 30px;
/* Clears the ribbon so the button never sits under it. */
margin-right: 26px;
border-radius: 8px;
background: var(--color-primary);
color: #ffffff;
font-size: 17px;
font-weight: 700;
white-space: nowrap;
transition: background 0.3s;
}
/* Darker orange on hover: the button now shares its colour with the rule and
the figure, so the hover state has to come from shade rather than hue. */
.app-promo-btn:hover,
.app-promo-btn:focus {
background: var(--color-primary-hover);
color: #ffffff;
}
@media only screen and (max-width: 1199px) {
.app-promo-text {
font-size: 17px;
white-space: normal;
}
.app-promo-text strong {
font-size: 26px;
}
.app-promo-gift {
width: 42px;
height: 38px;
}
.app-promo-btn {
padding: 11px 22px;
font-size: 15px;
margin-right: 22px;
}
}
/* ONE ROW ON A PHONE TOO: gift, message, button.
This used to wrap -- the message centred on one line and a full-width
Download Now beneath it -- which turned a strip into a block three rows deep
sitting between the price and the description on every product page. The
ribbon and the button were the reason: both were sized for a desktop band and
neither would give.
So everything gives instead. The type comes down, the gift mark halves, the
button loses its padding and its label stays on one line, and .app-promo-text
gets min-width: 0 -- without that a flex item refuses to shrink below its
content and pushes the button off the end however small everything else
gets. */
@media only screen and (max-width: 767px) {
.app-promo-inner {
flex-wrap: nowrap;
justify-content: space-between;
text-align: left;
gap: 10px;
min-height: 0;
padding: 10px 12px;
}
.app-promo-inner::after {
/* No room for the notch beside a button that now sits at the right edge. */
display: none;
}
.app-promo-gift {
width: 30px;
height: 28px;
}
.app-promo-text {
min-width: 0;
font-size: 12.5px;
line-height: 1.3;
}
.app-promo-text strong {
font-size: 15px;
}
.app-promo-btn {
width: auto;
flex: 0 0 auto;
margin-right: 0;
padding: 9px 13px;
font-size: 12.5px;
white-space: nowrap;
}
}
/* ---------------------------------------------------------------------------
Product reviews: the score and its stars.
The theme lays this block out as a flex ROW with a 60px gap -- written for a
score sitting beside a star-count breakdown. With the breakdown gone, that
60px landed between "4.0 out of 5" and the stars underneath it. A column with
a small gap is what the two lines actually need.
--------------------------------------------------------------------------- */
.product-details-review-product-style {
flex-direction: column;
gap: 4px;
}
.product-details-review-product-style .title {
margin-bottom: 0;
}
/* Related Products on the product page: room above the heading. The carousel's
section class is gapBottom only -- padding underneath, nothing on top -- so
this heading butted against the details block above it. */
.related-products-section .rts-grocery-feature-area {
padding-top: 60px;
}
@media only screen and (max-width: 767px) {
.related-products-section .rts-grocery-feature-area {
padding-top: 36px;
}
}
/* ---------------------------------------------------------------------------
All Products / Offers: space above the first row of cards.
The toolbar (count, sort, grid-list switch) has no bottom margin, so the grid
began immediately beneath it -- the first four cards sat flush while every row
after them was separated by the row's own 24px gutter. 24px here matches that
gutter exactly, so the first row is spaced like the rest.
--------------------------------------------------------------------------- */
.filter-select-area {
margin-bottom: 24px;
}
/* The offer ribbon on the product page's main image.
INSIDE the frame, not hanging above it: .product-thumb clips its overflow so
the fixed image box crops cleanly, and the theme's top:-10px put the top of
the pill outside that box -- where it was cut off. */
.pdp-thumb-wrap .badge.pdp-badge {
position: absolute;
left: 12px;
top: 12px;
z-index: 5;
}
/* ---------------------------------------------------------------------------
Offer ribbon.
The theme's badge is a bookmark ICON with the text absolutely positioned on
top of it, sized for exactly two short lines ("25%" / "Off"). The ribbon now
carries whatever the vendor typed -- "5% Off", or "Buy 1 Get 1" -- and a
single line of that is wider than the icon, so it hung off the edge.
Replaced with a pill that sizes to its own text: the icon is hidden and the
badge itself becomes the shape. Any wording fits, and nothing overflows.
--------------------------------------------------------------------------- */
/* Specificity has to match the theme's own selectors, which are
`.single-shopping-card-one .thumbnail-preview .badge …`. A shorter selector
here lost, so the label kept the theme's absolute position, left the pill
with no content, and the pill collapsed to nothing -- an invisible ribbon. */
.single-shopping-card-one .thumbnail-preview .badge i,
.thumbnail-preview .badge i,
.pdp-thumb-wrap .badge i {
display: none;
}
.single-shopping-card-one .thumbnail-preview .badge,
.thumbnail-preview .badge,
.pdp-thumb-wrap .badge {
display: inline-flex;
align-items: center;
background: var(--color-primary);
border-radius: 4px;
padding: 4px 10px;
/* The theme places the bookmark 30px in and hanging 10px above the frame;
a pill reads better tucked inside the corner. */
left: 12px;
top: 12px;
}
.single-shopping-card-one .thumbnail-preview .badge span,
.thumbnail-preview .badge span,
.pdp-thumb-wrap .badge span {
position: static;
top: auto;
left: auto;
color: #ffffff;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
text-align: center;
}
/* ---------------------------------------------------------------------------
Quick-view modal (the View button on a product card).
.rts-product-details-section is padded 100px top / 30px bottom -- written for
the full product PAGE, where 100px separates it from the header. Inside a
modal that reads as a large gap above the content and almost none below it.
Even padding, sized for a dialog.
--------------------------------------------------------------------------- */
.product-details-popup-wrapper.popup .rts-product-details-section {
padding-top: 20px;
padding-bottom: 20px;
}
/* Room above the cart/buy row: the description runs straight into it. */
.product-details-popup-wrapper.popup .product-bottom-action {
margin-top: 24px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* THE CLOSE CROSS, WHICH WAS OFF THE SCREEN ON A PHONE.
The theme parks it at `right: -50px; top: -50px` -- OUTSIDE the popup's
top-right corner, which works only while there is 50px of empty backdrop up
there. Its own <=1200px rule brings `right` back to 0 and says nothing about
`top`, so the button stayed 50px above the dialog: on a phone, where the
dialog opens near the top of the viewport, that is above the fold entirely.
The quick view opened with no visible way out of it.
Moved inside the corner instead, over the product image, with a shadow so it
reads as sitting on top rather than as part of the picture. */
@media only screen and (max-width: 1199px) {
.product-details-popup .product-details-close-btn {
top: 10px;
right: 10px;
width: 38px;
height: 38px;
/* Above the image and the thumbnail strip, both of which the popup gives
their own stacking. */
z-index: 10;
background: #ffffff;
box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
}
.product-details-popup .product-details-close-btn i {
font-size: 18px;
}
}
/* ===========================================================================
HEADER -- two bars.
Bar one is brand orange and carries the logo, the search field and the three
account icons. Bar two is white and carries the ALL categories button, the
page links and whatever offer is running.
The theme's own header rules assumed three bars and a sticky nav; everything
below is scoped to .deepam-header so none of that is disturbed elsewhere.
=========================================================================== */
/* The bar keeps its height: the logo grows past it and the padding shrinks to
match, so a bigger mark does not push the bar taller. */
/* THE TWO BARS HAVE SWAPPED GROUNDS.
Bar one is the cream, bar two carries the wine. Everything that was white
here because it sat on a coloured bar now has to be dark, and everything in
bar two the other way round -- the colour is one line each, the legibility is
the rest of it. */
.deepam-header-primary {
background: #fffdf8;
padding: 6px 0;
}
/* space-between, not auto margins on one child: it spreads the leftover width
equally between EVERY pair, so the gap before the delivery control, before
the search and before the icons are all the same. Auto margins on the search
alone made its own two sides even but left the delivery control hard against
the logo. */
.deepam-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
/* The theme puts 27.5px of left padding on .logo-area (it centred the logo in
the old three-bar layout). That pushed the mark to 52px while the ALL button
in bar two starts at the container's own 24px -- so the two bars visibly
began in different places. */
.deepam-header-row .logo-area {
flex: 0 0 auto;
padding-left: 0;
padding-right: 0;
}
/* THE MARK SITS DIRECTLY ON THE BAR -- no white plate behind it.
The artwork is already transparent (88% of its pixels are), so it needs
nothing to sit on; the plate was a white rectangle drawn by CSS, not part of
the logo.
The min-width that went with it is gone too: its only job was to keep the
plate wider than the artwork, and without a plate it would pad the mark with
empty space and push the search field along. Height and object-fit are all
that is left -- the mark is sized, never stretched. */
.deepam-header-row .logo-area .logo {
height: 84px;
width: auto;
object-fit: contain;
background: transparent;
}
/* --- Small-screen fixtures, off by default --------------------------------
The hamburger beside the logo and the search bar under the header only exist
below 1200px. Above it the ALL button in bar two and the inline field do the
same jobs, so both are rendered but hidden -- see the 1199px block further
down, which is the single place the mobile header is described. */
.deepam-menu-btn,
.deepam-header-searchbar {
display: none;
}
/* The wrapper the inline search now sits in. It takes over the flex behaviour
.hsearch had when it was the row's own child -- grow into the space between
the delivery control and the icons, and be allowed to shrink -- so the
desktop row measures exactly as it did before the wrapper existed. */
.deepam-search-inline {
display: flex;
flex: 1 1 auto;
min-width: 0;
}
/* --- search ---------------------------------------------------------------
min-width: 0 is what lets this shrink inside the flex row; without it the
field keeps its content width and pushes the icons off the end. */
/* Not flex: 1 -- that let the field swallow every spare pixel between the logo
and the icons. A capped width keeps it a search box rather than a bar across
the header.
auto margins on BOTH sides, so the leftover space splits evenly and the field
sits centred between the location control and the account icons. margin-right
alone pushed the icons to the far edge, leaving 24px on one side and 121px on
the other. */
/* The border is not decoration: white on cream is barely a boundary, and the
field lost its shape when the bar stopped being a strong colour behind it. */
.deepam-search {
position: relative;
flex: 0 1 560px;
max-width: 560px;
min-width: 0;
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid #57534e;
border-radius: 6px;
overflow: hidden;
}
.deepam-search-icon {
position: absolute;
left: 16px;
color: #9e9e9e;
font-size: 15px;
pointer-events: none;
}
.deepam-search input {
flex: 1 1 auto;
min-width: 0;
height: 48px;
border: 0;
background: transparent;
padding: 0 14px 0 42px;
font-size: 15px;
}
.deepam-search input:focus {
outline: none;
border: 0;
}
.deepam-search-submit {
width: auto;
flex: 0 0 auto;
height: 48px;
padding: 0 22px;
border: 0;
background: var(--color-heading-1);
color: #ffffff;
font-weight: 600;
cursor: pointer;
}
.deepam-suggestions {
position: absolute;
top: 52px;
left: 0;
width: 100%;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 6px;
list-style: none;
padding: 0;
margin: 0;
z-index: 100;
max-height: 260px;
overflow-y: auto;
}
.deepam-suggestions li a {
display: block;
padding: 10px 14px;
border-bottom: 1px solid #f0f0f0;
color: var(--color-heading-1);
}
.deepam-suggestions li a:hover {
background: #fbf1f0;
}
/* --- Header search suggestions --------------------------------------------
Shared by both headers (components/header/HeaderSearch.tsx). The old
.deepam-suggestions list is left above for anything still using it; these
rows carry a thumbnail and a price, so they are their own thing.
The wrapper exists to give the absolutely-positioned panel something to
anchor to that is not the form itself -- the sticky header's form is a flex
row, and positioning against it put the panel beside the input rather than
under it. */
.hsearch {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.hsearch > form {
position: relative;
width: 100%;
}
.hsearch-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 100%;
z-index: 200;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
box-shadow:
0 2px 4px rgb(28 25 23 / 5%),
0 18px 40px -18px rgb(28 25 23 / 22%);
padding: 6px;
max-height: 420px;
overflow-y: auto;
}
.hsearch-note {
margin: 0;
padding: 14px 12px;
font-size: 13px;
color: var(--color-body);
}
.hsearch-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: 8px;
color: var(--color-heading-1);
text-decoration: none;
transition: background-color 0.15s ease;
}
/* One highlight state for both the mouse and the arrow keys, so keyboard
users see exactly what a hover would show rather than a second style. */
.hsearch-row.is-active,
.hsearch-row:hover {
background-color: var(--color-primary-soft);
color: var(--color-heading-1);
}
.hsearch-thumb {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 8px;
object-fit: cover;
background-color: var(--color-primary-soft);
}
.hsearch-thumb-icon {
display: grid;
place-items: center;
color: var(--color-primary);
font-size: 16px;
}
/* min-width: 0 so a long product name can ellipsis instead of stretching the
row past the panel. */
.hsearch-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.hsearch-name {
font-size: 14px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hsearch-meta {
font-size: 12px;
color: var(--color-body);
}
.hsearch-all {
width: 100%;
margin-top: 4px;
padding: 10px;
border: 0;
border-top: 1px solid var(--color-border);
border-radius: 0 0 8px 8px;
background: none;
color: var(--color-primary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: center;
}
.hsearch-all:hover {
background-color: var(--color-primary-soft);
}
/* --- account icons -------------------------------------------------------- */
.deepam-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
/* 8px rather than 6: outlined controls need a little more air between them
than bare icons did, or two borders 6px apart read as one divided box. */
gap: 8px;
}
/* Outlined, at last living up to the class name -- the theme calls these
btn-border-only and then gave them no border at all. #57534e is the body
text colour, so the outline sits at the same weight as the words beside it
rather than adding a third tone to the bar. */
.deepam-actions .btn-border-only {
border: 1px solid #57534e;
border-radius: 6px;
background: transparent;
color: var(--color-primary);
padding: 8px 12px;
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
transition:
border-color 0.2s ease,
background-color 0.2s ease;
}
.deepam-actions .btn-border-only:hover {
border-color: var(--color-primary);
background-color: var(--color-primary-soft);
}
.deepam-actions .btn-border-only i {
font-size: 20px;
color: var(--color-primary);
}
/* Labels beside the icons -- Account, Wishlist, Cart. They were hidden while
this bar was icons-only; visible now, so the controls read at a glance
rather than relying on the icon alone. */
.deepam-actions .btn-border-only .text {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
/* A DOT, not a count.
The number is still in the markup -- a screen reader announces "Wishlist 2" --
but visually it is a white dot on the icon's corner saying only "there is
something in here". text-indent pushes the digits out of view rather than
display:none, which would take the announcement with them.
The element is rendered only when the count is above zero (see Cart.tsx), so
an untouched wishlist shows no marker at all. */
.deepam-actions .btn-border-only {
position: relative;
}
/* The icon and its dot travel together, so the dot lands on the glyph's own
top-right corner -- the heart and the trolley are different widths, and an
offset measured from the control's edge sits differently on each. */
.deepam-actions .deepam-icon-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* span.number, not just .number: the theme's own rule is
`.accont-wishlist-cart-area-header .cart span.number` -- three classes plus a
tag, which outranks a three-class selector however late it loads. Matching
that shape is what lets the dot win. */
.deepam-actions .btn-border-only span.number {
position: absolute;
top: -2px;
right: -4px;
left: auto;
width: 9px;
height: 9px;
padding: 0;
border-radius: 50%;
background: var(--color-primary);
/* A ring in the bar colour, so the dot reads as a marker on the icon rather
than as part of the glyph. Both halves invert with the bar: a wine dot on
a cream ring, where it used to be a white dot on a wine one. */
box-shadow: 0 0 0 2px #fffdf8;
overflow: hidden;
text-indent: -9999px;
}
/* Below the large breakpoint the labels go again -- three words plus a search
field do not fit a tablet header. */
@media only screen and (max-width: 1199px) {
.deepam-actions .btn-border-only .text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.deepam-actions .btn-border-only span.number {
left: auto;
right: -4px;
}
}
/* --- bar two -------------------------------------------------------------- */
.deepam-header-secondary {
background: var(--color-primary);
/* No hairline: it separated a white bar from a white page. Against the cream
bar above and whatever is below, the colour is the separation. */
border-bottom: 0;
}
/* One gap value for the whole row, and the nav inherits it -- so ALL sits the
same distance from Home as Home does from All Products. Two different values
(28 and 26) read as a mistake even at a glance. */
/* THE ROW STARTS WHERE THE LOGO DOES, NOT WHERE ITS BOX DOES.
Both bars sit in the same container, so the logo element and the ALL button
already share a left edge at the container's 24px gutter. They did not LOOK
aligned, because the mark is drawn inside a square canvas with transparent
margin around it: the artwork is 447px wide and the ink starts at pixel 59,
so at an 84px logo the visible mark begins 11px further in than its box.
That 11px is what this padding is. It is written against the two numbers it
comes from rather than as a magic value, so re-exporting the logo with
different margins, or changing the logo height, only means updating the
figures here.
Bar two is not rendered below 1200px, so this needs no responsive variant. */
.deepam-nav-row {
display: flex;
align-items: center;
gap: 26px;
min-height: 56px;
/* 84px logo x (59px of transparent margin / 447px canvas) */
padding-left: calc(84px * 59 / 447);
}
/* width: auto is not decoration -- the theme sets `button { width: 100% }`
globally, so turning this control into a made it 535px wide and
pushed the links along with it. */
.deepam-all-btn {
display: flex;
align-items: center;
gap: 8px;
width: auto;
flex: 0 0 auto;
background: transparent;
border: 0;
font-weight: 600;
font-size: 15px;
color: #ffffff;
cursor: pointer;
padding: 16px 0;
position: relative;
}
.deepam-nav {
display: flex;
align-items: center;
gap: 26px;
flex: 1 1 auto;
}
.deepam-nav a {
white-space: nowrap;
}
.deepam-nav a {
display: inline-flex;
align-items: center;
gap: 7px;
color: #ffffff;
font-weight: 500;
padding: 8px 0;
}
/* The icon takes the link's colour, so it turns orange on hover with the label
rather than staying grey beside it. */
.deepam-nav a i {
font-size: 15px;
color: inherit;
}
/* Blush, not the brand colour: hovering a wine link into wine leaves it
looking disabled rather than active. The warm half of the palette is what
lifts off this ground. */
.deepam-nav a:hover {
color: var(--blush);
}
/* The offer sits at the right end and keeps its own type size. */
.deepam-nav-row .discount-area {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
/* On wine now, like the links beside it. */
color: #ffffff;
}
.deepam-nav-row .discount-area .disc,
.deepam-nav-row .discount-area p,
.deepam-nav-row .discount-area span {
color: #ffffff;
}
.deepam-nav-row .discount-area .disc {
margin: 0;
white-space: nowrap;
}
/* THE COUNTDOWN WAS INVISIBLE: the theme colours these digits white, for the
dark promo strip this used to live on. On the white nav bar that is white on
white -- the element was there, sized and positioned, just unreadable.
Each unit also gets a tinted chip so the clock reads as a clock rather than
as four loose numbers after the sentence. */
.deepam-nav-row .countdown,
.deepam-nav-row .countDown {
display: flex;
align-items: center;
gap: 6px;
}
.deepam-nav-row .countDown .container {
width: auto;
max-width: none;
/* The theme reserves 43px on the right of each unit for a "Days"/"Hour"
label it draws as ::after -- in near-white, which on this bar sat as a
faint smear over the digits. */
padding: 0;
margin: 0;
}
/* Those labels are hidden, not recoloured: OfferBar already renders the unit
with the number ("01d", "02h"), so showing them would read "01d Days".
Every nth-child variant is listed because that is how the theme writes them,
and a pseudo-class counts toward specificity -- a plain ::after selector
loses to `.container:first-child::after` no matter how late it loads. */
.deepam-nav-row .countDown .container::after,
.deepam-nav-row .countDown .container:first-child::after,
.deepam-nav-row .countDown .container:nth-child(2)::after,
.deepam-nav-row .countDown .container:nth-child(3)::after,
.deepam-nav-row .countDown .container:nth-child(4)::after {
content: none;
}
.deepam-nav-row .countDown .container .a div {
color: var(--color-primary);
background: #f8eee9;
border-radius: 4px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ===========================================================================
PHONE AND TABLET HEADER (< 1200px)
A different header, not a squeezed version of the desktop one. Two rows:
row 1 hamburger + logo ............ wishlist cart (sticky)
row 2 search, full width (scrolls away)
Everything else -- the delivery control, Account, Download App, the whole
nav bar and its offer -- moves into the drawer behind the hamburger. Trying
to keep those on screen is what broke this: five controls, a 560px field and
a second bar of links do not fit 390px, so they wrapped into a header four
rows tall that pushed the page below the fold.
1199px, not 991px: a 1024px tablet is on the wrong side of 991 and got the
desktop header, which is the width it fitted worst.
=========================================================================== */
@media only screen and (max-width: 1199px) {
/* --- Row 1 ------------------------------------------------------------- */
/* nowrap is the rule this whole layout rests on: with wrap, any item that
did not fit started a new line, which is where the extra rows came from.
Nothing may wrap -- the pieces that do not fit are hidden below instead. */
.deepam-header-row {
flex-wrap: nowrap;
gap: 8px;
}
.deepam-menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
/* The theme's global `button { width: 100% }` would otherwise give this
the whole row. */
width: 44px;
flex: 0 0 auto;
height: 44px;
padding: 0;
border: 0;
background: transparent;
color: var(--color-primary);
font-size: 20px;
cursor: pointer;
}
/* Takes the leftover width so the icons stay pinned right, and min-width: 0
lets the mark shrink rather than push them off the edge. */
.deepam-header-row .logo-area {
flex: 1 1 auto;
min-width: 0;
}
/* The mark is square (447x447), so height is its width too -- 74px of logo
costs 74px of row, which the four-item row has to spare. The ceiling here
is not width but the sticky bar's height: everything below it scrolls under
this, so every pixel is taken off every screen of the site. */
.deepam-header-row .logo-area .logo {
height: 74px;
max-width: 100%;
}
/* Into the drawer, all of it: the delivery control, the inline search, and
the whole nav bar with its offer. Row one is left with four things --
hamburger, logo, wishlist, cart -- and nothing else.
.deepam-header-row prefixes the delivery control deliberately: its own
`display: inline-flex` is written LOWER DOWN in this file, and a media
query adds no specificity -- so a bare `.deepam-delivery` here (0,1,0)
loses the tie to a later (0,1,0) and the control stayed on the bar. */
.deepam-header-row .deepam-delivery,
.deepam-search-inline,
.deepam-header-secondary {
display: none;
}
/* Account and Download App need the ancestor and both classes on the same
element to reach `.deepam-actions .btn-border-only { display: inline-flex }`
-- (0,2,0). A bare `.deepam-desktop-only` is (0,1,0) and loses to it however
late it appears, which is why these two were still on the bar. */
.deepam-actions .btn-border-only.deepam-desktop-only {
display: none;
}
.deepam-actions {
gap: 2px;
}
.deepam-actions .btn-border-only {
padding: 8px;
}
.deepam-actions .btn-border-only i {
font-size: 21px;
}
/* --- Row 2: the search, and nothing else -------------------------------
White, so the orange bar above reads as the header and this reads as part
of the page -- which is what it behaves like: it scrolls away and the bar
above does not. */
.deepam-header-searchbar {
display: block;
position: relative;
/* Above the page but below the sticky row, so the suggestions panel covers
the content it hangs over. */
z-index: 999;
background: #ffffff;
border-bottom: 1px solid var(--color-border);
padding: 10px 0;
}
/* The field is white too, so on a white bar it needs an outline of its own --
on the orange bar the contrast did that job. */
.deepam-header-searchbar .deepam-search {
flex: 1 1 auto;
max-width: none;
border: 1px solid var(--color-border);
}
.deepam-header-searchbar .deepam-search input {
height: 42px;
padding-left: 38px;
font-size: 14px;
}
.deepam-header-searchbar .deepam-search-icon {
left: 13px;
}
.deepam-header-searchbar .deepam-search-submit {
height: 42px;
padding: 0 16px;
font-size: 14px;
}
}
/* On a small phone the word "Search" costs more room than it is worth: the
magnifier inside the field already says what the box does, and the keyboard's
own return key submits it. */
@media only screen and (max-width: 479px) {
.deepam-header-searchbar .deepam-search-submit {
padding: 0 14px;
font-size: 0;
}
.deepam-header-searchbar .deepam-search-submit::before {
content: "\f002";
font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
font-weight: 400;
font-size: 15px;
}
.deepam-header-row .logo-area .logo {
height: 64px;
}
}
/* --- Delivery location, between the logo and the search -------------------- */
.deepam-delivery {
width: auto;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
background: transparent;
border: 0;
color: var(--color-primary);
cursor: pointer;
text-align: left;
max-width: 210px;
}
.deepam-delivery i {
font-size: 20px;
flex: 0 0 auto;
}
.deepam-delivery-text {
display: flex;
flex-direction: column;
line-height: 1.2;
/* min-width: 0 lets a long state name ellipsis rather than stretching the
control and squeezing the search field beside it. */
min-width: 0;
}
.deepam-delivery-text small {
font-size: 11px;
opacity: 0.85;
}
.deepam-delivery-text strong {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- Centred dialog -------------------------------------------------------- */
.deepam-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
/* Above the sticky header and the toast container. */
z-index: 1200;
}
.deepam-modal {
position: relative;
background: #ffffff;
border-radius: 10px;
padding: 34px 30px 30px;
width: 100%;
max-width: 420px;
text-align: center;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}
.deepam-modal-icon {
font-size: 38px;
color: var(--color-primary);
margin-bottom: 14px;
display: block;
}
.deepam-modal h4 {
margin-bottom: 10px;
}
.deepam-modal p {
color: var(--color-body);
margin-bottom: 22px;
}
.deepam-modal .rts-btn {
width: auto;
display: inline-flex;
}
.deepam-modal-alt {
font-size: 13px;
margin: 16px 0 0;
}
.deepam-modal-close {
position: absolute;
top: 12px;
right: 12px;
width: auto;
padding: 6px 9px;
background: transparent;
border: 0;
color: #7d7d7d;
cursor: pointer;
}
@media only screen and (max-width: 991px) {
.deepam-delivery {
max-width: none;
}
}
/* ===========================================================================
PAGE GUTTERS
The theme's .container is 1696px wide with 12px of side padding, and
.container-2 / .container-3 are different widths again -- so content ran
almost edge to edge on a laptop, and sections did not line up with each
other.
One width and one gutter for all three: content sits in a column with real
margins either side, the way the big marketplaces lay out, and every section
shares the same left and right edge.
=========================================================================== */
.container,
.container-2,
.container-3 {
max-width: 1440px;
padding-left: 24px;
padding-right: 24px;
margin-left: auto;
margin-right: auto;
}
@media only screen and (max-width: 991px) {
.container,
.container-2,
.container-3 {
padding-left: 16px;
padding-right: 16px;
}
}
@media only screen and (max-width: 575px) {
.container,
.container-2,
.container-3 {
padding-left: 12px;
padding-right: 12px;
}
}
/* Bootstrap rows pull their own gutter back with negative margins. With the
container padding above that is what keeps a row's first column flush with
the section heading rather than sitting 12px further in. */
.container > .row,
.container-2 > .row,
.container-3 > .row {
margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
}
/* Home hero: full bleed, like the contact page's banner.
The gutters above apply to every .container, which boxed the hero into the
same column as the product grids. A hero image is the one thing that should
run to the edges of the screen, so its container is released -- and the
rounded corners go with it, since a radius on a full-bleed band reads as a
mistake. The category strip underneath keeps its gutters. */
.rts-banner-area-one > .container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
.rts-banner-area-one > .container > .row {
margin-left: 0;
margin-right: 0;
}
.rts-banner-area-one > .container > .row > [class*='col-'] {
padding-left: 0;
padding-right: 0;
}
/* Both the slide AND its wrapper: the wrapper carries the theme's 6px and
clips the slide, so zeroing only the slide left the corners still rounded.
The round prev/next arrows inside are deliberate and untouched. */
.rts-banner-area-one .banner-bg-image,
.rts-banner-area-one .category-area-main-wrapper-one,
.rts-banner-area-one .swiper,
.rts-banner-area-one .swiper-slide {
border-radius: 0;
}
/* The hero starts immediately under the second header bar. rts-section-gap pads
60px top and bottom; the top half put a strip of grey between the nav and the
banner. pt_sm--20 does the same on small screens, so that is zeroed too.
THE BOTTOM HALF IS CUT TO 30px, WHICH IS A CHOSEN FIGURE, NOT A COPY OF THE
TOP. The air above the category cards is the banner's mb--40; the 60px that
used to sit below their labels left the row visibly high in its own band, and
30px is what settles it. The two numbers are deliberately close but separate
-- nothing here needs to track mb--40.
Nothing downstream re-adds to it either: the section that follows the hero is
rts-section-gapBottom, which pads underneath itself only. */
.deepam-hero-wrap.rts-section-gap,
.deepam-hero-wrap.pt_sm--20 {
/* !important is here to reach exactly one rule: the theme writes
`.pt_sm--20 { padding-top: 20px !important }` inside its <=767px block, and
nothing without !important can beat that however specific it is. On a phone
that 20px was a band of grey between the search bar and the banner. */
padding-top: 0 !important;
}
.deepam-hero-wrap.rts-section-gap {
padding-bottom: 30px;
}
/* ---------------------------------------------------------------------------
Sticky header.
Both bars travel together: the whole .deepam-header sticks, not each bar
separately, so the logo/search row and the nav row never separate mid-scroll.
position: sticky rather than fixed -- fixed would take the header out of the
flow and drop the page 141px upward under it, needing a spacer to compensate.
Sticky keeps its space in the layout and simply stops at the top.
--------------------------------------------------------------------------- */
.deepam-header {
position: sticky;
top: 0;
/* Above the page content and the hero's swiper arrows, below the delivery
dialog (1200). */
z-index: 1000;
/* Matches bar one, which is what the page sees at the top of the header. */
background: #fffdf8;
}
/* Only once it has actually stuck: a shadow drawn at rest would sit over the
banner from the first paint. */
.deepam-header-secondary {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
/* BELOW 1200px ONLY THE BRAND ROW STICKS.
The search bar underneath it has to scroll away, and a sticky ancestor takes
every descendant with it -- so the stickiness moves down one level, from the
header to the row that is meant to stay. `static` on the wrapper is the
important half: leaving it sticky would pin both rows however the child is
styled.
Nothing else on the site is sticky at these widths; the two that are on
desktop (the checkout summary and the shop's recommended sidebar) are both
released below their own breakpoints. */
@media only screen and (max-width: 1199px) {
.deepam-header {
position: static;
z-index: auto;
}
.deepam-header-primary {
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
}
/* The categories dropdown hangs off bar two, so it has to clear the bars. */
.deepam-header .category-sub-menu {
z-index: 1001;
}
/* ---------------------------------------------------------------------------
ALL drawer.
The theme ships .side-bar.header-two off-canvas and slides it in on .show;
what is added here is the backdrop, the section styling, and a z-index above
the sticky header (1000) so the drawer covers it rather than sliding under.
--------------------------------------------------------------------------- */
.deepam-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1100;
}
#side-bar.side-bar.header-two {
z-index: 1101;
/* Up and down only. Something inside -- the category tree, or the email
address in the contact block, which is one long unbreakable word -- was
wider than the panel and put a scrollbar along the bottom. A drawer is a
column of links; there is nothing to the right of it worth scrolling to. */
overflow-x: hidden;
overflow-y: auto;
}
/* The reason the content overflowed, rather than just clipping the symptom
above: long words wrap instead of forcing the panel wide. The contact email
is the usual culprit -- a 40-character address with no space in it. */
#side-bar.side-bar.header-two,
#side-bar.side-bar.header-two a {
overflow-wrap: anywhere;
}
/* OPENS FROM THE LEFT.
The theme parks the drawer at `right: -100%` and slides it to `right: 0`, so
it came in from the right-hand edge. The ALL button that opens it sits at the
far left of the header, and a panel that flies in from the opposite side of
the screen to the control that summoned it reads as a different thing
entirely. Both the parked and the open position have to be flipped, and
`right` explicitly returned to auto -- leaving it set would pin both edges and
stretch the drawer across the whole viewport. */
#side-bar.side-bar,
#side-bar.side-bar.header-two {
right: auto;
left: -100%;
}
#side-bar.side-bar.show,
#side-bar.side-bar.header-two.show {
right: auto;
left: 0;
}
/* The theme's close tab is no longer rendered -- see Sidebar.tsx. This hides it
defensively in case the theme's own script ever injects one: two crosses on
one panel is two answers to "how do I shut this". */
#side-bar.side-bar button.close-icon-menu {
display: none;
}
/* THE close, inside the panel's top-right corner -- where people look for an X.
Positioned against the drawer's own padding rather than at 0, so it lines up
with the content below it instead of hugging the corner. */
.deepam-drawer-close {
position: absolute;
top: 14px;
right: 18px;
z-index: 2;
display: grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: 50%;
background-color: var(--color-surface);
color: var(--color-heading-1);
font-size: 17px;
line-height: 1;
cursor: pointer;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.deepam-drawer-close:hover {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
/* On a phone the drawer's top padding opens up so the first heading is not
underneath the close button.
The inner X used to be hidden here, because the theme's tab took its place
below 768px. With that tab gone, hiding this one would leave a phone with no
close button at all -- only the backdrop and Escape, and a handset has no
Escape key. */
@media (max-width: 767px) {
#side-bar.side-bar {
padding-top: 66px;
}
}
.deepam-drawer-section {
padding: 18px 0;
border-bottom: 1px solid var(--color-border);
}
.deepam-drawer-title {
font-size: 13px;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--color-body);
margin-bottom: 10px;
}
.deepam-drawer-links {
list-style: none;
padding: 0;
margin: 0;
}
.deepam-drawer-links li a {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 2px;
color: var(--color-heading-1);
font-weight: 500;
}
.deepam-drawer-links li a:hover {
color: var(--color-primary);
}
.deepam-drawer-links li a i {
width: 18px;
text-align: center;
}
.deepam-drawer-actions {
display: flex;
gap: 10px;
padding: 18px 0;
}
.deepam-drawer-actions .rts-btn {
flex: 1 1 auto;
justify-content: center;
}
.deepam-drawer-contact {
padding-top: 6px;
font-size: 13px;
}
.deepam-drawer-contact .phone {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
/* The address is long; let it wrap rather than push the drawer wider. */
overflow-wrap: anywhere;
}
/* Inside the drawer the category list is a plain list, not a floating panel --
the theme positions .category-sub-menu absolutely for the header dropdown. */
#side-bar .menu-category .category-sub-menu {
position: static;
box-shadow: none;
border: 0;
padding: 0;
width: 100%;
min-width: 0;
opacity: 1;
visibility: visible;
transform: none;
}
/* ---------------------------------------------------------------------------
Category strip under the hero: image only.
The theme's card is a 161px white box with a border and 25px of padding, and
the picture sat small inside it. Here the picture IS the card: no background,
no border, no padding, and a square that sizes itself to the slide Swiper
gives it.
--------------------------------------------------------------------------- */
/* WIDTH IS SWIPER'S TO DECIDE, not this stylesheet's.
The slide was pinned to 200px, which is what forced slidesPerView="auto" and
left a half-cut card at the right edge. With an integer slidesPerView Swiper
writes an inline width that divides the track evenly, so a fixed width here
would either fight it or bring the slicing back. */
.rts-caregory-area-one .swiper-slide {
width: auto;
/* Without this Swiper stretches every slide to the tallest one; the cards are
the same height anyway, and it keeps the row from shifting while images
load. */
height: auto;
}
/* Nothing may spill past the slide edge -- overflow here is the other way a
card ends up looking cut. */
.rts-caregory-area-one .swiper {
overflow: hidden;
}
.rts-caregory-area-one .single-category-one {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
height: auto;
gap: 10px;
}
/* max-width/max-height must be released too: the theme caps this image at
70x94, which silently wins over a plain width/height and is why the picture
stayed thumbnail-sized. */
/* Fills whatever width Swiper gave the slide, and stays square via
aspect-ratio rather than a hardcoded height -- a fixed 200px height against a
fluid width would stretch or squash the photo at every breakpoint.
The max-* caps must be released too: the theme caps this image at 70x94,
which silently wins over a plain width/height and is why the picture stayed
thumbnail-sized. */
.rts-caregory-area-one .single-category-one img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
max-width: none;
max-height: none;
min-height: 0;
margin: 0;
object-fit: cover;
/* One rounded corner, top left. Written longhand rather than as the
four-value shorthand so it is obvious which corner is which. */
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
/* A hairline instead of the old box: it separates a pale product photo from
the page without putting a card back around it. */
border: 1px solid var(--color-border);
}
.rts-caregory-area-one .single-category-one p {
margin: 0;
font-size: 14px;
font-weight: 500;
text-align: center;
color: var(--color-heading-1);
}
.rts-caregory-area-one .single-category-one:hover p {
color: var(--color-primary);
}
/* --- Carousel arrows: ONE treatment, every carousel -----------------------
White glyph on the house orange, everywhere there are arrows at all.
THE HERO HAS NONE. It advances on its own and can be swiped, and a pair of
80px controls over the artwork competed with the offer printed on it. Its
buttons are gone from the markup rather than hidden here, so there is nothing
left to style -- see components/banner/BannerOne.tsx.
That leaves two: the product rows, which were an orange glyph on nothing, and
the category strip. Same control, same job, so one appearance.
The selectors are long because the theme's own rule for the product row is
specific (0-3-0), and a bare .swiper-button-next would lose to it. Each group
here matches or beats the rule it replaces.
SIZES ARE LEFT ALONE -- 33px beside a product heading, 40px on the category
strip, and those are deliberate for where they sit. Only the colours are
unified. */
.title-area-between .next-prev-swiper-wrapper .swiper-button-next,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev,
.rts-caregory-area-one .swiper-button-next,
.rts-caregory-area-one .swiper-button-prev {
background-color: var(--color-primary);
background-image: none;
border: 1px solid var(--color-primary);
color: #fff;
box-shadow: 0 6px 16px -8px rgb(103 17 58 / 45%);
transition:
background-color 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
}
/* The Font Awesome icon inside the hero and product arrows. The theme turns
this one primary-coloured on hover against a white background; here the
background stays orange, so the glyph stays white. */
.title-area-between .next-prev-swiper-wrapper .swiper-button-next i,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev i,
.title-area-between .next-prev-swiper-wrapper .swiper-button-next:hover i,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev:hover i {
color: #fff;
}
/* THE CHEVRON IS DRAWN IN CSS, NOT IN A FONT.
Swiper's own arrow is `content: "next"` set in its `swiper-icons` webfont,
which maps that string to a single glyph. That font is not loading here --
document.fonts.check('14px swiper-icons') is false -- so the button was
rendering the four literal letters n-e-x-t in white, which at 14px inside a
40px circle reads as a smudge rather than an arrow.
Two borders on an empty box, rotated: no font, no icon library, nothing to
fail to load, and it stays crisp at any size. */
.rts-caregory-area-one .swiper-button-next::after,
.rts-caregory-area-one .swiper-button-prev::after {
content: "";
/* REQUIRED. A pseudo-element is display: inline by default, and width and
height are simply ignored on an inline box -- so the chevron collapsed to
nothing and the button rendered as a plain orange disc. */
display: block;
width: 9px;
height: 9px;
border-style: solid;
border-color: #fff;
/* Top and right only -- the two edges that form a chevron once rotated. */
border-width: 2px 2px 0 0;
/* The letters are gone, but the pseudo-element still inherits text metrics
that would offset the box. */
font-size: 0;
line-height: 0;
}
/* A rotated square sits visually off-centre in its box, so each is nudged back
towards the middle by roughly half its border width. */
.rts-caregory-area-one .swiper-button-next::after {
transform: rotate(45deg);
margin-left: -3px;
}
.rts-caregory-area-one .swiper-button-prev::after {
transform: rotate(-135deg);
margin-right: -3px;
}
/* DOUBLE ARROWS. Where the markup already supplies a Font Awesome icon, Swiper
still draws its own chevron on top -- two arrows in one button, which is what
put a blue glyph over the hero's white one. Suppressed for those two, kept
for the category strip, whose buttons have no icon of their own. */
.title-area-between .next-prev-swiper-wrapper .swiper-button-next::after,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev::after {
content: none;
}
.title-area-between .next-prev-swiper-wrapper .swiper-button-next:hover,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev:hover,
.rts-caregory-area-one .swiper-button-next:hover,
.rts-caregory-area-one .swiper-button-prev:hover {
background-color: var(--color-primary-hover);
border-color: var(--color-primary-hover);
box-shadow: 0 8px 20px -8px rgb(103 17 58 / 60%);
transform: scale(1.06);
}
/* Keyboard focus gets the same ring the rest of the site uses. */
.title-area-between .next-prev-swiper-wrapper .swiper-button-next:focus-visible,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev:focus-visible,
.rts-caregory-area-one .swiper-button-next:focus-visible,
.rts-caregory-area-one .swiper-button-prev:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--color-primary-ring);
}
/* NO ARROWS ON THE PRODUCT ROWS BELOW 1200px.
There the row is dragged with a finger and Swiper is built with navigation
turned off (components/product/ProductCarousel.tsx), so these two would be
live-looking buttons that do nothing. The part-visible card at the right edge
is what says the row continues. */
@media only screen and (max-width: 1199px) {
.title-area-between .next-prev-swiper-wrapper {
display: none;
}
}
/* --- Category strip arrows: size and placement only ---------------------- */
.rts-caregory-area-one .swiper-button-next,
.rts-caregory-area-one .swiper-button-prev {
width: 40px;
height: 40px;
border-radius: 50%;
}
/* THE ARROWS APPEAR ONLY WHEN THERE IS SOMEWHERE TO GO, and that decision is
Swiper's, not this stylesheet's.
Swiper adds `swiper-button-lock` to both buttons whenever every slide already
fits -- five categories in a five-wide row, say -- and its own CSS hides that
class. So the controls disappear when the strip is not a carousel and come
back on their own the moment another category makes it one. Nothing here
should second-guess that: a width-based rule cannot know how many cards there
are.
`swiper-button-disabled` is a different state -- the end of a non-looping run.
Hidden rather than greyed, because a visible control that does nothing is
worse than none. */
.rts-caregory-area-one .swiper-button-disabled:not(.swiper-button-lock) {
opacity: 0;
pointer-events: none;
}
/* Set by the component from Swiper's own isLocked state, because the
swiper-button-lock class it is supposed to add does not appear at every
width. See components/banner/CategoryBb.tsx. */
.category-area-main-wrapper-one.is-locked .swiper-button-next,
.category-area-main-wrapper-one.is-locked .swiper-button-prev {
display: none;
}
/* Smaller on a phone so the controls do not crowd a narrow strip -- but still
PRESENT. They used to be display: none below 768px, which broke the rule
above: at that width only two of five cards fit, so the strip genuinely is a
carousel and hiding its only control left swiping as the sole way to know the
rest existed. */
@media (max-width: 767px) {
.rts-caregory-area-one .swiper-button-next,
.rts-caregory-area-one .swiper-button-prev {
width: 32px;
height: 32px;
}
.rts-caregory-area-one .swiper-button-next::after,
.rts-caregory-area-one .swiper-button-prev::after {
width: 7px;
height: 7px;
border-width: 2px 2px 0 0;
}
}
/* ===========================================================================
PRODUCT CARD
The theme's card is a flat grey tile: no elevation, images on grey, titles of
different lengths pushing the price and buttons to different heights on every
card, and outlined buttons that read as secondary actions.
What this does:
- white card on a hairline border, with a lift on hover
- one fixed image box, white behind the photo, gentle zoom on hover
- the title reserved two lines, so prices and buttons line up across a row
- price as the loudest thing on the card, MRP and saving beside it
- a filled Buy Now with the cart as a square icon button next to it
All of it is scoped to .single-shopping-card-one, which every card variant
uses -- grid, list, carousels and Recommended Picks.
=========================================================================== */
.single-shopping-card-one {
--card-image-height: 260px;
background: #ffffff;
border: 1px solid #ececec;
border-radius: 14px;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.single-shopping-card-one:hover {
border-color: #e3d5cb;
box-shadow: 0 14px 30px rgba(31, 31, 37, 0.1);
transform: translateY(-3px);
}
/* --- image ---------------------------------------------------------------- */
.single-shopping-card-one .image-and-action-area-wrapper,
.single-shopping-card-one > .thumbnail-preview {
position: relative;
background: #ffffff;
}
/* No radius of its own. The theme rounds all four corners by 6px: the top two
are hidden behind the card's own 14px clip, but the bottom two curved inward
and left white notches where the image meets the text below it.
Square here, and the card's overflow:hidden supplies the rounded top. */
.single-shopping-card-one .thumbnail-preview {
display: block;
height: var(--card-image-height);
overflow: hidden;
background: #fff;
border-radius: 0;
}
.single-shopping-card-one .thumbnail-preview img {
width: 100%;
height: 100%;
/* cover, so every card is the same shape whatever the photograph's aspect --
contain left pale bars down the sides of portrait shots. */
object-fit: cover;
transition: transform 0.45s ease;
}
.single-shopping-card-one:hover .thumbnail-preview img {
transform: scale(1.06);
}
/* --- wishlist ------------------------------------------------------------- */
.single-shopping-card-one .action-share-option,
.single-shopping-card-one .pdp-wishlist,
.single-shopping-card-one .rec-wishlist {
position: absolute;
top: 12px;
right: 12px;
z-index: 4;
}
.single-shopping-card-one .action-share-option .single-action {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
color: var(--color-heading-1);
transition: 0.25s;
}
.single-shopping-card-one .action-share-option .single-action:hover {
background: var(--color-primary);
color: #ffffff;
}
/* THE GLYPHS WERE INVISIBLE UNTIL YOU HOVERED EACH CIRCLE.
The theme paints these icons white -- `... .action-share-option
.single-action i { color: #fff }` -- because its strip has a coloured ground
and no discs on it. Here each action IS a white disc, so white-on-white left
three blank circles, and only the one under the pointer showed its icon (the
theme's own :hover rule recolours it). Hovering the card is meant to reveal
the actions, not to start a guessing game about which of three blanks is
Quick View.
Both ancestor forms are listed for the same reason as everywhere else in
this file: the theme writes the rule twice, at (0,4,1) each, and a shorter
selector loses to whichever one applies. */
.single-shopping-card-one .image-and-action-area-wrapper .action-share-option .single-action i,
.single-shopping-card-one .thumbnail-preview .action-share-option .single-action i {
color: var(--color-primary);
}
/* And the hover state inverts properly: the disc fills with wine and the glyph
turns white, rather than both staying white. */
.single-shopping-card-one .image-and-action-area-wrapper .action-share-option .single-action:hover,
.single-shopping-card-one .thumbnail-preview .action-share-option .single-action:hover {
background: var(--color-primary);
}
.single-shopping-card-one .image-and-action-area-wrapper .action-share-option .single-action:hover i,
.single-shopping-card-one .thumbnail-preview .action-share-option .single-action:hover i {
color: #ffffff;
}
/* --- body ----------------------------------------------------------------- */
.single-shopping-card-one .body-content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 14px 14px 16px;
gap: 6px;
}
/* The theme puts margins on each of these; with a flex gap doing that job they
stack, which is where the airy space between the name, the stock line and
the price came from. */
.single-shopping-card-one .body-content > *,
.single-shopping-card-one .body-content .title,
.single-shopping-card-one .body-content .stock-qty-row,
.single-shopping-card-one .body-content .price-area {
margin-bottom: 0;
margin-top: 0;
}
.single-shopping-card-one .body-content > a {
text-decoration: none;
}
.single-shopping-card-one .body-content .title {
font-size: 15px;
font-weight: 600;
line-height: 1.35;
margin: 0;
/* Two lines reserved whether the name needs them or not: without it a
one-line title and a two-line title put their prices at different heights
and the row looks broken. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(1.35em * 2);
}
.single-shopping-card-one .body-content .title:hover {
color: var(--color-primary);
}
/* NO RESERVED SECOND LINE, AT ANY WIDTH.
The theme keeps `min-height: 2.6em` here so a one-line name and a two-line
name leave their prices at the same height. Measured on a card titled
"Jewel": the text is 21px tall inside a 42px box, so 21px of nothing sat
between the name and "120 in stock", and another 10px of margin under it.
The reserve buys an alignment that is already paid for -- .cart-counter-action
is pinned to the bottom of the card by `margin-top: auto`, so the buttons end
level however tall the title is. Removing it closes the gap on every card that
has a short name, and changes nothing about the ones that wrap.
:not(.discount-offer) is required, not decoration: that is how the theme
writes the rule, at (0,4,0), and a three-class selector loses to it. */
.single-shopping-card-one:not(.discount-offer) .body-content .title {
min-height: 0;
margin-bottom: 0;
}
.single-shopping-card-one .availability-list,
.single-shopping-card-one .stock-qty-row {
font-size: 12px;
color: var(--color-body);
}
/* --- price ---------------------------------------------------------------- */
.single-shopping-card-one .price-area {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
margin: 0;
}
/* .current / .previous are the theme's own class names on these two spans.
The selector has to include .body-content: the theme writes
`.single-shopping-card-one .body-content .price-area .current` and colours it
--color-danger (red), which outranks a shorter selector. */
.single-shopping-card-one .body-content .price-area .current,
.single-shopping-card-one .price-area .current {
font-size: 19px;
font-weight: 700;
/* Heading colour, not the brand orange: on a card that already has an orange
ribbon and an orange button, an orange price is a third thing shouting. */
color: var(--color-heading-1);
}
.single-shopping-card-one .body-content .price-area .previous,
.single-shopping-card-one .price-area .previous,
.single-shopping-card-one .price-area del,
.single-shopping-card-one .price-area s {
font-size: 13px;
font-weight: 400;
color: #9e9e9e;
text-decoration: line-through;
}
/* Stock reads as a status, not as body copy: green when it is in, red when it
is not, and small either way. */
.single-shopping-card-one .stock-qty-row .availability {
font-size: 12px;
color: #26a541;
font-weight: 500;
}
.single-shopping-card-one .stock-qty-row .availability:only-child:not(:empty) {
display: inline-block;
}
/* The heart on the image, matching the round action buttons. */
.single-shopping-card-one .card-wishlist-btn {
position: absolute;
top: 12px;
right: 12px;
z-index: 4;
width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
color: var(--color-heading-1);
cursor: pointer;
transition: 0.25s;
}
.single-shopping-card-one .card-wishlist-btn:hover,
.single-shopping-card-one .card-wishlist-btn.is-active {
background: var(--color-primary);
color: #ffffff;
}
/* Quick View and the hover cart sit bottom-left of the image, out of the
heart's way. */
.single-shopping-card-one .image-and-action-area-wrapper .action-share-option {
top: auto;
right: auto;
bottom: 12px;
left: 12px;
display: flex;
gap: 8px;
opacity: 0;
transform: translateY(6px);
transition: 0.25s;
}
.single-shopping-card-one:hover .image-and-action-area-wrapper .action-share-option {
opacity: 1;
transform: translateY(0);
}
/* --- actions -------------------------------------------------------------- */
.single-shopping-card-one .cart-counter-action {
margin-top: auto;
display: flex;
align-items: stretch;
gap: 8px;
}
.single-shopping-card-one .cart-counter-action .rts-btn,
.single-shopping-card-one .cart-counter-action button {
height: 42px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
}
/* The cart is a square icon button; Buy Now fills what is left, so the primary
action is unmistakably the primary one. */
.single-shopping-card-one .cart-counter-action .list-cart-icon-btn,
.single-shopping-card-one .cart-counter-action button:first-child {
flex: 0 0 46px;
width: 46px;
padding: 0;
background: #fbf3f1;
color: var(--color-primary);
border: 1px solid #ecd3cb;
}
.single-shopping-card-one .cart-counter-action .list-cart-icon-btn:hover,
.single-shopping-card-one .cart-counter-action button:first-child:hover {
background: var(--color-primary);
color: #ffffff;
}
.single-shopping-card-one .cart-counter-action .list-buy-btn,
.single-shopping-card-one .cart-counter-action button:last-child {
flex: 1 1 auto;
background: var(--color-primary);
color: #ffffff;
border: 1px solid var(--color-primary);
}
.single-shopping-card-one .cart-counter-action button:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* The carousels keep a shorter image so more cards fit a row. */
.mySwiper-category-1 .single-shopping-card-one {
--card-image-height: 220px;
padding: 0;
}
/* ===========================================================================
SHORTER CARDS ON A PHONE OR TABLET
WIDTH IS UNCHANGED -- how many cards fit a row is set in
components/product/ProductCarousel.tsx and by the grid's own columns, and
nothing here touches it. This is height only.
Where the height went:
image 220px, sized for a 330px-wide desktop column
title two lines reserved whether the name needs them or not
stock line "12 in stock" on a row of its own
buttons 42px tall with 46px of square cart beside them
padding 14px all round, plus a 6px gap between every one of the four
Each is defensible on a desktop grid; stacked on a phone they made a card
most of a screen tall, so two products filled the viewport and the row below
never announced itself.
Scoped to .single-shopping-card-one, which every variant uses -- carousels,
shop grid, Recommended Picks -- so the same product is not one height here
and another two sections down.
=========================================================================== */
@media only screen and (max-width: 1199px) {
.single-shopping-card-one {
--card-image-height: 150px;
border-radius: 10px;
}
/* The carousel cards carry their own 220px above -- (0,2,0), which a bare
.single-shopping-card-one cannot reach whatever the media query. Repeated
here so the strip shortens with everything else instead of keeping the
desktop image inside a shorter card. */
.mySwiper-category-1 .single-shopping-card-one {
--card-image-height: 150px;
}
/* And the image goes back to filling its box. An explicit pixel height on the
. An inline anchor gives the card
nothing to resolve height: 100% against, so linked and unlinked cards would
end up different heights in the same row. */
.rts-feature-area .row > [class*="col-"] > a {
display: block;
height: 100%;
text-decoration: none;
color: inherit;
}
/* Keyboard users get the same affordance as the mouse, on the ring rather than
the default outline so it follows the card's radius. */
.rts-feature-area .row > [class*="col-"] > a:focus-visible {
outline: none;
}
/* Matches the hover treatment -- the bright gradient ring plus an outer halo --
rather than setting border-color, which is transparent by design here and
would paint a flat band over the gradient. */
.rts-feature-area .row > [class*="col-"] > a:focus-visible .single-feature-area {
box-shadow:
0 0 0 3px var(--color-primary-ring),
0 26px 44px -22px rgb(57 19 45 / 34%);
}
.rts-feature-area .row > [class*="col-"] > a:focus-visible .single-feature-area::before {
opacity: 1;
}
/* Below xl each card's share of the row is narrow, so the roomier padding and
type would crowd. Restored above 1400px where there is width for it. */
@media (min-width: 992px) and (max-width: 1399px) {
.rts-feature-area .single-feature-area {
padding: 22px 16px;
gap: 13px;
}
.rts-feature-area .single-feature-area .icon {
width: 50px;
height: 50px;
font-size: 21px;
}
.rts-feature-area .single-feature-area .icon img {
width: 26px;
height: 26px;
}
.rts-feature-area .single-feature-area .title {
font-size: 15px;
}
.rts-feature-area .single-feature-area .information p {
font-size: 12px;
}
}
/* Motion is decoration here, so it goes first for anyone who has asked for
less of it. The colour and shadow changes stay -- they carry the hover
meaning; only the movement is dropped. */
@media (prefers-reduced-motion: reduce) {
.rts-feature-area .single-feature-area,
.rts-feature-area .single-feature-area::before,
.rts-feature-area .single-feature-area::after,
.rts-feature-area .single-feature-area .icon {
transition-duration: 0.01ms;
}
.rts-feature-area .single-feature-area:hover {
transform: none;
}
.rts-feature-area .single-feature-area:hover .icon {
transform: none;
}
}
/* ---- Product colours -------------------------------------------------------
The shades a product comes in, on the same row as its title so they read as
part of naming the thing rather than as a separate section further down.
Fed from the admin's variant rows: staff pick a shade off the colour wheel
and it is stored as a hex, which is what lets these be painted at all. A
colour recorded as a name with no shade still appears, as an initial in a
neutral chip, so it is never silently missing.
-------------------------------------------------------------------------- */
.product-title-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
/* The title keeps its own margin; the row must not add a second one. */
.product-title-row .product-title {
margin-bottom: 0;
}
.product-colours {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.product-colours__dot {
width: 28px;
height: 28px;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.18);
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.product-colours__dot:hover {
transform: scale(1.08);
}
/* A ring OUTSIDE the swatch, not a border on it: a border eats into the circle
and changes the amount of colour on screen, which is the one thing a shopper
is judging. */
.product-colours__dot.is-chosen {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1c1917;
}
.product-colours__dot:focus-visible {
outline: none;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #dc2626;
}
/* Struck through rather than hidden. A colour the shop stocks but has sold out
of is information -- removing it makes the range look smaller than it is,
and the customer may want to ask when it is back. */
.product-colours__dot.is-soldout {
opacity: 0.45;
cursor: not-allowed;
}
.product-colours__dot.is-soldout::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: linear-gradient(
to bottom right,
transparent calc(50% - 1px),
rgba(0, 0, 0, 0.65) calc(50% - 1px),
rgba(0, 0, 0, 0.65) calc(50% + 1px),
transparent calc(50% + 1px)
);
}
/* Named but never given a shade on the wheel. */
.product-colours__initial {
font-size: 12px;
font-weight: 700;
color: #57534e;
background: #f5f5f4;
width: 100%;
height: 100%;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.product-colours__chosen {
margin: 10px 0 0;
font-size: 14px;
color: #57534e;
}
.product-colours__out {
color: #dc2626;
font-weight: 600;
}
/* On a phone the title takes the full width and the swatches sit under it,
rather than the name being squeezed into half a line. */
@media (max-width: 575px) {
.product-title-row {
gap: 10px;
}
.product-title-row .product-title {
flex: 1 1 100%;
}
}
/* =========================================================================
Size picker
-------------------------------------------------------------------------
Chips rather than a dropdown: the sizes a boutique stocks are few, and a
shopper comparing "is their M my M" needs to see every measurement at once
rather than opening a list and reading them one at a time.
A required choice, so it is drawn as one -- see the asterisk on the label
and the disabled buttons behind it in shop/[slug]/page.tsx.
========================================================================= */
.product-sizes__label {
margin: 0 0 8px;
font-size: 14px;
font-weight: 600;
color: var(--color-heading-1);
}
/* The site's danger colour, which is what it means everywhere else here. */
.product-sizes__required {
color: #dc2626;
}
/* ONE ROW, always, and no scrollbar. The sizes are a scale -- S, M, L read as a
sequence, and both a wrap and a scroller hide part of it: the first breaks
the line, the second puts XXL somewhere the shopper has to go looking for.
So the chips shrink to fit instead. Every size stays on screen whatever the
column width, which is the whole point of showing them as a row. */
.product-sizes__list {
display: flex;
flex-wrap: nowrap;
gap: 6px;
min-width: 0;
}
/* Shrinkable, and no wider than they need to be. min-width: 0 is what lets a
flex item go below its content width -- without it "Free size" would hold the
row open and push the rest off the end. */
.product-sizes__chip {
flex: 1 1 auto;
min-width: 0;
}
/* The labels are what actually has to fit, so they lose their padding first and
then ellipsis rather than spilling out of the chip. */
.product-sizes__name,
.product-sizes__measure {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product-sizes__chip {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 6px 8px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 6px;
cursor: pointer;
line-height: 1.25;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.product-sizes__chip:hover:not(:disabled) {
border-color: var(--color-primary);
}
/* A ring, not a thicker border: a border that grows on selection shifts every
chip beside it by a pixel, and the whole row twitches as you click along. */
.product-sizes__chip.is-chosen {
border-color: var(--color-primary);
box-shadow: 0 0 0 1px var(--color-primary);
}
.product-sizes__chip:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Marked, not disabled. Every size is pickable -- a shop that will cut one to
order still wants the request -- so this only says "not on the shelf". Muted
rather than struck through, because a struck-through chip that is also
selected reads as two contradictory things at once. */
.product-sizes__chip.is-soldout .product-sizes__name,
.product-sizes__chip.is-soldout .product-sizes__measure {
opacity: 0.55;
}
/* The chosen one is fully legible again whatever its stock: it is what they
are buying, and half-faded selected text reads as a rendering fault. */
.product-sizes__chip.is-soldout.is-chosen .product-sizes__name,
.product-sizes__chip.is-soldout.is-chosen .product-sizes__measure {
opacity: 1;
}
.product-sizes__name {
font-size: 13px;
font-weight: 600;
color: var(--color-heading-1);
}
/* The measurement is the answer to "is their M my M", so it sits under the
letter rather than in a tooltip nobody on a phone can open. */
.product-sizes__measure {
font-size: 10px;
color: var(--color-body);
opacity: 0.75;
}
.product-sizes__hint {
margin: 8px 0 0;
font-size: 13px;
color: #dc2626;
}
/* =========================================================================
Product page on phone and tablet
-------------------------------------------------------------------------
Below 1200px the image column and the text column stack. Three things then
have to be said explicitly, because stacking does not imply any of them:
1. the image centres in the width it is given
2. the text does NOT centre with it -- a centred paragraph of description
and a centred price read as a poster, not a product
3. nothing is allowed to be wider than the screen
(3) is the one that bites. The page scrolls sideways if ANY descendant
overflows, and the offender is usually a flex row of buttons whose items are
all fixed width -- there is nothing to give, so the row grows instead.
========================================================================= */
@media only screen and (max-width: 1199px) {
/* 1. THE IMAGE, CENTRED -- and it takes two rules, not one.
The theme stacks the columns here and sets `margin: 0` on the image column
at (0,3,0):
.rts-product-details-section2 .details-product-area .product-thumb-area
A shorter selector loses to that no matter where it sits in the file, which
is why an earlier attempt at this did nothing. Matched depth for depth. */
.rts-product-details-section2 .details-product-area .product-thumb-area {
margin-left: auto;
margin-right: auto;
}
/* The second rule is the one that actually moves the picture. The theme
widens the COLUMN to 100%, while the image box inside it keeps its fixed
--pdp-image-width -- so on a tablet a 460px frame sat at the left edge of a
900px column. Centring the column achieves nothing while the box inside is
still left-aligned. */
.rts-product-details-section2 .details-product-area .product-thumb-area .product-thumb {
margin-left: auto;
margin-right: auto;
}
/* The thumbnail strip belongs under the middle of the image it describes. */
.rts-product-details-section2 .details-product-area .product-thumb-area .product-thumb-filter-group {
justify-content: center;
}
/* 2. TEXT STAYS LEFT.
Below 768px the theme centres this whole block -- `align-items: center` and
`text-align: center` on `.rts-product-details-section .contents`. Both have
to be undone, not just the text-align: the block is a flex column, so
align-items is what actually pulls the price and the buttons to the middle.
Two classes on the same element (0,3,0) to outrank the theme's (0,2,0). */
.rts-product-details-section.rts-product-details-section2 .contents {
align-items: flex-start;
text-align: left;
margin-left: 0;
margin-right: 0;
}
.rts-product-details-section.rts-product-details-section2 .contents .product-title,
.rts-product-details-section.rts-product-details-section2 .contents p,
.rts-product-details-section.rts-product-details-section2 .contents .product-price {
text-align: left;
}
/* 3. NOTHING WIDER THAN THE SCREEN.
min-width: 0 on the columns is the actual fix -- a flex or grid item
refuses to shrink below its content by default, which is how one long
button row drags the whole page wide. The overflow-x guard on the section
is the backstop for anything not thought of here. */
.rts-product-details-section2 .details-product-area,
.rts-product-details-section2 .contents,
.rts-product-details-section2 .product-thumb-area {
min-width: 0;
max-width: 100%;
}
.rts-chop-details-area {
overflow-x: hidden;
}
/* The buttons themselves: allowed to wrap, and allowed to shrink. The cart
icon keeps its size, Buy Now takes the room that is left, and Share drops
to the next line rather than off the edge. */
.rts-product-details-section .details-product-area .product-bottom-action {
flex-wrap: wrap;
}
.rts-product-details-section .details-product-area .product-bottom-action
.share-option-shop-details {
margin-top: 0;
}
}
/* Post Review: white label, in every state.
-------------------------------------------------------------------------
The theme sets `.rts-btn { color: #fff }` (0,1,0) and Bootstrap sets
`.btn-primary:hover { color: #fff }` (0,2,0) -- yet the label still changed
on hover, so something between them was winning. Three classes on the same
element (0,3,0) settles it without reaching for !important, and every state
is listed so none of them can be picked up by a rule elsewhere.
:disabled is included on purpose: the label reads "Posting..." while the
review is in flight, and a greyed-out word on the faded background is the
one moment the button most needs to stay readable. */
.rts-btn.btn-primary.review-post-btn,
.rts-btn.btn-primary.review-post-btn:link,
.rts-btn.btn-primary.review-post-btn:visited,
.rts-btn.btn-primary.review-post-btn:hover,
.rts-btn.btn-primary.review-post-btn:focus,
.rts-btn.btn-primary.review-post-btn:focus-visible,
.rts-btn.btn-primary.review-post-btn:active,
.rts-btn.btn-primary.review-post-btn:disabled {
color: #ffffff;
}
/* Review headings, sized to be read.
-------------------------------------------------------------------------
The theme's scale sets --h5 to 16px and --h6 to 15px, which is barely above
body text -- so "5.0 out of 5" and "Write a review" both read as ordinary
sentences rather than as the headings they are.
Scoped to the reviews block rather than raising --h5/--h6 globally: those two
variables are used across the whole theme, and moving them would resize
headings on every page to fix two lines on one tab. */
.product-details-review-product-style .title {
font-size: 22px;
line-height: 1.3;
}
.review-form-title {
font-size: 22px;
line-height: 1.3;
}
/* Panel headings at the size the serif is drawn for.
-------------------------------------------------------------------------
"Cart Totals", "Wishlist Totals" and "Available offers" are the headings of
the three summary panels, and they sat at the theme's --h5 (16px) and --h6
(15px). In Cormorant that is barely above the body text underneath, so each
panel read as one undifferentiated block.
Named individually rather than by raising --h5/--h6: those two variables set
every small heading on the site, including the interface labels that are
deliberately kept in the sans at 13-14px. */
.cart-total-area-start-right > .title,
.shop-sight-sticky-sidevbar > .title {
font-size: 22px;
line-height: 1.3;
}
/* Checkout button, centred on a phone.
-------------------------------------------------------------------------
TWO rules are needed, and the second is the one that matters. The theme sets
.cart-total-area-start-right .bottom .rts-btn { width: 100%; max-width: 100% }
so the button spans the whole panel. That is why it looked over-long, and
also why centring the row alone did nothing: an item already filling its
container has no free space left to be centred in. The width has to come off
first, then the centring has something to work with.
justify-content on the row rather than `margin: 0 auto` on the button: the
disabled "Select an item to continue" state is a and the live one is
an , and centring the container works the same for both. */
@media only screen and (max-width: 767px) {
.cart-total-area-start-right .bottom .button-area {
display: flex;
justify-content: center;
}
.cart-total-area-start-right .bottom .rts-btn {
width: auto;
/* max-content, so the button is exactly as wide as its label -- and the
100% ceiling stays as a guard for the longest label, "Select an item to
continue", on the narrowest handset. */
max-width: max-content;
text-align: center;
}
}
/* Shop by Category: the whole tile is the link.
-------------------------------------------------------------------------
The card only responded to its small "Shop Now" button, while everything
about it -- the artwork, the heading, the hover -- said the whole thing was
clickable. This stretches an invisible link over the card.
z-index 1 puts it above the background but BELOW .content-area (raised to 2),
so the heading stays selectable and Shop Now keeps its own hover and focus
ring rather than being swallowed by the cover. */
.single-feature-card {
position: relative;
}
.feature-card-cover {
position: absolute;
inset: 0;
z-index: 1;
}
.single-feature-card .content-area {
position: relative;
z-index: 2;
}