@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800&display=swap');

:root {
    --A:    #C8511A;
    --ADK:  #A03D10;
    --ALT:  #FBEEE6;
    --PB:   #2C1A0E;
    --ink:  #1A0D04;
    --sand: #FBF5EE;
    --mist: #F5EDE3;
    --silk: #EDE0D4;
    --border: #E2D2C2;
    --muted: #917060;
    --serif: 'DM Serif Display', Georgia, serif;
    --sans:  'DM Sans', system-ui, sans-serif;
    --carton: #10b981;
    --carton-lt: #ecfdf5;
}
*, *::before, *::after { box-sizing: border-box; }

body, .page-content { background: var(--sand) !important; font-family: var(--sans); }

.pd-img-wrap {
    position: relative; background: var(--mist);
    width: 100%; aspect-ratio: 1/1; overflow: hidden;
}
.pd-img-wrap img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s ease;
}
.pd-img-wrap:active img { transform: scale(1.04); }

.pd-mode-ribbon {
    position: absolute; top: 14px; left: 0; z-index: 10;
    display: flex; flex-direction: column; gap: 5px; pointer-events: none;
}
.pd-ribbon-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    padding: 5px 12px 5px 10px; border-radius: 0 99px 99px 0;
    transition: all .25s ease;
}
.pd-ribbon-chip.retail  { background: var(--PB); color: #fff; }
.pd-ribbon-chip.bulk    { background: var(--A);  color: #fff; }
.pd-ribbon-chip.carton  { background: var(--carton); color: #fff; }
.pd-ribbon-chip.inactive { opacity: .35; transform: translateX(-6px); }
.pd-ribbon-chip.active   { opacity: 1;   transform: translateX(0); }

.pd-body { padding: 0 16px 120px; }

.pd-cat {
    display: inline-flex; align-items: center;
    font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); margin: 16px 0 6px;
}
.pd-name {
    font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.2;
    color: var(--ink); margin-bottom: 14px;
}

/* Tier table */
.pd-tiers {
    background: #fff; border-radius: 18px;
    border: 1.5px solid var(--border);
    box-shadow: 0 2px 0 var(--border), 0 6px 24px rgba(26,13,4,.06);
    overflow: hidden; margin-bottom: 14px;
}
.pd-tiers-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px 10px; background: var(--mist); border-bottom: 1px solid var(--silk);
}
.pd-tiers-title { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.pd-active-mode-pill {
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    padding: 3px 10px; border-radius: 99px; transition: all .2s;
}
.pd-active-mode-pill.retail { background: var(--PB);     color: #fff; }
.pd-active-mode-pill.bulk   { background: var(--A);      color: #fff; }
.pd-active-mode-pill.carton { background: var(--carton); color: #fff; }
.pd-active-mode-pill.none   { background: var(--silk);   color: var(--muted); }

.pd-tier-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; border-bottom: 1px solid var(--silk);
    transition: background .2s; position: relative; cursor: default;
}
.pd-tier-row:last-child { border-bottom: none; }
.pd-tier-row.is-active  { background: var(--ALT); }
.pd-tier-row.is-active.carton-active { background: var(--carton-lt); }
.pd-tier-row.is-active::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--A); border-radius: 0 2px 2px 0;
}
.pd-tier-row.is-active.carton-active::before { background: var(--carton); }

.pd-tier-range { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1; }
.pd-tier-range small { font-size: 10px; color: var(--muted); font-weight: 500; margin-left: 3px; }
.pd-tier-price { text-align: right; }
.pd-tier-price-main {
    font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--ink);
    line-height: 1; letter-spacing: -.02em;
}
.pd-tier-row.is-active            .pd-tier-price-main { color: var(--A); }
.pd-tier-row.is-active.carton-active .pd-tier-price-main { color: var(--carton); }
.pd-tier-price-was { font-size: 10.5px; color: var(--muted); text-decoration: line-through; margin-top: 1px; }
.pd-tier-mode-tag {
    font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    padding: 2px 7px; border-radius: 4px; margin-left: 6px; vertical-align: middle;
}
.pd-tier-mode-tag.retail { background: rgba(44,26,14,.12); color: var(--PB); }
.pd-tier-mode-tag.bulk   { background: var(--ALT); color: var(--A); }
.pd-tier-mode-tag.carton { background: var(--carton-lt); color: var(--carton); }

.pd-bulk-progress-wrap {
    padding: 10px 14px 12px; border-top: 1px solid var(--silk); background: #fff; display: none;
}
.pd-bulk-progress-wrap.show { display: block; }
.pd-bulk-progress-lbl {
    font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 6px;
    display: flex; justify-content: space-between; align-items: center;
}
.pd-bulk-progress-lbl span { color: var(--A); font-weight: 700; }
.pd-bulk-bar-track { height: 6px; background: var(--silk); border-radius: 99px; overflow: hidden; }
.pd-bulk-bar-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(to right, var(--A), #e07a3a);
    transition: width .35s cubic-bezier(.34,.85,.64,1); width: 0%;
}
.pd-bulk-bar-fill.carton-fill { background: linear-gradient(to right, var(--carton), #34d399); }

/* Stock badge */
.pd-stock {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; padding: 5px 12px;
    border-radius: 99px; margin-bottom: 14px;
}
.pd-stock.in  { background: #edfaf3; color: #0d6636; }
.pd-stock.low { background: #fffae8; color: #7a5200; }
.pd-stock.out { background: #fdeef0; color: #c0303e; }
.pd-stock-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pd-stock.in  .pd-stock-dot { background: #16a34a; }
.pd-stock.low .pd-stock-dot { background: #ca8a04; }
.pd-stock.out .pd-stock-dot { background: #dc2626; }

/* Select variant prompt */
.pd-select-prompt {
    background: var(--mist); border: 1.5px dashed var(--border);
    border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--muted); font-weight: 600;
}
.pd-select-prompt iconify-icon { font-size: 1.2rem; color: var(--A); flex-shrink: 0; }

.pd-section-lbl {
    font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 10px; display: block;
}

/* Colour swatches */
.pd-color-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pd-color-item { position: relative; }
.pd-color-item input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.pd-color-swatch {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 13px 7px 9px; border-radius: 99px;
    border: 1.5px solid var(--border); background: #fff; cursor: pointer;
    font-size: 12px; font-weight: 600; color: var(--ink);
    transition: border-color .15s, box-shadow .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.pd-color-swatch .swatch-dot {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,.12); flex-shrink: 0;
}
.pd-color-item input:checked + .pd-color-swatch {
    border-color: var(--A); background: var(--ALT);
    box-shadow: 0 0 0 3px rgba(200,81,26,.12);
}
.pd-color-item input:checked + .pd-color-swatch .swatch-dot { box-shadow: 0 0 0 2px var(--A); }
.pd-color-chip {
    display: inline-flex; align-items: center;
    padding: 7px 14px; border-radius: 99px;
    border: 1.5px solid var(--border); background: #fff; cursor: pointer;
    font-size: 12px; font-weight: 600; color: var(--ink);
    transition: border-color .15s, box-shadow .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.pd-color-item input:checked + .pd-color-chip {
    border-color: var(--A); background: var(--ALT);
    box-shadow: 0 0 0 3px rgba(200,81,26,.12); color: var(--A);
}

/* Size grid */
.pd-size-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.pd-size-item { position: relative; }
.pd-size-item input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.pd-size-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 52px; padding: 8px 12px; border-radius: 12px;
    border: 1.5px solid var(--border); background: #fff; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--ink);
    transition: border-color .15s, box-shadow .15s, background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
}
.pd-size-item input:checked + .pd-size-btn {
    border-color: var(--A); background: var(--A); color: #fff;
    box-shadow: 0 4px 12px rgba(200,81,26,.3);
}
.pd-size-item input:disabled + .pd-size-btn {
    opacity: .38; cursor: not-allowed; text-decoration: line-through;
}

/* Selected variant rows */
.pd-variants-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.pd-variant-row {
    background: #fff; border-radius: 16px; border: 1.5px solid var(--border);
    padding: 12px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    animation: rowIn .22s ease;
}
@keyframes rowIn { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform: translateY(0); } }
.pd-variant-info { flex: 1; min-width: 0; }
.pd-variant-name {
    font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 3px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.pd-variant-stock { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.pd-variant-stock.in  { background: #edfaf3; color: #0d6636; }
.pd-variant-stock.low { background: #fffae8; color: #7a5200; }
.pd-variant-stock.out { background: #fdeef0; color: #c0303e; }
.pd-variant-price-row { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.pd-variant-unit-price { font-family: var(--serif); font-size: 15px; color: var(--A); font-weight: 400; }
.pd-variant-unit-price.carton-price { color: var(--carton); }

.pd-qty-stepper {
    display: flex; align-items: center;
    background: var(--mist); border-radius: 12px; border: 1.5px solid var(--border);
    overflow: hidden; flex-shrink: 0;
}
.pd-qty-btn {
    width: 38px; height: 38px; border: none; background: transparent;
    font-size: 18px; font-weight: 400; color: var(--A); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s; flex-shrink: 0; line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.pd-qty-btn:active { background: var(--silk); }
.pd-qty-btn:disabled { opacity: .3; cursor: not-allowed; }
.pd-qty-input {
    width: 48px; border: none; outline: none; background: transparent;
    text-align: center; font-family: var(--sans); font-size: 14px; font-weight: 700;
    color: var(--ink); padding: 0;
    -webkit-appearance: none; -moz-appearance: textfield;
}
.pd-qty-input::-webkit-inner-spin-button,
.pd-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.pd-desc-card {
    background: #fff; border-radius: 16px; border: 1px solid var(--border);
    padding: 14px 16px; margin-bottom: 14px;
}
.pd-desc-text { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

.pd-gallery { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pd-gallery-img { width: 100%; border-radius: 16px; overflow: hidden; background: var(--mist); }
.pd-gallery-img img { width: 100%; height: auto; display: block; object-fit: cover; }

.pd-related-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pd-related-title { font-family: var(--serif); font-size: 20px; color: var(--ink); }
.pd-related-link  { font-size: 12px; color: var(--A); font-weight: 600; text-decoration: none; }
.pd-related-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-rel-card {
    background: #fff; border-radius: 16px; border: 1px solid var(--border);
    overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s;
}
.pd-rel-card:active { transform: scale(.98); }
.pd-rel-img { aspect-ratio: 1/1; overflow: hidden; background: var(--mist); }
.pd-rel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-rel-info { padding: 10px 11px; }
.pd-rel-cat  { font-size: 9.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pd-rel-name { font-size: 13px; font-weight: 700; color: var(--ink); margin: 3px 0; line-height: 1.3; }
.pd-rel-price { font-family: var(--serif); font-size: 15px; color: var(--A); }
.pd-rel-was   { font-size: 10px; text-decoration: line-through; color: var(--muted); margin-left: 4px; }

.footer.fixed { display: none !important; }
.pd-foot {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200;
    background: rgba(251,245,238,.97); backdrop-filter: blur(14px);
    border-top: 1px solid var(--silk); box-shadow: 0 -6px 28px rgba(26,13,4,.1);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.pd-foot-inner { display: flex; align-items: center; gap: 12px; }
.pd-foot-price-area { flex: 1; min-width: 0; }
.pd-foot-mode-lbl {
    font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 1px; transition: color .2s;
}
.pd-foot-mode-lbl.retail { color: var(--PB); }
.pd-foot-mode-lbl.bulk   { color: var(--A); }
.pd-foot-mode-lbl.carton { color: var(--carton); }
.pd-foot-mode-lbl.none   { color: var(--muted); }
.pd-foot-total {
    font-family: var(--serif); font-size: 24px; color: var(--ink); line-height: 1;
    letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-foot-btns { display: flex; gap: 8px; flex-shrink: 0; }
.pd-foot-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 20px; border-radius: 14px; font-family: var(--sans);
    font-size: 13.5px; font-weight: 800; letter-spacing: .02em;
    border: none; cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.pd-foot-btn.primary { background: var(--A); color: #fff; box-shadow: 0 4px 14px rgba(200,81,26,.35); }
.pd-foot-btn.primary:active { transform: scale(.97); box-shadow: none; }
.pd-foot-btn.secondary { background: #fff; color: var(--A); border: 1.5px solid var(--A); }
.pd-foot-btn.secondary:active { transform: scale(.97); }
.pd-foot-btn:disabled { opacity: .45; pointer-events: none; }

#cart-toast {
    position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
    z-index: 9999; display: none; width: 92%; max-width: 400px;
}
.toast-inner {
    background: var(--PB); color: #fff; border-radius: 16px;
    padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
.toast-title { font-weight: 800; font-size: 13px; margin-bottom: 2px; }
.toast-body  { font-size: 12px; opacity: .8; }
.toast-actions { display: flex; gap: 7px; flex-shrink: 0; }
.toast-btn { font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 9px; border: none; cursor: pointer; font-family: var(--sans); }
.toast-btn.view { background: rgba(255,255,255,.2); color: #fff; }
.toast-btn.ok   { background: var(--A); color: #fff; }

.p-b50 { padding-bottom: 120px !important; }