/* Product card hover and button design (second line, outer line, corner marks, Quick view / Add to Cart, photo arrows).
   This file is loaded at runtime by the layout (a plain stylesheet in public/): edit it and reload the page, no build and no restart needed.
   It is plain CSS (not processed by Tailwind), kept in the same order it had at the end of globals.css, so it overrides the earlier card rules there exactly as before. */

/* Card options (Add to Cart, View product): shown when the pointer is on the card, always on touch screens. The small logo mark and the corner tag
   fade out while they show so nothing sits under the panel. The ring now lifts together with the frame so the lines stay concentric. */
.card-add-bar { opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .card-add-bar, .card-add-bar:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.image-mark-corner, .pcard-badge { transition: opacity .2s ease; }
.pcard:hover .image-mark-corner, .pcard:hover .pcard-badge, .pcard:focus-within .image-mark-corner, .pcard:focus-within .pcard-badge { opacity: 0; }

/* Product card hover, one clean effect instead of many overlapping lines. On hover the older extras (a second inner frame line, the two gold
   corner brackets, the lifting and scaling of the ring and the frame, the tilt) used to stack on top of the ring, the dashed ring and the frame
   edge and looked misaligned. Now nothing in the picture area moves: the ring and dashed ring simply glow a little brighter, the frame edge and
   glow strengthen, and the photo eases in slightly. The card itself still lifts as one piece. */
.pcard-stage::after { display: none !important; }
/* (the card's ::before is now the outer corner marks, see the end of this file) */ /* the ::after is the outer gold line, see the hover lines block at the end */
.tilt:has(.pcard-stage) { transform: none !important; }
.tilt:has(.pcard-stage)::after { display: none !important; }
.pcard:hover .pcard-disc, .pcard:hover .pcard-ring { transform: translate(-50%, -50%); }
.pcard:hover .pcard-ring { border-color: rgb(var(--accent) / .55); }
.pcard-ring::after { transition: border-color .45s; }
.pcard:hover .pcard-ring::after { border-color: rgb(var(--accent) / .32); }
.pcard:hover .pcard-shadow { transform: translateX(-50%); }
.pcard:hover .pcard-disc:not(.is-cut) { box-shadow: 0 0 0 1px rgb(var(--accent) / .9), 0 0 26px -4px rgb(var(--accent) / .38), 0 3px 6px rgb(0 0 0 / .22), 0 30px 42px -24px rgb(0 0 0 / .85); }

/* Product card hover, one coordinated change (nothing in the picture area moves, so every line stays aligned): the whole card lifts as one piece with a
   gold border and glow, a gold aura fills the stage behind the frame, the ring and dashed ring turn brighter gold and four sharp corner marks lock onto the
   ring corners, the white frame gets a gold edge and glow, and the photo eases in a little. The options panel and the photo arrows appear. */
.pcard:has(.pcard-stage) { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.pcard:has(.pcard-stage):hover { transform: translateY(-4px) !important; border-color: rgb(var(--accent) / .6) !important; box-shadow: 0 24px 46px -24px rgb(var(--accent) / .32), 0 0 0 1px rgb(var(--accent) / .16) !important; }
.pcard-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(90% 72% at 50% 46%, rgb(var(--accent) / .2), rgb(var(--accent) / .05) 56%, transparent 80%); }
.pcard:hover .pcard-stage::before { opacity: 1; }
.pcard:hover .pcard-ring { border-color: rgb(var(--accent) / .55); transform: translate(-50%, -50%); }
.pcard:hover .pcard-ring::after { border-color: rgb(var(--accent) / .2); }
.pcard:hover .pcard-disc { transform: translate(-50%, -50%); }
.pcard:hover .pcard-disc:not(.is-cut) { box-shadow: 0 0 0 1px rgb(var(--accent) / .8), 0 0 22px -4px rgb(var(--accent) / .28), 0 3px 6px rgb(0 0 0 / .22), 0 30px 42px -24px rgb(0 0 0 / .85); }
.pcard:hover .pcard-disc:not(.is-cut) .pcard-photo { transform: scale(1.05); }
.pcard:hover .pcard-shadow { transform: translateX(-50%); }
html[data-stage="square"] .pcard-ring::before { content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0; transition: opacity .35s ease; filter: drop-shadow(0 0 2px rgb(166 124 46 / .4));
  --h: linear-gradient(90deg, #b3842a 0%, #c49232 9%, #d8a741 19%, #ecbb51 29%, #fdd265 38%, #ffd978 44%, #fdd265 50%, #ecbb51 59%, #d8a741 69%, #c49232 80%, #b3842a 100%); --hr: linear-gradient(270deg, #b3842a 0%, #c49232 9%, #d8a741 19%, #ecbb51 29%, #fdd265 38%, #ffd978 44%, #fdd265 50%, #ecbb51 59%, #d8a741 69%, #c49232 80%, #b3842a 100%);
  --v: linear-gradient(180deg, #b3842a 0%, #c49232 9%, #d8a741 19%, #ecbb51 29%, #fdd265 38%, #ffd978 44%, #fdd265 50%, #ecbb51 59%, #d8a741 69%, #c49232 80%, #b3842a 100%); --vb: linear-gradient(0deg, #b3842a 0%, #c49232 9%, #d8a741 19%, #ecbb51 29%, #fdd265 38%, #ffd978 44%, #fdd265 50%, #ecbb51 59%, #d8a741 69%, #c49232 80%, #b3842a 100%);
  background:
    linear-gradient(90deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) top left / 22px .8px no-repeat, var(--h) top left / 22px .8px no-repeat, linear-gradient(180deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) top left / .8px 22px no-repeat, var(--v) top left / .8px 22px no-repeat,
    linear-gradient(270deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) top right / 22px .8px no-repeat, var(--hr) top right / 22px .8px no-repeat, linear-gradient(180deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) top right / .8px 22px no-repeat, var(--v) top right / .8px 22px no-repeat,
    linear-gradient(90deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) bottom left / 22px .8px no-repeat, var(--h) bottom left / 22px .8px no-repeat, linear-gradient(0deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) bottom left / .8px 22px no-repeat, var(--vb) bottom left / .8px 22px no-repeat,
    linear-gradient(270deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) bottom right / 22px .8px no-repeat, var(--hr) bottom right / 22px .8px no-repeat, linear-gradient(0deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) bottom right / .8px 22px no-repeat, var(--vb) bottom right / .8px 22px no-repeat; }
@property --k { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes corner-glitter {
  0%, 50%, 100% { --k: 1; }
  12.5%, 62.5% { --k: 0; }
  25%, 75% { --k: .9; }
  37.5%, 87.5% { --k: .1; }
}
html[data-stage="square"] .pcard:hover .pcard-ring::before { opacity: 1; animation: corner-glitter 3.2s ease-in-out infinite; } /* only the four corner marks: original colour, size and glow, glittering together */
/* Card buttons: Quick view, the count and Add to Cart are clear glass (transparent inside, the card shows through) with a glittering dark-gold edge. The edge is a masked
   1px ring of fine bright and deep gold bands that shimmers slowly while the card is hovered, with two tiny twinkling points on it. */
@keyframes edge-shimmer { from { background-position: 0 0; } to { background-position: 96px 0; } }
@keyframes edge-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.cbtn-view, .cbtn-add, .cbtn-qty { position: relative; height: 100%; min-width: 0; border: 0; background: transparent; box-shadow: none; font-size: clamp(.4rem, 2.35cqw, .54rem); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.cbtn-view::before, .cbtn-add::before, .cbtn-qty::before { content: ""; position: absolute; inset: 0; padding: .8px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, #8f6a22 0%, #a07729 9%, #b48b36 19%, #c89f45 29%, #d9b457 38%, #e2c06a 44%, #d9b457 50%, #c89f45 59%, #b48b36 69%, #a07729 80%, #8f6a22 100%) 0 0 / 96px 100% repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude; }
.pcard:hover .cbtn-view::before, .pcard:hover .cbtn-add::before, .pcard:hover .cbtn-qty::before { animation: edge-shimmer 4s linear infinite; }
.cbtn-view { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 5px; padding: 0 clamp(6px, 3cqw, 12px); font-weight: 600; color: rgb(var(--fg)); transition: color .2s; }
.cbtn-view svg { color: rgb(var(--accent-bright)); flex: none; }
.cbtn-view:hover { color: rgb(var(--accent-bright)); }
.cbtn-add { display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 5px; padding: 0 clamp(4px, 2cqw, 8px); font-weight: 700; color: rgb(var(--accent-bright)); transition: color .2s; }
.cbtn-add svg { flex: none; }
.cbtn-add:hover { color: rgb(var(--fg)); }
.cbtn-add.is-done { color: rgb(var(--accent-bright)); }
.cbtn-qty { display: flex; flex: none; align-items: stretch; color: rgb(var(--fg)); }
.pcard-stage .pcard-alt { display: none !important; }

/* Photo arrows on product cards: small, light round glass buttons with a fine gold chevron at the left and right edges of the frame. Hidden until the pointer is
   on the card (always shown on touch screens); they firm up when pointed at. */
.card-arrow { position: absolute; top: 50%; z-index: 3; width: 20px; height: 20px; margin-top: -10px; display: grid; place-items: center; border-radius: 9999px; color: rgb(var(--accent-bright));
  background: rgb(var(--bg) / .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgb(var(--accent) / .35);
  opacity: 0; transition: opacity .25s ease, background-color .2s ease, color .2s ease; }
.card-arrow:hover { background: rgb(var(--accent)); color: rgb(var(--on-brand, 20 20 22)); }
.pcard:hover .card-arrow, .card-arrow:focus-visible { opacity: .65; }
.pcard:hover .card-arrow:hover { opacity: 1; }

/* Outer lines on hover: the card edge and the ring become one continuous, dark gold gradient line on all four sides (no gaps at the top). */
.pcard:has(.pcard-stage):hover { border-color: rgb(var(--accent) / .4) !important; box-shadow: 0 22px 40px -26px rgb(var(--accent) / .3) !important; }
html[data-stage="square"] .pcard:hover .pcard-ring { border-color: transparent; border-image: linear-gradient(135deg, rgb(var(--accent) / .8), rgb(var(--accent) / .3) 50%, rgb(var(--accent) / .8)) 1; }

/* Card hover colour only: a deeper antique gold instead of the brighter yellow, applied only while hovering (the resting card keeps its original colours). */
.pcard:hover .pcard-ring, .pcard:hover .pcard-disc, .pcard-stage::before, .card-add-bar, .card-arrow { --accent: 166 124 46; --accent-bright: 184 142 56; }
.pcard:has(.pcard-stage):hover { border-color: rgb(166 124 46 / .6) !important; box-shadow: 0 24px 46px -24px rgb(166 124 46 / .32), 0 0 0 1px rgb(166 124 46 / .16) !important; }

/* Narrower cards (3 or 4 to a row on a laptop) keep all three buttons like the home page: the bar widens and the spacing tightens so Quick view, quantity and Add to Cart still fit. */
@container (max-width: 240px) { .card-add-bar { inset-inline: 5%; gap: 5px; } .cbtn-view, .cbtn-add, .cbtn-qty { letter-spacing: .06em; } .cbtn-view { padding: 0 6px; gap: 4px; } .cbtn-add { padding: 0 3px; gap: 3px; } }
/* Narrower still: the quantity box is dropped so both labels keep their words. */
@container (max-width: 226px) { .cbtn-qty { display: none; } }
/* Phone width (two to a row): Quick view shrinks to its eye so Add to Cart keeps its full label. */
@container (max-width: 180px) { .cbtn-lbl { display: none; } .cbtn-view { padding: 0; width: 30px; } .card-add-bar { inset-inline: 7%; gap: 10px; } }

/* Boxes: a very small corner radius (3px) on the outer corners; the edge ring follows it, and the edge is 9% less opaque. */
.cbtn-view, .cbtn-add, .cbtn-qty { border-radius: 4px; }
.cbtn-qty { border-radius: 4px 0 0 4px; }
.cbtn-qty + .cbtn-add { border-radius: 0 4px 4px 0; }
.cbtn-view::before, .cbtn-add::before, .cbtn-qty::before { border-radius: inherit; opacity: .91; }
@container (max-width: 226px) { .cbtn-qty + .cbtn-add { border-radius: 4px; } }

@property --o { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes side-flow { to { --o: 100; } }
/* Hover lines use the same gold as the Quick view / Add to Cart edge: the same colours and stops, 4s linear shimmer, 0.8px line and 91% opacity; here the gradient runs around the line (conic, six repeats) so the left, right, top and bottom all show it. The card's outer edge, the ring and the white
   frame edge are masked overlays (the old flat lines beneath are made transparent on hover so only this line shows). Corner marks and the dashed ring are unchanged. */
@property --ga { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes edge-spin { to { --ga: 60deg; } }
:root { --edge-gold: linear-gradient(90deg, #8f6a22 0%, #a07729 9%, #b48b36 19%, #c89f45 29%, #d9b457 38%, #e2c06a 44%, #d9b457 50%, #c89f45 59%, #b48b36 69%, #a07729 80%, #8f6a22 100%) 0 0 / 96px 100% repeat-x; }
.pcard:has(.pcard-stage) { position: relative; }
html .pcard:has(.pcard-stage)::after { content: "" !important; display: block !important; position: absolute !important; top: -1px !important; left: -1px !important; right: -1px !important; bottom: -1px !important; width: auto !important; height: auto !important;
  border: 0 !important; padding: 0; transform: none !important; opacity: 0 !important; pointer-events: none; z-index: 4; transition: opacity .35s ease; background: repeating-linear-gradient(90deg, #8f6a22 calc(var(--o) * 1% + 0%), #a07729 calc(var(--o) * 1% + 9%), #b48b36 calc(var(--o) * 1% + 19%), #c89f45 calc(var(--o) * 1% + 29%), #d9b457 calc(var(--o) * 1% + 38%), #e2c06a calc(var(--o) * 1% + 44%), #d9b457 calc(var(--o) * 1% + 50%), #c89f45 calc(var(--o) * 1% + 59%), #b48b36 calc(var(--o) * 1% + 69%), #a07729 calc(var(--o) * 1% + 80%), #8f6a22 calc(var(--o) * 1% + 100%)) 19px 0 / calc(100% - 38px) .8px no-repeat,
    repeating-linear-gradient(180deg, #8f6a22 calc(var(--o) * 1% + 0%), #a07729 calc(var(--o) * 1% + 9%), #b48b36 calc(var(--o) * 1% + 19%), #c89f45 calc(var(--o) * 1% + 29%), #d9b457 calc(var(--o) * 1% + 38%), #e2c06a calc(var(--o) * 1% + 44%), #d9b457 calc(var(--o) * 1% + 50%), #c89f45 calc(var(--o) * 1% + 59%), #b48b36 calc(var(--o) * 1% + 69%), #a07729 calc(var(--o) * 1% + 80%), #8f6a22 calc(var(--o) * 1% + 100%)) 100% 19px / .8px calc(100% - 38px) no-repeat,
    repeating-linear-gradient(270deg, #8f6a22 calc(var(--o) * 1% + 0%), #a07729 calc(var(--o) * 1% + 9%), #b48b36 calc(var(--o) * 1% + 19%), #c89f45 calc(var(--o) * 1% + 29%), #d9b457 calc(var(--o) * 1% + 38%), #e2c06a calc(var(--o) * 1% + 44%), #d9b457 calc(var(--o) * 1% + 50%), #c89f45 calc(var(--o) * 1% + 59%), #b48b36 calc(var(--o) * 1% + 69%), #a07729 calc(var(--o) * 1% + 80%), #8f6a22 calc(var(--o) * 1% + 100%)) 19px 100% / calc(100% - 38px) .8px no-repeat,
    repeating-linear-gradient(0deg, #8f6a22 calc(var(--o) * 1% + 0%), #a07729 calc(var(--o) * 1% + 9%), #b48b36 calc(var(--o) * 1% + 19%), #c89f45 calc(var(--o) * 1% + 29%), #d9b457 calc(var(--o) * 1% + 38%), #e2c06a calc(var(--o) * 1% + 44%), #d9b457 calc(var(--o) * 1% + 50%), #c89f45 calc(var(--o) * 1% + 59%), #b48b36 calc(var(--o) * 1% + 69%), #a07729 calc(var(--o) * 1% + 80%), #8f6a22 calc(var(--o) * 1% + 100%)) 0 19px / .8px calc(100% - 38px) no-repeat; }
html .pcard:has(.pcard-stage):hover::after { opacity: .91 !important; animation: side-flow 4s linear infinite; }
.pcard:has(.pcard-stage):hover { border-color: transparent !important; }
html[data-stage="square"] .pcard-stage::after { content: "" !important; display: block !important; position: absolute !important; inset: auto !important; left: 50% !important; top: 46% !important; width: 91% !important; height: auto !important; aspect-ratio: 1 !important;
  transform: translate(-50%, -50%) !important; border: 0 !important; padding: 0; opacity: 0 !important; pointer-events: none; z-index: 1; transition: opacity .35s ease; filter: drop-shadow(0 0 2px rgb(166 124 46 / .4));
  --h: linear-gradient(90deg, #b3842a 0%, #c49232 9%, #d8a741 19%, #ecbb51 29%, #fdd265 38%, #ffd978 44%, #fdd265 50%, #ecbb51 59%, #d8a741 69%, #c49232 80%, #b3842a 100%); --hr: linear-gradient(270deg, #b3842a 0%, #c49232 9%, #d8a741 19%, #ecbb51 29%, #fdd265 38%, #ffd978 44%, #fdd265 50%, #ecbb51 59%, #d8a741 69%, #c49232 80%, #b3842a 100%);
  --v: linear-gradient(180deg, #b3842a 0%, #c49232 9%, #d8a741 19%, #ecbb51 29%, #fdd265 38%, #ffd978 44%, #fdd265 50%, #ecbb51 59%, #d8a741 69%, #c49232 80%, #b3842a 100%); --vb: linear-gradient(0deg, #b3842a 0%, #c49232 9%, #d8a741 19%, #ecbb51 29%, #fdd265 38%, #ffd978 44%, #fdd265 50%, #ecbb51 59%, #d8a741 69%, #c49232 80%, #b3842a 100%);
  background:
    linear-gradient(90deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) top left / 22px .8px no-repeat, var(--h) top left / 22px .8px no-repeat, linear-gradient(180deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) top left / .8px 22px no-repeat, var(--v) top left / .8px 22px no-repeat,
    linear-gradient(270deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) top right / 22px .8px no-repeat, var(--hr) top right / 22px .8px no-repeat, linear-gradient(180deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) top right / .8px 22px no-repeat, var(--v) top right / .8px 22px no-repeat,
    linear-gradient(90deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) bottom left / 22px .8px no-repeat, var(--h) bottom left / 22px .8px no-repeat, linear-gradient(0deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) bottom left / .8px 22px no-repeat, var(--vb) bottom left / .8px 22px no-repeat,
    linear-gradient(270deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) bottom right / 22px .8px no-repeat, var(--hr) bottom right / 22px .8px no-repeat, linear-gradient(0deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) bottom right / .8px 22px no-repeat, var(--vb) bottom right / .8px 22px no-repeat,
    repeating-linear-gradient(90deg, rgb(143 106 34 / .91) calc(var(--o) * 1% + 0%), rgb(160 119 41 / .91) calc(var(--o) * 1% + 9%), rgb(180 139 54 / .91) calc(var(--o) * 1% + 19%), rgb(200 159 69 / .91) calc(var(--o) * 1% + 29%), rgb(217 180 87 / .91) calc(var(--o) * 1% + 38%), rgb(226 192 106 / .91) calc(var(--o) * 1% + 44%), rgb(217 180 87 / .91) calc(var(--o) * 1% + 50%), rgb(200 159 69 / .91) calc(var(--o) * 1% + 59%), rgb(180 139 54 / .91) calc(var(--o) * 1% + 69%), rgb(160 119 41 / .91) calc(var(--o) * 1% + 80%), rgb(143 106 34 / .91) calc(var(--o) * 1% + 100%)) 19px 0 / calc(100% - 38px) .8px no-repeat,
    repeating-linear-gradient(180deg, rgb(143 106 34 / .91) calc(var(--o) * 1% + 0%), rgb(160 119 41 / .91) calc(var(--o) * 1% + 9%), rgb(180 139 54 / .91) calc(var(--o) * 1% + 19%), rgb(200 159 69 / .91) calc(var(--o) * 1% + 29%), rgb(217 180 87 / .91) calc(var(--o) * 1% + 38%), rgb(226 192 106 / .91) calc(var(--o) * 1% + 44%), rgb(217 180 87 / .91) calc(var(--o) * 1% + 50%), rgb(200 159 69 / .91) calc(var(--o) * 1% + 59%), rgb(180 139 54 / .91) calc(var(--o) * 1% + 69%), rgb(160 119 41 / .91) calc(var(--o) * 1% + 80%), rgb(143 106 34 / .91) calc(var(--o) * 1% + 100%)) 100% 19px / .8px calc(100% - 38px) no-repeat,
    repeating-linear-gradient(270deg, rgb(143 106 34 / .91) calc(var(--o) * 1% + 0%), rgb(160 119 41 / .91) calc(var(--o) * 1% + 9%), rgb(180 139 54 / .91) calc(var(--o) * 1% + 19%), rgb(200 159 69 / .91) calc(var(--o) * 1% + 29%), rgb(217 180 87 / .91) calc(var(--o) * 1% + 38%), rgb(226 192 106 / .91) calc(var(--o) * 1% + 44%), rgb(217 180 87 / .91) calc(var(--o) * 1% + 50%), rgb(200 159 69 / .91) calc(var(--o) * 1% + 59%), rgb(180 139 54 / .91) calc(var(--o) * 1% + 69%), rgb(160 119 41 / .91) calc(var(--o) * 1% + 80%), rgb(143 106 34 / .91) calc(var(--o) * 1% + 100%)) 19px 100% / calc(100% - 38px) .8px no-repeat,
    repeating-linear-gradient(0deg, rgb(143 106 34 / .91) calc(var(--o) * 1% + 0%), rgb(160 119 41 / .91) calc(var(--o) * 1% + 9%), rgb(180 139 54 / .91) calc(var(--o) * 1% + 19%), rgb(200 159 69 / .91) calc(var(--o) * 1% + 29%), rgb(217 180 87 / .91) calc(var(--o) * 1% + 38%), rgb(226 192 106 / .91) calc(var(--o) * 1% + 44%), rgb(217 180 87 / .91) calc(var(--o) * 1% + 50%), rgb(200 159 69 / .91) calc(var(--o) * 1% + 59%), rgb(180 139 54 / .91) calc(var(--o) * 1% + 69%), rgb(160 119 41 / .91) calc(var(--o) * 1% + 80%), rgb(143 106 34 / .91) calc(var(--o) * 1% + 100%)) 0 19px / .8px calc(100% - 38px) no-repeat; }
html[data-stage="square"] .pcard:hover .pcard-stage::after { opacity: 1 !important; animation: side-flow 4s linear infinite, corner-glitter 3.2s ease-in-out infinite; }
html[data-stage="square"] .pcard:hover .pcard-ring { border-color: transparent; border-image: none; }
.pcard-disc:not(.is-cut)::after { content: ""; position: absolute; inset: 0; padding: .8px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .35s ease; background: repeating-conic-gradient(from var(--ga), #8f6a22 0deg, #a07729 5.4deg, #b48b36 11.4deg, #c89f45 17.4deg, #d9b457 22.8deg, #e2c06a 26.4deg, #d9b457 30deg, #c89f45 35.4deg, #b48b36 41.4deg, #a07729 48deg, #8f6a22 60deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude; }
.pcard:hover .pcard-disc:not(.is-cut)::after { opacity: .91; animation: edge-spin 4s linear infinite; }
.pcard:hover .pcard-disc:not(.is-cut) { box-shadow: 0 0 0 1px transparent, 0 0 16px -4px rgb(166 124 46 / .22), 0 3px 6px rgb(0 0 0 / .22), 0 30px 42px -24px rgb(0 0 0 / .85); }
/* (no reduced-motion override here: the lines animate exactly like the Quick view / Add to Cart edge) */

/* Outermost line: the same four glittering corner marks as the second line (same 22px x 2px arms, colours, glow radius and glitter timing), on the card's outer edge. */
html .pcard:has(.pcard-stage)::before { content: ""; display: block; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; width: auto; height: auto; border: 0; transform: none; pointer-events: none; opacity: 0; z-index: 5; transition: opacity .35s ease; filter: drop-shadow(0 0 2px rgb(166 124 46 / .4));
  --h: linear-gradient(90deg, #b3842a 0%, #c49232 9%, #d8a741 19%, #ecbb51 29%, #fdd265 38%, #ffd978 44%, #fdd265 50%, #ecbb51 59%, #d8a741 69%, #c49232 80%, #b3842a 100%); --hr: linear-gradient(270deg, #b3842a 0%, #c49232 9%, #d8a741 19%, #ecbb51 29%, #fdd265 38%, #ffd978 44%, #fdd265 50%, #ecbb51 59%, #d8a741 69%, #c49232 80%, #b3842a 100%);
  --v: linear-gradient(180deg, #b3842a 0%, #c49232 9%, #d8a741 19%, #ecbb51 29%, #fdd265 38%, #ffd978 44%, #fdd265 50%, #ecbb51 59%, #d8a741 69%, #c49232 80%, #b3842a 100%); --vb: linear-gradient(0deg, #b3842a 0%, #c49232 9%, #d8a741 19%, #ecbb51 29%, #fdd265 38%, #ffd978 44%, #fdd265 50%, #ecbb51 59%, #d8a741 69%, #c49232 80%, #b3842a 100%);
  background:
    linear-gradient(90deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) top left / 22px .8px no-repeat, var(--h) top left / 22px .8px no-repeat, linear-gradient(180deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) top left / .8px 22px no-repeat, var(--v) top left / .8px 22px no-repeat,
    linear-gradient(270deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) top right / 22px .8px no-repeat, var(--hr) top right / 22px .8px no-repeat, linear-gradient(180deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) top right / .8px 22px no-repeat, var(--v) top right / .8px 22px no-repeat,
    linear-gradient(90deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) bottom left / 22px .8px no-repeat, var(--h) bottom left / 22px .8px no-repeat, linear-gradient(0deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) bottom left / .8px 22px no-repeat, var(--vb) bottom left / .8px 22px no-repeat,
    linear-gradient(270deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) bottom right / 22px .8px no-repeat, var(--hr) bottom right / 22px .8px no-repeat, linear-gradient(0deg, rgb(220 163 52 / var(--k)) 0%, rgb(236 176 61 / var(--k)) 9%, rgb(255 197 77 / var(--k)) 19%, rgb(255 203 88 / var(--k)) 29%, rgb(255 212 102 / var(--k)) 38%, rgb(255 217 120 / var(--k)) 44%, rgb(255 212 102 / var(--k)) 50%, rgb(255 203 88 / var(--k)) 59%, rgb(255 197 77 / var(--k)) 69%, rgb(236 176 61 / var(--k)) 80%, rgb(220 163 52 / var(--k)) 100%) bottom right / .8px 22px no-repeat, var(--vb) bottom right / .8px 22px no-repeat; }
html .pcard:has(.pcard-stage):hover::before { opacity: 1; animation: corner-glitter 3.2s ease-in-out infinite; }

/* Second line: its corner marks now live in the same single element as its side lines (.pcard-stage::after), so they share one box exactly; the old separate corner element is retired. */
html[data-stage="square"] .pcard-ring::before { display: none; }

/* Home picture cards: KK Mart's own tile pictures are full-bleed artwork, so they fill the whole tile (product photos keep their padded fit). */
article img[src^="/kk/tiles/"] { object-fit: cover !important; padding: 0 !important; }