/*
Theme Name: Orgamee
Theme URI: https://orgamee.com
Author: Orgamee
Author URI: https://orgamee.com
Description: A botanical, WooCommerce-ready e-commerce theme for Orgamee — natural skin & hair care. Includes a Home, Shop, About Us and Contact Us template, a sticky header, and a live cart drawer.
Version: 1.10.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orgamee
Tags: e-commerce, woocommerce, custom-header, custom-menu, translation-ready
*/
:root{
--ink:#262A1F;
--cream:#F6F3EA;
--cream-2:#EFE9D8;
--card:#FFFDF8;
--sage:#74805A;
--moss:#3F4A31;
--brick:#9B4B3F;
--brick-dark:#7E3B31;
--line:#DED5BE;
--gold:#B4823C;
}
*{box-sizing:border-box;}
html{overflow-x:hidden; width:100%;}
body{
margin:0; padding:0; overflow-x:hidden; max-width:100vw;
font-family:var(--font-body, 'Work Sans'), sans-serif;
background:var(--cream);
color:var(--ink);
line-height:1.5;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:var(--font-heading, 'Fraunces'), serif;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; border:none;}
ul{list-style:none; margin:0; padding:0;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
.screen-reader-text{position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px;}
.eyebrow{
font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
color:var(--sage);
}
.btn{
display:inline-flex; align-items:center; gap:8px; cursor:pointer;
padding:13px 28px; border-radius:999px; font-weight:600; font-size:14px;
letter-spacing:.02em; transition:all .2s ease; border:none;
}
.btn-primary{background:var(--brick); color:#fff;}
.btn-primary:hover{background:var(--brick-dark); transform:translateY(-1px); color:#fff;}
.btn-secondary{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn-secondary:hover{background:var(--cream-2); border-color:var(--ink);}
.btn-outline{border:1.5px solid var(--ink); color:var(--ink); background:transparent;}
.btn-outline:hover{background:var(--ink); color:var(--cream);}
.btn-ghost{background:var(--moss); color:#fff;}
.btn-ghost:hover{background:var(--ink); color:#fff;}
/* ===== ANNOUNCEMENT BAR ===== */
.announce{
background:var(--moss); color:#EFE9D8; text-align:center;
font-size:12.5px; letter-spacing:.03em; padding:9px 12px; font-weight:500;
}
.announce span{opacity:.9;}
/* ===== HEADER ===== */
.site-header{
position:sticky; top:0; z-index:40; background:#fff;
box-shadow:0 4px 14px rgba(38,42,31,.08);
}
.header-inner{
display:flex; align-items:center; justify-content:space-between;
padding:18px 32px; max-width:1240px; margin:0 auto;
}
.logo{font-family:var(--font-heading, 'Fraunces'), serif; font-size:26px; font-weight:600; letter-spacing:.01em;}
.logo span{color:var(--brick);}
.logo a{display:block;}
.logo img{max-height:44px; width:auto; display:block;}
nav.main-nav{display:flex; gap:34px;}
.main-nav ul{display:flex; gap:34px;}
.main-nav a{
font-size:14px; font-weight:600; letter-spacing:.02em; position:relative;
padding:6px 0; color:var(--ink); opacity:.8;
}
.main-nav a:hover, .main-nav .current-menu-item > a{opacity:1;}
.main-nav .current-menu-item > a::after{
content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
background:var(--brick);
}
.header-icons{display:flex; align-items:center; gap:20px;}
.icon-btn{
position:relative; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
border-radius:50%; background:transparent; transition:background .15s; cursor:pointer;
}
.icon-btn:hover{background:var(--cream-2);}
.icon-btn svg{width:19px; height:19px; stroke:var(--ink); fill:none; stroke-width:1.6;}
.cart-count{
position:absolute !important; top:-2px; right:-2px; background:var(--brick); color:#fff; font-size:10px;
font-weight:700; width:16px; height:16px; border-radius:50%; display:flex !important; align-items:center; justify-content:center;
z-index:5 !important; line-height:1; box-shadow:0 0 0 2px var(--cream);
}
.hamburger{display:none; width:38px; height:38px; align-items:center; justify-content:center; background:transparent; border-radius:50%; cursor:pointer;}
.hamburger svg{width:22px; height:22px; stroke:var(--ink); fill:none; stroke-width:1.8;}
.mobile-nav{display:none; flex-direction:column; padding:0 32px 22px;}
.mobile-nav.show{display:flex;}
.mobile-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.mobile-nav li{list-style:none; width:100%;}
.mobile-nav a{display:block; width:100%; padding:12px 0; font-weight:600; font-size:15px; border-bottom:1px solid var(--line); box-sizing:border-box;}
/* Mobile header order: hamburger · search · logo · account · cart */
@media(max-width:900px){
nav.main-nav{display:none;}
.hamburger{display:flex; order:1;}
.header-icons{display:contents;}
#searchToggle{order:2;}
.logo{order:3; margin:0 auto;}
#accountToggle{order:4;}
#cartToggle{order:5;}
}
/* ===== SEARCH OVERLAY ===== */
.search-overlay{
position:fixed; inset:0; background:rgba(38,42,31,.5); z-index:90; opacity:0; pointer-events:none; transition:opacity .2s;
display:flex; align-items:flex-start; justify-content:center; padding-top:14vh;
}
.search-overlay.show{opacity:1; pointer-events:auto;}
.search-overlay-inner{
background:#fff; border-radius:20px; padding:22px; width:92%; max-width:560px;
display:flex; align-items:center; gap:12px; box-shadow:0 24px 60px rgba(38,42,31,.25);
}
.search-overlay-form{flex:1; display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:999px; padding:8px 8px 8px 20px;}
.search-overlay-form input{flex:1; border:none; font-size:15px; font-family:inherit; background:transparent;}
.search-overlay-form input:focus{outline:none;}
.search-overlay-form button{width:40px; height:40px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.search-overlay-form button svg{width:17px; height:17px; stroke:#fff; fill:none; stroke-width:1.8;}
.search-overlay-close{width:38px; height:38px; border-radius:50%; background:var(--cream-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; font-size:15px;}
/* ===== HERO — landscape banner card with rounded corners (desktop + mobile use separate images) ===== */
.hero-banner{
position:relative; width:100%; max-width:1400px; margin:24px auto 0; aspect-ratio:21/9;
overflow:hidden; border-radius:28px;
background:linear-gradient(120deg,#DCE0C6,#B7C29A 55%, #93A272);
}
.hero-banner img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.hero-banner .hero-emoji{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:160px; opacity:.35;}
/* Dark readability gradient — only useful when the banner uses the
theme's own overlaid text (hero-banner-copy). Banners that already
have their text/design baked into the uploaded image (like a
ready-made promo graphic) don't need it, and it was showing up as an
unwanted dark "shadow" across those images, so it's off by default
and only added back via .has-overlay-text if you're using the
theme's text overlay on a plain photo banner. */
.hero-banner.has-overlay-text::after{
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, rgba(38,42,31,.55) 0%, rgba(38,42,31,.15) 55%, rgba(38,42,31,0) 75%);
}
.hero-banner-copy{
position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center;
max-width:640px; padding:0 6vw; color:#fff;
}
.hero-banner-copy .eyebrow{margin-bottom:14px; color:#EFE9D8;}
.hero-banner-copy h1{font-size:clamp(28px,4vw,52px); font-weight:500; line-height:1.1; letter-spacing:-.01em; margin-bottom:18px; color:#fff;}
.hero-banner-copy h1 em{font-style:italic; color:#F0C7A8;}
.hero-banner-copy p{font-size:clamp(13px,1.4vw,16.5px); max-width:440px; margin-bottom:26px; color:#EDE9D8;}
.hero-banner-tag{
position:absolute; bottom:24px; right:24px; z-index:2; background:var(--card); padding:14px 18px;
border-radius:16px; box-shadow:0 12px 30px rgba(38,42,31,.2); max-width:210px;
}
.hero-banner-tag strong{display:block; font-family:var(--font-heading, 'Fraunces'), serif; font-size:15px; color:var(--ink);}
.hero-banner-tag span{font-size:12px; color:var(--sage);}
/* Multi-slide banner */
.hero-slides{position:absolute; inset:0;}
.hero-slide{
position:absolute; inset:0; background-size:cover; background-position:center;
opacity:0; transition:opacity 1s ease;
}
.hero-slide.active{opacity:1;}
.hero-dots{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px;}
.hero-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); border:none; padding:0; cursor:pointer; transition:background .2s, width .2s;}
.hero-dot.active{background:#fff; width:22px; border-radius:999px;}
/* Desktop banner shown by default; mobile banner swaps in at narrow widths.
Both stay landscape — mobile just uses a less extreme ratio (16:9 vs
21:9) so a dedicated mobile-sized image doesn't get cropped too tightly. */
.hero-banner-mobile{display:none;}
@media(max-width:700px){
.hero-banner{margin:16px 16px 0; border-radius:20px; width:auto; aspect-ratio:16/9;}
.hero-banner-desktop{display:none;}
.hero-banner-mobile{display:block;}
.hero-banner-copy{padding:0 20px; max-width:100%;}
.hero-banner-tag{
left:14px; right:auto; bottom:12px; max-width:150px; padding:9px 12px; border-radius:12px;
}
.hero-banner-tag strong{font-size:11.5px;}
.hero-banner-tag span{font-size:9.5px; line-height:1.3; display:block;}
}
/* ===== HERO (legacy split layout — kept in case you prefer it) ===== */
.hero{padding:64px 32px 40px;}
.hero-grid{
max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
gap:56px; align-items:center;
}
.hero-copy .eyebrow{margin-bottom:14px;}
.hero-copy h1{
font-size:52px; font-weight:500; line-height:1.08; letter-spacing:-.01em; margin-bottom:20px;
}
.hero-copy h1 em{font-style:italic; color:var(--brick);}
.hero-copy p{font-size:16.5px; color:#4A4E3E; max-width:440px; margin-bottom:30px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-visual{
position:relative; aspect-ratio:1/1; border-radius:28px; overflow:hidden;
background:linear-gradient(140deg,#DCE0C6,#B7C29A 60%, #93A272);
}
.hero-visual img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.hero-visual .hero-emoji{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-size:130px; opacity:.5;
}
.hero-tag{
position:absolute; bottom:20px; left:20px; background:var(--card); padding:14px 18px;
border-radius:16px; box-shadow:0 12px 30px rgba(38,42,31,.14); max-width:210px; z-index:2;
}
.hero-tag strong{display:block; font-family:var(--font-heading, 'Fraunces'), serif; font-size:15px;}
.hero-tag span{font-size:12px; color:var(--sage);}
@media(max-width:900px){
.hero-grid{grid-template-columns:1fr;}
.hero-copy h1{font-size:38px;}
}
/* ===== TRUST MARQUEE ===== */
.trust{background:var(--moss); padding:16px 0; overflow:hidden; margin-top:16px;}
.trust-marquee{display:flex; width:max-content;}
.trust-marquee:hover .trust-track{animation-play-state:paused;}
.trust-track{
display:flex; align-items:center; gap:clamp(28px,4vw,54px); flex-shrink:0;
padding-right:clamp(28px,4vw,54px);
animation:trust-scroll 26s linear infinite;
}
@keyframes trust-scroll{
from{transform:translateX(0);}
to{transform:translateX(-100%);}
}
.trust-item{
display:flex; align-items:center; gap:9px; color:#EFE9D8; font-weight:600;
letter-spacing:.02em; white-space:nowrap; font-size:clamp(11.5px,1.6vw,13px);
}
.trust-item svg{width:clamp(14px,2vw,17px); height:clamp(14px,2vw,17px); stroke:#C7D4A8; fill:none; stroke-width:1.6; flex-shrink:0;}
@media (prefers-reduced-motion: reduce){
.trust-track{animation:none;}
}
/* ===== REELS CAROUSEL — autoplay muted video cards ===== */
.reel-section{background:transparent; padding-top:24px; padding-bottom:56px;}
.reel-section .section-head .eyebrow{color:var(--sage);}
.reel-section .section-head h2{color:var(--ink);}
.reel-section .section-head p{color:#5A5E4D;}
.reel-section .reel-nav{background:var(--card); border-color:var(--line);}
.reel-section .reel-nav:hover{background:var(--cream-2);}
.reel-carousel{position:relative; display:flex; align-items:center; gap:8px; min-width:0; max-width:100%;}
.reel-strip{
display:flex; gap:20px; overflow-x:auto; padding:26px 0 10px; scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch; scroll-behavior:smooth; flex:1; min-width:0;
}
.reel-strip::-webkit-scrollbar{height:6px;}
.reel-strip::-webkit-scrollbar-thumb{background:var(--line); border-radius:999px;}
.reel-card{
position:relative; width:100%; aspect-ratio:9/16; border-radius:20px; overflow:hidden;
background:linear-gradient(160deg,#DCE0C6,#93A272);
box-shadow:0 14px 30px rgba(38,42,31,.14);
}
.reel-card video{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.reel-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(38,42,31,0) 60%, rgba(38,42,31,.55) 100%); pointer-events:none;}
.reel-caption-pill{
position:absolute; left:14px; right:14px; bottom:16px; z-index:2; color:var(--ink); font-size:13px; font-weight:700;
background:rgba(255,255,255,.92); padding:10px 16px; border-radius:999px; text-align:center;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reel-item{
flex:0 0 auto; width:240px; scroll-snap-align:center;
transform:scale(.86); opacity:.65; transition:transform .35s ease, opacity .35s ease;
transform-origin:center center;
}
/* The reel nearest the horizontal centre of the strip (tracked in main.js)
zooms up to full size and full opacity; the rest stay smaller/dimmer —
an Instagram-Reels-style focal carousel. */
.reel-item.is-center{transform:scale(1); opacity:1; position:relative; z-index:2;}
.reel-item.is-center .reel-card{box-shadow:0 20px 40px rgba(38,42,31,.24);}
.reel-product-card{
display:flex; align-items:center; gap:10px; margin-top:12px; background:var(--card); border:1px solid var(--line);
border-radius:14px; padding:9px; flex-wrap:wrap;
}
.reel-product-thumb{flex-shrink:0; width:44px; height:44px; border-radius:9px; overflow:hidden; display:block; background:var(--cream-2);}
.reel-product-thumb img{width:100%; height:100%; object-fit:cover;}
.reel-product-info{flex:1; display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0;}
.reel-product-price{font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap;}
.reel-product-price ins{text-decoration:none;}
.reel-product-price del{text-decoration:line-through; opacity:.55; font-weight:500; font-size:12px; margin-right:4px;}
.reel-product-view{flex-shrink:0; padding:7px 16px; border-radius:999px; background:var(--sage); color:#fff; font-size:11.5px; font-weight:700; white-space:nowrap;}
.reel-product-view:hover{background:var(--moss);}
.reel-nav{
flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--card); border:1px solid var(--line);
display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--ink); cursor:pointer;
box-shadow:0 4px 10px rgba(38,42,31,.1);
}
.reel-nav:hover{background:var(--cream-2);}
@media(max-width:700px){
.reel-item{width:180px;}
.reel-nav{display:none;}
.reel-product-card{padding:8px; gap:8px;}
.reel-product-thumb{width:36px; height:36px;}
.reel-product-info{flex-direction:column; align-items:flex-start; gap:6px;}
.reel-product-price{font-size:12px;}
.reel-product-view{width:100%; text-align:center; padding:8px;}
}
/* ===== SECTION HEADERS ===== */
.section{padding:76px 0;}
.section-head{text-align:center; margin-bottom:44px;}
.section-head h2{font-size:34px; font-weight:500; margin:0;}
.section-head p{color:#5A5E4D; font-size:15px; margin-top:8px;}
/* ===== CATEGORY TILES — small circular badges (image circle + label below),
matching the "Explore Categories" reference layout: a horizontal row of
round icons with the category name underneath, rather than the old
rectangular banner-style cards. ===== */
.ritual-section{background:#fff; padding:24px 0 32px;}
.cat-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:30px 26px;}
.cat-tile{
position:relative; overflow:visible; background:transparent;
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
width:112px; padding:0; color:var(--ink); text-decoration:none;
transition:transform .2s ease;
}
.cat-tile:hover{transform:translateY(-2px);}
.cat-tile:hover .cat-tile-img{box-shadow:0 10px 22px rgba(38,42,31,.18);}
.cat-tile-text{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; max-width:100%;}
.cat-tile h3{font-size:14px; font-weight:600; margin:0; color:var(--ink); line-height:1.25;}
.cat-tile-sub{display:none;} /* circle layout shows just the label, matching the reference */
.cat-tile-img{
position:static; order:-1;
height:96px; width:96px; border-radius:50%; object-fit:cover;
margin-bottom:12px; background:var(--cream-2);
box-shadow:0 6px 14px rgba(38,42,31,.12);
transition:box-shadow .2s ease;
}
/* No thumbnail set on the WooCommerce category — draw a plain colour
circle behind the label instead, so it never looks like a missing image. */
.cat-tile-text:only-child{padding-top:108px;}
.cat-tile-text:only-child::before{
content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:96px; height:96px; border-radius:50%; background:var(--cream-2);
}
.cat1 .cat-tile-text:only-child::before{background:#EFE4D6;}
.cat2 .cat-tile-text:only-child::before{background:#E7E9DA;}
.cat3 .cat-tile-text:only-child::before{background:#F3E0DC;}
.cat4 .cat-tile-text:only-child::before{background:#E4E9E1;}
@media(max-width:640px){
.cat-grid{gap:20px 16px;}
.cat-tile{width:84px;}
.cat-tile-img{height:72px; width:72px; margin-bottom:8px;}
.cat-tile-text:only-child{padding-top:80px;}
.cat-tile-text:only-child::before{width:72px; height:72px;}
.cat-tile h3{font-size:12.5px;}
}
/* Narrow phones: keep all 4 circles on a single row instead of wrapping
to a 3+1 layout — shrink the circle/gaps and let flex divide the row
evenly edge-to-edge, same idea as the reference "Explore Categories" row. */
@media(max-width:480px){
.cat-grid{flex-wrap:nowrap; justify-content:space-between; gap:8px;}
.cat-tile{width:auto; flex:1 1 0; min-width:0;}
.cat-tile-img{height:58px; width:58px; margin-bottom:6px;}
.cat-tile-text:only-child{padding-top:64px;}
.cat-tile-text:only-child::before{width:58px; height:58px;}
.cat-tile h3{font-size:10.5px; line-height:1.15; word-break:break-word;}
}
/* ===== PRODUCT CARDS (WooCommerce content-product.php) ===== */
/* Reset WooCommerce core's default float/width/margin on product loop items —
these were fighting with our CSS grid and squashing cards down to ~22% width. */
ul.products li.product,
ul.products li.product.first,
ul.products li.product.last{
width:auto !important;
float:none !important;
margin:0 !important;
clear:none !important;
list-style:none !important;
grid-column:auto !important;
grid-row:auto !important;
order:0 !important;
}
.prod-grid, ul.products{display:grid !important; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:24px; list-style:none; margin:0 !important; padding:0;}
li.product.prod-card{width:auto;}
.prod-card{
background:var(--card); border-radius:20px; overflow:hidden; border:1px solid var(--line);
transition:box-shadow .2s, transform .2s; position:relative; display:flex; flex-direction:column;
}
.prod-card:hover{box-shadow:0 18px 34px rgba(38,42,31,.12); transform:translateY(-3px);}
.prod-media{
aspect-ratio:4/5; position:relative; overflow:hidden; display:block;
background:linear-gradient(150deg,#EDE6D3,#DCD2B4);
}
.prod-media img{
width:100% !important; height:100% !important; max-width:100% !important;
object-fit:cover !important; position:absolute !important; inset:0 !important;
margin:0 !important; transition:opacity .35s ease;
}
/* WooCommerce's core stylesheet ships ".woocommerce ul.products li.product a img{height:auto}"
which is MORE specific than the rule above, so it was winning the cascade and forcing
product images back to their native (roughly square) ratio inside this 4:5 box — that's
what left the empty beige strip between the photo and the price. The !important above
pins our fill behaviour so the photo always covers the whole box, no gap underneath. */
.prod-media img.img-b{opacity:0;}
.prod-card:hover .prod-media img.img-a{opacity:0;}
.prod-card:hover .prod-media img.img-b{opacity:1;}
.prod-badge{
position:absolute !important; top:16px; left:0; background:var(--brick); color:#fff; font-size:11px;
font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:6px 14px 6px 12px;
border-radius:0 999px 999px 0; z-index:5 !important; box-shadow:0 4px 10px rgba(38,42,31,.18);
}
.prod-badge.new{background:var(--sage);}
.prod-badge.sold{background:#8A8272;}
.prod-info{padding:16px 16px 18px; display:flex; flex-direction:column; gap:2px;}
.prod-rating{font-size:12.5px; color:var(--gold); font-weight:600; margin-bottom:2px;}
.prod-rating-count{color:#8A7F5F; font-weight:500;}
.prod-info .pname{font-weight:600; font-size:15px; margin-bottom:2px;}
.prod-info .pname a{color:var(--ink);}
.prod-info .ptag{font-size:12.5px; color:var(--sage); margin-bottom:10px;}
.prod-price{display:flex; align-items:baseline; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
.prod-price-sale{font-weight:700; font-size:16px; color:var(--ink);}
.prod-price-mrp{font-size:12.5px; color:#9C9583; text-decoration:line-through;}
.prod-price-discount{font-size:11.5px; font-weight:700; color:var(--brick); background:rgba(155,75,63,.1); padding:2px 7px; border-radius:6px;}
.prod-price .now, .prod-price ins{font-weight:700; font-size:16px; text-decoration:none;}
.prod-price .was, .prod-price del{font-size:12.5px; color:#9C9583; text-decoration:line-through; opacity:1;}
/* Add to Cart text — uppercase everywhere it appears: product loop
cards, single product, and the mobile sticky bar. */
.prod-add-btn, a.prod-add-btn, .prod-info a.button,
.single-product .single_add_to_cart_button,
.single-product form.cart .buy-now-btn,
#mobileStickyCartBtn{
text-transform:uppercase; letter-spacing:.03em;
}
.prod-add-btn, a.prod-add-btn, .prod-info a.button{
display:block !important; width:100%; text-align:center; background:var(--ink) !important; color:#fff !important;
padding:12px !important; border-radius:12px !important; font-size:13.5px; font-weight:600; margin-top:auto;
transition:background .15s;
}
.prod-add-btn:hover, a.prod-add-btn:hover, .prod-info a.button:hover{background:var(--brick-dark) !important; color:#fff !important;}
.prod-add-btn.loading{opacity:.7; pointer-events:none;}
@media(max-width:480px){
.prod-grid, ul.products{grid-template-columns:repeat(2,1fr) !important; gap:12px !important;}
.prod-card{border-radius:14px;}
.prod-media{aspect-ratio:1/1;}
.prod-badge{font-size:9.5px; padding:4px 10px 4px 8px; top:10px; letter-spacing:.02em;}
.prod-info{padding:10px 10px 12px; gap:1px;}
.prod-rating{font-size:10.5px; margin-bottom:1px;}
.prod-info .pname{font-size:12.5px; line-height:1.3;}
.prod-info .ptag{font-size:10.5px; margin-bottom:6px;}
.prod-price{margin-bottom:8px;}
.prod-price-sale{font-size:13px;}
.prod-price-mrp{font-size:10.5px;}
.prod-price-discount{font-size:10px; padding:1px 5px;}
.prod-price .now, .prod-price ins{font-size:13px;}
.prod-price .was, .prod-price del{font-size:10.5px;}
.prod-add-btn, a.prod-add-btn, .prod-info a.button{padding:8px !important; font-size:11.5px !important; border-radius:9px !important;}
}
/* ===== BEST SELLERS — white card background, and no gap before "Why
Orgamee" right below it (padding-bottom here + the next section's
own top padding removed so the two sit flush against each other). ===== */
.bestsellers-section{background:#fff; padding-bottom:24px;}
.why-orgamee-section{padding-top:0;}
.section-cta{text-align:center; margin-top:40px;}
/* ===== CONCERN GRID ===== */
.concern-band{background:var(--cream-2);}
.concern-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.concern-card{background:var(--card); border-radius:18px; padding:26px; border:1px solid var(--line);}
.concern-card .ic{font-size:26px; margin-bottom:12px; display:block;}
.concern-card h3{font-size:17px; font-weight:600; margin-bottom:6px; margin-top:0;}
.concern-card p{font-size:13px; color:#5A5E4D; margin-bottom:14px;}
.concern-card a{font-size:12.5px; font-weight:700; color:var(--brick);}
@media(max-width:900px){.concern-grid{grid-template-columns:1fr 1fr;}}
/* ===== VALUES ===== */
.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; text-align:center;}
.values-grid .val-ic{
width:56px; height:56px; border-radius:50%; background:var(--cream-2); display:flex; align-items:center;
justify-content:center; margin:0 auto 14px; font-size:22px;
}
.values-grid h4{font-size:14.5px; font-weight:600; margin-bottom:5px;}
.values-grid p{font-size:12.5px; color:#5A5E4D;}
@media(max-width:900px){.values-grid{grid-template-columns:1fr 1fr;}}
/* ===== TESTIMONIALS ===== */
.testi-band{background:var(--moss); color:#EFE9D8;}
.testi-band .section-head h2, .testi-band .section-head p{color:#EFE9D8;}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.testi-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:26px;}
.stars{color:var(--gold); font-size:13px; margin-bottom:12px;}
.testi-card p{font-size:14.5px; line-height:1.6; margin-bottom:16px; font-style:italic;}
.testi-who{display:flex; align-items:center; gap:10px;}
.testi-avatar{width:36px; height:36px; border-radius:50%; background:#B7C29A; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:var(--moss);}
.testi-who strong{display:block; font-size:13px;}
.testi-who span{font-size:11.5px; opacity:.7;}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr;}}
/* ===== STORY TEASER ===== */
.story-section{background:#fff;}
.story{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.story-visual{aspect-ratio:4/3; border-radius:24px; background:linear-gradient(150deg,#DCE0C6,#8FA06B); display:flex; align-items:center; justify-content:center; font-size:80px; overflow:hidden;}
.story-visual img{width:100%; height:100%; object-fit:cover;}
.story-copy .eyebrow{margin-bottom:12px;}
.story-copy h2{font-size:30px; font-weight:500; margin-bottom:16px; margin-top:0;}
.story-copy p{font-size:15px; color:#4A4E3E; margin-bottom:22px;}
@media(max-width:900px){.story{grid-template-columns:1fr;}}
/* ===== NEWSLETTER ===== */
.news-band{background:var(--brick); color:#fff; border-radius:28px; margin:0 32px 80px; padding:56px 40px; text-align:center;}
.news-band h2{font-size:28px; font-weight:500; margin-bottom:8px; margin-top:0;}
.news-band p{opacity:.9; font-size:14px; margin-bottom:26px;}
.news-form{display:flex; max-width:420px; margin:0 auto; gap:10px;}
.news-form input{flex:1; padding:13px 18px; border-radius:999px; border:none; font-size:14px; font-family:inherit;}
.news-form button{padding:13px 26px; border-radius:999px; background:var(--ink); color:#fff; font-weight:600; font-size:14px;}
@media(max-width:480px){
.news-form{flex-direction:column; gap:12px;}
.news-form input, .news-form button{width:100%;}
}
/* ===== FOOTER ===== */
.site-footer{background:var(--ink); color:#D8D6C6; padding:64px 32px 24px;}
.footer-grid{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr; gap:34px;}
@media(max-width:1000px){
.footer-grid{grid-template-columns:1fr 1fr 1fr;}
}
@media(max-width:700px){
.footer-grid{grid-template-columns:1fr 1fr; gap:28px 20px;}
.footer-grid > div:first-child{grid-column:1 / -1;}
}
@media(max-width:480px){
.site-footer{padding:44px 20px 20px;}
.footer-grid{grid-template-columns:1fr; gap:32px; text-align:center;}
.footer-grid > div:first-child{grid-column:auto;}
.footer-grid p{max-width:none; margin-left:auto; margin-right:auto;}
.foot-news{max-width:340px; margin:14px auto 0;}
.foot-bottom{flex-direction:column; text-align:center; gap:6px;}
}
.footer-grid h4{color:#fff; font-size:13px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px;}
.footer-grid li{margin-bottom:9px; font-size:13.5px; opacity:.8;}
.footer-grid li:hover{opacity:1;}
.footer-logo{font-family:var(--font-heading, 'Fraunces'), serif; font-size:22px; color:#fff; margin-bottom:12px;}
.footer-grid p{font-size:13px; opacity:.75; line-height:1.6; max-width:230px;}
.foot-news{display:flex; margin-top:14px; gap:8px;}
.foot-news input{flex:1; padding:10px 14px; border-radius:999px; border:1px solid #4A4E3E; background:transparent; color:#fff; font-size:13px;}
.foot-news button{padding:10px 18px; border-radius:999px; background:var(--brick); color:#fff; font-size:12.5px; font-weight:700;}
.foot-bottom{
max-width:1240px; margin:44px auto 0; padding-top:22px; border-top:1px solid #3B3E30;
display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; opacity:.65;
}
/* ===== SHOP PAGE ===== */
.shop-header{padding:44px 32px 8px; text-align:center;}
.shop-header .eyebrow{margin-bottom:10px;}
.shop-header h1{font-size:36px; font-weight:500; margin:0;}
.shop-header p{color:#5A5E4D; font-size:14.5px; margin-top:8px;}
.shop-layout{max-width:1240px; margin:0 auto; padding:20px 32px 90px;}
.shop-cat-pills{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px;}
.shop-cat-pill{
padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:var(--card);
font-size:13px; font-weight:600; color:var(--ink);
}
.shop-cat-pill:hover{background:var(--cream-2);}
.shop-cat-pill.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.shop-sidebar-inline{margin-bottom:28px; padding:18px 20px; background:var(--cream-2); border-radius:16px;}
.shop-sidebar-inline .widget{margin-bottom:0; display:inline-block; margin-right:28px;}
.shop-sidebar, .shop-main{min-width:0;}
.shop-sidebar .widget{margin-bottom:28px; overflow-wrap:break-word;}
.shop-sidebar .widget-title{font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; color:var(--moss);}
.shop-sidebar ul{list-style:none; margin:0; padding:0;}
.shop-sidebar ul li{font-size:13.5px; margin-bottom:9px; color:#4A4E3E;}
.shop-sidebar input[type=checkbox]{accent-color:var(--brick); margin-right:8px;}
.shop-sidebar input[type=search], .shop-sidebar input[type=text]{
width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card); font-family:inherit; font-size:13.5px;
}
.shop-sidebar form{display:flex; gap:8px; flex-wrap:wrap;}
.shop-sidebar .widget button, .shop-sidebar .widget input[type=submit]{
padding:10px 16px; border-radius:10px; background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; flex-shrink:0;
}
@media(max-width:800px){.shop-layout{padding:20px 20px 70px;}}
.shop-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
.shop-toolbar span, .shop-toolbar p.woocommerce-result-count{font-size:13px; color:#5A5E4D; margin:0;}
.shop-toolbar select, .shop-toolbar .orderby{padding:9px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card); font-size:13px; font-family:inherit;}
.shop-toolbar form.woocommerce-ordering{margin:0;}
.woocommerce-notices-wrapper{max-width:1240px; margin:0 auto; padding:0 32px;}
/* ===== ABOUT PAGE ===== */
.about-hero{padding:70px 32px; text-align:center; background:var(--cream-2);}
.about-hero h1{font-size:42px; font-weight:500; max-width:680px; margin:0 auto 14px;}
.about-hero p{max-width:520px; margin:0 auto; color:#5A5E4D; font-size:15px;}
.timeline{max-width:820px; margin:0 auto; padding:0 32px;}
.tl-item{display:grid; grid-template-columns:90px 1fr; gap:26px; padding:26px 0; border-bottom:1px solid var(--line);}
.tl-item:last-child{border-bottom:none;}
.tl-year{font-family:var(--font-heading, 'Fraunces'), serif; font-size:26px; color:var(--brick); font-weight:600;}
.tl-item h3{font-size:17px; font-weight:600; margin-bottom:6px; margin-top:0;}
.tl-item p{font-size:14px; color:#5A5E4D; margin:0;}
/* ===== CONTACT PAGE ===== */
.contact-layout{max-width:1080px; margin:0 auto; padding:60px 32px 90px; display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.contact-form label{display:block; font-size:12.5px; font-weight:600; margin-bottom:7px; margin-top:16px; text-transform:uppercase; letter-spacing:.04em; color:var(--moss);}
.contact-form label:first-child{margin-top:0;}
.contact-form input, .contact-form textarea{
width:100%; padding:13px 16px; border-radius:12px; border:1px solid var(--line); font-family:inherit;
font-size:14px; background:var(--card);
}
.contact-form textarea{resize:vertical; min-height:110px;}
.contact-form button{margin-top:24px;}
.form-success{background:#DDEBD0; color:var(--moss); padding:14px 18px; border-radius:12px; margin-bottom:18px; font-size:14px;}
.contact-info-card{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px; margin-bottom:20px;}
.contact-info-card h3{font-size:16px; font-weight:600; margin-bottom:14px; margin-top:0;}
.ci-row{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; font-size:13.5px;}
.ci-row svg{width:17px; height:17px; stroke:var(--brick); flex-shrink:0; margin-top:2px;}
.faq-item{border-bottom:1px solid var(--line); padding:16px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:14px; cursor:pointer;}
.faq-toggle-icon{transition:transform .2s ease; font-size:16px; color:var(--brick); flex-shrink:0;}
.faq-item.open .faq-toggle-icon{transform:rotate(45deg);}
.faq-a{font-size:13.5px; color:#5A5E4D; margin-top:10px; display:none; line-height:1.6;}
.faq-item.open .faq-a{display:block;}
/* ===== PRODUCT PAGE ACCORDION (Description / Reviews / Additional Info) ===== */
.prod-accordion{max-width:840px; margin:32px auto 40px;}
.prod-accordion .faq-item{border-bottom:1px solid var(--sage); padding:18px 0;}
.prod-accordion .faq-q{font-size:16px; font-weight:600; padding:6px 0;}
.prod-accordion .faq-a{font-size:14.5px; margin-top:14px;}
.prod-accordion .faq-a p{margin-bottom:12px;}
.prod-accordion .faq-a ul, .prod-accordion .faq-a ol{padding-left:20px; margin-bottom:12px;}
.prod-accordion-item{padding:0;}
.prod-accordion .faq-a > h2:first-child{display:none;}
/* Arrow toggle icon (in place of the circle-chevron), rotates to point
up when the section is open. */
.prod-accordion .faq-toggle-icon{
width:20px; height:20px; display:flex; align-items:center; justify-content:center;
transform:none; transition:transform .2s ease;
}
.prod-accordion .faq-toggle-icon svg{width:18px; height:18px; stroke:var(--sage); fill:none; stroke-width:2;}
.prod-accordion .faq-item.open .faq-toggle-icon{transform:rotate(180deg);}
.prod-accordion .faq-item.open .faq-toggle-icon svg{stroke:var(--brick);}
@media(max-width:480px){.prod-accordion{margin:22px auto 32px;}}
@media(max-width:800px){.contact-layout{grid-template-columns:1fr;}}
/* ===== SINGLE PRODUCT PAGE ===== */
.single-product div.product{
max-width:1140px; margin:0 auto; padding:0;
display:block;
}
/* White rounded card — wraps only the gallery + summary (incl. price,
buttons, and the discount vouchers), NOT the tabs/accordion or
related products below, which sit on the page's normal background.
The wrapper itself is opened/closed in functions.php
(orgamee_pdp_white_card_open/close, hooked around the gallery+summary). */
.single-product .pdp-white-card{
display:flex; flex-wrap:wrap; column-gap:48px; row-gap:0;
background:#fff; border-radius:26px; padding:36px 32px 28px; margin:24px auto 40px;
}
.single-product div.product > .pdp-why-works,
.single-product div.product > .prod-accordion,
.single-product div.product > .wrap,
.single-product div.product > .pdp-results,
.single-product div.product > .pdp-testimonials,
.single-product div.product > .related.products,
.single-product div.product > .upsells.products{
flex-basis:100%; width:100%;
}
/* Gallery images + the new "points under gallery" block are wrapped
together (functions.php: orgamee_pdp_gallery_col_open/close) so they
stack naturally as one flex column — this keeps WooCommerce's own
gallery slider script untouched (it measures the .images element's
own width, so nesting it doesn't affect that), rather than using
CSS Grid track sizing, which could shrink the gallery to near-zero
width in some cases and make the image seem to disappear. */
.pdp-gallery-col{flex:0 0 46%; max-width:560px; display:flex; flex-direction:column; float:none;}
/* WooCommerce's own core stylesheet (woocommerce.css) ships a default
".woocommerce div.product div.images{width:38%; float:left}" rule.
That rule used to be harmless here because our layout overruled it,
but now that the gallery is wrapped in .pdp-gallery-col, div.images
is a flex child of that column rather than of .pdp-white-card — and
flex items DO still honour an explicit "width" (float is ignored in
a flex context, but width isn't), so WooCommerce's 38% was silently
shrinking the image to well under half of the column, leaving a big
blank gap before the text. Reset both explicitly so our own sizing
below is the only thing controlling it. */
.single-product div.images{max-width:100%; width:100% !important; float:none !important;}
.single-product div.images img{border-radius:22px; width:100% !important; max-width:100%; height:auto !important; max-height:620px; object-fit:cover; display:block;}
.single-product .woocommerce-product-gallery__image img{width:100% !important; height:auto !important; max-height:620px; object-fit:cover; border-radius:22px;}
.single-product .woocommerce-product-gallery__wrapper{margin-bottom:28px !important;}
/* 4 short points directly under the gallery thumbnails, inside the
same wrapper column as the images. */
.pdp-gallery-short-description{padding-top:18px;}
.pdp-gallery-short-description.woocommerce-product-details__short-description{margin-bottom:0;}
/* The short description text comes from wc_format_content(), which wraps
it in
tag(s) that keep the browser's default paragraph margin
(~1em top+bottom). That default margin stacks on top of this box's own
padding-top above the text, and — since nothing here has a
bottom border/padding to stop margin collapse — the last
's own
margin-bottom pushes past this box's bottom edge into whatever comes
next. Both read as extra "blank space" above/below the text. Reset on
mobile only, where the layout is tight enough that it's noticeable. */
@media(max-width:480px){
.pdp-gallery-short-description{padding-top:8px;}
.pdp-gallery-short-description p{margin:0 0 8px;}
.pdp-gallery-short-description p:last-child{margin-bottom:0;}
.pdp-gallery-short-description p:empty{display:none;}
.single-product .woocommerce-product-gallery__wrapper{margin-bottom:14px !important;}
}
.pdp-gallery-points{display:flex; flex-direction:column; gap:10px; padding-top:18px;}
.pdp-gallery-point{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#4A4E3E;}
.pdp-gallery-point .pdp-benefit-ic{color:var(--brick); flex-shrink:0; margin-top:1px;}
/* Thumbnail row (ol.flex-control-thumbs) — this is the actual markup
WooCommerce renders on this site, confirmed working. Do not add a
"fallback" flex rule on .woocommerce-product-gallery__wrapper itself —
that conflicts with WooCommerce's own zoom/slider positioning and
blows up the main image instead of fixing the thumbnails. */
.single-product div.images .flex-control-thumbs{
margin-top:28px !important; display:flex !important; flex-wrap:wrap; gap:12px !important;
list-style:none !important; padding:0 !important;
}
.single-product div.images .flex-control-thumbs li{
width:70px !important; height:70px !important; flex:0 0 70px; border-radius:10px; overflow:hidden; list-style:none;
}
.single-product div.images .flex-control-thumbs li img{
width:100% !important; height:100% !important; object-fit:cover !important; border-radius:10px;
opacity:.6; cursor:pointer; display:block;
}
.single-product div.images .flex-control-thumbs li img.flex-active{opacity:1; outline:2px solid var(--brick);}
.single-product .summary{flex:1 1 0%; min-width:280px; padding-top:4px;}
.single-product .product_title{font-family:var(--font-heading, 'Fraunces'), serif; font-weight:500; font-size:30px; line-height:1.2; margin:0 0 10px;}
.single-product .woocommerce-product-rating{margin-bottom:16px; font-size:13px; display:flex; align-items:center; gap:8px;}
.single-product .star-rating{font-size:14px;}
.single-product p.price{font-size:23px; font-weight:700; margin:0 0 18px; color:var(--ink);}
.single-product p.price del{color:#9C9583; font-weight:500; font-size:16px; margin-right:10px; opacity:1;}
.single-product p.price ins{text-decoration:none;}
.single-product .woocommerce-product-details__short-description{font-size:14.5px; color:#4A4E3E; line-height:1.7; margin-bottom:24px;}
.single-product .woocommerce-product-details__short-description ul{padding-left:20px;}
.single-product form.cart{margin-bottom:22px; display:flex; flex-wrap:nowrap; align-items:center; gap:10px;}
/* "View cart" links injected by the Buy Now add-on — hidden per request;
tagged onto the element via JS (main.js: orgameeCleanupPDPActions). */
.single-product .pdp-hide-viewcart{display:none !important;}
/* The Buy Now button gets moved in next to Add to Cart (main.js) so both
share this row on one line, each taking equal space and shrinking
together rather than wrapping to a second row. */
.single-product form.cart .single_add_to_cart_button,
.single-product form.cart .buy-now-btn{
flex:1 1 0; min-width:0; white-space:nowrap;
text-align:center; padding-left:14px; padding-right:14px;
}
/* Quantity stepper removed from view per request (PC + mobile) — the qty
stays in the DOM (still needed: the bundle-tier tiles in
main.js set its value, and it still submits with the Add to Cart
form) but is hidden so no number box shows on the page. */
.single-product form.cart .quantity{display:none !important;}
@media(max-width:480px){
.single-product form.cart .single_add_to_cart_button,
.single-product form.cart .buy-now-btn{
font-size:12px; padding-left:6px !important; padding-right:6px !important;
letter-spacing:.01em; white-space:normal; line-height:1.25;
}
}
@media(max-width:400px){
.single-product form.cart{flex-wrap:wrap;}
.single-product form.cart .single_add_to_cart_button,
.single-product form.cart .buy-now-btn{flex:1 1 0;}
}
.single-product .quantity input.qty{
width:70px; padding:13px 12px; border-radius:12px; border:1px solid var(--line); text-align:center;
font-family:inherit; font-size:14px; background:var(--card);
}
.single-product .single_add_to_cart_button{
background:var(--ink) !important; color:#fff !important; border-radius:12px !important; padding:14px 34px !important;
font-weight:600 !important; font-size:14.5px !important; border:none !important; letter-spacing:.01em;
}
.single-product .single_add_to_cart_button:hover{background:var(--brick-dark) !important;}
.single-product table.variations{margin-bottom:6px; width:100%;}
.single-product table.variations td{padding:6px 0;}
.single-product table.variations select{
padding:11px 14px; border-radius:10px; border:1px solid var(--line); font-family:inherit; font-size:13.5px; background:var(--card);
}
.single-product .product_meta{font-size:12.5px; color:#8A8272; margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
.single-product .product_meta > span{display:block; margin-bottom:4px;}
@media(max-width:700px){
.single-product .pdp-white-card{padding:22px 18px 16px; margin:14px auto 24px; column-gap:24px; row-gap:0; border-radius:18px;}
.pdp-gallery-col{flex-basis:100%; max-width:100%;}
.single-product .summary{flex-basis:100%;}
.single-product .product_title{font-size:24px;}
}
/* ===== PDP benefit grid + pincode checker (below Add to Cart) ===== */
.pdp-benefit-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-bottom:22px;}
.pdp-benefit-item{display:flex; align-items:flex-start; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink);}
.pdp-benefit-ic{color:var(--sage); flex-shrink:0; font-size:14px; line-height:1.4;}
@media(max-width:480px){.pdp-benefit-grid{grid-template-columns:1fr;}}
/* Sticky mobile "Add to Cart" bar — shown only on phones, only on single
product pages, once you've scrolled past the main Add to Cart button
(see assets/js/main.js — uses IntersectionObserver so it's never visible
at the same time as the real button). */
.mobile-sticky-cart{
display:none; position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--card);
border-top:1px solid var(--line); padding:10px 16px; align-items:center; gap:12px;
box-shadow:0 -8px 20px rgba(38,42,31,.1); pointer-events:none;
}
.mobile-sticky-cart.show{display:flex; pointer-events:auto;}
.mobile-sticky-cart img{width:44px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0;}
.mobile-sticky-cart-info{flex:1; min-width:0;}
.mobile-sticky-cart-info .n{font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mobile-sticky-cart-info .p{font-size:13.5px; font-weight:700; color:var(--brick);}
.mobile-sticky-cart button{
flex-shrink:0; background:var(--ink); color:#fff; padding:11px 20px; border-radius:11px; font-size:13px; font-weight:600;
}
.mobile-sticky-cart button:disabled{opacity:.6; pointer-events:none;}
@media(min-width:701px){.mobile-sticky-cart{display:none !important;}}
/* ===== PDP trust badge row (COD / Returns / Shipping / Secure) ===== */
/* ===== PDP EXTRAS: banner / social proof / stock / bundles / shipping / gallery ===== */
/* 1) Top banner */
.pdp-top-banner{
display:flex; align-items:center; justify-content:space-between; gap:10px;
background:var(--cream-2); border-radius:12px; padding:12px 16px; margin-bottom:16px;
font-size:13px; font-weight:600; color:var(--ink);
}
.pdp-top-banner strong{color:var(--brick);}
.pdp-top-banner.copied .pdp-top-banner-copy{background:var(--sage); border-color:var(--sage);}
.pdp-top-banner.copied .pdp-top-banner-copy svg{stroke:#fff;}
/* 2) Social proof badge */
.pdp-social-proof{display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:14px;}
.pdp-social-proof-badge{
display:inline-block; font-size:12.5px; font-weight:600; color:var(--moss);
background:var(--cream-2); padding:6px 12px; border-radius:999px;
}
.pdp-social-proof-rating{display:flex; align-items:center; gap:6px; font-size:12.5px; color:#6b6f5c;}
.pdp-social-proof-rating .star-rating{font-size:13px;}
/* 3) Stock urgency */
.pdp-stock-urgency{
display:inline-block; background:#FBEAE7; color:var(--brick-dark); font-weight:700;
font-size:12.5px; padding:7px 12px; border-radius:8px; margin-bottom:14px;
}
/* 4) Bundle pricing tiers — full bordered card per tile (image, "Flat X%
Off" tag, title, price, and an editable "Save ₹___ with coupon" line),
matching the reference card style rather than the old bare imgbox. */
.pdp-bundle-tiers{display:flex; gap:12px; margin-bottom:18px; align-items:stretch;}
.pdp-bundle-tier{
flex:1; display:flex; flex-direction:column; text-align:center; cursor:pointer; font-family:inherit;
background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:14px 10px 12px;
text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s;
}
.pdp-bundle-tier.is-selected{border-color:var(--brick); box-shadow:0 0 0 1.5px var(--brick);}
.pdp-bundle-imgbox{
position:relative; display:block; width:100%; aspect-ratio:1/1;
background:var(--cream-2); border-radius:12px; overflow:hidden; margin-bottom:10px;
}
.pdp-bundle-img{width:100%; height:100%; object-fit:contain; padding:12px; box-sizing:border-box;}
.pdp-bundle-flat-tag{
position:absolute; top:8px; left:8px; background:var(--ink); color:#fff; font-size:10px; font-weight:700;
padding:4px 9px; border-radius:7px; white-space:nowrap; z-index:5;
}
.pdp-bundle-info{display:flex; flex-direction:column; align-items:center; gap:2px; flex:1;}
.pdp-bundle-label{font-size:13.5px; font-weight:700; color:var(--ink);}
.pdp-bundle-price{font-size:12px; color:#6b6f5c;}
.pdp-bundle-price del{opacity:.6; margin-left:4px;}
/* Editable "Save ₹___ with coupon" line — margin-top:auto pins it to the
bottom of the card (flex column) so it lines up across tiles even when
one tile's label/price wraps to a different height than its neighbour. */
.pdp-bundle-coupon{
display:block; margin:auto 0 0; width:100%; box-sizing:border-box;
background:var(--cream-2); color:var(--brick-dark); font-size:10.5px; font-weight:700;
padding:5px 8px; border-radius:8px; line-height:1.3; white-space:normal;
}
/* 5) Shipping countdown */
.pdp-ship-countdown{background:var(--cream-2); border-radius:14px; padding:16px 18px; margin-bottom:18px;}
.pdp-ship-countdown-text{font-size:13px; margin:0 0 14px; color:var(--ink);}
.pdp-ship-timer{font-weight:700; color:var(--brick); font-variant-numeric:tabular-nums;}
.pdp-ship-eta{color:var(--sage);}
.pdp-ship-timeline{display:flex; align-items:center; justify-content:space-between;}
.pdp-ship-step{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; text-align:center; color:#6b6f5c; flex:0 0 auto;}
.pdp-ship-ic{font-size:18px;}
.pdp-ship-line{flex:1; height:2px; background:var(--sage); opacity:.4; margin:0 6px; margin-bottom:24px;}
/* 6) Customer photo gallery — kept within its natural column width
(no negative-margin bleed) so it can never extend past the white
card, however wide the product image column beside it happens to be. */
.pdp-ugc-gallery{flex-basis:100%; width:100%; margin:8px 0 0;}
.pdp-ugc-title{font-size:13px; font-weight:700; margin-bottom:10px; color:var(--ink);}
.pdp-ugc-row{display:flex; align-items:flex-start; gap:14px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
.pdp-ugc-row img{width:140px; height:140px; object-fit:cover; object-position:center; border-radius:14px; flex:0 0 140px; display:block;}
@media(max-width:700px){
.pdp-ugc-row img{width:110px; height:110px; flex-basis:110px;}
}
/* Payment methods row */
.pdp-payment-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:4px 0 16px;}
.pdp-payment-label{font-size:11.5px; color:#8a8d78; font-weight:600; margin-right:2px;}
.pdp-payment-badge{
font-size:11px; font-weight:600; color:var(--ink); background:var(--cream-2);
border-radius:6px; padding:5px 10px;
}
@media(max-width:480px){
.pdp-bundle-tiers{gap:8px;}
.pdp-bundle-tier{padding:10px 6px 8px; border-radius:14px;}
.pdp-bundle-flat-tag{font-size:9px; padding:3px 7px; top:6px; left:6px;}
.pdp-bundle-coupon{font-size:9.5px; padding:4px 6px;}
.pdp-ship-step{font-size:10px;}
}
/* ===== VOUCHER / DISCOUNT CODE CARDS (single product page) =====
Content is set per-product in wp-admin → edit product → "Discount
Vouchers" box (see functions.php: orgamee_voucher_meta_box). */
.pdp-vouchers{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px;}
.pdp-voucher-card{
position:relative; flex:1 1 220px; min-width:200px;
background:var(--cream-2); border:1px dashed var(--sage); border-radius:10px;
padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pdp-voucher-card::before, .pdp-voucher-card::after{
content:""; position:absolute; top:50%; width:14px; height:14px;
background:var(--cream); border-radius:50%; transform:translateY(-50%);
}
.pdp-voucher-card::before{left:-7px;}
.pdp-voucher-card::after{right:-7px;}
.pdp-voucher-text{font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.4;}
.pdp-voucher-code-row{display:flex; align-items:center; gap:6px; margin-top:3px;}
.pdp-voucher-code{font-size:12px; font-weight:700; color:var(--brick); letter-spacing:.02em;}
.pdp-voucher-copy{
flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.pdp-voucher-copy svg{width:13px; height:13px; stroke:var(--ink); fill:none; stroke-width:1.8;}
.pdp-voucher-card.copied .pdp-voucher-copy{background:var(--sage); border-color:var(--sage);}
.pdp-voucher-card.copied .pdp-voucher-copy svg{stroke:#fff;}
@media(max-width:480px){
.pdp-vouchers{flex-direction:column;}
.pdp-voucher-card{flex:0 0 auto; min-width:0; padding:14px 16px;}
}
/* ===== Custom Ingredients/How-to-Use tab lists ===== */
.orgamee-tab-list{padding-left:20px; margin:0;}
.orgamee-tab-list li{margin-bottom:8px; font-size:14.5px; color:#4A4E3E;}
/* ===== Related/Upsell products on single product page — always horizontal, PC + mobile ===== */
.single-product .related.products,
.single-product .upsells.products{
max-width:1140px; margin:10px auto 60px; padding:0 32px;
}
.single-product .related.products > h2,
.single-product .upsells.products > h2{
font-family:var(--font-heading, 'Fraunces'), serif; font-size:24px; font-weight:500; margin-bottom:20px;
}
.single-product .related.products ul.products,
.single-product .upsells.products ul.products{
display:flex !important; flex-wrap:nowrap !important; overflow-x:auto; gap:20px; padding-bottom:10px;
grid-template-columns:none !important;
}
.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product{
flex:0 0 220px; width:220px;
}
@media(max-width:480px){
.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product{
flex:0 0 160px; width:160px;
}
}
/* ===== Shop sidebar: hide default (non-WooCommerce) widgets in case they get
added there by mistake — this area is meant for WooCommerce product filter
widgets only (Filter by Attribute, Filter by Price). ===== */
.shop-sidebar .widget_search,
.shop-sidebar .widget_recent_entries,
.shop-sidebar .widget_recent_comments,
.shop-sidebar .widget_pages,
.shop-sidebar .widget_archive,
.shop-sidebar .widget_categories,
.shop-sidebar .widget_meta{
display:none !important;
}
/* ===== PDP: Why It Works ingredient cards / Real Results / Testimonials ===== */
.pdp-section-head{text-align:center; margin-bottom:32px;}
.pdp-section-head h2{font-size:24px; font-weight:500; margin-bottom:6px;}
.pdp-section-head p{font-size:13px; color:#5A5E4D;}
/* flex-basis/width:100% set directly here (not just relied on via the
".single-product div.product > .pdp-why-works" selector) because this
section's opening hook (orgamee_product_ingredient_cards, priority 5)
actually fires BEFORE the white card wrapper closes (priority 8) — so
in the real DOM this section is nested INSIDE .pdp-white-card, a flex
container, not a direct child of div.product. Without its own width
rule here it was sized by flex shrink-to-fit instead of the full
viewport width, which is what silently broke the ingredient row's
horizontal swipe: the row's overflow-x:auto had no fixed-width
ancestor to scroll within, so it just grew wide enough to fit every
card and the excess spilled past the screen edge (clipped by the
page's overflow-x:hidden) instead of becoming swipeable. Matches the
same fix already used by .pdp-ugc-gallery below, which sits in the
same spot for the same reason and already worked because of this. */
.pdp-why-works{padding:50px 32px; border-top:1px solid var(--line); flex-basis:100%; width:100%;}
.pdp-ingredient-row{
display:flex; flex-wrap:wrap; justify-content:center; gap:24px; max-width:1000px; margin:0 auto;
}
.pdp-ingredient-card{width:150px; text-align:center;}
.pdp-ing-img{aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:var(--cream-2); margin-bottom:12px; display:flex; align-items:center; justify-content:center;}
.pdp-ing-img img{width:100%; height:100%; object-fit:cover;}
.pdp-ing-fallback{font-size:34px;}
.pdp-ingredient-card h4{font-size:14px; font-weight:600; margin-bottom:6px;}
.pdp-ingredient-card p{font-size:12px; color:#5A5E4D; line-height:1.5;}
@media(max-width:600px){
/* Reduce the section's own side/bottom padding on mobile — the ingredient
row already carries its own edge spacing, so the outer 32px/50px was
doubling up as dead blank space around the cards. */
.pdp-why-works{padding:32px 16px 28px !important;}
/* -webkit-overflow-scrolling + touch-action + scroll-snap match the other
working horizontal sliders on this theme (.reel-strip, .pdp-ugc-row).
!important guards these against the base (non-mobile) rule above and
against any plugin/page-builder CSS that also targets a generic
"row" flex layout, since without it a single tie in specificity is
enough to silently put this back into flex-wrap:wrap on some sites. */
.pdp-ingredient-row{
flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch;
justify-content:flex-start !important; gap:14px; padding:2px 4px 10px; margin:0 -4px; max-width:none;
/* pan-x alone told the browser this element ONLY supports horizontal
panning, which blocked page scroll (pan-y) the moment a swipe
started on a card. Allowing both lets the browser pick the axis
from the finger's actual movement — sideways scrolls the row,
up/down passes straight through to the page, same as the other
horizontal strips on this theme that never set touch-action at all. */
touch-action:pan-x pan-y; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
-ms-overflow-style:none; scrollbar-width:none;
}
.pdp-ingredient-row::-webkit-scrollbar{display:none;}
.pdp-ingredient-card{flex:0 0 130px !important; width:130px; scroll-snap-align:start;}
/* Prevent the card image from being picked up as a native "drag/save
image" gesture — on some Android/iOS browsers that swallows the
touch-move that would otherwise scroll the row, making it feel like
the row can't be swiped even though overflow-x:auto is set. */
.pdp-ingredient-card, .pdp-ing-img img{
-webkit-user-drag:none; user-drag:none; -webkit-user-select:none; user-select:none;
}
}
.pdp-results{padding:50px 32px; border-top:1px solid var(--line);}
.pdp-results-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; max-width:1000px; margin:0 auto;}
.pdp-ba-frame{position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden; user-select:none;}
.pdp-ba-before, .pdp-ba-after{position:absolute; inset:0; overflow:hidden;}
.pdp-ba-before img, .pdp-ba-after img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.pdp-ba-after{clip-path:inset(0 50% 0 0);}
.pdp-ba-slider{
position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4;
-webkit-appearance:none; appearance:none; background:transparent;
}
.pdp-ba-frame::after{
content:""; position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; z-index:3;
transform:translateX(-50%); pointer-events:none; box-shadow:0 0 8px rgba(0,0,0,.3);
}
.pdp-ba-label{
position:absolute; top:14px; z-index:3; font-size:11px; font-weight:700; letter-spacing:.05em; color:#fff;
background:rgba(38,42,31,.55); padding:5px 12px; border-radius:999px; pointer-events:none;
}
.pdp-ba-before-label{left:14px;}
.pdp-ba-after-label{right:14px;}
.pdp-stats{display:grid; grid-template-columns:1fr 1fr; gap:22px 18px;}
.pdp-stat-item strong{display:block; font-size:30px; font-weight:700; color:var(--sage); font-family:var(--font-heading, 'Fraunces'), serif;}
.pdp-stat-item span{font-size:12.5px; color:#4A4E3E; line-height:1.4;}
@media(max-width:700px){.pdp-results-grid{grid-template-columns:1fr;}}
.pdp-testimonials{padding:50px 32px; border-top:1px solid var(--line);}
.pdp-testi-row{display:flex; gap:18px; overflow-x:auto; padding-bottom:8px;}
.pdp-testi-card{flex:0 0 260px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px;}
.pdp-testi-top{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.pdp-testi-top img{border-radius:50%;}
.pdp-testi-top strong{display:block; font-size:13.5px;}
.pdp-testi-stars{color:var(--gold); font-size:12px;}
.pdp-testi-card p{font-size:13px; color:#4A4E3E; line-height:1.6; margin-bottom:10px;}
.pdp-testi-verified{font-size:11px; color:var(--sage); font-weight:700;}
/* ===== CART DRAWER ===== */
.overlay{position:fixed; inset:0; background:rgba(38,42,31,.45); z-index:60; opacity:0; pointer-events:none; transition:opacity .25s;}
.overlay.show{opacity:1; pointer-events:auto;}
.drawer{
position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:var(--cream);
z-index:70; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column;
}
.drawer.show{transform:translateX(0);}
/* Makes the drawer's contents fill the drawer's fixed height properly:
ship-progress + Checkout footer stay pinned in place, and only the
middle item list (.drawer-items below) scrolls — a vertical "slider"
for the cart items instead of the whole drawer growing past the
screen and hiding the Checkout button once there are 3+ items. */
.drawer-inner-refresh{flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden;}
.drawer-head{display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid var(--line);}
.drawer-head h3{font-family:var(--font-heading, 'Fraunces'), serif; font-size:19px; margin:0;}
.drawer-close{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--cream-2);}
.ship-progress{padding:16px 24px; border-bottom:1px solid var(--line); flex-shrink:0;}
.ship-progress p{font-size:12.5px; margin-bottom:8px; color:#4A4E3E;}
.bar{height:6px; background:var(--cream-2); border-radius:999px; overflow:hidden;}
.bar-fill{height:100%; background:var(--brick); border-radius:999px; transition:width .3s;}
.drawer-items{flex:1; min-height:0; overflow-y:auto; padding:14px 24px;}
.cart-line{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
.cart-thumb{width:70px; height:70px; border-radius:12px; overflow:hidden; background:linear-gradient(150deg,#EDE6D3,#DCD2B4); flex-shrink:0;}
.cart-thumb img{width:100%; height:100%; object-fit:cover;}
.cart-line-info{flex:1;}
.cart-line-info .n{font-size:13.5px; font-weight:600; margin-bottom:3px;}
.cart-line-info .v{font-size:11.5px; color:#8A8272; margin-bottom:8px;}
.qty-row{display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:999px; width:fit-content;}
.qty-row a, .qty-row span{width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--ink);}
.cart-line-price{text-align:right; font-size:13.5px; font-weight:600; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;}
.remove-btn{font-size:11px; color:#9C9583; text-decoration:underline; cursor:pointer;}
.cart-empty{text-align:center; padding:60px 20px;}
.cart-empty .ic{font-size:44px; margin-bottom:14px;}
.cart-empty p{color:#5A5E4D; font-size:14px; margin-bottom:20px;}
/* ===== CART DRAWER UPSELL STRIP ===== */
.cart-upsell{padding:16px 24px; border-top:1px solid var(--line); background:var(--cream-2);}
.cart-upsell-title{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--moss); margin-bottom:12px;}
.cart-upsell-row{display:flex; flex-direction:column; gap:10px;}
.cart-upsell-item{display:flex; align-items:center; gap:10px; background:var(--card); border-radius:12px; padding:8px; border:1px solid var(--line);}
.cart-upsell-thumb{width:44px; height:44px; border-radius:8px; overflow:hidden; flex-shrink:0; display:block;}
.cart-upsell-thumb img{width:100%; height:100%; object-fit:cover;}
.cart-upsell-info{flex:1; min-width:0;}
.cart-upsell-name{display:block; font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cart-upsell-price{font-size:12px; color:var(--brick); font-weight:700;}
.cart-upsell-add, a.cart-upsell-add{
width:30px !important; height:30px !important; border-radius:50% !important; background:var(--ink) !important; color:#fff !important;
display:flex !important; align-items:center; justify-content:center; font-size:16px !important; font-weight:700; flex-shrink:0; padding:0 !important;
line-height:1 !important;
}
.cart-upsell-add:hover, a.cart-upsell-add:hover{background:var(--brick-dark) !important;}
.drawer-foot{padding:20px 24px 26px; border-top:1px solid var(--line); flex-shrink:0;}
.subtotal-row{display:flex; justify-content:space-between; font-size:15px; font-weight:600; margin-bottom:16px;}
.drawer-foot .btn{width:100%; justify-content:center;}
/* .drawer-coupon-form / .drawer-coupon-input / .drawer-coupon-apply were
already unused (that input was removed from the drawer earlier) and are
kept here only in case a future coupon field is reintroduced.
.drawer-coupon-applied / .drawer-coupon-remove (the "🎟️ ORGA10 applied"
banner) have been removed along with the PHP block that rendered them —
the drawer no longer shows applied coupons at all. */
.drawer-coupon-form{display:flex; gap:8px;}
.drawer-coupon-input{
flex:1; min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:999px;
font-size:13.5px; background:#fff; color:var(--ink);
}
.drawer-coupon-input::placeholder{color:#9A9684;}
.drawer-coupon-apply{
flex-shrink:0; padding:12px 20px; border-radius:999px; border:none; cursor:pointer;
background:var(--ink); color:#fff; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.02em;
}
.drawer-coupon-apply:disabled{opacity:.6; cursor:default;}
/* Buttons rendered via woocommerce_widget_shopping_cart_buttons — either
our own fallback link, or whatever a payment plugin (e.g. Razorpay
Magic Checkout) injects there. The plain "View cart" link WooCommerce
adds by default is hidden since the drawer already IS the cart view. */
.drawer-checkout-buttons{display:flex; flex-direction:column; gap:10px;}
/* View cart (black) vs Checkout (terracotta) — classed by main.js
(orgameeStyleDrawerButtons) since the exact element/markup rendering
these can come from WooCommerce core or a payment plugin (e.g.
Razorpay Magic Checkout) and their class names aren't ours to rely on. */
.drawer-btn-viewcart,
.drawer-btn-checkout{
display:flex !important; align-items:center; justify-content:center;
width:100% !important; box-sizing:border-box; min-height:48px;
border:none !important; padding:14px 28px !important; border-radius:999px !important;
font-weight:600 !important; font-size:15px !important; letter-spacing:.02em;
text-align:center; text-transform:uppercase; text-decoration:none !important;
transition:background .2s ease; cursor:pointer;
}
.drawer-btn-viewcart{display:none !important;}
.drawer-btn-checkout{background:var(--brick) !important; color:#fff !important;}
.drawer-btn-checkout:hover{background:var(--brick-dark) !important;}
/* toast */
.toast{
position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff;
padding:13px 22px; border-radius:999px; font-size:13.5px; font-weight:600; z-index:80; opacity:0; transition:all .25s;
pointer-events:none;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
/* WooCommerce default element resets */
.woocommerce-message, .woocommerce-error, .woocommerce-info{
max-width:1240px; margin:16px auto 0; padding:14px 20px; border-radius:12px; list-style:none; background:var(--cream-2);
}
.star-rating{color:var(--gold);}
/* =======================================================================
SMART CHECKOUT (/checkout/)
Page header, two-column card layout, form fields, active-coupons strip,
order review table, and payment method list. Reuses the theme's own
design tokens (--ink/--cream/--brick/--sage/--line/--card) rather than
inventing a separate palette, so it matches the rest of the site.
======================================================================= */
/* --- Page header (page-checkout.php) --- */
.checkout-shell{max-width:1180px; margin:0 auto; padding:0 24px 60px;}
.checkout-page-header{
display:flex; align-items:center; gap:14px; padding:22px 0 18px; flex-wrap:wrap;
}
.checkout-back-link{
display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--ink);
padding:8px 14px 8px 10px; border-radius:999px; background:var(--card); border:1px solid var(--line);
}
.checkout-back-link:hover{background:var(--cream-2);}
.checkout-back-link svg{stroke:var(--ink);}
.checkout-page-title{font-size:22px; margin:0; flex:1; text-align:center;}
.checkout-lock-badge{
display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--moss);
background:var(--cream-2); border-radius:999px; padding:6px 12px;
}
.checkout-lock-badge svg{stroke:var(--moss);}
@media(max-width:600px){
.checkout-page-title{width:100%; order:3; text-align:left; font-size:19px;}
}
/* --- Single-column flow (same order on desktop + mobile):
1. Delivery Details, 2. Discount + Order Summary, 3. Payment (highlighted
panel inside the Order Summary card — see #payment rules further down). --- */
.orgamee-checkout-flow{max-width:640px; margin:0 auto; display:flex; flex-direction:column;}
.checkout-card{
background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 22px 24px;
margin-bottom:18px; box-shadow:0 2px 14px rgba(38,42,31,.05);
}
.checkout-card-title{font-size:16.5px; margin:0 0 16px; color:var(--ink); font-family:var(--font-heading,'Fraunces'),serif;}
.checkout-card-subtitle{font-size:13.5px; font-weight:700; margin:22px 0 10px; padding-top:18px; border-top:1px dashed var(--line); color:var(--ink);}
.checkout-card-subtitle--first{margin-top:0; padding-top:0; border-top:none;}
/* The "Payment Method" heading sits directly above WooCommerce's own
#payment div (see functions.php), which is styled below as its own
highlighted panel — that pairing is what reads as the distinct
"3. Payment area" while staying inside the same DOM WooCommerce expects. */
.checkout-card-subtitle--payment{margin-bottom:12px;}
/* --- Form fields (billing/delivery) --- */
.orgamee-checkout .form-row{margin:0 0 14px;}
.orgamee-checkout .form-row-first,
.orgamee-checkout .form-row-last{width:48%;}
.orgamee-checkout .form-row-first{float:left; clear:left;}
.orgamee-checkout .form-row-last{float:right; clear:right;}
.orgamee-checkout .form-row-wide{width:100%; clear:both;}
.orgamee-checkout .form-row::after{content:""; display:table; clear:both;}
.orgamee-checkout label{display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.orgamee-checkout label .required{color:var(--brick); text-decoration:none; margin-left:2px;}
.orgamee-checkout label .optional{color:#9a9684; font-weight:500; font-size:11px;}
.orgamee-checkout input.input-text,
.orgamee-checkout select,
.orgamee-checkout textarea{
width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fff;
font-size:14px; font-family:inherit; color:var(--ink); transition:border-color .15s;
}
.orgamee-checkout input.input-text:focus,
.orgamee-checkout select:focus,
.orgamee-checkout textarea:focus{outline:none; border-color:var(--sage);}
.orgamee-checkout .select2-container .select2-selection--single{
height:auto !important; border:1px solid var(--line) !important; border-radius:10px !important; padding:11px 14px !important;
}
.orgamee-checkout .select2-selection__rendered{padding:0 !important; line-height:1.4 !important; color:var(--ink) !important;}
.orgamee-checkout .select2-selection__arrow{height:44px !important;}
/* --- Discount code field + active coupons (functions.php calls both
directly at the top of the Order Summary card — see form-checkout.php).
Built as a plain