/* Dev designer only (product 8807) — hero text-entry bar (inspired by the reference site's
   "type your name and click go" bar). Colour uses a CSS custom property with a blue fallback,
   so any brand site with its own accent colour (several already override Luma per-store —
   see design/head/includes in core_config_data) can match it with one line, without editing
   this shared file: :root { --designer-accent: #2d6a2d; } */
#text_entry_bar {
    background: var(--designer-accent, #2d6a2d);
    border-radius: 6px;
    padding: 14px 18px;
    margin: 10px 0 16px;
    color: #fff;
}
#text_entry_row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
#text_entry_row label, #height_entry_row label {
    width: 160px;
    flex: 0 0 160px;
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
}
#height_entry_row label {
    font-size: 13px;
    font-weight: normal;
}
#text_entry_row input#text {
    flex: 1 1 240px;
    padding: 8px 10px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
}
#height_entry_row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
    opacity: 0.9;
}
#height_entry_row select#height {
    padding: 3px 6px;
    border: none;
    border-radius: 3px;
}

/* Background-colour and approx-size pills — same accent-colour family as the hero bar */
#background_pill, #dims_readout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--designer-accent, #2d6a2d);
    color: #fff;
    border-radius: 20px;
    padding: 6px 14px;
    margin: 6px 8px 10px 0;
    flex-wrap: wrap;
}
#background_pill .pill_text {
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
}
#background_pill .pill_caption {
    font-weight: normal;
    font-size: 11px;
    opacity: 0.85;
}
#background_pill #background_color_wrapper.color_wrapper {
    background: transparent;
    height: 35px;
    display: flex;
    align-items: center;
    gap: 6px;
}
#background_pill #background_color_wrapper.color_wrapper a {
    float: none;
    margin: 0;
    height: 20px;
}
#background_pill #background_color_wrapper.color_wrapper a span {
    border-color: rgba(255, 255, 255, 0.6);
}

#dims_readout .dims_label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.8);
}
#dims_readout .dims_value {
    font-size: 13px;
    color: #fff;
}
#dims_readout .dims_value strong {
    font-size: 15px;
    color: #fff;
}

/* Arc + corner-shadow disclaimer — same pill shape as #background_pill, amber-tinted to read
   as a caution note rather than another info pill */
#arc_shadow_warning {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--designer-accent, #2d6a2d);
    color: #fff;
    border-radius: 20px;
    padding: 6px 14px;
    margin: 6px 8px 10px 0;
    flex-wrap: wrap;
}
#arc_shadow_warning .pill_text {
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
}
#arc_shadow_warning .pill_caption {
    font-weight: normal;
    font-size: 11px;
    opacity: 0.9;
}

/* Dev designer only (product 8807) — fixed-size preview box, image scales to fit (no crop) */
/* height:255px matches the #preview_font_split grid row on desktop (redundant with stretch there,
   but needed as the fallback on mobile once grid-template-rows is removed at the 900px breakpoint) */
#sticker_container #textpreview {
    height: 255px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
#sticker_container #textpreview #imgWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#sticker_container #textpreview #imgWrapper img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
#sticker_container #preview_loading {
    padding: 6px 0;
    color: #888;
    font-size: 1.4em;
}

/* Dev designer only (product 8807) — 60/40 preview/font split layout, stacks below 900px */
/* Explicit 2x2 grid: header row (auto height, shared across both columns) + box row (255px,
   shared across both columns) — this is what actually guarantees #font-list and #textpreview
   start and end at the same Y position, regardless of how tall each header's own content is.
   (A nested-column approach, where each side manages its own header+box flow independently,
   can't guarantee this — the outer grid never sees a shared row boundary to align to.) */
#preview_font_split {
    display: grid;
    grid-template-columns: 40fr 60fr;
    grid-template-rows: auto 255px;
    gap: 8px 20px;
    align-items: stretch;
}
#font_header    { grid-column: 1; grid-row: 1; }
#preview_header { grid-column: 2; grid-row: 1; }
#font-list      { grid-column: 1; grid-row: 2; }
#sticker_container #textpreview { grid-column: 2; grid-row: 2; }

@media (max-width: 900px) {
    #preview_font_split {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    /* Reset the desktop grid-column/grid-row placement — without this, the explicit
       column:2 assignments below force CSS to generate an implicit second column even
       though grid-template-columns only defines one, squashing everything to the left
       instead of stacking. */
    #font_header, #preview_header, #font-list, #sticker_container #textpreview {
        grid-column: 1;
        grid-row: auto;
    }
    #preview_header { order: 1; }
    #sticker_container #textpreview { order: 2; }
    #font_header { order: 3; }
    #font-list { order: 4; }
}
#font_header, #preview_header {
    min-width: 0; /* allow grid children to shrink below content size */
}

/* Font picker — 2x2 category pill grid + filtered vertical font list */
#font-cat-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 8px 0 6px;
}

