/* ========================================================================== RK Gardening — Theme Stylesheet Brand palette / typography from the source HTML site (htlwork.com/rk-gardening/index-new.html). Header, homepage sections and footer are styled by design.css (loaded after this file); this file covers inner pages, WooCommerce and shared utilities. ========================================================================== */ :root { --rkg-green: #3f8417; --rkg-green-bright: #63bb37; --rkg-green-dark: #064e3b; --rkg-green-darker: #0f2b1d; --rkg-header-bg: #f5f1e5; --rkg-accent: #fdc622; --rkg-section-tint: #efe9d8; --rkg-mint: #e5e1d5; --rkg-cream: #f5f1e5; --rkg-text: #565656; --rkg-heading: #0f1f0f; --rkg-border: #e0d9c5; --rkg-radius: 16px; --rkg-radius-lg: 24px; --rkg-shadow-sm: 0 2px 10px rgba(6, 78, 59, .06); --rkg-shadow: 0 12px 30px rgba(6, 78, 59, .10); --rkg-shadow-lg: 0 24px 50px rgba(6, 78, 59, .16); --rkg-font-head: 'Bricolage Grotesque', sans-serif; --rkg-font-body: 'Sora', sans-serif; --container-w: 1320px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--rkg-font-body); font-size: 16px; font-weight: 400; color: var(--rkg-text); background: #fff; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } body.nav-open { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--rkg-green); text-decoration: none; transition: color .2s, background-color .2s, border-color .2s; } a:hover, a:focus { color: var(--rkg-green-dark); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(99, 187, 55, .55); outline-offset: 2px; } ul { margin: 0; padding: 0; list-style: none; } p { margin: 0 0 15px; } p b, p strong { color: var(--rkg-heading); font-weight: 600; } h1, h2, h3, h4, h5, h6 { font-family: var(--rkg-font-head); font-weight: 700; line-height: 1.2; margin: 0 0 12px; color: var(--rkg-heading); } h2 { color: var(--rkg-green-dark); } h3 { color: var(--rkg-green-dark); } figure { margin: 0; } button { font-family: inherit; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .text-center { text-align: center; } .text-end { text-align: right; } .mrb-10{margin-bottom:10px!important;} .mrb-15{margin-bottom:15px!important;} .mrb-20{margin-bottom:20px!important;} .mrb-25{margin-bottom:25px!important;} .mrb-30{margin-bottom:30px!important;} .mrb-35{margin-bottom:35px!important;} .pad-0{padding:0!important;} /* ---------- Buttons ---------- */ .woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, button.single_add_to_cart_button, .wc-block-components-button { background: var(--rkg-green-dark); border: 2px solid var(--rkg-green-dark); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; font-family: var(--rkg-font-head); font-weight: 600; font-size: 16px; line-height: 1.2; color: #fff !important; padding: 14px 28px; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s; text-decoration: none; } .woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover, button.single_add_to_cart_button:hover { background: var(--rkg-green-bright); border-color: var(--rkg-green-bright); color: #fff !important; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(99, 187, 55, .3); } .btn.btn-outline { background: transparent; color: var(--rkg-green-dark) !important; } .btn.btn-outline:hover { background: var(--rkg-green-dark); border-color: var(--rkg-green-dark); color: #fff !important; } .btn.btn-outline:after, .btn.btn-light:after, .btn.btn-ghost:after { display: none; } .btn.btn-light { background: #fff; border-color: #fff; color: var(--rkg-green-darker) !important; } .btn.btn-light:hover { background: var(--rkg-green-darker); border-color: var(--rkg-green-darker); color: #fff !important; } .btn.btn-ghost { background: transparent; border-color: rgba(255,255,255,.6); color: #fff !important; } .btn.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--rkg-green-darker) !important; } .woocommerce .button:disabled, .woocommerce .button.disabled, .woocommerce button.button:disabled[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .btn-small { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--rkg-green); color: #fff !important; white-space: nowrap; border: 0; cursor: pointer; } .btn-small:hover { background: var(--rkg-green-dark); color: #fff !important; } .btn-small-border { background: transparent; color: var(--rkg-green-dark) !important; border: 1px solid var(--rkg-green-dark); } .btn-small-border:hover { background: var(--rkg-green-dark); color: #fff !important; } /* Generic section heading (inner pages) */ .section-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rkg-green-dark); background: var(--rkg-mint); padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; } .section-title { font-size: clamp(28px, 3.4vw, 42px); color: var(--rkg-green-dark); margin: 0 0 18px; } .section-title span { color: var(--rkg-green); } .section-head { text-align: center; max-width: 680px; margin: 0 auto 44px; } /* ---------- Product cards (home carousels, shop grid, related, search) ---------- Card look lives in design.css (.our-specials / ul.products / .products-grid .specials-box). This block only handles grid layout and cart states. */ .products-grid, ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; align-items: stretch; } .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); } .product-card-item { list-style: none; display: flex; } .product-card-item > .specials-box { width: 100%; } .product-card-item:before, ul.products:before, ul.products:after { display: none !important; } /* WooCommerce's own sale flash (single product page) */ span.onsale { position: absolute; top: 12px; left: 12px; color: #064e3b; font-size: 13px; font-weight: 700; text-transform: capitalize; background: #fff; border-radius: 999px; padding: 6px 14px; z-index: 5; font-family: var(--rkg-font-head); line-height: 1.3; min-height: 0; min-width: 0; box-shadow: var(--rkg-shadow-sm); } .specials-box .card-cart.loading { opacity: .6; pointer-events: none; } .specials-box .card-cart.loading i:before { content: "\f110"; font-family: "Font Awesome 6 Free"; font-weight: 900; display: inline-block; animation: rkgSpin 1s linear infinite; } .specials-box .card-cart.added i:before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; } @keyframes rkgSpin { to { transform: rotate(360deg); } } /* WooCommerce inserts its own inline "View cart" link after a successful AJAX add; our toast (with View Cart / Checkout buttons) replaces it. */ .specials-box a.added_to_cart, .product-card-item .added_to_cart, div.product form.cart .added_to_cart { display: none !important; } .single_add_to_cart_button.loading { opacity: .7; pointer-events: none; } .single_add_to_cart_button.loading:before { content: "\f110" !important; animation: rkgSpin 1s linear infinite; } /* ---------- Add-to-cart toast ---------- */ .rkg-cart-toast { position: fixed; top: 110px; right: 24px; z-index: 2000; display: flex; gap: 14px; background: #fff; border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.18); border: 1px solid var(--rkg-border); padding: 18px 20px; width: 340px; max-width: calc(100vw - 32px); transform: translateX(120%); opacity: 0; transition: transform .35s ease, opacity .35s ease; } .rkg-cart-toast.is-visible { transform: translateX(0); opacity: 1; } .rkg-cart-toast-icon { color: var(--rkg-green); font-size: 26px; flex-shrink: 0; } .rkg-cart-toast-title { font-weight: 700; color: var(--rkg-heading); margin: 0 0 2px; font-size: 15px; padding-right: 16px; } .rkg-cart-toast-text { margin: 0 0 12px; font-size: 13px; color: var(--rkg-text); } .rkg-cart-toast-actions { display: flex; gap: 8px; } .rkg-cart-toast-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 20px; color: #999; cursor: pointer; line-height: 1; } /* ========================================================================== Inner pages ========================================================================== */ /* ---------- Page hero ---------- */ .page-hero { position: relative; overflow: hidden; padding: 26px 0 24px; text-align: center; background: radial-gradient(circle at 12% 20%, rgba(99, 187, 55, .18), transparent 40%), radial-gradient(circle at 88% 80%, rgba(6, 78, 59, .12), transparent 45%), var(--rkg-section-tint); } .page-hero:before, .page-hero:after { content: ""; position: absolute; width: 100px; height: 80px; opacity: .35; pointer-events: none; background: url('../images/leaf-icon.png') center / contain no-repeat; } .page-hero:before { left: 4%; bottom: -16px; transform: rotate(-25deg); } .page-hero:after { right: 5%; top: -14px; transform: rotate(150deg); width: 76px; height: 62px; } .page-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .page-hero-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rkg-green-dark); margin-bottom: 10px; } .page-hero-title { font-size: clamp(26px, 3.2vw, 38px); color: var(--rkg-green-dark); margin: 0 0 6px; letter-spacing: -.5px; } .page-hero-sub { font-size: 15px; color: #444; margin: 0 auto 12px; max-width: 620px; } /* ---------- Breadcrumbs ---------- */ .rkg-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; list-style: none; margin: 0; padding: 0; } .page-hero .rkg-breadcrumbs ol { justify-content: center; display: inline-flex; background: #fff; padding: 5px 15px; border-radius: 999px; box-shadow: var(--rkg-shadow-sm); font-size: 13px; } .rkg-breadcrumbs li { display: inline-flex; align-items: center; gap: 10px; color: var(--rkg-text); } .rkg-breadcrumbs li:not(:last-child)::after { content: "\203A"; color: #9aa59a; font-size: 18px; line-height: 1; } .rkg-breadcrumbs a { color: var(--rkg-green-dark); font-weight: 600; } .rkg-breadcrumbs a:hover { color: var(--rkg-green); } .rkg-breadcrumbs li[aria-current] { color: var(--rkg-heading); max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .rkg-breadcrumbs i { font-size: 12px; } .product-breadcrumb-bar { background: var(--rkg-section-tint); padding: 16px 0; } /* ---------- Generic page/post ---------- */ main.site-main { padding: 70px 0 90px; min-height: 40vh; } .content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; } .content-card { background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 44px 48px; box-shadow: var(--rkg-shadow-sm); min-width: 0; } .content-card.narrow { max-width: 860px; margin: 0 auto; } .page-thumb { margin: -10px -14px 30px; } .page-thumb img { border-radius: var(--rkg-radius); width: 100%; } .entry-content { color: #3f3f3f; font-size: 16.5px; line-height: 1.8; } .entry-content > *:first-child { margin-top: 0; } .entry-content > *:last-child { margin-bottom: 0; } .entry-content p { margin: 0 0 1.1em; } .entry-content h2 { font-size: 28px; margin: 1.6em 0 .6em; } .entry-content h3 { font-size: 22px; margin: 1.5em 0 .5em; } .entry-content h4 { font-size: 18px; margin: 1.4em 0 .5em; color: var(--rkg-green-dark); } .entry-content ul, .entry-content ol { margin: 0 0 1.2em; padding-left: 1.4em; } .entry-content ul { list-style: none; padding-left: 0; } .entry-content ul li { position: relative; padding-left: 28px; margin-bottom: 8px; } .entry-content ul li:before { content: ""; position: absolute; left: 4px; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--rkg-green-bright); box-shadow: 0 0 0 4px var(--rkg-mint); } .entry-content ol { list-style: decimal; } .entry-content ol li { margin-bottom: 8px; padding-left: 4px; } .entry-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(84, 167, 58, .4); } .entry-content a:hover { text-decoration-color: currentColor; } .entry-content blockquote { margin: 1.5em 0; padding: 20px 26px; background: var(--rkg-section-tint); border-left: 4px solid var(--rkg-accent); border-radius: 0 var(--rkg-radius) var(--rkg-radius) 0; font-style: italic; } .entry-content img { border-radius: var(--rkg-radius); } .entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 15px; } .entry-content th, .entry-content td { padding: 12px 14px; border-bottom: 1px solid var(--rkg-border); text-align: left; } .entry-content th { background: var(--rkg-section-tint); color: var(--rkg-heading); } .entry-content em:only-child { display: block; padding: 16px 20px; background: #fff8e6; border: 1px dashed #e8c66a; border-radius: 12px; font-size: 15px; color: #6b5a1e; } .help-aside { position: sticky; top: 140px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; } .aside-card { background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 26px; box-shadow: var(--rkg-shadow-sm); } .aside-card h4 { font-size: 18px; margin-bottom: 14px; } .aside-links li a { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 12px; color: var(--rkg-heading); font-size: 15px; font-weight: 500; } .aside-links li a i { font-size: 11px; color: #a0aba0; transition: transform .2s; } .aside-links li a:hover { background: var(--rkg-section-tint); color: var(--rkg-green-dark); } .aside-links li a:hover i { transform: translateX(3px); color: var(--rkg-green); } .aside-links li.is-active a { background: var(--rkg-green-dark); color: #fff; } .aside-links li.is-active a i { color: #fff; } .aside-contact { background: linear-gradient(145deg, var(--rkg-green-dark), var(--rkg-green-darker)); border: 0; color: rgba(255,255,255,.85); } .aside-contact h4 { color: #fff; } .aside-contact p { font-size: 14px; } .aside-contact-row { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 14px; padding: 10px 14px; background: rgba(255,255,255,.1); border-radius: 12px; margin-top: 8px; overflow-wrap: anywhere; font-size: 13px; } .aside-contact-row:hover { background: rgba(255,255,255,.2); color: #fff; } .aside-contact-row i { font-size: 16px; color: var(--rkg-green-bright); } /* Blog / archive */ .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .post-card { background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; } .post-card:hover { box-shadow: var(--rkg-shadow); transform: translateY(-4px); } .post-card .post-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--rkg-section-tint); } .post-card .post-thumb img { width: 100%; height: 100%; object-fit: cover; } .post-thumb-fallback { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 40px; color: var(--rkg-green); } .post-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; } .post-meta { font-size: 13px; color: var(--rkg-green); font-weight: 600; margin-bottom: 6px; } .post-card h2 { font-size: 20px; margin: 0 0 10px; } .post-card h2 a { color: var(--rkg-heading); } .post-card h2 a:hover { color: var(--rkg-green-dark); } .post-card .excerpt { color: var(--rkg-text); font-size: 15px; flex: 1; } .read-more { font-weight: 600; font-size: 14px; color: var(--rkg-green-dark); display: inline-flex; gap: 8px; align-items: center; margin-top: 12px; } .post-navigation { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--rkg-border); } .post-navigation .nav-links { display: flex; justify-content: space-between; gap: 20px; } .post-navigation a { display: block; font-weight: 600; color: var(--rkg-heading); } .post-navigation a span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--rkg-green); } .pagination, .woocommerce-pagination { margin-top: 48px; } .pagination .nav-links, .woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; padding: 0; margin: 0; } .pagination .page-numbers, .woocommerce-pagination .page-numbers { display: inline-flex; min-width: 44px; height: 44px; padding: 0 10px; align-items: center; justify-content: center; border: 1px solid var(--rkg-border); border-radius: 999px; color: var(--rkg-heading); font-weight: 600; background: #fff; } .pagination a.page-numbers:hover, .woocommerce-pagination a.page-numbers:hover { border-color: var(--rkg-green); color: var(--rkg-green-dark); } .pagination .current, .woocommerce-pagination .current { background: var(--rkg-green-dark); color: #fff; border-color: var(--rkg-green-dark); } .empty-state { text-align: center; padding: 60px 20px; background: var(--rkg-section-tint); border-radius: var(--rkg-radius-lg); } .empty-state > i { font-size: 44px; color: var(--rkg-green); margin-bottom: 16px; display: block; } .empty-state p { font-size: 17px; color: #444; } /* Search form (search page + 404) */ .search-inline { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--rkg-border); border-radius: 999px; padding: 6px 6px 6px 22px; max-width: 620px; margin: 0 auto 44px; box-shadow: var(--rkg-shadow-sm); } .search-inline:focus-within { border-color: var(--rkg-green); } .search-inline > i { color: #9aa59a; } .search-inline input[type=search] { flex: 1; border: 0; font: inherit; font-size: 15px; padding: 10px 4px; background: transparent; min-width: 0; } .search-inline input[type=search]:focus { outline: none; } .search-inline .btn-small { padding: 12px 22px; font-size: 14px; } /* ---------- 404 ---------- */ .error-404-content { text-align: center; padding: 40px 0 20px; max-width: 700px; margin: 0 auto; } .error-404-content .error-code { display: inline-flex; align-items: center; gap: 6px; font-family: var(--rkg-font-head); font-weight: 800; font-size: clamp(90px, 16vw, 160px); line-height: 1; color: var(--rkg-green-dark); letter-spacing: -4px; } .error-404-content .error-code i { font-size: .7em; color: var(--rkg-green-bright); } .error-404-content h1 { font-size: clamp(24px, 3vw, 34px); color: var(--rkg-green-dark); margin: 20px 0 10px; } .error-404-content > p { font-size: 17px; } .error-404-content .search-inline { margin: 28px auto; } .error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } /* ---------- About page ---------- */ .about-page { padding: 0; } .about-story { padding: 90px 0; } .about-story-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center; } .about-media { position: relative; } .about-img-main { width: 100%; aspect-ratio: 4 / 5; max-height: 580px; object-fit: cover; border-radius: 28px; box-shadow: var(--rkg-shadow-lg); } .about-badge { position: absolute; right: -24px; bottom: 36px; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 16px 20px; box-shadow: var(--rkg-shadow-lg); } .about-badge i { width: 46px; height: 46px; border-radius: 50%; background: var(--rkg-mint); color: var(--rkg-green-dark); display: flex; align-items: center; justify-content: center; font-size: 18px; } .about-badge span { font-size: 13px; color: var(--rkg-text); line-height: 1.4; } .about-badge strong { display: block; color: var(--rkg-heading); font-family: var(--rkg-font-head); font-size: 17px; } .about-copy .entry-content { font-size: 17px; } .about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .about-values { padding: 90px 0; background: var(--rkg-section-tint); } .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .value-card { background: #fff; border-radius: var(--rkg-radius-lg); padding: 32px 26px; box-shadow: var(--rkg-shadow-sm); transition: transform .25s, box-shadow .25s; } .value-card:hover { transform: translateY(-6px); box-shadow: var(--rkg-shadow); } .value-card figure { width: 72px; height: 72px; border-radius: 20px; background: var(--rkg-mint); display: flex; align-items: center; justify-content: center; padding: 14px; margin-bottom: 20px; } .value-card figure img { max-height: 44px; width: auto; } .value-card h4 { font-size: 19px; color: var(--rkg-green-dark); } .value-card p { font-size: 15px; margin: 0; } .about-range { padding: 90px 0; } .range-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .range-card { position: relative; display: block; border-radius: var(--rkg-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--rkg-section-tint); } .range-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .range-card:after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 40, 0, .75), rgba(0,0,0,0) 55%); } .range-card span { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; color: #fff; font-family: var(--rkg-font-head); font-size: 21px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; } .range-card span i { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--rkg-green-dark); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: transform .25s; } .range-card:hover img { transform: scale(1.07); } .range-card:hover span i { transform: rotate(-45deg); } .cta-band { padding: 0 0 170px; } .cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 50px 56px; border-radius: 28px; color: #fff; background: radial-gradient(circle at 90% 10%, rgba(99, 187, 55, .45), transparent 45%), linear-gradient(135deg, var(--rkg-green-dark), var(--rkg-green-darker)); } .cta-band h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); margin-bottom: 8px; } .cta-band p { color: rgba(255,255,255,.85); margin: 0; } .cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; } /* ---------- Contact page ---------- */ .contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 50px; } .contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 26px; background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); color: var(--rkg-heading); transition: all .25s; min-width: 0; } a.contact-card:hover { border-color: var(--rkg-green-bright); box-shadow: var(--rkg-shadow); transform: translateY(-4px); color: var(--rkg-heading); } .contact-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--rkg-mint); color: var(--rkg-green-dark); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; transition: all .25s; } a.contact-card:hover .contact-icon { background: var(--rkg-green-dark); color: #fff; } .contact-label { font-size: 13px; color: var(--rkg-text); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; } .contact-card strong { font-family: var(--rkg-font-head); font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; } .contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: stretch; } .contact-form-card { background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 44px; box-shadow: var(--rkg-shadow-sm); } .contact-map { display: flex; flex-direction: column; gap: 20px; } .contact-map iframe { width: 100%; flex: 1; min-height: 340px; border: 0; border-radius: var(--rkg-radius-lg); background: var(--rkg-section-tint); } .contact-hours { background: var(--rkg-section-tint); border-radius: var(--rkg-radius-lg); padding: 26px 28px; } .contact-hours h4 { font-size: 18px; color: var(--rkg-green-dark); display: flex; align-items: center; gap: 10px; } .contact-hours li { position: relative; padding-left: 22px; font-size: 15px; margin-bottom: 6px; } .contact-hours li:before { content: "\2713"; position: absolute; left: 0; color: var(--rkg-green); font-weight: 700; } .form-notice { padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; font-size: 15px; font-weight: 500; } .form-notice.is-success { background: #e8f6e1; color: var(--rkg-green-dark); border: 1px solid #bfe3ad; } .form-notice.is-error { background: #fdecec; color: #a12622; border: 1px solid #f3c2c0; } /* ---------- Shared form fields ---------- */ .rkg-form p, :is(.woocommerce .site-main, .site-main .woocommerce) form .form-row { margin: 0 0 18px; } .rkg-form .form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .rkg-form .form-row.two p { margin: 0 0 18px; } .rkg-form label, :is(.woocommerce .site-main, .site-main .woocommerce) form .form-row label, .woocommerce-form label { display: block; font-size: 14px; font-weight: 600; color: var(--rkg-heading); margin-bottom: 7px; } :is(.woocommerce .site-main, .site-main .woocommerce) form .form-row label.checkbox, .woocommerce-form__label-for-checkbox { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; } .rkg-form .req, .woocommerce .required { color: #d13b36; text-decoration: none; border: 0; } .rkg-form input, .rkg-form textarea, :is(.woocommerce .site-main, .site-main .woocommerce) form .input-text, :is(.woocommerce .site-main, .site-main .woocommerce) form input[type=text], :is(.woocommerce .site-main, .site-main .woocommerce) form input[type=email], :is(.woocommerce .site-main, .site-main .woocommerce) form input[type=tel], :is(.woocommerce .site-main, .site-main .woocommerce) form input[type=password], :is(.woocommerce .site-main, .site-main .woocommerce) form input[type=number], :is(.woocommerce .site-main, .site-main .woocommerce) form textarea, :is(.woocommerce .site-main, .site-main .woocommerce) form select, .woocommerce-cart-form .coupon input, .select2-container .select2-selection--single { width: 100%; font: inherit; font-size: 15px; color: var(--rkg-heading); background: #fbfcfa; border: 1.5px solid var(--rkg-border); border-radius: 12px; padding: 13px 16px; transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none; } :is(.woocommerce .site-main, .site-main .woocommerce) form select { background: #fbfcfa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230e580e' stroke-width='2' fill='none'/%3E%3C/svg%3E") right 16px center no-repeat; padding-right: 40px; } .rkg-form input:focus, .rkg-form textarea:focus, :is(.woocommerce .site-main, .site-main .woocommerce) form .input-text:focus, :is(.woocommerce .site-main, .site-main .woocommerce) form input:focus, :is(.woocommerce .site-main, .site-main .woocommerce) form textarea:focus, :is(.woocommerce .site-main, .site-main .woocommerce) form select:focus { outline: none; border-color: var(--rkg-green); background: #fff; box-shadow: 0 0 0 4px rgba(99, 187, 55, .15); } :is(.woocommerce .site-main, .site-main .woocommerce) form input[type=checkbox], :is(.woocommerce .site-main, .site-main .woocommerce) form input[type=radio] { width: 18px; height: 18px; accent-color: var(--rkg-green-dark); -webkit-appearance: auto; appearance: auto; margin: 0; } .rkg-form textarea { resize: vertical; min-height: 140px; } .select2-container .select2-selection--single { height: auto; } .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.5; color: var(--rkg-heading); } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 10px; } .select2-dropdown { border-color: var(--rkg-border); border-radius: 12px; overflow: hidden; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--rkg-green-dark); } /* ---------- WooCommerce notices ---------- */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; list-style: none; padding: 16px 20px; margin: 0 0 24px; border-radius: 14px; font-size: 15px; font-weight: 500; background: var(--rkg-section-tint); color: var(--rkg-green-dark); border: 1px solid #cfe7c2; } .woocommerce-error { background: #fdecec; color: #a12622; border-color: #f3c2c0; flex-direction: column; align-items: flex-start; } .woocommerce-info { background: #f1f6fb; color: #234a6b; border-color: #cfe0ef; } .woocommerce-message .button, .woocommerce-info .button { order: 2; padding: 9px 18px; font-size: 14px; } .woocommerce-info a:not(.button) { font-weight: 600; } /* ---------- Shop / archive ---------- */ .shop-archive { padding-top: 50px; } .shop-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 36px; align-items: start; } .shop-sidebar { position: sticky; top: 140px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; } .shop-filter-card { background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 22px; } .shop-filter-card summary { list-style: none; cursor: pointer; font-family: var(--rkg-font-head); font-weight: 700; font-size: 18px; color: var(--rkg-heading); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .shop-filter-card summary::-webkit-details-marker { display: none; } .shop-filter-card summary i { color: var(--rkg-green); } .shop-cat-list li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--rkg-heading); font-size: 15px; } .shop-cat-list li a:hover { background: var(--rkg-section-tint); color: var(--rkg-green-dark); } .shop-cat-list .count { font-size: 12px; font-weight: 600; min-width: 26px; height: 22px; border-radius: 999px; background: var(--rkg-section-tint); color: var(--rkg-text); display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; } .shop-cat-list li.is-active a { background: var(--rkg-green-dark); color: #fff; font-weight: 600; } .shop-cat-list li.is-active .count { background: rgba(255,255,255,.2); color: #fff; } .shop-help-card { background: linear-gradient(145deg, var(--rkg-green-dark), var(--rkg-green-darker)); color: rgba(255,255,255,.85); border-radius: var(--rkg-radius-lg); padding: 26px 22px; } .shop-help-card > i { font-size: 30px; color: var(--rkg-green-bright); margin-bottom: 10px; display: block; } .shop-help-card h4 { color: #fff; font-size: 18px; margin-bottom: 6px; } .shop-help-card p { font-size: 14px; } .shop-help-card .btn-small { background: #fff; color: var(--rkg-green-darker) !important; } .shop-help-card .btn-small:hover { background: var(--rkg-green-bright); color: #fff !important; } .shop-sidebar .widget { background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 22px; margin-bottom: 20px; } .shop-sidebar .widget-title, .shop-sidebar .widget h2 { font-size: 18px; color: var(--rkg-heading); } .term-description { margin-bottom: 24px; } .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 12px 12px 20px; margin-bottom: 26px; background: var(--rkg-section-tint); border-radius: 999px; } .shop-toolbar .woocommerce-result-count { margin: 0; font-size: 14px; color: var(--rkg-text); } .shop-toolbar .woocommerce-ordering { margin: 0; } .shop-toolbar .woocommerce-ordering select { font: inherit; font-size: 14px; padding: 10px 40px 10px 18px; border-radius: 999px; border: 1px solid var(--rkg-border); cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230e580e' stroke-width='2' fill='none'/%3E%3C/svg%3E") right 16px center no-repeat; -webkit-appearance: none; appearance: none; color: var(--rkg-heading); } .woocommerce-no-products-found .woocommerce-info { justify-content: center; padding: 40px; } /* ---------- Single product ---------- */ .single-product-page { padding-top: 50px; } .woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; margin-bottom: 70px; position: relative; } .woocommerce div.product > span.onsale { top: 16px; left: 16px; z-index: 5; font-size: 13px; padding: 6px 14px; } .woocommerce div.product div.images { position: relative; align-self: start; margin: 0; min-width: 0; } .woocommerce-product-gallery { position: relative; } .woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce-product-gallery .flex-viewport, .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child { border-radius: var(--rkg-radius-lg); overflow: hidden; background: var(--rkg-section-tint); } .woocommerce-product-gallery__image img { width: 100%; height: auto; } .woocommerce-product-gallery__image a { display: block; } .woocommerce-product-gallery__trigger { position: absolute; top: 16px; right: 16px; z-index: 9; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--rkg-shadow); font-size: 0; } .woocommerce-product-gallery__trigger span, .woocommerce-product-gallery__trigger img { display: none !important; } .woocommerce-product-gallery__trigger:before { content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 16px; color: var(--rkg-green-dark); } .woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; } .woocommerce-product-gallery .flex-control-thumbs li img { border-radius: 12px; cursor: pointer; opacity: .55; border: 2px solid transparent; transition: all .2s; } .woocommerce-product-gallery .flex-control-thumbs li img.flex-active, .woocommerce-product-gallery .flex-control-thumbs li img:hover { opacity: 1; border-color: var(--rkg-green-bright); } .woocommerce div.product .summary { min-width: 0; padding-top: 10px; } .woocommerce div.product .product_title { font-size: clamp(28px, 3.4vw, 42px); color: var(--rkg-heading); margin: 0 0 14px; letter-spacing: -.5px; } .woocommerce div.product .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; } .star-rating { position: relative; display: inline-block; font-size: 14px; width: 6.25em; height: 1.2em; line-height: 1.2; overflow: hidden; font-family: "Font Awesome 6 Free"; font-weight: 900; letter-spacing: .15em; white-space: nowrap; } .star-rating:before { content: "\f005\f005\f005\f005\f005"; color: #d6d6d6; position: absolute; left: 0; top: 0; } .star-rating span { position: absolute; left: 0; top: 0; overflow: hidden; padding-top: 1.5em; } .star-rating span:before { content: "\f005\f005\f005\f005\f005"; color: #f5b301; position: absolute; left: 0; top: 0; } .woocommerce div.product .summary .price { font-size: 30px; color: var(--rkg-green-dark); font-weight: 700; margin: 0 0 20px; display: flex; align-items: baseline; gap: 12px; font-family: var(--rkg-font-head); } .woocommerce div.product .summary .price ins { text-decoration: none; order: 1; } .woocommerce div.product .summary .price del { color: #9a9a9a; font-size: 20px; font-weight: 500; order: 2; } .woocommerce-product-details__short-description { color: #444; font-size: 16.5px; margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--rkg-border); } .woocommerce div.product .stock { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--rkg-green-dark); background: var(--rkg-mint); padding: 6px 14px; border-radius: 999px; margin: 0 0 20px; } .woocommerce div.product .stock:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rkg-green-bright); } .woocommerce div.product .stock.out-of-stock { color: #a12622; background: #fdecec; } .woocommerce div.product .stock.out-of-stock:before { background: #d13b36; } .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; margin: 0 0 26px; } .woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; min-width: 200px; padding: 16px 30px; font-size: 17px; } .woocommerce div.product form.cart .single_add_to_cart_button:before { content: "\f290"; font-family: "Font Awesome 6 Free"; font-weight: 900; } .woocommerce div.product form.cart table.variations { width: 100%; margin-bottom: 10px; } .woocommerce div.product form.cart table.variations td, .woocommerce div.product form.cart table.variations th { padding: 6px 0; text-align: left; } .woocommerce div.product form.cart .reset_variations { font-size: 13px; margin-left: 10px; } .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 14px; width: 100%; } .quantity { display: inline-flex; align-items: center; border: 1.5px solid var(--rkg-border); border-radius: 999px; background: #fff; overflow: hidden; } .quantity .qty { width: 48px; border: 0 !important; text-align: center; font: inherit; font-weight: 600; font-size: 16px; padding: 12px 0 !important; background: transparent !important; -moz-appearance: textfield; box-shadow: none !important; } .quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-btn { width: 44px; height: 100%; min-height: 48px; border: 0; background: transparent; color: var(--rkg-green-dark); font-size: 20px; cursor: pointer; transition: background .2s; } .qty-btn:hover { background: var(--rkg-section-tint); } .quantity.hidden, .quantity:has(input[type=hidden]) { display: none; } .product-assurance { display: grid; gap: 10px; margin: 0 0 26px; padding: 20px; background: var(--rkg-section-tint); border-radius: var(--rkg-radius); } .product-assurance li { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--rkg-text); } .product-assurance li i { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--rkg-green-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .product-assurance strong { color: var(--rkg-heading); display: block; font-size: 15px; } .product_meta { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--rkg-text); } .product_meta > span > span, .product_meta a { color: var(--rkg-heading); font-weight: 600; } .product_meta a:hover { color: var(--rkg-green); } .woocommerce-tabs { grid-column: 1 / -1; margin-top: 10px; background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 10px 40px 40px; } .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--rkg-border); margin: 0 0 28px; padding: 0; list-style: none; } .woocommerce-tabs ul.tabs li { margin: 0; } .woocommerce-tabs ul.tabs li a { display: block; padding: 18px 18px 16px; font-weight: 600; color: var(--rkg-text); border-bottom: 3px solid transparent; margin-bottom: -1px; } .woocommerce-tabs ul.tabs li a:hover { color: var(--rkg-green-dark); } .woocommerce-tabs ul.tabs li.active a { color: var(--rkg-green-dark); border-bottom-color: var(--rkg-accent); } .woocommerce-tabs .panel > h2:first-child { font-size: 22px; } .woocommerce-tabs .panel { color: #444; } .woocommerce-Tabs-panel--additional_information table { width: 100%; border-collapse: collapse; } .woocommerce-Tabs-panel--additional_information th, .woocommerce-Tabs-panel--additional_information td { padding: 12px 14px; border-bottom: 1px solid var(--rkg-border); text-align: left; } #reviews .commentlist { list-style: none; padding: 0; } #reviews .comment_container { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rkg-border); } #reviews .comment_container img.avatar { width: 52px; height: 52px; border-radius: 50%; } #reviews .woocommerce-noreviews { color: var(--rkg-text); } #review_form_wrapper { margin-top: 20px; padding: 28px; background: var(--rkg-section-tint); border-radius: var(--rkg-radius); } #review_form .comment-reply-title { font-family: var(--rkg-font-head); font-size: 20px; font-weight: 700; color: var(--rkg-heading); display: block; margin-bottom: 10px; } #review_form .comment-form-rating .stars a { font-size: 0; display: inline-block; margin-right: 2px; } #review_form .comment-form-rating .stars a:before { content: "\f005"; font-family: "Font Awesome 6 Free"; font-weight: 400; font-size: 20px; color: #f5b301; } #review_form .comment-form-rating .stars:hover a:before, #review_form .comment-form-rating .stars.selected a:before { font-weight: 900; } #review_form .comment-form-rating .stars a:hover ~ a:before, #review_form .comment-form-rating .stars.selected a.active ~ a:before { font-weight: 400; } #review_form input[type=text], #review_form input[type=email], #review_form textarea { width: 100%; font: inherit; padding: 12px 16px; border: 1.5px solid var(--rkg-border); border-radius: 12px; background: #fff; } #review_form .form-submit input { background: var(--rkg-green-dark); color: #fff; border: 0; border-radius: 999px; padding: 14px 30px; font-family: var(--rkg-font-head); font-weight: 600; font-size: 16px; cursor: pointer; } #review_form .form-submit input:hover { background: var(--rkg-green-bright); } .related.products, .upsells.products { grid-column: 1 / -1; margin-top: 20px; } .related.products > h2, .upsells.products > h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 28px; } /* ---------- Cart ---------- */ .wc-flow-page { padding-top: 50px; } .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper, .woocommerce-cart .woocommerce > .cart-empty, .woocommerce-cart .woocommerce > .return-to-shop, .woocommerce-cart .woocommerce > .wc-empty-cart-message { grid-column: 1 / -1; } .woocommerce-cart-form { background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 10px 28px 24px; min-width: 0; } table.shop_table { width: 100%; border-collapse: collapse; margin: 0; font-size: 15px; } table.shop_table th { font-family: var(--rkg-font-head); font-size: 14px; text-transform: uppercase; letter-spacing: .6px; color: var(--rkg-text); font-weight: 600; } table.shop_table th, table.shop_table td { padding: 16px 12px; border-bottom: 1px solid var(--rkg-border); text-align: left; vertical-align: middle; } table.shop_table tr:last-child td, table.shop_table tr:last-child th { border-bottom: 0; } .woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus, .woocommerce-NoticeGroup:focus { outline: none; } .woocommerce-cart-form .product-thumbnail img { width: 84px; height: 84px; object-fit: cover; border-radius: 14px; } .woocommerce-cart-form .product-name a { color: var(--rkg-heading); font-weight: 600; font-family: var(--rkg-font-head); font-size: 17px; } .woocommerce-cart-form .product-name a:hover { color: var(--rkg-green-dark); } .woocommerce-cart-form .product-price, .woocommerce-cart-form .product-subtotal { font-weight: 600; color: var(--rkg-heading); white-space: nowrap; } .woocommerce-cart-form .product-subtotal { color: var(--rkg-green-dark); } .woocommerce-cart-form a.remove { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; color: #a0a0a0 !important; background: #f4f4f4; transition: all .2s; } .woocommerce-cart-form a.remove:hover { background: #fdecec; color: #d13b36 !important; } .woocommerce-cart-form td.actions { padding-top: 22px; } .woocommerce-cart-form td.actions { display: table-cell; } .woocommerce-cart-form td.actions .coupon { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; } .woocommerce-cart-form td.actions .coupon label { display: none; } .woocommerce-cart-form td.actions .coupon input { width: 200px; border-radius: 999px; padding: 12px 18px; } .woocommerce-cart-form td.actions > .button { float: right; background: transparent; color: var(--rkg-green-dark) !important; } .woocommerce-cart-form td.actions > .button:hover:not(:disabled) { background: var(--rkg-green-dark); color: #fff !important; } .cart-collaterals { min-width: 0; } .cart-collaterals .cart_totals, .woocommerce-checkout-review-order, .woocommerce-order-overview, .woocommerce-customer-details, .woocommerce-order-details { background: var(--rkg-section-tint); border-radius: var(--rkg-radius-lg); padding: 30px; } .cart_totals { position: sticky; top: 140px; } .cart_totals h2, #order_review_heading { font-size: 22px; color: var(--rkg-heading); margin-bottom: 14px; } .cart_totals table.shop_table th, .cart_totals table.shop_table td { padding: 14px 0; background: transparent; } .cart_totals table.shop_table th { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--rkg-text); width: 40%; } .cart_totals table.shop_table td { text-align: right; color: var(--rkg-heading); font-weight: 600; } .cart_totals .order-total th, .cart_totals .order-total td { font-size: 20px; color: var(--rkg-heading); border-top: 2px solid rgba(6, 78, 59, .15); padding-top: 18px; } .cart_totals .order-total td { color: var(--rkg-green-dark); } .woocommerce-shipping-methods { list-style: none; padding: 0; margin: 0; } .woocommerce-shipping-methods li { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 6px; } .woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: 13px; font-weight: 400; color: var(--rkg-text); } .shipping-calculator-form { margin-top: 12px; text-align: left; } .wc-proceed-to-checkout { margin-top: 20px; } .wc-proceed-to-checkout .checkout-button { width: 100%; padding: 17px 30px; font-size: 17px; } .cart-empty.woocommerce-info { justify-content: center; flex-direction: column; text-align: center; padding: 60px 30px 20px; background: var(--rkg-section-tint); border: 0; color: var(--rkg-heading); font-size: 20px; font-family: var(--rkg-font-head); font-weight: 700; margin: 0; border-radius: var(--rkg-radius-lg) var(--rkg-radius-lg) 0 0; } .cart-empty.woocommerce-info:before { content: "\f290"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 30px; color: var(--rkg-green-dark); width: 84px; height: 84px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--rkg-shadow-sm); margin-bottom: 8px; } .return-to-shop { text-align: center; background: var(--rkg-section-tint); margin: 0; padding: 10px 30px 60px; border-radius: 0 0 var(--rkg-radius-lg) var(--rkg-radius-lg); } /* ---------- Checkout ---------- */ .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info { justify-content: flex-start; } .checkout_coupon, .woocommerce-form-login { background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 24px; margin-bottom: 24px; } .checkout_coupon { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .checkout_coupon p:first-child { width: 100%; margin: 0; } .checkout_coupon .form-row { margin: 0 !important; } .checkout_coupon .form-row-first { flex: 1; } form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; align-items: start; } form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; } form.checkout #customer_details { background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 34px; min-width: 0; } form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; padding: 30px 30px 0; align-self: start; position: relative; z-index: 1; } form.checkout #order_review { grid-column: 2; grid-row: 1; padding-top: 76px; min-width: 0; } form.checkout .col2-set .col-1, form.checkout .col2-set .col-2 { width: 100%; } form.checkout .col2-set .col-2 { margin-top: 20px; } .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-size: 22px; color: var(--rkg-heading); margin-bottom: 20px; } #ship-to-different-address label { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; cursor: pointer; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } :is(.woocommerce .site-main, .site-main .woocommerce) form .form-row-wide, :is(.woocommerce .site-main, .site-main .woocommerce) form .form-row.notes, :is(.woocommerce .site-main, .site-main .woocommerce) form #billing_address_1_field, :is(.woocommerce .site-main, .site-main .woocommerce) form #billing_address_2_field, :is(.woocommerce .site-main, .site-main .woocommerce) form #shipping_address_1_field, :is(.woocommerce .site-main, .site-main .woocommerce) form #shipping_address_2_field, :is(.woocommerce .site-main, .site-main .woocommerce) form #billing_country_field, :is(.woocommerce .site-main, .site-main .woocommerce) form #shipping_country_field { grid-column: 1 / -1; } .woocommerce-additional-fields textarea { min-height: 110px; } :is(.woocommerce .site-main, .site-main .woocommerce) form .form-row .optional { font-weight: 400; color: #999; font-size: 12px; } :is(.woocommerce .site-main, .site-main .woocommerce) form .form-row.woocommerce-invalid input.input-text, :is(.woocommerce .site-main, .site-main .woocommerce) form .form-row.woocommerce-invalid select { border-color: #d13b36; } .woocommerce-checkout-review-order-table { background: transparent; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 12px 0 !important; } .woocommerce-checkout-review-order-table td:last-child, .woocommerce-checkout-review-order-table th:last-child { text-align: right; } .woocommerce-checkout-review-order-table .product-name { color: var(--rkg-heading); font-weight: 500; } .woocommerce-checkout-review-order-table .product-quantity { color: var(--rkg-green-dark); font-weight: 700; } .woocommerce-checkout-review-order-table tfoot th { text-transform: none; letter-spacing: 0; font-size: 15px; } .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td { font-size: 20px; color: var(--rkg-green-dark); border-top: 2px solid rgba(6, 78, 59, .15); } #payment { margin-top: 20px; } #payment .wc_payment_methods { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; } #payment .wc_payment_method { background: #fff; border: 1.5px solid var(--rkg-border); border-radius: 14px; padding: 14px 16px; } #payment .wc_payment_method:has(input:checked) { border-color: var(--rkg-green); } #payment .wc_payment_method > label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--rkg-heading); cursor: pointer; margin-left: 6px; } #payment .wc_payment_method > label img { max-height: 24px; display: inline-block; } #payment .payment_box { font-size: 14px; color: var(--rkg-text); margin-top: 10px; padding: 12px 14px; background: var(--rkg-section-tint); border-radius: 10px; } #payment .payment_box p:last-child { margin: 0; } #payment .place-order { margin: 0; } .woocommerce-terms-and-conditions-wrapper { font-size: 13px; margin-bottom: 16px; } .woocommerce-privacy-policy-text p { font-size: 13px; } #place_order { width: 100%; padding: 17px; font-size: 17px; } /* Order received */ .woocommerce-order { display: grid; gap: 28px; } .woocommerce-thankyou-order-received { font-family: var(--rkg-font-head); font-size: 26px; font-weight: 700; color: var(--rkg-green-dark); text-align: center; padding: 30px; background: var(--rkg-section-tint); border-radius: var(--rkg-radius-lg); margin: 0; } .woocommerce-order-overview { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; } .woocommerce-order-overview li { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--rkg-text); } .woocommerce-order-overview li strong { display: block; text-transform: none; letter-spacing: 0; font-size: 17px; color: var(--rkg-heading); margin-top: 4px; } .woocommerce-order-details__title, .woocommerce-column__title { font-size: 22px; } .woocommerce-customer-details address { font-style: normal; line-height: 1.8; } .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* ---------- My Account ---------- */ .woocommerce-account .wc-flow-content > .woocommerce { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; } .woocommerce-account .wc-flow-content > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-MyAccount-navigation { background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 14px; position: sticky; top: 140px; } .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 4px; } .woocommerce-MyAccount-navigation a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; color: var(--rkg-heading); font-weight: 500; } .woocommerce-MyAccount-navigation a:before { font-family: "Font Awesome 6 Free"; font-weight: 900; width: 18px; text-align: center; color: var(--rkg-green); font-size: 14px; } .woocommerce-MyAccount-navigation-link--dashboard a:before { content: "\f015"; } .woocommerce-MyAccount-navigation-link--orders a:before { content: "\f290"; } .woocommerce-MyAccount-navigation-link--downloads a:before { content: "\f019"; } .woocommerce-MyAccount-navigation-link--edit-address a:before { content: "\f3c5"; } .woocommerce-MyAccount-navigation-link--payment-methods a:before { content: "\f09d"; } .woocommerce-MyAccount-navigation-link--edit-account a:before { content: "\f007"; } .woocommerce-MyAccount-navigation-link--customer-logout a:before { content: "\f2f5"; } .woocommerce-MyAccount-navigation a:hover { background: var(--rkg-section-tint); color: var(--rkg-green-dark); } .woocommerce-MyAccount-navigation .is-active a { background: var(--rkg-green-dark); color: #fff; } .woocommerce-MyAccount-navigation .is-active a:before { color: #fff; } .woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 36px; min-width: 0; } .woocommerce-MyAccount-content > p:first-child { font-size: 17px; } .woocommerce-MyAccount-content table.shop_table { font-size: 14px; } .woocommerce-MyAccount-content .woocommerce-orders-table .button { padding: 8px 16px; font-size: 13px; } .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; } .woocommerce-Address { background: var(--rkg-section-tint); border-radius: var(--rkg-radius); padding: 24px; } .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .woocommerce-Address-title h2 { font-size: 20px; margin: 0; } .woocommerce-Address address { font-style: normal; margin-top: 10px; } .woocommerce-EditAccountForm fieldset { border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius); padding: 20px 24px; margin: 20px 0; } .woocommerce-EditAccountForm legend { font-family: var(--rkg-font-head); font-weight: 700; padding: 0 8px; color: var(--rkg-heading); } .woocommerce-EditAccountForm .form-row-first, .woocommerce-EditAccountForm .form-row-last { display: inline-block; width: calc(50% - 10px); vertical-align: top; } .woocommerce-EditAccountForm .form-row-first { margin-right: 16px !important; } /* Login / register */ .woocommerce-account:not(.logged-in) .wc-flow-content > .woocommerce { display: block; max-width: 1000px; margin: 0 auto; } .woocommerce-account:not(.logged-in) .wc-flow-content > .woocommerce:not(:has(.u-columns)):not(:has(.rkg-auth)) { max-width: 520px; background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 40px; box-shadow: var(--rkg-shadow); } .woocommerce-account:not(.logged-in) .wc-flow-content > .woocommerce:not(:has(.u-columns)):not(:has(.rkg-auth)) > h2 { text-align: center; } .woocommerce-form-login__submit { width: 100%; } .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .u-columns.col2-set > .u-column1, .u-columns.col2-set > .u-column2 { background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 38px; box-shadow: var(--rkg-shadow-sm); } .u-columns.col2-set > .u-column2 { background: var(--rkg-section-tint); border-color: transparent; box-shadow: none; } .u-columns h2, .woocommerce-account:not(.logged-in) .wc-flow-content > .woocommerce > h2 { font-size: 26px; margin-bottom: 22px; } .woocommerce-form-login, .woocommerce-form-register { border: 0; padding: 0; margin: 0; background: transparent; } .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .woocommerce-LostPassword { text-align: center; } .woocommerce-form-login__submit, .woocommerce-form-register__submit { min-width: 140px; } .woocommerce-LostPassword { margin: 0; font-size: 14px; } .woocommerce-password-strength { font-size: 13px; margin-top: 6px; padding: 6px 12px; border-radius: 8px; } .woocommerce-password-strength.strong { background: #e8f6e1; color: var(--rkg-green-dark); } .woocommerce-password-strength.short, .woocommerce-password-strength.bad { background: #fdecec; color: #a12622; } .woocommerce-password-strength.good { background: #fff5dc; color: #7a5a00; } .woocommerce-password-hint { font-size: 12px; color: var(--rkg-text); } .password-input { position: relative; display: block; } .show-password-input { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; width: 30px; height: 30px; } .show-password-input:after { content: "\f06e"; font-family: "Font Awesome 6 Free"; font-weight: 400; color: #888; } .show-password-input.display-password:after { content: "\f070"; } .woocommerce-ResetPassword { max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 38px; } /* WooCommerce block-based cart/checkout (if the pages are ever switched to blocks) */ .wc-block-components-button:not(.is-link) { width: 100%; } .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { font-family: var(--rkg-font-body); } /* ---------- Cart drawer ---------- */ body.cart-drawer-open { overflow: hidden; } .cart-drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 25, 0, .45); z-index: 2100; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .cart-drawer-open .cart-drawer-backdrop { opacity: 1; visibility: visible; } .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 2101; background: #fff; display: flex; flex-direction: column; transform: translateX(105%); transition: transform .35s ease; box-shadow: -20px 0 50px rgba(0,0,0,.15); outline: none; } .cart-drawer-open .cart-drawer { transform: none; } .admin-bar .cart-drawer { top: 32px; } .cart-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--rkg-border); } .cart-drawer-head h3 { margin: 0; font-size: 20px; color: var(--rkg-heading); display: flex; align-items: center; gap: 10px; } .cart-drawer-head h3 > i { color: var(--rkg-green-dark); } .cart-drawer-count { color: var(--rkg-text); font-weight: 500; font-size: 16px; } .cart-drawer-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--rkg-section-tint); color: var(--rkg-heading); font-size: 17px; cursor: pointer; } .cart-drawer-close:hover { background: var(--rkg-green-dark); color: #fff; } .cart-drawer .widget_shopping_cart_content { flex: 1; display: flex; flex-direction: column; min-height: 0; } .cart-drawer .woocommerce-mini-cart { flex: 1; overflow-y: auto; padding: 8px 24px; margin: 0; } .cart-drawer .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto; column-gap: 14px; padding: 16px 36px 16px 0; border-bottom: 1px solid var(--rkg-border); } .cart-drawer .woocommerce-mini-cart-item > a:not(.remove) { display: contents; color: var(--rkg-heading); font-family: var(--rkg-font-head); font-weight: 600; font-size: 16px; line-height: 1.3; } .cart-drawer .woocommerce-mini-cart-item img { grid-row: 1 / span 2; width: 72px; height: 72px; object-fit: cover; border-radius: 12px; } .cart-drawer .woocommerce-mini-cart-item a:not(.remove):hover { color: var(--rkg-green-dark); } .cart-drawer .woocommerce-mini-cart-item .quantity { border: 0; border-radius: 0; overflow: visible; display: block; grid-column: 2; font-size: 14px; color: var(--rkg-text); margin-top: 4px; } .cart-drawer .woocommerce-mini-cart-item .quantity .amount { color: var(--rkg-green-dark); font-weight: 700; } .cart-drawer .woocommerce-mini-cart-item dl.variation { grid-column: 2; font-size: 13px; margin: 4px 0 0; } .cart-drawer a.remove { position: absolute; right: 0; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f4f4f4; color: #999 !important; font-size: 20px; line-height: 1; } .cart-drawer a.remove:hover { background: #fdecec; color: #d13b36 !important; } .cart-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 18px 24px 6px; border-top: 1px solid var(--rkg-border); font-size: 16px; color: var(--rkg-heading); background: var(--rkg-section-tint); } .cart-drawer .woocommerce-mini-cart__total .amount { font-family: var(--rkg-font-head); font-size: 22px; font-weight: 700; color: var(--rkg-green-dark); } .cart-drawer .mini-cart-note { margin: 0; padding: 0 24px 14px; font-size: 13px; color: var(--rkg-text); background: var(--rkg-section-tint); display: flex; gap: 8px; align-items: center; } .cart-drawer .mini-cart-note i { color: var(--rkg-green); } .cart-drawer .woocommerce-mini-cart__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0 24px 24px; background: var(--rkg-section-tint); } .cart-drawer .woocommerce-mini-cart__buttons .button { padding: 14px 16px; font-size: 15px; } .cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) { background: #fff; color: var(--rkg-green-dark) !important; } .cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout):hover { background: var(--rkg-green-dark); color: #fff !important; } .cart-drawer .woocommerce-mini-cart__empty-message { margin: auto 24px 0; text-align: center; font-family: var(--rkg-font-head); font-size: 19px; font-weight: 600; color: var(--rkg-heading); padding-top: 40px; } .cart-drawer .woocommerce-mini-cart__empty-message:before { content: "\f290"; font-family: "Font Awesome 6 Free"; font-weight: 900; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; background: var(--rkg-mint); color: var(--rkg-green-dark); font-size: 30px; } .cart-drawer .mini-cart-empty-cta { text-align: center; margin: 18px 24px auto; } .cart-drawer .blockUI.blockOverlay { background: rgba(255,255,255,.6) !important; } @media (max-width: 782px) { .admin-bar .cart-drawer { top: 46px; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1200px) { .products-grid, ul.products { grid-template-columns: repeat(3, 1fr); } .woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, 1fr); } .values-grid { grid-template-columns: repeat(2, 1fr); } form.checkout { grid-template-columns: minmax(0, 1fr) 380px; } .woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr) 340px; } } @media (max-width: 991px) { .shop-layout, .content-layout { grid-template-columns: 1fr; } .shop-sidebar, .help-aside { position: static; } .shop-sidebar { order: -1; grid-template-columns: 1fr; } .shop-help-card, .shop-sidebar .widget-area { display: none; } .shop-filter-card { padding: 16px 18px; } .shop-filter-card summary { margin: 0; } .shop-filter-card[open] summary { margin-bottom: 10px; } .shop-filter-card summary:after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 13px; margin-left: auto; transition: transform .2s; } .shop-filter-card[open] summary:after { transform: rotate(180deg); } .shop-cat-list { display: flex; flex-wrap: wrap; gap: 8px; } .shop-cat-list li a { border: 1px solid var(--rkg-border); border-radius: 999px; padding: 7px 14px; font-size: 14px; } .help-aside { grid-template-columns: 1fr 1fr; } .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); } .woocommerce div.product { grid-template-columns: 1fr; gap: 30px; } .woocommerce div.product div.images { position: static; } .woocommerce-tabs { padding: 6px 24px 28px; } .woocommerce-cart .woocommerce, form.checkout, .woocommerce-account .wc-flow-content > .woocommerce { grid-template-columns: 1fr; } .cart_totals, .woocommerce-MyAccount-navigation { position: static; } form.checkout #order_review_heading, form.checkout #order_review { grid-column: 1; grid-row: auto; } form.checkout #order_review_heading { background: var(--rkg-section-tint); border-radius: var(--rkg-radius-lg) var(--rkg-radius-lg) 0 0; } form.checkout #order_review { padding-top: 14px; border-radius: 0 0 var(--rkg-radius-lg) var(--rkg-radius-lg); } .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; } .woocommerce-MyAccount-navigation a { padding: 10px 14px; font-size: 14px; } .about-story-grid { grid-template-columns: 1fr; gap: 50px; } .about-img-main { aspect-ratio: 16 / 10; } .about-badge { right: 16px; bottom: -20px; } .range-grid { grid-template-columns: repeat(2, 1fr); } .cta-band-inner { flex-direction: column; align-items: flex-start; padding: 40px; } .contact-cards { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: 1fr; } .post-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .about-story, .about-values, .about-range { padding: 60px 0; } .products-grid, ul.products, .woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, 1fr); gap: 14px; } main.site-main { padding: 40px 0 60px; } .page-hero { padding: 20px 0 18px; } .page-hero:before, .page-hero:after { width: 60px; height: 50px; } .page-hero-sub { font-size: 14px; } .rkg-breadcrumbs li[aria-current] { max-width: 160px; } .content-card { padding: 28px 22px; } .page-thumb { margin: 0 0 24px; } .help-aside { grid-template-columns: 1fr; } .post-grid { grid-template-columns: 1fr; } .shop-toolbar { border-radius: 18px; padding: 12px 14px; } .shop-toolbar .woocommerce-ordering, .shop-toolbar .woocommerce-ordering select { width: 100%; } .woocommerce div.product .summary .price { font-size: 26px; } .woocommerce div.product form.cart .single_add_to_cart_button { min-width: 0; } .woocommerce-tabs { padding: 0 18px 22px; } .woocommerce-tabs ul.tabs li a { padding: 14px 12px 12px; font-size: 15px; } /* Responsive cart table -> stacked cards */ .woocommerce-cart-form { padding: 6px 16px 16px; } .woocommerce-cart-form table.shop_table thead { display: none; } .woocommerce-cart-form table.shop_table, .woocommerce-cart-form table.shop_table tbody, .woocommerce-cart-form table.shop_table tr, .woocommerce-cart-form table.shop_table td { display: block; width: 100%; } .woocommerce-cart-form tr.cart_item { position: relative; display: grid !important; grid-template-columns: 80px 1fr; gap: 4px 14px; padding: 16px 0; border-bottom: 1px solid var(--rkg-border); } .woocommerce-cart-form tr.cart_item td { border: 0; padding: 0; } .woocommerce-cart-form tr.cart_item td.product-thumbnail { grid-row: 1 / span 4; } .woocommerce-cart-form tr.cart_item td.product-thumbnail img { width: 80px; height: 80px; } .woocommerce-cart-form tr.cart_item td.product-remove { position: absolute; right: 0; top: 12px; width: auto; } .woocommerce-cart-form tr.cart_item td.product-name { padding-right: 40px; } .woocommerce-cart-form tr.cart_item td[data-title]:not(.product-name):before { content: attr(data-title) ": "; font-size: 13px; color: var(--rkg-text); font-weight: 500; margin-right: 6px; } .woocommerce-cart-form tr.cart_item td.product-quantity { display: flex; align-items: center; margin: 4px 0; } .woocommerce-cart-form td.actions { padding: 16px 0 0 !important; } .woocommerce-cart-form td.actions .coupon { display: flex; width: 100%; } .woocommerce-cart-form td.actions .coupon input { flex: 1; width: auto; min-width: 0; } .woocommerce-cart-form td.actions > .button { float: none; width: 100%; margin-top: 12px; } .cart-collaterals .cart_totals, .woocommerce-checkout-review-order { padding: 22px; } form.checkout #customer_details { padding: 22px; } form.checkout #order_review_heading { padding: 22px 22px 0; } form.checkout #order_review { padding-top: 10px; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; } .woocommerce-MyAccount-content { padding: 22px; } .woocommerce-Addresses, .woocommerce-columns--addresses, .u-columns.col2-set { grid-template-columns: 1fr; } .u-columns.col2-set > .u-column1, .u-columns.col2-set > .u-column2 { padding: 26px 22px; } .woocommerce-account:not(.logged-in) .wc-flow-content > .woocommerce:not(:has(.u-columns)) { padding: 26px 22px; } .woocommerce-EditAccountForm .form-row-first, .woocommerce-EditAccountForm .form-row-last { width: 100%; margin-right: 0 !important; } .woocommerce-MyAccount-content table.shop_table thead { display: none; } .woocommerce-MyAccount-content table.shop_table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rkg-border); } .woocommerce-MyAccount-content table.shop_table td { display: flex; justify-content: space-between; border: 0; padding: 4px 0; } .woocommerce-MyAccount-content table.shop_table td:before { content: attr(data-title); font-weight: 600; color: var(--rkg-heading); } .values-grid { grid-template-columns: 1fr; } .range-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .range-card span { left: 14px; right: 14px; bottom: 12px; font-size: 16px; } .range-card span i { display: none; } .cta-band { padding-bottom: 150px; } .cta-band-inner { padding: 32px 24px; border-radius: 22px; } .contact-cards { grid-template-columns: 1fr 1fr; gap: 12px; } .contact-card { padding: 18px; } .contact-card strong { font-size: 14.5px; } .contact-form-card { padding: 26px 20px; } .rkg-form .form-row.two { grid-template-columns: 1fr; gap: 0; } .rkg-cart-toast { right: 16px; left: 16px; width: auto; top: 90px; } } @media (max-width: 400px) { .contact-cards { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Review prompt / rating link on single product */ .rkg-review-prompt { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; font-size: 14px; } .rkg-empty-stars { color: #f5b301; letter-spacing: 2px; font-size: 13px; } .rkg-review-prompt a, .woocommerce-product-rating .woocommerce-review-link { color: var(--rkg-green-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(6, 78, 59, .3); } .rkg-review-prompt a:hover, .woocommerce-product-rating .woocommerce-review-link:hover { text-decoration-color: currentColor; } #reviews #comments > h2 { font-size: 22px; } #review_form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; } #review_form .comment-form-cookies-consent input { margin-top: 4px; accent-color: var(--rkg-green-dark); } #review_form label { display: block; font-weight: 600; font-size: 14px; color: var(--rkg-heading); margin-bottom: 6px; } #review_form .comment-form-cookies-consent label { display: inline; font-weight: 400; color: var(--rkg-text); margin: 0; } /* ---------- Login / Register (tabbed card) ---------- */ .rkg-auth { max-width: 500px; margin: 0 auto; } .rkg-auth-card { background: #fff; border: 1px solid var(--rkg-border); border-radius: 20px; box-shadow: 0 20px 50px rgba(6, 78, 59, .10); overflow: hidden; } .rkg-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--rkg-section-tint); padding: 6px; gap: 6px; } .rkg-auth-tab { border: 0; background: transparent; padding: 13px 10px; border-radius: 14px; font-weight: 600; font-size: 15px; color: #45584f; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; } .rkg-auth-tab:hover { color: #064e3b; } .rkg-auth-tab.is-active { background: #fff; color: #064e3b; box-shadow: 0 2px 10px rgba(6, 78, 59, .12); } .rkg-auth-panel { display: none; padding: 34px 36px 30px; } .rkg-auth-panel.is-active { display: block; animation: rkgAuthIn .3s ease; } @keyframes rkgAuthIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .rkg-auth--single .rkg-auth-panel { display: block; } .rkg-auth-head { text-align: center; margin-bottom: 24px; } .rkg-auth-head h2 { font-size: 26px; margin: 0 0 6px; } .rkg-auth-head p { margin: 0; color: #667a70; font-size: 14.5px; } .rkg-auth .form-row { margin: 0 0 16px; } .rkg-auth .form-row label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; } .rkg-auth input.input-text { width: 100%; height: 48px; padding: 0 16px; border: 1px solid #d9e2dc; border-radius: 12px; background: #fff; box-shadow: none; transition: border-color .2s, box-shadow .2s; } .rkg-auth input.input-text:focus { border-color: #064e3b; box-shadow: 0 0 0 3px rgba(6, 78, 59, .14); outline: 0; } .rkg-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 20px; font-size: 14px; flex-wrap: wrap; } .rkg-auth-row label { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; } .rkg-auth-link, .rkg-auth-switch a { color: #064e3b; font-weight: 600; text-decoration: none; } .rkg-auth-link:hover, .rkg-auth-switch a:hover { color: #3f8417; text-decoration: underline; } .rkg-auth-note { font-size: 13.5px; color: #667a70; margin: 0 0 16px; } .rkg-auth .rkg-auth-submit { display: block; width: 100%; height: 50px; border-radius: 30px; margin-top: 4px; } .rkg-auth-switch { text-align: center; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--rkg-border); font-size: 14.5px; color: #667a70; } @media (max-width: 575px) { .rkg-auth-panel { padding: 26px 20px 24px; } } .rkg-auth-head h2 { color: #064e3b !important; } .rkg-auth .woocommerce-privacy-policy-text { margin: 0 0 18px; font-size: 13px; color: #667a70; } /* Nested sub-categories in the shop sidebar */ .shop-cat-list .shop-cat-sub { list-style: none; margin: 2px 0 6px 14px; padding: 0 0 0 10px; border-left: 2px solid var(--rkg-border); } .shop-cat-list .shop-cat-sub li a { padding: 6px 10px; font-size: 14px; } .shop-cat-list .shop-cat-sub .shop-cat-sub li a { font-size: 13px; } @media (max-width: 991px) { .shop-cat-list li.is-open { flex-basis: 100%; } .shop-cat-list .shop-cat-sub { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; border: 0; } } /* Sub-category list under a top-level category: show 6 rows, then scroll with a slim green scrollbar. */ @media (min-width: 992px) { .shop-cat-list > li > .shop-cat-sub { --rkg-row-h: 36px; max-height: calc(var(--rkg-row-h) * 6); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--rkg-green-dark) var(--rkg-section-tint); } .shop-cat-list > li > .shop-cat-sub > li > a { box-sizing: border-box; min-height: var(--rkg-row-h); line-height: 20px; } .shop-cat-list > li > .shop-cat-sub::-webkit-scrollbar { width: 7px; } .shop-cat-list > li > .shop-cat-sub::-webkit-scrollbar-track { background: var(--rkg-section-tint); border-radius: 999px; } .shop-cat-list > li > .shop-cat-sub::-webkit-scrollbar-thumb { background: var(--rkg-green-dark); border-radius: 999px; } .shop-cat-list > li > .shop-cat-sub::-webkit-scrollbar-thumb:hover { background: #3f8417; } } /* ---------- About page redesign (2026-10-13) ---------- */ .ab-intro { padding: 36px 0 20px; } .ab-banner { border-radius: 28px; overflow: hidden; box-shadow: var(--rkg-shadow-lg); line-height: 0; } .ab-banner img { width: 100%; height: auto; display: block; } .ab-welcome { text-align: center; max-width: 820px; margin: 0 auto; } .ab-banner + .ab-welcome { margin-top: 44px; } .ab-tagline, .ab-tagline p { font-family: var(--rkg-font-head); font-size: clamp(24px, 3.2vw, 36px); line-height: 1.3; color: var(--rkg-green-dark); font-weight: 600; margin: 0; } .ab-tagline em { font-style: italic; } .ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; } .ab-stat { background: #fff; border-radius: var(--rkg-radius-lg); padding: 26px 24px; box-shadow: var(--rkg-shadow-sm); display: grid; grid-template-columns: 54px 1fr; column-gap: 16px; align-items: center; } .ab-stat i { grid-row: span 2; width: 54px; height: 54px; border-radius: 16px; background: var(--rkg-mint); color: var(--rkg-green-dark); display: flex; align-items: center; justify-content: center; font-size: 21px; } .ab-stat strong { font-family: var(--rkg-font-head); font-size: 24px; color: var(--rkg-green-dark); line-height: 1.2; } .ab-stat span { font-size: 14px; color: var(--rkg-text); } .ab-story { padding: 50px 0 40px; } .ab-step { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; padding: 34px 0; } .ab-step.is-flip { grid-template-columns: 1fr 300px; } .ab-step.is-flip .ab-step-badge { order: 2; } .ab-step-badge { position: relative; height: 230px; border-radius: 28px; background: linear-gradient(145deg, var(--rkg-green-dark), #0b6b4f); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--rkg-shadow); } .ab-step-badge .ab-step-num { position: absolute; left: 22px; top: 8px; font-family: var(--rkg-font-head); font-size: 86px; font-weight: 800; line-height: 1; color: rgba(255,255,255,.12); } .ab-step-badge i { font-size: 74px; color: var(--rkg-accent); filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); } .ab-step-copy h2 { font-size: clamp(24px, 2.6vw, 32px); color: var(--rkg-green-dark); margin: 0 0 6px; } .ab-step-copy h3 { font-size: 18px; font-weight: 600; color: var(--rkg-green); margin: 0 0 16px; } .ab-step-copy p { font-size: 16.5px; line-height: 1.85; margin: 0; } .ab-why { padding: 80px 0; background: var(--rkg-green-dark); } .ab-why .section-eyebrow { color: var(--rkg-accent); } .ab-why .section-title { color: #fff; } .ab-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .ab-why-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--rkg-radius-lg); padding: 30px 24px; transition: transform .25s, background-color .25s; } .ab-why-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.12); } .ab-why-card i { width: 54px; height: 54px; border-radius: 16px; background: var(--rkg-accent); color: var(--rkg-green-darker); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 20px; } .ab-why-card h4 { color: #fff; font-size: 18px; margin: 0 0 10px; } .ab-why-card p { color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 1.7; margin: 0; } .ab-closing { padding: 80px 0 40px; } .ab-closing-card { max-width: 860px; margin: 0 auto; text-align: center; background: #fff; border-radius: 32px; padding: 56px 48px; box-shadow: var(--rkg-shadow); } .ab-closing-card > i { font-size: 34px; color: var(--rkg-green-bright); margin-bottom: 18px; } .ab-closing-card p { font-family: var(--rkg-font-head); font-size: clamp(20px, 2.4vw, 27px); line-height: 1.5; color: var(--rkg-green-dark); margin: 0 0 18px; } .ab-closing-card strong { display: block; color: var(--rkg-green); font-size: 16px; } .ab-closing-card .about-actions { justify-content: center; } @media (max-width: 991px) { .ab-stats { grid-template-columns: 1fr; } .ab-step, .ab-step.is-flip { grid-template-columns: 1fr; gap: 26px; } .ab-step.is-flip .ab-step-badge { order: 0; } .ab-step-badge { height: 170px; } .ab-why-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .ab-intro { padding-top: 26px; } .ab-banner + .ab-welcome { margin-top: 30px; } .ab-why { padding: 56px 0; } .ab-why-grid { grid-template-columns: 1fr; } .ab-closing-card { padding: 38px 22px; border-radius: 24px; } .ab-banner { border-radius: 18px; } } /* ---------- My Account > View order layout ---------- */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details { margin: 24px 0 0; padding: 28px 30px; border: 1px solid var(--rkg-border); } .woocommerce-account .woocommerce-MyAccount-content > p:first-child { line-height: 2; margin-bottom: 0; } .woocommerce-account .woocommerce-order-details__title, .woocommerce-account .woocommerce-column__title { color: var(--rkg-green-dark) !important; font-size: 22px; margin: 0 0 16px; } .woocommerce-account .woocommerce-order-details table.shop_table { margin: 0; border: 0; background: transparent; width: 100%; } .woocommerce-account .woocommerce-order-details table.shop_table th, .woocommerce-account .woocommerce-order-details table.shop_table td { padding: 14px 10px; background: transparent; vertical-align: middle; } .woocommerce-account .woocommerce-order-details table.shop_table td:last-child, .woocommerce-account .woocommerce-order-details table.shop_table th:last-child { text-align: right; white-space: nowrap; } .woocommerce-account .woocommerce-order-details tfoot tr:last-child th, .woocommerce-account .woocommerce-order-details tfoot tr:last-child td { font-weight: 700; font-size: 17px; color: var(--rkg-heading); } .woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses { gap: 30px; } .woocommerce-account .woocommerce-customer-details address { padding: 0; border: 0; margin: 0; color: var(--rkg-text); } .woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--phone, .woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--email { margin: 6px 0 0; } @media (max-width: 767px) { .woocommerce-account .woocommerce-order-details, .woocommerce-account .woocommerce-customer-details { padding: 20px 16px !important; } } /* Order item thumbnail (view order / order received) */ .rkg-order-item { display: inline-flex; align-items: center; gap: 14px; } .rkg-order-item .rkg-order-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--rkg-border); background: #fff; flex: 0 0 64px; margin: 0; } .rkg-order-item-name { min-width: 0; } @media (max-width: 575px) { .rkg-order-item .rkg-order-thumb { width: 52px; height: 52px; flex-basis: 52px; } } /* ---------- My Account > Addresses: two equal cards ---------- */ .woocommerce-account .woocommerce-Addresses.u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; } .woocommerce-account .woocommerce-Addresses .woocommerce-Address, .woocommerce-account .woocommerce-Addresses.col2-set > .u-column1, .woocommerce-account .woocommerce-Addresses.col2-set > .u-column2 { width: 100%; max-width: none; float: none; margin: 0; box-sizing: border-box; background: var(--rkg-section-tint); border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); box-shadow: none; padding: 26px 28px; } .woocommerce-account .woocommerce-Address-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; } .woocommerce-account .woocommerce-Address-title h2 { font-size: 22px; margin: 0; color: var(--rkg-green-dark) !important; } .woocommerce-account .woocommerce-Address-title a.edit { font-size: 14px; font-weight: 600; white-space: nowrap; } .woocommerce-account .woocommerce-Address address { margin: 0; line-height: 1.8; color: var(--rkg-text); } @media (max-width: 767px) { .woocommerce-account .woocommerce-Addresses.u-columns { grid-template-columns: 1fr; } .woocommerce-account .woocommerce-Addresses .woocommerce-Address { padding: 20px 18px; } } .rkg-order-item { vertical-align: middle; } .rkg-order-item-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .rkg-order-item-name .product-quantity { display: inline; width: auto; font-weight: 600; color: var(--rkg-text); } .woocommerce-account .woocommerce-table--order-details td.woocommerce-table__product-name { vertical-align: middle; } .woocommerce-MyAccount-navigation-link--track-order a:before { content: "\f0d1"; } /* ---------- Track Your Parcel page ---------- */ .track-page { padding: 50px 0 70px; } .track-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 14px; } .track-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 34px 24px 28px; background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); box-shadow: var(--rkg-shadow-sm); min-width: 0; } .track-num { position: absolute; top: 14px; left: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--rkg-green-dark); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; } .track-icon { width: 76px; height: 76px; border-radius: 50%; background: var(--rkg-section-tint); color: var(--rkg-green-dark); font-size: 32px; display: inline-flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--rkg-border); } .track-icon-wa { background: #25d366; color: #fff; } .track-step h3 { font-size: 19px; margin: 6px 0 0; color: var(--rkg-green-dark); text-transform: uppercase; letter-spacing: .3px; } .track-step p { margin: 0 0 8px; font-size: 14px; color: var(--rkg-text); } .track-step input[type="text"], .track-step input[type="email"] { width: 100%; box-sizing: border-box; margin-top: auto; padding: 13px 16px; border: 1px solid var(--rkg-border); border-radius: 999px; background: var(--rkg-section-tint); font-size: 15px; text-align: center; } .track-step input:focus { outline: 2px solid var(--rkg-green-bright); border-color: transparent; background: #fff; } .track-arrow { align-self: center; color: var(--rkg-green-bright); font-size: 22px; } .track-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 13px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .3px; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s; } .track-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.15); } .track-btn-wa { margin-top: auto; background: #25a244; color: #fff !important; } .track-btn-mail { background: var(--rkg-section-tint); color: var(--rkg-green-dark) !important; border: 1px solid var(--rkg-border); } .track-error { margin: 18px 0 0; padding: 12px 18px; text-align: center; background: #fdecea; color: #b3261e; border-radius: 12px; font-weight: 600; } .track-preview { max-width: 520px; margin: 34px auto 0; text-align: center; } .track-preview-label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--rkg-text); margin-bottom: 8px; } .track-bubble { display: inline-block; text-align: left; padding: 14px 18px; background: #dcf8c6; color: #1a1a1a; border-radius: 14px 14px 4px 14px; font-size: 15px; line-height: 1.5; box-shadow: 0 2px 6px rgba(0,0,0,.08); } .track-self { max-width: 640px; margin: 50px auto 0; padding: 30px; background: var(--rkg-section-tint); border-radius: var(--rkg-radius-lg); } .track-self h2 { font-size: 22px; margin: 0 0 6px; color: var(--rkg-green-dark); } .track-self > p { margin: 0 0 16px; } .track-self .woocommerce-form-track-order p.form-row { width: 100%; float: none; } .track-self .woocommerce-form-track-order input.input-text { width: 100%; box-sizing: border-box; } .track-help { text-align: center; margin: 34px 0 0; font-weight: 600; } @media (max-width: 991px) { .track-steps { grid-template-columns: 1fr; } .track-arrow { transform: rotate(90deg); justify-self: center; } } .track-ok { margin: 18px 0 0; padding: 12px 18px; text-align: center; background: #e6f4ea; color: #1e6b34; border-radius: 12px; font-weight: 600; } button.track-btn { border: 0; font-family: inherit; } button.track-btn-mail { border: 1px solid var(--rkg-border); } button.track-btn:disabled { opacity: .7; cursor: wait; } .rkg-ajax-msg { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; } .rkg-ajax-msg.is-success { background: #e6f4ea; color: #1e6b34; } .rkg-ajax-msg.is-error { background: #fdecea; color: #b3261e; } .is-loading { opacity: .7; cursor: wait; } .rkg-track-note { margin: 18px 0; padding: 14px 18px; background: var(--rkg-section-tint); border-radius: 12px; font-weight: 600; } .rkg-track-note i { color: var(--rkg-green-dark); margin-right: 6px; } /* ---------- Checkout: returning-customer login ---------- */ .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 14px 20px; background: #fff; border: 1px solid var(--rkg-border); border-left: 4px solid var(--rkg-green-bright); border-radius: 14px; color: var(--rkg-heading); font-weight: 600; } .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info:before { content: "\f007"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: static; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--rkg-section-tint); color: var(--rkg-green-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a.showlogin { margin-left: auto; padding: 8px 18px; border-radius: 999px; background: var(--rkg-green-dark); color: #fff !important; text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background-color .2s, transform .2s; } .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a.showlogin:hover { background: var(--rkg-green-bright); transform: translateY(-1px); } .woocommerce-checkout form.woocommerce-form-login { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; align-items: start; background: #fff; border: 1px solid var(--rkg-border); border-radius: var(--rkg-radius-lg); padding: 26px 28px; margin: 0 0 26px; box-shadow: var(--rkg-shadow-sm); } .woocommerce-checkout form.woocommerce-form-login > p:first-of-type { grid-column: 1 / -1; margin: 0 0 8px; color: var(--rkg-text); font-size: 14px; } .woocommerce-checkout form.woocommerce-form-login .form-row { width: 100%; float: none; margin: 0 0 12px; padding: 0; } .woocommerce-checkout form.woocommerce-form-login .form-row label { font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--rkg-heading); } .woocommerce-checkout form.woocommerce-form-login .clear { display: none; } .woocommerce-checkout form.woocommerce-form-login input.input-text { background: var(--rkg-cream) !important; border: 1px solid var(--rkg-border); height: 48px; } .woocommerce-checkout form.woocommerce-form-login input.input-text:focus { background: #fff !important; border-color: var(--rkg-green-bright); outline: 2px solid rgba(99, 187, 55, .25); } .woocommerce-checkout form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 4px 0 0; } .woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__rememberme { order: 1; display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; } .woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__submit { order: 2; width: auto; min-width: 180px; margin: 0; } .woocommerce-checkout form.woocommerce-form-login .lost_password { grid-column: 1 / -1; margin: 6px 0 0; font-size: 14px; } .woocommerce-checkout form.woocommerce-form-login .lost_password a { font-weight: 600; } @media (max-width: 640px) { .woocommerce-checkout form.woocommerce-form-login { grid-template-columns: 1fr; padding: 20px 18px; } .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info { flex-wrap: wrap; } .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a.showlogin { margin-left: 0; } .woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__submit { width: 100%; } } /* Low stock notice under Add to cart */ .rkg-low-stock { margin: 14px 0 18px; max-width: 360px; } .rkg-low-stock-text { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--rkg-text); line-height: 1.3; } .rkg-low-stock-text strong { color: #c2410c; font-weight: 700; } .rkg-low-stock-dot { position: relative; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #ea580c; } .rkg-low-stock-dot:after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #ea580c; opacity: .5; animation: rkgStockPulse 1.8s ease-out infinite; } .rkg-low-stock-bar { display: block; height: 5px; margin-top: 9px; border-radius: 999px; background: var(--rkg-section-tint); overflow: hidden; } .rkg-low-stock-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f97316, #dc2626); } @keyframes rkgStockPulse { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .rkg-low-stock-dot:after { animation: none; } }