/* The Dry Company — WooCommerce page styles (cart, checkout, account, notices) * Loads after main.css and restyles default WooCommerce templates to the brand. */ .woocommerce .page-product-main { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem); } .pd-outofstock { color: var(--terra); font-weight: 600; } /* ---------- Notices ---------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 1rem 1.25rem; font-size: 0.92rem; list-style: none; } .woocommerce-message { border-left: 4px solid var(--pine); } .woocommerce-info { border-left: 4px solid var(--gold); } .woocommerce-error { border-left: 4px solid var(--terra); } .woocommerce-message a, .woocommerce-info a { color: var(--pine); font-weight: 600; } /* ---------- Generic Woo wrappers ---------- * IMPORTANT: WooCommerce adds the class "woocommerce" to on every shop, * product, cart, checkout and account page. A bare `.woocommerce { max-width }` * rule therefore boxes the ENTIRE page - announcement bar, sticky header and * footer included - which is why inner pages were not full width. * Always scope layout rules to `div.woocommerce` (the real content wrapper). */ body.woocommerce, body.woocommerce-page { max-width: none; margin: 0; padding: 0; } div.woocommerce { width: 100%; max-width: none; margin: 0; padding: 0; } .woocommerce h1, .woocommerce h2 { font-family: "Fraunces", serif; color: var(--pine-deep); } /* ---------- Buttons ---------- */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--pine); color: var(--paper); border-radius: 999px; padding: 0.75rem 1.6rem; font-weight: 600; font-size: 0.95rem; border: none; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background: var(--pine-deep); color: var(--paper); transform: translateY(-1px); } /* ---------- Cart page ---------- */ .woocommerce-cart table.cart { border: none; border-collapse: separate; border-spacing: 0 0.75rem; width: 100%; } .woocommerce-cart table.cart th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border: none; padding: 0 0.75rem 0.4rem; } .woocommerce-cart table.cart td { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0.75rem; vertical-align: middle; } .woocommerce-cart table.cart td:first-child { border-left: 1px solid var(--line); border-radius: 16px 0 0 16px; } .woocommerce-cart table.cart td:last-child { border-right: 1px solid var(--line); border-radius: 0 16px 16px 0; } .woocommerce-cart .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; } .woocommerce-cart .product-name a { color: var(--pine-deep); font-weight: 600; text-decoration: none; } .woocommerce-cart .product-name a:hover { color: var(--terra); } .woocommerce-cart .product-remove a.remove { color: var(--muted); font-size: 1.3rem; text-decoration: none; } .woocommerce-cart .product-remove a.remove:hover { color: var(--terra); background: none; } .woocommerce-cart .quantity .qty { width: 64px; padding: 0.45rem 0.5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); color: var(--ink); } .woocommerce-cart .cart-collaterals .cart_totals { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem; max-width: 420px; margin-left: auto; } .woocommerce-cart .cart_totals h2 { font-size: 1.3rem; margin-top: 0; } .woocommerce-cart .cart_totals table { width: 100%; border: none; } .woocommerce-cart .cart_totals th, .woocommerce-cart .cart_totals td { border: none; padding: 0.5rem 0; } .woocommerce-cart .order-total { font-family: "Fraunces", serif; font-size: 1.25rem; color: var(--pine-deep); } .woocommerce-cart .wc-proceed-to-checkout { margin-top: 1rem; } .woocommerce-cart .wc-proceed-to-checkout .checkout-button { width: 100%; justify-content: center; } /* ---------- Checkout ---------- */ .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; } .woocommerce form .form-row { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; } .woocommerce form .form-row label { font-size: 0.85rem; font-weight: 600; color: var(--pine-deep); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 0.75rem 1rem; font-size: 0.95rem; color: var(--ink); width: 100%; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { outline: 2px solid var(--sage); border-color: transparent; } #order_review_heading, .woocommerce-checkout-review-order-table { width: 100%; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { border: none; padding: 0.5rem 0; font-size: 0.95rem; } .woocommerce-checkout-review-order-table .order-total { font-family: "Fraunces", serif; font-size: 1.25rem; color: var(--pine-deep); } .woocommerce-checkout-payment { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem; } .woocommerce-checkout-payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 1rem; border: none; } .woocommerce-checkout-payment li.payment_method_razorpay label, .woocommerce-checkout-payment .wc_payment_method > label { font-weight: 600; color: var(--pine-deep); } #place_order { width: 100%; justify-content: center; font-size: 1.05rem; padding: 1rem; } /* ---------- Order received / thank you ---------- */ .woocommerce-order-received .woocommerce-thankyou-order-received { font-family: "Fraunces", serif; font-size: 1.6rem; color: var(--pine-deep); } .woocommerce-order-overview { list-style: none; padding: 1.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-wrap: wrap; gap: 1.5rem; } /* ---------- My account ---------- */ .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .woocommerce-MyAccount-navigation a { display: inline-block; padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--pine); text-decoration: none; font-size: 0.88rem; font-weight: 600; } .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation a:hover { background: var(--pine); color: var(--paper); } .woocommerce-MyAccount-content { margin-top: 1.5rem; } .woocommerce table.shop_table { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border: none; border-bottom: 1px solid var(--line); padding: 0.75rem 1rem; } /* ---------- Login / register forms ---------- */ .woocommerce form.login, .woocommerce form.register { border: 1px solid var(--line); border-radius: 20px; background: var(--paper); padding: 1.5rem; max-width: 460px; } /* ---------- Pagination ---------- */ .woocommerce nav.woocommerce-pagination ul { border: none; display: flex; gap: 0.5rem; justify-content: center; margin-top: 2rem; } .woocommerce nav.woocommerce-pagination ul li { border: none; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1rem; background: var(--paper); color: var(--pine); text-decoration: none; } .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--pine); color: var(--paper); } /* ---------- Shop archive heading spacing ---------- */ .shop-archive { padding-top: clamp(2.5rem, 5vw, 4rem); } .shop-archive h1 { font-family: "Fraunces", serif; } /* ---------- Product page extras already in main.css; minor tweaks ---------- */ .pd-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .cart-item-img img { width: 72px; height: 72px; object-fit: cover; border-radius: 14px; } .cart-item-info strong a { color: inherit; text-decoration: none; } .cart-item-info strong a:hover { color: var(--terra); } @media (max-width: 760px) { .woocommerce-cart table.cart td:first-child { border-radius: 12px 12px 0 0; } .woocommerce-cart table.cart td:last-child { border-radius: 0 0 12px 12px; } } /* ---------- Single product page fixes ---------- */ .page-product-main { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem); } .page-product-main .container { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; width: 100%; box-sizing: border-box; } /* Lead short description stays compact; full details go in their own block. */ .pd-lead { font-size: 1.05rem; color: var(--ink); max-width: 52ch; } /* Full product details block (ingredients, suggested use, storage). */ .pd-details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: clamp(3rem, 6vw, 5rem); max-width: 820px; } .pd-details h2 { font-size: 1.6rem; margin: 0 0 1.1rem; } .pd-details-body { color: var(--muted); line-height: 1.75; font-size: 0.97rem; } .pd-details-body p { margin: 0 0 0.9rem; } .pd-details-body strong { color: var(--pine-deep); } .pd-details-body ul, .pd-details-body ol { margin: 0 0 1rem 1.35rem; padding-left: 0.4rem; } .pd-details-body ul { list-style: disc; } .pd-details-body ol { list-style: decimal; } .pd-details-body ul ul { list-style: circle; margin-bottom: 0.35rem; } .pd-details-body li { margin-bottom: 0.35rem; } .pd-details-body li::marker { color: var(--sage); } /* Bold labels inside the description are promoted to real sub-headings. */ .pd-details-body .pd-sub, .pd-details-body h3, .pd-details-body h4 { font-family: var(--font-ui); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terra); margin: 1.6rem 0 0.6rem; } .pd-details-body > :first-child { margin-top: 0; } .pd-details-body p > strong:only-child { display: block; } /* Make sure the grid never overflows and aligns to top on real content. */ .pd-grid { align-items: start; } @media (max-width: 900px) { .pd-grid { grid-template-columns: 1fr; } } /* `margin: 0 auto` on a stretched grid item collapses it to its content width, which left the product image box at 0px wide on tablet and mobile. An explicit width keeps it predictable at every size. */ .pd-visual { width: 100%; margin-inline: auto; } @media (max-width: 900px) { .pd-visual { max-width: 480px; } } /* ---------- Product page actions: quantity + add to cart + buy now ---------- */ .pd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0 0 1.7rem; } .pd-qty { display: inline-flex; align-items: center; gap: 0.15rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); padding: 0.25rem; flex: 0 0 auto; } .pd-qty .qty-step { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; line-height: 1; color: var(--pine); transition: background 0.2s ease, color 0.2s ease; } .pd-qty .qty-step:hover { background: var(--pine); color: var(--paper); } .pd-qty input { width: 46px; border: none; background: none; text-align: center; font: inherit; font-weight: 600; color: var(--ink); -moz-appearance: textfield; appearance: textfield; } .pd-qty input::-webkit-outer-spin-button, .pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pd-actions .add-btn { padding: 0.95rem 1.7rem; font-size: 0.95rem; border-radius: 999px; background: var(--pine); color: var(--cream); box-shadow: 0 12px 24px -12px rgba(29, 48, 34, 0.55); } .pd-actions .add-btn:hover { background: var(--pine-deep); transform: translateY(-2px); } .pd-actions .add-btn.added { background: var(--sage); color: var(--pine-deep); } .pd-actions .add-btn[disabled] { cursor: default; } .btn-buy { background: var(--terra); color: var(--cream); box-shadow: 0 12px 24px -12px rgba(201, 99, 44, 0.6); } .btn-buy:hover { background: var(--terra-deep); color: var(--cream); transform: translateY(-2px); } .pd-stock-note { font-size: 0.83rem; color: var(--muted); margin: -0.9rem 0 1.6rem; } @media (max-width: 560px) { .pd-actions .add-btn, .pd-actions .btn-buy { flex: 1 1 100%; justify-content: center; } } /* ---------- Related row: 2 up on tablets instead of dropping to 1 ---------- */ @media (max-width: 760px) { .pd-related-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .pd-related-row { grid-template-columns: 1fr; } } /* ---------- Keyboard focus (was missing entirely) ---------- */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; border-radius: 6px; } /* ---------- "You may also like" card alignment ---------- * Product thumbnails are square (300x300), but the card image box was * `aspect-ratio: 1.3`, so `object-fit: cover` cropped ~23% off the top and * bottom of every photo - clipping the top of the taller pack shots and making * the row look ragged. A square box shows each thumbnail exactly as uploaded, * with no crop, so all three sit on the same baseline. */ .pd-rel-img { aspect-ratio: 1; background: var(--paper); } .pd-rel-card .pd-rel-img img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Keep the text block the same height whether a name wraps to one line or two, so the prices line up across the row. */ .pd-rel-card strong { display: flex; align-items: center; justify-content: center; min-height: 2.6em; line-height: 1.25; } .pd-rel-price { margin-top: auto; } /* ========================================================================= Combo offers ========================================================================= */ /* ---- Progress notes (cart drawer, cart page, checkout) ---- */ .combo-notes { display: grid; gap: 0.5rem; margin: 0 0 1.1rem; } .combo-notes.in-drawer { margin-bottom: 1rem; } .combo-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; border-radius: 14px; border: 1px dashed var(--line); background: var(--cream); font-size: 0.85rem; line-height: 1.35; color: var(--ink); } .combo-note.is-on { border-style: solid; border-color: rgba(46, 74, 52, 0.28); background: rgba(157, 181, 140, 0.22); } .combo-note-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--terra); } .combo-note.is-on .combo-note-dot { background: var(--pine); } .combo-note em { flex-basis: 100%; font-style: normal; font-size: 0.78rem; color: var(--muted); padding-left: 1rem; } .combo-empty { padding: 1rem 1.1rem; border-radius: 14px; border: 1px dashed var(--terra); background: rgba(201, 99, 44, 0.08); font-size: 0.88rem; margin-bottom: 1.5rem; } .combo-empty code { background: rgba(34, 51, 31, 0.08); padding: 0.1em 0.4em; border-radius: 5px; } /* ---- Builder ---- */ .combo-builder { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; margin: 0 0 2.5rem; box-shadow: var(--shadow-card); } .combo-head { text-align: center; margin-bottom: 1.6rem; } .combo-head h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 0.4rem; } .combo-head p { color: var(--muted); margin: 0; } .combo-save-pill { display: inline-block; margin-top: 0.8rem; padding: 0.3rem 0.85rem; border-radius: 999px; background: var(--terra); color: #fff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .combo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } .combo-card { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.9rem 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); text-align: center; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .combo-card.is-picked { border-color: var(--pine); box-shadow: 0 0 0 2px rgba(46, 74, 52, 0.16); transform: translateY(-2px); } .combo-card-img { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--cream); margin-bottom: 0.3rem; } .combo-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; } .combo-card strong { font-size: 0.85rem; line-height: 1.25; } .combo-card-price { font-size: 0.8rem; color: var(--muted); } .combo-step { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.35rem; } .combo-step button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .combo-step button:hover { background: var(--cream-2); border-color: var(--pine); } .combo-count { min-width: 1.4ch; font-weight: 600; font-variant-numeric: tabular-nums; } .combo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); } .combo-status { margin: 0; font-size: 0.9rem; color: var(--muted); } .combo-status.is-part { color: var(--terra); } .combo-status.is-on { color: var(--pine); font-weight: 600; } .combo-add:disabled { opacity: 0.45; cursor: not-allowed; } @media (max-width: 640px) { .combo-builder { padding: 1.2rem; } /* Explicit two-up on phones. auto-fill sat right on the boundary here and collapsed to a single very tall column depending on container padding. */ .combo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } .combo-card { padding: 0.7rem 0.5rem; } .combo-card strong { font-size: 0.78rem; } .combo-bar { flex-direction: column; align-items: stretch; text-align: center; } .combo-bar .combo-add { width: 100%; } } /* ---- WooCommerce's own add-to-cart form, for grouped/variable products ---- */ .pd-woo-form { margin: 1.4rem 0; } .pd-woo-form table.variations, .pd-woo-form table.woocommerce-grouped-product-list { width: 100%; border-collapse: collapse; margin-bottom: 1rem; } .pd-woo-form table.variations th, .pd-woo-form table.variations td, .pd-woo-form table.woocommerce-grouped-product-list td { padding: 0.55rem 0.4rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); } .pd-woo-form select { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font: inherit; color: var(--ink); } .pd-woo-form .quantity input[type="number"] { width: 4.5rem; padding: 0.5rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; text-align: center; } .pd-woo-form .button, .pd-woo-form button.single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.6rem; border: 0; border-radius: 999px; background: var(--pine); color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background 0.2s ease; } .pd-woo-form .button:hover, .pd-woo-form button.single_add_to_cart_button:hover { background: var(--pine-deep); } .pd-woo-form .reset_variations { font-size: 0.8rem; color: var(--muted); } .pd-woo-form .woocommerce-variation-price { margin-bottom: 0.8rem; font-size: 1.2rem; font-weight: 600; } /* ---- Home page combo promo ---- */ .combo-promo { background: var(--cream); } .combo-promo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; } .cp-card { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); align-items: center; gap: 1.5rem; padding: 1.6rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .cp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: rgba(46, 74, 52, 0.3); } /* 2 x 2 mosaic of real pack shots */ .cp-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--cream-2); } .cp-tile { display: block; overflow: hidden; background: var(--cream); } .cp-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .cp-card:hover .cp-tile img { transform: scale(1.07); } .cp-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .cp-pill { padding: 0.28rem 0.75rem; border-radius: 999px; background: var(--terra); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .cp-card:nth-child(2) .cp-pill { background: var(--pine); } .cp-body h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; margin: 0; } .cp-body p { margin: 0; font-size: 0.86rem; color: var(--muted); line-height: 1.45; } .cp-price { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.15rem; } .cp-price s { color: var(--muted); font-size: 0.9rem; } .cp-price strong { font-size: 1.35rem; font-weight: 700; } .cp-cta { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.45rem; font-size: 0.86rem; font-weight: 600; color: var(--pine); } .cp-cta svg { width: 16px; height: 16px; transition: transform 0.25s ease; } .cp-card:hover .cp-cta svg { transform: translateX(4px); } @media (max-width: 1024px) { .cp-card { grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 1.1rem; } } @media (max-width: 860px) { .combo-promo-grid { grid-template-columns: 1fr; gap: 1.2rem; } .cp-card { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); } } @media (max-width: 520px) { .cp-card { grid-template-columns: 1fr; } .cp-mosaic { width: 100%; } }