.font-cat-pill {
    padding: 7px 10px;
    border-radius: 20px;
    border: 1px solid #bbb;
    background: #f3f3f3;
    cursor: pointer;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.font-cat-pill.active {
    background: var(--designer-accent, #2d6a2d);
    color: #fff;
    border-color: var(--designer-accent, #2d6a2d);
}
@media (hover: hover) {
    .font-cat-pill:hover {
        background: var(--designer-accent, #2d6a2d);
        color: #fff;
        border-color: var(--designer-accent, #2d6a2d);
    }
}

#font-list {
    height: 255px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
}

.font-section-hidden { display: none; }

.font-section-fonts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.font-item { display: block; line-height: 0; }
.font-item img {
    height: 24px;
    width: auto;
    max-width: 100%;
    display: block;
    opacity: 0.7;
    border: 2px solid transparent;
    border-radius: 2px;
    transition: opacity 0.15s, border-color 0.15s;
}
.font-item:hover img { opacity: 1; border-color: #aaa; }
.font-item.active img { opacity: 1; border-color: var(--designer-accent, #2d6a2d); }

/* Colour / Outline / Shadow — card layout replacing the old flat swatch walls */
#effects_colour_section {
    text-align: left;
}

.effect-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
    text-align: left;
}

.effect-card-header {
    background: var(--designer-accent, #2d6a2d);
    color: #fff;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.effect-card-value {
    font-weight: normal;
    font-size: 13px;
    opacity: 0.9;
    margin-left: 4px;
}

.effect-card-body {
    padding: 14px 16px;
}

.premium-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: #8a6d00;
}

/* Outline / Shadow toggle rows — collapsed by default, expand the card body when active.
   Fixed label column keeps both rows' action groups (hint + arrow + buttons) starting at the
   same x position; the group itself is a flex block so the hint text sits right against the
   buttons it's pointing at, rather than being spread apart by the row's own flexible space. */
.effect-toggle-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fafafa;
    text-align: left;
}

.effect-toggle-row.active {
    background: #eef5ee;
}

.effect-toggle-label {
    font-weight: bold;
    font-size: 14px;
    /* the label column is a fixed 160px (shared with the Shadow row so both action groups
       line up) — a long colour name like "LIGHT GREY" no longer fits at that width, so let
       it overflow into the row's flexible middle space instead of wrapping onto 2 lines */
    white-space: nowrap;
}

.effect-toggle-value {
    font-weight: normal;
    font-size: 12px;
    color: #666;
    margin-left: 4px;
}

.effect-toggle-action {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.effect-toggle-hint {
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

.effect-toggle-arrow {
    font-size: 20px;
    line-height: 1;
    color: var(--designer-accent, #2d6a2d);
    font-weight: bold;
}

@media (max-width: 560px) {
    .effect-toggle-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }
    .effect-toggle-action {
        justify-content: flex-start;
    }
}

/* Outline / Shadow type — segmented control makes the None/On choice (and, for shadow,
   the block-vs-gap exclusivity) visually explicit instead of a plain checkbox */
.segmented-control {
    display: inline-flex;
    border: 1px solid #bbb;
    border-radius: 20px;
    overflow: hidden;
}

.segmented-control .segment {
    border: none;
    border-right: 1px solid #bbb;
    background: #f3f3f3;
    padding: 7px 14px;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.segmented-control .segment:last-child {
    border-right: none;
}

.segmented-control .segment.active {
    background: var(--designer-accent, #2d6a2d);
    color: #fff;
}

/* Outline / Shadow thickness — pill buttons, same visual language as the font-category pills */
.thickness-pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.thickness-caption {
    font-size: 12px;
    color: #555;
    margin-right: 2px;
}

.effect-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #bbb;
    background: #f3f3f3;
    cursor: pointer;
    font-size: 13px;
    font-weight: normal;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.effect-pill input {
    margin: 0;
}

.effect-pill.active {
    background: var(--designer-accent, #2d6a2d);
    color: #fff;
    border-color: var(--designer-accent, #2d6a2d);
}

/* The shared designer.css hardcodes .color_wrapper to a fixed 35px height, sized for the
   original single-row swatch layout. Our grids now wrap onto several rows (standard colours
   + divider + premium swatches), so that fixed height was clipping the box short while the
   floated swatches visually spilled out below it — whatever followed (premium note, shadow
   position control) then rendered overlapping that spillover instead of sitting cleanly below. */
#effects_colour_section .color_wrapper {
    height: auto;
}

/* Premium (glitter/chrome) swatches — gold ring instead of the plain red border */
#effects_colour_section .color_wrapper a.special span {
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 0 2px #d4a017 inset;
}

/* Simple divider between standard and premium (glitter/chrome) swatches — floats inline
   with the swatches themselves since they're float-based, not a full row break */
#effects_colour_section .color_wrapper .colour-divider {
    float: left;
    width: 1px;
    height: 25px;
    background: #ccc;
    margin: 0 12px 18px 4px;
}

/* Shadow position compass — enlarged from the original 37px, with a text readout */
#sticker_container #shadow_position_wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    float: none;
    margin: 14px 0 0;
    flex-wrap: wrap;
}

.shadow_position_label {
    font-size: 13px;
    color: #444;
}

/* Fixed-width readout — "Bottom Right" is the longest label of the 8; reserving its width
   up front stops the compass from jumping sideways as the shorter labels swap in/out. */
#shadow_position_readout {
    display: inline-block;
    min-width: 88px;
    text-align: left;
}

/* 63px compass (25% smaller than the original 84px enlargement) */
#sticker_container #shadow_position {
    float: none;
    position: relative;
    width: 63px;
    height: 63px;
    margin: 0;
    flex: 0 0 63px;
}

#sticker_container #shadow_position a {
    width: 18px;
    height: 18px;
    border: 1px solid #999;
    border-radius: 3px;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
}

#sticker_container #shadow_position a.current {
    background: var(--designer-accent, #2d6a2d);
    border-color: var(--designer-accent, #2d6a2d);
}

#sticker_container #shadow_position a.lt { top: 0; left: 0; }
#sticker_container #shadow_position a.t { top: 0; left: 22.5px; }
#sticker_container #shadow_position a.rt { top: 0; left: 45px; }
#sticker_container #shadow_position a.l { top: 22.5px; left: 0; }
#sticker_container #shadow_position a.r { top: 22.5px; left: 45px; }
#sticker_container #shadow_position a.lb { top: 45px; left: 0; }
#sticker_container #shadow_position a.b { top: 45px; left: 22.5px; }
#sticker_container #shadow_position a.rb { top: 45px; left: 45px; }

/* Price / Qty / Add to Cart — merged into one row on desktop (Price, moved here by JS
   since it's a separate block in the layout, sits first; Qty next; button fills the rest).
   Button colour is deliberately left alone: HorseboxGraphics already brands .action.primary
   green site-wide (see project_per_site_branding memory), so overriding it here would fight
   that rather than match it. */
#sticker_container .box-tocart {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    margin: 14px 0 0;
    text-align: left;
}

#sticker_container .box-tocart .fieldset {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
}

.product-info-price {
    order: -1;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    flex: 0 0 auto;
}

.product-info-price .price {
    color: var(--designer-accent, #2d6a2d);
    font-size: 26px;
    font-weight: bold;
    white-space: nowrap;
}

/* "inc VAT" as a pseudo-element rather than JS-appended text — the JS overwrites
   .price's content on every reload, but never touches ::after, so this survives it */
.product-info-price .price::after {
    content: "inc VAT";
    display: inline-block;
    margin-left: 6px;
    font-size: 13px;
    font-weight: normal;
    color: #888;
}

#sticker_container .field.qty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex: 0 0 auto;
}

#sticker_container .field.qty .label {
    font-weight: bold;
    font-size: 16px;
    margin: 0;
}

#sticker_container .field.qty .control {
    margin: 0;
}

