.elementor-kit-4846{--e-global-color-primary:#2E2A22;--e-global-color-secondary:#6E6852;--e-global-color-text:#423D33;--e-global-color-accent:#4E6647;--e-global-color-c696dce:#FFFDDB;--e-global-color-e577f1a:#3E5239;--e-global-color-d6cea4e:#FFFFFF;--e-global-color-86b4fcd:#02010100;--e-global-color-e6f23d7:#FFFCBB;--e-global-color-b8f6fd8:#EDE3A0;--e-global-color-cae5207:#9E5539;--e-global-typography-primary-font-family:"Fraunces";--e-global-typography-primary-font-size:44px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:1.15em;--e-global-typography-primary-letter-spacing:-0.9px;--e-global-typography-primary-word-spacing:0em;--e-global-typography-secondary-font-family:"Fraunces";--e-global-typography-secondary-font-size:34px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-secondary-letter-spacing:-0.6px;--e-global-typography-secondary-word-spacing:0em;--e-global-typography-text-font-family:"DM Sans";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:1.65em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-text-word-spacing:0em;--e-global-typography-accent-font-family:"DM Sans";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:none;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:1.3em;--e-global-typography-accent-letter-spacing:0.2px;--e-global-typography-accent-word-spacing:0em;--e-global-typography-6558fb1-font-family:"Fraunces";--e-global-typography-6558fb1-font-size:26px;--e-global-typography-6558fb1-font-weight:500;--e-global-typography-6558fb1-text-transform:none;--e-global-typography-6558fb1-font-style:normal;--e-global-typography-6558fb1-line-height:1.25em;--e-global-typography-6558fb1-letter-spacing:-0.3px;--e-global-typography-392b9e0-font-family:"DM Sans";--e-global-typography-392b9e0-font-size:17px;--e-global-typography-392b9e0-font-weight:500;--e-global-typography-392b9e0-text-transform:none;--e-global-typography-392b9e0-font-style:normal;--e-global-typography-392b9e0-text-decoration:none;--e-global-typography-392b9e0-line-height:1.35em;--e-global-typography-392b9e0-letter-spacing:0px;--e-global-typography-c05b693-font-family:"DM Sans";--e-global-typography-c05b693-font-size:13px;--e-global-typography-c05b693-font-weight:400;--e-global-typography-c05b693-text-transform:none;--e-global-typography-c05b693-font-style:normal;--e-global-typography-c05b693-text-decoration:none;--e-global-typography-c05b693-line-height:1.5em;--e-global-typography-c05b693-letter-spacing:0px;--e-global-typography-b2deeae-font-family:"Fraunces";--e-global-typography-b2deeae-font-size:56px;--e-global-typography-b2deeae-font-weight:600;--e-global-typography-b2deeae-text-transform:none;--e-global-typography-b2deeae-font-style:normal;--e-global-typography-b2deeae-text-decoration:none;--e-global-typography-b2deeae-line-height:1.1em;--e-global-typography-b2deeae-letter-spacing:-1.2px;--e-global-typography-71b5b38-font-family:"DM Sans";--e-global-typography-71b5b38-font-size:24px;--e-global-typography-71b5b38-font-weight:600;--e-global-typography-71b5b38-text-transform:none;--e-global-typography-71b5b38-font-style:normal;--e-global-typography-71b5b38-text-decoration:line-through;--e-global-typography-71b5b38-line-height:1.3em;--e-global-typography-71b5b38-letter-spacing:0px;--e-global-typography-71b5b38-word-spacing:0em;--e-global-typography-555f776-font-family:"DM Sans";--e-global-typography-555f776-font-size:11px;--e-global-typography-555f776-font-weight:500;--e-global-typography-555f776-text-transform:uppercase;--e-global-typography-555f776-font-style:normal;--e-global-typography-555f776-text-decoration:none;--e-global-typography-555f776-line-height:1em;--e-global-typography-555f776-letter-spacing:0.7px;background-color:var( --e-global-color-c696dce );color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-kit-4846 button,.elementor-kit-4846 input[type="button"],.elementor-kit-4846 input[type="submit"],.elementor-kit-4846 .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-392b9e0-font-family ), Sans-serif;font-size:var( --e-global-typography-392b9e0-font-size );font-weight:var( --e-global-typography-392b9e0-font-weight );text-transform:var( --e-global-typography-392b9e0-text-transform );font-style:var( --e-global-typography-392b9e0-font-style );text-decoration:var( --e-global-typography-392b9e0-text-decoration );line-height:var( --e-global-typography-392b9e0-line-height );letter-spacing:var( --e-global-typography-392b9e0-letter-spacing );color:var( --e-global-color-c696dce );box-shadow:0px 0px 0px 0px rgba(0,0,0,0.5);border-style:none;border-radius:6px 6px 6px 6px;padding:13px 26px 013px 26px;}.elementor-kit-4846 e-page-transition{background-color:#FFBC7D;}body.e-wc-message-notice .woocommerce-message, body.e-wc-message-notice .wc-block-components-notice-banner.is-success{background-color:var( --e-global-color-secondary );}body.e-wc-message-notice .woocommerce-message .button, body.e-wc-message-notice .wc-block-components-notice-banner.is-success .button{background-color:var( --e-global-color-86b4fcd );background-image:var( --e-global-color-86b4fcd );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );border-width:1px 1px 1px 1px;}body.e-wc-message-notice .woocommerce-message .button:hover, body.e-wc-message-notice .wc-block-components-notice-banner.is-success .button:hover{background-color:var( --e-global-color-accent );background-image:var( --e-global-color-accent );}body.e-wc-info-notice .woocommerce-info, body.e-wc-info-notice .wc-block-components-notice-banner.is-info{background-color:var( --e-global-color-86b4fcd );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );}body.e-wc-info-notice .woocommerce-info .button, body.e-wc-info-notice .wc-block-components-notice-banner.is-info .button{background-color:var( --e-global-color-accent );background-image:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );border-width:1px 1px 1px 1px;}body.e-wc-info-notice .woocommerce-info .button:hover, body.e-wc-info-notice .wc-block-components-notice-banner.is-info .button:hover, body.e-wc-info-notice .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-info .woocommerce-Button:hover, body.e-wc-info-notice .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .wc-block-components-notice-banner.is-info .woocommerce-Button:hover{background-color:var( --e-global-color-86b4fcd );background-image:var( --e-global-color-86b4fcd );}.elementor-kit-4846 a{color:var( --e-global-color-accent );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-kit-4846 a:hover{color:var( --e-global-color-primary );}.elementor-kit-4846 h1{color:var( --e-global-color-primary );font-family:"Fraunces", Sans-serif;font-size:44px;font-weight:600;text-transform:none;font-style:normal;text-decoration:none;line-height:1.15em;letter-spacing:-0.9px;word-spacing:0em;}.elementor-kit-4846 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );font-style:var( --e-global-typography-primary-font-style );text-decoration:var( --e-global-typography-primary-text-decoration );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-kit-4846 h3{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );font-style:var( --e-global-typography-secondary-font-style );text-decoration:var( --e-global-typography-secondary-text-decoration );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-4846 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );font-style:var( --e-global-typography-secondary-font-style );text-decoration:var( --e-global-typography-secondary-text-decoration );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-4846 h5{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );font-style:var( --e-global-typography-secondary-font-style );text-decoration:var( --e-global-typography-secondary-text-decoration );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-4846 h6{color:var( --e-global-color-accent );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );font-style:var( --e-global-typography-secondary-font-style );text-decoration:var( --e-global-typography-secondary-text-decoration );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:20px;--container-default-padding-bottom:0px;--container-default-padding-left:20px;}{}h1.entry-title{display:var(--page-title-display);}.e-wc-error-notice .woocommerce-error, .e-wc-error-notice .wc-block-components-notice-banner.is-error{--error-message-text-color:var( --e-global-color-primary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );--error-message-normal-links-color:var( --e-global-color-text );--error-message-hover-links-color:var( --e-global-color-accent );}body.e-wc-error-notice .woocommerce-error a.wc-backward, body.e-wc-error-notice .wc-block-components-notice-banner.is-error a.wc-backward{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.e-wc-message-notice .woocommerce-message, .e-wc-message-notice .wc-block-components-notice-banner.is-success{--message-message-text-color:var( --e-global-color-accent );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );--message-message-icon-color:var( --e-global-color-accent );--message-buttons-normal-text-color:var( --e-global-color-accent );--message-buttons-hover-text-color:var( --e-global-color-d6cea4e );--message-buttons-hover-border-color:var( --e-global-color-accent );--message-border-type:solid;--message-border-color:var( --e-global-color-accent );--message-buttons-border-radius:300px 300px 300px 300px;}body.e-wc-message-notice .woocommerce-message .restore-item, body.e-wc-message-notice .wc-block-components-notice-banner.is-success .restore-item, body.e-wc-message-notice .woocommerce-message a:not([class]), body.e-wc-message-notice .wc-block-components-notice-banner.is-success a:not([class]){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.e-wc-message-notice .woocommerce-message .restore-item, .e-wc-message-notice .wc-block-components-notice-banner.is-success .restore-item, .e-wc-message-notice .woocommerce-message a:not([class]), .e-wc-message-notice .wc-block-components-notice-banner.is-success a:not([class]){--notice-message-normal-links-color:var( --e-global-color-text );}.e-wc-message-notice .woocommerce-message .restore-item:hover, .e-wc-message-notice .wc-block-components-notice-banner.is-success .restore-item:hover, .e-wc-message-notice .woocommerce-message a:not([class]):hover, .e-wc-message-notice .wc-block-components-notice-banner.is-success a:not([class]):hover{--notice-message-hover-links-color:var( --e-global-color-accent );}.e-wc-info-notice .woocommerce-info, .e-wc-info-notice .wc-block-components-notice-banner.is-info{--info-message-text-color:var( --e-global-color-primary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );--info-message-icon-color:var( --e-global-color-primary );--info-buttons-normal-text-color:var( --e-global-color-d6cea4e );--info-buttons-hover-text-color:var( --e-global-color-accent );--info-buttons-hover-border-color:var( --e-global-color-accent );--info-border-type:solid;--info-border-color:var( --e-global-color-accent );--info-buttons-border-radius:300px 300px 300px 300px;}@media(max-width:1024px){.elementor-kit-4846{--e-global-typography-primary-font-size:38px;--e-global-typography-primary-line-height:1.15em;--e-global-typography-primary-letter-spacing:-0.9px;--e-global-typography-primary-word-spacing:0em;--e-global-typography-secondary-font-size:30px;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-secondary-letter-spacing:-0.6px;--e-global-typography-secondary-word-spacing:0em;--e-global-typography-text-font-size:16px;--e-global-typography-text-line-height:1.65em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-text-word-spacing:0em;--e-global-typography-accent-font-size:17px;--e-global-typography-accent-line-height:1.3em;--e-global-typography-accent-letter-spacing:0.2px;--e-global-typography-accent-word-spacing:0em;--e-global-typography-6558fb1-font-size:24px;--e-global-typography-6558fb1-line-height:1.25em;--e-global-typography-6558fb1-letter-spacing:-0.3px;--e-global-typography-392b9e0-font-size:17px;--e-global-typography-392b9e0-line-height:1.35em;--e-global-typography-392b9e0-letter-spacing:0px;--e-global-typography-c05b693-font-size:13px;--e-global-typography-c05b693-line-height:1.5em;--e-global-typography-c05b693-letter-spacing:0px;--e-global-typography-b2deeae-font-size:44px;--e-global-typography-b2deeae-line-height:1.1em;--e-global-typography-b2deeae-letter-spacing:-1.2px;--e-global-typography-71b5b38-font-size:22px;--e-global-typography-71b5b38-line-height:1.3em;--e-global-typography-71b5b38-letter-spacing:0px;--e-global-typography-555f776-font-size:11px;--e-global-typography-555f776-line-height:1em;--e-global-typography-555f776-letter-spacing:0.7px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-kit-4846 a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-kit-4846 h1{font-size:38px;}.elementor-kit-4846 h2{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-kit-4846 h3{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-4846 h4{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-4846 h5{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-4846 h6{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-4846 button,.elementor-kit-4846 input[type="button"],.elementor-kit-4846 input[type="submit"],.elementor-kit-4846 .elementor-button{font-size:var( --e-global-typography-392b9e0-font-size );line-height:var( --e-global-typography-392b9e0-line-height );letter-spacing:var( --e-global-typography-392b9e0-letter-spacing );}.e-con{--container-default-padding-top:0px;--container-default-padding-right:14px;--container-default-padding-bottom:0px;--container-default-padding-left:14px;}.e-wc-error-notice .woocommerce-error, .e-wc-error-notice .wc-block-components-notice-banner.is-error{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}body.e-wc-error-notice .woocommerce-error a.wc-backward, body.e-wc-error-notice .wc-block-components-notice-banner.is-error a.wc-backward{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.e-wc-message-notice .woocommerce-message, .e-wc-message-notice .wc-block-components-notice-banner.is-success{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}body.e-wc-message-notice .woocommerce-message .restore-item, body.e-wc-message-notice .wc-block-components-notice-banner.is-success .restore-item, body.e-wc-message-notice .woocommerce-message a:not([class]), body.e-wc-message-notice .wc-block-components-notice-banner.is-success a:not([class]){font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}body.e-wc-message-notice .woocommerce-message .button, body.e-wc-message-notice .wc-block-components-notice-banner.is-success .button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.e-wc-info-notice .woocommerce-info, .e-wc-info-notice .wc-block-components-notice-banner.is-info{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}body.e-wc-info-notice .woocommerce-info .button, body.e-wc-info-notice .wc-block-components-notice-banner.is-info .button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}}@media(max-width:767px){.elementor-kit-4846{--e-global-typography-primary-font-size:30px;--e-global-typography-primary-line-height:1.15em;--e-global-typography-primary-letter-spacing:-0.9px;--e-global-typography-primary-word-spacing:0em;--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-secondary-letter-spacing:-0.6px;--e-global-typography-secondary-word-spacing:0em;--e-global-typography-text-font-size:14px;--e-global-typography-text-line-height:1.65em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-text-word-spacing:0em;--e-global-typography-accent-font-size:15px;--e-global-typography-accent-line-height:1.3em;--e-global-typography-accent-letter-spacing:0.2px;--e-global-typography-accent-word-spacing:0em;--e-global-typography-6558fb1-font-size:21px;--e-global-typography-6558fb1-line-height:1.25em;--e-global-typography-6558fb1-letter-spacing:-0.3px;--e-global-typography-392b9e0-font-size:16px;--e-global-typography-392b9e0-line-height:1.35em;--e-global-typography-392b9e0-letter-spacing:0px;--e-global-typography-c05b693-font-size:12px;--e-global-typography-c05b693-line-height:1.5em;--e-global-typography-c05b693-letter-spacing:0px;--e-global-typography-b2deeae-font-size:34px;--e-global-typography-b2deeae-line-height:1.1em;--e-global-typography-b2deeae-letter-spacing:-1.2px;--e-global-typography-71b5b38-font-size:21px;--e-global-typography-71b5b38-line-height:1.3em;--e-global-typography-71b5b38-letter-spacing:0px;--e-global-typography-555f776-font-size:10px;--e-global-typography-555f776-line-height:1em;--e-global-typography-555f776-letter-spacing:0.7px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-kit-4846 a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-kit-4846 h1{font-size:30px;line-height:1.15em;}.elementor-kit-4846 h2{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-kit-4846 h3{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-4846 h4{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-4846 h5{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-4846 h6{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-4846 button,.elementor-kit-4846 input[type="button"],.elementor-kit-4846 input[type="submit"],.elementor-kit-4846 .elementor-button{font-size:var( --e-global-typography-392b9e0-font-size );line-height:var( --e-global-typography-392b9e0-line-height );letter-spacing:var( --e-global-typography-392b9e0-letter-spacing );}.e-con{--container-default-padding-top:0px;--container-default-padding-right:10px;--container-default-padding-bottom:0px;--container-default-padding-left:10px;}.e-wc-error-notice .woocommerce-error, .e-wc-error-notice .wc-block-components-notice-banner.is-error{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}body.e-wc-error-notice .woocommerce-error a.wc-backward, body.e-wc-error-notice .wc-block-components-notice-banner.is-error a.wc-backward{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.e-wc-message-notice .woocommerce-message, .e-wc-message-notice .wc-block-components-notice-banner.is-success{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}body.e-wc-message-notice .woocommerce-message .restore-item, body.e-wc-message-notice .wc-block-components-notice-banner.is-success .restore-item, body.e-wc-message-notice .woocommerce-message a:not([class]), body.e-wc-message-notice .wc-block-components-notice-banner.is-success a:not([class]){font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}body.e-wc-message-notice .woocommerce-message .button, body.e-wc-message-notice .wc-block-components-notice-banner.is-success .button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.e-wc-info-notice .woocommerce-info, .e-wc-info-notice .wc-block-components-notice-banner.is-info{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}body.e-wc-info-notice .woocommerce-info .button, body.e-wc-info-notice .wc-block-components-notice-banner.is-info .button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}}/* Start custom CSS *//* ==========================================================
   NEDINEX — CUSTOM CSS
   Paste into: Elementor > Site Settings > Custom CSS
   Updated: 2026-09-25

   HOW THIS FILE WORKS
   All values live in the token blocks at the top. Edit
   numbers there, never in the rules below. The TABLET and
   MOBILE blocks at the end restate only what differs —
   anything they leave out keeps its DESKTOP value, which
   is why some small-screen values look like repeats.

   WHERE COLOUR AND TYPE COME FROM
   Every colour points at an Elementor Global Color and
   every button points at the Accent Text global, so
   editing a swatch in Site Settings > Global Colors or
   Global Fonts restyles the site, this file included.

   THE FORM THEME
   BUTTONS and FIELD TOKENS together decide how every
   button, input, textarea and dropdown looks — the account
   pages, the login forms, the cart page fields and the
   Elementor contact form all read from them, so nothing is
   styled twice.

   ONE THING TO SET IN ELEMENTOR
   The header layout block needs the class nx-header on the
   header container — Advanced > CSS Classes. Nothing else
   in this file needs an editor change.

   WHAT IS NOT HERE
   Footer, single-product and cart page colours are set in
   the Elementor widget Style tabs. This file only covers
   what those tabs cannot reach.
   ========================================================== */




/* ==========================================================
   BRAND COLOURS
   The single source of truth for the palette.

   var(--e-global-color-x, #HEX) uses the global when it
   exists and the hex when it does not, so deleting or
   renaming a swatch degrades to the right colour rather
   than to nothing. Keep the hex in step if you change a
   swatch. The ids on the Custom Colors were read from Site
   Settings > Global Colors and belong to this site only —
   they will not match another install.
   ========================================================== */

:root {

  /* ----- System Colors ----- */

  --brand-primary:   var(--e-global-color-primary,   #2E2A22);  /* headings */
  --brand-secondary: var(--e-global-color-secondary, #6E6852);  /* muted text */
  --brand-text:      var(--e-global-color-text,      #423D33);  /* body copy */
  --brand-accent:    var(--e-global-color-accent,    #4E6647);  /* olive */


  /* ----- Custom Colors ----- */

  --brand-bg-kit:       var(--e-global-color-c696dce, #FFFDDB);   /* BG Kit */
  --brand-accent-hover: var(--e-global-color-e577f1a, #3E5239);   /* Accent Hover */
  --brand-white:        var(--e-global-color-d6cea4e, #FFFFFF);   /* White Element */
  --brand-transparent:  var(--e-global-color-86b4fcd, #02010100); /* Full Transparency */
  --brand-yellow:       var(--e-global-color-e6f23d7, #FFFCBB);   /* Yellow */
  --brand-border:       var(--e-global-color-b8f6fd8, #EDE3A0);   /* hairline */
  --brand-clay:         var(--e-global-color-cae5207, #9E5539);   /* SALE badge */


  /* ----- Not yet in Global Colors -----
     Two pale tints with no swatch of their own. Add them in
     Site Settings if you want them managed there, then
     replace the hex with the new id. */

  --brand-hover-bg: #F6F0C6;    /* pagination fill on hover */
  --brand-input-bg: #FFFEEC;    /* field and dropdown fill */

  /* Clay darkened by the same 20% that separates Accent
     Hover from Accent, so both hover states feel alike.
     Used by the cart page remove button. */

  --brand-clay-hover: #7E442E;


  /* ----- Mixed from the palette -----
     So the focus ring and the badge lift follow the accent
     and heading colours instead of being frozen hex. On a
     browser without color-mix the ring and shadow simply do
     not draw — nothing else is affected. */

  --brand-ring:   color-mix(in srgb, var(--brand-accent) 18%, transparent);
  --brand-shadow: color-mix(in srgb, var(--brand-primary) 22%, transparent);

}




/* ==========================================================
   BRAND TYPOGRAPHY
   Pulled from Elementor's System typography globals. Those
   four names are fixed, so no ids are needed here.
   Elementor re-declares the sizes inside its own
   breakpoints, so anything pointing at them stays
   responsive on its own.
   ========================================================== */

:root {

  --brand-font-heading: var(--e-global-typography-primary-font-family, 'Fraunces'), serif;
  --brand-font-body:    var(--e-global-typography-text-font-family,    'DM Sans'),  sans-serif;
  --brand-font-accent:  var(--e-global-typography-accent-font-family,  'DM Sans'),  sans-serif;


  /* The full Body Text set, for places that must match a
     paragraph exactly rather than just share its face. */

  --brand-body-size:   var(--e-global-typography-text-font-size,   16px);
  --brand-body-weight: var(--e-global-typography-text-font-weight, 400);
  --brand-body-lh:     var(--e-global-typography-text-line-height, 1.6);


  /* The full Accent Text set. Buttons, pagination and the
     sorting dropdown all use this, so they match the
     account tab labels the widget already styles with it. */

  --brand-accent-size:      var(--e-global-typography-accent-font-size,      18px);
  --brand-accent-weight:    var(--e-global-typography-accent-font-weight,    500);
  --brand-accent-lh:        var(--e-global-typography-accent-line-height,    1.3);
  --brand-accent-ls:        var(--e-global-typography-accent-letter-spacing, 0);
  --brand-accent-transform: var(--e-global-typography-accent-text-transform, none);

}




/* ==========================================================
   BUTTONS
   One type treatment for every button on the site: shop
   cards, the single product page, the account panel, the
   contact form, WooCommerce notices, the side cart, the
   quantity control and the size swatches. All of it comes
   from the Accent Text global, so restyling every button is
   one edit in Site Settings.

   SIZE IS THE EXCEPTION. It stays per-context in the
   blocks below, because a 165px phone card and a
   full-width account panel cannot carry the same one.

   TO GO BACK TO ALL-CAPS BUTTONS set --btn-transform to
   uppercase and --btn-ls to 0.06em here. That changes
   every button at once, which is the point. Same idea for
   pills: --btn-radius: 999px.
   ========================================================== */

:root {

  --btn-family:    var(--brand-font-accent);
  --btn-size:      var(--brand-accent-size);      /* account panel, forms, notices */
  --btn-weight:    var(--brand-accent-weight);
  --btn-lh:        var(--brand-accent-lh);
  --btn-ls:        var(--brand-accent-ls);
  --btn-transform: var(--brand-accent-transform);
  --btn-radius:    7px;


  /* ----- Inactive state -----
     Same button, faded. Opacity rather than a second colour
     so there is one number to tune and nothing to keep in
     step with the palette. Lower for a fainter button,
     raise towards 1 for a more solid one. */

  --btn-disabled-opacity: 0.45;

}




/* ==========================================================
   FIELD TOKENS
   One treatment for every input, textarea and dropdown on
   the site: the account pages, the login and register
   forms, the cart page's coupon and shipping fields, and
   the Elementor contact form. Edit here and all of them
   follow.

   Buttons are in the BUTTONS block above; this is fields
   only. The two together are the whole form theme.
   ========================================================== */

:root {

  /* ----- Colours ----- */

  --field-bg:          var(--brand-input-bg);   /* inputs — cream, not white */
  --field-select-bg:   var(--brand-bg-kit);     /* dropdown — matches the page */
  --field-text:        var(--brand-primary);    /* what you type */
  --field-placeholder: var(--brand-secondary);  /* the hint text */
  --field-border:      var(--brand-border);
  --field-focus:       var(--brand-accent);     /* border of the active field */
  --field-label:       var(--brand-primary);


  /* ----- Box ----- */

  --field-size:          16px;      /* under 16 and iOS zooms on tap */
  --field-padding:       12px 16px;
  --field-radius:        6px;
  --field-select-height: 48px;      /* the select's own height — see the rule */
  --field-maxwidth:      100%;      /* a px value caps wide fields */
  --field-label-size:    15px;
  --field-textarea-min:  160px;     /* how tall the Message box starts */


  /* The dropdown chevron is an inline SVG, and a data URI
     cannot read a CSS variable — the colour is written in.
     %23 is an encoded #, so %23423D33 is #423D33. If you
     change your Body Text global, change those six
     characters to match. */
  --field-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23423D33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

}




/* ==========================================================
   QUANTITY STEPPER TOKENS
   The − and + wherever the quantity snippet adds them: the
   single product page and the cart page. Both read these,
   so the two always match. The side cart and checkout have
   no stepper.

   The box around them uses the field border and fill from
   FIELD TOKENS. Heights and widths stay with each page,
   because the product page and the cart size them
   differently.

   FOR SOLID OLIVE BUTTONS instead of olive symbols, set the
   two -bg tokens to var(--brand-accent) and
   var(--brand-accent-hover), and both symbol colours to
   var(--brand-bg-kit).
   ========================================================== */

:root {

  --qty-glyph-size:     18px;                        /* size of − and + */
  --qty-c-btn:          var(--brand-accent);         /* − and + */
  --qty-c-btn-hover:    var(--brand-accent-hover);   /* − and + on hover */
  --qty-c-btn-bg:       transparent;                 /* behind − and + */
  --qty-c-btn-bg-hover: var(--brand-hover-bg);       /* pale tint on hover, so the change shows */

}




/* ==========================================================
   HEADER TOKENS
   Used by the HEADER LAYOUT block further down, which only
   applies at 768px and up — the mobile header is left to
   the widgets' own Advanced > Layout settings.
   ========================================================== */

:root {

  --header-inset:       40px;                 /* side gutter */
  --header-gap:         20px;                 /* between the icon and the cart */
  --header-height:      72px;                 /* see the note in HEADER LAYOUT */
  --header-logo-height: 40px;                 /* caps the logo image */
  --header-line:        1px;                  /* hairline underneath, 0 to remove */
  --header-c-line:      var(--brand-border);

}




/* ==========================================================
   SHOP TOKENS — DESKTOP
   1025px and up. Two columns makes each card roughly
   530–580px wide, so type and spacing are scaled up to
   fill it rather than floating in a big empty card.

   COLUMN COUNT
   --shop-columns controls the shop grid AND the related
   products row — both output the same markup. The Archive
   Products widget has no Columns setting at all, and this
   overrides the Customizer and the Related Products
   widget, so the token is the single source of truth.
   ========================================================== */

:root {

  /* ----- Colours -----
     Names kept so the rules below are unchanged; the values
     come from BRAND COLOURS. */

  --shop-c-title:        var(--brand-primary);      /* product name */
  --shop-c-price:        var(--brand-accent-hover); /* sale price */
  --shop-c-oldprice:     var(--brand-secondary);    /* struck-through price */
  --shop-c-meta:         var(--brand-text);         /* pagination and dropdown */
  --shop-c-accent:       var(--brand-accent);       /* button fill, star rating */
  --shop-c-accent-hover: var(--brand-accent-hover); /* button fill on hover */
  --shop-c-card-bg:      var(--brand-bg-kit);       /* card background — the page colour */
  --shop-c-border:       var(--brand-border);       /* card border, dividers */
  --shop-c-cat:          var(--brand-secondary);    /* category label above the name */
  --shop-c-badge-bg:     var(--brand-clay);         /* SALE badge fill */
  --shop-c-on-dark:      var(--brand-bg-kit);       /* text on sage or clay */
  --shop-c-hover-bg:     var(--brand-hover-bg);     /* pagination hover fill */
  --shop-c-input-bg:     var(--brand-input-bg);     /* sorting dropdown fill */


  /* ----- Grid ----- */

  --shop-columns:     2;            /* cards per row — shop AND related */
  --shop-grid-gap:    32px;         /* space between cards, both directions */
  --shop-grid-margin: 0 0 40px;     /* space above / below the whole grid */
  --shop-grid-inset:  0;            /* side gutter — raise if cards touch the edge */


  /* ----- Card ----- */

  --shop-card-padding: 28px;        /* space inside the card */
  --shop-card-radius:  12px;
  --shop-card-border:  1px;         /* 0 to remove the outline */


  /* ----- Product photo ----- */

  --shop-image-ratio:  3 / 4;       /* 1/1 square, 4/5 or 3/4 portrait */
  --shop-image-radius: 10px;
  --shop-image-gap:    22px;        /* space below the photo */


  /* ----- Category label ----- */

  --shop-cat-size: 13px;
  --shop-cat-ls:   0.06em;          /* wide tracking, same idea as the badge */
  --shop-cat-gap:  8px;             /* label to product name */


  /* ----- Product name ----- */

  --shop-title-family: var(--brand-font-heading);
  --shop-title-size:   30px;        /* lower if names wrap badly */
  --shop-title-weight: 500;
  --shop-title-lh:     1.25;
  --shop-title-ls:     -0.4px;
  --shop-title-gap:    12px;


  /* ----- Sale price — the big one ----- */

  --shop-price-family: var(--brand-font-heading);
  --shop-price-size:   36px;        /* what customers should read first */
  --shop-price-weight: 500;
  --shop-price-lh:     1.2;
  --shop-price-ls:     -0.8px;
  --shop-price-gap:    24px;        /* separates it from the button */


  /* ----- Original price — struck through ----- */

  --shop-oldprice-family: var(--brand-font-heading);
  --shop-oldprice-size:   26px;     /* keep below the sale price */
  --shop-oldprice-weight: 500;
  --shop-oldprice-lh:     1.25;
  --shop-oldprice-ls:     -0.4px;
  --shop-oldprice-space:  12px;     /* gap between the two prices */


  /* ----- SALE badge ----- */

  --shop-badge-family:    var(--brand-font-accent);
  --shop-badge-size:      15px;
  --shop-badge-weight:    600;
  --shop-badge-ls:        0.08em;   /* wide tracking keeps small caps legible */
  --shop-badge-transform: uppercase;
  --shop-badge-padding:   10px 18px;
  --shop-badge-radius:    7px;
  --shop-badge-offset:    18px;     /* distance in from the photo corner */


  /* ----- Button -----
     Type comes from the BUTTONS block. These control the
     box only. --shop-button-mx is what centres it: auto
     centres, 0 pushes it left. */

  --shop-button-size:     16px;
  --shop-button-padding:  16px 28px;
  --shop-button-width:    100%;     /* fit-content shrinks it to its label */
  --shop-button-maxwidth: 260px;    /* stops it stretching across a wide card */
  --shop-button-mx:       auto;     /* auto = centred, 0 = left */
  --shop-button-align:    center;   /* stretch, flex-start, center, flex-end */


  /* ----- Star rating ----- */

  --shop-rating-size: 16px;
  --shop-rating-gap:  10px;         /* space above the stars */


  /* ----- Pagination and sorting dropdown ----- */

  --shop-meta-family:  var(--brand-font-accent);
  --shop-meta-size:    15px;
  --shop-meta-padding: 8px 14px;    /* also the tap target size */


  /* ----- "Related products" heading ----- */

  --shop-heading-family: var(--brand-font-heading);
  --shop-heading-size:   36px;
  --shop-heading-weight: 500;
  --shop-heading-lh:     1.2;
  --shop-heading-ls:     -0.6px;
  --shop-heading-align:  center;    /* left, center or right */
  --shop-heading-gap:    36px;      /* heading to cards */


  /* ----- Related products section ----- */

  --shop-section-space: 72px;       /* gap above the whole block */
  --shop-section-line:  1px;        /* divider above it, 0 to remove */


  /* ----- Single product Add to cart -----
     Type comes from the BUTTONS block; colours stay in the
     widget's Style tab. Only the box is here. */

  --shop-cart-size:    16px;
  --shop-cart-padding: 16px 30px;

}




/* ==========================================================
   NOTICE & CART TOKENS
   The WooCommerce notices that appear on every page, the
   side cart panel and the cart page. Button type comes from
   the BUTTONS block; colours from BRAND COLOURS.
   ========================================================== */

:root {

  /* ----- Notices -----
     One shape for all three, with a coloured left edge
     telling them apart, so a shopper learns the pattern
     once. The Elementor form messages reuse these. */

  --notice-bg:        var(--brand-bg-kit);
  --notice-border:    var(--brand-border);
  --notice-radius:    8px;
  --notice-padding:   16px 20px 16px 52px;   /* left clears the icon */
  --notice-edge:      4px;                   /* the coloured left bar */
  --notice-c-success: var(--brand-accent);
  --notice-c-error:   var(--brand-clay);
  --notice-c-info:    var(--brand-secondary);
  --notice-space:     24px;                  /* gap below a notice */
  --notice-btn-padding: 12px 22px;


  /* ----- Side cart ----- */

  --cart-width:         400px;      /* panel width on desktop */
  --cart-padding:       28px;
  --cart-row-gap:       20px;       /* between line items */
  --cart-title-size:    16px;
  --cart-meta-size:     13px;       /* variation and quantity lines */
  --cart-price-size:    16px;
  --cart-subtotal-size: 20px;
  --cart-btn-size:      16px;
  --cart-btn-padding:   14px 24px;
  --cart-btn-gap:       10px;


  /* ----- Cart page -----
     Colours, fonts, dividers and buttons are set in the Cart
     widget's Style tab. Fields come from FIELD TOKENS. These
     cover the parts neither of those reaches. */

  --cartpage-total-size: 28px;      /* the final Total row, larger than the rest */


  /* Quantity stepper sizes on the cart. Its colours are in
     QUANTITY STEPPER TOKENS, shared with the product page. */

  --cartpage-qty-height: 42px;      /* same height as the product page */
  --cartpage-qty-btn:    34px;      /* width of − and + */
  --cartpage-qty-input:  42px;      /* width of the number */


  /* Remove button: the × at the start of each row. A filled
     clay rounded square that darkens on hover — clay is the
     site's "remove / error" colour, as in the error notices.

     Common changes:
     - circle instead of square: --cartpage-remove-radius: 50%
     - bigger: raise --cartpage-remove-size and
       --cartpage-remove-icon together
     - outlined instead of filled: -bg → transparent, ring →
       var(--brand-clay), and the × colour in the SVG below
       → %239E5539 */

  --cartpage-remove-size:       32px;              /* the square */
  --cartpage-remove-icon:       12px;              /* size of the × inside it */
  --cartpage-remove-radius:     var(--btn-radius); /* same corners as the buttons */
  --cartpage-remove-ring-width: 1px;               /* the outline; same colour as the fill here */

  --cartpage-c-remove-bg:         var(--brand-clay);        /* the fill */
  --cartpage-c-remove-ring:       var(--brand-clay);        /* the outline */
  --cartpage-c-remove-hover-bg:   var(--brand-clay-hover);  /* darker clay on hover */
  --cartpage-c-remove-hover-ring: var(--brand-clay-hover);

  /* The × itself, as an SVG, so it is a crisp, evenly drawn
     cross with rounded ends at any size. Like the dropdown
     chevron in FIELD TOKENS, its colour and thickness are
     written in, because a data URI cannot read a CSS
     variable:
     - colour:    stroke='%23FFFDDB' is #FFFDDB (BG Kit).
                  Change the six characters after %23.
     - thickness: stroke-width='2'. 1.5 is lighter, 2.5 is
                  bolder. */

  --cartpage-remove-x: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23FFFDDB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");


  /* Cart page on tablet and phone. Used only by the CART
     PAGE — TABLET AND PHONE block, so they do nothing on
     desktop. The values here are the tablet ones; the
     MOBILE block at the end restates the phone ones.

     At 768px and below each cart item becomes a card:
     photo on the left, name and price beside it, the
     remove button top right, the stepper and line total
     underneath. */

  --cartpage-card-thumb:   88px;    /* width of the product photo */
  --cartpage-card-gap:     16px;    /* photo to text */
  --cartpage-card-padding: 20px;    /* above and below each item */
  --cartpage-card-price:   15px;    /* the unit price under the name */
  --cartpage-card-qty-gap: 12px;    /* photo to the stepper row */

  /* 1024px and below, where Elementor stacks the item list
     above Cart Total. */

  --cartpage-section-gap:  36px;    /* item list to Cart Total */
  --cartpage-row-size:     20px;    /* Subtotal, Shipment, VAT rows — the final Total is --cartpage-total-size */

}




/* ==========================================================
   ACCOUNT TOKENS — DESKTOP
   1025px and up. Drives the My Account page only.

   Field colours and sizes come from FIELD TOKENS, button
   type from BUTTONS. The names below are kept so the rules
   further down are unchanged, but the values live in those
   two blocks — do not paste hex values or px sizes here.

   Only four things on that page need CSS at all: equal
   width tabs, the in-panel buttons, the Woo notice boxes
   and the form fields. Everything else is set in the My
   Account widget's Style tab.
   ========================================================== */

:root {

  /* ----- Tabs row -----
     Layout only. Tab colours, fonts and padding are set in
     the widget's Style > Tabs panel, NOT here.

     The row is a CSS grid, not flex. Flex lets an item
     shrink below its width to avoid wrapping, which is what
     made six tabs squeeze onto one line and overlap on
     tablet. Grid columns cannot shrink past their share, so
     tabs are always equal and wrap onto a new row once the
     count is exceeded. There are six tabs, so use a count
     that divides into six: 6, 3, 2 or 1.

     The count for narrower screens is NOT here. It lives in
     its own block at the very bottom of this file, on its
     own breakpoints, so the shop breakpoints cannot throw
     it off.

     SET the widget's Style > Tabs > Spacing to 0. The gap
     below replaces it — leaving both on doubles it. */

  --acct-tab-columns:    6;         /* 6 puts them all on one line */
  --acct-tab-gap:        4px;
  --acct-tab-min-height: 52px;      /* every tab at least this tall */
  --acct-tab-padding:    14px 18px; /* overrides the widget's tab padding */
  --acct-tab-nowrap:     normal;    /* normal = a tight label wraps, not clips */


  /* ----- Fonts -----
     Buttons use BUTTONS, fields use FIELD TOKENS. This is
     for labels, addresses and helper text. */

  --acct-body-family: var(--brand-font-body);


  /* ----- Panel colours ----- */

  --acct-c-bg:         var(--brand-bg-kit);      /* panels and sections */
  --acct-c-text:       var(--brand-text);
  --acct-c-heading:    var(--brand-primary);
  --acct-c-muted:      var(--brand-secondary);
  --acct-c-link:       var(--brand-accent);
  --acct-c-link-hover: var(--brand-accent-hover);
  --acct-c-border:     var(--brand-border);
  --acct-c-on-accent:  var(--brand-bg-kit);      /* text sitting on olive */


  /* ----- Field colours -----
     From FIELD TOKENS. The text three are what stop typed
     text disappearing: without them the colour inside an
     input came from whichever of Astra, WooCommerce or
     Elementor Theme Style declared it last — on this site,
     a shade close to the field fill. */

  --acct-c-field-bg:    var(--field-bg);
  --acct-c-select-bg:   var(--field-select-bg);
  --acct-c-field-text:  var(--field-text);
  --acct-c-placeholder: var(--field-placeholder);
  --acct-c-field-focus: var(--field-focus);


  /* ----- Buttons inside the panel -----
     WooCommerce ships its own .button styling that beats
     the widget's Style tab, which is why these are in CSS.
     Type comes from BUTTONS; only the box is here. */

  --acct-button-padding: 14px 26px;


  /* ----- Form fields and the currency dropdown -----
     All from FIELD TOKENS, so the account page and the
     contact form stay identical. */

  --acct-field-size:     var(--field-size);
  --acct-field-padding:  var(--field-padding);
  --acct-field-radius:   var(--field-radius);
  --acct-select-height:  var(--field-select-height);
  --acct-field-maxwidth: var(--field-maxwidth);
  --acct-select-arrow:   var(--field-arrow);


  /* ----- Notice boxes -----
     Woo styles these grey with a coloured top bar and no
     widget reaches them. */

  --acct-notice-bg:           var(--acct-c-bg);
  --acct-notice-border:       var(--acct-c-border);
  --acct-notice-border-width: 0;                  /* 1px to outline them */
  --acct-notice-accent:       var(--acct-c-link); /* the small icon */
  --acct-notice-radius:       8px;
  --acct-notice-padding:      18px 22px 18px 52px;


  /* ----- Address blocks -----
     Woo wraps these in floated columns with a border and a
     fixed height, which is why the text spilled out. The
     rules strip that and rebuild the pair as a grid. */

  --acct-address-columns: 2;        /* 1 stacks them */
  --acct-address-padding: 0;
  --acct-address-top:     24px;     /* space above the pair */
  --acct-address-gap:     32px;
  --acct-address-border:  0;        /* 1px to outline them */
  --acct-address-lh:      1.7;      /* spacing between address lines */

}




/* ==========================================================
   HEADER LAYOUT
   Menu hard left, logo centred on the page, account icon
   and cart hard right.

   NEEDS ONE EDIT IN ELEMENTOR: select the header container
   (Header > Container in the Structure panel) and type
   nx-header into Advanced > CSS Classes. Nothing here
   applies until that class is on the container.

   Everything is scoped to that class and marked
   !important, so the container's own Direction, Justify
   Content and Gaps settings are overridden — leave them as
   they are rather than trying to match them.

   HOW THE THREE PARTS HOLD THEIR PLACES
   The menu takes margin-right:auto, which eats all the
   free space and pushes everything after it to the right
   edge. That keeps working whatever icons you add or
   remove after it.

   The logo is lifted out of the flex row and pinned to the
   middle of the container, so it sits dead centre on the
   page rather than centred in whatever is left over. Being
   out of the row also takes it out of the height
   calculation, which is why the container carries
   --header-height.

   THE SELECTORS EXPECT the menu, logo and icons to be
   DIRECT children of the header container. If each one
   sits inside a container of its own, the > stops matching
   and this block goes quiet — see the note after the file.

   DESKTOP AND TABLET ONLY. The mobile header keeps the
   order and centring you set on the widgets themselves in
   Advanced > Layout.
   ========================================================== */

@media (min-width: 768px) {

  .nx-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--header-gap) !important;
    min-height: var(--header-height) !important;
    padding-left: var(--header-inset) !important;
    padding-right: var(--header-inset) !important;
    border-bottom: var(--header-line) solid var(--header-c-line) !important;
    position: relative !important;                  /* anchor for the logo */
  }


  /* ----- 1. Menu, hard left ----- */

  .nx-header > .elementor-widget-wp-widget-nav_menu,
  .nx-header > .elementor-widget-nav-menu {
    order: 1 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 auto 0 0 !important;                  /* the auto is what pushes */
  }


  /* ----- 2. Logo, centred on the page -----
     If a long menu ever reaches the logo, shorten the menu
     or lower --header-logo-height. Nothing can overlap it
     otherwise. */

  .nx-header > .elementor-widget-theme-site-logo,
  .nx-header > .elementor-widget-site-logo,
  .nx-header > .elementor-widget-image {
    order: 2 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 2;
  }

  .nx-header > .elementor-widget-theme-site-logo img,
  .nx-header > .elementor-widget-site-logo img,
  .nx-header > .elementor-widget-image img {
    display: block;
    max-height: var(--header-logo-height) !important;
    width: auto !important;
  }


  /* ----- 3 and 4. Account icon and cart, hard right -----
     Order only. The right edge is handled by the menu's
     auto margin above, and --header-gap sits between
     them. */

  .nx-header > .elementor-widget-icon {
    order: 3 !important;
    margin: 0 !important;
  }

  .nx-header > .elementor-widget-woocommerce-menu-cart {
    order: 4 !important;
    margin: 0 !important;
  }

}


/* ----- OPTIONAL: menu link spacing and type -----
   Left commented out because the WordPress Menu widget has
   no Style tab and Astra is currently drawing the links
   and the dropdown carets — changing display on the list
   can break the dropdowns. Uncomment only if you want to
   take that over, and check the submenus afterwards.

.nx-header ul.menu > li > a {
  font-family: var(--brand-font-accent);
  font-size: 16px;
  font-weight: var(--brand-accent-weight);
  letter-spacing: var(--brand-accent-ls);
  color: var(--brand-text);
}

.nx-header ul.menu > li > a:hover {
  color: var(--brand-accent);
}
*/




/* ==========================================================
   HEADER — CART ICON
   Elementor classes the cart toggle as a button so Theme
   Style hits it, and widget settings cannot override that.
   These opt it out.
   ========================================================== */

.elementor-menu-cart__toggle .elementor-button,
.elementor-menu-cart__toggle_button,
.elementor-widget-woocommerce-menu-cart .elementor-button {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--brand-text) !important;
  box-shadow: none !important;
}

.elementor-menu-cart__toggle .elementor-button:hover,
.elementor-menu-cart__toggle_button:hover,
.elementor-widget-woocommerce-menu-cart .elementor-button:hover {
  background-color: transparent !important;
  color: var(--brand-accent) !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-button-icon-qty {
  background-color: var(--brand-clay) !important;   /* item count badge */
  color: var(--brand-input-bg) !important;
}




/* ==========================================================
   SHOP GRID
   /shop, category pages, AND the related products row —
   both output the same ul.products markup, so everything
   here applies to both. Change values in SHOP TOKENS.
   ========================================================== */


/* ----- SALE badge -----
   Several .elementor-kit-4846s because Astra, WooCommerce and
   Elementor each wrap it differently. Do not trim. Covers
   the grid and the single product photo. */

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.ast-onsale-card,
.ast-shop-thumbnail-wrap .onsale,
.elementor-widget-woocommerce-product-images .onsale {
  background: var(--shop-c-badge-bg) !important;
  color: var(--shop-c-on-dark) !important;

  /* Woo ships this as a fixed circle — these four flatten
     it into a tag that grows with its text. */
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: var(--shop-badge-radius) !important;
  padding: var(--shop-badge-padding) !important;

  font-family: var(--shop-badge-family) !important;
  font-size: var(--shop-badge-size) !important;
  font-weight: var(--shop-badge-weight) !important;
  line-height: 1 !important;                        /* keeps the tag tight */
  letter-spacing: var(--shop-badge-ls) !important;
  text-transform: var(--shop-badge-transform) !important;

  position: absolute !important;                    /* pins it over the photo */
  top: var(--shop-badge-offset) !important;
  left: var(--shop-badge-offset) !important;
  right: auto !important;
  margin: 0 !important;
  z-index: 5 !important;

  box-shadow: 0 2px 10px var(--brand-shadow);       /* reads on pale photos */
}


/* ----- Grid -----
   Astra and WooCommerce float loop products, which breaks
   the flex card below — grid plus float:none fixes it.
   --shop-columns beats the Customizer, the columns-N class
   and the Related Products widget setting. */

.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(var(--shop-columns), 1fr) !important;
  gap: var(--shop-grid-gap) !important;
  float: none !important;
  margin: var(--shop-grid-margin) !important;
  padding: 0 var(--shop-grid-inset) !important;
  list-style: none !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;                         /* Woo's clearfix */
}


/* ----- The card -----
   Flex column so the button pins to the bottom whatever the
   name length. Grid gap handles spacing, so no margin.

   The box is !important because Elementor's products grid
   sets li.product { padding: 0 } on a stronger .elementor-kit-4846.
   That is why the photo, name and button sat flush against
   the card edge: --shop-card-padding never applied. It also
   means the Archive Products widget's Style > Box settings
   no longer do anything — leave them empty. */

.woocommerce ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  clear: none !important;
  margin: 0 !important;

  background: var(--shop-c-card-bg) !important;
  border: var(--shop-card-border) solid var(--shop-c-border) !important;
  border-radius: var(--shop-card-radius) !important;
  padding: var(--shop-card-padding) !important;
  text-align: left;
  position: relative;                               /* anchor for the badge */
}


/* ----- The inner link -----
   Woo wraps badge, photo, name and price in one inline <a>.
   As a flex item it would shrink to its content and push
   the button beside it. Do not delete — this is what keeps
   the card in one column. */

.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
  display: block !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  position: relative;
}


/* ----- Astra's summary wrapper -----
   Astra wraps the name, price and button in a div of its
   own, so the button is not a direct flex child of the card
   and margin-top:auto never reached it. This makes the
   wrapper a full-height flex column so the button still
   pins to the bottom. Harmless if your theme does not
   output it. */

.woocommerce ul.products li.product .astra-shop-summary-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}


/* ----- Product photo -----
   Fixed ratio crops every image to the same shape, so rows
   stay level and a tall portrait cannot blow up the card. */

.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: var(--shop-image-ratio);
  object-fit: cover;                                /* crops, not squashes */
  object-position: center 20%;                      /* bias toward the top */
  border-radius: var(--shop-image-radius);
  margin-bottom: var(--shop-image-gap) !important;
  display: block;
}


/* ----- Category label -----
   Astra prints the category ("Clothing") above the name. It
   had picked up a colour almost the same as the card fill,
   so it was there but unreadable. To hide it instead, turn
   Category off in Astra's Customizer under WooCommerce >
   Product Catalog. */

.woocommerce ul.products li.product .ast-woo-product-category {
  display: block !important;
  font-family: var(--shop-meta-family) !important;
  font-size: var(--shop-cat-size) !important;
  font-weight: var(--brand-accent-weight) !important;
  line-height: 1.3 !important;
  letter-spacing: var(--shop-cat-ls) !important;
  text-transform: uppercase !important;
  color: var(--shop-c-cat) !important;
  margin: 0 0 var(--shop-cat-gap) !important;
}


/* ----- Product name -----
   !important throughout because Astra styles these as
   headings and wins on specificity. */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--shop-title-family) !important;
  font-size: var(--shop-title-size) !important;
  font-weight: var(--shop-title-weight) !important;
  line-height: var(--shop-title-lh) !important;
  letter-spacing: var(--shop-title-ls) !important;
  color: var(--shop-c-title) !important;
  padding: 0 !important;
  margin: 0 0 var(--shop-title-gap) !important;
}


/* ----- Prices -----
   The wrapper carries the sale price style; del and ins
   override for the two halves. The bottom margin is what
   creates the gap above the button, since the button uses
   margin:auto and cannot contribute its own top spacing.
   nowrap keeps both prices on one line — if they stop
   fitting they overflow rather than wrap, which is the
   visible signal to shrink the sizes. */

.woocommerce ul.products li.product .price {
  font-family: var(--shop-price-family) !important;
  font-size: var(--shop-price-size) !important;
  font-weight: var(--shop-price-weight) !important;
  line-height: var(--shop-price-lh) !important;
  letter-spacing: var(--shop-price-ls) !important;
  color: var(--shop-c-price) !important;
  margin: 0 0 var(--shop-price-gap) !important;
  display: block;
  white-space: nowrap;
}

.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount {
  font-family: var(--shop-oldprice-family) !important;
  font-size: var(--shop-oldprice-size) !important;
  font-weight: var(--shop-oldprice-weight) !important;
  line-height: var(--shop-oldprice-lh) !important;
  letter-spacing: var(--shop-oldprice-ls) !important;
  color: var(--shop-c-oldprice) !important;         /* muted, so it recedes */
  text-decoration: line-through !important;
  opacity: 1;                                       /* Woo dims it by default */
}

.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .amount {
  font-family: var(--shop-price-family) !important;
  font-size: var(--shop-price-size) !important;
  font-weight: var(--shop-price-weight) !important;
  color: var(--shop-c-price) !important;
  text-decoration: none !important;                 /* Woo underlines <ins> */
  margin-left: var(--shop-oldprice-space);
}


/* ----- Star rating ----- */

.woocommerce ul.products li.product .star-rating {
  font-size: var(--shop-rating-size);
  color: var(--shop-c-accent);
  margin: var(--shop-rating-gap) 0 0 !important;
  float: none !important;
}


/* ----- Button -----
   Type comes from the BUTTONS block, so these match the
   account panel, the contact form and the side cart.

   CENTRING: align-self alone does not reach it, because
   Astra wraps the button in a div of its own. display:block
   plus auto side margins centres it either way. Set
   --shop-button-mx to 0 and --shop-button-align to
   flex-start to push it back to the left.

   The auto TOP margin is what pins it to the card bottom,
   so buttons line up across a row even when names wrap to
   different heights. */

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button {
  font-family: var(--btn-family) !important;
  font-size: var(--shop-button-size) !important;
  font-weight: var(--btn-weight) !important;
  line-height: var(--btn-lh) !important;
  letter-spacing: var(--btn-ls) !important;
  text-transform: var(--btn-transform) !important;

  background: var(--shop-c-accent) !important;
  color: var(--shop-c-on-dark) !important;
  border: 0 !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--shop-button-padding) !important;

  display: block !important;
  float: none !important;
  position: static !important;
  flex: 0 0 auto !important;
  align-self: var(--shop-button-align) !important;
  box-sizing: border-box !important;
  width: var(--shop-button-width) !important;
  max-width: var(--shop-button-maxwidth) !important;
  text-align: center !important;
  margin: auto var(--shop-button-mx) 0 !important;
  transition: background 0.2s ease;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
  background: var(--shop-c-accent-hover) !important;
  color: var(--shop-c-on-dark) !important;
}

/* Woo's hidden label — would otherwise add stray height */
.woocommerce ul.products li.product .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}


/* ----- Pagination ----- */

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
  border: 0;                                        /* Woo draws a boxed row */
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--shop-meta-family);
  font-size: var(--shop-meta-size);
  font-weight: var(--btn-weight);
  color: var(--shop-c-meta);
  border-radius: 6px;
  padding: var(--shop-meta-padding);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--shop-c-hover-bg);
  color: var(--shop-c-accent);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--shop-c-accent);                 /* the page you are on */
  color: var(--shop-c-on-dark);
}


