Same-day Nairobi delivery
Eligible Nairobi orders confirmed before 1 PM can be
delivered the same day.
Shop Collection
Home
/
Shop Collection
Same-day Nairobi delivery for eligible orders confirmed before 1 PM.
THE UDGOON EDIT
Shop the Collection
Explore flowing free-size kaftans and statement gowns, selected for everyday ease, celebrations and unforgettable entrances.
All Pieces
Kaftans
Boubou Gowns
Brocade Gowns
3D Floral Gowns
/* =========================================================
UDGOON SHOP 01
Product-first collection introduction
Inspired by luxury fashion PLP structures
========================================================= */
.udg-shop-intro,
.udg-shop-intro *,
.udg-shop-intro *::before,
.udg-shop-intro *::after {
box-sizing: border-box;
}
.udg-shop-intro {
–udg-paper: #fffdf8;
–udg-cream: #f5f1e8;
–udg-ink: #241d17;
–udg-olive: #737b58;
–udg-olive-deep: #515b3d;
–udg-gold: #c89b35;
–udg-line: rgba(36, 29, 23, 0.15);
–udg-soft-line: rgba(36, 29, 23, 0.09);
position: relative;
isolation: isolate;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: var(–udg-ink);
background:
radial-gradient(
circle at 93% 9%,
rgba(200, 155, 53, 0.08),
transparent 24%
),
linear-gradient(
145deg,
var(–udg-paper) 0%,
var(–udg-cream) 100%
);
border-bottom: 1px solid var(–udg-soft-line);
font-family: “DM Sans”, Arial, sans-serif;
}
/* Quiet section index */
.udg-shop-intro::before {
content: “SHOP / 01”;
position: absolute;
right: 28px;
bottom: 84px;
z-index: 0;
color: transparent;
font-family: “Cormorant Garamond”, Georgia, serif;
font-size: clamp(100px, 13vw, 210px);
font-weight: 500;
line-height: 0.75;
letter-spacing: -0.055em;
white-space: nowrap;
pointer-events: none;
-webkit-text-stroke:
1px rgba(36, 29, 23, 0.045);
}
/* =========================================================
MAIN INNER FRAME
========================================================= */
.udg-shop-intro__inner {
–padding-top: 0px;
–padding-right: 0px;
–padding-bottom: 0px;
–padding-left: 0px;
–gap: 0px;
position: relative;
z-index: 1;
width: min(100%, 1540px) !important;
max-width: 1540px !important;
min-width: 0 !important;
margin: 0 auto !important;
padding:
27px
clamp(22px, 4vw, 66px)
0 !important;
gap: 0 !important;
}
/* =========================================================
TOP LINE
========================================================= */
.udg-shop-intro__top {
–padding-top: 0px;
–padding-right: 0px;
–padding-bottom: 0px;
–padding-left: 0px;
–gap: 24px;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 0 17px !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
border-bottom: 1px solid var(–udg-line);
}
.udg-shop-intro__breadcrumb,
.udg-shop-intro__delivery {
width: auto !important;
min-width: 0;
margin: 0 !important;
}
.udg-shop-intro__breadcrumb
.elementor-widget-container,
.udg-shop-intro__breadcrumb p,
.udg-shop-intro__delivery
.elementor-widget-container,
.udg-shop-intro__delivery p {
margin: 0 !important;
}
.udg-shop-intro__breadcrumb,
.udg-shop-intro__breadcrumb p {
color: rgba(36, 29, 23, 0.58);
font-size: 9px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.udg-shop-intro__breadcrumb a {
color: var(–udg-ink);
text-decoration: none;
transition: color 180ms ease;
}
.udg-shop-intro__breadcrumb a:hover,
.udg-shop-intro__breadcrumb a:focus-visible {
color: var(–udg-olive-deep);
}
.udg-shop-intro__breadcrumb span {
margin-left: 9px;
}
.udg-shop-intro__delivery,
.udg-shop-intro__delivery p {
color: var(–udg-olive-deep);
font-size: 9px;
font-weight: 800;
line-height: 1.4;
letter-spacing: 0.09em;
text-align: right;
text-transform: uppercase;
}
/* Delivery marker */
.udg-shop-intro__delivery p::before {
content: “”;
width: 7px;
height: 7px;
margin-right: 9px;
display: inline-block;
background: var(–udg-gold);
border-radius: 50%;
box-shadow:
0 0 0 4px rgba(200, 155, 53, 0.12);
}
/* =========================================================
HEADING GRID
========================================================= */
.udg-shop-intro__heading {
–padding-top: 0px;
–padding-right: 0px;
–padding-bottom: 0px;
–padding-left: 0px;
–gap: clamp(38px, 7vw, 110px);
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding:
clamp(48px, 6.5vw, 96px)
0
clamp(45px, 5vw, 72px) !important;
display: grid !important;
grid-template-columns:
minmax(0, 1.28fr)
minmax(280px, 0.72fr) !important;
align-items: end !important;
justify-content: stretch !important;
gap: clamp(38px, 7vw, 110px) !important;
}
.udg-shop-intro__title-block {
–padding-top: 0px;
–padding-right: 0px;
–padding-bottom: 0px;
–padding-left: 0px;
–gap: 0px;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
}
/* Eyebrow */
.udg-shop-intro__eyebrow {
width: auto !important;
margin: 0 0 23px !important;
}
.udg-shop-intro__eyebrow
.elementor-heading-title {
margin: 0 !important;
color: var(–udg-gold) !important;
font-family: “DM Sans”, Arial, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
}
/* Main title */
.udg-shop-intro__title {
width: 100% !important;
margin: 0 !important;
}
.udg-shop-intro__title
.elementor-heading-title {
max-width: 930px;
margin: 0 !important;
color: var(–udg-ink) !important;
font-family: “Cormorant Garamond”, Georgia, serif !important;
font-size: clamp(72px, 8.2vw, 126px) !important;
font-weight: 500 !important;
line-height: 0.83 !important;
letter-spacing: -0.055em !important;
text-wrap: balance;
}
/* Description */
.udg-shop-intro__description {
width: 100% !important;
max-width: 540px !important;
margin: 0 !important;
padding: 0 0 5px !important;
justify-self: end;
}
.udg-shop-intro__description
.elementor-widget-container,
.udg-shop-intro__description p {
margin: 0 !important;
}
.udg-shop-intro__description,
.udg-shop-intro__description p {
color: rgba(36, 29, 23, 0.66);
font-size: 15px;
font-weight: 400;
line-height: 1.75;
}
/* Small editorial rule above the description */
.udg-shop-intro__description::before {
content: “”;
width: 58px;
height: 1px;
margin: 0 0 22px;
display: block;
background: var(–udg-gold);
}
/* =========================================================
CATEGORY RAIL
========================================================= */
.udg-shop-intro__categories {
–padding-top: 0px;
–padding-right: 0px;
–padding-bottom: 0px;
–padding-left: 0px;
–gap: 0px;
position: relative;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
border-top: 1px solid var(–udg-line);
border-bottom: 1px solid var(–udg-line);
scrollbar-width: none;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
}
.udg-shop-intro__categories::-webkit-scrollbar {
display: none;
}
.udg-shop-intro__category {
–width: auto;
width: auto !important;
min-width: max-content !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
.udg-shop-intro__category
.elementor-button {
min-width: max-content;
min-height: 62px;
margin: 0 !important;
padding: 0 clamp(21px, 2.3vw, 36px) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 18px;
color: var(–udg-ink) !important;
background: transparent !important;
border: 0 !important;
border-right: 1px solid var(–udg-line) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: “DM Sans”, Arial, sans-serif !important;
font-size: 9px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
transition:
color 180ms ease,
background-color 180ms ease,
padding 180ms ease;
}
.udg-shop-intro__category
.elementor-button::after {
content: “↗”;
font-size: 12px;
font-weight: 500;
line-height: 1;
opacity: 0.42;
transition:
opacity 180ms ease,
transform 180ms ease;
}
.udg-shop-intro__category
.elementor-button:hover,
.udg-shop-intro__category
.elementor-button:focus-visible {
color: var(–udg-paper) !important;
background: var(–udg-olive-deep) !important;
}
.udg-shop-intro__category
.elementor-button:hover::after,
.udg-shop-intro__category
.elementor-button:focus-visible::after {
opacity: 1;
transform: translate(2px, -2px);
}
.udg-shop-intro__category.is-active
.elementor-button {
color: var(–udg-paper) !important;
background: var(–udg-ink) !important;
}
.udg-shop-intro__category.is-active
.elementor-button::after {
content: “↓”;
opacity: 0.78;
}
.udg-shop-intro__category
.elementor-button:focus-visible,
.udg-shop-intro__breadcrumb a:focus-visible {
outline: 2px solid var(–udg-gold);
outline-offset: -4px;
}
/* Remove Elementor widget spacing */
.udg-shop-intro
.elementor-widget:not(:last-child) {
margin-bottom: 0 !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.udg-shop-intro__inner {
padding:
24px 28px
0 !important;
}
.udg-shop-intro__heading {
padding:
62px 0
52px !important;
grid-template-columns:
minmax(0, 1fr) !important;
align-items: start !important;
gap: 34px !important;
}
.udg-shop-intro__description {
max-width: 670px !important;
justify-self: start;
}
.udg-shop-intro__title
.elementor-heading-title {
font-size: clamp(72px, 10.5vw, 102px) !important;
}
.udg-shop-intro__category
.elementor-button {
min-height: 58px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.udg-shop-intro::before {
right: -14px;
bottom: 70px;
font-size: 104px;
}
.udg-shop-intro__inner {
padding:
18px 16px
0 !important;
}
.udg-shop-intro__top {
padding-bottom: 14px !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 10px !important;
}
.udg-shop-intro__delivery,
.udg-shop-intro__delivery p {
text-align: left;
}
.udg-shop-intro__heading {
padding:
46px 0
39px !important;
gap: 29px !important;
}
.udg-shop-intro__eyebrow {
margin-bottom: 18px !important;
}
.udg-shop-intro__title
.elementor-heading-title {
font-size: clamp(55px, 16vw, 76px) !important;
line-height: 0.87 !important;
}
.udg-shop-intro__description {
max-width: 100% !important;
padding-bottom: 0 !important;
}
.udg-shop-intro__description,
.udg-shop-intro__description p {
font-size: 13px;
line-height: 1.7;
}
.udg-shop-intro__description::before {
margin-bottom: 17px;
}
.udg-shop-intro__categories {
width: calc(100% + 32px) !important;
margin-left: -16px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.udg-shop-intro__category
.elementor-button {
min-height: 55px;
padding:
0 19px !important;
font-size: 8px !important;
}
.udg-shop-intro__category:first-child
.elementor-button {
border-left: 1px solid var(–udg-line) !important;
}
}
@media (max-width: 390px) {
.udg-shop-intro__inner {
padding-right: 13px !important;
padding-left: 13px !important;
}
.udg-shop-intro__title
.elementor-heading-title {
font-size: 53px !important;
}
.udg-shop-intro__categories {
width: calc(100% + 26px) !important;
margin-left: -13px !important;
padding-left: 13px !important;
padding-right: 13px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.udg-shop-intro *,
.udg-shop-intro *::before,
.udg-shop-intro *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
Showing36 pieces
/* =========================================================
UDGOON COLLECTION
SHOP 02 — CATALOGUE TOOLS
FINAL OLIVE BUTTON SYSTEM
========================================================= */
.udg-shop-tools,
.udg-shop-filter,
.udg-shop-filter-overlay {
–udg-paper: #fffdf8;
–udg-cream: #f5f1e8;
–udg-ink: #241d17;
–udg-olive: #737b58;
–udg-deep-olive: #515b3d;
–udg-pale-olive: rgba(115, 123, 88, 0.10);
–udg-pale-olive-strong: rgba(115, 123, 88, 0.16);
–udg-border: rgba(36, 29, 23, 0.15);
–udg-border-soft: rgba(36, 29, 23, 0.09);
}
.udg-shop-tools {
position: relative;
z-index: 40;
width: 100%;
max-width: 100%;
color: var(–udg-ink);
background: var(–udg-paper);
border-top: 1px solid var(–udg-border-soft);
border-bottom: 1px solid var(–udg-border);
overflow: visible;
}
.udg-shop-tools,
.udg-shop-tools *,
.udg-shop-filter,
.udg-shop-filter * {
box-sizing: border-box;
}
/* =========================================================
ELEMENTOR LAYOUT SURFACES
========================================================= */
.udg-shop-tools__inner {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-tools__inner > .e-con-inner {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 1440px !important;
margin-inline: auto !important;
padding: 14px clamp(20px, 4vw, 64px) !important;
gap: 0 !important;
}
.udg-shop-tools__inner:not(:has(> .e-con-inner)) {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 1440px !important;
margin-inline: auto !important;
padding: 14px clamp(20px, 4vw, 64px) !important;
gap: 0 !important;
}
/* =========================================================
TOOLBAR ROW
========================================================= */
.udg-shop-tools__bar {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.udg-shop-tools__bar:has(> .e-con-inner) {
display: block !important;
}
.udg-shop-tools__bar > .e-con-inner,
.udg-shop-tools__bar:not(:has(> .e-con-inner)) {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 52px;
margin: 0 !important;
padding: 0 !important;
gap: 28px !important;
overflow: visible !important;
}
/* =========================================================
PRODUCT RESULTS
========================================================= */
.udg-shop-tools__results-wrap {
flex: 1 1 auto !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-tools__results-wrap > .e-con-inner {
display: flex !important;
align-items: center !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-tools__results-wrap .elementor-widget-shortcode,
.udg-shop-tools__results-wrap .elementor-widget-container,
.udg-shop-tools__results-wrap .elementor-shortcode {
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-tools__results {
display: flex;
align-items: baseline;
flex-wrap: wrap;
width: auto;
min-width: 0;
gap: 0;
color: var(–udg-ink);
font-family: “DM Sans”, sans-serif;
}
.udg-shop-tools__count {
color: var(–udg-ink);
font-size: 16px;
line-height: 1;
font-weight: 700;
letter-spacing: -0.025em;
}
.udg-shop-tools__count-label {
margin-left: 5px;
color: var(–udg-ink);
font-size: 14px;
line-height: 1.2;
font-weight: 500;
}
.udg-shop-tools__context {
display: inline-flex;
align-items: center;
margin-left: 14px;
padding-left: 14px;
border-left: 1px solid var(–udg-border);
color: rgba(36, 29, 23, 0.52);
font-size: 9px;
line-height: 1.4;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* =========================================================
FILTER + SORT OUTER RAIL
========================================================= */
.udg-shop-tools__actions {
position: relative;
z-index: 80;
flex: 0 0 auto !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
height: 52px;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var(–udg-border) !important;
background: var(–udg-paper) !important;
overflow: visible !important;
}
.udg-shop-tools__actions:has(> .e-con-inner) {
display: block !important;
}
.udg-shop-tools__actions > .e-con-inner,
.udg-shop-tools__actions:not(:has(> .e-con-inner)) {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
justify-content: flex-end !important;
width: auto !important;
max-width: 100% !important;
height: 100%;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
overflow: visible !important;
}
.udg-shop-tools__actions .elementor-widget-shortcode {
position: relative;
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.udg-shop-tools__actions .elementor-widget-container,
.udg-shop-tools__actions .elementor-shortcode {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.udg-shop-tools__actions
.elementor-widget-shortcode:has(.udg-shop-tools__filter-button) {
border-right: 1px solid var(–udg-border);
}
/* =========================================================
FILTER BUTTON
========================================================= */
.udg-shop-tools__filter-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 126px;
height: 100%;
min-height: 50px;
margin: 0 !important;
padding: 0 17px !important;
gap: 9px;
border: 0 !important;
border-radius: 0 !important;
appearance: none;
color: var(–udg-ink) !important;
background-color: transparent !important;
box-shadow: none !important;
cursor: pointer;
font-family: “DM Sans”, sans-serif;
font-size: 10px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
transition:
color 180ms ease,
background-color 180ms ease,
box-shadow 180ms ease;
}
.udg-shop-tools__filter-button svg {
flex: 0 0 auto;
color: var(–udg-deep-olive) !important;
transition: color 180ms ease;
}
/* Restrained hover rather than mustard fill */
.udg-shop-tools__filter-button:hover {
color: var(–udg-deep-olive) !important;
background-color: var(–udg-pale-olive) !important;
}
/* Approved deep-olive keyboard focus */
.udg-shop-tools__filter-button:focus-visible {
position: relative;
z-index: 3;
outline: 0 !important;
box-shadow:
inset 0 0 0 2px
var(–udg-deep-olive) !important;
}
/* Open filter state matches the olive category-button language */
.udg-shop-tools__filter-button[aria-expanded=”true”] {
color: var(–udg-paper) !important;
background-color: var(–udg-deep-olive) !important;
box-shadow: none !important;
}
.udg-shop-tools__filter-button[aria-expanded=”true”] svg {
color: var(–udg-paper) !important;
}
.udg-shop-tools__filter-badge {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-left: 1px;
border-radius: 999px;
color: var(–udg-paper);
background: var(–udg-deep-olive);
font-size: 9px;
line-height: 1;
letter-spacing: 0;
}
.udg-shop-tools__filter-button[aria-expanded=”true”]
.udg-shop-tools__filter-badge {
color: var(–udg-deep-olive);
background: var(–udg-paper);
}
/* =========================================================
CUSTOM SORT BUTTON
========================================================= */
.udg-shop-tools__sort {
position: relative;
width: 238px;
height: 100%;
min-width: 0;
overflow: visible;
}
.udg-shop-tools__sort-button {
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
min-height: 50px;
margin: 0 !important;
padding: 0 16px 0 18px !important;
gap: 16px;
border: 0 !important;
border-radius: 0 !important;
appearance: none;
color: var(–udg-ink) !important;
background-color: transparent !important;
box-shadow: none !important;
cursor: pointer;
text-align: left;
transition:
color 180ms ease,
background-color 180ms ease,
box-shadow 180ms ease;
}
.udg-shop-tools__sort-button:hover {
color: var(–udg-deep-olive) !important;
background-color: var(–udg-pale-olive) !important;
}
.udg-shop-tools__sort-button:focus-visible {
position: relative;
z-index: 3;
outline: 0 !important;
box-shadow:
inset 0 0 0 2px
var(–udg-deep-olive) !important;
}
/* Open state is deep olive, never gold */
.udg-shop-tools__sort-button[aria-expanded=”true”] {
color: var(–udg-paper) !important;
background-color: var(–udg-deep-olive) !important;
box-shadow: none !important;
}
.udg-shop-tools__sort-copy {
display: flex;
align-items: baseline;
min-width: 0;
gap: 9px;
font-family: “DM Sans”, sans-serif;
}
.udg-shop-tools__sort-label {
flex: 0 0 auto;
color: rgba(36, 29, 23, 0.52);
font-size: 9px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.udg-shop-tools__sort-separator {
display: none;
flex: 0 0 auto;
color: var(–udg-olive);
font-size: 13px;
line-height: 1;
}
.udg-shop-tools__sort-value {
display: block;
min-width: 0;
overflow: hidden;
color: currentColor;
font-size: 12px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.09em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.udg-shop-tools__sort-chevron {
flex: 0 0 auto;
color: var(–udg-deep-olive);
transition:
color 180ms ease,
transform 180ms ease;
}
.udg-shop-tools__sort-button[aria-expanded=”true”]
.udg-shop-tools__sort-label,
.udg-shop-tools__sort-button[aria-expanded=”true”]
.udg-shop-tools__sort-separator,
.udg-shop-tools__sort-button[aria-expanded=”true”]
.udg-shop-tools__sort-chevron {
color: var(–udg-paper) !important;
}
.udg-shop-tools__sort-button[aria-expanded=”true”]
.udg-shop-tools__sort-chevron {
transform: rotate(180deg);
}
/* =========================================================
SORT MENU
========================================================= */
.udg-shop-tools__sort-menu {
position: absolute;
top: calc(100% + 9px);
right: -1px;
z-index: 500;
width: 268px;
max-width: calc(100vw – 28px);
padding: 8px;
border: 1px solid var(–udg-border);
color: var(–udg-ink);
background: var(–udg-paper);
box-shadow:
0 18px 48px
rgba(36, 29, 23, 0.14);
}
.udg-shop-tools__sort-menu[hidden] {
display: none !important;
}
.udg-shop-tools__sort-menu-title {
margin: 0;
padding: 10px 12px 9px;
border-bottom: 1px solid var(–udg-border-soft);
color: rgba(36, 29, 23, 0.54);
font-family: “DM Sans”, sans-serif;
font-size: 9px;
line-height: 1.3;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.udg-shop-tools__sort-options {
display: flex;
flex-direction: column;
padding-top: 5px;
}
.udg-shop-tools__sort-option {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 45px;
padding: 10px 12px 10px 15px;
gap: 16px;
color: var(–udg-ink);
background: transparent;
text-decoration: none;
font-family: “DM Sans”, sans-serif;
font-size: 12px;
line-height: 1.35;
font-weight: 550;
transition:
color 160ms ease,
background-color 160ms ease;
}
/* Non-colour indicator required by the design system */
.udg-shop-tools__sort-option::before {
content: “”;
position: absolute;
top: 8px;
bottom: 8px;
left: 0;
width: 2px;
background: transparent;
}
.udg-shop-tools__sort-option:hover {
color: var(–udg-deep-olive);
background: var(–udg-pale-olive);
}
.udg-shop-tools__sort-option:focus-visible {
outline: 2px solid var(–udg-deep-olive);
outline-offset: -2px;
}
/* Selected option now uses olive rather than gold */
.udg-shop-tools__sort-option.is-active {
color: var(–udg-deep-olive);
background: var(–udg-pale-olive-strong);
font-weight: 700;
}
.udg-shop-tools__sort-option.is-active::before {
background: var(–udg-deep-olive);
}
.udg-shop-tools__sort-check {
flex: 0 0 auto;
color: var(–udg-deep-olive);
opacity: 0;
}
.udg-shop-tools__sort-option.is-active
.udg-shop-tools__sort-check {
opacity: 1;
}
/* =========================================================
ACTIVE FILTER CHIPS
========================================================= */
.udg-shop-tools__active-wrap {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-tools__active-wrap > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-tools__active-wrap .elementor-widget-shortcode,
.udg-shop-tools__active-wrap .elementor-widget-container,
.udg-shop-tools__active-wrap .elementor-shortcode {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-tools__active-wrap:has(.udg-shop-tools__active) {
margin-top: 12px !important;
padding-top: 12px !important;
border-top: 1px solid var(–udg-border-soft);
}
.udg-shop-tools__active {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
min-width: 0;
gap: 8px;
}
.udg-shop-tools__chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 7px 11px;
gap: 8px;
border: 1px solid rgba(81, 91, 61, 0.26);
color: var(–udg-deep-olive);
background: var(–udg-pale-olive);
text-decoration: none;
font-family: “DM Sans”, sans-serif;
font-size: 11px;
line-height: 1.25;
font-weight: 600;
transition:
border-color 180ms ease,
background-color 180ms ease;
}
.udg-shop-tools__chip .woocommerce-Price-amount {
color: inherit;
font: inherit;
}
.udg-shop-tools__chip:hover {
border-color: var(–udg-deep-olive);
background: var(–udg-pale-olive-strong);
}
.udg-shop-tools__chip:focus-visible,
.udg-shop-tools__clear:focus-visible {
outline: 2px solid var(–udg-deep-olive);
outline-offset: 3px;
}
.udg-shop-tools__clear {
display: inline-flex;
align-items: center;
min-height: 34px;
margin-left: 4px;
color: rgba(36, 29, 23, 0.64);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
font-family: “DM Sans”, sans-serif;
font-size: 11px;
line-height: 1;
font-weight: 600;
}
.udg-shop-tools__clear:hover {
color: var(–udg-deep-olive);
}
/* =========================================================
FILTER DRAWER OVERLAY
========================================================= */
.udg-shop-filter-overlay {
position: fixed;
inset: 0;
z-index: 999990;
visibility: hidden;
opacity: 0;
background: rgba(20, 16, 13, 0.44);
backdrop-filter: blur(2px);
transition:
opacity 260ms ease,
visibility 260ms ease;
}
.udg-shop-filter-overlay.is-open {
visibility: visible;
opacity: 1;
}
/* =========================================================
FILTER DRAWER
========================================================= */
.udg-shop-filter {
position: fixed;
top: 0;
right: 0;
z-index: 999991;
display: flex;
flex-direction: column;
width: min(440px, 100%);
height: 100dvh;
max-height: 100dvh;
overflow: hidden;
color: var(–udg-ink);
background: var(–udg-paper);
box-shadow:
-22px 0 60px
rgba(25, 19, 14, 0.15);
transform: translateX(104%);
visibility: hidden;
transition:
transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 320ms ease;
}
.udg-shop-filter.is-open {
visibility: visible;
transform: translateX(0);
}
body.udg-filter-open {
overflow: hidden;
}
/* =========================================================
DRAWER HEADER
========================================================= */
.udg-shop-filter__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex: 0 0 auto;
padding: 27px 30px 25px;
gap: 24px;
border-bottom: 1px solid rgba(36, 29, 23, 0.12);
}
.udg-shop-filter__eyebrow {
margin: 0 0 5px;
color: var(–udg-olive);
font-family: “DM Sans”, sans-serif;
font-size: 9px;
line-height: 1.4;
font-weight: 700;
letter-spacing: 0.16em;
}
.udg-shop-filter__header h2 {
margin: 0;
color: var(–udg-ink);
font-family: “Cormorant Garamond”, serif;
font-size: clamp(31px, 3vw, 39px);
line-height: 0.98;
font-weight: 500;
letter-spacing: -0.025em;
}
.udg-shop-filter__close {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
margin: -5px -7px 0 0;
padding: 0;
border: 1px solid transparent;
border-radius: 999px;
color: var(–udg-ink);
background: transparent;
cursor: pointer;
transition:
border-color 180ms ease,
background-color 180ms ease,
transform 180ms ease;
}
.udg-shop-filter__close:hover {
border-color: rgba(81, 91, 61, 0.3);
color: var(–udg-deep-olive);
background: var(–udg-pale-olive);
transform: rotate(4deg);
}
.udg-shop-filter__close:focus-visible {
outline: 2px solid var(–udg-deep-olive);
outline-offset: 2px;
}
/* =========================================================
DRAWER FORM
========================================================= */
.udg-shop-filter__form {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.udg-shop-filter__group {
min-width: 0;
margin: 0;
padding: 24px 30px 26px;
border: 0;
border-bottom: 1px solid rgba(36, 29, 23, 0.09);
}
.udg-shop-filter__group legend {
width: 100%;
margin: 0 0 17px;
padding: 0;
color: var(–udg-ink);
font-family: “Cormorant Garamond”, serif;
font-size: 24px;
line-height: 1;
font-weight: 600;
letter-spacing: -0.015em;
}
.udg-shop-filter__options {
display: grid;
grid-template-columns: 1fr;
width: 100%;
gap: 4px;
}
/* =========================================================
CHECKBOX OPTIONS
========================================================= */
.udg-shop-filter__check {
position: relative;
display: grid;
grid-template-columns: 22px minmax(0, 1fr) auto;
align-items: center;
min-height: 44px;
width: 100%;
gap: 11px;
color: var(–udg-ink);
cursor: pointer;
font-family: “DM Sans”, sans-serif;
font-size: 13px;
line-height: 1.3;
font-weight: 500;
}
.udg-shop-filter__check input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.udg-shop-filter__box {
position: relative;
display: inline-grid;
place-items: center;
width: 20px;
height: 20px;
border: 1px solid rgba(36, 29, 23, 0.34);
background: transparent;
transition:
border-color 160ms ease,
background-color 160ms ease;
}
.udg-shop-filter__box::after {
content: “”;
width: 9px;
height: 5px;
margin-top: -2px;
border-left: 1.5px solid var(–udg-paper);
border-bottom: 1.5px solid var(–udg-paper);
opacity: 0;
transform: rotate(-45deg) scale(0.7);
transition:
opacity 160ms ease,
transform 160ms ease;
}
.udg-shop-filter__check input:checked
+ .udg-shop-filter__box {
border-color: var(–udg-deep-olive);
background: var(–udg-deep-olive);
}
.udg-shop-filter__check input:checked
+ .udg-shop-filter__box::after {
opacity: 1;
transform: rotate(-45deg) scale(1);
}
.udg-shop-filter__check input:focus-visible
+ .udg-shop-filter__box {
outline: 2px solid var(–udg-deep-olive);
outline-offset: 3px;
}
.udg-shop-filter__term-count {
color: rgba(36, 29, 23, 0.48);
font-size: 11px;
}
/* =========================================================
PRICE FIELDS
========================================================= */
.udg-shop-filter__price-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
gap: 12px;
}
.udg-shop-filter__price-grid > label {
display: flex;
flex-direction: column;
min-width: 0;
gap: 8px;
color: rgba(36, 29, 23, 0.62);
font-family: “DM Sans”, sans-serif;
font-size: 10px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.udg-shop-filter__money-field {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
min-height: 48px;
border: 1px solid rgba(36, 29, 23, 0.18);
background: var(–udg-paper);
transition:
border-color 180ms ease,
box-shadow 180ms ease;
}
.udg-shop-filter__money-field:focus-within {
border-color: var(–udg-deep-olive);
box-shadow:
0 0 0 2px
rgba(81, 91, 61, 0.13);
}
.udg-shop-filter__money-field > span {
padding-left: 13px;
color: rgba(36, 29, 23, 0.58);
font-family: “DM Sans”, sans-serif;
font-size: 11px;
line-height: 1;
font-weight: 600;
}
.udg-shop-filter__money-field input {
width: 100%;
min-width: 0;
height: 46px;
margin: 0;
padding: 0 12px 0 7px;
border: 0;
outline: 0;
border-radius: 0;
color: var(–udg-ink);
background: transparent;
box-shadow: none;
font-family: “DM Sans”, sans-serif;
font-size: 14px;
line-height: 1;
font-weight: 600;
appearance: textfield;
}
.udg-shop-filter__money-field
input::-webkit-inner-spin-button,
.udg-shop-filter__money-field
input::-webkit-outer-spin-button {
margin: 0;
appearance: none;
}
/* =========================================================
DRAWER FOOTER
========================================================= */
.udg-shop-filter__footer {
position: sticky;
bottom: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
margin-top: auto;
padding: 20px 30px;
gap: 19px;
border-top: 1px solid rgba(36, 29, 23, 0.12);
background: rgba(255, 253, 248, 0.97);
backdrop-filter: blur(10px);
}
.udg-shop-filter__reset {
color: rgba(36, 29, 23, 0.68);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
font-family: “DM Sans”, sans-serif;
font-size: 12px;
line-height: 1;
font-weight: 600;
}
.udg-shop-filter__reset:hover {
color: var(–udg-deep-olive);
}
.udg-shop-filter__apply {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 52px;
padding: 0 20px;
border: 1px solid var(–udg-deep-olive);
border-radius: 2px;
color: var(–udg-paper);
background: var(–udg-deep-olive);
cursor: pointer;
font-family: “DM Sans”, sans-serif;
font-size: 11px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
transition:
background-color 180ms ease,
border-color 180ms ease,
transform 180ms ease;
}
.udg-shop-filter__apply:hover {
border-color: var(–udg-ink);
background: var(–udg-ink);
transform: translateY(-1px);
}
.udg-shop-filter__apply:focus-visible,
.udg-shop-filter__reset:focus-visible {
outline: 2px solid var(–udg-deep-olive);
outline-offset: 3px;
}
/* =========================================================
ELEMENTOR EDITOR PROTECTION
========================================================= */
.elementor-editor-active .udg-shop-filter,
.elementor-editor-active .udg-shop-filter-overlay {
display: none !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.udg-shop-tools__inner > .e-con-inner,
.udg-shop-tools__inner:not(:has(> .e-con-inner)) {
padding-inline: 28px !important;
}
.udg-shop-tools__bar > .e-con-inner,
.udg-shop-tools__bar:not(:has(> .e-con-inner)) {
gap: 20px !important;
}
.udg-shop-tools__filter-button {
width: 116px;
}
.udg-shop-tools__sort {
width: 215px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.udg-shop-tools__inner > .e-con-inner,
.udg-shop-tools__inner:not(:has(> .e-con-inner)) {
padding: 14px 18px 16px !important;
}
.udg-shop-tools__bar > .e-con-inner,
.udg-shop-tools__bar:not(:has(> .e-con-inner)) {
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
min-height: 0;
gap: 14px !important;
}
.udg-shop-tools__results-wrap {
flex: 0 0 auto !important;
width: 100% !important;
}
.udg-shop-tools__actions {
width: 100% !important;
height: 54px;
}
.udg-shop-tools__actions > .e-con-inner,
.udg-shop-tools__actions:not(:has(> .e-con-inner)) {
display: grid !important;
grid-template-columns:
minmax(0, 0.94fr)
minmax(0, 1.06fr);
width: 100% !important;
}
.udg-shop-tools__actions .elementor-widget-shortcode {
width: 100% !important;
max-width: 100% !important;
}
.udg-shop-tools__filter-button,
.udg-shop-tools__sort {
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 52px;
}
.udg-shop-tools__filter-button {
padding-inline: 12px !important;
}
.udg-shop-tools__sort-button {
padding: 0 12px 0 14px !important;
gap: 9px;
}
.udg-shop-tools__sort-copy {
gap: 6px;
}
/* SORT remains visible on mobile */
.udg-shop-tools__sort-separator {
display: inline-block;
}
.udg-shop-tools__sort-label {
color: rgba(36, 29, 23, 0.55);
font-size: 8px;
letter-spacing: 0.12em;
}
.udg-shop-tools__sort-value {
font-size: 10px;
letter-spacing: 0.07em;
}
.udg-shop-tools__sort-button[aria-expanded=”true”]
.udg-shop-tools__sort-label {
color: var(–udg-paper) !important;
}
.udg-shop-tools__sort-menu {
top: calc(100% + 8px);
right: 0;
width: 260px;
max-width: calc(100vw – 36px);
}
.udg-shop-tools__active-wrap:has(.udg-shop-tools__active) {
margin-top: 12px !important;
padding-top: 11px !important;
}
.udg-shop-tools__active {
flex-wrap: nowrap;
padding: 3px 2px 8px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
scroll-snap-type: inline proximity;
}
.udg-shop-tools__chip,
.udg-shop-tools__clear {
flex: 0 0 auto;
scroll-snap-align: start;
}
.udg-shop-filter {
width: 100%;
}
.udg-shop-filter__header {
padding: 23px 20px 21px;
}
.udg-shop-filter__group {
padding: 22px 20px 24px;
}
.udg-shop-filter__footer {
padding:
16px
20px
max(16px, env(safe-area-inset-bottom));
}
}
/* =========================================================
NARROW MOBILE
========================================================= */
@media (max-width: 380px) {
.udg-shop-tools__inner > .e-con-inner,
.udg-shop-tools__inner:not(:has(> .e-con-inner)) {
padding-inline: 14px !important;
}
.udg-shop-tools__context {
margin-left: 9px;
padding-left: 9px;
font-size: 8px;
}
.udg-shop-tools__filter-button {
gap: 5px;
padding-inline: 8px !important;
font-size: 8px;
}
.udg-shop-tools__sort-button {
padding-inline: 8px !important;
gap: 5px;
}
/* Keep both SORT and FEATURED visible at 320px */
.udg-shop-tools__sort-copy {
gap: 4px;
}
.udg-shop-tools__sort-label {
display: inline-block;
font-size: 7px;
letter-spacing: 0.08em;
}
.udg-shop-tools__sort-separator {
display: inline-block;
font-size: 10px;
}
.udg-shop-tools__sort-value {
font-size: 9px;
letter-spacing: 0.04em;
}
.udg-shop-tools__sort-chevron {
width: 15px;
height: 15px;
}
.udg-shop-tools__sort-menu {
right: 0;
width: calc(100vw – 28px);
max-width: calc(100vw – 28px);
}
.udg-shop-filter__price-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.udg-shop-tools__filter-button,
.udg-shop-tools__sort-button,
.udg-shop-tools__sort-chevron,
.udg-shop-tools__sort-option,
.udg-shop-tools__chip,
.udg-shop-filter,
.udg-shop-filter-overlay,
.udg-shop-filter__close,
.udg-shop-filter__apply,
.udg-shop-filter__box,
.udg-shop-filter__box::after {
transition-duration: 0.01ms !important;
}
}
/* =========================================================
UDGOON COLLECTION
SHOP 03 – PRODUCT CATALOGUE
REFINED FASHION PRODUCT CARDS
========================================================= */
.udg-shop-catalogue {
–udg-paper: #fffdf8;
–udg-canvas: #f5f1e8;
–udg-ink: #241d17;
–udg-muted: rgba(36, 29, 23, 0.62);
–udg-muted-light: rgba(36, 29, 23, 0.48);
–udg-olive: #737b58;
–udg-deep-olive: #515b3d;
–udg-pale-olive: rgba(115, 123, 88, 0.10);
–udg-border: #e5ded2;
–udg-border-soft: rgba(36, 29, 23, 0.09);
position: relative;
width: 100%;
max-width: 100%;
color: var(–udg-ink);
background: var(–udg-canvas);
overflow: hidden;
}
.udg-shop-catalogue,
.udg-shop-catalogue *,
#udg-shop-product-loop,
#udg-shop-product-loop * {
box-sizing: border-box;
}
/* =========================================================
INNER CONTAINER
========================================================= */
.udg-shop-catalogue__inner {
width: 100% !important;
max-width: 1440px !important;
margin-inline: auto !important;
}
/* =========================================================
LOOP GRID
========================================================= */
#udg-shop-product-loop {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
#udg-shop-product-loop .elementor-loop-container {
align-items: start;
}
#udg-shop-product-loop .e-loop-item {
min-width: 0;
height: 100%;
margin: 0;
}
#udg-shop-product-loop .e-loop-item > .elementor-element {
height: 100%;
}
/* =========================================================
PRODUCT CARD ROOT
========================================================= */
#udg-shop-product-loop .udg-product-card {
position: relative;
display: flex !important;
flex-direction: column !important;
width: 100%;
min-width: 0;
height: 100%;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
color: var(–udg-ink);
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* =========================================================
PRODUCT MEDIA
========================================================= */
#udg-shop-product-loop .udg-product-card__media {
position: relative;
display: block !important;
width: 100%;
min-width: 0;
aspect-ratio: 4 / 5;
margin: 0 !important;
padding: 0 !important;
background: #ebe8e1;
border-radius: 2px;
overflow: hidden !important;
isolation: isolate;
}
/* =========================================================
PRODUCT IMAGE
========================================================= */
#udg-shop-product-loop .udg-product-card__image {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
#udg-shop-product-loop
.udg-product-card__image
.elementor-widget-container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#udg-shop-product-loop
.udg-product-card__image
a {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
overflow: hidden;
}
#udg-shop-product-loop
.udg-product-card__image
img {
display: block;
width: 100% !important;
max-width: none !important;
height: 100% !important;
margin: 0;
padding: 0;
object-fit: cover;
object-position: center 43%;
border: 0;
border-radius: 0;
transform: scale(1);
transform-origin: center center;
transition:
transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
filter 260ms ease;
will-change: transform;
}
/* =========================================================
PRODUCT DETAILS
========================================================= */
#udg-shop-product-loop .udg-product-card__details {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
flex: 1 1 auto;
width: 100%;
min-width: 0;
margin: 0 !important;
padding: 12px 1px 0 !important;
gap: 4px !important;
}
/* =========================================================
PRODUCT TITLE
========================================================= */
#udg-shop-product-loop .udg-product-card__title {
width: 100%;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
#udg-shop-product-loop
.udg-product-card__title
.elementor-widget-container {
width: 100%;
margin: 0;
padding: 0;
}
#udg-shop-product-loop
.udg-product-card__title
.elementor-heading-title,
#udg-shop-product-loop
.udg-product-card__title
.woocommerce-loop-product__title,
#udg-shop-product-loop
.udg-product-card__title
h1,
#udg-shop-product-loop
.udg-product-card__title
h2,
#udg-shop-product-loop
.udg-product-card__title
h3,
#udg-shop-product-loop
.udg-product-card__title
h4 {
display: -webkit-box;
width: 100%;
min-height: 2.7em;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
color: var(–udg-ink) !important;
font-family: “DM Sans”, sans-serif !important;
font-size: clamp(15px, 1.05vw, 16px) !important;
line-height: 1.35 !important;
font-weight: 600 !important;
letter-spacing: -0.012em !important;
text-wrap: pretty;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
#udg-shop-product-loop
.udg-product-card__title
a {
color: inherit !important;
text-decoration: none !important;
transition: color 180ms ease;
}
#udg-shop-product-loop
.udg-product-card__title
a:hover {
color: var(–udg-deep-olive) !important;
}
#udg-shop-product-loop
.udg-product-card__title
a:focus-visible {
outline: 2px solid var(–udg-deep-olive);
outline-offset: 3px;
}
/* =========================================================
PRODUCT PRICE
========================================================= */
#udg-shop-product-loop .udg-product-card__price {
width: 100%;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
#udg-shop-product-loop
.udg-product-card__price
.elementor-widget-container {
margin: 0;
padding: 0;
}
#udg-shop-product-loop
.udg-product-card__price,
#udg-shop-product-loop
.udg-product-card__price
.price,
#udg-shop-product-loop
.udg-product-card__price
.woocommerce-Price-amount,
#udg-shop-product-loop
.udg-product-card__price
.woocommerce-Price-currencySymbol {
color: var(–udg-muted) !important;
font-family: “DM Sans”, sans-serif !important;
font-size: 13px !important;
line-height: 1.4 !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
}
#udg-shop-product-loop
.udg-product-card__price
.price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
margin: 0;
gap: 6px;
}
#udg-shop-product-loop
.udg-product-card__price
del {
color: rgba(36, 29, 23, 0.4) !important;
opacity: 1 !important;
text-decoration-thickness: 1px;
}
#udg-shop-product-loop
.udg-product-card__price
del
.woocommerce-Price-amount {
color: inherit !important;
}
#udg-shop-product-loop
.udg-product-card__price
ins {
color: var(–udg-deep-olive) !important;
background: transparent !important;
text-decoration: none !important;
}
#udg-shop-product-loop
.udg-product-card__price
ins
.woocommerce-Price-amount {
color: inherit !important;
font-weight: 700 !important;
}
/* =========================================================
FUTURE COLOUR AVAILABILITY TEXT
========================================================= */
#udg-shop-product-loop
.udg-product-card__colours {
width: 100%;
margin: 1px 0 0 !important;
padding: 0 !important;
color: var(–udg-muted-light) !important;
font-family: “DM Sans”, sans-serif !important;
font-size: 11px !important;
line-height: 1.4 !important;
font-weight: 500 !important;
}
/* =========================================================
DESKTOP CARD INTERACTIONS
========================================================= */
@media (hover: hover) and (pointer: fine) {
#udg-shop-product-loop
.udg-product-card:hover
.udg-product-card__image
img {
transform: scale(1.018);
}
#udg-shop-product-loop
.udg-product-card:hover
.udg-product-card__title
a {
color: var(–udg-deep-olive) !important;
}
}
/* =========================================================
PAGINATION
========================================================= */
#udg-shop-product-loop .elementor-pagination {
display: flex !important;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100%;
margin: 60px 0 0 !important;
padding: 0;
gap: 6px;
font-family: “DM Sans”, sans-serif;
}
#udg-shop-product-loop
.elementor-pagination
.page-numbers {
display: inline-grid;
place-items: center;
min-width: 40px;
height: 40px;
margin: 0 !important;
padding: 0 9px;
border: 1px solid transparent;
border-radius: 2px;
color: var(–udg-ink) !important;
background: transparent;
text-decoration: none !important;
font-size: 12px;
line-height: 1;
font-weight: 700;
transition:
color 180ms ease,
border-color 180ms ease,
background-color 180ms ease;
}
#udg-shop-product-loop
.elementor-pagination
a.page-numbers:hover {
color: var(–udg-deep-olive) !important;
border-color: rgba(81, 91, 61, 0.3);
background: var(–udg-pale-olive);
}
#udg-shop-product-loop
.elementor-pagination
.page-numbers.current {
color: var(–udg-paper) !important;
border-color: var(–udg-deep-olive);
background: var(–udg-deep-olive);
}
#udg-shop-product-loop
.elementor-pagination
a.page-numbers:focus-visible {
outline: 2px solid var(–udg-deep-olive);
outline-offset: 3px;
}
/* =========================================================
NOTHING FOUND
========================================================= */
#udg-shop-product-loop
.e-loop-nothing-found-message,
#udg-shop-product-loop
.elementor-loop-container:empty::before {
display: block;
width: 100%;
margin: 0;
padding: 68px 24px;
border-top: 1px solid var(–udg-border);
border-bottom: 1px solid var(–udg-border);
color: var(–udg-muted);
text-align: center;
font-family: “DM Sans”, sans-serif;
font-size: 14px;
line-height: 1.6;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
#udg-shop-product-loop
.udg-product-card__details {
padding-top: 11px !important;
gap: 4px !important;
}
#udg-shop-product-loop
.udg-product-card__title
.elementor-heading-title,
#udg-shop-product-loop
.udg-product-card__title
.woocommerce-loop-product__title,
#udg-shop-product-loop
.udg-product-card__title
h1,
#udg-shop-product-loop
.udg-product-card__title
h2,
#udg-shop-product-loop
.udg-product-card__title
h3,
#udg-shop-product-loop
.udg-product-card__title
h4 {
font-size: 15px !important;
line-height: 1.34 !important;
}
#udg-shop-product-loop
.udg-product-card__price,
#udg-shop-product-loop
.udg-product-card__price
.price,
#udg-shop-product-loop
.udg-product-card__price
.woocommerce-Price-amount,
#udg-shop-product-loop
.udg-product-card__price
.woocommerce-Price-currencySymbol {
font-size: 12.5px !important;
}
#udg-shop-product-loop
.elementor-pagination {
margin-top: 52px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.udg-shop-catalogue__inner {
padding-top: 28px !important;
padding-right: 14px !important;
padding-bottom: 46px !important;
padding-left: 14px !important;
}
#udg-shop-product-loop
.udg-product-card__details {
padding: 10px 1px 0 !important;
gap: 3px !important;
}
#udg-shop-product-loop
.udg-product-card__title
.elementor-heading-title,
#udg-shop-product-loop
.udg-product-card__title
.woocommerce-loop-product__title,
#udg-shop-product-loop
.udg-product-card__title
h1,
#udg-shop-product-loop
.udg-product-card__title
h2,
#udg-shop-product-loop
.udg-product-card__title
h3,
#udg-shop-product-loop
.udg-product-card__title
h4 {
min-height: 2.72em;
font-size: 14px !important;
line-height: 1.36 !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
}
#udg-shop-product-loop
.udg-product-card__price,
#udg-shop-product-loop
.udg-product-card__price
.price,
#udg-shop-product-loop
.udg-product-card__price
.woocommerce-Price-amount,
#udg-shop-product-loop
.udg-product-card__price
.woocommerce-Price-currencySymbol {
font-size: 12px !important;
line-height: 1.4 !important;
}
#udg-shop-product-loop
.udg-product-card__colours {
font-size: 10.5px !important;
}
#udg-shop-product-loop
.elementor-pagination {
margin-top: 42px !important;
gap: 5px;
}
#udg-shop-product-loop
.elementor-pagination
.page-numbers {
min-width: 40px;
height: 40px;
padding-inline: 8px;
font-size: 11px;
}
}
/* =========================================================
NARROW MOBILE
========================================================= */
@media (max-width: 380px) {
.udg-shop-catalogue__inner {
padding-right: 12px !important;
padding-left: 12px !important;
}
#udg-shop-product-loop
.udg-product-card__details {
padding-top: 9px !important;
}
#udg-shop-product-loop
.udg-product-card__title
.elementor-heading-title,
#udg-shop-product-loop
.udg-product-card__title
.woocommerce-loop-product__title,
#udg-shop-product-loop
.udg-product-card__title
h1,
#udg-shop-product-loop
.udg-product-card__title
h2,
#udg-shop-product-loop
.udg-product-card__title
h3,
#udg-shop-product-loop
.udg-product-card__title
h4 {
font-size: 13px !important;
line-height: 1.36 !important;
}
#udg-shop-product-loop
.udg-product-card__price,
#udg-shop-product-loop
.udg-product-card__price
.price,
#udg-shop-product-loop
.udg-product-card__price
.woocommerce-Price-amount,
#udg-shop-product-loop
.udg-product-card__price
.woocommerce-Price-currencySymbol {
font-size: 11px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#udg-shop-product-loop
.udg-product-card__image
img,
#udg-shop-product-loop
.udg-product-card__title
a,
#udg-shop-product-loop
.elementor-pagination
.page-numbers {
transition-duration: 0.01ms !important;
}
}
THE UDGOON EDIT
Occasion wear,
shaped for presence.
Flowing free-size silhouettes, rich textures and statement finishes for celebrations, entrances and every moment worth dressing for.
/* =========================================================
UDGOON COLLECTION
SHOP 04 — EDITORIAL FEATURE
FINAL EDITABLE ELEMENTOR SYSTEM
========================================================= */
.udg-shop-editorial {
–udg-editorial-paper: #fffdf8;
–udg-editorial-canvas: #f5f1e8;
–udg-editorial-ink: #241d17;
–udg-editorial-olive: #737b58;
–udg-editorial-deep: #515b3d;
–udg-editorial-dark: #211d18;
–udg-editorial-dark-soft: #303326;
–udg-editorial-muted: rgba(255, 253, 248, 0.72);
position: relative;
width: 100%;
max-width: 100%;
margin: 0 !important;
padding:
84px
clamp(20px, 4vw, 64px)
92px !important;
color: var(–udg-editorial-paper);
background: var(–udg-editorial-canvas);
overflow: hidden;
}
.udg-shop-editorial,
.udg-shop-editorial * {
box-sizing: border-box;
}
.udg-shop-editorial > .e-con-inner {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
MAIN EDITORIAL PANEL
========================================================= */
.udg-shop-editorial__inner {
width: 100% !important;
max-width: 1440px !important;
min-height: 620px;
margin-inline: auto !important;
padding: 0 !important;
border: 1px solid rgba(36, 29, 23, 0.08);
border-radius: 2px;
background: var(–udg-editorial-dark);
overflow: hidden !important;
isolation: isolate;
}
.udg-shop-editorial__inner > .e-con-inner,
.udg-shop-editorial__inner:not(:has(> .e-con-inner)) {
display: grid !important;
grid-template-columns:
minmax(0, 1.32fr)
minmax(390px, 0.92fr);
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
min-height: 620px;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
/* =========================================================
MEDIA PANEL
========================================================= */
.udg-shop-editorial__media {
position: relative;
width: 100% !important;
min-width: 0;
min-height: 620px;
margin: 0 !important;
padding: 0 !important;
background: #ded8ce;
overflow: hidden !important;
isolation: isolate;
}
.udg-shop-editorial__media > .e-con-inner,
.udg-shop-editorial__media:not(:has(> .e-con-inner)) {
display: block !important;
width: 100% !important;
height: 100%;
min-height: 620px;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-editorial__media::after {
content: “”;
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
90deg,
transparent 56%,
rgba(33, 29, 24, 0.16) 100%
),
linear-gradient(
0deg,
rgba(33, 29, 24, 0.10),
transparent 34%
);
}
/* =========================================================
EDITORIAL IMAGE
========================================================= */
.udg-shop-editorial__image {
width: 100% !important;
height: 100% !important;
min-height: 620px;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-editorial__image .elementor-widget-container,
.udg-shop-editorial__image a {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
margin: 0;
padding: 0;
overflow: hidden;
}
.udg-shop-editorial__image img {
display: block;
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 620px;
margin: 0;
padding: 0;
object-fit: cover;
object-position: center 28%;
border: 0;
border-radius: 0;
transform: scale(1);
transform-origin: center center;
transition:
transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
filter 400ms ease;
will-change: transform;
}
/* =========================================================
CONTENT PANEL
========================================================= */
.udg-shop-editorial__content {
position: relative;
width: 100% !important;
min-width: 0;
min-height: 620px;
margin: 0 !important;
padding: 0 !important;
color: var(–udg-editorial-paper);
background:
radial-gradient(
circle at 92% 8%,
rgba(115, 123, 88, 0.30),
transparent 39%
),
linear-gradient(
145deg,
var(–udg-editorial-dark) 0%,
var(–udg-editorial-dark-soft) 61%,
#3f4632 100%
);
overflow: hidden !important;
isolation: isolate;
}
.udg-shop-editorial__content > .e-con-inner,
.udg-shop-editorial__content:not(:has(> .e-con-inner)) {
position: relative;
z-index: 2;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
min-height: 620px;
margin: 0 !important;
padding:
clamp(52px, 5vw, 82px)
clamp(40px, 4vw, 70px) !important;
gap: 0 !important;
}
.udg-shop-editorial__content::before {
content: “”;
position: absolute;
top: 42px;
right: -76px;
z-index: 1;
width: 226px;
height: 226px;
border: 1px solid rgba(255, 253, 248, 0.08);
border-radius: 50%;
pointer-events: none;
}
.udg-shop-editorial__content::after {
content: “”;
position: absolute;
top: 88px;
right: -30px;
z-index: 1;
width: 132px;
height: 132px;
border: 1px solid rgba(255, 253, 248, 0.07);
border-radius: 50%;
pointer-events: none;
}
/* =========================================================
EDITABLE COPY CONTAINER
========================================================= */
.udg-shop-editorial__copy {
position: relative;
z-index: 3;
width: 100% !important;
max-width: 520px !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-editorial__copy > .e-con-inner,
.udg-shop-editorial__copy:not(:has(> .e-con-inner)) {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 520px !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
/* =========================================================
EYEBROW ROW
========================================================= */
.udg-shop-editorial__eyebrow-row {
width: auto !important;
max-width: 100% !important;
margin: 0 0 25px !important;
padding: 0 !important;
}
.udg-shop-editorial__eyebrow-row > .e-con-inner,
.udg-shop-editorial__eyebrow-row:not(:has(> .e-con-inner)) {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 13px !important;
}
/* =========================================================
EYEBROW DIVIDER
========================================================= */
.udg-shop-editorial__eyebrow-line {
flex: 0 0 38px !important;
width: 38px !important;
max-width: 38px !important;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-editorial__eyebrow-line
.elementor-widget-container,
.udg-shop-editorial__eyebrow-line
.elementor-divider {
width: 38px;
margin: 0;
padding: 0;
}
.udg-shop-editorial__eyebrow-line
.elementor-divider-separator {
display: block;
width: 38px !important;
min-width: 38px;
margin: 0 !important;
border-block-start:
1px solid
var(–udg-editorial-olive) !important;
}
/* =========================================================
EYEBROW LABEL
========================================================= */
.udg-shop-editorial__eyebrow {
flex: 0 1 auto !important;
width: auto !important;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-editorial__eyebrow
.elementor-widget-container {
margin: 0;
padding: 0;
}
.udg-shop-editorial__eyebrow
.elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: rgba(255, 253, 248, 0.76) !important;
font-family: “DM Sans”, sans-serif !important;
font-size: 10px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
letter-spacing: 0.20em !important;
text-transform: uppercase !important;
white-space: nowrap;
}
/* =========================================================
PRIMARY HEADING
========================================================= */
.udg-shop-editorial__heading-primary {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-editorial__heading-primary
.elementor-widget-container {
margin: 0;
padding: 0;
}
.udg-shop-editorial__heading-primary
.elementor-heading-title {
width: 100%;
margin: 0 !important;
padding: 0 !important;
color: var(–udg-editorial-paper) !important;
font-family: “Cormorant Garamond”, serif !important;
font-size: clamp(54px, 5vw, 80px) !important;
line-height: 0.91 !important;
font-weight: 500 !important;
font-style: normal !important;
letter-spacing: -0.045em !important;
text-wrap: balance;
}
/* =========================================================
ACCENT HEADING
========================================================= */
.udg-shop-editorial__heading-accent {
width: 100% !important;
margin: 7px 0 0 !important;
padding: 0 !important;
}
.udg-shop-editorial__heading-accent
.elementor-widget-container {
margin: 0;
padding: 0;
}
.udg-shop-editorial__heading-accent
.elementor-heading-title {
width: 100%;
margin: 0 !important;
padding: 0 !important;
color: rgba(255, 253, 248, 0.88) !important;
font-family: “Cormorant Garamond”, serif !important;
font-size: clamp(54px, 5vw, 80px) !important;
line-height: 0.91 !important;
font-weight: 400 !important;
font-style: italic !important;
letter-spacing: -0.045em !important;
text-wrap: balance;
}
/* =========================================================
DESCRIPTION
========================================================= */
.udg-shop-editorial__description {
width: 100% !important;
max-width: 440px !important;
margin: 30px 0 0 !important;
padding: 0 !important;
}
.udg-shop-editorial__description
.elementor-widget-container {
margin: 0;
padding: 0;
}
.udg-shop-editorial__description,
.udg-shop-editorial__description p {
color: var(–udg-editorial-muted) !important;
font-family: “DM Sans”, sans-serif !important;
font-size: 15px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
.udg-shop-editorial__description p {
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-editorial__description p + p {
margin-top: 12px !important;
}
/* =========================================================
FINAL EDITABLE CTA
========================================================= */
.udg-shop-editorial__cta-widget {
display: flex !important;
align-self: flex-start !important;
flex: 0 0 auto !important;
width: auto !important;
max-width: 100% !important;
margin: 36px 0 0 !important;
padding: 0 !important;
}
.udg-shop-editorial__cta-widget
.elementor-widget-container {
display: flex;
width: auto !important;
max-width: 100%;
margin: 0;
padding: 0;
}
.udg-shop-editorial__cta-widget
.elementor-button-wrapper {
display: inline-flex !important;
width: auto !important;
max-width: 100%;
}
.udg-shop-editorial__cta-widget
.elementor-button {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
min-width: 292px;
max-width: 100%;
min-height: 58px;
margin: 0;
padding:
0
66px
0
24px !important;
border:
1px solid
rgba(255, 253, 248, 0.28) !important;
border-radius: 999px !important;
color: var(–udg-editorial-ink) !important;
background: var(–udg-editorial-paper) !important;
box-shadow: none !important;
text-decoration: none !important;
font-family: “DM Sans”, sans-serif !important;
font-size: 11px !important;
line-height: 1 !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-align: center;
text-transform: uppercase !important;
transition:
color 220ms ease,
background-color 220ms ease,
border-color 220ms ease,
transform 220ms ease !important;
}
/* Hide Elementor’s optional icon so the design remains consistent. */
.udg-shop-editorial__cta-widget
.elementor-button-icon {
display: none !important;
}
/* Reliable circular arrow chamber, even when no icon is selected. */
.udg-shop-editorial__cta-widget
.elementor-button::after {
content: “→”;
position: absolute;
top: 50%;
right: 7px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(–udg-editorial-paper);
background: var(–udg-editorial-deep);
font-family: Arial, sans-serif;
font-size: 19px;
line-height: 1;
font-weight: 400;
transform:
translateY(-50%)
translateX(0);
transition:
color 220ms ease,
background-color 220ms ease,
transform 260ms ease;
}
.udg-shop-editorial__cta-widget
.elementor-button-content-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: auto;
gap: 0;
}
.udg-shop-editorial__cta-widget
.elementor-button-text {
white-space: nowrap;
}
.udg-shop-editorial__cta-widget
.elementor-button:hover {
color: var(–udg-editorial-paper) !important;
background: transparent !important;
border-color:
rgba(255, 253, 248, 0.72) !important;
transform: translateY(-2px);
}
.udg-shop-editorial__cta-widget
.elementor-button:hover::after {
color: var(–udg-editorial-deep);
background: var(–udg-editorial-paper);
transform:
translateY(-50%)
translateX(3px);
}
.udg-shop-editorial__cta-widget
.elementor-button:focus-visible {
outline:
2px solid
var(–udg-editorial-paper) !important;
outline-offset: 4px;
}
/* =========================================================
DESKTOP IMAGE INTERACTION
========================================================= */
@media (hover: hover) and (pointer: fine) {
.udg-shop-editorial__inner:hover
.udg-shop-editorial__image img {
transform: scale(1.025);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.udg-shop-editorial {
padding:
64px
28px
72px !important;
}
.udg-shop-editorial__inner,
.udg-shop-editorial__inner
> .e-con-inner,
.udg-shop-editorial__inner:not(
:has(> .e-con-inner)
) {
min-height: 540px;
}
.udg-shop-editorial__inner
> .e-con-inner,
.udg-shop-editorial__inner:not(
:has(> .e-con-inner)
) {
grid-template-columns:
minmax(0, 1fr)
minmax(340px, 0.92fr);
}
.udg-shop-editorial__media,
.udg-shop-editorial__media
> .e-con-inner,
.udg-shop-editorial__media:not(
:has(> .e-con-inner)
),
.udg-shop-editorial__image,
.udg-shop-editorial__image img {
min-height: 540px;
}
.udg-shop-editorial__content,
.udg-shop-editorial__content
> .e-con-inner,
.udg-shop-editorial__content:not(
:has(> .e-con-inner)
) {
min-height: 540px;
}
.udg-shop-editorial__content
> .e-con-inner,
.udg-shop-editorial__content:not(
:has(> .e-con-inner)
) {
padding:
48px
38px !important;
}
.udg-shop-editorial__eyebrow-row {
margin-bottom: 21px !important;
}
.udg-shop-editorial__heading-primary
.elementor-heading-title,
.udg-shop-editorial__heading-accent
.elementor-heading-title {
font-size:
clamp(46px, 6vw, 62px) !important;
letter-spacing: -0.038em !important;
}
.udg-shop-editorial__description {
margin-top: 25px !important;
}
.udg-shop-editorial__description,
.udg-shop-editorial__description p {
font-size: 14px !important;
line-height: 1.68 !important;
}
.udg-shop-editorial__cta-widget {
margin-top: 30px !important;
}
.udg-shop-editorial__cta-widget
.elementor-button {
min-width: 280px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.udg-shop-editorial {
padding:
48px
14px
58px !important;
}
.udg-shop-editorial__inner {
min-height: 0;
}
.udg-shop-editorial__inner
> .e-con-inner,
.udg-shop-editorial__inner:not(
:has(> .e-con-inner)
) {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-height: 0;
}
/* Shorter than the previous 4:5 crop. */
.udg-shop-editorial__media,
.udg-shop-editorial__media
> .e-con-inner,
.udg-shop-editorial__media:not(
:has(> .e-con-inner)
) {
width: 100% !important;
min-height: 0;
aspect-ratio: 8 / 9;
}
.udg-shop-editorial__image,
.udg-shop-editorial__image
.elementor-widget-container,
.udg-shop-editorial__image a {
width: 100%;
height: 100%;
min-height: 0;
}
.udg-shop-editorial__image img {
width: 100% !important;
height: 100% !important;
min-height: 0;
object-position: center 24%;
}
.udg-shop-editorial__media::after {
background:
linear-gradient(
0deg,
rgba(33, 29, 24, 0.15),
transparent 32%
);
}
.udg-shop-editorial__content {
width: 100% !important;
min-height: 0;
}
.udg-shop-editorial__content
> .e-con-inner,
.udg-shop-editorial__content:not(
:has(> .e-con-inner)
) {
min-height: 0;
padding:
38px
25px
42px !important;
}
.udg-shop-editorial__content::before {
top: 20px;
right: -110px;
}
.udg-shop-editorial__content::after {
top: 59px;
right: -64px;
}
.udg-shop-editorial__copy,
.udg-shop-editorial__copy
> .e-con-inner,
.udg-shop-editorial__copy:not(
:has(> .e-con-inner)
) {
width: 100% !important;
max-width: 100% !important;
}
.udg-shop-editorial__eyebrow-row {
margin-bottom: 19px !important;
}
.udg-shop-editorial__eyebrow-line,
.udg-shop-editorial__eyebrow-line
.elementor-widget-container,
.udg-shop-editorial__eyebrow-line
.elementor-divider,
.udg-shop-editorial__eyebrow-line
.elementor-divider-separator {
width: 30px !important;
min-width: 30px;
max-width: 30px !important;
}
.udg-shop-editorial__eyebrow
.elementor-heading-title {
font-size: 9px !important;
}
.udg-shop-editorial__heading-primary
.elementor-heading-title,
.udg-shop-editorial__heading-accent
.elementor-heading-title {
font-size:
clamp(42px, 12.4vw, 56px) !important;
line-height: 0.92 !important;
letter-spacing: -0.038em !important;
}
.udg-shop-editorial__heading-accent {
margin-top: 6px !important;
}
.udg-shop-editorial__description {
max-width: 100% !important;
margin-top: 24px !important;
}
.udg-shop-editorial__description,
.udg-shop-editorial__description p {
font-size: 13px !important;
line-height: 1.68 !important;
}
.udg-shop-editorial__cta-widget {
margin-top: 28px !important;
}
.udg-shop-editorial__cta-widget
.elementor-button {
min-width: 278px;
min-height: 56px;
padding:
0
63px
0
21px !important;
font-size: 10px !important;
}
.udg-shop-editorial__cta-widget
.elementor-button::after {
width: 42px;
height: 42px;
}
}
/* =========================================================
NARROW MOBILE
========================================================= */
@media (max-width: 480px) {
.udg-shop-editorial__cta-widget,
.udg-shop-editorial__cta-widget
.elementor-widget-container,
.udg-shop-editorial__cta-widget
.elementor-button-wrapper,
.udg-shop-editorial__cta-widget
.elementor-button {
width: 100% !important;
min-width: 0 !important;
}
}
@media (max-width: 380px) {
.udg-shop-editorial {
padding-right: 12px !important;
padding-left: 12px !important;
}
.udg-shop-editorial__content
> .e-con-inner,
.udg-shop-editorial__content:not(
:has(> .e-con-inner)
) {
padding:
35px
20px
39px !important;
}
.udg-shop-editorial__heading-primary
.elementor-heading-title,
.udg-shop-editorial__heading-accent
.elementor-heading-title {
font-size: 40px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.udg-shop-editorial__image img,
.udg-shop-editorial__cta-widget
.elementor-button,
.udg-shop-editorial__cta-widget
.elementor-button::after {
transition-duration: 0.01ms !important;
}
}
Shop with confidence
Beautiful style,
made easy to order.
From choosing a flowing silhouette to receiving your order,
we keep every step straightforward.
UDGOON SERVICE
01 / 04
Kenya-wide delivery
We deliver Udgoon pieces to customers across Kenya.
Nairobi cash on delivery
Pay when your order arrives in Nairobi. Delivery within
Nairobi is KSh 400.
Free-size comfort
Flowing silhouettes designed for comfortable, flexible
dressing.
/* =========================================================
UDGOON EDITORIAL SERVICE PANEL
Self-contained Shopping Benefits section
========================================================= */
.udg-service-editorial,
.udg-service-editorial *,
.udg-service-editorial *::before,
.udg-service-editorial *::after {
box-sizing: border-box;
}
.udg-service-editorial {
–udg-paper: #fffdf8;
–udg-cream: #f4f0e6;
–udg-ink: #241d17;
–udg-olive: #707957;
–udg-olive-deep: #4d583b;
–udg-olive-dark: #2c3523;
–udg-gold: #c89b35;
–udg-dark-line: rgba(36, 29, 23, 0.13);
–udg-light-line: rgba(255, 253, 248, 0.16);
width: 100%;
padding:
clamp(76px, 8vw, 122px)
clamp(16px, 2.2vw, 34px);
overflow: hidden;
color: var(–udg-ink);
background:
radial-gradient(
circle at 5% 8%,
rgba(200, 155, 53, 0.10),
transparent 26%
),
linear-gradient(
145deg,
#fffdf8 0%,
#f3eee4 100%
);
font-family: “DM Sans”, Arial, sans-serif;
}
.udg-service-editorial__shell {
width: min(100%, 1540px);
margin: 0 auto;
display: grid;
grid-template-columns:
minmax(340px, 0.78fr)
minmax(0, 1.22fr);
overflow: hidden;
background: var(–udg-paper);
border: 1px solid var(–udg-dark-line);
border-radius: 3px;
box-shadow:
0 28px 75px rgba(36, 29, 23, 0.12);
}
/* =========================================================
INTRO PANEL
========================================================= */
.udg-service-editorial__intro {
position: relative;
isolation: isolate;
min-height: 670px;
padding:
clamp(48px, 5.5vw, 86px)
clamp(34px, 4.8vw, 74px);
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
color: var(–udg-paper);
background:
radial-gradient(
circle at 88% 8%,
rgba(200, 155, 53, 0.19),
transparent 29%
),
linear-gradient(
145deg,
#465238 0%,
var(–udg-olive-dark) 73%,
#222a1b 100%
);
}
.udg-service-editorial__intro::before {
content: “CARE”;
position: absolute;
right: -0.05em;
bottom: 0.02em;
z-index: -1;
color: transparent;
font-family: “Cormorant Garamond”, Georgia, serif;
font-size: clamp(135px, 15vw, 235px);
font-weight: 500;
line-height: 0.75;
letter-spacing: -0.07em;
pointer-events: none;
white-space: nowrap;
-webkit-text-stroke:
1px rgba(255, 253, 248, 0.065);
}
.udg-service-editorial__intro::after {
content: “”;
position: absolute;
top: 64px;
right: 56px;
width: 94px;
height: 1px;
background:
linear-gradient(
to right,
transparent,
rgba(200, 155, 53, 0.78)
);
}
.udg-service-editorial__intro-content {
position: relative;
z-index: 2;
}
.udg-service-editorial__eyebrow {
margin: 0 0 27px;
color: var(–udg-gold);
font-size: 10px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.udg-service-editorial__title {
max-width: 610px;
margin: 0;
color: var(–udg-paper);
font-family: “Cormorant Garamond”, Georgia, serif;
font-size: clamp(58px, 5.5vw, 88px);
font-weight: 500;
line-height: 0.89;
letter-spacing: -0.047em;
text-wrap: balance;
}
.udg-service-editorial__title span {
display: block;
color: var(–udg-gold);
font-style: italic;
font-weight: 400;
}
.udg-service-editorial__lead {
max-width: 520px;
margin: 31px 0 0;
color: rgba(255, 253, 248, 0.70);
font-size: 14px;
font-weight: 400;
line-height: 1.75;
}
.udg-service-editorial__signature {
position: relative;
z-index: 2;
padding-top: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
border-top: 1px solid var(–udg-light-line);
color: rgba(255, 253, 248, 0.58);
font-size: 8px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.17em;
}
/* =========================================================
SERVICES PANEL
========================================================= */
.udg-service-editorial__services {
min-width: 0;
padding:
clamp(28px, 3.6vw, 54px)
clamp(34px, 4.5vw, 72px);
display: flex;
flex-direction: column;
justify-content: center;
background:
radial-gradient(
circle at 94% 4%,
rgba(200, 155, 53, 0.08),
transparent 26%
),
var(–udg-paper);
}
.udg-service-editorial__item {
position: relative;
min-width: 0;
min-height: 142px;
padding: 27px 0;
display: grid;
grid-template-columns:
48px
minmax(0, 1fr)
52px;
align-items: center;
gap: clamp(18px, 2.4vw, 36px);
border-bottom: 1px solid var(–udg-dark-line);
transition:
padding 220ms ease,
background-color 220ms ease;
}
.udg-service-editorial__item:first-child {
border-top: 1px solid var(–udg-dark-line);
}
.udg-service-editorial__item:hover {
padding-right: 18px;
padding-left: 18px;
background:
rgba(115, 123, 88, 0.055);
}
.udg-service-editorial__number {
align-self: start;
padding-top: 5px;
color: var(–udg-gold);
font-family: “Cormorant Garamond”, Georgia, serif;
font-size: 18px;
font-weight: 600;
line-height: 1;
}
.udg-service-editorial__copy {
min-width: 0;
}
.udg-service-editorial__copy h3 {
margin: 0;
color: var(–udg-ink);
font-family: “Cormorant Garamond”, Georgia, serif;
font-size: clamp(29px, 2.4vw, 39px);
font-weight: 600;
line-height: 1;
letter-spacing: -0.027em;
}
.udg-service-editorial__copy p {
max-width: 650px;
margin: 12px 0 0;
color: rgba(36, 29, 23, 0.64);
font-size: 13px;
font-weight: 400;
line-height: 1.65;
}
.udg-service-editorial__icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
color: var(–udg-olive-deep);
background:
rgba(115, 123, 88, 0.075);
border:
1px solid rgba(36, 29, 23, 0.15);
border-radius: 50%;
transition:
color 200ms ease,
background-color 200ms ease,
border-color 200ms ease,
transform 220ms ease;
}
.udg-service-editorial__icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.udg-service-editorial__item:hover
.udg-service-editorial__icon {
color: var(–udg-paper);
background: var(–udg-olive);
border-color: var(–udg-olive);
transform: rotate(-7deg);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.udg-service-editorial {
padding:
82px 24px
94px;
}
.udg-service-editorial__shell {
grid-template-columns: minmax(0, 1fr);
}
.udg-service-editorial__intro {
min-height: 0;
padding: 58px 48px 52px;
}
.udg-service-editorial__title {
max-width: 760px;
font-size: clamp(62px, 8.5vw, 82px);
}
.udg-service-editorial__lead {
max-width: 670px;
}
.udg-service-editorial__signature {
margin-top: 66px;
}
.udg-service-editorial__services {
padding: 34px 48px 48px;
}
.udg-service-editorial__item {
min-height: 132px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.udg-service-editorial {
padding:
68px 14px
78px;
}
.udg-service-editorial__shell {
border-radius: 2px;
}
.udg-service-editorial__intro {
padding:
42px 24px
35px;
}
.udg-service-editorial__intro::after {
top: 43px;
right: 24px;
width: 54px;
}
.udg-service-editorial__intro::before {
right: -0.11em;
bottom: 0.01em;
font-size: 125px;
}
.udg-service-editorial__eyebrow {
margin-bottom: 21px;
font-size: 8px;
}
.udg-service-editorial__title {
max-width: 100%;
font-size: clamp(49px, 13.8vw, 61px);
line-height: 0.91;
}
.udg-service-editorial__lead {
margin-top: 24px;
font-size: 12px;
line-height: 1.7;
}
.udg-service-editorial__signature {
margin-top: 48px;
font-size: 7px;
}
.udg-service-editorial__services {
padding:
15px 22px
25px;
}
.udg-service-editorial__item {
min-height: 0;
padding: 24px 0;
grid-template-columns:
30px
minmax(0, 1fr)
40px;
align-items: start;
gap: 12px;
}
.udg-service-editorial__item:hover {
padding-right: 0;
padding-left: 0;
background: transparent;
}
.udg-service-editorial__number {
padding-top: 3px;
font-size: 14px;
}
.udg-service-editorial__copy h3 {
font-size: 27px;
line-height: 1;
}
.udg-service-editorial__copy p {
margin-top: 9px;
font-size: 11px;
line-height: 1.58;
}
.udg-service-editorial__icon {
width: 38px;
height: 38px;
}
.udg-service-editorial__icon svg {
width: 15px;
height: 15px;
}
}
@media (max-width: 380px) {
.udg-service-editorial {
padding-right: 10px;
padding-left: 10px;
}
.udg-service-editorial__intro {
padding-right: 20px;
padding-left: 20px;
}
.udg-service-editorial__services {
padding-right: 18px;
padding-left: 18px;
}
.udg-service-editorial__title {
font-size: 47px;
}
.udg-service-editorial__copy h3 {
font-size: 24px;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
.udg-service-editorial *,
.udg-service-editorial *::before,
.udg-service-editorial *::after {
transition: none !important;
animation: none !important;
}
}
NEED A LITTLE HELP?
Let us help you find
the piece that feels right.
Questions about fit, fabric, delivery or which style suits your occasion? Reach out and we will help you choose with confidence.
FIT · FABRIC · DELIVERY · ORDERING
Get Shopping Help
Continue Shopping
/* =========================================================
UDGOON COLLECTION
SHOP 06 — PERSONAL SHOPPING CTA
EDITABLE ELEMENTOR SYSTEM
========================================================= */
.udg-shop-help {
–udg-help-paper: #fffdf8;
–udg-help-canvas: #f5f1e8;
–udg-help-blush: #eadbd3;
–udg-help-blush-soft: #f1e7e1;
–udg-help-ink: #241d17;
–udg-help-muted: rgba(36, 29, 23, 0.64);
–udg-help-muted-light: rgba(36, 29, 23, 0.48);
–udg-help-olive: #737b58;
–udg-help-deep: #515b3d;
–udg-help-dark: #2d3325;
–udg-help-line: rgba(36, 29, 23, 0.12);
position: relative;
width: 100%;
max-width: 100%;
margin: 0 !important;
padding:
76px
clamp(20px, 4vw, 64px)
88px !important;
color: var(–udg-help-ink);
background: var(–udg-help-canvas);
overflow: hidden;
}
.udg-shop-help,
.udg-shop-help * {
box-sizing: border-box;
}
.udg-shop-help > .e-con-inner {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
MAIN CLOSING PANEL
========================================================= */
.udg-shop-help__inner {
position: relative;
width: 100% !important;
max-width: 1440px !important;
min-height: 430px;
margin-inline: auto !important;
padding: 0 !important;
border: 1px solid rgba(36, 29, 23, 0.10);
border-radius: 2px;
background: var(–udg-help-blush-soft);
overflow: hidden !important;
isolation: isolate;
}
.udg-shop-help__inner > .e-con-inner,
.udg-shop-help__inner:not(:has(> .e-con-inner)) {
display: grid !important;
grid-template-columns:
minmax(0, 1.62fr)
minmax(330px, 0.76fr);
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
min-height: 430px;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
/* =========================================================
COPY PANEL
========================================================= */
.udg-shop-help__copy {
position: relative;
z-index: 2;
width: 100% !important;
min-width: 0;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
color: var(–udg-help-ink);
background:
radial-gradient(
circle at 94% 6%,
rgba(115, 123, 88, 0.13),
transparent 33%
),
linear-gradient(
135deg,
var(–udg-help-blush-soft) 0%,
#f7eee9 66%,
var(–udg-help-paper) 100%
);
overflow: hidden;
isolation: isolate;
}
.udg-shop-help__copy > .e-con-inner,
.udg-shop-help__copy:not(:has(> .e-con-inner)) {
position: relative;
z-index: 3;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
width: 100% !important;
max-width: 820px !important;
min-height: 430px;
margin: 0 !important;
padding:
clamp(54px, 5vw, 82px)
clamp(42px, 5.5vw, 92px) !important;
gap: 0 !important;
}
/* Subtle editorial rings */
.udg-shop-help__copy::before {
content: “”;
position: absolute;
top: -108px;
right: -90px;
z-index: 1;
width: 330px;
height: 330px;
border: 1px solid rgba(81, 91, 61, 0.10);
border-radius: 50%;
pointer-events: none;
}
.udg-shop-help__copy::after {
content: “”;
position: absolute;
top: -42px;
right: -23px;
z-index: 1;
width: 190px;
height: 190px;
border: 1px solid rgba(81, 91, 61, 0.09);
border-radius: 50%;
pointer-events: none;
}
/* =========================================================
EYEBROW ROW
========================================================= */
.udg-shop-help__eyebrow-row {
width: auto !important;
max-width: 100% !important;
margin: 0 0 24px !important;
padding: 0 !important;
}
.udg-shop-help__eyebrow-row > .e-con-inner,
.udg-shop-help__eyebrow-row:not(:has(> .e-con-inner)) {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 13px !important;
}
/* =========================================================
EYEBROW LINE
========================================================= */
.udg-shop-help__line {
flex: 0 0 38px !important;
width: 38px !important;
max-width: 38px !important;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-help__line .elementor-widget-container,
.udg-shop-help__line .elementor-divider {
width: 38px;
margin: 0;
padding: 0;
}
.udg-shop-help__line
.elementor-divider-separator {
display: block;
width: 38px !important;
min-width: 38px;
margin: 0 !important;
border-block-start:
1px solid
var(–udg-help-olive) !important;
}
/* =========================================================
EYEBROW LABEL
========================================================= */
.udg-shop-help__eyebrow {
flex: 0 1 auto !important;
width: auto !important;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-help__eyebrow
.elementor-widget-container {
margin: 0;
padding: 0;
}
.udg-shop-help__eyebrow
.elementor-heading-title {
margin: 0 !important;
padding: 0 !important;
color: var(–udg-help-deep) !important;
font-family: “DM Sans”, sans-serif !important;
font-size: 10px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
letter-spacing: 0.19em !important;
text-transform: uppercase !important;
white-space: nowrap;
}
/* =========================================================
MAIN HEADING
========================================================= */
.udg-shop-help__heading {
width: 100% !important;
max-width: 760px !important;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-help__heading
.elementor-widget-container {
margin: 0;
padding: 0;
}
.udg-shop-help__heading
.elementor-heading-title {
width: 100%;
margin: 0 !important;
padding: 0 !important;
color: var(–udg-help-ink) !important;
font-family: “Cormorant Garamond”, serif !important;
font-size: clamp(52px, 5.1vw, 78px) !important;
line-height: 0.94 !important;
font-weight: 500 !important;
letter-spacing: -0.045em !important;
text-wrap: balance;
}
/* =========================================================
DESCRIPTION
========================================================= */
.udg-shop-help__description {
width: 100% !important;
max-width: 650px !important;
margin: 29px 0 0 !important;
padding: 0 !important;
}
.udg-shop-help__description
.elementor-widget-container {
margin: 0;
padding: 0;
}
.udg-shop-help__description,
.udg-shop-help__description p {
color: var(–udg-help-muted) !important;
font-family: “DM Sans”, sans-serif !important;
font-size: 15px !important;
line-height: 1.72 !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
.udg-shop-help__description p {
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-help__description p + p {
margin-top: 12px !important;
}
/* =========================================================
TOPICS UTILITY LINE
========================================================= */
.udg-shop-help__topics {
width: auto !important;
max-width: 100% !important;
margin: 29px 0 0 !important;
padding: 0 !important;
}
.udg-shop-help__topics
.elementor-widget-container {
margin: 0;
padding: 0;
}
.udg-shop-help__topics,
.udg-shop-help__topics p {
color: var(–udg-help-deep) !important;
font-family: “DM Sans”, sans-serif !important;
font-size: 9px !important;
line-height: 1.5 !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
}
.udg-shop-help__topics p {
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
ACTION PANEL
========================================================= */
.udg-shop-help__actions {
position: relative;
z-index: 2;
width: 100% !important;
min-width: 0;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
color: var(–udg-help-paper);
background:
radial-gradient(
circle at 100% 0%,
rgba(255, 253, 248, 0.09),
transparent 38%
),
linear-gradient(
150deg,
#39402e 0%,
var(–udg-help-deep) 56%,
var(–udg-help-dark) 100%
);
overflow: hidden;
isolation: isolate;
}
.udg-shop-help__actions > .e-con-inner,
.udg-shop-help__actions:not(:has(> .e-con-inner)) {
position: relative;
z-index: 3;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
min-height: 430px;
margin: 0 !important;
padding:
54px
clamp(30px, 3.2vw, 52px) !important;
gap: 13px !important;
}
.udg-shop-help__actions::before {
content: “UDGOON”;
position: absolute;
right: -17px;
bottom: -26px;
z-index: 1;
color: rgba(255, 253, 248, 0.045);
font-family: “Cormorant Garamond”, serif;
font-size: clamp(82px, 9vw, 142px);
line-height: 0.8;
font-weight: 500;
letter-spacing: -0.06em;
pointer-events: none;
}
/* =========================================================
SHARED BUTTON RESET
========================================================= */
.udg-shop-help__primary,
.udg-shop-help__secondary {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.udg-shop-help__primary
.elementor-widget-container,
.udg-shop-help__secondary
.elementor-widget-container {
width: 100%;
margin: 0;
padding: 0;
}
.udg-shop-help__primary
.elementor-button-wrapper,
.udg-shop-help__secondary
.elementor-button-wrapper {
display: block;
width: 100%;
}
/* =========================================================
PRIMARY CONTACT BUTTON
========================================================= */
.udg-shop-help__primary
.elementor-button {
position: relative;
display: flex !important;
align-items: center;
justify-content: flex-start;
width: 100% !important;
min-height: 64px;
margin: 0;
padding:
0
68px
0
23px !important;
border:
1px solid
var(–udg-help-paper) !important;
border-radius: 2px !important;
color: var(–udg-help-ink) !important;
background: var(–udg-help-paper) !important;
box-shadow: none !important;
text-decoration: none !important;
font-family: “DM Sans”, sans-serif !important;
font-size: 11px !important;
line-height: 1 !important;
font-weight: 700 !important;
letter-spacing: 0.10em !important;
text-align: left;
text-transform: uppercase !important;
transition:
color 200ms ease,
background-color 200ms ease,
border-color 200ms ease,
transform 200ms ease !important;
}
/* Hide the inconsistent Elementor icon markup. */
.udg-shop-help__primary
.elementor-button-icon {
display: none !important;
}
.udg-shop-help__primary
.elementor-button::after {
content: “→”;
position: absolute;
top: 50%;
right: 8px;
display: grid;
place-items: center;
width: 47px;
height: 47px;
border-radius: 50%;
color: var(–udg-help-paper);
background: var(–udg-help-deep);
font-family: Arial, sans-serif;
font-size: 19px;
line-height: 1;
font-weight: 400;
transform:
translateY(-50%)
translateX(0);
transition:
color 220ms ease,
background-color 220ms ease,
transform 240ms ease;
}
.udg-shop-help__primary
.elementor-button-content-wrapper {
display: flex;
align-items: center;
width: 100%;
}
.udg-shop-help__primary
.elementor-button-text {
white-space: nowrap;
}
.udg-shop-help__primary
.elementor-button:hover {
color: var(–udg-help-paper) !important;
background: transparent !important;
border-color:
rgba(255, 253, 248, 0.72) !important;
transform: translateY(-2px);
}
.udg-shop-help__primary
.elementor-button:hover::after {
color: var(–udg-help-deep);
background: var(–udg-help-paper);
transform:
translateY(-50%)
translateX(3px);
}
.udg-shop-help__primary
.elementor-button:focus-visible {
outline:
2px solid
var(–udg-help-paper) !important;
outline-offset: 4px;
}
/* =========================================================
SECONDARY CONTINUE-SHOPPING BUTTON
========================================================= */
.udg-shop-help__secondary
.elementor-button {
position: relative;
display: flex !important;
align-items: center;
justify-content: flex-start;
width: 100% !important;
min-height: 60px;
margin: 0;
padding:
0
61px
0
23px !important;
border:
1px solid
rgba(255, 253, 248, 0.30) !important;
border-radius: 2px !important;
color: var(–udg-help-paper) !important;
background: transparent !important;
box-shadow: none !important;
text-decoration: none !important;
font-family: “DM Sans”, sans-serif !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 700 !important;
letter-spacing: 0.10em !important;
text-align: left;
text-transform: uppercase !important;
transition:
color 200ms ease,
background-color 200ms ease,
border-color 200ms ease,
transform 200ms ease !important;
}
.udg-shop-help__secondary
.elementor-button-icon {
display: none !important;
}
.udg-shop-help__secondary
.elementor-button::after {
content: “↑”;
position: absolute;
top: 50%;
right: 19px;
color: rgba(255, 253, 248, 0.82);
font-family: Arial, sans-serif;
font-size: 18px;
line-height: 1;
font-weight: 400;
transform:
translateY(-50%)
translateY(0);
transition:
color 200ms ease,
transform 220ms ease;
}
.udg-shop-help__secondary
.elementor-button:hover {
color: var(–udg-help-ink) !important;
background:
var(–udg-help-paper) !important;
border-color:
var(–udg-help-paper) !important;
transform: translateY(-2px);
}
.udg-shop-help__secondary
.elementor-button:hover::after {
color: var(–udg-help-deep);
transform:
translateY(-50%)
translateY(-3px);
}
.udg-shop-help__secondary
.elementor-button:focus-visible {
outline:
2px solid
var(–udg-help-paper) !important;
outline-offset: 4px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.udg-shop-help {
padding:
62px
28px
72px !important;
}
.udg-shop-help__inner,
.udg-shop-help__inner
> .e-con-inner,
.udg-shop-help__inner:not(
:has(> .e-con-inner)
) {
min-height: 390px;
}
.udg-shop-help__inner
> .e-con-inner,
.udg-shop-help__inner:not(
:has(> .e-con-inner)
) {
grid-template-columns:
minmax(0, 1.38fr)
minmax(300px, 0.82fr);
}
.udg-shop-help__copy
> .e-con-inner,
.udg-shop-help__copy:not(
:has(> .e-con-inner)
),
.udg-shop-help__actions
> .e-con-inner,
.udg-shop-help__actions:not(
:has(> .e-con-inner)
) {
min-height: 390px;
}
.udg-shop-help__copy
> .e-con-inner,
.udg-shop-help__copy:not(
:has(> .e-con-inner)
) {
padding:
48px
38px !important;
}
.udg-shop-help__actions
> .e-con-inner,
.udg-shop-help__actions:not(
:has(> .e-con-inner)
) {
padding:
44px
28px !important;
}
.udg-shop-help__eyebrow-row {
margin-bottom: 20px !important;
}
.udg-shop-help__heading
.elementor-heading-title {
font-size:
clamp(45px, 5.8vw, 60px) !important;
letter-spacing: -0.038em !important;
}
.udg-shop-help__description {
margin-top: 24px !important;
}
.udg-shop-help__description,
.udg-shop-help__description p {
font-size: 14px !important;
line-height: 1.68 !important;
}
.udg-shop-help__topics {
margin-top: 24px !important;
}
.udg-shop-help__primary
.elementor-button {
min-height: 60px;
}
.udg-shop-help__secondary
.elementor-button {
min-height: 58px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.udg-shop-help {
padding:
48px
14px
58px !important;
}
.udg-shop-help__inner {
min-height: 0;
}
.udg-shop-help__inner
> .e-con-inner,
.udg-shop-help__inner:not(
:has(> .e-con-inner)
) {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-height: 0;
}
.udg-shop-help__copy,
.udg-shop-help__actions {
width: 100% !important;
min-height: 0;
}
.udg-shop-help__copy
> .e-con-inner,
.udg-shop-help__copy:not(
:has(> .e-con-inner)
) {
width: 100% !important;
max-width: 100% !important;
min-height: 0;
padding:
42px
25px
45px !important;
}
.udg-shop-help__actions
> .e-con-inner,
.udg-shop-help__actions:not(
:has(> .e-con-inner)
) {
min-height: 0;
padding:
30px
25px
34px !important;
}
.udg-shop-help__copy::before {
top: -145px;
right: -155px;
}
.udg-shop-help__copy::after {
top: -72px;
right: -79px;
}
.udg-shop-help__eyebrow-row {
margin-bottom: 19px !important;
}
.udg-shop-help__line,
.udg-shop-help__line
.elementor-widget-container,
.udg-shop-help__line
.elementor-divider,
.udg-shop-help__line
.elementor-divider-separator {
width: 30px !important;
min-width: 30px;
max-width: 30px !important;
}
.udg-shop-help__eyebrow
.elementor-heading-title {
font-size: 9px !important;
}
.udg-shop-help__heading {
max-width: 100% !important;
}
.udg-shop-help__heading
.elementor-heading-title {
font-size:
clamp(42px, 12.5vw, 57px) !important;
line-height: 0.94 !important;
letter-spacing: -0.038em !important;
}
.udg-shop-help__description {
max-width: 100% !important;
margin-top: 24px !important;
}
.udg-shop-help__description,
.udg-shop-help__description p {
font-size: 13px !important;
line-height: 1.68 !important;
}
.udg-shop-help__topics {
margin-top: 24px !important;
}
.udg-shop-help__topics,
.udg-shop-help__topics p {
font-size: 8px !important;
line-height: 1.7 !important;
letter-spacing: 0.14em !important;
}
.udg-shop-help__actions::before {
right: -8px;
bottom: -16px;
font-size: 94px;
}
.udg-shop-help__primary
.elementor-button {
min-height: 60px;
padding-left: 20px !important;
font-size: 10px !important;
}
.udg-shop-help__primary
.elementor-button::after {
width: 44px;
height: 44px;
}
.udg-shop-help__secondary
.elementor-button {
min-height: 56px;
padding-left: 20px !important;
font-size: 9px !important;
}
}
/* =========================================================
NARROW MOBILE
========================================================= */
@media (max-width: 380px) {
.udg-shop-help {
padding-right: 12px !important;
padding-left: 12px !important;
}
.udg-shop-help__copy
> .e-con-inner,
.udg-shop-help__copy:not(
:has(> .e-con-inner)
) {
padding:
37px
20px
40px !important;
}
.udg-shop-help__actions
> .e-con-inner,
.udg-shop-help__actions:not(
:has(> .e-con-inner)
) {
padding:
27px
20px
31px !important;
}
.udg-shop-help__heading
.elementor-heading-title {
font-size: 40px !important;
}
.udg-shop-help__primary
.elementor-button {
padding-right: 61px !important;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.udg-shop-help__primary
.elementor-button,
.udg-shop-help__primary
.elementor-button::after,
.udg-shop-help__secondary
.elementor-button,
.udg-shop-help__secondary
.elementor-button::after {
transition-duration: 0.01ms !important;
}
}
Showing 1–16 of 36 results
-
Coral Garden Brocade Gown
KSh 4,500.00 Add to cart -
Teal Gold Floral Brocade Gown
KSh 4,500.00 Add to cart -
Cobalt Floral Brocade Gown
KSh 4,500.00 Add to cart -
Emerald Gold Floral Brocade Gown
KSh 4,500.00 Add to cart -
Peach Gold Brocade Gown
KSh 4,500.00 Add to cart -
Silver Ink Brocade Gown
KSh 4,500.00 Add to cart -
Mint Ink Brocade Gown
KSh 4,500.00 Add to cart -
Royal Azure Brocade Gown
KSh 4,500.00 Add to cart -
Onyx Gold Brocade Gown
KSh 4,500.00 Add to cart -
Lavender 3D Floral Gown
KSh 3,500.00 Add to cart -
Tangerine 3D Floral Gown
KSh 3,500.00 Add to cart -
Burgundy 3D Floral Gown
KSh 3,500.00 Add to cart -
Citron 3D Floral Gown
KSh 3,500.00 Add to cart -
Peach 3D Floral Gown
KSh 3,500.00 Add to cart -
Copper 3D Floral Gown
KSh 3,500.00 Add to cart -
Ivory 3D Floral Gown
KSh 3,500.00 Add to cart