html, body {
overflow-x: hidden !important;
max-width: 100vw !important; /* Lock to screen width */
}
/* Apply Premium Serif Font Globally to all text */
html, body, p, a, span, div, h1, h2, h3, h4, h5, h6, button, input, textarea, select, li, label, th, td {
font-family: 'Georgia', serif !important;
}
/* ==================================================
HOME PAGE: MAIN LAYOUT & COLORS
================================================== */
.hero-gradient { background: #FFFFFF; }
.product-box-bg {
background-color: #ffffff;
border: 1px solid #F0F0F0;
border-radius: 16px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding: 0 !important; /* Edge to edge fix */
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.group:hover .product-box-bg {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}
/* ==================================================
HOME PAGE: SLIDER FIX (NO ARROWS, TOUCH FRIENDLY)
================================================== */
.slider-wrapper {
border-radius: 16px;
overflow: hidden;
background: #F9F9F9;
margin-bottom: 2rem;
}
.hero-slider-img {
width: 100% !important;
height: 450px !important;
object-fit: contain !important;
object-position: center !important;
padding: 0;
display: block;
}
@media (max-width: 768px) {
.hero-slider-img {
height: 300px !important;
}
}
/* ARROWS COMPLETELY REMOVED */
.slick-arrow, .slick-prev, .slick-next {
display: none !important;
}
/* Slider Dots (iVenus Style) */
.slick-dots {
position: absolute;
bottom: 15px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
}
.slick-dots li {
position: relative;
display: inline-block;
margin: 0 4px;
padding: 0;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 8px;
height: 8px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: #D1D5DB;
border-radius: 50%;
transition: 0.3s;
}
.slick-dots li.slick-active button {
background: #8FA395;
transform: scale(1.2);
}
/* ==================================================
HOME PAGE: PRODUCT GRID IMAGE FIX
================================================== */
.grid-img-wrapper {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 12px 12px 0 0;
overflow: hidden;
margin-bottom: 16px;
background-color: transparent !important;
display: flex;
align-items: center;
justify-content: center;
padding: 0px;
}
.grid-img-wrapper img {
max-width: 100%;
max-height: 100%;
object-fit: contain !important;
background-color: transparent !important;
}
/* =========================================
SCENTRIC CUSTOM LOGO RESPONSIVE SIZING
========================================= */
/* Mobile Screen (Default) */
.custom-scentric-logo {
height: 40px !important;
width: 150px !important;
transition: all 0.3s ease-in-out;
}
/* Tablet Screen */
@media (min-width: 768px) {
.custom-scentric-logo {
height: 53px !important;
width: 180px !important;
}
}
/* Desktop/Big Screen */
@media (min-width: 1024px) {
.custom-scentric-logo {
height: 60px !important;
width: 180px !important;
}
}
/* ==========================================================================
SCENTRIC PREMIUM E-COMMERCE STYLES (Pro Industry Level)
========================================================================== */
/* ==========================================================================
1. PREMIUM WOOCOMMERCE MESSAGES (Notices)
========================================================================== */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
background-color: #F9F7F5 !important; color: #1d1d1f !important; border: 1px solid #E6E2DD !important; border-radius: 16px !important; padding: 15px 25px !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; margin: 0 auto 30px auto !important; max-width: 100% !important; font-family: 'Georgia', serif !important;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; }
.woocommerce-message .woocommerce-message-content { flex: 1; }
.woocommerce-message .button, .woocommerce-info .button {
background: #8FA395 !important; color: #ffffff !important; border-radius: 99px !important; padding: 10px 24px !important; text-decoration: none !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; transition: all 0.3s ease !important; border: none !important; order: 2 !important; margin-left: 20px !important;
}
.woocommerce-message .button:hover, .woocommerce-info .button:hover { background: #7B8E80 !important; transform: scale(1.02); }
/* ==========================================================================
🛒 SCENTRIC PRO CART: COMPLETE MASTER STYLING (FINAL FIX)
========================================================================== */
/* --------------------------------------------------------------------------
🌐 1. GLOBAL LAYOUT (SIDE-BY-SIDE DESKTOP)
-------------------------------------------------------------------------- */
.scentric-page-content .woocommerce {
display: flex !important; flex-wrap: wrap !important;
align-items: flex-start !important; justify-content: space-between !important;
gap: 2rem !important; width: 100% !important;
}
.scentric-page-content .woocommerce-cart-form { width: 100% !important; flex: 1 1 100% !important; }
.scentric-page-content .cart-collaterals { width: 100% !important; flex: 1 1 100% !important; margin-top: 0 !important; }
@media (min-width: 992px) {
.scentric-page-content .woocommerce-cart-form { flex: 1 !important; width: 60% !important; margin-right: 0 !important; }
.scentric-page-content .cart-collaterals { width: 35% !important; max-width: 420px !important; flex: 0 0 380px !important; }
}
/* 🌟 TOP MESSAGES */
.woocommerce-notices-wrapper { width: 100% !important; flex: 0 0 100% !important; order: -1 !important; margin-bottom: 20px !important; }
.woocommerce-message a.restore-item { background: #8FA395 !important; color: #fff !important; padding: 8px 20px !important; border-radius: 6px !important; font-weight: 600 !important; text-decoration: none !important; }
/* --------------------------------------------------------------------------
📦 2. MASTER PRODUCT CARD (STRICT GRID)
-------------------------------------------------------------------------- */
table.shop_table { border: none !important; width: 100% !important; border-spacing: 0 !important; }
.woocommerce-cart-form .shop_table thead, .woocommerce-cart-form .shop_table td::before { display: none !important; }
table.shop_table tbody tr.woocommerce-cart-form__cart-item {
display: grid !important;
grid-template-columns: 130px 1fr 140px !important;
grid-template-rows: auto auto auto !important;
grid-template-areas:
"img title price"
"img qty empty"
"actions actions actions" !important;
background: #fff !important; border: 1px solid #E6E2DD !important; border-radius: 12px !important;
margin-bottom: 25px !important; padding: 0 !important; overflow: hidden !important;
box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important;
}
table.shop_table tbody tr.woocommerce-cart-form__cart-item td {
display: flex !important; visibility: visible !important; position: static !important;
border: none !important; padding: 0 !important; margin: 0 !important; height: auto !important;
}
.woocommerce-cart-form .shop_table td.product-price { display: none !important; }
/* --------------------------------------------------------------------------
📝 3. INNER ELEMENTS (LEFT ALIGNED TEXT, CENTER QTY & PROFESSIONAL SVG DELIVERY)
-------------------------------------------------------------------------- */
.woocommerce-cart-form .shop_table td.product-thumbnail { grid-area: img !important; padding: 25px 0 25px 25px !important; justify-content: flex-start !important; }
.woocommerce-cart-form .shop_table td.product-thumbnail img { width: 100% !important; max-width: 90px !important; height: auto !important; border-radius: 8px !important; }
/* 🚨 LEFT ALIGNED TITLE */
.woocommerce-cart-form .shop_table td.product-name { grid-area: title !important; padding: 25px 15px 5px 20px !important; justify-content: flex-start !important; align-items: flex-start !important; }
.woocommerce-cart-form .shop_table td.product-name a { font-family: 'Georgia', serif !important; font-size: 1.15rem !important; font-weight: 500 !important; color: #212121 !important; text-decoration: none !important; line-height: 1.4 !important; text-align: left !important; display: block !important; width: 100% !important; }
/* 🚨 PRICE */
.woocommerce-cart-form .shop_table td.product-subtotal { grid-area: price !important; padding: 25px 25px 5px 0 !important; justify-content: flex-end !important; font-size: 1.4rem !important; font-weight: 700 !important; color: #111827 !important; }
/* 🚨 QUANTITY & PROFESSIONAL VECTOR DELIVERY ICON INJECTION */
.woocommerce-cart-form .shop_table td.product-quantity { grid-area: qty !important; padding-bottom:20px !important; flex-direction: column !important; align-items: flex-start !important; }
.cart-qty-wrapper { display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1.5px solid #8FA395 !important; border-radius: 6px !important; height: 38px !important; background: #fff; overflow: hidden; width: 110px !important; }
.cart-qty-wrapper .qty-btn { width: 35px !important; height: 100% !important; background: transparent !important; border: none !important; cursor: pointer !important; font-size: 1.2rem !important; color: #8FA395 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 600 !important; padding: 0 !important; flex-shrink: 0 !important; }
.cart-qty-wrapper input.qty { width: 40px !important; height: 100% !important; border: none !important; text-align: center !important; background: transparent !important; font-size: 1.05rem !important; font-weight: 700 !important; color: #8FA395 !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; -moz-appearance: textfield; }
.cart-qty-wrapper input.qty::-webkit-inner-spin-button, .cart-qty-wrapper input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* 🔥 PROFESSIONAL VECTOR SVG DELIVERY ICON 🔥 */
.woocommerce-cart-form .shop_table td.product-quantity::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 16' width='180' height='16'%3E%3Cpath d='M0 4h3 M1 8h4 M0 12h3' stroke='%238FA395' stroke-width='1.5' stroke-linecap='round'/%3E%3Cg fill='none' stroke='%238FA395' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h10v9H6z'/%3E%3Cpath d='M16 5h3l2 2v4h-5V5z'/%3E%3Ccircle cx='8.5' cy='13.5' r='1.5' fill='%238FA395'/%3E%3Ccircle cx='18.5' cy='13.5' r='1.5' fill='%238FA395'/%3E%3C/g%3E%3Ctext x='28' y='12' font-family='Georgia, serif' font-size='11' font-weight='500' fill='%234A4A4A'%3EDelivery in 2 to 4 days%3C/text%3E%3C/svg%3E") !important;
display: inline-flex !important;
align-items: center !important;
margin-top: 10px !important;
line-height: 1 !important;
}
/* --------------------------------------------------------------------------
🚨 4. ACTION BAR & SVG LOCK 🚨
-------------------------------------------------------------------------- */
.woocommerce-cart-form .shop_table td.product-remove { grid-area: actions !important; display: block !important; width: 100% !important; background: #8FA395 !important; }
.scentric-action-bar { display: flex !important; flex-direction: row !important; width: 100% !important; margin: 0 !important; }
.scentric-action-bar .action-btn {
flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important;
gap: 8px !important; padding: 15px 5px !important; background: transparent !important; border: none !important;
border-right: 1px solid rgba(255, 255, 255, 0.25) !important; font-family: 'Georgia', serif !important;
font-size: 0.95rem !important; font-weight: 600 !important; color: #ffffff !important; text-transform: uppercase !important;
cursor: pointer !important; text-decoration: none !important;
}
.scentric-action-bar .action-btn:last-child { border-right: none !important; }
.scentric-action-bar .action-btn svg, .scentric-action-bar .action-btn i { width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; flex-shrink: 0 !important; color: #ffffff !important; display: inline-block !important; }
/* --------------------------------------------------------------------------
🎟️ 5. DESKTOP & TABLET COUPON SECTION
-------------------------------------------------------------------------- */
.woocommerce-cart-form .actions { padding: 1.5rem 0 !important; border: none !important; width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 15px !important; }
.woocommerce-cart-form .coupon { display: flex !important; align-items: center !important; gap: 15px !important; flex-wrap: wrap !important; width: 100% !important; }
.woocommerce-cart-form .coupon input.input-text, #coupon_code {
width: 100% !important; max-width: 350px !important; height: 50px !important; border-radius: 8px !important; border: 1px solid #E6E2DD !important; padding: 0 20px !important; font-size: 0.95rem !important; background: #fff !important;
}
.woocommerce-cart-form .coupon button.button, button[name="apply_coupon"] {
height: 50px !important; padding: 0 30px !important; background-color: #8FA395 !important; color: white !important; border-radius: 8px !important; text-transform: uppercase !important; font-weight: 600 !important; border: none !important; cursor: pointer !important;
}
.woocommerce-cart-form [name="update_cart"], button[name="update_cart"] { display: none !important; }
/* --------------------------------------------------------------------------
🏷️ 6. CART TOTALS BOX
-------------------------------------------------------------------------- */
.cart-collaterals .cart_totals {
background: #F5F2EB !important; border: 1px solid #E6E2DD !important;
padding: 2.5rem !important; border-radius: 1.5rem !important; width: 100% !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.02) !important;
}
.cart_totals h2 { font-family: 'Georgia', serif !important; text-align: center !important; font-weight: 600 !important; font-size: 1.6rem !important; margin-bottom: 1.5rem !important; color: #2C2C2C !important; }
.cart_totals table.shop_table { width: 100% !important; border-collapse: collapse !important; }
.cart_totals table.shop_table th { text-align: left !important; padding: 1.5rem 0 !important; width: 40% !important; font-size: 1.05rem !important; font-weight: 600 !important; color: #2C2C2C !important; }
.cart_totals table.shop_table td { text-align: right !important; padding: 1.5rem 0 !important; font-size: 1.05rem !important; color: #4A4A4A !important; }
.cart_totals table.shop_table tr { border-bottom: 1px dashed #D5D0C5 !important; }
.cart_totals table.shop_table tr:last-child { border-bottom: none !important; }
.cart_totals tr.shipping td p, .cart_totals tr.woocommerce-shipping-totals td p, .woocommerce-shipping-destination, .woocommerce-shipping-calculator { display: none !important; }
ul#shipping_method { display: block !important; list-style: none !important; margin: 0 !important; padding: 0 !important; text-align: right !important; }
ul#shipping_method li label { font-size: 0.95rem !important; color: #8FA395 !important; font-weight: 700 !important; display: block !important; }
.order-total th, .order-total td { font-size: 1.3rem !important; font-weight: 800 !important; color: #111827 !important; }
.wc-proceed-to-checkout a.checkout-button {
display: block !important; width: 100% !important; margin: 2.5rem auto 0 auto !important;
padding: 18px 0 !important; font-size: 1.15rem !important; text-align: center !important;
background-color: #8FA395 !important; color: white !important; border-radius: 12px !important;
text-transform: uppercase !important; font-weight: 700 !important; letter-spacing: 1px !important;
text-decoration: none !important; transition: all 0.3s ease !important;
}
.wc-proceed-to-checkout a.checkout-button:hover { background-color: #7B8E80 !important; }
/* --------------------------------------------------------------------------
📱 7. CART TABLET & MOBILE RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 992px) {
.woocommerce-cart-form .coupon { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
.woocommerce-cart-form .coupon input.input-text, #coupon_code,
.woocommerce-cart-form .coupon button.button, button[name="apply_coupon"] {
max-width: 100% !important; width: 100% !important;
}
}
@media (max-width: 767px) {
table.shop_table tbody tr.woocommerce-cart-form__cart-item {
grid-template-columns: 110px 1fr !important;
grid-template-rows: auto auto auto auto !important;
grid-template-areas: "img title" "img price" "img qty" "actions actions" !important;
}
.woocommerce-cart-form .shop_table td.product-thumbnail { padding: 20px 0 20px 20px !important; }
.woocommerce-cart-form .shop_table td.product-name { padding: 20px 15px 5px 15px !important; align-items: flex-start !important; justify-content: flex-start !important; }
.woocommerce-cart-form .shop_table td.product-name a { font-size: 1rem !important; text-align: left !important; }
.woocommerce-cart-form .shop_table td.product-subtotal { padding-bottom:10px !important; padding-top:10px !important; font-size: 1.3rem !important; justify-content: flex-start !important; text-align: left !important; }
.woocommerce-cart-form .shop_table td.product-quantity { padding-bottom:20px !important; }
.scentric-action-bar .action-btn { flex-direction: column !important; font-size: 0.75rem !important; padding: 12px 2px !important; gap: 6px !important; }
.woocommerce-cart-form .actions { flex-direction: column !important; align-items: stretch !important; padding: 1.5rem 10px !important; }
.cart_totals { padding: 20px !important; }
}
@media (max-width: 420px) {
table.shop_table tbody tr.woocommerce-cart-form__cart-item { grid-template-columns: 90px 1fr !important; }
.woocommerce-cart-form .shop_table td.product-name a { font-size: 0.95rem !important; }
.woocommerce-cart-form .shop_table td.product-subtotal { font-size: 1.2rem !important; }
}
/* ==========================================================================
4. THANK YOU PAGE & TURNSTILE (PREMIUM & RESPONSIVE)
========================================================================== */
.woocommerce-order-received .woocommerce {
max-width: 800px !important;
margin: 3rem auto !important;
padding: 0 15px !important;
text-align: left !important;
}
.woocommerce-thankyou-order-received {
font-family: 'Georgia', serif !important;
font-size: 1.8rem !important;
color: #8FA395 !important;
margin-bottom: 2rem !important;
text-align: center !important;
}
ul.woocommerce-order-overview {
background: #F5F2EB !important;
border: 1px solid #E6E2DD !important;
padding: 2rem !important;
border-radius: 1rem !important;
list-style: none !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 1.5rem !important;
margin-bottom: 3rem !important;
}
ul.woocommerce-order-overview li {
flex: 1 1 20%;
font-size: 0.85rem !important;
color: #666 !important;
font-weight: 500 !important;
text-transform: uppercase !important;
margin: 0 !important;
}
ul.woocommerce-order-overview li strong {
display: block !important;
font-size: 1.1rem !important;
color: #2C2C2C !important;
margin-top: 0.5rem !important;
text-transform: none !important;
}
ul.woocommerce-order-overview li.order strong {
color: #b91c1c !important;
font-size: 1.6rem !important;
font-weight: 700 !important;
}
.woocommerce-order-details { margin-bottom: 3rem !important; }
.woocommerce-order-details h2 { font-family: 'Georgia', serif !important; font-size: 1.5rem !important; color: #1d1d1f !important; margin-bottom: 1.5rem !important; }
.woocommerce-table--order-details {
width: 100% !important;
border-collapse: collapse !important;
border: 1px solid #E6E2DD !important;
border-radius: 0.5rem !important;
overflow: hidden !important;
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
padding: 1rem !important;
border-bottom: 1px solid #E6E2DD !important;
text-align: left !important;
}
.woocommerce-table--order-details th { background: #F5F2EB !important; color: #2C2C2C !important; font-weight: 600 !important; }
.woocommerce-customer-details h2 { font-family: 'Georgia', serif !important; font-size: 1.5rem !important; color: #1d1d1f !important; margin-bottom: 1.5rem !important; margin-top: 1.5rem !important; }
.woocommerce-customer-details address {
border: 1px solid #E6E2DD !important;
padding: 1.5rem !important;
border-radius: 0.8rem !important;
background: #faf9f8 !important;
font-style: normal !important;
line-height: 1.6 !important;
text-align: left !important;
color: #4A4A4A !important;
}
.button.wc-backward { background-color: #8FA395 !important; color: white !important; padding: 1rem 3rem !important; border-radius: 9999px !important; text-transform: uppercase !important; text-decoration: none !important; font-weight: 500 !important; display: inline-block !important; transition: background 0.3s ease !important; }
.button.wc-backward:hover { background-color: #7B8E80 !important; }
@media (max-width: 768px) {
ul.woocommerce-order-overview {
padding: 1.5rem !important;
flex-direction: column !important;
gap: 1rem !important;
}
ul.woocommerce-order-overview li {
flex: 1 1 100% !important;
border-bottom: 1px solid #E6E2DD !important;
padding-bottom: 0.75rem !important;
}
ul.woocommerce-order-overview li:last-child {
border-bottom: none !important;
padding-bottom: 0 !important;
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
padding: 0.75rem !important;
font-size: 0.9rem !important;
}
}
/* ==========================================================================
TRACK LINK STYLING (UNDERLINE ALWAYS & RED ON COMPLETED)
========================================================================== */
.woocommerce-table--order-details td a {
text-decoration: underline !important;
font-weight: 600 !important;
}
.order-status-completed .woocommerce-table--order-details td a,
.scentric-order-status-completed .woocommerce-table--order-details td a {
color: #b91c1c !important;
text-decoration: underline !important;
font-weight: 700 !important;
}
@media (max-width: 768px) {
.woocommerce-message, .woocommerce-info, .woocommerce-error { flex-direction: column !important; align-items: flex-start !important; gap: 15px !important; text-align: center !important; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: 0 !important; width: 100% !important; text-align: center !important; }
.woocommerce-cart-form .shop_table thead { display: none !important; }
.woocommerce-cart-form .shop_table td { width: 100% !important; justify-content: center !important; padding: 0.5rem 0 !important; }
.woocommerce-cart-form .shop_table td.product-name { padding-left: 0 !important; text-align: center !important; justify-content: center !important; }
.woocommerce-cart-form .actions { flex-direction: column !important; align-items: stretch !important; padding: 1.5rem 10px !important; }
.woocommerce-cart-form .coupon { flex-direction: column !important; width: 100% !important; align-items: stretch !important; gap: 15px !important; margin-bottom: 15px !important; }
.woocommerce-cart-form .coupon .input-text, .woocommerce-cart-form .coupon .button, .woocommerce-cart-form [name="update_cart"] { width: 100% !important; }
}
/* ==========================================================================
6. SHOP PAGE STYLES (Product Grid & Pagination)
========================================================================== */
.woo-top-bar { display: flex; }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select.orderby {
-webkit-appearance: none; appearance: none; background-color: #FBFBFB; border: 1px solid #E6E2DD;
padding: 0.75rem 2.5rem 0.75rem 1.25rem; border-radius: 9999px; color: #2C2C2C; width: 220px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%238FA395' fill='none' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.2em;
}
.custom-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.5rem; margin: 0 0.25rem; border-radius: 9999px; border: 1px solid #E6E2DD; text-decoration: none; }
.custom-pagination .page-numbers.current, .custom-pagination .page-numbers:hover { background-color: #8FA395; color: white; }
/* ==========================================================================
🔥 SCENTRIC PREMIUM WOOCOMMERCE PRODUCT GRID (EDGE TO EDGE FIX) 🔥
========================================================================== */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
display: none !important;
}
/* Grid Columns */
.woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 1rem !important;
padding: 1.5rem 0.5rem !important;
margin: 0 !important;
}
@media (min-width: 768px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.5rem !important; padding: 2rem 0 !important; } }
@media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2rem !important; } }
@media (min-width: 1200px) { .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (min-width: 1600px) { .woocommerce ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 2.5rem !important; } }
/* 1. PRODUCT CARD - Zero Padding, Hidden Overflow */
.woocommerce ul.products li.product {
background: #ffffff !important;
border: 1px solid #E6E2DD !important;
border-radius: 16px !important;
padding: 0 !important; /* 🔥 EDGE TO EDGE - NO PADDING 🔥 */
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
overflow: hidden !important; /* Prevent image from overflowing outside the corner radius */
}
/* Card Hover Lift */
.woocommerce ul.products li.product:hover {
transform: translateY(-6px) !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.03), 0 10px 10px -5px rgba(0, 0, 0, 0.03) !important;
border-color: #8FA395 !important;
}
/* 2. PRODUCT IMAGE - Aspect Ratio 1/1 (Square & BADA) */
.woocommerce ul.products li.product a img {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important; /* 🔥 AUTO SQUARE - IMAGE WILL TAKE FULL WIDTH 🔥 */
object-fit: contain !important;
background-color: transparent !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
transition: transform 0.4s ease !important;
}
.woocommerce ul.products li.product:hover a img {
transform: scale(1.03) !important;
}
/* 3. TEXT & BAG SPACING (Added padding here because top padding is 0) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: 'Georgia', serif !important;
color: #2C2C2C !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
text-align: center !important;
padding: 0 15px !important; /* Side gap */
margin-top: 20px !important; /* 🔥 Clean gap below the image 🔥 */
margin-bottom: 5px !important;
line-height: 1.4 !important;
}
@media (min-width: 768px) { .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.05rem !important; } }
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .premium-rating-wrap {
text-align: center !important;
padding: 0 15px !important; /* Side gap */
}
.premium-rating-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
margin-bottom: 12px !important;
line-height: 1 !important;
}
.premium-rating-num {
font-size: 14px !important;
font-weight: 800 !important;
color: #4A4A4A !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
top: 1.5px !important;
}
.woocommerce ul.products li.product .star-rating {
display: block !important;
margin: 0 auto !important;
font-size: 17px !important;
height: 1em !important;
line-height: 1 !important;
width: 5.25em !important;
font-family: 'Georgia', serif !important;
position: relative !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
}
.woocommerce ul.products li.product .star-rating::before { content: '☆☆☆☆☆' !important; color: #FCD34D !important; top: 0 !important; left: 0 !important; position: absolute !important; white-space: nowrap !important; }
.woocommerce ul.products li.product .star-rating span { overflow: hidden !important; top: 0 !important; left: 0 !important; position: absolute !important; height: 100% !important; color: transparent !important; white-space: nowrap !important; line-height: 1 !important; }
.woocommerce ul.products li.product .star-rating span::before { content: '★★★★★' !important; color: #FCD34D !important; top: 0 !important; left: 0 !important; position: absolute !important; white-space: nowrap !important; }
/* Price Styling */
.woocommerce ul.products li.product .price {
color: #8FA395 !important;
font-size: 1rem !important;
font-weight: 600 !important;
margin-bottom: 1rem !important;
display: block !important;
}
@media (min-width: 768px) { .woocommerce ul.products li.product .price { font-size: 1.1rem !important; margin-bottom: 1.25rem !important; } }
.woocommerce ul.products li.product .price del { color: #a3a3a3 !important; font-size: 0.85rem !important; margin-right: 0.5rem !important; font-weight: 400 !important; }
.woocommerce ul.products li.product .price ins { text-decoration: none !important; background: transparent !important; }
/* 4. PREMIUM ADD TO CART BAG ICON (SPACING FIX) */
.woocommerce ul.products li.product .button {
background-color: #8FA395 !important;
color: #FFFFFF !important;
border-radius: 50px !important;
display: block !important;
transition: all 0.3s ease !important;
margin: auto 15px 25px 15px !important; /* 🔥 PERFECT 25PX SPACING BELOW THE BAG 🔥 */
width: calc(100% - 30px) !important;
text-align: center !important;
}
.woocommerce ul.products li.product .button:hover { background-color: #7B8E80 !important; }
/* Sale Badge */
.woocommerce span.onsale {
background-color: #8FA395 !important;
color: #2C2C2C !important;
font-size: 0.7rem !important;
text-transform: uppercase !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
padding: 0.2rem 0.5rem !important;
min-height: auto !important;
min-width: auto !important;
border-radius: 4px !important;
top: 0.75rem !important;
left: 0.75rem !important;
right: auto !important;
z-index: 10 !important;
}
/* ==========================================================================
GLOBAL H1 & H2 PREMIUM TYPOGRAPHY (SEO FRIENDLY)
========================================================================== */
h1, h2,
.page main h1,
.page .entry-title,
.page-title,
.woocommerce-loop-category__title,
.cart_totals h2,
.woocommerce-order-details h2,
.woocommerce-customer-details h2,
#order_review_heading {
display: block !important;
visibility: visible !important;
font-family: 'Georgia', serif !important;
color: #1d1d1f !important;
font-weight: 500 !important;
margin-top: 10px !important;
margin-bottom: 20px !important;
border-bottom: 1px solid #E6E2DD !important;
padding-bottom: 10px !important;
line-height: 1.3 !important;
text-transform: capitalize !important;
}
h1, .page main h1, .entry-title, .page-title { font-size: 2.2rem !important; }
h2 { font-size: 1.5rem !important; }
/* MANUAL PREMIUM TITLE DESIGN */
h1.premium-title {
border-bottom: none !important;
font-family: 'Georgia', serif !important;
font-size: 2.2rem !important;
font-weight: 400 !important;
letter-spacing: 4px !important;
text-transform: uppercase !important;
color: #222 !important;
text-align: center !important;
position: relative !important;
padding-bottom: 15px !important;
margin: 20px auto 40px auto !important;
display: block !important;
max-width: 100% !important;
}
h1.premium-title::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 200px !important;
height: 2px !important;
background-color: #E6E2DD !important;
}
@media (max-width: 768px) {
h1, .page main h1, .entry-title, .page-title { font-size: 1.6rem !important; margin-top:0px; margin-bottom:0px;}
h2 { font-size: 1.25rem !important; }
}
.site-content, #content, #primary, .page .entry-content { padding-top: 50px !important; margin-top: 0 !important; }
/* ==========================================================================
🔥 SCENTRIC GLASS PAGES STYLING (SAME EDGE TO EDGE FIX) 🔥
========================================================================== */
.scentric-glass-pages .woocommerce ul.products li.product .onsale { position: absolute !important; top: 10px !important; left: 10px !important; background: #8FA395 !important; color: #fff !important; padding: 2px 10px !important; border-radius: 4px !important; z-index: 10 !important; margin: 0 !important; font-size: 0.75rem !important; }
/* Grid Setup */
.scentric-glass-pages .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
@media (min-width: 768px) { .scentric-glass-pages .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } }
@media (min-width: 1024px) { .scentric-glass-pages .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 25px !important; } }
@media (min-width: 1440px) { .scentric-glass-pages .woocommerce ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 30px !important; } }
/* 1. GLASS CARD - ZERO PADDING */
.scentric-glass-pages .woocommerce ul.products li.product {
background: #ffffff !important;
border: 1px solid #E6E2DD !important;
border-radius: 16px !important;
padding: 20px 0px !important; /* 🔥 EDGE TO EDGE FIX 🔥 */
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
}
.scentric-glass-pages .woocommerce ul.products li.product:hover { transform: translateY(-5px) !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important; border-color: #e5e7eb !important; }
/* 2. GLASS IMAGE - AUTO SQUARE */
.scentric-glass-pages .woocommerce ul.products li.product a img {
background-color: transparent !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important; /* 🔥 SQUARE SCALING 🔥 */
object-fit: contain !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 3. GLASS TEXT & BAG SPACING */
.scentric-glass-pages .woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: 'Georgia', serif !important;
color: #2C2C2C !important;
font-size: 1.2rem !important;
text-align: center !important;
font-weight: 500 !important;
padding: 0 15px !important;
margin: 20px 0 5px 0 !important; /* Gap below image */
border-bottom: none !important;
}
.scentric-glass-pages .woocommerce ul.products li.product .price { color: #8FA395 !important; font-size: 1rem !important; text-align: center; font-weight: 700 !important; margin-bottom: 15px !important; display: block !important; padding: 0 15px !important; }
.scentric-action-buttons {
display: flex;
flex-direction: column;
gap: 8px;
width: calc(100% - 30px) !important;
margin: auto 15px 25px 15px !important; /* 🔥 PERFECT 25PX SPACING BELOW THE BAG 🔥 */
}
.scentric-action-buttons .button { width: 100% !important; text-align: center !important; padding: 10px 0 !important; border-radius: 4px !important; font-weight: bold !important; text-transform: uppercase !important; font-size: 0.8rem !important; border: none !important; cursor: pointer !important; }
.scentric-action-buttons .add_to_cart_button { background-color: #8FA395 !important; color: #fff !important; }
.scentric-action-buttons .custom-buy-now-btn { background-color: #222 !important; color: #fff !important; }
.scentric-action-buttons .button:hover { opacity: 0.9; }
/* Responsive Glass Text */
@media (max-width: 1024px) { .scentric-glass-pages .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.05rem !important; } }
@media (max-width: 767px) { .scentric-glass-pages .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.9rem !important; font-weight: 550 !important; line-height: 1.3 !important; } }
@media (max-width: 480px) { .scentric-glass-pages .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.8rem !important; font-weight: 600 !important; line-height: 1.25 !important; } .scentric-glass-pages .woocommerce ul.products li.product .price { font-size: 0.85rem !important; margin-bottom: 8px !important; } }
/* ==========================================================================
PREMIUM ADD TO CART TOAST NOTIFICATION
========================================================================== */
#scentric-premium-toast { position: fixed; z-index: 999999; background: #1a1a1a; color: #ffffff; display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-size: 14px; font-weight: 500; letter-spacing: 0.3px; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
#scentric-premium-toast strong { font-weight: 700; }
@media (min-width: 768px) { #scentric-premium-toast { top: 30px; right: 30px; transform: translateY(-20px); } #scentric-premium-toast.show { transform: translateY(0); opacity: 1; visibility: visible; } }
@media (max-width: 767px) { #scentric-premium-toast { bottom: 30px; left: 50%; transform: translate(-50%, 20px); width: max-content; max-width: 90%; justify-content: center; } #scentric-premium-toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; } }
/* ==========================================================================
FINAL PREMIUM CHECKOUT (GRID LAYOUT + SPACED INPUTS)
========================================================================== */
@media (min-width: 821px) { form.woocommerce-checkout { display: grid !important; grid-template-columns: 1fr 400px !important; gap: 50px !important; max-width: 1100px !important; margin: 0 auto !important; } }
@media (min-width: 1440px) { form.woocommerce-checkout { max-width: 1300px !important; grid-template-columns: 1.2fr 450px !important; gap: 80px !important; } }
@media (max-width: 820px) { form.woocommerce-checkout { display: flex !important; flex-direction: column !important; gap: 30px !important; } }
.woocommerce form .form-row { margin-bottom: 5px !important; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .select2-container .select2-selection--single { width: 100% !important; padding: 1rem 1.5rem !important; border: 1px solid #E6E2DD !important; border-radius: 0.75rem !important; background: #FBFBFB !important; font-size: 1rem !important; box-sizing: border-box !important; transition: all 0.3s ease !important; }
.woocommerce form .form-row label { margin-bottom: 8px !important; font-size: 0.9rem !important; color: #4A4A4A !important; }
.custom-coupon-box { margin-bottom: 20px !important; padding-bottom: 20px !important; border-bottom: 1px solid #E6E2DD !important; }
form.checkout_coupon { display: flex !important; align-items: center !important; gap: 10px !important; background: transparent !important; border: none !important; padding: 0 !important; }
form.checkout_coupon input.input-text { height: 52px !important; margin-bottom: 0 !important; }
form.checkout_coupon button.button { height: 52px !important; padding: 0 25px !important; background-color: #8FA395 !important; color: white !important; border-radius: 8px !important; text-transform: uppercase !important; font-weight: 600 !important; }
#order_review { background: #F5F2EB !important; border: 1px solid #E6E2DD !important; padding: 2rem !important; border-radius: 1.5rem !important; }
.woocommerce-checkout #place_order { width: 100% !important; margin-top: 15px !important; padding: 18px 0 !important; background-color: #8FA395 !important; color: #ffffff !important; font-size: 1.1rem !important; font-weight: 600 !important; text-transform: uppercase !important; border-radius: 99px !important; border: none !important; transition: all 0.3s ease !important; }
/* ==========================================================================
PREMIUM PAYMENT SECTION DESIGN
========================================================================== */
.woocommerce-checkout #payment { background: #ffffff !important; border: 1px solid #E6E2DD !important; border-radius: 1rem !important; padding: 20px !important; margin-top: 20px !important; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods li { padding: 15px 0 !important; border-bottom: 1px solid #f0f0f0 !important; }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600 !important; color: #333 !important; cursor: pointer !important; }
.woocommerce-checkout #payment div.payment_box { background: #FAFAFA !important; padding: 15px !important; margin: 10px 0 !important; border-radius: 8px !important; font-size: 0.85rem !important; color: #666 !important; }
.account-icon-circle { background-color: #8FA395; }
.account-icon-circle:hover { background-color: #7B8E80 }
#order_review table.shop_table td.product-name { font-family: 'Georgia', serif !important; font-weight: 500 !important; }
.product-live-img img { width: 100%; height: 100%; object-fit: contain; }
#scentric-search-results::-webkit-scrollbar { width: 6px; }
#scentric-search-results::-webkit-scrollbar-thumb { background: #D0C9C0; border-radius: 10px; }
/* ==========================================================================
PREMIUM ACCOUNT & DASHBOARD
========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 100% !important; margin-bottom: 2rem !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; padding: 0 !important; list-style: none !important; justify-content: center !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { flex: 0 1 auto !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { background: #ffffff !important; padding: 12px 24px !important; border-radius: 50px !important; border: 1px solid #E5E7EB !important; color: #4B5563 !important; font-weight: 500 !important; transition: all 0.3s ease !important; display: block !important; text-align: center !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover, .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: #8FA395 !important; color: white !important; border-color: #8FA395 !important; }
@media (max-width: 820px) { .woocommerce-account .woocommerce-MyAccount-navigation ul li { width: 30% !important; } }
@media (max-width: 480px) { .woocommerce-account .woocommerce-MyAccount-navigation ul li { width: 45% !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { padding: 10px 5px !important; font-size: 0.8rem !important; border-radius: 10px !important; } }
.woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; background: #fff !important; padding: 2.5rem !important; border-radius: 1.5rem !important; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05) !important; }
.woocommerce-EditAccountForm button[type="submit"] { display: block !important; width: 100% !important; padding: 15px !important; background-color: #8FA395 !important; color: white !important; border-radius: 8px !important; margin-top: 20px !important; font-weight: bold !important; }
/* Tracking Steps */
.scentric-tracking-wrapper { background: #ffffff !important; padding: 30px !important; border-radius: 15px !important; border: 1px solid rgba(0,0,0,0.05) !important; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1) !important; margin: 20px 0 !important; overflow: visible !important; width: 100% !important; overflow-x: auto !important; }
.scentric-step-bar { display: flex; justify-content: space-between; position: relative; margin-top: 30px; min-width: 300px !important; }
.scentric-step { flex: 1; text-align: center; position: relative; z-index: 1; font-size: 0.8rem; font-weight: 600; color: #9CA3AF; }
.scentric-step-dot { width: 14px; height: 14px; background: #D1D5DB; border-radius: 50%; margin: 0 auto 8px; transition: background 0.3s ease; }
.scentric-step.active { color: #8FA395; }
.scentric-step.active .scentric-step-dot { background: #8FA395; }
.scentric-step-bar::before { content: ''; position: absolute; top: 6px !important; left: 12% !important; width: 76% !important; height: 2px; background: #E5E7EB !important; z-index: 0; }
@media (max-width: 480px) { .scentric-step { font-size: 0.7rem !important; } .scentric-tracking-wrapper { padding: 15px !important; } }
/* My Account Orders Table Fix */
.woocommerce-orders-table__cell-order-actions { display: inline-flex !important; gap: 12px !important; align-items: center !important; justify-content: flex-start !important; min-width: 130px !important; }
.woocommerce-orders-table__cell-order-actions a { text-decoration: underline !important; font-weight: 600 !important; display: inline-block !important; }
.woocommerce-orders-table__cell-order-actions a[href*="track"] { color: #b91c1c !important; }
.woocommerce-orders-table__cell-order-actions a.view { color: #4A4A4A !important; }
.scentric-dash-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; margin-top: 30px !important; }
@media (min-width: 768px) { .scentric-dash-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .scentric-dash-grid { grid-template-columns: repeat(3, 1fr) !important; } }
.woocommerce-MyAccount-content > p:first-of-type { display: none !important; }
/* Premium Addresses */
.woocommerce-Addresses { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 30px !important; margin: 40px auto !important; max-width: 1000px !important; width: 100% !important; }
@media (min-width: 1440px) { .woocommerce-Addresses { max-width: 1200px !important; } }
.woocommerce-Address { background: #ffffff !important; padding: 35px !important; border-radius: 20px !important; border: 1px solid #E5E7EB !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; transition: all 0.3s ease !important; height: 100% !important; display: flex !important; flex-direction: column !important; }
.woocommerce-Address-title .edit { display: inline-block !important; padding: 12px 25px !important; background: #8FA395 !important; color: #ffffff !important; border-radius: 12px !important; text-decoration: none !important; font-weight: 600 !important; margin-top: 15px !important; margin-bottom: 15px !important; text-align: center !important; transition: 0.3s !important; }
.woocommerce-Address-title .edit:hover { background: #7a8d80 !important; }
button[name="save_address"] { background: #8FA395 !important; color: white !important; padding: 16px 40px !important; border-radius: 50px !important; font-size: 1rem !important; font-weight: 600 !important; width: 100% !important; max-width: 400px !important; margin: 30px auto 0 !important; display: block !important; border: none !important; cursor: pointer !important; }
@media (max-width: 768px) { .woocommerce-Addresses { grid-template-columns: 1fr !important; gap: 20px !important; } .woocommerce-Address { padding: 20px !important; } }
/* ==========================================================================
SCENTRIC PREMIUM FOOTER
========================================================================== */
.scentric-footer-wrapper { background-color: #8FA395 !important; width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; margin-top: 50px; padding: 0 !important; }
.scentric-footer-wrapper, .scentric-footer-wrapper * { font-family: 'Georgia', serif !important; color: #ffffff !important; box-sizing: border-box; }
.scentric-main-footer { max-width: 90% !important; margin: 0 auto; padding: 20px 0 20px 0 !important; }
.footer-container { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 20px 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding-bottom: 20px; }
@media (min-width: 1440px) { .scentric-main-footer { max-width: 1300px !important; } .footer-container { gap: 60px; } }
.footer-col h3, .footer-logo-text { color: #ffffff !important; font-weight: 700 !important; margin: 0 0 15px 0 !important; }
.footer-logo-text { font-size: 2.2rem !important; margin-bottom: 15px !important; }
.footer-col h3 { font-size: 1rem !important; letter-spacing: 0.8px !important; text-transform: capitalize !important; border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important; padding-bottom:2px;}
.brand-desc { opacity: 0.85 !important; font-size: 0.95rem !important; line-height: 1.6 !important; margin: 0 !important; }
.footer-col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.footer-col ul li { margin-bottom: 15px !important; }
.footer-col ul li a, .contact-info a { opacity: 0.9 !important; text-decoration: none !important; font-size: 0.85rem !important; font-weight: 400 !important; display: flex !important; align-items: center !important; gap: 10px !important; transition: all 0.3s ease !important; }
.footer-col ul li a:hover, .contact-info a:hover { opacity: 1 !important; text-decoration: underline !important; transform: translateX(4px) !important; }
.contact-info { margin-top: 25px !important; margin-bottom:10px; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.contact-info svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
.social-icons-wrapper { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; margin-bottom: 20px; }
.social-icon { display: inline-flex !important; justify-content: center !important; align-items: center !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; border: 1.5px solid #ffffff !important; background-color: transparent !important; transition: all 0.3s ease !important; color: #ffffff !important; }
.social-icon:hover { background-color: transparent !important; border-color: #ffffff !important; transform: translateY(-4px) !important; opacity: 0.8 !important; }
.social-icon svg { width: 18px !important; height: 18px !important; display: block !important; }
.footer-bottom { padding-top: 20px !important; text-align: center !important; }
.footer-bottom p { margin: 0 !important; opacity: 0.7 !important; font-size: 0.85rem !important; }
@media (max-width: 992px) { .footer-container { grid-template-columns: 1fr 1fr; } }
.toggle-icon { display: none; }
@media (min-width: 577px) { .contact-info, .social-icons-wrapper { border-left: none !important; padding-left: 0 !important; margin-left: 0 !important; } }
@media (max-width: 576px) {
.footer-container { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 10px 15px !important; }
.footer-col.brand-logo-col { text-align: center !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; padding-bottom: 25px !important; margin-bottom: 0 !important; }
.brand-desc { max-width: 90% !important; margin: 0 auto !important; font-size: 0.8rem !important; line-height: 1.6 !important; }
.accordion-col { padding: 0 !important; margin: 0 !important; }
.accordion-col h3.accordion-header { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 1rem !important; margin: 0 !important; padding: 15px 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; width: 100%; cursor: pointer; }
.toggle-icon { display: inline-block !important; font-size: 0.8rem; transition: transform 0.3s ease; }
.accordion-col nav { display: none !important; padding: 10px 0 15px 10px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; }
.accordion-col ul { border-left: 1px solid rgba(255, 255, 255, 0.15) !important; margin-left: 5px !important; padding-left: 0 !important; }
.accordion-col ul li { margin-bottom: 0 !important; }
.accordion-col ul li a { font-size: 0.85rem !important; padding: 10px 15px !important; display: block !important; opacity: 0.85 !important; border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important; }
.accordion-col ul li:last-child a { border-bottom: none !important; }
.accordion-col ul li a::before { content: "›"; margin-right: 10px; font-size: 1.1rem; opacity: 0.5; vertical-align: middle; }
.accordion-col.active nav { display: block !important; }
.accordion-col.active h3.accordion-header { border-bottom: none !important; }
.accordion-col.active .toggle-icon { transform: rotate(90deg) !important; }
.contact-social-col { display: flex !important; flex-direction: row !important; justify-content: space-between !important; border-top: 1px solid rgba(255, 255, 255, 0.2) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; padding-top: 20px !important; padding-bottom: 20px !important; margin-top: 15px !important; margin-bottom: 15px !important; }
.contact-block, .social-block { width: 48% !important; text-align: left !important; border-left: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.contact-block h3, .social-block h3 { font-size: 0.95rem !important; margin-bottom: 12px !important; border: none !important; padding: 0 !important; color: rgba(255,255,255,0.9) !important; }
.contact-info, .social-icons-wrapper { border-left: 1px solid rgba(255, 255, 255, 0.15) !important; padding-left: 12px !important; margin-left: 5px !important; }
.social-block .social-icons-wrapper { display: flex !important; justify-content: flex-start !important; gap: 8px !important; }
.social-icon { width: 34px !important; height: 34px !important; }
.social-icon svg { width: 16px !important; height: 16px !important; }
.contact-info { gap: 12px !important; margin-top: 0 !important; align-items: flex-start !important; }
.contact-info a { font-size: 0.75rem !important; justify-content: flex-start !important; opacity: 0.85 !important; }
}
@media (max-width: 400px) {
.brand-desc { font-size: 0.75rem !important; padding: 0 5px !important; line-height: 1.5 !important; }
.footer-col.brand-logo-col { padding-bottom: 20px !important; }
.contact-social-col { flex-direction: column !important; gap: 0 !important; }
.contact-block { width: 100% !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; padding-bottom: 20px !important; margin-bottom: 20px !important; }
.social-block { width: 100% !important; }
.contact-info a { word-break: break-word !important; font-size: 0.8rem !important; }
.social-block .social-icons-wrapper { gap: 12px !important; }
}
/* ==========================================================================
SCENTRIC PREMIUM POLICY & LEGAL PAGES
========================================================================== */
.scentric-policy-wrapper { max-width: 900px !important; margin: 40px auto 80px auto !important; padding: 0 20px !important; font-family: 'Georgia', serif !important; color: #4A4A4A !important; line-height: 1.8 !important; }
.scentric-policy-wrapper h1 { font-family: 'Georgia', serif !important; font-size: 2.5rem !important; color: #2C2C2C !important; text-align: center !important; margin-bottom: 10px !important; font-weight: 500 !important; letter-spacing: 2px !important; text-transform: uppercase !important; }
.scentric-policy-wrapper .last-updated { text-align: center !important; color: #8FA395 !important; font-weight: 600 !important; font-size: 0.95rem !important; margin-bottom: 40px !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
.scentric-policy-card { background: #ffffff !important; border: 1px solid #E6E2DD !important; border-radius: 20px !important; padding: 40px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important; }
.scentric-policy-card h2 { font-family: 'Georgia', serif !important; font-size: 1.5rem !important; color: #1d1d1f !important; margin-top: 35px !important; margin-bottom: 15px !important; border-bottom: 1px solid #F0F0F0 !important; padding-bottom: 10px !important; font-weight: 600 !important; }
.scentric-policy-card h2:first-child { margin-top: 0 !important; }
.scentric-policy-card p { margin-bottom: 15px !important; font-size: 1.05rem !important; }
.scentric-policy-card ul { margin-bottom: 25px !important; padding-left: 20px !important; }
.scentric-policy-card ul li { margin-bottom: 12px !important; position: relative !important; list-style-type: disc !important; color: #4A4A4A !important; font-size: 1.05rem !important; }
.scentric-policy-card a { color: #8FA395 !important; text-decoration: underline !important; font-weight: 600 !important; transition: 0.3s !important; }
.scentric-policy-card a:hover { color: #7B8E80 !important; }
@media (max-width: 768px) { .scentric-policy-wrapper { margin: 20px auto 40px auto !important; } .scentric-policy-wrapper h1 { font-size: 2rem !important; } .scentric-policy-card { padding: 25px 20px !important; border-radius: 15px !important; } .scentric-policy-card h2 { font-size: 1.3rem !important; } .scentric-policy-card p, .scentric-policy-card ul li { font-size: 0.95rem !important; } }
/* ==========================================================================
MY ACCOUNT: ORDERS TABLE ALIGNMENT (PREMIUM CARD LAYOUT)
========================================================================== */
table.woocommerce-orders-table th, table.woocommerce-orders-table td { text-align: center !important; vertical-align: middle !important; padding: 15px 10px !important; }
table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
@media (max-width: 768px) {
table.woocommerce-orders-table thead { display: none !important; }
table.woocommerce-orders-table, table.woocommerce-orders-table tbody, table.woocommerce-orders-table tr, table.woocommerce-orders-table td { display: block !important; width: 100% !important; }
table.woocommerce-orders-table tr { margin-bottom: 20px !important; border: 1px solid #E6E2DD !important; border-radius: 12px !important; padding: 15px !important; background: #FBFBFB !important; }
table.woocommerce-orders-table td { position: relative !important; text-align: right !important; padding: 12px 0 12px 40% !important; border-bottom: 1px dashed #E6E2DD !important; min-height: 40px !important; }
table.woocommerce-orders-table td:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
table.woocommerce-orders-table td::before { content: attr(data-title) !important; position: absolute !important; left: 0 !important; top: 15px !important; font-weight: 700 !important; color: #2C2C2C !important; text-transform: uppercase !important; font-size: 0.85rem !important; text-align: left !important; }
table.woocommerce-orders-table td:nth-child(1)::before { content: "ORDER" !important; }
table.woocommerce-orders-table td:nth-child(1) a { display: inline-block !important; text-align: right !important; font-weight: bold !important; }
table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total .amount { font-size: 1.1rem !important; font-weight: 700 !important; color: #2C2C2C !important; }
table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total { color: #666 !important; font-size: 0.85rem !important; line-height: 1.5 !important; }
table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { display: flex !important; justify-content: flex-end !important; gap: 10px !important; padding-top: 15px !important; }
}
table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a { color: #2563eb !important; text-decoration: underline !important; font-weight: 600 !important; transition: color 0.3s ease !important; }
table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a:hover { color: #1d4ed8 !important; }
/* ==========================================================================
LOGIN & REGISTER PAGES
========================================================================== */
.woocommerce-form-login__submit { display: block !important; width: 100% !important; background-color: #8FA395 !important; color: #ffffff !important; padding: 14px 0 !important; border-radius: 9999px !important; border: none !important; font-weight: 600 !important; text-transform: uppercase !important; cursor: pointer !important; margin-top: 20px !important; margin-bottom: 15px !important; transition: 0.3s !important; }
.woocommerce-form-login__submit:hover { background-color: #7B8E80 !important; }
.woocommerce-form-login { position: relative !important; }
.register-link-container { margin-top: 15px !important; text-align: center !important; font-size: 0.9rem !important; color: #4A4A4A !important; }
.register-link-container a { color: #8FA395 !important; font-weight: 700 !important; text-decoration: underline !important; }
.woocommerce #customer_login .u-column1, .woocommerce #customer_login .u-column2 { background: #ffffff !important; padding: 40px !important; border-radius: 20px !important; border: 1px solid #E6E2DD !important; box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important; width: 100% !important; max-width: 450px !important; margin: 10px auto !important; float: none !important; }
.woocommerce #customer_login .u-column2 { display: none !important; }
body.scentric-is-register .woocommerce #customer_login .u-column1 { display: none !important; }
body.scentric-is-register .woocommerce #customer_login .u-column2 { display: block !important; }
.woocommerce #customer_login h2 { text-align: center !important; font-family: 'Georgia', serif !important; font-size: 1.8rem !important; margin-top: 0 !important; margin-bottom: 25px !important; border-bottom: 1px solid #E6E2DD !important; padding-bottom: 15px !important; }
.woocommerce #customer_login input.input-text { width: 100% !important; padding: 14px 20px !important; border-radius: 12px !important; border: 1px solid #E6E2DD !important; background: #FBFBFB !important; margin-bottom: 15px !important; }
.woocommerce #customer_login button[type="submit"] { display: block !important; width: 100% !important; background-color: #8FA395 !important; color: #fff !important; padding: 16px !important; border-radius: 99px !important; border: none !important; font-weight: 700 !important; text-transform: uppercase !important; margin-top: 20px !important; cursor: pointer !important; transition: 0.3s !important; }
.woocommerce #customer_login button[type="submit"]:hover { background-color: #7B8E80 !important; }
.woocommerce-LostPassword { text-align: center !important; margin-top: 15px !important; display: block !important; width: 100% !important; }
.woocommerce-LostPassword a { color: #4A4A4A !important; text-decoration: underline !important; font-weight: 600 !important; }
.woocommerce-account .woocommerce-MyAccount-content > p { display: none !important; }
/* Reset Password */
.woocommerce-privacy-policy-text { display: none !important; }
.woocommerce-ResetPassword { background: #ffffff !important; padding: 40px !important; border-radius: 20px !important; border: 1px solid #E6E2DD !important; box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important; width: 100% !important; max-width: 450px !important; margin: 40px auto !important; }
.woocommerce-ResetPassword button[type="submit"] { display: block !important; width: 100% !important; background-color: #8FA395 !important; color: #fff !important; padding: 16px !important; border-radius: 99px !important; border: none !important; font-weight: 700 !important; text-transform: uppercase !important; margin-top: 20px !important; cursor: pointer !important; transition: 0.3s !important; }
.woocommerce-ResetPassword button[type="submit"]:hover { background-color: #7B8E80 !important; }
.woocommerce-ResetPassword input.input-text { width: 100% !important; padding: 14px 20px !important; border-radius: 12px !important; border: 1px solid #E6E2DD !important; background: #FBFBFB !important; margin-top: 10px !important; margin-bottom: 15px !important; }
/* =========================================
BIG SCREEN FULL-WIDTH & MASTER WRAPPER FIX
========================================= */
@media (min-width: 1200px) { .site-content, .site-container, .ast-container, .container, #page, #content, .elementor-section-stretched { max-width: 95% !important; margin: 0 auto !important; } }
@media (min-width: 1440px) { .site-content, .site-container, .ast-container, .container, #page, #content { max-width: 1400px !important; } }
@media (min-width: 1600px) { .site-content, .site-container, .ast-container, .container, #page, #content { max-width: 1550px !important; } }
/* STICKY FOOTER FIX */
@media (min-width: 768px) {
body { display: flex !important; flex-direction: column !important; min-height: 100vh !important; margin: 0 !important; }
main { flex-grow: 1 !important; display: block !important; }
.scentric-footer-wrapper { flex-shrink: 0 !important; margin-top: auto !important; }
}
/* FOOTER LOGO SIZING */
.footer-custom-logo { height: 90px !important; width: auto !important; object-fit: contain; margin-bottom: 15px; transition: all 0.3s ease-in-out; }
@media (min-width: 768px) { .footer-custom-logo { height: 120px !important; } }
@media (min-width: 1024px) { .footer-custom-logo { height: 130px !important; } }
.product-box-bg h2, .product-box-bg .text-center div { border-bottom: none !important; border-top: none !important; }
/* ==========================================================================
🚀 SCENTRIC ULTRA PREMIUM CHECKOUT UI (PRO LEVEL MASTER CSS) 🚀
========================================================================== */
/* ==========================================================================
1. MASTER LAYOUT & RESPONSIVENESS
========================================================================== */
.woocommerce-checkout .woocommerce {
display: block !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 40px 20px !important;
}
.woocommerce-checkout .woocommerce-notices-wrapper { width: 100% !important; margin-bottom: 1.5rem !important; }
form.woocommerce-checkout {
display: grid !important; grid-template-columns: 1fr 450px !important; gap: 60px !important; align-items: start !important;
}
@media (min-width: 1440px) { form.woocommerce-checkout { max-width: 1400px !important; grid-template-columns: 1.2fr 480px !important; gap: 80px !important; } }
@media (min-width: 1600px) { form.woocommerce-checkout { max-width: 1550px !important; grid-template-columns: 1fr 500px !important; } }
#customer_details { grid-column: 1 / 2 !important; grid-row: 1 / 3 !important; width: 100% !important; padding-top: 0 !important; }
/* ==========================================================================
📦 2. LEFT SIDE: BILLING & SHIPPING OUTER BOX
========================================================================== */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
background: #ffffff !important; border: 1px solid #DFE6E1 !important; padding: 30px !important; border-radius: 16px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important; margin-bottom: 30px !important;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
font-family: 'Georgia', serif !important; font-size: 1.6rem !important; color: #111827 !important; margin-bottom: 25px !important; margin-top: 0 !important; border-bottom: 1px solid #DFE6E1 !important; padding-bottom: 15px !important; font-weight: normal !important; display: block !important;
}
/* ==========================================================================
🏠 3. SCENTRIC PRO: SAVED ADDRESS CARDS (BILLING & SHIPPING)
========================================================================== */
.scentric-address-card {
background: #F4F7F5 !important; border: 2px solid #8FA395 !important; border-radius: 12px !important; padding: 20px !important; margin-bottom: 25px !important; position: relative !important; overflow: hidden !important;
box-shadow: 0 4px 6px -1px rgba(143, 163, 149, 0.1), 0 2px 4px -1px rgba(143, 163, 149, 0.06) !important;
}
.scentric-address-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 4px !important; background: #8FA395 !important; }
.scentric-address-card .card-header h4 { margin: 0 0 15px 0 !important; color: #111827 !important; display: flex !important; align-items: center !important; gap: 12px !important; font-family: 'Georgia', serif !important; font-size: 1.3rem !important; border-bottom: none !important; }
.scentric-address-card .radio-dot { width: 12px !important; height: 12px !important; background: #8FA395 !important; border-radius: 50% !important; display: inline-block !important; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #8FA395 !important; margin-left: 6px !important; }
.scentric-address-card .card-body p { margin: 0 0 6px 0 !important; color: #4B5563 !important; font-size: 1rem !important; line-height: 1.5 !important; }
.scentric-name-highlight { font-size: 1.1rem !important; color: #111827 !important; }
.scentric-address-card .card-footer { margin-top: 20px !important; border-top: 1px dashed #DFE6E1 !important; padding-top: 15px !important; }
button.scentric-edit-btn { background: transparent !important; border: 1px solid #8FA395 !important; color: #8FA395 !important; border-radius: 8px !important; padding: 10px 20px !important; font-weight: 600 !important; cursor: pointer !important; font-size: 0.9rem !important; text-transform: none !important; transition: all 0.3s ease !important; }
button.scentric-edit-btn:hover { background: #8FA395 !important; color: #fff !important; }
.scentric-save-btn-wrap { margin-top: 25px !important; border-top: 1px solid #DFE6E1 !important; padding-top: 20px !important; text-align: right !important; }
button.scentric-save-btn { background: #8FA395 !important; color: #fff !important; padding: 12px 30px !important; border-radius: 8px !important; font-weight: bold !important; font-size: 1rem !important; border: none !important; cursor: pointer !important; transition: background 0.3s ease !important; }
button.scentric-save-btn:hover { background: #7B8E80 !important; }
.scentric-hide-form { display: none !important; margin-top: 20px !important; padding-top: 20px !important; }
/* ==========================================================================
🎯 4. "SHIP TO DIFFERENT ADDRESS" PREMIUM TOGGLE
========================================================================== */
#ship-to-different-address { background: #F4F7F5 !important; border: 1px solid #8FA395 !important; padding: 15px 20px !important; border-radius: 12px !important; margin: 0 0 25px 0 !important; display: block !important; transition: all 0.3s ease !important; }
#ship-to-different-address:hover { background: #EBF1ED !important; }
#ship-to-different-address label { display: flex !important; align-items: center !important; gap: 15px !important; cursor: pointer !important; font-family: 'Georgia', serif !important; font-size: 1.3rem !important; font-weight: normal !important; color: #111827 !important; margin: 0 !important; }
#ship-to-different-address label input[type="checkbox"] { margin: 0 !important; width: 22px !important; height: 22px !important; accent-color: #8FA395 !important; cursor: pointer !important; }
/* ==========================================================================
🎯 5. PROPER UNIFIED "YOUR ORDER" BOX (ALIGNMENT FIXED)
========================================================================== */
.scentric-order-wrapper {
grid-column: 2 / 3 !important; grid-row: 1 / 3 !important; width: 100% !important; background: #F4F7F5 !important; border: 1px solid #DFE6E1 !important; padding: 30px !important; border-radius: 20px !important; box-shadow: 0 25px 50px -12px rgba(143, 163, 149, 0.25) !important; margin-top: 0 !important;
}
#order_review_heading { display: flex !important; align-items: center !important; justify-content: space-between !important; font-family: 'Georgia', serif !important; font-size: 1.6rem !important; color: #111827 !important; margin-top: 0 !important; margin-bottom: 20px !important; border-bottom: 1px solid #DFE6E1 !important; padding-bottom: 15px !important; width: 100% !important; background: transparent !important; }
#order_review_heading::after { font-family: 'Georgia', serif !important; font-size: 0.75rem !important; color: #059669 !important; background: #D1FAE5 !important; padding: 6px 12px !important; border-radius: 50px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; }
#order_review { background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; width: 100% !important; margin: 0 !important; }
/* General Table Settings */
#order_review table.shop_table { border: none !important; margin-bottom: 2rem !important; width: 100% !important; table-layout: fixed !important; }
#order_review table.shop_table th, #order_review table.shop_table td { border-top: none !important; border-bottom: 1px solid #DFE6E1 !important; padding: 16px 0 !important; background: transparent !important; font-size: 0.95rem !important; }
/* 🔥 LEFT COLUMN FORCING: Align Left 🔥 */
#order_review table.shop_table th.product-name,
#order_review table.shop_table td.product-name,
#order_review table.shop_table tfoot th,
tr.scentric-qty-row th {
text-align: left !important;
}
/* 🔥 RIGHT COLUMN FORCING: Align Right 🔥 */
#order_review table.shop_table th.product-total,
#order_review table.shop_table td.product-total,
#order_review table.shop_table tfoot td,
tr.scentric-qty-row td {
width: 35% !important;
text-align: right !important;
font-weight: 600 !important;
color: #111827 !important;
}
/* Product Name Formatting & Width */
#order_review table.shop_table td.product-name { width: 65% !important; font-family: 'Georgia', serif !important; font-weight: 500 !important; color: #8FA395 !important; line-height: 1.5 !important; padding-right: 10px !important; word-wrap: break-word !important; }
#order_review table.shop_table td.product-name strong.product-quantity { color: #6B7280 !important; font-weight: 400 !important; }
/* Total Rows Styling */
.order-total th, .order-total td { font-size: 1.2rem !important; color: #111827 !important; font-weight: 800 !important; border-bottom: none !important; }
/* Free Delivery Text */
#order_review tr.shipping td[data-title="Shipping"] label, #order_review ul#shipping_method li label, .woocommerce-shipping-totals .shipping_method + label { font-size: 0 !important; visibility: hidden !important; display: block !important; }
#order_review tr.shipping td[data-title="Shipping"] label::after, #order_review ul#shipping_method li label::after, .woocommerce-shipping-totals .shipping_method + label::after { content: "Scentric Premium Delivery (Free)" !important; font-size: 0.95rem !important; visibility: visible !important; display: block !important; color: #8FA395 !important; font-weight: 700 !important; margin-top: -15px !important; text-align: right !important; width: 100% !important; }
/* ==========================================================================
✏️ 6. INPUT FIELDS, DROPDOWNS & COUPONS
========================================================================== */
.woocommerce form .form-row { margin-bottom: 1.25rem !important; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, select.country_select, select.state_select, select#billing_country, select#billing_state { width: 100% !important; padding: 14px 16px !important; border: 1px solid #DFE6E1 !important; border-radius: 10px !important; background: #F8FAF9 !important; font-size: 0.95rem !important; outline: none !important; color: #111827 !important; box-sizing: border-box !important; transition: all 0.3s ease !important; box-shadow: inset 0 2px 4px rgba(143, 163, 149, 0.05) !important; height: 50px !important; }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, select.country_select:focus, select.state_select:focus { border-color: #8FA395 !important; background: #ffffff !important; box-shadow: 0 0 0 4px rgba(143, 163, 149, 0.2) !important; }
.woocommerce form .form-row label { display: block !important; margin-bottom: 0.5rem !important; font-size: 0.85rem !important; color: #4B5563 !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
/* Dropdown Fixes */
.select2-search--dropdown { display: none !important; }
.select2-container--default .select2-selection--single { width: 100% !important; padding: 10px 16px !important; border: 1px solid #DFE6E1 !important; border-radius: 10px !important; background: #F8FAF9 !important; font-size: 0.95rem !important; outline: none !important; height: 50px !important; box-shadow: inset 0 2px 4px rgba(143, 163, 149, 0.05) !important; display: flex !important; align-items: center !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #111827 !important; font-size: 0.95rem !important; padding-left: 0 !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; right: 15px !important; }
.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: #8FA395 !important; background-color: #FFFFFF !important; box-shadow: 0 0 0 4px rgba(143, 163, 149, 0.2) !important; }
.select2-dropdown { border: 1px solid #8FA395 !important; border-radius: 10px !important; box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; padding: 5px !important; }
.select2-results__option { padding: 10px 15px !important; font-size: 0.95rem !important; color: #4B5563 !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #8FA395 !important; color: white !important; border-radius: 6px !important; }
/* Order Notes Textarea */
.woocommerce form .form-row textarea.input-text, #order_comments { height: 100px !important; min-height: 100px !important; resize: none !important; overflow: auto !important; padding: 16px !important; border-radius: 12px !important; background: #F8FAF9 !important; border: 1px solid #DFE6E1 !important; color: #111827 !important; font-size: 0.95rem !important; line-height: 1.5 !important; box-shadow: inset 0 2px 4px rgba(143, 163, 149, 0.05) !important; }
.woocommerce form .form-row textarea.input-text:focus, #order_comments:focus { border-color: #8FA395 !important; background: #ffffff !important; box-shadow: 0 0 0 4px rgba(143, 163, 149, 0.2) !important; outline: none !important; }
/* Coupon Area */
.woocommerce-form-coupon-toggle { display: none !important; } form.checkout_coupon > p:not(.form-row) { display: none !important; }
form.checkout_coupon { width: 100% !important; max-width: 1200px !important; margin: 0 auto 2rem auto !important; display: flex !important; align-items: center !important; gap: 1rem !important; padding: 1.5rem !important; background: #F4F7F5 !important; border: 1px dashed #8FA395 !important; border-radius: 1rem !important; }
form.checkout_coupon .form-row { margin: 0 !important; padding: 0 !important; } form.checkout_coupon .form-row-first { flex: 1 !important; width: 100% !important; display: block !important; } form.checkout_coupon .form-row-last { width: auto !important; display: block !important; }
form.checkout_coupon input.input-text { width: 100% !important; height: 48px !important; padding: 0 1.5rem !important; border: 1px solid #DFE6E1 !important; border-radius: 9999px !important; background: #FFF !important; }
form.checkout_coupon button.button { height: 48px !important; padding: 0 2rem !important; background-color: #8FA395 !important; color: white !important; border-radius: 9999px !important; text-transform: uppercase !important; border: none !important; font-weight: 500 !important; transition: all 0.3s ease !important; }
form.checkout_coupon button.button:hover { background-color: #7B8E80 !important; }
/* ==========================================================================
💳 7. PAYMENT BOX & PAY NOW BUTTON
========================================================================== */
.woocommerce-checkout #payment { display: block !important; background: #FFFFFF !important; border: 1px solid #DFE6E1 !important; border-radius: 12px !important; padding: 20px !important; margin-top: 20px !important; box-shadow: 0 10px 20px -5px rgba(143, 163, 149, 0.1) !important; }
.woocommerce-checkout #payment .cf-turnstile { display: flex !important; justify-content: center !important; margin: 20px auto 10px auto !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
.woocommerce-checkout #payment ul.payment_methods { display: block !important; margin: 0 !important; padding: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods li { padding: 15px 0 !important; border-bottom: 1px solid #DFE6E1 !important; }
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: none !important; }
.woocommerce-checkout #payment #place_order, .woocommerce-checkout #place_order {
display: block !important; width: 100% !important; margin: 15px auto 0 !important; padding: 20px !important; background-color: #8FA395!important; color: #ffffff !important; font-size: 1.15rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; border-radius: 12px !important; border: none !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}
.woocommerce-checkout #place_order:hover { background-color: #7B8E80 !important; transform: translateY(-3px) !important; box-shadow: 0 15px 30px rgba(143, 163, 149, 0.4) !important; }
/* ==========================================================================
📱 8. ALL SCREENS RESPONSIVE SCALING (TABLET, MOBILE, 320PX)
========================================================================== */
/* TABLET FIXES (< 992px) */
@media (max-width: 992px) {
form.woocommerce-checkout { grid-template-columns: 1fr !important; gap: 40px !important; }
#order_review table.shop_table th, #order_review table.shop_table td { font-size: 0.9rem !important; padding: 14px 0 !important; }
.order-total th, .order-total td { font-size: 1.1rem !important; }
#order_review_heading { font-size: 1.4rem !important; }
}
/* STANDARD MOBILE (< 820px) */
@media (max-width: 820px) {
form.woocommerce-checkout { display: flex !important; flex-direction: column !important; gap: 30px !important; }
.woocommerce-checkout .woocommerce { padding: 20px 15px !important; }
/* Reduced Padding to fix Squish on mobile */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields { padding: 20px !important; }
#customer_details, #order_review_heading, .scentric-order-wrapper { width: 100% !important; }
.scentric-order-wrapper { padding: 20px !important; border-radius: 12px !important; }
form.checkout_coupon { flex-direction: column !important; padding: 1rem !important; }
form.checkout_coupon .form-row-last, form.checkout_coupon button.button { width: 100% !important; }
#order_review_heading { font-size: 1.25rem !important; margin-bottom: 15px !important; padding-bottom: 10px !important; }
#order_review_heading::after { font-size: 0.7rem !important; padding: 4px 10px !important; }
#order_review table.shop_table th, #order_review table.shop_table td { font-size: 0.85rem !important; padding: 12px 0 !important; }
#order_review table.shop_table th.product-name, #order_review table.shop_table td.product-name, #order_review table.shop_table tfoot th { text-align: left !important; }
#order_review table.shop_table th.product-total, #order_review table.shop_table td.product-total, #order_review table.shop_table tfoot td { text-align: right !important; }
#order_review table.shop_table td.product-name { font-size: 0.85rem !important; }
.order-total th, .order-total td { font-size: 1rem !important; }
.woocommerce-checkout #payment { padding: 15px !important; border-radius: 10px !important; }
.woocommerce-checkout #payment #place_order { font-size: 1rem !important; padding: 16px !important; border-radius: 8px !important; margin-top: 15px !important; letter-spacing: 0.5px !important; }
}
/* 🌟 MINI MOBILE / 320PX STRICT FIXES (< 480px) */
@media (max-width: 480px) {
.woocommerce-checkout .woocommerce { padding: 15px 10px !important; }
form.woocommerce-checkout { gap: 15px !important; }
/* 🚨 1. PADDING REDUCTION FOR VISIBILITY */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields { padding: 15px !important; border-radius: 12px !important; }
.scentric-address-card { padding: 12px !important; }
/* 🚨 2. FONT SHRINKING (NO BADA BADA TEXT) */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 { font-size: 1.2rem !important; margin-bottom: 15px !important; padding-bottom: 10px !important; }
.scentric-address-card .card-header h4 { font-size: 1.1rem !important; }
.scentric-address-card .card-body p { font-size: 0.85rem !important; }
.scentric-name-highlight { font-size: 0.95rem !important; }
#ship-to-different-address label { font-size: 1.15rem !important; }
#order_review_heading { font-size: 1.15rem !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
#order_review_heading::after { align-self: flex-start !important; margin-top: 2px !important; font-size: 0.65rem !important; padding: 4px 8px !important; }
.scentric-order-wrapper { padding: 15px 10px !important; border-radius: 10px !important; }
#order_review table.shop_table td.product-name { width: 55% !important; font-size: 0.8rem !important; padding-right: 5px !important; }
#order_review table.shop_table th.product-total, #order_review table.shop_table td.product-total { width: 45% !important; font-size: 0.85rem !important; }
.order-total th, .order-total td { font-size: 0.95rem !important; }
#order_review tr.shipping td[data-title="Shipping"] label::after { font-size: 0.8rem !important; margin-top: -10px !important; }
/* Inputs Shrink for 320px */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, select.country_select, select.state_select, select#billing_country, select#billing_state { font-size: 0.85rem !important; padding: 10px 12px !important; height: 45px !important; }
/* Ultra Sleek Mini Mobile Button */
.woocommerce-checkout #payment { padding: 12px !important; }
.woocommerce-checkout #payment #place_order { font-size: 0.95rem !important; padding: 14px !important; border-radius: 8px !important; }
/* 🚨 3. CLOUDFLARE OVERFLOW KILLER 🚨 */
.cf-turnstile, #cf-turnstile, .turnstile-widget, .woocommerce-checkout #payment .cf-turnstile {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
display: flex !important;
justify-content: flex-start !important;
margin: 10px 0 !important;
}
}
/* 🚨 EXTREME 320PX & 360PX SPECIFIC OVERRIDES 🚨 */
@media (max-width: 360px) {
/* Cloudflare iframe forcefully scaled down by 15% */
.cf-turnstile iframe, #cf-turnstile iframe, .turnstile-widget iframe, .woocommerce-checkout #payment .cf-turnstile iframe {
transform: scale(0.82) !important;
transform-origin: left center !important;
max-width: none !important;
}
/* Ultimate padding reduction to save space */
.woocommerce-checkout .woocommerce { padding: 10px 5px !important; }
.woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields { padding: 10px !important; }
#ship-to-different-address label { font-size: 1.05rem !important; }
}
/* --- Global Banner Animations --- */
.premium-reveal {
opacity: 0;
transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.reveal-up { transform: translateY(30px); }
.premium-reveal.is-visible { opacity: 1; transform: translate(0, 0); }
/* --- Pro-Level Responsiveness (Corners & Layout) --- */
/* Mobile (320px to 420px) */
@media (min-width: 320px) and (max-width: 767px) {
.fullBgBrandSlider { border-radius: 16px !important; }
}
/* Tablet (768px and up) */
@media (min-width: 768px) {
.fullBgBrandSlider { border-radius: 24px !important; }
}
/* Big Screen (1024px and up) */
@media (min-width: 1024px) {
.fullBgBrandSlider { border-radius: 32px !important; }
}
/* Ultra Big Screen Pro (1440px and up) */
@media (min-width: 1440px) {
.fullBgBrandSlider {
max-width: 1536px;
margin: 0 auto;
border-radius: 40px !important;
}
}
/* ====================================================
EXTRA SMALL MOBILE FIX (Strictly for 320px - 360px)
(No effect on 375px and 420px screens)
==================================================== */
@media (max-width: 360px) {
/* 1. Remove left-right gap completely to maximize width */
.hero-gradient, main, .max-w-\[1400px\], .max-w-\[1500px\], .max-w-\[1600px\] {
padding-left: 2px !important;
padding-right: 2px !important;
}
/* 2. Squeeze the banner for 320px screens */
.swiper-slide {
height: 200px !important; /* Decreased height further */
padding: 8px 6px !important;
}
.swiper-slide h2 {
font-size: 15px !important; /* Reduced title size */
line-height: 1.1 !important;
margin-bottom: 4px !important;
}
.swiper-slide p {
font-size: 9px !important;
line-height: 1.2 !important;
/* Automatically cut to 2 lines if text is long */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 4px !important;
}
.swiper-slide span {
font-size: 7px !important;
padding: 2px 6px !important;
}
.swiper-slide a {
padding: 4px 8px !important;
font-size: 8px !important;
}
/* 3. Tight fit for Products Grid (So it doesn't squish) */
.scentric-glass-pages ul.products,
.scentric-s26-page ul.products {
gap: 4px !important; /* Minimum gap between products */
margin: 0 !important;
}
.scentric-glass-pages ul.products li.product,
.scentric-s26-page ul.products li.product {
padding: 4px !important; /* Minimum inner padding for box */
border-radius: 8px !important;
}
/* Perfect fit size for Product Title and Price */
.scentric-glass-pages ul.products li.product .woocommerce-loop-product__title,
.scentric-s26-page ul.products li.product .woocommerce-loop-product__title,
.scentric-glass-pages ul.products li.product h2,
.scentric-s26-page ul.products li.product h2 {
font-size: 9px !important;
line-height: 1.1 !important;
margin-bottom: 2px !important;
}
.scentric-glass-pages ul.products li.product .price,
.scentric-s26-page ul.products li.product .price {
font-size: 9px !important;
}
/* Add to Cart / Select Option button if available */
.scentric-glass-pages ul.products li.product .button,
.scentric-s26-page ul.products li.product .button {
padding: 3px 6px !important;
font-size: 8px !important;
}
}