/* ----- Sorting dropdown -----
   Only appears with "Allow Order" on in the Archive
   Products widget's Content tab. */

.woocommerce .woocommerce-ordering select {
  background: var(--shop-c-input-bg);
  border: 1px solid var(--shop-c-border);
  border-radius: 6px;
  color: var(--shop-c-meta);
  padding: 8px 12px;
  font-family: var(--shop-meta-family);
  font-size: var(--shop-meta-size);
}




/* ==========================================================
   RELATED PRODUCTS SECTION
   The cards are handled by SHOP GRID above — same markup,
   same tokens, so they match the archive exactly. Only the
   heading and the block's own spacing are here.
   ========================================================== */

/* Woo outputs this as an h2 and the Elementor widget gives
   no control over it. Same rule covers upsells and
   cross-sells. */

.related.products > h2,
.up-sells.products > h2,
.cross-sells > h2,
.elementor-widget-woocommerce-product-related h2 {
  font-family: var(--shop-heading-family) !important;
  font-size: var(--shop-heading-size) !important;
  font-weight: var(--shop-heading-weight) !important;
  line-height: var(--shop-heading-lh) !important;
  letter-spacing: var(--shop-heading-ls) !important;
  color: var(--shop-c-title) !important;
  text-align: var(--shop-heading-align);
  margin: 0 0 var(--shop-heading-gap) !important;
}

