:root {
  --catalog-toolbar-working-height: 22px;
  --catalog-toolbar-divider-thickness: 1px;
  --catalog-toolbar-wording-size: 12px;
  /* Footer spacing below the final product row. */
  --catalog-footer-spacing: 120px;
  /* PRODUCT CARD SCALE — 100% is the original catalogue card size. */
  --catalog-card-scale: 100%;
  /* Product image scale — adjust each handbag independently. */
  --product-beige-scale: 85%;
  --product-black-scale: 68%;
  --product-coffee-scale: 90%;
  --product-white-scale: 90%;
  --product-espresso-scale: 58%;
  /* HOVER IMAGE 1 SCALE — adjust image 1 for each colour independently. */
  --catalog-beige-image-1-scale: 130%;
  /* BEIGE IMAGE 1 POSITION — nombor negatif gerakkan imej ke atas. */
  --catalog-beige-image-1-y: -30px;
  --catalog-black-image-1-scale: 105%;
  --catalog-coffee-image-1-scale: 120%;
  --catalog-white-image-1-scale: 140%;
  --catalog-espresso-image-1-scale: 150%;
  --catalog-shop-all-wording-offset: -15px;
  --catalog-sort-wording-offset: -15px;
  --catalog-refine-wording-offset: -15px;
  --catalog-divider: rgba(237, 232, 223, .32);
}

.shop-page { display:flex; flex-direction:column; min-height:100vh; overflow-x:clip; background:var(--oxblood); }
.shop-page .catalog { flex:1 0 auto; }
.shop-page > .footer-full { margin-top:auto; }

/* MAIN PAGE-style header */
.shop-header { position: fixed; z-index: 7; top: 31px; right: 0; left: 0; height: 50px; padding: 0 3.1vw; background: transparent; border-bottom: 1px solid var(--catalog-divider); transition: transform .32s ease; }
.shop-header.header-hidden { transform: translateY(calc(-100% - 31px)); }
.shop-header .brand, .shop-header .side-menu-toggle, .shop-header .text-button, .shop-header .bag-button { color: var(--ivory); }
.shop-header .brand { justify-self: center; }
.shop-header .header-actions { gap: 18px; }
.shop-header .bag-button { display: inline-flex; align-items: center; gap: 7px; font: 11px var(--mono); letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }

/* Catalog Toolbar — edit the variables at the top of this file. */
.catalog { min-height: calc(100svh - 81px); padding-top: 81px; background: transparent; }
.catalog-toolbar { position: sticky; z-index: 4; top: 0; display: flex; align-items: center; height: var(--catalog-toolbar-working-height); border-bottom: var(--catalog-toolbar-divider-thickness) solid var(--catalog-divider); background: transparent; transition: transform .32s cubic-bezier(.2, .7, .2, 1); }
.catalog-toolbar.toolbar-hidden { transform: translateY(-105%); }
.catalog-control { position: relative; display: flex; align-items: center; flex: 0 0 auto; height: calc(var(--catalog-toolbar-working-height) - var(--catalog-toolbar-divider-thickness)); }
.catalog-control:first-child { margin-right: auto; }
.catalog-trigger { display: flex; align-items: center; justify-content: flex-start; height: 100%; margin: 0; padding: 0 18px; border: 0; background: transparent; color: var(--ivory); font: var(--catalog-toolbar-wording-size)/1 var(--sans); letter-spacing: .01em; text-transform: none; white-space: nowrap; cursor: pointer; }
.catalog-control:first-child .catalog-trigger { padding-left: 3.1vw; transform: translateY(var(--catalog-shop-all-wording-offset)); }
.catalog-control:nth-child(2) .catalog-trigger { transform: translateY(var(--catalog-sort-wording-offset)); }
.refine-control .catalog-trigger { padding-right: 3.1vw; transform: translateY(var(--catalog-refine-wording-offset)); }
.catalog-trigger strong { margin-left: .28em; font-weight: 400; }

