:root {
    --gp-forest: #15382f;
    --gp-deep: #0b241d;
    --gp-wine: #862f48;
    --gp-wine-deep: #681f36;
    --gp-gold: #c09a5d;
    --gp-gold-light: #e5cfaa;
    --gp-ivory: #f7f0e5;
    --gp-paper: #fffdf9;
    --gp-ink: #17352c;
    --gp-muted: #746f67;
    --gp-line: #e1d9cd;
    --gp-shadow: 0 24px 64px rgba(21, 56, 47, .11);
    --gp-radius: 20px;
}

html { scroll-padding-top: 84px; scroll-behavior: smooth; }

body.gp-site {
    color: var(--gp-ink);
    background-color: var(--gp-paper);
}

body.gp-site.gp-loading { overflow: hidden; }

body.gp-site :where(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--gp-gold);
    outline-offset: 3px;
}

.gp-loader {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 50% 45%, rgba(47, 92, 79, .72), transparent 28rem),
        var(--gp-deep);
    transition: opacity .55s ease, visibility .55s ease;
}

.gp-loader::before {
    position: absolute;
    inset: 0;
    opacity: .08;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='86' viewBox='0 0 86 86'%3E%3Cg fill='none' stroke='%23e5cfaa' stroke-width='.8'%3E%3Cpath d='M43 3 57 17 43 31 29 17Z M3 43 17 29 31 43 17 57Z M55 43 69 29 83 43 69 57Z M43 55 57 69 43 83 29 69Z'/%3E%3C/g%3E%3C/svg%3E");
}

.gp-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.gp-loader-mark {
    position: relative;
    width: 108px;
    height: 136px;
    display: grid;
    place-items: center;
}

.gp-loader-mark::before,
.gp-loader-mark::after {
    position: absolute;
    width: 76px;
    height: 76px;
    border: 1px solid rgba(229, 207, 170, .48);
    content: '';
    transform: rotate(45deg);
    animation: gp-loader-turn 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}

.gp-loader-mark::after {
    width: 57px;
    height: 57px;
    border-color: rgba(201, 158, 170, .58);
    animation-direction: reverse;
    animation-duration: 1.35s;
}

.gp-loader-mark img {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 12px 25px rgba(0, 0, 0, .28));
    animation: gp-loader-float 2.3s ease-in-out infinite;
}

@keyframes gp-loader-turn {
    50% { border-radius: 50%; transform: rotate(135deg) scale(.84); }
    100% { transform: rotate(225deg); }
}

@keyframes gp-loader-float { 50% { transform: translateY(-5px); } }

.gp-header {
    position: sticky;
    z-index: 120;
    top: 0;
    height: 84px;
    border-bottom: 1px solid rgba(225, 217, 205, .82);
    background: rgba(255, 253, 249, .9);
    box-shadow: 0 8px 30px rgba(21, 56, 47, .035);
    backdrop-filter: blur(20px) saturate(1.1);
}

.gp-topbar {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 5px 20px;
    color: rgba(255, 255, 255, .75);
    background: var(--gp-deep);
    font-size: 7px;
    letter-spacing: .03em;
}

.gp-topbar a { color: inherit; text-decoration: none; }
.gp-topbar a:hover { color: #fff; }
.gp-topbar i { width: 4px; height: 4px; background: var(--gp-gold); transform: rotate(45deg); }

.gp-header-inner {
    width: min(1200px, calc(100% - 48px));
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
    margin-inline: auto;
}

.gp-brand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--gp-ink);
    text-decoration: none;
}

.gp-brand img {
    width: 42px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 9px 14px rgba(21, 13, 6, .2));
}

.gp-brand strong {
    display: block;
    font-family: "Noto Serif Arabic", serif;
    font-size: 17px;
    line-height: 1.2;
}

.gp-brand small {
    display: block;
    margin-top: 3px;
    color: var(--gp-wine);
    font-family: Arial, sans-serif;
    font-size: 7px;
    letter-spacing: .15em;
}

.gp-nav {
    display: flex;
    align-items: center;
    gap: 31px;
}

.gp-nav a {
    position: relative;
    padding: 12px 0;
    color: var(--gp-ink);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.gp-nav a::after {
    position: absolute;
    right: 50%;
    bottom: 3px;
    left: 50%;
    height: 1px;
    background: var(--gp-wine);
    content: '';
    transition: right .25s ease, left .25s ease;
}

.gp-nav a:hover,
.gp-nav a[aria-current='page'] { color: var(--gp-wine); }
.gp-nav a:hover::after,
.gp-nav a[aria-current='page']::after { right: 0; left: 0; }

.gp-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 9px;
}

.gp-lang,
.gp-menu,
.gp-cart,
.gp-header-cta {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gp-line);
    background: rgba(255, 255, 255, .76);
    color: var(--gp-ink);
    text-decoration: none;
    cursor: pointer;
    transition: .25s ease;
}

.gp-lang {
    width: 42px;
    border-radius: 50%;
    font: 700 10px Arial, sans-serif;
}

.gp-lang:hover { color: #fff; border-color: var(--gp-wine); background: var(--gp-wine); transform: rotate(7deg); }

.gp-header-cta,
.gp-cart {
    min-height: 46px;
    gap: 9px;
    padding: 0 18px;
    color: #fff;
    border-color: var(--gp-forest);
    background: var(--gp-forest);
    font-size: 10px;
    font-weight: 700;
}

.gp-header-cta:hover,
.gp-cart:hover {
    color: #fff;
    border-color: var(--gp-wine);
    background: var(--gp-wine);
    box-shadow: 0 13px 30px rgba(134, 47, 72, .18);
    transform: translateY(-1px);
}

.gp-cart-count {
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--gp-forest);
    background: var(--gp-gold-light);
    font: 700 9px Arial, sans-serif;
}

.gp-menu {
    display: none;
    width: 42px;
    padding: 0;
    border-radius: 50%;
}

.gp-menu span,
.gp-menu::before,
.gp-menu::after {
    width: 20px;
    height: 1px;
    display: block;
    background: currentColor;
    content: '';
    transition: .25s ease;
}

.gp-menu span { margin: 5px 0; }
.gp-menu.is-open span { opacity: 0; }
.gp-menu.is-open::before { transform: translateY(6px) rotate(45deg); }
.gp-menu.is-open::after { transform: translateY(-6px) rotate(-45deg); }

body.gp-shop .product,
body.gp-shop .empty,
body.gp-order .glass,
body.gp-account-page .glass,
body.gp-success-page .gp-success-card {
    border-radius: var(--gp-radius);
    border-color: rgba(120, 96, 66, .15);
    box-shadow: var(--gp-shadow);
}

body.gp-shop .product { overflow: hidden; box-shadow: none; }
body.gp-shop .product:hover { box-shadow: var(--gp-shadow); }
body.gp-shop .product-image { border-radius: var(--gp-radius) var(--gp-radius) 0 0; }
body.gp-shop .add,
body.gp-shop .submit,
body.gp-shop .checkout-toggle,
body.gp-order .add-piece,
body.gp-order .submit,
body.gp-account-page .btn { border-radius: 12px; }

body.gp-shop :where(select, input, textarea),
body.gp-order :where(select, input, textarea),
body.gp-account-page :where(select, input, textarea) {
    accent-color: var(--gp-wine);
}

body.gp-shop .drawer {
    border-inline-start: 1px solid rgba(225, 217, 205, .72);
    background:
        radial-gradient(circle at 90% 4%, rgba(192, 154, 93, .12), transparent 19rem),
        var(--gp-paper);
}

body.gp-order .layout,
body.gp-account-page .wrap { width: min(1200px, calc(100% - 48px)); }
body.gp-order .hero { padding-top: 58px; }
body.gp-order .glass,
body.gp-account-page .glass { background: rgba(255, 253, 249, .78); }
body.gp-account-page .wrap { padding-top: 48px; }
body.gp-account-page .login { margin-top: 35px; }

.gp-footer {
    position: relative;
    overflow: hidden;
    padding: 52px 24px 22px;
    color: rgba(255, 255, 255, .62);
    background: var(--gp-deep);
}

