, so it inherited the 13px label size while its sibling section
headings ("Billing details", "Your order") are --text-base/--text-lg. */
#ship-to-different-address {
margin-bottom: 0.75rem;
}
#ship-to-different-address label {
font-size: var(--text-base);
font-weight: 500;
font-family: var(--theme-body-font);
margin-bottom: 0;
}
@media screen and (min-width: 576.02px) {
#ship-to-different-address {
margin-bottom: 1.25rem;
}
#ship-to-different-address label {
font-size: var(--text-lg);
}
}
/* Checkbox and its text on one baseline instead of a 100%-wide block label. */
.woocommerce-cart-wrapper .woocommerce-form__label-for-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
width: auto;
}
/* Desktop checkout columns. base.css pins the summary to
--cart-collaterals-width: 320px from 1024px upwards and never grows it, so
on a wide screen the order table, the payment box and the place-order
button are all squeezed into 320px while the form column runs to ~900px.
Only the variable is touched; the theme's flex layout still does the work. */
@media screen and (min-width: 1200.02px) {
.woocommerce-cart-wrapper .cart-wrapper {
--cart-collaterals-width: 400px;
}
}
/* Free-shipping progress notice. nurfia-core prints it with the class
`success`, but base.css only defines the `.red` and `.green` variants - so
the "qualifies for free shipping" state fell back to the neutral grey
palette and its progress bar to grey-on-grey. Mirrors `.green`. */
.woocommerce-notice.success {
--notice-color: rgb(var(--colors-green-dark));
--notice-background: rgba(var(--colors-green-light), 0.4);
--notice-border: rgba(var(--colors-green-base), 0.3);
--notice-progress-background: rgba(var(--colors-green-dark), 0.12);
--notice-progress-active: rgb(var(--colors-green-base));
}
/* The notice only gets a bottom margin on the cart page, via
`.cart-wrapper .woocommerce-cart-form .woocommerce-notice`. On checkout it
is hooked onto woocommerce_checkout_billing and lands in #customer_details
instead, where nothing separates it from the "Billing details" heading. */
#customer_details > * > .klb-free-shipping {
margin-bottom: 1.25rem;
}
/* Shipping method list in the order-review table. The theme styles
`#order_review .woocommerce-checkout-payment ul` but not this one, so it
kept the UA default disc bullets and 40px indent inside the table cell. */
.woocommerce-shipping-methods {
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce-shipping-methods li {
display: flex;
align-items: baseline;
gap: 0.375rem;
}
.woocommerce-shipping-methods li + li {
margin-top: 0.375rem;
}
.woocommerce-shipping-methods label {
margin-bottom: 0;
}
/* "Create an account?" block. Its fields are direct children of
.create-account, not of a __field-wrapper, so they missed the grid above
and kept bootstrap's paragraph margins. */
.woocommerce-account-fields {
margin-top: 1.125rem;
}
.woocommerce-account-fields > .create-account {
margin-bottom: 0;
}
.woocommerce-account-fields .create-account > .form-row {
margin-bottom: 1.125rem;
}
.woocommerce-account-fields .create-account > .form-row:last-of-type {
margin-bottom: 0;
}
/* Cart / order-review line items: the attribute list rendered as six stacked
lines because dt/dd are blocks and the inside each dd carries a 1rem
margin from bootstrap.css. */
.shop_table dl.variation {
display: grid;
grid-template-columns: auto 1fr;
gap: 0 0.375rem;
margin: 0.375rem 0 0;
font-size: var(--text-xs);
color: rgb(var(--colors-gray-600));
}
.shop_table dl.variation dt {
font-weight: 500;
margin: 0;
}
.shop_table dl.variation dd,
.shop_table dl.variation dd p {
margin: 0;
}
/* Cart line items below 768px. The table carries WooCommerce's
shop_table_responsive class and per-cell data-title labels, but the CSS that
turns those into stacked rows was dequeued, so six columns were being forced
into a phone's width. Scoped to the line-item table only - "Cart totals" and
the checkout review table are two-column and read fine as tables. */
@media screen and (max-width: 768px) {
.woocommerce-cart-form__contents,
.woocommerce-cart-form__contents tbody,
.woocommerce-cart-form__contents tbody > tr,
.woocommerce-cart-form__contents tbody > tr > td {
display: block;
}
.woocommerce-cart-form__contents thead {
display: none;
}
.woocommerce-cart-form__contents tbody > tr.cart_item {
display: grid;
grid-template-columns: 4.5rem 1fr auto;
grid-template-areas:
"thumb name remove"
"thumb quantity subtotal";
gap: 0.5rem 0.875rem;
align-items: start;
padding-block: 1rem;
}
.woocommerce-cart-form__contents tbody > tr > td {
padding: 0;
border: 0;
}
.woocommerce-cart-form__contents tbody > tr > td.product-thumbnail {
grid-area: thumb;
width: auto;
}
.woocommerce-cart-form__contents tbody > tr > td.product-thumbnail a {
width: 100%;
}
.woocommerce-cart-form__contents tbody > tr > td.product-name {
grid-area: name;
}
.woocommerce-cart-form__contents tbody > tr > td.product-quantity {
grid-area: quantity;
align-self: end;
}
.woocommerce-cart-form__contents tbody > tr > td.product-subtotal {
grid-area: subtotal;
align-self: end;
text-align: end;
font-weight: 500;
}
.woocommerce-cart-form__contents tbody > tr > td.product-remove {
grid-area: remove;
text-align: end;
}
/* Unit price is already implied by the subtotal on a one-line-per-item card. */
.woocommerce-cart-form__contents tbody > tr > td.product-price {
display: none;
}
/* The coupon field's 260px min-width overflowed a 375px screen. */
.shop_table .actions-wrapper .coupon {
width: 100%;
}
.shop_table .actions-wrapper .coupon input {
min-width: 0;
}
}
/* "Your order" / "Cart totals" had no frame of their own, so the summary ran
straight into the form above it. */
.order-review-wrapper,
.cart-collaterals .cart_totals {
border: 1px solid rgb(var(--colors-gray-200));
background-color: rgb(var(--colors-gray-50));
padding: 1.25rem;
}
@media screen and (min-width: 576.02px) {
.order-review-wrapper,
.cart-collaterals .cart_totals {
padding: 1.5rem;
}
}
#order_review .woocommerce-checkout-payment ul li > div p:last-child {
margin-bottom: 0;
}
/* Quantity stepper. The theme's quantity-input.php emits
`quantity quantity-select` but with minus/input/plus markup, while base.css
only styles steppers under `.quantity-input` - so the stepper was unstyled
everywhere: bare icons, and the input falling back to the generic
width:100% / --form-input-size-base rule. Matched on the presence of a
.quantity-button so a genuine is never touched. The class on the
wrapper is deliberately left alone - bundle.js keys its two quantity
behaviours off it, and its .quantity-input branch looks for an .input-qty
class this markup does not have. */
.quantity.quantity-select:has(.quantity-button) input.qty {
font-size: var(--qty-font-size);
text-align: center;
box-shadow: none;
outline: none;
width: calc(var(--qty-size) / 1.5);
height: var(--qty-size);
}
.quantity.quantity-select:has(.quantity-button) .quantity-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(var(--qty-size) / 1.2);
height: var(--qty-size);
cursor: pointer;
}
.quantity.quantity-select:has(.quantity-button) .quantity-button > * {
width: calc(var(--qty-size) / 2.3);
height: calc(var(--qty-size) / 2.3);
}
.quantity.quantity-select:has(.quantity-button) .quantity-button.disabled {
pointer-events: none;
cursor: not-allowed;
}
.quantity.quantity-select:has(.quantity-button) .quantity-button.disabled > * {
opacity: var(--form-quantity-disabled-opacity);
}
/* Order tracking form (/order-tracking/). Same unstyled form-row-first /
form-row-last problem as the checkout. */
.track_order {
max-width: 34rem;
}
.track_order .form-row {
margin-bottom: 1.125rem;
}
@media screen and (min-width: 576.02px) {
.track_order {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 1rem;
}
.track_order > p:not(.form-row-first):not(.form-row-last),
.track_order > .clear,
.track_order > .woocommerce-notices-wrapper {
grid-column: 1 / -1;
}
}
.track_order button {
width: 100%;
}
@media screen and (min-width: 576.02px) {
.track_order button {
width: auto;
min-width: 11rem;
}
}
/* ==========================================================================
Order received / view order
The theme has no CSS for these templates at all.
========================================================================== */
/* WooCommerce tags the two address columns with Bootstrap's .col-1 and .col-2.
Outside a .row those classes are just hard widths of 8.33% and 16.67%, so
both addresses were rendering as one-character-wide vertical strips. */
.woocommerce-customer-details .woocommerce-columns--addresses {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
.woocommerce-customer-details .woocommerce-columns--addresses > .woocommerce-column {
width: auto;
}
@media screen and (min-width: 576.02px) {
.woocommerce-customer-details .woocommerce-columns--addresses {
grid-template-columns: 1fr 1fr;
}
}
.woocommerce-customer-details address {
font-style: normal;
line-height: 1.7;
}
/* Order summary strip: order number, date, email, total, payment method. */
ul.woocommerce-thankyou-order-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 1rem;
margin: 0 0 1.5rem;
padding: 1.25rem;
list-style: none;
border: 1px solid rgb(var(--colors-gray-200));
background-color: rgb(var(--colors-gray-50));
}
ul.woocommerce-thankyou-order-details li {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgb(var(--colors-gray-500));
}
ul.woocommerce-thankyou-order-details li strong {
display: block;
margin-top: 0.25rem;
font-size: var(--text-sm);
text-transform: none;
letter-spacing: normal;
color: rgb(var(--colors-black));
}
/* Per-item attributes. Same problem as dl.variation in the cart: block list
items with a bootstrap-margined around each value. */
.wc-item-meta {
margin: 0.375rem 0 0;
padding: 0;
list-style: none;
font-size: var(--text-xs);
color: rgb(var(--colors-gray-600));
}
.wc-item-meta li {
display: flex;
gap: 0.375rem;
}
.wc-item-meta li p {
margin: 0;
}
.wc-item-meta .wc-item-meta-label {
font-weight: 500;
}
.daaraa-track-order {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid rgb(var(--colors-gray-200));
font-size: var(--text-sm);
}
.daaraa-track-order a {
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.1875rem;
}
/* ==========================================================================
My Account
The theme only overrides my-account.php, navigation.php and form-login.php,
so Orders, Addresses and Account details render from WooCommerce core
templates - and none of the classes those emit are styled anywhere in the
theme. woocommerce-orders-table, shop_table_responsive, woocommerce-Address
and form-row-first/last each resolve to zero rules.
========================================================================== */
/* Orders list below 768px. Every cell carries a data-title for WooCommerce's
responsive stacking, but that CSS is dequeued with the rest of
woocommerce.css, so five columns - number, date, status, total, actions -
were squeezed into a phone's width. Rebuilt as one card per order, with
data-title supplying the row label the hidden used to give. */
@media screen and (max-width: 768px) {
.woocommerce-orders-table,
.woocommerce-orders-table tbody,
.woocommerce-orders-table tbody > tr,
.woocommerce-orders-table tbody > tr > th,
.woocommerce-orders-table tbody > tr > td {
display: block;
width: auto;
}
.woocommerce-orders-table thead {
display: none;
}
.woocommerce-orders-table tbody > tr {
border: 1px solid rgb(var(--colors-gray-200));
padding: 0.5rem 1rem;
margin-bottom: 1rem;
}
.woocommerce-orders-table tbody > tr > th,
.woocommerce-orders-table tbody > tr > td {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.4375rem 0;
border: 0;
text-align: end;
}
.woocommerce-orders-table tbody > tr > th::before,
.woocommerce-orders-table tbody > tr > td::before {
content: attr(data-title);
flex: none;
font-size: var(--text-xs);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgb(var(--colors-gray-500));
text-align: start;
}
/* The actions cell holds buttons, not a value, so a label/value split would
push them into a narrow right-hand gutter. */
.woocommerce-orders-table tbody > tr > td.woocommerce-orders-table__cell-order-actions {
display: block;
text-align: start;
padding-top: 0.75rem;
}
.woocommerce-orders-table tbody > tr > td.woocommerce-orders-table__cell-order-actions::before {
content: none;
}
.woocommerce-orders-table .woocommerce-button {
display: block;
width: 100%;
text-align: center;
}
.woocommerce-orders-table .woocommerce-button + .woocommerce-button {
margin-top: 0.5rem;
}
}
/* Addresses. my-address.php tags its two columns with Bootstrap's .col-1 and
.col-2, which outside a .row are hard widths of 8.33% and 16.67% - the exact
trap the order-received addresses fell into, so both addresses rendered as
one-character-wide vertical strips on every screen size. */
.woocommerce-Addresses {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.woocommerce-Addresses > .woocommerce-Address {
width: auto;
}
@media screen and (min-width: 576.02px) {
.woocommerce-Addresses {
grid-template-columns: 1fr 1fr;
}
}
/* Heading and its "Edit" link share a baseline instead of stacking. */
.woocommerce-Address-title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.5rem;
}
.woocommerce-Address address {
font-style: normal;
line-height: 1.7;
margin: 0;
}
/* Account details and Edit address. Both use the form-row-first /
form-row-last pair that the checkout needed fixing for; unstyled, every
field became a full-width row. */
.woocommerce-EditAccountForm,
.woocommerce-address-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr;
gap: 1.125rem 1rem;
}
.woocommerce-EditAccountForm > .form-row,
.woocommerce-address-fields__field-wrapper > .form-row {
margin-bottom: 0;
}
/* fieldset (password change) and the submit row span the full width. */
.woocommerce-EditAccountForm > fieldset,
.woocommerce-EditAccountForm > p:last-of-type,
.woocommerce-EditAccountForm > .clear {
grid-column: 1 / -1;
}
@media screen and (min-width: 576.02px) {
.woocommerce-EditAccountForm,
.woocommerce-address-fields__field-wrapper {
grid-template-columns: 1fr 1fr;
}
.woocommerce-EditAccountForm > .form-row-wide,
.woocommerce-address-fields__field-wrapper > .form-row-wide {
grid-column: 1 / -1;
}
}
.woocommerce-EditAccountForm fieldset legend {
font-size: var(--text-base);
font-weight: 500;
margin-bottom: 0.75rem;
}
/* ==========================================================================
Single product page
========================================================================== */
/* The block WooCommerce injects once a variation is chosen - price, stock and
the variation description. The children (.price, .product-stock) are styled,
but the wrapper itself had no rules, so the injected content appeared flush
against the attribute dropdowns above it with no separation. */
.single_variation_wrap .woocommerce-variation.single_variation:not(:empty) {
margin-bottom: 1rem;
}
.woocommerce-variation-description p:last-child {
margin-bottom: 0;
}
.woocommerce-variation-description {
font-size: var(--text-sm);
line-height: 1.7;
color: rgb(var(--colors-gray-600));
}
/* "There are no reviews yet." - shown on every product, since the store has no
reviews at all. Unstyled it read as stray body text directly under the tab. */
.woocommerce-noreviews {
margin: 0;
padding: 1.25rem;
border: 1px dashed rgb(var(--colors-gray-200));
background-color: rgb(var(--colors-gray-50));
font-size: var(--text-sm);
text-align: center;
color: rgb(var(--colors-gray-500));
}
/* Announcement strip (mu-plugins/daaraa-festive-strip.php)
------------------------------------------------------------------
Sits above the header on every breakpoint, replacing the theme's own
notification bar, which only ever rendered from 1024px up.
The festive variant lays the brand's ink over a dark crop of the Diwali
still life. The photograph is treated as atmosphere, not as a picture: at
this height almost nothing of it is legible beyond a warm glow and the
bokeh at the right edge, which is the intent. A scrim is painted over it
regardless of how the image crops, so the text contrast never depends on
which part of the photograph the browser happened to show. */
.daaraa-strip {
position: relative;
z-index: 2;
background-color: rgb(var(--colors-gray-900));
color: #fff;
overflow: hidden;
}
.daaraa-strip__inner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: 0.75rem;
min-height: 2.5rem;
padding-inline: 1rem;
text-align: center;
}
.daaraa-strip__item {
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0.85;
}
/* Separators live on the items rather than in the markup so that hiding an
item on a small screen takes its separator with it. */
.daaraa-strip__item + .daaraa-strip__item::before {
content: "\00b7";
margin-inline-end: 0.75rem;
opacity: 0.55;
}
.daaraa-strip__item--lead {
font-weight: 600;
letter-spacing: 0.18em;
opacity: 1;
}
/* Phones get the occasion and the one promise that sells; the rest would
either wrap into a two-line block or scroll off the edge. */
@media screen and (max-width: 767px) {
.daaraa-strip__item:nth-child(n + 3) {
display: none;
}
}
.daaraa-strip--festive {
background-color: #3a1016;
}
.daaraa-strip--festive::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--daaraa-strip-bg);
background-size: cover;
background-position: center;
}
/* The scrim is heaviest across the middle, where the text sits, and lifts at
both edges so the flame on the left and the bokeh on the right still read.
A flat overlay dark enough for the text would have hidden the photograph
entirely, leaving a plain maroon bar. */
.daaraa-strip--festive::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(
to right,
rgba(42, 10, 15, 0.35),
rgba(42, 10, 15, 0.72) 32%,
rgba(42, 10, 15, 0.72) 68%,
rgba(42, 10, 15, 0.35)
);
}
.daaraa-strip--festive .daaraa-strip__inner {
position: relative;
z-index: 1;
}
/* A single hairline in the festive gold, so the strip reads as a deliberate
band rather than as a dark gap above the header. */
.daaraa-strip--festive .daaraa-strip__inner::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 1px;
background-image: linear-gradient(
to right,
rgba(201, 162, 77, 0),
rgba(201, 162, 77, 0.9),
rgba(201, 162, 77, 0)
);
}
.daaraa-strip--festive .daaraa-strip__item--lead {
color: #e8c98a;
}
/* Product tabs
------------------------------------------------------------------
The theme draws the four tab titles as plain text with nothing but a colour
change to mark the open one, and lets them wrap onto two lines on a phone,
where four wrapped titles read as a paragraph rather than as controls.
These get an underline on the active tab and scroll sideways instead of
wrapping. */
.single-product-wrapper .product .single-product-tabs-wrapper .wc-tabs {
flex-wrap: nowrap;
gap: 1.75rem;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.single-product-wrapper .product .single-product-tabs-wrapper .wc-tabs::-webkit-scrollbar {
display: none;
}
.single-product-wrapper .product .single-product-tabs-wrapper .wc-tabs li a {
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
padding-bottom: 0.875rem;
}
/* Drawn on the link rather than the so it is exactly as wide as the
title, and sits on the row's own border line. */
.single-product-wrapper .product .single-product-tabs-wrapper .wc-tabs li a::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: -1px;
height: 2px;
background-color: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--theme-ease-time-fast) var(--theme-ease-in-out);
}
.single-product-wrapper .product .single-product-tabs-wrapper .wc-tabs li.active a::after {
transform: scaleX(1);
}
/* Specification tab (mu-plugins/daaraa-product-specification.php)
------------------------------------------------------------------
Seventeen fields printed as bold line, blank line, value line, blank line
ran well past the fold on its own. The same content as a striped table is
about a third of the height and, more to the point, can be skimmed: the eye
runs down the label column instead of reading every line.
The design sections at the end (Kurta Design, Dupatta Design) are rows of
this table too - see the mu-plugin - so the tab is one object, not a table
with an essay stapled underneath it. */
.daaraa-spec__intro {
max-width: 65ch;
font-size: 0.875rem;
}
.daaraa-spec__sheet {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
/* The table is the width of the text column, not of the page: spec rows
stretched across 1400px put the value an inch away from its label. */
max-width: 56rem;
}
.daaraa-spec__sheet tr:nth-child(odd) {
background-color: rgb(var(--colors-gray-50));
}
.daaraa-spec__sheet th,
.daaraa-spec__sheet td {
padding: 0.875rem 1.25rem;
text-align: start;
vertical-align: top;
}
.daaraa-spec__sheet th {
width: 34%;
max-width: 13rem;
font-weight: 500;
color: rgb(var(--colors-gray-500));
white-space: normal;
}
.daaraa-spec__sheet td {
color: rgb(var(--colors-gray-800));
/* Occasion is a sixteen-item comma list on some products. Without this it
held the row on one unbroken line and pushed the panel past the right
edge of the page. */
overflow-wrap: anywhere;
}
.daaraa-spec__sheet td ul {
list-style: disc;
padding-inline-start: 1.125rem;
margin: 0;
}
.daaraa-spec__sheet td ul li {
margin-bottom: 0.3125rem;
}
.daaraa-spec__sheet td ul li:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 575px) {
.daaraa-spec__sheet th,
.daaraa-spec__sheet td {
padding: 0.75rem 0.875rem;
}
.daaraa-spec__sheet th {
width: 40%;
}
}
/* WooCommerce notices. The parent theme gives `ul.woocommerce-error` the same
neutral `1px solid #e5e7eb` border it gives every other box, so a blocking
checkout error looked identical to the green "qualifies for free shipping"
panel directly below it. Reuses the theme's own red/green/blue palette
variables rather than inventing colours. */
.woocommerce-notices-wrapper ul.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
form.checkout ul.woocommerce-error,
form.woocommerce-form ul.woocommerce-error {
border-radius: 0.375rem;
padding: 0.875rem 1rem;
line-height: 1.5;
}
.woocommerce-notices-wrapper ul.woocommerce-error,
form.checkout ul.woocommerce-error,
form.woocommerce-form ul.woocommerce-error {
color: rgb(var(--colors-red-dark));
background-color: rgba(var(--colors-red-light), 0.5);
border-color: rgba(var(--colors-red-base), 0.35);
}
.woocommerce-notices-wrapper ul.woocommerce-error li a,
form.checkout ul.woocommerce-error li a {
color: rgb(var(--colors-red-dark));
text-decoration: underline;
}
.woocommerce-notices-wrapper .woocommerce-message {
color: rgb(var(--colors-green-dark));
background-color: rgba(var(--colors-green-light), 0.5);
border-color: rgba(var(--colors-green-base), 0.35);
}
/* An error that scrolls off-screen is an error the customer never sees. The
checkout notices wrapper sits above the billing form, so on a phone a
mis-typed field at the bottom scrolls the message out of view. */
.woocommerce-error li {
margin-bottom: 0.375rem;
}
.woocommerce-error li:last-child {
margin-bottom: 0;
}
/* Hero slider: slow Ken Burns push on the real photograph.
This replaces an AI video. Two image-to-video attempts (wan-3-0, then Seedance 2.5
with an explicit pushIn and a pixel-faithful prompt) both re-rendered the scene
rather than animating it - the models' faces came back as different people and the
wide marigold composition was cropped away. On a fashion storefront that is
fabricated campaign imagery, so neither was shipped.
Scaling the real photo gives the hero motion without altering one pixel of it, costs
no extra download, and has none of the mobile autoplay problems a video file brings.
Scoped to the single hero image: `.site-banner-media > img` alone matches four
images on the home page (the hero plus three banner boxes); adding the
`.swiper-slide .site-banner` context narrows it to one. Verified against the live
DOM before writing this. */
.swiper-slide .site-banner .site-banner-media {
overflow: hidden;
}
.swiper-slide .site-banner .site-banner-media > img {
transform-origin: 50% 40%;
will-change: transform;
animation: daaraa-hero-kenburns 24s ease-in-out infinite alternate;
}
@keyframes daaraa-hero-kenburns {
from { transform: scale(1); }
to { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
.swiper-slide .site-banner .site-banner-media > img { animation: none; }
}
/* Hero caption legibility.
The slider template dims the photo by only rgba(0,0,0,.2). That is enough over the
original sage-green campaign shot, but the festive Diwali slide is bright marigold
and the offer line was hard to read against it.
Raising the global overlay would flatten the first slide too, so the scrim sits
behind the caption only and fades to nothing well before the edges - the photograph
stays as bright as it was everywhere else. */
.swiper-slide .site-banner .site-banner-content {
position: relative;
}
.swiper-slide .site-banner .site-banner-content::before {
content: "";
position: absolute;
inset: -8% -4%;
background: radial-gradient(ellipse at center,
rgba(0, 0, 0, 0.42) 0%,
rgba(0, 0, 0, 0.26) 45%,
rgba(0, 0, 0, 0) 72%);
pointer-events: none;
z-index: 0;
}
.swiper-slide .site-banner .site-banner-inner {
position: relative;
z-index: 1;
}
/* Hero slide with no logo: collapse the empty logo block.
The slider template always prints `.slider-custom-image` with an