/* Separates the block from the product details above. Set
   --shop-section-line to 0 to drop the divider. */

.related.products,
.up-sells.products,
.elementor-widget-woocommerce-product-related {
  margin-top: var(--shop-section-space) !important;
  padding-top: var(--shop-section-space);
  border-top: var(--shop-section-line) solid var(--shop-c-border);
}




/* ==========================================================
   SINGLE PRODUCT PAGE
   Widget colours are set in the Elementor editor. Only
   layout fixes, button type and plugin output no widget
   reaches.
   ========================================================== */

.woocommerce del .amount {
  color: var(--brand-secondary);                    /* muted old price, page-wide */
}


/* ----- Add to cart button -----
   Type only, from the BUTTONS block, so it matches the
   shop cards and the account panel. Background and text
   colour are deliberately left out, so the widget's Style
   tab still owns them. Delete this rule if you would
   rather the widget owned the type as well. */

.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button {
  font-family: var(--btn-family) !important;
  font-size: var(--shop-cart-size) !important;
  font-weight: var(--btn-weight) !important;
  line-height: var(--btn-lh) !important;
  letter-spacing: var(--btn-ls) !important;
  text-transform: var(--btn-transform) !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--shop-cart-padding) !important;
  transition: background 0.2s ease, opacity 0.2s ease;
}


