.elementor-112249 .elementor-element.elementor-element-812b5fe{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:32px 32px;--row-gap:32px;--column-gap:32px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-112249 .elementor-element.elementor-element-25e1c5b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{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 );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-heading .elementor-heading-title{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 );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-112249 .elementor-element.elementor-element-75e97f8 .elementor-heading-title{font-family:var( --e-global-typography-5ac7b38-font-family ), Sans-serif;font-size:var( --e-global-typography-5ac7b38-font-size );font-weight:var( --e-global-typography-5ac7b38-font-weight );text-transform:var( --e-global-typography-5ac7b38-text-transform );line-height:var( --e-global-typography-5ac7b38-line-height );letter-spacing:var( --e-global-typography-5ac7b38-letter-spacing );color:var( --e-global-color-text );}.elementor-112249 .elementor-element.elementor-element-1f4c710{--display:flex;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-text-editor{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 );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-112249 .elementor-element.elementor-element-abf367f{font-family:var( --e-global-typography-08f944e-font-family ), Sans-serif;font-size:var( --e-global-typography-08f944e-font-size );font-weight:var( --e-global-typography-08f944e-font-weight );line-height:var( --e-global-typography-08f944e-line-height );}.elementor-112249 .elementor-element.elementor-element-1ae9747c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:32px;--padding-bottom:80px;--padding-left:64px;--padding-right:64px;}.elementor-112249 .elementor-element.elementor-element-44cea52{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-112249 .elementor-element.elementor-element-a1c4d14{--display:flex;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-112249 .elementor-element.elementor-element-6205b58{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-end;--gap:32px 32px;--row-gap:32px;--column-gap:32px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1200px) and (min-width:577px){.elementor-112249 .elementor-element.elementor-element-a1c4d14{--width:30%;}}@media(max-width:1200px){.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-112249 .elementor-element.elementor-element-75e97f8 .elementor-heading-title{font-size:var( --e-global-typography-5ac7b38-font-size );line-height:var( --e-global-typography-5ac7b38-line-height );letter-spacing:var( --e-global-typography-5ac7b38-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-112249 .elementor-element.elementor-element-abf367f{font-size:var( --e-global-typography-08f944e-font-size );line-height:var( --e-global-typography-08f944e-line-height );}.elementor-112249 .elementor-element.elementor-element-6205b58{--flex-wrap:wrap;}}@media(max-width:992px){.elementor-112249 .elementor-element.elementor-element-812b5fe{--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-112249 .elementor-element.elementor-element-75e97f8 .elementor-heading-title{font-size:var( --e-global-typography-5ac7b38-font-size );line-height:var( --e-global-typography-5ac7b38-line-height );letter-spacing:var( --e-global-typography-5ac7b38-letter-spacing );}.elementor-112249 .elementor-element.elementor-element-1f4c710{--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-112249 .elementor-element.elementor-element-abf367f{font-size:var( --e-global-typography-08f944e-font-size );line-height:var( --e-global-typography-08f944e-line-height );}.elementor-112249 .elementor-element.elementor-element-1ae9747c{--padding-top:20px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}}@media(max-width:768px){.elementor-112249 .elementor-element.elementor-element-812b5fe{--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-112249 .elementor-element.elementor-element-44cea52{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:24px 24px;--row-gap:24px;--column-gap:24px;}.elementor-112249 .elementor-element.elementor-element-6205b58{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;}}@media(max-width:576px){.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-112249 .elementor-element.elementor-element-75e97f8 .elementor-heading-title{font-size:var( --e-global-typography-5ac7b38-font-size );line-height:var( --e-global-typography-5ac7b38-line-height );letter-spacing:var( --e-global-typography-5ac7b38-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-112249 .elementor-element.elementor-element-abf367f{font-size:var( --e-global-typography-08f944e-font-size );line-height:var( --e-global-typography-08f944e-line-height );}.elementor-112249 .elementor-element.elementor-element-6205b58{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;}}@media(min-width:577px){.elementor-112249 .elementor-element.elementor-element-25e1c5b{--width:49%;}.elementor-112249 .elementor-element.elementor-element-1f4c710{--width:50%;}.elementor-112249 .elementor-element.elementor-element-a1c4d14{--width:25%;}.elementor-112249 .elementor-element.elementor-element-6205b58{--width:75%;}}@media(max-width:768px) and (min-width:577px){.elementor-112249 .elementor-element.elementor-element-25e1c5b{--width:100%;}.elementor-112249 .elementor-element.elementor-element-1f4c710{--width:100%;}.elementor-112249 .elementor-element.elementor-element-a1c4d14{--width:100%;}.elementor-112249 .elementor-element.elementor-element-6205b58{--width:100%;}}/* Start custom CSS for shortcode, class: .elementor-element-59f47a04 *//* ============================================================= Premier Polysteel — /request-quote/ form styling Target widget: .elementor-element-59f47a04 (shortcode widget) Paste into: Elementor → that widget → Advanced → Custom CSS (Elementor expands `.elementor-112249 .elementor-element.elementor-element-59f47a04` to .elementor-element-59f47a04) Goal: make the YITH-RAQ shortcode-rendered Gravity Form (#22) visually match the styled "Request a Sample" form (#24), which is built with the UAEL Gravity Forms Styler widget. FULL PARITY build: inputs, labels, button AND faux checkbox/ radio controls — all reproduced from scratch with the SAME site-global design tokens as the sample widget, so nothing depends on UAEL's wrapper markup, base stylesheet, or JS. Self-contained: one paste, no extra CSS classes, no JS. ============================================================= */ /* ---- Text inputs, selects, textareas ---- */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=text], .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=email], .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=tel], .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=url], .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=number], .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=date], .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=password], .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper select, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper textarea { background-color: var(--e-global-color-5ef6992) !important; color: var(--e-global-color-text) !important; border: 1px solid var(--e-global-color-967efc7) !important; border-radius: 0 !important; padding: 11px !important; 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); line-height: var(--e-global-typography-text-line-height); } /* select needs slightly reduced vertical padding (matches sample) */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper select { padding-right: 16px !important; min-height: 53px; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .gfield textarea { max-height: 116px; } /* focus state */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=text]:focus, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=email]:focus, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=tel]:focus, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=url]:focus, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=number]:focus, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=date]:focus, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=password]:focus, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper select:focus, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper textarea:focus { border-color: var(--e-global-color-42ca22a) !important; outline: none; } /* placeholders (sample uses grey italic) */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input::placeholder, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper textarea::placeholder, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper select .gf_placeholder { color: var(--e-global-color-42ca22a); /* #606569 */ font-style: italic; opacity: 1; } /* ---- Labels ---- */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield_label, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper legend.gfield_label { color: var(--e-global-color-text); font-family: var(--e-global-typography-eed6b18-font-family), Sans-serif; font-size: var(--e-global-typography-eed6b18-font-size); font-weight: var(--e-global-typography-eed6b18-font-weight); line-height: var(--e-global-typography-eed6b18-line-height); letter-spacing: var(--e-global-typography-eed6b18-letter-spacing); text-transform: var(--e-global-typography-eed6b18-text-transform); } /* required asterisk */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield_required { color: var(--e-global-color-secondary); } /* ---- Field spacing ---- */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield { margin-bottom: 16px; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gchoice { margin-bottom: 16px; } /* ---- Choice (checkbox/radio) text labels ---- Field labels stay uppercase/tracked (rule above); the individual choice labels are Title-case, regular weight, body colour. */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gchoice label, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gform-field-label--type-inline { 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: 400; letter-spacing: normal; text-transform: none; } /* ============================================================= Faux checkbox / radio controls Reproduces the sample (UAEL "check-default" style): native control hidden via appearance:none, box drawn on the control itself, ✔ = U+2714, radio dot = inset box-shadow. Sized to the sample's "small" preset (12px box). No JS / no icon font. Scoped to standard choice fields so it won't touch image-choice radios (gfield--type-image), which keep their own rendering. ============================================================= */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield_checkbox input[type=checkbox], .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .ginput_container_consent input[type=checkbox], .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield_radio input[type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; width: 20px; height: 20px; min-width: 20px; margin: 0 10px 0 0; padding: 0; vertical-align: middle; background-color: var(--e-global-color-5ef6992); /* #F5F5F4 */ border: 2px solid var(--e-global-color-967efc7); /* #D9DAD9 */ border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield_radio input[type=radio] { border-radius: 50%; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield_checkbox input[type=checkbox]:focus, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .ginput_container_consent input[type=checkbox]:focus, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield_radio input[type=radio]:focus { border-color: var(--e-global-color-42ca22a); outline: none; } /* checked state — cobalt fill (matches sample's hand-added rule) */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield_checkbox input[type=checkbox]:checked, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .ginput_container_consent input[type=checkbox]:checked, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield_radio input[type=radio]:checked { background-color: var(--e-global-color-primary) !important; /* #1053B7 */ border-color: var(--e-global-color-primary) !important; } /* checkbox tick — white */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield_checkbox input[type=checkbox]:checked:before, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .ginput_container_consent input[type=checkbox]:checked:before { content: "\2714"; color: var(--e-global-color-0bb3d02); /* #FFFFFF */ font-size: 11px; line-height: 1; } /* radio dot — white centre */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield_radio input[type=radio]:checked:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: var(--e-global-color-0bb3d02); /* #FFFFFF */ } /* ---- Image-choice fields (colour & metal-design swatches) ---- Each swatch = 40px circle, centred in a fixed 135px cell so the options flow in a compact wrapped grid (matches sample). Without this the raw choice images render at full size. */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .ginput_container_image_choice .gfield_radio { gap: 8px; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .ginput_container_image_choice .gchoice { inline-size: 156px; max-inline-size: 156px; min-inline-size: 156px; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .ginput_container_image_choice .gfield-choice-image-wrapper { aspect-ratio: unset; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield-image-choice-wrapper-inner { display: flex; align-items: center; justify-content: center; width: 100%; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .ginput_container_image_choice .gfield_radio .gfield-choice-image { width: 40px; height: 40px; border-radius: 50%; } .gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice:focus-within .gfield-choice-image-wrapper::before { border-color: transparent; } .gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice:has(input:checked)::after { background-color: #1053B7; block-size: 26px; font-size: 22px; inline-size: 26px; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .gfield-image-choice-wrapper-inner { display: flex; align-items: center; justify-content: center; width: 100%; } .gform_wrapper.gravity-theme .ginput_container_image_choice #input_22_9 .gchoice .gfield-image-choice-wrapper-outer { display: flex; flex-direction: column; align-items: center; justify-content: center; } .gform_wrapper.gravity-theme .ginput_container_image_choice #input_22_10 .gchoice .gfield-image-choice-wrapper-outer { display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ---- Submit button ---- White text (#FFF) over a cobalt fill, brighter-blue on hover. */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=submit], .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gform_button { color: var(--e-global-color-0bb3d02) !important; /* #FFFFFF text */ background-color: var(--e-global-color-primary) !important; /* #1053B7 */ padding: 16px 48px !important; border-radius: 12px !important; border: none; cursor: pointer; transition: background-color .2s ease; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper input[type=submit]:hover, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gform_button:hover { background-color: var(--e-global-color-b0e21e1) !important; /* #1E70EB */ } /* ---- Validation-error box (matches sample) ---- */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .validation_error { background-color: var(--e-global-color-5ef6992); border: 2px solid var(--e-global-color-secondary); border-radius: 16px; padding: 10px; } .elementor-112249 .elementor-element.elementor-element-59f47a04 #field_22_9, .elementor-112249 .elementor-element.elementor-element-59f47a04 #field_22_10 { max-width: 50%; } @media (max-width: 992px) { .elementor-112249 .elementor-element.elementor-element-59f47a04 #field_22_9, .elementor-112249 .elementor-element.elementor-element-59f47a04 #field_22_10 { max-width: 100%; } } /* ---- Request a quote table ---- */ .elementor-112249 .elementor-element.elementor-element-59f47a04 .return-to-shop a.button { font-family: Inter; font-weight: 600; font-size: 16px; color: #FFF; line-height: 160%; text-align: center; text-transform: capitalize; border-radius: 12px; border-width: 4px; border-color: var(--Primary-Cobalt); border-style: solid; background-color: var(--Primary-Cobalt); padding: 12px 48px; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .return-to-shop a.button:hover { border-color: var(--Button-hover); background-color: var(--Button-hover); box-shadow: 2px 2px 4px 0px var(--Shadow); } .elementor-112249 .elementor-element.elementor-element-59f47a04 .ywraq-form-title, .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_required_legend { display: none; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .yith-ywraq-before-table a.button, .elementor-112249 .elementor-element.elementor-element-59f47a04 #ywraq-list-to-pdf, .elementor-112249 .elementor-element.elementor-element-59f47a04 .update-list-wrapper input.button { font-family: Inter; font-weight: 600; font-size: 16px; color: var(--Text-Ink-Black); background-color: var(--transparent); line-height: 160%; text-align: center; text-transform: capitalize; border-radius: 12px; border-width: 4px; border-color: var(--Primary-Cobalt); border-style: solid; padding: 12px 48px; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .yith-ywraq-before-table a.button:hover, .elementor-112249 .elementor-element.elementor-element-59f47a04 #ywraq-list-to-pdf:hover, .elementor-112249 .elementor-element.elementor-element-59f47a04 .update-list-wrapper input.button:hover { color: var(--Text-Ink-Black); border-color: var(--Button-hover); background-color: var(--transparent); box-shadow: 2px 2px 4px 0px var(--Shadow); } /* ============================================================= Premier Polysteel — /request-quote/ QUOTE LIST TABLE Styles the YITH Request-a-Quote list table (the products table shown when the quote list has items) to match Figma "Quote Table" (node 948:14973). Separate from request-quote-form.custom.css (that file styles the Gravity Form; this one styles the list table). Both live in the same shortcode widget (.elementor-element-59f47a04), so this can be pasted into that widget's Advanced → Custom CSS below the form rules, OR loaded from a global stylesheet — .elementor-112249 .elementor-element.elementor-element-59f47a04s are fully-qualified so they work either way. Tokens reuse the site's global design variables: text #0E141B --e-global-color-text cobalt#1053B7 --e-global-color-primary border#D9DAD9 --e-global-color-967efc7 fill #F5F5F4 --e-global-color-5ef6992 red #E5001D --e-global-color-secondary grey #606569 --e-global-color-42ca22a ============================================================= */ /* ---- Table shell: strip WooCommerce gridlines ---- */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table, .elementor-element-59f47a04 .ywraq-wrapper .ywraq-table { border: 0 !important; border-collapse: collapse !important; border-radius: 0 !important; margin: 0; width: 100%; } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table th, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td { border: 0 !important; background: none !important; vertical-align: middle; } /* ---- Header row: white bg, near-black bold labels, bottom rule ---- */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table thead th { background: none !important; color: var(--e-global-color-text); /* #0E141B */ font-family: var(--e-global-typography-text-font-family), Sans-serif; font-weight: 700; font-size: 16px; line-height: 1.4; text-transform: none; letter-spacing: 0; text-align: left; padding: 0 16px 16px; border-bottom: 1px solid var(--e-global-color-967efc7) !important; /* #D9DAD9 */ } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table thead th.product-price, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table thead th.product-quantity, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table thead th.product-subtotal { text-align: left; } /* ---- Body rows: generous padding + thin separator only ---- */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table tbody tr.cart_item td { padding: 24px 16px; border-bottom: 1px solid var(--e-global-color-967efc7) !important; } /* remove (×) — red, centred in its column */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-remove { width: 48px; text-align: center; padding-left: 0; padding-right: 0; } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-remove a, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-remove .remove { color: var(--e-global-color-secondary) !important; /* #E5001D */ font-size: 20px; line-height: 1; background: none !important; border: 0 !important; } /* product thumbnail — rounded grey tile, constrained */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-thumbnail { width: 140px; } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-thumbnail img { width: 110px; height: 110px; max-width: none; object-fit: cover; border-radius: 8px; background-color: var(--e-global-color-5ef6992); /* #F5F5F4 */ display: block; } /* product name — black semibold (NOT a cobalt link) */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-name a, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-name a:hover { color: var(--e-global-color-text) !important; /* #0E141B */ font-family: var(--e-global-typography-text-font-family), Sans-serif; font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; } /* SKU + attribute lines — small grey regular */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-name small, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-name .sku, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-name .variation, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-name dl.variation { font-size: 14px; line-height: 1.8; margin: 6px 0 0; } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-name ul { list-style: none; padding-left: 0; } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-name ul li { font-family: var(--e-global-typography-8577666-font-family), Sans-serif; font-size: var(--e-global-typography-8577666-font-size) !important; font-weight: var(--e-global-typography-8577666-font-weight); line-height: var(--e-global-typography-8577666-line-height); letter-spacing: var(--e-global-typography-8577666-letter-spacing); word-spacing: var(--e-global-typography-8577666-word-spacing); color: var(--e-global-color-text); } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-name ul li strong { font-family: var(--e-global-typography-56139b6-font-family), Sans-serif; font-size: var(--e-global-typography-56139b6-font-size) !important; font-weight: var(--e-global-typography-56139b6-font-weight); line-height: var(--e-global-typography-56139b6-line-height); letter-spacing: var(--e-global-typography-56139b6-letter-spacing); word-spacing: var(--e-global-typography-56139b6-word-spacing); color: var(--e-global-color-text); } /* attribute label (dt) grey/regular, value (dd) darker */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-name dl.variation dt { font-weight: 400; color: var(--e-global-color-42ca22a); float: none; display: inline; margin: 0 4px 0 0; clear: none; } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-name dl.variation dd { color: var(--e-global-color-text); display: inline; margin: 0; } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-name dl.variation dd p { display: inline; margin: 0; } /* price + subtotal — black, regular */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-price, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-subtotal, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-price .amount, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-subtotal .amount { color: var(--e-global-color-text) !important; /* #0E141B */ font-size: 16px; font-weight: 400; } /* quantity box */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-quantity input.qty { width: 56px; height: 48px; text-align: center; background-color: var(--e-global-color-5ef6992); /* #F5F5F4 */ border: 1px solid var(--e-global-color-967efc7); /* #D9DAD9 */ border-radius: 0; color: var(--e-global-color-text); padding: 0; } /* ---- Total row — borderless, top rule, right-aligned bold ---- */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table tfoot td, .elementor-element-59f47a04 .ywraq-wrapper .ywraq-total, .elementor-element-59f47a04 .ywraq-wrapper tr.order-total td, .elementor-element-59f47a04 .ywraq-wrapper tr.cart-subtotal td { background: none !important; border: 0 !important; border-top: 1px solid var(--e-global-color-967efc7) !important; color: var(--e-global-color-text) !important; font-weight: 500; font-size: 16px; padding: 20px 16px; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .raq-totals-label, .elementor-112249 .elementor-element.elementor-element-59f47a04 .raq-totals .amount { font-family: var(--e-global-typography-05da5cb-font-family), Sans-serif; font-size: var(--e-global-typography-05da5cb-font-size); font-weight: var(--e-global-typography-05da5cb-font-weight); line-height: var(--e-global-typography-05da5cb-line-height); letter-spacing: var(--e-global-typography-05da5cb-letter-spacing); word-spacing: var(--e-global-typography-05da5cb-word-spacing); color: var(--e-global-color-text); } .ywraq-wrapper.ywraq-empty .ywraq-before-form, .ywraq-wrapper.ywraq-with-form.ywraq-empty .ywraq-before-form { display: none !important; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .uael-gf-style .uael-gf-select-custom:after { right: 16px; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .gform_wrapper .gfield .gfield_description { padding: 0 0 8px 0; } select { /* Hides the default browser arrow icon */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Adds a custom SVG arrow icon */ background-image: url("https://premierpolysteel.com/wp-content/uploads/2026/06/Vector.svg"); background-repeat: no-repeat; /* CHANGE POSITION HERE: Move it left, right, or center */ background-position: calc(100% - 16px) center; /* 12px padding from the right edge */ /* Ensure text doesn't overlap the icon */ padding-right: 16px; } .gfield_checkbox input[type=checkbox]:checked:before, .ginput_container_consent input[type=checkbox]:checked:before { color: #fff !important; } /* ---- Responsive: stacked card layout on mobile ---- Each row becomes a card: small rounded image top-left, red × top-right, name/SKU/attributes, then Price/Quantity/Subtotal as label↔value rows (label = the cell's data-title). */ @media (max-width: 768px) { /* hide the desktop header */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table thead { display: none !important; } /* force the cart table to stack (override WooCommerce's own responsive-cart CSS, which uses !important) */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table tbody { display: block !important; width: 100% !important; } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table tbody tr.cart_item { display: block !important; position: relative; width: 100% !important; padding: 20px 0; border-bottom: 1px solid var(--e-global-color-967efc7) !important; } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table tbody tr.cart_item td { display: block; width: 100%; float: none; clear: both; padding: 0; border: 0 !important; text-align: left; } /* remove × — top-right */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-remove { position: absolute; top: 18px; right: 0; width: auto !important; text-align: right; } /* thumbnail — small, top-left */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-thumbnail { margin-bottom: 12px; } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-thumbnail img { width: 64px; height: 64px; } /* name block — leave room for the × */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-name { margin-bottom: 8px; padding-right: 32px !important; } /* Price / Quantity / Subtotal → label ↔ value rows */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-price, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-quantity, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-subtotal { display: flex !important; align-items: center; justify-content: space-between; padding: 6px 0 !important; } /* small gap separating the details block from the price rows */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-price { margin-top: 8px; } /* literal labels — YITH wrongly gives the subtotal cell data-title="Price", so don't use attr(data-title) here */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-price::before { content: "Price"; } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-quantity::before { content: "Quantity"; } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-subtotal::before { content: "Subtotal"; } .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-price::before, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-quantity::before, .elementor-element-59f47a04 .ywraq-wrapper table.shop_table td.product-subtotal::before { font-weight: 600; font-size: 15px; color: var(--e-global-color-text); } /* total row stacks: label left, amount right */ .elementor-element-59f47a04 .ywraq-wrapper table.shop_table tfoot td, .elementor-element-59f47a04 .ywraq-wrapper tr.order-total td { display: flex !important; justify-content: space-between; align-items: center; } .elementor-112249 .elementor-element.elementor-element-59f47a04 .mobile-price { display: none; } #yith-ywraq-form table.cart .product-thumbnail img { margin-bottom: 16px; } .elementor-112249 .elementor-element.elementor-element-59f47a04 #yith-ywraq-form .update-list-wrapper input[type="submit"] { margin-top: 0; } } @media (max-width: 576px) { .elementor-112249 .elementor-element.elementor-element-59f47a04 #yith-ywraq-form .update-list-wrapper { flex-direction: column; gap: 16px; } .elementor-112249 .elementor-element.elementor-element-59f47a04 #yith-ywraq-form .update-list-wrapper input[type="submit"] { width: 100%; } .elementor-112249 .elementor-element.elementor-element-59f47a04 #yith-ywraq-form .update-list-wrapper .after-table-right .button { width: 100%; justify-content: center; } .elementor-112249 .elementor-element.elementor-element-59f47a04 #yith-ywraq-form .update-list-wrapper .after-table-right { width: 100%; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6205b58 */.elementor-112249 .elementor-element.elementor-element-6205b58 .return-to-shop a { } .elementor-112249 .elementor-element.elementor-element-6205b58 .return-to-shop a:hover { }/* End custom CSS */