/* Dropdown menus */
.catalog-popover { position: absolute; top: calc(100% + 1px); left: 0; width: min(320px, calc(100vw - 40px)); max-height: 0; overflow: hidden; border: 1px solid transparent; background: rgba(74, 10, 4, .78); opacity: 0; backdrop-filter: blur(16px); transition: max-height .26s ease, opacity .2s ease, border-color .2s ease; }
.catalog-control:not(:first-child) .catalog-popover { right: 0; left: auto; }
.catalog-control.open .catalog-popover { max-height: 520px; border-color: rgba(237, 232, 223, .42); opacity: 1; }
.catalog-control.open .catalog-trigger span { transform: rotate(45deg); }
.catalog-menu-section { padding: 8px 0 12px; }
.catalog-menu-section + .catalog-menu-section { border-top: 1px solid rgba(237, 232, 223, .25); }
.catalog-popover p, .catalog-popover a, .catalog-popover button { display: block; width: 100%; margin: 0; padding: 10px 17px; border: 0; background: transparent; color: var(--ivory); font: 12px/1.4 var(--sans); text-align: left; text-decoration: none; }
.catalog-popover p { padding-top: 13px; color: rgba(237, 232, 223, .68); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.catalog-popover a:hover, .catalog-popover button:hover { background: rgba(237, 232, 223, .12); cursor: pointer; }
.size-options { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 8px; }
.size-options button { margin: -1px 0 0 -1px; border: 1px solid rgba(237, 232, 223, .35); text-align: center; }
.size-options button.active { background: var(--ivory); color: var(--oxblood); }
.color-options { padding: 4px 8px 8px; }
.color-options button { display: flex; align-items: center; gap: 10px; }
.color-options i { display: block; width: 13px; height: 13px; border: 1px solid rgba(237, 232, 223, .45); border-radius: 50%; background: var(--swatch); }
.color-options button.active { font-weight: 600; }

/* Products */
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: var(--catalog-footer-spacing); padding: 48px 3.1vw 0; }
.catalog-card { display: block; width: var(--catalog-card-scale); min-width: 0; justify-self: center; color: var(--ink); text-decoration: none; }
.catalog-image { position: relative; display: grid; aspect-ratio: 3 / 4; place-items: center; overflow: hidden; background: #f4f0e9; transition: background .25s ease; }
.catalog-image::after { position: absolute; inset: auto 18% 11%; height: 11%; background: radial-gradient(ellipse, rgba(30, 19, 15, .11), transparent 67%); content: ''; filter: blur(8px); }
.catalog-image img { position: relative; z-index: 1; width: var(--product-scale); max-height: 70%; object-fit: contain; transition: opacity .25s ease; }
.product-beige { --product-scale: var(--product-beige-scale); }
.product-black { --product-scale: var(--product-black-scale); }
.product-coffee { --product-scale: var(--product-coffee-scale); }
.product-white { --product-scale: var(--product-white-scale); }
.product-espresso { --product-scale: var(--product-espresso-scale); }
.product-beige img[src*="catalog/beige/1.png"] { transform: translateY(var(--catalog-beige-image-1-y)) scale(var(--catalog-beige-image-1-scale)); }
.product-black img[src*="catalog/black/1.png"] { transform: scale(var(--catalog-black-image-1-scale)); }
.product-coffee img[src*="catalog/coffee/1.png"] { transform: scale(var(--catalog-coffee-image-1-scale)); }
.product-white img[src*="catalog/white/1.png"] { transform: scale(var(--catalog-white-image-1-scale)); }
.product-espresso img[src*="catalog/espresso/1.png"] { transform: scale(var(--catalog-espresso-image-1-scale)); }
.catalog-info { display: flex; justify-content: space-between; gap: 8px; min-height: 54px; padding: 12px 13px; background: var(--ivory); font: 12px/1.35 var(--sans); }
.catalog-info span:last-child { font: 11px var(--mono); white-space: nowrap; }

@media (max-width: 620px) {
  .shop-header { padding: 0 20px; }
  .catalog-trigger { padding: 0 11px; font-size: 11px; }
  .catalog-control:first-child .catalog-trigger { padding-left: 20px; }
  .refine-control .catalog-trigger { padding-right: 20px; }
  .catalog-popover { width: calc(100vw - 40px); }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 72px; padding: 20px; }
  .catalog-info { min-height: 50px; padding: 10px; font-size: 11px; }
  .catalog-info span:last-child { font-size: 10px; }
}