/* ----- Gallery photo -----
   Caps the height so a portrait shot does not fill the
   screen. Delete if you crop images at upload instead. */

.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__image img {
  max-height: 620px;
  width: 100%;
  object-fit: cover;
  object-position: center 20%;
}


/* ----- Colour and Size side by side -----
   Woo builds these as a table, which forces full-width
   rows. These turn it into a flex row that wraps on its own
   — no media query needed. */

.elementor-widget-woocommerce-product-add-to-cart .variations {
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  border: 0 !important;
}

.elementor-widget-woocommerce-product-add-to-cart .variations tbody {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 30px !important;                        /* row gap, then column gap */
  width: 100% !important;
}

.elementor-widget-woocommerce-product-add-to-cart .variations tr {
  display: block !important;                        /* one block per attribute */
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.elementor-widget-woocommerce-product-add-to-cart .variations th,
.elementor-widget-woocommerce-product-add-to-cart .variations td {
  display: block !important;                        /* label above its swatches */
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
  line-height: 1.4 !important;
}

.elementor-widget-woocommerce-product-add-to-cart .woo-variation-swatches .variable-items-wrapper {
  margin: 5px 0 0 0 !important;                     /* label to swatches */
  padding: 0 !important;
  gap: 8px !important;                              /* between swatches */
}


/* ----- The blank gap under the attributes -----
   Woo reserves a tall block for the selected variation's
   price and stock message. It holds empty child divs, so it
   takes up height even when it looks blank — which is why
   :empty appears to do nothing here. */

.elementor-widget-woocommerce-product-add-to-cart .single_variation_wrap,
.elementor-widget-woocommerce-product-add-to-cart .woocommerce-variation,
.elementor-widget-woocommerce-product-add-to-cart .single_variation {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.elementor-widget-woocommerce-product-add-to-cart .woocommerce-variation-description,
.elementor-widget-woocommerce-product-add-to-cart .woocommerce-variation-availability {
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-widget-woocommerce-product-add-to-cart .woocommerce-variation-description p {
  margin: 0 !important;
}

.elementor-widget-woocommerce-product-add-to-cart .woocommerce-variation-price {
  margin: 0 0 10px !important;                      /* keeps it off the quantity box */
  padding: 0 !important;
}

.elementor-widget-woocommerce-product-add-to-cart a.reset_variations {
  display: none !important;                         /* the "Clear" link */
}


/* ----- Quantity box with + and - -----
   NEEDS TWO OTHER PIECES:
   - WPCode snippet "Quantity buttons - PHP"        (adds them)
   - Elementor Custom Code "Quantity buttons - JS"  (works them)
   Delete this and delete those too.

   Scoped to the product page. Unscoped, this pill also
   caught the mini cart's quantity span and drew a box round
   "1 x 19.99EUR" in the side cart.

   The − and + colours come from QUANTITY STEPPER TOKENS,
   shared with the cart page. */

.elementor-widget-woocommerce-product-add-to-cart .quantity,
.woocommerce div.product form.cart .quantity {
  display: inline-flex;                             /* the pill wrapping - 1 + */
  align-items: center;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--field-bg);
  overflow: hidden;
}

.woocommerce div.product form.cart .quantity .qty-btn {
  font-family: var(--btn-family);
  font-size: var(--qty-glyph-size);
  font-weight: var(--btn-weight);
  background: var(--qty-c-btn-bg);
  border: 0;
  padding: 0 13px;
  height: 42px;
  line-height: 1;
  color: var(--qty-c-btn);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.woocommerce div.product form.cart .quantity .qty-btn:hover {
  color: var(--qty-c-btn-hover);
  background: var(--qty-c-btn-bg-hover);
}

.woocommerce div.product form.cart .quantity .qty-btn:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: -2px;                             /* inside the pill, not clipped */
}

.woocommerce div.product form.cart .quantity input.qty {
  font-family: var(--brand-font-body);
  border: 0;
  background: transparent;
  width: 42px;
  height: 42px;
  text-align: center;
  color: var(--field-text);
  -webkit-text-fill-color: var(--field-text);       /* see the FORM FIELDS note */
  -moz-appearance: textfield;                       /* hides Firefox spinners */
}

.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;                         /* hides Chrome spinners */
  margin: 0;
}


/* ----- Variation swatches -----
   NEEDS the "Variation Swatches for WooCommerce" plugin.
   Third-party output with no Elementor controls. */

.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
  border: 1px solid var(--field-border);            /* resting state */
  border-radius: var(--field-radius);
  box-shadow: none;
}

.woo-variation-swatches .variable-items-wrapper .variable-item.selected {
  border: 2px solid var(--brand-accent);            /* the one you clicked */
  background: var(--brand-hover-bg);
  box-shadow: none;
}

.woo-variation-swatches .variable-items-wrapper .button-variable-item {
  font-family: var(--btn-family);                   /* the S / M / L squares */
  font-weight: var(--btn-weight);
  min-width: 42px;
  height: 42px;
  color: var(--brand-text);
  background: var(--field-bg);
}

