/* =========================================================================== Orchard Noir skin for WooCommerce's real cart / checkout / my-account. Refined-luxury: warm parchment surfaces, hairline rules, Cormorant section heads, fig/gold accents, one cohesive quantity pill, layered warm shadows. Targets the Woo BLOCK markup (.wc-block-*) and loads after Woo's own styles. ========================================================================= */ :root{ --sdf-radius:12px; --sdf-radius-lg:18px; --sdf-shadow:0 30px 60px -34px rgba(90,34,51,.28); --sdf-line:rgba(36,26,18,.14); } .sdf-page{min-height:56vh;padding-top:clamp(28px,4vw,52px)} .sdf-woo{font-family:'Hanken Grotesk',sans-serif;color:var(--ink);accent-color:var(--fig);--wc-green:var(--pistachio);--wp--preset--color--contrast:var(--ink)} .sdf-woo h1,.sdf-woo h2,.sdf-woo h3,.sdf-woo .wc-block-components-title{ font-family:'Cormorant',serif!important;font-weight:600!important;letter-spacing:-.01em!important;color:var(--ink)!important} /* ---- step & section headings ------------------------------------------- */ .sdf-woo .wc-block-components-checkout-step__title, .sdf-woo .wc-block-cart__totals-title, .sdf-woo .wc-block-components-checkout-order-summary__title, .sdf-woo h2.wc-block-components-title{ font-family:'Cormorant',serif!important;font-size:clamp(22px,2.4vw,28px)!important;font-weight:600!important; letter-spacing:-.01em!important;line-height:1.1!important;margin-bottom:14px!important;text-transform:none!important} .sdf-woo .wc-block-components-checkout-step{margin-bottom:30px!important;padding-bottom:0!important;border:0!important} .sdf-woo .wc-block-components-checkout-step__description{color:var(--ink-soft)!important;font-size:13.5px!important;margin-top:-6px} .sdf-woo .wc-block-components-checkout-step__heading{margin-bottom:14px!important} /* ---- text inputs (floating-label blocks) ------------------------------- */ .sdf-woo .wc-block-components-text-input, .sdf-woo .wc-block-components-address-form > .wc-block-components-text-input{margin-top:0!important;margin-bottom:14px!important} .sdf-woo .wc-block-components-text-input input, .sdf-woo .wc-block-components-select-input select, .sdf-woo .wc-block-components-address-form input, .sdf-woo .wc-block-components-combobox input, .sdf-woo input.wc-block-components-text-input__input{ display:block!important;width:100%!important; background:var(--paper)!important;border:1px solid var(--sdf-line)!important;border-radius:var(--sdf-radius)!important; min-height:56px!important;padding:22px 16px 8px!important;font-family:inherit!important;font-size:15px!important;color:var(--ink)!important; box-shadow:none!important;transition:border-color .2s,box-shadow .2s!important} .sdf-woo .wc-block-components-text-input.is-active input, .sdf-woo .wc-block-components-text-input input:focus{border-color:var(--fig)!important;box-shadow:0 0 0 3px rgba(90,34,51,.13)!important;outline:none!important} /* Float the label over the input (absolute) so the wrapper is exactly the input height. Otherwise the label sits in-flow (+22px) and text inputs render taller than selects, misaligning every two-up row (city/state, zip/phone). */ .sdf-woo .wc-block-components-text-input{position:relative!important} .sdf-woo .wc-block-components-text-input label, .sdf-woo .wc-block-components-text-input .wc-block-components-label{ position:absolute!important;top:17px!important;left:16px!important;margin:0!important;pointer-events:none!important; color:var(--ink-soft)!important;font-size:15px!important;line-height:1!important;font-family:inherit!important; transition:top .15s ease,font-size .15s ease!important} .sdf-woo .wc-block-components-text-input.is-active label, .sdf-woo .wc-block-components-text-input.is-active .wc-block-components-label{ top:9px!important;font-size:11.5px!important;letter-spacing:.04em;color:var(--gold)!important} .sdf-woo .wc-block-components-combobox,.sdf-woo .wc-block-components-select{margin-bottom:14px!important} /* two-up rows tighter */ .sdf-woo .wc-block-components-address-form{--gap:14px} .sdf-woo .wc-block-components-checkout-address-first-last-name-block, .sdf-woo .wc-block-components-address-form .wc-block-components-columns{gap:14px!important} /* The address form is a flex-wrap grid whose items stretch to the tallest field in their row, so a text input next to the state SELECT got pulled taller and the rows looked uneven. Only stop the stretch, each field keeps its own natural height. Never pin the wrapper height or zero its margins here: the inline validation message lives inside the wrapper, so a fixed height clips it and it overlaps the next field. WooCommerce's own field margins handle the spacing. */ .sdf-woo .wc-block-components-address-form{align-items:flex-start!important} .sdf-woo .wc-block-components-address-form > *{align-self:flex-start!important} /* the state/country SELECT carries a default top margin that text inputs don't, which drops its box ~12px below the input beside it. Zero just that top margin so a select and a text input in the same row line up (heights untouched, so validation messages still push content down instead of overlapping). */ .sdf-woo .wc-block-components-address-form .wc-blocks-components-select{margin-top:0!important} /* keep the inline validation message clear of the field below it */ .sdf-woo .wc-block-components-validation-error{margin:4px 0 2px!important;line-height:1.35!important} /* ---- selects (country / state), same voice as the text inputs ----------- */ .sdf-woo .wc-blocks-components-select{margin-bottom:14px!important} .sdf-woo .wc-blocks-components-select__container{ background:var(--paper)!important;border:1px solid var(--sdf-line)!important;border-radius:var(--sdf-radius)!important; height:56px!important;box-shadow:none!important;transition:border-color .2s,box-shadow .2s} .sdf-woo .wc-blocks-components-select__container:focus-within{border-color:var(--fig)!important;box-shadow:0 0 0 3px rgba(90,34,51,.13)!important} .sdf-woo .wc-blocks-components-select__select{ background:transparent!important;border:0!important;color:var(--ink)!important;font-family:inherit!important; font-size:15px!important;padding:22px 44px 6px 16px!important;height:100%!important;outline:none!important} .sdf-woo .wc-blocks-components-select__label{color:var(--ink-soft)!important;left:16px!important;font-family:inherit!important} .sdf-woo .wc-blocks-components-select__expander{right:14px!important;color:var(--ink-soft)!important;fill:var(--ink-soft)!important} /* option list itself is native OS UI; accent-color above tints its highlight */ /* ---- textarea (order note) ---------------------------------------------- */ .sdf-woo textarea, .sdf-woo .wc-block-components-textarea{ background:var(--paper)!important;border:1px solid var(--sdf-line)!important;border-radius:var(--sdf-radius)!important; padding:14px 16px!important;font-family:inherit!important;font-size:15px!important;color:var(--ink)!important; box-shadow:none!important;min-height:96px;transition:border-color .2s,box-shadow .2s} .sdf-woo textarea::placeholder{color:var(--ink-soft);opacity:.75} .sdf-woo textarea:focus{outline:none!important;border-color:var(--fig)!important;box-shadow:0 0 0 3px rgba(90,34,51,.13)!important} /* ---- selectable option rows (shipping / payment) ----------------------- */ .sdf-woo .wc-block-components-radio-control__option, .sdf-woo .wc-block-components-radio-control-accordion-option{ border:1px solid var(--sdf-line)!important;border-radius:var(--sdf-radius)!important;background:var(--paper-raise)!important; padding:13px 18px 13px 44px!important;margin-bottom:10px!important;transition:border-color .2s,box-shadow .2s} .sdf-woo .wc-block-components-radio-control__option:hover{border-color:rgba(36,26,18,.3)!important} /* WooCommerce puts a default inset box-shadow on the (auto-selected) option; on our rounded box it rendered as grey ticks at the two bottom corners. Kill it. */ .sdf-woo .wc-block-components-radio-control__option, .sdf-woo .wc-block-components-radio-control__option-checked, .sdf-woo .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option, .sdf-woo .wc-block-components-radio-control-accordion-option:has(input:checked){box-shadow:none!important} /* payment methods wrap each option in an accordion-option; let only the outer one carry the border so it isn't a box-in-a-box */ .sdf-woo .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option{ border:0!important;background:transparent!important;box-shadow:none!important;margin:0!important} .sdf-woo .wc-block-components-radio-control__option-checked, .sdf-woo .wc-block-components-radio-control-accordion-option:has(input:checked){ border-color:var(--fig)!important;background:rgba(90,34,51,.05)!important} .sdf-woo .wc-block-components-radio-control-accordion-content{padding:0 18px 12px 44px!important;color:var(--ink-soft)!important;font-size:13px!important} /* single-method payment: kill the empty content block that pads it out */ .sdf-woo .wc-block-components-radio-control-accordion-content:empty{display:none!important} /* custom radio: paper circle, thick fig ring when selected (no native dot) */ .sdf-woo .wc-block-components-radio-control__input{ width:20px!important;height:20px!important;border:1.5px solid rgba(36,26,18,.35)!important; background:var(--paper)!important;border-radius:50%!important;box-shadow:none!important;transition:border .2s} .sdf-woo .wc-block-components-radio-control__input::before{display:none!important} .sdf-woo .wc-block-components-radio-control__input:checked{border:6px solid var(--fig)!important;background:var(--paper)!important} .sdf-woo .wc-block-components-radio-control__input:focus-visible{outline:2px solid rgba(90,34,51,.4)!important;outline-offset:2px} .sdf-woo .wc-block-components-radio-control__label{font-weight:600!important;color:var(--ink)!important} .sdf-woo .wc-block-components-radio-control__secondary-label, .sdf-woo .wc-block-components-radio-control__description{color:var(--ink-soft)!important;font-weight:600} /* ---- checkboxes -------------------------------------------------------- */ .sdf-woo .wc-block-components-checkbox__input{width:20px!important;height:20px!important;border:1.5px solid var(--sdf-line)!important;border-radius:5px!important;background:var(--paper)!important;transition:background .18s,border-color .18s!important} .sdf-woo .wc-block-components-checkbox__input:checked{background:var(--ink)!important;border-color:var(--ink)!important} .sdf-woo .wc-block-components-checkbox__input:focus-visible{outline:2px solid rgba(90,34,51,.4)!important;outline-offset:2px} /* the tick: WooCommerce's mark inherits a dark colour and vanishes on the black fill, leaving a plain black square. Force it white and only show when checked. */ .sdf-woo .wc-block-components-checkbox__mark{fill:transparent!important;stroke:var(--paper)!important;color:var(--paper)!important} .sdf-woo .wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark{fill:var(--paper)!important} /* ---- order summary sidebar --------------------------------------------- */ .sdf-woo .wc-block-checkout__sidebar, .sdf-woo .wc-block-components-sidebar{ background:var(--paper-raise)!important;border:1px solid var(--sdf-line)!important;border-radius:var(--sdf-radius-lg)!important; box-shadow:var(--sdf-shadow)!important;padding:26px 24px!important} .sdf-woo .wc-block-components-order-summary__content{margin-top:8px} .sdf-woo .wc-block-components-order-summary-item{padding:16px 0!important;border-bottom:1px solid var(--sdf-line)!important} .sdf-woo .wc-block-components-order-summary-item__image img{border-radius:10px!important} .sdf-woo .wc-block-components-order-summary-item__quantity{background:var(--ink)!important;color:var(--paper)!important;border:0!important} .sdf-woo .wc-block-components-product-metadata{color:var(--ink-soft)!important;font-size:12.5px!important} /* totals rows */ .sdf-woo .wc-block-components-totals-item{padding:9px 0!important;font-size:14.5px!important} .sdf-woo .wc-block-components-totals-item__label{color:var(--ink-soft)!important} .sdf-woo .wc-block-components-totals-footer-item{border-top:1px solid var(--sdf-line)!important;padding-top:16px!important;margin-top:6px!important} .sdf-woo .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{color:var(--ink)!important;font-weight:600;font-size:16px!important} .sdf-woo .wc-block-components-totals-footer-item .wc-block-components-totals-item__value, .sdf-woo .wc-block-components-totals-footer-item .wc-block-formatted-money-amount{ font-family:'Cormorant',serif!important;font-size:26px!important;font-weight:600!important;color:var(--fig)!important} .sdf-woo .wc-block-components-totals-shipping .wc-block-components-totals-item__value{color:var(--pistachio)!important;font-weight:700} .sdf-woo .wc-block-components-formatted-money-amount{color:var(--ink)} .sdf-woo del,.sdf-woo .wc-block-components-product-price del{color:var(--ink-soft)!important;opacity:.7} .sdf-woo .wc-block-components-sale-badge{background:rgba(124,138,78,.16)!important;color:#4d5a2c!important;border-radius:999px!important;font-weight:600} /* de-line the sidebar: Woo wraps every totals row in a bordered wrapper, which reads as clutter. Zero them all; keep ONE rule under the items list and ONE above the grand total (the footer's own border). */ .sdf-woo .wc-block-components-totals-wrapper{border:0!important;padding:6px 0!important;margin:0!important} .sdf-woo .wc-block-components-panel{border:0!important} .sdf-woo .wc-block-components-panel__button{color:var(--ink)!important;font-weight:600!important;padding:10px 0!important} /* no inner box: the sidebar card is the only frame */ .sdf-woo .wp-block-woocommerce-checkout-order-summary-block, .sdf-woo .wc-block-components-order-summary, .sdf-woo .wc-block-components-order-summary__content, .sdf-woo .wc-block-cart__totals-title, .sdf-woo .wp-block-woocommerce-cart-order-summary-block{border:0!important;box-shadow:none!important;background:transparent!important} .sdf-woo .wc-block-components-order-summary{border-bottom:1px solid var(--sdf-line)!important;padding-bottom:6px;margin-bottom:4px} .sdf-woo .wc-block-components-order-summary-item:last-child{border-bottom:0!important} /* ---- CART page --------------------------------------------------------- */ /* items left, totals pinned right (sticky), regardless of Woo's breakpoint classes */ @media(min-width:920px){ .sdf-woo .wc-block-cart:not(.wc-block-cart--is-empty){ display:grid!important;grid-template-columns:minmax(0,1fr) minmax(320px,400px); gap:clamp(28px,4vw,60px);align-items:start} .sdf-woo .wc-block-cart__main{width:auto!important;max-width:none!important} .sdf-woo .wc-block-cart__sidebar{width:auto!important;max-width:none!important;position:sticky;top:104px;margin:0!important} } .sdf-woo .wc-block-cart{gap:clamp(24px,4vw,56px)} .sdf-woo .wc-block-cart-items{border:0!important} /* empty bag: quiet, on-brand (hide Woo's default sad-face art, drawn as the heading's ::before via .with-empty-cart-icon) */ .sdf-woo .with-empty-cart-icon::before{display:none!important} .sdf-woo .wp-block-woocommerce-empty-cart-block > img, .sdf-woo .wp-block-woocommerce-empty-cart-block svg, .sdf-woo .wc-block-cart__empty-cart__image{display:none!important} .sdf-woo .wc-block-cart__empty{margin-top:30px!important} .sdf-woo .wp-block-woocommerce-empty-cart-block h2{ font-family:'Cormorant',serif!important;font-size:clamp(30px,4.4vw,46px)!important;text-align:center;margin:26px 0 8px!important} .sdf-woo .wp-block-woocommerce-empty-cart-block .wp-block-separator{ border:0!important;height:1px;background:var(--sdf-line);max-width:90px;margin:26px auto!important} .sdf-woo .wp-block-woocommerce-empty-cart-block h3, .sdf-woo .wp-block-woocommerce-empty-cart-block .wp-block-heading{ font-family:'Cormorant',serif!important;text-align:center;font-size:clamp(22px,2.6vw,30px)!important} .sdf-woo .wc-block-grid__products{gap:20px} .sdf-woo .wc-block-grid__product{ border:1px solid var(--sdf-line)!important;border-radius:14px;background:var(--paper-raise);padding:18px 14px} .sdf-woo .wc-block-grid__product-title{font-family:'Cormorant',serif!important;font-size:19px!important;color:var(--ink)!important} .sdf-woo .wc-block-grid__product-image img{border-radius:10px} /* grid add-to-cart: the button is an , so pin its text colour explicitly */ .sdf-woo .add_to_cart_button, .sdf-woo .wc-block-grid__product .wp-block-button__link, .sdf-woo .wc-block-components-product-button__button{ background:var(--fig)!important;color:#fff!important;border:0!important;border-radius:999px!important; padding:12px 22px!important;font-family:'Hanken Grotesk',sans-serif!important;font-weight:600!important;font-size:13.5px!important} .sdf-woo .add_to_cart_button:hover, .sdf-woo .wc-block-grid__product .wp-block-button__link:hover, .sdf-woo .wc-block-components-product-button__button:hover{background:var(--gold)!important;color:var(--ink)!important} /* SALE flag on grid cards */ .sdf-woo .wc-block-grid__product-onsale{ background:var(--fig)!important;color:var(--paper)!important;border:0!important;border-radius:999px!important; font-size:10.5px!important;font-weight:600!important;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px!important} /* single rule under the header row: style the th's, kill every other border the table brings (thead + th borders were doubling up) */ .sdf-woo table.wc-block-cart-items, .sdf-woo .wc-block-cart-items th, .sdf-woo .wc-block-cart-items td{border:0!important} .sdf-woo .wc-block-cart-items__header th{ border-bottom:1px solid var(--sdf-line)!important;font-size:11px!important;letter-spacing:.16em!important; text-transform:uppercase!important;color:var(--ink-soft)!important;font-weight:600!important;padding:0 0 14px!important} .sdf-woo .wc-block-cart-items__row{border-bottom:1px solid var(--sdf-line)!important;padding:22px 0!important} .sdf-woo .wc-block-cart-items__row td{border:0!important} .sdf-woo .wc-block-cart-item__image img{border-radius:12px!important} .sdf-woo .wc-block-cart-item__product-name, .sdf-woo .wc-block-components-product-name{font-weight:600!important;color:var(--ink)!important;font-size:16px!important} .sdf-woo .wc-block-cart-item__prices .wc-block-components-product-price__value{font-weight:600} /* one cohesive quantity pill */ .sdf-woo .wc-block-components-quantity-selector{ border:1px solid var(--sdf-line)!important;border-radius:999px!important;background:var(--paper)!important;overflow:hidden; display:inline-flex!important;align-items:center;width:auto!important;min-width:118px} .sdf-woo .wc-block-components-quantity-selector::after{display:none!important} .sdf-woo .wc-block-components-quantity-selector__input{ border:0!important;background:transparent!important;font-weight:600!important;color:var(--ink)!important;text-align:center;width:38px!important;min-height:40px!important;padding:0!important;box-shadow:none!important;outline:none!important} .sdf-woo .wc-block-components-quantity-selector__input:focus, .sdf-woo .wc-block-components-quantity-selector__input:focus-visible{ border:0!important;box-shadow:none!important;outline:none!important;background:rgba(36,26,18,.05)!important} .sdf-woo .wc-block-components-quantity-selector__button{ border:0!important;background:transparent!important;color:var(--ink)!important;font-size:18px!important;width:38px;height:40px;transition:background .2s,color .2s;border-radius:0!important;box-shadow:none!important;outline:none!important} .sdf-woo .wc-block-components-quantity-selector__button:hover{background:rgba(36,26,18,.06)!important;color:var(--fig)!important} .sdf-woo .wc-block-components-quantity-selector__button:focus, .sdf-woo .wc-block-components-quantity-selector__button:focus-visible{ border:0!important;box-shadow:none!important;outline:none!important;background:rgba(90,34,51,.1)!important;color:var(--fig)!important} .sdf-woo .wc-block-cart-item__remove-link{color:var(--ink-soft)!important;text-decoration:none!important;font-size:12.5px!important} .sdf-woo .wc-block-cart-item__remove-link:hover{color:var(--terracotta)!important} /* cart totals card */ .sdf-woo .wc-block-cart__totals-title{font-size:11px!important;letter-spacing:.16em!important;text-transform:uppercase!important; color:var(--ink-soft)!important;font-family:'Hanken Grotesk',sans-serif!important;font-weight:700!important} /* ---- buttons ----------------------------------------------------------- */ .sdf-woo .wc-block-components-button:not(.wc-block-components-panel__button):not(.is-link), .sdf-woo .button,.sdf-woo .wp-element-button, .sdf-woo button[type="submit"],.sdf-woo #place_order,.sdf-woo .checkout-button{ background:var(--fig)!important;color:#fff!important;border:0!important;border-radius:999px!important; padding:16px 30px!important;font-family:'Hanken Grotesk',sans-serif!important;font-weight:600!important;font-size:15px!important; letter-spacing:.01em;box-shadow:0 16px 30px -18px rgba(90,34,51,.6)!important;transition:background .3s,color .3s,transform .3s!important} .sdf-woo .wc-block-components-button:not(.is-link):hover, .sdf-woo .button:hover,.sdf-woo #place_order:hover,.sdf-woo .checkout-button:hover{ background:var(--gold)!important;color:var(--ink)!important;transform:translateY(-2px)} .sdf-woo .wc-block-components-button__text{color:inherit!important} .sdf-woo .wc-block-components-button.is-link,.sdf-woo a.is-link{color:var(--fig)!important;box-shadow:none!important;background:none!important;padding:0!important} /* coupon field: the Apply button inherits the big pill above, which dwarfs and mis-aligns it next to the input. Make it a compact button the same height as the input, top-aligned so they line up (and stay lined up if the input errors). */ .sdf-woo .wc-block-components-totals-coupon__form{display:flex!important;align-items:flex-start!important;gap:10px!important} .sdf-woo .wc-block-components-totals-coupon__input{flex:1 1 auto!important;min-width:0!important;margin:0!important} .sdf-woo .wc-block-components-totals-coupon__button{ flex:0 0 auto!important;min-height:56px!important;height:56px!important;width:auto!important; padding:0 22px!important;margin:0!important;font-size:14px!important;white-space:nowrap!important; box-shadow:0 10px 22px -14px rgba(90,34,51,.55)!important} .sdf-woo .wc-block-components-totals-coupon__button:hover{transform:none!important} /* ---- links / notices --------------------------------------------------- */ .sdf-woo a:not(.b):not(.btn):not(.ulink){color:var(--fig)} .sdf-woo a:not(.b):not(.btn):not(.ulink):hover{color:var(--gold)} /* comp pill buttons keep their own colours inside Woo pages */ .sdf-woo a.b-fig{color:#fff} .sdf-woo a.b-fig:hover{color:var(--ink)} .sdf-woo a.b-ghost{color:var(--ink)} .sdf-woo a.b-ghost:hover{color:var(--paper)} .sdf-woo .wc-block-components-notice-banner,.sdf-woo .woocommerce-message, .sdf-woo .woocommerce-info,.sdf-woo .woocommerce-error{ border-radius:var(--sdf-radius)!important;border:1px solid rgba(124,138,78,.4)!important;background:rgba(124,138,78,.1)!important;color:#4d5a2c!important} /* classic Woo message: a flex row so the inline "View cart" button can't float out and collapse the banner over the heading below it */ .sdf-woo .woocommerce-message,.sdf-woo .woocommerce-info,.sdf-woo .woocommerce-error{ display:flex!important;align-items:center!important;gap:14px!important;flex-wrap:wrap; padding:14px 18px!important;margin:0 0 22px!important;list-style:none!important;overflow:hidden} .sdf-woo .woocommerce-message .button,.sdf-woo .woocommerce-info .button{ margin-left:auto!important;padding:9px 18px!important;font-size:13px!important;box-shadow:none!important;flex:none} .sdf-woo .woocommerce-info{border-color:rgba(190,138,46,.4)!important;background:rgba(190,138,46,.1)!important;color:#6b5a48!important} .sdf-woo .woocommerce-error{border-color:rgba(94,34,51,.35)!important;background:rgba(94,34,51,.08)!important;color:var(--fig)!important} /* ---- my account / login (CLASSIC Woo markup) --------------------------- */ .sdf-woo .woocommerce{max-width:none} /* the login / register card, centered like a focused auth panel */ body.woocommerce-account:not(.logged-in) .sdf-woo .woocommerce{max-width:460px;margin:0 auto} .sdf-woo form.woocommerce-form-login, .sdf-woo form.woocommerce-form-register, .sdf-woo .woocommerce-EditAccountForm, .sdf-woo .woocommerce-Address .woocommerce-Address-title + address, .sdf-woo form.edit-account, .sdf-woo form.woocommerce-form.login, .sdf-woo form.woocommerce-form.register{ background:var(--paper-raise)!important;border:1px solid var(--sdf-line)!important;border-radius:var(--sdf-radius-lg)!important; box-shadow:var(--sdf-shadow)!important;padding:clamp(26px,3vw,36px)!important;margin-top:8px} /* auth headings */ .sdf-woo .woocommerce > h2, .sdf-woo .u-column1 h2,.sdf-woo .u-column2 h2{ font-family:'Cormorant',serif!important;font-size:clamp(26px,3vw,34px)!important;font-weight:600!important;margin-bottom:16px!important;text-align:center} /* form rows + fields (classic) */ .sdf-woo .woocommerce form .form-row{display:block;margin:0 0 15px;padding:0} .sdf-woo .woocommerce form .form-row label:not(.checkbox):not(.woocommerce-form-login__rememberme){ display:block;font-size:11px!important;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)!important;margin-bottom:7px} .sdf-woo .woocommerce form .form-row input.input-text, .sdf-woo .woocommerce form .form-row input[type="text"], .sdf-woo .woocommerce form .form-row input[type="email"], .sdf-woo .woocommerce form .form-row input[type="password"], .sdf-woo .woocommerce form .form-row input[type="tel"], .sdf-woo .woocommerce form .form-row select{ width:100%!important;background:var(--paper)!important;border:1px solid var(--sdf-line)!important;border-radius:var(--sdf-radius)!important; min-height:52px!important;padding:13px 15px!important;font-family:inherit!important;font-size:15px!important;color:var(--ink)!important;box-shadow:none!important} .sdf-woo .woocommerce form .form-row input:focus, .sdf-woo .woocommerce form .form-row select:focus{outline:none!important;border-color:var(--fig)!important;box-shadow:0 0 0 3px rgba(90,34,51,.13)!important} /* the submit row: stack remember-me above a full-width button */ .sdf-woo form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit){ display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-bottom:8px} .sdf-woo .woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-soft);font-weight:500} .sdf-woo .woocommerce-form-login__rememberme input{width:16px;height:16px} .sdf-woo .woocommerce-form-login__submit, .sdf-woo .woocommerce-form-register__submit{width:100%!important;float:none!important;margin:0!important} .sdf-woo .lost_password{margin:6px 0 0;text-align:center} .sdf-woo .lost_password a,.sdf-woo .woocommerce-LostPassword a{font-size:13px} /* ---- affiliate (YITH) auth: segmented Login | Register card ------------- * * YITH renders the login + registration forms stacked on a normal page. * js/affiliate.js restructures them into one tabbed card: the .yith-wcaf- * registration-form container gains .sdf-auth-ready, a segmented toggle and two * .sdf-auth-panel groups. Without JS it degrades to both forms stacked. */ /* centre the module + heading on the affiliate area */ body.sdf-affiliate-area main.sdf-page{max-width:600px} body.sdf-affiliate-area .sdf-page > h1{text-align:center;margin-bottom:4px} body.sdf-affiliate-area .sdf-page > h1::after{ content:"Log in to your dashboard, or register to start earning 5%.";display:block; font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:400;letter-spacing:.01em; color:var(--ink-soft)!important;margin-top:12px} /* the auth card */ .sdf-woo .yith-wcaf-registration-form{ max-width:480px!important;margin:16px auto 0!important; background:var(--paper-raise)!important;border:1px solid var(--sdf-line)!important;border-radius:var(--sdf-radius-lg)!important; box-shadow:var(--sdf-shadow)!important;padding:26px 26px 30px!important} /* the YITH h2 titles are replaced by the tabs once ready */ .sdf-auth-ready .login-title,.sdf-auth-ready .register-title{display:none!important} /* forms inside the card drop their own card chrome (no card-in-card) */ .sdf-auth-ready form.woocommerce-form-login, .sdf-auth-ready form.register, .sdf-auth-ready .login-form{ background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;max-width:none!important} /* segmented Login | Register toggle with a sliding indicator */ .sdf-auth-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;margin-bottom:22px; background:rgba(36,26,18,.06);border-radius:999px} .sdf-auth-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px; background:var(--paper);box-shadow:0 6px 16px -8px rgba(90,34,51,.4); transition:transform .42s cubic-bezier(.6,.05,.1,1)} .sdf-auth-tabs[data-active="register"] .sdf-auth-ind{transform:translateX(100%)} .sdf-auth-tab{position:relative;z-index:1;padding:11px 8px;border:0;background:none;cursor:pointer; font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.01em; color:var(--ink-soft);transition:color .3s} .sdf-auth-tab.is-on{color:var(--fig)} .sdf-auth-tab:focus-visible{outline:2px solid var(--fig);outline-offset:2px;border-radius:999px} /* panels crossfade */ .sdf-auth-panel{display:none} .sdf-auth-panel.is-on{display:block;animation:sdfAuthIn .4s cubic-bezier(.2,.7,.2,1)} @keyframes sdfAuthIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* password reveal eye: pin inside the field, vertically centred */ .sdf-woo .woocommerce form .form-row .password-input{position:relative;display:block} .sdf-woo .woocommerce form .form-row .password-input input{padding-right:46px!important} .sdf-woo .woocommerce form .password-input .show-password-input{ position:absolute!important;top:50%!important;right:16px!important;transform:translateY(-50%)!important; margin:0!important;padding:0!important;cursor:pointer;color:var(--ink-soft)} /* remember me: room above the button */ .sdf-woo .woocommerce-form-login__rememberme{margin-top:2px!important;padding-left:0!important} /* registration form: field/terms/submit spacing so the "please accept" error is never hidden behind the Register button */ .sdf-woo .yith-wcaf-registration-form .form-row{margin-bottom:14px!important} .sdf-woo .yith-wcaf-registration-form .woocommerce-terms-and-conditions-wrapper{margin-bottom:6px!important} .sdf-woo form.register button[type="submit"], .sdf-woo form.register input[type="submit"]{width:100%!important;margin-top:12px!important} .sdf-woo form.register .error, .sdf-woo .yith-wcaf-registration-form .error{ display:block;margin:6px 0 0!important;font-size:12.5px!important;color:var(--fig)!important;line-height:1.35} /* the privacy + terms copy at the bottom: refined and muted, not plain body text */ .sdf-woo form.register .woocommerce-privacy-policy-text, .sdf-woo form.register .privacy, .sdf-woo form.register p.privacy{font-size:12px!important;line-height:1.55!important;color:var(--ink-soft)!important;margin:2px 0 14px!important} .sdf-woo form.register .terms, .sdf-woo form.register .terms label, .sdf-woo form.register .checkbox{font-size:13px!important;line-height:1.4!important;color:var(--ink-soft)!important} .sdf-woo form.register .terms input[type="checkbox"]{margin-right:8px} .sdf-woo form.register .required{color:var(--fig)!important;border:0!important} .sdf-woo form.register a{color:var(--fig)!important;text-decoration:underline;text-underline-offset:2px} @media(prefers-reduced-motion:reduce){.sdf-auth-panel.is-on{animation:none}.sdf-auth-ind{transition:none}} /* logged-in dashboard: two columns, styled nav */ @media(min-width:820px){ body.woocommerce-account.logged-in .sdf-woo .woocommerce{display:grid;grid-template-columns:220px 1fr;gap:clamp(30px,5vw,64px);align-items:start} } .sdf-woo .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0} .sdf-woo .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--sdf-line)} .sdf-woo .woocommerce-MyAccount-navigation a{display:block;padding:13px 4px;font-weight:600;color:var(--ink)!important} .sdf-woo .woocommerce-MyAccount-navigation .is-active a, .sdf-woo .woocommerce-MyAccount-navigation a:hover{color:var(--gold)!important} .sdf-woo .woocommerce-MyAccount-content{min-width:0} .sdf-woo .woocommerce-orders-table,.sdf-woo .woocommerce-table{ background:var(--paper-raise)!important;border:1px solid var(--sdf-line)!important;border-radius:var(--sdf-radius-lg)!important;overflow:hidden;width:100%} .sdf-woo .woocommerce-orders-table th,.sdf-woo .woocommerce-orders-table td{border-color:var(--sdf-line)!important;padding:14px 16px!important} /* order-received uses the theme's own thankyou.php template (the approved order-confirmed design) with dist/thankyou.css — no default markup here. */ /* social-login buttons (Nextend / provider plugins), themed to fit */ .sdf-woo .nsl-container,.sdf-woo .nsl-container-buttons{margin:6px 0 18px!important} .sdf-woo .nsl-button{border-radius:999px!important;font-family:'Hanken Grotesk',sans-serif!important;font-weight:600!important;overflow:hidden} .sdf-woo .sdf-or{display:flex;align-items:center;gap:14px;margin:18px 0;color:var(--ink-soft);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase} .sdf-woo .sdf-or::before,.sdf-woo .sdf-or::after{content:"";flex:1;height:1px;background:var(--sdf-line)} /* ---- cart-side gift packing panel ---- */ .sdf-cartgift{margin-top:22px;background:#FAF5EA;border:1px solid rgba(23,20,15,.12);border-radius:16px;padding:20px 22px} .sdf-cartgift-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px} .sdf-cartgift-ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(90,35,48,.1);color:#5A2330} .sdf-cartgift-ic svg{width:20px;height:20px} .sdf-cartgift-title{display:block;font-weight:600;font-size:15px;color:#17140F} .sdf-cartgift-sub{display:block;font-size:12.5px;color:#6F6353;margin-top:2px} .sdf-cartgift-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid rgba(23,20,15,.12);border-radius:11px;background:#F3EEE1;cursor:pointer;margin-top:9px;transition:border-color .2s,background .2s} .sdf-cartgift-row:hover{border-color:rgba(90,35,48,.4)} .sdf-cartgift-row:has(input:checked){border-color:#5A2330;background:rgba(90,35,48,.05)} .sdf-cartgift-input{position:absolute;opacity:0;width:0;height:0} .sdf-cartgift-box{flex:none;width:22px;height:22px;border-radius:6px;border:1.6px solid rgba(23,20,15,.16);background:#fff;display:grid;place-items:center;color:transparent;transition:background .2s,border-color .2s,color .2s} .sdf-cartgift-box svg{width:13px;height:13px} .sdf-cartgift-input:checked + .sdf-cartgift-box{background:#5A2330;border-color:#5A2330;color:#fff} .sdf-cartgift-input:focus-visible + .sdf-cartgift-box{outline:2px solid #5A2330;outline-offset:2px} .sdf-cartgift-name{flex:1;min-width:0;font-size:14px;font-weight:500;color:#17140F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sdf-cartgift-fee{flex:none;font-weight:700;font-size:14px;color:#5A2330} /* ---- pay-for-order / order-pay endpoint -------------------------------- * * Razorpay creates the order, redirects the buyer to this classic WooCommerce * endpoint, then pops its modal on top. It isn't block markup, so without this * it renders as a bare table + link. Give it the same Orchard Noir card frame * so it never flashes unstyled behind (or instead of) the Razorpay modal. * Scoped to body.woocommerce-order-pay only. */ body.woocommerce-order-pay .sdf-page{max-width:640px} body.woocommerce-order-pay .sdf-woo > .woocommerce{ background:var(--paper-raise)!important;border:1px solid var(--sdf-line)!important;border-radius:var(--sdf-radius-lg)!important; box-shadow:var(--sdf-shadow)!important;padding:30px 30px 34px!important;max-width:560px;margin:8px auto 0} body.woocommerce-order-pay .sdf-woo > .woocommerce::before{ content:"Complete your payment";display:block;font-family:'Cormorant',serif;font-size:clamp(23px,3vw,29px); font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--ink);margin-bottom:16px} /* order summary — as a table (generic) OR Razorpay's line list */ body.woocommerce-order-pay table.shop_table{ width:100%!important;border-collapse:collapse!important;margin:0 0 20px!important;font-size:14px!important;background:transparent!important;border:0!important} body.woocommerce-order-pay table.shop_table thead th{ font-size:11px!important;text-transform:uppercase!important;letter-spacing:.1em!important;color:var(--ink-soft)!important;font-weight:600!important} body.woocommerce-order-pay table.shop_table th, body.woocommerce-order-pay table.shop_table td{ padding:11px 2px!important;border-bottom:1px solid var(--sdf-line)!important;text-align:left!important;color:var(--ink)!important} body.woocommerce-order-pay table.shop_table td:last-child, body.woocommerce-order-pay table.shop_table th:last-child{text-align:right!important;white-space:nowrap} body.woocommerce-order-pay table.shop_table tfoot th, body.woocommerce-order-pay table.shop_table tfoot td{font-weight:700!important} body.woocommerce-order-pay table.shop_table tfoot tr:last-child th, body.woocommerce-order-pay table.shop_table tfoot tr:last-child td{ font-family:'Cormorant',serif!important;font-size:19px!important;color:var(--fig)!important;border-bottom:0!important} /* Razorpay's order-pay body copy ("Order number / Date / Total / Payment method / Thank you ... pay with Razorpay") renders as loose paragraphs — give it rhythm */ body.woocommerce-order-pay #order_review > p, body.woocommerce-order-pay .woocommerce > p{margin:0 0 6px!important;font-size:14px!important;color:var(--ink-soft)!important;line-height:1.5!important} body.woocommerce-order-pay #order_review > p strong, body.woocommerce-order-pay .woocommerce > p strong{color:var(--ink)!important} body.woocommerce-order-pay #order_review, body.woocommerce-order-pay form#order_review{margin:0!important} /* actions. Razorpay's order-pay buttons are