/* ===========================================================================
   BEREKET interaction states. GENERATED by tools/design-pipeline/to_razor.py,
   do not edit by hand.

   The prototype generated one hover class per page and restarted the
   numbering each time, so the same name meant different things from page to
   page. These are matched on value instead: one class per behaviour, the
   same on every page. A red button hovers identically in shop, home and
   checkout because all three point at .bk-hover-red.

   !important is carried over from the generated rules: these states have to
   win against the inline styles the design ships on the same elements.
   =========================================================================== */

/* Field focus ring: hairline plus red halo. */
.bk-focus-ring:focus { box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .08), 0 0 0 2px rgba(224, 27, 36, .4) !important; }

/* Add button once its cut is already in the basket.   (not currently used) */
.bk-hover-added:hover { background: #155424 !important; }

/* Tertiary control fills with canvas and inks its label. */
.bk-hover-canvas:hover { background: #F5F5F7 !important; color: #0B0B0C !important; }

/* Ghost control on white, such as the basket's close and quantity buttons.   (not currently used) */
.bk-hover-canvas-fill:hover { background: #F5F5F7 !important; }

/* Product card on a light ground: hairline ring and a soft drop. */
.bk-hover-card:hover { background-color: #FDFDFE !important; box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .16), 0 10px 30px rgba(11, 11, 12, .07) !important; }

/* Inactive category chip on the shop.   (not currently used) */
.bk-hover-chip:hover { background: #F0F0F2 !important; }

/* Quiet button on a light ground. */
.bk-hover-fill:hover { background: #E6E6EA !important; }

/* Glass card over photography deepens and lifts.   (not currently used) */
.bk-hover-glass-card:hover { background-color: rgba(11, 11, 12, .7) !important; box-shadow: 0 22px 60px rgba(0, 0, 0, .45) !important; }

/* Dark chip or pill lifting one step on a dark ground. */
.bk-hover-graphite:hover { background: #2E2E32 !important; }

/* Card lifts 4px with a soft shadow. */
.bk-hover-lift:hover { transform: translateY(-4px) !important; box-shadow: 0 24px 60px rgba(11, 11, 12, .1) !important; }

/* Faintest lift for a control on a dark ground. */
.bk-hover-light-10:hover { background: rgba(255, 255, 255, .1) !important; }

/* Standard lift on a dark ground. */
.bk-hover-light-12:hover { background: rgba(255, 255, 255, .12) !important; }

/* Quiet menu action whose slate label brightens to white, such as Sign out.   (not currently used) */
.bk-hover-light-12-ink:hover { background: rgba(255, 255, 255, .12) !important; color: #FFFFFF !important; }

/* Icon button on a dark ground.   (not currently used) */
.bk-hover-light-14:hover { background: rgba(255, 255, 255, .14) !important; }

/* Stronger lift, for controls sitting on photography. */
.bk-hover-light-20:hover { background: rgba(255, 255, 255, .2) !important; }

/* Lightbox arrows and close, over a dark scrim.   (not currently used) */
.bk-hover-light-22:hover { background: rgba(255, 255, 255, .22) !important; }

/* Control over a busy photograph, just short of the glass button.   (not currently used) */
.bk-hover-light-26:hover { background: rgba(255, 255, 255, .26) !important; }

/* Glass button on photography.   (not currently used) */
.bk-hover-light-28:hover { background: rgba(255, 255, 255, .28) !important; }

/* Nav and inline links warm to the coral red.   (not currently used) */
.bk-hover-nav:hover { color: #FF5A52 !important; }

/* Outlined control, the ring appears on hover. */
.bk-hover-outline:hover { box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .18) !important; }

/* Primary red button darkens on hover. */
.bk-hover-red:hover { background: #C4161E !important; }

/* Solid control on a dark ground.   (not currently used) */
.bk-hover-steel:hover { background: #3C3C42 !important; }

/* Image scales inside its frame. */
.bk-hover-zoom:hover { transform: scale(1.03) !important; }

/* Button press.   (not currently used) */
.bk-press:active { transform: scale(.95) !important; }

/* Barely-there press on large surfaces such as gallery thumbnails. */
.bk-press-faint:active { transform: scale(.99) !important; }

/* Firmer press, used on the larger buttons.   (not currently used) */
.bk-press-firm:active { transform: scale(.94) !important; }

/* Light press on full-width buttons. */
.bk-press-soft:active { transform: scale(.98) !important; }