.woo-variation-swatches .variable-items-wrapper .button-variable-item.selected {
  color: var(--brand-accent-hover);
}

.variations .label label {
  color: var(--brand-primary);                      /* the "Color" and "Size" words */
  font-size: 12px;
  font-weight: 500;
}


/* ----- Colour swatch fills -----
   The class comes from the term slug under
   Products > Attributes > Color > Configure terms.
   ADD A LINE FOR EVERY NEW COLOUR — a blank swatch means
   its slug is missing or spelled differently. These are
   product colours, not brand colours, so they stay literal
   and out of the token block. */

.color-variable-item-cream      .variable-item-span { background-color: #FFFCBB; }
.color-variable-item-dark-blue  .variable-item-span { background-color: #2E3A52; }
.color-variable-item-dark-green .variable-item-span { background-color: #2F4A32; }




/* ==========================================================
   MY ACCOUNT — TABS
   Equal width tabs. The widget sizes each tab to its own
   label, so "Logout" comes out narrower than "Account
   Details", and no setting changes that.

   minmax(0,1fr) keeps a long label from widening its own
   column, and grid wraps to a new row once the column count
   is used up. The min-height and the flex on the link make
   the whole tab clickable and stop a two-line label sitting
   shorter than its neighbours.

   REMINDER: set Style > Tabs > Spacing to 0 in the widget.
   ========================================================== */

.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul,
.e-my-account-tab .woocommerce-MyAccount-navigation ul {
  display: grid !important;
  grid-template-columns: repeat(var(--acct-tab-columns), minmax(0, 1fr)) !important;
  gap: var(--acct-tab-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
}

.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation li,
.e-my-account-tab .woocommerce-MyAccount-navigation li {
  min-width: 0 !important;                          /* stops a long label widening it */
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;
  width: auto !important;
  list-style: none !important;
}

.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation li a,
.e-my-account-tab .woocommerce-MyAccount-navigation li a {
  display: flex !important;                         /* whole tab clickable */
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;                          /* short tabs stretch to match */
  min-height: var(--acct-tab-min-height) !important;
  padding: var(--acct-tab-padding) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  white-space: var(--acct-tab-nowrap) !important;
  overflow-wrap: break-word;
}

/* Stops the content panel stretching to the full height of
   the tab column and leaving a large empty block under
   short content. */

.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content {
  align-self: start;
}




/* ==========================================================
   FORM FIELDS — WOOCOMMERCE
   Every text input on the account pages: Edit address,
   Account details, login, register and reset password.
   Values come from FIELD TOKENS, so these match the
   contact form without being set twice.

   WHY THIS BLOCK EXISTS
   Nothing above ever set a colour on an <input>, so typed
   text took its colour from whichever of Astra, WooCommerce
   or Elementor Theme Style declared it last. On this site
   that landed on a shade close to the field fill, so typing
   looked like it did nothing.

   THE THREE PROPERTIES THAT MATTER
   - color                     the obvious one
   - -webkit-text-fill-color   overrides color in Chrome and
     Safari. Set color alone and nothing changes.
   - the autofill box-shadow   Chrome paints its own fill
     over an autofilled field and ignores background-color.
     A large inset shadow is the only reliable repaint.
   ========================================================== */

.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="url"],
.woocommerce-MyAccount-content input[type="number"],
.woocommerce-MyAccount-content input[type="search"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content textarea,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"],
.woocommerce-ResetPassword input[type="text"],
.woocommerce-ResetPassword input[type="password"] {
  color: var(--acct-c-field-text) !important;
  -webkit-text-fill-color: var(--acct-c-field-text) !important;
  caret-color: var(--acct-c-field-text);            /* the blinking cursor */
  opacity: 1 !important;                            /* some themes dim inputs */

  background-color: var(--acct-c-field-bg) !important;
  border: 1px solid var(--acct-c-border) !important;
  border-radius: var(--acct-field-radius) !important;

  font-family: var(--acct-body-family) !important;
  font-size: var(--acct-field-size) !important;     /* under 16px and iOS zooms */
  font-weight: var(--brand-body-weight) !important;
  line-height: 1.4 !important;

  width: 100% !important;
  max-width: var(--acct-field-maxwidth) !important;
  box-sizing: border-box !important;
  padding: var(--acct-field-padding) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}


/* The hint text, kept clearly lighter than typed text so
   the two are never confused. */

.woocommerce-MyAccount-content input::placeholder,
.woocommerce-MyAccount-content textarea::placeholder,
.woocommerce-form-login input::placeholder,
.woocommerce-form-register input::placeholder,
.woocommerce-ResetPassword input::placeholder {
  color: var(--acct-c-placeholder) !important;
  -webkit-text-fill-color: var(--acct-c-placeholder) !important;
  opacity: 1;                                       /* Firefox dims placeholders */
}


/* The field you are typing in. A ring rather than a thicker
   border, so the field does not shift by a pixel on focus. */

.woocommerce-MyAccount-content input[type="text"]:focus,
.woocommerce-MyAccount-content input[type="email"]:focus,
.woocommerce-MyAccount-content input[type="tel"]:focus,
.woocommerce-MyAccount-content input[type="url"]:focus,
.woocommerce-MyAccount-content input[type="number"]:focus,
.woocommerce-MyAccount-content input[type="search"]:focus,
.woocommerce-MyAccount-content input[type="password"]:focus,
.woocommerce-MyAccount-content textarea:focus,
.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus,
.woocommerce-ResetPassword input:focus {
  border-color: var(--acct-c-field-focus) !important;
  box-shadow: 0 0 0 3px var(--brand-ring) !important;
  outline: none !important;
}


/* ----- Autofill -----
   Chrome and Safari paint their own background and text
   colour over a field they have filled, and
   background-color does not reach it. The inset shadow
   covers the whole field, which is the standard
   workaround. The long transition delay stops the
   browser's own fade flashing its colour first. */

.woocommerce-MyAccount-content input:-webkit-autofill,
.woocommerce-MyAccount-content input:-webkit-autofill:hover,
.woocommerce-MyAccount-content input:-webkit-autofill:focus,
.woocommerce-form-login input:-webkit-autofill,
.woocommerce-form-register input:-webkit-autofill {
  -webkit-text-fill-color: var(--acct-c-field-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--acct-c-field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--acct-c-field-bg) inset !important;
  caret-color: var(--acct-c-field-text);
  transition: background-color 9999s ease-in-out 0s;
}


/* Disabled and read-only: muted but still readable. */

.woocommerce-MyAccount-content input:disabled,
.woocommerce-MyAccount-content input[readonly] {
  color: var(--acct-c-muted) !important;
  -webkit-text-fill-color: var(--acct-c-muted) !important;
  background-color: var(--acct-c-bg) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}


/* ----- Field labels ----- */

.woocommerce-MyAccount-content .form-row label,
.woocommerce-MyAccount-content .woocommerce-form-row label,
.woocommerce-form-login label,
.woocommerce-form-register label,
.woocommerce-ResetPassword label {
  display: block;
  margin: 0 0 6px !important;
  font-family: var(--acct-body-family) !important;
  font-size: var(--field-label-size) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--field-label) !important;
}

/* The red asterisk. Woo also draws a dotted underline under
   it, which reads as a broken link. */

.woocommerce-MyAccount-content .required,
.woocommerce-form-login .required,
.woocommerce-form-register .required {
  color: var(--brand-clay) !important;
  border: 0 !important;
  text-decoration: none !important;
}


/* ----- Select2 -----
   WooCommerce swaps the Country and State dropdowns for
   Select2, which builds its own markup and ignores every
   rule aimed at a <select>. The open list is appended to
   the end of <body>, NOT inside the account panel, so those
   rules cannot be scoped to .woocommerce-MyAccount-content.
   Harmless if your install does not use Select2. */

.select2-container--default .select2-selection--single {
  height: auto !important;
  min-height: var(--acct-select-height) !important;
  display: flex !important;
  align-items: center !important;
  background-color: var(--acct-c-select-bg) !important;
  border: 1px solid var(--acct-c-border) !important;
  border-radius: var(--acct-field-radius) !important;
  padding: 0 16px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--acct-c-field-text) !important;
  -webkit-text-fill-color: var(--acct-c-field-text) !important;
  font-family: var(--acct-body-family) !important;
  font-size: var(--acct-field-size) !important;
  line-height: 1.4 !important;
  padding: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--acct-c-placeholder) !important;
}

/* Select2 draws its arrow in a fixed box that ignores the
   padding above, hence the explicit position. */

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  right: 12px !important;
}

.select2-container--open .select2-selection--single {
  border-color: var(--acct-c-field-focus) !important;
}

.select2-dropdown {
  background-color: var(--acct-c-select-bg) !important;
  border: 1px solid var(--acct-c-border) !important;
  border-radius: var(--acct-field-radius) !important;
  overflow: hidden;
}

.select2-container--default .select2-results__option {
  color: var(--acct-c-text) !important;
  font-family: var(--acct-body-family) !important;
  font-size: var(--acct-field-size) !important;
  padding: 10px 16px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: var(--acct-c-link) !important;
  color: var(--acct-c-on-accent) !important;
}

/* The type-to-filter box inside the open list */

.select2-container--default .select2-search--dropdown .select2-search__field {
  color: var(--acct-c-field-text) !important;
  -webkit-text-fill-color: var(--acct-c-field-text) !important;
  background-color: var(--acct-c-field-bg) !important;
  border: 1px solid var(--acct-c-border) !important;
  border-radius: var(--acct-field-radius) !important;
  padding: 10px 14px !important;
  font-family: var(--acct-body-family) !important;
  font-size: var(--acct-field-size) !important;
}




/* ==========================================================
   MY ACCOUNT — BUTTONS, NOTICES AND ADDRESSES
   ========================================================== */


/* ----- Every button on the account pages -----
   Dashboard, Orders, Downloads, Addresses, Account Details,
   plus the login, register and reset password forms — which
   sit OUTSIDE .woocommerce-MyAccount-content, so they need
   their own .elementor-kit-4846s.

   Woo renders these as a link, a button or an input
   depending on the tab, so styling one leaves the others
   behind. Type comes from the BUTTONS block, which is what
   makes them match the tab labels above them. */

.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"],
.woocommerce-form-login .button,
.woocommerce-form-login button[type="submit"],
.woocommerce-form-register .button,
.woocommerce-form-register button[type="submit"],
.woocommerce-ResetPassword .button,
.woocommerce-ResetPassword button[type="submit"],
.woocommerce-account .woocommerce-form-login-toggle .button {
  font-family: var(--btn-family) !important;
  font-size: var(--btn-size) !important;
  font-weight: var(--btn-weight) !important;
  line-height: var(--btn-lh) !important;
  letter-spacing: var(--btn-ls) !important;
  text-transform: var(--btn-transform) !important;

  background: var(--acct-c-link) !important;
  color: var(--acct-c-on-accent) !important;
  -webkit-text-fill-color: var(--acct-c-on-accent) !important;
  border: 0 !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--acct-button-padding) !important;

  width: auto !important;                           /* Woo stretches some of these */
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover,
.woocommerce-form-login .button:hover,
.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-register .button:hover,
.woocommerce-form-register button[type="submit"]:hover,
.woocommerce-ResetPassword .button:hover,
.woocommerce-ResetPassword button[type="submit"]:hover {
  background: var(--acct-c-link-hover) !important;
  color: var(--acct-c-on-accent) !important;
}


/* ----- Notice boxes -----
   "No order has been made yet", "Address changed
   successfully", the login errors. Woo draws these grey
   with a coloured top bar; this turns them into a card
   matching the shop cards. */

.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-notice {
  background: var(--acct-notice-bg) !important;
  border: var(--acct-notice-border-width) solid var(--acct-notice-border) !important;
  border-top-width: var(--acct-notice-border-width) !important;  /* Woo ships a thick top bar */
  border-radius: var(--acct-notice-radius) !important;
  padding: var(--acct-notice-padding) !important;
  color: var(--acct-c-text) !important;
  font-family: var(--acct-body-family);
  list-style: none !important;
}

.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-error::before {
  color: var(--acct-notice-accent) !important;      /* the small icon */
}

/* The button Woo drops inside a notice sits inline rather
   than floated right, so short notices stay on one line. */

.woocommerce-MyAccount-content .woocommerce-message .button,
.woocommerce-MyAccount-content .woocommerce-info .button {
  float: none !important;
  margin-left: 16px !important;
  vertical-align: middle;
}


/* ----- Billing and shipping address blocks -----
   Woo builds these as floated .col-1 / .col-2 columns, each
   in a bordered box with a set height. The height is what
   made the text spill out, and the border is drawn by Woo
   and Astra rather than the widget's Sections panel — which
   is why turning Sections borders off in Elementor left
   these outlined. Everything is stripped, then the pair is
   rebuilt as a grid.

   ONE LINE PER FIELD IS WOOCOMMERCE, NOT CSS. Woo prints
   the stored address with a <br> between every populated
   field: name, company, street, street 2, city, state,
   postcode, country. If a line looks wrong or repeated, the
   stored value is wrong — no rule here can merge or drop
   it. Two that catch Lithuanian shops out:

   - the house number belongs on Street address, not in
     "Apartment, suite, unit", which always prints as its
     own line
   - Lithuania has no states in WooCommerce, so Woo falls
     back to a free-text "State / County" field. Filling it
     with the city name prints the city twice. Hide the
     field with a PHP snippet rather than styling round it. */

.woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-MyAccount-content .u-columns {
  display: grid !important;
  grid-template-columns: repeat(var(--acct-address-columns), 1fr) !important;
  gap: var(--acct-address-gap) !important;
  float: none !important;
  width: 100% !important;
  margin: var(--acct-address-top) 0 0 !important;
}

.woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-MyAccount-content .woocommerce-Addresses::after,
.woocommerce-MyAccount-content .u-columns::before,
.woocommerce-MyAccount-content .u-columns::after {
  display: none !important;                         /* Woo's clearfix breaks the grid */
}

.woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-MyAccount-content .u-column1,
.woocommerce-MyAccount-content .u-column2,
.woocommerce-MyAccount-content .woocommerce-Addresses .col-1,
.woocommerce-MyAccount-content .woocommerce-Addresses .col-2 {
  border: var(--acct-address-border) solid var(--acct-c-border) !important;
  background: transparent !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;                          /* the fix for the clipped text */
  min-height: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: var(--acct-address-padding) !important;
}

/* The address text itself. WooCommerce writes an inline
   style="height: 28px" onto this element to level the two
   columns, and an inline style beats a stylesheet — hence
   !important on the height. Without it the block is cut off
   after a line or two, which is what hid the country.
   Typography is spelled out rather than inherited, because
   <address> is italic by default and Astra styles it as its
   own thing. */

.woocommerce-MyAccount-content .woocommerce-Address address {
  display: block !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;

  font-family: var(--acct-body-family) !important;
  font-size: var(--brand-body-size) !important;
  font-weight: var(--brand-body-weight) !important;
  line-height: var(--acct-address-lh) !important;
  font-style: normal !important;                    /* <address> italicises */
  color: var(--acct-c-text) !important;
}

/* Woo outputs h2 here, not h3 — an earlier version of this
   file targeted h3 and silently did nothing. Both are
   listed so a Woo update either way still matches. */

.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  margin: 0 0 4px !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}

/* WooCommerce writes links as "Add" plus a span holding
   "Billing address" for screen readers, and relies on its
   own stylesheet to hide that span. Elementor setups often
   have Woo's stylesheet off, so the span renders on top of
   the visible heading — the overlap on the Addresses tab.
   This hides it without removing it from the accessibility
   tree. */

