/* ==========================================================================
myanas shop: Android-app style grocery UI (mobile first)
Palette comes from design-tokens.php (green, light by default).
========================================================================== */
:root {
--g: var(--primary-color);
--g-dark: var(--primary-hover);
--g-soft: var(--surface-coral-soft);
--card: var(--bg-surface);
--line: var(--border-subtle);
--r: var(--app-radius, 18px);
--nav-h: calc(58px + env(safe-area-inset-bottom, 0px));
/* Product-card / button scale. Phones are the base, bigger screens bump it up a little. */
--cols: 2;
--pc-gap: 10px;
--pc-pad: 10px;
--pc-radius: 14px;
--pc-title: .84rem;
--pc-price: 1.02rem;
--pc-btn-h: 38px;
--pc-btn-fs: .8rem;
--rail-w: 148px;
--btn-py: 10px;
--btn-px: 16px;
--btn-fs: .9rem;
}
@media (min-width: 600px) {
:root { --cols: 3; --pc-gap: 14px; --pc-pad: 12px; --pc-title: .9rem; --pc-price: 1.1rem; --pc-btn-h: 40px; --pc-btn-fs: .85rem; --rail-w: 180px; }
}
@media (min-width: 921px) {
:root { --cols: 4; --pc-gap: 16px; --pc-title: .92rem; --pc-price: 1.15rem; --rail-w: 200px; }
}
@media (min-width: 1200px) {
:root { --cols: 5; --pc-gap: 18px; --rail-w: 214px; }
}
@media (max-width: 359px) {
:root { --pc-gap: 8px; --pc-pad: 8px; --pc-title: .8rem; --pc-btn-fs: .76rem; --rail-w: 138px; }
}
body { -webkit-tap-highlight-color: transparent; }
body.has-app-nav { padding-bottom: var(--nav-h); }
.muted-text { opacity: .65; }
/* ---------- Header tweaks ---------- */
.site-header .icon { position: relative; }
.myanas-cart-count {
position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 999px; background: var(--sale-red, #e5484d); color: #fff;
font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box;
}
.myanas-cart-count.is-empty { display: none; }
/* ---------- Home ---------- */
.home-wrap, .shop-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 16px; box-sizing: border-box; }
.myanas-home > .home-wrap > * + * { margin-block-start: 1.6rem; }
.myanas-main.myanas-home > * { max-width: none; }
.home-notice { background: #fff7e0; color: #5a4300; border-radius: 12px; padding: 10px 14px; font-size: .9rem; }
/* ---------- Product cards (home + shop) ---------- */
ul.products { list-style: none; margin: 0; padding: 0; }
.myanas-shop ul.products, .home-section ul.products.product-grid {
display: grid !important; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--pc-gap);
}
.product-rail {
display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 6px;
}
.product-rail::-webkit-scrollbar { display: none; }
.product-rail li.product { flex: 0 0 156px; scroll-snap-align: start; }
ul.products li.product {
position: relative; float: none !important; width: auto !important; margin: 0 !important; padding: 10px 10px 12px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-sizing: border-box;
display: flex; flex-direction: column; text-align: left;
}
ul.products li.product::before, ul.products::before, ul.products::after { display: none !important; }
.pcard-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 6px; flex: 1; }
ul.products li.product img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; margin: 0 !important; background: var(--g-soft); }
.pcard-title {
margin: 4px 0 0 !important; padding: 0 !important; font-size: .9rem !important; font-weight: 600; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
}
ul.products li.product .price { display: block; margin: 0; padding-right: 44px; color: var(--g-dark); font-weight: 800; font-size: 1rem; }
ul.products li.product .price del { opacity: .5; font-weight: 500; font-size: .8rem; display: block; color: var(--text-primary); }
ul.products li.product .price ins { text-decoration: none; background: none; }
.pbadge {
position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--sale-red, #e5484d); color: #fff;
font-size: .72rem; font-weight: 800; padding: 3px 8px; border-radius: 999px;
}
.pbadge--out { background: #6b7280; }
.pcard-add {
position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%;
background: var(--g); color: #fff !important; font-size: 22px; font-weight: 500; line-height: 1;
display: grid; place-items: center; text-decoration: none !important; box-shadow: 0 4px 10px rgba(31, 154, 71, .35);
transition: transform .15s, background .15s;
}
.pcard-add:active { transform: scale(.92); }
.pcard-add.loading { opacity: .6; pointer-events: none; }
.pcard-add.added { font-size: 0; background: var(--g-dark); }
.pcard-add.added::after { content: "✓"; font-size: 18px; }
ul.products li.product .added_to_cart { display: none !important; }
/* ---------- Shop screens (archive / single / cart / checkout / account) ---------- */
.myanas-shop .shop-wrap { padding-block: 12px 24px; }
.shop-page-title, .woocommerce-products-header__title { font-size: 1.5rem; margin: 6px 0 12px; }
.woocommerce-breadcrumb { font-size: .8rem; opacity: .7; margin-bottom: 8px; }
.woocommerce-result-count { float: none !important; margin: 0 0 8px !important; font-size: .85rem; opacity: .7; }
.woocommerce-ordering { float: none !important; margin: 0 0 14px !important; }
.woocommerce-ordering select, .myanas-shop select, .myanas-shop input[type="text"], .myanas-shop input[type="email"],
.myanas-shop input[type="tel"], .myanas-shop input[type="password"], .myanas-shop input[type="number"],
.myanas-shop textarea, .select2-container--default .select2-selection--single {
background: var(--card); color: var(--text-primary); border: 1px solid var(--line); border-radius: 12px;
padding: 11px 12px; font: inherit; box-sizing: border-box; max-width: 100%;
}
.select2-container--default .select2-selection--single { height: auto; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary); padding: 0; line-height: 1.5; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.myanas-shop input:focus, .myanas-shop select:focus, .myanas-shop textarea:focus { outline: 2px solid var(--g); outline-offset: 1px; }
/* Buttons */
.myanas-shop .button, .myanas-shop button.button, .myanas-shop a.button, .myanas-shop input.button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit {
background: var(--g) !important; color: #fff !important; border: 0; border-radius: 14px; padding: 12px 20px;
font-weight: 700; font-size: .95rem; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background .15s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--g-dark) !important; }
.woocommerce button.button:disabled, .woocommerce button.button.disabled { opacity: .5; }
/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
border: 0 !important; border-radius: 14px !important; background: var(--g-soft) !important; color: var(--text-primary) !important;
padding: 12px 16px 12px 44px !important; margin: 0 0 14px !important; list-style: none;
}
.woocommerce-error { background: rgba(229, 72, 77, .12) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--g) !important; }
.woocommerce-message .button { float: right; margin-left: 10px; padding: 8px 14px; }
/* Single product */
.single-product div.product { display: flex; flex-direction: column; gap: 16px; }
.single-product div.product div.images, .single-product div.product div.summary { float: none !important; width: 100% !important; margin: 0 !important; }
.single-product div.product div.summary, .single-product div.product .entry-summary { box-sizing: border-box; padding-left: 5px !important; padding-right: 5px !important; }
.single-product div.images img { border-radius: var(--r); }
.single-product .product_title { font-size: 1.4rem; margin: 0 0 6px; }
.single-product .summary .price { color: var(--g-dark); font-size: 1.5rem; font-weight: 800; margin: 6px 0 12px; display: block; }
.single-product .summary .price del { opacity: .5; font-size: 1rem; font-weight: 500; margin-right: 6px; }
.single-product .summary .price ins { text-decoration: none; background: none; }
.single-product .woocommerce-product-details__short-description { opacity: .85; margin-bottom: 14px; }
.single-product form.cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.single-product form.cart .single_add_to_cart_button { flex: 1; min-width: 150px; padding: 14px 20px; font-size: 1rem; }
.single-product form.variations_form { display: block; }
.single-product table.variations td, .single-product table.variations th { display: block; padding: 4px 0; }
.single-product .woocommerce-tabs ul.tabs { display: flex; gap: 8px; padding: 0; margin: 0 0 12px; list-style: none; overflow-x: auto; }
.single-product .woocommerce-tabs ul.tabs::before, .single-product .woocommerce-tabs ul.tabs li::before, .single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li { border: 1px solid var(--line) !important; background: var(--card) !important; border-radius: 999px !important; margin: 0 !important; padding: 0 !important; }
.single-product .woocommerce-tabs ul.tabs li a { padding: 8px 16px !important; font-weight: 600; font-size: .88rem; color: var(--text-primary) !important; display: block; }
.single-product .woocommerce-tabs ul.tabs li.active { background: var(--g) !important; border-color: var(--g) !important; }
.single-product .woocommerce-tabs ul.tabs li.active a { color: #fff !important; }
.single-product .related > h2, .single-product .upsells > h2 { font-size: 1.15rem; margin: 18px 0 10px; }
.single-product .woocommerce-tabs { width: 100%; clear: both; float: none; }
.single-product .woocommerce-tabs .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin: 0; }
.single-product .woocommerce-tabs .panel h2:first-child { font-size: 1.1rem; margin-top: 0; }
/* Quantity stepper */
.quantity { display: inline-flex; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.quantity input.qty { width: 46px; border: 0 !important; background: transparent !important; text-align: center; padding: 10px 0 !important; -moz-appearance: textfield; font-weight: 700; }
.quantity input.qty::-webkit-outer-spin-button, .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { width: 40px; height: 44px; border: 0; background: transparent; color: var(--g); font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.qty-btn:active { background: var(--g-soft); }
/* Trust strip */
.trust-strip { list-style: none; margin: 0 -5px 8px; /* cancels summary 5px side padding so strip stays full width */ padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--g-soft); border-radius: 14px; }
.trust-strip li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .74rem; font-weight: 700; text-align: center; }
.trust-strip span { font-size: 1.25rem; }
/* Cart */
.free-ship { background: var(--g-soft); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.free-ship p { margin: 0 0 8px; font-size: .88rem; font-weight: 600; }
.free-ship-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.free-ship-bar span { display: block; height: 100%; background: var(--g); border-radius: 999px; transition: width .4s; }
/* Flat tables everywhere (cart, checkout, order received, account): no rounded outer box, no vertical lines, just a thin line between rows.
Rounded corners come from the card around the table, so nothing looks cut or doubled. */
.woocommerce table.shop_table { border: 0 !important; border-radius: 0 !important; border-collapse: collapse !important; background: transparent; width: 100%; overflow: visible; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent; padding: 12px 6px; vertical-align: middle;
}
.woocommerce table.shop_table thead th { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding-top: 4px; }
.woocommerce table.shop_table thead th { text-align: left; }
.woocommerce table.shop_table > tbody:last-child > tr:last-child > th, .woocommerce table.shop_table > tbody:last-child > tr:last-child > td,
.woocommerce table.shop_table > tfoot > tr:last-child > th, .woocommerce table.shop_table > tfoot > tr:last-child > td { border-bottom: 0 !important; }
.woocommerce table.shop_table tfoot th { text-align: left; font-weight: 600; }
.woocommerce table.shop_table tfoot tr.order-total th, .woocommerce table.shop_table tfoot tr.order-total td, .woocommerce table.shop_table tfoot tr.cart-subtotal + tr th { font-weight: 800; }
.woocommerce-cart-form .product-thumbnail img { width: 64px; border-radius: 12px; }
.woocommerce a.remove { color: var(--sale-red, #e5484d) !important; }
.woocommerce a.remove:hover { background: var(--sale-red, #e5484d) !important; color: #fff !important; }
.cart_totals { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.cart_totals h2 { font-size: 1.1rem; margin-top: 0; }
.wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; padding: 15px 20px !important; font-size: 1.05rem !important; }
.coupon { display: flex; gap: 8px; flex-wrap: wrap; }
.coupon input#coupon_code { flex: 1; min-width: 120px; }
/* Checkout */
.woocommerce-checkout h3, #order_review_heading { font-size: 1.1rem; }
.woocommerce form .form-row { margin-bottom: 12px; }
.woocommerce form .form-row label { font-weight: 600; font-size: .86rem; margin-bottom: 4px; display: block; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { width: 100%; }
#order_review { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
#payment { background: transparent !important; border-radius: 14px; }
#payment ul.payment_methods { border-color: var(--line) !important; }
#payment div.payment_box { background: var(--g-soft) !important; color: var(--text-primary) !important; border-radius: 12px; }
#payment div.payment_box::before { border-bottom-color: var(--g-soft) !important; }
#place_order { width: 100%; padding: 16px 20px !important; font-size: 1.05rem !important; }
/* Account */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.woocommerce-MyAccount-navigation li a {
display: block; white-space: nowrap; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line);
background: var(--card); color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: .88rem;
}
.woocommerce-MyAccount-navigation li.is-active a { background: var(--g); border-color: var(--g); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: 100% !important; }
.woocommerce form.login, .woocommerce form.register { background: var(--card); border: 1px solid var(--line) !important; border-radius: var(--r) !important; }
/* Pagination */
.woocommerce nav.woocommerce-pagination ul { border: 0 !important; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.woocommerce nav.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
border-radius: 12px; min-width: 40px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); color: var(--text-primary);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--g); border-color: var(--g); color: #fff; }
/* ---------- Floating cart bar ---------- */
.cart-bar { display: none; position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(var(--nav-h) + 10px); }
.cart-bar.is-visible { display: block; }
.cart-bar a {
display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--g-dark); color: #fff !important;
text-decoration: none; border-radius: 16px; padding: 13px 18px; font-weight: 700; box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.cart-bar a::after { content: "View cart →"; font-weight: 600; font-size: .85rem; order: 3; opacity: .95; }
.cart-bar a strong { order: 2; margin-left: auto; }
.single-product .cart-bar { display: none !important; }
/* ---------- Bottom nav (Android style) ---------- */
.app-nav {
position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
height: var(--nav-h); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box;
background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(0, 0, 0, .06);
}
.app-nav a, .app-nav button {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0;
color: var(--text-primary); opacity: .62; font: inherit; font-size: .68rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.app-nav a.on { opacity: 1; color: var(--g); }
.app-nav a.on svg { background: var(--g-soft); border-radius: 12px; padding: 4px 14px; width: 52px; height: 30px; box-sizing: border-box; }
.app-nav-ico { position: relative; display: inline-flex; }
.app-nav .myanas-cart-count { top: -6px; right: -8px; }
/* ---------- Footer ---------- */
/* Beats the old generic .site-footer flex rules in site-styles-deferred.css (they use !important on colours). */
.site-footer.shop-footer { display: block; margin: 2.5rem 0 0; padding: 0; border: 0; position: relative; color: #e6f3ea; background: linear-gradient(160deg, #135a31 0%, #0b2f1a 100%) !important; }
.site-footer.shop-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #3ecf6b, #f7c948, #3ecf6b); }
/* Dark mode: footer follows the page tokens instead of staying bright green. */
html[data-theme="dark"] .site-footer.shop-footer { background: linear-gradient(160deg, var(--bg-surface) 0%, var(--bg-deep) 100%) !important; color: var(--text-secondary); border-top: 1px solid var(--border-subtle); }
html[data-theme="dark"] .shop-footer .sf-bottom { background: rgba(0, 0, 0, .28); border-top-color: var(--border-subtle); }
html[data-theme="dark"] .site-footer.shop-footer a.sf-soc { background: #eef7f0; }
.shop-footer .sf-wrap { max-width: 1200px; margin: 0 auto; padding: 44px 16px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px; }
.shop-footer .sf-brand { grid-column: 1 / -1; }
.shop-footer .sf-brand-name { display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: .2px; color: #fff; }
.site-footer.shop-footer .sf-brand p { margin: 8px 0 14px; max-width: 34ch; font-size: .95rem; line-height: 1.55; color: rgba(255, 255, 255, .78) !important; text-align: left; }
.site-footer.shop-footer a.sf-wa { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; background: #25d366; color: #073b1d !important; font-weight: 800; font-size: .9rem; text-decoration: none !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); transition: transform .2s, box-shadow .2s; }
.shop-footer .sf-social { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.site-footer.shop-footer a.sf-soc { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .92); text-decoration: none !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform .2s, box-shadow .2s; }
.site-footer.shop-footer a.sf-soc:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .26); }
.site-footer.shop-footer a.sf-soc svg { width: 18px; height: 18px; display: block; }
.site-footer.shop-footer a.sf-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .32); color: #052d16 !important; }
.shop-footer .sf-title { margin: 0 0 14px; font-size: .78rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #8be8ab; }
.shop-footer .sf-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; justify-content: start; }
.site-footer.shop-footer .sf-links a, .site-footer.shop-footer .footer-nav .footer-menu a { display: inline-flex; align-items: center; min-height: 34px; padding: 2px 0; font-size: .92rem; font-weight: 500; color: rgba(255, 255, 255, .84) !important; text-decoration: none !important; transition: color .2s, transform .2s; }
.site-footer.shop-footer .sf-links a:hover, .site-footer.shop-footer .sf-links a:focus-visible { color: #fff !important; transform: translateX(3px); }
.site-footer.shop-footer .sf-links a.sf-all { margin-top: 4px; color: #8be8ab !important; font-weight: 700; }
.shop-footer .sf-help.footer-nav { display: block; margin: 0; }
.shop-footer .sf-help .footer-menu { display: grid; flex-wrap: nowrap; justify-content: start; gap: 2px; }
.shop-footer .sf-links li { margin: 0; padding: 0; }
.shop-footer .sf-info { grid-column: 1 / -1; }
.shop-footer .sf-info .sf-links { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.shop-footer .sf-shop .sf-links a { text-transform: capitalize; }
.shop-footer .sf-social { margin-top: 20px; }
/* Phones: brand block + social icons centred, icons a little smaller. */
@media (max-width: 599px) {
.shop-footer .sf-brand { text-align: center; }
.site-footer.shop-footer .sf-brand p { margin-left: auto; margin-right: auto; text-align: center; }
.shop-footer .sf-social { justify-content: center; gap: 8px; flex-wrap: wrap; }
.site-footer.shop-footer a.sf-soc { width: 30px; height: 30px; }
.site-footer.shop-footer a.sf-soc svg { width: 16px; height: 16px; }
}
.site-footer.shop-footer .sf-help.footer-nav, .site-footer.shop-footer .footer-copyright { order: 0; }
.shop-footer .sf-bottom { border-top: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .18); }
.shop-footer .sf-bottom-in { max-width: 1200px; margin: 0 auto; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.site-footer.shop-footer .footer-copyright { margin: 0; max-width: none; font-size: .82rem; opacity: 1; text-align: left; color: rgba(255, 255, 255, .72) !important; }
.site-footer.shop-footer a.sf-top { font-size: .82rem; font-weight: 700; text-decoration: none !important; color: #8be8ab !important; }
.site-footer.shop-footer a.sf-top:hover { color: #fff !important; }
/* ---------- Tablet / desktop ---------- */
@media (min-width: 600px) {
}
@media (min-width: 921px) {
body.has-app-nav { padding-bottom: 0; }
.app-nav { display: none; }
.single-product div.product { flex-direction: row; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; }
.single-product div.product div.images { width: calc(48% - 20px) !important; }
.single-product div.product div.summary { width: calc(52% - 20px) !important; }
/* Tabs, related and upsells always sit on their own full-width row BELOW image + summary */
.single-product div.product .woocommerce-tabs,
.single-product div.product section.related,
.single-product div.product section.upsells,
.single-product div.product .up-sells,
.single-product div.product .related.products { flex: 0 0 100%; width: 100% !important; max-width: 100%; float: none !important; clear: both; }
.woocommerce-account .woocommerce-MyAccount-navigation { width: 24% !important; float: left !important; }
.woocommerce-account .woocommerce-MyAccount-content { width: 72% !important; float: right !important; }
.woocommerce-MyAccount-navigation ul { flex-direction: column; }
.shop-footer .sf-wrap { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px 40px; padding: 56px 16px 36px; }
.shop-footer .sf-brand, .shop-footer .sf-info { grid-column: auto; }
.shop-footer .sf-info .sf-links { grid-template-columns: 1fr; }
.cart-bar { left: auto; right: 24px; bottom: 24px; width: 320px; }
}
/* Mobile: sticky add-to-cart on single product (simple products) */
@media (max-width: 920px) {
.single-product form.cart:not(.variations_form):not(.grouped_form) {
position: fixed; z-index: 65; left: 0; right: 0; bottom: var(--nav-h); margin: 0 !important; padding: 10px 14px;
flex-wrap: nowrap; background: var(--card); border-top: 1px solid var(--line);
}
.single-product form.cart:not(.variations_form):not(.grouped_form) .single_add_to_cart_button { min-width: 0; }
.single-product .summary { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
.slides { scroll-behavior: auto; }
* { transition: none !important; }
.slider.is-enhanced .slide-body > *, .slider.is-enhanced .slide-deco { opacity: 1 !important; transform: none !important; }
.slider.is-enhanced .slide.is-active .slide-deco, .slider.is-enhanced .slide.is-active .slide-img, .slider.is-playing .dots button.on::after { animation: none !important; }
}
/* ==========================================================================
Shop archive redesign: banner header, category chips, toolbar, cards
========================================================================== */
.woocommerce-products-header {
background: linear-gradient(135deg, #17793a, #1f9a47 65%, #3ecf6b); color: #fff;
border-radius: 20px; padding: 18px 20px; margin: 4px 0 14px;
}
.woocommerce-products-header .woocommerce-products-header__title, .woocommerce-products-header h1 { color: #fff; margin: 0; font-size: 1.4rem; }
.woocommerce-products-header .term-description { margin-top: 4px; font-size: .88rem; opacity: .92; }
.woocommerce-products-header .term-description p { margin: 0; }
.shop-chips {
position: sticky; top: 56px; z-index: 20; margin: 0 -16px 12px; padding: 8px 16px; background: var(--bg-deep);
}
.shop-chips ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.shop-chips ul::-webkit-scrollbar { display: none; }
.shop-chips a {
display: block; white-space: nowrap; padding: 8px 16px; border-radius: 999px; font-size: .86rem; font-weight: 700;
background: var(--card); border: 1px solid var(--line); color: var(--text-primary); text-decoration: none;
}
.shop-chips a.on { background: var(--g); border-color: var(--g); color: #fff; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.shop-toolbar .woocommerce-result-count { margin: 0 !important; font-size: .82rem; opacity: .7; }
.shop-toolbar .woocommerce-ordering { margin: 0 !important; }
.shop-toolbar .woocommerce-ordering select { border-radius: 999px; padding: 9px 14px; font-size: .85rem; font-weight: 600; max-width: 190px; }
ul.products li.product { transition: box-shadow .2s, transform .2s; }
@media (hover: hover) {
ul.products li.product:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
ul.products li.product:hover img { transform: scale(1.04); }
}
ul.products li.product .pcard-link { overflow: hidden; }
ul.products li.product img { transition: transform .35s; }
ul.products li.product .price { margin-top: auto; padding-top: 4px; }
/* Sub-category tiles (when Woo is set to show categories on the shop page) */
ul.products li.product-category { padding: 12px 10px; align-items: center; text-align: center; }
ul.products li.product-category a { display: block; color: var(--text-primary); text-decoration: none; }
ul.products li.product-category img { aspect-ratio: 1; }
ul.products li.product-category .woocommerce-loop-category__title { font-size: .92rem !important; margin: 8px 0 0 !important; }
ul.products li.product-category mark { background: none; color: inherit; opacity: .55; font-weight: 500; }
.woocommerce-pagination { margin-top: 22px; }
.woocommerce-info.woocommerce-no-products-found { text-align: center; padding: 28px 16px !important; }
@media (min-width: 921px) {
.shop-chips { top: 60px; margin-inline: 0; padding-inline: 0; }
.woocommerce-products-header { padding: 26px 30px; }
.woocommerce-products-header .woocommerce-products-header__title { font-size: 1.8rem; }
}
/* ==========================================================================
Product card v3 (compact + responsive). Everything scales from the
--pc-* / --cols tokens in :root above, so one place controls all devices.
========================================================================== */
ul.products li.product {
padding: 0 !important; border-radius: var(--pc-radius); background: var(--card); min-width: 0; overflow: hidden;
}
ul.products li.product .pcard-link { gap: 0; }
ul.products li.product img { border-radius: 0 !important; aspect-ratio: 1 / 1; }
.pcard-title {
padding: 8px var(--pc-pad) 0 !important; margin: 0 !important;
font-size: var(--pc-title) !important; line-height: 1.3; font-weight: 600;
min-height: calc(2.6em + 8px); overflow-wrap: anywhere;
}
.pcard-price { padding: 4px var(--pc-pad) 0; min-width: 0; }
.pcard-price .now,
.pcard-price .now .price,
ul.products li.product .pcard-price .price {
padding: 0 !important; margin: 0; display: block; color: var(--text-primary);
font-size: var(--pc-price); font-weight: 800; line-height: 1.25;
}
.pcard-price .woocommerce-Price-amount { font-weight: 800; }
.pcard-price .was-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; font-size: .74rem; min-height: 1.25em; }
.pcard-price del { opacity: .55; display: inline !important; font-weight: 500; font-size: .74rem !important; color: var(--text-primary); }
.pcard-price .save { color: #0a9d5b; font-weight: 700; }
.pcard-actions { display: flex; gap: 6px; padding: 8px var(--pc-pad) var(--pc-pad); margin-top: auto; }
.pcard-add, .pcard-buy {
position: static !important; width: auto !important; height: var(--pc-btn-h) !important; flex: 1 1 0; min-width: 0;
padding: 0 6px; border-radius: 10px !important; display: flex !important; align-items: center; justify-content: center; gap: 5px;
font-size: var(--pc-btn-fs) !important; font-weight: 700 !important; line-height: 1;
text-decoration: none !important; box-shadow: none !important; transition: background .15s, transform .15s; white-space: nowrap;
}
.pcard-add svg, .pcard-buy svg { width: 15px; height: 15px; flex: none; }
.pcard-add { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border: 1px solid var(--line); }
.pcard-buy { background: var(--text-primary); color: var(--bg-deep) !important; border: 1px solid var(--text-primary); }
.pcard-add:active, .pcard-buy:active { transform: scale(.97); }
.pcard-wide { flex-basis: 100%; }
.pcard-add.loading { opacity: .6; pointer-events: none; }
.pcard-add.added { font-size: var(--pc-btn-fs) !important; background: var(--g-soft) !important; border-color: var(--g); color: var(--g-dark) !important; }
.pcard-add.added::after { content: "✓"; margin-left: 2px; }
/* Badges: dark discount pill + pink FLASH pill (stacked, top-left of the image) */
.pbadge { top: 8px; left: 8px; background: #1a1a1a; color: #fff; font-size: .68rem; padding: 3px 8px; line-height: 1.3; }
.pbadge--flash { top: 32px; background: #f7b3b6; color: #d1343a; font-weight: 800; letter-spacing: .02em; }
.pbadge--out { background: #6b7280; }
/* Narrow cards (phones): icons off so both buttons always fit */
@media (max-width: 599px) {
.pcard-add svg, .pcard-buy svg { display: none; }
}
/* Grid + rail use the same tokens everywhere (shop, category, search, home, related) */
body.woocommerce ul.products:not(.product-rail), body.woocommerce-page ul.products:not(.product-rail),
.myanas-shop ul.products:not(.product-rail), .home-section ul.products.product-grid {
display: grid !important; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--pc-gap);
}
.related ul.products, .upsells ul.products, .cross-sells ul.products { --cols: 2; }
@media (min-width: 600px) { .related ul.products, .upsells ul.products, .cross-sells ul.products { --cols: 3; } }
@media (min-width: 921px) { .related ul.products, .upsells ul.products, .cross-sells ul.products { --cols: 4; } }
.product-rail { gap: var(--pc-gap); }
/* Rail cards = exactly one grid-card wide: (row width - gaps) / cols, same tokens as the grids */
.product-rail { --rail-extra: 0px; }
.product-rail li.product { flex: 0 0 calc((100% + var(--rail-extra) - (var(--cols) - 1) * var(--pc-gap)) / var(--cols)); }
/* Flash panel: padding*2 + 2px border, per breakpoint (matches .home-section--flash padding below), so cards stay grid-size */
.home-section--flash .product-rail { --rail-extra: 26px; }
@media (min-width: 600px) { .home-section--flash .product-rail { --rail-extra: 34px; } }
@media (min-width: 921px) { .home-section--flash .product-rail { --rail-extra: 46px; } }
/* Rails scroll, so overflow clips the hover lift + shadow; give them vertical room and pull it back with a negative margin */
.product-rail { padding-block: 6px 12px; margin-block-start: -6px; margin-block-end: -6px; }
.myanas-shop > .shop-wrap { max-width: 1200px; margin-inline: auto; padding: 12px 16px 24px; box-sizing: border-box; }
@media (max-width: 359px) {
.home-wrap, .shop-wrap, .myanas-shop > .shop-wrap { padding-inline: 0; }
/* wrapper padding is 0 now, so the chips no longer need a negative bleed; keep a small inset so the first/last chip isn't flush with the screen edge */
.shop-chips { margin-inline: 0; padding-inline: 10px; }
}
/* ==========================================================================
Compact pass: type scale, buttons, inputs and chrome for phones -> desktop
========================================================================== */
.myanas-shop, .myanas-home { font-size: .95rem; line-height: 1.5; }
@media (min-width: 921px) { .myanas-shop, .myanas-home { font-size: 1rem; } }
/* Woo buttons (cart, checkout, account, notices) */
.myanas-shop .button, .myanas-shop button.button, .myanas-shop a.button, .myanas-shop input.button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit {
padding: var(--btn-py) var(--btn-px); font-size: var(--btn-fs); border-radius: 12px; min-height: 40px;
display: inline-flex; align-items: center; justify-content: center;
}
.woocommerce-message .button { padding: 7px 12px; min-height: 0; font-size: .82rem; }
.single-product form.cart .single_add_to_cart_button { padding: 12px 18px; font-size: .95rem; min-height: 44px; }
.wc-proceed-to-checkout a.checkout-button { padding: 13px 18px !important; font-size: 1rem !important; }
#place_order { padding: 14px 18px !important; font-size: 1rem !important; }
/* Inputs, selects, stepper */
.woocommerce-ordering select, .myanas-shop select, .myanas-shop input[type="text"], .myanas-shop input[type="email"],
.myanas-shop input[type="tel"], .myanas-shop input[type="password"], .myanas-shop input[type="number"],
.myanas-shop textarea, .select2-container--default .select2-selection--single { padding: 9px 12px; font-size: .92rem; border-radius: 10px; }
.quantity { border-radius: 12px; }
.quantity input.qty { width: 40px; padding: 8px 0 !important; }
.qty-btn { width: 36px; height: 40px; }
/* Page chrome */
.shop-page-title, .woocommerce-products-header__title { font-size: 1.3rem; }
.woocommerce-products-header { padding: 14px 16px; border-radius: 16px; }
.woocommerce-products-header .woocommerce-products-header__title, .woocommerce-products-header h1 { font-size: 1.2rem; }
.single-product .product_title { font-size: 1.25rem; }
.single-product .summary .price { font-size: 1.35rem; }
.shop-chips a, .woocommerce-MyAccount-navigation li a { padding: 7px 14px; font-size: .82rem; }
.shop-toolbar .woocommerce-ordering select { padding: 7px 12px; font-size: .8rem; }
/* Floating cart bar, sticky add-to-cart, bottom nav */
.cart-bar a { padding: 10px 14px; border-radius: 14px; font-size: .88rem; }
.app-nav a, .app-nav button { font-size: .64rem; gap: 2px; }
.app-nav a.on svg { width: 48px; height: 28px; padding: 4px 12px; }
@media (max-width: 920px) {
.single-product form.cart:not(.variations_form):not(.grouped_form) { padding: 8px 12px; gap: 10px; }
.single-product .summary { padding-bottom: 68px; }
}
@media (min-width: 600px) {
.shop-page-title, .woocommerce-products-header__title { font-size: 1.45rem; }
}
@media (min-width: 921px) {
.woocommerce-products-header { padding: 20px 26px; }
.woocommerce-products-header .woocommerce-products-header__title { font-size: 1.6rem; }
.single-product .product_title { font-size: 1.6rem; }
}
/* ==========================================================================
Home v4: hero + quick tiles, round category tiles, trust bar, flash deals,
farm banner, journal. Colours come from tokens so dark mode still works.
========================================================================== */
.myanas-home {
background: none;
}
.myanas-home > .home-wrap { padding-top: 12px; }
/* Section heads */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sec-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.sec-head a {
display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 5px 12px; border-radius: 999px;
background: var(--g-soft); color: var(--text-primary); font-weight: 700; font-size: .76rem; text-decoration: none;
transition: background .15s;
}
.sec-head a::after { content: "→"; font-weight: 700; }
.sec-head a:hover { background: var(--g); color: #fff; }
/* Hero: slider + two quick tiles */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.slider { position: relative; min-width: 0; display: flex; flex-direction: column; }
.slides {
display: flex; flex: 1; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
border-radius: 22px; -webkit-overflow-scrolling: touch;
}
.slides::-webkit-scrollbar { display: none; }
.slide {
position: relative; flex: 0 0 100%; scroll-snap-align: center; min-height: 176px; display: flex; align-items: flex-end;
text-decoration: none; color: #fff; overflow: hidden; isolation: isolate;
background: linear-gradient(135deg, #0f5a2a, #1f9a47 65%, #3ecf6b);
}
.slide-2 { background: linear-gradient(135deg, #b45309, #f59e0b 70%, #fbbf24); }
.slide-3 { background: linear-gradient(135deg, #0b4f57, #2b8a8f 70%, #5cc2bd); }
.slide::before {
content: ""; position: absolute; z-index: -1; right: -60px; top: -70px; width: 240px; height: 240px; border-radius: 50%;
background: rgba(255, 255, 255, .1);
}
.slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 68%); }
.slide-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.slide-deco { position: absolute; z-index: -1; right: 14px; bottom: 6px; font-size: 6.2rem; line-height: 1; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .25)); }
.slide-body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 34px; max-width: 70%; }
.slide-body strong { font-size: clamp(1.1rem, .8rem + 1.2vw, 1.9rem); font-weight: 800; line-height: 1.2; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); }
.slide-body em { font-style: normal; font-size: .82rem; line-height: 1.35; opacity: .95; }
.slide-btn {
margin-top: 4px; background: #fff; color: #15251a; font-weight: 800; font-size: .78rem; padding: 7px 14px; border-radius: 999px;
display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.slide-btn::after { content: "→"; }
.dots { position: absolute; left: 18px; bottom: 12px; display: flex; gap: 6px; margin: 0; z-index: 2; }
.dots button {
position: relative; overflow: hidden; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px;
background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .3s ease, background .3s ease;
}
/* Bigger invisible tap target around each dot. */
.dots button::before { content: ""; position: absolute; inset: -10px -4px; }
.dots button.on { width: 24px; background: rgba(255, 255, 255, .4); }
.dots button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: left; }
.dots button.on::after { transform: scaleX(1); }
.slider.is-playing .dots button.on::after { animation: slider-fill var(--slide-delay, 4500ms) linear forwards; }
.dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes slider-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Prev / next arrows: bottom-right on phones & tablets, centred on the edges on desktop. */
.slider-arrow {
position: absolute; z-index: 2; bottom: 8px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #15251a;
background: rgba(255, 255, 255, .88); box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
-webkit-tap-highlight-color: transparent; transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.slider-arrow svg { width: 16px; height: 16px; transition: transform .2s ease; }
.slider-arrow--next { right: 10px; }
.slider-arrow--prev { right: 48px; }
.slider-arrow:active { transform: scale(.92); }
.slider-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
.slider-arrow:hover { background: #fff; transform: scale(1.08); box-shadow: 0 6px 16px rgba(0, 0, 0, .28); }
.slider-arrow--next:hover svg { transform: translateX(2px); }
.slider-arrow--prev:hover svg { transform: translateX(-2px); }
}
/* Entrance animation: only once JS has taken over (without JS every slide stays fully visible). */
.slider.is-enhanced .slide-body > * { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.slider.is-enhanced .slide.is-active .slide-body > * { opacity: 1; transform: none; }
.slider.is-enhanced .slide.is-active .slide-body > :nth-child(2) { transition-delay: .12s; }
.slider.is-enhanced .slide.is-active .slide-body > :nth-child(3) { transition-delay: .24s; }
.slider.is-enhanced .slide-deco { opacity: 0; transform: translateX(26px) scale(.85); transition: opacity .6s ease .1s, transform .7s cubic-bezier(.2, .8, .2, 1) .1s; }
.slider.is-enhanced .slide.is-active .slide-deco { opacity: 1; transform: none; animation: slide-float 4.5s ease-in-out .8s infinite; }
.slider.is-enhanced .slide.is-active .slide-img { animation: slide-zoom 9s ease-out forwards; }
@keyframes slide-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-3deg); } }
@keyframes slide-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.slide-btn { transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) { .slide:hover .slide-btn { transform: translateX(3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .24); } }
/* Banner-image slides: the image already carries the text + button, so show it whole (no overlay, no zoom, no crop at 12:5). */
.slider .slide--image { min-height: 0; aspect-ratio: 12 / 5; background: var(--card, #13241a); }
.slide--image::before, .slide--image::after { display: none; }
.slide--image .slide-img { z-index: 0; }
.slider.is-enhanced .slide.is-active.slide--image .slide-img, .slider.is-enhanced .slide.slide--image .slide-img { animation: none !important; transform: none; }
.slider--img .dots { left: 50%; bottom: 8px; translate: -50% 0; padding: 5px 8px; background: rgba(0, 0, 0, .35); border-radius: 999px; }
.slider--img .slider-arrow { top: 50%; bottom: auto; margin-top: 0; translate: 0 -50%; width: 32px; height: 32px; background: rgba(255, 255, 255, .8); }
.slider--img .slider-arrow--prev { left: 8px; right: auto; }
.slider--img .slider-arrow--next { right: 8px; left: auto; }
@media (min-width: 921px) {
.slider--img .dots { bottom: 14px; }
.slider--img .slider-arrow { width: 42px; height: 42px; }
.slider--img .slider-arrow--prev { left: 12px; }
.slider--img .slider-arrow--next { right: 12px; }
}
.hero-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile {
display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 18px; text-decoration: none;
color: var(--text-primary); background: var(--card); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s;
}
.tile-ico { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; background: var(--g-soft); }
.tile-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tile b { font-size: .8rem; line-height: 1.25; }
.tile small { font-size: .7rem; line-height: 1.3; opacity: .72; }
.tile--dark { background: linear-gradient(135deg, #0f5a2a, #1f9a47); border-color: transparent; color: #fff; }
.tile--dark .tile-ico { background: rgba(255, 255, 255, .2); }
.tile--dark small { opacity: .85; }
@media (hover: hover) { .tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } }
/* Categories: round icons that scroll on phones, tile grid on desktop */
.cat-row { list-style: none; margin: 0; padding: 2px 0 4px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.cat-row::-webkit-scrollbar { display: none; }
.cat-row li { flex: 0 0 72px; scroll-snap-align: start; }
.cat-row a { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--text-primary); }
.cat-ico {
width: 62px; height: 62px; border-radius: 50%; background: var(--g-soft); display: grid; place-items: center; overflow: hidden;
border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); transition: transform .2s;
}
.cat-row li:nth-child(6n+2) .cat-ico { background: rgba(245, 158, 11, .18); }
.cat-row li:nth-child(6n+3) .cat-ico { background: rgba(239, 68, 68, .13); }
.cat-row li:nth-child(6n+4) .cat-ico { background: rgba(59, 130, 246, .14); }
.cat-row li:nth-child(6n+5) .cat-ico { background: rgba(168, 85, 247, .14); }
.cat-row li:nth-child(6n+6) .cat-ico { background: rgba(20, 184, 166, .16); }
.cat-ico img { width: 100%; height: 100%; object-fit: cover; }
.cat-ico b { font-size: 1.65rem; font-weight: 400; line-height: 1; }
.cat-name { font-size: .73rem; font-weight: 700; text-align: center; line-height: 1.25; overflow-wrap: anywhere; }
@media (hover: hover) { .cat-row a:hover .cat-ico { transform: scale(1.07); } }
/* Trust bar */
.promise-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.promise-row li { display: flex; align-items: center; gap: 9px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 9px 11px; }
.promise-row span { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; background: var(--g-soft); }
.promise-row b { font-size: .76rem; line-height: 1.25; }
/* Flash deals get their own warm panel */
.home-section--flash {
padding: 14px 12px 10px; border-radius: 22px; border: 1px solid rgba(255, 107, 111, .24);
background: linear-gradient(135deg, rgba(255, 107, 111, .15), rgba(245, 158, 11, .13));
}
.home-section--flash .sec-head { padding-inline: 2px; }
.home-section--flash .sec-head a { background: rgba(255, 107, 111, .18); }
/* Home grids: always end on a full row (query returns 10) */
.home-section ul.product-grid li.product:nth-child(n+9) { display: none; }
/* Farm banner */
.farm-banner {
position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
padding: 20px 18px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #0b4a22, #1f9a47 70%, #3ecf6b);
}
.farm-banner::before, .farm-banner::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.farm-banner::before { width: 220px; height: 220px; right: -70px; top: -90px; }
.farm-banner::after { width: 140px; height: 140px; right: 60px; bottom: -80px; }
.farm-eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.farm-banner strong { display: block; font-size: 1.2rem; line-height: 1.25; margin: 3px 0 5px; }
.farm-banner p { margin: 0; font-size: .86rem; line-height: 1.5; opacity: .93; max-width: 46ch; }
.wa-btn {
flex: none; background: #fff; color: #0f5a2a !important; font-weight: 800; padding: 10px 20px; border-radius: 999px;
text-decoration: none; font-size: .86rem; box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
/* Journal */
.journal-row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 4px; }
.journal-row::-webkit-scrollbar { display: none; }
.jcard {
flex: 0 0 76%; max-width: 300px; scroll-snap-align: start; background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius, 14px); overflow: hidden; text-decoration: none; color: var(--text-primary); transition: transform .2s, box-shadow .2s;
}
.jcard img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; display: block; border-radius: 0; }
.jcard-body { display: flex; flex-direction: column; gap: 5px; padding: 11px 13px 13px; }
.jcard-body strong { font-size: .9rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jcard-body time { font-size: .74rem; opacity: .6; }
@media (hover: hover) { .jcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); } }
/* Tiny phones */
@media (max-width: 359px) {
.tile { padding: 8px 9px; gap: 7px; } .tile-ico { width: 30px; height: 30px; font-size: 1rem; }
.slide-deco { font-size: 4.6rem; } .slide-body { max-width: 78%; }
}
/* >= 600px: tablets / large phones */
@media (min-width: 600px) {
.myanas-home > .home-wrap > * + * { margin-block-start: 1.9rem; }
.sec-head h2 { font-size: 1.25rem; }
.slide { min-height: 230px; }
.slide-body { padding: 22px 26px 40px; gap: 8px; }
.slide-body em { font-size: .95rem; }
.slide-btn { font-size: .85rem; padding: 9px 18px; }
.slide-deco { font-size: 8.5rem; right: 28px; }
.dots { left: 26px; bottom: 16px; }
.promise-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.promise-row li { padding: 11px 13px; }
.promise-row b { font-size: .82rem; }
.cat-row { gap: 14px; }
.cat-row li { flex-basis: 84px; }
.cat-ico { width: 72px; height: 72px; }
.cat-ico b { font-size: 1.95rem; }
.cat-name { font-size: .8rem; }
.home-section ul.product-grid li.product:nth-child(n+9) { display: flex; }
.home-section ul.product-grid li.product:nth-child(n+10) { display: none; }
.home-section--flash { padding: 18px 16px 12px; }
.farm-banner { flex-direction: row; align-items: center; justify-content: space-between; padding: 26px 30px; }
.farm-banner strong { font-size: 1.5rem; }
.jcard { flex-basis: 260px; }
}
/* >= 921px: laptops / desktops */
@media (min-width: 921px) {
.myanas-home > .home-wrap { padding-top: 16px; }
.myanas-home > .home-wrap > * + * { margin-block-start: 2.4rem; }
.hero { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
.slides { border-radius: 26px; }
.slide { min-height: 340px; }
.slide-body { padding: 36px 44px 56px 64px; max-width: 62%; gap: 10px; }
.slide-body em { font-size: 1.05rem; }
.slide-btn { margin-top: 8px; font-size: .92rem; padding: 11px 22px; }
.slide-deco { font-size: 12rem; right: 48px; bottom: 20px; }
.dots { left: 64px; bottom: 24px; }
.slider-arrow { top: 50%; bottom: auto; width: 42px; height: 42px; margin-top: -21px; }
.slider-arrow svg { width: 20px; height: 20px; }
.slider-arrow--prev { left: 12px; right: auto; }
.slider-arrow--next { right: 12px; }
.hero-side { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.tile { padding: 16px 18px; gap: 14px; border-radius: 22px; }
.tile-ico { width: 52px; height: 52px; font-size: 1.6rem; border-radius: 16px; }
.tile b { font-size: 1rem; }
.tile small { font-size: .82rem; }
.sec-head { margin-bottom: 16px; }
.sec-head h2 { font-size: 1.5rem; }
.sec-head a { font-size: .86rem; padding: 7px 16px; }
.cat-row { flex-wrap: wrap; overflow: visible; gap: 16px; }
.cat-row li { flex: 0 0 calc((100% - 5 * 16px) / 6); }
.cat-row a { padding: 16px 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.cat-row a:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--g); }
.cat-ico { width: 76px; height: 76px; }
.cat-name { font-size: .88rem; }
.promise-row li { padding: 14px 16px; gap: 12px; border-radius: 18px; }
.promise-row span { width: 42px; height: 42px; font-size: 1.25rem; }
.promise-row b { font-size: .92rem; }
.home-section--flash { padding: 22px 22px 14px; border-radius: 28px; }
.home-section ul.product-grid li.product:nth-child(n+9) { display: none; }
.farm-banner { padding: 40px 48px; border-radius: 30px; }
.farm-banner strong { font-size: 1.9rem; }
.farm-banner p { font-size: 1rem; }
.wa-btn { padding: 13px 28px; font-size: .95rem; }
.journal-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; overflow: visible; }
.jcard { flex: none; max-width: none; border-radius: var(--radius, 14px); }
.jcard-body { padding: 14px 18px 18px; }
.jcard-body strong { font-size: 1.02rem; }
}
@media (min-width: 1200px) {
.home-section ul.product-grid li.product:nth-child(n+9) { display: flex; }
}
/* ==========================================================================
Product details page: spacing pass (kept last so it wins over older rules)
========================================================================== */
.single-product div.product { position: relative; }
.single-product div.product > * { min-width: 0; }
/* Sale badge: a pill inside the image corner instead of Woo's overhanging circle */
.single-product span.onsale {
position: absolute; top: 10px; left: 10px; z-index: 3; margin: 0; min-width: 0; min-height: 0; padding: 3px 10px;
border-radius: 999px; background: var(--sale-red, #e5484d); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.3;
}
/* Gallery thumbnails: even 4-up grid with a steady gap */
.single-product .woocommerce-product-gallery__wrapper { margin: 0; }
.single-product .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; }
.single-product .flex-control-thumbs li { float: none; width: auto; margin: 0; padding: 0; }
.single-product .flex-control-thumbs img { display: block; width: 100%; border-radius: 10px; opacity: .6; cursor: pointer; transition: opacity .15s; }
.single-product .flex-control-thumbs img.flex-active, .single-product .flex-control-thumbs img:hover { opacity: 1; }
/* Summary column rhythm */
.single-product .summary > :last-child { margin-bottom: 0; }
.single-product .woocommerce-product-details__short-description p { margin: 0 0 8px; }
.single-product .woocommerce-product-details__short-description > :last-child { margin-bottom: 0; }
.single-product table.variations { margin: 0 0 10px; }
.single-product table.variations label { font-weight: 700; font-size: .88rem; }
.single-product .reset_variations { display: inline-block; margin-top: 6px; font-size: .8rem; }
.single-product .single_variation_wrap .woocommerce-variation-price { margin-bottom: 10px; }
.single-product .variations_form .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.single-product .product_meta { display: grid; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .85rem; }
.single-product .product_meta > span { display: block; }
/* Visually hidden but kept in DOM (SEO + screen readers keep categories/tags/SKU) */
.single-product .product_meta { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
/* Tabs panel */
.single-product .woocommerce-tabs .panel > :last-child { margin-bottom: 0; }
.single-product .woocommerce-tabs .panel h2:first-child { margin-bottom: 10px; }
/* Phones: the add-to-cart bar is fixed, so clear it once at the page bottom (not as a gap inside the summary) */
@media (max-width: 920px) {
.single-product .summary { padding-bottom: 0; }
body.single-product.has-app-nav:has(form.cart:not(.variations_form):not(.grouped_form)) { padding-bottom: calc(var(--nav-h) + 68px); }
}
/* ==========================================================================
Product tabs: Woo's own rules (.woocommerce div.product .woocommerce-tabs ...) are more
specific than the ones above, which zeroed the panel padding and pushed the tab row in.
Prefixing with body.single-product beats them.
========================================================================== */
body.single-product div.product .woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 12px !important; gap: 8px; overflow-x: auto; scrollbar-width: none; }
body.single-product div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
body.single-product div.product .woocommerce-tabs ul.tabs li { flex: none; margin: 0 !important; }
body.single-product div.product .woocommerce-tabs .panel { padding: 20px !important; margin: 0 !important; box-sizing: border-box; overflow-wrap: anywhere; }
body.single-product div.product .woocommerce-tabs .panel > :first-child { margin-top: 0; }
body.single-product div.product .woocommerce-tabs .panel > :last-child { margin-bottom: 0; }
body.single-product div.product .woocommerce-tabs .panel img { max-width: 100%; height: auto; }
/* Phones: smaller tab buttons + slimmer panel padding */
@media (max-width: 599px) {
body.single-product div.product .woocommerce-tabs ul.tabs { gap: 6px; margin-bottom: 10px !important; }
body.single-product div.product .woocommerce-tabs ul.tabs li a { padding: 6px 12px !important; font-size: .76rem; line-height: 1.2; }
body.single-product div.product .woocommerce-tabs .panel { padding: 14px !important; }
}
/* ==========================================================================
Phones (360-599px): tighter padding/gaps so more content fits on screen.
Below 360px the 359px rules above (wrapper padding 0) still apply.
Flash panel padding changed here, so its rail offset is recalculated:
padding-inline 8px * 2 + 2px border = 18px.
========================================================================== */
@media (min-width: 360px) and (max-width: 599px) {
:root { --pc-gap: 8px; --pc-pad: 8px; }
/* Page wrappers */
.home-wrap, .shop-wrap { padding-inline: 10px; }
.myanas-shop > .shop-wrap { padding: 8px 10px 20px; }
.myanas-home > .home-wrap { padding-top: 8px; }
.myanas-home > .home-wrap > * + * { margin-block-start: 1.2rem; }
/* Shop archive: banner header, chips, toolbar */
.woocommerce-products-header { padding: 12px 14px; margin: 2px 0 10px; }
.shop-chips { margin: 0 -10px 8px; padding: 6px 10px; }
.shop-toolbar { margin-bottom: 10px; }
ul.products li.product-category { padding: 8px 6px; }
/* Home sections */
.sec-head { margin-bottom: 8px; }
.hero, .hero-side { gap: 8px; }
.slide-body { padding: 14px 14px 30px; }
.dots { left: 14px; }
.tile { padding: 8px 10px; gap: 8px; }
.promise-row { gap: 6px; }
.promise-row li { padding: 8px 9px; gap: 7px; }
.cat-row { gap: 8px; }
.home-section--flash { padding: 10px 8px 8px; }
.home-section--flash .product-rail { --rail-extra: 18px; }
.farm-banner { padding: 16px 14px; gap: 10px; }
.journal-row { gap: 10px; }
.jcard-body { padding: 9px 11px 11px; }
/* Cart / checkout / product page */
.single-product div.product { gap: 12px; }
.cart_totals, #order_review { padding: 12px; }
.free-ship { padding: 10px 12px; margin-bottom: 10px; }
.trust-strip { padding: 10px 8px; gap: 6px; }
/* Footer */
.shop-footer .sf-wrap { padding: 36px 14px 22px; }
}
/* Recipes and tips: the row auto-scrolls on phones/tablets (shop.js). 6 posts are queried so there is something to scroll;
the desktop grid has 3 columns, so only the first 3 show there. */
.journal-row { scroll-snap-type: none; scroll-behavior: auto; overscroll-behavior-x: contain; }
.jcard { scroll-snap-align: none; }
@media (min-width: 921px) { .journal-row [data-clone] { display: none; } }
@media (min-width: 921px) { .jcard:nth-child(n+4) { display: none; } }
/* Reviews tab: hide the repeated "Reviews" heading while there are no reviews yet.
Once reviews exist the heading reads "2 reviews for ..." and stays visible. */
body.single-product #reviews #comments:not(:has(.commentlist)) > .woocommerce-Reviews-title { display: none; }
/* ==========================================================================
Single product page on phones (<= 599px): tighter wrapper, gaps and tab panels.
body.single-product prefix keeps this ahead of the generic wrapper rules above,
including the 359px "padding-inline: 0" one, so product text never touches the screen edge.
========================================================================== */
@media (max-width: 599px) {
body.single-product .myanas-shop > .shop-wrap { padding: 6px 10px 16px; }
body.single-product .woocommerce-breadcrumb { margin: 0 0 8px; font-size: .78rem; line-height: 1.4; }
body.single-product div.product { gap: 10px; }
.single-product .product_title { margin: 0 0 4px; }
.single-product .summary .price { margin: 4px 0 8px; }
.single-product .woocommerce-product-details__short-description { margin-bottom: 10px; }
.single-product form.cart { margin-bottom: 10px; gap: 10px; }
.single-product table.variations { margin: 0 0 8px; }
.single-product .product_meta { margin-top: 10px; padding-top: 8px; }
.single-product .flex-control-thumbs { gap: 6px; margin-top: 8px; }
.single-product span.onsale { top: 8px; left: 8px; }
body.single-product div.product .woocommerce-tabs ul.tabs { margin-bottom: 8px !important; }
body.single-product div.product .woocommerce-tabs .panel { padding: 12px !important; }
.single-product .related > h2, .single-product .upsells > h2 { margin: 12px 0 8px; font-size: 1.05rem; }
.single-product .woocommerce-tabs .panel h2:first-child { margin-bottom: 8px; }
}
@media (max-width: 359px) {
body.single-product .myanas-shop > .shop-wrap { padding-inline: 8px; }
}
/* ==========================================================================
Shop pages (shop, category, single product, cart, checkout, account) use the same
frame as the single blog post: main#content has 5px side padding, its child is a
centred 1200px box with NO padding of its own, and the bottom gap matches
.myanas-cols (1.75em). Kept last so it beats every older breakpoint rule above.
========================================================================== */
body .myanas-main.myanas-shop > .shop-wrap {
max-width: 1200px; width: 100%; margin-inline: auto; box-sizing: border-box;
padding: 0 0 1.75em;
}
body .myanas-main.myanas-shop > .shop-wrap > :first-child { margin-top: 0; }
/* chips used to bleed out of the old 10px wrapper padding; now out of main's 5px */
@media (max-width: 599px) {
body .myanas-main.myanas-shop .shop-chips { margin: 0 -5px 8px; padding: 6px 5px; }
}
/* Home uses the same blog frame too: centred 1200px, no wrapper side padding (main#content gives 5px),
same top/bottom gap as the shop pages above. Beats ".myanas-main.myanas-home > * { max-width: none }". */
body .myanas-main.myanas-home > .home-wrap {
max-width: 1200px; width: 100%; margin-inline: auto; box-sizing: border-box;
padding: 0 0 1.75em;
}
/* ==========================================================================
UI polish v4 (kept last so it wins): consistent, accessible button colours,
cleaner cards, refined badges, softer chrome. Light + dark mode.
--btn / --btn-hover are dark enough for white text (>= 5:1) in BOTH modes,
the old --g (#3ecf6b in dark mode) was too light under white labels.
========================================================================== */
:root {
--btn: #17793a;
--btn-hover: #115f2d;
--btn-ink: #ffffff;
--btn-grad: linear-gradient(180deg, #1c8a43 0%, #17793a 100%);
--btn-grad-hover: linear-gradient(180deg, #17793a 0%, #115f2d 100%);
--btn-ring: rgba(31, 154, 71, .35);
--btn-soft: rgba(31, 154, 71, .09);
--btn-soft-line: rgba(31, 154, 71, .45);
--btn-soft-ink: #14663a;
--card-shadow: 0 1px 2px rgba(21, 37, 26, .05), 0 4px 14px rgba(21, 37, 26, .05);
--card-shadow-hover: 0 8px 26px rgba(21, 37, 26, .13);
}
html:not([data-theme="light"]) {
--btn-soft: rgba(62, 207, 107, .12);
--btn-soft-line: rgba(62, 207, 107, .5);
--btn-soft-ink: #8be8ab;
--btn-ring: rgba(62, 207, 107, .45);
--card-shadow: 0 1px 2px rgba(0, 0, 0, .25);
--card-shadow-hover: 0 10px 28px rgba(0, 0, 0, .45);
}
/* ---------- Product card buttons: "Add" (outline) + "Buy" (solid) ---------- */
ul.products li.product .pcard-actions { gap: 8px; padding: 10px var(--pc-pad) var(--pc-pad); }
ul.products li.product .pcard-actions .pcard-add,
ul.products li.product .pcard-actions .pcard-buy {
height: var(--pc-btn-h) !important; border-radius: 10px !important; font-weight: 700 !important; letter-spacing: .01em;
transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s, transform .12s;
}
ul.products li.product .pcard-actions .pcard-add {
background: var(--btn-soft) !important; color: var(--btn-soft-ink) !important; border: 1.5px solid var(--btn-soft-line) !important;
}
ul.products li.product .pcard-actions .pcard-buy {
background: var(--btn-grad) !important; color: var(--btn-ink) !important; border: 1.5px solid var(--btn) !important;
box-shadow: 0 2px 6px rgba(23, 121, 58, .28) !important;
}
@media (hover: hover) {
ul.products li.product .pcard-actions .pcard-add:hover { background: var(--btn) !important; border-color: var(--btn) !important; color: #fff !important; }
ul.products li.product .pcard-actions .pcard-buy:hover { background: var(--btn-grad-hover) !important; border-color: var(--btn-hover) !important; box-shadow: 0 4px 12px rgba(23, 121, 58, .38) !important; }
}
ul.products li.product .pcard-actions .pcard-add:focus-visible,
ul.products li.product .pcard-actions .pcard-buy:focus-visible { outline: 3px solid var(--btn-ring); outline-offset: 2px; }
ul.products li.product .pcard-actions .pcard-add:active,
ul.products li.product .pcard-actions .pcard-buy:active { transform: scale(.97); }
/* "Added" confirmation */
ul.products li.product .pcard-actions .pcard-add.added { background: var(--btn) !important; border-color: var(--btn) !important; color: #fff !important; }
ul.products li.product .pcard-actions .pcard-add.loading { opacity: .65; }
/* Out of stock -> neutral "View details" */
ul.products li.product .pcard-actions .pcard-add.pcard-wide:not(.ajax_add_to_cart) {
background: transparent !important; color: var(--text-primary) !important; border: 1.5px solid var(--line) !important;
}
@media (hover: hover) {
ul.products li.product .pcard-actions .pcard-add.pcard-wide:not(.ajax_add_to_cart):hover { background: var(--bg-elevated) !important; border-color: var(--btn-soft-line) !important; color: var(--text-primary) !important; }
}
/* icons stay visible on tablets+, hidden on narrow phones (existing rule) */
.pcard-add svg, .pcard-buy svg { width: 16px; height: 16px; }
/* ---------- Cards ---------- */
ul.products li.product {
border: 1px solid var(--line); box-shadow: var(--card-shadow); background: var(--card);
}
@media (hover: hover) {
ul.products li.product:hover { box-shadow: var(--card-shadow-hover); border-color: var(--btn-soft-line); transform: translateY(-3px); }
}
ul.products li.product img { background: var(--bg-elevated); }
.pcard-title { color: var(--text-primary); font-weight: 650; letter-spacing: -.005em; }
.pcard-price .now, .pcard-price .now .price, ul.products li.product .pcard-price .price { color: var(--btn-soft-ink); letter-spacing: -.01em; }
html[data-theme="light"] .pcard-price .now, html[data-theme="light"] .pcard-price .now .price,
html[data-theme="light"] ul.products li.product .pcard-price .price { color: #0f5a2a; }
.pcard-price .save {
color: #0d7a3f; background: rgba(31, 154, 71, .12); border-radius: 6px; padding: 1px 6px; font-size: .68rem; font-weight: 800;
}
html:not([data-theme="light"]) .pcard-price .save { color: #8be8ab; background: rgba(62, 207, 107, .16); }
/* ---------- Badges ---------- */
.pbadge { background: var(--sale-red, #e5484d); color: #fff; font-weight: 800; letter-spacing: .01em; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.pbadge--flash { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #4a2a00; box-shadow: 0 2px 6px rgba(245, 158, 11, .35); }
.pbadge--out { background: #4b5563; color: #fff; }
/* ---------- Woo buttons (cart, checkout, single product, account) ---------- */
.myanas-shop .button, .myanas-shop button.button, .myanas-shop a.button, .myanas-shop input.button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit,
.single-product form.cart .single_add_to_cart_button, #place_order, .wc-proceed-to-checkout a.checkout-button {
background: var(--btn-grad) !important; color: var(--btn-ink) !important; border: 1.5px solid var(--btn) !important;
border-radius: 12px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 2px 8px rgba(23, 121, 58, .25);
transition: background .18s, box-shadow .18s, transform .12s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .myanas-shop .button:hover,
.single-product form.cart .single_add_to_cart_button:hover, #place_order:hover, .wc-proceed-to-checkout a.checkout-button:hover {
background: var(--btn-grad-hover) !important; border-color: var(--btn-hover) !important; box-shadow: 0 5px 16px rgba(23, 121, 58, .35);
}
.woocommerce a.button:active, .woocommerce button.button:active, .single-product form.cart .single_add_to_cart_button:active { transform: scale(.98); }
.woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible, .single-product form.cart .single_add_to_cart_button:focus-visible,
#place_order:focus-visible { outline: 3px solid var(--btn-ring); outline-offset: 2px; }
.woocommerce button.button:disabled, .woocommerce button.button.disabled, .single_add_to_cart_button.disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }
/* Secondary actions: Update cart / Apply coupon read as outline buttons */
.woocommerce-cart-form button[name="update_cart"], .coupon button[name="apply_coupon"] {
background: var(--btn-soft) !important; color: var(--btn-soft-ink) !important; border: 1.5px solid var(--btn-soft-line) !important; box-shadow: none;
}
.woocommerce-cart-form button[name="update_cart"]:hover, .coupon button[name="apply_coupon"]:hover { background: var(--btn) !important; color: #fff !important; border-color: var(--btn) !important; }
/* Active chips / tabs / nav / pagination: enough contrast for white text in dark mode too */
.shop-chips a.on, .woocommerce-MyAccount-navigation li.is-active a, .woocommerce nav.woocommerce-pagination ul li span.current,
.single-product .woocommerce-tabs ul.tabs li.active { background: var(--btn) !important; border-color: var(--btn) !important; color: #fff !important; }
.single-product .woocommerce-tabs ul.tabs li.active a { color: #fff !important; }
.shop-chips a, .woocommerce-MyAccount-navigation li a { transition: background .15s, border-color .15s, color .15s; }
@media (hover: hover) {
.shop-chips a:not(.on):hover, .woocommerce-MyAccount-navigation li:not(.is-active) a:hover { border-color: var(--btn-soft-line); background: var(--btn-soft); color: var(--btn-soft-ink); }
}
.sec-head a { color: var(--btn-soft-ink); background: var(--btn-soft); }
.sec-head a:hover { background: var(--btn); color: #fff; }
.sf-wa, .qty-btn:active { background-color: var(--btn); }
.sf-wa { color: #fff !important; }
.qty-btn { color: var(--btn-soft-ink); }
.qty-btn:hover { background: var(--btn-soft); }
/* ---------- Inputs ---------- */
.myanas-shop input:focus, .myanas-shop select:focus, .myanas-shop textarea:focus { outline: 0; border-color: var(--btn); box-shadow: 0 0 0 3px var(--btn-ring); }
/* ---------- Chrome: cart bar, bottom nav, headings, containers ---------- */
.cart-bar a { background: var(--btn-grad); border-radius: 14px; box-shadow: 0 10px 26px rgba(15, 90, 42, .35); }
.app-nav { background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .06); }
.app-nav a.on { color: var(--btn-soft-ink); }
.app-nav a.on svg { background: var(--btn-soft); }
.woocommerce-products-header { background: linear-gradient(135deg, #0f5a2a, #17793a 55%, #2fa856); box-shadow: 0 6px 18px rgba(15, 90, 42, .22); }
.sec-head h2 { position: relative; padding-left: 12px; }
.sec-head h2::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #3ecf6b, #17793a); }
.cart_totals, #order_review, .single-product .woocommerce-tabs .panel, .tile, .promise-row li, .jcard, .free-ship { box-shadow: var(--card-shadow); }
.single-product .summary .price, .single-product .summary .price .woocommerce-Price-amount { color: #0f5a2a; }
html:not([data-theme="light"]) .single-product .summary .price, html:not([data-theme="light"]) .single-product .summary .price .woocommerce-Price-amount { color: #8be8ab; }
.free-ship-bar span { background: linear-gradient(90deg, #3ecf6b, #17793a); }
@media (prefers-reduced-motion: reduce) {
ul.products li.product:hover { transform: none; }
}
/* Phones/tablets: bottom app-nav already has Search, Cart and Account, so drop the duplicates from the header (app-nav is hidden from 921px up) */
@media (max-width: 920px) {
body.has-app-nav .site-header .search-mobile-trigger,
body.has-app-nav .site-header .myanas-cart-icon,
body.has-app-nav .site-header .myanas-user-icon { display: none !important; }
}
/* ---------- Empty cart: "New in store" (WooCommerce product-new block) styled like the shop cards ---------- */
.wp-block-woocommerce-empty-cart-block { text-align: center; }
.wp-block-woocommerce-empty-cart-block h2.wp-block-heading { font-size: 1.15rem; margin: 22px 0 12px; text-align: center; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pc-gap, 12px);
list-style: none; margin: 0; padding: 0; text-align: left;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
position: relative; display: flex; flex-direction: column; width: auto !important; max-width: none !important; margin: 0 !important;
padding: 10px 10px 12px; box-sizing: border-box; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image { margin: 0; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--g-soft); display: block;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
margin: 4px 0 0; padding: 0; font-size: .9rem; font-weight: 600; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price { margin: 4px 0 8px; color: var(--g-dark); font-weight: 800; font-size: 1rem; text-align: left; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price del { opacity: .5; font-weight: 500; font-size: .8rem; display: block; color: var(--text-primary); }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price ins { text-decoration: none; background: none; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart { margin: auto 0 0; text-align: left; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 999px; background: var(--g); color: #fff;
font-size: .85rem; font-weight: 700; text-align: center; text-decoration: none; border: 0;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-onsale {
position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0; background: var(--sale-red, #e5484d); color: #fff;
border: 0; border-radius: 999px; font-size: .72rem; font-weight: 800; padding: 3px 8px; text-transform: none;
}
@media (min-width: 600px) { .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 921px) { .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cart-new-products { margin: 0 0 8px; }
.cart-new-products ul.products.product-grid { display: grid !important; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--pc-gap); }
/* ---------- Empty cart (block cart) ---------- */
.wp-block-woocommerce-empty-cart-block .empty-cart-ui {
display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
padding: 28px 18px; margin: 4px 0 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
}
.empty-cart-ico {
width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
background: var(--g-soft); color: var(--g-dark);
}
.empty-cart-ui .empty-cart-title { margin: 0; font-size: 1.25rem; font-weight: 800; }
.empty-cart-ui .empty-cart-text { margin: 0 0 12px; font-size: .92rem; opacity: .75; max-width: 320px; }
.empty-cart-ui .empty-cart-cta {
display: inline-block; padding: 12px 28px; border-radius: 999px; background: var(--g); color: #fff !important;
font-weight: 700; font-size: .95rem; text-decoration: none !important; box-shadow: 0 4px 12px rgba(31, 154, 71, .3);
}
.empty-cart-ui .empty-cart-cta:active { transform: scale(.97); }
.wp-block-woocommerce-empty-cart-block .empty-cart-sub { margin: 6px 0 10px; font-size: 1.1rem; font-weight: 800; text-align: left; }
/* ---------- Checkout (classic form: name, mobile, email, address) ---------- */
.woocommerce-checkout .myanas-hidden-field, .woocommerce-checkout #billing_country_field { display: none !important; }
.woocommerce-checkout #billing_address_1 { min-height: 84px; resize: vertical; }
.woocommerce-checkout form.checkout .col2-set { width: 100% !important; float: none !important; }
.woocommerce-checkout form.checkout .col-1, .woocommerce-checkout form.checkout .col-2 { width: 100% !important; float: none !important; }
.woocommerce-checkout #customer_details, .woocommerce-checkout #order_review {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; box-sizing: border-box; margin-bottom: 14px;
}
.woocommerce-checkout #order_review_heading { margin: 4px 0 8px; }
.woocommerce-checkout input.input-text, .woocommerce-checkout textarea {
border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: inherit; background: var(--card); color: inherit; box-sizing: border-box;
}
.woocommerce-checkout select, .woocommerce-checkout .select2-container .select2-selection--single {
border: 1px solid var(--line); border-radius: 12px; font: inherit; background: var(--card); color: inherit; box-sizing: border-box;
}
.woocommerce-checkout select.myanas-thana-select { width: 100%; padding: 12px; height: auto; }
.woocommerce-checkout .select2-container .select2-selection--single { height: 46px; display: flex; align-items: center; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
/* Checkout layout fixes: "Your order" title lives inside its card, price column never wraps, no empty gap in the details card */
.woocommerce-checkout #order_review_heading { display: none !important; }
.woocommerce-checkout #order_review::before {
content: "Your order"; display: block; font-size: 1.1rem; font-weight: 800; margin: 0 0 10px;
}
.woocommerce-checkout #customer_details .woocommerce-billing-fields > h3 { margin: 0 0 12px; }
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { padding: 0 !important; }
.woocommerce-checkout table.shop_table { border: 0 !important; border-radius: 0; width: 100%; table-layout: auto; margin: 0 0 12px; }
.woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td { padding: 10px 6px; vertical-align: middle; }
.woocommerce-checkout table.shop_table th:last-child, .woocommerce-checkout table.shop_table td:last-child {
text-align: right; white-space: nowrap; width: 1%; border-left: 0;
}
.woocommerce-checkout table.shop_table td.product-name { width: auto; }
@media (min-width: 921px) {
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; align-items: start; }
.woocommerce-checkout form.checkout #customer_details { grid-column: 1; margin: 0; }
.woocommerce-checkout form.checkout #order_review { grid-column: 2; margin: 0; }
}
/* Checkout fields: inputs, textarea and all three location selects share one look */
.woocommerce-checkout form .form-row label { display: block; margin: 0 0 6px; font-weight: 600; font-size: .86rem; line-height: 1.3; }
/* Required fields are shown by colour only (amber tint + dot below), so the red * is hidden */
.woocommerce-checkout form .form-row .required { display: none !important; }
.woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea {
width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background-color: var(--card);
color: inherit; font: inherit; line-height: 1.3; box-sizing: border-box; transition: border-color .15s, box-shadow .15s;
}
.woocommerce-checkout select {
-webkit-appearance: none; appearance: none; height: auto; padding-right: 40px; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.woocommerce-checkout input.input-text:focus, .woocommerce-checkout select:focus, .woocommerce-checkout textarea:focus {
outline: 0; border-color: var(--g); box-shadow: 0 0 0 3px var(--g-soft);
}
.woocommerce-checkout form .form-row { margin: 0 0 14px; padding: 0; }
/* fallback if selectWoo is ever left on */
.woocommerce-checkout .select2-container { width: 100% !important; }
.woocommerce-checkout .select2-container .select2-selection--single { height: 48px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px; padding: 0 14px; color: inherit; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; }
/* Location selects stay empty and greyed out until the step before is chosen */
.woocommerce-checkout select:disabled { opacity: .55; cursor: not-allowed; background-color: var(--g-soft); }
/* Account is created silently when an email is given, so hide WooCommerce's "Create an account?" box */
.woocommerce-checkout .woocommerce-account-fields, .woocommerce-checkout p.create-account { display: none !important; }
/* Checkout: no green/red validation borders on fields. When a native dropdown opens, the fields behind it
stay a calm, neutral colour instead of competing with the list. Errors still show as the message under the field. */
.woocommerce-checkout form .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout form .form-row.woocommerce-validated select,
.woocommerce-checkout form .form-row.woocommerce-validated textarea,
.woocommerce-checkout form .form-row.woocommerce-validated .select2-container .select2-selection--single,
.woocommerce-checkout form .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout form .form-row.woocommerce-invalid select,
.woocommerce-checkout form .form-row.woocommerce-invalid textarea,
.woocommerce-checkout form .form-row.woocommerce-invalid .select2-container .select2-selection--single {
border-color: var(--line) !important; box-shadow: none !important; background-color: var(--card);
}
.woocommerce-checkout form .form-row.woocommerce-invalid label { color: inherit; }
.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row select:focus,
.woocommerce-checkout form .form-row textarea:focus { border-color: var(--g) !important; box-shadow: 0 0 0 3px var(--g-soft) !important; }
/* The open field sits above its neighbours, and the dropdown list uses the card colours (also in dark mode). */
.woocommerce-checkout form .form-row:focus-within { position: relative; z-index: 5; }
.woocommerce-checkout select option { background: var(--card); color: var(--text-primary, inherit); padding: 8px 12px; }
/* ---- Checkout location picker: button + 2-column grid sheet (real