.gp-footer::before {
    position: absolute;
    inset: 0;
    opacity: .07;
    content: '';
    background-image: linear-gradient(45deg, transparent 47%, #e5cfaa 48% 52%, transparent 53%), linear-gradient(-45deg, transparent 47%, #e5cfaa 48% 52%, transparent 53%);
    background-size: 48px 48px;
}

.gp-footer-inner {
    position: relative;
    width: min(1200px, 100%);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 30px;
    margin-inline: auto;
}

.gp-footer-brand { display: flex; align-items: center; gap: 15px; }
.gp-footer-brand img { width: 62px; height: 88px; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .28)); }
.gp-footer-brand strong { display: block; color: #fff; font: 600 17px "Noto Serif Arabic", serif; }
.gp-footer-brand small { color: var(--gp-gold-light); font: 7px Arial, sans-serif; letter-spacing: .14em; }
.gp-footer-links { display: flex; gap: 25px; font-size: 9px; }
.gp-footer-links a { color: inherit; text-decoration: none; }
.gp-footer-links a:hover { color: #fff; }
.gp-footer-copy { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 8px; }

.gp-success-main {
    min-height: calc(100vh - 84px);
    display: grid;
    place-items: center;
    padding: 70px 24px;
    background:
        radial-gradient(circle at 8% 7%, rgba(192, 154, 93, .18), transparent 25rem),
        radial-gradient(circle at 92% 80%, rgba(134, 47, 72, .11), transparent 28rem),
        var(--gp-ivory);
}

.gp-success-card {
    width: min(620px, 100%);
    padding: 52px;
    text-align: center;
    background: rgba(255, 253, 249, .82);
    backdrop-filter: blur(20px);
}

.gp-success-mark {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    color: #fff;
    background: var(--gp-forest);
    font-size: 25px;
    box-shadow: 0 14px 32px rgba(21, 56, 47, .2);
}

.gp-success-card h1 { margin: 0; font: 700 38px/1.3 "Noto Serif Arabic", serif; }
.gp-success-card p { margin: 12px 0 0; color: var(--gp-muted); font-size: 10px; }
.gp-order-number { margin: 22px 0; padding: 13px; border: 1px solid var(--gp-line); border-radius: 12px; color: var(--gp-wine); background: rgba(247, 240, 229, .8); font-weight: 700; }
.gp-bank-note { margin: 15px 0; padding: 15px; white-space: pre-line; border: 1px solid var(--gp-line); border-radius: 12px; color: var(--gp-muted); background: #faf7f1; font-size: 9px; }
.gp-success-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.gp-success-actions a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 19px; border-radius: 12px; color: #fff; background: var(--gp-forest); font-size: 9px; font-weight: 700; text-decoration: none; }
.gp-success-actions a:last-child { background: var(--gp-wine); }

@media (max-width: 1000px) {
    .gp-header { height: 74px; }
    .gp-header-inner { grid-template-columns: 1fr auto; }
    .gp-nav {
        position: absolute;
        z-index: 5;
        top: 74px;
        right: 0;
        left: 0;
        display: none;
        max-height: calc(100vh - 74px);
        overflow-y: auto;
        align-items: stretch;
        gap: 0;
        padding: 13px 24px 22px;
        flex-direction: column;
        border-bottom: 1px solid var(--gp-line);
        background: rgba(255, 253, 249, .98);
        box-shadow: 0 22px 46px rgba(21, 56, 47, .13);
        backdrop-filter: blur(22px);
    }
    .gp-nav.is-open { display: flex; animation: gp-menu-in .25s ease; }
    .gp-nav a { padding: 13px 3px; border-bottom: 1px solid var(--gp-line); }
    .gp-nav a::after { display: none; }
    .gp-actions { grid-column: 2; grid-row: 1; }
    .gp-header-cta { display: none; }
    .gp-menu { display: grid; place-content: center; }
    @keyframes gp-menu-in { from { opacity: 0; transform: translateY(-9px); } }
}

@media (max-width: 640px) {
    .gp-topbar { min-height: 29px; gap: 8px; padding-inline: 10px; font-size: 6px; }
    .gp-header-inner,
    body.gp-order .layout,
    body.gp-account-page .wrap { width: calc(100% - 28px); }
    .gp-brand { gap: 8px; }
    .gp-brand img { width: 36px; height: 50px; }
    .gp-brand strong { font-size: 14px; }
    .gp-brand small { font-size: 6px; }
    .gp-actions { gap: 5px; }
    .gp-lang,
    .gp-menu { width: 38px; min-height: 38px; }
    .gp-cart { min-height: 40px; padding: 0 10px; font-size: 0; }
    .gp-cart-count { font-size: 9px; }
    body.gp-shop .product-image { border-radius: var(--gp-radius) 0 0 var(--gp-radius); }
    [dir='rtl'] body.gp-shop .product-image { border-radius: 0 var(--gp-radius) var(--gp-radius) 0; }
    .gp-footer { padding-inline: 18px; }
    .gp-footer-inner { grid-template-columns: 1fr; }
    .gp-footer-links { justify-content: space-between; gap: 13px; }
    .gp-success-card { padding: 38px 20px; }
    .gp-success-card h1 { font-size: 32px; }
    .gp-success-actions { flex-direction: column; }
}

/* Unified bag: one checkout for ready pieces and made-to-measure items. */
body.gp-bag-page { background: var(--gp-ivory); }
.bag-page { min-height: 70vh; }
.bag-hero { position: relative; overflow: hidden; padding: 76px 24px 66px; text-align: center; background: var(--gp-paper); border-bottom: 1px solid var(--gp-line); }
.bag-hero::before { position: absolute; inset: 0; opacity: .055; content: ''; background-image: linear-gradient(45deg, transparent 47%, var(--gp-forest) 48% 52%, transparent 53%), linear-gradient(-45deg, transparent 47%, var(--gp-forest) 48% 52%, transparent 53%); background-size: 64px 64px; }
.bag-hero > * { position: relative; }
.bag-hero > span, .bag-section-head span, .bag-summary > span { color: var(--gp-wine); font-size: 8px; font-weight: 700; }
.bag-hero h1 { margin: 6px 0 4px; font: 600 clamp(52px, 7vw, 82px)/1.15 "Noto Serif Arabic", serif; }
.bag-hero p { margin: 0; color: var(--gp-muted); font-size: 9px; }
.bag-shell { width: min(1240px, calc(100% - 48px)); display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; margin: 0 auto; padding: 64px 0 100px; }
.bag-content { min-width: 0; }
.bag-section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding-bottom: 17px; border-bottom: 1px solid var(--gp-line); }
.bag-section-head h2 { margin: 2px 0 0; font: 600 38px/1.25 "Noto Serif Arabic", serif; }
.bag-section-head > strong { min-width: 48px; padding: 8px 11px; color: #fff; background: var(--gp-wine); text-align: center; font-size: 8px; }
.bag-items { display: grid; gap: 12px; }
.bag-item { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; border: 1px solid var(--gp-line); background: var(--gp-paper); }
.bag-item-image { position: relative; height: 142px; overflow: hidden; background: #eadfce; }
.bag-item-image img { width: 100%; height: 100%; object-fit: cover; }
.bag-item-image span { position: absolute; top: 9px; inset-inline-start: 9px; padding: 4px 7px; color: #fff; background: var(--gp-forest); font-size: 6px; }
.bag-item-copy { padding: 15px 18px; }
.bag-item-copy > small { color: var(--gp-wine); font: 700 7px Arial; }
.bag-item-copy h3 { margin: 2px 0; font: 600 21px "Noto Serif Arabic", serif; }
.bag-item-copy p { margin: 0 0 10px; color: var(--gp-muted); font-size: 7px; }
.bag-ready-measurements { display: grid; grid-template-columns: repeat(4, minmax(52px, 1fr)); gap: 5px; max-width: 390px; margin: 8px 0 11px; }
.bag-ready-measurements span { padding: 6px 5px; text-align: center; border: 1px solid var(--gp-line); background: var(--gp-ivory); }
.bag-ready-measurements small { display: block; color: var(--gp-muted); font-size: 7px; }
.bag-ready-measurements b { margin-inline-end: 2px; color: var(--gp-forest); font: 700 11px Arial; }
.bag-ready-measurements em { color: var(--gp-muted); font-size: 6px; font-style: normal; }
.bag-quantity { width: max-content; display: grid; grid-template-columns: 32px 34px 32px; border: 1px solid var(--gp-line); }
.bag-quantity button, .bag-quantity b { min-height: 32px; display: grid; place-items: center; border: 0; background: transparent; font: 700 9px Arial; }
.bag-quantity b { border-inline: 1px solid var(--gp-line); }
.bag-item-price { display: grid; justify-items: end; gap: 20px; padding: 18px; }
.bag-item-price strong { color: var(--gp-wine); font-size: 9px; }
.bag-item-price button { padding: 0; color: #9d2929; border: 0; background: transparent; font-size: 7px; }
.bag-empty { padding: 60px 24px; border: 1px solid var(--gp-line); background: var(--gp-paper); text-align: center; }
.bag-empty h2 { margin: 0; font: 600 32px "Noto Serif Arabic", serif; }
.bag-empty p { color: var(--gp-muted); font-size: 8px; }
.bag-empty div { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.bag-empty a { min-height: 44px; display: grid; place-items: center; padding: 0 18px; color: #fff; background: var(--gp-forest); font-size: 8px; }
.bag-empty a:last-child { background: var(--gp-wine); }
.bag-checkout { margin-top: 54px; }
.bag-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.bag-fields label { display: grid; gap: 6px; font-size: 8px; font-weight: 700; }
.bag-fields label.wide { grid-column: 1 / -1; }
.bag-fields :where(input, select, textarea) { width: 100%; min-height: 50px; padding: 10px 12px; border: 1px solid var(--gp-line); border-radius: 0; outline: 0; background: var(--gp-paper); font: inherit; }
.bag-fields textarea { min-height: 90px; resize: vertical; }
.bag-fields :where(input, select, textarea):focus { border-color: var(--gp-gold); box-shadow: 0 0 0 3px rgba(192,154,93,.1); }
.bag-appointment, .bag-delivery { margin-top: 20px; padding: 20px; border: 1px solid var(--gp-line); background: var(--gp-paper); }
.bag-mini-title { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.bag-mini-title b { width: 34px; height: 34px; display: grid; place-items: center; color: var(--gp-forest); background: var(--gp-gold-light); font: 700 8px Arial; }
.bag-mini-title strong, .bag-mini-title small { display: block; }
.bag-mini-title strong { font: 600 17px "Noto Serif Arabic", serif; }
.bag-mini-title small { color: var(--gp-muted); font-size: 6px; }
.bag-delivery-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 22px; border: 1px solid var(--gp-line); }
.bag-delivery-choice label { position: relative; min-height: 60px; display: grid; place-items: center; cursor: pointer; border-inline-end: 1px solid var(--gp-line); font-size: 8px; font-weight: 700; }
.bag-delivery-choice label:last-child { border: 0; }
.bag-delivery-choice input { position: absolute; opacity: 0; }
.bag-delivery-choice label:has(input:checked) { color: #fff; background: var(--gp-forest); }
.bag-last-fields { margin-top: 20px; }
.bag-summary { position: sticky; top: 118px; padding: 30px; color: #fff; background: var(--gp-forest); }
.bag-summary h2 { margin: 4px 0 23px; color: #fff; font: 600 32px "Noto Serif Arabic", serif; }
.bag-summary > div p { display: flex; justify-content: space-between; gap: 15px; margin: 12px 0; color: rgba(255,255,255,.65); font-size: 8px; }
.bag-summary > div strong { color: var(--gp-gold-light); }
.bag-summary > div p.final { margin-top: 18px; padding-top: 18px; color: #fff; border-top: 1px solid rgba(255,255,255,.16); font-size: 11px; }
.bag-summary > small { display: block; margin: 20px 0 13px; color: rgba(255,255,255,.55); font-size: 7px; }
.bag-summary > button { width: 100%; min-height: 54px; border: 0; color: #fff; background: var(--gp-wine); font-size: 9px; font-weight: 700; }
.bag-summary > button:disabled { opacity: .55; }
.bag-status { min-height: 25px; margin: 10px 0 0; color: #ffd3d3; font-size: 7px; }
.bag-summary .bag-discount-row { color: #f4ddac; }
.bag-summary .bag-discount-row strong { color: #fff; }
.bag-coupon { position: relative; display: grid; gap: 7px; margin: 20px 0 4px; padding: 16px 0; border-block: 1px solid rgba(255,255,255,.14); }
.bag-coupon label { display: grid; gap: 7px; color: rgba(255,255,255,.76); font-size: 9px; font-weight: 700; }
.bag-coupon label > div { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.bag-coupon input { min-width: 0; min-height: 48px; padding: 10px 12px; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 0; outline: 0; background: rgba(255,255,255,.08); font: 700 12px Arial,sans-serif; text-transform: uppercase; }
.bag-coupon input::placeholder { color: rgba(255,255,255,.42); font: 500 9px "Noto Kufi Arabic",sans-serif; text-transform: none; }
.bag-coupon input:focus { border-color: var(--gp-gold-light); box-shadow: 0 0 0 3px rgba(229,207,170,.1); }
.bag-coupon input[aria-invalid='true'] { border-color: #ffb0b0; background: rgba(151,35,56,.28); }
.bag-coupon label button { min-width: 80px; padding: 8px 12px; cursor: pointer; color: var(--gp-forest); border: 0; background: var(--gp-gold-light); font: 700 9px "Noto Kufi Arabic",sans-serif; }
.bag-coupon-remove { justify-self: start; padding: 2px 0; cursor: pointer; color: rgba(255,255,255,.7); border: 0; border-bottom: 1px solid currentColor; background: transparent; font: 600 8px "Noto Kufi Arabic",sans-serif; }
.bag-coupon > small { min-height: 16px; color: #ffd1d8; font-size: 8px; line-height: 1.7; }
.bag-coupon > small.success { color: #ccefd8; }
.bag-coupon > small:empty { min-height: 0; }

@media (max-width: 900px) {
    .bag-shell { grid-template-columns: 1fr; }
    .bag-summary { position: static; grid-row: 1; }
}
@media (max-width: 600px) {
    .bag-hero { padding: 52px 18px 46px; }
    .bag-shell { width: calc(100% - 28px); padding: 40px 0 72px; }
    .bag-item { grid-template-columns: 94px minmax(0, 1fr); }
    .bag-item-image { height: 128px; }
    .bag-item-copy { padding: 12px; }
    .bag-item-copy h3 { font-size: 18px; }
    .bag-ready-measurements { grid-template-columns: repeat(2, minmax(62px, 1fr)); }
    .bag-item-price { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--gp-line); }
    .bag-fields { grid-template-columns: 1fr; }
    .bag-fields label.wide { grid-column: auto; }
    .bag-delivery-choice { grid-template-columns: 1fr; }
    .bag-delivery-choice label { border: 0; border-bottom: 1px solid var(--gp-line); }
}

@media (prefers-reduced-motion: reduce) {
    .gp-loader-mark,
    .gp-loader-mark::before,
    .gp-loader-mark::after,
    .gp-loader-mark img { animation: none !important; }
}

:root {
    --gp-forest: #102d25;
    --gp-deep: #0b241d;
    --gp-wine: #7f293f;
    --gp-wine-deep: #681f36;
    --gp-gold: #bd9556;
    --gp-gold-light: #e2cca6;
    --gp-ivory: #f6efe5;
    --gp-paper: #fffdf9;
    --gp-ink: #122f27;
    --gp-muted: #716b63;
    --gp-line: #ded6ca;
    --gp-shadow: 0 24px 58px rgba(16, 45, 37, .09);
    --gp-radius: 0px;
}

.gp-header {
    height: 88px;
    border-bottom-color: var(--gp-line);
    background: rgba(255, 253, 249, .97);
    box-shadow: none;
}

.gp-header-inner { width: min(1240px, calc(100% - 56px)); }
.gp-brand img { width: 42px; height: 58px; }
.gp-brand strong { font-size: 18px; }
.gp-nav { gap: 36px; }
.gp-nav a { font-size: 11px; }

.gp-header-cta,
.gp-cart {
    position: relative;
    overflow: hidden;
    min-height: 50px;
    padding-inline: 22px;
    border-radius: 0;
    background: var(--gp-forest);
}

.gp-header-cta::before,
.gp-cart::before {
    position: absolute;
    inset: 0;
    background: var(--gp-wine);
    content: '';
    transform: translateX(105%);
    transition: transform .4s cubic-bezier(.77, 0, .18, 1);
}

[dir='ltr'] .gp-header-cta::before,
[dir='ltr'] .gp-cart::before { transform: translateX(-105%); }
.gp-header-cta:hover::before,
.gp-cart:hover::before { transform: none; }
.gp-header-cta:hover,
.gp-cart:hover { box-shadow: none; transform: none; }
.gp-header-cta,
.gp-cart { isolation: isolate; }
.gp-header-cta::before,
.gp-cart::before { z-index: -1; }

.gp-footer { padding-top: 66px; background: var(--gp-forest); }
.gp-footer::before {
    opacity: .09;
    background-image: linear-gradient(45deg, transparent 47%, #e5cfaa 48% 52%, transparent 53%), linear-gradient(-45deg, transparent 47%, #e5cfaa 48% 52%, transparent 53%);
    background-size: 54px 54px;
}

.gp-footer-inner { width: min(1240px, 100%); }

/* Ready shop keeps the exact editorial cards from the reference. */
body.gp-shop .hero {
    padding-block: 82px 72px;
    background: var(--gp-ivory);
}

body.gp-shop .hero h1 { font-size: clamp(50px, 6vw, 76px); font-weight: 600; }
body.gp-shop .product,
body.gp-shop .product-image,
body.gp-shop .add,
body.gp-shop .submit,
body.gp-shop .checkout-toggle,
body.gp-shop :where(select, input, textarea),
body.gp-shop .totals,
body.gp-shop .drawer,
body.gp-shop .empty { border-radius: 0 !important; }
body.gp-shop .product { border-color: var(--gp-line); }
body.gp-shop .product:hover { box-shadow: 0 24px 58px rgba(16, 45, 37, .09); }

/* Tailoring order: persistent dark guide with the working multi-piece flow. */
body.gp-order {
    min-height: 100vh;
    background: var(--gp-paper);
}

body.gp-order .gp-footer { display: none; }

.order-experience {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    min-height: calc(100vh - 88px);
    background: var(--gp-paper);
    direction: ltr;
}

[dir='rtl'] .order-guide,
[dir='rtl'] body.gp-order .flow-wrap { direction: rtl; }
[dir='ltr'] .order-guide,
[dir='ltr'] body.gp-order .flow-wrap { direction: ltr; }

.order-guide {
    position: sticky;
    z-index: 30;
    top: 88px;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    height: calc(100vh - 88px);
    overflow: auto;
    padding: clamp(48px, 6vh, 78px) 38px 34px;
    color: #fff;
    background:
        radial-gradient(circle at 110% 5%, rgba(69, 112, 97, .62), transparent 24rem),
        var(--gp-forest);
}

.order-guide::before {
    position: absolute;
    inset: 0;
    opacity: .055;
    pointer-events: none;
    content: '';
    background-image: linear-gradient(45deg, transparent 47%, #e5cfaa 48% 52%, transparent 53%), linear-gradient(-45deg, transparent 47%, #e5cfaa 48% 52%, transparent 53%);
    background-size: 58px 58px;
}

.order-guide > * { position: relative; }

body.gp-order .order-hero {
    padding: 0;
    text-align: start;
}

body.gp-order .order-hero::before { display: none; }
body.gp-order .order-hero small {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gp-gold-light);
    font-size: 9px;
}

body.gp-order .order-hero small::before {
    width: 45px;
    height: 1px;
    background: rgba(229, 207, 170, .55);
    content: '';
}

body.gp-order .order-hero h1 {
    margin: 18px 0 12px;
    color: #fff;
    font: 600 clamp(42px, 4vw, 56px)/1.25 "Noto Serif Arabic", serif;
}

body.gp-order .order-hero p {
    color: rgba(255, 255, 255, .58);
    font-size: 9px;
}

body.gp-order .flow-progress {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    margin: 34px 0 38px;
    border: 0;
    border-radius: 0;
    color: rgba(255, 255, 255, .55);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

body.gp-order .flow-progress::before {
    position: absolute;
    top: 18px;
    right: 10%;
    left: 10%;
    height: 1px;
    background: rgba(255, 255, 255, .18);
    content: '';
}

body.gp-order .flow-step {
    min-height: 78px;
    display: grid;
    place-items: start center;
    gap: 8px;
    padding: 0 3px;
    border: 0;
    color: inherit;
    background: transparent !important;
    text-align: center;
}

body.gp-order .flow-step span {
    position: relative;
    z-index: 2;
    width: 37px;
    height: 37px;
    color: rgba(255, 255, 255, .58);
    border-color: rgba(255, 255, 255, .22);
    background: var(--gp-forest);
}

body.gp-order .flow-step strong { color: rgba(255, 255, 255, .76); font-size: 8px; }
body.gp-order .flow-step small { color: rgba(255, 255, 255, .35); font-size: 6px; }
body.gp-order .flow-step.active span { color: #fff; border-color: var(--gp-wine); background: var(--gp-wine); box-shadow: 0 0 0 7px rgba(127, 41, 63, .16); }
body.gp-order .flow-step.active strong { color: #fff; }
body.gp-order .flow-step.done span { color: var(--gp-forest); border-color: var(--gp-gold); background: var(--gp-gold); }
body.gp-order .flow-step.done span { font-size: 0; }
body.gp-order .flow-step.done span::after { content: '✓'; font-size: 12px; }

.order-assurance {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .15);
}

.order-assurance > span { color: var(--gp-gold-light); font-size: 24px; text-align: center; }
.order-assurance strong { display: block; color: #fff; font-size: 9px; }
.order-assurance small { display: block; margin-top: 3px; color: rgba(255, 255, 255, .42); font-size: 6px; }

body.gp-order .flow-wrap {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 54px clamp(32px, 5vw, 76px) 80px;
}

body.gp-order .stage-card {
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

body.gp-order .stage-heading {
    min-height: 80px;
    align-items: start;
    margin-bottom: 28px;
    padding-bottom: 19px;
    border-bottom: 1px solid var(--gp-line);
}

body.gp-order .stage-heading h2 {
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 600;
    line-height: 1.25;
}

body.gp-order .stage-heading p { max-width: 620px; font-size: 8px; }
body.gp-order .piece-counter {
    min-width: 82px;
    padding: 8px 12px;
    border-radius: 0;
    background: var(--gp-wine);
}

body.gp-order .category-tabs { gap: 0; margin-bottom: 24px; border-block: 1px solid var(--gp-line); }
body.gp-order .category-tab {
    min-height: 47px;
    padding-inline: 18px;
    border: 0;
    border-inline-end: 1px solid var(--gp-line);
    border-radius: 0;
    background: transparent;
}
body.gp-order .category-tab.active { color: var(--gp-wine); background: var(--gp-ivory); }

body.gp-order .design-grid { gap: 14px; }
body.gp-order .design-card,
body.gp-order .selection-dock,
body.gp-order .selected-chip,
body.gp-order .piece-row,
body.gp-order .piece-image,
body.gp-order .summary-pill,
body.gp-order .appointment-box,
body.gp-order .slot,
body.gp-order .choice-label,
body.gp-order .delivery-fields,
body.gp-order .estimate,
body.gp-order .review-piece,
body.gp-order .total-card,
body.gp-order .flow-button,
body.gp-order .submit-order { border-radius: 0; }

body.gp-order .design-card { border-color: var(--gp-line); }
body.gp-order .design-card:hover { border-color: var(--gp-wine); box-shadow: var(--gp-shadow); transform: translateY(-4px); }
body.gp-order .design-media { height: 300px; }
body.gp-order .design-copy { padding: 18px; }
body.gp-order .design-copy h3 { font-size: 22px; }
body.gp-order .add-design {
    min-height: 47px;
    border-radius: 0;
    background: var(--gp-forest);
}

body.gp-order .selection-dock { padding: 20px; background: var(--gp-ivory); }
body.gp-order .selected-chip { padding: 9px; }
body.gp-order .selected-chip img,
body.gp-order .selected-chip .mini-fallback,
body.gp-order .chip-remove { border-radius: 0; }

body.gp-order .piece-row {
    grid-template-columns: 125px 1fr auto;
    padding: 0;
}
body.gp-order .piece-image { width: 125px; height: 158px; }
body.gp-order .piece-row > div:nth-child(2) { padding-block: 15px; }
body.gp-order .piece-actions { padding: 14px; }
body.gp-order .configure-piece { border-radius: 0; box-shadow: none; }
body.gp-order .summary-pill { border: 1px solid var(--gp-line); background: transparent; }

body.gp-order .field input,
body.gp-order .field select,
body.gp-order .field textarea {
    border-radius: 0;
    background: #fff;
}

body.gp-order .choice-label:has(input:checked) { background: var(--gp-forest); }
body.gp-order .estimate { background: var(--gp-forest); }
body.gp-order .total-card { background: var(--gp-forest); box-shadow: none; }
body.gp-order .stage-actions { background: var(--gp-paper); }
body.gp-order .flow-button.next,
body.gp-order .submit-order { background: var(--gp-wine); }

body.gp-order .piece-modal { background: rgba(11, 36, 29, .82); }
body.gp-order .editor,
body.gp-order .editor-head img,
body.gp-order .editor-head .mini-fallback,
body.gp-order .close-editor,
body.gp-order .editor-section,
body.gp-order .fabric-option,
body.gp-order .fabric-swatch,
body.gp-order .mini-choice,
body.gp-order .mode-card,
body.gp-order .profile-card,
body.gp-order .profile-measures span,
body.gp-order .no-profiles,
body.gp-order .no-profiles a,
body.gp-order .fit-preview,
body.gp-order .fit-photo,
body.gp-order .measure-field input,
body.gp-order .save-piece,
body.gp-order .success-card,
body.gp-order .success-mark,
body.gp-order .success a { border-radius: 0; }

body.gp-order .editor { border: 0; }
body.gp-order .editor-section { padding: 22px; }
body.gp-order .editor-flow { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; padding: 14px; border: 1px solid var(--gp-line); background: var(--gp-ivory); }
body.gp-order .editor-flow span { display: flex; align-items: center; gap: 7px; color: var(--gp-muted); font-size: 7px; font-weight: 700; }
body.gp-order .editor-flow span b { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--gp-line); background: #fff; font: 700 8px Arial; }
body.gp-order .editor-flow span.active { color: var(--gp-forest); }
body.gp-order .editor-flow span.active b { color: #fff; border-color: var(--gp-wine); background: var(--gp-wine); }
body.gp-order .editor-flow i { width: 36px; height: 1px; background: var(--gp-line); }
body.gp-order .editor-next { margin-top: 18px; }
body.gp-order .editor-final-actions { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: end; }
body.gp-order .editor-final-actions > button:first-child { min-height: 52px; padding: 0 18px; border: 1px solid var(--gp-line); background: #fff; font-size: 8px; }
body.gp-order .editor-final-actions .save-piece { margin-top: 16px; }
.tailoring-bag-toast { position: fixed; z-index: 950; bottom: 24px; left: 50%; min-width: min(420px, calc(100% - 28px)); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 17px; color: #fff; background: var(--gp-forest); box-shadow: 0 18px 50px rgba(0,0,0,.22); opacity: 0; visibility: hidden; transform: translate(-50%, 25px); transition: .3s; }
.tailoring-bag-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tailoring-bag-toast strong { font-size: 8px; }
.tailoring-bag-toast a { padding: 7px 10px; color: #fff; background: var(--gp-wine); font-size: 7px; }
body.gp-order .fabric-source { gap: 0; }
body.gp-order .mini-choice { min-height: 44px; padding-inline: 18px; }
body.gp-order .fabric-options { gap: 12px; }
body.gp-order .fabric-swatch {
    height: 110px;
    background-color: var(--swatch, #d6c4a7);
    background-image:
        linear-gradient(115deg, rgba(255,255,255,.2), transparent 32%, rgba(0,0,0,.1)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(0deg, rgba(0,0,0,.045) 0 1px, transparent 1px 3px);
    background-blend-mode: soft-light, overlay, multiply;
}
body.gp-order .mode-card { min-height: 84px; }
body.gp-order .fit-preview { box-shadow: none; }

/* Customer account uses the same restrained catalogue language. */
body.gp-account-page {
    background: var(--gp-ivory);
}

body.gp-account-page::before { opacity: .08; }
body.gp-account-page .wrap { width: min(1240px, calc(100% - 56px)); padding-block: 64px 90px; }
body.gp-account-page .hero { margin-bottom: 35px; }
body.gp-account-page .hero h1 { font-size: clamp(48px, 6vw, 70px); font-weight: 600; }
body.gp-account-page .glass,
body.gp-account-page .account-metric,
body.gp-account-page .profile,
body.gp-account-page .profile-visual,
body.gp-account-page .status,
body.gp-account-page .measurements span,
body.gp-account-page .order,
body.gp-account-page .metric,
body.gp-account-page .btn,
body.gp-account-page .field input,
body.gp-account-page .field select,
body.gp-account-page .field textarea,
body.gp-account-page .measure-editor,
body.gp-account-page .close-measure,
body.gp-account-page .measure-progress,
body.gp-account-page .measure-progress b,
body.gp-account-page .type-card,
body.gp-account-page .type-visual,
body.gp-account-page .fit-preview,
body.gp-account-page .measure-input input { border-radius: 0; }

body.gp-account-page .glass {
    border-color: var(--gp-line);
    background: var(--gp-paper);
    box-shadow: none;
    backdrop-filter: none;
}

body.gp-account-page .login { margin-top: 10px; padding: 44px; }
body.gp-account-page .account-metrics { gap: 0; border: 1px solid var(--gp-line); }
body.gp-account-page .account-metric {
    border: 0;
    border-inline-end: 1px solid var(--gp-line);
    background: var(--gp-paper);
    box-shadow: none;
    backdrop-filter: none;
}
body.gp-account-page .account-metric:last-child { border-inline-end: 0; }
body.gp-account-page .panel { padding: 30px; }
body.gp-account-page .profile { background: #fff; }
body.gp-account-page .measurements span { border: 1px solid var(--gp-line); background: transparent; }
body.gp-account-page .btn { box-shadow: none; }
body.gp-account-page .profile-actions .btn.alt { background: var(--gp-forest); }
body.gp-account-page .order { background: #fff; }
body.gp-account-page .measure-modal { background: rgba(11, 36, 29, .82); }
body.gp-account-page .measure-editor { border: 0; }
body.gp-account-page .measure-progress span.active { background: var(--gp-forest); }
body.gp-account-page .type-card.selected { box-shadow: inset 0 0 0 2px var(--gp-wine); transform: none; }
body.gp-account-page .fit-preview { background: var(--gp-forest); }

@media (max-width: 1100px) {
    .order-experience { grid-template-columns: minmax(0, 1fr) 350px; }
    .order-guide { padding-inline: 25px; }
    body.gp-order .flow-wrap { padding-inline: 28px; }
    body.gp-order .design-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .gp-header { height: 74px; }
    .order-experience { display: block; min-height: 0; }
    .order-guide {
        position: relative;
        top: auto;
        height: auto;
        overflow: visible;
        padding: 35px 22px 22px;
    }
    body.gp-order .order-hero h1 { font-size: 40px; }
    body.gp-order .flow-progress { margin: 28px 0 10px; }
    .order-assurance { display: none; }
    body.gp-order .flow-wrap { padding: 34px 22px 70px; }
    body.gp-order .stage-heading h2 { font-size: 36px; }
}

@media (max-width: 640px) {
    .gp-header-inner,
    body.gp-account-page .wrap { width: calc(100% - 28px); }
    body.gp-order .order-hero p { max-width: 330px; }
    body.gp-order .flow-step { min-height: 64px; }
    body.gp-order .flow-step div { display: block; }
    body.gp-order .flow-step strong { font-size: 6px; }
    body.gp-order .flow-step small { display: none; }
    body.gp-order .flow-wrap { padding-inline: 14px; }
    body.gp-order .stage-heading { min-height: 0; }
    body.gp-order .stage-heading h2 { font-size: 31px; }
    body.gp-order .design-grid { grid-template-columns: 1fr; }
    body.gp-order .design-card { grid-template-columns: 43% 57%; }
    body.gp-order .design-media { height: 250px; }
    body.gp-order .piece-row { grid-template-columns: 84px 1fr; }
    body.gp-order .piece-image { width: 84px; height: 110px; }
    body.gp-order .piece-actions { grid-column: 1 / -1; }
    body.gp-order .stage-actions { border-radius: 0; }
    body.gp-order .editor-flow { gap: 6px; padding-inline: 8px; }
    body.gp-order .editor-flow i { width: 18px; }
    body.gp-order .editor-final-actions { grid-template-columns: 1fr; }
    body.gp-account-page .wrap { padding-top: 42px; }
    body.gp-account-page .account-metrics { grid-template-columns: 1fr 1fr; }
    body.gp-account-page .account-metric:last-child { grid-column: 1 / -1; border-top: 1px solid var(--gp-line); }
    body.gp-account-page .account-metric:nth-child(2) { border-inline-end: 0; }
    body.gp-account-page .panel { padding: 18px; }
}

/* Responsive polish, motion and touch-friendly controls across the public site. */
body.gp-site,
body.gp-site *,
body.gp-site *::before,
body.gp-site *::after { box-sizing: border-box; }

body.gp-site {
    min-width: 320px;
    min-height: 100%;
    margin: 0;
    overflow-x: clip;
    font-family: "Noto Kufi Arabic", sans-serif;
    line-height: 1.7;
}

body.gp-site a { text-decoration: none; }
body.gp-site :where(button, input, select, textarea) { font: inherit; }
body.gp-site :where(img, svg) { max-width: 100%; }
body.gp-site :where(button, a, label, select) { -webkit-tap-highlight-color: transparent; }

.gp-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gp-header { transition: height .3s ease, box-shadow .3s ease, background-color .3s ease; }
.gp-header.is-scrolled { background: rgba(255, 253, 249, .985); box-shadow: 0 12px 35px rgba(16, 45, 37, .09); }
.gp-brand img { transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s ease; }
.gp-brand:hover img { transform: translateY(-2px) rotate(-1.5deg); filter: drop-shadow(0 11px 19px rgba(104, 31, 54, .2)); }
.gp-cart-icon { position: relative; z-index: 2; width: 18px; height: 18px; display: block !important; color: #fff; stroke: #fff; visibility: visible; }
.gp-cart-label,
.gp-cart-count { position: relative; z-index: 1; }
.gp-cart-count.is-popping { animation: gp-bag-pop .42s cubic-bezier(.2, .85, .25, 1.25); }

@keyframes gp-bag-pop {
    45% { transform: scale(1.28) rotate(6deg); }
}

body.gp-motion-ready .gp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease var(--gp-reveal-delay, 0ms), transform .7s cubic-bezier(.2, .8, .2, 1) var(--gp-reveal-delay, 0ms);
}

body.gp-motion-ready .gp-reveal.is-visible { opacity: 1; transform: none; }

body.gp-site :where(.product, .product-card, .design-card, .profile, .order, .bag-item) {
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease;
}

body.gp-site :where(.product, .product-card, .design-card, .profile, .order, .bag-item):hover {
    border-color: rgba(127, 41, 63, .32);
    transform: translateY(-5px);
    box-shadow: 0 22px 50px rgba(16, 45, 37, .1);
}

body.gp-site :where(button, .button, .btn, .add, .flow-button, .submit-order, .checkout-toggle) {
    position: relative;
    overflow: hidden;
    transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .25s ease, box-shadow .3s ease;
}

body.gp-site :where(button, .button, .btn, .add, .flow-button, .submit-order, .checkout-toggle):not(:disabled):active { transform: translateY(1px) scale(.99); }

body.gp-shop .sku,
body.gp-shop .eyebrow { font-size: 10px; }
body.gp-shop .hero p,
body.gp-shop .desc { font-size: 12px; }
body.gp-shop .stock-note { min-height: 24px; font-size: 10px; }
body.gp-shop .branch-filter,
body.gp-shop .variants select { font-size: 11px; }
body.gp-shop .add { display: flex; align-items: center; justify-content: center; gap: 9px; }
body.gp-shop .add .gp-icon { width: 17px; height: 17px; transition: transform .3s ease; }
body.gp-shop .add:hover .gp-icon { transform: translateY(-2px) rotate(-4deg); }
body.gp-shop .toast { display: flex; align-items: center; gap: 16px; font-size: 11px; }
body.gp-shop .toast a { padding: 6px 10px; color: #fff; background: var(--gp-wine); font-size: 9px; white-space: nowrap; }

.bag-hero > span,
.bag-section-head span,
.bag-summary > span { font-size: 10px; }
.bag-hero p { font-size: 12px; }
.bag-item-copy > small { font-size: 9px; }
.bag-item-copy p { font-size: 11px; }
.bag-item-price strong { font-size: 12px; }
.bag-item-price button { min-height: 32px; font-size: 10px; cursor: pointer; }
.bag-quantity button { min-width: 40px; min-height: 40px; cursor: pointer; }
.bag-quantity { grid-template-columns: 40px 40px 40px; }
.bag-quantity button,
.bag-quantity b { font-size: 12px; }
.bag-fields label { font-size: 11px; }
.bag-fields :where(input, select, textarea) { min-height: 54px; font-size: 13px; transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.bag-fields :where(input, select, textarea):hover { border-color: #c7bbab; }
.bag-delivery-choice label { min-height: 70px; display: flex; gap: 10px; font-size: 11px; transition: color .3s ease, background-color .3s ease; }
.bag-delivery-choice .gp-icon { width: 22px; height: 22px; }
.bag-delivery-choice label:has(input:checked) .gp-icon { color: var(--gp-gold-light); animation: gp-choice-in .35s ease; }
.bag-mini-title strong { font-size: 19px; }
.bag-mini-title small { font-size: 9px; }
.bag-summary { overflow: hidden; box-shadow: 0 26px 60px rgba(16, 45, 37, .16); }
.bag-summary::before { position: absolute; inset: 0; opacity: .06; pointer-events: none; content: ''; background-image: linear-gradient(45deg, transparent 47%, #e5cfaa 48% 52%, transparent 53%), linear-gradient(-45deg, transparent 47%, #e5cfaa 48% 52%, transparent 53%); background-size: 54px 54px; }
.bag-summary > * { position: relative; }
.bag-summary > div p { font-size: 10px; }
.bag-summary > div p.final { font-size: 13px; }
.bag-summary > small,
.bag-status { font-size: 10px; }
.bag-coupon label,
.bag-coupon > small { font-size: 10px; }
.bag-summary > button { min-height: 58px; cursor: pointer; font-size: 11px; }
.bag-summary > button:not(:disabled):hover { background: var(--gp-wine-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.15); }
.bag-status:not(:empty) { padding: 10px; background: rgba(255,255,255,.08); }
.bag-shipping-note { min-height: 22px; margin: 8px 0 0; color: var(--gp-muted); font-size: 10px; }

@keyframes gp-choice-in {
    50% { transform: translateY(-3px) scale(1.08); }
}

@media (max-width: 1000px) {
    .gp-header-inner { gap: 16px; }
    .gp-brand span { min-width: 0; }
    .gp-nav { top: 74px; }
}

@media (max-width: 900px) {
    .bag-shell { grid-template-columns: minmax(0, 1fr); }
    .bag-summary { position: relative; grid-row: auto; margin-top: 10px; }
    .measurement-workspace { grid-template-columns: 1fr !important; }
    body.gp-order .fit-preview,
    body.gp-account-page .fit-preview { position: relative; top: auto; }
}

@media (max-width: 640px) {
    .gp-topbar { overflow: hidden; white-space: nowrap; }
    .gp-brand strong { font-size: 13px; }
    .gp-brand small { display: none; }
    .gp-cart { gap: 6px; padding-inline: 9px; font-size: inherit; }
    .gp-cart-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .gp-cart-count { min-width: 20px; height: 20px; }
    .gp-footer-links { flex-wrap: wrap; }
    .bag-hero h1 { font-size: 48px; }
    .bag-section-head h2 { font-size: 31px; }
    .bag-empty div { align-items: stretch; flex-direction: column; }
    .bag-checkout { margin-top: 42px; }
    .bag-appointment,
    .bag-delivery { padding: 15px; }
    .bag-delivery-choice label { min-height: 62px; border-inline-end: 0; }
    .bag-summary { padding: 25px 20px; }
    body.gp-order .fit-stage,
    body.gp-account-page .fit-stage { height: min(420px, 118vw); }
}

@media (max-width: 480px) {
    .gp-topbar a:last-child,
    .gp-topbar i:last-of-type { display: none; }
    .gp-header-inner { width: calc(100% - 20px); }
    .gp-brand img { width: 32px; height: 44px; }
    .gp-brand strong { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.gp-shop .product { display: block; }
    body.gp-shop .product-image { min-height: 0; aspect-ratio: 4 / 5; }
    body.gp-order .design-card { display: block; }
    body.gp-order .design-media { height: 330px; }
    body.gp-account-page .account-metrics { grid-template-columns: 1fr; }
    body.gp-account-page .account-metric { border-inline-end: 0; border-bottom: 1px solid var(--gp-line); }
    body.gp-account-page .account-metric:last-child { grid-column: auto; }
}

@media (hover: none) {
    body.gp-site :where(.product, .product-card, .design-card, .profile, .order, .bag-item):hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    body.gp-site *,
    body.gp-site *::before,
    body.gp-site *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    body.gp-motion-ready .gp-reveal { opacity: 1; transform: none; }
}

/* Public experience: quick navigation, clear order paths and calm feedback. */
.gp-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.gp-skip-link {
    position: fixed;
    z-index: 2000;
    top: 10px;
    inset-inline-start: 12px;
    padding: 10px 14px;
    color: #fff !important;
    background: var(--gp-wine);
    font-size: 10px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(-140%);
    transition: opacity .2s ease, transform .2s ease;
}

.gp-skip-link:focus { opacity: 1; transform: none; }

.gp-route-progress {
    position: fixed;
    z-index: 1600;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.gp-route-progress span {
    width: 38%;
    height: 100%;
    display: block;
    background: linear-gradient(90deg, transparent, var(--gp-gold-light), var(--gp-wine));
    transform: translateX(280%);
}

.gp-route-progress.is-active { opacity: 1; }
.gp-route-progress.is-active span { animation: gp-route-progress 1s cubic-bezier(.4, 0, .2, 1) infinite; }

@keyframes gp-route-progress {
    to { transform: translateX(-280%); }
}

[dir='ltr'] .gp-route-progress span { animation-direction: reverse; }
.gp-loader[aria-hidden='true'] { pointer-events: none; }

body.gp-site .gp-cart .gp-cart-label { color: #fff; }

.gp-channel-note {
    min-height: 21px;
    display: flex !important;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    color: var(--gp-muted) !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    line-height: 1.65;
}

.gp-channel-note::before {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border: 2px solid var(--gp-gold);
    border-radius: 50%;
    content: '';
    box-shadow: 0 0 0 3px rgba(189, 149, 86, .12);
}

.gp-mobile-dock { display: none; }

.gp-whatsapp-fab {
    position: fixed;
    z-index: 112;
    inset-inline-end: 22px;
    bottom: 22px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    color: #fff !important;
    border: 1px solid rgba(229, 207, 170, .42);
    background: rgba(16, 45, 37, .94);
    box-shadow: 0 14px 35px rgba(11, 36, 29, .18);
    backdrop-filter: blur(15px);
    font-size: 9px;
    font-weight: 700;
    transition: transform .28s ease, background-color .28s ease, box-shadow .28s ease;
}

.gp-whatsapp-fab svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: var(--gp-gold-light);
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.gp-whatsapp-fab:hover {
    background: var(--gp-wine);
    box-shadow: 0 18px 42px rgba(104, 31, 54, .24);
    transform: translateY(-3px);
}

.gp-whatsapp-fab:hover svg { transform: rotate(-7deg) scale(1.07); }

body.gp-home .order-paths {
    padding-block: 78px;
    border-bottom: 1px solid var(--gp-line);
    background:
        radial-gradient(circle at 7% 16%, rgba(189, 149, 86, .12), transparent 21rem),
        var(--gp-paper);
}

body.gp-home .order-paths-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 29px;
}

body.gp-home .order-paths-head h2 {
    margin: 8px 0 0;
    font: 600 clamp(36px, 4vw, 50px)/1.2 "Noto Serif Arabic", serif;
}

body.gp-home .order-paths-head > span {
    padding-bottom: 7px;
    color: var(--gp-muted);
    border-bottom: 1px solid var(--gp-line);
    font-size: 9px;
}

body.gp-home .order-paths-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--gp-line);
    border-inline-start: 1px solid var(--gp-line);
}

body.gp-home .order-path-card {
    position: relative;
    min-height: 155px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    padding: 24px;
    color: var(--gp-ink);
    border-inline-end: 1px solid var(--gp-line);
    border-bottom: 1px solid var(--gp-line);
    background: rgba(255, 253, 249, .82);
    transition: color .38s ease, background-color .38s ease, transform .38s cubic-bezier(.2, .8, .2, 1), box-shadow .38s ease;
}

body.gp-home .order-path-card.featured { color: #fff; background: var(--gp-forest); }
body.gp-home .order-path-card::after,
body.gp-site :where(.product, .design-card)::after {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    content: '';
    background: radial-gradient(circle at var(--gp-pointer-x, 50%) var(--gp-pointer-y, 35%), rgba(255, 255, 255, .28), transparent 34%);
    transition: opacity .35s ease;
}

body.gp-home .order-path-card:hover {
    z-index: 1;
    color: #fff;
    background: var(--gp-wine);
    box-shadow: 0 24px 52px rgba(16, 45, 37, .14);
    transform: translateY(-5px);
}

body.gp-home .order-path-card:hover::after,
body.gp-site :where(.product, .design-card):hover::after { opacity: 1; }

body.gp-home .order-path-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: var(--gp-wine);
    border: 1px solid var(--gp-line);
    transform: rotate(45deg);
    transition: color .35s ease, border-color .35s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}

body.gp-home .order-path-card.featured .order-path-icon,
body.gp-home .order-path-card:hover .order-path-icon { color: var(--gp-gold-light); border-color: rgba(229, 207, 170, .38); }
body.gp-home .order-path-card:hover .order-path-icon { transform: rotate(52deg) scale(1.04); }
body.gp-home .order-path-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.35; transform: rotate(-45deg); }
body.gp-home .order-path-copy { min-width: 0; }
body.gp-home .order-path-copy small { display: block; color: var(--gp-wine); font: 700 8px Arial, sans-serif; }
body.gp-home .order-path-card.featured .order-path-copy small,
body.gp-home .order-path-card:hover .order-path-copy small { color: var(--gp-gold-light); }
body.gp-home .order-path-copy strong { display: block; margin: 3px 0; font: 600 22px "Noto Serif Arabic", serif; }
body.gp-home .order-path-copy em { display: block; overflow: hidden; color: var(--gp-muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
body.gp-home .order-path-card.featured .order-path-copy em,
body.gp-home .order-path-card:hover .order-path-copy em { color: rgba(255, 255, 255, .58); }
body.gp-home .order-path-card > b { position: relative; z-index: 1; font: 400 18px Arial, sans-serif; transition: transform .3s ease; }
body.gp-home .order-path-card:hover > b { transform: translateX(-5px); }
[dir='ltr'] body.gp-home .order-path-card:hover > b { transform: translateX(5px); }

body.gp-shop .checkout-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

body.gp-shop .drawer-note {
    display: block;
    margin-top: 10px;
    color: var(--gp-muted);
    font-size: 8px;
    text-align: center;
}

body.gp-shop .drawer-tailoring-note {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 15px;
    padding: 13px;
    color: var(--gp-forest);
    border: 1px solid var(--gp-line);
    background: var(--gp-ivory);
    font-size: 9px;
}

body.gp-shop .drawer-tailoring-note strong {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--gp-wine);
    font: 700 9px Arial, sans-serif;
}

body.gp-site :where(img).gp-media-pending { opacity: .18; }
body.gp-site :where(img).gp-media-ready { animation: gp-media-in .6s ease both; }
@keyframes gp-media-in { from { opacity: .18; transform: scale(1.015); } }

body.gp-site :where(button, .btn).gp-is-busy { cursor: wait; opacity: .72; }
body.gp-site :where(button, .btn).gp-is-busy::after {
    width: 13px;
    height: 13px;
    display: inline-block;
    margin-inline-start: 9px;
    border: 1px solid currentColor;
    border-bottom-color: transparent;
    border-radius: 50%;
    content: '';
    vertical-align: middle;
    animation: gp-busy-spin .7s linear infinite;
}

@keyframes gp-busy-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    body.gp-site { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

    .gp-mobile-dock {
        position: fixed;
        z-index: 118;
        right: 0;
        bottom: 0;
        left: 0;
        min-height: calc(64px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: start;
        padding: 5px 5px env(safe-area-inset-bottom);
        border-top: 1px solid rgba(222, 214, 202, .92);
        background: rgba(255, 253, 249, .96);
        box-shadow: 0 -12px 36px rgba(16, 45, 37, .09);
        backdrop-filter: blur(20px) saturate(1.1);
    }

    .gp-mobile-dock a {
        position: relative;
        min-width: 0;
        min-height: 56px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 2px;
        color: var(--gp-muted);
        font-size: 7px;
        font-weight: 700;
    }

    .gp-mobile-dock a[aria-current='page'] { color: var(--gp-wine); }
    .gp-mobile-dock .gp-icon { width: 20px; height: 20px; transition: transform .25s ease; }
    .gp-mobile-dock a[aria-current='page'] .gp-icon { transform: translateY(-2px); }
    .gp-mobile-dock-primary .gp-icon {
        width: 42px;
        height: 42px;
        margin-top: -20px;
        padding: 10px;
        color: var(--gp-gold-light);
        border: 1px solid rgba(229, 207, 170, .45);
        border-radius: 50%;
        background: var(--gp-forest);
        box-shadow: 0 10px 25px rgba(16, 45, 37, .18);
    }

    .gp-mobile-dock-primary span { margin-top: -2px; }
    .gp-mobile-dock a > b {
        position: absolute;
        top: 4px;
        inset-inline-end: calc(50% - 19px);
        min-width: 16px;
        height: 16px;
        display: grid;
        place-items: center;
        color: #fff;
        border: 2px solid var(--gp-paper);
        border-radius: 50%;
        background: var(--gp-wine);
        font: 700 7px Arial, sans-serif;
    }

    .gp-whatsapp-fab {
        inset-inline-end: 13px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        width: 47px;
        min-height: 47px;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
    }

    .gp-whatsapp-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    body.gp-shop .toast,
    .tailoring-bag-toast { bottom: calc(78px + env(safe-area-inset-bottom)); }

    body.gp-home .order-paths { padding-block: 58px; }
    body.gp-home .order-paths-head { align-items: start; flex-direction: column; gap: 10px; }
    body.gp-home .order-paths-grid { grid-template-columns: 1fr; }
    body.gp-home .order-path-card { min-height: 128px; padding: 19px; }

    body.gp-site :where(input:not([type='radio']):not([type='checkbox']), select, textarea) { font-size: 16px !important; }
}

@media (max-width: 420px) {
    body.gp-home .order-path-card { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; }
    body.gp-home .order-path-icon { width: 50px; height: 50px; }
    body.gp-home .order-path-copy strong { font-size: 20px; }
}

@media (hover: none) {
    body.gp-home .order-path-card:hover { color: var(--gp-ink); background: rgba(255, 253, 249, .82); box-shadow: none; transform: none; }
    body.gp-home .order-path-card.featured:hover { color: #fff; background: var(--gp-forest); }
}

@media (prefers-reduced-motion: reduce) {
    .gp-route-progress span,
    body.gp-site :where(img).gp-media-ready,
    body.gp-site :where(button, .btn).gp-is-busy::after { animation: none !important; }
    body.gp-home .order-path-card,
    .gp-whatsapp-fab { transform: none !important; }
}

/* Bag identity: phone-first checkout without repeating customer data. */
.bag-identity {
    position: relative;
    overflow: hidden;
    margin-bottom: 34px;
    padding: clamp(22px, 4vw, 34px);
    color: var(--gp-ink);
    border: 1px solid var(--gp-line);
    background:
        radial-gradient(circle at 100% 0, rgba(189, 149, 86, .14), transparent 18rem),
        var(--gp-paper);
}

.bag-identity::before {
    position: absolute;
    width: 170px;
    height: 170px;
    inset-inline-end: -105px;
    bottom: -112px;
    border: 1px solid rgba(189, 149, 86, .22);
    content: '';
    transform: rotate(45deg);
}

.bag-identity > * { position: relative; }

.bag-identity-heading {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gp-line);
}

.bag-identity-mark {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    color: var(--gp-gold-light);
    background: var(--gp-forest);
    transform: rotate(45deg);
}

.bag-identity-mark .gp-icon { width: 26px; height: 26px; transform: rotate(-45deg); }
.bag-identity-heading small { display: block; color: var(--gp-wine); font-size: 8px; font-weight: 700; }
.bag-identity-heading h2 { margin: 2px 0 1px; font: 600 27px/1.3 "Noto Serif Arabic", serif; }
.bag-identity-heading p { margin: 0; color: var(--gp-muted); font-size: 9px; }

.bag-identity-progress {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 10px;
    margin: 22px 0;
}

.bag-identity-progress i { height: 1px; background: var(--gp-line); }
.bag-identity-progress span { display: flex; align-items: center; gap: 7px; color: var(--gp-muted); font-size: 8px; font-weight: 700; }
.bag-identity-progress span b {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    color: var(--gp-muted);
    border: 1px solid var(--gp-line);
    background: #fff;
    font: 700 8px Arial, sans-serif;
}

.bag-identity-progress span.active { color: var(--gp-forest); }
.bag-identity-progress span.active b { color: #fff; border-color: var(--gp-wine); background: var(--gp-wine); box-shadow: 0 0 0 5px rgba(127, 41, 63, .08); }
.bag-identity-progress span.done b { color: var(--gp-forest); border-color: var(--gp-gold); background: var(--gp-gold-light); }

.bag-identity-stage { display: none; }
.bag-identity-stage.active { display: block; animation: bag-identity-in .32s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes bag-identity-in {
    from { opacity: 0; transform: translateY(9px); }
}

.bag-identity-stage[data-identity-stage='loading'] {
    min-height: 90px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--gp-muted);
    font-size: 9px;
}

.bag-identity-stage[data-identity-stage='loading'].active { display: flex; }
.bag-identity-spinner {
    width: 21px;
    height: 21px;
    border: 1px solid var(--gp-line);
    border-top-color: var(--gp-wine);
    border-radius: 50%;
    animation: gp-busy-spin .75s linear infinite;
}

.bag-identity-field { display: grid; gap: 6px; color: var(--gp-ink); font-size: 9px; font-weight: 700; }
.bag-identity-field > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    border: 1px solid var(--gp-line);
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.bag-identity-field > div:focus-within { border-color: var(--gp-gold); box-shadow: 0 0 0 3px rgba(189, 149, 86, .1); }
.bag-identity-field > div > b { padding-inline: 13px; color: var(--gp-forest); border-inline-end: 1px solid var(--gp-line); font: 700 12px Arial, sans-serif; }
.bag-identity-field :where(input) {
    width: 100%;
    min-height: 53px;
    padding: 10px 13px;
    color: var(--gp-ink);
    border: 1px solid var(--gp-line);
    outline: 0;
    background: #fff;
    font-size: 13px;
}

.bag-identity-field > div input { border: 0; }
.bag-identity-field > small { color: var(--gp-muted); font-size: 8px; font-weight: 400; }
.bag-identity-button {
    min-width: min(240px, 100%);
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 16px;
    padding: 0 19px;
    color: #fff;
    border: 0;
    background: var(--gp-wine);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}

.bag-identity-button:hover { background: var(--gp-wine-deep); transform: translateY(-2px); }
.bag-identity-button:disabled { cursor: wait; opacity: .62; }
.bag-identity-back,
.bag-resend,
.bag-identity-person button {
    padding: 6px 0;
    color: var(--gp-wine);
    border: 0;
    border-bottom: 1px solid rgba(127, 41, 63, .3);
    background: transparent;
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
}

.bag-identity-intro { margin: 13px 0 15px; }
.bag-identity-intro strong { display: block; font: 600 22px "Noto Serif Arabic", serif; }
.bag-identity-intro small { display: block; color: var(--gp-muted); font-size: 8px; }
.bag-identity-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bag-otp-field { max-width: 340px; }
.bag-otp-field input { direction: ltr; font: 700 22px/1 Arial, sans-serif; letter-spacing: .45em; text-align: center; }
.bag-otp-actions { display: flex; align-items: center; gap: 18px; }
.bag-resend:disabled { color: var(--gp-muted); cursor: wait; border-color: transparent; }

.bag-identity-person {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 15px;
    color: #fff;
    background: var(--gp-forest);
}

.bag-identity-person > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--gp-forest); background: var(--gp-gold-light); font: 700 15px Arial, sans-serif; }
.bag-identity-person small { display: block; color: var(--gp-gold-light); font-size: 7px; }
.bag-identity-person strong { display: block; font: 600 17px "Noto Serif Arabic", serif; }
.bag-identity-person b { display: block; color: rgba(255, 255, 255, .58); font: 400 9px Arial, sans-serif; }
.bag-identity-person button { color: #fff; border-color: rgba(255, 255, 255, .32); }
.bag-identity-status { min-height: 22px; margin: 10px 0 0; color: #9d2929; font-size: 9px; }
.bag-identity-status.success { color: #176147; }

.bag-field-error {
    display: block;
    margin-top: 1px;
    color: #992c3f;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.65;
}

.bag-field-error[hidden] { display: none; }
.bag-identity-field > .bag-field-error { color: #992c3f; font-size: 9px; font-weight: 600; }
.bag-identity-field:has([aria-invalid='true']) > span,
.bag-fields label:has([aria-invalid='true']) > span { color: #8c2539; }
.bag-identity-field:has([aria-invalid='true']) > div,
.bag-identity-field > input[aria-invalid='true'],
.bag-fields :where(input, select, textarea)[aria-invalid='true'] {
    border-color: #a73a4f;
    background-color: #fff9f9;
    box-shadow: 0 0 0 3px rgba(167, 58, 79, .1);
}

.bag-validation-summary {
    margin: 0 0 22px;
    padding: 14px 16px;
    color: #79243a;
    border: 1px solid rgba(127, 41, 63, .24);
    border-inline-start: 4px solid var(--gp-wine);
    background: rgba(127, 41, 63, .055);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.8;
}

.bag-validation-summary[hidden] { display: none; }
.bag-validation-summary:focus,
.bag-fields label:focus { outline: 2px solid var(--gp-gold); outline-offset: 4px; }
.bag-fields :where(select, input)[aria-busy='true'] { cursor: progress; color: var(--gp-muted); background-color: #f7f2ea; }

.bag-order-details { animation: bag-details-in .42s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bag-details-in { from { opacity: 0; transform: translateY(14px); } }
.bag-details-check { min-width: 38px !important; color: var(--gp-forest) !important; border: 1px solid var(--gp-gold) !important; background: var(--gp-gold-light) !important; font-size: 12px !important; }

/* Bag item editor: change a saved piece without rebuilding it. */
.bag-item-actions { display: grid; justify-items: end; gap: 7px; }
.bag-item-price .bag-item-edit {
    min-height: 38px;
    padding: 7px 11px;
    color: #fff;
    border: 1px solid var(--gp-forest);
    background: var(--gp-forest);
    font-size: 8px;
    font-weight: 700;
}
.bag-item-price .bag-item-edit:hover { border-color: var(--gp-wine); background: var(--gp-wine); }
.bag-item-price .bag-item-remove { min-height: 26px; color: #9d2929; }
.bag-quantity button:disabled { cursor: not-allowed; opacity: .32; }
body.bag-edit-open { overflow: hidden; }
.bag-edit-modal[hidden] { display: none !important; }
.bag-edit-modal {
    position: fixed;
    z-index: 1300;
    inset: 0;
    display: block;
}
.bag-edit-backdrop {
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 0;
    background: rgba(7, 26, 21, .68);
    backdrop-filter: blur(10px);
    transition: opacity .24s ease;
}
.bag-edit-panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(680px, 100%);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    outline: 0;
    background: var(--gp-ivory);
    box-shadow: -28px 0 80px rgba(7, 26, 21, .22);
    transform: translateX(105%);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
[dir='rtl'] .bag-edit-panel { transform: translateX(-105%); }
.bag-edit-modal.open .bag-edit-backdrop { opacity: 1; }
.bag-edit-modal.open .bag-edit-panel { transform: translateX(0); }
.bag-edit-head {
    position: relative;
    z-index: 5;
    min-height: 90px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--gp-line);
    background: rgba(255, 253, 249, .96);
    backdrop-filter: blur(18px);
}
.bag-edit-product { min-width: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; }
.bag-edit-product > img,
.bag-edit-product > span { width: 64px; height: 68px; display: grid; place-items: center; object-fit: cover; color: var(--gp-wine); background: #e9ddcb; font: 600 28px "Noto Serif Arabic", serif; }
.bag-edit-product small,
.bag-edit-product strong,
.bag-edit-product b { display: block; }
.bag-edit-product small { color: var(--gp-wine); font-size: 7px; font-weight: 700; }
.bag-edit-product strong { overflow: hidden; font: 600 18px "Noto Serif Arabic", serif; text-overflow: ellipsis; white-space: nowrap; }
.bag-edit-product b { color: var(--gp-muted); font: 700 8px Arial, sans-serif; }
.bag-edit-close { width: 42px; height: 42px; display: grid; place-items: center; color: var(--gp-ink); border: 1px solid var(--gp-line); border-radius: 50%; background: #fff; font-size: 22px; cursor: pointer; }
.bag-edit-close:hover { color: #fff; border-color: var(--gp-wine); background: var(--gp-wine); transform: rotate(5deg); }
.bag-edit-form { min-height: 0; display: flex; overflow: auto; flex-direction: column; overscroll-behavior: contain; }
.bag-edit-intro { padding: 24px 24px 16px; }
.bag-edit-intro > span { color: var(--gp-wine); font-size: 8px; font-weight: 700; }
.bag-edit-intro h2 { margin: 2px 0; font: 600 30px/1.3 "Noto Serif Arabic", serif; }
.bag-edit-intro p { margin: 0; color: var(--gp-muted); font-size: 9px; }
.bag-edit-status {
    margin: 0 24px 14px;
    padding: 12px 14px;
    color: #81263b;
    border: 1px solid rgba(127, 41, 63, .3);
    border-inline-start: 4px solid var(--gp-wine);
    background: #fff7f7;
    font-size: 9px;
    font-weight: 700;
}
.bag-edit-status[hidden] { display: none; }
#bag-edit-content { display: grid; gap: 13px; padding: 0 24px 24px; }
.bag-edit-section { padding: 18px; border: 1px solid var(--gp-line); background: rgba(255, 253, 249, .92); }
.bag-edit-section-title { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--gp-line); }
.bag-edit-section-title > b { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: var(--gp-forest); background: var(--gp-gold-light); font: 700 8px Arial, sans-serif; }
.bag-edit-section-title strong,
.bag-edit-section-title small { display: block; }
.bag-edit-section-title strong { font: 600 17px "Noto Serif Arabic", serif; }
.bag-edit-section-title small { color: var(--gp-muted); font-size: 7px; }
.bag-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bag-edit-field { display: grid; align-content: start; gap: 6px; margin-top: 13px; color: var(--gp-ink); font-size: 9px; font-weight: 700; }
.bag-edit-grid > .bag-edit-field { margin-top: 0; }
.bag-edit-field > :where(input, select, textarea),
.bag-edit-unit {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--gp-line);
    outline: 0;
    background: #fff;
    font: inherit;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.bag-edit-field > :where(input, select, textarea) { padding: 10px 12px; }
.bag-edit-field textarea { min-height: 92px; resize: vertical; }
.bag-edit-field > :where(input, select, textarea):focus,
.bag-edit-unit:focus-within { border-color: var(--gp-gold); box-shadow: 0 0 0 3px rgba(192, 154, 93, .12); }
.bag-edit-unit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.bag-edit-unit input { width: 100%; min-height: 48px; padding: 10px 12px; border: 0; outline: 0; background: transparent; font: inherit; }
.bag-edit-unit b { padding-inline: 11px; color: var(--gp-muted); font: 400 8px Arial, sans-serif; }
.bag-edit-field-error { color: #992c3f; font-size: 8px; font-weight: 600; line-height: 1.6; }
.bag-edit-field-error[hidden] { display: none; }
.bag-edit-field:has([aria-invalid='true']) > span { color: #8c2539; }
.bag-edit-field > :where(input, select, textarea)[aria-invalid='true'],
.bag-edit-field[aria-invalid='true'],
.bag-edit-unit:has([aria-invalid='true']) { border-color: #a73a4f; background: #fff9f9; box-shadow: 0 0 0 3px rgba(167, 58, 79, .1); }
.bag-edit-availability,
.bag-edit-info { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 12px; color: #176147; border: 1px solid rgba(23, 97, 71, .2); background: #eef8f2; }
.bag-edit-availability > span,
.bag-edit-info > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: #176147; font: 700 10px Arial, sans-serif; }
.bag-edit-availability strong,
.bag-edit-availability small,
.bag-edit-info strong,
.bag-edit-info small { display: block; }
.bag-edit-availability strong,
.bag-edit-info strong { font-size: 8px; }
.bag-edit-availability small,
.bag-edit-info small { color: var(--gp-muted); font-size: 7px; }
.bag-edit-availability.unavailable { color: #8c2539; border-color: rgba(140, 37, 57, .22); background: #fff4f5; }
.bag-edit-availability.unavailable > span { background: var(--gp-wine); }
.bag-edit-measurements { margin-top: 15px; }
.bag-edit-measurements > small { color: var(--gp-muted); font-size: 8px; font-weight: 700; }
.bag-edit-measurements .bag-ready-measurements { max-width: none; }
.bag-edit-choice-group,
.bag-edit-mode-cards { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; border: 0; }
.bag-edit-choice-group[aria-invalid='true'],
.bag-edit-mode-cards[aria-invalid='true'] { outline: 1px solid #a73a4f; outline-offset: 4px; }
.bag-edit-choice-group > .bag-edit-field-error,
.bag-edit-mode-cards > .bag-edit-field-error { width: 100%; grid-column: 1 / -1; }
.bag-edit-choice-group legend { width: 100%; margin-bottom: 2px; font-size: 9px; font-weight: 700; }
.bag-edit-choice-group label { position: relative; cursor: pointer; }
.bag-edit-choice-group input,
.bag-edit-mode-cards input,
.bag-edit-fabric-card input { position: absolute; opacity: 0; pointer-events: none; }
.bag-edit-choice-group label > span { min-height: 39px; display: grid; place-items: center; padding: 7px 15px; border: 1px solid var(--gp-line); background: #fff; font-size: 8px; font-weight: 700; }
.bag-edit-choice-group label:has(input:checked) > span { color: #fff; border-color: var(--gp-forest); background: var(--gp-forest); }
.bag-edit-fabrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bag-edit-fabric-card { position: relative; min-width: 0; display: block; overflow: hidden; padding: 7px; cursor: pointer; border: 1px solid var(--gp-line); background: #fff; }
.bag-edit-fabric-card.selected { border-color: var(--gp-wine); box-shadow: 0 0 0 2px rgba(127, 41, 63, .1); }
.bag-edit-fabric-card.unavailable { cursor: not-allowed; opacity: .45; }
.bag-edit-fabric-swatch { position: relative; height: 78px; display: block; overflow: hidden; margin-bottom: 7px; background: var(--bag-swatch, #d8c4a4); }
.bag-edit-fabric-swatch img { width: 100%; height: 100%; object-fit: cover; }
.bag-edit-fabric-card.selected .bag-edit-fabric-swatch::after { position: absolute; top: 6px; inset-inline-end: 6px; width: 24px; height: 24px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--gp-wine); content: '✓'; font: 700 9px Arial, sans-serif; }
.bag-edit-fabric-card strong,
.bag-edit-fabric-card small,
.bag-edit-fabric-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bag-edit-fabric-card strong { font-size: 8px; }
.bag-edit-fabric-card small { color: var(--gp-wine); font-size: 7px; }
.bag-edit-fabric-card em { color: var(--gp-muted); font-size: 6px; font-style: normal; }
.bag-edit-mode-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bag-edit-mode-cards label { position: relative; min-height: 74px; display: grid; place-items: center; align-content: center; padding: 9px 6px; cursor: pointer; border: 1px solid var(--gp-line); background: #fff; text-align: center; }
.bag-edit-mode-cards label > span { font-size: 8px; font-weight: 700; }
.bag-edit-mode-cards label > small { color: var(--gp-muted); font-size: 6px; }
.bag-edit-mode-cards label:has(input:checked) { color: #fff; border-color: var(--gp-wine); background: var(--gp-wine); box-shadow: 0 9px 22px rgba(127, 41, 63, .13); }
.bag-edit-mode-cards label:has(input:checked) > small { color: rgba(255, 255, 255, .66); }
.bag-edit-measurement-panel { margin-top: 14px; }
.bag-edit-measurement-panel[hidden],
[data-fabric-source-section][hidden] { display: none !important; }
.bag-edit-measure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bag-edit-profile-summary { margin-top: 10px; padding: 12px; color: #fff; background: var(--gp-forest); }
.bag-edit-profile-summary > strong { display: block; margin-bottom: 7px; color: var(--gp-gold-light); font-size: 9px; }
.bag-edit-profile-summary > div { display: flex; flex-wrap: wrap; gap: 5px; }
.bag-edit-profile-summary span { padding: 4px 7px; border: 1px solid rgba(255, 255, 255, .14); font-size: 7px; }
.bag-edit-profile-summary b { color: var(--gp-gold-light); font: 700 8px Arial, sans-serif; }
.bag-edit-info { margin-top: 14px; }
.bag-edit-footer { position: sticky; z-index: 4; bottom: 0; display: grid; grid-template-columns: 1fr 2fr; gap: 9px; margin-top: auto; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gp-line); background: rgba(255, 253, 249, .96); backdrop-filter: blur(18px); }
.bag-edit-footer button { min-height: 52px; padding: 8px 15px; cursor: pointer; border: 1px solid var(--gp-forest); font-size: 9px; font-weight: 700; }
.bag-edit-cancel { color: var(--gp-forest); background: transparent; }
.bag-edit-save { color: #fff; border-color: var(--gp-wine) !important; background: var(--gp-wine); }
.bag-edit-save:hover { background: var(--gp-wine-deep); transform: translateY(-1px); }

@media (max-width: 1024px) {
    .gp-bag-page .bag-shell { grid-template-columns: minmax(0, 1fr); }
    .gp-bag-page .bag-content { order: 1; }
    .gp-bag-page .bag-summary {
        position: relative;
        top: auto;
        order: 2;
        grid-row: auto;
        width: 100%;
        margin-top: clamp(26px, 6vw, 48px);
    }
}

@media (max-width: 600px) {
    .bag-identity { margin-bottom: 28px; padding: 19px 15px; }
    .bag-identity-heading { grid-template-columns: 43px minmax(0, 1fr); gap: 13px; }
    .bag-identity-mark { width: 40px; height: 40px; }
    .bag-identity-mark .gp-icon { width: 22px; height: 22px; }
    .bag-identity-heading h2 { font-size: 23px; }
    .bag-identity-progress { gap: 5px; }
    .bag-identity-progress span { display: grid; justify-items: center; gap: 3px; font-size: 6px; text-align: center; }
    .bag-identity-progress span b { width: 25px; height: 25px; }
    .bag-identity-progress i { min-width: 10px; }
    .bag-identity-name-grid { grid-template-columns: 1fr; }
    .bag-identity-button { width: 100%; }
    .bag-otp-actions { align-items: stretch; flex-direction: column; gap: 9px; }
    .bag-resend { align-self: center; }
    .bag-identity-person { grid-template-columns: 40px minmax(0, 1fr); }
    .bag-identity-person button { grid-column: 2; justify-self: start; }
    .gp-bag-page .bag-shell { gap: 0; }
    .gp-bag-page .bag-summary { margin-top: 32px; padding: 25px 20px; }
    .bag-validation-summary { margin-bottom: 18px; padding: 12px 13px; font-size: 9px; }
    .bag-field-error,
    .bag-identity-field > .bag-field-error { font-size: 8px; }
    .bag-item-price { align-items: flex-start; }
    .bag-item-actions { justify-items: stretch; }
    .bag-item-price .bag-item-edit { min-height: 42px; font-size: 9px; }
    .bag-edit-panel { inset-block-start: auto; width: 100%; height: min(94dvh, 880px); border-radius: 22px 22px 0 0; transform: translateY(105%); }
    .bag-edit-modal.open .bag-edit-panel { transform: translateY(0); }
    .bag-edit-head { min-height: 78px; padding: 8px 13px; }
    .bag-edit-product { grid-template-columns: 53px minmax(0, 1fr); }
    .bag-edit-product > img,
    .bag-edit-product > span { width: 53px; height: 58px; }
    .bag-edit-product strong { font-size: 16px; }
    .bag-edit-close { width: 39px; height: 39px; }
    .bag-edit-intro { padding: 19px 15px 13px; }
    .bag-edit-intro h2 { font-size: 25px; }
    .bag-edit-intro p { font-size: 9px; }
    .bag-edit-status { margin: 0 15px 12px; font-size: 9px; }
    #bag-edit-content { padding: 0 15px 18px; }
    .bag-edit-section { padding: 14px; }
    .bag-edit-grid,
    .bag-edit-measure-grid { grid-template-columns: 1fr; }
    .bag-edit-field { font-size: 10px; }
    .bag-edit-field > :where(input, select, textarea) { font-size: 13px; }
    .bag-edit-fabrics { grid-template-columns: 1fr 1fr; }
    .bag-edit-mode-cards { grid-template-columns: 1fr 1fr; }
    .bag-edit-mode-cards label { min-height: 68px; }
    .bag-edit-footer { padding-inline: 15px; }
    .bag-edit-footer button { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .bag-identity-stage.active,
    .bag-order-details,
    .bag-identity-spinner { animation: none !important; }
    .bag-edit-backdrop,
    .bag-edit-panel { transition: none !important; }
}