.woocommerce-MyAccount-content .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Heading and its Add / Edit link stacked rather than side
   by side, because "Add Billing address" beside "Billing
   address" says the same thing twice on one line. */

.woocommerce-MyAccount-content .woocommerce-Address-title {
  display: block !important;
  margin: 0 0 8px !important;
  border: 0 !important;
  overflow: visible !important;
}

/* Every property spelled out: inheriting did not work,
   because the link sits inside the address <header>, which
   carries the heading's size and weight. */

.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  display: inline-block !important;
  float: none !important;                           /* Woo floats this right */
  position: static !important;
  margin: 0 !important;
  font-family: var(--acct-body-family) !important;
  font-size: var(--brand-body-size) !important;
  font-weight: var(--brand-body-weight) !important;
  line-height: var(--brand-body-lh) !important;
  letter-spacing: normal !important;
  font-style: normal !important;
  text-transform: none !important;
  color: var(--acct-c-link) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover {
  color: var(--acct-c-link-hover) !important;
}


/* ----- Panel and section backgrounds -----
   Everything in the account area sits on BG Kit rather than
   white, so the panel reads as part of the page instead of
   a card floating on it. Fields stay a shade lighter so
   they are obviously editable. */

.woocommerce-MyAccount-content,
.woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-MyAccount-content .woocommerce-customer-details {
  background: var(--acct-c-bg) !important;
  color: var(--acct-c-text);
}


/* ----- Selects, including the currency dropdown -----
   Third-party currency switchers output a bare <select>
   that inherits nothing, which is why it came out narrower
   and shorter than the text inputs beside it.
   appearance:none drops the OS arrow so the chevron can sit
   in a predictable spot. */

.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content .woocommerce-input-wrapper select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  width: 100% !important;
  max-width: var(--acct-field-maxwidth) !important;
  box-sizing: border-box !important;

  font-family: var(--acct-body-family) !important;
  font-size: var(--acct-field-size) !important;
  color: var(--acct-c-field-text) !important;
  -webkit-text-fill-color: var(--acct-c-field-text) !important;

  /* A <select> must not get a unitless line-height. The
     browser draws its text in a box of its own and the
     line-height fights it, so the glyph tops get clipped —
     which is what cut "$ USD" in half. Height comes from
     min-height instead, with the vertical padding zeroed.
     Browsers centre select text vertically on their own. */
  line-height: normal !important;
  height: auto !important;
  min-height: var(--acct-select-height) !important;

  background-color: var(--acct-c-select-bg) !important;
  border: 1px solid var(--acct-c-border) !important;
  border-radius: var(--acct-field-radius) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 16px !important;
  padding-right: 44px !important;                   /* room for the chevron */

  background-image: var(--acct-select-arrow) !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  cursor: pointer;
}

/* The open list is drawn by the OS, so only background and
   colour can be set on it — no radius or padding. */

.woocommerce-MyAccount-content select option {
  background-color: var(--acct-c-select-bg);
  color: var(--acct-c-text);
}

.woocommerce-MyAccount-content select:focus {
  border-color: var(--acct-c-field-focus) !important;
  box-shadow: 0 0 0 3px var(--brand-ring) !important;
  outline: none;
}

/* The currency row is half width because Woo classes it
   like a first/last name pair. :has() picks out only the
   rows containing a dropdown, so First name and Last name
   keep sitting side by side. */

.woocommerce-MyAccount-content p.form-row:has(select),
.woocommerce-MyAccount-content .woocommerce-form-row:has(select) {
  width: 100% !important;
  float: none !important;
  clear: both !important;
  margin-right: 0 !important;
}

/* The helper line under a field */

.woocommerce-MyAccount-content .description,
.woocommerce-MyAccount-content span.description,
.woocommerce-MyAccount-content .woocommerce-form-row .description {
  display: block;
  margin-top: 6px;
  color: var(--acct-c-muted) !important;
  font-size: 14px;
  line-height: 1.5;
}




/* ==========================================================
   WOOCOMMERCE NOTICES
   The "added to your cart", "please fill in" and info bars,
   on shop, product, cart, checkout and account pages. No
   Elementor widget reaches them, so the whole treatment is
   here. Change values in NOTICE & CART TOKENS.
   ========================================================== */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
.woocommerce div.product .woocommerce-message {
  background: var(--notice-bg) !important;
  color: var(--brand-text) !important;
  font-family: var(--brand-font-body) !important;
  font-size: var(--brand-body-size) !important;
  line-height: var(--brand-body-lh) !important;

  border: 1px solid var(--notice-border) !important;
  border-left-width: var(--notice-edge) !important;
  border-radius: var(--notice-radius) !important;
  padding: var(--notice-padding) !important;
  margin: 0 0 var(--notice-space) !important;

  list-style: none !important;
  display: flex !important;                         /* text left, button right */
  align-items: center !important;
  flex-wrap: wrap;
  gap: 12px 20px;
}

/* The coloured left edge and icon are the only difference
   between the three. Woo draws the icon in ::before. */

.woocommerce-message { border-left-color: var(--notice-c-success) !important; }
.woocommerce-error   { border-left-color: var(--notice-c-error) !important; }
.woocommerce-info,
.woocommerce-noreviews { border-left-color: var(--notice-c-info) !important; }

.woocommerce-message::before { color: var(--notice-c-success) !important; }
.woocommerce-error::before   { color: var(--notice-c-error) !important; }
.woocommerce-info::before,
.woocommerce-noreviews::before { color: var(--notice-c-info) !important; }

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  top: 50% !important;
  transform: translateY(-50%) !important;           /* Woo pins it to the top */
  left: 20px !important;
}

/* An error can list several problems */

.woocommerce-error li {
  list-style: none !important;
  margin: 0 !important;
}

/* The "View cart" button Woo puts inside the notice */

.woocommerce-message a.button,
.woocommerce-error a.button,
.woocommerce-info a.button {
  margin-left: auto !important;                     /* pushes it right */
  float: none !important;
  font-family: var(--btn-family) !important;
  font-size: var(--btn-size) !important;
  font-weight: var(--btn-weight) !important;
  line-height: var(--btn-lh) !important;
  letter-spacing: var(--btn-ls) !important;
  text-transform: var(--btn-transform) !important;
  background: var(--brand-accent) !important;
  color: var(--brand-bg-kit) !important;
  border: 0 !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--notice-btn-padding) !important;
}

.woocommerce-message a.button:hover,
.woocommerce-error a.button:hover,
.woocommerce-info a.button:hover {
  background: var(--brand-accent-hover) !important;
  color: var(--brand-bg-kit) !important;
}




/* ==========================================================
   SIDE CART
   The slide-out panel from the Menu Cart widget. Most of it
   is set in the widget's Style tab — these are the parts it
   cannot reach, plus the panel width, which has no control
   at all.
   ========================================================== */

/* 92vw keeps it off the screen edge on a phone. */

.elementor-menu-cart__container .elementor-menu-cart__main {
  width: min(var(--cart-width), 92vw) !important;
  max-width: 100% !important;
  padding: var(--cart-padding) !important;
}


/* ----- The <mark> reset -----
   WooCommerce wraps counts and totals in <mark>, and every
   browser gives that tag a yellow highlight by default.
   That is the gold block behind the subtotal — not a colour
   anything set. */

.woocommerce mark,
.elementor-menu-cart mark,
.woocommerce-mini-cart mark,
.elementor-menu-cart__subtotal mark {
  background: transparent !important;
  color: inherit !important;
}


/* ----- Line items ----- */

.elementor-menu-cart__products .elementor-menu-cart__product {
  padding-bottom: var(--cart-row-gap) !important;
  margin-bottom: var(--cart-row-gap) !important;
}

.elementor-menu-cart__product-name,
.elementor-menu-cart__product-name a {
  font-family: var(--brand-font-body) !important;
  font-size: var(--cart-title-size) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--brand-primary) !important;
}

.elementor-menu-cart__product .variation,
.elementor-menu-cart__product .quantity {
  font-family: var(--brand-font-body) !important;
  font-size: var(--cart-meta-size) !important;
  color: var(--brand-secondary) !important;
  border: 0 !important;                             /* no pill in here */
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline !important;
}

.elementor-menu-cart__product-price {
  font-family: var(--brand-font-body) !important;
  font-size: var(--cart-price-size) !important;
  font-weight: 600 !important;
  color: var(--brand-accent-hover) !important;      /* same as shop card prices */
}


/* ----- Subtotal ----- */

.elementor-menu-cart__subtotal {
  font-family: var(--brand-font-heading) !important;
  font-size: var(--cart-subtotal-size) !important;
  font-weight: 500 !important;
  color: var(--brand-primary) !important;
  background: none !important;
  border: 0 !important;
  padding: var(--cart-row-gap) 0 !important;
  text-align: left !important;
}


/* ----- Buttons -----
   Stacked, View cart outlined and Checkout filled. Two
   buttons of equal weight make the shopper choose; the
   outline says "secondary" without a label. */

.elementor-menu-cart__footer-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--cart-btn-gap) !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button {
  width: 100% !important;
  font-family: var(--btn-family) !important;
  font-size: var(--cart-btn-size) !important;
  font-weight: var(--btn-weight) !important;
  line-height: var(--btn-lh) !important;
  letter-spacing: var(--btn-ls) !important;
  text-transform: var(--btn-transform) !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--cart-btn-padding) !important;
  text-align: center !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
  background: transparent !important;
  color: var(--brand-accent) !important;
  border: 1px solid var(--brand-accent) !important;
}

.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
  background: var(--brand-accent) !important;
  color: var(--brand-bg-kit) !important;
}

.elementor-menu-cart__footer-buttons .elementor-button--checkout {
  background: var(--brand-accent) !important;
  color: var(--brand-bg-kit) !important;
  border: 0 !important;
}

.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
  background: var(--brand-accent-hover) !important;
  color: var(--brand-bg-kit) !important;
}


/* ----- Empty state ----- */

.elementor-menu-cart__empty-message {
  font-family: var(--brand-font-body) !important;
  font-size: var(--brand-body-size) !important;
  color: var(--brand-secondary) !important;
  text-align: left !important;
}




/* ==========================================================
   ELEMENTOR FORMS
   The contact form, and any other Elementor Form on the
   site. Fields come from FIELD TOKENS, the button from
   BUTTONS, so a form matches the account pages and the shop
   without being styled twice.

   THIS OVERRIDES THE WIDGET'S STYLE TAB. Everything is
   !important, so changing colours or radii in Style > Form
   or Style > Buttons will appear to do nothing. That is the
   point — one file decides. Spacing is the exception and is
   left to the widget: use Style > Form > Rows Gap and
   Content > Form Fields > Column Width as normal.
   ========================================================== */


/* ----- Every field, including the textarea and select ----- */

.elementor-form .elementor-field-group .elementor-field-textual,
.elementor-form .elementor-field-group textarea.elementor-field-textual,
.elementor-form .elementor-field-group select.elementor-field-textual {
  color: var(--field-text) !important;
  -webkit-text-fill-color: var(--field-text) !important;
  caret-color: var(--field-text);
  opacity: 1 !important;

  background-color: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  border-radius: var(--field-radius) !important;

  font-family: var(--brand-font-body) !important;
  font-size: var(--field-size) !important;
  font-weight: var(--brand-body-weight) !important;
  line-height: 1.4 !important;

  width: 100% !important;
  max-width: var(--field-maxwidth) !important;
  box-sizing: border-box !important;
  padding: var(--field-padding) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}


/* ----- Message box -----
   The widget's Rows setting decides the height; this is a
   floor so a low Rows value still gives something worth
   typing into. resize:vertical lets a visitor drag it
   taller but not sideways, which would break the layout. */

.elementor-form .elementor-field-group textarea.elementor-field-textual {
  min-height: var(--field-textarea-min) !important;
  height: auto !important;
  resize: vertical !important;
}


/* ----- Dropdown -----
   appearance:none drops the OS arrow so the chevron can sit
   in a predictable spot.

   A <select> must not get a unitless line-height: the
   browser draws its text in a box of its own and the
   line-height fights it, so the glyph tops get clipped.
   Height comes from min-height instead, with the vertical
   padding zeroed. Browsers centre select text on their
   own. */

.elementor-form .elementor-field-group select.elementor-field-textual {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  background-color: var(--field-select-bg) !important;
  background-image: var(--field-arrow) !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;

  line-height: normal !important;
  height: auto !important;
  min-height: var(--field-select-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 16px !important;
  padding-right: 44px !important;                   /* room for the chevron */
  cursor: pointer;
}

/* The open list is drawn by the OS, so only background and
   colour can be set on it. */

.elementor-form .elementor-field-group select option {
  background-color: var(--field-select-bg);
  color: var(--brand-text);
}


/* ----- Focus -----
   A ring rather than a thicker border, so the field does
   not shift by a pixel when it gains focus. */

.elementor-form .elementor-field-group .elementor-field-textual:focus {
  border-color: var(--field-focus) !important;
  box-shadow: 0 0 0 3px var(--brand-ring) !important;
  outline: none !important;
}


/* ----- Placeholder -----
   Kept clearly lighter than typed text so the two are never
   confused. */

.elementor-form .elementor-field-group .elementor-field-textual::placeholder {
  color: var(--field-placeholder) !important;
  -webkit-text-fill-color: var(--field-placeholder) !important;
  opacity: 1;                                       /* Firefox dims these */
}


/* ----- Labels -----
   Dormant while Content > Form Fields > Label is set to
   Hide; here so turning labels on needs no extra work. */

.elementor-form .elementor-field-group > label,
.elementor-form .elementor-field-group .elementor-field-label {
  font-family: var(--brand-font-body) !important;
  font-size: var(--field-label-size) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--field-label) !important;
  margin-bottom: 6px !important;
}

.elementor-form .elementor-mark-required .elementor-field-label:after,
.elementor-form .elementor-field-group .elementor-mark-required {
  color: var(--brand-clay) !important;
}


/* ----- Send button -----
   Same type treatment as the shop cards, the account panel
   and the side cart. Colours are set here rather than left
   to the widget so a new form matches without being styled
   at all. Also covers Next and Previous on a multi-step
   form. */

.elementor-form .elementor-button,
.elementor-form button[type="submit"].elementor-button,
.elementor-form .elementor-button[type="submit"] {
  font-family: var(--btn-family) !important;
  font-size: var(--btn-size) !important;
  font-weight: var(--btn-weight) !important;
  line-height: var(--btn-lh) !important;
  letter-spacing: var(--btn-ls) !important;
  text-transform: var(--btn-transform) !important;

  background-color: var(--brand-accent) !important;
  color: var(--brand-bg-kit) !important;
  -webkit-text-fill-color: var(--brand-bg-kit) !important;
  border: 0 !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--acct-button-padding) !important;

  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.elementor-form .elementor-button:hover,
.elementor-form button[type="submit"].elementor-button:hover {
  background-color: var(--brand-accent-hover) !important;
  color: var(--brand-bg-kit) !important;
}


/* ----- Sent and error messages -----
   Elementor draws its own; these match the WooCommerce
   notices so a visitor sees one pattern across the site. */

.elementor-form .elementor-message {
  font-family: var(--brand-font-body) !important;
  font-size: var(--brand-body-size) !important;
  line-height: var(--brand-body-lh) !important;
  color: var(--brand-text) !important;
  background: var(--notice-bg) !important;
  border: 1px solid var(--notice-border) !important;
  border-left-width: var(--notice-edge) !important;
  border-radius: var(--notice-radius) !important;
  padding: 14px 18px !important;
  margin-top: var(--notice-space) !important;
}

