. The centering rule just
below this comment used to be written as ".woocommerce div.product
.woocommerce-product-gallery { margin:0 auto !important; }" - THREE classes
(.woocommerce, .product, .woocommerce-product-gallery) plus 2 elements, i.e.
specificity (0,3,1). The reset it's trying to beat matches via `div.images`
instead, which is FOUR classes... no - .woocommerce, .product, .images is only
3 classes too, but with 2 elements each - actually the reset selector
".woocommerce div.product div.images" is (0,3,2) (three classes: woocommerce/
product/images, two elements: the two `div`s) which is MORE specific than the
old centering rule's (0,3,1) (three classes, one element - no second `div`
before .woocommerce-product-gallery). Since both declarations are !important,
higher specificity wins outright (it's not a tie), so the reset's margin:0 was
still beating the centering rule on the real page even though it looked fixed
in a plain test file where the gallery element was never given the `images`
class. This local harness never had `class="images"` on the gallery div either,
which is why this specific bug could never be reproduced locally - confirmed
live via DevTools that computed margin was 0px (not auto) at desktop widths.
Fix: match the SAME `div.images` compound the reset uses (plus keep the
gallery's own class so this rule stays gallery-specific), which makes this
selector (0,4,2) - one class heavier than the reset - so it always wins. */
.woocommerce div.product div.images.woocommerce-product-gallery { margin: 0 auto !important; }
.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
.woocommerce div.product .summary { grid-column: 2; grid-row: 1; }
.woocommerce div.product .woocommerce-product-gallery img { width: 100%; height: auto; display: block; }
/* Gallery safety net: WooCommerce's own flexslider JS (loaded because we declared
wc-product-gallery-slider support) sizes .woocommerce-product-gallery__wrapper and each
.woocommerce-product-gallery__image slide itself with inline styles (a wide track width
plus a per-slide width it uses to translate between slides). Putting a max-width/width
override on either of THOSE two elements fights that inline math: the browser still lets
JS set width:1800% etc. in the DOM, but caps the *rendered* size at our CSS max-width, so
the slide pitch flexslider computes for its slide-to-slide transform no longer matches
the pitch the slides actually render at. That mismatch is what was making the main photo
render blank and thumbnail clicks appear to do nothing (the "active" slide was being
transformed to a position outside the visible frame). So the wrapper and the individual
slides are left completely unstyled by us - only the outer .woocommerce-product-gallery
box (which flexslider does not touch) is capped to a nice display width, and the
![]()
itself is styled - so the whole gallery scales to whatever width that box resolves to
and flexslider's own math always matches what's actually on screen. */
.woocommerce-product-gallery { max-width: 520px; margin: 0 auto; position: relative; }
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
width: 100%;
height: auto;
border-radius: var(--ff-radius);
}
/* Thumbnail row (the small "windows" under the main photo) removed on request -
the product gallery is now just the plain slider. This is CSS-only: WooCommerce's
flexslider JS still builds the
in the DOM (it isn't
worth fighting the JS init to stop it), it's just hidden - swipe still works on touch,
and the direction-nav arrows just below take over prev/next on desktop where there's
no swipe gesture. */
.flex-control-thumbs { display: none; }
/* Prev/next arrows - flexslider adds these automatically (directionNav defaults to on);
this theme just never styled them before, so they either looked like plain browser
text links or were invisible. Now that the thumbnail row is gone, they're the only way
to move between photos with a mouse, so give them a clear, on-brand look. */
.woocommerce-product-gallery .flex-direction-nav { list-style: none; margin: 0; padding: 0; }
.woocommerce-product-gallery .flex-direction-nav li { list-style: none; }
.woocommerce-product-gallery .flex-direction-nav a {
position: absolute;
top: 50%;
z-index: 3;
width: 36px;
height: 36px;
margin-top: -18px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--ff-border);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,.12);
color: var(--ff-text);
font-size: 0;
text-indent: 0;
opacity: .95;
}
.woocommerce-product-gallery .flex-direction-nav a:hover { background: var(--ff-primary); color: #fff; border-color: var(--ff-primary); }
.woocommerce-product-gallery .flex-direction-nav a.flex-prev { left: 10px; }
.woocommerce-product-gallery .flex-direction-nav a.flex-next { right: 10px; }
.woocommerce-product-gallery .flex-direction-nav a.flex-prev::before { content: '\2039'; font-size: 22px; line-height: 1; }
.woocommerce-product-gallery .flex-direction-nav a.flex-next::before { content: '\203A'; font-size: 22px; line-height: 1; }
.woocommerce-product-gallery .flex-direction-nav a.flex-disabled { display: none; }
.woocommerce div.product .product_title { font-size: 28px; margin-bottom: 8px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 24px; color: var(--ff-primary); font-weight: 600; }
.woocommerce div.product .woocommerce-product-details__short-description { margin: 16px 0; color: var(--ff-text-light); }
.woocommerce div.product form.cart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 20px 0; }
.woocommerce div.product .quantity input { width: 64px; padding: 12px 8px; border: 1px solid var(--ff-border); border-radius: var(--ff-radius); text-align: center; }
.woocommerce div.product .single_add_to_cart_button { padding: 14px 40px; }
.woocommerce div.product .ff-btn-buynow { padding: 14px 40px; border-width: 1px; }
.ff-trust-badges { display: flex; gap: 18px; flex-wrap: wrap; margin: 18px 0 8px; font-size: 12px; color: var(--ff-text-light); }
.ff-trust-badges .ff-ico { color: var(--ff-primary); margin-right: 4px; }
.ff-wa-enquiry a { font-size: 13px; color: var(--ff-success); font-weight: 600; }
/* ---------------------------------------------------------
13b. SINGLE PRODUCT: badges, delivery/coupon/reward boxes,
accordion, about-brand strip, sticky add-to-cart bar.
--------------------------------------------------------- */
/* Bestseller / Exclusive ribbon. The wrapper shares the gallery's own grid
cell AND the same max-width/margin:auto centering as .woocommerce-product-gallery,
so its top-left corner always lands exactly on the photo's top-left corner
at any screen width, without needing to know the photo's rendered height. */
.ff-pdp-badges-wrap {
grid-column: 1;
grid-row: 1;
width: 100%;
max-width: 520px;
margin: 0 auto;
position: relative;
pointer-events: none;
z-index: 2;
}
.ff-pdp-badges { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.ff-pdp-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 5px 10px; border-radius: 6px; text-transform: uppercase; }
.ff-pdp-badge.bestseller { background: var(--ff-primary); color: #fff; }
.ff-pdp-badge.exclusive { background: #fff; color: var(--ff-primary); border: 1px solid var(--ff-primary); }
/* Wishlist + Share icons - same "own grid cell overlaying the photo" trick as
.ff-pdp-badges-wrap above, just anchored to the top-right corner instead. */
.ff-pdp-action-icons-wrap { grid-column: 1; grid-row: 1; width: 100%; max-width: 520px; margin: 0 auto; position: relative; pointer-events: none; z-index: 2; }
.ff-pdp-action-icons { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; pointer-events: auto; }
.ff-pdp-icon-btn { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--ff-border); box-shadow: 0 2px 8px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; color: var(--ff-text); }
.ff-pdp-icon-btn:hover { border-color: var(--ff-primary); color: var(--ff-primary); }
.ff-pdp-icon-btn svg { display: block; }
.ff-pdp-wishlist-btn.is-active { background: var(--ff-primary); border-color: var(--ff-primary); color: #fff; }
.ff-pdp-wishlist-btn.is-active svg { fill: currentColor; }
/* BUG FIX: WooCommerce's own built-in image-zoom "magnifying glass" button
(added automatically because functions.php declares add_theme_support for
'wc-product-gallery-zoom' / 'wc-product-gallery-lightbox') places itself in
the exact same top-right corner as our wishlist + share icons above, via
WooCommerce's own core CSS - the two were landing right on top of each
other, hiding the share button underneath. Restyling WooCommerce's button
to match ours (same 36px white circle) and moving it to the LEFT of our
two icons - same 14px top offset, same 8px gap - puts all three in one
tidy row instead of stacking. !important is needed because WooCommerce's
own stylesheet sets this element's position directly and loads after ours. */
.woocommerce-product-gallery__trigger {
position: absolute !important;
top: 14px !important;
right: 102px !important;
left: auto !important;
bottom: auto !important;
margin: 0 !important;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--ff-border);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,.12);
z-index: 3;
}
.ff-pdp-share-toast {
position: absolute;
top: 56px;
right: 14px;
background: var(--ff-text);
color: #fff;
font-size: 12px;
padding: 6px 12px;
border-radius: var(--ff-radius);
pointer-events: none;
z-index: 3;
}
/* On desktop (where there's a tall gallery column instead of a narrow mobile
strip), stack the search/wishlist/share icons vertically down the right
edge of the photo instead of side-by-side - same 14px inset, same 8px gap,
just top-to-bottom. Mobile keeps the horizontal row from the rules above -
this only applies once the single-product layout switches to its two-column
desktop grid (see ".woocommerce div.product" at the 1100px breakpoint). */
@media (min-width: 1101px) {
.woocommerce-product-gallery__trigger {
top: 14px !important;
right: 14px !important;
}
.ff-pdp-action-icons {
top: 58px; /* 14px inset + the 36px search icon above it + 8px gap */
right: 14px;
flex-direction: column;
}
.ff-pdp-share-toast {
top: 144px; /* below all three stacked icons (search + wishlist + share) */
right: 14px;
}
}
/* Star rating re-skinned as a small pill (WooCommerce's own markup/data, just restyled). */
.woocommerce div.product .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.woocommerce div.product .woocommerce-product-rating .star-rating { background: var(--ff-success); color: #fff; width: auto; padding: 4px 8px 4px 24px; border-radius: 5px; font-size: 12px; }
.woocommerce div.product .woocommerce-product-rating .star-rating::before { color: rgba(255,255,255,.5); }
.woocommerce div.product .woocommerce-product-rating .star-rating span::before { color: #fff; }
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link { font-size: 12px; color: var(--ff-text-light); }
/* Delivery / coupon boxes */
.ff-pdp-box { border: 1px solid var(--ff-border); border-radius: var(--ff-radius); padding: 16px; margin: 14px 0; }
.ff-pdp-box h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; font-family: 'Poppins', sans-serif; font-weight: 600; }
.ff-pincode-row { display: flex; gap: 8px; }
/* BUG FIX: flex items default to min-width:auto, which means a flex:1 child is never
allowed to shrink below its OWN intrinsic content size - for a plain that's
the browser's built-in default width (~size=20 characters, ~190px), regardless of how
narrow the flex row actually is. On mobile that forced this input (plus the "Check"
button next to it) to a combined intrinsic width of ~430px, which in turn forced the
entire single-column product-page grid track to stretch to match it - pushing the
photo, title, price and every other section on the page past the right edge of the
screen (horizontal scroll). min-width:0 lets the flex item shrink to fit its
container like any normal block element, which is what flex:1 was meant to do here. */
.ff-pincode-row input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--ff-border); border-radius: 8px; font-size: 14px; }
.ff-pincode-row button { padding: 11px 22px; border-radius: 8px; border: 1px solid var(--ff-primary); background: #fff; color: var(--ff-primary); font-weight: 600; font-size: 13px; }
.ff-pincode-row button:hover { background: var(--ff-primary); color: #fff; }
.ff-pincode-result { font-size: 13px; color: var(--ff-success); margin-top: 10px; }
.ff-delivery-perks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ff-delivery-perks li { font-size: 13px; color: var(--ff-text-light); display: flex; align-items: center; gap: 8px; }
.ff-delivery-perks .ico { color: var(--ff-primary); }
.ff-coupon-list { display: flex; flex-direction: column; gap: 10px; }
.ff-coupon { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ff-bg-soft); border: 1px dashed var(--ff-accent); border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.ff-coupon .code { font-family: monospace; font-weight: 700; background: #fff; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--ff-border); font-size: 12px; white-space: nowrap; }
/* New-customer reward strip */
.ff-reward-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: linear-gradient(90deg,#fff,var(--ff-bg-soft)); border-radius: var(--ff-radius); border: 1px solid var(--ff-border); padding: 14px 16px; margin: 14px 0; flex-wrap: wrap; }
.ff-reward-strip .step { text-align: center; font-size: 11px; color: var(--ff-text-light); flex: 1; min-width: 60px; }
.ff-reward-strip .step .pct { display: block; width: 34px; height: 34px; line-height: 34px; border-radius: 50%; background: var(--ff-primary); color: #fff; font-weight: 700; font-size: 11px; margin: 0 auto 4px; }
.ff-reward-strip .cta { font-size: 12px; font-weight: 700; color: var(--ff-primary); white-space: nowrap; }
/* Accordion (replaces default Description/Additional info/Reviews tabs) */
.ff-pdp-accordion { border-top: 1px solid var(--ff-border); margin-top: 18px; }
.ff-pdp-accordion details { border-bottom: 1px solid var(--ff-border); padding: 14px 2px; }
.ff-pdp-accordion summary { cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.ff-pdp-accordion summary::-webkit-details-marker { display: none; }
.ff-pdp-accordion summary::after { content: '+'; font-size: 18px; color: var(--ff-text-light); }
.ff-pdp-accordion details[open] summary::after { content: '\2212'; }
.ff-pdp-accordion details > div { font-size: 13px; color: var(--ff-text-light); margin-top: 10px; }
.ff-pdp-accordion details > div p:last-child { margin-bottom: 0; }
.ff-pdp-accordion details > div ul { margin: 0 0 0 18px; padding: 0; }
/* "Product specifications" row inside the accordion - styles WooCommerce's own
wc_display_product_attributes() table (Fabric, Color, Saree Length, Occasion,
Brand, etc. pulled straight from each product's attributes). */
.ff-pdp-specs table.woocommerce-product-attributes,
.ff-pdp-specs table.shop_attributes { width: 100%; border-collapse: collapse; font-size: 13px; }
.ff-pdp-specs table.woocommerce-product-attributes tr,
.ff-pdp-specs table.shop_attributes tr { border-bottom: 1px solid var(--ff-border); }
.ff-pdp-specs table.woocommerce-product-attributes tr:nth-child(even),
.ff-pdp-specs table.shop_attributes tr:nth-child(even) { background: var(--ff-bg-soft); }
.ff-pdp-specs table.woocommerce-product-attributes th,
.ff-pdp-specs table.shop_attributes th { text-align: left; font-weight: 600; color: var(--ff-text); width: 42%; padding: 8px 10px; vertical-align: top; }
.ff-pdp-specs table.woocommerce-product-attributes td,
.ff-pdp-specs table.shop_attributes td { color: var(--ff-text-light); padding: 8px 10px; vertical-align: top; }
.ff-pdp-specs table.woocommerce-product-attributes p,
.ff-pdp-specs table.shop_attributes p { margin: 0; }
/* About Favis Fashion strip */
.ff-about-brand-section { padding: 10px 0 50px; }
.ff-about-brand { background: var(--ff-bg-soft); border-radius: var(--ff-radius); padding: 28px; display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.ff-about-brand .logo-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--ff-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; flex-shrink: 0; }
.ff-about-brand h3 { margin-bottom: 4px; font-size: 18px; }
.ff-about-brand p { margin: 0; font-size: 13px; color: var(--ff-text-light); max-width: 520px; }
.ff-about-brand .stats { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 10px; }
.ff-about-brand .stat b { display: block; font-size: 18px; color: var(--ff-primary); }
.ff-about-brand .stat span { font-size: 12px; color: var(--ff-text-light); }
@media (max-width: 700px) {
.ff-about-brand { flex-direction: column; text-align: center; }
.ff-about-brand .stats { justify-content: center; }
.ff-about-brand p { max-width: none; }
}
/* Sticky mobile add-to-cart bar */
.ff-sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--ff-border); box-shadow: 0 -4px 16px rgba(0,0,0,.08); padding: 10px 16px; display: none; align-items: center; justify-content: space-between; gap: 10px; z-index: 500; }
.ff-sticky-bar.is-visible { display: flex; }
.ff-sticky-bar .price { font-weight: 700; color: var(--ff-primary); font-size: 15px; flex-shrink: 0; }
.ff-sticky-bar .price del { font-weight: 400; color: var(--ff-text-light); font-size: 11px; }
.ff-sticky-actions { display: flex; gap: 8px; }
.ff-sticky-bar .ff-btn { padding: 12px 18px; font-size: 12px; white-space: nowrap; }
.ff-sticky-bar .ff-btn:not(.ff-btn-outline) { border: none; }
@media (min-width: 901px) {
.ff-sticky-bar { display: none !important; } /* desktop already shows the real Add to Cart button on screen */
}
.woocommerce-tabs { grid-column: 1 / -1; margin-top: 50px; border-top: 1px solid var(--ff-border); padding-top: 30px; }
.woocommerce-tabs ul.tabs { display: flex; gap: 26px; border: none; margin-bottom: 24px; }
.woocommerce-tabs ul.tabs li { border: none; background: none; padding: 0; }
.woocommerce-tabs ul.tabs li a { font-size: 13px; text-transform: uppercase; font-weight: 600; letter-spacing: .03em; padding-bottom: 8px; display: inline-block; border-bottom: 2px solid transparent; }
.woocommerce-tabs ul.tabs li.active a { border-color: var(--ff-primary); color: var(--ff-primary); }
.related.products { grid-column: 1 / -1; margin-top: 50px; }
.related.products > h2 { text-align: center; margin-bottom: 30px; }
/* =========================================================
14. WOOCOMMERCE: CART / CHECKOUT
========================================================= */
.woocommerce-cart table.shop_table, .woocommerce-checkout table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.woocommerce-cart table.shop_table th, .woocommerce-cart table.shop_table td { padding: 14px 10px; border-bottom: 1px solid var(--ff-border); text-align: left; }
.woocommerce-cart table.shop_table img { width: 64px; border-radius: var(--ff-radius); }
.woocommerce-cart .coupon input#coupon_code { padding: 12px; border: 1px solid var(--ff-border); border-radius: var(--ff-radius); margin-right: 8px; }
.cart-collaterals .cart_totals { background: var(--ff-bg-soft); padding: 24px; border-radius: var(--ff-radius); max-width: 420px; margin-left: auto; }
.cart_totals table { width: 100%; }
.cart_totals table th, .cart_totals table td { padding: 10px 0; border-bottom: 1px solid var(--ff-border); }
.wc-proceed-to-checkout .checkout-button { width: 100%; text-align: center; padding: 14px; }
.woocommerce-checkout #payment { background: var(--ff-bg-soft); padding: 20px; border-radius: var(--ff-radius); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { padding: 11px 12px; border: 1px solid var(--ff-border); border-radius: var(--ff-radius); width: 100%; }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3 { margin-bottom: 16px; }
/* Your Cart and Checkout pages are actually running the newer WooCommerce
Cart/Checkout BLOCKS (wp-block-woocommerce-cart / -checkout), not the
classic template the rules just above were written for - that's why
things like table.shop_table and .cart-collaterals above have no effect
there. Blocks render their own markup with wc-block-* classes, styled
here instead so the discount-code box matches the rest of the site. */
.wc-block-components-totals-coupon {
border: 1px solid var(--ff-border);
border-radius: var(--ff-radius);
padding: 4px 16px;
margin: 14px 0;
background: var(--ff-bg-soft);
}
.wc-block-components-totals-coupon .wc-block-components-panel__button {
padding: 12px 0;
font-weight: 600;
font-size: 14px;
color: var(--ff-primary);
}
.wc-block-components-totals-coupon .wc-block-components-panel__button-icon { fill: var(--ff-primary); }
.wc-block-components-totals-coupon__form {
display: flex;
gap: 8px;
padding-bottom: 16px;
flex-wrap: wrap;
}
.wc-block-components-totals-coupon__form input {
flex: 1;
min-width: 140px;
padding: 11px 14px;
border: 1px solid var(--ff-border);
border-radius: 8px;
font-size: 14px;
}
.wc-block-components-totals-coupon__button {
background: var(--ff-primary) !important;
border-color: var(--ff-primary) !important;
border-radius: 8px !important;
color: #fff !important;
text-transform: none !important;
font-weight: 600 !important;
}
/* =========================================================
15. GENERIC PAGE / ABOUT / CONTACT / BLOG / 404
========================================================= */
.ff-generic-page, .ff-about-page main, .ff-contact-page { padding-bottom: 60px; }
.ff-page-title { font-size: 32px; margin: 30px 0 20px; }
.ff-page-body { max-width: 820px; }
/* Privacy Policy / Return Policy: long, section-heavy legal text (several
H2/H3 headings, bullet and numbered lists, a few tables) needs its own
rhythm - the base h1-h6/p rules near the top of this file are deliberately
generic (they also style hero headings, card titles, etc.) and don't set
list spacing at all, so a raw wall of / from the block editor would
otherwise render heading-hugging-paragraph and default cramped browser list
indent. Scoped to .ff-policy-page .ff-page-body so it never touches the
About/Contact page bodies or any other .ff-page-body use. */
.ff-policy-updated { color: var(--ff-text-light); font-size: 13px; margin: -8px 0 28px; }
.ff-policy-page .ff-page-body h2 { font-size: 22px; margin: 40px 0 14px; padding-top: 4px; }
.ff-policy-page .ff-page-body h2:first-child { margin-top: 0; }
.ff-policy-page .ff-page-body h3 { font-size: 17px; margin: 26px 0 10px; }
.ff-policy-page .ff-page-body p { margin: 0 0 16px; color: var(--ff-text); }
.ff-policy-page .ff-page-body ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.ff-policy-page .ff-page-body ol { margin: 0 0 16px; padding-left: 22px; list-style: decimal; }
.ff-policy-page .ff-page-body li { margin-bottom: 8px; }
.ff-policy-page .ff-page-body li > ul,
.ff-policy-page .ff-page-body li > ol { margin-top: 8px; }
.ff-policy-page .ff-page-body a { color: var(--ff-primary); text-decoration: underline; }
.ff-policy-page .ff-page-body strong { font-weight: 600; }
.ff-policy-page .ff-page-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.ff-policy-page .ff-page-body th,
.ff-policy-page .ff-page-body td { text-align: left; padding: 10px 12px; border: 1px solid var(--ff-border); vertical-align: top; }
.ff-policy-page .ff-page-body th { background: var(--ff-bg-soft); font-weight: 600; }
.ff-policy-page .ff-page-body hr { border: none; border-top: 1px solid var(--ff-border); margin: 32px 0; }
@media (max-width: 600px) {
.ff-policy-page .ff-page-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.ff-about-hero { padding: 40px 0 0; }
.ff-about-story-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.ff-about-story-image img { border-radius: var(--ff-radius); }
.ff-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ff-value-card { text-align: center; padding: 26px; background: var(--ff-bg-soft); border-radius: var(--ff-radius); }
.ff-value-icon { display: inline-flex; width: 46px; height: 46px; border-radius: 50%; background: var(--ff-primary); color: #fff; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 20px; }
.ff-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 20px; }
.ff-contact-details li { margin-bottom: 10px; font-size: 14px; }
.ff-contact-form-wrap { background: var(--ff-bg-soft); padding: 28px; border-radius: var(--ff-radius); }
.ff-contact-form label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.ff-contact-form input, .ff-contact-form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--ff-border); border-radius: var(--ff-radius); margin-bottom: 4px; }
.ff-form-message { padding: 12px 16px; border-radius: var(--ff-radius); font-size: 13px; margin-bottom: 16px; }
.ff-form-message.ff-success { background: #e7f5e8; color: var(--ff-success); }
.ff-form-message.ff-error { background: #fdeaea; color: #b3261e; }
.ff-contact-map { margin-top: 40px; }
.ff-contact-map iframe { width: 100%; height: 360px; border: 0; display: block; }
.ff-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 24px; }
.ff-blog-card-img img { border-radius: var(--ff-radius); aspect-ratio: 3/2; object-fit: cover; }
.ff-blog-meta { font-size: 12px; color: var(--ff-text-light); }
.ff-pagination { margin-top: 30px; text-align: center; }
/* Same shorthand-zeroes-the-sides bug as .ff-shop-page above - longhand keeps
.container's left/right padding intact on mobile. */
.ff-404-page { padding-top: 100px; padding-bottom: 100px; text-align: center; }
.ff-404-inner h1 { font-size: 72px; color: var(--ff-primary); }
.ff-404-inner .ff-btn { margin: 6px; }
/* =========================================================
16. BACK TO TOP
========================================================= */
.ff-back-to-top { position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; background: var(--ff-primary); color: #fff; border: none; font-size: 18px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .2s ease; z-index: 150; }
.ff-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
/* =========================================================
17. RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.ff-category-grid { grid-template-columns: repeat(4, 1fr); }
.ff-cols-4, ul.products.columns-4, .ff-cols-5, ul.products.columns-5 { grid-template-columns: repeat(3, 1fr); }
.ff-footer-columns { grid-template-columns: 1fr 1fr; }
.woocommerce div.product { grid-template-columns: 1fr; }
/* On desktop the gallery and summary sit side-by-side in columns 1 and 2, both
pinned to "grid-row: 1". Once the grid above drops to a single column, that
fixed row assignment stacks the two in the SAME cell instead of one below the
other - the price/quantity/Add to Cart block (.summary) ends up layered behind
the product photos instead of appearing underneath them. Pin them to two
explicit rows (1 then 2) instead of "auto": the gallery badges ribbon
(.ff-pdp-badges-wrap, added later) is ALSO pinned to row 1/column 1 so it can
overlay the photo - if gallery/summary used "grid-row: auto" here, the grid's
auto-placement algorithm treats that already-pinned badges cell as taken and
pushes the auto-placed gallery down to row 2 and summary to row 3, breaking
the whole stack. Explicit row numbers for all three sidestep that entirely. */
.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
.woocommerce div.product .summary { grid-column: 1; grid-row: 2; }
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img { max-height: 460px; }
}
@media (max-width: 880px) {
.ff-primary-nav { display: none; }
.ff-mobile-menu-toggle { display: flex; }
/* BUG FIX: this used to be plain ".ff-mobile-nav { display:block; ... }" with no
":not([hidden])" guard. A normal author CSS rule always outranks the browser's
built-in "[hidden]{display:none}" default, regardless of the hidden attribute
main.js toggles on #ff-mobile-nav - so the menu panel was permanently
display:block at this breakpoint and the hamburger button's click handler had
no visible effect (tapping it never actually opened/closed anything). Scoping
this rule to :not([hidden]) lets the hidden attribute (and JS toggle) control
visibility again, the way the JS in main.js already expects. */
.ff-mobile-nav:not([hidden]) { display: block; border-top: 1px solid var(--ff-border); background: #fff; }
.ff-mobile-menu-list li { border-bottom: 1px solid var(--ff-border); }
.ff-mobile-menu-list li a { display: block; padding: 14px 20px; }
.ff-shop-layout.has-sidebar { grid-template-columns: 1fr; }
.ff-shop-sidebar { order: 2; }
.ff-about-story-grid, .ff-contact-grid { grid-template-columns: 1fr; }
.ff-values-grid, .ff-blog-grid, .ff-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
.ff-banner-count-2, .ff-banner-count-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.ff-hero-slides { height: 420px; }
.ff-hero-slide-content h2 { font-size: 28px; }
.ff-category-grid { grid-template-columns: repeat(2, 1fr); }
.ff-cols-2, .ff-cols-3, .ff-cols-4, .ff-cols-5, ul.products.columns-2, ul.products.columns-3, ul.products.columns-4, ul.products.columns-5 { grid-template-columns: repeat(2, 1fr) !important; }
.ff-values-grid, .ff-blog-grid, .ff-testimonial-grid { grid-template-columns: 1fr; }
.ff-newsletter-inner { flex-direction: column; text-align: center; }
.ff-footer-columns { grid-template-columns: 1fr; }
}