/* Online store design — "the shop floor and back-of-house" */

/* Storefront (hero) */
.cx-hero--storefront .cx-hero__visual { width: min(100%, 520px); }
.shopf { position: relative; padding-top: 20px; direction: ltr; }
.js .shopf { opacity: 0; transform: translateY(26px); }
.is-ready .shopf { opacity: 1; transform: none; transition: opacity 1.2s var(--ease-out) .2s, transform 1.6s var(--ease-out) .2s; }
.shopf__awning { height: 46px; border-radius: 14px 14px 4px 4px; background: repeating-linear-gradient(90deg, #e0a95f 0 34px, #1d1612 34px 68px); -webkit-mask: radial-gradient(17px at 17px 100%, transparent 98%, #000) 0 0 / 34px 100% repeat-x; mask: radial-gradient(17px at 17px 100%, transparent 98%, #000) 0 0 / 34px 100% repeat-x; box-shadow: 0 10px 20px rgba(0, 0, 0, .4); }
.shopf__sign { position: absolute; top: 6px; left: 50%; padding: 5px 14px; border-radius: 8px; background: #0a0807; border: 1px solid rgba(224, 169, 95, .5); color: var(--gold-l); font-size: 10.5px; letter-spacing: .22em; transform: translateX(-50%); box-shadow: 0 0 20px rgba(224, 169, 95, .35); }
.shopf__window { position: relative; display: grid; gap: 14px; margin: 0 10px; padding: 22px 20px; border: 1px solid rgba(255, 236, 214, .12); border-top: 0; background: radial-gradient(80% 60% at 50% 0%, rgba(243, 194, 122, .14), transparent 70%), linear-gradient(180deg, #17120e, #0d0a08); }
.shopf__shelf { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 14px; padding-bottom: 8px; border-bottom: 4px solid #3a2c20; box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .8); }
.shopf__item { display: grid; justify-items: center; gap: 6px; }
.shopf__item i { display: block; width: 70%; aspect-ratio: 3 / 4; border-radius: 8px 8px 4px 4px; background: linear-gradient(160deg, #5aa7b2, #2d5a61); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 16px -8px rgba(0, 0, 0, .8); }
.shopf__item--2 i { aspect-ratio: 1; border-radius: 50% 50% 8px 8px; background: linear-gradient(160deg, #f3c27a, #b8792f); }
.shopf__item--3 i { aspect-ratio: 4 / 3; background: linear-gradient(160deg, #e07a5c, #8f3f2c); }
.shopf__shelf + .shopf__shelf .shopf__item--1 i { aspect-ratio: 1; background: linear-gradient(160deg, #e8b06a, #9a6a2a); }
.shopf__shelf + .shopf__shelf .shopf__item--3 i { aspect-ratio: 3 / 4; background: linear-gradient(160deg, #7fb7c0, #3d6f77); }
.shopf__item b { padding: 1px 6px; border-radius: 4px; background: #f6efe4; color: #1d150f; font-size: 8.5px; letter-spacing: .08em; }
.shopf__fly { position: absolute; top: 24%; left: 50%; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(160deg, #f3c27a, #b8792f); box-shadow: 0 0 16px rgba(243, 194, 122, .7); opacity: 0; animation: fly 4.5s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes fly { 0%, 10% { transform: translate(0, 0) scale(1); opacity: 0; } 18% { opacity: 1; } 55% { transform: translate(140px, 190px) scale(.5); opacity: 1; } 62%, 100% { transform: translate(140px, 190px) scale(.2); opacity: 0; } }
.shopf__counter { display: flex; align-items: center; gap: 12px; margin: 0 10px; padding: 14px 18px; border-radius: 0 0 14px 14px; border: 1px solid rgba(255, 236, 214, .12); border-top: 3px solid rgba(224, 169, 95, .5); background: linear-gradient(180deg, #221a14, #120e0b); }
.shopf__cart { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(224, 169, 95, .1); color: var(--gold-l); }
.shopf__count { display: block; height: 1.3em; overflow: hidden; min-width: 1.4em; padding: 0 4px; border-radius: 999px; background: var(--terra); color: #fff; font-size: 12px; line-height: 1.3; text-align: center; }
.shopf__count span { display: grid; animation: cartCount 4.5s steps(1) infinite; }
.shopf__count i { font-style: normal; height: 1.3em; }
@keyframes cartCount { 0% { transform: translateY(0); } 58% { transform: translateY(-1.3em); } 90% { transform: translateY(-2.6em); } }
.shopf__pay { padding: 8px 12px; border-radius: 10px; background: var(--grad-fire); color: #1a0d08; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; }
.shopf__ticket { position: relative; display: grid; gap: 4px; width: 92px; margin-left: auto; padding: 8px 10px 10px; background: #f6efe4; color: #1d150f; clip-path: polygon(0 0, 100% 0, 100% 100%, 90% 92%, 80% 100%, 70% 92%, 60% 100%, 50% 92%, 40% 100%, 30% 92%, 20% 100%, 10% 92%, 0 100%); transform-origin: top; animation: ticket 4.5s var(--ease-out) infinite; }
.shopf__ticket i { display: block; height: 4px; border-radius: 2px; background: rgba(29, 21, 15, .25); }
.shopf__ticket .shopf__s { width: 60%; }
.shopf__ticket b { font-size: 9px; letter-spacing: .1em; color: #2f7a3d; }
@keyframes ticket { 0%, 60% { transform: scaleY(0); opacity: 0; } 70%, 92% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Conveyor purchase journey */
.conv { position: relative; }
.conv__belt { position: relative; height: 26px; margin-bottom: 26px; border-radius: 13px; background: repeating-linear-gradient(90deg, #2a211a 0 16px, #1a1410 16px 32px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 236, 214, .08); animation: belt 1.2s linear infinite; }
@keyframes belt { to { background-position: -32px 0; } }
.conv__box { position: absolute; top: -22px; right: 0; display: grid; place-items: center; width: 40px; height: 32px; border-radius: 6px; background: linear-gradient(180deg, #caa274, #b68b5c); color: #2b1d12; box-shadow: 0 8px 14px rgba(0, 0, 0, .6); animation: convBox 8s var(--ease-cine) infinite; }
.conv__box .ico { width: 16px; height: 16px; }
@keyframes convBox { 0%, 10% { right: 2%; } 25%, 35% { right: 33%; } 50%, 60% { right: 58%; } 75%, 90% { right: 88%; } 100% { right: 2%; } }
.conv__stops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.conv__stop { position: relative; padding: 20px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--panel); }
.conv__stop::before { content: ""; position: absolute; top: -27px; left: 50%; width: 2px; height: 24px; background: linear-gradient(rgba(224, 169, 95, .6), transparent); }
.conv__num { font-size: 12px; color: var(--gold); }
.conv__stop h3 { margin-top: 8px; font-size: 20px; font-weight: 900; }
.conv__stop p { margin-top: 6px; color: var(--text-2); font-size: 14.5px; line-height: 1.9; }

/* Warehouse bins */
.rack { position: relative; padding: 0 16px; }
.rack__post { position: absolute; top: -10px; bottom: -10px; right: 0; width: 8px; border-radius: 3px; background: repeating-linear-gradient(180deg, #5a4c40 0 6px, #3a3029 6px 10px); }
.rack__post--b { right: auto; left: 0; }
.rack__bins { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.rack__bins > li { position: relative; padding-bottom: 10px; border-bottom: 6px solid #3a2c20; }
.bin__box { position: relative; padding: 30px 18px 18px; border-radius: 6px 6px 14px 14px; background: linear-gradient(180deg, #2c4a50, #1d3236); border: 1px solid rgba(127, 183, 192, .3); box-shadow: inset 0 8px 0 rgba(255, 255, 255, .05), 0 20px 30px -20px rgba(0, 0, 0, .8); clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%); transition: transform .4s var(--ease-out); }
.rack__bins > li:nth-child(2) .bin__box { background: linear-gradient(180deg, #5a3a20, #3a2614); border-color: rgba(224, 169, 95, .3); }
.rack__bins > li:nth-child(3) .bin__box { background: linear-gradient(180deg, #4a2620, #321914); border-color: rgba(224, 122, 92, .3); }
.rack__bins > li:nth-child(4) .bin__box { background: linear-gradient(180deg, #2a3a2c, #1b261d); border-color: rgba(143, 207, 154, .3); }
.bin__box:hover { transform: translateY(-5px); }
.bin__card { position: absolute; top: 8px; right: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 2px 8px; border-radius: 4px; background: #f6efe4; color: #1d150f; font-size: 12.5px; font-weight: 900; }
.bin__card .mono { font-size: 9px; color: #7d6450; }
.bin__box h3 { margin-top: 12px; font-size: 17px; font-weight: 900; }
.bin__box p { margin-top: 4px; color: rgba(246, 238, 229, .82); font-size: 14px; line-height: 1.85; }

/* Spec label (quality checklist) */
.spec { max-width: 440px; margin-inline: auto; padding: 14px 16px 12px; border: 3px solid #1d150f; background: #fbf6ee; color: #1d150f; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .9); rotate: -1deg; }
.spec__title { padding-bottom: 4px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 900; line-height: 1.2; border-bottom: 1px solid #1d150f; }
.spec__sub { padding: 4px 0; font-size: 13px; font-weight: 700; border-bottom: 10px solid #1d150f; }
.spec__bar { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12.5px; font-weight: 900; border-bottom: 4px solid #1d150f; }
.spec__rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(29, 21, 15, .35); font-size: 14.5px; font-weight: 700; }
.spec__rows b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1d150f; color: #fbf6ee; }
.spec__rows .ico { width: 13px; height: 13px; stroke-width: 3; }
.spec__foot { padding-top: 8px; border-top: 6px solid #1d150f; font-size: 11.5px; font-weight: 700; color: #4a3a2e; }

/* Product cards for real cases */
.pcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pcards > li { display: flex; }
.pcard { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2); background: var(--panel); transition: transform .5s var(--ease-out), border-color .4s, box-shadow .5s; }
.pcard:hover { transform: translateY(-6px); border-color: rgba(224, 169, 95, .4); box-shadow: 0 40px 70px -40px rgba(210, 106, 78, .55); }
.pcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0d0a08; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: saturate(.85) brightness(.9); transition: filter .8s var(--ease-out), transform 1.2s var(--ease-out); }
.pcard:hover .pcard__media img, .pcard:focus-within .pcard__media img { filter: none; transform: scale(1.04); }
.pcard__badge { position: absolute; top: 14px; right: 14px; padding: 5px 12px; border-radius: 999px; background: var(--grad-fire); color: #1a0d08; font-size: 12px; font-weight: 900; }
.pcard__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.pcard__sku { font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.pcard__body h3 { font-size: 20px; font-weight: 900; line-height: 1.5; }
.pcard__body > p:not(.pcard__sku) { flex: 1; color: var(--text-2); font-size: 14.5px; line-height: 1.95; }
.pcard__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; padding: 12px 16px; border-radius: 12px; background: rgba(224, 169, 95, .12); border: 1px solid rgba(224, 169, 95, .35); color: var(--gold-l); font-weight: 800; transition: background .3s, color .3s; }
.pcard:hover .pcard__btn { background: var(--grad-fire); color: #1a0d08; border-color: transparent; }

/* Hanging aisle signs */
.aisles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 40px; }
.aisle { position: relative; display: block; text-align: center; }
.aisle__chains { position: absolute; top: -40px; left: 18%; right: 18%; height: 40px; border-inline: 2px dotted rgba(255, 236, 214, .3); }
.aisle__board { display: grid; justify-items: center; gap: 6px; padding: 18px 14px; border-radius: 12px; background: linear-gradient(180deg, #1d2d30, #132023); border: 1px solid rgba(127, 183, 192, .35); color: #e8f4f6; font-size: 16px; font-weight: 900; transform-origin: 50% -40px; transition: transform .6s var(--ease-out), border-color .4s; }
.aisle__no { font-size: 10px; letter-spacing: .2em; color: var(--teal); }
.aisle__board .ico { color: var(--gold-l); transition: transform .4s var(--ease-out); }
.aisle:hover .aisle__board, .aisle:focus-visible .aisle__board { transform: rotate(-3deg); border-color: var(--gold); }
.aisle:hover .aisle__board .ico { transform: translateX(-4px); }

/* CTA visual: shopping bag */
.cta__visual--bag { justify-items: center; }
.bag { position: relative; width: min(100%, 300px); padding-top: 70px; rotate: -3deg; }
.bag__handle { position: absolute; top: 4px; left: 50%; width: 120px; height: 90px; margin-left: -60px; border: 9px solid #caa274; border-bottom: 0; border-radius: 60px 60px 0 0; }
.bag__body { position: relative; display: grid; justify-items: center; gap: 12px; padding: 30px 24px 26px; border-radius: 6px 6px 18px 18px; background: linear-gradient(180deg, #e0a95f, #c8833f); color: #1a0d08; clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%); box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .9); }
.bag__body svg { width: 54px; height: 54px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3)); }
.bag__brand { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; }
.bag__list { display: grid; gap: 6px; width: 100%; }
.bag__list li { padding: 6px 10px; border-radius: 8px; background: rgba(26, 13, 8, .1); font-size: 13.5px; font-weight: 800; }
.js .bag__list li { opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .5s var(--ease-out); transition-delay: calc(var(--i) * .2s + .5s); }
.js .bag.is-in .bag__list li, .reveal-all .bag__list li { opacity: 1; transform: none; }
.bag__tag { position: absolute; top: 60px; left: -6px; padding: 6px 12px; border-radius: 6px; background: #f6efe4; color: #9f4d3e; font-size: 13px; font-weight: 900; rotate: -14deg; box-shadow: 0 8px 14px rgba(0, 0, 0, .4); }

@media (max-width: 1100px) {
	.cx-hero--storefront .cx-hero__visual { position: relative; top: auto; left: auto; z-index: 1; width: min(100%, 480px); margin: 34px auto 0; opacity: 1; pointer-events: auto; }
	.conv__stops { grid-template-columns: 1fr 1fr; }
	.aisles { grid-template-columns: 1fr 1fr; row-gap: 56px; }
}
@media (max-width: 640px) {
	.cx-hero--storefront .cx-hero__visual { left: auto; top: auto; width: 100%; opacity: 1; }
	.conv__belt { display: none; }
	.conv__stops, .rack__bins, .pcards { grid-template-columns: 1fr; }
	.conv__stop::before { display: none; }
	.spec { rotate: 0deg; }
	.aisles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.shopf__fly, .shopf__count span, .shopf__ticket, .conv__belt, .conv__box { animation: none; }
}