#sticker_container #qty {
    width: 76px;
    padding: 10px 12px;
    border: 1px solid #bbb;
    border-radius: 8px;
    font-size: 18px;
    text-align: center;
}

#sticker_container .box-tocart .actions {
    /* fixed to content size, not flex-grow — flex-basis would otherwise apply to
       HEIGHT once the mobile query below switches .fieldset to a column, and its
       default align-items:stretch would balloon the button to match */
    flex: 0 0 auto;
    display: flex;
}

#sticker_container #product-addtocart-button {
    /* Luma's own .box-tocart .action.tocart rule sets width:49% at desktop widths
       (sized for a two-button Add to Cart + Wishlist row) — override back to content
       size since flex-basis:auto defers to an explicit width when one is set. */
    width: auto;
    flex: 0 0 auto;
    border-radius: 24px;
    padding: 10px 28px;
    font-size: 15px;
    white-space: nowrap;
}

/* ~15% wider on desktop only (horizontal padding only — height stays the same) so
   it reads as the prominent call-to-action without growing taller than it needs to */
@media (min-width: 561px) {
    #sticker_container #product-addtocart-button {
        padding: 10px 42px;
    }
}

/* Below 560px, stack Price / Qty / Add to Cart as full-width rows instead of
   wrapping mid-line, so nothing ends up squashed together on a narrow screen. */
@media (max-width: 560px) {
    #sticker_container .box-tocart .fieldset {
        flex-direction: column;
        align-items: stretch;
    }
    .product-info-price {
        text-align: center;
    }
    #sticker_container .field.qty {
        justify-content: center;
    }
    #sticker_container #product-addtocart-button {
        width: 100%;
    }
}