.elementor-form .elementor-message.elementor-message-success {
  border-left-color: var(--notice-c-success) !important;
}

.elementor-form .elementor-message.elementor-message-danger {
  border-left-color: var(--notice-c-error) !important;
}




/* ==========================================================
   INACTIVE BUTTONS
   The Add to cart button before a size and colour are
   picked, an out-of-stock card button, an account button
   mid-submit, and the Send button while a form is sending.

   WHY IT LOOKED TAN: Astra and WooCommerce both ship their
   own disabled styling that sets a background of their own
   rather than fading yours, so the button changed colour
   instead of just dimming. These force it back to the
   accent and fade it.

   PLACED LATE ON PURPOSE. It has to come after every
   enabled button rule to win on equal specificity — move it
   up the file and the tan comes back.

   Tune with --btn-disabled-opacity in the BUTTONS block:
   lower is fainter, closer to 1 is more solid.
   ========================================================== */

.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button.disabled,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button:disabled,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button.wc-variation-selection-needed,
.woocommerce ul.products li.product .button.disabled,
.woocommerce ul.products li.product .button:disabled,
.woocommerce-MyAccount-content .button.disabled,
.woocommerce-MyAccount-content .button:disabled,
.woocommerce-MyAccount-content button[type="submit"]:disabled,
.woocommerce a.button.disabled,
.woocommerce a.button.wc-variation-selection-needed,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.elementor-form .elementor-button:disabled,
.elementor-form .elementor-button.elementor-button-state {
  background: var(--brand-accent) !important;
  background-image: none !important;
  color: var(--brand-bg-kit) !important;
  -webkit-text-fill-color: var(--brand-bg-kit) !important;
  border: 0 !important;
  opacity: var(--btn-disabled-opacity) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Hover must not brighten a button that cannot be pressed.
   Woo keeps the :hover rule live even on a disabled button,
   so these repeat the resting state. */

.woocommerce div.product form.cart .single_add_to_cart_button.disabled:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed:hover,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button.disabled:hover,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button.wc-variation-selection-needed:hover,
.woocommerce ul.products li.product .button.disabled:hover,
.woocommerce ul.products li.product .button:disabled:hover,
.woocommerce-MyAccount-content .button.disabled:hover,
.woocommerce-MyAccount-content .button:disabled:hover,
.woocommerce a.button.disabled:hover,
.woocommerce button.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce input.button:disabled:hover,
.elementor-form .elementor-button:disabled:hover {
  background: var(--brand-accent) !important;
  color: var(--brand-bg-kit) !important;
  opacity: var(--btn-disabled-opacity) !important;
}

/* The quantity box beside an inactive Add to cart, so the
   pair reads as one inactive control rather than a live
   stepper next to a dead button. */

.woocommerce div.product form.cart:has(.single_add_to_cart_button.disabled) .quantity,
.woocommerce div.product form.cart:has(.wc-variation-selection-needed) .quantity {
  opacity: var(--btn-disabled-opacity);
}




/* ==========================================================
   CART PAGE
   The Cart widget's Style tab owns the colours, fonts,
   dividers and buttons. This block is only what that tab
   cannot reach:

   - the coupon and shipping calculator fields and their
     labels, so they match the account pages and the contact
     form (FIELD TOKENS)
   - the − 2 + stepper, which the quantity snippet adds here
     too and which Theme Style painted as solid blocks
   - the remove × at the start of each row
   - the final Total row, which the widget sizes like every
     other row
   - the inactive Update Cart button

   Change these in the token blocks, not in the widget: the
   − and + colours are in QUANTITY STEPPER TOKENS, and the
   stepper sizes and the remove button are in NOTICE & CART
   TOKENS under "Cart page". The widget's Order Summary >
   Quantity Borders and Remove icon controls are overridden
   here and no longer do anything.

   PLACED AFTER INACTIVE BUTTONS ON PURPOSE. The Update Cart
   rule at the end has to follow that block to win.

   The stepper is scoped to .woocommerce-cart-form, never a
   bare .quantity: the side cart opens on this page too and
   has a .quantity of its own.
   ========================================================== */


/* ----- Coupon and shipping calculator fields -----
   Width is left to the widget, which lays the coupon box
   out beside its button. */

.woocommerce-cart .coupon .input-text,
.woocommerce-shipping-calculator .input-text,
.woocommerce-shipping-calculator select:not(.select2-hidden-accessible) {
  color: var(--field-text) !important;
  -webkit-text-fill-color: var(--field-text) !important;
  caret-color: var(--field-text);
  opacity: 1 !important;

  background-color: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;  /* was an underline */
  border-radius: var(--field-radius) !important;

  font-family: var(--brand-font-body) !important;
  font-size: var(--field-size) !important;
  font-weight: var(--brand-body-weight) !important;
  line-height: 1.4 !important;

  box-sizing: border-box !important;
  padding: var(--field-padding) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-cart .coupon .input-text::placeholder,
.woocommerce-shipping-calculator .input-text::placeholder {
  color: var(--field-placeholder) !important;
  -webkit-text-fill-color: var(--field-placeholder) !important;
  opacity: 1;                                       /* Firefox dims placeholders */
}

.woocommerce-cart .coupon .input-text:focus,
.woocommerce-shipping-calculator .input-text:focus,
.woocommerce-shipping-calculator select:focus {
  border-color: var(--field-focus) !important;
  box-shadow: 0 0 0 3px var(--brand-ring) !important;
  outline: none !important;
}

.woocommerce-cart .coupon .input-text:-webkit-autofill,
.woocommerce-shipping-calculator .input-text:-webkit-autofill {
  -webkit-text-fill-color: var(--field-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
  caret-color: var(--field-text);
  transition: background-color 9999s ease-in-out 0s;
}


/* A plain <select>, for when WooCommerce does not swap the
   Country or State dropdown for Select2. Same chevron and
   height as every other dropdown on the site. */

.woocommerce-shipping-calculator select:not(.select2-hidden-accessible) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: var(--field-select-bg) !important;
  background-image: var(--field-arrow) !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  line-height: normal !important;                   /* see the note in FORM FIELDS */
  height: auto !important;
  min-height: var(--field-select-height) !important;
  padding: 0 44px 0 16px !important;
  cursor: pointer;
}


/* ----- Country dropdown chevron -----
   The Select2 box itself is styled in the FORM FIELDS
   block. Its arrow here was drawn in a colour close to the
   fill. This swaps it for the chevron the other dropdowns
   use. */

.woocommerce-shipping-calculator .select2-selection--single {
  padding-right: 44px !important;                   /* long names clear the chevron */
}

.woocommerce-shipping-calculator .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  right: 16px !important;
  width: 14px !important;
  height: 100% !important;
  background: var(--field-arrow) no-repeat center / 14px 9px !important;
}

.woocommerce-shipping-calculator .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}


/* ----- Calculator labels -----
   "Country / region", "Town / City" and so on. The widget
   has no control for these. They were rendering white, in
   Elementor's default font. */

.woocommerce-shipping-calculator label:not(.screen-reader-text) {
  display: block;
  margin: 0 0 6px !important;
  font-family: var(--brand-font-body) !important;
  font-size: var(--field-label-size) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--field-label) !important;
}

.woocommerce-shipping-calculator .required {
  color: var(--brand-clay) !important;              /* was browser red */
  border: 0 !important;
  text-decoration: none !important;
}


/* ----- Quantity stepper -----
   The same pill as the product page: the − and + sit inside
   one bordered field instead of stacking as three blocks.
   Theme Style reaches these because they are <button>s,
   hence !important on every property it sets.

   Colours: QUANTITY STEPPER TOKENS, shared with the product
   page. Sizes: the "Cart page" tokens in NOTICE & CART
   TOKENS. */

.woocommerce-cart-form .quantity {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: auto !important;
  border: 1px solid var(--field-border) !important;
  border-radius: var(--field-radius) !important;
  background: var(--field-bg) !important;
  overflow: hidden;
}

.woocommerce-cart-form .quantity .qty-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--cartpage-qty-btn) !important;
  width: var(--cartpage-qty-btn) !important;
  min-width: 0 !important;
  height: var(--cartpage-qty-height) !important;
  margin: 0 !important;
  padding: 0 !important;

  font-family: var(--btn-family) !important;
  font-size: var(--qty-glyph-size) !important;
  font-weight: var(--btn-weight) !important;
  line-height: 1 !important;
  color: var(--qty-c-btn) !important;
  -webkit-text-fill-color: var(--qty-c-btn) !important;

  background: var(--qty-c-btn-bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.woocommerce-cart-form .quantity .qty-btn:hover {
  color: var(--qty-c-btn-hover) !important;
  -webkit-text-fill-color: var(--qty-c-btn-hover) !important;
  background: var(--qty-c-btn-bg-hover) !important;
}

.woocommerce-cart-form .quantity .qty-btn:focus-visible {
  outline: 2px solid var(--brand-accent) !important;
  outline-offset: -2px;                             /* inside the pill, not clipped */
}

/* The number. The Cart widget's own stylesheet caps this at
   max-height: 28px, which left it pinned to the top of the
   42px box — why the 2 sat higher than the − and +. The
   min and max heights below lift that cap. */

.woocommerce-cart-form .quantity input.qty {
  flex: 0 0 var(--cartpage-qty-input) !important;
  width: var(--cartpage-qty-input) !important;
  min-width: 0 !important;
  height: var(--cartpage-qty-height) !important;
  min-height: var(--cartpage-qty-height) !important;
  max-height: none !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;

  font-family: var(--brand-font-body) !important;
  font-size: var(--field-size) !important;
  color: var(--field-text) !important;
  -webkit-text-fill-color: var(--field-text) !important;
  text-align: center !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield !important;            /* hides Firefox spinners */
  appearance: textfield !important;
}

.woocommerce-cart-form .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart-form .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;                         /* hides Chrome spinners */
  margin: 0;
}

/* WooCommerce puts a hidden "quantity" label for screen
   readers inside the stepper, and relies on its own
   stylesheet to hide it. If that stylesheet is ever off,
   the label shows up between − and the number. This keeps
   it hidden, and still readable by screen readers. */

.woocommerce-cart-form .quantity .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ----- Remove button -----
   The × at the start of each row, as a filled clay rounded
   square that darkens on hover. It used to be a small grey
   character that was easy to miss.

   HOW THE × IS DRAWN: the text × is hidden (font-size: 0)
   and the button shows the SVG from --cartpage-remove-x as
   a background image, centred over the clay fill. The
   link's aria-label still tells screen readers what it
   does.

   WHY NOT ::before AND ::after: Astra already uses ::before
   on this link to draw a grey circle outline, and it also
   fades the link to opacity 0.5. That is what made an
   earlier version look washed out, with one grey line in
   the ×. Both are switched off below, and the × no longer
   depends on either pseudo-element.

   WHY THE LONG SELECTOR: the Cart widget and WooCommerce
   both set this link's colour with !important. An
   !important rule only loses to another !important rule
   that is more specific, so this .elementor-kit-4846 is deliberately
   longer than theirs. Do not shorten it.

   Scoped to .woocommerce-cart-form, so the side cart's own
   remove links are left alone.

   All values: the "Cart page" tokens in NOTICE & CART
   TOKENS. */

.woocommerce-cart-form .shop_table .product-remove a.remove {
  position: relative !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  width: var(--cartpage-remove-size) !important;
  height: var(--cartpage-remove-size) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;                            /* Astra fades it to 0.5 */
  vertical-align: middle;

  font-size: 0 !important;                          /* hides the text × */
  line-height: 0 !important;
  color: transparent !important;
  text-decoration: none !important;

  background-color: var(--cartpage-c-remove-bg) !important;
  background-image: var(--cartpage-remove-x) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: var(--cartpage-remove-icon) var(--cartpage-remove-icon) !important;
  border: var(--cartpage-remove-ring-width) solid var(--cartpage-c-remove-ring) !important;
  border-radius: var(--cartpage-remove-radius) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

/* Astra's grey circle outline, and any icon a theme or
   plugin puts inside the link. */

.woocommerce-cart-form .shop_table .product-remove a.remove::before,
.woocommerce-cart-form .shop_table .product-remove a.remove::after {
  content: none !important;
  display: none !important;
}

.woocommerce-cart-form .shop_table .product-remove a.remove > * {
  display: none !important;
}

.woocommerce-cart-form .shop_table .product-remove a.remove:hover,
.woocommerce-cart-form .shop_table .product-remove a.remove:focus-visible {
  background-color: var(--cartpage-c-remove-hover-bg) !important;
  border-color: var(--cartpage-c-remove-hover-ring) !important;
  opacity: 1 !important;
}

/* A small press, so the click feels registered. */

.woocommerce-cart-form .shop_table .product-remove a.remove:active {
  transform: scale(0.94);
}

.woocommerce-cart-form .shop_table .product-remove a.remove:focus-visible {
  outline: 2px solid var(--cartpage-c-remove-hover-ring) !important;
  outline-offset: 2px;                              /* visible keyboard focus */
}


/* ----- The final Total -----
   The widget gives every totals row one size. This lifts
   the last one so the number a shopper pays stands out.
   The <strong> keeps the "(includes VAT)" note at its own
   smaller size. */

.cart_totals .order-total th,
.cart_totals .order-total td::before,
.cart_totals .order-total td strong .woocommerce-Price-amount {
  font-size: var(--cartpage-total-size) !important;
  line-height: 1.2 !important;
}


/* ----- Inactive Update Cart -----
   WooCommerce greys this out until a quantity changes. The
   INACTIVE BUTTONS block above fills it olive, which made it
   look weightier than the live outlined buttons beside it.
   This keeps the outline and only fades it. */

.woocommerce-cart button[name="update_cart"]:disabled,
.woocommerce-cart button[name="update_cart"]:disabled:hover {
  background: transparent !important;
  color: var(--brand-accent) !important;
  -webkit-text-fill-color: var(--brand-accent) !important;
  border: 1px solid var(--brand-accent) !important;
  opacity: var(--btn-disabled-opacity) !important;
}




/* ==========================================================
   CART PAGE — TABLET AND PHONE
   Two widths, because two different things happen:

   1024px AND BELOW
   Elementor stacks the item list above Cart Total. The
   section margin and the stack's own gap then add up to a
   large empty band between them, and the totals rows keep
   their desktop size. Both are set here.

   768px AND BELOW
   WooCommerce turns every item into a column of "Product:",
   "Price:", "Quantity:" lines with the values pushed right,
   and puts the remove button and the photo on rows of their
   own. That is why the phone and tablet previews looked
   scattered. The rules below rebuild each item as a card:

     [photo]  Men's Hemp Shirt – Dark Blue, M      [×]
     [photo]  19.99€
     [ −  2  + ]                                 39.98€

   The 768 is WooCommerce's own breakpoint, so it is used
   here rather than the 767 of the MOBILE block. At exactly
   768px, the width of Elementor's tablet preview, both the
   card and the tablet sizes apply.

   Sizes: the "Cart page on tablet and phone" tokens in
   NOTICE & CART TOKENS, and the phone values in MOBILE.
   ========================================================== */

@media (max-width: 1024px) {

  /* One even gap between the stacked sections. This
     overrides the widget's Sections > Margin on tablet and
     phone. */

  .elementor-widget-woocommerce-cart .e-cart__container {
    row-gap: 0 !important;
  }

  .elementor-widget-woocommerce-cart .e-cart-section {
    margin: 0 0 var(--cartpage-section-gap) !important;
  }


  /* Totals rows sized for a narrow screen. The final Total
     is left out, so it keeps its larger size from the CART
     PAGE block. */

  .cart_totals .shop_table tr:not(.order-total) th,
  .cart_totals .shop_table tr:not(.order-total) td::before,
  .cart_totals .shop_table tr:not(.order-total) td > .woocommerce-Price-amount {
    font-size: var(--cartpage-row-size) !important;
    line-height: 1.3 !important;
  }

}


@media (max-width: 768px) {

  /* ----- The card -----
     Each item row becomes a three-column grid: photo, text,
     remove button. The side padding is zeroed because
     Elementor pads each row 28px on phones, which is why the
     items sat further in than Cart Total. */

  .woocommerce-cart-form .shop_table tr.cart_item {
    display: grid !important;
    grid-template-columns: var(--cartpage-card-thumb) minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "thumb name  remove"
      "thumb price price"
      "qty   qty   subtotal";
    column-gap: var(--cartpage-card-gap);
    row-gap: 4px;
    align-items: start;
    padding: var(--cartpage-card-padding) 0 !important;
  }


  /* Every cell: no table padding or borders, no "Label:"
     prefix, and left-aligned. WooCommerce forces right
     alignment with !important on phones, hence the
     !important here. */

  .woocommerce-cart-form .shop_table tr.cart_item > td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }

  .woocommerce-cart-form .shop_table tr.cart_item > td::before {
    content: none !important;
    display: none !important;
  }


  /* ----- Photo ----- */

  .woocommerce-cart-form .shop_table tr.cart_item > td.product-thumbnail {
    grid-area: thumb;
    line-height: 0 !important;
  }

  .woocommerce-cart-form .shop_table tr.cart_item > td.product-thumbnail a {
    display: block;
  }

  .woocommerce-cart-form .shop_table tr.cart_item > td.product-thumbnail img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;                              /* crops, not squashes */
    border-radius: var(--field-radius);
  }


  /* ----- Name, beside the photo ----- */

  .woocommerce-cart-form .shop_table tr.cart_item > td.product-name {
    grid-area: name;
    padding-top: 4px !important;                    /* level with the × */
  }

  .woocommerce-cart-form .shop_table tr.cart_item > td.product-name,
  .woocommerce-cart-form .shop_table tr.cart_item > td.product-name a {
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  /* Colour and size lines, if a product lists them under
     its name instead of in it */
  .woocommerce-cart-form .shop_table tr.cart_item > td.product-name .variation {
    margin: 4px 0 0 !important;
    font-size: var(--cartpage-card-price) !important;
    color: var(--brand-secondary) !important;
  }


  /* ----- Unit price, quieter than the line total ----- */

  .woocommerce-cart-form .shop_table tr.cart_item > td.product-price {
    grid-area: price;
  }

  .woocommerce-cart-form .shop_table tr.cart_item > td.product-price,
  .woocommerce-cart-form .shop_table tr.cart_item > td.product-price * {
    font-size: var(--cartpage-card-price) !important;
    font-weight: var(--brand-body-weight) !important;
    color: var(--brand-secondary) !important;
  }


  /* ----- Stepper, under the photo ----- */

  .woocommerce-cart-form .shop_table tr.cart_item > td.product-quantity {
    grid-area: qty;
    margin-top: var(--cartpage-card-qty-gap) !important;
  }

  .woocommerce-cart-form .shop_table tr.cart_item > td.product-quantity .quantity {
    float: none !important;
    margin: 0 !important;
  }


  /* ----- Line total, level with the stepper ----- */

  .woocommerce-cart-form .shop_table tr.cart_item > td.product-subtotal {
    grid-area: subtotal;
    align-self: center;
    margin-top: var(--cartpage-card-qty-gap) !important;
    text-align: right !important;
  }

  .woocommerce-cart-form .shop_table tr.cart_item > td.product-subtotal,
  .woocommerce-cart-form .shop_table tr.cart_item > td.product-subtotal * {
    font-weight: 600 !important;
    color: var(--brand-primary) !important;
  }


  /* ----- Remove button, top right -----
     line-height 0 stops the cell adding a few pixels under
     the button. */

  .woocommerce-cart-form .shop_table tr.cart_item > td.product-remove {
    grid-area: remove;
    justify-self: end;
    line-height: 0 !important;
    font-size: 0 !important;
  }

}




/* ==========================================================
   FOOTER
   Layout, colours and type are set on the widgets in the
   Elementor editor. Only what they cannot reach is here.
   ========================================================== */

/* Visible keyboard focus. The widget Style tabs cover hover
   but not :focus-visible, so tabbing through the footer
   links and social icons is otherwise invisible. */

.elementor-location-footer a:focus-visible,
.elementor-location-footer button:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Stops a long label like "Terms & Conditions" breaking
   into a lopsided two lines in a narrow column. */

.elementor-location-footer .elementor-nav-menu a {
  text-wrap: balance;
}




/* ==========================================================
   TABLET
   768px to 1024px. Elementor's tablet preview and an iPad
   in portrait both land here. Cards are roughly 350–480px
   wide. Anything omitted keeps its DESKTOP value, so radii
   and letter spacing are restated to stop the larger
   desktop values leaking down.
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  :root {

    /* ----- Buttons -----
       The size falls back to 17px only if the Accent Text
       global is missing; when it exists, Elementor's own
       tablet value wins. */

    --btn-size:   var(--e-global-typography-accent-font-size, 17px);
    --btn-radius: 6px;


    /* ----- Fields -----
       Reaches the account pages and the contact form at
       once. --field-size is deliberately not reduced. */

    --field-padding:       11px 14px;
    --field-radius:        6px;
    --field-select-height: 46px;
    --field-textarea-min:  140px;


    /* ----- Header ----- */

    --header-inset:       24px;
    --header-gap:         16px;
    --header-height:      64px;
    --header-logo-height: 34px;


    /* ----- Shop ----- */

    --shop-columns:     2;            /* stays 2 even if desktop changes */
    --shop-grid-gap:    20px;
    --shop-grid-margin: 0 0 32px;
    --shop-grid-inset:  0;

    --shop-card-padding: 20px;
    --shop-card-radius:  10px;
    --shop-image-gap:    16px;
    --shop-image-radius: 8px;

    --shop-cat-size: 12px;
    --shop-cat-gap:  6px;

    --shop-title-size: 24px;
    --shop-title-ls:   -0.3px;
    --shop-title-gap:  9px;

    --shop-price-size:     28px;
    --shop-price-ls:       -0.6px;
    --shop-oldprice-size:  21px;
    --shop-oldprice-ls:    -0.3px;
    --shop-oldprice-space: 10px;
    --shop-price-gap:      16px;

    --shop-badge-size:    13px;
    --shop-badge-padding: 8px 14px;
    --shop-badge-radius:  6px;
    --shop-badge-offset:  14px;

    --shop-button-size:     14px;
    --shop-button-padding:  14px 18px;
    --shop-button-maxwidth: 280px;

    --shop-cart-size:    15px;
    --shop-cart-padding: 15px 26px;

    --shop-rating-size: 14px;
    --shop-rating-gap:  8px;

    --shop-heading-size: 30px;
    --shop-heading-gap:  28px;

    --shop-section-space: 56px;


    /* ----- Account, notices and cart -----
       Tab columns are set at the bottom of this file. */

    --cart-padding:        24px;
    --cart-row-gap:        18px;
    --cartpage-total-size: 24px;
    --notice-padding:      15px 18px 15px 48px;
    --notice-space:        20px;
    --acct-button-padding: 13px 22px;
    --acct-notice-padding: 16px 18px 16px 48px;
    --acct-address-gap:    24px;

  }

  /* Lets a long button label wrap instead of widening the card */
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product a.button,
  .woocommerce ul.products li.product a.add_to_cart_button {
    white-space: normal !important;
  }

}




/* ==========================================================
   MOBILE
   Under 768px. Two columns puts a card at roughly 165px
   wide, so type is sized to fit THAT, not copied from the
   mobile column of the font table. The two prices must
   share one line — that is what drives these numbers.
   Anything omitted keeps its DESKTOP value, not tablet's.

   The header layout block does not run down here — the
   mobile header keeps the widget order and centring you
   set in Advanced > Layout.
   ========================================================== */

@media (max-width: 767px) {

  :root {

    /* ----- Buttons ----- */

    --btn-size:   var(--e-global-typography-accent-font-size, 15px);
    --btn-radius: 6px;


    /* ----- Fields -----
       --field-size is deliberately NOT reduced: anything
       under 16px and iOS zooms the page in when the field
       is tapped, then leaves it zoomed. */

    --field-padding:       12px 14px;
    --field-radius:        6px;
    --field-select-height: 48px;      /* clears the 44px finger minimum */
    --field-textarea-min:  120px;     /* keeps Send on screen */


    /* ----- Shop ----- */

    --shop-columns:     2;            /* 1 for one big card per row */
    --shop-grid-gap:    12px;
    --shop-grid-margin: 0 0 24px;
    --shop-grid-inset:  0;            /* raise if cards touch the screen edge */

    --shop-card-padding: 12px;
    --shop-card-radius:  8px;
    --shop-image-gap:    10px;
    --shop-image-radius: 6px;

    --shop-cat-size: 11px;
    --shop-cat-ls:   0.05em;
    --shop-cat-gap:  4px;

    --shop-title-size: 17px;
    --shop-title-lh:   1.3;
    --shop-title-ls:   -0.2px;
    --shop-title-gap:  6px;

    --shop-price-size:     17px;      /* both prices sized so 56.99€ 34.99€ */
    --shop-price-ls:       -0.2px;    /* fits one line in a ~140px card */
    --shop-oldprice-size:  13px;
    --shop-oldprice-ls:    -0.1px;
    --shop-oldprice-space: 5px;
    --shop-price-gap:      12px;

    --shop-badge-size:    11px;
    --shop-badge-ls:      0.05em;
    --shop-badge-padding: 5px 9px;
    --shop-badge-radius:  5px;
    --shop-badge-offset:  8px;

    --shop-button-size:     12px;
    --shop-button-padding:  11px 6px;
    --shop-button-maxwidth: 100%;     /* full width — easier to tap */

    --shop-cart-size:    15px;
    --shop-cart-padding: 15px 22px;

    --shop-rating-size:  12px;
    --shop-rating-gap:   6px;
    --shop-meta-size:    14px;
    --shop-meta-padding: 10px 14px;   /* larger tap target */

    --shop-heading-size: 22px;
    --shop-heading-gap:  20px;

    --shop-section-space: 40px;


    /* ----- Account, notices and cart -----
       Tab columns are set at the bottom of this file. */

    --cart-padding:         20px;
    --cart-row-gap:         16px;
    --cart-btn-padding:     14px 20px;
    --cartpage-qty-height:  46px;     /* same finger size as the product page */
    --cartpage-qty-btn:     42px;
    --cartpage-qty-input:   46px;
    --cartpage-total-size:  22px;
    --cartpage-remove-size: 36px;     /* bigger tap target for the × */
    --cartpage-remove-icon: 14px;
    --cartpage-card-thumb:   72px;
    --cartpage-card-gap:     14px;
    --cartpage-card-padding: 16px;
    --cartpage-card-price:   14px;
    --cartpage-section-gap:  28px;
    --cartpage-row-size:     18px;
    --notice-padding:       14px 16px 14px 44px;
    --notice-space:         18px;
    --acct-button-padding:  13px 20px;
    --acct-notice-padding:  14px 16px 14px 44px;
    --acct-address-columns: 1;        /* billing above shipping */
    --acct-address-gap:     28px;

  }


  /* Lets a long button label wrap instead of widening the card */
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product a.button,
  .woocommerce ul.products li.product a.add_to_cart_button {
    white-space: normal !important;
  }

  /* Shrinks the prices to fit rather than overflowing if a
     product has a longer number than expected */
  .woocommerce ul.products li.product .price {
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  /* Full width so it is easy to tap */
  .woocommerce .woocommerce-ordering,
  .woocommerce .woocommerce-ordering select {
    width: 100%;
  }


  /* ----- Header -----
     Order, grow and centring are set on the widgets in
     Advanced > Layout. This pushes the cart icon to the
     right edge of its share, which the widget cannot do. */

  .elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle {
    display: flex !important;
    justify-content: flex-end !important;
  }


  /* ----- Notices -----
     Text and button stack, so the button spans the panel
     and is easy to tap. */

  .woocommerce-message a.button,
  .woocommerce-error a.button,
  .woocommerce-info a.button {
    margin-left: 0 !important;
    width: 100% !important;
  }


  /* ----- Contact form -----
     Full width so Send is easy to tap rather than a small
     target in the middle of the row. */

  .elementor-form .elementor-button {
    width: 100% !important;
  }


  /* ----- Account page -----
     The tabs and the panel stack, so the panel needs the
     full width rather than its desktop column share. */

  .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content {
    width: 100% !important;
    margin-top: 20px;
  }

  /* First and Last name stack. Two half-width fields on a
     phone leaves each too narrow to read what you typed. */
  .woocommerce-MyAccount-content .form-row-first,
  .woocommerce-MyAccount-content .form-row-last {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }

  /* Button full width inside a notice, so it is easy to tap
     rather than a small target beside the text */
  .woocommerce-MyAccount-content .woocommerce-message .button,
  .woocommerce-MyAccount-content .woocommerce-info .button {
    display: block !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
  }


  /* ----- Single product page ----- */

  .elementor-widget-woocommerce-product-images .woocommerce-product-gallery__image img {
    max-height: 420px;                              /* stops it filling the screen */
  }

  .woo-variation-swatches .variable-items-wrapper .button-variable-item {
    min-width: 46px;                                /* clears the 44px finger minimum */
    height: 46px;
  }

  .elementor-widget-woocommerce-product-add-to-cart .variations tbody {
    gap: 12px 20px !important;                      /* tighter when Color and Size stack */
  }

  .woocommerce div.product form.cart .quantity .qty-btn {
    padding: 0 15px;
    height: 46px;
  }

  .woocommerce div.product form.cart .quantity input.qty {
    height: 46px;
    width: 46px;
  }

}




/* ==========================================================
   ACCOUNT TABS — RESPONSIVE COLUMNS
   Last block in the file on purpose: these must win over
   everything above them.

   The shop breakpoints are a band, 768px to 1024px. A
   screen or preview outside that band never gets the tablet
   values and falls back to the desktop count of six, which
   is what made the tabs overlap. The queries below are
   open-ended and overlap each other, so every width matches
   one of them and the narrowest wins.

   Counts divide into six so no row is ever short:
   6 -> 1 row, 3 -> 2 rows, 2 -> 3 rows, 1 -> 6 rows.
   ========================================================== */

@media (max-width: 1100px) {
  :root {
    --acct-tab-columns:    3;         /* two rows of three */
    --acct-tab-gap:        6px;
    --acct-tab-min-height: 48px;
    --acct-tab-padding:    12px 14px;
  }
}

@media (max-width: 700px) {
  :root {
    --acct-tab-columns:    2;         /* three rows of two */
    --acct-tab-gap:        6px;
    --acct-tab-min-height: 42px;
    --acct-tab-padding:    10px 10px;
  }
}

/* Only the narrowest phones stack to one column. Two is
   deliberate down to 360px: six full-width bars push the
   actual content off the screen, and the tabs are
   navigation, not the point of the page. */

@media (max-width: 360px) {
  :root {
    --acct-tab-columns:    1;
    --acct-tab-gap:        4px;
    --acct-tab-min-height: 40px;
    --acct-tab-padding:    9px 12px;
  }
}/* End custom CSS */